diff --git a/resources/js/layouts/auth/AuthSimpleLayout.vue b/resources/js/layouts/auth/AuthSimpleLayout.vue
index b54c094..7b846d9 100644
--- a/resources/js/layouts/auth/AuthSimpleLayout.vue
+++ b/resources/js/layouts/auth/AuthSimpleLayout.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
 import { home } from '@/routes';
 
 defineProps<{
@@ -11,27 +10,33 @@ defineProps<{
 
 <template>
     <div
-        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10"
+        class="flex min-h-screen flex-col items-center justify-center bg-[#f2f6f8] p-6"
     >
-        <div class="w-full max-w-sm">
+        <div class="w-full max-w-[440px]">
             <div class="flex flex-col gap-8">
                 <div class="flex flex-col items-center gap-4">
                     <Link
                         :href="home()"
                         class="flex flex-col items-center gap-2 font-medium"
                     >
-                        <div
-                            class="mb-1 flex h-9 w-9 items-center justify-center rounded-md"
-                        >
-                            <AppLogoIcon
-                                class="size-9 fill-current text-[var(--foreground)] dark:text-white"
-                            />
+                        <div class="flex h-14 w-14 items-center justify-center">
+                            <svg
+                                class="h-14 w-14 fill-current text-[#03a9f4]"
+                                viewBox="0 0 64 64"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <circle cx="32" cy="32" r="30" fill="#03a9f4" />
+                                <circle cx="32" cy="32" r="26" fill="white" />
+                                <rect x="30" y="12" width="4" height="18" rx="2" fill="#03a9f4" />
+                                <rect x="30" y="28" width="4" height="20" rx="2" fill="#333" transform="rotate(60 32 32)" />
+                                <circle cx="32" cy="32" r="3" fill="#03a9f4" />
+                            </svg>
                         </div>
-                        <span class="sr-only">{{ title }}</span>
+                        <span class="sr-only">ClockyLog</span>
                     </Link>
                     <div class="space-y-2 text-center">
-                        <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-center text-sm text-muted-foreground">
+                        <h1 class="text-2xl font-semibold text-[#333]">{{ title }}</h1>
+                        <p class="text-sm text-[#607d8b]">
                             {{ description }}
                         </p>
                     </div>
diff --git a/resources/js/pages/Homepage.vue b/resources/js/pages/Homepage.vue
index 387eb7c..1f0a1f5 100644
--- a/resources/js/pages/Homepage.vue
+++ b/resources/js/pages/Homepage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { login, register } from '@/routes';
 
 const isMobileMenuOpen = ref(false);
 const activeFeatureTab = ref(0);
@@ -322,18 +323,18 @@ onMounted(() => {
 
                     <!-- Desktop Auth Buttons -->
                     <div class="hidden lg:flex items-center gap-3">
-                        <a
-                            href="https://app.clockify.me/en/login"
+                        <Link
+                            :href="login()"
                             class="text-sm font-medium text-gray-700 hover:text-gray-900 px-4 py-2"
                         >
                             Log in
-                        </a>
-                        <a
-                            href="https://app.clockify.me/en/signup"
-                            class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[0b4eb8] transition-colors"
+                        </Link>
+                        <Link
+                            :href="register()"
+                            class="text-sm font-medium bg-[#0d5ad8] text-white px-5 py-2.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
                         >
                             Sign up free
-                        </a>
+                        </Link>
                     </div>
 
                     <!-- Mobile menu button -->
@@ -372,18 +373,18 @@ onMounted(() => {
                     <a href="/customers" class="block text-sm text-gray-600 hover:text-gray-900">Reviews</a>
                     <a href="/help" class="block text-sm text-gray-600 hover:text-gray-900">Support</a>
                     <div class="pt-3 border-t border-gray-200 space-y-2">
-                        <a
-                            href="https://app.clockify.me/en/login"
+                        <Link
+                            :href="login()"
                             class="block text-sm text-center text-gray-700 py-2"
                         >
                             Log in
-                        </a>
-                        <a
-                            href="https://app.clockify.me/en/signup"
+                        </Link>
+                        <Link
+                            :href="register()"
                             class="block text-sm text-center bg-[#0d5ad8] text-white py-2.5 rounded-md"
                         >
                             Sign up free
-                        </a>
+                        </Link>
                     </div>
                 </div>
             </div>
@@ -418,12 +419,12 @@ onMounted(() => {
 
                 <!-- CTA Buttons -->
                 <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
-                    <a
-                        href="https://app.clockify.me/signup"
-                        class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[0b4eb8] transition-colors"
+                    <Link
+                        :href="register()"
+                        class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
                     >
                         Start tracking time - it's free!
-                    </a>
+                    </Link>
                     <div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
                         <img
                             src="/assets/images/signed-up-icon.svg"
@@ -730,12 +731,12 @@ onMounted(() => {
                 </p>
 
                 <div class="text-center mb-12">
-                    <a
-                        href="https://app.clockify.me/en/login"
+                    <Link
+                        :href="login()"
                         class="inline-flex items-center gap-2 text-[#0d5ad8] hover:underline font-medium"
                     >
                         Open Clockify in your browser
-                    </a>
+                    </Link>
                     <p class="mt-2 text-[#6b6b6b]">or download for:</p>
                 </div>
 
@@ -884,12 +885,12 @@ onMounted(() => {
                     24/7 Support • Cancel Anytime • 7-day Trial
                 </p>
                 <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-                    <a
-                        href="https://app.clockify.me/signup"
-                        class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[0b4eb8] transition-colors"
+                    <Link
+                        :href="register()"
+                        class="w-full sm:w-auto text-center text-base font-medium bg-[#0d5ad8] text-white px-8 py-3.5 rounded-md hover:bg-[#0b4eb8] transition-colors"
                     >
                         Create FREE account
-                    </a>
+                    </Link>
                     <div class="flex items-center gap-2 text-sm text-[#6b6b6b]">
                         <img
                             src="/assets/images/signed-up-icon.svg"
diff --git a/resources/js/pages/auth/ForgotPassword.vue b/resources/js/pages/auth/ForgotPassword.vue
index a39a0e1..a70d2c5 100644
--- a/resources/js/pages/auth/ForgotPassword.vue
+++ b/resources/js/pages/auth/ForgotPassword.vue
@@ -12,7 +12,7 @@ import { email } from '@/routes/password';
 defineOptions({
     layout: {
         title: 'Forgot password',
-        description: 'Enter your email to receive a password reset link',
+        description: 'Enter your email and we\'ll send you a link to reset your password',
     },
 });
 
@@ -26,15 +26,15 @@ defineProps<{
 
     <div
         v-if="status"
-        class="mb-4 text-center text-sm font-medium text-green-600"
+        class="mb-2 text-center text-sm font-medium text-green-600"
     >
         {{ status }}
     </div>
 
-    <div class="space-y-6">
+    <div class="space-y-5">
         <Form v-bind="email.form()" v-slot="{ errors, processing }">
             <div class="grid gap-2">
-                <Label for="email">Email address</Label>
+                <Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
                 <Input
                     id="email"
                     type="email"
@@ -42,25 +42,26 @@ defineProps<{
                     autocomplete="off"
                     autofocus
                     placeholder="email@example.com"
+                    class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.email" />
             </div>
 
-            <div class="my-6 flex items-center justify-start">
+            <div class="pt-2">
                 <Button
-                    class="w-full"
+                    class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
                     :disabled="processing"
                     data-test="email-password-reset-link-button"
                 >
                     <Spinner v-if="processing" />
-                    Email password reset link
+                    <span v-else>Email password reset link</span>
                 </Button>
             </div>
         </Form>
 
-        <div class="space-x-1 text-center text-sm text-muted-foreground">
+        <div class="text-center text-sm text-[#607d8b]">
             <span>Or, return to</span>
-            <TextLink :href="login()">log in</TextLink>
+            <TextLink :href="login()" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">log in</TextLink>
         </div>
     </div>
 </template>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 6e62f28..1e7b3da 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -31,7 +31,7 @@ defineProps<{
 
     <div
         v-if="status"
-        class="mb-4 text-center text-sm font-medium text-green-600"
+        class="mb-2 text-center text-sm font-medium text-green-600"
     >
         {{ status }}
     </div>
@@ -40,32 +40,33 @@ defineProps<{
         v-bind="store.form()"
         :reset-on-success="['password']"
         v-slot="{ errors, processing }"
-        class="flex flex-col gap-6"
+        class="flex flex-col gap-5"
     >
-        <div class="grid gap-6">
+        <div class="grid gap-5">
             <div class="grid gap-2">
-                <Label for="email">Email address</Label>
+                <Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
                 <Input
                     id="email"
                     type="email"
                     name="email"
                     required
                     autofocus
-                    :tabindex="1"
+                    tabindex="1"
                     autocomplete="email"
                     placeholder="email@example.com"
+                    class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.email" />
             </div>
 
             <div class="grid gap-2">
                 <div class="flex items-center justify-between">
-                    <Label for="password">Password</Label>
+                    <Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
                     <TextLink
                         v-if="canResetPassword"
                         :href="request()"
-                        class="text-sm"
-                        :tabindex="5"
+                        class="text-sm text-[#03a9f4] hover:text-[#0288d1]"
+                        tabindex="5"
                     >
                         Forgot password?
                     </TextLink>
@@ -74,38 +75,45 @@ defineProps<{
                     id="password"
                     name="password"
                     required
-                    :tabindex="2"
+                    tabindex="2"
                     autocomplete="current-password"
                     placeholder="Password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password" />
             </div>
 
-            <div class="flex items-center justify-between">
-                <Label for="remember" class="flex items-center space-x-3">
-                    <Checkbox id="remember" name="remember" :tabindex="3" />
-                    <span>Remember me</span>
+            <div class="flex items-center">
+                <Label for="remember" class="flex items-center space-x-2 cursor-pointer">
+                    <Checkbox
+                        id="remember"
+                        name="remember"
+                        tabindex="3"
+                        class="border-[#e9e9ed] data-[checked]:border-[#03a9f4] data-[checked]:bg-[#03a9f4] focus:ring-[#03a9f4]"
+                    />
+                    <span class="text-sm text-[#546e7a]">Remember me</span>
                 </Label>
             </div>
 
             <Button
                 type="submit"
-                class="mt-4 w-full"
-                :tabindex="4"
+                class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
+                tabindex="4"
                 :disabled="processing"
                 data-test="login-button"
             >
                 <Spinner v-if="processing" />
-                Log in
+                <span v-else>Log in</span>
             </Button>
         </div>
 
-        <div
-            class="text-center text-sm text-muted-foreground"
-            v-if="canRegister"
-        >
+        <div class="text-center text-sm text-[#607d8b]">
             Don't have an account?
-            <TextLink :href="register()" :tabindex="5">Sign up</TextLink>
+            <TextLink
+                :href="register()"
+                tabindex="5"
+                class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
+            >Sign up</TextLink>
         </div>
     </Form>
 </template>
diff --git a/resources/js/pages/auth/Register.vue b/resources/js/pages/auth/Register.vue
index 505c279..a1d6852 100644
--- a/resources/js/pages/auth/Register.vue
+++ b/resources/js/pages/auth/Register.vue
@@ -25,84 +25,87 @@ defineOptions({
         v-bind="store.form()"
         :reset-on-success="['password', 'password_confirmation']"
         v-slot="{ errors, processing }"
-        class="flex flex-col gap-6"
+        class="flex flex-col gap-5"
     >
-        <div class="grid gap-6">
+        <div class="grid gap-5">
             <div class="grid gap-2">
-                <Label for="name">Name</Label>
+                <Label for="name" class="text-sm font-medium text-[#333]">Name</Label>
                 <Input
                     id="name"
                     type="text"
                     required
                     autofocus
-                    :tabindex="1"
+                    tabindex="1"
                     autocomplete="name"
                     name="name"
                     placeholder="Full name"
+                    class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.name" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="email">Email address</Label>
+                <Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
                 <Input
                     id="email"
                     type="email"
                     required
-                    :tabindex="2"
+                    tabindex="2"
                     autocomplete="email"
                     name="email"
                     placeholder="email@example.com"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.email" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="password">Password</Label>
+                <Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
                 <PasswordInput
                     id="password"
                     required
-                    :tabindex="3"
+                    tabindex="3"
                     autocomplete="new-password"
                     name="password"
                     placeholder="Password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="password_confirmation">Confirm password</Label>
+                <Label for="password_confirmation" class="text-sm font-medium text-[#333]">Confirm password</Label>
                 <PasswordInput
                     id="password_confirmation"
                     required
-                    :tabindex="4"
+                    tabindex="4"
                     autocomplete="new-password"
                     name="password_confirmation"
                     placeholder="Confirm password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password_confirmation" />
             </div>
 
             <Button
                 type="submit"
-                class="mt-2 w-full"
+                class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
                 tabindex="5"
                 :disabled="processing"
                 data-test="register-user-button"
             >
                 <Spinner v-if="processing" />
-                Create account
+                <span v-else>Create account</span>
             </Button>
         </div>
 
-        <div class="text-center text-sm text-muted-foreground">
+        <div class="text-center text-sm text-[#607d8b]">
             Already have an account?
             <TextLink
                 :href="login()"
-                class="underline underline-offset-4"
-                :tabindex="6"
-                >Log in</TextLink
-            >
+                class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
+                tabindex="6"
+            >Log in</TextLink>
         </div>
     </Form>
 </template>
diff --git a/resources/js/pages/auth/ResetPassword.vue b/resources/js/pages/auth/ResetPassword.vue
index eef6c2c..9bec56d 100644
--- a/resources/js/pages/auth/ResetPassword.vue
+++ b/resources/js/pages/auth/ResetPassword.vue
@@ -3,16 +3,18 @@ import { Form, Head } from '@inertiajs/vue3';
 import { ref } from 'vue';
 import InputError from '@/components/InputError.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
+import TextLink from '@/components/TextLink.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Spinner } from '@/components/ui/spinner';
+import { login } from '@/routes';
 import { update } from '@/routes/password';
 
 defineOptions({
     layout: {
         title: 'Reset password',
-        description: 'Please enter your new password below',
+        description: 'Enter your new password below',
     },
 });
 
@@ -33,55 +35,60 @@ const inputEmail = ref(props.email);
         :reset-on-success="['password', 'password_confirmation']"
         v-slot="{ errors, processing }"
     >
-        <div class="grid gap-6">
+        <div class="grid gap-5">
             <div class="grid gap-2">
-                <Label for="email">Email</Label>
+                <Label for="email" class="text-sm font-medium text-[#333]">Email</Label>
                 <Input
                     id="email"
                     type="email"
                     name="email"
                     autocomplete="email"
                     v-model="inputEmail"
-                    class="mt-1 block w-full"
+                    class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] cursor-not-allowed"
                     readonly
                 />
                 <InputError :message="errors.email" class="mt-2" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="password">Password</Label>
+                <Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
                 <PasswordInput
                     id="password"
                     name="password"
                     autocomplete="new-password"
-                    class="mt-1 block w-full"
                     autofocus
                     placeholder="Password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password" />
             </div>
 
             <div class="grid gap-2">
-                <Label for="password_confirmation"> Confirm password </Label>
+                <Label for="password_confirmation" class="text-sm font-medium text-[#333]">Confirm password</Label>
                 <PasswordInput
                     id="password_confirmation"
                     name="password_confirmation"
                     autocomplete="new-password"
-                    class="mt-1 block w-full"
                     placeholder="Confirm password"
+                    class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
                 />
                 <InputError :message="errors.password_confirmation" />
             </div>
 
             <Button
                 type="submit"
-                class="mt-4 w-full"
+                class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
                 :disabled="processing"
                 data-test="reset-password-button"
             >
                 <Spinner v-if="processing" />
-                Reset password
+                <span v-else>Reset password</span>
             </Button>
         </div>
+
+        <div class="text-center text-sm text-[#607d8b]">
+            <span>Or, return to</span>
+            <TextLink :href="login()" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">log in</TextLink>
+        </div>
     </Form>
 </template>
diff --git a/resources/js/pages/auth/VerifyEmail.vue b/resources/js/pages/auth/VerifyEmail.vue
index e486278..e49f972 100644
--- a/resources/js/pages/auth/VerifyEmail.vue
+++ b/resources/js/pages/auth/VerifyEmail.vue
@@ -8,9 +8,8 @@ import { send } from '@/routes/verification';
 
 defineOptions({
     layout: {
-        title: 'Verify email',
-        description:
-            'Please verify your email address by clicking on the link we just emailed to you.',
+        title: 'Verify your email address',
+        description: "We've sent a verification link to your email address. Check your inbox and click the link to get started.",
     },
 });
 
@@ -24,24 +23,30 @@ defineProps<{
 
     <div
         v-if="status === 'verification-link-sent'"
-        class="mb-4 text-center text-sm font-medium text-green-600"
+        class="mb-2 text-center text-sm font-medium text-green-600"
     >
-        A new verification link has been sent to the email address you provided
-        during registration.
+        A new verification link has been sent to the email address you provided during registration.
     </div>
 
-    <Form
-        v-bind="send.form()"
-        class="space-y-6 text-center"
-        v-slot="{ processing }"
-    >
-        <Button :disabled="processing" variant="secondary">
-            <Spinner v-if="processing" />
-            Resend verification email
-        </Button>
+    <div class="space-y-5">
+        <Form
+            v-bind="send.form()"
+            class="text-center"
+            v-slot="{ processing }"
+        >
+            <Button 
+                class="w-full h-11 bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
+                :disabled="processing"
+            >
+                <Spinner v-if="processing" />
+                <span v-else>Resend verification email</span>
+            </Button>
+        </Form>
 
-        <TextLink :href="logout()" as="button" class="mx-auto block text-sm">
-            Log out
-        </TextLink>
-    </Form>
+        <div class="text-center text-sm text-[#607d8b]">
+            <TextLink :href="logout()" as="button" class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4">
+                Log out
+            </TextLink>
+        </div>
+    </div>
 </template>