diff --git a/presentation/src/main/java/common/util/extensions/NumberExtensions.kt b/presentation/src/main/java/common/util/extensions/NumberExtensions.kt
index abaa7856..240de11f 100644
--- a/presentation/src/main/java/common/util/extensions/NumberExtensions.kt
+++ b/presentation/src/main/java/common/util/extensions/NumberExtensions.kt
@@ -34,4 +34,8 @@ fun Int.forEach(action: (Int) -> Unit) {
     for (index in 0 until this) {
         action(index)
     }
+}
+
+fun Float.within(min: Float, max: Float): Float {
+    return Math.min(max, Math.max(min, this))
 }
\ No newline at end of file
diff --git a/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt b/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
index b9ca6610..6c5a2edc 100644
--- a/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
+++ b/presentation/src/main/java/feature/themepicker/ThemePickerActivity.kt
@@ -25,7 +25,9 @@ import com.moez.QKSMS.R
 import com.uber.autodispose.android.lifecycle.scope
 import com.uber.autodispose.kotlin.autoDisposable
 import common.base.QkThemedActivity
+import common.util.extensions.dpToPx
 import common.util.extensions.setBackgroundTint
+import common.util.extensions.within
 import injection.appComponent
 import kotlinx.android.synthetic.main.theme_picker_activity.*
 import kotlinx.android.synthetic.main.theme_picker_hsl.*
@@ -40,6 +42,8 @@ class ThemePickerActivity : QkThemedActivity<ThemePickerViewModel>(), ThemePicke
     @Inject lateinit var themeAdapter: ThemeAdapter
     @Inject lateinit var themePagerAdapter: ThemePagerAdapter
 
+    private val swatchPadding by lazy { 18.dpToPx(this) }
+
     init {
         appComponent.inject(this)
     }
@@ -70,22 +74,17 @@ class ThemePickerActivity : QkThemedActivity<ThemePickerViewModel>(), ThemePicke
         hue.setOnTouchListener { _, event ->
             when (event.action) {
                 MotionEvent.ACTION_DOWN -> {
-                    dX = swatch.x - event.rawX
-                    dY = swatch.y - event.rawY
-
-                    swatch.animate()
-                            .x(event.rawX + dX)
-                            .y(event.rawY + dY)
-                            .setDuration(0)
-                            .start()
+                    dX = event.x - event.rawX
+                    dY = event.y - event.rawY
                 }
 
-                MotionEvent.ACTION_MOVE ->
-                    swatch.animate()
-                            .x(event.rawX + dX)
-                            .y(event.rawY + dY)
-                            .setDuration(0)
-                            .start()
+                MotionEvent.ACTION_MOVE -> {
+                    val min = hue.x - swatch.width / 2
+                    val max = min + hue.width
+
+                    swatch.x = (event.rawX + dX + swatchPadding).within(min, max)
+                    swatch.y = (event.rawY + dY + swatchPadding).within(min, max)
+                }
 
                 else -> return@setOnTouchListener false
             }
diff --git a/presentation/src/main/res/layout/theme_picker_hsl.xml b/presentation/src/main/res/layout/theme_picker_hsl.xml
index 4dbcd519..1f90524c 100644
--- a/presentation/src/main/res/layout/theme_picker_hsl.xml
+++ b/presentation/src/main/res/layout/theme_picker_hsl.xml
@@ -31,23 +31,23 @@
 
     <FrameLayout
         android:id="@+id/swatch"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:padding="18dp">
-
-        <View
-            android:layout_width="12dp"
-            android:layout_height="12dp"
-            android:layout_gravity="center"
-            android:background="@drawable/circle" />
+        android:layout_width="12dp"
+        android:layout_height="12dp"
+        android:background="@drawable/circle"
+        android:padding="1dp"
+        android:layout_margin="18dp"
+        app:layout_constraintBottom_toBottomOf="@id/hue"
+        app:layout_constraintEnd_toEndOf="@id/hue"
+        app:layout_constraintStart_toStartOf="@id/hue"
+        app:layout_constraintTop_toTopOf="@id/hue">
 
         <View
             android:id="@+id/swatchPreview"
-            android:layout_width="10dp"
-            android:layout_height="10dp"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
             android:layout_gravity="center"
             android:background="@drawable/circle"
-            tools:backgroundTint="@color/tools_theme" />
+            android:backgroundTint="@color/tools_theme" />
 
     </FrameLayout>