diff --git a/packages/renderer/src/components/Content/BaseContent.tsx b/packages/renderer/src/components/Content/BaseContent.tsx
index b10f11817..90ba012e6 100644
--- a/packages/renderer/src/components/Content/BaseContent.tsx
+++ b/packages/renderer/src/components/Content/BaseContent.tsx
@@ -3,7 +3,7 @@ import {ReactNode} from 'react';
 export function BaseContent({children}: {children: ReactNode}) {
   return (
     <div
-      className="text-white backdrop-blur-[10px] p-9 flex flex-col"
+      className="text-white backdrop-blur-[10px] p-6 flex flex-col rounded-lg"
       style={{
         background: '#1F2023B3',
       }}
diff --git a/packages/renderer/src/components/Content/Login.tsx b/packages/renderer/src/components/Content/Login.tsx
index a7e7d5810..5e340064c 100644
--- a/packages/renderer/src/components/Content/Login.tsx
+++ b/packages/renderer/src/components/Content/Login.tsx
@@ -1,5 +1,15 @@
-import {TextField, Checkbox, Heading, Select, Flex, Button} from '@radix-ui/themes';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../UI/select';
+import { Input } from '../UI/input'
 import {useForm} from '@tanstack/react-form';
+import { Button } from '../UI/button';
 
 export function Login() {
   const {Field, handleSubmit, state} = useForm({
@@ -16,66 +26,57 @@ export function Login() {
 
   return (
     <>
-      <Heading className="mb-6 text-3xl">Login</Heading>
+      <h1 className="font-bold text-3xl mb-6">Login</h1>
       <form
+        className="flex flex-col gap-2"
         onSubmit={e => {
           e.preventDefault();
           handleSubmit();
         }}
       >
-        <Flex
-          gap="4"
-          direction="column"
-          width="420px"
-        >
           <Field
             name="planet"
             children={({state, handleChange, handleBlur}) => (
-              <Select.Root
-                size="3"
-                defaultValue="0x000000000000"
-              >
-                <Select.Trigger
-                  id="planet"
-                  placeholder="Planet"
-                />
-                <Select.Content>
-                  <Select.Group>
-                    <Select.Label>Planets</Select.Label>
-                    <Select.Item value="0x000000000000">Odin</Select.Item>
-                    <Select.Item value="0x000000000001">Heimdall</Select.Item>
-                  </Select.Group>
-                </Select.Content>
-              </Select.Root>
+              <Select defaultValue="0x000000000000">
+                <SelectTrigger id="planet">
+                <SelectValue placeholder="Planets" />
+
+                  </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Planets</SelectLabel>
+                    <SelectItem value="0x000000000000">Odin</SelectItem>
+                    <SelectItem value="0x000000000001">Heimdall</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
             )}
           ></Field>
 
           <Field
             name="address"
             children={({state, handleChange, handleBlur}) => (
-              <Select.Root
-                size="3"
-                defaultValue="0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada"
-              >
-                <Select.Trigger placeholder="Nine Chronicles Address" />
-                <Select.Content>
-                  <Select.Group>
-                    <Select.Label>Address</Select.Label>
-                    <Select.Item value="0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada">
+              <Select defaultValue="0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada">
+                <SelectTrigger>
+                  <SelectValue placeholder="Address" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Address</SelectLabel>
+                    <SelectItem value="0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada">
                       0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada
-                    </Select.Item>
-                  </Select.Group>
-                </Select.Content>
-              </Select.Root>
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
             )}
           ></Field>
 
           <Field
             name="password"
             children={({state, handleChange, handleBlur}) => (
-              <TextField.Root
-                size="3"
-                type="password"
+              <Input
+                typeof="password"
                 defaultValue={state.value}
                 onChange={e => handleChange(e.target.value)}
                 onBlur={handleBlur}
@@ -83,9 +84,8 @@ export function Login() {
               />
             )}
           />
-          <div className="flex items-center justify-between mt-6S">
+          <div className="flex items-center justify-between pt-6">
             <Button
-              size="3"
               className="font-bold rounded focus:outline-none focus:shadow-outline"
               type="button"
             >
@@ -98,7 +98,6 @@ export function Login() {
               Forgot Password?
             </a>
           </div>
-        </Flex>
       </form>
     </>
   );
diff --git a/packages/renderer/src/components/Layout/BaseBackground.tsx b/packages/renderer/src/components/Layout/BaseBackground.tsx
index d3b23f6c1..c61b6501c 100644
--- a/packages/renderer/src/components/Layout/BaseBackground.tsx
+++ b/packages/renderer/src/components/Layout/BaseBackground.tsx
@@ -5,6 +5,8 @@ export const BaseBackground = styled.div({
   '-webkit-app-region': 'drag',
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: "space-between",
+  alignContent: "center",
   background: `url(${launcherBackground}) center/cover repeat`,
   width: '100vw',
   height: '100vh',
diff --git a/packages/renderer/src/components/Layout/BaseNav.tsx b/packages/renderer/src/components/Layout/BaseNav.tsx
index 1342125cd..af5c906dc 100644
--- a/packages/renderer/src/components/Layout/BaseNav.tsx
+++ b/packages/renderer/src/components/Layout/BaseNav.tsx
@@ -5,6 +5,5 @@ export const BaseNav  = styled.div({
   margin: '2rem',
   justifyContent: 'space-between',
   alignItems: 'center',
-  align: 'flex-end',
   gap: '2rem',
 });
diff --git a/packages/renderer/src/components/Layout/index.tsx b/packages/renderer/src/components/Layout/index.tsx
index 5ce60a576..c7735a89c 100644
--- a/packages/renderer/src/components/Layout/index.tsx
+++ b/packages/renderer/src/components/Layout/index.tsx
@@ -19,14 +19,14 @@ export function Layout() {
         <TopMenu />
         <TopUserInfo />
       </BaseNav>
-      <div className="justify-center self-center flex-grow">
+      <div className="flex justify-center">
         <BaseContent>
           <Login />
         </BaseContent>
       </div>
       <BaseNav>
         <BaseNodeInfo />
-        <div className="flex gap-2 items-center">
+        <div className="flex gap-2">
           <GameStartButton />
           <RestartButton />
           <SettingButton />
diff --git a/packages/renderer/src/components/Menubar/Menu.tsx b/packages/renderer/src/components/Menubar/Menu.tsx
index 461b4320e..92efc18f2 100644
--- a/packages/renderer/src/components/Menubar/Menu.tsx
+++ b/packages/renderer/src/components/Menubar/Menu.tsx
@@ -3,12 +3,11 @@ import styled from '@emotion/styled';
 export const Menu = styled.div({
   color: 'white',
   background: 'rgba(31, 32, 35, 0.70)',
-  border: '2px solid transparent',
-  borderImage: 'linear-gradient(#7A7369, #EAC48B ,#7A7369)',
+  borderRadius: '0.5rem',
   borderImageSlice: '1',
   backdropFilter: 'blur(4px)',
   display: 'flex',
-  padding: '8px 12px',
+  padding: '8px 8px',
   alignItems: 'center',
-  gap: '1rem',
+  gap: '0.5rem',
 });
diff --git a/packages/renderer/src/components/Modal/Modal.tsx b/packages/renderer/src/components/Modal/Modal.tsx
deleted file mode 100644
index bae43c4c8..000000000
--- a/packages/renderer/src/components/Modal/Modal.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Container} from '@chakra-ui/react';
-import styled from '@emotion/styled';
-
-export const Box = styled.div({
-  '-webkit-app-region': 'no-drag',
-  color: 'white',
-  background: '#1F2023B3',
-  backdropFilter: 'blur(10px)',
-  padding: '40px',
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export function Modal() {
-  return <Box></Box>;
-}
diff --git a/packages/renderer/src/store/Modal.ts b/packages/renderer/src/store/Modal.ts
new file mode 100644
index 000000000..e69de29bb