diff --git a/package.json b/package.json
index c1ed9cbc3..d9145c400 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "classnames": "^2.3.1",
     "date-fns": "^2.25.0",
     "date-fns-tz": "^1.1.6",
-    "detect-incognito": "^1.0.0",
+    "detectincognitojs": "^1.1.2",
     "echarts": "^5.2.2",
     "file-type": "^16.5.3",
     "formik": "^2.2.9",
diff --git a/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx b/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx
new file mode 100644
index 000000000..6998475d0
--- /dev/null
+++ b/src/components/NFTArticle/MarkdownEditor/MarkdownEditor.tsx
@@ -0,0 +1,37 @@
+import React, { ChangeEventHandler, FocusEventHandler, memo } from "react"
+import useInit from "../../../hooks/useInit"
+
+interface MarkdownEditorProps {
+  className?: string
+  value?: string
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>
+  placeholder?: string
+  onInit?: (markdown: string) => void
+}
+
+const _MarkdownEditor = ({
+  className,
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  onInit,
+}: MarkdownEditorProps) => {
+  useInit(() => {
+    if (onInit) {
+      onInit(value || "")
+    }
+  })
+  return (
+    <textarea
+      className={className}
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      placeholder={placeholder}
+    />
+  )
+}
+
+export const MarkdownEditor = memo(_MarkdownEditor)
diff --git a/src/components/NFTArticle/NFTArticleEditor.module.scss b/src/components/NFTArticle/NFTArticleEditor.module.scss
new file mode 100644
index 000000000..8786e8fe9
--- /dev/null
+++ b/src/components/NFTArticle/NFTArticleEditor.module.scss
@@ -0,0 +1,92 @@
+@import "../../styles/fonts";
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  z-index: 3;
+  width: 100%;
+  margin-bottom: 16px;
+  background: var(--color-white);
+  position: sticky;
+  top: 0;
+  left: 0;
+  border-bottom: 3px solid var(--color-editor-black);
+
+  .container_view {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin: auto;
+    width: min(900px, 100%);
+    button {
+      position: relative;
+      height: 40px;
+      text-align: center;
+      font-size: var(--font-size-small);
+      padding: 8px 16px;
+      cursor: pointer;
+      border: 3px solid var(--color-editor-gray-vvlight);
+      border-bottom: 0;
+      background: var(--color-editor-gray-vvlight);
+      color: var(--color-editor-gray);
+      margin: 0 4px -3px 0;
+      &:last-child {
+        margin-right: 0;
+      }
+      &:not(.view_active):after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: -3px;
+        right: -3px;
+        height: 3px;
+        background: var(--color-editor-black);
+        z-index: 2;
+      }
+      &.view_active {
+        color: var(--color-black);
+        background: var(--color-white);
+        border-color: var(--color-editor-black);
+      }
+    }
+  }
+}
+.container_centered {
+  width: min(900px, 100%);
+  margin: auto;
+}
+.container_markdown {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+.container_markdown_child {
+  flex: 1;
+}
+.container_preview_child {
+  flex: 1;
+  position: relative;
+}
+.container_preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 16px;
+}
+.textarea_markdown {
+  display: block;
+  width: 100%;
+  min-height: 90vh;
+  resize: vertical;
+  padding: 8px;
+  border: 0;
+  color: var(--color-black);
+  background-color: var(--color-editor-gray-vvlight);
+  &:focus {
+//    background: var(--color-white);
+  }
+}
diff --git a/src/components/NFTArticle/NFTArticleEditor.ts b/src/components/NFTArticle/NFTArticleEditor.ts
deleted file mode 100644
index f0e3804ab..000000000
--- a/src/components/NFTArticle/NFTArticleEditor.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SlateEditor as NftArticleEditor } from "./SlateEditor/index"
-
-export default NftArticleEditor
diff --git a/src/components/NFTArticle/NFTArticleEditor.tsx b/src/components/NFTArticle/NFTArticleEditor.tsx
new file mode 100644
index 000000000..e89402c45
--- /dev/null
+++ b/src/components/NFTArticle/NFTArticleEditor.tsx
@@ -0,0 +1,239 @@
+import style from "./NFTArticleEditor.module.scss"
+import styleArticle from "./NFTArticle.module.scss"
+import stylePageArticle from "../../containers/Article/PageArticle.module.scss"
+import { SlateEditor } from "./SlateEditor/index"
+import { Descendant } from "slate"
+import { IEditorMediaFile } from "../../types/ArticleEditor/Image"
+import { FxEditor } from "../../types/ArticleEditor/Editor"
+import useInit from "../../hooks/useInit"
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { LoaderBlock } from "../Layout/LoaderBlock"
+import { Debounce, debounce } from "../../utils/debounce"
+import { NftArticle } from "./NFTArticle"
+import cs from "classnames"
+import { getMarkdownMedias } from "./SlateEditor/Plugins/SlateMediaPlugin"
+import { MarkdownEditor } from "./MarkdownEditor/MarkdownEditor"
+
+const editorDefaultValue = [
+  {
+    type: "paragraph",
+    children: [
+      {
+        text: "",
+      },
+    ],
+  },
+]
+
+type View = "wysiwyg" | "markdown" | "markdownWithPreview"
+
+const views: Record<View, string> = {
+  wysiwyg: "WYSIWYG",
+  markdown: "Markdown",
+  markdownWithPreview: "Markdown + Preview",
+}
+
+export interface RefNFTArticleEditor {
+  updateMediaUrl: (target: IEditorMediaFile, uri: string) => void
+}
+
+interface NFTArticleEditorProps {
+  placeholder?: string
+  valueMarkdown: string | null
+  onMediasUpdate: (medias: IEditorMediaFile[]) => void
+  onChange: (md: string) => void
+  onSlateEditorInit?: (editor: FxEditor) => void
+  onMarkdownEditorInit?: (markdown: string) => void
+}
+
+const NftArticleEditor = forwardRef<RefNFTArticleEditor, NFTArticleEditorProps>(
+  (
+    {
+      valueMarkdown,
+      placeholder,
+      onMediasUpdate,
+      onChange,
+      onSlateEditorInit,
+      onMarkdownEditorInit,
+    }: NFTArticleEditorProps,
+    ref
+  ) => {
+    const refTopMarker = useRef<HTMLDivElement>(null)
+    const refSlateEditor = useRef<FxEditor>(null)
+    const [view, setView] = useState<View>("wysiwyg")
+    const [initialValueSlate, setInitialValueSlate] = useState<
+      Descendant[] | null
+    >(null)
+
+    const handleTransformMdToSlate = useCallback(async (mdValue) => {
+      const getSlateEditorStateFromMarkdown = (await import("./processor"))
+        .getSlateEditorStateFromMarkdown
+      const editorFromMd = mdValue
+        ? await getSlateEditorStateFromMarkdown(mdValue)
+        : null
+      setInitialValueSlate(
+        editorFromMd ? editorFromMd.editorState : editorDefaultValue
+      )
+    }, [])
+    const handleChangeSlate = useCallback(
+      async (nodes: Descendant[]) => {
+        const getMarkdownFromSlateEditorState = (await import("./processor"))
+          .getMarkdownFromSlateEditorState
+        const markdown = await getMarkdownFromSlateEditorState(nodes)
+        onChange(markdown || "")
+      },
+      [onChange]
+    )
+    const handleToggleView = useCallback(
+      (view: View) => async () => {
+        if (view === "wysiwyg") {
+          await handleTransformMdToSlate(valueMarkdown)
+        }
+        const rectObj = refTopMarker.current?.getBoundingClientRect()
+        if (rectObj && rectObj.y < 0) {
+          refTopMarker.current?.scrollIntoView()
+        }
+        setView(view)
+      },
+      [handleTransformMdToSlate, valueMarkdown]
+    )
+
+    const handleUpdateMediaUrl = useCallback(
+      (target: IEditorMediaFile, uri: string) => {
+        if (view === "wysiwyg") {
+          refSlateEditor.current?.updateMediaUrl(target, uri)
+        } else if (view === "markdown" || view === "markdownWithPreview") {
+          if (valueMarkdown) {
+            const newMd = valueMarkdown?.replaceAll(target.uri, uri)
+            if (newMd !== valueMarkdown) {
+              onChange(newMd)
+              onMediasUpdate(getMarkdownMedias(newMd))
+            }
+          }
+        }
+      },
+      [onChange, onMediasUpdate, valueMarkdown, view]
+    )
+
+    const handleUpdateMarkdownMedias = useCallback(
+      (ev) => {
+        onMediasUpdate(getMarkdownMedias(ev.target.value))
+      },
+      [onMediasUpdate]
+    )
+    const debouncedUpdateMarkdownMedias = useMemo<
+      Debounce<typeof handleUpdateMarkdownMedias>
+    >(
+      () => debounce(handleUpdateMarkdownMedias, 2000),
+      [handleUpdateMarkdownMedias]
+    )
+
+    const handleChangeMarkdown = useCallback(
+      (ev) => {
+        onChange(ev.target.value)
+        debouncedUpdateMarkdownMedias(ev)
+      },
+      [debouncedUpdateMarkdownMedias, onChange]
+    )
+    const handleBlurMarkdown = useCallback(
+      (ev) => {
+        debouncedUpdateMarkdownMedias.cancel()
+        handleUpdateMarkdownMedias(ev)
+      },
+      [debouncedUpdateMarkdownMedias, handleUpdateMarkdownMedias]
+    )
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        updateMediaUrl: handleUpdateMediaUrl,
+      }),
+      [handleUpdateMediaUrl]
+    )
+    useInit(async () => {
+      await handleTransformMdToSlate(valueMarkdown)
+    })
+    const debouncedChangeBody = useMemo(
+      () => debounce(handleChangeSlate, 800),
+      [handleChangeSlate]
+    )
+    return (
+      <>
+        {initialValueSlate ? (
+          <div>
+            <div ref={refTopMarker} />
+            <div className={style.toolbar}>
+              <div className={style.container_view}>
+                {Object.entries(views).map(([key, label]) => (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={handleToggleView(key as View)}
+                    className={cs({
+                      [style.view_active]: key === view,
+                    })}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {view === "wysiwyg" && (
+              <div className={styleArticle.article_wrapper}>
+                <SlateEditor
+                  ref={refSlateEditor}
+                  placeholder={placeholder}
+                  initialValue={initialValueSlate}
+                  onMediasUpdate={onMediasUpdate}
+                  onChange={debouncedChangeBody}
+                  onInit={onSlateEditorInit}
+                />
+              </div>
+            )}
+            <div
+              className={cs(style.container_markdown, {
+                [style.container_centered]: view === "markdown",
+              })}
+            >
+              {(view === "markdown" || view === "markdownWithPreview") && (
+                <div className={style.container_markdown_child}>
+                  <MarkdownEditor
+                    className={style.textarea_markdown}
+                    placeholder={placeholder}
+                    value={valueMarkdown || ""}
+                    onChange={handleChangeMarkdown}
+                    onBlur={handleBlurMarkdown}
+                    onInit={onMarkdownEditorInit}
+                  />
+                </div>
+              )}
+              {view === "markdownWithPreview" && (
+                <div className={style.container_preview_child}>
+                  <div
+                    className={cs(
+                      style.container_preview,
+                      stylePageArticle.body
+                    )}
+                  >
+                    <NftArticle markdown={valueMarkdown || ""} />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <LoaderBlock size="small" height="20px" />
+        )}
+      </>
+    )
+  }
+)
+NftArticleEditor.displayName = "NftArticleEditor"
+export default NftArticleEditor
diff --git a/src/components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin.ts b/src/components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin.ts
index 950ef7df5..07698eae7 100644
--- a/src/components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin.ts
+++ b/src/components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin.ts
@@ -68,6 +68,32 @@ function getEditorMedias(editor: FxEditor): IEditorMediaFile[] {
   return arrayRemoveDuplicates(medias, (a, b) => a.uri === b.uri)
 }
 
+export function getMarkdownMedias(markdown: string): IEditorMediaFile[] {
+  const medias: IEditorMediaFile[] = []
+  const regexImageMarkdown =
+    /!\[[^\]]*\]\((?<src>.*?)(?=\"|\))(?<optionalpart>\".*\")?\)/g
+  const regexVideoMarkdown = /::video\[[^\]]*\]{.*src=\"(?<src>[^\"]*)\".*}/g
+  const images = markdown.matchAll(regexImageMarkdown)
+  for (const image of images) {
+    if (image?.groups) {
+      medias.push({
+        uri: image.groups["src"],
+        type: "image",
+      })
+    }
+  }
+  const videos = markdown.matchAll(regexVideoMarkdown)
+  for (const video of videos) {
+    if (video?.groups) {
+      medias.push({
+        uri: video.groups["src"],
+        type: "video",
+      })
+    }
+  }
+  return arrayRemoveDuplicates(medias, (a, b) => a.uri === b.uri)
+}
+
 /**
  * Add utility functions to the editor to support the propagation of medias
  * manipulation to the higher order components.
diff --git a/src/components/NFTArticle/SlateEditor/index.tsx b/src/components/NFTArticle/SlateEditor/index.tsx
index a788d467a..2d78777b7 100644
--- a/src/components/NFTArticle/SlateEditor/index.tsx
+++ b/src/components/NFTArticle/SlateEditor/index.tsx
@@ -88,7 +88,7 @@ const renderLeaf = ({ attributes, children, leaf }: RenderLeafProps) => {
   return <span {...attributes}>{children}</span>
 }
 
-interface SlateEditorProps {
+export interface SlateEditorProps {
   initialValue: Descendant[]
   placeholder?: string
   onMediasUpdate: (medias: IEditorMediaFile[]) => void
diff --git a/src/containers/Article/Editor/ArticleEditor.tsx b/src/containers/Article/Editor/ArticleEditor.tsx
index 894481f21..8eb061be5 100644
--- a/src/containers/Article/Editor/ArticleEditor.tsx
+++ b/src/containers/Article/Editor/ArticleEditor.tsx
@@ -1,5 +1,4 @@
 import style from "./ArticleEditor.module.scss"
-import articleStyle from "../../../components/NFTArticle/NFTArticle.module.scss"
 import cs from "classnames"
 import TextareaAutosize from "react-textarea-autosize"
 import React, { useCallback, useContext, useMemo, useRef, useState } from "react"
@@ -19,10 +18,6 @@ import { EditorMedias } from "./EditorMedias"
 import { ImagePolymorphic } from "../../../components/Medias/ImagePolymorphic"
 import { arrayRemoveDuplicates } from "../../../utils/array"
 import { AutosaveArticle } from "./AutosaveArticle";
-import { debounce } from "../../../utils/debounce";
-import { Descendant } from "slate";
-import { LoaderBlock } from "../../../components/Layout/LoaderBlock";
-import useInit from "../../../hooks/useInit";
 import { isUrlLocal } from "../../../utils/files";
 import useConfirmLeavingPage from "../../../hooks/useConfirmLeavingPage";
 import * as Yup from "yup";
@@ -31,17 +26,9 @@ import { UserContext } from "../../UserProvider"
 import { ErrorBlock } from "../../../components/Error/ErrorBlock"
 import { YupSplits } from "../../../utils/yup/splits"
 import { InputText } from "../../../components/Input/InputText";
-import NftArticleEditor from "../../../components/NFTArticle/NFTArticleEditor"
-
-
-const editorDefaultValue = [
-  {
-    type: "paragraph",
-    children: [{
-      text: ""
-    }]
-  }
-]
+import NftArticleEditor, { RefNFTArticleEditor } from "../../../components/NFTArticle/NFTArticleEditor"
+import { getMarkdownMedias } from "../../../components/NFTArticle/SlateEditor/Plugins/SlateMediaPlugin";
+import NFTArticleEditor from "../../../components/NFTArticle/NFTArticleEditor";
 
 const defaultValues: NFTArticleForm = {
   title: "",
@@ -99,7 +86,7 @@ export function ArticleEditor({
 }: ArticleEditorProps) {
   const { user } = useContext(UserContext)
   const [immutableInitialValues] = useState(initialValues)
-  const editorStateRef = useRef<FxEditor>(null)
+  const refNftArticleEditor = useRef<RefNFTArticleEditor>(null)
   const formik = useFormik({
     initialValues: (() => {
       if (editMinted) {
@@ -122,7 +109,6 @@ export function ArticleEditor({
   });
   const { values, errors, touched, setFieldValue, setFieldTouched } = formik
   const [medias, setMedias] = useState<IEditorMediaFile[]>([])
-  const [initialBody, setInitialBody] = useState<Descendant[] | null>(null)
 
   // ref to medias for scrolling to block
   const mediasMarkerRef = useRef<HTMLDivElement>(null)
@@ -135,16 +121,16 @@ export function ArticleEditor({
     }
   }, [])
 
-  const handleChangeBody = useCallback(async (nodes: Descendant[]) => {
-    const getMarkdownFromSlateEditorState = (await import('../../../components/NFTArticle/processor')).getMarkdownFromSlateEditorState
-    const markdown = await getMarkdownFromSlateEditorState(nodes);
+  const handleChangeBody = useCallback(async (markdown: string) => {
     setFieldTouched('body');
     await setFieldValue('body', markdown);
   }, [setFieldTouched, setFieldValue])
-  const debouncedChangeBody = useMemo(() => debounce(handleChangeBody, 800), [handleChangeBody])
-  const handleInitEditor = useCallback((editor) => {
+  const handleInitSlateEditor = useCallback((editor) => {
     setMedias(editor.getUploadedMedias() || []);
   }, [])
+  const handleInitMarkdownEditor = useCallback((markdown) => {
+    setMedias(getMarkdownMedias(markdown) || []);
+  }, [])
   const handleChangeTags = useCallback((e) => {
     setFieldValue("tags", tagsFromString(e.target.value))
   }, [setFieldValue])
@@ -182,18 +168,12 @@ export function ArticleEditor({
       setFieldValue("thumbnailUri", uri);
     }
     // update the medias in the editor
-    editorStateRef.current?.updateMediaUrl(
+    refNftArticleEditor.current?.updateMediaUrl(
       target,
       uri
     )
   }, [setFieldValue, thumbnail])
 
-  useInit(async () => {
-    const getSlateEditorStateFromMarkdown = (await import('../../../components/NFTArticle/processor')).getSlateEditorStateFromMarkdown
-    const editorFromMd = values.body ? await getSlateEditorStateFromMarkdown(values.body) : null;
-    setInitialBody(editorFromMd ? editorFromMd.editorState : editorDefaultValue);
-  })
-
   const tagsAsString = useMemo(() => (values.tags || []).join(','), [values.tags])
 
   const hasLocalMedias = useMemo(() => mediasWithThumbnail.some(media => isUrlLocal(media.uri)), [mediasWithThumbnail]);
@@ -331,18 +311,16 @@ export function ArticleEditor({
             BODY
           </span>
         </div>
-        <div className={cs(articleStyle.article_wrapper)}>
-          {initialBody ?
-            <NftArticleEditor
-              ref={editorStateRef}
-              initialValue={initialBody}
-              placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut magna eu sapien placerat auctor. Phasellus vel erat a mi cursus posuere nec et diam. Maecenas quis nisl ligula. Sed velit sapien, accumsan eget cursus sit amet, egestas sit amet odio. Cras vitae urna sodales, suscipit ipsum a, aliquam ex. Pellentesque ut placerat arcu, a fringilla ante. Sed varius sem mi, sed interdum nunc consectetur ut. Nulla consectetur diam purus, quis volutpat nunc ultrices eget. Nam vel consectetur lacus, vel auctor dolor."
-              onMediasUpdate={setMedias}
-              onChange={debouncedChangeBody}
-              onInit={handleInitEditor}
-            />
-            : <LoaderBlock size="small" height="20px" />
-          }
+        <div>
+          <NftArticleEditor
+            ref={refNftArticleEditor}
+            valueMarkdown={values.body}
+            placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut magna eu sapien placerat auctor. Phasellus vel erat a mi cursus posuere nec et diam. Maecenas quis nisl ligula. Sed velit sapien, accumsan eget cursus sit amet, egestas sit amet odio. Cras vitae urna sodales, suscipit ipsum a, aliquam ex. Pellentesque ut placerat arcu, a fringilla ante. Sed varius sem mi, sed interdum nunc consectetur ut. Nulla consectetur diam purus, quis volutpat nunc ultrices eget. Nam vel consectetur lacus, vel auctor dolor."
+            onMediasUpdate={setMedias}
+            onChange={handleChangeBody}
+            onSlateEditorInit={handleInitSlateEditor}
+            onMarkdownEditorInit={handleInitMarkdownEditor}
+          />
         </div>
       </Field>
 
diff --git a/src/containers/Article/Editor/AutosaveArticle.tsx b/src/containers/Article/Editor/AutosaveArticle.tsx
index f69e4aef6..b242d2df8 100644
--- a/src/containers/Article/Editor/AutosaveArticle.tsx
+++ b/src/containers/Article/Editor/AutosaveArticle.tsx
@@ -1,19 +1,26 @@
-import React, { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-// import { detectIncognito } from "detect-incognito";
-import style from "./AutosaveArticle.module.scss";
+import React, {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { detectIncognito } from "detectincognitojs"
+import style from "./AutosaveArticle.module.scss"
 import effects from "../../../styles/Effects.module.scss"
 import text from "../../../styles/Colors.module.css"
-import { LoaderBlock } from "../../../components/Layout/LoaderBlock";
-import cs from "classnames";
-import { ArticlesContext, loadLocalArticle } from "../../../context/Articles";
-import { debounce } from "../../../utils/debounce";
-import { NFTArticleForm } from "../../../types/ArticleEditor/Editor";
-import { hasLocalStorage } from "../../../utils/window";
+import { LoaderBlock } from "../../../components/Layout/LoaderBlock"
+import cs from "classnames"
+import { ArticlesContext, loadLocalArticle } from "../../../context/Articles"
+import { debounce } from "../../../utils/debounce"
+import { NFTArticleForm } from "../../../types/ArticleEditor/Editor"
+import { hasLocalStorage } from "../../../utils/window"
 
-type SaveStatus = 'unsaved' | 'saving' | 'saved' | 'failed'
-type SaveAbility = 'init' | 'privateNavigation' | 'noLocalStorage' | 'working'
+type SaveStatus = "unsaved" | "saving" | "saved" | "failed"
+type SaveAbility = "init" | "privateNavigation" | "noLocalStorage" | "working"
 interface AutosaveArticleProps {
-  id: string,
+  id: string
   formValues: NFTArticleForm
   hasUnsavedMedias?: boolean
   onMediasUnsavedClick: () => void
@@ -26,64 +33,68 @@ const _AutosaveArticle = ({
   onMediasUnsavedClick,
   isMinted,
 }: AutosaveArticleProps) => {
-  const { state, dispatch } = useContext(ArticlesContext);
-  const [status, setStatus] = useState<SaveStatus>('saved');
-  const [saveAbility, setSaveAbility] = useState<SaveAbility>('init');
+  const { state, dispatch } = useContext(ArticlesContext)
+  const [status, setStatus] = useState<SaveStatus>("saved")
+  const [saveAbility, setSaveAbility] = useState<SaveAbility>("init")
 
-  const handleSaveDraft = useCallback((articleFormState: NFTArticleForm) => {
-    setStatus('saving');
-    dispatch({
-      type: 'save',
-      payload: {
-        id,
-        articleForm: articleFormState,
-        minted: isMinted,
-      },
-    })
-    const article = loadLocalArticle(id);
-    if (JSON.stringify(article.form) !== JSON.stringify(articleFormState)) {
-      setStatus('failed')
-    } else {
-      setStatus('saved');
-    }
-  }, [dispatch, id, isMinted])
+  const handleSaveDraft = useCallback(
+    (articleFormState: NFTArticleForm) => {
+      setStatus("saving")
+      dispatch({
+        type: "save",
+        payload: {
+          id,
+          articleForm: articleFormState,
+          minted: isMinted,
+        },
+      })
+      const article = loadLocalArticle(id)
+      if (JSON.stringify(article.form) !== JSON.stringify(articleFormState)) {
+        setStatus("failed")
+      } else {
+        setStatus("saved")
+      }
+    },
+    [dispatch, id, isMinted]
+  )
 
   const debouncedSave = useMemo<typeof handleSaveDraft>(
     () => debounce(handleSaveDraft, 800),
     [handleSaveDraft]
-  );
-  const savedArticle = state.articles[id];
+  )
+  const savedArticle = state.articles[id]
 
   useEffect(() => {
     const canSaveInLocalStorage = async () => {
-      // try {
-      //   const { isPrivate } = await detectIncognito();
-      //   if (isPrivate) {
-      //     return setSaveAbility('privateNavigation');
-      //   }
-      // } catch (e) {
-      //   console.error(e);
-      // }
+      try {
+        const { isPrivate } = await detectIncognito()
+        if (isPrivate) {
+          return setSaveAbility("privateNavigation")
+        }
+      } catch (e) {
+        console.error(e)
+      }
       if (!hasLocalStorage()) {
-        return setSaveAbility('noLocalStorage')
+        return setSaveAbility("noLocalStorage")
       }
-      return setSaveAbility('working');
-    };
+      return setSaveAbility("working")
+    }
     canSaveInLocalStorage()
   }, [])
   useEffect(() => {
-    if (saveAbility !== 'working') return;
-    const serializedSavedArticle = savedArticle && JSON.stringify(savedArticle.form);
-    const serializedUnsavedArticle = formValues && JSON.stringify(formValues);
+    if (saveAbility !== "working") return
+    const serializedSavedArticle =
+      savedArticle && JSON.stringify(savedArticle.form)
+    const serializedUnsavedArticle = formValues && JSON.stringify(formValues)
     if (serializedSavedArticle !== serializedUnsavedArticle) {
-      setStatus('unsaved');
-      debouncedSave(formValues);
+      setStatus("unsaved")
+      debouncedSave(formValues)
     }
   }, [saveAbility, debouncedSave, formValues, savedArticle])
-  if (saveAbility === 'init') return null;
+  if (saveAbility === "init") return null
   return (
-    <div className={cs(style.root, effects['drop-shadow-small'])}>
-      {saveAbility === 'working' ?
+    <div className={cs(style.root, effects["drop-shadow-small"])}>
+      {saveAbility === "working" ? (
         <>
           {hasUnsavedMedias && (
             <button
@@ -91,16 +102,14 @@ const _AutosaveArticle = ({
               className={cs(text.error, style.medias_unsaved)}
               onClick={onMediasUnsavedClick}
             >
-              <i className="fa-solid fa-circle-xmark" aria-hidden/>
+              <i className="fa-solid fa-circle-xmark" aria-hidden />
               <span>medias not uploaded</span>
             </button>
           )}
-          {status === 'failed' && (
+          {status === "failed" && (
             <span className={cs(text.error, style.error)}>
-              <i className="fa-solid fa-circle-xmark" aria-hidden/>
-              <span className={cs(style.text, text.error)}>
-                failed to save
-              </span>
+              <i className="fa-solid fa-circle-xmark" aria-hidden />
+              <span className={cs(style.text, text.error)}>failed to save</span>
             </span>
           )}
           {(status === "saving" || status === "unsaved") && (
@@ -110,33 +119,32 @@ const _AutosaveArticle = ({
                 height="20px"
                 className={cs(style.loader)}
               />
-              <span className={style.text}>
-                saving document
-              </span>
+              <span className={style.text}>saving document</span>
             </>
           )}
-          {status === 'saved' && (
+          {status === "saved" && (
             <>
-              <i className="fa-solid fa-circle-check" aria-hidden/>
-              <span className={style.text}>
-                document saved
-              </span>
+              <i className="fa-solid fa-circle-check" aria-hidden />
+              <span className={style.text}>document saved</span>
             </>
           )}
         </>
-        :
+      ) : (
         <span className={cs(text.error, style.error)}>
-          <i className="fa-solid fa-circle-xmark" aria-hidden/>
-          {saveAbility === 'privateNavigation' &&
+          <i className="fa-solid fa-circle-xmark" aria-hidden />
+          {saveAbility === "privateNavigation" && (
             <span>You can&apos;t use autosave with private navigation</span>
-          }
-          {saveAbility === 'noLocalStorage' &&
-            <span>You can&apos;t use autosave. Your browser can&apos;t use local storage </span>
-          }
+          )}
+          {saveAbility === "noLocalStorage" && (
+            <span>
+              You can&apos;t use autosave. Your browser can&apos;t use local
+              storage{" "}
+            </span>
+          )}
         </span>
-      }
+      )}
     </div>
-  );
-};
+  )
+}
 
-export const AutosaveArticle = memo(_AutosaveArticle);
+export const AutosaveArticle = memo(_AutosaveArticle)
diff --git a/src/containers/Article/Editor/EditorMedia.tsx b/src/containers/Article/Editor/EditorMedia.tsx
index f5466391a..96efe3667 100644
--- a/src/containers/Article/Editor/EditorMedia.tsx
+++ b/src/containers/Article/Editor/EditorMedia.tsx
@@ -4,11 +4,12 @@ import cs from "classnames"
 import { IEditorMediaFile } from "../../../types/ArticleEditor/Image"
 import { ImagePolymorphic } from "../../../components/Medias/ImagePolymorphic"
 import { Button } from "../../../components/Button"
-import { forwardRef, useCallback, useImperativeHandle, useMemo } from "react"
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from "react"
 import { isUrlLocal } from "../../../utils/files"
 import useFetch, { CachePolicies } from "use-http"
 import { API_FILE__ARTICLE_UPLOAD_FILE } from "../../../services/apis/file-api.service"
 import { VideoPolymorphic } from "../../../components/Medias/VideoPolymorphic";
+import { LoaderBlock } from "../../../components/Layout/LoaderBlock";
 
 const UPLOAD_DEFAULT_ERROR = "Unknown error."
 
@@ -23,6 +24,10 @@ export const EditorMedia = forwardRef<Ref, Props>(({
   media,
   onChangeUri,
 }, ref) => {
+  const [hasMediaLoad, setHasMediaLoad] = useState<-1|boolean>(-1);
+  const handleLoadMediaError = useCallback(() => setHasMediaLoad(false), [])
+  const handleLoadMediaSuccess = useCallback(() => setHasMediaLoad(true), [])
+
   const isLocal = useMemo(
     () => isUrlLocal(media.uri),
     [media.uri]
@@ -65,12 +70,16 @@ export const EditorMedia = forwardRef<Ref, Props>(({
           <ImagePolymorphic
             uri={media.uri}
             className={cs(style.media)}
+            onError={handleLoadMediaError}
+            onLoad={handleLoadMediaSuccess}
           />
         }
         {media.type === "video" &&
           <VideoPolymorphic
             uri={media.uri}
             className={cs(style.media)}
+            onError={handleLoadMediaError}
+            onLoadedData={handleLoadMediaSuccess}
           />
         }
       </div>
@@ -91,22 +100,36 @@ export const EditorMedia = forwardRef<Ref, Props>(({
           </strong>
         )}
       </span>
-      {!isLocal ? (
-        <i
-          className={cs("fa-solid fa-circle-check", text.success, text.h4)}
-          aria-hidden
-        />
-      ):(
-        <Button
-          type="button"
-          color="secondary"
-          size="very-small"
-          onClick={uploadFile}
-          state={loading ? "loading" : "default"}
-        >
-          upload
-        </Button>
-      )}
+      {hasMediaLoad !== -1 ?
+        <>
+          {hasMediaLoad ?
+            <>
+              {!isLocal ? (
+                <i
+                  className={cs("fa-solid fa-circle-check", text.success, text.h4)}
+                  aria-hidden
+                />
+              ) : (
+                <Button
+                  type="button"
+                  color="secondary"
+                  size="very-small"
+                  onClick={uploadFile}
+                  state={loading ? "loading" : "default"}
+                >
+                  upload
+                </Button>
+              )}
+            </>
+            :
+            <i
+              className={cs("fa-solid fa-circle-xmark", text.error, text.h4)}
+              aria-hidden
+            />
+          }
+        </>
+        : (<span className={style.loader}><LoaderBlock size="tiny" /></span>)
+      }
     </div>
   )
 })
diff --git a/src/containers/Article/Editor/EditorMedias.module.scss b/src/containers/Article/Editor/EditorMedias.module.scss
index fd4566f28..3526721e3 100644
--- a/src/containers/Article/Editor/EditorMedias.module.scss
+++ b/src/containers/Article/Editor/EditorMedias.module.scss
@@ -45,3 +45,7 @@
     flex-grow: 2;
   }
 }
+
+.loader {
+  width: 25px;
+}
diff --git a/src/containers/Article/PageArticle.tsx b/src/containers/Article/PageArticle.tsx
index c1ce3dbd7..daeff75e3 100644
--- a/src/containers/Article/PageArticle.tsx
+++ b/src/containers/Article/PageArticle.tsx
@@ -158,9 +158,7 @@ const _PageArticle = ({ article, originUrl, isPreview }: PageArticleProps) => {
           name="twitter:image"
           content={ipfsGatewayUrl(article.thumbnailUri)}
         />
-
-        <link href="/highlight/prism-dracula.css" rel="stylesheet" />
-        <link rel="stylesheet" href="/highlight/dracula.css" />
+        <link href="/highlight/prism-dracula.css" rel="stylesheet"/>
       </Head>
 
       <ArticleFlagBanner article={article} />
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 4232c193e..09f68e535 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -32,6 +32,10 @@ body {
   --color-border-input: #000000;
   --color-donator: #3496eb;
 
+  --color-editor-black: #000000;
+  --color-editor-gray-vvlight: #e7e7e7;
+  --color-editor-gray: #727272;
+
   --layout-margin-big-lg: 80px;
   --layout-margin-small-lg: 30px;
   --layout-margin-big-md: 50px;
@@ -77,6 +81,10 @@ body {
   --color-secondary-light: #7b9811;
   --color-border: #0f0f0f;
   --color-border-input: #7e7e7e;
+
+  --color-editor-black: #999999;
+  --color-editor-gray-vvlight: #505050;
+  --color-editor-gray: #FFFFFF;
 }
 
 ::-webkit-scrollbar {
@@ -190,4 +198,4 @@ button {
   input {
     color: white;
   }
-}
\ No newline at end of file
+}
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
index 86c424dda..77a708bee 100644
--- a/src/utils/debounce.ts
+++ b/src/utils/debounce.ts
@@ -1,6 +1,10 @@
+export type Debounce<T extends {}> = T & {
+  cancel: () => void
+}
+
 export const debounce = (func: any, wait: number, immediate?: boolean) => {
   let timeout: NodeJS.Timeout | null;
-  return function debounceFunc(this: any) {
+  const fn = function debounceFunc(this: any) {
     const context = this;
     const args = arguments;
     clearTimeout(timeout!);
@@ -10,4 +14,12 @@ export const debounce = (func: any, wait: number, immediate?: boolean) => {
     }, wait);
     if (immediate && !timeout) func.apply(context, args);
   };
+  return Object.assign(fn, {
+    cancel() {
+      if (timeout) {
+        clearTimeout(timeout)
+        timeout = null;
+      }
+    }
+  })
 };
diff --git a/yarn.lock b/yarn.lock
index 6e51a65f7..fc0495e3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1535,10 +1535,10 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-detect-incognito@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/detect-incognito/-/detect-incognito-1.0.0.tgz#24f8f1957ddc246ef7f602653a2d015c55a84657"
-  integrity sha512-o/58BwX8VdQJFICJlgwLchBw/0js1tWDYe/ygOZhyuMw5pviIkOseH+IYPeR8iceU36KPJyDDm93iRhnH9mIEg==
+detectincognitojs@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/detectincognitojs/-/detectincognitojs-1.1.2.tgz#d01d305da1a284bc1064ec3c169a3b535889e64b"
+  integrity sha512-7b+0/zJ76ZTeEtNl9MCPEKgFauEw/LerdlwnEnnrgYCFhp5FL+RJGD13EF/R9FYqrVxL7H5fgCyBdzJ6BtkPhg==
 
 diff@^5.0.0:
   version "5.0.0"