diff --git a/.gitignore b/.gitignore
index e7f7a72c..d8a835dc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,2 @@
 .DS_Store
-**/__Source
-**/shrines/cassettebeasts
\ No newline at end of file
+**/__Source
\ No newline at end of file
diff --git a/changelog/index.html b/changelog/index.html
index 1de70d86..d0118606 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -39,6 +39,11 @@
                     Archive: <span class="date-style">Latest</span> | <a href="./2022.html">2022</a> | <a href="./layouts.html">Website Layouts</a>
                 </p>
 
+                <p class="date-style">August 3, 2023:</p>
+                <ul>
+                    <li>Launched new <a href="/shrines/">shrine</a>: <a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite></a>.</li>
+                </ul>
+
                 <p class="date-style">July 28, 2023:</p>
                 <ul>
                     <li>New blog post: <a href="/blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html">My First Birthday After the Launch of Leilukin's Hub</a>.</li>
diff --git a/home.html b/home.html
index 79b419d6..f312e817 100644
--- a/home.html
+++ b/home.html
@@ -64,10 +64,9 @@
                 <section class="content-section">
                     <h2>Updates</h2>
                     <div class="text-box">
-                        <p class="date-style">July 28, 2023:</p>
+                        <p class="date-style">August 3, 2023:</p>
                         <ul>
-                            <li>New blog post: <a href="/blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html">My First Birthday After the Launch of Leilukin's Hub</a>.</li>
-                            <li>Added shrine launch date to the footer of each <a href="/shrines/">shrine</a>.</li>
+                            <li>Launched new <a href="/shrines/">shrine</a>: <a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite></a>.</li>
                         </ul>
                     </div>
                     <a href="/changelog">View all site changelog</a>
