diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.html
index 36093e18..eed760de 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.html
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.html
@@ -1,182 +1,4 @@
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<style>
-  :host {
-    --bright-blue: oklch(51.01% 0.274 263.83);
-    --electric-violet: oklch(53.18% 0.28 296.97);
-    --french-violet: oklch(47.66% 0.246 305.88);
-    --vivid-pink: oklch(69.02% 0.277 332.77);
-    --hot-red: oklch(61.42% 0.238 15.34);
-    --orange-red: oklch(63.32% 0.24 31.68);
-
-    --gray-900: oklch(19.37% 0.006 300.98);
-    --gray-700: oklch(36.98% 0.014 302.71);
-    --gray-400: oklch(70.9% 0.015 304.04);
-
-    --red-to-pink-to-purple-vertical-gradient: linear-gradient(
-      180deg,
-      var(--orange-red) 0%,
-      var(--vivid-pink) 50%,
-      var(--electric-violet) 100%
-    );
-
-    --red-to-pink-to-purple-horizontal-gradient: linear-gradient(
-      90deg,
-      var(--orange-red) 0%,
-      var(--vivid-pink) 50%,
-      var(--electric-violet) 100%
-    );
-
-    --pill-accent: var(--bright-blue);
-
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1 {
-    font-size: 3.125rem;
-    color: var(--gray-900);
-    font-weight: 500;
-    line-height: 100%;
-    letter-spacing: -0.125rem;
-    margin: 0;
-    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-  }
-
-  p {
-    margin: 0;
-    color: var(--gray-700);
-  }
-
-  main {
-    width: 100%;
-    min-height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
-    box-sizing: inherit;
-    position: relative;
-  }
-
-  .angular-logo {
-    max-width: 9.2rem;
-  }
-
-  .content {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-    max-width: 700px;
-    margin-bottom: 3rem;
-  }
-
-  .content h1 {
-    margin-top: 1.75rem;
-  }
-
-  .content p {
-    margin-top: 1.5rem;
-  }
-
-  .divider {
-    width: 1px;
-    background: var(--red-to-pink-to-purple-vertical-gradient);
-    margin-inline: 0.5rem;
-  }
-
-  .pill-group {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    flex-wrap: wrap;
-    gap: 1.25rem;
-  }
-
-  .pill {
-    display: flex;
-    align-items: center;
-    --pill-accent: var(--bright-blue);
-    background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
-    color: var(--pill-accent);
-    padding-inline: 0.75rem;
-    padding-block: 0.375rem;
-    border-radius: 2.75rem;
-    border: 0;
-    transition: background 0.3s ease;
-    font-family: var(--inter-font);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 1.4rem;
-    letter-spacing: -0.00875rem;
-    text-decoration: none;
-  }
-
-  .pill:hover {
-    background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
-  }
-
-  .pill-group .pill:nth-child(6n + 1) {
-    --pill-accent: var(--bright-blue);
-  }
-  .pill-group .pill:nth-child(6n + 2) {
-    --pill-accent: var(--french-violet);
-  }
-  .pill-group .pill:nth-child(6n + 3),
-  .pill-group .pill:nth-child(6n + 4),
-  .pill-group .pill:nth-child(6n + 5) {
-    --pill-accent: var(--hot-red);
-  }
-
-  .pill-group svg {
-    margin-inline-start: 0.25rem;
-  }
-
-  .social-links {
-    display: flex;
-    align-items: center;
-    gap: 0.73rem;
-    margin-top: 1.5rem;
-  }
-
-  .social-links path {
-    transition: fill 0.3s ease;
-    fill: var(--gray-400);
-  }
-
-  .social-links a:hover svg path {
-    fill: var(--gray-900);
-  }
-
-  @media screen and (max-width: 650px) {
-    .content {
-      flex-direction: column;
-      width: max-content;
-    }
-
-    .divider {
-      height: 1px;
-      width: 100%;
-      background: var(--red-to-pink-to-purple-horizontal-gradient);
-      margin-block: 1.5rem;
-    }
-  }
-</style>
-
+<app-navbar class=""></app-navbar>
 <main class="main">
   <div class="content">
     <div class="left-side">
@@ -324,13 +146,4 @@
   </div>
 </main>
 
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-
-<router-outlet />
+<router-outlet />
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.scss b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.scss
index e69de29b..c03a017d 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.scss
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.scss
@@ -0,0 +1,165 @@
+  :host {
+      --bright-blue: oklch(51.01% 0.274 263.83);
+      --electric-violet: oklch(53.18% 0.28 296.97);
+      --french-violet: oklch(47.66% 0.246 305.88);
+      --vivid-pink: oklch(69.02% 0.277 332.77);
+      --hot-red: oklch(61.42% 0.238 15.34);
+      --orange-red: oklch(63.32% 0.24 31.68);
+
+      --gray-900: oklch(19.37% 0.006 300.98);
+      --gray-700: oklch(36.98% 0.014 302.71);
+      --gray-400: oklch(70.9% 0.015 304.04);
+
+      --red-to-pink-to-purple-vertical-gradient: linear-gradient(180deg,
+              var(--orange-red) 0%,
+              var(--vivid-pink) 50%,
+              var(--electric-violet) 100%);
+
+      --red-to-pink-to-purple-horizontal-gradient: linear-gradient(90deg,
+              var(--orange-red) 0%,
+              var(--vivid-pink) 50%,
+              var(--electric-violet) 100%);
+
+      --pill-accent: var(--bright-blue);
+
+      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+          "Segoe UI Symbol";
+      box-sizing: border-box;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1 {
+      font-size: 3.125rem;
+      color: var(--gray-900);
+      font-weight: 500;
+      line-height: 100%;
+      letter-spacing: -0.125rem;
+      margin: 0;
+      font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+          "Segoe UI Symbol";
+  }
+
+  p {
+      margin: 0;
+      color: var(--gray-700);
+  }
+
+  main {
+      width: 100%;
+      min-height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 1rem;
+      box-sizing: inherit;
+      position: relative;
+  }
+
+  .angular-logo {
+      max-width: 9.2rem;
+  }
+
+  .content {
+      display: flex;
+      justify-content: space-around;
+      width: 100%;
+      max-width: 700px;
+      margin-bottom: 3rem;
+  }
+
+  .content h1 {
+      margin-top: 1.75rem;
+  }
+
+  .content p {
+      margin-top: 1.5rem;
+  }
+
+  .divider {
+      width: 1px;
+      background: var(--red-to-pink-to-purple-vertical-gradient);
+      margin-inline: 0.5rem;
+  }
+
+  .pill-group {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      flex-wrap: wrap;
+      gap: 1.25rem;
+  }
+
+  .pill {
+      display: flex;
+      align-items: center;
+      --pill-accent: var(--bright-blue);
+      background: color-mix(in srgb, var(--pill-accent) 5%, transparent);
+      color: var(--pill-accent);
+      padding-inline: 0.75rem;
+      padding-block: 0.375rem;
+      border-radius: 2.75rem;
+      border: 0;
+      transition: background 0.3s ease;
+      font-family: var(--inter-font);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.4rem;
+      letter-spacing: -0.00875rem;
+      text-decoration: none;
+  }
+
+  .pill:hover {
+      background: color-mix(in srgb, var(--pill-accent) 15%, transparent);
+  }
+
+  .pill-group .pill:nth-child(6n + 1) {
+      --pill-accent: var(--bright-blue);
+  }
+
+  .pill-group .pill:nth-child(6n + 2) {
+      --pill-accent: var(--french-violet);
+  }
+
+  .pill-group .pill:nth-child(6n + 3),
+  .pill-group .pill:nth-child(6n + 4),
+  .pill-group .pill:nth-child(6n + 5) {
+      --pill-accent: var(--hot-red);
+  }
+
+  .pill-group svg {
+      margin-inline-start: 0.25rem;
+  }
+
+  .social-links {
+      display: flex;
+      align-items: center;
+      gap: 0.73rem;
+      margin-top: 1.5rem;
+  }
+
+  .social-links path {
+      transition: fill 0.3s ease;
+      fill: var(--gray-400);
+  }
+
+  .social-links a:hover svg path {
+      fill: var(--gray-900);
+  }
+
+  @media screen and (max-width: 650px) {
+      .content {
+          flex-direction: column;
+          width: max-content;
+      }
+
+      .divider {
+          height: 1px;
+          width: 100%;
+          background: var(--red-to-pink-to-purple-horizontal-gradient);
+          margin-block: 1.5rem;
+      }
+  }
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.ts
index ca345ff2..6fa25ce1 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.ts
@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from "./navbar/navbar.component";
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+    selector: 'app-root',
+    standalone: true,
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss',
+    imports: [RouterOutlet, NavbarComponent]
 })
 export class AppComponent {
   title = 'envelope-generator-ui';
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.html
new file mode 100644
index 00000000..a12b5ee6
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.html
@@ -0,0 +1,36 @@
+<nav class="h5 navbar navbar-expand-lg bg-body-tertiary">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Navbar</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link active" aria-current="page" href="#">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Dropdown
+          </a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+        </li>
+      </ul>
+      <form class="d-flex" role="search">
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success" type="submit">Search</button>
+      </form>
+    </div>
+  </div>
+</nav>
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.scss b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.spec.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.spec.ts
new file mode 100644
index 00000000..78867a64
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavbarComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.ts
new file mode 100644
index 00000000..74ba40ae
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/navbar/navbar.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+@Component({
+  selector: 'app-navbar',
+  standalone: true,
+  imports: [NgbNavModule],
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.scss'
+})
+export class NavbarComponent {
+  active = 1;
+}