diff --git a/frontend/src/Components/CreateBtn.tsx b/frontend/src/Components/CreateBtn.tsx
index 667cdacb..8ddb7105 100644
--- a/frontend/src/Components/CreateBtn.tsx
+++ b/frontend/src/Components/CreateBtn.tsx
@@ -6,7 +6,7 @@ const BtnDiv = styled.button`
   width: 16vw;
   height: 2.3vw;
   margin-top: 10px;
-  background-color: white;
+  background-color: #F7B5A5;
   font-size: 16px;
   font-weight: bold;
   &:hover{
diff --git a/frontend/src/Components/List.tsx b/frontend/src/Components/List.tsx
index 827d79df..24e10e5a 100644
--- a/frontend/src/Components/List.tsx
+++ b/frontend/src/Components/List.tsx
@@ -71,11 +71,10 @@ export default function BasicList() {
     
     return (
     <div>
-    <Box sx={{ width: '16vw', bgcolor: 'background.paper'}}>
+    <Box sx={{ width: '16vw', bgcolor: '#2F3F52'}}>    {/* 잉여공간 컬러 채움 */}
         <Divider />
         <nav aria-label="folders">
         <List>
-            
             {branchData.map(branch => {
                 const clickEvent = () => {
                     dispatch(setBranchUuid(branch.uuid));
@@ -84,15 +83,13 @@ export default function BasicList() {
                 }
                 return(
                     <ListItem disablePadding>
-                    <ListItemButton onClick={()=>(clickEvent())}>
+                    <ListItemButton  onClick={()=>(clickEvent())}>
                         <ListItemText primary={branch.name} />
                     </ListItemButton>
                     </ListItem>
                 );
                 
                 })}
-
-
         </List>
         </nav>
     </Box>
diff --git a/frontend/src/Components/MainModal.tsx b/frontend/src/Components/MainModal.tsx
index 55bed185..617c65f4 100644
--- a/frontend/src/Components/MainModal.tsx
+++ b/frontend/src/Components/MainModal.tsx
@@ -66,7 +66,7 @@ const style = {
   const Btn = styled.button`
   width: 100px;
   height: 30px;
-  background-color: #FF9198;
+  background-color: #F7B5A5;
   border: none;
   border-radius: 10px;
   font-size: 15px;
