diff --git a/package.json b/package.json
index 74c0c79488..44b06824a4 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@67539a6",
-        "@appwrite.io/pink-icons": "0.25.0",
+        "@appwrite.io/pink-icons": "^0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",
         "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8dcaa17",
@@ -46,7 +46,8 @@
         "remarkable": "^2.0.1",
         "svelte-confetti": "^1.4.0",
         "three": "^0.181.2",
-        "tippy.js": "^6.3.7"
+        "tippy.js": "^6.3.7",
+        "zod": "^3.25.76"
     },
     "devDependencies": {
         "@eslint/compat": "^1.4.1",
diff --git a/src/global.d.ts b/src/global.d.ts
index 104ada708c..364cc989d0 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -12,3 +12,6 @@ namespace App {
         type?: string;
     }
 }
+
+declare module '@appwrite.io/pink-legacy';
+declare module '@appwrite.io/pink-icons';
\ No newline at end of file
diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index c45d112fe4..cbe5cab189 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -3,56 +3,79 @@
 
     export let overflow = true;
     export let hideFooter = false;
+    export let interactive = false;
     export let gap: 'none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' = 'l';
 </script>
 
-<Card.Base>
-    <Layout.Stack gap="xl" justifyContent="space-around">
-        <div class="card-grid-content">
-            <Layout.Stack gap="xxs" class="card-grid-main">
-                <Typography.Title size="s" truncate><slot name="title" /></Typography.Title>
-                {#if $$slots.default}
-                    <Typography.Text>
-                        <slot />
-                    </Typography.Text>
-                {/if}
-            </Layout.Stack>
-            <div class="card-grid-aside" style:overflow={overflow ? 'visible' : 'hidden'}>
-                <Layout.Stack {gap}>
-                    <slot name="aside" />
-                </Layout.Stack>
+<div class="card-grid-wrapper" class:interactive>
+    <Card.Base>
+        <Layout.Stack gap="xl" justifyContent="space-around">
+            <div class="card-grid-content">
+                <div class="card-grid-main">
+                    <Layout.Stack gap="xxs">
+                        <Typography.Title size="s" truncate><slot name="title" /></Typography.Title>
+                        {#if $$slots.default}
+                            <Typography.Text>
+                                <slot />
+                            </Typography.Text>
+                        {/if}
+                    </Layout.Stack>
+                </div>
+                <div class="card-grid-aside" style:overflow={overflow ? 'visible' : 'hidden'}>
+                    <Layout.Stack {gap}>
+                        <slot name="aside" />
+                    </Layout.Stack>
+                </div>
             </div>
-        </div>
-        {#if $$slots.actions && !hideFooter}
-            <span
-                style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
-                <Divider />
-            </span>
-            <Layout.Stack direction="row-reverse">
-                <slot name="actions" />
-            </Layout.Stack>
-        {/if}
-    </Layout.Stack>
-</Card.Base>
+            {#if $$slots.actions && !hideFooter}
+                <span
+                    style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
+                    <Divider />
+                </span>
+                <Layout.Stack direction="row-reverse">
+                    <slot name="actions" />
+                </Layout.Stack>
+            {/if}
+        </Layout.Stack>
+    </Card.Base>
+</div>
 
 <style>
-    .card-grid-content {
-        display: grid;
-        gap: var(--space-10);
-        align-items: start;
-        grid-template-columns: minmax(0, 1fr);
-    }
+    .card-grid-wrapper.interactive {
+    transition:
+        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+}
 
-    .card-grid-main,
-    .card-grid-aside {
-        min-width: 0;
-    }
+.card-grid-wrapper.interactive:hover {
+    will-change: transform, box-shadow;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.12));
+}
 
-    @media (min-width: 769px) {
-        .card-grid-content {
-            column-gap: var(--space-13);
-            row-gap: var(--space-10);
-            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
-        }
+.card-grid-wrapper.interactive:active {
+    transform: translateY(0);
+    box-shadow: var(--shadow-sm, 0 4px 10px rgba(0, 0, 0, 0.08));
+}
+
+.card-grid-content {
+    display: grid;
+    gap: var(--space-10);
+    align-items: start;
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.card-grid-main,
+.card-grid-aside {
+    min-width: 0;
+}
+
+@media (min-width: 769px) {
+    .card-grid-content {
+        column-gap: var(--space-13);
+        row-gap: var(--space-10);
+        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
     }
-</style>
+}
+</style>
\ No newline at end of file