diff --git a/playwright-tests/tests/addons.spec.js b/playwright-tests/tests/addons.spec.js
new file mode 100644
index 000000000..f740f1dc5
--- /dev/null
+++ b/playwright-tests/tests/addons.spec.js
@@ -0,0 +1,124 @@
+const { test, expect } = require("@playwright/test");
+
+test.describe("Wallet is connected", () => {
+  test.use({
+    storageState: "playwright-tests/storage-states/wallet-connected.json",
+  });
+
+  test.describe("AddonsConfigurator", () => {
+    const baseUrl =
+      "/devgovgigs.near/widget/app?page=community.configuration&handle=devhub-test";
+    // const dropdownSelector =
+    //   'input[data-component="near/widget/DIG.InputSelect"]';
+    // const addButtonSelector = "button.btn-success:has(i.bi.bi-plus)";
+    // const toggleButtonSelector = 'button[role="switch"]';
+    // const moveUpButtonSelector = "button.btn-secondary:has(i.bi.bi-arrow-up)";
+    // const removeButtonSelector =
+    //   "button.btn-outline-danger:has(i.bi.bi-trash-fill)";
+
+    test("Addons configuration section comes up on load", async ({ page }) => {
+      await page.goto(baseUrl);
+
+      const addonsConfiguratorSelector = 'span:has-text("Add-Ons")';
+
+      await page.waitForSelector(addonsConfiguratorSelector, {
+        state: "visible",
+      });
+    });
+  });
+});
+
+// NOTE:
+// The below tests need some more work.
+// We are using the DIG component, which is essentially a Radix Select field.
+// Radix select renders as an input and requires to be focused, then value inputted, before the option can be selected.
+// I was having trouble making this work.
+
+//     test('Can add an addon to the list', async ({ page }) => {
+//         await page.goto(baseUrl);
+
+//         await page.click(dropdownSelector);
+//         await page.fill(dropdownSelector, 'Wiki');
+//         await page.click(`li:has-text('Wiki')`);
+
+//         await page.waitForSelector(addButtonSelector, {
+//           state: "visible",
+//         });
+
+//         await page.click(addButtonSelector);
+
+//         const addedAddon = await page.$('input[type="text"].form-control[disabled][value="Wiki"]'); // You will need to fill this in
+//         expect(addedAddon).toBeTruthy();
+//     });
+
+//     test('Can reorder addons in the list', async ({ page }) => {
+//         await page.goto(baseUrl);
+
+//         await page.click(dropdownSelector);
+//         await page.inputValue(dropdownSelector, 'Wiki');
+//         await page.click(`li:has-text('Wiki')`);
+
+//         await page.waitForSelector(addButtonSelector, {
+//           state: "visible",
+//         });
+
+//         await page.click(addButtonSelector);
+
+//         await page.inputValue(dropdownSelector, 'telegram');
+//         await page.click(addButtonSelector);
+
+//         await page.waitForSelector(moveUpButtonSelector, {
+//           state: "visible",
+//         });
+
+//         await page.click(moveUpButtonSelector);
+
+//         const firstAddon = await page.$('input[type="text"].form-control[disabled][value="Telegram"]');
+//         const secondAddon = await page.$('input[type="text"].form-control[disabled][value="Wiki"]');
+//         expect(firstAddon).toBeTruthy();
+//         expect(secondAddon).toBeTruthy();
+//     });
+
+//     test('Can remove an addon from the list', async ({ page }) => {
+//         await page.goto(baseUrl);
+
+//         await page.inputValue(dropdownSelector, 'Wiki');
+
+//         await page.waitForSelector(addButtonSelector, {
+//           state: "visible",
+//         });
+
+//         await page.click(addButtonSelector);
+
+//         await page.waitForSelector(removeButtonSelector, {
+//           state: "visible",
+//         });
+
+//         await page.click(removeButtonSelector);
+
+//         const removedAddon = await page.$('input[type="text"].form-control[disabled][value="Wiki"]'); // You will need to fill this in
+//         expect(removedAddon).toBeNull();
+//     });
+
+//     test('Can toggle to disable an addon', async ({ page }) => {
+//         await page.goto(baseUrl);
+
+//         await page.inputValue(dropdownSelector, 'Wiki');
+//         await page.waitForSelector(addButtonSelector, {
+//           state: "visible",
+//         });
+
+//         await page.click(addButtonSelector);
+
+//         await page.waitForSelector(toggleButtonSelector, {
+//           state: "visible",
+//         });
+
+//         await page.click(toggleButtonSelector);
+
+//         const toggleState = await page.getAttribute(toggleButtonSelector, 'aria-checked');
+//         expect(toggleState).toBe('false');
+//     });
+// });
+
+// });
diff --git a/playwright-tests/tests/search.spec.js b/playwright-tests/tests/search.spec.js
index 8e6cc5bf2..be967b90c 100644
--- a/playwright-tests/tests/search.spec.js
+++ b/playwright-tests/tests/search.spec.js
@@ -9,6 +9,7 @@ test("should show post history for posts in the feed", async ({ page }) => {
     state: "visible",
   });
   await searchInput.fill("zero knowledge");
