diff --git a/docs/source/assets/main.css b/docs/source/assets/main.css
index 5810d98..49fc5fb 100644
--- a/docs/source/assets/main.css
+++ b/docs/source/assets/main.css
@@ -1,29 +1,355 @@
-h1
-{
-    margin:0;
-    padding:10px;
-    width:100%;
-    background-color: darkgray;
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* CSS Variables for the dark theme */
+:root {
+    --bg-main-start: #1d1d1b;
+    --bg-main-end: #2b2a27;
+    --bg-header-start: #181817;
+    --bg-header-end: #22211f;
+    --bg-sidebar-start: #1b1a18;
+    --bg-sidebar-end: #242320;
+    --text-primary: #e8e4d8;
+    --text-secondary: #bcb8aa;
+    --text-accent: #d4c389;
+    --text-emphasis: #f1e9c8;
+    --card-bg: rgba(255, 255, 255, 0.04);
+    --card-border: rgba(255, 255, 255, 0.06);
+    --border-radius: 8px;
+}
+
+/* Global styles */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Inter", "Segoe UI", Roboto, sans-serif;
+    background: linear-gradient(to bottom, var(--bg-main-start), var(--bg-main-end));
+    color: var(--text-primary);
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+    min-height: 100vh;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    color: var(--text-emphasis);
+    font-weight: 600;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin: 0;
+    padding: 0;
+}
+
+h2 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+p {
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+/* Code styling */
+code, pre {
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+    font-size: 0.9em;
+}
+
+pre {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    margin: 1.5rem 0;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+code {
+    background: var(--card-bg);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    border: 1px solid var(--card-border);
+}
+
+/* Links */
+a {
+    color: var(--text-accent);
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+a:hover {
+    color: var(--text-emphasis);
+    filter: brightness(1.1);
+}
+
+/* Header */
+header {
+    background: linear-gradient(to bottom, var(--bg-header-start), var(--bg-header-end));
+    padding: 1.5rem 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid var(--card-border);
+}
+
+header h1 a {
+    color: var(--text-emphasis);
+    font-size: 1.8rem;
+    font-weight: 700;
+}
+
+header h1 a:hover {
+    color: var(--text-accent);
+}
+
+/* Main layout container */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+/* Sidebar navigation */
+.sidebar {
+    background: linear-gradient(to bottom, var(--bg-sidebar-start), var(--bg-sidebar-end));
+    min-height: calc(100vh - 200px);
+    padding: 2rem 1.5rem;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--card-border);
+    flex: 0 0 280px;
+    max-width: 280px;
+}
+
+#leftnav {
+    background: linear-gradient(to bottom, var(--bg-sidebar-start), var(--bg-sidebar-end));
+    min-height: calc(100vh - 200px);
+    padding: 2rem 1.5rem;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--card-border);
+    flex: 0 0 280px;
+    max-width: 280px;
+}
+
+.nav-menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.nav-menu .nav-item {
+    margin-bottom: 0.5rem;
+}
+
+.nav-menu .nav-link {
+    color: var(--text-primary);
+    padding: 0.8rem 1.2rem;
+    margin-bottom: 0.5rem;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    border: 1px solid transparent;
+    display: block;
+}
+
+.nav-menu .nav-link:hover {
+    background: var(--card-bg);
+    color: var(--text-accent);
+    border-color: var(--text-accent);
+    filter: brightness(1.1);
+    transform: translateX(4px);
+}
+
+/* Main content area */
+.main-content {
+    flex: 1;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--card-border);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.col-lg {
+    flex: 1;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--card-border);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Cards and sections */
+.waveform-demo,
+.waveform-visualization {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    margin: 1.5rem 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.waveform-visualization canvas {
+    border-radius: 6px;
+    border: 1px solid var(--card-border);
+}
+
+/* Lists */
+ul, ol {
+    padding-left: 1.5rem;
+}
+
+li {
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+}
+
+/* Emphasis and strong text */
+strong, b {
+    color: var(--text-emphasis);
+    font-weight: 600;
+}
+
+em, i {
+    color: var(--text-accent);
+}
+
+/* Tables */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+    background: var(--card-bg);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    border: 1px solid var(--card-border);
+}
+
+th, td {
+    padding: 0.8rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid var(--card-border);
+}
+
+th {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-emphasis);
+    font-weight: 600;
+}
+
+/* Footer */
+footer {
+    background: linear-gradient(to bottom, var(--bg-header-start), var(--bg-header-end));
+    border-top: 1px solid var(--card-border);
+    padding: 2rem 0;
+    margin-top: 3rem;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
+}
+
+footer .nav-link {
+    color: var(--text-secondary);
+    transition: color 0.3s ease;
+}
+
+footer .nav-link:hover {
+    color: var(--text-accent);
+}
+
+/* Welcome section styling */
+.subtitle {
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+    font-style: italic;
 }
 
