diff --git a/CHANGELOG.md b/CHANGELOG.md
index 545ee8110c8c..ba0570bd4ce3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -70,6 +70,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Console] Migrate `/lib/autocomplete/` module to TypeScript ([#4148](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4148))
 - [Console] Migrate `/lib/!autocomplete/` module to TypeScript ([#4150](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4150))
 - [Dashboard] Restructure the `Dashboard` plugin folder to be more cohesive with the project ([#4575](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4575))
+- Refactor logo usage to centralize and optimize assets and improve tests ([#4702](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4702))
 
 ### 🔩 Tests
 
diff --git a/packages/osd-dev-utils/src/serializers/flat_object_serializer.ts b/packages/osd-dev-utils/src/serializers/flat_object_serializer.ts
new file mode 100644
index 000000000000..e3dec842ad9f
--- /dev/null
+++ b/packages/osd-dev-utils/src/serializers/flat_object_serializer.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const walk = (value: any, path: string[] = [], collector: string[] = []) => {
+  let objValue;
+  switch (Object.prototype.toString.call(value)) {
+    case '[object Map]':
+    case '[object WeakMap]':
+      // Turn into an Object so it can be iterated
+      objValue = Object.fromEntries(value);
+      break;
+
+    case '[object Set]':
+    case '[object WeakSet]':
+      // Turn into an Array so it can be iterated
+      objValue = Array.from(value);
+      break;
+
+    case '[object Object]':
+    case '[object Array]':
+      objValue = value;
+      break;
+
+    case '[object RegExp]':
+    case '[object Function]':
+    case '[object Date]':
+    case '[object Boolean]':
+    case '[object Number]':
+    case '[object Symbol]':
+    case '[object Error]':
+      collector.push(`${path.join('.')} = ${value.toString()}`);
+      break;
+
+    case '[object Null]':
+      collector.push(`${path.join('.')} = null`);
+      break;
+
+    case '[object Undefined]':
+      collector.push(`${path.join('.')} = undefined`);
+      break;
+
+    case '[object String]':
+      collector.push(`${path.join('.')} = ${JSON.stringify(value)}`);
+      break;
+
+    case '[object BigInt]':
+      collector.push(`${path.join('.')} = ${value.toString()}n`);
+      break;
+
+    default:
+      // if it is a TypedArray, turn it into an array
+      if (value instanceof Object.getPrototypeOf(Uint8Array)) {
+        objValue = Array.from(value);
+      }
+  }
+
+  // If objValue is set, it is an Array or Object that can be iterated; else bail.
+  if (!objValue) return collector;
+
+  if (Array.isArray(objValue)) {
+    objValue.forEach((v, i) => {
+      walk(v, [...path, i.toString()], collector);
+    });
+  } else {
+    // eslint-disable-next-line guard-for-in
+    for (const key in objValue) {
+      walk(objValue[key], [...path, key], collector);
+    }
+  }
+
+  return collector;
+};
+
+/**
+ * The serializer flattens objects into dotified key-value pairs, each on a line, and
+ * sorts them to aid in diff-ing.
+ *
+ * Example:
+ * { K: ["a", "b", { X: 1n }], Y: 1}
+ *
+ * Serialized:
+ * K.0 = "a"
+ * K.1 = "b"
+ * K.2.X = 1n
+ * Y = 1
+ */
+export const flatObjectSerializer = {
+  test: (value: any) =>
+    ['[object Object]', '[object Array]'].includes(Object.prototype.toString.call(value)),
+  serialize: (value: any) => walk(value).sort().join('\n'),
+};
diff --git a/packages/osd-dev-utils/src/serializers/index.ts b/packages/osd-dev-utils/src/serializers/index.ts
index 2755a5a79147..e31ef04898bc 100644
--- a/packages/osd-dev-utils/src/serializers/index.ts
+++ b/packages/osd-dev-utils/src/serializers/index.ts
@@ -34,3 +34,4 @@ export * from './recursive_serializer';
 export * from './any_instance_serizlizer';
 export * from './replace_serializer';
 export * from './strip_promises_serizlizer';
+export * from './flat_object_serializer';
diff --git a/src/core/common/index.ts b/src/core/common/index.ts
new file mode 100644
index 000000000000..64fb2c6f4353
--- /dev/null
+++ b/src/core/common/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ImageType, ColorScheme, getLogos } from './logos';
+export type { Logos } from './types';
diff --git a/src/core/common/logos/__snapshots__/get_logos.test.ts.snap b/src/core/common/logos/__snapshots__/get_logos.test.ts.snap
new file mode 100644
index 000000000000..6c7746f3533a
--- /dev/null
+++ b/src/core/common/logos/__snapshots__/get_logos.test.ts.snap
@@ -0,0 +1,613 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getLogos when branding has both light and dark logos and only light spinners returns the correct logos 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos and only light spinners returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo-darkmode.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark-darkmode.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark-darkmode.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo-darkmode.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has both light and dark logos and only light spinners returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos and spinners returns the correct logos 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner-darkmode.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos and spinners returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner-darkmode.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner-darkmode.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo-darkmode.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark-darkmode.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark-darkmode.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo-darkmode.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has both light and dark logos and spinners returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner-darkmode.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos returns the correct logos 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark-darkmode.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has both light and dark logos returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark-darkmode.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark-darkmode.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo-darkmode.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark-darkmode.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark-darkmode.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo-darkmode.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has both light and dark logos returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark-darkmode.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo-darkmode.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark-darkmode.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark-darkmode.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo-darkmode.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has only light logos and spinner returns the correct logos 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has only light logos and spinner returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has only light logos and spinner returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "custom"
+AnimatedMark.dark.url = "/custom/branded/spinner.svg"
+AnimatedMark.light.type = "custom"
+AnimatedMark.light.url = "/custom/branded/spinner.svg"
+AnimatedMark.type = "custom"
+AnimatedMark.url = "/custom/branded/spinner.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has only light logos returns the correct logos 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when branding has only light logos returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when branding has only light logos returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "alternative"
+AnimatedMark.dark.url = "/custom/branded/mark.svg"
+AnimatedMark.light.type = "alternative"
+AnimatedMark.light.url = "/custom/branded/mark.svg"
+AnimatedMark.type = "alternative"
+AnimatedMark.url = "/custom/branded/mark.svg"
+Application.dark.type = "custom"
+Application.dark.url = "/custom/branded/logo.svg"
+Application.light.type = "custom"
+Application.light.url = "/custom/branded/logo.svg"
+Application.type = "custom"
+Application.url = "/custom/branded/logo.svg"
+CenterMark.dark.type = "custom"
+CenterMark.dark.url = "/custom/branded/mark.svg"
+CenterMark.light.type = "custom"
+CenterMark.light.url = "/custom/branded/mark.svg"
+CenterMark.type = "custom"
+CenterMark.url = "/custom/branded/mark.svg"
+Mark.dark.type = "custom"
+Mark.dark.url = "/custom/branded/mark.svg"
+Mark.light.type = "custom"
+Mark.light.url = "/custom/branded/mark.svg"
+Mark.type = "custom"
+Mark.url = "/custom/branded/mark.svg"
+OpenSearch.dark.type = "custom"
+OpenSearch.dark.url = "/custom/branded/logo.svg"
+OpenSearch.light.type = "custom"
+OpenSearch.light.url = "/custom/branded/logo.svg"
+OpenSearch.type = "custom"
+OpenSearch.url = "/custom/branded/logo.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when unbranded returns the correct logos 1`] = `
+AnimatedMark.dark.type = "default"
+AnimatedMark.dark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_dark.svg"
+AnimatedMark.light.type = "default"
+AnimatedMark.light.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+AnimatedMark.type = "default"
+AnimatedMark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+Application.dark.type = "default"
+Application.dark.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_dark.svg"
+Application.light.type = "default"
+Application.light.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+Application.type = "default"
+Application.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+CenterMark.dark.type = "default"
+CenterMark.dark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_dark.svg"
+CenterMark.light.type = "default"
+CenterMark.light.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+CenterMark.type = "default"
+CenterMark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+Mark.dark.type = "default"
+Mark.dark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_dark.svg"
+Mark.light.type = "default"
+Mark.light.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+Mark.type = "default"
+Mark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+OpenSearch.dark.type = "default"
+OpenSearch.dark.url = "/mocked/base/path/ui/logos/opensearch_on_dark.svg"
+OpenSearch.light.type = "default"
+OpenSearch.light.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+OpenSearch.type = "default"
+OpenSearch.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+colorScheme = "light"
+`;
+
+exports[`getLogos when unbranded returns the correct logos when dark color scheme is requested 1`] = `
+AnimatedMark.dark.type = "default"
+AnimatedMark.dark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_dark.svg"
+AnimatedMark.light.type = "default"
+AnimatedMark.light.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+AnimatedMark.type = "default"
+AnimatedMark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_dark.svg"
+Application.dark.type = "default"
+Application.dark.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_dark.svg"
+Application.light.type = "default"
+Application.light.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+Application.type = "default"
+Application.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_dark.svg"
+CenterMark.dark.type = "default"
+CenterMark.dark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_dark.svg"
+CenterMark.light.type = "default"
+CenterMark.light.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+CenterMark.type = "default"
+CenterMark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_dark.svg"
+Mark.dark.type = "default"
+Mark.dark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_dark.svg"
+Mark.light.type = "default"
+Mark.light.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+Mark.type = "default"
+Mark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_dark.svg"
+OpenSearch.dark.type = "default"
+OpenSearch.dark.url = "/mocked/base/path/ui/logos/opensearch_on_dark.svg"
+OpenSearch.light.type = "default"
+OpenSearch.light.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+OpenSearch.type = "default"
+OpenSearch.url = "/mocked/base/path/ui/logos/opensearch_on_dark.svg"
+colorScheme = "dark"
+`;
+
+exports[`getLogos when unbranded returns the correct logos when light color scheme is requested 1`] = `
+AnimatedMark.dark.type = "default"
+AnimatedMark.dark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_dark.svg"
+AnimatedMark.light.type = "default"
+AnimatedMark.light.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+AnimatedMark.type = "default"
+AnimatedMark.url = "/mocked/base/path/ui/logos/opensearch_spinner_on_light.svg"
+Application.dark.type = "default"
+Application.dark.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_dark.svg"
+Application.light.type = "default"
+Application.light.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+Application.type = "default"
+Application.url = "/mocked/base/path/ui/logos/opensearch_dashboards_on_light.svg"
+CenterMark.dark.type = "default"
+CenterMark.dark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_dark.svg"
+CenterMark.light.type = "default"
+CenterMark.light.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+CenterMark.type = "default"
+CenterMark.url = "/mocked/base/path/ui/logos/opensearch_center_mark_on_light.svg"
+Mark.dark.type = "default"
+Mark.dark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_dark.svg"
+Mark.light.type = "default"
+Mark.light.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+Mark.type = "default"
+Mark.url = "/mocked/base/path/ui/logos/opensearch_mark_on_light.svg"
+OpenSearch.dark.type = "default"
+OpenSearch.dark.url = "/mocked/base/path/ui/logos/opensearch_on_dark.svg"
+OpenSearch.light.type = "default"
+OpenSearch.light.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+OpenSearch.type = "default"
+OpenSearch.url = "/mocked/base/path/ui/logos/opensearch_on_light.svg"
+colorScheme = "light"
+`;
diff --git a/src/core/common/logos/constants.ts b/src/core/common/logos/constants.ts
new file mode 100644
index 000000000000..0972554f1161
--- /dev/null
+++ b/src/core/common/logos/constants.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export enum ImageType {
+  DEFAULT = 'default',
+  CUSTOM = 'custom',
+  ALTERNATIVE = 'alternative',
+}
+
+export enum ColorScheme {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
diff --git a/src/core/common/logos/get_logos.mock.ts b/src/core/common/logos/get_logos.mock.ts
new file mode 100644
index 000000000000..d36591c52b6a
--- /dev/null
+++ b/src/core/common/logos/get_logos.mock.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getLogos } from './get_logos';
+import { Logos } from './types';
+
+export const getLogosMock: {
+  default: DeeplyMockedKeys<Logos>;
+  branded: DeeplyMockedKeys<Logos>;
+} = {
+  default: getLogos({}, ''),
+  branded: getLogos(
+    {
+      logo: {
+        defaultUrl: '/custom/branded/logo.svg',
+        darkModeUrl: '/custom/branded/logo-darkmode.svg',
+      },
+      mark: {
+        defaultUrl: '/custom/branded/mark.svg',
+        darkModeUrl: '/custom/branded/mark-darkmode.svg',
+      },
+    },
+    ''
+  ),
+};
diff --git a/src/core/common/logos/get_logos.test.ts b/src/core/common/logos/get_logos.test.ts
new file mode 100644
index 000000000000..d79564af4318
--- /dev/null
+++ b/src/core/common/logos/get_logos.test.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getLogos } from './get_logos';
+import { flatObjectSerializer } from '@osd/dev-utils';
+
+const serverBasePathMocked = '/mocked/base/path';
+
+expect.addSnapshotSerializer(flatObjectSerializer);
+
+describe('getLogos', () => {
+  describe('when unbranded', () => {
+    const branding = {};
+
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has only light logos', () => {
+    const branding = {
+      logo: { defaultUrl: '/custom/branded/logo.svg' },
+      mark: { defaultUrl: '/custom/branded/mark.svg' },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has only light logos and spinner', () => {
+    const branding = {
+      logo: { defaultUrl: '/custom/branded/logo.svg' },
+      mark: { defaultUrl: '/custom/branded/mark.svg' },
+      loadingLogo: { defaultUrl: '/custom/branded/spinner.svg' },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has both light and dark logos', () => {
+    const branding = {
+      logo: {
+        defaultUrl: '/custom/branded/logo.svg',
+        darkModeUrl: '/custom/branded/logo-darkmode.svg',
+      },
+      mark: {
+        defaultUrl: '/custom/branded/mark.svg',
+        darkModeUrl: '/custom/branded/mark-darkmode.svg',
+      },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has both light and dark logos and spinners', () => {
+    const branding = {
+      logo: {
+        defaultUrl: '/custom/branded/logo.svg',
+        darkModeUrl: '/custom/branded/logo-darkmode.svg',
+      },
+      mark: {
+        defaultUrl: '/custom/branded/mark.svg',
+        darkModeUrl: '/custom/branded/mark-darkmode.svg',
+      },
+      loadingLogo: {
+        defaultUrl: '/custom/branded/spinner.svg',
+        darkModeUrl: '/custom/branded/spinner-darkmode.svg',
+      },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+
+  describe('when branding has both light and dark logos and only light spinners', () => {
+    const branding = {
+      logo: {
+        defaultUrl: '/custom/branded/logo.svg',
+        darkModeUrl: '/custom/branded/logo-darkmode.svg',
+      },
+      mark: {
+        defaultUrl: '/custom/branded/mark.svg',
+        darkModeUrl: '/custom/branded/mark-darkmode.svg',
+      },
+      loadingLogo: {
+        defaultUrl: '/custom/branded/spinner.svg',
+      },
+    };
+    it('returns the correct logos', () => {
+      expect(getLogos(branding, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when light color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: false }, serverBasePathMocked)).toMatchSnapshot();
+    });
+    it('returns the correct logos when dark color scheme is requested', () => {
+      expect(getLogos({ ...branding, darkMode: true }, serverBasePathMocked)).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/core/common/logos/get_logos.ts b/src/core/common/logos/get_logos.ts
new file mode 100644
index 000000000000..c27a5306e9e1
--- /dev/null
+++ b/src/core/common/logos/get_logos.ts
@@ -0,0 +1,142 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { deepFreeze } from '@osd/std';
+import type { ImageItem, LogoItem, Logos } from './types';
+import { ColorScheme, ImageType } from './constants';
+import { Branding } from '../../types';
+
+// The logos are stored at `src/core/server/core_app/assets/logos` to have a pretty URL
+export const OPENSEARCH_DASHBOARDS_THEMED = 'ui/logos/opensearch_dashboards.svg';
+export const OPENSEARCH_DASHBOARDS_ON_LIGHT = 'ui/logos/opensearch_dashboards_on_light.svg';
+export const OPENSEARCH_DASHBOARDS_ON_DARK = 'ui/logos/opensearch_dashboards_on_dark.svg';
+export const OPENSEARCH_THEMED = 'ui/logos/opensearch.svg';
+export const OPENSEARCH_ON_LIGHT = 'ui/logos/opensearch_on_light.svg';
+export const OPENSEARCH_ON_DARK = 'ui/logos/opensearch_on_dark.svg';
+export const MARK_THEMED = 'ui/logos/opensearch_mark.svg';
+export const MARK_ON_LIGHT = 'ui/logos/opensearch_mark_on_light.svg';
+export const MARK_ON_DARK = 'ui/logos/opensearch_mark_on_dark.svg';
+export const CENTER_MARK_THEMED = 'ui/logos/opensearch_center_mark.svg';
+export const CENTER_MARK_ON_LIGHT = 'ui/logos/opensearch_center_mark_on_light.svg';
+export const CENTER_MARK_ON_DARK = 'ui/logos/opensearch_center_mark_on_dark.svg';
+export const ANIMATED_MARK_THEMED = 'ui/logos/opensearch_spinner.svg';
+export const ANIMATED_MARK_ON_LIGHT = 'ui/logos/opensearch_spinner_on_light.svg';
+export const ANIMATED_MARK_ON_DARK = 'ui/logos/opensearch_spinner_on_dark.svg';
+
+interface AssetOption {
+  url?: string;
+  type: ImageType;
+  colorScheme: ColorScheme;
+}
+
+/**
+ * Loops through the assets to find one that has a `url` set. If dark color-scheme asset is needed,
+ * light assets can be used for fallback but not vice vera.
+ * Place defaults at the end of assets to use them as final fallbacks.
+ * `assets` should have dark - light assets of each type, one after the other.
+ */
+const getFirstUsableAsset = (
+  assets: AssetOption[],
+  requireDarkColorScheme: boolean = false
+): ImageItem => {
+  for (const { url, type, colorScheme } of assets) {
+    if (url && (requireDarkColorScheme || colorScheme === 'light')) return { url, type };
+  }
+
+  // `assets` will contain the default assets so the code will never get here
+  throw new Error('No default asset found');
+};
+
+const getLogo = (assets: AssetOption[], requireDarkColorScheme: boolean = false): LogoItem => {
+  const lightAsset = getFirstUsableAsset(assets, false);
+  const darkAsset = getFirstUsableAsset(assets, true);
+  const colorSchemeAsset = requireDarkColorScheme ? darkAsset : lightAsset;
+
+  return {
+    light: lightAsset,
+    dark: darkAsset,
+    url: colorSchemeAsset.url,
+    type: colorSchemeAsset.type!,
+  };
+};
+
+/**
+ * Generates all the combinations of logos based on the color-scheme and branding config
+ *
+ * Ideally, the default logos would point to color-scheme-aware (aka themed) imagery while the dark and light
+ * subtypes reference the dark and light variants. Sadly, Safari doesn't support color-schemes in SVGs yet.
+ * https://bugs.webkit.org/show_bug.cgi?id=199134
+ */
+export const getLogos = (branding: Branding = {}, serverBasePath: string): Logos => {
+  const {
+    logo: { defaultUrl: customLogoUrl, darkModeUrl: customDarkLogoUrl } = {},
+    mark: { defaultUrl: customMarkUrl, darkModeUrl: customDarkMarkUrl } = {},
+    loadingLogo: { defaultUrl: customAnimatedUrl, darkModeUrl: customDarkAnimatedMarkUrl } = {},
+    darkMode = false,
+  } = branding;
+
+  // OSD logos
+  const defaultLightColorSchemeOpenSearchDashboards = `${serverBasePath}/${OPENSEARCH_DASHBOARDS_ON_LIGHT}`;
+  const defaultDarkColorSchemeOpenSearchDashboards = `${serverBasePath}/${OPENSEARCH_DASHBOARDS_ON_DARK}`;
+  // OS logos
+  const defaultLightColorSchemeOpenSearch = `${serverBasePath}/${OPENSEARCH_ON_LIGHT}`;
+  const defaultDarkColorSchemeOpenSearch = `${serverBasePath}/${OPENSEARCH_ON_DARK}`;
+  // OS marks
+  const defaultLightColorSchemeMark = `${serverBasePath}/${MARK_ON_LIGHT}`;
+  const defaultDarkColorSchemeMark = `${serverBasePath}/${MARK_ON_DARK}`;
+  // OS marks variant padded (but not centered) within the container
+  // ToDo: This naming is misleading; figure out if the distinction could be handled with CSS padding alone
+  // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4714
+  const defaultLightColorSchemeCenterMark = `${serverBasePath}/${CENTER_MARK_ON_LIGHT}`;
+  const defaultDarkColorSchemeCenterMark = `${serverBasePath}/${CENTER_MARK_ON_DARK}`;
+  // OS animated marks
+  const defaultLightColorSchemeAnimatedMark = `${serverBasePath}/${ANIMATED_MARK_ON_LIGHT}`;
+  const defaultDarkColorSchemeAnimatedMark = `${serverBasePath}/${ANIMATED_MARK_ON_DARK}`;
+
+  const colorScheme: ColorScheme = darkMode ? ColorScheme.DARK : ColorScheme.LIGHT;
+
+  // It is easier to read the lines unwrapped, so
+  // prettier-ignore
+  return deepFreeze({
+    OpenSearch: getLogo([
+      { url: customDarkLogoUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customLogoUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeOpenSearch, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeOpenSearch, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    Application: getLogo([
+      { url: customDarkLogoUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customLogoUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeOpenSearchDashboards, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeOpenSearchDashboards, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    Mark: getLogo([
+      { url: customDarkMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    CenterMark: getLogo([
+      { url: customDarkMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeCenterMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeCenterMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    AnimatedMark: getLogo([
+      { url: customDarkAnimatedMarkUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.DARK },
+      { url: customAnimatedUrl, type: ImageType.CUSTOM, colorScheme: ColorScheme.LIGHT },
+      { url: customDarkMarkUrl, type: ImageType.ALTERNATIVE, colorScheme: ColorScheme.DARK },
+      { url: customMarkUrl, type: ImageType.ALTERNATIVE, colorScheme: ColorScheme.LIGHT },
+      { url: defaultDarkColorSchemeAnimatedMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.DARK },
+      { url: defaultLightColorSchemeAnimatedMark, type: ImageType.DEFAULT, colorScheme: ColorScheme.LIGHT },
+    ], darkMode),
+
+    colorScheme,
+  });
+};
diff --git a/src/core/common/logos/index.ts b/src/core/common/logos/index.ts
new file mode 100644
index 000000000000..7525b1a3a31f
--- /dev/null
+++ b/src/core/common/logos/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// ToDo: Extend this to handle everything related to white-labelling
+
+export { getLogos } from './get_logos';
+export { ImageType, ColorScheme } from './constants';
diff --git a/src/core/common/logos/types.ts b/src/core/common/logos/types.ts
new file mode 100644
index 000000000000..1885b09017a3
--- /dev/null
+++ b/src/core/common/logos/types.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ColorScheme, ImageType } from './constants';
+
+/**
+ * @public
+ */
+export interface Logos {
+  /**
+   * @deprecated Use {@link Logos.Application} instead.
+   */
+  readonly OpenSearch: LogoItem;
+  readonly Application: LogoItem;
+  readonly Mark: LogoItem;
+  /**
+   * @deprecated Use {@link Logos.Mark} instead.
+   */
+  readonly CenterMark: LogoItem;
+  readonly AnimatedMark: LogoItem;
+  readonly colorScheme: ColorScheme;
+}
+
+export type LogoItem = ImageItem & Record<ColorScheme, ImageItem>;
+
+export interface ImageItem {
+  /**
+   * The URL of the image
+   */
+  readonly url: string;
+  readonly type: ImageType;
+}
diff --git a/src/core/common/mocks.ts b/src/core/common/mocks.ts
new file mode 100644
index 000000000000..b1863a96fa38
--- /dev/null
+++ b/src/core/common/mocks.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { getLogosMock } from './logos/get_logos.mock';
diff --git a/src/core/common/types.ts b/src/core/common/types.ts
new file mode 100644
index 000000000000..1f618a8c396f
--- /dev/null
+++ b/src/core/common/types.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export type { Logos } from './logos/types';
diff --git a/src/core/public/chrome/chrome_service.mock.ts b/src/core/public/chrome/chrome_service.mock.ts
index 8e5205e6f9bf..14b516ff95bc 100644
--- a/src/core/public/chrome/chrome_service.mock.ts
+++ b/src/core/public/chrome/chrome_service.mock.ts
@@ -30,7 +30,8 @@
 
 import { BehaviorSubject } from 'rxjs';
 import type { PublicMethodsOf } from '@osd/utility-types';
-import { ChromeBadge, ChromeBrand, ChromeBreadcrumb, ChromeService, InternalChromeStart } from './';
+import { ChromeBadge, ChromeBreadcrumb, ChromeService, InternalChromeStart } from './';
+import { getLogosMock } from '../../common/mocks';
 
 const createStartContractMock = () => {
   const startContract: DeeplyMockedKeys<InternalChromeStart> = {
@@ -54,6 +55,7 @@ const createStartContractMock = () => {
       change: jest.fn(),
       reset: jest.fn(),
     },
+    logos: getLogosMock.default,
     navControls: {
       registerLeft: jest.fn(),
       registerCenter: jest.fn(),
@@ -63,8 +65,6 @@ const createStartContractMock = () => {
       getRight$: jest.fn(),
     },
     setAppTitle: jest.fn(),
-    setBrand: jest.fn(),
-    getBrand$: jest.fn(),
     setIsVisible: jest.fn(),
     getIsVisible$: jest.fn(),
     addApplicationClass: jest.fn(),
@@ -82,7 +82,6 @@ const createStartContractMock = () => {
     setCustomNavLink: jest.fn(),
   };
   startContract.navLinks.getAll.mockReturnValue([]);
-  startContract.getBrand$.mockReturnValue(new BehaviorSubject({} as ChromeBrand));
   startContract.getIsVisible$.mockReturnValue(new BehaviorSubject(false));
   startContract.getApplicationClasses$.mockReturnValue(new BehaviorSubject(['class-name']));
   startContract.getBadge$.mockReturnValue(new BehaviorSubject({} as ChromeBadge));
diff --git a/src/core/public/chrome/chrome_service.test.ts b/src/core/public/chrome/chrome_service.test.ts
index b8635f5a070f..f11b0f3965e6 100644
--- a/src/core/public/chrome/chrome_service.test.ts
+++ b/src/core/public/chrome/chrome_service.test.ts
@@ -145,36 +145,6 @@ describe('start', () => {
     });
   });
 
-  describe('brand', () => {
-    it('updates/emits the brand as it changes', async () => {
-      const { chrome, service } = await start();
-      const promise = chrome.getBrand$().pipe(toArray()).toPromise();
-
-      chrome.setBrand({
-        logo: 'big logo',
-        smallLogo: 'not so big logo',
-      });
-      chrome.setBrand({
-        logo: 'big logo without small logo',
-      });
-      service.stop();
-
-      await expect(promise).resolves.toMatchInlineSnapshot(`
-                      Array [
-                        Object {},
-                        Object {
-                          "logo": "big logo",
-                          "smallLogo": "not so big logo",
-                        },
-                        Object {
-                          "logo": "big logo without small logo",
-                          "smallLogo": undefined,
-                        },
-                      ]
-                  `);
-    });
-  });
-
   describe('visibility', () => {
     it('emits false when no application is mounted', async () => {
       const { chrome, service } = await start();
@@ -478,7 +448,6 @@ describe('stop', () => {
   it('completes applicationClass$, getIsNavDrawerLocked, breadcrumbs$, isVisible$, and brand$ observables', async () => {
     const { chrome, service } = await start();
     const promise = Rx.combineLatest(
-      chrome.getBrand$(),
       chrome.getApplicationClasses$(),
       chrome.getIsNavDrawerLocked$(),
       chrome.getBreadcrumbs$(),
@@ -496,7 +465,6 @@ describe('stop', () => {
 
     await expect(
       Rx.combineLatest(
-        chrome.getBrand$(),
         chrome.getApplicationClasses$(),
         chrome.getIsNavDrawerLocked$(),
         chrome.getBreadcrumbs$(),
diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
index 97746f465abc..d094d86360ef 100644
--- a/src/core/public/chrome/chrome_service.tsx
+++ b/src/core/public/chrome/chrome_service.tsx
@@ -49,6 +49,9 @@ import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_acce
 import { Header } from './ui';
 import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
 import { Branding } from '../';
+import { getLogos } from '../../common';
+import type { Logos } from '../../common/types';
+
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
 const IS_LOCKED_KEY = 'core.chrome.isLocked';
@@ -60,12 +63,6 @@ export interface ChromeBadge {
   iconType?: IconType;
 }
 
-/** @public */
-export interface ChromeBrand {
-  logo?: string;
-  smallLogo?: string;
-}
-
 /** @public */
 export type ChromeBreadcrumb = EuiBreadcrumb;
 
@@ -156,7 +153,6 @@ export class ChromeService {
     this.initVisibility(application);
 
     const appTitle$ = new BehaviorSubject<string>('Overview');
-    const brand$ = new BehaviorSubject<ChromeBrand>({});
     const applicationClasses$ = new BehaviorSubject<Set<string>>(new Set());
     const helpExtension$ = new BehaviorSubject<ChromeHelpExtension | undefined>(undefined);
     const breadcrumbs$ = new BehaviorSubject<ChromeBreadcrumb[]>([]);
@@ -185,6 +181,8 @@ export class ChromeService {
 
     const getIsNavDrawerLocked$ = isNavDrawerLocked$.pipe(takeUntil(this.stop$));
 
+    const logos = getLogos(injectedMetadata.getBranding(), http.basePath.serverBasePath);
+
     const isIE = () => {
       const ua = window.navigator.userAgent;
       const msie = ua.indexOf('MSIE '); // IE 10 or older
@@ -234,6 +232,7 @@ export class ChromeService {
       navLinks,
       recentlyAccessed,
       docTitle,
+      logos,
 
       getHeaderComponent: () => (
         <Header
@@ -261,23 +260,13 @@ export class ChromeService {
           onIsLockedUpdate={setIsNavDrawerLocked}
           isLocked$={getIsNavDrawerLocked$}
           branding={injectedMetadata.getBranding()}
+          logos={logos}
           survey={injectedMetadata.getSurvey()}
         />
       ),
 
       setAppTitle: (appTitle: string) => appTitle$.next(appTitle),
 
-      getBrand$: () => brand$.pipe(takeUntil(this.stop$)),
-
-      setBrand: (brand: ChromeBrand) => {
-        brand$.next(
-          Object.freeze({
-            logo: brand.logo,
-            smallLogo: brand.smallLogo,
-          })
-        );
-      },
-
       getIsVisible$: () => this.isVisible$,
 
       setIsVisible: (isVisible: boolean) => this.isForceHidden$.next(!isVisible),
@@ -371,6 +360,8 @@ export interface ChromeStart {
   recentlyAccessed: ChromeRecentlyAccessed;
   /** {@inheritdoc ChromeDocTitle} */
   docTitle: ChromeDocTitle;
+  /** {@inheritdoc Logos} */
+  readonly logos: Logos;
 
   /**
    * Sets the current app's title
@@ -381,31 +372,6 @@ export interface ChromeStart {
    */
   setAppTitle(appTitle: string): void;
 
-  /**
-   * Get an observable of the current brand information.
-   */
-  getBrand$(): Observable<ChromeBrand>;
-
-  /**
-   * Set the brand configuration.
-   *
-   * @remarks
-   * Normally the `logo` property will be rendered as the
-   * CSS background for the home link in the chrome navigation, but when the page is
-   * rendered in a small window the `smallLogo` will be used and rendered at about
-   * 45px wide.
-   *
-   * @example
-   * ```js
-   * chrome.setBrand({
-   *   logo: 'url(/plugins/app/logo.png) center no-repeat'
-   *   smallLogo: 'url(/plugins/app/logo-small.png) center no-repeat'
-   * })
-   * ```
-   *
-   */
-  setBrand(brand: ChromeBrand): void;
-
   /**
    * Get an observable of the current visibility state of the chrome.
    */
diff --git a/src/core/public/chrome/index.ts b/src/core/public/chrome/index.ts
index 3b9ad62cfe1a..4cd43362767c 100644
--- a/src/core/public/chrome/index.ts
+++ b/src/core/public/chrome/index.ts
@@ -34,7 +34,6 @@ export {
   ChromeService,
   ChromeStart,
   InternalChromeStart,
-  ChromeBrand,
   ChromeHelpExtension,
 } from './chrome_service';
 export {
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 9bdbec781c5e..7b4e3ba472dc 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -60,15 +60,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -131,6 +123,71 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -757,9 +814,9 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="/defaultModeLogo"
+              data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="/defaultModeLogo"
+              iconType="/test/ui/logos/opensearch_mark_on_light.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -780,7 +837,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     >
                       <EuiIcon
                         size="l"
-                        type="/defaultModeLogo"
+                        type="/test/ui/logos/opensearch_mark_on_light.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -798,7 +855,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="/defaultModeLogo"
+                data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -809,7 +866,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="/defaultModeLogo"
+                  data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -858,10 +915,10 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="/defaultModeLogo"
+                                  type="/test/ui/logos/opensearch_mark_on_light.svg"
                                 >
                                   <span
-                                    data-euiicon-type="/defaultModeLogo"
+                                    data-euiicon-type="/test/ui/logos/opensearch_mark_on_light.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
@@ -1954,15 +2011,7 @@ exports[`CollapsibleNav renders the default nav 1`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -2017,6 +2066,71 @@ exports[`CollapsibleNav renders the default nav 1`] = `
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={false}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -2199,15 +2313,7 @@ exports[`CollapsibleNav renders the default nav 2`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -2263,6 +2369,71 @@ exports[`CollapsibleNav renders the default nav 2`] = `
   isLocked={false}
   isNavOpen={false}
   isOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -2445,15 +2616,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -2509,6 +2672,71 @@ exports[`CollapsibleNav renders the default nav 3`] = `
   isLocked={true}
   isNavOpen={false}
   isOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -2922,7 +3150,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] = `
+exports[`CollapsibleNav with custom branding renders the nav bar in dark mode 1`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -2985,9 +3213,13 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
   branding={
     Object {
       "darkMode": true,
+      "logo": Object {
+        "darkModeUrl": "/custom/branded/logo-darkmode.svg",
+        "defaultUrl": "/custom/branded/logo.svg",
+      },
       "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
+        "darkModeUrl": "/custom/branded/mark-darkmode.svg",
+        "defaultUrl": "/custom/branded/mark.svg",
       },
     }
   }
@@ -3045,6 +3277,71 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "alternative",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "alternative",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "alternative",
+        "url": "/custom/branded/mark-darkmode.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/logo-darkmode.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/mark-darkmode.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/mark-darkmode.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/logo-darkmode.svg",
+      },
+      "colorScheme": "dark",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -3435,9 +3732,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="/darkModeLogo"
+              data-test-opensearch-logo="/custom/branded/mark-darkmode.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="/darkModeLogo"
+              iconType="/custom/branded/mark-darkmode.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -3458,7 +3755,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
                     >
                       <EuiIcon
                         size="l"
-                        type="/darkModeLogo"
+                        type="/custom/branded/mark-darkmode.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -3476,7 +3773,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="/darkModeLogo"
+                data-test-opensearch-logo="/custom/branded/mark-darkmode.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -3487,7 +3784,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="/darkModeLogo"
+                  data-test-opensearch-logo="/custom/branded/mark-darkmode.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -3536,10 +3833,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="/darkModeLogo"
+                                  type="/custom/branded/mark-darkmode.svg"
                                 >
                                   <span
-                                    data-euiicon-type="/darkModeLogo"
+                                    data-euiicon-type="/custom/branded/mark-darkmode.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
@@ -3968,7 +4265,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 1`] =
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] = `
+exports[`CollapsibleNav with custom branding renders the nav bar in default mode 1`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -4030,9 +4327,13 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
   }
   branding={
     Object {
-      "darkMode": true,
+      "logo": Object {
+        "darkModeUrl": "/custom/branded/logo-darkmode.svg",
+        "defaultUrl": "/custom/branded/logo.svg",
+      },
       "mark": Object {
-        "defaultUrl": "/defaultModeLogo",
+        "darkModeUrl": "/custom/branded/mark-darkmode.svg",
+        "defaultUrl": "/custom/branded/mark.svg",
       },
     }
   }
@@ -4090,6 +4391,71 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "alternative",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "alternative",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "alternative",
+        "url": "/custom/branded/mark.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/logo.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/mark.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/mark.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/mark.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo-darkmode.svg",
+        },
+        "light": Object {
+          "type": "custom",
+          "url": "/custom/branded/logo.svg",
+        },
+        "type": "custom",
+        "url": "/custom/branded/logo.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -4480,9 +4846,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="/defaultModeLogo"
+              data-test-opensearch-logo="/custom/branded/mark.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="/defaultModeLogo"
+              iconType="/custom/branded/mark.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -4503,7 +4869,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
                     >
                       <EuiIcon
                         size="l"
-                        type="/defaultModeLogo"
+                        type="/custom/branded/mark.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -4521,7 +4887,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="/defaultModeLogo"
+                data-test-opensearch-logo="/custom/branded/mark.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -4532,7 +4898,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="/defaultModeLogo"
+                  data-test-opensearch-logo="/custom/branded/mark.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -4581,10 +4947,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="/defaultModeLogo"
+                                  type="/custom/branded/mark.svg"
                                 >
                                   <span
-                                    data-euiicon-type="/defaultModeLogo"
+                                    data-euiicon-type="/custom/branded/mark.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
@@ -5013,7 +5379,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 2`] =
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] = `
+exports[`CollapsibleNav without custom branding renders the nav bar in dark mode 1`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -5075,8 +5441,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
   }
   branding={
     Object {
-      "darkMode": false,
-      "mark": Object {},
+      "darkMode": true,
     }
   }
   closeNav={[Function]}
@@ -5133,6 +5498,71 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_dark.svg",
+      },
+      "colorScheme": "dark",
+    }
+  }
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -5523,9 +5953,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+              data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_dark.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="undefined/opensearch_mark_default_mode.svg"
+              iconType="/test/ui/logos/opensearch_mark_on_dark.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -5546,7 +5976,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
                     >
                       <EuiIcon
                         size="l"
-                        type="undefined/opensearch_mark_default_mode.svg"
+                        type="/test/ui/logos/opensearch_mark_on_dark.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -5564,7 +5994,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+                data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_dark.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -5575,7 +6005,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+                  data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_dark.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -5624,10 +6054,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="undefined/opensearch_mark_default_mode.svg"
+                                  type="/test/ui/logos/opensearch_mark_on_dark.svg"
                                 >
                                   <span
-                                    data-euiicon-type="undefined/opensearch_mark_default_mode.svg"
+                                    data-euiicon-type="/test/ui/logos/opensearch_mark_on_dark.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
@@ -6056,7 +6486,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in dark mode 3`] =
 </CollapsibleNav>
 `;
 
-exports[`CollapsibleNav renders the nav bar with custom logo in default mode 1`] = `
+exports[`CollapsibleNav without custom branding renders the nav bar in default mode 1`] = `
 <CollapsibleNav
   appId$={
     BehaviorSubject {
@@ -6116,15 +6546,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 1`]
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-    }
-  }
+  branding={Object {}}
   closeNav={[Function]}
   customNavLink$={
     BehaviorSubject {
@@ -6179,1049 +6601,71 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 1`]
   id="collapsibe-nav"
   isLocked={false}
   isNavOpen={true}
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [
-        Object {
-          "baseUrl": "/",
-          "category": Object {
-            "euiIconType": "inputOutput",
-            "id": "opensearchDashboards",
-            "label": "OpenSearch Dashboards",
-            "order": 1000,
-          },
-          "data-test-subj": "discover",
-          "href": "discover",
-          "id": "discover",
-          "isActive": true,
-          "title": "discover",
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_dark.svg",
         },
-        Object {
-          "baseUrl": "/",
-          "category": Object {
-            "euiIconType": "logoObservability",
-            "id": "observability",
-            "label": "Observability",
-            "order": 3000,
-          },
-          "data-test-subj": "discover",
-          "href": "discover",
-          "id": "discover",
-          "isActive": true,
-          "title": "discover",
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
         },
-      ],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_dark.svg",
         },
-      ],
-      "thrownError": null,
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/test/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/test/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
     }
   }
-  navigateToApp={[Function]}
-  navigateToUrl={[Function]}
-  onIsLockedUpdate={[Function]}
-  recentlyAccessed$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [
-        Object {
-          "id": "recent",
-          "label": "recent",
-          "link": "recent",
-        },
-      ],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  storage={
-    StubBrowserStorage {
-      "keys": Array [],
-      "size": 0,
-      "sizeLimit": 5000000,
-      "values": Array [],
-    }
-  }
->
-  <EuiCollapsibleNav
-    aria-label="Primary"
-    data-test-subj="collapsibleNav"
-    id="collapsibe-nav"
-    isDocked={false}
-    isOpen={true}
-    onClose={[Function]}
-    outsideClickCloses={false}
-  >
-    <EuiFlyout
-      aria-label="Primary"
-      as="nav"
-      className="euiCollapsibleNav"
-      closeButtonPosition="outside"
-      data-test-subj="collapsibleNav"
-      hideCloseButton={false}
-      id="collapsibe-nav"
-      onClose={[Function]}
-      outsideClickCloses={false}
-      ownFocus={true}
-      paddingSize="none"
-      pushMinBreakpoint="l"
-      role={null}
-      side="left"
-      size={320}
-      type="overlay"
-    >
-      <nav
-        data-eui="EuiFlyout"
-        data-test-subj="collapsibleNav"
-        role={null}
-      >
-        <button
-          data-test-subj="euiFlyoutCloseButton"
-          onClick={[Function]}
-          type="button"
-        />
-        <EuiCollapsibleNavGroup
-          background="light"
-          data-test-subj="collapsibleNavGroup-recentlyViewed"
-          initialIsOpen={true}
-          isCollapsible={true}
-          key="recentlyViewed"
-          onToggle={[Function]}
-          title="Recently viewed"
-        >
-          <EuiAccordion
-            arrowDisplay="right"
-            buttonClassName="euiCollapsibleNavGroup__heading"
-            buttonContent={
-              <EuiFlexGroup
-                alignItems="center"
-                gutterSize="m"
-                responsive={false}
-              >
-                <EuiFlexItem>
-                  <EuiTitle
-                    size="xxs"
-                  >
-                    <h3
-                      className="euiCollapsibleNavGroup__title"
-                      id="mockId__title"
-                    >
-                      Recently viewed
-                    </h3>
-                  </EuiTitle>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            }
-            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-            data-test-subj="collapsibleNavGroup-recentlyViewed"
-            id="mockId"
-            initialIsOpen={true}
-            isLoading={false}
-            isLoadingMessage={false}
-            onToggle={[Function]}
-            paddingSize="none"
-          >
-            <div
-              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-              data-test-subj="collapsibleNavGroup-recentlyViewed"
-              onToggle={[Function]}
-            >
-              <div
-                className="euiAccordion__triggerWrapper"
-              >
-                <button
-                  aria-controls="mockId"
-                  aria-expanded={true}
-                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                  id="mockId"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="euiAccordion__iconWrapper"
-                  >
-                    <EuiIcon
-                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                      size="m"
-                      type="arrowRight"
-                    >
-                      <span
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        data-euiicon-type="arrowRight"
-                        size="m"
-                      />
-                    </EuiIcon>
-                  </span>
-                  <span
-                    className="euiIEFlexWrapFix"
-                  >
-                    <EuiFlexGroup
-                      alignItems="center"
-                      gutterSize="m"
-                      responsive={false}
-                    >
-                      <div
-                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                      >
-                        <EuiFlexItem>
-                          <div
-                            className="euiFlexItem"
-                          >
-                            <EuiTitle
-                              size="xxs"
-                            >
-                              <h3
-                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                id="mockId__title"
-                              >
-                                Recently viewed
-                              </h3>
-                            </EuiTitle>
-                          </div>
-                        </EuiFlexItem>
-                      </div>
-                    </EuiFlexGroup>
-                  </span>
-                </button>
-              </div>
-              <div
-                aria-labelledby="mockId"
-                className="euiAccordion__childWrapper"
-                id="mockId"
-                role="region"
-                tabIndex={-1}
-              >
-                <EuiResizeObserver
-                  onResize={[Function]}
-                >
-                  <div>
-                    <div
-                      className=""
-                    >
-                      <div
-                        className="euiCollapsibleNavGroup__children"
-                      >
-                        <EuiListGroup
-                          aria-label="Recently viewed links"
-                          className="osdCollapsibleNav__recentsListGroup"
-                          color="subdued"
-                          gutterSize="none"
-                          listItems={
-                            Array [
-                              Object {
-                                "aria-label": "recent",
-                                "data-test-subj": "collapsibleNavAppLink--recent",
-                                "href": "http://localhost/recent",
-                                "label": "recent",
-                                "onClick": [Function],
-                                "title": "recent",
-                              },
-                            ]
-                          }
-                          maxWidth="none"
-                          size="s"
-                        >
-                          <ul
-                            aria-label="Recently viewed links"
-                            className="euiListGroup osdCollapsibleNav__recentsListGroup"
-                            style={
-                              Object {
-                                "maxWidth": "none",
-                              }
-                            }
-                          >
-                            <EuiListGroupItem
-                              aria-label="recent"
-                              color="subdued"
-                              data-test-subj="collapsibleNavAppLink--recent"
-                              href="http://localhost/recent"
-                              key="title-0"
-                              label="recent"
-                              onClick={[Function]}
-                              showToolTip={false}
-                              size="s"
-                              title="recent"
-                              wrapText={false}
-                            >
-                              <li
-                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                              >
-                                <a
-                                  aria-label="recent"
-                                  className="euiListGroupItem__button"
-                                  data-test-subj="collapsibleNavAppLink--recent"
-                                  href="http://localhost/recent"
-                                  onClick={[Function]}
-                                  rel="noreferrer"
-                                  title="recent"
-                                >
-                                  <span
-                                    className="euiListGroupItem__label"
-                                    title="recent"
-                                  >
-                                    recent
-                                  </span>
-                                </a>
-                              </li>
-                            </EuiListGroupItem>
-                          </ul>
-                        </EuiListGroup>
-                      </div>
-                    </div>
-                  </div>
-                </EuiResizeObserver>
-              </div>
-            </div>
-          </EuiAccordion>
-        </EuiCollapsibleNavGroup>
-        <EuiHorizontalRule
-          margin="none"
-        >
-          <hr
-            className="euiHorizontalRule euiHorizontalRule--full"
-          />
-        </EuiHorizontalRule>
-        <EuiFlexItem
-          className="eui-yScroll"
-        >
-          <div
-            className="euiFlexItem eui-yScroll"
-          >
-            <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="/defaultModeLogo"
-              data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="/defaultModeLogo"
-              initialIsOpen={true}
-              isCollapsible={true}
-              key="opensearchDashboards"
-              onToggle={[Function]}
-              title="OpenSearch Dashboards"
-            >
-              <EuiAccordion
-                arrowDisplay="right"
-                buttonClassName="euiCollapsibleNavGroup__heading"
-                buttonContent={
-                  <EuiFlexGroup
-                    alignItems="center"
-                    gutterSize="m"
-                    responsive={false}
-                  >
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <EuiIcon
-                        size="l"
-                        type="/defaultModeLogo"
-                      />
-                    </EuiFlexItem>
-                    <EuiFlexItem>
-                      <EuiTitle
-                        size="xxs"
-                      >
-                        <h3
-                          className="euiCollapsibleNavGroup__title"
-                          id="mockId__title"
-                        >
-                          OpenSearch Dashboards
-                        </h3>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                }
-                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="/defaultModeLogo"
-                data-test-subj="collapsibleNavGroup-opensearchDashboards"
-                id="mockId"
-                initialIsOpen={true}
-                isLoading={false}
-                isLoadingMessage={false}
-                onToggle={[Function]}
-                paddingSize="none"
-              >
-                <div
-                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="/defaultModeLogo"
-                  data-test-subj="collapsibleNavGroup-opensearchDashboards"
-                  onToggle={[Function]}
-                >
-                  <div
-                    className="euiAccordion__triggerWrapper"
-                  >
-                    <button
-                      aria-controls="mockId"
-                      aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                      id="mockId"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
-                      >
-                        <EuiFlexGroup
-                          alignItems="center"
-                          gutterSize="m"
-                          responsive={false}
-                        >
-                          <div
-                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                          >
-                            <EuiFlexItem
-                              grow={false}
-                            >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                              >
-                                <EuiIcon
-                                  size="l"
-                                  type="/defaultModeLogo"
-                                >
-                                  <span
-                                    data-euiicon-type="/defaultModeLogo"
-                                    size="l"
-                                  />
-                                </EuiIcon>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem>
-                              <div
-                                className="euiFlexItem"
-                              >
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    OpenSearch Dashboards
-                                  </h3>
-                                </EuiTitle>
-                              </div>
-                            </EuiFlexItem>
-                          </div>
-                        </EuiFlexGroup>
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-labelledby="mockId"
-                    className="euiAccordion__childWrapper"
-                    id="mockId"
-                    role="region"
-                    tabIndex={-1}
-                  >
-                    <EuiResizeObserver
-                      onResize={[Function]}
-                    >
-                      <div>
-                        <div
-                          className=""
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup__children"
-                          >
-                            <EuiListGroup
-                              aria-label="Primary navigation links, OpenSearch Dashboards"
-                              color="subdued"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "data-test-subj": "collapsibleNavAppLink",
-                                    "href": "discover",
-                                    "isActive": false,
-                                    "isDisabled": undefined,
-                                    "label": "discover",
-                                    "onClick": [Function],
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
-                            >
-                              <ul
-                                aria-label="Primary navigation links, OpenSearch Dashboards"
-                                className="euiListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
-                                }
-                              >
-                                <EuiListGroupItem
-                                  color="subdued"
-                                  data-test-subj="collapsibleNavAppLink"
-                                  href="discover"
-                                  isActive={false}
-                                  key="title-0"
-                                  label="discover"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  wrapText={false}
-                                >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavAppLink"
-                                      href="discover"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
-                                    >
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="discover"
-                                      >
-                                        discover
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </div>
-                    </EuiResizeObserver>
-                  </div>
-                </div>
-              </EuiAccordion>
-            </EuiCollapsibleNavGroup>
-            <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="logoObservability"
-              data-test-subj="collapsibleNavGroup-observability"
-              iconType="logoObservability"
-              initialIsOpen={true}
-              isCollapsible={true}
-              key="observability"
-              onToggle={[Function]}
-              title="Observability"
-            >
-              <EuiAccordion
-                arrowDisplay="right"
-                buttonClassName="euiCollapsibleNavGroup__heading"
-                buttonContent={
-                  <EuiFlexGroup
-                    alignItems="center"
-                    gutterSize="m"
-                    responsive={false}
-                  >
-                    <EuiFlexItem
-                      grow={false}
-                    >
-                      <EuiIcon
-                        size="l"
-                        type="logoObservability"
-                      />
-                    </EuiFlexItem>
-                    <EuiFlexItem>
-                      <EuiTitle
-                        size="xxs"
-                      >
-                        <h3
-                          className="euiCollapsibleNavGroup__title"
-                          id="mockId__title"
-                        >
-                          Observability
-                        </h3>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                }
-                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="logoObservability"
-                data-test-subj="collapsibleNavGroup-observability"
-                id="mockId"
-                initialIsOpen={true}
-                isLoading={false}
-                isLoadingMessage={false}
-                onToggle={[Function]}
-                paddingSize="none"
-              >
-                <div
-                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="logoObservability"
-                  data-test-subj="collapsibleNavGroup-observability"
-                  onToggle={[Function]}
-                >
-                  <div
-                    className="euiAccordion__triggerWrapper"
-                  >
-                    <button
-                      aria-controls="mockId"
-                      aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                      id="mockId"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
-                      >
-                        <EuiFlexGroup
-                          alignItems="center"
-                          gutterSize="m"
-                          responsive={false}
-                        >
-                          <div
-                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                          >
-                            <EuiFlexItem
-                              grow={false}
-                            >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                              >
-                                <EuiIcon
-                                  size="l"
-                                  type="logoObservability"
-                                >
-                                  <span
-                                    data-euiicon-type="logoObservability"
-                                    size="l"
-                                  />
-                                </EuiIcon>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiFlexItem>
-                              <div
-                                className="euiFlexItem"
-                              >
-                                <EuiTitle
-                                  size="xxs"
-                                >
-                                  <h3
-                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                    id="mockId__title"
-                                  >
-                                    Observability
-                                  </h3>
-                                </EuiTitle>
-                              </div>
-                            </EuiFlexItem>
-                          </div>
-                        </EuiFlexGroup>
-                      </span>
-                    </button>
-                  </div>
-                  <div
-                    aria-labelledby="mockId"
-                    className="euiAccordion__childWrapper"
-                    id="mockId"
-                    role="region"
-                    tabIndex={-1}
-                  >
-                    <EuiResizeObserver
-                      onResize={[Function]}
-                    >
-                      <div>
-                        <div
-                          className=""
-                        >
-                          <div
-                            className="euiCollapsibleNavGroup__children"
-                          >
-                            <EuiListGroup
-                              aria-label="Primary navigation links, Observability"
-                              color="subdued"
-                              gutterSize="none"
-                              listItems={
-                                Array [
-                                  Object {
-                                    "data-test-subj": "collapsibleNavAppLink",
-                                    "href": "discover",
-                                    "isActive": false,
-                                    "isDisabled": undefined,
-                                    "label": "discover",
-                                    "onClick": [Function],
-                                  },
-                                ]
-                              }
-                              maxWidth="none"
-                              size="s"
-                            >
-                              <ul
-                                aria-label="Primary navigation links, Observability"
-                                className="euiListGroup"
-                                style={
-                                  Object {
-                                    "maxWidth": "none",
-                                  }
-                                }
-                              >
-                                <EuiListGroupItem
-                                  color="subdued"
-                                  data-test-subj="collapsibleNavAppLink"
-                                  href="discover"
-                                  isActive={false}
-                                  key="title-0"
-                                  label="discover"
-                                  onClick={[Function]}
-                                  showToolTip={false}
-                                  size="s"
-                                  wrapText={false}
-                                >
-                                  <li
-                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      className="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavAppLink"
-                                      href="discover"
-                                      onClick={[Function]}
-                                      rel="noreferrer"
-                                    >
-                                      <span
-                                        className="euiListGroupItem__label"
-                                        title="discover"
-                                      >
-                                        discover
-                                      </span>
-                                    </a>
-                                  </li>
-                                </EuiListGroupItem>
-                              </ul>
-                            </EuiListGroup>
-                          </div>
-                        </div>
-                      </div>
-                    </EuiResizeObserver>
-                  </div>
-                </div>
-              </EuiAccordion>
-            </EuiCollapsibleNavGroup>
-            <EuiShowFor
-              sizes={
-                Array [
-                  "l",
-                  "xl",
-                ]
-              }
-            >
-              <EuiCollapsibleNavGroup>
-                <div
-                  className="euiCollapsibleNavGroup"
-                  id="mockId"
-                >
-                  <div
-                    className="euiCollapsibleNavGroup__children"
-                  >
-                    <EuiListGroup
-                      flush={true}
-                    >
-                      <ul
-                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                      >
-                        <EuiListGroupItem
-                          aria-label="Dock primary navigation"
-                          buttonRef={
-                            Object {
-                              "current": <button
-                                aria-label="Dock primary navigation"
-                                class="euiListGroupItem__button"
-                                data-test-subj="collapsible-nav-lock"
-                                type="button"
-                              >
-                                <span
-                                  class="euiListGroupItem__icon"
-                                  color="inherit"
-                                  data-euiicon-type="lockOpen"
-                                />
-                                <span
-                                  class="euiListGroupItem__label"
-                                  title="Dock navigation"
-                                >
-                                  Dock navigation
-                                </span>
-                              </button>,
-                            }
-                          }
-                          color="subdued"
-                          data-test-subj="collapsible-nav-lock"
-                          iconType="lockOpen"
-                          label="Dock navigation"
-                          onClick={[Function]}
-                          size="xs"
-                        >
-                          <li
-                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                          >
-                            <button
-                              aria-label="Dock primary navigation"
-                              className="euiListGroupItem__button"
-                              data-test-subj="collapsible-nav-lock"
-                              disabled={false}
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <EuiIcon
-                                className="euiListGroupItem__icon"
-                                color="inherit"
-                                type="lockOpen"
-                              >
-                                <span
-                                  className="euiListGroupItem__icon"
-                                  color="inherit"
-                                  data-euiicon-type="lockOpen"
-                                />
-                              </EuiIcon>
-                              <span
-                                className="euiListGroupItem__label"
-                                title="Dock navigation"
-                              >
-                                Dock navigation
-                              </span>
-                            </button>
-                          </li>
-                        </EuiListGroupItem>
-                      </ul>
-                    </EuiListGroup>
-                  </div>
-                </div>
-              </EuiCollapsibleNavGroup>
-            </EuiShowFor>
-          </div>
-        </EuiFlexItem>
-      </nav>
-    </EuiFlyout>
-  </EuiCollapsibleNav>
-</CollapsibleNav>
-`;
-
-exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`] = `
-<CollapsibleNav
-  appId$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": "test",
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  basePath={
-    BasePath {
-      "basePath": "/test",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/test",
-    }
-  }
-  branding={
-    Object {
-      "darkMode": false,
-      "mark": Object {},
-    }
-  }
-  closeNav={[Function]}
-  customNavLink$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": undefined,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  homeHref="/"
-  id="collapsibe-nav"
-  isLocked={false}
-  isNavOpen={true}
   navLinks$={
     BehaviorSubject {
       "_isScalar": false,
@@ -7612,9 +7056,9 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
             className="euiFlexItem eui-yScroll"
           >
             <EuiCollapsibleNavGroup
-              data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+              data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
               data-test-subj="collapsibleNavGroup-opensearchDashboards"
-              iconType="undefined/opensearch_mark_default_mode.svg"
+              iconType="/test/ui/logos/opensearch_mark_on_light.svg"
               initialIsOpen={true}
               isCollapsible={true}
               key="opensearchDashboards"
@@ -7635,7 +7079,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
                     >
                       <EuiIcon
                         size="l"
-                        type="undefined/opensearch_mark_default_mode.svg"
+                        type="/test/ui/logos/opensearch_mark_on_light.svg"
                       />
                     </EuiFlexItem>
                     <EuiFlexItem>
@@ -7653,7 +7097,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
                   </EuiFlexGroup>
                 }
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+                data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
                 data-test-subj="collapsibleNavGroup-opensearchDashboards"
                 id="mockId"
                 initialIsOpen={true}
@@ -7664,7 +7108,7 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
               >
                 <div
                   className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                  data-test-opensearch-logo="undefined/opensearch_mark_default_mode.svg"
+                  data-test-opensearch-logo="/test/ui/logos/opensearch_mark_on_light.svg"
                   data-test-subj="collapsibleNavGroup-opensearchDashboards"
                   onToggle={[Function]}
                 >
@@ -7713,10 +7157,10 @@ exports[`CollapsibleNav renders the nav bar with custom logo in default mode 2`]
                               >
                                 <EuiIcon
                                   size="l"
-                                  type="undefined/opensearch_mark_default_mode.svg"
+                                  type="/test/ui/logos/opensearch_mark_on_light.svg"
                                 >
                                   <span
-                                    data-euiicon-type="undefined/opensearch_mark_default_mode.svg"
+                                    data-euiicon-type="/test/ui/logos/opensearch_mark_on_light.svg"
                                     size="l"
                                   />
                                 </EuiIcon>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 9068e225c8ba..b9da5ac37dbe 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -247,18 +247,7 @@ exports[`Header handles visibility and lock changes 1`] = `
       "serverBasePath": "/test",
     }
   }
-  branding={
-    Object {
-      "applicationTitle": "OpenSearch Dashboards",
-      "darkMode": false,
-      "logo": Object {
-        "defaultUrl": "/",
-      },
-      "mark": Object {
-        "defaultUrl": "/",
-      },
-    }
-  }
+  branding={Object {}}
   breadcrumbs$={
     BehaviorSubject {
       "_isScalar": false,
@@ -1437,6 +1426,71 @@ exports[`Header handles visibility and lock changes 1`] = `
       "thrownError": null,
     }
   }
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navControlsCenter$={
     BehaviorSubject {
       "_isScalar": false,
@@ -1888,27 +1942,8 @@ exports[`Header handles visibility and lock changes 1`] = `
               "borders": "none",
               "items": Array [
                 <HeaderLogo
-                  basePath={
-                    BasePath {
-                      "basePath": "/test",
-                      "get": [Function],
-                      "prepend": [Function],
-                      "remove": [Function],
-                      "serverBasePath": "/test",
-                    }
-                  }
-                  branding={
-                    Object {
-                      "applicationTitle": "OpenSearch Dashboards",
-                      "darkMode": false,
-                      "logo": Object {
-                        "defaultUrl": "/",
-                      },
-                      "mark": Object {
-                        "defaultUrl": "/",
-                      },
-                    }
-                  }
+                  backgroundColorScheme="dark"
+                  branding={Object {}}
                   forceNavigation$={
                     BehaviorSubject {
                       "_isScalar": false,
@@ -1996,6 +2031,71 @@ exports[`Header handles visibility and lock changes 1`] = `
                     }
                   }
                   href="/"
+                  logos={
+                    Object {
+                      "AnimatedMark": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                      },
+                      "Application": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                      },
+                      "CenterMark": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                      },
+                      "Mark": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_mark_on_light.svg",
+                      },
+                      "OpenSearch": Object {
+                        "dark": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_dark.svg",
+                        },
+                        "light": Object {
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_light.svg",
+                        },
+                        "type": "default",
+                        "url": "/ui/logos/opensearch_on_light.svg",
+                      },
+                      "colorScheme": "light",
+                    }
+                  }
                   navLinks$={
                     BehaviorSubject {
                       "_isScalar": false,
@@ -2127,7 +2227,6 @@ exports[`Header handles visibility and lock changes 1`] = `
                     }
                   }
                   navigateToApp={[MockFunction]}
-                  theme="dark"
                 />,
               ],
             },
@@ -2335,27 +2434,8 @@ exports[`Header handles visibility and lock changes 1`] = `
                   className="euiHeaderSectionItem"
                 >
                   <HeaderLogo
-                    basePath={
-                      BasePath {
-                        "basePath": "/test",
-                        "get": [Function],
-                        "prepend": [Function],
-                        "remove": [Function],
-                        "serverBasePath": "/test",
-                      }
-                    }
-                    branding={
-                      Object {
-                        "applicationTitle": "OpenSearch Dashboards",
-                        "darkMode": false,
-                        "logo": Object {
-                          "defaultUrl": "/",
-                        },
-                        "mark": Object {
-                          "defaultUrl": "/",
-                        },
-                      }
-                    }
+                    backgroundColorScheme="dark"
+                    branding={Object {}}
                     forceNavigation$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -2443,6 +2523,71 @@ exports[`Header handles visibility and lock changes 1`] = `
                       }
                     }
                     href="/"
+                    logos={
+                      Object {
+                        "AnimatedMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                        },
+                        "Application": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                        },
+                        "CenterMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                        },
+                        "Mark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_light.svg",
+                        },
+                        "OpenSearch": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_light.svg",
+                        },
+                        "colorScheme": "light",
+                      }
+                    }
                     navLinks$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -2574,7 +2719,6 @@ exports[`Header handles visibility and lock changes 1`] = `
                       }
                     }
                     navigateToApp={[MockFunction]}
