diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000000..9e26dfeeb6e6
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/layouts/config.js b/src/layouts/config.js
index 1063c6e40e44..cbe431776ca3 100644
--- a/src/layouts/config.js
+++ b/src/layouts/config.js
@@ -378,7 +378,9 @@ export const nativeMenuItems = [
         path: "/email/spamfilter",
         items: [
           { title: "Spamfilter", path: "/email/spamfilter/list-spamfilter" },
-          { title: "Templates", path: "/email/spamfilter/list-templates" },
+          { title: "Spamfilter templates", path: "/email/spamfilter/list-templates" },
+          { title: "Connection filter", path: "/email/connectionfilter/list-connectionfilter" },
+          { title: "Connection filter templates", path: "/email/connectionfilter/list-templates" },
         ],
       },
       {
diff --git a/src/pages/email/connectionfilter/deploy/index.js b/src/pages/email/connectionfilter/deploy/index.js
new file mode 100644
index 000000000000..92cbabc77ae2
--- /dev/null
+++ b/src/pages/email/connectionfilter/deploy/index.js
@@ -0,0 +1,17 @@
+
+import { Layout as DashboardLayout } from "/src/layouts/index.js";
+
+const Page = () => {
+  const pageTitle = "Apply Spamfilter Template";
+
+  return (
+    <div>
+      <h1>{pageTitle}</h1>
+      <p>This is a placeholder page for the apply spamfilter template section.</p>
+    </div>
+  );
+};
+
+Page.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;
+
+export default Page;
diff --git a/src/pages/email/connectionfilter/list-connectionfilter/add.jsx b/src/pages/email/connectionfilter/list-connectionfilter/add.jsx
new file mode 100644
index 000000000000..c2e2c9a5785f
--- /dev/null
+++ b/src/pages/email/connectionfilter/list-connectionfilter/add.jsx
@@ -0,0 +1,87 @@
+import React, { useEffect } from "react";
+import { Grid, Divider } from "@mui/material";
+import { useForm, useWatch } from "react-hook-form";
+import { Layout as DashboardLayout } from "/src/layouts/index.js";
+import CippFormPage from "/src/components/CippFormPages/CippFormPage";
+import CippFormComponent from "/src/components/CippComponents/CippFormComponent";
+import { CippFormTenantSelector } from "/src/components/CippComponents/CippFormTenantSelector";
+
+const AddPolicy = () => {
+  const formControl = useForm({
+    mode: "onChange",
+    defaultValues: {
+      selectedTenants: [],
+      TemplateList: null,
+      PowerShellCommand: "",
+    },
+  });
+
+  const templateListVal = useWatch({ control: formControl.control, name: "TemplateList" });
+
+  useEffect(() => {
+    if (templateListVal?.value) {
+      formControl.setValue("PowerShellCommand", JSON.stringify(templateListVal?.value));
+    }
+  }, [templateListVal, formControl]);
+
+  return (
+    <CippFormPage
+      formControl={formControl}
+      queryKey="AddConnectionFilter"
+      title="Add Connection Filter"
+      backButtonTitle="Connection Filter Overview"
+      postUrl="/api/AddConnectionFilter"
+    >
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <CippFormTenantSelector
+            label="Select Tenants"
+            formControl={formControl}
+            name="selectedTenants"
+            type="multiple"
+            allTenants={true}
+            validators={{ required: "At least one tenant must be selected" }}
+          />
+        </Grid>
+
+        <Divider sx={{ my: 2, width: "100%" }} />
+
+        {/* TemplateList */}
+        <Grid item xs={12} md={12}>
+          <CippFormComponent
+            type="autoComplete"
+            label="Select a template (optional)"
+            name="TemplateList"
+            formControl={formControl}
+            multiple={false}
+            api={{
+              queryKey: `TemplateListConnectionFilter`,
+              labelField: "name",
+              valueField: (option) => option,
+              url: "/api/ListConnectionFilterTemplates",
+            }}
+            placeholder="Select a template or enter PowerShell JSON manually"
+          />
+        </Grid>
+
+        <Divider sx={{ my: 2, width: "100%" }} />
+
+        <Grid item xs={12}>
+          <CippFormComponent
+            type="textField"
+            label="Parameters (JSON)"
+            name="PowerShellCommand"
+            formControl={formControl}
+            multiline
+            rows={6}
+            validators={{ required: "Please enter the PowerShell parameters as JSON." }}
+          />
+        </Grid>
+      </Grid>
+    </CippFormPage>
+  );
+};
+
+AddPolicy.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;
+
+export default AddPolicy;
diff --git a/src/pages/email/connectionfilter/list-connectionfilter/index.js b/src/pages/email/connectionfilter/list-connectionfilter/index.js
new file mode 100644
index 000000000000..cd6e9482ada8
--- /dev/null
+++ b/src/pages/email/connectionfilter/list-connectionfilter/index.js
@@ -0,0 +1,62 @@
+import { Layout as DashboardLayout } from "/src/layouts/index.js";
+import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
+import { Button } from "@mui/material";
+import Link from "next/link";
+
+const Page = () => {
+  const pageTitle = "Connection Filters";
+
+  const actions = [
+    {
+      label: "Create template based on rule",
+      type: "POST",
+      url: "/api/AddConnectionfilterTemplate",
+      dataFunction: (data) => {
+        return { ...data };
+      },
+      confirmText: "Are you sure you want to create a template based on this rule?",
+    },
+  ];
+
+  const offCanvas = {
+    extendedInfoFields: [
+      "DistinguishedName",
+      "DirectoryBasedEdgeBlockMode",
+      "ExchangeVersion",
+      "ExchangeObjectId",
+      "OrganizationalUnitRoot",
+      "WhenCreated",
+      "WhenChanged",
+      "Guid",
+    ],
+    actions: actions,
+  };
+
+  const simpleColumns = [
+    "Name",
+    "IsDefault",
+    "IPAllowList",
+    "IPBlockList",
+    "EnableSafeList",
+  ];
+
+  return (
+    <CippTablePage
+      title={pageTitle}
+      apiUrl="/api/ListConnectionFilter"
+      actions={actions}
+      offCanvas={offCanvas}
+      simpleColumns={simpleColumns}
+      cardButton={
+        <>
+          <Button component={Link} href="/email/connectionfilter/list-connectionfilter/add">
+            Deploy ConnectionFilter
+          </Button>
+        </>
+      }
+    />
+  );
+};
+
+Page.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;
+export default Page;
diff --git a/src/pages/email/connectionfilter/list-templates/index.js b/src/pages/email/connectionfilter/list-templates/index.js
new file mode 100644
index 000000000000..acd7b58f0ac7
--- /dev/null
+++ b/src/pages/email/connectionfilter/list-templates/index.js
@@ -0,0 +1,59 @@
+import { Layout as DashboardLayout } from "/src/layouts/index.js";
+import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
+import { EyeIcon, TrashIcon } from "@heroicons/react/24/outline";
+
+const Page = () => {
+  const pageTitle = "Connection filter Templates";
+
+  const actions = [
+    {
+      label: "View Template",
+      icon: <EyeIcon />, // Placeholder for the view icon
+      color: "success",
+      offCanvas: true,
+    },
+    {
+      label: "Delete Template",
+      type: "POST",
+      url: "/api/RemoveConnectionfilterTemplate",
+      data: { ID: "GUID" },
+      confirmText: "Do you want to delete the template?",
+      icon: <TrashIcon />, // Placeholder for the delete icon
+      color: "danger",
+    },
+  ];
+
+  const offCanvas = {
+    extendedInfoFields: [
+      "name",
+      "IsDefault",
+      "IPAllowList",
+      "IPBlockList",
+      "EnableSafeList",
+      "GUID",
+    ],
+    actions: actions,
+  };
+
+  const simpleColumns = [
+    "name",
+    "IsDefault",
+    "IPAllowList",
+    "IPBlockList",
+    "EnableSafeList",
+    "GUID",
+  ];
+
+  return (
+    <CippTablePage
+      title={pageTitle}
+      apiUrl="/api/ListConnectionfilterTemplates"
+      actions={actions}
+      offCanvas={offCanvas}
+      simpleColumns={simpleColumns}
+    />
+  );
+};
+
+Page.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;
+export default Page;