diff --git a/src/assets/icon/alarm-icon.png b/src/assets/icon/alarm-icon.png
deleted file mode 100644
index fb61af0..0000000
Binary files a/src/assets/icon/alarm-icon.png and /dev/null differ
diff --git a/src/assets/icon/alarm-icon.svg b/src/assets/icon/alarm-icon.svg
new file mode 100644
index 0000000..d67086a
--- /dev/null
+++ b/src/assets/icon/alarm-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 17.8476C17.6392 17.8476 20.2481 17.1242 20.5 14.2205C20.5 11.3188 18.6812 11.5054 18.6812 7.94511C18.6812 5.16414 16.0452 2 12 2C7.95477 2 5.31885 5.16414 5.31885 7.94511C5.31885 11.5054 3.5 11.3188 3.5 14.2205C3.75295 17.1352 6.36177 17.8476 12 17.8476Z" stroke="#003458" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.3888 20.8572C13.0247 22.3719 10.8967 22.3899 9.51947 20.8572" stroke="#003458" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icon/clock.png b/src/assets/icon/clock.png
deleted file mode 100644
index 3a51803..0000000
Binary files a/src/assets/icon/clock.png and /dev/null differ
diff --git a/src/assets/icon/clock.svg b/src/assets/icon/clock.svg
new file mode 100644
index 0000000..24d1085
--- /dev/null
+++ b/src/assets/icon/clock.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 0C11.6423 0 15 3.35775 15 7.5C15 11.6423 11.6423 15 7.5 15C3.35775 15 0 11.6423 0 7.5C0 3.35775 3.35775 0 7.5 0ZM7.5 1.5C5.9087 1.5 4.38258 2.13214 3.25736 3.25736C2.13214 4.38258 1.5 5.9087 1.5 7.5C1.5 9.0913 2.13214 10.6174 3.25736 11.7426C4.38258 12.8679 5.9087 13.5 7.5 13.5C9.0913 13.5 10.6174 12.8679 11.7426 11.7426C12.8679 10.6174 13.5 9.0913 13.5 7.5C13.5 5.9087 12.8679 4.38258 11.7426 3.25736C10.6174 2.13214 9.0913 1.5 7.5 1.5ZM7.5 3C7.6837 3.00002 7.861 3.06747 7.99828 3.18954C8.13556 3.31161 8.22326 3.47981 8.24475 3.66225L8.25 3.75V7.1895L10.2803 9.21975C10.4148 9.35472 10.4929 9.53583 10.4987 9.72629C10.5045 9.91675 10.4376 10.1023 10.3116 10.2452C10.1855 10.3881 10.0098 10.4777 9.82015 10.4958C9.63045 10.5139 9.44099 10.4591 9.29025 10.3425L9.21975 10.2802L6.96975 8.03025C6.85319 7.91358 6.77832 7.76175 6.75675 7.59825L6.75 7.5V3.75C6.75 3.55109 6.82902 3.36032 6.96967 3.21967C7.11032 3.07902 7.30109 3 7.5 3Z" fill="#FF5C14"/>
+</svg>
diff --git a/src/assets/icon/home-off.png b/src/assets/icon/home-off.png
deleted file mode 100644
index 77f6f02..0000000
Binary files a/src/assets/icon/home-off.png and /dev/null differ
diff --git a/src/assets/icon/home-off.svg b/src/assets/icon/home-off.svg
new file mode 100644
index 0000000..9d7369f
--- /dev/null
+++ b/src/assets/icon/home-off.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.13478 20.7733V17.7156C9.13478 16.9351 9.77217 16.3023 10.5584 16.3023H13.4326C13.8102 16.3023 14.1723 16.4512 14.4393 16.7163C14.7063 16.9813 14.8563 17.3408 14.8563 17.7156V20.7733C14.8539 21.0978 14.9821 21.4099 15.2124 21.6402C15.4427 21.8705 15.7561 22 16.0829 22H18.0438C18.9596 22.0023 19.8388 21.6428 20.4872 21.0008C21.1356 20.3588 21.5 19.487 21.5 18.5778V9.86686C21.5 9.13246 21.1721 8.43584 20.6046 7.96467L13.934 2.67587C12.7737 1.74856 11.1111 1.7785 9.98539 2.74698L3.46701 7.96467C2.87274 8.42195 2.51755 9.12064 2.5 9.86686V18.5689C2.5 20.4639 4.04738 22 5.95617 22H7.87229C8.55123 22 9.103 21.4562 9.10792 20.7822L9.13478 20.7733Z" fill="#92A2B9"/>
+</svg>
diff --git a/src/assets/icon/home-on.png b/src/assets/icon/home-on.png
deleted file mode 100644
index 20dc68f..0000000
Binary files a/src/assets/icon/home-on.png and /dev/null differ
diff --git a/src/assets/icon/home-on.svg b/src/assets/icon/home-on.svg
new file mode 100644
index 0000000..b188f28
--- /dev/null
+++ b/src/assets/icon/home-on.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.13478 20.7733V17.7156C9.13478 16.9351 9.77217 16.3023 10.5584 16.3023H13.4326C13.8102 16.3023 14.1723 16.4512 14.4393 16.7163C14.7063 16.9813 14.8563 17.3408 14.8563 17.7156V20.7733C14.8539 21.0978 14.9821 21.4099 15.2124 21.6402C15.4427 21.8705 15.7561 22 16.0829 22H18.0438C18.9596 22.0023 19.8388 21.6428 20.4872 21.0008C21.1356 20.3588 21.5 19.487 21.5 18.5778V9.86686C21.5 9.13246 21.1721 8.43584 20.6046 7.96467L13.934 2.67587C12.7737 1.74856 11.1111 1.7785 9.98539 2.74698L3.46701 7.96467C2.87274 8.42195 2.51755 9.12064 2.5 9.86686V18.5689C2.5 20.4639 4.04738 22 5.95617 22H7.87229C8.55123 22 9.103 21.4562 9.10792 20.7822L9.13478 20.7733Z" fill="#219BE4"/>
+</svg>
diff --git a/src/assets/icon/policy-off.png b/src/assets/icon/policy-off.png
deleted file mode 100644
index 15f4338..0000000
Binary files a/src/assets/icon/policy-off.png and /dev/null differ
diff --git a/src/assets/icon/policy-off.svg b/src/assets/icon/policy-off.svg
new file mode 100644
index 0000000..c1b5a36
--- /dev/null
+++ b/src/assets/icon/policy-off.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.8877 10.8967C19.2827 10.7007 20.3567 9.50467 20.3597 8.05567C20.3597 6.62767 19.3187 5.44367 17.9537 5.21967" stroke="#92A2B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.7285 14.2503C21.0795 14.4523 22.0225 14.9253 22.0225 15.9003C22.0225 16.5713 21.5785 17.0073 20.8605 17.2813" stroke="#92A2B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8867 14.6638C8.67267 14.6638 5.92767 15.1508 5.92767 17.0958C5.92767 19.0398 8.65567 19.5408 11.8867 19.5408C15.1007 19.5408 17.8447 19.0588 17.8447 17.1128C17.8447 15.1668 15.1177 14.6638 11.8867 14.6638Z" stroke="#92A2B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8867 11.8879C13.9957 11.8879 15.7057 10.1789 15.7057 8.06888C15.7057 5.95988 13.9957 4.24988 11.8867 4.24988C9.77766 4.24988 8.06766 5.95988 8.06766 8.06888C8.05966 10.1709 9.75666 11.8809 11.8587 11.8879H11.8867Z" stroke="#92A2B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.88478 10.8967C4.48878 10.7007 3.41578 9.50467 3.41278 8.05567C3.41278 6.62767 4.45378 5.44367 5.81878 5.21967" stroke="#92A2B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.04388 14.2503C2.69288 14.4523 1.74988 14.9253 1.74988 15.9003C1.74988 16.5713 2.19388 17.0073 2.91188 17.2813" stroke="#92A2B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icon/policy-on.png b/src/assets/icon/policy-on.png
deleted file mode 100644
index 9a784ba..0000000
Binary files a/src/assets/icon/policy-on.png and /dev/null differ
diff --git a/src/assets/icon/policy-on.svg b/src/assets/icon/policy-on.svg
new file mode 100644
index 0000000..b147321
--- /dev/null
+++ b/src/assets/icon/policy-on.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.8877 10.8967C19.2827 10.7007 20.3567 9.50467 20.3597 8.05567C20.3597 6.62767 19.3187 5.44367 17.9537 5.21967" stroke="#219BE4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.7285 14.2503C21.0795 14.4523 22.0225 14.9253 22.0225 15.9003C22.0225 16.5713 21.5785 17.0073 20.8605 17.2813" stroke="#219BE4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8867 14.6638C8.67267 14.6638 5.92767 15.1508 5.92767 17.0958C5.92767 19.0398 8.65567 19.5408 11.8867 19.5408C15.1007 19.5408 17.8447 19.0588 17.8447 17.1128C17.8447 15.1668 15.1177 14.6638 11.8867 14.6638Z" stroke="#219BE4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8867 11.8879C13.9957 11.8879 15.7057 10.1789 15.7057 8.06888C15.7057 5.95988 13.9957 4.24988 11.8867 4.24988C9.77766 4.24988 8.06766 5.95988 8.06766 8.06888C8.05966 10.1709 9.75666 11.8809 11.8587 11.8879H11.8867Z" stroke="#219BE4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.88478 10.8967C4.48878 10.7007 3.41578 9.50467 3.41278 8.05567C3.41278 6.62767 4.45378 5.44367 5.81878 5.21967" stroke="#219BE4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.04388 14.2503C2.69288 14.4523 1.74988 14.9253 1.74988 15.9003C1.74988 16.5713 2.19388 17.0073 2.91188 17.2813" stroke="#219BE4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icon/setting-icon.png b/src/assets/icon/setting-icon.png
deleted file mode 100644
index db070c4..0000000
Binary files a/src/assets/icon/setting-icon.png and /dev/null differ
diff --git a/src/assets/icon/setting-icon.svg b/src/assets/icon/setting-icon.svg
new file mode 100644
index 0000000..6decf6e
--- /dev/null
+++ b/src/assets/icon/setting-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8067 7.62357L20.1842 6.54348C19.6577 5.62956 18.4907 5.31427 17.5755 5.83867V5.83867C17.1399 6.0953 16.6201 6.16811 16.1307 6.04104C15.6413 5.91398 15.2226 5.59747 14.9668 5.16133C14.8023 4.8841 14.7139 4.56835 14.7105 4.24599V4.24599C14.7254 3.72918 14.5304 3.22836 14.17 2.85762C13.8096 2.48689 13.3145 2.27782 12.7975 2.27803H11.5435C11.037 2.27802 10.5513 2.47987 10.194 2.8389C9.83669 3.19793 9.63717 3.68455 9.63961 4.19107V4.19107C9.6246 5.23688 8.77248 6.07677 7.72657 6.07666C7.40421 6.07331 7.08846 5.9849 6.81123 5.82036V5.82036C5.89606 5.29597 4.72911 5.61125 4.20254 6.52517L3.53435 7.62357C3.00841 8.53635 3.3194 9.70256 4.23 10.2323V10.2323C4.8219 10.574 5.18653 11.2055 5.18653 11.889C5.18653 12.5725 4.8219 13.204 4.23 13.5458V13.5458C3.32056 14.0719 3.00923 15.2353 3.53435 16.1453V16.1453L4.16593 17.2346C4.41265 17.6797 4.8266 18.0082 5.31619 18.1474C5.80578 18.2865 6.33064 18.2249 6.77462 17.976V17.976C7.21108 17.7213 7.73119 17.6515 8.21934 17.7822C8.70749 17.9128 9.12324 18.233 9.37416 18.6716C9.5387 18.9488 9.62711 19.2646 9.63046 19.587V19.587C9.63046 20.6435 10.487 21.5 11.5435 21.5H12.7975C13.8505 21.5 14.7055 20.6491 14.7105 19.5961V19.5961C14.7081 19.088 14.9089 18.6 15.2682 18.2407C15.6275 17.8814 16.1155 17.6806 16.6236 17.6831C16.9452 17.6917 17.2596 17.7797 17.5389 17.9394V17.9394C18.4517 18.4653 19.6179 18.1543 20.1476 17.2437V17.2437L20.8067 16.1453C21.0618 15.7075 21.1318 15.186 21.0012 14.6963C20.8706 14.2067 20.5502 13.7893 20.111 13.5366V13.5366C19.6718 13.2839 19.3514 12.8665 19.2208 12.3769C19.0902 11.8873 19.1603 11.3658 19.4154 10.9279C19.5812 10.6383 19.8214 10.3982 20.111 10.2323V10.2323C21.0161 9.70285 21.3264 8.54345 20.8067 7.63272V7.63272V7.62357Z" stroke="#003458" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12.1751" cy="11.889" r="2.63616" stroke="#003458" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icon/support-off.png b/src/assets/icon/support-off.png
deleted file mode 100644
index f8cf13a..0000000
Binary files a/src/assets/icon/support-off.png and /dev/null differ
diff --git a/src/assets/icon/support-off.svg b/src/assets/icon/support-off.svg
new file mode 100644
index 0000000..f48e77e
--- /dev/null
+++ b/src/assets/icon/support-off.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9026 8.85114L13.4593 12.4642C12.6198 13.1302 11.4387 13.1302 10.5992 12.4642L6.11841 8.85114" stroke="#92A2B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9089 21C19.9502 21.0084 22 18.5095 22 15.4384V8.57001C22 5.49883 19.9502 3 16.9089 3H7.09114C4.04979 3 2 5.49883 2 8.57001V15.4384C2 18.5095 4.04979 21.0084 7.09114 21H16.9089Z" stroke="#92A2B9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icon/support-on.png b/src/assets/icon/support-on.png
deleted file mode 100644
index 0726a0c..0000000
Binary files a/src/assets/icon/support-on.png and /dev/null differ
diff --git a/src/assets/icon/support-on.svg b/src/assets/icon/support-on.svg
new file mode 100644
index 0000000..79382d0
--- /dev/null
+++ b/src/assets/icon/support-on.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9026 8.85114L13.4593 12.4642C12.6198 13.1302 11.4387 13.1302 10.5992 12.4642L6.11841 8.85114" stroke="#219BE4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9089 21C19.9502 21.0084 22 18.5095 22 15.4384V8.57001C22 5.49883 19.9502 3 16.9089 3H7.09114C4.04979 3 2 5.49883 2 8.57001V15.4384C2 18.5095 4.04979 21.0084 7.09114 21H16.9089Z" stroke="#219BE4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/BottomBar.tsx b/src/components/BottomBar.tsx
index 0e9fbda..a56aedd 100644
--- a/src/components/BottomBar.tsx
+++ b/src/components/BottomBar.tsx
@@ -1,11 +1,11 @@
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSettingStore } from "../store/settingStore";
-import homeOn from "../assets/icon/home-on.png";
-import homeOff from "../assets/icon/home-off.png";
-import supportOn from "../assets/icon/support-on.png";
-import supportOff from "../assets/icon/support-off.png";
-import policyOn from "../assets/icon/policy-on.png";
-import policyOff from "../assets/icon/policy-off.png";
+import homeOn from "../assets/icon/home-on.svg";
+import homeOff from "../assets/icon/home-off.svg";
+import supportOn from "../assets/icon/support-on.svg";
+import supportOff from "../assets/icon/support-off.svg";
+import policyOn from "../assets/icon/policy-on.svg";
+import policyOff from "../assets/icon/policy-off.svg";
 
 const navItems = [
   {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 79b89f7..380053a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,8 +2,8 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { useSettingStore } from "../store/settingStore";
 import { useUserStore } from "../store/userStore";
 import logo from "../assets/img/logo.svg";
-import alarmIcon from "../assets/icon/alarm-icon.png";
-import settingIcon from "../assets/icon/setting-icon.png";
+import alarmIcon from "../assets/icon/alarm-icon.svg";
+import settingIcon from "../assets/icon/setting-icon.svg";
 import { useQuery } from "@tanstack/react-query";
 import { notificationService } from "@/api";
 
@@ -129,7 +129,9 @@ export default function Header({
           <button
             type="button"
             aria-label="알림"
-            className={`relative cursor-pointer flex items-center justify-center w-11 h-11 rounded-full shrink-0 border-[3px] border-white ${darkMode ? "bg-white invert" : "bg-gradient-to-b from-white/0 to-white/100 to-42%"}`}
+            className="relative cursor-pointer flex items-center justify-center w-11 h-11 rounded-full shrink-0 border-[3px] border-white bg-gradient-to-b from-white/0 to-white/100 to-42%
+        transition-all duration-200 hover:scale-[1.08] hover:shadow-lg active:scale-[0.95]"
+            style={{ boxShadow: "0 2px 8px rgba(0,0,0,0.1)" }}
             onClick={() => navigate("/alarm")}
           >
             <img src={alarmIcon} alt="" className="w-6 h-6" />
@@ -146,7 +148,9 @@ export default function Header({
           <button
             type="button"
             aria-label="설정"
-            className={`cursor-pointer flex items-center justify-center w-11 h-11 rounded-full shrink-0 border-[3px] border-white ${darkMode ? "bg-white invert" : "bg-gradient-to-b from-white/0 to-white/100 to-42%"}`}
+            className="cursor-pointer flex items-center justify-center w-11 h-11 rounded-full shrink-0 border-[3px] border-white bg-gradient-to-b from-white/0 to-white/100 to-42%
+        transition-all duration-200 hover:scale-[1.08] hover:shadow-lg active:scale-[0.95]"
+            style={{ boxShadow: "0 2px 8px rgba(0,0,0,0.1)" }}
             onClick={() => navigate("/setting")}
           >
             <img src={settingIcon} alt="" className="w-6 h-6" />
diff --git a/src/components/common/GradientButton.tsx b/src/components/common/GradientButton.tsx
index 0767618..7a99c11 100644
--- a/src/components/common/GradientButton.tsx
+++ b/src/components/common/GradientButton.tsx
@@ -31,17 +31,28 @@ export default function GradientButton({
 }: Props) {
   return (
     <div
-      className={`rounded-full ${fullWidth ? "w-full" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
+      className={`rounded-full transition-all duration-200
+    hover:scale-[1.03] hover:shadow-lg
+    active:scale-[0.97]
+    ${fullWidth ? "w-full" : ""} 
+    ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} 
+    ${className}`}
       style={{
         borderRadius: borderRadius ? `${borderRadius}px` : undefined,
         background: `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`,
         padding: borderWidth,
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
       }}
     >
       <button
         onClick={onClick}
         disabled={disabled}
-        className={`gradient-btn flex items-center justify-center gap-2 rounded-full font-semibold transition-opacity ${fullWidth ? "w-full" : ""} ${disabled ? "cursor-not-allowed" : "active:opacity-80"} ${buttonClassName}`}
+        className={`gradient-btn flex items-center justify-center gap-2 rounded-full font-semibold
+      hover:opacity-90
+      focus:outline-none
+      ${fullWidth ? "w-full" : ""} 
+      ${disabled ? "cursor-not-allowed" : ""} 
+      ${buttonClassName}`}
         style={{
           borderRadius: borderRadius ? `${borderRadius}px` : undefined,
           backgroundColor: bgColor,
diff --git a/src/components/common/RangeSlider.tsx b/src/components/common/RangeSlider.tsx
index f3827a6..8474c71 100644
--- a/src/components/common/RangeSlider.tsx
+++ b/src/components/common/RangeSlider.tsx
@@ -58,32 +58,44 @@ export default function RangeSlider({
         }}
       />
       <style>{`
-        input[type="range"]::-webkit-slider-thumb {
-          appearance: none;
-          width: 20px;
-          height: 20px;
-          border-radius: 50%;
-          background: rgba(217, 217, 217, 0.2);
-          border: 2px solid white;
-          cursor: pointer;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-        input[type="range"]::-moz-range-thumb {
-          width: 20px;
-          height: 20px;
-          border-radius: 50%;
-          background: rgba(217, 217, 217, 0.2);
-          border: 2px solid white;
-          cursor: pointer;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-        input[type="range"]:disabled::-webkit-slider-thumb {
-          background: #9CA3AF;
-        }
-        input[type="range"]:disabled::-moz-range-thumb {
-          background: #9CA3AF;
-        }
-      `}</style>
+  input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: rgba(217, 217, 217, 0.2);
+    border: 2px solid white;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: width 0.15s, height 0.15s, box-shadow 0.15s;
+  }
+  input[type="range"]::-webkit-slider-thumb:hover {
+    width: 26px;
+    height: 26px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+  input[type="range"]::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: rgba(217, 217, 217, 0.2);
+    border: 2px solid white;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: width 0.15s, height 0.15s, box-shadow 0.15s;
+  }
+  input[type="range"]::-moz-range-thumb:hover {
+    width: 26px;
+    height: 26px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+  input[type="range"]:disabled::-webkit-slider-thumb {
+    background: #9CA3AF;
+  }
+  input[type="range"]:disabled::-moz-range-thumb {
+    background: #9CA3AF;
+  }
+`}</style>
     </div>
   );
 }
diff --git a/src/page/Detail/DetailPage.tsx b/src/page/Detail/DetailPage.tsx
index aae1db9..d4f4c9e 100644
--- a/src/page/Detail/DetailPage.tsx
+++ b/src/page/Detail/DetailPage.tsx
@@ -276,6 +276,10 @@ export default function Detail() {
     try {
       await familyService.updateVisibility({ lineId, isPublic: newValue });
       setGlobalIsPublic(newValue);
+      showToast(
+        newValue ? "공개로 전환되었습니다." : "비공개로 전환되었습니다.",
+        "success",
+      ); // ← 추가
 
       const yearMonth = formatYearMonth(currentDate);
       const appData = await fetchAppUsage(lineId, yearMonth, newValue);
diff --git a/src/page/Login/LoginPage.tsx b/src/page/Login/LoginPage.tsx
index b63a92c..d5bd04a 100644
--- a/src/page/Login/LoginPage.tsx
+++ b/src/page/Login/LoginPage.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import GradientButton from "../../components/common/GradientButton";
-import { useSettingStore } from "../../store/settingStore";
 import logo from "../../assets/img/logo.svg";
 import backgroundImg from "../../assets/img/background.png";
 import loginBg1 from "../../assets/img/loginBg1.png";
@@ -22,8 +21,6 @@ export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
-  const darkMode = useSettingStore((state) => state.darkMode);
-  const largeTextMode = useSettingStore((state) => state.largeTextMode);
   const navigate = useNavigate();
   const setUserInfo = useUserStore((state) => state.setUserInfo);
   const appType = getAppType();
@@ -93,12 +90,9 @@ export default function LoginPage() {
   };
 
   return (
-    // Layout과 동일한 래퍼 구조
-    <div
-      className={`flex justify-center min-h-screen bg-[#f5f5f5] font-sans ${darkMode ? "dark" : ""}`}
-    >
+    <div className="flex justify-center min-h-screen bg-[#f5f5f5] font-sans">
       <div
-        className={`relative w-[480px] max-w-full min-h-[100dvh] overflow-hidden bg-cover bg-center bg-no-repeat ${darkMode ? "invert" : ""} ${largeTextMode ? "text-[1.25em]" : ""}`}
+        className="relative w-full desktop:w-[480px] max-w-full min-h-[100dvh] overflow-hidden bg-cover bg-center bg-no-repeat"
         style={{ backgroundImage: `url(${backgroundImg})` }}
       >
         {/* 슬라이딩 배경 */}
@@ -116,7 +110,6 @@ export default function LoginPage() {
 
         {/* 콘텐츠 */}
         <div className="relative z-10 flex flex-col items-center justify-center min-h-[100dvh] px-8">
-          {/* 로고 */}
           <motion.div
             className="mb-16"
             initial={{ opacity: 0, y: -30 }}
@@ -126,7 +119,6 @@ export default function LoginPage() {
             <img src={logo} alt="Pooli" className="w-32 h-32" />
           </motion.div>
 
-          {/* 입력 폼 */}
           <motion.div
             className="w-full max-w-sm space-y-6"
             initial={{ opacity: 0, y: 30 }}
@@ -163,7 +155,6 @@ export default function LoginPage() {
               />
             </div>
 
-            {/* 에러 메시지 */}
             {error && (
               <div className="text-red-600 text-sm text-center bg-red-50 py-2 px-4 rounded-lg">
                 {error}
@@ -171,7 +162,6 @@ export default function LoginPage() {
             )}
           </motion.div>
 
-          {/* 로그인 버튼 */}
           <motion.div
             className="max-w-sm mt-12 w-full"
             initial={{ opacity: 0, y: 30 }}
diff --git a/src/page/Policy/Policy.tsx b/src/page/Policy/Policy.tsx
index beac748..314f87b 100644
--- a/src/page/Policy/Policy.tsx
+++ b/src/page/Policy/Policy.tsx
@@ -183,7 +183,8 @@ export default function Policy() {
         >
           <button
             onClick={() => navigate("/policy-detail")}
-            className="w-full flex items-center gap-4 px-4 py-3 bg-white/60 rounded-2xl shadow-sm border border-gray-100"
+            className="w-full flex items-center gap-4 px-4 py-3 bg-white/60 rounded-2xl shadow-sm border border-gray-100
+  transition-all duration-200 hover:bg-white/80 hover:shadow-md hover:scale-[1.02] active:scale-[0.98]"
           >
             <div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center flex-shrink-0">
               <img src={SettingIcon} />
@@ -208,7 +209,8 @@ export default function Policy() {
         >
           <button
             onClick={() => setIsTransferModalOpen(true)}
-            className="w-full flex items-center gap-4 px-4 py-3 bg-white/60 rounded-2xl shadow-sm border border-gray-100"
+            className="w-full flex items-center gap-4 px-4 py-3 bg-white/60 rounded-2xl shadow-sm border border-gray-100
+  transition-all duration-200 hover:bg-white/80 hover:shadow-md hover:scale-[1.02] active:scale-[0.98]"
           >
             <div className="w-12 h-12 rounded-xl bg-lime-100 flex items-center justify-center flex-shrink-0">
               <img src={AssignIcon} />
diff --git a/src/page/Policy/components/UserInfoCard.tsx b/src/page/Policy/components/UserInfoCard.tsx
index 07824b3..a7d1073 100644
--- a/src/page/Policy/components/UserInfoCard.tsx
+++ b/src/page/Policy/components/UserInfoCard.tsx
@@ -1,6 +1,6 @@
 import GradientButton from "@/components/common/GradientButton";
 import GlassCard from "../../../components/common/GlassCard";
-import ClockIcon from "../../../assets/icon/clock.png";
+import ClockIcon from "../../../assets/icon/clock.svg";
 import PlusIcon from "../../../assets/icon/plus.svg";
 import { useNavigate } from "react-router-dom";
 import Avatar from "@/components/common/Avatar";