diff --git a/src/App.css b/src/App.css
index d86b01a..16c9a7f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,7 +6,8 @@
 
 .background-container::before {
   height: 100vh;
-  content: "";
+  min-height: 450px;
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -42,6 +43,7 @@
   width: 15rem;
   background-color: #f5f5f5;
   box-shadow: 0 0 10px rgba(8, 7, 16, 0.6);
+  z-index: 300;
 }
 
 .sidebar-menu-ul {
@@ -162,6 +164,33 @@
   transform: translateX(5px);
 }
 
+.car-details-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  min-height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.car-details {
+  width: fit-content;
+  max-width: 300px;
+}
+
+.car-details-title {
+  line-height: 2rem;
+}
+
+.card-details-btn {
+  border-radius: 50px;
+  background-color: black;
+}
+
 @media screen and (max-width: 767px) {
   .burger-menu {
     display: flex !important;
@@ -186,8 +215,55 @@
     text-align: start;
   }
 
+  .car-details-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .car-details-container {
+    display: flex;
+    gap: 5%;
+  }
+
   .car-details {
-    display: none !important;
+    min-width: 320px !important;
+    width: 80%;
+    max-width: 580px;
+    margin: 1rem 0 4.5rem 0 !important;
+    padding: 1rem 1rem 0.5rem 1rem !important;
+  }
+
+  .car-details-info {
+    position: absolute;
+    top: 20%;
+    left: calc(50% - 150px);
+    width: 300px;
+    text-align: center !important;
+  }
+
+  .car-details-info h2 {
+    transform: scale(1.4);
+  }
+
+  .car-details-info p {
+    transform: scale(1.1);
+  }
+
+  .car-details-table {
+    margin: 0 !important;
+  }
+
+  .card-details-btn {
+    position: absolute;
+    bottom: 1rem;
+    left: calc(50% - 160px);
+    width: 320px !important;
+  }
+
+  .rosetta {
+    display: none;
   }
 
   .card-model {
diff --git a/src/components/CarDetails/CarDetails.jsx b/src/components/CarDetails/CarDetails.jsx
index e118543..eccde3d 100644
--- a/src/components/CarDetails/CarDetails.jsx
+++ b/src/components/CarDetails/CarDetails.jsx
@@ -2,86 +2,106 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useNavigate } from 'react-router-dom';
 import colorRosetta from './color-rosetta.png';
+import Logo from '../Sidebar/Logo';
 
-const CarDetails = ({ car }) => {
+const CarDetails = ({ car, onGoBack }) => {
   const navigate = useNavigate();
+  if (!car) {
+    return null;
+  }
 
   return (
     <>
-      <div className="car-details container-fluid bg-white rounded-3 p-3 shadow-4-strong">
-        <div className="text-end mt-2">
-          <h2 className="m-0">{car.name}</h2>
-          <p className="tiny-font">
-            £
-            {car.finance_fee}
-            {' '}
-            deposit upon any Car
-          </p>
+      <div
+        className="car-details-page"
+        style={{
+          backgroundImage: `url('${car.image_url}')`,
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+        }}
+      >
+        <div
+          className="position-absolute top-0 start-0 m-4 rosetta"
+        >
+          <Logo />
         </div>
-
-        <table className="table table-striped tiny-font mt-3 mb-2">
-          <tbody>
-            <tr>
-              <td>Finance Fee:</td>
-              <td className="text-end">
+        <div className="car-details bg-white rounded-3 p-3 shadow-4-strong me-4">
+          <div className="car-details-container">
+            <div className="text-end mt-2 car-details-info">
+              <h2 className="car-details-title mx-0 mt-2 ">{car.name}</h2>
+              <p className="tiny-font">
                 £
                 {car.finance_fee}
-              </td>
-            </tr>
-            <tr>
-              <td>Option to Purchase Fee:</td>
-              <td className="text-end">
-                £
-                {car.option_to_purchase_fee}
-              </td>
-            </tr>
-            <tr>
-              <td>Total Amount Payable:</td>
-              <td className="text-end" type="currency">
-                £
-                {car.total_amount_payable}
-              </td>
-            </tr>
-            <tr>
-              <td>Duration:</td>
-              <td className="text-end">
-                {car.duration}
                 {' '}
-                Months
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <p>
-          <span className="fw-bold m-0">5.29 APR</span>
-          &nbsp;Representative
-        </p>
+                deposit upon any Car
+              </p>
+            </div>
 
-        <div className="text-center mx-3 my-4">
-          <p className="fw-bold tiny-font">
-            Discover more models&nbsp;
-            <span>&#62;</span>
-          </p>
-          <img src={colorRosetta} alt="Example" />
-        </div>
+            <table className="table table-striped tiny-font mt-3 mb-2 car-details-table">
+              <tbody>
+                <tr>
+                  <td>Finance Fee:</td>
+                  <td className="text-end">
+                    £
+                    {car.finance_fee}
+                  </td>
+                </tr>
+                <tr>
+                  <td>Option to Purchase Fee:</td>
+                  <td className="text-end">
+                    £
+                    {car.option_to_purchase_fee}
+                  </td>
+                </tr>
+                <tr>
+                  <td>Total Amount Payable:</td>
+                  <td className="text-end">
+                    £
+                    {car.total_amount_payable}
+                  </td>
+                </tr>
+                <tr>
+                  <td>Duration:</td>
+                  <td className="text-end">
+                    {car.duration}
+                    {' '}
+                    Months
+                  </td>
+                </tr>
+              </tbody>
+              <caption className="ms-3">
+                <span className="fw-bold m-0">5.29 APR</span>
+                &nbsp;Representative
+              </caption>
+            </table>
+          </div>
+
+          <div className="text-center mx-3 my-4 rosetta">
+            <p className="fw-bold tiny-font rosetta">
+              Discover more models&nbsp;
+              <span>&#62;</span>
+            </p>
+            <img src={colorRosetta} alt="Example" className="rosetta" />
+          </div>
 
-        <div className="text-center my-2">
-          <button
-            className="btn btn-dark px-5 text-white"
-            type="button"
-            onClick={() => navigate(`/reserve/${car.id}`)}
-          >
-            Reserve
-          </button>
+          <div className="card-details-btn d-flex justify-content-between align-items-center w-75 m-auto">
+            <button className="btn text-btn-white" onClick={() => onGoBack()} type="button">
+              {' '}
+              <box-icon name="undo" color="#fff" />
+            </button>
+            <p className="text-white fw-semibold mb-1">Configure</p>
+            <button
+              className="btn text-white"
+              onClick={() => navigate(`/reserve/${car.id}`)}
+              type="button"
+            >
+              {' '}
+              <box-icon name="right-arrow-circle" color="#fff" />
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        className="btn btn-toolbar text-btn-white rounded-back-btn fs-5"
-        onClick={() => navigate('/home')}
-        type="button"
-      >
-        &laquo;
-      </button>
     </>
   );
 };
@@ -97,6 +117,7 @@ CarDetails.propTypes = {
     total_amount_payable: PropTypes.number.isRequired,
     duration: PropTypes.number.isRequired,
   }),
+  onGoBack: PropTypes.func.isRequired,
 };
 
 CarDetails.defaultProps = {
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 71522f4..72874ba 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -47,17 +47,29 @@ const Sidebar = () => {
           </div>
         </div>
 
-        <button
-          type="button"
-          onClick={handleClick}
-          className={`btn btn-dark align-self-end my-3 ${sidebarVisible ? 'sidebar-btn-container-show' : 'sidebar-btn-container-hidden mx-3'}`}
-        >
-          {sidebarVisible ? (
-            <box-icon name="left-arrow" color="#fff" />
-          ) : (
-            <box-icon name="right-arrow" color="#fff" />
-          )}
-        </button>
+        <div>
+          <div
+            className={`position-absolute d-flex flex-column justify-content-between align-content-center pt-4 pb-3 w-100 ps-4 ${
+              sidebarVisible ? 'hide' : 'show'
+            }`}
+          >
+            <Logo />
+          </div>
+
+          <button
+            type="button"
+            onClick={handleClick}
+            className={`btn btn-dark align-self-end my-3 ${
+              sidebarVisible ? 'sidebar-btn-container-show' : 'sidebar-btn-container-hidden mx-3'
+            }`}
+          >
+            {sidebarVisible ? (
+              <box-icon name="left-arrow" color="#fff" />
+            ) : (
+              <box-icon name="right-arrow" color="#fff" />
+            )}
+          </button>
+        </div>
       </div>
     </>
   );