diff --git a/index.html b/index.html
index 3fb6745..46462eb 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="inhalte/designes/index.css">
+    <link rel="stylesheet" type="text/css" href="inhalte/designes/webfont-all.css">
     <title>Epic-Sax</title>
 </head>
 
@@ -12,6 +13,7 @@
             <h2>Willkommen auf</h2>
             <h1>Epic-Sax</h1>
         </div>
+        <div class="arrow"></div>
     </div>
     <div class="page history">
         <h1>Geschichte</h1>
diff --git a/inhalte/designes/index.css b/inhalte/designes/index.css
index 30d3e52..1d4c17a 100644
--- a/inhalte/designes/index.css
+++ b/inhalte/designes/index.css
@@ -15,8 +15,7 @@ div.page {
     width: 100%;
     height: 100%;
 
-    /* border: 5px solid red;
-    box-sizing: border-box; */
+
 }
 
 /*### HOME #########################################################################*/
@@ -131,3 +130,30 @@ div.saxophones div.saxophone > img {
     height: inherit;
 }
 
+/*#### scroll #### */
+
+.arrow::before{
+    content: 'Space';
+    color: grey;
+    position: absolute;
+    opacity: 0.8;
+    text-shadow: 0 0 .5rem rgba(0,0,0,0.5);
+    width: 6rem;
+    font-size: 2rem;
+    height: 4rem;
+    line-height: 4rem;
+    text-align: center;
+    bottom: 2rem;
+    margin-left: -3rem;
+    left: 50%;
+    animation: bounce 1s ease infinite;
+  }
+  
+  @keyframes bounce {
+    50% {
+      transform: translateY(-50%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
\ No newline at end of file
