diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
index 29d84ae6..ab3fdd8f 100644
--- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
+++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html
@@ -59,7 +59,7 @@ <h3>
     </aside>
   </section>
 
-  <mat-divider></mat-divider>
+  <!-- <mat-divider></mat-divider>
 
   <section class="platforms-section">
     <h3>
@@ -87,5 +87,5 @@ <h4 id="javascript-examples-heading">
     </article>
   </section>
   <mat-divider></mat-divider>
-  <df-download-page></df-download-page>
+  <df-download-page></df-download-page> -->
 </div>
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html
index 0ac72dc8..c8195d7c 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.html
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html
@@ -5,13 +5,20 @@
   [class.logged-in]="isLoggedIn$ | async">
   <ng-container *ngIf="isLoggedIn$ | async">
     <mat-toolbar class="tool-bar">
-      <button
-        mat-icon-button
-        (click)="sideNav.toggle()"
-        [attr.aria-label]="'toggleNav' | transloco">
-        <fa-icon [icon]="faBars"></fa-icon>
-      </button>
-      <img class="logo" src="assets/img/logo.png" alt="Logo" routerLink="/" />
+      <div class="button-wrapper">
+        <button
+          mat-icon-button
+          (click)="sideNav.toggle()"
+          [attr.aria-label]="'toggleNav' | transloco"
+          class="toggle-icon">
+          <fa-icon [icon]="faBars" class="toggle-icon"></fa-icon>
+        </button>
+        <img class="logo" src="assets/img/logo.png" alt="Logo" routerLink="/" />
+      </div>
+      <div class="search-bar">
+        <fa-icon [icon]="faMagnifyingGlass" class="search-icon"></fa-icon>
+        <input type="text" class="search-input" placeholder="Search" />
+      </div>
       <span class="spacer"></span>
       <ng-container *ngIf="availableLanguages.length > 1">
         <button
@@ -87,12 +94,6 @@ <h3>API Scripting</h3>
         </div>
       </ng-container>
       <mat-nav-list *ngIf="isLoggedIn$ | async">
-        <button mat-button (click)="handleSearchClick()">
-          {{ 'searchFeatures' | transloco }}
-          <span>
-            <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
-          </span>
-        </button>
         <ng-container
           *ngTemplateOutlet="
             navList;
@@ -101,44 +102,38 @@ <h3>API Scripting</h3>
       </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content class="sidenav-content">
-      <ng-container *ngIf="isLoggedIn$ | async">
-        <div class="banner" *ngIf="(hasError$ | async) === false">
-          <h1 class="page-header">
-            <ng-container *ngFor="let breadcrumb of breadCrumbs; index as i">
-              <ng-container *ngIf="breadcrumb.path; else current">
-                <a [routerLink]="breadcrumb.path" class="breadcrumb-link"
-                  ><ng-component
+      <div class="content-wrapper">
+        <ng-container *ngIf="isLoggedIn$ | async">
+          <div class="banner" *ngIf="(hasError$ | async) === false">
+            <h1 class="page-header">
+              <ng-container *ngFor="let breadcrumb of breadCrumbs; index as i">
+                <ng-container *ngIf="breadcrumb.path; else current">
+                  <a [routerLink]="breadcrumb.path" class="breadcrumb-link"
+                    ><ng-component
+                      *ngTemplateOutlet="breadcrumbLabel"></ng-component>
+                  </a>
+                </ng-container>
+
+                <ng-template #current>
+                  <ng-component
                     *ngTemplateOutlet="breadcrumbLabel"></ng-component>
-                  <ng-template #breadcrumbLabel>
-                    <ng-container *ngIf="breadcrumb.translationKey; else label">
-                      <span>{{ breadcrumb.translationKey | transloco }}</span>
-                    </ng-container>
-                    <ng-template #label>
-                      <span>{{ breadcrumb.label }}</span>
-                    </ng-template>
+                </ng-template>
+                <ng-template #breadcrumbLabel>
+                  <ng-container *ngIf="breadcrumb.translationKey; else label">
+                    <span>{{ breadcrumb.translationKey | transloco }}</span>
+                  </ng-container>
+                  <ng-template #label>
+                    <span>{{ breadcrumb.label }}</span>
                   </ng-template>
-                </a>
-              </ng-container>
-
-              <ng-template #current>
-                <ng-component
-                  *ngTemplateOutlet="breadcrumbLabel"></ng-component>
-              </ng-template>
-              <ng-template #breadcrumbLabel>
-                <ng-container *ngIf="breadcrumb.translationKey; else label">
-                  <span>{{ breadcrumb.translationKey | transloco }}</span>
-                </ng-container>
-                <ng-template #label>
-                  <span>{{ breadcrumb.label }}</span>
                 </ng-template>
-              </ng-template>
-              <span *ngIf="i !== breadCrumbs.length - 1"> / </span>
-            </ng-container>
-          </h1>
+                <span *ngIf="i !== breadCrumbs.length - 1"> / </span>
+              </ng-container>
+            </h1>
+          </div>
+        </ng-container>
+        <div class="main" [class.no-error]="(hasError$ | async) === false">
+          <ng-content></ng-content>
         </div>
