diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
index 92a597da..4c388232 100644
--- a/apps/builddao/widget/Compose.jsx
+++ b/apps/builddao/widget/Compose.jsx
@@ -1,33 +1,19 @@
-const { Avatar, Button } = VM.require("buildhub.near/widget/components") || {
-  Avatar: () => <></>,
-  Button: () => <></>,
-};
+const { Avatar, Button } = VM.require("buildhub.near/widget/components");
 
-const { DraftModal } =
-  VM.require("buildhub.near/widget/components.modals.DraftModal") ||
-  (() => <></>);
+Avatar = Avatar || (() => <></>);
+Button = Button || (() => <></>);
 
 const draftKey = props.feed.name || "draft";
 const draft = Storage.privateGet(draftKey);
 
-const autocompleteEnabled = true;
-
 if (draft === null) {
   return "";
 }
 
-State.init({
-  image: {},
-});
-
 const [view, setView] = useState("editor");
 const [postContent, setPostContent] = useState("");
 const [hideAdvanced, setHideAdvanced] = useState(true);
 const [labels, setLabels] = useState([]);
-const [showAccountAutocomplete, setShowAccountAutocomplete] = useState(false);
-const [mentionsArray, setMentionsArray] = useState([]);
-const [mentionInput, setMentionInput] = useState(null);
-const [handler, setHandler] = useState("update");
 
 setPostContent(draft || props.template);
 
@@ -37,6 +23,16 @@ function generateUID() {
   return randomNumber.toString(16).padStart(8, "0");
 }
 
+function tagsFromLabels(labels) {
+  return labels.reduce(
+    (newLabels, label) => ({
+      ...newLabels,
+      [label]: "",
+    }),
+    {}
+  );
+}
+
 const extractMentions = (text) => {
   const mentionRegex =
     /@((?:(?:[a-z\d]+[-_])*[a-z\d]+\.)*(?:[a-z\d]+[-_])*[a-z\d]+)/gi;
@@ -106,12 +102,6 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     text = checkAndAppendHashtag(text, hashtag);
   });
 
