update: ui

19 files changed, 332 insertions, 47 deletions

diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 5690609c..aa109f7e 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -183,7 +183,7 @@
       <div
         class="text-5xl md:text-6xl font-semibold tracking-widest flex justify-center"
       >
-        <div class="my-auto" class:text-5xl={!fiat}>
+        <div class="my-auto font-bebasNeue tracking-[0.2rem]" class:text-5xl={!fiat}>
           {fiat ? symbol : "⚡️"}
         </div>
         <div
@@ -194,7 +194,7 @@
           on:blur={blur}
           on:input={input}
           on:keydown={keydown}
-          class="outline-none my-auto"
+          class="outline-none my-auto font-bebasNeue tracking-[0.4rem] mt-2"
         />
       </div>
       <div class="mt-2">
@@ -223,7 +223,7 @@
 				{#if value === arrow}
 					<button
 						type="button"
-						class="bg-gray-100 dark:bg-stone-800 rounded-xl py-4 px-8 font-semibold active:bg-black active:flex justify-center items-center hover:opacity-80"
+						class="bg-gray-100 dark:bg-stone-800 rounded-xl py-4 px-8 font-semibold active:bg-black dark:active:bg-stone-900 active:flex justify-center items-center hover:opacity-80"
 						on:click={() => handleInput(value)}
 					>
 						<Left />
@@ -231,7 +231,7 @@
 				{:else}
 					<button
 						type="button"
-						class="bg-gray-100 dark:bg-stone-800 rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+						class="bg-gray-100 dark:bg-stone-800 rounded-xl py-4 px-8 font-semibold active:bg-black dark:active:bg-stone-900 active:text-white hover:opacity-80"
 						on:click={() => handleInput(value)}>{value}</button
 					>
 				{/if}
diff --git a/src/lib/shadcn/components/ui/button/button.svelte b/src/lib/shadcn/components/ui/button/button.svelte
new file mode 100644
index 00000000..775b9f09
--- /dev/null
+++ b/src/lib/shadcn/components/ui/button/button.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { cn } from "$lib/shadcn/utils";
+	import { buttonVariants } from ".";
+	let className = undefined;
+	export let variant = "default";
+	export let size = "default";
+	export let builders = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/src/lib/shadcn/components/ui/button/index.js b/src/lib/shadcn/components/ui/button/index.js
new file mode 100644
index 00000000..96d93665
--- /dev/null
+++ b/src/lib/shadcn/components/ui/button/index.js
@@ -0,0 +1,32 @@
+import Root from "./button.svelte";
+import { tv } from "tailwind-variants";
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+export {
+	Root,
+	//
+	Root as Button,
+	buttonVariants,
+};
diff --git a/src/lib/shadcn/components/ui/sheet/index.js b/src/lib/shadcn/components/ui/sheet/index.js
new file mode 100644
index 00000000..c892767c
--- /dev/null
+++ b/src/lib/shadcn/components/ui/sheet/index.js
@@ -0,0 +1,99 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { tv } from "tailwind-variants";
+import Portal from "./sheet-portal.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
+export const sheetVariants = tv({
+	base: "fixed z-50 gap-4 bg-background p-6 shadow-lg",
+	variants: {
+		side: {
+			top: "inset-x-0 top-0 border-b",
+			bottom: "inset-x-0 bottom-0 border-t",
+			left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+			right: "inset-y-0 right-0 h-full w-3/4  border-l sm:max-w-sm",
+		},
+	},
+	defaultVariants: {
+		side: "right",
+	},
+});
+export const sheetTransitions = {
+	top: {
+		in: {
+			y: "-100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			y: "-100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	bottom: {
+		in: {
+			y: "100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			y: "100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	left: {
+		in: {
+			x: "-100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			x: "-100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+	right: {
+		in: {
+			x: "100%",
+			duration: 500,
+			opacity: 1,
+		},
+		out: {
+			x: "100%",
+			duration: 300,
+			opacity: 1,
+		},
+	},
+};
diff --git a/src/lib/shadcn/components/ui/sheet/sheet-content.svelte b/src/lib/shadcn/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 00000000..8e7a0ffd
--- /dev/null
+++ b/src/lib/shadcn/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import { SheetOverlay, SheetPortal, sheetTransitions, sheetVariants } from ".";
+	import { cn } from "$lib/shadcn/utils";
+	import { fly } from "svelte/transition";
+	let className = undefined;
+	export let side = "right";
+	export { className as class };
+	export let inTransition = fly;
+	export let inTransitionConfig = sheetTransitions[side ? side : "right"]["in"];
+	export let outTransition = fly;
+	export let outTransitionConfig = sheetTransitions[side ? side : "right"]["out"];
+</script>
+
+<SheetPortal>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		{inTransition}
+		{inTransitionConfig}
+		{outTransition}
+		{outTransitionConfig}
+		class={cn(sheetVariants({ side }), className)}
+		{...$$restProps}
+	>
+		<slot />
+		<SheetPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-100 ring-offset-background hover:bg-swapee-purple transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-black dark:data-[state=open]:bg-white"
+		>
+			<X class="h-8 w-8" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPortal>
diff --git a/src/lib/shadcn/components/ui/sheet/sheet-description.svelte b/src/lib/shadcn/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 00000000..9f75b9f4
--- /dev/null
+++ b/src/lib/shadcn/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/shadcn/utils";
+	let className = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Description>
diff --git a/src/lib/shadcn/components/ui/sheet/sheet-footer.svelte b/src/lib/shadcn/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 00000000..3a958ac9
--- /dev/null
+++ b/src/lib/shadcn/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { cn } from "$lib/shadcn/utils";
+	let className = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/lib/shadcn/components/ui/sheet/sheet-header.svelte b/src/lib/shadcn/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 00000000..c6c098a4
--- /dev/null
+++ b/src/lib/shadcn/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { cn } from "$lib/shadcn/utils";
+	let className = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/shadcn/components/ui/sheet/sheet-overlay.svelte b/src/lib/shadcn/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 00000000..8f308ce9
--- /dev/null
+++ b/src/lib/shadcn/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/shadcn/utils";
+	import { fade } from "svelte/transition";
+	let className = undefined;
+	export let transition = fade;
+	export let transitionConfig = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/shadcn/components/ui/sheet/sheet-portal.svelte b/src/lib/shadcn/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 00000000..c7384693
--- /dev/null
+++ b/src/lib/shadcn/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/shadcn/utils";
+	let className = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Portal>
diff --git a/src/lib/shadcn/components/ui/sheet/sheet-title.svelte b/src/lib/shadcn/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 00000000..1a285c75
--- /dev/null
+++ b/src/lib/shadcn/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/shadcn/utils";
+	let className = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Title
+	class={cn("text-lg font-semibold text-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</SheetPrimitive.Title>
diff --git a/src/locales/en.json b/src/locales/en.json
index 1afa0f22..292c669a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -199,7 +199,7 @@
       "scan": "Scan",
       "paste": "Paste",
       "next": "Next",
-      "placeholder": "Paste a bitcoin address, lightning invoice or coinos username"
+      "placeholder": "Paste a bitcoin address, lightning invoice or Swapee username"
     },
     "settings": {
       "notifications": "Payment notifications",
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 75a0e3d0..b6e5ae49 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -122,12 +122,12 @@
 </script>
 
 <div class="mt-24 mb-20 payments">
-  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+  <h1 class="px-3 md:px-0 text-center text-4xl md:text-5xl font-semibold mb-8 font-bebasNeue tracking-[0.2rem]">
     {$t("payments.header")}
   </h1>
 
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
-    <div class="flex text-md text-secondary dark:text-gray-300 relative">
+    <div class="flex text-md text-secondary dark:text-gray-200 relative">
       <div class="mx-auto flex justify-center w-full gap-3">
         {#each presets as { start, end, title }, i}
           <a
@@ -170,13 +170,13 @@
               <div class="font-bold" class:text-red-800={p.amount < 0}>
                 {f(Math.abs(p.amount) * (p.rate / sats), p.currency)}
                 {#if p.tip}
-                  <span class="text-sm text-secondary dark:text-gray-300">
+                  <span class="text-sm text-secondary dark:text-gray-200">
                     +{Math.round((p.tip / Math.abs(p.amount)) * 100)}%
                   </span>
                 {/if}
               </div>
 
-              <div class="text-secondary dark:text-gray-300">
+              <div class="text-secondary dark:text-gray-200">
                 {sat(Math.abs(p.amount) + (p.tip || 0))}
               </div>
             </div>
@@ -184,7 +184,7 @@
             <div class="flex my-auto">
               {#if p.type === types.pot}
                 <a href={`/pot/${p.memo}`}>
-                  <div class="text-secondary dark:text-gray-300 flex">
+                  <div class="text-secondary dark:text-gray-200 flex">
                     <div class="my-auto mr-1">
                       <img src="/images/moneypot.png" class="w-12" alt="Pot" />
                     </div>
@@ -197,7 +197,7 @@
                   <div class="my-auto">
                     <Avatar user={p.with} size={16} disabled={true} />
                   </div>
-                  <div class="my-auto ml-1 text-secondary dark:text-gray-300">
+                  <div class="my-auto ml-1 text-secondary dark:text-gray-200">
                     {p.with.username}
                   </div>
                 </div>
@@ -207,9 +207,9 @@
                   class="w-24 border-4 border-transparent mr-1"
                   alt="Bitcoin"
                 />
-                <div class="my-auto text-secondary dark:text-gray-300">{p.memo}</div>
+                <div class="my-auto text-secondary dark:text-gray-200">{p.memo}</div>
               {:else}
-                <div class="text-secondary dark:text-gray-300 flex">
+                <div class="text-secondary dark:text-gray-200 flex">
                   {#if p.type === types.lightning}
                     <div class="text-3xl">⚡️</div>
                   {:else if p.type === types.bitcoin}
@@ -241,7 +241,7 @@
               {/if}
             </div>
 
-            <div class="text-secondary dark:text-gray-300 text-right text-sm my-auto">
+            <div class="text-secondary dark:text-gray-200 text-right text-sm my-auto">
               <div>
                 {format(new Date(p.created), "h:mm aaa")}
               </div>
@@ -252,14 +252,14 @@
           </div>
         </a>
       {:else}
-        <p class="text-secondary dark:text-gray-300 text-lg text-center">{$t("payments.empty")}</p>
+        <p class="text-secondary dark:text-gray-200 text-lg text-center">{$t("payments.empty")}</p>
       {/each}
     </div>
 
     <div class="grid grid-cols-3 w-full text-center">
-      <span class="text-lg text-secondary dark:text-gray-300">{$t("payments.total")}</span>
-      <span class="text-lg text-secondary dark:text-gray-300">{$t("payments.presentValue")}</span>
-      <span class="text-lg text-secondary dark:text-gray-300">{$t("payments.gainLoss")}</span>
+      <span class="text-lg text-secondary dark:text-gray-200">{$t("payments.total")}</span>
+      <span class="text-lg text-secondary dark:text-gray-200">{$t("payments.presentValue")}</span>
+      <span class="text-lg text-secondary dark:text-gray-200">{$t("payments.gainLoss")}</span>
 
       {#each Object.keys(totals) as c}
         {@const total = totals[c]["fiat"]}
@@ -274,10 +274,10 @@
     </div>
 
     <button
-      class="ml-auto rounded-full border dark:border-white py-2 px-4 w-36 hover:opacity-80 flex mx-auto"
+      class="ml-auto rounded-full border dark:border-white py-2 px-4 hover:opacity-80 flex mx-auto"
       on:click={csv}
     >
-      <Icon icon="save" style="opacity-50 mr-2 my-auto dark:invert" />
+      <Icon icon="save" style="opacity-50 mr-2 my-auto dark:opacity-80 dark:invert" />
       <div class="my-auto">{$t("payments.export")}</div>
     </button>
   </div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index e0514320..26c2830a 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -194,7 +194,7 @@
 
   <div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
     <div class="header">
-      <h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
+      <h1 class="text-center text-4xl md:text-5xl font-semibold mb-8 font-bebasNeue tracking-[0.2rem]">
         {$t("user.settings.header")}
       </h1>
 
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index dbaea042..7c8c78e0 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -70,8 +70,8 @@
 </a>
 
 <div class="container mx-auto max-w-lg px-4 space-y-8 break-all text-2xl">
-  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-    {$t(amount < 0 ? "payments.sent" : "payments.received")}
+  <h1 class="px-3 md:px-0 text-center text-4xl md:text-5xl font-semibold mb-8 font-bebasNeue tracking-[0.2rem]">
+    {$t(amount < 0 ? "payments.sent" : "payments.received")} 
   </h1>
 
   {#if p.with}
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index d7b069b5..96df35ad 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -32,8 +32,8 @@
 <svelte:window bind:innerWidth={w} />
 
 <AppHeader {data} />
-<div class="container px-4 max-w-xl mx-auto space-y-5 mt-20">
-  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
+<div class="container px-4 max-w-xl mx-auto space-y-7 mt-24">
+  <h1 class="px-3 md:px-0 text-center text-4xl md:text-5xl font-semibold font-bebasNeue tracking-[0.2rem]">
     {$t("payments.send")}
   </h1>
 
@@ -52,7 +52,7 @@
       <textarea
         {placeholder}
         on:keypress={keypress}
-        class="w-full p-4 border rounded-xl h-48 dark:bg-stone-800 placeholder:text-stone-300"
+        class="w-full p-4 border border-stone-400 focus:outline-none focus:ring-2 hover:ring-2 ring-stone-900 dark:ring-white transition-all duration-500 rounded-xl h-48 dark:bg-stone-800 placeholder:text-stone-300"
         bind:value={text}
         bind:this={textarea}
       />
diff --git a/src/routes/(app)/support/+page.svelte b/src/routes/(app)/support/+page.svelte
index fd4c2e9e..87cdc259 100644
--- a/src/routes/(app)/support/+page.svelte
+++ b/src/routes/(app)/support/+page.svelte
@@ -57,7 +57,7 @@
   <AppHeader {data} />
 {/if}
 
-<div class="container px-4 max-w-lg mx-auto mt-20 space-y-8">
+<div class="container px-4 max-w-lg mx-auto mt-24 space-y-8">
   {#if sent}
     <h1 class="text-center text-3xl md:text-4xl font-semibold">Thank you!</h1>
     <div class="text-center text-lg text-secondary">
@@ -73,7 +73,7 @@
       </a>
     </div>
   {:else}
-    <h1 class="text-center text-3xl md:text-4xl font-semibold mb-8">
+    <h1 class="text-center text-4xl md:text-5xl font-semibold mb-8 font-bebasNeue tracking-[0.2rem]">
       {$t("user.support.header")}
     </h1>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1e8b6293..c21d1e52 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,8 @@
 <script>
     import { enhance } from "$app/forms";
 	import * as Accordion from "$lib/shadcn/components/ui/accordion";
+	import * as Sheet from "$lib/shadcn/components/ui/sheet";
+    import { Button } from "$lib/shadcn/components/ui/button";
 	import { Separator } from "$lib/shadcn/components/ui/separator";
 	import { page } from '$app/stores';
 	import { t } from "$lib/translations";
@@ -9,7 +11,7 @@
     import Footer from "../components/Footer.svelte";
 	
 	export let data;
-	let about, faq;
+	let about, faq, s
 	let askedQuestionsAccordionValue = "item-0"
 
 	let askedQuestionsAccordion = [
@@ -79,25 +81,50 @@
 <!-- nav -->
 <nav class="navbar navbar-expand-lg dark:bg-black py-3 ">
 	<div class="container-xxl px-lg-5 px-sm-4 px-3">
-		<a class="navbar-brand site_logo" href="#">
+		<a class="navbar-brand site_logo max-lg:ml-1" href="#">
 			{#if data.colorThemeSelected == "light"}
 				<img src="images/logo.png" alt="" />
 			{:else}
 				<img src="images/logo-white.png" alt="" />
 			{/if}
 		</a>
-		<button
-			class="navbar-toggler border-0 shadow-none"
-			type="button"
-			data-bs-toggle="offcanvas"
-			data-bs-target="#offcanvas"
-		>
-			<span class="navbar-toggler-icon" />
-		</button>
-		<div class="offcanvas offcanvas-start flex-lg-row flex-column" id="offcanvas">
-			<div class="py-4 pb-5 px-3 d-lg-none d-flex justify-content-end w-100">
-				<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" />
-			</div>
+		<Sheet.Root >
+			<Sheet.Trigger asChild let:builder>
+				<Button builders={[builder]} variant="ghost" class="lg:hidden dark:hover:bg-stone-800 px-1">
+					<svg class="w-8 h-8 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+						<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 7h14M5 12h14M5 17h14"/>
+					  </svg>
+				</Button>
+			</Sheet.Trigger>
+			<Sheet.Content side="left" id="offcanvas" class="bg-white dark:!bg-black border-r-2 border-black dark:!border-white">
+			  <ul class=" text-lg-start text-center mx-auto mb-2 dark:text-white mt-16 pl-0">
+				<li class="nav-item mb-4">
+					<a class="nav-link active dark:!text-white" href="#">How it works</a>
+				</li>
+				<li class="nav-item mb-4">
+					<a class="nav-link dark:!text-white" href="" on:click={() => scroll(faq)}>F.A.Q.</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link dark:!text-white" href="" on:click={() => scroll(about)}>About</a>
+				</li>
+				</ul>
+				<div
+					class="flex flex-wrap items-center gap-4 lg:pt-0 justify-center mt-4"
+					role="search"
+				>
+				<a href="/register" class="btn_black flex-1 w-full text-center text-nowrap"><span class=" dark:!bg-white dark:!text-black dark:!border-black dark:!border-2">get started</span></a>
+				<a href="/login" class="btn_white flex-1 w-full text-center text-nowrap"><span class=" dark:!bg-black dark:!text-white dark:!border-white dark:!border-2">sign in</span></a>
+				</div>
+				<form method="POST" bind:this={toggleThemeForm} use:enhance={submitUpdateTheme} class="mx-auto flex justify-center mt-4" >
+					{#if themeSelected && themeSelected == "dark"}
+						<ThemeToggle on:click={toggleThemeSelected} formaction="/?/setTheme&theme=light&redirectTo={$page.url.pathname}" />
+					{:else if themeSelected && themeSelected == "light"}
+						<ThemeToggle on:click={toggleThemeSelected} formaction="/?/setTheme&theme=dark&redirectTo={$page.url.pathname}" />
+					{/if}
+				</form>
+			</Sheet.Content>
+		  </Sheet.Root>
+		<div class="offcanvas offcanvas-start flex-lg-row flex-column  !border-r-2 !border-r-white" id="offcanvas">
 			<ul class="navbar-nav text-lg-start text-center mx-auto mb-2 mb-lg-0 dark:text-white">
 				<li class="nav-item me-lg-5 mb-lg-0 mb-4">
 					<a class="nav-link active dark:!text-white" href="#">How it works</a>
@@ -156,19 +183,20 @@
 				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
 					<img src="images/swapee-grid-1-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
 					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">Create your account</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base">
+					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						A username and password is all you need to get started. <a
 							href="#"
-							class="swapee_grid_link">Don’t forget it!</a
+							class="swapee_grid_link dark:!text-gray-200">Don’t forget it!</a
 						>
 					</p>
 				</div>
+				
 			</div>
 			<div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
 				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
 					<img src="images/swapee-grid-2-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
 					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">Ask for payments</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base">
+					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						It’s the same as you normally would traditionally, but with bitcoin.
 					</p>
 				</div>
@@ -177,7 +205,7 @@
 				<div class="swapee_3_grids h-100 text-center col-md-10 mx-auto">
 					<img src="images/swapee-grid-3-3.png" class="mx-auto hover:scale-[1.025] transition-all duration-500 ease-in-out" alt="" />
 					<h5 class="f_bebas_neue fw-bold letter_space_1 dark:text-white">That's all!</h5>
-					<p class="txt_slate_blue dark:!text-gray-200 lh-base">
+					<p class="txt_slate_blue dark:!text-gray-200 lh-base max-w-[425px] mx-auto">
 						Spend your coins immediately or save it and watch it grow, the choice is yours.
 					</p>
 				</div>
diff --git a/src/swapee/css/style.css b/src/swapee/css/style.css
index e435068d..634448db 100644
--- a/src/swapee/css/style.css
+++ b/src/swapee/css/style.css
@@ -116,7 +116,6 @@ body{
     -o-transition: var(--transition_3s);
 }
 
-#offcanvas ul li a.active::after,
 #offcanvas ul li a:hover::after{
     width: 50px;
 }