diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..5df5d5d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,822 @@
+{
+    "name": "sms",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "devDependencies": {
+                "@fontsource/inter": "^5.2.8",
+                "@fontsource/jetbrains-mono": "^5.2.8",
+                "@fontsource/plus-jakarta-sans": "^5.2.8",
+                "@material-symbols/svg-400": "^0.44.8",
+                "@tailwindcss/vite": "^4.0.0",
+                "concurrently": "^9.0.1",
+                "laravel-vite-plugin": "^3.1",
+                "tailwindcss": "^4.0.0",
+                "vite": "^8.0.0"
+            }
+        },
+        "node_modules/@fontsource/inter": {
+            "version": "5.2.8",
+            "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
+            "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
+            "dev": true,
+            "license": "OFL-1.1",
+            "funding": {
+                "url": "https://github.com/sponsors/ayuhito"
+            }
+        },
+        "node_modules/@fontsource/jetbrains-mono": {
+            "version": "5.2.8",
+            "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+            "integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
+            "dev": true,
+            "license": "OFL-1.1",
+            "funding": {
+                "url": "https://github.com/sponsors/ayuhito"
+            }
+        },
+        "node_modules/@fontsource/plus-jakarta-sans": {
+            "version": "5.2.8",
+            "resolved": "https://registry.npmjs.org/@fontsource/plus-jakarta-sans/-/plus-jakarta-sans-5.2.8.tgz",
+            "integrity": "sha512-P5qE49fqdeD+7DXH1KBxmMPlB17LTz1zvBhFH0tFzfnYTKVJVyb0pR6plh0ZGXxcB+Oayb54FZZw3V42/DawTw==",
+            "dev": true,
+            "license": "OFL-1.1",
+            "funding": {
+                "url": "https://github.com/sponsors/ayuhito"
+            }
+        },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.13",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.5.0",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "node_modules/@jridgewell/remapping": {
+            "version": "2.3.5",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "node_modules/@jridgewell/resolve-uri": {
+            "version": "3.1.2",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/sourcemap-codec": {
+            "version": "1.5.5",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@jridgewell/trace-mapping": {
+            "version": "0.3.31",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/resolve-uri": "^3.1.0",
+                "@jridgewell/sourcemap-codec": "^1.4.14"
+            }
+        },
+        "node_modules/@material-symbols/svg-400": {
+            "version": "0.44.8",
+            "resolved": "https://registry.npmjs.org/@material-symbols/svg-400/-/svg-400-0.44.8.tgz",
+            "integrity": "sha512-p4Lebev1M3UfRQug5rRV4Yci/j72+Pf4e3lZtyA0eLNAxUtYBiTlwMJHYHe8Pzw8QTU8KvZwULvRFxmO2rmWXA==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
+        "node_modules/@oxc-project/types": {
+            "version": "0.130.0",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/Boshen"
+            }
+        },
+        "node_modules/@rolldown/binding-darwin-x64": {
+            "version": "1.0.1",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            }
+        },
+        "node_modules/@rolldown/pluginutils": {
+            "version": "1.0.1",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@tailwindcss/node": {
+            "version": "4.3.0",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/remapping": "^2.3.5",
+                "enhanced-resolve": "^5.21.0",
+                "jiti": "^2.6.1",
+                "lightningcss": "1.32.0",
+                "magic-string": "^0.30.21",
+                "source-map-js": "^1.2.1",
+                "tailwindcss": "4.3.0"
+            }
+        },
+        "node_modules/@tailwindcss/oxide": {
+            "version": "4.3.0",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 20"
+            },
+            "optionalDependencies": {
+                "@tailwindcss/oxide-android-arm64": "4.3.0",
+                "@tailwindcss/oxide-darwin-arm64": "4.3.0",
+                "@tailwindcss/oxide-darwin-x64": "4.3.0",
+                "@tailwindcss/oxide-freebsd-x64": "4.3.0",
+                "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0",
+                "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0",
+                "@tailwindcss/oxide-linux-arm64-musl": "4.3.0",
+                "@tailwindcss/oxide-linux-x64-gnu": "4.3.0",
+                "@tailwindcss/oxide-linux-x64-musl": "4.3.0",
+                "@tailwindcss/oxide-wasm32-wasi": "4.3.0",
+                "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0",
+                "@tailwindcss/oxide-win32-x64-msvc": "4.3.0"
+            }
+        },
+        "node_modules/@tailwindcss/oxide-darwin-x64": {
+            "version": "4.3.0",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 20"
+            }
+        },
+        "node_modules/@tailwindcss/vite": {
+            "version": "4.3.0",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@tailwindcss/node": "4.3.0",
+                "@tailwindcss/oxide": "4.3.0",
+                "tailwindcss": "4.3.0"
+            },
+            "peerDependencies": {
+                "vite": "^5.2.0 || ^6 || ^7 || ^8"
+            }
+        },
+        "node_modules/ansi-regex": {
+            "version": "5.0.1",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/chalk": {
+            "version": "4.1.2",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/chalk/node_modules/supports-color": {
+            "version": "7.2.0",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/cliui": {
+            "version": "8.0.1",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "string-width": "^4.2.0",
+                "strip-ansi": "^6.0.1",
+                "wrap-ansi": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/color-convert": {
+            "version": "2.0.1",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/color-name": {
+            "version": "1.1.4",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/concurrently": {
+            "version": "9.2.1",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chalk": "4.1.2",
+                "rxjs": "7.8.2",
+                "shell-quote": "1.8.3",
+                "supports-color": "8.1.1",
+                "tree-kill": "1.2.2",
+                "yargs": "17.7.2"
+            },
+            "bin": {
+                "conc": "dist/bin/concurrently.js",
+                "concurrently": "dist/bin/concurrently.js"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+            }
+        },
+        "node_modules/detect-libc": {
+            "version": "2.1.2",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/emoji-regex": {
+            "version": "8.0.0",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/enhanced-resolve": {
+            "version": "5.21.5",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "graceful-fs": "^4.2.4",
+                "tapable": "^2.3.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/escalade": {
+            "version": "3.2.0",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/fdir": {
+            "version": "6.5.0",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "peerDependencies": {
+                "picomatch": "^3 || ^4"
+            },
+            "peerDependenciesMeta": {
+                "picomatch": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.3",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/get-caller-file": {
+            "version": "2.0.5",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": "6.* || 8.* || >= 10.*"
+            }
+        },
+        "node_modules/graceful-fs": {
+            "version": "4.2.11",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/has-flag": {
+            "version": "4.0.0",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/is-fullwidth-code-point": {
+            "version": "3.0.0",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/jiti": {
+            "version": "2.7.0",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "jiti": "lib/jiti-cli.mjs"
+            }
+        },
+        "node_modules/laravel-vite-plugin": {
+            "version": "3.1.0",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "picocolors": "^1.0.0",
+                "tinyglobby": "^0.2.12",
+                "vite-plugin-full-reload": "^1.1.0"
+            },
+            "bin": {
+                "clean-orphaned-assets": "bin/clean.js"
+            },
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            },
+            "peerDependencies": {
+                "fontaine": "^0.5.0",
+                "vite": "^8.0.0"
+            },
+            "peerDependenciesMeta": {
+                "fontaine": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/lightningcss": {
+            "version": "1.32.0",
+            "dev": true,
+            "license": "MPL-2.0",
+            "dependencies": {
+                "detect-libc": "^2.0.3"
+            },
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            },
+            "optionalDependencies": {
+                "lightningcss-android-arm64": "1.32.0",
+                "lightningcss-darwin-arm64": "1.32.0",
+                "lightningcss-darwin-x64": "1.32.0",
+                "lightningcss-freebsd-x64": "1.32.0",
+                "lightningcss-linux-arm-gnueabihf": "1.32.0",
+                "lightningcss-linux-arm64-gnu": "1.32.0",
+                "lightningcss-linux-arm64-musl": "1.32.0",
+                "lightningcss-linux-x64-gnu": "1.32.0",
+                "lightningcss-linux-x64-musl": "1.32.0",
+                "lightningcss-win32-arm64-msvc": "1.32.0",
+                "lightningcss-win32-x64-msvc": "1.32.0"
+            }
+        },
+        "node_modules/lightningcss-darwin-x64": {
+            "version": "1.32.0",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MPL-2.0",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/magic-string": {
+            "version": "0.30.21",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.5.5"
+            }
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.12",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
+        "node_modules/picocolors": {
+            "version": "1.1.1",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/picomatch": {
+            "version": "4.0.4",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/postcss": {
+            "version": "8.5.15",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "nanoid": "^3.3.12",
+                "picocolors": "^1.1.1",
+                "source-map-js": "^1.2.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/require-directory": {
+            "version": "2.1.1",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/rolldown": {
+            "version": "1.0.1",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@oxc-project/types": "=0.130.0",
+                "@rolldown/pluginutils": "^1.0.0"
+            },
+            "bin": {
+                "rolldown": "bin/cli.mjs"
+            },
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            },
+            "optionalDependencies": {
+                "@rolldown/binding-android-arm64": "1.0.1",
+                "@rolldown/binding-darwin-arm64": "1.0.1",
+                "@rolldown/binding-darwin-x64": "1.0.1",
+                "@rolldown/binding-freebsd-x64": "1.0.1",
+                "@rolldown/binding-linux-arm-gnueabihf": "1.0.1",
+                "@rolldown/binding-linux-arm64-gnu": "1.0.1",
+                "@rolldown/binding-linux-arm64-musl": "1.0.1",
+                "@rolldown/binding-linux-ppc64-gnu": "1.0.1",
+                "@rolldown/binding-linux-s390x-gnu": "1.0.1",
+                "@rolldown/binding-linux-x64-gnu": "1.0.1",
+                "@rolldown/binding-linux-x64-musl": "1.0.1",
+                "@rolldown/binding-openharmony-arm64": "1.0.1",
+                "@rolldown/binding-wasm32-wasi": "1.0.1",
+                "@rolldown/binding-win32-arm64-msvc": "1.0.1",
+                "@rolldown/binding-win32-x64-msvc": "1.0.1"
+            }
+        },
+        "node_modules/rxjs": {
+            "version": "7.8.2",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "tslib": "^2.1.0"
+            }
+        },
+        "node_modules/shell-quote": {
+            "version": "1.8.3",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/source-map-js": {
+            "version": "1.2.1",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/string-width": {
+            "version": "4.2.3",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "emoji-regex": "^8.0.0",
+                "is-fullwidth-code-point": "^3.0.0",
+                "strip-ansi": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/strip-ansi": {
+            "version": "6.0.1",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/supports-color": {
+            "version": "8.1.1",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/supports-color?sponsor=1"
+            }
+        },
+        "node_modules/tailwindcss": {
+            "version": "4.3.0",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/tapable": {
+            "version": "2.3.3",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            }
+        },
+        "node_modules/tinyglobby": {
+            "version": "0.2.16",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fdir": "^6.5.0",
+                "picomatch": "^4.0.4"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/SuperchupuDev"
+            }
+        },
+        "node_modules/tree-kill": {
+            "version": "1.2.2",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "tree-kill": "cli.js"
+            }
+        },
+        "node_modules/tslib": {
+            "version": "2.8.1",
+            "dev": true,
+            "license": "0BSD"
+        },
+        "node_modules/vite": {
+            "version": "8.0.13",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "lightningcss": "^1.32.0",
+                "picomatch": "^4.0.4",
+                "postcss": "^8.5.14",
+                "rolldown": "1.0.1",
+                "tinyglobby": "^0.2.16"
+            },
+            "bin": {
+                "vite": "bin/vite.js"
+            },
+            "engines": {
+                "node": "^20.19.0 || >=22.12.0"
+            },
+            "funding": {
+                "url": "https://github.com/vitejs/vite?sponsor=1"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.3"
+            },
+            "peerDependencies": {
+                "@types/node": "^20.19.0 || >=22.12.0",
+                "@vitejs/devtools": "^0.1.18",
+                "esbuild": "^0.27.0 || ^0.28.0",
+                "jiti": ">=1.21.0",
+                "less": "^4.0.0",
+                "sass": "^1.70.0",
+                "sass-embedded": "^1.70.0",
+                "stylus": ">=0.54.8",
+                "sugarss": "^5.0.0",
+                "terser": "^5.16.0",
+                "tsx": "^4.8.1",
+                "yaml": "^2.4.2"
+            },
+            "peerDependenciesMeta": {
+                "@types/node": {
+                    "optional": true
+                },
+                "@vitejs/devtools": {
+                    "optional": true
+                },
+                "esbuild": {
+                    "optional": true
+                },
+                "jiti": {
+                    "optional": true
+                },
+                "less": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                },
+                "sass-embedded": {
+                    "optional": true
+                },
+                "stylus": {
+                    "optional": true
+                },
+                "sugarss": {
+                    "optional": true
+                },
+                "terser": {
+                    "optional": true
+                },
+                "tsx": {
+                    "optional": true
+                },
+                "yaml": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/vite-plugin-full-reload": {
+            "version": "1.2.0",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "picocolors": "^1.0.0",
+                "picomatch": "^2.3.1"
+            }
+        },
+        "node_modules/vite-plugin-full-reload/node_modules/picomatch": {
+            "version": "2.3.2",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/wrap-ansi": {
+            "version": "7.0.0",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.0.0",
+                "string-width": "^4.1.0",
+                "strip-ansi": "^6.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+            }
+        },
+        "node_modules/y18n": {
+            "version": "5.0.8",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/yargs": {
+            "version": "17.7.2",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cliui": "^8.0.1",
+                "escalade": "^3.1.1",
+                "get-caller-file": "^2.0.5",
+                "require-directory": "^2.1.1",
+                "string-width": "^4.2.3",
+                "y18n": "^5.0.5",
+                "yargs-parser": "^21.1.1"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/yargs-parser": {
+            "version": "21.1.1",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        }
+    }
+}
diff --git a/package.json b/package.json
index 49c869e..0e8dfee 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,10 @@
         "dev": "vite"
     },
     "devDependencies": {
+        "@fontsource/inter": "^5.2.8",
+        "@fontsource/jetbrains-mono": "^5.2.8",
+        "@fontsource/plus-jakarta-sans": "^5.2.8",
+        "@material-symbols/svg-400": "^0.44.8",
         "@tailwindcss/vite": "^4.0.0",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^3.1",
diff --git a/public/fonts/inter-400.woff2 b/public/fonts/inter-400.woff2
new file mode 100644
index 0000000..f15b025
Binary files /dev/null and b/public/fonts/inter-400.woff2 differ
diff --git a/public/fonts/inter-600.woff2 b/public/fonts/inter-600.woff2
new file mode 100644
index 0000000..d189794
Binary files /dev/null and b/public/fonts/inter-600.woff2 differ
diff --git a/public/fonts/jetbrains-mono-700.woff2 b/public/fonts/jetbrains-mono-700.woff2
new file mode 100644
index 0000000..3a4e333
Binary files /dev/null and b/public/fonts/jetbrains-mono-700.woff2 differ
diff --git a/public/fonts/plus-jakarta-sans-600.woff2 b/public/fonts/plus-jakarta-sans-600.woff2
new file mode 100644
index 0000000..d6e4d1e
Binary files /dev/null and b/public/fonts/plus-jakarta-sans-600.woff2 differ
diff --git a/public/fonts/plus-jakarta-sans-700.woff2 b/public/fonts/plus-jakarta-sans-700.woff2
new file mode 100644
index 0000000..ca15140
Binary files /dev/null and b/public/fonts/plus-jakarta-sans-700.woff2 differ
diff --git a/public/fonts/plus-jakarta-sans-800.woff2 b/public/fonts/plus-jakarta-sans-800.woff2
new file mode 100644
index 0000000..cd71b26
Binary files /dev/null and b/public/fonts/plus-jakarta-sans-800.woff2 differ
diff --git a/public/icons/app_registration.svg b/public/icons/app_registration.svg
new file mode 100644
index 0000000..c100902
--- /dev/null
+++ b/public/icons/app_registration.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"   viewBox="0 -960 960 960"><path fill="currentColor" d="M179-179q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19Zm0-254q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19Zm0-254q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19Zm254 0q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19Zm254 0q-19-19-19-47t19-47q19-19 47-19t47 19q19 19 19 47t-19 47q-19 19-47 19t-47-19ZM433.5-433.5Q414-453 414-480t19.5-46.5Q453-546 480-546t46.5 19.5Q546-507 546-480t-19.5 46.5Q507-414 480-414t-46.5-19.5ZM520-160v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/arrow_back.svg b/public/icons/arrow_back.svg
new file mode 100644
index 0000000..e90b5ae
--- /dev/null
+++ b/public/icons/arrow_back.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"   viewBox="0 -960 960 960"><path fill="currentColor" d="m274-450 248 248-42 42-320-320 320-320 42 42-248 248h526v60H274Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/auto_awesome.svg b/public/icons/auto_awesome.svg
new file mode 100644
index 0000000..7a341d4
--- /dev/null
+++ b/public/icons/auto_awesome.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"  ><path fill="currentColor" d="m19 9-1.25-2.75L15 5l2.75-1.25L19 1l1.25 2.75L23 5l-2.75 1.25Zm0 14-1.25-2.75L15 19l2.75-1.25L19 15l1.25 2.75L23 19l-2.75 1.25ZM9 20l-2.5-5.5L1 12l5.5-2.5L9 4l2.5 5.5L17 12l-5.5 2.5Zm0-4.85L10 13l2.15-1L10 11 9 8.85 8 11l-2.15 1L8 13ZM9 12Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/check.svg b/public/icons/check.svg
new file mode 100644
index 0000000..40aa471
--- /dev/null
+++ b/public/icons/check.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"   viewBox="0 -960 960 960"><path fill="currentColor" d="M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/check_circle.svg b/public/icons/check_circle.svg
new file mode 100644
index 0000000..47a10d5
--- /dev/null
+++ b/public/icons/check_circle.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"   viewBox="0 -960 960 960"><path fill="currentColor" d="m421-298 283-283-46-45-237 237-120-120-45 45 165 166Zm59 218q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/content_copy.svg b/public/icons/content_copy.svg
new file mode 100644
index 0000000..e48caa4
--- /dev/null
+++ b/public/icons/content_copy.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"   viewBox="0 -960 960 960"><path fill="currentColor" d="M300-200q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h440q24 0 42 18t18 42v560q0 24-18 42t-42 18H300Zm0-60h440v-560H300v560ZM180-80q-24 0-42-18t-18-42v-620h60v620h500v60H180Zm120-180v-560 560Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/info.svg b/public/icons/info.svg
new file mode 100644
index 0000000..8568502
--- /dev/null
+++ b/public/icons/info.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"   viewBox="0 -960 960 960"><path fill="currentColor" d="M453-280h60v-240h-60v240Zm50.5-323.2q9.5-9.2 9.5-22.8 0-14.45-9.48-24.22-9.48-9.78-23.5-9.78t-23.52 9.78Q447-640.45 447-626q0 13.6 9.48 22.8 9.48 9.2 23.5 9.2t23.52-9.2ZM480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"/></svg>
\ No newline at end of file
diff --git a/resources/css/app.css b/resources/css/app.css
index 3e6abea..a4fd150 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,4 @@
+@import './fonts.css';
 @import 'tailwindcss';
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -6,6 +7,119 @@
 @source '../**/*.js';
 
 @theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
+    --color-on-tertiary-fixed-variant: #7f2928;
+    --color-on-primary-fixed-variant: #005137;
+    --color-tertiary-container: #ba5551;
+    --color-background: #f8f9ff;
+    --color-secondary-fixed: #d5e6df;
+    --color-on-tertiary-container: #fffbff;
+    --color-tertiary-fixed: #ffdad7;
+    --color-surface: #f8f9ff;
+    --color-on-primary-container: #f5fff7;
+    --color-tertiary: #9b3e3b;
+    --color-surface-container-high: #dfe9fa;
+    --color-on-primary-fixed: #002114;
+    --color-outline-variant: #bccac0;
+    --color-inverse-on-surface: #eaf1ff;
+    --color-primary-fixed: #85f8c4;
+    --color-on-error: #ffffff;
+    --color-surface-container: #e5eeff;
+    --color-on-secondary-fixed: #101e1a;
+    --color-on-background: #121c28;
+    --color-primary-container: #00855d;
+    --color-tertiary-fixed-dim: #ffb3ae;
+    --color-on-secondary-fixed-variant: #3b4a44;
+    --color-on-tertiary-fixed: #410004;
+    --color-on-tertiary: #ffffff;
+    --color-outline: #6d7a72;
+    --color-surface-container-highest: #d9e3f4;
+    --color-error: #ba1a1a;
+    --color-primary: #006948;
+    --color-surface-tint: #006c4a;
+    --color-surface-container-low: #eef4ff;
+    --color-surface-container-lowest: #ffffff;
+    --color-error-container: #ffdad6;
+    --color-on-secondary-container: #566660;
+    --color-on-primary: #ffffff;
+    --color-surface-variant: #d9e3f4;
+    --color-secondary: #52625c;
+    --color-on-error-container: #93000a;
+    --color-inverse-primary: #68dba9;
+    --color-on-surface: #121c28;
+    --color-secondary-container: #d3e3dc;
+    --color-inverse-surface: #27313e;
+    --color-on-secondary: #ffffff;
+    --color-surface-bright: #f8f9ff;
+    --color-primary-fixed-dim: #68dba9;
+    --color-on-surface-variant: #3d4a42;
+    --color-secondary-fixed-dim: #bacac3;
+    --color-surface-dim: #d1dbec;
+
+    --radius: 1rem;
+    --radius-lg: 2rem;
+    --radius-xl: 3rem;
+
+    --spacing-sm: 12px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-gutter: 12px;
+    --spacing-container-padding: 20px;
+    --spacing-md: 16px;
+    --spacing-base: 8px;
+    --spacing-xs: 4px;
+    --spacing-lg: 24px;
+
+    /* Restore layout widths — custom --spacing-* must not shrink max-w-* utilities */
+    --max-width-sm: 24rem;
+    --max-width-md: 28rem;
+    --max-width-lg: 32rem;
+    --max-width-xl: 36rem;
+    --max-width-2xl: 42rem;
+
+    --font-body-md: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-headline-xl: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-label-md: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-headline-lg-mobile: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-headline-lg: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-otp-digit: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+    --font-body-sm: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+    --text-body-md: 16px;
+    --text-body-md--line-height: 24px;
+    --text-body-md--font-weight: 400;
+
+    --text-headline-xl: 32px;
+    --text-headline-xl--line-height: 40px;
+    --text-headline-xl--letter-spacing: -0.02em;
+    --text-headline-xl--font-weight: 700;
+
+    --text-label-md: 14px;
+    --text-label-md--line-height: 20px;
+    --text-label-md--letter-spacing: 0.05em;
+    --text-label-md--font-weight: 600;
+
+    --text-headline-lg-mobile: 22px;
+    --text-headline-lg-mobile--line-height: 28px;
+    --text-headline-lg-mobile--font-weight: 600;
+
+    --text-headline-lg: 24px;
+    --text-headline-lg--line-height: 32px;
+    --text-headline-lg--letter-spacing: -0.01em;
+    --text-headline-lg--font-weight: 600;
+
+    --text-otp-digit: 28px;
+    --text-otp-digit--line-height: 36px;
+    --text-otp-digit--font-weight: 600;
+
+    --text-body-sm: 14px;
+    --text-body-sm--line-height: 20px;
+    --text-body-sm--font-weight: 400;
+}
+
+@layer base {
+    body {
+        min-height: max(884px, 100dvh);
+        -webkit-tap-highlight-color: transparent;
+    }
 }