-      </ng-container>
-      <div class="main" [class.no-error]="(hasError$ | async) === false">
-        <ng-content></ng-content>
       </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
@@ -152,7 +147,12 @@ <h1 class="page-header">
         class="nav-item"
         [class.active]="isActive(item)"
         (click)="handleNavClick(item)">
-        {{ navLabel(item.path) | transloco }}
+        <span class="nav-item">
+          <ng-container *ngIf="item?.icon">
+            <img [src]="item.icon" [alt]="item.path" />
+          </ng-container>
+          {{ navLabel(item.path) | transloco }}
+        </span>
       </button>
     </div>
     <ng-template #subRoutes>
@@ -161,7 +161,11 @@ <h1 class="page-header">
         [class.mat-elevation-z0]="true"
         [expanded]="isActive(item)">
         <mat-expansion-panel-header class="parent-route">
-          {{ navLabel(item.path) | transloco }}
+          <span class="nav-item">
+            <ng-container *ngIf="item?.icon">
+              <img [src]="item.icon" [alt]="item.path" /> </ng-container
+            >{{ navLabel(item.path) | transloco }}
+          </span>
         </mat-expansion-panel-header>
         <mat-nav-list>
           <ng-container
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
index ed0d59f7..6318f803 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.scss
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
@@ -4,7 +4,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 $red-palette: mat.define-palette(mat.$red-palette);
 
 .logo {
-  height: 30px;
+  height: 40px;
   cursor: pointer;
 }
 
@@ -15,9 +15,49 @@ $red-palette: mat.define-palette(mat.$red-palette);
   flex-direction: column;
 }
 
-.tool-bar {
-  background-color: mat.get-color-from-palette($df-purple-palette, 100);
-  min-height: 64px;
+.mat-toolbar {
+  background-color: #f6f2fa;
+  padding: 16px;
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+
+  .button-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    img {
+      margin-bottom: -4px;
+    }
+  }
+
+  .search-bar {
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1 1 auto;
+    border: 1px solid #ebe7ef;
+    border-radius: 50px;
+    background-color: #ebe7ef;
+    overflow: hidden;
+    width: 300px;
+    height: 50px;
+    font-size: 24px;
+  }
+  .search-input {
+    border: none;
+    background-color: #ebe7ef;
+    color: #47464f;
+    font-size: 20px;
+    &:focus {
+      outline: none;
+    }
+  }
+  .search-icon {
+    color: #47464f;
+    padding-left: 14px;
+  }
 }
 
 .search-btn {
@@ -43,10 +83,10 @@ $red-palette: mat.define-palette(mat.$red-palette);
 }
 
 .sidenav-container {
-  background-color: mat.get-color-from-palette($df-purple-palette, 100);
+  background-color: #f6f2fa;
   flex: 1 1 auto;
   .sidenav {
-    background-color: mat.get-color-from-palette($df-purple-palette, 900);
+    background-color: #0f0761;
     min-width: 40%;
     border: none;
     transition: min-width 0.3s ease-out;
@@ -86,7 +126,7 @@ $red-palette: mat.define-palette(mat.$red-palette);
     }
     .logged-in & {
       min-width: 20%;
-      background-color: mat.get-color-from-palette($df-purple-palette, 100);
+      background-color: #f6f2fa;
     }
     .logged-in.small & {
       min-width: 40%;
@@ -96,60 +136,79 @@ $red-palette: mat.define-palette(mat.$red-palette);
       font-weight: 400;
       height: 48px;
       padding: 0 16px;
+      gap: 4px;
+      background: #f6f2fa;
     }
     ::ng-deep {
       .mat-expansion-panel-body {
         padding: 0 0 0 16px !important;
+        background: #f6f2fa;
       }
     }
     .nav-item {
-      background-color: mat.get-color-from-palette($df-purple-palette, 100);
+      // background-color: #f6f2fa;
       height: 48px;
       width: 100%;
       font-size: 1.6rem;
       font-weight: 400;
       border-radius: 0;
       justify-content: left;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      ::ng-deep .mat-mdc-button-touch-target {
+        background-color: #f6f2fa;
+      }
       &.active {
-        background-color: mat.get-color-from-palette($df-purple-palette, 200);
-        border-radius: 0px 50px 50px 0px;
+        ::ng-deep .mat-mdc-button-touch-target {
+          background-color: #e3dfff;
+          border-top-right-radius: 50px;
+          border-bottom-right-radius: 50px;
+        }
+        background-color: #e3dfff !important;
+        border-top-right-radius: 50px;
+        border-bottom-right-radius: 50px;
+        border-top-left-radius: 0;
         width: 95%;
       }
-    }
-    .expansion-panel {
-      background-color: mat.get-color-from-palette($df-purple-palette, 100);
+      .expansion-panel {
+        background-color: #f6f2fa;
+      }
     }
   }
   .sidenav-content {
-    background-color: white;
-    margin: 10px;
     display: flex;
     flex-direction: column;
     height: 100%;
-    border-radius: 20px;
+    padding: 8px 20px 24px;
+    background: #f6f2fa;
+    .content-wrapper {
+      padding: 2px;
+      border: 1px solid #f6f2fa;
+      background-color: #f6f2fa;
+      border-radius: 6px !important;
+    }
     .banner {
       flex-shrink: 0;
       width: 100%;
-      padding-bottom: 60px;
-      background-color: white;
+      padding-bottom: 40px;
+      background-color: #fff;
       .page-header {
-        color: mat.get-color-from-palette($df-purple-palette, 1001);
         padding: 32px 16px 0 16px;
       }
     }
     .main {
-      // height: 100%;
       flex-grow: 1;
       &.no-error {
         .logged-in & {
-          margin: -60px 16px 0 16px;
-          padding: 16px 24px;
+          margin-top: -60px;
+          padding: 16px 20px;
           background-color: white;
         }
         .logged-in.small & {
           margin: 0;
           margin-top: -60px;
-          padding: 16px 16px 0 16px;
+          padding: 16px 20px;
         }
       }
     }
@@ -171,6 +230,9 @@ $red-palette: mat.define-palette(mat.$red-palette);
   .mat-expansion-panel-body {
     overflow-x: auto;
   }
+  .mat-expansion-panel {
+    background: #f6f2fa;
+  }
 }
 
 .license-expired {
@@ -185,9 +247,9 @@ $red-palette: mat.define-palette(mat.$red-palette);
   padding: 16px;
 }
 
