diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx
index 2a05883d..dc4b2424 100644
--- a/src/routes/home/index.tsx
+++ b/src/routes/home/index.tsx
@@ -53,9 +53,9 @@ function HomePage() {
     <>
       <Manifest />
       {!guest && <Notification />}
-      <div className={`vocechat-container flex w-screen h-screen bg-[#e5e7eb] dark:bg-[#121926]`}>
+      <div className={`vocechat-container flex w-screen h-screen bg-gray-200 dark:bg-gray-900`}>
         {!guest && (
-          <div className={`hidden md:flex h-full flex-col items-center relative w-16 bg-[#e5e7eb] dark:bg-[#121926] transition-all`}>
+          <div className={`hidden md:flex h-full flex-col items-center relative w-16 bg-gray-200 dark:bg-gray-900 transition-all`}>
             {loginUid && <User uid={loginUid} />}
             <nav className="flex flex-col gap-1 px-3 py-6">
               <NavLink
diff --git a/src/routes/onboarding/index.tsx b/src/routes/onboarding/index.tsx
index ae56c8ba..29632162 100644
--- a/src/routes/onboarding/index.tsx
+++ b/src/routes/onboarding/index.tsx
@@ -19,7 +19,7 @@ const Navigator = () => {
   console.log("active step", activeStep);
 
   return (
-    <div className="absolute top-5 w-full flex justify-center gap-2 z-10">
+    <div className="hidden md:flex absolute top-5 w-full justify-center gap-2 z-10">
       {steps.map((stepToRender, indexToRender) => {
         const clickable = canJumpTo.includes(stepToRender.name);
         const itemClass = clsx(`text-sm text-gray-600`, clickable && "cursor-pointer hover:text-gray-500", indexToRender === activeStep && "font-bold text-black", indexToRender >= activeStep && "text-gray-400");
@@ -52,7 +52,7 @@ export default function OnboardingPage() {
       <Helmet>
         <title>{t("onboarding.title")}</title>
       </Helmet>
-      <div className="h-screen overflow-y-auto">
+      <div className="h-screen bg-gray-200 dark:bg-gray-900 overflow-y-auto">
         <Wizard header={<Navigator />}>
           <WelcomePage />
           <ServerName serverName={serverName} setServerName={setServerName} />
diff --git a/src/routes/onboarding/steps/UpdateFrontendURL.tsx b/src/routes/onboarding/steps/UpdateFrontendURL.tsx
index d6833ed0..f7b98615 100644
--- a/src/routes/onboarding/steps/UpdateFrontendURL.tsx
+++ b/src/routes/onboarding/steps/UpdateFrontendURL.tsx
@@ -35,12 +35,12 @@ const UpdateFrontendURL = ({ refreshInviteLink }: Props) => {
         }
     }, [isSuccess]);
     return (
-        <div className="absolute left-1/2 -translate-x-1/2 bottom-8 border-2 border-solid border-primary-300 bg-primary-25 rounded-lg px-2 py-3 flex justify-start gap-4">
+        <div className="absolute left-1/2 -translate-x-1/2 bottom-8 border-2 border-solid border-primary-300 dark:border-primary-700 bg-primary-25 dark:bg-primary-900 rounded-lg px-2 py-3 flex justify-start gap-4">
             <InfoIcon />
             <div className="flex flex-col items-start gap-2">
-                <span className="text-sm text-primary-700 mb-1">{t("update_domain_tip")}</span>
-                <div className="w-[400px] rounded flex gap-2">
-                    <StyledInput type={"url"} className="!shadow-none !bg-transparent" placeholder="Frontend URL" value={frontUrl} onChange={handleUpdateUrl} />
+                <span className="text-sm text-primary-700 dark:text-primary-300 mb-1">{t("update_domain_tip")}</span>
+                <div className="w-[300px] md:w-[400px] rounded flex gap-2">
+                    <StyledInput type={"url"} className="!shadow-none md:!bg-transparent" placeholder="Frontend URL" value={frontUrl} onChange={handleUpdateUrl} />
                     <StyledButton disabled={!frontUrl || isLoading} onClick={updateFrontUrl} className="small ">
                         {ct("action.update")}
                     </StyledButton>
diff --git a/src/routes/onboarding/steps/admin-account.tsx b/src/routes/onboarding/steps/admin-account.tsx
index ef9b9a9f..06f6891c 100644
--- a/src/routes/onboarding/steps/admin-account.tsx
+++ b/src/routes/onboarding/steps/admin-account.tsx
@@ -74,7 +74,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
   }, [isUpdatedServer]);
 
   return (
-    <div className="h-full flex-center flex-col text-center w-[360px] m-auto">
+    <div className="h-full flex-center flex-col text-center w-[360px] m-auto dark:text-gray-100">
       <span className="text-2xl mb-2 font-bold">{t("admin_title")}</span>
       <span className="text-sm mb-6">{t("admin_desc")}</span>
       <form ref={formRef} action="/" className="flex flex-col gap-2 w-full">
diff --git a/src/routes/onboarding/steps/done-page.tsx b/src/routes/onboarding/steps/done-page.tsx
index 86f58f03..4a932547 100644
--- a/src/routes/onboarding/steps/done-page.tsx
+++ b/src/routes/onboarding/steps/done-page.tsx
@@ -9,7 +9,7 @@ export default function DonePage({ serverName }: { serverName: string }) {
   const navigate = useNavigate();
 
   return (
-    <div className="h-full flex-center flex-col text-center w-[588px] m-auto">
+    <div className="h-full px-2 flex-center flex-col text-center md:w-[588px] m-auto dark:text-gray-100">
       <span className="text-2xl font-bold mb-2">{t("done_welcome", { serverName })}</span>
       <span className="text-sm mb-12">{t("done_title")}</span>
       <span className="text-xl mb-12">
diff --git a/src/routes/onboarding/steps/invite-link.tsx b/src/routes/onboarding/steps/invite-link.tsx
index 858cec05..ebd3c65a 100644
--- a/src/routes/onboarding/steps/invite-link.tsx
+++ b/src/routes/onboarding/steps/invite-link.tsx
@@ -14,11 +14,11 @@ export default function InviteLink() {
   const { link, linkCopied, copyLink, generateNewLink } = useInviteLink();
 
   return (
-    <div className="h-full flex-center flex-col relative">
+    <div className="px-2 h-full flex-center flex-col relative dark:text-gray-100">
       <span className="text-2xl mb-2 font-bold">{t("invite_title")}</span>
-      <span className="text-sm mb-10 text-gray-400">{t("last_tip")}</span>
+      <span className="text-sm mb-10 text-gray-400 dark:text-gray-600">{t("last_tip")}</span>
       <span className="text-sm text-gray-500 mb-2 font-semibold">{t("last_desc")}</span>
-      <div className="w-[400px] rounded shadow-md flex border border-solid border-gray-100">
+      <div className="w-full md:w-[400px] rounded shadow-md flex border border-solid border-gray-100">
         <StyledInput className="large !border-none !shadow-none" readOnly placeholder="Generating" value={link} />
         <StyledButton onClick={copyLink} className="ghost small border_less !px-2 hover:!text-[#088ab2]">
           {linkCopied ? "Copied" : ct("action.copy")}
diff --git a/src/routes/onboarding/steps/server-name.tsx b/src/routes/onboarding/steps/server-name.tsx
index b4de9cd0..e550070b 100644
--- a/src/routes/onboarding/steps/server-name.tsx
+++ b/src/routes/onboarding/steps/server-name.tsx
@@ -14,9 +14,9 @@ const ServerName: FC<Props> = ({ serverName, setServerName }) => {
   const { nextStep } = useWizard();
 
   return (
-    <div className="h-full flex-center flex-col text-center w-[360px] m-auto">
+    <div className="h-full flex-center flex-col text-center w-[360px] m-auto dark:text-gray-200">
       <span className="text-2xl mb-2 font-bold">{t("new_server")}</span>
-      <span className="text-sm mb-6 text-gray-400 ">
+      <span className="text-sm mb-6 text-gray-400 dark:text-gray-600">
         {t("server_desc")}
       </span>
       <StyledInput
diff --git a/src/routes/onboarding/steps/welcome-page.tsx b/src/routes/onboarding/steps/welcome-page.tsx
index b53b7411..9b84c813 100644
--- a/src/routes/onboarding/steps/welcome-page.tsx
+++ b/src/routes/onboarding/steps/welcome-page.tsx
@@ -8,7 +8,7 @@ export default function WelcomePage() {
   const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   const { nextStep } = useWizard();
   return (
-    <div className="flex-center flex-col h-full text-center">
+    <div className="flex-center flex-col h-full text-center dark:text-gray-100">
       <span className="text-2xl mb-2 font-bold">{t("welcome")}</span>
       <span className="text-sm mb-6">
         {t("welcome_desc")}
diff --git a/src/routes/onboarding/steps/who-can-sign-up.tsx b/src/routes/onboarding/steps/who-can-sign-up.tsx
index 570586e2..3e3ca14f 100644
--- a/src/routes/onboarding/steps/who-can-sign-up.tsx
+++ b/src/routes/onboarding/steps/who-can-sign-up.tsx
@@ -41,7 +41,7 @@ export default function SignUpSetting() {
 
 
   return (
-    <div className="h-full flex-center flex-col text-center w-[512px] m-auto">
+    <div className="h-full px-2 flex-center flex-col text-center w-full md:w-[512px] m-auto dark:text-gray-100">
       <span className="font-bold text-2xl mb-2">{t("onboarding.invite_title")}</span>
       <span className="text-sm mb-6">{t("onboarding.invite_desc")}</span>
       {value && <StyledRadio