diff --git a/src/pages/doormile/home/Home.jsx b/src/pages/doormile/home/Home.jsx
index 6660e26..9c469ae 100644
--- a/src/pages/doormile/home/Home.jsx
+++ b/src/pages/doormile/home/Home.jsx
@@ -342,7 +342,7 @@ function HomeFlowDropdown({ step, draft, isBusy, onChoose, onCancel }) {
           type="button"
           disabled={!value || isBusy}
           onClick={() => onChoose(value, chosen)}
-          className="px-4 py-2 bg-[#2563EB] hover:bg-blue-700 text-white font-semibold text-xs rounded-xl shadow-xs active:scale-95 disabled:opacity-50 cursor-pointer flex items-center gap-1.5 transition-all"
+          className="px-4 py-2 bg-brand hover:bg-brand-dark text-white font-semibold text-xs rounded-xl shadow-xs active:scale-95 disabled:opacity-50 cursor-pointer flex items-center gap-1.5 transition-all"
         >
           <span>Continue</span>
           <ArrowRight className="w-3.5 h-3.5" />
@@ -1239,7 +1239,7 @@ export default function Home() {
                     type="button"
                     onClick={() => handleAsk()}
                     disabled={!query.trim() && !isThinking}
-                    className="px-5 py-2 rounded-full bg-[#2563EB] hover:bg-blue-700 active:scale-95 text-white font-semibold text-xs tracking-wide shadow-xs flex items-center gap-2 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="px-5 py-2 rounded-full bg-brand hover:bg-brand-dark active:scale-95 text-white font-semibold text-xs tracking-wide shadow-xs flex items-center gap-2 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                     title="Send message"
                   >
                     <Send className="w-3.5 h-3.5" />
@@ -1334,7 +1334,7 @@ export default function Home() {
                           <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1 mr-2">
                             YOU
                           </span>
-                          <div className="bg-[#2563EB] text-white px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold shadow-xs max-w-[85%] text-right">
+                          <div className="bg-brand text-white px-5 py-2.5 rounded-full text-xs sm:text-sm font-semibold shadow-xs max-w-[85%] text-right">
                             {turn.userQuery}
                           </div>
                         </div>
@@ -1343,7 +1343,7 @@ export default function Home() {
                       {/* Assistant Message on the Left */}
                       <div className="flex flex-col items-start w-full">
                         {/* Assistant Header */}
-                        <div className="flex items-center gap-1.5 text-xs font-bold text-[#2563EB] tracking-wider uppercase mb-2">
+                        <div className="flex items-center gap-1.5 text-xs font-bold text-brand tracking-wider uppercase mb-2">
                           <Sparkles className="w-3.5 h-3.5" />
                           <span>MILETRUTH AI</span>
                         </div>
@@ -1396,7 +1396,7 @@ export default function Home() {
                                 <button
                                   type="button"
                                   onClick={() => submitForm(turn, turn.form.draft)}
-                                  className="px-4 py-2 bg-[#2563EB] hover:bg-blue-700 active:scale-95 text-white font-semibold text-xs rounded-xl shadow-xs transition-all cursor-pointer flex items-center gap-1.5"
+                                  className="px-4 py-2 bg-brand hover:bg-brand-dark active:scale-95 text-white font-semibold text-xs rounded-xl shadow-xs transition-all cursor-pointer flex items-center gap-1.5"
                                 >
                                   <span>{turn.form.confirmLabel || 'Create orders'}</span>
                                   <ArrowRight className="w-3.5 h-3.5" />
@@ -1662,7 +1662,7 @@ export default function Home() {
               )}
 
               {/* Follow-up Prompt Box Input */}
-              <div className="w-full bg-white rounded-2xl border border-blue-500 focus-within:ring-2 focus-within:ring-blue-400/20 transition-all p-3">
+              <div className="w-full bg-white rounded-2xl border border-slate-200 focus-within:border-brand focus-within:ring-2 focus-within:ring-brand/20 transition-all p-3">
                 <textarea
                   ref={inputRef}
                   rows={1}
@@ -1751,7 +1751,7 @@ export default function Home() {
                       type="button"
                       onClick={() => handleAsk()}
                       disabled={!query.trim() && !isThinking}
-                      className="px-4 py-1.5 rounded-full bg-[#2563EB] hover:bg-blue-700 active:scale-95 text-white font-semibold text-xs tracking-wide shadow-xs flex items-center gap-1.5 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="px-4 py-1.5 rounded-full bg-brand hover:bg-brand-dark active:scale-95 text-white font-semibold text-xs tracking-wide shadow-xs flex items-center gap-1.5 transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                       title="Send message"
                     >
                       <Send className="w-3.5 h-3.5" />