diff --git a/packages/desktop/src/tree/FlowState.tsx b/packages/desktop/src/tree/FlowState.tsx
index 2c3c4a0..c69d262 100644
--- a/packages/desktop/src/tree/FlowState.tsx
+++ b/packages/desktop/src/tree/FlowState.tsx
@@ -1,5 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { Button, Container, Typography } from '@mui/material';
 import FullMottoLogo, { LogoType } from '@nirvana/components/logo/fullMotto';
+import React, { useEffect, useState } from 'react';
+
+import { blueGrey } from '@mui/material/colors';
 
 type Quote = {
   content: string;
@@ -27,23 +30,37 @@ export default function FlowState({ handleReconnect }: { handleReconnect: () =>
   }, []);
 
   return (
-    <div className="flex flex-col flex-1 justify-center items-center relative bg-gray-100">
+    <Container
+      maxWidth={false}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 5,
+        background: blueGrey[50],
+      }}
+    >
       {/* <img src="https://source.unsplash.com/random/?nature" /> */}
       <FullMottoLogo type={LogoType.small} className={'absolute bottom-5 mx-auto'} />
 
       {quote && (
-        <span className="flex flex-col justify-center items-center max-w-screen-sm">
-          <span className="text-xl text-gray-800 font-semibold text-center">{`"${quote.content}"`}</span>
-          <span className="tex-md italic text-gray-400">{quote.author}</span>
-        </span>
+        <Container
+          maxWidth={'md'}
+          sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}
+        >
+          <Typography variant={'h6'} textAlign={'center'}>
+            {quote.content}
+          </Typography>
+          <Typography variant={'overline'} textAlign={'center'}>
+            {quote.author}
+          </Typography>
+        </Container>
       )}
 
-      <button
-        onClick={handleReconnect}
-        className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200 fixed top-5 right-5"
-      >
+      <Button variant={'text'} onClick={handleReconnect}>
         reconnect
-      </button>
-    </div>
+      </Button>
+    </Container>
   );
 }
diff --git a/packages/desktop/src/tree/Login.tsx b/packages/desktop/src/tree/Login.tsx
index 9df2ad5..98e97f1 100644
--- a/packages/desktop/src/tree/Login.tsx
+++ b/packages/desktop/src/tree/Login.tsx
@@ -1,4 +1,4 @@
-import { Button, CircularProgress, Container } from '@mui/material';
+import { Button, CircularProgress, Container, Stack } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import Channels from '../electron/constants';
@@ -72,19 +72,9 @@ export default function Login() {
           Continue with Google
         </Button>
       )}
-    </Container>
-  );
-
-  return (
-    <div
-      className="flex flex-col space-y-5 justify-center items-center 
-    h-screen w-screen
-     bg-zinc-700"
-    >
-      {/* <Logo className="scale-50" /> */}
 
       {/* ! TESTING PURPOSES */}
-      <div className={'text-white flex flex-col gap-5'}>
+      <Stack direction={'column'}>
         <button
           onClick={() =>
             setJwtToken(
@@ -114,21 +104,7 @@ export default function Login() {
         >
           Nirvana Support
         </button>
-      </div>
-
-      {isLoading ? (
-        <>
-          <span className="text-white">Attempting to log you in</span>
-        </>
-      ) : (
-        <button
-          onClick={continueAuth}
-          className=" text-md text-zinc-200 py-2 px-5 border border-gray-200 transition-all hover:bg-gray-200 hover:text-teal-500 rounded flex flex-row items-center space-x-2"
-        >
-          <FcGoogle className="text-lg" />
-          <span>Continue with Google</span>
-        </button>
-      )}
-    </div>
+      </Stack>
+    </Container>
   );
 }