diff --git a/assets/_mixins.scss b/assets/_mixins.scss
new file mode 100644
index 0000000..793556f
--- /dev/null
+++ b/assets/_mixins.scss
@@ -0,0 +1,9 @@
+@mixin arrow($length, $angle, $color) {
+  border-color: $color;
+  border-bottom: solid;
+  border-right: solid;
+  border-width: 2px;
+  width: $length;
+  height: $length;
+  transform: rotate($angle + -135deg);
+}
diff --git a/layouts/secondLevel.vue b/layouts/secondLevel.vue
index e9bc809..5fecb91 100644
--- a/layouts/secondLevel.vue
+++ b/layouts/secondLevel.vue
@@ -15,13 +15,22 @@
 
 <style scoped lang="scss">
   @import "~@/assets/_responsive";
+  @import "~@/assets/_colors";
+  @import "~@/assets/_mixins";
 
   #layout {
     .button {
       &::before {
-        content: "←";
-        transform: scale(2.4) translateY(-2px);
+        content: "";
         display: inline-block;
+        margin-right: -5px;
+        @include arrow(12px, -90deg, white);
+      }
+
+      &:hover {
+        &::before {
+          border-color: $c-background;
+        }
       }
 
       position: fixed;
diff --git a/pages/index.vue b/pages/index.vue
index 73f0958..8616f91 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -51,7 +51,8 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~@/assets/_responsive.scss";
+  @import "~@/assets/_responsive";
+  @import "~@/assets/_mixins";
 
   main {
     height: 100%;
@@ -78,10 +79,11 @@
         margin: 10px;
 
         &::before {
-          content: "→";
-          transform: translateY(-4px) scale(1.7);
+          content: "";
           display: inline-block;
-          margin-right: 5px;
+          margin-right: 10px;
+          margin-left: -5px;
+          @include arrow(12px, 90deg, white);
         }
       }
     }