diff --git a/components/Carousel.vue b/components/Carousel.vue
deleted file mode 100644
index 9a0cd1e7..00000000
--- a/components/Carousel.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script lang="ts" setup>
-const isDragging = ref(false)
-const cursorPos = ref([0, 0])
-const el = ref<Element>()
-
-function onMouseDown(ev: MouseEvent) {
-  isDragging.value = true
-  cursorPos.value = [ev.clientX, ev.clientY]
-  window.addEventListener('mousemove', onMouseHold)
-}
-
-function onMouseUp() {
-  window.removeEventListener('mousemove', onMouseHold)
-  isDragging.value = false
-}
-
-function onMouseHold(ev: MouseEvent) {
-  ev.preventDefault()
-
-  requestAnimationFrame(() => {
-    const delta = [
-      ev.pageX - cursorPos.value[0],
-      ev.pageY - cursorPos.value[1],
-    ]
-
-    cursorPos.value = [ev.pageX, ev.pageY]
-
-    if (el.value) {
-      el.value.scrollBy({
-        left: -delta[0],
-        top: -delta[1],
-      })
-    }
-  })
-}
-// register the event listener onMounted (cleanup is automatically handled)
-useEventListener(el, 'mouseup', onMouseUp)
-</script>
-
-<template>
-  <div
-    ref="el"
-    class="carousel" :style="{
-      cursor: isDragging ? 'grabbing' : 'grab',
-      scrollSnapType: isDragging ? '' : '',
-    }"
-    :class="{ 'is-dragging': isDragging }"
-    @mousedown="onMouseDown"
-    @mouseup="onMouseUp"
-  >
-    <slot />
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.carousel {
-  display: grid;
-  grid-auto-columns: calc(100% - 2rem);
-  grid-column-gap: 1rem;
-  grid-auto-flow: column;
-  list-style: none;
-  overflow-x: scroll;
-  width: 100%;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-:slotted(.card) {
-  display: flex;
-  flex-direction: column;
-  scroll-snap-align: center;
-  transition: all 0.2s;
-  margin-bottom: 1rem;
-}
-
-.carousel::-webkit-scrollbar {
-  height: 0.5rem;
-}
-
-.carousel::-webkit-scrollbar-thumb,
-.carousel::-webkit-scrollbar-track {
-  @apply rounded-3xl;
-}
-
-.carousel.is-dragging {
-  user-select: none;
-}
-
-@media (hover: none) {
-  :slotted(.card) {
-    margin: 0;
-  }
-  .carousel {
-    scroll-snap-type: x mandatory;
-  }
-  .carousel::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-@media (min-width: 1024px) {
-  :slotted(.card) {
-    scroll-snap-align: start;
-  }
-  .carousel {
-    grid-auto-columns: calc(55% - 5rem);
-    grid-column-gap: 1.5rem;
-  }
-}
-</style>
diff --git a/components/CarouselSection.vue b/components/CarouselSection.vue
deleted file mode 100644
index b669e54e..00000000
--- a/components/CarouselSection.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-interface CarouselSection {
-  title: string
-  description: string
-}
-defineProps<CarouselSection>()
-</script>
-
-<template>
-  <div class="carousel-section flex flex-col gap-8 sm:flex-row sm:gap-0">
-    <div class="grid-margins lg:mr-4 lg:mt-12 sm:w-33% xl:pl-0">
-      <Heading type="h2" class="font-medium">
-        {{ title }}
-      </Heading>
-      <p class="mt-4 text-base p1">
-        {{ description }}
-      </p>
-    </div>
-    <Carousel>
-      <slot />
-    </Carousel>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.carousel-section {
-  margin-left: max(0rem, calc(100vw - 1280px)/2 + 1rem);
-}
-</style>
diff --git a/components/GridLayout.vue b/components/GridLayout.vue
new file mode 100644
index 00000000..b544a17f
--- /dev/null
+++ b/components/GridLayout.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="grid-layout">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1rem;
+  width: 100%;
+}
+
+:slotted(.card) {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .grid-layout {
+    gap: 1.5rem;
+  }
+}
+</style>
diff --git a/components/GridSection.vue b/components/GridSection.vue
new file mode 100644
index 00000000..d9d347c9
--- /dev/null
+++ b/components/GridSection.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+interface GridSectionProps {
+  title: string
+  description: string
+}
+defineProps<GridSectionProps>()
+</script>
+
+<template>
+  <section class="grid-margins flex flex-col gap-8">
+    <div class="lg:w-1/2 md:w-2/3">
+      <Heading type="h2" class="font-medium">
+        {{ title }}
+      </Heading>
+      <p class="mt-4 text-base p1">
+        {{ description }}
+      </p>
+    </div>
+    <GridLayout>
+      <slot />
+    </GridLayout>
+  </section>
+</template>
diff --git a/components/KeyFeatures.vue b/components/KeyFeatures.vue
index d813bea3..44908dd8 100644
--- a/components/KeyFeatures.vue
+++ b/components/KeyFeatures.vue
@@ -49,14 +49,15 @@ const cards = [{
 </script>
 
 <template>
-  <CarouselSection
+  <GridSection
     class="key-features"
     title="Key Features"
     description="Check out how we’re cranking up the heat with upcoming features and innovations to make your data storage experience scorching hot!"
   >
     <CardCell v-for="card in cards" :key="card.title" class="card bg-brand-4 color-brand-3">
       <div class="pill h-3em w-3em flex-inline items-center justify-center rounded-full bg-white">
-        <AppIcon :i="card.icon" />
+        <div v-if="card.icon.startsWith('i-')" :class="card.icon" />
+        <span v-else>{{ card.icon }}</span>
       </div>
       <div class="card-body mt-6 color-brand-3">
         <Heading type="h3" class="font-medium">
@@ -70,7 +71,7 @@ const cards = [{
         </p>
       </div>
     </CardCell>
-  </CarouselSection>
+  </GridSection>
 </template>
 
 <style lang="postcss" scoped>
diff --git a/components/Roadmap.vue b/components/Roadmap.vue
index 24af702e..c428805d 100644
--- a/components/Roadmap.vue
+++ b/components/Roadmap.vue
@@ -24,7 +24,7 @@ const cards = [{
 </script>
 
 <template>
-  <CarouselSection
+  <GridSection
     class="roadmap"
     title="Our Sizzling Roadmap"
     description="Check out how we’re cranking up the heat with upcoming features and innovations to make your data storage experience scorching hot!"
@@ -42,7 +42,7 @@ const cards = [{
         </p>
       </div>
     </CardCell>
-  </CarouselSection>
+  </GridSection>
 </template>
 
 <style lang="postcss" scoped>