diff --git a/app/src/main/kotlin/org/koitharu/kotatsu/core/ui/widgets/DotsIndicator.kt b/app/src/main/kotlin/org/koitharu/kotatsu/core/ui/widgets/DotsIndicator.kt
index 9a2d84701..17eaaca1d 100644
--- a/app/src/main/kotlin/org/koitharu/kotatsu/core/ui/widgets/DotsIndicator.kt
+++ b/app/src/main/kotlin/org/koitharu/kotatsu/core/ui/widgets/DotsIndicator.kt
@@ -15,17 +15,23 @@ import org.koitharu.kotatsu.core.util.ext.getThemeColor
 import org.koitharu.kotatsu.core.util.ext.measureDimension
 import org.koitharu.kotatsu.core.util.ext.resolveDp
 import org.koitharu.kotatsu.parsers.util.toIntUp
+import com.google.android.material.R as materialR
 
 class DotsIndicator @JvmOverloads constructor(
 	context: Context,
 	attrs: AttributeSet? = null,
-	defStyleAttr: Int = 0,
+	defStyleAttr: Int = R.attr.dotIndicatorStyle,
 ) : View(context, attrs, defStyleAttr) {
 
 	private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
 	private var indicatorSize = context.resources.resolveDp(12f)
 	private var dotSpacing = 0f
+	private var smallDotScale = 0.33f
+	private var smallDotAlpha = 0.6f
 	private var positionOffset: Float = 0f
+	private var position: Int = 0
+	private val inset = context.resources.resolveDp(1f)
+
 	var max: Int = 6
 		set(value) {
 			if (field != value) {
@@ -34,23 +40,28 @@ class DotsIndicator @JvmOverloads constructor(
 				invalidate()
 			}
 		}
-	var position: Int = 2
+	var progress: Int
+		get() = position
 		set(value) {
-			if (field != value) {
-				field = value
+			if (position != value) {
+				position = value
 				invalidate()
 			}
 		}
 
 	init {
-		paint.strokeWidth = context.resources.resolveDp(1.5f)
+		paint.style = Paint.Style.FILL
 		context.withStyledAttributes(attrs, R.styleable.DotsIndicator, defStyleAttr) {
 			paint.color = getColor(
 				R.styleable.DotsIndicator_dotColor,
-				context.getThemeColor(com.google.android.material.R.attr.colorPrimary, Color.DKGRAY),
+				context.getThemeColor(materialR.attr.colorOnBackground, Color.DKGRAY),
 			)
 			indicatorSize = getDimension(R.styleable.DotsIndicator_dotSize, indicatorSize)
 			dotSpacing = getDimension(R.styleable.DotsIndicator_dotSpacing, dotSpacing)
+			smallDotScale = getFloat(R.styleable.DotsIndicator_dotScale, smallDotScale).coerceIn(0f, 1f)
+			smallDotAlpha = getFloat(R.styleable.DotsIndicator_dotAlpha, smallDotAlpha).coerceIn(0f, 1f)
+			max = getInt(R.styleable.DotsIndicator_android_max, max)
+			position = getInt(R.styleable.DotsIndicator_android_progress, position)
 		}
 	}
 
@@ -59,26 +70,21 @@ class DotsIndicator @JvmOverloads constructor(
 		val dotSize = getDotSize()
 		val y = paddingTop + (height - paddingTop - paddingBottom) / 2f
 		var x = paddingLeft + dotSize / 2f
-		val radius = dotSize / 2f - paint.strokeWidth
+		val radius = dotSize / 2f - inset
 		val spacing = (width - paddingLeft - paddingRight) / max.toFloat() - dotSize
 		x += spacing / 2f
-		paint.style = Paint.Style.STROKE
 		for (i in 0 until max) {
-			canvas.drawCircle(x, y, radius, paint)
-			if (i == position) {
-				paint.style = Paint.Style.FILL
-				paint.alpha = (255 * (1f - positionOffset)).toInt()
-				canvas.drawCircle(x, y, radius, paint)
-				paint.alpha = 255
-				paint.style = Paint.Style.STROKE
-			}
-			if (i == position + 1 && positionOffset > 0f) {
-				paint.style = Paint.Style.FILL
-				paint.alpha = (255 * positionOffset).toInt()
-				canvas.drawCircle(x, y, radius, paint)
-				paint.alpha = 255
-				paint.style = Paint.Style.STROKE
+			val scale = when (i) {
+				position -> (1f - smallDotScale) * (1f - positionOffset) + smallDotScale
+				position + 1 -> (1f - smallDotScale) * positionOffset + smallDotScale
+				else -> smallDotScale
 			}
+			paint.alpha = (255 * when (i) {
+				position -> (1f - smallDotAlpha) * (1f - positionOffset) + smallDotAlpha
+				position + 1 -> (1f - smallDotAlpha) * positionOffset + smallDotAlpha
+				else -> smallDotAlpha
+			}).toInt()
+			canvas.drawCircle(x, y, radius * scale, paint)
 			x += spacing + dotSize
 		}
 	}
@@ -114,11 +120,6 @@ class DotsIndicator @JvmOverloads constructor(
 			this@DotsIndicator.positionOffset = positionOffset
 			invalidate()
 		}
-
-		override fun onPageSelected(position: Int) {
-			super.onPageSelected(position)
-			this@DotsIndicator.position = position
-		}
 	}
 
 	private inner class AdapterObserver(
diff --git a/app/src/main/res/layout/item_recommendation.xml b/app/src/main/res/layout/item_recommendation.xml
index 3bde7885d..e87508187 100644
--- a/app/src/main/res/layout/item_recommendation.xml
+++ b/app/src/main/res/layout/item_recommendation.xml
@@ -2,6 +2,7 @@
 <LinearLayout
 	xmlns:android="http://schemas.android.com/apk/res/android"
 	xmlns:app="http://schemas.android.com/apk/res-auto"
+	xmlns:tools="http://schemas.android.com/tools"
 	android:layout_width="match_parent"
 	android:layout_height="wrap_content"
 	android:orientation="vertical">
@@ -17,8 +18,11 @@
 		android:layout_height="wrap_content"
 		android:layout_gravity="center_horizontal"
 		android:layout_marginVertical="@dimen/margin_small"
+		app:dotAlpha="0.6"
 		app:dotSize="8dp"
-		app:dotSpacing="6dp" />
+		app:dotSpacing="4dp"
+		tools:max="6"
+		tools:progress="2" />
 
 </LinearLayout>
 
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index d172f4e6f..690f1081d 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -9,6 +9,7 @@
 	<attr name="fastScrollerStyle" />
 	<attr name="tipViewStyle" />
 	<attr name="progressButtonStyle" />
+	<attr name="dotIndicatorStyle" />
 
 	<!--CoverImageView attrs-->
 	<declare-styleable name="CoverImageView">
@@ -163,8 +164,12 @@
 		<attr name="dotSize" format="dimension">
 			<enum name="fit" value="-1" />
 		</attr>
+		<attr name="dotScale" format="float" />
+		<attr name="dotAlpha" format="float" />
 		<attr name="dotColor" format="color" />
 		<attr name="dotSpacing" format="dimension" />
+		<attr name="android:max" />
+		<attr name="android:progress" />
 	</declare-styleable>
 
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index b102532cd..e2eb1e149 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -169,6 +169,10 @@
 		<item name="scrollerOffset">@dimen/grid_spacing_outer</item>
 	</style>
 
+	<style name="Widget.Kotatsu.DotIndicator" parent="">
+
+	</style>
+
 	<style name="Widget.Kotatsu.ListItemTextView" parent="">
 		<item name="android:textColor">@color/list_item_text_color</item>
 		<item name="backgroundFillColor">@color/list_item_background_color</item>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index c718a5cbe..64dfec06b 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -71,24 +71,20 @@
 		<item name="textInputStyle">@style/Widget.Material3.TextInputLayout.OutlinedBox</item>
 		<item name="toolbarStyle">@style/Widget.Material3.Toolbar</item>
 		<item name="appBarLayoutStyle">@style/Widget.Kotatsu.AppBarLayout</item>
-		<item name="bottomNavigationStyle">
-			@style/Widget.Kotatsu.BottomNavigationView.ColoredIndicators
-		</item>
+		<item name="bottomNavigationStyle">@style/Widget.Kotatsu.BottomNavigationView.ColoredIndicators</item>
 		<item name="tabStyle">@style/Widget.Kotatsu.Tabs</item>
 		<item name="materialCardViewStyle">@style/Widget.Kotatsu.CardView.Filled</item>
 		<item name="recyclerViewStyle">@style/Widget.Kotatsu.RecyclerView</item>
 		<item name="fastScrollerStyle">@style/Widget.Kotatsu.FastScroller</item>
 		<item name="listItemTextViewStyle">@style/Widget.Kotatsu.ListItemTextView</item>
-		<item name="materialSwitchStyle">@style/Widget.Material3.CompoundButton.MaterialSwitch
-		</item>
+		<item name="materialSwitchStyle">@style/Widget.Material3.CompoundButton.MaterialSwitch</item>
 		<item name="switchPreferenceCompatStyle">@style/Preference.SwitchPreferenceCompat.M3</item>
 		<item name="collapsingToolbarLayoutStyle">@style/Widget.Kotatsu.CollapsingToolbar</item>
-		<item name="circularProgressIndicatorStyle">
-			@style/Widget.Kotatsu.CircularProgressIndicator
-		</item>
+		<item name="circularProgressIndicatorStyle">@style/Widget.Kotatsu.CircularProgressIndicator</item>
 		<item name="linearProgressIndicatorStyle">@style/Widget.Kotatsu.LinearProgressIndicator</item>
 		<item name="bottomSheetDragHandleStyle">@style/Widget.Kotatsu.BottomSheet.DragHandle</item>
 		<item name="android:dropDownSpinnerStyle">@style/Widget.Kotatsu.Spinner.DropDown</item>
+		<item name="dotIndicatorStyle">@style/Widget.Kotatsu.DotIndicator</item>
 
 		<!-- Text appearance -->
 		<item name="actionMenuTextAppearance">@style/TextAppearance.Kotatsu.Menu</item>