diff --git a/src/App.tsx b/src/App.tsx
index 3e1b31735a47c62b296c985cc9c7d4d4cdaaa03f..ad854579226382f32f568e830cd13d6d048b0526 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,18 +2,31 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import Login from './components/Login'
 import Navbar from './components/Navbar'
 import Register from './components/Register'
+import NotFound from './components/NotFound'
 import Logout from './components/Logout'
+import { isLoggedIn } from './utils/LocalStorage'
 
 function App() {
 
   return (
     <BrowserRouter>
-      <Navbar/>
-      <Routes>
-        <Route path='/Login' element={<Login/>}/>
-        <Route path='/Register' element={<Register/>}/>
-        <Route path='/Logout' element={<Logout/>}/>
-      </Routes>
+      {isLoggedIn() ?
+      <>
+        <Navbar/>
+        <Routes>
+          <Route path='/Logout' element={<Logout/>}/>
+          <Route path='*' element={<NotFound/>}/>
+        </Routes>
+      </>
+      :
+      <>
+        <Routes>
+          <Route path='/Login' element={<Login/>}/>
+          <Route path='/Register' element={<Register/>}/>
+          <Route path='*' element={<Login/>}/>
+        </Routes>
+      </>
+    }
     </BrowserRouter>
   )
 }
diff --git a/src/api/Login.ts b/src/api/Login.ts
index c14986c911218c3ffc33d3802090757fff7df9d5..89da61f91c79eb0727e463cd5e23ff0f66d76b10 100644
--- a/src/api/Login.ts
+++ b/src/api/Login.ts
@@ -47,7 +47,6 @@ export async function login(username : string, password : string) {
         const data = {username : username, 
                         password : password};
         const response = await axios.post<string>(API_URL, data);
-        console.log("api response", response);
         return response;
     } catch(err) {
         alert(err);
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index f434a7d9941fb2a8efb3bec11db143a9a494e779..1d26c84a834f9e5d9467130cba513711f3b05b5a 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -12,7 +12,7 @@ import {
   Link,
   FormErrorMessage,
 } from '@chakra-ui/react'
-import { validateConfirmPassword, validateEmail, validateLogin, validateRegister, validateUsername } from '../utils/Login'
+import { validateLogin, validateUsername } from '../utils/Login'
 import React, {useState} from 'react'
 import { useNavigate } from 'react-router-dom';
 import { setUser } from '../utils/LocalStorage';
@@ -23,8 +23,8 @@ type formType = {
 };
 
 export default function Login() {
-  const [formData, setFormData] = useState<formType>({username : "q",
-                                                      password : "q"});
+  const [formData, setFormData] = useState<formType>({username : "",
+                                                      password : ""});
   const [usernameValid, setUsernameValid] = useState(true);
   const [passwordValid, setPasswordValid] = useState(true);
   const navigate = useNavigate();
@@ -32,11 +32,11 @@ export default function Login() {
   function handleChange (event : React.ChangeEvent<HTMLInputElement>) {
     const { name, value } = event.target;
     setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
-  };
+  }
 
   function revalidateUsername() {
     validateUsername(formData.username).then((available) => setUsernameValid(!available));
-  };
+  }
 
   function handleSubmit(event : React.FormEvent<HTMLFormElement>) {
     revalidateUsername();
@@ -54,7 +54,7 @@ export default function Login() {
     }
 
     event.preventDefault();
-  };
+  }
 
   return (
     <Flex
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3db845e41447f7ae560824c75f48519dd87f9bcd
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,17 @@
+import { Container, Text } from '@chakra-ui/react'
+
+export default function NotFound() {
+  return (
+    <Container
+      sx={{ width: '100vw', height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+    >
+      <Container>
+        <Text variant="h1" textAlign={'center'}>
+          404 Not Found
+        </Text>
+      </Container>
+    </Container>
+  )
+}
+  
+  
\ No newline at end of file
diff --git a/src/components/Register.tsx b/src/components/Register.tsx
index 4d101c3b69635c514492e7c45566703d3a848db2..3f9b92e494e6bafdbe7a56b863afdb72025bd340 100644
--- a/src/components/Register.tsx
+++ b/src/components/Register.tsx
@@ -26,11 +26,11 @@ type formType = {
 };
 
 export default function Register() {
-  const [formData, setFormData] = useState<formType>({username : "q",
-                                                      name : "q",
-                                                      email : "qwe@gmail.com",
-                                                      password : "q",
-                                                      confirmPassword : "q"});
+  const [formData, setFormData] = useState<formType>({username : "",
+                                                      name : "",
+                                                      email : "",
+                                                      password : "",
+                                                      confirmPassword : ""});
   const [usernameValid, setUsernameValid] = useState(true);
   const [emailValid, setEmailValid] = useState(true);
   const [passwordValid, setPasswordValid] = useState(true);
@@ -39,18 +39,18 @@ export default function Register() {
   function handleChange (event : React.ChangeEvent<HTMLInputElement>) {
     const { name, value } = event.target;
     setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
-  };
+  }
 
   function revalidateUsername() {
     validateUsername(formData.username).then((available) => setUsernameValid(available));
-  };
+  }
   function revalidateEmail() {
     validateEmail(formData.email).then((available) => setEmailValid(available));
-  };
+  }
   function revalidatePassword() {
     const valid = validateConfirmPassword(formData.password, formData.confirmPassword);
     setPasswordValid(valid);
-  };
+  }
 
   function handleSubmit(event : React.FormEvent<HTMLFormElement>) {
     revalidateUsername();
@@ -68,7 +68,7 @@ export default function Register() {
     }
 
     event.preventDefault();
-  };
+  }
 
   return (
     <Flex
diff --git a/src/utils/LocalStorage.ts b/src/utils/LocalStorage.ts
index 83e191051f9357a8e2d310e576fe9ecd40ba2c96..a82db200659282c4e5a5186770948fc77f17e575 100644
--- a/src/utils/LocalStorage.ts
+++ b/src/utils/LocalStorage.ts
@@ -1,5 +1,6 @@
 
 export function setUser(username : string) {
+    // TODO : async issue
     localStorage.setItem('username', username);
 }
 
@@ -14,6 +15,5 @@ export function getUser() {
 
 export function isLoggedIn() {
     const loggedIn = (getUser() !== null);
-    console.log('isLoggedIn', loggedIn);
     return loggedIn;
 }
diff --git a/src/utils/Login.ts b/src/utils/Login.ts
index 5f944f9bdde8490fc769cb18d28628a29883ce06..9a84b4eed7f8e30a5dc0698e87dc387c210cb4f3 100644
--- a/src/utils/Login.ts
+++ b/src/utils/Login.ts
@@ -25,7 +25,6 @@ export async function validateRegister(username : string, name : string, email :
 
 export async function validateLogin(username : string, password : string) {
     const response = await login(username, password);
-        console.log("util response", response);
-        const success = (response.data === "success");
+    const success = (response.data === "success");
     return success;
 }