diff --git a/package-lock.json b/package-lock.json
index a2da7477..ea6668db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20281,6 +20281,11 @@
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
       "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg=="
     },
+    "node_modules/warpjs": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/warpjs/-/warpjs-1.0.8.tgz",
+      "integrity": "sha512-WBlSYafy87MFhH3azS0mN10novFhwXFjOXT397wNtJaGMUIKwv0NRyOIuEA0VvAIWViUi+kgeEVc4wCMb6K8ig=="
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -21843,6 +21848,7 @@
         "tiptap": "^1.30.0",
         "tiptap-extensions": "^1.33.2",
         "vue-uuid": "^2.1.0",
+        "warpjs": "^1.0.8",
         "webpack": "^4.46.0"
       }
     }
@@ -29680,6 +29686,7 @@
         "tiptap": "^1.30.0",
         "tiptap-extensions": "^1.33.2",
         "vue-uuid": "^2.1.0",
+        "warpjs": "^1.0.8",
         "webpack": "^4.46.0"
       }
     },
@@ -37598,6 +37605,11 @@
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
       "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg=="
     },
+    "warpjs": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/warpjs/-/warpjs-1.0.8.tgz",
+      "integrity": "sha512-WBlSYafy87MFhH3azS0mN10novFhwXFjOXT397wNtJaGMUIKwv0NRyOIuEA0VvAIWViUi+kgeEVc4wCMb6K8ig=="
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/packages/fe/assets/scss/main.scss b/packages/fe/assets/scss/main.scss
index f06dd235..d818a8e4 100644
--- a/packages/fe/assets/scss/main.scss
+++ b/packages/fe/assets/scss/main.scss
@@ -493,8 +493,8 @@ span.error {
   }
 }
 
