diff --git a/components.json b/components.json
index d433749..cbb37ec 100644
--- a/components.json
+++ b/components.json
@@ -1,13 +1,13 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "rsc": false,
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "frontend/main.css",
     "baseColor": "slate",
-    "cssVariables": false,
+    "cssVariables": true,
     "prefix": ""
   },
   "aliases": {
diff --git a/frontend/@/components/ui/alert.tsx b/frontend/@/components/ui/alert.tsx
index f3d3252..b05dbb0 100644
--- a/frontend/@/components/ui/alert.tsx
+++ b/frontend/@/components/ui/alert.tsx
@@ -4,13 +4,13 @@ import {cva, type VariantProps} from "class-variance-authority"
 import {cn} from "Frontend/@/lib/utils"
 
 const alertVariants = cva(
-    "relative w-full rounded-lg border border-slate-200 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 dark:border-slate-800 dark:[&>svg]:text-slate-50",
+    "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
     {
         variants: {
             variant: {
-                default: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
+                default: "bg-background text-foreground",
                 destructive:
-                    "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
             },
         },
         defaultVariants: {
diff --git a/frontend/@/components/ui/avatar.tsx b/frontend/@/components/ui/avatar.tsx
index e923abd..1e79b3e 100644
--- a/frontend/@/components/ui/avatar.tsx
+++ b/frontend/@/components/ui/avatar.tsx
@@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef<
     <AvatarPrimitive.Fallback
         ref={ref}
         className={cn(
-            "flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800",
+            "flex h-full w-full items-center justify-center rounded-full bg-muted",
             className
         )}
         {...props}
diff --git a/frontend/@/components/ui/button.tsx b/frontend/@/components/ui/button.tsx
index a5cc5af..e07e008 100644
--- a/frontend/@/components/ui/button.tsx
+++ b/frontend/@/components/ui/button.tsx
@@ -5,25 +5,26 @@ import {cva, type VariantProps} from "class-variance-authority"
 import {cn} from "Frontend/@/lib/utils"
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
     {
         variants: {
             variant: {
-                default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+                default:
+                    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
                 destructive:
-                    "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
                 outline:
-                    "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+                    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
                 secondary:
-                    "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
-                ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
-                link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+                    "bg-secondary text-secondary-foreground shadow-sm 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",
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
             },
         },
         defaultVariants: {
@@ -46,6 +47,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <Comp
                 className={cn(buttonVariants({variant, size, className}))}
                 ref={ref}
+                type="button"
                 {...props}
             />
         )
diff --git a/frontend/@/components/ui/card.tsx b/frontend/@/components/ui/card.tsx
index 05500c5..d9d9551 100644
--- a/frontend/@/components/ui/card.tsx
+++ b/frontend/@/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+            "rounded-lg border bg-card text-card-foreground shadow-sm",
             className
         )}
         {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({className, ...props}, ref) => (
     <p
         ref={ref}
-        className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+        className={cn("text-sm text-muted-foreground", className)}
         {...props}
     />
 ))
diff --git a/frontend/@/components/ui/dropdown-menu.tsx b/frontend/@/components/ui/dropdown-menu.tsx
index c331a09..3ff64f1 100644
--- a/frontend/@/components/ui/dropdown-menu.tsx
+++ b/frontend/@/components/ui/dropdown-menu.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import {Check, ChevronRight, Circle} from "lucide-react"
+import {CheckIcon, ChevronRightIcon, DotFilledIcon,} from "@radix-ui/react-icons"
 
 import {cn} from "Frontend/@/lib/utils"
 
@@ -25,14 +25,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
     <DropdownMenuPrimitive.SubTrigger
         ref={ref}
         className={cn(
-            "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
+            "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
             inset && "pl-8",
             className
         )}
         {...props}
     >
         {children}
-        <ChevronRight className="ml-auto h-4 w-4"/>
+        <ChevronRightIcon className="ml-auto h-4 w-4"/>
     </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.SubContent
         ref={ref}
         className={cn(
-            "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
             className
         )}
         {...props}
@@ -63,7 +63,8 @@ const DropdownMenuContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 className
             )}
             {...props}
@@ -81,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             inset && "pl-8",
             className
         )}
