diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.test.tsx
new file mode 100644
index 000000000..861761d21
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewComponent.test.tsx
@@ -0,0 +1,45 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { collection } from "../TestUtils";
+import { MaterializedViewComponent } from "./MaterializedViewComponent";
+import { MaterializedViewSourceComponent } from "./MaterializedViewSourceComponent";
+import { MaterializedViewTargetComponent } from "./MaterializedViewTargetComponent";
+
+describe("MaterializedViewComponent", () => {
+  let testCollection: typeof collection;
+
+  beforeEach(() => {
+    testCollection = { ...collection };
+  });
+
+  it("renders only the source component when materializedViewDefinition is missing", () => {
+    testCollection.materializedViews([
+      { id: "view1", _rid: "rid1" },
+      { id: "view2", _rid: "rid2" },
+    ]);
+    testCollection.materializedViewDefinition(null);
+    const wrapper = shallow(<MaterializedViewComponent collection={testCollection} />);
+    expect(wrapper.find(MaterializedViewSourceComponent).exists()).toBe(true);
+    expect(wrapper.find(MaterializedViewTargetComponent).exists()).toBe(false);
+  });
+
+  it("renders only the target component when materializedViews is missing", () => {
+    testCollection.materializedViews(null);
+    testCollection.materializedViewDefinition({
+      definition: "SELECT * FROM c WHERE c.id = 1",
+      sourceCollectionId: "source1",
+      sourceCollectionRid: "rid123",
+    });
+    const wrapper = shallow(<MaterializedViewComponent collection={testCollection} />);
+    expect(wrapper.find(MaterializedViewSourceComponent).exists()).toBe(false);
+    expect(wrapper.find(MaterializedViewTargetComponent).exists()).toBe(true);
+  });
+
+  it("renders neither component when both are missing", () => {
+    testCollection.materializedViews(null);
+    testCollection.materializedViewDefinition(null);
+    const wrapper = shallow(<MaterializedViewComponent collection={testCollection} />);
+    expect(wrapper.find(MaterializedViewSourceComponent).exists()).toBe(false);
+    expect(wrapper.find(MaterializedViewTargetComponent).exists()).toBe(false);
+  });
+});
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.test.tsx
new file mode 100644
index 000000000..ac8dda2c2
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewSourceComponent.test.tsx
@@ -0,0 +1,39 @@
+import { PrimaryButton } from "@fluentui/react";
+import { shallow } from "enzyme";
+import React from "react";
+import { collection } from "../TestUtils";
+import {
+  MaterializedViewSourceComponent,
+  MaterializedViewSourceComponentProps,
+} from "./MaterializedViewSourceComponent";
+
+describe("MaterializedViewSourceComponent", () => {
+  const baseProps: MaterializedViewSourceComponentProps = {
+    collection: {
+      ...collection,
+      materializedViews: jest.fn(() => collection.materializedViews()),
+    },
+  };
+
+  it("renders without crashing", () => {
+    const wrapper = shallow(<MaterializedViewSourceComponent {...baseProps} />);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("renders the PrimaryButton", () => {
+    const wrapper = shallow(<MaterializedViewSourceComponent {...baseProps} />);
+    expect(wrapper.find(PrimaryButton).exists()).toBe(true);
+  });
+
+  it("updates when new materialized views are provided", () => {
+    const wrapper = shallow(<MaterializedViewSourceComponent {...baseProps} />);
+
+    // Simulating an update by modifying the observable directly
+    collection.materializedViews([{ id: "view3", _rid: "rid3" }]);
+
+    wrapper.setProps({ collection: { ...collection } });
+    wrapper.update();
+
+    expect(wrapper.find(PrimaryButton).exists()).toBe(true);
+  });
+});
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.test.tsx
new file mode 100644
index 000000000..1a6e3cab8
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MaterializedViewTargetComponent.test.tsx
@@ -0,0 +1,31 @@
+import { Text } from "@fluentui/react";
+import { shallow } from "enzyme";
+import React from "react";
+import { collection } from "../TestUtils";
+import { MaterializedViewTargetComponent } from "./MaterializedViewTargetComponent";
+
+describe("MaterializedViewTargetComponent", () => {
+  let testCollection: any;
+
+  beforeEach(() => {
+    testCollection = {
+      ...collection,
+      materializedViewDefinition: collection.materializedViewDefinition,
+    };
+  });
+
+  it("renders without crashing", () => {
+    const wrapper = shallow(<MaterializedViewTargetComponent collection={testCollection} />);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it("displays the source container ID", () => {
+    const wrapper = shallow(<MaterializedViewTargetComponent collection={testCollection} />);
+    expect(wrapper.find(Text).at(2).dive().text()).toBe("source1");
+  });
+
+  it("displays the materialized view definition", () => {
+    const wrapper = shallow(<MaterializedViewTargetComponent collection={testCollection} />);
+    expect(wrapper.find(Text).at(4).dive().text()).toBe("SELECT * FROM c WHERE c.id = 1");
+  });
+});
diff --git a/src/Explorer/Controls/Settings/TestUtils.tsx b/src/Explorer/Controls/Settings/TestUtils.tsx
index 10a8d4e82..7427da647 100644
--- a/src/Explorer/Controls/Settings/TestUtils.tsx
+++ b/src/Explorer/Controls/Settings/TestUtils.tsx
@@ -50,6 +50,15 @@ export const collection = {
   materializedViewDefinition: ko.observable<DataModels.MaterializedViewDefinition>({} as DataModels.MaterializedViewDefinition),
   vectorEmbeddingPolicy: ko.observable<DataModels.VectorEmbeddingPolicy>({} as DataModels.VectorEmbeddingPolicy),
   fullTextPolicy: ko.observable<DataModels.FullTextPolicy>({} as DataModels.FullTextPolicy),
+  materializedViews: ko.observable<DataModels.MaterializedView[]>([
+    { id: "view1", _rid: "rid1" },
+    { id: "view2", _rid: "rid2" },
+  ]),
+  materializedViewDefinition: ko.observable<DataModels.MaterializedViewDefinition>({
+    definition: "SELECT * FROM c WHERE c.id = 1",
+    sourceCollectionId: "source1",
+    sourceCollectionRid: "rid123",
+  }),
   readSettings: () => {
     return;
   },