diff --git a/resources/css/fonts.css b/resources/css/fonts.css
new file mode 100644
index 0000000..863e636
--- /dev/null
+++ b/resources/css/fonts.css
@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/fonts/inter-400.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('/fonts/inter-600.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('/fonts/plus-jakarta-sans-600.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/plus-jakarta-sans-700.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url('/fonts/plus-jakarta-sans-800.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/jetbrains-mono-700.woff2') format('woff2');
+}
diff --git a/resources/views/components/icon.blade.php b/resources/views/components/icon.blade.php
new file mode 100644
index 0000000..89a496a
--- /dev/null
+++ b/resources/views/components/icon.blade.php
@@ -0,0 +1,16 @@
+@props(['name', 'class' => ''])
+
+@php
+    $path = public_path("icons/{$name}.svg");
+
+    if (! is_file($path)) {
+        throw new InvalidArgumentException("Icon [{$name}] not found.");
+    }
+
+    $svg = file_get_contents($path);
+    $svg = preg_replace('/<svg\b/', '<svg class="w-full h-full"', $svg, 1);
+@endphp
+
+<span {{ $attributes->merge(['class' => 'inline-flex shrink-0 '.$class]) }} aria-hidden="true">
+    {!! $svg !!}
+</span>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 6c9b186..04fdce5 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -4,116 +4,7 @@
     <meta charset="utf-8"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <title>OTP Tassyklamak</title>
