diff --git a/ui/public/index.html b/ui/public/index.html
index 5d10bb2f..ac5f558f 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -9,12 +9,14 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root">
-      <div id="spin-mask" hidden>
-        <script>
-          try {
-            document.querySelector('#spin-mask').removeAttribute('hidden');
-          } catch (ex){}
-        </script>
+      <div id="spin-mask">
+        <noscript>
+          <style>
+            #spin-mask {
+              display: none !important;
+            }
+          </style>
+        </noscript>
         <style>
           @keyframes _doc-spin {
             to { transform: rotate(360deg) }
diff --git a/ui/src/components/CustomizeTheme/index.tsx b/ui/src/components/CustomizeTheme/index.tsx
index 1310358c..674c0fbe 100644
--- a/ui/src/components/CustomizeTheme/index.tsx
+++ b/ui/src/components/CustomizeTheme/index.tsx
@@ -9,7 +9,7 @@ import { themeSettingStore } from '@/stores';
 const Index: FC = () => {
   const { theme, theme_config } = themeSettingStore((_) => _);
   let primaryColor;
-  if (theme_config[theme]?.primary_color) {
+  if (theme_config?.[theme]?.primary_color) {
     primaryColor = Color(theme_config[theme].primary_color);
   }
 
diff --git a/ui/src/components/DiffContent/index.tsx b/ui/src/components/DiffContent/index.tsx
index 922e25c1..d2024a00 100644
--- a/ui/src/components/DiffContent/index.tsx
+++ b/ui/src/components/DiffContent/index.tsx
@@ -1,6 +1,6 @@
 import { FC, memo } from 'react';
 
-import clssnames from 'classnames';
+import classnames from 'classnames';
 
 import { Tag } from '@/components';
 import { diffText } from '@/utils';
@@ -90,7 +90,7 @@ const Index: FC<Props> = ({
       )}
       {objectType === 'tag' && opts?.showTagUrlSlug && (
         <div
-          className={clssnames(
+          className={classnames(
             'fs-14 font-monospace',
             newData.original_text && 'mb-4',
           )}>
diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
index 6f286651..226bcd2c 100644
--- a/ui/src/components/Header/index.tsx
+++ b/ui/src/components/Header/index.tsx
@@ -72,17 +72,17 @@ const Header: FC = () => {
     }
   }, [location.pathname]);
 
+  let navbarStyle = 'theme-colored';
   const { theme, theme_config } = themeSettingStore((_) => _);
-  let themeType = 'theme-colored';
-  if (theme && theme_config[theme]) {
-    themeType = `theme-${theme_config[theme].navbar_style}`;
+  if (theme_config?.[theme]?.navbar_style) {
+    navbarStyle = `theme-${theme_config[theme].navbar_style}`;
   }
 
   return (
     <Navbar
-      variant={themeType === 'theme-colored' ? 'dark' : ''}
+      variant={navbarStyle === 'theme-colored' ? 'dark' : ''}
       expand="lg"
-      className={classnames('sticky-top', themeType)}
+      className={classnames('sticky-top', navbarStyle)}
       id="header">
       <Container className="d-flex align-items-center">
         <Navbar.Toggle
@@ -124,7 +124,7 @@ const Header: FC = () => {
                 {loginSetting.allow_new_registrations && (
                   <Button
                     variant={
-                      themeType === 'theme-colored' ? 'light' : 'primary'
+                      navbarStyle === 'theme-colored' ? 'light' : 'primary'
                     }
                     href="/users/register">
                     {t('btns.signup')}
@@ -181,8 +181,8 @@ const Header: FC = () => {
                   <Link
                     to="/questions/ask"
                     className={classnames('text-capitalize text-nowrap btn', {
-                      'btn-light': themeType !== 'theme-light',
-                      'btn-primary': themeType === 'theme-light',
+                      'btn-light': navbarStyle !== 'theme-light',
+                      'btn-primary': navbarStyle === 'theme-light',
                     })}>
                     {t('btns.add_question')}
                   </Link>
@@ -199,8 +199,8 @@ const Header: FC = () => {
                 <Button
                   variant="link"
                   className={classnames('me-2', {
-                    'link-light': themeType === 'theme-colored',
-                    'link-primary': themeType !== 'theme-colored',
+                    'link-light': navbarStyle === 'theme-colored',
+                    'link-primary': navbarStyle !== 'theme-colored',
                   })}
                   href="/users/login">
                   {t('btns.login')}
@@ -208,7 +208,7 @@ const Header: FC = () => {
                 {loginSetting.allow_new_registrations && (
                   <Button
                     variant={
-                      themeType === 'theme-colored' ? 'light' : 'primary'
+                      navbarStyle === 'theme-colored' ? 'light' : 'primary'
                     }
                     href="/users/register">
                     {t('btns.signup')}
diff --git a/ui/src/pages/Admin/Themes/index.tsx b/ui/src/pages/Admin/Themes/index.tsx
index 55806339..5c78bf3b 100644
--- a/ui/src/pages/Admin/Themes/index.tsx
+++ b/ui/src/pages/Admin/Themes/index.tsx
@@ -23,7 +23,7 @@ const Index: FC = () => {
         description: t('themes.text'),
         enum: themeSetting?.theme_options?.map((_) => _.value),
         enumNames: themeSetting?.theme_options?.map((_) => _.label),
-        default: 'default',
+        default: themeSetting?.theme_options?.[0]?.value,
       },
       navbar_style: {
         type: 'string',
@@ -31,12 +31,13 @@ const Index: FC = () => {
         description: t('navbar_style.text'),
         enum: ['colored', 'light'],
         enumNames: ['Colored', 'Light'],
+        default: 'colored',
       },
       primary_color: {
         type: 'string',
         title: t('primary_color.label'),
         description: t('primary_color.text'),
-        default: '#ffffff',
+        default: '#0033FF',
       },
     },
   };
@@ -68,6 +69,7 @@ const Index: FC = () => {
         },
       },
     };
+
     putThemeSetting(reqParams)
       .then(() => {
         Toast.onShow({
diff --git a/ui/src/stores/themeSetting.ts b/ui/src/stores/themeSetting.ts
index d9abbc2e..16ba9f36 100644
--- a/ui/src/stores/themeSetting.ts
+++ b/ui/src/stores/themeSetting.ts
@@ -5,12 +5,19 @@ import { AdminSettingsTheme } from '@/common/interface';
 interface IType {
   theme: AdminSettingsTheme['theme'];
   theme_config: AdminSettingsTheme['theme_config'];
+  theme_options: AdminSettingsTheme['theme_options'];
   update: (params: AdminSettingsTheme) => void;
 }
 
 const store = create<IType>((set) => ({
-  theme: '',
-  theme_config: {},
+  theme: 'default',
+  theme_options: [{ label: 'Default', value: 'default' }],
+  theme_config: {
+    default: {
+      navbar_style: 'colored',
+      primary_color: '#0033FF',
+    },
+  },
   update: (params) =>
     set((state) => {
       return {
diff --git a/ui/src/utils/common.ts b/ui/src/utils/common.ts
index cb6aea15..ec22ccc3 100644
--- a/ui/src/utils/common.ts
+++ b/ui/src/utils/common.ts
@@ -187,7 +187,7 @@ function diffText(newText: string, oldText: string): string {
           '↵\n',
         )}</span>`;
       }
-      return `<span class="review-text-add d-block">${part.value}</span>`;
+      return `<span class="review-text-add">${part.value}</span>`;
     }
     if (part.removed) {
       if (part.value.replace(/\n/g, '').length <= 0) {
