diff --git a/web/satellite/.eslintrc.js b/web/satellite/.eslintrc.js
index 477c19ae5..aa9d9ef3c 100644
--- a/web/satellite/.eslintrc.js
+++ b/web/satellite/.eslintrc.js
@@ -45,7 +45,7 @@ module.exports = {
                 },
                 {
                     'group': 'internal',
-                    'pattern': '@?(poc)/components/**',
+                    'pattern': '@?(poc)/{components,views}/**',
                     'position': 'after',
                 },
                 {
diff --git a/web/satellite/src/App.vue b/web/satellite/src/App.vue
index afaac2794..eabb9a597 100644
--- a/web/satellite/src/App.vue
+++ b/web/satellite/src/App.vue
@@ -17,8 +17,8 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useNotify } from '@/utils/hooks';
 import { useAppStore } from '@/store/modules/appStore';
 import { useConfigStore } from '@/store/modules/configStore';
-import ErrorPage from '@/views/ErrorPage.vue';
 
+import ErrorPage from '@/views/ErrorPage.vue';
 import BrandedLoader from '@/components/common/BrandedLoader.vue';
 import NotificationArea from '@/components/notifications/NotificationArea.vue';
 
diff --git a/web/satellite/src/components/common/VBanner.vue b/web/satellite/src/components/common/VBanner.vue
index 7fd77fa93..22f01566e 100644
--- a/web/satellite/src/components/common/VBanner.vue
+++ b/web/satellite/src/components/common/VBanner.vue
@@ -10,9 +10,25 @@
     >
         <InfoIcon class="notification-wrap__icon" />
         <div class="notification-wrap__text">
-            <slot name="text" />
+            <p>
+                <span class="notification-wrap__text__title">{{ title }}</span>
+                {{ message }}
+            </p>
+            <template v-if="linkText">
+                <a
+                    v-if="href"
+                    class="notification-wrap__text__link"
+                    :href="href"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    @click.stop="onLinkClick"
+                >
+                    {{ linkText }}
+                </a>
+                <p v-else class="notification-wrap__text__link" @click.stop="onLinkClick">{{ linkText }}</p>
+            </template>
         </div>
-        <CloseIcon class="notification-wrap__close" @click="closeClicked" />
+        <CloseIcon class="notification-wrap__close" @click.stop="closeClicked" />
     </div>
 </template>
 
@@ -24,13 +40,23 @@ import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
 
 const props = withDefaults(defineProps<{
     severity?: 'info' | 'warning' | 'critical';
+    title?: string;
+    message?: string;
+    linkText?: string;
+    href?: string;
     onClick?: () => void;
+    onLinkClick?: () => void;
     onClose?: () => void;
     dashboardRef: HTMLElement;
 }>(), {
     severity: 'info',
-    onClick: () => () => {},
-    onClose: () => () => {},
+    title: '',
+    message: '',
+    linkText: '',
+    href: '',
+    onClick: () => {},
+    onLinkClick: () => {},
+    onClose: () => {},
 });
 
 const isShown = ref<boolean>(true);
