diff --git a/.obsidian/core-plugins.json b/.obsidian/core-plugins.json
index b977c25..1e23978 100644
--- a/.obsidian/core-plugins.json
+++ b/.obsidian/core-plugins.json
@@ -27,5 +27,7 @@
   "file-recovery": true,
   "publish": false,
   "sync": true,
-  "webviewer": false
+  "webviewer": false,
+  "footnotes": false,
+  "bases": true
 }
\ No newline at end of file
diff --git a/brand-assets/brand-style-guide-site/src/app/layout.tsx b/brand-assets/brand-style-guide-site/src/app/layout.tsx
index 13626d6..84f494d 100644
--- a/brand-assets/brand-style-guide-site/src/app/layout.tsx
+++ b/brand-assets/brand-style-guide-site/src/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
         <Sidebar />
         <div className="lg:pl-64">
           <Header />
-          <main className="pt-chorus-xl md:pt-chorus-xxl dark:bg-mulberry-950 light:bg-white min-h-screen pb-16 md:pb-0">
+          <main className="dark:bg-mulberry-950 light:bg-white min-h-screen pb-16 md:pb-0">
             {children}
           </main>
           <Footer />
diff --git a/brand-assets/brand-style-guide-site/src/components/Breadcrumb.tsx b/brand-assets/brand-style-guide-site/src/components/Breadcrumb.tsx
index 555aeb8..b9f47a9 100644
--- a/brand-assets/brand-style-guide-site/src/components/Breadcrumb.tsx
+++ b/brand-assets/brand-style-guide-site/src/components/Breadcrumb.tsx
@@ -100,7 +100,7 @@ const Breadcrumb = () => {
     <nav className="flex items-center px-chorus-sm secondary-nav breadcrumbs" aria-label="Breadcrumb">
       <ol className="flex items-center space-x-chorus-xs">
         {breadcrumbs.map((item, index) => (
-          <li key={`${item.href}-${index}`} className="flex items-center">
+          <li key={`${item.href}-${index}`} className="flex items-center ">
             {index > 0 && (
               <svg 
                 className="text-carbon-500 dark:text-mulberry-400 mr-chorus-xs w-4 h-4" 
diff --git a/brand-assets/brand-style-guide-site/src/components/Footer.tsx b/brand-assets/brand-style-guide-site/src/components/Footer.tsx
index df2aead..55f299d 100644
--- a/brand-assets/brand-style-guide-site/src/components/Footer.tsx
+++ b/brand-assets/brand-style-guide-site/src/components/Footer.tsx
@@ -17,17 +17,14 @@ export default function Footer() {
             <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
               A distributed, semantic and temporal knowledge fabric for humans and AI agents alike to share reasoning, context, and intent, not just files.
             </p>
-            <p className="text-xs text-carbon-500 dark:text-mulberry-400">
-              © 2025 CHORUS Services. All rights reserved.
-            </p>
           </div>
 
           {/* Navigation Links */}
-          <div className="grid grid-cols-2 gap-chorus-lg">
+          <div className="grid grid-cols-2 gap-chorus-sm">
             <div>
               <h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Brand Guide</h4>
-              <ul className="space-y-chorus-sm text-sm">
-                <li><Link href="/" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Overview</Link></li>
+              <ul className="space-y-chorus-xs text-sm">
+                <li><Link href="/" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Overview</Link></li>
                 <li><Link href="/identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Identity</Link></li>
                 <li><Link href="/colors" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Color Palette</Link></li>
                 <li><Link href="/typography" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Typography</Link></li>
@@ -36,11 +33,11 @@ export default function Footer() {
             </div>
             <div>
               <h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Resources</h4>
-              <ul className="space-y-chorus-sm text-sm">
-                <li><Link href="/usage" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Usage Guidelines</Link></li>
-                <li><Link href="/accessibility" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Accessibility</Link></li>
-                <li><Link href="/implementation" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Implementation</Link></li>
-                <li><a href="/logos/chorus-logo-package-web.zip" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Download Assets</a></li>
+              <ul className="space-y-chorus-xs text-sm">
+                <li><Link href="/usage" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Help</Link></li>
+                <li><Link href="/implementation" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Code</Link></li>
+                <li><a href="/logos/chorus-logo-package-web.zip" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Downloads</a></li>
+                <li><Link href="/accessibility" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Access</Link></li>
               </ul>
             </div>
           </div>
diff --git a/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx b/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx
index 29a26ed..40d72a5 100644
--- a/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx
+++ b/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx
@@ -39,16 +39,16 @@ const Sidebar = () => {
     {
       id: 'visual-identity',
       label: 'Visual Identity',
-      icon: 'Interface/Main_Component',
+      icon: 'Shape/Circle',
       items: [
-        { href: '/visual-identity', section: 'visual-identity', icon: 'Interface/Main_Component', label: 'Visual Identity' },
+        { href: '/visual-identity', section: 'visual-identity', icon: 'Shape/Circle', label: 'Visual Identity' },
         { href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' },
         { href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' },
         { href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' },
         { href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' },
         { href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' },
-        { href: '/components', section: 'components', icon: 'Interface/Settings', label: 'Components' },
-        { href: '/motion', section: 'motion', icon: 'Interface/Link', label: 'Motion System' },
+        { href: '/components', section: 'components', icon: 'Environment/Puzzle', label: 'Components' },
+        { href: '/motion', section: 'motion', icon: 'Interface/Trending_Up', label: 'Motion System' },
         { href: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' },
       ]
     },
@@ -93,17 +93,14 @@ const Sidebar = () => {
 
   return (
     <aside className="fixed inset-y-0 left-0 hidden w-64 border-r border-nickel-200 bg-white/80 p-0 backdrop-blur lg:block dark:border-mulberry-800 dark:bg-mulberry-950/80">
-      <div className="mb-chorus-xs p-chorus-xs">
-        <div className="px-chorus-md py-chorus-sm">
-          <ThreeLogo width={128} height={128} />
-          <div>
-            <div className="font-logo">CHORUS</div>
-          </div>
+      <div className="mb-chorus-xs pt-chorus-xs flex justify-content logo-group-circular">
+        <div className="pb-chorus-md item mx-auto logo-group-circular">
+          <ThreeLogo width={220} height={220} />
+          <h4 className="text-h4 font-logo">CHORUS</h4>
         </div>
-        <h3 className="text-h3 text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</h3>
       </div>
-      
-      <nav className="space-y-xs text-sm" id="brand-nav">
+      <h4 className="px-chorus-md py-chorus-xs text-h4 text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</h4>
+      <nav className="text-sm" id="brand-nav">
         {navCategories.map((category) => {
           const isExpanded = expandedSections.includes(category.id);
           const isActive = isCategoryActive(category);
diff --git a/brand-assets/chorus_brand_style_guide.html b/brand-assets/chorus_brand_style_guide.html
index 3493e19..234633a 100644
--- a/brand-assets/chorus_brand_style_guide.html
+++ b/brand-assets/chorus_brand_style_guide.html
@@ -4,6 +4,11 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>CHORUS Services Brand Style Guide</title>
+  <link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
+  <link rel="manifest" href="favicon_io/site.webmanifest">
+
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
     tailwind.config = {
@@ -1037,6 +1042,8 @@
     <header class="md:block inset-y-0 left-0 border-b border-nickel-200 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg">
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-chorus-lg">
+          
+          
           <div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
             <canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
             <noscript>
@@ -1046,8 +1053,78 @@
               <div class="font-thin font-logo">CHORUS</div>
             </div>
           </div>
+
+          <nav class="">
+            <ul class="primary-nav horizontal-menu md:flex items-center space-x-chorus-lg">
+              
+              <li class="menu-item">
+                <div class="menu-item">Overview</div>
+                <ul class="flyout-menu">
+                  <li class="menu-item"><a href="#overview" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Overview</a></li>
+                  <li class="menu-item"><a href="#identity" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Identity</a></li>
+                  <li class="menu-item"><a href="#usage" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Usage Guidelines</a></li>
+                </ul>
+              </li>
+              
+              <li class="menu-item">
+                <div class="menu-item">Visual Identity</div>
+                <ul class="flyout-menu">
+                  <li class="menu-item"><a href="#visual-identity" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Visual Identity</a></li>
+                  <li class="menu-item"><a href="#logo" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Logo System</a></li>
+                  <li class="menu-item"><a href="#typography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Typography</a></li>
+                  <li class="menu-item"><a href="#colors" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Color Palette</a></li>
+                  <li class="menu-item"><a href="#iconography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Iconography</a></li>
+                  <li class="menu-item"><a href="#accessibility" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Accessibility</a></li>
+                  <li class="menu-item"><a href="#components" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Components</a></li>
+                  <li class="menu-item"><a href="#motion" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Motion System</a></li>
+                  <li class="menu-item"><a href="#implementation" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Implementation</a></li>
+                </ul>
+              </li>
+
+              <li class="menu-item">
+                <div class="menu-item">Communications</div>
+                <ul class="flyout-menu">
+                  <li class="menu-item"><a href="#culture" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Culture</a></li>
+                  <li class="menu-item"><a href="#communications" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Language Support</a></li>
+                  <li class="menu-item"><a href="#public-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Public Relations</a></li>
+                  <li class="menu-item"><a href="#investor-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Investor Relations</a></li>
+                  <li class="menu-item"><a href="#collaborators" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Collaborators</a></li>
+                  <li class="menu-item"><a href="#social-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Social Media</a></li>
+                  
+                </ul>
+              <li class="menu-item">
+                <div class="menu-item"></div>
+                <ul class="flyout-menu">
+
+                </ul>
+              </li>
+            </ul>
+
+            <a href="#communications" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Language Support</a>
+            <a href="#public-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Public Relations</a>
+            <a href="#investor-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Investor Relations</a>
+            <a href="#collaborators" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Collaborators</a>
+            <a href="#social-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Social Media</a>
+            <a href="#presentations-decks" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Presentations & Decks</a>
+            <a href="#video-capture" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Video Capture</a>
+            <a href="#still-photography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Still Photography</a>
+            <a href="#ai-generated-imagery" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">AI Generated Imagery</a>
+            <a href="#print-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Print Media</a>
+            <a href="#advertising" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Advertising Standards</a>
+          </nav>
+
         </div>
       </div>
+
+      <!-- Breadcrumb Trail -->
+      <div class="flex items-center justify-between">
+        <nav class="flex items-center space-x-chorus-md px-chorus-lg py-chorus-md">
+          
+          <a href="#overview" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Home</a>
+          <span class="text-carbon-500 dark:text-mulberry-400">/</span>
+          <span class="text-carbon-800 dark:text-mulberry-200">Brand Guide</span>
+        </nav>
+      </div>
     </header>
 
     <!-- Main Content -->
@@ -1236,12 +1313,64 @@
             
             <div class="bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800 p-chorus-md">
               <h4 class="text-h4 mb-2">Navigation Features</h4>
+
+              <div class="grid gap-chorus-lg md:grid-cols-4">
+                <div class="flex items center gap-chorus-sm">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Navigation Arrow" class="icon w-5 h-5 dark:hidden">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Navigation Arrow" class="icon w-5 h-5 hidden dark:block">
+                  <span>Click on any section in the sidebar to jump directly to that section</span>
+                </div>
+                <div class="flex items center gap-chorus-sm">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Back Arrow" class="icon w-5 h-5 dark:hidden">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Back Arrow" class="icon w-5 h-5 hidden dark:block">
+                  <span>Use the back arrow in the top left to return to the previous section</span>
+                </div>
+                <div class="flex items center gap-chorus-sm">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Arrow_Down.png" alt="Scroll Down Arrow" class="icon w-5 h-5 dark:hidden">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Arrow_Down.png" alt="Scroll Down Arrow" class="icon w-5 h-5 hidden dark:block">
+                  <span>Scroll down to explore each section in detail</span>
+                </div>
+                <div class="flex items center gap-chorus-sm">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Arrow_Up.png" alt="Scroll Up Arrow" class="icon w-5 h-5 dark:hidden">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Arrow_Up.png" alt="Scroll Up Arrow" class="icon w-5 h-5 hidden dark:block">
+                  <span>Use the up arrow to quickly return to the top of the page</span>
+                </div>
+                <!-- Menu System Navigation -->
+                <div class="flex items center gap-chorus-sm">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings Icon" class="icon w-5 h-5 dark:hidden">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings Icon" class="icon w-5 h-5 hidden dark:block">
+                  <span>Access settings for theme toggle and visual aids in the bottom toolbar</span>
+                </div>
+
+                <!-- Breadcrumb Trails -->
+                <div class="flex items center gap-chorus-sm">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Breadcrumbs.png" alt="Breadcrumbs Icon" class="icon w-5 h-5 dark:hidden">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Breadcrumbs.png" alt="Breadcrumbs Icon" class="icon w-5 h-5 hidden dark:block">
+                  <span>Breadcrumb trails at the top of each section for easy navigation</span>
+                </div>
+
+                <!-- Document Search -->
+                <div class="flex items center gap-chorus-sm">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search.png" alt="Search Icon" class="icon w-5 h-5 dark:hidden">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search.png" alt="Search Icon" class="icon w-5 h-5 hidden dark:block">
+                  <span>Use the search bar to quickly find specific topics or keywords</span>
+                </div>
+
+                <!-- AI Assisted Answers (RAG) -->
+                <div class="flex items center gap-chorus-sm">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat_Conversation.png" alt="AI Assist Icon" class="icon w-5 h-5 dark:hidden">
+                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat_Conversation.png" alt="AI Assist Icon" class="icon w-5 h-5 hidden dark:block">
+                  <span>Get AI-assisted answers to questions about the brand guidelines</span>
+              </div>
+
               <ul class="text-sm space-y-1 text-carbon-600 dark:text-mulberry-300">
                 <li><strong>Theme Toggle:</strong> Switch between dark/light modes (dark is default)</li>
                 <li><strong>Visual Aid:</strong> Access color-blindness accommodations via bottom toolbar</li>
                 <li><strong>Semantic Icons:</strong> Each section has corresponding Coolicons for visual clarity</li>
                 <li><strong>Accessibility First:</strong> All navigation supports keyboard and screen readers</li>
               </ul>
+
+
             </div>
           </div>
         </div>
@@ -4038,4 +4167,4 @@ p {
     });
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>