-#menu
-{
-    float:left;
-    width: 300px;
-    background-color: white;
+/* Special styling for the welcome section */
+.main-content h1:first-of-type {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    margin: 0 0 2rem 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    text-align: center;
+    font-size: 2.5rem;
+    letter-spacing: 0.5px;
 }
 
-#maincontent
-{
-    padding: 5px;
+/* Make the welcome message stand out */
+.main-content > p:first-of-type {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    font-size: 1.1rem;
+    line-height: 1.7;
 }
 
-#body
-{
-    margin-left: 300px;
+/* Responsive design */
+@media (max-width: 992px) {
+    .container[style*="display: flex"] {
+        flex-direction: column !important;
+    }
+    
+    .sidebar, #leftnav {
+        max-width: 100% !important;
+        margin-bottom: 2rem;
+        min-height: auto;
+        flex: none !important;
+    }
+    
+    .main-content, .col-lg {
+        margin-left: 0;
+    }
+    
+    .container {
+        padding: 0 0.5rem;
+    }
+    
+    h1 {
+        font-size: 2rem;
+    }
+    
+    h2 {
+        font-size: 1.5rem;
+    }
 }
 
-#footer 
-{
-    border-top: 1px solid black;
+@media (max-width: 768px) {
+    header {
+        padding: 1rem 0;
+    }
+    
+    header h1 a {
+        font-size: 1.5rem;
+    }
+    
+    .main-content, .col-lg {
+        padding: 1rem;
+    }
+    
+    .sidebar, #leftnav {
+        padding: 1rem;
+    }
 }
\ No newline at end of file
diff --git a/docs/templates/Default.cshtml b/docs/templates/Default.cshtml
index b86f747..9d69b0b 100644
--- a/docs/templates/Default.cshtml
+++ b/docs/templates/Default.cshtml
@@ -1,15 +1,12 @@
 @inherits Chloroplast.Core.Rendering.ChloroplastTemplateBase<Chloroplast.Core.Rendering.RenderedContent>
-<div class="container" style="margin-left:0">
-    <div class="row">
-        @await PartialAsync("source/menu.md")
-        <div class="col-lg">
-            <h2>@Model.GetMeta("title")</h2>
-            @if (@Model.HasMeta("subtitle"))
-            {
-                <h3>@Model.GetMeta("subtitle")</h3>
-            }
-            
-            @Raw(Model.Body)
-        </div>
+<div class="container" style="display: flex; gap: 2rem; margin: 2rem auto; max-width: 1200px;">
+    @await PartialAsync("source/menu.md")
+    <div class="main-content">
+        @if (@Model.HasMeta("subtitle"))
+        {
+            <p class="subtitle" style="color: var(--text-secondary); font-size: 1.2rem; margin-bottom: 2rem; font-style: italic;">@Model.GetMeta("subtitle")</p>
+        }
+        
+        @Raw(Model.Body)
     </div>
 </div>
\ No newline at end of file
diff --git a/docs/templates/SiteFrame.cshtml b/docs/templates/SiteFrame.cshtml
index aab966a..ba9998a 100644
--- a/docs/templates/SiteFrame.cshtml
+++ b/docs/templates/SiteFrame.cshtml
@@ -6,50 +6,34 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@Model.GetMeta("Title")</title>
     <link href="@Asset("/assets/main.css")" rel="stylesheet" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <style type="text/css">
-        pre {
-            white-space: pre-wrap;
-            background-color: lightgray;
-            padding: 5px;
-            border-radius: 5px;
-            border: 1px solid black;
-        }
-        #leftnav
-        {
-            max-width:225px
-        }
-
-        @@media (max-width:992px){
-            #leftnav {
-                max-width:100%
-            }
-        }
-    </style>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 </head>
 <body>
-    <header class="p-3 bg-dark text-white">
+    <header>
         <div class="container">
-            <h1><a href="@Href("/")" class="text-white" style="text-decoration:none">Modulator Library</a></h1>
+            <h1><a href="@Href("/")">MODULATOR LIBRARY</a></h1>
         </div>
     </header>
 
     @Raw(Model.Body)
 
-    <div class="container">
-        <ul class="nav justify-content-center border-bottom pb-3 mb-3">
-    <li class="nav-item"><a href="@Href("/")" class="nav-link px-2 text-muted">Home</a></li>
-        <li class="nav-item"><a href="https://github.com/joelmartinez/modulator" class="nav-link px-2 text-muted">GitHub</a></li>
-        <li class="nav-item"><a href="https://codecube.net" class="nav-link px-2 text-muted">Maintainer</a></li>
-        </ul>
-        <footer class="py-3 my-4">
-            <p class="text-center text-muted">Made with ♥ by <a href="https://codecube.net">Joel Martinez</a></p>
-        </footer>
-    </div>
+    <footer>
+        <div class="container">
+            <nav style="text-align: center; margin-bottom: 1rem;">
+                <a href="@Href("/")" class="nav-link" style="display: inline-block; margin: 0 1rem;">Home</a>
+                <a href="https://github.com/joelmartinez/modulator" class="nav-link" style="display: inline-block; margin: 0 1rem;">GitHub</a>
+                <a href="https://codecube.net" class="nav-link" style="display: inline-block; margin: 0 1rem;">Maintainer</a>
+            </nav>
+            <p style="text-align: center; color: var(--text-secondary); margin: 0;">
+                Made with ♥ by <a href="https://codecube.net" style="color: var(--text-accent);">Joel Martinez</a>
+            </p>
+            <p style="text-align: center; color: var(--text-secondary); margin: 0.5rem 0 0 0; font-size: 0.9rem;">
+                Copyright 2024 Joel Martinez
+            </p>
+        </div>
+    </footer>
 
-    <!-- Example of how to include local scripts with cache busting -->
-    <!--<script src="@Asset("/assets/site.js")" type="text/javascript"></script>-->
-    
     <!-- Waveform Visualizer for modulation examples -->
     <script src="@Asset("/assets/waveform-visualizer.js")" type="text/javascript"></script>
     
@@ -69,7 +53,11 @@
                 try {
                     const visualizer = new WaveformVisualizer(canvas.id, {
                         width: 800, 
-                        height: 300
+                        height: 300,
+                        backgroundColor: 'rgba(255, 255, 255, 0.04)',
+                        gridColor: 'rgba(255, 255, 255, 0.1)',
+                        axisColor: '#e8e4d8',
+                        waveformColor: '#d4c389'
                     });
                     // Use the assets base path with the sample file
                     visualizer.loadData(assetsBasePath + sampleFile + '?v=' + assetCacheBust);
@@ -81,4 +69,4 @@
     });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/docs/templates/menu.cshtml b/docs/templates/menu.cshtml
index 6fa056c..46e7f44 100644
--- a/docs/templates/menu.cshtml
+++ b/docs/templates/menu.cshtml
@@ -10,11 +10,11 @@
         var children = section.GetChildren();
         if (children.Any())
         {
-        <ul class="nav nav-pills flex-column mb-auto">
+        <ul class="nav-menu">
             @foreach(var item in children)
             {
                 <li class="nav-item">
-                    <a href="@Href("/" + item["path"])" class="nav-link link-light">@item["title"]</a>
+                    <a href="@Href("/" + item["path"])" class="nav-link">@item["title"]</a>
                     @if (item.ContainsKey("items"))
                     {
                         @RenderNodes(item.GetSection("items"))
@@ -27,6 +27,6 @@
     }
 }
 
-<div class="col-sm bg-dark text-white" id="leftnav">
+<div class="sidebar" id="leftnav">
     @RenderNodes(Model.Metadata.GetSection ("navTree"))
 </div>
\ No newline at end of file