-    <!-- Fonts -->
-    <link href="https://fonts.googleapis.com" rel="preconnect"/>
-    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet"/>
-    <!-- Material Symbols -->
-    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
-    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-    <script id="tailwind-config">
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                extend: {
-                    "colors": {
-                        "on-tertiary-fixed-variant": "#7f2928",
-                        "on-primary-fixed-variant": "#005137",
-                        "tertiary-container": "#ba5551",
-                        "background": "#f8f9ff",
-                        "secondary-fixed": "#d5e6df",
-                        "on-tertiary-container": "#fffbff",
-                        "tertiary-fixed": "#ffdad7",
-                        "surface": "#f8f9ff",
-                        "on-primary-container": "#f5fff7",
-                        "tertiary": "#9b3e3b",
-                        "surface-container-high": "#dfe9fa",
-                        "on-primary-fixed": "#002114",
-                        "outline-variant": "#bccac0",
-                        "inverse-on-surface": "#eaf1ff",
-                        "primary-fixed": "#85f8c4",
-                        "on-error": "#ffffff",
-                        "surface-container": "#e5eeff",
-                        "on-secondary-fixed": "#101e1a",
-                        "on-background": "#121c28",
-                        "primary-container": "#00855d",
-                        "tertiary-fixed-dim": "#ffb3ae",
-                        "on-secondary-fixed-variant": "#3b4a44",
-                        "on-tertiary-fixed": "#410004",
-                        "on-tertiary": "#ffffff",
-                        "outline": "#6d7a72",
-                        "surface-container-highest": "#d9e3f4",
-                        "error": "#ba1a1a",
-                        "primary": "#006948",
-                        "surface-tint": "#006c4a",
-                        "surface-container-low": "#eef4ff",
-                        "surface-container-lowest": "#ffffff",
-                        "error-container": "#ffdad6",
-                        "on-secondary-container": "#566660",
-                        "on-primary": "#ffffff",
-                        "surface-variant": "#d9e3f4",
-                        "secondary": "#52625c",
-                        "on-error-container": "#93000a",
-                        "inverse-primary": "#68dba9",
-                        "on-surface": "#121c28",
-                        "secondary-container": "#d3e3dc",
-                        "inverse-surface": "#27313e",
-                        "on-secondary": "#ffffff",
-                        "surface-bright": "#f8f9ff",
-                        "primary-fixed-dim": "#68dba9",
-                        "on-surface-variant": "#3d4a42",
-                        "secondary-fixed-dim": "#bacac3",
-                        "surface-dim": "#d1dbec"
-                    },
-                    "borderRadius": {
-                        "DEFAULT": "1rem",
-                        "lg": "2rem",
-                        "xl": "3rem",
-                        "full": "9999px"
-                    },
-                    "spacing": {
-                        "sm": "12px",
-                        "xl": "32px",
-                        "2xl": "48px",
-                        "gutter": "12px",
-                        "container-padding": "20px",
-                        "md": "16px",
-                        "base": "8px",
-                        "xs": "4px",
-                        "lg": "24px"
-                    },
-                    "fontFamily": {
-                        "body-md": ["Inter"],
-                        "headline-xl": ["Plus Jakarta Sans"],
-                        "label-md": ["Inter"],
-                        "headline-lg-mobile": ["Plus Jakarta Sans"],
-                        "headline-lg": ["Plus Jakarta Sans"],
-                        "otp-digit": ["Plus Jakarta Sans"],
-                        "body-sm": ["Inter"],
-                        "mono": ["JetBrains Mono"]
-                    },
-                    "fontSize": {
-                        "body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
-                        "headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
-                        "label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.05em", "fontWeight": "600"}],
-                        "headline-lg-mobile": ["22px", {"lineHeight": "28px", "fontWeight": "600"}],
-                        "headline-lg": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
-                        "otp-digit": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
-                        "body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
-                    }
-                },
-            },
-        }
-    </script>
-    <style>
-        .material-symbols-outlined {
-            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-        }
-        body {
-            min-height: max(884px, 100dvh);
-            -webkit-tap-highlight-color: transparent;
-        }
-    </style>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
     @yield('styles')
 </head>
 <body class="bg-background text-on-background font-body-md min-h-screen flex flex-col items-center overflow-x-hidden">
