diff --git a/src/app/verification/details/page.tsx b/src/app/verification/details/page.tsx
index be6341a..ba7ce6b 100644
--- a/src/app/verification/details/page.tsx
+++ b/src/app/verification/details/page.tsx
@@ -94,11 +94,11 @@ export default function VerificationDetailsPage() {
   };
 
   return (
-    <div className="flex min-h-screen w-full flex-col bg-[#0b0f14]">
+    <div className="bg-surface-primary flex min-h-screen w-full flex-col">
       <div className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-5 pt-8 pb-6">
         <div className="flex flex-col items-center gap-1 text-center">
-          <h1 className="text-[24px] leading-7 font-bold text-white">Your Details</h1>
-          <p className="text-[14px] leading-4.5 text-[#94a3b8]">
+          <h1 className="text-tma-text-primary text-[24px] leading-7 font-bold">Your Details</h1>
+          <p className="text-tma-text-secondary text-[14px] leading-4.5">
             We need a few details before starting verification
           </p>
         </div>
@@ -106,7 +106,7 @@ export default function VerificationDetailsPage() {
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-1 flex-col gap-3">
           <div
             className="flex flex-col gap-3"
-            style={{ "--tgui--bg_color": "#0b0f14" } as React.CSSProperties}
+            style={{ "--tgui--bg_color": "var(--color-surface-primary)" } as React.CSSProperties}
           >
             {FIELDS.map((field) => (
               <div key={field.name} className="w-full">
@@ -124,9 +124,7 @@ export default function VerificationDetailsPage() {
                   {...register(field.name)}
                 />
                 {errors[field.name] && (
-                  <p className="pt-1 pl-6 text-[12px] text-[#f13131]">
-                    {errors[field.name]?.message}
-                  </p>
+                  <p className="pt-1 text-[12px] text-[#f13131]">{errors[field.name]?.message}</p>
                 )}
               </div>
             ))}
@@ -137,7 +135,7 @@ export default function VerificationDetailsPage() {
               <p className="text-[13px] leading-4 font-semibold text-[#f13131]">
                 Verification Error
               </p>
-              <p className="mt-1 text-[13px] leading-4.5 text-[#94a3b8]">{error}</p>
+              <p className="text-tma-text-secondary mt-1 text-[13px] leading-4.5">{error}</p>
             </div>
           )}
 
diff --git a/src/app/verification/page.tsx b/src/app/verification/page.tsx
index 5ea0722..199a6f4 100644
--- a/src/app/verification/page.tsx
+++ b/src/app/verification/page.tsx
@@ -150,13 +150,13 @@ export default function VerificationIntroPage() {
   const showSteps = SHOW_STEPS_FOR.includes(status);
 
   return (
-    <div className="flex min-h-screen w-full flex-col bg-[#0b0f14]">
+    <div className="bg-surface-main flex min-h-screen w-full flex-col">
       <div className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-5 pt-8 pb-6">
         <div className="flex flex-col items-center gap-1 text-center">
-          <h1 className="text-[24px] leading-7 font-bold text-white">
+          <h1 className="text-tma-text-primary text-[24px] leading-7 font-bold">
             {content?.title ?? "Verify Your Identity"}
           </h1>
-          <p className="text-[14px] leading-4.5 text-[#94a3b8]">
+          <p className="text-tma-text-secondary text-[14px] leading-4.5">
             {content?.description ?? "Complete verification to continue with Bitcoin දීප"}
           </p>
         </div>
@@ -174,12 +174,19 @@ export default function VerificationIntroPage() {
         {showSteps && (
           <div className="flex flex-col gap-3">
             {STEPS.map((step, index) => (
-              <div key={step.title} className="rounded-2xl bg-[#12161d] px-4 py-4">
+              <div
+                key={step.title}
+                className="rounded-2xl border border-transparent bg-white px-4 py-4 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.07)] dark:border-white/6 dark:bg-[#0B0F14] dark:shadow-[0px_2px_10px_0px_rgba(0,0,0,0.3)]"
+              >
                 <p className="text-[13px] leading-4 font-semibold text-[#fa7119]">
                   Step {String(index + 1).padStart(2, "0")}
                 </p>
-                <p className="mt-1 text-[16px] leading-5 font-bold text-white">{step.title}</p>
-                <p className="mt-0.5 text-[13px] leading-4.25 text-[#94a3b8]">{step.description}</p>
+                <p className="text-tma-text-primary mt-1 text-[16px] leading-5 font-bold">
+                  {step.title}
+                </p>
+                <p className="text-tma-text-secondary mt-0.5 text-[13px] leading-4.25">
+                  {step.description}
+                </p>
               </div>
             ))}
           </div>
@@ -188,35 +195,35 @@ export default function VerificationIntroPage() {
         {status === "KYC_EXPIRED" && (
           <div className="rounded-2xl bg-[#fa7119]/10 px-4 py-4">
             <p className="text-[13px] leading-4 font-semibold text-[#fa7119]">KYC Expired</p>
-            <p className="mt-1 text-[13px] leading-4.5 text-[#94a3b8]">
+            <p className="text-tma-text-secondary mt-1 text-[13px] leading-4.5">
               Your previous verification has expired, please verify again.
             </p>
           </div>
         )}
 
         {status === "IN_REVIEW" && (
-          <div className="flex flex-col items-center gap-2 rounded-2xl bg-[#12161d] px-4 py-5 text-center">
+          <div className="flex flex-col items-center gap-2 rounded-2xl border border-transparent bg-white px-4 py-5 text-center shadow-[0px_2px_10px_0px_rgba(0,0,0,0.07)] dark:border-white/6 dark:bg-[#0B0F14] dark:shadow-[0px_2px_10px_0px_rgba(0,0,0,0.3)]">
             <p className="text-[15px] leading-5 font-bold text-[#fa7119]">
               We&apos;re reviewing your documents.
             </p>
-            <p className="text-[16px] leading-5 font-bold text-white">
+            <p className="text-tma-text-primary text-[16px] leading-5 font-bold">
               This usually takes up to 24 hours.
             </p>
-            <p className="text-[13px] leading-4.5 text-[#94a3b8]">
+            <p className="text-tma-text-secondary text-[13px] leading-4.5">
               You&apos;ll receive a notification once approved.
             </p>
           </div>
         )}
 
         {showSteps && (
-          <p className="text-center text-sm font-medium text-white">
+          <p className="text-tma-text-primary text-center text-sm font-medium">
             Your Data is Secured and never Shared
           </p>
         )}
 
         <div className="mt-auto flex flex-col gap-3">
           {showSteps && (
-            <p className="text-center text-[12px] text-[#64748b]">Takes less than 2 minutes</p>
+            <p className="text-muted text-center text-[12px]">Takes less than 2 minutes</p>
           )}
 
           {status === "APPROVED" ? (
@@ -296,7 +303,7 @@ export default function VerificationIntroPage() {
           <Modal.Header
             after={
               <Modal.Close>
-                <X size={20} className="text-[#94a3b8]" />
+                <X size={20} className="text-muted" />
               </Modal.Close>
             }
           >
@@ -318,14 +325,16 @@ export default function VerificationIntroPage() {
                 unoptimized
               />
             </div>
-            <h2 className="text-[16px] leading-5 font-bold text-white">Use Mobile Device</h2>
-            <p className="text-[14px] leading-4.5 text-[#94a3b8]">
+            <h2 className="text-tma-text-primary text-[16px] leading-5 font-bold">
+              Use Mobile Device
+            </h2>
+            <p className="text-tma-text-secondary text-[14px] leading-4.5">
               Identity verification works best on mobile devices for security and camera access.
             </p>
           </div>
 
-          <div className="flex flex-col gap-3 rounded-2xl bg-[#12161d] px-4 py-4">
-            <p className="text-[13px] leading-4 font-semibold text-white">
+          <div className="flex flex-col gap-3 rounded-2xl border border-transparent bg-white px-4 py-4 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.07)] dark:border-white/6 dark:bg-[#0B0F14] dark:shadow-[0px_2px_10px_0px_rgba(0,0,0,0.3)]">
+            <p className="text-tma-text-primary text-[13px] leading-4 font-semibold">
               How to verify on mobile:
             </p>
             {MOBILE_STEPS.map((step, index) => (
@@ -333,7 +342,7 @@ export default function VerificationIntroPage() {
                 <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#fa7119] text-[12px] font-bold text-white">
                   {index + 1}
                 </span>
-                <p className="text-[13px] leading-4.5 text-[#94a3b8]">{step}</p>
+                <p className="text-tma-text-secondary text-[13px] leading-4.5">{step}</p>
               </div>
             ))}
           </div>