diff --git a/Dockerfile b/Dockerfile
index 0a7d3a0..4f11f93 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,10 +14,10 @@ RUN --mount=type=cache,target=/root/.cache/pip pip install --no-cache-dir -r req
 FROM base AS dev
 
 # Make port 5000 available to the world outside this container
-EXPOSE 5000
+EXPOSE 5001
 
 # Define environment variable
 ENV NAME World
 
 # Run app.py when the container launches
-CMD ["flask", "run", "--host=0.0.0.0"]
+CMD ["flask", "run", "--host=0.0.0.0", "--port=5002"]
diff --git a/app.py b/app.py
index 3c6d422..44694f5 100644
--- a/app.py
+++ b/app.py
@@ -84,6 +84,17 @@ def repository_page(folder):
     else:
         return f"Documentation not found for repository folder: {folder}"
 
+@app.route('/contact')
+def contact():
+    return render_template('pages/contact.html')
+
+@app.route('/about')
+def about():
+    return render_template('pages/about.html')
+
+@app.route('/pages/strongholdkingdoms')
+def strongholdkingdoms():
+    return render_template('pages/strongholdkingdoms.html')
 
 if __name__ == "__main__":
     _clone_repositories()
diff --git a/docker-compose.yml b/docker-compose.yml
index 3b0f3ea..cf500d0 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,4 +5,5 @@ services:
       context: .
       target: dev  # specify the build target if needed
     ports:
