diff --git a/src/devhub/entity/addon/blog/Configurator.jsx b/src/devhub/entity/addon/blog/Configurator.jsx
index 2fef06f06..65db9f021 100644
--- a/src/devhub/entity/addon/blog/Configurator.jsx
+++ b/src/devhub/entity/addon/blog/Configurator.jsx
@@ -76,7 +76,7 @@ const handleSubmit = () => {
 };
 
 return (
-  <Tile className="p-3">
+  <Tile className="p-3 bg-white">
     <ul className="nav nav-tabs" id="blogConfiguratorTabs" role="tablist">
       <li className="nav-item" role="presentation">
         <button
@@ -267,7 +267,7 @@ return (
       >
         <Container>
           <Widget
-            src={"${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Creator"}
+            src={"${REPL_DEVHUB}/widget/devhub.entity.addon.blog.editor.index"}
             props={{
               data,
               handle,
diff --git a/src/devhub/entity/addon/blog/Feed.jsx b/src/devhub/entity/addon/blog/Feed.jsx
index 6baa7f666..e031e8d5c 100644
--- a/src/devhub/entity/addon/blog/Feed.jsx
+++ b/src/devhub/entity/addon/blog/Feed.jsx
@@ -1,42 +1,14 @@
-const { Item } = props;
+const { Item, Layout } = props;
 
-const Container = styled.div``;
-
-const Layout = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
+Layout = Layout || (() => <></>);
 
-  @media screen and (max-width: 768px) {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-`;
+const Container = styled.div``;
 
 const Loader = styled.div`
   text-align: center;
   padding: 20px;
 `;
 
-const Notification = styled.p`
-  text-align: center;
-  color: #3252a6;
-`;
-
-const Heading = styled.h3`
-  color: #151515;
-  font-size: 2.5rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 120%; /* 48px */
-  margin-bottom: 2rem;
-
-  @media screen and (max-width: 768px) {
-    font-size: 2rem;
-  }
-`;
-
 const QUERYAPI_ENDPOINT = `https://near-queryapi.api.pagoda.co/v1/graphql/`;
 const DISPLAY_COUNT = 10;
 
@@ -107,21 +79,19 @@ const fetchPostIds = (offset) => {
   if (loading) return;
   setLoading(true);
   const variables = { limit: DISPLAY_COUNT, offset, where: buildWhereClause() };
-  const result = fetchGraphQL(query, "DevhubPostsQuery", variables).then(
-    (result) => {
-      if (result.status === 200) {
-        if (result.body.data) {
-          const data = result.body.data[queryName];
-          const newPostIds = data.map((p) => p.post_id);
-          setPostIds(offset === 0 ? newPostIds : [...postIds, ...newPostIds]);
-          setHasNext(data.length >= variables.limit);
-        } else {
-          console.error("GraphQL Error:", result.errors);
-        }
-        setLoading(false);
+  fetchGraphQL(query, "DevhubPostsQuery", variables).then((result) => {
+    if (result.status === 200) {
+      if (result.body.data) {
+        const data = result.body.data[queryName];
+        const newPostIds = data.map((p) => p.post_id);
+        setPostIds(offset === 0 ? newPostIds : [...postIds, ...newPostIds]);
+        setHasNext(data.length >= variables.limit);
+      } else {
+        console.error("GraphQL Error:", result.errors);
       }
+      setLoading(false);
     }
-  );
+  });
 };
 
 useEffect(() => {
@@ -160,7 +130,6 @@ return (
         hasMore={hasNext}
         loader={renderLoader()}
       >
-        <Heading>Latest Blog Posts</Heading>
         <Layout>
           {/* Layout */}
           {postIds.map(cachedRenderItem)}
diff --git a/src/devhub/entity/addon/blog/Viewer.jsx b/src/devhub/entity/addon/blog/Viewer.jsx
index 4e53f6319..e42425e14 100644
--- a/src/devhub/entity/addon/blog/Viewer.jsx
+++ b/src/devhub/entity/addon/blog/Viewer.jsx
@@ -8,11 +8,26 @@ const { includeLabels, excludeLabels, layout, handle } = props;
 
 const Grid = styled.div`
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
 
-  @media (min-width: 769px) {
-    grid-template-columns: repeat(2, 1fr);
+  @media screen and (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+`;
+
+const Heading = styled.h3`
+  color: #151515;
+  font-size: 2.5rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%; /* 48px */
+  margin-bottom: 2rem;
+
+  @media screen and (max-width: 768px) {
+    font-size: 2rem;
   }
 `;
 
@@ -35,6 +50,7 @@ function BlogCard(postId) {
 
 return (
   <div class="row w-100">
+    <Heading>Latest Blog Posts</Heading>
     <Widget
       src={"${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Feed"}
       // TODO: This needs to filter by more labels
@@ -42,8 +58,7 @@ return (
         includeLabels: ["blog", handle, ...(includeTags || [])], // make sure this has the community handle
         excludeLabels: excludeTags,
         renderItem: BlogCard,
-        Layout: ({ children }) =>
-          layout === "grid" ? <Grid>{children}</Grid> : children,
+        Layout: ({ children }) => <Grid>{children}</Grid>,
       }}
     />
   </div>
diff --git a/src/devhub/entity/addon/blog/Creator.jsx b/src/devhub/entity/addon/blog/editor/content.jsx
similarity index 84%
rename from src/devhub/entity/addon/blog/Creator.jsx
rename to src/devhub/entity/addon/blog/editor/content.jsx
index 417fb3146..14b7291f6 100644
--- a/src/devhub/entity/addon/blog/Creator.jsx
+++ b/src/devhub/entity/addon/blog/editor/content.jsx
@@ -60,7 +60,7 @@ const FormContainer = styled.div`
   }
 `;
 
-const { data, handle } = props;
+const { data, handle, onSubmit } = props;
 
 const initialData = data; // TODO: Check Storage API
 
@@ -70,7 +70,9 @@ const [subtitle, setSubtitle] = useState(initialData.subtitle || "");
 const [description, setDescription] = useState(initialData.description || "");
 const [author, setAuthor] = useState(initialData.author || "");
 const [previewMode, setPreviewMode] = useState("card"); // "card" or "page"
-const [date, setDate] = useState(new Date().toISOString().split("T")[0]);
+const [date, setDate] = useState(
+  (initialData.date && new Date(initialData.date)) || new Date()
+);
 const [category, setCategory] = useState("guide");
 
 // Legacy State.init for IpfsUploader
@@ -80,6 +82,16 @@ State.init({
   },
 });
 
+let timeoutId;
+
+const debounce = (func, delay) => {
+  if (!delay) {
+    delay = 300;
+  }
+  clearTimeout(timeoutId);
+  timeoutId = setTimeout(func, delay);
+};
+
 const Container = styled.div`
   width: 100%;
   margin: 0 auto;
@@ -98,30 +110,22 @@ const hasDataChanged = () => {
 };
 
 const handlePublish = () => {
-  Near.call({
-    contractName: "${REPL_DEVHUB_CONTRACT}",
-    methodName: "add_post",
-    args: {
-      labels: ["blog", handle],
-      body: {
-        post_type: "Comment",
-        description: JSON.stringify({
-          title,
-          subtitle,
-          description,
-          date,
-          content,
-          author,
-          image: state.image.cid,
-          tags: data.includeLabels,
-          community: handle,
-        }),
-        comment_version: "V2",
+  onSubmit &&
+    onSubmit(
+      {
+        id: data.id || undefined,
+        title,
+        subtitle,
+        description,
+        date,
+        content,
+        author,
+        image: state.image.cid,
+        tags: data.includeLabels,
+        community: handle,
       },
-    },
-    deposit: Big(10).pow(21).mul(2),
-    gas: Big(10).pow(12).mul(100),
-  });
+      data.id !== undefined
+    );
 };
 
 function Preview() {
@@ -129,30 +133,34 @@ function Preview() {
     case "card": {
       return (
         <Card
-          title={title}
-          subtitle={subtitle}
-          description={description}
-          date={date}
-          content={content}
-          author={author}
-          image={state.image}
-          tags={data.includeLabels} // filter out "blog" and community handle?
-          community={handle}
+          data={{
+            title,
+            subtitle,
+            description,
+            date,
+            content,
+            author,
+            image: state.image,
+            tags: data.includeLabels,
+            community: handle,
+          }}
         />
       );
     }
     case "page": {
       return (
         <Page
-          title={title}
-          subtitle={subtitle}
-          description={description}
-          date={date}
-          content={content}
-          author={author}
-          image={state.image}
-          tags={data.includeLabels} // filter out "blog" and community handle?
-          community={handle}
+          data={{
+            title,
+            subtitle,
+            description,
+            date,
+            content,
+            author,
+            image: state.image,
+            tags: data.includeLabels,
+            community: handle,
+          }}
         />
       );
     }
@@ -219,7 +227,7 @@ return (
                 src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
                 props={{
                   className: "flex-grow-1",
-                  onChange: (e) => setTitle(e.target.value),
+                  onChange: debounce((e) => setTitle(e.target.value)),
                   value: title,
                   placeholder: "Title",
                 }}
@@ -233,7 +241,7 @@ return (
                 src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
                 props={{
                   className: "flex-grow-1",
-                  onChange: (e) => setSubtitle(e.target.value),
+                  onChange: debounce((e) => setSubtitle(e.target.value)),
                   value: subtitle,
                   placeholder: "Subtitle",
                 }}
@@ -270,7 +278,7 @@ return (
                 src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
                 props={{
                   className: "flex-grow-1",
-                  onChange: (e) => setDescription(e.target.value),
+                  onChange: debounce((e) => setDescription(e.target.value)),
                   value: description,
                   placeholder: "Description",
                 }}
@@ -284,28 +292,28 @@ return (
                 src="${REPL_DEVHUB}/widget/devhub.components.molecule.Input"
                 props={{
                   className: "flex-grow-1",
-                  onChange: (e) => setAuthor(e.target.value),
+                  onChange: debounce((e) => setAuthor(e.target.value)),
                   value: author,
                   placeholder: "Author",
                 }}
               />
             </div>
           </div>
-          <div>
-            <h5>Content</h5>
-            <Widget
-              src="${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownEditor"
-              props={{ data: { content }, onChange: setContent }}
-            />
-          </div>
           <div>
             <h5>Date</h5>
             <input
               type="date"
-              value={date}
+              value={date.toISOString().split("T")[0]}
               onChange={(e) => setDate(e.target.value)}
             />
           </div>
+          <div>
+            <h5>Content</h5>
+            <Widget
+              src="${REPL_DEVHUB}/widget/devhub.components.molecule.MarkdownEditor"
+              props={{ data: { content }, onChange: setContent }}
+            />
+          </div>
         </FormContainer>
         <div
           className={"d-flex align-items-center justify-content-end gap-3 mt-4"}
diff --git a/src/devhub/entity/addon/blog/editor/index.jsx b/src/devhub/entity/addon/blog/editor/index.jsx
new file mode 100644
index 000000000..8309466e0
--- /dev/null
+++ b/src/devhub/entity/addon/blog/editor/index.jsx
@@ -0,0 +1,71 @@
+let theme = props.theme;
+let variables = props.variables;
+
+if (!variables) {
+  variables = ``;
+}
+
+if (!theme) {
+  theme = ``;
+}
+
+const Root = styled.div`
+  ${variables}
+  ${theme}
+
+  a {
+    text-decoration: none;
+    color: var(--base900);
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`;
+
+// What would be the first steps?
+// Create this container and an empty provider
+// Provider has some items, onChange, onSubmit console logs
+// Create a layout that takes in Editor
+
+return (
+  <Root>
+    {/* Get any layout */}
+    <Container>
+      <Widget
+        src="${REPL_DEVHUB}/widget/devhub.entity.addon.blog.editor.provider"
+        props={{
+          handle: props.handle,
+          Layout: (providerProps) => {
+            const { data, onChange, onSubmit, onCancel, getData } =
+              providerProps;
+            return (
+              <Widget
+                src="${REPL_DEVHUB}/widget/devhub.entity.addon.blog.editor.layout"
+                props={{
+                  getData,
+                  Sidebar: (p) => (
+                    <Widget
+                      src="${REPL_DEVHUB}/widget/devhub.entity.addon.blog.editor.sidebar"
+                      props={{ items: data, ...p }}
+                    />
+                  ),
+                  Content: (p) => (
+                    <Widget
+                      src="${REPL_DEVHUB}/widget/devhub.entity.addon.blog.editor.content"
+                      props={{ onChange, onCancel, onSubmit, ...p }}
+                    />
+                  ),
+                }}
+              />
+            );
+          },
+        }}
+      />
+    </Container>
+  </Root>
+);
diff --git a/src/devhub/entity/addon/blog/editor/layout.jsx b/src/devhub/entity/addon/blog/editor/layout.jsx
new file mode 100644
index 000000000..88a80399e
--- /dev/null
+++ b/src/devhub/entity/addon/blog/editor/layout.jsx
@@ -0,0 +1,35 @@
+const { Sidebar, Content, getData } = props;
+
+const [selectedItem, setSelectedItem] = useState(null);
+
+const handleItemClick = (item) => {
+  if (item) {
+    const data = getData(item);
+    setSelectedItem(data);
+  } else {
+    setSelectedItem(null);
+  }
+};
+
+return (
+  <div
+    className="template"
+    style={{ display: "flex", width: "100%", height: "100%" }}
+  >
+    <div
+      className="left-panel"
+      style={{
+        margin: "20px 20px 80px 20px",
+      }}
+    >
+      <Sidebar selectedItem={selectedItem} handleItemClick={handleItemClick} />
+    </div>
+    <div
+      className="right-panel"
+      style={{ flex: 1, width: 0, overflow: "scroll" }}
+      key={selectedItem.id}
+    >
+      <Content data={selectedItem} />
+    </div>
+  </div>
+);
diff --git a/src/devhub/entity/addon/blog/editor/preview.jsx b/src/devhub/entity/addon/blog/editor/preview.jsx
new file mode 100644
index 000000000..3582ee8f0
--- /dev/null
+++ b/src/devhub/entity/addon/blog/editor/preview.jsx
@@ -0,0 +1,6 @@
+return (
+  <div>
+    <h1>Preview</h1>
+    <p>{JSON.stringify(props)}</p>
+  </div>
+);
diff --git a/src/devhub/entity/addon/blog/editor/provider.jsx b/src/devhub/entity/addon/blog/editor/provider.jsx
new file mode 100644
index 000000000..9fc958a76
--- /dev/null
+++ b/src/devhub/entity/addon/blog/editor/provider.jsx
@@ -0,0 +1,141 @@
+const { getPost } =
+  VM.require("${REPL_DEVHUB}/widget/core.adapter.devhub-contract") ||
+  (() => {});
+
+const { Layout, handle } = props;
+
+const QUERYAPI_ENDPOINT = `https://near-queryapi.api.pagoda.co/v1/graphql/`;
+
+const fetchGraphQL = (operationsDoc, operationName, variables) => {
+  return fetch(QUERYAPI_ENDPOINT, {
+    method: "POST",
+    headers: { "x-hasura-role": `bo_near` },
+    body: JSON.stringify({
+      query: operationsDoc,
+      variables: variables,
+      operationName: operationName,
+    }),
+  });
+};
+
+const queryName =
+  props.queryName ?? `bo_near_devhub_v17_posts_with_latest_snapshot`;
+
+const query = `query DevhubPostsQuery($limit: Int = 100, $offset: Int = 0, $where: ${queryName}_bool_exp = {}) {
+    ${queryName}(
+      limit: $limit
+      offset: $offset
+      order_by: {block_height: desc}
+      where: $where
+    ) {
+      post_id
+    }
+  }
+`;
+
+const includeLabels = ["blog", handle];
+
+const buildWhereClause = () => {
+  let where = {};
+  if (props.author) {
+    where = { author_id: { _eq: props.author }, ...where };
+  }
+  if (props.term) {
+    where = { description: { _ilike: `%${props.term}%` }, ...where };
+  }
+  if (includeLabels && Array.isArray(includeLabels)) {
+    const labelConditions = includeLabels.map((label) => ({
+      labels: { _contains: label },
+    }));
+
+    where = { _and: [...labelConditions, where] };
+  }
+  if (props.excludeLabels && Array.isArray(props.excludeLabels)) {
+    const labelConditions = props.excludeLabels.map((label) => ({
+      labels: { _nin: label },
+    }));
+
+    where = { _and: [...labelConditions, where] };
+  }
+  if (!props.recency) {
+    where = { parent_id: { _is_null: true }, ...where };
+  }
+  return where;
+};
+
+const variables = { limit: DISPLAY_COUNT, offset, where: buildWhereClause() };
+
+const posts = fetch(QUERYAPI_ENDPOINT, {
+  method: "POST",
+  headers: { "x-hasura-role": `bo_near` },
+  body: JSON.stringify({
+    query: query,
+    variables: variables,
+    operationName: "DevhubPostsQuery",
+  }),
+});
+
+const handleOnChange = (v) => {
+  console.log("onChange", v);
+};
+
+const handleGetData = (v) => {
+  const postId = parseInt(v);
+  const post = getPost({ post_id: postId });
+  const description = JSON.parse(post.snapshot.description || "null") || {};
+
+  return {
+    id: postId,
+    ...description,
+  };
+};
+
+const handleOnSubmit = (v, isEdit) => {
+  console.log(isEdit);
+  if (isEdit) {
+    Near.call({
+      contractName: "${REPL_DEVHUB_CONTRACT}",
+      methodName: "edit_post",
+      args: {
+        id: v.id,
+        labels: ["blog", handle],
+        body: {
+          post_type: "Comment",
+          description: JSON.stringify(v),
+          comment_version: "V2",
+        },
+      },
+      deposit: Big(10).pow(21).mul(2),
+      gas: Big(10).pow(12).mul(100),
+    });
+  } else {
+    Near.call({
+      contractName: "${REPL_DEVHUB_CONTRACT}",
+      methodName: "add_post",
+      args: {
+        labels: ["blog", handle],
+        body: {
+          post_type: "Comment",
+          description: JSON.stringify(v),
+          comment_version: "V2",
+        },
+      },
+      deposit: Big(10).pow(21).mul(2),
+      gas: Big(10).pow(12).mul(100),
+    });
+  }
+};
+
+const handleOnCancel = (v) => {
+  console.log("onCancel", v);
+};
+
+return (
+  <Layout
+    data={posts.body.data.bo_near_devhub_v17_posts_with_latest_snapshot || []}
+    getData={handleGetData}
+    onChange={handleOnChange}
+    onSubmit={handleOnSubmit}
+    onCancel={handleOnCancel}
+  />
+);
diff --git a/src/devhub/entity/addon/blog/editor/sidebar.jsx b/src/devhub/entity/addon/blog/editor/sidebar.jsx
new file mode 100644
index 000000000..8d6f83d7f
--- /dev/null
+++ b/src/devhub/entity/addon/blog/editor/sidebar.jsx
@@ -0,0 +1,42 @@
+const { items, handleItemClick, selectedItem } = props;
+
+const SidebarContainer = styled.div`
+  background-color: #f0f0f0;
+  padding: 16px;
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  gap: 2px;
+`;
+
+const SidebarButton = styled.button`
+  display: flex;
+  padding: 14px 16px;
+  text-align: center;
+  cursor: pointer;
+  gap: 16px;
+  width: 100%;
+
+  border-radius: 4px;
+  border: 1px solid #00ec97;
+
+  background-color: ${({ selected }) => (selected ? "#00ec97" : "white")};
+  color: ${({ selected }) => (selected ? "white" : "black")};
+`;
+
+return (
+  <SidebarContainer>
+    <SidebarButton onClick={() => handleItemClick(null)}>New</SidebarButton>
+    {(items || []).map((it) => (
+      <SidebarButton
+        key={it.post_id}
+        selected={selectedItem.id === it.post_id}
+        onClick={() => handleItemClick(it.post_id)}
+      >
+        {it.post_id}
+      </SidebarButton>
+    ))}
+  </SidebarContainer>
+);
diff --git a/src/devhub/page/blog.jsx b/src/devhub/page/blog.jsx
index bf80c6c82..71034a705 100644
--- a/src/devhub/page/blog.jsx
+++ b/src/devhub/page/blog.jsx
@@ -4,9 +4,20 @@ const { Page } =
   VM.require("${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Page") ||
   (() => <></>);
 
+if (id) {
+  return (
+    <Widget
+      src="${REPL_DEVHUB}/widget/devhub.entity.post.Postv2"
+      props={{ postKey: id, template: (p) => <Page {...(p || {})} /> }}
+    />
+  );
+}
+
 return (
+  // I like that this reduces duplicate code with the Viewer, but I don't like that "Latest Blog Posts" carries over...
+  // TOOD: create a common blog feed... I think the addon.blog.Feed naming is confusing, as this should be a generic feed component.
   <Widget
-    src="${REPL_DEVHUB}/widget/devhub.entity.post.Postv2"
-    props={{ postKey: id, template: (p) => <Page {...(p || {})} /> }}
+    src={"${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Viewer"}
+    props={{ includeLabels: ["blog"], layout: "grid" }} // what is DevDAO label?
   />
 );