-                    theme="dark"
                   >
                     <a
                       aria-label="Go to home page"
@@ -2584,12 +2728,12 @@ exports[`Header handles visibility and lock changes 1`] = `
                       onClick={[Function]}
                     >
                       <img
-                        alt="OpenSearch Dashboards logo"
+                        alt="opensearch dashboards logo"
                         className="logoImage"
-                        data-test-image-url="/"
-                        data-test-subj="customLogo"
+                        data-test-image-url="/ui/logos/opensearch_dashboards_on_dark.svg"
+                        data-test-subj="defaultLogo"
                         loading="lazy"
-                        src="/"
+                        src="/ui/logos/opensearch_dashboards_on_dark.svg"
                       />
                     </a>
                   </HeaderLogo>
@@ -2948,18 +3092,7 @@ exports[`Header handles visibility and lock changes 1`] = `
                   className="euiHeaderSectionItem euiHeaderSectionItem--borderRight"
                 >
                   <HomeLoader
-                    branding={
-                      Object {
-                        "applicationTitle": "OpenSearch Dashboards",
-                        "darkMode": false,
-                        "logo": Object {
-                          "defaultUrl": "/",
-                        },
-                        "mark": Object {
-                          "defaultUrl": "/",
-                        },
-                      }
-                    }
+                    branding={Object {}}
                     forceNavigation$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -3133,6 +3266,71 @@ exports[`Header handles visibility and lock changes 1`] = `
                         "thrownError": null,
                       }
                     }
+                    logos={
+                      Object {
+                        "AnimatedMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                        },
+                        "Application": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                        },
+                        "CenterMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                        },
+                        "Mark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_light.svg",
+                        },
+                        "OpenSearch": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_light.svg",
+                        },
+                        "colorScheme": "light",
+                      }
+                    }
                     navLinks$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -3299,10 +3497,10 @@ exports[`Header handles visibility and lock changes 1`] = `
                                     >
                                       <span
                                         class="logoImage"
-                                        data-euiicon-type="/"
-                                        data-test-image-url="/"
-                                        data-test-subj="customMark"
-                                        title="OpenSearch Dashboards home"
+                                        data-euiicon-type="home"
+                                        data-test-image-url="home"
+                                        data-test-subj="homeIcon"
+                                        title="opensearch dashboards home"
                                       />
                                     </div>
                                     <div
@@ -3360,34 +3558,88 @@ exports[`Header handles visibility and lock changes 1`] = `
                                     className="homeIconContainer"
                                   >
                                     <HomeIcon
-                                      applicationTitle="OpenSearch Dashboards"
-                                      darkMode={false}
-                                      logo={
+                                      branding={Object {}}
+                                      logos={
                                         Object {
-                                          "defaultUrl": "/",
-                                        }
-                                      }
-                                      mark={
-                                        Object {
-                                          "defaultUrl": "/",
+                                          "AnimatedMark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                                          },
+                                          "Application": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                                          },
+                                          "CenterMark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                                          },
+                                          "Mark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_mark_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                                          },
+                                          "OpenSearch": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_on_light.svg",
+                                          },
+                                          "colorScheme": "light",
                                         }
                                       }
                                     >
                                       <EuiIcon
                                         className="logoImage"
-                                        data-test-image-url="/"
-                                        data-test-subj="customMark"
-                                        size="l"
-                                        title="OpenSearch Dashboards home"
-                                        type="/"
+                                        data-test-image-url="home"
+                                        data-test-subj="homeIcon"
+                                        size="m"
+                                        title="opensearch dashboards home"
+                                        type="home"
                                       >
                                         <span
                                           className="logoImage"
-                                          data-euiicon-type="/"
-                                          data-test-image-url="/"
-                                          data-test-subj="customMark"
-                                          size="l"
-                                          title="OpenSearch Dashboards home"
+                                          data-euiicon-type="home"
+                                          data-test-image-url="home"
+                                          data-test-subj="homeIcon"
+                                          size="m"
+                                          title="opensearch dashboards home"
                                         />
                                       </EuiIcon>
                                     </HomeIcon>
@@ -5625,18 +5877,6 @@ exports[`Header handles visibility and lock changes 1`] = `
           "serverBasePath": "/test",
         }
       }
-      branding={
-        Object {
-          "applicationTitle": "OpenSearch Dashboards",
-          "darkMode": false,
-          "logo": Object {
-            "defaultUrl": "/",
-          },
-          "mark": Object {
-            "defaultUrl": "/",
-          },
-        }
-      }
       closeNav={[Function]}
       customNavLink$={
         BehaviorSubject {
@@ -5696,6 +5936,71 @@ exports[`Header handles visibility and lock changes 1`] = `
       id="mockId"
       isLocked={true}
       isNavOpen={false}
+      logos={
+        Object {
+          "AnimatedMark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "Application": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "CenterMark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "Mark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "OpenSearch": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "colorScheme": "light",
+        }
+      }
       navLinks$={
         BehaviorSubject {
           "_isScalar": false,
@@ -6634,14 +6939,6 @@ exports[`Header renders condensed header 1`] = `
   }
   branding={
     Object {
-      "applicationTitle": "Foobar Dashboards",
-      "darkMode": false,
-      "logo": Object {
-        "defaultUrl": "/foo",
-      },
-      "mark": Object {
-        "defaultUrl": "/foo",
-      },
       "useExpandedHeader": false,
     }
   }
@@ -7777,6 +8074,71 @@ exports[`Header renders condensed header 1`] = `
       "thrownError": null,
     }
   }
+  logos={
+    Object {
+      "AnimatedMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_spinner_on_light.svg",
+      },
+      "Application": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+      },
+      "CenterMark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+      },
+      "Mark": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_mark_on_light.svg",
+      },
+      "OpenSearch": Object {
+        "dark": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_dark.svg",
+        },
+        "light": Object {
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
+        },
+        "type": "default",
+        "url": "/ui/logos/opensearch_on_light.svg",
+      },
+      "colorScheme": "light",
+    }
+  }
   navControlsCenter$={
     BehaviorSubject {
       "_isScalar": false,
@@ -8280,14 +8642,6 @@ exports[`Header renders condensed header 1`] = `
                   <HomeLoader
                     branding={
                       Object {
-                        "applicationTitle": "Foobar Dashboards",
-                        "darkMode": false,
-                        "logo": Object {
-                          "defaultUrl": "/foo",
-                        },
-                        "mark": Object {
-                          "defaultUrl": "/foo",
-                        },
                         "useExpandedHeader": false,
                       }
                     }
@@ -8427,6 +8781,71 @@ exports[`Header renders condensed header 1`] = `
                         "thrownError": null,
                       }
                     }
+                    logos={
+                      Object {
+                        "AnimatedMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                        },
+                        "Application": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                        },
+                        "CenterMark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                        },
+                        "Mark": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_mark_on_light.svg",
+                        },
+                        "OpenSearch": Object {
+                          "dark": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_dark.svg",
+                          },
+                          "light": Object {
+                            "type": "default",
+                            "url": "/ui/logos/opensearch_on_light.svg",
+                          },
+                          "type": "default",
+                          "url": "/ui/logos/opensearch_on_light.svg",
+                        },
+                        "colorScheme": "light",
+                      }
+                    }
                     navLinks$={
                       BehaviorSubject {
                         "_isScalar": false,
@@ -8549,10 +8968,10 @@ exports[`Header renders condensed header 1`] = `
                                     >
                                       <span
                                         class="logoImage"
-                                        data-euiicon-type="/foo"
-                                        data-test-image-url="/foo"
-                                        data-test-subj="customMark"
-                                        title="Foobar Dashboards home"
+                                        data-euiicon-type="/ui/logos/opensearch_mark_on_light.svg"
+                                        data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+                                        data-test-subj="defaultMark"
+                                        title="opensearch dashboards home"
                                       />
                                     </div>
                                     <div
@@ -8610,35 +9029,92 @@ exports[`Header renders condensed header 1`] = `
                                     className="homeIconContainer"
                                   >
                                     <HomeIcon
-                                      applicationTitle="Foobar Dashboards"
-                                      darkMode={false}
-                                      logo={
+                                      branding={
                                         Object {
-                                          "defaultUrl": "/foo",
+                                          "useExpandedHeader": false,
                                         }
                                       }
-                                      mark={
+                                      logos={
                                         Object {
-                                          "defaultUrl": "/foo",
+                                          "AnimatedMark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                                          },
+                                          "Application": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                                          },
+                                          "CenterMark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                                          },
+                                          "Mark": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_mark_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_mark_on_light.svg",
+                                          },
+                                          "OpenSearch": Object {
+                                            "dark": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_on_dark.svg",
+                                            },
+                                            "light": Object {
+                                              "type": "default",
+                                              "url": "/ui/logos/opensearch_on_light.svg",
+                                            },
+                                            "type": "default",
+                                            "url": "/ui/logos/opensearch_on_light.svg",
+                                          },
+                                          "colorScheme": "light",
                                         }
                                       }
-                                      useExpandedHeader={false}
                                     >
                                       <EuiIcon
                                         className="logoImage"
-                                        data-test-image-url="/foo"
-                                        data-test-subj="customMark"
+                                        data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+                                        data-test-subj="defaultMark"
                                         size="l"
-                                        title="Foobar Dashboards home"
-                                        type="/foo"
+                                        title="opensearch dashboards home"
+                                        type="/ui/logos/opensearch_mark_on_light.svg"
                                       >
                                         <span
                                           className="logoImage"
-                                          data-euiicon-type="/foo"
-                                          data-test-image-url="/foo"
-                                          data-test-subj="customMark"
+                                          data-euiicon-type="/ui/logos/opensearch_mark_on_light.svg"
+                                          data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+                                          data-test-subj="defaultMark"
                                           size="l"
-                                          title="Foobar Dashboards home"
+                                          title="opensearch dashboards home"
                                         />
                                       </EuiIcon>
                                     </HomeIcon>
@@ -10872,19 +11348,6 @@ exports[`Header renders condensed header 1`] = `
           "serverBasePath": "/test",
         }
       }