@@ -132,4 +23,4 @@
 
     @yield('scripts')
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/resources/views/verification/congratulations.blade.php b/resources/views/verification/congratulations.blade.php
index 82008db..3f95511 100644
--- a/resources/views/verification/congratulations.blade.php
+++ b/resources/views/verification/congratulations.blade.php
@@ -36,14 +36,14 @@
 @section('content')
 <canvas class="confetti-canvas" id="confetti"></canvas>
 
-<main class="flex-grow flex flex-col items-center justify-center px-container-padding pt-24 pb-32 mt-16 w-full">
+<main class="flex-grow flex flex-col items-center justify-center px-container-padding pt-24 pb-32 mt-16 w-full max-w-md mx-auto">
     <!-- Success Indicator -->
     <div class="mb-xl relative">
         <div class="w-24 h-24 bg-primary-fixed rounded-full flex items-center justify-center text-primary-container shadow-[0_0_40px_rgba(0,105,72,0.2)]">
-            <span class="material-symbols-outlined !text-5xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
+            <x-icon name="check_circle" class="w-12 h-12 text-primary-container" />
         </div>
         <!-- Decorative Sparks -->
-        <div class="absolute -top-2 -right-2 text-primary opacity-50"><span class="material-symbols-outlined !text-xl">auto_awesome</span></div>
+        <div class="absolute -top-2 -right-2 text-primary opacity-50"><x-icon name="auto_awesome" class="w-5 h-5" /></div>
     </div>
 
     <!-- Typography Block -->
