diff --git a/somachtstefaniedas/index.html b/somachtstefaniedas/index.html
new file mode 100644
index 0000000..1e97673
--- /dev/null
+++ b/somachtstefaniedas/index.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>so.macht.stefanie.das</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #000; /* Schwarzer Hintergrund */
+            color: #fff; /* Weißer Text */
+        }
+
+        .profile-header {
+            display: flex;
+            align-items: center;
+            padding: 20px;
+            background-color: #333; /* Dunkleres Schwarz für den Header */
+            position: relative;
+        }
+
+        .profile-logo img {
+            border-radius: 50%;
+            width: 80px;
+            height: 80px;
+        }
+
+        .profile-info {
+            margin-left: 20px;
+        }
+
+        .switch {
+            font-size: 11px;
+            position: absolute;
+            top: 20px;
+            right: 20px; /* Rechts oben */
+            display: inline-block;
+            width: 3.5em;
+            height: 1em;
+        }
+
+        /* Hide default HTML checkbox */
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        /* The slider */
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            border: 2px solid #000;
+            transition: .4s;
+            border-radius: 1px;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 1.3em;
+            width: 1.2em;
+            border-radius: 2px;
+            left: 0.2em;
+            bottom: 0.3em;
+            background-color: #fff;
+            border: 2px solid #000;
+            transition: 0.1s;
+        }
+
+        input:checked + .slider {
+            background-color: #000;
+        }
+
+        input:focus + .slider {
+            box-shadow: 0 0 1px #2196F3;
+        }
+
+        input:checked + .slider:before {
+            transform: translateX(1.3em);
+        }
+
+        .profile-navigation {
+            position: relative;
+            margin: 0;
+            padding: 0;
+        }
+        .profile-navigation ul {
+            display: flex;
+            justify-content: center; /* Zentriert die Navigationselemente */
+            list-style: none;
+            padding: 0;
+            background-color: #444; /* Dunkleres Schwarz für die Navigation */
+            margin: 0;
+            border-top: 1px solid #555;
+            border-bottom: 1px solid #555;
+        }
+
+        .profile-navigation li {
+            padding: 10px 20px;
+            cursor: pointer;
+            transition: color 0.3s ease-in-out; /* Sanfter Übergang für die Textfarbe */
+            text-align: center; /* Zentriert den Text in jedem Navigationselement */
+        }
+
+        .profile-navigation .underline-container {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%; /* Erstreckt sich über die gesamte Bildschirmbreite */
+            height: 3px;
+            background-color: #555; /* Dunkelgrauer Hintergrund */
+        }
+
+        .profile-navigation .underline {
+            position: absolute;
+            bottom: 0;
+            height: 100%;
+            background-color: #fff; /* Weißer Streifen */
+            transition: all 0.3s ease-in-out; /* Sanfter Übergang */
+        }
+
+        .profile-content {
+            display: none; /* Verstecke den Inhalt standardmäßig */
+            padding: 20px;
+        }
+
+        .profile-content.active {
+            display: block; /* Zeige den Inhalt der aktiven Kategorie */
+        }
+
+        .profile-post {
+            width: calc(33.333% - 20px);
+            margin: 10px;
+            background-color: #222; /* Dunkleres Schwarz für die Posts */
+            padding: 20px;
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* Weiße Schatten für besseren Kontrast */
+        }
+
+        /* Hell-Modus */
+        body.light-mode {
+            background-color: #fff;
+            color: #000;
+        }
+
+        .profile-header.light-mode {
+            background-color: #ddd; /* Helleres Grau für den Header im Hell-Modus */
+        }
+
+        .profile-navigation.light-mode ul {
+            background-color: #ccc; /* Hellgrau für die Navigation im Hell-Modus */
+            border-top: 1px solid #ddd;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .profile-navigation .underline-container.light-mode {
+            background-color: #ccc; /* Hellgrauer Hintergrund im Hell-Modus */
+        }
+
+        .profile-post.light-mode {
+            background-color: #f9f9f9; /* Helleres Grau für die Posts im Hell-Modus */
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Dunklere Schatten für besseren Kontrast im Hell-Modus */
+        }
+
+        .logo-light {
+    display: none; /* Im Dark-Modus standardmäßig versteckt */
+}
+
+.light-mode .logo-dark {
+    display: none; /* Im Hell-Modus das dunkle Logo verstecken */
+}
+
+.light-mode .logo-light {
+    display: block; /* Im Hell-Modus das helle Logo anzeigen */
+}
+
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            var tabs = document.querySelectorAll('.profile-navigation li');
+            var contents = document.querySelectorAll('.profile-content');
+            var underlineContainer = document.createElement('div');
+            var underline = document.createElement('div');
+            underlineContainer.classList.add('underline-container');
+            underline.classList.add('underline');
+            underlineContainer.appendChild(underline);
+            document.querySelector('.profile-navigation').appendChild(underlineContainer);
+
+            tabs.forEach(function(tab) {
+                tab.addEventListener('click', function() {
+                    tabs.forEach(function(tab) {
+                        tab.classList.remove('active');
+                    });
+                    contents.forEach(function(content) {
+                        content.classList.remove('active');
+                    });
+
+                    tab.classList.add('active');
+                    var category = tab.getAttribute('id');
+                    document.getElementById(category + '-content').classList.add('active');
+
+                    var tabRect = tab.getBoundingClientRect();
+                    var navRect = document.querySelector('.profile-navigation ul').getBoundingClientRect();
+                    underline.style.width = tabRect.width + 'px';
+                    underline.style.transform = 'translateX(' + (tabRect.left - navRect.left) + 'px)';
+                });
+
+                if (tab.classList.contains('active')) {
+                    var tabRect = tab.getBoundingClientRect();
+                    var navRect = document.querySelector('.profile-navigation ul').getBoundingClientRect();
+                    underline.style.width = tabRect.width + 'px';
+                    underline.style.transform = 'translateX(' + (tabRect.left - navRect.left) + 'px)';
+                }
+            });
+
+            var toggleSwitch = document.createElement('label');
+            toggleSwitch.classList.add('switch');
+            toggleSwitch.innerHTML = '<input type="checkbox"><span class="slider"></span>';
+            document.querySelector('.profile-header').appendChild(toggleSwitch);
+
+            toggleSwitch.addEventListener('change', function(event) {
+                document.body.classList.toggle('light-mode');
+                document.querySelector('.profile-header').classList.toggle('light-mode');
+                document.querySelector('.profile-navigation').classList.toggle('light-mode');
+                document.querySelector('.underline-container').classList.toggle('light-mode');
+                document.querySelectorAll('.profile-post').forEach(function(post) {
+                    post.classList.toggle('light-mode');
+                });
+            });
+        });
+    </script>
+</head>
+<body>
+    <div class="profile-header">
+        <div class="profile-logo">
+            <img src="logo.png" alt="Profilbild">
+        </div>
+        <div class="profile-info">
+            <h1>so.macht.stefanie.das</h1>
+            <!-- Hier die Instagram-Verknüpfung hinzufügen -->
+            <ul class="wrapper"><a href="https://www.instagram.com/so.mach.ich.das/" target="_blank" rel="noopener noreferrer">
+                <li class="icon instagram">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        height="1.2em"
+                        fill="currentColor"
+                        class="bi bi-instagram"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
+                        ></path>
+                    </svg>
+                </li>
+            </a>            
+            </ul>
+        </div>
+    </div>
+
+    <div class="profile-navigation">
+        <ul>
+            <li class="active" id="salat">Salat</li>
+            <li id="frühstück">Frühstück</li>
+            <li id="eis-und-shakes">Eis & Shakes</li>
+            <li id="backen-suess">Backen - süß</li>
+        </ul>
+    </div>
+    <div class="profile-content active" id="salat-content">
+        <div class="profile-post">
+            <h2>Beitrag Salat 1</h2>
+            <p>Ein leckerer Salat mit frischen Zutaten und einem köstlichen Dressing.</p>
+        </div>
+        <!-- Weitere Salat-Beiträge hier -->
+    </div>
+
+    <div class="profile-content" id="frühstück-content">
+        <div class="profile-post">
+            <h2>Beitrag Frühstück 1</h2>
+            <p>Ein gesundes Frühstück mit Haferflocken, Früchten und Joghurt.</p>
+        </div>
+        <!-- Weitere Frühstück-Beiträge hier -->
+    </div>
+
+    <div class="profile-content" id="eis-und-shakes-content">
+        <div class="profile-post">
+            <h2>Beitrag Eis & Shakes 1</h2>
+            <p>Ein erfrischender Shake mit frischen Früchten und Eiscreme.</p>
+        </div>
+        <!-- Weitere Eis & Shakes-Beiträge hier -->
+    </div>
+
+    <div class="profile-content" id="backen-suess-content">
+        <div class="profile-post">
+            <h2>Beitrag Backen - süß 1</h2>
+            <p>Leckere süße Backwaren wie Kuchen, Kekse und Muffins.</p>
+        </div>
+        <!-- Weitere Backen - süß Beiträge hier -->
+    </div>
+</body>
+</html>
diff --git a/somachtstefaniedas/logo.png b/somachtstefaniedas/logo.png
new file mode 100644
index 0000000..2d86551
Binary files /dev/null and b/somachtstefaniedas/logo.png differ
