diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 299d37be2..34813955c 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -5,7 +5,7 @@ import { provideStore } from '@ngxs/store';
 import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';
 import { providePrimeNG } from 'primeng/config';
 import Aura from '@primeng/themes/aura';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
@@ -24,7 +24,7 @@ export const appConfig: ApplicationConfig = {
         },
       },
     }),
-    provideNoopAnimations(),
+    provideAnimations(),
     provideHttpClient(),
   ],
 };
diff --git a/src/app/core/components/footer/footer.component.html b/src/app/core/components/footer/footer.component.html
index 38d8f1598..7d7fcefec 100644
--- a/src/app/core/components/footer/footer.component.html
+++ b/src/app/core/components/footer/footer.component.html
@@ -1,4 +1,4 @@
-<footer>
+<footer [class.portrait]="isPortrait()" [class.mobile]="isXSmall()">
   <div class="footer-content">
     <div class="footer-nav">
       <div class="footer-links">
diff --git a/src/app/core/components/footer/footer.component.scss b/src/app/core/components/footer/footer.component.scss
index 7c2a7a0c8..e36dd41b7 100644
--- a/src/app/core/components/footer/footer.component.scss
+++ b/src/app/core/components/footer/footer.component.scss
@@ -17,6 +17,7 @@
 
       a {
         color: var.$dark-blue-1;
+        text-align: center;
       }
     }
 
@@ -55,6 +56,51 @@
 
     .footer-copyright {
       @include mix.flex-center;
+      text-align: center;
+    }
+  }
+
+  .portrait {
+    .footer-nav {
+      flex-direction: column-reverse;
+      gap: 1.5rem;
+      height: auto;
+      padding: 2.5rem;
+
+      .footer-links {
+        justify-content: space-evenly;
+        width: 100%;
+
+        .separator {
+          margin: 0.1rem;
+        }
+      }
+    }
+
+    .footer-secondary-nav {
+      padding: 0.5rem 2.5rem;
+    }
+  }
+
+  .mobile {
+    .footer-nav {
+      .footer-links {
+        justify-content: center;
+        gap: 0.3rem;
+        flex-wrap: wrap;
+      }
+    }
+
+    .footer-secondary-nav {
+      flex-direction: column;
+      gap: 1rem;
+      height: auto;
+      padding: 1rem;
+
+      .footer-links {
+        row-gap: 1rem;
+        flex-wrap: wrap;
+      }
     }
   }
 }
diff --git a/src/app/core/components/footer/footer.component.ts b/src/app/core/components/footer/footer.component.ts
index 717931595..a7c810f64 100644
--- a/src/app/core/components/footer/footer.component.ts
+++ b/src/app/core/components/footer/footer.component.ts
@@ -1,6 +1,8 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { SocialIcon } from '@osf/shared/entities/social-icon.interface';
 import { RouterLink } from '@angular/router';
