diff --git a/.gitignore b/.gitignore
index e43b0f988953ae3a84b00331d0ccf5f7d51cb3cf..ce34b3841e4f96fe81bf25f3c68794d29af9e36b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,8 @@
 .DS_Store
+.vscode
+
+backend/__pycache__
+
+
+frontend/package-lock.json
+frontend/package.json
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 4d29575de80483b005c29bfcac5061cd2f45313e..da6ca4aba74ff699c8e8eb859c8d1cc013c43e02 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package-lock.json
+package.json
\ No newline at end of file
diff --git a/frontend/src/Css/Dashboard.css b/frontend/src/Css/Dashboard.css
index 23b3e3d8fa8e7da8ea82515e2caae0591a3d6aa6..c94ad694f451c4f8c97f833c0a4fe7a1956e92d1 100644
--- a/frontend/src/Css/Dashboard.css
+++ b/frontend/src/Css/Dashboard.css
@@ -35,4 +35,5 @@ justify-content: center;
     flex-direction: column;
     margin: 10px;
     padding: 10px;
+    background-color: white;
 }
\ No newline at end of file
diff --git a/frontend/src/Css/Form.css b/frontend/src/Css/Form.css
index 0b98ff2fd421fdf28c7663a4d3e6d0471f36448d..05c7392edf59642b30d57092a152cb77c15da031 100644
--- a/frontend/src/Css/Form.css
+++ b/frontend/src/Css/Form.css
@@ -3,23 +3,23 @@
   padding: 0;
   box-sizing: border-box;
 }
-body {
-  font-family: "Poppins", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+
+.login-view{
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
-  
-  /*background: url('../../Assets/background3.jpg') ;*/
-  background-color: aliceblue
-  no-repeat;  
-  
+  background: url('../Assets/background3.jpg');
   background-size: cover;
   background-position: center;
 }
 
+body {
+  font-family: "Poppins", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
diff --git a/frontend/src/Pages/SignupSigninForms/Form.js b/frontend/src/Pages/SignupSigninForms/Form.js
index 00c578d8991cf534045b120400146238deceda28..4ae4933a0bc4d8d16b26a45cf6548e5a0ade602e 100644
--- a/frontend/src/Pages/SignupSigninForms/Form.js
+++ b/frontend/src/Pages/SignupSigninForms/Form.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { Routes, Route } from "react-router-dom";
 
 import '../../Css/Form.css';
 import { SignInForm } from './SignInForm';
@@ -14,7 +13,7 @@ function Form() {
   };
   
   return (
-    <div>
+    <div className="login-view">
     {isLoginFormVisible ? (
       <SignInForm onRegisterClick={toggleForm} />
     ) : (
diff --git a/frontend/src/Pages/SignupSigninForms/SignInForm.jsx b/frontend/src/Pages/SignupSigninForms/SignInForm.jsx
index ad2a090402932fd4a3a189c1b455350339ff2736..476e3aaf11db04931e299fce1545e5740c06d126 100644
--- a/frontend/src/Pages/SignupSigninForms/SignInForm.jsx
+++ b/frontend/src/Pages/SignupSigninForms/SignInForm.jsx
@@ -1,13 +1,17 @@
 import React, { useState } from 'react';
 import '../../Css/SignForm.css';
+import '../Dashboard/Dashboard.jsx'
 //React-icons imports
 import { FaUser } from "react-icons/fa";
 import { FaLock } from "react-icons/fa";
 
+import { useNavigate } from 'react-router-dom'; // Import useNavigate hook
+
 
 export const SignInForm = ({ onRegisterClick }) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const navigate = useNavigate();
 
   const handleLoginClick = () => {
     // Call the onLoginClick function passed as prop
@@ -22,6 +26,7 @@ export const SignInForm = ({ onRegisterClick }) => {
   };
   const handleSubmit = async (e) => {
     e.preventDefault();
+    navigate('/dashboard');
     /*
      try {
       const response = await REST.post('your-api-endpoint/login', {
@@ -36,7 +41,7 @@ export const SignInForm = ({ onRegisterClick }) => {
       // Handle login error, display message to the user, etc.
     }
     */
-      console.log("Login attempt with username: " + username+ " and password:" +password);
+      //console.log("Login attempt with username: " + username+ " and password:" +password);
       // Redirect user to another page upon successful login
 
     
diff --git a/frontend/src/Pages/SignupSigninForms/SignUpForm.jsx b/frontend/src/Pages/SignupSigninForms/SignUpForm.jsx
index db6b59b1019ef9747efadc9c9752e024031a862d..b09b8dcd17dc581769565e3197fc74512005a61a 100644
--- a/frontend/src/Pages/SignupSigninForms/SignUpForm.jsx
+++ b/frontend/src/Pages/SignupSigninForms/SignUpForm.jsx
@@ -5,6 +5,7 @@ import { MdEmail } from "react-icons/md";
 import { FaUser } from "react-icons/fa";
 import { FaLock } from "react-icons/fa";
 
+import { useNavigate } from 'react-router-dom'; // Import useNavigate hook
 
 export const SignUpForm = ({ onLoginClick }) => {
 
@@ -12,6 +13,8 @@ export const SignUpForm = ({ onLoginClick }) => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [passwordRepeat, setPasswordRepeat] = useState('');
+    const navigate = useNavigate();
+
     const handleLoginClick = () => {
         // Call the onLoginClick function passed as prop
         onLoginClick();
@@ -46,8 +49,9 @@ export const SignUpForm = ({ onLoginClick }) => {
         // Handle login error, display message to the user, etc.
       }
       */
-        console.log("Register attempt with username: " + username+ " and password:" +password);
+        //console.log("Register attempt with username: " + username+ " and password:" +password);
         // Redirect user to another page upon successful login
+        navigate('/dashboard');
   
       
     };
diff --git a/frontend/src/index.js b/frontend/src/index.js
index ffa7a62f1abdaf9578fa3e3ebb927f032c421afd..30b0ac78639018a8515eb1d6d3a70949e11633e9 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -2,14 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './Css/index.css';
 import { Dashboard } from './Pages/Dashboard/Dashboard';
+import Form from './Pages/SignupSigninForms/Form.js';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { SignUpForm } from './Pages/SignupSigninForms/SignUpForm.jsx';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-  {/*<TopNavBar/>*/}
-  <Dashboard/>
-
-  
+      <BrowserRouter>
+        <Routes>
+            <Route path='/' element={<Form/>} />
+            <Route path="/dashboard" element={<Dashboard />} /> {/* Add this route for the Dashboard */}
+         </Routes>
+      </BrowserRouter>
   </React.StrictMode>
 );