diff --git a/src/component/Sidebar.jsx b/src/component/Sidebar.jsx
index 7d46c0838d7be12ff1983d6848ffe103563d2680..df4fb6180dc47ffb7eee1b7536d5cb3149a8cac6 100644
--- a/src/component/Sidebar.jsx
+++ b/src/component/Sidebar.jsx
@@ -6,8 +6,17 @@ import LinkSidebar from "./LinkSidebar";
 import { useAuthContext } from "../utils/contex";
 import styled from "@emotion/styled";
 
+const logout = (token) => {
+  fetch(`${process.env.REACT_APP_BASE_URL}/auth/logout/`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Token ${token}`
+    }
+  })
+};
+
 const Sidebar = () => {
-  const { handleLogout } = useAuthContext();
+  const { handleLogout, profile } = useAuthContext();
   return (
     <Center
       css={css`
@@ -52,7 +61,7 @@ const Sidebar = () => {
           height: 2.5rem;
         `}
       >
-        <StyledA data-testid="logout" onClick={() => handleLogout()}>
+        <StyledA data-testid="logout" onClick={() => {logout(profile.token.repeat(1)); handleLogout();}}>
           LOGOUT
         </StyledA>
       </Center>
diff --git a/src/page/Login.jsx b/src/page/Login.jsx
index 15cf9636bdc82d441ed55ae7d7fbe669b75196aa..12634e3a48b88edf141beb508beb45e503b97cde 100644
--- a/src/page/Login.jsx
+++ b/src/page/Login.jsx
@@ -4,7 +4,7 @@ import { useAuthContext } from "../utils/contex";
 import { css } from "@emotion/core";
 import Logo from "../component/Logo";
 import styled from "@emotion/styled";
-import { Center } from "../component/html/html";
+import {Center, ErrorDiv} from "../component/html/html";
 
 const Login = () => {
   const { register, handleSubmit, errors } = useForm();
@@ -84,7 +84,7 @@ const Login = () => {
           />
           {/* errors will return when field validation fails  */}
           {errors.username && (
-            <span data-testid="name-required">Username field is required</span>
+            <span css={css`color: darkred`} data-testid="name-required">Username field is required</span>
           )}
           <FieldLogin
             css={css`
@@ -97,11 +97,11 @@ const Login = () => {
             ref={register({ required: true })}
           />
           {errors.password && (
-            <span data-testid="password-required">
+            <span css={css`color: darkred`} data-testid="password-required">
               Password field is required
             </span>
           )}
-          {errorState && <div>Password salah !</div>}
+          {errorState && <ErrorDiv>Password salah !</ErrorDiv>}
           <LoginButton
             css={css`
               margin-top: 2rem;