diff --git a/app/View/Components/Footer.php b/app/View/Components/Footer.php
new file mode 100644
index 0000000..1833c9d
--- /dev/null
+++ b/app/View/Components/Footer.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class Footer extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.footer');
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
index f8ed64c..321b51a 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -635,43 +635,18 @@ select {
 .m-1 {
   margin: 0.25rem;
 }
-.m-10 {
-  margin: 2.5rem;
-}
-.m-14 {
-  margin: 3.5rem;
-}
-.m-12 {
-  margin: 3rem;
-}
-.mx-9 {
-  margin-left: 2.25rem;
-  margin-right: 2.25rem;
-}
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-.mx-8 {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
 .mx-6 {
   margin-left: 1.5rem;
   margin-right: 1.5rem;
 }
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 .my-6 {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
-.mx-10 {
-  margin-left: 2.5rem;
-  margin-right: 2.5rem;
-}
 .mx-20 {
   margin-left: 5rem;
   margin-right: 5rem;
@@ -680,6 +655,10 @@ select {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -692,6 +671,15 @@ select {
 .mt-6 {
   margin-top: 1.5rem;
 }
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.mt-1 {
+  margin-top: 0.25rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -704,9 +692,6 @@ select {
 .ml-2 {
   margin-left: 0.5rem;
 }
-.mt-4 {
-  margin-top: 1rem;
-}
 .ml-4 {
   margin-left: 1rem;
 }
@@ -719,30 +704,27 @@ select {
 .-mt-px {
   margin-top: -1px;
 }
-.mb-4 {
-  margin-bottom: 1rem;
-}
-.mt-1 {
-  margin-top: 0.25rem;
-}
-.-mr-2 {
-  margin-right: -0.5rem;
-}
 .mt-12 {
   margin-top: 3rem;
 }
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-.mt-10 {
-  margin-top: 2.5rem;
-}
 .ml-8 {
   margin-left: 2rem;
 }
 .mb-5 {
   margin-bottom: 1.25rem;
 }
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+.ml-10 {
+  margin-left: 2.5rem;
+}
+.mr-6 {
+  margin-right: 1.5rem;
+}
+.-mr-2 {
+  margin-right: -0.5rem;
+}
 .block {
   display: block;
 }
@@ -776,27 +758,27 @@ select {
 .h-0 {
   height: 0px;
 }
+.h-20 {
+  height: 5rem;
+}
 .h-8 {
   height: 2rem;
 }
 .h-16 {
   height: 4rem;
 }
-.h-20 {
-  height: 5rem;
-}
-.h-10 {
-  height: 2.5rem;
+.h-full {
+  height: 100%;
 }
 .h-4 {
   height: 1rem;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-6 {
   height: 1.5rem;
 }
-.h-full {
-  height: 100%;
-}
 .min-h-screen {
   min-height: 100vh;
 }
@@ -806,6 +788,9 @@ select {
 .w-screen {
   width: 100vw;
 }
+.w-24 {
+  width: 6rem;
+}
 .w-20 {
   width: 5rem;
 }
@@ -821,53 +806,26 @@ select {
 .w-auto {
   width: auto;
 }
-.w-48 {
-  width: 12rem;
-}
-.w-4 {
-  width: 1rem;
-}
-.w-6 {
-  width: 1.5rem;
-}
-.w-14 {
-  width: 3.5rem;
-}
-.w-16 {
-  width: 4rem;
-}
-.w-24 {
-  width: 6rem;
-}
-.w-28 {
-  width: 7rem;
-}
-.w-32 {
-  width: 8rem;
-}
-.w-60 {
-  width: 15rem;
-}
 .w-4\/5 {
   width: 80%;
 }
-.w-3\/5 {
-  width: 60%;
-}
 .w-1 {
   width: 0.25rem;
 }
-.w-10 {
-  width: 2.5rem;
+.w-48 {
+  width: 12rem;
+}
+.w-6 {
+  width: 1.5rem;
 }
-.w-80 {
-  width: 20rem;
+.w-3\.5 {
+  width: 0.875rem;
 }
-.w-2\/5 {
-  width: 40%;
+.w-3 {
+  width: 0.75rem;
 }
-.w-1\/5 {
-  width: 20%;
+.w-4 {
+  width: 1rem;
 }
 .max-w-xl {
   max-width: 36rem;
@@ -878,9 +836,6 @@ select {
 .max-w-7xl {
   max-width: 80rem;
 }
-.max-w-md {
-  max-width: 28rem;
-}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -896,42 +851,12 @@ select {
 .basis-1\/2 {
   flex-basis: 50%;
 }
-.basis-3\/5 {
-  flex-basis: 60%;
-}
-.basis-2\/5 {
-  flex-basis: 40%;
-}
-.basis-1\/5 {
-  flex-basis: 20%;
-}
-.basis-2\/4 {
-  flex-basis: 50%;
-}
-.basis-3\/6 {
+.basis-6\/12 {
   flex-basis: 50%;
 }
-.basis-2\/6 {
-  flex-basis: 33.333333%;
-}
-.basis-1\/6 {
-  flex-basis: 16.666667%;
-}
-.basis-8\/12 {
-  flex-basis: 66.666667%;
-}
-.basis-2\/12 {
-  flex-basis: 16.666667%;
-}
-.basis-7\/12 {
-  flex-basis: 58.333333%;
-}
 .basis-3\/12 {
   flex-basis: 25%;
 }
-.basis-6\/12 {
-  flex-basis: 50%;
-}
 .origin-top-left {
   transform-origin: top left;
 }
@@ -969,9 +894,6 @@ select {
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1005,6 +927,9 @@ select {
 .justify-items-center {
   justify-items: center;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .space-x-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
@@ -1059,13 +984,25 @@ select {
 .border-l-4 {
   border-left-width: 4px;
 }
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 248 / var(--tw-border-opacity));
+}
 .border-lilac-100 {
   --tw-border-opacity: 1;
   border-color: rgb(124 125 220 / var(--tw-border-opacity));
 }
+.border-gray-50 {
+  --tw-border-opacity: 1;
+  border-color: rgb(93 93 148 / var(--tw-border-opacity));
+}
 .border-transparent {
   border-color: transparent;
 }
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(226 226 226 / var(--tw-border-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1074,27 +1011,31 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(124 125 220 / var(--tw-bg-opacity));
 }
-.bg-gray {
+.bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(226 226 226 / var(--tw-bg-opacity));
 }
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 248 / var(--tw-bg-opacity));
+}
 .fill-current {
   fill: currentColor;
 }
 .p-3 {
   padding: 0.75rem;
 }
-.p-6 {
-  padding: 1.5rem;
-}
 .p-2 {
   padding: 0.5rem;
 }
+.p-6 {
+  padding: 1.5rem;
+}
 .p-5 {
   padding: 1.25rem;
 }
-.p-1 {
-  padding: 0.25rem;
+.p-10 {
+  padding: 2.5rem;
 }
 .p-4 {
   padding: 1rem;
@@ -1123,6 +1064,14 @@ select {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -1135,70 +1084,41 @@ select {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-.px-20 {
-  padding-left: 5rem;
-  padding-right: 5rem;
-}
 .pl-1 {
   padding-left: 0.25rem;
 }
-.pt-6 {
-  padding-top: 1.5rem;
-}
 .pt-8 {
   padding-top: 2rem;
 }
-.pt-1 {
-  padding-top: 0.25rem;
-}
-.pl-3 {
-  padding-left: 0.75rem;
-}
-.pr-4 {
-  padding-right: 1rem;
-}
-.pt-2 {
-  padding-top: 0.5rem;
-}
-.pb-3 {
-  padding-bottom: 0.75rem;
+.pl-4 {
+  padding-left: 1rem;
 }
 .pt-4 {
   padding-top: 1rem;
 }
-.pb-1 {
-  padding-bottom: 0.25rem;
-}
 .pl-2 {
   padding-left: 0.5rem;
 }
-.pl-4 {
-  padding-left: 1rem;
+.pt-2 {
+  padding-top: 0.5rem;
 }
 .pl-10 {
   padding-left: 2.5rem;
 }
-.pl-12 {
-  padding-left: 3rem;
-}
-.pl-14 {
-  padding-left: 3.5rem;
+.pt-1 {
+  padding-top: 0.25rem;
 }
-.pr-8 {
-  padding-right: 2rem;
+.pl-3 {
+  padding-left: 0.75rem;
 }
-.pr-12 {
-  padding-right: 3rem;
+.pr-4 {
+  padding-right: 1rem;
 }
-.pr-14 {
-  padding-right: 3.5rem;
+.pb-3 {
+  padding-bottom: 0.75rem;
 }
-.pl-8 {
-  padding-left: 2rem;
+.pb-1 {
+  padding-bottom: 0.25rem;
 }
 .text-center {
   text-align: center;
@@ -1214,42 +1134,34 @@ select {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 .font-medium {
   font-weight: 500;
 }
+.font-bold {
+  font-weight: 700;
+}
 .font-normal {
   font-weight: 400;
 }
 .font-semibold {
   font-weight: 600;
 }
-.font-bold {
-  font-weight: 700;
-}
 .font-extrabold {
   font-weight: 800;
 }
@@ -1272,13 +1184,21 @@ select {
   --tw-text-opacity: 1;
   color: rgb(124 125 220 / var(--tw-text-opacity));
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 248 / var(--tw-text-opacity));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-black {
+.text-gray-50 {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  color: rgb(93 93 148 / var(--tw-text-opacity));
 }
 .underline {
   -webkit-text-decoration-line: underline;
@@ -1319,6 +1239,10 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-gray-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(243 244 248 / var(--tw-ring-opacity));
+}
 .ring-black {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
@@ -1427,10 +1351,22 @@ select {
         justify-content: center;
     }
 }
+.hover\:border-gray-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 248 / var(--tw-border-opacity));
+}
 .hover\:bg-lilac-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(124 125 220 / var(--tw-bg-opacity));
 }
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
+}
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(93 93 148 / var(--tw-bg-opacity));
+}
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1438,9 +1374,17 @@ select {
 .focus\:z-10:focus {
   z-index: 10;
 }
-.focus\:border-lilac-200:focus {
+.focus\:border-gray-300:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(147 149 222 / var(--tw-border-opacity));
+  border-color: rgb(243 244 248 / var(--tw-border-opacity));
+}
+.focus\:bg-gray-100:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
+}
+.focus\:bg-gray-50:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(93 93 148 / var(--tw-bg-opacity));
 }
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
@@ -1451,10 +1395,6 @@ select {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.focus\:ring-lilac-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(124 125 220 / var(--tw-ring-opacity));
-}
 .focus\:ring-lilac-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(147 149 222 / var(--tw-ring-opacity));
@@ -1462,6 +1402,10 @@ select {
 .focus\:ring-opacity-50:focus {
   --tw-ring-opacity: 0.5;
 }
+.active\:bg-gray-100:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 226 226 / var(--tw-bg-opacity));
+}
 @media (min-width: 640px) {
 
   .sm\:-my-px {
@@ -1469,11 +1413,6 @@ select {
     margin-bottom: -1px;
   }
 
-  .sm\:mx-0 {
-    margin-left: 0px;
-    margin-right: 0px;
-  }
-
   .sm\:ml-10 {
     margin-left: 2.5rem;
   }
@@ -1510,10 +1449,6 @@ select {
     flex-basis: 100%;
   }
 
-  .sm\:flex-col {
-    flex-direction: column;
-  }
-
   .sm\:items-center {
     align-items: center;
   }
@@ -1539,27 +1474,12 @@ select {
     padding-right: 1.5rem;
   }
 
-  .sm\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .sm\:pt-0 {
     padding-top: 0px;
   }
 }
 @media (min-width: 768px) {
 
-  .md\:mx-2 {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-  }
-
-  .md\:mx-0 {
-    margin-left: 0px;
-    margin-right: 0px;
-  }
-
   .md\:inline {
     display: inline;
   }
@@ -1572,13 +1492,8 @@ select {
     flex-basis: 100%;
   }
 
-  .md\:flex-col {
-    flex-direction: column;
-  }
-
-  .md\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (min-width: 1024px) {
@@ -1591,8 +1506,8 @@ select {
     flex-basis: 50%;
   }
 
-  .lg\:flex-row {
-    flex-direction: row;
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .lg\:px-8 {
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
new file mode 100644
index 0000000..b599e26
--- /dev/null
+++ b/resources/views/components/footer.blade.php
@@ -0,0 +1,97 @@
+<div>
+    <div class="p-10 bg-gray-300">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
+                <div class="mb-5">
+                    <a href="{{ url('/') }} "><div class="navbar-logo basis-1/4 text-lilac-100">Rent.ly</div></a>
+                    <p class="text-gray-50 font-semibold ml-2.5 mt-8">sign up for offers and more</p>
+                    <div class="flex ml-2.5">
+                        <input type="email" placeholder="Enter your email here" class="px-2 border-gray-50 focus:ring focus:ring-lilac-200 focus:ring-opacity-50">
+                        <button class="py-2" style="background-color: #5D5D94;">
+                            <svg class="fill-current w-6 h-4 mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z" fill="white"/></svg>
+                        </button>
+                    </div>
+                </div>
+                <div class="mb-5 ml-10 pl-10">
+                    <p class="text-gray-50 font-bold mt-8">Discover</p>
+                    <ul>
+                        <a href=""><li class="text-gray-50 mt-2">All Car</li></a>
+                        <a href=""><li class="text-gray-50 font-medium mt-2">All Motorcycle</li></a>
+                    </ul>
+                    <div class="flex justify-stretch mt-6">
+                        <a href="#!" class="mr-6 text-gray-50 ">
+                            <svg
+                                aria-hidden="true"
+                                focusable="false"
+                                data-prefix="fab"
+                                data-icon="twitter"
+                                class="svg-inline--fa fa-twitter w-6"
+                                role="img"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 512 512"
+                            >
+                                <path
+                                    fill="currentColor"
+                                    d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+                                ></path>
+                            </svg>
+                        </a>
+                        <a href="#!" class="mr-6 text-gray-50">
+                            <svg
+                                aria-hidden="true"
+                                focusable="false"
+                                data-prefix="fab"
+                                data-icon="facebook-f"
+                                class="svg-inline--fa fa-facebook-f w-3.5"
+                                role="img"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 320 512"
+                            >
+                                <path
+                                    fill="currentColor"
+                                    d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
+                                ></path>
+                            </svg>
+                        </a>
+                        <a href="#!" class="mr-6 text-gray-50">
+                            <svg
+                                aria-hidden="true"
+                                focusable="false"
+                                data-prefix="fab"
+                                data-icon="linkedin-in"
+                                class="svg-inline--fa fa-linkedin-in w-5"
+                                role="img"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 448 512"
+                            >
+                                <path
+                                    fill="currentColor"
+                                    d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
+                                ></path>
+                            </svg>
+                        </a>
+                                        </div>
+
+                </div>
+                <div class="mb-5 ml-10 pl-10">
+                    <p class="text-gray-50 font-bold mt-8">About</p>
+                    <ul>
+                        <a href=""><li class="text-gray-50 font-medium mt-2">Help Center</li></a>
+                        <a href=""><li class="text-gray-50 font-medium mt-2">Patnership</li></a>
+                    </ul>
+                </div>
+                <div class="mb-5 ml-10 pl-10">
+                    <p class="text-gray-50 font-bold mt-8">Legal</p>
+                    <ul>
+                        <a href=""><li class="text-gray-50 font-medium mt-2">Privacy Policies</li></a>
+                        <a href=""><li class="text-gray-50 font-medium mt-2">Terms & Conditions</li></a>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="text-gray-50 font-medium text-center p-4 mt-2">
+            <span>© 2022 Rent.ly. All Rights Reserved | Designed by Rent.ly Calista Team</span>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index b03d8b9..b8f895d 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -26,6 +26,5 @@
         </style>
     </head>
     <body class="antialiased" style="width: 100%;">
-        <x-navbar selected="" />
     </body>
 </html>
diff --git a/tailwind.config.js b/tailwind.config.js
index d5b6045..6afc7cc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,7 +18,11 @@ module.exports = {
             current: 'currentColor',
             'black': '#000000',
             'white': '#ffffff',
-            'gray': '#E2E2E2',
+            'gray': {
+                50:'#5D5D94',
+                100:'#E2E2E2',
+                300:'#F3F4F8',
+            },    
             'lilac': {
                 100: '#7C7DDC',
                 200: '#9395DE',