diff --git a/composer.json b/composer.json
index 5e02af0..44d38c5 100644
--- a/composer.json
+++ b/composer.json
@@ -56,7 +56,7 @@
         ],
         "dev": [
             "Composer\\Config::disableProcessTimeout",
-            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve --host=localhost\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php bin/dev-logs.php\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve --host=localhost\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php bin/dev-logs.php\" \"npm run dev:server\" --names=server,queue,logs,vite --kill-others"
         ],
         "lint": [
             "pint --parallel"
diff --git a/package-lock.json b/package-lock.json
index 8d53271..3ab4d79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
                 "@vitejs/plugin-vue": "^6.0.0",
                 "clsx": "^2.1.1",
                 "concurrently": "^9.0.1",
+                "konsta": "^5.3.0",
                 "laravel-vite-plugin": "^3.1",
                 "lucide-vue-next": "^1.0.0",
                 "tailwind-merge": "^3.2.0",
@@ -6937,6 +6938,18 @@
                 "json-buffer": "3.0.1"
             }
         },
+        "node_modules/konsta": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/konsta/-/konsta-5.3.0.tgz",
+            "integrity": "sha512-4KjAcQiczKSvbr/hgx9g0CLoJStqjE3DvAIhFJeN05WGi8lYu5b/6f2hdwnmtiq6K4QumY96usStEofH21pdbQ==",
+            "license": "MIT",
+            "dependencies": {
+                "tailwind-merge": "^3.3.1"
+            },
+            "engines": {
+                "node": ">= 4.7.0"
+            }
+        },
         "node_modules/laravel-precognition": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/laravel-precognition/-/laravel-precognition-2.0.0.tgz",
diff --git a/package.json b/package.json
index c14636a..46196e9 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
     "scripts": {
         "build": "vite build",
         "build:ssr": "vite build && vite build --ssr",
-        "dev": "vite",
+        "dev": "composer run dev",
+        "dev:server": "vite",
         "format": "prettier --write resources/",
         "format:check": "prettier --check resources/",
         "lint": "eslint . --fix",
@@ -36,6 +37,7 @@
         "@vitejs/plugin-vue": "^6.0.0",
         "clsx": "^2.1.1",
         "concurrently": "^9.0.1",
+        "konsta": "^5.3.0",
         "laravel-vite-plugin": "^3.1",
         "lucide-vue-next": "^1.0.0",
         "tailwind-merge": "^3.2.0",
diff --git a/resources/css/app.css b/resources/css/app.css
index f12718b..106c4f7 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,4 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
 @import 'tailwindcss';
+@import 'konsta/vue/theme.css';
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';
@@ -31,81 +33,3 @@
         @apply transition-colors duration-300;
     }
 }
-
-.dark .bg-red-50 {
-    background-color: rgb(239 68 68 / 0.1);
-}
-.dark .bg-red-100 {
-    background-color: rgb(239 68 68 / 0.15);
-}
-.dark .text-red-600 {
-    color: rgb(248 113 113);
-}
-.dark .text-red-700 {
-    color: rgb(252 165 165);
-}
-
-.dark .bg-blue-50 {
-    background-color: rgb(59 130 246 / 0.1);
-}
-.dark .bg-blue-100 {
-    background-color: rgb(59 130 246 / 0.15);
-}
-.dark .text-blue-600 {
-    color: rgb(96 165 250);
-}
-.dark .text-blue-700 {
-    color: rgb(147 197 253);
-}
-
-.dark .bg-purple-50 {
-    background-color: rgb(168 85 247 / 0.1);
-}
-.dark .bg-purple-100 {
-    background-color: rgb(168 85 247 / 0.15);
-}
-.dark .text-purple-600 {
-    color: rgb(192 132 252);
-}
-.dark .text-purple-700 {
-    color: rgb(216 180 254);
-}
-
-.dark .bg-emerald-50 {
-    background-color: rgb(16 185 129 / 0.1);
-}
-.dark .bg-emerald-100 {
-    background-color: rgb(16 185 129 / 0.15);
-}
-.dark .text-emerald-600 {
-    color: rgb(52 211 153);
-}
-.dark .text-emerald-700 {
-    color: rgb(110 231 183);
-}
-
-.dark .bg-amber-50 {
-    background-color: rgb(245 158 11 / 0.1);
-}
-.dark .bg-amber-100 {
-    background-color: rgb(245 158 11 / 0.15);
-}
-.dark .text-amber-600 {
-    color: rgb(251 191 36);
-}
-.dark .text-amber-700 {
-    color: rgb(252 211 77);
-}
-
-.dark .bg-green-50 {
-    background-color: rgb(34 197 94 / 0.1);
-}
-.dark .bg-green-100 {
-    background-color: rgb(34 197 94 / 0.15);
-}
-.dark .text-green-600 {
-    color: rgb(74 222 128);
-}
-.dark .text-green-700 {
-    color: rgb(134 239 172);
-}
diff --git a/resources/js/components/BlogCard.vue b/resources/js/components/BlogCard.vue
index 086840a..5fde6ea 100644
--- a/resources/js/components/BlogCard.vue
+++ b/resources/js/components/BlogCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import { kCard } from 'konsta/vue';
 import { ArrowRight } from 'lucide-vue-next';
 import { computed } from 'vue';
 
