diff --git a/src/components/Slider/Slider.scss b/src/components/Slider/Slider.scss
index 5e6ad5d..c9c0bd9 100644
--- a/src/components/Slider/Slider.scss
+++ b/src/components/Slider/Slider.scss
@@ -1,6 +1,21 @@
 @use '../../styles/index' as s;
 @use 'sass:map';
 
+@mixin slider-thumb($width, $height) {
+  width: $width;
+  height: $height;
+  border: 2px solid s.color(black);
+  background: s.color(white) url('../../assets/paper.png');
+  background-size: cover;
+  cursor: pointer;
+  border-radius: 0;
+  transition: all 0.15s ease-in-out;
+  &:hover {
+    background: s.color(yellow-600) url('../../assets/paper.png');
+    transform: scale(1.1);
+  }
+}
+
 .slider {
   @include s.flex-box(default, center, row);
   gap: 12px;
@@ -11,20 +26,39 @@
     appearance: none;
     width: 200px;
     height: 8px;
-    border: 2px solid s.color(black);
     border-radius: 0;
     background-size: cover;
     cursor: pointer;
 
-    &::-webkit-slider-thumb,
-    &::-moz-range-thumb {
-      width: 18px;
-      height: 18px;
+    // 트랙 (크롬/사파리)
+    &::-webkit-slider-runnable-track {
+      height: 8px;
+      border: 2px solid s.color(black);
+      background: s.color(white) url('../../assets/paper.png');
+      background-size: cover;
+    }
+
+    // 트랙 (파이어폭스)
+    &::-moz-range-track {
+      height: 8px;
+      border: 2px solid s.color(black);
+      background: s.color(white) url('../../assets/paper.png');
+      background-size: cover;
+    }
+
+    // 손잡이
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      margin-top: -8px;
+
+      width: 20px;
+      height: 20px;
       border: 2px solid s.color(black);
       background: s.color(white) url('../../assets/paper.png');
       background-size: cover;
       cursor: pointer;
       transition: all 0.15s ease-in-out;
+      border-radius: 0;
 
       &:hover {
         background: s.color(yellow-600) url('../../assets/paper.png');
@@ -32,10 +66,19 @@
       }
     }
 
-    &::-moz-range-track {
-      height: 10px;
+    &::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
       border: 2px solid s.color(black);
+      background: s.color(white) url('../../assets/paper.png');
       background-size: cover;
+      cursor: pointer;
+      border-radius: 0;
+      transition: all 0.15s ease-in-out;
+      &:hover {
+        background: s.color(yellow-600) url('../../assets/paper.png');
+        transform: scale(1.1);
+      }
     }
   }
 
diff --git a/src/components/Switch/Switch.scss b/src/components/Switch/Switch.scss
index de4294c..8bf7b10 100644
--- a/src/components/Switch/Switch.scss
+++ b/src/components/Switch/Switch.scss
@@ -35,14 +35,17 @@ $thumb-checked-left: $switch-width - $thumb-size - $thumb-padding;
       top: $thumb-padding;
       width: $thumb-size;
       height: $thumb-size;
-      background: s.color(red-300);
-      transition: left 0.3s;
+      background: s.color(gray-500);
+      transition:
+        left 0.3s ease,
+        background-color 0.3s ease;
       box-shadow: 0 1px 4px s.color(gray-400);
     }
   }
 
   .switch__input:checked + .switch__slider::before {
     left: $thumb-checked-left;
+    background: s.color(red-300);
   }
 
   .switch__label {