-      branding={
-        Object {
-          "applicationTitle": "Foobar Dashboards",
-          "darkMode": false,
-          "logo": Object {
-            "defaultUrl": "/foo",
-          },
-          "mark": Object {
-            "defaultUrl": "/foo",
-          },
-          "useExpandedHeader": false,
-        }
-      }
       closeNav={[Function]}
       customNavLink$={
         BehaviorSubject {
@@ -10939,6 +11402,71 @@ exports[`Header renders condensed header 1`] = `
       id="mockId"
       isLocked={false}
       isNavOpen={false}
+      logos={
+        Object {
+          "AnimatedMark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_spinner_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "Application": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "CenterMark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "Mark": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_mark_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "OpenSearch": Object {
+            "dark": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_dark.svg",
+            },
+            "light": Object {
+              "type": "default",
+              "url": "/ui/logos/opensearch_on_light.svg",
+            },
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "colorScheme": "light",
+        }
+      }
       navLinks$={
         BehaviorSubject {
           "_isScalar": false,
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap
index 7e44e456f320..ed8ee0c5f18c 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header_logo.test.tsx.snap
@@ -1,2176 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header logo when dark-themed uses custom dark-mode logo if branding dark-mode logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {
-        "darkModeUrl": "/darkModeLogo",
-        "defaultUrl": "/defaultModeLogo",
-      },
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/darkModeLogo"
-      data-test-subj="customLogo"
-      loading="lazy"
-      src="/darkModeLogo"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when dark-themed uses dashboards' dark logo if branding containing a mark but not a logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {},
-      "mark": Object {
-        "defaultUrl": "/defaultModeMark",
-      },
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when dark-themed uses dashboards' dark logo if branding containing no logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {},
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when dark-themed uses dashboards' dark logo if no branding is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={Object {}}
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="opensearch dashboards logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards_darkmode.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when dark-themed uses default-themed custom logo if branding without dark-mode logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {
-        "defaultUrl": "/defaultModeLogo",
-      },
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="dark"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/defaultModeLogo"
-      data-test-subj="customLogo"
-      loading="lazy"
-      src="/defaultModeLogo"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when default-themed  uses custom default-mode logo if branding logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {
-        "defaultUrl": "/defaultModeLogo",
-      },
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="default"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/defaultModeLogo"
-      data-test-subj="customLogo"
-      loading="lazy"
-      src="/defaultModeLogo"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when default-themed  uses dashboards logo if branding containing a mark but not a logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {},
-      "mark": Object {
-        "defaultUrl": "/defaultModeMark",
-      },
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="default"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when default-themed  uses dashboards logo if branding containing no logo is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={
-    Object {
-      "applicationTitle": "custom title",
-      "assetFolderUrl": "base/ui/default_branding",
-      "logo": Object {},
-      "mark": Object {},
-    }
-  }
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="default"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="custom title logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards.svg"
-    />
-  </a>
-</HeaderLogo>
-`;
-
-exports[`Header logo when default-themed  uses dashboards logo if no branding is provided 1`] = `
-<HeaderLogo
-  basePath={
-    BasePath {
-      "basePath": "/base",
-      "get": [Function],
-      "prepend": [Function],
-      "remove": [Function],
-      "serverBasePath": "/base",
-    }
-  }
-  branding={Object {}}
-  forceNavigation$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": false,
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  href="/"
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  navLinks$={
-    BehaviorSubject {
-      "_isScalar": false,
-      "_value": Array [],
-      "closed": false,
-      "hasError": false,
-      "isStopped": false,
-      "observers": Array [
-        Subscriber {
-          "_parentOrParents": null,
-          "_subscriptions": Array [
-            SubjectSubscription {
-              "_parentOrParents": [Circular],
-              "_subscriptions": null,
-              "closed": false,
-              "subject": [Circular],
-              "subscriber": [Circular],
-            },
-          ],
-          "closed": false,
-          "destination": SafeSubscriber {
-            "_complete": undefined,
-            "_context": [Circular],
-            "_error": undefined,
-            "_next": [Function],
-            "_parentOrParents": null,
-            "_parentSubscriber": [Circular],
-            "_subscriptions": null,
-            "closed": false,
-            "destination": Object {
-              "closed": true,
-              "complete": [Function],
-              "error": [Function],
-              "next": [Function],
-            },
-            "isStopped": false,
-            "syncErrorThrowable": false,
-            "syncErrorThrown": false,
-            "syncErrorValue": null,
-          },
-          "isStopped": false,
-          "syncErrorThrowable": true,
-          "syncErrorThrown": false,
-          "syncErrorValue": null,
-        },
-      ],
-      "thrownError": null,
-    }
-  }
-  navigateToApp={[MockFunction]}
-  theme="default"
->
-  <a
-    aria-label="Go to home page"
-    className="logoContainer"
-    data-test-subj="logo"
-    href="/"
-    onClick={[Function]}
-  >
-    <img
-      alt="opensearch dashboards logo"
-      className="logoImage"
-      data-test-image-url="/base/ui/logos/opensearch_dashboards.svg"
-      data-test-subj="defaultLogo"
-      loading="lazy"
-      src="/base/ui/logos/opensearch_dashboards.svg"
-    />
-  </a>
-</HeaderLogo>
+exports[`Header logo uses branded application title when provided 1`] = `
+<a
+  aria-label="Go to home page"
+  className="logoContainer"
+  data-test-subj="logo"
+  href="/"
+  onClick={[Function]}
+>
+  <img
+    alt="Page Title logo"
+    className="logoImage"
+    data-test-image-url="/custom/branded/logo.svg"
+    data-test-subj="customLogo"
+    loading="lazy"
+    src="/custom/branded/logo.svg"
+  />
+</a>
+`;
+
+exports[`Header logo uses default application title when not branded 1`] = `
+<a
+  aria-label="Go to home page"
+  className="logoContainer"
+  data-test-subj="logo"
+  href="/"
+  onClick={[Function]}
+>
+  <img
+    alt="opensearch dashboards logo"
+    className="logoImage"
+    data-test-image-url="/ui/logos/opensearch_dashboards_on_light.svg"
+    data-test-subj="defaultLogo"
+    loading="lazy"
+    src="/ui/logos/opensearch_dashboards_on_light.svg"
+  />
+</a>
 `;
diff --git a/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap
index 63e83acd78e3..c1a7c11b69f9 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/home_icon.test.tsx.snap
@@ -1,1995 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Home button icon  in condensed dark mode  uses custom mark dark mode URL 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "darkModeUrl": "/darkModeMark",
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/darkModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/darkModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/darkModeMark"
-      data-test-image-url="/darkModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed dark mode  uses custom mark default mode URL if no dark mode mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/defaultModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/defaultModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/defaultModeMark"
-      data-test-image-url="/defaultModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed dark mode  uses opensearch mark if custom logo provided without mark 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={
-    Object {
-      "defaultUrl": "/defaultModeLogo",
-    }
-  }
-  mark={Object {}}
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-    data-test-subj="defaultMark"
-    size="l"
-    title="custom title home"
-    type="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-      data-test-image-url="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-      data-test-subj="defaultMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed dark mode  uses opensearch mark if no mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={Object {}}
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-    data-test-subj="defaultMark"
-    size="l"
-    title="custom title home"
-    type="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-      data-test-image-url="base/ui/default_branding/opensearch_mark_dark_mode.svg"
-      data-test-subj="defaultMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed light mode  uses custom mark default mode URL 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/defaultModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/defaultModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/defaultModeMark"
-      data-test-image-url="/defaultModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed light mode  uses opensearch mark if custom logo provided without mark 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={
-    Object {
-      "defaultUrl": "/defaultModeLogo",
-    }
-  }
-  mark={Object {}}
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="base/ui/default_branding/opensearch_mark_default_mode.svg"
-    data-test-subj="defaultMark"
-    size="l"
-    title="custom title home"
-    type="base/ui/default_branding/opensearch_mark_default_mode.svg"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="base/ui/default_branding/opensearch_mark_default_mode.svg"
-      data-test-image-url="base/ui/default_branding/opensearch_mark_default_mode.svg"
-      data-test-subj="defaultMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in condensed light mode  uses opensearch mark if no mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={Object {}}
-  useExpandedHeader={false}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="base/ui/default_branding/opensearch_mark_default_mode.svg"
-    data-test-subj="defaultMark"
-    size="l"
-    title="custom title home"
-    type="base/ui/default_branding/opensearch_mark_default_mode.svg"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="base/ui/default_branding/opensearch_mark_default_mode.svg"
-      data-test-image-url="base/ui/default_branding/opensearch_mark_default_mode.svg"
-      data-test-subj="defaultMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in dark mode  uses custom mark dark mode URL 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "darkModeUrl": "/darkModeMark",
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/darkModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/darkModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/darkModeMark"
-      data-test-image-url="/darkModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in dark mode  uses custom mark default mode URL if no dark mode mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/defaultModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/defaultModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/defaultModeMark"
-      data-test-image-url="/defaultModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in dark mode  uses home icon if custom logo provided without mark 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={
-    Object {
-      "defaultUrl": "/defaultModeLogo",
-    }
-  }
-  mark={Object {}}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="custom title home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in dark mode  uses home icon if no mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={true}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={Object {}}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="custom title home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in light mode  uses custom mark default mode URL 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={
-    Object {
-      "defaultUrl": "/defaultModeMark",
-    }
-  }
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="/defaultModeMark"
-    data-test-subj="customMark"
-    size="l"
-    title="custom title home"
-    type="/defaultModeMark"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="/defaultModeMark"
-      data-test-image-url="/defaultModeMark"
-      data-test-subj="customMark"
-      size="l"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in light mode  uses home icon if custom logo provided without mark 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={
-    Object {
-      "defaultUrl": "/defaultModeLogo",
-    }
-  }
-  mark={Object {}}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="custom title home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in light mode  uses home icon if no branding provided 1`] = `
-<HomeIcon
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="opensearch dashboards home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="opensearch dashboards home"
-    />
-  </EuiIcon>
-</HomeIcon>
-`;
-
-exports[`Home button icon  in light mode  uses home icon if no mark provided 1`] = `
-<HomeIcon
-  applicationTitle="custom title"
-  assetFolderUrl="base/ui/default_branding"
-  darkMode={false}
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
-  logo={Object {}}
-  mark={Object {}}
->
-  <EuiIcon
-    className="logoImage"
-    data-test-image-url="home"
-    data-test-subj="homeIcon"
-    size="m"
-    title="custom title home"
-    type="home"
-  >
-    <span
-      className="logoImage"
-      data-euiicon-type="home"
-      data-test-image-url="home"
-      data-test-subj="homeIcon"
-      size="m"
-      title="custom title home"
-    />
-  </EuiIcon>
-</HomeIcon>
+exports[`Home icon, custom branded, uses the custom logo when header is expanded 1`] = `
+<EuiIcon
+  className="logoImage"
+  data-test-image-url="/custom/branded/mark.svg"
+  data-test-subj="customMark"
+  size="l"
+  title="Page Title home"
+  type="/custom/branded/mark.svg"
+/>
+`;
+
+exports[`Home icon, custom branded, uses the custom logo when header is not expanded 1`] = `
+<EuiIcon
+  className="logoImage"
+  data-test-image-url="/custom/branded/mark.svg"
+  data-test-subj="customMark"
+  size="l"
+  title="Page Title home"
+  type="/custom/branded/mark.svg"
+/>
+`;
+
+exports[`Home icon, unbranded, uses the home icon when header is expanded 1`] = `
+<EuiIcon
+  className="logoImage"
+  data-test-image-url="home"
+  data-test-subj="homeIcon"
+  size="m"
+  title="opensearch dashboards home"
+  type="home"
+/>
+`;
+
+exports[`Home icon, unbranded, uses the mark logo when header is not expanded 1`] = `
+<EuiIcon
+  className="logoImage"
+  data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+  data-test-subj="defaultMark"
+  size="l"
+  title="opensearch dashboards home"
+  type="/ui/logos/opensearch_mark_on_light.svg"
+/>
 `;
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
index dc44fe5053fe..955b7d7ca242 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
@@ -37,6 +37,7 @@ import { ChromeNavLink, DEFAULT_APP_CATEGORIES } from '../../..';
 import { httpServiceMock } from '../../../http/http_service.mock';
 import { ChromeRecentlyAccessedHistoryItem } from '../../recently_accessed';
 import { CollapsibleNav } from './collapsible_nav';
+import { getLogos } from '../../../../common';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => 'mockId',
@@ -64,10 +65,22 @@ function mockRecentNavLink({ label = 'recent' }: Partial<ChromeRecentlyAccessedH
   };
 }
 
-function mockProps() {
+const mockBasePath = httpServiceMock.createSetupContract({ basePath: '/test' }).basePath;
+const mockBranding = {
+  logo: {
+    defaultUrl: '/custom/branded/logo.svg',
+    darkModeUrl: '/custom/branded/logo-darkmode.svg',
+  },
+  mark: {
+    defaultUrl: '/custom/branded/mark.svg',
+    darkModeUrl: '/custom/branded/mark-darkmode.svg',
+  },
+};
+
+function mockProps(branding = {}) {
   return {
     appId$: new BehaviorSubject('test'),
-    basePath: httpServiceMock.createSetupContract({ basePath: '/test' }).basePath,
+    basePath: mockBasePath,
     id: 'collapsibe-nav',
     isLocked: false,
     isNavOpen: false,
@@ -80,13 +93,8 @@ function mockProps() {
     navigateToApp: () => Promise.resolve(),
     navigateToUrl: () => Promise.resolve(),
     customNavLink$: new BehaviorSubject(undefined),
-    branding: {
-      darkMode: false,
-      mark: {
-        defaultUrl: '/defaultModeLogo',
-        darkModeUrl: '/darkModeLogo',
-      },
-    },
+    branding,
+    logos: getLogos(branding, mockBasePath.serverBasePath),
   };
 }
 
@@ -212,77 +220,79 @@ describe('CollapsibleNav', () => {
     expectNavIsClosed(component);
   });
 
-  it('renders the nav bar with custom logo in default mode', () => {
-    const navLinks = [
-      mockLink({ category: opensearchDashboards }),
-      mockLink({ category: observability }),
-    ];
-    const recentNavLinks = [mockRecentNavLink({})];
-    const component = mount(
-      <CollapsibleNav
-        {...mockProps()}
-        isNavOpen={true}
-        navLinks$={new BehaviorSubject(navLinks)}
-        recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
-      />
-    );
-    // check if nav bar renders default mode custom logo
-    expect(component).toMatchSnapshot();
+  describe('with custom branding', () => {
+    it('renders the nav bar in default mode', () => {
+      const navLinks = [
+        mockLink({ category: opensearchDashboards }),
+        mockLink({ category: observability }),
+      ];
+      const recentNavLinks = [mockRecentNavLink({})];
+      const component = mount(
+        <CollapsibleNav
+          {...mockProps(mockBranding)}
+          isNavOpen={true}
+          navLinks$={new BehaviorSubject(navLinks)}
+          recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        />
+      );
 
-    // check if nav bar renders the original default mode opensearch mark
-    component.setProps({
-      branding: {
-        darkMode: false,
-        mark: {},
-      },
+      expect(component).toMatchSnapshot();
     });
-    expect(component).toMatchSnapshot();
-  });
 
-  it('renders the nav bar with custom logo in dark mode', () => {
-    const navLinks = [
-      mockLink({ category: opensearchDashboards }),
-      mockLink({ category: observability }),
-    ];
-    const recentNavLinks = [mockRecentNavLink({})];
-    const component = mount(
-      <CollapsibleNav
-        {...mockProps()}
-        isNavOpen={true}
-        navLinks$={new BehaviorSubject(navLinks)}
-        recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
-      />
-    );
-    // check if nav bar renders dark mode custom logo
-    component.setProps({
-      branding: {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-          darkModeUrl: '/darkModeLogo',
-        },
-      },
+    it('renders the nav bar in dark mode', () => {
+      const navLinks = [
+        mockLink({ category: opensearchDashboards }),
+        mockLink({ category: observability }),
+      ];
+      const recentNavLinks = [mockRecentNavLink({})];
+      const component = mount(
+        <CollapsibleNav
+          {...mockProps({ ...mockBranding, darkMode: true })}
+          isNavOpen={true}
+          navLinks$={new BehaviorSubject(navLinks)}
+          recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
     });
-    expect(component).toMatchSnapshot();
+  });
 
-    // check if nav bar renders default mode custom logo
-    component.setProps({
-      branding: {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-        },
-      },
+  describe('without custom branding', () => {
+    it('renders the nav bar in default mode', () => {
+      const navLinks = [
+        mockLink({ category: opensearchDashboards }),
+        mockLink({ category: observability }),
+      ];
+      const recentNavLinks = [mockRecentNavLink({})];
+      const component = mount(
+        <CollapsibleNav
+          {...mockProps()}
+          isNavOpen={true}
+          navLinks$={new BehaviorSubject(navLinks)}
+          recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
     });
-    expect(component).toMatchSnapshot();
 
-    // check if nav bar renders the original dark mode opensearch mark
-    component.setProps({
-      branding: {
-        darkMode: false,
-        mark: {},
-      },
+    it('renders the nav bar in dark mode', () => {
+      const navLinks = [
+        mockLink({ category: opensearchDashboards }),
+        mockLink({ category: observability }),
+      ];
+      const recentNavLinks = [mockRecentNavLink({})];
+      const component = mount(
+        <CollapsibleNav
+          {...mockProps({ darkMode: true })}
+          isNavOpen={true}
+          navLinks$={new BehaviorSubject(navLinks)}
+          recentlyAccessed$={new BehaviorSubject(recentNavLinks)}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
     });
-    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
index 51d43d96f7fd..8b178200114a 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -50,7 +50,7 @@ import { InternalApplicationStart } from '../../../application/types';
 import { HttpStart } from '../../../http';
 import { OnIsLockedUpdate } from './';
 import { createEuiListItem, createRecentNavLink, isModifiedOrPrevented } from './nav_link';
-import { ChromeBranding } from '../../chrome_service';
+import type { Logos } from '../../../../common/types';
 
 function getAllCategories(allCategorizedLinks: Record<string, ChromeNavLink[]>) {
   const allCategories = {} as Record<string, AppCategory | undefined>;
@@ -101,7 +101,7 @@ interface Props {
   navigateToApp: InternalApplicationStart['navigateToApp'];
   navigateToUrl: InternalApplicationStart['navigateToUrl'];
   customNavLink$: Rx.Observable<ChromeNavLink | undefined>;
-  branding: ChromeBranding;
+  logos: Logos;
 }
 
 export function CollapsibleNav({
@@ -115,7 +115,7 @@ export function CollapsibleNav({
   closeNav,
   navigateToApp,
   navigateToUrl,
-  branding,
+  logos,
   ...observables
 }: Props) {
   const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden);
@@ -138,42 +138,6 @@ export function CollapsibleNav({
     });
   };
 
-  const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`;
-  const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`;
-
-  const darkMode = branding.darkMode;
-  const markDefault = branding.mark?.defaultUrl;
-  const markDarkMode = branding.mark?.darkModeUrl;
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * side menu opensearch logo in default mode
-   *
-   * @returns a valid custom URL or original default mode opensearch mark if no valid URL is provided
-   */
-  const customSideMenuLogoDefaultMode = () => {
-    return markDefault ?? DEFAULT_OPENSEARCH_MARK;
-  };
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * side menu opensearch logo in dark mode
-   *
-   * @returns a valid custom URL or original dark mode opensearch mark if no valid URL is provided
-   */
-  const customSideMenuLogoDarkMode = () => {
-    return markDarkMode ?? markDefault ?? DARKMODE_OPENSEARCH_MARK;
-  };
-
-  /**
-   * Render custom side menu logo for both default mode and dark mode
-   *
-   * @returns a valid logo URL
-   */
-  const customSideMenuLogo = () => {
-    return darkMode ? customSideMenuLogoDarkMode() : customSideMenuLogoDefaultMode();
-  };
-
   return (
     <EuiCollapsibleNav
       data-test-subj="collapsibleNav"
@@ -277,7 +241,7 @@ export function CollapsibleNav({
         {orderedCategories.map((categoryName) => {
           const category = categoryDictionary[categoryName]!;
           const opensearchLinkLogo =
-            category.id === 'opensearchDashboards' ? customSideMenuLogo() : category.euiIconType;
+            category.id === 'opensearchDashboards' ? logos.Mark.url : category.euiIconType;
 
           return (
             <EuiCollapsibleNavGroup
diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx
index 319dea4c394b..c829361ff5c1 100644
--- a/src/core/public/chrome/ui/header/header.test.tsx
+++ b/src/core/public/chrome/ui/header/header.test.tsx
@@ -33,7 +33,7 @@ import { act } from 'react-dom/test-utils';
 import { BehaviorSubject } from 'rxjs';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { httpServiceMock } from '../../../http/http_service.mock';
-import { applicationServiceMock } from '../../../mocks';
+import { applicationServiceMock, chromeServiceMock } from '../../../mocks';
 import { Header } from './header';
 import { StubBrowserStorage } from 'test_utils/stub_browser_storage';
 
@@ -69,13 +69,9 @@ function mockProps() {
     isLocked$: new BehaviorSubject(false),
     loadingCount$: new BehaviorSubject(0),
     onIsLockedUpdate: () => {},
-    branding: {
-      darkMode: false,
-      logo: { defaultUrl: '/' },
-      mark: { defaultUrl: '/' },
-      applicationTitle: 'OpenSearch Dashboards',
-    },
+    branding: {},
     survey: '/',
+    logos: chromeServiceMock.createStartContract().logos,
   };
 }
 
@@ -102,17 +98,17 @@ describe('Header', () => {
     const recentlyAccessed$ = new BehaviorSubject([
       { link: '', label: 'dashboard', id: 'dashboard' },
     ]);
-    const component = mountWithIntl(
-      <Header
-        {...mockProps()}
-        isVisible$={isVisible$}
-        breadcrumbs$={breadcrumbs$}
-        navLinks$={navLinks$}
-        recentlyAccessed$={recentlyAccessed$}
-        isLocked$={isLocked$}
-        customNavLink$={customNavLink$}
-      />
-    );
+    const props = {
+      ...mockProps(),
+      isVisible$,
+      breadcrumbs$,
+      navLinks$,
+      recentlyAccessed$,
+      isLocked$,
+      customNavLink$,
+    };
+
+    const component = mountWithIntl(<Header {...props} />);
     expect(component.find('EuiHeader').exists()).toBeFalsy();
     expect(component.find('EuiProgress').exists()).toBeTruthy();
 
@@ -120,7 +116,6 @@ describe('Header', () => {
     component.update();
     expect(component.find('EuiHeader.primaryHeader').exists()).toBeTruthy();
     expect(component.find('EuiHeader.expandedHeader').exists()).toBeTruthy();
-    expect(component.find('HeaderLogo').exists()).toBeTruthy();
     expect(component.find('HeaderNavControls')).toHaveLength(5);
     expect(component.find('[data-test-subj="toggleNavButton"]').exists()).toBeTruthy();
     expect(component.find('HomeLoader').exists()).toBeTruthy();
@@ -131,6 +126,11 @@ describe('Header', () => {
 
     expect(component.find('EuiFlyout[aria-label="Primary"]').exists()).toBeFalsy();
 
+    const headerLogo = component.find('HeaderLogo');
+    expect(headerLogo.exists()).toBeTruthy();
+    expect(headerLogo.prop('backgroundColorScheme')).toEqual('dark');
+    expect(headerLogo.prop('logos')).toEqual(props.logos);
+
     act(() => isLocked$.next(true));
     component.update();
     expect(component.find('EuiFlyout[aria-label="Primary"]').exists()).toBeTruthy();
@@ -139,16 +139,13 @@ describe('Header', () => {
 
   it('renders condensed header', () => {
     const branding = {
-      darkMode: false,
-      logo: { defaultUrl: '/foo' },
-      mark: { defaultUrl: '/foo' },
-      applicationTitle: 'Foobar Dashboards',
       useExpandedHeader: false,
     };
     const props = {
       ...mockProps(),
       branding,
     };
+
     const component = mountWithIntl(<Header {...props} />);
 
     expect(component.find('EuiHeader.primaryHeader').exists()).toBeTruthy();
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 9496b76b9980..acc7c6869145 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -64,6 +64,7 @@ import { HomeLoader } from './home_loader';
 import { HeaderNavControls } from './header_nav_controls';
 import { HeaderActionMenu } from './header_action_menu';
 import { HeaderLogo } from './header_logo';
+import type { Logos } from '../../../../common/types';
 
 export interface HeaderProps {
   opensearchDashboardsVersion: string;
@@ -90,6 +91,7 @@ export interface HeaderProps {
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   onIsLockedUpdate: OnIsLockedUpdate;
   branding: ChromeBranding;
+  logos: Logos;
   survey: string | undefined;
 }
 
@@ -102,6 +104,7 @@ export function Header({
   homeHref,
   branding,
   survey,
+  logos,
   ...observables
 }: HeaderProps) {
   const isVisible = useObservable(observables.isVisible$, false);
@@ -117,7 +120,7 @@ export function Header({
   const className = classnames('hide-for-sharing', 'headerGlobalNav');
   const { useExpandedHeader = true } = branding;
 
-  const headerTheme: EuiHeaderProps['theme'] = 'dark';
+  const expandedHeaderColorScheme: EuiHeaderProps['theme'] = 'dark';
 
   return (
     <>
@@ -126,7 +129,7 @@ export function Header({
           {useExpandedHeader && (
             <EuiHeader
               className="expandedHeader"
-              theme={headerTheme}
+              theme={expandedHeaderColorScheme}
               position="fixed"
               sections={[
                 {
@@ -137,9 +140,9 @@ export function Header({
                       navLinks$={observables.navLinks$}
                       navigateToApp={application.navigateToApp}
                       branding={branding}
-                      basePath={basePath}
-                      /* This `theme` should match the theme of EuiHeader */
-                      theme={headerTheme}
+                      logos={logos}
+                      /* This color-scheme should match the `theme` of the parent EuiHeader */
+                      backgroundColorScheme={expandedHeaderColorScheme}
                     />,
                   ],
                   borders: 'none',
@@ -200,6 +203,7 @@ export function Header({
                   navLinks$={observables.navLinks$}
                   navigateToApp={application.navigateToApp}
                   branding={branding}
+                  logos={logos}
                   loadingCount$={observables.loadingCount$}
                 />
               </EuiHeaderSectionItem>
@@ -259,7 +263,7 @@ export function Header({
             }
           }}
           customNavLink$={observables.customNavLink$}
-          branding={branding}
+          logos={logos}
         />
       </header>
     </>
diff --git a/src/core/public/chrome/ui/header/header_logo.test.tsx b/src/core/public/chrome/ui/header/header_logo.test.tsx
index 6d31e71c1f0a..c43073ec7f48 100644
--- a/src/core/public/chrome/ui/header/header_logo.test.tsx
+++ b/src/core/public/chrome/ui/header/header_logo.test.tsx
@@ -3,183 +3,102 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiHeaderProps } from '@elastic/eui';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { HeaderLogo, DEFAULT_DARK_LOGO, DEFAULT_LOGO } from './header_logo';
-import { BasePath } from '../../../http/base_path';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { HeaderLogo } from './header_logo';
+import { getLogosMock } from '../../../../common/mocks';
 
-const basePath = new BasePath('/base');
+const mockTitle = 'Page Title';
 const mockProps = () => ({
   href: '/',
-  basePath,
   navLinks$: new BehaviorSubject([]),
   forceNavigation$: new BehaviorSubject(false),
   navigateToApp: jest.fn(),
   branding: {},
-  theme: 'default' as EuiHeaderProps['theme'],
+  logos: getLogosMock.default,
 });
 
 describe('Header logo', () => {
-  describe('when default-themed ', () => {
-    it('uses dashboards logo if no branding is provided', () => {
-      const branding = {};
-      const props = {
-        ...mockProps(),
-        branding,
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_LOGO}`);
-      expect(img.prop('alt')).toEqual(`opensearch dashboards logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it("uses the light color-scheme's Application logo by default", () => {
+    const props = {
+      ...mockProps(),
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('src')).toEqual(props.logos.Application.light.url);
+  });
 
-    it('uses dashboards logo if branding containing no logo is provided', () => {
-      const branding = {
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_LOGO}`);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it("uses the light color-scheme's Application logo if the header's theme is not dark", () => {
+    const props = {
+      ...mockProps(),
+      backgroundColorScheme: 'light' as const,
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('src')).toEqual(props.logos.Application.light.url);
+  });
 
