diff --git a/changelogs/fragments/8480.yml b/changelogs/fragments/8480.yml
new file mode 100644
index 000000000000..2efb41870b24
--- /dev/null
+++ b/changelogs/fragments/8480.yml
@@ -0,0 +1,2 @@
+chore:
+- Update oui to 1.15 and consume $ouiSideNavBackgroundColor ([#8480](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8480))
\ No newline at end of file
diff --git a/package.json b/package.json
index d48ce47f6480..bd3bcc0a5fdd 100644
--- a/package.json
+++ b/package.json
@@ -150,7 +150,7 @@
   "dependencies": {
     "@aws-crypto/client-node": "^3.1.1",
     "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.14.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.15.0",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@elastic/request-crypto": "2.0.0",
diff --git a/packages/osd-ui-framework/package.json b/packages/osd-ui-framework/package.json
index 96944fbb2f18..0a6c75867440 100644
--- a/packages/osd-ui-framework/package.json
+++ b/packages/osd-ui-framework/package.json
@@ -23,7 +23,7 @@
     "enzyme-adapter-react-16": "^1.9.1"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.14.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.15.0",
     "@osd/babel-preset": "1.0.0",
     "@osd/optimizer": "1.0.0",
     "comment-stripper": "^0.0.4",
diff --git a/packages/osd-ui-shared-deps/package.json b/packages/osd-ui-shared-deps/package.json
index d3c493300e4b..9e2a5646a872 100644
--- a/packages/osd-ui-shared-deps/package.json
+++ b/packages/osd-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "31.1.0",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.14.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.15.0",
     "@elastic/numeral": "npm:@amoo-miki/numeral@2.6.0",
     "@opensearch/datemath": "5.0.3",
     "@osd/i18n": "1.0.0",
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index 529f0f749ebb..e410361bef86 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -1,10 +1,8 @@
-@import "./variables";
-
 .context-nav-wrapper {
   border: none !important;
   border-top-right-radius: $euiSizeL;
   border-bottom-right-radius: $euiSizeL;
-  background-color: $ouiSideNavBackgroundColorTemp;
+  background-color: $euiSideNavBackgroundColor;
   overflow: hidden;
 
   .nav-link-item {
diff --git a/src/core/public/chrome/ui/header/variables.scss b/src/core/public/chrome/ui/header/variables.scss
deleted file mode 100644
index ca276818b657..000000000000
--- a/src/core/public/chrome/ui/header/variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$ouiSideNavBackgroundColorTemp: lightOrDarkTheme(#ebe4df, #001c28); /* stylelint-disable-line */ 
diff --git a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
index e437be94ff0f..ea382b84aee1 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
@@ -460,11 +460,11 @@ exports[`DataSourceTable should get datasources successful should render normall
         >
           <EuiFlexGroup
             alignItems="center"
-            gutterSize="m"
+            gutterSize="s"
             wrap={true}
           >
             <div
-              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
             >
               <EuiFlexItem
                 className="euiSearchBar__searchHolder"
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
index 5b9ade16147a..f9633228bfc1 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
@@ -176,11 +176,11 @@ exports[`ManageDirectQueryDataConnectionsTable should get direct query connectio
                     >
                       <EuiFlexGroup
                         alignItems="center"
-                        gutterSize="m"
+                        gutterSize="s"
                         wrap={true}
                       >
                         <div
-                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
                         >
                           <EuiFlexItem
                             className="euiSearchBar__searchHolder"
@@ -1340,11 +1340,11 @@ exports[`ManageDirectQueryDataConnectionsTable should get direct query connectio
                     >
                       <EuiFlexGroup
                         alignItems="center"
-                        gutterSize="m"
+                        gutterSize="s"
                         wrap={true}
                       >
                         <div
-                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
                         >
                           <EuiFlexItem
                             className="euiSearchBar__searchHolder"
diff --git a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss
index 4f9b92b074c5..b62ea9dde66a 100644
--- a/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss
+++ b/src/plugins/workspace/public/components/workspace_selector/workspace_selector.scss
@@ -1,5 +1,3 @@
-@import "../../../../../core/public/chrome/ui/header/variables";
-
 .workspaceNameLabel {
-  background-color: $ouiSideNavBackgroundColorTemp;
+  background-color: $euiSideNavBackgroundColor;
 }
diff --git a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
index 6a3bb9a247bf..114143885ee3 100644
--- a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.14.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.15.0",
     "@osd/plugin-helpers": "1.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.12.0",
diff --git a/test/plugin_functional/plugins/osd_sample_panel_action/package.json b/test/plugin_functional/plugins/osd_sample_panel_action/package.json
index 31437125cc71..e552a2e5e3f1 100644
--- a/test/plugin_functional/plugins/osd_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/osd_sample_panel_action/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.14.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.15.0",
     "react": "^16.14.0",
     "typescript": "4.0.2"
   }
diff --git a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
index c732cae73746..a85769bad717 100644
--- a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json
@@ -12,7 +12,7 @@
     "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.14.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.15.0",
     "@osd/plugin-helpers": "1.0.0",
     "react": "^16.14.0",
     "typescript": "4.0.2"
diff --git a/yarn.lock b/yarn.lock
index 9cb8adaca610..d7b933241cce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1431,10 +1431,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@npm:@opensearch-project/oui@1.14.0":
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.14.0.tgz#137aca372fd4d83e33704cdefbf3245c6ba28164"
-  integrity sha512-vZr9nYWo6vb9+xE9ktgPL8c3ltfcMdPEBmATei1xTEWIKOfzvvLbLAVcf+UTQc+8+GOYayKB9bgENsuV006sAA==
+"@elastic/eui@npm:@opensearch-project/oui@1.15.0":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.15.0.tgz#bec1bcb15cee9bcc31c71920b1b491d0cb60a8d9"
+  integrity sha512-xa/ygOlmNnQy+LcSgsbr9WCL8jt6HzWoJcV4tI0uPo1j7GNTyi6IccE30CXjmUEqh3Fce82ghKzBuWGreJXGeQ==
   dependencies:
     "@types/chroma-js" "^2.4.0"
     "@types/react-beautiful-dnd" "^13.1.3"