diff --git a/apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx b/apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx
index 0d6f01f1e..9d6c55e71 100644
--- a/apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx
+++ b/apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx
@@ -275,9 +275,9 @@ export const ManagePublicTemplateDialog = ({
 
                           <TableCell>
                             {selectedTemplateId === row.id ? (
-                              <CheckCircle2Icon className="h-5 w-5 text-neutral-600 dark:text-neutral-200" />
+                              <CheckCircle2Icon className="h-5 w-5 text-foreground" />
                             ) : (
-                              <CircleIcon className="h-5 w-5 text-neutral-300 dark:text-neutral-600" />
+                              <CircleIcon className="h-5 w-5 text-muted-foreground/40" />
                             )}
                           </TableCell>
                         </TableRow>
diff --git a/apps/remix/app/components/dialogs/template-direct-link-dialog.tsx b/apps/remix/app/components/dialogs/template-direct-link-dialog.tsx
index 710f68b34..59380b68c 100644
--- a/apps/remix/app/components/dialogs/template-direct-link-dialog.tsx
+++ b/apps/remix/app/components/dialogs/template-direct-link-dialog.tsx
@@ -215,7 +215,7 @@ export const TemplateDirectLinkDialog = ({
                     {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
                       <li className="relative" key={index}>
                         <div className="absolute -left-12">
-                          <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-neutral-200 font-bold text-sm">
+                          <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-border font-bold text-sm">
                             {index + 1}
                           </div>
                         </div>
@@ -259,8 +259,8 @@ export const TemplateDirectLinkDialog = ({
               .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
                 <DialogContent className="relative">
                   {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
-                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
-                      <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
+                    <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-background/50">
+                      <LoaderIcon className="h-6 w-6 animate-spin text-muted-foreground" />
                     </div>
                   )}
 
@@ -317,9 +317,9 @@ export const TemplateDirectLinkDialog = ({
 
                             <TableCell>
                               {selectedRecipientId === row.id ? (
-                                <CircleDotIcon className="h-5 w-5 text-neutral-300" />
+                                <CircleDotIcon className="h-5 w-5 text-muted-foreground/40" />
                               ) : (
-                                <CircleIcon className="h-5 w-5 text-neutral-300" />
+                                <CircleIcon className="h-5 w-5 text-muted-foreground/40" />
                               )}
                             </TableCell>
                           </TableRow>
diff --git a/apps/remix/app/components/forms/avatar-image.tsx b/apps/remix/app/components/forms/avatar-image.tsx
index e3f607da4..a2a3d7574 100644
--- a/apps/remix/app/components/forms/avatar-image.tsx
+++ b/apps/remix/app/components/forms/avatar-image.tsx
@@ -146,7 +146,7 @@ export const AvatarImageForm = ({ className, team, organisation }: AvatarImageFo
                     <div className="relative">
                       <Avatar className="h-16 w-16 border-2 border-solid">
                         {avatarImageId && <AvatarImage src={formatAvatarUrl(avatarImageId)} />}
-                        <AvatarFallback className="text-gray-400 text-sm">{initials}</AvatarFallback>
+                        <AvatarFallback className="text-muted-foreground text-sm">{initials}</AvatarFallback>
                       </Avatar>
 
                       {hasAvatarImage && (
diff --git a/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx b/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
index ea64c9756..09aae82f2 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
@@ -155,7 +155,7 @@ export const DocumentSigningFieldContainer = ({
       {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) && field.fieldMeta?.label && (
         <div
           className={cn(
-            'absolute -top-16 right-0 left-0 rounded-md p-2 text-center text-gray-700 text-xs',
+            'absolute -top-16 right-0 left-0 rounded-md p-2 text-center text-foreground text-xs',
             {
               'border border-border bg-foreground/5': !field.inserted,
             },
diff --git a/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx b/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
index 46ff0d89f..c4606a22a 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
@@ -80,7 +80,7 @@ export const DocumentSigningPageViewV2 = () => {
   }, [recipientFieldsRemaining, selectedAssistantRecipientFields, currentEnvelopeItem]);
 
   return (
-    <div className="min-h-screen w-screen bg-gray-50 dark:bg-background">
+    <div className="min-h-screen w-screen bg-muted dark:bg-background">
       <SignFieldEmailDialog.Root />
       <SignFieldTextDialog.Root />
       <SignFieldNumberDialog.Root />
diff --git a/apps/remix/app/components/general/document/document-page-view-recent-activity.tsx b/apps/remix/app/components/general/document/document-page-view-recent-activity.tsx
index 72489501e..42d5545a9 100644
--- a/apps/remix/app/components/general/document/document-page-view-recent-activity.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-recent-activity.tsx
@@ -75,7 +75,7 @@ export const DocumentPageViewRecentActivity = ({ documentId, userId }: DocumentP
                 </div>
 
                 <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget">
-                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
+                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-border" />
                 </div>
 
                 <button
@@ -109,27 +109,27 @@ export const DocumentPageViewRecentActivity = ({ documentId, userId }: DocumentP
                 <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget text-foreground/40">
                   {match(auditLog.type)
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED, () => (
-                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-border bg-widget p-1">
                         <CheckCheckIcon className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED, () => (
-                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-border bg-widget p-1">
                         <CheckIcon className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED, () => (
-                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-border bg-widget p-1">
                         <AlertTriangle className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED, () => (
-                      <div className="rounded-full border border-gray-300 bg-widget p-1 dark:border-neutral-600">
+                      <div className="rounded-full border border-border bg-widget p-1">
                         <MailOpen className="h-3 w-3" aria-hidden="true" />
                       </div>
                     ))
                     .otherwise(() => (
-                      <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
+                      <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-border" />
                     ))}
                 </div>
 
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx
index 42144b6f8..a3a63245c 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx
@@ -261,7 +261,7 @@ export const EnvelopeEditorPreviewPage = () => {
 
         {/* Right Section - Form Fields Panel */}
         {currentEnvelopeItem && false && (
-          <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-gray-200 border-l bg-white py-4">
+          <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-border border-l bg-background py-4">
             {/* Add fields section. */}
             <section className="px-4">
               {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">
@@ -326,7 +326,7 @@ export const EnvelopeEditorPreviewPage = () => {
 
                     {/* Recipient selector section. */}
                     <section className="px-4">
-                      <h3 className="mb-2 font-semibold text-gray-900 text-sm">
+                      <h3 className="mb-2 font-semibold text-foreground text-sm">
                         <Trans>Selected Recipient</Trans>
                       </h3>
 
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-title-input.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-title-input.tsx
index 279f37a4b..c661a7e1a 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-title-input.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-title-input.tsx
@@ -62,7 +62,7 @@ export const EnvelopeItemTitleInput = ({
       {/* Hidden span to measure text width */}
       <span
         ref={measureRef}
-        className="pointer-events-none absolute top-0 left-0 whitespace-nowrap font-medium text-gray-600 text-sm opacity-0"
+        className="pointer-events-none absolute top-0 left-0 whitespace-nowrap font-medium text-muted-foreground text-sm opacity-0"
         style={{ font: 'inherit' }}
       >
         {envelopeItemTitle || placeholder}
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
index f715669e4..78bd2191a 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
@@ -271,7 +271,7 @@ export const EnvelopeEditor = () => {
                     `cursor-pointer rounded-lg text-left transition-colors ${
                       isActive
                         ? 'border border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
-                        : 'border border-gray-200 hover:bg-gray-50 dark:border-gray-400/20 dark:hover:bg-gray-400/10'
+                        : 'border border-border hover:bg-muted/50'
                     }`,
                     {
                       'p-3': !minimizeLeftSidebar,
@@ -284,10 +284,10 @@ export const EnvelopeEditor = () => {
                       className={`rounded border p-2 ${
                         isActive
                           ? 'border-green-200 bg-green-50 dark:border-green-500/20 dark:bg-green-500/10'
-                          : 'border-gray-100 bg-gray-100 dark:border-gray-400/20 dark:bg-gray-400/10'
+                          : 'border-muted bg-muted'
                       }`}
                     >
-                      <Icon className={`h-4 w-4 ${isActive ? 'text-green-600' : 'text-gray-600'}`} />
+                      <Icon className={`h-4 w-4 ${isActive ? 'text-green-600' : 'text-muted-foreground'}`} />
                     </div>
 
                     {!minimizeLeftSidebar && (
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx b/apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx
index 0ea1a567a..0d40aadea 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx
@@ -31,14 +31,14 @@ export const EnvelopeItemSelector = ({
     >
       <div
         className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full font-medium text-xs ${
-          isSelected ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600'
+          isSelected ? 'bg-green-100 text-green-600' : 'bg-muted text-muted-foreground'
         }`}
       >
         {number}
       </div>
       <div className="min-w-0 text-left">
         <div className="truncate font-medium text-sm">{primaryText}</div>
-        <div className="text-gray-500 text-xs">{secondaryText}</div>
+        <div className="text-muted-foreground text-xs">{secondaryText}</div>
       </div>
       {actionSlot ?? (
         <div
diff --git a/apps/remix/app/components/general/template/template-direct-link-badge.tsx b/apps/remix/app/components/general/template/template-direct-link-badge.tsx
index ef5831a5b..e9e304c95 100644
--- a/apps/remix/app/components/general/template/template-direct-link-badge.tsx
+++ b/apps/remix/app/components/general/template/template-direct-link-badge.tsx
@@ -31,7 +31,7 @@ export const TemplateDirectLinkBadge = ({ token, enabled, className }: TemplateD
     <button
       title="Copy direct link"
       className={cn(
-        'flex flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600',
+        'flex flex-row items-center rounded border border-border bg-muted px-1.5 py-0.5 text-xs',
         className,
       )}
       onClick={async () => onCopyClick(token)}
diff --git a/apps/remix/app/components/general/template/template-page-view-recent-activity.tsx b/apps/remix/app/components/general/template/template-page-view-recent-activity.tsx
index 18e31fdea..343bd96e8 100644
--- a/apps/remix/app/components/general/template/template-page-view-recent-activity.tsx
+++ b/apps/remix/app/components/general/template/template-page-view-recent-activity.tsx
@@ -71,7 +71,7 @@ export const TemplatePageViewRecentActivity = ({
                 </div>
 
                 <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget">
-                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
+                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-border" />
                 </div>
 
                 <button
@@ -108,7 +108,7 @@ export const TemplatePageViewRecentActivity = ({
                 </div>
 
                 <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-widget text-foreground/40">
-                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-gray-300 dark:ring-neutral-600" />
+                  <div className="h-1.5 w-1.5 rounded-full bg-widget ring-1 ring-border" />
                 </div>
 
                 <Link
diff --git a/apps/remix/app/components/tables/admin-dashboard-users-table.tsx b/apps/remix/app/components/tables/admin-dashboard-users-table.tsx
index c6ea2cfb7..52607ce71 100644
--- a/apps/remix/app/components/tables/admin-dashboard-users-table.tsx
+++ b/apps/remix/app/components/tables/admin-dashboard-users-table.tsx
@@ -127,8 +127,8 @@ export const AdminDashboardUsersTable = ({ users, totalPages, perPage, page }: A
       </DataTable>
 
       {isPending && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+          <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
     </div>
diff --git a/apps/remix/app/components/tables/admin-organisation-overview-table.tsx b/apps/remix/app/components/tables/admin-organisation-overview-table.tsx
index 87286a0d4..6ab38465d 100644
--- a/apps/remix/app/components/tables/admin-organisation-overview-table.tsx
+++ b/apps/remix/app/components/tables/admin-organisation-overview-table.tsx
@@ -204,8 +204,8 @@ export const AdminOrganisationOverviewTable = ({
       </DataTable>
 
       {isPending && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+          <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
     </div>
diff --git a/apps/remix/app/components/tables/admin-organisations-table.tsx b/apps/remix/app/components/tables/admin-organisations-table.tsx
index ee336af8d..6d4cad278 100644
--- a/apps/remix/app/components/tables/admin-organisations-table.tsx
+++ b/apps/remix/app/components/tables/admin-organisations-table.tsx
@@ -110,7 +110,7 @@ export const AdminOrganisationsTable = ({
           return (
             <div
               className={`inline-flex items-center rounded-full px-2 py-1 font-medium text-xs ${
-                isPaid ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+                isPaid ? 'bg-green-100 text-green-800' : 'bg-muted text-muted-foreground'
               }`}
             >
               {isPaid ? (
diff --git a/apps/remix/app/components/tables/organisation-insights-table.tsx b/apps/remix/app/components/tables/organisation-insights-table.tsx
index 417ee2b46..4caa18a9f 100644
--- a/apps/remix/app/components/tables/organisation-insights-table.tsx
+++ b/apps/remix/app/components/tables/organisation-insights-table.tsx
@@ -253,8 +253,8 @@ export const OrganisationInsightsTable = ({
       </div>
 
       {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+          <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
     </div>
diff --git a/apps/remix/app/components/tables/settings-public-profile-templates-table.tsx b/apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
index 1a2593000..de8ccc251 100644
--- a/apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
+++ b/apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
@@ -72,7 +72,7 @@ export const SettingsPublicProfileTemplatesTable = () => {
 
   return (
     <div>
-      <div className="mt-6 divide-y divide-neutral-200 overflow-hidden rounded-lg border border-neutral-200 dark:divide-foreground/30 dark:border-foreground/30">
+      <div className="mt-6 divide-y divide-border overflow-hidden rounded-lg border border-border">
         {/* Loading and error handling states. */}
         {publicDirectTemplates.length === 0 && (
           <>
@@ -132,7 +132,7 @@ export const SettingsPublicProfileTemplatesTable = () => {
 
               <div>
                 <p className="break-all text-sm">{template.publicTitle}</p>
-                <p className="break-all text-neutral-400 text-xs">{template.publicDescription}</p>
+                <p className="break-all text-muted-foreground text-xs">{template.publicDescription}</p>
               </div>
             </div>
 
diff --git a/apps/remix/app/components/tables/templates-table.tsx b/apps/remix/app/components/tables/templates-table.tsx
index cc7754ffd..708cb3896 100644
--- a/apps/remix/app/components/tables/templates-table.tsx
+++ b/apps/remix/app/components/tables/templates-table.tsx
@@ -134,7 +134,7 @@ export const TemplatesTable = ({
                     </p>
                   </li>
                   <li>
-                    <div className="mb-2 flex w-fit flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600">
+                    <div className="mb-2 flex w-fit flex-row items-center rounded border border-border bg-muted px-1.5 py-0.5 text-xs">
                       <Link2Icon className="mr-1 h-3 w-3" />
                       <Trans>direct link</Trans>
                     </div>
@@ -310,8 +310,8 @@ export const TemplatesTable = ({
       </DataTable>
 
       {isPending && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+          <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
     </div>
diff --git a/apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx b/apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx
index 1f1bb5317..dc34e9a33 100644
--- a/apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/admin+/documents._index.tsx
@@ -149,8 +149,8 @@ export default function AdminDocumentsPage() {
             </DataTable>
 
             {isFindDocumentsLoading && (
-              <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-                <Loader className="h-8 w-8 animate-spin text-gray-500" />
+              <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+                <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
               </div>
             )}
           </div>
diff --git a/apps/remix/app/routes/_authenticated+/admin+/email-domains._index.tsx b/apps/remix/app/routes/_authenticated+/admin+/email-domains._index.tsx
index 055620128..dc1f43530 100644
--- a/apps/remix/app/routes/_authenticated+/admin+/email-domains._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/admin+/email-domains._index.tsx
@@ -182,8 +182,8 @@ export default function AdminEmailDomainsPage() {
           </DataTable>
 
           {isFindEmailDomainsLoading && (
-            <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-              <Loader className="h-8 w-8 animate-spin text-gray-500" />
+            <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+              <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
             </div>
           )}
         </div>
diff --git a/apps/remix/app/routes/_authenticated+/admin+/unsealed-documents._index.tsx b/apps/remix/app/routes/_authenticated+/admin+/unsealed-documents._index.tsx
index 761ee7ba2..f1e9ab7e8 100644
--- a/apps/remix/app/routes/_authenticated+/admin+/unsealed-documents._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/admin+/unsealed-documents._index.tsx
@@ -173,8 +173,8 @@ export default function AdminUnsealedDocumentsPage() {
         </DataTable>
 
         {isLoading && (
-          <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-            <Loader className="h-8 w-8 animate-spin text-gray-500" />
+          <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+            <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
           </div>
         )}
       </div>
diff --git a/apps/remix/app/routes/_authenticated+/dashboard.tsx b/apps/remix/app/routes/_authenticated+/dashboard.tsx
index 757323097..7b5a95af0 100644
--- a/apps/remix/app/routes/_authenticated+/dashboard.tsx
+++ b/apps/remix/app/routes/_authenticated+/dashboard.tsx
@@ -108,7 +108,7 @@ export default function DashboardPage() {
                         <div className="flex items-center gap-3">
                           <Avatar className="h-10 w-10 border border-solid">
                             {org.avatarImageId && <AvatarImage src={formatAvatarUrl(org.avatarImageId)} />}
-                            <AvatarFallback className="text-gray-400 text-sm">
+                            <AvatarFallback className="text-muted-foreground text-sm">
                               {org.name.slice(0, 1).toUpperCase()}
                             </AvatarFallback>
                           </Avatar>
@@ -182,7 +182,7 @@ export default function DashboardPage() {
                           <div className="flex items-center gap-3">
                             <Avatar className="h-10 w-10 border border-solid">
                               {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-                              <AvatarFallback className="text-gray-400 text-sm">
+                              <AvatarFallback className="text-muted-foreground text-sm">
                                 {team.name.slice(0, 1).toUpperCase()}
                               </AvatarFallback>
                             </Avatar>
diff --git a/apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx b/apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx
index 792806d2a..c78034d35 100644
--- a/apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/o.$orgUrl._index.tsx
@@ -129,7 +129,7 @@ export default function OrganisationSettingsTeamsPage() {
                 <div className="flex items-center gap-3">
                   <Avatar className="h-10 w-10 border-2 border-solid">
                     {team.avatarImageId && <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />}
-                    <AvatarFallback className="text-gray-400 text-sm">
+                    <AvatarFallback className="text-muted-foreground text-sm">
                       {team.name.slice(0, 1).toUpperCase()}
                     </AvatarFallback>
                   </Avatar>
diff --git a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx
index e7aa5c967..6e6f82d9f 100644
--- a/apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx
+++ b/apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx
@@ -95,8 +95,8 @@ export default function WebhookPage() {
         <WebhookCreateDialog />
       </SettingsHeader>
       {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50">
+          <Loader className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       )}
 
diff --git a/apps/remix/app/routes/_profile+/p.$url.tsx b/apps/remix/app/routes/_profile+/p.$url.tsx
index 2f78ac076..99113124f 100644
--- a/apps/remix/app/routes/_profile+/p.$url.tsx
+++ b/apps/remix/app/routes/_profile+/p.$url.tsx
@@ -59,7 +59,9 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
         <Avatar className="h-24 w-24 border-2 border-solid dark:border-border">
           {publicProfile.avatarImageId && <AvatarImage src={formatAvatarUrl(publicProfile.avatarImageId)} />}
 
-          <AvatarFallback className="text-gray-400 text-sm">{extractInitials(publicProfile.name)}</AvatarFallback>
+          <AvatarFallback className="text-muted-foreground text-sm">
+            {extractInitials(publicProfile.name)}
+          </AvatarFallback>
         </Avatar>
 
         <div className="mt-4 flex flex-row items-center justify-center">
@@ -138,7 +140,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
           <Table className="w-full" overflowHidden>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-full rounded-tl-md bg-neutral-50 dark:bg-neutral-700">
+                <TableHead className="w-full rounded-tl-md bg-muted">
                   <Trans>Documents</Trans>
                 </TableHead>
               </TableRow>
diff --git a/packages/ui/primitives/alert.tsx b/packages/ui/primitives/alert.tsx
index f3e11b7f3..2f9ec4de5 100644
--- a/packages/ui/primitives/alert.tsx
+++ b/packages/ui/primitives/alert.tsx
@@ -10,7 +10,7 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: 'bg-green-50 text-green-700 [&_.alert-title]:text-green-800 [&>svg]:text-green-400',
-        neutral: 'bg-gray-50 dark:bg-neutral-900/20 text-muted-foreground [&_.alert-title]:text-foreground',
+        neutral: 'bg-muted/50 text-muted-foreground [&_.alert-title]:text-foreground',
         secondary: 'bg-blue-50 text-blue-700 [&_.alert-title]:text-blue-800 [&>svg]:text-blue-400',
         destructive: 'bg-red-50 text-red-700 [&_.alert-title]:text-red-800 [&>svg]:text-red-400',
         warning: 'bg-yellow-50 text-yellow-700 [&_.alert-title]:text-yellow-800 [&>svg]:text-yellow-400',
diff --git a/packages/ui/primitives/avatar.tsx b/packages/ui/primitives/avatar.tsx
index 557810ff4..7e1590ce7 100644
--- a/packages/ui/primitives/avatar.tsx
+++ b/packages/ui/primitives/avatar.tsx
@@ -63,7 +63,7 @@ const AvatarWithText = ({
   <div className={cn('flex w-full max-w-xs items-center gap-2', className)}>
     <Avatar className={cn('h-10 w-10 border-2 border-white border-solid dark:border-border', avatarClass)}>
       {avatarSrc && <AvatarImage src={avatarSrc} />}
-      <AvatarFallback className="text-gray-400 text-xs">{avatarFallback}</AvatarFallback>
+      <AvatarFallback className="text-muted-foreground text-xs">{avatarFallback}</AvatarFallback>
     </Avatar>
 
     <div className={cn('flex flex-col truncate text-left font-normal text-sm', textSectionClassName)}>
diff --git a/packages/ui/primitives/badge.tsx b/packages/ui/primitives/badge.tsx
index 401393cf7..c0b97152c 100644
--- a/packages/ui/primitives/badge.tsx
+++ b/packages/ui/primitives/badge.tsx
@@ -7,7 +7,7 @@ import { cn } from '../lib/utils';
 const badgeVariants = cva('inline-flex items-center rounded-md text-xs font-medium ring-1 ring-inset w-fit', {
   variants: {
     variant: {
-      neutral: 'bg-gray-50 text-gray-600 ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20',
+      neutral: 'bg-muted text-muted-foreground ring-border',
       destructive: 'bg-red-50 text-red-700 ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20',
       warning:
         'bg-yellow-50 text-yellow-800 ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20',
diff --git a/packages/ui/primitives/command.tsx b/packages/ui/primitives/command.tsx
index 422f77509..d38038216 100644
--- a/packages/ui/primitives/command.tsx
+++ b/packages/ui/primitives/command.tsx
@@ -62,7 +62,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-foreground-muted disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
diff --git a/packages/ui/primitives/document-flow/add-settings.tsx b/packages/ui/primitives/document-flow/add-settings.tsx
index 641251edd..c49b4f347 100644
--- a/packages/ui/primitives/document-flow/add-settings.tsx
+++ b/packages/ui/primitives/document-flow/add-settings.tsx
@@ -327,7 +327,7 @@ export const AddSettingsFormPartial = ({
 
             <Accordion type="multiple" className="mt-6">
               <AccordionItem value="advanced-options" className="border-none">
-                <AccordionTrigger className="mb-2 rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
+                <AccordionTrigger className="mb-2 rounded border px-3 py-2 text-left text-foreground hover:bg-muted/50 hover:no-underline">
                   <Trans>Advanced Options</Trans>
                 </AccordionTrigger>
 
diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx
index 314790ec7..ca4fd24a7 100644
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@@ -273,7 +273,7 @@ const FieldItemInner = ({
     >
       {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) && field.fieldMeta?.label && (
         <div
-          className={cn('absolute -top-16 right-0 left-0 rounded-md p-2 text-center text-gray-700 text-xs', {
+          className={cn('absolute -top-16 right-0 left-0 rounded-md p-2 text-center text-foreground text-xs', {
             'border border-primary bg-foreground/5': !fieldHasCheckedValues,
             'border border-primary bg-documenso-200': fieldHasCheckedValues,
           })}
diff --git a/packages/ui/primitives/template-flow/add-template-settings.tsx b/packages/ui/primitives/template-flow/add-template-settings.tsx
index 94114df75..e42a391e1 100644
--- a/packages/ui/primitives/template-flow/add-template-settings.tsx
+++ b/packages/ui/primitives/template-flow/add-template-settings.tsx
@@ -454,7 +454,7 @@ export const AddTemplateSettingsFormPartial = ({
             {distributionMethod === DocumentDistributionMethod.EMAIL && (
               <Accordion type="multiple">
                 <AccordionItem value="email-options" className="border-none">
-                  <AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
+                  <AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-muted/50 hover:no-underline">
                     <Trans>Email Options</Trans>
                   </AccordionTrigger>
 
@@ -588,7 +588,7 @@ export const AddTemplateSettingsFormPartial = ({
 
             <Accordion type="multiple">
               <AccordionItem value="advanced-options" className="border-none">
-                <AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
+                <AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-muted/50 hover:no-underline">
                   <Trans>Advanced Options</Trans>
                 </AccordionTrigger>