diff --git a/apps/storybook/stories/Header.jsx b/apps/storybook/stories/Header.jsx
index bf37be496d..2062b86b4c 100644
--- a/apps/storybook/stories/Header.jsx
+++ b/apps/storybook/stories/Header.jsx
@@ -24,12 +24,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
             />
           </g>
         </svg>
-        <h1>Acme</h1>
+        <h1 className="text-foreground">Acme</h1>
       </div>
       <div>
         {user ? (
           <>
-            <span className="welcome">
+            <span className="welcome text-foreground-light">
               Welcome, <b>{user.name}</b>!
             </span>
             <Button size="small" onClick={onLogout} label="Log out" />
diff --git a/apps/storybook/stories/Page.jsx b/apps/storybook/stories/Page.jsx
index 339f08a6a1..fea5f639d6 100644
--- a/apps/storybook/stories/Page.jsx
+++ b/apps/storybook/stories/Page.jsx
@@ -15,20 +15,20 @@ export const Page = () => {
         onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
       <section className="storybook-page">
-        <h2>Pages in Storybook</h2>
-        <p>
+        <h2 className='text-foreground"'>Pages in Storybook</h2>
+        <p className="text-foreground">
           We recommend building UIs with a{' '}
           <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
             <strong>component-driven</strong>
           </a>{' '}
           process starting with atomic components and ending with pages.
         </p>
-        <p>
+        <p className="text-foreground-light">
           Render pages with mock data. This makes it easy to build and review page states without
           needing to navigate to them in your app. Here are some handy patterns for managing page
           data in Storybook:
         </p>
-        <ul>
+        <ul className="text-foreground-light">
           <li>
             Use a higher-level connected component. Storybook helps you compose such data from the
             "args" of child component stories
@@ -38,7 +38,7 @@ export const Page = () => {
             using Storybook.
           </li>
         </ul>
-        <p>
+        <p className="text-foreground-light">
           Get a guided tutorial on component-driven development at{' '}
           <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
             Storybook tutorials
@@ -49,7 +49,7 @@ export const Page = () => {
           </a>
           .
         </p>
-        <div className="tip-wrapper">
+        <div className="tip-wrapper text-foreground-muted">
           <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
           <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
             <g fill="none" fillRule="evenodd">
diff --git a/apps/storybook/stories/page.css b/apps/storybook/stories/page.css
index 098dad1185..d40ccd6179 100644
--- a/apps/storybook/stories/page.css
+++ b/apps/storybook/stories/page.css
@@ -5,7 +5,7 @@
   padding: 48px 20px;
   margin: 0 auto;
   max-width: 600px;
-  color: #333;
+  /* color: #333; */
 }
 
 .storybook-page h2 {
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
index 9d274820d1..9e265a77b2 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
@@ -19,7 +19,7 @@ import {
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useBranchDeleteMutation } from 'data/branches/branch-delete-mutation'
 import { useBranchesDisableMutation } from 'data/branches/branches-disable-mutation'
 import { Branch, useBranchesQuery } from 'data/branches/branches-query'
diff --git a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx b/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
index 3114608245..2da5bec798 100644
--- a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
@@ -1,7 +1,7 @@
 import toast from 'react-hot-toast'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseFunctionDeleteMutation } from 'data/database-functions/database-functions-delete-mutation'
 
 interface DeleteFunctionProps {
diff --git a/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx b/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
index 83ce67e105..115884584e 100644
--- a/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
@@ -1,7 +1,7 @@
 import { PostgresTrigger } from '@supabase/postgres-meta'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
 import { useStore } from 'hooks'
 
diff --git a/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx b/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
index f8c9484da5..60b60d3ec4 100644
--- a/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
@@ -1,7 +1,7 @@
 import toast from 'react-hot-toast'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
 
 interface DeleteTriggerProps {
diff --git a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
index 6cc9f6373d..03a1b68cc1 100644
--- a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
@@ -6,7 +6,7 @@ import { Button, Input } from 'ui'
 
 import { CANCELLATION_REASONS } from 'components/interfaces/Billing/Billing.constants'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useSendDowngradeFeedbackMutation } from 'data/feedback/exit-survey-send'
 import { useProjectDeleteMutation } from 'data/projects/project-delete-mutation'
 import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks'
diff --git a/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx b/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx
index 82b710362c..4bf0b55ae7 100644
--- a/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import toast from 'react-hot-toast'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useDatabasePolicyDeleteMutation } from 'data/database-policies/database-policy-delete-mutation'
 import { useBucketDeleteMutation } from 'data/storage/bucket-delete-mutation'
diff --git a/apps/studio/components/ui/Modals/TextConfirmModal.tsx b/packages/ui-patterns/Dialogs/TextConfirmModal.tsx
similarity index 100%
rename from apps/studio/components/ui/Modals/TextConfirmModal.tsx
rename to packages/ui-patterns/Dialogs/TextConfirmModal.tsx