diff --git a/package.json b/package.json
index 5f827604..af841d56 100644
--- a/package.json
+++ b/package.json
@@ -94,11 +94,12 @@
     "@polkadot/ui-assets": "^0.52.0-beta.3",
     "@subsocial/api": "^0.2.15",
     "@subsocial/types": "^0.1.29",
-    "@subsocial/utils": "^0.1.21",
+    "@subsocial/utils": "^0.1.23",
     "@zeit/next-css": "^1.0.1",
     "antd": "^3.25.0",
     "antd-mobile": "^2.3.1",
     "axios": "^0.18.0",
+    "brace": "^0.11.1",
     "dotenv-webpack": "^1.7.0",
     "formik": "^1.5.0",
     "lodash.isempty": "^4.4.0",
@@ -108,11 +109,13 @@
     "moment-timezone": "^0.5.26",
     "next": "^9.1.1",
     "query-string": "^6.2.0",
+    "react-ace": "^8.1.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-device-detect": "^1.11.14",
     "react-markdown": "^4.0.6",
     "react-router-hash-link": "^1.2.2",
     "react-tooltip": "^3.9.2",
+    "react-twitter-widgets": "^1.7.1",
     "store": "^2.0.12",
     "strip-markdown": "^3.0.3",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
diff --git a/public/play_youtube.png b/public/play_youtube.png
new file mode 100644
index 00000000..c2157f40
Binary files /dev/null and b/public/play_youtube.png differ
diff --git a/src/components/blogs/EditBlog.tsx b/src/components/blogs/EditBlog.tsx
index efacb2d0..1ec9557c 100644
--- a/src/components/blogs/EditBlog.tsx
+++ b/src/components/blogs/EditBlog.tsx
@@ -120,7 +120,7 @@ const InnerForm = (props: FormProps) => {
 
   return (<>
     <HeadMeta title={title}/>
-    <Section className='EditEntityBox' title={title}>
+    <Section className='EditEntityBox bookPage' title={title}>
       <Form className='ui form DfForm EditEntityForm'>
 
         <LabelledText name='name' label='Blog name' placeholder='Name of your blog.' {...props} />
diff --git a/src/components/blogs/ViewBlog.tsx b/src/components/blogs/ViewBlog.tsx
index ad9ae116..f4911851 100644
--- a/src/components/blogs/ViewBlog.tsx
+++ b/src/components/blogs/ViewBlog.tsx
@@ -33,6 +33,7 @@ import { Blog } from '@subsocial/types/substrate/interfaces';
 import { BlogData, ExtendedPostData } from '@subsocial/types/dto'
 import { getSubsocialApi } from '../utils/SubsocialConnect';
 import ViewTags from '../utils/ViewTags';
+import { BlockValueWithOptions } from '../types';
 
 const log = newLogger('View blog')
 
@@ -238,8 +239,8 @@ export const ViewBlogPage: NextPage<Props> = (props: Props) => {
     return <ListData
       title={postsSectionTitle()}
       dataSource={posts}
-      renderItem={(item, index) =>
-        <ViewPostPage key={index} variant='preview' postData={item.post} postExtData={item.ext}/>}
+      renderItem={(item: any, index) =>
+        <ViewPostPage key={index} variant='preview' postData={item.post} postExtData={item.ext} blockValues={item.blockValues} />}
       noDataDesc='No posts yet'
       noDataExt={isMyBlog ? <Button href={`/blogs/${id}/posts/new`}>Create post</Button> : null}
     />;
@@ -272,7 +273,7 @@ export const ViewBlogPage: NextPage<Props> = (props: Props) => {
   );
 
   return <div className='ViewBlogWrapper'>
-    <Section className='DfContentPage'>
+    <Section className='DfContentPage bookPage'>
       <HeadMeta title={name} desc={mdToText(desc)} image={image} />
       <div className='FullProfile'>
         {renderPreview()}
@@ -298,9 +299,10 @@ export const ViewBlogPage: NextPage<Props> = (props: Props) => {
 ViewBlogPage.getInitialProps = async (props): Promise<any> => {
   const { res, query: { blogId } } = props
   const subsocial = await getSubsocialApi()
-  const { substrate } = subsocial;
+  const { substrate, ipfs } = subsocial;
   const idOrHandle = blogId as string
   const id = await getBlogId(idOrHandle)
+
   if (!id && res) {
     res.statusCode = 404
     return { statusCode: 404 }
@@ -313,7 +315,28 @@ ViewBlogPage.getInitialProps = async (props): Promise<any> => {
   }
 
   const postIds = await substrate.postIdsByBlogId(new BN(blogId as string))
-  const posts = await subsocial.findPostsWithExt(postIds.reverse());
+  const posts: any = await subsocial.findPostsWithExt(postIds.reverse());
+
+  let i = 0;
+  for (const item of posts) {
+    const postBlockValues = []
+    const blocks = item?.post?.content?.blocks
+
+    if (blocks && blocks.length > 0) {
+
+      for (const x of blocks) {
+        if (x.featured) {
+          const res = await ipfs.findPost(x.cid) as unknown as BlockValueWithOptions
+          if (x.featured && res) res.featured = true
+          postBlockValues.push(res)
+        }
+      }
+    }
+    posts[i].blockValues = postBlockValues
+    i++
+  }
+
+  console.log('posts in initialProps in ViewBlog', posts)
   return {
     blogData,
     posts
diff --git a/src/components/posts/EditComment.tsx b/src/components/posts/EditComment.tsx
index 4083d5f1..e95b08f3 100644
--- a/src/components/posts/EditComment.tsx
+++ b/src/components/posts/EditComment.tsx
@@ -137,7 +137,7 @@ const InnerForm = (props: FormProps) => {
           name='body'
           value={body}
           onChange={(data: string) => setFieldValue('body', data)}
-          className={`DfMdEditor ${errors['body'] && 'error'}`}
+          className={`DfMdEditor ${errors['body'] && 'error'} markdown-body CommentsEditor`}
           style={{ marginTop: '1rem' }}
           option={{
             autofocus: autoFocus,
diff --git a/src/components/posts/EditPost.tsx b/src/components/posts/EditPost.tsx
deleted file mode 100644
index 36874cbc..00000000
--- a/src/components/posts/EditPost.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Button } from 'semantic-ui-react';
-import { Form, Field, withFormik, FormikProps } from 'formik';
-import dynamic from 'next/dynamic';
-import { SubmittableResult } from '@polkadot/api';
-import EditableTagGroup from '../utils/EditableTagGroup'
-import { withCalls, withMulti, registry } from '@polkadot/react-api';
-
-import { useSubsocialApi } from '../utils/SubsocialApiContext'
-import * as DfForms from '../utils/forms';
-import { Null } from '@polkadot/types';
-import { Option } from '@polkadot/types/codec';
-import Section from '../utils/Section';
-import { useMyAccount } from '../utils/MyAccountContext';
-import { socialQueryToProp } from '../utils/index';
-import { getNewIdFromEvent, Loading } from '../utils/utils';
-import BN from 'bn.js';
-import SimpleMDEReact from 'react-simplemde-editor';
-import Router, { useRouter } from 'next/router';
-import HeadMeta from '../utils/HeadMeta';
-import { TxFailedCallback } from '@polkadot/react-components/Status/types';
-import { TxCallback } from '../utils/types';
-import { PostExtension, PostUpdate } from '@subsocial/types/substrate/classes';
-import { Post, IpfsHash, BlogId, PostExtension as IPostExtension } from '@subsocial/types/substrate/interfaces';
-import { PostContent } from '@subsocial/types/offchain';
-import { newLogger } from '@subsocial/utils'
-import { ValidationProps, buildValidationSchema } from './PostValidation';
-import { LabeledValue } from 'antd/lib/select';
-import SelectBlogPreview from '../utils/SelectBlogPreview';
-import { Icon } from 'antd';
-import BloggedSectionTitle from '../blogs/BloggedSectionTitle';
-
-const log = newLogger('Edit post')
-const TxButton = dynamic(() => import('../utils/TxButton'), { ssr: false });
-
-type OuterProps = ValidationProps & {
-  blogId?: BN,
-  id?: BN,
-  extension?: IPostExtension,
-  struct?: Post
-  json?: PostContent,
-  onlyTxButton?: boolean,
-  closeModal?: () => void,
-  withButtons?: boolean,
-  myAddress?: string,
-  blogIds?: BlogId[]
-};
-
-const DefaultPostExt = new PostExtension({ RegularPost: new Null(registry) })
-
-type FormValues = PostContent;
-
-type FormProps = OuterProps & FormikProps<FormValues>;
-
-const LabelledField = DfForms.LabelledField<FormValues>();
-
-const LabelledText = DfForms.LabelledText<FormValues>();
-
-const InnerForm = (props: FormProps) => {
-  const {
-    id,
-    blogId,
-    struct,
-    extension = DefaultPostExt,
-    values,
-    dirty,
-    isValid,
-    errors,
-    setFieldValue,
-    isSubmitting,
-    setSubmitting,
-    resetForm,
-    onlyTxButton = false,
-    withButtons = true,
-    closeModal,
-    blogIds
-  } = props;
-
-  const { isRegularPost } = extension
-
-  const renderResetButton = () => (
-    <Button
-      type='button'
-      size='medium'
-      disabled={isSubmitting || (isRegularPost && !dirty)}
-      onClick={() => resetForm()}
-      content='Reset form'
-    />
-  );
-
-  const {
-    title,
-    body,
-    image,
-    tags,
-    canonical
-  } = values;
-
-  const initialBlogId = struct?.blog_id || blogId
-
-  const goToView = (id: BN) => {
-    Router.push(`/blogs/${currentBlogId}/posts/${id}`).catch(err => log.error('Failed redirection to post page:', err));
-  };
-
-  const { ipfs } = useSubsocialApi()
-  const [ currentBlogId, setCurrentBlogId ] = useState(initialBlogId)
-  const [ showAdvanced, setShowAdvanced ] = useState(false)
-  const [ ipfsHash, setIpfsCid ] = useState<IpfsHash>();
-
-  const onSubmit = (sendTx: () => void) => {
-    if (isValid || !isRegularPost) {
-      const json = { title, body, image, tags, canonical };
-      ipfs.savePost(json).then(hash => {
-        if (hash) {
-          setIpfsCid(hash);
-          sendTx();
-        }
-      }).catch(err => new Error(err));
-    }
-  };
-
-  const onTxFailed: TxFailedCallback = (_txResult: SubmittableResult | null) => {
-    setSubmitting(false);
-  };
-
-  const onTxSuccess: TxCallback = (_txResult: SubmittableResult) => {
-    setSubmitting(false);
-
-    closeModal && closeModal();
-
-    const _id = id || getNewIdFromEvent(_txResult);
-    _id && isRegularPost && goToView(_id);
-  };
-
-  const handleAdvancedSettings = () => {
-    setShowAdvanced(!showAdvanced)
-  }
-
-  const buildTxParams = () => {
-    if (isValid || !isRegularPost) {
-      if (!struct) {
-        return [ blogId, ipfsHash, extension ];
-      } else {
-        // TODO update only dirty values.
-        const update = new PostUpdate(
-          {
-          // TODO setting new blog_id will move the post to another blog.
-            blog_id: new Option(registry, 'u64', null),
-            ipfs_hash: new Option(registry, 'Text', ipfsHash)
-          });
-        return [ struct.id, update ];
-      }
-    } else {
-      return [];
-    }
-  };
-
-  const renderTxButton = () => (
-    <TxButton
-      type='submit'
-      size='medium'
-      label={!struct
-        ? `Create a post`
-        : `Update a post`
-      }
-      isDisabled={isSubmitting || (isRegularPost && !dirty)}
-      params={buildTxParams()}
-      tx={struct
-        ? 'social.updatePost'
-        : 'social.createPost'
-      }
-      onClick={onSubmit}
-      onFailed={onTxFailed}
-      onSuccess={onTxSuccess}
-    />
-  );
-
-  const handleBlogSelect = (value: string | number | LabeledValue) => {
-    if (!value) return;
-
-    setCurrentBlogId(new BN(value as string))
-  };
-
-  const renderBlogsPreviewDropdown = () => {
-    if (!blogIds) return;
-
-    return <SelectBlogPreview
-      blogIds={blogIds}
-      onSelect={handleBlogSelect}
-      imageSize={24}
-      defaultValue={currentBlogId?.toString()} />
-  }
-
-  const form =
-    <Form className='ui form DfForm EditEntityForm'>
-
-      {isRegularPost
-        ? <>
-          {renderBlogsPreviewDropdown()}
-          <LabelledText name='title' label='Post title' placeholder={`What is a title of you post?`} {...props} />
-
-          <LabelledText name='image' label='Image URL' placeholder={`Should be a valid image URL.`} {...props} />
-
-          {/* TODO ask a post summary or auto-generate and show under an "Advanced" tab. */}
-          <EditableTagGroup name='tags' label='Tags' tags={tags} {...props} />
-
-          <LabelledField name='body' label='Description' {...props}>
-            <Field component={SimpleMDEReact} name='body' value={body} onChange={(data: string) => setFieldValue('body', data)} className={`DfMdEditor ${errors['body'] && 'error'}`} />
-          </LabelledField>
-
-          <div className="EPadvanced">
-            <div className="EPadvacedTitle" onClick={handleAdvancedSettings}>
-              {!showAdvanced ? 'Show' : 'Hide'} Advanced Settings
-              <Icon type={showAdvanced ? 'up' : 'down'} />
-            </div>
-            {showAdvanced &&
-              <LabelledText name='canonical' label='Original post URL' placeholder={`Set a URL of original post`} {...props} />
-            }
-          </div>
-        </>
-        : <>
-          <SimpleMDEReact value={body} onChange={(data: string) => setFieldValue('body', data)} className={`DfMdEditor`}/>
-        </>
-      }
-      {withButtons && <LabelledField {...props}>
-        {renderTxButton()}
-        {renderResetButton()}
-      </LabelledField>}
-    </Form>;
-
-  const pageTitle = isRegularPost ? (!struct ? `New post` : `Edit my post`) : 'Share post';
-
-  const sectionTitle = currentBlogId && <BloggedSectionTitle blogId={currentBlogId} title={pageTitle} />
-
-  const editRegularPost = () =>
-    <Section className='EditEntityBox' title={sectionTitle}>
-      {form}
-    </Section>
-
-  const editSharedPost = () =>
-    <div style={{ marginTop: '1rem' }}>{form}</div>
-
-  return onlyTxButton
-    ? renderTxButton()
-    : <>
-      <HeadMeta title={pageTitle}/>
-      {isRegularPost
-        ? editRegularPost()
-        : editSharedPost()
-      }
-    </>;
-};
-
-export const InnerEditPost = withFormik<OuterProps, FormValues>({
-
-  // Transform outer props into form values
-  mapPropsToValues: (props): FormValues => {
-    const { struct, json } = props;
-
-    if (struct && json) {
-      return {
-        ...json
-      };
-    } else {
-      return {
-        title: '',
-        body: '',
-        image: '',
-        tags: [],
-        canonical: ''
-      };
-    }
-  },
-
-  validationSchema: buildValidationSchema,
-
-  handleSubmit: () => {
-    // do submitting things
-  }
-})(InnerForm);
-
-function withIdFromUrl (Component: React.ComponentType<OuterProps>) {
-  return function (props: OuterProps) {
-    const router = useRouter();
-    const { postId } = router.query;
-    const { id } = props;
-
-    if (id) return <Component { ...props } />;
-
-    try {
-      return <Component id={new BN(postId as string)} {...props}/>;
-    } catch (err) {
-      return <em>Invalid post ID: {postId}</em>;
-    }
-  };
-}
-
-function withBlogIdFromUrl (Component: React.ComponentType<OuterProps>) {
-  return function () {
-    const router = useRouter();
-    const { blogId } = router.query;
-    try {
-      return <Component blogId={new BN(blogId as string)} postMaxLen={1000} />;
-    } catch (err) {
-      return <em>Invalid blog ID: {blogId}</em>;
-    }
-  };
-}
-
-type LoadStructProps = OuterProps & {
-  structOpt: Option<Post>
-};
-
-function LoadStruct (Component: React.ComponentType<LoadStructProps>) {
-  return function (props: LoadStructProps) {
-    const { state: { address: myAddress } } = useMyAccount(); // TODO maybe remove, because useless
-    const { ipfs } = useSubsocialApi()
-    const { structOpt } = props;
-    const [ json, setJson ] = useState<PostContent>();
-    const [ struct, setStruct ] = useState<Post>();
-    const [ trigger, setTrigger ] = useState(false);
-    const jsonIsNone = json === undefined;
-
-    const toggleTrigger = () => {
-      json === undefined && setTrigger(!trigger);
-    };
-
-    useEffect(() => {
-      if (!myAddress || !structOpt || structOpt.isNone) return toggleTrigger();
-
-      setStruct(structOpt.unwrap());
-
-      if (struct === undefined) return toggleTrigger();
-
-      ipfs.findPost(struct.ipfs_hash).then(json => {
-        setJson(json);
-      }).catch(err => log.error('Failed to find a post in IPFS:', err));
-    }, [ trigger ]);
-
-    if (!myAddress || !structOpt || jsonIsNone) {
-      return <Loading />;
-    }
-
-    if (structOpt.isNone) {
-      return <em>Post not found</em>;
-    }
-
-    if (!struct || !struct.created.account.eq(myAddress)) {
-      return <em>You have no rights to edit this post</em>;
-    }
-
-    return <Component {...props} struct={struct} json={json} myAddress={myAddress} />;
-  };
-}
-
-export const InnerFormWithValidation = withMulti(
-  InnerEditPost
-);
-
-export const NewPost = withMulti(
-  InnerFormWithValidation,
-  withBlogIdFromUrl
-);
-
-export const NewSharePost = InnerFormWithValidation;
-
-export const EditPost = withMulti<OuterProps>(
-  InnerFormWithValidation,
-  withIdFromUrl,
-  withCalls<OuterProps>(
-    socialQueryToProp('postById', { paramName: 'id', propName: 'structOpt' })
-  ),
-  LoadStruct,
-  withCalls<OuterProps>(
-    socialQueryToProp(`blogIdsByOwner`, { paramName: 'myAddress', propName: 'blogIds' })
-  )
-);
diff --git a/src/components/posts/LoadPostUtils.ts b/src/components/posts/LoadPostUtils.ts
index 57b8f55a..cd316f00 100644
--- a/src/components/posts/LoadPostUtils.ts
+++ b/src/components/posts/LoadPostUtils.ts
@@ -37,4 +37,4 @@ export const loadContentFromIpfs = async (post: Post): Promise<PostExtContent> =
   if (!ipfsContent) return {} as PostExtContent;
 
   return getExtContent(ipfsContent);
-}
+}
\ No newline at end of file
diff --git a/src/components/posts/PostEditor/EditPost.css b/src/components/posts/PostEditor/EditPost.css
new file mode 100644
index 00000000..5bf8e2bb
--- /dev/null
+++ b/src/components/posts/PostEditor/EditPost.css
@@ -0,0 +1,213 @@
+@import '../../utils/styles/subsocial-vars.css';
+
+.EditPostWrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.AddBlockDropdownMenu {
+  max-width: 200px;
+}
+
+.EditPostAceEditor {
+  a {
+    display: inline-block;
+    margin-bottom: $space_tiny;
+  }
+  .AceModeSelect {
+    width: 150px;
+    margin-bottom: 5px;
+    color: $color_menu_font;
+  }
+}
+
+.SelectBlogPreview {
+  width: 200px !important;
+}
+
+.MobileTabs {
+  margin-top: $space_normal;
+
+  .SelectBlogPreview {
+    width: 100% !important;
+  }
+}
+
+.MobileButtonsMenu {
+  position: relative;
+  width: 200px;
+
+  .AddBlockPlusIcon {
+    position: absolute;
+    z-index: 1;
+    &.AddBefore {
+      top: 12px;
+      left: 12px;
+    }
+    &.AddAfter {
+      left: 12px;
+      top: 44px;
+    }
+  }
+
+  .ant-dropdown-menu-submenu-title {
+    padding-left: 30px !important;
+  }
+}
+
+.EditPostLabel {
+  color: rgba(0,0,0,.87);
+  font-weight: 600;
+  font-size: small;
+}
+
+.EditPostBlockWrapper {
+  margin: $space_normal 0;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  position: relative;
+
+  .EditPostCrown {
+    position: absolute;
+    color: $color_link;
+    right: -20px;
+  }
+
+  .ImgFormPreviewWrapper {
+    position: relative;
+
+    .RemoveImgIcon {
+      position: absolute;
+      color: red;
+      font-size: 3rem;
+      background-color: white;
+      border-radius: 10px;
+      padding: 1rem;
+      top: calc(50% - 3rem);
+      left: calc(50% - 3rem);
+      opacity: 0;
+    }
+    &:hover {
+      .RemoveImgIcon {
+        opacity: 1;
+      }
+    }
+    img {
+      margin-bottom: $space_tiny;
+    }
+  }
+
+  .ButtonsForMobile {
+    .MenuDotsIcon {
+      -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+      -webkit-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+      margin-right: $space_tiny;
+    }
+  }
+
+  display: flex;
+  flex-direction: row;
+
+  .markdown-body {
+    width: 100%;
+  }
+
+  .EditPostAceEditor {
+    width: 100%;
+  }
+
+  &.MobileBlock .EditPostCrown {
+    right: 5px;
+    top: 5px;
+  }
+
+  .ImageBlockWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .Dragger {
+      width: 100%;
+      height: 150px;
+    }
+
+    .ImageUploadDivider {
+      position: relative;
+      display: flex;
+      justify-content: center;
+
+      &:after, &:before {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        height: 1px;
+        background: $color_light_border;
+        content: '';
+        width: 45%;
+        display: block;
+      }
+      &:before {
+        right: 0;
+        left: unset;
+      }
+    }
+  }
+}
+
+.EditPostAddButton {
+  margin: $space_normal 0;
+}
+
+.EditEntityForm {
+  width: 100%;
+}
+
+.EditPostForm {
+  width: 50%;
+  margin-right: $space_huge;
+
+  &.WithTabs {
+    width: 100%;
+    text-align: left;
+
+    .EditPostPreviewBlock {
+      margin-bottom: $space_normal;
+    }
+  }
+
+  .SmallAntButton {
+    height: $space_big;
+    margin-right: 3px;
+    position: relative;
+  }
+
+  .AdvancedWrapper {
+    margin-bottom: $space_huge;
+
+    a {
+      display: block;
+      border-top: 1px solid $color_light_border;
+      padding-top: 1rem;
+      color: $color_menu_font;
+    }
+  }
+}
+
+.EditPostPreview {
+  width: 50%;
+
+  &.WithTabs {
+    width: 100%;
+    text-align: left;
+  }
+
+  .EditPostPreviewBlock {
+    display: flex;
+    margin-top: $space_big;
+    flex-direction: column;
+  }
+}
diff --git a/src/components/posts/PostEditor/EditPost.tsx b/src/components/posts/PostEditor/EditPost.tsx
new file mode 100644
index 00000000..d857043f
--- /dev/null
+++ b/src/components/posts/PostEditor/EditPost.tsx
@@ -0,0 +1,522 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from 'semantic-ui-react';
+import { Form, withFormik, FormikProps } from 'formik';
+import dynamic from 'next/dynamic';
+import { SubmittableResult } from '@polkadot/api';
+import { withCalls, withMulti, registry } from '@polkadot/react-api';
+import * as DfForms from '../../utils/forms';
+import { Null } from '@polkadot/types';
+import { Option } from '@polkadot/types/codec';
+import { PostBlock, BlockValueKind, BlockValue, PostBlockKind, PreviewData, EmbedData, PostContent, ImageBlockValue, BlockValueWithOptions } from '../../types';
+import Section from '../../utils/Section';
+import { parse, getImageFromIpfs, socialQueryToProp } from '../../utils/index';
+import { getNewIdFromEvent } from '../../utils/utils';
+import Router from 'next/router';
+import HeadMeta from '../../utils/HeadMeta';
+import { Dropdown, Menu, Icon, Tabs, Button as AntButton } from 'antd';
+import BlockPreview from '../PostPreview/BlockPreview';
+import { isMobile } from 'react-device-detect';
+import SelectBlogPreview from '../../utils/SelectBlogPreview'
+import { LabeledValue } from 'antd/lib/select';
+import EditableTagGroup from '../../utils/EditableTagGroup'
+import PostBlockFormik from './PostBlockFormik';
+import buildSchema from './EditPostValidations'
+import './EditPost.css'
+import { withBlogIdFromUrl, withIdFromUrl, LoadStruct, OuterProps } from './LoadEditPostUtils';
+import { useSubsocialApi } from '../../utils/SubsocialApiContext'
+import BN from 'bn.js';
+import { TxFailedCallback } from '@polkadot/react-components/Status/types';
+import { TxCallback } from '../../utils/types';
+import { PostExtension, PostUpdate } from '@subsocial/types/substrate/classes';
+import { IpfsHash, Post } from '@subsocial/types/substrate/interfaces';
+import { newLogger, nonEmptyArr } from '@subsocial/utils'
+import BloggedSectionTitle from '../../blogs/BloggedSectionTitle';
+import ViewPostPage from '../ViewPost';
+
+const log = newLogger('Post Editor')
+const TxButton = dynamic(() => import('../../utils/TxButton'), { ssr: false });
+const { TabPane } = Tabs;
+
+type BlockValues = {
+  blockValues: BlockValueWithOptions[]
+}
+
+const DefaultPostExt = new PostExtension({ RegularPost: new Null(registry) })
+type FormValues = PostContent & BlockValues;
+type FormProps = OuterProps & FormikProps<FormValues>;
+const LabelledField = DfForms.LabelledField<FormValues>();
+const LabelledText = DfForms.LabelledText<FormValues>();
+
+const InnerForm = (props: FormProps) => {
+  const {
+    id,
+    blogId,
+    struct,
+    extension = DefaultPostExt,
+    values,
+    dirty,
+    isValid,
+    setFieldValue,
+    isSubmitting,
+    setSubmitting,
+    resetForm,
+    onlyTxButton = false,
+    withButtons = true,
+    closeModal,
+    blogIds,
+    tagsData = []
+  } = props;
+
+  const isRegularPost = extension.value.isEmpty; // TODO maybe fix after run UI
+
+  const renderResetButton = () => (
+    <Button
+      type='button'
+      size='medium'
+      disabled={isSubmitting || (isRegularPost && !dirty)}
+      onClick={() => resetForm()}
+      content='Reset form'
+    />
+  );
+
+  const { title, blockValues, image, tags, canonical } = values;
+  const initialBlogId = struct?.blog_id || blogId
+
+  const goToView = (id: BN) => {
+    Router.push(`/blogs/${currentBlogId}/posts/${id}`)
+      .catch(err => log.error('Failed to redirect to the post page:', err));
+  };
+
+  const blockNames = [
+    { name: 'text', pretty: 'Text Block' },
+    { name: 'link', pretty: 'Link' },
+    { name: 'image', pretty: 'Image' },
+    { name: 'video', pretty: 'Video' },
+    { name: 'code', pretty: 'Code Block' }
+  ]
+
+  const { ipfs } = useSubsocialApi()
+  const [ ipfsHash, setIpfsCid ] = useState<IpfsHash>();
+  const [ linkPreviewData, setLinkPreviewData ] = useState<PreviewData[]>([])
+  const [ embedData, setEmbedData ] = useState<EmbedData[]>([])
+  const [ firstload, setFirstload ] = useState(false)
+  const [ isAdvanced, setIsAdvanced ] = useState(false)
+  const [ currentBlogId, setCurrentBlogId ] = useState(initialBlogId)
+
+  useEffect(() => {
+    const firstLoad = async () => {
+      const res: PreviewData[] = []
+      for (const x of blockValues) {
+        if (x.kind === 'link' || x.kind === 'video') {
+          const data = await parse(x.data)
+          if (!data) continue
+          res.push({ id: x.id, data })
+        }
+        if (x.kind === 'image') {
+          const img = x as ImageBlockValue
+          let data: any
+          if (img.hash) data = await getImageFromIpfs(img.hash)
+          if (!data) continue
+          res.push({ id: x.id, data })
+        }
+      }
+      setLinkPreviewData(res)
+      setFirstload(true)
+    }
+
+    if (!firstload) firstLoad()
+  }, [])
+
+  const mapValuesToBlocks = async () => {
+    const processArray = async (array: BlockValueWithOptions[]) => {
+      const res = []
+      for (const item of array) {
+        const hash = await ipfs.savePost(item as any)
+        res.push({ kind: item.kind, hidden: item.hidden, featured: item.featured, cid: hash })
+      }
+      return res
+    }
+    if (nonEmptyArr(blockValues)) {
+      const tempValues = await processArray(blockValues)
+      return tempValues as any[]
+    }
+    return [] as PostBlock[]
+  }
+
+  const onSubmit = async (sendTx: () => void) => {
+    const blocks = await mapValuesToBlocks()
+    if (isValid || !isRegularPost) {
+      const json = { title, blocks, image, tags, canonical };
+      ipfs.savePost(json as any).then(hash => {
+        if (hash) {
+          setIpfsCid(hash);
+          sendTx();
+        }
+      }).catch(err => new Error(err));
+    }
+  };
+
+  const onTxFailed: TxFailedCallback = (_txResult: SubmittableResult | null) => {
+    setSubmitting(false);
+  };
+
+  const onTxSuccess: TxCallback = (_txResult: SubmittableResult) => {
+    setSubmitting(false);
+
+    closeModal && closeModal();
+
+    const _id = id || getNewIdFromEvent(_txResult);
+    _id && isRegularPost && goToView(_id);
+  };
+
+  const buildTxParams = () => {
+    if (isValid || !isRegularPost) {
+      if (!struct) {
+        return [ blogId, ipfsHash, extension ];
+      } else {
+        // TODO update only dirty values.
+        const update = new PostUpdate({
+          // TODO setting new blog_id will move the post to another blog.
+          blog_id: new Option(registry, 'u64', null),
+          ipfs_hash: new Option(registry, 'Text', ipfsHash)
+        });
+        return [ struct.id, update ];
+      }
+    } else {
+      return [];
+    }
+  };
+
+  const renderTxButton = () => (
+    <TxButton
+      type='submit'
+      size='medium'
+      label={!struct
+        ? `Create a post`
+        : `Update a post`
+      }
+      isDisabled={isSubmitting || (isRegularPost && !dirty)}
+      params={buildTxParams()}
+      tx={struct
+        ? 'social.updatePost'
+        : 'social.createPost'
+      }
+      onClick={onSubmit}
+      onFailed={onTxFailed}
+      onSuccess={onTxSuccess}
+    />
+  );
+
+  const getNewBlockId = (arr: any[]) => {
+    const res = Math.max.apply(null, arr.map((o) => o.id))
+    if (res >= 0) return res + 1
+    return 0
+  }
+
+  const addBlock = (type: PostBlockKind, index?: number, pos?: string) => {
+    const defaultBlockValue: BlockValueKind = {
+      id: getNewBlockId(blockValues),
+      kind: type,
+      hidden: false,
+      data: ''
+    }
+    if (index === undefined) {
+      let newArray: BlockValueKind[] = []
+      if (pos === 'after') {
+        newArray = [ ...blockValues, defaultBlockValue ]
+      } else {
+        newArray = [ defaultBlockValue, ...blockValues ]
+      }
+      setFieldValue('blockValues', newArray)
+      return
+    }
+    let value = index + 1
+    if (pos === 'before') value = index
+    setFieldValue('blockValues', [
+      ...blockValues.slice(0, value),
+      defaultBlockValue,
+      ...blockValues.slice(value)
+    ])
+  }
+
+  const handleLinkPreviewChange = async (block: BlockValueKind, value: string) => {
+    const data = await parse(value)
+    if (!data) return
+
+    const newParsedData = [ ...linkPreviewData ]
+    const idx = linkPreviewData.findIndex((el) => el.id === block.id);
+    if (idx !== -1) {
+      newParsedData[idx].data = data
+    } else {
+      newParsedData.push({ id: block.id, data })
+    }
+    setLinkPreviewData(newParsedData)
+  }
+
+  const handleImagePreviewChange = async (block: ImageBlockValue, data: string | any) => {
+    const newParsedData = [ ...linkPreviewData ]
+    const idx = linkPreviewData.findIndex((el) => el.id === block.id);
+    if (idx !== -1) {
+      newParsedData[idx].data = data
+    } else {
+      newParsedData.push({ id: block.id, data })
+    }
+    setLinkPreviewData(newParsedData)
+  }
+
+  const handleLinkChange = async (block: BlockValueKind, name: string, value: string) => {
+    handleLinkPreviewChange(block, value)
+    setFieldValue(name, value)
+  }
+
+  const addMenu = (index?: number, onlyItems?: boolean, pos?: string) => {
+    const menuItems = blockNames.map((x) =>
+      <Menu.Item key={x.name} onClick={() => addBlock(x.name as PostBlockKind, index, pos)}>
+        {x.pretty}
+      </Menu.Item>
+    )
+
+    if (onlyItems) return menuItems
+
+    return (
+      <Menu className='AddBlockDropdownMenu'>
+        {menuItems}
+      </Menu>
+    )
+  }
+
+  const handleBlogSelect = (value: string | number | LabeledValue) => {
+    if (!value) return;
+
+    setCurrentBlogId(new BN(value as string))
+  };
+
+  const renderBlogsPreviewDropdown = () => {
+    if (!blogIds) return
+
+    return <SelectBlogPreview
+      blogIds={blogIds}
+      onSelect={handleBlogSelect}
+      imageSize={24}
+      defaultValue={currentBlogId?.toString()}
+    />
+  }
+
+  const form = <Form className='ui form DfForm EditEntityForm'>
+    {isRegularPost
+      ? <>
+        <div className='EditPostLabel'>
+          Post in blog:
+        </div>
+        {renderBlogsPreviewDropdown()}
+        <LabelledText name='title' label='Post title' placeholder={`What is a title of you post?`} {...props} />
+        {/* TODO ask a post summary or auto-generate and show under an 'Advanced' tab. */}
+        <Dropdown overlay={addMenu} className={'EditPostAddButton'}>
+          <AntButton type='default' className={'SmallAntButton'} size='small'>
+            <Icon type='plus-circle' /> Add block
+          </AntButton>
+        </Dropdown>
+        {nonEmptyArr(blockValues)
+          ? blockValues.map((block, index) =>
+            <PostBlockFormik
+              block={block}
+              index={index}
+              setFieldValue={setFieldValue}
+              handleLinkChange={handleLinkChange}
+              handleImagePreviewChange={handleImagePreviewChange}
+              blockValues={blockValues}
+              addMenu={addMenu}
+            />
+          )
+          : addBlock('text')
+        }
+        {nonEmptyArr(blockValues) &&
+          <Dropdown overlay={() => addMenu(blockValues.length + 1, false, 'after')} className={'EditPostAddButton'}>
+            <AntButton type='default' className={'SmallAntButton'} size='small'>
+              <Icon type='plus-circle' /> Add block
+            </AntButton>
+          </Dropdown>
+        }
+        <div className='AdvancedWrapper'>
+          <div onClick={() => setIsAdvanced(!isAdvanced)}>
+            {isAdvanced
+              ? <Icon type='up' />
+              : <Icon type='down' />
+            }{' '}Advanced settings
+          </div>
+          {isAdvanced && <div>
+            <LabelledText name='canonical' label='Canonical URL' placeholder={`Set canonical URL of your post`} {...props} />
+            <EditableTagGroup name='tags' tags={tags} label='Tags' tagSuggestions={tagsData} setFieldValue={setFieldValue} />
+          </div>}
+        </div>
+      </>
+      : <>
+        {nonEmptyArr(blockValues)
+          ? blockValues.map((block, index) =>
+            <PostBlockFormik
+              block={block}
+              index={index}
+              setFieldValue={setFieldValue}
+              handleLinkChange={handleLinkChange}
+              handleImagePreviewChange={handleImagePreviewChange}
+              blockValues={blockValues}
+              addMenu={addMenu}
+            />
+          )
+          : addBlock('text')
+        }
+      </>
+    }
+    {withButtons &&
+      <LabelledField {...props}>
+        {renderTxButton()}
+        {renderResetButton()}
+      </LabelledField>
+    }
+  </Form>;
+
+  const pageTitle = isRegularPost
+    ? (!struct ? `New post` : `Edit my post`)
+    : 'Share post';
+
+  const sectionTitle = currentBlogId &&
+    <BloggedSectionTitle blogId={currentBlogId} title={pageTitle} />
+
+  // TODO fix copypasta. See const renderForMobile = ()
+  const editRegularPost = () => <Section className='EditEntityBox' title={sectionTitle}>
+    {isMobile
+      ? renderForMobile()
+      : <div className='EditPostWrapper'>
+        <div className='EditPostForm'>
+          {form}
+        </div>
+        <div className='EditPostPreview'>
+          <Tabs type='card'>
+            <TabPane tab='Full Preview' key='1'>
+              <div>
+                <h1>{title}</h1>
+              </div>
+              {nonEmptyArr(blockValues) &&
+                blockValues.map((x: BlockValueKind) =>
+                  <div key={x.id} className={'EditPostPreviewBlock'}>
+                    <BlockPreview
+                      block={x}
+                      embedData={embedData}
+                      setEmbedData={setEmbedData}
+                      linkPreviewData={linkPreviewData}
+                    />
+                  </div>
+                )
+              }
+            </TabPane>
+            <TabPane tab='Short Preview' key='2'>
+              <ViewPostPage
+                variant='preview'
+                postData={{ struct: struct as Post, content: values as any }}
+                blockValues={blockValues}
+              />
+            </TabPane>
+          </Tabs>
+        </div>
+      </div>
+    }
+  </Section>
+
+  // TODO fix copypasta. See const editRegularPost = ()
+  const renderForMobile = () => <Tabs type='card' className='MobileTabs'>
+    <TabPane tab='Editor' key='1'>
+      <div className='EditPostForm WithTabs'>
+        {form}
+      </div>
+    </TabPane>
+    <TabPane tab='Full Preview' key='2'>
+      <div className='EditPostPreview WithTabs'>
+        <div className='DfMd'>
+          <h1>{title}</h1>
+        </div>
+        {blockValues && blockValues.length !== 0 &&
+          blockValues.map((x: BlockValue) => <div key={x.id} className={'EditPostPreviewBlock'}><BlockPreview
+            key={x.id}
+            block={x}
+            embedData={embedData}
+            setEmbedData={setEmbedData}
+            linkPreviewData={linkPreviewData}
+          /></div>)
+        }
+      </div>
+    </TabPane>
+    <TabPane tab='Short Preview' key='3'>
+      <ViewPostPage
+        variant='preview'
+        postData={{ struct: struct as Post, content: values as any }}
+        blockValues={blockValues}
+      />
+    </TabPane>
+  </Tabs>
+
+  const editSharedPost = () =>
+    <div className='mt-3'>{form}</div>
+
+  return onlyTxButton
+    ? renderTxButton()
+    : <>
+      <HeadMeta title={pageTitle}/>
+      {isRegularPost
+        ? editRegularPost()
+        : editSharedPost()
+      }
+    </>;
+};
+
+export const InnerEditPost = withFormik<OuterProps, FormValues>({
+  mapPropsToValues: (props): FormValues => {
+    const { struct, json, mappedBlocks } = props;
+    let blockValues: BlockValueWithOptions[] = []
+
+    if (nonEmptyArr(mappedBlocks)) {
+      blockValues = mappedBlocks.map((x, id) => ({ ...x, id }))
+    }
+
+    if (struct && json && mappedBlocks) {
+      return {
+        ...json,
+        blocks: [],
+        blockValues
+      }
+    }
+
+    return {
+      title: '',
+      blocks: [],
+      blockValues: [],
+      image: '', // TODO depracated: delete?
+      tags: [],
+      canonical: ''
+    }
+  },
+
+  validationSchema: () => buildSchema(),
+
+  handleSubmit: values => {
+    // log.debug('Formik values', values)
+  }
+})(InnerForm)
+
+export const NewPost = withMulti(
+  InnerEditPost,
+  withBlogIdFromUrl
+);
+
+export const NewSharePost = InnerEditPost;
+
+export const EditPost = withMulti<OuterProps>(
+  InnerEditPost,
+  withIdFromUrl,
+  withCalls<OuterProps>(
+    socialQueryToProp('postById', { paramName: 'id', propName: 'structOpt' })
+  ),
+  LoadStruct,
+  withCalls<OuterProps>(
+    socialQueryToProp(`blogIdsByOwner`, { paramName: 'myAddress', propName: 'blogIds' })
+  )
+);
diff --git a/src/components/posts/PostEditor/EditPostValidations.ts b/src/components/posts/PostEditor/EditPostValidations.ts
new file mode 100644
index 00000000..8f8225c6
--- /dev/null
+++ b/src/components/posts/PostEditor/EditPostValidations.ts
@@ -0,0 +1,42 @@
+import * as Yup from 'yup';
+import { urlValidation, minLenError, maxLenError } from '../../utils/forms/validation';
+import { pluralize } from '@subsocial/utils';
+
+const MAX_TAGS = 10
+
+const MIN_BLOCKS = 1
+const MAX_BLOCKS = 100
+
+const TEXT_BLOCK_MIN_LEN = 1
+const TEXT_BLOCK_MAX_LEN = 100 * 1024 // 100 KB
+
+const TextBlockSchema = Yup.string()
+  .min(TEXT_BLOCK_MIN_LEN, minLenError('Text block', TEXT_BLOCK_MIN_LEN))
+  .max(TEXT_BLOCK_MAX_LEN, maxLenError('Text block', TEXT_BLOCK_MAX_LEN))
+
+const buildSchema = () => Yup.object().shape({
+  title: Yup.string()
+    .required('Post title is required'),
+
+  tags: Yup.array()
+    .max(MAX_TAGS, `Post can have ${pluralize(MAX_TAGS, 'tag')} max.`),
+
+  canonical: urlValidation('Original post URL'),
+
+  blockValues: Yup.array()
+    .of(
+      Yup.object({
+        kind: Yup.string(),
+        data: Yup.string()
+          .when('kind', {
+            is: (val) => val === 'text',
+            then: TextBlockSchema,
+            otherwise: Yup.string()
+          })
+      })
+    )
+    .min(MIN_BLOCKS, `Post should have at least ${pluralize(MIN_BLOCKS, 'block')}.`)
+    .max(MAX_BLOCKS, `Post can have ${pluralize(MAX_BLOCKS, 'block')} max.`)
+});
+
+export default buildSchema
diff --git a/src/components/posts/PostEditor/LoadEditPostUtils.tsx b/src/components/posts/PostEditor/LoadEditPostUtils.tsx
new file mode 100644
index 00000000..34285699
--- /dev/null
+++ b/src/components/posts/PostEditor/LoadEditPostUtils.tsx
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import { useMyAccount } from '../../utils/MyAccountContext';
+import { useRouter } from 'next/router';
+import { Loading } from '../../utils/utils';
+import { PostBlock, BlockValueWithOptions } from '../../types';
+import { ValidationProps } from './EditPostValidations'
+import { Post, BlogId } from '@subsocial/types/substrate/interfaces';
+import { PostContent } from '@subsocial/types/offchain';
+import BN from 'bn.js';
+import { Option, Enum } from '@polkadot/types/codec';
+import { useSubsocialApi } from '../../utils/SubsocialApiContext'
+import { newLogger } from '@subsocial/utils'
+
+const log = newLogger('EditPostDataHOC')
+
+export type OuterProps = ValidationProps & {
+  blogId?: BN,
+  id?: BN,
+  extension?: Enum,
+  struct?: Post
+  json?: PostContent,
+  mappedBlocks?: BlockValueWithOptions[],
+  onlyTxButton?: boolean,
+  closeModal?: () => void,
+  withButtons?: boolean,
+  myAddress?: string,
+  blogIds?: BlogId[],
+  tagsData?: string[]
+};
+
+export function withIdFromUrl (Component: React.ComponentType<OuterProps>) {
+  return function (props: OuterProps) {
+    const router = useRouter();
+    const { postId } = router.query;
+    const { id } = props;
+
+    if (id) return <Component { ...props } />;
+
+    try {
+      return <Component id={new BN(postId as string)} {...props}/>;
+    } catch (err) {
+      return <em>Invalid post ID: {postId}</em>;
+    }
+  };
+}
+
+export function withBlogIdFromUrl (Component: React.ComponentType<OuterProps>) {
+  return function () {
+    const router = useRouter();
+    const { blogId } = router.query;
+    try {
+      return <Component blogId={new BN(blogId as string)} />;
+    } catch (err) {
+      return <em>Invalid blog ID: {blogId}</em>;
+    }
+  };
+}
+
+type LoadStructProps = OuterProps & {
+  structOpt: Option<Post>
+};
+
+export function LoadStruct (Component: React.ComponentType<LoadStructProps>) {
+  return function (props: LoadStructProps) {
+    const { state: { address: myAddress } } = useMyAccount();
+    const { ipfs } = useSubsocialApi()
+    const { structOpt } = props;
+    const [ json, setJson ] = useState<PostContent>();
+    const [ struct, setStruct ] = useState<Post>();
+    const [ trigger, setTrigger ] = useState(false);
+    const [ mappedBlocks, setMappedBlocks ] = useState(undefined as unknown as BlockValueWithOptions[])
+    const jsonIsNone = json === undefined;
+
+    const toggleTrigger = () => {
+      json === undefined && setTrigger(!trigger);
+    };
+
+    useEffect(() => {
+      if (!myAddress || !structOpt || structOpt.isNone) return toggleTrigger();
+
+      setStruct(structOpt.unwrap());
+
+      if (struct === undefined) return toggleTrigger();
+
+      ipfs.findPost(struct.ipfs_hash).then((json: any) => {
+        console.log('ipfs.findPost(struct.ipfs_hash)', json)
+        if (json && json.blocks && json.blocks.length > 0) {
+          const processArray = async (arr: PostBlock[]) => {
+            const temp: BlockValueWithOptions[] = []
+            for (const item of arr) {
+              const res = await ipfs.findPost(item.cid) as unknown as BlockValueWithOptions
+              if (item.featured && res) res.featured = true
+              temp.push(res)
+            }
+            return temp
+          }
+          processArray(json.blocks as PostBlock[]).then((tempBlocks) => {
+            setMappedBlocks(tempBlocks)
+          })
+          if (mappedBlocks === undefined) return toggleTrigger();
+        }
+
+        setJson(json);
+      }).catch(err => log.error('Failed to find a post in IPFS:', err));
+
+    }, [ trigger ]);
+
+    if (!myAddress || !structOpt || jsonIsNone || !mappedBlocks) {
+      return <Loading />;
+    }
+
+    if (structOpt.isNone) {
+      return <em>Post not found</em>;
+    }
+
+    if (!struct || !struct.created.account.eq(myAddress)) {
+      return <em>You have no rights to edit this post</em>;
+    }
+
+    return <Component {...props} struct={struct} json={json} mappedBlocks={mappedBlocks} myAddress={myAddress} />;
+  };
+}
\ No newline at end of file
diff --git a/src/components/posts/PostEditor/PostBlockFormik.tsx b/src/components/posts/PostEditor/PostBlockFormik.tsx
new file mode 100644
index 00000000..9210b3cf
--- /dev/null
+++ b/src/components/posts/PostEditor/PostBlockFormik.tsx
@@ -0,0 +1,307 @@
+import React, { useState, useEffect } from 'react'
+import { BlockValueKind, CodeBlockValue, ImageBlockValue, BlockValueWithOptions } from '../../types'
+import SimpleMDEReact from 'react-simplemde-editor'
+import { Field, ErrorMessage } from 'formik'
+import { Dropdown, Menu, Icon } from 'antd'
+import AceEditor from 'react-ace'
+import 'brace/mode/javascript'
+import 'brace/mode/typescript'
+import 'brace/mode/scss'
+import 'brace/mode/html'
+import 'brace/mode/sh'
+import 'brace/mode/rust'
+import 'brace/theme/github'
+import { isMobile } from 'react-device-detect'
+import SubMenu from 'antd/lib/menu/SubMenu'
+import { UploadChangeParam } from 'antd/lib/upload';
+import { UploadFile, RcFile } from 'antd/lib/upload/interface';
+import Dragger from 'antd/lib/upload/Dragger'
+import { getImageFromIpfs } from 'src/components/utils'
+
+type Props = {
+  block: BlockValueWithOptions
+  index: number
+  setFieldValue: (field: string, value: any) => void
+  handleLinkChange: (block: BlockValueKind, name: string, value: string) => void
+  handleImagePreviewChange: (block: ImageBlockValue, src: string) => void
+  blockValues: BlockValueWithOptions[]
+  addMenu: (index?: number, onlyItems?: boolean, pos?: string) => JSX.Element[] | JSX.Element
+}
+
+const PostBlockFormik = (props: Props) => {
+  const { block, index, setFieldValue, handleLinkChange, blockValues, addMenu, handleImagePreviewChange } = props
+
+  const [ showImageInputs, setShowImageInputs ] = useState(true)
+  const [ formPreviewImage, setFormPreviewImage ] = useState('')
+
+  useEffect(() => {
+    const getImageForPreview = async () => {
+      let res
+      if (block.kind === 'image') {
+        const img = block as ImageBlockValue
+        let data: any
+        if (img.hash) data = await getImageFromIpfs(img.hash)
+        if (data) res = data
+      }
+      setFormPreviewImage(res)
+      if (res) setShowImageInputs(false)
+    }
+
+    getImageForPreview()
+  }, [])
+
+  const langs = [
+    { name: 'javascript', pretty: 'JavaScript' },
+    { name: 'typescript', pretty: 'TypeScript' },
+    { name: 'html', pretty: 'HTML' },
+    { name: 'scss', pretty: 'CSS/SCSS' },
+    { name: 'rust', pretty: 'Rust' },
+    { name: 'sh', pretty: 'Shell' }
+  ]
+
+  const MAX_PREVIEW_BLOCKS = 2
+  const MAX_IMAGE_SIZE = 2 // MB
+
+  const modesMenu = (id: number) => (
+    <Menu>
+      {langs.map((x) => (
+        <Menu.Item key={x.name} onClick={() => handleAceMode(x.name, id)} >
+          {x.pretty}
+        </Menu.Item>
+      ))}
+    </Menu>
+  )
+
+  const handleAceMode = (mode: string, id: number) => {
+    const bvIdx = blockValues.findIndex((x) => x.id === id)
+    setFieldValue(`blockValues.${bvIdx}.lang`, mode)
+  }
+
+  const removeBlock = (id: number) => {
+    const idx = blockValues.findIndex((x) => x.id === id)
+
+    setFieldValue('blockValues', [
+      ...blockValues.slice(0, idx),
+      ...blockValues.slice(idx + 1)
+    ])
+  }
+
+  const changeBlockPosition = (order: number, index: number) => {
+
+    const newBlocksOrder = [ ...blockValues ]
+    newBlocksOrder[index] = blockValues[index + order]
+    newBlocksOrder[index + order] = blockValues[index]
+
+    setFieldValue('blockValues', newBlocksOrder)
+  }
+
+  const beforeUpload = (file: RcFile) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    if (!isJpgOrPng) {
+      console.log('You can upload JPG or PNG file');
+    }
+    const isLt2M = file.size / 1024 / 1024 < MAX_IMAGE_SIZE;
+    if (!isLt2M) {
+      console.log('Image must be less than 2 MB');
+    }
+    return isJpgOrPng && isLt2M;
+  }
+
+  const handleImage = async (info: UploadChangeParam<UploadFile<any>>) => {
+    const { status } = info.file;
+    if (status !== 'uploading') {
+      setShowImageInputs(false)
+    }
+
+    if (status === 'done') {
+      const response = info.file.response
+      if (response.status === 'ok') {
+        setFieldValue(`blockValues.${index}.hash`, response.hash)
+        const src = await getImageFromIpfs(response.hash)
+        handleImagePreviewChange(block as ImageBlockValue, src)
+        setFormPreviewImage(src)
+        setShowImageInputs(false)
+      }
+    } else if (status === 'error') {
+      setShowImageInputs(true)
+    }
+  }
+
+  const handleImgRemove = () => {
+    setFormPreviewImage('')
+    setFieldValue(`blockValues.${index}.hash`, undefined)
+    setShowImageInputs(true)
+  }
+
+  let res
+
+  switch (block.kind) {
+    case 'text': {
+      res = <SimpleMDEReact
+        value={block.data}
+        onChange={(data: string) => setFieldValue(`blockValues.${index}.data`, data)}
+        className={`markdown-body`}
+      />
+      break
+    }
+    case 'link': {
+      res = <Field
+        type='text'
+        name={`blockValues.${index}.data`}
+        placeholder='Link'
+        value={block.data}
+        onChange={(e: React.FormEvent<HTMLInputElement>) => handleLinkChange(block, `blockValues.${index}.data`, e.currentTarget.value)}
+      />
+      break
+    }
+    case 'image': {
+      const img = block as ImageBlockValue
+      res = showImageInputs
+        ? <div className='ImageBlockWrapper'>
+          <Field
+            type='text'
+            name={`blockValues.${index}.data`}
+            placeholder='Image link'
+            value={block.data}
+            onChange={(e: React.FormEvent<HTMLInputElement>) => setFieldValue(`blockValues.${index}.data`, e.currentTarget.value)}
+          />
+          <div className='ImageUploadDivider'>Or</div>
+          <Dragger
+            name='picture'
+            multiple={false}
+            action='http://127.0.0.1:3001/offchain/upload'
+            onChange={(info: UploadChangeParam<UploadFile<any>>) => handleImage(info)}
+            beforeUpload={beforeUpload}
+            showUploadList={false}
+            className='Dragger'
+          >
+            <p className='ant-upload-drag-icon'>
+              <Icon type='inbox' />
+            </p>
+            <p className='ant-upload-text'>Click or drag file to this area to upload</p>
+          </Dragger>
+        </div>
+        : <div className='ImgFormPreviewWrapper'>
+          <Icon type='delete' className='RemoveImgIcon' onClick={handleImgRemove} />
+          <img src={formPreviewImage} />
+          <Field
+            type='text'
+            name={`blockValues.${index}.description`}
+            placeholder='Image description'
+            value={img.description}
+            className={'ImageDescription'}
+            onChange={(e: React.FormEvent<HTMLInputElement>) => setFieldValue(`blockValues.${index}.description`, e.currentTarget.value)}
+          />
+        </div>
+      break
+    }
+    case 'video': {
+      res = <Field
+        type='text'
+        name={`blockValues.${index}.data`}
+        placeholder='Video link'
+        value={block.data}
+        onChange={(e: React.FormEvent<HTMLInputElement>) => handleLinkChange(block, `blockValues.${index}.data`, e.currentTarget.value)}
+      />
+      break
+    }
+    case 'code': {
+      const { lang } = block as CodeBlockValue
+      const pretty = langs.find((x) => x.name === lang)?.pretty
+      res = <div className='EditPostAceEditor'>
+        <Dropdown overlay={() => modesMenu(block.id)} className={'AceModeSelect'}>
+          <a href='#' onClick={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => e.preventDefault()}>
+            <Icon type='down' /> Syntax: {pretty || 'JavaScript'}
+          </a>
+        </Dropdown>
+        <AceEditor
+          mode={lang || 'javascript'}
+          theme='github'
+          onChange={(value: string) => setFieldValue(`blockValues.${index}.data`, value)}
+          value={block.data}
+          name='ace-editor'
+          editorProps={{ $blockScrolling: true }}
+          className={'AceEditor'}
+          width='100%'
+          minLines={1}
+          maxLines={10}
+        />
+      </div>
+      break
+    }
+    default: {
+      return null
+    }
+  }
+
+  const maxBlockId = Math.max.apply(null, blockValues.map((x) => {
+    return x.id
+  }))
+
+  let tempArray = 0
+  blockValues.find((x) => {
+    if (x.featured) tempArray++
+  })
+  const isPlaceForPreview = tempArray < MAX_PREVIEW_BLOCKS
+
+  const handleUseOnPreview = (index: number, isPlaceForPreview: boolean) => {
+    if (!isPlaceForPreview && !blockValues[index].featured) return
+    setFieldValue(`blockValues.${index}.featured`, !blockValues[index].featured)
+  }
+
+  const mobileButtonsMenu = (
+    <Menu className='MobileButtonsMenu'>
+      <Icon type='plus-circle' className='AddBlockPlusIcon AddBefore' />
+      <SubMenu title={`Add block before`} className='addBlockMenuButton'>
+        {addMenu(index, true, 'before')}
+      </SubMenu>
+      <Icon type='plus-circle' className='AddBlockPlusIcon AddAfter' />
+      <SubMenu title={`Add block after`} className='addBlockMenuButton'>
+        {addMenu(index, true, 'after')}
+      </SubMenu>
+      <Menu.Item>
+        <a onClick={() => handleUseOnPreview(index, isPlaceForPreview)} className={`SmallAntButton ${!isPlaceForPreview && 'off'} ${block.featured && 'on'}`}>
+          <Icon type='star' /> Featured
+        </a>
+      </Menu.Item>
+      { index > 0 &&
+      <Menu.Item><a className={'SmallAntButton'} onClick={() => changeBlockPosition(-1, index)} >
+        <Icon type='up-circle' /> Move Up
+      </a></Menu.Item> }
+      { index < maxBlockId &&
+        <Menu.Item><a className={'SmallAntButton'} onClick={() => changeBlockPosition(1, index)} >
+          <Icon type='down-circle' /> Move Down
+        </a></Menu.Item> }
+      <Menu.Item>
+        <a className={'SmallAntButton'} onClick={() => setFieldValue(`blockValues.${index}.hidden`, !block.hidden)}>
+          {block.hidden
+            ? <div><Icon type='eye' /> Show</div>
+            : <div><Icon type='eye-invisible' /> Hide</div>
+          }
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a onClick={() => removeBlock(block.id)} className={'SmallAntButton'}>
+          <Icon type='delete' /> Delete
+        </a>
+      </Menu.Item>
+    </Menu>
+  );
+
+  const buttonsMenu = <div className='ButtonsForMobile'>
+    <Dropdown overlay={mobileButtonsMenu}>
+      <a className='ant-dropdown-link' onClick={e => e.preventDefault()}>
+        <Icon type='ellipsis' className='MenuDotsIcon' />
+      </a>
+    </Dropdown>
+  </div>
+
+  return <div className={`EditPostBlockWrapper ${isMobile ? 'MobileBlock' : ''}`} key={block.id} >
+    {res}
+    {buttonsMenu}
+    {block.featured && <div className='EditPostCrown'><Icon type='star' /></div>}
+    <ErrorMessage name={`blockValues.${index}.data`} component='div' className='ui pointing red label' />
+  </div>
+}
+
+export default PostBlockFormik
diff --git a/src/components/posts/PostPreview/BlockPreview.css b/src/components/posts/PostPreview/BlockPreview.css
new file mode 100644
index 00000000..76f73db3
--- /dev/null
+++ b/src/components/posts/PostPreview/BlockPreview.css
@@ -0,0 +1,49 @@
+@import '../../utils/styles/subsocial-vars.css';
+
+.PreviewLinkWrapper {
+  border: 1px solid $color_light_border;
+  border-radius: 10px;
+  position: relative;
+
+  .PreviewImgWrapper {
+    .LinkImage {
+      border-radius: 10px 10px 0 0;
+    }
+    
+    &.Youtube:before {
+      content: url(../../../../public/play_youtube.png);
+      position: absolute;
+      top: calc(50% - 96px);
+      left: calc(50% - 48px);
+    }
+  }
+
+  .UnderPicture {
+    padding: 0 $space_normal $space_normal $space_normal;
+
+    .PreviewLinkTitle {
+      b {
+        font-size: $space_large;
+      }
+    }
+
+    .PreviewDescription {
+      color: #111;
+    }
+  
+    .PreviewLinkAfterDescription {
+      color: $color_muted;
+    }
+  }
+}
+
+.AceEditor {
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-weight: 400;
+  line-height: 1.4;
+  color: #333;
+  font-size: $font_normal;
+  max-height: 200px;
+  word-wrap: normal;
+  white-space: pre;
+}
\ No newline at end of file
diff --git a/src/components/posts/PostPreview/BlockPreview.tsx b/src/components/posts/PostPreview/BlockPreview.tsx
new file mode 100644
index 00000000..76cf6743
--- /dev/null
+++ b/src/components/posts/PostPreview/BlockPreview.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import { BlockValueKind, EmbedData, PreviewData, ImageBlockValue } from '../../types'
+import { DfMd } from '../../utils/DfMd'
+import './BlockPreview.css'
+import VideoPreview from './VideoPreview'
+import LinkPreview from './LinkPreview'
+import CodePreview from './CodePreview'
+
+type Props = {
+  block: BlockValueKind
+  embedData: EmbedData[]
+  setEmbedData: React.Dispatch<React.SetStateAction<EmbedData[]>>
+  linkPreviewData: PreviewData[]
+}
+
+const BlockPreview = (props: Props) => {
+  const { block: x, embedData, setEmbedData, linkPreviewData } = props
+
+  if (x.hidden) return null
+
+  let element
+
+  switch (x.kind) {
+    case 'link': {
+      element = <LinkPreview
+        block={x}
+        embedData={embedData}
+        linkPreviewData={linkPreviewData}
+      />
+      break
+    }
+    case 'text': {
+      element = <DfMd source={x.data} />
+      break
+    }
+    case 'image': {
+      const block = x as ImageBlockValue
+      let src = block.data
+      const previewData = linkPreviewData.find((y) => y.id === block.id)
+      if (previewData) src = previewData.data as any
+      element = <div>
+        <img className='DfPostImage' src={src} />
+        <div className='ImageDescriptionPreview'>{block.description}</div>
+      </div>
+      break
+    }
+    case 'code': {
+      element = <CodePreview
+        block={x}
+      />
+      break
+    }
+    case 'video': {
+      element = <VideoPreview
+        block={x}
+        embedData={embedData}
+        setEmbedData={setEmbedData}
+        linkPreviewData={linkPreviewData}
+      />
+      break
+    }
+    default: {
+      element = null
+    }
+  }
+
+  return <div key={x.id} >
+    {element}
+  </div>
+}
+
+export default BlockPreview
diff --git a/src/components/posts/PostPreview/CodePreview.tsx b/src/components/posts/PostPreview/CodePreview.tsx
new file mode 100644
index 00000000..54f26247
--- /dev/null
+++ b/src/components/posts/PostPreview/CodePreview.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { isServerSide } from 'src/components/utils'
+import { CodeBlockValue, BlockValueKind } from '../../types'
+import AceEditor from 'react-ace'
+import 'brace/mode/javascript'
+import 'brace/mode/typescript'
+import 'brace/mode/scss'
+import 'brace/mode/html'
+import 'brace/mode/sh'
+import 'brace/mode/rust'
+import 'brace/theme/github'
+
+type Props = {
+  block: BlockValueKind
+}
+
+const CodePreview = (props: Props) => {
+  const { block: x } = props
+  const { lang } = x as CodeBlockValue
+
+  if (isServerSide()) {
+    return <pre>{x.data}</pre>
+  }
+
+  return <AceEditor
+    mode={lang || 'javascript'}
+    theme='github'
+    value={x.data}
+    name='ace-editor-readonly'
+    readOnly={true}
+    editorProps={{ $blockScrolling: true }}
+    width='100%'
+    className={'AceEditor'}
+    minLines={1}
+    maxLines={10}
+  />
+}
+
+export default CodePreview
diff --git a/src/components/posts/PostPreview/GistEmbed.tsx b/src/components/posts/PostPreview/GistEmbed.tsx
new file mode 100644
index 00000000..bccaf8a2
--- /dev/null
+++ b/src/components/posts/PostPreview/GistEmbed.tsx
@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react'
+
+type Props = {
+  id: string
+  file: string
+}
+
+const Gist = ({ id, file }: Props) => {
+
+  useEffect(() => {
+    _updateIframeContent()
+  }, [ id, file ])
+
+  const [ iframe, setIframe ] = useState<HTMLIFrameElement | null>(null)
+
+  const _defineUrl = () => {
+    const fileArg = file ? `?file=${file}` : '';
+
+    return `https://gist.github.com/${id}.js${fileArg}`;
+  }
+
+  const _updateIframeContent = () => {
+
+    let doc
+    if (iframe?.contentDocument) doc = iframe.contentDocument;
+    else if (iframe?.contentWindow) doc = iframe.contentWindow.document;
+
+    const gistLink = _defineUrl()
+    const gistScript = `<script type='text/javascript' src='${gistLink}'></script>`;
+    const styles = '<style>*{font-size:12px;} .file{max-height: 300px;}</style>';
+    const elementId = file ? `gist-${id}-${file}` : `gist-${id}`;
+    const resizeScript = `onload="parent.document.getElementById('${elementId}').style.height=document.body.scrollHeight + 'px'"`;
+    const iframeHtml = `<html><head><base target='_blank'>${styles}</head><body ${resizeScript}>${gistScript}</body></html>`;
+
+    doc?.open();
+    doc?.writeln(iframeHtml);
+    doc?.close();
+  }
+
+  return (
+    <iframe
+      ref={(n: HTMLIFrameElement | null) => setIframe(n)}
+      width='100%'
+      frameBorder={0}
+      id={file ? `gist-${id}-${file}` : `gist-${id}`}
+    />
+  )
+}
+
+export default Gist
diff --git a/src/components/posts/PostPreview/LinkPreview.tsx b/src/components/posts/PostPreview/LinkPreview.tsx
new file mode 100644
index 00000000..dbd6a38f
--- /dev/null
+++ b/src/components/posts/PostPreview/LinkPreview.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { isLink, DOMAIN_REGEXP, GIST_REGEXP, TWITTER_REGEXP } from '../../utils'
+import { BlockValueKind, EmbedData, PreviewData } from '../../types'
+import { Icon } from 'antd'
+import Gist from './GistEmbed'
+import { Tweet } from 'react-twitter-widgets'
+
+type Props = {
+  block: BlockValueKind
+  embedData: EmbedData[]
+  linkPreviewData: PreviewData[]
+}
+
+const LinkPreview = (props: Props) => {
+  const { block: x, embedData, linkPreviewData } = props
+
+  const renderEmbed = (embedData: EmbedData) => {
+    switch (embedData.type) {
+      case 'twitter': {
+        return <Tweet options={{ width: '100%' }} tweetId={embedData?.data} />
+      }
+      case 'default': {
+        return <div>Default embed</div>
+      }
+    }
+    return null
+  }
+
+  if (!isLink(x.data)) {
+    return <div>{x.data}</div>
+  }
+
+  if (x.data.match(GIST_REGEXP)) {
+    const match = x.data.match(GIST_REGEXP)
+
+    if (match && match[0]) {
+      const res = match[0].split('/')
+      const file = match[5] || ''
+      return <Gist id={res[4]} file={file} />
+    }
+  }
+
+  if (x.data.match(TWITTER_REGEXP)) {
+    const match = x.data.match(TWITTER_REGEXP);
+    if (match && match[1]) {
+      return renderEmbed({ id: x.id, data: match[1], type: 'twitter' })
+    }
+  }
+
+  const currentEmbed = embedData.find((y) => y.id === x.id)
+  const previewData = linkPreviewData.find((y) => y.id === x.id)
+
+  if (!previewData) return null
+
+  const { data: { og } } = previewData
+  if (!og || !og.url) return null
+
+  const domain = x.data.match(DOMAIN_REGEXP)
+
+  return (
+    <div>
+      <a
+        href={x.data}
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        {currentEmbed
+          ? renderEmbed(currentEmbed)
+          : <div className={'PreviewLinkWrapper'}>
+            <div className={`PreviewImgWrapper`}>
+              <img src={og?.image} className='DfPostImage LinkImage' />
+            </div>
+            <div className={'UnderPicture'}>
+              <p className='PreviewLinkTitle'><b>{og?.title}</b></p>
+              <p className='PreviewDescription'>{og?.description}</p>
+              <p className='PreviewLinkAfterDescription'><Icon type='link' /> {domain}</p>
+            </div>
+          </div>}
+      </a>
+    </div>
+  )
+}
+
+export default LinkPreview
diff --git a/src/components/posts/PostPreview/VideoPreview.tsx b/src/components/posts/PostPreview/VideoPreview.tsx
new file mode 100644
index 00000000..11fa8ac4
--- /dev/null
+++ b/src/components/posts/PostPreview/VideoPreview.tsx
@@ -0,0 +1,124 @@
+import React from 'react'
+import { isLink, YOUTUBE_REGEXP, VIMEO_REGEX, DOMAIN_REGEXP } from '../../utils'
+import { nonEmptyStr } from '@subsocial/utils'
+import { BlockValueKind, EmbedData, PreviewData } from '../../types'
+import { Icon } from 'antd'
+
+type Props = {
+  block: BlockValueKind
+  embedData: EmbedData[]
+  setEmbedData: React.Dispatch<React.SetStateAction<EmbedData[]>>
+  linkPreviewData: PreviewData[]
+}
+
+const VideoPreview = (props: Props) => {
+  const { block: x, embedData, linkPreviewData, setEmbedData} = props
+
+  const handleEmbed = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, url: string, id: number) => {
+    if (!nonEmptyStr(url) || !isLink(url)) return
+
+    let data
+    const newArray = [ ...embedData ]
+    let type = ''
+
+    if (url.match(YOUTUBE_REGEXP)) {
+      e.preventDefault()
+      const match = url.match(YOUTUBE_REGEXP);
+      if (match && match[2]) {
+        data = match[2]
+        type = 'youtube'
+      }
+    }
+
+    if (url.match(VIMEO_REGEX)) {
+      e.preventDefault()
+      const match = url.match(VIMEO_REGEX);
+      if (match && match[3]) {
+        data = match[3]
+        type = 'vimeo'
+      }
+    }
+
+    if (!data) return
+
+    const idx = embedData.findIndex((x) => x.id === id)
+    if (idx === -1) {
+      newArray.push({ id, data, type })
+    } else {
+      newArray[idx].data = data
+    }
+
+    setEmbedData(newArray)
+  }
+
+  const renderEmbed = (embedData: EmbedData) => {
+    switch (embedData.type) {
+      case 'youtube': {
+        return <iframe src={`https://www.youtube.com/embed/${embedData?.data}`}
+          frameBorder='0'
+          allow='autoplay; encrypted-media'
+          allowFullScreen
+          width='100%'
+          // height='450px'
+          title={`video${embedData?.data}`}
+        />
+      }
+      case 'vimeo': {
+        return <iframe src={`https://player.vimeo.com/video/${embedData?.data}?autoplay=1&loop=1&autopause=0`}
+          width='100%'
+          // height='450'
+          allow='autoplay; fullscreen'
+          frameBorder={0}
+        />
+      }
+      case 'default': {
+        return <div>default embed</div>
+      }
+    }
+    return null
+  }
+
+  if (!isLink(x.data)) {
+    return <div>{x.data}</div>
+  }
+
+  const currentEmbed = embedData.find((y) => y.id === x.id)
+  const previewData = linkPreviewData.find((y) => y.id === x.id)
+
+  let match
+
+  if (!previewData) return null
+
+  const { data: { og } } = previewData
+  if (!og || !og.url) return null
+  if (og?.url.match(YOUTUBE_REGEXP)) match = 'Youtube'
+  if (og?.url.match(VIMEO_REGEX)) match = 'Vimeo'
+
+  const domain = x.data.match(DOMAIN_REGEXP)
+
+  return (
+    <div>
+      <a
+        href={x.data}
+        target='_blank'
+        rel='noopener noreferrer'
+        onClick={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => handleEmbed(e, x.data as string, x.id)}
+      >
+        {currentEmbed
+          ? renderEmbed(currentEmbed)
+          : <div className={'PreviewLinkWrapper'}>
+            <div className={`PreviewImgWrapper ${match}`}>
+              <img src={og?.image} className='DfPostImage LinkImage' />
+            </div>
+            <div className={'UnderPicture'}>
+              <p className='PreviewLinkTitle'><b>{og?.title}</b></p>
+              <p className='PreviewDescription'>{og?.description}</p>
+              <p className='PreviewLinkAfterDescription'><Icon type='link' /> {domain}</p>
+            </div>
+          </div>}
+      </a>
+    </div>
+  )
+}
+
+export default VideoPreview
diff --git a/src/components/posts/ShareModal.tsx b/src/components/posts/ShareModal.tsx
index 52bdf489..3e082c34 100644
--- a/src/components/posts/ShareModal.tsx
+++ b/src/components/posts/ShareModal.tsx
@@ -1,17 +1,18 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { withCalls, withMulti } from '@polkadot/react-api';
 import { socialQueryToProp } from '../utils/index';
 import { Modal, Button } from 'semantic-ui-react';
 import { withMyAccount, MyAccountProps } from '../utils/MyAccount';
-import { NewSharePost } from './EditPost';
 import { ViewPost } from './ViewPost';
 import Link from 'next/link';
 import { Loading } from '../utils/utils';
 import { LabeledValue } from 'antd/lib/select';
 import SelectBlogPreview from '../utils/SelectBlogPreview';
 import BN from 'bn.js';
-import { PostExtension, SharedPost } from '@subsocial/types/substrate/classes';
+// import dynamic from 'next/dynamic';
+
+// const NewSharePost = dynamic(() => import('./EditPost').then((mod: any) => mod.NewSharePost), { ssr: false });
 
 type Props = MyAccountProps & {
   postId: BN,
@@ -25,8 +26,8 @@ const InnerShareModal = (props: Props) => {
 
   if (!blogIds) return <Loading />;
 
-  const [ blogId, setBlogId ] = useState(blogIds[0]);
-  const extension = new PostExtension({ SharedPost: postId as SharedPost });
+  // const [ blogId, setBlogId ] = useState(blogIds[0]);
+  // const extension = new PostExtension({ SharedPost: new SharedPost(postId) });
 
   const renderShareView = () => {
     if (blogIds.length === 0) {
@@ -36,18 +37,21 @@ const InnerShareModal = (props: Props) => {
     }
 
     const saveBlog = (value: string | number | LabeledValue) => {
-      setBlogId(new BN(value as string));
+      // setBlogId(new BN(value as string));
     };
+
     return (<div className='DfShareModal'>
       <SelectBlogPreview
         blogIds={blogIds}
         onSelect={saveBlog}
         imageSize={24}
         defaultValue={blogIds[0].toString()} />
+        {/*
       <NewSharePost
         blogId={blogId}
         extension={extension}
       />
+        */}
       <ViewPost id={postId} withStats={false} withActions={false} variant='preview'/>
     </div>
     );
@@ -77,4 +81,4 @@ export const ShareModal = withMulti(
   withCalls<Props>(
     socialQueryToProp(`blogIdsByOwner`, { paramName: 'myAddress', propName: 'blogIds' })
   )
-);
+);
\ No newline at end of file
diff --git a/src/components/posts/ViewComment.tsx b/src/components/posts/ViewComment.tsx
index a4ead613..f5c934b5 100644
--- a/src/components/posts/ViewComment.tsx
+++ b/src/components/posts/ViewComment.tsx
@@ -96,7 +96,7 @@ export function CommentsTree (props: Props) {
   };
 
   const RenderCommentsOnPost = () => (
-    <Section className='DfCommentsByPost'>
+    <Section className='DfCommentsByPost bookPage'>
       <h4><Pluralize count={commentsCount} singularText='comment' /></h4>
       <div id={`comments-on-post-${postId}`}>
         {<NewComment postId={postId}/>}
diff --git a/src/components/posts/ViewPost.tsx b/src/components/posts/ViewPost.tsx
index a32ef37d..7ac4e878 100644
--- a/src/components/posts/ViewPost.tsx
+++ b/src/components/posts/ViewPost.tsx
@@ -1,23 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-
-import { DfMd } from '../utils/DfMd';
 import { Segment } from 'semantic-ui-react';
 import { GenericAccountId as AccountId } from '@polkadot/types';
 import Error from 'next/error'
-import { nonEmptyStr, newLogger } from '@subsocial/utils';
+import { newLogger } from '@subsocial/utils';
 import { HeadMeta } from '../utils/HeadMeta';
 import { Loading, formatUnixDate, getBlogId } from '../utils/utils';
-// import { PostHistoryModal } from '../utils/ListsEditHistory';
 import { PostVoters } from '../voting/ListVoters';
 import { ShareModal } from './ShareModal';
 import NoData from '../utils/EmptyList';
 import Section from '../utils/Section';
 import { ViewBlog } from '../blogs/ViewBlog';
-import { DfBgImg } from '../utils/DfBgImg';
 import isEmpty from 'lodash.isempty';
-import { isMobile } from 'react-device-detect';
 import { Icon, Menu, Dropdown } from 'antd';
 import { useMyAccount } from '../utils/MyAccountContext';
 import { NextPage } from 'next';
@@ -27,10 +22,13 @@ import { PostData, ExtendedPostData } from '@subsocial/types/dto';
 import { PostType, loadContentFromIpfs, getExtContent, PostExtContent } from './LoadPostUtils'
 import { getSubsocialApi } from '../utils/SubsocialConnect';
 import ViewTags from '../utils/ViewTags';
+import { PreviewData, EmbedData, BlockValueKind, BlockValueWithOptions, ImageBlockValue } from '../types';
+import { parse, getImageFromIpfs } from '../utils/index';
 import { useSubsocialApi } from '../utils/SubsocialApiContext';
 
 const log = newLogger('View post')
 
+const BlockPreview = dynamic(() => import('./PostPreview/BlockPreview'), { ssr: false });
 const CommentsByPost = dynamic(() => import('./ViewComment'), { ssr: false });
 const Voter = dynamic(() => import('../voting/Voter'), { ssr: false });
 const AddressComponents = dynamic(() => import('../utils/AddressComponents'), { ssr: false });
@@ -58,12 +56,14 @@ type ViewPostPageProps = {
   withBlogName?: boolean;
   postData: PostData;
   postExtData?: PostData;
+  blockValues?: BlockValueWithOptions[];
   commentIds?: BN[];
   statusCode?: number
 };
 
 export const ViewPostPage: NextPage<ViewPostPageProps> = (props: ViewPostPageProps) => {
   if (props.statusCode === 404) return <Error statusCode={props.statusCode} />
+  console.log('props in ViewPostPage', props)
 
   const { struct, content: initialContent } = props.postData;
 
@@ -78,7 +78,8 @@ export const ViewPostPage: NextPage<ViewPostPageProps> = (props: ViewPostPagePro
     withActions = true,
     withStats = true,
     withCreatedBy = true,
-    postExtData
+    postExtData,
+    blockValues
   } = props;
 
   const {
@@ -96,6 +97,8 @@ export const ViewPostPage: NextPage<ViewPostPageProps> = (props: ViewPostPagePro
   const [ commentsSection, setCommentsSection ] = useState(false);
   const [ postVotersOpen, setPostVotersOpen ] = useState(false);
   const [ activeVoters ] = useState(0);
+  const [ embedData, setEmbedData ] = useState<EmbedData[]>([])
+  const [ linkPreviewData, setLinkPreviewData ] = useState<PreviewData[]>([])
 
   const originalPost = postExtData && postExtData.struct;
   const [ originalContent, setOriginalContent ] = useState(getExtContent(postExtData?.content));
@@ -110,6 +113,32 @@ export const ViewPostPage: NextPage<ViewPostPageProps> = (props: ViewPostPagePro
     return () => { isSubscribe = false; };
   }, [ false ]);
 
+  useEffect(() => {
+
+    const firstLoad = async () => {
+      if (!blockValues) return
+      const res: PreviewData[] = []
+      for (const x of blockValues) {
+        if (x.kind === 'link' || x.kind === 'video') {
+          const data = await parse(x.data)
+          if (!data) continue
+          res.push({ id: x.id, data })
+        }
+        if (x.kind === 'image') {
+          const img = x as ImageBlockValue
+          let data: any
+          if (img.hash) data = await getImageFromIpfs(img.hash)
+          if (!data) continue
+          res.push({ id: x.id, data })
+        }
+      }
+      setLinkPreviewData(res)
+    }
+
+    firstLoad()
+
+  }, [ content ])
+
   type DropdownProps = {
     account: string | AccountId;
   };
@@ -183,17 +212,34 @@ export const ViewPostPage: NextPage<ViewPostPageProps> = (props: ViewPostPagePro
   const renderContent = (post: Post, content: PostExtContent | undefined) => {
     if (!post || !content) return null;
 
-    const { title, summary, image } = content;
-    const hasImage = nonEmptyStr(image);
-
-    return <div className='DfContent'>
-      <div className='DfPostText'>
-        {renderNameOnly(title || summary, post.id)}
-        <div className='DfSummary'>
-          {summary}
+    const { title, summary } = content;
+    const previewBlocks = blockValues?.filter((x: BlockValueWithOptions) => x.featured === true)
+    const hasPreviews = previewBlocks && previewBlocks.length !== 0
+    const imageBlock = blockValues?.find((x: BlockValueKind) => x.kind === 'image')
+
+    return <div className='MiniPreviewWrapper'>
+      <div className='DfContent'>
+        <div className='DfPostText'>
+          {renderNameOnly(title || summary, post.id)}
+          <div className='DfSummary'>
+            {!hasPreviews && summary}
+          </div>
         </div>
+        {hasPreviews
+          ? previewBlocks?.map((x: BlockValueKind) => <div className='MiniPreviewBlock'><BlockPreview
+            block={x}
+            embedData={embedData}
+            setEmbedData={setEmbedData}
+            linkPreviewData={linkPreviewData}
+          /></div>)
+          : imageBlock && <div className='MiniPreviewBlock'><BlockPreview
+            block={imageBlock}
+            embedData={embedData}
+            setEmbedData={setEmbedData}
+            linkPreviewData={linkPreviewData}
+          /></div>
+          }
       </div>
-      {hasImage && <DfBgImg src={image} size={isMobile ? 100 : 160} className='DfPostImagePreview' /* add onError handler */ />}
     </div>;
   };
 
@@ -266,25 +312,30 @@ export const ViewPostPage: NextPage<ViewPostPageProps> = (props: ViewPostPagePro
     </>;
   };
 
-  const renderDetails = (content?: PostExtContent) => {
-    if (!content) return null;
-    const { title, body, image, canonical, tags } = content;
-    return <Section className='DfContentPage'>
-      <HeadMeta title={title} desc={body} image={image} canonical={canonical} tags={tags} />
+  const renderDetails = (content: PostExtContent) => {
+    const { title, canonical, tags, summary } = content;
+    return <Section className='DfContentPage bookPage'>
+      {<HeadMeta title={title} desc={summary} image={''} canonical={canonical} tags={tags} /> }
       <div className='header DfPostTitle' style={{ display: 'flex' }}>
         <div className='DfPostName'>{title}</div>
         <RenderDropDownMenu account={created.account}/>
       </div>
       {<StatsPanel id={post.id}/>}
+      {renderBlogPreview(post)}
       {withCreatedBy && renderPostCreator(post)}
       <div style={{ margin: '1rem 0' }}>
-        {image && <img src={image} className='DfPostImage' /* add onError handler */ />}
-        <DfMd source={body} />
-        {/* TODO render tags */}
-        {withCreatedBy && renderPostCreator(post)}
-        {renderBlogPreview(post)}
+        {blockValues && blockValues.length > 0 &&
+          blockValues.map((x: BlockValueKind) => {
+            return <div key={x.id} className={'viewPostBlock'}><BlockPreview
+              block={x}
+              embedData={embedData}
+              setEmbedData={setEmbedData}
+              linkPreviewData={linkPreviewData}
+            /></div>
+          })
+        }
+        <ViewTags tags={tags} />
       </div>
-      <ViewTags tags={tags} />
       <Voter struct={post} type={'Post'}/>
       {/* <ShareButtonPost postId={post.id}/> */}
       <CommentsByPost postId={post.id} post={post} />
@@ -320,15 +371,16 @@ ViewPostPage.getInitialProps = async (props): Promise<any> => {
   const subsocial = await getSubsocialApi()
   const idOrHandle = blogId as string
   const blogIdFromUrl = await getBlogId(idOrHandle)
-  const extPostData = await subsocial.findPostWithExt(new BN(postId as string))
+  const postData = await subsocial.findPost(new BN(postId as string)) as any
+  const { ipfs } = await getSubsocialApi()
 
   // Post was not found:
-  if (!extPostData?.post?.struct && res) {
+  if (!postData?.struct && res) {
     res.statusCode = 404
     return { statusCode: 404 }
   }
 
-  const blogIdFromPost = extPostData?.post.struct?.blog_id
+  const blogIdFromPost = postData?.struct.blog_id
 
   // If blog id of this post is not equal to blog id/handle from URL,
   // then redirect to the URL with blog id of this post.
@@ -336,10 +388,20 @@ ViewPostPage.getInitialProps = async (props): Promise<any> => {
     res.writeHead(301, { Location: `/blogs/${blogIdFromPost.toString()}/posts/${postId}` })
     res.end()
   }
+  console.log('postData in initialProps in ViewPost', postData)
+  const blockValues = []
+  if (postData?.content.blocks && postData?.content.blocks.length > 0) {
+    for (const item of postData?.content.blocks) {
+      const value = await ipfs.findPost(item.cid) as unknown as BlockValueWithOptions
+      if (item.featured && value) value.featured = true
+      blockValues.push(value)
+    }
+  }
 
   return {
-    postData: extPostData?.post,
-    postExtData: extPostData?.ext
+    postData,
+    postExtData: {} as any,
+    blockValues
   };
 };
 
@@ -365,6 +427,8 @@ const withLoadedData = (Component: React.ComponentType<ViewPostPageProps>) => {
 
     if (isEmpty(extPostData)) return <Loading/>;
 
+    console.log('extPostData from withLoadedData', extPostData)
+
     return extPostData ? <Component postData={extPostData.post} postExtData={extPostData.ext} {...props}/> : null;
   };
 };
diff --git a/src/components/profiles/EditProfile.tsx b/src/components/profiles/EditProfile.tsx
index d4168940..149d4da1 100644
--- a/src/components/profiles/EditProfile.tsx
+++ b/src/components/profiles/EditProfile.tsx
@@ -135,7 +135,7 @@ const InnerForm = (props: FormProps) => {
 
   return (<>
     <HeadMeta title={title}/>
-    <Section className='EditEntityBox' title={title}>
+    <Section className='EditEntityBox bookPage' title={title}>
       <Form className='ui form DfForm EditEntityForm'>
 
         <LabelledText
diff --git a/src/components/profiles/ViewProfile.tsx b/src/components/profiles/ViewProfile.tsx
index d8edf185..f8687cd2 100644
--- a/src/components/profiles/ViewProfile.tsx
+++ b/src/components/profiles/ViewProfile.tsx
@@ -246,7 +246,7 @@ const Component: NextPage<Props> = (props: Props) => {
 
   return <>
     <HeadMeta title={getName()} desc={about} image={avatar} />
-    <Section>
+    <Section className='bookPage'>
       <div className='FullProfile'>
         {renderPreview()}
         <div className='Profile--actions'>
diff --git a/src/components/types/index.ts b/src/components/types/index.ts
index ef647cc7..2a5b174e 100644
--- a/src/components/types/index.ts
+++ b/src/components/types/index.ts
@@ -11,4 +11,71 @@ export const registerSubsocialTypes = (): void => {
   }
 };
 
+// export type IpfsData = PostBlock | BlockValue;
+
+export type PostBlockKind = 'text' | 'code' | 'link' | 'image' | 'video'
+
+export interface PostBlock {
+  kind: PostBlockKind
+  hidden?: boolean
+  featured?: boolean
+  /** CID aka IPFS hash */
+  cid: string
+}
+
+export type BlockValueKind = BlockValue | CodeBlockValue | ImageBlockValue
+
+export type BlockValueWithOptions = BlockValueKind & {
+  featured: boolean
+}
+
+export interface BlockValue {
+  id: number
+  kind: PostBlockKind
+  hidden?: boolean
+  data: string
+}
+
+export interface CodeBlockValue extends BlockValue {
+  lang: string
+}
+
+export interface ImageBlockValue extends BlockValue {
+  hash: string
+  description?: string
+}
+
+export type SharedPostContent = {
+  blocks: PostBlock[]
+};
+
+export type PostContent = SharedPostContent & {
+  title: string;
+  image: string;
+  tags: string[];
+  canonical: string;
+};
+
+export interface SiteMetaContent {
+  og?: {
+    title?: string,
+    description?: string,
+    image: string,
+    url: string
+  },
+  title?: string,
+  description?: string
+}
+
+export type PreviewData = {
+  id: number,
+  data: SiteMetaContent
+}
+
+export type EmbedData = {
+  id: number,
+  data: string,
+  type: string
+}
+
 export default registerSubsocialTypes;
diff --git a/src/components/utils/DataList.tsx b/src/components/utils/DataList.tsx
index 60d70ad7..df259a03 100644
--- a/src/components/utils/DataList.tsx
+++ b/src/components/utils/DataList.tsx
@@ -103,7 +103,7 @@ export function ListData<T extends any> (props: Props<T>) {
 
   return !title
     ? list
-    : <Section title={renderTitle()}>{list}</Section>
+    : <Section className='bookPage' title={renderTitle()}>{list}</Section>
 }
 
 export default ListData
diff --git a/src/components/utils/DfMd.tsx b/src/components/utils/DfMd.tsx
index f96f98bd..f9f89a17 100644
--- a/src/components/utils/DfMd.tsx
+++ b/src/components/utils/DfMd.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactMarkdown from 'react-markdown';
+import '../utils/styles/github-markdown.css'
 
 interface Props {
   source?: string
 }
 
 export const DfMd = (props: Props) => {
-  return <ReactMarkdown className='DfMd' source={props.source} linkTarget='_blank' />
+  return <ReactMarkdown className='markdown-body' source={props.source} linkTarget='_blank' />
 }
diff --git a/src/components/utils/OffchainUtils.ts b/src/components/utils/OffchainUtils.ts
index cfb3c972..be883749 100644
--- a/src/components/utils/OffchainUtils.ts
+++ b/src/components/utils/OffchainUtils.ts
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { getEnv } from './utils';
 import { Activity } from '@subsocial/types/offchain';
+import { SiteMetaContent } from '../types';
 
 export const offchainUrl = getEnv('OFFCHAIN_URL') || 'http://localhost:3001';
 export const ipfsUrl = getEnv('IPFS_URL') || '/ip4/127.0.0.1/tcp/5001/http';
@@ -33,3 +34,10 @@ export const clearNotifications = async (myAddress: string): Promise<void> => {
     console.log(`Failed to mark all notifications as read for account: ${myAddress}`, err)
   }
 };
+
+export const parseUrl = async (url: string): Promise<SiteMetaContent> => {
+  const res = await axios.post(`${offchainUrl}/offchain/parser/`, { url });
+  const { data } = res;
+
+  return data.siteMeta;
+};
\ No newline at end of file
diff --git a/src/components/utils/SelectBlogPreview.tsx b/src/components/utils/SelectBlogPreview.tsx
index 8997b0e5..91144d4c 100644
--- a/src/components/utils/SelectBlogPreview.tsx
+++ b/src/components/utils/SelectBlogPreview.tsx
@@ -29,7 +29,7 @@ const SUB_SIZE = 2;
 const SelectBlogPreview = (props: Props) => {
   const { preparedBlogsData = [], imageSize = 36, onSelect, defaultValue } = props
 
-  if (isEmptyArray(preparedBlogsData)) return <NoData description={<span>No blogs found</span>} />;
+  if (isEmptyArray(preparedBlogsData)) return <span>No blogs found</span>;
 
   return <Select
     style={{ width: 200 }}
@@ -57,7 +57,7 @@ const GetBlogData = (Component: React.ComponentType<Props>) => {
   return (props: Props) => {
     const { blogIds } = props
 
-    if (isEmptyArray(blogIds)) return <NoData description={<span>No blogs found</span>} />
+    if (isEmptyArray(blogIds)) return <span>No blogs found</span>
 
     const { subsocial } = useSubsocialApi()
     const [ currentBlogsData, setCurrentBlogsData ] = useState<BlogData[]>([])
diff --git a/src/components/utils/index.tsx b/src/components/utils/index.tsx
index ca7671a3..2fc81de1 100644
--- a/src/components/utils/index.tsx
+++ b/src/components/utils/index.tsx
@@ -1,5 +1,10 @@
 /* eslint-disable no-mixed-operators */
 import BN from 'bn.js';
+import { SiteMetaContent } from '../types';
+import { parseUrl } from './OffchainUtils';
+import { isEmptyStr, newLogger } from '@subsocial/utils'
+
+const log = newLogger('Utils')
 
 // Substrate/Polkadot API utils
 // --------------------------------------
@@ -8,6 +13,46 @@ import { Options as QueryOptions } from '@polkadot/react-api/hoc/types';
 // Parse URLs
 // --------------------------------------
 
+// TODO merge this func with `OffchainUtils.parseUrl`
+export const parse = async (url: string): Promise<SiteMetaContent | undefined> => {
+  if (isEmptyStr(url) || !isLink(url)) return
+
+  try {
+    return await parseUrl(url)
+  } catch (err) {
+    log.warn('Failed to parse URL: %s', url)
+    return undefined
+  }
+}
+
+export const getImageFromIpfs = async (hash: string) => {
+  // TODO get image from IPFS cluster
+  const raw = await fetch(`http://127.0.0.1:8080/ipfs/${hash}`)
+  const data: any = await raw.json()
+  const mimetype = data?.mimetype
+  const image = data?.image
+  const src = `data:${mimetype};base64, ${image}`
+  return src
+}
+
+export const isLink = (s: string) => {
+  const URL_REGEXP = /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)?/gi;
+  const regex = new RegExp(URL_REGEXP);
+
+  if (s.match(regex)) {
+    return true
+  } else {
+    return false
+  }
+}
+
+// TODO move these regexps to another file. Closer to Post Editor?
+export const VIMEO_REGEX = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/;
+export const YOUTUBE_REGEXP = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+export const TWITTER_REGEXP = /(?:http:\/\/)?(?:www\.)?twitter\.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[\w-]*\/)*([\w-]*)/;
+export const GIST_REGEXP = /https:\/\/gist.github.com\/[^\/]+\/[^\/]+/;
+export const DOMAIN_REGEXP = /^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n?]+)/img;
+
 import queryString from 'query-string';
 
 export const ZERO = new BN(0);
diff --git a/src/components/utils/styles.ts b/src/components/utils/styles.ts
index b919e6d5..885acb75 100644
--- a/src/components/utils/styles.ts
+++ b/src/components/utils/styles.ts
@@ -7,7 +7,6 @@ import './styles/theme/polkadot.css'; // TODO Maybe delete?
 import './styles/theme/substrate.css';
 
 import './styles/bootstrap-utilities-4.3.1.css';
-import './styles/app.css';
 import './styles/form.css';
 import './styles/media.css';
 import './styles/rx.css';
diff --git a/src/components/utils/styles/app.css b/src/components/utils/styles/app.css
deleted file mode 100644
index d3670f1d..00000000
--- a/src/components/utils/styles/app.css
+++ /dev/null
@@ -1,101 +0,0 @@
-/* Copyright 2017-2019 @polkadot/ui-app authors & contributors
-/* This software may be modified and distributed under the terms
-/* of the Apache-2.0 license. See the LICENSE file for details. */
-
-html {
-  height: 100%;
-}
-
-body {
-  height: 100%;
-  margin: 0;
-}
-
-#root {
-  color: #4e4e4e;
-  font-family: sans-serif;
-  height: 100%;
-}
-
-h1, h2, h3, h4, h5 {
-  color: rgba(0, 0, 0, .6);
-  font-family: sans-serif;
-  font-weight: 100;
-}
-
-h1 {
-  font-weight: normal;
-}
-
-h3, h4, h5 {
-  margin-bottom: 0.25rem;
-}
-
-label {
-  box-sizing: border-box;
-  color: rgba(78,78,78,.75);
-  display: block;
-  font-family: sans-serif;
-  font-size: 1rem;
-  font-weight: 100;
-  margin: 0.25rem;
-}
-
-/*
-a:hover {
-  color: #D75EA1;
-}
-*/
-
-br {
-  line-height: 1.5rem;
-}
-
-main {
-  min-height: 100vh;
-}
-
-main > section {
-  margin-bottom: 2em;
-}
-
-header > article {
-  background: transparent;
-}
-
-article {
-  border-radius: 0.25rem;
-  /*box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);*/
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  margin: 0.25rem;
-  padding: 1.25rem 1.5rem;
-  text-align: left;
-
-  &.padded {
-    padding: 0.75rem 2.5rem;
-
-    > div {
-      margin: 0.25rem;
-    }
-  }
-
-  &.error {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }
-
-  &.warning {
-    background: #ffffe0;
-    border-color: #eeeeae;
-  }
-
-  > ul {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.m-1 {
-  margin-top: 1rem;
-}
diff --git a/src/components/utils/styles/github-markdown.css b/src/components/utils/styles/github-markdown.css
new file mode 100644
index 00000000..b56e8c27
--- /dev/null
+++ b/src/components/utils/styles/github-markdown.css
@@ -0,0 +1,985 @@
+.markdown-body .octicon {
+  display: inline-block;
+  fill: currentColor;
+  vertical-align: text-bottom;
+}
+
+.markdown-body .anchor {
+  float: left;
+  line-height: 1;
+  margin-left: -20px;
+  padding-right: 4px;
+}
+
+.markdown-body .anchor:focus {
+  outline: none;
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: #1b1f23;
+  vertical-align: middle;
+  visibility: hidden;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+  width: 16px;
+  height: 16px;
+  content: ' ';
+  display: inline-block;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E");
+}.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  line-height: 1.5;
+  color: #24292e;
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.markdown-body details {
+  display: block;
+}
+
+.markdown-body summary {
+  display: list-item;
+}
+
+.markdown-body a {
+  background-color: initial;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+  outline-width: 0;
+}
+
+.markdown-body strong {
+  font-weight: inherit;
+  font-weight: bolder;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  margin: .67em 0;
+}
+
+.markdown-body img {
+  border-style: none;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre {
+  font-family: monospace,monospace;
+  font-size: 1em;
+}
+
+.markdown-body hr {
+  box-sizing: initial;
+  height: 0;
+  overflow: visible;
+}
+
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+}
+
+.markdown-body input {
+  overflow: visible;
+}
+
+.markdown-body [type=checkbox] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body * {
+  box-sizing: border-box;
+}
+
+.markdown-body input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-body a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body strong {
+  font-weight: 600;
+}
+
+.markdown-body hr {
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #dfe2e5;
+}
+
+.markdown-body hr:after,
+.markdown-body hr:before {
+  display: table;
+  content: "";
+}
+
+.markdown-body hr:after {
+  clear: both;
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body details summary {
+  cursor: pointer;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  line-height: 10px;
+  color: #444d56;
+  vertical-align: middle;
+  background-color: #fafbfc;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #d1d5da;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body h1 {
+  font-size: 32px;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+  font-weight: 600;
+}
+
+.markdown-body h2 {
+  font-size: 24px;
+}
+
+.markdown-body h3 {
+  font-size: 20px;
+}
+
+.markdown-body h3,
+.markdown-body h4 {
+  font-weight: 600;
+}
+
+.markdown-body h4 {
+  font-size: 16px;
+}
+
+.markdown-body h5 {
+  font-size: 14px;
+}
+
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: 600;
+}
+
+.markdown-body h6 {
+  font-size: 12px;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ol ol ol,
+.markdown-body ol ul ol,
+.markdown-body ul ol ol,
+.markdown-body ul ul ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body code,
+.markdown-body pre {
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-size: 12px;
+}
+
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body input::-webkit-inner-spin-button,
+.markdown-body input::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.markdown-body :checked+.radio-label {
+  position: relative;
+  z-index: 1;
+  border-color: #0366d6;
+}
+
+.markdown-body .border {
+  border: 1px solid #e1e4e8!important;
+}
+
+.markdown-body .border-0 {
+  border: 0!important;
+}
+
+.markdown-body .border-bottom {
+  border-bottom: 1px solid #e1e4e8!important;
+}
+
+.markdown-body .rounded-1 {
+  border-radius: 3px!important;
+}
+
+.markdown-body .bg-white {
+  background-color: #fff!important;
+}
+
+.markdown-body .bg-gray-light {
+  background-color: #fafbfc!important;
+}
+
+.markdown-body .text-gray-light {
+  color: #6a737d!important;
+}
+
+.markdown-body .mb-0 {
+  margin-bottom: 0!important;
+}
+
+.markdown-body .my-2 {
+  margin-top: 8px!important;
+  margin-bottom: 8px!important;
+}
+
+.markdown-body .pl-0 {
+  padding-left: 0!important;
+}
+
+.markdown-body .py-0 {
+  padding-top: 0!important;
+  padding-bottom: 0!important;
+}
+
+.markdown-body .pl-1 {
+  padding-left: 4px!important;
+}
+
+.markdown-body .pl-2 {
+  padding-left: 8px!important;
+}
+
+.markdown-body .py-2 {
+  padding-top: 8px!important;
+  padding-bottom: 8px!important;
+}
+
+.markdown-body .pl-3,
+.markdown-body .px-3 {
+  padding-left: 16px!important;
+}
+
+.markdown-body .px-3 {
+  padding-right: 16px!important;
+}
+
+.markdown-body .pl-4 {
+  padding-left: 24px!important;
+}
+
+.markdown-body .pl-5 {
+  padding-left: 32px!important;
+}
+
+.markdown-body .pl-6 {
+  padding-left: 40px!important;
+}
+
+.markdown-body .f6 {
+  font-size: 12px!important;
+}
+
+.markdown-body .lh-condensed {
+  line-height: 1.25!important;
+}
+
+.markdown-body .text-bold {
+  font-weight: 600!important;
+}
+
+.markdown-body .pl-c {
+  color: #6a737d;
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: #005cc5;
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: #6f42c1;
+}
+
+.markdown-body .pl-s .pl-s1,
+.markdown-body .pl-smi {
+  color: #24292e;
+}
+
+.markdown-body .pl-ent {
+  color: #22863a;
+}
+
+.markdown-body .pl-k {
+  color: #d73a49;
+}
+
+.markdown-body .pl-pds,
+.markdown-body .pl-s,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sra,
+.markdown-body .pl-sr .pl-sre {
+  color: #032f62;
+}
+
+.markdown-body .pl-smw,
+.markdown-body .pl-v {
+  color: #e36209;
+}
+
+.markdown-body .pl-bu {
+  color: #b31d28;
+}
+
+.markdown-body .pl-ii {
+  color: #fafbfc;
+  background-color: #b31d28;
+}
+
+.markdown-body .pl-c2 {
+  color: #fafbfc;
+  background-color: #d73a49;
+}
+
+.markdown-body .pl-c2:before {
+  content: "^M";
+}
+
+.markdown-body .pl-sr .pl-cce {
+  font-weight: 700;
+  color: #22863a;
+}
+
+.markdown-body .pl-ml {
+  color: #735c0f;
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  font-weight: 700;
+  color: #005cc5;
+}
+
+.markdown-body .pl-mi {
+  font-style: italic;
+  color: #24292e;
+}
+
+.markdown-body .pl-mb {
+  font-weight: 700;
+  color: #24292e;
+}
+
+.markdown-body .pl-md {
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+.markdown-body .pl-mi1 {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+
+.markdown-body .pl-mc {
+  color: #e36209;
+  background-color: #ffebda;
+}
+
+.markdown-body .pl-mi2 {
+  color: #f6f8fa;
+  background-color: #005cc5;
+}
+
+.markdown-body .pl-mdr {
+  font-weight: 700;
+  color: #6f42c1;
+}
+
+.markdown-body .pl-ba {
+  color: #586069;
+}
+
+.markdown-body .pl-sg {
+  color: #959da5;
+}
+
+.markdown-body .pl-corl {
+  text-decoration: underline;
+  color: #032f62;
+}
+
+.markdown-body .mb-0 {
+  margin-bottom: 0!important;
+}
+
+.markdown-body .my-2 {
+  margin-bottom: 8px!important;
+}
+
+.markdown-body .my-2 {
+  margin-top: 8px!important;
+}
+
+.markdown-body .pl-0 {
+  padding-left: 0!important;
+}
+
+.markdown-body .py-0 {
+  padding-top: 0!important;
+  padding-bottom: 0!important;
+}
+
+.markdown-body .pl-1 {
+  padding-left: 4px!important;
+}
+
+.markdown-body .pl-2 {
+  padding-left: 8px!important;
+}
+
+.markdown-body .py-2 {
+  padding-top: 8px!important;
+  padding-bottom: 8px!important;
+}
+
+.markdown-body .pl-3 {
+  padding-left: 16px!important;
+}
+
+.markdown-body .pl-4 {
+  padding-left: 24px!important;
+}
+
+.markdown-body .pl-5 {
+  padding-left: 32px!important;
+}
+
+.markdown-body .pl-6 {
+  padding-left: 40px!important;
+}
+
+.markdown-body .pl-7 {
+  padding-left: 48px!important;
+}
+
+.markdown-body .pl-8 {
+  padding-left: 64px!important;
+}
+
+.markdown-body .pl-9 {
+  padding-left: 80px!important;
+}
+
+.markdown-body .pl-10 {
+  padding-left: 96px!important;
+}
+
+.markdown-body .pl-11 {
+  padding-left: 112px!important;
+}
+
+.markdown-body .pl-12 {
+  padding-left: 128px!important;
+}
+
+.markdown-body hr {
+  border-bottom-color: #eee;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  line-height: 10px;
+  color: #444d56;
+  vertical-align: middle;
+  background-color: #fafbfc;
+  border: 1px solid #d1d5da;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #d1d5da;
+}
+
+.markdown-body:after,
+.markdown-body:before {
+  display: table;
+  content: "";
+}
+
+.markdown-body:after {
+  clear: both;
+}
+
+.markdown-body>:first-child {
+  margin-top: 0!important;
+}
+
+.markdown-body>:last-child {
+  margin-bottom: 0!important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body blockquote,
+.markdown-body details,
+.markdown-body dl,
+.markdown-body ol,
+.markdown-body p,
+.markdown-body pre,
+.markdown-body table,
+.markdown-body ul {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body hr {
+  height: .25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #e1e4e8;
+  border: 0;
+}
+
+.markdown-body blockquote {
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: .25em solid #dfe2e5;
+}
+
+.markdown-body blockquote>:first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote>:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+  padding-bottom: .3em;
+  border-bottom: 1px solid #eaecef;
+}
+
+.markdown-body h2 {
+  font-size: 1.5em;
+}
+
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-size: .875em;
+}
+
+.markdown-body h6 {
+  font-size: .85em;
+  color: #6a737d;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+  padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ol ul,
+.markdown-body ul ol,
+.markdown-body ul ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body li {
+  word-wrap: break-all;
+}
+
+.markdown-body li>p {
+  margin-top: 16px;
+}
+
+.markdown-body li+li {
+  margin-top: .25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markdown-body table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+}
+
+.markdown-body table td,
+.markdown-body table th {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+.markdown-body table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.markdown-body img {
+  max-width: 100%;
+  box-sizing: initial;
+  background-color: #fff;
+}
+
+.markdown-body img[align=right] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align=left] {
+  padding-right: 20px;
+}
+
+.markdown-body code {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27,31,35,.05);
+  border-radius: 3px;
+}
+
+.markdown-body pre {
+  word-wrap: normal;
+}
+
+.markdown-body pre>code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+}
+
+.markdown-body pre code {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: initial;
+  border: 0;
+}
+
+.markdown-body .commit-tease-sha {
+  display: inline-block;
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-size: 90%;
+  color: #444d56;
+}
+
+.markdown-body .full-commit .btn-outline:not(:disabled):hover {
+  color: #005cc5;
+  border-color: #005cc5;
+}
+
+.markdown-body .blob-wrapper {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.markdown-body .blob-wrapper-embedded {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.markdown-body .blob-num {
+  width: 1%;
+  min-width: 50px;
+  padding-right: 10px;
+  padding-left: 10px;
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(27,31,35,.3);
+  text-align: right;
+  white-space: nowrap;
+  vertical-align: top;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.markdown-body .blob-num:hover {
+  color: rgba(27,31,35,.6);
+}
+
+.markdown-body .blob-num:before {
+  content: attr(data-line-number);
+}
+
+.markdown-body .blob-code {
+  position: relative;
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: 20px;
+  vertical-align: top;
+}
+
+.markdown-body .blob-code-inner {
+  overflow: visible;
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-size: 12px;
+  color: #24292e;
+  word-wrap: normal;
+  white-space: pre;
+}
+
+.markdown-body .pl-token.active,
+.markdown-body .pl-token:hover {
+  cursor: pointer;
+  background: #ffea7f;
+}
+
+.markdown-body .tab-size[data-tab-size="1"] {
+  -moz-tab-size: 1;
+  tab-size: 1;
+}
+
+.markdown-body .tab-size[data-tab-size="2"] {
+  -moz-tab-size: 2;
+  tab-size: 2;
+}
+
+.markdown-body .tab-size[data-tab-size="3"] {
+  -moz-tab-size: 3;
+  tab-size: 3;
+}
+
+.markdown-body .tab-size[data-tab-size="4"] {
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+.markdown-body .tab-size[data-tab-size="5"] {
+  -moz-tab-size: 5;
+  tab-size: 5;
+}
+
+.markdown-body .tab-size[data-tab-size="6"] {
+  -moz-tab-size: 6;
+  tab-size: 6;
+}
+
+.markdown-body .tab-size[data-tab-size="7"] {
+  -moz-tab-size: 7;
+  tab-size: 7;
+}
+
+.markdown-body .tab-size[data-tab-size="8"] {
+  -moz-tab-size: 8;
+  tab-size: 8;
+}
+
+.markdown-body .tab-size[data-tab-size="9"] {
+  -moz-tab-size: 9;
+  tab-size: 9;
+}
+
+.markdown-body .tab-size[data-tab-size="10"] {
+  -moz-tab-size: 10;
+  tab-size: 10;
+}
+
+.markdown-body .tab-size[data-tab-size="11"] {
+  -moz-tab-size: 11;
+  tab-size: 11;
+}
+
+.markdown-body .tab-size[data-tab-size="12"] {
+  -moz-tab-size: 12;
+  tab-size: 12;
+}
+
+.markdown-body .task-list-item {
+  list-style-type: none;
+}
+
+.markdown-body .task-list-item+.task-list-item {
+  margin-top: 3px;
+}
+
+.markdown-body .task-list-item input {
+  margin: 0 .2em .25em -1.6em;
+  vertical-align: middle;
+}
\ No newline at end of file
diff --git a/src/components/utils/styles/subsocial.css b/src/components/utils/styles/subsocial.css
index 6742d679..b828e702 100644
--- a/src/components/utils/styles/subsocial.css
+++ b/src/components/utils/styles/subsocial.css
@@ -17,10 +17,27 @@ body,
   max-width: 728px;
   color: #111;
 
+  .viewPostBlock {
+    margin-bottom: $space_huge;
+  }
+
+  .blogMiniPreview {
+    margin: $space_normal 0;
+  }
+
+  .ant-tabs-nav-wrap {
+    display: flex;
+  }
+
   .DfTags {
     margin: $space_normal 0;
     text-align: end;
   }
+
+  .bookPage {
+    max-width: 728px;
+    width: 100%;
+  }
 }
 
 .gAsmwL .ui.search.selection.dropdown > .text {
@@ -155,7 +172,6 @@ body,
 
 .EditEntityBox {
   width: 100%;
-  max-width: 600px;
 
   .EditEntityForm {
     width: 100%;
@@ -1375,3 +1391,43 @@ hr {
     }
   }
 }
+
+.markdown-body {
+  i {
+    color: $color_light_border;
+  }
+
+  &:hover,
+  &:focus-within {
+    i:not(.separator) {
+      color: black;
+    }
+  }
+}
+
+.CommentsEditor {
+  &.DfMdEditor {
+    i {
+      color: $color_light_border;
+    }
+
+    &:hover i:not(.separator) {
+      color: black;
+    }
+  }
+}
+
+.MiniPreviewWrapper {
+  .DfContent {
+    display: flex;
+    flex-direction: column;
+  }
+  .MiniPreviewBlock {
+    margin-bottom: $space_normal;
+  }
+}
+
+.twitter-tweet {
+  display: flex !important;
+  justify-content: center !important;
+}
diff --git a/src/pages/blogs/[blogId]/posts/[postId]/edit.tsx b/src/pages/blogs/[blogId]/posts/[postId]/edit.tsx
index efb98217..cde2861a 100644
--- a/src/pages/blogs/[blogId]/posts/[postId]/edit.tsx
+++ b/src/pages/blogs/[blogId]/posts/[postId]/edit.tsx
@@ -1,6 +1,6 @@
 
 import React from 'react';
 import dynamic from 'next/dynamic';
-const EditPost = dynamic(() => import('../../../../../components/posts/EditPost').then((mod: any) => mod.EditPost), { ssr: false });
+const EditPost = dynamic(() => import('../../../../../components/posts/PostEditor/EditPost').then((mod: any) => mod.EditPost), { ssr: false });
 
 export default () => <EditPost />;
diff --git a/src/pages/blogs/[blogId]/posts/new.tsx b/src/pages/blogs/[blogId]/posts/new.tsx
index b0b7bb0f..2d1273db 100644
--- a/src/pages/blogs/[blogId]/posts/new.tsx
+++ b/src/pages/blogs/[blogId]/posts/new.tsx
@@ -1,6 +1,6 @@
 
 import React from 'react';
 import dynamic from 'next/dynamic';
-const NewPost = dynamic(() => import('../../../../components/posts/EditPost').then((mod: any) => mod.NewPost), { ssr: false });
+const NewPost = dynamic(() => import('../../../../components/posts/PostEditor/EditPost').then((mod: any) => mod.NewPost), { ssr: false });
 
 export default () => <NewPost />;
diff --git a/yarn.lock b/yarn.lock
index 851ebf47..ee2f19c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3726,6 +3726,22 @@
     markdown-to-txt "^1.0.1"
     winston "^3.2.0"
 
+"@subsocial/utils@^0.1.23":
+  version "0.1.23"
+  resolved "https://registry.yarnpkg.com/@subsocial/utils/-/utils-0.1.23.tgz#f06fbc93e85875ac8ca6f70a07ff5c30a39633e5"
+  integrity sha512-UUi3e0CF+VMD6wXYM2GjjMANcL6X0kXkQyArYbzAxvJwOOfyowth42Z4ZE2hGXi2fbMbHz33Ml0KOWvAexQZ4A==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+    "@types/circular-json" "^0.4.0"
+    "@types/lodash.truncate" "^4.4.6"
+    "@types/winston" "^2.4.4"
+    bn.js "^5.1.1"
+    chalk "^3.0.0"
+    circular-json "^0.5.9"
+    dotenv "^8.0.0"
+    lodash.truncate "^4.4.2"
+    winston "^3.2.0"
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -3895,6 +3911,11 @@
   dependencies:
     "@types/filesystem" "*"
 
+"@types/circular-json@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@types/circular-json/-/circular-json-0.4.0.tgz#7401f7e218cfe87ad4c43690da5658b9acaf51be"
+  integrity sha512-7+kYB7x5a7nFWW1YPBh3KxhwKfiaI4PbZ1RvzBU91LZy7lWJO822CI+pqzSre/DZ7KsCuMKdHnLHHFu8AyXbQg==
+
 "@types/codemirror@^0.0.76":
   version "0.0.76"
   resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.76.tgz#c52719878056a216bc05889b46a41d4eb1434423"
@@ -4895,6 +4916,11 @@ accepts@^1.3.5, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+ace-builds@^1.4.6:
+  version "1.4.9"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.9.tgz#2b9b020706871f30e97f5510af891149f144d3d8"
+  integrity sha512-6I+uUDsj9AKu45VgJvloplr2DtGXRxsXNfdV9TypDkDi9MBiIV+oRNFJAf0g1b42Er3fgaVzMbLBxCeJQYNtSA==
+
 acorn-globals@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@@ -6207,6 +6233,11 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
+  integrity sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=
+
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -6854,6 +6885,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+circular-json@^0.5.9:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.5.9.tgz#932763ae88f4f7dead7a0d09c8a51a4743a53b1d"
+  integrity sha512-4ivwqHpIFJZBuhN3g/pEcdbnGUywkBblloGbkglyloVjjR3uT6tieI89MVOfbP2tHX5sgb01FuLgAOzebNlJNQ==
+
 class-is@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/class-is/-/class-is-1.1.0.tgz#9d3c0fba0440d211d843cec3dedfa48055005825"
@@ -8362,6 +8398,11 @@ diagnostics@^1.1.1:
     enabled "1.0.x"
     kuler "1.0.x"
 
+diff-match-patch@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.4.tgz#6ac4b55237463761c4daf0dc603eb869124744b1"
+  integrity sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg==
+
 diff-sequences@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
@@ -9403,7 +9444,7 @@ execa@^3.4.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-exenv@^1.2.0, exenv@^1.2.2:
+exenv@^1.2.0, exenv@^1.2.1, exenv@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
@@ -16636,7 +16677,7 @@ prop-types-exact@1.2.0, prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@15.7.2, prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@15.x, prop-types@^15.3.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -17432,6 +17473,17 @@ rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-ace@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-8.1.0.tgz#6680accb7306a1850e6ef4370a00f0007eadc8b4"
+  integrity sha512-n3rm9gRNZjLGlXJQ587RASOQCPn6WlcV2gjRYwvG3gyVpBf4pY6lh/uI9tDkx2zYdEKJUfnGbTmzEGL5yyDWuw==
+  dependencies:
+    ace-builds "^1.4.6"
+    diff-match-patch "^1.0.4"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.5.0"
+    prop-types "^15.7.2"
+
 react-beautiful-dnd@^13.0.0:
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#f70cc8ff82b84bc718f8af157c9f95757a6c3b40"
@@ -17896,6 +17948,16 @@ react-tween-state@^0.1.5:
     raf "^3.1.0"
     tween-functions "^1.0.1"
 
+react-twitter-widgets@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/react-twitter-widgets/-/react-twitter-widgets-1.7.1.tgz#60061f37a8c4f361c27f3d1d7ceba98d3cd80a40"
+  integrity sha512-bAcR/NKqRbVRJav981bHrm2+xka7NA2nQJB6Urtj9BARqP7aeGHPC0CrrC7wdYIaluOqiF8MiTtURqIJjFs2ZA==
+  dependencies:
+    exenv "^1.2.1"
+    lodash "^4.17.4"
+    prop-types "^15.3.0"
+    scriptjs "^2.5.8"
+
 react@^16.12.0, react@^16.8.3, react@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -18884,6 +18946,11 @@ schema-utils@^2.0.1, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
+scriptjs@^2.5.8:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+  integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
+
 sdp@^2.12.0, sdp@^2.6.0:
   version "2.12.0"
   resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22"