diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 2df7966e5..6c0d827fe 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -19,7 +19,7 @@ const Footer = ({
 }: Props): JSX.Element => (
   <Container
     role="grid"
-    className="max-w-full bg-gray-900 p-8 text-center text-light dark:bg-black lg:p-20"
+    className="bg-gradient-secondary max-w-full p-8 text-center text-light lg:p-20"
   >
     <Row align="middle" justify="center">
       <Col span={24}>
diff --git a/components/Footer/__snapshots__/Footer.test.tsx.snap b/components/Footer/__snapshots__/Footer.test.tsx.snap
index 68ed73c6e..916582db7 100644
--- a/components/Footer/__snapshots__/Footer.test.tsx.snap
+++ b/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Footer should render correctly (snapshot) 1`] = `
 <div>
   <div
-    class="p-auto container relative mx-auto my-0 block h-full max-w-full bg-gray-900 p-8 text-center text-light dark:bg-black lg:p-20"
+    class="p-auto container relative mx-auto my-0 block h-full bg-gradient-secondary max-w-full p-8 text-center text-light lg:p-20"
     role="grid"
   >
     <div
diff --git a/layouts/__snapshots__/Layout.test.tsx.snap b/layouts/__snapshots__/Layout.test.tsx.snap
index 352b1ed93..c6c8f45ed 100644
--- a/layouts/__snapshots__/Layout.test.tsx.snap
+++ b/layouts/__snapshots__/Layout.test.tsx.snap
@@ -418,7 +418,7 @@ exports[`Layout should render correctly (snapshot) 1`] = `
       </div>
     </div>
     <div
-      class="p-auto container relative mx-auto my-0 block h-full max-w-full bg-gray-900 p-8 text-center text-light dark:bg-black lg:p-20"
+      class="p-auto container relative mx-auto my-0 block h-full bg-gradient-secondary max-w-full p-8 text-center text-light lg:p-20"
       role="grid"
     >
       <div
diff --git a/layouts/__snapshots__/PostLayout.test.tsx.snap b/layouts/__snapshots__/PostLayout.test.tsx.snap
index 3ccd7c146..a029f153f 100644
--- a/layouts/__snapshots__/PostLayout.test.tsx.snap
+++ b/layouts/__snapshots__/PostLayout.test.tsx.snap
@@ -407,7 +407,7 @@ exports[`PostLayout should render correctly (snapshot) 1`] = `
       />
     </div>
     <div
-      class="p-auto container relative mx-auto my-0 block h-full max-w-full bg-gray-900 p-8 text-center text-light dark:bg-black lg:p-20"
+      class="p-auto container relative mx-auto my-0 block h-full bg-gradient-secondary max-w-full p-8 text-center text-light lg:p-20"
       role="grid"
     >
       <div
diff --git a/styles/globals.css b/styles/globals.css
index 5b52d76db..af8dffd96 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -90,6 +90,22 @@
     @apply bg-gradient-to-r from-indigo-700 to-red-500;
   }
 
+  .bg-gradient-secondary {
+    @apply border-b-5 border-solid border-primary;
+
+    background: linear-gradient(63deg, #262626 23%, transparent 0) 7px 0,
+      linear-gradient(63deg, transparent 73%, #262626 76%),
+      linear-gradient(
+        63deg,
+        transparent 34%,
+        #262626 38%,
+        #262626 58%,
+        transparent 62%
+      ),
+      #222;
+    background-size: 16px 48px;
+  }
+
   .flex-container {
     @apply flex flex-row flex-wrap content-center items-center justify-center;
   }