diff --git a/Webauftritt/eportfolio/partials/nav.hbs b/Webauftritt/eportfolio/partials/nav.hbs
index 2bb9448..3c89b80 100644
--- a/Webauftritt/eportfolio/partials/nav.hbs
+++ b/Webauftritt/eportfolio/partials/nav.hbs
@@ -1,5 +1,5 @@
 <nav class="bg-navbackground h-32 text-right flex flex-row justify-between items-center px-20">
-    <img src="./public/curling_logo.png" alt="Logo" class="h-28"/>
+    <img src="/curling_logo.png" alt="Logo" class="h-28"/>
     <div class="flex justify-between w-1/2 text-textcolor">
         <a href="index.html" class="nav-item {{#if homeActive}}font-bold{{/if}}">Home</a>
         <a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
diff --git a/Webauftritt/eportfolio/public/example_rule.png b/Webauftritt/eportfolio/public/example_rule.png
new file mode 100644
index 0000000..441eed4
Binary files /dev/null and b/Webauftritt/eportfolio/public/example_rule.png differ
diff --git a/Webauftritt/eportfolio/rules.html b/Webauftritt/eportfolio/rules.html
index 8413e1b..862d866 100644
--- a/Webauftritt/eportfolio/rules.html
+++ b/Webauftritt/eportfolio/rules.html
@@ -10,6 +10,74 @@
 
 <h1 class="flex justify-center">Regeln</h1> <!--todo refine the positioning of text on page-->
 
+<div class="h-60 flex justify-between items-center px-40 mb-14 mt-auto"
+     style="background: #9AD1D4;
+  background: linear-gradient(180deg, #9AD1D4 50%, #007EA7 50%);">
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3>Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3 class="text-center">Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3>Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+</div>
+
+<div class="h-60 bg-banner flex justify-between items-center px-40 mb-14 mt-auto">
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3>Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3 class="text-center">Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3>Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+</div>
+
 <script type="module" src="/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Webauftritt/eportfolio/spiritofcurling.html b/Webauftritt/eportfolio/spiritofcurling.html
index 5edafff..85785b2 100644
--- a/Webauftritt/eportfolio/spiritofcurling.html
+++ b/Webauftritt/eportfolio/spiritofcurling.html
@@ -8,7 +8,12 @@
 
 {{> nav spiritActive=true}}
 
-<h1 class="flex justify-center">Spirit of Curling</h1> <!--todo refine the positioning of text on page-->
+<div class="flex flex-col">
+    <h1 class="flex justify-center">Spirit of Curling</h1> <!--todo refine the positioning of text on page-->
+    <p class="flex justify-center text-center w-6/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, enim sed sodales egestas,
+        leo nisl dictum libero, nec finibus ipsum enim viverra nunc. Aenean posuere augue nec bibendum iaculis.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+</div>
 
 <script type="module" src="/main.js"></script>
 </body>