diff --git a/frontend/components/Login/Login.jsx b/frontend/components/Login/Login.jsx
new file mode 100644
index 0000000..74938af
--- /dev/null
+++ b/frontend/components/Login/Login.jsx
@@ -0,0 +1,87 @@
+import React from "react";
+import LoginStyle from "./Login.style";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faUser,
+  faEnvelope,
+  faLock,
+  faClose,
+} from "@fortawesome/free-solid-svg-icons";
+import { UserContext } from "../../pages/user/usercontext";
+import { useState } from "react";
+import Link from "next/link";
+import { useContext } from "react";
+
+function Login() {
+  const [userData, setUserData] = useState({
+    email: "",
+    password: "",
+  });
+
+  const handleInput = (event) => {
+    const name = event.target.name;
+    const value = event.target.value;
+    setUserData({ ...userData, [name]: value });
+  };
+
+  return (
+    <LoginStyle>
+      <form className="form-wrapper">
+        <div className="reg-wide-container">
+          <FontAwesomeIcon icon={faClose} />
+        </div>
+
+        <p className="reg-title">Sign in</p>
+
+        <img
+          src="/images/user.png"
+          width={100}
+          height={100}
+          style={{ "margin-bottom": 20 }}
+        ></img>
+
+        <div className="reg-field">
+          <div className="reg-label">
+            <FontAwesomeIcon icon={faEnvelope} />
+          </div>
+          <input
+            className="reg-input"
+            name="email"
+            autoComplete="off"
+            onChange={handleInput}
+            type="text"
+            value={userData.email}
+            placeholder="Email Address"
+          />
+        </div>
+        <div className="reg-field">
+          <div className="reg-label">
+            <FontAwesomeIcon icon={faLock} />
+          </div>
+          <input
+            className="reg-input"
+            name="password"
+            autoComplete="off"
+            onChange={handleInput}
+            type="password"
+            value={userData.password}
+            placeholder="Password"
+          />
+        </div>
+        <Link href="/">
+          <button type="submit" className="submit-button">
+            Submit
+          </button>
+        </Link>
+        <p className="foot-text">
+          New here?&nbsp;
+          <Link href="/signup" exact className="foot-text underline">
+            Create an account
+          </Link>
+        </p>
+      </form>
+    </LoginStyle>
+  );
+}
+export default Login;
diff --git a/frontend/components/Login/Login.style.js b/frontend/components/Login/Login.style.js
new file mode 100644
index 0000000..6883254
--- /dev/null
+++ b/frontend/components/Login/Login.style.js
@@ -0,0 +1,13 @@
+import styled from "styled-components"
+
+export default styled.section`
+  display: flex;
+  justify-content:center;
+  align-items:center;
+  .content {
+    display: flex;
+    justify-content:center;
+    align-items:center;
+    flex-direction:column;
+  }
+`
\ No newline at end of file
diff --git a/frontend/components/NavBar/index.js b/frontend/components/NavBar/index.js
index b53ba63..44da41e 100644
--- a/frontend/components/NavBar/index.js
+++ b/frontend/components/NavBar/index.js
@@ -1,136 +1,191 @@
-import React from 'react';
-import {Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography,alpha} from "@mui/material";
-import GitHubIcon from '@mui/icons-material/GitHub';
-import MenuIcon from '@mui/icons-material/Menu';
+import React, { useContext } from "react";
+import {
+  Avatar,
+  Box,
+  Button,
+  Container,
+  IconButton,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Tooltip,
+  Typography,
+  alpha,
+} from "@mui/material";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import MenuIcon from "@mui/icons-material/Menu";
 import NavbarStyle from "./Navbar.style";