@@ -60,9 +60,17 @@
                 <span class="font-mono text-4xl font-bold text-primary tracking-widest" id="couponCode">{{ $code }}</span>
             </div>
             <button class="flex items-center gap-2 text-primary font-label-md text-label-md hover:bg-primary-container/10 px-md py-sm rounded-full transition-colors active:scale-95" onclick="copyCode()">
-                <span class="material-symbols-outlined" id="copyIcon">content_copy</span>
+                <span id="copyIcon" class="inline-flex">
+                    <x-icon name="content_copy" class="w-5 h-5" data-icon="content_copy" />
+                </span>
                 <span id="copyText">Kody göçür</span>
             </button>
+            <template id="icon-check">
+                <x-icon name="check" class="w-5 h-5" />
+            </template>
+            <template id="icon-content_copy">
+                <x-icon name="content_copy" class="w-5 h-5" />
+            </template>
         </div>
         <!-- Shadow Depth -->
         <div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-[80%] h-4 bg-primary/10 blur-xl rounded-full -z-10"></div>
@@ -77,7 +85,7 @@
 
     <!-- Info Card -->
     <div class="mt-2xl w-full max-w-sm bg-secondary-container/30 border border-secondary-container rounded-lg p-md flex gap-md items-start">
-        <span class="material-symbols-outlined text-secondary">info</span>
+        <x-icon name="info" class="w-6 h-6 text-secondary shrink-0" />
         <p class="font-body-sm text-body-sm text-on-secondary-container">
             Bu kupon diňe öňümizdäki 24 sagadyň dowamynda hereket edýär. Arzanladyşdan peýdalanmak üçin töleg wagtynda ulanmagy ýatdan çykarmaň.
         </p>
