diff --git a/src/assets/tilted-rectangle.webp b/src/assets/tilted-rectangle.webp
deleted file mode 100644
index 8fb7a45..0000000
Binary files a/src/assets/tilted-rectangle.webp and /dev/null differ
diff --git a/src/components/Home/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro
index e7b747c..23d1a2e 100644
--- a/src/components/Home/Meme/Meme.astro
+++ b/src/components/Home/Meme/Meme.astro
@@ -7,7 +7,7 @@ import meme3 from '../../../assets/meme-3.png';
 import meme4 from '../../../assets/meme-4.png';
 ---
 
-<div id="home-meme">
+<div id="home-meme" class="tilted-bg">
   <div class="meme-text feature-group">
     <h2>TITLE</h2>
     <h3>Building a new world for your data</h3>
diff --git a/src/components/Home/Meme/Meme.scss b/src/components/Home/Meme/Meme.scss
index 0a6fc3a..ec60bfb 100644
--- a/src/components/Home/Meme/Meme.scss
+++ b/src/components/Home/Meme/Meme.scss
@@ -6,8 +6,6 @@
   align-items: center;
   padding: 8% 12%;
   @include fluid-font-size(1.3125rem);
-  background-image: url("../../../assets/tilted-rectangle.webp");
-  background-size: 100% 100%;
 }
 
 .meme-text {
diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
index 5f83d9b..338a759 100644
--- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
+++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.astro
@@ -2,7 +2,7 @@
 import "./WhatIsWeb3.scss";
 ---
 
-<section id="home-whatisweb3">
+<section id="home-whatisweb3" class="tilted-bg">
     <div class="background"></div>
     <div class="feature-group">
         <h2>
diff --git a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
index 8534eb8..c800189 100644
--- a/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
+++ b/src/components/Home/WhatIsWeb3/WhatIsWeb3.scss
@@ -29,12 +29,9 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: relative;
   height: 32.42em;
   margin-top: 2.48em;
   @include fluid-font-size(1.3125rem);
-  background-image: url("../../../assets/tilted-rectangle.webp");
-  background-size: 100% 100%;
 
   .background {
     position: absolute;
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index a3df13d..b1af6b1 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,4 +1,5 @@
 $body-bg: #031418;
+$body-bg-darker: #020d11;
 
 $primary-dark: #000;
 $primary-light: #fff;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index c3e7638..ec2bd88 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -234,10 +234,11 @@ main.vision {
     justify-content: center;
     padding: 2.95em 1.95em;
     color: var(--white);
-    background: #020e10;
+    background: $body-bg-darker;
     border: 0.05em solid transparent;
     border-radius: 0.5em;
     font-family: var(--font-family-jaldi);
+    transition: border-color 200ms;
 
     &:hover {
       border-color: var(--aquamarine);
@@ -255,4 +256,21 @@ main.vision {
     line-height: 123.81%;
     color: var(--cloud);
   }
-}
\ No newline at end of file
+}
+
+.tilted-bg {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -5%;
+    bottom: 0;
+    left: -5%;
+    margin: 2% 0;
+    background: $body-bg-darker;
+    transform: matrix(1, -0.04, 0.04, 1, 0, 0);
+    z-index: -1;
+  }
+}