diff --git a/_layouts/default.html b/_layouts/default.html
index cce8007..ef578f9 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -26,19 +26,35 @@
           </svg>
         </a>
       {% endif %}
-      <a class="header-logo-link" href="{{ '/' | relative_url }}" aria-label="JSONC home">
-        <img class="header-logo" src="{{ '/assets/logo.png' | relative_url }}" alt="JSONC logo">
-      </a>
-      <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
-      <h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
+      <div class="header-inner">
+        <a class="header-logo-link" href="{{ '/' | relative_url }}" aria-label="JSONC home">
+          <img class="header-logo" src="{{ '/assets/logo.png' | relative_url }}" alt="JSONC logo">
+        </a>
+        <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
+      </div>
       {% if site.show_downloads %}
         <a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
         <a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
       {% endif %}
     </header>
 
-    <main id="content" class="main-content" role="main">
-      {{ content }}
+    <button class="toc-toggle" aria-label="Open table of contents" aria-expanded="false" aria-controls="toc">
+      <span class="toc-toggle-bar"></span>
+      <span class="toc-toggle-bar"></span>
+      <span class="toc-toggle-bar"></span>
+    </button>
+    <div class="toc-backdrop" aria-hidden="true"></div>
+
+    <div class="page-body">
+      <nav id="toc" class="toc-sidebar" aria-label="Table of contents">
+        <div class="toc-inner">
+          <p class="toc-title">Contents</p>
+          <ol class="toc-list"></ol>
+        </div>
+      </nav>
+
+      <main id="content" class="main-content" role="main">
+        {{ content }}
 
       <footer class="site-footer">
         {% if site.github.is_project_page %}