@@ -151,11 +159,11 @@
         const btnIcon = document.getElementById('copyIcon');
         
         btnText.innerText = 'Göçürildi!';
-        btnIcon.innerText = 'check';
+        btnIcon.innerHTML = document.getElementById('icon-check').innerHTML;
         
         setTimeout(() => {
             btnText.innerText = 'Kody göçür';
-            btnIcon.innerText = 'content_copy';
+            btnIcon.innerHTML = document.getElementById('icon-content_copy').innerHTML;
         }, 2000);
     }
 
diff --git a/resources/views/verification/index.blade.php b/resources/views/verification/index.blade.php
index bc6c6a4..5043f48 100644
--- a/resources/views/verification/index.blade.php
+++ b/resources/views/verification/index.blade.php
@@ -34,7 +34,7 @@
     <form action="{{ route('verification.send') }}" method="POST" class="flex-grow flex flex-col" id="phone-form">
         @csrf
         <div class="space-y-md flex-grow">
-            <div class="group relative flex items-center bg-surface-container-lowest border border-outline-variant rounded-DEFAULT h-16 px-md transition-all duration-300 focused-input-glow focus-within:border-primary">
+            <div class="group relative flex items-center bg-surface-container-lowest border border-outline-variant rounded h-16 px-md transition-all duration-300 focused-input-glow focus-within:border-primary">
                 <!-- Country Code Selector (Simulated) -->
                 <button type="button" class="flex items-center gap-xs pr-md border-r border-outline-variant mr-md hover:bg-surface-container-low transition-colors h-10 rounded-sm">
                     <span class="font-label-md text-label-md text-on-surface">+993</span>