@@ -39,9 +65,7 @@ const resizeObserver = ref<ResizeObserver>();
 
 function closeClicked(): void {
     isShown.value = false;
-    if (props.onClose) {
-        props.onClose();
-    }
+    props.onClose();
 }
 
 function onBannerResize(): void {
@@ -104,7 +128,7 @@ watch(() => props.dashboardRef, () => {
         border: 1px solid var(--c-yellow-2);
 
         :deep(.icon-path) {
-            fill: var(--c-yellow-3) !important;
+            fill: var(--c-yellow-5) !important;
         }
     }
 
@@ -126,7 +150,22 @@ watch(() => props.dashboardRef, () => {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        column-gap: 10px;
+        gap: 10px;
+
+        @media screen and (width <= 500px) {
+            flex-direction: column;
+        }
+
+        &__title {
+            font-family: 'font_medium', sans-serif;
+        }
+
+        &__link {
+            color: black;
+            text-decoration: underline !important;
+            white-space: nowrap;
+            cursor: pointer;
+        }
     }
 
     &__close {
@@ -143,18 +182,4 @@ watch(() => props.dashboardRef, () => {
         }
     }
 }
-
-.bold {
-    font-family: 'font_bold', sans-serif;
-}
-
-.medium {
-    font-family: 'font_medium', sans-serif;
-}
-
-.link {
-    color: black;
-    text-decoration: underline !important;
-    cursor: pointer;
-}
 </style>
diff --git a/web/satellite/src/components/modals/LimitWarningModal.vue b/web/satellite/src/components/modals/LimitWarningModal.vue
index 5a1e2829d..c471b5db2 100644
--- a/web/satellite/src/components/modals/LimitWarningModal.vue
+++ b/web/satellite/src/components/modals/LimitWarningModal.vue
@@ -5,9 +5,29 @@
     <v-modal :on-close="onClose">
         <template #content>
             <div class="modal">
-                <Icon class="modal__icon" :class="{ warning: severity === 'warning', critical: severity === 'critical' }" />
-                <h1 class="modal__title">{{ title }}</h1>
-                <p class="modal__info">To get more {{ limitType }} limit, upgrade to a Pro Account. You will still get {{ bytesToBase10String(limits.storageUsed) }} free storage and egress per month, and only pay what you use beyond that.</p>
+                <div class="modal__icon" :class="isHundred ? 'critical' : 'warning'">
+                    <Icon />
+                </div>
+                <h1 class="modal__title">
+                    <template v-if="isHundred">
+                        Urgent! You've reached the {{ limitTypes }} limit{{ limitTypes.includes(' ') ? 's' : '' }} for your project.
+                    </template>
+                    <template v-else>
+                        80% {{ limitTypes.charAt(0).toUpperCase() + limitTypes.slice(1) }} used
+                    </template>
+                </h1>
+                <p class="modal__info">
+                    <template v-if="!isPaidTier">
+                        To get more {{ limitTypes }} limit{{ limitTypes.includes(' ') ? 's' : '' }}, upgrade to a Pro Account.
+                        You will still get {{ bytesToBase10String(limits.storageUsed) }} free storage and egress per month, and only pay what you use beyond that.
+                    </template>
+                    <template v-else-if="isCustom">
+                        You can increase your limits in the Project Settings page.
+                    </template>
+                    <template v-else>
+                        To get higher limits, please contact support.
+                    </template>
+                </p>
                 <div class="modal__buttons">
                     <VButton
                         label="Cancel"
@@ -19,12 +39,13 @@
                         :on-press="onClose"
                     />
                     <VButton
-                        label="Upgrade"
+                        :label="!isPaidTier ? 'Upgrade' : isCustom ? 'Edit Limits' : 'Request Higher Limit'"
                         height="40px"
                         width="48%"
                         font-size="13px"
-                        class="modal__buttons__button upgrade"
-                        :on-press="onUpgrade"
+                        class="modal__buttons__button primary"
+                        :on-press="onPrimaryClick"
+                        :link="(isPaidTier && !isCustom) ? requestURL : undefined"
                         :is-white-blue="true"
                     />
                 </div>
@@ -35,63 +56,124 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useRouter } from 'vue-router';
 
-import { ProjectLimits } from '@/types/projects';
+import { ProjectLimits, LimitThreshold, LimitThresholdsReached } from '@/types/projects';
 import { useProjectsStore } from '@/store/modules/projectsStore';
-import { bytesToBase10String } from '@/utils/strings';
+import { useUsersStore } from '@/store/modules/usersStore';
+import { useConfigStore } from '@/store/modules/configStore';
+import { bytesToBase10String, humanizeArray } from '@/utils/strings';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { RouteConfig } from '@/types/router';
 
 import VButton from '@/components/common/VButton.vue';
 import VModal from '@/components/common/VModal.vue';
 
-import Icon from '@/../static/images/project/chart.svg';
+import Icon from '@/../static/images/notifications/info.svg';
 
 const projectsStore = useProjectsStore();
+const usersStore = useUsersStore();
+const configStore = useConfigStore();
+const analyticsStore = useAnalyticsStore();
+
+const router = useRouter();
 
 const props = defineProps<{
-    severity: 'warning' | 'critical';
-    title: string;
-    limitType: string;
+    reachedThresholds: LimitThresholdsReached;
+    threshold: LimitThreshold,
     onUpgrade: () => void;
     onClose: () => void
 }>();
 
+/**
+ * Returns whether the threshold represents 100% usage.
+ */
+const isHundred = computed((): boolean => props.threshold.toLowerCase().includes('hundred'));
+
+/**
+ * Returns whether the usage limit threshold is for a custom limit.
+ */
+const isCustom = computed((): boolean => props.threshold.toLowerCase().includes('custom'));
+
+/**
+ * Returns a string representing the usage types that have reached this limit threshold.
+ */
+const limitTypes = computed((): string => {
+    return humanizeArray(props.reachedThresholds[props.threshold]).toLowerCase();
+});
+
 /**
  * Returns current limits from store.
  */
 const limits = computed((): ProjectLimits => {
     return projectsStore.state.currentLimits;
 });
+
+/**
+ * Returns whether user is in the paid tier.
+ */
+const isPaidTier = computed((): boolean => {
+    return usersStore.state.user.paidTier;
+});
+
+/**
+ * Returns the URL for the general request page from the store.
+ */
+const requestURL = computed((): string => {
+    return configStore.state.config.generalRequestURL;
+});
+
+/**
+ * Handles primary button click.
+ */
+function onPrimaryClick(): void {
+    if (!isPaidTier.value) {
+        props.onUpgrade();
+        return;
+    }
+    if (isCustom.value) {
+        analyticsStore.pageVisit(RouteConfig.EditProjectDetails.path);
+        router.push(RouteConfig.EditProjectDetails.path);
+        props.onClose();
+    }
+}
 </script>
 
 <style scoped lang="scss">
 .modal {
-    max-width: 500px;
+    width: 500px;
+    max-width: calc(100vw - 48px);
     padding: 32px;
     box-sizing: border-box;
     font-family: 'font_regular', sans-serif;
     text-align: left;
 
     &__icon {
+        width: 64px;
+        height: 64px;
         margin-bottom: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 24px;
+
+        :deep(svg) {
+            width: 46px;
+            height: 46px;
+        }
 
         &.critical {
+            background-color: var(--c-pink-1);
 
-            :deep(.icon-background) {
-                fill: var(--c-red-1);
-            }
-
-            :deep(.icon-chart) {
-                fill: var(--c-red-2);
+            :deep(path) {
+                fill: var(--c-pink-4);
             }
         }
 
         &.warning {
+            background-color: var(--c-yellow-1);
 
-            :deep(.icon-background) {
-                fill: var(--c-yellow-4);
-            }
-
-            :deep(.icon-chart) {
+            :deep(path) {
                 fill: var(--c-yellow-5);
             }
         }
@@ -124,7 +206,7 @@ const limits = computed((): ProjectLimits => {
             box-sizing: border-box;
             letter-spacing: -0.02em;
 
-            &.upgrade {
+            &.primary {
                 margin-left: 8px;
             }
         }
diff --git a/web/satellite/src/components/notifications/ProjectLimitBanner.vue b/web/satellite/src/components/notifications/ProjectLimitBanner.vue
index 06e0257b4..07d2e4278 100644
--- a/web/satellite/src/components/notifications/ProjectLimitBanner.vue
+++ b/web/satellite/src/components/notifications/ProjectLimitBanner.vue
@@ -4,21 +4,14 @@
 <template>
     <v-banner
         severity="warning"
+        :title="bannerTextData.title"
+        :message="bannerTextData.body"
+        :link-text="isPaidTier ? 'Request Limit Increase' : 'Upgrade Now'"
+        :href="isPaidTier ? projectLimitsIncreaseRequestURL : undefined"
         :dashboard-ref="dashboardRef"
         :on-close="onClose"
-    >
-        <template #text>
-            <p><span class="bold">{{ bannerTextData.title }}</span> <span class="medium"> {{ bannerTextData.body }}</span></p>
-            <p v-if="!isPaidTier" class="link" @click.stop.self="onUpgradeClicked">Upgrade Now</p>
-            <a
-                v-else
-                :href="projectLimitsIncreaseRequestURL"
-                class="link"
-                target="_blank"
-                rel="noopener noreferrer"
-            >Request Limit Increase</a>
-        </template>
-    </v-banner>
+        :on-link-click="onUpgradeClicked"
+    />
 </template>
 
 <script setup lang="ts">
diff --git a/web/satellite/src/components/notifications/UpdateSessionTimeoutBanner.vue b/web/satellite/src/components/notifications/UpdateSessionTimeoutBanner.vue
deleted file mode 100644
index e8b4654ac..000000000
--- a/web/satellite/src/components/notifications/UpdateSessionTimeoutBanner.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-// Copyright (C) 2023 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <v-banner
-        severity="info"
-        :dashboard-ref="dashboardRef"
-        :on-close="onCloseClick"
-    >
-        <template #text>
-            <p class="medium">
-                You can now update your session timeout from your
-                <span class="link" @click.stop.self="redirectToSettingsPage">account settings</span>
-            </p>
-        </template>
-    </v-banner>
-</template>
-
-<script setup lang="ts">
-import { useRoute, useRouter } from 'vue-router';
-
-import { RouteConfig } from '@/types/router';
-import { useAppStore } from '@/store/modules/appStore';
-
-import VBanner from '@/components/common/VBanner.vue';
-
-const appStore = useAppStore();
-const router = useRouter();
-const route = useRoute();
-
-const props = defineProps<{
-    dashboardRef: HTMLElement
-}>();
-
-/**
- * Redirects to settings page.
- */
-function redirectToSettingsPage(): void {
-    onCloseClick();
-
-    if (route.path.includes(RouteConfig.AllProjectsDashboard.path)) {
-        router.push(RouteConfig.AccountSettings.with(RouteConfig.Settings2).path);
-        return;
-    }
-
-    router.push(RouteConfig.Account.with(RouteConfig.Settings).path);
-}
-
-/**
- * Closes notification.
- */
-function onCloseClick(): void {
-    appStore.closeUpdateSessionTimeoutBanner();
-}
-</script>
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 909f7c460..69dc952b2 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -8,9 +8,9 @@ import { useAppStore } from '@/store/modules/appStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { RouteConfig } from '@/types/router';
+
 import AllDashboardArea from '@/views/all-dashboard/AllDashboardArea.vue';
 import MyProjects from '@/views/all-dashboard/components/MyProjects.vue';
-
 import AccessGrants from '@/components/accessGrants/AccessGrants.vue';
 import CreateAccessGrantFlow from '@/components/accessGrants/createFlow/CreateAccessGrantFlow.vue';
 import AccountArea from '@/components/account/AccountArea.vue';
@@ -48,7 +48,7 @@ import NewSettingsArea from '@/components/account/NewSettingsArea.vue';
 
 const ActivateAccount = () => import('@/views/ActivateAccount.vue');
 const AuthorizeArea = () => import('@/views/AuthorizeArea.vue');
-const DashboardArea = () => import('@/views/DashboardArea.vue');
+const DashboardArea = () => import('@/views/dashboard/DashboardArea.vue');
 const ForgotPassword = () => import('@/views/ForgotPassword.vue');
 const LoginArea = () => import('@/views/LoginArea.vue');
 const RegisterArea = () => import('@/views/registration/RegisterArea.vue');
diff --git a/web/satellite/src/store/modules/projectsStore.ts b/web/satellite/src/store/modules/projectsStore.ts
index 8decbea85..4d21d697c 100644
--- a/web/satellite/src/store/modules/projectsStore.ts
+++ b/web/satellite/src/store/modules/projectsStore.ts
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { computed, reactive, readonly } from 'vue';
 
 import {
     DataStamp,
@@ -20,14 +20,15 @@ import {
 import { ProjectsHttpApi } from '@/api/projects';
 import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
 
-const defaultSelectedProject = new Project('', '', '', '', '', true, 0);
-const defaultSelectedInvitation = new ProjectInvitation('', '', '', '', new Date());
+const DEFAULT_PROJECT = new Project('', '', '', '', '', true, 0);
+const DEFAULT_INVITATION = new ProjectInvitation('', '', '', '', new Date());
+export const DEFAULT_PROJECT_LIMITS = readonly(new ProjectLimits());
 
 export class ProjectsState {
     public projects: Project[] = [];
-    public selectedProject: Project = defaultSelectedProject;
-    public currentLimits: ProjectLimits = new ProjectLimits();
-    public totalLimits: ProjectLimits = new ProjectLimits();
+    public selectedProject: Project = DEFAULT_PROJECT;
+    public currentLimits: Readonly<ProjectLimits> = DEFAULT_PROJECT_LIMITS;
+    public totalLimits: Readonly<ProjectLimits> = DEFAULT_PROJECT_LIMITS;
     public cursor: ProjectsCursor = new ProjectsCursor();
     public page: ProjectsPage = new ProjectsPage();
     public allocatedBandwidthChartData: DataStamp[] = [];
@@ -36,7 +37,7 @@ export class ProjectsState {
     public chartDataSince: Date = new Date();
     public chartDataBefore: Date = new Date();
     public invitations: ProjectInvitation[] = [];
-    public selectedInvitation: ProjectInvitation = defaultSelectedInvitation;
+    public selectedInvitation: ProjectInvitation = DEFAULT_INVITATION;
 }
 
 export const useProjectsStore = defineStore('projects', () => {
@@ -73,7 +74,7 @@ export const useProjectsStore = defineStore('projects', () => {
             return;
         }
 
-        state.selectedProject = defaultSelectedProject;
+        state.selectedProject = DEFAULT_PROJECT;
     }
 
     async function getOwnedProjects(pageNumber: number, limit = DEFAULT_PAGE_LIMIT): Promise<void> {
@@ -175,7 +176,10 @@ export const useProjectsStore = defineStore('projects', () => {
         );
         await api.update(state.selectedProject.id, project, limit);
 
-        state.currentLimits.storageLimit = limitsToUpdate.storageLimit;
+        state.currentLimits = readonly({
+            ...state.currentLimits,
+            storageLimit: limitsToUpdate.storageLimit,
+        });
     }
 
     async function updateProjectBandwidthLimit(limitsToUpdate: ProjectLimits): Promise<void> {
@@ -192,7 +196,10 @@ export const useProjectsStore = defineStore('projects', () => {
         );
         await api.update(state.selectedProject.id, project, limit);
 
-        state.currentLimits.bandwidthLimit = limitsToUpdate.bandwidthLimit;
+        state.currentLimits = readonly({
+            ...state.currentLimits,
+            bandwidthLimit: limitsToUpdate.bandwidthLimit,
+        });
     }
 
     async function getProjectLimits(projectID: string): Promise<void> {
@@ -225,8 +232,8 @@ export const useProjectsStore = defineStore('projects', () => {
 
     function clear(): void {
         state.projects = [];
-        state.selectedProject = defaultSelectedProject;
-        state.currentLimits = new ProjectLimits();
+        state.selectedProject = DEFAULT_PROJECT;
+        state.currentLimits = DEFAULT_PROJECT_LIMITS;
         state.totalLimits = new ProjectLimits();
         state.storageChartData = [];
         state.allocatedBandwidthChartData = [];
@@ -234,7 +241,7 @@ export const useProjectsStore = defineStore('projects', () => {
         state.chartDataSince = new Date();
         state.chartDataBefore = new Date();
         state.invitations = [];
-        state.selectedInvitation = defaultSelectedInvitation;
+        state.selectedInvitation = DEFAULT_INVITATION;
     }
 
     function projectsCount(userID: string): number {
diff --git a/web/satellite/src/types/projects.ts b/web/satellite/src/types/projects.ts
index 36173447b..1f15fc85d 100644
--- a/web/satellite/src/types/projects.ts
+++ b/web/satellite/src/types/projects.ts
@@ -276,3 +276,18 @@ export enum FieldToChange {
     Name = 'Name',
     Description = 'Description',
 }
+
+export enum LimitThreshold {
+    Hundred = 'Hundred',
+    Eighty = 'Eighty',
+    CustomHundred = 'CustomHundred',
+    CustomEighty = 'CustomEighty',
+}
+
+export enum LimitType {
+    Storage = 'Storage',
+    Egress = 'Egress',
+    Segment = 'Segment',
+}
+
+export type LimitThresholdsReached = Record<LimitThreshold, LimitType[]>;
diff --git a/web/satellite/src/utils/strings.ts b/web/satellite/src/utils/strings.ts
index b781fe4ca..f4835edf7 100644
--- a/web/satellite/src/utils/strings.ts
+++ b/web/satellite/src/utils/strings.ts
@@ -95,4 +95,18 @@ export function centsToDollars(cents: number) {
  */
 export function bytesToBase10String(amountInBytes: number) {
     return Size.toBase10String(amountInBytes);
-}
\ No newline at end of file
+}
+
+/**
+ * Returns a human-friendly form of an array, inserting commas and "and"s where necessary.
+ * @param arr - the array
+ */
+export function humanizeArray(arr: string[]): string {
+    const len = arr.length;
+    switch (len) {
+    case 0: return '';
+    case 1: return arr[0];
+    case 2: return arr.join(' and ');
+    default: return `${arr.slice(0, len-1).join(', ')}, and ${arr[len-1]}`;
+    }
+}
diff --git a/web/satellite/src/views/all-dashboard/AllDashboardArea.vue b/web/satellite/src/views/all-dashboard/AllDashboardArea.vue
index b2ce60775..ec2074db7 100644
--- a/web/satellite/src/views/all-dashboard/AllDashboardArea.vue
+++ b/web/satellite/src/views/all-dashboard/AllDashboardArea.vue
@@ -20,22 +20,6 @@
 
                 <router-view />
 
-                <limit-warning-modal
-                    v-if="isHundredLimitModalShown && !isLoading"
-                    severity="critical"
-                    :on-close="() => setIsHundredLimitModalShown(false)"
-                    :title="limitState.hundredModalTitle"
-                    :limit-type="limitState.hundredModalLimitType"
-                    :on-upgrade="togglePMModal"
-                />
-                <limit-warning-modal
-                    v-if="isEightyLimitModalShown && !isLoading"
-                    severity="warning"
-                    :on-close="() => setIsEightyLimitModalShown(false)"
-                    :title="limitState.eightyModalTitle"
-                    :limit-type="limitState.eightyModalLimitType"
-                    :on-upgrade="togglePMModal"
-                />
                 <AllModals />
             </div>
         </SessionWrapper>
@@ -43,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { MODALS } from '@/utils/constants/appStatePopUps';
@@ -56,7 +40,6 @@ import { RouteConfig } from '@/types/router';
 import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
 import { FetchState } from '@/utils/constants/fetchStateEnum';
 import { CouponType } from '@/types/coupons';
-import Heading from '@/views/all-dashboard/components/Heading.vue';
 import { useABTestingStore } from '@/store/modules/abTestingStore';
 import { useUsersStore } from '@/store/modules/usersStore';
 import { useBillingStore } from '@/store/modules/billingStore';
@@ -66,11 +49,11 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
+import Heading from '@/views/all-dashboard/components/Heading.vue';
 import SessionWrapper from '@/components/utils/SessionWrapper.vue';
 import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
 import MFARecoveryCodeBar from '@/components/infoBars/MFARecoveryCodeBar.vue';
 import AllModals from '@/components/modals/AllModals.vue';
-import LimitWarningModal from '@/components/modals/LimitWarningModal.vue';
 
 import LoaderImage from '@/../static/images/common/loadIcon.svg';
 
@@ -90,94 +73,10 @@ const projectsStore = useProjectsStore();
 // Minimum number of recovery codes before the recovery code warning bar is shown.
 const recoveryCodeWarningThreshold = 4;
 
-const isHundredLimitModalShown = ref<boolean>(false);
-const isEightyLimitModalShown = ref<boolean>(false);
-
 const isMyProjectsPage = computed((): boolean => {
     return route.path === RouteConfig.AllProjectsDashboard.path;
 });
 
-/**
- * Indicates if account was frozen due to billing issues.
- */
-const isAccountFrozen = computed((): boolean => {
-    return usersStore.state.user.freezeStatus.frozen;
-});
-
-/**
- * Returns all needed information for limit modal when bandwidth or storage close to limits.
- */
- type LimitedState = {
-    eightyIsShown: boolean;
-    hundredIsShown: boolean;
-    eightyLabel: string;
-    eightyModalLimitType: string;
-    eightyModalTitle: string;
-    hundredLabel: string;
-    hundredModalTitle: string;
-    hundredModalLimitType: string;
-}
-
-const limitState = computed((): LimitedState => {
-    const result: LimitedState = {
-        eightyIsShown: false,
-        hundredIsShown: false,
-        eightyLabel: '',
-        eightyModalLimitType: '',
-        eightyModalTitle: '',
-        hundredLabel: '',
-        hundredModalTitle: '',
-        hundredModalLimitType: '',
-    };
-
-    if (usersStore.state.user.paidTier || isAccountFrozen.value) {
-        return result;
-    }
-
-    const currentLimits = projectsStore.state.currentLimits;
-
-    const limitTypeArr = [
-        { name: 'egress', usedPercent: Math.round(currentLimits.bandwidthUsed * 100 / currentLimits.bandwidthLimit) },
-        { name: 'storage', usedPercent: Math.round(currentLimits.storageUsed * 100 / currentLimits.storageLimit) },
-        { name: 'segment', usedPercent: Math.round(currentLimits.segmentUsed * 100 / currentLimits.segmentLimit) },
-    ];
-
-    const hundredPercent: string[] = [];
-    const eightyPercent: string[] = [];
-
-    limitTypeArr.forEach((limitType) => {
-        if (limitType.usedPercent >= 80) {
-            if (limitType.usedPercent >= 100) {
-                hundredPercent.push(limitType.name);
-            } else {
-                eightyPercent.push(limitType.name);
-            }
-        }
-    });
-
-    if (eightyPercent.length !== 0) {
-        result.eightyIsShown = true;
-
-        const eightyPercentString = eightyPercent.join(' and ');
-
-        result.eightyLabel = `You've used 80% of your ${eightyPercentString} limit. Avoid interrupting your usage by upgrading your account.`;
-        result.eightyModalTitle = `80% ${eightyPercentString} limit used`;
-        result.eightyModalLimitType = eightyPercentString;
-    }
-
-    if (hundredPercent.length !== 0) {
-        result.hundredIsShown = true;
-
-        const hundredPercentString = hundredPercent.join(' and ');
-
-        result.hundredLabel = `URGENT: You’ve reached the ${hundredPercentString} limit for your project. Upgrade to avoid any service interruptions.`;
-        result.hundredModalTitle = `URGENT: You’ve reached the ${hundredPercentString} limit for your project.`;
-        result.hundredModalLimitType = hundredPercentString;
-    }
-
-    return result;
-});
-
 /**
  * Indicates if satellite is in beta.
  */
@@ -200,14 +99,6 @@ const showMFARecoveryCodeBar = computed((): boolean => {
     return user.isMFAEnabled && user.mfaRecoveryCodeCount < recoveryCodeWarningThreshold;
 });
 
-function setIsEightyLimitModalShown(value: boolean): void {
-    isEightyLimitModalShown.value = value;
-}
-
-function setIsHundredLimitModalShown(value: boolean): void {
-    isHundredLimitModalShown.value = value;
-}
-
 /**
  * Generates new MFA recovery codes and toggles popup visibility.
  */
@@ -227,18 +118,6 @@ function toggleMFARecoveryModal(): void {
     appStore.updateActiveModal(MODALS.mfaRecovery);
 }
 
-/**
- * Opens add payment method modal.
- */
-function togglePMModal(): void {
-    isHundredLimitModalShown.value = false;
-    isEightyLimitModalShown.value = false;
-
-    if (!usersStore.state.user.paidTier) {
-        appStore.updateActiveModal(MODALS.upgradeAccount);
-    }
-}
-
 /**
  * Lifecycle hook after initial render.
  * Pre-fetches user`s and project information.
diff --git a/web/satellite/src/views/all-dashboard/components/AllProjectsDashboardBanners.vue b/web/satellite/src/views/all-dashboard/components/AllProjectsDashboardBanners.vue
index 3b5a7244c..05e42a78d 100644
--- a/web/satellite/src/views/all-dashboard/components/AllProjectsDashboardBanners.vue
+++ b/web/satellite/src/views/all-dashboard/components/AllProjectsDashboardBanners.vue
@@ -12,64 +12,35 @@
         <v-banner
             v-if="isAccountFrozen && parentRef"
             class="all-dashboard-banners__freeze"
+            title="Your account was frozen due to billing issues."
+            message="Please update your payment information."
             severity="critical"
+            link-text="To Billing Page"
             :dashboard-ref="parentRef"
-        >
-            <template #text>
-                <p class="medium">Your account was frozen due to billing issues. Please update your payment information.</p>
-                <p class="link" @click.stop.self="redirectToBillingPage">To Billing Page</p>
-            </template>
-        </v-banner>
+            @link-click="redirectToBillingPage"
+        />
 
         <v-banner
             v-if="isAccountWarned && parentRef"
             class="all-dashboard-banners__warning"
+            title="Your account will be frozen soon due to billing issues."
+            message="Please update your payment information."
+            link-text="To Billing Page"
             severity="warning"
             :dashboard-ref="parentRef"
-        >
-            <template #text>
-                <p class="medium">Your account will be frozen soon due to billing issues. Please update your payment information.</p>
-                <p class="link" @click.stop.self="redirectToBillingPage">To Billing Page</p>
-            </template>
-        </v-banner>
-
-        <v-banner
-            v-if="limitState.hundredIsShown && parentRef"
-            class="all-dashboard-banners__hundred-limit"
-            severity="critical"
-            :on-click="() => setIsHundredLimitModalShown(true)"
-            :dashboard-ref="parentRef"
-        >
-            <template #text>
-                <p class="medium">{{ limitState.hundredLabel }}</p>
-                <p class="link" @click.stop.self="togglePMModal">Upgrade now</p>
-            </template>
-        </v-banner>
-
-        <v-banner
-            v-if="limitState.eightyIsShown && parentRef"
-            class="all-dashboard-banners__eighty-limit"
-            severity="warning"
-            :on-click="() => setIsEightyLimitModalShown(true)"
-            :dashboard-ref="parentRef"
-        >
-            <template #text>
-                <p class="medium">{{ limitState.eightyLabel }}</p>
-                <p class="link" @click.stop.self="togglePMModal">Upgrade now</p>
-            </template>
-        </v-banner>
+            :on-link-click="redirectToBillingPage"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useUsersStore } from '@/store/modules/usersStore';
 import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useAppStore } from '@/store/modules/appStore';
-import { useProjectsStore } from '@/store/modules/projectsStore';
 import { RouteConfig } from '@/types/router';
 
 import VBanner from '@/components/common/VBanner.vue';
@@ -79,88 +50,11 @@ const router = useRouter();
 
 const usersStore = useUsersStore();
 const appStore = useAppStore();
-const projectsStore = useProjectsStore();
 
 const props = defineProps<{
   parentRef: HTMLElement;
 }>();
 
-const isHundredLimitModalShown = ref<boolean>(false);
-const isEightyLimitModalShown = ref<boolean>(false);
-
-/**
- * Returns all needed information for limit banner and modal when bandwidth or storage close to limits.
- */
-type LimitedState = {
-  eightyIsShown: boolean;
-  hundredIsShown: boolean;
-  eightyLabel: string;
-  eightyModalLimitType: string;
-  eightyModalTitle: string;
-  hundredLabel: string;
-  hundredModalTitle: string;
-  hundredModalLimitType: string;
-}
-const limitState = computed((): LimitedState => {
-    const result: LimitedState = {
-        eightyIsShown: false,
-        hundredIsShown: false,
-        eightyLabel: '',
-        eightyModalLimitType: '',
-        eightyModalTitle: '',
-        hundredLabel: '',
-        hundredModalTitle: '',
-        hundredModalLimitType: '',
-    };
-
-    if (usersStore.state.user.paidTier || isAccountFrozen.value) {
-        return result;
-    }
-
-    const currentLimits = projectsStore.state.currentLimits;
-
-    const limitTypeArr = [
-        { name: 'egress', usedPercent: Math.round(currentLimits.bandwidthUsed * 100 / currentLimits.bandwidthLimit) },
-        { name: 'storage', usedPercent: Math.round(currentLimits.storageUsed * 100 / currentLimits.storageLimit) },
-        { name: 'segment', usedPercent: Math.round(currentLimits.segmentUsed * 100 / currentLimits.segmentLimit) },
-    ];
-
-    const hundredPercent: string[] = [];
-    const eightyPercent: string[] = [];
-
-    limitTypeArr.forEach((limitType) => {
-        if (limitType.usedPercent >= 80) {
-            if (limitType.usedPercent >= 100) {
-                hundredPercent.push(limitType.name);
-            } else {
-                eightyPercent.push(limitType.name);
-            }
-        }
-    });
-
-    if (eightyPercent.length !== 0) {
-        result.eightyIsShown = true;
-
-        const eightyPercentString = eightyPercent.join(' and ');
-
-        result.eightyLabel = `You've used 80% of your ${eightyPercentString} limit. Avoid interrupting your usage by upgrading your account.`;
-        result.eightyModalTitle = `80% ${eightyPercentString} limit used`;
-        result.eightyModalLimitType = eightyPercentString;
-    }
-
-    if (hundredPercent.length !== 0) {
-        result.hundredIsShown = true;
-
-        const hundredPercentString = hundredPercent.join(' and ');
-
-        result.hundredLabel = `URGENT: You’ve reached the ${hundredPercentString} limit for your project. Upgrade to avoid any service interruptions.`;
-        result.hundredModalTitle = `URGENT: You’ve reached the ${hundredPercentString} limit for your project.`;
-        result.hundredModalLimitType = hundredPercentString;
-    }
-
-    return result;
-});
-
 /**
  * Indicates if account was frozen due to billing issues.
  */
@@ -193,20 +87,8 @@ const joinedWhileAgo = computed((): boolean => {
  * Opens add payment method modal.
  */
 function togglePMModal(): void {
-    isHundredLimitModalShown.value = false;
-    isEightyLimitModalShown.value = false;
-
-    if (!usersStore.state.user.paidTier) {
-        appStore.updateActiveModal(MODALS.upgradeAccount);
-    }
-}
-
-function setIsEightyLimitModalShown(value: boolean): void {
-    isEightyLimitModalShown.value = value;
-}
-
-function setIsHundredLimitModalShown(value: boolean): void {
-    isHundredLimitModalShown.value = value;
+    if (usersStore.state.user.paidTier) return;
+    appStore.updateActiveModal(MODALS.upgradeAccount);
 }
 
 /**
@@ -224,9 +106,7 @@ async function redirectToBillingPage(): Promise<void> {
     &__upgrade,
     &__project-limit,
     &__freeze,
-    &__warning,
-    &__hundred-limit,
-    &__eighty-limit {
+    &__warning {
         margin: 20px 0 0;
         box-shadow: 0 0 20px rgb(0 0 0 / 4%);
     }
diff --git a/web/satellite/src/views/all-dashboard/components/Heading.vue b/web/satellite/src/views/all-dashboard/components/Heading.vue
index 6df19bdc0..72f58ae27 100644
--- a/web/satellite/src/views/all-dashboard/components/Heading.vue
+++ b/web/satellite/src/views/all-dashboard/components/Heading.vue
@@ -117,7 +117,6 @@ import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { useNotify } from '@/utils/hooks';
-import MyAccountButton from '@/views/all-dashboard/components/MyAccountButton.vue';
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { RouteConfig } from '@/types/router';
 import { User } from '@/types/users';
@@ -135,6 +134,7 @@ import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
+import MyAccountButton from '@/views/all-dashboard/components/MyAccountButton.vue';
 import VButton from '@/components/common/VButton.vue';
 
 import LogoIcon from '@/../static/images/logo.svg';
diff --git a/web/satellite/src/views/all-dashboard/components/MyProjects.vue b/web/satellite/src/views/all-dashboard/components/MyProjects.vue
index fa3b4457d..4d974e836 100644
--- a/web/satellite/src/views/all-dashboard/components/MyProjects.vue
+++ b/web/satellite/src/views/all-dashboard/components/MyProjects.vue
@@ -91,18 +91,18 @@ import {
 } from '@/utils/constants/analyticsEventNames';
 import { User } from '@/types/users';
 import { MODALS } from '@/utils/constants/appStatePopUps';
-import EmptyProjectItem from '@/views/all-dashboard/components/EmptyProjectItem.vue';
-import ProjectItem from '@/views/all-dashboard/components/ProjectItem.vue';
-import ProjectInvitationItem from '@/views/all-dashboard/components/ProjectInvitationItem.vue';
 import { useUsersStore } from '@/store/modules/usersStore';
 import { useAppStore } from '@/store/modules/appStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 import { useConfigStore } from '@/store/modules/configStore';
-import ProjectsTable from '@/views/all-dashboard/components/ProjectsTable.vue';
-import AllProjectsDashboardBanners from '@/views/all-dashboard/components/AllProjectsDashboardBanners.vue';
 import { useResize } from '@/composables/resize';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 
+import EmptyProjectItem from '@/views/all-dashboard/components/EmptyProjectItem.vue';
+import ProjectItem from '@/views/all-dashboard/components/ProjectItem.vue';
+import ProjectInvitationItem from '@/views/all-dashboard/components/ProjectInvitationItem.vue';
+import ProjectsTable from '@/views/all-dashboard/components/ProjectsTable.vue';
+import AllProjectsDashboardBanners from '@/views/all-dashboard/components/AllProjectsDashboardBanners.vue';
 import VButton from '@/components/common/VButton.vue';
 import VChip from '@/components/common/VChip.vue';
 
diff --git a/web/satellite/src/views/all-dashboard/components/ProjectsTable.vue b/web/satellite/src/views/all-dashboard/components/ProjectsTable.vue
index a6cff672c..6b9cc4cd5 100644
--- a/web/satellite/src/views/all-dashboard/components/ProjectsTable.vue
+++ b/web/satellite/src/views/all-dashboard/components/ProjectsTable.vue
@@ -33,9 +33,9 @@ import { computed } from 'vue';
 
 import { Project, ProjectInvitation } from '@/types/projects';
 import { useProjectsStore } from '@/store/modules/projectsStore';
+
 import ProjectTableItem from '@/views/all-dashboard/components/ProjectTableItem.vue';
 import ProjectTableInvitationItem from '@/views/all-dashboard/components/ProjectTableInvitationItem.vue';
-
 import VTable from '@/components/common/VTable.vue';
 
 const projectsStore = useProjectsStore();
diff --git a/web/satellite/src/views/DashboardArea.vue b/web/satellite/src/views/dashboard/DashboardArea.vue
similarity index 74%
rename from web/satellite/src/views/DashboardArea.vue
rename to web/satellite/src/views/dashboard/DashboardArea.vue
index 0ef151ac4..0157d3bda 100644
--- a/web/satellite/src/views/DashboardArea.vue
+++ b/web/satellite/src/views/dashboard/DashboardArea.vue
@@ -27,48 +27,31 @@
 
                                     <v-banner
                                         v-if="isAccountFrozen && !isLoading && dashboardContent"
+                                        title="Your account was frozen due to billing issues."
+                                        message="Please update your payment information."
+                                        link-text="To Billing Page"
                                         severity="critical"
                                         :dashboard-ref="dashboardContent"
-                                    >
-                                        <template #text>
-                                            <p class="medium">Your account was frozen due to billing issues. Please update your payment information.</p>
-                                            <p class="link" @click.stop.self="redirectToBillingPage">To Billing Page</p>
-                                        </template>
-                                    </v-banner>
+                                        :on-link-click="redirectToBillingPage"
+                                    />
 
                                     <v-banner
                                         v-if="isAccountWarned && !isLoading && dashboardContent"
+                                        title="Your account will be frozen soon due to billing issues."
+                                        message="Please update your payment information."
+                                        link-text="To Billing Page"
                                         severity="warning"
                                         :dashboard-ref="dashboardContent"
-                                    >
-                                        <template #text>
-                                            <p class="medium">Your account will be frozen soon due to billing issues. Please update your payment information.</p>
-                                            <p class="link" @click.stop.self="redirectToBillingPage">To Billing Page</p>
-                                        </template>
-                                    </v-banner>
+                                        :on-link-click="redirectToBillingPage"
+                                    />
 
-                                    <v-banner
-                                        v-if="limitState.hundredIsShown && !isLoading && dashboardContent"
-                                        severity="critical"
-                                        :on-click="() => setIsHundredLimitModalShown(true)"
+                                    <limit-warning-banners
+                                        v-if="dashboardContent"
+                                        :reached-thresholds="reachedThresholds"
                                         :dashboard-ref="dashboardContent"
-                                    >
-                                        <template #text>
-                                            <p class="medium">{{ limitState.hundredLabel }}</p>
-                                            <p class="link" @click.stop.self="togglePMModal">Upgrade now</p>
-                                        </template>
-                                    </v-banner>
-                                    <v-banner
-                                        v-if="limitState.eightyIsShown && !isLoading && dashboardContent"
-                                        severity="warning"
-                                        :on-click="() => setIsEightyLimitModalShown(true)"
-                                        :dashboard-ref="dashboardContent"
-                                    >
-                                        <template #text>
-                                            <p class="medium">{{ limitState.eightyLabel }}</p>
-                                            <p class="link" @click.stop.self="togglePMModal">Upgrade now</p>
-                                        </template>
-                                    </v-banner>
+                                        :on-upgrade-click="togglePMModal"
+                                        :on-banner-click="thresh => limitModalThreshold = thresh"
+                                    />
                                 </div>
                                 <router-view class="dashboard__wrap__main-area__content-wrap__container__content" />
                                 <div class="dashboard__wrap__main-area__content-wrap__container__content banners-bottom">
@@ -89,19 +72,10 @@
                     <p>Remaining session time: <b class="dashboard__debug-timer__bold">{{ session.debugTimerText.value }}</b></p>
                 </div>
                 <limit-warning-modal
-                    v-if="isHundredLimitModalShown && !isLoading"
-                    severity="critical"
-                    :on-close="() => setIsHundredLimitModalShown(false)"
-                    :title="limitState.hundredModalTitle"
-                    :limit-type="limitState.hundredModalLimitType"
-                    :on-upgrade="togglePMModal"
-                />
-                <limit-warning-modal
-                    v-if="isEightyLimitModalShown && !isLoading"
-                    severity="warning"
-                    :on-close="() => setIsEightyLimitModalShown(false)"
-                    :title="limitState.eightyModalTitle"
-                    :limit-type="limitState.eightyModalLimitType"
+                    v-if="limitModalThreshold && !isLoading"
+                    :reached-thresholds="reachedThresholds"
+                    :threshold="limitModalThreshold"
+                    :on-close="() => limitModalThreshold = null"
                     :on-upgrade="togglePMModal"
                 />
                 <AllModals />
@@ -112,13 +86,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, toRaw } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
 import { RouteConfig } from '@/types/router';
 import { CouponType } from '@/types/coupons';
-import { Project } from '@/types/projects';
+import { LimitThreshold, LimitType, Project, LimitThresholdsReached } from '@/types/projects';
 import { FetchState } from '@/utils/constants/fetchStateEnum';
 import { LocalData } from '@/utils/localData';
 import { User } from '@/types/users';
@@ -130,9 +104,10 @@ import { useUsersStore } from '@/store/modules/usersStore';
 import { useBillingStore } from '@/store/modules/billingStore';
 import { useAppStore } from '@/store/modules/appStore';
 import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
-import { useProjectsStore } from '@/store/modules/projectsStore';
+import { DEFAULT_PROJECT_LIMITS, useProjectsStore } from '@/store/modules/projectsStore';
 import { useConfigStore } from '@/store/modules/configStore';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { Memory } from '@/utils/bytesSize';
 
 import UploadNotification from '@/components/notifications/UploadNotification.vue';
 import NavigationArea from '@/components/navigation/NavigationArea.vue';
@@ -147,6 +122,7 @@ import UpgradeNotification from '@/components/notifications/UpgradeNotification.
 import ProjectInvitationBanner from '@/components/notifications/ProjectInvitationBanner.vue';
 import BrandedLoader from '@/components/common/BrandedLoader.vue';
 import ObjectsUploadingModal from '@/components/modals/objectUpload/ObjectsUploadingModal.vue';
+import LimitWarningBanners from '@/views/dashboard/components/LimitWarningBanners.vue';
 
 import WarningIcon from '@/../static/images/notifications/circleWarning.svg';
 
@@ -166,8 +142,7 @@ const route = useRoute();
 // Minimum number of recovery codes before the recovery code warning bar is shown.
 const recoveryCodeWarningThreshold = 4;
 
-const isHundredLimitModalShown = ref<boolean>(false);
-const isEightyLimitModalShown = ref<boolean>(false);
+const limitModalThreshold = ref<LimitThreshold | null>(null);
 
 const dashboardContent = ref<HTMLElement | null>(null);
 
@@ -193,77 +168,60 @@ const isAccountWarned = computed((): boolean => {
 });
 
 /**
- * Returns all needed information for limit banner and modal when bandwidth or storage close to limits.
+ * Returns which limit thresholds have been reached by which usage limit type.
  */
-type LimitedState = {
-    eightyIsShown: boolean;
-    hundredIsShown: boolean;
-    eightyLabel: string;
-    eightyModalLimitType: string;
-    eightyModalTitle: string;
-    hundredLabel: string;
-    hundredModalTitle: string;
-    hundredModalLimitType: string;
-}
-
-const limitState = computed((): LimitedState => {
-    const result: LimitedState = {
-        eightyIsShown: false,
-        hundredIsShown: false,
-        eightyLabel: '',
-        eightyModalLimitType: '',
-        eightyModalTitle: '',
-        hundredLabel: '',
-        hundredModalTitle: '',
-        hundredModalLimitType: '',
+const reachedThresholds = computed((): LimitThresholdsReached => {
+    const reached: LimitThresholdsReached = {
+        Eighty: [],
+        Hundred: [],
+        CustomEighty: [],
+        CustomHundred: [],
     };
 
-    if (usersStore.state.user.paidTier || isAccountFrozen.value) {
-        return result;
-    }
-
     const currentLimits = projectsStore.state.currentLimits;
+    const config = configStore.state.config;
 
-    const limitTypeArr = [
-        { name: 'egress', usedPercent: Math.round(currentLimits.bandwidthUsed * 100 / currentLimits.bandwidthLimit) },
-        { name: 'storage', usedPercent: Math.round(currentLimits.storageUsed * 100 / currentLimits.storageLimit) },
-        { name: 'segment', usedPercent: Math.round(currentLimits.segmentUsed * 100 / currentLimits.segmentLimit) },
-    ];
+    if (isAccountFrozen.value || currentLimits === DEFAULT_PROJECT_LIMITS) return reached;
 
-    const hundredPercent = [] as string[];
-    const eightyPercent = [] as string[];
+    type LimitInfo = {
+        used: number;
+        currentLimit: number;
+        paidLimit?: number;
+    };
 
-    limitTypeArr.forEach((limitType) => {
-        if (limitType.usedPercent >= 80) {
-            if (limitType.usedPercent >= 100) {
-                hundredPercent.push(limitType.name);
-            } else {
-                eightyPercent.push(limitType.name);
+    const info: Record<LimitType, LimitInfo> = {
+        Storage: {
+            used: currentLimits.storageUsed,
+            currentLimit: currentLimits.storageLimit,
+            paidLimit: parseConfigLimit(config.defaultPaidStorageLimit),
+        },
+        Egress: {
+            used: currentLimits.bandwidthUsed,
+            currentLimit: currentLimits.bandwidthLimit,
+            paidLimit: parseConfigLimit(config.defaultPaidBandwidthLimit),
+        },
+        Segment: {
+            used: currentLimits.segmentUsed,
+            currentLimit: currentLimits.segmentLimit,
+        },
+    };
+
+    (Object.entries(info) as [LimitType, LimitInfo][]).forEach(([limitType, info]) => {
+        const maxLimit = (isPaidTier.value && info.paidLimit) ? Math.max(info.currentLimit, info.paidLimit) : info.currentLimit;
+        if (info.used >= maxLimit) {
+            reached.Hundred.push(limitType);
+        } else if (info.used >= 0.8 * maxLimit) {
+            reached.Eighty.push(limitType);
+        } else if (isPaidTier.value) {
+            if (info.used >= info.currentLimit) {
+                reached.CustomHundred.push(limitType);
+            } else if (info.used >= 0.8 * info.currentLimit) {
+                reached.CustomEighty.push(limitType);
             }
         }
     });
 
-    if (eightyPercent.length !== 0) {
-        result.eightyIsShown = true;
-
-        const eightyPercentString = eightyPercent.join(' and ');
-
-        result.eightyLabel = `You've used 80% of your ${eightyPercentString} limit. Avoid interrupting your usage by upgrading your account.`;
-        result.eightyModalTitle = `80% ${eightyPercentString} limit used`;
-        result.eightyModalLimitType = eightyPercentString;
-    }
-
-    if (hundredPercent.length !== 0) {
-        result.hundredIsShown = true;
-
-        const hundredPercentString = hundredPercent.join(' and ');
-
-        result.hundredLabel = `URGENT: You’ve reached the ${hundredPercentString} limit for your project. Upgrade to avoid any service interruptions.`;
-        result.hundredModalTitle = `URGENT: You’ve reached the ${hundredPercentString} limit for your project.`;
-        result.hundredModalLimitType = hundredPercentString;
-    }
-
-    return result;
+    return reached;
 });
 
 /**
@@ -275,7 +233,7 @@ const isNavigationHidden = computed((): boolean => {
 
 /* whether the paid tier banner should be shown */
 const isPaidTierBannerShown = computed((): boolean => {
-    return !usersStore.state.user.paidTier
+    return !isPaidTier.value
         && !isOnboardingTour.value
         && joinedWhileAgo.value
         && isDashboardPage.value;
@@ -346,6 +304,20 @@ const isDashboardPage = computed((): boolean => {
     return route.name === RouteConfig.ProjectDashboard.name;
 });
 
+/**
+ * Returns whether user is in the paid tier.
+ */
+const isPaidTier = computed((): boolean => {
+    return usersStore.state.user.paidTier;
+});
+
+/**
+ * Returns the URL for the general request page from the store.
+ */
+const requestURL = computed((): string => {
+    return configStore.state.config.generalRequestURL;
+});
+
 /**
  * Closes upload large files warning notification.
  */
@@ -380,14 +352,6 @@ function selectProject(fetchedProjects: Project[]): void {
     storeProject(fetchedProjects[0].id);
 }
 
-function setIsEightyLimitModalShown(value: boolean): void {
-    isEightyLimitModalShown.value = value;
-}
-
-function setIsHundredLimitModalShown(value: boolean): void {
-    isHundredLimitModalShown.value = value;
-}
-
 /**
  * Toggles MFA recovery modal visibility.
  */
@@ -411,12 +375,8 @@ async function generateNewMFARecoveryCodes(): Promise<void> {
  * Opens add payment method modal.
  */
 function togglePMModal(): void {
-    isHundredLimitModalShown.value = false;
-    isEightyLimitModalShown.value = false;
-
-    if (!usersStore.state.user.paidTier) {
-        appStore.updateActiveModal(MODALS.upgradeAccount);
-    }
+    if (isPaidTier.value) return;
+    appStore.updateActiveModal(MODALS.upgradeAccount);
 }
 
 /**
@@ -426,6 +386,14 @@ async function redirectToBillingPage(): Promise<void> {
     await router.push(RouteConfig.Account.with(RouteConfig.Billing.with(RouteConfig.BillingPaymentMethods)).path);
 }
 
+/**
+ * Parses limit value from config, returning it as a byte amount.
+ */
+function parseConfigLimit(limit: string): number {
+    const [value, unit] = limit.split(' ');
+    return parseFloat(value) * Memory[unit === 'B' ? 'Bytes' : unit];
+}
+
 /**
  * Lifecycle hook after initial render.
  * Pre-fetches user`s and project information.
diff --git a/web/satellite/src/views/dashboard/components/LimitWarningBanners.vue b/web/satellite/src/views/dashboard/components/LimitWarningBanners.vue
new file mode 100644
index 000000000..64f772e0c
--- /dev/null
+++ b/web/satellite/src/views/dashboard/components/LimitWarningBanners.vue
@@ -0,0 +1,127 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-banner
+        v-for="threshold in activeThresholds"
+        :key="threshold"
+        :title="bannerText[threshold].value.title"
+        :message="bannerText[threshold].value.message"
+        :severity="isHundred(threshold) ? 'critical' : 'warning'"
+        :link-text="!isPaidTier ? 'Upgrade Now' : isCustom(threshold) ? 'Edit Limits' : 'Contact Support'"
+        :href="(isPaidTier && !isCustom(threshold)) ? requestURL : undefined"
+        :dashboard-ref="dashboardRef"
+        :on-click="() => onBannerClick(threshold)"
+        :on-link-click="() => onLinkClick(threshold)"
+    />
+</template>
+
+<script setup lang="ts">
+import { computed, ComputedRef } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { LimitThreshold, LimitThresholdsReached } from '@/types/projects';
+import { humanizeArray } from '@/utils/strings';
+import { useUsersStore } from '@/store/modules/usersStore';
+import { RouteConfig } from '@/types/router';
+import { useConfigStore } from '@/store/modules/configStore';
+import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+
+import VBanner from '@/components/common/VBanner.vue';
+
+const usersStore = useUsersStore();
+const configStore = useConfigStore();
+const analyticsStore = useAnalyticsStore();
+
+const router = useRouter();
+
+const props = defineProps<{
+    reachedThresholds: LimitThresholdsReached;
+    onBannerClick: (threshold: LimitThreshold) => void;
+    onUpgradeClick: () => void;
+    dashboardRef: HTMLElement;
+}>();
+
+/**
+ * Returns the limit thresholds that have been reached by at least 1 usage type.
+ */
+const activeThresholds = computed<LimitThreshold[]>(() => {
+    return (Object.keys(LimitThreshold) as LimitThreshold[]).filter(t => props.reachedThresholds[t].length);
+});
+
+/**
+ * Returns whether user is in the paid tier.
+ */
+const isPaidTier = computed<boolean>(() => {
+    return usersStore.state.user.paidTier;
+});
+
+type BannerText = {
+    title: string;
+    message: string;
+};
+
+const bannerText = {} as Record<LimitThreshold, ComputedRef<BannerText>>;
+(Object.keys(LimitThreshold) as LimitThreshold[]).forEach(thresh => {
+    bannerText[thresh] = computed<BannerText>(() => {
+        let limitText = humanizeArray(props.reachedThresholds[thresh]).toLowerCase() + ' limit';
+        if (props.reachedThresholds[thresh].length > 1) limitText += 's';
+
+        const custom = isCustom(thresh);
+        const hundred = isHundred(thresh);
+
+        const title = hundred
+            ? `URGENT: You've reached the ${limitText} for your project.`
+            : `You've used 80% of your ${limitText}.`;
+
+        let message: string;
+        if (!isPaidTier.value) {
+            message = hundred
+                ? 'Upgrade to avoid any service interruptions.'
+                : 'Avoid interrupting your usage by upgrading your account.';
+        } else {
+            message = custom
+                ? 'You can increase your limits in the Project Settings page.'
+                : 'Contact support to avoid any service interruptions.';
+        }
+
+        return { title, message };
+    });
+});
+
+/**
+ * Returns the URL for the general request page from the store.
+ */
+const requestURL = computed<string>(() => {
+    return configStore.state.config.generalRequestURL;
+});
+
+/**
+ * Returns whether the threshold represents 100% usage.
+ */
+function isHundred(threshold: LimitThreshold): boolean {
+    return threshold.toLowerCase().includes('hundred');
+}
+
+/**
+ * Returns whether the threshold is for a custom limit.
+ */
+function isCustom(threshold: LimitThreshold): boolean {
+    return threshold.toLowerCase().includes('custom');
+}
+
+/**
+ * Handles click event for link appended to banner.
+ */
+function onLinkClick(threshold: LimitThreshold): void {
+    if (!isPaidTier.value) {
+        props.onUpgradeClick();
+        return;
+    }
+    if (isCustom(threshold)) {
+        analyticsStore.pageVisit(RouteConfig.EditProjectDetails.path);
+        router.push(RouteConfig.EditProjectDetails.path);
+        return;
+    }
+}
+</script>