diff --git a/shrines/cassettebeasts/cassettebeasts.css b/shrines/cassettebeasts/cassettebeasts.css
new file mode 100644
index 00000000..31ed57e2
--- /dev/null
+++ b/shrines/cassettebeasts/cassettebeasts.css
@@ -0,0 +1,49 @@
+@import url(/css/style-main.css);
+
+:root {
+    --clr-body-bg: #1f0033;
+    --img-body-bg: url(/shrines/cassettebeasts/img/cassettebeasts-bg.jpg);
+    --clr-body-txt: #000000;
+    --clr-content-bg: #ffffff;
+
+    --clr-main-heading: #000000;
+    --clr-sub-heading: #000000;
+    --clr-title-border: #797979;
+    --clr-bold-txt: #F2814C;
+    --clr-link: #AB75E8;
+    --clr-link-hover: #6914cb;
+    --clr-quote-bg: #dddddd;
+    --clr-quote-border: #777777;
+
+    --clr-code-bg: #dddddd;
+    --clr-code-border: #777777;
+    --clr-dates: rgb(58, 150, 255);
+
+    --clr-link-btn-bg: #873eb5;
+    --clr-link-btn-txt: white;
+    --clr-link-btn-hover: #241445;
+
+    --clr-header-bg: #AB75E8;
+    --clr-nav-bg: #AB75E8;
+    --clr-nav-link: white;
+
+    --clr-footer-bg: #AB75E8;
+}
+
+header {
+    max-height: 20rem;
+}
+
+header img {
+    object-fit: cover;
+    object-position: top;
+    height: 100%;
+}
+
+footer {
+    color: var(--clr-nav-link);
+}
+
+footer a {
+    color: var(--clr-nav-link);
+}
\ No newline at end of file
diff --git a/shrines/cassettebeasts/img/cassettebeasts-bg.jpg b/shrines/cassettebeasts/img/cassettebeasts-bg.jpg
new file mode 100644
index 00000000..2313b4fe
Binary files /dev/null and b/shrines/cassettebeasts/img/cassettebeasts-bg.jpg differ
diff --git a/shrines/cassettebeasts/img/cassettebeasts-header.png b/shrines/cassettebeasts/img/cassettebeasts-header.png
new file mode 100644
index 00000000..a1c29d4d
Binary files /dev/null and b/shrines/cassettebeasts/img/cassettebeasts-header.png differ
diff --git a/shrines/cassettebeasts/img/cb-icon.png b/shrines/cassettebeasts/img/cb-icon.png
new file mode 100644
index 00000000..c669c0f1
Binary files /dev/null and b/shrines/cassettebeasts/img/cb-icon.png differ
diff --git a/shrines/cassettebeasts/index.html b/shrines/cassettebeasts/index.html
new file mode 100644
index 00000000..d4a1a663
--- /dev/null
+++ b/shrines/cassettebeasts/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" id="page-top">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <meta property="og:url" content="https://leilukin.neocities.org/shrines/cassettebeasts">
+        <meta property="og:type" content="website">
+        <meta property="og:site_name" content="Leilukin's Hub">
+        <meta property="og:title" content="Cassette Beasts Shrine">
+        <meta property="og:description" content="My shrine for Cassette Beasts">
+
+        <link rel="stylesheet" href="cassettebeasts.css" type="text/css" media="all">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
+
+        <link rel="apple-touch-icon" sizes="180x180" href="./img/cb-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="./img/cb-icon.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="./img/cb-icon.png">
+        <link rel="manifest" href="/assets/favicon/site.webmanifest">
+
+        <script src="js/header.js" defer></script>
+        <script src="js/sidebar-content.js" defer></script>
+        <script src="js/footer.js" defer></script>
+
+        <title>Cassette Beasts Shrine | Leilukin's Hub</title>
+    </head>
+    <body>
+        <header></header>
+        <nav></nav>
+        <main>
+            <!-- <aside class="left-sidebar">
+                Left sidebar content here
+            </aside> -->
+
+            <div class="content-container">
+                <section class="content-section">
+                    <h1>Welcome to Leilukin's <cite>Cassette Beasts</cite> Shrine!</h1>
+                    <img src="./img/cassettebeasts_header.png" alt="Promotional image of Cassette Beasts">
+                    <p><cite>Cassette Beasts</cite> is a 2D/3D hybrid creature collector open-world role-playing game developed by Bytten Studio, an indie team based in Brighton, United Kingdom, co-founded by Jay Baylis and Tom Coxon, and published by Raw Fury.</p>
+
+                    <p>First released on Steam and Windows on April 26, 2023, later on console on May 25, 2023, <cite>Casette Beasts</cite> is available on Windows, Linux, Steam, Xbox Series X|S, Xbox One, Gamepass and Nintendo Switch.</p>
+
+                    <p><cite>A Summer’s End</cite> is available on <a href="https://store.steampowered.com/app/1111370/A_Summers_End__Hong_Kong_1986/" target="_blank">Steam</a> and <a href="https://oracleandbone.itch.io/a-summers-end" target="_blank">itch.io</a>. It also has an <a href="https://www.cassettebeasts.com/" target="_blank">official website</a>.</p>
+                </section>
+
+                <section class="content-section">
+                    <h2>How I Got into <cite>Cassette Beasts</cite></h2>
+
+                    <p>On June 30, 2023, when the Steam Summer Sale 2023 just started, I received <cite>Cassette Beasts</cite> as a Steam gift from a generous friend, who knew that I had been looking for independant monster-collecting games, since I mostly play indie games instead of AAA games nowadays.</p>
+
+                    <p>I started my first playthrough of <cite>Cassette Beasts</cite> on July 18, 2023, and I was immediately hooked. I could already feel that this game has like everything I could ask for in an indie alternative to <cite>Pokémon</cite>.</p>
+                        
+                    <p>I ended up spending around 34 hours to beat the main campaign, and that was because I made the deliberate decision to max out the companion characters' relationship level before advancing to the final level of the main story, because this game has more focus on human characters and relationships than what you may expect in a monster-collecting game.</p>
+                </section>
+
+                <section class="content-section">
+                    <h2>Why You Should Play <cite>Cassette Beasts</cite></h2>
+
+                    <p><cite>Cassette Beasts</cite> is a masterpiece of a monster collector game, rivalling if not even surpassing <cite>Pokémon</cite> at its best, because while it is obvious that Cassette Beasts is inspired by <cite>Pokémon</cite>, it utilises various aspects of <cite>Pokémon</cite> games with its own unique takes that are sometimes even better than <cite>Pokémon</cite>, from monster collecting mechanic, battle system, elemental type match ups, story, characters, lore, world building, map design, etc, with an amazing soundtrack that goes along with the game. As a result, <cite>Cassette Beasts</cite> is perfectly capable of standing on its own.</p>
+
+                    <p>I cannot recommend <cite>Cassette Beasts</cite> enough if you like monster-collecting games, including, if not especially, if you like <cite>Pokémon</cite> but want an indie alternative, or something different after finding <cite>Pokémon</cite> games getting stale or becoming jaded by the direction of the <cite>Pokémon</cite> games.</p>
+                </section>
+            </div>
+
+            <aside class="right-sidebar"></aside>
+
+        </main>
+        <footer></footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/shrines/cassettebeasts/js/footer.js b/shrines/cassettebeasts/js/footer.js
new file mode 100644
index 00000000..99269aaf
--- /dev/null
+++ b/shrines/cassettebeasts/js/footer.js
@@ -0,0 +1,5 @@
+// Footer component content
+document.querySelector("footer").innerHTML = `
+    <p>Made with ♥ by Leilukin | Shrine Launched: August 3, 2023</p>
+    <p><a href="#page-top">Back to top</a></p>
+`;
\ No newline at end of file
diff --git a/shrines/cassettebeasts/js/header.js b/shrines/cassettebeasts/js/header.js
new file mode 100644
index 00000000..12bf4236
--- /dev/null
+++ b/shrines/cassettebeasts/js/header.js
@@ -0,0 +1,29 @@
+/* Header component content */
+document.querySelector("header").innerHTML = `
+    <img src="./img/cassettebeasts-header.png" alt="">
+`;
+
+
+/* Navigation component content */
+document.querySelector("nav").innerHTML = `
+    <ul class="nav__menu">
+        <li><a href="/shrines/cassettebeasts/">Shrine Home</a></li>
+        <!-- <li><a href="./playlists.html">Playlists</a></li> -->
+        <li><a href="/home.html">Main Site</a></li>
+    </ul>
+`;
+
+
+/* MAKE THE NAVBAR STICKY */
+const header = document.querySelector("header");
+const navbar = document.querySelector("nav");
+
+window.addEventListener("scroll", e => {
+    const scrollPos = window.scrollY || document.documentElement.scrollTop;
+    const stickyLine = header.scrollHeight - navbar.scrollHeight;
+    if (scrollPos > stickyLine) {
+            navbar.classList.add("sticky-nav");
+    } else {
+            navbar.classList.remove("sticky-nav");
+    }
+});
\ No newline at end of file
diff --git a/shrines/cassettebeasts/js/sidebar-content.js b/shrines/cassettebeasts/js/sidebar-content.js
new file mode 100644
index 00000000..da8c0f0e
--- /dev/null
+++ b/shrines/cassettebeasts/js/sidebar-content.js
@@ -0,0 +1,15 @@
+// Sidebar content
+document.querySelector(".right-sidebar").innerHTML = `
+    <div class="sidebar--sticky">
+        <h2>About</h2>
+        <p><cite>Cassette Beasts</cite> is an 80’s vibe Creature Collector turn-based RPG set in a vast and colourful open world. Record and collect awesome monster forms to use in turn-based battles, or for their abilities to traverse the world. Use the Fusion System to create unique and powerful by combining any two monsters.</p>
+        <h3>Links</h3>
+        <ul>
+            <li><a href="https://www.cassettebeasts.com/" target="_blank">Official Website</a>
+            </li>
+            <li><a href="https://wiki.cassettebeasts.com/" target="_blank">Official Wiki</a></li>
+            <li><a href="https://store.steampowered.com/app/1321440/Cassette_Beasts/" target="_blank">Steam</a></li>
+            <li><a href="https://bytten-studio.com/" target="_blank">Bytten Studio</a></li>
+        </ul>
+    </div>
+`;
\ No newline at end of file
diff --git a/shrines/index.html b/shrines/index.html
index bcf132d7..61038e03 100644
--- a/shrines/index.html
+++ b/shrines/index.html
@@ -39,20 +39,25 @@
                 </section>
 
                 <section class="content-section">
