diff --git a/templates/storyteller-stream/index.html b/templates/storyteller-stream/index.html
index f74047b07d..eda1a6698c 100644
--- a/templates/storyteller-stream/index.html
+++ b/templates/storyteller-stream/index.html
@@ -35,40 +35,68 @@
       </div> -->
 
       <nav
-        class="navbar navbar-home navbar-expand-lg navbar-dark navbar-fixed py-3"
+        class="navbar navbar-expand-lg navbar-dark py-3 navbar-home"
+        aria-label="Offcanvas navbar large"
       >
         <div class="container">
-          <a class="navbar-brand me-5 pr-8" href="#">
-            <img src="assets/storyteller-logo.png" alt="" height="32" />
-          </a>
+          <a class="navbar-brand me-5 pr-8" href="#"
+            ><img
+              src="assets/storyteller-logo.png"
+              alt="Fake You Logo"
+              height="34"
+          /></a>
           <button
-            class="navbar-toggler"
+            class="navbar-toggler p-0 border-0"
             type="button"
-            data-toggle="collapse"
-            data-target="#navbarNavDropdown"
-            aria-controls="navbarNavDropdown"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
+            data-bs-toggle="offcanvas"
+            data-bs-target="#offcanvasNavbar2"
+            aria-controls="offcanvasNavbar2"
           >
             <span class="navbar-toggler-icon"></span>
           </button>
-          <div class="collapse navbar-collapse" id="navbarNavDropdown">
-            <ul class="navbar-nav">
-              <li class="nav-item active">
-                <a class="nav-link" href="clone.html">TTS Configs</a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">OBS Configs</a>
-              </li>
-            </ul>
-          </div>
           <div
-            class="d-grid gap-2 d-flex justify-content-start d-none d-lg-block"
+            class="offcanvas offcanvas-end text-white nav-bg-dark"
+            tabindex="-1"
+            id="offcanvasNavbar2"
+            aria-labelledby="offcanvasNavbar2Label"
           >
-            <a class="nav-login me-3" href="">Login</a>
-            <button type="button" class="btn btn-primary btn-lg">
-              Sign up
-            </button>
+            <div class="offcanvas-header">
+              <a class="navbar-brand me-5 pr-8" href="index.html">
+                <img src="assets/storyteller-logo.png" alt="" height="34" />
+              </a>
+              <button
+                type="button"
+                class="btn-close btn-close-white"
+                data-bs-dismiss="offcanvas"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="offcanvas-body">
+              <ul
+                class="navbar-nav justify-content-start flex-grow-1 align-items-lg-center"
+              >
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    aria-current="page"
+                    href="tts-configs.html"
+                    >TTS Configs</a
+                  >
+                </li>
+
+                <li class="nav-item">
+                  <a class="nav-link" aria-current="page" href="#"
+                    >OBS Configs</a
+                  >
+                </li>
+              </ul>
+              <div
+                class="d-grid gap-2 d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0"
+              >
+                <a class="nav-login me-3" href="">Login</a>
+                <button type="button" class="btn btn-primary">Sign up</button>
+              </div>
+            </div>
           </div>
         </div>
       </nav>
@@ -85,10 +113,7 @@
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
           <div class="panel-ani mt-3">
-            <button
-              type="button"
-              class="btn btn-primary btn-lg btn-hero load-hidden"
-            >
+            <button type="button" class="btn btn-primary btn-hero load-hidden">
               Sign Up<i class="fa-solid fa-arrow-right-long ms-2"></i>
             </button>
           </div>
@@ -292,18 +317,8 @@
 
     <!-- Scripts -->
     <script
-      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
-      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
-      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
-      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
       crossorigin="anonymous"
     ></script>
 
diff --git a/templates/storyteller-stream/style.css b/templates/storyteller-stream/style.css
index b11a2e98a5..d6bbc708d5 100644
--- a/templates/storyteller-stream/style.css
+++ b/templates/storyteller-stream/style.css
@@ -53,6 +53,10 @@ h1 {
   font-weight: 700;
 }
 
