diff --git a/README.md b/README.md
index 01a0b72..6dd5f40 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 <a name="readme-top"></a>
+
 <details>
 <summary>Table of Contents</summary>
 
@@ -8,26 +9,26 @@
   - [📋 Kanban Board](#-kanban-board)
     - [Kanban Board.](#kanban-board)
     - [The members: @Salwa, @Ahmed, @Talha](#the-members-salwa-ahmed-talha)
-  - [Tech Stack  ](#tech-stack--)
-  - [✨ Key Features  ](#-key-features--)
-  - [📘 Getting Started  ](#-getting-started--)
+  - [Tech Stack ](#tech-stack--)
+  - [✨ Key Features ](#-key-features--)
+  - [📘 Getting Started ](#-getting-started--)
     - [📋 Prerequisites](#-prerequisites)
     - [Setup ](#setup-)
     - [📥 Installation](#-installation)
     - [💾 Database](#-database)
     - [💻 Usage](#-usage)
     - [🧪 Tests](#-tests)
-  - [👨‍💻 Authors  ](#-authors--)
+  - [👨‍💻 Authors ](#-authors--)
     - [👤 **Salwa Ballouti**:](#-salwa-ballouti)
     - [👤 **Ahmed Hasan Rony**](#-ahmed-hasan-rony)
     - [👤 **Muhammad Talha Hanif**](#-muhammad-talha-hanif)
-  - [🎯 Future Features  ](#-future-features--)
+  - [🎯 Future Features ](#-future-features--)
   - [🙏 Acknowledgements](#-acknowledgements)
   - [💎 Resources](#-resources)
-  - [🤝 Contribution  ](#-contribution--)
-  - [💖 Show Your Support  ](#-show-your-support--)
+  - [🤝 Contribution ](#-contribution--)
+  - [💖 Show Your Support ](#-show-your-support--)
   - [📜 License ](#-license-)
-</details>
+  </details>
 
 # 🚗 RENTCAR - Luxury cars renting platform <a name="about-project"></a>
 
@@ -43,17 +44,15 @@
   <img src="https://github.com/roniy68/capstone-rails/assets/77187003/f2359c19-0684-4b01-97b2-66236afa374c" width=400 height=250 alt="screenshot" />
 </p>
 
-
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-
 ## 🚀 Live Demo
 
 [RENTCAR-Luxury Cars](https://capstone-rails.onrender.com/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 📋 Kanban Board 
+## 📋 Kanban Board
 
 We have used a Kanban board to split the tasks and simplify the project workflow.
 
@@ -61,41 +60,38 @@ We have used a Kanban board to split the tasks and simplify the project workflow
 
 ### The members: [@Salwa](https://github.com/Salwa99), [@Ahmed](https://github.com/roniy68), [@Talha](https://github.com/Talha-Hanif5666)
 
-
 <img src="https://github.com/roniy68/capstone-rails/assets/77187003/bdb6c83b-1e4c-4d1b-98ed-cf28d59ed7f2" width=600 height=400 alt="kanban board" />
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## Tech Stack  <a name="tech-stack"></a>
-
-- **Back-end** 💻:   
-  <details>
-  <summary>Client</summary>
-  <ul>
-    <li><a href="https://rubyonrails.org/">Ruby on Rails</a></li>
-    <li><a href="https://redux-toolkit.js.org/">PostgreSQL</a></li>
-  </ul>
-</details>
+## Tech Stack <a name="tech-stack"></a>
 
-  - **Front-end** 💻: 
+- **Back-end** 💻:
     <details>
     <summary>Client</summary>
     <ul>
-      <li><a href="https://react.dev/">React</a></li>
-      <li><a href="https://redux-toolkit.js.org/">Redux Toolkit</a></li>
-      <li><a href="https://reactrouter.com/en/main">React Router</a></li>
-      <li><a href="https://tailwindcss.com/">Tailwind</a></li>
-      <li><a href="https://reactrouter.com/en/main">React icons</a></li>
+      <li><a href="https://rubyonrails.org/">Ruby on Rails</a></li>
+      <li><a href="https://redux-toolkit.js.org/">PostgreSQL</a></li>
     </ul>
-</details>
+  </details>
 
+  - **Front-end** 💻:
+  <details>
+  <summary>Client</summary>
+  <ul>
+  <li><a href="https://react.dev/">React</a></li>
+  <li><a href="https://redux-toolkit.js.org/">Redux Toolkit</a></li>
+  <li><a href="https://reactrouter.com/en/main">React Router</a></li>
+  <li><a href="https://tailwindcss.com/">Tailwind</a></li>
+  <li><a href="https://reactrouter.com/en/main">React icons</a></li>
+  </ul>
+  </details>
 
-- **Tools** 🛠: 
+- **Tools** 🛠:
   - [Rspec](https://rspec.info/)
   - [Esbuild](https://esbuild.github.io/)
   - [Render](https://render.com/)
 
-
 <details>
 <summary>Linter</summary>
   <ul>
@@ -107,7 +103,7 @@ We have used a Kanban board to split the tasks and simplify the project workflow
   
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## ✨ Key Features  <a name="key-features"></a>
+## ✨ Key Features <a name="key-features"></a>
 
 - **Log in with a username to access the palteform.**
 - **Browse list of available cars.**
@@ -118,13 +114,14 @@ We have used a Kanban board to split the tasks and simplify the project workflow
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 📘 Getting Started  <a name="getting-started"></a>
+## 📘 Getting Started <a name="getting-started"></a>
 
 To get a local copy up and running, follow these steps.
 
 ### 📋 Prerequisites
 
 Make sure you have the following installed on your machine:
+
 - [Ruby 3.1.3 or higher](https://www.ruby-lang.org/en/)
 - [Rails 7.0.4 or higher](https://rubyonrails.org/)
 - [PostgreSQL 15.2 or higher](https://www.postgresql.org/)
@@ -143,6 +140,7 @@ Clone this repository to your desired foler.
 ```
 
 ### 📥 Installation
+
 Install the required gems with:
 
 ```sh
@@ -155,6 +153,8 @@ Install the node dependencies with:
 yarn install
 ```
 
+or
+
 ```sh
 npm install
 ```
@@ -187,19 +187,21 @@ To run the project, execute the following command:
 ```sh
   ./bin/dev
 ```
+
 ### 🧪 Tests
 
 To run tests, run the following command:
 
 ```sh
-rspec spec 
+rspec spec
 ```
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 👨‍💻 Authors  <a name="author"></a>
+## 👨‍💻 Authors <a name="author"></a>
 
 ### 👤 **Salwa Ballouti**:
+
 - GitHub: [@Salwa99](https://github.com/Salwa99)
 - Twitter: [@SalwaBallouti](https://twitter.com/salwa_ballouti)
 - LinkedIn: [LinkedIn](https://www.linkedin.com/in/salwa-ballouti)
@@ -218,7 +220,7 @@ rspec spec
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 🎯 Future Features  <a name="future-features"></a>
+## 🎯 Future Features <a name="future-features"></a>
 
 - [ ] Implement the full authentication.
 - [ ] Implement edit car or reservation.
@@ -228,7 +230,7 @@ rspec spec
 
 ## 🙏 Acknowledgements
 
-This app was designed based on an original design idea by [Murat Korkmaz](https://www.behance.net/muratk) on Behance. 
+This app was designed based on an original design idea by [Murat Korkmaz](https://www.behance.net/muratk) on Behance.
 We would like to thank Murat Korkmaz for this inspiring design.
 
 - [App Design Template](https://www.behance.net/gallery/26425031/Vespa-Responsive-Redesign)
@@ -238,20 +240,22 @@ We would like to thank Murat Korkmaz for this inspiring design.
 ## 💎 Resources
 
 🎨 **Colors**
+
 - 🟢 Accent: #96bf01
 
 🖌 **Fonts**
+
 - Normal: [Roboto](https://fonts.google.com/specimen/Roboto)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 🤝 Contribution  <a name="contribution"></a>
+## 🤝 Contribution <a name="contribution"></a>
 
 Contributions, issues, and feature requests are welcome!
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 💖 Show Your Support  <a name="support"></a>
+## 💖 Show Your Support <a name="support"></a>
 
 If you like this project, please consider giving it a ⭐.
 
diff --git a/app/javascript/components/fragments/Layout.jsx b/app/javascript/components/fragments/Layout.jsx
index 7aba3a2..5322f0b 100644
--- a/app/javascript/components/fragments/Layout.jsx
+++ b/app/javascript/components/fragments/Layout.jsx
@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react'
 import Sidebar from './Sidebar'
 import { Outlet, useNavigate } from 'react-router-dom'
 // import NavBar from './NavBar'
-import { HiOutlineMenu, HiAnnotation, HiBell, HiOutlineUser } from 'react-icons/hi'
+import { HiOutlineMenu, HiAnnotation, HiOutlineUser } from 'react-icons/hi'
 import { AiOutlineLogout } from "react-icons/ai";
 
 const Layout = () => {
-  const [show, setShow] = useState(true)
+  const [show, setShow] = useState(false)
 
   const handleClick = (e) => {
     setShow(current => !current)
@@ -41,19 +41,19 @@ const Layout = () => {
             <div className="flex bg-[#96bf01] lg:h-[80px] md:h-[60px] p-4 sticky top-0 z-10 items-center justify-between">
               {/* Navbar Ham burger */}
               <div onClick={handleClick} className='flex-none text-white'>
-                <HiOutlineMenu size={36} />
+                <HiOutlineMenu size={30} />
               </div>
               {/* Navbar Menus */}
               <div className='flex text-slate-50 justify-end flex-auto gap-2'>
                 <div className='p-6'>
-                  <HiAnnotation size={36} />
+                  <HiAnnotation size={30} />
                 </div>
                 <div className='p-6'>
-                  <HiOutlineUser size={36} />
+                  <HiOutlineUser size={30} />
                 </div>
 
                 <div className='p-6'>
-                  <AiOutlineLogout size={36} onClick={handleLogout} />
+                  <AiOutlineLogout size={30} onClick={handleLogout} />
                 </div>
               </div>
             </div>
diff --git a/app/javascript/components/fragments/Sidebar.jsx b/app/javascript/components/fragments/Sidebar.jsx
index dd2f041..51824f2 100644
--- a/app/javascript/components/fragments/Sidebar.jsx
+++ b/app/javascript/components/fragments/Sidebar.jsx
@@ -50,7 +50,7 @@ const Sidebar = () => {
           {links.map((link) => (
             <Link to={link.url}>
               <li
-                className={`p-4 ml-6 mb-4 text-[20px] lg:text-[30px] rounded-md ${
+                className={`p-4 ml-6 mb-4 text-[15px] lg:text-[25px] rounded-md ${
                   location.pathname === link.url
                     ? "bg-[#96bf01] text-white"
                     : "hover:bg-[#96bf01] hover:text-white"
diff --git a/app/javascript/components/fragments/navigation/AddCar.jsx b/app/javascript/components/fragments/navigation/AddCar.jsx
index 8691672..1ecd396 100644
--- a/app/javascript/components/fragments/navigation/AddCar.jsx
+++ b/app/javascript/components/fragments/navigation/AddCar.jsx
@@ -51,7 +51,6 @@ const AddCar = () => {
 
       if (response.ok) {
         const newCar = await response.json();
-        console.log("New car added:", newCar);
 
         setCarData({
           name: "",
@@ -72,9 +71,14 @@ const AddCar = () => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      {carAdded && <p className="bg-green-200 font-bold mb-6 p-4 rounded shadow-lg">New car has been added!</p>}
-      <div className="h-auto lg:w-[800px] w-[600px] p-6 bg-slate-300 rounded-lg shadow-lg">
+    <div className="flex flex-col items-center justify-center">
+      {carAdded && (
+        <p className="bg-green-200 font-bold mb-6 p-2 rounded shadow-lg">
+          New car has been added!
+        </p>
+      )}
+      <div className="h-auto w-auto lg:w-[800px] p-6 bg-slate-300 rounded-lg shadow-lg">
+        <h1 className="text-center text-[25px] font-bold mb-6">Add Car</h1>
         <form onSubmit={handleSubmit} className="space-y-4 shadow">
           <div>
             <label htmlFor="name" className="block mb-1">
@@ -139,7 +143,6 @@ const AddCar = () => {
               onChange={handleChange}
               className="w-full border border-gray-300 rounded px-3 py-2"
             />
-
           </div>
           <div className="flex justify-center items-center">
             <button
@@ -155,4 +158,4 @@ const AddCar = () => {
   );
 };
 
-export default AddCar;
\ No newline at end of file
+export default AddCar;
diff --git a/app/javascript/components/fragments/navigation/AllCars.jsx b/app/javascript/components/fragments/navigation/AllCars.jsx
index 8caea79..f4aa4fe 100644
--- a/app/javascript/components/fragments/navigation/AllCars.jsx
+++ b/app/javascript/components/fragments/navigation/AllCars.jsx
@@ -61,41 +61,45 @@ const AllCars = () => {
         return cars
             .slice(startIndex, endIndex + 1)
             .map((car) => (
-                <li key={car.id} className="flex items-center space-x-4 py-4" style={{ transform: "scale(1.7)", marginTop: "60px" }}>
-                    <Link to={`/detail/${car.id}`} className="flex-shrink-0">
-                        <img
-                            src={car.photo}
-                            alt={car.name}
-                            className="w-20 h-20 object-cover rounded p-2"
-                        />
-                    </Link>
-                    <div className="flex-grow">
-                        <p>
-                            {car.name} - {car.model}
-                        </p>
-                    </div>
-                    <button
-                        type="button" onClick={() => handleDelete(car.id)}
-                        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-sm text-sm float-right "
-                    >
-                        Delete Car
-                    </button>
-                </li>
-
-
-            ));
+                <li
+  key={car.id}
+  className="flex items-center space-x-4 py-4 sm:max-w-600px mx-auto"
+  style={{ marginTop: "60px" }}
+>
+  <Link to={`/detail/${car.id}`} className="flex-shrink-0">
+    <img
+      src={car.photo}
+      alt={car.name}
+      className="w-24 h-24 lg:w-52 lg:h-auto object-cover rounded p-2"
+    />
+  </Link>
+  <div className="flex-grow text-center ml-6">
+    <p className="text-xl my-2">
+      {car.name} - {car.model}
+    </p>
+  </div>
+  <div>
+    <button
+      type="button"
+      onClick={() => handleDelete(car.id)}
+      className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-sm text-lg"
+    >
+      Delete
+    </button>
+  </div>
+</li>
+    ));
     };
 
     return (
-        <div className="flex flex-col items-center w-300px">
+        <div className=" flex flex-1 flex-col p-6 items-center w-auto ">
             <div>
                 <h1 className="flex items-center justify-center font-bold mt-10 text-5xl">
                     ALL CARS
                 </h1>
-                <p className="text-3xl">Please press the Delete button to delete cars</p>
             </div>
 
-            <div>
+            <div className=" w-auto lg:w-[800px]">
                 <ul>{renderCars()}</ul>
             </div>
         </div>
diff --git a/app/javascript/components/fragments/navigation/Cars.jsx b/app/javascript/components/fragments/navigation/Cars.jsx
index 615d87d..6d48cbf 100644
--- a/app/javascript/components/fragments/navigation/Cars.jsx
+++ b/app/javascript/components/fragments/navigation/Cars.jsx
@@ -17,11 +17,13 @@ const Cars = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const location = useLocation();
   const [message, setMessage] = useState(location?.state?.message || "");
-  const navigate = useNavigate();
-  const [carouselItemsPerPage, setCarouselItemsPerPage] = useState(1);
+  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
     dispatch(fetchCars());
+    checkMobileView();
+    window.addEventListener("resize", checkMobileView);
+    return () => window.removeEventListener("resize", checkMobileView);
   }, [dispatch]);
 
   useEffect(() => {
@@ -34,38 +36,39 @@ const Cars = () => {
     }
   }, [message]);
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth > 768) {
-        setCarouselItemsPerPage(3);
-      } else {
-        setCarouselItemsPerPage(1);
-      }
-    };
-
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
+  const checkMobileView = () => {
+    if (window.innerWidth <= 768) {
+      setIsMobile(true);
+    } else {
+      setIsMobile(false);
+    }
+  };
 
   const handlePrev = () => {
-    setCurrentIndex((prevIndex) => prevIndex - carouselItemsPerPage);
+    setCurrentIndex((prevIndex) => prevIndex - 1);
   };
 
   const handleNext = () => {
-    setCurrentIndex((prevIndex) => prevIndex + carouselItemsPerPage);
+    setCurrentIndex((prevIndex) => prevIndex + 1);
   };
 
   const renderCars = () => {
     const startIndex = currentIndex;
-    const endIndex = startIndex + carouselItemsPerPage - 1;
+    const endIndex = startIndex + (isMobile ? 0 : 2);
     return cars.slice(startIndex, endIndex + 1).map((car) => (
-      <li key={car.id} className="w-[400px] h-[400px] mt-10 shadow">
+      <li
+        key={car.id}
+        className={`w-auto h-auto mt-10 shadow ${
+          isMobile ? "w-[100%]" : "lg:w-[400px] lg:h-[400px]"
+        }`}
+      >
         <Link to={`/detail/${car.id}`}>
           <img
             src={car.photo}
             alt={car.name}
-            className="w-[200px] h-[200px] mx-auto my-4"
+            className={`w-[200px] h-[200px] mx-auto my-4 ${
+              isMobile ? "w-[100%]" : ""
+            }`}
           />
           <div className="text-center">
             <p>
@@ -93,7 +96,7 @@ const Cars = () => {
   }
 
   return (
-    <div className="h-screen w-full">
+    <div className="h-auto w-auto">
       {message && (
         <p className="text-center text-green-600 text-2xl">{message}</p>
       )}
@@ -108,17 +111,21 @@ const Cars = () => {
         <button
           onClick={handlePrev}
           disabled={currentIndex === 0}
-          className="bg-[#96bf01] rounded-r-full lg:mr-6 lg:pl-10 z-50"
+          className="bg-[#96bf01] rounded-r-full mr-2 pl-4 lg:mr-6 lg:pl-10"
         >
           <BsCaretLeft size={50} className="text-white" />
         </button>
-        <ul className="flex justify-center items-center w-20 lg:w-full m-0">
+        <ul
+          className={`lg:w-[800px] gap-4 flex-1 flex justify-center items-center ${
+            isMobile ? "flex-wrap" : ""
+          }`}
+        >
           {renderCars()}
         </ul>
         <button
           onClick={handleNext}
-          disabled={currentIndex >= cars.length - carouselItemsPerPage}
-          className="bg-[#96bf01] rounded-l-full ml:2 pr:4 lg:ml-6 lg:pr-10"
+          disabled={currentIndex >= cars.length - (isMobile ? 1 : 3)}
+          className="bg-[#96bf01] rounded-l-full ml-2 pr-4 lg:ml-6 lg:pr-10"
         >
           <BsCaretRight size={50} className="text-white" />
         </button>
diff --git a/app/javascript/components/fragments/navigation/MyReservations.jsx b/app/javascript/components/fragments/navigation/MyReservations.jsx
index 91dfc5a..5e6da38 100644
--- a/app/javascript/components/fragments/navigation/MyReservations.jsx
+++ b/app/javascript/components/fragments/navigation/MyReservations.jsx
@@ -31,7 +31,6 @@ const MyReservations = () => {
             (reservation) => reservation.id !== reservationId
           )
         );
-        console.log("Reservation deleted successfully.");
       } else {
         const error = await response.json();
         console.error("Error deleting reservation:", error);
@@ -43,7 +42,7 @@ const MyReservations = () => {
 
   return (
     <div className="h-full overflow-auto p-6">
-      <h2 className="text-[40px] font-bold mb-12 flex items-center justify-center">
+      <h2 className="lg:text-[40px] text-[25px] font-bold mb-12 flex items-center justify-center">
         My Reservations
       </h2>
       {reservations.length > 0 ? (
@@ -54,8 +53,8 @@ const MyReservations = () => {
               className="bg-[#96bf01] mb-6 p-6 rounded shadow-lg flex flex-col justify-center items-center"
             >
               <div className="flex flex-col items-center justify-center">
-                <p className="text-[30px] font-bold mb-6">
-                  Car Name: {reservation.car_name}
+                <p className="text-[30px] font-bold mb-6 ">
+                  {reservation.car_name}
                 </p>
                 <div className=" text-[20px] p-6 border-t border-white">
                   <p>Car Model: {reservation.car_model}</p>
diff --git a/app/javascript/components/fragments/navigation/ReservationForm.jsx b/app/javascript/components/fragments/navigation/ReservationForm.jsx
index 0ed2610..93938a3 100644
--- a/app/javascript/components/fragments/navigation/ReservationForm.jsx
+++ b/app/javascript/components/fragments/navigation/ReservationForm.jsx
@@ -73,7 +73,6 @@ const ReservationForm = () => {
 
       if (response.ok) {
         const reservation = await response.json();
-        console.log("Reservation created:", reservation);
         setFormData({
           car_name: "",
           car_model: "",
@@ -95,8 +94,13 @@ const ReservationForm = () => {
 
   return (
     <div className="flex flex-col items-center justify-center h-screen">
-      {reservationStatus && <p className="bg-green-200 font-bold mb-6 p-4 rounded shadow-lg">{reservationStatus}</p>}
-      <div className="h-auto lg:w-[800px] w-[600px] p-6 bg-slate-300 rounded-lg shadow-lg">
+      {reservationStatus && (
+        <p className="bg-green-200 font-bold mb-6 p-4 rounded shadow-lg">
+          {reservationStatus}
+        </p>
+      )}
+      <div className="h-auto w-auto lg:w-[800px] p-6 bg-slate-300 rounded-lg shadow-lg">
+        <h1 className="text-center text-[25px] font-bold mb-6">Add Reservation</h1>
         <form onSubmit={handleSubmit} className="space-y-4 shadow">
           <div>
             <label htmlFor="car_name" className="block mb-1">
diff --git a/app/javascript/routes/PrivateRoutes.jsx b/app/javascript/routes/PrivateRoutes.jsx
index 1011c0f..74a3508 100644
--- a/app/javascript/routes/PrivateRoutes.jsx
+++ b/app/javascript/routes/PrivateRoutes.jsx
@@ -1,19 +1,14 @@
-import React, { useEffect, useState } from 'react'
-import { Navigate, Outlet } from 'react-router-dom'
-
+import React, { useEffect, useState } from "react";
+import { Navigate, Outlet } from "react-router-dom";
 
 const PrivateRoutes = () => {
+  const [user, setUser] = useState(sessionStorage.getItem("username"));
 
-    const [user, setUser] = useState(sessionStorage.getItem('username'))
-
-    useEffect(() => {
-        setUser(sessionStorage.getItem('username'))
-        console.log(user)
-    }, [user])
+  useEffect(() => {
+    setUser(sessionStorage.getItem("username"));
+  }, [user]);
 
-    return (
-        user ? <Outlet /> : <Navigate to="/login" />
-    )
-}
+  return user ? <Outlet /> : <Navigate to="/login" />;
+};
 
-export default PrivateRoutes
+export default PrivateRoutes;