diff --git a/client/src/components/ui/TermsAndConditionsModal.tsx b/client/src/components/Chat/TermsAndConditionsModal.tsx
similarity index 70%
rename from client/src/components/ui/TermsAndConditionsModal.tsx
rename to client/src/components/Chat/TermsAndConditionsModal.tsx
index 65e348d296..234f91f87d 100644
--- a/client/src/components/ui/TermsAndConditionsModal.tsx
+++ b/client/src/components/Chat/TermsAndConditionsModal.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
-import DialogTemplate from '~/components/ui/DialogTemplate';
+import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 import { useAcceptTermsMutation } from '~/data-provider';
+import { OGDialog, Button, Spinner } from '~/components';
 import { useToastContext } from '~/Providers';
-import { OGDialog } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 
 interface TermsModalProps {
@@ -36,6 +36,8 @@ const TermsAndConditionsModal = ({
     },
   });
 
+  const isLoading = acceptTermsMutation.isLoading;
+
   const handleAccept = () => {
     acceptTermsMutation.mutate();
   };
@@ -54,7 +56,7 @@ const TermsAndConditionsModal = ({
 
   return (
     <OGDialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTemplate
+      <OGDialogTemplate
         title={title ?? localize('com_ui_terms_and_conditions')}
         className="w-11/12 max-w-3xl sm:w-3/4 md:w-1/2 lg:w-2/5"
         showCloseButton={false}
@@ -65,7 +67,7 @@ const TermsAndConditionsModal = ({
             className="max-h-[60vh] overflow-y-auto p-4"
             aria-label={localize('com_ui_terms_and_conditions')}
           >
-            <div className="prose dark:prose-invert w-full max-w-none !text-text-primary">
+            <div className="prose dark:prose-invert w-full max-w-none text-text-primary">
               {modalContent ? (
                 <MarkdownLite content={modalContent} />
               ) : (
@@ -76,18 +78,12 @@ const TermsAndConditionsModal = ({
         }
         buttons={
           <>
-            <button
-              onClick={handleDecline}
-              className="inline-flex h-10 items-center justify-center rounded-lg border border-border-heavy bg-surface-secondary px-4 py-2 text-sm text-text-primary hover:bg-surface-active"
-            >
+            <Button onClick={handleDecline} variant="destructive" disabled={isLoading}>
               {localize('com_ui_decline')}
-            </button>
-            <button
-              onClick={handleAccept}
-              className="inline-flex h-10 items-center justify-center rounded-lg border border-border-heavy bg-surface-secondary px-4 py-2 text-sm text-text-primary hover:bg-green-500 hover:text-white focus:bg-green-500 focus:text-white dark:hover:bg-green-600 dark:focus:bg-green-600"
-            >
-              {localize('com_ui_accept')}
-            </button>
+            </Button>
+            <Button onClick={handleAccept} variant="submit" disabled={isLoading}>
+              {isLoading ? <Spinner /> : localize('com_ui_accept')}
+            </Button>
           </>
         }
       />
diff --git a/client/src/routes/Root.tsx b/client/src/routes/Root.tsx
index b67a437580..fddf92c6e7 100644
--- a/client/src/routes/Root.tsx
+++ b/client/src/routes/Root.tsx
@@ -9,7 +9,7 @@ import {
   SetConvoProvider,
 } from '~/Providers';
 import { useAuthContext, useAssistantsMap, useAgentsMap, useFileMap, useSearch } from '~/hooks';
-import TermsAndConditionsModal from '~/components/ui/TermsAndConditionsModal';
+import TermsAndConditionsModal from '~/components/Chat/TermsAndConditionsModal';
 import { useUserTermsQuery, useGetStartupConfig } from '~/data-provider';
 import { Nav, MobileNav } from '~/components/Nav';
 import { Banner } from '~/components/Banners';
@@ -49,7 +49,6 @@ export default function Root() {
     setShowTerms(false);
   };
 
-  // Pass the desired redirect parameter to logout
   const handleDeclineTerms = () => {
     setShowTerms(false);
     logout('/login?redirect=false');