@@ -46,10 +62,91 @@ <h2 class="project-tagline">{{ page.description | default: site.description | de
         {% endif %}
         <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
       </footer>
-    </main>
+      </main>
+    </div>
   </body>
   <script>hljs.highlightAll();</script>
 
+  <!-- TOC burger toggle -->
+  <script>
+    (function () {
+      var btn = document.querySelector('.toc-toggle');
+      var toc = document.getElementById('toc');
+      var backdrop = document.querySelector('.toc-backdrop');
+      function openToc() {
+        toc.classList.add('toc-open');
+        backdrop.classList.add('toc-backdrop-visible');
+        btn.setAttribute('aria-expanded', 'true');
+        document.body.style.overflow = 'hidden';
+      }
+      function closeToc() {
+        toc.classList.remove('toc-open');
+        backdrop.classList.remove('toc-backdrop-visible');
+        btn.setAttribute('aria-expanded', 'false');
+        document.body.style.overflow = '';
+      }
+      btn.addEventListener('click', function () {
+        toc.classList.contains('toc-open') ? closeToc() : openToc();
+      });
+      backdrop.addEventListener('click', closeToc);
+      toc.addEventListener('click', function (e) {
+        if (e.target.tagName === 'A') closeToc();
+      });
+    })();
+  </script>
+
+  <!-- Table of Contents -->
+  <script>
+    (function () {
+      const headings = document.querySelectorAll('.main-content h2, .main-content h3');
+      const tocList = document.querySelector('.toc-list');
+      if (!tocList || headings.length === 0) return;
+
+      let currentH2Item = null;
+      headings.forEach(function (heading) {
+        if (!heading.id) {
+          heading.id = heading.textContent.trim().toLowerCase()
+            .replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
+        }
+        const link = document.createElement('a');
+        link.href = '#' + heading.id;
+        link.textContent = heading.textContent;
+
+        const li = document.createElement('li');
+        li.appendChild(link);
+
+        if (heading.tagName === 'H2') {
+          li.classList.add('toc-h2');
+          tocList.appendChild(li);
+          currentH2Item = li;
+        } else {
+          li.classList.add('toc-h3');
+          let subList = currentH2Item && currentH2Item.querySelector('ol');
+          if (!subList) {
+            subList = document.createElement('ol');
+            if (currentH2Item) currentH2Item.appendChild(subList);
+            else tocList.appendChild(subList);
+          }
+          subList.appendChild(li);
+        }
+      });
+
+      // Highlight active section on scroll
+      const allLinks = tocList.querySelectorAll('a');
+      const observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            allLinks.forEach(function (a) { a.classList.remove('toc-active'); });
+            const active = tocList.querySelector('a[href="#' + entry.target.id + '"]');
+            if (active) active.classList.add('toc-active');
+          }
+        });
+      }, { rootMargin: '0px 0px -80% 0px' });
+
+      headings.forEach(function (h) { observer.observe(h); });
+    })();
+  </script>
+
   <!-- Invalid syntax highlighting-->
   <script>
     function markInvalidNumbers(codeBlock) {
diff --git a/assets/css/style.scss b/assets/css/style.scss
index adbd67f..99aa4d6 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -3,14 +3,37 @@
 
 @import 'jekyll-theme-cayman';
 
+body {
+  font-family: Arial, sans-serif;
+}
+
 .page-header {
   position: relative;
+  padding: 1rem 1rem 0.9rem;
+}
+
+.header-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 244px 1fr;
+  column-gap: 1.5rem;
+  align-items: center;
+  min-height: 130px;
+}
+
+.project-name {
+  margin: 0;
+  font-size: clamp(1.8rem, 5vw, 2.3rem);
+  align-self: center;
+  justify-self: start;
+  text-align: left;
 }
 
 .header-repo-link {
   position: absolute;
-  top: 1.5rem;
-  right: 1.5rem;
+  top: 1rem;
+  right: 1rem;
   color: rgba(255, 255, 255, 0.92);
   line-height: 0;
   transition: opacity 160ms ease, transform 160ms ease;
@@ -22,27 +45,210 @@
 }
 
 .header-repo-icon {
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   display: block;
 }
 
 .header-logo-link {
   display: inline-block;
-  margin-bottom: 0.85rem;
+  margin: 0;
+  justify-self: center;
   line-height: 0;
 }
 
 .header-logo {
-  width: 56px;
+  width: 128px;
   height: auto;
   display: block;
 }
 
 @media screen and (max-width: 42em) {
+  .page-header {
+    padding: 1.1rem 0.8rem 0.9rem;
+  }
+
+  .header-inner {
+    grid-template-columns: 1fr;
+    row-gap: 0.35rem;
+    justify-items: center;
+    min-height: 0;
+  }
+
+  .project-name {
+    font-size: 1.65rem;
+    justify-self: center;
+  }
+
+  .header-logo {
+    width: 98px;
+  }
+
   .header-repo-link {
-    top: 1rem;
-    right: 1rem;
+    top: 0.7rem;
+    right: 0.7rem;
+  }
+}
+
+/* Page layout with TOC sidebar */
+.page-body {
+  display: flex;
+  align-items: flex-start;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.toc-sidebar {
+  flex: 0 0 244px;
+  position: sticky;
+  top: 1.5rem;
+  max-height: calc(100vh - 3rem);
+  overflow-y: auto;
+  padding: 1rem 1rem 1rem 1.5rem;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  border-right: 1px solid #e0e0e0;
+  scrollbar-width: thin;
+}
+
+.toc-inner {
+  padding: 0;
+}
+
+.toc-title {
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  letter-spacing: 0.08em;
+  color: #555;
+  margin: 0 0 0.6rem 0;
+}
+
+.toc-list,
+.toc-list ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc-list li {
+  margin: 0.2rem 0;
+}
+
+.toc-list a {
+  color: #555;
+  text-decoration: none;
+  display: block;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  transition: background 120ms, color 120ms;
+}
+
+.toc-list a:hover {
+  background: #f0f0f0;
+  color: #155799;
+}
+
+.toc-list a.toc-active {
+  color: #155799;
+  font-weight: 600;
+  background: #eef4fb;
+}
+
+.toc-h3 {
+  padding-left: 0.8rem;
+  font-size: 0.88rem;
+}
+
+.main-content {
+  flex: 1;
+  min-width: 0;
+  padding-left: 1.5rem;
+}
+
+/* Burger toggle button — hidden on wide screens */
+.toc-toggle {
+  display: none;
+}
+
+@media screen and (max-width: 64em) {
+  .toc-sidebar {
+    /* Hidden by default on small screens; slides in as a drawer */
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 260px;
+    max-height: 100%;
+    background: #fff;
+    box-shadow: 2px 0 12px rgba(0,0,0,0.18);
+    transform: translateX(-110%);
+    transition: transform 240ms ease;
+    z-index: 200;
+    padding-top: 3.5rem;
+  }
+
+  .toc-sidebar.toc-open {
+    transform: translateX(0);
+  }
+
+  .toc-list li {
+    margin: 3px 0;
+  }
+
+  .toc-list a {
+    padding: 0.35rem 0.3rem;
+  }
+
+  .toc-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.35);
+    z-index: 199;
+  }
+
+  .toc-backdrop.toc-backdrop-visible {
+    display: block;
+  }
+
+  /* Burger button */
+  .toc-toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    position: fixed;
+    bottom: 1.2rem;
+    right: 1.2rem;
+    z-index: 201;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    border: none;
+    background: #155799;
+    cursor: pointer;
+    padding: 11px 10px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    align-items: center;
+  }
+
+  .toc-toggle-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    background: #fff;
+    border-radius: 2px;
+    transition: opacity 160ms;
+  }
+
+  .toc-toggle:hover {
+    background: #1a6db5;
+  }
+
+  .main-content {
+    padding-left: 1.2rem;
+    padding-right: 1rem;
   }
 }
 
