diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..33ac365
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,86 @@
+GitHub Copilot Instructions for This Repository
+Use Svelte 5 runes exclusively
+
+Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. 
+svelte.dev
+svelte.dev
+
+Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!
+
+Enforce a clean component structure
+
+<script> comes first, followed by markup and then an optional <style> (rarely needed—prefer Tailwind).
+
+Export component props with export let … (still valid in Svelte 5).
+
+Keep each component focused on one visual/behavioural concern; split larger UIs into children.
+
+Tailwind-only styling conventions
+
+Base container: rounded-lg border border-gray-300 (or rounded-md on small items).
+
+Absolutely no shadow-* classes.
+
+Use p-4 or p-6 for internal padding, and gap-* utilities (not margin hacks) for spacing between children.
+
+Prefer neutral greys (gray-50‒gray-800) and a single accent palette defined in tailwind.config.js.
+
+HTML & accessibility
+
+Generate semantic elements (<button>, <nav>, <main>, <section>, <label>, etc.).
+
+Every interactive element must have an accessible name (aria-label, visible text, or title).
+
+Do not generate tabindex gymnastics; rely on natural DOM order.
+
+Type safety & tooling
+
+Default to <script lang="ts"> unless the file is explicitly plain JS.
+
+Always import types from @types/svelte or svelte where needed.
+
+File / folder conventions
+
+Component names are PascalCase.svelte.
+
+Collocate tests as ComponentName.test.ts beside the component.
+
+Put shared util functions in src/lib.
+
+Example pattern (reference only)
+
+svelte
+Copy
+Edit
+<!-- copilot: follow the repo instructions above -->
+<script lang="ts">
+  let count = $state(0);
+  let doubled = $derived(count * 2);
+  $effect(() => console.log(`count is ${count}`));
+</script>
+
+<div class="rounded-lg border border-gray-300 p-4 flex flex-col gap-4">
+  <button
+    class="rounded-md px-4 py-2 bg-blue-600 text-white"
+    on:click={() => count++}
+    aria-label="Increment counter"
+  >
+    {count}
+  </button>
+
+  <p>{doubled}</p>
+</div>
+What not to do
+
+No inline style="" attributes.
+
+No external CSS files unless Tailwind cannot express the rule.
+
+No class names that imply design debt (.box, .wrapper, .container-1, etc.).
+
+Avoid non-reactive variables; if a value affects the UI, use a rune.
+
+NEVER $: label syntax; use $state(), $derived(), and $effect().
+
+If you want to use supabse client in the browser, it is stored in the data
+variable obtained from let { data } = $props();
\ No newline at end of file