diff --git a/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx b/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx
index 8dd18824e1..6668ed20fa 100644
--- a/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx
+++ b/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 import RailPanelHeader from '@/features/ide-react/components/rail/rail-panel-header'
 
@@ -16,7 +16,9 @@ function ChatFallbackError({ reconnect }: ChatFallbackErrorProps) {
       <div className="chat-wrapper">
         <aside className="chat" aria-label={t('chat')}>
           <div className="chat-error">
-            <OLNotification type="error" content={t('chat_error')} />
+            <div className="notification-list">
+              <Notification type="error" content={t('chat_error')} />
+            </div>
             {reconnect && (
               <p className="text-center">
                 <OLButton variant="secondary" onClick={reconnect}>
diff --git a/services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx b/services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx
index df7db10b71..fd79971044 100644
--- a/services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx
+++ b/services/web/frontend/js/features/clone-project-modal/components/clone-project-tag.tsx
@@ -1,14 +1,14 @@
 import { FC } from 'react'
 import { Tag as TagType } from '../../../../../app/src/Features/Tags/types'
 import { getTagColor } from '@/features/project-list/util/tag'
-import Tag from '@/shared/components/tag'
+import OLTag from '@/shared/components/ol/ol-tag'
 
 export const CloneProjectTag: FC<{
   tag: TagType
   removeTag: (tag: TagType) => void
 }> = ({ tag, removeTag }) => {
   return (
-    <Tag
+    <OLTag
       prepend={
         <i
           className="badge-tag-circle"
@@ -21,6 +21,6 @@ export const CloneProjectTag: FC<{
       className="ms-2 mb-2"
     >
       {tag.name}
-    </Tag>
+    </OLTag>
   )
 }
diff --git a/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx b/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx
index 05abff20c6..98feae3d77 100644
--- a/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx
+++ b/services/web/frontend/js/features/dictionary/components/dictionary-modal-content.tsx
@@ -10,7 +10,7 @@ import {
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 import OLIconButton from '@/shared/components/ol/ol-icon-button'
 import { learnedWords as initialLearnedWords } from '@/features/source-editor/extensions/spelling/learned-words'
@@ -55,13 +55,14 @@ export default function DictionaryModalContent({
       <OLModalHeader>
         <OLModalTitle>{t('edit_dictionary')}</OLModalTitle>
       </OLModalHeader>
-
       <OLModalBody>
         {isError ? (
-          <OLNotification
-            type="error"
-            content={t('generic_something_went_wrong')}
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              content={t('generic_something_went_wrong')}
+            />
+          </div>
         ) : null}
 
         {learnedWords.size > 0 ? (
@@ -93,7 +94,6 @@ export default function DictionaryModalContent({
           </p>
         )}
       </OLModalBody>
-
       <OLModalFooter>
         <OLButton variant="secondary" onClick={handleHide}>
           {t('close')}
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/danger-message.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/danger-message.tsx
index 25ec5aff58..eec7152b74 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-create/danger-message.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/danger-message.tsx
@@ -1,9 +1,13 @@
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 export default function DangerMessage({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return <OLNotification type="error" content={children} />
+  return (
+    <div className="notification-list">
+      <Notification type="error" content={children} />
+    </div>
+  )
 }
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.tsx
index cccc1329d9..9d9109bf92 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-create-name-input.tsx
@@ -9,7 +9,7 @@ import {
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
 import OLFormLabel from '@/shared/components/ol/ol-form-label'
 import OLFormControl from '@/shared/components/ol/ol-form-control'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 /**
  * A form component that renders a text input with label,
@@ -57,7 +57,6 @@ export default function FileTreeCreateNameInput({
   return (
     <OLFormGroup controlId="new-doc-name" className={classes.formGroup}>
       <OLFormLabel>{label || t('file_name')}</OLFormLabel>
-
       <OLFormControl
         type="text"
         placeholder={placeholder || t('file_name')}
@@ -67,15 +66,15 @@ export default function FileTreeCreateNameInput({
         ref={inputRef}
         disabled={inFlight}
       />
-
       {touchedName && !validName && (
-        <OLNotification
-          type="error"
-          className="row-spaced-small"
-          content={t('files_cannot_include_invalid_characters')}
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            className="row-spaced-small"
+            content={t('files_cannot_include_invalid_characters')}
+          />
+        </div>
       )}
-
       {error && <ErrorMessage error={error} />}
     </OLFormGroup>
   )
@@ -91,29 +90,35 @@ function ErrorMessage({ error }: { error: string | Record<string, any> }) {
   switch (error.constructor) {
     case DuplicateFilenameError:
       return (
-        <OLNotification
-          type="error"
-          className="row-spaced-small"
-          content={t('file_already_exists')}
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            className="row-spaced-small"
+            content={t('file_already_exists')}
+          />
+        </div>
       )
 
     case InvalidFilenameError:
       return (
-        <OLNotification
-          type="error"
-          className="row-spaced-small"
-          content={t('files_cannot_include_invalid_characters')}
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            className="row-spaced-small"
+            content={t('files_cannot_include_invalid_characters')}
+          />
+        </div>
       )
 
     case BlockedFilenameError:
       return (
-        <OLNotification
-          type="error"
-          className="row-spaced-small"
-          content={t('blocked_filename')}
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            className="row-spaced-small"
+            content={t('blocked_filename')}
+          />
+        </div>
       )
 
     default:
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-body.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-body.tsx
index 42cb64ce45..375ca9f566 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-body.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-create/file-tree-modal-create-file-body.tsx
@@ -11,7 +11,7 @@ import importOverleafModules from '../../../../../macros/import-overleaf-module.
 import { ElementType, lazy, Suspense } from 'react'
 import { FullSizeLoadingSpinner } from '@/shared/components/loading-spinner'
 import getMeta from '@/utils/meta'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 const createFileModeModules = importOverleafModules('createFileModes') as {
   import: { CreateFilePane: ElementType; CreateFileMode: ElementType }
@@ -34,12 +34,14 @@ export default function FileTreeModalCreateFileBody() {
   if (typeof fileCount !== 'number' && fileCount.status === 'error') {
     return (
       <div className="p-4">
-        <OLNotification
-          type="error"
-          content={t('project_has_too_many_files_limit', {
-            limit: fileCount.limit,
-          })}
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            content={t('project_has_too_many_files_limit', {
+              limit: fileCount.limit,
+            })}
+          />
+        </div>
       </div>
     )
   }
@@ -96,16 +98,18 @@ export default function FileTreeModalCreateFileBody() {
           >
             {typeof fileCount !== 'number' &&
               fileCount.status === 'warning' && (
-                <OLNotification
-                  type="warning"
-                  className={`mb-3 ${newFileCreateMode === 'upload' ? 'mt-0' : 'mt-3'}`}
-                  content={
-                    <>
-                      {t('project_approaching_file_limit')} ({fileCount.value}/
-                      {fileCount.limit})
-                    </>
-                  }
-                />
+                <div className="notification-list">
+                  <Notification
+                    type="warning"
+                    className={`mb-3 ${newFileCreateMode === 'upload' ? 'mt-0' : 'mt-3'}`}
+                    content={
+                      <>
+                        {t('project_approaching_file_limit')} ({fileCount.value}
+                        /{fileCount.limit})
+                      </>
+                    }
+                  />
+                </div>
               )}
             {newFileCreateMode === 'doc' && (
               <FileTreeCreateNameProvider initialName="name.tex">
diff --git a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx
index 29354c2146..4239db7660 100644
--- a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx
+++ b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-delete.tsx
@@ -9,7 +9,7 @@ import {
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { useFileTreeSelectable } from '../../contexts/file-tree-selectable'
 
 function FileTreeModalDelete() {
@@ -42,7 +42,6 @@ function FileTreeModalDelete() {
       <OLModalHeader>
         <OLModalTitle>{t('delete')}</OLModalTitle>
       </OLModalHeader>
-
       <OLModalBody>
         <p>{t('sure_you_want_to_delete')}</p>
         <ul>
@@ -51,13 +50,14 @@ function FileTreeModalDelete() {
           ))}
         </ul>
         {error && (
-          <OLNotification
-            type="error"
-            content={t('generic_something_went_wrong')}
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              content={t('generic_something_went_wrong')}
+            />
+          </div>
         )}
       </OLModalBody>
-
       <OLModalFooter>
         {inFlight ? (
           <OLButton
diff --git a/services/web/frontend/js/features/file-view/components/file-view-refresh-error.tsx b/services/web/frontend/js/features/file-view/components/file-view-refresh-error.tsx
index 767d7727a1..3ababed83f 100644
--- a/services/web/frontend/js/features/file-view/components/file-view-refresh-error.tsx
+++ b/services/web/frontend/js/features/file-view/components/file-view-refresh-error.tsx
@@ -2,7 +2,7 @@ import type { ElementType } from 'react'
 import { useTranslation } from 'react-i18next'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import { BinaryFile } from '../types/binary-file'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 type FileViewRefreshErrorProps = {
   file: BinaryFile
@@ -35,14 +35,16 @@ export default function FileViewRefreshError({
   } else {
     return (
       <div className="file-view-error">
-        <OLNotification
-          type="error"
-          content={
-            <span>
-              {t('access_denied')}: {refreshError}
-            </span>
-          }
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            content={
+              <span>
+                {t('access_denied')}: {refreshError}
+              </span>
+            }
+          />
+        </div>
       </div>
     )
   }
diff --git a/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx b/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx
index 85919655d0..ec65203ef8 100644
--- a/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx
+++ b/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx
@@ -5,7 +5,7 @@ import withErrorBoundary from '@/infrastructure/error-boundary'
 import useAbortController from '@/shared/hooks/use-abort-controller'
 import LoadingSpinner from '@/shared/components/loading-spinner'
 import Notification from '@/shared/components/notification'
-import IconButton from '@/shared/components/button/icon-button'
+import OLIconButton from '@/shared/components/ol/ol-icon-button'
 import {
   Card,
   Row,
@@ -14,8 +14,8 @@ import {
   FormLabel,
   FormControl,
 } from 'react-bootstrap'
-import FormText from '@/shared/components/form/form-text'
-import Button from '@/shared/components/button/button'
+import OLFormText from '@/shared/components/ol/ol-form-text'
+import OLButton from '@/shared/components/ol/ol-button'
 import PoNumber from '@/features/group-management/components/add-seats/po-number'
 import CostSummary from '@/features/group-management/components/add-seats/cost-summary'
 import RequestStatus from '@/features/group-management/components/request-status'
@@ -336,7 +336,7 @@ function AddSeats() {
       <Row>
         <Col xxl={5} xl={6} lg={7} md={9} className="mx-auto">
           <div className="group-heading" data-testid="group-heading">
-            <IconButton
+            <OLIconButton
               variant="ghost"
               href="/user/subscription"
               size="lg"
@@ -394,7 +394,7 @@ function AddSeats() {
                       isInvalid={Boolean(addSeatsInputError)}
                     />
                     {Boolean(addSeatsInputError) && (
-                      <FormText type="error">{addSeatsInputError}</FormText>
+                      <OLFormText type="error">{addSeatsInputError}</OLFormText>
                     )}
                   </FormGroup>
                   {isCollectionMethodManual && (
@@ -425,7 +425,7 @@ function AddSeats() {
                       {t('upgrade_my_plan')}
                     </a>
                   )}
-                  <Button
+                  <OLButton
                     variant="secondary"
                     href="/user/subscription"
                     onClick={() =>
@@ -435,8 +435,8 @@ function AddSeats() {
                     }
                   >
                     {t('cancel')}
-                  </Button>
-                  <Button
+                  </OLButton>
+                  <OLButton
                     variant="primary"
                     type="submit"
                     disabled={
@@ -445,9 +445,10 @@ function AddSeats() {
                       isSendingMailToSales
                     }
                     isLoading={isAddingSeats || isSendingMailToSales}
+                    loadingLabel={t('loading')}
                   >
                     {shouldContactSales ? t('send_request') : t('buy_licenses')}
-                  </Button>
+                  </OLButton>
                 </div>
               </form>
             </Card.Body>
diff --git a/services/web/frontend/js/features/group-management/components/add-seats/po-number.tsx b/services/web/frontend/js/features/group-management/components/add-seats/po-number.tsx
index 580f8dbb11..a15c28cdda 100644
--- a/services/web/frontend/js/features/group-management/components/add-seats/po-number.tsx
+++ b/services/web/frontend/js/features/group-management/components/add-seats/po-number.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FormControl, FormGroup, FormLabel } from 'react-bootstrap'
-import FormText from '@/shared/components/form/form-text'
+import OLFormText from '@/shared/components/ol/ol-form-text'
 import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 
 type PoNumberProps = {
@@ -34,7 +34,7 @@ function PoNumber({ error, validate }: PoNumberProps) {
             onChange={async e => await validate(e.target.value)}
             isInvalid={Boolean(error)}
           />
-          {Boolean(error) && <FormText type="error">{error}</FormText>}
+          {Boolean(error) && <OLFormText type="error">{error}</OLFormText>}
         </FormGroup>
       )}
     </>
diff --git a/services/web/frontend/js/features/group-management/components/back-button.tsx b/services/web/frontend/js/features/group-management/components/back-button.tsx
index f1d01cfb54..b7f10b21cd 100644
--- a/services/web/frontend/js/features/group-management/components/back-button.tsx
+++ b/services/web/frontend/js/features/group-management/components/back-button.tsx
@@ -1,4 +1,4 @@
-import IconButton from '@/shared/components/button/icon-button'
+import OLIconButton from '@/shared/components/ol/ol-icon-button'
 
 type BackButtonProps = {
   href: string
@@ -7,7 +7,7 @@ type BackButtonProps = {
 
 function BackButton({ href, accessibilityLabel }: BackButtonProps) {
   return (
-    <IconButton
+    <OLIconButton
       variant="ghost"
       href={href}
       size="lg"
diff --git a/services/web/frontend/js/features/group-management/components/card.tsx b/services/web/frontend/js/features/group-management/components/card.tsx
index 8add309a2f..bca3d5990a 100644
--- a/services/web/frontend/js/features/group-management/components/card.tsx
+++ b/services/web/frontend/js/features/group-management/components/card.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import getMeta from '@/utils/meta'
 import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
 import { Card as BSCard, CardBody, Col, Row } from 'react-bootstrap'
-import IconButton from '@/shared/components/button/icon-button'
+import OLIconButton from '@/shared/components/ol/ol-icon-button'
 
 type CardProps = {
   children: React.ReactNode
@@ -22,7 +22,7 @@ function Card({ children }: CardProps) {
       <Row>
         <Col xl={{ span: 4, offset: 4 }} md={{ span: 6, offset: 3 }}>
           <div className="group-heading" data-testid="group-heading">
-            <IconButton
+            <OLIconButton
               variant="ghost"
               href="/user/subscription"
               size="lg"
diff --git a/services/web/frontend/js/features/group-management/components/error-alert.tsx b/services/web/frontend/js/features/group-management/components/error-alert.tsx
index bd31938cca..3e205175f8 100644
--- a/services/web/frontend/js/features/group-management/components/error-alert.tsx
+++ b/services/web/frontend/js/features/group-management/components/error-alert.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 export type APIError = {
   message?: string
@@ -18,14 +18,18 @@ export default function ErrorAlert({ error }: ErrorAlertProps) {
 
   if (error.message) {
     return (
-      <OLNotification
-        type="error"
-        content={`${t('error')}: ${error.message}`}
-      />
+      <div className="notification-list">
+        <Notification
+          type="error"
+          content={`${t('error')}: ${error.message}`}
+        />
+      </div>
     )
   }
 
   return (
-    <OLNotification type="error" content={t('generic_something_went_wrong')} />
+    <div className="notification-list">
+      <Notification type="error" content={t('generic_something_went_wrong')} />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/group-management/components/group-members.tsx b/services/web/frontend/js/features/group-management/components/group-members.tsx
index f63933bfeb..7d12be2eed 100644
--- a/services/web/frontend/js/features/group-management/components/group-members.tsx
+++ b/services/web/frontend/js/features/group-management/components/group-members.tsx
@@ -13,7 +13,7 @@ import OLCard from '@/shared/components/ol/ol-card'
 import OLButton from '@/shared/components/ol/ol-button'
 import OLFormControl from '@/shared/components/ol/ol-form-control'
 import OLFormText from '@/shared/components/ol/ol-form-text'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLFormLabel from '@/shared/components/ol/ol-form-label'
 
 export default function GroupMembers() {
@@ -144,11 +144,13 @@ export default function GroupMembers() {
                 data-testid="add-more-members-form"
               >
                 {memberAdded && (
-                  <OLNotification
-                    content={t('members_added')}
-                    type="success"
-                    className="mt-2 mb-3"
-                  />
+                  <div className="notification-list">
+                    <Notification
+                      content={t('members_added')}
+                      type="success"
+                      className="mt-2 mb-3"
+                    />
+                  </div>
                 )}
                 <ErrorAlert error={inviteError} />
                 <form onSubmit={onAddMembersSubmit}>
diff --git a/services/web/frontend/js/features/group-management/components/group-users.tsx b/services/web/frontend/js/features/group-management/components/group-users.tsx
index e7c1be0220..ebe0b9266d 100644
--- a/services/web/frontend/js/features/group-management/components/group-users.tsx
+++ b/services/web/frontend/js/features/group-management/components/group-users.tsx
@@ -11,7 +11,7 @@ import OLCard from '@/shared/components/ol/ol-card'
 import OLCol from '@/shared/components/ol/ol-col'
 import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 import OLFormSelect from '@/shared/components/ol/ol-form-select'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLRow from '@/shared/components/ol/ol-row'
 import OLTable from '@/shared/components/ol/ol-table'
 import OLTag from '@/shared/components/ol/ol-tag'
@@ -160,31 +160,33 @@ export default function GroupUsers() {
         </OLRow>
 
         <OLRow className="license-info">
-          <OLNotification
-            type="info"
-            content={
-              allocatedLicenses === 1
-                ? t('you_have_1_license_and_your_plan_supports_up_to_y', {
-                    groupSize,
-                  })
-                : t('you_have_x_licenses_and_your_plan_supports_up_to_y', {
-                    addedUsersSize: allocatedLicenses,
-                    groupSize,
-                  })
-            }
-            action={
-              canUseAddSeatsFeature ? (
-                <a
-                  href="/user/subscription/group/add-users"
-                  className={classNames({
-                    'btn btn-premium': allocatedLicenses === groupSize,
-                  })}
-                >
-                  {t('buy_more_licenses')}
-                </a>
-              ) : undefined
-            }
-          />
+          <div className="notification-list">
+            <Notification
+              type="info"
+              content={
+                allocatedLicenses === 1
+                  ? t('you_have_1_license_and_your_plan_supports_up_to_y', {
+                      groupSize,
+                    })
+                  : t('you_have_x_licenses_and_your_plan_supports_up_to_y', {
+                      addedUsersSize: allocatedLicenses,
+                      groupSize,
+                    })
+              }
+              action={
+                canUseAddSeatsFeature ? (
+                  <a
+                    href="/user/subscription/group/add-users"
+                    className={classNames({
+                      'btn btn-premium': allocatedLicenses === groupSize,
+                    })}
+                  >
+                    {t('buy_more_licenses')}
+                  </a>
+                ) : undefined
+              }
+            />
+          </div>
         </OLRow>
 
         <OLRow>
diff --git a/services/web/frontend/js/features/group-management/components/manually-collected-subscription.tsx b/services/web/frontend/js/features/group-management/components/manually-collected-subscription.tsx
index 1bbf76c054..266d21317c 100644
--- a/services/web/frontend/js/features/group-management/components/manually-collected-subscription.tsx
+++ b/services/web/frontend/js/features/group-management/components/manually-collected-subscription.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import Card from '@/features/group-management/components/card'
 import getMeta from '@/utils/meta'
 
@@ -9,30 +9,32 @@ function ManuallyCollectedSubscription() {
 
   return (
     <Card>
-      <OLNotification
-        type="error"
-        title={t('account_billed_manually')}
-        content={
-          errorType === 'plan-upgrade' ? (
-            <Trans
-              i18nKey="it_looks_like_your_account_is_billed_manually_upgrading_subscription"
-              components={[
-                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                <a href="/contact" rel="noreferrer noopener" />,
-              ]}
-            />
-          ) : (
-            <Trans
-              i18nKey="it_looks_like_your_account_is_billed_manually_purchasing_additional_license_or_upgrading_subscription"
-              components={[
-                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-                <a href="/contact" rel="noreferrer noopener" />,
-              ]}
-            />
-          )
-        }
-        className="m-0"
-      />
+      <div className="notification-list">
+        <Notification
+          type="error"
+          title={t('account_billed_manually')}
+          content={
+            errorType === 'plan-upgrade' ? (
+              <Trans
+                i18nKey="it_looks_like_your_account_is_billed_manually_upgrading_subscription"
+                components={[
+                  // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                  <a href="/contact" rel="noreferrer noopener" />,
+                ]}
+              />
+            ) : (
+              <Trans
+                i18nKey="it_looks_like_your_account_is_billed_manually_purchasing_additional_license_or_upgrading_subscription"
+                components={[
+                  // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                  <a href="/contact" rel="noreferrer noopener" />,
+                ]}
+              />
+            )
+          }
+          className="m-0"
+        />
+      </div>
     </Card>
   )
 }
diff --git a/services/web/frontend/js/features/group-management/components/members-table/list-alert.tsx b/services/web/frontend/js/features/group-management/components/members-table/list-alert.tsx
index a05ab4dbea..e865c6823d 100644
--- a/services/web/frontend/js/features/group-management/components/members-table/list-alert.tsx
+++ b/services/web/frontend/js/features/group-management/components/members-table/list-alert.tsx
@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 import type { GroupUserAlertVariant } from '../../utils/types'
 import NotificationScrolledTo from '@/shared/components/notification-scrolled-to'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 type GroupUsersListAlertProps = {
   variant: GroupUserAlertVariant
@@ -85,25 +85,27 @@ function ResendManagedUserInviteSuccess({
   userEmail,
 }: GroupUsersListAlertComponentProps) {
   return (
-    <OLNotification
-      type="success"
-      content={
-        <Trans
-          i18nKey="managed_user_invite_has_been_sent_to_email"
-          values={{
-            email: userEmail,
-          }}
-          shouldUnescape
-          tOptions={{ interpolation: { escapeValue: true } }}
-          components={[
-            // eslint-disable-next-line react/jsx-key
-            <strong />,
-          ]}
-        />
-      }
-      isDismissible
-      onDismiss={onDismiss}
-    />
+    <div className="notification-list">
+      <Notification
+        type="success"
+        content={
+          <Trans
+            i18nKey="managed_user_invite_has_been_sent_to_email"
+            values={{
+              email: userEmail,
+            }}
+            shouldUnescape
+            tOptions={{ interpolation: { escapeValue: true } }}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <strong />,
+            ]}
+          />
+        }
+        isDismissible
+        onDismiss={onDismiss}
+      />
+    </div>
   )
 }
 
@@ -112,25 +114,27 @@ function ResendSSOLinkInviteSuccess({
   userEmail,
 }: GroupUsersListAlertComponentProps) {
   return (
-    <OLNotification
-      type="success"
-      content={
-        <Trans
-          i18nKey="sso_link_invite_has_been_sent_to_email"
-          values={{
-            email: userEmail,
-          }}
-          shouldUnescape
-          tOptions={{ interpolation: { escapeValue: true } }}
-          components={[
-            // eslint-disable-next-line react/jsx-key
-            <strong />,
-          ]}
-        />
-      }
-      isDismissible
-      onDismiss={onDismiss}
-    />
+    <div className="notification-list">
+      <Notification
+        type="success"
+        content={
+          <Trans
+            i18nKey="sso_link_invite_has_been_sent_to_email"
+            values={{
+              email: userEmail,
+            }}
+            shouldUnescape
+            tOptions={{ interpolation: { escapeValue: true } }}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <strong />,
+            ]}
+          />
+        }
+        isDismissible
+        onDismiss={onDismiss}
+      />
+    </div>
   )
 }
 
@@ -139,25 +143,27 @@ function FailedToResendManagedInvite({
   userEmail,
 }: GroupUsersListAlertComponentProps) {
   return (
-    <OLNotification
-      type="error"
-      content={
-        <Trans
-          i18nKey="failed_to_send_managed_user_invite_to_email"
-          values={{
-            email: userEmail,
-          }}
-          shouldUnescape
-          tOptions={{ interpolation: { escapeValue: true } }}
-          components={[
-            // eslint-disable-next-line react/jsx-key
-            <strong />,
-          ]}
-        />
-      }
-      isDismissible
-      onDismiss={onDismiss}
-    />
+    <div className="notification-list">
+      <Notification
+        type="error"
+        content={
+          <Trans
+            i18nKey="failed_to_send_managed_user_invite_to_email"
+            values={{
+              email: userEmail,
+            }}
+            shouldUnescape
+            tOptions={{ interpolation: { escapeValue: true } }}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <strong />,
+            ]}
+          />
+        }
+        isDismissible
+        onDismiss={onDismiss}
+      />
+    </div>
   )
 }
 function FailedToResendSSOLink({
@@ -165,25 +171,27 @@ function FailedToResendSSOLink({
   userEmail,
 }: GroupUsersListAlertComponentProps) {
   return (
-    <OLNotification
-      type="error"
-      content={
-        <Trans
-          i18nKey="failed_to_send_sso_link_invite_to_email"
-          values={{
-            email: userEmail,
-          }}
-          shouldUnescape
-          tOptions={{ interpolation: { escapeValue: true } }}
-          components={[
-            // eslint-disable-next-line react/jsx-key
-            <strong />,
-          ]}
-        />
-      }
-      isDismissible
-      onDismiss={onDismiss}
-    />
+    <div className="notification-list">
+      <Notification
+        type="error"
+        content={
+          <Trans
+            i18nKey="failed_to_send_sso_link_invite_to_email"
+            values={{
+              email: userEmail,
+            }}
+            shouldUnescape
+            tOptions={{ interpolation: { escapeValue: true } }}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <strong />,
+            ]}
+          />
+        }
+        isDismissible
+        onDismiss={onDismiss}
+      />
+    </div>
   )
 }
 
@@ -192,25 +200,27 @@ function ResendGroupInviteSuccess({
   userEmail,
 }: GroupUsersListAlertComponentProps) {
   return (
-    <OLNotification
-      type="success"
-      content={
-        <Trans
-          i18nKey="group_invite_has_been_sent_to_email"
-          values={{
-            email: userEmail,
-          }}
-          shouldUnescape
-          tOptions={{ interpolation: { escapeValue: true } }}
-          components={[
-            // eslint-disable-next-line react/jsx-key
-            <strong />,
-          ]}
-        />
-      }
-      isDismissible
-      onDismiss={onDismiss}
-    />
+    <div className="notification-list">
+      <Notification
+        type="success"
+        content={
+          <Trans
+            i18nKey="group_invite_has_been_sent_to_email"
+            values={{
+              email: userEmail,
+            }}
+            shouldUnescape
+            tOptions={{ interpolation: { escapeValue: true } }}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <strong />,
+            ]}
+          />
+        }
+        isDismissible
+        onDismiss={onDismiss}
+      />
+    </div>
   )
 }
 
@@ -219,25 +229,27 @@ function FailedToResendGroupInvite({
   userEmail,
 }: GroupUsersListAlertComponentProps) {
   return (
-    <OLNotification
-      type="error"
-      content={
-        <Trans
-          i18nKey="failed_to_send_group_invite_to_email"
-          values={{
-            email: userEmail,
-          }}
-          shouldUnescape
-          tOptions={{ interpolation: { escapeValue: true } }}
-          components={[
-            // eslint-disable-next-line react/jsx-key
-            <strong />,
-          ]}
-        />
-      }
-      isDismissible
-      onDismiss={onDismiss}
-    />
+    <div className="notification-list">
+      <Notification
+        type="error"
+        content={
+          <Trans
+            i18nKey="failed_to_send_group_invite_to_email"
+            values={{
+              email: userEmail,
+            }}
+            shouldUnescape
+            tOptions={{ interpolation: { escapeValue: true } }}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <strong />,
+            ]}
+          />
+        }
+        isDismissible
+        onDismiss={onDismiss}
+      />
+    </div>
   )
 }
 
@@ -246,24 +258,26 @@ function TooManyRequests({
   userEmail,
 }: GroupUsersListAlertComponentProps) {
   return (
-    <OLNotification
-      type="error"
-      content={
-        <Trans
-          i18nKey="an_email_has_already_been_sent_to"
-          values={{
-            email: userEmail,
-          }}
-          shouldUnescape
-          tOptions={{ interpolation: { escapeValue: true } }}
-          components={[
-            // eslint-disable-next-line react/jsx-key
-            <strong />,
-          ]}
-        />
-      }
-      isDismissible
-      onDismiss={onDismiss}
-    />
+    <div className="notification-list">
+      <Notification
+        type="error"
+        content={
+          <Trans
+            i18nKey="an_email_has_already_been_sent_to"
+            values={{
+              email: userEmail,
+            }}
+            shouldUnescape
+            tOptions={{ interpolation: { escapeValue: true } }}
+            components={[
+              // eslint-disable-next-line react/jsx-key
+              <strong />,
+            ]}
+          />
+        }
+        isDismissible
+        onDismiss={onDismiss}
+      />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx b/services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx
index c5288abc0c..df60057659 100644
--- a/services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx
+++ b/services/web/frontend/js/features/group-management/components/members-table/offboard-managed-user-modal.tsx
@@ -14,7 +14,7 @@ import {
 } from '@/shared/components/ol/ol-modal'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLFormControl from '@/shared/components/ol/ol-form-control'
 import OLFormLabel from '@/shared/components/ol/ol-form-label'
 import OLFormSelect from '@/shared/components/ol/ol-form-select'
@@ -137,7 +137,9 @@ export default function OffboardManagedUserModal({
             />
           </OLFormGroup>
           {error && (
-            <OLNotification type="error" content={error} className="mb-0" />
+            <div className="notification-list">
+              <Notification type="error" content={error} className="mb-0" />
+            </div>
           )}
         </OLModalBody>
         <OLModalFooter>
diff --git a/services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx b/services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx
index 17720ba2e6..c0d10adaa2 100644
--- a/services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx
+++ b/services/web/frontend/js/features/group-management/components/members-table/remove-managed-user-modal.tsx
@@ -14,7 +14,7 @@ import {
 } from '@/shared/components/ol/ol-modal'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLFormControl from '@/shared/components/ol/ol-form-control'
 import OLFormLabel from '@/shared/components/ol/ol-form-label'
 import { sendMB } from '@/infrastructure/event-tracking'
@@ -117,7 +117,9 @@ export default function RemoveManagedUserModal({
             />
           </OLFormGroup>
           {error && (
-            <OLNotification type="error" content={error} className="mb-0" />
+            <div className="notification-list">
+              <Notification type="error" content={error} className="mb-0" />
+            </div>
           )}
         </OLModalBody>
         <OLModalFooter>
diff --git a/services/web/frontend/js/features/group-management/components/missing-billing-information.tsx b/services/web/frontend/js/features/group-management/components/missing-billing-information.tsx
index 2f20f6970d..82b23f6e31 100644
--- a/services/web/frontend/js/features/group-management/components/missing-billing-information.tsx
+++ b/services/web/frontend/js/features/group-management/components/missing-billing-information.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import Card from '@/features/group-management/components/card'
 
 function MissingBillingInformation() {
@@ -7,25 +7,27 @@ function MissingBillingInformation() {
 
   return (
     <Card>
-      <OLNotification
-        type="error"
-        title={t('missing_payment_details')}
-        content={
-          <Trans
-            i18nKey="it_looks_like_your_payment_details_are_missing_please_update_your_billing_information"
-            components={[
-              // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-              <a
-                href="/user/subscription/payment/billing-details"
-                rel="noreferrer noopener"
-              />,
-              // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-              <a href="/contact" rel="noreferrer noopener" />,
-            ]}
-          />
-        }
-        className="m-0"
-      />
+      <div className="notification-list">
+        <Notification
+          type="error"
+          title={t('missing_payment_details')}
+          content={
+            <Trans
+              i18nKey="it_looks_like_your_payment_details_are_missing_please_update_your_billing_information"
+              components={[
+                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                <a
+                  href="/user/subscription/payment/billing-details"
+                  rel="noreferrer noopener"
+                />,
+                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                <a href="/contact" rel="noreferrer noopener" />,
+              ]}
+            />
+          }
+          className="m-0"
+        />
+      </div>
     </Card>
   )
 }
diff --git a/services/web/frontend/js/features/group-management/components/request-status.tsx b/services/web/frontend/js/features/group-management/components/request-status.tsx
index f86c99cf2b..62112b3df1 100644
--- a/services/web/frontend/js/features/group-management/components/request-status.tsx
+++ b/services/web/frontend/js/features/group-management/components/request-status.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next'
 import { Card, CardBody, Row, Col } from 'react-bootstrap'
-import Button from '@/shared/components/button/button'
+import OLButton from '@/shared/components/ol/ol-button'
 import MaterialIcon from '@/shared/components/material-icon'
 import getMeta from '@/utils/meta'
-import IconButton from '@/shared/components/button/icon-button'
+import OLIconButton from '@/shared/components/ol/ol-icon-button'
 import classnames from 'classnames'
 
 type RequestStatusProps = {
@@ -22,7 +22,7 @@ function RequestStatus({ icon, title, content, variant }: RequestStatusProps) {
       <Row>
         <Col xxl={5} xl={6} lg={7} md={9} className="mx-auto">
           <div className="group-heading" data-testid="group-heading">
-            <IconButton
+            <OLIconButton
               variant="ghost"
               href="/user/subscription"
               size="lg"
@@ -49,9 +49,9 @@ function RequestStatus({ icon, title, content, variant }: RequestStatusProps) {
                 )}
               </div>
               <div className="text-center">
-                <Button variant="secondary" href="/user/subscription">
+                <OLButton variant="secondary" href="/user/subscription">
                   {t('go_to_subscriptions')}
-                </Button>
+                </OLButton>
               </div>
             </CardBody>
           </Card>
diff --git a/services/web/frontend/js/features/group-management/components/subtotal-limit-exceeded.tsx b/services/web/frontend/js/features/group-management/components/subtotal-limit-exceeded.tsx
index b721869336..4f49e4df96 100644
--- a/services/web/frontend/js/features/group-management/components/subtotal-limit-exceeded.tsx
+++ b/services/web/frontend/js/features/group-management/components/subtotal-limit-exceeded.tsx
@@ -1,23 +1,25 @@
 import { Trans } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import Card from '@/features/group-management/components/card'
 
 function SubtotalLimitExceeded() {
   return (
     <Card>
-      <OLNotification
-        type="error"
-        content={
-          <Trans
-            i18nKey="sorry_there_was_an_issue_upgrading_your_subscription"
-            components={[
-              // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
-              <a href="/contact" rel="noreferrer noopener" />,
-            ]}
-          />
-        }
-        className="m-0"
-      />
+      <div className="notification-list">
+        <Notification
+          type="error"
+          content={
+            <Trans
+              i18nKey="sorry_there_was_an_issue_upgrading_your_subscription"
+              components={[
+                // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
+                <a href="/contact" rel="noreferrer noopener" />,
+              ]}
+            />
+          }
+          className="m-0"
+        />
+      </div>
     </Card>
   )
 }
diff --git a/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx b/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx
index 14a282b0ef..c0b935ca75 100644
--- a/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx
+++ b/services/web/frontend/js/features/group-management/components/upgrade-subscription/upgrade-subscription.tsx
@@ -2,8 +2,8 @@ import getMeta from '@/utils/meta'
 import { FetchError, postJSON } from '@/infrastructure/fetch-json'
 import { useTranslation, Trans } from 'react-i18next'
 import { Card, Row, Col } from 'react-bootstrap'
-import IconButton from '@/shared/components/button/icon-button'
-import Button from '@/shared/components/button/button'
+import OLIconButton from '@/shared/components/ol/ol-icon-button'
+import OLButton from '@/shared/components/ol/ol-button'
 import UpgradeSubscriptionPlanDetails from './upgrade-subscription-plan-details'
 import RequestStatus from '../request-status'
 import UpgradeSummary, {
@@ -90,7 +90,7 @@ function UpgradeSubscription() {
       <Row>
         <Col xl={{ span: 8, offset: 2 }}>
           <div className="group-heading" data-testid="group-heading">
-            <IconButton
+            <OLIconButton
               variant="ghost"
               href="/user/subscription"
               size="lg"
@@ -135,7 +135,7 @@ function UpgradeSubscription() {
                 >
                   {t('add_more_licenses_to_my_plan')}
                 </a>
-                <Button
+                <OLButton
                   href="/user/subscription"
                   variant="secondary"
                   disabled={isLoading}
@@ -146,14 +146,15 @@ function UpgradeSubscription() {
                   }}
                 >
                   {t('cancel')}
-                </Button>
-                <Button
+                </OLButton>
+                <OLButton
                   variant="primary"
                   onClick={onSubmit}
                   isLoading={isLoading}
+                  loadingLabel={t('loading')}
                 >
                   {t('upgrade')}
-                </Button>
+                </OLButton>
               </div>
             </Card.Body>
           </Card>
diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx
index 4b54e0d071..624b314b13 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
-import OLTagIcon from '@/shared/components/ol/ol-tag-icon'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
+import TagIcon from '@/shared/components/tag-icon'
 import AddLabelModal from '../../add-label-modal'
 
 type AddLabelProps = {
@@ -20,15 +20,15 @@ function AddLabel({ version, closeDropdown, ...props }: AddLabelProps) {
 
   return (
     <>
-      <OLDropdownMenuItem
+      <DropdownMenuItem
         onClick={handleClick}
-        leadingIcon={<OLTagIcon />}
+        leadingIcon={<TagIcon />}
         as="button"
         className="dropdown-item-material-icon-small"
         {...props}
       >
         {t('history_label_this_version')}
-      </OLDropdownMenuItem>
+      </DropdownMenuItem>
       <AddLabelModal
         show={showModal}
         setShow={setShowModal}
diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx
index e3b776a0bb..844f10bb72 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx
@@ -1,7 +1,7 @@
 import { useHistoryContext } from '../../../../context/history-context'
 import { UpdateRange } from '../../../../services/types/update'
 import { ReactNode } from 'react'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 
 type CompareProps = {
   comparisonRange: UpdateRange
@@ -32,7 +32,7 @@ function CompareDropDownItem({
   }
 
   return (
-    <OLDropdownMenuItem
+    <DropdownMenuItem
       {...props}
       leadingIcon={icon}
       as="button"
@@ -40,7 +40,7 @@ function CompareDropDownItem({
       className="dropdown-item-material-icon-small"
     >
       {text}
-    </OLDropdownMenuItem>
+    </DropdownMenuItem>
   )
 }
 
diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx
index 4899ea50bf..2e5c52f47e 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import MaterialIcon from '@/shared/components/material-icon'
 
 type DownloadProps = {
@@ -17,7 +17,7 @@ function Download({
   const { t } = useTranslation()
 
   return (
-    <OLDropdownMenuItem
+    <DropdownMenuItem
       href={`/project/${projectId}/version/${version}/zip`}
       download={`${projectId}_v${version}.zip`}
       rel="noreferrer"
@@ -26,7 +26,7 @@ function Download({
       {...props}
     >
       {t('history_download_this_version')}
-    </OLDropdownMenuItem>
+    </DropdownMenuItem>
   )
 }
 
diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx
index 2d59c46a55..823e7096a0 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import { useTranslation } from 'react-i18next'
 import { RestoreProjectModal } from '../../../diff-view/modals/restore-project-modal'
 import { useSplitTestContext } from '@/shared/context/split-test-context'
@@ -44,13 +44,13 @@ const RestoreProject = ({
 
   return (
     <>
-      <OLDropdownMenuItem
+      <DropdownMenuItem
         as="button"
         leadingIcon={<MaterialIcon type="undo" />}
         onClick={handleClick}
       >
         {t('restore_project_to_this_version')}
-      </OLDropdownMenuItem>
+      </DropdownMenuItem>
       <RestoreProjectModal
         setShow={setShowModal}
         show={showModal}
diff --git a/services/web/frontend/js/features/history/components/change-list/modal-error.tsx b/services/web/frontend/js/features/history/components/change-list/modal-error.tsx
index 1cf2cbf7b1..a76e081676 100644
--- a/services/web/frontend/js/features/history/components/change-list/modal-error.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/modal-error.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 // Using this workaround due to inconsistent and improper error responses from the server
 type ModalErrorProps = {
@@ -16,20 +16,24 @@ function ModalError({ error }: ModalErrorProps) {
 
   if (error.response?.status === 400 && error.data?.message) {
     return (
-      <OLNotification
-        type="error"
-        content={error.data.message}
-        className="row-spaced-small"
-      />
+      <div className="notification-list">
+        <Notification
+          type="error"
+          content={error.data.message}
+          className="row-spaced-small"
+        />
+      </div>
     )
   }
 
   return (
-    <OLNotification
-      type="error"
-      content={t('generic_something_went_wrong')}
-      className="row-spaced-small"
-    />
+    <div className="notification-list">
+      <Notification
+        type="error"
+        content={t('generic_something_went_wrong')}
+        className="row-spaced-small"
+      />
+    </div>
   )
 }
 
diff --git a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
index 6e04c7bfa9..3022ae8ce4 100644
--- a/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
+++ b/services/web/frontend/js/features/history/components/change-list/tag-tooltip.tsx
@@ -21,7 +21,7 @@ import { FormatTimeBasedOnYear } from '@/shared/components/format-time-based-on-
 import { useEditorContext } from '@/shared/context/editor-context'
 import OLTag from '@/shared/components/ol/ol-tag'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLTagIcon from '@/shared/components/ol/ol-tag-icon'
+import TagIcon from '@/shared/components/tag-icon'
 
 type TagProps = {
   label: LoadedLabel
@@ -79,7 +79,7 @@ const ChangeTag = forwardRef<HTMLElement, TagProps>(
       <>
         <OLTag
           ref={ref}
-          prepend={<OLTagIcon />}
+          prepend={<TagIcon />}
           closeBtnProps={
             showCloseButton
               ? { 'aria-label': t('delete'), onClick: showConfirmationModal }
@@ -169,7 +169,7 @@ function TagTooltip({ label, currentUserId, showTooltip }: LabelBadgesProps) {
               className="history-version-label-tooltip-row-comment"
               translate="no"
             >
-              <OLTagIcon />
+              <TagIcon />
               &nbsp;
               {label.comment}
             </b>
diff --git a/services/web/frontend/js/features/history/components/diff-view/main.tsx b/services/web/frontend/js/features/history/components/diff-view/main.tsx
index eef0424a10..732112eef5 100644
--- a/services/web/frontend/js/features/history/components/diff-view/main.tsx
+++ b/services/web/frontend/js/features/history/components/diff-view/main.tsx
@@ -3,7 +3,7 @@ import { Diff } from '../../services/types/doc'
 import DocumentDiffViewer from './document-diff-viewer'
 import LoadingSpinner from '../../../../shared/components/loading-spinner'
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 type MainProps = {
   diff: Nullable<Diff>
@@ -24,7 +24,9 @@ function Main({ diff, isLoading }: MainProps) {
   if (diff.binary) {
     return (
       <div className="history-content">
-        <OLNotification content={t('binary_history_error')} type="info" />
+        <div className="notification-list">
+          <Notification content={t('binary_history_error')} type="info" />
+        </div>
       </div>
     )
   }
diff --git a/services/web/frontend/js/features/ide-react/components/alerts/alerts.tsx b/services/web/frontend/js/features/ide-react/components/alerts/alerts.tsx
index 7e37a6f770..6f80e85cdb 100644
--- a/services/web/frontend/js/features/ide-react/components/alerts/alerts.tsx
+++ b/services/web/frontend/js/features/ide-react/components/alerts/alerts.tsx
@@ -5,7 +5,7 @@ import { debugging } from '@/utils/debugging'
 import { ElementType } from 'react'
 import { createPortal } from 'react-dom'
 import { useGlobalAlertsContainer } from '@/features/ide-react/context/global-alerts-context'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 
 const rollingBuildsUpdatedAlert: Array<{
@@ -39,10 +39,12 @@ export function Alerts() {
       {connectionState.forceDisconnected &&
       // hide "disconnected" banner when displaying out of sync modal
       connectionState.error !== 'out-of-sync' ? (
-        <OLNotification
-          type="error"
-          content={<strong>{t('disconnected')}</strong>}
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            content={<strong>{t('disconnected')}</strong>}
+          />
+        </div>
       ) : null}
 
       {connectionState.reconnectAt ? (
@@ -53,10 +55,12 @@ export function Alerts() {
       ) : null}
 
       {isStillReconnecting ? (
-        <OLNotification
-          type="warning"
-          content={<strong>{t('reconnecting')}…</strong>}
-        />
+        <div className="notification-list">
+          <Notification
+            type="warning"
+            content={<strong>{t('reconnecting')}…</strong>}
+          />
+        </div>
       ) : null}
 
       {connectionState.inactiveDisconnect ||
@@ -64,19 +68,23 @@ export function Alerts() {
         (connectionState.error === 'rate-limited' ||
           connectionState.error === 'unable-to-connect') &&
         !secondsUntilReconnect()) ? (
-        <OLNotification
-          type="warning"
-          content={
-            <strong>{t('editor_disconected_click_to_reconnect')}</strong>
-          }
-        />
+        <div className="notification-list">
+          <Notification
+            type="warning"
+            content={
+              <strong>{t('editor_disconected_click_to_reconnect')}</strong>
+            }
+          />
+        </div>
       ) : null}
 
       {debugging ? (
-        <OLNotification
-          type="warning"
-          content={<strong>Connected: {isConnected.toString()}</strong>}
-        />
+        <div className="notification-list">
+          <Notification
+            type="warning"
+            content={<strong>Connected: {isConnected.toString()}</strong>}
+          />
+        </div>
       ) : null}
     </>,
     globalAlertsContainer
diff --git a/services/web/frontend/js/features/ide-react/components/alerts/lost-connection-alert.tsx b/services/web/frontend/js/features/ide-react/components/alerts/lost-connection-alert.tsx
index 36271d9c3e..f9146d9aa0 100644
--- a/services/web/frontend/js/features/ide-react/components/alerts/lost-connection-alert.tsx
+++ b/services/web/frontend/js/features/ide-react/components/alerts/lost-connection-alert.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useState } from 'react'
 import { secondsUntil } from '@/features/ide-react/connection/utils'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 
 type LostConnectionAlertProps = {
@@ -26,24 +26,26 @@ export function LostConnectionAlert({
   }, [reconnectAt])
 
   return (
-    <OLNotification
-      type="warning"
-      content={
-        <>
-          <strong>{t('lost_connection')}</strong>{' '}
-          {t('reconnecting_in_x_secs', { seconds: secondsUntilReconnect })}.
-        </>
-      }
-      action={
-        <OLButton
-          id="try-reconnect-now-button"
-          onClick={() => tryReconnectNow()}
-          size="sm"
-          variant="secondary"
-        >
-          {t('try_now')}
-        </OLButton>
-      }
-    />
+    <div className="notification-list">
+      <Notification
+        type="warning"
+        content={
+          <>
+            <strong>{t('lost_connection')}</strong>{' '}
+            {t('reconnecting_in_x_secs', { seconds: secondsUntilReconnect })}.
+          </>
+        }
+        action={
+          <OLButton
+            id="try-reconnect-now-button"
+            onClick={() => tryReconnectNow()}
+            size="sm"
+            variant="secondary"
+          >
+            {t('try_now')}
+          </OLButton>
+        }
+      />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/download-project.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/download-project.tsx
index 16cb17774e..895646d793 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/download-project.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/download-project.tsx
@@ -1,5 +1,5 @@
 import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import { isSmallDevice, sendMB } from '@/infrastructure/event-tracking'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
@@ -31,14 +31,14 @@ export const DownloadProjectZip = () => {
   )
 
   return (
-    <OLDropdownMenuItem
+    <DropdownMenuItem
       href={`/project/${projectId}/download/zip`}
       target="_blank"
       rel="noreferrer"
       onClick={sendDownloadEvent}
     >
       {t('download_as_source_zip')}
-    </OLDropdownMenuItem>
+    </DropdownMenuItem>
   )
 }
 
@@ -75,7 +75,7 @@ export const DownloadProjectPDF = () => {
   )
 
   const button = (
-    <OLDropdownMenuItem
+    <DropdownMenuItem
       href={pdfDownloadUrl || pdfUrl}
       target="_blank"
       rel="noreferrer"
@@ -83,7 +83,7 @@ export const DownloadProjectPDF = () => {
       disabled={!pdfUrl}
     >
       {t('download_as_pdf')}
-    </OLDropdownMenuItem>
+    </DropdownMenuItem>
   )
 
   if (!pdfUrl) {
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/duplicate-project.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/duplicate-project.tsx
index 711420cc39..f54ab73dac 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/duplicate-project.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/duplicate-project.tsx
@@ -1,5 +1,5 @@
 import EditorCloneProjectModalWrapper from '@/features/clone-project-modal/components/editor-clone-project-modal-wrapper'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 import useOpenProject from '@/shared/hooks/use-open-project'
 import getMeta from '@/utils/meta'
@@ -24,9 +24,9 @@ export const DuplicateProject = () => {
 
   return (
     <>
-      <OLDropdownMenuItem onClick={handleShowModal}>
+      <DropdownMenuItem onClick={handleShowModal}>
         {t('make_a_copy')}
-      </OLDropdownMenuItem>
+      </DropdownMenuItem>
       <EditorCloneProjectModalWrapper
         show={showModal}
         handleHide={() => setShowModal(false)}
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/export-project-with-conversion-button.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/export-project-with-conversion-button.tsx
index 22651b74e9..6876c3d0cd 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/export-project-with-conversion-button.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/export-project-with-conversion-button.tsx
@@ -3,7 +3,7 @@ import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { FC } from 'react'
 import useConvertProject from '../../hooks/use-convert-project'
 import { useCommandProvider } from '../../hooks/use-command-provider'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import { useRootDoc } from '@/shared/hooks/use-root-doc'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 
@@ -52,8 +52,6 @@ export const ExportProjectWithConversionButton: FC<
   }
 
   return (
-    <OLDropdownMenuItem onClick={downloadConversion}>
-      {label}
-    </OLDropdownMenuItem>
+    <DropdownMenuItem onClick={downloadConversion}>{label}</DropdownMenuItem>
   )
 }
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/project-title.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/project-title.tsx
index cff5ea0a7d..cde1fdb97f 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/project-title.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/project-title.tsx
@@ -12,7 +12,7 @@ import { useEditorContext } from '@/shared/context/editor-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 import { DownloadProjectPDF, DownloadProjectZip } from './download-project'
 import { useCallback, useState } from 'react'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import EditableLabel from './editable-label'
 import { DuplicateProject } from './duplicate-project'
 import { ExportProjectWithConversionButton } from './export-project-with-conversion-button'
@@ -99,14 +99,14 @@ export const ToolbarProjectTitle = () => {
         />
         <DropdownDivider />
         <DuplicateProject />
-        <OLDropdownMenuItem
+        <DropdownMenuItem
           onClick={() => {
             setIsRenaming(true)
           }}
           disabled={!hasRenamePermissions}
         >
           {t('rename')}
-        </OLDropdownMenuItem>
+        </DropdownMenuItem>
       </DropdownMenu>
     </Dropdown>
   )
diff --git a/services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx b/services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx
index d2c9ad7f2a..98fcf95859 100644
--- a/services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx
+++ b/services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx
@@ -1,7 +1,7 @@
 import { DropdownDivider } from '@/shared/components/dropdown/dropdown-menu'
 import { useTranslation } from 'react-i18next'
 import { useEditorPropertiesContext } from '../../context/editor-properties-context'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import { sendMB } from '@/infrastructure/event-tracking'
 import { useIdeReactContext } from '../../context/ide-react-context'
 import { usePermissionsContext } from '../../context/permissions-context'
@@ -43,7 +43,7 @@ const ReviewModeOptions: React.FC = () => {
     <>
       <DropdownDivider />
       <NestedMenuBarDropdown id="editing-mode-group" title={t('editing_mode')}>
-        <OLDropdownMenuItem
+        <DropdownMenuItem
           as="button"
           disabled={!write || !user.id}
           onClick={() => {
@@ -61,8 +61,8 @@ const ReviewModeOptions: React.FC = () => {
           active={write && mode === 'edit'}
         >
           {t('editing')}
-        </OLDropdownMenuItem>
-        <OLDropdownMenuItem
+        </DropdownMenuItem>
+        <DropdownMenuItem
           as="button"
           disabled={permissionsLevel === 'readOnly' || !user.id}
           onClick={() => {
@@ -87,15 +87,15 @@ const ReviewModeOptions: React.FC = () => {
           active={trackedWrite && mode === 'review'}
         >
           {t('reviewing')}
-        </OLDropdownMenuItem>
+        </DropdownMenuItem>
         {showViewOption && (
-          <OLDropdownMenuItem
+          <DropdownMenuItem
             as="button"
             leadingIcon="visibility"
             active={mode === 'view'}
           >
             {t('viewing')}
-          </OLDropdownMenuItem>
+          </DropdownMenuItem>
         )}
       </NestedMenuBarDropdown>
     </>
diff --git a/services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-alert.tsx b/services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-alert.tsx
index 8c08618bd7..e8fdf1a794 100644
--- a/services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-alert.tsx
+++ b/services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-alert.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useMemo, useRef } from 'react'
 import { useFileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { sendMB } from '@/infrastructure/event-tracking'
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
 
@@ -50,12 +50,14 @@ const UnsavedDocAlert: FC<{ docId: string; seconds: number }> = ({
   }
 
   return (
-    <OLNotification
-      type="warning"
-      content={t('saving_notification_with_seconds', {
-        docname: doc.entity.name,
-        seconds,
-      })}
-    />
+    <div className="notification-list">
+      <Notification
+        type="warning"
+        content={t('saving_notification_with_seconds', {
+          docname: doc.entity.name,
+          seconds,
+        })}
+      />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-locked-alert.tsx b/services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-locked-alert.tsx
index ad67444cb1..88dab5f33e 100644
--- a/services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-locked-alert.tsx
+++ b/services/web/frontend/js/features/ide-react/components/unsaved-docs/unsaved-docs-locked-alert.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
 import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context'
 
@@ -18,14 +18,16 @@ export const UnsavedDocsLockedAlert: FC = () => {
   }, [reportError, openDocs])
 
   return (
-    <OLNotification
-      type="warning"
-      content={
-        <>
-          <strong>{t('connection_lost_with_unsaved_changes')}</strong>{' '}
-          {t('dont_reload_or_close_this_tab')} {t('your_changes_will_save')}
-        </>
-      }
-    />
+    <div className="notification-list">
+      <Notification
+        type="warning"
+        content={
+          <>
+            <strong>{t('connection_lost_with_unsaved_changes')}</strong>{' '}
+            {t('dont_reload_or_close_this_tab')} {t('your_changes_will_save')}
+          </>
+        }
+      />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/monthly-texlive/rolling-compile-image-changed-alert.tsx b/services/web/frontend/js/features/monthly-texlive/rolling-compile-image-changed-alert.tsx
index 6b5e6bbdd8..fd1d33a1a0 100644
--- a/services/web/frontend/js/features/monthly-texlive/rolling-compile-image-changed-alert.tsx
+++ b/services/web/frontend/js/features/monthly-texlive/rolling-compile-image-changed-alert.tsx
@@ -1,6 +1,6 @@
 import useTutorial from '@/shared/hooks/promotions/use-tutorial'
 import { useProjectContext } from '@/shared/context/project-context'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { useTranslation, Trans } from 'react-i18next'
 import { useCallback } from 'react'
 import { onRollingBuild } from '@/shared/utils/rolling-build'
@@ -38,14 +38,16 @@ const RollingCompileImageChangedAlert = () => {
   )
 
   return (
-    <OLNotification
-      className="mt-5"
-      isDismissible
-      onDismiss={onClose}
-      content={content}
-      type="info"
-      title={t('a_new_version_of_the_rolling_texlive_build_released')}
-    />
+    <div className="notification-list">
+      <Notification
+        className="mt-5"
+        isDismissible
+        onDismiss={onClose}
+        content={content}
+        type="info"
+        title={t('a_new_version_of_the_rolling_texlive_build_released')}
+      />
+    </div>
   )
 }
 
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
index 2baa3b4958..950dd73f5e 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
@@ -8,7 +8,7 @@ import {
   DropdownMenu,
   DropdownToggle,
 } from '@/shared/components/dropdown/dropdown-menu'
-import FormControl from '@/shared/components/form/form-control'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
 import { isMac } from '@/shared/utils/os'
 import { Shortcut } from '@/shared/components/shortcut'
 
@@ -87,7 +87,7 @@ function PdfZoomDropdown({
             className="pdfjs-custom-zoom-menu-item"
             eventKey="custom-zoom"
           >
-            <FormControl
+            <OLFormControl
               onFocus={event => event.target.select()}
               value={customZoomValue}
               type="text"
diff --git a/services/web/frontend/js/features/pdf-preview/components/rolling-build-selected-reminder.tsx b/services/web/frontend/js/features/pdf-preview/components/rolling-build-selected-reminder.tsx
index 086b8d6020..757fe9b12c 100644
--- a/services/web/frontend/js/features/pdf-preview/components/rolling-build-selected-reminder.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/rolling-build-selected-reminder.tsx
@@ -1,4 +1,4 @@
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { useTranslation, Trans } from 'react-i18next'
 import { useProjectContext } from '@/shared/context/project-context'
 import { onRollingBuild } from '@/shared/utils/rolling-build'
@@ -21,12 +21,14 @@ const RollingBuildSelectedReminder = () => {
   )
 
   return (
-    <OLNotification
-      title={t('this_project_is_compiled_using_untested_version')}
-      content={content}
-      type="info"
-      className="mb-0"
-    />
+    <div className="notification-list">
+      <Notification
+        title={t('this_project_is_compiled_using_untested_version')}
+        content={content}
+        type="info"
+        className="mb-0"
+      />
+    </div>
   )
 }
 
diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/import-document-modal.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/import-document-modal.tsx
index 2593628fa8..2a48d53727 100644
--- a/services/web/frontend/js/features/project-list/components/new-project-button/import-document-modal.tsx
+++ b/services/web/frontend/js/features/project-list/components/new-project-button/import-document-modal.tsx
@@ -12,7 +12,7 @@ import {
 import OLButton from '@/shared/components/ol/ol-button'
 import '@uppy/core/dist/style.css'
 import '@uppy/dashboard/dist/style.css'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 function ImportDocumentModal({
   type,
@@ -104,31 +104,33 @@ function ImportDocumentModal({
 const ErrorNotification = ({ message }: { message: string }) => {
   const { t } = useTranslation()
   return (
-    <OLNotification
-      type="error"
-      className="import-error-notification"
-      content={
-        <div>
-          <Trans
-            i18nKey="your_document_couldnt_be_imported_check_our_guidance_or_expand_conversion_error_details"
-            components={[
-              // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
-              <a
-                href="https://docs.overleaf.com/managing-projects-and-files/importing-and-exporting-files#common-issues-and-how-to-address-them"
-                target="_BLANK"
-                rel="noopener noreferrer"
-              />,
-            ]}
-          />
-          {message && (
-            <details style={{ maxHeight: '200px', overflow: 'auto' }}>
-              <summary>{t('conversion_error_details')}</summary>
-              <code style={{ wordBreak: 'break-all' }}>{message}</code>
-            </details>
-          )}
-        </div>
-      }
-    />
+    <div className="notification-list">
+      <Notification
+        type="error"
+        className="import-error-notification"
+        content={
+          <div>
+            <Trans
+              i18nKey="your_document_couldnt_be_imported_check_our_guidance_or_expand_conversion_error_details"
+              components={[
+                // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
+                <a
+                  href="https://docs.overleaf.com/managing-projects-and-files/importing-and-exporting-files#common-issues-and-how-to-address-them"
+                  target="_BLANK"
+                  rel="noopener noreferrer"
+                />,
+              ]}
+            />
+            {message && (
+              <details style={{ maxHeight: '200px', overflow: 'auto' }}>
+                <summary>{t('conversion_error_details')}</summary>
+                <code style={{ wordBreak: 'break-all' }}>{message}</code>
+              </details>
+            )}
+          </div>
+        }
+      />
+    </div>
   )
 }
 
diff --git a/services/web/frontend/js/features/project-list/components/notifications/groups/group-sso-setup-success.tsx b/services/web/frontend/js/features/project-list/components/notifications/groups/group-sso-setup-success.tsx
index 2ac39c5705..29f04f223a 100644
--- a/services/web/frontend/js/features/project-list/components/notifications/groups/group-sso-setup-success.tsx
+++ b/services/web/frontend/js/features/project-list/components/notifications/groups/group-sso-setup-success.tsx
@@ -1,5 +1,5 @@
 import { useTranslation, Trans } from 'react-i18next'
-import Notification from '../../../../../shared/components/notification'
+import Notification from '@/shared/components/notification'
 import getMeta from '../../../../../utils/meta'
 
 function GroupSsoSetupSuccess() {
diff --git a/services/web/frontend/js/features/project-list/components/notifications/notification.tsx b/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
index 46b53da673..2caca5655b 100644
--- a/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
+++ b/services/web/frontend/js/features/project-list/components/notifications/notification.tsx
@@ -1,8 +1,8 @@
 import classnames from 'classnames'
-import NewNotification from '@/shared/components/notification'
+import BaseNotification from '@/shared/components/notification'
 
 type NotificationProps = Pick<
-  React.ComponentProps<typeof NewNotification>,
+  React.ComponentProps<typeof BaseNotification>,
   | 'type'
   | 'action'
   | 'content'
@@ -15,7 +15,7 @@ type NotificationProps = Pick<
 
 function Notification({ className, ...props }: NotificationProps) {
   const notificationComponent = (
-    <NewNotification isDismissible={props.onDismiss != null} {...props} />
+    <BaseNotification isDismissible={props.onDismiss != null} {...props} />
   )
 
   return notificationComponent ? (
diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
index 260145e013..62e35dd46c 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
+++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
@@ -12,7 +12,7 @@ import ProjectListTitle from './title/project-list-title'
 import LoadMore from './load-more'
 import OLCol from '@/shared/components/ol/ol-col'
 import OLRow from '@/shared/components/ol/ol-row'
-import { TableContainer } from '@/shared/components/table'
+import { TableContainer } from '@/shared/components/ol/ol-table'
 import DashApiError from '@/features/project-list/components/dash-api-error'
 import getMeta from '@/utils/meta'
 import DefaultNavbar from '@/shared/components/navbar/default-navbar'
diff --git a/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx b/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
index c5dc17b577..9e4179c74b 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
@@ -4,7 +4,7 @@ import { Tag as TagType } from '../../../../../../../app/src/Features/Tags/types
 import { useProjectListContext } from '../../../context/project-list-context'
 import { removeProjectFromTag } from '../../../util/api'
 import { getTagColor } from '../../../util/tag'
-import Tag from '@/shared/components/tag'
+import OLTag from '@/shared/components/ol/ol-tag'
 
 type InlineTagsProps = {
   projectId: string
@@ -42,7 +42,7 @@ function InlineTag({ tag, projectId }: InlineTagProps) {
     [removeProjectFromTagInView]
   )
   return (
-    <Tag
+    <OLTag
       prepend={
         <i
           className="badge-tag-circle"
@@ -60,7 +60,7 @@ function InlineTag({ tag, projectId }: InlineTagProps) {
       translate="no"
     >
       {tag.name}
-    </Tag>
+    </OLTag>
   )
 }
 
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/copy-project-menu-item.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/copy-project-menu-item.tsx
index f93f7df9c3..0304109094 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/copy-project-menu-item.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/copy-project-menu-item.tsx
@@ -1,6 +1,6 @@
 import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import CloneProjectModal from '../../../../../clone-project-modal/components/clone-project-modal'
 import useIsMounted from '../../../../../../shared/hooks/use-is-mounted'
 import { useProjectListContext } from '../../../../context/project-list-context'
@@ -64,9 +64,9 @@ function CopyProjectMenuItem() {
 
   return (
     <>
-      <OLDropdownMenuItem onClick={handleOpenModal} as="button" tabIndex={-1}>
+      <DropdownMenuItem onClick={handleOpenModal} as="button" tabIndex={-1}>
         {t('make_a_copy')}
-      </OLDropdownMenuItem>
+      </DropdownMenuItem>
       <CloneProjectModal
         show={showModal}
         handleHide={handleCloseModal}
diff --git a/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/rename-project-menu-item.tsx b/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/rename-project-menu-item.tsx
index e289c53887..6ef29d4402 100644
--- a/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/rename-project-menu-item.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/rename-project-menu-item.tsx
@@ -2,7 +2,7 @@ import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useProjectListContext } from '../../../../context/project-list-context'
 import useIsMounted from '../../../../../../shared/hooks/use-is-mounted'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import RenameProjectModal from '../../../modals/rename-project-modal'
 
 function RenameProjectMenuItem() {
@@ -34,9 +34,9 @@ function RenameProjectMenuItem() {
 
   return (
     <>
-      <OLDropdownMenuItem onClick={handleOpenModal} as="button" tabIndex={-1}>
+      <DropdownMenuItem onClick={handleOpenModal} as="button" tabIndex={-1}>
         {t('rename')}
-      </OLDropdownMenuItem>
+      </DropdownMenuItem>
       <RenameProjectModal
         handleCloseModal={handleCloseModal}
         showModal={showModal}
diff --git a/services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx b/services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx
index 7f377edb09..b0e0593703 100644
--- a/services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx
+++ b/services/web/frontend/js/features/review-panel/components/review-mode-switcher.tsx
@@ -4,7 +4,7 @@ import {
   DropdownMenu,
   DropdownToggle,
 } from '@/shared/components/dropdown/dropdown-menu'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import MaterialIcon from '@/shared/components/material-icon'
 import classNames from 'classnames'
 import { useTrackChangesStateActionsContext } from '../context/track-changes-state-context'
@@ -35,7 +35,7 @@ function ReviewModeDropdownItems() {
 
   return (
     <>
-      <OLDropdownMenuItem
+      <DropdownMenuItem
         disabled={!write}
         onClick={() => {
           if (mode === 'edit') {
@@ -59,8 +59,8 @@ function ReviewModeDropdownItems() {
         active={write && mode === 'edit'}
       >
         {t('editing')}
-      </OLDropdownMenuItem>
-      <OLDropdownMenuItem
+      </DropdownMenuItem>
+      <DropdownMenuItem
         disabled={permissionsLevel === 'readOnly'}
         onClick={() => {
           if (mode === 'review') {
@@ -95,15 +95,15 @@ function ReviewModeDropdownItems() {
         active={trackedWrite && mode === 'review'}
       >
         {t('reviewing')}
-      </OLDropdownMenuItem>
+      </DropdownMenuItem>
       {showViewOption && (
-        <OLDropdownMenuItem
+        <DropdownMenuItem
           description={t('can_view_content')}
           leadingIcon="visibility"
           active={mode === 'view'}
         >
           {t('viewing')}
-        </OLDropdownMenuItem>
+        </DropdownMenuItem>
       )}
     </>
   )
diff --git a/services/web/frontend/js/features/review-panel/components/review-panel-change-action.tsx b/services/web/frontend/js/features/review-panel/components/review-panel-change-action.tsx
index e8272d0abb..7479765126 100644
--- a/services/web/frontend/js/features/review-panel/components/review-panel-change-action.tsx
+++ b/services/web/frontend/js/features/review-panel/components/review-panel-change-action.tsx
@@ -1,10 +1,9 @@
-import Tooltip from '@/shared/components/tooltip'
-import { ComponentProps, memo, MouseEventHandler } from 'react'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
+import { ComponentProps, memo, MouseEventHandler } from 'react'
 import { PreventSelectingEntry } from '@/features/review-panel/components/review-panel-prevent-selecting'
 import MaterialIcon from '@/shared/components/material-icon'
 
-const changeActionTooltipProps: Partial<ComponentProps<typeof Tooltip>> = {
+const changeActionTooltipProps: Partial<ComponentProps<typeof OLTooltip>> = {
   overlayProps: { placement: 'bottom' },
   tooltipProps: { className: 'review-panel-tooltip' },
 }
diff --git a/services/web/frontend/js/features/settings/components/account-info-section.tsx b/services/web/frontend/js/features/settings/components/account-info-section.tsx
index 233b88923e..7ee25b4a4d 100644
--- a/services/web/frontend/js/features/settings/components/account-info-section.tsx
+++ b/services/web/frontend/js/features/settings/components/account-info-section.tsx
@@ -8,7 +8,7 @@ import getMeta from '../../../utils/meta'
 import useAsync from '../../../shared/hooks/use-async'
 import { useUserContext } from '../../../shared/context/user-context'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
 import OLFormLabel from '@/shared/components/ol/ol-form-label'
 import OLFormControl from '@/shared/components/ol/ol-form-control'
@@ -105,18 +105,22 @@ function AccountInfoSection() {
         />
         {isSuccess ? (
           <OLFormGroup>
-            <OLNotification
-              type="success"
-              content={t('thanks_settings_updated')}
-            />
+            <div className="notification-list">
+              <Notification
+                type="success"
+                content={t('thanks_settings_updated')}
+              />
+            </div>
           </OLFormGroup>
         ) : null}
         {isError ? (
           <OLFormGroup>
-            <OLNotification
-              type="error"
-              content={getUserFacingMessage(error) ?? ''}
-            />
+            <div className="notification-list">
+              <Notification
+                type="error"
+                content={getUserFacingMessage(error) ?? ''}
+              />
+            </div>
           </OLFormGroup>
         ) : null}
         {canUpdateEmail || canUpdateNames ? (
diff --git a/services/web/frontend/js/features/settings/components/email-preferences/email-preferences-form.tsx b/services/web/frontend/js/features/settings/components/email-preferences/email-preferences-form.tsx
index 039a354913..33b115e8a9 100644
--- a/services/web/frontend/js/features/settings/components/email-preferences/email-preferences-form.tsx
+++ b/services/web/frontend/js/features/settings/components/email-preferences/email-preferences-form.tsx
@@ -3,7 +3,7 @@ import { useTranslation, Trans } from 'react-i18next'
 import { postJSON, getUserFacingMessage } from '@/infrastructure/fetch-json'
 import useAsync from '@/shared/hooks/use-async'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import getMeta from '@/utils/meta'
 
 function EmailPreferencesForm() {
@@ -25,20 +25,23 @@ function EmailPreferencesForm() {
   return (
     <>
       {isError && (
-        <OLNotification
-          type="error"
-          content={getUserFacingMessage(error)}
-          className="mb-3"
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            content={getUserFacingMessage(error)}
+            className="mb-3"
+          />
+        </div>
       )}
       {isSuccess && (
-        <OLNotification
-          type="success"
-          content={t('thanks_settings_updated')}
-          className="mb-3"
-        />
+        <div className="notification-list">
+          <Notification
+            type="success"
+            content={t('thanks_settings_updated')}
+            className="mb-3"
+          />
+        </div>
       )}
-
       <p>
         {subscribed ? (
           <Trans
@@ -52,7 +55,6 @@ function EmailPreferencesForm() {
           />
         )}
       </p>
-
       <p className="text-center">
         {subscribed ? (
           <OLButton
@@ -76,7 +78,6 @@ function EmailPreferencesForm() {
           </OLButton>
         )}
       </p>
-
       {subscribed && <p>{t('newsletter_info_note')}</p>}
     </>
   )
diff --git a/services/web/frontend/js/features/settings/components/emails-section.tsx b/services/web/frontend/js/features/settings/components/emails-section.tsx
index e80230c62f..ec2d660c2f 100644
--- a/services/web/frontend/js/features/settings/components/emails-section.tsx
+++ b/services/web/frontend/js/features/settings/components/emails-section.tsx
@@ -8,7 +8,7 @@ import {
 import EmailsHeader from './emails/header'
 import EmailsRow from './emails/row'
 import AddEmail from './emails/add-email'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import LoadingSpinner from '@/shared/components/loading-spinner'
 
 function EmailsSectionContent() {
@@ -78,10 +78,12 @@ function EmailsSectionContent() {
         )}
         {isInitializingSuccess && !hideAddSecondaryEmail && <AddEmail />}
         {isInitializingError && (
-          <OLNotification
-            type="error"
-            content={t('error_performing_request')}
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              content={t('error_performing_request')}
+            />
+          </div>
         )}
       </>
     </>
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
index 1ef3a9be6e..0091f576de 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
@@ -1,7 +1,7 @@
 import { UseAsyncReturnType } from '../../../../../shared/hooks/use-async'
 import { getUserFacingMessage } from '../../../../../infrastructure/fetch-json'
 import OLRow from '@/shared/components/ol/ol-row'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 type LayoutProps = {
   children: React.ReactNode
@@ -14,10 +14,12 @@ function Layout({ isError, error, children }: LayoutProps) {
     <div className="affiliations-table-row-highlighted">
       <OLRow>{children}</OLRow>
       {isError && (
-        <OLNotification
-          type="error"
-          content={getUserFacingMessage(error) ?? ''}
-        />
+        <div className="notification-list">
+          <Notification
+            type="error"
+            content={getUserFacingMessage(error) ?? ''}
+          />
+        </div>
       )}
     </div>
   )
diff --git a/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx b/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
index d2e97bb7ad..864f58d361 100644
--- a/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/reconfirmation-info.tsx
@@ -5,7 +5,7 @@ import ReconfirmationInfoSuccess from './reconfirmation-info/reconfirmation-info
 import ReconfirmationInfoPromptText from './reconfirmation-info/reconfirmation-info-prompt-text'
 import OLRow from '@/shared/components/ol/ol-row'
 import OLCol from '@/shared/components/ol/ol-col'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { useUserEmailsContext } from '@/features/settings/context/user-email-context'
 import { ssoAvailableForInstitution } from '@/features/settings/utils/sso'
 import { useTranslation } from 'react-i18next'
@@ -44,14 +44,16 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
     return (
       <OLRow>
         <OLCol lg={12}>
-          <OLNotification
-            type="info"
-            content={
-              <ReconfirmationInfoSuccess
-                institution={affiliation.institution}
-              />
-            }
-          />
+          <div className="notification-list">
+            <Notification
+              type="info"
+              content={
+                <ReconfirmationInfoSuccess
+                  institution={affiliation.institution}
+                />
+              }
+            />
+          </div>
         </OLCol>
       </OLRow>
     )
@@ -62,39 +64,41 @@ function ReconfirmationInfo({ userEmailData }: ReconfirmationInfoProps) {
   }
 
   return (
-    <OLNotification
-      type="info"
-      content={
-        <ReconfirmationInfoPromptText
-          institutionName={affiliation.institution.name}
-          primary={userEmailData.default}
-        />
-      }
-      action={
-        affiliation?.institution && ssoAvailable ? (
-          <OLButton
-            variant="secondary"
-            disabled={isPending}
-            onClick={() => {
-              setIsPending(true)
-              location.assign(
-                `${samlInitPath}?university_id=${affiliation.institution.id}&reconfirm=/user/settings`
-              )
-            }}
-          >
-            {t('confirm_affiliation')}
-          </OLButton>
-        ) : (
-          <ResendConfirmationCodeModal
-            email={userEmailData.email}
-            setGroupLoading={setUserEmailsContextLoading}
-            groupLoading={state.isLoading}
-            onSuccess={getEmails}
-            triggerVariant="secondary"
+    <div className="notification-list">
+      <Notification
+        type="info"
+        content={
+          <ReconfirmationInfoPromptText
+            institutionName={affiliation.institution.name}
+            primary={userEmailData.default}
           />
-        )
-      }
-    />
+        }
+        action={
+          affiliation?.institution && ssoAvailable ? (
+            <OLButton
+              variant="secondary"
+              disabled={isPending}
+              onClick={() => {
+                setIsPending(true)
+                location.assign(
+                  `${samlInitPath}?university_id=${affiliation.institution.id}&reconfirm=/user/settings`
+                )
+              }}
+            >
+              {t('confirm_affiliation')}
+            </OLButton>
+          ) : (
+            <ResendConfirmationCodeModal
+              email={userEmailData.email}
+              setGroupLoading={setUserEmailsContextLoading}
+              groupLoading={state.isLoading}
+              onSuccess={getEmails}
+              triggerVariant="secondary"
+            />
+          )
+        }
+      />
+    </div>
   )
 }
 
diff --git a/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx b/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx
index 2ee535281b..64c9087eff 100644
--- a/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/sso-alert.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useTranslation, Trans } from 'react-i18next'
 import getMeta from '../../../../utils/meta'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 export function SSOAlert() {
   const { t } = useTranslation()
@@ -38,12 +38,14 @@ export function SSOAlert() {
       )
 
     return !errorClosed ? (
-      <OLNotification
-        type="error"
-        content={content}
-        isDismissible
-        onDismiss={handleErrorClosed}
-      />
+      <div className="notification-list">
+        <Notification
+          type="error"
+          content={content}
+          isDismissible
+          onDismiss={handleErrorClosed}
+        />
+      </div>
     ) : null
   }
 
@@ -54,51 +56,57 @@ export function SSOAlert() {
   return (
     <>
       {!infoClosed && (
-        <OLNotification
-          type="info"
-          content={
-            <>
-              <p>
-                <Trans
-                  i18nKey="institution_acct_successfully_linked_2"
-                  components={[<strong />]} // eslint-disable-line react/jsx-key
-                  values={{ institutionName: institutionLinked.universityName }}
-                  shouldUnescape
-                  tOptions={{ interpolation: { escapeValue: true } }}
-                />
-              </p>
-              {institutionLinked.hasEntitlement && (
+        <div className="notification-list">
+          <Notification
+            type="info"
+            content={
+              <>
                 <p>
                   <Trans
-                    i18nKey="this_grants_access_to_features_2"
+                    i18nKey="institution_acct_successfully_linked_2"
                     components={[<strong />]} // eslint-disable-line react/jsx-key
-                    values={{ featureType: t('commons') }}
+                    values={{
+                      institutionName: institutionLinked.universityName,
+                    }}
                     shouldUnescape
                     tOptions={{ interpolation: { escapeValue: true } }}
                   />
                 </p>
-              )}
-            </>
-          }
-          isDismissible
-          onDismiss={handleInfoClosed}
-        />
+                {institutionLinked.hasEntitlement && (
+                  <p>
+                    <Trans
+                      i18nKey="this_grants_access_to_features_2"
+                      components={[<strong />]} // eslint-disable-line react/jsx-key
+                      values={{ featureType: t('commons') }}
+                      shouldUnescape
+                      tOptions={{ interpolation: { escapeValue: true } }}
+                    />
+                  </p>
+                )}
+              </>
+            }
+            isDismissible
+            onDismiss={handleInfoClosed}
+          />
+        </div>
       )}
       {!warningClosed && institutionEmailNonCanonical && (
-        <OLNotification
-          type="warning"
-          content={
-            <Trans
-              i18nKey="in_order_to_match_institutional_metadata_2"
-              components={[<strong />]} // eslint-disable-line react/jsx-key
-              values={{ email: institutionEmailNonCanonical }}
-              shouldUnescape
-              tOptions={{ interpolation: { escapeValue: true } }}
-            />
-          }
-          isDismissible
-          onDismiss={handleWarningClosed}
-        />
+        <div className="notification-list">
+          <Notification
+            type="warning"
+            content={
+              <Trans
+                i18nKey="in_order_to_match_institutional_metadata_2"
+                components={[<strong />]} // eslint-disable-line react/jsx-key
+                values={{ email: institutionEmailNonCanonical }}
+                shouldUnescape
+                tOptions={{ interpolation: { escapeValue: true } }}
+              />
+            }
+            isDismissible
+            onDismiss={handleWarningClosed}
+          />
+        </div>
       )}
     </>
   )
diff --git a/services/web/frontend/js/features/settings/components/emails/unlink-commons-sso-modal.tsx b/services/web/frontend/js/features/settings/components/emails/unlink-commons-sso-modal.tsx
index a03e047dff..1e00ae6945 100644
--- a/services/web/frontend/js/features/settings/components/emails/unlink-commons-sso-modal.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/unlink-commons-sso-modal.tsx
@@ -5,7 +5,7 @@ import {
   OLModalHeader,
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 import { postJSON } from '@/infrastructure/fetch-json'
 import { debugConsole } from '@/utils/debugging'
@@ -69,10 +69,12 @@ export default function UnlinkCommonsSSOModal({
         {hasLicence && <p>{t('unlink_commons_sso_lose_licence')}</p>}
         {!hasPassword && <p>{t('unlink_commons_sso_no_login')}</p>}
         {isError && (
-          <OLNotification
-            type="error"
-            content={t('unlink_commons_sso_error')}
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              content={t('unlink_commons_sso_error')}
+            />
+          </div>
         )}
       </OLModalBody>
       <OLModalFooter>
diff --git a/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx b/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx
index 21c635e21e..9d2149c002 100644
--- a/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx
+++ b/services/web/frontend/js/features/settings/components/leave/modal-form-error.tsx
@@ -1,7 +1,7 @@
 import { useTranslation, Trans } from 'react-i18next'
 import getMeta from '../../../../utils/meta'
 import { FetchError } from '../../../../infrastructure/fetch-json'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 type LeaveModalFormErrorProps = {
   error: FetchError
@@ -31,20 +31,22 @@ function LeaveModalFormError({ error }: LeaveModalFormErrorProps) {
   }
 
   return (
-    <OLNotification
-      type="error"
-      content={
-        <>
-          {errorMessage}
-          {errorTip ? (
-            <>
-              <br />
-              {errorTip}
-            </>
-          ) : null}
-        </>
-      }
-    />
+    <div className="notification-list">
+      <Notification
+        type="error"
+        content={
+          <>
+            {errorMessage}
+            {errorTip ? (
+              <>
+                <br />
+                {errorTip}
+              </>
+            ) : null}
+          </>
+        }
+      />
+    </div>
   )
 }
 
diff --git a/services/web/frontend/js/features/settings/components/linking-section.tsx b/services/web/frontend/js/features/settings/components/linking-section.tsx
index cd92ab614b..aa1115c569 100644
--- a/services/web/frontend/js/features/settings/components/linking-section.tsx
+++ b/services/web/frontend/js/features/settings/components/linking-section.tsx
@@ -5,7 +5,7 @@ import { useSSOContext, SSOSubscription } from '../context/sso-context'
 import { SSOLinkingWidget } from './linking/sso-widget'
 import getMeta from '../../../utils/meta'
 import { useBroadcastUser } from '@/shared/hooks/user-channel/use-broadcast-user'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 const availableIntegrationLinkingWidgets = importOverleafModules(
   'integrationLinkingWidgets'
@@ -104,10 +104,12 @@ function LinkingSection() {
         <>
           <h3 id="project-sync">{t('project_synchronisation')}</h3>
           {projectSyncSuccessMessage ? (
-            <OLNotification
-              type="success"
-              content={projectSyncSuccessMessage}
-            />
+            <div className="notification-list">
+              <Notification
+                type="success"
+                content={projectSyncSuccessMessage}
+              />
+            </div>
           ) : null}
           <div className="settings-widgets-container">
             {allIntegrationLinkingWidgets.map(
@@ -144,10 +146,12 @@ function LinkingSection() {
         <>
           <h3 id="linked-accounts">{t('linked_accounts')}</h3>
           {ssoErrorMessage ? (
-            <OLNotification
-              type="error"
-              content={`${t('sso_link_error')}: ${ssoErrorMessage}`}
-            />
+            <div className="notification-list">
+              <Notification
+                type="error"
+                content={`${t('sso_link_error')}: ${ssoErrorMessage}`}
+              />
+            </div>
           ) : null}
           <div className="settings-widgets-container">
             {Object.values(subscriptions).map(
diff --git a/services/web/frontend/js/features/settings/components/password-section.tsx b/services/web/frontend/js/features/settings/components/password-section.tsx
index 7dacfc468a..1a558f396f 100644
--- a/services/web/frontend/js/features/settings/components/password-section.tsx
+++ b/services/web/frontend/js/features/settings/components/password-section.tsx
@@ -8,7 +8,7 @@ import {
 import getMeta from '../../../utils/meta'
 import useAsync from '../../../shared/hooks/use-async'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
 import OLFormLabel from '@/shared/components/ol/ol-form-label'
 import OLFormControl from '@/shared/components/ol/ol-form-control'
@@ -156,44 +156,48 @@ function PasswordForm() {
       />
       {isSuccess && data?.message?.text ? (
         <OLFormGroup>
-          <OLNotification type="success" content={data.message.text} />
+          <div className="notification-list">
+            <Notification type="success" content={data.message.text} />
+          </div>
         </OLFormGroup>
       ) : null}
       {isError ? (
         <OLFormGroup>
-          <OLNotification
-            type="error"
-            content={
-              getErrorMessageKey(error) === 'password-must-be-strong' ? (
-                <>
-                  <Trans
-                    i18nKey="password_was_detected_on_a_public_list_of_known_compromised_passwords"
-                    components={[
-                      /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
-                      <a
-                        href="https://haveibeenpwned.com/passwords"
-                        target="_blank"
-                        rel="noreferrer noopener"
-                      />,
-                    ]}
-                  />
-                  {t('use_a_different_password')}.
-                </>
-              ) : getErrorMessageKey(error) === 'password-contains-email' ? (
-                <>
-                  {t('invalid_password_contains_email')}{' '}
-                  {t('use_a_different_password')}.
-                </>
-              ) : getErrorMessageKey(error) === 'password-too-similar' ? (
-                <>
-                  {t('invalid_password_too_similar')}{' '}
-                  {t('use_a_different_password')}.
-                </>
-              ) : (
-                (getUserFacingMessage(error) ?? '')
-              )
-            }
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              content={
+                getErrorMessageKey(error) === 'password-must-be-strong' ? (
+                  <>
+                    <Trans
+                      i18nKey="password_was_detected_on_a_public_list_of_known_compromised_passwords"
+                      components={[
+                        /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+                        <a
+                          href="https://haveibeenpwned.com/passwords"
+                          target="_blank"
+                          rel="noreferrer noopener"
+                        />,
+                      ]}
+                    />
+                    {t('use_a_different_password')}.
+                  </>
+                ) : getErrorMessageKey(error) === 'password-contains-email' ? (
+                  <>
+                    {t('invalid_password_contains_email')}{' '}
+                    {t('use_a_different_password')}.
+                  </>
+                ) : getErrorMessageKey(error) === 'password-too-similar' ? (
+                  <>
+                    {t('invalid_password_too_similar')}{' '}
+                    {t('use_a_different_password')}.
+                  </>
+                ) : (
+                  (getUserFacingMessage(error) ?? '')
+                )
+              }
+            />
+          </div>
         </OLFormGroup>
       ) : null}
       <OLFormGroup>
diff --git a/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx b/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx
index 07fb6ed6ad..8623f19d3b 100644
--- a/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/edit-member.tsx
@@ -21,7 +21,7 @@ import {
   DropdownMenu,
   DropdownToggle,
 } from '@/shared/components/dropdown/dropdown-menu'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import classnames from 'classnames'
 
@@ -268,7 +268,7 @@ export default function EditMember({
             </DropdownToggle>
           </div>
           <DropdownMenu>
-            <OLDropdownMenuItem
+            <DropdownMenuItem
               as="button"
               eventKey="owner"
               leadingIcon={<MaterialIcon type="person_edit" unfilled />}
@@ -276,8 +276,8 @@ export default function EditMember({
               trailingIcon={privileges === 'owner' ? 'check' : undefined}
             >
               {t('make_owner')}
-            </OLDropdownMenuItem>
-            <OLDropdownMenuItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               as="button"
               eventKey="readAndWrite"
               leadingIcon={<MaterialIcon type="edit" unfilled />}
@@ -287,9 +287,9 @@ export default function EditMember({
               description={getPrivilegeSubtitle('readAndWrite')}
             >
               {t('editor')}
-            </OLDropdownMenuItem>
+            </DropdownMenuItem>
             {features.trackChangesVisible && (
-              <OLDropdownMenuItem
+              <DropdownMenuItem
                 as="button"
                 eventKey="review"
                 leadingIcon={<MaterialIcon type="mode_comment" unfilled />}
@@ -299,9 +299,9 @@ export default function EditMember({
                 description={getPrivilegeSubtitle('review')}
               >
                 {t('reviewer')}
-              </OLDropdownMenuItem>
+              </DropdownMenuItem>
             )}
-            <OLDropdownMenuItem
+            <DropdownMenuItem
               as="button"
               eventKey="readOnly"
               leadingIcon={<MaterialIcon type="visibility" unfilled />}
@@ -309,8 +309,8 @@ export default function EditMember({
               trailingIcon={privileges === 'readOnly' ? 'check' : undefined}
             >
               {t('viewer')}
-            </OLDropdownMenuItem>
-            <OLDropdownMenuItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               as="button"
               eventKey="removeAccess"
               variant="danger"
@@ -319,7 +319,7 @@ export default function EditMember({
               trailingIcon={privileges === 'removeAccess' ? 'check' : undefined}
             >
               {t('remove_access')}
-            </OLDropdownMenuItem>
+            </DropdownMenuItem>
           </DropdownMenu>
         </Dropdown>
         {confirmRemoval && (
diff --git a/services/web/frontend/js/features/share-project-modal/components/invite.tsx b/services/web/frontend/js/features/share-project-modal/components/invite.tsx
index 71161a4ea4..f4f19b64f8 100644
--- a/services/web/frontend/js/features/share-project-modal/components/invite.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/invite.tsx
@@ -10,7 +10,7 @@ import OLCol from '@/shared/components/ol/ol-col'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import OLButton from '@/shared/components/ol/ol-button'
 import OLBadge from '@/shared/components/ol/ol-badge'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import {
   Dropdown,
   DropdownMenu,
@@ -120,14 +120,14 @@ function ResendInvite({ invite }: { invite: ProjectMember }) {
   )
 
   return isSharingUpdatesEnabled ? (
-    <OLDropdownMenuItem
+    <DropdownMenuItem
       as="button"
       leadingIcon={<MaterialIcon type="mail" unfilled />}
       onClick={handleClick}
       disabled={inFlight}
     >
       {t('resend_invite')}
-    </OLDropdownMenuItem>
+    </DropdownMenuItem>
   ) : (
     <OLButton
       variant="link"
@@ -167,14 +167,14 @@ function RevokeInvite({ invite }: { invite: ProjectMember }) {
   }
 
   return isSharingUpdatesEnabled ? (
-    <OLDropdownMenuItem
+    <DropdownMenuItem
       as="button"
       leadingIcon={<MaterialIcon type="block" unfilled />}
       variant="danger"
       onClick={handleClick}
     >
       {t('revoke_invite')}
-    </OLDropdownMenuItem>
+    </DropdownMenuItem>
   ) : (
     <OLTooltip
       id="revoke-invite"
diff --git a/services/web/frontend/js/features/share-project-modal/components/project-access.tsx b/services/web/frontend/js/features/share-project-modal/components/project-access.tsx
index 82c89166d7..ba210e1c60 100644
--- a/services/web/frontend/js/features/share-project-modal/components/project-access.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/project-access.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import ShareProjectModalRow from '@/features/share-project-modal/components/share-project-modal-row'
 import MaterialIcon from '@/shared/components/material-icon'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import {
   Dropdown,
   DropdownDivider,
@@ -321,7 +321,7 @@ function ProjectAccess({
                 <MaterialIcon type="keyboard_arrow_down" />
               </DropdownToggle>
               <DropdownMenu>
-                <OLDropdownMenuItem
+                <DropdownMenuItem
                   as="button"
                   eventKey="readAndWrite"
                   leadingIcon={<MaterialIcon type="edit" unfilled />}
@@ -331,8 +331,8 @@ function ProjectAccess({
                   }
                 >
                   {t('editor')}
-                </OLDropdownMenuItem>
-                <OLDropdownMenuItem
+                </DropdownMenuItem>
+                <DropdownMenuItem
                   as="button"
                   eventKey="review"
                   leadingIcon={<MaterialIcon type="mode_comment" unfilled />}
@@ -340,8 +340,8 @@ function ProjectAccess({
                   trailingIcon={privileges === 'review' ? 'check' : undefined}
                 >
                   {t('reviewer')}
-                </OLDropdownMenuItem>
-                <OLDropdownMenuItem
+                </DropdownMenuItem>
+                <DropdownMenuItem
                   as="button"
                   eventKey="readOnly"
                   leadingIcon={<MaterialIcon type="visibility" unfilled />}
@@ -349,7 +349,7 @@ function ProjectAccess({
                   trailingIcon={privileges === 'readOnly' ? 'check' : undefined}
                 >
                   {t('viewer')}
-                </OLDropdownMenuItem>
+                </DropdownMenuItem>
               </DropdownMenu>
             </Dropdown>
           )}
diff --git a/services/web/frontend/js/features/share-project-modal/components/send-invites-notice.tsx b/services/web/frontend/js/features/share-project-modal/components/send-invites-notice.tsx
index 1d2b015773..367dea2237 100644
--- a/services/web/frontend/js/features/share-project-modal/components/send-invites-notice.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/send-invites-notice.tsx
@@ -3,7 +3,7 @@ import { useProjectContext } from '@/shared/context/project-context'
 import { useEditorContext } from '@/shared/context/editor-context'
 import OLRow from '@/shared/components/ol/ol-row'
 import OLCol from '@/shared/components/ol/ol-col'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 function SendInvitesNotice() {
@@ -23,25 +23,29 @@ function SendInvitesNotice() {
   return (
     <div>
       {isPendingEditor && (
-        <OLNotification
-          isActionBelowContent
-          type="info"
-          title={t('youve_lost_collaboration_access')}
-          content={
-            <div>
-              <p>{t('this_project_already_has_maximum_collaborators')}</p>
-              <p>
-                {t(
-                  'please_ask_the_project_owner_to_upgrade_more_collaborators'
-                )}
-              </p>
-            </div>
-          }
-        />
+        <div className="notification-list">
+          <Notification
+            isActionBelowContent
+            type="info"
+            title={t('youve_lost_collaboration_access')}
+            content={
+              <div>
+                <p>{t('this_project_already_has_maximum_collaborators')}</p>
+                <p>
+                  {t(
+                    'please_ask_the_project_owner_to_upgrade_more_collaborators'
+                  )}
+                </p>
+              </div>
+            }
+          />
+        </div>
       )}
       {accessLevelText &&
         (isSharingUpdatesEnabled ? (
-          <OLNotification type="info" content={accessLevelText} />
+          <div className="notification-list">
+            <Notification type="info" content={accessLevelText} />
+          </div>
         ) : (
           <OLRow className="public-access-level public-access-level-notice">
             <OLCol className="text-center">
diff --git a/services/web/frontend/js/features/share-project-modal/components/share-modal-body.tsx b/services/web/frontend/js/features/share-project-modal/components/share-modal-body.tsx
index bccf27b191..344e49ba98 100644
--- a/services/web/frontend/js/features/share-project-modal/components/share-modal-body.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/share-modal-body.tsx
@@ -11,7 +11,7 @@ import { useMemo } from 'react'
 import RecaptchaConditions from '@/shared/components/recaptcha-conditions'
 import getMeta from '@/utils/meta'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import ErrorMessage from '@/features/share-project-modal/components/error-message'
 import ProjectAccess from '@/features/share-project-modal/components/project-access'
 import InvitedPeople from '@/features/share-project-modal/components/invited-people'
@@ -124,14 +124,15 @@ export default function ShareModalBody({
       ) : (
         <SendInvitesNotice />
       )}
-
       {isSharingUpdatesEnabled ? (
         <>
           {error && (
-            <OLNotification
-              type="error"
-              content={<ErrorMessage error={error} />}
-            />
+            <div className="notification-list">
+              <Notification
+                type="error"
+                content={<ErrorMessage error={error} />}
+              />
+            </div>
           )}
           {isInvitedPeopleScreen || !isProjectOwner ? (
             <InvitedPeople
@@ -185,7 +186,6 @@ export default function ShareModalBody({
           ))}
         </>
       )}
-
       {!getMeta('ol-ExposedSettings').recaptchaDisabled?.invite && (
         <RecaptchaConditions />
       )}
diff --git a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx
index 46bc218a96..9e3a5fcbed 100644
--- a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.tsx
@@ -10,7 +10,7 @@ import {
   OLModalHeader,
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 import OLSpinner from '@/shared/components/ol/ol-spinner'
 import MaterialIcon from '@/shared/components/material-icon'
@@ -100,7 +100,6 @@ function ShareProjectModalContentInner({
           {isSharingUpdatesEnabled && isProjectOwner && <GiveFeedbackLink />}
         </div>
       </OLModalHeader>
-
       <OLModalBody
         className={classNames('modal-body-share modal-link-share', {
           'modal-redesign': isSharingUpdatesEnabled,
@@ -123,15 +122,16 @@ function ShareProjectModalContentInner({
             )}
           </Suspense>
           {!isSharingUpdatesEnabled && error && (
-            <OLNotification
-              type="error"
-              content={<ErrorMessage error={error} />}
-              className="mb-0 mt-3"
-            />
+            <div className="notification-list">
+              <Notification
+                type="error"
+                content={<ErrorMessage error={error} />}
+                className="mb-0 mt-3"
+              />
+            </div>
           )}
         </div>
       </OLModalBody>
-
       <OLModalFooter>
         <div className="d-flex flex-grow-1 flex-wrap gap-2">
           {isSharingUpdatesEnabled ? (
diff --git a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx b/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx
index ac75b734bc..9a58239f97 100644
--- a/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx
+++ b/services/web/frontend/js/features/share-project-modal/components/transfer-ownership-modal.tsx
@@ -10,7 +10,7 @@ import {
   OLModalHeader,
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 import { ProjectMember } from '@/shared/context/types/project-metadata'
 import OLSpinner from '@/shared/components/ol/ol-spinner'
@@ -61,11 +61,13 @@ export default function TransferOwnershipModal({
         </p>
         <p>{t('project_ownership_transfer_confirmation_2')}</p>
         {error && (
-          <OLNotification
-            type="error"
-            content={t('generic_something_went_wrong')}
-            className="mb-0 mt-3"
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              content={t('generic_something_went_wrong')}
+              className="mb-0 mt-3"
+            />
+          </div>
         )}
       </OLModalBody>
       <OLModalFooter>
diff --git a/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx b/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx
index 73a0d7dc4c..ffe0963b90 100644
--- a/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx
+++ b/services/web/frontend/js/features/socket-diagnostics/components/diagnostic-component.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import type { ConnectionStatus } from './types'
 import { Badge, Button } from 'react-bootstrap'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import MaterialIcon from '@/shared/components/material-icon'
 
 const variants = {
@@ -44,7 +44,11 @@ export const DiagnosticItem = ({
 )
 
 export function ErrorAlert({ message }: { message: string }) {
-  return <OLNotification type="error" content={message} className="mt-3" />
+  return (
+    <div className="notification-list">
+      <Notification type="error" content={message} className="mt-3" />
+    </div>
+  )
 }
 
 export function ActionButton({
diff --git a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-body.tsx b/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-body.tsx
index 662e2cde3d..390c90b645 100644
--- a/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-body.tsx
+++ b/services/web/frontend/js/features/source-editor/components/figure-modal/figure-modal-body.tsx
@@ -11,7 +11,7 @@ import { FigureModalCurrentProjectSource } from './file-sources/figure-modal-pro
 import { FigureModalUploadFileSource } from './file-sources/figure-modal-upload-source'
 import { FigureModalUrlSource } from './file-sources/figure-modal-url-source'
 import { useCallback } from 'react'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 const sourceModes = new Map([
   [FigureModalSource.FILE_TREE, FigureModalCurrentProjectSource],
@@ -44,7 +44,9 @@ export default function FigureModalBody() {
   return (
     <>
       {error && (
-        <OLNotification type="error" onDismiss={onDismiss} content={error} />
+        <div className="notification-list">
+          <Notification type="error" onDismiss={onDismiss} content={error} />
+        </div>
       )}
       <Body />
       <FigureModalFigureOptions />
diff --git a/services/web/frontend/js/features/source-editor/components/figure-modal/file-name-input.tsx b/services/web/frontend/js/features/source-editor/components/figure-modal/file-name-input.tsx
index 1b7346026a..08e4845637 100644
--- a/services/web/frontend/js/features/source-editor/components/figure-modal/file-name-input.tsx
+++ b/services/web/frontend/js/features/source-editor/components/figure-modal/file-name-input.tsx
@@ -5,7 +5,7 @@ import { useCurrentProjectFolders } from '@/features/source-editor/hooks/use-cur
 import OLFormControl from '@/shared/components/ol/ol-form-control'
 import OLFormLabel from '@/shared/components/ol/ol-form-label'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 type FileNameInputProps = Omit<
   React.ComponentProps<typeof OLFormControl>,
@@ -85,13 +85,15 @@ export const FileNameInput = ({
         <OLFormLabel>{label}</OLFormLabel>
         <OLFormControl onFocus={onFocus} {...props} />
         {overlap && (
-          <OLNotification
-            type="warning"
-            content={t(
-              'a_file_with_that_name_already_exists_and_will_be_overriden'
-            )}
-            className="mt-1 mb-0"
-          />
+          <div className="notification-list">
+            <Notification
+              type="warning"
+              content={t(
+                'a_file_with_that_name_already_exists_and_will_be_overriden'
+              )}
+              className="mt-1 mb-0"
+            />
+          </div>
         )}
       </OLFormGroup>
     </>
diff --git a/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx b/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx
index 30a0bc9217..2afa88d1d0 100644
--- a/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx
+++ b/services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx
@@ -23,7 +23,7 @@ import {
 import { mathPreviewStateField } from '../extensions/math-preview'
 import { getTooltip } from '@codemirror/view'
 import ReactDOM from 'react-dom'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 
 const MathPreviewTooltipContainer: FC = () => {
   const state = useCodeMirrorStateContext()
@@ -94,7 +94,7 @@ const MathPreviewTooltipMenu: FC = () => {
           />
         </DropdownToggle>
         <DropdownMenu flip={false}>
-          <OLDropdownMenuItem
+          <DropdownMenuItem
             onClick={onHide}
             description={t('temporarily_hides_the_preview')}
             trailingIcon={
@@ -104,13 +104,13 @@ const MathPreviewTooltipMenu: FC = () => {
             }
           >
             {t('hide')}
-          </OLDropdownMenuItem>
-          <OLDropdownMenuItem
+          </DropdownMenuItem>
+          <DropdownMenuItem
             onClick={openDisableModal}
             description={t('permanently_disables_the_preview')}
           >
             {t('disable')}
-          </OLDropdownMenuItem>
+          </DropdownMenuItem>
         </DropdownMenu>
       </Dropdown>
 
diff --git a/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx b/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx
index b3fa9178db..04294f99f8 100644
--- a/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx
+++ b/services/web/frontend/js/features/subscription/components/canceled-subscription/canceled.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import OLRow from '@/shared/components/ol/ol-row'
 import OLCol from '@/shared/components/ol/ol-col'
 import OLPageContentCard from '@/shared/components/ol/ol-page-content-card'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 function Canceled() {
   const { t } = useTranslation()
@@ -13,17 +13,19 @@ function Canceled() {
         <OLCol lg={{ span: 8, offset: 2 }}>
           <OLPageContentCard>
             <h2>{t('subscription_canceled')}</h2>
-            <OLNotification
-              type="info"
-              content={
-                <div className="d-flex justify-content-between align-items-center gap-3">
-                  <span>{t('to_modify_your_subscription_go_to')}</span>
-                  <a href="/user/subscription" rel="noopener noreferrer">
-                    {t('manage_subscription')}
-                  </a>
-                </div>
-              }
-            />
+            <div className="notification-list">
+              <Notification
+                type="info"
+                content={
+                  <div className="d-flex justify-content-between align-items-center gap-3">
+                    <span>{t('to_modify_your_subscription_go_to')}</span>
+                    <a href="/user/subscription" rel="noopener noreferrer">
+                      {t('manage_subscription')}
+                    </a>
+                  </div>
+                }
+              />
+            </div>
             <p>
               <a
                 className="btn btn-primary"
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/generic-error-alert.tsx b/services/web/frontend/js/features/subscription/components/dashboard/generic-error-alert.tsx
index e3a3bfe2e1..06a932420c 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/generic-error-alert.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/generic-error-alert.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 export default function GenericErrorAlert({
   className,
@@ -9,16 +9,18 @@ export default function GenericErrorAlert({
   const { t } = useTranslation()
 
   return (
-    <OLNotification
-      className={className}
-      aria-live="polite"
-      type="error"
-      content={
-        <>
-          {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
-          {t('generic_if_problem_continues_contact_us')}.
-        </>
-      }
-    />
+    <div className="notification-list">
+      <Notification
+        className={className}
+        aria-live="polite"
+        type="error"
+        content={
+          <>
+            {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
+            {t('generic_if_problem_continues_contact_us')}.
+          </>
+        }
+      />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/institution-memberships.tsx b/services/web/frontend/js/features/subscription/components/dashboard/institution-memberships.tsx
index 18fb768da7..2356a3e8ec 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/institution-memberships.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/institution-memberships.tsx
@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 import { Institution } from '../../../../../../types/institution'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 function InstitutionMemberships() {
   const { institutionMemberships } = useSubscriptionDashboardContext()
@@ -10,16 +10,18 @@ function InstitutionMemberships() {
 
   if (!institutionMemberships) {
     return (
-      <OLNotification
-        type="warning"
-        content={
-          <p>
-            Sorry, something went wrong. Subscription information related to
-            institutional affiliations may not be displayed. Please try again
-            later.
-          </p>
-        }
-      />
+      <div className="notification-list">
+        <Notification
+          type="warning"
+          content={
+            <p>
+              Sorry, something went wrong. Subscription information related to
+              institutional affiliations may not be displayed. Please try again
+              later.
+            </p>
+          }
+        />
+      </div>
     )
   }
 
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx
index 620462f63a..39cbdfd053 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/pause-modal.tsx
@@ -10,7 +10,7 @@ import {
 } from '@/shared/components/ol/ol-modal'
 import { Select } from '@/shared/components/select'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
-import Button from '@/shared/components/button/button'
+import OLButton from '@/shared/components/ol/ol-button'
 import { Stack } from 'react-bootstrap'
 import { debugConsole } from '@/utils/debugging'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
@@ -119,19 +119,19 @@ export default function PauseSubscriptionModal() {
           />
         </OLFormGroup>
         <Stack gap={2}>
-          <Button
+          <OLButton
             onClick={handleConfirmPauseSubscriptionClick}
             disabled={inflight}
           >
             {t('pause_subscription')}
-          </Button>
-          <Button
+          </OLButton>
+          <OLButton
             onClick={handleCancelSubscriptionClick}
             disabled={inflight}
             variant="danger-ghost"
           >
             {t('cancel_subscription')}
-          </Button>
+          </OLButton>
         </Stack>
       </OLModalBody>
     </OLModal>
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-sync-email.tsx b/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-sync-email.tsx
index f086377218..07e65f3f45 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-sync-email.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-sync-email.tsx
@@ -3,7 +3,7 @@ import { useSubscriptionDashboardContext } from '../../context/subscription-dash
 import getMeta from '../../../../utils/meta'
 import useAsync from '../../../../shared/hooks/use-async'
 import { postJSON } from '../../../../infrastructure/fetch-json'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 import OLFormGroup from '@/shared/components/ol/ol-form-group'
 
@@ -29,10 +29,12 @@ function PersonalSubscriptionSyncEmail() {
       <form onSubmit={handleSubmit}>
         <OLFormGroup>
           {isSuccess ? (
-            <OLNotification
-              type="success"
-              content={t('recurly_email_updated')}
-            />
+            <div className="notification-list">
+              <Notification
+                type="success"
+                content={t('recurly_email_updated')}
+              />
+            </div>
           ) : (
             <>
               <p>
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription.tsx b/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription.tsx
index 0b9ce9a4f5..073d9982a5 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription.tsx
@@ -6,7 +6,7 @@ import { CanceledSubscription } from './states/canceled'
 import { ExpiredSubscription } from './states/expired'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
 import PersonalSubscriptionSyncEmail from './personal-subscription-sync-email'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 function PastDueSubscriptionAlert({
   subscription,
@@ -15,21 +15,23 @@ function PastDueSubscriptionAlert({
 }) {
   const { t } = useTranslation()
   return (
-    <OLNotification
-      type="error"
-      content={
-        <>
-          {t('account_has_past_due_invoice_change_plan_warning')}{' '}
-          <a
-            href={subscription.payment.accountManagementLink}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            {t('view_your_invoices')}
-          </a>
-        </>
-      }
-    />
+    <div className="notification-list">
+      <Notification
+        type="error"
+        content={
+          <>
+            {t('account_has_past_due_invoice_change_plan_warning')}{' '}
+            <a
+              href={subscription.payment.accountManagementLink}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {t('view_your_invoices')}
+            </a>
+          </>
+        }
+      />
+    </div>
   )
 }
 
@@ -82,10 +84,12 @@ function PersonalSubscription() {
         subscription={personalSubscription as PaidSubscription}
       />
       {recurlyLoadError && (
-        <OLNotification
-          type="warning"
-          content={<strong>{t('payment_provider_unreachable_error')}</strong>}
-        />
+        <div className="notification-list">
+          <Notification
+            type="warning"
+            content={<strong>{t('payment_provider_unreachable_error')}</strong>}
+          />
+        </div>
       )}
       <hr />
       <PersonalSubscriptionSyncEmail />
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/redirect-alerts.tsx b/services/web/frontend/js/features/subscription/components/dashboard/redirect-alerts.tsx
index 4ba7f07f8b..a356799baa 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/redirect-alerts.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/redirect-alerts.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import OLButton from '@/shared/components/ol/ol-button'
 
 function RedirectAlerts() {
@@ -41,7 +41,9 @@ function RedirectAlerts() {
   }
 
   return (
-    <OLNotification type="warning" content={<>{warning}</>} action={action} />
+    <div className="notification-list">
+      <Notification type="warning" content={<>{warning}</>} action={action} />
+    </div>
   )
 }
 export default RedirectAlerts
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx
index 5f2f3c2bf4..04013ee7b4 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/add-ons.tsx
@@ -4,7 +4,7 @@ import getMeta from '@/utils/meta'
 import { Dropdown, DropdownMenu, DropdownToggle } from 'react-bootstrap'
 import { postJSON } from '@/infrastructure/fetch-json'
 import { debugConsole } from '@/utils/debugging'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import OLSpinner from '@/shared/components/ol/ol-spinner'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useLocation } from '@/shared/hooks/use-location'
@@ -119,22 +119,22 @@ function AddOn({
             </DropdownToggle>
             <DropdownMenu flip={false}>
               {pendingCancellation ? (
-                <OLDropdownMenuItem
+                <DropdownMenuItem
                   onClick={() => handleReactivateClick(addOnCode)}
                   as="button"
                   tabIndex={-1}
                 >
                   {t('reactivate')}
-                </OLDropdownMenuItem>
+                </DropdownMenuItem>
               ) : (
-                <OLDropdownMenuItem
+                <DropdownMenuItem
                   onClick={() => handleCancelClick(addOnCode)}
                   as="button"
                   tabIndex={-1}
                   variant="danger"
                 >
                   {t('cancel')}
-                </OLDropdownMenuItem>
+                </DropdownMenuItem>
               )}
             </DropdownMenu>
           </Dropdown>
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx
index a8993ad9e9..6f52d1c353 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/cancel-ai-add-on-modal.tsx
@@ -12,7 +12,7 @@ import {
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import {
   AI_ADD_ON_CODE,
   ADD_ON_NAME,
@@ -66,19 +66,20 @@ export function CancelAiAddOnModal() {
       <OLModalHeader>
         <OLModalTitle>{t('cancel_add_on')}</OLModalTitle>
       </OLModalHeader>
-
       <OLModalBody>
         {error && (
-          <OLNotification
-            type="error"
-            aria-live="polite"
-            content={
-              <>
-                {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
-                {t('generic_if_problem_continues_contact_us')}.
-              </>
-            }
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              aria-live="polite"
+              content={
+                <>
+                  {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
+                  {t('generic_if_problem_continues_contact_us')}.
+                </>
+              }
+            />
+          </div>
         )}
         <p>
           <Trans
@@ -93,7 +94,6 @@ export function CancelAiAddOnModal() {
         </p>
         <p>{t('the_add_on_will_remain_active_until')}</p>
       </OLModalBody>
-
       <OLModalFooter>
         <OLButton
           variant="secondary"
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx
index bd9b1698d7..9fc99b3528 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/change-to-group-modal.tsx
@@ -29,7 +29,7 @@ import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
 import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal'
 import { UserProvider } from '@/shared/context/user-context'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import handleStripePaymentAction from '@/features/subscription/util/handle-stripe-payment-action'
 
 const educationalPercentDiscount = 40
@@ -311,16 +311,18 @@ export function ChangeToGroupModal() {
             </p>
             <hr className="thin my-3" />
             {error && (
-              <OLNotification
-                type="error"
-                aria-live="polite"
-                content={
-                  <>
-                    {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
-                    {t('generic_if_problem_continues_contact_us')}.
-                  </>
-                }
-              />
+              <div className="notification-list">
+                <Notification
+                  type="error"
+                  aria-live="polite"
+                  content={
+                    <>
+                      {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
+                      {t('generic_if_problem_continues_contact_us')}.
+                    </>
+                  }
+                />
+              </div>
             )}
             <OLButton
               variant="primary"
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx
index cb01777cf2..967aa7437c 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/keep-current-plan-modal.tsx
@@ -16,7 +16,7 @@ import {
   OLModalTitle,
 } from '@/shared/components/ol/ol-modal'
 import OLButton from '@/shared/components/ol/ol-button'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 export function KeepCurrentPlanModal() {
   const modalId: SubscriptionDashModalIds = 'keep-current-plan'
@@ -53,19 +53,20 @@ export function KeepCurrentPlanModal() {
       <OLModalHeader>
         <OLModalTitle>{t('change_plan')}</OLModalTitle>
       </OLModalHeader>
-
       <OLModalBody>
         {error && (
-          <OLNotification
-            type="error"
-            aria-live="polite"
-            content={
-              <>
-                {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
-                {t('generic_if_problem_continues_contact_us')}.
-              </>
-            }
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              aria-live="polite"
+              content={
+                <>
+                  {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
+                  {t('generic_if_problem_continues_contact_us')}.
+                </>
+              }
+            />
+          </div>
         )}
         <p>
           <Trans
@@ -82,7 +83,6 @@ export function KeepCurrentPlanModal() {
           />
         </p>
       </OLModalBody>
-
       <OLModalFooter>
         <OLButton
           variant="secondary"
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx
index 23be08ae86..cc4c8e7cc1 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/change-plan/modals/writefull-bundle-management-modal.tsx
@@ -11,7 +11,7 @@ import {
 import OLButton from '@/shared/components/ol/ol-button'
 import sparkle from '@/shared/svgs/sparkle.svg'
 import { Dropdown, DropdownMenu, DropdownToggle } from 'react-bootstrap'
-import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import DropdownMenuItem from '@/shared/components/dropdown/dropdown-menu-item'
 import MaterialIcon from '@/shared/components/material-icon'
 import { ADD_ON_NAME } from '@/features/subscription/data/add-on-codes'
 import getMeta from '@/utils/meta'
@@ -102,9 +102,9 @@ function WritefullGrantedAddOn({
             />
           </DropdownToggle>
           <DropdownMenu flip={false}>
-            <OLDropdownMenuItem tabIndex={-1} onClick={handleManageOnWritefull}>
+            <DropdownMenuItem tabIndex={-1} onClick={handleManageOnWritefull}>
               {t('manage_subscription')}
-            </OLDropdownMenuItem>
+            </DropdownMenuItem>
           </DropdownMenu>
         </Dropdown>
       </div>
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx
index 0b2b99730f..ec38ae979b 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/confirm-unpause-modal.tsx
@@ -12,7 +12,7 @@ import {
 import OLButton from '@/shared/components/ol/ol-button'
 import { postJSON } from '@/infrastructure/fetch-json'
 import { useLocation } from '@/shared/hooks/use-location'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { PaidSubscription } from '../../../../../../../../types/subscription/dashboard/subscription'
 
 export function ConfirmUnpauseSubscriptionModal() {
@@ -53,19 +53,20 @@ export function ConfirmUnpauseSubscriptionModal() {
       <OLModalHeader>
         <OLModalTitle>{t('pick_up_where_you_left_off')}</OLModalTitle>
       </OLModalHeader>
-
       <OLModalBody>
         {error && (
-          <OLNotification
-            type="error"
-            aria-live="polite"
-            content={
-              <>
-                {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
-                {t('generic_if_problem_continues_contact_us')}.
-              </>
-            }
-          />
+          <div className="notification-list">
+            <Notification
+              type="error"
+              aria-live="polite"
+              content={
+                <>
+                  {t('generic_something_went_wrong')}. {t('try_again')}.{' '}
+                  {t('generic_if_problem_continues_contact_us')}.
+                </>
+              }
+            />
+          </div>
         )}
         <p>
           <Trans
diff --git a/services/web/frontend/js/features/subscription/components/dashboard/subscription-dashboard.tsx b/services/web/frontend/js/features/subscription/components/dashboard/subscription-dashboard.tsx
index 9076a3a27d..d34e00e0f0 100644
--- a/services/web/frontend/js/features/subscription/components/dashboard/subscription-dashboard.tsx
+++ b/services/web/frontend/js/features/subscription/components/dashboard/subscription-dashboard.tsx
@@ -13,7 +13,7 @@ import PremiumFeaturesLink from './premium-features-link'
 import OLPageContentCard from '@/shared/components/ol/ol-page-content-card'
 import OLRow from '@/shared/components/ol/ol-row'
 import OLCol from '@/shared/components/ol/ol-col'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import WritefullManagedBundleAddOn from './states/active/change-plan/modals/writefull-bundle-management-modal'
 import RedirectAlerts from './redirect-alerts'
 import { PaidSubscription } from '@ol-types/subscription/dashboard/subscription'
@@ -49,52 +49,58 @@ function SubscriptionDashboard() {
       <OLRow>
         <OLCol lg={{ span: 8, offset: 2 }}>
           {hasPendingPlan && (
-            <OLNotification
-              className="mb-4"
-              aria-live="polite"
-              content={
-                <div>
-                  <Trans
-                    i18nKey="pending_subscription_message"
-                    values={{
-                      planName: personalSubscription?.pendingPlan?.name,
-                      activationDate: nextPaymentDueDate,
-                    }}
-                    shouldUnescape
-                    tOptions={{ interpolation: { escapeValue: true } }}
-                    components={[
-                      // eslint-disable-next-line react/jsx-key
-                      <strong />,
-                    ]}
-                  />
-                </div>
-              }
-              type="success"
-            />
+            <div className="notification-list">
+              <Notification
+                className="mb-4"
+                aria-live="polite"
+                content={
+                  <div>
+                    <Trans
+                      i18nKey="pending_subscription_message"
+                      values={{
+                        planName: personalSubscription?.pendingPlan?.name,
+                        activationDate: nextPaymentDueDate,
+                      }}
+                      shouldUnescape
+                      tOptions={{ interpolation: { escapeValue: true } }}
+                      components={[
+                        // eslint-disable-next-line react/jsx-key
+                        <strong />,
+                      ]}
+                    />
+                  </div>
+                }
+                type="success"
+              />
+            </div>
           )}
           {fromPlansPage && (
-            <OLNotification
-              className="mb-4"
-              aria-live="polite"
-              content={t('you_already_have_a_subscription')}
-              type="warning"
-            />
+            <div className="notification-list">
+              <Notification
+                className="mb-4"
+                aria-live="polite"
+                content={t('you_already_have_a_subscription')}
+                type="warning"
+              />
+            </div>
           )}
           {hasRedirectedPaymentError && (
-            <OLNotification
-              className="mb-4"
-              aria-live="polite"
-              content={
-                <Trans
-                  i18nKey="payment_error_generic"
-                  components={[
-                    /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
-                    <a href="/contact" target="_blank" />,
-                  ]}
-                />
-              }
-              type="error"
-            />
+            <div className="notification-list">
+              <Notification
+                className="mb-4"
+                aria-live="polite"
+                content={
+                  <Trans
+                    i18nKey="payment_error_generic"
+                    components={[
+                      /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+                      <a href="/contact" target="_blank" />,
+                    ]}
+                  />
+                }
+                type="error"
+              />
+            </div>
           )}
           <RedirectAlerts />
           <OLPageContentCard>
diff --git a/services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx b/services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx
index 1b9b143caa..021f10f53b 100644
--- a/services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx
+++ b/services/web/frontend/js/features/subscription/components/preview-subscription-change/trial-disabled-notification.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import getMeta from '@/utils/meta'
 
 export default function TrialDisabledNotification() {
@@ -11,11 +11,13 @@ export default function TrialDisabledNotification() {
   }
 
   return (
-    <OLNotification
-      className="mb-4"
-      aria-live="polite"
-      content={t('youre_not_eligible_for_a_free_trial')}
-      type="warning"
-    />
+    <div className="notification-list">
+      <Notification
+        className="mb-4"
+        aria-live="polite"
+        content={t('youre_not_eligible_for_a_free_trial')}
+        type="warning"
+      />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/subscription/components/shared/payment-error-notification.tsx b/services/web/frontend/js/features/subscription/components/shared/payment-error-notification.tsx
index f2db8d8baf..d7196f1367 100644
--- a/services/web/frontend/js/features/subscription/components/shared/payment-error-notification.tsx
+++ b/services/web/frontend/js/features/subscription/components/shared/payment-error-notification.tsx
@@ -1,6 +1,6 @@
 import { FetchError } from '@/infrastructure/fetch-json'
 import { Trans } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { billingPortalUrl } from '../../data/subscription-url'
 
 type Props = {
@@ -62,5 +62,9 @@ export default function PaymentErrorNotification({ error }: Props) {
       }
   }
 
-  return <OLNotification type="error" aria-live="polite" content={message} />
+  return (
+    <div className="notification-list">
+      <Notification type="error" aria-live="polite" content={message} />
+    </div>
+  )
 }
diff --git a/services/web/frontend/js/features/subscription/components/shared/redirected-payment-error-notification.tsx b/services/web/frontend/js/features/subscription/components/shared/redirected-payment-error-notification.tsx
index 1a56d042da..eab3ed0969 100644
--- a/services/web/frontend/js/features/subscription/components/shared/redirected-payment-error-notification.tsx
+++ b/services/web/frontend/js/features/subscription/components/shared/redirected-payment-error-notification.tsx
@@ -1,5 +1,5 @@
 import { Trans } from 'react-i18next'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import getMeta from '@/utils/meta'
 
 export default function RedirectedPaymentErrorNotification() {
@@ -12,19 +12,21 @@ export default function RedirectedPaymentErrorNotification() {
   }
 
   return (
-    <OLNotification
-      className="mb-4"
-      aria-live="polite"
-      content={
-        <Trans
-          i18nKey="payment_error_generic"
-          components={[
-            /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
-            <a href="/contact" target="_blank" />,
-          ]}
-        />
-      }
-      type="error"
-    />
+    <div className="notification-list">
+      <Notification
+        className="mb-4"
+        aria-live="polite"
+        content={
+          <Trans
+            i18nKey="payment_error_generic"
+            components={[
+              /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+              <a href="/contact" target="_blank" />,
+            ]}
+          />
+        }
+        type="error"
+      />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx b/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx
index ab2d3492c4..70f37964b5 100644
--- a/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx
+++ b/services/web/frontend/js/features/subscription/components/successful-subscription/successful-subscription.tsx
@@ -6,7 +6,7 @@ import { useSubscriptionDashboardContext } from '../../context/subscription-dash
 import OLRow from '@/shared/components/ol/ol-row'
 import OLCol from '@/shared/components/ol/ol-col'
 import OLPageContentCard from '@/shared/components/ol/ol-page-content-card'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import {
   AI_ADD_ON_CODE,
   ADD_ON_NAME,
@@ -44,37 +44,39 @@ function SuccessfulSubscription() {
         <OLCol lg={{ span: 8, offset: 2 }}>
           <OLPageContentCard>
             <h2>{t('thanks_for_subscribing')}</h2>
-            <OLNotification
-              type="success"
-              content={
-                <>
-                  {subscription.payment.trialEndsAt && (
-                    <>
-                      <p>
-                        <Trans
-                          i18nKey="next_payment_of_x_collectected_on_y"
-                          values={{
-                            paymentAmmount: subscription.payment.displayPrice,
-                            collectionDate:
-                              subscription.payment.nextPaymentDueAt,
-                          }}
-                          shouldUnescape
-                          tOptions={{ interpolation: { escapeValue: true } }}
-                          components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
-                        />
-                      </p>
-                      <PriceExceptions subscription={subscription} />
-                    </>
-                  )}
-                  <div className="d-flex justify-content-between align-items-center gap-3">
-                    <span>{t('to_modify_your_subscription_go_to')}</span>
-                    <a href="/user/subscription" rel="noopener noreferrer">
-                      {t('manage_subscription')}
-                    </a>
-                  </div>
-                </>
-              }
-            />
+            <div className="notification-list">
+              <Notification
+                type="success"
+                content={
+                  <>
+                    {subscription.payment.trialEndsAt && (
+                      <>
+                        <p>
+                          <Trans
+                            i18nKey="next_payment_of_x_collectected_on_y"
+                            values={{
+                              paymentAmmount: subscription.payment.displayPrice,
+                              collectionDate:
+                                subscription.payment.nextPaymentDueAt,
+                            }}
+                            shouldUnescape
+                            tOptions={{ interpolation: { escapeValue: true } }}
+                            components={[<strong />, <strong />]} // eslint-disable-line react/jsx-key
+                          />
+                        </p>
+                        <PriceExceptions subscription={subscription} />
+                      </>
+                    )}
+                    <div className="d-flex justify-content-between align-items-center gap-3">
+                      <span>{t('to_modify_your_subscription_go_to')}</span>
+                      <a href="/user/subscription" rel="noopener noreferrer">
+                        {t('manage_subscription')}
+                      </a>
+                    </div>
+                  </>
+                }
+              />
+            </div>
             {subscription.groupPlan && (
               <p>
                 <a
@@ -155,17 +157,19 @@ function UpgradeSuccess({
         <OLCol lg={{ span: 8, offset: 2 }}>
           <OLPageContentCard>
             <h2>{t('welcome_to_plan', { planName: planDisplayName })}</h2>
-            <OLNotification
-              type="success"
-              content={
-                <div className="d-flex justify-content-between align-items-center gap-3">
-                  <span>{t('youve_upgraded_your_subscription')}</span>
-                  <a href="/user/subscription" rel="noopener noreferrer">
-                    {t('manage_subscription')}
-                  </a>
-                </div>
-              }
-            />
+            <div className="notification-list">
+              <Notification
+                type="success"
+                content={
+                  <div className="d-flex justify-content-between align-items-center gap-3">
+                    <span>{t('youve_upgraded_your_subscription')}</span>
+                    <a href="/user/subscription" rel="noopener noreferrer">
+                      {t('manage_subscription')}
+                    </a>
+                  </div>
+                }
+              />
+            </div>
             <p>
               <Trans
                 i18nKey="next_payment_of_x_collectected_on_y"
diff --git a/services/web/frontend/js/features/word-count-modal/components/word-count-error.tsx b/services/web/frontend/js/features/word-count-modal/components/word-count-error.tsx
index c1fa97e7ea..9ae5b31b8d 100644
--- a/services/web/frontend/js/features/word-count-modal/components/word-count-error.tsx
+++ b/services/web/frontend/js/features/word-count-modal/components/word-count-error.tsx
@@ -1,10 +1,12 @@
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import { useTranslation } from 'react-i18next'
 
 export const WordCountError = () => {
   const { t } = useTranslation()
 
   return (
-    <OLNotification type="error" content={t('generic_something_went_wrong')} />
+    <div className="notification-list">
+      <Notification type="error" content={t('generic_something_went_wrong')} />
+    </div>
   )
 }
diff --git a/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx b/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx
index 9563ec754d..e206a9d537 100644
--- a/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx
+++ b/services/web/frontend/js/features/word-count-modal/components/word-counts-client.tsx
@@ -2,7 +2,7 @@ import { FC, useMemo } from 'react'
 import { WordCountData } from '@/features/word-count-modal/components/word-count-data'
 import { useTranslation } from 'react-i18next'
 import { Container, Row, Col, Form } from 'react-bootstrap'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 import usePersistedState from '@/shared/hooks/use-persisted-state'
 
 const numberFormat = new Intl.NumberFormat()
@@ -77,16 +77,17 @@ export const WordCountsClient: FC<{ data: WordCountData }> = ({ data }) => {
       {data.messages && (
         <Row>
           <Col xs={12}>
-            <OLNotification
-              type="error"
-              content={
-                <p style={{ whiteSpace: 'pre-wrap' }}>{data.messages}</p>
-              }
-            />
+            <div className="notification-list">
+              <Notification
+                type="error"
+                content={
+                  <p style={{ whiteSpace: 'pre-wrap' }}>{data.messages}</p>
+                }
+              />
+            </div>
           </Col>
         </Row>
       )}
-
       <Row className="mb-4">
         <table style={{ width: 'auto' }}>
           <thead>
@@ -138,19 +139,16 @@ export const WordCountsClient: FC<{ data: WordCountData }> = ({ data }) => {
           </tbody>
         </table>
       </Row>
-
       <Row className="border-top py-2">
         <Col xs={12}>
           <b>{t('headers')}:</b> {data.headers}
         </Col>
       </Row>
-
       <Row className="border-top py-2">
         <Col xs={12}>
           <b>{t('inline_math')}:</b> {data.mathInline}
         </Col>
       </Row>
-
       <Row className="border-top py-2 pb-0">
         <Col xs={12}>
           <b>{t('display_math')}:</b> {data.mathDisplay}
diff --git a/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx b/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx
index 37843e8360..4d0ddc15f3 100644
--- a/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx
+++ b/services/web/frontend/js/features/word-count-modal/components/word-counts.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { ServerWordCountData } from '@/features/word-count-modal/components/word-count-data'
 import { useTranslation } from 'react-i18next'
 import { Container, Row, Col } from 'react-bootstrap'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 export const WordCounts: FC<{
   data: ServerWordCountData
@@ -14,16 +14,17 @@ export const WordCounts: FC<{
       {data.messages && (
         <Row>
           <Col xs={12}>
-            <OLNotification
-              type="error"
-              content={
-                <p style={{ whiteSpace: 'pre-wrap' }}>{data.messages}</p>
-              }
-            />
+            <div className="notification-list">
+              <Notification
+                type="error"
+                content={
+                  <p style={{ whiteSpace: 'pre-wrap' }}>{data.messages}</p>
+                }
+              />
+            </div>
           </Col>
         </Row>
       )}
-
       <Row>
         <Col xs={4}>
           <div className="float-end">{t('total_words')}:</div>
@@ -36,14 +37,12 @@ export const WordCounts: FC<{
         </Col>
         <Col xs={6}>{data.headers}</Col>
       </Row>
-
       <Row>
         <Col xs={4}>
           <div className="float-end">{t('math_inline')}:</div>
         </Col>
         <Col xs={6}>{data.mathInline}</Col>
       </Row>
-
       <Row>
         <Col xs={4}>
           <div className="float-end">{t('math_display')}:</div>
diff --git a/services/web/frontend/js/shared/components/badge/badge-link.tsx b/services/web/frontend/js/shared/components/badge/badge-link.tsx
index 8cafbf32a1..0977659ded 100644
--- a/services/web/frontend/js/shared/components/badge/badge-link.tsx
+++ b/services/web/frontend/js/shared/components/badge/badge-link.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import type { MergeAndOverride } from '../../../../../types/utils'
-import Badge, { type BadgeProps } from './badge'
+import Badge, { type OLBadgeProps as BadgeProps } from '../ol/ol-badge'
 
 export type BadgeLinkProps = MergeAndOverride<
   BadgeProps,
diff --git a/services/web/frontend/js/shared/components/badge/badge.tsx b/services/web/frontend/js/shared/components/badge/badge.tsx
deleted file mode 100644
index 53edc782fc..0000000000
--- a/services/web/frontend/js/shared/components/badge/badge.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Badge as BSBadge, BadgeProps as BSBadgeProps } from 'react-bootstrap'
-import { MergeAndOverride } from '../../../../../types/utils'
-
-export type BadgeProps = MergeAndOverride<
-  BSBadgeProps,
-  {
-    prepend?: React.ReactNode
-    badgeContentRef?: React.RefObject<HTMLElement>
-  }
->
-
-function Badge({ prepend, children, badgeContentRef, ...rest }: BadgeProps) {
-  return (
-    <BSBadge {...rest}>
-      {prepend && <span className="badge-prepend">{prepend}</span>}
-      <span className="badge-content" ref={badgeContentRef}>
-        {children}
-      </span>
-    </BSBadge>
-  )
-}
-
-export default Badge
diff --git a/services/web/frontend/js/shared/components/button/button.tsx b/services/web/frontend/js/shared/components/button/button.tsx
deleted file mode 100644
index a850025cce..0000000000
--- a/services/web/frontend/js/shared/components/button/button.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { forwardRef } from 'react'
-import { Button as BS5Button } from 'react-bootstrap'
-import type { ButtonProps } from '@/shared/components/types/button-props'
-import classNames from 'classnames'
-import { useTranslation } from 'react-i18next'
-import MaterialIcon from '@/shared/components/material-icon'
-import OLSpinner from '../ol/ol-spinner'
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      children,
-      className,
-      leadingIcon,
-      isLoading = false,
-      loadingLabel,
-      trailingIcon,
-      variant = 'primary',
-      ...props
-    },
-    ref
-  ) => {
-    const { t } = useTranslation()
-
-    const buttonClassName = classNames('d-inline-grid', className, {
-      'button-loading': isLoading,
-    })
-
-    const loadingSpinnerClassName =
-      props.size === 'lg' ? 'loading-spinner-large' : 'loading-spinner-small'
-    const materialIconClassName =
-      props.size === 'lg' ? 'icon-large' : 'icon-small'
-
-    const leadingIconComponent =
-      leadingIcon && typeof leadingIcon === 'string' ? (
-        <MaterialIcon type={leadingIcon} className={materialIconClassName} />
-      ) : (
-        leadingIcon
-      )
-
-    const trailingIconComponent =
-      trailingIcon && typeof trailingIcon === 'string' ? (
-        <MaterialIcon type={trailingIcon} className={materialIconClassName} />
-      ) : (
-        trailingIcon
-      )
-
-    return (
-      <BS5Button
-        className={buttonClassName}
-        variant={variant}
-        {...props}
-        ref={ref}
-        disabled={isLoading || props.disabled}
-        data-ol-loading={isLoading}
-        role={undefined}
-      >
-        {isLoading && (
-          <span className="spinner-container">
-            <OLSpinner size="sm" className={loadingSpinnerClassName} />
-            <span className="visually-hidden">
-              {loadingLabel ?? t('loading')}
-            </span>
-          </span>
-        )}
-        <span className="button-content" aria-hidden={isLoading}>
-          {leadingIconComponent}
-          {children}
-          {trailingIconComponent}
-        </span>
-      </BS5Button>
-    )
-  }
-)
-Button.displayName = 'Button'
-
-export default Button
diff --git a/services/web/frontend/js/shared/components/button/icon-button.tsx b/services/web/frontend/js/shared/components/button/icon-button.tsx
deleted file mode 100644
index f26cb8bd32..0000000000
--- a/services/web/frontend/js/shared/components/button/icon-button.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { forwardRef } from 'react'
-import classNames from 'classnames'
-import MaterialIcon from '@/shared/components/material-icon'
-import Button from './button'
-import type { IconButtonProps } from '@/shared/components/types/icon-button-props'
-
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    {
-      accessibilityLabel,
-      icon,
-      isLoading = false,
-      size,
-      className,
-      unfilled,
-      ...props
-    },
-    ref
-  ) => {
-    const iconButtonClassName = classNames(className, {
-      'icon-button': !size,
-      'icon-button-small': size === 'sm',
-      'icon-button-large': size === 'lg',
-    })
-    const iconSizeClassName = size === 'lg' ? 'icon-large' : 'icon-small'
-    const materialIconClassName = classNames(iconSizeClassName, {
-      'button-content-hidden': isLoading,
-      unfilled,
-    })
-
-    return (
-      <Button
-        className={iconButtonClassName}
-        isLoading={isLoading}
-        aria-label={accessibilityLabel}
-        {...props}
-        ref={ref}
-      >
-        <MaterialIcon className={materialIconClassName} type={icon} />
-      </Button>
-    )
-  }
-)
-IconButton.displayName = 'IconButton'
-
-export default IconButton
diff --git a/services/web/frontend/js/shared/components/ol/ol-dropdown-menu-item.tsx b/services/web/frontend/js/shared/components/dropdown/dropdown-menu-item.tsx
similarity index 81%
rename from services/web/frontend/js/shared/components/ol/ol-dropdown-menu-item.tsx
rename to services/web/frontend/js/shared/components/dropdown/dropdown-menu-item.tsx
index ad89ca0e0d..3c0a5697d7 100644
--- a/services/web/frontend/js/shared/components/ol/ol-dropdown-menu-item.tsx
+++ b/services/web/frontend/js/shared/components/dropdown/dropdown-menu-item.tsx
@@ -3,7 +3,7 @@ import { DropdownItemProps } from '@/shared/components/types/dropdown-menu-props
 import DropdownListItem from '@/shared/components/dropdown/dropdown-list-item'
 
 // This represents a menu item. It wraps the item within an <li> element.
-function OLDropdownMenuItem(props: DropdownItemProps) {
+function DropdownMenuItem(props: DropdownItemProps) {
   return (
     <DropdownListItem>
       <DropdownItem {...props} />
@@ -11,4 +11,4 @@ function OLDropdownMenuItem(props: DropdownItemProps) {
   )
 }
 
-export default OLDropdownMenuItem
+export default DropdownMenuItem
diff --git a/services/web/frontend/js/shared/components/ds/ds-form-feedback.tsx b/services/web/frontend/js/shared/components/ds/ds-form-feedback.tsx
index e3955754e9..b2a8014d13 100644
--- a/services/web/frontend/js/shared/components/ds/ds-form-feedback.tsx
+++ b/services/web/frontend/js/shared/components/ds/ds-form-feedback.tsx
@@ -1,5 +1,5 @@
 import { Form } from 'react-bootstrap'
-import FormText from '@/shared/components/form/form-text'
+import OLFormText from '@/shared/components/ol/ol-form-text'
 import { ComponentProps } from 'react'
 
 export type FormFeedbackProps = Pick<
@@ -10,9 +10,9 @@ export type FormFeedbackProps = Pick<
 function DSFormFeedback(props: FormFeedbackProps) {
   return (
     <Form.Control.Feedback {...props}>
-      <FormText type={props.type === 'invalid' ? 'error' : 'success'}>
+      <OLFormText type={props.type === 'invalid' ? 'error' : 'success'}>
         {props.children}
-      </FormText>
+      </OLFormText>
     </Form.Control.Feedback>
   )
 }
diff --git a/services/web/frontend/js/shared/components/error-boundary-fallback.tsx b/services/web/frontend/js/shared/components/error-boundary-fallback.tsx
index 1f315e6f6f..96461e388a 100644
--- a/services/web/frontend/js/shared/components/error-boundary-fallback.tsx
+++ b/services/web/frontend/js/shared/components/error-boundary-fallback.tsx
@@ -1,13 +1,15 @@
 import { FC, ReactNode } from 'react'
 import { DefaultMessage } from './default-message'
-import OLNotification from '@/shared/components/ol/ol-notification'
+import Notification from '@/shared/components/notification'
 
 export const ErrorBoundaryFallback: FC<
   React.PropsWithChildren<{ modal?: ReactNode }>
 > = ({ children, modal }) => {
   return (
     <div className="error-boundary-alert">
-      <OLNotification type="error" content={children || <DefaultMessage />} />
+      <div className="notification-list">
+        <Notification type="error" content={children || <DefaultMessage />} />
+      </div>
       {modal}
     </div>
   )
diff --git a/services/web/frontend/js/shared/components/form/form-control.tsx b/services/web/frontend/js/shared/components/form/form-control.tsx
deleted file mode 100644
index 5a4ab4f00f..0000000000
--- a/services/web/frontend/js/shared/components/form/form-control.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { forwardRef } from 'react'
-import { Form, FormControlProps as BS5FormControlProps } from 'react-bootstrap'
-import classnames from 'classnames'
-
-export type OLBS5FormControlProps = BS5FormControlProps & {
-  prepend?: React.ReactNode
-  append?: React.ReactNode
-  rows?: number
-}
-
-const FormControl = forwardRef<HTMLInputElement, OLBS5FormControlProps>(
-  ({ prepend, append, className, ...props }, ref) => {
-    if (prepend || append) {
-      const wrapperClassNames = classnames('form-control-wrapper', {
-        'form-control-wrapper-sm': props.size === 'sm',
-        'form-control-wrapper-lg': props.size === 'lg',
-        'form-control-wrapper-disabled': props.disabled,
-      })
-
-      const formControlClassNames = classnames(className, {
-        'form-control-offset-start': prepend,
-        'form-control-offset-end': append,
-      })
-
-      return (
-        <div className={wrapperClassNames}>
-          {prepend && (
-            <span className="form-control-start-icon">{prepend}</span>
-          )}
-          <Form.Control
-            {...props}
-            className={formControlClassNames}
-            ref={ref}
-          />
-          {append && <span className="form-control-end-icon">{append}</span>}
-        </div>
-      )
-    }
-
-    return <Form.Control ref={ref} className={className} {...props} />
-  }
-)
-FormControl.displayName = 'FormControl'
-
-export default FormControl
diff --git a/services/web/frontend/js/shared/components/form/form-feedback.tsx b/services/web/frontend/js/shared/components/form/form-feedback.tsx
deleted file mode 100644
index 67efb6902b..0000000000
--- a/services/web/frontend/js/shared/components/form/form-feedback.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Form } from 'react-bootstrap'
-import FormText from '@/shared/components/form/form-text'
-import { ComponentProps } from 'react'
-
-export type FormFeedbackProps = Pick<
-  ComponentProps<typeof Form.Control.Feedback>,
-  'type' | 'className' | 'children'
-> & { unfilled?: boolean }
-
-function FormFeedback({ unfilled, ...props }: FormFeedbackProps) {
-  return (
-    <Form.Control.Feedback {...props}>
-      <FormText
-        type={props.type === 'invalid' ? 'error' : 'success'}
-        unfilled={unfilled}
-      >
-        {props.children}
-      </FormText>
-    </Form.Control.Feedback>
-  )
-}
-
-export default FormFeedback
diff --git a/services/web/frontend/js/shared/components/form/form-group.tsx b/services/web/frontend/js/shared/components/form/form-group.tsx
deleted file mode 100644
index 5807ef9839..0000000000
--- a/services/web/frontend/js/shared/components/form/form-group.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { forwardRef } from 'react'
-import { FormGroup as BS5FormGroup, FormGroupProps } from 'react-bootstrap'
-import classnames from 'classnames'
-
-const FormGroup = forwardRef<typeof BS5FormGroup, FormGroupProps>(
-  ({ className, ...props }, ref) => {
-    const classNames = classnames('form-group', className)
-
-    return <BS5FormGroup className={classNames} {...props} ref={ref} />
-  }
-)
-FormGroup.displayName = 'FormGroup'
-
-export default FormGroup
diff --git a/services/web/frontend/js/shared/components/form/form-text.tsx b/services/web/frontend/js/shared/components/form/form-text.tsx
deleted file mode 100644
index acc3bb312c..0000000000
--- a/services/web/frontend/js/shared/components/form/form-text.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Form, FormTextProps as BS5FormTextProps } from 'react-bootstrap'
-import MaterialIcon from '@/shared/components/material-icon'
-import classnames from 'classnames'
-import { MergeAndOverride } from '../../../../../types/utils'
-
-type TextType = 'default' | 'info' | 'success' | 'warning' | 'error'
-
-export type FormTextProps = MergeAndOverride<
-  BS5FormTextProps,
-  {
-    type?: TextType
-    unfilled?: boolean
-    marginless?: boolean
-  }
->
-
-const typeClassMap: Partial<Record<TextType, string>> = {
-  error: 'text-danger',
-  success: 'text-success',
-  warning: 'text-warning',
-}
-
-export const getFormTextClass = (type?: TextType) =>
-  typeClassMap[type || 'default']
-
-function FormTextIcon({
-  type,
-  unfilled,
-}: Pick<FormTextProps, 'type' | 'unfilled'>) {
-  switch (type) {
-    case 'info':
-      return unfilled ? (
-        <MaterialIcon type="info" className="text-info" unfilled />
-      ) : (
-        <MaterialIcon type="info" className="text-info" />
-      )
-    case 'success':
-      return unfilled ? (
-        <MaterialIcon type="check_circle" unfilled />
-      ) : (
-        <MaterialIcon type="check_circle" />
-      )
-    case 'warning':
-      return unfilled ? (
-        <MaterialIcon type="warning" unfilled />
-      ) : (
-        <MaterialIcon type="warning" />
-      )
-    case 'error':
-      return unfilled ? (
-        <MaterialIcon type="error" unfilled />
-      ) : (
-        <MaterialIcon type="error" />
-      )
-    default:
-      return null
-  }
-}
-
-function FormText({
-  type = 'default',
-  marginless,
-  children,
-  className,
-  unfilled,
-  ...rest
-}: FormTextProps) {
-  return (
-    <Form.Text
-      className={classnames(className, getFormTextClass(type), { marginless })}
-      {...rest}
-    >
-      <span className="form-text-inner">
-        <FormTextIcon type={type} unfilled={unfilled} />
-        <span>{children}</span>
-      </span>
-    </Form.Text>
-  )
-}
-
-export default FormText
diff --git a/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx b/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
index 10a2443692..708b133b9b 100644
--- a/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
+++ b/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
@@ -4,7 +4,7 @@ import OLBadge from '@/shared/components/ol/ol-badge'
 import { postJSON } from '@/infrastructure/fetch-json'
 import OLButton from '@/shared/components/ol/ol-button'
 import getMeta from '@/utils/meta'
-import Notification from '../notification'
+import Notification from '@/shared/components/notification'
 import { LabsEnableButton } from '@/shared/components/labs/labs-enable-button'
 
 export type LabsExperimentWidgetProps = {
diff --git a/services/web/frontend/js/shared/components/notification.tsx b/services/web/frontend/js/shared/components/notification.tsx
index 40bbc03004..87f808b01d 100644
--- a/services/web/frontend/js/shared/components/notification.tsx
+++ b/services/web/frontend/js/shared/components/notification.tsx
@@ -3,7 +3,7 @@
 import classNames from 'classnames'
 import React, { ReactElement, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import MaterialIcon from './material-icon'
+import MaterialIcon from '@/shared/components/material-icon'
 
 export type NotificationType =
   | 'info'
@@ -62,7 +62,7 @@ export function NotificationIcon({
   )
 }
 
-function Notification({
+export default function Notification({
   action,
   ariaLive,
   className = '',
@@ -140,5 +140,3 @@ function Notification({
     </div>
   )
 }
-
-export default Notification
diff --git a/services/web/frontend/js/shared/components/ol/ol-badge.tsx b/services/web/frontend/js/shared/components/ol/ol-badge.tsx
index b9aefbb91e..c6aec926ea 100644
--- a/services/web/frontend/js/shared/components/ol/ol-badge.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-badge.tsx
@@ -1,7 +1,16 @@
-import Badge from '@/shared/components/badge/badge'
+import { Badge as BSBadge, BadgeProps as BSBadgeProps } from 'react-bootstrap'
+import { MergeAndOverride } from '../../../../../types/utils'
 
-function OLBadge(props: React.ComponentProps<typeof Badge>) {
-  let { bg, text, ...rest } = props
+export type OLBadgeProps = MergeAndOverride<
+  BSBadgeProps,
+  {
+    prepend?: React.ReactNode
+    badgeContentRef?: React.RefObject<HTMLElement>
+  }
+>
+
+function OLBadge(props: OLBadgeProps) {
+  let { bg, text, prepend, children, badgeContentRef, ...rest } = props
 
   // For warning badges, use a light background by default. We still want the
   // Bootstrap warning colour to be dark for text though, so make an
@@ -11,7 +20,14 @@ function OLBadge(props: React.ComponentProps<typeof Badge>) {
     text = 'warning'
   }
 
-  return <Badge bg={bg} text={text} {...rest} />
+  return (
+    <BSBadge bg={bg} text={text} {...rest}>
+      {prepend && <span className="badge-prepend">{prepend}</span>}
+      <span className="badge-content" ref={badgeContentRef}>
+        {children}
+      </span>
+    </BSBadge>
+  )
 }
 
 export default OLBadge
diff --git a/services/web/frontend/js/shared/components/ol/ol-button.tsx b/services/web/frontend/js/shared/components/ol/ol-button.tsx
index e8f284414b..3e6b43cb91 100644
--- a/services/web/frontend/js/shared/components/ol/ol-button.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-button.tsx
@@ -1,12 +1,79 @@
 import { forwardRef } from 'react'
+import { Button } from 'react-bootstrap'
 import type { ButtonProps } from '@/shared/components/types/button-props'
-import Button from '../button/button'
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import MaterialIcon from '@/shared/components/material-icon'
+import OLSpinner from './ol-spinner'
 
 export type OLButtonProps = ButtonProps
 
-const OLButton = forwardRef<HTMLButtonElement, OLButtonProps>((props, ref) => {
-  return <Button {...props} ref={ref} />
-})
+const OLButton = forwardRef<HTMLButtonElement, OLButtonProps>(
+  (
+    {
+      children,
+      className,
+      leadingIcon,
+      isLoading = false,
+      loadingLabel,
+      trailingIcon,
+      variant = 'primary',
+      ...props
+    },
+    ref
+  ) => {
+    const { t } = useTranslation()
+
+    const buttonClassName = classNames('d-inline-grid', className, {
+      'button-loading': isLoading,
+    })
+
+    const loadingSpinnerClassName =
+      props.size === 'lg' ? 'loading-spinner-large' : 'loading-spinner-small'
+    const materialIconClassName =
+      props.size === 'lg' ? 'icon-large' : 'icon-small'
+
+    const leadingIconComponent =
+      leadingIcon && typeof leadingIcon === 'string' ? (
+        <MaterialIcon type={leadingIcon} className={materialIconClassName} />
+      ) : (
+        leadingIcon
+      )
+
+    const trailingIconComponent =
+      trailingIcon && typeof trailingIcon === 'string' ? (
+        <MaterialIcon type={trailingIcon} className={materialIconClassName} />
+      ) : (
+        trailingIcon
+      )
+
+    return (
+      <Button
+        className={buttonClassName}
+        variant={variant}
+        {...props}
+        ref={ref}
+        disabled={isLoading || props.disabled}
+        data-ol-loading={isLoading}
+        role={undefined}
+      >
+        {isLoading && (
+          <span className="spinner-container">
+            <OLSpinner size="sm" className={loadingSpinnerClassName} />
+            <span className="visually-hidden">
+              {loadingLabel ?? t('loading')}
+            </span>
+          </span>
+        )}
+        <span className="button-content" aria-hidden={isLoading}>
+          {leadingIconComponent}
+          {children}
+          {trailingIconComponent}
+        </span>
+      </Button>
+    )
+  }
+)
 
 OLButton.displayName = 'OLButton'
 
diff --git a/services/web/frontend/js/shared/components/ol/ol-form-checkbox.tsx b/services/web/frontend/js/shared/components/ol/ol-form-checkbox.tsx
index 825a3bb01f..863238cb17 100644
--- a/services/web/frontend/js/shared/components/ol/ol-form-checkbox.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-form-checkbox.tsx
@@ -1,6 +1,6 @@
 import { Form, FormCheckProps } from 'react-bootstrap'
 import { MergeAndOverride } from '../../../../../types/utils'
-import FormText from '../form/form-text'
+import { FormText } from './ol-form-text'
 
 type OLFormCheckboxProps = MergeAndOverride<
   FormCheckProps,
diff --git a/services/web/frontend/js/shared/components/ol/ol-form-control.tsx b/services/web/frontend/js/shared/components/ol/ol-form-control.tsx
index eb1a19f018..598e26ebaa 100644
--- a/services/web/frontend/js/shared/components/ol/ol-form-control.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-form-control.tsx
@@ -1,26 +1,51 @@
-import { forwardRef } from 'react'
-import FormControl, {
-  type OLBS5FormControlProps,
-} from '@/shared/components/form/form-control'
-import OLSpinner from '@/shared/components/ol/ol-spinner'
+import React, { forwardRef } from 'react'
+import { Form, FormControlProps as FormControlProps } from 'react-bootstrap'
+import classnames from 'classnames'
+import OLSpinner from './ol-spinner'
 
-type OLFormControlProps = OLBS5FormControlProps & {
+export type OLFormControlProps = FormControlProps & {
+  prepend?: React.ReactNode
+  append?: React.ReactNode
+  rows?: number
   'data-ol-dirty'?: unknown
   'main-field'?: any // For the CM6's benefit in the editor search panel
   loading?: boolean
 }
 
 const OLFormControl = forwardRef<HTMLInputElement, OLFormControlProps>(
-  (props, ref) => {
-    const { append, ...rest } = props
+  ({ prepend, append, loading, className, ...props }, ref) => {
+    const resolvedAppend = loading ? <OLSpinner size="sm" /> : append
 
-    return (
-      <FormControl
-        ref={ref}
-        {...rest}
-        append={rest.loading ? <OLSpinner size="sm" /> : append}
-      />
-    )
+    if (prepend || resolvedAppend) {
+      const wrapperClassNames = classnames('form-control-wrapper', {
+        'form-control-wrapper-sm': props.size === 'sm',
+        'form-control-wrapper-lg': props.size === 'lg',
+        'form-control-wrapper-disabled': props.disabled,
+      })
+
+      const formControlClassNames = classnames(className, {
+        'form-control-offset-start': prepend,
+        'form-control-offset-end': resolvedAppend,
+      })
+
+      return (
+        <div className={wrapperClassNames}>
+          {prepend && (
+            <span className="form-control-start-icon">{prepend}</span>
+          )}
+          <Form.Control
+            {...props}
+            className={formControlClassNames}
+            ref={ref}
+          />
+          {resolvedAppend && (
+            <span className="form-control-end-icon">{resolvedAppend}</span>
+          )}
+        </div>
+      )
+    }
+
+    return <Form.Control ref={ref} className={className} {...props} />
   }
 )
 OLFormControl.displayName = 'OLFormControl'
diff --git a/services/web/frontend/js/shared/components/ol/ol-form-feedback.tsx b/services/web/frontend/js/shared/components/ol/ol-form-feedback.tsx
index 8ebecd2803..9801074f54 100644
--- a/services/web/frontend/js/shared/components/ol/ol-form-feedback.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-form-feedback.tsx
@@ -1,9 +1,23 @@
-import FormFeedback, {
-  FormFeedbackProps,
-} from '@/shared/components/form/form-feedback'
+import { Form } from 'react-bootstrap'
+import { FormText } from './ol-form-text'
+import { ComponentProps } from 'react'
 
-function OLFormFeedback(props: FormFeedbackProps) {
-  return <FormFeedback {...props} />
+export type OLFormFeedbackProps = Pick<
+  ComponentProps<typeof Form.Control.Feedback>,
+  'type' | 'className' | 'children'
+> & { unfilled?: boolean }
+
+function OLFormFeedback({ unfilled, ...props }: OLFormFeedbackProps) {
+  return (
+    <Form.Control.Feedback {...props}>
+      <FormText
+        type={props.type === 'invalid' ? 'error' : 'success'}
+        unfilled={unfilled}
+      >
+        {props.children}
+      </FormText>
+    </Form.Control.Feedback>
+  )
 }
 
 export default OLFormFeedback
diff --git a/services/web/frontend/js/shared/components/ol/ol-form-group.tsx b/services/web/frontend/js/shared/components/ol/ol-form-group.tsx
index e9ea98ba8a..fd471dde5b 100644
--- a/services/web/frontend/js/shared/components/ol/ol-form-group.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-form-group.tsx
@@ -1,8 +1,10 @@
-import { FormGroupProps } from 'react-bootstrap'
-import FormGroup from '@/shared/components/form/form-group'
+import { FormGroup, FormGroupProps } from 'react-bootstrap'
+import classnames from 'classnames'
 
-function OLFormGroup(props: FormGroupProps) {
-  return <FormGroup {...props} />
+function OLFormGroup({ className, ...props }: FormGroupProps) {
+  return (
+    <FormGroup className={classnames('form-group', className)} {...props} />
+  )
 }
 
 export default OLFormGroup
diff --git a/services/web/frontend/js/shared/components/ol/ol-form-text.tsx b/services/web/frontend/js/shared/components/ol/ol-form-text.tsx
index caed20d4e9..f5e1d2f842 100644
--- a/services/web/frontend/js/shared/components/ol/ol-form-text.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-form-text.tsx
@@ -1,7 +1,87 @@
-import FormText, { FormTextProps } from '@/shared/components/form/form-text'
+import { Form, FormTextProps as FormTextProps } from 'react-bootstrap'
+import MaterialIcon from '@/shared/components/material-icon'
+import classnames from 'classnames'
+import { MergeAndOverride } from '../../../../../types/utils'
 
-function OLFormText({ as = 'div', ...rest }: FormTextProps) {
-  return <FormText {...rest} as={as} />
+type TextType = 'default' | 'info' | 'success' | 'warning' | 'error'
+
+export type OLFormTextProps = MergeAndOverride<
+  FormTextProps,
+  {
+    type?: TextType
+    unfilled?: boolean
+    marginless?: boolean
+  }
+>
+
+const typeClassMap: Partial<Record<TextType, string>> = {
+  error: 'text-danger',
+  success: 'text-success',
+  warning: 'text-warning',
+}
+
+export const getFormTextClass = (type?: TextType) =>
+  typeClassMap[type || 'default']
+
+function FormTextIcon({
+  type,
+  unfilled,
+}: Pick<OLFormTextProps, 'type' | 'unfilled'>) {
+  switch (type) {
+    case 'info':
+      return unfilled ? (
+        <MaterialIcon type="info" className="text-info" unfilled />
+      ) : (
+        <MaterialIcon type="info" className="text-info" />
+      )
+    case 'success':
+      return unfilled ? (
+        <MaterialIcon type="check_circle" unfilled />
+      ) : (
+        <MaterialIcon type="check_circle" />
+      )
+    case 'warning':
+      return unfilled ? (
+        <MaterialIcon type="warning" unfilled />
+      ) : (
+        <MaterialIcon type="warning" />
+      )
+    case 'error':
+      return unfilled ? (
+        <MaterialIcon type="error" unfilled />
+      ) : (
+        <MaterialIcon type="error" />
+      )
+    default:
+      return null
+  }
+}
+
+// Base component without a default `as` — exported for use by the backward-compat shim
+export function FormText({
+  type = 'default',
+  marginless,
+  children,
+  className,
+  unfilled,
+  ...rest
+}: OLFormTextProps) {
+  return (
+    <Form.Text
+      className={classnames(className, getFormTextClass(type), { marginless })}
+      {...rest}
+    >
+      <span className="form-text-inner">
+        <FormTextIcon type={type} unfilled={unfilled} />
+        <span>{children}</span>
+      </span>
+    </Form.Text>
+  )
+}
+
+// OL component defaults to rendering as a <div>
+function OLFormText({ as = 'div', ...rest }: OLFormTextProps) {
+  return <FormText as={as} {...rest} />
 }
 
 export default OLFormText
diff --git a/services/web/frontend/js/shared/components/ol/ol-icon-button.tsx b/services/web/frontend/js/shared/components/ol/ol-icon-button.tsx
index b7db1d527d..f8608551ab 100644
--- a/services/web/frontend/js/shared/components/ol/ol-icon-button.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-icon-button.tsx
@@ -1,13 +1,48 @@
 import { forwardRef } from 'react'
+import classNames from 'classnames'
+import MaterialIcon from '@/shared/components/material-icon'
+import OLButton from './ol-button'
 import type { IconButtonProps } from '@/shared/components/types/icon-button-props'
-import IconButton from '../button/icon-button'
 
 export type OLIconButtonProps = IconButtonProps
 
 const OLIconButton = forwardRef<HTMLButtonElement, OLIconButtonProps>(
-  (props, ref) => {
-    // BS5 tooltip relies on the ref
-    return <IconButton {...props} ref={ref} />
+  (
+    {
+      accessibilityLabel,
+      icon,
+      isLoading = false,
+      loadingLabel,
+      size,
+      className,
+      unfilled,
+      ...props
+    },
+    ref
+  ) => {
+    const iconButtonClassName = classNames(className, {
+      'icon-button': !size,
+      'icon-button-small': size === 'sm',
+      'icon-button-large': size === 'lg',
+    })
+    const iconSizeClassName = size === 'lg' ? 'icon-large' : 'icon-small'
+    const materialIconClassName = classNames(iconSizeClassName, {
+      'button-content-hidden': isLoading,
+      unfilled,
+    })
+
+    return (
+      <OLButton
+        className={iconButtonClassName}
+        isLoading={isLoading}
+        loadingLabel={loadingLabel}
+        aria-label={accessibilityLabel}
+        {...props}
+        ref={ref}
+      >
+        <MaterialIcon className={materialIconClassName} type={icon} />
+      </OLButton>
+    )
   }
 )
 OLIconButton.displayName = 'OLIconButton'
diff --git a/services/web/frontend/js/shared/components/ol/ol-notification.tsx b/services/web/frontend/js/shared/components/ol/ol-notification.tsx
deleted file mode 100644
index 7ca811a796..0000000000
--- a/services/web/frontend/js/shared/components/ol/ol-notification.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Notification from '@/shared/components/notification'
-
-function OLNotification(props: React.ComponentProps<typeof Notification>) {
-  return (
-    <div className="notification-list">
-      <Notification {...props} />
-    </div>
-  )
-}
-
-export default OLNotification
diff --git a/services/web/frontend/js/shared/components/ol/ol-table.tsx b/services/web/frontend/js/shared/components/ol/ol-table.tsx
index f1ed2dbc78..617e41cfc0 100644
--- a/services/web/frontend/js/shared/components/ol/ol-table.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-table.tsx
@@ -1,7 +1,43 @@
-import Table from '@/shared/components/table'
+import { Table } from 'react-bootstrap'
+import classnames from 'classnames'
 
-function OLTable(props: React.ComponentProps<typeof Table>) {
-  return <Table {...props} />
+export function TableContainer({
+  responsive,
+  bordered,
+  striped,
+  children,
+}: React.ComponentProps<typeof Table>) {
+  return (
+    <div
+      className={classnames('table-container', {
+        'table-container-bordered': bordered,
+        'table-responsive': responsive,
+        'table-striped': striped,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+type OLTableProps = React.ComponentProps<typeof Table> & {
+  container?: boolean
+}
+
+function OLTable({
+  container = true,
+  responsive,
+  bordered,
+  striped,
+  ...rest
+}: OLTableProps) {
+  return container ? (
+    <TableContainer responsive={responsive} bordered={bordered}>
+      <Table striped={striped} {...rest} />
+    </TableContainer>
+  ) : (
+    <Table {...rest} />
+  )
 }
 
 export default OLTable
diff --git a/services/web/frontend/js/shared/components/ol/ol-tag.tsx b/services/web/frontend/js/shared/components/ol/ol-tag.tsx
index 816574035f..7223387d33 100644
--- a/services/web/frontend/js/shared/components/ol/ol-tag.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-tag.tsx
@@ -1,11 +1,73 @@
-import Tag from '@/shared/components/tag'
+import { useTranslation } from 'react-i18next'
+import { Badge, BadgeProps } from 'react-bootstrap'
+import MaterialIcon from '@/shared/components/material-icon'
+import { MergeAndOverride } from '../../../../../types/utils'
+import classnames from 'classnames'
 import { forwardRef } from 'react'
 
-type OLTagProps = React.ComponentProps<typeof Tag>
+type OLTagProps = MergeAndOverride<
+  BadgeProps,
+  {
+    prepend?: React.ReactNode
+    contentProps?: React.ComponentProps<'button'>
+    closeBtnProps?: React.ComponentProps<'button'>
+  }
+>
 
-const OLTag = forwardRef<HTMLElement, OLTagProps>((props: OLTagProps, ref) => {
-  return <Tag ref={ref} {...props} />
-})
+const OLTag = forwardRef<HTMLElement, OLTagProps>(
+  (
+    { prepend, children, contentProps, closeBtnProps, className, ...rest },
+    ref
+  ) => {
+    const { t } = useTranslation()
+
+    const content = (
+      <>
+        {prepend && <span className="badge-prepend">{prepend}</span>}
+        <span className="badge-content">{children}</span>
+      </>
+    )
+
+    return (
+      <Badge
+        ref={ref}
+        bg="light"
+        className={classnames('badge-tag', className)}
+        {...rest}
+      >
+        {contentProps?.onClick ? (
+          <button
+            type="button"
+            {...contentProps}
+            className={classnames(
+              'badge-tag-content badge-tag-content-btn',
+              contentProps.className
+            )}
+          >
+            {content}
+          </button>
+        ) : (
+          <span
+            {...contentProps}
+            className={classnames('badge-tag-content', contentProps?.className)}
+          >
+            {content}
+          </span>
+        )}
+        {closeBtnProps && (
+          <button
+            type="button"
+            className="badge-close"
+            aria-label={t('remove_tag', { tagName: children })}
+            {...closeBtnProps}
+          >
+            <MaterialIcon className="badge-close-icon" type="close" />
+          </button>
+        )}
+      </Badge>
+    )
+  }
+)
 
 OLTag.displayName = 'OLTag'
 
diff --git a/services/web/frontend/js/shared/components/ol/ol-toast-container.tsx b/services/web/frontend/js/shared/components/ol/ol-toast-container.tsx
index 26c0ff3545..01cc7d3fcd 100644
--- a/services/web/frontend/js/shared/components/ol/ol-toast-container.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-toast-container.tsx
@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react'
-import { ToastContainer as BS5ToastContainer } from 'react-bootstrap'
+import { ToastContainer } from 'react-bootstrap'
 
 type OLToastContainerProps = {
   style?: CSSProperties
@@ -10,8 +10,8 @@ export const OLToastContainer: FC<
   React.PropsWithChildren<OLToastContainerProps>
 > = ({ children, className, style }) => {
   return (
-    <BS5ToastContainer className={className} style={style}>
+    <ToastContainer className={className} style={style}>
       {children}
-    </BS5ToastContainer>
+    </ToastContainer>
   )
 }
diff --git a/services/web/frontend/js/shared/components/ol/ol-toast.tsx b/services/web/frontend/js/shared/components/ol/ol-toast.tsx
index 829819b02e..4cab52c09b 100644
--- a/services/web/frontend/js/shared/components/ol/ol-toast.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-toast.tsx
@@ -1,6 +1,9 @@
 import classNames from 'classnames'
-import { Toast as BS5Toast } from 'react-bootstrap'
-import { NotificationIcon, NotificationType } from '../notification'
+import { Toast } from 'react-bootstrap'
+import {
+  NotificationIcon,
+  NotificationType,
+} from '@/shared/components/notification'
 import { useTranslation } from 'react-i18next'
 import MaterialIcon from '../material-icon'
 import { ReactNode, useCallback, useState } from 'react'
@@ -73,7 +76,7 @@ export const OLToast = ({
     </div>
   )
   return (
-    <BS5Toast
+    <Toast
       onClose={handleClose}
       autohide={autoHide}
       onExited={handleOnHidden}
@@ -81,6 +84,6 @@ export const OLToast = ({
       show={show}
     >
       {toastElement}
-    </BS5Toast>
+    </Toast>
   )
 }
diff --git a/services/web/frontend/js/shared/components/ol/ol-tooltip.tsx b/services/web/frontend/js/shared/components/ol/ol-tooltip.tsx
index 6744d81664..bb44951df2 100644
--- a/services/web/frontend/js/shared/components/ol/ol-tooltip.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-tooltip.tsx
@@ -1,7 +1,118 @@
-import Tooltip from '@/shared/components/tooltip'
+import {
+  cloneElement,
+  useEffect,
+  forwardRef,
+  useState,
+  useCallback,
+} from 'react'
+import {
+  OverlayTrigger,
+  OverlayTriggerProps,
+  Tooltip as BSTooltip,
+  TooltipProps as BSTooltipProps,
+} from 'react-bootstrap'
+import { callFnsInSequence } from '@/utils/functions'
 
-function OLTooltip(props: React.ComponentProps<typeof Tooltip>) {
-  return <Tooltip {...props} />
+const DEFAULT_DELAY_SHOW = 300
+// Slightly lower value avoids flickering when an adjacent tooltip is shown before the previous one hides
+const DEFAULT_DELAY_HIDE = 290
+
+type OverlayProps = Omit<OverlayTriggerProps, 'overlay' | 'children'>
+
+const UpdatingTooltip = forwardRef<HTMLDivElement, BSTooltipProps>(
+  ({ popper, children, show: _, ...props }, ref) => {
+    useEffect(() => {
+      popper?.scheduleUpdate?.()
+    }, [children, popper])
+
+    return (
+      <BSTooltip ref={ref} {...props}>
+        {children}
+      </BSTooltip>
+    )
+  }
+)
+UpdatingTooltip.displayName = 'UpdatingTooltip'
+
+export type OLTooltipProps = {
+  description: React.ReactNode
+  id: string
+  overlayProps?: OverlayProps
+  tooltipProps?: BSTooltipProps
+  hidden?: boolean
+  children: React.ReactElement
+}
+
+function OLTooltip({
+  id,
+  description,
+  children,
+  tooltipProps,
+  overlayProps,
+  hidden,
+}: OLTooltipProps) {
+  const [show, setShow] = useState(false)
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (show && e.key === 'Escape') {
+        setShow(false)
+        e.stopPropagation()
+      }
+    },
+    [show, setShow]
+  )
+
+  useEffect(() => {
+    if (hidden) {
+      setShow(false)
+    }
+  }, [hidden])
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [handleKeyDown])
+
+  const hideTooltip = (e: React.MouseEvent) => {
+    if (e.currentTarget instanceof HTMLElement) {
+      e.currentTarget.blur()
+    }
+    setShow(false)
+  }
+
+  const delay = overlayProps?.delay
+  let delayShow = DEFAULT_DELAY_SHOW
+  let delayHide = DEFAULT_DELAY_HIDE
+  if (delay !== undefined) {
+    delayShow = typeof delay === 'number' ? delay : delay.show
+    delayHide = typeof delay === 'number' ? Math.max(delay - 10, 0) : delay.hide
+  }
+
+  return (
+    <OverlayTrigger
+      overlay={
+        <UpdatingTooltip
+          id={`${id}-tooltip`}
+          {...tooltipProps}
+          style={{ display: hidden ? 'none' : 'block' }}
+        >
+          {description}
+        </UpdatingTooltip>
+      }
+      {...overlayProps}
+      delay={{ show: delayShow, hide: delayHide }}
+      placement={overlayProps?.placement || 'top'}
+      show={hidden ? false : show}
+      onToggle={hidden ? undefined : setShow}
+    >
+      {overlayProps?.trigger === 'click'
+        ? children
+        : cloneElement(children, {
+            onClick: callFnsInSequence(children.props.onClick, hideTooltip),
+          })}
+    </OverlayTrigger>
+  )
 }
 
 export default OLTooltip
diff --git a/services/web/frontend/js/shared/components/select.tsx b/services/web/frontend/js/shared/components/select.tsx
index 6daac46a72..8c9277568f 100644
--- a/services/web/frontend/js/shared/components/select.tsx
+++ b/services/web/frontend/js/shared/components/select.tsx
@@ -11,7 +11,7 @@ import classNames from 'classnames'
 import { useSelect } from 'downshift'
 import { useTranslation } from 'react-i18next'
 import { Form, OverlayProps } from 'react-bootstrap'
-import FormControl from '@/shared/components/form/form-control'
+import OLFormControl from '@/shared/components/ol/ol-form-control'
 import MaterialIcon from '@/shared/components/material-icon'
 import { CaretUp, CaretDown, Check } from '@phosphor-icons/react'
 import { DropdownItem } from '@/shared/components/dropdown/dropdown-menu'
@@ -101,7 +101,7 @@ export type SelectProps<T> = {
   dataTestId?: string
   // CIAM-specific layout
   isCiam?: boolean
-  size?: React.ComponentProps<typeof FormControl>['size']
+  size?: React.ComponentProps<typeof OLFormControl>['size']
   // Renders the menu in a portal so it escapes overflow-clipping ancestors.
   portal?: boolean
   // Element the portaled menu is rendered into (only used with `portal`).
@@ -312,7 +312,7 @@ export const Select = <T,>({
           {loading && <OLSpinner size="sm" />}
         </Form.Label>
       ) : null}
-      <FormControl
+      <OLFormControl
         data-testid={dataTestId}
         {...getToggleButtonProps({
           disabled,
diff --git a/services/web/frontend/js/shared/components/table.tsx b/services/web/frontend/js/shared/components/table.tsx
deleted file mode 100644
index 176d6f737c..0000000000
--- a/services/web/frontend/js/shared/components/table.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Table as BS5Table } from 'react-bootstrap'
-import classnames from 'classnames'
-
-export function TableContainer({
-  responsive,
-  bordered,
-  striped,
-  children,
-}: React.ComponentProps<typeof BS5Table>) {
-  return (
-    <div
-      className={classnames('table-container', {
-        'table-container-bordered': bordered,
-        'table-responsive': responsive,
-        'table-striped': striped,
-      })}
-    >
-      {children}
-    </div>
-  )
-}
-
-type TableProps = React.ComponentProps<typeof BS5Table> & {
-  container?: boolean
-}
-
-function Table({
-  container = true,
-  responsive,
-  bordered,
-  striped,
-  ...rest
-}: TableProps) {
-  return container ? (
-    <TableContainer responsive={responsive} bordered={bordered}>
-      <BS5Table striped={striped} {...rest} />
-    </TableContainer>
-  ) : (
-    <BS5Table {...rest} />
-  )
-}
-
-export default Table
diff --git a/services/web/frontend/js/shared/components/ol/ol-tag-icon.tsx b/services/web/frontend/js/shared/components/tag-icon.tsx
similarity index 72%
rename from services/web/frontend/js/shared/components/ol/ol-tag-icon.tsx
rename to services/web/frontend/js/shared/components/tag-icon.tsx
index 4a2fbadec9..dde9e0782f 100644
--- a/services/web/frontend/js/shared/components/ol/ol-tag-icon.tsx
+++ b/services/web/frontend/js/shared/components/tag-icon.tsx
@@ -1,5 +1,5 @@
 import MaterialIcon from '@/shared/components/material-icon'
 
-export default function OLTagIcon() {
+export default function TagIcon() {
   return <MaterialIcon type="sell" />
 }
diff --git a/services/web/frontend/js/shared/components/tag.tsx b/services/web/frontend/js/shared/components/tag.tsx
deleted file mode 100644
index 76b8cd50b4..0000000000
--- a/services/web/frontend/js/shared/components/tag.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { Badge, BadgeProps } from 'react-bootstrap'
-import MaterialIcon from '@/shared/components/material-icon'
-import { MergeAndOverride } from '../../../../types/utils'
-import classnames from 'classnames'
-import { forwardRef } from 'react'
-
-type TagProps = MergeAndOverride<
-  BadgeProps,
-  {
-    prepend?: React.ReactNode
-    contentProps?: React.ComponentProps<'button'>
-    closeBtnProps?: React.ComponentProps<'button'>
-  }
->
-
-const Tag = forwardRef<HTMLElement, TagProps>(
-  (
-    { prepend, children, contentProps, closeBtnProps, className, ...rest },
-    ref
-  ) => {
-    const { t } = useTranslation()
-
-    const content = (
-      <>
-        {prepend && <span className="badge-prepend">{prepend}</span>}
-        <span className="badge-content">{children}</span>
-      </>
-    )
-
-    return (
-      <Badge
-        ref={ref}
-        bg="light"
-        className={classnames('badge-tag', className)}
-        {...rest}
-      >
-        {contentProps?.onClick ? (
-          <button
-            type="button"
-            {...contentProps}
-            className={classnames(
-              'badge-tag-content badge-tag-content-btn',
-              contentProps.className
-            )}
-          >
-            {content}
-          </button>
-        ) : (
-          <span
-            {...contentProps}
-            className={classnames('badge-tag-content', contentProps?.className)}
-          >
-            {content}
-          </span>
-        )}
-        {closeBtnProps && (
-          <button
-            type="button"
-            className="badge-close"
-            aria-label={t('remove_tag', { tagName: children })}
-            {...closeBtnProps}
-          >
-            <MaterialIcon className="badge-close-icon" type="close" />
-          </button>
-        )}
-      </Badge>
-    )
-  }
-)
-
-Tag.displayName = 'Tag'
-
-export default Tag
diff --git a/services/web/frontend/js/shared/components/tooltip.tsx b/services/web/frontend/js/shared/components/tooltip.tsx
deleted file mode 100644
index 971e3c0ecb..0000000000
--- a/services/web/frontend/js/shared/components/tooltip.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {
-  cloneElement,
-  useEffect,
-  forwardRef,
-  useState,
-  useCallback,
-} from 'react'
-import {
-  OverlayTrigger,
-  OverlayTriggerProps,
-  Tooltip as BSTooltip,
-  TooltipProps as BSTooltipProps,
-} from 'react-bootstrap'
-import { callFnsInSequence } from '@/utils/functions'
-
-const DEFAULT_DELAY_SHOW = 300
-// Slightly lower value avoids flickering when an adjacent tooltip is shown before the previous one hides
-const DEFAULT_DELAY_HIDE = 290
-
-type OverlayProps = Omit<OverlayTriggerProps, 'overlay' | 'children'>
-
-const UpdatingTooltip = forwardRef<HTMLDivElement, BSTooltipProps>(
-  ({ popper, children, show: _, ...props }, ref) => {
-    useEffect(() => {
-      popper?.scheduleUpdate?.()
-    }, [children, popper])
-
-    return (
-      <BSTooltip ref={ref} {...props}>
-        {children}
-      </BSTooltip>
-    )
-  }
-)
-UpdatingTooltip.displayName = 'UpdatingTooltip'
-
-export type TooltipProps = {
-  description: React.ReactNode
-  id: string
-  overlayProps?: OverlayProps
-  tooltipProps?: BSTooltipProps
-  hidden?: boolean
-  children: React.ReactElement
-}
-
-function Tooltip({
-  id,
-  description,
-  children,
-  tooltipProps,
-  overlayProps,
-  hidden,
-}: TooltipProps) {
-  const [show, setShow] = useState(false)
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (show && e.key === 'Escape') {
-        setShow(false)
-        e.stopPropagation()
-      }
-    },
-    [show, setShow]
-  )
-
-  useEffect(() => {
-    if (hidden) {
-      setShow(false)
-    }
-  }, [hidden])
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [handleKeyDown])
-
-  const hideTooltip = (e: React.MouseEvent) => {
-    if (e.currentTarget instanceof HTMLElement) {
-      e.currentTarget.blur()
-    }
-    setShow(false)
-  }
-
-  const delay = overlayProps?.delay
-  let delayShow = DEFAULT_DELAY_SHOW
-  let delayHide = DEFAULT_DELAY_HIDE
-  if (delay !== undefined) {
-    delayShow = typeof delay === 'number' ? delay : delay.show
-    delayHide = typeof delay === 'number' ? Math.max(delay - 10, 0) : delay.hide
-  }
-
-  return (
-    <OverlayTrigger
-      overlay={
-        <UpdatingTooltip
-          id={`${id}-tooltip`}
-          {...tooltipProps}
-          style={{ display: hidden ? 'none' : 'block' }}
-        >
-          {description}
-        </UpdatingTooltip>
-      }
-      {...overlayProps}
-      delay={{ show: delayShow, hide: delayHide }}
-      placement={overlayProps?.placement || 'top'}
-      show={hidden ? false : show}
-      onToggle={hidden ? undefined : setShow}
-    >
-      {overlayProps?.trigger === 'click'
-        ? children
-        : cloneElement(children, {
-            onClick: callFnsInSequence(children.props.onClick, hideTooltip),
-          })}
-    </OverlayTrigger>
-  )
-}
-
-export default Tooltip
diff --git a/services/web/modules/full-project-search/frontend/js/components/full-project-search-button.tsx b/services/web/modules/full-project-search/frontend/js/components/full-project-search-button.tsx
index 6ee6a06a41..7752c7c93b 100644
--- a/services/web/modules/full-project-search/frontend/js/components/full-project-search-button.tsx
+++ b/services/web/modules/full-project-search/frontend/js/components/full-project-search-button.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { useTranslation } from 'react-i18next'
-import { TooltipProps } from '@/shared/components/tooltip'
+import { OLTooltipProps as TooltipProps } from '@/shared/components/ol/ol-tooltip'
 import { isMac } from '@/shared/utils/os'
 import { sendSearchEvent } from '@/features/event-tracking/search-events'
 
diff --git a/services/web/modules/full-project-search/frontend/js/components/full-project-search-ui.tsx b/services/web/modules/full-project-search/frontend/js/components/full-project-search-ui.tsx
index b601ad634f..005c1c2292 100644
--- a/services/web/modules/full-project-search/frontend/js/components/full-project-search-ui.tsx
+++ b/services/web/modules/full-project-search/frontend/js/components/full-project-search-ui.tsx
@@ -20,7 +20,7 @@ import { debugConsole } from '@/utils/debugging'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import { Col, Form, Row } from 'react-bootstrap'
 import OLFormControl from '@/shared/components/ol/ol-form-control'
-import Button from '@/shared/components/button/button'
+import OLButton from '@/shared/components/ol/ol-button'
 import Notification from '@/shared/components/notification'
 import '../../stylesheets/full-project-search.scss'
 import { userStyles } from '@/shared/utils/styles'
@@ -217,9 +217,9 @@ const FullProjectSearchUI: FC = () => {
               />
             </Col>
             <Col className="col-auto">
-              <Button type="submit" className="btn btn-primary" size="sm">
+              <OLButton type="submit" className="btn btn-primary" size="sm">
                 {t('search')}
-              </Button>
+              </OLButton>
             </Col>
           </Row>
 
diff --git a/services/web/test/frontend/shared/components/notification.test.tsx b/services/web/test/frontend/shared/components/notification.test.tsx
index fbe5c04fc2..604e725270 100644
--- a/services/web/test/frontend/shared/components/notification.test.tsx
+++ b/services/web/test/frontend/shared/components/notification.test.tsx
@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { screen, render } from '@testing-library/react'
-import Notification from '../../../../frontend/js/shared/components/notification'
+import Notification from '@/shared/components/notification'
 import * as eventTracking from '@/infrastructure/event-tracking'
 import sinon from 'sinon'