diff --git a/assets/css/main.scss b/assets/css/main.scss
index 12e1f88..a33f943 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -186,6 +186,15 @@ blockquote {
   --color-rating-5: #87deaa;
   --color-highlight-color: var(--color-text);
   --color-highlight-background: #254e50;
+
+  // top gradient
+  $primary_dimmed: mix(#e84a72, #16161c, 70%);
+  --top-gradient: linear-gradient(
+    90deg,
+    #{$primary_dimmed},
+    #{adjust-hue($primary_dimmed, 120deg)},
+    #{adjust-hue($primary_dimmed, 240deg)}
+  );
 }
 
 :root.light {
@@ -221,4 +230,13 @@ blockquote {
   --color-rating-5: #{adjust-hue($rating, -40deg)};
   --color-highlight-color: var(--color-text);
   --color-highlight-background: #fab795;
+
+  // top gradient
+  $primary_dimmed: mix(#e84a72, #fce9e4, 70%);
+  --top-gradient: linear-gradient(
+    90deg,
+    #{$primary_dimmed},
+    #{adjust-hue($primary_dimmed, 120deg)},
+    #{adjust-hue($primary_dimmed, 240deg)}
+  );
 }
diff --git a/components/layout/LayoutHeader.vue b/components/layout/LayoutHeader.vue
index c53da69..2152d9c 100644
--- a/components/layout/LayoutHeader.vue
+++ b/components/layout/LayoutHeader.vue
@@ -11,7 +11,7 @@
 <style lang="scss" module>
 .header {
   text-align: left;
-  padding: 22px 0;
+  padding: 22px 0 20px;
 
   a {
     color: var(--color-text);
diff --git a/layouts/landing.vue b/layouts/landing.vue
index af06ce6..3db2414 100644
--- a/layouts/landing.vue
+++ b/layouts/landing.vue
@@ -28,6 +28,17 @@
   z-index: 10;
   backdrop-filter: blur(5px);
 
+  &::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--top-gradient);
+    z-index: 2;
+  }
+
   &::after {
     content: "";
     position: absolute;