diff --git a/package.json b/package.json
index 90c7fb0..b5d8793 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-dom": "^17.0.2",
     "react-hotkeys-hook": "^3.3.2",
     "react-inlinesvg": "^2.3.0",
+    "react-keyboard-event-handler": "^1.5.4",
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
@@ -38,13 +39,20 @@
     "@babel/preset-react": "^7.9.4",
     "all-contributors-cli": "^6.14.2",
     "auto": "^9.35.1",
+    "autoprefixer": "^10.4.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
+    "css-loader": "^5.2.4",
     "extract-text-webpack-plugin": "^3.0.2",
+    "postcss": "^8.4.5",
+    "postcss-loader": "^4.0.0",
+    "postcss-preset-env": "^6.7.0",
     "react-art": "^17.0.2",
+    "style-loader": "^2.0.0",
+    "tailwindcss": "^3.0.15",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
     "webpack-node-externals": "^1.7.2"
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..91c366d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+const autoprefixer = require("autoprefixer");
+const tailwindcss = require("tailwindcss");
+
+module.exports = {
+  plugins: ["postcss-preset-env", autoprefixer, tailwindcss],
+};
diff --git a/src/ChunkCollection.jsx b/src/ChunkCollection.jsx
index 0c645ed..4c5a867 100644
--- a/src/ChunkCollection.jsx
+++ b/src/ChunkCollection.jsx
@@ -1,4 +1,4 @@
-// @ts-check
+// @ts-nocheck
 import React, { useEffect, useState, useContext } from "react";
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
 import { EditmodeContext } from "./EditmodeContext";
