diff --git a/.gitignore b/.gitignore
index 4d29575..fc81720 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 032bf20..815f23f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added:
+
+- RS-47: New view in the console to manage replications, [PR-62](https://github.com/reductstore/web-console/pull/62)
+
 ## [1.4.1] - 2024-20-01
 
 ### Fixed:
diff --git a/package-lock.json b/package-lock.json
index 2ddb000..e72ef6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.4",
         "react-scripts": "5.0.1",
-        "reduct-js": "^1.7.1",
+        "reduct-js": "1.8",
         "stream-browserify": "^3.0.0",
         "ts-jest": "^27.1.5",
         "typescript": "^4.9.5",
@@ -16143,9 +16143,9 @@
       }
     },
     "node_modules/reduct-js": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/reduct-js/-/reduct-js-1.7.1.tgz",
-      "integrity": "sha512-55ExwOHC1bpp9yQlMGJiw8T0u0GWHwCxgIq+D/OGKuMpN/5UgUyxPPRYGIJ/MoMAwTtvWHSWWRIyPpmTJfztxQ==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/reduct-js/-/reduct-js-1.8.0.tgz",
+      "integrity": "sha512-h/oQ0tpMRkgOPveP1JV96dDU6EmB8vjo6y3q21ggsZ31r1DIQQgSjeOUO4bcuPf1bLrEPix4Ht7PkentAxyKxw==",
       "dev": true,
       "dependencies": {
         "axios": "^0.27.2",
@@ -30946,9 +30946,9 @@
       }
     },
     "reduct-js": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/reduct-js/-/reduct-js-1.7.1.tgz",
-      "integrity": "sha512-55ExwOHC1bpp9yQlMGJiw8T0u0GWHwCxgIq+D/OGKuMpN/5UgUyxPPRYGIJ/MoMAwTtvWHSWWRIyPpmTJfztxQ==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/reduct-js/-/reduct-js-1.8.0.tgz",
+      "integrity": "sha512-h/oQ0tpMRkgOPveP1JV96dDU6EmB8vjo6y3q21ggsZ31r1DIQQgSjeOUO4bcuPf1bLrEPix4Ht7PkentAxyKxw==",
       "dev": true,
       "requires": {
         "axios": "^0.27.2",
diff --git a/package.json b/package.json
index 1052b97..37d381c 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "antd": "^4.24.14",
     "async-wait-until": "^2.0.12",
     "babel-jest": "^27.5.1",
+    "buffer": "^6.0.3",
     "enzyme": "^3.11.0",
     "humanize-duration": "^3.30.0",
     "jest": "^27.5.1",
@@ -28,12 +29,11 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.4",
     "react-scripts": "5.0.1",
-    "reduct-js": "^1.7.1",
+    "reduct-js": "1.8",
+    "stream-browserify": "^3.0.0",
     "ts-jest": "^27.1.5",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "buffer": "^6.0.3",
-    "stream-browserify": "^3.0.0"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "REACT_APP_VERSION=$npm_package_version react-app-rewired start",
@@ -42,6 +42,7 @@
     "eject": "react-app-rewired eject",
     "lint": "eslint . --ext .ts"
   },
+  "proxy": "https://play.reduct.store",
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -60,4 +61,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..486328b
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.png b/public/favicon.png
deleted file mode 100644
index 5c33989..0000000
Binary files a/public/favicon.png and /dev/null differ
diff --git a/public/index.html b/public/index.html
index 5b9ccc7..11a0182 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/App.tsx b/src/App.tsx
index f0482b3..6a3e1f7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,7 @@ import "antd/dist/antd.variable.min.css";
 import "./App.css";
 import {IBackendAPI} from "./BackendAPI";
 import {Routes} from "./Components/Routes";
