diff --git a/assets/js/src/common/preview.jsx b/assets/js/src/common/preview.jsx
new file mode 100644
index 0000000000..0096145975
--- /dev/null
+++ b/assets/js/src/common/preview.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+function Preview({
+  children,
+}) {
+  return (
+    <>
+      {children}
+    </>
+  );
+}
+
+Preview.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Preview;
diff --git a/assets/js/src/form_editor/components/preview.jsx b/assets/js/src/form_editor/components/preview.jsx
new file mode 100644
index 0000000000..217b5794c0
--- /dev/null
+++ b/assets/js/src/form_editor/components/preview.jsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Spinner } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+import Preview from '../../common/preview.jsx';
+
+const FormPreview = () => {
+  const [form, setForm] = useState(null);
+
+  const { hidePreview } = useDispatch('mailpoet-form-editor');
+  const isPreview = useSelect(
+    (select) => select('mailpoet-form-editor').getIsPreviewShown(),
+    []
+  );
+
+  function loadFormPreviewFromServer() {
+
+  }
+
+  useEffect(() => {
+    if (isPreview) {
+      loadFormPreviewFromServer();
+    }
+  }, [isPreview]);
+
+  if (!isPreview) return null;
+
+  return (
+    <Modal
+      isDismissible
+      shouldCloseOnEsc
+      shouldCloseOnClickOutside
+      title="Form Preview"
+      onRequestClose={hidePreview}
+    >
+      <Preview>
+        {form === null && (
+          <Spinner />
+        )}
+        {form !== null && (
+          <div dangerouslySetInnerHTML={form} />
+        )}
+      </Preview>
+    </Modal>
+  );
+};
+
+export default FormPreview;