diff --git a/src/css/custom.css b/src/css/custom.css
index 31cb7341..72627842 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,7 +6,7 @@
  */
 
 /* You can override the default Infima variables here. */
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Press+Start+2P&display=swap|');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Press+Start+2P&display=swap|');
 
 :root {
   --ifm-color-primary: #ff0077;
@@ -155,14 +155,18 @@ body,
     overflow: hidden;
     z-index: 2;
   }
-  [class^='sidebar'] a {
-    font-size: 0.8rem;
-    transition: color 0.2s ease;
+  .main-wrapper [role='complementary'] [class^='sidebar'] a {
+    /* font-size: 0.8rem; */
+    transition: all 0.2s 0s ease-in;
+  }
+  .main-wrapper [role='complementary'] [class^='sidebar'] a:hover {
+    /* color: #ff3392; */
+    /* transition: color 0.2s ease; */
   }
   .main-wrapper [role='complementary'] [class^='sidebar']:hover {
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
   }
-  [class^='sidebar']:before {
+  /* [class^='sidebar']:before {
     content: '';
     position: absolute;
     display: none;
@@ -176,37 +180,37 @@ body,
       45deg,
       transparent,
       rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.07),
+      rgba(255, 255, 255, 0.06),
       rgba(255, 255, 255, 0),
       transparent
     );
-    transition: all 0.6s 0.4s ease-in-out;
+    transition: all 0.4s 0.3s ease-in-out;
     z-index: 1;
   }
   .main-wrapper [role='complementary'] [class^='sidebar']:after {
     content: '';
     position: absolute;
-    /* display: block; */
+    display: block;
     top: 0;
     left: -120%;
     width: 100%;
     height: 100%;
-    filter: blur(15px);
+    filter: blur(5px);
     background: linear-gradient(
       45deg,
       transparent,
       rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.12),
+      rgba(255, 255, 255, 0.05),
       rgba(255, 255, 255, 0),
       transparent
     );
-    transition: all 0.4s 0.1s ease-in-out;
+    transition: all 0.3s 0.1s ease-in-out;
     z-index: 1;
   }
   .main-wrapper [role='complementary'] [class^='sidebar']:hover:before,
   .main-wrapper [role='complementary'] [class^='sidebar']:hover:after {
     left: 120%;
-  }
+  } */
 }
 
 @media (min-width: 1280px) {
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index 35abdca3..3c046425 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -89,6 +89,9 @@
   justify-content: center;
   padding-bottom: 75px;
 }
+.imageWrapper a:active {
+  background: transparent;
+}
 @media (min-width: 1280px) {
   .imageWrapper {
     margin-bottom: 0;
@@ -108,14 +111,13 @@
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  font-family: 'Press Start 2P', cursive;
   height: 250px;
   width: 250px;
   z-index: 3;
   top: 0;
   left: 0;
   overflow: hidden;
-  transform: translate3d(0, 0, 0);
+  text-transform: uppercase;
   transition: transform 0s 0.3s ease-in-out, opacity 0.2s 0.1s ease-in-out;
 }
 @media (min-width: 1440px) {
@@ -154,15 +156,17 @@
   }
 }
 .imageWrapper div h3 {
-  background: rgba(255, 255, 255, 0.1);
+  background: #5a32e6;
   backdrop-filter: blur(7px);
-  border-radius: 5px;
+  border-radius: 4px;
+  font-family: var(--mf-font-body);
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.08rem;
   position: relative;
   color: #a5b9f6;
   display: block;
-  font-size: 0.8rem;
-  font-weight: 100;
-  padding: 8px 10px;
+  padding: 10px 15px;
   margin-bottom: 0;
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
   /* transform: translate3d(0, 275px, 0); */
@@ -175,7 +179,7 @@
 }
 
 .imageWrapper a:hover h3 {
-  background: rgba(255, 255, 255, 0.15);
+  background: #5a32e660;
 }
 
 .featureImage {