@@ -97,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className
         )}
         checked={checked}
@@ -105,7 +106,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4"/>
+        <CheckIcon className="h-4 w-4"/>
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
         {children}
@@ -121,14 +122,14 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             className
         )}
         {...props}
     >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current"/>
+        <DotFilledIcon className="h-4 w-4 fill-current"/>
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
         {children}
@@ -160,7 +161,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({className, ...props}, ref) => (
     <DropdownMenuPrimitive.Separator
         ref={ref}
-        className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
+        className={cn("-mx-1 my-1 h-px bg-muted", className)}
         {...props}
     />
 ))
diff --git a/frontend/@/components/ui/input.tsx b/frontend/@/components/ui/input.tsx
index ceb94d3..a965f5e 100644
--- a/frontend/@/components/ui/input.tsx
+++ b/frontend/@/components/ui/input.tsx
@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <input
                 type={type}
                 className={cn(
-                    "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+                    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
                     className
                 )}
                 ref={ref}
diff --git a/frontend/@/components/ui/tooltip.tsx b/frontend/@/components/ui/tooltip.tsx
index a453542..7879f7b 100644
--- a/frontend/@/components/ui/tooltip.tsx
+++ b/frontend/@/components/ui/tooltip.tsx
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-            "z-50 overflow-hidden rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+            "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
             className
         )}
         {...props}
diff --git a/frontend/components/theming/ThemePreview.tsx b/frontend/components/theming/ThemePreview.tsx
index 6a74a90..1f6a7be 100644
--- a/frontend/components/theming/ThemePreview.tsx
+++ b/frontend/components/theming/ThemePreview.tsx
@@ -1,24 +1,40 @@
 import {Theme} from "Frontend/@/registry/themes";
