diff --git a/assets/icons/logo.svg b/assets/icons/logo.svg
new file mode 100644
index 0000000..d72b3ce
--- /dev/null
+++ b/assets/icons/logo.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xml:space="preserve"
+     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+>
+    <g transform="matrix(1,0,0,1,-545.224,-0.534483)">
+        <g id="Black" transform="matrix(1,0,0,1.00392,545.224,0.534483)">
+            <rect x="0" y="0" width="512" height="510" style="fill:none;"/>
+            <g transform="matrix(1.27586,0,0,1.27586,-53.8276,-82.3151)">
+                <g transform="matrix(1,0,0,1,-42.5,4.98047)">
+                    <g transform="matrix(0.596154,-2.4259e-18,9.91409e-19,1.0791,243.308,-21.582)">
+                        <path d="M145,200L210,320L80,320L145,200ZM97.099,312.986L192.901,312.986L145,224.554L97.099,312.986Z"/>
+                    </g>
+                    <g transform="matrix(-0.596154,7.51485e-17,-1.33661e-16,-1.0791,470.192,539.551)">
+                        <path d="M145,200L210,320L80,320L145,200ZM192.901,312.986L145,224.554L97.099,312.986L192.901,312.986Z"/>
+                    </g>
+                </g>
+                <g transform="matrix(0.898337,0,0,1,-6.61642,5.81503)">
+                    <g transform="matrix(6.12323e-17,-0.996094,0.541667,3.3038e-17,81.6667,403.418)">
+                        <path d="M145,200L210,320L80,320L145,200ZM145,220.991L99.829,304.384L190.171,304.384L145,220.991Z"/>
+                    </g>
+                    <g transform="matrix(6.12323e-17,0.996094,-0.541667,3.3038e-17,298.333,114.551)">
+                        <path d="M145,200L210,320L80,320L145,200ZM190.171,304.384L145,220.991L99.829,304.384L190.171,304.384Z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/components/AnimatedLogo.vue b/components/AnimatedLogo.vue
deleted file mode 100644
index d076d69..0000000
--- a/components/AnimatedLogo.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <div class="animated-logo">
-    <svg class="animated-logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="76.75 182.661 358.5 146.679">
-      <path
-        class="animated-logo__m1"
-        d=" M 121.75 182.749 L 166.75 329.339 L 76.75 329.339 L 121.75 182.749 Z "
-        fill-rule="evenodd"
-        fill="currentColor"
-      />
-      <path
-        class="animated-logo__m2"
-        d=" M 206.75 182.749 L 251.75 329.339 L 161.75 329.339 L 206.75 182.749 Z "
-        fill-rule="evenodd"
-        fill="currentColor"
-      />
-      <path
-        class="animated-logo__r1"
-        d=" M 327.25 182.705 L 372.25 329.295 L 282.25 329.295 L 327.25 182.705 Z "
-        fill-rule="evenodd"
-        fill="currentColor"
-      />
-      <path
-        class="animated-logo__r2"
-        d=" M 390.537 329.339 L 345.25 182.837 L 435.25 182.661 L 390.537 329.339 Z "
-        fill-rule="evenodd"
-        fill="currentColor"
-      />
-    </svg>
-    <div class="animated-logo__name">
-      Moritz Ruth
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-  @use "~@/assets/styles/colors";
-
-  $scale-up-duration: 800ms;
-  $slide-delay: 200ms;
-  $slide-duration: 800ms;
-  $fade-duration: 400ms;
-  $fade-delay: $slide-delay + 300ms;
-  $slide-length: 37.5%;
-  $fade-name-delay: $fade-delay;
-  $fade-name-duration: 300ms;
-
-  .animated-logo {
-    width: 300px;
-    max-width: 60vw;
-    padding: 40px 40px 30px;
-  }
-
-  .animated-logo__svg {
-    width: 100%;
-    color: colors.$background-c;
-
-    margin-bottom: 20px;
-    animation: scaleUp $scale-up-duration ease-out both;
-  }
-
-  .animated-logo__m1, .animated-logo__r2 {
-    animation: slideFromRight $slide-duration $slide-delay ease both;
-  }
-
-  .animated-logo__r2 {
-    animation-name: slideFromLeft;
-  }
-
-  .animated-logo__m2, .animated-logo__r1 {
-    animation: fadeIn $fade-duration $fade-delay ease both;
-    transform: translateX(5px);
-  }
-
-  .animated-logo__m2 {
-    animation-delay: $fade-delay + 100ms;
-  }
-
-  .animated-logo__name {
-    font-size: 2rem;
-    animation: fadeIn $fade-name-duration $fade-name-delay ease both;
-    text-align: center;
-  }
-
-  @keyframes scaleUp {
-    from {
-      transform: scale(0);
-    }
-
-    to {
-      transform: scale(1);
-    }
-  }
-
-  @keyframes slideFromRight {
-    from {
-      transform: translateX(#{$slide-length});
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideFromLeft {
-    from {
-      transform: translateX(#{$slide-length * -1});
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    name: "AnimatedLogo"
-  }
-</script>
diff --git a/components/NavigationBar.vue b/components/NavigationBar.vue
index 84f1692..b707188 100644
--- a/components/NavigationBar.vue
+++ b/components/NavigationBar.vue
@@ -70,8 +70,6 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 30px 0 20px;
-
-    background: colors.$background;
   }
 
   .navigation-bar__toggle {
diff --git a/pages/index.vue b/pages/index.vue
index e268f7a..07f75e4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="index-page">
-    <canvas ref="canvas" class="index-page__background"/>
+    <div class="index-page__background">
+      <canvas ref="canvas"/>
+      <div class="index-page__background-vignette"></div>
+    </div>
     <main class="index-page__content">
-      <AnimatedLogo/>
+      <Logo class="index-page__logo"/>
+      <span class="index-page__name">Moritz Ruth</span>
       <div class="index-page__socials">
         <a
           class="index-page__social"
@@ -49,6 +53,17 @@
     left: 0;
     right: 0;
     bottom: 0;
+
+    overflow: hidden;
+  }
+
+  .index-page__background-vignette {
+    background: radial-gradient(transparent, colors.$background 80%);
+    position: absolute;
+    top: -100px;
+    left: 0;
+    right: 0;
+    bottom: -100px;
   }
 
   .index-page__content {
@@ -61,6 +76,22 @@
     height: calc(90vh - var(--navigation-bar-height));
   }
 
+  .index-page__logo {
+    height: 400px;
+    margin: -120px 0;
+    width: 100%;
+
+    position: relative;
+    left: 12px;
+    pointer-events: none;
+  }
+
+  .index-page__name {
+    font-size: 2.4rem;
+    margin-top: 10px;
+    margin-bottom: 20px;
+  }
+
   .index-page__socials {
     padding: 20px;
     display: flex;
@@ -109,21 +140,21 @@
 
 <script>
   import { ShapedCanvas } from "shaped.js"
-  import AnimatedLogo from "@/components/AnimatedLogo"
   import { footerItems } from "assets/js/footer-items"
   import InstagramIcon from "@/assets/icons/instagram.svg"
   import TwitterIcon from "@/assets/icons/twitter.svg"
   import NPMIcon from "@/assets/icons/npm.svg"
   import GitHubIcon from "@/assets/icons/github.svg"
   import EmailIcon from "@/assets/icons/email.svg"
+  import Logo from "@/assets/icons/logo.svg"
 
   export default {
     name: "IndexPage",
-    components: { AnimatedLogo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
+    components: { Logo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
     mounted() {
       const shaped = new ShapedCanvas(this.$refs.canvas, {
         useWindowSize: true,
-        colors: ["#BB2081", "#14AAD8"],
+        colors: ["#d21b8d", "#14AAD8"],
         minCount: 8,
         probability: 1 / 30000,
         height: 1,