+  await searchInput.press("Enter");
 
   await page.waitForSelector('span:has-text("zero knowledge")', {
     state: "visible",
diff --git a/src/core/adapter/devhub-contract.jsx b/src/core/adapter/devhub-contract.jsx
index eb74d0f13..fbbac46d9 100644
--- a/src/core/adapter/devhub-contract.jsx
+++ b/src/core/adapter/devhub-contract.jsx
@@ -113,30 +113,30 @@ function getAvailableAddons() {
       configurator_widget:
         "${REPL_DEVHUB}/widget/devhub.entity.addon.telegram.Configurator",
     },
-    {
-      id: "github",
-      title: "Github",
-      description: "Connect your github",
-      view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.github.Viewer",
-      configurator_widget:
-        "${REPL_DEVHUB}/widget/devhub.entity.addon.github.Configurator",
-    },
-    {
-      id: "kanban",
-      title: "Kanban",
-      description: "Connect your github kanban board",
-      view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.kanban.Viewer",
-      configurator_widget:
-        "${REPL_DEVHUB}/widget/devhub.entity.addon.kanban.Configurator",
-    },
-    {
-      id: "blog",
-      title: "Blog",
-      description: "Create a blog for your community",
-      view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Viewer",
-      configurator_widget:
-        "${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Configurator",
-    },
+    // {
+    //   id: "github",
+    //   title: "Github",
+    //   description: "Connect your github",
+    //   view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.github.Viewer",
+    //   configurator_widget:
+    //     "${REPL_DEVHUB}/widget/devhub.entity.addon.github.Configurator",
+    // },
+    // {
+    //   id: "kanban",
+    //   title: "Kanban",
+    //   description: "Connect your github kanban board",
+    //   view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.kanban.Viewer",
+    //   configurator_widget:
+    //     "${REPL_DEVHUB}/widget/devhub.entity.addon.kanban.Configurator",
+    // },
+    // {
+    //   id: "blog",
+    //   title: "Blog",
+    //   description: "Create a blog for your community",
+    //   view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Viewer",
+    //   configurator_widget:
+    //     "${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Configurator",
+    // },
   ];
   // return Near.view("${REPL_DEVHUB_CONTRACT}", "get_available_addons") ?? null;
 }