-import {BorderOuterOutlined, DatabaseOutlined, LockOutlined, LogoutOutlined} from "@ant-design/icons";
+import {BorderOuterOutlined, DatabaseOutlined, LockOutlined, LogoutOutlined, ShareAltOutlined} from "@ant-design/icons";
 import {TokenPermissions} from "reduct-js";
 
 ConfigProvider.config({
@@ -60,33 +60,35 @@ export default class App extends React.Component<Props, State> {
                 <Layout.Sider className="Sider">
                     <Menu className="MenuItem" selectable={false} triggerSubMenuAction="click">
                         <a href="https://www.reduct.store" title="https://www.reduct.store">
-                            <Image src={logo} preview={false}/>
+                            <Image src={logo} preview={false} />
                         </a>
-
-                        <Divider/>
-                        {permissions ? <>
-                                <Menu.Item icon={<BorderOuterOutlined/>} onClick={() => history.push("/dashboard")}>
+                        <Divider />
+                        {permissions &&
+                            <>
+                                <Menu.Item icon={<BorderOuterOutlined />} onClick={() => history.push("/dashboard")}>
                                     Dashboard
                                 </Menu.Item>
-                                <Menu.Item id="Buckets" icon={<DatabaseOutlined/>}
-                                           onClick={() => history.push("/buckets")}>
+                                <Menu.Item id="Buckets" icon={<DatabaseOutlined />}
+                                    onClick={() => history.push("/buckets")}>
                                     Buckets
                                 </Menu.Item>
-
-                                {permissions.fullAccess ?
-                                    <Menu.Item id="Security" icon={<LockOutlined/>}
-                                               onClick={() => history.push("/tokens")}>
-                                        Security
-                                    </Menu.Item>
-                                    : null}
-                                <Divider style={{borderColor: "white"}}/>
-
-                                <Menu.Item onClick={onLogout} icon={<LogoutOutlined/>}>
+                                {permissions.fullAccess &&
+                                    <>
+                                        <Menu.Item id="Replications" icon={<ShareAltOutlined />}
+                                            onClick={() => history.push("/replications")}>
+                                            Replications
+                                        </Menu.Item>
+                                        <Menu.Item id="Security" icon={<LockOutlined />}
+                                            onClick={() => history.push("/tokens")}>
+                                            Security
+                                        </Menu.Item>
+                                    </>
+                                }
+                                <Divider style={{borderColor: "white"}} />
+                                <Menu.Item onClick={onLogout} icon={<LogoutOutlined />}>
                                     Logout
                                 </Menu.Item>
-
                             </>
-                            : <div/>
                         }
                     </Menu>
                     <div className="Meta">
@@ -99,7 +101,7 @@ export default class App extends React.Component<Props, State> {
                 <Layout>
                     <Layout.Content>
                         <Routes {...this.props} permissions={this.state.permissions}
-                                onLogin={onLogin}/>
+                            onLogin={onLogin} />
                     </Layout.Content>
                 </Layout>
             </Layout>
diff --git a/src/Components/RemoveConfirmationByName.tsx b/src/Components/RemoveConfirmationByName.tsx
index 48b3d06..93c6f33 100644
--- a/src/Components/RemoveConfirmationByName.tsx
+++ b/src/Components/RemoveConfirmationByName.tsx
@@ -22,20 +22,20 @@ export default function RemoveConfirmationByName(props: Readonly<Props>) {
     };
 
     return (<Modal open={confirmRemove} onOk={() => {
-            props.onRemoved();
-            setConfirmRemove(false);
-        }} onCancel={props.onCanceled} closable={false}
-                   title={`Remove ${props.resourceType} "${props.name}"?`}
-                   okText="Remove"
-                   confirmLoading={!confirmName}
-                   okType="danger">
-            <p>
-                For confirmation type <b>{props.name}</b>
-            </p>
-            <Form.Item name="confirm">
-                <Input onChange={(e) => checkName(e.target.value)}></Input>
-            </Form.Item>
-        </Modal>
-    )
-        ;
+        props.onRemoved();
+        setConfirmRemove(false);
+    }} onCancel={props.onCanceled} closable={false}
+        title={`Remove ${props.resourceType} "${props.name}"?`}
+        okText="Remove"
+        confirmLoading={!confirmName}
+        okType="danger"
+        data-testid="delete-modal">
+        <p>
+            For confirmation type <b>{props.name}</b>
+        </p>
+        <Form.Item name="confirm">
+            <Input onChange={(e) => checkName(e.target.value)} data-testid="confirm-input" ></Input>
+        </Form.Item>
+    </Modal>
+    );
 }
diff --git a/src/Components/Replication/CreatOrUpdate.test.tsx b/src/Components/Replication/CreatOrUpdate.test.tsx
new file mode 100644
index 0000000..d02a7d7
--- /dev/null
+++ b/src/Components/Replication/CreatOrUpdate.test.tsx
@@ -0,0 +1,168 @@
+import React from "react";
+import {ReactWrapper, mount} from "enzyme";
+import {MemoryRouter} from "react-router-dom";
+
+import {Client, ReplicationInfo, ReplicationSettings} from "reduct-js";
+import {mockJSDOM, waitUntilFind} from "../../Helpers/TestHelpers";
+import CreateOrUpdate from "./CreateOrUpdate";
+import {Diagnostics} from "reduct-js/lib/cjs/messages/Diagnostics";
+
+describe("Replication::CreateOrUpdate", () => {
+  const client = new Client("dummyURL");
+  let wrapper: ReactWrapper;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockJSDOM();
+
+    const mockReplicationInfo = ReplicationInfo.parse(
+      {
+        name: "TestReplication",
+        is_active: true,
+        is_provisioned: true,
+        pending_records: BigInt(100),
+      }
+    );
+
+    const mockReplicationSettings = ReplicationSettings.parse(
+      {
+        src_bucket: "Bucket1",
+        dst_bucket: "destinationBucket",
+        dst_host: "destinationHost",
+        dst_token: "destinationToken",
+        entries: ["entry1", "entry2"],
+        include: {"label1": "value1"},
+        exclude: {"label2": "value2"},
+      }
+    );
+
+    const mockDiagnostics = Diagnostics.parse(
+      {
+        hourly: {
+          ok: BigInt(1000),
+          errored: BigInt(5),
+          errors: {
+            0: {
+              count: 5,
+              last_message: "Error connecting to source bucket"
+            },
+          },
+        },
+      }
+    );
+
+    client.getReplication = jest.fn().mockResolvedValue({
+      info: mockReplicationInfo,
+      settings: mockReplicationSettings,
+      diagnostics: mockDiagnostics,
+    });
+
+    client.updateReplication = jest.fn().mockResolvedValue(undefined);
+
+    client.createReplication = jest.fn().mockResolvedValue(undefined);
+
+    client.getBucket = jest.fn().mockResolvedValue({
+      getEntryList: jest.fn().mockResolvedValue([
+        {name: "entry1"},
+        {name: "entry2"},
+      ]),
+    });
+
+    wrapper = mount(
+      <MemoryRouter>
+        <CreateOrUpdate
+          client={client}
+          onCreated={() => console.log("")}
+          sourceBuckets={["Bucket1", "Bucket2"]}
+          replicationName={"TestReplication"}
+          readOnly={false}
+        />
+      </MemoryRouter>
+    );
+  });
+
+  afterEach(() => {
+    if (wrapper && wrapper.length) {
+      wrapper.unmount();
+    }
+  });
+
+  it("renders without crashing", () => {
+    expect(wrapper.find("form").exists()).toBeTruthy();
+  });
+
+  it("shows a form with all fields", () => {
+    expect(wrapper.find({name: "name"}).exists()).toBeTruthy();
+    expect(wrapper.find({name: "srcBucket"}).exists()).toBeTruthy();
+    expect(wrapper.find({name: "dstBucket"}).exists()).toBeTruthy();
+    expect(wrapper.find({name: "dstHost"}).exists()).toBeTruthy();
+    expect(wrapper.find({name: "dstToken"}).exists()).toBeTruthy();
+    expect(wrapper.find({name: "entries"}).exists()).toBeTruthy();
+    expect(wrapper.find({name: "recordSettings"}).exists()).toBeTruthy();
+  });
+
+  it("shows the replication name if it is provided", () => {
+    expect(wrapper.find({name: "name"}).find("input").prop("value")).toEqual("TestReplication");
+  });
+
+  it("shows the selected source bucket if it is provided", async () => {
+    await waitUntilFind(wrapper, "Select[name='srcBucket']");
+    const selectedOptionText = wrapper.find({name: "srcBucket"}).find(".ant-select-selection-item").text();
+    expect(selectedOptionText).toEqual("Bucket1");
+  });
+
+  it("shows the destination bucket if it is provided", async () => {
+    await waitUntilFind(wrapper, {name: "dstBucket"});
+    expect(wrapper.find({name: "dstBucket"}).find("input").prop("value")).toEqual("destinationBucket");
+  });
+
+  it("shows the destination host if it is provided", async () => {
+    await waitUntilFind(wrapper, {name: "dstHost"});
+    expect(wrapper.find({name: "dstHost"}).find("input").prop("value")).toEqual("destinationHost");
+  });
+
+  it("shows the selected entries if they are provided", async () => {
+    await waitUntilFind(wrapper, "Select[name='entries']");
+    const selectedOptionText = wrapper.find({name: "entries"}).find(".ant-select-selection-item");
+    expect(selectedOptionText.at(0).text()).toEqual("entry1");
+    expect(selectedOptionText.at(1).text()).toEqual("entry2");
+  });
+
+  it("disables record settings inputs and radios in read-only mode", () => {
+    wrapper = mount(
+      <MemoryRouter>
+        <CreateOrUpdate
+          client={client}
+          onCreated={() => console.log("")}
+          sourceBuckets={["Bucket1", "Bucket2"]}
+          replicationName={"TestReplication"}
+          readOnly={true}
+        />
+      </MemoryRouter>
+    );
+
+    // Find all Radio.Group and Input components within the record settings Form.List
+    const recordSettingsRadios = wrapper.find("Form.List").find("Radio.Group");
+    const recordSettingsInputs = wrapper.find("Form.List").find("Input");
+
+    // Check that each Radio.Group is disabled
+    recordSettingsRadios.forEach(radioGroup => {
+      expect(radioGroup.prop("disabled")).toBe(true);
+    });
+
+    // Check that each Input (for both key and value within each record setting) is disabled
+    recordSettingsInputs.forEach(input => {
+      expect(input.prop("disabled")).toBe(true);
+    });
+
+    // Check that the delete buttons for each record setting are disabled
+    const deleteRuleButtons = wrapper.find("Form.List").find("Button[type='primary']").find("DeleteOutlined");
+    deleteRuleButtons.forEach(deleteButton => {
+      expect(deleteButton.prop("disabled")).toBe(true);
+    });
+
+    // Check that the Add Rule button is disabled
+    const button = wrapper.find("Button").filterWhere(node => node.text() === "Update Replication");
+    expect(button.prop("disabled")).toBe(true);
+  });
+});
diff --git a/src/Components/Replication/CreateOrUpdate.tsx b/src/Components/Replication/CreateOrUpdate.tsx
new file mode 100644
index 0000000..fb5d7ac
--- /dev/null
+++ b/src/Components/Replication/CreateOrUpdate.tsx
@@ -0,0 +1,334 @@
+import React from "react";
+import {APIError, Client, FullReplicationInfo, ReplicationSettings} from "reduct-js"; // Adjust import paths as necessary
+import {Alert, Button, Form, Input, Radio, Select, Tooltip} from "antd";
+import {DeleteOutlined, InfoCircleOutlined} from "@ant-design/icons";
+
+interface Props {
+    client: Client;
+    onCreated: () => void;
+    sourceBuckets: string[];
+    replicationName?: string;
+    readOnly?: boolean;
+}
+
+interface State {
+    srcBucket: string;
+    dstBucket: string;
+    dstHost: string;
+    dstToken: string;
+    entries: string[];
+    include: Record<string, string>;
+    exclude: Record<string, string>;
+    error?: string;
+    dataFetched: boolean;
+}
+
+enum FilterType {
+    Include = "include",
+    Exclude = "exclude"
+}
+
+interface FormValues {
+    name: string;
+    srcBucket: string;
+    dstBucket: string;
+    dstHost: string;
+    dstToken: string;
+    entries: string[];
+    recordSettings: Array<{
+        action: FilterType;
+        key: string;
+        value: string;
+    }>;
+}
+
+/**
+ * A form to create or update a replication
+ */
+export default class CreateOrUpdateReplication extends React.Component<Props, State> {
+    state: State = {
+        srcBucket: "",
+        dstBucket: "",
+        dstHost: "",
+        dstToken: "",
+        entries: [],
+        include: {},
+        exclude: {},
+        dataFetched: false,
+    };
+
+    /**
+     * Called when Create/Update button is pressed
+     * @param values
+     */
+    onFinish = async (values: FormValues) => {
+        const {replicationName, client, onCreated} = this.props;
+        const {srcBucket, dstBucket, dstHost, dstToken, entries} = values;
+        const include: Record<string, string> = {};
+        const exclude: Record<string, string> = {};
+        if (values.recordSettings) {
+            for (const recordSetting of values.recordSettings) {
+                if (recordSetting.action === FilterType.Include) {
+                    include[recordSetting.key] = recordSetting.value;
+                } else {
+                    exclude[recordSetting.key] = recordSetting.value;
+                }
+            }
+        }
+        const replicationSettings: ReplicationSettings = {
+            srcBucket,
+            dstBucket,
+            dstHost,
+            dstToken,
+            entries,
+            include,
+            exclude,
+        };
+        try {
+            if (replicationName) {
+                await client.updateReplication(replicationName, replicationSettings);
+            } else {
+                await client.createReplication(values.name, replicationSettings);
+            }
+            onCreated();
+        } catch (err) {
+            this.handleError(err);
+        }
+    };
+
+    async componentDidMount() {
+        const {replicationName, client} = this.props;
+        if (replicationName) {
+            try {
+                const replication: FullReplicationInfo = await client.getReplication(replicationName);
+                const {srcBucket, dstBucket, dstHost, dstToken, entries, include, exclude} = replication.settings;
+                this.setState({
+                    srcBucket, dstBucket, dstHost, dstToken, entries, include, exclude,
+                    dataFetched: true
+                });
+
+
+            } catch (err) {
+                this.handleError(err);
+            }
+        }
+    }
+
+    handleSourceBucketChange = async (selectedBucket: string) => {
+        try {
+            const {client} = this.props;
+            const bucket = await client.getBucket(selectedBucket);
+            const entries = await bucket.getEntryList();
+
+            this.setState({entries: entries.map(entry => entry.name)});
+        } catch (err) {
+            this.handleError(err);
+        }
+    };
+
+    handleError = (err: unknown) => {
+        if (err instanceof APIError) {
+            this.setState({error: err.message});
+        } else {
+            console.error("Unexpected error: ", err);
+        }
+    };
+
+    getInitialFormValues = () => {
+        const {srcBucket, dstBucket, dstHost, entries, include, exclude} = this.state;
+        const {replicationName: name} = this.props;
+        const recordSettings = [
+            ...Object.keys(include).map(key => ({action: FilterType.Include, key, value: include[key]})),
+            ...Object.keys(exclude).map(key => ({action: FilterType.Exclude, key, value: exclude[key]})),
+        ];
+        return {
+            name,
+            srcBucket,
+            dstBucket,
+            dstHost,
+            entries,
+            recordSettings,
+        };
+    };
+
+    render() {
+        const {error, dataFetched} = this.state;
+        const {replicationName, readOnly, sourceBuckets} = this.props;
+
+        return (
+            <>
+                {error && <Alert message={error} type="error" closable onClose={() => this.setState({error: undefined})} />}
+                <Form
+                    key={dataFetched ? "loaded" : "loading"}
+                    name="replicationForm"
+                    onFinish={this.onFinish}
+                    layout="vertical"
+                    initialValues={this.getInitialFormValues()}
+                >
+                    <Form.Item
+                        label="Replication Name"
+                        name="name"
+                        rules={[{required: true, message: "Please input the replication name!"}]}
+                    >
+                        <Input disabled={readOnly} />
+                    </Form.Item>
+
+                    <Form.Item
+                        label={
+                            <span>
+                                Source Bucket&nbsp;
+                                <Tooltip title="Select the bucket from which data will be replicated.">
+                                    <InfoCircleOutlined />
+                                </Tooltip>
+                            </span>
+                        }
+                        name="srcBucket"
+                        rules={[{required: true, message: "Please select the source bucket!"}]}
+                    >
+                        <Select
+                            disabled={readOnly}
+                            placeholder="Select a source bucket"
+                            onChange={this.handleSourceBucketChange}
+                        >
+                            {sourceBuckets?.map(bucket => (
+                                <Select.Option key={bucket} value={bucket}>{bucket}</Select.Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label={
+                            <span>
+                                Destination Bucket&nbsp;
+                                <Tooltip title="Select the bucket to which data will be replicated.">
+                                    <InfoCircleOutlined />
+                                </Tooltip>
+                            </span>
+                        }
+                        name="dstBucket"
+                        rules={[{required: true, message: "Please input the destination bucket name!"}]}
+                    >
+                        <Input disabled={readOnly} />
+                    </Form.Item>
+
+                    <Form.Item
+                        label={
+                            <span>
+                                Destination Host&nbsp;
+                                <Tooltip title="Enter the URL of the destination host.">
+                                    <InfoCircleOutlined />
+                                </Tooltip>
+                            </span>
+                        }
+                        name="dstHost"
+                        rules={[{required: true, message: "Please input the destination host URL!"}]}
+                    >
+                        <Input disabled={readOnly} />
+                    </Form.Item>
+
+                    <Form.Item
+                        label={
+                            <span>
+                                Destination Token&nbsp;
+                                <Tooltip title="Enter the token with write access to the destination bucket.">
+                                    <InfoCircleOutlined />
+                                </Tooltip>
+                            </span>
+                        }
+                        name="dstToken"
+                    >
+                        <Input disabled={readOnly} />
+                    </Form.Item>
+
+                    <Form.Item
+                        label={
+                            <span>
+                                Filter Entries&nbsp;
+                                <Tooltip title="Select the entries to be replicated. If empty, all entries are replicated.">
+                                    <InfoCircleOutlined />
+                                </Tooltip>
+                            </span>
+                        }
+                        name="entries">
+                        <Select mode="tags" style={{width: "100%"}} placeholder="Add entries" disabled={readOnly}>
+                            {this.state.entries.map((entry) => (
+                                <Select.Option key={entry} value={entry}>{entry}</Select.Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label={
+                            <span>
+                                Filter Records&nbsp;
+                                <Tooltip title="Set the labels a record should include/exclude to be replicated. If empty, all records are replicated.">
+                                    <InfoCircleOutlined />
+                                </Tooltip>
+                            </span>
+                        }
+                    >
+                        <Form.List name="recordSettings">
+                            {(fields, {add, remove}) => (
+                                <>
+                                    {fields.map((field, index) => (
+                                        <Form.Item
+                                            key={`recordSettings-${field.key}-${index}`}
+                                            style={{marginBottom: "10px"}}
+                                        >
+                                            <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "10px"}}>
+                                                <Form.Item
+                                                    {...field}
+                                                    name={[field.name, "action"]}
+                                                    rules={[{required: true, message: "Action is required"}]}
+                                                    style={{marginBottom: 0}}
+                                                >
+                                                    <Radio.Group disabled={readOnly}>
+                                                        <Radio value="include">Include</Radio>
+                                                        <Radio value="exclude">Exclude</Radio>
+                                                    </Radio.Group>
+                                                </Form.Item>
+                                                <Button type="primary" danger icon={<DeleteOutlined />} size="small" onClick={() => remove(field.name)} disabled={readOnly} />
+                                            </div>
+
+                                            <Form.Item
+                                                {...field}
+                                                name={[field.name, "key"]}
+                                                rules={[{required: true, message: "Key is required"}]}
+                                                style={{display: "inline-block", width: "calc(50% - 8px)"}}
+                                                key={`recordSettings-${field.key}-${index}`}
+                                            >
+                                                <Input placeholder="Key" disabled={readOnly} />
+                                            </Form.Item>
+
+                                            <Form.Item
+                                                {...field}
+                                                name={[field.name, "value"]}
+                                                rules={[{required: true, message: "Value is required"}]}
+                                                style={{display: "inline-block", width: "calc(50% - 8px)", marginLeft: "16px"}}
+                                                key={`recordSettings-${field.key}-${index}-value`}
+                                            >
+                                                <Input placeholder="Value" disabled={readOnly} />
+                                            </Form.Item>
+
+                                        </Form.Item>
+                                    ))}
+                                    <Form.Item name="addRule">
+                                        <Button type="dashed" onClick={() => add()} block disabled={readOnly}>
+                                            Add Rule
+                                        </Button>
+                                    </Form.Item>
+                                </>
+                            )}
+                        </Form.List>
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" disabled={error !== undefined || readOnly}>
+                            {replicationName ? "Update Replication" : "Create Replication"}
+                        </Button>
+                    </Form.Item>
+                </Form >
+            </>
+        );
+    }
+}
diff --git a/src/Components/Replication/ReplicationCard.css b/src/Components/Replication/ReplicationCard.css
new file mode 100644
index 0000000..cd6be03
--- /dev/null
+++ b/src/Components/Replication/ReplicationCard.css
@@ -0,0 +1,3 @@
+.ReplicationCard {
+  margin: 0.5em
+}
diff --git a/src/Components/Replication/ReplicationCard.test.tsx b/src/Components/Replication/ReplicationCard.test.tsx
new file mode 100644
index 0000000..1767f27
--- /dev/null
+++ b/src/Components/Replication/ReplicationCard.test.tsx
@@ -0,0 +1,189 @@
+import React from "react";
+import {mount, ReactWrapper} from "enzyme";
+import {act} from "react-dom/test-utils";
+import {Card} from "antd";
+import {DeleteOutlined, SettingOutlined} from "@ant-design/icons";
+
+import ReplicationCard from "./ReplicationCard";
+import {Client, FullReplicationInfo} from "reduct-js";
+import {mockJSDOM} from "../../Helpers/TestHelpers";
+
+describe("ReplicationCard", () => {
+  let clientMock: Client;
+  let replicationMock: FullReplicationInfo;
+  let onRemovedMock: jest.Mock;
+  let onShowMock: jest.Mock;
+  let wrapper: ReactWrapper;
+
+  beforeEach(() => {
+    mockJSDOM();
+
+    clientMock = new Client("dummyURL");
+    clientMock.deleteReplication = jest.fn().mockResolvedValue(undefined);
+
+    replicationMock = {
+      info: {
+        name: "TestReplication",
+        isActive: true,
+        isProvisioned: false,
+        pendingRecords: 100n,
+      },
+      settings: {
+        srcBucket: "sourceBucket1",
+        dstBucket: "targetBucket1",
+        dstHost: "targetHost1",
+        dstToken: "targetToken1",
+        entries: ["entry1", "entry2"],
+        include: {},
+        exclude: {},
+      },
+      diagnostics: {
+        hourly: {
+          ok: 50n,
+          errors: {
+            1: {
+              count: 5,
+              lastMessage: "Test error message",
+            },
+
+
+          },
+          errored: 5n,
+        },
+      },
+    };
+
+    onRemovedMock = jest.fn();
+    onShowMock = jest.fn();
+  });
+
+  afterEach(() => {
+    if (wrapper && wrapper.length) {
+      wrapper.unmount();
+    }
+  });
+
+  it("renders without crashing", async () => {
+    wrapper = mount(
+      <ReplicationCard
+        replication={replicationMock}
+        client={clientMock}
+        index={0}
+        sourceBuckets={["sourceBucket1", "sourceBucket2"]}
+        showPanel={true}
+        onRemoved={onRemovedMock}
+        onShow={onShowMock}
+        permissions={{fullAccess: true}}
+      />
+    );
+
+    expect(wrapper.find(Card).exists()).toBe(true);
+    expect(wrapper.find(".ReplicationCard").exists()).toBe(true);
+  });
+
+  it("opens settings modal on settings icon click", () => {
+    wrapper = mount(
+      <ReplicationCard
+        replication={replicationMock}
+        client={clientMock}
+        index={0}
+        sourceBuckets={["sourceBucket1", "sourceBucket2"]}
+        showPanel={true}
+        onRemoved={onRemovedMock}
+        onShow={onShowMock}
+        permissions={{fullAccess: true}}
+      />
+    );
+
+    act(() => {
+      wrapper.find(SettingOutlined).simulate("click");
+    });
+    wrapper.update();
+
+    expect(wrapper.find("[data-testid='settings-modal']").at(0).prop("open")).toBe(true);
+  });
+
+  it("shows remove confirmation when remove icon is clicked", async () => {
+    wrapper = mount(
+      <ReplicationCard
+        replication={replicationMock}
+        client={clientMock}
+        index={0}
+        sourceBuckets={["sourceBucket1", "sourceBucket2"]}
+        showPanel={true}
+        onRemoved={onRemovedMock}
+        onShow={onShowMock}
+        permissions={{fullAccess: true}}
+      />
+    );
+
+    await act(async () => {
+      wrapper.find(DeleteOutlined).simulate("click");
+    });
+    wrapper.update();
+
+    expect(wrapper.find("[data-testid='delete-modal']").exists()).toBe(true);
+
+  });
+
+  it("removes replication on confirm", async () => {
+    wrapper = mount(
+      <ReplicationCard
+        replication={replicationMock}
+        client={clientMock}
+        index={0}
+        sourceBuckets={["sourceBucket1", "sourceBucket2"]}
+        showPanel={true}
+        onRemoved={onRemovedMock}
+        onShow={onShowMock}
+        permissions={{fullAccess: true}}
+      />
+    );
+
+    // Open the removal confirmation modal
+    await act(async () => {
+      wrapper.find(DeleteOutlined).simulate("click");
+    });
+
+    // Make sure the modal is now part of the DOM
+    wrapper.update();
+
+    // Type the confirmation name into the input field
+    await act(async () => {
+      wrapper.find("input[data-testid='confirm-input']").simulate("change", {target: {value: replicationMock.info.name}});
+    });
+
+    // Click the confirmation button
+    await act(async () => {
+      wrapper.find("button").filterWhere((btn) => btn.text() === "Remove").simulate("click");
+    });
+
+    expect(clientMock.deleteReplication).toHaveBeenCalledWith(replicationMock.info.name);
+    expect(onRemovedMock).toHaveBeenCalledWith(replicationMock.info.name);
+  });
+
+  it("does not show remove button if replication is provisioned", () => {
+    const provisionedReplicationMock: FullReplicationInfo = {
+      ...replicationMock,
+      info: {
+        ...replicationMock.info,
+        isProvisioned: true,
+      }
+    };
+
+    wrapper = mount(
+      <ReplicationCard
+        replication={provisionedReplicationMock}
+        client={clientMock}
+        index={0}
+        sourceBuckets={["sourceBucket1", "sourceBucket2"]}
+        showPanel={true}
+        onRemoved={onRemovedMock}
+        onShow={onShowMock}
+        permissions={{fullAccess: true}}
+      />
+    );
+
+    expect(wrapper.find(DeleteOutlined).exists()).toBe(false);
+  });
+});
\ No newline at end of file
diff --git a/src/Components/Replication/ReplicationCard.tsx b/src/Components/Replication/ReplicationCard.tsx
new file mode 100644
index 0000000..e1aadff
--- /dev/null
+++ b/src/Components/Replication/ReplicationCard.tsx
@@ -0,0 +1,90 @@
+import React, {useState} from "react";
+import {Card, Col, Modal, Row, Statistic, Tag} from "antd";
+import {Client, FullReplicationInfo, TokenPermissions} from "reduct-js";
+import {DeleteOutlined, SettingOutlined} from "@ant-design/icons";
+
+import "./ReplicationCard.css";
+import CreateOrUpdate from "./CreateOrUpdate";
+import RemoveConfirmationByName from "../RemoveConfirmationByName";
+
+interface Props {
+    replication: FullReplicationInfo;
+    client: Client;
+    index: number;
+    sourceBuckets: string[];
+    showPanel?: boolean;
+    onRemoved: (name: string) => void;
+    onShow: (name: string) => void;
+    permissions?: TokenPermissions
+}
+
+export default function ReplicationCard(props: Readonly<Props>) {
+    const [confirmRemove, setConfirmRemove] = useState(false);
+    const [changeSettings, setChangeSettings] = useState(false);
+    const {client, replication, index} = props;
+    const {info, diagnostics} = replication;
+
+    const n = (big: BigInt) => {
+        return Number(big.valueOf());
+    };
+
+    const onRemoved = async () => {
+        await client.deleteReplication(info.name);
+        props.onRemoved(info.name);
+    };
+
+    const actions = [];
+    const readOnly = !props.permissions?.fullAccess || info.isProvisioned;
+    if (props.showPanel) {
+        actions.push(<SettingOutlined title="Settings"
+            key="setting"
+            onClick={() => setChangeSettings(true)} />);
+
+        if (!readOnly) {
+            actions.push(<DeleteOutlined title="Remove"
+                key="delete"
+                style={{color: "red"}}
+                onClick={() => setConfirmRemove(true)} />);
+        }
+    }
+
+    return (<Card className="ReplicationCard" key={index} id={info.name} title={info.name}
+        extra={
+            info.isProvisioned ?
+                <Tag color="processing">Provisioned</Tag>
+                : <></>
+        }
+        hoverable={props.showPanel != true}
+        onClick={() => props.onShow(info.name)}
+        actions={actions}>
+        <Card.Meta>
+
+        </Card.Meta>
+        <Row gutter={24}>
+            <Col span={8}>
+                <Statistic title="Records Awaiting Replication" value={n(info.pendingRecords)} />
+            </Col>
+            <Col span={8}>
+                <Statistic title="Successfully Replicated (Past Hour)" value={n(diagnostics.hourly.ok)} />
+            </Col>
+            <Col span={8}>
+                <Statistic title="Errors (Past Hour)" value={n(diagnostics.hourly.errored)} />
+            </Col>
+        </Row>
+        <RemoveConfirmationByName name={info.name} onRemoved={onRemoved}
+            onCanceled={() => setConfirmRemove(false)} confirm={confirmRemove}
+            resourceType="bucket" />
+        <Modal title="Settings" open={changeSettings} footer={null}
+            onCancel={() => setChangeSettings(false)} data-testid="settings-modal">
+            <CreateOrUpdate
+                key={info.name}
+                client={client}
+                readOnly={readOnly}
+                onCreated={() => setChangeSettings(false)}
+                sourceBuckets={props.sourceBuckets}
+                replicationName={info.name}
+            />
+        </Modal>
+    </Card>
+    );
+}
diff --git a/src/Components/Routes.tsx b/src/Components/Routes.tsx
index b702893..a1e9628 100644
--- a/src/Components/Routes.tsx
+++ b/src/Components/Routes.tsx
@@ -9,6 +9,8 @@ import BucketDetail from "../Views/BucketPanel/BucketDetail";
 import TokenList from "../Views/SecurityPanel/TokenList";
 import TokenDetail from "../Views/SecurityPanel/TokenDetail";
 import {TokenPermissions} from "reduct-js";
+import Replications from "../Views/Replications/Replications";
+import ReplicationDetail from "../Views/Replications/ReplicationDetail";
 
 interface Props extends RouteComponentProps {
     backendApi: IBackendAPI;
@@ -21,8 +23,8 @@ interface Props extends RouteComponentProps {
 function PrivateRoute({children, authorized, ...rest}) {
     return (
         <Route {...rest} render={() => {
-            return authorized ? children : <Redirect to="/login"/>;
-        }}/>
+            return authorized ? children : <Redirect to="/login" />;
+        }} />
     );
 }
 
@@ -32,34 +34,42 @@ export function Routes(props: Props): JSX.Element {
     return (
         <Switch>
             <Route exact path="/">
-                {authorized ? <Redirect to="/dashboard"/> : <Redirect to="/login"/>}
+                {authorized ? <Redirect to="/dashboard" /> : <Redirect to="/login" />}
             </Route>
 
             <Route exact path="/login">
-                <Login {...props}/>
+                <Login {...props} />
             </Route>
 
             <PrivateRoute exact path="/dashboard" authorized={authorized}>
-                <Dashboard {...props}/>
+                <Dashboard {...props} />
             </PrivateRoute>
 
             <PrivateRoute exact path="/buckets" authorized={authorized}>
-                <BucketList client={props.backendApi.client} {...props}/>
+                <BucketList client={props.backendApi.client} {...props} />
             </PrivateRoute>
 
             <PrivateRoute exact path="/buckets/:name" authorized={authorized}>
-                <BucketDetail client={props.backendApi.client} {...props}/>
+                <BucketDetail client={props.backendApi.client} {...props} />
+            </PrivateRoute>
+
+            <PrivateRoute exact path="/replications" authorized={authorized}>
+                <Replications client={props.backendApi.client} {...props} />
+            </PrivateRoute>
+
+            <PrivateRoute exact path="/replications/:name" authorized={authorized}>
+                <ReplicationDetail client={props.backendApi.client} {...props} />
             </PrivateRoute>
 
             <PrivateRoute exact path="/tokens" authorized={authorized && props.permissions?.fullAccess}>
-                <TokenList client={props.backendApi.client}/>
+                <TokenList client={props.backendApi.client} />
             </PrivateRoute>
 
             <PrivateRoute exact path="/tokens/:name" authorized={authorized && props.permissions?.fullAccess}>
-                <TokenDetail client={props.backendApi.client}/>
+                <TokenDetail client={props.backendApi.client} />
             </PrivateRoute>
             <Route>
-                <NotFount/>
+                <NotFount />
             </Route>
         </Switch>
     );
diff --git a/src/Views/Replications/ReplicationDetail.test.tsx b/src/Views/Replications/ReplicationDetail.test.tsx
new file mode 100644
index 0000000..404df89
--- /dev/null
+++ b/src/Views/Replications/ReplicationDetail.test.tsx
@@ -0,0 +1,153 @@
+import React from "react";
+import {ReactWrapper, mount} from "enzyme";
+import {MemoryRouter} from "react-router-dom";
+
+import {Client, ReplicationInfo, ReplicationSettings} from "reduct-js";
+import {mockJSDOM} from "../../Helpers/TestHelpers";
+import ReplicationDetail from "./ReplicationDetail";
+import {Diagnostics} from "reduct-js/lib/cjs/messages/Diagnostics";
+
+describe("ReplicationDetail", () => {
+  const client = new Client("dummyURL");
+  let wrapper: ReactWrapper;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+    mockJSDOM();
+
+
+    const mockReplicationInfo = ReplicationInfo.parse(
+      {
+        name: "TestReplication",
+        is_active: true,
+        is_provisioned: true,
+        pending_records: BigInt(100),
+      }
+    );
+
+    const mockReplicationSettings = ReplicationSettings.parse(
+      {
+        src_bucket: "sourceBucket",
+        dst_bucket: "destinationBucket",
+        dst_host: "destinationHost",
+        dst_token: "destinationToken",
+        entries: ["entry1", "entry2"],
+        include: {"label1": "value1"},
+        exclude: {"label2": "value2"},
+      }
+    );
+
+    const mockDiagnostics = Diagnostics.parse(
+      {
+        hourly: {
+          ok: BigInt(1000),
+          errored: BigInt(5),
+          errors: {
+            0: {
+              count: 5,
+              last_message: "Error connecting to source bucket"
+            },
+            1: {
+              count: 10,
+              last_message: "Error connecting to destination bucket"
+            },
+          },
+        },
+      }
+    );
+
+    client.getReplication = jest.fn().mockResolvedValue({
+      info: mockReplicationInfo,
+      settings: mockReplicationSettings,
+      diagnostics: mockDiagnostics,
+    });
+
+    const mockBucketList = [
+      {name: "Bucket1", creationDate: "2021-01-01"},
+      {name: "Bucket2", creationDate: "2021-06-01"},
+    ];
+
+    client.getBucketList = jest.fn().mockResolvedValue(mockBucketList);
+
+    wrapper = mount(
+      <MemoryRouter>
+        <ReplicationDetail client={client} />
+      </MemoryRouter>
+    );
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  it("fetches replication and bucket data on mount and at intervals", () => {
+    expect(client.getReplication).toHaveBeenCalledTimes(1);
+    expect(client.getBucketList).toHaveBeenCalledTimes(1);
+
+    jest.advanceTimersByTime(5000);
+
+    expect(client.getReplication).toHaveBeenCalledTimes(2);
+    expect(client.getBucketList).toHaveBeenCalledTimes(2);
+  });
+
+  it("displays replication card", async () => {
+    await wrapper.update();
+    const replicationCard = wrapper.find("ReplicationCard");
+    expect(replicationCard.exists()).toBeTruthy();
+  });
+
+  it("displays replication card with correct props", async () => {
+    await wrapper.update();
+    const replicationCard = wrapper.find("ReplicationCard");
+    expect(replicationCard.prop("replication")).toMatchObject({
+      info: {
+        name: "TestReplication",
+        isActive: true,
+        isProvisioned: true,
+        pendingRecords: BigInt(100),
+      },
+      settings: {
+        srcBucket: "sourceBucket",
+        dstBucket: "destinationBucket",
+        dstHost: "destinationHost",
+        dstToken: "destinationToken",
+        entries: ["entry1", "entry2"],
+        include: {"label1": "value1"},
+        exclude: {"label2": "value2"},
+      },
+      diagnostics: {
+        hourly: {
+          ok: BigInt(1000),
+          errored: BigInt(5),
+          errors: {
+            0: {
+              count: 5,
+              lastMessage: "Error connecting to source bucket"
+            },
+            1: {
+              count: 10,
+              lastMessage: "Error connecting to destination bucket"
+            },
+          },
+        },
+      },
+    });
+
+    expect(replicationCard.prop("sourceBuckets")).toEqual(["Bucket1", "Bucket2"]);
+  });
+
+  it("displays replication errors", async () => {
+    await wrapper.update();
+    const replicationErrors = wrapper.find("Table");
+    expect(replicationErrors.exists()).toBeTruthy();
+    expect(replicationErrors.prop("dataSource")).toEqual([
+      {key: "error-0", code: "0", count: "5", lastMessage: "Error connecting to source bucket"},
+      {key: "error-1", code: "1", count: "10", lastMessage: "Error connecting to destination bucket"},
+    ]);
+  });
+});
diff --git a/src/Views/Replications/ReplicationDetail.tsx b/src/Views/Replications/ReplicationDetail.tsx
new file mode 100644
index 0000000..fba62ee
--- /dev/null
+++ b/src/Views/Replications/ReplicationDetail.tsx
@@ -0,0 +1,100 @@
+import React, {useEffect, useState} from "react";
+import {Client, TokenPermissions, FullReplicationInfo, BucketInfo} from "reduct-js";
+import {useHistory, useParams} from "react-router-dom";
+import ReplicationCard from "../../Components/Replication/ReplicationCard";
+import {Table, Typography} from "antd";
+
+interface Props {
+    client: Client;
+    permissions?: TokenPermissions;
+}
+
+export default function ReplicationDetail(props: Readonly<Props>) {
+    const {name} = useParams() as {name: string};
+    const history = useHistory();
+
+    const [replication, setReplication] = useState<FullReplicationInfo>();
+    const [buckets, setBuckets] = useState<BucketInfo[]>([]);
+
+    const getReplication = async () => {
+        try {
+            const {client} = props;
+            setReplication(await client.getReplication(name));
+        } catch (err) {
+            console.error(err);
+        }
+
+    };
+
+    const getBuckets = async () => {
+        try {
+            const {client} = props;
+            const bucketList: BucketInfo[] = await client.getBucketList();
+            setBuckets(bucketList);
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    useEffect(() => {
+        getReplication().then();
+        const interval = setInterval(() => getReplication(), 5000);
+        return () => clearInterval(interval);
+    }, []);
+
+
+    useEffect(() => {
+        getBuckets().then();
+        const interval = setInterval(() => getBuckets(), 5000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const replicationErrors = replication && Object.entries(replication.diagnostics.hourly.errors)
+        .map(([key, error], index) => {
+            return {
+                key: `error-${index}`,
+                code: key,
+                count: error.count.toString(),
+                lastMessage: error.lastMessage,
+            };
+        });
+
+    const columns = [
+
+        {
+            title: "Error Code",
+            dataIndex: "code",
+            key: "code",
+        },
+        {
+            title: "Count",
+            dataIndex: "count",
+            key: "count",
+        },
+        {
+            title: "Last Message",
+            dataIndex: "lastMessage",
+            key: "lastMessage",
+        },
+    ];
+
+    return <div style={{margin: "1.4em"}}>
+        {replication &&
+            <>
+                <ReplicationCard replication={replication}
+                    sourceBuckets={buckets.map((bucket) => bucket.name)} index={0} {...props}
+                    showPanel
+                    onRemoved={() => history.push("/replications")}
+                    onShow={() => null}
+                />
+                <Typography.Title level={3}>Errors</Typography.Title>
+                <Table
+                    style={{margin: "0.6em"}}
+                    columns={columns}
+                    dataSource={replicationErrors}
+                    loading={!replicationErrors || !replicationErrors.length}
+                />
+            </>
+        }
+    </div>;
+}
diff --git a/src/Views/Replications/Replications.test.tsx b/src/Views/Replications/Replications.test.tsx
new file mode 100644
index 0000000..caafc13
--- /dev/null
+++ b/src/Views/Replications/Replications.test.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import {ReactWrapper, mount} from "enzyme";
+import {Modal, Table} from "antd";
+import {MemoryRouter} from "react-router-dom";
+
+import Replications from "./Replications";
+import {Client} from "reduct-js";
+import {mockJSDOM, waitUntilFind} from "../../Helpers/TestHelpers";
+
+describe("Replications", () => {
+  const client = new Client("dummyURL");
+  let wrapper: ReactWrapper;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockJSDOM();
+
+    client.getReplicationList = jest.fn().mockResolvedValue([
+      {name: "Replication1", isActive: true, isProvisioned: false, pendingRecords: 100n},
+      {name: "Replication2", isActive: false, isProvisioned: true, pendingRecords: 50n},
+    ]);
+
+    wrapper = mount(
+      <MemoryRouter>
+        <Replications client={client} permissions={{fullAccess: true}} />
+      </MemoryRouter>
+    );
+  });
+
+  afterEach(() => {
+    if (wrapper && wrapper.length) {
+      wrapper.unmount();
+    }
+  });
+
+  it("renders without crashing", () => {
+    expect(wrapper.find(Table).exists()).toBeTruthy();
+  });
+
+  it("fetches and displays replication data correctly", async () => {
+    await waitUntilFind(wrapper, "tr.ant-table-row");
+    const rows = wrapper.find("tr.ant-table-row");
+
+    expect(rows.length).toEqual(2);
+
+    expect(rows.at(0).find("a").text()).toEqual("Replication1");
+    expect(rows.at(0).find("span.ant-tag-success").text()).toEqual("Active");
+    expect(rows.at(0).find("span.ant-tag-processing").exists()).toBeFalsy();
+    expect(rows.at(0).find("td").at(2).text()).toEqual("100");
+
+    expect(rows.at(1).find("a").text()).toEqual("Replication2");
+    expect(rows.at(1).find("span.ant-tag-error").text()).toEqual("Inactive");
+    expect(rows.at(1).find("span.ant-tag-processing").text()).toEqual("Provisioned");
+    expect(rows.at(1).find("td").at(2).text()).toEqual("50");
+  });
+
+  it("shows the add replication button", () => {
+    expect(wrapper.find("button").exists()).toBeTruthy();
+  });
+
+  it("does not show the add replication button if the user does not have full access", () => {
+    wrapper = mount(
+      <MemoryRouter>
+        <Replications client={client} permissions={{fullAccess: false}} />
+      </MemoryRouter>
+    );
+    expect(wrapper.find("button").exists()).toBeFalsy();
+  });
+
+  it("opens the create replication modal", async () => {
+    wrapper.find("button").simulate("click");
+    await waitUntilFind(wrapper, {name: "replicationForm"});
+    expect(wrapper.find(Modal).prop("open")).toBeTruthy();
+  });
+
+  it("closes the create replication modal", async () => {
+    wrapper.find("button").simulate("click");
+    await waitUntilFind(wrapper, {name: "replicationForm"});
+    wrapper.find(".ant-modal-close-x").simulate("click");
+    expect(wrapper.find(Modal).prop("open")).toBeFalsy();
+  });
+});
diff --git a/src/Views/Replications/Replications.tsx b/src/Views/Replications/Replications.tsx
new file mode 100644
index 0000000..5364b6c
--- /dev/null
+++ b/src/Views/Replications/Replications.tsx
@@ -0,0 +1,121 @@
+import React, {useEffect, useState} from "react";
+import {ReplicationInfo, Client, TokenPermissions, BucketInfo} from "reduct-js";
+import {Button, Modal, Table, Tag, Typography} from "antd";
+
+import "../../App.css";
+import {Link} from "react-router-dom";
+import {PlusOutlined} from "@ant-design/icons";
+import CreateOrUpdate from "../../Components/Replication/CreateOrUpdate";
+
+
+interface Props {
+    client: Client;
+    permissions?: TokenPermissions;
+}
+
+/**
+ * Replications View
+ */
+export default function Replications(props: Readonly<Props>) {
+    const [replications, setReplications] = useState<ReplicationInfo[]>([]);
+    const [buckets, setBuckets] = useState<BucketInfo[]>([]);
+
+    const [creatingReplication, setCreatingReplication] = useState(false);
+
+    const getReplications = async () => {
+        try {
+            const {client} = props;
+            const replicationList: ReplicationInfo[] = await client.getReplicationList();
+            setReplications(replicationList);
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    const getBuckets = async () => {
+        try {
+            const {client} = props;
+            const bucketList: BucketInfo[] = await client.getBucketList();
+            setBuckets(bucketList);
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    useEffect(() => {
+        getReplications().then();
+        const interval = setInterval(() => getReplications(), 5000);
+        return () => clearInterval(interval);
+    }, [creatingReplication]);
+
+
+    useEffect(() => {
+        getBuckets().then();
+        const interval = setInterval(() => getBuckets(), 5000);
+        return () => clearInterval(interval);
+    }, []);
+
+
+    const data = replications.map((replication, index) => {
+        return {
+            key: `replication-${index}`,
+            name: replication.name,
+            isActive: replication.isActive,
+            isProvisioned: replication.isProvisioned,
+            pendingRecords: replication.pendingRecords.toString(),
+        };
+    });
+
+    const columns = [
+        {
+            title: "Name",
+            dataIndex: "name",
+            key: "name",
+            render: (text: string) => <Link to={`replications/${text}`}><b>{text}</b></Link>
+        },
+        {
+            title: "Active",
+            dataIndex: "isActive",
+            key: "isActive",
+            render: (isActive: boolean) => {
+                if (isActive) {
+                    return <Tag color="success">Active</Tag>;
+                } else {
+                    return <Tag color="error">Inactive</Tag>;
+                }
+            }
+        },
+        {
+            title: "Pending Records", dataIndex: "pendingRecords", key: "pendingRecords"
+        },
+        {
+            title: "",
+            dataIndex: "isProvisioned",
+            key: "isProvisioned",
+            render: (isProvisioned: boolean) => (
+                isProvisioned ? <Tag color="processing">Provisioned</Tag> : null
+            )
+        },
+    ];
+
+    return <div style={{margin: "2em"}}>
+        <Typography.Title level={3}>
+            Replications
+            {props.permissions?.fullAccess ?
+                <Button style={{float: "right"}} icon={<PlusOutlined />}
+                    onClick={() => setCreatingReplication(true)} title="Add" /> : null}
+
+            <Modal title="Add a new replication" open={creatingReplication} footer={null}
+                onCancel={() => setCreatingReplication(false)}>
+                <CreateOrUpdate client={props.client}
+                    onCreated={async () => {
+                        setCreatingReplication(false);
+                    }}
+                    sourceBuckets={buckets.map((bucket) => bucket.name)}
+                />
+            </Modal>
+
+        </Typography.Title>
+        <Table columns={columns} dataSource={data} loading={replications.length == 0} />
+    </div>;
+}