+import { IS_PORTRAIT, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   standalone: true,
@@ -11,6 +13,11 @@ import { RouterLink } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
+  #isPortrait$ = inject(IS_PORTRAIT);
+  #isXSmall$ = inject(IS_XSMALL);
+  isPortrait = toSignal(this.#isPortrait$);
+  isXSmall = toSignal(this.#isXSmall$);
+
   protected readonly socialIcons: SocialIcon[] = [
     {
       name: 'twitter',
diff --git a/src/app/core/components/nav-menu/nav-menu.component.html b/src/app/core/components/nav-menu/nav-menu.component.html
new file mode 100644
index 000000000..1a795209e
--- /dev/null
+++ b/src/app/core/components/nav-menu/nav-menu.component.html
@@ -0,0 +1,19 @@
+<nav class="nav-menu">
+  <ul>
+    @for (item of navItems; track item.path) {
+      <li class="nav-item">
+        <a
+          class="nav-link"
+          [routerLink]="item.path"
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }"
+        >
+          @if (item.icon) {
+            <i [class]="'osf-icon-' + item.icon"></i>
+          }
+          <span>{{ item.label }}</span>
+        </a>
+      </li>
+    }
+  </ul>
+</nav>
diff --git a/src/app/core/components/nav-menu/nav-menu.component.scss b/src/app/core/components/nav-menu/nav-menu.component.scss
new file mode 100644
index 000000000..470ab0834
--- /dev/null
+++ b/src/app/core/components/nav-menu/nav-menu.component.scss
@@ -0,0 +1,27 @@
+@use "assets/styles/variables" as var;
+:host {
+  .nav-menu {
+    width: 100%;
+    max-width: 15rem;
+
+    ul {
+      .nav-link {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding-left: 1rem;
+        width: 100%;
+        height: 3.4rem;
+        gap: 0.5rem;
+        color: var.$white;
+        text-decoration: none;
+      }
+
+      .active {
+        font-weight: 700;
+        background-color: var.$dark-blue-2;
+        border-radius: 0.5rem;
+      }
+    }
+  }
+}
diff --git a/src/app/core/components/nav-menu/nav-menu.component.spec.ts b/src/app/core/components/nav-menu/nav-menu.component.spec.ts
new file mode 100644
index 000000000..e65b4ac2f
--- /dev/null
+++ b/src/app/core/components/nav-menu/nav-menu.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavMenuComponent } from './nav-menu.component';
+
+describe('NavMenuComponent', () => {
+  let component: NavMenuComponent;
+  let fixture: ComponentFixture<NavMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavMenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NavMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/components/nav-menu/nav-menu.component.ts b/src/app/core/components/nav-menu/nav-menu.component.ts
new file mode 100644
index 000000000..b711ad7bf
--- /dev/null
+++ b/src/app/core/components/nav-menu/nav-menu.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { NAV_ITEMS } from '@osf/core/helpers/nav-items.constant';
+
+@Component({
+  selector: 'osf-nav-menu',
+  imports: [RouterLinkActive, RouterLink],
+  templateUrl: './nav-menu.component.html',
+  styleUrl: './nav-menu.component.scss',
+})
+export class NavMenuComponent {
+  navItems = NAV_ITEMS;
+}
diff --git a/src/app/core/components/root/root.component.scss b/src/app/core/components/root/root.component.scss
index a94282de9..8a8d87b5e 100644
--- a/src/app/core/components/root/root.component.scss
+++ b/src/app/core/components/root/root.component.scss
@@ -1,39 +1,47 @@
 @use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
 
-.layout-desktop {
-  display: flex;
+:host {
   height: 100vh;
-  background-color: #24384a;
+  display: flex;
 
-  .content-wrapper {
+  .layout-desktop {
+    display: flex;
     flex: 1;
-    overflow-y: auto;
-    margin: 6px;
-    background-color: white;
-    border-radius: 1rem;
+    background-color: var.$dark-blue-1;
 
-    .content {
-      @include mix.flex-column;
-      min-height: 100%;
-      position: relative;
+    .content-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      margin: 6px;
+      background-color: white;
+      border-radius: 1rem;
+
+      .content {
+        @include mix.flex-column;
+        min-height: 100%;
+        position: relative;
+      }
     }
   }
-}
-
-.layout-tablet {
-  @include mix.flex-center;
-  height: 100vh;
 
-  .content-wrapper {
+  .layout-tablet {
+    @include mix.flex-center;
     flex: 1;
-    overflow-y: auto;
-    @include mix.flex-column;
-    width: 100%;
 
-    .content {
-      position: relative;
+    .content-wrapper {
       @include mix.flex-column;
+      width: 100%;
+      height: 100%;
       flex: 1;
+      background-color: white;
+      overflow-y: auto;
+
+      .content {
+        position: relative;
+        @include mix.flex-column;
+        flex: 1;
+      }
     }
   }
 }
diff --git a/src/app/core/components/sidenav/sidenav.component.html b/src/app/core/components/sidenav/sidenav.component.html
index b0ea7763b..08714d186 100644
--- a/src/app/core/components/sidenav/sidenav.component.html
+++ b/src/app/core/components/sidenav/sidenav.component.html
@@ -1,20 +1,2 @@
 <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
-<nav class="sidebar-nav">
-  <ul>
-    @for (item of navItems; track item.path) {
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          [routerLink]="item.path"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{ exact: true }"
-        >
-          @if (item.icon) {
-            <i [class]="'osf-icon-' + item.icon"></i>
-          }
-          <span>{{ item.label }}</span>
-        </a>
-      </li>
-    }
-  </ul>
-</nav>
+<osf-nav-menu />
diff --git a/src/app/core/components/sidenav/sidenav.component.scss b/src/app/core/components/sidenav/sidenav.component.scss
index 73db5b41a..f39a1f973 100644
--- a/src/app/core/components/sidenav/sidenav.component.scss
+++ b/src/app/core/components/sidenav/sidenav.component.scss
@@ -1,33 +1,8 @@
 @use "assets/styles/mixins" as mix;
-@use "assets/styles/variables" as var;
 
 :host {
   @include mix.flex-column;
+  gap: 1.8rem;
   width: 19rem;
-  padding: 1.5rem;
-
-  .sidebar-nav {
-    margin-top: 2rem;
-    width: 100%;
-
-    ul {
-      .nav-link {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        padding-left: 1rem;
-        width: 100%;
-        height: 3.4rem;
-        gap: 0.5rem;
-        color: var.$white;
-        text-decoration: none;
-      }
-
-      .active {
-        font-weight: 700;
-        background-color: var.$dark-blue-2;
-        border-radius: 0.5rem;
-      }
-    }
-  }
+  padding: 1.8rem;
 }
diff --git a/src/app/core/components/sidenav/sidenav.component.ts b/src/app/core/components/sidenav/sidenav.component.ts
index b9af5eee2..971f08f0b 100644
--- a/src/app/core/components/sidenav/sidenav.component.ts
+++ b/src/app/core/components/sidenav/sidenav.component.ts
@@ -1,29 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
 import { NgOptimizedImage } from '@angular/common';
-import { NavItem } from '@osf/shared/entities/nav-item.interface';
+import { NavMenuComponent } from '@core/components/nav-menu/nav-menu.component';
 
 @Component({
   standalone: true,
   selector: 'osf-sidenav',
-  imports: [RouterLink, RouterLinkActive, NgOptimizedImage],
+  imports: [NgOptimizedImage, NavMenuComponent],
   templateUrl: './sidenav.component.html',
   styleUrl: './sidenav.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SidenavComponent {
-  protected readonly navItems: NavItem[] = [
-    { path: '/home', label: 'Home', icon: 'home' },
-    { path: '', label: 'Search OSF', icon: 'search' },
-    {
-      path: '/support',
-      label: 'Support',
-      icon: 'support',
-    },
-    {
-      path: '/donate',
-      label: 'Donate',
-      icon: 'donate',
-    },
-  ];
-}
+export class SidenavComponent {}
diff --git a/src/app/core/components/topnav/topnav.component.html b/src/app/core/components/topnav/topnav.component.html
index bda3aad39..d76ecde2c 100644
--- a/src/app/core/components/topnav/topnav.component.html
+++ b/src/app/core/components/topnav/topnav.component.html
@@ -1 +1,21 @@
-<p>OSF</p>
+<section class="nav-container">
+  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" />
+  <p-drawer
+    [modal]="true"
+    [visible]="isDrawerVisible()"
+    (visibleChange)="isDrawerVisible.set($event)"
+    [closable]="false"
+  >
+    <osf-nav-menu />
+  </p-drawer>
+  <p-button
+    class="topnav-btn"
+    severity="contrast"
+    (onClick)="toggleMenuVisibility()"
+  >
+    <i
+      [class]="!isDrawerVisible() ? 'osf-icon-menu' : 'osf-icon-close'"
+      class="topnav-icon"
+    ></i>
+  </p-button>
+</section>
diff --git a/src/app/core/components/topnav/topnav.component.scss b/src/app/core/components/topnav/topnav.component.scss
index 38ebd6066..ff2146555 100644
--- a/src/app/core/components/topnav/topnav.component.scss
+++ b/src/app/core/components/topnav/topnav.component.scss
@@ -1,7 +1,17 @@
 @use "assets/styles/variables" as var;
+@use "assets/styles/mixins" as mix;
 
 :host {
-  background: var.$dark-blue-1;
-  height: 96px;
-  color: white;
+  z-index: 2000;
+
+  .nav-container {
+    @include mix.flex-center-between;
+    background: var.$dark-blue-1;
+    padding: 1.8rem;
+    color: white;
+
+    .topnav-icon {
+      font-size: 2.1rem;
+    }
+  }
 }
diff --git a/src/app/core/components/topnav/topnav.component.ts b/src/app/core/components/topnav/topnav.component.ts
index 03add4819..2d1fa7aff 100644
--- a/src/app/core/components/topnav/topnav.component.ts
+++ b/src/app/core/components/topnav/topnav.component.ts
@@ -1,11 +1,21 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { Button } from 'primeng/button';
+import { Drawer } from 'primeng/drawer';
+import { NgOptimizedImage } from '@angular/common';
+import { NavMenuComponent } from '@core/components/nav-menu/nav-menu.component';
 
 @Component({
   standalone: true,
   selector: 'osf-topnav',
-  imports: [],
+  imports: [Button, Drawer, NgOptimizedImage, NavMenuComponent],
   templateUrl: './topnav.component.html',
   styleUrl: './topnav.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TopnavComponent {}
+export class TopnavComponent {
+  isDrawerVisible = signal(false);
+
+  toggleMenuVisibility() {
+    this.isDrawerVisible.set(!this.isDrawerVisible());
+  }
+}
diff --git a/src/app/core/helpers/nav-items.constant.ts b/src/app/core/helpers/nav-items.constant.ts
new file mode 100644
index 000000000..f02730bbb
--- /dev/null
+++ b/src/app/core/helpers/nav-items.constant.ts
@@ -0,0 +1,16 @@
+import { NavItem } from '@osf/shared/entities/nav-item.interface';
+
+export const NAV_ITEMS: NavItem[] = [
+  { path: '/home', label: 'Home', icon: 'home' },
+  { path: '', label: 'Search OSF', icon: 'search' },
+  {
+    path: '/support',
+    label: 'Support',
+    icon: 'support',
+  },
+  {
+    path: '/donate',
+    label: 'Donate',
+    icon: 'donate',
+  },
+];
diff --git a/src/app/features/auth/forgot-password/forgot-password.component.html b/src/app/features/auth/forgot-password/forgot-password.component.html
index 7bcd028c1..efbff5da7 100644
--- a/src/app/features/auth/forgot-password/forgot-password.component.html
+++ b/src/app/features/auth/forgot-password/forgot-password.component.html
@@ -1,4 +1,4 @@
-<section class="forgot-password-container">
+<section class="forgot-password-container" [class.mobile]="isXSmall()">
   <h2>Forgot Your Password?</h2>
   <p>Enter your email address and we'll send a link to reset your password</p>
 
diff --git a/src/app/features/auth/forgot-password/forgot-password.component.scss b/src/app/features/auth/forgot-password/forgot-password.component.scss
index ea6dc4f14..718dc296e 100644
--- a/src/app/features/auth/forgot-password/forgot-password.component.scss
+++ b/src/app/features/auth/forgot-password/forgot-password.component.scss
@@ -34,4 +34,8 @@
       left: 0;
     }
   }
+
+  .mobile {
+    max-width: 24.5rem;
+  }
 }
diff --git a/src/app/features/auth/forgot-password/forgot-password.component.ts b/src/app/features/auth/forgot-password/forgot-password.component.ts
index e5937230b..8198c2f80 100644
--- a/src/app/features/auth/forgot-password/forgot-password.component.ts
+++ b/src/app/features/auth/forgot-password/forgot-password.component.ts
@@ -5,6 +5,8 @@ import { Button } from 'primeng/button';
 import { MessageInfo } from './message-info.model';
 import { Message } from 'primeng/message';
 import { ForgotPasswordFormGroupType } from '@osf/features/auth/forgot-password/forgot-password-form-group.type';
+import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'osf-forgot-password',
@@ -15,9 +17,11 @@ import { ForgotPasswordFormGroupType } from '@osf/features/auth/forgot-password/
 })
 export class ForgotPasswordComponent {
   #fb = inject(FormBuilder);
+  #isXSmall$ = inject(IS_XSMALL);
   forgotPasswordForm: ForgotPasswordFormGroupType = this.#fb.group({
     email: ['', [Validators.required, Validators.email]],
   });
+  isXSmall = toSignal(this.#isXSmall$);
   message = signal<MessageInfo | null>(null);
 
   onSubmit(): void {
diff --git a/src/app/features/auth/reset-password/reset-password.component.html b/src/app/features/auth/reset-password/reset-password.component.html
index 8ab27dd77..e8fab76ad 100644
--- a/src/app/features/auth/reset-password/reset-password.component.html
+++ b/src/app/features/auth/reset-password/reset-password.component.html
@@ -1,5 +1,5 @@
 @if (!isFormSubmitted()) {
-  <section class="reset-password-container">
+  <section class="reset-password-container" [class.mobile]="isXSmall()">
     <h2>Reset Password</h2>
 
     <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">
diff --git a/src/app/features/auth/reset-password/reset-password.component.scss b/src/app/features/auth/reset-password/reset-password.component.scss
index da46608a0..3b56e2738 100644
--- a/src/app/features/auth/reset-password/reset-password.component.scss
+++ b/src/app/features/auth/reset-password/reset-password.component.scss
@@ -51,4 +51,8 @@
       }
     }
   }
+
+  .mobile {
+    max-width: 24.5rem;
+  }
 }
diff --git a/src/app/features/auth/reset-password/reset-password.component.ts b/src/app/features/auth/reset-password/reset-password.component.ts
index 74b56119d..d8699b10f 100644
--- a/src/app/features/auth/reset-password/reset-password.component.ts
+++ b/src/app/features/auth/reset-password/reset-password.component.ts
@@ -9,6 +9,8 @@ import {
 } from '../sign-up/sign-up.helper';
 import { PasswordInputHintComponent } from '@shared/components/password-input-hint/password-input-hint.component';
 import { ResetPasswordFormGroupType } from './reset-password-form-group.type';
+import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'osf-reset-password',
@@ -25,6 +27,7 @@ import { ResetPasswordFormGroupType } from './reset-password-form-group.type';
 })
 export class ResetPasswordComponent {
   #fb = inject(FormBuilder);
+  #isXSmall$ = inject(IS_XSMALL);
   passwordRegex = PASSWORD_REGEX;
   resetPasswordForm: ResetPasswordFormGroupType = this.#fb.group(
     {
@@ -39,6 +42,7 @@ export class ResetPasswordComponent {
     },
   );
   isFormSubmitted = signal(false);
+  isXSmall = toSignal(this.#isXSmall$);
 
   onSubmit(): void {
     if (this.resetPasswordForm.valid) {
diff --git a/src/app/features/auth/sign-up/sign-up.component.html b/src/app/features/auth/sign-up/sign-up.component.html
index 270105c9e..7e8cc54b9 100644
--- a/src/app/features/auth/sign-up/sign-up.component.html
+++ b/src/app/features/auth/sign-up/sign-up.component.html
@@ -1,5 +1,5 @@
 @if (!isFormSubmitted()) {
-  <section class="sign-up-container">
+  <section class="sign-up-container" [class.mobile]="isXSmall()">
     <h2>Create A Free Account</h2>
 
     <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
@@ -109,7 +109,7 @@ <h2>Create A Free Account</h2>
     </form>
   </section>
 } @else {
-  <section class="message-container">
+  <section class="message-container" [class.mobile]="isXSmall()">
     <h2>Registration successful</h2>
     <p>Check your email to confirm your account</p>
   </section>
diff --git a/src/app/features/auth/sign-up/sign-up.component.scss b/src/app/features/auth/sign-up/sign-up.component.scss
index 74c2c1bd8..9fb027757 100644
--- a/src/app/features/auth/sign-up/sign-up.component.scss
+++ b/src/app/features/auth/sign-up/sign-up.component.scss
@@ -89,6 +89,10 @@
   }
 
   .message-container {
-    margin-top: 40vh;
+    margin-top: auto;
+  }
+
+  .mobile {
+    max-width: 24.5rem;
   }
 }
diff --git a/src/app/features/auth/sign-up/sign-up.component.ts b/src/app/features/auth/sign-up/sign-up.component.ts
index 0b688a025..507a92fa0 100644
--- a/src/app/features/auth/sign-up/sign-up.component.ts
+++ b/src/app/features/auth/sign-up/sign-up.component.ts
@@ -14,6 +14,8 @@ import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { PASSWORD_REGEX, passwordMatchValidator } from './sign-up.helper';
 import { Router, RouterLink } from '@angular/router';
 import { PasswordInputHintComponent } from '@shared/components/password-input-hint/password-input-hint.component';
+import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'osf-sign-up',
@@ -36,6 +38,8 @@ import { PasswordInputHintComponent } from '@shared/components/password-input-hi
 export class SignUpComponent implements OnInit {
   signUpForm: FormGroup = new FormGroup({});
   passwordRegex: RegExp = PASSWORD_REGEX;
+  #isXSmall$ = inject(IS_XSMALL);
+  isXSmall = toSignal(this.#isXSmall$);
   isFormSubmitted = signal(false);
 
   fb: FormBuilder = inject(FormBuilder);
@@ -66,7 +70,6 @@ export class SignUpComponent implements OnInit {
   onSubmit(): void {
     if (this.signUpForm.valid) {
       this.isFormSubmitted.set(true);
-      this.router.navigate(['/home']);
     }
   }
 }
diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
index 4c0a97e6c..f7b5bbb05 100644
--- a/src/app/features/home/home.component.html
+++ b/src/app/features/home/home.component.html
@@ -43,8 +43,8 @@
     [paginator]="true"
     [resizableColumns]="true"
     [autoLayout]="true"
+    [scrollable]="true"
   >
-    class="projects-table">
     <ng-template #header>
       <tr>
         <th pSortableColumn="title">Title <p-sortIcon field="title" /></th>
diff --git a/src/assets/icons/dist/icons.css b/src/assets/icons/dist/icons.css
index 9980ea504..16a56b439 100644
--- a/src/assets/icons/dist/icons.css
+++ b/src/assets/icons/dist/icons.css
@@ -1,8 +1,8 @@
 @font-face {
     font-family: "icons";
-    src: url("./icons.eot?e66420b71be7d7b7facef2a3a4b1caa6#iefix") format("embedded-opentype"),
-url("./icons.woff2?e66420b71be7d7b7facef2a3a4b1caa6") format("woff2"),
-url("./icons.woff?e66420b71be7d7b7facef2a3a4b1caa6") format("woff");
+    src: url("./icons.eot?267e1361c5162f8531987133aab36e82#iefix") format("embedded-opentype"),
+url("./icons.woff2?267e1361c5162f8531987133aab36e82") format("woff2"),
+url("./icons.woff?267e1361c5162f8531987133aab36e82") format("woff");
 }
 
 i[class^="osf-icon-"]:before, i[class*=" osf-icon-"]:before {
@@ -49,135 +49,159 @@ i[class^="osf-icon-"]:before, i[class*=" osf-icon-"]:before {
 .osf-icon-sort-1:before {
     content: "\f10b";
 }
-.osf-icon-settings:before {
+.osf-icon-share:before {
     content: "\f10c";
 }
-.osf-icon-search:before {
+.osf-icon-settings:before {
     content: "\f10d";
 }
-.osf-icon-quotes:before {
+.osf-icon-search:before {
     content: "\f10e";
 }
-.osf-icon-question-mark:before {
+.osf-icon-quotes:before {
     content: "\f10f";
 }
-.osf-icon-publish:before {
+.osf-icon-question-mark:before {
     content: "\f110";
 }
-.osf-icon-profile:before {
+.osf-icon-publish:before {
     content: "\f111";
 }
-.osf-icon-plus:before {
+.osf-icon-profile:before {
     content: "\f112";
 }
-.osf-icon-pdf:before {
+.osf-icon-plus:before {
     content: "\f113";
 }
-.osf-icon-papers:before {
+.osf-icon-pdf:before {
     content: "\f114";
 }
-.osf-icon-padlock:before {
+.osf-icon-papers:before {
     content: "\f115";
 }
-.osf-icon-padlock-unlock:before {
+.osf-icon-padlock:before {
     content: "\f116";
 }
-.osf-icon-orcid:before {
+.osf-icon-padlock-unlock:before {
     content: "\f117";
 }
-.osf-icon-my-projects:before {
+.osf-icon-orcid:before {
     content: "\f118";
 }
-.osf-icon-minus:before {
+.osf-icon-my-projects:before {
     content: "\f119";
 }
-.osf-icon-meetings:before {
+.osf-icon-minus:before {
     content: "\f11a";
 }
-.osf-icon-materials:before {
+.osf-icon-menu:before {
     content: "\f11b";
 }
-.osf-icon-list:before {
+.osf-icon-meetings:before {
     content: "\f11c";
 }
-.osf-icon-linkedin:before {
+.osf-icon-materials:before {
     content: "\f11d";
 }
-.osf-icon-institutions:before {
+.osf-icon-list:before {
     content: "\f11e";
 }
-.osf-icon-information:before {
+.osf-icon-linkedin:before {
     content: "\f11f";
 }
-.osf-icon-image:before {
+.osf-icon-link:before {
     content: "\f120";
 }
-.osf-icon-hosting:before {
+.osf-icon-institutions:before {
     content: "\f121";
 }
-.osf-icon-home:before {
+.osf-icon-information:before {
     content: "\f122";
 }
-.osf-icon-group:before {
+.osf-icon-image:before {
     content: "\f123";
 }
-.osf-icon-github:before {
+.osf-icon-hosting:before {
     content: "\f124";
 }
-.osf-icon-folder:before {
+.osf-icon-home:before {
     content: "\f125";
 }
-.osf-icon-filter:before {
+.osf-icon-help:before {
     content: "\f126";
 }
-.osf-icon-facebook:before {
+.osf-icon-group:before {
     content: "\f127";
 }
-.osf-icon-eye-view:before {
+.osf-icon-github:before {
     content: "\f128";
 }
-.osf-icon-eye-hidden:before {
+.osf-icon-fork:before {
     content: "\f129";
 }
-.osf-icon-email:before {
+.osf-icon-folder:before {
     content: "\f12a";
 }
-.osf-icon-download:before {
+.osf-icon-filter:before {
     content: "\f12b";
 }
-.osf-icon-double-arrow-left:before {
+.osf-icon-facebook:before {
     content: "\f12c";
 }
-.osf-icon-dots:before {
+.osf-icon-eye-view:before {
     content: "\f12d";
 }
-.osf-icon-donate:before {
+.osf-icon-eye-hidden:before {
     content: "\f12e";
 }
-.osf-icon-doc:before {
+.osf-icon-email:before {
     content: "\f12f";
 }
-.osf-icon-design:before {
+.osf-icon-download:before {
     content: "\f130";
 }
-.osf-icon-data:before {
+.osf-icon-double-arrow-left:before {
     content: "\f131";
 }
-.osf-icon-copy:before {
+.osf-icon-dots:before {
     content: "\f132";
 }
-.osf-icon-collections:before {
+.osf-icon-donate:before {
     content: "\f133";
 }
-.osf-icon-collect:before {
+.osf-icon-doc:before {
     content: "\f134";
 }
-.osf-icon-code:before {
+.osf-icon-design:before {
     content: "\f135";
 }
-.osf-icon-calendar-silhouette:before {
+.osf-icon-data:before {
     content: "\f136";
 }
-.osf-icon-arrow-down:before {
+.osf-icon-copy:before {
     content: "\f137";
 }
+.osf-icon-collections:before {
+    content: "\f138";
+}
+.osf-icon-collect:before {
+    content: "\f139";
+}
+.osf-icon-code:before {
+    content: "\f13a";
+}
+.osf-icon-close:before {
+    content: "\f13b";
+}
+.osf-icon-calendar-silhouette:before {
+    content: "\f13c";
+}
+.osf-icon-bookmark:before {
+    content: "\f13d";
+}
+.osf-icon-arrow:before {
+    content: "\f13e";
+}
+.osf-icon-arrow-down:before {
+    content: "\f13f";
+}
diff --git a/src/assets/icons/dist/icons.eot b/src/assets/icons/dist/icons.eot
index 161ea7453..e3179bcde 100644
Binary files a/src/assets/icons/dist/icons.eot and b/src/assets/icons/dist/icons.eot differ
diff --git a/src/assets/icons/dist/icons.html b/src/assets/icons/dist/icons.html
index 4404dccbe..6ec637837 100644
--- a/src/assets/icons/dist/icons.html
+++ b/src/assets/icons/dist/icons.html
@@ -45,6 +45,7 @@
         -webkit-border-radius: 0 0 3px 3px;
         -moz-border-radius: 0 0 3px 3px;
         border-radius: 0 0 3px 3px;
+        color: #666;
       }
     </style>
 
@@ -141,6 +142,14 @@ <h1>icons</h1>
       <span class="label">sort-1</span>
     </div>
 
+    <div class="preview">
+      <span class="inner">
+        <i class="osf-icon osf-icon-share"></i>
+      </span>
+      <br />
+      <span class="label">share</span>
+    </div>
+
     <div class="preview">
       <span class="inner">
         <i class="osf-icon osf-icon-settings"></i>
@@ -253,6 +262,14 @@ <h1>icons</h1>
       <span class="label">minus</span>
     </div>
 
+    <div class="preview">
+      <span class="inner">
+        <i class="osf-icon osf-icon-menu"></i>
+      </span>
+      <br />
+      <span class="label">menu</span>
+    </div>
+
     <div class="preview">
       <span class="inner">
         <i class="osf-icon osf-icon-meetings"></i>
@@ -285,6 +302,14 @@ <h1>icons</h1>
       <span class="label">linkedin</span>
     </div>
 
+    <div class="preview">
+      <span class="inner">
+        <i class="osf-icon osf-icon-link"></i>
+      </span>
+      <br />
+      <span class="label">link</span>
+    </div>
+
     <div class="preview">
       <span class="inner">
         <i class="osf-icon osf-icon-institutions"></i>
@@ -325,6 +350,14 @@ <h1>icons</h1>
       <span class="label">home</span>
     </div>
 
+    <div class="preview">
+      <span class="inner">
+        <i class="osf-icon osf-icon-help"></i>
+      </span>
+      <br />
+      <span class="label">help</span>
+    </div>
+
     <div class="preview">
       <span class="inner">
         <i class="osf-icon osf-icon-group"></i>
@@ -341,6 +374,14 @@ <h1>icons</h1>
       <span class="label">github</span>
     </div>
 
+    <div class="preview">
+      <span class="inner">
+        <i class="osf-icon osf-icon-fork"></i>
+      </span>
+      <br />
+      <span class="label">fork</span>
+    </div>
+
     <div class="preview">
       <span class="inner">
         <i class="osf-icon osf-icon-folder"></i>
@@ -477,6 +518,14 @@ <h1>icons</h1>
       <span class="label">code</span>
     </div>
 
+    <div class="preview">
+      <span class="inner">
+        <i class="osf-icon osf-icon-close"></i>
+      </span>
+      <br />
+      <span class="label">close</span>
+    </div>
+
     <div class="preview">
       <span class="inner">
         <i class="osf-icon osf-icon-calendar-silhouette"></i>
@@ -485,6 +534,22 @@ <h1>icons</h1>
       <span class="label">calendar-silhouette</span>
     </div>
 
+    <div class="preview">
+      <span class="inner">
+        <i class="osf-icon osf-icon-bookmark"></i>
+      </span>
+      <br />
+      <span class="label">bookmark</span>
+    </div>
+
+    <div class="preview">
+      <span class="inner">
+        <i class="osf-icon osf-icon-arrow"></i>
+      </span>
+      <br />
+      <span class="label">arrow</span>
+    </div>
+
     <div class="preview">
       <span class="inner">
         <i class="osf-icon osf-icon-arrow-down"></i>
diff --git a/src/assets/icons/dist/icons.json b/src/assets/icons/dist/icons.json
index 5ba341dc7..15e63fe81 100644
--- a/src/assets/icons/dist/icons.json
+++ b/src/assets/icons/dist/icons.json
@@ -10,48 +10,56 @@
     "sort-3": 61705,
     "sort-2": 61706,
     "sort-1": 61707,
-    "settings": 61708,
-    "search": 61709,
-    "quotes": 61710,
-    "question-mark": 61711,
-    "publish": 61712,
-    "profile": 61713,
-    "plus": 61714,
-    "pdf": 61715,
-    "papers": 61716,
-    "padlock": 61717,
-    "padlock-unlock": 61718,
-    "orcid": 61719,
-    "my-projects": 61720,
-    "minus": 61721,
-    "meetings": 61722,
-    "materials": 61723,
-    "list": 61724,
-    "linkedin": 61725,
-    "institutions": 61726,
-    "information": 61727,
-    "image": 61728,
-    "hosting": 61729,
-    "home": 61730,
-    "group": 61731,
-    "github": 61732,
-    "folder": 61733,
-    "filter": 61734,
-    "facebook": 61735,
-    "eye-view": 61736,
-    "eye-hidden": 61737,
-    "email": 61738,
-    "download": 61739,
-    "double-arrow-left": 61740,
-    "dots": 61741,
-    "donate": 61742,
-    "doc": 61743,
-    "design": 61744,
-    "data": 61745,
-    "copy": 61746,
-    "collections": 61747,
-    "collect": 61748,
-    "code": 61749,
-    "calendar-silhouette": 61750,
-    "arrow-down": 61751
+    "share": 61708,
+    "settings": 61709,
+    "search": 61710,
+    "quotes": 61711,
+    "question-mark": 61712,
+    "publish": 61713,
+    "profile": 61714,
+    "plus": 61715,
+    "pdf": 61716,
+    "papers": 61717,
+    "padlock": 61718,
+    "padlock-unlock": 61719,
+    "orcid": 61720,
+    "my-projects": 61721,
+    "minus": 61722,
+    "menu": 61723,
+    "meetings": 61724,
+    "materials": 61725,
+    "list": 61726,
+    "linkedin": 61727,
+    "link": 61728,
+    "institutions": 61729,
+    "information": 61730,
+    "image": 61731,
+    "hosting": 61732,
+    "home": 61733,
+    "help": 61734,
+    "group": 61735,
+    "github": 61736,
+    "fork": 61737,
+    "folder": 61738,
+    "filter": 61739,
+    "facebook": 61740,
+    "eye-view": 61741,
+    "eye-hidden": 61742,
+    "email": 61743,
+    "download": 61744,
+    "double-arrow-left": 61745,
+    "dots": 61746,
+    "donate": 61747,
+    "doc": 61748,
+    "design": 61749,
+    "data": 61750,
+    "copy": 61751,
+    "collections": 61752,
+    "collect": 61753,
+    "code": 61754,
+    "close": 61755,
+    "calendar-silhouette": 61756,
+    "bookmark": 61757,
+    "arrow": 61758,
+    "arrow-down": 61759
 }
\ No newline at end of file
diff --git a/src/assets/icons/dist/icons.ts b/src/assets/icons/dist/icons.ts
index f442859c3..00463c528 100644
--- a/src/assets/icons/dist/icons.ts
+++ b/src/assets/icons/dist/icons.ts
@@ -10,6 +10,7 @@ export type IconsId =
   | 'sort-3'
   | 'sort-2'
   | 'sort-1'
+  | 'share'
   | 'settings'
   | 'search'
   | 'quotes'
@@ -24,17 +25,21 @@ export type IconsId =
   | 'orcid'
   | 'my-projects'
   | 'minus'
+  | 'menu'
   | 'meetings'
   | 'materials'
   | 'list'
   | 'linkedin'
+  | 'link'
   | 'institutions'
   | 'information'
   | 'image'
   | 'hosting'
   | 'home'
+  | 'help'
   | 'group'
   | 'github'
+  | 'fork'
   | 'folder'
   | 'filter'
   | 'facebook'
@@ -52,7 +57,10 @@ export type IconsId =
   | 'collections'
   | 'collect'
   | 'code'
+  | 'close'
   | 'calendar-silhouette'
+  | 'bookmark'
+  | 'arrow'
   | 'arrow-down';
 
 export type IconsKey =
@@ -67,6 +75,7 @@ export type IconsKey =
   | 'Sort3'
   | 'Sort2'
   | 'Sort1'
+  | 'Share'
   | 'Settings'
   | 'Search'
   | 'Quotes'
@@ -81,17 +90,21 @@ export type IconsKey =
   | 'Orcid'
   | 'MyProjects'
   | 'Minus'
+  | 'Menu'
   | 'Meetings'
   | 'Materials'
   | 'List'
   | 'Linkedin'
+  | 'Link'
   | 'Institutions'
   | 'Information'
   | 'Image'
   | 'Hosting'
   | 'Home'
+  | 'Help'
   | 'Group'
   | 'Github'
+  | 'Fork'
   | 'Folder'
   | 'Filter'
   | 'Facebook'
@@ -109,7 +122,10 @@ export type IconsKey =
   | 'Collections'
   | 'Collect'
   | 'Code'
+  | 'Close'
   | 'CalendarSilhouette'
+  | 'Bookmark'
+  | 'Arrow'
   | 'ArrowDown';
 
 export enum Icons {
@@ -124,6 +140,7 @@ export enum Icons {
   Sort3 = 'sort-3',
   Sort2 = 'sort-2',
   Sort1 = 'sort-1',
+  Share = 'share',
   Settings = 'settings',
   Search = 'search',
   Quotes = 'quotes',
@@ -138,17 +155,21 @@ export enum Icons {
   Orcid = 'orcid',
   MyProjects = 'my-projects',
   Minus = 'minus',
+  Menu = 'menu',
   Meetings = 'meetings',
   Materials = 'materials',
   List = 'list',
   Linkedin = 'linkedin',
+  Link = 'link',
   Institutions = 'institutions',
   Information = 'information',
   Image = 'image',
   Hosting = 'hosting',
   Home = 'home',
+  Help = 'help',
   Group = 'group',
   Github = 'github',
+  Fork = 'fork',
   Folder = 'folder',
   Filter = 'filter',
   Facebook = 'facebook',
@@ -166,7 +187,10 @@ export enum Icons {
   Collections = 'collections',
   Collect = 'collect',
   Code = 'code',
+  Close = 'close',
   CalendarSilhouette = 'calendar-silhouette',
+  Bookmark = 'bookmark',
+  Arrow = 'arrow',
   ArrowDown = 'arrow-down',
 }
 
@@ -182,48 +206,56 @@ export const ICONS_CODEPOINTS: Record<Icons, string> = {
   [Icons.Sort3]: '61705',
   [Icons.Sort2]: '61706',
   [Icons.Sort1]: '61707',
-  [Icons.Settings]: '61708',
-  [Icons.Search]: '61709',
-  [Icons.Quotes]: '61710',
-  [Icons.QuestionMark]: '61711',
-  [Icons.Publish]: '61712',
-  [Icons.Profile]: '61713',
-  [Icons.Plus]: '61714',
-  [Icons.Pdf]: '61715',
-  [Icons.Papers]: '61716',
-  [Icons.Padlock]: '61717',
-  [Icons.PadlockUnlock]: '61718',
-  [Icons.Orcid]: '61719',
-  [Icons.MyProjects]: '61720',
-  [Icons.Minus]: '61721',
-  [Icons.Meetings]: '61722',
-  [Icons.Materials]: '61723',
-  [Icons.List]: '61724',
-  [Icons.Linkedin]: '61725',
-  [Icons.Institutions]: '61726',
-  [Icons.Information]: '61727',
-  [Icons.Image]: '61728',
-  [Icons.Hosting]: '61729',
-  [Icons.Home]: '61730',
-  [Icons.Group]: '61731',
-  [Icons.Github]: '61732',
-  [Icons.Folder]: '61733',
-  [Icons.Filter]: '61734',
-  [Icons.Facebook]: '61735',
-  [Icons.EyeView]: '61736',
-  [Icons.EyeHidden]: '61737',
-  [Icons.Email]: '61738',
-  [Icons.Download]: '61739',
-  [Icons.DoubleArrowLeft]: '61740',
-  [Icons.Dots]: '61741',
-  [Icons.Donate]: '61742',
-  [Icons.Doc]: '61743',
-  [Icons.Design]: '61744',
-  [Icons.Data]: '61745',
-  [Icons.Copy]: '61746',
-  [Icons.Collections]: '61747',
-  [Icons.Collect]: '61748',
-  [Icons.Code]: '61749',
-  [Icons.CalendarSilhouette]: '61750',
-  [Icons.ArrowDown]: '61751',
+  [Icons.Share]: '61708',
+  [Icons.Settings]: '61709',
+  [Icons.Search]: '61710',
+  [Icons.Quotes]: '61711',
+  [Icons.QuestionMark]: '61712',
+  [Icons.Publish]: '61713',
+  [Icons.Profile]: '61714',
+  [Icons.Plus]: '61715',
+  [Icons.Pdf]: '61716',
+  [Icons.Papers]: '61717',
+  [Icons.Padlock]: '61718',
+  [Icons.PadlockUnlock]: '61719',
+  [Icons.Orcid]: '61720',
+  [Icons.MyProjects]: '61721',
+  [Icons.Minus]: '61722',
+  [Icons.Menu]: '61723',
+  [Icons.Meetings]: '61724',
+  [Icons.Materials]: '61725',
+  [Icons.List]: '61726',
+  [Icons.Linkedin]: '61727',
+  [Icons.Link]: '61728',
+  [Icons.Institutions]: '61729',
+  [Icons.Information]: '61730',
+  [Icons.Image]: '61731',
+  [Icons.Hosting]: '61732',
+  [Icons.Home]: '61733',
+  [Icons.Help]: '61734',
+  [Icons.Group]: '61735',
+  [Icons.Github]: '61736',
+  [Icons.Fork]: '61737',
+  [Icons.Folder]: '61738',
+  [Icons.Filter]: '61739',
+  [Icons.Facebook]: '61740',
+  [Icons.EyeView]: '61741',
+  [Icons.EyeHidden]: '61742',
+  [Icons.Email]: '61743',
+  [Icons.Download]: '61744',
+  [Icons.DoubleArrowLeft]: '61745',
+  [Icons.Dots]: '61746',
+  [Icons.Donate]: '61747',
+  [Icons.Doc]: '61748',
+  [Icons.Design]: '61749',
+  [Icons.Data]: '61750',
+  [Icons.Copy]: '61751',
+  [Icons.Collections]: '61752',
+  [Icons.Collect]: '61753',
+  [Icons.Code]: '61754',
+  [Icons.Close]: '61755',
+  [Icons.CalendarSilhouette]: '61756',
+  [Icons.Bookmark]: '61757',
+  [Icons.Arrow]: '61758',
+  [Icons.ArrowDown]: '61759',
 };
diff --git a/src/assets/icons/dist/icons.woff b/src/assets/icons/dist/icons.woff
index 96e1eaffd..26f5fca7e 100644
Binary files a/src/assets/icons/dist/icons.woff and b/src/assets/icons/dist/icons.woff differ
diff --git a/src/assets/icons/dist/icons.woff2 b/src/assets/icons/dist/icons.woff2
index b57a283de..f25e0e415 100644
Binary files a/src/assets/icons/dist/icons.woff2 and b/src/assets/icons/dist/icons.woff2 differ
diff --git a/src/assets/icons/source/arrow.svg b/src/assets/icons/source/arrow.svg
new file mode 100644
index 000000000..c22647a2e
--- /dev/null
+++ b/src/assets/icons/source/arrow.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <defs/>
+  <path d="M9.984,8.331 C9.985,8.418 9.968,8.505 9.936,8.587 C9.904,8.668 9.856,8.742 9.796,8.804 L5.9,12.804 C5.778,12.93 5.612,13 5.439,13 C5.266,13 5.1,12.93 4.978,12.804 C4.856,12.678 4.787,12.508 4.787,12.331 C4.787,12.153 4.856,11.983 4.978,11.857 L8.419,8.331 L4.985,4.804 C4.878,4.676 4.823,4.512 4.829,4.345 C4.835,4.177 4.903,4.018 5.019,3.899 C5.134,3.78 5.289,3.711 5.453,3.704 C5.616,3.698 5.776,3.755 5.9,3.864 L9.796,7.864 C9.916,7.988 9.983,8.156 9.984,8.331 Z"/>
+</svg>
+
diff --git a/src/assets/icons/source/bookmark.svg b/src/assets/icons/source/bookmark.svg
new file mode 100644
index 000000000..3fd066e6e
--- /dev/null
+++ b/src/assets/icons/source/bookmark.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs/>
+  <path d="M2.562,23.863 C2.732,23.958 2.925,24.005 3.119,24 C3.314,23.994 3.504,23.937 3.669,23.834 L11.818,18.741 L19.967,23.834 C20.132,23.937 20.322,23.994 20.517,23.999 C20.711,24.005 20.904,23.957 21.074,23.863 C21.244,23.769 21.386,23.63 21.485,23.462 C21.584,23.295 21.636,23.104 21.636,22.909 L21.636,3.273 C21.636,2.405 21.291,1.572 20.678,0.959 C20.064,0.345 19.231,0 18.363,0 L5.273,0 C4.405,0 3.572,0.345 2.959,0.959 C2.345,1.572 2,2.405 2,3.273 L2,22.909 C2,23.104 2.052,23.295 2.151,23.463 C2.25,23.631 2.391,23.769 2.562,23.863 Z M4.182,3.273 C4.182,2.983 4.297,2.706 4.501,2.501 C4.706,2.297 4.983,2.182 5.273,2.182 L18.363,2.182 C18.653,2.182 18.93,2.297 19.135,2.501 C19.339,2.706 19.454,2.983 19.454,3.273 L19.454,20.945 L12.396,16.534 C12.223,16.425 12.023,16.368 11.818,16.368 C11.614,16.368 11.413,16.425 11.24,16.534 L4.182,20.945 L4.182,3.273 Z"/>
+</svg>
+
diff --git a/src/assets/icons/source/close.svg b/src/assets/icons/source/close.svg
new file mode 100644
index 000000000..ecb33baa7
--- /dev/null
+++ b/src/assets/icons/source/close.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <defs/>
+  <path d="M2.586,14 C2.47,14 2.357,13.966 2.26,13.901 C2.164,13.837 2.089,13.745 2.045,13.638 C2,13.531 1.989,13.413 2.011,13.3 C2.034,13.186 2.09,13.082 2.172,12.999 L13,2.172 C13.11,2.062 13.258,2 13.414,2 C13.569,2 13.718,2.062 13.828,2.172 C13.938,2.282 14,2.431 14,2.586 C14,2.741 13.938,2.89 13.828,3 L3,13.828 C2.946,13.883 2.881,13.926 2.81,13.955 C2.739,13.985 2.663,14 2.586,14 Z"/>
+  <path d="M13.414,14 C13.337,14 13.261,13.985 13.19,13.955 C13.118,13.926 13.054,13.883 12.999,13.828 L2.172,3 C2.062,2.89 2,2.741 2,2.586 C2,2.431 2.062,2.282 2.172,2.172 C2.282,2.062 2.431,2 2.586,2 C2.741,2 2.89,2.062 3,2.172 L13.828,12.999 C13.91,13.082 13.966,13.186 13.989,13.3 C14.011,13.413 14,13.531 13.955,13.638 C13.911,13.745 13.836,13.837 13.739,13.901 C13.643,13.966 13.53,14 13.414,14 Z"/>
+</svg>
+
diff --git a/src/assets/icons/source/fork.svg b/src/assets/icons/source/fork.svg
new file mode 100644
index 000000000..78f2fc9b7
--- /dev/null
+++ b/src/assets/icons/source/fork.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs/>
+  <path d="M19.125,2.875 C18.542,2.292 17.834,2 17,2 C16.167,2 15.459,2.292 14.875,2.875 C14.292,3.458 14.001,4.167 14.001,5 C14.001,5.542 14.136,6.044 14.406,6.508 C14.677,6.971 15.041,7.333 15.5,7.594 C15.5,8.135 15.456,8.612 15.368,9.024 C15.279,9.435 15.133,9.797 14.93,10.11 C14.727,10.422 14.516,10.688 14.297,10.906 C14.078,11.125 13.771,11.331 13.375,11.524 C12.979,11.716 12.612,11.877 12.274,12.008 C11.935,12.138 11.479,12.292 10.906,12.469 C9.865,12.792 9.063,13.088 8.5,13.359 L8.5,5.594 C8.958,5.333 9.323,4.971 9.594,4.508 C9.865,4.044 10,3.542 10,3 C10,2.167 9.708,1.458 9.125,0.875 C8.542,0.292 7.834,0 7,0 C6.167,0 5.458,0.292 4.875,0.875 C4.292,1.458 4,2.167 4,3 C4,3.542 4.135,4.044 4.406,4.508 C4.677,4.971 5.041,5.333 5.5,5.594 L5.5,18.406 C5.041,18.667 4.677,19.029 4.406,19.492 C4.135,19.956 4,20.459 4,21 C4,21.834 4.292,22.542 4.875,23.125 C5.458,23.708 6.167,24 7,24 C7.833,24 8.542,23.708 9.125,23.125 C9.708,22.542 10,21.833 10,21 C10,20.459 9.865,19.956 9.594,19.492 C9.323,19.029 8.958,18.667 8.5,18.406 L8.5,18 C8.5,17.282 8.716,16.761 9.148,16.438 C9.581,16.115 10.463,15.745 11.797,15.329 C13.204,14.88 14.261,14.458 14.969,14.062 C17.302,12.74 18.48,10.583 18.5,7.594 C18.959,7.333 19.323,6.971 19.594,6.508 C19.865,6.044 20,5.542 20,5 C20,4.167 19.709,3.459 19.125,2.875 Z M8.063,22.063 C7.771,22.355 7.417,22.501 7,22.501 C6.584,22.501 6.229,22.355 5.938,22.063 C5.646,21.772 5.5,21.417 5.5,21.001 C5.5,20.584 5.646,20.23 5.938,19.938 C6.229,19.646 6.584,19.501 7,19.501 C7.417,19.501 7.771,19.647 8.063,19.938 C8.355,20.23 8.5,20.584 8.5,21.001 C8.5,21.417 8.355,21.772 8.063,22.063 Z M8.063,4.063 C7.771,4.354 7.417,4.5 7,4.5 C6.584,4.5 6.229,4.354 5.938,4.063 C5.646,3.771 5.5,3.417 5.5,3 C5.5,2.583 5.646,2.229 5.938,1.938 C6.229,1.646 6.584,1.5 7,1.5 C7.417,1.5 7.771,1.646 8.063,1.938 C8.355,2.229 8.5,2.583 8.5,3 C8.5,3.417 8.355,3.771 8.063,4.063 Z M18.063,6.063 C17.771,6.354 17.417,6.5 17.001,6.5 C16.584,6.5 16.229,6.354 15.938,6.063 C15.646,5.771 15.501,5.417 15.501,5 C15.501,4.584 15.646,4.23 15.938,3.938 C16.23,3.646 16.584,3.5 17.001,3.5 C17.417,3.5 17.771,3.646 18.063,3.938 C18.354,4.229 18.5,4.584 18.5,5 C18.5,5.417 18.355,5.771 18.063,6.063 Z"/>
+</svg>
+
diff --git a/src/assets/icons/source/help.svg b/src/assets/icons/source/help.svg
new file mode 100644
index 000000000..67a7c52fc
--- /dev/null
+++ b/src/assets/icons/source/help.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs/>
+  <path d="M10,0 C15.528,0 20,4.473 20,10 C20,15.528 15.527,20 10,20 C4.472,20 0,15.527 0,10 C0,4.472 4.473,0 10,0 Z M11.205,9.56 C11.56,9.284 12.679,8.389 12.679,7.151 C12.679,5.914 11.56,4.979 9.875,4.979 C8.098,4.979 7.282,6.032 7.282,6.743 C7.282,7.256 7.716,7.493 8.072,7.493 C8.783,7.493 8.493,6.48 9.836,6.48 C10.494,6.48 11.02,6.769 11.02,7.375 C11.02,8.086 10.283,8.494 9.849,8.862 C9.467,9.191 8.967,9.731 8.967,10.863 C8.967,11.548 9.151,11.745 9.691,11.745 C10.336,11.745 10.467,11.455 10.467,11.205 C10.467,10.521 10.481,10.126 11.205,9.56 Z M9.704,14.68 C10.27,14.68 10.718,14.207 10.718,13.667 C10.718,13.114 10.257,12.653 9.704,12.653 C9.151,12.653 8.704,13.114 8.704,13.667 C8.704,14.207 9.138,14.68 9.704,14.68 Z"/>
+</svg>
+
diff --git a/src/assets/icons/source/link.svg b/src/assets/icons/source/link.svg
new file mode 100644
index 000000000..57d3a53c4
--- /dev/null
+++ b/src/assets/icons/source/link.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs/>
+  <path d="M14.644,9.355 C14.968,9.68 15.137,10.128 15.108,10.586 C15.08,10.97 14.915,11.33 14.644,11.602 C14.012,12.196 13.028,12.196 12.396,11.602 C11.459,10.667 9.942,10.667 9.005,11.602 L3.898,16.705 C2.96,17.643 2.96,19.163 3.898,20.101 C4.835,21.038 6.355,21.038 7.293,20.101 L10.313,17.077 C10.427,16.962 10.599,16.928 10.748,16.989 C11.561,17.32 12.431,17.488 13.308,17.485 L13.468,17.485 C13.689,17.484 13.869,17.662 13.87,17.883 C13.871,17.99 13.828,18.093 13.752,18.169 L9.553,22.368 C8.504,23.418 7.081,24.005 5.597,24 C2.505,23.998 0,21.49 0.002,18.397 C0.003,16.916 0.591,15.495 1.638,14.446 L6.725,9.355 C7.774,8.302 9.199,7.712 10.684,7.715 C11.755,7.715 12.803,8.022 13.704,8.599 C14.044,8.815 14.359,9.069 14.644,9.355 Z"/>
+  <path d="M22.358,1.64 C24.544,3.827 24.544,7.372 22.358,9.559 L17.267,14.65 C16.551,15.366 15.653,15.875 14.671,16.121 L14.627,16.121 L14.395,16.169 L14.267,16.193 L13.991,16.233 L13.855,16.233 C13.751,16.233 13.659,16.253 13.571,16.257 L13.331,16.285 L13.027,16.285 C12.828,16.277 12.629,16.259 12.431,16.229 C12.267,16.201 12.108,16.169 11.948,16.129 L11.712,16.065 C11.628,16.041 11.54,16.013 11.456,15.981 C11.372,15.949 11.284,15.921 11.2,15.885 C11.116,15.849 11.032,15.817 10.948,15.777 C10.352,15.502 9.811,15.123 9.348,14.658 C9.024,14.333 8.855,13.884 8.884,13.426 C8.91,13.04 9.075,12.676 9.348,12.402 C9.979,11.808 10.964,11.808 11.596,12.402 C12.533,13.338 14.05,13.338 14.987,12.402 L16.299,11.098 L16.331,11.062 L20.082,7.315 C21.02,6.377 21.02,4.857 20.082,3.92 C19.145,2.982 17.624,2.982 16.687,3.92 L13.675,6.927 C13.561,7.042 13.389,7.077 13.239,7.015 C12.428,6.683 11.56,6.514 10.684,6.515 L10.536,6.515 C10.373,6.518 10.224,6.422 10.16,6.271 C10.095,6.121 10.129,5.947 10.244,5.831 L14.439,1.64 C16.626,-0.547 20.171,-0.547 22.358,1.64 Z"/>
+</svg>
+
diff --git a/src/assets/icons/source/menu.svg b/src/assets/icons/source/menu.svg
new file mode 100644
index 000000000..2920de184
--- /dev/null
+++ b/src/assets/icons/source/menu.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
+  <defs/>
+  <path d="M32.583,18.385 L1.417,18.385 C0.635,18.385 0,17.764 0,17 C0,16.236 0.635,15.615 1.417,15.615 L32.583,15.615 C33.365,15.615 34,16.236 34,17 C34,17.764 33.365,18.385 32.583,18.385 Z M32.583,7.769 L1.417,7.769 C0.635,7.769 0,7.149 0,6.385 C0,5.62 0.635,5 1.417,5 L32.583,5 C33.365,5 34,5.62 34,6.385 C34,7.149 33.365,7.769 32.583,7.769 Z M1.417,29 C0.635,29 0,28.38 0,27.615 C0,26.851 0.635,26.231 1.417,26.231 L32.583,26.231 C33.365,26.231 34,26.851 34,27.615 C34,28.38 33.365,29 32.583,29 Z"/>
+</svg>
+
diff --git a/src/assets/icons/source/share.svg b/src/assets/icons/source/share.svg
new file mode 100644
index 000000000..6ee3422eb
--- /dev/null
+++ b/src/assets/icons/source/share.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs/>
+  <path d="M17.578,15.528 C16.744,15.528 15.909,15.781 15.201,16.236 L10.371,13.024 C10.548,12.341 10.548,11.633 10.371,10.95 L15.201,7.764 C16.314,8.523 17.73,8.7 18.995,8.244 C20.259,7.789 21.245,6.778 21.65,5.488 C22.055,4.198 21.777,2.807 20.993,1.72 C20.183,0.632 18.919,0 17.578,0 C16.238,0 14.974,0.632 14.164,1.72 C13.355,2.807 13.127,4.198 13.507,5.488 L8.803,8.599 C7.968,7.966 6.906,7.663 5.844,7.764 C4.782,7.865 3.821,8.346 3.113,9.13 C2.405,9.914 2,10.925 2,11.987 C2,13.05 2.405,14.061 3.113,14.845 C3.821,15.629 4.807,16.11 5.844,16.211 C6.881,16.312 7.943,16.008 8.803,15.376 L13.532,18.512 C13.406,18.917 13.355,19.321 13.355,19.751 C13.355,20.889 13.81,21.951 14.594,22.761 C15.378,23.545 16.466,24 17.604,24 C18.742,24 19.804,23.545 20.613,22.761 C21.397,21.977 21.852,20.889 21.852,19.751 C21.852,18.613 21.397,17.551 20.613,16.742 C19.779,15.983 18.691,15.528 17.578,15.528 Z"/>
+</svg>
+
diff --git a/src/assets/styles/_mixins.scss b/src/assets/styles/_mixins.scss
index 2e409f7de..ef98f300e 100644
--- a/src/assets/styles/_mixins.scss
+++ b/src/assets/styles/_mixins.scss
@@ -10,6 +10,11 @@
   align-items: center;
 }
 
+@mixin flex-between {
+  display: flex;
+  justify-content: space-between;
+}
+
 @mixin flex-align-center {
   display: flex;
   align-items: center;
diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index 9f5143535..79e0d4476 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -130,6 +130,16 @@
   }
 }
 
+.topnav-btn {
+  .p-button {
+    padding: 0;
+
+    &:hover {
+      background: none;
+    }
+  }
+}
+
 .btn-full-width {
   .p-button {
     width: 100%;
diff --git a/src/assets/styles/overrides/drawer.scss b/src/assets/styles/overrides/drawer.scss
new file mode 100644
index 000000000..a739b8bd2
--- /dev/null
+++ b/src/assets/styles/overrides/drawer.scss
@@ -0,0 +1,16 @@
+@use "../variables" as var;
+
+.p-drawer.p-drawer-active.p-drawer-left {
+  width: 100%;
+  background-color: var.$dark-blue-1;
+  padding-left: 1.8rem;
+}
+
+.p-drawer-header {
+  height: 6.1rem;
+  padding: 0;
+}
+
+.p-drawer-content {
+  padding: 0;
+}
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index a1cbadb99..367d1a052 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -7,6 +7,7 @@
 @use "./overrides/divider";
 @use "./overrides/table";
 @use "./overrides/message";
+@use "./overrides/drawer";
 
 @layer base, primeng, reset;