-      - "5000:5000"
+      - "5002:5002"
+    command: ["flask", "run", "--host=0.0.0.0", "--port=5002"]
diff --git a/static/images/frontpage/Screenshot 2023-12-29 220355.png b/static/images/frontpage/Screenshot 2023-12-29 220355.png
new file mode 100644
index 0000000..75d3453
Binary files /dev/null and b/static/images/frontpage/Screenshot 2023-12-29 220355.png differ
diff --git a/static/images/frontpage/image1.heic b/static/images/frontpage/image1.heic
new file mode 100644
index 0000000..b086726
Binary files /dev/null and b/static/images/frontpage/image1.heic differ
diff --git a/static/ring_of_races_font.ttf b/static/ring_of_races_font.ttf
new file mode 100644
index 0000000..012a5fc
Binary files /dev/null and b/static/ring_of_races_font.ttf differ
diff --git a/static/styles.css b/static/styles.css
index 6621b9d..c05a163 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,7 +1,13 @@
+@font-face {
+    font-family: 'Herreweb';
+    src: url('static/ring_of_races_font.ttf') format('tff');
+    /* You can add additional font formats (e.g., ttf, eot) for better compatibility */
+}
+
 body {
-    background-color: rgb(92, 41, 7);
+    background-color: rgb(228, 218, 210);
     color: white;
-    font-family: 'Arial', sans-serif;
+    font-family: 'Herreweb', sans-serif;
 }
 
 .main-container {
@@ -10,57 +16,41 @@ body {
 }
 
 h1 {
-    font-family: 'Times New Roman', serif;
+    /* font-family: 'Times New Roman', serif; */
     font-size: 36px;
     margin-top: 20px;
 }
 
-.folder-container {
-    display: flex;
+/* .folder-container {
+    display: flex; 
     flex-wrap: wrap;
     justify-content: center;
-}
+} */
 
 .document-button {
-    width: 150px;
-    height: 200px;
-    margin: 10px;
-    background-color: #8B4513; /* Dark SaddleBrown color */
+    width: 200px;
+    height: 300px;
+    margin: 4%;
+    background-color: #bda99b; /* Dark SaddleBrown color */
     border: 2px solid #8B4513;
     border-radius: 10px;
     position: relative;
     overflow: hidden;
-    color: white;
-}
-
-/* Add a papyrus-like texture to the document buttons */
-.document-button:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background:
-        repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px),
-        repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px);
-    background-size: 30px 30px;
-    border-radius: 8px;
-    z-index: -1;
+    color: rgb(17, 5, 5);
 }
 
 /* Add a subtle shadow for depth */
 .document-button:hover {
-    width: 150px;
-    height: 200px;
-    margin: 10px;
+    transition: all 0.3s ease;
+    width: 200px;
+    height: 300px;
+    margin: 4%;
     background-color: #8B4513; /* Dark SaddleBrown color */
     border: 2px solid #8B4513;
     background:
-        repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px),
-        repeating-linear-gradient(45deg, transparent, transparent 10px, #904e1f 10px, #7a3216 20px);
+        repeating-linear-gradient(in hsl longer hue, rgb(85, 48, 25), rgb(148, 94, 50) 50px);
     border-radius: 10px;
     position: relative;
     overflow: hidden;
     color: white;
-}
+}
\ No newline at end of file
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..927c9f1
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1,5 @@
+<!-- footer.html -->
+<footer style="background-color: #461f19; padding: 10px; text-align: center; color: #ffd700;">
+    <p>&copy; 2023 Herreweb. All rights reserved.</p>
+    <!-- Add any additional content or links for the footer -->
+</footer>
diff --git a/templates/header.html b/templates/header.html
new file mode 100644
index 0000000..782f303
--- /dev/null
+++ b/templates/header.html
@@ -0,0 +1,18 @@
+<!-- header.html -->
+<header style="background-color: #461f19; padding: 10px; text-align: center;">
+    <h1 style="color: #ffd700; margin-bottom: 10px;">Herreweb</h1>
+
+    <nav>
+        <ul style="list-style-type: none; padding: 0; display: flex; gap: 10px; justify-content: center;">
+            {% for page in ['hello', 'contact', 'about'] %}
+                <li>
+                    <a href="{{ url_for(page.lower()) }}" style="text-decoration: none;">
+                        <button style="background-color: #5d4643; color: #ffd700; border: 2px solid #2b1d1b; padding: 10px; cursor: pointer; transition: all 0.3s;">
+                            {{ page }}
+                        </button>
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+    </nav>
+</header>
diff --git a/templates/index.html b/templates/index.html
index 26b066a..3de5048 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,21 +1,83 @@
+<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
+    <!-- Include the header template -->
+    {% include 'header.html' %}
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Herreweb Repository</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
+    <style>
+        .container {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+            margin-bottom: -20%;
+        }
+
+        .image {
+            position: absolute;
+            top: 0;
+            left: 3%;
+            width: 70%;
+            /* Adjust as needed */
+            height: 55%;
+            object-fit: cover;
+        }
+
+        .content {
+            position: absolute;
+            top: 45%;
+            right: 0;
+            left: 55%;
+            right: 6%;
+            transform: translateY(-50%);
+            padding: 20px;
+            background-color: rgba(255, 255, 255, 0.8);
+            cursor: pointer;
+            color: black;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        .content:hover {
+            background-color: #555;
+            color: white;
+        }
+
+        .content a {
+            text-decoration: none;
+            color: #333;
+            font-weight: bold;
+        }
+
+        .content a:hover {
+            color: #fff;
+        }
+    </style>
 </head>
+
 <body>
     <div class="main-container">
-        <h1>Our Projects</h1>
+        <div class="container">
+            <img src="{{ url_for('static', filename='images/frontpage/Screenshot 2023-12-29 220355.png') }}" alt="Your Image" class="image">
+
+            <div class="content" onclick="location.href='{{ url_for('strongholdkingdoms') }}';">
+                <h2><a href="{{ url_for('strongholdkingdoms') }}">Project Thelendar</a></h2>
+                <p>This project describes our adventures on the game Stronghold Kingdoms. We played a lot of games from the stronghold series, and Eljakim made a bot to automate a lot of manual stuff in Stronghold Kingdoms. This project was dubbed 'Artemis' for the visual bot, and 'Thelendar' for the headless bot.</p>
+            </div>
+        </div>
+
         <div class="folder-container">
-            {% for folder in repository_folders %}
-                <a href="{{ url_for('repository_page', folder=folder) }}">
-                    <button class="document-button">{{ folder }}</button>
-                </a>
+            {% for folder in repository_folders if folder != 'images' %}
+            <a href="{{ url_for('repository_page', folder=folder) }}">
+                <button class="document-button">{{ folder }}</button>
+            </a>
             {% endfor %}
         </div>
     </div>
+    {% include 'footer.html' %}
 </body>
+
 </html>
diff --git a/templates/pages/about.html b/templates/pages/about.html
new file mode 100644
index 0000000..08a166d
--- /dev/null
+++ b/templates/pages/about.html
@@ -0,0 +1,27 @@
+<!-- about.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Us - Herreweb</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
+    <!-- Add any additional styles or scripts for the about page -->
+</head>
+<body>
+    <div class="main-container">
+        <h2>About Us</h2>
+
+        <p>Welcome to Herreweb, where we are passionate about creating innovative solutions that make a difference. Our team is dedicated to pushing the boundaries of technology and delivering high-quality projects.</p>
+
+        <h3>Our Mission</h3>
+        <p>At Herreweb, our mission is to blend creativity and technology to build solutions that inspire and solve real-world challenges. We strive to create a positive impact on the world through our work.</p>
+
+        <h3>Our Team</h3>
+        <p>We have a diverse and talented team of professionals with expertise in various domains, including programming, design, and project management. Together, we collaborate to bring ideas to life.</p>
+
+        <h3>Contact Us</h3>
+        <p>If you have any questions or would like to learn more about our projects, feel free to contact us.</p>
+    </div>
+</body>
+</html>
diff --git a/templates/pages/contact.html b/templates/pages/contact.html
new file mode 100644
index 0000000..62b4bc6
--- /dev/null
+++ b/templates/pages/contact.html
@@ -0,0 +1,22 @@
+<!-- contact.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us - Herreweb</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
+    <!-- Add any additional styles or scripts for the contact page -->
+</head>
+<body>
+    <div class="main-container">
+        <h2>Contact Us</h2>
+
+        <p>Have a question or want to get in touch? We'd love to hear from you. Please feel free to reach out through any of the following methods:</p>
+
+        <h3>Email</h3>
+        <p>Email us at: <a href="mailto:info@herreweb.com">info@herreweb.com</a></p>
+
+    </div>
+</body>
+</html>
diff --git a/templates/pages/strongholdkingdoms.html b/templates/pages/strongholdkingdoms.html
new file mode 100644
index 0000000..0ad7e03
--- /dev/null
+++ b/templates/pages/strongholdkingdoms.html
@@ -0,0 +1,74 @@
+<!-- page.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include 'header.html' %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Thelandar Bot - Stronghold Kingdoms</title>
+    <!-- Include any necessary styles or scripts here -->
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f2f2f2;
+            color: #333;
+            margin: 0;
+            padding: 0;
+        }
+
+        header {
+            background-color: #333;
+            color: #fff;
+            padding: 10px;
+            text-align: center;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: #fff;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            color: #333;
+        }
+
+        p {
+            line-height: 1.6;
+        }
+
+        /* Add any additional styling as needed */
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Thelandar Bot - Stronghold Kingdoms</h1>
+    </header>
+
+    <div class="container">
+        <h2>Welcome to the Thelandar Bot Page!</h2>
+
+        <p>
+            Thank you for using the Thelandar bot for Stronghold Kingdoms. This page provides additional information and resources for using the bot effectively.
+        </p>
+
+        <h3>Features</h3>
+        <ul>
+            <li>Automated resource management</li>
+            <li>Strategic troop deployment</li>
+            <li>Real-time notifications</li>
+            <!-- Add more features as needed -->
+        </ul>
+
+        <h3>Documentation</h3>
+        <p>
+            For detailed instructions and documentation on using the Thelandar bot, please refer to the official documentation provided with the bot.
+        </p>
+
+        <!-- Add any additional content or sections as needed -->
+    </div>
+    {% include 'footer.html' %}
+</body>
+</html>