@@ -49,8 +49,8 @@
             <p class="text-error text-sm">{{ $message }}</p>
             @enderror
 
-            <div class="flex items-start gap-sm bg-secondary-container/30 p-md rounded-DEFAULT border border-secondary-container">
-                <span class="material-symbols-outlined text-on-secondary-container mt-0.5" data-icon="info">info</span>
+            <div class="flex items-start gap-sm bg-secondary-container/30 p-md rounded border border-secondary-container">
+                <x-icon name="info" class="w-6 h-6 text-on-secondary-container mt-0.5" />
                 <p class="font-body-sm text-body-sm text-on-secondary-container">
                     Tassyklaýyş maksady bilen size bir SMS kod iberiler.
                 </p>
diff --git a/resources/views/verification/verify.blade.php b/resources/views/verification/verify.blade.php
index b93a0a0..35f3312 100644
--- a/resources/views/verification/verify.blade.php
+++ b/resources/views/verification/verify.blade.php
@@ -13,7 +13,7 @@
 
 @section('header-back')
     <a href="{{ route('verification.index') }}" class="hover:opacity-80 transition-opacity active:scale-95 transition-transform flex items-center justify-center p-2 rounded-full">
-        <span class="material-symbols-outlined text-primary" data-icon="arrow_back">arrow_back</span>
+        <x-icon name="arrow_back" class="w-6 h-6 text-primary" />
     </a>
 @endsection
 