-// ::ng-deep .parent-route > .mat-expansion-indicator::after {
-//   color: unset !important;
-// }
+.breadcrumb-link {
+  color: white;
+}
 
 .dark-theme {
   .tool-bar,
@@ -200,15 +262,50 @@ $red-palette: mat.define-palette(mat.$red-palette);
       1003
     ) !important;
   }
+
+  .parent-route {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+  }
+
   .nav-item {
-    &.active {
+    ::ng-deep .mat-mdc-button-touch-target {
       background-color: mat.get-color-from-palette(
         $df-purple-palette,
-        600
+        1003
       ) !important;
     }
   }
-  .sidenav-content,
+  &.active {
+    ::ng-deep .mat-mdc-button-touch-target {
+      background-color: #e3dfff;
+      border-top-right-radius: 50px;
+      border-bottom-right-radius: 50px;
+    }
+  }
+
+  .nav-item {
+    &.active {
+      ::ng-deep .mat-mdc-button-touch-target {
+        background-color: mat.get-color-from-palette(
+          $df-purple-palette,
+          600
+        ) !important;
+      }
+      ::ng-deep .mdc-button__label > span {
+        background-color: mat.get-color-from-palette(
+          $df-purple-palette,
+          600
+        ) !important;
+      }
+    }
+
+    img {
+      filter: invert(1) !important;
+    }
+  }
   .banner,
   .main {
     background-color: mat.get-color-from-palette(
@@ -220,4 +317,24 @@ $red-palette: mat.define-palette(mat.$red-palette);
       color: mat.get-color-from-palette($df-purple-palette, 10) !important;
     }
   }
+  .sidenav-content {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+    color: white;
+    .page-header {
+      color: mat.get-color-from-palette($df-purple-palette, 10) !important;
+    }
+  }
+
+  .content-wrapper {
+    padding: 2px;
+    border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important;
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1002
+    ) !important;
+    border-radius: 6px !important;
+  }
 }
diff --git a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts
index 4a5e309f..23407c1e 100644
--- a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts
+++ b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts
@@ -6,12 +6,11 @@ import { BehaviorSubject } from 'rxjs';
 @Component({
   selector: 'df-theme-toggle',
   templateUrl: './df-theme-toggle.component.html',
-  // styleUrls: ['./df-theme-toggle.component.scss'],
   standalone: true,
   imports: [MatSlideToggleModule],
 })
 export class DfThemeToggleComponent {
-  isDarkMode$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+  isDarkMode$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   themeService = inject(DfThemeService);
 
   toggle() {
diff --git a/src/app/shared/utilities/route.ts b/src/app/shared/utilities/route.ts
index a433cd44..489d2f19 100644
--- a/src/app/shared/utilities/route.ts
+++ b/src/app/shared/utilities/route.ts
@@ -56,8 +56,6 @@ const findIconForRoute = (routeName: any) => {
   } else {
     return '';
   }
-  // Replace parts of route names to match them to icon filenames if needed
-  // return `assets/img/nav/${routeName?.path}.svg`;
 };
 
 export function accessibleRoutes(
diff --git a/src/dark-style.scss b/src/dark-style.scss
index 1c57a7d9..f361b0a5 100644
--- a/src/dark-style.scss
+++ b/src/dark-style.scss
@@ -57,7 +57,19 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
   .mat-step-label {
     color: white !important;
   }
-
+  .parent-route,
+  .mat-expansion-panel-body {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      1003
+    ) !important;
+  }
+  .nav-item .active > .mdc-button__label > .mat-mdc-button-touch-target {
+    background-color: mat.get-color-from-palette(
+      $df-purple-palette,
+      700
+    ) !important;
+  }
   // Radio Button
   .mat-mdc-radio-button
     .mdc-radio