+import {Card} from "Frontend/@/components/ui/card";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "Frontend/@/components/ui/tooltip";
+import {useTheme} from "next-themes";
 
 export default function ThemePreview({theme}: { theme: Theme }) {
+    const {resolvedTheme} = useTheme();
+
     return (
-        <div className="flex flex-col items-center">
-            <svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path id="background" d="M0 0H228V120H0V0Z" fill={theme.cssVars.dark.background}/>
-                <rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
-                <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
-                <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
-                <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
-                <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-                <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
-                <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
-                <rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
-                <rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
-                <rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-                <rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-            </svg>
-            <p>{theme.name}</p>
-        </div>
+        <TooltipProvider>
+            <Tooltip delayDuration={0}>
+                <TooltipTrigger asChild>
+                    <Card className="overflow-hidden flex place-self-center">
+                        <svg width="228" height="120" viewBox="0 0 228 120" fill="none"
+                             xmlns="http://www.w3.org/2000/svg">
+                            {/*@ts-ignore*/}
+                            <path id="background" d="M0 0H228V120H0V0Z" fill={theme.cssVars[resolvedTheme].background}/>
+                            <rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2"
+                                  fill="#30363D"/>
+                            <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
+                            <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
+                            <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
+                            <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                            <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
+                            <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
+                            <rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
+                            <rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
+                            <rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                            <rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                        </svg>
+                    </Card>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                    <p className="capitalize">{theme.name}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
     );
 }
 /*
diff --git a/frontend/components/wizard/Wizard.tsx b/frontend/components/wizard/Wizard.tsx
index 84fd220..c5452e6 100644
--- a/frontend/components/wizard/Wizard.tsx
+++ b/frontend/components/wizard/Wizard.tsx
@@ -49,7 +49,7 @@ const Wizard = ({children, initialValues, onSubmit}: {
             validationSchema={step.props.validationSchema}
         >
             {formik => (
-                <Form className="flex flex-col grow">
+                <Form className="flex flex-col h-full">
                     <div className="w-full mb-8">
                         <p>Step {stepNumber + 1} of {steps.length}</p>
                         {/*<Stepper activeStep={stepNumber}>
diff --git a/frontend/main.css b/frontend/main.css
index b5c61c9..7d0af7c 100644
--- a/frontend/main.css
+++ b/frontend/main.css
@@ -1,3 +1,83 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+
+        --radius: 0.5rem;
+
+        --warning: 38 92% 50%;
+        --warning-foreground: 48 96% 89%;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+
+        --warning: 48 96% 89%;
+        --warning-foreground: 38 92% 50%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
\ No newline at end of file
diff --git a/frontend/views/SetupView.tsx b/frontend/views/SetupView.tsx
index e49a338..6bf2994 100644
--- a/frontend/views/SetupView.tsx
+++ b/frontend/views/SetupView.tsx
@@ -37,7 +37,7 @@ function WelcomeStep() {
 function ThemeStep() {
     return (
         <div className="flex flex-col size-full items-center">
-            <div className="size-full grid grid-cols-3 grid-rows-2 w-1/2 min-w-[468px] gap-12 items-center">
+            <div className="grid grid-cols-3 w-1/2 min-w-[468px] gap-12">
                 {themes.map(((theme: Theme) => (
                     <ThemePreview key={theme.name} theme={theme}/>
                 )))}
diff --git a/package-lock.json b/package-lock.json
index be9476d..9d163ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@polymer/polymer": "3.5.1",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-tooltip": "^1.0.7",
@@ -53,6 +54,7 @@
         "@lit-labs/react": "^1.1.0",
         "@rollup/plugin-replace": "5.0.4",
         "@rollup/pluginutils": "5.0.5",
+        "@types/node": "^20.12.2",
         "@types/react": "18.2.42",
         "@types/react-dom": "^18.0.8",
         "@vitejs/plugin-react": "4.2.0",
@@ -3086,6 +3088,14 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -4008,9 +4018,9 @@
       "peer": true
     },
     "node_modules/@types/node": {
-      "version": "20.11.30",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
-      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "version": "20.12.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz",
+      "integrity": "sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
diff --git a/package.json b/package.json
index 893002e..38b7b27 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@polymer/polymer": "3.5.1",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -48,6 +49,7 @@
     "@lit-labs/react": "^1.1.0",
     "@rollup/plugin-replace": "5.0.4",
     "@rollup/pluginutils": "5.0.5",
+    "@types/node": "^20.12.2",
     "@types/react": "18.2.42",
     "@types/react-dom": "^18.0.8",
     "@vitejs/plugin-react": "4.2.0",
@@ -108,7 +110,8 @@
     "@radix-ui/react-slot": "$@radix-ui/react-slot",
     "@radix-ui/react-avatar": "$@radix-ui/react-avatar",
     "@radix-ui/react-dropdown-menu": "$@radix-ui/react-dropdown-menu",
-    "@radix-ui/react-tooltip": "$@radix-ui/react-tooltip"
+    "@radix-ui/react-tooltip": "$@radix-ui/react-tooltip",
+    "@radix-ui/react-icons": "$@radix-ui/react-icons"
   },
   "vaadin": {
     "dependencies": {
@@ -152,6 +155,6 @@
       "workbox-core": "7.0.0",
       "workbox-precaching": "7.0.0"
     },
-    "hash": "54c9ffc1de2ff554baf5ced1be2e704d4a354138bf9cbfca2d4fc83f126a4563"
+    "hash": "5375ee653b483f5c0b565f19670e73ec7e02e2abb121e622411201c6c6cb2431"
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index db74131..ea14736 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -22,7 +22,47 @@ export default {
         extend: {
             colors: {
                 'gf-primary': '#2332c8',
-                'gf-secondary': '#6441a5'
+                'gf-secondary': '#6441a5',
+                warning: "hsl(var(--warning))",
+                "warning-foreground": "hsl(var(--warning-foreground))",
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
             },
             keyframes: {
                 "accordion-down": {