diff --git a/assets/styles/components/header.scss b/assets/styles/components/header.scss
new file mode 100644
index 00000000..cbce5439
--- /dev/null
+++ b/assets/styles/components/header.scss
@@ -0,0 +1,74 @@
+.header-container {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 1rem ;
+}
+
+.header-text {
+    max-width: 40rem;
+    h1 {
+        font-size: 2rem;
+        font-weight: bold;
+    }
+
+    p {
+        width: 75%;
+        margin-top: .8rem;
+        line-height: 1.5;
+    }
+}
+
+.header-cta {
+    flex-basis: 36rem;
+    padding-right: 1.2rem;
+    display: flex;
+    justify-content: flex-end;
+    align-items: start;
+    a {
+        padding: .5rem 1rem;
+        border: 1px solid #666;
+        border-radius: .3rem;
+        text-decoration: none;
+        color: #000;
+        display: inline-block;
+        font-weight: 800;
+    }
+
+    a::after {
+        content: "";
+        margin-left: .6rem;
+        background-image: url("../icons/arrow-icon.svg");
+        display: inline-block;
+        height: 1rem;
+        width: 1rem;
+        background-size: 1rem 1rem;
+      }
+
+    a:hover{
+        box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
+    }  
+
+    .header-cta::before{
+        content: url('../icons/arrow-icon.svg');
+        margin-right: .75rem;
+        }    
+}
+
+
+@media(max-width: 800px){
+    .header-container{
+        display: block;
+
+        .header-cta{
+            display: block;
+            margin-top: 2rem;
+        }
+
+        .header-text{
+            p{
+                width: 100%;
+            }
+        }
+    }
+}
+
diff --git a/assets/styles/components/listing.scss b/assets/styles/components/listing.scss
new file mode 100644
index 00000000..d4f6a873
--- /dev/null
+++ b/assets/styles/components/listing.scss
@@ -0,0 +1,107 @@
+.listing {
+    margin: 1rem 0;
+
+    &__inner {
+        margin-bottom: 18rem;
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: repeat(3,1fr);
+        justify-content: center;
+        padding: 0 2rem;
+    }
+}    
+
+.card {
+    height: 31rem;
+    position: relative;
+    border-radius: .5rem;              
+
+    &__media {
+        border-radius: .5rem;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+
+        &-image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: .5rem;
+            transition: all .2s ease-in-out;
+            background-size: cover;
+        }
+        
+        &-image:hover {
+            transform: scale(1.1);
+        }
+    }
+
+    &__body {
+        position: absolute;
+        bottom: 0;
+        padding: 1rem;
+        background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
+        border-radius: 0 0 .5rem .5rem;
+        width: 100%;
+
+        &-label{
+            font-weight: bold;
+            padding: .3rem .5rem;
+            border-radius: 5px;
+            width: fit-content;
+            margin-bottom: .8rem;
+            left: .3rem;
+        }
+
+            &-label:first-child{
+                background-color: #ECE9FE;
+            }
+
+        &-title{
+            font-weight: 600;
+            line-height: 1.3;
+            color: #fff;
+            font-size: 1.3rem;
+            margin-bottom: .5rem;
+        }
+
+        &-location{
+            color: #fff;
+        }
+
+        &-location::before{
+            content: url('../icons/map-pin.svg');
+            margin-right: .6rem;
+        }
+    }
+}
+
+
+@media(max-width : 800px){
+    .listing {    
+        &__inner{
+            grid-template-columns: repeat(2,1fr);
+        }    
+    }
+}
+
+@media(max-width : 500px){
+    .listing {    
+        &__inner{
+            grid-template-columns: repeat(1,1fr);
+        }
+        
+    }
+}
+
+
+$text-colors: #9568e6, #2768d7, #3F3F46;
+$label-colors: #ECE9FE, #D1E9FF, #F4F4F4;
+
+@for $i from 1 through 3 {
+  .listing__item:nth-of-type(#{$i}) .card__body-label {
+    color: nth($text-colors, $i);
+    background-color: nth($label-colors, $i);
+  }
+}
+
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
index 4a20f6b2..e43b3060 100644
--- a/assets/styles/index.scss
+++ b/assets/styles/index.scss
@@ -5,5 +5,7 @@
 @import "global";
 
 @import "components/info-box.scss";
+@import "components/header.scss";
+@import "components/listing.scss";
 
 
diff --git a/index.html b/index.html
index c344cc04..b0a9c55a 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
   </head>
   <body>
     <main class="main">
+      <!--
       <div class="component info-box">
         <div class="info-box__inner">
           <div class="info-box__content">
@@ -46,10 +47,20 @@
           </div>
         </div>
       </div>
+    -->
+
+      <div class="header-container component">
+        <div class="header-text">
+          <h1>New Destinations</h1>
+          <p>So what are you waiting for? Start exploring our site today and get ready for the adventure of a lifetime!</p>
+        </div>
+        <div class="header-cta">
+          <a href="#">See All</a>
+        </div>
+      </div>
 
       <div class="component listing">
         <div class="listing__inner">
-
           <a href="#" class="listing__item card">
             <div class="card__media">
               <img class="card__media-image" src="https://source.unsplash.com/random/600x1200/?norway" alt="Placeholder image" />