diff --git a/Webauftritt/eportfolio/impressions.html b/Webauftritt/eportfolio/impressions.html
index 47f472c..0e31145 100644
--- a/Webauftritt/eportfolio/impressions.html
+++ b/Webauftritt/eportfolio/impressions.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Beispiele</title>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/png" href="/curling_logo.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Curling E-Portfolio</title>
 </head>
 <body class="bg-primary flex flex-col min-h-screen">
 
diff --git a/Webauftritt/eportfolio/main.js b/Webauftritt/eportfolio/main.js
index 19c9d72..00b9849 100644
--- a/Webauftritt/eportfolio/main.js
+++ b/Webauftritt/eportfolio/main.js
@@ -1,2 +1,6 @@
 import './style.scss';
 
+function Menu(e) {
+    let list = document.querySelector('ul');
+    e.name === 'menu' ? (e.name = "close", list.classList.add('top-[80px]') , list.classList.add('opacity-100')) : (e.name = "menu" , list.classList.remove('top-[80px]'), list.classList.remove('opacity-100'))
+}
\ No newline at end of file
diff --git a/Webauftritt/eportfolio/partials/nav.hbs b/Webauftritt/eportfolio/partials/nav.hbs
index a68e116..f93596c 100644
--- a/Webauftritt/eportfolio/partials/nav.hbs
+++ b/Webauftritt/eportfolio/partials/nav.hbs
@@ -1,9 +1,56 @@
-<nav class="bg-navbackground h-32 text-right flex flex-row justify-between items-center px-20">
-    <a href="index.html"> <img src="/curling_logo.png" alt="Logo" class="h-28"/></a>
-    <div class="flex justify-between w-1/3 text-textcolor">
-        <a href="index.html" class="{{#if homeActive}}font-bold{{/if}}">Home</a>
-        <a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
-        <a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
-        <a href="impressions.html" class="{{#if impressionsActive}}font-bold{{/if}}">Impressionen</a>
+<nav class="p-5 bg-navbackground shadow md:flex md:items-center md:justify-between">
+    <div class="flex justify-between items-center ">
+        <a href="index.html"> <img src="/curling_logo.png" alt="Logo" class="h-28"/></a>
+
+        <span class="text-3xl cursor-pointer mx-2 md:hidden block">
+        <img src="/menu.svg" onclick="function Menu(e){
+            let element = document.getElementById('menu-mobile');
+            element.classList.remove('opacity-0');
+            element.classList.remove('pointer-events-none');
+        }
+            Menu(this)"/>
+      </span>
     </div>
+
+    <ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute text-textcolor w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500">
+        <li class="mx-4 my-6 md:my-0">
+            <a href="index.html" class="{{#if homeActive}}font-bold{{/if}}">Home</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="impressions.html" class="{{#if impressionsActive}}font-bold{{/if}}">Impressionen</a>
+        </li>
+    </ul>
+
+    <ul id="menu-mobile"
+        class="pointer-events-none opacity-0 fixed backdrop-blur top-0 left-0 right-0 bottom-0 md:hidden flex flex-col items-center content-center text-textcolor">
+        <li class="mx-4 mb-6 mt-10 md:my-0">
+            <img src="/close.svg" class="top-10" onclick="function Menu(e){
+                let element = document.getElementById('menu-mobile');
+                element.classList.add('opacity-0');
+                element.classList.add('pointer-events-none');
+            }
+                Menu(this)"/>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <img src="/curling_logo.png" alt="Logo" class="h-28"/>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="index.html" class="{{#if homeActive}}font-bold{{/if}}">Home</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
+        </li>
+        <li class="mx-4 my-6 md:my-0">
+            <a href="impressions.html" class="{{#if impressionsActive}}font-bold{{/if}}">Impressionen</a>
+        </li>
+    </ul>
 </nav>
\ No newline at end of file
diff --git a/Webauftritt/eportfolio/public/close.svg b/Webauftritt/eportfolio/public/close.svg
new file mode 100644
index 0000000..3072e7b
--- /dev/null
+++ b/Webauftritt/eportfolio/public/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="m16.5 33.6 7.5-7.5 7.5 7.5 2.1-2.1-7.5-7.5 7.5-7.5-2.1-2.1-7.5 7.5-7.5-7.5-2.1 2.1 7.5 7.5-7.5 7.5ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm0-3q7.1 0 12.05-4.975Q41 31.05 41 24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24 41Zm0-17Z"/></svg>
\ No newline at end of file
diff --git a/Webauftritt/eportfolio/public/menu.svg b/Webauftritt/eportfolio/public/menu.svg
new file mode 100644
index 0000000..a3fec61
--- /dev/null
+++ b/Webauftritt/eportfolio/public/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"/></svg>
\ No newline at end of file
diff --git a/Webauftritt/eportfolio/rules.html b/Webauftritt/eportfolio/rules.html
index 68ff847..1b38141 100644
--- a/Webauftritt/eportfolio/rules.html
+++ b/Webauftritt/eportfolio/rules.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Rules</title>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/png" href="/curling_logo.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Curling E-Portfolio</title>
 </head>
 <body class="bg-primary flex flex-col min-h-screen">
 
@@ -12,7 +14,7 @@
 
     <h1 class="flex justify-center">Regeln</h1>
 
-    <div class="h-full grid grid-cols-3 gap-0.5 content-start p-16">
+    <div class="h-full grid grid-cols-1 md:grid-cols-3 gap-0.5 content-start p-16">
         {{> ruleitem
         image="/rules/fgz.svg"
         imageAlt="Free Guard Zone"
diff --git a/Webauftritt/eportfolio/spiritofcurling.html b/Webauftritt/eportfolio/spiritofcurling.html
index 185f594..4ffd981 100644
--- a/Webauftritt/eportfolio/spiritofcurling.html
+++ b/Webauftritt/eportfolio/spiritofcurling.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Spirit of Curling</title>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/png" href="/curling_logo.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Curling E-Portfolio</title>
 </head>
 <body class="bg-primary flex flex-col min-h-screen">
 
diff --git a/Webauftritt/eportfolio/tailwind.config.cjs b/Webauftritt/eportfolio/tailwind.config.cjs
index 64a865a..8c34e4f 100644
--- a/Webauftritt/eportfolio/tailwind.config.cjs
+++ b/Webauftritt/eportfolio/tailwind.config.cjs
@@ -12,9 +12,7 @@ module.exports = {
             },
             fontSize: {
                 's-h1': '50px',
-                h1: '56px',
-                's-h2': '60px',
-                h2: '60px'
+                h1: '56px'
             }
         },
     },