-import Logo from './Logo';
-
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+import Logo from "./Logo";
+import UserAuth, { UserContext } from "pages/user/usercontext";
+import Link from "next/link";
+const settings = ["Profile", "Account", "Dashboard", "Logout"];
 
 function Index(props) {
-    const [anchorElNav, setAnchorElNav] = React.useState(null);
-    const [anchorElUser, setAnchorElUser] = React.useState(null);
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+  const [anchorElUser, setAnchorElUser] = React.useState(null);
 
-    const handleOpenNavMenu = (event) => {
-        setAnchorElNav(event.currentTarget);
-    };
-    const handleOpenUserMenu = (event) => {
-        setAnchorElUser(event.currentTarget);
-    };
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
 
-    const handleCloseNavMenu = () => {
-        setAnchorElNav(null);
-    };
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
 
-    const handleCloseUserMenu = () => {
-        setAnchorElUser(null);
-    };
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
 
-    return (
-        <NavbarStyle position="relative" sx={{bgcolor:alpha('#000000',0.50),m:'0px'}}>
-            <Container maxWidth="xl">
-                <Toolbar disableGutters="false">
-                    <Typography variant='h4' sx={{fontWeight:'bold'}}>
-                        URL MINIFY
-                    </Typography>
-                    <Box sx={{ flexGrow: 1,flexDirection:'row-reverse', display: { xs: 'flex', md: 'none' } }}>
-                        
-                        <IconButton
-                            size="large"
-                            aria-label="account of current user"
-                            aria-controls="menu-appbar"
-                            aria-haspopup="true"
-                            onClick={handleOpenNavMenu}
-                            color="inherit"
-                        >
-                            <MenuIcon />
-                        </IconButton>
-                        <Menu
-                            id="menu-appbar"
-                            anchorEl={anchorElNav}
-                            anchorOrigin={{
-                                vertical: 'bottom',
-                                horizontal: 'left',
-                            }}
-                            keepMounted
-                            transformOrigin={{
-                                vertical: 'top',
-                                horizontal: 'left',
-                            }}
-                            open={Boolean(anchorElNav)}
-                            onClose={handleCloseNavMenu}
-                            sx={{
-                                display: { xs: 'block', md: 'none' },
-                            }}
-                        >
-                            <MenuItem onClick={handleCloseNavMenu}>
-                            <a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} >
-                                <Typography textAlign="center" sx={{display:'flex'}} >
-                                <GitHubIcon fontSize='small'/>
-                                GitHub
-                                </Typography>
-                            </a>
-                            </MenuItem>
-                            <MenuItem onClick={handleCloseNavMenu}>
-                                <Typography textAlign="center" sx={{display:'flex'}} >
-                                CRIDITS
-                                </Typography>
-                            </MenuItem>
-                        </Menu>
-                    </Box>
-                    
-                    <Box sx={{ flexGrow: 1,flexDirection:'row-reverse',gap:'10px',px:'20px', display: { xs: 'none', md: 'flex' } }}>
-                            <a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} >
-                            <Button
-                                onClick={handleCloseNavMenu}
-                                sx={{  color: 'white', display: 'flex',gap:'10px',fontSize:'h5.fontSize',fontFamily:'sans-serif',fontStyle:'bold', textTransform: 'capitalize',fontWeight:'bold'}}
-                            >
-                                <GitHubIcon fontSize='large'/>
-                                GitHub
-                            </Button>
-                            </a>
-                            <Button
-                                onClick={handleCloseNavMenu}
-                                sx={{  color: 'white', display: 'block',fontSize:'h5.fontSize'}}
-                            >
-                                CREDITS
-                            </Button>
-                            
-                    </Box>
+  const { user, login, logout } = useContext(UserAuth);
 
