diff --git a/Memola/Features/Memo/ColorPicker/ColorPicker.swift b/Memola/Features/Memo/ColorPicker/ColorPicker.swift
index ff8604b..fede27b 100644
--- a/Memola/Features/Memo/ColorPicker/ColorPicker.swift
+++ b/Memola/Features/Memo/ColorPicker/ColorPicker.swift
@@ -10,40 +10,22 @@ import Foundation
 
 struct ColorPicker: View {
     @ObservedObject var pen: Pen
+    @EnvironmentObject var tool: Tool
 
     @State var hue: Double = 1
     @State var saturation: Double = 0
     @State var brightness: Double = 1
     @State var alpha: Double = 1
 
-    let size: CGFloat = 18
+    let size: CGFloat = 20
 
     var body: some View {
         VStack(spacing: 10) {
             colorPicker
-                .frame(width: 180, height: 180)
+                .frame(width: 200, height: 200)
             HStack(spacing: 10) {
-                Color(hue: hue, saturation: saturation, brightness: brightness)
-                    .overlay {
-                        Image("transparent-grid-square")
-                            .resizable()
-                            .scaleEffect(1.8)
-                            .aspectRatio(contentMode: .fill)
-                            .clipShape(Triangle())
-                        pen.color
-                            .clipShape(Triangle())
-                    }
-                    .frame(width: size * 2 + 10)
-                    .cornerRadius(5)
-                    .drawingGroup()
-                    .overlay {
-                        RoundedRectangle(cornerRadius: 5)
-                            .stroke(Color.gray, lineWidth: 0.2)
-                    }
-                VStack(spacing: 15) {
-                    hueSlider
-                    alphaSlider
-                }
+                hueSlider
+                alphaSlider
             }
         }
         .padding(10)
@@ -135,11 +117,6 @@ struct ColorPicker: View {
                     .offset(x: max(size, proxy.size.width * hue - 2))
             }
             .frame(width: proxy.size.width, height: proxy.size.height)
-            .clipShape(Capsule())
-            .overlay {
-                Capsule()
-                    .stroke(Color.gray, lineWidth: 0.2)
-            }
             .gesture(
                 DragGesture(minimumDistance: 0)
                     .onChanged { value in
@@ -151,6 +128,12 @@ struct ColorPicker: View {
                         updateBaseColor()
                     }
             )
+            .clipShape(Capsule())
+            .overlay {
+                Capsule()
+                    .stroke(Color.gray, lineWidth: 0.2)
+            }
+            .frame(height: proxy.size.height)
         }
         .frame(height: size)
     }
@@ -187,11 +170,6 @@ struct ColorPicker: View {
                     .offset(x: max(size, proxy.size.width * alpha - 2))
             }
             .frame(width: proxy.size.width, height: proxy.size.height)
-            .clipShape(Capsule())
-            .overlay {
-                Capsule()
-                    .stroke(Color.gray, lineWidth: 0.2)
-            }
             .gesture(
                 DragGesture(minimumDistance: 0)
                     .onChanged { value in
@@ -203,11 +181,18 @@ struct ColorPicker: View {
                         updateBaseColor()
                     }
             )
+            .clipShape(Capsule())
+            .overlay {
+                Capsule()
+                    .stroke(Color.gray, lineWidth: 0.2)
+            }
+            .frame(height: proxy.size.height)
         }
         .frame(height: size)
     }
 
     func updateBaseColor() {
         pen.color = Color(hue: hue, saturation: saturation, brightness: brightness).opacity(0.7 * alpha + 0.3)
+        tool.objectWillChange.send()
     }
 }
diff --git a/Memola/Features/Memo/PenDock/PenDockView.swift b/Memola/Features/Memo/PenDock/PenDockView.swift
index 801f3ec..2db5934 100644
--- a/Memola/Features/Memo/PenDock/PenDockView.swift
+++ b/Memola/Features/Memo/PenDock/PenDockView.swift
@@ -17,7 +17,7 @@ struct PenDockView: View {
     var body: some View {
         VStack(alignment: .trailing) {
             if let pen = tool.selectedPen {
-                VStack(spacing: 15) {
+                VStack(spacing: 5) {
                     penColorView(pen)
                     penThicknessView(pen)
                 }
@@ -141,25 +141,30 @@ struct PenDockView: View {
             tool.opensColorPicker = true
         } label: {
             let hsba = pen.color.hsba
-            Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
-                .overlay {
+            let baseColor = Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
+            GeometryReader { proxy in
+                HStack(spacing: 0) {
+                    baseColor
+                        .frame(width: proxy.size.width / 2)
                     Image("transparent-grid-square")
                         .resizable()
-                        .scaleEffect(1.8)
+                        .scaleEffect(3)
                         .aspectRatio(contentMode: .fill)
-                        .clipShape(Triangle())
-                    pen.color
-                        .clipShape(Triangle())
+                        .opacity(1 - hsba.alpha)
+                        .frame(width: proxy.size.width / 2)
+                        .clipped()
                 }
-                .background(.white)
-                .clipShape(Capsule())
-                .frame(height: 25)
-                .overlay {
-                    Capsule()
-                        .stroke(Color.gray, lineWidth: 0.4)
-                }
-                .padding(0.2)
-                .drawingGroup()
+            }
+            .background(baseColor)
+            .clipShape(RoundedRectangle(cornerRadius: 10))
+            .frame(height: 28)
+            .overlay {
+                RoundedRectangle(cornerRadius: 10)
+                    .stroke(Color.gray, lineWidth: 0.4)
+            }
+            .padding(0.2)
+            .padding(.top, 4)
+            .drawingGroup()
         }
         .hoverEffect(.lift)
         .popover(isPresented: $tool.opensColorPicker) {