diff --git a/assets/scss/_components.scss b/assets/scss/_components.scss
index ee8e8e755..9f68ef1d2 100644
--- a/assets/scss/_components.scss
+++ b/assets/scss/_components.scss
@@ -7,6 +7,7 @@
 @import "components/faq";
 @import "components/faq-question";
 @import "components/faq-topic";
+@import "components/faq-overview";
 @import "components/footer";
 @import "components/hack_the_tunnels";
 @import "components/header";
diff --git a/assets/scss/components/_faq-overview.scss b/assets/scss/components/_faq-overview.scss
new file mode 100644
index 000000000..376331737
--- /dev/null
+++ b/assets/scss/components/_faq-overview.scss
@@ -0,0 +1,53 @@
+.faq {
+    &__page {
+      background: #faf9f8;
+      height: fit-content;
+      padding-bottom: 5rem;
+    }
+  
+    &__content {
+      max-width: 65rem;
+      margin: 0 auto;
+      height: fit-content;
+      padding: 2.5rem;
+    }
+  
+    &__header {
+      .page-section-image {
+        min-height: 20rem;
+      }
+  
+      .page-section {
+        padding: 2rem 0rem;
+        margin-bottom: 3rem;
+      }
+    }
+
+    .page-section-grid-primary {
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+    .page-section-grid-secondary {
+      display: block;
+      height: 200px;
+      background-size: cover;
+      background-position: center;
+    }
+  
+    &__topic_name {
+      display: inline-block;
+    }
+  
+    &__questions {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2.5rem;
+    }
+    @media (max-width: 768px) {
+      &__questions {
+        grid-template-columns: 1fr;
+        gap: 2.5rem;
+      }
+    }
+  }
+  
diff --git a/content/resources/faq/faq-overview.md b/content/resources/faq/faq-overview.md
new file mode 100644
index 000000000..dac3f763f
--- /dev/null
+++ b/content/resources/faq/faq-overview.md
@@ -0,0 +1,9 @@
+---
+title: "Frequently Asked Questions"
+description: "Find answers to all your frequently asked questions in one place. Below is a list of topics you maybe have questions about!"
+url: "/faq/"
+layout: faq-overview
+header_image_url: images/general/game_lab.jpg
+Topics:
+- course-registration
+---
diff --git a/layouts/_default/faq-overview.html b/layouts/_default/faq-overview.html
new file mode 100644
index 000000000..27868e6ac
--- /dev/null
+++ b/layouts/_default/faq-overview.html
@@ -0,0 +1,44 @@
+{{ define "main" }}
+  {{- partial "navbar_temp.html" . -}}
+  <div class="faq__page">
+    <div class="faq__content">
+      <div class="faq__header">
+        <div class="page-section">
+          <div class="page-section-content page-section-grid-primary">
+            <div class="page-section-text">{{ .Title }}</div>
+            <div class="page-section-body">
+              {{ .Description }}
+            </div>
+          </div>
+          <div
+            class="page-section-image page-section-grid-secondary"
+            style="background-image: url({{ absURL .Params.header_image_url }})"
+          ></div>
+        </div>
+      </div>
+      <div class="faq__topics">
+        {{ range .Params.Topics }}
+          {{ $page := printf "resources/faq/topics/%s" . }}
+          {{ with $.Site.GetPage $page }}
+            <div class="faq__topic">
+              <a href="{{ .RelPermalink }}">
+                <div class=faq__topic_name><h3>{{ .Title }} <i class="fas fa-arrow-right read-more-arrow"></i></h3></div>
+              </a>
+              <div class = "faq-topic__questions"> 
+                {{ range first 2 .Params.questions }}
+                  {{ $questionPage := printf "resources/faq/questions/%s" . }}
+                  {{ with $.Site.GetPage $questionPage }}
+                    <div class="faq__question">
+                      <div>{{- partial "curated-questions.html" (dict "Title" .Title "summary" .Params.summary) -}}</div>
+                      <div>{{- partial "read-more.html" (dict "label" "Read More " "link" .RelPermalink) -}}</div>
+                    </div>
+                  {{ end }}
+                {{ end }}
+              </div>
+            </div>
+          {{ end }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+{{ end }}
diff --git a/layouts/_default/faq-topic.html b/layouts/_default/faq-topic.html
index 50ffa6f5a..a3f8aa2ec 100644
--- a/layouts/_default/faq-topic.html
+++ b/layouts/_default/faq-topic.html
@@ -19,7 +19,7 @@
           ></div>
         </div>
       </div>
-      <div class="faq-topic__questions">
+      <div class="faq__questions">
         {{ range .Params.questions }}
           {{ $page := printf "resources/faq/questions/%s" . }}
           {{ with $.Site.GetPage $page }}
diff --git a/layouts/partials/curated-questions.html b/layouts/partials/curated-questions.html
new file mode 100644
index 000000000..828231087
--- /dev/null
+++ b/layouts/partials/curated-questions.html
@@ -0,0 +1,4 @@
+<div>
+    <h4>{{ .Title }}</h4>
+    <p>{{ .summary }}</p>
+</div>