diff --git a/src/devhub/components/molecule/Input.jsx b/src/devhub/components/molecule/Input.jsx
new file mode 100644
index 000000000..69b27c7e2
--- /dev/null
+++ b/src/devhub/components/molecule/Input.jsx
@@ -0,0 +1,99 @@
+const TextInput = ({
+  className,
+  format,
+  inputProps: { className: inputClassName, ...inputProps },
+  key,
+  label,
+  multiline,
+  onChange,
+  placeholder,
+  type,
+  value,
+  skipPaddingGap,
+  style,
+  ...otherProps
+}) => {
+  const typeAttribute =
+    type === "text" || type === "password" || type === "number" ? type : "text";
+
+  const renderedLabels = [
+    (label?.length ?? 0) > 0 ? (
+      <span className="d-inline-flex gap-1 text-wrap">
+        <span>{label}</span>
+
+        {inputProps.required ? <span className="text-danger">*</span> : null}
+      </span>
+    ) : null,
+
+    format === "markdown" ? (
+      <i class="bi bi-markdown text-muted" title="Markdown" />
+    ) : null,
+
+    format === "comma-separated" ? (
+      <span
+        className="d-inline-flex align-items-center text-muted"
+        style={{ fontSize: 12 }}
+      >
+        {format}
+      </span>
+    ) : null,
+
+    (inputProps.max ?? null) !== null ? (
+      <span className="d-inline-flex text-muted" style={{ fontSize: 12 }}>{`${
+        value?.length ?? 0
+      } / ${inputProps.max}`}</span>
+    ) : null,
+  ].filter((label) => label !== null);
+
+  return (
+    <div
+      className={[
+        "d-flex flex-column flex-1 align-items-start justify-content-evenly",
+        skipPaddingGap ? "" : "gap-1 p-2",
+        className ?? "",
+      ].join(" ")}
+      style={style}
+      {...otherProps}
+    >
+      {renderedLabels.length > 0 ? (
+        <span
+          className="d-flex justify-content-between align-items-center gap-3 w-100"
+          id={key}
+        >
+          {renderedLabels.map((label) => label)}
+        </span>
+      ) : null}
+
+      {!multiline ? (
+        <div className="input-group">
+          {inputProps.prefix && (
+            <span className="input-group-text">{inputProps.prefix}</span>
+          )}
+          <input
+            aria-describedby={key}
+            aria-label={label}
+            className={["form-control border border-2", inputClassName].join(
+              " "
+            )}
+            type={typeAttribute}
+            {...{ onChange, placeholder, value, ...inputProps }}
+          />
+        </div>
+      ) : (
+        <textarea
+          aria-describedby={key}
+          aria-label={label}
+          className={["form-control border border-2", inputClassName].join(" ")}
+          placeholder={
+            placeholder + (inputProps.required ? " ( required )" : "")
+          }
+          style={{ resize: inputProps.resize ?? "vertical" }}
+          type={typeAttribute}
+          {...{ onChange, placeholder, value, ...inputProps }}
+        />
+      )}
+    </div>
+  );
+};
+
+return TextInput(props);
diff --git a/src/devhub/components/templates/AppLayout.jsx b/src/devhub/components/templates/AppLayout.jsx
index fbb4175b3..741771f15 100644
--- a/src/devhub/components/templates/AppLayout.jsx
+++ b/src/devhub/components/templates/AppLayout.jsx
@@ -109,7 +109,6 @@ const AppHeader = ({ page }) => {
 };
 
 function AppLayout({ page, children }) {
-  console.log("page", page);
   return (
     <Container>
       <AppHeader page={page} />
diff --git a/src/devhub/entity/addon/telegram/Configurator.jsx b/src/devhub/entity/addon/telegram/Configurator.jsx
new file mode 100644
index 000000000..3ac05e79a
--- /dev/null
+++ b/src/devhub/entity/addon/telegram/Configurator.jsx
@@ -0,0 +1,117 @@
+const { Tile } =
+  VM.require("${REPL_DEVHUB}/widget/devhub.components.molecule.Tile") ||
+  (() => <></>);
+
+const { data, onSubmit } = props;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const Item = styled.div`
+  padding: 10px;
+  margin: 5px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 10px;
+`;
+
+const EditableField = styled.input`
+  flex: 1;
+`;
+const initialData = data.handles;
+const [handles, setHandles] = useState(initialData || []);
+const [newItem, setNewItem] = useState("");
+
+const handleAddItem = () => {
+  if (newItem) {
+    setHandles([...handles, newItem]);
+    setNewItem("");
+  }
+};
+
+const handleDeleteItem = (index) => {
+  const updatedData = [...handles];
+  updatedData.splice(index, 1);
+  setHandles(updatedData);
+};
+
+const handleSubmit = () => {
+  onSubmit({ handles: handles.map((handle) => handle.trim()) });
+};
+
+return (
+  <Tile className="p-3">
+    <Container>
+      {handles.map((item, index) => (
+        <Item key={index}>
+          <div className="flex-grow-1">
+            <Widget
+              // TODO: LEGACY.
+              src="${REPL_DEVHUB}/widget/gigs-board.components.molecule.text-input"
+              props={{
+                className: "flex-grow-1",
+                value: item,
+                placeholder: "Telegram Handle",
+                inputProps: {
+                  prefix: "https://t.me/",
+                  disabled: true,
+                },
+              }}
+            />
+          </div>
+          <button
+            className="btn btn-outline-danger"
+            onClick={() => handleDeleteItem(index)}
+          >
+            <i className="bi bi-trash-fill" />
+          </button>
+        </Item>
+      ))}
+      <Item>
+        <div className="flex-grow-1">
+          <Widget
+            // TODO: LEGACY.
+            src="${REPL_DEVHUB}/widget/gigs-board.components.molecule.text-input"
+            props={{
+              className: "flex-grow-1",
+              onChange: (e) => setNewItem(e.target.value),
+              value: newItem,
+              placeholder: "Telegram Handle",
+              inputProps: {
+                prefix: "https://t.me/",
+              },
+            }}
+          />
+        </div>
+        <button
+          className="btn btn-success"
+          onClick={handleAddItem}
+          disabled={newItem === ""}
+        >
+          <i className="bi bi-plus" />
+        </button>
+      </Item>
+      <div
+        className={"d-flex align-items-center justify-content-end gap-3 mt-4"}
+      >
+        <Widget
+          src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+          props={{
+            classNames: { root: "btn-success" },
+            disabled: initialData === handles,
+            icon: {
+              type: "bootstrap_icon",
+              variant: "bi-check-circle-fill",
+            },
+            label: "Submit",
+            onClick: handleSubmit,
+          }}
+        />
+      </div>
+    </Container>
+  </Tile>
+);
diff --git a/src/devhub/entity/addon/telegram/Viewer.jsx b/src/devhub/entity/addon/telegram/Viewer.jsx
new file mode 100644
index 000000000..4959daf74
--- /dev/null
+++ b/src/devhub/entity/addon/telegram/Viewer.jsx
@@ -0,0 +1,51 @@
+const { handles } = props;
+
+const CenteredMessage = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: ${(p) => p.height ?? "100%"};
+`;
+
+if (!handles || handles.length === 0) {
+  return (
+    <CenteredMessage height={"384px"}>
+      <h2>No Telegram Configured</h2>
+    </CenteredMessage>
+  );
+} else {
+  return (
+    <div>
+      {(handles || []).map((tg) => (
+        <>
+          <iframe
+            iframeResizer
+            src={
+              "https://j96g3uepe0.execute-api.us-east-1.amazonaws.com/groups-ui/" +
+              tg
+            }
+            frameborder="0"
+            // width and minWidth required by iframeResizer
+            style={{
+              width: "1px",
+              minWidth: "100%",
+              marginTop: "20px",
+            }}
+          ></iframe>
+
+          <a href={"https://t.me/" + tg} target="_blank">
+            <Widget
+              src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+              props={{
+                classNames: { root: "btn-primary" },
+                label: "View More",
+              }}
+            />
+          </a>
+        </>
+      ))}
+    </div>
+  );
+}
diff --git a/src/devhub/entity/addon/wiki/Configurator.jsx b/src/devhub/entity/addon/wiki/Configurator.jsx
new file mode 100644
index 000000000..6ce7ef1a6
--- /dev/null
+++ b/src/devhub/entity/addon/wiki/Configurator.jsx
@@ -0,0 +1,163 @@
+const { data, onSubmit } = props;
+
+const initialData = data;
+const [content, setContent] = useState(data.content || "");
+const [title, setTitle] = useState(data.title || "");
+const [description, setDescription] = useState(data.description || "");
+const [textAlign, setTextAlign] = useState(data.textAlign || "left");
+
+const Container = styled.div`
+  width: 100%;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: left;
+`;
+
+const FormContainer = styled.div`
+  padding-top: 1rem;
+
+  & > *:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+
+const hasDataChanged = () => {
+  return (
+    content !== initialData.content ||
+    title !== initialData.title ||
+    description !== initialData.description ||
+    textAlign !== initialData.textAlign
+  );
+};
+
+const handleSubmit = () => {
+  if (title) onSubmit({ title, description, content, textAlign });
+};
+
+return (
+  <Container>
+    <ul className="nav nav-tabs" id="editPreviewTabs" role="tablist">
+      <li className="nav-item" role="presentation">
+        <button
+          className="nav-link active"
+          id="edit-tab"
+          data-bs-toggle="tab"
+          data-bs-target="#edit"
+          type="button"
+          role="tab"
+          aria-controls="edit"
+          aria-selected="true"
+        >
+          Edit
+        </button>
+      </li>
+      <li className="nav-item" role="presentation">
+        <button
+          className="nav-link"
+          id="preview-tab"
+          data-bs-toggle="tab"
+          data-bs-target="#preview"
+          type="button"
+          role="tab"
+          aria-controls="preview"
+          aria-selected="false"
+        >
+          Preview
+        </button>
+      </li>
+    </ul>
+    <div className="tab-content" id="editPreviewTabsContent">
+      <div
+        className="tab-pane show active p-4"
+        id="edit"
+        role="tabpanel"
+        aria-labelledby="edit-tab"
+        style={{ position: "relative" }}
+      >
+        <div style={{ position: "absolute", top: 10, right: 0 }}>
+          <Widget
+            // LEGACY
+            src="${REPL_DEVHUB}/widget/gigs-board.components.molecule.button-switch"
+            props={{
+              currentValue: textAlign,
+              key: "textAlign",
+              onChange: (e) => setTextAlign(e.target.value),
+              options: [
+                { label: "Left", value: "left" },
+                { label: "Center", value: "center" },
+                { label: "Right", value: "right" },
+              ],
+            }}
+          />
+        </div>
+        <FormContainer>
+          <div className="flex-grow-1">
+            <Widget
+              src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
+              props={{
+                label: "Title",
+                className: "flex-grow-1",
+                onChange: (e) => setTitle(e.target.value),
+                value: title,
+                inputProps: {
+                  min: 2,
+                  max: 60,
+                  required: true,
+                },
+              }}
+            />
+          </div>
+          <div className="flex-grow-1">
+            <Widget
+              src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
+              props={{
+                label: "Description",
+                className: "flex-grow-1",
+                onChange: (e) => setDescription(e.target.value),
+                value: description,
+                inputProps: {
+                  min: 2,
+                  max: 250,
+                },
+              }}
+            />
+          </div>
+          <Widget
+            src="${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownEditor"
+            props={{ data: { content }, onChange: setContent }}
+          />
+        </FormContainer>
+        <div
+          className={"d-flex align-items-center justify-content-end gap-3 mt-4"}
+        >
+          <Widget
+            src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+            props={{
+              classNames: { root: "btn-success" },
+              disabled: !hasDataChanged() || !title || !content,
+              icon: {
+                type: "bootstrap_icon",
+                variant: "bi-check-circle-fill",
+              },
+              label: "Publish",
+              onClick: handleSubmit,
+            }}
+          />
+        </div>
+      </div>
+      <div
+        className="tab-pane"
+        id="preview"
+        role="tabpanel"
+        aria-labelledby="preview-tab"
+      >
+        <div className="w-100 h-100 p-4">
+          <Widget
+            src="${REPL_DEVHUB}/widget/devhub.entity.addon.wiki.Viewer"
+            props={{ title, description, content, textAlign }}
+          />
+        </div>
+      </div>
+    </div>
+  </Container>
+);
diff --git a/src/devhub/entity/addon/wiki/Viewer.jsx b/src/devhub/entity/addon/wiki/Viewer.jsx
new file mode 100644
index 000000000..75b0ce977
--- /dev/null
+++ b/src/devhub/entity/addon/wiki/Viewer.jsx
@@ -0,0 +1,52 @@
+const { content, title, description, textAlign } = props;
+
+const Container = styled.div`
+  width: 100%;
+  margin: 0 auto;
+  text-align: ${(p) => p.textAlign ?? "left"};
+`;
+
+const Content = styled.div`
+  margin: 20px 0;
+  text-align: left;
+`;
+
+const Title = styled.h1`
+  margin-bottom: 10px; /* Optional: Adjust margin as needed */
+`;
+
+const Description = styled.p`
+  margin-bottom: 20px; /* Optional: Adjust margin as needed */
+`;
+
+const CenteredMessage = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: ${(p) => p.height ?? "100%"};
+`;
+
+if (!content) {
+  return (
+    <CenteredMessage height={"384px"}>
+      <h2>No Wiki Configured</h2>
+    </CenteredMessage>
+  );
+} else {
+  return (
+    <Container textAlign={textAlign}>
+      <Title>{title}</Title>
+      <Description>{description}</Description>
+      <Content>
+        <Widget
+          src={
+            "${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownViewer"
+          }
+          props={{ text: content }}
+        />
+      </Content>
+    </Container>
+  );
+}
diff --git a/src/devhub/entity/community/Provider.jsx b/src/devhub/entity/community/Provider.jsx
index bd02872e5..03689c164 100644
--- a/src/devhub/entity/community/Provider.jsx
+++ b/src/devhub/entity/community/Provider.jsx
@@ -6,6 +6,7 @@ const {
   updateCommunity,
   deleteCommunity,
   getCommunity,
+  setCommunityAddons,
 } = VM.require("${REPL_DEVHUB}/widget/core.adapter.devhub-contract");
 
 if (
@@ -13,7 +14,8 @@ if (
   !getAccountCommunityPermissions ||
   !createCommunity ||
   !updateCommunity ||
-  !deleteCommunity
+  !deleteCommunity ||
+  !setCommunityAddons
 ) {
   return <p>Loading modules...</p>;
 }
@@ -62,6 +64,7 @@ return (
   <Children
     permissions={permissions}
     community={community}
+    setCommunityAddons={setCommunityAddons}
     createCommunity={createCommunity}
     updateCommunity={handleUpdateCommunity}
     deleteCommunity={deleteCommunity}
diff --git a/src/devhub/entity/community/configuration/AddonsConfigurator.jsx b/src/devhub/entity/community/configuration/AddonsConfigurator.jsx
new file mode 100644
index 000000000..f316c31e9
--- /dev/null
+++ b/src/devhub/entity/community/configuration/AddonsConfigurator.jsx
@@ -0,0 +1,323 @@
+const { getAvailableAddons } =
+  VM.require("${REPL_DEVHUB}/widget/core.adapter.devhub-contract") ||
+  (() => {});
+
+const { href } = VM.require("${REPL_DEVHUB}/widget/core.lib.url") || (() => {});
+
+const availableAddons = getAvailableAddons() || [];
+
+const isActive = props.isActive;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const Item = styled.div`
+  padding: 10px;
+  margin: 5px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+const Icon = styled.span`
+  margin-right: 10px;
+`;
+
+const EditableField = styled.input`
+  flex: 1;
+`;
+
+const ToggleButton = styled.input`
+  margin-left: 10px;
+`;
+
+const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+`;
+
+const Header = styled.thead`
+  background-color: #f0f0f0;
+`;
+
+const HeaderCell = styled.th`
+  padding: 10px;
+  text-align: left;
+`;
+
+const Row = styled.tr``;
+
+const Cell = styled.td`
+  padding: 10px;
+`;
+
+function generateRandom6CharUUID() {
+  const chars = "0123456789abcdefghijklmnopqrstuvwxyz";
+  let result = "";
+
+  for (let i = 0; i < 6; i++) {
+    const randomIndex = Math.floor(Math.random() * chars.length);
+    result += chars[randomIndex];
+  }
+
+  return result;
+}
+
+const AddonItem = ({
+  data,
+  onUpdate,
+  onMove,
+  onRemove,
+  index,
+  isTop,
+  isBottom,
+}) => {
+  const handleNameChange = (event) => {
+    const newName = event.target.value;
+    onUpdate({ ...data, display_name: newName });
+  };
+
+  const handleEnableChange = () => {
+    onUpdate({ ...data, enabled: !data.enabled });
+  };
+
+  const moveItemUp = () => {
+    if (!isTop) {
+      onMove(index, index - 1);
+    }
+  };
+
+  const moveItemDown = () => {
+    if (!isBottom) {
+      onMove(index, index + 1);
+    }
+  };
+
+  const removeItem = () => {
+    onRemove(data.id);
+  };
+
+  const addonMatch =
+    availableAddons.find((it) => it.id === data.addon_id) ?? null;
+
+  return (
+    <Row>
+      <Cell>
+        <div style={{ display: "flex", flexDirection: "column", gap: "0" }}>
+          <button
+            className="btn btn-sm btn-secondary rounded-0"
+            onClick={moveItemUp}
+            disabled={!isActive}
+            style={{ visibility: isTop ? "hidden" : "visible" }}
+          >
+            <i className="bi bi-arrow-up"></i>
+          </button>
+          <button
+            className="btn btn-sm btn-secondary rounded-0"
+            onClick={moveItemDown}
+            disabled={!isActive}
+            style={{ visibility: isBottom ? "hidden" : "visible" }}
+          >
+            <i className="bi bi-arrow-down"></i>
+          </button>
+        </div>
+      </Cell>
+      <Cell>
+        <div>{addonMatch.title}</div>
+      </Cell>
+      <Cell>
+        <Widget
+          src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
+          props={{
+            label: " ",
+            value: data.display_name,
+            onChange: handleNameChange,
+            inputProps: {
+              min: 3,
+              max: 30,
+              disabled: !data.enabled || !isActive,
+            },
+          }}
+        />
+      </Cell>
+      <Cell>
+        <div
+          className={
+            "d-flex flex-column flex-1 align-items-start justify-content-evenly"
+          }
+        >
+          <Widget
+            src={"${REPL_DEVHUB}/widget/devhub.components.atom.Toggle"}
+            props={{
+              value: data.enabled,
+              onChange: handleEnableChange,
+              disabled: !isActive,
+            }}
+          />
+        </div>
+      </Cell>
+      <Cell>
+        <div style={{ display: "flex", gap: "2px" }}>
+          {isActive && (
+            <button className="btn btn-outline-danger" onClick={removeItem}>
+              <i className="bi bi-trash-fill" />
+            </button>
+          )}
+        </div>
+      </Cell>
+    </Row>
+  );
+};
+
+function arraysAreEqual(arr1, arr2) {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr1[i] !== arr2[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+const AddonsConfigurator = ({ data, onSubmit }) => {
+  const [originalList, setOriginalList] = useState(data);
+  const [list, setList] = useState(data);
+  const [changesMade, setChangesMade] = useState(false);
+
+  useEffect(() => {
+    setOriginalList(data);
+  }, [data]);
+
+  const updateItem = (updatedItem) => {
+    const updatedList = list.map((item) =>
+      item.id === updatedItem.id ? updatedItem : item
+    );
+    setList(updatedList);
+    setChangesMade(!arraysAreEqual(originalList, updatedList));
+  };
+
+  const moveItem = (fromIndex, toIndex) => {
+    const updatedList = [...list];
+    const [movedItem] = updatedList.splice(fromIndex, 1);
+    updatedList.splice(toIndex, 0, movedItem);
+    setList(updatedList);
+    setChangesMade(!arraysAreEqual(originalList, updatedList));
+  };
+
+  const [selectedAddon, setSelectedAddon] = useState(null);
+
+  const handleAddItem = () => {
+    const newItem = {
+      id: generateRandom6CharUUID(),
+      addon_id: selectedAddon.id,
+      display_name: selectedAddon.title,
+      enabled: true,
+      parameters: "{}",
+    };
+    const updatedList = [...list, newItem];
+    setList(updatedList);
+    setChangesMade(!arraysAreEqual(originalList, updatedList));
+  };
+
+  const removeItem = (id) => {
+    const updatedList = list.filter((item) => item.id !== id);
+    setList(updatedList);
+    setChangesMade(!arraysAreEqual(originalList, updatedList));
+  };
+
+  return (
+    <Container>
+      <p>
+        Add or remove custom tabs, which will appear in your community's
+        navigation bar.
+        <br />
+        You can customize them on each page.
+      </p>
+      <Table>
+        <Header>
+          <Row>
+            <HeaderCell style={{ width: "30px" }}>Order</HeaderCell>
+            <HeaderCell>Tab Type</HeaderCell>
+            <HeaderCell>Tab Name</HeaderCell>
+            <HeaderCell style={{ width: "45px" }}>Enabled</HeaderCell>
+            <HeaderCell style={{ width: "40px" }}>Actions</HeaderCell>
+          </Row>
+        </Header>
+        <tbody>
+          {list.map((item, index) => (
+            <AddonItem
+              key={item.id}
+              data={item}
+              onUpdate={updateItem}
+              onMove={moveItem}
+              onRemove={removeItem}
+              index={index}
+              isTop={index === 0}
+              isBottom={index === list.length - 1}
+            />
+          ))}
+        </tbody>
+      </Table>
+      {isActive && availableAddons && list.length < 7 && (
+        <div className="d-flex justify-content-center">
+          <div className="d-flex gap-2 flex-grow-1 px-4">
+            <Widget
+              src={"${REPL_NEAR}/widget/DIG.InputSelect"}
+              props={{
+                groups: [
+                  {
+                    items: (availableAddons || []).map((it) => ({
+                      label: it.title,
+                      value: it.id,
+                    })),
+                  },
+                ],
+                rootProps: {
+                  value: selectedAddon.id ?? null,
+                  placeholder: "Select an addon",
+                  onValueChange: (value) =>
+                    setSelectedAddon(
+                      (availableAddons || []).find((it) => it.id === value)
+                    ),
+                },
+              }}
+            />
+            <button
+              className="btn btn-success"
+              onClick={handleAddItem}
+              disabled={!selectedAddon}
+            >
+              <i className="bi bi-plus" />
+            </button>
+          </div>
+        </div>
+      )}
+      {isActive && (
+        <div
+          className={"d-flex align-items-center justify-content-end gap-3 mt-4"}
+        >
+          <Widget
+            src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+            props={{
+              classNames: { root: "btn-success" },
+              disabled: !changesMade,
+              icon: {
+                type: "bootstrap_icon",
+                variant: "bi-check-circle-fill",
+              },
+              label: "Submit",
+              onClick: () => onSubmit(list),
+            }}
+          />
+        </div>
+      )}
+    </Container>
+  );
+};
+
+return AddonsConfigurator(props);
diff --git a/src/devhub/page/addon.jsx b/src/devhub/page/addon.jsx
new file mode 100644
index 000000000..7f9d87b93
--- /dev/null
+++ b/src/devhub/page/addon.jsx
@@ -0,0 +1,147 @@
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  position: relative;
+`;
+
+const Content = styled.div`
+  flex: 1;
+  padding: 20px;
+  overflow: auto;
+`;
+
+const SettingsButton = styled.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  background-color: #fff;
+  display: flex;
+  padding: 14px 16px;
+  align-items: center;
+  gap: 16px;
+  width: 50px;
+  height: 50px;
+
+  border-radius: 4px;
+  border: 1px solid #00ec97;
+
+  z-index: 10;
+
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+  &:hover {
+    transform: translateY(2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+`;
+
+const CenteredMessage = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: ${(p) => p.height ?? "100%"};
+`;
+
+const { addon, permissions, handle } = props;
+
+const { getAvailableAddons, setCommunityAddon } = VM.require(
+  "${REPL_DEVHUB}/widget/core.adapter.devhub-contract"
+);
+
+if (!getAvailableAddons || !setCommunityAddon) {
+  return <p>Loading modules...</p>;
+}
+
+const availableAddons = getAvailableAddons();
+const addonMatch = availableAddons.find((it) => it.id === addon.addon_id);
+
+if (!addonMatch) {
+  return (
+    <CenteredMessage height={"384px"}>
+      <h2>Addon with id: "{addon.addon_id}" not found.</h2>
+    </CenteredMessage>
+  );
+}
+
+const config = JSON.parse(addon.parameters || "null");
+
+const ButtonRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const [view, setView] = useState(props.view || "viewer");
+
+const checkFullyRefactored = (addon_id) => {
+  switch (addon_id) {
+    case "kanban":
+    case "github":
+      return false;
+    default:
+      return true;
+  }
+};
+
+const isFullyRefactored = checkFullyRefactored(addon.addon_id);
+
+return (
+  <Container>
+    {isFullyRefactored && // Unfully refactored addons have the configurator built in.
+      // So we hide the header
+      permissions.can_configure && (
+        <SettingsButton
+          onClick={() => setView(view === "configure" ? "view" : "configure")}
+        >
+          {view === "configure" ? (
+            <span className="bi bi-x"></span>
+          ) : (
+            <span className="bi bi-gear"></span>
+          )}
+        </SettingsButton>
+      )}
+    <Content>
+      {/* We hide in order to prevent a reload when we switch between two views */}
+      <div className={`${view !== "configure" ? "d-none" : ""}`}>
+        <Widget
+          src={addonMatch.configurator_widget}
+          props={{
+            data: config,
+            onSubmit: (data) => {
+              setCommunityAddon({
+                handle,
+                addon: {
+                  ...addon,
+                  parameters: JSON.stringify(data),
+                },
+              });
+            },
+
+            handle, // this is temporary prop drilling until kanban and github are migrated
+            permissions,
+          }}
+        />
+      </div>
+      <div className={`${view === "configure" ? "d-none" : ""}`}>
+        <Widget
+          src={addonMatch.view_widget}
+          props={{
+            ...config,
+            // temporary prop drilling
+            handle,
+            permissions,
+          }}
+        />
+      </div>
+    </Content>
+  </Container>
+);
diff --git a/src/devhub/page/community/configuration.jsx b/src/devhub/page/community/configuration.jsx
index b5887726d..40393461c 100644
--- a/src/devhub/page/community/configuration.jsx
+++ b/src/devhub/page/community/configuration.jsx
@@ -2,10 +2,17 @@ const { Tile } =
   VM.require("${REPL_DEVHUB}/widget/devhub.components.molecule.Tile") ||
   (() => <></>);
 
-const { permissions, handle, community, deleteCommunity, updateCommunity } =
-  props;
+const {
+  permissions,
+  handle,
+  community,
+  setCommunityAddons,
+  deleteCommunity,
+  updateCommunity,
+} = props;
 
-const [communityData, setCommunityData] = useState(community);
+const [communityData, setCommunityData] = useState(community || {});
+const [selectedAddon, setSelectedAddon] = useState(null);
 const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
 const sectionSubmit = (sectionData) => {
@@ -33,7 +40,7 @@ const hasDeletePermissions = permissions.can_delete;
 return (
   <div
     className="d-flex flex-column align-items-center gap-4 w-100 p-4"
-    style={{ maxWidth: 960 }}
+    style={{ maxWidth: 960, marginBottom: "60px" }}
   >
     <Tile>
       <Widget
@@ -117,6 +124,31 @@ return (
         }}
       />
     </Tile>
+    {hasConfigurePermissions && (
+      <Tile className={"p-3"}>
+        <Widget
+          src={
+            "${REPL_DEVHUB}/widget/devhub.entity.community.configuration.ConfigurationSection"
+          }
+          props={{
+            title: "Add-Ons",
+            hasConfigurePermissions,
+            Configurator: (p) => (
+              <Widget
+                src={
+                  "${REPL_DEVHUB}/widget/devhub.entity.community.configuration.AddonsConfigurator"
+                }
+                props={{
+                  data: communityData.addons || [],
+                  onSubmit: (v) => setCommunityAddons({ handle, addons: v }),
+                  ...p,
+                }}
+              />
+            ),
+          }}
+        />
+      </Tile>
+    )}
     {hasDeletePermissions && (
       <div
         className="d-flex justify-content-center gap-4 p-4 w-100"
diff --git a/src/devhub/page/community/index.jsx b/src/devhub/page/community/index.jsx
index c08ca51af..1664ff798 100644
--- a/src/devhub/page/community/index.jsx
+++ b/src/devhub/page/community/index.jsx
@@ -66,6 +66,15 @@ const tabs = [
   },
 ];
 
+(community.addons || []).map((addon) => {
+  addon.enabled &&
+    tabs.push({
+      title: addon.display_name,
+      view: "${REPL_DEVHUB}/widget/devhub.page.addon",
+      params: { addon },
+    });
+});
+
 const onShareClick = () =>
   clipboard
     .writeText(
@@ -174,7 +183,17 @@ return (
     </NavUnderline>
     {currentTab && (
       <div className="d-flex w-100 h-100" key={currentTab.title}>
-        <Widget src={currentTab.view} props={currentTab.params} />
+        <Widget
+          src={currentTab.view}
+          props={{
+            ...currentTab.params,
+            view, // default view for an addon, can come as a prop from a community or from a direct link to page.addon
+
+            // below is temporary prop drilling until kanban and github are migrated
+            permissions,
+            handle: community.handle,
+          }}
+        />
       </div>
     )}
   </div>