@@ -105,7 +105,7 @@ export function ChunkCollection({
             {typeof children === "function"
               ? children(getChunk, chunk, index)
               : children}
-          </div>  
+          </div>
         </ChunkCollectionContext.Provider>
       ))}
       {chunks.length && (
@@ -114,9 +114,7 @@ export function ChunkCollection({
           value={placeholderChunk}
         >
           <Template
-            className={computeClassName(
-              "chunks-col-placeholder-wrapper"
-            )}
+            className={computeClassName("chunks-col-placeholder-wrapper")}
           >
             {typeof children === "function"
               ? children(getChunk, placeholderChunk, 0)
@@ -129,12 +127,9 @@ export function ChunkCollection({
 }
 
 function Template({ children, ...attrs }) {
-  console.log
+  console.log;
   return (
-    <em-template
-      {...attrs}
-      style={{display: "none"}}
-    >
+    <em-template {...attrs} style={{ display: "none" }}>
       {children}
     </em-template>
   );
diff --git a/src/Editmode.jsx b/src/Editmode.jsx
index b06ed34..9aa89fa 100644
--- a/src/Editmode.jsx
+++ b/src/Editmode.jsx
@@ -5,6 +5,9 @@ import { getTimedCachedData, storeTimedCache } from "./utilities";
 import { api } from "./utilities";
 import Watermark from "./Watermark.jsx";
 import { useHotkeys } from "react-hotkeys-hook";
+import KeyboardEventHandler from "react-keyboard-event-handler";
+import { CONTAINER_CLASS } from "./onboarding/utils/CONSTANTS";
+import { renderOnboarder } from "./onboarding/index.jsx";
 
 export function Editmode({
   children,
@@ -16,6 +19,7 @@ export function Editmode({
   const [branch, setbranch] = useState("");
   const [hasWaterMark, setHasWaterMark] = useState(null);
   const [isEditorActive, setIsEditorActive] = useState(false);
+  const [isOnboardingActive, setIsOnboardingActive] = useState(false);
   const isBrowser = () => typeof window !== "undefined";
   if (isBrowser()) {
     window["chunksPresetBranchId"] = branchId;
@@ -23,8 +27,9 @@ export function Editmode({
   useHotkeys("cmd+shift+e", () => {
     setIsEditorActive(!isEditorActive);
   });
+
   if (!projectId) {
-    throw new Error("<Editmode projectId={...}> is missing a valid projectId");
+    throw new Error("<Editmode projectId={...}> is missing a valid projectId.");
   }
   const cacheId = projectId + "_provider";
   useEffect(() => {
@@ -45,13 +50,13 @@ export function Editmode({
 
     script.src =
       "https://unpkg.com/editmode-magic-editor@~1/dist/magic-editor.js";
-    
+
     if (!window["magicEditorInjected"]) {
       script.setAttribute("async", "");
       document.body.append(script);
-      window["magicEditorInjected"] = true
+      window["magicEditorInjected"] = true;
     }
-    
+
     if (!cachedItem) {
       api
         .get(`/projects/${projectId}`)
@@ -75,10 +80,27 @@ export function Editmode({
     <EditmodeContext.Provider
       value={{ branch, projectId, defaultChunks, next }}
     >
+      {isBrowser() && (
+        <KeyboardEventHandler
+          handleKeys={["cmd+shift+l"]}
+          onKeyEvent={() => {
+            if (!isOnboardingActive) {
+              renderOnboarder(setIsOnboardingActive);
+              setIsOnboardingActive(
+                (isOnboardingActive) => !isOnboardingActive
+              );
+            } else {
+              let containerDiv = document.querySelector(`.${CONTAINER_CLASS}`);
+              containerDiv.remove();
+              setIsOnboardingActive(
+                (isOnboardingActive) => !isOnboardingActive
+              );
+            }
+          }}
+        />
+      )}
       {children}
       {hasWaterMark && <Watermark projectId={projectId} />}
     </EditmodeContext.Provider>
   );
 }
-
-export default Editmode;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..863a694
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,1049 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.full-screen {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.react-onboarding-pro-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.react-onboarding-pro-blur-background {
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  transition: 200ms ease-in-out all;
+}
+.rop-step {
+  width: calc(100% - 20px);
+  max-width: 800px;
+  margin: 20px;
+  min-height: 300px;
+  border-radius: 10px;
+  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
+  padding: 20px 20px 55px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  background-color: white;
+}
+.rop-title {
+  font-weight: bold;
+  font-size: 1.2rem;
+  text-align: center;
+  line-height: 2.5rem;
+}
+.rop-description {
+  text-align: center;
+}
+.rop-button-container {
+  text-align: right;
+  width: calc(100% - 40px);
+  position: absolute;
+  bottom: 20px;
+}
+.rop-button {
+  padding: 8px 24px;
+  font-size: 14px;
+  border-radius: 5px;
+  /* background-color: #363636; */
+  background-color: #3f51b5;
+  color: white;
+  border: none;
+  cursor: pointer;
+  letter-spacing: 1px;
+}
+.rop-button:hover,
+.rop-button:focus {
+  background-color: black;
+  /* background-color: #3f51b5; */
+  outline: none;
+}
+.rop-button[disabled] {
+  background-color: #969696;
+}
+.rop-form {
+  width: 100%;
+  max-width: 600px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.rop-input-container {
+  display: flex;
+  flex-direction: column;
+  margin: 5px;
+}
+.rop-input-label {
+  margin: 0 0 2px 2px;
+  font-size: 14px;
+  color: #363636;
+}
+.rop-form .rop-input {
+  line-height: 1.5rem;
+  font-size: 16px;
+  padding: 2px 5px;
+  letter-spacing: 1px;
+  border-radius: 5px;
+  border: 2px solid #eee;
+}
+.rop-form .rop-input:focus {
+  border-color: #ddd;
+  outline: none;
+}
+
+@media only screen and (max-width: 600px) {
+  .react-onboarding-pro-container {
+    align-items: flex-end;
+  }
+}
+
+/* 
+@tailwind base;
+@tailwind components;
+@tailwind utilities; */
+
+.skew {
+  display: none;
+}
+
+/*! CSS Used from: https://lagos-notchera.vercel.app/_next/static/css/46484030ac62542ad372.css */
+/* body {
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+} */
+button,
+input {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+button {
+  text-transform: none;
+}
+button {
+  -webkit-appearance: button;
+}
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+h2,
+h3,
+h4,
+p {
+  margin: 0;
+}
+button {
+  background-color: transparent;
+  background-image: none;
+}
+ul {
+  margin: 0;
+  padding: 0;
+}
+ul {
+  list-style: none;
+}
+body {
+  font-family: inherit;
+  line-height: inherit;
+}
+*,
+:after,
+:before {
+  box-sizing: border-box;
+  border: 0 solid;
+}
+img {
+  border-style: solid;
+}
+input::-moz-placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+input:-ms-input-placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+input::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+button {
+  cursor: pointer;
+}
+h2,
+h3,
+h4 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+button,
+input {
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+img,
+svg {
+  display: block;
+  vertical-align: middle;
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+*,
+:after,
+:before {
+  --tw-border-opacity: 1;
+  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+}
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+.fixed {
+  position: fixed;
+}
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.inset-0 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.inset-x-0 {
+  left: 0;
+  right: 0;
+}
+.top-0 {
+  top: 0;
+}
+.top-1\/2 {
+  top: 50%;
+}
+.bottom-0 {
+  bottom: 0;
+}
+.left-0 {
+  left: 0;
+}
+.left-1\/2 {
+  left: 50%;
+}
+.z-50 {
+  z-index: 50;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+.-mx-3 {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+}
+.-mx-4 {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.mt-3 {
+  margin-top: 0.75rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-16 {
+  margin-top: 4rem;
+}
+.mr-2 {
+  margin-right: 0.5rem;
+}
+.mr-4 {
+  margin-right: 1rem;
+}
+.mr-6 {
+  margin-right: 1.5rem;
+}
+.mr-auto {
+  margin-right: auto;
+}
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+.mb-8 {
+  margin-bottom: 2rem;
+}
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+.mb-12 {
+  margin-bottom: 3rem;
+}
+.mb-16 {
+  margin-bottom: 4rem;
+}
+.block {
+  display: block;
+}
+.inline-block {
+  display: inline-block;
+}
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.hidden {
+  display: none;
+}
+.h-4 {
+  height: 1rem;
+}
+.h-6 {
+  height: 1.5rem;
+}
+.h-8 {
+  height: 2rem;
+}
+.h-16 {
+  height: 4rem;
+}
+.w-4 {
+  width: 1rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+.w-6 {
+  width: 1.5rem;
+}
+.w-8 {
+  width: 2rem;
+}
+.w-12 {
+  width: 3rem;
+}
+.w-16 {
+  width: 4rem;
+}
+.w-5\/6 {
+  width: 83.333333%;
+}
+.w-full {
+  width: 100%;
+}
+.max-w-sm {
+  max-width: 24rem;
+}
+.max-w-md {
+  max-width: 28rem;
+}
+.max-w-lg {
+  max-width: 32rem;
+}
+.max-w-xl {
+  max-width: 36rem;
+}
+.max-w-2xl {
+  max-width: 42rem;
+}
+.max-w-3xl {
+  max-width: 48rem;
+}
+.flex-none {
+  flex: none;
+}
+.flex-grow {
+  flex-grow: 1;
+}
+.transform {
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.transform {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+}
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+}
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.overflow-y-auto {
+  overflow-y: auto;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+.rounded-t-xl {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}
+.rounded-l-xl {
+  border-top-left-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+.border-t {
+  border-top-width: 1px;
+}
+.border-r {
+  border-right-width: 1px;
+}
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+.border-b {
+  border-bottom-width: 1px;
+}
+.border-transparent {
+  border-color: transparent;
+}
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgba(243, 244, 246, var(--tw-border-opacity));
+}
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
+}
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+}
+.fill-current {
+  fill: currentColor;
+}
+.p-3 {
+  padding: 0.75rem;
+}
+.p-4 {
+  padding: 1rem;
+}
+.p-5 {
+  padding: 1.25rem;
+}
+.p-6 {
+  padding: 1.5rem;
+}
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+.pt-8 {
+  padding-top: 2rem;
+}
+.pt-12 {
+  padding-top: 3rem;
+}
+.pr-4 {
+  padding-right: 1rem;
+}
+.pb-16 {
+  padding-bottom: 4rem;
+}
+.pb-32 {
+  padding-bottom: 8rem;
+}
+.pb-56 {
+  padding-bottom: 14rem;
+}
+.text-left {
+  text-align: left;
+}
+.text-center {
+  text-align: center;
+}
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+}
+.text-lg,
+.text-xl {
+  line-height: 1.75rem;
+}
+.text-xl {
+  font-size: 1.25rem;
+}
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+.font-normal {
+  font-weight: 400;
+}
+.font-semibold {
+  font-weight: 600;
+}
+.font-bold {
+  font-weight: 700;
+}
+.leading-none {
+  line-height: 1;
+}
+.leading-tight {
+  line-height: 1.25;
+}
+.leading-loose {
+  line-height: 2;
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+.text-gray-50 {
+  --tw-text-opacity: 1;
+  color: rgba(249, 250, 251, var(--tw-text-opacity));
+}
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgba(156, 163, 175, var(--tw-text-opacity));
+}
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
+}
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
+}
+.hover\:text-gray-500:hover {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgba(75, 85, 99, var(--tw-text-opacity));
+}
+.opacity-25 {
+  opacity: 0.25;
+}
+.bg-blend-screen {
+  background-blend-mode: screen;
+}
+*,
+:after,
+:before {
+  --tw-shadow: 0 0 transparent;
+}
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+.shadow,
+.shadow-sm {
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent),
+    var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
+}
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+*,
+:after,
+:before {
+  --tw-ring-inset: var(--tw-empty);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 transparent;
+  --tw-ring-shadow: 0 0 transparent;
+}
+.transition {
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 0.15s;
+}
+.duration-150 {
+  transition-duration: 0.15s;
+}
+.duration-200 {
+  transition-duration: 0.2s;
+}
+:after,
+:before {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+}
+.skew {
+  display: none;
+}
+@media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+  .sm\:pb-80 {
+    padding-bottom: 20rem;
+  }
+}
+@media (min-width: 768px) {
+  .md\:mb-0 {
+    margin-bottom: 0;
+  }
+  .md\:mb-20 {
+    margin-bottom: 5rem;
+  }
+  .md\:block {
+    display: block;
+  }
+  .md\:h-12 {
+    height: 3rem;
+  }
+  .md\:w-12 {
+    width: 3rem;
+  }
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+  .md\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+  .md\:p-5 {
+    padding: 1.25rem;
+  }
+  .md\:pt-16 {
+    padding-top: 4rem;
+  }
+  .md\:pb-64 {
+    padding-bottom: 16rem;
+  }
+}
+@media (min-width: 1024px) {
+  .lg\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .lg\:-mx-4 {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .lg\:mr-3 {
+    margin-right: 0.75rem;
+  }
+  .lg\:mr-8 {
+    margin-right: 2rem;
+  }
+  .lg\:mb-0 {
+    margin-bottom: 0;
+  }
+  .lg\:ml-0 {
+    margin-left: 0;
+  }
+  .lg\:inline-block {
+    display: inline-block;
+  }
+  .lg\:flex {
+    display: flex;
+  }
+  .lg\:hidden {
+    display: none;
+  }
+  .lg\:h-20 {
+    height: 5rem;
+  }
+  .lg\:w-auto {
+    width: auto;
+  }
+  .lg\:w-1\/2 {
+    width: 50%;
+  }
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+  .lg\:w-2\/3 {
+    width: 66.666667%;
+  }
+  .lg\:w-2\/5 {
+    width: 40%;
+  }
+  .lg\:max-w-sm {
+    max-width: 24rem;
+  }
+  .lg\:items-center {
+    align-items: center;
+  }
+  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+  .lg\:pl-16 {
+    padding-left: 4rem;
+  }
+  .lg\:text-left {
+    text-align: left;
+  }
+  .lg\:text-center {
+    text-align: center;
+  }
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  .lg\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+}
+/*! CSS Used from: Embedded */
+.text-primary {
+  color: rgb(30, 129, 241);
+}
+.bg-primary {
+  background-color: rgb(30, 129, 241);
+}
+.bg-primary-100 {
+  background-color: rgba(30, 129, 241, 0.063);
+}
+.border-primary {
+  border-color: rgb(30, 129, 241);
+}
+/*! CSS Used from: Embedded */
+.font-bold {
+  font-weight: bold;
+}
+body {
+  --text-opacity: 1;
+}
+em-span {
+  display: inline-block;
+}
+/*! CSS Used from: Embedded */
+.font-bold {
+  font-weight: bold;
+}
+body {
+  --text-opacity: 1;
+}
+em-span {
+  display: inline-block;
+}
+
+/* onboarding */
+.full-screen {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.react-onboarding-pro-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.react-onboarding-pro-blur-background {
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  transition: 200ms ease-in-out all;
+}
+.rop-step {
+  width: calc(100% - 20px);
+  max-width: 800px;
+  margin: 20px;
+  min-height: 300px;
+  border-radius: 10px;
+  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
+  padding: 20px 20px 55px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  background-color: white;
+}
+.rop-title {
+  font-weight: bold;
+  font-size: 1.2rem;
+  text-align: center;
+  line-height: 2.5rem;
+}
+.rop-description {
+  text-align: center;
+}
+.rop-button-container {
+  text-align: right;
+  width: calc(100% - 40px);
+  position: absolute;
+  bottom: 20px;
+  justify-content: space-between;
+}
+.rop-button {
+  padding: 8px 24px;
+  font-size: 14px;
+  border-radius: 5px;
+  /* background-color: #363636; */
+  background-color: #3f51b5;
+  color: white;
+  border: none;
+  cursor: pointer;
+  letter-spacing: 1px;
+}
+
+.rop-button-2 {
+  padding: 8px 24px;
+  font-size: 14px;
+  border-radius: 5px;
+  /* background-color: #363636; */
+  /* background-color: white;
+  color: #3f51b5; */
+  cursor: pointer;
+  letter-spacing: 1px;
+}
+
+.rop-button:hover,
+.rop-button:focus {
+  background-color: black;
+  background-color: #233492;
+  outline: none;
+}
+.rop-button[disabled] {
+  background-color: #969696;
+}
+.rop-form {
+  width: 100%;
+  max-width: 600px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.rop-input-container {
+  display: flex;
+  flex-direction: column;
+  margin: 5px;
+}
+.rop-input-label {
+  margin: 0 0 2px 2px;
+  font-size: 14px;
+  color: #363636;
+}
+.rop-form .rop-input {
+  line-height: 1.5rem;
+  font-size: 16px;
+  padding: 2px 5px;
+  letter-spacing: 1px;
+  border-radius: 5px;
+  border: 2px solid #eee;
+}
+.rop-form .rop-input:focus {
+  border-color: #ddd;
+  outline: none;
+}
+
+@media only screen and (max-width: 600px) {
+  .react-onboarding-pro-container {
+    align-items: flex-end;
+  }
+}
diff --git a/src/index.js b/src/index.js
index 642353e..f5be9a0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,4 @@
 // @ts-check
-
 export { Editmode } from "./Editmode.jsx";
 export { Chunk } from "./Chunk.jsx";
 export { ChunkCollection } from "./ChunkCollection.jsx";
diff --git a/src/onboarding/components/OnboardingStep.jsx b/src/onboarding/components/OnboardingStep.jsx
new file mode 100644
index 0000000..5444894
--- /dev/null
+++ b/src/onboarding/components/OnboardingStep.jsx
@@ -0,0 +1,179 @@
+import React, { useState } from "react";
+import { removeContainerElement } from "../utils/removeContainer";
+
+const cn = (...args) => args.filter(Boolean).join(" ");
+
+export const OnboardingStep = ({
+  step,
+  isActive,
+  displayNext,
+  goToNextStep,
+  displayFinish,
+  goToPreviousStep,
+  displayPrevious,
+  setIsOnboardingActive,
+}) => {
+  // const router = useRouter();
+  const validateFields = () => {
+    return !step.fields.reduce((valid, field) => {
+      if (!field.validation) {
+        return valid & true;
+      }
+      return valid & RegExp(field.validation, "gm").test(field.value);
+    }, true);
+  };
+
+  let defaultButtonState = false,
+    onSubmitCallback = () => {
+      // This function will be replaced by a custom function
+    };
+  if (step.type === "form") {
+    defaultButtonState = step.fields.length === 0 ? false : validateFields();
+  } else if (step.type === "component") {
+    defaultButtonState = true;
+  }
+
+  const [form, setForm] = useState(
+    Object.assign(
+      {},
+      {
+        invalid: defaultButtonState,
+      },
+      ...step.fields.map((field) => ({ [field.name]: field.value || "" }))
+    )
+  );
+
+  if (!isActive) return null;
+
+  const finishSteps = () => {
+    setIsOnboardingActive(false);
+    removeContainerElement();
+  };
+
+  let buttonText, buttonFunction;
+  if (displayFinish) {
+    buttonText = "Finish";
+    buttonFunction = finishSteps;
+  } else if (displayNext) {
+    buttonText = "Next";
+    buttonFunction = goToNextStep;
+  }
+  if (step.type === "form" && step.onSubmit) {
+    const defaultButtonFunction = buttonFunction;
+    buttonFunction = () => {
+      if (form.invalid) {
+        return;
+      }
+      const { invalid, ...formData } = form;
+      step.onSubmit(formData);
+      defaultButtonFunction();
+    };
+  } else if (step.type === "component") {
+    const defaultButtonFunction = buttonFunction;
+    buttonFunction = () => {
+      if (onSubmitCallback) {
+        onSubmitCallback();
+      }
+      defaultButtonFunction();
+    };
+  }
+
+  const validateForm = (name, value) => {
+    const validation = step.fields.reduce((data, field) => {
+      if (!field.validation) {
+        return data & true;
+      }
+      if (field.name === name) {
+        return data & RegExp(field.validation, "gm").test(value);
+      }
+      return data & RegExp(field.validation, "gm").test(form[field.name]);
+    }, true);
+    // Valid
+    return !validation;
+  };
+
+  let updateForm;
+  if (step.type === "form") {
+    updateForm = (event) => {
+      const { name, value } = event.target;
+      setForm({
+        ...form,
+        [name]: value,
+        invalid: validateForm(name, value),
+      });
+    };
+  }
+
+  const setButtonState = (state) => {
+    setForm({
+      ...form,
+      invalid: state,
+    });
+  };
+
+  let CustomComponent = null;
+  if (step.type === "component" && step.component) {
+    CustomComponent = step.component;
+  }
+
+  const setOnSubmit = (onSubmit) => {
+    onSubmitCallback = onSubmit;
+  };
+
+  return (
+    <div className="rop-step">
+      {step.title && <div className="rop-title">{step.title}</div>}
+      {step.description && (
+        <div className="rop-description">{step.description}</div>
+      )}
+      {step.type === "form" && (
+        <form className="rop-form">
+          {step.fields.map((field, index) => (
+            <div className="rop-input-container" key={field.name + index}>
+              {field.label && (
+                <label className="rop-input-label" htmlFor={field.name}>
+                  {field.label}
+                </label>
+              )}
+              <input
+                className="rop-input"
+                type={field.type}
+                name={field.name}
+                placeholder={field.placeholder}
+                onChange={updateForm}
+                value={form[field.name]}
+              />
+            </div>
+          ))}
+        </form>
+      )}
+      {CustomComponent && (
+        <CustomComponent
+          disable={form.invalid}
+          setButtonState={setButtonState}
+          setOnSubmit={setOnSubmit}
+          {...step.props}
+        />
+      )}
+      <div className={`rop-button-container flex space-between`}>
+        <button
+          className={cn(
+            `rop-button-2 border border-gray-300 hover:bg-gray-50 text-gray-700`,
+            !displayPrevious && "invisible"
+          )}
+          onClick={goToPreviousStep}
+          disabled={!displayPrevious}
+        >
+          Previous
+        </button>
+        <button
+          className="rop-button"
+          onClick={buttonFunction}
+          disabled={false}
+        >
+          {!displayFinish ? "Next" : "Finish"}
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/onboarding/components/OnboardingSteps.jsx b/src/onboarding/components/OnboardingSteps.jsx
new file mode 100644
index 0000000..9d09f38
--- /dev/null
+++ b/src/onboarding/components/OnboardingSteps.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+class OnboardingSteps extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentStep: 0,
+      totalSteps: this.props.children.length - 1,
+    };
+  }
+
+  goToPreviousStep = () => {
+    this.setState({ currentStep: this.state.currentStep - 1 });
+  };
+
+  goToNextStep = () => {
+    this.setState({ currentStep: this.state.currentStep + 1 });
+  };
+
+  render() {
+    const children = React.Children.map(this.props.children, (child, index) => {
+      const { currentStep, totalSteps } = this.state;
+
+      return React.cloneElement(child, {
+        isActive: index === currentStep,
+        displayPrevious: currentStep > 0,
+        displayNext: currentStep < totalSteps,
+        displayFinish: currentStep === totalSteps,
+        goToPreviousStep: () => this.goToPreviousStep(),
+        goToNextStep: () => this.goToNextStep(),
+      });
+    });
+
+    return children;
+  }
+}
+
+export { OnboardingSteps };
diff --git a/src/onboarding/components/renderOnboardingPopup.jsx b/src/onboarding/components/renderOnboardingPopup.jsx
new file mode 100644
index 0000000..876ddc8
--- /dev/null
+++ b/src/onboarding/components/renderOnboardingPopup.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { OnboardingSteps } from "./OnboardingSteps.jsx";
+import { OnboardingStep } from "./OnboardingStep.jsx";
+import { removeContainerElement } from "../utils/removeContainer";
+
+export const renderOnboardingPopup = (config, setIsOnboardingActive) => {
+  return (
+    <>
+      <div
+        className="react-onboarding-pro-blur-background full-screen"
+        onClick={config.overlayClose ? removeContainerElement : undefined}
+      />
+      <OnboardingSteps>
+        {config.steps.map((step, index) => (
+          <OnboardingStep
+            step={step}
+            key={index}
+            setIsOnboardingActive={setIsOnboardingActive}
+          />
+        ))}
+      </OnboardingSteps>
+    </>
+  );
+};
diff --git a/src/onboarding/index.jsx b/src/onboarding/index.jsx
new file mode 100644
index 0000000..4341cfd
--- /dev/null
+++ b/src/onboarding/index.jsx
@@ -0,0 +1,97 @@
+import { render } from "react-dom";
+import "../../src/index.css";
+import { createContainerElement } from "./utils/createContainer";
+import { addDefaults } from "./utils/addDefaults";
+import { renderOnboardingPopup } from "./components/renderOnboardingPopup.jsx";
+import StepOneEC from "./steps/editing/StepOne.jsx";
+import StepTwoEC from "./steps/editing/StepTwo.jsx";
+import StepThreeEC from "./steps/editing/StepThree.jsx";
+import StepFourEC from "./steps/editing/StepFour.jsx";
+import StepFiveEC from "./steps/editing/StepFive.jsx";
+import StepSixEC from "./steps/editing/StepSix.jsx";
+
+import StepOneCC from "./steps/coreConcepts/StepOne.jsx";
+import StepTwoCC from "./steps/coreConcepts/StepTwo.jsx";
+import StepThreeCC from "./steps/coreConcepts/StepThree.jsx";
+import StepFourCC from "./steps/coreConcepts/StepFour.jsx";
+import StepFiveCC from "./steps/coreConcepts/StepFive.jsx";
+import StepSixCC from "./steps/coreConcepts/StepSix.jsx";
+
+export const renderOnboarding = (config, setIsOnboardingActive) => {
+  if (!Array.isArray(config.steps) || !config.steps.length) {
+    console.error("Invalid configuration for Onboarding");
+  }
+  const container = createContainerElement();
+
+  const configWithDefaults = addDefaults(config);
+  render(
+    renderOnboardingPopup(configWithDefaults, setIsOnboardingActive),
+    container
+  );
+};
+
+export const renderOnboarder = (setIsOnboardingActive) => {
+  const OpenOnboarding = () => {
+    const config = {
+      steps: [
+        {
+          title: "Welcome to our Quick Editmode Guide",
+          description:
+            "You'll be shown a few basic Editmode concepts in the next steps.",
+        },
+        {
+          type: "component",
+          component: StepOneCC,
+        },
+        {
+          type: "component",
+          component: StepTwoCC,
+        },
+        {
+          type: "component",
+          component: StepThreeCC,
+        },
+        {
+          type: "component",
+          component: StepFourCC,
+        },
+        {
+          type: "component",
+          component: StepFiveCC,
+        },
+        {
+          type: "component",
+          component: StepSixCC,
+        },
+        {
+          type: "component",
+          component: StepOneEC,
+        },
+        {
+          type: "component",
+          component: StepTwoEC,
+        },
+        {
+          type: "component",
+          component: StepThreeEC,
+        },
+        {
+          type: "component",
+          component: StepFourEC,
+        },
+        {
+          type: "component",
+          component: StepFiveEC,
+        },
+        {
+          type: "component",
+          component: StepSixEC,
+        },
+      ],
+      overlayClose: false,
+    };
+
+    renderOnboarding(config, setIsOnboardingActive);
+  };
+  OpenOnboarding();
+};
diff --git a/src/onboarding/steps/coreConcepts/StepFive.jsx b/src/onboarding/steps/coreConcepts/StepFive.jsx
new file mode 100644
index 0000000..97e077a
--- /dev/null
+++ b/src/onboarding/steps/coreConcepts/StepFive.jsx
@@ -0,0 +1,137 @@
+import React from "react";
+
+export default function StepFive() {
+  return (
+    <div className="relative py-16 bg-white overflow-hidden">
+      <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
+        <div
+          className="relative flex justify-end h-full text-lg max-w-prose mx-auto"
+          aria-hidden="true"
+        >
+          <svg
+            className="transform translate-x-32"
+            width={180}
+            height={180}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
+            />
+          </svg>
+          <svg
+            className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
+            />
+          </svg>
+          <svg
+            className="absolute bottom-12 left-full transform translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="d3eb07ae-5182-43e6-857d-35c643af9034"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative px-4 sm:px-6 lg:px-8">
+        <div className="text-lg max-w-prose mx-auto">
+          <h1>
+            <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+              Core Concept #2
+            </span>
+            <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              Collections
+            </span>
+          </h1>
+        </div>
+        <div className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
+          <p>
+            A collection is a group of chunks with the same fields. For example,
+            you might have a "Team Member" collection, which has the fields
+            First Name, Last Name, Title and Headshot.
+          </p>
+          <br />
+          <p>
+            Fields can hold different types of information. For example, the
+            First Name field above would hold text, whereas the Headshot field
+            would hold an image.
+          </p>
+          <br />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/onboarding/steps/coreConcepts/StepFour.jsx b/src/onboarding/steps/coreConcepts/StepFour.jsx
new file mode 100644
index 0000000..9127ef9
--- /dev/null
+++ b/src/onboarding/steps/coreConcepts/StepFour.jsx
@@ -0,0 +1,138 @@
+import React from "react";
+export default function StepFour() {
+  return (
+    <div className="relative py-16 bg-white overflow-hidden">
+      <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
+        <div
+          className="relative flex justify-end h-full text-lg max-w-prose mx-auto"
+          aria-hidden="true"
+        >
+          <svg
+            className="transform translate-x-32"
+            width={180}
+            height={180}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
+            />
+          </svg>
+          <svg
+            className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
+            />
+          </svg>
+          <svg
+            className="absolute bottom-12 left-full transform translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="d3eb07ae-5182-43e6-857d-35c643af9034"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative px-4 sm:px-6 lg:px-8">
+        <div className="text-lg max-w-prose mx-auto">
+          <h1>
+            <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+              Core Concept #1
+            </span>
+            <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              Chunks
+            </span>
+          </h1>
+        </div>
+        <div className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
+          <p>
+            A chunk is a piece of content that takes the form of plain text,
+            rich text or an image.
+          </p>
+          <br />
+          <p>
+            A chunk is represented by an alphanumeric identifier, which can be
+            used to identify and access that chunk from elsewhere.
+          </p>
+          <br />
+          <p>
+            Chunks can store anything from a single heading to links, paragraphs
+            and formatting.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/onboarding/steps/coreConcepts/StepOne.jsx b/src/onboarding/steps/coreConcepts/StepOne.jsx
new file mode 100644
index 0000000..f320f37
--- /dev/null
+++ b/src/onboarding/steps/coreConcepts/StepOne.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const StepOne = () => {
+  return (
+    <div class="bg-white">
+      <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+        <div class="bg-indigo-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
+          <div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+            <div class="lg:self-center">
+              <h2 class="text-2xl font-extrabold text-white sm:text-4xl">
+                <span class="block"> Welcome </span>
+              </h2>
+              <p class="mt-4 text-lg leading-6 text-indigo-200">
+                In this section, you'll learn a little a bit about what Editmode
+                does.
+              </p>
+            </div>
+          </div>
+          <div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
+            <img
+              class="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
+              src="https://img.editmode.com/production/content_pieces/cnk_94a926ac8209abd94b2c/98CipzYMT2eD/images/original/Screenshot_2020-06-01_at_13.41.56.png"
+              alt="App screenshot"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepOne;
diff --git a/src/onboarding/steps/coreConcepts/StepSix.jsx b/src/onboarding/steps/coreConcepts/StepSix.jsx
new file mode 100644
index 0000000..7850c59
--- /dev/null
+++ b/src/onboarding/steps/coreConcepts/StepSix.jsx
@@ -0,0 +1,135 @@
+import React from "react";
+export default function StepSix() {
+  return (
+    <div className="relative py-16 bg-white overflow-hidden">
+      <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
+        <div
+          className="relative flex justify-end h-full text-lg max-w-prose mx-auto"
+          aria-hidden="true"
+        >
+          <svg
+            className="transform translate-x-32"
+            width={180}
+            height={180}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
+            />
+          </svg>
+          <svg
+            className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
+            />
+          </svg>
+          <svg
+            className="absolute bottom-12 left-full transform translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="d3eb07ae-5182-43e6-857d-35c643af9034"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative px-4 sm:px-6 lg:px-8">
+        <div className="text-lg max-w-prose mx-auto">
+          <h1>
+            <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+              Core Concept #3
+            </span>
+            <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              Tags
+            </span>
+          </h1>
+        </div>
+        <div className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
+          <p>
+            Tags help you group chunks together to make it easier to keep track
+            of them on editmode.com
+          </p>
+          <br />
+          <p>
+            Say, you have a page on your website with a chunk for your heading
+            and description. To easily find these chunks, it is useful to be
+            able to group them.
+          </p>
+          <br />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/onboarding/steps/coreConcepts/StepThree.jsx b/src/onboarding/steps/coreConcepts/StepThree.jsx
new file mode 100644
index 0000000..e59001b
--- /dev/null
+++ b/src/onboarding/steps/coreConcepts/StepThree.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const StepThree = () => {
+  return (
+    <div class="bg-white">
+      <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+        <div class="bg-indigo-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
+          <div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+            <div class="lg:self-center">
+              <h2 class="text-2xl font-extrabold text-white sm:text-4xl">
+                <span class="block"> Core Concepts</span>
+              </h2>
+              <p class="mt-4 text-lg leading-6 text-indigo-200">
+                In this section, you'll learn the definitions of core concepts
+                in Editmode like chunks, collections, and tags.
+              </p>
+            </div>
+          </div>
+          <div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
+            <img
+              class="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
+              src="https://editmode.gitbook.io/~/files/v0/b/gitbook-28427.appspot.com/o/assets%2F-MXQVCL50RwglOms2GWH%2F-MXWMB2VQZZDnEp4S-4E%2F-MXWMsB5NZlx2Dv9DAJn%2Fmodels.jpg?alt=media&token=31f8b5c6-ced5-4982-88a8-93eec0319afa"
+              alt="App screenshot"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepThree;
diff --git a/src/onboarding/steps/coreConcepts/StepTwo.jsx b/src/onboarding/steps/coreConcepts/StepTwo.jsx
new file mode 100644
index 0000000..30c2b77
--- /dev/null
+++ b/src/onboarding/steps/coreConcepts/StepTwo.jsx
@@ -0,0 +1,158 @@
+import React from "react";
+
+export default function StepTwo() {
+  return (
+    <div className="relative py-16 bg-white overflow-hidden">
+      <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
+        <div
+          className="relative flex justify-end h-full text-lg max-w-prose mx-auto"
+          aria-hidden="true"
+        >
+          <svg
+            className="transform translate-x-32"
+            width={180}
+            height={180}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
+            />
+          </svg>
+          <svg
+            className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
+            />
+          </svg>
+          <svg
+            className="absolute bottom-12 left-full transform translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="d3eb07ae-5182-43e6-857d-35c643af9034"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative px-4 sm:px-6 lg:px-8">
+        <div className="text-lg max-w-prose mx-auto">
+          <h1>
+            <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+              Welcome To
+            </span>
+            <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              Editmode
+            </span>
+          </h1>
+        </div>
+        <div className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
+          <p className="mb-5">
+            Editmode is one place in which you - or your team - can create,
+            manage and update content for your website or web app in a safe,
+            secure way.
+          </p>
+          <p>
+            It's designed to eliminate code alterations when making changes to
+            content of all kinds.
+          </p>
+          <div className="text-lg max-w-prose mx-auto mt-5">
+            <h1>
+              <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+                A FEW THINGS YOU CAN DO WITH EDITMODE
+              </span>
+            </h1>
+          </div>
+
+          <ul
+            role="list"
+            className="mt-4 flex flex-col justify-between list-disc"
+          >
+            <li className="mb-3">
+              {/* <span className="font-bold">Step 1</span>: Hit the keyboard
+              shortcut - CMD/CTRL + Shift + E - to activate the editor{" "} */}
+              Make content changes to websites and web apps without involving a
+              developer
+            </li>
+            <li className="mb-3">Modify content inline on your website</li>
+            <li>
+              Collaborate on content changes and share internally before
+              publishing
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/onboarding/steps/editing/StepFive.jsx b/src/onboarding/steps/editing/StepFive.jsx
new file mode 100644
index 0000000..89ec942
--- /dev/null
+++ b/src/onboarding/steps/editing/StepFive.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const StepFive = () => {
+  return (
+    <div class="bg-white">
+      <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+        <div class="bg-indigo-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
+          <div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+            <div class="lg:self-center">
+              <h2 class="text-2xl font-extrabold text-white sm:text-4xl">
+                <span class="block"> Wrapping Up </span>
+              </h2>
+              <p class="mt-4 text-lg leading-6 text-indigo-200">
+                We point you towards resources on the broader Editmode ecosystem
+                in this section.
+              </p>
+            </div>
+          </div>
+          <div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
+            <img
+              class="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
+              src="https://editmode.com/assets/hero-image-v2-nobg-a8fb824452a9662eb7584454ab9c2f93444d3236affd236cff3863e7b1bcc212.png"
+              alt="App screenshot"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepFive;
diff --git a/src/onboarding/steps/editing/StepFour.jsx b/src/onboarding/steps/editing/StepFour.jsx
new file mode 100644
index 0000000..31828bf
--- /dev/null
+++ b/src/onboarding/steps/editing/StepFour.jsx
@@ -0,0 +1,143 @@
+import React from "react";
+export default function StepFour() {
+  return (
+    <div className="relative py-16 bg-white overflow-hidden">
+      <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
+        <div
+          className="relative flex justify-end h-full text-lg max-w-prose mx-auto"
+          aria-hidden="true"
+        >
+          <svg
+            className="transform translate-x-32"
+            width={180}
+            height={180}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
+            />
+          </svg>
+          <svg
+            className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
+            />
+          </svg>
+          <svg
+            className="absolute bottom-12 left-full transform translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="d3eb07ae-5182-43e6-857d-35c643af9034"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative px-4 sm:px-6 lg:px-8">
+        <div className="text-lg max-w-prose mx-auto">
+          <h1>
+            <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+              A LITTLE BIT ON THE
+            </span>
+            <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              Admin Panel
+            </span>
+          </h1>
+        </div>
+        <div className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
+          <p className="mb-3">
+            The admin panel is a more robust way of managing the content for
+            your project(s), via a dashboard-like view, and it can be accessed
+            by visiting editmode.com and authenticating.
+          </p>
+          <p>
+            It is currently the only way to create non-template projects and add
+            collaborators (for shared content management capabilities) to your
+            projects and set permissions.
+          </p>
+        </div>
+        <div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1 mt-4">
+          <img
+            class="transform translate-x-6 translate-y-6 rounded-md object-cover"
+            src="https://i.imgur.com/sJpZgju.jpg"
+            alt="App screenshot"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// https://i.imgur.com/sJpZgju.jpg
diff --git a/src/onboarding/steps/editing/StepOne.jsx b/src/onboarding/steps/editing/StepOne.jsx
new file mode 100644
index 0000000..b2cc027
--- /dev/null
+++ b/src/onboarding/steps/editing/StepOne.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const StepOne = () => {
+  return (
+    <div class="bg-white">
+      <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+        <div class="bg-indigo-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
+          <div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
+            <div class="lg:self-center">
+              <h2 class="text-2xl font-extrabold text-white sm:text-4xl">
+                <span class="block"> Managing Content </span>
+              </h2>
+              <p class="mt-4 text-lg leading-6 text-indigo-200">
+                In this section, you'll learn how about the two ways - the Magic
+                Editor and the Admin Panel - in which you can edit content.
+              </p>
+            </div>
+          </div>
+          <div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
+            <img
+              class="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
+              src="https://editmode.com/assets/hero-image-v2-nobg-a8fb824452a9662eb7584454ab9c2f93444d3236affd236cff3863e7b1bcc212.png"
+              alt="App screenshot"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepOne;
diff --git a/src/onboarding/steps/editing/StepSix.jsx b/src/onboarding/steps/editing/StepSix.jsx
new file mode 100644
index 0000000..a96f409
--- /dev/null
+++ b/src/onboarding/steps/editing/StepSix.jsx
@@ -0,0 +1,138 @@
+import React from "react";
+export default function StepSix() {
+  return (
+    <div className="relative py-16 bg-white overflow-hidden">
+      <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
+        <div
+          className="relative flex justify-end h-full text-lg max-w-prose mx-auto"
+          aria-hidden="true"
+        >
+          <svg
+            className="transform translate-x-32"
+            width={180}
+            height={180}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
+            />
+          </svg>
+          <svg
+            className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
+            />
+          </svg>
+          <svg
+            className="absolute bottom-12 left-full transform translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="d3eb07ae-5182-43e6-857d-35c643af9034"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative px-4 sm:px-6 lg:px-8">
+        <div className="text-lg max-w-prose mx-auto">
+          <h1>
+            <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+              A FEW
+            </span>
+            <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              Final Words
+            </span>
+          </h1>
+        </div>
+        <div className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
+          <p className="mb-3">
+            This guide is essentially a condensed version of the broader
+            Editmode ecosystem. To discover more of what it entails, from
+            currently supported client libraries to additional tools and
+            extensive guides, visit our{" "}
+            <a
+              href="https://docs.editmode.com/"
+              target="_blank"
+              className="text-blue-600 hover:text-blue-800 visited:text-purple-600"
+            >
+              docs
+            </a>{" "}
+            page.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/onboarding/steps/editing/StepThree.jsx b/src/onboarding/steps/editing/StepThree.jsx
new file mode 100644
index 0000000..01ae7ca
--- /dev/null
+++ b/src/onboarding/steps/editing/StepThree.jsx
@@ -0,0 +1,134 @@
+import React from "react";
+export default function StepThree() {
+  return (
+    <div className="relative py-16 bg-white overflow-hidden">
+      <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
+        <div
+          className="relative flex justify-end h-full text-lg max-w-prose mx-auto"
+          aria-hidden="true"
+        >
+          <svg
+            className="transform translate-x-32"
+            width={180}
+            height={180}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
+            />
+          </svg>
+          <svg
+            className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
+            />
+          </svg>
+          <svg
+            className="absolute bottom-12 left-full transform translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="d3eb07ae-5182-43e6-857d-35c643af9034"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative px-4 sm:px-6 lg:px-8">
+        <div className="text-lg max-w-prose mx-auto">
+          <h1>
+            <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+              Demo
+            </span>
+            <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              The Magic Editor in Action
+            </span>
+          </h1>
+        </div>
+        <div className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
+          <p className="text-center">
+            Seamless inline edits being made with no code changes required.
+          </p>
+        </div>
+        <div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
+          <img
+            class="transform translate-x-6 translate-y-6 rounded-md object-cover"
+            src="https://editmode.gitbook.io/~/files/v0/b/gitbook-28427.appspot.com/o/assets%2F-MXQVCL50RwglOms2GWH%2F-MhQ4H_wgsxlr38hYlHS%2F-MhQ6g6vMHyzIE4DvE1f%2Finlineediting2.gif?alt=media&token=5f53bdf8-dd92-4c6c-8be5-95f445a6a89b"
+            alt="App screenshot"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/onboarding/steps/editing/StepTwo.jsx b/src/onboarding/steps/editing/StepTwo.jsx
new file mode 100644
index 0000000..618aeec
--- /dev/null
+++ b/src/onboarding/steps/editing/StepTwo.jsx
@@ -0,0 +1,151 @@
+import React from "react";
+export default function StepTwo() {
+  return (
+    <div className="relative py-16 bg-white overflow-hidden">
+      <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
+        <div
+          className="relative flex justify-end h-full text-lg max-w-prose mx-auto"
+          aria-hidden="true"
+        >
+          <svg
+            className="transform translate-x-32"
+            width={180}
+            height={180}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="74b3fd99-0a6f-4271-bef2-e80eeafdf357"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"
+            />
+          </svg>
+          <svg
+            className="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="f210dbf6-a58d-4871-961e-36d5016a0f49"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
+            />
+          </svg>
+          <svg
+            className="absolute bottom-12 left-full transform translate-x-32"
+            width={404}
+            height={384}
+            fill="none"
+            viewBox="0 0 404 384"
+          >
+            <defs>
+              <pattern
+                id="d3eb07ae-5182-43e6-857d-35c643af9034"
+                x={0}
+                y={0}
+                width={20}
+                height={20}
+                patternUnits="userSpaceOnUse"
+              >
+                <rect
+                  x={0}
+                  y={0}
+                  width={4}
+                  height={4}
+                  className="text-gray-200"
+                  fill="currentColor"
+                />
+              </pattern>
+            </defs>
+            <rect
+              width={404}
+              height={384}
+              fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div className="relative px-4 sm:px-6 lg:px-8">
+        <div className="text-lg max-w-prose mx-auto">
+          <h1>
+            <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+              Introducing
+            </span>
+            <span className="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              The Magic Editor
+            </span>
+          </h1>
+        </div>
+        <div className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
+          <p>
+            The Magic Editor lets you make changes to your theme inline i.e
+            directly on the page that the content appears.
+          </p>
+          <div className="text-lg max-w-prose mx-auto mt-5">
+            <h1>
+              <span className="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">
+                How it Works
+              </span>
+            </h1>
+          </div>
+
+          <ul role="list" className="mt-3 flex flex-col justify-between">
+            <li className="mb-3">
+              <span className="font-bold">Step 1</span>: Hit the keyboard
+              shortcut - CMD/CTRL + Shift + E - to activate the editor{" "}
+            </li>
+            <li className="mb-3">
+              <span className="font-bold">Step 2</span>: Find the content you
+              want to change, and modify it as you please.
+            </li>
+            <li>
+              <span className="font-bold">Step 3</span>: When you're done, click
+              "Save Changes" on the Editmode bar at the top-right corner of your
+              screen
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/onboarding/styles/style.css b/src/onboarding/styles/style.css
new file mode 100644
index 0000000..d0b7622
--- /dev/null
+++ b/src/onboarding/styles/style.css
@@ -0,0 +1,109 @@
+.full-screen {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.react-onboarding-pro-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.react-onboarding-pro-blur-background {
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  transition: 200ms ease-in-out all;
+}
+.rop-step {
+  width: calc(100% - 20px);
+  max-width: 800px;
+  margin: 20px;
+  min-height: 300px;
+  border-radius: 10px;
+  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
+  padding: 20px 20px 55px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  background-color: white;
+}
+.rop-title {
+  font-weight: bold;
+  font-size: 1.2rem;
+  text-align: center;
+  line-height: 2.5rem;
+}
+.rop-description {
+  text-align: center;
+}
+.rop-button-container {
+  text-align: right;
+  width: calc(100% - 40px);
+  position: absolute;
+  bottom: 20px;
+}
+.rop-button {
+  padding: 8px 24px;
+  font-size: 14px;
+  border-radius: 5px;
+  /* background-color: #363636; */
+  background-color: #3f51b5;
+  color: white;
+  border: none;
+  cursor: pointer;
+  letter-spacing: 1px;
+}
+.rop-button:hover,
+.rop-button:focus {
+  background-color: black;
+  /* background-color: #3f51b5; */
+  outline: none;
+}
+.rop-button[disabled] {
+  background-color: #969696;
+}
+.rop-form {
+  width: 100%;
+  max-width: 600px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.rop-input-container {
+  display: flex;
+  flex-direction: column;
+  margin: 5px;
+}
+.rop-input-label {
+  margin: 0 0 2px 2px;
+  font-size: 14px;
+  color: #363636;
+}
+.rop-form .rop-input {
+  line-height: 1.5rem;
+  font-size: 16px;
+  padding: 2px 5px;
+  letter-spacing: 1px;
+  border-radius: 5px;
+  border: 2px solid #eee;
+}
+.rop-form .rop-input:focus {
+  border-color: #ddd;
+  outline: none;
+}
+
+@media only screen and (max-width: 600px) {
+  .react-onboarding-pro-container {
+    align-items: flex-end;
+  }
+}
diff --git a/src/onboarding/utils/CONSTANTS.js b/src/onboarding/utils/CONSTANTS.js
new file mode 100644
index 0000000..2f1a4d1
--- /dev/null
+++ b/src/onboarding/utils/CONSTANTS.js
@@ -0,0 +1,17 @@
+export const CONTAINER_CLASS = 'react-onboarding-pro-container';
+export const DEFAULT_STEP_CONFIG = {
+  title: '',
+  description: '',
+  type: '',
+  component: null,
+  props: {},
+  fields: [],
+  onSubmit: () => { }
+}
+export const DEFAULT_FIELD_CONFIG = {
+  label: '',
+  name: '',
+  type: '',
+  placeholder: '',
+  validation: ''
+}
diff --git a/src/onboarding/utils/addDefaults.js b/src/onboarding/utils/addDefaults.js
new file mode 100644
index 0000000..59799b3
--- /dev/null
+++ b/src/onboarding/utils/addDefaults.js
@@ -0,0 +1,22 @@
+import { DEFAULT_STEP_CONFIG, DEFAULT_FIELD_CONFIG } from "./CONSTANTS";
+
+
+export const addDefaults = (config) => {
+  config.steps = config.steps.map(step => {
+    return Object.assign(
+      {},
+      DEFAULT_STEP_CONFIG,
+      step,
+      {
+        fields: (step.fields || []).map(field => {
+          return Object.assign(
+            {},
+            DEFAULT_FIELD_CONFIG,
+            field
+          )
+        })
+      }
+    )
+  });
+  return config;
+}
diff --git a/src/onboarding/utils/createContainer.js b/src/onboarding/utils/createContainer.js
new file mode 100644
index 0000000..465a836
--- /dev/null
+++ b/src/onboarding/utils/createContainer.js
@@ -0,0 +1,16 @@
+import { CONTAINER_CLASS } from "./CONSTANTS";
+const isBrowser = () => typeof window !== "undefined";
+
+export const createContainerElement = () => {
+  if (isBrowser()) {
+    let containerDiv = document.querySelector(`.${CONTAINER_CLASS}`);
+    if (containerDiv) {
+      return containerDiv;
+    }
+    containerDiv = document.createElement("div");
+    containerDiv.classList.add(CONTAINER_CLASS);
+    containerDiv.classList.add("full-screen");
+    document.body.append(containerDiv);
+    return containerDiv;
+  }
+};
diff --git a/src/onboarding/utils/removeContainer.js b/src/onboarding/utils/removeContainer.js
new file mode 100644
index 0000000..381c1d4
--- /dev/null
+++ b/src/onboarding/utils/removeContainer.js
@@ -0,0 +1,9 @@
+import { CONTAINER_CLASS } from "./CONSTANTS";
+const isBrowser = () => typeof window !== "undefined";
+
+export const removeContainerElement = () => {
+  if (isBrowser()) {
+    let containerDiv = document.querySelector(`.${CONTAINER_CLASS}`);
+    containerDiv.remove();
+  }
+};
diff --git a/src/useChunk.js b/src/useChunk.js
index a2933c5..3b891df 100644
--- a/src/useChunk.js
+++ b/src/useChunk.js
@@ -9,15 +9,16 @@ import {
   getCachedData,
   storeCache,
   setDefaultContent,
-  tryParse
+  tryParse,
 } from "./utilities";
 
 export function useChunk(
   defaultContent,
   { identifier, type, contentKey, field }
 ) {
-  defaultContent = setDefaultContent(defaultContent)
-  const { projectId, defaultChunks, branch, next } = useContext(EditmodeContext);
+  defaultContent = setDefaultContent(defaultContent);
+  const { projectId, defaultChunks, branch, next } =
+    useContext(EditmodeContext);
   let [chunk, setChunk] = useState(undefined);
 
   if (!contentKey) {
@@ -53,18 +54,16 @@ export function useChunk(
       }?project_id=${projectId}&${branchParams}`;
       if (branchId) cacheId += branchId;
       let cachedChunk = getCachedData(cacheId);
-      let newChunk = cachedChunk
-        && tryParse(cachedChunk)
-        || fallbackChunk
-        || {
-        chunk_type: type || "single_line_text",
-        content: defaultContent,
-        content_key: contentKey,
-      };
+      let newChunk = (cachedChunk && tryParse(cachedChunk)) ||
+        fallbackChunk || {
+          chunk_type: type || "single_line_text",
+          content: defaultContent,
+          content_key: contentKey,
+        };
 
       if (newChunk) setChunk(newChunk);
 
-    // Fetch new data
+      // Fetch new data
       let error;
       api
         .get(url)
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..26cde68
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/webpack.config.js b/webpack.config.js
index 216d66d..f004d7f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -22,7 +22,11 @@ module.exports = {
           },
         },
       },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader", "postcss-loader"],
+      },
     ],
   },
-  externals: [nodeExternals(), {react: 'react', 'react-dom': 'react-dom'}],
+  externals: [nodeExternals(), { react: "react", "react-dom": "react-dom" }],
 };