diff --git a/packages/nc-gui/assets/css/theme-overrides.scss b/packages/nc-gui/assets/css/theme-overrides.scss
index ea4d042458..05e1c9139a 100644
--- a/packages/nc-gui/assets/css/theme-overrides.scss
+++ b/packages/nc-gui/assets/css/theme-overrides.scss
@@ -11,6 +11,11 @@ body {
   @apply !bg-nc-bg-default !text-nc-content-gray;
 }
 
+// Drawer
+.ant-drawer-content {
+  @apply !bg-nc-bg-default;
+}
+
 // Dropdown Menu
 .ant-dropdown-menu.ant-dropdown-menu-root {
   @apply !bg-nc-bg-default !text-nc-content-gray;
@@ -24,6 +29,34 @@ body {
 
 // Dark theme specific style
 [theme='dark'] {
+  /* Change autocomplete styles in WebKit */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid var(--nc-border-grey-medium);
+    -webkit-text-fill-color: var(--nc-content-grey-default);
+  }
+
+  input,
+  textarea,
+  .ant-input-affix-wrapper {
+    @apply !bg-transparent text-nc-content-gray;
+  }
+
+  .ant-input-affix-wrapper {
+    @apply border-nc-border-gray-medium;
+
+    .anticon {
+      @apply text-nc-content-gray-subtle;
+    }
+  }
+
   // Divider
   .ant-divider {
     @apply border-nc-border-gray-light;
diff --git a/packages/nc-gui/components/dashboard/FeatureExperimentation.vue b/packages/nc-gui/components/dashboard/FeatureExperimentation.vue
index 6aed2290cb..559fb4d1f3 100644
--- a/packages/nc-gui/components/dashboard/FeatureExperimentation.vue
+++ b/packages/nc-gui/components/dashboard/FeatureExperimentation.vue
@@ -141,17 +141,17 @@ onUnmounted(() => {
     :closable="false"
   >
     <div class="flex flex-col h-full">
-      <div class="flex items-center gap-3 px-2 !pl-4 border-b-1 h-[var(--toolbar-height)] flex-none border-gray-200">
-        <component :is="iconMap.bulb" class="text-gray-700 opacity-85 h-5 w-5" @click="handleClick" />
-        <h1 class="text-base !text-gray-700 font-weight-700 p-0 m-0">
+      <div class="flex items-center gap-3 px-2 !pl-4 border-b-1 h-[var(--toolbar-height)] flex-none border-nc-border-gray-medium">
+        <component :is="iconMap.bulb" class="text-nc-content-inverted-secondary opacity-85 h-5 w-5" @click="handleClick" />
+        <h1 class="text-base !text-nc-content-inverted-secondary font-weight-700 p-0 m-0">
           {{ $t('general.featurePreview') }}
         </h1>
         <nc-button type="text" class="!w-8 !h-8 !min-w-0 ml-auto" @click="value = false">
-          <GeneralIcon icon="close" class="!text-gray-700" />
+          <GeneralIcon icon="close" class="!text-nc-content-inverted-secondary" />
         </nc-button>
       </div>
 
-      <div class="text-sm font-weight-500 text-gray-600 leading-5 m-4 mb-0 flex items-center justify-between gap-3 pr-3">
+      <div class="text-sm font-weight-500 text-nc-content-gray-subtle2 leading-5 m-4 mb-0 flex items-center justify-between gap-3 pr-3">
         <span>
           {{ $t('labels.toggleExperimentalFeature') }}
         </span>
@@ -169,7 +169,7 @@ onUnmounted(() => {
 
       <div class="h-full overflow-y-auto nc-scrollbar-thin flex-grow p-4 !rounded-lg">
         <div ref="contentRef" class="!rounded-lg">
-          <div class="sticky top-0 bg-white z-10 mb-2">
+          <div class="sticky top-0 bg-nc-bg-default z-10 mb-2">
             <a-input v-model:value="searchQuery" type="text" placeholder="Search features..." class="nc-input-sm nc-input-shadow">
               <template #prefix>
                 <GeneralIcon
@@ -184,29 +184,29 @@ onUnmounted(() => {
           </div>
           <div
             v-if="filteredFeatures?.length"
-            class="border-1 !border-gray-200 !rounded-lg max-h-[calc(100vh-200px)] overflow-y-auto nc-scrollbar-thin"
+            class="border-1 !border-nc-border-gray-medium !rounded-lg max-h-[calc(100vh-200px)] overflow-y-auto nc-scrollbar-thin"
           >
             <div class="flex flex-col">
               <template v-for="feature in filteredFeatures" :key="feature.id">
                 <div
                   v-if="isFeatureVisible(feature)"
-                  class="border-b-1 px-3 flex gap-2 flex-col py-2 !border-gray-200 last:border-b-0"
+                  class="border-b-1 px-3 flex gap-2 flex-col py-2 !border-nc-border-gray-medium last:border-b-0"
                 >
                   <div class="flex items-center justify-between">
-                    <div class="text-sm text-gray-800 !font-weight-600">
+                    <div class="text-sm text-nc-content-gray !font-weight-600">
                       {{ feature.title }}
                     </div>
                     <NcSwitch v-model:checked="selectedFeatures[feature.id]" @change="saveExperimentalFeatures" />
                   </div>
 
-                  <div class="text-gray-500 leading-4 text-[13px] font-weight-500">
+                  <div class="text-nc-content-gray-muted leading-4 text-[13px] font-weight-500">
                     {{ feature.description }}
                   </div>
                 </div>
               </template>
             </div>
           </div>
-          <div v-else class="px-2 py-6 text-center text-gray-500 flex flex-col items-center gap-6">
+          <div v-else class="px-2 py-6 text-center text-nc-content-gray-muted flex flex-col items-center gap-6">
             <img
               src="~assets/img/placeholder/no-search-result-found.png"
               class="!w-[164px] flex-none"
@@ -241,7 +241,7 @@ onUnmounted(() => {
   }
 
   .nc-list-item {
-    @apply h-8 hover:bg-nc-background-grey-light gap-x-1.5;
+    @apply h-8 hover:bg-nc-bg-gray-light gap-x-1.5;
   }
 }
 </style>