diff --git a/src/app.scss b/src/app.scss
index a205755..56b26e3 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -69,6 +69,11 @@ button.transparent,
   background: linear-gradient(to top, $slate-800, #00000000);
 }
 
+.top-button.show {
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
 #nprogress .bar {
   background: #398711 !important;
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cb7eab4..2dc843f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
   import { page } from '$app/stores';
   import "nprogress/nprogress.css";
   import { smoothScrollTo, handleKeydown } from "$lib/common";
+  import IconChevronUp from 'svelte-material-icons/ChevronUp.svelte';
 
   import { fly } from "svelte/transition";
   import { onMount } from "svelte";
@@ -28,18 +29,6 @@
   }
 
   onMount(() => {
-    function smoothScrollTo(elementId) {
-      document.getElementById(elementId).scrollIntoView({
-        behavior: "smooth",
-      });
-    }
-
-    function handleKeydown(elementId, event) {
-      if (event.key === "Enter") {
-        smoothScrollTo(elementId);
-      }
-    }
-
     function toggleTopButton() {
       const topButton = document.querySelector(".top-button");
       if (window.scrollY >= window.innerHeight) {
@@ -73,7 +62,7 @@
     on:click={() => smoothScrollTo("header")}
     on:keydown={(event) => handleKeydown("header", event)}
   >
-    Top
+    <IconChevronUp size="1.5em" />
   </a>
 
   <footer>
@@ -118,14 +107,20 @@
   }
 
   .top-button {
-    display: none;
+    display: flex;
+    visibility: hidden;
     position: fixed;
+    width: 2.5em;
+    height: 2.5em;
     bottom: 1em;
     right: 1em;
-
-    &.show {
-      display: inline-block;
-    }
+    z-index: 999;
+    opacity: 0;
+    padding: 0;
+    transition: 0.2s ease-in-out;
+    border-radius: 1000px;
+    align-items: center;
+    justify-content: center;
   }
 
   @media (min-width: 480px) {