-                    <Box sx={{ flexGrow: 0 }}>
-                        <Tooltip title="Open settings">
-                            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" sx={{ width: 50, height: 50 }} />
-                            </IconButton>
-                        </Tooltip>
-                        <Menu
-                            sx={{ mt: '45px' }}
-                            id="menu-appbar"
-                            anchorEl={anchorElUser}
-                            anchorOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right',
-                            }}
-                            keepMounted
-                            transformOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right',
-                            }}
-                            open={Boolean(anchorElUser)}
-                            onClose={handleCloseUserMenu}
-                        >
-                            {settings.map((setting) => (
-                                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                                    <Typography textAlign="center">{setting}</Typography>
-                                </MenuItem>
-                            ))}
-                        </Menu>
-                    </Box>
-                </Toolbar>
-            </Container>
-        </NavbarStyle>
-    );
+  return (
+    <NavbarStyle
+      position="relative"
+      sx={{ bgcolor: alpha("#000000", 0.5), m: "0px" }}
+    >
+      <Container maxWidth="xl">
+        <Toolbar disableGutters="false">
+          <Typography variant="h4" sx={{ fontWeight: "bold" }}>
+            URL MINIFY
+          </Typography>
+          <Box
+            sx={{
+              flexGrow: 1,
+              flexDirection: "row-reverse",
+              display: { xs: "flex", md: "none" },
+            }}
+          >
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: "block", md: "none" },
+              }}
+            >
+              <MenuItem onClick={handleCloseNavMenu}>
+                <a
+                  href="https://github.com/BRAVO68WEB/url-minify"
+                  target={"_blank"}
+                >
+                  <Typography textAlign="center" sx={{ display: "flex" }}>
+                    <GitHubIcon fontSize="small" />
+                    GitHub
+                  </Typography>
+                </a>
+              </MenuItem>
+              <MenuItem onClick={handleCloseNavMenu}>
+                <Typography textAlign="center" sx={{ display: "flex" }}>
+                  CREDITS
+                </Typography>
+              </MenuItem>
+            </Menu>
+          </Box>
+
+          <Box
+            sx={{
+              flexGrow: 1,
+              flexDirection: "row-reverse",
+              gap: "10px",
+              px: "20px",
+              display: { xs: "none", md: "flex" },
+            }}
+          >
+            <a
+              href="https://github.com/BRAVO68WEB/url-minify"
+              target={"_blank"}
+            >
+              <Button
+                onClick={handleCloseNavMenu}
+                sx={{
+                  color: "white",
+                  display: "flex",
+                  gap: "10px",
+                  fontSize: "h5.fontSize",
+                  fontFamily: "sans-serif",
+                  fontStyle: "bold",
+                  textTransform: "capitalize",
+                  fontWeight: "bold",
+                }}
+              >
+                <GitHubIcon fontSize="large" />
+                GitHub
+              </Button>
+            </a>
+            <Button
+              onClick={handleCloseNavMenu}
+              sx={{ color: "white", display: "block", fontSize: "h5.fontSize" }}
+            >
+              CREDITS
+            </Button>
+          </Box>
+
+          {user ? (
+            <Box sx={{ flexGrow: 0 }}>
+              <Tooltip title="Open settings">
+                <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                  <Avatar
+                    alt="Remy Sharp"
+                    src="/static/images/avatar/2.jpg"
+                    sx={{ width: 50, height: 50 }}
+                  />
+                </IconButton>
+              </Tooltip>
+              <Menu
+                sx={{ mt: "45px" }}
+                id="menu-appbar"
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
+              >
+                {settings.map((setting) => (
+                  <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                    <Typography textAlign="center">{setting}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+          ) : (
+            <Typography onClick={login}>
+              <Link href="./login">LOGIN</Link>
+            </Typography>
+          )}
+        </Toolbar>
+      </Container>
+    </NavbarStyle>
+  );
 }
 
-export default Index;
\ No newline at end of file
+export default Index;
diff --git a/frontend/components/Reg/Reg.jsx b/frontend/components/Reg/Reg.jsx
index 7bdec2a..1f8b25f 100644
--- a/frontend/components/Reg/Reg.jsx
+++ b/frontend/components/Reg/Reg.jsx
@@ -1,67 +1,105 @@
-import React from 'react';
+import React from "react";
 import RegStyle from "./Reg.style";
-import Image from 'next/image'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser, faEnvelope, faLock, faClose } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react';
-import { Link } from '@mui/material';
+import Image from "next/image";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faUser,
+  faEnvelope,
+  faLock,
+  faClose,
+} from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import { Link } from "@mui/material";
 
