diff --git a/.gitignore b/.gitignore
index cc7b14135..5373aea4c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,4 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+package-lock.json
diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html
index 07ef9e8a4..d67322bbd 100644
--- a/src/app/core/components/root/root.component.html
+++ b/src/app/core/components/root/root.component.html
@@ -1,4 +1,4 @@
-@if (!isPortrait()) {
+@if (isWeb()) {
   <div class="layout-desktop">
     <osf-sidenav></osf-sidenav>
     <div class="content-wrapper">
diff --git a/src/app/core/components/root/root.component.scss b/src/app/core/components/root/root.component.scss
index 2d9da4687..7090691b3 100644
--- a/src/app/core/components/root/root.component.scss
+++ b/src/app/core/components/root/root.component.scss
@@ -4,6 +4,7 @@
 :host {
   height: 100vh;
   display: flex;
+  max-width: 100vw;
 
   .layout-desktop {
     display: flex;
@@ -29,6 +30,7 @@
   .layout-tablet {
     @include mix.flex-center;
     flex: 1;
+    max-width: 100vw;
 
     .content-wrapper {
       @include mix.flex-column;
diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts
index 23361ce2b..194dd6007 100644
--- a/src/app/core/components/root/root.component.ts
+++ b/src/app/core/components/root/root.component.ts
@@ -5,7 +5,7 @@ import { HeaderComponent } from '@core/components/header/header.component';
 import { MainContentComponent } from '@core/components/main-content/main-content.component';
 import { FooterComponent } from '@core/components/footer/footer.component';
 import { TopnavComponent } from '@core/components/topnav/topnav.component';
-import { IS_PORTRAIT } from '@shared/utils/breakpoints.tokens';
+import { IS_WEB } from '@shared/utils/breakpoints.tokens';
 import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
@@ -24,6 +24,6 @@ import { toSignal } from '@angular/core/rxjs-interop';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RootComponent {
-  #isPortrait$ = inject(IS_PORTRAIT);
-  isPortrait = toSignal(this.#isPortrait$);
+  #isWeb$ = inject(IS_WEB);
+  isWeb = toSignal(this.#isWeb$);
 }
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 efbff5da7..83874af3f 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" [class.mobile]="isXSmall()">
+<section class="forgot-password-container" [class.mobile]="isMobile()">
   <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.ts b/src/app/features/auth/forgot-password/forgot-password.component.ts
index 8198c2f80..897144f09 100644
--- a/src/app/features/auth/forgot-password/forgot-password.component.ts
+++ b/src/app/features/auth/forgot-password/forgot-password.component.ts
@@ -17,11 +17,11 @@ import { toSignal } from '@angular/core/rxjs-interop';
 })
 export class ForgotPasswordComponent {
   #fb = inject(FormBuilder);
-  #isXSmall$ = inject(IS_XSMALL);
+  #isMobile$ = inject(IS_XSMALL);
   forgotPasswordForm: ForgotPasswordFormGroupType = this.#fb.group({
     email: ['', [Validators.required, Validators.email]],
   });
-  isXSmall = toSignal(this.#isXSmall$);
+  isMobile = toSignal(this.#isMobile$);
   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 e8fab76ad..dab201213 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" [class.mobile]="isXSmall()">
+  <section class="reset-password-container" [class.mobile]="isMobile()">
     <h2>Reset Password</h2>
 
     <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()">
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 d8699b10f..c62c53e2f 100644
--- a/src/app/features/auth/reset-password/reset-password.component.ts
+++ b/src/app/features/auth/reset-password/reset-password.component.ts
@@ -27,7 +27,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 })
 export class ResetPasswordComponent {
   #fb = inject(FormBuilder);
-  #isXSmall$ = inject(IS_XSMALL);
+  #isMobile$ = inject(IS_XSMALL);
   passwordRegex = PASSWORD_REGEX;
   resetPasswordForm: ResetPasswordFormGroupType = this.#fb.group(
     {
@@ -42,7 +42,7 @@ export class ResetPasswordComponent {
     },
   );
   isFormSubmitted = signal(false);
-  isXSmall = toSignal(this.#isXSmall$);
+  isMobile = toSignal(this.#isMobile$);
 
   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 7e8cc54b9..9c0883e56 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" [class.mobile]="isXSmall()">
+  <section class="sign-up-container" [class.mobile]="isMobile()">
     <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" [class.mobile]="isXSmall()">
+  <section class="message-container" [class.mobile]="isMobile()">
     <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.ts b/src/app/features/auth/sign-up/sign-up.component.ts
index 507a92fa0..f7cdc2cf0 100644
--- a/src/app/features/auth/sign-up/sign-up.component.ts
+++ b/src/app/features/auth/sign-up/sign-up.component.ts
@@ -38,8 +38,8 @@ import { toSignal } from '@angular/core/rxjs-interop';
 export class SignUpComponent implements OnInit {
   signUpForm: FormGroup = new FormGroup({});
   passwordRegex: RegExp = PASSWORD_REGEX;
-  #isXSmall$ = inject(IS_XSMALL);
-  isXSmall = toSignal(this.#isXSmall$);
+  #isMobile$ = inject(IS_XSMALL);
+  isMobile = toSignal(this.#isMobile$);
   isFormSubmitted = signal(false);
 
   fb: FormBuilder = inject(FormBuilder);
diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
index cbafbe0db..d2c5ab332 100644
--- a/src/app/features/home/home.component.html
+++ b/src/app/features/home/home.component.html
@@ -11,8 +11,8 @@
 
 <section
   class="home-container"
-  [class.mobile]="isXSmall()"
-  [class.portrait]="isPortrait()"
+  [class.tablet]="isTablet()"
+  [class.mobile]="isMobile()"
 >
   <osf-sub-header
     [showButton]="true"
diff --git a/src/app/features/home/home.component.scss b/src/app/features/home/home.component.scss
index b5b32b82f..4b9f8550b 100644
--- a/src/app/features/home/home.component.scss
+++ b/src/app/features/home/home.component.scss
@@ -6,6 +6,8 @@
 
   .home-container {
     margin-top: 4.5rem;
+    //width: 100%;
+    max-width: 100%;
   }
 
   .dashboard-header {
@@ -30,7 +32,7 @@
   .quick-search-container {
     background: white;
     padding: 1.71rem;
-    width: 100%;
+    //max-width: 100vw;
 
     .text-center {
       font-size: 1rem;
@@ -114,7 +116,6 @@
   .latest-research-container {
     width: 100%;
     background: var.$bg-blue-3;
-    height: 11.14rem;
     padding: 3.43rem 3.43rem 3.43rem 1.71rem;
 
     .content {
@@ -151,7 +152,6 @@
 
   .hosting-container {
     width: 100%;
-    height: 11.14rem;
     padding: 3.43rem 3.43rem 3.43rem 1.71rem;
     background-color: var.$bg-blue-2;
 
@@ -186,4 +186,174 @@
   .portrait {
     margin-top: 0;
   }
+
+  .tablet {
+    .quick-search-container {
+      padding-left: 2.57rem;
+      padding-right: 2.57rem;
+
+      .text-center {
+        margin-bottom: 1.71rem;
+
+        a {
+          font-weight: 700;
+        }
+      }
+    }
+
+    .noteworthy-container {
+      display: flex;
+      flex-direction: column;
+      padding: 2.57rem;
+      column-gap: 0.85rem;
+
+      .news-section {
+        width: 100%;
+        padding-top: 1.71rem;
+
+        h2 {
+          padding-bottom: 0.85rem;
+        }
+      }
+    }
+
+    .latest-research-container {
+      display: flex;
+      padding: 4rem 2.58rem 4rem 2.58rem;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+
+        .text-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.85rem;
+
+          h2 {
+            font-weight: 400;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      p-button {
+        margin: 0;
+      }
+    }
+
+    .hosting-container {
+      display: flex;
+      padding: 4rem 2.58rem 4rem 2.58rem;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+
+        .text-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.85rem;
+
+          h2 {
+            font-weight: 400;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      p-button {
+        margin: 0;
+        align-self: start;
+      }
+    }
+  }
+
+  .mobile {
+    margin: 0;
+
+    .quick-search-container {
+      padding: 1.71rem 1.14rem 1.71rem 1.14rem;
+
+      .text-center {
+        padding: 0 2.5rem 0 2.5rem;
+        margin-bottom: 1.71rem;
+      }
+    }
+
+    .noteworthy-container {
+      display: flex;
+      flex-direction: column;
+      padding: 1.14rem;
+      column-gap: 0.85rem;
+
+      .news-section {
+        width: 100%;
+        padding-bottom: 1.14rem;
+
+        .news-block {
+          padding: 1.14rem;
+        }
+
+        h2 {
+          padding-bottom: 0.85rem;
+        }
+      }
+    }
+
+    .latest-research-container {
+      display: flex;
+      padding: 4rem 1.14rem 4rem 1.14rem;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+
+        .text-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.85rem;
+
+          h2 {
+            font-weight: 400;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      p-button {
+        margin: 0;
+      }
+    }
+
+    .hosting-container {
+      display: flex;
+      padding: 4rem 1.14rem 4rem 1.14rem;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+
+        .text-container {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.85rem;
+
+          h2 {
+            font-weight: 400;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      p-button {
+        margin: 0;
+        align-self: start;
+      }
+    }
+  }
 }
diff --git a/src/app/features/home/home.component.ts b/src/app/features/home/home.component.ts
index 4e08e7538..53ffdc2cf 100644
--- a/src/app/features/home/home.component.ts
+++ b/src/app/features/home/home.component.ts
@@ -7,7 +7,7 @@ import { DatePipe, NgOptimizedImage } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { Button } from 'primeng/button';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
-import { IS_PORTRAIT, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { IS_TABLET, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Carousel } from 'primeng/carousel';
 import { noteworthy, mostPopular, projects } from '@osf/features/home/data';
@@ -30,10 +30,10 @@ import { noteworthy, mostPopular, projects } from '@osf/features/home/data';
   styleUrl: './home.component.scss',
 })
 export class HomeComponent {
-  #isPortrait$ = inject(IS_PORTRAIT);
-  #isXSmall$ = inject(IS_XSMALL);
-  isPortrait = toSignal(this.#isPortrait$);
-  isXSmall = toSignal(this.#isXSmall$);
+  #isTablet$ = inject(IS_TABLET);
+  #isMobile$ = inject(IS_XSMALL);
+  isTablet = toSignal(this.#isTablet$);
+  isMobile = toSignal(this.#isMobile$);
   projects: Project[] = projects;
   noteworthy = noteworthy;
   mostPopular = mostPopular;
diff --git a/src/app/shared/components/sub-header/sub-header.component.html b/src/app/shared/components/sub-header/sub-header.component.html
index 4f85ff86b..214a943f8 100644
--- a/src/app/shared/components/sub-header/sub-header.component.html
+++ b/src/app/shared/components/sub-header/sub-header.component.html
@@ -1,8 +1,10 @@
-<section class="sub-header">
-  <i [class]="'osf-icon-' + icon()"></i>
-  <h1>{{ title() }}</h1>
+<section class="sub-header" [class.mobile]="isMobile()">
+  <div class="title-icon">
+    <i [class]="'osf-icon-' + icon()"></i>
+    <h1>{{ title() }}</h1>
+  </div>
   @if (showButton()) {
-    <div class="btn-container">
+    <div class="btn-container" [class.btn-full-width]="isMobile()">
       <p-button
         [label]="buttonLabel()"
         (onClick)="buttonClick.emit()"
diff --git a/src/app/shared/components/sub-header/sub-header.component.scss b/src/app/shared/components/sub-header/sub-header.component.scss
index df1a06cde..7a7be5443 100644
--- a/src/app/shared/components/sub-header/sub-header.component.scss
+++ b/src/app/shared/components/sub-header/sub-header.component.scss
@@ -10,6 +10,12 @@
     padding: 2.5rem 1.7rem 3rem 1.7rem;
     width: 100%;
 
+    .title-icon {
+      display: flex;
+      align-items: center;
+      column-gap: 0.8rem;
+    }
+
     i {
       font-size: 2.6rem;
       color: var.$dark-blue-1;
@@ -19,4 +25,12 @@
       margin-left: auto;
     }
   }
+
+  .mobile {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    row-gap: 2.14rem;
+    padding: 2.5rem 1.1rem 2.5rem 1.1rem;
+  }
 }
diff --git a/src/app/shared/components/sub-header/sub-header.component.ts b/src/app/shared/components/sub-header/sub-header.component.ts
index a6d8f802d..b6a94139f 100644
--- a/src/app/shared/components/sub-header/sub-header.component.ts
+++ b/src/app/shared/components/sub-header/sub-header.component.ts
@@ -1,5 +1,7 @@
-import { Component, input, output } from '@angular/core';
+import { Component, inject, input, output } from '@angular/core';
 import { Button } from 'primeng/button';
+import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'osf-sub-header',
@@ -14,4 +16,6 @@ export class SubHeaderComponent {
   title = input<string>('');
   icon = input<string>('');
   buttonClick = output<void>();
+  #isMobile$ = inject(IS_XSMALL);
+  isMobile = toSignal(this.#isMobile$);
 }
diff --git a/src/app/shared/utils/breakpoints.tokens.ts b/src/app/shared/utils/breakpoints.tokens.ts
index b39c89d5c..75b7076ea 100644
--- a/src/app/shared/utils/breakpoints.tokens.ts
+++ b/src/app/shared/utils/breakpoints.tokens.ts
@@ -16,9 +16,7 @@ function createBreakpointToken(
   });
 }
 
-export const IS_XSMALL = createBreakpointToken(Breakpoints.XSmall);
-export const IS_SMALL = createBreakpointToken(Breakpoints.Small);
-export const IS_MEDIUM = createBreakpointToken(Breakpoints.Medium);
-export const IS_LARGE = createBreakpointToken(Breakpoints.Large);
-export const IS_XLARGE = createBreakpointToken(Breakpoints.XLarge);
 export const IS_PORTRAIT = createBreakpointToken('(orientation: portrait)');
+export const IS_WEB = createBreakpointToken(Breakpoints.Web);
+export const IS_TABLET = createBreakpointToken(Breakpoints.Tablet);
+export const IS_XSMALL = createBreakpointToken(Breakpoints.XSmall);
diff --git a/src/assets/styles/overrides/button.scss b/src/assets/styles/overrides/button.scss
index 99866fff9..28e5eca6b 100644
--- a/src/assets/styles/overrides/button.scss
+++ b/src/assets/styles/overrides/button.scss
@@ -142,6 +142,7 @@
 }
 
 .btn-full-width {
+  width: 100%;
   .p-button {
     width: 100%;
   }
diff --git a/src/assets/styles/overrides/table.scss b/src/assets/styles/overrides/table.scss
index 6ff5546e9..005f3f16a 100644
--- a/src/assets/styles/overrides/table.scss
+++ b/src/assets/styles/overrides/table.scss
@@ -9,14 +9,12 @@
       padding: 24px;
     }
     table {
-      width: 100%;
-      min-width: 50rem;
-
       th,
       td {
         color: var.$dark-blue-1;
         border: none;
         height: 60px;
+        max-width: calc((100vw - 27rem) / 3);
       }
 
       th {
@@ -33,7 +31,6 @@
       td {
         background-color: var.$bg-blue-3;
         border-bottom: 12px solid white;
-        max-width: 450px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -42,12 +39,8 @@
 
     .p-paginator {
       background: white;
-      padding: 12px 0 0 0;
-
-      button {
-        //height: 24px;
-        //width: 24px;
-      }
+      padding: 0.8rem 0 0 0;
+      row-gap: 0.8rem;
     }
 
     .p-paginator-page {
@@ -124,4 +117,58 @@
       }
     }
   }
+
+  @media (max-width: 1279.99px) {
+    p-table {
+      .p-datatable {
+        padding: 1.71rem 0.85rem 1.71rem 0.85rem;
+      }
+
+      table {
+        th,
+        td {
+          max-width: calc((100vw - 6.85rem - 2px) / 3);
+        }
+      }
+    }
+  }
+
+  @media (max-width: 599.99px) {
+    p-table {
+      .p-datatable {
+        padding: 0.4rem;
+      }
+
+      table {
+        thead {
+          display: none;
+        }
+
+        tr {
+          max-width: calc(100vw - 3.14rem - 2px);
+          display: flex;
+          flex-direction: column;
+          padding: 0.85rem;
+          background: var.$bg-blue-3;
+
+          td {
+            max-width: calc(100vw - 3.14rem - 2px);
+            height: 2rem;
+            line-height: 2rem;
+            padding: 0;
+            border: 0;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        tbody {
+          display: flex;
+          flex-direction: column;
+          row-gap: 0.42rem;
+        }
+      }
+    }
+  }
 }
diff --git a/src/assets/styles/styles.scss b/src/assets/styles/styles.scss
index 3eae3f327..86c2abb63 100644
--- a/src/assets/styles/styles.scss
+++ b/src/assets/styles/styles.scss
@@ -27,6 +27,8 @@
     font-family: var.$openSans;
     font-weight: 400;
     font-size: 14px;
+    max-height: 100vh;
+    max-width: 100vw;
   }
 
   h1 {