diff --git a/app/Http/Controllers/SubjectController.php b/app/Http/Controllers/SubjectController.php
index e66b6d2..e23715b 100644
--- a/app/Http/Controllers/SubjectController.php
+++ b/app/Http/Controllers/SubjectController.php
@@ -6,13 +6,18 @@
 use App\Models\Node;
 use App\Models\Notice;
 use App\Models\Subject;
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
 use Inertia\Inertia;
 
 class SubjectController extends Controller
 {
-    public function index($course)
+    public function index(Request $request, $course)
     {
+        // If visiting root '/' and user explicitly preferred 'ssc', redirect cleanly on server side
+        if ($request->path() === '/' && $request->cookie('preferred_course') === 'ssc') {
+            return redirect('/ssc');
+        }
         $subjects = Cache::rememberForever("home_page_subjects_{$course}", function () use ($course) {
             return Subject::orderBy('sort_order', 'asc')
                 ->where('course', $course)
diff --git a/bootstrap/app.php b/bootstrap/app.php
index 9b3dd2f..f4829ba 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -21,6 +21,9 @@
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware): void {
+        $middleware->encryptCookies(except: [
+            'preferred_course',
+        ]);
         $middleware->web(append: [
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,
diff --git a/resources/js/components/AppLogo.vue b/resources/js/components/AppLogo.vue
index edcf3f1..6151d87 100644
--- a/resources/js/components/AppLogo.vue
+++ b/resources/js/components/AppLogo.vue
@@ -4,10 +4,26 @@ import { computed } from 'vue';
 
 const page = usePage();
 const isSsc = computed(() => page.url.startsWith('/ssc'));
+
+const logoHref = computed(() => {
+    if (typeof window !== 'undefined') {
+        try {
+            const pref = localStorage.getItem('preferred_course');
+
+            if (pref === 'ssc') {
+return '/ssc';
+}
+        } catch {
+            // ignore
+        }
+    }
+
+    return isSsc.value ? '/ssc' : '/';
+});
 </script>
 
 <template>
-    <Link href="/" class="flex items-center gap-2.5">
+    <Link :href="logoHref" class="flex items-center gap-2.5">
         <div
             class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg bg-slate-900 shadow-sm dark:bg-gray-100"
         >
diff --git a/resources/js/components/AuthModal.vue b/resources/js/components/AuthModal.vue
new file mode 100644
index 0000000..f5911f6
--- /dev/null
+++ b/resources/js/components/AuthModal.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { X, LogIn } from 'lucide-vue-next';
+
+const modelValue = defineModel<boolean>({ default: false });
+
+defineProps({
+    title: {
+        type: String,
+        default: 'Sign in required',
+    },
+    message: {
+        type: String,
+        default: 'Please sign in to perform this action.',
+    },
+});
+
+const page = usePage();
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition
+            enter-active-class="transition duration-150 ease-out"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-100 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+        >
+            <div
+                v-if="modelValue"
+                class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs dark:bg-black/50"
+            >
+                <div
+                    class="relative w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
+                >
+                    <button
+                        @click="modelValue = false"
+                        class="absolute top-3.5 right-3.5 rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
+                    >
+                        <X class="h-3.5 w-3.5" />
+                    </button>
+
+                    <h3
+                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
+                    >
+                        {{ title }}
+                    </h3>
+                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                        {{ message }}
+                    </p>
+
+                    <div class="mt-4 flex items-center gap-2">
+                        <Link
+                            :href="`/login?redirect=${encodeURIComponent(page.url)}`"
+                            @click="modelValue = false"
+                            class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
+                        >
+                            <LogIn class="h-3.5 w-3.5" />
+                            <span>Sign in</span>
+                        </Link>
+                        <button
+                            @click="modelValue = false"
+                            class="rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
diff --git a/resources/js/components/BlogCard.vue b/resources/js/components/BlogCard.vue
index 7f7bd34..89499bf 100644
--- a/resources/js/components/BlogCard.vue
+++ b/resources/js/components/BlogCard.vue
@@ -1,38 +1,19 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
 import { ArrowRight, Heart, MessageSquare } from 'lucide-vue-next';
-import { computed } from 'vue';
 
-const props = defineProps({
+defineProps({
     blog: Object,
 });
-
-const formattedDate = computed(() => {
-    if (!props.blog?.created_at) {
-        return '';
-    }
-
-    const date = new Date(props.blog.created_at);
-
-    if (isNaN(date.getTime())) {
-        return '';
-    }
-
-    return new Intl.DateTimeFormat('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-    }).format(date);
-});
 </script>
 
 <template>
-    <div
-        class="group flex flex-row items-center overflow-hidden rounded-xl border border-slate-200 bg-white p-3 shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md sm:flex-col sm:p-0 dark:border-gray-700 dark:bg-gray-900 dark:hover:shadow-gray-900/50"
+    <Link
+        :href="'/blogs/' + blog.slug"
+        class="group relative flex flex-row items-center overflow-hidden rounded-xl border border-slate-200 bg-white p-3 shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md sm:flex-col sm:p-0 dark:border-gray-700 dark:bg-gray-900 dark:hover:shadow-gray-900/50"
     >
         <!-- Featured Image Container -->
-        <Link
-            :href="'/blogs/' + blog.slug"
+        <div
             class="relative block h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-slate-100 sm:aspect-[16/9] sm:h-auto sm:w-full sm:rounded-none dark:bg-gray-800"
         >
             <img
@@ -47,14 +28,14 @@ const formattedDate = computed(() => {
             >
                 {{ blog.category }}
             </div>
-        </Link>
+        </div>
 
         <!-- Card Body -->
         <div class="flex min-w-0 flex-1 flex-col justify-between pl-3 sm:p-4">
             <div>
-                <!-- News Meta (Author & Date & Mobile Category) -->
+                <!-- Top Row: Category / Author -->
                 <div
-                    class="mb-1 flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500 sm:mb-1.5 sm:text-xs dark:text-gray-400"
+                    class="mb-1 flex items-center gap-1.5 text-[11px] sm:mb-1.5 sm:text-xs"
                 >
                     <span
                         v-if="blog.category"
@@ -63,46 +44,29 @@ const formattedDate = computed(() => {
                         {{ blog.category }}
                     </span>
 
-                    <span class="text-slate-400 dark:text-gray-500"
-                        >Author</span
-                    >
+                    <span class="text-slate-400 dark:text-gray-500">By</span>
                     <Link
                         v-if="blog.user?.username"
                         :href="`/u/${blog.user.username}`"
-                        class="font-medium text-indigo-600 underline transition-colors hover:underline dark:text-indigo-400"
+                        @click.stop
+                        class="relative z-10 truncate font-semibold text-slate-700 transition-colors hover:text-indigo-600 hover:underline dark:text-gray-300 dark:hover:text-indigo-400"
                     >
                         {{ blog.user?.name }}
                     </Link>
                     <span
                         v-else
-                        class="font-medium text-slate-700 dark:text-gray-300"
+                        class="truncate font-semibold text-slate-700 dark:text-gray-300"
                     >
                         {{ blog.user?.name }}
                     </span>
-
-                    <span
-                        v-if="formattedDate"
-                        class="text-slate-300 dark:text-gray-600"
-                        >•</span
-                    >
-
-                    <time
-                        v-if="formattedDate"
-                        :datetime="blog.created_at"
-                        class="text-slate-400 dark:text-gray-500"
-                    >
-                        {{ formattedDate }}
-                    </time>
                 </div>
 
                 <!-- Title -->
-                <Link :href="'/blogs/' + blog.slug" class="group/title block">
-                    <h3
-                        class="line-clamp-2 text-xs leading-snug font-bold text-slate-900 transition duration-150 group-hover/title:text-indigo-600 sm:text-base dark:text-gray-100 dark:group-hover/title:text-indigo-400"
-                    >
-                        {{ blog.title }}
-                    </h3>
-                </Link>
+                <h3
+                    class="line-clamp-2 text-xs leading-snug font-bold text-slate-900 transition duration-150 group-hover:text-indigo-600 sm:text-base dark:text-gray-100 dark:group-hover:text-indigo-400"
+                >
+                    {{ blog.title }}
+                </h3>
 
                 <!-- Excerpt (hidden on mobile to save vertical space) -->
                 <p
@@ -119,21 +83,8 @@ const formattedDate = computed(() => {
                 <div
                     class="flex items-center gap-3 text-[11px] text-slate-400 sm:text-xs dark:text-gray-500"
                 >
-                    <span
-                        class="inline-flex items-center gap-1"
-                        :class="{
-                            'font-medium text-rose-500 dark:text-rose-400':
-                                blog.reactions_count > 0,
-                        }"
-                    >
-                        <Heart
-                            class="h-3.5 w-3.5"
-                            :class="
-                                blog.reactions_count > 0
-                                    ? 'fill-rose-500 text-rose-500'
-                                    : 'text-slate-400 dark:text-gray-500'
-                            "
-                        />
+                    <span class="inline-flex items-center gap-1">
+                        <Heart class="h-3.5 w-3.5" />
                         <span>{{ blog.reactions_count || 0 }}</span>
                     </span>
 
@@ -143,16 +94,13 @@ const formattedDate = computed(() => {
                     </span>
                 </div>
 
-                <Link
-                    :href="'/blogs/' + blog.slug"
-                    class="inline-flex items-center gap-1 text-[11px] font-semibold text-indigo-600 transition hover:text-indigo-700 sm:text-xs dark:text-indigo-400 dark:hover:text-indigo-300"
+                <!-- Bottom-Right Arrow Indicator -->
+                <div
+                    class="flex h-5 w-5 shrink-0 items-center justify-center text-slate-400 transition-transform duration-200 group-hover:translate-x-1 group-hover:text-indigo-600 dark:text-gray-500 dark:group-hover:text-indigo-400"
                 >
-                    <span>Read</span>
-                    <ArrowRight
-                        class="h-3.5 w-3.5 transform transition-transform duration-200 group-hover:translate-x-1"
-                    />
-                </Link>
+                    <ArrowRight class="h-3.5 w-3.5" />
+                </div>
             </div>
         </div>
-    </div>
+    </Link>
 </template>
diff --git a/resources/js/components/CourseSwitcher.vue b/resources/js/components/CourseSwitcher.vue
index 652b051..c174aaf 100644
--- a/resources/js/components/CourseSwitcher.vue
+++ b/resources/js/components/CourseSwitcher.vue
@@ -1,57 +1,117 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { ArrowRight } from 'lucide-vue-next';
-import { computed } from 'vue';
+import { ArrowRight, ChevronDown } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
 
 const page = usePage();
 const isSsc = computed(() => page.url.startsWith('/ssc'));
+const isMobileExpanded = ref(false);
+
+const toggleMobileExpand = () => {
+    isMobileExpanded.value = !isMobileExpanded.value;
+};
+
+const setCoursePreference = (course: 'hsc' | 'ssc') => {
+    try {
+        localStorage.setItem('preferred_course', course);
+        // Set cookie valid for 1 year so server can directly render preferred course without double-refresh
+        document.cookie = `preferred_course=${course};path=/;max-age=31536000;SameSite=Lax`;
+    } catch {
+        // ignore storage errors
+    }
+};
 </script>
 
 <template>
     <div
-        class="mb-6 flex flex-col gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-xs sm:flex-row sm:items-center sm:justify-between sm:p-5 dark:border-gray-700 dark:bg-gray-900"
+        class="mb-6 rounded-xl border border-slate-200 bg-white p-3.5 shadow-xs transition-all sm:p-5 dark:border-gray-700 dark:bg-gray-900"
     >
-        <!-- Large Browsing Indicator -->
-        <div class="flex items-center gap-3">
-            <span
-                class="inline-flex shrink-0 items-center justify-center rounded-lg px-3 py-1 text-xl font-black text-white shadow-xs sm:px-3.5 sm:py-1.5 sm:text-2xl"
-                :class="isSsc ? 'bg-emerald-600' : 'bg-indigo-600'"
-            >
-                {{ isSsc ? 'SSC' : 'HSC' }}
-            </span>
-            <div class="flex min-w-0 flex-col">
+        <div
+            class="flex items-center justify-between gap-3 cursor-pointer sm:cursor-default"
+            @click="toggleMobileExpand"
+        >
+            <!-- Large Browsing Indicator -->
+            <div class="flex items-center gap-3 min-w-0">
                 <span
-                    class="text-[11px] font-bold tracking-wider text-slate-400 uppercase sm:text-xs dark:text-gray-500"
+                    class="inline-flex shrink-0 items-center justify-center rounded-lg px-2.5 py-1 text-lg font-black text-white shadow-xs sm:px-3.5 sm:py-1.5 sm:text-2xl"
+                    :class="isSsc ? 'bg-emerald-600' : 'bg-indigo-600'"
                 >
-                    Active Repository
+                    {{ isSsc ? 'SSC' : 'HSC' }}
                 </span>
-                <p
-                    class="text-sm leading-snug font-extrabold text-slate-900 sm:text-base dark:text-gray-100"
-                >
-                    আপনি <span>{{ isSsc ? 'SSC' : 'HSC' }}</span> এর
-                    কন্টেন্টগুলো দেখছেন
-                </p>
+                <div class="flex min-w-0 flex-col">
+                    <span
+                        class="text-[10px] font-bold tracking-wider text-slate-400 uppercase sm:text-xs dark:text-gray-500"
+                    >
+                        Active Repository
+                    </span>
+                    <p
+                        class="truncate text-xs leading-snug font-extrabold text-slate-900 sm:text-base sm:whitespace-normal dark:text-gray-100"
+                    >
+                        আপনি <span>{{ isSsc ? 'SSC' : 'HSC' }}</span> এর
+                        কন্টেন্টগুলো দেখছেন
+                    </p>
+                </div>
+            </div>
+
+            <!-- Mobile Toggle Trigger Icon (Chevron) -->
+            <div
+                class="flex h-8 w-8 shrink-0 items-center justify-center text-slate-400 sm:hidden dark:text-gray-400"
+                :title="isMobileExpanded ? 'সংকোচন করুন' : 'পরিবর্তন করুন'"
+            >
+                <ChevronDown
+                    class="h-4 w-4 transition-transform duration-200"
+                    :class="{ 'rotate-180 text-slate-700 dark:text-gray-200': isMobileExpanded }"
+                />
             </div>
+
+            <!-- Desktop Switch Action Button (Always visible on sm and up) -->
+            <Link
+                :href="isSsc ? '/' : '/ssc'"
+                preserve-scroll
+                @click="setCoursePreference(isSsc ? 'hsc' : 'ssc')"
+                :class="[
+                    'group hidden shrink-0 items-center justify-center gap-2 rounded-lg border px-5 py-2.5 text-xs font-bold shadow-xs transition-all active:scale-[0.98] sm:inline-flex',
+                    isSsc
+                        ? 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-600 hover:text-white active:bg-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400 dark:hover:bg-indigo-500 dark:hover:text-white'
+                        : 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-600 hover:text-white active:bg-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500 dark:hover:text-white',
+                ]"
+            >
+                <span>
+                    <strong>{{ isSsc ? 'HSC ' : 'SSC ' }}</strong>
+                    বিভাগে পরিবর্তন করুন
+                </span>
+                <ArrowRight
+                    class="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-1"
+                />
+            </Link>
         </div>
 
-        <!-- Prominent Switch Action Button -->
-        <Link
-            :href="isSsc ? '/' : '/ssc'"
-            preserve-scroll
-            :class="[
-                'group inline-flex w-full shrink-0 items-center justify-center gap-2 rounded-lg border px-5 py-2.5 text-xs font-bold shadow-xs transition-all active:scale-[0.98] sm:w-auto',
-                isSsc
-                    ? 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-600 hover:text-white active:bg-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400 dark:hover:bg-indigo-500 dark:hover:text-white'
-                    : 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-600 hover:text-white active:bg-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500 dark:hover:text-white',
-            ]"
+        <!-- Mobile Expandable Switch Action Area (Glitch-Free CSS Grid Accordion) -->
+        <div
+            class="grid transition-all duration-200 ease-in-out sm:hidden"
+            :class="isMobileExpanded ? 'grid-rows-[1fr] opacity-100 mt-3 pt-3 border-t border-slate-100 dark:border-gray-800' : 'grid-rows-[0fr] opacity-0'"
         >
-            <span>
-                <strong>{{ isSsc ? 'HSC ' : 'SSC ' }}</strong>
-                বিভাগে পরিবর্তন করুন
-            </span>
-            <ArrowRight
-                class="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-1"
-            />
-        </Link>
+            <div class="overflow-hidden">
+                <Link
+                    :href="isSsc ? '/' : '/ssc'"
+                    preserve-scroll
+                    @click="setCoursePreference(isSsc ? 'hsc' : 'ssc')"
+                    :class="[
+                        'group flex w-full items-center justify-center gap-2 rounded-lg border px-4 py-2.5 text-xs font-bold shadow-xs transition-all active:scale-[0.98]',
+                        isSsc
+                            ? 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-600 hover:text-white active:bg-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400 dark:hover:bg-indigo-500 dark:hover:text-white'
+                            : 'border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-600 hover:text-white active:bg-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500 dark:hover:text-white',
+                    ]"
+                >
+                    <span>
+                        <strong>{{ isSsc ? 'HSC ' : 'SSC ' }}</strong>
+                        বিভাগে পরিবর্তন করুন
+                    </span>
+                    <ArrowRight
+                        class="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-1"
+                    />
+                </Link>
+            </div>
+        </div>
     </div>
 </template>
diff --git a/resources/js/components/FloatingShareBar.vue b/resources/js/components/FloatingShareBar.vue
index 2373f4e..e8dfec4 100644
--- a/resources/js/components/FloatingShareBar.vue
+++ b/resources/js/components/FloatingShareBar.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { Link, usePage } from '@inertiajs/vue3';
+import { usePage } from '@inertiajs/vue3';
 import {
     Share2,
     Check,
     Loader2,
-    LogIn,
-    X,
     Link as LinkIcon,
 } from 'lucide-vue-next';
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import AuthModal from './AuthModal.vue';
 
 const page = usePage();
 const user = computed(() => page.props.auth?.user);
@@ -210,57 +209,10 @@ onBeforeUnmount(() => {
         </div>
     </div>
 
-    <!-- Minimal Sign-in Dialog for Guests -->
-    <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-150 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-100 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
-        >
-            <div
-                v-if="showAuthModal"
-                class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs dark:bg-black/50"
-            >
-                <div
-                    class="relative w-full max-w-xs rounded-2xl border border-slate-200 bg-white p-5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
-                >
-                    <button
-                        @click="showAuthModal = false"
-                        class="absolute top-3.5 right-3.5 rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
-                    >
-                        <X class="h-3.5 w-3.5" />
-                    </button>
-
-                    <h3
-                        class="text-sm font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        Sign in required
-                    </h3>
-                    <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
-                        Please sign in to generate and copy short share links.
-                    </p>
-
-                    <div class="mt-4 flex items-center gap-2">
-                        <Link
-                            :href="`/login?redirect=${encodeURIComponent($page.url)}`"
-                            @click="showAuthModal = false"
-                            class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-slate-900 py-2 text-xs font-semibold text-white transition hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                        >
-                            <LogIn class="h-3.5 w-3.5" />
-                            <span>Sign in</span>
-                        </Link>
-                        <button
-                            @click="showAuthModal = false"
-                            class="rounded-xl border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
+    <!-- Auth Modal using reusable component -->
+    <AuthModal
+        v-model="showAuthModal"
+        title="Sign in required"
+        message="Please sign in to generate and copy short share links."
+    />
 </template>
diff --git a/resources/js/components/Footer.vue b/resources/js/components/Footer.vue
index f770fd2..51778bd 100644
--- a/resources/js/components/Footer.vue
+++ b/resources/js/components/Footer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { Link, usePage } from '@inertiajs/vue3';
 import {
     Github,
     Facebook,
@@ -10,12 +10,27 @@ import {
     Heart,
     Instagram,
 } from 'lucide-vue-next';
+import { computed } from 'vue';
 import AppLogo from './AppLogo.vue';
+
+const page = usePage();
+const currentUrl = computed(() => page.url);
+
+// Full marketing footer on primary landing/home views; sleek minimal footer elsewhere
+const isFullFooter = computed(() => {
+    const path = currentUrl.value.split('?')[0];
+
+    return path === '/' || path === '/ssc';
+});
 </script>
 
 <template>
+    <!-- Desktop: Always Full Footer (md:block) | Mobile: Full Footer on Home/SSC (block md:hidden) -->
     <footer
-        class="mt-auto border-t border-slate-100 bg-white py-12 sm:py-16 dark:border-gray-800 dark:bg-gray-900"
+        :class="[
+            isFullFooter ? 'block' : 'hidden md:block',
+            'mt-auto border-t border-slate-100 bg-white py-12 sm:py-16 dark:border-gray-800 dark:bg-gray-900',
+        ]"
     >
         <div class="mx-auto max-w-7xl px-4 sm:px-6">
             <div class="grid grid-cols-1 gap-y-10 md:grid-cols-12 md:gap-x-12">
@@ -54,8 +69,8 @@ import AppLogo from './AppLogo.vue';
                             href="https://instagram.com/hscstack"
                             rel="noopener noreferrer"
                             target="_blank"
-                            class="text-slate-400 transition-colors duration-150 hover:text-blue-600 dark:text-gray-500 dark:hover:text-blue-400"
-                            aria-label="Facebook Page"
+                            class="text-slate-400 transition-colors duration-150 hover:text-rose-600 dark:text-gray-500 dark:hover:text-rose-400"
+                            aria-label="Instagram Profile"
                         >
                             <Instagram class="h-5 w-5" />
                         </a>
@@ -126,7 +141,7 @@ import AppLogo from './AppLogo.vue';
                                     <Heart
                                         class="h-4 w-4 text-indigo-500 dark:text-indigo-400"
                                     />
-                                    <span>Support HSCStack</span>
+                                    <span>Support Us</span>
                                 </Link>
                             </li>
                             <li>
@@ -217,4 +232,50 @@ import AppLogo from './AppLogo.vue';
             </div>
         </div>
     </footer>
+
+    <!-- Minimal, Clean Mobile Footer on Non-Home Pages (md:hidden) -->
+    <footer
+        v-if="!isFullFooter"
+        class="mt-auto border-t border-slate-200/70 bg-white/80 pt-8 pb-6 backdrop-blur-md md:hidden dark:border-gray-800/70 dark:bg-gray-950/80"
+    >
+        <div class="mx-auto flex max-w-7xl flex-col items-center gap-3.5 px-4 text-center">
+            <!-- App Logo with top breathing room -->
+            <div class="pt-1">
+                <AppLogo />
+            </div>
+
+            <!-- Essential Links -->
+            <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 text-xs font-medium text-slate-600 dark:text-gray-400">
+                <Link
+                    href="/about-us"
+                    class="transition hover:text-indigo-600 dark:hover:text-indigo-400"
+                >
+                    About
+                </Link>
+                <Link
+                    href="/privacy-policy"
+                    class="transition hover:text-indigo-600 dark:hover:text-indigo-400"
+                >
+                    Privacy
+                </Link>
+                <Link
+                    href="/terms-service"
+                    class="transition hover:text-indigo-600 dark:hover:text-indigo-400"
+                >
+                    Terms
+                </Link>
+                <Link
+                    href="/support"
+                    class="transition hover:text-indigo-600 dark:hover:text-indigo-400"
+                >
+                    Support Us
+                </Link>
+            </div>
+
+            <!-- Copyright at the bottom -->
+            <p class="pt-1.5 text-[11px] font-medium text-slate-400 dark:text-gray-500">
+                &copy; 2026 HSCStack
+            </p>
+        </div>
+    </footer>
 </template>
diff --git a/resources/js/components/HomeHeader.vue b/resources/js/components/HomeHeader.vue
index 9286617..3c89984 100644
--- a/resources/js/components/HomeHeader.vue
+++ b/resources/js/components/HomeHeader.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import { Search } from 'lucide-vue-next';
 import { computed } from 'vue';
-const searchQuery = defineModel();
 const page = usePage();
 const isSsc = computed(() => page.url.startsWith('/ssc'));
 </script>
 
 <template>
-    <div class="px-6 pt-16 pb-3 text-center sm:pt-24 sm:pb-6">
+    <div class="px-6 pt-8 pb-8 text-center sm:pt-14 sm:pb-12">
         <div class="mx-auto max-w-3xl">
             <h1
                 class="mb-4 text-4xl font-black tracking-tight text-slate-900 sm:text-6xl lg:leading-[1.15] dark:text-gray-100"
@@ -27,30 +25,12 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
             </h1>
 
             <p
-                class="mx-auto mb-10 max-w-xl text-base leading-relaxed font-medium text-slate-700/90 sm:text-lg dark:text-gray-400"
+                class="mx-auto max-w-xl text-base leading-relaxed font-medium text-slate-700/90 sm:text-lg dark:text-gray-400"
             >
                 HSC & SSC স্টুডেন্টদের জন্য একদম ক্লিন ও ফাস্ট রিসোর্স
                 রিপোজিটরি। সাবজেক্ট এবং চ্যাপ্টার অনুযায়ী খুঁজে নিন প্রয়োজনীয়
                 ক্লাস, নোটস এবং প্র্যাক্টিক্যাল ।
             </p>
-
-            <div class="group relative mx-auto max-w-lg">
-                <div
-                    class="absolute -inset-0.5 rounded-2xl bg-gradient-to-r from-indigo-500 to-fuchsia-500 opacity-0 blur-md transition duration-300 group-focus-within:opacity-10"
-                ></div>
-
-                <div class="relative">
-                    <input
-                        v-model="searchQuery"
-                        type="text"
-                        placeholder="Search for subjects..."
-                        class="w-full appearance-none rounded-2xl border border-slate-200 bg-white/90 py-4 pr-4 pl-12 text-sm font-semibold shadow-md shadow-slate-100/40 backdrop-blur-md transition-all duration-300 placeholder:text-slate-400/90 focus:border-indigo-500 focus:bg-white focus:ring-4 focus:ring-indigo-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-800/90 dark:text-gray-100 dark:shadow-gray-900/60 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-800 dark:focus:ring-indigo-500/20"
-                    />
-                    <Search
-                        class="pointer-events-none absolute top-[18px] left-4 h-4.5 w-4.5 text-slate-400 transition-colors duration-300 group-focus-within:text-indigo-600 dark:text-gray-500 dark:group-focus-within:text-indigo-400"
-                    />
-                </div>
-            </div>
         </div>
     </div>
 </template>
diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index 093cdd7..935d62b 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Link, router, usePage } from '@inertiajs/vue3';
 import {
-    LogOut,
     LayoutDashboard,
     Home,
     ChevronDown,
@@ -11,13 +10,19 @@ import {
     User,
     Menu,
     X,
-    FolderGit2,
     BookOpen,
     LogIn,
+    Info,
+    Sparkles,
+    Users,
+    HeartHandshake,
+    Search,
 } from 'lucide-vue-next';
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { computed, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { globalSearchQuery } from '@/lib/searchStore';
 import { useDarkMode } from '@/lib/useDarkMode';
 import AppLogo from './AppLogo.vue';
+import AuthModal from './AuthModal.vue';
 
 defineProps({
     isAdmin: {
@@ -33,10 +38,67 @@ const user = computed(() => page.props.auth?.user);
 const canAccessAdmin = computed(() => page.props.auth?.can_access_admin);
 const currentUrl = computed(() => page.url);
 
-const isProjectsActive = computed(() =>
-    currentUrl.value.startsWith('/projects'),
-);
 const isBlogsActive = computed(() => currentUrl.value.startsWith('/blogs'));
+const isHomeActive = computed(
+    () =>
+        currentUrl.value === '/' ||
+        currentUrl.value.startsWith('/?') ||
+        currentUrl.value === '/ssc' ||
+        currentUrl.value.startsWith('/ssc?'),
+);
+
+const isHomeOrSsc = computed(
+    () =>
+        currentUrl.value === '/' ||
+        currentUrl.value.startsWith('/?') ||
+        currentUrl.value === '/ssc' ||
+        currentUrl.value.startsWith('/ssc?'),
+);
+
+const showAuthModal = ref(false);
+const authModalMessage = ref('অনুগ্রহ করে সার্চ ফিচার ব্যবহার করতে লগইন করুন।');
+
+const searchActive = ref(false);
+const searchInputRef = ref<HTMLInputElement | null>(null);
+
+const triggerSearch = () => {
+    if (!user.value) {
+        authModalMessage.value = 'অনুগ্রহ করে বিষয় ও কনটেন্ট সার্চ করতে প্রথমে লগইন করুন।';
+        showAuthModal.value = true;
+
+        return;
+    }
+
+    searchActive.value = true;
+    nextTick(() => {
+        searchInputRef.value?.focus();
+    });
+};
+
+const closeSearch = () => {
+    searchActive.value = false;
+    globalSearchQuery.value = '';
+};
+
+const clearSearch = () => {
+    globalSearchQuery.value = '';
+};
+
+const homeHref = computed(() => {
+    if (typeof window !== 'undefined') {
+        try {
+            const pref = localStorage.getItem('preferred_course');
+
+            if (pref === 'ssc') {
+return '/ssc';
+}
+        } catch {
+            // ignore
+        }
+    }
+
+    return currentUrl.value.startsWith('/ssc') ? '/ssc' : '/';
+});
 
 const dropdownOpen = ref(false);
 const mobileMenuOpen = ref(false);
@@ -58,24 +120,62 @@ const closeMobileMenu = () => {
     mobileMenuOpen.value = false;
 };
 
+// Prevent background scroll when mobile drawer is open
+watch(mobileMenuOpen, (isOpen) => {
+    if (typeof document !== 'undefined') {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+    }
+});
+
+const searchContainerRef = ref<HTMLElement | null>(null);
+
+const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && searchActive.value) {
+        closeSearch();
+    }
+};
+
 const handleClickOutside = (e: MouseEvent) => {
     if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
         closeDropdown();
     }
+
+    // If search is active and click is completely outside the search container
+    if (
+        searchActive.value &&
+        searchContainerRef.value &&
+        !searchContainerRef.value.contains(e.target as Node)
+    ) {
+        // Only auto-close if input is empty
+        if (!globalSearchQuery.value.trim()) {
+            closeSearch();
+        }
+    }
 };
 
 let removeNavListener: (() => void) | null = null;
 
 onMounted(() => {
     document.addEventListener('click', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
     removeNavListener = router.on('navigate', () => {
         closeDropdown();
         closeMobileMenu();
+        closeSearch();
     });
 });
 
 onBeforeUnmount(() => {
     document.removeEventListener('click', handleClickOutside);
+    document.removeEventListener('keydown', handleKeyDown);
+
+    if (typeof document !== 'undefined') {
+        document.body.style.overflow = '';
+    }
 
     if (removeNavListener) {
         removeNavListener();
@@ -85,344 +185,529 @@ onBeforeUnmount(() => {
 
 <template>
     <nav
-        class="sticky top-0 z-50 border-b border-slate-200/80 bg-white/80 shadow-xs backdrop-blur-xl transition-colors dark:border-gray-800/80 dark:bg-gray-950/80"
+        class="sticky top-0 z-40 border-b border-slate-200/80 bg-white/80 shadow-xs backdrop-blur-xl transition-colors dark:border-gray-800/80 dark:bg-gray-950/80"
     >
         <div
-            class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"
+            class="relative mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"
         >
-            <!-- Left: Logo -->
-            <div class="flex items-center gap-3">
-                <AppLogo />
-            </div>
+            <!-- Search Active Takeover (Full-width bar for both PC & Mobile) -->
+            <div
+                v-if="searchActive"
+                ref="searchContainerRef"
+                class="flex h-full w-full items-center gap-3 animate-in fade-in duration-150"
+            >
+                <div class="relative flex-1">
+                    <input
+                        ref="searchInputRef"
+                        v-model="globalSearchQuery"
+                        type="text"
+                        placeholder="Search subjects..."
+                        class="w-full appearance-none rounded-xl border border-slate-200 bg-slate-50 py-2.5 pr-20 pl-10 text-sm font-semibold text-slate-800 placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-indigo-400 dark:focus:bg-gray-900"
+                    />
+                    <Search
+                        class="pointer-events-none absolute top-1/2 -translate-y-1/2 left-3 h-4 w-4 text-slate-400"
+                    />
 
-            <!-- Center/Desktop Navigation (md and up) -->
-            <div class="hidden items-center gap-1.5 md:flex">
-                <Link
-                    href="/projects"
-                    class="flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-xs font-bold transition-all"
-                    :class="
-                        isProjectsActive
-                            ? 'bg-slate-100 text-indigo-600 dark:bg-gray-800 dark:text-indigo-400'
-                            : 'text-slate-600 hover:bg-slate-100/60 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-100'
-                    "
-                >
-                    <FolderGit2 class="h-3.5 w-3.5" />
-                    <span>Projects</span>
-                </Link>
-
-                <Link
-                    href="/blogs"
-                    class="flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-xs font-bold transition-all"
-                    :class="
-                        isBlogsActive
-                            ? 'bg-slate-100 text-indigo-600 dark:bg-gray-800 dark:text-indigo-400'
-                            : 'text-slate-600 hover:bg-slate-100/60 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-100'
-                    "
-                >
-                    <BookOpen class="h-3.5 w-3.5" />
-                    <span>Blogs</span>
-                </Link>
-            </div>
+                    <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5">
+                        <button
+                            v-if="globalSearchQuery"
+                            @click="clearSearch"
+                            class="p-1 text-slate-400 hover:text-slate-600 dark:hover:text-gray-200"
+                            title="Clear search"
+                        >
+                            <X class="h-3.5 w-3.5" />
+                        </button>
+
+                        <Link
+                            href="/ai"
+                            class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-2.5 py-1 text-xs font-bold text-white shadow-2xs transition-all hover:bg-indigo-700 active:scale-95 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                            title="HSCStack AI"
+                        >
+                            <Sparkles class="h-3 w-3" />
+                            <span>Ask AI</span>
+                        </Link>
+                    </div>
+                </div>
 
-            <!-- Right: Controls & Profile Cluster -->
-            <div class="hidden items-center gap-3 md:flex">
-                <!-- Dark Mode Toggle Button -->
+                <!-- Close / Cancel Button (Icon on mobile, text on PC) -->
                 <button
-                    @click="toggle"
-                    class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200/80 bg-slate-50 text-slate-600 transition-all hover:bg-slate-100 hover:text-slate-900 active:scale-95 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                    :title="
-                        theme === 'system'
-                            ? 'System theme (click to cycle)'
-                            : theme === 'dark'
-                              ? 'Dark mode (click to cycle)'
-                              : 'Light mode (click to cycle)'
-                    "
+                    type="button"
+                    @click="closeSearch"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 shadow-2xs hover:bg-slate-50 active:scale-95 sm:h-auto sm:w-auto sm:px-3.5 sm:py-2 sm:text-xs sm:font-bold dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+                    title="Close search"
                 >
-                    <Monitor v-if="theme === 'system'" class="h-4 w-4" />
-                    <Sun v-else-if="theme === 'light'" class="h-4 w-4" />
-                    <Moon v-else class="h-4 w-4" />
+                    <X class="h-4 w-4 sm:hidden" />
+                    <span class="hidden sm:inline">Cancel</span>
                 </button>
+            </div>
 
-                <div class="h-5 w-px bg-slate-200 dark:bg-gray-800"></div>
+            <!-- Standard Normal Bar (Hidden when searchActive is true) -->
+            <template v-else>
+                <!-- Left: Logo -->
+                <div class="flex items-center gap-3">
+                    <AppLogo />
+                </div>
 
-                <!-- Guest: Login CTA -->
-                <Link
-                    v-if="!user"
-                    href="/login"
-                    class="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-4 py-2 text-xs font-bold text-white shadow-xs transition-all hover:bg-slate-800 hover:shadow-md active:scale-95 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
+                <!-- Center/Desktop Navigation (md and up) - Perfectly centered -->
+                <nav
+                    class="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center gap-6"
                 >
-                    <LogIn class="h-3.5 w-3.5" />
-                    <span>Login</span>
-                </Link>
+                    <Link
+                        :href="homeHref"
+                        class="text-sm font-medium transition-colors"
+                        :class="
+                            isHomeActive
+                                ? 'font-semibold text-indigo-600 dark:text-indigo-400'
+                                : 'text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-gray-100'
+                        "
+                    >
+                        Home
+                    </Link>
 
-                <!-- Authenticated: User Dropdown -->
-                <div v-else ref="dropdownRef" class="relative">
-                    <button
-                        @click="toggleDropdown"
-                        class="flex items-center gap-2.5 rounded-full border border-slate-200/90 bg-white py-1 pr-3 pl-1 shadow-2xs transition-all hover:border-slate-300 hover:bg-slate-50 active:scale-98 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:bg-gray-800"
+                    <Link
+                        href="/blogs"
+                        class="text-sm font-medium transition-colors"
+                        :class="
+                            isBlogsActive
+                                ? 'font-semibold text-indigo-600 dark:text-indigo-400'
+                                : 'text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-gray-100'
+                        "
                     >
-                        <img
-                            v-if="user.image_url"
-                            :src="user.image_url"
-                            :alt="user.name"
-                            class="h-7 w-7 rounded-full object-cover ring-1 ring-slate-200 dark:ring-gray-700"
-                        />
-                        <span
-                            v-else
-                            class="flex h-7 w-7 items-center justify-center rounded-full bg-indigo-600 text-[11px] font-black text-white dark:bg-indigo-500"
-                        >
-                            {{ user.name.charAt(0).toUpperCase() }}
-                        </span>
+                        Blogs
+                    </Link>
+                </nav>
 
-                        <span
-                            class="max-w-[130px] truncate text-xs font-bold text-slate-800 dark:text-gray-200"
-                        >
-                            {{ user.name }}
-                        </span>
+                <!-- Right: Controls & Profile Cluster -->
+                <div class="hidden items-center gap-3 md:flex">
+                    <!-- Search Trigger Button on Desktop (Only on Home & SSC) -->
+                    <button
+                        v-if="isHomeOrSsc"
+                        @click.stop="triggerSearch"
+                        class="flex h-9 items-center gap-2 rounded-xl border border-slate-200/80 bg-slate-50 px-3 text-xs font-semibold text-slate-600 shadow-2xs transition-all hover:border-slate-300 hover:bg-slate-100 active:scale-95 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+                        title="Search subjects"
+                    >
+                        <Search class="h-3.5 w-3.5 text-slate-400" />
+                        <span>Search</span>
+                    </button>
 
-                        <ChevronDown
-                            class="h-3.5 w-3.5 text-slate-400 transition-transform duration-200"
-                            :class="{ 'rotate-180': dropdownOpen }"
-                        />
+                    <!-- Dark Mode Toggle Button -->
+                    <button
+                        @click="toggle"
+                        class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200/80 bg-slate-50 text-slate-600 transition-all hover:bg-slate-100 hover:text-slate-900 active:scale-95 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+                        :title="
+                            theme === 'system'
+                                ? 'System theme (click to cycle)'
+                                : theme === 'dark'
+                                  ? 'Dark mode (click to cycle)'
+                                  : 'Light mode (click to cycle)'
+                        "
+                    >
+                        <Monitor v-if="theme === 'system'" class="h-4 w-4" />
+                        <Sun v-else-if="theme === 'light'" class="h-4 w-4" />
+                        <Moon v-else class="h-4 w-4" />
                     </button>
 
-                    <Transition
-                        enter-active-class="transition duration-150 ease-out"
-                        enter-from-class="scale-95 opacity-0"
-                        enter-to-class="scale-100 opacity-100"
-                        leave-active-class="transition duration-100 ease-in"
-                        leave-from-class="scale-100 opacity-100"
-                        leave-to-class="scale-95 opacity-0"
+                    <div class="h-5 w-px bg-slate-200 dark:bg-gray-800"></div>
+
+                    <!-- Guest: Login CTA -->
+                    <Link
+                        v-if="!user"
+                        href="/login"
+                        class="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-4 py-2 text-xs font-bold text-white shadow-xs transition-all hover:bg-slate-800 hover:shadow-md active:scale-95 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
                     >
-                        <div
-                            v-if="dropdownOpen"
-                            class="absolute right-0 mt-2 w-56 origin-top-right rounded-2xl border border-slate-200 bg-white p-1.5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
+                        <LogIn class="h-3.5 w-3.5" />
+                        <span>Login</span>
+                    </Link>
+
+                    <!-- Authenticated: User Dropdown Trigger -->
+                    <div v-else ref="dropdownRef" class="relative">
+                        <button
+                            @click="toggleDropdown"
+                            class="flex items-center gap-2.5 rounded-full border border-slate-200/90 bg-white py-1 pr-3 pl-1 shadow-2xs transition-all hover:border-slate-300 hover:bg-slate-50 active:scale-98 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:bg-gray-800"
                         >
-                            <!-- User Identity Card -->
-                            <div
-                                class="border-b border-slate-100 p-2.5 dark:border-gray-800"
+                            <img
+                                v-if="user.image_url"
+                                :src="user.image_url"
+                                :alt="user.name"
+                                class="h-7 w-7 rounded-full object-cover ring-1 ring-slate-200 dark:ring-gray-700"
+                            />
+                            <span
+                                v-else
+                                class="flex h-7 w-7 items-center justify-center rounded-full bg-indigo-600 text-[11px] font-black text-white dark:bg-indigo-500"
                             >
-                                <p
-                                    class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
-                                >
-                                    {{ user.name }}
-                                </p>
-                                <p
-                                    class="truncate text-[11px] font-medium text-slate-400 dark:text-gray-500"
-                                >
-                                    {{ user.email }}
-                                </p>
-                            </div>
-
-                            <div class="py-1">
-                                <Link
-                                    :href="
-                                        user.username
-                                            ? `/u/${user.username}`
-                                            : '/profile'
-                                    "
-                                    class="flex items-center gap-2.5 rounded-xl px-3 py-2 text-xs font-semibold text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white"
-                                    @click="closeDropdown"
-                                >
-                                    <User class="h-3.5 w-3.5 text-slate-400" />
-                                    Profile
-                                </Link>
+                                {{ user.name.charAt(0).toUpperCase() }}
+                            </span>
 
-                                <Link
-                                    v-if="canAccessAdmin"
-                                    :href="isAdmin ? '/' : '/admin'"
-                                    class="flex items-center gap-2.5 rounded-xl px-3 py-2 text-xs font-semibold text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white"
-                                    @click="closeDropdown"
-                                >
-                                    <component
-                                        :is="isAdmin ? Home : LayoutDashboard"
-                                        class="h-3.5 w-3.5 text-slate-400"
-                                    />
-                                    {{ isAdmin ? 'Home' : 'Staff Dashboard' }}
-                                </Link>
-                            </div>
+                            <span
+                                class="max-w-[120px] truncate text-xs font-semibold text-slate-800 dark:text-gray-200"
+                            >
+                                {{ user.name }}
+                            </span>
 
+                            <ChevronDown
+                                class="h-3 w-3 text-slate-400 transition-transform duration-200"
+                                :class="{ 'rotate-180': dropdownOpen }"
+                            />
+                        </button>
+
+                        <Transition
+                            enter-active-class="transition duration-150 ease-out"
+                            enter-from-class="scale-95 opacity-0"
+                            enter-to-class="scale-100 opacity-100"
+                            leave-active-class="transition duration-100 ease-in"
+                            leave-from-class="scale-100 opacity-100"
+                            leave-to-class="scale-95 opacity-0"
+                        >
                             <div
-                                class="border-t border-slate-100 pt-1 dark:border-gray-800"
+                                v-if="dropdownOpen"
+                                class="absolute right-0 mt-2 w-56 origin-top-right rounded-2xl border border-slate-200 bg-white p-1.5 shadow-2xl dark:border-gray-800 dark:bg-gray-900"
                             >
-                                <Link
-                                    href="/logout"
-                                    method="post"
-                                    as="button"
-                                    class="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-xs font-semibold text-rose-600 transition-colors hover:bg-rose-50 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
-                                    @click="closeDropdown"
+                                <!-- User Identity Card -->
+                                <div
+                                    class="border-b border-slate-100 p-2.5 dark:border-gray-800"
                                 >
-                                    <LogOut class="h-3.5 w-3.5" />
-                                    Sign Out
-                                </Link>
+                                    <p
+                                        class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
+                                    >
+                                        {{ user.name }}
+                                    </p>
+                                    <p
+                                        class="truncate text-[11px] font-medium text-slate-400 dark:text-gray-500"
+                                    >
+                                        {{ user.email }}
+                                    </p>
+                                </div>
+
+                                <div class="py-1">
+                                    <Link
+                                        :href="
+                                            user.username
+                                                ? `/u/${user.username}`
+                                                : '/profile'
+                                        "
+                                        class="flex items-center gap-2.5 rounded-xl px-3 py-2 text-xs font-semibold text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white"
+                                        @click="closeDropdown"
+                                    >
+                                        <User class="h-3.5 w-3.5 text-slate-400" />
+                                        Profile
+                                    </Link>
+
+                                    <Link
+                                        v-if="canAccessAdmin"
+                                        :href="isAdmin ? '/' : '/admin'"
+                                        class="flex items-center gap-2.5 rounded-xl px-3 py-2 text-xs font-semibold text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white"
+                                        @click="closeDropdown"
+                                    >
+                                        <component
+                                            :is="isAdmin ? Home : LayoutDashboard"
+                                            class="h-3.5 w-3.5 text-slate-400"
+                                        />
+                                        {{ isAdmin ? 'Home' : 'Staff Panel' }}
+                                    </Link>
+                                </div>
                             </div>
-                        </div>
-                    </Transition>
+                        </Transition>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Mobile Controls Bar (md:hidden) -->
-            <div class="flex items-center gap-2 md:hidden">
-                <!-- Theme Toggle Button -->
-                <button
-                    @click="toggle"
-                    class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200/80 bg-slate-50 text-slate-600 transition-colors hover:bg-slate-100 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800"
-                    aria-label="Toggle theme"
-                >
-                    <Monitor v-if="theme === 'system'" class="h-4 w-4" />
-                    <Sun v-else-if="theme === 'light'" class="h-4 w-4" />
-                    <Moon v-else class="h-4 w-4" />
-                </button>
+                <!-- Mobile Bar Controls (md:hidden) -->
+                <div class="flex items-center gap-1.5 md:hidden">
+                    <!-- Mobile Search Trigger Button (Only on Home & SSC - Circular Ghost) -->
+                    <button
+                        v-if="isHomeOrSsc"
+                        @click.stop="triggerSearch"
+                        class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 active:scale-95 dark:text-gray-300 dark:hover:bg-gray-800"
+                        aria-label="Search subjects"
+                    >
+                        <Search class="h-4.5 w-4.5" />
+                    </button>
 
-                <!-- Compact Mobile Login Button (if guest) -->
-                <Link
-                    v-if="!user"
-                    href="/login"
-                    class="inline-flex items-center gap-1.5 rounded-xl bg-slate-900 px-3 py-2 text-xs font-bold text-white shadow-xs dark:bg-gray-100 dark:text-gray-900"
-                >
-                    <LogIn class="h-3.5 w-3.5" />
-                    <span>Login</span>
-                </Link>
+                    <!-- Compact Mobile Login Button (if guest) -->
+                    <Link
+                        v-if="!user"
+                        href="/login"
+                        class="inline-flex items-center gap-1.5 rounded-xl bg-slate-900 px-3 py-2 text-xs font-bold text-white shadow-xs dark:bg-gray-100 dark:text-gray-900"
+                    >
+                        <LogIn class="h-3.5 w-3.5" />
+                        <span>Login</span>
+                    </Link>
 
-                <!-- Mobile Menu Button -->
-                <button
-                    @click="toggleMobileMenu"
-                    class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200/80 bg-white text-slate-700 shadow-2xs transition-colors hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
-                    aria-label="Toggle navigation menu"
-                >
-                    <X v-if="mobileMenuOpen" class="h-4 w-4" />
-                    <Menu v-else class="h-4 w-4" />
-                </button>
-            </div>
+                    <!-- Mobile Menu Hamburger Button -->
+                    <button
+                        @click="toggleMobileMenu"
+                        class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200/80 bg-white text-slate-700 shadow-2xs transition-colors hover:bg-slate-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+                        aria-label="Open navigation drawer"
+                    >
+                        <Menu class="h-4 w-4" />
+                    </button>
+                </div>
+            </template>
         </div>
 
-        <!-- Mobile Navigation Drawer / Panel -->
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="-translate-y-2 opacity-0"
-            enter-to-class="translate-y-0 opacity-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="translate-y-0 opacity-100"
-            leave-to-class="-translate-y-2 opacity-0"
-        >
+        <!-- Auth Guard Modal -->
+        <AuthModal
+            v-model="showAuthModal"
+            title="Sign in required"
+            :message="authModalMessage"
+        />
+
+        <!-- Off-canvas Mobile Navigation Drawer -->
+        <Teleport to="body">
             <div
                 v-if="mobileMenuOpen"
-                class="border-t border-slate-200/80 bg-white/95 px-4 pt-3 pb-6 shadow-2xl backdrop-blur-xl md:hidden dark:border-gray-800 dark:bg-gray-950/95"
+                class="fixed inset-0 z-50 flex justify-end md:hidden"
             >
-                <!-- User Profile Header on Mobile (if logged in) -->
-                <Link
-                    v-if="user"
-                    :href="user.username ? `/u/${user.username}` : '/profile'"
-                    @click="closeMobileMenu"
-                    class="mb-3 flex items-center gap-3 rounded-2xl border border-slate-200/80 bg-slate-50/80 p-3 transition hover:bg-slate-100 dark:border-gray-800 dark:bg-gray-900/80 dark:hover:bg-gray-800"
+                <!-- Backdrop overlay -->
+                <Transition
+                    appear
+                    enter-active-class="transition-opacity duration-300 ease-out"
+                    enter-from-class="opacity-0"
+                    enter-to-class="opacity-100"
+                    leave-active-class="transition-opacity duration-200 ease-in"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
                 >
-                    <img
-                        v-if="user.image_url"
-                        :src="user.image_url"
-                        :alt="user.name"
-                        class="h-10 w-10 rounded-full object-cover ring-2 ring-indigo-500/20"
-                    />
                     <div
-                        v-else
-                        class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white dark:bg-indigo-500"
-                    >
-                        {{ user.name.charAt(0).toUpperCase() }}
-                    </div>
-                    <div class="min-w-0 flex-1">
-                        <p
-                            class="truncate text-xs font-bold text-slate-900 dark:text-gray-100"
-                        >
-                            {{ user.name }}
-                        </p>
-                        <p
-                            class="truncate text-[11px] text-slate-400 dark:text-gray-500"
-                        >
-                            {{ user.email }}
-                        </p>
-                    </div>
-                </Link>
-
-                <!-- Navigation Links List -->
-                <div class="space-y-1">
-                    <Link
-                        href="/projects"
+                        class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm dark:bg-black/60"
                         @click="closeMobileMenu"
-                        class="flex items-center gap-3 rounded-xl px-3.5 py-2.5 text-xs font-bold transition-colors"
-                        :class="
-                            isProjectsActive
-                                ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
-                                : 'text-slate-700 hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-900'
-                        "
+                        aria-hidden="true"
+                    />
+                </Transition>
+
+                <!-- Drawer content panel -->
+                <Transition
+                    appear
+                    enter-active-class="transition-transform duration-300 cubic-bezier(0.16, 1, 0.3, 1)"
+                    enter-from-class="translate-x-full"
+                    enter-to-class="translate-x-0"
+                    leave-active-class="transition-transform duration-200 ease-in"
+                    leave-from-class="translate-x-0"
+                    leave-to-class="translate-x-full"
+                >
+                    <aside
+                        class="relative flex h-full w-full max-w-xs flex-col justify-between border-l border-slate-200/80 bg-white/95 shadow-2xl backdrop-blur-2xl dark:border-gray-800 dark:bg-gray-950/95"
                     >
-                        <FolderGit2
-                            class="h-4 w-4 text-indigo-600 dark:text-indigo-400"
-                        />
-                        <span>Projects</span>
-                    </Link>
+                        <!-- Top Header in Drawer -->
+                        <div class="flex items-center justify-between border-b border-slate-100 p-4 dark:border-gray-800/80">
+                            <AppLogo />
+                            <button
+                                @click="closeMobileMenu"
+                                class="flex h-8 w-8 items-center justify-center rounded-xl text-slate-500 hover:bg-slate-100 hover:text-slate-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                                aria-label="Close drawer"
+                            >
+                                <X class="h-4 w-4" />
+                            </button>
+                        </div>
 
-                    <Link
-                        href="/blogs"
-                        @click="closeMobileMenu"
-                        class="flex items-center gap-3 rounded-xl px-3.5 py-2.5 text-xs font-bold transition-colors"
-                        :class="
-                            isBlogsActive
-                                ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
-                                : 'text-slate-700 hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-900'
-                        "
-                    >
-                        <BookOpen
-                            class="h-4 w-4 text-blue-600 dark:text-blue-400"
-                        />
-                        <span>Blogs</span>
-                    </Link>
+                        <!-- Scrollable Drawer Body -->
+                        <div class="flex-1 overflow-y-auto px-4 py-4 space-y-6">
+                            <!-- User Card or Guest Login CTA -->
+                            <div v-if="user">
+                                <Link
+                                    :href="user.username ? `/u/${user.username}` : '/profile'"
+                                    @click="closeMobileMenu"
+                                    class="flex items-center gap-3 rounded-2xl border border-slate-200/80 bg-slate-50/80 p-3 transition hover:border-slate-300 hover:bg-slate-100 dark:border-gray-800 dark:bg-gray-900/60 dark:hover:border-gray-700 dark:hover:bg-gray-900"
+                                >
+                                    <img
+                                        v-if="user.image_url"
+                                        :src="user.image_url"
+                                        :alt="user.name"
+                                        class="h-10 w-10 rounded-full object-cover ring-2 ring-indigo-500/20"
+                                    />
+                                    <div
+                                        v-else
+                                        class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white dark:bg-indigo-500"
+                                    >
+                                        {{ user.name.charAt(0).toUpperCase() }}
+                                    </div>
+                                    <div class="min-w-0 flex-1">
+                                        <p class="truncate text-xs font-bold text-slate-900 dark:text-gray-100">
+                                            {{ user.name }}
+                                        </p>
+                                        <p class="truncate text-[11px] text-slate-400 dark:text-gray-500">
+                                            {{ user.email }}
+                                        </p>
+                                    </div>
+                                </Link>
+                            </div>
 
-                    <!-- Authenticated User Menu Options -->
-                    <template v-if="user">
-                        <div
-                            class="my-2 border-t border-slate-100 dark:border-gray-800"
-                        ></div>
+                            <div v-else>
+                                <Link
+                                    href="/login"
+                                    @click="closeMobileMenu"
+                                    class="flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 px-4 py-2.5 text-xs font-bold text-white shadow-md shadow-indigo-600/20 transition-all hover:bg-indigo-500 active:scale-98"
+                                >
+                                    <LogIn class="h-4 w-4" />
+                                    <span>Sign in / Register</span>
+                                </Link>
+                            </div>
 
-                        <Link
-                            :href="
-                                user.username
-                                    ? `/u/${user.username}`
-                                    : '/profile'
-                            "
-                            @click="closeMobileMenu"
-                            class="flex items-center gap-3 rounded-xl px-3.5 py-2.5 text-xs font-semibold text-slate-700 transition-colors hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-900"
-                        >
-                            <User class="h-4 w-4 text-slate-400" />
-                            <span>Profile</span>
-                        </Link>
+                            <!-- Main Exploration Navigation -->
+                            <div>
+                                <p class="mb-2 px-2 text-[10px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500">
+                                    Explore
+                                </p>
+                                <div class="space-y-1">
+                                    <Link
+                                        :href="homeHref"
+                                        @click="closeMobileMenu"
+                                        class="flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-bold transition-all"
+                                        :class="
+                                            isHomeActive
+                                                ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
+                                                : 'text-slate-600 hover:bg-slate-100/70 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900/60 dark:hover:text-gray-200'
+                                        "
+                                    >
+                                        <Home class="h-4 w-4" />
+                                        <span>Home</span>
+                                    </Link>
+
+                                    <Link
+                                        href="/blogs"
+                                        @click="closeMobileMenu"
+                                        class="flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-bold transition-all"
+                                        :class="
+                                            isBlogsActive
+                                                ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
+                                                : 'text-slate-600 hover:bg-slate-100/70 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900/60 dark:hover:text-gray-200'
+                                        "
+                                    >
+                                        <BookOpen class="h-4 w-4" />
+                                        <span>Blogs</span>
+                                    </Link>
+                                </div>
+                            </div>
 
-                        <Link
-                            v-if="canAccessAdmin"
-                            :href="isAdmin ? '/' : '/admin'"
-                            @click="closeMobileMenu"
-                            class="flex items-center gap-3 rounded-xl px-3.5 py-2.5 text-xs font-semibold text-slate-700 transition-colors hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-900"
-                        >
-                            <component
-                                :is="isAdmin ? Home : LayoutDashboard"
-                                class="h-4 w-4 text-slate-400"
-                            />
-                            <span>{{
-                                isAdmin ? 'Home' : 'Staff Dashboard'
-                            }}</span>
-                        </Link>
+                            <!-- Account / Admin Links (if logged in, placed above platform) -->
+                            <div v-if="user">
+                                <p class="mb-2 px-2 text-[10px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500">
+                                    Account
+                                </p>
+                                <div class="space-y-1">
+                                    <Link
+                                        :href="user.username ? `/u/${user.username}` : '/profile'"
+                                        @click="closeMobileMenu"
+                                        class="flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-100/70 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900/60 dark:hover:text-gray-200"
+                                    >
+                                        <User class="h-4 w-4 text-slate-400" />
+                                        <span>Profile</span>
+                                    </Link>
+
+                                    <Link
+                                        v-if="canAccessAdmin"
+                                        :href="isAdmin ? '/' : '/admin'"
+                                        @click="closeMobileMenu"
+                                        class="flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-100/70 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900/60 dark:hover:text-gray-200"
+                                    >
+                                        <component
+                                            :is="isAdmin ? Home : LayoutDashboard"
+                                            class="h-4 w-4 text-slate-400"
+                                        />
+                                        <span>{{ isAdmin ? 'Home' : 'Staff Panel' }}</span>
+                                    </Link>
+                                </div>
+                            </div>
 
-                        <Link
-                            href="/logout"
-                            method="post"
-                            as="button"
-                            class="flex w-full items-center gap-3 rounded-xl px-3.5 py-2.5 text-xs font-semibold text-rose-600 transition-colors hover:bg-rose-50 dark:hover:bg-rose-950/30"
-                            @click="closeMobileMenu"
-                        >
-                            <LogOut class="h-4 w-4" />
-                            <span>Sign Out</span>
-                        </Link>
-                    </template>
-                </div>
+                            <!-- Platform Links -->
+                            <div>
+                                <p class="mb-2 px-2 text-[10px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500">
+                                    Platform
+                                </p>
+                                <div class="space-y-1">
+                                    <Link
+                                        href="/ai"
+                                        @click="closeMobileMenu"
+                                        class="flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-100/70 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900/60 dark:hover:text-gray-200"
+                                    >
+                                        <Sparkles class="h-4 w-4 text-amber-500" />
+                                        <span>AI Assistant</span>
+                                    </Link>
+
+                                    <Link
+                                        href="/about-us"
+                                        @click="closeMobileMenu"
+                                        class="flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-100/70 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900/60 dark:hover:text-gray-200"
+                                    >
+                                        <Info class="h-4 w-4 text-slate-400" />
+                                        <span>About Us</span>
+                                    </Link>
+
+                                    <Link
+                                        href="/join"
+                                        @click="closeMobileMenu"
+                                        class="flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-100/70 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900/60 dark:hover:text-gray-200"
+                                    >
+                                        <Users class="h-4 w-4 text-slate-400" />
+                                        <span>Join the Team</span>
+                                    </Link>
+
+                                    <Link
+                                        href="/support"
+                                        @click="closeMobileMenu"
+                                        class="flex items-center gap-3 rounded-xl px-3 py-2 text-xs font-semibold text-slate-600 hover:bg-slate-100/70 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900/60 dark:hover:text-gray-200"
+                                    >
+                                        <HeartHandshake class="h-4 w-4 text-rose-500" />
+                                        <span>Support HSCStack</span>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Footer Actions in Drawer -->
+                        <div class="border-t border-slate-100 p-4 dark:border-gray-800/80">
+                            <!-- Theme Preference Switcher -->
+                            <div>
+                                <p class="mb-2 text-[10px] font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500">
+                                    Appearance
+                                </p>
+                                <div class="grid grid-cols-3 gap-1 rounded-xl bg-slate-100 p-1 dark:bg-gray-900">
+                                    <button
+                                        type="button"
+                                        @click="theme = 'light'"
+                                        class="flex items-center justify-center gap-1.5 rounded-lg py-1.5 text-xs font-semibold transition-all"
+                                        :class="
+                                            theme === 'light'
+                                                ? 'bg-white text-slate-900 shadow-2xs dark:bg-gray-800 dark:text-white'
+                                                : 'text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-200'
+                                        "
+                                    >
+                                        <Sun class="h-3.5 w-3.5" />
+                                        <span>Light</span>
+                                    </button>
+                                    <button
+                                        type="button"
+                                        @click="theme = 'dark'"
+                                        class="flex items-center justify-center gap-1.5 rounded-lg py-1.5 text-xs font-semibold transition-all"
+                                        :class="
+                                            theme === 'dark'
+                                                ? 'bg-white text-slate-900 shadow-2xs dark:bg-gray-800 dark:text-white'
+                                                : 'text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-200'
+                                        "
+                                    >
+                                        <Moon class="h-3.5 w-3.5" />
+                                        <span>Dark</span>
+                                    </button>
+                                    <button
+                                        type="button"
+                                        @click="theme = 'system'"
+                                        class="flex items-center justify-center gap-1.5 rounded-lg py-1.5 text-xs font-semibold transition-all"
+                                        :class="
+                                            theme === 'system'
+                                                ? 'bg-white text-slate-900 shadow-2xs dark:bg-gray-800 dark:text-white'
+                                                : 'text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-200'
+                                        "
+                                    >
+                                        <Monitor class="h-3.5 w-3.5" />
+                                        <span>System</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </aside>
+                </Transition>
             </div>
-        </Transition>
+        </Teleport>
     </nav>
 </template>
+
+
diff --git a/resources/js/components/admin/DesktopSidebar.vue b/resources/js/components/admin/DesktopSidebar.vue
index 72b66e5..b92395c 100644
--- a/resources/js/components/admin/DesktopSidebar.vue
+++ b/resources/js/components/admin/DesktopSidebar.vue
@@ -74,10 +74,5 @@ const handleClearCache = () => {
             </span>
         </button>
 
-        <div
-            class="border-t border-slate-200/60 px-2 pt-3 text-xs text-slate-400 dark:border-gray-700/60 dark:text-gray-500"
-        >
-            Internal Dashboard
-        </div>
     </div>
 </template>
diff --git a/resources/js/components/admin/MobileSideBar.vue b/resources/js/components/admin/MobileSideBar.vue
index eba778f..daeba51 100644
--- a/resources/js/components/admin/MobileSideBar.vue
+++ b/resources/js/components/admin/MobileSideBar.vue
@@ -68,12 +68,6 @@ defineEmits(['close']);
                     <Database class="h-4 w-4" />
                     Clear Cache
                 </Link>
-
-                <div
-                    class="border-t border-slate-200/60 px-2 pt-3 text-xs text-slate-400 dark:border-gray-700/60 dark:text-gray-500"
-                >
-                    Internal Dashboard
-                </div>
             </div>
         </div>
     </div>
diff --git a/resources/js/lib/searchStore.ts b/resources/js/lib/searchStore.ts
new file mode 100644
index 0000000..59c4e53
--- /dev/null
+++ b/resources/js/lib/searchStore.ts
@@ -0,0 +1,3 @@
+import { ref } from 'vue';
+
+export const globalSearchQuery = ref('');
diff --git a/resources/js/pages/Blog/Index.vue b/resources/js/pages/Blog/Index.vue
index 9471ca5..06a59d3 100644
--- a/resources/js/pages/Blog/Index.vue
+++ b/resources/js/pages/Blog/Index.vue
@@ -97,7 +97,7 @@ const clearSearch = () => {
 
         <div
             v-if="blogs.data.length > 0"
-            class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
+            class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8"
         >
             <BlogCard v-for="blog in blogs.data" :key="blog.id" :blog="blog" />
         </div>
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index 955e65b..d7431b6 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -697,7 +697,7 @@ const goBack = () => {
             <div
                 class="flex flex-col gap-6 rounded-2xl bg-slate-50 p-6 sm:flex-row sm:items-center sm:justify-between dark:bg-gray-800"
             >
-                <div>
+                <div class="flex flex-col items-start gap-1">
                     <p class="text-sm text-slate-500 dark:text-gray-400">
                         Written by
                     </p>
@@ -708,18 +708,14 @@ const goBack = () => {
                                 ? `/u/${blog.user.username}`
                                 : '#'
                         "
-                        class="mt-1 inline-flex items-center gap-1.5 text-lg font-semibold text-slate-900 underline transition dark:text-gray-100"
+                        class="text-lg font-semibold text-slate-900 underline transition dark:text-gray-100"
                     >
-                        <span>{{ blog.user?.name }}</span>
-                        <VerifiedBadge
-                            v-if="blog.user?.is_verified"
-                            size="h-4.5 w-4.5"
-                        />
+                        {{ blog.user?.name }}
                     </Link>
 
                     <Link
                         :href="`/blogs?q=${encodeURIComponent(blog.user?.name || '')}`"
-                        class="mt-2 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
+                        class="mt-1 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
                         View more articles by {{ blog.user?.name }} →
                     </Link>
diff --git a/resources/js/pages/ContributorGuide.vue b/resources/js/pages/ContributorGuide.vue
index 0503ccf..38fdd5e 100644
--- a/resources/js/pages/ContributorGuide.vue
+++ b/resources/js/pages/ContributorGuide.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
+import { Head, Link, usePage } from '@inertiajs/vue3';
 import {
-    ArrowLeft,
     UserPlus,
     CheckCircle2,
     ShieldAlert,
@@ -12,6 +11,9 @@ import {
 } from 'lucide-vue-next';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 
+const page = usePage();
+const user = computed(() => page.props.auth?.user);
+
 const quickLinks = [
     { num: '00', id: 'faq', label: 'FAQ' },
     { num: '01', id: 'getting-started', label: 'Start Here' },
@@ -215,16 +217,7 @@ onUnmounted(() => {
         />
     </Head>
 
-    <header class="mx-auto max-w-4xl px-4 pt-8 pb-4 text-center sm:pt-12">
-        <Link
-            href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-sm font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-4 w-4 transition-transform group-hover:-translate-x-1"
-            />
-            Back to Home
-        </Link>
+    <header class="mx-auto max-w-4xl px-4 pt-6 pb-4 text-center sm:pt-10">
         <h1
             class="mb-3 text-3xl font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
@@ -421,7 +414,9 @@ onUnmounted(() => {
                     কোনো technical জ্ঞানের প্রয়োজন নেই।
                 </p>
 
+                <!-- Become Contributor CTA (Only for guests) -->
                 <div
+                    v-if="!user"
                     class="flex flex-col items-start justify-between gap-4 rounded-xl border border-indigo-100 bg-indigo-50/70 p-4 sm:flex-row sm:items-center sm:p-6 dark:border-indigo-500/30 dark:bg-indigo-500/10"
                 >
                     <div class="flex items-start gap-3.5">
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index 4378b5e..4217b37 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
-import { ref, computed } from 'vue';
-import AIBanner from '@/components/AIBanner.vue';
+import { computed } from 'vue';
 import BlogCard from '@/components/BlogCard.vue';
 import CourseSwitcher from '@/components/CourseSwitcher.vue';
 import HomeHeader from '@/components/HomeHeader.vue';
@@ -9,6 +8,8 @@ import NoticeDialog from '@/components/NoticeDialog.vue';
 import PwaInstallPrompt from '@/components/PwaInstallPrompt.vue';
 import SubjectCard from '@/components/SubjectCard.vue';
 
+import { globalSearchQuery } from '@/lib/searchStore';
+
 const props = defineProps({
     subjects: Array,
     notice: Object,
@@ -25,10 +26,9 @@ const subjects = props.subjects as Array<{
     icon: string;
     nodes_count?: number;
 }>;
-const searchQuery = ref('');
 
 const filteredSubjects = computed(() => {
-    const q = searchQuery.value.toLowerCase().trim();
+    const q = globalSearchQuery.value.toLowerCase().trim();
 
     if (!q) {
         return subjects;
@@ -65,11 +65,10 @@ const filteredSubjects = computed(() => {
 
     <PwaInstallPrompt v-if="!notice" variant="modal" />
 
-    <HomeHeader v-model="searchQuery" />
+    <HomeHeader />
 
     <main class="mx-auto max-w-7xl px-4 pb-20 sm:px-6">
         <PwaInstallPrompt variant="banner" class="mb-6" />
-        <AIBanner />
         <CourseSwitcher />
         <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
             <SubjectCard
@@ -96,7 +95,7 @@ const filteredSubjects = computed(() => {
 
         <div
             v-if="featured_blogs?.length"
-            class="mt-16 border-t border-slate-100 pt-12 dark:border-gray-800"
+            class="mt-10 border-t border-slate-100 pt-8 sm:mt-12 sm:pt-10 dark:border-gray-800"
         >
             <div class="mb-6 flex items-center justify-between">
                 <div>
@@ -106,14 +105,21 @@ const filteredSubjects = computed(() => {
                         Featured Blogs
                     </h2>
                     <p class="text-sm text-slate-500 dark:text-gray-400">
-                        Read our latest articles and updates
+                        <Link
+                            href="/about-us"
+                            class="underline decoration-slate-300 underline-offset-2 transition-colors hover:text-indigo-600 hover:decoration-indigo-400 dark:decoration-gray-600 dark:hover:text-indigo-400"
+                        >
+                            কন্ট্রিবিউটরদের
+                        </Link>
+                        সাম্প্রতিক লেখাগুলো পড়ুন
                     </p>
                 </div>
+                <!-- Desktop Link (sm and up) -->
                 <Link
                     href="/blogs"
-                    class="group inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
+                    class="group hidden items-center gap-2 text-sm font-semibold text-indigo-600 transition hover:text-indigo-700 sm:inline-flex dark:text-indigo-400 dark:hover:text-indigo-300"
                 >
-                    See all articles
+                    <span>See all articles</span>
                     <span
                         class="transition-transform duration-200 group-hover:translate-x-1"
                     >
@@ -122,13 +128,28 @@ const filteredSubjects = computed(() => {
                 </Link>
             </div>
 
-            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
                 <BlogCard
                     v-for="blog in featured_blogs"
                     :key="blog.id"
                     :blog="blog"
                 />
             </div>
+
+            <!-- Mobile Bottom Link (sm:hidden) -->
+            <div class="mt-4 text-center sm:hidden">
+                <Link
+                    href="/blogs"
+                    class="group inline-flex items-center gap-1.5 py-1 text-xs font-bold text-indigo-600 transition hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
+                >
+                    <span>See all articles</span>
+                    <span
+                        class="transition-transform duration-200 group-hover:translate-x-1"
+                    >
+                        →
+                    </span>
+                </Link>
+            </div>
         </div>
     </main>
 </template>
diff --git a/resources/js/pages/Projects.vue b/resources/js/pages/Projects.vue
index b9136cd..53085ca 100644
--- a/resources/js/pages/Projects.vue
+++ b/resources/js/pages/Projects.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
-import { ArrowLeft, ExternalLink, ArrowRight, Users } from 'lucide-vue-next';
+import { ExternalLink, ArrowRight, Users } from 'lucide-vue-next';
 </script>
 
 <template>
@@ -21,18 +21,8 @@ import { ArrowLeft, ExternalLink, ArrowRight, Users } from 'lucide-vue-next';
     </Head>
 
     <header
-        class="mx-auto max-w-4xl px-4 pt-12 pb-8 text-center sm:pt-16 sm:pb-12"
+        class="mx-auto max-w-4xl px-4 pt-8 pb-6 text-center sm:pt-12 sm:pb-10"
     >
-        <Link
-            href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-1"
-            />
-            Back to Home
-        </Link>
-
         <h1
             class="mb-3 text-3xl font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
diff --git a/resources/js/pages/Support.vue b/resources/js/pages/Support.vue
index 0921c4a..8561340 100644
--- a/resources/js/pages/Support.vue
+++ b/resources/js/pages/Support.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
+import { Head } from '@inertiajs/vue3';
 import {
-    ArrowLeft,
     Heart,
     Server,
     Globe,
@@ -28,16 +27,7 @@ const supportUrl = 'https://supportkori.com/hscstack';
         />
     </Head>
 
-    <header class="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:pt-16">
-        <Link
-            href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
-            />
-            Back to Home
-        </Link>
+    <header class="mx-auto max-w-3xl px-4 pt-8 pb-6 text-center sm:pt-12">
         <h1
             class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
diff --git a/resources/js/pages/User/Show.vue b/resources/js/pages/User/Show.vue
index c799078..2724e05 100644
--- a/resources/js/pages/User/Show.vue
+++ b/resources/js/pages/User/Show.vue
@@ -18,6 +18,7 @@ import {
     Heart,
     Instagram,
     LogIn,
+    LogOut,
     MessageSquare,
     UploadCloud,
     Users,
@@ -212,6 +213,7 @@ const localAppreciationsCount = ref(props.appreciationsCount);
 const showAppreciatorsModal = ref(false);
 const showAppreciatingModal = ref(false);
 const showGuestModal = ref(false);
+const showLogoutModal = ref(false);
 
 watch(
     () => props.isAppreciated,
@@ -404,18 +406,29 @@ const handleAppreciate = () => {
                         </div>
                     </div>
 
-                    <!-- Right Actions: Edit (For Profile Owner) or Appreciate (For Others) -->
+                    <!-- Right Actions: Edit & Logout (For Profile Owner) or Appreciate (For Others) -->
                     <div
-                        class="flex shrink-0 items-center self-start pt-1 sm:self-auto sm:pt-0"
+                        class="flex shrink-0 items-center gap-1.5 self-start pt-1 sm:self-auto sm:pt-0"
                     >
-                        <Link
-                            v-if="isOwnProfile"
-                            href="/profile"
-                            class="inline-flex h-8 items-center gap-1.5 rounded-xl bg-slate-900 px-3.5 text-xs font-semibold text-white shadow-xs transition hover:bg-slate-800 active:scale-95 sm:h-8.5 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                        >
-                            <Edit3 class="h-3.5 w-3.5" />
-                            <span>Edit</span>
-                        </Link>
+                        <template v-if="isOwnProfile">
+                            <Link
+                                href="/profile"
+                                class="inline-flex h-8 items-center gap-1.5 rounded-xl bg-slate-900 px-3.5 text-xs font-semibold text-white shadow-xs transition hover:bg-slate-800 active:scale-95 sm:h-8.5 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
+                            >
+                                <Edit3 class="h-3.5 w-3.5" />
+                                <span>Edit</span>
+                            </Link>
+
+                            <button
+                                type="button"
+                                @click="showLogoutModal = true"
+                                class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 shadow-2xs transition hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600 active:scale-95 sm:h-8.5 sm:w-8.5 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-rose-900/60 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                                title="Sign out"
+                                aria-label="Sign out"
+                            >
+                                <LogOut class="h-3.5 w-3.5" />
+                            </button>
+                        </template>
 
                         <button
                             v-else
@@ -1333,4 +1346,62 @@ const handleAppreciate = () => {
             </div>
         </div>
     </Teleport>
+
+    <!-- Sign Out Confirmation Modal -->
+    <Teleport to="body">
+        <div
+            v-if="showLogoutModal"
+            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        >
+            <div
+                @click="showLogoutModal = false"
+                class="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity"
+            ></div>
+
+            <div
+                class="relative w-full max-w-sm overflow-hidden rounded-3xl border border-slate-100 bg-white p-6 text-center shadow-2xl transition-all sm:p-7 dark:border-gray-800 dark:bg-gray-900"
+            >
+                <button
+                    @click="showLogoutModal = false"
+                    class="absolute top-3.5 right-3.5 cursor-pointer rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:text-gray-500 dark:hover:text-gray-300"
+                >
+                    <X class="h-4 w-4" />
+                </button>
+
+                <div
+                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-rose-50 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
+                >
+                    <LogOut class="h-6 w-6" />
+                </div>
+
+                <h3
+                    class="mt-3.5 text-base font-bold text-slate-900 dark:text-gray-100"
+                >
+                    Sign out of your account?
+                </h3>
+                <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                    Are you sure you want to log out of HSCStack? You will need to sign in again to access your private data.
+                </p>
+
+                <div class="mt-5 flex gap-2.5">
+                    <button
+                        type="button"
+                        @click="showLogoutModal = false"
+                        class="flex-1 cursor-pointer rounded-xl border border-slate-200 py-2.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                    >
+                        Cancel
+                    </button>
+                    <Link
+                        href="/logout"
+                        method="post"
+                        as="button"
+                        class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-rose-600 py-2.5 text-xs font-bold text-white shadow-xs transition hover:bg-rose-700 active:scale-95 dark:bg-rose-600 dark:hover:bg-rose-500"
+                    >
+                        <LogOut class="h-3.5 w-3.5" />
+                        <span>Sign Out</span>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    </Teleport>
 </template>
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index 6435ecf..bddcb79 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -29,13 +29,13 @@ const fetchAnalytics = async (refresh = false) => {
         );
 
         if (!res.ok) {
-            throw new Error('Failed to fetch analytics data');
+            throw new Error('Analytics ডাটা লোড করা যায়নি');
         }
 
         stats.value = await res.json();
         hasFetched.value = true;
     } catch (e: any) {
-        errorMsg.value = e.message || 'Error loading analytics';
+        errorMsg.value = e.message || 'Analytics লোড করতে সমস্যা হয়েছে';
     } finally {
         isLoading.value = false;
     }
@@ -43,7 +43,7 @@ const fetchAnalytics = async (refresh = false) => {
 </script>
 
 <template>
-    <Head title="Staff Dashboard" />
+    <Head title="Staff Panel" />
 
     <div class="animate-fade-in mx-auto max-w-7xl space-y-6 p-1">
         <!-- Main Dashboard Header -->
@@ -71,7 +71,7 @@ const fetchAnalytics = async (refresh = false) => {
                         <p
                             class="mt-0.5 text-xs text-slate-600 dark:text-gray-400"
                         >
-                            Administration workspace overview & analytics.
+                            অ্যাডমিন ওয়ার্কস্পেসের সামগ্রিক তথ্য ও অ্যানালিটিক্স।
                         </p>
                     </div>
                 </div>
@@ -90,10 +90,10 @@ const fetchAnalytics = async (refresh = false) => {
                     <span>{{
                         hasFetched
                             ? isLoading
-                                ? 'Refreshing...'
+                                ? 'রিফ্রেশ হচ্ছে...'
                                 : 'Reload Analytics'
                             : isLoading
-                              ? 'Loading...'
+                              ? 'লোড হচ্ছে...'
                               : 'Load Analytics'
                     }}</span>
                 </button>
@@ -117,13 +117,12 @@ const fetchAnalytics = async (refresh = false) => {
                         <h2
                             class="text-sm font-bold text-slate-900 dark:text-gray-100"
                         >
-                            New to the Contributor Workspace?
+                            কন্ট্রিবিউটর গাইড প্রয়োজন?
                         </h2>
                         <p
                             class="mt-0.5 text-xs text-slate-600 dark:text-gray-400"
                         >
-                            Learn how to manage subjects, upload resources,
-                            create blogs, and navigate panel permissions.
+                            সাবজেক্ট ম্যানেজ, রিসোর্স আপলোড, ব্লগ তৈরি ও প্যানেল পারমিশন সংক্রান্ত বিস্তারিত গাইডলাইন দেখুন।
                         </p>
                     </div>
                 </div>
@@ -132,7 +131,7 @@ const fetchAnalytics = async (refresh = false) => {
                     href="/guide"
                     class="group inline-flex shrink-0 items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-2 text-xs font-bold text-white shadow-2xs transition-all hover:bg-indigo-700 active:scale-95"
                 >
-                    <span>Take a Tour</span>
+                    <span>গাইড দেখুন</span>
                     <ArrowRight
                         class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5"
                     />
@@ -155,11 +154,10 @@ const fetchAnalytics = async (refresh = false) => {
             <h3
                 class="mt-3 text-sm font-bold text-slate-800 dark:text-gray-200"
             >
-                Analytics are Ready to Load
+                Analytics ডাটা লোড করার জন্য প্রস্তুত
             </h3>
             <p class="mt-1 max-w-sm text-xs text-slate-500 dark:text-gray-400">
-                To keep page load instant, analytics data is fetched on demand.
-                Click below to load live metrics from PostHog.
+                পেজ লোড দ্রুত রাখতে অ্যানালিটিক্স ডাটা ডিমান্ড অনুযায়ী লোড হয়। লাইভ মেট্রিক্স দেখতে নিচে ক্লিক করুন।
             </p>
             <button
                 type="button"
@@ -182,7 +180,7 @@ const fetchAnalytics = async (refresh = false) => {
             <p
                 class="mt-3 text-xs font-medium text-slate-500 dark:text-gray-400"
             >
-                Connecting to PostHog & querying 30-day analytics...
+                বিগত ৩০ দিনের অ্যানালিটিক্স লোড হচ্ছে...
             </p>
         </div>
 
@@ -224,7 +222,7 @@ const fetchAnalytics = async (refresh = false) => {
                         <p
                             class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
                         >
-                            Active users in the last 5 minutes
+                            গত ৫ মিনিটে একটিভ ইউজার
                         </p>
                     </div>
                 </div>
@@ -254,7 +252,7 @@ const fetchAnalytics = async (refresh = false) => {
                         <p
                             class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
                         >
-                            Total page views recorded (Last 30 Days)
+                            সর্বমোট পেজ ভিউ (বিগত ৩০ দিন)
                         </p>
                     </div>
                 </div>
@@ -284,7 +282,7 @@ const fetchAnalytics = async (refresh = false) => {
                         <p
                             class="mt-0.5 text-xs text-slate-500 dark:text-gray-400"
                         >
-                            Distinct audience reach (Last 30 Days)
+                            ইউনিক ভিজিটর সংখ্যা (বিগত ৩০ দিন)
                         </p>
                     </div>
                 </div>
@@ -306,15 +304,15 @@ const fetchAnalytics = async (refresh = false) => {
                         <h3
                             class="text-sm font-bold text-slate-900 dark:text-gray-100"
                         >
-                            Top Acquisition Sources
+                            Top Traffic Sources
                         </h3>
                         <p class="text-xs text-slate-500 dark:text-gray-400">
-                            Distribution by traffic reference origins
+                            যেসব রেফারেল বা সোর্স থেকে ট্রাফিক এসেছে
                         </p>
                     </div>
                 </div>
 
-                <div class="mt-3.5 max-h-[300px] flex-1 overflow-auto">
+                <div class="mt-3.5 flex-1">
                     <div
                         v-if="stats?.top_sources?.length"
                         class="divide-y divide-slate-100 dark:divide-gray-800"
@@ -352,7 +350,7 @@ const fetchAnalytics = async (refresh = false) => {
                         <p
                             class="mt-2 text-xs font-medium text-slate-500 dark:text-gray-400"
                         >
-                            No source data captured yet.
+                            এখনও কোনো সোর্স ডাটা পাওয়া যায়নি।
                         </p>
                     </div>
                 </div>
diff --git a/resources/js/pages/legal/ContentPolicy.vue b/resources/js/pages/legal/ContentPolicy.vue
index e981c8d..ad0cd0f 100644
--- a/resources/js/pages/legal/ContentPolicy.vue
+++ b/resources/js/pages/legal/ContentPolicy.vue
@@ -3,7 +3,6 @@
 import { Head, Link } from '@inertiajs/vue3';
 import {
     FileText,
-    ArrowLeft,
     Users,
     ShieldAlert,
     Share2,
@@ -28,16 +27,7 @@ import {
         />
     </Head>
 
-    <header class="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:pt-16">
-        <Link
-            href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
-            />
-            Back to Home
-        </Link>
+    <header class="mx-auto max-w-3xl px-4 pt-8 pb-6 text-center sm:pt-12">
         <h1
             class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
diff --git a/resources/js/pages/legal/PrivacyPolicy.vue b/resources/js/pages/legal/PrivacyPolicy.vue
index 17875f7..a72ba80 100644
--- a/resources/js/pages/legal/PrivacyPolicy.vue
+++ b/resources/js/pages/legal/PrivacyPolicy.vue
@@ -2,7 +2,6 @@
 import { Head, Link } from '@inertiajs/vue3';
 import {
     Shield,
-    ArrowLeft,
     Eye,
     Lock,
     Cookie,
@@ -23,16 +22,7 @@ import {
         <meta property="og:title" content="Privacy Policy - HSCStack" />
     </Head>
 
-    <header class="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:pt-16">
-        <Link
-            href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
-            />
-            Back to Home
-        </Link>
+    <header class="mx-auto max-w-3xl px-4 pt-8 pb-6 text-center sm:pt-12">
         <h1
             class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
diff --git a/resources/js/pages/legal/TermsConditions.vue b/resources/js/pages/legal/TermsConditions.vue
index 5707d7d..e31de05 100644
--- a/resources/js/pages/legal/TermsConditions.vue
+++ b/resources/js/pages/legal/TermsConditions.vue
@@ -2,7 +2,6 @@
 import { Head, Link } from '@inertiajs/vue3';
 import {
     Scale,
-    ArrowLeft,
     FileText,
     HelpCircle,
     AlertCircle,
@@ -20,16 +19,7 @@ import {
         <meta property="og:title" content="Terms & Conditions - HSCStack" />
     </Head>
 
-    <header class="mx-auto max-w-3xl px-4 pt-12 pb-8 text-center sm:pt-16">
-        <Link
-            href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
-            />
-            Back to Home
-        </Link>
+    <header class="mx-auto max-w-3xl px-4 pt-8 pb-6 text-center sm:pt-12">
         <h1
             class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
diff --git a/resources/js/pages/platform/JoinTeam.vue b/resources/js/pages/platform/JoinTeam.vue
index dd062c3..7fb1f41 100644
--- a/resources/js/pages/platform/JoinTeam.vue
+++ b/resources/js/pages/platform/JoinTeam.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
 import {
-    ArrowLeft,
     Megaphone,
     FolderHeart,
     MessageSquare,
@@ -89,16 +88,7 @@ const facebookPageUrl = 'https://facebook.com/hscstackbd';
     </Head>
 
     <!-- Header -->
-    <header class="mx-auto max-w-3xl px-4 pt-12 pb-10 text-center sm:pt-16">
-        <Link
-            href="/"
-            class="group mb-4 inline-flex items-center gap-2 text-xs font-bold text-slate-500 transition-colors hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
-            />
-            Back to Home
-        </Link>
+    <header class="mx-auto max-w-3xl px-4 pt-8 pb-8 text-center sm:pt-12">
         <h1
             class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >