diff --git a/ceremony/src/lib/components/Install.svelte b/ceremony/src/lib/components/Install.svelte
index 2c631250f2..0142408dd8 100644
--- a/ceremony/src/lib/components/Install.svelte
+++ b/ceremony/src/lib/components/Install.svelte
@@ -12,9 +12,9 @@ const copy = () => {
 
 <div class="p-8  bg-gradient-to-t from-transparent via-black/50 to-transparent backdrop-blur w-full flex items-center flex-col">
   <H1 class="text-center mb-4" >Install client</H1>
-  <code class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-white text-black p-4 pl-6 font-mono">
+  <code class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-black text-white p-4 pl-6 font-mono">
     <span class="flex gap-4">
-        <span class="shrink-0">
+        <span class="shrink-0 text-union-accent-500">
             $
         </span>
 
diff --git a/ceremony/src/lib/supabase/index.ts b/ceremony/src/lib/supabase/index.ts
index 60709bec3d..a78daefb57 100644
--- a/ceremony/src/lib/supabase/index.ts
+++ b/ceremony/src/lib/supabase/index.ts
@@ -2,10 +2,32 @@ import { user } from "$lib/stores/user.svelte.ts"
 import {
   getContribution,
   getContributor,
+  getQueueCount,
   getSubmittedContribution,
   getUserQueuePosition
 } from "$lib/supabase/queries.ts"
 import type { ContributionStatus } from "$lib/supabase/types.ts"
+import { supabase } from "$lib/supabase/client.ts"
+
+export const callJoinQueue = async (codeId: string) => {
+  const userId = user.session?.user.id
+  if (!userId) {
+    throw new Error("User is not logged in")
+  }
+
+  try {
+    const { data, error } = await supabase.rpc("join_queue", { code_id: codeId })
+
+    if (error) {
+      console.error("Error calling join_queue:", error)
+      return
+    }
+
+    console.log("Successfully joined queue:", data)
+  } catch (error) {
+    console.error("Unexpected error:", error)
+  }
+}
 
 export const getUserQueueInfo = async () => {
   const userId = user.session?.user.id
@@ -13,7 +35,8 @@ export const getUserQueueInfo = async () => {
     throw new Error("User is not logged in")
   }
 
-  const { data, count, error } = await getUserQueuePosition(userId)
+  const { data, error } = await getUserQueuePosition(userId)
+  const { count, error: countError } = await getQueueCount()
 
   if (error) {
     console.error("Error getting user queue position:", error)
diff --git a/ceremony/src/lib/supabase/queries.ts b/ceremony/src/lib/supabase/queries.ts
index 40d2e986bd..2bcd9c5ba8 100644
--- a/ceremony/src/lib/supabase/queries.ts
+++ b/ceremony/src/lib/supabase/queries.ts
@@ -34,11 +34,7 @@ export const getContribution = async (userId: string) => {
 }
 
 export const getUserQueuePosition = async (userId: string) => {
-  const { data, error, count } = await supabase
-    .from("current_queue")
-    .select("*", { count: "exact" })
-    .eq("id", userId)
-    .single()
+  const { data, error } = await supabase.from("current_queue").select("*").eq("id", userId).single()
 
   if (error) {
     if (error.code === "PGRST116") {
@@ -48,7 +44,7 @@ export const getUserQueuePosition = async (userId: string) => {
     return { data: undefined, error }
   }
 
-  return { data, count, error: undefined }
+  return { data, error: undefined }
 }
 
 export const getQueueCount = async () => {
diff --git a/ceremony/src/routes/+layout.svelte b/ceremony/src/routes/+layout.svelte
index fddec4a7c5..1c92247467 100644
--- a/ceremony/src/routes/+layout.svelte
+++ b/ceremony/src/routes/+layout.svelte
@@ -63,7 +63,7 @@ onMount(() => {
   }
 
   app
-    .load("https://draft.spline.design/r6WgY2-52aHVU2TZ/scene.splinecode")
+    .load("https://prod.spline.design/6An57q5Kr37gF2k0/scene.splinecode")
     .then(splineScene => {
       loading = false
     })
@@ -93,7 +93,7 @@ const queryClient = new QueryClient()
   <Navbar/>
   <canvas
           id="canvas3d"
-          class="pointer-events-none w-full h-auto inset-0 absolute -z-10 canvas-fade"
+          class=" w-full h-auto inset-0 absolute -z-10 canvas-fade"
           class:loaded={!loading}
   ></canvas>
 
diff --git a/ceremony/src/routes/app/+page.svelte b/ceremony/src/routes/app/+page.svelte
index ab940adadd..e8ab2dbd49 100644
--- a/ceremony/src/routes/app/+page.svelte
+++ b/ceremony/src/routes/app/+page.svelte
@@ -6,7 +6,6 @@ import Spinner from "$lib/components/Spinner.svelte"
 import { reactiveQueryArgs } from "$lib/utils/utils.svelte.ts"
 import H2 from "$lib/components/typography/H2.svelte"
 import { checkContributionStatus, getUserQueueInfo } from "$lib/supabase"
-import Button from "$lib/components/Button.svelte"
 import { checkStatus, start } from "$lib/client"
 import Install from "$lib/components/Install.svelte"
 
@@ -46,18 +45,19 @@ let {
 } = $derived($contributionQuery)
 let { data: client, isLoading: clientLoading, error: clientError } = $derived($clientQuery)
 
-//TODO SAVE IN LOCAL STORAGE AND ADD INFO TEXT ABOUT HAVING THE BROWSER OPEN
-let auto = $state(false)
-
+// this calls contribute every query now, we can add a check so if downloading, uploading or contributing we stop it.
+// but the client will return 503 if you try after it started.
+// handle empty contribution and after expire
 $effect(() => {
-  if (auto) {
-    if (contribute?.canContribute && contribute?.shouldContribute) {
-      if (client) {
-        start()
-      }
-    }
+  if (contribute?.canContribute && contribute?.shouldContribute && client) {
+    start()
   }
 })
+
+window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
+  e.preventDefault()
+  e.returnValue = ""
+})
 </script>
 
 
@@ -65,33 +65,25 @@ $effect(() => {
 
   <Text class="uppercase">USER: <span class="text-union-accent-500">{user?.session?.user.email}</span></Text>
 
-<!--  First we check if the user is in the queue, if so we show the queue position.
-
-  If not they might be the current contributor or already contributed or we are verifying their contribution.
-
-  If they are able to contribute they need to have the client installed.-->
-
   {#if queueLoading}
     <Spinner class="size-4 text-union-accent-500"/>
-  {:else if queue.inQueue}
+  {:else if queue?.inQueue}
 
     <H2>You are in queue</H2>
-    <Text>Position: {queue.position}/{queue.count + 1}</Text>
+    <Text>Position: {queue?.position}/{queue?.count}</Text>
 
-  {:else if contribute?.canContribute && contribute?.shouldContribute}
+  {:else if !contribute?.canContribute && !contribute?.shouldContribute}
 
     {#if clientError}
       <Text>Client connected?</Text>
-      <Install />
+      <Install/>
     {:else if clientLoading}
       <Spinner class="size-4 text-red-500"/>
     {:else if client}
       <Text>{client.status}</Text>
-      <Button onclick={start}>Contribute</Button>
     {:else}
       <Text>Waiting for client...</Text>
     {/if}
-    <Text>Auto contribute<Button onclick={() => auto = true}>{auto}</Button></Text>
 
   {:else if contribute?.isVerifying}
 
@@ -103,4 +95,4 @@ $effect(() => {
 
   {/if}
 
-</div>
+</div>
\ No newline at end of file