diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9ce084f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exploring the waifuverse</title>
+    <!-- This is for you, my love. Always know you are my everything. -->
+    <link href="/static/styles/styles main menu.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🍉 Welcome to The Waifuism Life 🍉</h1>
+        </header>
+        <main>
+            <img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
+            <img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
+            <img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
+            <img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
+            <img src="/static/wafumelon/wafu.png" alt="wafu" class="wiggle">
+            <section id="about">
+                <h2>About</h2>
+                <p>I like making things sometimes,  if you're confused, you can go back to <a href="https://waifuism.life">waifuism.life</a></p>
+            </section>
+            <section id="notes">
+                <h2>Sections</h2>
+                <p>There's a few sections that you may want to see.</p>
+                <ul>
+                    <li>🐾 <a href="/shrines/">Shrines</a></li>
+                </ul>
+            </section>
+            <section id="extras">
+                <h2>Extras</h2>
+                <p>Be sure to find all the little <a href="/static/eastereggs/easteregg.jpg">eastereggs</a> 🐱✨</p>
+            </section>
+        </main>
+        <footer>
+            <p>Made with ❤️ and lots of care.</p>
+        </footer>
+    </div>
+</body>
+</html>
diff --git a/shrines/index.html b/shrines/index.html
new file mode 100644
index 0000000..a425ffd
--- /dev/null
+++ b/shrines/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Character Shrines</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
+
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #1a001a;
+            color: #e0b3ff;
+            text-align: center;
+        }
+        header {
+            background-color: #330033;
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+        }
+        h1 {
+            font-size: 2.5rem;
+        }
+        .shrine-gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 20px;
+            margin: 0 10px;
+        }
+        .shrine-item {
+            background-color: #260026;
+            border: 2px solid #993399;
+            border-radius: 10px;
+            padding: 10px;
+            transition: transform 0.3s, box-shadow 0.3s;
+            cursor: pointer;
+        }
+        .shrine-item:hover {
+            transform: rotate(-2deg) translateY(-5px);
+            box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
+        }
+        .shrine-item img {
+            max-width: 100%;
+            border-radius: 8px;
+        }
+        footer {
+            margin-top: 20px;
+            padding: 10px;
+            background-color: #330033;
+            border-radius: 10px;
+        }
+        a {
+            text-decoration: none;
+            color: #e0b3ff;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>✨ Shrines ✨</h1>
+        <p>It isn't called waifuism for no reason.</p>
+    </header>
+    
+    <div class="shrine-gallery">
+        <!-- Example Shrine Items -->
+        <a href="/shrines/teruhashi/index.html" class="shrine-item">
+            <img src="/shrines/teruhashi/side.png" alt="Character 1">
+            <h2>Teruhashi Kokomi</h2>
+        </a>
+        <a href="/shrines/libbie/index.html" class="shrine-item">
+            <img src="/shrines/libbie/libbie.png" alt="Libbie">
+            <h2>Libbie The Cyber Oryx</h2>
+        </a>
+        <a href="/shrines/aira/" class="shrine-item">
+            <img src="/shrines/libbie/libbie.png" alt="Libbie">
+            <h2>Libbie The Cyber Oryx</h2>
+        </a>
+        <a href="/shrines/birb/" class="shrine-item">
+            <img src="/shrines/libbie/libbie.png" alt="Libbie">
+            <h2>Libbie The Cyber Oryx</h2>
+        </a>
+    </div>
+
+    <footer>
+        <p>💕 Built with love and sparkles! 💕</p>
+    </footer>
+</body>
+</html>
diff --git a/shrines/libbie/index.html b/shrines/libbie/index.html
new file mode 100644
index 0000000..998b34a
--- /dev/null
+++ b/shrines/libbie/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Libbie's Shrine</title>
+    <style>
+        :root {
+            --main-bg-color: #255d3b;
+            --accent-color: #6aba7c;
+            --text-color: #f0fff4;
+            --box-bg-color: #1c4b30;
+            --sidebar-bg-color: #184d3b;
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+            margin: 0;
+            background-color: var(--main-bg-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        header {
+            background-color: var(--accent-color);
+            text-align: center;
+            padding: 15px 0;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+        }
+
+        header h1 {
+            margin: 0;
+            font-size: 2.5rem;
+        }
+
+        .container {
+            display: flex;
+            flex: 1;
+            padding: 20px;
+            background: url('/shrines/libbie/bg.jpg') no-repeat center center fixed;
+            background-size: cover;
+        }
+
+        .sidebar {
+            width: 25%;
+            background-color: var(--sidebar-bg-color);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .sidebar img {
+            max-width: 100%;
+            border-radius: 10px;
+            margin-bottom: 15px;
+        }
+
+        .sidebar h2 {
+            text-align: center;
+        }
+
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            padding-left: 20px;
+        }
+
+        .box {
+            background-color: var(--box-bg-color);
+            padding: 20px;
+            border-radius: 10px;
+            text-align: center;
+            position: relative;
+            transition: transform 0.3s;
+        }
+
+        .box:hover {
+            transform: translateY(-5px);
+        }
+
+        .did-you-know {
+            border: 2px solid var(--accent-color);
+            padding: 20px;
+            border-radius: 10px;
+        }
+
+        footer {
+            background-color: var(--accent-color);
+            text-align: center;
+            padding: 10px;
+            margin-top: auto;
+            box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                flex-direction: column;
+            }
+
+            .sidebar {
+                width: 100%;
+                margin-bottom: 20px;
+            }
+
+            .main-content {
+                padding-left: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Welcome to Libbie's Shrine! ✨</h1>
+    </header>
+
+    <div class="container">
+        <div class="sidebar">
+            <img src="/shrines/libbie/libbie.png" alt="Libbie the Cyber Oryx">
+            <h2>Libbie the Cyber Oryx</h2>
+            <ul>
+                <li>Fact 1: She is part of the public domain</li>
+                <li>Fact 2: Loves open-source software</li>
+                <li>Fact 3: Advocates for digital freedom</li>
+            </ul>
+        </div>
+
+        <div class="main-content">
+            <div class="box">
+                <h3>About Libbie</h3>
+                <p>Libbie is an enthusiastic and friendly mascot, initially meant for Libre office now can be used by anyone.</p>
+            </div>
+
+            <div class="box">
+                <h3>Hobbies</h3>
+                <p>Libbie enjoys coding, contributing to open-source projects, and supporting the KDE community.</p>
+            </div>
+
+            <div class="box">
+                <h3>Did You Know?</h3>
+                <p class="did-you-know">We will never forget what you did.</p>
+            </div>
+
+        </div>
+    </div>
+
+    <footer>
+        <p>Built with love and open-source principles. 🌿</p>
+    </footer>
+</body>
+</html>
diff --git a/shrines/libbie/libbie.png b/shrines/libbie/libbie.png
new file mode 100644
index 0000000..2477003
Binary files /dev/null and b/shrines/libbie/libbie.png differ
diff --git a/shrines/teruhashi/1.png b/shrines/teruhashi/1.png
new file mode 100644
index 0000000..50fae2d
Binary files /dev/null and b/shrines/teruhashi/1.png differ
diff --git a/shrines/teruhashi/2.png b/shrines/teruhashi/2.png
new file mode 100644
index 0000000..54b6ffd
Binary files /dev/null and b/shrines/teruhashi/2.png differ
diff --git a/shrines/teruhashi/32. Because I'm a Perfect Girl - Saiki K. No Psi Nan OST [lv9D7QFae3M].mp3 b/shrines/teruhashi/32. Because I'm a Perfect Girl - Saiki K. No Psi Nan OST [lv9D7QFae3M].mp3
new file mode 100644
index 0000000..2d67279
Binary files /dev/null and b/shrines/teruhashi/32. Because I'm a Perfect Girl - Saiki K. No Psi Nan OST [lv9D7QFae3M].mp3 differ
diff --git a/shrines/teruhashi/bg.png b/shrines/teruhashi/bg.png
new file mode 100644
index 0000000..b78e87b
Binary files /dev/null and b/shrines/teruhashi/bg.png differ
diff --git a/shrines/teruhashi/index.html b/shrines/teruhashi/index.html
new file mode 100644
index 0000000..d050758
--- /dev/null
+++ b/shrines/teruhashi/index.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kokomi Teruhashi Shrine</title>
+    <style>
+        :root {
+            --main-bg-color: #255db3;
+            --accent-color: #447edb;
+            --text-color: #ffffff;
+            --box-bg-color: #1e468c;
+            --sidebar-color: rgba(0, 0, 0, 0.7);
+        }
+
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--main-bg-color);
+            color: var(--text-color);
+            margin: 0;
+            display: flex;
+        }
+
+        main {
+            flex-grow: 1;
+            padding: 20px;
+            background: url('/shrines/teruhashi/bg.png') no-repeat center center fixed;
+            background-size: cover;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .sidebar {
+            width: 250px;
+            background-color: var(--sidebar-color);
+            color: var(--text-color);
+            padding: 20px;
+            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
+            overflow-y: auto;
+        }
+
+        .sidebar img {
+            max-width: 100%;
+            border-radius: 10px;
+            margin-bottom: 10px;
+        }
+
+        .sidebar h2 {
+            text-align: center;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        header h1 {
+            font-size: 2.5rem;
+            color: var(--accent-color);
+            animation: sparkle 2s infinite;
+        }
+
+        @keyframes sparkle {
+            0%, 100% { text-shadow: 0 0 5px white; }
+            50% { text-shadow: 0 0 15px white; }
+        }
+
+        .content {
+            flex: 1;
+            max-width: 800px;
+            margin: auto;
+            text-align: center;
+            background-color: rgba(255, 255, 255, 0.1);
+            padding: 20px;
+            border-radius: 10px;
+        }
+
+        .content p.moving-text {
+            animation: pop-in 2s ease-in-out;
+            display: inline-block;
+            white-space: nowrap;
+        }
+
+        @keyframes pop-in {
+            0% { transform: translateX(-100%); opacity: 0; }
+            50% { transform: translateX(0); opacity: 1; }
+            100% { transform: translateX(10%); opacity: 0; }
+        }
+
+        .content .highlight-box {
+            background-color: var(--box-bg-color);
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 10px;
+            transition: transform 0.3s;
+        }
+
+        .content .highlight-box:hover {
+            transform: scale(1.05);
+        }
+
+        .did-you-know {
+            background-color: var(--accent-color);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+
+        .audio-player {
+            margin: 20px 0;
+        }
+
+        .two-columns {
+            display: flex;
+            gap: 20px;
+        }
+
+        .left-column {
+            flex: 1;
+            background-color: rgba(8, 14, 95, 0.918);
+            padding: 20px;
+            border-radius: 10px;
+        }
+
+        .right-column {
+            flex: 1;
+            background-color: rgba(8, 14, 95, 0.918);
+            padding: 20px;
+            border-radius: 10px;
+        }
+
+        footer {
+            text-align: center;
+            margin-top: 20px;
+            color: var(--text-color);
+        }
+
+        @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+            }
+
+            .sidebar {
+                width: 100%;
+                text-align: center;
+            }
+
+            .two-columns {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <img src="/shrines/teruhashi/side.png" alt="Kokomi Teruhashi">
+        <h2>Kokomi Teruhashi</h2>
+        <img  src="/static/wafumelon/wafu.png" alt="wafu" title="Kokomi is the original face of wafumelon">
+    </div>
+    <main>
+        <header>
+            <h1>Welcome to Kokomi Teruhashi's Shrine ✨</h1>
+        </header>
+
+        <div class="two-columns">
+            <div class="left-column">
+                <h3>Special Facts</h3>
+                <ul>
+                    <li>Kokomi is known as the "perfect pretty girl" at PK Academy.</li>
+                    <li>She often says, "I know, right? I'm so cute!"</li>
+                    <li>Her beauty captivates everyone around her effortlessly.</li>
+                </ul>
+                <div class="did-you-know">
+                    Did you know? Kokomi Teruhashi believes she has a "divine aura" that makes everyone adore her.
+                </div>
+                <img src="/shrines/teruhashi/2.png" alt="Kokomi Smiling" style="width:100%; margin-top:15px; border-radius:10px;">
+            </div>
+
+            <div class="right-column">
+                <div class="content">
+                    <p>Kokomi Teruhashi is one of the main characters in <em>Saiki Kusuo no Psi Nan</em>. Known for her confidence, she loves being the center of attention and is always conscious of her image. However, her interactions with Saiki challenge her usual charm.</p>
+
+                    <div class="highlight-box">
+                        Kokomi loves things that highlight her "divine" status, like sparkling jewelry and cute outfits!
+                    </div>
+
+                    <p style="animation: sparkle 2s infinite;">"Life is in very easy mode. This is all because I am gorgeous." - Kokomi</p>
+
+                    <div class="audio-player">
+                        <p>Play Kokomi's theme:</p>
+                        <audio controls>
+                            <source src="/shrines/teruhashi/32. Because I'm a Perfect Girl - Saiki K. No Psi Nan OST [lv9D7QFae3M].mp3" type="audio/mpeg">
+                            Your browser does not support the audio element.
+                        </audio>
+                    </div>
+
+                    <img src="/shrines/teruhashi/1.png" alt="Kokomi Posing" style="width:100%; margin-top:15px; border-radius:10px;">
+                </div>
+            </div>
+        </div>
+
+        <footer>
+            <p>💕 Built with love and admiration for Kokomi Teruhashi! 💕</p>
+        </footer>
+    </main>
+</body>
+</html>
diff --git a/shrines/teruhashi/side.png b/shrines/teruhashi/side.png
new file mode 100644
index 0000000..922a5f1
Binary files /dev/null and b/shrines/teruhashi/side.png differ
diff --git a/static/eastereggs/easteregg.jpg b/static/eastereggs/easteregg.jpg
new file mode 100644
index 0000000..dd69bdf
Binary files /dev/null and b/static/eastereggs/easteregg.jpg differ
diff --git a/static/styles/styles main menu.css b/static/styles/styles main menu.css
new file mode 100644
index 0000000..e6a2284
--- /dev/null
+++ b/static/styles/styles main menu.css	
@@ -0,0 +1,76 @@
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: #fef6ff;
+    color: #4a4a4a;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    max-width: 800px;
+    margin: 20px;
+    padding: 20px;
+    background: #fff;
+    border-radius: 15px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    font-size: 2rem;
+    color: #ff85a2;
+}
+
+main {
+    text-align: center;
+}
+
+h2 {
+    color: #8e44ad;
+    margin-bottom: 10px;
+}
+
+p, ul {
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+ul li {
+    margin: 5px 0;
+    color: #e74c3c;
+}
+
+footer {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 0.8rem;
+    color: #999;
+}
+
+.wiggle {
+    position: relative;
+    width: 10%; /* Resize the PNG as needed */
+    animation: wiggle 4s infinite ease-in-out; /* Add animation */
+}
+
+@keyframes wiggle {
+    0%, 100% {
+        transform: rotate(-10deg) translateX(-5px);
+    }
+    50% {
+        transform: rotate(10deg) translateX(5px);
+    }
+}
diff --git a/static/wafumelon/wafu.png b/static/wafumelon/wafu.png
new file mode 100644
index 0000000..d0e0cd9
Binary files /dev/null and b/static/wafumelon/wafu.png differ