-    it('uses dashboards logo if branding containing a mark but not a logo is provided', () => {
-      const branding = {
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_LOGO}`);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it("uses the normal color-scheme's Application logo if the header's theme is not dark", () => {
+    const props = {
+      ...mockProps(),
+      backgroundColorScheme: 'normal' as const,
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('src')).toEqual(props.logos.Application.light.url);
+  });
 
-    it('uses custom default-mode logo if branding logo is provided', () => {
-      const branding = {
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(branding.logo.defaultUrl);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it("uses the dark color-scheme's Application logo if the header's theme is dark", () => {
+    const props = {
+      ...mockProps(),
+      backgroundColorScheme: 'dark' as const,
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('src')).toEqual(props.logos.Application.dark.url);
   });
 
-  describe('when dark-themed', () => {
-    it("uses dashboards' dark logo if no branding is provided", () => {
-      const branding = {};
-      const props = {
-        ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_DARK_LOGO}`);
-      expect(img.prop('alt')).toEqual(`opensearch dashboards logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it('uses default application title when not branded', () => {
+    const props = {
+      ...mockProps(),
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('data-test-subj')).toEqual(`defaultLogo`);
+    expect(img.prop('alt')).toEqual(`opensearch dashboards logo`);
+    expect(component).toMatchSnapshot();
+  });
 
-    it("uses dashboards' dark logo if branding containing no logo is provided", () => {
-      const branding = {
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_DARK_LOGO}`);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+  it('uses branded application title when provided', () => {
+    const props = {
+      ...mockProps(),
+      logos: getLogosMock.branded,
+      branding: {
+        applicationTitle: mockTitle,
+      },
+    };
+    const component = shallowWithIntl(<HeaderLogo {...props} />);
+    const img = component.find('.logoContainer img');
+    expect(img.prop('data-test-subj')).toEqual(`customLogo`);
+    expect(img.prop('alt')).toEqual(`${mockTitle} logo`);
+    expect(component).toMatchSnapshot();
+  });
 
-    it("uses dashboards' dark logo if branding containing a mark but not a logo is provided", () => {
-      const branding = {
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
+  describe('onClick', () => {
+    it('uses default application title when not branded', () => {
       const props = {
         ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
       };
       const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(`${basePath.serverBasePath}/${DEFAULT_DARK_LOGO}`);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+      component.find('.logoContainer img').simulate('click');
 
-    it('uses default-themed custom logo if branding without dark-mode logo is provided', () => {
-      const branding = {
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(branding.logo.defaultUrl);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
+      expect(props.navigateToApp).toHaveBeenCalledTimes(1);
+      expect(props.navigateToApp).toHaveBeenCalledWith('home');
     });
 
-    it('uses custom dark-mode logo if branding dark-mode logo is provided', () => {
-      const branding = {
-        logo: { defaultUrl: '/defaultModeLogo', darkModeUrl: '/darkModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const props = {
-        ...mockProps(),
-        branding,
-        theme: 'dark' as EuiHeaderProps['theme'],
-      };
-      const component = mountWithIntl(<HeaderLogo {...props} />);
-      const img = component.find('.logoContainer img');
-      expect(img.prop('src')).toEqual(branding.logo.darkModeUrl);
-      expect(img.prop('alt')).toEqual(`${branding.applicationTitle} logo`);
-      expect(component).toMatchSnapshot();
-    });
+    // ToDo: Add tests for onClick
+    // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4692
+    it.todo('performs all the complications');
   });
 });
diff --git a/src/core/public/chrome/ui/header/header_logo.tsx b/src/core/public/chrome/ui/header/header_logo.tsx
index 00de679f5184..b5fddee0e595 100644
--- a/src/core/public/chrome/ui/header/header_logo.tsx
+++ b/src/core/public/chrome/ui/header/header_logo.tsx
@@ -29,29 +29,13 @@
  */
 
 import './header_logo.scss';
-import { EuiHeaderProps } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { ChromeNavLink } from '../..';
 import { ChromeBranding } from '../../chrome_service';
-import { HttpStart } from '../../../http';
-
-function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void {
-  let current = element;
-  while (current) {
-    if (current.tagName === 'A') {
-      return current as HTMLAnchorElement;
-    }
-
-    if (!current.parentElement || current.parentElement === document.body) {
-      return undefined;
-    }
-
-    current = current.parentElement;
-  }
-}
+import type { Logos } from '../../../../common/types';
 
 function onClick(
   event: React.MouseEvent<HTMLAnchorElement>,
@@ -59,7 +43,7 @@ function onClick(
   navLinks: ChromeNavLink[],
   navigateToApp: (appId: string) => void
 ) {
-  const anchor = findClosestAnchor((event as any).nativeEvent.target);
+  const anchor = (event.nativeEvent.target as HTMLAnchorElement)?.closest('a');
   if (!anchor) {
     return;
   }
@@ -98,44 +82,36 @@ function onClick(
   }
 }
 
-export const DEFAULT_LOGO = 'ui/logos/opensearch_dashboards.svg';
-export const DEFAULT_DARK_LOGO = 'ui/logos/opensearch_dashboards_darkmode.svg';
-
 interface Props {
   href: string;
   navLinks$: Observable<ChromeNavLink[]>;
   forceNavigation$: Observable<boolean>;
   navigateToApp: (appId: string) => void;
   branding: ChromeBranding;
-  basePath: HttpStart['basePath'];
-  // What background is the logo appearing on; this is independent of theme:darkMode
-  theme?: EuiHeaderProps['theme'];
+  logos: Logos;
+  /* indicates the background color-scheme this element will appear over
+   * `'normal'` and `'light'` are synonyms of being `undefined`, to mean not `'dark'`
+   */
+  backgroundColorScheme?: 'normal' | 'light' | 'dark';
 }
 
 export function HeaderLogo({
   href,
   navigateToApp,
   branding,
-  basePath,
-  theme = 'default',
+  logos,
+  backgroundColorScheme,
   ...observables
 }: Props) {
   const forceNavigation = useObservable(observables.forceNavigation$, false);
   const navLinks = useObservable(observables.navLinks$, []);
-  const {
-    logo: { defaultUrl: customLogoUrl, darkModeUrl: customDarkLogoUrl } = {},
-    applicationTitle = 'opensearch dashboards',
-  } = branding;
+  const { applicationTitle = 'opensearch dashboards' } = branding;
 
-  // Attempt to find a suitable custom branded logo before falling back on OSD's
-  let logoSrc = theme === 'dark' && customDarkLogoUrl ? customDarkLogoUrl : customLogoUrl;
-  let testSubj = 'customLogo';
-
-  // If no custom branded logo was set, use OSD's
-  if (!logoSrc) {
-    logoSrc = `${basePath.serverBasePath}/${theme === 'dark' ? DEFAULT_DARK_LOGO : DEFAULT_LOGO}`;
-    testSubj = 'defaultLogo';
-  }
+  const {
+    [backgroundColorScheme === 'dark' ? 'dark' : 'light']: { url: logoURL },
+    type: logoType,
+  } = logos.Application;
+  const testSubj = `${logoType}Logo`;
 
   const alt = `${applicationTitle} logo`;
 
@@ -151,8 +127,8 @@ export function HeaderLogo({
     >
       <img
         data-test-subj={testSubj}
-        data-test-image-url={logoSrc}
-        src={logoSrc}
+        data-test-image-url={logoURL}
+        src={logoURL}
         alt={alt}
         loading="lazy"
         className="logoImage"
diff --git a/src/core/public/chrome/ui/header/home_icon.test.tsx b/src/core/public/chrome/ui/header/home_icon.test.tsx
index d1ede9e2c5a3..05ffd5591594 100644
--- a/src/core/public/chrome/ui/header/home_icon.test.tsx
+++ b/src/core/public/chrome/ui/header/home_icon.test.tsx
@@ -4,251 +4,109 @@
  */
 
 import React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import { DEFAULT_MARK, DEFAULT_DARK_MARK, HomeIcon } from './home_icon';
-
-// TODO: many of these tests cover the conditional logic of which mark to load depending on raw branding configurations
-// Dark mode and custom/default fallbacks should instead be consolidated and centralized elsewhere:
-// https://github.com/opensearch-project/OpenSearch-Dashboards/issues/895#issuecomment-1164995007
-describe('Home button icon ', () => {
-  describe('in condensed light mode ', () => {
-    it('uses opensearch mark if no mark provided', () => {
-      const branding = {
-        darkMode: false,
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}/${DEFAULT_MARK}`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+import { shallow } from 'enzyme';
+import { HomeIcon } from './home_icon';
+import { getLogosMock } from '../../../../common/mocks';
 
-    it('uses opensearch mark if custom logo provided without mark', () => {
-      const branding = {
-        darkMode: false,
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}/${DEFAULT_MARK}`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+const mockTitle = 'Page Title';
 
-    it('uses custom mark default mode URL', () => {
-      const branding = {
-        darkMode: false,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.defaultUrl);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
+describe('Home icon,', () => {
+  describe('unbranded,', () => {
+    const mockProps = () => ({
+      branding: {},
+      logos: getLogosMock.default,
     });
-  });
 
-  describe('in condensed dark mode ', () => {
-    it('uses opensearch mark if no mark provided', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+    it('uses the home icon by default', () => {
+      const props = mockProps();
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}/${DEFAULT_DARK_MARK}`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
+      expect(icon.prop('data-test-subj')).toEqual('homeIcon');
+      expect(icon.prop('type')).toEqual('home');
+      expect(icon.prop('size')).toEqual('m');
+      expect(icon.prop('title')).toEqual('opensearch dashboards home');
     });
 
-    it('uses opensearch mark if custom logo provided without mark', () => {
-      const branding = {
-        darkMode: true,
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
+    it('uses the home icon when header is expanded', () => {
+      const props = {
+        ...mockProps(),
+        branding: {
+          useExpandedHeader: true,
+        },
       };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(`${branding.assetFolderUrl}/${DEFAULT_DARK_MARK}`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+      expect(icon.prop('data-test-subj')).toEqual('homeIcon');
+      expect(icon.prop('type')).toEqual('home');
+      expect(icon.prop('size')).toEqual('m');
+      expect(icon.prop('title')).toEqual('opensearch dashboards home');
 
-    it('uses custom mark default mode URL if no dark mode mark provided', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.defaultUrl);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
       expect(component).toMatchSnapshot();
     });
 
-    it('uses custom mark dark mode URL', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-        useExpandedHeader: false,
+    it('uses the mark logo when header is not expanded', () => {
+      const props = {
+        ...mockProps(),
+        branding: {
+          useExpandedHeader: false,
+        },
       };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.darkModeUrl);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
+      expect(icon.prop('data-test-subj')).toEqual('defaultMark');
+      expect(icon.prop('type')).toEqual(props.logos.Mark.url);
+      expect(icon.prop('size')).toEqual('l');
+      expect(icon.prop('title')).toEqual('opensearch dashboards home');
+
       expect(component).toMatchSnapshot();
     });
   });
 
-  describe('in light mode ', () => {
-    it('uses home icon if no branding provided', () => {
-      const branding = {};
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`opensearch dashboards home`);
-      expect(component).toMatchSnapshot();
+  describe('custom branded,', () => {
+    const mockProps = () => ({
+      branding: {
+        applicationTitle: mockTitle,
+      },
+      logos: getLogosMock.branded,
     });
 
-    it('uses home icon if no mark provided', () => {
-      const branding = {
-        darkMode: false,
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+    it('uses the custom logo by default', () => {
+      const props = mockProps();
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
+      expect(icon.prop('data-test-subj')).toEqual('customMark');
+      expect(icon.prop('type')).toEqual(props.logos.Mark.url);
+      expect(icon.prop('size')).toEqual('l');
+      expect(icon.prop('title')).toEqual(`${mockTitle} home`);
     });
 
-    it('uses home icon if custom logo provided without mark', () => {
-      const branding = {
-        darkMode: false,
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+    it('uses the custom logo when header is expanded', () => {
+      const props = mockProps();
+      // @ts-expect-error
+      props.branding.useExpandedHeader = true;
 
-    it('uses custom mark default mode URL', () => {
-      const branding = {
-        darkMode: false,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.defaultUrl);
-      expect(icon.prop('size')).toEqual(`l`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
-  });
+      expect(icon.prop('data-test-subj')).toEqual('customMark');
+      expect(icon.prop('type')).toEqual(props.logos.Mark.url);
+      expect(icon.prop('size')).toEqual('l');
+      expect(icon.prop('title')).toEqual(`${mockTitle} home`);
 
-  describe('in dark mode ', () => {
-    it('uses home icon if no mark provided', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
       expect(component).toMatchSnapshot();
     });
 
-    it('uses home icon if custom logo provided without mark', () => {
-      const branding = {
-        darkMode: true,
-        logo: { defaultUrl: '/defaultModeLogo' },
-        mark: {},
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual('home');
-      expect(icon.prop('size')).toEqual(`m`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+    it('uses the custom logo when header is not expanded', () => {
+      const props = mockProps();
+      // @ts-expect-error
+      props.branding.useExpandedHeader = false;
 
-    it('uses custom mark default mode URL if no dark mode mark provided', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
+      const component = shallow(<HomeIcon {...props} />);
       const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.defaultUrl);
-      expect(icon.prop('size')).toEqual(`l`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
-      expect(component).toMatchSnapshot();
-    });
+      expect(icon.prop('data-test-subj')).toEqual('customMark');
+      expect(icon.prop('type')).toEqual(props.logos.Mark.url);
+      expect(icon.prop('size')).toEqual('l');
+      expect(icon.prop('title')).toEqual(`${mockTitle} home`);
 
-    it('uses custom mark dark mode URL', () => {
-      const branding = {
-        darkMode: true,
-        logo: {},
-        mark: { defaultUrl: '/defaultModeMark', darkModeUrl: '/darkModeMark' },
-        applicationTitle: 'custom title',
-        assetFolderUrl: 'base/ui/default_branding',
-      };
-      const component = mountWithIntl(<HomeIcon {...branding} />);
-      const icon = component.find('EuiIcon');
-      expect(icon.prop('type')).toEqual(branding.mark.darkModeUrl);
-      expect(icon.prop('size')).toEqual(`l`);
-      expect(icon.prop('title')).toEqual(`${branding.applicationTitle} home`);
       expect(component).toMatchSnapshot();
     });
   });
diff --git a/src/core/public/chrome/ui/header/home_icon.tsx b/src/core/public/chrome/ui/header/home_icon.tsx
index 9260fc19ccae..2c0beb5a26cb 100644
--- a/src/core/public/chrome/ui/header/home_icon.tsx
+++ b/src/core/public/chrome/ui/header/home_icon.tsx
@@ -4,51 +4,46 @@
  */
 
 import React from 'react';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, IconSize } from '@elastic/eui';
 import { ChromeBranding } from '../../chrome_service';
+import type { Logos } from '../../../../common/types';
 
-export const DEFAULT_MARK = 'opensearch_mark_default_mode.svg';
-export const DEFAULT_DARK_MARK = 'opensearch_mark_dark_mode.svg';
+interface Props {
+  branding: ChromeBranding;
+  logos: Logos;
+}
 
 /**
  * Use branding configurations to render the header mark on the nav bar.
- *
- * @param {ChromeBranding} - branding object consist of mark, darkmode selection, asset path and title
- * @returns Mark component which is going to be rendered on the main page header bar.
  */
-export const HomeIcon = ({
-  darkMode,
-  assetFolderUrl = '',
-  mark,
-  applicationTitle = 'opensearch dashboards',
-  useExpandedHeader = true,
-}: ChromeBranding) => {
-  const { defaultUrl: markUrl, darkModeUrl: darkMarkUrl } = mark ?? {};
-
-  const customMark = darkMode ? darkMarkUrl ?? markUrl : markUrl;
-  const defaultMark = darkMode ? DEFAULT_DARK_MARK : DEFAULT_MARK;
-
-  const getIconProps = () => {
-    const iconType = customMark
-      ? customMark
-      : useExpandedHeader
-      ? 'home'
-      : `${assetFolderUrl}/${defaultMark}`;
-    const testSubj = customMark ? 'customMark' : useExpandedHeader ? 'homeIcon' : 'defaultMark';
-    const title = `${applicationTitle} home`;
-    // marks look better at the large size, but the home icon should be medium to fit in with other icons
-    const size = iconType === 'home' ? ('m' as const) : ('l' as const);
-
-    return {
-      'data-test-subj': testSubj,
-      'data-test-image-url': iconType,
-      type: iconType,
-      title,
-      size,
-    };
-  };
-
-  const props = getIconProps();
-
-  return <EuiIcon className="logoImage" {...props} />;
+export const HomeIcon = ({ branding, logos }: Props) => {
+  const { applicationTitle = 'opensearch dashboards', useExpandedHeader = true } = branding;
+
+  const { url: markURL, type: markType } = logos.Mark;
+
+  let markIcon = markURL;
+  let testSubj = `${markType}Mark`;
+  // Marks look better at the large size
+  let markIconSize: IconSize = 'l';
+
+  // If no custom branded mark was set, use `home` icon only for expanded headers
+  if (markType !== 'custom' && useExpandedHeader) {
+    markIcon = 'home';
+    testSubj = 'homeIcon';
+    // Home icon should be medium to fit in with other icons
+    markIconSize = 'm';
+  }
+
+  const alt = `${applicationTitle} home`;
+
+  return (
+    <EuiIcon
+      data-test-subj={testSubj}
+      data-test-image-url={markIcon}
+      type={markIcon}
+      title={alt}
+      size={markIconSize}
+      className="logoImage"
+    />
+  );
 };
diff --git a/src/core/public/chrome/ui/header/home_loader.tsx b/src/core/public/chrome/ui/header/home_loader.tsx
index 0083df43ff8b..9463b41060f7 100644
--- a/src/core/public/chrome/ui/header/home_loader.tsx
+++ b/src/core/public/chrome/ui/header/home_loader.tsx
@@ -39,6 +39,7 @@ import { ChromeNavLink } from '../..';
 import { ChromeBranding } from '../../chrome_service';
 import { LoadingIndicator } from '../loading_indicator';
 import { HomeIcon } from './home_icon';
+import type { Logos } from '../../../../common/types';
 
 function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void {
   let current = element;
@@ -107,9 +108,10 @@ interface Props {
   loadingCount$: Observable<number>;
   navigateToApp: (appId: string) => void;
   branding: ChromeBranding;
+  logos: Logos;
 }
 
-export function HomeLoader({ href, navigateToApp, branding, ...observables }: Props) {
+export function HomeLoader({ href, navigateToApp, branding, logos, ...observables }: Props) {
   const forceNavigation = useObservable(observables.forceNavigation$, false);
   const navLinks = useObservable(observables.navLinks$, []);
   const loadingCount = useObservable(observables.loadingCount$, 0);
@@ -130,7 +132,7 @@ export function HomeLoader({ href, navigateToApp, branding, ...observables }: Pr
     >
       {!(loadingCount > 0) && (
         <div className="homeIconContainer">
-          <HomeIcon {...branding} />
+          <HomeIcon branding={branding} logos={logos} />
         </div>
       )}
       <div className="loaderContainer">
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index 9a38771f513e..03ef6b6392f9 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -50,7 +50,6 @@ import './index.scss';
 
 import {
   ChromeBadge,
-  ChromeBrand,
   ChromeBreadcrumb,
   ChromeHelpExtension,
   ChromeHelpExtensionMenuLink,
@@ -89,6 +88,7 @@ import {
 } from './context';
 import { Branding } from '../types';
 
+export type { Logos } from '../common';
 export { PackageInfo, EnvironmentMode } from '../server/types';
 /** @interal */
 export { CoreContext, CoreSystem } from './core_system';
@@ -193,7 +193,7 @@ export {
   ErrorToastOptions,
 } from './notifications';
 
-export { MountPoint, UnmountCallback, PublicUiSettingsParams } from './types';
+export { MountPoint, UnmountCallback, PublicUiSettingsParams, ChromeBrand } from './types';
 
 export { URL_MAX_LENGTH } from './core_app';
 
@@ -298,7 +298,6 @@ export interface CoreStart {
 export {
   Capabilities,
   ChromeBadge,
-  ChromeBrand,
   ChromeBreadcrumb,
   ChromeHelpExtension,
   ChromeHelpExtensionMenuLink,
diff --git a/src/core/public/types.ts b/src/core/public/types.ts
index 0c1d6b70c728..ebbdd53f3cf5 100644
--- a/src/core/public/types.ts
+++ b/src/core/public/types.ts
@@ -37,6 +37,8 @@ export {
   StringValidationRegex,
 } from '../../core/types';
 
+export type { Logos } from '../common/types';
+
 /**
  * A function that should mount DOM content inside the provided container element
  * and return a handler to unmount it.
@@ -55,3 +57,12 @@ export type MountPoint<T extends HTMLElement = HTMLElement> = (element: T) => Un
  * @public
  */
 export type UnmountCallback = () => void;
+
+/**
+ * @deprecated: Use Branding instead
+ * @public
+ */
+export interface ChromeBrand {
+  logo?: string;
+  smallLogo?: string;
+}
diff --git a/src/core/server/core_app/assets/favicons/android-chrome-192x192.png b/src/core/server/core_app/assets/favicons/android-chrome-192x192.png
index 3fb291f8830c..a256e84b28b8 100644
Binary files a/src/core/server/core_app/assets/favicons/android-chrome-192x192.png and b/src/core/server/core_app/assets/favicons/android-chrome-192x192.png differ
diff --git a/src/core/server/core_app/assets/favicons/android-chrome-512x512.png b/src/core/server/core_app/assets/favicons/android-chrome-512x512.png
index 47bc1a2bd52b..404fbfad398f 100644
Binary files a/src/core/server/core_app/assets/favicons/android-chrome-512x512.png and b/src/core/server/core_app/assets/favicons/android-chrome-512x512.png differ
diff --git a/src/core/server/core_app/assets/favicons/apple-touch-icon.png b/src/core/server/core_app/assets/favicons/apple-touch-icon.png
index 3fdcfd3f09ed..00b8c190b08c 100644
Binary files a/src/core/server/core_app/assets/favicons/apple-touch-icon.png and b/src/core/server/core_app/assets/favicons/apple-touch-icon.png differ
diff --git a/src/core/server/core_app/assets/favicons/favicon-32x32.png b/src/core/server/core_app/assets/favicons/favicon-32x32.png
index ce2d8fe187fe..3046f5df76f1 100644
Binary files a/src/core/server/core_app/assets/favicons/favicon-32x32.png and b/src/core/server/core_app/assets/favicons/favicon-32x32.png differ
diff --git a/src/core/server/core_app/assets/favicons/manifest.json b/src/core/server/core_app/assets/favicons/manifest.json
index 9153b046420b..1318668560ac 100644
--- a/src/core/server/core_app/assets/favicons/manifest.json
+++ b/src/core/server/core_app/assets/favicons/manifest.json
@@ -3,12 +3,12 @@
     "short_name": "",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }
diff --git a/src/core/server/core_app/assets/favicons/mstile-144x144.png b/src/core/server/core_app/assets/favicons/mstile-144x144.png
index 577ecfed1c02..5a379489e086 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-144x144.png and b/src/core/server/core_app/assets/favicons/mstile-144x144.png differ
diff --git a/src/core/server/core_app/assets/favicons/mstile-150x150.png b/src/core/server/core_app/assets/favicons/mstile-150x150.png
index 938310ed5537..b064558a1eda 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-150x150.png and b/src/core/server/core_app/assets/favicons/mstile-150x150.png differ
diff --git a/src/core/server/core_app/assets/favicons/mstile-310x150.png b/src/core/server/core_app/assets/favicons/mstile-310x150.png
index 6be5bf986934..d938be9ee090 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-310x150.png and b/src/core/server/core_app/assets/favicons/mstile-310x150.png differ
diff --git a/src/core/server/core_app/assets/favicons/mstile-310x310.png b/src/core/server/core_app/assets/favicons/mstile-310x310.png
index b45858ef4bad..0790cc1a7f5f 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-310x310.png and b/src/core/server/core_app/assets/favicons/mstile-310x310.png differ
diff --git a/src/core/server/core_app/assets/favicons/mstile-70x70.png b/src/core/server/core_app/assets/favicons/mstile-70x70.png
index 399a42ff6ae5..5155640f0976 100644
Binary files a/src/core/server/core_app/assets/favicons/mstile-70x70.png and b/src/core/server/core_app/assets/favicons/mstile-70x70.png differ
diff --git a/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg b/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg
index 6ea5f91851f0..5f8b7cfd8576 100644
--- a/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg
+++ b/src/core/server/core_app/assets/favicons/safari-pinned-tab.svg
@@ -1,45 +1 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2979 6996 c-2 -2 -35 -7 -73 -11 -214 -21 -466 -145 -630 -310 -141
--142 -253 -355 -282 -535 -3 -19 -10 -55 -15 -80 -14 -73 -4 -345 16 -420 74
--280 294 -478 695 -624 41 -15 84 -31 95 -36 42 -18 300 -96 410 -125 125 -32
-513 -148 630 -188 303 -104 530 -209 705 -327 186 -126 401 -323 508 -465 104
--139 204 -380 228 -550 10 -68 11 -346 1 -420 l-7 -60 58 100 c96 167 179 349
-237 522 38 111 89 323 101 418 2 17 6 41 9 55 25 124 25 574 0 710 -1 8 -6 35
--10 60 -99 650 -448 1261 -970 1695 -80 67 -210 162 -272 200 -197 120 -331
-188 -494 248 -99 37 -281 91 -340 101 -19 3 -45 8 -59 11 -14 3 -47 8 -75 11
--27 3 -57 8 -65 11 -17 6 -395 15 -401 9z"/>
-<path d="M378 5382 c-91 -154 -217 -428 -243 -532 -1 -3 -4 -12 -8 -20 -26
--65 -76 -274 -93 -389 -4 -25 -8 -55 -10 -66 -22 -117 -25 -538 -5 -680 20
--149 22 -156 47 -270 57 -258 165 -534 291 -750 44 -74 136 -218 144 -225 3
--3 19 -25 36 -50 108 -158 310 -366 506 -524 89 -72 280 -206 292 -206 1 0 32
--17 66 -38 94 -56 256 -133 364 -172 292 -105 508 -144 790 -144 197 0 295 13
-430 59 166 56 296 136 421 259 152 151 240 318 290 546 21 98 26 339 8 434
--58 307 -247 497 -661 666 -51 21 -93 36 -93 33 0 -3 -6 -1 -12 4 -18 14 -219
-76 -589 182 -497 142 -717 219 -937 330 -250 125 -426 252 -624 453 -200 202
--314 417 -362 682 -15 85 -19 346 -6 436 4 30 7 56 6 57 -1 2 -23 -32 -48 -75z"/>
-<path d="M6643 4400 c-103 -52 -134 -113 -138 -280 -4 -141 -18 -332 -30 -410
--3 -19 -8 -48 -10 -65 -5 -38 -13 -86 -25 -150 -5 -27 -11 -61 -14 -75 -8 -48
--67 -275 -93 -355 -65 -204 -261 -655 -285 -655 -4 0 -8 -6 -8 -14 0 -17 -9
--33 -150 -246 -178 -271 -394 -523 -614 -715 -31 -28 -71 -63 -89 -78 -220
--194 -597 -427 -902 -557 -55 -23 -109 -46 -120 -51 -37 -16 -160 -61 -175
--64 -8 -2 -51 -15 -95 -29 -102 -32 -251 -69 -385 -95 -139 -27 -150 -29 -228
--36 -37 -4 -78 -8 -92 -11 -35 -5 -173 -14 -312 -19 -133 -4 -182 -20 -235
--75 -119 -123 -86 -312 70 -397 63 -35 523 -16 787 32 14 3 39 7 55 10 26 5
-82 16 150 29 11 3 40 9 65 15 25 7 54 14 64 16 532 124 1171 441 1595 790 196
-162 311 269 471 442 187 201 404 494 522 703 14 25 41 72 60 105 59 105 155
-305 212 446 49 120 141 388 150 436 2 10 9 38 16 63 7 25 13 52 15 60 2 8 11
-44 20 80 9 36 21 88 26 115 4 28 11 61 14 75 3 14 8 45 11 70 3 25 7 52 9 60
-3 8 7 38 10 65 3 28 7 66 10 85 11 79 20 263 20 395 0 115 -3 146 -18 172 -33
-61 -77 102 -133 123 -77 28 -129 26 -201 -10z"/>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 700 700"><path d="M297.9.4c-.2.2-3.5.7-7.3 1.1-21.4 2.1-46.6 14.5-63 31C213.5 46.7 202.3 68 199.4 86c-.3 1.9-1 5.5-1.5 8-1.4 7.3-.4 34.5 1.6 42 7.4 28 29.4 47.8 69.5 62.4 4.1 1.5 8.4 3.1 9.5 3.6 4.2 1.8 30 9.6 41 12.5 12.5 3.2 51.3 14.8 63 18.8 30.3 10.4 53 20.9 70.5 32.7 18.6 12.6 40.1 32.3 50.8 46.5 10.4 13.9 20.4 38 22.8 55 1 6.8 1.1 34.6.1 42l-.7 6 5.8-10c9.6-16.7 17.9-34.9 23.7-52.2 3.8-11.1 8.9-32.3 10.1-41.8.2-1.7.6-4.1.9-5.5 2.5-12.4 2.5-57.4 0-71-.1-.8-.6-3.5-1-6-9.9-65-44.8-126.1-97-169.5-8-6.7-21-16.2-27.2-20-19.7-12-33.1-18.8-49.4-24.8-9.9-3.7-28.1-9.1-34-10.1-1.9-.3-4.5-.8-5.9-1.1-1.4-.3-4.7-.8-7.5-1.1-2.7-.3-5.7-.8-6.5-1.1-1.7-.6-39.5-1.5-40.1-.9zM37.8 161.8c-9.1 15.4-21.7 42.8-24.3 53.2-.1.3-.4 1.2-.8 2-2.6 6.5-7.6 27.4-9.3 38.9-.4 2.5-.8 5.5-1 6.6-2.2 11.7-2.5 53.8-.5 68 2 14.9 2.2 15.6 4.7 27 5.7 25.8 16.5 53.4 29.1 75 4.4 7.4 13.6 21.8 14.4 22.5.3.3 1.9 2.5 3.6 5 10.8 15.8 31 36.6 50.6 52.4 8.9 7.2 28 20.6 29.2 20.6.1 0 3.2 1.7 6.6 3.8 9.4 5.6 25.6 13.3 36.4 17.2 29.2 10.5 50.8 14.4 79 14.4 19.7 0 29.5-1.3 43-5.9 16.6-5.6 29.6-13.6 42.1-25.9 15.2-15.1 24-31.8 29-54.6 2.1-9.8 2.6-33.9.8-43.4-5.8-30.7-24.7-49.7-66.1-66.6-5.1-2.1-9.3-3.6-9.3-3.3 0 .3-.6.1-1.2-.4-1.8-1.4-21.9-7.6-58.9-18.2-49.7-14.2-71.7-21.9-93.7-33-25-12.5-42.6-25.2-62.4-45.3-20-20.2-31.4-41.7-36.2-68.2-1.5-8.5-1.9-34.6-.6-43.6.4-3 .7-5.6.6-5.7-.1-.2-2.3 3.2-4.8 7.5z"/><path d="M664.3 260c-10.3 5.2-13.4 11.3-13.8 28-.4 14.1-1.8 33.2-3 41-.3 1.9-.8 4.8-1 6.5-.5 3.8-1.3 8.6-2.5 15-.5 2.7-1.1 6.1-1.4 7.5-.8 4.8-6.7 27.5-9.3 35.5-6.5 20.4-26.1 65.5-28.5 65.5-.4 0-.8.6-.8 1.4 0 1.7-.9 3.3-15 24.6-17.8 27.1-39.4 52.3-61.4 71.5-3.1 2.8-7.1 6.3-8.9 7.8-22 19.4-59.7 42.7-90.2 55.7-5.5 2.3-10.9 4.6-12 5.1-3.7 1.6-16 6.1-17.5 6.4-.8.2-5.1 1.5-9.5 2.9-10.2 3.2-25.1 6.9-38.5 9.5-13.9 2.7-15 2.9-22.8 3.6-3.7.4-7.8.8-9.2 1.1-3.5.5-17.3 1.4-31.2 1.9-13.3.4-18.2 2-23.5 7.5-11.9 12.3-8.6 31.2 7 39.7 6.3 3.5 52.3 1.6 78.7-3.2 1.4-.3 3.9-.7 5.5-1 2.6-.5 8.2-1.6 15-2.9 1.1-.3 4-.9 6.5-1.5 2.5-.7 5.4-1.4 6.4-1.6 53.2-12.4 117.1-44.1 159.5-79 19.6-16.2 31.1-26.9 47.1-44.2 18.7-20.1 40.4-49.4 52.2-70.3 1.4-2.5 4.1-7.2 6-10.5 5.9-10.5 15.5-30.5 21.2-44.6 4.9-12 14.1-38.8 15-43.6.2-1 .9-3.8 1.6-6.3.7-2.5 1.3-5.2 1.5-6l2-8c.9-3.6 2.1-8.8 2.6-11.5.4-2.8 1.1-6.1 1.4-7.5.3-1.4.8-4.5 1.1-7 .3-2.5.7-5.2.9-6 .3-.8.7-3.8 1-6.5.3-2.8.7-6.6 1-8.5 1.1-7.9 2-26.3 2-39.5 0-11.5-.3-14.6-1.8-17.2-3.3-6.1-7.7-10.2-13.3-12.3-7.7-2.8-12.9-2.6-20.1 1z"/></svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch.svg b/src/core/server/core_app/assets/logos/opensearch.svg
new file mode 100644
index 000000000000..9795f6c332ab
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 372 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}}</style>
+  <g class="a">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M107.78 48.26c3.15-4.49 4.72-10.92 4.72-19.28 0-8.36-1.56-14.77-4.69-19.24C104.7 5.24 100.2 3 94.34 3 88.4 3 83.87 5.23 80.72 9.7 77.57 14.15 76 20.55 76 28.91c0 8.43 1.57 14.9 4.72 19.39 3.15 4.47 7.67 6.7 13.55 6.7 5.86 0 10.36-2.25 13.5-6.74Zm-19.94-6.11c-1.46-3.02-2.19-7.4-2.19-13.17 0-5.78.73-10.17 2.2-13.16 1.45-3.02 3.62-4.53 6.49-4.53 5.65 0 8.47 5.9 8.47 17.7 0 11.79-2.85 17.68-8.54 17.68-2.83 0-4.97-1.5-6.43-4.52ZM128.2 54c1.28.74 2.66 1 4.31 1 3.53 0 6.4-1.67 8.44-5.24C142.98 46.2 144 41.28 144 35c0-6.36-.99-11.28-2.96-14.76-1.97-3.5-4.7-5.24-8.18-5.24-3.62 0-6.46 2.16-8.36 6h-.5l-1.5-5h-7v55.5h9V55c0-.65-.13-2.85-.5-6h.5a10.06 10.06 0 0 0 3.69 5Zm-2.3-28.62c.8-1.69 2.09-2.53 3.88-2.53 1.67 0 2.9 1 3.68 2.98.8 2 1.2 5 1.2 9.03 0 8.2-1.6 12.3-4.81 12.3-1.86 0-3.19-.98-4-2.92-.8-1.95-1.2-5.05-1.2-9.3v-1.22c.05-3.9.46-6.67 1.24-8.34ZM161.64 55c-4.84 0-8.67-1.7-11.48-5.13-2.78-3.44-4.17-8.3-4.17-14.58 0-6.37 1.26-11.34 3.8-14.92 2.52-3.58 6.04-5.37 10.56-5.37 4.23 0 7.55 1.54 9.99 4.6 2.43 3.05 3.65 7.34 3.65 12.85v5.05h-18.5c.07 3.44.67 5.88 2.01 7.56a6.77 6.77 0 0 0 5.57 2.5c3.01 0 6.1-.94 9.25-2.81v7.58c-2.97 1.78-6.53 2.67-10.68 2.67Zm-1.35-32.9c-1.33 0-2.42.7-3.27 2.11-.86 1.39-1.4 3.86-1.53 6.79h9.5c-.05-2.82-.55-5.26-1.37-6.72-.8-1.45-1.92-2.18-3.33-2.18Zm36.2 8.9v23h9V29.2c0-4.64-.88-8.17-2.63-10.58C201.14 16.2 198.52 15 195 15c-2.08 0-3.9.51-5.44 1.53-1.55 1-2.74 2.68-3.57 4.47h-.5l-1.25-5H177v38h9.5V35.75c0-4.71.17-7.92 1.1-9.9.92-1.99 2.37-2.98 4.36-2.98 1.5 0 2.59.71 3.25 2.15A13.12 13.12 0 0 1 196.5 31Z"/>
+    <path d="M61.74 26.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 28.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+    <path d="M3.92 17A24.43 24.43 0 0 0 .05 31.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 36.8 25 36 21.79 35.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  </g>
+  <g class="b">
+    <path d="M48.08 41a24.43 24.43 0 0 0 3.87-14.9c-.86-13.73-13.3-24.14-25.03-23.02-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 21.2 27 22 30.21 22.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M362.5 31v23h9V29c0-4.6-.9-8.09-2.7-10.45-1.8-2.38-4.52-3.55-8.05-3.55-3.83 0-6.9 2.24-8.75 6h-.5c.14-1.94.26-3.05.35-3.86.1-.84.15-1.36.15-2.14V.5h-9V54h9.5V35.5c0-4.15.14-7.22 1-9.42.85-2.22 2.34-3.33 4.46-3.33 2.84 0 4.54 2.63 4.54 8.25ZM231.85 51.23c2.43-2.52 3.65-6.14 3.65-10.86 0-2.96-.67-5.59-2-7.9-1.3-2.3-3.63-4.56-6.98-6.77-2.48-1.62-4.22-3.06-5.23-4.33a7.08 7.08 0 0 1-1.47-4.46c0-1.73.41-3.1 1.23-4.08a4.39 4.39 0 0 1 3.58-1.53c1.4 0 2.7.26 3.93.76 1.23.51 2.41 1.09 3.54 1.73l3.15-7.54A21.76 21.76 0 0 0 223.93 3c-4.12 0-7.4 1.27-9.86 3.8-2.43 2.54-3.65 5.98-3.65 10.32 0 2.26.3 4.24.91 5.95.63 1.7 1.51 3.25 2.63 4.63a24.91 24.91 0 0 0 5.02 4.3c2.53 1.7 4.34 3.26 5.44 4.66a7.22 7.22 0 0 1 1.65 4.6c0 1.71-.47 3.06-1.4 4.05-.92 1-2.29 1.49-4.11 1.49-3.2 0-6.72-1.23-10.56-3.7v9.3c3.13 1.74 6.93 2.6 11.4 2.6 4.56 0 8.04-1.26 10.45-3.77Zm9.82-1.36c2.81 3.42 6.64 5.13 11.48 5.13 4.15 0 7.71-.89 10.68-2.67v-7.58c-3.15 1.87-6.24 2.8-9.25 2.8a6.77 6.77 0 0 1-5.57-2.49c-1.34-1.68-1.94-4.12-2.01-7.56h18.5v-5.05c0-5.51-1.22-9.8-3.65-12.84-2.44-3.07-5.76-4.61-9.99-4.61-4.52 0-8.04 1.79-10.57 5.37-2.53 3.58-3.79 8.55-3.79 14.92 0 6.28 1.4 11.14 4.17 14.58Zm6.86-25.66c.85-1.4 1.94-2.11 3.27-2.11 1.41 0 2.52.73 3.33 2.18.82 1.46 1.32 3.9 1.37 6.72H247c.14-2.93.67-5.4 1.53-6.79ZM288 54l-1.5-5h-.5c-1.38 2.26-2.7 3.87-4.18 4.72a10.99 10.99 0 0 1-5.57 1.28 8.17 8.17 0 0 1-6.8-3.18c-1.63-2.12-2.45-5.07-2.45-8.85 0-4.06 1.12-7.07 3.36-9.02 2.27-1.99 5.65-3.08 10.13-3.29l5.19-.2v-2.77c0-3.6-1.58-5.4-4.73-5.4-2.34 0-5.03.9-8.06 2.7l-3.23-6.36A23.23 23.23 0 0 1 282.25 15c4.13 0 7.34 1.18 9.5 3.53 2.16 2.32 3.25 5.63 3.25 9.92V54h-7Zm-7.93-6.2c1.7 0 3.06-.74 4.07-2.24 1.02-1.52 1.54-3.54 1.54-6.05v-3.25l-2.88.14c-2.12.12-3.69.71-4.7 1.8-.97 1.08-1.46 2.7-1.46 4.84 0 3.18 1.14 4.77 3.43 4.77ZM318 15.76a14.31 14.31 0 0 0-3.78-.75 6.1 6.1 0 0 0-4.13 1.55A10.4 10.4 0 0 0 307 21h-.5l-1.5-5h-7v38h9.46V34c0-3.36.22-5.52 1.4-7.27a5.76 5.76 0 0 1 5.09-2.66c1.02 0 1.91.2 2.55.43l1.5-8.75ZM332 55c-4.56 0-8.05-1.52-10.43-4.87-2.38-3.35-3.57-8.27-3.57-14.75 0-6.8 1.12-11.86 3.37-15.2 2.26-3.35 5.65-5.18 10.37-5.18 1.41 0 3.01.36 4.57.78 1.56.41 3.45.94 4.69 1.72l-3.11 7.24c-1.9-1.13-3.58-1.7-5.05-1.7-1.95 0-3.35 1.04-4.23 3.09-.84 2.03-1.27 5.1-1.27 9.18 0 4 .43 6.98 1.27 8.97.85 1.96 2.24 2.94 4.16 2.94 2.3 0 4.68-.8 7.18-2.42v8.1c-2.4 1.5-5.04 2.1-7.95 2.1Z"/>
+  </g>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_center_mark.svg b/src/core/server/core_app/assets/logos/opensearch_center_mark.svg
new file mode 100644
index 000000000000..42a29b55050c
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_center_mark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+    <style>.a{fill:#005EB8}.b{fill:#003B5C}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}}</style>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+    <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_center_mark_on_dark.svg b/src/core/server/core_app/assets/logos/opensearch_center_mark_on_dark.svg
new file mode 100644
index 000000000000..43091f7d039a
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_center_mark_on_dark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+    <style>.a{fill:#00A3E0}.b{fill:#B9D9EB}</style>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+    <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_center_mark_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_center_mark_on_light.svg
new file mode 100644
index 000000000000..5a0d83c568b7
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_center_mark_on_light.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+    <style>.a{fill:#005EB8}.b{fill:#003B5C}</style>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+    <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_dashboards.svg b/src/core/server/core_app/assets/logos/opensearch_dashboards.svg
index bb85dcdd10ed..35f56544a26c 100644
--- a/src/core/server/core_app/assets/logos/opensearch_dashboards.svg
+++ b/src/core/server/core_app/assets/logos/opensearch_dashboards.svg
@@ -1,5 +1,5 @@
 <svg height="28" width="259" viewBox="0 0 148 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <style>.a{fill:#005EB8}.b{fill:#003B5C}.c{fill:#002A3A}</style>
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}.c{fill:#002A3A}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}.c{fill:#D9E1E2}}</style>
   <g class="a">
     <path d="M13.72 5.88a.49.49 0 0 0-.49.49 7.28 7.28 0 0 1-7.28 7.28.49.49 0 1 0 0 .97c4.57 0 8.26-3.7 8.26-8.25a.49.49 0 0 0-.49-.5Z"/>
     <path d="M1.24 3.83A5.28 5.28 0 0 0 .4 7.05c.19 2.96 2.87 5.2 5.4 4.97 1-.1 2.02-.9 1.93-2.36-.04-.63-.35-1-.85-1.28a7.65 7.65 0 0 0-1.78-.64c-.84-.24-1.81-.5-2.56-1.06-.9-.66-1.51-1.42-1.3-2.85Z"/>
diff --git a/src/core/server/core_app/assets/logos/opensearch_dashboards_darkmode.svg b/src/core/server/core_app/assets/logos/opensearch_dashboards_on_dark.svg
similarity index 100%
rename from src/core/server/core_app/assets/logos/opensearch_dashboards_darkmode.svg
rename to src/core/server/core_app/assets/logos/opensearch_dashboards_on_dark.svg
diff --git a/src/core/server/core_app/assets/logos/opensearch_dashboards_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_dashboards_on_light.svg
new file mode 100644
index 000000000000..bb85dcdd10ed
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_dashboards_on_light.svg
@@ -0,0 +1,13 @@
+<svg height="28" width="259" viewBox="0 0 148 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}.c{fill:#002A3A}</style>
+  <g class="a">
+    <path d="M13.72 5.88a.49.49 0 0 0-.49.49 7.28 7.28 0 0 1-7.28 7.28.49.49 0 1 0 0 .97c4.57 0 8.26-3.7 8.26-8.25a.49.49 0 0 0-.49-.5Z"/>
+    <path d="M1.24 3.83A5.28 5.28 0 0 0 .4 7.05c.19 2.96 2.87 5.2 5.4 4.97 1-.1 2.02-.9 1.93-2.36-.04-.63-.35-1-.85-1.28a7.65 7.65 0 0 0-1.78-.64c-.84-.24-1.81-.5-2.56-1.06-.9-.66-1.51-1.42-1.3-2.85Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.67 10.58c.68-.97 1.02-2.36 1.02-4.16 0-1.81-.34-3.2-1.02-4.16A3.33 3.33 0 0 0 20.77.8a3.4 3.4 0 0 0-2.95 1.45c-.68.96-1.02 2.34-1.02 4.15 0 1.82.34 3.22 1.02 4.19a3.36 3.36 0 0 0 2.93 1.44c1.26 0 2.24-.48 2.92-1.45Zm-4.3-1.32a6.74 6.74 0 0 1-.48-2.84c0-1.25.16-2.2.47-2.85.32-.65.78-.98 1.4-.98 1.22 0 1.83 1.28 1.83 3.83 0 2.54-.61 3.82-1.84 3.82-.61 0-1.07-.33-1.39-.98Zm8.7 2.56c.28.16.58.21.93.21.77 0 1.39-.36 1.83-1.13.44-.77.66-1.83.66-3.18 0-1.38-.21-2.44-.64-3.2-.43-.75-1.02-1.12-1.77-1.12-.78 0-1.4.46-1.8 1.3h-.11l-.32-1.09h-1.52V15.6h1.95v-3.57c0-.14-.03-.61-.11-1.3h.1c.17.5.53.92.8 1.09Zm-.5-6.18c.18-.37.46-.55.84-.55.37 0 .63.22.8.65.17.43.26 1.08.26 1.95 0 1.76-.35 2.65-1.04 2.65-.4 0-.69-.21-.86-.63a5.67 5.67 0 0 1-.26-2.01v-.26c0-.84.1-1.44.27-1.8Zm7.73 6.4a3.04 3.04 0 0 1-2.48-1.11c-.6-.75-.9-1.8-.9-3.15 0-1.38.27-2.45.82-3.23a2.64 2.64 0 0 1 2.28-1.15c.91 0 1.63.33 2.16.99.52.66.79 1.58.79 2.77v1.1h-4c.02.74.15 1.26.44 1.63.29.36.69.54 1.2.54.65 0 1.31-.2 2-.61v1.64a4.4 4.4 0 0 1-2.31.57ZM35 4.92c-.28 0-.51.15-.7.45-.18.3-.3.84-.33 1.47h2.05a3.3 3.3 0 0 0-.3-1.45c-.17-.31-.4-.47-.71-.47Zm7.83 1.92v4.97h1.94V6.46c0-1-.2-1.76-.57-2.28-.37-.52-.94-.78-1.7-.78a1.99 1.99 0 0 0-1.94 1.29h-.11l-.27-1.08h-1.57v8.2h2.06V7.89c0-1.02.03-1.71.23-2.14.2-.43.52-.65.94-.65.33 0 .56.16.7.47.15.31.29.68.29 1.3Z"/>
+  </g>
+  <g class="b">
+    <path d="M10.77 9.01c.47-.77.93-1.79.84-3.22C11.42 2.83 8.74.58 6.2.82c-1 .1-2.02.9-1.93 2.36.04.63.35 1 .85 1.28a8.2 8.2 0 0 0 1.79.64c.83.24 1.8.5 2.55 1.05.9.66 1.51 1.43 1.3 2.86Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M78.67 6.85v4.97h1.95v-5.4c0-1-.2-1.75-.59-2.26-.39-.51-.97-.76-1.74-.76-.82 0-1.49.48-1.89 1.3h-.1l.07-.84c.02-.18.03-.3.03-.46V.26h-1.94v11.56h2.05v-4c0-.9.03-1.56.22-2.03.18-.48.5-.72.96-.72.62 0 .98.57.98 1.78Zm-28.21 4.37c.52-.54.79-1.33.79-2.35 0-.63-.15-1.2-.43-1.7a4.6 4.6 0 0 0-1.51-1.46 4.84 4.84 0 0 1-1.13-.94c-.21-.27-.32-.6-.32-.96 0-.38.09-.67.27-.88a.95.95 0 0 1 .77-.33c.3 0 .58.05.85.16s.52.24.76.38l.68-1.63a4.7 4.7 0 0 0-2.44-.7c-.9 0-1.6.27-2.13.82a3.08 3.08 0 0 0-.79 2.22 3.51 3.51 0 0 0 .77 2.29c.24.3.6.6 1.08.93a5 5 0 0 1 1.17 1c.24.3.36.63.36 1s-.1.66-.3.87c-.2.22-.5.32-.89.32a4.3 4.3 0 0 1-2.28-.8v2.01c.68.38 1.5.56 2.46.56.99 0 1.74-.27 2.26-.81Zm2.12-.3c.6.74 1.43 1.11 2.48 1.11.9 0 1.66-.19 2.3-.57V9.82c-.68.4-1.34.6-2 .6-.5 0-.9-.17-1.2-.53-.29-.37-.41-.9-.43-1.64h4V7.16c0-1.19-.27-2.11-.8-2.77a2.6 2.6 0 0 0-2.15-1c-.98 0-1.74.4-2.28 1.16a5.51 5.51 0 0 0-.82 3.23c0 1.35.3 2.4.9 3.15Zm1.48-5.54c.19-.3.42-.45.7-.45.31 0 .55.16.73.47.17.31.28.84.3 1.45h-2.06c.03-.63.14-1.17.33-1.47Zm8.52 6.44-.32-1.08h-.1c-.3.49-.6.83-.9 1.02-.33.18-.73.27-1.21.27-.62 0-1.11-.23-1.47-.68a3.06 3.06 0 0 1-.53-1.91c0-.88.24-1.53.73-1.95a3.5 3.5 0 0 1 2.18-.71l1.12-.05v-.6c0-.77-.34-1.16-1.02-1.16-.5 0-1.08.2-1.74.58l-.7-1.37a5.02 5.02 0 0 1 2.72-.78c.9 0 1.59.25 2.05.76.47.5.7 1.21.7 2.14v5.52h-1.5Zm-1.7-1.34a1 1 0 0 0 .87-.48c.22-.33.33-.77.33-1.31v-.7l-.62.03c-.46.02-.8.15-1.01.39-.21.23-.32.58-.32 1.04 0 .69.25 1.03.74 1.03Zm8.18-6.92a3.1 3.1 0 0 0-.81-.16c-.34 0-.64.1-.9.33-.25.22-.45.44-.66.96h-.11l-.32-1.08h-1.52v8.2h2.05V7.5c0-.73.04-1.2.3-1.57.25-.38.62-.58 1.1-.58.22 0 .41.05.55.1l.32-1.9Zm3.03 8.47c-.99 0-1.74-.33-2.26-1.05a5.48 5.48 0 0 1-.77-3.18c0-1.47.25-2.56.73-3.29a2.52 2.52 0 0 1 2.24-1.11c.3 0 .65.07.99.16.33.1.74.2 1 .38l-.66 1.56a2.2 2.2 0 0 0-1.1-.37c-.41 0-.72.23-.9.67-.19.44-.28 1.1-.28 1.98 0 .86.1 1.5.27 1.94.19.42.49.63.9.63.5 0 1.01-.17 1.55-.52v1.75c-.52.32-1.09.45-1.71.45Z"/>
+  </g>
+  <path class="c" d="M90.82 6.37c0 1.77-.36 3.13-1.08 4.07a3.69 3.69 0 0 1-3.11 1.4H84V1.1h2.87a3.4 3.4 0 0 1 2.91 1.39c.7.92 1.04 2.2 1.04 3.87Zm-2.04.06c0-2.4-.66-3.6-1.98-3.6H86v7.26h.64c.73 0 1.27-.3 1.62-.9.34-.62.52-1.54.52-2.76Zm7.05 5.41-.39-1.12h-.04a2.9 2.9 0 0 1-.9 1c-.3.17-.7.27-1.16.27a1.7 1.7 0 0 1-1.43-.68 3.04 3.04 0 0 1-.51-1.88c0-.86.23-1.5.7-1.91a3.36 3.36 0 0 1 2.12-.7l1.1-.04v-.6c0-.75-.34-1.14-1-1.14-.49 0-1.05.2-1.69.58l-.67-1.35c.81-.52 1.7-.77 2.65-.77.86 0 1.52.25 1.97.74a3 3 0 0 1 .68 2.11v5.49h-1.43Zm-1.7-1.38c.36 0 .65-.16.86-.48.21-.32.32-.75.32-1.28V8l-.6.04c-.45.02-.77.15-.98.38-.2.23-.31.57-.31 1.03 0 .67.24 1 .72 1Zm8.65-1.01c0 .8-.24 1.42-.7 1.87-.47.44-1.16.67-2.07.67-.8 0-1.47-.16-2-.48V9.8a3.82 3.82 0 0 0 1.9.65c.3 0 .52-.07.68-.22a.78.78 0 0 0 .24-.6.95.95 0 0 0-.25-.65 4.24 4.24 0 0 0-.91-.68 3.82 3.82 0 0 1-1.28-1.12c-.26-.4-.38-.88-.38-1.42 0-.7.23-1.24.7-1.65.49-.4 1.14-.6 1.98-.6.72 0 1.4.18 2.04.56l-.64 1.4a2.99 2.99 0 0 0-1.38-.42c-.24 0-.43.06-.56.2a.69.69 0 0 0-.18.48c0 .22.07.42.22.59.16.17.45.38.87.64.5.3.87.57 1.07.78a2.32 2.32 0 0 1 .65 1.7Zm4.85 2.39V6.97c0-1.2-.3-1.8-.9-1.8-.45 0-.77.24-.95.71a5.9 5.9 0 0 0-.27 2.03v3.93h-1.95V.42h1.95v2.54c0 .33-.03.91-.09 1.75h.1c.4-.8 1-1.2 1.81-1.2.75 0 1.31.25 1.7.76.38.5.57 1.25.57 2.23v5.34h-1.97Zm6.79-8.33c.74 0 1.32.37 1.75 1.1.42.75.64 1.79.64 3.13a6.3 6.3 0 0 1-.65 3.14c-.42.74-1.02 1.1-1.77 1.1-.37 0-.7-.07-.98-.23a2.42 2.42 0 0 1-.8-.84h-.12l-.33.93h-1.44V.42h1.96V3.1l-.01.35c0 .13-.04.55-.1 1.29h.1c.25-.45.5-.77.78-.95.28-.18.6-.27.97-.27Zm-.68 1.66a.84.84 0 0 0-.8.52c-.17.35-.25.96-.26 1.83v.2c0 .95.08 1.62.24 2 .18.4.45.58.83.58.7 0 1.06-.86 1.06-2.6 0-1.68-.36-2.53-1.07-2.53Zm10.04 2.57c0 1.34-.28 2.38-.85 3.13a2.77 2.77 0 0 1-2.33 1.12 2.8 2.8 0 0 1-1.66-.52 3.25 3.25 0 0 1-1.1-1.47 6.02 6.02 0 0 1-.4-2.26c0-1.33.28-2.36.85-3.1a2.76 2.76 0 0 1 2.34-1.13c.96 0 1.73.38 2.3 1.15a5 5 0 0 1 .85 3.08Zm-4.34 0c0 .85.1 1.5.28 1.93.18.43.48.65.9.65.77 0 1.17-.86 1.17-2.58 0-.86-.1-1.5-.3-1.92-.18-.42-.47-.64-.88-.64-.4 0-.7.22-.9.64a5 5 0 0 0-.27 1.92Zm9.26 4.1-.38-1.12h-.04c-.3.48-.6.81-.9 1-.3.17-.7.27-1.17.27a1.7 1.7 0 0 1-1.42-.68 3.04 3.04 0 0 1-.51-1.88c0-.86.23-1.5.7-1.91a3.36 3.36 0 0 1 2.12-.7l1.09-.04v-.6c0-.75-.33-1.14-1-1.14-.48 0-1.04.2-1.68.58l-.68-1.35c.82-.52 1.7-.77 2.65-.77.87 0 1.53.25 1.98.74.45.5.68 1.2.68 2.11v5.49h-1.43Zm-1.69-1.38c.36 0 .64-.16.85-.48.22-.32.33-.75.33-1.28V8l-.6.04c-.45.02-.78.15-.99.38-.2.23-.3.57-.3 1.03 0 .67.23 1 .71 1Zm7.74-6.95c.24 0 .48.04.7.11l-.22 1.9a1.62 1.62 0 0 0-.54-.08c-.47 0-.84.19-1.1.57a2.9 2.9 0 0 0-.37 1.62v4.2h-1.95V3.67h1.6l.22 1.28h.07c.21-.51.45-.88.7-1.1.26-.22.55-.33.9-.33Zm3.28 8.48c-.75 0-1.35-.38-1.78-1.12a6.17 6.17 0 0 1-.66-3.1c0-1.33.22-2.38.64-3.13.43-.75 1.01-1.13 1.76-1.13.37 0 .7.1.96.28.28.18.53.49.76.92h.12a23 23 0 0 1-.1-1.56V.42h1.96v11.42h-1.45l-.33-1.07h-.07c-.42.81-1.02 1.22-1.81 1.22Zm.63-1.66c.36 0 .63-.16.8-.49.16-.33.25-.93.26-1.8v-.26c0-.95-.08-1.62-.25-2-.17-.39-.45-.58-.83-.58-.36 0-.63.22-.8.67a5.9 5.9 0 0 0-.24 1.93c0 .84.09 1.48.25 1.9.17.42.44.63.8.63Zm8.61-.88c0 .8-.24 1.42-.7 1.87-.47.44-1.16.67-2.07.67-.8 0-1.47-.16-2-.48V9.8a3.83 3.83 0 0 0 1.9.65c.3 0 .53-.07.68-.22a.78.78 0 0 0 .24-.6.95.95 0 0 0-.24-.65 4.24 4.24 0 0 0-.92-.68 3.82 3.82 0 0 1-1.28-1.12 2.6 2.6 0 0 1-.38-1.42c0-.7.24-1.24.71-1.65a3 3 0 0 1 1.97-.6c.72 0 1.4.18 2.05.56l-.64 1.4a2.98 2.98 0 0 0-1.38-.42c-.25 0-.44.06-.57.2a.69.69 0 0 0-.18.48c0 .22.07.42.23.59.15.17.44.38.86.64.51.3.87.57 1.07.78a2.36 2.36 0 0 1 .65 1.7Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_mark.svg b/src/core/server/core_app/assets/logos/opensearch_mark.svg
new file mode 100644
index 000000000000..b1986db87913
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_mark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}}</style>
+  <path class="a" d="M61.74 23.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 25.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+  <path class="a" d="M3.92 14A24.43 24.43 0 0 0 .05 28.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 33.8 25 33 21.79 32.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  <path class="b" d="M48.08 38a24.43 24.43 0 0 0 3.87-14.9C51.09 9.36 38.65-1.05 26.92.07c-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 18.2 27 19 30.21 19.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_mark_on_dark.svg b/src/core/server/core_app/assets/logos/opensearch_mark_on_dark.svg
new file mode 100644
index 000000000000..d202064dea30
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_mark_on_dark.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <style>.a{fill:#00A3E0}.b{fill:#B9D9EB}</style>
+  <path class="a" d="M61.74 23.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 25.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+  <path class="a" d="M3.92 14A24.43 24.43 0 0 0 .05 28.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 33.8 25 33 21.79 32.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  <path class="b" d="M48.08 38a24.43 24.43 0 0 0 3.87-14.9C51.09 9.36 38.65-1.05 26.92.07c-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 18.2 27 19 30.21 19.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_mark_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_mark_on_light.svg
new file mode 100644
index 000000000000..2c6bc1ee17e0
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_mark_on_light.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}</style>
+  <path class="a" d="M61.74 23.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 25.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+  <path class="a" d="M3.92 14A24.43 24.43 0 0 0 .05 28.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 33.8 25 33 21.79 32.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  <path class="b" d="M48.08 38a24.43 24.43 0 0 0 3.87-14.9C51.09 9.36 38.65-1.05 26.92.07c-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 18.2 27 19 30.21 19.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_on_dark.svg b/src/core/server/core_app/assets/logos/opensearch_on_dark.svg
new file mode 100644
index 000000000000..1830ff7f6683
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_on_dark.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 372 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>.a{fill:#00A3E0}.b{fill:#B9D9EB}</style>
+  <g class="a">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M107.78 48.26c3.15-4.49 4.72-10.92 4.72-19.28 0-8.36-1.56-14.77-4.69-19.24C104.7 5.24 100.2 3 94.34 3 88.4 3 83.87 5.23 80.72 9.7 77.57 14.15 76 20.55 76 28.91c0 8.43 1.57 14.9 4.72 19.39 3.15 4.47 7.67 6.7 13.55 6.7 5.86 0 10.36-2.25 13.5-6.74Zm-19.94-6.11c-1.46-3.02-2.19-7.4-2.19-13.17 0-5.78.73-10.17 2.2-13.16 1.45-3.02 3.62-4.53 6.49-4.53 5.65 0 8.47 5.9 8.47 17.7 0 11.79-2.85 17.68-8.54 17.68-2.83 0-4.97-1.5-6.43-4.52ZM128.2 54c1.28.74 2.66 1 4.31 1 3.53 0 6.4-1.67 8.44-5.24C142.98 46.2 144 41.28 144 35c0-6.36-.99-11.28-2.96-14.76-1.97-3.5-4.7-5.24-8.18-5.24-3.62 0-6.46 2.16-8.36 6h-.5l-1.5-5h-7v55.5h9V55c0-.65-.13-2.85-.5-6h.5a10.06 10.06 0 0 0 3.69 5Zm-2.3-28.62c.8-1.69 2.09-2.53 3.88-2.53 1.67 0 2.9 1 3.68 2.98.8 2 1.2 5 1.2 9.03 0 8.2-1.6 12.3-4.81 12.3-1.86 0-3.19-.98-4-2.92-.8-1.95-1.2-5.05-1.2-9.3v-1.22c.05-3.9.46-6.67 1.24-8.34ZM161.64 55c-4.84 0-8.67-1.7-11.48-5.13-2.78-3.44-4.17-8.3-4.17-14.58 0-6.37 1.26-11.34 3.8-14.92 2.52-3.58 6.04-5.37 10.56-5.37 4.23 0 7.55 1.54 9.99 4.6 2.43 3.05 3.65 7.34 3.65 12.85v5.05h-18.5c.07 3.44.67 5.88 2.01 7.56a6.77 6.77 0 0 0 5.57 2.5c3.01 0 6.1-.94 9.25-2.81v7.58c-2.97 1.78-6.53 2.67-10.68 2.67Zm-1.35-32.9c-1.33 0-2.42.7-3.27 2.11-.86 1.39-1.4 3.86-1.53 6.79h9.5c-.05-2.82-.55-5.26-1.37-6.72-.8-1.45-1.92-2.18-3.33-2.18Zm36.2 8.9v23h9V29.2c0-4.64-.88-8.17-2.63-10.58C201.14 16.2 198.52 15 195 15c-2.08 0-3.9.51-5.44 1.53-1.55 1-2.74 2.68-3.57 4.47h-.5l-1.25-5H177v38h9.5V35.75c0-4.71.17-7.92 1.1-9.9.92-1.99 2.37-2.98 4.36-2.98 1.5 0 2.59.71 3.25 2.15A13.12 13.12 0 0 1 196.5 31Z"/>
+    <path d="M61.74 26.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 28.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+    <path d="M3.92 17A24.43 24.43 0 0 0 .05 31.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 36.8 25 36 21.79 35.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  </g>
+  <g class="b">
+    <path d="M48.08 41a24.43 24.43 0 0 0 3.87-14.9c-.86-13.73-13.3-24.14-25.03-23.02-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 21.2 27 22 30.21 22.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M362.5 31v23h9V29c0-4.6-.9-8.09-2.7-10.45-1.8-2.38-4.52-3.55-8.05-3.55-3.83 0-6.9 2.24-8.75 6h-.5c.14-1.94.26-3.05.35-3.86.1-.84.15-1.36.15-2.14V.5h-9V54h9.5V35.5c0-4.15.14-7.22 1-9.42.85-2.22 2.34-3.33 4.46-3.33 2.84 0 4.54 2.63 4.54 8.25ZM231.85 51.23c2.43-2.52 3.65-6.14 3.65-10.86 0-2.96-.67-5.59-2-7.9-1.3-2.3-3.63-4.56-6.98-6.77-2.48-1.62-4.22-3.06-5.23-4.33a7.08 7.08 0 0 1-1.47-4.46c0-1.73.41-3.1 1.23-4.08a4.39 4.39 0 0 1 3.58-1.53c1.4 0 2.7.26 3.93.76 1.23.51 2.41 1.09 3.54 1.73l3.15-7.54A21.76 21.76 0 0 0 223.93 3c-4.12 0-7.4 1.27-9.86 3.8-2.43 2.54-3.65 5.98-3.65 10.32 0 2.26.3 4.24.91 5.95.63 1.7 1.51 3.25 2.63 4.63a24.91 24.91 0 0 0 5.02 4.3c2.53 1.7 4.34 3.26 5.44 4.66a7.22 7.22 0 0 1 1.65 4.6c0 1.71-.47 3.06-1.4 4.05-.92 1-2.29 1.49-4.11 1.49-3.2 0-6.72-1.23-10.56-3.7v9.3c3.13 1.74 6.93 2.6 11.4 2.6 4.56 0 8.04-1.26 10.45-3.77Zm9.82-1.36c2.81 3.42 6.64 5.13 11.48 5.13 4.15 0 7.71-.89 10.68-2.67v-7.58c-3.15 1.87-6.24 2.8-9.25 2.8a6.77 6.77 0 0 1-5.57-2.49c-1.34-1.68-1.94-4.12-2.01-7.56h18.5v-5.05c0-5.51-1.22-9.8-3.65-12.84-2.44-3.07-5.76-4.61-9.99-4.61-4.52 0-8.04 1.79-10.57 5.37-2.53 3.58-3.79 8.55-3.79 14.92 0 6.28 1.4 11.14 4.17 14.58Zm6.86-25.66c.85-1.4 1.94-2.11 3.27-2.11 1.41 0 2.52.73 3.33 2.18.82 1.46 1.32 3.9 1.37 6.72H247c.14-2.93.67-5.4 1.53-6.79ZM288 54l-1.5-5h-.5c-1.38 2.26-2.7 3.87-4.18 4.72a10.99 10.99 0 0 1-5.57 1.28 8.17 8.17 0 0 1-6.8-3.18c-1.63-2.12-2.45-5.07-2.45-8.85 0-4.06 1.12-7.07 3.36-9.02 2.27-1.99 5.65-3.08 10.13-3.29l5.19-.2v-2.77c0-3.6-1.58-5.4-4.73-5.4-2.34 0-5.03.9-8.06 2.7l-3.23-6.36A23.23 23.23 0 0 1 282.25 15c4.13 0 7.34 1.18 9.5 3.53 2.16 2.32 3.25 5.63 3.25 9.92V54h-7Zm-7.93-6.2c1.7 0 3.06-.74 4.07-2.24 1.02-1.52 1.54-3.54 1.54-6.05v-3.25l-2.88.14c-2.12.12-3.69.71-4.7 1.8-.97 1.08-1.46 2.7-1.46 4.84 0 3.18 1.14 4.77 3.43 4.77ZM318 15.76a14.31 14.31 0 0 0-3.78-.75 6.1 6.1 0 0 0-4.13 1.55A10.4 10.4 0 0 0 307 21h-.5l-1.5-5h-7v38h9.46V34c0-3.36.22-5.52 1.4-7.27a5.76 5.76 0 0 1 5.09-2.66c1.02 0 1.91.2 2.55.43l1.5-8.75ZM332 55c-4.56 0-8.05-1.52-10.43-4.87-2.38-3.35-3.57-8.27-3.57-14.75 0-6.8 1.12-11.86 3.37-15.2 2.26-3.35 5.65-5.18 10.37-5.18 1.41 0 3.01.36 4.57.78 1.56.41 3.45.94 4.69 1.72l-3.11 7.24c-1.9-1.13-3.58-1.7-5.05-1.7-1.95 0-3.35 1.04-4.23 3.09-.84 2.03-1.27 5.1-1.27 9.18 0 4 .43 6.98 1.27 8.97.85 1.96 2.24 2.94 4.16 2.94 2.3 0 4.68-.8 7.18-2.42v8.1c-2.4 1.5-5.04 2.1-7.95 2.1Z"/>
+  </g>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_on_light.svg
new file mode 100644
index 000000000000..f716c67e58f9
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_on_light.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 372 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}</style>
+  <g class="a">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M107.78 48.26c3.15-4.49 4.72-10.92 4.72-19.28 0-8.36-1.56-14.77-4.69-19.24C104.7 5.24 100.2 3 94.34 3 88.4 3 83.87 5.23 80.72 9.7 77.57 14.15 76 20.55 76 28.91c0 8.43 1.57 14.9 4.72 19.39 3.15 4.47 7.67 6.7 13.55 6.7 5.86 0 10.36-2.25 13.5-6.74Zm-19.94-6.11c-1.46-3.02-2.19-7.4-2.19-13.17 0-5.78.73-10.17 2.2-13.16 1.45-3.02 3.62-4.53 6.49-4.53 5.65 0 8.47 5.9 8.47 17.7 0 11.79-2.85 17.68-8.54 17.68-2.83 0-4.97-1.5-6.43-4.52ZM128.2 54c1.28.74 2.66 1 4.31 1 3.53 0 6.4-1.67 8.44-5.24C142.98 46.2 144 41.28 144 35c0-6.36-.99-11.28-2.96-14.76-1.97-3.5-4.7-5.24-8.18-5.24-3.62 0-6.46 2.16-8.36 6h-.5l-1.5-5h-7v55.5h9V55c0-.65-.13-2.85-.5-6h.5a10.06 10.06 0 0 0 3.69 5Zm-2.3-28.62c.8-1.69 2.09-2.53 3.88-2.53 1.67 0 2.9 1 3.68 2.98.8 2 1.2 5 1.2 9.03 0 8.2-1.6 12.3-4.81 12.3-1.86 0-3.19-.98-4-2.92-.8-1.95-1.2-5.05-1.2-9.3v-1.22c.05-3.9.46-6.67 1.24-8.34ZM161.64 55c-4.84 0-8.67-1.7-11.48-5.13-2.78-3.44-4.17-8.3-4.17-14.58 0-6.37 1.26-11.34 3.8-14.92 2.52-3.58 6.04-5.37 10.56-5.37 4.23 0 7.55 1.54 9.99 4.6 2.43 3.05 3.65 7.34 3.65 12.85v5.05h-18.5c.07 3.44.67 5.88 2.01 7.56a6.77 6.77 0 0 0 5.57 2.5c3.01 0 6.1-.94 9.25-2.81v7.58c-2.97 1.78-6.53 2.67-10.68 2.67Zm-1.35-32.9c-1.33 0-2.42.7-3.27 2.11-.86 1.39-1.4 3.86-1.53 6.79h9.5c-.05-2.82-.55-5.26-1.37-6.72-.8-1.45-1.92-2.18-3.33-2.18Zm36.2 8.9v23h9V29.2c0-4.64-.88-8.17-2.63-10.58C201.14 16.2 198.52 15 195 15c-2.08 0-3.9.51-5.44 1.53-1.55 1-2.74 2.68-3.57 4.47h-.5l-1.25-5H177v38h9.5V35.75c0-4.71.17-7.92 1.1-9.9.92-1.99 2.37-2.98 4.36-2.98 1.5 0 2.59.71 3.25 2.15A13.12 13.12 0 0 1 196.5 31Z"/>
+    <path d="M61.74 26.5a2.26 2.26 0 0 0-2.27 2.26 33.71 33.71 0 0 1-33.7 33.71 2.26 2.26 0 1 0 0 4.53A38.24 38.24 0 0 0 64 28.76a2.26 2.26 0 0 0-2.26-2.26Z"/>
+    <path d="M3.92 17A24.43 24.43 0 0 0 .05 31.9c.86 13.73 13.3 24.14 25.03 23.02 4.6-.45 9.31-4.2 8.9-10.9-.19-2.92-1.62-4.64-3.93-5.96C27.84 36.8 25 36 21.79 35.1c-3.89-1.1-8.4-2.32-11.85-4.87-4.15-3.06-6.99-6.6-6.02-13.23Z"/>
+  </g>
+  <g class="b">
+    <path d="M48.08 41a24.43 24.43 0 0 0 3.87-14.9c-.86-13.73-13.3-24.14-25.03-23.02-4.6.45-9.31 4.2-8.9 10.9.19 2.92 1.62 4.64 3.93 5.96C24.16 21.2 27 22 30.21 22.9c3.89 1.1 8.4 2.32 11.85 4.87 4.15 3.06 6.99 6.6 6.02 13.23Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M362.5 31v23h9V29c0-4.6-.9-8.09-2.7-10.45-1.8-2.38-4.52-3.55-8.05-3.55-3.83 0-6.9 2.24-8.75 6h-.5c.14-1.94.26-3.05.35-3.86.1-.84.15-1.36.15-2.14V.5h-9V54h9.5V35.5c0-4.15.14-7.22 1-9.42.85-2.22 2.34-3.33 4.46-3.33 2.84 0 4.54 2.63 4.54 8.25ZM231.85 51.23c2.43-2.52 3.65-6.14 3.65-10.86 0-2.96-.67-5.59-2-7.9-1.3-2.3-3.63-4.56-6.98-6.77-2.48-1.62-4.22-3.06-5.23-4.33a7.08 7.08 0 0 1-1.47-4.46c0-1.73.41-3.1 1.23-4.08a4.39 4.39 0 0 1 3.58-1.53c1.4 0 2.7.26 3.93.76 1.23.51 2.41 1.09 3.54 1.73l3.15-7.54A21.76 21.76 0 0 0 223.93 3c-4.12 0-7.4 1.27-9.86 3.8-2.43 2.54-3.65 5.98-3.65 10.32 0 2.26.3 4.24.91 5.95.63 1.7 1.51 3.25 2.63 4.63a24.91 24.91 0 0 0 5.02 4.3c2.53 1.7 4.34 3.26 5.44 4.66a7.22 7.22 0 0 1 1.65 4.6c0 1.71-.47 3.06-1.4 4.05-.92 1-2.29 1.49-4.11 1.49-3.2 0-6.72-1.23-10.56-3.7v9.3c3.13 1.74 6.93 2.6 11.4 2.6 4.56 0 8.04-1.26 10.45-3.77Zm9.82-1.36c2.81 3.42 6.64 5.13 11.48 5.13 4.15 0 7.71-.89 10.68-2.67v-7.58c-3.15 1.87-6.24 2.8-9.25 2.8a6.77 6.77 0 0 1-5.57-2.49c-1.34-1.68-1.94-4.12-2.01-7.56h18.5v-5.05c0-5.51-1.22-9.8-3.65-12.84-2.44-3.07-5.76-4.61-9.99-4.61-4.52 0-8.04 1.79-10.57 5.37-2.53 3.58-3.79 8.55-3.79 14.92 0 6.28 1.4 11.14 4.17 14.58Zm6.86-25.66c.85-1.4 1.94-2.11 3.27-2.11 1.41 0 2.52.73 3.33 2.18.82 1.46 1.32 3.9 1.37 6.72H247c.14-2.93.67-5.4 1.53-6.79ZM288 54l-1.5-5h-.5c-1.38 2.26-2.7 3.87-4.18 4.72a10.99 10.99 0 0 1-5.57 1.28 8.17 8.17 0 0 1-6.8-3.18c-1.63-2.12-2.45-5.07-2.45-8.85 0-4.06 1.12-7.07 3.36-9.02 2.27-1.99 5.65-3.08 10.13-3.29l5.19-.2v-2.77c0-3.6-1.58-5.4-4.73-5.4-2.34 0-5.03.9-8.06 2.7l-3.23-6.36A23.23 23.23 0 0 1 282.25 15c4.13 0 7.34 1.18 9.5 3.53 2.16 2.32 3.25 5.63 3.25 9.92V54h-7Zm-7.93-6.2c1.7 0 3.06-.74 4.07-2.24 1.02-1.52 1.54-3.54 1.54-6.05v-3.25l-2.88.14c-2.12.12-3.69.71-4.7 1.8-.97 1.08-1.46 2.7-1.46 4.84 0 3.18 1.14 4.77 3.43 4.77ZM318 15.76a14.31 14.31 0 0 0-3.78-.75 6.1 6.1 0 0 0-4.13 1.55A10.4 10.4 0 0 0 307 21h-.5l-1.5-5h-7v38h9.46V34c0-3.36.22-5.52 1.4-7.27a5.76 5.76 0 0 1 5.09-2.66c1.02 0 1.91.2 2.55.43l1.5-8.75ZM332 55c-4.56 0-8.05-1.52-10.43-4.87-2.38-3.35-3.57-8.27-3.57-14.75 0-6.8 1.12-11.86 3.37-15.2 2.26-3.35 5.65-5.18 10.37-5.18 1.41 0 3.01.36 4.57.78 1.56.41 3.45.94 4.69 1.72l-3.11 7.24c-1.9-1.13-3.58-1.7-5.05-1.7-1.95 0-3.35 1.04-4.23 3.09-.84 2.03-1.27 5.1-1.27 9.18 0 4 .43 6.98 1.27 8.97.85 1.96 2.24 2.94 4.16 2.94 2.3 0 4.68-.8 7.18-2.42v8.1c-2.4 1.5-5.04 2.1-7.95 2.1Z"/>
+  </g>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_spinner.svg b/src/core/server/core_app/assets/logos/opensearch_spinner.svg
new file mode 100644
index 000000000000..98c6f2af6189
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_spinner.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}@media(prefers-color-scheme:dark){.a{fill:#00A3E0}.b{fill:#B9D9EB}}</style>
+  <g>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <animateTransform attributeName="transform" dur="1.5s" from="0 40 40" keyTimes="0; .3; .7; 1" repeatCount="indefinite" to="359.9 40 40" type="rotate" values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"/>
+  </g>
+  <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+  <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_spinner_on_dark.svg b/src/core/server/core_app/assets/logos/opensearch_spinner_on_dark.svg
new file mode 100644
index 000000000000..8d2b16595121
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_spinner_on_dark.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+  <style>.a{fill:#00A3E0}.b{fill:#B9D9EB}</style>
+  <g>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <animateTransform attributeName="transform" dur="1.5s" from="0 40 40" keyTimes="0; .3; .7; 1" repeatCount="indefinite" to="359.9 40 40" type="rotate" values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"/>
+  </g>
+  <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+  <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+</svg>
diff --git a/src/core/server/core_app/assets/logos/opensearch_spinner_on_light.svg b/src/core/server/core_app/assets/logos/opensearch_spinner_on_light.svg
new file mode 100644
index 000000000000..41ab3c960b94
--- /dev/null
+++ b/src/core/server/core_app/assets/logos/opensearch_spinner_on_light.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 90 90">
+  <style>.a{fill:#005EB8}.b{fill:#003B5C}</style>
+  <g>
+    <path class="a" d="M75.737 37.5a2.263 2.263 0 0 0-2.262 2.263c0 18.618-15.094 33.712-33.712 33.712a2.263 2.263 0 1 0 0 4.525C60.88 78 78 60.88 78 39.763a2.263 2.263 0 0 0-2.263-2.263Z"/>
+    <animateTransform attributeName="transform" dur="1.5s" from="0 40 40" keyTimes="0; .3; .7; 1" repeatCount="indefinite" to="359.9 40 40" type="rotate" values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"/>
+  </g>
+  <path class="b" d="M62.081 52c2.176-3.55 4.28-8.282 3.867-14.908-.858-13.725-13.29-24.137-25.027-23.008-4.596.441-9.314 4.187-8.895 10.896.182 2.916 1.61 4.637 3.928 5.96 2.208 1.26 5.044 2.057 8.259 2.961 3.883 1.092 8.388 2.32 11.85 4.87 4.15 3.059 6.986 6.603 6.018 13.229Z"/>
+  <path class="a" d="M17.919 28c-2.176 3.55-4.28 8.282-3.867 14.908.858 13.725 13.29 24.137 25.027 23.008 4.596-.441 9.314-4.187 8.895-10.896-.182-2.916-1.61-4.637-3.928-5.96-2.208-1.26-5.044-2.057-8.259-2.961-3.883-1.092-8.388-2.32-11.85-4.87-4.15-3.059-6.986-6.603-6.018-13.229Z"/>
+</svg>
diff --git a/src/core/server/rendering/rendering_service.tsx b/src/core/server/rendering/rendering_service.tsx
index c7c03c1eb72c..d0a62555d4b2 100644
--- a/src/core/server/rendering/rendering_service.tsx
+++ b/src/core/server/rendering/rendering_service.tsx
@@ -198,7 +198,7 @@ export class RenderingService {
 
   /**
    * Assign values for branding related configurations based on branding validation
-   * by calling checkBrandingValid(). For dark mode URLs, add additonal validation
+   * by calling checkBrandingValid(). For dark mode URLs, add additional validation
    * to see if there is a valid default mode URL exist first. If URL is valid, pass in
    * the actual URL; if not, pass in undefined.
    *
diff --git a/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap b/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
index 87a00f601a44..36d073992ec8 100644
--- a/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
+++ b/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
@@ -13,7 +13,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -36,7 +38,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -80,9 +82,12 @@ Array [
         class="loadingLogoContainer"
       >
         <img
-          alt="undefined logo"
+          alt="OpenSearch Dashboards logo"
           class="loadingLogo"
-          src="/darkModeLoadingLogo"
+          data-test-image-url="/defaultModeLoadingLogo"
+          data-test-subj="customLogo"
+          loading="eager"
+          src="/defaultModeLoadingLogo"
         />
       </div>
       <div
@@ -96,26 +101,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -151,7 +143,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -174,7 +168,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -218,8 +212,11 @@ Array [
         class="loadingLogoContainer"
       >
         <img
-          alt="undefined logo"
+          alt="OpenSearch Dashboards logo"
           class="loadingLogo"
+          data-test-image-url="/defaultModeLoadingLogo"
+          data-test-subj="customLogo"
+          loading="eager"
           src="/defaultModeLoadingLogo"
         />
       </div>
@@ -234,26 +231,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -289,7 +273,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -312,7 +298,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -356,9 +342,12 @@ Array [
         class="loadingLogoContainer"
       >
         <img
-          alt="undefined logo"
+          alt="OpenSearch Dashboards logo"
           class="loadingLogo"
-          src="/darkModeMark"
+          data-test-image-url="/defaultModeMark"
+          data-test-subj="alternativeLogo"
+          loading="eager"
+          src="/defaultModeMark"
         />
       </div>
       <div
@@ -375,26 +364,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -430,7 +406,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -453,7 +431,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -497,8 +475,11 @@ Array [
         class="loadingLogoContainer"
       >
         <img
-          alt="undefined logo"
+          alt="OpenSearch Dashboards logo"
           class="loadingLogo"
+          data-test-image-url="/defaultModeMark"
+          data-test-subj="alternativeLogo"
+          loading="eager"
           src="/defaultModeMark"
         />
       </div>
@@ -516,26 +497,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -571,7 +539,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -594,7 +564,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -634,36 +604,18 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 90 90"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="loadingLogoContainer"
       >
-        <g>
-          <path
-            d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-            fill="#005EB8"
-          />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            from="0 40 40"
-            keyTimes="0; .3; .7; 1"
-            repeatCount="indefinite"
-            to="359.9 40 40"
-            type="rotate"
-            values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          />
-        </g>
-        <path
-          d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-          fill="#003B5C"
-        />
-        <path
-          d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-          fill="#005EB8"
+        <img
+          alt="OpenSearch Dashboards logo"
+          class="loadingLogo"
+          data-test-image-url="/ui/logos/opensearch_spinner_on_light.svg"
+          data-test-subj="defaultLogo"
+          loading="eager"
+          src="/ui/logos/opensearch_spinner_on_light.svg"
         />
-      </svg>
+      </div>
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -675,26 +627,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+      data-test-subj="default logo"
+      src="/ui/logos/opensearch_mark_on_light.svg"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -755,7 +694,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -801,6 +740,9 @@ Array [
         <img
           alt="custom title logo"
           class="loadingLogo"
+          data-test-image-url="defaultModeLoadingLogo/"
+          data-test-subj="customLogo"
+          loading="eager"
           src="defaultModeLoadingLogo/"
         />
       </div>
@@ -815,26 +757,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="custom title logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -895,7 +824,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -941,6 +870,9 @@ Array [
         <img
           alt="custom title logo"
           class="loadingLogo"
+          data-test-image-url="/defaultModeMark"
+          data-test-subj="alternativeLogo"
+          loading="eager"
           src="/defaultModeMark"
         />
       </div>
@@ -958,26 +890,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="custom title logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/defaultModeMark"
+      data-test-subj="custom logo"
+      src="/defaultModeMark"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -1038,7 +957,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -1078,36 +997,18 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 90 90"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="loadingLogoContainer"
       >
-        <g>
-          <path
-            d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-            fill="#005EB8"
-          />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            from="0 40 40"
-            keyTimes="0; .3; .7; 1"
-            repeatCount="indefinite"
-            to="359.9 40 40"
-            type="rotate"
-            values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          />
-        </g>
-        <path
-          d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-          fill="#003B5C"
-        />
-        <path
-          d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-          fill="#005EB8"
+        <img
+          alt="custom title logo"
+          class="loadingLogo"
+          data-test-image-url="/ui/logos/opensearch_spinner_on_light.svg"
+          data-test-subj="defaultLogo"
+          loading="eager"
+          src="/ui/logos/opensearch_spinner_on_light.svg"
         />
-      </svg>
+      </div>
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1119,26 +1020,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="custom title logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+      data-test-subj="default logo"
+      src="/ui/logos/opensearch_mark_on_light.svg"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -1174,7 +1062,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="/customFavicon"
     rel="apple-touch-icon"
@@ -1197,7 +1087,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="/customFavicon"
     rel="mask-icon"
   />,
@@ -1237,36 +1127,18 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 90 90"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="loadingLogoContainer"
       >
-        <g>
-          <path
-            d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-            fill="#005EB8"
-          />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            from="0 40 40"
-            keyTimes="0; .3; .7; 1"
-            repeatCount="indefinite"
-            to="359.9 40 40"
-            type="rotate"
-            values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          />
-        </g>
-        <path
-          d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-          fill="#003B5C"
-        />
-        <path
-          d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-          fill="#005EB8"
+        <img
+          alt="OpenSearch Dashboards logo"
+          class="loadingLogo"
+          data-test-image-url="/ui/logos/opensearch_spinner_on_light.svg"
+          data-test-subj="defaultLogo"
+          loading="eager"
+          src="/ui/logos/opensearch_spinner_on_light.svg"
         />
-      </svg>
+      </div>
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1278,26 +1150,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+      data-test-subj="default logo"
+      src="/ui/logos/opensearch_mark_on_light.svg"
+    />
     <h2
       class="osdWelcomeTitle"
     />
@@ -1333,7 +1192,9 @@ Array [
     content="width=device-width"
     name="viewport"
   />,
-  <title />,
+  <title>
+    OpenSearch Dashboards
+  </title>,
   <link
     href="[object Object]/ui/favicons/apple-touch-icon.png"
     rel="apple-touch-icon"
@@ -1356,7 +1217,7 @@ Array [
     rel="manifest"
   />,
   <link
-    color="#e8488b"
+    color="#003553"
     href="[object Object]/ui/favicons/safari-pinned-tab.svg"
     rel="mask-icon"
   />,
@@ -1396,36 +1257,18 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 90 90"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="loadingLogoContainer"
       >
-        <g>
-          <path
-            d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-            fill="#005EB8"
-          />
-          <animateTransform
-            attributeName="transform"
-            dur="1.5s"
-            from="0 40 40"
-            keyTimes="0; .3; .7; 1"
-            repeatCount="indefinite"
-            to="359.9 40 40"
-            type="rotate"
-            values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          />
-        </g>
-        <path
-          d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-          fill="#003B5C"
-        />
-        <path
-          d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-          fill="#005EB8"
+        <img
+          alt="OpenSearch Dashboards logo"
+          class="loadingLogo"
+          data-test-image-url="/ui/logos/opensearch_spinner_on_light.svg"
+          data-test-subj="defaultLogo"
+          loading="eager"
+          src="/ui/logos/opensearch_spinner_on_light.svg"
         />
-      </svg>
+      </div>
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1437,26 +1280,13 @@ Array [
     id="osd_legacy_browser_error"
     style="display:none"
   >
-    <svg
-      fill="none"
-      height="64"
-      viewBox="0 0 64 64"
-      width="64"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
+    <img
+      alt="OpenSearch Dashboards logo"
+      class="legacyBrowserErrorLogo"
+      data-test-image-url="/ui/logos/opensearch_mark_on_light.svg"
+      data-test-subj="default logo"
+      src="/ui/logos/opensearch_mark_on_light.svg"
+    />
     <h2
       class="osdWelcomeTitle"
     />
diff --git a/src/core/server/rendering/views/styles.tsx b/src/core/server/rendering/views/styles.tsx
index 29047067efe9..6b63924dad5d 100644
--- a/src/core/server/rendering/views/styles.tsx
+++ b/src/core/server/rendering/views/styles.tsx
@@ -92,6 +92,10 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
                     justify-content: center;
           }
 
+          .legacyBrowserErrorLogo {
+            height: 64px;
+          }
+
           .osdWelcomeTitle {
             color: #000;
             font-size: 20px;
@@ -161,8 +165,8 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
           }
 
           .loadingLogoContainer {
-            height: 60px;
-            padding: 10px 10px 10px 10px;
+            height: 80px;
+            padding: 8px;
           }
 
           .loadingLogo {
diff --git a/src/core/server/rendering/views/template.tsx b/src/core/server/rendering/views/template.tsx
index 2306b7d82564..4185b9365512 100644
--- a/src/core/server/rendering/views/template.tsx
+++ b/src/core/server/rendering/views/template.tsx
@@ -33,6 +33,7 @@ import React, { FunctionComponent, createElement } from 'react';
 import { RenderingMetadata } from '../types';
 import { Fonts } from './fonts';
 import { Styles } from './styles';
+import { getLogos, ImageType } from '../../../common';
 
 interface Props {
   metadata: RenderingMetadata;
@@ -50,123 +51,10 @@ export const Template: FunctionComponent<Props> = ({
     strictCsp,
   },
 }) => {
-  const openSearchLogo = (
-    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z"
-        fill="#005EB8"
-      />
-      <path
-        d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z"
-        fill="#005EB8"
-      />
-    </svg>
-  );
-  const openSearchLogoSpinner = (
-    <svg viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g>
-        <path
-          d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-          fill="#005EB8"
-        />
-        <animateTransform
-          attributeName="transform"
-          type="rotate"
-          from="0 40 40"
-          to="359.9 40 40"
-          dur="1.5s"
-          repeatCount="indefinite"
-          values="0 40 40; 15 40 40; 340 40 40; 359.9 40 40"
-          keyTimes="0; .3; .7; 1"
-        />
-      </g>
-      <path
-        d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-        fill="#003B5C"
-      />
-      <path
-        d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-        fill="#005EB8"
-      />
-    </svg>
-  );
+  const logos = getLogos(injectedMetadata.branding, injectedMetadata.serverBasePath);
 
-  const loadingLogoDefault = injectedMetadata.branding.loadingLogo?.defaultUrl;
-  const loadingLogoDarkMode = injectedMetadata.branding.loadingLogo?.darkModeUrl;
-  const markDefault = injectedMetadata.branding.mark?.defaultUrl;
-  const markDarkMode = injectedMetadata.branding.mark?.darkModeUrl;
   const favicon = injectedMetadata.branding.faviconUrl;
-  const applicationTitle = injectedMetadata.branding.applicationTitle;
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * loading logo in default mode. In default mode, loading logo will
-   * proritize default loading logo URL, and then default mark URL.
-   * If both are invalid, default opensearch logo and spinner will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  const customLoadingLogoDefaultMode = () => {
-    return loadingLogoDefault ?? markDefault ?? undefined;
-  };
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * loading logo in default mode. In dark mode, loading logo will proritize
-   * loading logo URLs, then mark logo URLs.
-   * Within each type, the dark mode URL will be proritized if provided.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  const customLoadingLogoDarkMode = () => {
-    return loadingLogoDarkMode ?? loadingLogoDefault ?? markDarkMode ?? markDefault ?? undefined;
-  };
-
-  /**
-   * Render custom loading logo for both default mode and dark mode
-   *
-   * @returns a valid custom loading logo URL, or undefined
-   */
-  const customLoadingLogo = () => {
-    return darkMode ? customLoadingLogoDarkMode() : customLoadingLogoDefaultMode();
-  };
-
-  /**
-   * Check if a horizontal loading is needed to be rendered.
-   * Loading bar will be rendered only when a default mode mark URL or
-   * dark mode mark URL is rendered as the loading logo. We add the
-   * horizontal loading bar on the bottom of the static mark logo to have
-   * some loading effect for the loading page.
-   *
-   * @returns a loading bar component or no loading bar component
-   */
-  const renderBrandingEnabledOrDisabledLoadingBar = () => {
-    if (customLoadingLogo() && !loadingLogoDefault) {
-      return <div className="osdProgress" />;
-    }
-  };
-
-  /**
-   * Check if we render a custom loading logo or the default opensearch spinner.
-   * If customLoadingLogo() returns undefined(no valid custom URL is found), we
-   * render the default opensearch logo spinenr
-   *
-   * @returns a image component with custom logo URL, or the default opensearch logo spinner
-   */
-  const renderBrandingEnabledOrDisabledLoadingLogo = () => {
-    if (customLoadingLogo()) {
-      return (
-        <div className="loadingLogoContainer">
-          <img className="loadingLogo" src={customLoadingLogo()} alt={applicationTitle + ' logo'} />
-        </div>
-      );
-    }
-    return openSearchLogoSpinner;
-  };
+  const applicationTitle = injectedMetadata.branding.applicationTitle || 'OpenSearch Dashboards';
 
   return (
     <html lang={locale}>
@@ -176,19 +64,22 @@ export const Template: FunctionComponent<Props> = ({
         <meta name="viewport" content="width=device-width" />
         <title>{applicationTitle}</title>
         {/**
+         * ToDo: Custom branded favicons will not work correctly across all browsers with
+         * these `link` elements and single type. Try to guess the image and use only one.
+         *
          * Favicons (generated from https://realfavicongenerator.net/)
          *
          * For user customized favicon using yml file:
-         * If user inputs a valid URL, we gurantee basic favicon customization, such as
+         * If user inputs a valid URL, we guarantee basic favicon customization, such as
          * browser favicon(Chrome, Firefox, Safari, and Edge), apple touch icon, safari
          * pinned icon. (For Safari browser favicon, we recommend input a png image URL,
          * svg image URL might not work)
          *
          * we do not guarantee other advanced favicon customization such as
-         * windows tile icon, Andriod device favicon etc. However, the opensearch favicon
+         * windows tile icon, Android device favicon etc. However, the opensearch favicon
          * will not be shown at those places and the default browser/device icon will be shown instead.
          *
-         * If user inputs a invalid URL, original opensearch favicon will be used.
+         * If user inputs an invalid URL, original Opensearch Dashboards favicon will be used.
          */}
 
         <link
@@ -211,9 +102,10 @@ export const Template: FunctionComponent<Props> = ({
 
         <link rel="manifest" href={favicon ? `` : `${uiPublicUrl}/favicons/manifest.json`} />
 
+        {/* Ignoring all of the above, Safari picks this one */}
         <link
           rel="mask-icon"
-          color="#e8488b"
+          color="#003553"
           href={favicon ?? `${uiPublicUrl}/favicons/safari-pinned-tab.svg`}
         />
         <link rel="shortcut icon" href={favicon ?? `${uiPublicUrl}/favicons/favicon.ico`} />
@@ -245,23 +137,39 @@ export const Template: FunctionComponent<Props> = ({
           data-test-subj="osdLoadingMessage"
         >
           <div className="osdLoaderWrap" data-test-subj="loadingLogo">
-            {renderBrandingEnabledOrDisabledLoadingLogo()}
+            <div className="loadingLogoContainer">
+              <img
+                className="loadingLogo"
+                src={logos.AnimatedMark.url}
+                alt={`${applicationTitle} logo`}
+                data-test-subj={`${logos.AnimatedMark.type}Logo`}
+                data-test-image-url={logos.AnimatedMark.url}
+                loading="eager"
+              />
+            </div>
             <div
               className="osdWelcomeText"
               data-error-message={i18n('core.ui.welcomeErrorMessage', {
-                defaultMessage: `${injectedMetadata.branding.applicationTitle} did not load properly. Check the server output for more information.`,
+                defaultMessage: `${applicationTitle} did not load properly. Check the server output for more information.`,
               })}
             >
               {i18n('core.ui.welcomeMessage', {
-                defaultMessage: `Loading ${injectedMetadata.branding.applicationTitle}`,
+                defaultMessage: `Loading ${applicationTitle}`,
               })}
             </div>
-            {renderBrandingEnabledOrDisabledLoadingBar()}
+            {/* Show a progress bar if a static custom branded logo is used */}
+            {logos.AnimatedMark.type === ImageType.ALTERNATIVE && <div className="osdProgress" />}
           </div>
         </div>
 
         <div className="osdWelcomeView" id="osd_legacy_browser_error" style={{ display: 'none' }}>
-          {openSearchLogo}
+          <img
+            data-test-subj={logos.Mark.type + ' logo'}
+            data-test-image-url={logos.Mark.url}
+            src={logos.Mark.url}
+            alt={`${applicationTitle} logo`}
+            className="legacyBrowserErrorLogo"
+          />
 
           <h2 className="osdWelcomeTitle">
             {i18n('core.ui.legacyBrowserTitle', {
diff --git a/src/core/tsconfig.json b/src/core/tsconfig.json
index a3531057767d..3281d2f19cfe 100644
--- a/src/core/tsconfig.json
+++ b/src/core/tsconfig.json
@@ -9,6 +9,7 @@
   },
   "include": [
     "public/**/*",
+    "common/**/*",
     "server/**/*",
     "types/**/*",
     "test_helpers/**/*",
diff --git a/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx b/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx
index c13688c73515..fc15cbec4f1d 100644
--- a/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/add_to_library_action.test.tsx
@@ -68,6 +68,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
diff --git a/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
index bf2fb17e7df3..abad192ad9e8 100644
--- a/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/clone_panel_action.test.tsx
@@ -67,6 +67,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
diff --git a/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx
index 5298dca2b97d..0fc095b151d0 100644
--- a/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/expand_panel_action.test.tsx
@@ -58,6 +58,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: {} as any,
diff --git a/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx b/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx
index e9bb6c0c3ce2..03be6520b8e5 100644
--- a/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/library_notification_action.test.tsx
@@ -67,6 +67,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
diff --git a/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx b/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx
index 42e2f99f8a5e..7845bebc8855 100644
--- a/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/replace_panel_action.test.tsx
@@ -61,6 +61,7 @@ beforeEach(async () => {
     application: {} as any,
     embeddable: start,
     inspector: {} as any,
+    chrome: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
     savedObjectMetaData: {} as any,
diff --git a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx
index 8f2511f8c3f5..ec90c4d813d8 100644
--- a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx
+++ b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.test.tsx
@@ -68,6 +68,7 @@ beforeEach(async () => {
     SavedObjectFinder: () => null,
     application: {} as any,
     embeddable: start,
+    chrome: {} as any,
     inspector: {} as any,
     notifications: {} as any,
     overlays: coreStart.overlays,
diff --git a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
index d433fdd10b52..1b3c486615c8 100644
--- a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
@@ -141,13 +141,75 @@ exports[`dashboard listing hideWriteControls 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -174,7 +236,6 @@ exports[`dashboard listing hideWriteControls 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
@@ -1172,13 +1233,75 @@ exports[`dashboard listing render table listing with initial filters from URL 1`
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -1205,7 +1328,6 @@ exports[`dashboard listing render table listing with initial filters from URL 1`
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
@@ -2264,13 +2386,75 @@ exports[`dashboard listing renders call to action when no dashboards exist 1`] =
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -2297,7 +2481,6 @@ exports[`dashboard listing renders call to action when no dashboards exist 1`] =
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
@@ -3356,13 +3539,75 @@ exports[`dashboard listing renders table rows 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -3389,7 +3634,6 @@ exports[`dashboard listing renders table rows 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
@@ -4448,13 +4692,75 @@ exports[`dashboard listing renders warning when listingLimit is exceeded 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -4481,7 +4787,6 @@ exports[`dashboard listing renders warning when listingLimit is exceeded 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction] {
                 "calls": Array [
                   Array [
diff --git a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
index 14247831d6fa..101e0e520304 100644
--- a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
@@ -129,13 +129,75 @@ exports[`Dashboard top nav render in embed mode 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -162,7 +224,6 @@ exports[`Dashboard top nav render in embed mode 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -985,13 +1046,75 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -1018,7 +1141,6 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -1841,13 +1963,75 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -1874,7 +2058,6 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -2697,13 +2880,75 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -2730,7 +2975,6 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -3553,13 +3797,75 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -3586,7 +3892,6 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
@@ -4409,13 +4714,75 @@ exports[`Dashboard top nav render with all components 1`] = `
               },
               "getApplicationClasses$": [MockFunction],
               "getBadge$": [MockFunction],
-              "getBrand$": [MockFunction],
               "getBreadcrumbs$": [MockFunction],
               "getCustomNavLink$": [MockFunction],
               "getHeaderComponent": [MockFunction],
               "getHelpExtension$": [MockFunction],
               "getIsNavDrawerLocked$": [MockFunction],
               "getIsVisible$": [MockFunction],
+              "logos": Object {
+                "AnimatedMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_spinner_on_light.svg",
+                },
+                "Application": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+                },
+                "CenterMark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+                },
+                "Mark": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_mark_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_mark_on_light.svg",
+                },
+                "OpenSearch": Object {
+                  "dark": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_dark.svg",
+                  },
+                  "light": Object {
+                    "type": "default",
+                    "url": "/ui/logos/opensearch_on_light.svg",
+                  },
+                  "type": "default",
+                  "url": "/ui/logos/opensearch_on_light.svg",
+                },
+                "colorScheme": "light",
+              },
               "navControls": Object {
                 "getCenter$": [MockFunction],
                 "getLeft$": [MockFunction],
@@ -4442,7 +4809,6 @@ exports[`Dashboard top nav render with all components 1`] = `
               "removeApplicationClass": [MockFunction],
               "setAppTitle": [MockFunction],
               "setBadge": [MockFunction],
-              "setBrand": [MockFunction],
               "setBreadcrumbs": [MockFunction],
               "setCustomNavLink": [MockFunction],
               "setHelpExtension": [MockFunction],
diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
index faed32d60d2d..0ca403e826a4 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx
@@ -58,6 +58,7 @@ import { findTestSubject } from 'test_utils/helpers';
 const options: DashboardContainerOptions = {
   application: {} as any,
   embeddable: {} as any,
+  chrome: {} as any,
   notifications: {} as any,
   overlays: {} as any,
   inspector: {} as any,
@@ -179,6 +180,7 @@ test('DashboardContainer in edit mode shows edit mode actions', async () => {
   const containerOptions: DashboardContainerOptions = {
     application: applicationServiceMock.createStartContract(),
     embeddable: start,
+    chrome: {} as any,
     notifications: {} as any,
     overlays: {} as any,
     inspector: {} as any,
diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
index db647c2760a7..dad2f196f1b8 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
@@ -34,7 +34,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nProvider } from '@osd/i18n/react';
 import { RefreshInterval, TimeRange, Query, Filter } from 'src/plugins/data/public';
-import { CoreStart } from 'src/core/public';
+import { CoreStart, Logos } from 'src/core/public';
 import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
 import uuid from 'uuid';
 import {
@@ -98,6 +98,7 @@ export interface DashboardContainerOptions {
   application: CoreStart['application'];
   overlays: CoreStart['overlays'];
   notifications: CoreStart['notifications'];
+  chrome: CoreStart['chrome'];
   embeddable: EmbeddableStart;
   inspector: InspectorStartContract;
   SavedObjectFinder: React.ComponentType<any>;
@@ -119,6 +120,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     | (({ replace, pathname }: { replace: boolean; pathname?: string }) => void);
 
   private embeddablePanel: EmbeddableStart['EmbeddablePanel'];
+  private readonly logos: Logos;
 
   constructor(
     initialInput: DashboardContainerInput,
@@ -135,6 +137,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       parent
     );
     this.embeddablePanel = options.embeddable.getEmbeddablePanel(stateTransfer);
+    this.logos = options.chrome.logos;
   }
 
   protected createNewPanelState<
@@ -237,6 +240,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
         <OpenSearchDashboardsContextProvider services={this.options}>
           <DashboardViewport
             renderEmpty={this.renderEmpty}
+            logos={this.logos}
             container={this}
             PanelComponent={this.embeddablePanel}
           />
diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
index b50f561ddab8..020f76cfa827 100644
--- a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx
@@ -47,6 +47,7 @@ interface StartServices {
   capabilities: CoreStart['application']['capabilities'];
   application: CoreStart['application'];
   overlays: CoreStart['overlays'];
+  chrome: CoreStart['chrome'];
   notifications: CoreStart['notifications'];
   embeddable: EmbeddableStart;
   inspector: InspectorStartContract;
diff --git a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx
index ce2dfec622a4..f143b18b7c48 100644
--- a/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.test.tsx
@@ -78,6 +78,7 @@ function prepare(props?: Partial<DashboardGridProps>) {
       getEmbeddableFactory,
     } as any,
     notifications: {} as any,
+    chrome: {} as any,
     overlays: {} as any,
     inspector: {
       isAvailable: jest.fn(),
diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
index f03ed95c9a37..7d286f6fbf49 100644
--- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx
@@ -73,6 +73,7 @@ function getProps(
       getEmbeddableFactories: start.getEmbeddableFactories,
       getEmbeddableFactory: start.getEmbeddableFactory,
     } as any,
+    chrome: {} as any,
     notifications: {} as any,
     overlays: {} as any,
     inspector: {
@@ -103,6 +104,7 @@ function getProps(
   dashboardContainer = new DashboardContainer(input, options);
   const defaultTestProps: DashboardViewportProps = {
     container: dashboardContainer,
+    logos: options.chrome.logos,
     PanelComponent: () => <div />,
   };
 
diff --git a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx
index f89c1179cad5..60a3dba7384b 100644
--- a/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx
+++ b/src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx
@@ -30,6 +30,7 @@
 
 import React from 'react';
 import { Subscription } from 'rxjs';
+import { Logos } from 'opensearch-dashboards/public';
 import { PanelState, EmbeddableStart } from '../../../../../embeddable/public';
 import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container';
 import { DashboardGrid } from '../grid';
@@ -39,6 +40,7 @@ export interface DashboardViewportProps {
   container: DashboardContainer;
   PanelComponent: EmbeddableStart['EmbeddablePanel'];
   renderEmpty?: () => React.ReactNode;
+  logos: Logos;
 }
 
 interface State {
@@ -124,6 +126,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
           <this.context.services.ExitFullScreenButton
             onExitFullScreenMode={this.onExitFullScreenMode}
             toggleChrome={!isEmbeddedExternally}
+            logos={this.props.logos}
           />
         )}
         {renderEmpty && renderEmpty()}
@@ -153,6 +156,7 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
           <this.context.services.ExitFullScreenButton
             onExitFullScreenMode={this.onExitFullScreenMode}
             toggleChrome={!isEmbeddedExternally}
+            logos={this.props.logos}
           />
         )}
         <DashboardGrid container={container} PanelComponent={PanelComponent} />
diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx
index f2f29d1f7a7c..956bb5a7a836 100644
--- a/src/plugins/dashboard/public/plugin.tsx
+++ b/src/plugins/dashboard/public/plugin.tsx
@@ -268,6 +268,7 @@ export class DashboardPlugin
       return {
         capabilities: coreStart.application.capabilities,
         application: coreStart.application,
+        chrome: coreStart.chrome,
         notifications: coreStart.notifications,
         overlays: coreStart.overlays,
         embeddable: deps.embeddable,
diff --git a/src/plugins/dev_tools/public/plugin.ts b/src/plugins/dev_tools/public/plugin.ts
index c23431799ead..bb0b6ee1d981 100644
--- a/src/plugins/dev_tools/public/plugin.ts
+++ b/src/plugins/dev_tools/public/plugin.ts
@@ -82,7 +82,7 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
       id: 'dev_tools',
       title: this.title,
       updater$: this.appStateUpdater,
-      icon: '/plugins/home/public/assets/logos/opensearch_mark_default.svg',
+      icon: '/ui/logos/opensearch_mark.svg',
       /* the order of dev tools, it shows as last item of management section */
       order: 9070,
       category: DEFAULT_APP_CATEGORIES.management,
diff --git a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
index 2b0de11d7f18..004d90cd5354 100644
--- a/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
+++ b/src/plugins/home/public/application/components/__snapshots__/welcome.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Welcome page  should render a Welcome screen  with no telemetry disclaimer 1`] = `
+exports[`Welcome page renders the Welcome screen with no telemetry disclaimer 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -14,26 +14,23 @@ exports[`Welcome page  should render a Welcome screen  with no telemetry disclai
         <EuiSpacer
           size="xl"
         />
-        <div
-          className="homWelcome__customLogoContainer"
+        <span
+          className="homWelcome__logo"
         >
-          <img
-            alt="OpenSearch Dashboards logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/"
-            data-test-subj="welcomeCustomLogo"
-            src="/"
+          <EuiIcon
+            size="original"
+            type="/ui/logos/opensearch_center_mark_on_light.svg"
           />
-        </div>
+        </span>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to OpenSearch Dashboards"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to OpenSearch Dashboards"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
@@ -66,7 +63,7 @@ exports[`Welcome page  should render a Welcome screen  with no telemetry disclai
 </EuiPortal>
 `;
 
-exports[`Welcome page  should render a Welcome screen  with the telemetry disclaimer when optIn is false 1`] = `
+exports[`Welcome page renders the Welcome screen with the telemetry disclaimer when optIn is false 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -80,26 +77,23 @@ exports[`Welcome page  should render a Welcome screen  with the telemetry discla
         <EuiSpacer
           size="xl"
         />
-        <div
-          className="homWelcome__customLogoContainer"
+        <span
+          className="homWelcome__logo"
         >
-          <img
-            alt="OpenSearch Dashboards logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/"
-            data-test-subj="welcomeCustomLogo"
-            src="/"
+          <EuiIcon
+            size="original"
+            type="/ui/logos/opensearch_center_mark_on_light.svg"
           />
-        </div>
+        </span>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to OpenSearch Dashboards"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to OpenSearch Dashboards"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
@@ -168,7 +162,7 @@ exports[`Welcome page  should render a Welcome screen  with the telemetry discla
 </EuiPortal>
 `;
 
-exports[`Welcome page  should render a Welcome screen  with the telemetry disclaimer when optIn is true 1`] = `
+exports[`Welcome page renders the Welcome screen with the telemetry disclaimer when optIn is true 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -182,26 +176,23 @@ exports[`Welcome page  should render a Welcome screen  with the telemetry discla
         <EuiSpacer
           size="xl"
         />
-        <div
-          className="homWelcome__customLogoContainer"
+        <span
+          className="homWelcome__logo"
         >
-          <img
-            alt="OpenSearch Dashboards logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/"
-            data-test-subj="welcomeCustomLogo"
-            src="/"
+          <EuiIcon
+            size="original"
+            type="/ui/logos/opensearch_center_mark_on_light.svg"
           />
-        </div>
+        </span>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to OpenSearch Dashboards"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to OpenSearch Dashboards"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
@@ -270,139 +261,7 @@ exports[`Welcome page  should render a Welcome screen  with the telemetry discla
 </EuiPortal>
 `;
 
-exports[`Welcome page  should render welcome logo in dark mode  using mark dark mode URL 1`] = `
-<EuiPortal>
-  <div
-    className="homWelcome"
-  >
-    <header
-      className="homWelcome__header"
-    >
-      <div
-        className="homWelcome__content eui-textCenter"
-      >
-        <EuiSpacer
-          size="xl"
-        />
-        <div
-          className="homWelcome__customLogoContainer"
-        >
-          <img
-            alt="undefined logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/darkModeMark"
-            data-test-subj="welcomeCustomLogo"
-            src="/darkModeMark"
-          />
-        </div>
-        <EuiTitle
-          className="homWelcome__title"
-          data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to undefined"
-          size="l"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to undefined"
-              id="home.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiSpacer
-          size="m"
-        />
-      </div>
-    </header>
-    <div
-      className="homWelcome__content homWelcome-body"
-    >
-      <EuiFlexGroup
-        gutterSize="l"
-      >
-        <EuiFlexItem>
-          <SampleDataCard
-            onConfirm={[Function]}
-            onDecline={[Function]}
-            urlBasePath="/"
-          />
-          <EuiSpacer
-            size="s"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  </div>
-</EuiPortal>
-`;
-
-exports[`Welcome page  should render welcome logo in dark mode  using mark default mode URL 1`] = `
-<EuiPortal>
-  <div
-    className="homWelcome"
-  >
-    <header
-      className="homWelcome__header"
-    >
-      <div
-        className="homWelcome__content eui-textCenter"
-      >
-        <EuiSpacer
-          size="xl"
-        />
-        <div
-          className="homWelcome__customLogoContainer"
-        >
-          <img
-            alt="undefined logo"
-            className="homWelcome__customLogo"
-            data-test-image-url="/defaultModeMark"
-            data-test-subj="welcomeCustomLogo"
-            src="/defaultModeMark"
-          />
-        </div>
-        <EuiTitle
-          className="homWelcome__title"
-          data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to undefined"
-          size="l"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to undefined"
-              id="home.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiSpacer
-          size="m"
-        />
-      </div>
-    </header>
-    <div
-      className="homWelcome__content homWelcome-body"
-    >
-      <EuiFlexGroup
-        gutterSize="l"
-      >
-        <EuiFlexItem>
-          <SampleDataCard
-            onConfirm={[Function]}
-            onDecline={[Function]}
-            urlBasePath="/"
-          />
-          <EuiSpacer
-            size="s"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  </div>
-</EuiPortal>
-`;
-
-exports[`Welcome page  should render welcome logo in dark mode  using the original opensearch logo 1`] = `
+exports[`Welcome page renders the welcome logo with OpenSearch center mark when not branded 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -421,18 +280,18 @@ exports[`Welcome page  should render welcome logo in dark mode  using the origin
         >
           <EuiIcon
             size="original"
-            type="test-file-stub"
+            type="/ui/logos/opensearch_center_mark_on_light.svg"
           />
         </span>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to undefined"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to undefined"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
@@ -465,7 +324,7 @@ exports[`Welcome page  should render welcome logo in dark mode  using the origin
 </EuiPortal>
 `;
 
-exports[`Welcome page  should render welcome logo in default mode  using mark default mode URL 1`] = `
+exports[`Welcome page renders the welcome logo with custom branded logo when branded 1`] = `
 <EuiPortal>
   <div
     className="homWelcome"
@@ -483,85 +342,22 @@ exports[`Welcome page  should render welcome logo in default mode  using mark de
           className="homWelcome__customLogoContainer"
         >
           <img
-            alt="custom title logo"
+            alt="Page Title logo"
             className="homWelcome__customLogo"
-            data-test-image-url="/defaultModeMark"
+            data-test-image-url="/custom/branded/mark.svg"
             data-test-subj="welcomeCustomLogo"
-            src="/defaultModeMark"
+            src="/custom/branded/mark.svg"
           />
         </div>
         <EuiTitle
           className="homWelcome__title"
           data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to custom title"
-          size="l"
-        >
-          <h1>
-            <FormattedMessage
-              defaultMessage="Welcome to custom title"
-              id="home.welcomeTitle"
-              values={Object {}}
-            />
-          </h1>
-        </EuiTitle>
-        <EuiSpacer
-          size="m"
-        />
-      </div>
-    </header>
-    <div
-      className="homWelcome__content homWelcome-body"
-    >
-      <EuiFlexGroup
-        gutterSize="l"
-      >
-        <EuiFlexItem>
-          <SampleDataCard
-            onConfirm={[Function]}
-            onDecline={[Function]}
-            urlBasePath="/"
-          />
-          <EuiSpacer
-            size="s"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  </div>
-</EuiPortal>
-`;
-
-exports[`Welcome page  should render welcome logo in default mode  using the original OpenSearch Dashboards logo 1`] = `
-<EuiPortal>
-  <div
-    className="homWelcome"
-  >
-    <header
-      className="homWelcome__header"
-    >
-      <div
-        className="homWelcome__content eui-textCenter"
-      >
-        <EuiSpacer
-          size="xl"
-        />
-        <span
-          className="homWelcome__logo"
-        >
-          <EuiIcon
-            size="original"
-            type="test-file-stub"
-          />
-        </span>
-        <EuiTitle
-          className="homWelcome__title"
-          data-test-subj="welcomeCustomTitle"
-          data-test-title-message="Welcome to OpenSearch Dashboards"
+          data-test-title-message="Welcome to Page Title"
           size="l"
         >
           <h1>
             <FormattedMessage
-              defaultMessage="Welcome to OpenSearch Dashboards"
+              defaultMessage="Welcome to Page Title"
               id="home.welcomeTitle"
               values={Object {}}
             />
diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
index 2852ed4cda19..7024d73080e8 100644
--- a/src/plugins/home/public/application/components/home.js
+++ b/src/plugins/home/public/application/components/home.js
@@ -163,6 +163,7 @@ export class Home extends Component {
               solutions={solutions}
               directories={directories}
               branding={getServices().injectedMetadata.getBranding()}
+              logos={getServices().chrome.logos}
             />
           ) : null}
 
@@ -202,6 +203,7 @@ export class Home extends Component {
         urlBasePath={this.props.urlBasePath}
         telemetry={this.props.telemetry}
         branding={getServices().injectedMetadata.getBranding()}
+        logos={getServices().chrome.logos}
       />
     );
   }
diff --git a/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap b/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap
index 2fb95d11d5c8..c88537eac658 100644
--- a/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap
+++ b/src/plugins/home/public/application/components/solutions_section/__snapshots__/solution_title.test.tsx.snap
@@ -1,186 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SolutionTitle  in dark mode renders the home dashboard logo using mark dark mode URL 1`] = `
-<EuiFlexGroup
-  alignItems="center"
-  gutterSize="none"
->
-  <EuiFlexItem
-    className="eui-textCenter"
-  >
-    <div
-      className="homSolutionPanel__customIcon"
-    >
-      <img
-        alt="custom title logo"
-        className="homSolutionPanel__customIconContainer"
-        data-test-image-url="/darkModeUrl"
-        data-test-subj="dashboardCustomLogo"
-        src="/darkModeUrl"
-      />
-    </div>
-    <EuiTitle
-      className="homSolutionPanel__title eui-textInheritColor"
-      data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
-      size="s"
-    >
-      <h3>
-        custom title
-      </h3>
-    </EuiTitle>
-    <EuiText
-      size="s"
-    >
-      <p
-        className="homSolutionPanel__subtitle"
-      >
-        Visualize & analyze
-         
-        <EuiIcon
-          type="sortRight"
-        />
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`SolutionTitle  in dark mode renders the home dashboard logo using mark default mode URL 1`] = `
-<EuiFlexGroup
-  alignItems="center"
-  gutterSize="none"
->
-  <EuiFlexItem
-    className="eui-textCenter"
-  >
-    <div
-      className="homSolutionPanel__customIcon"
-    >
-      <img
-        alt="custom title logo"
-        className="homSolutionPanel__customIconContainer"
-        data-test-image-url="/defaultModeUrl"
-        data-test-subj="dashboardCustomLogo"
-        src="/defaultModeUrl"
-      />
-    </div>
-    <EuiTitle
-      className="homSolutionPanel__title eui-textInheritColor"
-      data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
-      size="s"
-    >
-      <h3>
-        custom title
-      </h3>
-    </EuiTitle>
-    <EuiText
-      size="s"
-    >
-      <p
-        className="homSolutionPanel__subtitle"
-      >
-        Visualize & analyze
-         
-        <EuiIcon
-          type="sortRight"
-        />
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`SolutionTitle  in dark mode renders the home dashboard logo using original in and out door logo 1`] = `
-<EuiFlexGroup
-  alignItems="center"
-  gutterSize="none"
->
-  <EuiFlexItem
-    className="eui-textCenter"
-  >
-    <EuiToken
-      className="homSolutionPanel__icon"
-      fill="light"
-      iconType="undefined/opensearch_mark_dark_mode.svg"
-      shape="circle"
-      size="l"
-    />
-    <EuiTitle
-      className="homSolutionPanel__title eui-textInheritColor"
-      data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
-      size="s"
-    >
-      <h3>
-        custom title
-      </h3>
-    </EuiTitle>
-    <EuiText
-      size="s"
-    >
-      <p
-        className="homSolutionPanel__subtitle"
-      >
-        Visualize & analyze
-         
-        <EuiIcon
-          type="sortRight"
-        />
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`SolutionTitle  in default mode renders the home dashboard logo using mark default mode URL 1`] = `
-<EuiFlexGroup
-  alignItems="center"
-  gutterSize="none"
->
-  <EuiFlexItem
-    className="eui-textCenter"
-  >
-    <div
-      className="homSolutionPanel__customIcon"
-    >
-      <img
-        alt="custom title logo"
-        className="homSolutionPanel__customIconContainer"
-        data-test-image-url="/defaultModeUrl"
-        data-test-subj="dashboardCustomLogo"
-        src="/defaultModeUrl"
-      />
-    </div>
-    <EuiTitle
-      className="homSolutionPanel__title eui-textInheritColor"
-      data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
-      size="s"
-    >
-      <h3>
-        custom title
-      </h3>
-    </EuiTitle>
-    <EuiText
-      size="s"
-    >
-      <p
-        className="homSolutionPanel__subtitle"
-      >
-        Visualize & analyze
-         
-        <EuiIcon
-          type="sortRight"
-        />
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`SolutionTitle  in default mode renders the home dashboard logo using original in and out door logo 1`] = `
+exports[`SolutionTitle  renders correctly by default 1`] = `
 <EuiFlexGroup
   alignItems="center"
   gutterSize="none"
@@ -191,18 +11,18 @@ exports[`SolutionTitle  in default mode renders the home dashboard logo using or
     <EuiToken
       className="homSolutionPanel__icon"
       fill="light"
-      iconType="undefined/opensearch_mark_default_mode.svg"
+      iconType="/ui/logos/opensearch_mark_on_light.svg"
       shape="circle"
       size="l"
     />
     <EuiTitle
       className="homSolutionPanel__title eui-textInheritColor"
       data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
+      data-test-title="Page Title"
       size="s"
     >
       <h3>
-        custom title
+        Page Title
       </h3>
     </EuiTitle>
     <EuiText
@@ -222,7 +42,7 @@ exports[`SolutionTitle  in default mode renders the home dashboard logo using or
 </EuiFlexGroup>
 `;
 
-exports[`SolutionTitle  in default mode renders the title section of the solution panel 1`] = `
+exports[`SolutionTitle  renders correctly when branded 1`] = `
 <EuiFlexGroup
   alignItems="center"
   gutterSize="none"
@@ -234,21 +54,21 @@ exports[`SolutionTitle  in default mode renders the title section of the solutio
       className="homSolutionPanel__customIcon"
     >
       <img
-        alt="custom title logo"
+        alt="Page Title logo"
         className="homSolutionPanel__customIconContainer"
-        data-test-image-url="/defaultModeUrl"
+        data-test-image-url="/custom/branded/mark.svg"
         data-test-subj="dashboardCustomLogo"
-        src="/defaultModeUrl"
+        src="/custom/branded/mark.svg"
       />
     </div>
     <EuiTitle
       className="homSolutionPanel__title eui-textInheritColor"
       data-test-subj="dashboardCustomTitle"
-      data-test-title="custom title"
+      data-test-title="Page Title"
       size="s"
     >
       <h3>
-        custom title
+        Page Title
       </h3>
     </EuiTitle>
     <EuiText
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
index c5b692450b3c..3a8c82235bee 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_panel.tsx
@@ -30,6 +30,7 @@
 
 import React, { FC } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+import { Logos } from 'opensearch-dashboards/public';
 import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 import { SolutionTitle } from './solution_title';
@@ -64,9 +65,10 @@ interface Props {
   solution: FeatureCatalogueSolution;
   apps?: FeatureCatalogueEntry[];
   branding: HomePluginBranding;
+  logos: Logos;
 }
 
-export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [], branding }) => (
+export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [], branding, logos }) => (
   <EuiFlexItem
     key={solution.id}
     data-test-subj={`homSolutionPanel homSolutionPanel_${solution.id}`}
@@ -90,6 +92,7 @@ export const SolutionPanel: FC<Props> = ({ addBasePath, solution, apps = [], bra
               title={solution.title}
               subtitle={solution.subtitle}
               branding={branding}
+              logos={logos}
             />
           </EuiFlexItem>
 
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.test.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.test.tsx
index 5d4a6ebf079c..9d8f7662f8fb 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_title.test.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_title.test.tsx
@@ -31,6 +31,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { SolutionTitle } from './solution_title';
+import { getLogosMock } from '../../../../../../core/common/mocks';
 
 const solutionEntry = {
   id: 'opensearchDashboards',
@@ -42,121 +43,51 @@ const solutionEntry = {
   order: 1,
 };
 
+const mockTitle = 'Page Title';
+const makeProps = () => ({
+  title: solutionEntry.title,
+  subtitle: solutionEntry.subtitle,
+  iconType: solutionEntry.icon,
+  branding: {
+    applicationTitle: mockTitle,
+  },
+  logos: getLogosMock.default,
+});
+
 describe('SolutionTitle ', () => {
-  describe('in default mode', () => {
-    test('renders the title section of the solution panel', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeUrl',
-          darkModeUrl: '/darkModeUrl',
-        },
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+  it('renders correctly by default', () => {
+    const props = {
+      ...makeProps(),
+    };
+    const component = shallow(<SolutionTitle {...props} />);
+    const elements = component.find('EuiToken');
+    expect(elements.length).toEqual(1);
 
-    test('renders the home dashboard logo using mark default mode URL', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeUrl',
-          darkModeUrl: '/darkModeUrl',
-        },
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+    const img = elements.first();
+    expect(img.prop('iconType')).toEqual(props.logos.Mark.url);
 
-    test('renders the home dashboard logo using original in and out door logo', () => {
-      const branding = {
-        darkMode: false,
-        mark: {},
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+    const titles = component.find('EuiTitle > h3');
+    expect(titles.length).toEqual(1);
+    expect(titles.first().text()).toEqual(mockTitle);
+
+    expect(component).toMatchSnapshot();
   });
 
-  describe('in dark mode', () => {
-    test('renders the home dashboard logo using mark dark mode URL', () => {
-      const branding = {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeUrl',
-          darkModeUrl: '/darkModeUrl',
-        },
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
+  it('renders correctly when branded', () => {
+    const props = {
+      ...makeProps(),
+      logos: getLogosMock.branded,
+    };
+    const component = shallow(<SolutionTitle {...props} />);
+    const elements = component.find({
+      'data-test-subj': 'dashboardCustomLogo',
     });
+    expect(elements.length).toEqual(1);
 
-    test('renders the home dashboard logo using mark default mode URL', () => {
-      const branding = {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeUrl',
-        },
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+    const img = elements.first();
+    expect(img.prop('src')).toEqual(props.logos.Mark.url);
+    expect(img.prop('alt')).toEqual(`${mockTitle} logo`);
 
-    test('renders the home dashboard logo using original in and out door logo', () => {
-      const branding = {
-        darkMode: true,
-        mark: {},
-        applicationTitle: 'custom title',
-      };
-      const component = shallow(
-        <SolutionTitle
-          title={solutionEntry.title}
-          subtitle={solutionEntry.subtitle}
-          iconType={solutionEntry.icon}
-          branding={branding}
-        />
-      );
-      expect(component).toMatchSnapshot();
-    });
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx
index 8a0db3ac1afb..f2a7af96d715 100644
--- a/src/plugins/home/public/application/components/solutions_section/solution_title.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solution_title.tsx
@@ -29,6 +29,7 @@
  */
 
 import React, { FC } from 'react';
+import type { Logos } from 'opensearch-dashboards/public';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -53,97 +54,36 @@ interface Props {
    */
   iconType: IconType;
   branding: HomePluginBranding;
+  logos: Logos;
 }
 
 /**
- * Use branding configurations to check which URL to use for rendering
- * home card logo in default mode. In default mode, home card logo will
- * proritize default mode mark URL. If it is invalid, default opensearch logo
- * will be rendered.
- *
- * @param {HomePluginBranding} - pass in custom branding configurations
- * @returns a valid custom URL or undefined if no valid URL is provided
- */
-const customHomeLogoDefaultMode = (branding: HomePluginBranding) => {
-  return branding.mark?.defaultUrl ?? undefined;
-};
-
-/**
- * Use branding configurations to check which URL to use for rendering
- * home logo in dark mode. In dark mode, home logo will render
- * dark mode mark URL if valid. Otherwise, it will render the default
- * mode mark URL if valid. If both dark mode mark URL and default mode mark
- * URL are invalid, the default opensearch logo will be rendered.
- *
- * @param {HomePluginBranding} - pass in custom branding configurations
- * @returns {string|undefined} a valid custom URL or undefined if no valid URL is provided
+ * The component <EuiFlexGroup> that renders the blue dashboard card on home page.
+ * `title` and `iconType` are deprecated because SolutionTitle component will only be rendered once
+ * as the home dashboard card.
  */
-const customHomeLogoDarkMode = (branding: HomePluginBranding) => {
-  return branding.mark?.darkModeUrl ?? branding.mark?.defaultUrl ?? undefined;
-};
-
-/**
- * Render custom home logo for both default mode and dark mode
- *
- * @param {HomePluginBranding} - pass in custom branding configurations
- * @returns {string|undefined} a valid custom loading logo URL, or undefined
- */
-const customHomeLogo = (branding: HomePluginBranding) => {
-  return branding.darkMode ? customHomeLogoDarkMode(branding) : customHomeLogoDefaultMode(branding);
-};
-
-/**
- * Check if we render a custom home logo or the default opensearch spinner.
- * If customWelcomeLogo() returns undefined(no valid custom URL is found), we
- * render the default opensearch logo
- *
- * @param {HomePluginBranding} - pass in custom branding configurations
- * @returns a image component with custom logo URL, or the default opensearch logo
- */
-const renderBrandingEnabledOrDisabledLogo = (branding: HomePluginBranding) => {
-  const customLogo = customHomeLogo(branding);
-  if (customLogo) {
-    return (
-      <div className="homSolutionPanel__customIcon">
-        <img
-          className="homSolutionPanel__customIconContainer"
-          data-test-subj="dashboardCustomLogo"
-          data-test-image-url={customLogo}
-          alt={branding.applicationTitle + ' logo'}
-          src={customLogo}
-        />
-      </div>
-    );
-  }
-  const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`;
-  const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`;
-
-  return (
-    <EuiToken
-      iconType={branding.darkMode ? DARKMODE_OPENSEARCH_MARK : DEFAULT_OPENSEARCH_MARK}
-      shape="circle"
-      fill="light"
-      size="l"
-      className="homSolutionPanel__icon"
-    />
-  );
-};
-
-/**
- *
- * @param {string} title
- * @param {string} subtitle
- * @param {IconType} iconType - will always be inputOutput icon type here
- * @param {HomePluginBranding} branding - custom branding configurations
- *
- * @returns - a EUI component <EuiFlexGroup> that renders the blue dashboard card on home page,
- * title and iconType are deprecated here because SolutionTitle component will only be rendered once
- * as the home dashboard card, and we are now in favor of using custom branding configurations.
- */
-export const SolutionTitle: FC<Props> = ({ title, subtitle, iconType, branding }) => (
+export const SolutionTitle: FC<Props> = ({ subtitle, branding, logos }) => (
   <EuiFlexGroup gutterSize="none" alignItems="center">
     <EuiFlexItem className="eui-textCenter">
-      {renderBrandingEnabledOrDisabledLogo(branding)}
+      {logos.Mark.type === 'custom' ? (
+        <div className="homSolutionPanel__customIcon">
+          <img
+            className="homSolutionPanel__customIconContainer"
+            data-test-subj="dashboardCustomLogo"
+            data-test-image-url={logos.Mark.url}
+            alt={branding.applicationTitle + ' logo'}
+            src={logos.Mark.url}
+          />
+        </div>
+      ) : (
+        <EuiToken
+          iconType={logos.Mark.url}
+          shape="circle"
+          fill="light"
+          size="l"
+          className="homSolutionPanel__icon"
+        />
+      )}
 
       <EuiTitle
         className="homSolutionPanel__title eui-textInheritColor"
diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
index 8c9685f04908..96452f9ae779 100644
--- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
+++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx
@@ -32,6 +32,7 @@ import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiScreenReaderOnly } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import { Logos } from 'opensearch-dashboards/public';
 import { SolutionPanel } from './solution_panel';
 import { HomePluginBranding } from '../../../plugin';
 import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../../';
@@ -46,9 +47,16 @@ interface Props {
   solutions: FeatureCatalogueSolution[];
   directories: FeatureCatalogueEntry[];
   branding: HomePluginBranding;
+  logos: Logos;
 }
 
-export const SolutionsSection: FC<Props> = ({ addBasePath, solutions, directories, branding }) => {
+export const SolutionsSection: FC<Props> = ({
+  addBasePath,
+  solutions,
+  directories,
+  branding,
+  logos,
+}) => {
   // Separate OpenSearch Dashboards from other solutions
   const opensearchDashboards = solutions.find(({ id }) => id === 'opensearchDashboards');
   const opensearchDashboardsApps = directories
@@ -78,6 +86,7 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions, directorie
                     solution={solution}
                     addBasePath={addBasePath}
                     branding={branding}
+                    logos={logos}
                   />
                 ))}
               </EuiFlexGroup>
@@ -89,6 +98,7 @@ export const SolutionsSection: FC<Props> = ({ addBasePath, solutions, directorie
               addBasePath={addBasePath}
               apps={opensearchDashboardsApps.length ? opensearchDashboardsApps : undefined}
               branding={branding}
+              logos={logos}
             />
           ) : null}
         </EuiFlexGroup>
diff --git a/src/plugins/home/public/application/components/welcome.test.tsx b/src/plugins/home/public/application/components/welcome.test.tsx
index 6a08c977e157..c03bdff6aae0 100644
--- a/src/plugins/home/public/application/components/welcome.test.tsx
+++ b/src/plugins/home/public/application/components/welcome.test.tsx
@@ -32,6 +32,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Welcome } from './welcome';
 import { telemetryPluginMock } from '../../../../telemetry/public/mocks';
+import { getLogosMock } from '../../../../../core/common/mocks';
 
 jest.mock('../opensearch_dashboards_services', () => ({
   getServices: () => ({
@@ -48,120 +49,95 @@ test('should render a Welcome screen with the telemetry disclaimer', () => {
 });
 */
 
-const branding = {
-  darkMode: false,
-  mark: {
-    defaultUrl: '/',
+const mockTitle = 'Page Title';
+const makeProps = () => ({
+  urlBasePath: '/',
+  onSkip: jest.fn(),
+  branding: {
+    applicationTitle: mockTitle,
   },
-  applicationTitle: 'OpenSearch Dashboards',
-};
+  logos: getLogosMock.default,
+});
 
-describe('Welcome page ', () => {
-  describe('should render a Welcome screen ', () => {
-    test('with the telemetry disclaimer when optIn is true', () => {
+describe('Welcome page', () => {
+  describe('renders the Welcome screen', () => {
+    it('with the telemetry disclaimer when optIn is true', () => {
       const telemetry = telemetryPluginMock.createStartContract();
       telemetry.telemetryService.getIsOptedIn = jest.fn().mockReturnValue(true);
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} branding={branding} />
-      );
 
+      const props = {
+        ...makeProps(),
+        telemetry,
+      };
+      const component = shallow(<Welcome {...props} />);
       expect(component).toMatchSnapshot();
     });
 
-    test('with the telemetry disclaimer when optIn is false', () => {
+    it('with the telemetry disclaimer when optIn is false', () => {
       const telemetry = telemetryPluginMock.createStartContract();
       telemetry.telemetryService.getIsOptedIn = jest.fn().mockReturnValue(false);
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} branding={branding} />
-      );
 
+      const props = {
+        ...makeProps(),
+        telemetry,
+      };
+      const component = shallow(<Welcome {...props} />);
       expect(component).toMatchSnapshot();
     });
 
-    test('with no telemetry disclaimer', () => {
-      const component = shallow(<Welcome urlBasePath="/" onSkip={() => {}} branding={branding} />);
-
+    it('with no telemetry disclaimer', () => {
+      const props = {
+        ...makeProps(),
+      };
+      const component = shallow(<Welcome {...props} />);
       expect(component).toMatchSnapshot();
     });
 
-    test('fires opt-in seen when mounted', () => {
+    it('and fires opt-in seen when mounted', () => {
       const telemetry = telemetryPluginMock.createStartContract();
       const mockSetOptedInNoticeSeen = jest.fn();
       telemetry.telemetryNotifications.setOptedInNoticeSeen = mockSetOptedInNoticeSeen;
-      shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} telemetry={telemetry} branding={branding} />
-      );
+
+      const props = {
+        ...makeProps(),
+        telemetry,
+      };
+      shallow(<Welcome {...props} />);
 
       expect(mockSetOptedInNoticeSeen).toHaveBeenCalled();
     });
   });
 
-  describe('should render welcome logo in default mode ', () => {
-    test('using mark default mode URL', () => {
-      const customBranding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeMark',
-        },
-        applicationTitle: 'custom title',
+  describe('renders the welcome logo', () => {
+    it('with OpenSearch center mark when not branded', () => {
+      const props = {
+        ...makeProps(),
       };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={customBranding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+      const component = shallow(<Welcome {...props} />);
 
-    test('using the original OpenSearch Dashboards logo', () => {
-      const defaultBranding = {
-        darkMode: false,
-        mark: {},
-        applicationTitle: 'OpenSearch Dashboards',
-      };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={defaultBranding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
-  });
-  describe('should render welcome logo in dark mode ', () => {
-    test('using mark dark mode URL', () => {
-      const customBranding = {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeMark',
-          darkModeUrl: '/darkModeMark',
-        },
-        title: 'custom title',
-      };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={customBranding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+      const elements = component.find('EuiIcon');
+      expect(elements.length).toEqual(1);
+      expect(elements.first().prop('type')).toEqual(props.logos.CenterMark.url);
 
-    test('using mark default mode URL', () => {
-      const customBranding = {
-        darkMode: true,
-        mark: {
-          defaultUrl: '/defaultModeMark',
-        },
-        title: 'custom title',
-      };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={customBranding} />
-      );
       expect(component).toMatchSnapshot();
     });
 
-    test('using the original opensearch logo', () => {
-      const customBranding = {
-        darkMode: true,
-        mark: {},
-        title: 'custom title',
+    it('with custom branded logo when branded', () => {
+      const props = {
+        ...makeProps(),
+        logos: getLogosMock.branded,
       };
-      const component = shallow(
-        <Welcome urlBasePath="/" onSkip={() => {}} branding={customBranding} />
-      );
+      const component = shallow(<Welcome {...props} />);
+
+      const elements = component.find({
+        'data-test-subj': 'welcomeCustomLogo',
+      });
+      expect(elements.length).toEqual(1);
+
+      const img = elements.first();
+      expect(img.prop('src')).toEqual(props.logos.CenterMark.url);
+      expect(img.prop('alt')).toEqual(`${mockTitle} logo`);
+
       expect(component).toMatchSnapshot();
     });
   });
diff --git a/src/plugins/home/public/application/components/welcome.tsx b/src/plugins/home/public/application/components/welcome.tsx
index 1a364ce732bc..108180cacd99 100644
--- a/src/plugins/home/public/application/components/welcome.tsx
+++ b/src/plugins/home/public/application/components/welcome.tsx
@@ -47,23 +47,19 @@ import {
 } from '@elastic/eui';
 import { METRIC_TYPE } from '@osd/analytics';
 import { FormattedMessage } from '@osd/i18n/react';
+import { Logos } from 'opensearch-dashboards/public';
 import { getServices } from '../opensearch_dashboards_services';
 import { TelemetryPluginStart } from '../../../../telemetry/public';
-
 import { SampleDataCard } from './sample_data';
-import OpenSearchMarkCentered from '../../assets/logos/opensearch_mark_centered.svg';
+
 interface Props {
   urlBasePath: string;
   onSkip: () => void;
   telemetry?: TelemetryPluginStart;
   branding: {
-    darkMode: boolean;
-    mark: {
-      defaultUrl?: string;
-      darkModeUrl?: string;
-    };
     applicationTitle?: string;
   };
+  logos: Logos;
 }
 
 /**
@@ -146,72 +142,32 @@ export class Welcome extends React.Component<Props> {
     }
   };
 
-  private darkMode = this.props.branding.darkMode;
-  private markDefault = this.props.branding.mark.defaultUrl;
-  private markDarkMode = this.props.branding.mark.darkModeUrl;
   private applicationTitle = this.props.branding.applicationTitle;
 
   /**
-   * Use branding configurations to check which URL to use for rendering
-   * welcome logo in default mode. In default mode, welcome logo will
-   * proritize default mode mark URL. If it is invalid, default opensearch logo
-   * will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  private customWelcomeLogoDefaultMode = () => {
-    return this.markDefault ?? undefined;
-  };
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * welcome logo in dark mode. In dark mode, welcome logo will render
-   * dark mode mark URL if valid. Otherwise, it will render the default
-   * mode mark URL if valid. If both dark mode mark URL and default mode mark
-   * URL are invalid, the default opensearch logo will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
+   * Returns Welcome logo, wrapped in a container, using the custom branded logos or,
+   * the centered opensearch mark if no branding is provided.
    */
-  private customWelcomeLogoDarkMode = () => {
-    return this.markDarkMode ?? this.markDefault ?? undefined;
-  };
+  private renderWelcomeLogo = () => {
+    const { url: centerMarkURL, type: centerMarkType } = this.props.logos.CenterMark;
 
-  /**
-   * Render custom welcome logo for both default mode and dark mode
-   *
-   * @returns a valid custom loading logo URL, or undefined
-   */
-  private customWelcomeLogo = () => {
-    if (this.darkMode) {
-      return this.customWelcomeLogoDarkMode();
-    }
-    return this.customWelcomeLogoDefaultMode();
-  };
-
-  /**
-   * Check if we render a custom welcome logo or the default opensearch spinner.
-   * If customWelcomeLogo() returns undefined(no valid custom URL is found), we
-   * render the default opensearch logo
-   *
-   * @returns a image component with custom logo URL, or the default opensearch logo
-   */
-  private renderBrandingEnabledOrDisabledLogo = () => {
-    if (this.customWelcomeLogo()) {
+    if (centerMarkType === 'custom') {
       return (
         <div className="homWelcome__customLogoContainer">
           <img
             className="homWelcome__customLogo"
             data-test-subj="welcomeCustomLogo"
-            data-test-image-url={this.customWelcomeLogo()}
+            data-test-image-url={centerMarkURL}
             alt={this.applicationTitle + ' logo'}
-            src={this.customWelcomeLogo()}
+            src={centerMarkURL}
           />
         </div>
       );
     }
+
     return (
       <span className="homWelcome__logo">
-        <EuiIcon type={OpenSearchMarkCentered} size="original" />
+        <EuiIcon type={centerMarkURL} size="original" />
       </span>
     );
   };
@@ -224,7 +180,7 @@ export class Welcome extends React.Component<Props> {
           <header className="homWelcome__header">
             <div className="homWelcome__content eui-textCenter">
               <EuiSpacer size="xl" />
-              {this.renderBrandingEnabledOrDisabledLogo()}
+              {this.renderWelcomeLogo()}
               <EuiTitle
                 size="l"
                 className="homWelcome__title"
diff --git a/src/plugins/home/public/assets/logos/opensearch_mark_centered.svg b/src/plugins/home/public/assets/logos/opensearch_mark_centered.svg
deleted file mode 100644
index 649f8e3a5c90..000000000000
--- a/src/plugins/home/public/assets/logos/opensearch_mark_centered.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg height="64" width="64" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M75.7374 37.5C74.4878 37.5 73.4748 38.513 73.4748 39.7626C73.4748 58.3813 58.3813 73.4748 39.7626 73.4748C38.513 73.4748 37.5 74.4878 37.5 75.7374C37.5 76.987 38.513 78 39.7626 78C60.8805 78 78 60.8805 78 39.7626C78 38.513 76.987 37.5 75.7374 37.5Z"
-      fill="#005EB8"
-    />
-    <path
-      d="M62.0814 52C64.2572 48.4505 66.3615 43.7178 65.9475 37.0921C65.0899 23.3673 52.6589 12.9554 40.9206 14.0837C36.3253 14.5255 31.6068 18.2712 32.026 24.9805C32.2082 27.8961 33.6352 29.6169 35.9544 30.9399C38.1618 32.1992 40.9978 32.9969 44.2128 33.9011C48.0962 34.9934 52.6009 36.2203 56.0631 38.7717C60.2125 41.8296 63.0491 45.3743 62.0814 52Z"
-      fill="#003B5C"
-    />
-    <path
-      d="M17.9186 28C15.7428 31.5495 13.6385 36.2822 14.0525 42.9079C14.9101 56.6327 27.3411 67.0446 39.0794 65.9163C43.6747 65.4745 48.3932 61.7288 47.974 55.0195C47.7918 52.1039 46.3647 50.3831 44.0456 49.0601C41.8382 47.8008 39.0022 47.0031 35.7872 46.0989C31.9038 45.0066 27.3991 43.7797 23.9369 41.2283C19.7875 38.1704 16.9509 34.6257 17.9186 28Z"
-      fill="#005EB8"
-    />
-  </svg>
\ No newline at end of file
diff --git a/src/plugins/home/public/assets/logos/opensearch_mark_default.svg b/src/plugins/home/public/assets/logos/opensearch_mark_default.svg
deleted file mode 100644
index e185d0fc8c3b..000000000000
--- a/src/plugins/home/public/assets/logos/opensearch_mark_default.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z" fill="#005EB8"/>
-    <path d="M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z" fill="#003B5C"/>
-    <path d="M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z" fill="#005EB8"/>
-</svg>
diff --git a/src/plugins/home/server/tutorials/opensearch_logs/index.ts b/src/plugins/home/server/tutorials/opensearch_logs/index.ts
index 59589e596822..86f8caebd0ac 100644
--- a/src/plugins/home/server/tutorials/opensearch_logs/index.ts
+++ b/src/plugins/home/server/tutorials/opensearch_logs/index.ts
@@ -58,7 +58,7 @@ export function opensearchLogsSpecProvider(context: TutorialContext): TutorialSc
         learnMoreLink: '{config.docs.beats.filebeat}/filebeat-module-opensearch.html',
       },
     }),
-    euiIconType: '/plugins/home/assets/logos/opensearch_mark_default.svg',
+    euiIconType: '/ui/logos/opensearch_mark.svg',
     artifacts: {
       application: {
         label: i18n.translate('home.tutorials.opensearchLogs.artifacts.application.label', {
diff --git a/src/plugins/home/server/tutorials/opensearch_metrics/index.ts b/src/plugins/home/server/tutorials/opensearch_metrics/index.ts
index e7a2559d2df8..38694ca9d588 100644
--- a/src/plugins/home/server/tutorials/opensearch_metrics/index.ts
+++ b/src/plugins/home/server/tutorials/opensearch_metrics/index.ts
@@ -57,7 +57,7 @@ export function opensearchMetricsSpecProvider(context: TutorialContext): Tutoria
         learnMoreLink: '{config.docs.beats.metricbeat}/metricbeat-module-opensearch.html',
       },
     }),
-    euiIconType: '/plugins/home/assets/logos/opensearch_mark_default.svg',
+    euiIconType: '/ui/logos/opensearch_mark.svg',
     artifacts: {
       application: {
         label: i18n.translate('home.tutorials.opensearchMetrics.artifacts.application.label', {
diff --git a/src/plugins/management/public/plugin.ts b/src/plugins/management/public/plugin.ts
index 4cc1c4aa7f8f..81a970a0fc48 100644
--- a/src/plugins/management/public/plugin.ts
+++ b/src/plugins/management/public/plugin.ts
@@ -76,7 +76,7 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
       id: MANAGEMENT_APP_ID,
       title: this.title,
       order: 9030,
-      icon: '/plugins/home/assets/logos/opensearch_mark_default.svg',
+      icon: '/ui/logos/opensearch_mark.svg',
       category: DEFAULT_APP_CATEGORIES.management,
       updater$: this.appUpdater,
       async mount(params: AppMountParameters) {
diff --git a/src/plugins/management_overview/public/plugin.ts b/src/plugins/management_overview/public/plugin.ts
index b588d50e23da..c1b77be0f795 100644
--- a/src/plugins/management_overview/public/plugin.ts
+++ b/src/plugins/management_overview/public/plugin.ts
@@ -57,7 +57,7 @@ export class ManagementOverViewPlugin implements Plugin<ManagementOverViewPlugin
       title: i18n.translate('management.overview.overviewTitle', {
         defaultMessage: 'Overview',
       }),
-      icon: '/plugins/home/public/assets/logos/opensearch_mark_default.svg',
+      icon: '/ui/logos/opensearch_mark.svg',
       order: 9000,
       category: DEFAULT_APP_CATEGORIES.management,
       mount: async (params: AppMountParameters) => {
diff --git a/src/plugins/opensearch_dashboards_overview/public/application.tsx b/src/plugins/opensearch_dashboards_overview/public/application.tsx
index f6d0e172e394..26bf7294263c 100644
--- a/src/plugins/opensearch_dashboards_overview/public/application.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/application.tsx
@@ -51,7 +51,6 @@ export const renderApp = (
     .filter(({ id }) => id !== 'opensearchDashboards')
     .filter(({ id }) => navLinks.find(({ category, hidden }) => !hidden && category?.id === id));
   const features = home.featureCatalogue.get();
-  const branding = core.injectedMetadata.getBranding();
 
   ReactDOM.render(
     <I18nProvider>
@@ -64,7 +63,7 @@ export const renderApp = (
           newsfeed$={newsfeed$}
           solutions={solutions}
           features={features}
-          branding={branding}
+          logos={core.chrome.logos}
         />
       </OpenSearchDashboardsContextProvider>
     </I18nProvider>,
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/app.tsx b/src/plugins/opensearch_dashboards_overview/public/components/app.tsx
index dfd3b717981f..def278cdd200 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/app.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/components/app.tsx
@@ -32,12 +32,11 @@ import React, { useEffect, useState } from 'react';
 import { Observable } from 'rxjs';
 import { I18nProvider } from '@osd/i18n/react';
 import { HashRouter as Router, Switch, Route } from 'react-router-dom';
-import { CoreStart } from 'src/core/public';
+import { CoreStart, Logos } from 'src/core/public';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { FetchResult } from 'src/plugins/newsfeed/public';
 import { FeatureCatalogueEntry, FeatureCatalogueSolution } from 'src/plugins/home/public';
 import { Overview } from './overview';
-import { OverviewPluginBranding } from '../plugin';
 
 interface OpenSearchDashboardsOverviewAppDeps {
   basename: string;
@@ -47,7 +46,7 @@ interface OpenSearchDashboardsOverviewAppDeps {
   newsfeed$?: Observable<FetchResult | null | void>;
   solutions: FeatureCatalogueSolution[];
   features: FeatureCatalogueEntry[];
-  branding: OverviewPluginBranding;
+  logos: Logos;
 }
 
 export const OpenSearchDashboardsOverviewApp = ({
@@ -55,7 +54,7 @@ export const OpenSearchDashboardsOverviewApp = ({
   newsfeed$,
   solutions,
   features,
-  branding,
+  logos,
 }: OpenSearchDashboardsOverviewAppDeps) => {
   const [newsFetchResult, setNewsFetchResult] = useState<FetchResult | null | void>(null);
 
@@ -78,7 +77,7 @@ export const OpenSearchDashboardsOverviewApp = ({
               newsFetchResult={newsFetchResult}
               solutions={solutions}
               features={features}
-              branding={branding}
+              logos={logos}
             />
           </Route>
         </Switch>
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/overview/__snapshots__/overview.test.tsx.snap b/src/plugins/opensearch_dashboards_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
index e352dd58236c..6d92c8759243 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_overview/public/components/overview/__snapshots__/overview.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Overview render 1`] = `
+exports[`Overview renders with solutions and features 1`] = `
 <main
   aria-labelledby="osdOverviewPageHeader__title"
   className="osdOverviewWrapper"
@@ -70,17 +70,73 @@ exports[`Overview render 1`] = `
         ],
       }
     }
-    branding={
+    hideToolbar={false}
+    logos={
       Object {
-        "darkMode": false,
-        "mark": Object {
-          "darkModeUrl": "/darkModeUrl",
-          "defaultUrl": "/defaultModeUrl",
+        "AnimatedMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "Application": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "CenterMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "Mark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
         },
+        "OpenSearch": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
+        },
+        "colorScheme": "light",
       }
     }
-    hideToolbar={false}
-    iconType="inputOutput"
+    showIcon={true}
     title={
       <FormattedMessage
         defaultMessage="OpenSearch Dashboards"
@@ -373,7 +429,7 @@ exports[`Overview render 1`] = `
 </main>
 `;
 
-exports[`Overview without features 1`] = `
+exports[`Overview renders with solutions and without features 1`] = `
 <main
   aria-labelledby="osdOverviewPageHeader__title"
   className="osdOverviewWrapper"
@@ -499,17 +555,73 @@ exports[`Overview without features 1`] = `
         ],
       }
     }
-    branding={
+    hideToolbar={false}
+    logos={
       Object {
-        "darkMode": false,
-        "mark": Object {
-          "darkModeUrl": "/darkModeUrl",
-          "defaultUrl": "/defaultModeUrl",
+        "AnimatedMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "Application": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "CenterMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "Mark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "OpenSearch": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
         },
+        "colorScheme": "light",
       }
     }
-    hideToolbar={false}
-    iconType="inputOutput"
+    showIcon={true}
     title={
       <FormattedMessage
         defaultMessage="OpenSearch Dashboards"
@@ -858,7 +970,7 @@ exports[`Overview without features 1`] = `
 </main>
 `;
 
-exports[`Overview without solutions 1`] = `
+exports[`Overview renders without solutions and with features 1`] = `
 <main
   aria-labelledby="osdOverviewPageHeader__title"
   className="osdOverviewWrapper"
@@ -928,17 +1040,73 @@ exports[`Overview without solutions 1`] = `
         ],
       }
     }
-    branding={
+    hideToolbar={false}
+    logos={
       Object {
-        "darkMode": false,
-        "mark": Object {
-          "darkModeUrl": "/darkModeUrl",
-          "defaultUrl": "/defaultModeUrl",
+        "AnimatedMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_spinner_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_spinner_on_light.svg",
+        },
+        "Application": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_dashboards_on_light.svg",
+        },
+        "CenterMark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_center_mark_on_light.svg",
+        },
+        "Mark": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_mark_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_mark_on_light.svg",
+        },
+        "OpenSearch": Object {
+          "dark": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_dark.svg",
+          },
+          "light": Object {
+            "type": "default",
+            "url": "/ui/logos/opensearch_on_light.svg",
+          },
+          "type": "default",
+          "url": "/ui/logos/opensearch_on_light.svg",
         },
+        "colorScheme": "light",
       }
     }
-    hideToolbar={false}
-    iconType="inputOutput"
+    showIcon={true}
     title={
       <FormattedMessage
         defaultMessage="OpenSearch Dashboards"
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx b/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx
index 1e105c56e574..fc33d4a8836a 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx
@@ -33,6 +33,7 @@ import React from 'react';
 import { Overview } from './overview';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { FeatureCatalogueCategory } from 'src/plugins/home/public';
+import { getLogosMock } from '../../../../../core/common/mocks';
 
 jest.mock('../../../../../../src/plugins/opensearch_dashboards_react/public', () => ({
   useOpenSearchDashboards: jest.fn().mockReturnValue({
@@ -163,46 +164,42 @@ const mockFeatures = [
   },
 ];
 
-const mockBranding = {
-  darkMode: false,
-  mark: {
-    defaultUrl: '/defaultModeUrl',
-    darkModeUrl: '/darkModeUrl',
-  },
-};
+const makeProps = () => ({
+  newsFetchResult: mockNewsFetchResult,
+  solutions: mockSolutions,
+  features: mockFeatures,
+  logos: getLogosMock.default,
+});
 
 describe('Overview', () => {
-  test('render', () => {
-    const component = shallowWithIntl(
-      <Overview
-        newsFetchResult={mockNewsFetchResult}
-        solutions={mockSolutions}
-        features={mockFeatures}
-        branding={mockBranding}
-      />
-    );
-    expect(component).toMatchSnapshot();
-  });
-  test('without solutions', () => {
-    const component = shallowWithIntl(
-      <Overview
-        newsFetchResult={mockNewsFetchResult}
-        solutions={[]}
-        features={mockFeatures}
-        branding={mockBranding}
-      />
-    );
-    expect(component).toMatchSnapshot();
-  });
-  test('without features', () => {
-    const component = shallowWithIntl(
-      <Overview
-        newsFetchResult={mockNewsFetchResult}
-        solutions={mockSolutions}
-        features={[]}
-        branding={mockBranding}
-      />
-    );
-    expect(component).toMatchSnapshot();
+  describe('renders', () => {
+    it('with solutions and features', () => {
+      const props = {
+        ...makeProps(),
+      };
+      const component = shallowWithIntl(<Overview {...props} />);
+      expect(component).toMatchSnapshot();
+    });
+
+    it('without solutions and with features', () => {
+      const props = {
+        ...makeProps(),
+        solutions: [],
+      };
+      const component = shallowWithIntl(<Overview {...props} />);
+      expect(component).toMatchSnapshot();
+    });
+    it('with solutions and without features', () => {
+      const props = {
+        ...makeProps(),
+        features: [],
+      };
+      const component = shallowWithIntl(<Overview {...props} />);
+      expect(component).toMatchSnapshot();
+    });
   });
+
+  // ToDo: Add tests for all the complications of Overview
+  // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4693
+  it.todo('renders each of the complications of Overview');
 });
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx b/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx
index 3df491b1b422..30df4dbe8146 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx
+++ b/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx
@@ -41,7 +41,7 @@ import {
   EuiToken,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
-import { CoreStart } from 'opensearch-dashboards/public';
+import { CoreStart, Logos } from 'opensearch-dashboards/public';
 import {
   RedirectAppLinks,
   useOpenSearchDashboards,
@@ -60,18 +60,18 @@ import { AddData } from '../add_data';
 import { GettingStarted } from '../getting_started';
 import { ManageData } from '../manage_data';
 import { NewsFeed } from '../news_feed';
-import { OverviewPluginBranding } from '../../plugin';
 
 const sortByOrder = (featureA: FeatureCatalogueEntry, featureB: FeatureCatalogueEntry) =>
   (featureA.order || Infinity) - (featureB.order || Infinity);
+
 interface Props {
   newsFetchResult: FetchResult | null | void;
   solutions: FeatureCatalogueSolution[];
   features: FeatureCatalogueEntry[];
-  branding: OverviewPluginBranding;
+  logos: Logos;
 }
 
-export const Overview: FC<Props> = ({ newsFetchResult, solutions, features, branding }) => {
+export const Overview: FC<Props> = ({ newsFetchResult, solutions, features, logos }) => {
   const [isNewOpenSearchDashboardsInstance, setNewOpenSearchDashboardsInstance] = useState(false);
   const {
     services: { http, data, uiSettings, application },
@@ -147,14 +147,14 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features, bran
       <OverviewPageHeader
         addBasePath={addBasePath}
         hideToolbar={isNewOpenSearchDashboardsInstance}
-        iconType="inputOutput"
+        showIcon={true}
         title={
           <FormattedMessage
             defaultMessage="OpenSearch Dashboards"
             id="opensearchDashboardsOverview.header.title"
           />
         }
-        branding={branding}
+        logos={logos}
       />
 
       <div className="osdOverviewContent">
diff --git a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap
index 028a23d69e76..1a88da2e58f4 100644
--- a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/__snapshots__/exit_full_screen_button.test.tsx.snap
@@ -1,96 +1,178 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`is rendered 1`] = `
-<ExitFullScreenButtonUi
-  onExitFullScreenMode={[Function]}
->
+exports[`ExitFullScreenButton is rendered using the dark theme's mark by default 1`] = `
+<div>
+  <EuiScreenReaderOnly>
+    <p
+      aria-live="polite"
+    >
+      In full screen mode, press ESC to exit.
+    </p>
+  </EuiScreenReaderOnly>
   <div>
-    <EuiScreenReaderOnly>
-      <p
-        aria-live="polite"
-        className="euiScreenReaderOnly"
+    <button
+      aria-label="Exit full screen mode"
+      className="dshExitFullScreenButton"
+      data-test-subj="exitFullScreenModeLogo"
+      onClick={[MockFunction]}
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        component="span"
+        gutterSize="s"
+        responsive={false}
       >
-        In full screen mode, press ESC to exit.
-      </p>
-    </EuiScreenReaderOnly>
-    <div>
-      <button
-        aria-label="Exit full screen mode"
-        className="dshExitFullScreenButton"
-        data-test-subj="exitFullScreenModeLogo"
-        onClick={[Function]}
-      >
-        <EuiFlexGroup
-          alignItems="center"
-          component="span"
-          gutterSize="s"
-          responsive={false}
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            size="l"
+            type="/ui/logos/opensearch_mark_on_dark.svg"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          data-test-subj="exitFullScreenModeText"
+          grow={false}
         >
-          <span
-            className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-          >
-            <EuiFlexItem
-              grow={false}
+          <div>
+            <EuiText
+              className="dshExitFullScreenButton__text"
+              size="s"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <EuiIcon
-                  size="l"
-                  type="test-file-stub"
-                >
-                  <span
-                    data-euiicon-type="test-file-stub"
-                    size="l"
-                  />
-                </EuiIcon>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              data-test-subj="exitFullScreenModeText"
-              grow={false}
+              <p>
+                Exit full screen
+              </p>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            className="dshExitFullScreenButton__icon"
+            type="fullScreen"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ExitFullScreenButton is rendered using the dark theme's mark when light color-scheme is applied 1`] = `
+<div>
+  <EuiScreenReaderOnly>
+    <p
+      aria-live="polite"
+    >
+      In full screen mode, press ESC to exit.
+    </p>
+  </EuiScreenReaderOnly>
+  <div>
+    <button
+      aria-label="Exit full screen mode"
+      className="dshExitFullScreenButton"
+      data-test-subj="exitFullScreenModeLogo"
+      onClick={[MockFunction]}
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        component="span"
+        gutterSize="s"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            size="l"
+            type="/ui/logos/opensearch_mark_on_dark.svg"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          data-test-subj="exitFullScreenModeText"
+          grow={false}
+        >
+          <div>
+            <EuiText
+              className="dshExitFullScreenButton__text"
+              size="s"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-                data-test-subj="exitFullScreenModeText"
-              >
-                <div>
-                  <EuiText
-                    className="dshExitFullScreenButton__text"
-                    size="s"
-                  >
-                    <div
-                      className="euiText euiText--small dshExitFullScreenButton__text"
-                    >
-                      <p>
-                        Exit full screen
-                      </p>
-                    </div>
-                  </EuiText>
-                </div>
-              </div>
-            </EuiFlexItem>
-            <EuiFlexItem
-              grow={false}
+              <p>
+                Exit full screen
+              </p>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            className="dshExitFullScreenButton__icon"
+            type="fullScreen"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ExitFullScreenButton is rendered using the light theme's mark when dark color-scheme is applied 1`] = `
+<div>
+  <EuiScreenReaderOnly>
+    <p
+      aria-live="polite"
+    >
+      In full screen mode, press ESC to exit.
+    </p>
+  </EuiScreenReaderOnly>
+  <div>
+    <button
+      aria-label="Exit full screen mode"
+      className="dshExitFullScreenButton"
+      data-test-subj="exitFullScreenModeLogo"
+      onClick={[MockFunction]}
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        component="span"
+        gutterSize="s"
+        responsive={false}
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            size="l"
+            type="/ui/logos/opensearch_mark_on_light.svg"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          data-test-subj="exitFullScreenModeText"
+          grow={false}
+        >
+          <div>
+            <EuiText
+              className="dshExitFullScreenButton__text"
+              size="s"
             >
-              <div
-                className="euiFlexItem euiFlexItem--flexGrowZero"
-              >
-                <EuiIcon
-                  className="dshExitFullScreenButton__icon"
-                  type="fullScreen"
-                >
-                  <span
-                    className="dshExitFullScreenButton__icon"
-                    data-euiicon-type="fullScreen"
-                  />
-                </EuiIcon>
-              </div>
-            </EuiFlexItem>
-          </span>
-        </EuiFlexGroup>
-      </button>
-    </div>
+              <p>
+                Exit full screen
+              </p>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiIcon
+            className="dshExitFullScreenButton__icon"
+            type="fullScreen"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </button>
   </div>
-</ExitFullScreenButtonUi>
+</div>
 `;
diff --git a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx
index cae20349cf3e..fd5a11011bdc 100644
--- a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.test.tsx
@@ -29,36 +29,80 @@
  */
 
 import React from 'react';
-import sinon from 'sinon';
 import { ExitFullScreenButton } from './exit_full_screen_button';
 import { keys } from '@elastic/eui';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
+import { getLogosMock } from '../../../../core/common/mocks';
+import { ColorScheme } from '../../../../core/common';
 
-test('is rendered', () => {
-  const component = mount(<ExitFullScreenButton onExitFullScreenMode={() => {}} />);
-
-  expect(component).toMatchSnapshot();
+const mockProps = () => ({
+  onExitFullScreenMode: jest.fn(),
+  logos: getLogosMock.default,
 });
 
-describe('onExitFullScreenMode', () => {
-  test('is called when the button is pressed', () => {
-    const onExitHandler = sinon.stub();
+describe('ExitFullScreenButton', () => {
+  it("is rendered using the dark theme's mark by default", () => {
+    const props = {
+      ...mockProps(),
+    };
+    const component = shallow(<ExitFullScreenButton {...props} />);
+    // In light color-scheme, the button has a dark background
+    const icons = component.find(`EuiIcon[type="${props.logos.Mark.dark.url}"]`);
 
-    const component = mount(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
+    expect(icons.length).toEqual(1);
 
-    component.find('button').simulate('click');
+    expect(component).toMatchSnapshot();
+  });
 
-    sinon.assert.calledOnce(onExitHandler);
+  it("is rendered using the dark theme's mark when light color-scheme is applied", () => {
+    const props = {
+      ...mockProps(),
+      logos: { ...getLogosMock.default, colorScheme: ColorScheme.LIGHT },
+    };
+    const component = shallow(<ExitFullScreenButton {...props} />);
+    // In light color-scheme, the button has a dark background
+    const icons = component.find(`EuiIcon[type="${props.logos.Mark.dark.url}"]`);
+
+    expect(icons.length).toEqual(1);
+
+    expect(component).toMatchSnapshot();
   });
 
-  test('is called when the ESC key is pressed', () => {
-    const onExitHandler = sinon.stub();
+  it("is rendered using the light theme's mark when dark color-scheme is applied", () => {
+    const props = {
+      ...mockProps(),
+      logos: { ...getLogosMock.default, colorScheme: ColorScheme.DARK },
+    };
+    const component = shallow(<ExitFullScreenButton {...props} />);
+    // In light color-scheme, the button has a dark background
+    const icons = component.find(`EuiIcon[type="${props.logos.Mark.light.url}"]`);
+
+    expect(icons.length).toEqual(1);
+
+    expect(component).toMatchSnapshot();
+  });
+});
+
+describe('onExitFullScreenMode', () => {
+  it('is called when the button is pressed', () => {
+    const props = {
+      ...mockProps(),
+    };
+    const component = shallow(<ExitFullScreenButton {...props} />);
+    component.find('button').simulate('click');
+
+    expect(props.onExitFullScreenMode).toHaveBeenCalledTimes(1);
+  });
 
-    mount(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
+  it('is called when the ESC key is pressed', () => {
+    const props = {
+      ...mockProps(),
+    };
+    shallow(<ExitFullScreenButton {...props} />);
 
     const escapeKeyEvent = new KeyboardEvent('keydown', { key: keys.ESCAPE } as any);
     document.dispatchEvent(escapeKeyEvent);
 
-    sinon.assert.calledOnce(onExitHandler);
+    expect(props.onExitFullScreenMode).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.tsx b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.tsx
index 523f8345088f..cf13d0f224c4 100644
--- a/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/exit_full_screen_button/exit_full_screen_button.tsx
@@ -32,14 +32,14 @@ import { i18n } from '@osd/i18n';
 import React, { PureComponent } from 'react';
 import { EuiScreenReaderOnly, keys } from '@elastic/eui';
 import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { Logos } from 'opensearch-dashboards/public';
 
 export interface ExitFullScreenButtonProps {
   onExitFullScreenMode: () => void;
+  logos: Logos;
 }
 
 import './index.scss';
-// eslint-disable-next-line @osd/eslint/no-restricted-paths
-import OpenSearchMarkDarkMode from '../../../home/public/assets/logos/opensearch_mark_darkmode.svg';
 
 class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
   public onKeyDown = (e: KeyboardEvent) => {
@@ -57,6 +57,7 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
   }
 
   public render() {
+    const colorScheme = this.props.logos.colorScheme !== 'dark' ? 'dark' : 'light';
     return (
       <div>
         <EuiScreenReaderOnly>
@@ -83,7 +84,7 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
           >
             <EuiFlexGroup component="span" responsive={false} alignItems="center" gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiIcon type={OpenSearchMarkDarkMode} size="l" />
+                <EuiIcon type={this.props.logos.Mark[colorScheme].url} size="l" />
               </EuiFlexItem>
               <EuiFlexItem grow={false} data-test-subj="exitFullScreenModeText">
                 <div>
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
index 72a25d779ded..326a5b51718e 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/__snapshots__/overview_page_header.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OverviewPageHeader  in dark mode  render logo as custom dark mode logo 1`] = `
+exports[`OverviewPageHeader  renders with the toolbar by default 1`] = `
 <header
   className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
 >
@@ -38,7 +38,7 @@ exports[`OverviewPageHeader  in dark mode  render logo as custom dark mode logo
             className="osdOverviewPageHeader__actionItem"
             grow={false}
           >
-            <mockConstructor
+            <RedirectAppLinks
               application={
                 Object {
                   "capabilities": Object {
@@ -58,275 +58,7 @@ exports[`OverviewPageHeader  in dark mode  render logo as custom dark mode logo
               >
                 Add data
               </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
-
-exports[`OverviewPageHeader  in dark mode  render logo as custom default mode logo 1`] = `
-<header
-  className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
->
-  <div
-    className="osdOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="osdOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="osdOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="osdOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="osdOverviewPageHeader__actionButton"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
-
-exports[`OverviewPageHeader  in dark mode  render logo as original dark mode opensearch mark 1`] = `
-<header
-  className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
->
-  <div
-    className="osdOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="osdOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="osdOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="osdOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="osdOverviewPageHeader__actionButton"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
-
-exports[`OverviewPageHeader  in default mode  render logo as custom default mode logo 1`] = `
-<header
-  className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
->
-  <div
-    className="osdOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="osdOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="osdOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="osdOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="osdOverviewPageHeader__actionButton"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-</header>
-`;
-
-exports[`OverviewPageHeader  in default mode  render logo as original default mode opensearch mark 1`] = `
-<header
-  className="osdOverviewPageHeader osdOverviewPageHeader--noOverlap"
->
-  <div
-    className="osdOverviewPageHeader__inner"
-  >
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiFlexGroup
-          gutterSize="m"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiTitle
-              size="m"
-            >
-              <h1
-                id="osdOverviewPageHeader__title"
-              >
-                Page Title
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiFlexGroup
-          className="osdOverviewPageHeader__actions"
-          responsive={false}
-          wrap={true}
-        >
-          <EuiFlexItem
-            className="osdOverviewPageHeader__actionItem"
-            grow={false}
-          >
-            <mockConstructor
-              application={
-                Object {
-                  "capabilities": Object {
-                    "navLinks": Object {
-                      "dev_tools": true,
-                      "management": true,
-                    },
-                  },
-                }
-              }
-            >
-              <EuiButtonEmpty
-                className="osdOverviewPageHeader__actionButton"
-                flush="both"
-                href="/app/home#/tutorial_directory"
-                iconType="indexOpen"
-              >
-                Add data
-              </EuiButtonEmpty>
-            </mockConstructor>
+            </RedirectAppLinks>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.test.tsx b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
index d8290f0dbcb3..2e27ebd0cb6b 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.test.tsx
@@ -31,95 +31,265 @@
 import React from 'react';
 import { OverviewPageHeader } from './overview_page_header';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { useOpenSearchDashboards } from '../../context';
+import { getLogosMock } from '../../../../../core/common/mocks';
 
-jest.mock('../../app_links', () => ({
-  RedirectAppLinks: jest.fn((element: JSX.Element) => element),
-}));
-
-jest.mock('../../context', () => ({
-  useOpenSearchDashboards: jest.fn().mockReturnValue({
-    services: {
-      application: { capabilities: { navLinks: { management: true, dev_tools: true } } },
-      notifications: { toast: { addSuccess: jest.fn() } },
-    },
-  }),
-}));
-
-afterAll(() => jest.clearAllMocks());
+jest.mock('../../context', () => ({ useOpenSearchDashboards: jest.fn() }));
 
 const mockTitle = 'Page Title';
 const addBasePathMock = jest.fn((path: string) => (path ? path : 'path'));
 
+const mockProps = () => ({
+  addBasePath: addBasePathMock,
+  title: mockTitle,
+  branding: {},
+  logos: getLogosMock.default,
+});
+
 describe('OverviewPageHeader ', () => {
-  describe('in default mode ', () => {
-    test('render logo as custom default mode logo', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-          darkModeUrl: '/darkModeLogo',
-        },
-      };
-
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+  beforeAll(() => {
+    // @ts-ignore
+    useOpenSearchDashboards.mockImplementation(() => ({
+      services: {
+        application: { capabilities: { navLinks: { management: true, dev_tools: true } } },
+        notifications: { toast: { addSuccess: jest.fn() } },
+      },
+    }));
+  });
 
-    test('render logo as original default mode opensearch mark', () => {
-      const branding = {
-        darkMode: false,
-        mark: {},
-      };
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
 
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+  it('renders without overlap by default', () => {
+    const props = {
+      ...mockProps(),
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const header = component.find('header');
+    expect(header.hasClass('osdOverviewPageHeader--hasOverlap')).toBeFalsy();
+    expect(header.hasClass('osdOverviewPageHeader--noOverlap')).toBeTruthy();
   });
 
-  describe('in dark mode ', () => {
-    test('render logo as custom dark mode logo', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-          darkModeUrl: '/darkModeLogo',
-        },
-      };
-
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
-    });
+  it('renders with overlap', () => {
+    const props = {
+      ...mockProps(),
+      overlap: true,
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const header = component.find('header');
+    expect(header.hasClass('osdOverviewPageHeader--hasOverlap')).toBeTruthy();
+    expect(header.hasClass('osdOverviewPageHeader--noOverlap')).toBeFalsy();
+  });
+
+  it('renders without an icon by default', () => {
+    const props = {
+      ...mockProps(),
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const icons = component.find({ 'data-test-subj': 'osdOverviewPageHeaderLogo' });
+    expect(icons.length).toBe(0);
+  });
+
+  it('renders the mark icon when asked to', () => {
+    const props = {
+      ...mockProps(),
+      showIcon: true,
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const icons = component.find({ 'data-test-subj': 'osdOverviewPageHeaderLogo' });
+    expect(icons.length).toBe(1);
+    expect(icons.first().prop('type')).toEqual(props.logos.Mark.url);
+  });
+
+  it('uses the provided title in the header', () => {
+    const props = {
+      ...mockProps(),
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const head = component.find('h1');
+    expect(head.length).toBe(1);
+    expect(head.first().text()).toEqual(mockTitle);
+  });
+
+  it('renders with the toolbar by default', () => {
+    const props = {
+      ...mockProps(),
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const items = component.find('header > div > EuiFlexGroup > EuiFlexItem');
+    expect(items.length).toBe(2);
+
+    const buttons = component.find({ className: 'osdOverviewPageHeader__actionButton' });
+    // This also validates the order of the items
+    const btnAddData = buttons.at(0);
+    expect(btnAddData.prop('iconType')).toEqual('indexOpen');
+    expect(btnAddData.prop('href')).toEqual('/app/home#/tutorial_directory');
+
+    // Would contain only the "Add Data" button
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders with the toolbar when it is explicitly asked not to be hidden', () => {
+    const props = {
+      ...mockProps(),
+      hideToolbar: false,
+    };
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const items = component.find('header > div > EuiFlexGroup > EuiFlexItem');
+    expect(items.length).toBe(2);
+
+    const buttons = component.find({ className: 'osdOverviewPageHeader__actionButton' });
+    // This also validates the order of the items
+    const btnAddData = buttons.at(0);
+    expect(btnAddData.prop('iconType')).toEqual('indexOpen');
+    expect(btnAddData.prop('href')).toEqual('/app/home#/tutorial_directory');
+  });
+
+  it('renders without the toolbar when it is explicitly asked to be hidden', () => {
+    const props = {
+      ...mockProps(),
+      hideToolbar: true,
+    };
 
-    test('render logo as custom default mode logo', () => {
-      const branding = {
-        darkMode: false,
-        mark: {
-          defaultUrl: '/defaultModeLogo',
-        },
-      };
-
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    const items = component.find('header > div > EuiFlexGroup > EuiFlexItem');
+    expect(items.length).toBe(1);
+
+    const buttons = component.find({ className: 'osdOverviewPageHeader__actionButton' });
+    expect(buttons.length).toBe(0);
+  });
+});
+
+describe('OverviewPageHeader toolbar items - Management', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  const setupAndGetButton = (management: boolean, showManagementLink?: boolean) => {
+    // @ts-ignore
+    useOpenSearchDashboards.mockImplementation(() => ({
+      services: {
+        application: { capabilities: { navLinks: { management, dev_tools: true } } },
+        notifications: { toast: { addSuccess: jest.fn() } },
+      },
+    }));
+
+    const props = mockProps();
+    if (showManagementLink !== undefined) {
+      // @ts-ignore
+      props.showManagementLink = showManagementLink;
+    }
+
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
+
+    return component.find({
+      className: 'osdOverviewPageHeader__actionButton',
+      href: '/app/management',
     });
+  };
+
+  it('renders without management when the management plugin is disabled', () => {
+    const btnManagement = setupAndGetButton(false);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders without management when the management plugin is disabled and asked not to show', () => {
+    const btnManagement = setupAndGetButton(false, false);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders without management when the management plugin is disabled even if asked to show', () => {
+    const btnManagement = setupAndGetButton(false, true);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders without management when the management plugin is enabled', () => {
+    const btnManagement = setupAndGetButton(true);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders without management when the management plugin is enabled but asked not to show', () => {
+    const btnManagement = setupAndGetButton(true, false);
+    expect(btnManagement.length).toEqual(0);
+  });
+
+  it('renders with management when the management plugin is enabled and asked to show', () => {
+    const btnManagement = setupAndGetButton(true, true);
+    expect(btnManagement.length).toEqual(1);
+  });
+});
+
+describe('OverviewPageHeader toolbar items - DevTools', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  const setupAndGetButton = (devTools: boolean, showDevToolsLink?: boolean) => {
+    // @ts-ignore
+    useOpenSearchDashboards.mockImplementation(() => ({
+      services: {
+        application: { capabilities: { navLinks: { management: true, dev_tools: devTools } } },
+        notifications: { toast: { addSuccess: jest.fn() } },
+      },
+    }));
+
+    const props = mockProps();
+    if (showDevToolsLink !== undefined) {
+      // @ts-ignore
+      props.showDevToolsLink = showDevToolsLink;
+    }
 
-    test('render logo as original dark mode opensearch mark', () => {
-      const branding = {
-        darkMode: false,
-        mark: {},
-      };
+    const component = shallowWithIntl(<OverviewPageHeader {...props} />);
 
-      const component = shallowWithIntl(
-        <OverviewPageHeader addBasePath={addBasePathMock} title={mockTitle} branding={branding} />
-      );
-      expect(component).toMatchSnapshot();
+    return component.find({
+      className: 'osdOverviewPageHeader__actionButton',
+      href: '/app/dev_tools#/console',
     });
+  };
+
+  it('renders without dev_tools when the dev_tools plugin is disabled', () => {
+    const btnDevTools = setupAndGetButton(false);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders without dev_tools when the dev_tools plugin is disabled and asked not to show', () => {
+    const btnDevTools = setupAndGetButton(false, false);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders without dev_tools when the dev_tools plugin is disabled even if asked to show', () => {
+    const btnDevTools = setupAndGetButton(false, true);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders without dev_tools when the dev_tools plugin is enabled', () => {
+    const btnDevTools = setupAndGetButton(true);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders without dev_tools when the dev_tools plugin is enabled but asked not to show', () => {
+    const btnDevTools = setupAndGetButton(true, false);
+    expect(btnDevTools.length).toEqual(0);
+  });
+
+  it('renders with dev_tools when the dev_tools plugin is enabled and asked to show', () => {
+    const btnDevTools = setupAndGetButton(true, true);
+    expect(btnDevTools.length).toEqual(1);
   });
 });
diff --git a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
index 00273fcf993b..a636f7ecdb7d 100644
--- a/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/overview_page/overview_page_header/overview_page_header.tsx
@@ -38,7 +38,7 @@ import {
   IconType,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { CoreStart } from 'opensearch-dashboards/public';
+import { CoreStart, Logos } from 'opensearch-dashboards/public';
 import { RedirectAppLinks } from '../../app_links';
 import { useOpenSearchDashboards } from '../../context';
 import { ReactPluginBranding } from '../..';
@@ -47,24 +47,28 @@ import './index.scss';
 
 interface Props {
   hideToolbar?: boolean;
+  /** @deprecated use showIcon */
   iconType?: IconType;
+  showIcon?: boolean;
   overlap?: boolean;
   showDevToolsLink?: boolean;
   showManagementLink?: boolean;
   title: JSX.Element | string;
   addBasePath: (path: string) => string;
-  branding: ReactPluginBranding;
+  logos: Logos;
+  /** @deprecated use logos */
+  branding?: ReactPluginBranding;
 }
 
 export const OverviewPageHeader: FC<Props> = ({
   hideToolbar,
-  iconType,
+  showIcon = false,
   overlap,
   showDevToolsLink,
   showManagementLink,
   title,
   addBasePath,
-  branding,
+  logos,
 }) => {
   const {
     services: { application },
@@ -75,58 +79,6 @@ export const OverviewPageHeader: FC<Props> = ({
     dev_tools: isDevToolsEnabled,
   } = application.capabilities.navLinks;
 
-  const DEFAULT_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_default_mode.svg`;
-  const DARKMODE_OPENSEARCH_MARK = `${branding.assetFolderUrl}/opensearch_mark_dark_mode.svg`;
-
-  const darkMode = branding.darkMode;
-  const markDefault = branding.mark?.defaultUrl;
-  const markDarkMode = branding.mark?.darkModeUrl;
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * overview logo in default mode. In default mode, overview logo will
-   * proritize default mode mark URL. If it is invalid, default opensearch logo
-   * will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  const customOverviewLogoDefaultMode = () => {
-    return markDefault ?? DEFAULT_OPENSEARCH_MARK;
-  };
-
-  /**
-   * Use branding configurations to check which URL to use for rendering
-   * overview logo in dark mode. In dark mode, overview logo will render
-   * dark mode mark URL if valid. Otherwise, it will render the default
-   * mode mark URL if valid. If both dark mode mark URL and default mode mark
-   * URL are invalid, the default opensearch logo will be rendered.
-   *
-   * @returns a valid custom URL or undefined if no valid URL is provided
-   */
-  const customOverviewLogoDarkMode = () => {
-    return markDarkMode ?? markDefault ?? DARKMODE_OPENSEARCH_MARK;
-  };
-
-  /**
-   * Render custom overview logo for both default mode and dark mode
-   *
-   * @returns a valid custom loading logo URL, or undefined
-   */
-  const customOverviewLogo = () => {
-    return darkMode ? customOverviewLogoDarkMode() : customOverviewLogoDefaultMode();
-  };
-
-  /**
-   * Check if we render a custom overview logo or the default opensearch spinner.
-   * If customOverviewLogo() returns undefined(no valid custom URL is found), we
-   * render the default opensearch logo
-   *
-   * @returns a image component with custom logo URL, or the default opensearch logo
-   */
-  const renderBrandingEnabledOrDisabledLogo = (iconTypeInput?: IconType) => {
-    return customOverviewLogo() ?? iconTypeInput ?? '';
-  };
-
   return (
     <header
       className={`osdOverviewPageHeader ${
@@ -137,13 +89,13 @@ export const OverviewPageHeader: FC<Props> = ({
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="m" responsive={false}>
-              {iconType && (
+              {showIcon && (
                 <EuiFlexItem grow={false}>
                   <EuiIcon
                     size="xxl"
-                    type={renderBrandingEnabledOrDisabledLogo(iconType)}
+                    type={logos.Mark.url}
                     data-test-subj={`osdOverviewPageHeaderLogo`}
-                    data-test-logo={renderBrandingEnabledOrDisabledLogo(iconType)}
+                    data-test-logo={logos.Mark.url}
                   />
                 </EuiFlexItem>
               )}