-                    <h2><a href="./asummersend/" target="_blank"><em>A Summer’s End — Hong Kong 1986</em></a></h2>
+                    <h2><a href="./asummersend/" target="_blank"><cite>A Summer’s End — Hong Kong 1986</cite></a></h2>
                     <a href="./asummersend/" target="_blank"><img src="./asummersend/img/ASE_Key_art_intro.png" alt="Header of A Summer’s End — Hong Kong 1986" width="100%"></a>
                 </section>
 
                 <section class="content-section">
-                    <h2><a href="./starwarskotor/" target="_blank"><em>Star Wars: Knights of the Old Republic</em></a></h2>
+                    <h2><a href="./starwarskotor/" target="_blank"><cite>Star Wars: Knights of the Old Republic</cite></a></h2>
                     <a href="./starwarskotor/" target="_blank"><img src="./starwarskotor/img/swkotor-header.jpg" alt="Header of the Star Wars: Knights of the Old Republic series" width="100%"></a>
                 </section>
+
+                <section class="content-section">
+                    <h2><a href="./cassettebeasts/" target="_blank"><cite>Cassette Beasts</cite></a></h2>
+                    <a href="./cassettebeasts/" target="_blank"><img src="./cassettebeasts/img/cassettebeasts-header.png" alt="Header of the Star Wars: Knights of the Old Republic series" width="100%"></a>
+                </section>
             </div>
 
             <!-- <aside class="right-sidebar">
                 Right sidebar content here
             </aside> -->
         </main>
