diff --git a/presentation/src/main/java/feature/themepicker/HSVPickerView.kt b/presentation/src/main/java/feature/themepicker/HSVPickerView.kt
index 4eabf8b4..566d5909 100644
--- a/presentation/src/main/java/feature/themepicker/HSVPickerView.kt
+++ b/presentation/src/main/java/feature/themepicker/HSVPickerView.kt
@@ -77,6 +77,23 @@ class HSVPickerView @JvmOverloads constructor(context: Context, attrs: Attribute
             true
         }
 
+        var hueThumbX = 0f
+
+        hueBackground.setOnTouchListener { _, event ->
+            when (event.action) {
+                MotionEvent.ACTION_DOWN -> {
+                    hueThumbX = event.x - event.rawX
+                }
+
+                MotionEvent.ACTION_MOVE -> {
+                    hueThumb.x = (event.rawX + hueThumbX + hueThumb.width / 2).within(0f, width - hueThumb.width.toFloat())
+                }
+
+                else -> return@setOnTouchListener false
+            }
+            true
+        }
+
         hueBackground.clipToOutline = true
         hueBackground.setImageDrawable(GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, hues))
     }
diff --git a/presentation/src/main/res/layout/hsv_picker_view.xml b/presentation/src/main/res/layout/hsv_picker_view.xml
index 59eabbb5..d5912425 100644
--- a/presentation/src/main/res/layout/hsv_picker_view.xml
+++ b/presentation/src/main/res/layout/hsv_picker_view.xml
@@ -46,19 +46,37 @@
         android:layout_width="16dp"
         android:layout_height="16dp"
         android:background="@drawable/circle"
-        android:elevation="2dp"
+        android:elevation="4dp"
         android:padding="2dp"
         android:src="@drawable/circle"
         tools:tint="@color/tools_theme" />
 
-    <ImageView
-        android:id="@+id/hueBackground"
+    <FrameLayout
         android:layout_width="0dp"
-        android:layout_height="2dp"
-        android:layout_marginTop="24dp"
-        android:background="@drawable/rounded_rectangle_2dp"
+        android:layout_height="wrap_content"
+        android:clipToPadding="false"
+        android:paddingBottom="16dp"
+        android:paddingTop="16dp"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="@id/saturation"
         app:layout_constraintStart_toStartOf="@id/saturation"
-        app:layout_constraintTop_toBottomOf="@id/saturation" />
+        app:layout_constraintTop_toBottomOf="@id/saturation">
+
+        <ImageView
+            android:id="@+id/hueBackground"
+            android:layout_width="match_parent"
+            android:layout_height="2dp"
+            android:layout_gravity="center_vertical"
+            android:background="@drawable/rounded_rectangle_2dp" />
+
+        <View
+            android:id="@+id/hueThumb"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            android:background="@drawable/circle"
+            android:elevation="4dp"
+            tools:tint="@color/tools_theme" />
+
+    </FrameLayout>
 
 </merge>
\ No newline at end of file