diff --git a/_content/css/styles.css b/_content/css/styles.css
index c376e18..1774461 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -1831,6 +1831,21 @@
 .Solutions-forwardArrowIcon {
   font-size: 1rem;
 }
+.Solutions-header {
+  padding: 0 1.5rem;
+  margin: 2.5rem auto;
+  max-width: 75.75rem;
+}
+.Solutions-header .SiteBreadcrumb {
+  margin-bottom: 2rem;
+}
+.Solutions-useCase__title {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 36px;
+  line-height: 32px;
+  color: var(--color-text);
+}
 @media only screen and (min-width: 57.7rem) {
   .WhyGo-reasons {
     grid-template-columns: repeat(2, 1fr);
@@ -3016,6 +3031,67 @@
 .Solutions-useCasesHeader h2,
 .Solutions-caseStudiesHeader h2 {
 }
+.MarketingCardList {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 1.75rem;
+  padding: unset;
+}
+.MarketingCard {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 0 1.75rem;
+  text-align: left;
+  box-sizing: border-box;
+  width: auto;
+  height: auto;
+  min-height: 24.625rem;
+  background: var(--color-background);
+  border: var(--border);
+  border-radius: 0.25rem;
+}
+.MarketingCard a:hover {
+  text-decoration: none;
+}
+.MarketingCard-section {
+  margin-top: 2.625rem;
+}
+.MarketingCard-section__bottom {
+  position: absolute;
+  bottom: 2.625rem;
+}
+.MarketingCard-section__spacer {
+  padding-bottom: 6.25rem;
+}
+.MarketingCard-title {
+  color: var(--color-text);
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+  font-style: normal;
+}
+.MarketingCard-body {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  letter-spacing: 0.1px;
+  color: var(--color-text-subtle);
+}
+.MarketingCard-action {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  letter-spacing: 0.1px;
+  color: var(--color-text-link);
+  background: unset;
+  border: none;
+  padding: unset;
+  cursor: pointer;
+}
 .Solutions-cardList,
 .Solutions-caseStudyList {
   display: grid;
@@ -3038,7 +3114,7 @@
   flex: 0 100%;
 }
 @media only screen and (min-width: 38rem) {
-  .Solutions-cardList {
+  .Solutions-cardList, .MarketingCardList {
     grid-template-columns: repeat(2, 1fr);
   }
 }
@@ -3051,7 +3127,7 @@
     box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.22);
     transition: all 0.2s ease-in-out;
   }
-  .Solutions-cardList {
+  .Solutions-cardList, .MarketingCardList {
     grid-template-columns: repeat(3, 1fr);
   }
 }
diff --git a/_content/solutions/case-studies.md b/_content/solutions/case-studies.md
new file mode 100644
index 0000000..024f14e
--- /dev/null
+++ b/_content/solutions/case-studies.md
@@ -0,0 +1,57 @@
+---
+title: Case Studies
+layout: none
+---
+
+{{$solutions := pages "/solutions/*"}}
+<section class="Solutions-useCases">
+  <div class="Container">
+    <ul class="MarketingCardList">
+      {{- range $solutions}}
+        {{- if eq .series "Case Studies"}}
+          <li class="MarketingCard">
+            {{- if .link}}
+            <a
+            href="{{.link}}"
+            target="_blank"
+            rel="noopener"
+            >
+            {{- else}}
+            <a href="{{.URL}}">
+            {{- end}}
+              <div class="MarketingCard-section">
+                <img
+                  height="36"
+                  class="DarkMode-img"
+                  loading="lazy"
+                  alt="{{.company}}"
+                  src="/images/logos/{{.logoSrcDark}}"
+                />
+                <img
+                  height="36"
+                  class="LightMode-img"
+                  loading="lazy"
+                  alt="{{.company}}"
+                  src="/images/logos/{{.logoSrc}}"
+                />
+              </div>
+              <div class="MarketingCard-section MarketingCard-section__spacer">
+                <h2 class="MarketingCard-title">{{or .linkTitle .title}}</h2>
+                <p class="MarketingCard-body">
+                {{- if .link}}
+                  {{.description}}
+                {{- else}}
+                  {{with .quote}}{{.}}{{end}}
+                {{- end}}
+                </p>
+              </div>
+              <div class="MarketingCard-section__bottom">
+                <p class="MarketingCard-action">View Case Study</p>
+              </div>
+            </a>
+          </li>
+        {{- end}}
+      {{- end}}
+    <ul>
+  </div>
+</section>
diff --git a/_content/solutions/use-cases.md b/_content/solutions/use-cases.md
new file mode 100644
index 0000000..03c0623
--- /dev/null
+++ b/_content/solutions/use-cases.md
@@ -0,0 +1,57 @@
+---
+title: Use Cases
+layout: none
+---
+
+{{$solutions := pages "/solutions/*"}}
+<section class="Solutions-header">
+  <div class="Container">
+    {{breadcrumbs .}}
+    <h1 class="Solutions-useCase__title">Use Cases</h1>
+  </div>
+</section>
+<section class="Solutions-useCases">
+  <div class="Container">
+    <ul class="MarketingCardList">
+      {{- range newest $solutions}}
+        {{- if eq .series "Use Cases"}}
+        <li class="MarketingCard">
+          <a href="{{.URL}}">
+            <div class="MarketingCard-section">
+              {{- $icon := .icon}}
+              {{- $iconDark := .iconDark}}
+              {{- if $icon}}
+              <img
+                class="LightMode-img"
+                loading="lazy"
+                alt="{{$icon.alt}}"
+                src="{{path.Dir .URL}}/{{$icon.file}}"
+              />
+              {{- end}}
+              {{- if $iconDark}}
+              <img
+                class="DarkMode-img"
+                loading="lazy"
+                alt="{{$iconDark.alt}}"
+                src="{{path.Dir .URL}}/{{$iconDark.file}}"
+              />
+              {{- end}}
+            </div>
+            <div class="MarketingCard-section MarketingCard-section__spacer">
+              <h3 class="MarketingCard-title">{{or .linkTitle .title}}</h3>
+              <p class="MarketingCard-body">
+                {{.description}}
+              </p>
+            </div>
+            <div class="MarketingCard-section__bottom">
+              <p class="MarketingCard-action">
+                Learn More
+              </p>
+            </div>
+          </a>
+        </li>
+        {{- end}}
+      {{- end}}
+    </ul>
+  </div>
+</section>