diff --git a/src/lib/sqmenu.svelte b/src/lib/sqmenu.svelte
new file mode 100644
index 0000000..7868496
--- /dev/null
+++ b/src/lib/sqmenu.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { Card } from "flowbite-svelte";
+    export let menudata: {menuName: string, menuLink: string}[] = [];
+    $: colNum = Math.floor(menudata.length / 2) < 3 ? Math.floor(menudata.length / 2) : 3;
+</script>
+<div class="w-[60%] grid gap-y-8 grid-cols-{colNum} text-center mx-auto py-5 sm:grid-cols-1 justify-content-center">
+{#each menudata as menu}
+  <Card href='{menu.menuLink}' class='lg:px-16 lg:py-8 md:px-12 md:py-6 dark:hover:bg-zinc-900 dark:bg-transparent bg-transparent min-w-[50%]'>
+      <h2 class='text-xl'>{menu.menuName}</h2>
+  </Card>
+{/each}
+</div>