diff --git a/assets/logo.png b/assets/logo.png
index ff0344e..209d37c 100644
Binary files a/assets/logo.png and b/assets/logo.png differ
diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 0000000..5d2ea01
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,43 @@
+<svg width="480" height="480" viewBox="120 105 480 480" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" overflow="visible">
+    <defs>
+        <clipPath id="clip0">
+            <rect x="270" y="220" width="320" height="320" />
+        </clipPath>
+        <clipPath id="clip1">
+            <rect x="270" y="220" width="320" height="320" />
+        </clipPath>
+        <clipPath id="clip2">
+            <rect x="270" y="220" width="320" height="320" />
+        </clipPath>
+        <linearGradient x1="374.867" y1="288.868" x2="536.196" y2="450.203"
+            gradientUnits="userSpaceOnUse" spreadMethod="pad" id="fill3">
+            <stop offset="0" />
+            <stop offset="1" stop-color="#89c56e" />
+        </linearGradient>
+        <linearGradient x1="536.196" y1="450.203" x2="374.867" y2="288.882"
+            gradientUnits="userSpaceOnUse" spreadMethod="pad" id="fill4">
+            <stop offset="0" />
+            <stop offset="1" stop-color="#89c56e" />
+        </linearGradient>
+    </defs>
+    <g>
+        <g clip-path="url(#clip0)" transform="translate(-10 0)">
+            <g clip-path="url(#clip1)">
+                <g clip-path="url(#clip2)">
+                    <g transform="translate(570, 369.5) scale(1.1) translate(-570, -369.5)">
+                        <path
+                            d="M455.307 425.462C505.97 494.527 555.552 406.184 555.479 353.059 555.392 290.247 491.729 255.142 455.265 255.142 396.739 255.142 341 303.512 341 369.693 341 443.254 404.891 484 455.265 484 443.866 482.359 405.879 474.219 405.368 386.722 405.024 327.544 424.672 303.902 455.182 314.302 455.866 314.556 488.837 327.562 488.837 370.051 488.837 412.359 455.307 425.462 455.307 425.462Z"
+                            fill="url(#fill3)" fill-rule="evenodd" />
+                        <path
+                            d="M455.247 314.255C421.77 302.717 380.76 330.308 380.76 385.573 380.76 475.81 447.63 484 455.735 484 514.261 484 570 435.629 570 369.448 570 295.888 506.109 255.142 455.735 255.142 469.687 253.21 530.934 270.241 530.934 353.951 530.934 408.54 485.201 438.259 455.457 425.561 454.774 425.307 421.803 412.301 421.803 369.812 421.803 327.504 455.247 314.254 455.247 314.254Z"
+                            fill="url(#fill4)" fill-rule="evenodd" />
+                    </g>
+                </g>
+            </g>
+        </g>
+        <!-- Forward Slashes-->
+        <text fill="#6A9955" font-family="Aptos Display,Aptos Display_MSFontService,sans-serif"
+            font-weight="400" font-size="382.667" letter-spacing="-50" transform="translate(152.073 483)">//</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/favicon.png b/favicon.png
index ff0344e..209d37c 100644
Binary files a/favicon.png and b/favicon.png differ
diff --git a/index.markdown b/index.markdown
index 1b8499c..4361765 100644
--- a/index.markdown
+++ b/index.markdown
@@ -73,7 +73,7 @@ Multi-line comments cannot be nested. The closing of the nested comment will be
 }
 ```
 
-## Trailing commas
+### Trailing Commas
 
 JSONC parsers MAY support trailing commas. For more information regarding trailing commas, refer to [Appendix A](#appendix-a-trailing-commas-and-jsonc).
 
@@ -81,7 +81,7 @@ JSONC parsers MAY support trailing commas. For more information regarding traili
 
 Comments in JSONC are ignored during parsing, allowing developers to annotate their JSON data without affecting its structure or content.
 
-## Filename extension
+## Filename Extension
 
 The recommended file extension for JSONC documents is `.jsonc`.
 
@@ -96,7 +96,7 @@ or
 // -*- jsonc -*-
 ```
 
-## Media type
+## Media Type
 
 When transmitting JSONC over a network, senders SHOULD use the media type `application/jsonc`.
 
@@ -109,7 +109,7 @@ Consumers that support JSONC SHOULD accept `application/jsonc`.
 - Configuration Files: JSONC is useful for configuration files where comments can provide explanations or instructions.
 - Data Annotation: JSONC allows developers to annotate JSON data with comments for better understanding and maintenance.
 
-## Formal grammar
+## Formal Grammar
 
 The formal grammar of JSONC is available here:
 
diff --git a/package.json b/package.json
index 145893f..197570b 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
+    "dev": "bundle exec jekyll serve --livereload --host 0.0.0.0 --port 4000",
     "railroad": "node generate-railroad.js"
   },
   "dependencies": {