diff --git a/frontend/src/_styles/componentdesign.scss b/frontend/src/_styles/componentdesign.scss
index 7f7300863d..960e1449ed 100644
--- a/frontend/src/_styles/componentdesign.scss
+++ b/frontend/src/_styles/componentdesign.scss
@@ -14,7 +14,7 @@
     --background-success-weak: #E8F3EB;
     --background-error-strong: #D72D39;
     --background-error-weak: #FCEEEF;
-    --background-warning-stong: #BF4F03;
+    --background-warning-strong: #BF4F03;
     --background-warning-weak: #FAEFE7;
     --background-inverse: #1B1F24;
 
@@ -121,7 +121,7 @@
     --background-accent-weak: #0D183C;
     --background-success-strong: #318344;
     --background-success-weak: #05200B;
-    --background-warning-stong: #BA5722;
+    --background-warning-strong: #BA5722;
     --background-warning-weak: #301100;
     --background-error-strong: #D03F43;
     --background-error-weak: #390809;
diff --git a/frontend/src/_styles/dropdown-custom.scss b/frontend/src/_styles/dropdown-custom.scss
index 751148c134..7a45c3e2cc 100644
--- a/frontend/src/_styles/dropdown-custom.scss
+++ b/frontend/src/_styles/dropdown-custom.scss
@@ -56,6 +56,7 @@
         width: 262px;
         height: 32px;
         border: none !important;
+        background-color: var(--page-default) !important;
 
         &:hover {
             background: var(--slate2) !important;
diff --git a/frontend/src/_styles/global-datasources.scss b/frontend/src/_styles/global-datasources.scss
index e04725a427..98b144d1df 100644
--- a/frontend/src/_styles/global-datasources.scss
+++ b/frontend/src/_styles/global-datasources.scss
@@ -4,7 +4,7 @@
 .global-datasources-sidebar {
     height: calc(100vh - 64px);
     max-width: 288px;
-    background: var(--base);
+    background: var(--page-default);
     display: grid;
     grid-template-rows: auto 1fr auto;
     border-right: 1px solid var(--slate5);
@@ -177,6 +177,7 @@
 }
 
 .datasource-list-container {
+    background-color: var(--page-default);
     overflow-y: auto;
     max-height: calc(100vh - 64px);
 
diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
index a6935ebfc8..50866f9595 100644
--- a/frontend/src/_styles/left-sidebar.scss
+++ b/frontend/src/_styles/left-sidebar.scss
@@ -1,8 +1,7 @@
 @import "./colors.scss";
 @import "./designtheme.scss";
-
 .left-sidebar {
-  background: var(--base) !important;
+  background: var(--page-default) !important;
   display: flex;
   gap: 16px;
 
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 0fd6189394..ca9f4b26cf 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -17,7 +17,7 @@
 @import 'tailwindcss/utilities';
 @import "./componentdesign.scss";
 @import './pages-sidebar.scss';
-
+@import "./componentdesign.scss";
 /* ibm-plex-sans-100 - latin */
 @font-face {
   font-display: swap;
@@ -473,10 +473,10 @@ button {
     left: 0;
     overflow-x: hidden;
     flex: 1 1 auto;
-    background-color: var(--base) !important;
     background-clip: border-box;
     margin-top: 48px;
     padding-top: 8px;
+    background: var(--base) !important;
 
     .accordion-item {
       border: solid var(--slate5);
@@ -7542,6 +7542,7 @@ tbody {
 
 .workspace-content-wrapper,
 .database-page-content-wrap {
+  background-color: var(--page-default);
   height: calc(100vh - 64px) !important;
 }
 
@@ -7553,7 +7554,7 @@ tbody {
 .organization-page-sidebar {
   height: calc(100vh - 64px);
   max-width: 288px;
-  background-color: var(--base);
+  background-color: var(--page-default);
   border-right: 1px solid var(--slate5) !important;
   display: grid !important;
   grid-template-rows: auto 1fr auto !important;
@@ -7562,7 +7563,7 @@ tbody {
 .marketplace-page-sidebar {
   height: calc(100vh - 64px);
   max-width: 288px;
-  background-color: var(--base);
+  background-color: var(--page-default);
   border-right: 1px solid var(--slate5) !important;
   display: grid !important;
   grid-template-rows: auto 1fr auto !important;
@@ -7570,7 +7571,7 @@ tbody {
 
 .home-page-sidebar {
   max-width: 288px;
-  background-color: var(--base);
+  background-color: var(--page-default);
   border-right: 1px solid var(--slate5);
   display: grid;
   grid-template-rows: auto 1fr auto;
@@ -7595,7 +7596,7 @@ tbody {
 
 .tooljet-database-sidebar {
   max-width: 288px;
-  background: var(--base);
+  background: var(--page-default);
   border-right: 1px solid var(--slate5);
   height: calc(100vh - 64px) !important;
 
@@ -7989,6 +7990,7 @@ tbody {
 
 
 .tj-dashboard-section-header {
+  background-color: var(--page-default);
   max-width: 288px;
   max-height: 64px;
   padding-top: 20px;
@@ -8055,6 +8057,7 @@ tbody {
   border-radius: 6px;
 
   .react-select__control {
+    background-color: var(--page-default);
     border: none !important;
   }
 }
@@ -8116,7 +8119,7 @@ tbody {
 
 .home-page-footer {
   height: 52px;
-  background-color: var(--base) !important;
+  background-color: var(--page-default) !important;
   border-top: 1px solid var(--slate5) !important;
   width: calc(100% - 336px) !important;
 
@@ -8250,6 +8253,7 @@ tbody {
 }
 
 .home-page-content {
+  background-color: var(--page-default);
   height: calc(100vh - 64px) !important;
   overflow-y: auto;
   position: relative;
@@ -8785,6 +8789,7 @@ tbody {
 }
 
 .tj-dashboard-header-wrap {
+  background-color: var(--page-default);
   padding-top: 22px;
   padding-bottom: 22px;
   padding-left: 40px;
@@ -11375,7 +11380,7 @@ tbody {
 }
 
 .profile-page-content-wrap {
-  background-color: var(--slate2);
+  background-color: var(--page-default);
   padding-top: 40px;
 }
 
@@ -11625,6 +11630,7 @@ tbody {
 .marketplace-body {
   height: calc(100vh - 64px) !important;
   overflow-y: auto;
+  background-color: var(--page-default);
 }
 
 .plugins-card {
@@ -12834,6 +12840,7 @@ tbody {
 }
 
 .workspace-constants-wrapper {
+  background-color: var(--page-default);
   height: calc(100vh - 64px);
   display: flex;
   align-items: center;