@@ -29,7 +29,7 @@
     <!-- Hero Content -->
     <div class="mt-2xl text-center">
         <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-secondary-container mb-lg">
-            <span class="material-symbols-outlined text-primary text-4xl" data-icon="app_registration">app_registration</span>
+            <x-icon name="app_registration" class="w-10 h-10 text-primary" />
         </div>
         <h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Belgiňizi tassyklaň</h2>
 
@@ -57,10 +57,10 @@
 
         <!-- OTP Inputs -->
         <div class="mt-2xl flex justify-center gap-md" id="otp-container">
-            <input autocomplete="one-time-code" class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
-            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
-            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
-            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded-DEFAULT border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
+            <input autocomplete="one-time-code" class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
+            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
+            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
+            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
         </div>
 
         <!-- Actions -->
@@ -81,9 +81,9 @@
     </div>
 
     <!-- Info Card -->
-    <div class="mt-auto mb-xl p-md rounded-DEFAULT border border-outline-variant bg-surface-container-low">
+    <div class="mt-auto mb-xl p-md rounded border border-outline-variant bg-surface-container-low">
         <div class="flex gap-sm">
-            <span class="material-symbols-outlined text-on-surface-variant" data-icon="info">info</span>
+            <x-icon name="info" class="w-6 h-6 text-on-surface-variant" />
             <p class="font-body-sm text-body-sm text-on-surface-variant">
                 SMS kody 2 minutdan 5 minuda çenli baryp biler, garaşmagyňyzy Sizden haýyş edýäris.
             </p>