+h3 {
+  color: rgba(255, 255, 255, 0.8);
+}
+
 p {
   font-weight: 300;
   margin-bottom: 0;
@@ -121,8 +125,16 @@ img {
   border: none;
 }
 
+.nav-bg-dark {
+  background-color: #17101c !important;
+}
+
+.offcanvas {
+  width: 100vw;
+}
+
 .nav-link {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
   padding-left: 16px !important;
   padding-right: 16px !important;
@@ -178,6 +190,7 @@ span.word:after {
   ) !important;
   position: relative;
   overflow: hidden;
+  min-height: 100%;
 }
 
 .bg-hero {
@@ -190,18 +203,16 @@ span.word:after {
 }
 
 .lead {
-  color: rgba(255, 255, 255, 0.6);
+  color: rgba(255, 255, 255, 0.8);
 }
 
 .btn {
   border-radius: 5px;
   outline: none;
-  height: 42px;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
-  padding-left: 24px !important;
-  padding-right: 24px !important;
-  z-index: 2;
+  padding: 10px 24px;
+  z-index: 1;
 }
 
 .btn-primary {
@@ -253,11 +264,10 @@ span.word:after {
 .btn-hero {
   padding-left: 35px !important;
   padding-right: 35px !important;
-  height: 48px;
 }
 
 .nav-login {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
@@ -313,7 +323,7 @@ span.word:after {
   bottom: 0;
   max-height: 110%;
   max-width: 140%;
-  z-index: 2;
+  z-index: 1;
 }
 
 .hero-floor {
@@ -573,6 +583,32 @@ span.word:after {
   max-width: 800px !important;
 }
 
+.nav-pills {
+  backdrop-filter: blur(5px);
+  width: 100% !important;
+}
+
+.nav-link:focus,
+.nav-link:hover {
+  color: #fc6b68;
+}
+
+.nav-pills .nav-link {
+  padding: 16px 24px !important;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 0;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  border-bottom: 5px solid;
+  color: #fff !important;
+}
+
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: #fc6b68 !important;
+  border-bottom: 5px solid;
+}
+
 @media (min-width: 992px) {
   .panel-title {
     position: absolute;
@@ -583,6 +619,10 @@ span.word:after {
   .p-lg-4 {
     padding: 2rem !important;
   }
+
+  .nav-bg-dark {
+    background-color: #17101c00 !important;
+  }
 }
 
 @media (min-width: 768px) {
diff --git a/templates/storyteller-stream/tts-configs.html b/templates/storyteller-stream/tts-configs.html
new file mode 100644
index 0000000000..fc38c7fc5b
--- /dev/null
+++ b/templates/storyteller-stream/tts-configs.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Bootstrap CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <script src="https://unpkg.com/scrollreveal"></script>
+    <script
+      src="https://kit.fontawesome.com/a73498f2ed.js"
+      crossorigin="anonymous"
+    ></script>
+
+    <title>Storyteller Stream. Text to Speech For Your Stream.</title>
+  </head>
+  <body></body>
+    <div class="bg-gradient">
+      <nav
+        class="navbar navbar-expand-lg navbar-dark py-3"
+        aria-label="Offcanvas navbar large"
+      >
+        <div class="container">
+          <a class="navbar-brand me-5 pr-8" href="index.html"
+            ><img
+              src="assets/storyteller-logo.png"
+              alt="Fake You Logo"
+              height="34"
+          /></a>
+          <button
+            class="navbar-toggler p-0 border-0"
+            type="button"
+            data-bs-toggle="offcanvas"
+            data-bs-target="#offcanvasNavbar2"
+            aria-controls="offcanvasNavbar2"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div
+            class="offcanvas offcanvas-end text-white nav-bg-dark"
+            tabindex="-1"
+            id="offcanvasNavbar2"
+            aria-labelledby="offcanvasNavbar2Label"
+          >
+            <div class="offcanvas-header">
+              <a class="navbar-brand me-5 pr-8" href="#">
+                <img src="assets/storyteller-logo.png" alt="" height="34" />
+              </a>
+              <button
+                type="button"
+                class="btn-close btn-close-white"
+                data-bs-dismiss="offcanvas"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="offcanvas-body">
+              <ul class="navbar-nav justify-content-start flex-grow-1 align-items-lg-center">
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    aria-current="page"
+                    href="tts-configs.html"
+                    >TTS Configs</a
+                  >
+                </li>
+
+                <li class="nav-item">
+                  <a class="nav-link" aria-current="page" href="#"
+                    >OBS Configs</a
+                  >
+                </li>
+              </ul>
+              <div
+                class="d-grid gap-2 d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0"
+              >
+              <button type="button" class="btn btn-secondary"><i class="fa-solid fa-user me-2"></i>BFlatastic</button>
+                <button type="button" class="btn btn-destructive"><i class="fa-solid fa-arrow-right-from-bracket me-2"></i>Logout</button>
+              </div>
+              
+              
+            </div>
+          </div>
+        </div>
+      </nav>
+
+    <div class="container py-5 d-flex flex-column">
+        <h1><span class="word">Stream Setup</span></h1>
+        <h3>Configure TTS (and soon much more!)</h3>
+
+      <div class="alert alert-primary mt-4">
+        You can create rules for matching different categories of events: cheers (bits), channel point rewards, etc. When an event occurs in your stream, we compare it against the rules in its category. The first matched rule (from the top) is selected, and the action that it specifies is taken. For now this is limited to FakeYou text to speech, but we'll be adding lots of new capabilities soon.
+      </div>
+
+      <!-- Tabs Section -->
+      <div class="pt-5">
+        <!-- Nav -->
+        <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
+          <li class="nav-item w-50" role="presentation">
+            <button class="nav-link active w-100 rounded-start" id="pills-bits-tab" data-bs-toggle="pill" data-bs-target="#pills-bits" type="button" role="tab" aria-controls="pills-bits" aria-selected="true">Bits</button>
+          </li>
+          <li class="nav-item w-50" role="presentation">
+            <button class="nav-link w-100 rounded-end" id="pills-cp-tab" data-bs-toggle="pill" data-bs-target="#pills-cp" type="button" role="tab" aria-controls="pills-cp" aria-selected="false">Channel Points</button>
+          </li>
+        </ul>
+        <!-- Content -->
+        <div class="tab-content pt-4" id="pills-tabContent">
+          <div class="tab-pane fade show active" id="pills-bits" role="tabpanel" aria-labelledby="pills-bits-tab">
+            <h2 class="d-flex fw-bold align-items-center"><img class="me-3" src="assets/bits-icon.png" height="34" alt="">Bits / Cheers</h2> 
+            <p class="lead">These settings are best for small and medium-sized channels.</p>
+            <div class="d-flex flex-column gap-3 mt-4">
+              <button class="btn btn-primary w-100"><i class="fa-solid fa-plus me-2"></i>Create New Bits / Cheer Rule</button>
+              <button class="btn btn-secondary w-100"><i class="fa-solid fa-sort me-2"></i>Reorder Rules</button>
+            </div>
+
+            <div class="d-flex flex-column panel p-3 p-lg-4 mt-4">
+              <h4 class="fw-bold pb-3">Spend at least 100 bits</h4>
+              <p class="pb-4">
+                TTS with a random voice from the following 2 voice(s):<br/><br/>
+
+                • "Weird Al" Yankovic<br/>
+                • Phoenix Wright (Ultimate Marvel vs. Capcom 3, Sam Riegel)
+              </p>
+              <div class="d-flex gap-3">
+                <button class="btn btn-secondary w-50"><i class="fa-solid fa-pen-to-square me-2"></i>Edit</button>
+                <button class="btn btn-destructive w-50"><i class="fa-solid fa-trash-can me-2"></i>Delete</button>
+              </div>
+            </div>
+
+            <div class="d-flex flex-column panel p-3 p-lg-4 mt-4">
+              <h4 class="fw-bold pb-3">Cheermote name matches "DoodleCheer100"</h4>
+              <p class="pb-4">
+                TTS with voice: Phoenix Wright (Ultimate Marvel vs. Capcom 3, Sam Riegel)
+              </p>
+              <div class="d-flex gap-3">
+                <button class="btn btn-secondary w-50"><i class="fa-solid fa-pen-to-square me-2"></i>Edit</button>
+                <button class="btn btn-destructive w-50"><i class="fa-solid fa-trash-can me-2"></i>Delete</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="tab-pane fade" id="pills-cp" role="tabpanel" aria-labelledby="pills-cp-tab">
+            <h2 class="d-flex fw-bold align-items-center"><img class="me-3" src="assets/channel-points-icon.png" height="34" alt="">Channel Points / Rewards</h2> 
+            <p class="lead">These settings are best for small channels.</p>
+            <div class="d-flex flex-column gap-3 mt-4">
+              <button class="btn btn-primary w-100"><i class="fa-solid fa-plus me-2"></i>Create Channel Points Rule</button>
+              <button class="btn btn-secondary w-100"><i class="fa-solid fa-sort me-2"></i>Reorder Rules</button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+        
+    </div>
+
+      
+
+      
+
+      
+
+      <div class="container">
+        <hr />
+      </div>
+
+      <footer class="d-flex flex-column container py-5 gap-4">
+        <div
+          class="text-center align-items-center justify-content-center gap-3"
+        >
+          <a class="footer-link" href="#">TTS Configs</a>
+          &nbsp;|&nbsp;
+          <a class="footer-link" href="#">OBS Configs</a>
+          &nbsp;|&nbsp;
+          <a class="footer-link" href="#">Terms</a>
+        </div>
+        <div class="d-flex justify-content-center gap-4">
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-discord"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-twitch"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-twitter"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-facebook"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-patreon"></i
+          ></a>
+        </div>
+        <div class="d-flex justify-content-center">
+          © 2022 Storyteller Stream.
+        </div>
+      </footer>
+    </div>
+
+    <!-- Scripts -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+      crossorigin="anonymous"
+    ></script>
+
+    
+
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script type="text/javascript">
+      particlesJS("particles-js", {
+        particles: {
+          number: {
+            value: 160,
+            density: {
+              enable: true,
+              value_area: 800,
+            },
+          },
+          color: {
+            value: "#ffffff",
+          },
+          shape: {
+            type: "circle",
+            stroke: {
+              width: 0,
+              color: "#000000",
+            },
+            polygon: {
+              nb_sides: 5,
+            },
+            image: {
+              src: "img/github.svg",
+              width: 100,
+              height: 100,
+            },
+          },
+          opacity: {
+            value: 0.1,
+            random: false,
+            anim: {
+              enable: false,
+              speed: 1,
+              opacity_min: 0,
+              sync: false,
+            },
+          },
+          size: {
+            value: 4,
+            random: true,
+            anim: {
+              enable: false,
+              speed: 4,
+              size_min: 0.3,
+              sync: false,
+            },
+          },
+          line_linked: {
+            enable: false,
+            distance: 150,
+            color: "#ffffff",
+            opacity: 0.4,
+            width: 1,
+          },
+          move: {
+            enable: true,
+            speed: 0.5,
+            direction: "top",
+            random: true,
+            straight: false,
+            out_mode: "out",
+            bounce: false,
+            attract: {
+              enable: false,
+              rotateX: 600,
+              rotateY: 600,
+            },
+          },
+        },
+        interactivity: {
+          detect_on: "canvas",
+          events: {
+            onhover: {
+              enable: false,
+              mode: "bubble",
+            },
+            onclick: {
+              enable: false,
+              mode: "repulse",
+            },
+            resize: true,
+          },
+          modes: {
+            grab: {
+              distance: 400,
+              line_linked: {
+                opacity: 1,
+              },
+            },
+            bubble: {
+              distance: 250,
+              size: 0,
+              duration: 2,
+              opacity: 0,
+              speed: 3,
+            },
+            repulse: {
+              distance: 400,
+              duration: 0.4,
+            },
+            push: {
+              particles_nb: 4,
+            },
+            remove: {
+              particles_nb: 2,
+            },
+          },
+        },
+        retina_detect: true,
+      });
+    </script>
+  </body>
+</html>