@@ -82,7 +82,7 @@ const style = {
   const CreateBtn = styled.button`
     width: 830px;
     height: 75px;
-    background-color: #FF9198;
+    background-color: #F7B5A5;
     border: none;
     border-radius: 10px;
     font-size: 20pt;
diff --git a/frontend/src/Components/ProjectModal.tsx b/frontend/src/Components/ProjectModal.tsx
index bcb9b791..b2f4879a 100644
--- a/frontend/src/Components/ProjectModal.tsx
+++ b/frontend/src/Components/ProjectModal.tsx
@@ -111,14 +111,16 @@ const style = {
   width: 16vw;
   height: 2.3vw;
   margin-top: 10px;
-  background-color: white;
+  background-color: #F7B5A5;
+  color: white;
   font-size: 16px;
   font-weight: bold;
   &:hover{
-    background-color: #ececec;
+    background-color: #FF9198;
     transition: 0.5s;
   }
 `;
+//background-color: #ececec;
 
   
   const CreateBtn = styled.button`
diff --git a/frontend/src/Components/ProjectSelect.tsx b/frontend/src/Components/ProjectSelect.tsx
index 24fbb191..db6cde6f 100644
--- a/frontend/src/Components/ProjectSelect.tsx
+++ b/frontend/src/Components/ProjectSelect.tsx
@@ -14,7 +14,7 @@ import axios from 'axios';
 const ContainerDiv = styled.div`
     width: 16vw;
     display: flex;
-    background-color: #D9D9D9;
+    background-color: #4F6680;
 
 `;
 
diff --git a/frontend/src/Components/RedirectHandler.tsx b/frontend/src/Components/RedirectHandler.tsx
new file mode 100644
index 00000000..92d44fc9
--- /dev/null
+++ b/frontend/src/Components/RedirectHandler.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { ActionCreator } from 'redux';
+import { Typography, Box, Container } from '@mui/material';
+import { actionCreators as userActions } from "../redux/user2";
+
+const RedirectHandler = (props :any) => {
+  //Dispatch: store에 있는 데이터를 컨트롤 하기 위함
+  const dispatch = useDispatch();
+  //인가 코드
+  const code = new URL(window.location.href).searchParams.get("code");
+  console.log(code);
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      //dispatch(userActions.kakaoLogin(code));
+      //await dispatch(userActions.kakaoLogin(code));
+    };
+    fetchData();
+  }, []);
+
+  // React.useEffect(async () => {
+  //   await dispatch(userActions.kakaoLogin(code));
+  // }, []);
+  
+  return (
+    <div></div>
+  );
+}
+
+export default RedirectHandler;
\ No newline at end of file
diff --git a/frontend/src/Components/UpsideGray.tsx b/frontend/src/Components/UpsideGray.tsx
index c0fc030f..79cb4467 100644
--- a/frontend/src/Components/UpsideGray.tsx
+++ b/frontend/src/Components/UpsideGray.tsx
@@ -7,7 +7,7 @@ const BackgrDiv = styled.div`
     display: flex;
     width: 100%;
     height: 65px;
-    background-color: #F1F1F1;
+    background-color: #8292A5;
 `;
 
 const LogoDiv = styled.div`
@@ -28,7 +28,7 @@ const ImageDiv = styled.div`
 const TitleDiv = styled.div`
     font-size: 20pt;
     font-weight: bold;
-    color: #534D4D;
+    color: white;
     margin-left: 15px;
     margin-bottom: 5px;
 `;
diff --git a/frontend/src/Components/nonSelectBar.tsx b/frontend/src/Components/nonSelectBar.tsx
index 653844d7..08919ce3 100644
--- a/frontend/src/Components/nonSelectBar.tsx
+++ b/frontend/src/Components/nonSelectBar.tsx
@@ -38,7 +38,7 @@ export default function nonSelectBar() {
     return (
         <Box sx={{position: 'fixed'}}>
         <ThemeProvider theme={theme}>
-        <Box bgcolor={"secondary.light"} display={'flex'} width={"100vw"} height={'108px'}>
+        <Box bgcolor={"#4F6680"} display={'flex'} width={"100vw"} height={'108px'}>
             <Box marginLeft={'20px'} marginY={"auto"} alignItems={'center'}>
                 
             </Box>
diff --git a/frontend/src/Images/bg_page.png b/frontend/src/Images/bg_page.png
new file mode 100644
index 00000000..64d2d3a5
Binary files /dev/null and b/frontend/src/Images/bg_page.png differ
diff --git a/frontend/src/Pages/Main.tsx b/frontend/src/Pages/Main.tsx
index ad487e43..cabeaf8d 100644
--- a/frontend/src/Pages/Main.tsx
+++ b/frontend/src/Pages/Main.tsx
@@ -13,6 +13,26 @@ import MainModal from '../Components/MainModal';
 import ProjectSelect from '../Components/ProjectSelect';
 import NonSelectBar from '../Components/nonSelectBar';
 
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Container from '@mui/material/Container';
+import background_dark from '../Images/background_dark.png';
+import Bg_page from '../Images/bg_page.png';
+
+
+    const BackgroundPage = styled.div`
+    width: 100vw;
+    height: 100vh;
+    background-image: url(${Bg_page});
+    background-position: center;
+    background-repeat: no-repeat;
+    `
+
 
 export default function Main() {
 
@@ -30,7 +50,7 @@ export default function Main() {
                         <Box width={'16vw'} >
                             <UpsideGray />
                         </Box>
-                        <Box sx={{width:"16vw", height:"42px", alignText:'center', bgcolor:"#D9D9D9", alignContent:'center'}} >
+                        <Box sx={{width:"16vw", height:"42px", alignText:'center', bgcolor:"#4F6680", alignContent:'center'}} >
                             <ProjectSelect/>
                         </Box>
                     </Box>
@@ -39,26 +59,24 @@ export default function Main() {
                     </Box>
                 </Box>
 
-                <Box  width={'100vw'} display={'flex'} height={'100vh'}>
+                <Box  width={'100vw'} display={'flex'} height={'100vh'}sx={{bgcolor: '#2F3F52'}}>
                     {/* 좌측 */}
-                    <Box width={'16vw'} display={'flex'} flexDirection={'column'} sx={{bgcolor: '#F3F3F3'}}>
+                    <Box width={'16vw'} display={'flex'} flexDirection={'column'} sx={{bgcolor: '#2F3F52'}}>
                         <BasicList />
                         <Box width={'16vw'}position={'fixed'} sx={{left:0, bottom:0, marginBottom: "10px"}}>    
                         <Profile />
                         </Box>
                     </Box>
                     {/* 우측 */}
+                    <BackgroundPage>
                     <Box display={'flex'} flexDirection={'column'} marginX={'auto'} marginY={'50px'} overflow={'auto'} height={"100vh"}>
                         
                         <Box display={'flex'} justifyContent={'center'} alignItems={'center'}>
                         <Box display={'flex'} justifyContent={'center'}  width={'20%'}></Box>
-                            <Box display={'flex'} justifyContent={'center'}  width={'60%'}><Typography variant='h4' fontWeight={'bold'} >Projects</Typography></Box> 
+                            <Box display={'flex'} justifyContent={'center'}  width={'60%'}><Typography variant='h4' fontWeight={'bold'} color={'white'}>Projects</Typography></Box> 
                             <Box width={'20%'} display={'flex'} justifyContent={'center'}>
                         
                                     <MainModal  onClickToggleModal = {onClickToggleModal}></MainModal>
-                            
-                                {/* <CreateBtn onClick={ onClickToggleModal}>create</CreateBtn> */}
-
                             </Box>
                             
                         </Box>
@@ -66,7 +84,8 @@ export default function Main() {
                         <Box display={'flex'} justifyContent={'center'} marginBottom={'10rem'}>
                             <ImgList/>
                         </Box>
-                    </Box>
+                        
+                    </Box></BackgroundPage>
                 </Box> 
             </Box>
         </ThemeProvider>
@@ -87,7 +106,7 @@ export const theme = createTheme({
 const CreateBtn = styled.button `
     width: 100px;
     height: 30px;
-    background-color: #FF9198;
+    background-color: #F5ADB3;
     color: white;
     font-size: 15px;
     font-weight: bold;
@@ -97,5 +116,5 @@ const CreateBtn = styled.button `
         transition: 0.5s;
     }
 `;
-
+// #ff9198
 
diff --git a/frontend/src/redux/user2.tsx b/frontend/src/redux/user2.tsx
new file mode 100644
index 00000000..9b49df9c
--- /dev/null
+++ b/frontend/src/redux/user2.tsx
@@ -0,0 +1,34 @@
+import axios from "axios";
+import { ThunkAction } from 'redux-thunk';
+import { Action } from 'redux';
+
+const kakaoLogin = (code: string) => {
+    return function (dispatch :any, getState :any) {
+        axios({
+            method: "GET",
+            url: `http://localhost:3000/?code=${code}`,
+        })
+        .then((res) => {
+            //get token
+            console.log(res);
+            
+            const ACCESS_TOKEN = res.data.accessToken;
+
+            //local store (temp)
+            localStorage.setItem("token", ACCESS_TOKEN);
+
+            window.alert("Login success...");
+            //get token -> change page to HOME
+            //history.replace("/home"); 
+        
+        }).catch((err) => {
+            console.log("Login error", err);
+            window.alert("Login failed...");
+            //history.replace("/home");
+        });
+    }
+};
+
+const actionCreators = { kakaoLogin }; 
+
+export { actionCreators }