diff --git a/.run/UI debug.run.xml b/.run/UI debug.run.xml
index b656b83..0a58cbb 100644
--- a/.run/UI debug.run.xml	
+++ b/.run/UI debug.run.xml	
@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="UI debug" type="JavascriptDebugType" engineId="37cae5b9-e8b2-4949-9172-aafa37fbc09c" uri="http://localhost:8080" useFirstLineBreakpoints="true">
+  <configuration default="false" name="UI debug" type="JavascriptDebugType" uri="http://localhost:8080" useFirstLineBreakpoints="true">
     <method v="2" />
   </configuration>
 </component>
\ No newline at end of file
diff --git a/frontend/App.tsx b/frontend/App.tsx
index 5c1ced5..a36b11b 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -12,7 +12,7 @@ export default function App() {
     return (
         <StrictMode>
             <NextUIProvider className="size-full">
-                <NextThemesProvider attribute="class" defaultTheme="gameyfin-blue-light" themes={themeNames()}>
+                <NextThemesProvider attribute="class" themes={themeNames()} defaultTheme="gameyfin-violet-dark" >
                     <AuthProvider>
                         <IconContext.Provider value={{size: 20}}>
                             <RouterProvider router={router}/>
diff --git a/frontend/components/theming/ThemePreview.tsx b/frontend/components/theming/ThemePreview.tsx
index f648c6c..353143f 100644
--- a/frontend/components/theming/ThemePreview.tsx
+++ b/frontend/components/theming/ThemePreview.tsx
@@ -9,12 +9,11 @@ export default function ThemePreview({theme, mode, isSelected}: {
 }) {
     return (
         <Tooltip content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
-            <Card
-                shadow="none"
-                className={`${theme.name}-${mode} flex-row justify-center p-6 border-2 ${isSelected ? "border-focus" : "border-foreground-200 hover:border-focus"}`}
-            >
-                <GameyfinLogo className="w-1/2 fill-primary"/>
-            </Card>
+            <div className={`
+                ${theme.name}-${mode}
+                bg-primary p-6 border-2 rounded-md
+                ${isSelected ? "border-foreground" : "border-foreground-200 hover:border-focus"}`}
+            />
         </Tooltip>
     );
 }
diff --git a/frontend/components/wizard/Wizard.tsx b/frontend/components/wizard/Wizard.tsx
index b0779d6..1b799bb 100644
--- a/frontend/components/wizard/Wizard.tsx
+++ b/frontend/components/wizard/Wizard.tsx
@@ -69,7 +69,7 @@ const Wizard = ({children, initialValues, onSubmit}: {
                     <div className="flex grow">
                         {step}
                     </div>
-                    <div className="bottom-0 w-full">
+                    <div className="left-8 right-8 absolute bottom-8 -z-1">
                         <div className="flex justify-between">
                             <Button color="primary" onClick={() => previous(formik.values)} disabled={isFirstStep}>
                                 <ArrowLeft/>
diff --git a/frontend/index.html b/frontend/index.html
index 3084f35..b4941f0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -19,7 +19,7 @@
     <!-- index.ts is included here automatically (either by the dev server or during the build) -->
 </head>
 
-<body class="text-foreground bg-background">
+<body>
 <div id="outlet"></div>
 </body>
 </html>
diff --git a/frontend/views/LoginView.tsx b/frontend/views/LoginView.tsx
index da087b3..baca827 100644
--- a/frontend/views/LoginView.tsx
+++ b/frontend/views/LoginView.tsx
@@ -1,5 +1,5 @@
 import {useAuth} from "Frontend/util/auth";
-import {useState} from "react";
+import {useEffect, useLayoutEffect, useState} from "react";
 import {Link, useNavigate} from "react-router-dom";
 import {XCircle} from "@phosphor-icons/react";
 import {Button, Card, CardBody, CardHeader, Input} from "@nextui-org/react";
@@ -14,13 +14,15 @@ export default function LoginView() {
     const [url, setUrl] = useState<string>();
     const navigate = useNavigate();
 
-    if (state.user && url) {
-        const path = new URL(url, document.baseURI).pathname;
-        navigate(path, {replace: true});
-    }
+    useLayoutEffect(() => {
+        if (state.user) {
+            const path = url ?  new URL(url, document.baseURI).pathname : '/'
+            navigate(path, {replace: true});
+        }
+    }, [state.user]);
 
     return (
-        <div className="flex size-full bg-gradient-to-br from-gf-primary to-gf-secondary">
+        <div className="flex size-full bg-gradient-to-br from-primary-400 to-primary-700">
             <Card className="m-auto p-12">
                 <CardHeader>
                     <img
@@ -84,7 +86,7 @@ export default function LoginView() {
                         <div className="flex justify-between items-center">
                             <Link to="#">Forgot password?</Link>
                             <Button color="primary" type="submit" isLoading={loading}>
-                                Log in
+                                {loading ? "" : "Log in"}
                             </Button>
                         </div>
                     </form>
diff --git a/frontend/views/SetupView.tsx b/frontend/views/SetupView.tsx
index b4498bd..84a642f 100644
--- a/frontend/views/SetupView.tsx
+++ b/frontend/views/SetupView.tsx
@@ -39,12 +39,12 @@ function WelcomeStep() {
 function ThemeStep() {
     const {theme, setTheme} = useTheme();
     const [isSelected, setIsSelected] = useState(theme ? theme.includes("light") : false);
-    const [currentTheme, setCurrentTheme] = useState(theme?.split('-')[0]);
+    const [currentTheme, setCurrentTheme] = useState(theme?.substring(0, theme?.lastIndexOf("-")));
 
     useLayoutEffect(() => setTheme(`${currentTheme}-${mode()}`), [isSelected]);
 
     function mode(): "light" | "dark" {
-        return !isSelected ? "dark" : "light"
+        return isSelected ? "light" : "dark";
     }
 
     return (
@@ -61,8 +61,9 @@ function ThemeStep() {
                 />
 
             </div>
-            <div className="grid grid-cols-4 w-3/4 min-w-[468px] gap-12">
+            <div className="grid grid-flow-col auto-cols-auto auto-cols-max-4 gap-8">
                 {
+                    //min-w-[468px]
                     themes.map(((t: Theme) => (
                         <div
                             key={t.name}
@@ -122,7 +123,7 @@ function SettingsStep() {
 }
 
 const SetupView = () => (
-    <div className="flex size-full bg-gradient-to-br from-gf-primary to-gf-secondary">
+    <div className="flex size-full bg-gradient-to-br from-primary-400 to-primary-700">
         <Card className="w-3/4 h-3/4 min-w-[500px] m-auto p-8">
             <Wizard
                 initialValues={{username: '', password: '', passwordRepeat: ''}}
