diff --git a/package-lock.json b/package-lock.json
index e95c4d1..833fb42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,8 +23,9 @@
         "react-redux": "^9.1.0",
         "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1",
+        "uuid": "^9.0.1",
+        "web-vitals": "^2.1.4"
         "redux-persist": "^6.0.0",
-        "web-vitals": "^2.1.4",
         "yup": "^1.3.3"
       },
       "devDependencies": {
@@ -17830,6 +17831,14 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -19684,9 +19693,13 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/package.json b/package.json
index b92709f..1436e58 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
+    "uuid": "^9.0.1",
     "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^1.3.3"
diff --git a/src/assets/imgs/facebook.png b/src/assets/imgs/facebook.png
new file mode 100644
index 0000000..6198489
Binary files /dev/null and b/src/assets/imgs/facebook.png differ
diff --git a/src/assets/imgs/instagram.png b/src/assets/imgs/instagram.png
new file mode 100644
index 0000000..0ce6cfa
Binary files /dev/null and b/src/assets/imgs/instagram.png differ
diff --git a/src/assets/imgs/shape.png b/src/assets/imgs/shape.png
new file mode 100644
index 0000000..e1c0e9f
Binary files /dev/null and b/src/assets/imgs/shape.png differ
diff --git a/src/assets/imgs/triangle.png b/src/assets/imgs/triangle.png
new file mode 100644
index 0000000..974dd7d
Binary files /dev/null and b/src/assets/imgs/triangle.png differ
diff --git a/src/assets/imgs/twitter.png b/src/assets/imgs/twitter.png
new file mode 100644
index 0000000..fb06c29
Binary files /dev/null and b/src/assets/imgs/twitter.png differ
diff --git a/src/components/CarList.jsx b/src/components/CarList.jsx
index dc86127..867066a 100644
--- a/src/components/CarList.jsx
+++ b/src/components/CarList.jsx
@@ -1,17 +1,108 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+import triangle from '../assets/imgs/triangle.png';
+import facebook from '../assets/imgs/facebook.png';
+import twitter from '../assets/imgs/twitter.png';
+import instagram from '../assets/imgs/instagram.png';
+import shape from '../assets/imgs/shape.png';
 
 function CarList({ cars }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const totalCars = cars.length;
+  const maxIndex = totalCars - 1;
+  const totalSlides = Math.ceil(totalCars / 3);
+
+  const handleNext = () => {
+    const nextIndex = Math.min(currentIndex + 3, maxIndex);
+    setCurrentIndex(nextIndex);
+  };
+
+  const handlePrev = () => {
+    const prevIndex = Math.max(currentIndex - 3, 0);
+    setCurrentIndex(prevIndex);
+  };
+
   return (
-    <div>
-      {cars?.map((car) => (
-        <Link key={car.id} to={`/cars/${car.id}`} className="block mb-4">
-          <img src={car.image_url} alt={car.name} className="w-full h-64 object-cover" />
-          <h2 className="text-xl font-bold mt-2">{car.name}</h2>
-          <p>{car.description}</p>
-        </Link>
-      ))}
+    <div className="my-5 py-5">
+      <div className="flex justify-center w-full">
+        <div className="flex space-x-4">
+          {[...Array(totalSlides)].map((_, index) => (
+            <button
+              key={uuidv4()}
+              type="button"
+              onClick={() => setCurrentIndex(index * 3)}
+              className={`${
+                index * 3 === currentIndex
+                  ? 'bg-black'
+                  : 'bg-light-gray'
+              } px-2 py-1 rounded-full text-transparent h-4 w-1`}
+            >
+              {index + 1}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="flex items-center justify-center">
+        <button
+          type="button"
+          onClick={handlePrev}
+          disabled={currentIndex === 0}
+          className={`mr-4 px-2 py-1 rounded-md ${
+            currentIndex === 0 ? 'bg-light-gray text-gray-500' : 'bg-light-green text-white'
+          }`}
+        >
+          <img
+            src={triangle}
+            alt="Previous"
+            className="w-20 transform -rotate-90"
+          />
+        </button>
+        <div className="flex space-x-4">
+          {cars.slice(currentIndex, Math.min(currentIndex + 3, totalCars)).map((car) => (
+            <div key={car.id} className="w-1/3">
+              <div className="h-60 overflow-hidden">
+                <Link to={`/cars/${car.id}`} className="block h-full">
+                  <img
+                    src={car.image_url}
+                    alt={car.name}
+                    className="w-full h-full object-contain"
+                  />
+                </Link>
+              </div>
+              <div className="p-4">
+                <h2 className="text-xl font-bold">{car.name}</h2>
+                <div className="flex justify-center">
+                  <img src={shape} alt="shape" className="ml-5 transform rotate-45" />
+                </div>
+                <p className="text-light-gray">{car.description}</p>
+                <div className="flex w-full justify-center gap-3 pt-3">
+                  <img src={facebook} alt="facebook" className="w-10 h-10 cursor-pointer" />
+                  <img src={twitter} alt="twitter" className="w-10 h-10 cursor-pointer" />
+                  <img src={instagram} alt="instagram" className="w-10 h-10 cursor-pointer" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={handleNext}
+          disabled={currentIndex + 3 >= totalCars}
+          className={`ml-4 px-2 py-1 rounded-md ${
+            currentIndex + 3 >= totalCars ? 'bg-light-gray text-gray-500' : 'bg-light-green text-white'
+          }`}
+        >
+          <img
+            src={triangle}
+            alt="Next"
+            className="w-20 transform rotate-90"
+          />
+        </button>
+
+      </div>
     </div>
   );
 }
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index bd623db..7226dd7 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -8,7 +8,7 @@ const SideNavBar = () => {
   const { isLoggedIn, role } = useSelector((state) => state.auth);
 
   return (
-    <aside className="flex flex-col items-center w-60 text-dark-blue" aria-label="Sidebar">
+    <aside className="flex flex-col items-center w-60 border-r-2" aria-label="Sidebar">
       <div className="pb-12 pt-4">
         <Link to="/" className="flex flex-col items-center">
           <img src={Logo} alt="logo" className="w-40" />
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 60e46a2..ca52e1c 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -5,8 +5,11 @@ const Home = () => {
   const { appData: { cars } } = useSelector((state) => state.appData);
 
   return (
-    <div>
-      <h1 className="text-2xl font-bold mb-4">Cars</h1>
+    <div className="text-center">
+      <div className="py-5 mx-5">
+        <h2 className="text-3xl font-bold">LATEST MODELS</h2>
+        <h3>Please select a car model</h3>
+      </div>
       <CarList cars={cars} />
     </div>
   );
diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx
index ca868e2..3654ef6 100644
--- a/src/pages/Layout.jsx
+++ b/src/pages/Layout.jsx
@@ -32,7 +32,7 @@ const Layout = () => {
   return (
     <>
       <Sidebar />
-      <main className="flex-1 bg-gray-100 text-dark-blue p-4 overflow-auto">
+      <main className="flex-1 text-black p-4 overflow-auto">
         {renderContent()}
       </main>
     </>
diff --git a/tailwind.config.js b/tailwind.config.js
index 6815fa3..d629ad2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,8 +6,9 @@ module.exports = {
     extend: {
       colors: {
         'dark-blue': '#211951',
-        'light-green': '#74E291',
+        'light-green': '#97bf0f',
         'dark-green': '#274931',
+        'light-gray': '#A4A4A4',
       },
       width: {
         'fit-content': 'fit-content',