diff --git a/.env.local.example b/.env.local.example
new file mode 100644
index 0000000000000000000000000000000000000000..cc536606d7585c8c6098c81398d04cb077ce1ed7
--- /dev/null
+++ b/.env.local.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:8080
\ No newline at end of file
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index a8bef37817485f7d9860b71d3ff9604dae4ecb9d..78bca63bf0bf690e0e809afb15daaf8c5146f52b 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -17,9 +17,11 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import { MdMenu, MdOutlineArrowDropDown } from 'react-icons/md'
+import { useRouter } from 'next/router'
 
 export default function Navbar() {
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const router = useRouter()
 
   return (
     <>
@@ -54,7 +56,7 @@ export default function Navbar() {
               </HStack>
             </MenuButton>
             <MenuList color="black">
-              <MenuItem>Logout</MenuItem>
+              <MenuItem onClick={() => router.push('/login')}>Logout</MenuItem>
             </MenuList>
           </Menu>
         </HStack>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 1d47a0896b8eaccbf9021de851197dda796a6139..490e3725e12f0471d5d7057ddeb995143442680e 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -13,12 +13,14 @@ import {
 import styles from '@/styles/Login.module.css';
 import React, {useState} from 'react';
 import axios from 'axios';
+import { useRouter } from 'next/router';
 
 const Login = () => {
     const [user, setUser] = useState({
         email : '',
         password : '',
     });
+    const router = useRouter();
     const handleChange = (type: string, e: any) => {
         let updatedValue = {};
         if(type == 'email'){
@@ -30,9 +32,10 @@ const Login = () => {
     };
     const handleSubmit = (e: any) => {
         e.preventDefault();
-        axios.post('http://localhost:8080/auth/login', user)
+        axios.post(`${process.env.NEXT_PUBLIC_API_URL}/auth/login`, user)
             .then((response) => {
                 console.log(response.data);
+                router.push('/admin');
             }, (error) => {
                 if(error.response.status === 400 || error.response.status === 403){
                     alert("Username atau password anda salah!");
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index 579b6b98ccb33a2ce478763dd36c089a82fd1318..0bd2903821e6e00f6f5cce652159f0f7741bb09b 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -27,9 +27,9 @@ const Register = () => {
                         <FormLabel>Alamat Email</FormLabel>
                         <Input placeholder='Alamat Email'></Input>
                         <FormLabel>Kata Sandi</FormLabel>
-                        <Input placeholder='Kata Sandi'></Input>
+                        <Input placeholder='Kata Sandi' type="password"></Input>
                         <FormLabel>Konfirmasi Kata Sandi</FormLabel>
-                        <Input placeholder='Konfirmasi Kata Sandi'></Input>
+                        <Input placeholder='Konfirmasi Kata Sandi' type="password"></Input>
                     </FormControl>
                     <Checkbox>Saya ingin menjadi kontributor</Checkbox>
                     <Text>Dengan menekan tombol daftar di bawah ini, saya menyetujui Persyaratan Layanan dan Kebijakan Privasi kami.</Text>