-.warp-image-double {
-  margin-top: -3px;
+.warped-grid-column {
+  transform: translateY(-3px);
 }
 
 .z-index-100 {
diff --git a/packages/fe/components/form/fields/range.vue b/packages/fe/components/form/fields/range.vue
index 490ea9be..2f6e4a98 100644
--- a/packages/fe/components/form/fields/range.vue
+++ b/packages/fe/components/form/fields/range.vue
@@ -193,6 +193,24 @@ $borderWidth: 2px;
 }
 
 // /////////////////////////////////////////////////////////////////////// Thumb
+@mixin thumb {
+  &:active {
+    background-color: $mandysPink;
+  }
+}
+
+:deep(.range) {
+  &::-webkit-slider-thumb {
+    @include thumb;
+  }
+  &::-moz-range-thumb {
+    @include thumb;
+  }
+  &::-ms-thumb {
+    @include thumb;
+  }
+}
+
 .thumb {
   position: relative;
   left: calc(#{math.div($trackHeight, 2)} - #{math.div($thumbWidth, 2)});
diff --git a/packages/fe/components/hero-b.vue b/packages/fe/components/hero-b.vue
index 34b70b66..d48e4d3b 100644
--- a/packages/fe/components/hero-b.vue
+++ b/packages/fe/components/hero-b.vue
@@ -30,7 +30,7 @@
 
         <div class="col-4_sm-3_mi-2">
           <div class="panel-right">
-            <div class="warp-image-double" />
+            <WarpedGridColumn />
           </div>
         </div>
 
@@ -46,6 +46,7 @@ import ButtonX from '@/components/buttons/button-x'
 import Chevron from '@/components/icons/chevron'
 
 // import IconQuestionMark from '@/components/icons/question-mark'
+import WarpedGridColumn from '@/components/warped-grid-column'
 
 // ====================================================================== Export
 export default {
@@ -53,7 +54,8 @@ export default {
 
   components: {
     ButtonX,
-    Chevron
+    Chevron,
+    WarpedGridColumn
     // IconQuestionMark
   },
 
@@ -192,17 +194,7 @@ export default {
   }
 }
 
-.warp-image-double {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 45rem;
-  height: 500rem;
-  background-image: url('~assets/images/warp-image-double.png');
-  background-position: top left;
-  background-size: 45rem;
-  @include tiny {
-    width: calc(100% + 100vw * 0.041665 + 2rem);
-  }
+::v-deep .warped-grid-column {
+  overflow: visible;
 }
 </style>
diff --git a/packages/fe/components/notaries-table.vue b/packages/fe/components/notaries-table.vue
index fc24deed..ba30041a 100644
--- a/packages/fe/components/notaries-table.vue
+++ b/packages/fe/components/notaries-table.vue
@@ -25,13 +25,13 @@
         root-html-tag="tbody"
         class="table-body">
         <tr
-          v-for="notary in filteredNotaries"
-          :key="notary.sp_id"
+          v-for="(notary, i) in filteredNotaries"
+          :key="`${notary.sp_id}-${i}`"
           class="row row-body">
 
           <td
-            v-for="cell in columns"
-            :key="cell.slug"
+            v-for="(cell, j) in columns"
+            :key="`${cell.slug}-${j}`"
             :class="['cell cell-body', cell.slug]">
             <div :class="['cell-inner-wrapper', `cell-${cell.slug}`]">
 
@@ -50,14 +50,14 @@
                   </div>
                   <div class="github-handles">
                     <ButtonX
-                      v-for="(handle, index) in notary.github_user"
-                      :key="handle"
+                      v-for="(handle, k) in notary.github_user"
+                      :key="`${handle}-${k}`"
                       :to="`https://github.com/${handle}`"
                       :data-tooltip="`https://github.com/${handle}`"
                       tag="a"
                       target="_blank"
                       class="github-handle">
-                      {{ handle }}<template v-if="index !== notary.github_user.length - 1">,</template>
+                      {{ handle }}<template v-if="k !== notary.github_user.length - 1">,</template>
                     </ButtonX>
                   </div>
                 </div>
@@ -88,8 +88,8 @@
                   </ButtonX>
                   <template v-if="notary.email.length > 0">
                     <ButtonX
-                      v-for="email in notary.email"
-                      :key="email"
+                      v-for="(email, l) in notary.email"
+                      :key="`${email}-${l}`"
                       :to="`mailto:${email}`"
                       :data-tooltip="`mailto:${email}`"
                       tag="a"
diff --git a/packages/fe/components/page-index/roadmap.vue b/packages/fe/components/page-index/roadmap.vue
index 52e088c0..55c955b8 100644
--- a/packages/fe/components/page-index/roadmap.vue
+++ b/packages/fe/components/page-index/roadmap.vue
@@ -203,7 +203,6 @@ export default {
         const entry = roadmap[i]
         const date = entry.date
         const parsedDate = this.$moment(date)
-        console.log(parsedDate)
         entry.date = {
           original: date,
           quarter: `Q${parsedDate.format('Q YYYY')}`
diff --git a/packages/fe/components/warped-grid-column.vue b/packages/fe/components/warped-grid-column.vue
new file mode 100644
index 00000000..a3a98ee7
--- /dev/null
+++ b/packages/fe/components/warped-grid-column.vue
@@ -0,0 +1,106 @@
+<template>
+  <div
+    ref="column"
+    class="warped-grid-column">
+    <WarpedGrid
+      v-for="(grid, i) in grids"
+      ref="canvases"
+      :key="`warped-grid-canvas-${i}`"
+      :animation-active="activeGrids.includes(i)"
+      v-bind="params"
+      :style="{ top: `${i * gridHeight}px` }"
+      class="warp-animation" />
+  </div>
+</template>
+
+<script>
+// ====================================================================== Import
+import WarpedGrid from '@/components/warped-grid'
+
+// =================================================================== Functions
+const calculateColumnHeight = (instance) => {
+  const column = instance.$refs.column
+  const grids = Math.ceil(column.clientHeight / instance.gridHeight)
+  if (instance.grids !== grids) {
+    instance.grids = grids
+  }
+  const canvases = instance.$refs.canvases
+  const active = instance.activeGrids
+  if (Array.isArray(canvases)) {
+    const len = instance.grids || 0
+    for (let i = 0; i < len; i++) {
+      const canvas = canvases[i]
+      if (canvas) {
+        const rect = canvas.$el.getBoundingClientRect()
+        const top = rect.top
+        const bottom = top + rect.height
+        if (bottom > 0 && top < window.innerHeight) {
+          if (!active.includes(i)) {
+            active.push(i)
+            instance.activeGrids = active
+          }
+        } else {
+          if (active.includes(i)) {
+            instance.activeGrids = active.filter(n => n !== i)
+          }
+        }
+      }
+    }
+  }
+}
+
+// ====================================================================== Export
+export default {
+  name: 'WarpedGridColumn',
+
+  components: {
+    WarpedGrid
+  },
+
+  props: {
+    params: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+
+  data () {
+    return {
+      scroll: false,
+      gridHeight: 1121,
+      grids: false,
+      activeGrids: [0]
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      calculateColumnHeight(this)
+      this.scroll = this.$throttle(() => { calculateColumnHeight(this) }, 50)
+      window.addEventListener('scroll', this.scroll)
+    })
+  },
+
+  beforeDestroy () {
+    if (this.scroll) { window.removeEventListener('scroll', this.scroll) }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.warped-grid-column {
+  position: relative;
+  height: calc(100% + 1rem + 3px);
+  width: 1121px;
+  overflow: hidden;
+}
+
+.warp-animation {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>
diff --git a/packages/fe/components/warped-grid.vue b/packages/fe/components/warped-grid.vue
new file mode 100644
index 00000000..eb5f2cf3
--- /dev/null
+++ b/packages/fe/components/warped-grid.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="warped-grid-container">
+    <canvas
+      ref="canvas"
+      :width="canvasWidth"
+      :height="canvasHeight">
+    </canvas>
+  </div>
+</template>
+
+<script>
+// =================================================================== Functions
+const initCanvas = (instance, next) => {
+  const canvas = instance.$refs.canvas
+  instance.ctx = canvas.getContext('2d')
+  return next()
+}
+
+const gaussianSmoothStep = (x, y, r) => {
+  const slope = r * 0.5
+  const u = x - r
+  const v = y - r
+  const z = slope * Math.exp(-0.5 * (Math.pow(u / slope, 2) + Math.pow(v / slope, 2)))
+  const scalar = ((r * r) - (u * u + v * v)) / (r * r)
+  if (scalar < 0.0001) {
+    return 0
+  }
+  return z * scalar
+}
+
+const renderGridOnCanvas = (instance, frame) => {
+  const ctx = instance.ctx
+  const params = instance.params
+  const speed = params.speed
+  const vertical = params.verticalLines
+  const horizontal = params.horizontalLines
+  const unit = params.cellWidth + params.lineWidth
+  const width = unit * (vertical + 1)
+  const height = unit * (horizontal + 1)
+  const a = params.interactionIntensity
+  const b = params.pulseIntensity
+  // calculation variables
+  const sv = vertical * params.resolution
+  const sh = horizontal * params.resolution
+  const hw = width / 2
+  const z = frame * speed * Math.PI
+  const vec = instance.vectors
+  const dv = -1 * a * vec.aX + b * Math.cos(z)
+  const du = -1 * a * vec.aY + b * Math.sin(z + speed * Math.sin(z))
+
+  ctx.clearRect(0, 0, width, height)
+  ctx.lineWidth = params.lineWidth
+  ctx.strokeStyle = params.color
+
+  for (let i = 1; i <= vertical; i++) {
+    ctx.beginPath()
+    const x = i * unit
+    let g = gaussianSmoothStep(x + dv, 0 + du, hw)
+    ctx.moveTo(x - g * dv, 0 - g * du)
+    for (let j = 1; j <= sh; j++) {
+      const y = (j / sh) * height
+      g = gaussianSmoothStep(x + dv, y + du, hw)
+      ctx.lineTo(x - g * dv, y - g * du)
+    }
+    ctx.stroke()
+  }
+
+  for (let i = 1; i <= horizontal; i++) {
+    ctx.beginPath()
+    const y = i * unit
+    let g = gaussianSmoothStep(0 + dv, y + du, hw)
+    ctx.moveTo(0 - g * dv, y - g * du)
+    for (let j = 1; j <= sv; j++) {
+      const x = (j / sv) * width
+      g = gaussianSmoothStep(x + dv, y + du, hw)
+      ctx.lineTo(x - g * dv, y - g * du)
+    }
+    ctx.stroke()
+  }
+
+  updateVectors(instance)
+}
+
+const updateMousePosition = (e, instance) => {
+  const vec = instance.vectors
+  const rect = instance.$refs.canvas.getBoundingClientRect()
+  // calculate mouse position
+  vec.x = (e.pageX - rect.left - window.scrollX) / rect.width
+  vec.y = (e.pageY - rect.top - window.scrollY) / rect.height
+}
+
+const updateVectors = (instance) => {
+  const vec = instance.vectors
+  const params = instance.params
+  // calculate displacement from mouse
+  vec.dx = vec.x - vec.cgx
+  vec.dy = vec.y - vec.cgy
+  // create springing effect
+  vec.dx *= params.springing
+  vec.dy *= params.springing
+  vec.aX += vec.dx
+  vec.aY += vec.dy
+  // move center
+  vec.cgx += vec.aX
+  vec.cgy += vec.aY
+  // slow down springing
+  vec.aX *= params.damping
+  vec.aY *= params.damping
+}
+
+// ====================================================================== Export
+export default {
+  name: 'WarpedGrid',
+
+  props: {
+    animationActive: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    verticalLines: {
+      type: Number,
+      required: false,
+      default: 32
+    },
+    horizontalLines: {
+      type: Number,
+      required: false,
+      default: 32
+    },
+    cellWidth: {
+      type: Number,
+      required: false,
+      default: 33
+    },
+    lineWidth: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    resolution: { // number of sublines used to create each side of each cell
+      type: Number,
+      required: false,
+      default: 4
+    },
+    pulseSpeed: {
+      type: Number,
+      required: false,
+      default: 0.0015
+    },
+    pulseIntensity: {
+      type: Number,
+      required: false,
+      default: 0.5
+    },
+    interactionSpringing: {
+      type: Number,
+      required: false,
+      default: 0.001
+    },
+    interactionDamping: { // values above 1.0 produce divergence
+      type: Number,
+      required: false,
+      default: 0.99
+    },
+    interactionIntensity: {
+      type: Number,
+      required: false,
+      default: 100
+    },
+    gridColor: {
+      type: String,
+      required: false,
+      default: '#4D655F'
+    }
+  },
+
+  data () {
+    const params = {
+      verticalLines: this.verticalLines,
+      horizontalLines: this.horizontalLines,
+      cellWidth: this.cellWidth,
+      lineWidth: this.lineWidth,
+      resolution: this.resolution,
+      speed: this.pulseSpeed,
+      pulseIntensity: this.pulseIntensity,
+      springing: this.interactionSpringing,
+      damping: this.interactionDamping,
+      interactionIntensity: this.interactionIntensity,
+      color: this.gridColor
+    }
+    return {
+      params,
+      ctx: false,
+      frame: 0,
+      frameId: false,
+      vectors: {
+        x: 0,
+        y: 0,
+        cgx: 0,
+        cgy: 0,
+        aX: 0,
+        aY: 0,
+        dx: 0,
+        dy: 0
+      }
+    }
+  },
+
+  computed: {
+    canvasWidth () {
+      const params = this.params
+      return (params.verticalLines * (params.cellWidth + params.lineWidth)) + params.cellWidth
+    },
+    canvasHeight () {
+      const params = this.params
+      return (params.horizontalLines * (params.cellWidth + params.lineWidth)) + params.cellWidth
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      const canvas = this.$refs.canvas
+      if (canvas) {
+        canvas.addEventListener('mousemove', (e) => { updateMousePosition(e, this) })
+      }
+      initCanvas(this, () => {
+        renderGridOnCanvas(this, 0)
+        this.animate()
+      })
+    })
+  },
+
+  beforeDestroy () {
+    if (this.frameId) { cancelAnimationFrame(this.frameId) }
+  },
+
+  methods: {
+    animate () {
+      this.frameId = requestAnimationFrame(this.animate)
+      if (!this.animationActive) {
+        return
+      }
+      if (this.frame % 2 === 0) {
+        renderGridOnCanvas(this, this.frame)
+      }
+      this.frame++
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.warped-grid-container {
+  canvas {
+    box-sizing: content-box;
+    border: solid 3px #4D655F;
+  }
+}
+</style>
diff --git a/packages/fe/modules/form/components/range.vue b/packages/fe/modules/form/components/range.vue
index 9f0b41e4..0051ab02 100644
--- a/packages/fe/modules/form/components/range.vue
+++ b/packages/fe/modules/form/components/range.vue
@@ -250,7 +250,6 @@ export default {
   cursor: grab;
   &:active {
     cursor: grabbing;
-    background-color: $mandysPink;
   }
 }
 
diff --git a/packages/fe/pages/about.vue b/packages/fe/pages/about.vue
index a1fa3ae5..1c9e4a50 100644
--- a/packages/fe/pages/about.vue
+++ b/packages/fe/pages/about.vue
@@ -48,7 +48,7 @@
 
         <div class="col-4_lg-3_sm-2_mi-1">
           <div class="panel-right">
-            <div class="warp-image-double" />
+            <WarpedGridColumn />
           </div>
         </div>
 
@@ -71,6 +71,7 @@ import Overlay from '@/components/overlay'
 import Squigglie from '@/components/squigglie'
 import Card from '@/components/card'
 import Infographic from '@/components/infographic'
+import WarpedGridColumn from '@/components/warped-grid-column'
 
 import AboutPageData from '@/content/pages/about.json'
 import AboutContent from '@/content/markdown/about.md'
@@ -85,7 +86,8 @@ export default {
     Overlay,
     Squigglie,
     Card,
-    Infographic
+    Infographic,
+    WarpedGridColumn
   },
 
   data () {
@@ -164,7 +166,6 @@ export default {
 // //////////////////////////////////////////////////////////////////////// Body
 #section-content {
   position: relative;
-  padding-bottom: 7.3125rem;
   border-top: 3px solid transparent;
   z-index: 10;
 }
@@ -186,6 +187,7 @@ export default {
 
 .cta-card-wrapper {
   cursor: pointer;
+  margin-bottom: 7.3125rem;
 }
 
 .apply-cta-card.corner-position__top-right {
@@ -282,15 +284,4 @@ export default {
   position: relative;
   height: 100%;
 }
-
-.warp-image-double {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 69rem;
-  height: 500rem;
-  background-image: url('~assets/images/warp-image-double.png');
-  background-position: top left;
-  background-size: 69rem;
-}
 </style>
diff --git a/packages/fe/pages/account/_username/applications.vue b/packages/fe/pages/account/_username/applications.vue
index 73b128cb..22299e9a 100644
--- a/packages/fe/pages/account/_username/applications.vue
+++ b/packages/fe/pages/account/_username/applications.vue
@@ -74,7 +74,7 @@
         <!-- ==================================================== Warp image -->
         <div class="col-2_mi-1">
           <div class="panel-right">
-            <div class="warp-image-double" />
+            <WarpedGridColumn />
           </div>
         </div>
 
@@ -102,6 +102,7 @@ import Limit from '@/components/search/limit'
 import Overlay from '@/components/overlay'
 import Spinner from '@/components/spinners/material-circle'
 import LoaderTripleDot from '@/components/spinners/triple-dot'
+import WarpedGridColumn from '@/components/warped-grid-column'
 
 import ApplicationsPageData from '@/content/pages/account-applications.json'
 
@@ -119,7 +120,8 @@ export default {
     Limit,
     Overlay,
     LoaderTripleDot,
-    Spinner
+    Spinner,
+    WarpedGridColumn
   },
 
   // meta: {
@@ -232,13 +234,13 @@ export default {
 // //////////////////////////////////////////////////////////////// Applications
 #section-applications {
   position: relative;
-  padding-bottom: 4.125rem;
   border-top: 3px solid transparent;
   z-index: 25;
 }
 
 .panel-left {
   padding-top: 9.375rem;
+  padding-bottom: 4.125rem;
 }
 
 ::v-deep .heading {
@@ -447,24 +449,7 @@ export default {
 // ////////////////////////////////////////////////////////////////// Warp Image
 .panel-right {
   position: relative;
-  top: -2.6875rem;
   height: 100%;
-  @include small {
-    top: -3.25rem;
-  }
 }
 
-.warp-image-double {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 18rem;
-  height: 500rem;
-  background-image: url('~assets/images/warp-image-double.png');
-  background-position: top left;
-  background-size: 40.5rem;
-  @include tiny {
-    width: calc(100% + 100vw * 0.041665 + 2rem);
-  }
-}
 </style>
diff --git a/packages/fe/pages/apply/index.vue b/packages/fe/pages/apply/index.vue
index 0d23a67f..a73ee563 100644
--- a/packages/fe/pages/apply/index.vue
+++ b/packages/fe/pages/apply/index.vue
@@ -38,7 +38,7 @@
 
         <div class="col-4_lg-3_sm-2_mi-1">
           <div class="panel-right">
-            <div class="warp-image-double" />
+            <WarpedGridColumn />
           </div>
         </div>
 
@@ -61,6 +61,7 @@ import ButtonA from '@/components/buttons/button-a'
 import ApplyFormCard from '@/components/apply-form-card'
 import Overlay from '@/components/overlay'
 import Squigglie from '@/components/squigglie'
+import WarpedGridColumn from '@/components/warped-grid-column'
 
 import ApplyPageData from '@/content/pages/apply.json'
 import FaqPageData from '@/content/pages/faq.json'
@@ -75,7 +76,8 @@ export default {
     ApplyFormCard,
     ButtonA,
     Overlay,
-    Squigglie
+    Squigglie,
+    WarpedGridColumn
   },
 
   data () {
@@ -237,6 +239,11 @@ $cardRadius: 1.875rem;
   .faq-top-border {
     top: -3px;
   }
+  .panel-right {
+    ::v-deep .warped-grid-column {
+      transform: translateY(-3px);
+    }
+  }
 }
 
 .section-accordion {
@@ -322,15 +329,8 @@ $cardRadius: 1.875rem;
   height: 100%;
 }
 
-.warp-image-double {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 69rem;
-  height: 500rem;
-  background-image: url('~assets/images/warp-image-double.png');
-  background-position: top left;
-  background-size: 69rem;
+::v-deep .warped-grid-column {
+  border-right: solid 3px $nandor;
 }
 
 // //////////////////////////////////////////////////////////////////////// Form
diff --git a/packages/fe/pages/apply/success.vue b/packages/fe/pages/apply/success.vue
index abdfa262..507a1ab6 100644
--- a/packages/fe/pages/apply/success.vue
+++ b/packages/fe/pages/apply/success.vue
@@ -46,7 +46,7 @@
         <!-- ==================================================== warp image -->
         <div class="col-2_mi-1">
           <div class="panel-right">
-            <div class="warp-image-double" />
+            <WarpedGridColumn />
           </div>
         </div>
 
@@ -68,6 +68,7 @@ import GithubIcon from '@/components/icons/github'
 import ButtonA from '@/components/buttons/button-a'
 import AppAccordion from '@/components/app-accordion'
 import Overlay from '@/components/overlay'
+import WarpedGridColumn from '@/components/warped-grid-column'
 
 import ApplySucessPageData from '@/content/pages/apply-success.json'
 
@@ -79,7 +80,8 @@ export default {
     GithubIcon,
     ButtonA,
     AppAccordion,
-    Overlay
+    Overlay,
+    WarpedGridColumn
   },
 
   data () {
@@ -235,24 +237,11 @@ export default {
 // ////////////////////////////////////////////////////////////////// Warp Image
 .panel-right {
   position: relative;
-  top: -2.6875rem;
   height: 100%;
-  @include small {
-    top: -3.25rem;
-  }
 }
 
-.warp-image-double {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 18rem;
-  height: 500rem;
-  background-image: url('~assets/images/warp-image-double.png');
-  background-position: top left;
-  background-size: 40.5rem;
-  @include tiny {
-    width: calc(100% + 100vw * 0.041665 + 2rem);
-  }
+::v-deep .warped-grid-column {
+  overflow: visible;
 }
+
 </style>
diff --git a/packages/fe/pages/faq.vue b/packages/fe/pages/faq.vue
index 77a27c42..eaa9eea2 100644
--- a/packages/fe/pages/faq.vue
+++ b/packages/fe/pages/faq.vue
@@ -47,7 +47,7 @@
 
         <div class="col-4_lg-3_sm-2_mi-1">
           <div class="panel-right">
-            <div class="warp-image-double" />
+            <WarpedGridColumn />
           </div>
         </div>
 
@@ -69,6 +69,7 @@ import FaqAccordion from '@/components/faq-accordion'
 import Overlay from '@/components/overlay'
 import Squigglie from '@/components/squigglie'
 import Card from '@/components/card'
+import WarpedGridColumn from '@/components/warped-grid-column'
 
 import FaqPageData from '@/content/pages/faq.json'
 
@@ -81,7 +82,8 @@ export default {
     FaqAccordion,
     Overlay,
     Squigglie,
-    Card
+    Card,
+    WarpedGridColumn
   },
 
   data () {
@@ -158,7 +160,6 @@ export default {
 // ///////////////////////////////////////////////////////////////////////// FAQ
 #section-faq {
   position: relative;
-  padding-bottom: 4.125rem;
   border-top: 3px solid transparent;
   z-index: 25;
 }
@@ -187,6 +188,7 @@ export default {
 
 .cta-card-wrapper {
   cursor: pointer;
+  padding-bottom: 4.125rem;
 }
 
 .apply-cta-card.corner-position__top-right {
@@ -227,14 +229,4 @@ export default {
   height: 100%;
 }
 
-.warp-image-double {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 69rem;
-  height: 500rem;
-  background-image: url('~assets/images/warp-image-double.png');
-  background-position: top left;
-  background-size: 69rem;
-}
 </style>
diff --git a/packages/fe/pages/index.vue b/packages/fe/pages/index.vue
index 14d21316..7871e04c 100644
--- a/packages/fe/pages/index.vue
+++ b/packages/fe/pages/index.vue
@@ -131,7 +131,7 @@
 
         <div class="col-3_sm-hidden">
           <div class="panel-left">
-            <div class="warp-image-double" />
+            <WarpedGridColumn />
           </div>
         </div>
 
@@ -166,6 +166,7 @@ import Roadmap from '@/components/page-index/roadmap'
 import ApplyFormCard from '@/components/apply-form-card'
 import Squigglie from '@/components/squigglie'
 import Overlay from '@/components/overlay'
+import WarpedGridColumn from '@/components/warped-grid-column'
 
 import IndexPageData from '@/content/pages/index.json'
 import ApplyPageData from '@/content/pages/apply.json'
@@ -179,7 +180,8 @@ export default {
     Roadmap,
     ApplyFormCard,
     Squigglie,
-    Overlay
+    Overlay,
+    WarpedGridColumn
   },
 
   data () {
@@ -463,6 +465,7 @@ section {
 .panel-left {
   position: relative;
   height: 100%;
+  transform: translateY(3px);
 }
 
 .textural-image {
@@ -476,6 +479,12 @@ section {
 // //////////////////////////////////////////////////// Section Subfooter Slider
 #section-subfooter-slider {
   overflow: hidden;
+  ::v-deep .warped-grid-column {
+    border-right: solid 3px $nandor;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
 }
 
 .card-container {
@@ -497,23 +506,6 @@ section {
   }
 }
 
-.panel-left {
-  position: relative;
-  height: 100%;
-  transform: translateY(3px);
-}
-
-.warp-image-double {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 69rem;
-  height: 500rem;
-  background-image: url('~assets/images/warp-image-double.png');
-  background-position: top left;
-  background-size: 69rem;
-}
-
 #apply-form-card {
   :deep(.panel) {
     &:before,