-function Reg(){
+function Reg() {
+  const [userData, setUserData] = useState({
+    username: "",
+    email: "",
+    password: "",
+    repassword: "",
+  });
 
-    const [userData, setUserData] = useState({
-        username: "",
-        email: "",
-        password:"",
-        repassword:""
-    })
+  const handleInput = (event) => {
+    const name = event.target.name;
+    const value = event.target.value;
+    setUserData({ ...userData, [name]: value });
+  };
 
-    const handleInput = (event) => {
-        const name = event.target.name;
-        const value = event.target.value;
-        setUserData({ ...userData, [name]: value})
-    }
+  return (
+    <RegStyle>
+      <form className="form-wrapper">
+        <div className="reg-wide-container">
+          <FontAwesomeIcon icon={faClose} />
+        </div>
 
-    return(
-        <RegStyle>
-            <form className='form-wrapper'>
-                <div className='reg-wide-container'> 
-                    <FontAwesomeIcon icon={faClose}/>
-                </div>
-               
-                <p className='reg-title'>Sign Up</p>
-                <div className='reg-field'>
-                    <div className='reg-label'>
-                        <FontAwesomeIcon icon={faUser}/>
-                    </div>
-                    <input className='reg-input' name='username' autoComplete='off' type="text" value={userData.username} onChange={handleInput} placeholder='Full Name' />
-                </div>
-                <div className='reg-field'>
-                    <div className='reg-label'>
-                        <FontAwesomeIcon icon={faEnvelope}/>
-                    </div>
-                    <input className='reg-input' name='email' autoComplete='off' onChange={handleInput} type="text" value={userData.email} placeholder='Email Address'/>
-                </div>
-                <div className='reg-field'>
-                    <div className='reg-label'>
-                        <FontAwesomeIcon icon={faLock}/>
-                    </div>
-                    <input className='reg-input' name='password' autoComplete='off' onChange={handleInput} type="password" value={userData.password} placeholder='Password'/>
-                </div>
-                <div className='reg-field'>
-                    <div className='reg-label'>
-                        <FontAwesomeIcon icon={faLock}/>
-                    </div>
-                    <input className='reg-input' name='repassword' autoComplete='off' onChange={handleInput} type="password" value={userData.repassword} placeholder='Confirm Password' />
-                </div>
-                <button type='submit' className='submit-button'>Submit</button>
-                <p className="foot-text">Already registered? Login&nbsp;
-                    <Link href="/" exact className='foot-text underline'>here</Link>
-                </p>
-                
-
-            </form>
-        </RegStyle>
-        
-    )
+        <p className="reg-title">Sign Up</p>
+        <div className="reg-field">
+          <div className="reg-label">
+            <FontAwesomeIcon icon={faUser} />
+          </div>
+          <input
+            className="reg-input"
+            name="username"
+            autoComplete="off"
+            type="text"
+            value={userData.username}
+            onChange={handleInput}
+            placeholder="Full Name"
+          />
+        </div>
+        <div className="reg-field">
+          <div className="reg-label">
+            <FontAwesomeIcon icon={faEnvelope} />
+          </div>
+          <input
+            className="reg-input"
+            name="email"
+            autoComplete="off"
+            onChange={handleInput}
+            type="text"
+            value={userData.email}
+            placeholder="Email Address"
+          />
+        </div>
+        <div className="reg-field">
+          <div className="reg-label">
+            <FontAwesomeIcon icon={faLock} />
+          </div>
+          <input
+            className="reg-input"
+            name="password"
+            autoComplete="off"
+            onChange={handleInput}
+            type="password"
+            value={userData.password}
+            placeholder="Password"
+          />
+        </div>
+        <div className="reg-field">
+          <div className="reg-label">
+            <FontAwesomeIcon icon={faLock} />
+          </div>
+          <input
+            className="reg-input"
+            name="repassword"
+            autoComplete="off"
+            onChange={handleInput}
+            type="password"
+            value={userData.repassword}
+            placeholder="Confirm Password"
+          />
+        </div>
+        <button type="submit" className="submit-button">
+          Submit
+        </button>
+        <p className="foot-text">
+          Already registered? Login&nbsp;
+          <Link href="/login" exact className="foot-text underline">
+            here
+          </Link>
+        </p>
+      </form>
+    </RegStyle>
+  );
 }
-export default Reg;
\ No newline at end of file
+export default Reg;
diff --git a/frontend/components/Reg/styles.css b/frontend/components/Reg/styles.css
deleted file mode 100644
index 4ccb71b..0000000
--- a/frontend/components/Reg/styles.css
+++ /dev/null
@@ -1,106 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
-
-.reg-label{
-    font-size: 24px;
-    width: 30px;
-    color: #9134bd;
-    position: relative;
-}
-.reg-title{
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 700;
-    font-size: 36px;
-    text-align: center;
-    margin-bottom: 40px;
-    color:#9134bd;
-}
-.reg-wide-container{
-    width: 100%;
-    text-align: right;
-    color: #9134bd;
-    font-size: 24px;
-}
-.reg-input{
-    margin-left: 10px;
-    height: 35px;
-    width: 340px;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 400;
-    font-size: 16px;
-    border-radius: 20px;
-    padding: 10px;
-    border: none;
-    justify-content: flex-end;
-    color: #9134bd;
-}
-.reg-input:active, .reg-input:focus{
-    outline: none;
-}
-.reg-input::placeholder{
-    color: #6babc7;
-}
-.reg-field{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin-bottom: 20px;
-    margin-left: 20px;
-    margin-right: 20px;
-}
-.form-wrapper{
-    background-color: rgba(255,255,255,0.5);
-    padding: 20px 30px 40px 30px;
-    border-radius: 20px;
-    font-size: 24px;
-    text-align: center;
-    backdrop-filter: blur(6px);
-    border-style: solid;
-    border-color: #f1faff;
-    border-width: 1px 0px 0px 1px;
-    margin-top: 0;
-}
-.submit-button{
-
-    width: 100px;
-    height: 40px;
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 400;
-    font-size: 18px;
-    border-radius: 10px;
-    border: none;
-    margin-top: 20px ;    
-    background-image: linear-gradient(135deg ,#cc5fff, #7E3EE4, #0087ca, #2db9ff);
-    background-size: 200%;
-    background-position: left;
-    color: white;
-    transition: 0.5s;
-}
-.submit-button:hover{
-    background-position: right;
-}
-.submit-button:active{
-    transform: scale(0.95);
-    transition: 0.1s
-}
-
-.icon{
-    fill: black;
-}
-
-.foot-text{
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 400;
-    font-size: 18px;
-    margin-top: 50px;
-    color: black;
-    text-decoration: none;
-}
-
-.underline{
-    text-decoration: underline;
-    color: #9134bd;
-}
-.underline:hover{
-    color: #008ed4;
-    transition: 0.5s;
-}
diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
index b639b0f..e5bd45a 100644
--- a/frontend/jsconfig.json
+++ b/frontend/jsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": { "@pages/*": ["pages/*"] }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5e18b75..1b85498 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -738,6 +738,19 @@
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
       },
+      "history": {
+         "version": "4.10.1",
+         "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+         "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+         "requires": {
+            "@babel/runtime": "^7.1.2",
+            "loose-envify": "^1.2.0",
+            "resolve-pathname": "^3.0.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0",
+            "value-equal": "^1.0.1"
+         }
+      },
       "hoist-non-react-statics": {
          "version": "3.3.2",
          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -775,6 +788,11 @@
             "has": "^1.0.3"
          }
       },
+      "isarray": {
+         "version": "0.0.1",
+         "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+         "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+      },
       "js-tokens": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -808,6 +826,15 @@
             "js-tokens": "^3.0.0 || ^4.0.0"
          }
       },
+      "mini-create-react-context": {
+         "version": "0.4.1",
+         "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+         "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+         "requires": {
+            "@babel/runtime": "^7.12.1",
+            "tiny-warning": "^1.0.3"
+         }
+      },
       "ms": {
          "version": "2.1.2",
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -870,6 +897,14 @@
          "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
          "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
       },
+      "path-to-regexp": {
+         "version": "1.8.0",
+         "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+         "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+         "requires": {
+            "isarray": "0.0.1"
+         }
+      },
       "path-type": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -942,6 +977,44 @@
          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
       },
+      "react-router": {
+         "version": "5.2.1",
+         "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+         "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+         "requires": {
+            "@babel/runtime": "^7.12.13",
+            "history": "^4.9.0",
+            "hoist-non-react-statics": "^3.1.0",
+            "loose-envify": "^1.3.1",
+            "mini-create-react-context": "^0.4.0",
+            "path-to-regexp": "^1.7.0",
+            "prop-types": "^15.6.2",
+            "react-is": "^16.6.0",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0"
+         },
+         "dependencies": {
+            "react-is": {
+               "version": "16.13.1",
+               "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+               "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+            }
+         }
+      },
+      "react-router-dom": {
+         "version": "5.3.0",
+         "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
+         "integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
+         "requires": {
+            "@babel/runtime": "^7.12.13",
+            "history": "^4.9.0",
+            "loose-envify": "^1.3.1",
+            "prop-types": "^15.6.2",
+            "react-router": "5.2.1",
+            "tiny-invariant": "^1.0.2",
+            "tiny-warning": "^1.0.0"
+         }
+      },
       "react-transition-group": {
          "version": "4.4.2",
          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -973,6 +1046,11 @@
          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
       },
+      "resolve-pathname": {
+         "version": "3.0.0",
+         "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+         "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+      },
       "safe-buffer": {
          "version": "5.1.2",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -1042,6 +1120,16 @@
          "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
          "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
       },
+      "tiny-invariant": {
+         "version": "1.2.0",
+         "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
+         "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
+      },
+      "tiny-warning": {
+         "version": "1.0.3",
+         "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+         "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+      },
       "to-fast-properties": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -1055,6 +1143,11 @@
             "object-assign": "^4.1.1"
          }
       },
+      "value-equal": {
+         "version": "1.0.1",
+         "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+         "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+      },
       "yaml": {
          "version": "1.10.2",
          "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b11fac0..1611d1b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,8 +19,9 @@
       "@mui/material": "^5.4.0",
       "@mui/styled-engine-sc": "^5.3.0",
       "next": "12.0.9",
-      "react": "17.0.2",
+      "react": "^17.0.2",
       "react-dom": "17.0.2",
+      "react-router-dom": "^5.3.0",
       "styled-components": "^5.3.3"
    },
    "license": "MIT",
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 5d25c53..adb3425 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -1,9 +1,14 @@
-import '../styles/globals.css'
-import '../styles/logostyles.css'
-import '../components/Reg/styles.css'
+import "../styles/globals.css";
+import "../styles/logostyles.css";
+import "../styles/styles.css";
+import { UserAuthProvider } from "./user/usercontext";
 
 function MyApp({ Component, pageProps }) {
-   return <Component {...pageProps} />
+  return (
+    <UserAuthProvider>
+      <Component {...pageProps} />
+    </UserAuthProvider>
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 85a1ae8..3667826 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -1,25 +1,29 @@
-import { useState } from 'react'
-import Head from 'next/head'
-import HomeSection from "components/HomeSection/homeSection"
+import { useState, useMemo } from "react";
+import Head from "next/head";
+import HomeSection from "components/HomeSection/homeSection";
 import NavBar from "components/NavBar";
-import Features from 'components/Features'
-
+import Features from "components/Features";
+import Reg from "components/Reg/Reg";
+import Login from "components/Login/Login";
+import { UserAuthProvider, UserContext } from "./user/usercontext";
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
 export default function Home() {
-   const [shortUrl, setShortUrl] = useState(null)
-   const [longURL, setLongURL] = useState('')
-   return (
-      <div className={""}>
-         <Head>
-            <title>URL MiniFy</title>
-            <link rel="icon" href="/favicon.ico" />
-         </Head>
+  const [shortUrl, setShortUrl] = useState(null);
+  const [longURL, setLongURL] = useState("");
 
-         <main className={"main-bg"}>
-             <NavBar />
-             <HomeSection />
-             <Features/>
-         </main>
-      </div>
-   )
+  return (
+    <>
+      <Head>
+        <title>URL MiniFy</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={"main-bg"}>
+        <NavBar />
+        <HomeSection />
+        <Features />
+      </main>
+    </>
+  );
 }
diff --git a/frontend/pages/login.js b/frontend/pages/login.js
new file mode 100644
index 0000000..db6cc8e
--- /dev/null
+++ b/frontend/pages/login.js
@@ -0,0 +1,14 @@
+import { useState } from "react";
+import Head from "next/head";
+import NavBar from "components/NavBar";
+import Features from "components/Features";
+import Login from "components/Login/Login";
+
+export default function signup() {
+  return (
+    <div className="flex-column">
+      <NavBar />
+      <Login />
+    </div>
+  );
+}
diff --git a/frontend/pages/user/usercontext.js b/frontend/pages/user/usercontext.js
new file mode 100644
index 0000000..a92199b
--- /dev/null
+++ b/frontend/pages/user/usercontext.js
@@ -0,0 +1,24 @@
+import { createContext } from "react";
+import { useState } from "react";
+
+const UserAuth = createContext({
+  user: null,
+  login: () => {},
+  logout: () => {},
+});
+
+export const UserAuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const login = () => {
+    setUser("default");
+  };
+
+  const logout = () => {
+    setUser(null);
+  };
+  const context = { user, login, logout };
+
+  return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>;
+};
+
+export default UserAuth;
diff --git a/frontend/public/images/user.png b/frontend/public/images/user.png
new file mode 100644
index 0000000..fe67d03
Binary files /dev/null and b/frontend/public/images/user.png differ
diff --git a/frontend/styles/styles.css b/frontend/styles/styles.css
new file mode 100644
index 0000000..893cf11
--- /dev/null
+++ b/frontend/styles/styles.css
@@ -0,0 +1,107 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap");
+
+.reg-label {
+  font-size: 24px;
+  width: 30px;
+  color: #9134bd;
+  position: relative;
+}
+.reg-title {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 700;
+  font-size: 36px;
+  text-align: center;
+  margin-bottom: 40px;
+  color: #9134bd;
+}
+.reg-wide-container {
+  width: 100%;
+  text-align: right;
+  color: #9134bd;
+  font-size: 24px;
+}
+.reg-input {
+  margin-left: 10px;
+  height: 35px;
+  width: 340px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  border-radius: 20px;
+  padding: 10px;
+  border: none;
+  justify-content: flex-end;
+  color: #9134bd;
+}
+.reg-input:active,
+.reg-input:focus {
+  outline: none;
+}
+.reg-input::placeholder {
+  color: #6babc7;
+}
+.reg-field {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.form-wrapper {
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 20px 30px 40px 30px;
+  border-radius: 20px;
+  font-size: 24px;
+  text-align: center;
+  backdrop-filter: blur(6px);
+  border-style: solid;
+  border-color: #f1faff;
+  border-width: 1px 0px 0px 1px;
+  margin-top: 0;
+}
+.submit-button {
+  width: 100px;
+  height: 40px;
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  border-radius: 10px;
+  border: none;
+  margin-top: 20px;
+  background-image: linear-gradient(135deg, #cc5fff, #7e3ee4, #0087ca, #2db9ff);
+  background-size: 200%;
+  background-position: left;
+  color: white;
+  transition: 0.5s;
+}
+.submit-button:hover {
+  background-position: right;
+}
+.submit-button:active {
+  transform: scale(0.95);
+  transition: 0.1s;
+}
+
+.icon {
+  fill: black;
+}
+
+.foot-text {
+  font-family: "Montserrat", sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  margin-top: 50px;
+  color: black;
+  text-decoration: none;
+}
+
+.underline {
+  text-decoration: underline;
+  color: #9134bd;
+}
+
+.underline:hover {
+  color: #008ed4;
+  transition: 0.5s;
+}