@@ -27,31 +28,28 @@ const formattedDate = computed(() => {
 </script>
 
 <template>
-    <div
-        class="group flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md dark:border-gray-700 dark:bg-gray-900 dark:hover:shadow-gray-900/50"
-    >
-        <!-- Featured Image Container -->
-        <Link
-            :href="'/blogs/' + blog.slug"
-            class="relative block aspect-[16/9] overflow-hidden bg-slate-100 dark:bg-gray-800"
-        >
-            <img
-                :src="blog.featured_image || 'https://placehold.co/600x400'"
-                :alt="blog.title"
-                class="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
-                loading="lazy"
-            />
-            <div
-                v-if="blog.category"
-                class="absolute top-2.5 left-2.5 rounded-md bg-indigo-600 px-2 py-0.5 text-[10px] font-bold tracking-wider text-white uppercase shadow-xs"
+    <kCard outline raised>
+        <template #header>
+            <Link
+                :href="'/blogs/' + blog.slug"
+                class="relative block aspect-[16/9] overflow-hidden"
             >
-                {{ blog.category }}
-            </div>
-        </Link>
+                <img
+                    :src="blog.featured_image || 'https://placehold.co/600x400'"
+                    :alt="blog.title"
+                    class="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
+                    loading="lazy"
+                />
+                <div
+                    v-if="blog.category"
+                    class="absolute top-2.5 left-2.5 rounded-md bg-indigo-600 px-2 py-0.5 text-[10px] font-bold tracking-wider text-white uppercase shadow-xs"
+                >
+                    {{ blog.category }}
+                </div>
+            </Link>
+        </template>
 
-        <!-- Card Body -->
         <div class="flex flex-1 flex-col p-4">
-            <!-- News Meta (Author & Date) -->
             <div
                 class="mb-1.5 flex items-center gap-1.5 text-xs text-slate-500 dark:text-gray-400"
             >
@@ -78,7 +76,6 @@ const formattedDate = computed(() => {
                 </time>
             </div>
 
-            <!-- Title -->
             <Link :href="'/blogs/' + blog.slug" class="group/title block">
                 <h3
                     class="line-clamp-2 text-base leading-snug font-bold text-slate-900 transition duration-150 group-hover/title:text-indigo-600 dark:text-gray-100 dark:group-hover/title:text-indigo-400"
@@ -87,14 +84,14 @@ const formattedDate = computed(() => {
                 </h3>
             </Link>
 
-            <!-- Excerpt -->
             <p
                 class="mt-1.5 mb-3 line-clamp-2 text-xs leading-relaxed text-slate-600 dark:text-gray-400"
             >
                 {{ blog.excerpt }}
             </p>
+        </div>
 
-            <!-- Footer Action -->
+        <template #footer>
             <div
                 class="mt-auto border-t border-slate-100 pt-3 dark:border-gray-800"
             >
@@ -108,6 +105,6 @@ const formattedDate = computed(() => {
                     />
                 </Link>
             </div>
-        </div>
-    </div>
+        </template>
+    </kCard>
 </template>
diff --git a/resources/js/components/BlogRow.vue b/resources/js/components/BlogRow.vue
index 42b7826..8d2cd7a 100644
--- a/resources/js/components/BlogRow.vue
+++ b/resources/js/components/BlogRow.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { Link, router } from '@inertiajs/vue3';
+import { router } from '@inertiajs/vue3';
+import { kButton, kList, kListItem } from 'konsta/vue';
+
 const props = defineProps({
     blog: {
         type: Object,
@@ -15,37 +17,36 @@ const deleteBlog = () => {
 </script>
 
 <template>
-    <div
-        class="group relative flex items-center justify-between gap-3 rounded-xl border border-gray-100 bg-white p-3.5 transition-colors duration-150 hover:border-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500/30"
-    >
-        <Link
-            :href="`/admin/blogs/edit/${blog.slug}`"
-            class="flex min-w-0 flex-1 items-center gap-3 active:scale-[0.99]"
-        >
-            <div
-                class="h-12 w-12 shrink-0 overflow-hidden rounded-lg border border-gray-100 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
-            >
-                <img
-                    v-if="blog.featured_image"
-                    :src="blog.featured_image"
-                    alt=""
-                    class="h-full w-full object-cover"
-                />
+    <kList>
+        <kListItem :link="true" :href="`/admin/blogs/edit/${blog.slug}`">
+            <template #media>
                 <div
-                    v-else
-                    class="flex h-full w-full items-center justify-center text-xs font-bold text-gray-400 uppercase dark:text-gray-500"
+                    class="h-12 w-12 shrink-0 overflow-hidden rounded-lg border border-gray-100 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
                 >
-                    TXT
+                    <img
+                        v-if="blog.featured_image"
+                        :src="blog.featured_image"
+                        alt=""
+                        class="h-full w-full object-cover"
+                    />
+                    <div
+                        v-else
+                        class="flex h-full w-full items-center justify-center text-xs font-bold text-gray-400 uppercase dark:text-gray-500"
+                    >
+                        TXT
+                    </div>
                 </div>
-            </div>
+            </template>
 
-            <div class="min-w-0 flex-1">
+            <template #title>
                 <h4
                     class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
                 >
                     {{ blog.title }}
                 </h4>
+            </template>
 
+            <template #subtitle>
                 <div
                     class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-gray-500 dark:text-gray-400"
                 >
@@ -67,33 +68,37 @@ const deleteBlog = () => {
                         Featured
                     </span>
                 </div>
-            </div>
-        </Link>
+            </template>
 
-        <div class="flex shrink-0 items-center gap-2 pl-1">
-            <button
-                @click.stop.prevent="deleteBlog"
-                type="button"
-                class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:text-gray-500 dark:hover:bg-red-500/10 dark:hover:text-red-400"
-                title="Delete blog"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="1.5"
-                    stroke="currentColor"
-                    class="h-5 w-5"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
-                    />
-                </svg>
-            </button>
+            <template #after>
+                <div class="flex shrink-0 items-center gap-2 pl-1">
+                    <k-button
+                        clear
+                        small
+                        @click.stop.prevent="deleteBlog"
+                        title="Delete blog"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="h-5 w-5"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+                            />
+                        </svg>
+                    </k-button>
 
-            <span class="text-lg text-gray-300 dark:text-gray-600">→</span>
-        </div>
-    </div>
+                    <span class="text-lg text-gray-300 dark:text-gray-600"
+                        >→</span
+                    >
+                </div>
+            </template>
+        </kListItem>
+    </kList>
 </template>
diff --git a/resources/js/components/BreadcrumbNav.vue b/resources/js/components/BreadcrumbNav.vue
index a373c91..b2bb07f 100644
--- a/resources/js/components/BreadcrumbNav.vue
+++ b/resources/js/components/BreadcrumbNav.vue
@@ -25,7 +25,7 @@ const breadcrumbs = computed(() => {
 
 <template>
     <nav
-        class="no-scrollbar mb-6 flex items-center space-x-2 overflow-x-auto text-xs font-semibold tracking-wider whitespace-nowrap text-slate-400 uppercase dark:text-gray-500"
+        class="mb-6 no-scrollbar flex items-center space-x-2 overflow-x-auto text-xs font-semibold tracking-wider whitespace-nowrap text-slate-400 uppercase dark:text-gray-500"
     >
         <Link
             href="/"
diff --git a/resources/js/components/CourseSwitcher.vue b/resources/js/components/CourseSwitcher.vue
index 652b051..f2646b6 100644
--- a/resources/js/components/CourseSwitcher.vue
+++ b/resources/js/components/CourseSwitcher.vue
@@ -1,18 +1,23 @@
 <script setup lang="ts">
-import { Link, usePage } from '@inertiajs/vue3';
-import { ArrowRight } from 'lucide-vue-next';
+import { router, usePage } from '@inertiajs/vue3';
+import { kBlock, kSegmented, kButton } from 'konsta/vue';
 import { computed } from 'vue';
 
 const page = usePage();
 const isSsc = computed(() => page.url.startsWith('/ssc'));
+
+const switchCurriculum = (target: 'hsc' | 'ssc') => {
+    if (target === 'ssc' && !isSsc.value) {
+        router.visit('/ssc');
+    } else if (target === 'hsc' && isSsc.value) {
+        router.visit('/');
+    }
+};
 </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"
-    >
-        <!-- Large Browsing Indicator -->
-        <div class="flex items-center gap-3">
+    <k-block class="my-4">
+        <div class="mb-4 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'"
@@ -34,24 +39,21 @@ const isSsc = computed(() => page.url.startsWith('/ssc'));
             </div>
         </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',
-            ]"
-        >
-            <span>
-                <strong>{{ isSsc ? 'HSC ' : 'SSC ' }}</strong>
-                বিভাগে পরিবর্তন করুন
-            </span>
-            <ArrowRight
-                class="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-1"
-            />
-        </Link>
-    </div>
+        <k-segmented strong>
+            <k-button
+                :clear="isSsc"
+                :tonal="!isSsc"
+                @click="switchCurriculum('hsc')"
+            >
+                HSC
+            </k-button>
+            <k-button
+                :clear="!isSsc"
+                :tonal="isSsc"
+                @click="switchCurriculum('ssc')"
+            >
+                SSC
+            </k-button>
+        </k-segmented>
+    </k-block>
 </template>
diff --git a/resources/js/components/EmptyState.vue b/resources/js/components/EmptyState.vue
index 3ab5bd4..b41f5af 100644
--- a/resources/js/components/EmptyState.vue
+++ b/resources/js/components/EmptyState.vue
@@ -1,24 +1,9 @@
 <script setup lang="ts">
-import { Folder } from 'lucide-vue-next';
+import { kBlock } from 'konsta/vue';
 </script>
 
 <template>
-    <div
-        class="flex flex-col items-center justify-center px-4 py-14 text-center"
-    >
-        <div
-            class="flex h-12 w-12 items-center justify-center rounded-2xl border border-slate-100 bg-slate-50 text-slate-400 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500"
-        >
-            <Folder class="h-6 w-6 stroke-[1.8]" />
-        </div>
-        <h3 class="mt-4 text-sm font-bold text-slate-900 dark:text-gray-100">
-            No items available
-        </h3>
-        <p
-            class="mt-1 max-w-xs text-xs leading-relaxed font-medium text-slate-400 dark:text-gray-500"
-        >
-            There are currently no files or sub-folders located inside this
-            section.
-        </p>
-    </div>
+    <kBlock strong inset class="text-center">
+        <slot />
+    </kBlock>
 </template>
diff --git a/resources/js/components/FAQSection.vue b/resources/js/components/FAQSection.vue
index 4f637da..95c1654 100644
--- a/resources/js/components/FAQSection.vue
+++ b/resources/js/components/FAQSection.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { ChevronDown, HelpCircle, Plus, Minus } from 'lucide-vue-next';
+import { kBlockTitle, kBlock, kButton } from 'konsta/vue';
+import { HelpCircle, Plus, Minus } from 'lucide-vue-next';
 import { ref, computed } from 'vue';
 
-// Single active accordion index
-const openIndex = ref(0);
+const openIndex = ref<number | null>(0);
 
-// Two-step expand toggle
 const INITIAL_COUNT = 4;
 const isExpanded = ref(false);
 
@@ -90,152 +89,97 @@ const visibleFaqs = computed(() => {
 const toggleExpand = () => {
     isExpanded.value = !isExpanded.value;
 
-    if (!isExpanded.value && openIndex.value >= INITIAL_COUNT) {
+    if (
+        !isExpanded.value &&
+        openIndex.value !== null &&
+        openIndex.value >= INITIAL_COUNT
+    ) {
         openIndex.value = null;
     }
 };
-
-const toggleFaq = (index) => {
-    openIndex.value = openIndex.value === index ? null : index;
-};
-
-const isOpen = (index) => openIndex.value === index;
 </script>
 
 <template>
-    <section class="mx-auto max-w-7xl px-4 pb-16 sm:px-6 sm:pb-20">
-        <!-- Section Header -->
+    <kBlock class="mx-auto max-w-7xl px-4 pb-16 sm:px-6 sm:pb-20">
         <div class="mb-8 text-center sm:mb-10">
             <div
-                class="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 shadow-xs ring-1 ring-indigo-500/10 dark:bg-indigo-500/10 dark:text-indigo-400 dark:ring-indigo-500/20"
+                class="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600 shadow-xs ring-1 ring-indigo-500/10"
             >
                 <HelpCircle class="h-5 w-5" />
             </div>
-            <h2
-                class="text-2xl font-black tracking-tight text-slate-900 sm:text-3xl lg:text-4xl dark:text-gray-100"
-            >
-                সাধারণ জিজ্ঞাসা
-            </h2>
+            <kBlockTitle> সাধারণ জিজ্ঞাসা </kBlockTitle>
             <p
-                class="mx-auto mt-2 max-w-md text-xs leading-relaxed font-medium text-slate-500 sm:text-sm dark:text-gray-400"
+                class="mx-auto mt-2 max-w-md text-xs leading-relaxed font-medium text-slate-500 sm:text-sm"
             >
                 HSCStack এবং রিসোর্স সম্পর্কিত আপনার বিভিন্ন প্রশ্নের উত্তর এক
                 নজরে দেখে নিন।
             </p>
         </div>
 
-        <!-- Accordion Cards Container -->
-        <div class="mx-auto max-w-2xl space-y-3">
-            <TransitionGroup
-                enter-active-class="transition-all duration-500 cubic-bezier(0.16, 1, 0.3, 1)"
-                enter-from-class="opacity-0 translate-y-4 scale-95"
-                enter-to-class="opacity-100 translate-y-0 scale-100"
-                leave-active-class="transition-all duration-300 cubic-bezier(0.7, 0, 0.84, 0)"
-                leave-from-class="opacity-100 translate-y-0 scale-100"
-                leave-to-class="opacity-0 translate-y-2 scale-95"
-            >
-                <div
-                    v-for="(faq, index) in visibleFaqs"
-                    :key="faq.question"
-                    class="group overflow-hidden rounded-2xl border transition-all duration-300"
-                    :class="[
-                        isOpen(index)
-                            ? 'border-indigo-200 bg-white shadow-lg ring-1 shadow-indigo-500/5 ring-indigo-500/10 dark:border-indigo-500/30 dark:bg-gray-900 dark:shadow-indigo-500/5 dark:ring-indigo-500/10'
-                            : 'border-slate-200/80 bg-white/80 hover:border-slate-300 hover:bg-white dark:border-gray-700/80 dark:bg-gray-900/80 dark:hover:border-gray-600 dark:hover:bg-gray-900',
-                    ]"
-                >
-                    <!-- Header / Trigger Button -->
-                    <button
-                        type="button"
-                        @click="toggleFaq(index)"
-                        class="flex w-full items-center justify-between gap-3 p-4 text-left focus:outline-none sm:p-5"
+        <div class="mx-auto max-w-2xl">
+            <div class="space-y-2">
+                <div v-for="(faq, index) in visibleFaqs" :key="faq.question">
+                    <div
+                        class="rounded-xl border border-slate-200 bg-white dark:border-gray-700 dark:bg-gray-900"
                     >
-                        <span
-                            class="text-xs leading-snug font-bold transition-colors duration-200 sm:text-sm lg:text-base"
-                            :class="
-                                isOpen(index)
-                                    ? 'text-indigo-600 dark:text-indigo-400'
-                                    : 'text-slate-800 group-hover:text-slate-900 dark:text-gray-200 dark:group-hover:text-gray-100'
+                        <button
+                            type="button"
+                            class="flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3.5 text-left text-sm font-bold text-slate-900 select-none dark:text-slate-100"
+                            @click="
+                                openIndex = openIndex === index ? null : index
                             "
                         >
-                            {{ faq.question }}
-                        </span>
-
+                            <span>{{ faq.question }}</span>
+                            <Minus
+                                v-if="openIndex === index"
+                                class="h-4 w-4 shrink-0 text-slate-400 transition-transform duration-200 dark:text-gray-500"
+                            />
+                            <Plus
+                                v-else
+                                class="h-4 w-4 shrink-0 text-slate-400 transition-transform duration-200 dark:text-gray-500"
+                            />
+                        </button>
                         <div
-                            class="cubic-bezier(0.34, 1.56, 0.64, 1) flex h-7 w-7 shrink-0 items-center justify-center rounded-xl transition-all duration-500 sm:h-8 sm:w-8"
-                            :class="[
-                                isOpen(index)
-                                    ? 'rotate-180 bg-indigo-600 text-white shadow-xs'
-                                    : 'bg-slate-100 text-slate-400 group-hover:bg-slate-200 group-hover:text-slate-600 dark:bg-gray-800 dark:text-gray-500 dark:group-hover:bg-gray-700 dark:group-hover:text-gray-300',
-                            ]"
+                            v-if="openIndex === index"
+                            class="px-4 pb-4 text-sm leading-relaxed text-slate-600 dark:text-slate-300"
                         >
-                            <ChevronDown class="h-4 w-4 stroke-[2.5]" />
-                        </div>
-                    </button>
-
-                    <!-- Ultra-Smooth Accordion Body (CSS Grid Rows Trick) -->
-                    <div
-                        class="cubic-bezier(0.16, 1, 0.3, 1) grid transition-[grid-template-rows,opacity] duration-500"
-                        :class="[
-                            isOpen(index)
-                                ? 'grid-rows-[1fr] opacity-100'
-                                : 'grid-rows-[0fr] opacity-0',
-                        ]"
-                    >
-                        <div class="overflow-hidden">
-                            <div
-                                class="cubic-bezier(0.16, 1, 0.3, 1) border-t border-slate-100 px-4 pt-3 pb-4 text-xs leading-relaxed font-medium text-slate-600 transition-transform duration-500 sm:px-5 sm:pb-5 sm:text-sm dark:border-gray-800 dark:text-gray-400"
-                                :class="[
-                                    isOpen(index)
-                                        ? 'translate-y-0'
-                                        : '-translate-y-2',
-                                ]"
-                            >
-                                <!-- Internal Link -->
-                                <template v-if="faq.type === 'link'">
-                                    {{ faq.answer }}
-                                    <Link
-                                        :href="faq.linkUrl"
-                                        class="font-bold text-indigo-600 hover:underline dark:text-indigo-400"
-                                    >
-                                        {{ faq.linkText }}
-                                    </Link>
-                                    {{ faq.answerAfter }}
-                                </template>
+                            <!-- Internal Link -->
+                            <template v-if="faq.type === 'link'">
+                                {{ faq.answer }}
+                                <Link
+                                    :href="faq.linkUrl"
+                                    class="font-bold text-indigo-600 hover:underline"
+                                >
+                                    {{ faq.linkText }}
+                                </Link>
+                                {{ faq.answerAfter }}
+                            </template>
 
-                                <!-- External Link -->
-                                <template
-                                    v-else-if="faq.type === 'externalLink'"
+                            <!-- External Link -->
+                            <template v-else-if="faq.type === 'externalLink'">
+                                {{ faq.answer }}
+                                <a
+                                    :href="faq.linkUrl"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="inline-flex items-center gap-0.5 font-bold text-indigo-600 hover:underline"
                                 >
-                                    {{ faq.answer }}
-                                    <a
-                                        :href="faq.linkUrl"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        class="inline-flex items-center gap-0.5 font-bold text-indigo-600 hover:underline dark:text-indigo-400"
-                                    >
-                                        {{ faq.linkText }}
-                                    </a>
-                                    {{ faq.answerAfter }}
-                                </template>
+                                    {{ faq.linkText }}
+                                </a>
+                                {{ faq.answerAfter }}
+                            </template>
 
-                                <!-- Plain Text -->
-                                <template v-else>
-                                    {{ faq.answer }}
-                                </template>
-                            </div>
+                            <!-- Plain Text -->
+                            <template v-else>
+                                {{ faq.answer }}
+                            </template>
                         </div>
                     </div>
                 </div>
-            </TransitionGroup>
+            </div>
 
-            <!-- Toggle Expand / Collapse Button -->
             <div v-if="faqs.length > INITIAL_COUNT" class="pt-4 text-center">
-                <button
-                    type="button"
-                    @click="toggleExpand"
-                    class="inline-flex items-center gap-2 rounded-2xl border border-slate-200 bg-white px-5 py-3 text-xs font-bold text-slate-700 shadow-xs transition-all duration-300 hover:border-indigo-300 hover:bg-slate-50 hover:text-indigo-600 hover:shadow-md hover:shadow-indigo-500/5 focus:outline-none active:scale-95 sm:text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-indigo-500/50 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
-                >
+                <k-button outline rounded @click="toggleExpand">
                     <template v-if="!isExpanded">
                         <Plus class="h-4 w-4 stroke-[2.5]" />
                         <span
@@ -248,8 +192,8 @@ const isOpen = (index) => openIndex.value === index;
                         <Minus class="h-4 w-4 stroke-[2.5]" />
                         <span>কম প্রশ্ন দেখুন</span>
                     </template>
-                </button>
+                </k-button>
             </div>
         </div>
-    </section>
+    </kBlock>
 </template>
diff --git a/resources/js/components/HomeHeader.vue b/resources/js/components/HomeHeader.vue
index 9286617..76fb46d 100644
--- a/resources/js/components/HomeHeader.vue
+++ b/resources/js/components/HomeHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import { Search } from 'lucide-vue-next';
+import { kSearchbar } from 'konsta/vue';
 import { computed } from 'vue';
 const searchQuery = defineModel();
 const page = usePage();
@@ -34,22 +34,14 @@ const isSsc = computed(() => page.url.startsWith('/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 class="mx-auto max-w-lg">
+                <k-searchbar
+                    :value="searchQuery"
+                    @input="searchQuery = $event.target.value"
+                    placeholder="Search subjects, resources..."
+                    :disable-button="false"
+                    @click:clear="searchQuery = ''"
+                />
             </div>
         </div>
     </div>
diff --git a/resources/js/components/KonstaProvider.vue b/resources/js/components/KonstaProvider.vue
new file mode 100644
index 0000000..d7ba719
--- /dev/null
+++ b/resources/js/components/KonstaProvider.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { kApp } from 'konsta/vue';
+import { ref, computed, onMounted } from 'vue';
+import { useDarkMode } from '@/lib/useDarkMode';
+
+const props = withDefaults(
+    defineProps<{
+        theme?: 'ios' | 'material' | 'auto';
+    }>(),
+    {
+        theme: 'auto',
+    },
+);
+
+const { isDark } = useDarkMode();
+
+const detectedTheme = ref<'ios' | 'material'>('material');
+
+onMounted(() => {
+    if (props.theme === 'auto') {
+        const ua = navigator.userAgent;
+        detectedTheme.value = /iPhone|iPad|iPod/.test(ua) ? 'ios' : 'material';
+    } else {
+        detectedTheme.value = props.theme;
+    }
+});
+
+const activeTheme = computed(() => detectedTheme.value);
+</script>
+
+<template>
+    <k-app :theme="activeTheme" :dark="isDark">
+        <slot />
+    </k-app>
+</template>
diff --git a/resources/js/components/LoadingSpinner.vue b/resources/js/components/LoadingSpinner.vue
index 0d23f1a..4f00652 100644
--- a/resources/js/components/LoadingSpinner.vue
+++ b/resources/js/components/LoadingSpinner.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import { kPreloader } from 'konsta/vue';
 import { isLoading } from '@/loading';
 </script>
 
 <template>
     <div v-if="isLoading" class="fixed top-4 right-4 z-50">
-        <div
-            class="h-6 w-6 animate-spin rounded-full border-2 border-[#4b3aef] border-t-transparent"
-        />
+        <k-preloader />
     </div>
 </template>
diff --git a/resources/js/components/NavBar.vue b/resources/js/components/NavBar.vue
index 250f68e..0ee1f4d 100644
--- a/resources/js/components/NavBar.vue
+++ b/resources/js/components/NavBar.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { Link, router, usePage } from '@inertiajs/vue3';
+import { kNavbar, kButton, kList, kListItem, kPopover } from 'konsta/vue';
 import {
     LogOut,
     LayoutDashboard,
     Home,
-    ChevronDown,
     Moon,
     Sun,
     Monitor,
 } from 'lucide-vue-next';
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { computed, ref } from 'vue';
 import { useDarkMode } from '@/lib/useDarkMode';
 import AppLogo from './AppLogo.vue';
 
@@ -24,43 +24,16 @@ const { theme, toggle } = useDarkMode();
 
 const user = computed(() => usePage().props.auth?.user);
 
-const dropdownOpen = ref(false);
-const dropdownRef = ref<HTMLElement | null>(null);
-
-const toggleDropdown = () => {
-    dropdownOpen.value = !dropdownOpen.value;
-};
-
-const closeDropdown = () => {
-    dropdownOpen.value = false;
-};
+const showUserMenu = ref(false);
 
 const handleLogout = () => {
     router.post('/logout');
 };
-
-const handleClickOutside = (e: MouseEvent) => {
-    if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
-        closeDropdown();
-    }
-};
-
-onMounted(() => {
-    document.addEventListener('click', handleClickOutside);
-});
-
-onBeforeUnmount(() => {
-    document.removeEventListener('click', handleClickOutside);
-});
 </script>
 
 <template>
-    <nav
-        class="sticky top-0 z-50 border-b border-slate-200/60 bg-white/80 backdrop-blur-md dark:border-gray-700/60 dark:bg-gray-900/80"
-    >
-        <div
-            class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6"
-        >
+    <k-navbar class="sticky top-0 z-50">
+        <template #left>
             <div class="flex items-center gap-2">
                 <AppLogo />
 
@@ -71,7 +44,9 @@ onBeforeUnmount(() => {
                     Admin
                 </span>
             </div>
+        </template>
 
+        <template #right>
             <div class="flex items-center gap-4">
                 <Link
                     href="/blogs"
@@ -90,84 +65,92 @@ onBeforeUnmount(() => {
                 </Link>
 
                 <!-- Logged in: User dropdown -->
-                <div v-else ref="dropdownRef" class="relative">
-                    <button
-                        @click="toggleDropdown"
-                        class="flex items-center gap-2 rounded-full py-1 pr-1 pl-1 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+                <div v-else class="relative">
+                    <k-popover
+                        :opened="showUserMenu"
+                        @close="showUserMenu = false"
                     >
-                        <img
-                            v-if="user.image_url"
-                            :src="user.image_url"
-                            :alt="user.name"
-                            class="h-7 w-7 rounded-full object-cover"
-                        />
-                        <span
-                            v-else
-                            class="flex h-7 w-7 items-center justify-center rounded-full bg-slate-900 text-xs font-bold text-white dark:bg-gray-700"
-                        >
-                            {{ user.name.charAt(0).toUpperCase() }}
-                        </span>
-
-                        <span class="hidden sm:inline">{{ user.name }}</span>
-
-                        <ChevronDown
-                            class="h-3.5 w-3.5 text-slate-400 transition-transform"
-                            :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
-                            v-if="dropdownOpen"
-                            class="absolute right-0 mt-2 w-48 origin-top-right rounded-xl border border-slate-200 bg-white p-1.5 shadow-lg dark:border-gray-700 dark:bg-gray-900"
-                        >
-                            <div
-                                class="border-b border-slate-100 px-3 py-2 dark:border-gray-700"
+                        <template #target>
+                            <k-button
+                                @click="showUserMenu = !showUserMenu"
+                                clear
                             >
-                                <p
-                                    class="text-sm font-semibold text-slate-900 dark: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"
+                                />
+                                <span
+                                    v-else
+                                    class="flex h-7 w-7 items-center justify-center rounded-full bg-slate-900 text-xs font-bold text-white dark:bg-gray-700"
                                 >
-                                    {{ user.name }}
-                                </p>
-                                <p class="text-xs text-slate-500">
-                                    {{ user.email }}
-                                </p>
-                            </div>
-
-                            <Link
+                                    {{ user.name.charAt(0).toUpperCase() }}
+                                </span>
+
+                                <span class="hidden sm:inline">{{
+                                    user.name
+                                }}</span>
+                            </k-button>
+                        </template>
+
+                        <k-list class="m-0">
+                            <k-list-item
+                                :title="user.name"
+                                :subtitle="user.email"
+                            >
+                                <template #media>
+                                    <div
+                                        class="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 dark:bg-gray-700"
+                                    >
+                                        <span
+                                            class="text-sm font-bold text-slate-700 dark:text-gray-200"
+                                        >
+                                            {{
+                                                user.name
+                                                    .charAt(0)
+                                                    .toUpperCase()
+                                            }}
+                                        </span>
+                                    </div>
+                                </template>
+                            </k-list-item>
+
+                            <k-list-item
+                                :component="Link"
                                 :href="isAdmin ? '/' : '/admin'"
-                                class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                                @click="closeDropdown"
+                                @click="showUserMenu = false"
+                                :title="isAdmin ? 'Home' : 'Staff Panel'"
                             >
-                                <component
-                                    :is="isAdmin ? Home : LayoutDashboard"
-                                    class="h-4 w-4 text-slate-400"
-                                />
-                                {{ isAdmin ? 'Home' : 'Staff Panel' }}
-                            </Link>
-
-                            <button
-                                @click="handleLogout"
-                                class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:hover:bg-red-950/30"
+                                <template #media>
+                                    <component
+                                        :is="isAdmin ? Home : LayoutDashboard"
+                                        class="h-4 w-4 text-slate-400"
+                                    />
+                                </template>
+                            </k-list-item>
+
+                            <k-list-item
+                                link="#"
+                                @click="
+                                    handleLogout();
+                                    showUserMenu = false;
+                                "
+                                title="Logout"
                             >
-                                <LogOut class="h-4 w-4" />
-                                Logout
-                            </button>
-                        </div>
-                    </Transition>
+                                <template #media>
+                                    <LogOut class="h-4 w-4 text-red-500" />
+                                </template>
+                            </k-list-item>
+                        </k-list>
+                    </k-popover>
                 </div>
 
                 <!-- Dark mode -->
-                <button
+                <k-button
                     @click="toggle"
-                    class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                    clear
+                    icon-only
                     :title="
                         theme === 'system'
                             ? 'System theme (click to cycle)'
@@ -179,8 +162,8 @@ onBeforeUnmount(() => {
                     <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>
+                </k-button>
             </div>
-        </div>
-    </nav>
-</template>
\ No newline at end of file
+        </template>
+    </k-navbar>
+</template>
diff --git a/resources/js/components/NodeRow.vue b/resources/js/components/NodeRow.vue
index aff655b..689a81b 100644
--- a/resources/js/components/NodeRow.vue
+++ b/resources/js/components/NodeRow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { kList, kListItem } from 'konsta/vue';
 import { Folder } from 'lucide-vue-next';
 import { computed } from 'vue';
 
@@ -14,54 +14,58 @@ const href = computed(() => {
 </script>
 
 <template>
-    <Link
-        :href="href"
-        class="group relative flex cursor-pointer touch-manipulation items-center justify-between bg-white px-5 py-4.5 transition-all duration-200 hover:bg-slate-50/40 active:scale-[0.995] sm:px-6 sm:active:scale-100 dark:bg-gray-900 dark:hover:bg-gray-800/50"
-    >
-        <div class="flex min-w-0 items-center gap-4">
-            <div
-                class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-slate-200/40 bg-slate-100 text-slate-500 transition-colors duration-200 group-hover:border-indigo-100 group-hover:bg-indigo-50 group-hover:text-indigo-600 dark:border-gray-700/40 dark:bg-gray-800 dark:text-gray-400 dark:group-hover:border-indigo-500/30 dark:group-hover:bg-indigo-500/10 dark:group-hover:text-indigo-400"
-            >
-                <Folder class="h-5 w-5 stroke-[2.2]" />
-            </div>
+    <kList>
+        <kListItem :link="true" :href="href">
+            <template #media>
+                <div
+                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-slate-200/40 bg-slate-100 text-slate-500 transition-colors duration-200 group-hover:border-indigo-100 group-hover:bg-indigo-50 group-hover:text-indigo-600 dark:border-gray-700/40 dark:bg-gray-800 dark:text-gray-400 dark:group-hover:border-indigo-500/30 dark:group-hover:bg-indigo-500/10 dark:group-hover:text-indigo-400"
+                >
+                    <Folder class="h-5 w-5 stroke-[2.2]" />
+                </div>
+            </template>
 
-            <div class="min-w-0">
+            <template #title>
                 <span
                     class="block truncate text-base font-bold text-slate-900 transition-colors group-hover:text-indigo-600 dark:text-gray-100 dark:group-hover:text-indigo-400"
                 >
                     {{ node.name }}
                 </span>
+            </template>
+
+            <template #subtitle>
                 <span
                     class="mt-0.5 inline-block text-xs font-semibold text-slate-400 sm:hidden dark:text-gray-500"
                 >
                     {{ node.children_count + node.resources_count || 0 }}
                     Materials
                 </span>
-            </div>
-        </div>
+            </template>
 
-        <div class="flex shrink-0 items-center gap-4 pl-3">
-            <span
-                class="hidden rounded-md border border-slate-200/60 bg-slate-50 px-2.5 py-1 text-xs font-bold text-slate-500 transition-colors group-hover:border-indigo-100/80 group-hover:bg-indigo-50/60 group-hover:text-indigo-600 sm:inline-block dark:border-gray-700/60 dark:bg-gray-800 dark:text-gray-400 dark:group-hover:border-indigo-500/30 dark:group-hover:bg-indigo-500/10 dark:group-hover:text-indigo-400"
-            >
-                {{ node.children_count + node.resources_count || 0 }}
-                Materials
-            </span>
+            <template #after>
+                <div class="flex shrink-0 items-center gap-4 pl-3">
+                    <span
+                        class="hidden rounded-md border border-slate-200/60 bg-slate-50 px-2.5 py-1 text-xs font-bold text-slate-500 transition-colors group-hover:border-indigo-100/80 group-hover:bg-indigo-50/60 group-hover:text-indigo-600 sm:inline-block dark:border-gray-700/60 dark:bg-gray-800 dark:text-gray-400 dark:group-hover:border-indigo-500/30 dark:group-hover:bg-indigo-500/10 dark:group-hover:text-indigo-400"
+                    >
+                        {{ node.children_count + node.resources_count || 0 }}
+                        Materials
+                    </span>
 
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4 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"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-            >
-                <path
-                    fill-rule="evenodd"
-                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                />
-            </svg>
-        </div>
-    </Link>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-4 w-4 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"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                            clip-rule="evenodd"
+                        />
+                    </svg>
+                </div>
+            </template>
+        </kListItem>
+    </kList>
 </template>
 
 <style scoped></style>
diff --git a/resources/js/components/NoticeDialog.vue b/resources/js/components/NoticeDialog.vue
index 6186fd4..a7d8fde 100644
--- a/resources/js/components/NoticeDialog.vue
+++ b/resources/js/components/NoticeDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { kDialog, kButton } from 'konsta/vue';
 import { X } from 'lucide-vue-next';
 import { onMounted, ref, watch } from 'vue';
 
@@ -44,70 +45,57 @@ const close = () => {
 
 <template>
     <Teleport to="body">
-        <Transition
-            enter-active-class="transition duration-300 ease-out"
-            enter-from-class="opacity-0 scale-95"
-            enter-to-class="opacity-100 scale-100"
-            leave-active-class="transition duration-200 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-95"
-        >
+        <kDialog :opened="isVisible && !!notice" @opened:change="close">
             <div
-                v-if="isVisible && notice"
-                class="fixed inset-0 z-50 flex items-center justify-center p-4"
+                class="relative w-full max-w-md overflow-hidden rounded-3xl bg-white shadow-xl ring-1 ring-slate-900/5 dark:bg-gray-900 dark:ring-gray-700/50"
             >
-                <div
-                    class="absolute inset-0 bg-slate-950/20 backdrop-blur-sm dark:bg-black/50"
+                <k-button
+                    clear
+                    small
                     @click="close"
-                ></div>
-
-                <div
-                    class="relative w-full max-w-md overflow-hidden rounded-3xl bg-white shadow-xl ring-1 ring-slate-900/5 dark:bg-gray-900 dark:ring-gray-700/50"
-                    role="alertdialog"
+                    class="absolute top-4 right-4 z-10"
+                    aria-label="Close notice"
                 >
-                    <button
-                        @click="close"
-                        class="absolute top-4 right-4 z-10 rounded-full bg-slate-100 p-2 text-slate-600 transition dark:bg-gray-800 dark:text-gray-400"
-                        aria-label="Close notice"
-                    >
-                        <X class="h-5 w-5" />
-                    </button>
+                    <X class="h-5 w-5" />
+                </k-button>
 
-                    <img
-                        v-if="notice.image"
-                        :src="notice.image"
-                        class="h-40 w-full object-cover"
-                        alt=""
-                    />
+                <img
+                    v-if="notice.image"
+                    :src="notice.image"
+                    class="h-40 w-full object-cover"
+                    alt=""
+                />
 
-                    <div class="p-6">
-                        <h2
-                            v-if="notice.title"
-                            class="text-lg font-semibold text-slate-900 dark:text-gray-100"
-                        >
-                            {{ notice.title }}
-                        </h2>
-                        <p
-                            v-if="notice.message"
-                            class="mt-2 text-sm leading-relaxed whitespace-pre-line text-slate-600 dark:text-gray-400"
-                        >
-                            {{ notice.message }}
-                        </p>
+                <div class="p-6">
+                    <h2
+                        v-if="notice.title"
+                        class="text-lg font-semibold text-slate-900 dark:text-gray-100"
+                    >
+                        {{ notice.title }}
+                    </h2>
+                    <p
+                        v-if="notice.message"
+                        class="mt-2 text-sm leading-relaxed whitespace-pre-line text-slate-600 dark:text-gray-400"
+                    >
+                        {{ notice.message }}
+                    </p>
 
-                        <div class="mt-6 flex gap-3">
-                            <a
-                                v-if="notice.show_button && notice.button_link"
-                                :href="notice.button_link"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="flex-1 rounded-xl bg-slate-900 px-4 py-2.5 text-center text-sm font-medium text-white transition hover:bg-slate-800 dark:bg-indigo-600 dark:hover:bg-indigo-500"
-                            >
-                                {{ notice.button_title || 'Learn more' }}
-                            </a>
-                        </div>
+                    <div class="mt-6 flex gap-3">
+                        <k-button
+                            v-if="notice.show_button && notice.button_link"
+                            fill
+                            rounded
+                            large
+                            :href="notice.button_link"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="flex-1"
+                        >
+                            {{ notice.button_title || 'Learn more' }}
+                        </k-button>
                     </div>
                 </div>
             </div>
-        </Transition>
+        </kDialog>
     </Teleport>
 </template>
diff --git a/resources/js/components/PwaInstallPrompt.vue b/resources/js/components/PwaInstallPrompt.vue
index 9e74ba0..2191216 100644
--- a/resources/js/components/PwaInstallPrompt.vue
+++ b/resources/js/components/PwaInstallPrompt.vue
@@ -1,29 +1,31 @@
 <script setup lang="ts">
-import { ref, shallowRef, onMounted, onUnmounted } from 'vue';
-
-defineOptions({
-    inheritAttrs: false,
-});
-
-const props = defineProps({
-    variant: {
-        type: String,
-        default: 'modal',
-    },
-});
+import { kDialog, kButton } from 'konsta/vue';
+import { ref, shallowRef, onMounted, onUnmounted, computed } from 'vue';
 
 const isVisible = ref(false);
 const deferredPrompt = shallowRef(null);
 
+type InstallMethod =
+    | 'native'
+    | 'safari-ios'
+    | 'safari-mac'
+    | 'firefox'
+    | 'manual';
+const installMethod = ref<InstallMethod>('manual');
+
+const isIOS = computed(() => /iPhone|iPad|iPod/.test(navigator.userAgent));
+const isSafari = computed(() =>
+    /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
+);
+const isFirefox = computed(() => /Firefox/i.test(navigator.userAgent));
+const isMac = computed(() => /Macintosh|Mac OS X/.test(navigator.userAgent));
+
 const handleBeforeInstall = (e: Event) => {
     e.preventDefault();
     deferredPrompt.value = e;
 
-    if (props.variant === 'modal') {
-        if (!sessionStorage.getItem('pwa_prompt_dismissed')) {
-            isVisible.value = true;
-        }
-    } else {
+    if (!sessionStorage.getItem('pwa_prompt_dismissed')) {
+        installMethod.value = 'native';
         isVisible.value = true;
     }
 };
@@ -44,6 +46,25 @@ onMounted(() => {
 
     window.addEventListener('beforeinstallprompt', handleBeforeInstall);
     window.addEventListener('appinstalled', handleAppInstalled);
+
+    setTimeout(() => {
+        if (deferredPrompt.value) {
+            return;
+        }
+
+        if (!sessionStorage.getItem('pwa_prompt_dismissed')) {
+            if (isSafari.value && isIOS.value) {
+                installMethod.value = 'safari-ios';
+                isVisible.value = true;
+            } else if (isSafari.value && isMac.value) {
+                installMethod.value = 'safari-mac';
+                isVisible.value = true;
+            } else if (isFirefox.value) {
+                installMethod.value = 'firefox';
+                isVisible.value = true;
+            }
+        }
+    }, 3000);
 });
 
 onUnmounted(() => {
@@ -52,121 +73,146 @@ onUnmounted(() => {
 });
 
 const handleInstall = async () => {
-    if (!deferredPrompt.value) {
-        return;
-    }
-
-    try {
-        await deferredPrompt.value.prompt();
-        const { outcome } = await deferredPrompt.value.userChoice;
-
-        if (outcome === 'accepted') {
-            isVisible.value = false;
-            deferredPrompt.value = null;
+    if (installMethod.value === 'native' && deferredPrompt.value) {
+        try {
+            await deferredPrompt.value.prompt();
+            const { outcome } = await deferredPrompt.value.userChoice;
+
+            if (outcome === 'accepted') {
+                isVisible.value = false;
+                deferredPrompt.value = null;
+            }
+        } catch (error) {
+            console.error('PWA install error:', error);
         }
-    } catch (error) {
-        console.error('PWA install error:', error);
+    } else {
+        isVisible.value = false;
     }
 };
 
 const handleDismiss = () => {
     isVisible.value = false;
-
-    if (props.variant === 'modal') {
-        sessionStorage.setItem('pwa_prompt_dismissed', 'true');
-    }
+    sessionStorage.setItem('pwa_prompt_dismissed', 'true');
 };
 </script>
 
 <template>
-    <template v-if="isVisible && deferredPrompt">
-        <Teleport v-if="variant === 'modal'" to="body">
-            <div
-                class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4 backdrop-blur-sm dark:bg-black/60"
-            >
+    <Teleport v-if="isVisible" to="body">
+        <kDialog :opened="true">
+            <div class="flex flex-col items-center px-4 py-6 text-center">
                 <div
-                    class="w-full max-w-sm rounded-2xl border border-slate-100 bg-white p-6 shadow-xl dark:border-gray-700 dark:bg-gray-900"
+                    class="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-50 text-3xl dark:bg-indigo-500/10"
                 >
-                    <div class="mb-4 flex items-center gap-3">
-                        <div
-                            class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 text-xl text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400"
-                        >
-                            📱
-                        </div>
-                        <div>
-                            <h3
-                                class="text-base font-bold text-slate-900 dark:text-gray-100"
-                            >
-                                Install Our App
-                            </h3>
-                            <p
-                                class="text-xs text-slate-500 dark:text-gray-400"
-                            >
-                                Get fast, offline access right from your home
-                                screen.
-                            </p>
-                        </div>
-                    </div>
-
-                    <div class="flex items-center gap-3">
-                        <button
-                            @click="handleInstall"
-                            class="flex-1 rounded-lg bg-indigo-600 py-2 text-xs font-semibold text-white shadow transition hover:bg-indigo-700"
-                        >
-                            Install App
-                        </button>
-                        <button
-                            @click="handleDismiss"
-                            class="rounded-lg border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
-                        >
-                            Maybe Later
-                        </button>
-                    </div>
+                    📱
                 </div>
-            </div>
-        </Teleport>
-
-        <!-- Compact Inline Banner (Mobile) / Scaled Up (PC) -->
-        <div
-            v-else
-            v-bind="$attrs"
-            class="flex items-center justify-between gap-2.5 rounded-xl border border-indigo-100 bg-gradient-to-r from-indigo-50/80 to-slate-50/80 px-3 py-2 shadow-sm backdrop-blur-sm sm:gap-4 sm:px-5 sm:py-3.5 dark:border-indigo-500/20 dark:from-indigo-500/5 dark:to-gray-900/80"
-        >
-            <div class="flex min-w-0 items-center gap-2.5 sm:gap-3.5">
+                <h2 class="text-lg font-bold text-slate-900 dark:text-white">
+                    Install HSCStack
+                </h2>
+                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                    Add to your home screen for fast, offline access.
+                </p>
+
                 <div
-                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-600/10 text-base sm:h-10 sm:w-10 sm:rounded-xl sm:text-xl dark:bg-indigo-500/20"
+                    v-if="installMethod === 'safari-ios'"
+                    class="mt-4 w-full rounded-xl bg-slate-50 p-4 text-left dark:bg-slate-800"
                 >
-                    📱
-                </div>
-                <div class="min-w-0">
-                    <h3
-                        class="truncate text-xs font-bold text-slate-900 sm:text-sm dark:text-gray-100"
+                    <p
+                        class="mb-2 text-sm font-medium text-slate-700 dark:text-slate-200"
                     >
-                        Install Our App
-                    </h3>
+                        On iPhone or iPad:
+                    </p>
+                    <ol
+                        class="list-decimal space-y-1 pl-4 text-xs text-slate-500 dark:text-slate-400"
+                    >
+                        <li>Tap the <strong>Share</strong> button in Safari</li>
+                        <li>
+                            Scroll down and tap
+                            <strong>Add to Home Screen</strong>
+                        </li>
+                        <li>Tap <strong>Add</strong> to confirm</li>
+                    </ol>
+                </div>
+
+                <div
+                    v-else-if="installMethod === 'safari-mac'"
+                    class="mt-4 w-full rounded-xl bg-slate-50 p-4 text-left dark:bg-slate-800"
+                >
                     <p
-                        class="truncate text-[11px] text-slate-500 sm:text-xs dark:text-gray-400"
+                        class="mb-2 text-sm font-medium text-slate-700 dark:text-slate-200"
                     >
-                        Fast, offline home screen access.
+                        On Mac:
                     </p>
+                    <ol
+                        class="list-decimal space-y-1 pl-4 text-xs text-slate-500 dark:text-slate-400"
+                    >
+                        <li>Click <strong>File</strong> in the menu bar</li>
+                        <li>Click <strong>Add to Dock</strong></li>
+                        <li>Click <strong>Add</strong></li>
+                    </ol>
                 </div>
-            </div>
 
-            <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
-                <button
-                    @click="handleInstall"
-                    class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-xs transition hover:bg-indigo-700 active:scale-95 sm:rounded-lg sm:px-4 sm:py-2 sm:text-xs"
+                <div
+                    v-else-if="installMethod === 'firefox'"
+                    class="mt-4 w-full rounded-xl bg-slate-50 p-4 text-left dark:bg-slate-800"
                 >
-                    Install
-                </button>
-                <button
-                    @click="handleDismiss"
-                    class="flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-200/50 hover:text-slate-600 sm:h-8 sm:w-8 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300"
-                    title="Dismiss"
+                    <p
+                        class="mb-2 text-sm font-medium text-slate-700 dark:text-slate-200"
+                    >
+                        In Firefox:
+                    </p>
+                    <ol
+                        class="list-decimal space-y-1 pl-4 text-xs text-slate-500 dark:text-slate-400"
+                    >
+                        <li>
+                            Click the <strong>+</strong> icon in the address bar
+                        </li>
+                        <li>Or go to <strong>Menu > Install</strong></li>
+                    </ol>
+                </div>
+
+                <div
+                    v-else-if="installMethod === 'manual'"
+                    class="mt-4 w-full rounded-xl bg-slate-50 p-4 text-left dark:bg-slate-800"
                 >
-                    ✕
-                </button>
+                    <p
+                        class="mb-2 text-sm font-medium text-slate-700 dark:text-slate-200"
+                    >
+                        To install:
+                    </p>
+                    <ol
+                        class="list-decimal space-y-1 pl-4 text-xs text-slate-500 dark:text-slate-400"
+                    >
+                        <li>
+                            Open this site in <strong>Chrome</strong> or
+                            <strong>Edge</strong>
+                        </li>
+                        <li>Click the install icon in the address bar</li>
+                        <li>Or use <strong>Menu > Install App</strong></li>
+                    </ol>
+                </div>
+
+                <div class="mt-6 flex w-full gap-3">
+                    <k-button
+                        v-if="installMethod === 'native'"
+                        large
+                        rounded
+                        class="flex-1"
+                        @click="handleInstall"
+                    >
+                        Install
+                    </k-button>
+                    <k-button
+                        large
+                        rounded
+                        :fill="installMethod !== 'native'"
+                        :clear="installMethod === 'native'"
+                        class="flex-1"
+                        @click="handleDismiss"
+                    >
+                        {{ installMethod === 'native' ? 'Later' : 'Got it' }}
+                    </k-button>
+                </div>
             </div>
-        </div>
-    </template>
+        </kDialog>
+    </Teleport>
 </template>
diff --git a/resources/js/components/ResourceRow.vue b/resources/js/components/ResourceRow.vue
index 08cccf8..264f214 100644
--- a/resources/js/components/ResourceRow.vue
+++ b/resources/js/components/ResourceRow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { kList, kListItem } from 'konsta/vue';
 import { Book, File, FileArchive, FileImage, FileVideo } from 'lucide-vue-next';
 
 const { resource } = defineProps({
@@ -8,70 +8,74 @@ const { resource } = defineProps({
 </script>
 
 <template>
-    <Link
-        :href="`/resources/${resource.id}`"
-        class="group relative flex cursor-pointer touch-manipulation items-center justify-between bg-white px-5 py-4.5 transition-all duration-200 hover:bg-slate-50/40 active:scale-[0.995] sm:px-6 sm:active:scale-100 dark:bg-gray-900 dark:hover:bg-gray-800/50"
-    >
-        <div class="flex min-w-0 items-center gap-4">
-            <div
-                class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-amber-200/40 bg-amber-50 text-amber-600 transition-colors duration-200 group-hover:border-amber-200 group-hover:bg-amber-100/70 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400 dark:group-hover:border-amber-500/30 dark:group-hover:bg-amber-500/20"
-            >
-                <FileImage
-                    v-if="resource.resource_type == 'image'"
-                    class="h-5 w-5 stroke-[2.2]"
-                />
-                <FileVideo
-                    v-else-if="resource.resource_type == 'video'"
-                    class="h-5 w-5 stroke-[2.2]"
-                />
-                <FileArchive
-                    v-else-if="resource.resource_type == 'pdf'"
-                    class="h-5 w-5 stroke-[2.2]"
-                />
-                <Book
-                    v-else-if="resource.resource_type == 'note'"
-                    class="h-5 w-5 stroke-[2.2]"
-                />
-                <File v-else class="h-5 w-5 stroke-[2.2]" />
-            </div>
+    <kList>
+        <kListItem :link="true" :href="`/resources/${resource.id}`">
+            <template #media>
+                <div
+                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-amber-200/40 bg-amber-50 text-amber-600 transition-colors duration-200 group-hover:border-amber-200 group-hover:bg-amber-100/70 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400 dark:group-hover:border-amber-500/30 dark:group-hover:bg-amber-500/20"
+                >
+                    <FileImage
+                        v-if="resource.resource_type == 'image'"
+                        class="h-5 w-5 stroke-[2.2]"
+                    />
+                    <FileVideo
+                        v-else-if="resource.resource_type == 'video'"
+                        class="h-5 w-5 stroke-[2.2]"
+                    />
+                    <FileArchive
+                        v-else-if="resource.resource_type == 'pdf'"
+                        class="h-5 w-5 stroke-[2.2]"
+                    />
+                    <Book
+                        v-else-if="resource.resource_type == 'note'"
+                        class="h-5 w-5 stroke-[2.2]"
+                    />
+                    <File v-else class="h-5 w-5 stroke-[2.2]" />
+                </div>
+            </template>
 
-            <div class="min-w-0">
+            <template #title>
                 <span
                     class="block text-base font-bold break-words text-slate-900 transition-colors group-hover:text-amber-700 dark:text-gray-100 dark:group-hover:text-amber-400"
                 >
                     {{ resource.title }}
                 </span>
+            </template>
+
+            <template #subtitle>
                 <span
                     class="mt-0.5 inline-block text-xs font-semibold text-amber-600 sm:hidden dark:text-amber-400"
                 >
                     {{ resource.resource_type }}
                 </span>
-            </div>
-        </div>
+            </template>
 
-        <div class="flex shrink-0 items-center gap-4 pl-3">
-            <span
-                class="hidden rounded-md border border-amber-200/60 bg-amber-50/60 px-2.5 py-1 text-xs font-bold text-amber-600 sm:inline-block dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400"
-            >
-                {{ resource.resource_type }}
-            </span>
+            <template #after>
+                <div class="flex shrink-0 items-center gap-4 pl-3">
+                    <span
+                        class="hidden rounded-md border border-amber-200/60 bg-amber-50/60 px-2.5 py-1 text-xs font-bold text-amber-600 sm:inline-block dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-400"
+                    >
+                        {{ resource.resource_type }}
+                    </span>
 
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 dark:text-gray-500 dark:group-hover:text-amber-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2.5"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-            </svg>
-        </div>
-    </Link>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-amber-600 dark:text-gray-500 dark:group-hover:text-amber-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        stroke-width="2.5"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                        />
+                    </svg>
+                </div>
+            </template>
+        </kListItem>
+    </kList>
 </template>
 
 <style scoped></style>
diff --git a/resources/js/components/SubjectCard.vue b/resources/js/components/SubjectCard.vue
index b862d10..f64e6ff 100644
--- a/resources/js/components/SubjectCard.vue
+++ b/resources/js/components/SubjectCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import { kCard } from 'konsta/vue';
 import {
     Search,
     Atom,
@@ -30,12 +31,11 @@ const icons = {
 </script>
 
 <template>
-    <Link
-        :href="subject.slug"
-        class="group relative flex touch-manipulation items-center justify-between overflow-hidden rounded-xl border border-slate-200 bg-white px-5 py-4.5 transition-all duration-200 hover:border-indigo-300 hover:shadow-sm active:scale-[0.99] dark:border-gray-700 dark:bg-gray-900 dark:hover:border-indigo-500/50 dark:hover:shadow-indigo-500/5"
-    >
-        <div class="flex min-w-0 items-center gap-4">
-            <!-- Balanced Icon Wrapper -->
+    <k-card outline>
+        <Link
+            :href="subject.slug"
+            class="group flex touch-manipulation items-center gap-4 transition-all duration-200 active:scale-[0.99]"
+        >
             <div
                 :class="[
                     subject.tailwind_format,
@@ -48,8 +48,7 @@ const icons = {
                 />
             </div>
 
-            <!-- Content Area -->
-            <div class="min-w-0">
+            <div class="min-w-0 flex-1">
                 <h3
                     class="truncate text-base font-bold text-slate-800 transition-colors group-hover:text-indigo-600 dark:text-gray-200 dark:group-hover:text-indigo-400"
                 >
@@ -61,13 +60,10 @@ const icons = {
                     {{ subject.nodes_count }} Chapters
                 </p>
             </div>
-        </div>
 
-        <!-- Clean, Modern Chevron Indicator -->
-        <div class="flex items-center pl-4">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 text-slate-300 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-indigo-500 dark:text-gray-600 dark:group-hover:text-indigo-400"
+                class="h-5 w-5 shrink-0 text-slate-300 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-indigo-500 dark:text-gray-600 dark:group-hover:text-indigo-400"
                 viewBox="0 0 20 20"
                 fill="currentColor"
             >
@@ -77,6 +73,6 @@ const icons = {
                     clip-rule="evenodd"
                 />
             </svg>
-        </div>
-    </Link>
+        </Link>
+    </k-card>
 </template>
diff --git a/resources/js/components/ToastNotification.vue b/resources/js/components/ToastNotification.vue
index e458e65..b6b8de9 100644
--- a/resources/js/components/ToastNotification.vue
+++ b/resources/js/components/ToastNotification.vue
@@ -1,40 +1,58 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import { CheckCircle2, AlertTriangle, X } from 'lucide-vue-next';
-import { ref, watch } from 'vue';
+import { kToast } from 'konsta/vue';
+import { ref, computed, watch } from 'vue';
 
 interface Toast {
-    id: number;
     message: string;
     type: 'success' | 'error';
 }
 
 const page = usePage();
-const toasts = ref<Toast[]>([]);
-let toastId = 0;
+const isOpened = ref(false);
+const toastData = ref<Toast>({ message: '', type: 'success' });
 
-const addToast = (message: string, type: 'success' | 'error') => {
-    const id = toastId++;
-    toasts.value.push({ id, message, type });
-    setTimeout(() => {
-        removeToast(id);
-    }, 5000);
-};
+let timeout: ReturnType<typeof setTimeout> | undefined;
+
+const showToast = (message: string, type: 'success' | 'error') => {
+    if (timeout) {
+        clearTimeout(timeout);
+    }
 
-const removeToast = (id: number) => {
-    toasts.value = toasts.value.filter((t) => t.id !== id);
+    toastData.value = { message, type };
+    isOpened.value = true;
+    timeout = setTimeout(() => {
+        isOpened.value = false;
+    }, 4000);
 };
 
-// Watch Inertia page flash props for new messages
+const toastColors = computed(() => {
+    if (toastData.value.type === 'success') {
+        return {
+            bgIos: 'bg-green-500/90',
+            bgMaterial: 'bg-green-500',
+            textIos: 'text-white',
+            textMaterial: 'text-white',
+        };
+    }
+
+    return {
+        bgIos: 'bg-red-500/90',
+        bgMaterial: 'bg-red-500',
+        textIos: 'text-white',
+        textMaterial: 'text-white',
+    };
+});
+
 watch(
     () => page.props.flash,
     (flash: any) => {
         if (flash?.success) {
-            addToast(flash.success, 'success');
+            showToast(flash.success, 'success');
         }
 
         if (flash?.error) {
-            addToast(flash.error, 'error');
+            showToast(flash.error, 'error');
         }
     },
     { deep: true, immediate: true },
@@ -42,61 +60,9 @@ watch(
 </script>
 
 <template>
-    <div
-        class="pointer-events-none fixed top-4 right-4 z-[9999] flex w-full max-w-sm flex-col gap-3 px-4 sm:px-0"
-    >
-        <TransitionGroup name="toast" tag="div" class="flex flex-col gap-2.5">
-            <div
-                v-for="toast in toasts"
-                :key="toast.id"
-                class="pointer-events-auto flex w-full items-start gap-3 rounded-2xl border p-4 shadow-xl backdrop-blur-md transition-all duration-300 hover:scale-[1.01]"
-                :class="
-                    toast.type === 'success'
-                        ? 'border-emerald-500/25 bg-emerald-50/95 text-emerald-950 shadow-emerald-100/30 dark:border-emerald-500/20 dark:bg-emerald-950/90 dark:text-emerald-100 dark:shadow-emerald-900/30'
-                        : 'border-rose-500/25 bg-rose-50/95 text-rose-950 shadow-rose-100/30 dark:border-rose-500/20 dark:bg-rose-950/90 dark:text-rose-100 dark:shadow-rose-900/30'
-                "
-            >
-                <!-- Icon -->
-                <component
-                    :is="
-                        toast.type === 'success' ? CheckCircle2 : AlertTriangle
-                    "
-                    class="h-5 w-5 shrink-0"
-                    :class="
-                        toast.type === 'success'
-                            ? 'text-emerald-600 dark:text-emerald-400'
-                            : 'text-rose-600 dark:text-rose-400'
-                    "
-                />
-
-                <!-- Message -->
-                <p class="flex-1 text-sm leading-relaxed font-semibold">
-                    {{ toast.message }}
-                </p>
-
-                <!-- Close Button -->
-                <button
-                    @click="removeToast(toast.id)"
-                    class="cursor-pointer rounded-lg p-0.5 text-slate-400 transition-colors hover:bg-black/5 hover:text-slate-700 dark:text-gray-500 dark:hover:bg-white/10 dark:hover:text-gray-300"
-                >
-                    <X class="h-4 w-4" />
-                </button>
-            </div>
-        </TransitionGroup>
-    </div>
+    <kToast :opened="isOpened" position="center" :colors="toastColors">
+        <template #default>
+            <span>{{ toastData.message }}</span>
+        </template>
+    </kToast>
 </template>
-
-<style scoped>
-.toast-enter-active,
-.toast-leave-active {
-    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.toast-enter-from {
-    opacity: 0;
-    transform: translateX(40px) scale(0.9);
-}
-.toast-leave-to {
-    opacity: 0;
-    transform: translateX(40px) scale(0.9);
-}
-</style>
diff --git a/resources/js/components/UserCard.vue b/resources/js/components/UserCard.vue
index ec43154..c3e5cfe 100644
--- a/resources/js/components/UserCard.vue
+++ b/resources/js/components/UserCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { kCard } from 'konsta/vue';
 import { Github, Facebook, Instagram } from 'lucide-vue-next';
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 
@@ -24,125 +25,127 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <div
+    <kCard
+        outline
         :id="id"
-        class="group flex scroll-mt-64 flex-col justify-between rounded-2xl border border-slate-200 bg-white p-8 text-center transition-all duration-300 hover:border-slate-300 hover:shadow-md hover:shadow-slate-100/50 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600 dark:hover:shadow-gray-800/40"
+        class="group flex scroll-mt-64 flex-col justify-between rounded-2xl transition-all duration-300"
         :class="{
-            'border-indigo-500 shadow-lg ring-2 shadow-indigo-100 ring-indigo-500 ring-offset-4 dark:shadow-indigo-500/20 dark:ring-offset-gray-900':
-                activeHash === `#${id}`,
+            'ring-2 ring-indigo-500 ring-offset-4': activeHash === `#${id}`,
         }"
     >
-        <div class="flex flex-col items-center">
-            <div class="mb-6">
-                <img
-                    v-if="member.image_url"
-                    :src="member.image_url"
-                    :alt="member.name"
-                    class="h-28 w-28 rounded-3xl border border-slate-100 object-cover shadow-sm transition-transform duration-300 group-hover:scale-[1.03] dark:border-gray-800"
-                />
-                <div
-                    v-else
-                    class="flex h-28 w-28 items-center justify-center rounded-3xl border border-indigo-100 bg-indigo-50 text-2xl font-black text-indigo-600 shadow-sm dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-400"
-                >
-                    {{
-                        member.name
-                            .split(' ')
-                            .map((n) => n[0])
-                            .join('')
-                    }}
+        <template #header>
+            <div class="flex flex-col items-center">
+                <div class="mb-6">
+                    <img
+                        v-if="member.image_url"
+                        :src="member.image_url"
+                        :alt="member.name"
+                        class="h-28 w-28 rounded-3xl object-cover shadow-sm transition-transform duration-300 group-hover:scale-[1.03]"
+                    />
+                    <div
+                        v-else
+                        class="flex h-28 w-28 items-center justify-center rounded-3xl bg-indigo-50 text-2xl font-black text-indigo-600 shadow-sm"
+                    >
+                        {{
+                            member.name
+                                .split(' ')
+                                .map((n) => n[0])
+                                .join('')
+                        }}
+                    </div>
                 </div>
-            </div>
 
-            <div class="space-y-1">
-                <h3
-                    class="text-xl font-black tracking-tight text-slate-950 dark:text-gray-100"
-                >
-                    {{ member.name }}
-                </h3>
-                <span
-                    class="inline-block rounded-md px-1.5 py-0.5 text-[10px] font-bold tracking-wider capitalize"
-                    :class="{
-                        'border border-rose-100 bg-rose-50 text-rose-600 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-400':
-                            member.roles[0].name.toLowerCase() === 'admin',
-                        'border border-blue-100 bg-blue-50 text-blue-600 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-400':
-                            member.roles[0].name.toLowerCase() === 'editor',
-                        'border border-amber-100 bg-amber-50 text-amber-600 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400':
-                            member.roles[0].name.toLowerCase() === 'manager',
-                    }"
-                >
-                    {{
-                        member.roles[0].name.toLowerCase() === 'manager'
-                            ? 'Staff'
-                            : member.roles[0].name
-                    }}
-                </span>
-                <p
-                    class="text-xs font-bold tracking-wide text-indigo-600 uppercase dark:text-indigo-400"
-                >
-                    {{ member.title }}
-                </p>
-                <p
-                    class="text-xs font-semibold text-slate-400 dark:text-gray-500"
-                >
-                    {{ member.institution }}
-                </p>
+                <div class="space-y-1">
+                    <h3
+                        class="text-xl font-black tracking-tight text-slate-950"
+                    >
+                        {{ member.name }}
+                    </h3>
+                    <span
+                        class="inline-block rounded-md px-1.5 py-0.5 text-[10px] font-bold tracking-wider capitalize"
+                        :class="{
+                            'border border-rose-100 bg-rose-50 text-rose-600':
+                                member.roles[0].name.toLowerCase() === 'admin',
+                            'border border-blue-100 bg-blue-50 text-blue-600':
+                                member.roles[0].name.toLowerCase() === 'editor',
+                            'border border-amber-100 bg-amber-50 text-amber-600':
+                                member.roles[0].name.toLowerCase() ===
+                                'manager',
+                        }"
+                    >
+                        {{
+                            member.roles[0].name.toLowerCase() === 'manager'
+                                ? 'Staff'
+                                : member.roles[0].name
+                        }}
+                    </span>
+                    <p
+                        class="text-xs font-bold tracking-wide text-indigo-600 uppercase"
+                    >
+                        {{ member.title }}
+                    </p>
+                    <p class="text-xs font-semibold text-slate-400">
+                        {{ member.institution }}
+                    </p>
+                </div>
             </div>
+        </template>
 
-            <p
-                class="mt-5 max-w-xs text-sm leading-relaxed font-medium text-slate-600 dark:text-gray-400"
-            >
-                {{ member.about }}
-            </p>
-        </div>
-
-        <div
-            class="mt-8 flex items-center justify-center gap-4 border-t border-slate-100 pt-5 dark:border-gray-800"
+        <p
+            class="mt-5 max-w-xs text-sm leading-relaxed font-medium text-slate-600"
         >
-            <!-- GitHub Link -->
-            <a
-                v-if="member.github"
-                :href="member.github"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-slate-950 dark:text-gray-500 dark:hover:text-gray-100"
+            {{ member.about }}
+        </p>
+
+        <template #footer>
+            <div
+                class="flex items-center justify-center gap-4 border-t border-slate-100 pt-5"
             >
-                <Github class="h-4 w-4" />
-                GitHub
-            </a>
+                <a
+                    v-if="member.github"
+                    :href="member.github"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-slate-950"
+                >
+                    <Github class="h-4 w-4" />
+                    GitHub
+                </a>
 
-            <!-- Separator between GitHub and Facebook -->
-            <span
-                v-if="member.github && (member.facebook || member.instagram)"
-                class="h-3.5 w-px bg-slate-200 dark:bg-gray-700"
-            ></span>
+                <span
+                    v-if="
+                        member.github && (member.facebook || member.instagram)
+                    "
+                    class="h-3.5 w-px bg-slate-200"
+                ></span>
 
-            <!-- Facebook Link -->
-            <a
-                v-if="member.facebook"
-                :href="member.facebook"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-indigo-600 dark:text-gray-500 dark:hover:text-indigo-400"
-            >
-                <Facebook class="h-4 w-4" />
-                Facebook
-            </a>
+                <a
+                    v-if="member.facebook"
+                    :href="member.facebook"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-indigo-600"
+                >
+                    <Facebook class="h-4 w-4" />
+                    Facebook
+                </a>
 
-            <span
-                v-if="member.facebook && member.instagram"
-                class="h-3.5 w-px bg-slate-200 dark:bg-gray-700"
-            ></span>
+                <span
+                    v-if="member.facebook && member.instagram"
+                    class="h-3.5 w-px bg-slate-200"
+                ></span>
 
-            <a
-                v-if="member.instagram"
-                :href="member.instagram"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-pink-600 dark:text-gray-500 dark:hover:text-pink-400"
-            >
-                <Instagram class="h-4 w-4" />
-                Instagram
-            </a>
-        </div>
-    </div>
+                <a
+                    v-if="member.instagram"
+                    :href="member.instagram"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-pink-600"
+                >
+                    <Instagram class="h-4 w-4" />
+                    Instagram
+                </a>
+            </div>
+        </template>
+    </kCard>
 </template>
diff --git a/resources/js/components/admin/DesktopSidebar.vue b/resources/js/components/admin/DesktopSidebar.vue
index 32ea2d8..4aeb0c8 100644
--- a/resources/js/components/admin/DesktopSidebar.vue
+++ b/resources/js/components/admin/DesktopSidebar.vue
@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { Link, router } from '@inertiajs/vue3';
+import { router } from '@inertiajs/vue3';
+import { kList, kListItem, kBlock, kDialog, kButton } from 'konsta/vue';
 import { Database, LogOut } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 defineProps({
     navigation: Array,
 });
 
-const handleLogout = () => {
-    if (confirm('Are you sure you want to log out?')) {
-        router.post('/logout');
-    }
+const logoutDialogOpened = ref(false);
+const clearCacheDialogOpened = ref(false);
+
+const confirmLogout = () => {
+    logoutDialogOpened.value = false;
+    router.post('/logout');
 };
 
-const handleClearCache = () => {
-    if (confirm('Are you sure you want to clear all cache?')) {
-        router.post('/admin/clear-cache');
-    }
+const confirmClearCache = () => {
+    clearCacheDialogOpened.value = false;
+    router.post('/admin/clear-cache');
 };
 </script>
 
@@ -27,76 +30,80 @@ const handleClearCache = () => {
             Management
         </p>
 
-        <div
-            v-for="(item, index) in navigation"
-            :key="item.name"
-            class="group/wrapper relative"
-        >
-            <Link
-                :href="item.to"
-                class="group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 transition-all duration-300 hover:bg-indigo-50/60 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
-            >
-                <span
-                    class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-indigo-600 transition-transform duration-200 group-hover:scale-y-100 dark:bg-indigo-400"
-                ></span>
-                <component
-                    :is="item.icon"
-                    class="h-4 w-4 text-slate-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:rotate-[2deg] group-hover:text-indigo-500 dark:text-gray-500 dark:group-hover:text-indigo-400"
-                    :stroke-width="2"
-                />
-                <span
-                    class="transform transition-transform duration-300 ease-out group-hover:translate-x-0.5"
-                >
-                    {{ item.name }}
-                </span>
-            </Link>
-            <hr
-                v-if="index < navigation.length - 1"
-                class="mx-3 my-1 border-slate-200/60 dark:border-gray-700/60"
-            />
-        </div>
+        <kList>
+            <div v-for="(item, index) in navigation" :key="item.name">
+                <kListItem :link="true" :href="item.to">
+                    <template #media>
+                        <component :is="item.icon" :stroke-width="2" />
+                    </template>
+
+                    <template #title>
+                        {{ item.name }}
+                    </template>
+                </kListItem>
+
+                <hr v-if="index < navigation.length - 1" />
+            </div>
+        </kList>
     </nav>
 
-    <div class="space-y-3">
-        <button
-            @click="handleClearCache"
-            class="group relative flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 transition-all duration-300 hover:bg-rose-50/60 hover:text-rose-700 dark:text-rose-400 dark:hover:bg-rose-500/10 dark:hover:text-rose-300"
-        >
-            <span
-                class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-rose-600 transition-transform duration-200 group-hover:scale-y-100 dark:bg-rose-400"
-            ></span>
-            <Database
-                class="h-4 w-4 text-rose-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:-rotate-[4deg] group-hover:text-rose-500 dark:text-rose-500 dark:group-hover:text-rose-400"
-                :stroke-width="2"
-            />
-            <span
-                class="transform transition-transform duration-300 ease-out group-hover:translate-x-0.5"
-            >
-                Clear cache
-            </span>
-        </button>
-        <button
-            @click="handleLogout"
-            class="group relative flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 transition-all duration-300 hover:bg-rose-50/60 hover:text-rose-700 dark:text-rose-400 dark:hover:bg-rose-500/10 dark:hover:text-rose-300"
-        >
-            <span
-                class="absolute top-1/4 bottom-1/4 left-0 w-[3px] origin-center scale-y-0 rounded-full bg-rose-600 transition-transform duration-200 group-hover:scale-y-100 dark:bg-rose-400"
-            ></span>
-            <LogOut
-                class="h-4 w-4 text-rose-400 transition-all duration-300 ease-out group-hover:scale-110 group-hover:-rotate-[4deg] group-hover:text-rose-500 dark:text-rose-500 dark:group-hover:text-rose-400"
-                :stroke-width="2"
-            />
-            <span
-                class="transform transition-transform duration-300 ease-out group-hover:translate-x-0.5"
-            >
-                Logout
-            </span>
-        </button>
+    <kBlock strong outline>
+        <kListItem link @click="clearCacheDialogOpened = true">
+            <template #media>
+                <Database :stroke-width="2" />
+            </template>
 
-        <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"
-        >
+            <template #title> Clear cache </template>
+        </kListItem>
+
+        <kListItem link @click="logoutDialogOpened = true">
+            <template #media>
+                <LogOut :stroke-width="2" />
+            </template>
+
+            <template #title> Logout </template>
+        </kListItem>
+
+        <div class="px-2 pt-3 text-xs text-slate-400 dark:text-gray-500">
             Internal Dashboard
         </div>
-    </div>
+    </kBlock>
+
+    <kDialog
+        :opened="logoutDialogOpened"
+        @opened:change="logoutDialogOpened = $event"
+    >
+        <div class="p-4">
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Confirm Logout
+            </p>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                Are you sure you want to log out?
+            </p>
+            <div class="mt-4 flex justify-end gap-2">
+                <kButton @click="logoutDialogOpened = false">Cancel</kButton>
+                <kButton @click="confirmLogout">Confirm</kButton>
+            </div>
+        </div>
+    </kDialog>
+
+    <kDialog
+        :opened="clearCacheDialogOpened"
+        @opened:change="clearCacheDialogOpened = $event"
+    >
+        <div class="p-4">
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Clear Cache
+            </p>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                Are you sure you want to clear all cache?
+            </p>
+            <div class="mt-4 flex justify-end gap-2">
+                <kButton @click="clearCacheDialogOpened = false"
+                    >Cancel</kButton
+                >
+                <kButton @click="confirmClearCache">Confirm</kButton>
+            </div>
+        </div>
+    </kDialog>
 </template>
diff --git a/resources/js/components/admin/MobileSideBar.vue b/resources/js/components/admin/MobileSideBar.vue
index aa81223..bf43b35 100644
--- a/resources/js/components/admin/MobileSideBar.vue
+++ b/resources/js/components/admin/MobileSideBar.vue
@@ -1,85 +1,132 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import { X, LogOut, Database } from 'lucide-vue-next';
+import { router } from '@inertiajs/vue3';
+import {
+    kPanel,
+    kList,
+    kListItem,
+    kBlock,
+    kDialog,
+    kButton,
+    kPage,
+    kNavbar,
+} from 'konsta/vue';
+import { Database, LogOut } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 defineProps({
     navigation: Array,
     isOpen: Boolean,
 });
 
-defineEmits(['close', 'logout']);
+defineEmits(['close']);
+
+const logoutDialogOpened = ref(false);
+const clearCacheDialogOpened = ref(false);
+
+const confirmLogout = () => {
+    logoutDialogOpened.value = false;
+    router.post('/logout');
+};
+
+const confirmClearCache = () => {
+    clearCacheDialogOpened.value = false;
+    router.post('/admin/clear-cache');
+};
 </script>
 
 <template>
-    <div v-if="isOpen" class="fixed inset-0 z-50 flex md:hidden">
-        <div
-            class="fixed inset-0 bg-slate-900/20 backdrop-blur-sm dark:bg-black/40"
-            @click="$emit('close')"
-        ></div>
+    <kPanel
+        :opened="isOpen"
+        side="left"
+        effect="cover"
+        @opened:change="
+            (val: boolean) => {
+                if (!val) $emit('close');
+            }
+        "
+    >
+        <kPage>
+            <kNavbar title="Menu" />
 
-        <div
-            class="relative flex w-full max-w-xs flex-1 flex-col justify-between border-r border-slate-200 bg-white/90 p-5 shadow-2xl backdrop-blur-xl dark:border-gray-700 dark:bg-gray-900/90"
-        >
-            <div>
-                <div class="mb-6 flex items-center justify-between">
-                    <p
-                        class="text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                    >
-                        Navigation
-                    </p>
-                    <button
+            <kList>
+                <div v-for="item in navigation" :key="item.name">
+                    <kListItem
+                        :link="true"
+                        :href="item.to"
                         @click="$emit('close')"
-                        class="rounded-lg p-1.5 text-slate-500 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800"
                     >
-                        <X class="h-5 w-5" />
-                    </button>
+                        <template #media>
+                            <component :is="item.icon" />
+                        </template>
+
+                        <template #title>
+                            {{ item.name }}
+                        </template>
+                    </kListItem>
                 </div>
+            </kList>
 
-                <nav class="space-y-1">
-                    <div v-for="(item, index) in navigation" :key="item.name">
-                        <Link
-                            :href="item.to"
-                            @click="$emit('close')"
-                            class="group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-indigo-50/60 hover:text-indigo-600 dark:text-gray-400 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
-                        >
-                            <component :is="item.icon" class="h-4 w-4" />
-                            <span>{{ item.name }}</span>
-                        </Link>
+            <kBlock>
+                <kListItem link @click="clearCacheDialogOpened = true">
+                    <template #media>
+                        <Database />
+                    </template>
 
-                        <hr
-                            v-if="index < navigation.length - 1"
-                            class="mx-3 my-1 border-slate-200/60 dark:border-gray-700/60"
-                        />
-                    </div>
-                </nav>
-            </div>
+                    <template #title> Clear Cache </template>
+                </kListItem>
 
-            <div class="space-y-3">
-                <Link
-                    method="post"
-                    href="/admin/clear-cache"
-                    as="button"
-                    class="group flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 hover:bg-rose-50/60 dark:text-rose-400 dark:hover:bg-rose-500/10"
-                >
-                    <Database class="h-4 w-4" />
-                    Clear Cache
-                </Link>
-                <Link
-                    method="post"
-                    href="/logout"
-                    as="button"
-                    class="group flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-rose-600 hover:bg-rose-50/60 dark:text-rose-400 dark:hover:bg-rose-500/10"
-                >
-                    <LogOut class="h-4 w-4" />
-                    Logout
-                </Link>
+                <kListItem link @click="logoutDialogOpened = true">
+                    <template #media>
+                        <LogOut />
+                    </template>
+
+                    <template #title> Logout </template>
+                </kListItem>
 
                 <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"
+                    class="px-2 pt-3 text-xs text-slate-400 dark:text-gray-500"
                 >
                     Internal Dashboard
                 </div>
+            </kBlock>
+        </kPage>
+    </kPanel>
+
+    <kDialog
+        :opened="logoutDialogOpened"
+        @opened:change="logoutDialogOpened = $event"
+    >
+        <div class="p-4">
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Confirm Logout
+            </p>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                Are you sure you want to log out?
+            </p>
+            <div class="mt-4 flex justify-end gap-2">
+                <kButton @click="logoutDialogOpened = false">Cancel</kButton>
+                <kButton @click="confirmLogout">Confirm</kButton>
+            </div>
+        </div>
+    </kDialog>
+
+    <kDialog
+        :opened="clearCacheDialogOpened"
+        @opened:change="clearCacheDialogOpened = $event"
+    >
+        <div class="p-4">
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Clear Cache
+            </p>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                Are you sure you want to clear all cache?
+            </p>
+            <div class="mt-4 flex justify-end gap-2">
+                <kButton @click="clearCacheDialogOpened = false"
+                    >Cancel</kButton
+                >
+                <kButton @click="confirmClearCache">Confirm</kButton>
             </div>
         </div>
-    </div>
+    </kDialog>
 </template>
diff --git a/resources/js/components/admin/NodeRow.vue b/resources/js/components/admin/NodeRow.vue
index 359fed7..a9eddfb 100644
--- a/resources/js/components/admin/NodeRow.vue
+++ b/resources/js/components/admin/NodeRow.vue
@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
+import { kDialog, kButton } from 'konsta/vue';
 import { Folder, Pencil, Trash2 } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 const { node } = defineProps({
     node: Object,
 });
 
-const handleDelete = () => {
-    if (confirm('Are you sure you want to delete this Folder?')) {
-        router.delete(`/admin/nodes/${node.id}`);
-    }
+const deleteDialogOpened = ref(false);
+const deleteCallback = ref<() => void>(() => {});
+
+const showDeleteDialog = () => {
+    deleteCallback.value = () => router.delete(`/admin/nodes/${node.id}`);
+    deleteDialogOpened.value = true;
+};
+
+const confirmDelete = () => {
+    deleteDialogOpened.value = false;
+    deleteCallback.value();
 };
 </script>
 
@@ -31,15 +40,10 @@ const handleDelete = () => {
                 <span>Edit</span>
             </Link>
 
-            <button
-                type="button"
-                @click="handleDelete"
-                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-red-500/30 dark:hover:bg-red-500/10 dark:hover:text-red-400"
-                title="Delete Node"
-            >
+            <k-button clear small @click="showDeleteDialog" title="Delete Node">
                 <Trash2 class="h-2.5 w-2.5" :stroke-width="2.2" />
                 <span>Delete</span>
-            </button>
+            </k-button>
         </div>
 
         <div
@@ -57,4 +61,22 @@ const handleDelete = () => {
             </span>
         </div>
     </div>
+
+    <kDialog
+        :opened="deleteDialogOpened"
+        @opened:change="deleteDialogOpened = $event"
+    >
+        <div class="p-4">
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Delete Folder
+            </p>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                Are you sure you want to delete this Folder?
+            </p>
+            <div class="mt-4 flex justify-end gap-2">
+                <kButton @click="deleteDialogOpened = false">Cancel</kButton>
+                <kButton @click="confirmDelete">Delete</kButton>
+            </div>
+        </div>
+    </kDialog>
 </template>
diff --git a/resources/js/components/admin/ResourceRow.vue b/resources/js/components/admin/ResourceRow.vue
index 6e17042..2ee7a10 100644
--- a/resources/js/components/admin/ResourceRow.vue
+++ b/resources/js/components/admin/ResourceRow.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
+import { kDialog, kButton } from 'konsta/vue';
 import {
     Book,
     File,
@@ -9,15 +10,24 @@ import {
     Pencil,
     Trash2,
 } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 const { resource } = defineProps({
     resource: Object,
 });
 
-const handleDelete = () => {
-    if (confirm('Are you sure you want to delete this Resource?')) {
+const deleteDialogOpened = ref(false);
+const deleteCallback = ref<() => void>(() => {});
+
+const showDeleteDialog = () => {
+    deleteCallback.value = () =>
         router.delete(`/admin/resources/${resource.id}`);
-    }
+    deleteDialogOpened.value = true;
+};
+
+const confirmDelete = () => {
+    deleteDialogOpened.value = false;
+    deleteCallback.value();
 };
 </script>
 
@@ -40,15 +50,15 @@ const handleDelete = () => {
                 <span>Edit</span>
             </Link>
 
-            <button
-                type="button"
-                @click="handleDelete"
-                class="inline-flex h-5 items-center gap-1 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-red-500/30 dark:hover:bg-red-500/10 dark:hover:text-red-400"
+            <k-button
+                clear
+                small
+                @click="showDeleteDialog"
                 title="Delete Resource"
             >
                 <Trash2 class="h-2.5 w-2.5" :stroke-width="2.2" />
                 <span>Delete</span>
-            </button>
+            </k-button>
         </div>
 
         <div
@@ -82,4 +92,22 @@ const handleDelete = () => {
             </span>
         </div>
     </div>
+
+    <kDialog
+        :opened="deleteDialogOpened"
+        @opened:change="deleteDialogOpened = $event"
+    >
+        <div class="p-4">
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Delete Resource
+            </p>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                Are you sure you want to delete this Resource?
+            </p>
+            <div class="mt-4 flex justify-end gap-2">
+                <kButton @click="deleteDialogOpened = false">Cancel</kButton>
+                <kButton @click="confirmDelete">Delete</kButton>
+            </div>
+        </div>
+    </kDialog>
 </template>
diff --git a/resources/js/components/admin/SubjectCard.vue b/resources/js/components/admin/SubjectCard.vue
index 4f3f3c6..9032b7f 100644
--- a/resources/js/components/admin/SubjectCard.vue
+++ b/resources/js/components/admin/SubjectCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link, router } from '@inertiajs/vue3';
+import { kDialog, kButton } from 'konsta/vue';
 
 import {
     Search,
@@ -14,6 +15,7 @@ import {
     Pencil,
     Trash2,
 } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 const { subject } = defineProps({
     subject: Object,
@@ -31,10 +33,17 @@ const icons = {
     Search,
 };
 
-const handleDelete = () => {
-    if (confirm('Are you sure you want to delete this Subject?')) {
-        router.delete(`/admin/subjects/${subject.id}`);
-    }
+const deleteDialogOpened = ref(false);
+const deleteCallback = ref<() => void>(() => {});
+
+const showDeleteDialog = () => {
+    deleteCallback.value = () => router.delete(`/admin/subjects/${subject.id}`);
+    deleteDialogOpened.value = true;
+};
+
+const confirmDelete = () => {
+    deleteDialogOpened.value = false;
+    deleteCallback.value();
 };
 </script>
 
@@ -57,15 +66,15 @@ const handleDelete = () => {
                 <span>Edit</span>
             </Link>
 
-            <button
-                type="button"
-                @click="handleDelete"
-                class="inline-flex h-6 items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-500 shadow-sm transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:border-red-500/30 dark:hover:bg-red-500/10 dark:hover:text-red-400"
+            <k-button
+                clear
+                small
+                @click="showDeleteDialog"
                 title="Delete Subject"
             >
                 <Trash2 class="h-3 w-3" :stroke-width="2" />
                 <span>Delete</span>
-            </button>
+            </k-button>
         </div>
 
         <div class="flex flex-col items-start text-left focus:outline-none">
@@ -131,4 +140,22 @@ const handleDelete = () => {
             {{ subject.course }}
         </span>
     </div>
+
+    <kDialog
+        :opened="deleteDialogOpened"
+        @opened:change="deleteDialogOpened = $event"
+    >
+        <div class="p-4">
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Delete Subject
+            </p>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                Are you sure you want to delete this Subject?
+            </p>
+            <div class="mt-4 flex justify-end gap-2">
+                <kButton @click="deleteDialogOpened = false">Cancel</kButton>
+                <kButton @click="confirmDelete">Delete</kButton>
+            </div>
+        </div>
+    </kDialog>
 </template>
diff --git a/resources/js/components/admin/UserRow.vue b/resources/js/components/admin/UserRow.vue
index 05de85d..7187069 100644
--- a/resources/js/components/admin/UserRow.vue
+++ b/resources/js/components/admin/UserRow.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Link, router, usePage } from '@inertiajs/vue3';
+import { kDialog, kButton } from 'konsta/vue';
 import { Trash2 } from 'lucide-vue-next';
+import { ref } from 'vue';
 defineProps({
     user: Object,
 });
@@ -20,10 +22,21 @@ const getRoleBadgeStyles = (role: string) => {
     }
 };
 
-const deleteUser = (id: number) => {
-    if (confirm('Are you sure you want to delete this user?')) {
-        router.delete(`/admin/users/${id}`);
+const deleteDialogOpened = ref(false);
+const deleteUserId = ref<number | null>(null);
+
+const showDeleteDialog = (id: number) => {
+    deleteUserId.value = id;
+    deleteDialogOpened.value = true;
+};
+
+const confirmDelete = () => {
+    if (deleteUserId.value) {
+        router.delete(`/admin/users/${deleteUserId.value}`);
     }
+
+    deleteDialogOpened.value = false;
+    deleteUserId.value = null;
 };
 </script>
 <template>
@@ -99,14 +112,29 @@ const deleteUser = (id: number) => {
                     Edit
                 </Link>
 
-                <button
-                    @click="deleteUser(user.id)"
-                    class="inline-flex items-center justify-center gap-1 rounded-lg border border-red-100 bg-red-50/40 px-3 py-1.5 text-xs font-medium text-red-600 shadow-2xs transition-all hover:bg-red-50 hover:text-red-700 md:border-0 md:bg-transparent md:p-0 md:text-red-500 md:shadow-none md:hover:text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-400 dark:hover:bg-red-500/10 dark:hover:text-red-400 dark:md:bg-transparent dark:md:text-red-400 dark:md:hover:text-red-400"
-                >
+                <k-button clear small @click="showDeleteDialog(user.id)">
                     <Trash2 class="h-3.5 w-3.5" />
                     <span class="md:hidden">Delete</span>
-                </button>
+                </k-button>
             </div>
         </td>
     </tr>
+
+    <kDialog
+        :opened="deleteDialogOpened"
+        @opened:change="deleteDialogOpened = $event"
+    >
+        <div class="p-4">
+            <p class="text-base font-semibold text-gray-900 dark:text-white">
+                Delete User
+            </p>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                Are you sure you want to delete this user?
+            </p>
+            <div class="mt-4 flex justify-end gap-2">
+                <kButton @click="deleteDialogOpened = false">Cancel</kButton>
+                <kButton @click="confirmDelete">Delete</kButton>
+            </div>
+        </div>
+    </kDialog>
 </template>
diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index 99fbab9..c9b861b 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
+import { kPage, kNavbar, kButton } from 'konsta/vue';
 import {
     LayoutDashboard,
     Users,
@@ -11,6 +12,7 @@ import {
 import { ref } from 'vue';
 import DesktopSidebar from '@/components/admin/DesktopSidebar.vue';
 import MobileSideBar from '@/components/admin/MobileSideBar.vue';
+import KonstaProvider from '@/components/KonstaProvider.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import NavBar from '@/components/NavBar.vue';
 import ToastNotification from '@/components/ToastNotification.vue';
@@ -36,62 +38,54 @@ const closeMobileSidebar = () => {
 </script>
 
 <template>
-    <LoadingSpinner />
-    <div
-        class="relative min-h-screen bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white dark:bg-gray-950 dark:text-gray-100"
-    >
-        <div class="pointer-events-none fixed inset-0 z-0 overflow-hidden">
-            <div
-                class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px] dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.06)_0%,rgba(165,180,252,0.02)_50%,transparent_70%)]"
-            ></div>
-            <div
-                class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px] dark:bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.05)_0%,transparent_65%)]"
-            ></div>
-            <div
-                class="absolute -bottom-[10%] -left-[10%] h-[700px] w-[700px] rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.06)_0%,transparent_70%)] blur-[110px] dark:bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.02)_0%,transparent_70%)]"
-            ></div>
-        </div>
+    <KonstaProvider>
+        <LoadingSpinner />
+        <div
+            class="relative min-h-screen bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white dark:bg-gray-950 dark:text-gray-100"
+        >
+            <div class="pointer-events-none fixed inset-0 z-0 overflow-hidden">
+                <div
+                    class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px] dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.06)_0%,rgba(165,180,252,0.02)_50%,transparent_70%)]"
+                ></div>
+                <div
+                    class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px] dark:bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.05)_0%,transparent_65%)]"
+                ></div>
+                <div
+                    class="absolute -bottom-[10%] -left-[10%] h-[700px] w-[700px] rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.06)_0%,transparent_70%)] blur-[110px] dark:bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.02)_0%,transparent_70%)]"
+                ></div>
+            </div>
 
-        <div class="relative z-10 flex min-h-screen flex-col">
-            <NavBar :is-admin="true" />
+            <kPage>
+                <NavBar :is-admin="true" />
 
-            <div
-                class="flex items-center gap-3 border-b border-slate-200/80 bg-white/60 px-4 py-3 backdrop-blur-md md:hidden dark:border-gray-700/80 dark:bg-gray-900/60"
-            >
-                <button
-                    @click="openMobileSidebar"
-                    class="rounded-lg p-1.5 text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800"
-                >
-                    ☰
-                </button>
-                <span
-                    class="text-xs font-semibold tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                    >Dashboard Menu</span
-                >
-            </div>
+                <k-navbar class="lg:hidden">
+                    <template #left>
+                        <k-button clear small @click="openMobileSidebar"
+                            >☰</k-button
+                        >
+                    </template>
+                    <template #title>Dashboard Menu</template>
+                </k-navbar>
 
-            <div class="flex flex-1">
-                <aside
-                    class="hidden w-64 border-r border-slate-200/80 bg-white/40 backdrop-blur-md md:block dark:border-gray-700/80 dark:bg-gray-900/40"
-                >
-                    <div
-                        class="sticky top-16 flex h-[calc(100vh-4rem)] flex-col justify-between p-4"
+                <div class="flex flex-1 gap-6 p-4 lg:p-6">
+                    <aside
+                        class="sticky top-20 hidden h-[calc(100vh-5rem)] w-64 shrink-0 overflow-y-auto rounded-2xl border border-slate-200/80 bg-white/70 p-4 shadow-lg shadow-slate-200/50 backdrop-blur-xl lg:block dark:border-gray-700/60 dark:bg-gray-900/70 dark:shadow-none dark:ring-1 dark:ring-white/5"
                     >
                         <DesktopSidebar :navigation="navigation" />
-                    </div>
-                </aside>
+                    </aside>
 
-                <MobileSideBar
-                    :navigation="navigation"
-                    :is-open="isMobileSidebarOpen"
-                    @close="closeMobileSidebar"
-                />
+                    <MobileSideBar
+                        :navigation="navigation"
+                        :is-open="isMobileSidebarOpen"
+                        @close="closeMobileSidebar"
+                    />
 
-                <main class="flex flex-1 flex-col overflow-x-hidden p-6 lg:p-8">
-                    <slot />
-                </main>
-            </div>
+                    <main class="flex flex-1 flex-col overflow-x-hidden">
+                        <slot />
+                    </main>
+                </div>
+            </kPage>
+            <ToastNotification />
         </div>
-        <ToastNotification />
-    </div>
+    </KonstaProvider>
 </template>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index c0639ae..e57d7e6 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,36 +1,40 @@
 <script setup lang="ts">
+import { kPage } from 'konsta/vue';
 import Footer from '@/components/Footer.vue';
+import KonstaProvider from '@/components/KonstaProvider.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
 import NavBar from '@/components/NavBar.vue';
 import ToastNotification from '@/components/ToastNotification.vue';
 </script>
 
 <template>
-    <LoadingSpinner />
-    <div
-        class="relative min-h-screen bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white dark:bg-gray-950 dark:text-gray-100"
-    >
-        <div class="pointer-events-none fixed inset-0 z-0 overflow-hidden">
-            <div
-                class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px] dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.06)_0%,rgba(165,180,252,0.02)_50%,transparent_70%)]"
-            ></div>
+    <KonstaProvider>
+        <LoadingSpinner />
+        <div
+            class="relative min-h-screen bg-slate-50 font-sans text-slate-900 antialiased selection:bg-indigo-600 selection:text-white dark:bg-gray-950 dark:text-gray-100"
+        >
+            <div class="pointer-events-none fixed inset-0 z-0 overflow-hidden">
+                <div
+                    class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px] dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.06)_0%,rgba(165,180,252,0.02)_50%,transparent_70%)]"
+                ></div>
 
-            <div
-                class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px] dark:bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.05)_0%,transparent_65%)]"
-            ></div>
-            <div
-                class="absolute -bottom-[10%] -left-[10%] h-[700px] w-[700px] rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.06)_0%,transparent_70%)] blur-[110px] dark:bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.02)_0%,transparent_70%)]"
-            ></div>
-        </div>
-
-        <div class="relative z-10 flex min-h-screen flex-col justify-between">
-            <div>
-                <NavBar />
-                <slot />
+                <div
+                    class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px] dark:bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.05)_0%,transparent_65%)]"
+                ></div>
+                <div
+                    class="absolute -bottom-[10%] -left-[10%] h-[700px] w-[700px] rounded-full bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.06)_0%,transparent_70%)] blur-[110px] dark:bg-[radial-gradient(circle_at_center,rgba(244,63,94,0.02)_0%,transparent_70%)]"
+                ></div>
             </div>
 
-            <Footer />
+            <kPage>
+                <div>
+                    <NavBar />
+                    <slot />
+                </div>
+
+                <Footer />
+            </kPage>
+            <ToastNotification />
         </div>
-        <ToastNotification />
-    </div>
+    </KonstaProvider>
 </template>
diff --git a/resources/js/pages/Blog/Index.vue b/resources/js/pages/Blog/Index.vue
index 06e955e..de7b3dc 100644
--- a/resources/js/pages/Blog/Index.vue
+++ b/resources/js/pages/Blog/Index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { router, Link } from '@inertiajs/vue3';
-import { Search, X, ArrowRight, AlertTriangle } from 'lucide-vue-next';
+import { kButton, kSearchbar } from 'konsta/vue';
+import { AlertTriangle } from 'lucide-vue-next';
 import { ref } from 'vue';
 import BlogCard from '@/components/BlogCard.vue';
 
@@ -8,16 +9,10 @@ defineProps({
     blogs: Object,
 });
 
-const searchQuery = ref(
-    new URLSearchParams(window.location.search).get('q') || '',
-);
-
-const handleSearch = () => {
-    router.get('/blogs', { q: searchQuery.value }, { preserveState: true });
-};
+const search = ref(new URLSearchParams(window.location.search).get('q') || '');
 
 const clearSearch = () => {
-    searchQuery.value = '';
+    search.value = '';
     router.get('/blogs', { q: '' });
 };
 </script>
@@ -40,42 +35,12 @@ const clearSearch = () => {
             </div>
 
             <div class="w-full lg:max-w-md">
-                <div class="flex flex-col gap-2.5 sm:flex-row">
-                    <div class="relative flex-1">
-                        <div
-                            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-slate-400 dark:text-gray-500"
-                        >
-                            <Search class="h-5 w-5" />
-                        </div>
-
-                        <input
-                            v-model="searchQuery"
-                            type="text"
-                            placeholder="আর্টিকেল খুঁজুন..."
-                            @keyup.enter="handleSearch"
-                            class="w-full rounded-xl border border-slate-200 py-3 pr-10 pl-11 text-sm text-slate-900 shadow-sm transition-all placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500"
-                        />
-
-                        <button
-                            v-if="searchQuery"
-                            @click="clearSearch"
-                            type="button"
-                            class="absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-400"
-                            aria-label="Clear search"
-                        >
-                            <X class="h-4 w-4" />
-                        </button>
-                    </div>
-
-                    <button
-                        @click="handleSearch"
-                        type="button"
-                        class="inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 active:scale-[0.98]"
-                    >
-                        <span>Search</span>
-                        <ArrowRight class="hidden h-4 w-4 sm:block" />
-                    </button>
-                </div>
+                <k-searchbar
+                    v-model="search"
+                    placeholder="Search blogs..."
+                    :disable-button="false"
+                    @click:clear="clearSearch"
+                />
             </div>
         </div>
 
@@ -99,15 +64,10 @@ const clearSearch = () => {
                 আপনার অনুসন্ধানের সাথে মিল থাকা কোনো আর্টিকেল পাওয়া যায়নি।
             </h3>
             <p class="mt-1 max-w-sm text-sm text-slate-500 dark:text-gray-400">
-                "{{ searchQuery }}"-এর সাথে মিল থাকা কোনো আর্টিকেল পাওয়া
-                যায়নি। বানান যাচাই করুন অথবা অনুসন্ধান মুছে আবার চেষ্টা করুন।
+                "{{ search }}"-এর সাথে মিল থাকা কোনো আর্টিকেল পাওয়া যায়নি।
+                বানান যাচাই করুন অথবা অনুসন্ধান মুছে আবার চেষ্টা করুন।
             </p>
-            <button
-                @click="clearSearch"
-                class="mt-5 inline-flex items-center justify-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:scale-[0.98]"
-            >
-                সব আর্টিকেল দেখুন
-            </button>
+            <k-button @click="clearSearch"> সব আর্টিকেল দেখুন </k-button>
         </div>
 
         <div
diff --git a/resources/js/pages/Blog/Show.vue b/resources/js/pages/Blog/Show.vue
index 7a8dcbb..f1699cc 100644
--- a/resources/js/pages/Blog/Show.vue
+++ b/resources/js/pages/Blog/Show.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link, Head } from '@inertiajs/vue3';
+import { kButton } from 'konsta/vue';
 import { Calendar, User, Eye, ArrowLeft } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
 
@@ -56,13 +57,10 @@ const copyLink = async () => {
 
     <main class="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
         <div class="mb-8">
-            <button
-                @click="goBack"
-                class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600 transition hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-            >
+            <k-button clear @click="goBack">
                 <ArrowLeft class="h-4 w-4" />
-                <span>Back to journal</span>
-            </button>
+                Back to journal
+            </k-button>
         </div>
 
         <article>
@@ -138,12 +136,7 @@ const copyLink = async () => {
                     community.
                 </p>
             </div>
-            <Link
-                href="/join"
-                class="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-                Join us
-            </Link>
+            <k-button fill rounded href="/join"> Join us </k-button>
         </section>
 
         <footer
@@ -173,12 +166,9 @@ const copyLink = async () => {
                 </div>
 
                 <div class="flex gap-3">
-                    <button
-                        @click="copyLink"
-                        class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-indigo-500 hover:text-indigo-600 dark:border-gray-600 dark:text-gray-300 dark:hover:border-indigo-500 dark:hover:text-indigo-400"
-                    >
+                    <k-button @click="copyLink">
                         {{ copied ? 'Copied!' : 'Copy link' }}
-                    </button>
+                    </k-button>
                 </div>
             </div>
         </footer>
diff --git a/resources/js/pages/ContributorGuide.vue b/resources/js/pages/ContributorGuide.vue
index 66316d4..8efa88f 100644
--- a/resources/js/pages/ContributorGuide.vue
+++ b/resources/js/pages/ContributorGuide.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import { kButton } from 'konsta/vue';
 import {
     ArrowLeft,
     UserPlus,
@@ -102,15 +103,10 @@ onUnmounted(() => {
 
 <template>
     <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"
-            />
+        <k-button clear href="/">
+            <ArrowLeft class="h-4 w-4" />
             Back to Home
-        </Link>
+        </k-button>
         <h1
             class="mb-3 text-3xl font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
@@ -230,12 +226,7 @@ onUnmounted(() => {
                             </p>
                         </div>
                     </div>
-                    <Link
-                        href="/join"
-                        class="w-full shrink-0 rounded-xl bg-indigo-600 px-5 py-2.5 text-center text-xs font-bold text-white shadow-sm transition-colors hover:bg-indigo-500 sm:w-auto sm:text-sm"
-                    >
-                        Apply Here
-                    </Link>
+                    <Link href="/join"> Apply Here </Link>
                 </div>
 
                 <p
@@ -719,15 +710,18 @@ onUnmounted(() => {
                     permission প্রয়োজন হলে, সরাসরি WhatsApp-এ যোগাযোগ করুন।
                 </p>
                 <div class="pt-2">
-                    <a
+                    <k-button
+                        fill
+                        rounded
                         href="https://wa.me/8801909131512"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 px-5 py-3 text-xs font-bold text-slate-950 shadow-sm transition-colors hover:bg-emerald-400 sm:w-auto sm:text-sm"
+                        class="w-full sm:w-auto"
+                        style="background-color: #16a34a; color: white"
                     >
                         <MessageCircle class="h-4 w-4" />
                         Chat on WhatsApp
-                    </a>
+                    </k-button>
                 </div>
             </div>
         </div>
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index 8aeca74..aded6cc 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import {} from '@inertiajs/vue3';
+import { kButton, kBlock } from 'konsta/vue';
 import { ref, computed } from 'vue';
 import AIBanner from '@/components/AIBanner.vue';
 import BlogCard from '@/components/BlogCard.vue';
@@ -45,20 +46,12 @@ const filteredSubjects = computed(() => {
             />
         </div>
 
-        <div
-            v-if="filteredSubjects.length === 0"
-            class="rounded-xl border border-dashed border-slate-200 bg-white/50 py-12 text-center dark:border-gray-700 dark:bg-gray-900/50"
-        >
+        <k-block v-if="filteredSubjects.length === 0" strong inset>
             <p class="text-sm font-semibold text-slate-400 dark:text-gray-500">
                 No subjects found matching "{{ searchQuery }}"
             </p>
-            <button
-                @click="searchQuery = ''"
-                class="mt-2 text-xs font-bold text-indigo-600 hover:underline dark:text-indigo-400"
-            >
-                Show all subjects
-            </button>
-        </div>
+            <k-button @click="searchQuery = ''"> Show all subjects </k-button>
+        </k-block>
 
         <div
             v-if="featured_blogs?.length"
@@ -75,17 +68,9 @@ const filteredSubjects = computed(() => {
                         Read our latest articles and updates
                     </p>
                 </div>
-                <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"
-                >
-                    See all articles
-                    <span
-                        class="transition-transform duration-200 group-hover:translate-x-1"
-                    >
-                        →
-                    </span>
-                </Link>
+                <k-button outline rounded href="/blogs">
+                    See all articles →
+                </k-button>
             </div>
 
             <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
diff --git a/resources/js/pages/Node.vue b/resources/js/pages/Node.vue
index 6ca8ee9..e24e61c 100644
--- a/resources/js/pages/Node.vue
+++ b/resources/js/pages/Node.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { kList, kListItem } from 'konsta/vue';
 import { computed } from 'vue';
 
 import BreadcrumbNav from '@/components/BreadcrumbNav.vue';
@@ -48,12 +49,14 @@ const totalItemsCount = computed(
         <div
             class="flex flex-1 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900"
         >
-            <div
-                class="flex items-center justify-between border-b border-slate-100 bg-slate-50 px-5 py-3.5 text-xs font-bold tracking-wider text-slate-400 uppercase sm:px-6 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-500"
-            >
-                <span>Name</span>
-                <span class="hidden sm:inline">Type</span>
-            </div>
+            <k-list class="m-0">
+                <k-list-item
+                    class="border-b border-slate-100 bg-slate-50 text-xs font-bold tracking-wider text-slate-400 uppercase dark:border-gray-800 dark:bg-gray-800 dark:text-gray-500"
+                >
+                    <span>Name</span>
+                    <span class="hidden sm:inline">Type</span>
+                </k-list-item>
+            </k-list>
 
             <div class="flex-1 divide-y divide-slate-100 dark:divide-gray-800">
                 <template v-if="totalItemsCount > 0">
diff --git a/resources/js/pages/Resource.vue b/resources/js/pages/Resource.vue
index 1acb167..0428cc3 100644
--- a/resources/js/pages/Resource.vue
+++ b/resources/js/pages/Resource.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
+import { kButton, kBadge, kPage, kNavbar, kNavbarBackLink } from 'konsta/vue';
 import {
     FileText,
     Image as ImageIcon,
@@ -169,124 +170,114 @@ const parseYoutubeUrl = (url) => {
 </script>
 
 <template>
-    <div
-        class="mx-auto flex min-h-[75vh] max-w-4xl flex-col justify-start px-4 pt-4 pb-20 sm:px-6 sm:pt-4"
-    >
-        <div class="mb-2">
-            <button
-                @click="handleBack"
-                class="group 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-4 w-4 transition-transform duration-200 group-hover:-translate-x-0.5"
-                />
-                Back
-            </button>
-        </div>
-
+    <k-page>
+        <k-navbar>
+            <template #left>
+                <k-navbar-back-link text="Back" @click="router.back()" />
+            </template>
+            <template #title>
+                {{ resource.title }}
+            </template>
+        </k-navbar>
         <div
-            class="w-full overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900"
+            class="mx-auto flex min-h-[75vh] max-w-4xl flex-col justify-start px-4 pt-4 pb-20 sm:px-6 sm:pt-4"
         >
+            <div class="mb-2">
+                <k-button clear small @click="handleBack" class="group">
+                    <ArrowLeft
+                        class="h-4 w-4 transition-transform duration-200 group-hover:-translate-x-0.5"
+                    />
+                    Back
+                </k-button>
+            </div>
+
             <div
-                class="border-b border-slate-100 bg-slate-50/50 p-5 sm:p-6 dark:border-gray-800 dark:bg-gray-800/50"
+                class="w-full overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900"
             >
                 <div
-                    class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
+                    class="border-b border-slate-100 bg-slate-50/50 p-5 sm:p-6 dark:border-gray-800 dark:bg-gray-800/50"
                 >
-                    <div class="min-w-0">
-                        <span
-                            class="inline-flex items-center gap-1.5 rounded-md bg-slate-100 px-2 py-1 text-xs font-bold tracking-wider text-slate-600 uppercase dark:bg-gray-800 dark:text-gray-400"
-                        >
-                            <FileText
-                                v-if="resource.resource_type === 'note'"
-                                class="h-3 w-3"
-                            />
-                            <ImageIcon
-                                v-else-if="resource.resource_type === 'image'"
-                                class="h-3 w-3"
-                            />
-                            <FilePlay
-                                v-else-if="resource.resource_type === 'video'"
-                                class="h-3 w-3"
-                            />
-
-                            <Download v-else class="h-3 w-3" />
-                            {{ resource.resource_type }}
-                        </span>
-
-                        <h1
-                            class="mt-2 text-xl font-black tracking-tight text-slate-950 sm:text-2xl dark:text-gray-100"
-                        >
-                            {{ resource.title }}
-                        </h1>
-
-                        <Link
-                            v-if="resource.user?.name"
-                            :href="`/about-us#${resource.user.id}`"
-                            class="group mt-2 inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 transition-all hover:bg-indigo-50 hover:text-indigo-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
-                        >
-                            <User
-                                class="h-3.5 w-3.5 stroke-[2.2] text-slate-500 group-hover:text-indigo-600 dark:text-gray-400 dark:group-hover:text-indigo-400"
-                            />
-                            <span>
-                                Shared by
-                                <span
-                                    class="font-bold text-indigo-600 group-hover:underline dark:text-indigo-400"
-                                >
-                                    {{ resource.user.name }}
-                                </span>
-                            </span>
-                        </Link>
-                    </div>
-
                     <div
-                        v-if="resource.resource_type === 'image'"
-                        class="flex items-center gap-2 self-start sm:self-center"
+                        class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
                     >
-                        <a
-                            v-if="resource.file_url"
-                            :href="resource.file_url"
-                            download
-                            target="_blank"
-                            class="inline-flex h-9 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.98] dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
-                        >
-                            <Download class="h-4 w-4 stroke-[2.2]" />
-                            Download
-                        </a>
+                        <div class="min-w-0">
+                            <k-badge outline>
+                                <FileText
+                                    v-if="resource.resource_type === 'note'"
+                                    class="h-3 w-3"
+                                />
+                                <ImageIcon
+                                    v-else-if="
+                                        resource.resource_type === 'image'
+                                    "
+                                    class="h-3 w-3"
+                                />
+                                <FilePlay
+                                    v-else-if="
+                                        resource.resource_type === 'video'
+                                    "
+                                    class="h-3 w-3"
+                                />
+
+                                <Download v-else class="h-3 w-3" />
+                                {{ resource.resource_type }}
+                            </k-badge>
+
+                            <h1
+                                class="mt-2 text-xl font-black tracking-tight text-slate-950 sm:text-2xl dark:text-gray-100"
+                            >
+                                {{ resource.title }}
+                            </h1>
+
+                            <Link
+                                v-if="resource.user?.name"
+                                :href="`/about-us#${resource.user.id}`"
+                                class="group mt-2 inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 transition-all hover:bg-indigo-50 hover:text-indigo-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-400"
+                            >
+                                <User
+                                    class="h-3.5 w-3.5 stroke-[2.2] text-slate-500 group-hover:text-indigo-600 dark:text-gray-400 dark:group-hover:text-indigo-400"
+                                />
+                                <span>
+                                    Shared by
+                                    <span
+                                        class="font-bold text-indigo-600 group-hover:underline dark:text-indigo-400"
+                                    >
+                                        {{ resource.user.name }}
+                                    </span>
+                                </span>
+                            </Link>
+                        </div>
 
-                        <button
-                            @click="toggleFullscreen"
-                            class="inline-flex h-9 items-center gap-2 rounded-xl bg-indigo-600 px-4 text-xs font-bold text-white shadow-sm transition-all hover:bg-indigo-700 active:scale-[0.98]"
-                            title="View Fullscreen"
+                        <div
+                            v-if="resource.resource_type === 'image'"
+                            class="flex items-center gap-2 self-start sm:self-center"
                         >
-                            <Maximize2 class="h-4 w-4 stroke-[2.2]" />
-                            Full Screen
-                        </button>
+                            <k-button
+                                v-if="resource.file_url"
+                                fill
+                                rounded
+                                :href="resource.file_url"
+                                download
+                                target="_blank"
+                            >
+                                <Download class="h-4 w-4 stroke-[2.2]" />
+                                Download
+                            </k-button>
+
+                            <k-button
+                                @click="toggleFullscreen"
+                                title="View Fullscreen"
+                            >
+                                <Maximize2 class="h-4 w-4 stroke-[2.2]" />
+                                Full Screen
+                            </k-button>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div v-if="resource.resource_type === 'note'" class="p-6 sm:p-8">
-                <div
-                    class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base dark:text-gray-300"
-                >
-                    <h3
-                        class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase dark:text-gray-500"
-                    >
-                        Note:
-                    </h3>
-                    <p
-                        class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900 dark:selection:bg-indigo-500/30 dark:selection:text-indigo-300"
-                    >
-                        {{ resource.content }}
-                    </p>
-                </div>
-            </div>
 
-            <div v-else-if="resource.resource_type === 'image'">
                 <div
-                    v-if="resource.content"
-                    class="border-b border-slate-100 bg-white p-6 sm:p-8 dark:border-gray-800 dark:bg-gray-900"
+                    v-if="resource.resource_type === 'note'"
+                    class="p-6 sm:p-8"
                 >
                     <div
                         class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base dark:text-gray-300"
@@ -304,165 +295,188 @@ const parseYoutubeUrl = (url) => {
                     </div>
                 </div>
 
-                <div
-                    class="flex justify-center bg-slate-950/5 p-4 sm:p-8 dark:bg-white/10"
-                >
+                <div v-else-if="resource.resource_type === 'image'">
                     <div
-                        class="relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-shadow duration-300 hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
+                        v-if="resource.content"
+                        class="border-b border-slate-100 bg-white p-6 sm:p-8 dark:border-gray-800 dark:bg-gray-900"
                     >
-                        <img
-                            :src="resource.file_url"
-                            :alt="resource.title"
-                            class="max-h-[70vh] w-auto object-contain select-none"
-                        />
+                        <div
+                            class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base dark:text-gray-300"
+                        >
+                            <h3
+                                class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase dark:text-gray-500"
+                            >
+                                Note:
+                            </h3>
+                            <p
+                                class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900 dark:selection:bg-indigo-500/30 dark:selection:text-indigo-300"
+                            >
+                                {{ resource.content }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div
+                        class="flex justify-center bg-slate-950/5 p-4 sm:p-8 dark:bg-white/10"
+                    >
+                        <div
+                            class="relative overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition-shadow duration-300 hover:shadow-md dark:border-gray-700 dark:bg-gray-900"
+                        >
+                            <img
+                                :src="resource.file_url"
+                                :alt="resource.title"
+                                class="max-h-[70vh] w-auto object-contain select-none"
+                            />
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div v-else-if="resource.resource_type === 'video'">
-                <div
-                    v-if="resource.content"
-                    class="border-b border-slate-100 bg-white p-6 sm:p-8 dark:border-gray-800 dark:bg-gray-900"
-                >
+                <div v-else-if="resource.resource_type === 'video'">
                     <div
-                        class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base dark:text-gray-300"
+                        v-if="resource.content"
+                        class="border-b border-slate-100 bg-white p-6 sm:p-8 dark:border-gray-800 dark:bg-gray-900"
                     >
-                        <h3
-                            class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase dark:text-gray-500"
+                        <div
+                            class="prose max-w-none text-sm leading-relaxed font-medium text-slate-700 sm:text-base dark:text-gray-300"
                         >
-                            Note:
-                        </h3>
-                        <p
-                            class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900 dark:selection:bg-indigo-500/30 dark:selection:text-indigo-300"
+                            <h3
+                                class="mb-2 text-xs font-black tracking-wider text-slate-400 uppercase dark:text-gray-500"
+                            >
+                                Note:
+                            </h3>
+                            <p
+                                class="whitespace-pre-line selection:bg-indigo-100 selection:text-indigo-900 dark:selection:bg-indigo-500/30 dark:selection:text-indigo-300"
+                            >
+                                This content is hosted on YouTube by the
+                                original creator. We have embedded it here for
+                                educational reference only.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="bg-slate-950/5 p-4 sm:p-8 dark:bg-white/10">
+                        <div
+                            class="relative aspect-video w-full overflow-hidden rounded-xl border border-slate-200 bg-black shadow-sm dark:border-gray-700"
                         >
-                            This content is hosted on YouTube by the original
-                            creator. We have embedded it here for educational
-                            reference only.
-                        </p>
+                            <iframe
+                                :src="parseYoutubeUrl(resource.file_url)"
+                                :title="resource.title"
+                                class="absolute inset-0 h-full w-full"
+                                allow="
+                                    accelerometer;
+                                    autoplay;
+                                    clipboard-write;
+                                    encrypted-media;
+                                    gyroscope;
+                                    picture-in-picture;
+                                    web-share;
+                                "
+                                allowfullscreen
+                            ></iframe>
+                        </div>
                     </div>
                 </div>
-
-                <div class="bg-slate-950/5 p-4 sm:p-8 dark:bg-white/10">
+                <div v-else class="p-6 text-center sm:p-10">
                     <div
-                        class="relative aspect-video w-full overflow-hidden rounded-xl border border-slate-200 bg-black shadow-sm dark:border-gray-700"
+                        class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl border border-amber-200 bg-amber-50 text-amber-600 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400"
                     >
-                        <iframe
-                            :src="parseYoutubeUrl(resource.file_url)"
-                            :title="resource.title"
-                            class="absolute inset-0 h-full w-full"
-                            allow="
-                                accelerometer;
-                                autoplay;
-                                clipboard-write;
-                                encrypted-media;
-                                gyroscope;
-                                picture-in-picture;
-                                web-share;
-                            "
-                            allowfullscreen
-                        ></iframe>
+                        <AlertCircle class="h-6 w-6 stroke-[2.2]" />
                     </div>
-                </div>
-            </div>
-            <div v-else class="p-6 text-center sm:p-10">
-                <div
-                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl border border-amber-200 bg-amber-50 text-amber-600 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400"
-                >
-                    <AlertCircle class="h-6 w-6 stroke-[2.2]" />
-                </div>
 
-                <h3
-                    class="mt-4 text-base font-bold text-slate-900 dark:text-gray-100"
-                >
-                    Unsupported Preview:
-                    <span
-                        class="text-indigo-600 capitalize dark:text-indigo-400"
-                        >{{ resource.resource_type }}</span
-                    >
-                </h3>
-                <p
-                    class="mx-auto mt-2 max-w-sm text-xs font-medium text-slate-500 sm:text-sm dark:text-gray-400"
-                >
-                    The file can't be shown here. Please download.
-                </p>
-
-                <div class="mt-6 flex justify-center">
-                    <a
-                        v-if="resource.file_url"
-                        :href="resource.file_url"
-                        download
-                        target="_blank"
-                        class="inline-flex touch-manipulation items-center gap-2 rounded-xl bg-indigo-600 px-5 py-3 text-xs font-bold text-white shadow-sm transition-all duration-200 hover:bg-indigo-700 active:scale-[0.98]"
+                    <h3
+                        class="mt-4 text-base font-bold text-slate-900 dark:text-gray-100"
                     >
-                        <Download class="h-4 w-4 stroke-[2.5]" />
-                        Download
-                    </a>
-                    <div
-                        v-else
-                        class="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-4 py-2 text-xs font-semibold text-slate-400 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-500"
+                        Unsupported Preview:
+                        <span
+                            class="text-indigo-600 capitalize dark:text-indigo-400"
+                            >{{ resource.resource_type }}</span
+                        >
+                    </h3>
+                    <p
+                        class="mx-auto mt-2 max-w-sm text-xs font-medium text-slate-500 sm:text-sm dark:text-gray-400"
                     >
-                        No download target generated for this asset.
+                        The file can't be shown here. Please download.
+                    </p>
+
+                    <div class="mt-6 flex justify-center">
+                        <k-button
+                            v-if="resource.file_url"
+                            fill
+                            rounded
+                            :href="resource.file_url"
+                            download
+                            target="_blank"
+                        >
+                            <Download class="h-4 w-4 stroke-[2.5]" />
+                            Download
+                        </k-button>
+                        <div
+                            v-else
+                            class="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-4 py-2 text-xs font-semibold text-slate-400 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-500"
+                        >
+                            No download target generated for this asset.
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <!-- User Friendly Sticky Floating Navigation Strip -->
-    <div
-        class="pointer-events-none fixed inset-x-0 bottom-0 z-40 bg-gradient-to-t from-slate-900/10 via-slate-900/5 to-transparent pt-10 pb-6"
-    >
-        <div class="pointer-events-auto mx-auto max-w-4xl px-4 sm:px-6">
-            <div
-                class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/90 p-3 shadow-xl backdrop-blur-md dark:border-gray-700/80 dark:bg-gray-900/90"
-            >
-                <div>
-                    <Link
-                        v-if="previousResourceId"
-                        :href="`/resources/${previousResourceId}`"
-                        replace
-                        class="group inline-flex h-10 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.97] dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
-                    >
-                        <ArrowLeft
-                            class="h-4 w-4 transition-transform duration-200 group-hover:-translate-x-0.5"
-                        />
-                        <span class="xs:inline hidden">Previous Page</span>
-                        <span class="xs:hidden">Prev Page</span>
-                    </Link>
-                    <span
-                        v-else
-                        class="inline-flex h-10 items-center px-4 text-xs font-bold text-slate-300 select-none dark:text-gray-600"
-                        >First Page</span
-                    >
-                </div>
 
+        <!-- User Friendly Sticky Floating Navigation Strip -->
+        <div
+            class="pointer-events-none fixed inset-x-0 bottom-0 z-40 bg-gradient-to-t from-slate-900/10 via-slate-900/5 to-transparent pt-10 pb-6"
+        >
+            <div class="pointer-events-auto mx-auto max-w-4xl px-4 sm:px-6">
                 <div
-                    class="hidden text-[11px] font-bold tracking-wider text-slate-400 uppercase select-none sm:block dark:text-gray-500"
+                    class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white/90 p-3 shadow-xl backdrop-blur-md dark:border-gray-700/80 dark:bg-gray-900/90"
                 >
-                    Quick Navigation
-                </div>
+                    <div>
+                        <k-button
+                            v-if="previousResourceId"
+                            outline
+                            rounded
+                            :href="`/resources/${previousResourceId}`"
+                        >
+                            <ArrowLeft
+                                class="h-4 w-4 transition-transform duration-200 group-hover:-translate-x-0.5"
+                            />
+                            <span class="xs:inline hidden">Previous Page</span>
+                            <span class="xs:hidden">Prev Page</span>
+                        </k-button>
+                        <span
+                            v-else
+                            class="inline-flex h-10 items-center px-4 text-xs font-bold text-slate-300 select-none dark:text-gray-600"
+                            >First Page</span
+                        >
+                    </div>
 
-                <div>
-                    <Link
-                        v-if="nextResourceId"
-                        :href="`/resources/${nextResourceId}`"
-                        replace
-                        class="group inline-flex h-10 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-xs font-bold text-slate-700 shadow-sm transition-all hover:bg-slate-50 hover:text-indigo-600 active:scale-[0.97] dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-indigo-400"
-                    >
-                        <span class="xs:inline hidden">Next Page</span>
-                        <span class="xs:hidden">Next Page</span>
-                        <ArrowRight
-                            class="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5"
-                        />
-                    </Link>
-                    <span
-                        v-else
-                        class="inline-flex h-10 items-center px-4 text-xs font-bold text-slate-300 select-none dark:text-gray-600"
-                        >Last Page</span
+                    <div
+                        class="hidden text-[11px] font-bold tracking-wider text-slate-400 uppercase select-none sm:block dark:text-gray-500"
                     >
+                        Quick Navigation
+                    </div>
+
+                    <div>
+                        <k-button
+                            v-if="nextResourceId"
+                            outline
+                            rounded
+                            :href="`/resources/${nextResourceId}`"
+                        >
+                            <span class="xs:inline hidden">Next Page</span>
+                            <span class="xs:hidden">Next Page</span>
+                            <ArrowRight
+                                class="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5"
+                            />
+                        </k-button>
+                        <span
+                            v-else
+                            class="inline-flex h-10 items-center px-4 text-xs font-bold text-slate-300 select-none dark:text-gray-600"
+                            >Last Page</span
+                        >
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    </k-page>
 
     <Teleport to="body">
         <div
@@ -486,22 +500,17 @@ const parseYoutubeUrl = (url) => {
                     <span>Drag to Pan</span>
                 </div>
 
-                <button
+                <k-button
                     v-if="scale > 1"
                     @click="resetZoom"
-                    class="rounded-full bg-white/10 p-3 text-white backdrop-blur-md transition-all hover:bg-white/20 active:scale-95 dark:bg-gray-900/10 dark:hover:bg-gray-900/20"
                     title="Reset Zoom"
                 >
                     <RotateCcw class="h-5 w-5" />
-                </button>
+                </k-button>
 
-                <button
-                    @click="toggleFullscreen"
-                    class="rounded-full bg-white/10 p-3 text-white backdrop-blur-md transition-all hover:bg-white/20 active:scale-95 dark:bg-gray-900/10 dark:hover:bg-gray-900/20"
-                    title="Exit Fullscreen"
-                >
+                <k-button @click="toggleFullscreen" title="Exit Fullscreen">
                     <Minimize2 class="h-5 w-5" />
-                </button>
+                </k-button>
             </div>
 
             <img
diff --git a/resources/js/pages/Support.vue b/resources/js/pages/Support.vue
index ea21713..9b39847 100644
--- a/resources/js/pages/Support.vue
+++ b/resources/js/pages/Support.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import {} from '@inertiajs/vue3';
+import { kButton, kCard } from 'konsta/vue';
 import {
     ArrowLeft,
     Heart,
@@ -16,15 +17,12 @@ const supportUrl = 'https://supportkori.com/hscstack';
 
 <template>
     <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"
-        >
+        <k-button clear href="/">
             <ArrowLeft
                 class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
             />
             Back to Home
-        </Link>
+        </k-button>
         <h1
             class="mb-4 text-4xl leading-tight font-black tracking-tight text-slate-950 sm:text-5xl dark:text-gray-100"
         >
@@ -41,9 +39,7 @@ const supportUrl = 'https://supportkori.com/hscstack';
     <main class="mx-auto max-w-3xl px-4 pb-20 sm:px-6">
         <div class="space-y-8">
             <!-- Hero Support Card -->
-            <div
-                class="relative overflow-hidden rounded-xl border border-indigo-100 bg-gradient-to-br from-indigo-50/50 via-white to-slate-50 p-6 shadow-sm sm:p-8 dark:border-indigo-500/30 dark:from-indigo-500/10 dark:via-gray-900 dark:to-gray-950"
-            >
+            <k-card outline>
                 <div class="flex flex-col items-center text-center">
                     <div
                         class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-md shadow-indigo-200 dark:shadow-indigo-500/40"
@@ -61,33 +57,34 @@ const supportUrl = 'https://supportkori.com/hscstack';
                         class="mt-2 max-w-xl text-sm leading-relaxed font-medium text-slate-600 dark:text-gray-400"
                     >
                         HSCStack শিক্ষার্থীদের দ্বারা নির্মিত একটি অলাভজনক
-                        উদ্যোগ। HSC ও SSC শিক্ষার্থীদের পড়াশোনা সহজ করতে আমরা
+                        উদ্যোগ। HSC ও SSC শিক্ষার্থীদের পড়াশোনা সহজ করতে আমরা
                         কোনো সাবস্ক্রিপশন ফি বা বিরক্তিকর পপ-আপ অ্যাড রাখি না।
                         আপনার সহযোগিতা আমাদের সার্ভার ও ডোমেইন খরচ চালাতে
                         সাহায্য করবে।
                     </p>
 
-                    <a
+                    <k-button
+                        fill
+                        rounded
+                        large
                         :href="supportUrl"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-sm font-bold text-white shadow-md shadow-indigo-200 transition-all hover:bg-indigo-700 hover:shadow-lg active:scale-95 dark:shadow-indigo-500/40 dark:hover:shadow-indigo-500/50"
+                        class="mt-6"
                     >
                         <Heart class="h-4 w-4 stroke-[2.2]" />
                         Support Us on SupportKori
                         <ExternalLink class="h-4 w-4 stroke-[2.2]" />
-                    </a>
+                    </k-button>
                 </div>
-            </div>
+            </k-card>
 
             <!-- Detailed Breakdown -->
-            <div
-                class="space-y-8 rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-700 dark:bg-gray-900"
-            >
+            <k-card outline>
                 <h3
                     class="border-b border-slate-100 pb-4 text-base font-bold text-slate-900 dark:border-gray-800 dark:text-gray-100"
                 >
-                    কেন আপনার সাপোর্ট প্রয়োজন?
+                    কেন আপনার সাপোর্ট প্রয়োজন?
                 </h3>
 
                 <!-- Reason 1: Server Costs -->
@@ -106,9 +103,10 @@ const supportUrl = 'https://supportkori.com/hscstack';
                         <p
                             class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                         >
-                            হাজার হাজার শিক্ষার্থী যেন একসাথে কোনো লেগ ছাড়া নোট,
-                            সাজেশন ও ভিডিও দেখতে পারে, সেজন্য আমাদের নির্ভরযোগ্য
-                            ও দ্রুতগতির Cloud Hosting ব্যবহার করতে হয়।
+                            হাজার হাজার শিক্ষার্থী যেন একসাথে কোনো লেগ ছাড়া
+                            নোট, সাজেশন ও ভিডিও দেখতে পারে, সেজন্য আমাদের
+                            নির্ভরযোগ্য ও দ্রুতগতির Cloud Hosting ব্যবহার করতে
+                            হয়।
                         </p>
                     </div>
                 </div>
@@ -129,9 +127,9 @@ const supportUrl = 'https://supportkori.com/hscstack';
                         <p
                             class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                         >
-                            ওয়েবসাইটের ডোমেইন নেম নবায়ন, সিকিউরিটি সার্টিফিকেট
-                            (SSL) এবং ব্যাকআপ সিস্টেম সচল রাখতে নিয়মিত বাৎসরিক
-                            খরচের প্রয়োজন হয়।
+                            ওয়েবসাইটের ডোমেইন নেম নবায়ন, সিকিউরিটি সার্টিফিকেট
+                            (SSL) এবং ব্যাকআপ সিস্টেম সচল রাখতে নিয়মিত বাৎসরিক
+                            খরচের প্রয়োজন হয়।
                         </p>
                     </div>
                 </div>
@@ -152,10 +150,10 @@ const supportUrl = 'https://supportkori.com/hscstack';
                         <p
                             class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                         >
-                            আমরা ওয়েবসাইটে কোনো গুগল অ্যাড বা থার্ড-পার্টি
-                            বিজ্ঞাপন দেখাই না, যাতে পড়ালেখার সময়ে শিক্ষার্থীদের
-                            মনোযোগ নষ্ট না হয়। আপনাদের সহায়তাই আমাদের স্বাবলম্বী
-                            রাখে।
+                            আমরা ওয়েবসাইটে কোনো গুগল অ্যাড বা থার্ড-পার্টি
+                            বিজ্ঞাপন দেখাই না, যাতে পড়ালেখার সময়ে
+                            শিক্ষার্থীদের মনোযোগ নষ্ট না হয়। আপনাদের সহায়তাই
+                            আমাদের স্বাবলম্বী রাখে।
                         </p>
                     </div>
                 </div>
@@ -173,14 +171,14 @@ const supportUrl = 'https://supportkori.com/hscstack';
                         <h4
                             class="text-base font-bold text-slate-900 dark:text-gray-100"
                         >
-                            স্বচ্ছতা ও নিশ্চয়তা
+                            স্বচ্ছতা ও নিশ্চয়তা
                         </h4>
                         <p
                             class="mt-1.5 text-sm leading-relaxed font-medium text-slate-500 dark:text-gray-400"
                         >
                             সংগৃহীত প্রতিটি টাকা শুধুমাত্র HSCStack-এর অবকাঠামো
-                            উন্নয়ন, সার্ভার খরচ এবং ব্যাকএন্ড টেকনোলজি
-                            মেইনটেন্যান্সে ব্যয় করা হয়।
+                            উন্নয়ন, সার্ভার খরচ এবং ব্যাকএন্ড টেকনোলজি
+                            মেইনটেন্যান্সে ব্যয় করা হয়।
                         </p>
                     </div>
                 </div>
@@ -196,7 +194,7 @@ const supportUrl = 'https://supportkori.com/hscstack';
                         <h4
                             class="text-base font-bold text-slate-900 dark:text-gray-100"
                         >
-                            অর্থনৈতিক সাহায্য ছাড়াও যেভাবে পাশে থাকতে পারেন
+                            অর্থনৈতিক সাহায্য ছাড়াও যেভাবে পাশে থাকতে পারেন
                         </h4>
                         <ul
                             class="mt-2 list-disc space-y-1.5 pl-5 text-sm font-medium text-slate-500 dark:text-gray-400"
@@ -204,9 +202,9 @@ const supportUrl = 'https://supportkori.com/hscstack';
                             <li>
                                 <strong
                                     class="text-slate-700 dark:text-gray-300"
-                                    >শেয়ার করুন:</strong
+                                    >শেয়ার করুন:</strong
                                 >
-                                আপনার সহপাঠী ও বন্ধুদের মাঝে HSCStack শেয়ার করে
+                                আপনার সহপাঠী ও বন্ধুদের মাঝে HSCStack শেয়ার করে
                                 দিন।
                             </li>
                             <li>
@@ -222,35 +220,33 @@ const supportUrl = 'https://supportkori.com/hscstack';
                                     class="text-slate-700 dark:text-gray-300"
                                     >ফিডব্যাক দিন:</strong
                                 >
-                                ওয়েবসাইটের কোনো সমস্যা চোখে পড়লে আমাদের জানান।
+                                ওয়েবসাইটের কোনো সমস্যা চোখে পড়লে আমাদের জানান।
                             </li>
                         </ul>
                     </div>
                 </div>
-            </div>
+            </k-card>
 
             <!-- Bottom CTA Card -->
-            <div
-                class="rounded-xl border border-slate-200 bg-white p-6 text-center shadow-sm dark:border-gray-700 dark:bg-gray-900"
-            >
+            <k-card outline>
                 <p
                     class="text-sm font-bold text-slate-900 sm:text-base dark:text-gray-100"
                 >
-                    আপনার যেকোনো ছোট সাহায্যও আমাদের এই যাত্রাকে দীর্ঘস্থায়ী
+                    আপনার যেকোনো ছোট সাহায্যও আমাদের এই যাত্রাকে দীর্ঘস্থায়ী
                     করতে পারে ❤️
                 </p>
                 <div class="mt-4">
-                    <a
+                    <k-button
+                        clear
                         :href="supportUrl"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="inline-flex items-center gap-1.5 text-xs font-bold text-indigo-600 transition-colors hover:text-indigo-700 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
                         Go to SupportKori payment page
                         <ExternalLink class="h-3.5 w-3.5" />
-                    </a>
+                    </k-button>
                 </div>
-            </div>
+            </k-card>
         </div>
     </main>
 </template>
diff --git a/resources/js/pages/admin/Blog.vue b/resources/js/pages/admin/Blog.vue
index 31fc3e5..1a0293c 100644
--- a/resources/js/pages/admin/Blog.vue
+++ b/resources/js/pages/admin/Blog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import {} from '@inertiajs/vue3';
+import { kBlock, kBlockTitle, kBadge, kButton } from 'konsta/vue';
 import { Plus } from 'lucide-vue-next';
 import BlogRow from '@/components/BlogRow.vue';
 import EmptyState from '@/components/EmptyState.vue';
@@ -13,41 +14,30 @@ defineProps({
 </script>
 
 <template>
-    <div
-        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
-    >
+    <kBlock>
         <div
             class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
         >
             <div>
-                <h3
-                    class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100"
-                >
-                    Manage Blogs
-                </h3>
+                <kBlockTitle> Manage Blogs </kBlockTitle>
                 <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                     View, organize, and publish your blog articles.
                 </p>
             </div>
 
             <div class="flex items-center gap-3 self-start sm:self-center">
-                <div
-                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 dark:border-blue-500/30 dark:bg-blue-500/10"
-                >
+                <kBadge>
                     <span
                         class="text-xs font-medium text-blue-700 dark:text-blue-400"
                     >
                         Total: {{ blogs.length }}
                     </span>
-                </div>
+                </kBadge>
 
-                <Link
-                    href="/admin/blogs/create"
-                    class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-1.5 text-xs font-medium text-white shadow-sm transition-colors duration-150 hover:bg-blue-700"
-                >
+                <k-button fill rounded href="/admin/blogs/create">
                     <Plus class="h-3.5 w-3.5" :stroke-width="2.5" />
                     Create Blog
-                </Link>
+                </k-button>
             </div>
         </div>
 
@@ -62,5 +52,5 @@ defineProps({
 
             <EmptyState v-else />
         </div>
-    </div>
+    </kBlock>
 </template>
diff --git a/resources/js/pages/admin/BlogCreateOrEdit.vue b/resources/js/pages/admin/BlogCreateOrEdit.vue
index 99ce6ef..44102f4 100644
--- a/resources/js/pages/admin/BlogCreateOrEdit.vue
+++ b/resources/js/pages/admin/BlogCreateOrEdit.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link, useForm } from '@inertiajs/vue3';
+import { kCheckbox, kButton, kBlockTitle } from 'konsta/vue';
 import { Upload } from 'lucide-vue-next';
 import HTMLEditor from '@/components/HTMLEditor.vue';
 
@@ -49,11 +50,9 @@ const submitForm = () => {
                 class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1
-                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                    >
+                    <kBlockTitle>
                         {{ props.blog ? 'Edit' : 'Create' }} Blog Post
-                    </h1>
+                    </kBlockTitle>
                     <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Compose and manage article content for your web
                         application audience.
@@ -64,21 +63,15 @@ const submitForm = () => {
             <form @submit.prevent="submitForm" class="space-y-6">
                 <div>
                     <label
-                        for="title"
                         class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >Blog Title</label
                     >
                     <input
-                        v-model="form.title"
                         type="text"
-                        id="title"
+                        :value="form.title"
+                        @input="form.title = $event.target.value"
                         placeholder="e.g. 10 Tips for Cracking BUET"
-                        class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
-                        :class="
-                            form.errors.title
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
+                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                     />
                     <p
                         v-if="form.errors.title"
@@ -142,21 +135,15 @@ const submitForm = () => {
 
                 <div>
                     <label
-                        for="seo_tags"
                         class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >SEO Tags (Comma separated)</label
                     >
                     <input
-                        v-model="form.seo_tags"
                         type="text"
-                        id="seo_tags"
+                        :value="form.seo_tags"
+                        @input="form.seo_tags = $event.target.value"
                         placeholder="e.g. admission, news, tips"
-                        class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
-                        :class="
-                            form.errors.seo_tags
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
+                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                     />
                     <p
                         v-if="form.errors.seo_tags"
@@ -170,10 +157,9 @@ const submitForm = () => {
                     class="flex flex-wrap gap-6 rounded-xl border border-slate-100 bg-slate-50/50 p-4 dark:border-gray-800 dark:bg-gray-800/50"
                 >
                     <label class="flex cursor-pointer items-center gap-2.5">
-                        <input
-                            v-model="form.is_published"
-                            type="checkbox"
-                            class="h-4.5 w-4.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500/20 dark:border-gray-600"
+                        <k-checkbox
+                            :checked="form.is_published"
+                            @change="form.is_published = $event.target.checked"
                         />
                         <div>
                             <span
@@ -188,10 +174,9 @@ const submitForm = () => {
                     </label>
 
                     <label class="flex cursor-pointer items-center gap-2.5">
-                        <input
-                            v-model="form.is_featured"
-                            type="checkbox"
-                            class="h-4.5 w-4.5 rounded border-slate-300 text-blue-600 focus:ring-blue-500/20 dark:border-gray-600"
+                        <k-checkbox
+                            :checked="form.is_featured"
+                            @change="form.is_featured = $event.target.checked"
                         />
                         <div>
                             <span
@@ -229,19 +214,12 @@ const submitForm = () => {
                 <div
                     class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
                 >
-                    <Link
-                        href="/admin/blogs"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        Cancel
+                    <Link href="/admin/blogs">
+                        <k-button clear>Cancel</k-button>
                     </Link>
-                    <button
-                        type="submit"
-                        :disabled="form.processing"
-                        class="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                    >
+                    <k-button type="submit" fill :disabled="form.processing">
                         {{ form.processing ? 'Saving...' : 'Save Blog' }}
-                    </button>
+                    </k-button>
                 </div>
             </form>
         </div>
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index 589f803..7f1d3bb 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import {} from '@inertiajs/vue3';
+import { kBlock, kBlockTitle, kBadge, kButton } from 'konsta/vue';
 import {
     LayoutGrid,
     Sparkles,
@@ -18,9 +19,7 @@ defineProps({
 <template>
     <div class="animate-fade-in mx-auto max-w-7xl space-y-6 p-1">
         <!-- Main Dashboard Header -->
-        <div
-            class="relative overflow-hidden rounded-2xl border border-slate-300 bg-gradient-to-r from-white via-slate-50 to-white p-6 shadow-sm sm:p-8 dark:border-gray-700 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900"
-        >
+        <kBlock>
             <div
                 class="pointer-events-none absolute -top-10 -right-10 h-40 w-40 rounded-full bg-indigo-500/10 blur-3xl dark:bg-indigo-500/20"
             ></div>
@@ -34,11 +33,7 @@ defineProps({
                         <Sparkles class="h-5 w-5" />
                     </div>
                     <div>
-                        <h1
-                            class="text-xl font-bold tracking-tight text-slate-900 sm:text-2xl dark:text-gray-100"
-                        >
-                            Dashboard
-                        </h1>
+                        <kBlockTitle> Dashboard </kBlockTitle>
                         <p
                             class="mt-0.5 text-sm text-slate-600 dark:text-gray-400"
                         >
@@ -48,12 +43,10 @@ defineProps({
                     </div>
                 </div>
             </div>
-        </div>
+        </kBlock>
 
-        <!-- Highlighted Guide/Tour Card (Placed Directly Below Header) -->
-        <div
-            class="relative overflow-hidden rounded-2xl border border-indigo-200 bg-indigo-50/60 p-5 shadow-xs transition-colors hover:border-indigo-300 sm:p-6 dark:border-indigo-500/30 dark:bg-indigo-500/10"
-        >
+        <!-- Highlighted Guide/Tour Card -->
+        <kBlock>
             <div
                 class="relative flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
             >
@@ -78,24 +71,17 @@ defineProps({
                     </div>
                 </div>
 
-                <Link
-                    href="/guide"
-                    class="group inline-flex shrink-0 items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-xs font-bold text-white shadow-xs transition-all hover:bg-indigo-700 active:scale-95"
-                >
+                <k-button fill rounded href="/guide">
                     <span>Take a Tour</span>
-                    <ArrowRight
-                        class="h-4 w-4 transition-transform group-hover:translate-x-0.5"
-                    />
-                </Link>
+                    <ArrowRight class="h-4 w-4" />
+                </k-button>
             </div>
-        </div>
+        </kBlock>
 
         <!-- Metrics Section -->
         <div class="grid gap-6 md:grid-cols-2">
             <div class="space-y-6">
-                <div
-                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
-                >
+                <kBlock>
                     <div class="flex items-center justify-between">
                         <p
                             class="text-sm font-semibold tracking-wide text-slate-600 uppercase dark:text-gray-400"
@@ -120,11 +106,9 @@ defineProps({
                             Cumulative raw platform hits recorded
                         </p>
                     </div>
-                </div>
+                </kBlock>
 
-                <div
-                    class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
-                >
+                <kBlock>
                     <div class="flex items-center justify-between">
                         <p
                             class="text-sm font-semibold tracking-wide text-slate-600 uppercase dark:text-gray-400"
@@ -149,12 +133,10 @@ defineProps({
                             Distinct audiences grouped by IP address
                         </p>
                     </div>
-                </div>
+                </kBlock>
             </div>
 
-            <div
-                class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
-            >
+            <kBlock>
                 <div
                     class="flex items-center gap-3 border-b border-slate-100 pb-4 dark:border-gray-800"
                 >
@@ -194,11 +176,7 @@ defineProps({
                                 </p>
                             </div>
                             <div class="flex w-1/3 items-center justify-end">
-                                <span
-                                    class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800 dark:bg-gray-800 dark:text-gray-200"
-                                >
-                                    {{ source.visits }} users
-                                </span>
+                                <kBadge> {{ source.visits }} users </kBadge>
                             </div>
                         </div>
                     </div>
@@ -217,7 +195,7 @@ defineProps({
                         </p>
                     </div>
                 </div>
-            </div>
+            </kBlock>
         </div>
     </div>
 </template>
diff --git a/resources/js/pages/admin/Index.vue b/resources/js/pages/admin/Index.vue
index 8d64633..8717a39 100644
--- a/resources/js/pages/admin/Index.vue
+++ b/resources/js/pages/admin/Index.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import {} from '@inertiajs/vue3';
+import { kBlock, kBlockTitle, kBadge, kButton } from 'konsta/vue';
 import { Plus } from 'lucide-vue-next';
 import SubjectCard from '@/components/admin/SubjectCard.vue';
 import EmptyState from '@/components/EmptyState.vue';
+
 defineProps({
     subjects: {
         type: Array,
@@ -12,41 +14,30 @@ defineProps({
 </script>
 
 <template>
-    <div
-        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
-    >
+    <kBlock>
         <div
             class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
         >
             <div>
-                <h3
-                    class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100"
-                >
-                    Manage Subjects
-                </h3>
+                <kBlockTitle> Manage Subjects </kBlockTitle>
                 <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                     View, organize, and configure active curriculum subjects.
                 </p>
             </div>
 
             <div class="flex items-center gap-3 self-start sm:self-center">
-                <div
-                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 dark:border-blue-500/30 dark:bg-blue-500/10"
-                >
+                <kBadge>
                     <span
                         class="text-xs font-medium text-blue-700 dark:text-blue-400"
                     >
                         Total: {{ subjects.length }}
                     </span>
-                </div>
+                </kBadge>
 
-                <Link
-                    href="/admin/subjects/create"
-                    class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-1.5 text-xs font-medium text-white shadow-sm transition-colors duration-150 hover:bg-blue-700"
-                >
+                <k-button fill rounded href="/admin/subjects/create">
                     <Plus class="h-3.5 w-3.5" :stroke-width="2.5" />
                     Create Subject
-                </Link>
+                </k-button>
             </div>
         </div>
 
@@ -65,5 +56,5 @@ defineProps({
 
             <EmptyState v-else />
         </div>
-    </div>
+    </kBlock>
 </template>
diff --git a/resources/js/pages/admin/Node.vue b/resources/js/pages/admin/Node.vue
index 6d45848..fcd6893 100644
--- a/resources/js/pages/admin/Node.vue
+++ b/resources/js/pages/admin/Node.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import { Plus, FolderPlus, ArrowLeft, ChevronDown } from 'lucide-vue-next';
-import { computed, ref, onMounted, onUnmounted } from 'vue';
+import {} from '@inertiajs/vue3';
+import {
+    kBlock,
+    kBlockTitle,
+    kBadge,
+    kPopover,
+    kList,
+    kListItem,
+    kButton,
+} from 'konsta/vue';
+import { FolderPlus, ArrowLeft } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
 import NodeRow from '@/components/admin/NodeRow.vue';
 import ResourceRow from '@/components/admin/ResourceRow.vue';
 import EmptyState from '@/components/EmptyState.vue';
@@ -13,8 +22,7 @@ const props = defineProps({
     parent: Object,
 });
 
-const isDropdownOpen = ref(false);
-const dropdownRef = ref(null);
+const showBulkActions = ref(false);
 
 const totalItemsCount = computed(
     () => (props.nodes?.length ?? 0) + (props.resources?.length ?? 0),
@@ -45,38 +53,22 @@ const handleBack = () => {
 };
 
 const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
-
-const closeDropdown = (e) => {
-    if (dropdownRef.value && !dropdownRef.value.contains(e.target)) {
-        isDropdownOpen.value = false;
-    }
-};
-
-onMounted(() => document.addEventListener('click', closeDropdown));
-onUnmounted(() => document.removeEventListener('click', closeDropdown));
 </script>
 
 <template>
-    <div
-        class="flex w-full flex-1 flex-col rounded-xl border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
-    >
+    <kBlock>
         <div
             class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-100 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
         >
             <div class="flex items-center gap-3">
-                <button
-                    @click="handleBack"
-                    class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-2 text-gray-500 shadow-sm transition-colors duration-150 hover:bg-gray-50 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
-                >
+                <k-button clear small @click="handleBack">
                     <ArrowLeft class="h-4 w-4" :stroke-width="2.5" />
-                </button>
+                </k-button>
 
                 <div>
-                    <h3
-                        class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100"
-                    >
+                    <kBlockTitle>
                         {{ parent?.name ? parent.name : subject.name }}
-                    </h3>
+                    </kBlockTitle>
                     <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                         Curriculum structure and related resources.
                     </p>
@@ -84,74 +76,59 @@ onUnmounted(() => document.removeEventListener('click', closeDropdown));
             </div>
 
             <div class="flex items-center gap-3 self-start sm:self-center">
-                <div
-                    class="rounded-full border border-blue-100 bg-blue-50 px-3 py-1 dark:border-blue-500/30 dark:bg-blue-500/10"
-                >
+                <kBadge>
                     <span
                         class="text-xs font-medium text-blue-700 dark:text-blue-400"
                     >
                         Total: {{ totalItemsCount }}
                     </span>
-                </div>
+                </kBadge>
 
-                <Link
+                <k-button
+                    fill
+                    rounded
                     :href="
                         parent
                             ? `/admin/subjects/${subject.slug}/nodes/create?parent_id=${parent.id}`
                             : `/admin/subjects/${subject.slug}/nodes/create`
                     "
-                    class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors duration-150 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
                 >
-                    <FolderPlus
-                        class="h-3.5 w-3.5 text-gray-500 dark:text-gray-400"
-                        :stroke-width="2"
-                    />
+                    <FolderPlus class="h-3.5 w-3.5" :stroke-width="2" />
                     Add Folder
-                </Link>
+                </k-button>
 
                 <!-- Add Resource Dropdown -->
-                <div
+                <k-popover
                     v-if="parent?.id"
-                    ref="dropdownRef"
-                    class="relative inline-block"
+                    :opened="showBulkActions"
+                    @close="showBulkActions = false"
                 >
-                    <button
-                        type="button"
-                        @click="isDropdownOpen = !isDropdownOpen"
-                        class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-1.5 text-xs font-medium text-white shadow-sm transition-colors duration-150 hover:bg-blue-700"
-                    >
-                        <Plus class="h-3.5 w-3.5" :stroke-width="2.5" />
-                        Add Resource
-                        <ChevronDown class="h-3.5 w-3.5" />
-                    </button>
-
-                    <div
-                        v-if="isDropdownOpen"
-                        class="absolute right-0 z-10 mt-2 w-44 rounded-lg border border-gray-100 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
-                    >
-                        <Link
-                            :href="`/admin/resources/create?node_id=${parent.id}`"
-                            @click="isDropdownOpen = false"
-                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                        >
-                            Single File
-                        </Link>
-                        <Link
-                            :href="`/admin/resources/create/bulk/images?node_id=${parent.id}&redirect=${currentUrl}`"
-                            @click="isDropdownOpen = false"
-                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+                    <template #trigger>
+                        <k-button
+                            outline
+                            @click="showBulkActions = !showBulkActions"
                         >
-                            Upload Bulk Images
-                        </Link>
-                        <Link
-                            :href="`/admin/resources/create/bulk/videos?node_id=${parent.id}&redirect=${currentUrl}`"
-                            @click="isDropdownOpen = false"
-                            class="block rounded-md px-3 py-2 text-xs text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-                        >
-                            Upload Bulk Videos
-                        </Link>
-                    </div>
-                </div>
+                            Add Resource
+                        </k-button>
+                    </template>
+                    <k-list class="m-0">
+                        <k-list-item
+                            title="Single File"
+                            :link="`/admin/resources/create?node_id=${parent.id}`"
+                            @click="showBulkActions = false"
+                        />
+                        <k-list-item
+                            title="Upload Bulk Images"
+                            :link="`/admin/resources/create/bulk/images?node_id=${parent.id}&redirect=${currentUrl}`"
+                            @click="showBulkActions = false"
+                        />
+                        <k-list-item
+                            title="Upload Bulk Videos"
+                            :link="`/admin/resources/create/bulk/videos?node_id=${parent.id}&redirect=${currentUrl}`"
+                            @click="showBulkActions = false"
+                        />
+                    </k-list>
+                </k-popover>
             </div>
         </div>
 
@@ -183,5 +160,5 @@ onUnmounted(() => document.removeEventListener('click', closeDropdown));
                 <EmptyState />
             </div>
         </div>
-    </div>
+    </kBlock>
 </template>
diff --git a/resources/js/pages/admin/NodeCreateOrEdit.vue b/resources/js/pages/admin/NodeCreateOrEdit.vue
index 454e2ee..2b3a8d3 100644
--- a/resources/js/pages/admin/NodeCreateOrEdit.vue
+++ b/resources/js/pages/admin/NodeCreateOrEdit.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
+import { kButton, kBlockTitle } from 'konsta/vue';
 import { FolderOpen } from 'lucide-vue-next';
 
 const props = defineProps({
@@ -16,12 +17,6 @@ const form = useForm({
     redirect: props.redirect,
 });
 
-function getInputClass(hasError) {
-    return hasError
-        ? 'border-rose-500 focus:ring-rose-500/20'
-        : 'border-slate-300 dark:border-gray-600 focus:ring-blue-500/20 focus:border-blue-500';
-}
-
 const submitForm = () => {
     if (props.node) {
         form.patch(
@@ -53,11 +48,9 @@ const goBack = () => {
                 class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1
-                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                    >
+                    <kBlockTitle>
                         {{ props.node ? 'Edit Folder' : 'Create Folder' }}
-                    </h1>
+                    </kBlockTitle>
                     <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Subject:
                         <span
@@ -113,18 +106,16 @@ const goBack = () => {
                 <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                     <div class="md:col-span-2">
                         <label
-                            for="name"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Folder Name</label
                         >
                         <input
-                            v-model="form.name"
                             type="text"
-                            id="name"
+                            :value="form.name"
+                            @input="form.name = $event.target.value"
                             placeholder="e.g., Chapter 1: Introduction"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
-                            :class="getInputClass(form.errors.name)"
                             required
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.name"
@@ -136,17 +127,17 @@ const goBack = () => {
 
                     <div>
                         <label
-                            for="sort_order"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Order Priority</label
                         >
                         <input
-                            v-model.number="form.sort_order"
                             type="number"
-                            id="sort_order"
+                            :value="form.sort_order"
+                            @input="
+                                form.sort_order = Number($event.target.value)
+                            "
                             placeholder="0"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
-                            :class="getInputClass(form.errors.sort_order)"
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.sort_order"
@@ -165,17 +156,8 @@ const goBack = () => {
                 <div
                     class="flex justify-end space-x-3 border-t border-slate-100 pt-4 dark:border-gray-800"
                 >
-                    <button
-                        @click="goBack"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        type="submit"
-                        :disabled="form.processing"
-                        class="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                    >
+                    <k-button outline @click="goBack"> Cancel </k-button>
+                    <k-button type="submit" fill :disabled="form.processing">
                         {{
                             form.processing
                                 ? 'Saving...'
@@ -183,7 +165,7 @@ const goBack = () => {
                                   ? 'Save Changes'
                                   : 'Create Folder'
                         }}
-                    </button>
+                    </k-button>
                 </div>
             </form>
         </div>
diff --git a/resources/js/pages/admin/NoticeEdit.vue b/resources/js/pages/admin/NoticeEdit.vue
index d507717..2e70285 100644
--- a/resources/js/pages/admin/NoticeEdit.vue
+++ b/resources/js/pages/admin/NoticeEdit.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
+import { kToggle, kButton, kBlockTitle } from 'konsta/vue';
 import { Loader2, Save } from 'lucide-vue-next';
 import { computed } from 'vue';
 
@@ -41,11 +42,7 @@ const submitForm = () => {
             <div
                 class="mb-10 border-b border-slate-100 pb-6 dark:border-gray-800"
             >
-                <h1
-                    class="text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
-                >
-                    Site Notice
-                </h1>
+                <kBlockTitle> Site Notice </kBlockTitle>
                 <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                     Configure the announcement dialog shown on the home page.
                     Only one notice is displayed at a time.
@@ -59,23 +56,16 @@ const submitForm = () => {
                 <div class="space-y-6 lg:col-span-2">
                     <div>
                         <label
-                            for="title"
-                            class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                            >Title</label
                         >
-                            Title
-                        </label>
                         <input
-                            v-model="form.title"
                             type="text"
-                            id="title"
+                            :value="form.title"
+                            @input="form.title = $event.target.value"
                             placeholder="Important announcement"
                             :disabled="form.processing"
-                            class="w-full rounded-xl border px-4 py-3 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
-                            :class="
-                                form.errors.title
-                                    ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                    : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.title"
@@ -87,24 +77,17 @@ const submitForm = () => {
 
                     <div>
                         <label
-                            for="message"
-                            class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                            >Message</label
                         >
-                            Message
-                        </label>
                         <textarea
-                            v-model="form.message"
-                            id="message"
-                            rows="6"
+                            :value="form.message"
+                            @input="form.message = $event.target.value"
                             placeholder="Write the notice message for visitors..."
                             :disabled="form.processing"
-                            class="w-full rounded-xl border px-4 py-3 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
-                            :class="
-                                form.errors.message
-                                    ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                    : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                            "
-                        ></textarea>
+                            rows="6"
+                            class="w-full resize-none rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
+                        />
                         <p
                             v-if="form.errors.message"
                             class="mt-1.5 text-xs font-medium text-rose-600"
@@ -129,19 +112,13 @@ const submitForm = () => {
                                     Optional call-to-action link in the dialog.
                                 </p>
                             </div>
-                            <label
-                                class="relative inline-flex cursor-pointer items-center"
-                            >
-                                <input
-                                    v-model="form.show_button"
-                                    type="checkbox"
-                                    class="peer sr-only"
-                                    :disabled="form.processing"
-                                />
-                                <span
-                                    class="peer h-6 w-11 rounded-full bg-slate-200 shadow-xs transition peer-checked:bg-slate-900 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5 dark:bg-gray-600 dark:peer-checked:bg-gray-200"
-                                ></span>
-                            </label>
+                            <k-toggle
+                                :checked="form.show_button"
+                                @change="
+                                    form.show_button = $event.target.checked
+                                "
+                                :disabled="form.processing"
+                            />
                         </div>
 
                         <div
@@ -150,23 +127,18 @@ const submitForm = () => {
                         >
                             <div>
                                 <label
-                                    for="button_title"
-                                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
+                                    class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                                    >Button title</label
                                 >
-                                    Button title
-                                </label>
                                 <input
-                                    v-model="form.button_title"
                                     type="text"
-                                    id="button_title"
+                                    :value="form.button_title"
+                                    @input="
+                                        form.button_title = $event.target.value
+                                    "
                                     placeholder="Learn more"
                                     :disabled="form.processing"
-                                    class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm transition outline-none focus:ring-4 dark:bg-gray-900"
-                                    :class="
-                                        form.errors.button_title
-                                            ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                            : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                                    "
+                                    class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                                 />
                                 <p
                                     v-if="form.errors.button_title"
@@ -178,23 +150,18 @@ const submitForm = () => {
 
                             <div>
                                 <label
-                                    for="button_link"
-                                    class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
+                                    class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                                    >Button link</label
                                 >
-                                    Button link
-                                </label>
                                 <input
-                                    v-model="form.button_link"
                                     type="text"
-                                    id="button_link"
+                                    :value="form.button_link"
+                                    @input="
+                                        form.button_link = $event.target.value
+                                    "
                                     placeholder="https://example.com/details"
                                     :disabled="form.processing"
-                                    class="w-full rounded-xl border bg-white px-4 py-2.5 text-sm transition outline-none focus:ring-4 dark:bg-gray-900"
-                                    :class="
-                                        form.errors.button_link
-                                            ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                            : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                                    "
+                                    class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                                 />
                                 <p
                                     v-if="form.errors.button_link"
@@ -217,19 +184,11 @@ const submitForm = () => {
                             >
                                 Show Notice
                             </p>
-                            <label
-                                class="relative inline-flex cursor-pointer items-center"
-                            >
-                                <input
-                                    v-model="form.is_active"
-                                    type="checkbox"
-                                    class="peer sr-only"
-                                    :disabled="form.processing"
-                                />
-                                <span
-                                    class="peer h-6 w-11 rounded-full bg-slate-200 shadow-xs transition peer-checked:bg-slate-900 peer-disabled:opacity-50 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:transition peer-checked:after:translate-x-5 dark:bg-gray-600 dark:peer-checked:bg-gray-200"
-                                ></span>
-                            </label>
+                            <k-toggle
+                                :checked="form.is_active"
+                                @change="form.is_active = $event.target.checked"
+                                :disabled="form.processing"
+                            />
                         </div>
                     </div>
 
@@ -246,23 +205,16 @@ const submitForm = () => {
                     >
                         <div>
                             <label
-                                for="image"
-                                class="mb-1.5 block text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-gray-400"
+                                class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                                >Cover Image URL</label
                             >
-                                Cover Image URL
-                            </label>
                             <input
-                                v-model="form.image"
                                 type="text"
-                                id="image"
+                                :value="form.image"
+                                @input="form.image = $event.target.value"
                                 placeholder="https://example.com/banner.jpg"
                                 :disabled="form.processing"
-                                class="w-full rounded-xl border px-4 py-2.5 text-sm transition outline-none focus:ring-4 disabled:bg-slate-50 disabled:text-slate-400 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
-                                :class="
-                                    form.errors.image
-                                        ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/10'
-                                        : 'border-slate-200 focus:border-slate-900 focus:ring-slate-900/5 dark:border-gray-700'
-                                "
+                                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                             />
                             <p
                                 v-if="form.errors.image"
@@ -288,25 +240,15 @@ const submitForm = () => {
                 <div
                     class="flex justify-end gap-3 border-t border-slate-100 pt-6 lg:col-span-3 dark:border-gray-800"
                 >
-                    <button
-                        type="button"
-                        @click="goBack"
-                        class="rounded-xl border border-slate-200 px-5 py-2.5 text-sm 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>
-                    <button
-                        type="submit"
-                        :disabled="form.processing"
-                        class="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800 focus:ring-4 focus:ring-slate-900/10 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                    >
+                    <k-button outline @click="goBack"> Cancel </k-button>
+                    <k-button type="submit" fill :disabled="form.processing">
                         <Loader2
                             v-if="form.processing"
                             class="h-4 w-4 animate-spin"
                         />
                         <Save v-else class="h-4 w-4" />
                         {{ form.processing ? 'Saving...' : 'Save Notice' }}
-                    </button>
+                    </k-button>
                 </div>
             </form>
         </div>
diff --git a/resources/js/pages/admin/ResourceCreateOrEdit.vue b/resources/js/pages/admin/ResourceCreateOrEdit.vue
index 5eaf038..467deec 100644
--- a/resources/js/pages/admin/ResourceCreateOrEdit.vue
+++ b/resources/js/pages/admin/ResourceCreateOrEdit.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { Link, useForm } from '@inertiajs/vue3';
+import { kButton, kBlockTitle } from 'konsta/vue';
 import {
     FileText,
     File,
     Image as ImageIcon,
     Video,
     Upload,
-    Link as LinkIcon,
 } from 'lucide-vue-next';
 import { computed } from 'vue';
 
@@ -95,11 +95,9 @@ const submitForm = () => {
                 class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1
-                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                    >
+                    <kBlockTitle>
                         {{ props.resource ? 'Edit' : 'Add New' }} Resource
-                    </h1>
+                    </kBlockTitle>
                     <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Upload assets or link content for the curriculum
                         structure.
@@ -152,23 +150,15 @@ const submitForm = () => {
                 <!-- 2. Resource Title (Required for ALL) -->
                 <div>
                     <label
-                        for="title"
                         class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                        >Resource Title</label
                     >
-                        Resource Title
-                    </label>
                     <input
-                        v-model="form.title"
                         type="text"
-                        id="title"
+                        :value="form.title"
+                        @input="form.title = $event.target.value"
                         placeholder="e.g. Lecture 01 Introduction Notes"
-                        maxlength="100"
-                        class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
-                        :class="
-                            form.errors.title
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500/20'
-                        "
+                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                     />
                     <p
                         v-if="form.errors.title"
@@ -181,23 +171,16 @@ const submitForm = () => {
                 <!-- 3. Content Body (Present for ALL types) -->
                 <div>
                     <label
-                        for="content"
                         class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                        >Content Body</label
                     >
-                        Content Body
-                    </label>
                     <textarea
-                        v-model="form.content"
-                        id="content"
-                        rows="3"
+                        :value="form.content"
+                        @input="form.content = $event.target.value"
                         placeholder="Type notes, descriptions, or body text..."
-                        class="w-full rounded-lg border px-4 py-2.5 font-sans transition outline-none"
-                        :class="
-                            form.errors.content
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500/20'
-                        "
-                    ></textarea>
+                        rows="3"
+                        class="w-full resize-none rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
+                    />
                     <p
                         v-if="form.errors.content"
                         class="mt-1 text-sm text-rose-600 dark:text-rose-400"
@@ -209,7 +192,6 @@ const submitForm = () => {
                 <!-- 4. File URL (Only for Video and PDF) -->
                 <div v-if="requiresLink">
                     <label
-                        for="external_url"
                         class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                     >
                         {{
@@ -218,27 +200,17 @@ const submitForm = () => {
                                 : 'Video Link / URL'
                         }}
                     </label>
-                    <div class="relative flex items-center">
-                        <LinkIcon
-                            class="pointer-events-none absolute left-4 h-4 w-4 text-slate-400 dark:text-gray-500"
-                        />
-                        <input
-                            v-model="form.external_url"
-                            type="url"
-                            id="external_url"
-                            :placeholder="
-                                form.resource_type === 'pdf'
-                                    ? 'e.g. https://example.com/document.pdf'
-                                    : 'e.g. https://www.youtube.com/watch?v=... or Vimeo URL'
-                            "
-                            class="w-full rounded-lg border py-2.5 pr-4 pl-11 transition outline-none"
-                            :class="
-                                form.errors.external_url
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500/20'
-                            "
-                        />
-                    </div>
+                    <input
+                        type="url"
+                        :value="form.external_url"
+                        @input="form.external_url = $event.target.value"
+                        :placeholder="
+                            form.resource_type === 'pdf'
+                                ? 'e.g. https://example.com/document.pdf'
+                                : 'e.g. https://www.youtube.com/watch?v=... or Vimeo URL'
+                        "
+                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
+                    />
                     <p
                         v-if="form.errors.external_url"
                         class="mt-1 text-sm text-rose-600 dark:text-rose-400"
@@ -306,20 +278,12 @@ const submitForm = () => {
                 <div
                     class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
                 >
-                    <Link
-                        :href="redirect"
-                        type="button"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        Cancel
+                    <Link :href="redirect">
+                        <k-button clear>Cancel</k-button>
                     </Link>
-                    <button
-                        type="submit"
-                        :disabled="form.processing"
-                        class="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                    >
+                    <k-button type="submit" fill :disabled="form.processing">
                         {{ form.processing ? 'Saving...' : 'Save Resource' }}
-                    </button>
+                    </k-button>
                 </div>
             </form>
         </div>
diff --git a/resources/js/pages/admin/SubjectCreateOrEdit.vue b/resources/js/pages/admin/SubjectCreateOrEdit.vue
index 52e981a..6c6e885 100644
--- a/resources/js/pages/admin/SubjectCreateOrEdit.vue
+++ b/resources/js/pages/admin/SubjectCreateOrEdit.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
+import { kButton, kBlockTitle } from 'konsta/vue';
 import {
     Atom,
     FlaskConical,
@@ -80,11 +81,9 @@ const submitForm = () => {
                 class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1
-                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                    >
+                    <kBlockTitle>
                         {{ props.subject ? 'Edit' : 'Create' }} New Subject
-                    </h1>
+                    </kBlockTitle>
                     <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         {{
                             props.subject
@@ -93,34 +92,22 @@ const submitForm = () => {
                         }}
                     </p>
                 </div>
-                <button
-                    type="button"
-                    @click="goBack"
-                    class="inline-flex items-center self-start rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-200 sm:self-center dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
-                >
-                    &larr; Back
-                </button>
+                <k-button outline @click="goBack"> &larr; Back </k-button>
             </div>
 
             <form @submit.prevent="submitForm" class="space-y-8">
                 <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                     <div>
                         <label
-                            for="name"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Subject Name</label
                         >
                         <input
-                            v-model="form.name"
                             type="text"
-                            id="name"
+                            :value="form.name"
+                            @input="form.name = $event.target.value"
                             placeholder="e.g. Physics..."
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
-                            :class="
-                                form.errors.name
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.name"
@@ -132,19 +119,13 @@ const submitForm = () => {
 
                     <div>
                         <label
-                            for="course"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Course</label
                         >
                         <select
-                            v-model="form.course"
-                            id="course"
-                            class="w-full rounded-lg border bg-white px-4 py-2.5 transition outline-none dark:bg-gray-900"
-                            :class="
-                                form.errors.course
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            :value="form.course"
+                            @change="form.course = $event.target.value"
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:focus:border-indigo-400"
                         >
                             <option value="hsc">HSC</option>
                             <option value="ssc">SSC</option>
@@ -159,20 +140,16 @@ const submitForm = () => {
 
                     <div>
                         <label
-                            for="sort_order"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Sort Order</label
                         >
                         <input
-                            v-model.number="form.sort_order"
                             type="number"
-                            id="sort_order"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
-                            :class="
-                                form.errors.sort_order
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
+                            :value="form.sort_order"
+                            @input="
+                                form.sort_order = Number($event.target.value)
                             "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.sort_order"
@@ -298,20 +275,10 @@ const submitForm = () => {
                 <div
                     class="flex justify-end space-x-3 border-t border-slate-100 pt-4 dark:border-gray-800"
                 >
-                    <button
-                        type="button"
-                        @click="goBack"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        type="submit"
-                        :disabled="form.processing"
-                        class="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                    >
+                    <k-button outline @click="goBack"> Cancel </k-button>
+                    <k-button type="submit" fill :disabled="form.processing">
                         {{ form.processing ? 'Saving...' : 'Save Subject' }}
-                    </button>
+                    </k-button>
                 </div>
             </form>
         </div>
diff --git a/resources/js/pages/admin/resources/BulkImageCreate.vue b/resources/js/pages/admin/resources/BulkImageCreate.vue
index c903417..04565dc 100644
--- a/resources/js/pages/admin/resources/BulkImageCreate.vue
+++ b/resources/js/pages/admin/resources/BulkImageCreate.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link, useForm } from '@inertiajs/vue3';
+import { kButton, kBlockTitle, kRadio } from 'konsta/vue';
 import { Upload, X, Trash2, FileSpreadsheet, Hash, Tag } from 'lucide-vue-next';
 import { ref, computed, onUnmounted } from 'vue';
 
@@ -126,11 +127,7 @@ const submitForm = () => {
                 class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1
-                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        Bulk Upload Images
-                    </h1>
+                    <kBlockTitle> Bulk Upload Images </kBlockTitle>
                     <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Upload multiple image resources simultaneously and
                         configure naming conventions.
@@ -219,11 +216,12 @@ const submitForm = () => {
                                     : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
-                            <input
-                                type="radio"
+                            <kRadio
+                                :checked="form.naming_strategy === 'original'"
                                 value="original"
-                                v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
+                                @change="
+                                    form.naming_strategy = $event.target.value
+                                "
                             />
                             <div
                                 class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
@@ -244,11 +242,12 @@ const submitForm = () => {
                                     : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
-                            <input
-                                type="radio"
+                            <kRadio
+                                :checked="form.naming_strategy === 'serial'"
                                 value="serial"
-                                v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
+                                @change="
+                                    form.naming_strategy = $event.target.value
+                                "
                             />
                             <div
                                 class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
@@ -269,11 +268,12 @@ const submitForm = () => {
                                     : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
-                            <input
-                                type="radio"
+                            <kRadio
+                                :checked="form.naming_strategy === 'suffix'"
                                 value="suffix"
-                                v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
+                                @change="
+                                    form.naming_strategy = $event.target.value
+                                "
                             />
                             <div
                                 class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
@@ -293,30 +293,35 @@ const submitForm = () => {
                     >
                         <div v-if="form.naming_strategy === 'suffix'">
                             <label
-                                class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                                class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                                >Custom Name Prefix</label
                             >
-                                Custom Name Prefix
-                            </label>
                             <input
-                                v-model="form.naming_suffix"
                                 type="text"
+                                :value="form.naming_suffix"
+                                @input="
+                                    form.naming_suffix = $event.target.value
+                                "
                                 placeholder="e.g. Lecture Slide"
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900"
+                                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                             />
                         </div>
 
                         <div>
                             <label
-                                class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                                class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                                >Starting Number</label
                             >
-                                Starting Number
-                            </label>
                             <input
-                                v-model.number="form.start_number"
                                 type="number"
-                                min="1"
+                                :value="form.start_number"
+                                @input="
+                                    form.start_number = Number(
+                                        $event.target.value,
+                                    )
+                                "
                                 placeholder="1"
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900"
+                                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                             />
                         </div>
                     </div>
@@ -388,26 +393,22 @@ const submitForm = () => {
                 <div
                     class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
                 >
-                    <Link
-                        :href="redirect"
-                        type="button"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        Cancel
+                    <Link :href="redirect">
+                        <k-button clear>Cancel</k-button>
                     </Link>
-                    <button
+                    <k-button
                         type="submit"
+                        fill
                         :disabled="
                             form.processing || selectedFiles.length === 0
                         "
-                        class="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                     >
                         {{
                             form.processing
                                 ? 'Uploading...'
                                 : `Upload ${selectedFiles.length} Images`
                         }}
-                    </button>
+                    </k-button>
                 </div>
             </form>
         </div>
diff --git a/resources/js/pages/admin/resources/BulkVideoCreate.vue b/resources/js/pages/admin/resources/BulkVideoCreate.vue
index a798157..50165b2 100644
--- a/resources/js/pages/admin/resources/BulkVideoCreate.vue
+++ b/resources/js/pages/admin/resources/BulkVideoCreate.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Link, useForm } from '@inertiajs/vue3';
-import { Youtube, FileSpreadsheet, Hash, Tag, Info } from 'lucide-vue-next';
+import { kButton, kBlockTitle, kRadio } from 'konsta/vue';
+import { FileSpreadsheet, Hash, Tag, Info } from 'lucide-vue-next';
 
 const props = defineProps({
     redirect: {
@@ -44,11 +45,7 @@ const submitForm = () => {
                 class="mb-8 flex flex-col justify-between gap-4 border-b border-slate-100 pb-6 sm:flex-row sm:items-center dark:border-gray-800"
             >
                 <div>
-                    <h1
-                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                    >
-                        Import YouTube Playlist
-                    </h1>
+                    <kBlockTitle> Import YouTube Playlist </kBlockTitle>
                     <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         Automatically fetch videos from a YouTube playlist and
                         create resources preserving playlist order.
@@ -60,29 +57,17 @@ const submitForm = () => {
                 <!-- Playlist URL Input -->
                 <div>
                     <label
-                        for="playlist_url"
                         class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                        >YouTube Playlist URL</label
                     >
-                        YouTube Playlist URL
-                    </label>
-                    <div class="relative flex items-center">
-                        <Youtube
-                            class="pointer-events-none absolute left-4 h-5 w-5 text-rose-600"
-                        />
-                        <input
-                            v-model="form.playlist_url"
-                            type="url"
-                            id="playlist_url"
-                            placeholder="https://www.youtube.com/playlist?list=PL..."
-                            required
-                            class="w-full rounded-lg border py-2.5 pr-4 pl-11 text-sm transition outline-none"
-                            :class="
-                                form.errors.playlist_url
-                                    ? 'border-rose-500 focus:ring-2 focus:ring-rose-500/20'
-                                    : 'border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
-                        />
-                    </div>
+                    <input
+                        type="url"
+                        :value="form.playlist_url"
+                        @input="form.playlist_url = $event.target.value"
+                        placeholder="https://www.youtube.com/playlist?list=PL..."
+                        required
+                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
+                    />
                     <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
                         Paste the full URL of the public or unlisted YouTube
                         playlist.
@@ -123,11 +108,12 @@ const submitForm = () => {
                                     : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
-                            <input
-                                type="radio"
+                            <kRadio
+                                :checked="form.naming_strategy === 'youtube'"
                                 value="youtube"
-                                v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
+                                @change="
+                                    form.naming_strategy = $event.target.value
+                                "
                             />
                             <div
                                 class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
@@ -148,11 +134,12 @@ const submitForm = () => {
                                     : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
-                            <input
-                                type="radio"
+                            <kRadio
+                                :checked="form.naming_strategy === 'serial'"
                                 value="serial"
-                                v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
+                                @change="
+                                    form.naming_strategy = $event.target.value
+                                "
                             />
                             <div
                                 class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
@@ -173,11 +160,12 @@ const submitForm = () => {
                                     : 'border-slate-200 dark:border-gray-700 dark:hover:border-gray-600'
                             "
                         >
-                            <input
-                                type="radio"
+                            <kRadio
+                                :checked="form.naming_strategy === 'prefix'"
                                 value="prefix"
-                                v-model="form.naming_strategy"
-                                class="text-blue-600 focus:ring-blue-500 dark:text-blue-400"
+                                @change="
+                                    form.naming_strategy = $event.target.value
+                                "
                             />
                             <div
                                 class="flex items-center gap-2 text-xs font-medium text-slate-700 dark:text-gray-300"
@@ -218,15 +206,17 @@ const submitForm = () => {
                     >
                         <div v-if="form.naming_strategy === 'prefix'">
                             <label
-                                class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                                class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                                >Prefix String</label
                             >
-                                Prefix String
-                            </label>
                             <input
-                                v-model="form.naming_prefix"
                                 type="text"
+                                :value="form.naming_prefix"
+                                @input="
+                                    form.naming_prefix = $event.target.value
+                                "
                                 placeholder="e.g. Lecture 01"
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900"
+                                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                             />
                             <p
                                 class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
@@ -237,16 +227,19 @@ const submitForm = () => {
 
                         <div>
                             <label
-                                class="mb-1 block text-xs font-semibold text-slate-600 dark:text-gray-400"
+                                class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                                >Starting Number</label
                             >
-                                Starting Number
-                            </label>
                             <input
-                                v-model.number="form.start_number"
                                 type="number"
-                                min="1"
+                                :value="form.start_number"
+                                @input="
+                                    form.start_number = Number(
+                                        $event.target.value,
+                                    )
+                                "
                                 placeholder="1"
-                                class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-900"
+                                class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                             />
                             <p
                                 class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
@@ -278,24 +271,20 @@ const submitForm = () => {
                 <div
                     class="flex justify-end space-x-3 border-t border-slate-100 pt-6 dark:border-gray-800"
                 >
-                    <Link
-                        :href="redirect"
-                        type="button"
-                        class="rounded-lg border border-slate-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        Cancel
+                    <Link :href="redirect">
+                        <k-button clear>Cancel</k-button>
                     </Link>
-                    <button
+                    <k-button
                         type="submit"
+                        fill
                         :disabled="form.processing || !form.playlist_url"
-                        class="rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                     >
                         {{
                             form.processing
                                 ? 'Importing Playlist...'
                                 : 'Import Playlist'
                         }}
-                    </button>
+                    </k-button>
                 </div>
             </form>
         </div>
diff --git a/resources/js/pages/admin/users/CreateOrEdit.vue b/resources/js/pages/admin/users/CreateOrEdit.vue
index 9244823..d55c05b 100644
--- a/resources/js/pages/admin/users/CreateOrEdit.vue
+++ b/resources/js/pages/admin/users/CreateOrEdit.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
+import { kCheckbox, kButton, kBlockTitle } from 'konsta/vue';
 import { UserPlus, Loader2, Save } from 'lucide-vue-next';
 import { watch } from 'vue';
 
@@ -73,11 +74,9 @@ const submitForm = () => {
                 class="mb-8 flex flex-col justify-between gap-4 border-b border-gray-300 pb-6 sm:flex-row sm:items-center dark:border-gray-600"
             >
                 <div>
-                    <h1
-                        class="text-2xl font-bold text-slate-900 dark:text-gray-100"
-                    >
+                    <kBlockTitle>
                         {{ props.user ? 'Edit' : 'Create New' }} User
-                    </h1>
+                    </kBlockTitle>
                     <p class="mt-1 text-sm text-slate-500 dark:text-gray-400">
                         {{
                             props.user
@@ -93,22 +92,16 @@ const submitForm = () => {
                 <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                     <div>
                         <label
-                            for="name"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Full Name</label
                         >
                         <input
-                            v-model="form.name"
                             type="text"
-                            id="name"
+                            :value="form.name"
+                            @input="form.name = $event.target.value"
                             placeholder="John Doe"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.name
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.name"
@@ -120,22 +113,16 @@ const submitForm = () => {
 
                     <div>
                         <label
-                            for="email"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Email Address</label
                         >
                         <input
-                            v-model="form.email"
                             type="email"
-                            id="email"
+                            :value="form.email"
+                            @input="form.email = $event.target.value"
                             placeholder="johndoe@example.com"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.email
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.email"
@@ -150,7 +137,6 @@ const submitForm = () => {
                 <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                     <div>
                         <label
-                            for="password"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >
                             Password
@@ -161,18 +147,12 @@ const submitForm = () => {
                             >
                         </label>
                         <input
-                            v-model="form.password"
                             type="password"
-                            id="password"
+                            :value="form.password"
+                            @input="form.password = $event.target.value"
                             placeholder="••••••••"
-                            :required="!props.user"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.password
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.password"
@@ -184,20 +164,14 @@ const submitForm = () => {
 
                     <div v-if="!shouldHideOptions">
                         <label
-                            for="role"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >System Role</label
                         >
                         <select
-                            id="role"
-                            v-model="form.role"
+                            :value="form.role"
+                            @change="form.role = $event.target.value"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border bg-white px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.role
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:focus:border-indigo-400"
                         >
                             <option
                                 v-for="role in roles"
@@ -241,16 +215,22 @@ const submitForm = () => {
                             :key="permission.name"
                             class="flex items-start gap-2.5 rounded-lg border border-gray-200 bg-white p-3 shadow-xs dark:border-gray-700 dark:bg-gray-900"
                         >
-                            <input
-                                type="checkbox"
-                                :id="`perm-${permission.name}`"
-                                :value="permission.name"
-                                v-model="form.permissions"
+                            <k-checkbox
+                                :checked="
+                                    form.permissions.includes(permission.name)
+                                "
+                                @change="
+                                    form.permissions.includes(permission.name)
+                                        ? (form.permissions =
+                                              form.permissions.filter(
+                                                  (p) => p !== permission.name,
+                                              ))
+                                        : form.permissions.push(permission.name)
+                                "
                                 :disabled="
                                     form.processing ||
                                     permission.name === 'view admin'
                                 "
-                                class="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:opacity-60 dark:border-gray-600"
                             />
                             <label
                                 :for="`perm-${permission.name}`"
@@ -308,22 +288,16 @@ const submitForm = () => {
 
                     <div>
                         <label
-                            for="title"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Title</label
                         >
                         <input
-                            v-model="form.title"
                             type="text"
-                            id="title"
+                            :value="form.title"
+                            @input="form.title = $event.target.value"
                             placeholder="e.g. Lead Developer, Professor"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.title
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.title"
@@ -337,22 +311,16 @@ const submitForm = () => {
                 <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                     <div>
                         <label
-                            for="institution"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Institution</label
                         >
                         <input
-                            v-model="form.institution"
                             type="text"
-                            id="institution"
+                            :value="form.institution"
+                            @input="form.institution = $event.target.value"
                             placeholder="University / Company"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.institution
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.institution"
@@ -364,22 +332,16 @@ const submitForm = () => {
 
                     <div>
                         <label
-                            for="facebook"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Facebook</label
                         >
                         <input
-                            v-model="form.facebook"
                             type="text"
-                            id="facebook"
+                            :value="form.facebook"
+                            @input="form.facebook = $event.target.value"
                             placeholder="Facebook profile URL"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.facebook
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.facebook"
@@ -393,22 +355,16 @@ const submitForm = () => {
                 <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                     <div>
                         <label
-                            for="github"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >GitHub</label
                         >
                         <input
-                            v-model="form.github"
                             type="text"
-                            id="github"
+                            :value="form.github"
+                            @input="form.github = $event.target.value"
                             placeholder="GitHub profile URL"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.github
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.github"
@@ -420,22 +376,16 @@ const submitForm = () => {
 
                     <div>
                         <label
-                            for="instagram"
                             class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Instagram</label
                         >
                         <input
-                            v-model="form.instagram"
                             type="text"
-                            id="instagram"
+                            :value="form.instagram"
+                            @input="form.instagram = $event.target.value"
                             placeholder="Instagram profile URL"
                             :disabled="form.processing"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                            :class="
-                                form.errors.instagram
-                                    ? 'border-rose-500 focus:ring-rose-500/20'
-                                    : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                            "
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                         <p
                             v-if="form.errors.instagram"
@@ -448,23 +398,17 @@ const submitForm = () => {
 
                 <div>
                     <label
-                        for="about"
                         class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                         >About</label
                     >
                     <textarea
-                        v-model="form.about"
-                        id="about"
-                        rows="4"
+                        :value="form.about"
+                        @input="form.about = $event.target.value"
                         placeholder="Short bio..."
                         :disabled="form.processing"
-                        class="w-full rounded-lg border px-4 py-2.5 transition outline-none disabled:bg-slate-50 disabled:text-slate-500 dark:bg-gray-900 dark:disabled:bg-gray-800 dark:disabled:text-gray-400"
-                        :class="
-                            form.errors.about
-                                ? 'border-rose-500 focus:ring-rose-500/20'
-                                : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-600'
-                        "
-                    ></textarea>
+                        rows="4"
+                        class="w-full resize-none rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
+                    />
                     <p
                         v-if="form.errors.about"
                         class="mt-1 text-sm text-rose-600"
@@ -524,18 +468,8 @@ const submitForm = () => {
                 <div
                     class="flex justify-end space-x-3 border-t border-gray-300 pt-6 dark:border-gray-600"
                 >
-                    <button
-                        type="button"
-                        @click="goBack"
-                        class="rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        type="submit"
-                        :disabled="form.processing"
-                        class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                    >
+                    <k-button outline @click="goBack"> Cancel </k-button>
+                    <k-button type="submit" fill :disabled="form.processing">
                         <Loader2
                             v-if="form.processing"
                             class="h-4 w-4 animate-spin"
@@ -551,7 +485,7 @@ const submitForm = () => {
                                   ? 'Update User'
                                   : 'Save User'
                         }}
-                    </button>
+                    </k-button>
                 </div>
             </form>
         </div>
diff --git a/resources/js/pages/admin/users/Index.vue b/resources/js/pages/admin/users/Index.vue
index fac39f4..5deb868 100644
--- a/resources/js/pages/admin/users/Index.vue
+++ b/resources/js/pages/admin/users/Index.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import {} from '@inertiajs/vue3';
+import {
+    kBlock,
+    kBlockTitle,
+    kBadge,
+    kList,
+    kListItem,
+    kButton,
+} from 'konsta/vue';
 import { Plus } from 'lucide-vue-next';
-import UserRow from '@/components/admin/UserRow.vue';
 import EmptyState from '@/components/EmptyState.vue';
 
 defineProps({
@@ -10,18 +17,12 @@ defineProps({
 </script>
 
 <template>
-    <div
-        class="flex w-full flex-1 flex-col rounded-xl border border-gray-300 bg-white p-4 shadow-xs sm:p-6 dark:border-gray-600 dark:bg-gray-900"
-    >
+    <kBlock>
         <div
             class="mb-6 flex shrink-0 flex-col gap-4 border-b border-gray-300 pb-5 sm:flex-row sm:items-center sm:justify-between dark:border-gray-600"
         >
             <div>
-                <h3
-                    class="text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100"
-                >
-                    Manage Users
-                </h3>
+                <kBlockTitle> Manage Users </kBlockTitle>
                 <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                     Control administrative system access, roles, and profile
                     directories.
@@ -29,64 +30,39 @@ defineProps({
             </div>
 
             <div class="flex items-center justify-between gap-3 sm:justify-end">
-                <div
-                    class="rounded-full border border-blue-200 bg-blue-50 px-3 py-1 dark:border-blue-500/30 dark:bg-blue-500/10"
-                >
+                <kBadge>
                     <span
                         class="text-xs font-medium text-blue-700 dark:text-blue-400"
                     >
                         Total Users: {{ users.length }}
                     </span>
-                </div>
+                </kBadge>
 
-                <Link
-                    href="/admin/users/create"
-                    class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-2 text-xs font-medium text-white shadow-xs transition-colors duration-150 hover:bg-blue-700 sm:py-1.5"
-                >
+                <k-button fill rounded href="/admin/users/create">
                     <Plus class="h-3.5 w-3.5" :stroke-width="2.5" />
                     Create User
-                </Link>
+                </k-button>
             </div>
         </div>
 
         <div class="flex flex-1 flex-col">
-            <div
+            <k-list
+                strong
+                outline
+                dividers
+                class="ios:-mx-4"
                 v-if="users.length > 0"
-                class="overflow-hidden rounded-xl border border-gray-300 md:border-gray-300 dark:border-gray-600"
             >
-                <table
-                    class="block min-w-full divide-y divide-gray-300 text-left text-sm text-gray-500 md:table dark:divide-gray-700 dark:text-gray-400"
-                >
-                    <thead
-                        class="hidden bg-gray-50 text-xs font-semibold tracking-wider text-gray-600 uppercase md:table-header-group dark:bg-gray-800 dark:text-gray-400"
-                    >
-                        <tr>
-                            <th scope="col" class="px-6 py-3.5">Name</th>
-                            <th scope="col" class="px-6 py-3.5">
-                                Email Address
-                            </th>
-                            <th scope="col" class="px-6 py-3.5">Access Role</th>
-                            <th
-                                scope="col"
-                                class="relative px-6 py-3.5 text-right"
-                            >
-                                Actions
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody
-                        class="block divide-y divide-gray-300 bg-white md:table-row-group dark:divide-gray-700 dark:bg-gray-900"
-                    >
-                        <UserRow
-                            v-for="user in users"
-                            :key="user.id"
-                            :user="user"
-                        />
-                    </tbody>
-                </table>
-            </div>
+                <k-list-item
+                    v-for="user in users"
+                    :key="user.id"
+                    :title="user.name"
+                    :subtitle="user.email"
+                    :link="`/admin/users/${user.id}/edit`"
+                />
+            </k-list>
 
             <EmptyState v-else />
         </div>
-    </div>
+    </kBlock>
 </template>
diff --git a/resources/js/pages/ai/Index.vue b/resources/js/pages/ai/Index.vue
index c4d1f0c..3318955 100644
--- a/resources/js/pages/ai/Index.vue
+++ b/resources/js/pages/ai/Index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
+import { kButton, kBadge, kCard } from 'konsta/vue';
 import {
     Sparkles,
     Bot,
@@ -141,9 +142,7 @@ const handleMockSubmit = (question?: string) => {
         </div>
 
         <!-- Funding Banner / Callout -->
-        <div
-            class="relative mx-auto mb-10 max-w-3xl overflow-hidden rounded-2xl border border-indigo-100 bg-gradient-to-br from-indigo-50/90 via-white to-violet-50/50 p-5 shadow-xs sm:p-6 dark:border-indigo-500/30 dark:from-indigo-500/5 dark:via-gray-900 dark:to-violet-500/5"
-        >
+        <k-card outline class="mx-auto mb-10 max-w-3xl">
             <div
                 class="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between"
             >
@@ -169,15 +168,12 @@ const handleMockSubmit = (question?: string) => {
                     </div>
                 </div>
 
-                <Link
-                    href="/support"
-                    class="inline-flex shrink-0 items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-xs font-bold text-white shadow-md shadow-indigo-500/20 transition-all duration-200 hover:bg-indigo-700 hover:shadow-lg active:scale-95"
-                >
+                <k-button fill rounded href="/support">
                     <span>ফান্ডিং এ সাহায্য করুন</span>
                     <ArrowRight class="h-3.5 w-3.5" />
-                </Link>
+                </k-button>
             </div>
-        </div>
+        </k-card>
 
         <!-- AI Mockup Flow Container -->
         <div
@@ -208,11 +204,9 @@ const handleMockSubmit = (question?: string) => {
                         <Layers class="h-3.5 w-3.5" />
                         {{ selectedTopic }}
                     </span>
-                    <span
-                        class="ml-auto inline-flex items-center gap-1 rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-300"
-                    >
+                    <k-badge outline>
                         <Lock class="h-3 w-3" /> Coming Soon
-                    </span>
+                    </k-badge>
                 </div>
             </div>
 
@@ -229,17 +223,11 @@ const handleMockSubmit = (question?: string) => {
                         বিষয় সিলেক্ট করুন:
                     </label>
                     <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-                        <button
+                        <k-button
                             v-for="sub in mockSubjects"
                             :key="sub.id"
                             @click="handleSubjectSelect(sub)"
                             type="button"
-                            :class="[
-                                'inline-flex items-center justify-between rounded-xl border px-3.5 py-2.5 text-xs font-bold transition-all duration-200 active:scale-95',
-                                selectedSubject.id === sub.id
-                                    ? 'border-indigo-600 bg-indigo-50/80 text-indigo-700 shadow-xs ring-2 ring-indigo-600/10 dark:border-indigo-500 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20'
-                                    : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:bg-gray-800',
-                            ]"
                         >
                             <div class="flex items-center gap-2.5">
                                 <div
@@ -261,7 +249,7 @@ const handleMockSubmit = (question?: string) => {
                                 v-if="selectedSubject.id === sub.id"
                                 class="h-4 w-4 text-indigo-600 dark:text-indigo-400"
                             />
-                        </button>
+                        </k-button>
                     </div>
                 </div>
 
@@ -277,20 +265,14 @@ const handleMockSubmit = (question?: string) => {
                         টপিক / অধ্যায় পছন্দ করুন:
                     </label>
                     <div class="flex flex-wrap gap-2">
-                        <button
+                        <k-button
                             v-for="topic in selectedSubject.topics"
                             :key="topic"
                             @click="handleTopicSelect(topic)"
                             type="button"
-                            :class="[
-                                'rounded-xl border px-3 py-1.5 text-xs font-semibold transition-all duration-200 active:scale-95',
-                                selectedTopic === topic
-                                    ? 'border-indigo-500 bg-indigo-600 text-white shadow-xs'
-                                    : 'border-slate-200 bg-slate-50/80 text-slate-600 hover:border-slate-300 hover:bg-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:bg-gray-900',
-                            ]"
                         >
                             {{ topic }}
-                        </button>
+                        </k-button>
                     </div>
                 </div>
 
@@ -325,12 +307,11 @@ const handleMockSubmit = (question?: string) => {
                             নমুনা প্রশ্নসমূহ (Sample Queries):
                         </p>
                         <div class="space-y-1.5">
-                            <button
+                            <k-button
                                 v-for="(q, idx) in currentSamples"
                                 :key="idx"
                                 @click="handleMockSubmit(q)"
                                 type="button"
-                                class="group flex w-full items-center justify-between rounded-xl border border-slate-200 bg-white p-2.5 text-left transition-all duration-200 hover:border-indigo-300 hover:shadow-xs active:scale-[0.99] dark:border-gray-700 dark:bg-gray-900 dark:hover:border-indigo-500/50"
                             >
                                 <span
                                     class="text-xs font-semibold text-slate-700 group-hover:text-indigo-600 dark:text-gray-300 dark:group-hover:text-indigo-400"
@@ -340,7 +321,7 @@ const handleMockSubmit = (question?: string) => {
                                 <Zap
                                     class="h-3.5 w-3.5 shrink-0 text-slate-300 group-hover:text-indigo-500 dark:text-gray-600 dark:group-hover:text-indigo-400"
                                 />
-                            </button>
+                            </k-button>
                         </div>
                     </div>
                 </div>
@@ -374,19 +355,14 @@ const handleMockSubmit = (question?: string) => {
                     class="flex items-center gap-2 opacity-40"
                 >
                     <input
-                        v-model="userPrompt"
                         type="text"
-                        disabled
                         :placeholder="`${selectedTopic} নিয়ে প্রশ্নটি লিখুন...`"
-                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-xs font-semibold text-slate-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
-                    />
-                    <button
-                        type="button"
                         disabled
-                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-white"
-                    >
+                        class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
+                    />
+                    <k-button type="button" disabled>
                         <Send class="h-4 w-4" />
-                    </button>
+                    </k-button>
                 </form>
             </div>
         </div>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index d6ea7cf..ecc5ac9 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useForm, Link } from '@inertiajs/vue3';
+import { kButton, kCard } from 'konsta/vue';
 
 const form = useForm({
     email: '',
@@ -43,95 +44,90 @@ const submit = () => {
             </div>
 
             <!-- Deep Shadow Login Card -->
-            <form
-                @submit.prevent="submit"
-                class="rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-[0_20px_50px_rgba(8,11,46,0.15)] backdrop-blur-xl dark:border-gray-800 dark:bg-gray-900/80"
-            >
-                <div class="space-y-6">
+            <k-card outline>
+                <form @submit.prevent="submit" class="space-y-6">
                     <div>
                         <label
-                            class="mb-2 block text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-gray-500"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Email</label
                         >
                         <input
-                            v-model="form.email"
                             type="email"
+                            :value="form.email"
+                            @input="form.email = $event.target.value"
                             required
-                            class="w-full rounded-2xl border-0 bg-slate-50 px-5 py-4 transition-all placeholder:text-slate-300 focus:ring-2 focus:ring-slate-900 dark:bg-gray-800 dark:placeholder:text-gray-600 dark:focus:ring-gray-100"
                             placeholder="admin@example.com"
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                     </div>
 
                     <div>
                         <label
-                            class="mb-2 block text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-gray-500"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
                             >Password</label
                         >
                         <input
-                            v-model="form.password"
                             type="password"
+                            :value="form.password"
+                            @input="form.password = $event.target.value"
                             required
-                            class="w-full rounded-2xl border-0 bg-slate-50 px-5 py-4 transition-all placeholder:text-slate-300 focus:ring-2 focus:ring-slate-900 dark:bg-gray-800 dark:placeholder:text-gray-600 dark:focus:ring-gray-100"
                             placeholder="••••••••"
+                            class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-indigo-400"
                         />
                     </div>
-                </div>
-                <div
-                    class="mt-6 rounded-xl border border-indigo-100 bg-indigo-50/50 p-4 dark:border-indigo-500/30 dark:bg-indigo-500/10"
-                >
-                    <p
-                        class="mb-1 text-center text-[9px] font-bold tracking-widest text-indigo-400 uppercase dark:text-indigo-300"
-                    >
-                        Read-only Access For Viewing Admin Panel
-                    </p>
                     <div
-                        class="flex justify-center gap-4 font-mono text-[10px] text-slate-600 dark:text-gray-400"
+                        class="mt-6 rounded-xl border border-indigo-100 bg-indigo-50/50 p-4 dark:border-indigo-500/30 dark:bg-indigo-500/10"
                     >
-                        <p>
-                            Email:
-                            <span
-                                class="font-bold text-slate-900 dark:text-gray-100"
-                                >check@example.com</span
-                            >
-                        </p>
-                        <p>
-                            Pass:
-                            <span
-                                class="font-bold text-slate-900 dark:text-gray-100"
-                                >check123</span
-                            >
+                        <p
+                            class="mb-1 text-center text-[9px] font-bold tracking-widest text-indigo-400 uppercase dark:text-indigo-300"
+                        >
+                            Read-only Access For Viewing Admin Panel
                         </p>
+                        <div
+                            class="flex justify-center gap-4 font-mono text-[10px] text-slate-600 dark:text-gray-400"
+                        >
+                            <p>
+                                Email:
+                                <span
+                                    class="font-bold text-slate-900 dark:text-gray-100"
+                                    >check@example.com</span
+                                >
+                            </p>
+                            <p>
+                                Pass:
+                                <span
+                                    class="font-bold text-slate-900 dark:text-gray-100"
+                                    >check123</span
+                                >
+                            </p>
+                        </div>
                     </div>
-                </div>
-                <button
-                    :disabled="form.processing"
-                    class="mt-8 w-full rounded-2xl bg-slate-900 py-4 text-xs font-black tracking-widest text-white uppercase transition-all hover:scale-[1.02] hover:bg-indigo-600 active:scale-[0.98] dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-indigo-600 dark:hover:text-white"
-                >
-                    {{ form.processing ? 'Authenticating...' : 'Enter System' }}
-                </button>
+                    <k-button type="submit" fill :disabled="form.processing">
+                        {{
+                            form.processing
+                                ? 'Authenticating...'
+                                : 'Enter System'
+                        }}
+                    </k-button>
 
-                <div class="mt-6 text-center">
-                    <p
-                        class="text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-gray-500"
-                    >
-                        Want to be a member?
-                        <Link
-                            href="/join"
-                            class="ml-1 text-indigo-600 transition-colors hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
+                    <div class="mt-6 text-center">
+                        <p
+                            class="text-[10px] font-black tracking-widest text-slate-400 uppercase dark:text-gray-500"
                         >
-                            Join here
-                        </Link>
-                    </p>
-                </div>
-            </form>
+                            Want to be a member?
+                            <Link
+                                href="/join"
+                                class="ml-1 text-indigo-600 transition-colors hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
+                            >
+                                Join here
+                            </Link>
+                        </p>
+                    </div>
+                </form>
+            </k-card>
 
             <div class="mt-8 text-center">
-                <Link
-                    href="/"
-                    class="text-[10px] font-black tracking-widest text-slate-400 uppercase transition-colors hover:text-slate-900 dark:text-gray-500 dark:hover:text-gray-100"
-                >
-                    ← Back to Site
-                </Link>
+                <k-button clear href="/"> ← Back to Site </k-button>
             </div>
         </div>
     </div>
diff --git a/resources/js/pages/errors/404.vue b/resources/js/pages/errors/404.vue
index b5e88dd..37bf5b1 100644
--- a/resources/js/pages/errors/404.vue
+++ b/resources/js/pages/errors/404.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { kButton, kCard, kNavbar, kPage } from 'konsta/vue';
 import {
     HelpCircle,
     ArrowLeft,
@@ -7,7 +7,6 @@ import {
     BookOpen,
     Users,
     Info,
-    ChevronRight,
 } from 'lucide-vue-next';
 
 const goBack = () => {
@@ -18,142 +17,103 @@ const goBack = () => {
 </script>
 
 <template>
-    <div
-        class="relative flex min-h-[calc(100vh-10rem)] items-center justify-center px-4 py-16 sm:px-6 sm:py-24"
-    >
-        <!-- Glowing aura behind the card -->
+    <kPage>
+        <kNavbar title="Error" />
         <div
-            class="animate-pulse-glow absolute top-1/2 left-1/2 -z-10 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-400 opacity-15 blur-[100px] transition-all duration-700"
-        ></div>
-
-        <!-- Glass card content -->
-        <div
-            class="relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200/50 bg-white/70 p-8 text-center shadow-xl backdrop-blur-md transition-all duration-300 hover:border-slate-300/40 hover:shadow-2xl sm:p-10 dark:border-gray-700/50 dark:bg-gray-900/70 dark:hover:border-gray-600/40"
+            class="relative flex min-h-[calc(100vh-10rem)] items-center justify-center px-4 py-16 sm:px-6 sm:py-24"
         >
-            <!-- Animated decorative icon wrapper -->
+            <!-- Glowing aura behind the card -->
             <div
-                class="relative mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-50 text-slate-800 shadow-inner dark:bg-gray-800 dark:text-gray-200"
-            >
-                <div
-                    class="absolute inset-0 animate-ping rounded-2xl bg-slate-100 opacity-60 dark:bg-gray-800"
-                ></div>
+                class="animate-pulse-glow absolute top-1/2 left-1/2 -z-10 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-400 opacity-15 blur-[100px] transition-all duration-700"
+            ></div>
+
+            <!-- Glass card content -->
+            <k-card outline>
+                <!-- Animated decorative icon wrapper -->
                 <div
-                    class="animate-float flex items-center justify-center text-slate-700 dark:text-gray-300"
+                    class="relative mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-50 text-slate-800 shadow-inner dark:bg-gray-800 dark:text-gray-200"
                 >
-                    <HelpCircle
-                        class="h-12 w-12 stroke-[1.5] text-indigo-600 dark:text-indigo-400"
-                    />
+                    <div
+                        class="absolute inset-0 animate-ping rounded-2xl bg-slate-100 opacity-60 dark:bg-gray-800"
+                    ></div>
+                    <div
+                        class="animate-float flex items-center justify-center text-slate-700 dark:text-gray-300"
+                    >
+                        <HelpCircle
+                            class="h-12 w-12 stroke-[1.5] text-indigo-600 dark:text-indigo-400"
+                        />
+                    </div>
                 </div>
-            </div>
-
-            <!-- Big Gradient Error Code -->
-            <h1
-                class="bg-gradient-to-r from-indigo-600 via-violet-600 to-pink-500 bg-clip-text text-8xl font-black tracking-tight text-transparent select-none sm:text-9xl"
-            >
-                404
-            </h1>
-
-            <h2
-                class="mt-4 text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
-            >
-                পৃষ্ঠাটি খুঁজে পাওয়া যায়নি
-            </h2>
-
-            <p
-                class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-gray-400"
-            >
-                আপনি যে পৃষ্ঠাটি খুঁজছেন, সেটি পাওয়া যায়নি। এটি হয়তো সরিয়ে
-                ফেলা হয়েছে, ঠিকানা পরিবর্তন হয়েছে, ডিলেট করা হয়েছে অথবা এমন
-                কোনো পৃষ্ঠা নেই।
-            </p>
-
-            <!-- Navigation Buttons -->
-            <div
-                class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row"
-            >
-                <button
-                    @click="goBack"
-                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-slate-100 px-5 py-2.5 text-sm font-semibold text-slate-700 transition-all duration-150 hover:bg-slate-200 active:scale-95 sm:w-auto dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+
+                <!-- Big Gradient Error Code -->
+                <h1
+                    class="bg-gradient-to-r from-indigo-600 via-violet-600 to-pink-500 bg-clip-text text-8xl font-black tracking-tight text-transparent select-none sm:text-9xl"
                 >
-                    <ArrowLeft class="h-4 w-4" />
-                    আগের পৃষ্ঠায় ফিরুন
-                </button>
+                    404
+                </h1>
 
-                <Link
-                    href="/"
-                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-100 transition-all duration-150 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-200/60 active:scale-[0.98] sm:w-auto dark:shadow-indigo-500/20 dark:hover:shadow-indigo-500/30"
+                <h2
+                    class="mt-4 text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
                 >
-                    <Home class="h-4 w-4" />
-                    হোমপেজে যান
-                </Link>
-            </div>
-
-            <!-- Divider -->
-            <div class="my-8 h-px bg-slate-200/60 dark:bg-gray-700/60"></div>
-
-            <!-- Directory / Helpful Links -->
-            <div class="text-left">
-                <h3
-                    class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
+                    পৃষ্ঠাটি খুঁজে পাওয়া যায়নি
+                </h2>
+
+                <p
+                    class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-gray-400"
                 >
-                    অন্যান্য লিংকসমূহ
-                </h3>
+                    আপনি যে পৃষ্ঠাটি খুঁজছেন, সেটি পাওয়া যায়নি। এটি হয়তো
+                    সরিয়ে ফেলা হয়েছে, ঠিকানা পরিবর্তন হয়েছে, ডিলেট করা হয়েছে
+                    অথবা এমন কোনো পৃষ্ঠা নেই।
+                </p>
 
-                <div class="mt-3 grid grid-cols-1 gap-2.5">
-                    <Link
-                        href="/"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
-                    >
-                        <div class="flex items-center gap-3">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 transition-colors group-hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500/20"
-                            >
-                                <BookOpen class="h-4 w-4" />
-                            </div>
-                            <span>Academic Resources</span>
-                        </div>
-                        <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
-                        />
-                    </Link>
+                <!-- Navigation Buttons -->
+                <div
+                    class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row"
+                >
+                    <k-button fill rounded large @click="goBack">
+                        <ArrowLeft class="h-4 w-4" />
+                        আগের পৃষ্ঠায় ফিরুন
+                    </k-button>
+
+                    <k-button clear href="/">
+                        <Home class="h-4 w-4" />
+                        হোমপেজে যান
+                    </k-button>
+                </div>
 
-                    <Link
-                        href="/join"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
-                    >
-                        <div class="flex items-center gap-3">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 transition-colors group-hover:bg-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20"
-                            >
-                                <Users class="h-4 w-4" />
-                            </div>
-                            <span>Join Our Team</span>
-                        </div>
-                        <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
-                        />
-                    </Link>
+                <!-- Divider -->
+                <div
+                    class="my-8 h-px bg-slate-200/60 dark:bg-gray-700/60"
+                ></div>
 
-                    <Link
-                        href="/about-us"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
+                <!-- Directory / Helpful Links -->
+                <div class="text-left">
+                    <h3
+                        class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                     >
-                        <div class="flex items-center gap-3">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-600 transition-colors group-hover:bg-sky-100 dark:bg-sky-500/10 dark:text-sky-400 dark:group-hover:bg-sky-500/20"
-                            >
-                                <Info class="h-4 w-4" />
-                            </div>
-                            <span>About Us</span>
-                        </div>
-                        <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
-                        />
-                    </Link>
+                        অন্যান্য লিংকসমূহ
+                    </h3>
+
+                    <div class="mt-3 grid grid-cols-1 gap-2.5">
+                        <k-button fill rounded large href="/">
+                            <BookOpen class="h-4 w-4" />
+                            Academic Resources
+                        </k-button>
+
+                        <k-button fill rounded large href="/join">
+                            <Users class="h-4 w-4" />
+                            Join Our Team
+                        </k-button>
+
+                        <k-button fill rounded large href="/about-us">
+                            <Info class="h-4 w-4" />
+                            About Us
+                        </k-button>
+                    </div>
                 </div>
-            </div>
+            </k-card>
         </div>
-    </div>
+    </kPage>
 </template>
 
 <style scoped>
diff --git a/resources/js/pages/errors/503.vue b/resources/js/pages/errors/503.vue
index d75affe..277e0af 100644
--- a/resources/js/pages/errors/503.vue
+++ b/resources/js/pages/errors/503.vue
@@ -1,151 +1,123 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import {
-    Wrench,
-    Home,
-    Facebook,
-    Github,
-    Mail,
-    ChevronRight,
-} from 'lucide-vue-next';
+import { kButton, kCard, kNavbar, kPage } from 'konsta/vue';
+import { Wrench, Home, Facebook, Github, Mail } from 'lucide-vue-next';
 </script>
 
 <template>
-    <div
-        class="relative flex min-h-[calc(100vh-10rem)] items-center justify-center px-4 py-16 sm:px-6 sm:py-24"
-    >
-        <!-- Glowing aura behind the card -->
+    <kPage>
+        <kNavbar title="Service Unavailable" />
         <div
-            class="animate-pulse-glow absolute top-1/2 left-1/2 -z-10 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-400 opacity-15 blur-[100px] transition-all duration-700"
-        ></div>
-
-        <!-- Glass card content -->
-        <div
-            class="relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-slate-200/50 bg-white/70 p-8 text-center shadow-xl backdrop-blur-md transition-all duration-300 hover:border-slate-300/40 hover:shadow-2xl sm:p-10 dark:border-gray-700/50 dark:bg-gray-900/70 dark:hover:border-gray-600/40"
+            class="relative flex min-h-[calc(100vh-10rem)] items-center justify-center px-4 py-16 sm:px-6 sm:py-24"
         >
-            <!-- Animated decorative icon wrapper -->
+            <!-- Glowing aura behind the card -->
             <div
-                class="relative mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-50 text-slate-800 shadow-inner dark:bg-gray-800 dark:text-gray-200"
-            >
-                <div
-                    class="absolute inset-0 animate-ping rounded-2xl bg-slate-100 opacity-60 dark:bg-gray-800"
-                ></div>
+                class="animate-pulse-glow absolute top-1/2 left-1/2 -z-10 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-400 opacity-15 blur-[100px] transition-all duration-700"
+            ></div>
+
+            <!-- Glass card content -->
+            <k-card outline>
+                <!-- Animated decorative icon wrapper -->
                 <div
-                    class="animate-float flex items-center justify-center text-slate-700 dark:text-gray-300"
+                    class="relative mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-slate-50 text-slate-800 shadow-inner dark:bg-gray-800 dark:text-gray-200"
                 >
-                    <Wrench
-                        class="h-12 w-12 stroke-[1.5] text-indigo-600 dark:text-indigo-400"
-                    />
+                    <div
+                        class="absolute inset-0 animate-ping rounded-2xl bg-slate-100 opacity-60 dark:bg-gray-800"
+                    ></div>
+                    <div
+                        class="animate-float flex items-center justify-center text-slate-700 dark:text-gray-300"
+                    >
+                        <Wrench
+                            class="h-12 w-12 stroke-[1.5] text-indigo-600 dark:text-indigo-400"
+                        />
+                    </div>
                 </div>
-            </div>
-
-            <!-- Big Gradient Error Code -->
-            <h1
-                class="bg-gradient-to-r from-indigo-600 via-violet-600 to-pink-500 bg-clip-text text-8xl font-black tracking-tight text-transparent select-none sm:text-9xl"
-            >
-                503
-            </h1>
-
-            <h2
-                class="mt-4 text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
-            >
-                রক্ষণাবেক্ষণের কাজ চলছে
-            </h2>
 
-            <p
-                class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-gray-400"
-            >
-                আপনার অভিজ্ঞতা আরও উন্নত করতে আমরা সিস্টেমের আধুনিকায়নের কাজ
-                করছি। খুব শীঘ্রই আমরা পুনরায় অনলাইনে ফিরব। আপনার ধৈর্যের জন্য
-                অসংখ্য ধন্যবাদ!
-            </p>
+                <!-- Big Gradient Error Code -->
+                <h1
+                    class="bg-gradient-to-r from-indigo-600 via-violet-600 to-pink-500 bg-clip-text text-8xl font-black tracking-tight text-transparent select-none sm:text-9xl"
+                >
+                    503
+                </h1>
 
-            <!-- Navigation Buttons -->
-            <div
-                class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row"
-            >
-                <Link
-                    href="/"
-                    class="inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md shadow-indigo-100 transition-all duration-150 hover:scale-[1.02] hover:shadow-lg hover:shadow-indigo-200/60 active:scale-[0.98] sm:w-auto dark:shadow-indigo-500/20 dark:hover:shadow-indigo-500/30"
+                <h2
+                    class="mt-4 text-2xl font-bold tracking-tight text-slate-900 dark:text-gray-100"
                 >
-                    <Home class="h-4 w-4" />
-                    পেজটি রিফ্রেশ করুন
-                </Link>
-            </div>
+                    রক্ষণাবেক্ষণের কাজ চলছে
+                </h2>
 
-            <!-- Divider -->
-            <div class="my-8 h-px bg-slate-200/60 dark:bg-gray-700/60"></div>
+                <p
+                    class="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-slate-500 dark:text-gray-400"
+                >
+                    আপনার অভিজ্ঞতা আরও উন্নত করতে আমরা সিস্টেমের আধুনিকায়নের
+                    কাজ করছি। খুব শীঘ্রই আমরা পুনরায় অনলাইনে ফিরব। আপনার
+                    ধৈর্যের জন্য অসংখ্য ধন্যবাদ!
+                </p>
 
-            <!-- Directory / Helpful Links -->
-            <div class="text-left">
-                <h3
-                    class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
+                <!-- Navigation Buttons -->
+                <div
+                    class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row"
                 >
-                    Stay Connected & Updates
-                </h3>
+                    <k-button fill rounded large href="/">
+                        <Home class="h-4 w-4" />
+                        পেজটি রিফ্রেশ করুন
+                    </k-button>
+                </div>
 
-                <div class="mt-3 grid grid-cols-1 gap-2.5">
-                    <!-- Facebook Page -->
-                    <a
-                        href="https://facebook.com/hscstackbd"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
-                    >
-                        <div class="flex items-center gap-3">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 transition-colors group-hover:bg-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500/20"
-                            >
-                                <Facebook class="h-4 w-4" />
-                            </div>
-                            <span>Follow us on Facebook</span>
-                        </div>
-                        <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
-                        />
-                    </a>
+                <!-- Divider -->
+                <div
+                    class="my-8 h-px bg-slate-200/60 dark:bg-gray-700/60"
+                ></div>
 
-                    <!-- GitHub Profile -->
-                    <a
-                        href="https://github.com/hscstack"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
+                <!-- Directory / Helpful Links -->
+                <div class="text-left">
+                    <h3
+                        class="text-xs font-bold tracking-wider text-slate-400 uppercase dark:text-gray-500"
                     >
-                        <div class="flex items-center gap-3">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-900 text-white transition-colors group-hover:bg-slate-800 dark:bg-gray-100 dark:text-gray-900 dark:group-hover:bg-gray-200"
-                            >
-                                <Github class="h-4 w-4" />
-                            </div>
-                            <span>Check our GitHub</span>
-                        </div>
-                        <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
-                        />
-                    </a>
+                        Stay Connected & Updates
+                    </h3>
 
-                    <!-- Support Email -->
-                    <a
-                        href="mailto:support@hscstack.com"
-                        class="group flex items-center justify-between rounded-xl border border-slate-100 bg-white/40 p-3 text-sm font-medium text-slate-700 transition-all duration-150 hover:border-slate-200 hover:bg-white/80 hover:shadow-sm dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-900/80"
-                    >
-                        <div class="flex items-center gap-3">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/20"
-                            >
-                                <Mail class="h-4 w-4" />
-                            </div>
-                            <span>Contact Support</span>
-                        </div>
-                        <ChevronRight
-                            class="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-gray-500"
-                        />
-                    </a>
+                    <div class="mt-3 grid grid-cols-1 gap-2.5">
+                        <!-- Facebook Page -->
+                        <k-button
+                            fill
+                            rounded
+                            large
+                            href="https://facebook.com/hscstackbd"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <Facebook class="h-4 w-4" />
+                            Follow us on Facebook
+                        </k-button>
+
+                        <!-- GitHub Profile -->
+                        <k-button
+                            fill
+                            rounded
+                            large
+                            href="https://github.com/hscstack"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <Github class="h-4 w-4" />
+                            Check our GitHub
+                        </k-button>
+
+                        <!-- Support Email -->
+                        <k-button
+                            fill
+                            rounded
+                            large
+                            href="mailto:support@hscstack.com"
+                        >
+                            <Mail class="h-4 w-4" />
+                            Contact Support
+                        </k-button>
+                    </div>
                 </div>
-            </div>
+            </k-card>
         </div>
-    </div>
+    </kPage>
 </template>
 
 <style scoped>
diff --git a/resources/js/pages/platform/AboutUs.vue b/resources/js/pages/platform/AboutUs.vue
index 3d76423..a40c5b1 100644
--- a/resources/js/pages/platform/AboutUs.vue
+++ b/resources/js/pages/platform/AboutUs.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import {} from '@inertiajs/vue3';
+import { kButton } from 'konsta/vue';
 import { ArrowLeft } from 'lucide-vue-next';
 import UserCard from '@/components/UserCard.vue';
 
@@ -13,15 +14,10 @@ const goBack = () => {
 
 <template>
     <header class="mx-auto max-w-4xl px-4 pt-16 pb-14 text-center sm:pt-20">
-        <button
-            @click="goBack"
-            class="group mb-5 inline-flex items-center gap-2 text-xs font-bold text-slate-400 transition-colors hover:text-indigo-600 dark:text-gray-500 dark:hover:text-indigo-400"
-        >
-            <ArrowLeft
-                class="h-3.5 w-3.5 transition-transform group-hover:-translate-x-0.5"
-            />
+        <k-button clear @click="goBack">
+            <ArrowLeft class="h-3.5 w-3.5" />
             Go Back
-        </button>
+        </k-button>
         <h1
             class="text-4xl font-black tracking-tight text-slate-950 sm:text-6xl dark:text-gray-100"
         >
@@ -58,12 +54,9 @@ const goBack = () => {
                         nationwide.
                     </p>
                 </div>
-                <Link
-                    href="/join"
-                    class="inline-flex w-full items-center justify-center rounded-xl bg-slate-950 px-4 py-3 text-xs font-bold text-white shadow-sm transition-all hover:bg-slate-900 active:scale-[0.98] dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200"
-                >
+                <k-button fill rounded href="/join">
                     Apply for a Role
-                </Link>
+                </k-button>
             </div>
         </div>
     </main>
diff --git a/resources/js/pages/platform/JoinTeam.vue b/resources/js/pages/platform/JoinTeam.vue
index 97fd51b..5dbcc6b 100644
--- a/resources/js/pages/platform/JoinTeam.vue
+++ b/resources/js/pages/platform/JoinTeam.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import { kBadge, kButton } from 'konsta/vue';
 import {
     ArrowLeft,
     Megaphone,
@@ -146,12 +147,9 @@ const whatsappLink = computed(() => {
                             >
                                 {{ role.title }}
                             </h3>
-                            <span
-                                v-if="selectedRole === role.id"
-                                class="inline-flex items-center rounded-md border border-indigo-100 bg-indigo-50 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-indigo-700 uppercase dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300"
-                            >
+                            <k-badge v-if="selectedRole === role.id" outline>
                                 Selected
-                            </span>
+                            </k-badge>
                         </div>
                         <p
                             class="mt-1 text-sm leading-relaxed font-medium text-slate-700 dark:text-gray-300"
@@ -241,15 +239,18 @@ const whatsappLink = computed(() => {
                             >?
                         </p>
 
-                        <a
+                        <k-button
+                            fill
+                            rounded
                             :href="whatsappLink"
                             target="_blank"
                             rel="noopener noreferrer"
-                            class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-3 text-sm font-bold text-white shadow-sm transition-all hover:bg-emerald-700 focus:ring-4 focus:ring-emerald-500/20 focus:outline-none active:scale-[0.98]"
+                            class="w-full"
+                            style="background-color: #16a34a; color: white"
                         >
                             <MessageSquareShare class="h-4 w-4" />
                             Message on WhatsApp
-                        </a>
+                        </k-button>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/types/global.d.ts b/resources/js/types/global.d.ts
index a53aee2..13313c3 100644
--- a/resources/js/types/global.d.ts
+++ b/resources/js/types/global.d.ts
@@ -31,3 +31,332 @@ declare module 'vue' {
         $headManager: ReturnType<typeof createHeadManager>;
     }
 }
+
+declare module 'konsta/vue' {
+    import type { DefineComponent } from 'vue';
+
+    export const kApp: DefineComponent<
+        {
+            theme?: 'ios' | 'material';
+            dark?: boolean;
+            touchRipple?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kPage: DefineComponent<
+        Record<string, unknown>,
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kNavbar: DefineComponent<
+        {
+            title?: string;
+            subtitle?: string;
+            backLink?: string | boolean;
+            transparent?: boolean;
+            blur?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kBlock: DefineComponent<
+        {
+            strong?: boolean;
+            inset?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kButton: DefineComponent<
+        {
+            text?: string;
+            icon?: string;
+            iconOnly?: boolean;
+            fill?: boolean;
+            outline?: boolean;
+            rounded?: boolean;
+            small?: boolean;
+            large?: boolean;
+            raised?: boolean;
+            disabled?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kCard: DefineComponent<
+        {
+            header?: string;
+            footer?: string;
+            outline?: boolean;
+            expandable?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kList: DefineComponent<
+        {
+            strong?: boolean;
+            inset?: boolean;
+            dividers?: boolean;
+            outline?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kListItem: DefineComponent<
+        {
+            title?: string;
+            subtitle?: string;
+            text?: string;
+            media?: string;
+            after?: string;
+            link?: boolean | string;
+            header?: string;
+            footer?: string;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kDialog: DefineComponent<
+        {
+            opened?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kToast: DefineComponent<
+        {
+            opened?: boolean;
+            position?: string;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kListInput: DefineComponent<
+        {
+            type?: string;
+            value?: string | number;
+            placeholder?: string;
+            error?: string;
+            info?: string;
+            label?: string;
+            outline?: boolean;
+            disabled?: boolean;
+            media?: string;
+            clear?: boolean;
+            dropdown?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kToggle: DefineComponent<
+        {
+            checked?: boolean;
+            disabled?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kCheckbox: DefineComponent<
+        {
+            checked?: boolean;
+            name?: string;
+            value?: string | number;
+            disabled?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kBadge: DefineComponent<
+        {
+            color?: string;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kChip: DefineComponent<
+        {
+            text?: string;
+            delete?: boolean;
+            outline?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kPreloader: DefineComponent<
+        {
+            size?: string;
+            color?: string;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kLink: DefineComponent<
+        {
+            text?: string;
+            icon?: string;
+            iconOnly?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kPanel: DefineComponent<
+        {
+            opened?: boolean;
+            side?: 'left' | 'right';
+            effect?: string;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kPopover: DefineComponent<
+        {
+            opened?: boolean;
+            target?: string;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kSearchbar: DefineComponent<
+        {
+            value?: string;
+            placeholder?: string;
+            disableButton?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kBreadcrumbs: DefineComponent<
+        Record<string, unknown>,
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kBreadcrumbsItem: DefineComponent<
+        {
+            active?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kBlockTitle: DefineComponent<
+        {
+            medium?: boolean;
+            large?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kSegmented: DefineComponent<
+        {
+            strong?: boolean;
+            outline?: boolean;
+            round?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kTabbar: DefineComponent<
+        {
+            labels?: boolean;
+            outline?: boolean;
+            fill?: boolean;
+            translucent?: boolean;
+            position?: 'top' | 'bottom';
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kTabbarLink: DefineComponent<
+        {
+            text?: string;
+            icon?: string;
+            active?: boolean;
+            badge?: string | number;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+
+    export const kIcon: DefineComponent<
+        {
+            badge?: string;
+            badgeColors?: { bg?: string; text?: string };
+            ios?: string;
+            material?: string;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kNavbarBackLink: DefineComponent<
+        {
+            text?: string;
+            showText?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kBlockHeader: DefineComponent<
+        Record<string, unknown>,
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kRadio: DefineComponent<
+        {
+            checked?: boolean;
+            name?: string;
+            value?: string | number;
+            disabled?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kListButton: DefineComponent<
+        {
+            title?: string;
+            link?: boolean | string;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kSegmentedButton: DefineComponent<
+        {
+            active?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+
+    export const kToolbar: DefineComponent<
+        {
+            position?: 'top' | 'bottom';
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kProgressbar: DefineComponent<
+        {
+            progress?: number;
+            infinite?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kSheet: DefineComponent<
+        {
+            opened?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+    export const kPhotoBrowser: DefineComponent<
+        {
+            photos?: Array<{ url?: string; caption?: string }>;
+            opened?: boolean;
+        },
+        Record<string, unknown>,
+        unknown
+    >;
+
+    export function useTheme(): { value: 'ios' | 'material' };
+}
diff --git a/vite.config.ts b/vite.config.ts
index f0fee80..d5d0a42 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -53,4 +53,7 @@ export default defineConfig({
             },
         }),
     ],
+    ssr: {
+        noExternal: ['konsta'],
+    },
 });