-        <footer-component></footer-component>
+        <footer></footer>
     </body>
 </html>
\ No newline at end of file
diff --git a/sitemap.html b/sitemap.html
index d9f746cb..76a09953 100644
--- a/sitemap.html
+++ b/sitemap.html
@@ -48,8 +48,8 @@
                     <li><a href="/mycreations/">My Creations</a></li>
                     <li><a href="/mymods/">My Mods</a></li>
                     <ul>
-                        <li><a href="/mymods/kotor1mods/"><em>Star Wars: Knights of the Old Republic</em></a></li>
-                        <li><a href="/mymods/kotor2mods/"><em>Star Wars: Knights of the Old Republic II: The Sith Lords</em></a></li>
+                        <li><a href="/mymods/kotor1mods/"><cite>Star Wars: Knights of the Old Republic</cite></a></li>
+                        <li><a href="/mymods/kotor2mods/"><cite>Star Wars: Knights of the Old Republic II: The Sith Lords</cite></a></li>
                     </ul>
                     <li><a href="/playlists/">Playlists</a></li>
                     <li><a href="/featured/">Featured</a></li>
@@ -63,13 +63,13 @@
                     </ul>
                     <li><a href="/shrines/">Shrines</a></li>
                     <ul>
-                        <li><a href="/shrines/asummersend/"><em>A Summer’s End — Hong Kong 1986</em></a></li>
+                        <li><a href="/shrines/asummersend/"><cite>A Summer’s End — Hong Kong 1986</cite></a></li>
                         <ul>
                             <li><a href="/shrines/asummersend/playlists.html">Playlists</a></li>
                             <li><a href="/shrines/asummersend/trivia.html">Trivia</a></li>
                             <li><a href="/shrines/asummersend/gallery.html">Gallery</a></li>
                         </ul>
-                        <li><a href="/shrines/starwarskotor/"><em>Star Wars: Knights of the Old Republic</em></a></li>
+                        <li><a href="/shrines/starwarskotor/"><cite>Star Wars: Knights of the Old Republic</cite></a></li>
                         <ul>
                             <li><a href="/shrines/starwarskotor/articles/">Articles</a></li>
                             <ul>
@@ -94,6 +94,7 @@
                                 <li><a href="/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music.html">The Sith Lords Restored Content Mod + M4-78 Enhancement Project Modules, Warp Codes & Music Overview</a></li>
                             </ul>
                         </ul>
+                        <li><a href="/shrines/cassettebeasts/"><cite>Cassette Beasts</cite></a></li>
                     </ul>
                     <li><a href="/links/">Links</a></li>
                     <li><a href="/changelog/">Changelog</a></li>