diff --git a/src/components/Reservation/AddReserveForm.js b/src/components/Reservation/AddReserveForm.js
index da6f163..8b85437 100644
--- a/src/components/Reservation/AddReserveForm.js
+++ b/src/components/Reservation/AddReserveForm.js
@@ -13,7 +13,7 @@ const AddReserveForm = () => {
   const [errorMessages, setErrorMessages] = React.useState([]);
 
   const { cars, reservations } = state;
-  const { user } = cars;
+  const { user } = state.user;
   const params = useParams();
   const currentCar = cars.cars.find((car) => car.id === Number(params.carId)) || {};
   const {
@@ -32,9 +32,9 @@ const AddReserveForm = () => {
     const reservation = { ...data, user_id: user.id };
     dispatch(createReserve(reservation)).then((response) => {
       if (response.type === 'reserve/createReserve/fulfilled') {
-        if (response.ok) {
+        if (response.payload.code === 200) {
           reset();
-          navigate('/reservation-list');
+          navigate('/cars/reservations');
         } else {
           dispatch(isError(true));
           setErrorMessages(response.payload.error);
@@ -46,7 +46,7 @@ const AddReserveForm = () => {
   useEffect(() => () => {
     dispatch(addFromNav(false));
     dispatch(isError(false));
-  }, [reservations.addFromNav], dispatch);
+  }, [reservations.addFromNav, dispatch]);
 
   return (
     <div className="container w-75 w-sm-50 mt-5 reserve-form-wrap">
diff --git a/src/components/reservation/Reservation.jsx b/src/components/Reservation/Reservation.js
similarity index 91%
rename from src/components/reservation/Reservation.jsx
rename to src/components/Reservation/Reservation.js
index c9a658b..d5b4ead 100644
--- a/src/components/reservation/Reservation.jsx
+++ b/src/components/Reservation/Reservation.js
@@ -12,6 +12,11 @@ function Reservations() {
         <div className="col-md-12">
           <h1 className="text-center">Reservations</h1>
           <div className="row">
+            {reservations.length <= 0 && (
+              <div className="loading">
+                <h4 className="text-center">No reservations</h4>
+              </div>
+            )}
             {reservations.map((reservation) => (
               <div className="col-md-4" key={reservation.id}>
                 <div className="card mb-4">
diff --git a/src/components/Routing.js b/src/components/Routing.js
index 78533f0..79bc6ec 100644
--- a/src/components/Routing.js
+++ b/src/components/Routing.js
@@ -7,6 +7,7 @@ import SignUpSuccesPage from './sign-in-sign-up/SignUpSuccesPage';
 import CarsPage from './cars/CarsPage';
 import Cars from './cars/Cars';
 import CarsDetails from './cars/CarsDetails';
+import Unauthorized from './sign-in-sign-up/Unauthorized';
 import Addcars from './cars/addcars';
 import Delete from './cars/delete';
 import AddReserveForm from './Reservation/AddReserveForm';
@@ -16,17 +17,18 @@ const Routing = () => (
   <Routes>
     <Route path="/" element={<Splash />} />
     <Route path="/login" element={<SignInForm />} />
+    <Route path="/login/redirect" element={<Unauthorized />} />
     <Route path="/signup" element={<SignUpForm />} />
     <Route path="/signup/success" element={<SignUpSuccesPage />} />
     <Route path="/cars" element={<CarsPage />}>
       <Route path="" element={<Cars />} />
       <Route path=":carId" element={<CarsDetails />} />
+      <Route path="addcar" element={<Addcars />} />
+      <Route path=":carId/reservations/add" element={<AddReserveForm />} />
+      <Route path="choose/reservations/add" element={<AddReserveForm />} />
+      <Route path="reservations" element={<Reservations />} />
+      <Route path="delete" element={<Delete />} />
     </Route>
-    <Route path="/cars/:carId/reservations/add" element={<AddReserveForm />} />
-    <Route path="/cars/choose/reservations/add" element={<AddReserveForm />} />
-    <Route path="/addcar" element={<Addcars />} />
-    <Route path="/delete" element={<Delete />} />
-    <Route path="/reservations" element={<Reservations />} />
     <Route path="*" element={<h1>404: Not Found</h1>} />
   </Routes>
 );
diff --git a/src/components/cars/Carousel.js b/src/components/cars/Carousel.js
index 29abefb..559dfc8 100644
--- a/src/components/cars/Carousel.js
+++ b/src/components/cars/Carousel.js
@@ -9,7 +9,6 @@ import CarCard from './CarCard';
 
 const Carousel = () => {
   const carState = useSelector((state) => state.cars);
-  console.log(carState.cars);
   return (
     <Slider
       infinite
diff --git a/src/components/cars/Cars.js b/src/components/cars/Cars.js
index a23f1a1..0d79fa4 100644
--- a/src/components/cars/Cars.js
+++ b/src/components/cars/Cars.js
@@ -1,22 +1,38 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import CarCard from './CarCard';
 import '../../styles/Carousel.css';
 
 const Cars = () => {
-  const carState = useSelector((state) => state.cars);
-  const threeCars = carState.cars.slice(0, 3);
-  console.log(threeCars);
+  const navigate = useNavigate();
+  const state = useSelector((state) => state);
+  const { cars } = state.cars;
+  const { user } = state;
+  // const threeCars = cars.slice(0, 3);
+
+  useEffect(() => {
+    if (user.status === 'not-logged-in') {
+      navigate('/login');
+    }
+    if (user.error === 'Unauthorized') {
+      navigate('/login');
+    }
+  }, [user.status, user.error, navigate]);
 
   return (
     <div className="main-car-container">
       <h1>Latest Models</h1>
       <p>Please select a car model</p>
       <div className="car-container">
-        { carState.cars.map((car) => (
+        {(cars.length <= 0) && (
+          <div className="loading">
+            <h4>No Cars to show, Please add new car</h4>
+          </div>
+        )}
+        { cars.map((car) => (
           <div key={car.id}>
             <Link to={`/cars/${car.id}`} className="car-link">
               <CarCard
diff --git a/src/components/cars/addcars.js b/src/components/cars/addcars.js
index 1d96f34..fcd363c 100644
--- a/src/components/cars/addcars.js
+++ b/src/components/cars/addcars.js
@@ -24,7 +24,6 @@ function Addcars() {
 
   const onSubmit = (car, e) => {
     e.preventDefault();
-    console.log(car);
     dispatch(addcars(car)).then((response) => {
       const { code } = response.payload;
       if (code === 200) {
diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js
index c26816d..7a3d273 100644
--- a/src/components/navbar/Navbar.js
+++ b/src/components/navbar/Navbar.js
@@ -12,6 +12,7 @@ import { HiMenu } from 'react-icons/hi';
 import '../../styles/navbar.css';
 import logo from '../../images/cars-bnb-logo.png';
 import { addFromNav } from '../../redux/Reservations/ReserveSlice';
+import { logout } from '../../redux/Auth/authenticationSlice';
 
 function Navbar() {
   const dispatch = useDispatch();
@@ -19,16 +20,25 @@ function Navbar() {
 
   return (
     <header className="my-navbar">
+      <div className="logout">
+        <button
+          type="button"
+          className="logout-btn"
+          onClick={() => dispatch(logout())}
+        >
+          Logout
+        </button>
+      </div>
       <div className="logo">
         <img src={logo} alt="carsBnb Logo" />
       </div>
       <nav className="menu">
         <div className="mobile-nav desktop-nav">
           <div className="my-nav-links">
-            <NavLink to="/cars" className="active">
+            <NavLink to="/cars">
               CARS
             </NavLink>
-            <NavLink to="/addcar">ADD CAR</NavLink>
+            <NavLink to="addcar">ADD CAR</NavLink>
             <NavLink
               to={`/cars/${carId}/reservations/add`}
               onClick={() => {
@@ -37,8 +47,8 @@ function Navbar() {
             >
               RESERVE
             </NavLink>
-            <NavLink to="/reservations">MY RESERVATIONS</NavLink>
-            <NavLink to="/delete">DELETE CAR</NavLink>
+            <NavLink to="reservations">MY RESERVATIONS</NavLink>
+            <NavLink to="delete">DELETE CAR</NavLink>
           </div>
           <div className="nav-footer">
             <div className="nav-icons">
diff --git a/src/components/sign-in-sign-up/SignUpForm.js b/src/components/sign-in-sign-up/SignUpForm.js
index baa888b..ecea2af 100644
--- a/src/components/sign-in-sign-up/SignUpForm.js
+++ b/src/components/sign-in-sign-up/SignUpForm.js
@@ -31,7 +31,6 @@ const SignUpForm = () => {
     setIsError(false);
     setErrorMessage([]);
     dispatch(signUpUser(user)).then((response) => {
-      console.log(response);
       const { code } = response.payload.status;
       if (code === 200) {
         reset();
diff --git a/src/components/sign-in-sign-up/Unauthorized.js b/src/components/sign-in-sign-up/Unauthorized.js
new file mode 100644
index 0000000..2316a74
--- /dev/null
+++ b/src/components/sign-in-sign-up/Unauthorized.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Unauthorized = () => (
+  <div>
+    <h1>You need to login to continue</h1>
+    <Link to="/login">Login</Link>
+  </div>
+);
+
+export default Unauthorized;
diff --git a/src/index.js b/src/index.js
index 6de37bd..9781488 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import store from './redux/store';
 import { fetchCars } from './redux/Cars/carSlice';
 import { fetchReservations } from './redux/Reservations/ReserveSlice';
+import { getUser } from './redux/Auth/authenticationSlice';
 
 import App from './App';
 // Bootstrap CSS
@@ -18,6 +19,7 @@ const root = createRoot(container);
 
 store.dispatch(fetchCars());
 store.dispatch(fetchReservations());
+store.dispatch(getUser());
 
 root.render(
   <BrowserRouter>
diff --git a/src/redux/Auth/authenticationSlice.js b/src/redux/Auth/authenticationSlice.js
index 1ce5d25..d9a92e8 100644
--- a/src/redux/Auth/authenticationSlice.js
+++ b/src/redux/Auth/authenticationSlice.js
@@ -1,6 +1,31 @@
 import { createAsyncThunk, createSlice, current } from '@reduxjs/toolkit';
 import setJwtToken from './saveJwtToken';
 
+export const getUser = createAsyncThunk(
+  'user/getUser',
+  async (_, { rejectWithValue }) => {
+    try {
+      const token = localStorage.getItem('loginToken');
+      const url = 'http://localhost:3001/current_user';
+      const options = {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: token,
+        },
+      };
+      const response = await fetch(url, options);
+      if (response.status === 401) {
+        return rejectWithValue('Unauthorized');
+      }
+      const data = await response.json();
+      return data;
+    } catch (err) {
+      return rejectWithValue(err);
+    }
+  },
+);
+
 export const signUpUser = createAsyncThunk(
   'authentication/signUpUser',
   async (user, { rejectWithValue }) => {
@@ -41,44 +66,102 @@ export const signInUser = createAsyncThunk(
   },
 );
 
+export const logout = createAsyncThunk(
+  'authentication/logout',
+  async (_, { rejectWithValue }) => {
+    try {
+      const token = localStorage.getItem('loginToken');
+      const response = await fetch('http://localhost:3001/users/sign_out', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: token,
+        },
+      });
+      const data = await response.json();
+      return data;
+    } catch (err) {
+      return rejectWithValue(err);
+    }
+  },
+);
+
 const initialState = {
-  name: '',
-  email: '',
-  password: '',
+  user: {
+    name: '',
+    email: '',
+    password: '',
+  },
+  status: 'idle',
+  error: null,
 };
 
 const authenticationSlice = createSlice({
   name: 'user',
   initialState,
-  reducers: {},
+  reducers: {
+    clearUser(state) {
+      const newState = { ...current(state) };
+      newState.user = {
+        name: '',
+        email: '',
+        password: '',
+      };
+      newState.error = null;
+      newState.status = 'idle';
+      return newState;
+    },
+  },
   extraReducers: {
     [signUpUser.fulfilled]: (state, action) => {
-      const {
-        admin, email, id, name,
-      } = action.payload.status.data;
-      const newState = {
-        ...current(state),
-        name,
-        email,
-        id,
-        admin,
-      };
+      const newState = { ...current(state) };
+      newState.user = action.payload.status.data;
+      newState.status = action.payload.message;
+      return newState;
+    },
+    [signUpUser.rejected]: (state, action) => {
+      const newState = { ...current(state) };
+      newState.error = action.payload;
+      newState.status = 'failed';
       return newState;
     },
     [signInUser.fulfilled]: (state, action) => {
-      const {
-        admin, email, id, name,
-      } = action.payload.user;
-      const newState = {
-        ...current(state),
-        name,
-        email,
-        id,
-        admin,
+      const newState = { ...current(state) };
+      newState.user = action.payload.user;
+      newState.status = 'logged-in';
+      newState.error = null;
+      return newState;
+    },
+    [signInUser.rejected]: (state, action) => {
+      const newState = { ...current(state) };
+      newState.error = action.payload;
+      newState.status = 'failed';
+      return newState;
+    },
+    [logout.fulfilled]: (state) => {
+      const newState = { ...current(state) };
+      newState.user = {
+        name: '',
+        email: '',
+        password: '',
       };
+      newState.status = 'not-logged-in';
+      return newState;
+    },
+    [getUser.fulfilled]: (state, action) => {
+      const newState = { ...current(state) };
+      newState.user = action.payload;
+      newState.status = 'logged-in';
+      return newState;
+    },
+    [getUser.rejected]: (state, action) => {
+      const newState = { ...current(state) };
+      newState.error = action.payload;
+      newState.status = 'failed';
       return newState;
     },
   },
 });
 
 export default authenticationSlice.reducer;
+export const { clearUser } = authenticationSlice.actions;
diff --git a/src/redux/Cars/addcarSlice.js b/src/redux/Cars/addcarSlice.js
index cfe6483..bccbe83 100644
--- a/src/redux/Cars/addcarSlice.js
+++ b/src/redux/Cars/addcarSlice.js
@@ -5,7 +5,6 @@ const addcars = createAsyncThunk(
   async (car, { rejectWithValue }) => {
     try {
       const token = localStorage.getItem('loginToken');
-      console.log(token);
       const response = await fetch('http://localhost:3001/cars', {
         method: 'POST',
         headers: {
diff --git a/src/redux/Cars/carSlice.js b/src/redux/Cars/carSlice.js
index 9d88914..6dce925 100644
--- a/src/redux/Cars/carSlice.js
+++ b/src/redux/Cars/carSlice.js
@@ -56,7 +56,8 @@ const carSlice = createSlice({
     },
     [addcars.fulfilled]: (state, action) => {
       const newState = { ...current(state) };
-      newState.cars.push(action.payload.car);
+      newState.cars = [...newState.cars, action.payload.car];
+      newState.status = action.payload.notice;
       return newState;
     },
     [deleteCars.fulfilled]: (state, action) => {
diff --git a/src/redux/Reservations/ReserveSlice.js b/src/redux/Reservations/ReserveSlice.js
index ae603e6..3ea3f5a 100644
--- a/src/redux/Reservations/ReserveSlice.js
+++ b/src/redux/Reservations/ReserveSlice.js
@@ -2,7 +2,7 @@ import { createAsyncThunk, createSlice, current } from '@reduxjs/toolkit';
 
 export const fetchReservations = createAsyncThunk(
   'reservations/fetchReservations',
-  async () => {
+  async (_, { rejectWithValue }) => {
     const token = localStorage.getItem('loginToken');
     const url = 'http://localhost:3001/reservations';
     const options = {
@@ -13,6 +13,9 @@ export const fetchReservations = createAsyncThunk(
       },
     };
     const response = await fetch(url, options);
+    if (response.status === 401) {
+      return rejectWithValue('Unauthorized');
+    }
     const data = await response.json();
     return data;
   },
@@ -75,13 +78,20 @@ const reserveSlice = createSlice({
     [fetchReservations.rejected]: (state, action) => {
       const newState = { ...current(state) };
       newState.status = 'failed';
-      newState.error = action.error.message;
+      newState.error = action.payload;
       return newState;
     },
     [createReserve.fulfilled]: (state, action) => {
-      const { reservations } = current(state);
-      const { reservation } = action.payload;
-      return [...reservations, reservation];
+      const newState = { ...current(state) };
+      newState.reservations = [...newState.reservations, action.payload.reservation];
+      newState.status = action.payload.message;
+      return newState;
+    },
+    [createReserve.rejected]: (state, action) => {
+      const newState = { ...current(state) };
+      newState.status = 'failed';
+      newState.error = action.payload.error;
+      return newState;
     },
   },
 });
diff --git a/src/styles/Cars.css b/src/styles/Cars.css
index c67dc3e..d73c19c 100644
--- a/src/styles/Cars.css
+++ b/src/styles/Cars.css
@@ -131,6 +131,13 @@
   cursor: pointer;
 }
 
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--primary-color);
+}
+
 @media screen and (min-width: 768px) {
   .car-layout {
     display: grid;
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
index f36b848..6633a77 100644
--- a/src/styles/navbar.css
+++ b/src/styles/navbar.css
@@ -4,6 +4,7 @@
   align-items: center;
   padding: 0.5rem 1rem;
   background-color: var(--primary-color);
+  position: relative;
 }
 
 .my-navbar .logo {
@@ -28,6 +29,24 @@
   display: flex;
 }
 
+.logout {
+  position: absolute;
+  top: 20px;
+}
+
+.logout-btn {
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2rem 0.7rem;
+  background-color: var(--grey-shade-2);
+  border-radius: 10px;
+  color: white;
+  font-weight: 600;
+  font-size: 0.7rem;
+}
+
 @media screen and (min-width: 768px) {
   .hamburger {
     display: none;
@@ -51,7 +70,6 @@
     display: flex;
     flex-direction: column !important;
     justify-content: flex-start;
-    width: 20vw;
     padding: 0 20px;
     background-color: var(--cars-bg);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -61,6 +79,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-top: 4rem;
   }
 
   .my-navbar .logo img {
@@ -69,10 +88,6 @@
     object-fit: contain;
   }
 
-  .my-navbar > :first-child {
-    margin-top: 3rem;
-  }
-
   .my-navbar .my-nav-links {
     display: flex;
     flex-direction: column;
diff --git a/src/styles/signin_signup.css b/src/styles/signin_signup.css
index 7a44de5..db263aa 100644
--- a/src/styles/signin_signup.css
+++ b/src/styles/signin_signup.css
@@ -45,7 +45,7 @@
   background-image: url(../images/login-bg-ilustration.svg);
   background-repeat: no-repeat;
   background-position: 100% 0;
-  background-size: 40%;
+  background-size: 20%;
   height: 100vh;
 }