-  const content = {
-    type: "md",
-    image: state.image.cid ? { ipfs_cid: state.image.cid } : undefined,
-    text: text,
-  };
-
   const data = {
     // [feed.name]: {
     //   [postId]: {
@@ -127,7 +117,12 @@ const postToCustomFeed = ({ feed, text, labels }) => {
     //   },
     // },
     post: {
-      main: JSON.stringify(content),
+      main: JSON.stringify({
+        type: "md",
+        text,
+        // tags: tagsFromLabels(labels),
+        // postType: feed.name,
+      }),
     },
     index: {
       post: JSON.stringify({ key: "main", value: { type: "md" } }),
@@ -170,43 +165,6 @@ const postToCustomFeed = ({ feed, text, labels }) => {
   });
 };
 
-function textareaInputHandler(value) {
-  const words = value.split(/\s+/);
-  const allMentiones = words
-    .filter((word) => word.startsWith("@"))
-    .map((mention) => mention.slice(1));
-  const newMentiones = allMentiones.filter(
-    (item) => !mentionsArray.includes(item)
-  );
-  setMentionInput(newMentiones?.[0] ?? "");
-  setMentionsArray(allMentiones);
-  setShowAccountAutocomplete(newMentiones?.length > 0);
-  setPostContent(value);
-  setHandler("update");
-  Storage.privateSet(draftKey, value || "");
-}
-
-function autoCompleteAccountId(id) {
-  let currentIndex = 0;
-  const updatedDescription = postContent.replace(
-    /(?:^|\s)(@[^\s]*)/g,
-    (match) => {
-      if (currentIndex === mentionsArray.indexOf(mentionInput)) {
-        currentIndex++;
-        return ` @${id}`;
-      } else {
-        currentIndex++;
-        return match;
-      }
-    }
-  );
-  setPostContent(updatedDescription);
-  setShowAccountAutocomplete(false);
-  setMentionInput(null);
-  setHandler("autocompleteSelected");
-  Storage.privateSet(draftKey, updatedDescription || "");
-}
-
 const PostCreator = styled.div`
   display: flex;
   flex-direction: column;
@@ -217,51 +175,6 @@ const PostCreator = styled.div`
   border-radius: 12px;
 
   margin-bottom: 1rem;
-
-  .upload-image-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #f1f3f5;
-    color: #11181c;
-    border-radius: 40px;
-    height: 40px;
-    min-width: 40px;
-    font-size: 0;
-    border: none;
-    cursor: pointer;
-    transition: background 200ms, opacity 200ms;
-
-    &::before {
-      font-size: 16px;
-    }
-
-    &:hover,
-    &:focus {
-      background: #d7dbde;
-      outline: none;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-
-    span {
-      margin-left: 12px;
-    }
-  }
-
-  .d-inline-block {
-    display: flex !important;
-    gap: 12px;
-    margin: 0 !important;
-
-    .overflow-hidden {
-      width: 40px !important;
-      height: 40px !important;
-    }
-  }
 `;
 
 const TextareaWrapper = styled.div`
@@ -490,16 +403,6 @@ const LabelSelect = styled.div`
   }
 `;
 
-// To handle ifram refresh in order to trigger initialText change
-const [postUUID, setPostUUID] = useState(generateUID());
-const memoizedPostUUID = useMemo(() => postUUID, [postUUID]);
-
-useEffect(() => {
-  if (postContent === "") {
-    setPostUUID(generateUID());
-  }
-}, [postContent]);
-
 const avatarComponent = useMemo(() => {
   return (
     <div className="d-flex align-items-start gap-2">
@@ -511,236 +414,63 @@ const avatarComponent = useMemo(() => {
   );
 }, [context.accountId]);
 
-// for drafts
-const [showDraftsModal, setShowDraftsModal] = useState(false);
-const [draftEditMode, setDraftEditMode] = useState(false);
-const [checkedDrafts, setCheckDrafts] = useState([]);
-
-// handle deletion of drafts
-const handleDraftDelete = () => {
-  const savedDrafts = Storage.privateGet("savedDrafts") || "";
-  const drafts = JSON.parse(savedDrafts);
-  const newDrafts = drafts.filter((draft, i) => !checkedDrafts.includes(i));
-  Storage.privateSet("savedDrafts", JSON.stringify(newDrafts));
-  setCheckDrafts([]);
-};
-
-// handle draft save
-const onSaveDraft = () => {
-  const savedDrafts = Storage.privateGet("savedDrafts") || "";
-  const drafts = JSON.parse(savedDrafts) || [];
-  drafts.push(postContent);
-  Storage.privateSet("savedDrafts", JSON.stringify(drafts));
-};
-
-const DraftLabel = styled.span`
-  display: inline-flex;
-  padding: 12px;
-  align-items: center;
-  gap: 8px;
-
-  color: #fff;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 170%; /* 27.2px */
-`;
-
-const DraftItem = ({ draft, checked, isEdit }) => {
-  return (
-    <div
-      style={{
-        cursor: "pointer",
-        borderBottom: "1px solid #414247",
-        color: "#fff",
-      }}
-      className="d-flex align-items-center"
-    >
-      <DraftLabel className="w-100 text-truncate">
-        {isEdit && (
-          <i className={`bi bi-${checked ? "check-square" : "square"}`}></i>
-        )}
-        {draft}
-      </DraftLabel>
-    </div>
-  );
-};
-
-const RenderDrafts = () => {
-  const savedDrafts = Storage.privateGet("savedDrafts") || "";
-  const drafts = JSON.parse(savedDrafts);
-
-  const handleDraftSelect = (draft) => {
-    textareaInputHandler(draft);
-    setPostUUID(generateUID());
-    setShowDraftsModal(false);
-    setView("editor");
-  };
-
-  return (
-    <div className="d-flex flex-column gap-3">
-      {drafts.map((draft, i) => (
-        <div key={`draft-${i}`} onClick={() => handleDraftSelect(draft)}>
-          <DraftItem draft={draft} />
-        </div>
-      ))}
-      {drafts.length === 0 && <p style={{ color: "#fff" }}>No drafts saved</p>}
-    </div>
-  );
-};
-
-const EditDrafts = () => {
-  const savedDrafts = Storage.privateGet("savedDrafts") || "";
-  const drafts = JSON.parse(savedDrafts);
-
-  const handleDraftSelect = (draftIndex) => {
-    if (checkedDrafts.includes(draftIndex)) {
-      setCheckDrafts(checkedDrafts.filter((draft) => draft !== draftIndex));
-    } else {
-      setCheckDrafts([...checkedDrafts, draftIndex]);
-    }
-  };
-
-  return (
-    <div className="d-flex flex-column gap-3">
-      {drafts.map((draft, i) => (
-        <div key={`draft-${i}`} onClick={() => handleDraftSelect(i)}>
-          <DraftItem
-            isEdit={true}
-            draft={draft}
-            checked={checkedDrafts.includes(i)}
+return (
+  <PostCreator>
+    {avatarComponent}
+    <div style={{ border: "none" }}>
+      {view === "editor" ? (
+        <TextareaWrapper
+          className="markdown-editor"
+          data-value={postContent || ""}
+          key={props.feed.name}
+        >
+          <Widget
+            src="mob.near/widget/MarkdownEditorIframe"
+            props={{
+              initialText: postContent,
+              embedCss: MarkdownEditor,
+              onChange: (v) => {
+                setPostContent(v);
+                Storage.privateSet(draftKey, v || "");
+              },
+            }}
+          />
+        </TextareaWrapper>
+      ) : (
+        <MarkdownPreview>
+          <Widget
+            src="devhub.near/widget/devhub.components.molecule.MarkdownViewer"
+            props={{ text: postContent }}
           />
-        </div>
-      ))}
-      {drafts.length === 0 && <p style={{ color: "#fff" }}>No drafts saved</p>}
+        </MarkdownPreview>
+      )}
     </div>
-  );
-};
 
-return (
-  <div className="d-flex flex-column">
-    <Button
-      onClick={() => setShowDraftsModal(!showDraftsModal)}
-      variant="outline"
-      className="align-self-stretch mb-3"
-    >
-      Continue Drafts <i className="bi bi-arrow-right"></i>
-    </Button>
-    <DraftModal
-      open={showDraftsModal}
-      onOpenChange={() => setShowDraftsModal(!showDraftsModal)}
-      editButton={
-        draftEditMode ? (
-          <div className="d-flex align-items-center gap-3">
-            <Button type="icon" variant="outline" onClick={handleDraftDelete}>
-              <i className="bi bi-trash"></i>
-            </Button>
-            <Button
-              variant="outline"
-              onClick={() => setDraftEditMode(!draftEditMode)}
-            >
-              Done
-            </Button>
-          </div>
-        ) : (
-          <Button
-            variant="outline"
-            onClick={() => setDraftEditMode(!draftEditMode)}
-          >
-            Edit
-          </Button>
-        )
-      }
-      children={<div>{draftEditMode ? <EditDrafts /> : <RenderDrafts />}</div>}
-    />
-    <PostCreator>
-      <div className="d-flex align-items-center justify-content-between">
-        {avatarComponent}
-        <Button variant="outline" onClick={onSaveDraft}>
-          Save Draft
-        </Button>
-      </div>
-      <div style={{ border: "none" }}>
+    <div className="d-flex gap-3 align-self-end">
+      <Button
+        variant="outline"
+        onClick={() => setView(view === "editor" ? "preview" : "editor")}
+        style={{ fontSize: 14 }}
+      >
         {view === "editor" ? (
-          <TextareaWrapper
-            className="markdown-editor"
-            data-value={postContent || ""}
-            key={`${props.feed.name}-${memoizedPostUUID}`}
-          >
-            <Widget
-              src={"buildhub.near/widget/components.MarkdownEditorIframe"}
-              props={{
-                initialText: postContent,
-                data: { handler: handler, content: postContent },
-                onChange: (content) => {
-                  textareaInputHandler(content);
-                },
-                embedCss: MarkdownEditor,
-              }}
-            />
-            {autocompleteEnabled && showAccountAutocomplete && (
-              <Widget
-                src="buildhub.near/widget/components.AccountAutocomplete"
-                props={{
-                  term: mentionInput,
-                  onSelect: autoCompleteAccountId,
-                  onClose: () => setShowAccountAutocomplete(false),
-                }}
-              />
-            )}
-          </TextareaWrapper>
+          <>
+            Preview <i className="bi bi-eye"></i>
+          </>
         ) : (
-          <MarkdownPreview>
-            <Widget
-              src="devhub.near/widget/devhub.components.molecule.MarkdownViewer"
-              props={{ text: postContent }}
-            />
-            {state.image.cid && (
-              <Widget
-                src="mob.near/widget/Image"
-                props={{
-                  image: state.image.cid
-                    ? { ipfs_cid: state.image.cid }
-                    : undefined,
-                }}
-              />
-            )}
-          </MarkdownPreview>
-        )}
-      </div>
-
-      <div className="d-flex gap-3 align-self-end">
-        {view === "editor" && (
-          <IpfsImageUpload
-            image={state.image}
-            className="upload-image-button bi bi-image"
-          />
+          <>
+            Edit <i className="bi bi-pencil-square"></i>
+          </>
         )}
-        <Button
-          variant="outline"
-          onClick={() => setView(view === "editor" ? "preview" : "editor")}
-          style={{ fontSize: 14 }}
-        >
-          {view === "editor" ? (
-            <>
-              Preview <i className="bi bi-eye"></i>
-            </>
-          ) : (
-            <>
-              Edit <i className="bi bi-pencil-square"></i>
-            </>
-          )}
-        </Button>
-        <Button
-          variant="primary"
-          style={{ fontSize: 14 }}
-          onClick={() =>
-            postToCustomFeed({ feed: props.feed, text: postContent, labels })
-          }
-        >
-          Post {props.feed.name}
-        </Button>
-      </div>
-    </PostCreator>
-  </div>
+      </Button>
+      <Button
+        variant="primary"
+        style={{ fontSize: 14 }}
+        onClick={() =>
+          postToCustomFeed({ feed: props.feed, text: postContent, labels })
+        }
+      >
+        Post {props.feed.name}
+      </Button>
+    </div>
+  </PostCreator>
 );
diff --git a/apps/builddao/widget/components.jsx b/apps/builddao/widget/components.jsx
index b73c4264..38499bad 100644
--- a/apps/builddao/widget/components.jsx
+++ b/apps/builddao/widget/components.jsx
@@ -33,11 +33,7 @@ function Pagination({
 
 function Post(props) {
   return (
-    <Widget
-      src={"buildhub.near/widget/components.Post"}
-      loading={<div className="w-100" style={{ height: "200px" }} />}
-      props={{ ...props }}
-    />
+    <Widget src={"buildhub.near/widget/components.Post"} props={{ ...props }} />
   );
 }
 
diff --git a/apps/builddao/widget/components/AccountAutocomplete.jsx b/apps/builddao/widget/components/AccountAutocomplete.jsx
deleted file mode 100644
index 5823f397..00000000
--- a/apps/builddao/widget/components/AccountAutocomplete.jsx
+++ /dev/null
@@ -1,147 +0,0 @@
-if (!context.accountId || !props.term) return <></>;
-
-let results = [];
-const filterAccounts = props.filterAccounts ?? []; //  hide certain accounts from the list
-const profilesData = Social.get("*/profile/name", "final") || {};
-const followingData = Social.get(
-  `${context.accountId}/graph/follow/**`,
-  "final"
-);
-if (!profilesData) return <></>;
-const profiles = Object.entries(profilesData);
-const term = (props.term || "").replace(/\W/g, "").toLowerCase();
-const limit = 5;
-
-for (let i = 0; i < profiles.length; i++) {
-  let score = 0;
-  const accountId = profiles[i][0];
-  const accountIdSearch = profiles[i][0].replace(/\W/g, "").toLowerCase();
-  const nameSearch = (profiles[i][1]?.profile?.name || "")
-    .replace(/\W/g, "")
-    .toLowerCase();
-  const accountIdSearchIndex = accountIdSearch.indexOf(term);
-  const nameSearchIndex = nameSearch.indexOf(term);
-
-  if (accountIdSearchIndex > -1 || nameSearchIndex > -1) {
-    score += 10;
-
-    if (accountIdSearchIndex === 0) {
-      score += 10;
-    }
-    if (nameSearchIndex === 0) {
-      score += 10;
-    }
-    if (followingData[accountId] === "") {
-      score += 30;
-    }
-
-    results.push({
-      accountId,
-      score
-    });
-  }
-}
-
-results.sort((a, b) => b.score - a.score);
-results = results.slice(0, limit);
-if (filterAccounts?.length > 0) {
-  results = results.filter((item) => !filterAccounts?.includes(item.accountId));
-}
-
-function onResultClick(id) {
-  props.onSelect && props.onSelect(id);
-}
-
-const Wrapper = styled.div`
-  position: relative;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    right: 0;
-    width: 6px;
-    height: 100%;
-    z-index: 10;
-  }
-`;
-
-const Scroller = styled.div`
-  position: relative;
-  display: flex;
-  padding: 6px;
-  gap: 6px;
-  overflow: auto;
-  scroll-behavior: smooth;
-  align-items: center;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  > * {
-    max-width: 175px;
-    flex-grow: 0;
-    flex-shrink: 0;
-
-    button {
-      border: 1px solid #eceef0;
-      background: #fff !important;
-      border-radius: 6px;
-      padding: 3px 6px;
-      transition: all 200ms;
-
-      &:focus,
-      &:hover {
-        border-color: #687076;
-      }
-    }
-  }
-`;
-
-const CloseButton = styled.button`
-    background: none;
-    border: none;
-    display: block;
-    padding: 12px;
-    color white;
-    transition: all 200ms;
-
-    &:hover {
-       transform:scale(1.2);
-    }
-`;
-
-const ProfileCardWrapper = styled.div`
-  opacity: 0.8;
-`;
-
-if (results.length === 0) return <></>;
-
-return (
-  <Wrapper>
-    <Scroller>
-      <CloseButton tabIndex={-1} type="button" onClick={props.onClose}>
-        <i className="bi bi-x-circle" />
-      </CloseButton>
-
-      {results.map((result) => {
-        return (
-          <ProfileCardWrapper>
-            <Widget
-              key={result.accountId}
-              src="near/widget/AccountProfile"
-              props={{
-                avatarSize: "34px",
-                accountId: result.accountId,
-                onClick: onResultClick,
-                overlayPlacement: "bottom"
-              }}
-            />
-          </ProfileCardWrapper>
-        );
-      })}
-    </Scroller>
-  </Wrapper>
-);
diff --git a/apps/builddao/widget/components/Checkbox.jsx b/apps/builddao/widget/components/Checkbox.jsx
index 1f3bed49..27387079 100644
--- a/apps/builddao/widget/components/Checkbox.jsx
+++ b/apps/builddao/widget/components/Checkbox.jsx
@@ -7,8 +7,6 @@ const CheckboxLabel = styled.label`
   padding: 12px;
   align-items: center;
   gap: 8px;
-  cursor: pointer;
-  max-width: 100%;
 
   color: #fff;
   font-size: 16px;
@@ -17,20 +15,20 @@ const CheckboxLabel = styled.label`
   line-height: 170%; /* 27.2px */
 `;
 
-function Checkbox({ className, value, onChange, label }) {
+function Checkbox({ value, onChange, label }) {
   return (
-    <div key={`Checkbox-${label ?? "No-label"}`} style={{ maxWidth: "100%" }}>
+    <div key={`Checkbox-${label ?? "No-label"}`}>
       <CheckboxLabel>
         <CheckboxInput type="checkbox" checked={value} onChange={onChange} />
         {value ? (
-          <i style={{ cursor: "pointer" }} className="bi bi-check-square"></i>
+          <i className="bi bi-check-square"></i>
         ) : (
-          <i style={{ cursor: "pointer" }} className="bi bi-square"></i>
+          <i className="bi bi-square"></i>
         )}
-        <span className={className}>{label}</span>
+        {label}
       </CheckboxLabel>
     </div>
   );
 }
 
-return { Checkbox };
+return { Checkbox };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/MarkdownEditorIframe.jsx b/apps/builddao/widget/components/MarkdownEditorIframe.jsx
deleted file mode 100644
index ffb2e26b..00000000
--- a/apps/builddao/widget/components/MarkdownEditorIframe.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-const data = props.data ?? "# Hello World\n\n";
-const embedCss = props.embedCss || "";
-
-const code = `
-<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
-<script src="https://unpkg.com/react-markdown-editor-lite@1.3.4/lib/index.js" crossorigin></script>
-<link rel="stylesheet" href="https://unpkg.com/react-markdown-editor-lite@1.3.4/lib/index.css" />
-
-<style>
-${embedCss}
-</style>
-
-<div id="react-root"></div>
-
-<script>
-let isEditorInitialized = false;
-let editorInstance = null;
-function MarkdownEditor(props) {
-  const [value, setValue] = React.useState(props.initialText || "");
-  const updateEditorState = (text) => {
-    setValue(text);
-    window.top.postMessage(text, "*");
-  };
-  editorInstance = { updateEditorState };
-  return React.createElement(ReactMarkdownEditorLite.default, {
-      value,
-      view: { menu: true, md: true, html: false },
-      canView: { menu: true, md: false, html: false, fullScreen: false, hideMenu: true },
-      onChange: ({ text }) => {
-        updateEditorState(text)
-      },
-      renderHTML: () => {},
-      className: "full",
-    }); 
-}
-
-const domContainer = document.querySelector('#react-root');
-const root = ReactDOM.createRoot(domContainer);
-
-window.addEventListener("message", (event) => {
-  if (!isEditorInitialized) {
-    root.render(React.createElement(MarkdownEditor, {
-        initialText: event.data.content }));
-        isEditorInitialized = true;
-  } else {
-    if (event.data.handler === 'autocompleteSelected') {
-      if (editorInstance) {
-        editorInstance.updateEditorState(event.data.content);
-      }
-      }
-  }
-});
-
-</script>
-`;
-return (
-  <iframe
-    className="w-100 h-100"
-    srcDoc={code}
-    message={data}
-    onMessage={props.onChange}
-  />
-);
diff --git a/apps/builddao/widget/components/Modal.jsx b/apps/builddao/widget/components/Modal.jsx
index c029e3b7..db7409fe 100644
--- a/apps/builddao/widget/components/Modal.jsx
+++ b/apps/builddao/widget/components/Modal.jsx
@@ -22,7 +22,7 @@ const Content = styled.div`
   max-width: 1000px;
   padding: 24px;
   outline: none !important;
-  background: #23242b;
+  background: #23242B;
   border-radius: 16px;
   color: white;
 `;
@@ -36,14 +36,14 @@ const NoButton = styled.button`
 `;
 
 const CloseContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  padding-bottom: 24px;
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    padding-bottom: 24px;
 `;
 
 const Icon = styled.i`
-  font-size: 24px;
+    font-size: 24px;
 `;
 
 function Modal({ children, open, onOpenChange, toggle, toggleContainerProps }) {
@@ -72,4 +72,4 @@ function Modal({ children, open, onOpenChange, toggle, toggleContainerProps }) {
   );
 }
 
-return { Modal };
+return { Modal };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/modals/DraftModal.jsx b/apps/builddao/widget/components/modals/DraftModal.jsx
deleted file mode 100644
index 825338a6..00000000
--- a/apps/builddao/widget/components/modals/DraftModal.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-const { Button } = VM.require("buildhub.near/widget/components.Button");
-
-const toggle = props.toggle ?? <Button variant="primary">Open Modal</Button>;
-
-const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: grid;
-  place-items: center;
-  overflow-y: auto;
-  z-index: 1000;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(11, 12, 20, 0.5);
-`;
-
-const Content = styled.div`
-  min-width: 500px;
-  max-width: 1000px;
-  padding: 24px;
-  outline: none !important;
-  background: #23242b;
-  border-radius: 16px;
-  color: white;
-
-  @media screen and (max-width: 768px) {
-    max-width: 90%;
-    min-width: 50%;
-    width: 100%;
-  }
-`;
-
-const NoButton = styled.button`
-  background: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  box-shadow: none;
-`;
-
-const CloseContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  padding-bottom: 24px;
-`;
-
-const Icon = styled.i`
-  font-size: 24px;
-`;
-
-function DraftModal({
-  children,
-  open,
-  onOpenChange,
-  toggle,
-  toggleContainerProps,
-  editButton,
-}) {
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>
-        <NoButton {...toggleContainerProps}>{toggle}</NoButton>
-      </Dialog.Trigger>
-      <Dialog.Overlay asChild>
-        <Overlay>
-          <Dialog.Content asChild>
-            <Content>
-              <div className="d-flex align-items-center justify-content-between">
-                <Dialog.Trigger asChild>
-                  <p className="mb-0">
-                    <i className="bi bi-chevron-left"></i> Drafts
-                  </p>
-                </Dialog.Trigger>
-                {editButton}
-              </div>
-              {children}
-            </Content>
-          </Dialog.Content>
-        </Overlay>
-      </Dialog.Overlay>
-    </Dialog.Root>
-  );
-}
-
-return { DraftModal };