diff --git a/Pages/Index.razor b/Pages/Index.razor
index a23e84e..76a5cd9 100644
--- a/Pages/Index.razor
+++ b/Pages/Index.razor
@@ -9,11 +9,10 @@
         <center><h1>Herzlich Willkommen!</h1></center>
 
         <img src="assets/Logo_new.png" class="img" title="logo image">
-        
+
         <form action="Speisekarte">
             <input type="submit" value="Zur Speisekarte" class="btn" />
-        </form>
-        
+      </form>
     </div>
 
 </body>
diff --git a/Pages/Speisekarte.razor b/Pages/Speisekarte.razor
new file mode 100644
index 0000000..f6d954d
--- /dev/null
+++ b/Pages/Speisekarte.razor
@@ -0,0 +1,124 @@
+@page "/Speisekarte"
+
+<div class="row justify-content-center">
+    <div class="col-lg-2 col-md-4 col-sm-12 tablecolumn">
+        <table class="table table-light overflow-hidden">
+            <thead>
+                <tr>
+                    <th scope="col">Chinesisch</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><a href="">Nudeln</a></td>
+                </tr>
+                <tr>
+                    <td><a href="">Reis</a></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><a href="">Nachspeisen</a></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="col-lg-2 col-md-4 col-sm-12 tablecolumn">
+        <table class="table table-light overflow-hidden">
+            <thead>
+                <tr>
+                    <th scope="col">Japanisch</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><a href="">Sushi & Maki</a></td>
+                </tr>
+                <tr>
+                    <td><a href="">Bento</a></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><a href="">Nachspeisen</a></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+            </tbody>
+            </table>
+    </div>
+    <div class="col-lg-2 col-md-4 col-sm-12 tablecolumn">
+        <table class="table table-light overflow-hidden">
+            <thead>
+                <tr>
+                    <th scope="col">Getränke</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><a href="">Alkoholfrei</a></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><a href="">Alkoholisch</a></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="col-lg-2 col-md-4 col-sm-12 tablecolumn">
+        <table class="table table-light overflow-hidden">
+            <thead>
+                <tr>
+                    <th scope="col">Sonstiges</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><a href="">Schnitzel</a></td>
+                </tr>
+                <tr>
+                    <td><a href="">Pommes</a></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><a href="">Bowl</a></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+                <tr>
+                    <td class="lowest"><br></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+@code {
+
+}
diff --git a/Pages/Speisekarte.razor.css b/Pages/Speisekarte.razor.css
new file mode 100644
index 0000000..b93d72d
--- /dev/null
+++ b/Pages/Speisekarte.razor.css
@@ -0,0 +1,33 @@
+.table {
+    text-align: center;
+    border-radius: 30px;
+}
+
+a {
+    color: black;
+    text-decoration: none;
+}
+
+a:hover, a:focus {
+    color: #2A6496;
+    text-decoration: underline;
+}
+
+th {
+    background-color: #89f9a5;
+    border: 0px;
+}
+
+td {
+    border-color: black;
+    padding: 30px 0;
+}
+
+.lowest {
+    border: 0px;
+}
+
+.tablecolumn {
+    margin-left: 3%;
+    margin-right: 3%;
+}
\ No newline at end of file