diff --git a/packages/tailwind-config/styles/editor/drag-drop.css b/packages/tailwind-config/styles/editor/drag-drop.css
new file mode 100644
index 0000000000..7b9577cc40
--- /dev/null
+++ b/packages/tailwind-config/styles/editor/drag-drop.css
@@ -0,0 +1,117 @@
+/* side menu */
+#editor-side-menu {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 0.2s ease 0.2s;
+
+  &.side-menu-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+/* end side menu */
+
+/* drag handle */
+#drag-handle {
+  opacity: 1;
+
+  &.drag-handle-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+/* end drag handle */
+
+/* ai handle */
+#ai-handle {
+  opacity: 1;
+
+  &.handle-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+/* end ai handle */
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-imageComponent):not(.node-image):not(.table-wrapper) {
+  position: relative;
+  cursor: grab;
+  outline: none !important;
+  box-shadow: none;
+
+  --horizontal-offset: 5px;
+
+  &:has(.issue-embed),
+  &.table-wrapper {
+    --horizontal-offset: 0px;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: calc(-1 * var(--horizontal-offset));
+    height: 100%;
+    width: calc(100% + (var(--horizontal-offset) * 2));
+    background-color: rgba(var(--color-primary-100), 0.2);
+    border-radius: 4px;
+    pointer-events: none;
+  }
+
+  &.node-imageComponent,
+  &.node-image,
+  &.table-wrapper {
+    --horizontal-offset: 0px;
+
+    &::after {
+      background-color: rgba(var(--color-background-100), 0.2);
+    }
+  }
+}
+
+/* for targeting the task list items */
+li.ProseMirror-selectednode:not(.dragging)[data-checked]::after {
+  margin-left: -5px;
+}
+
+/* for targeting the unordered list items */
+ul > li.ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -10px; /* Adjust as needed */
+}
+
+/* Initialize a counter for the ordered list */
+ol {
+  counter-reset: item;
+}
+
+/* for targeting the ordered list items */
+ol > li.ProseMirror-selectednode:not(.dragging)::after {
+  counter-increment: item;
+  margin-left: -18px;
+}
+
+/* for targeting the ordered list items after the 9th item */
+ol > li:nth-child(n + 10).ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -25px;
+}
+
+/* for targeting the ordered list items after the 99th item */
+ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -35px;
+}
+
+.ProseMirror node-image,
+.ProseMirror node-imageComponent {
+  transition: filter 0.1s ease-in-out;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    filter: brightness(90%);
+  }
+}
diff --git a/packages/tailwind-config/styles/editor/editor.css b/packages/tailwind-config/styles/editor/editor.css
new file mode 100644
index 0000000000..ef5bca2630
--- /dev/null
+++ b/packages/tailwind-config/styles/editor/editor.css
@@ -0,0 +1,508 @@
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  outline: none !important;
+  cursor: text;
+  font-family: var(--font-style);
+  font-size: var(--font-size-regular);
+  font-weight: 400;
+  color: inherit;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+/* Placeholder only for the first line in an empty editor. */
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-placeholder);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Display Placeholders on every new line. */
+.ProseMirror p.is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-placeholder);
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror li blockquote {
+  margin-top: 10px;
+  padding-inline-start: 1em;
+}
+
+/* block quotes */
+.ProseMirror blockquote {
+  font-style: normal;
+  font-weight: 400;
+  border-left: 3px solid rgb(var(--color-border-300));
+}
+
+.ProseMirror blockquote p::before,
+.ProseMirror blockquote p::after {
+  display: none;
+}
+/* end block quotes */
+
+.ProseMirror code::before,
+.ProseMirror code::after {
+  display: none;
+}
+
+/* Custom image styles */
+.ProseMirror img {
+  margin-top: 0 !important;
+  margin-bottom: 0;
+
+  &:not(.read-only-image):not(.loading-image) {
+    transition: filter 0.1s ease-in-out;
+
+    &:hover {
+      cursor: pointer;
+      filter: brightness(90%);
+    }
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid rgba(var(--color-primary-100));
+      filter: brightness(90%);
+    }
+  }
+}
+
+/* Custom gap cursor styles  */
+.ProseMirror-gapcursor::after {
+  border-top: 1px solid rgb(var(--color-text-100)) !important;
+}
+
+/* to-do list */
+ul[data-type="taskList"] li {
+  font-size: var(--font-size-list);
+  line-height: 1.5;
+}
+
+ul[data-type="taskList"] li > label {
+  position: absolute;
+  left: -5px;
+  margin: 0.1rem 0.15rem 0 0;
+  user-select: none;
+}
+
+ul[data-type="taskList"] li > div {
+  margin-left: 1.15rem;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  border: 1px solid rgba(var(--color-text-100), 0.2) !important;
+  outline: none;
+  border-radius: 2px;
+  transform: scale(1.05);
+}
+
+.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
+  background-color: rgba(var(--color-text-100), 0.1);
+}
+
+.ProseMirror[contenteditable="false"] input[type="checkbox"] {
+  pointer-events: none;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
+  background-color: rgba(var(--color-primary-100)) !important;
+  border-color: rgba(var(--color-primary-100)) !important;
+  color: white !important;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
+  background-color: rgba(var(--color-primary-300)) !important;
+  border-color: rgba(var(--color-primary-300)) !important;
+}
+
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+
+/* the p tag just after the ul tag */
+ul[data-type="taskList"] + p.editor-paragraph-block {
+  margin-top: 0.4rem !important;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  position: relative;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  margin: 0;
+  cursor: pointer;
+  width: 0.8rem;
+  height: 0.8rem;
+  position: relative;
+  border: 1.5px solid rgb(var(--color-text-100));
+  margin-right: 0.2rem;
+  margin-top: 0.15rem;
+
+  &:active {
+    background-color: rgb(var(--color-background-90));
+  }
+
+  /* check sign */
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.5em;
+    height: 0.5em;
+    transform: scale(0);
+    transform-origin: center;
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:checked::before {
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
+
+ul[data-type="taskList"] li > div {
+  & > p.editor-paragraph-block {
+    margin-top: 10px;
+    transition: color 0.2s ease;
+  }
+
+  [data-text-color] {
+    transition: opacity 0.2s ease;
+  }
+}
+
+ul[data-type="taskList"] li[data-checked="true"] {
+  & > div > p.editor-paragraph-block {
+    color: var(--color-placeholder);
+  }
+
+  [data-text-color] {
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+  }
+}
+/* end to-do list */
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+  max-width: 800px !important;
+}
+
+.fade-in {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror table * .is-empty::before {
+  opacity: 0;
+}
+
+/* code block, inline code */
+.ProseMirror pre {
+  font-family: JetBrainsMono, monospace;
+  tab-size: 2;
+}
+
+.ProseMirror pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+}
+
+.ProseMirror code {
+  font-size: var(--font-size-code);
+}
+/* end code block, inline code */
+
+div[data-type="horizontalRule"] {
+  line-height: 0;
+  padding: var(--divider-padding-top) 0 var(--divider-padding-bottom) 0;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  & > div {
+    border-bottom: 2px solid rgb(var(--color-border-200));
+  }
+}
+
+/* Cursor styles for the inline code blocks */
+@keyframes blink {
+  49% {
+    border-color: unset;
+  }
+
+  50% {
+    border-color: transparent;
+  }
+
+  99% {
+    border-color: transparent;
+  }
+}
+
+.no-cursor {
+  caret-color: transparent;
+}
+
+div:focus .fake-cursor,
+span:focus .fake-cursor {
+  margin-right: -1px;
+  border-left-width: 1.5px;
+  border-left-style: solid;
+  animation: blink 1s;
+  animation-iteration-count: infinite;
+  position: relative;
+  z-index: 1;
+}
+
+/* numbered, bulleted and to-do lists spacing */
+.prose ol:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+.prose
+  ul:not([data-type="taskList"]):where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+.prose ul[data-type="taskList"]:where(.prose > :first-child) {
+  margin-top: 0.25rem !important;
+  margin-bottom: 1px !important;
+}
+
+.prose ol:not(:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))),
+.prose
+  ul:not([data-type="taskList"]):not(
+    :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))
+  ),
+.prose ul[data-type="taskList"]:not(:where(.prose > :first-child)) {
+  margin-top: calc(0.25rem + 3px) !important;
+  margin-bottom: 1px !important;
+}
+
+ol ol,
+ol ul:not([data-type="taskList"]),
+ul:not([data-type="taskList"]) ul:not([data-type="taskList"]),
+ul:not([data-type="taskList"]) ol {
+  margin-top: 0.45rem !important;
+}
+
+ul[data-type="taskList"] ul[data-type="taskList"] {
+  margin-top: 0.6rem;
+}
+/* end numbered, bulleted and to-do lists spacing */
+
+h1.editor-heading-block,
+h2.editor-heading-block,
+h3.editor-heading-block,
+h4.editor-heading-block,
+h5.editor-heading-block,
+h6.editor-heading-block,
+p.editor-paragraph-block {
+  margin: 0 !important;
+}
+
+/* tailwind typography */
+.prose :where(h1.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-1-padding-top);
+  }
+
+  padding-bottom: var(--heading-1-padding-bottom);
+  font-size: var(--font-size-h1) !important;
+  line-height: var(--line-height-h1) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h2.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-2-padding-top);
+  }
+
+  padding-bottom: var(--heading-2-padding-bottom);
+  font-size: var(--font-size-h2) !important;
+  line-height: var(--line-height-h2) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h3.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-3-padding-top);
+  }
+
+  padding-bottom: var(--heading-3-padding-bottom);
+  font-size: var(--font-size-h3) !important;
+  line-height: var(--line-height-h3) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h4.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-4-padding-top);
+  }
+
+  padding-bottom: var(--heading-4-padding-bottom);
+  font-size: var(--font-size-h4) !important;
+  line-height: var(--line-height-h4) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h5.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-5-padding-top);
+  }
+
+  padding-bottom: var(--heading-5-padding-bottom);
+  font-size: var(--font-size-h5) !important;
+  line-height: var(--line-height-h5) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h6.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-6-padding-top);
+  }
+
+  padding-bottom: var(--heading-6-padding-bottom);
+  font-size: var(--font-size-h6) !important;
+  line-height: var(--line-height-h6) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(p.editor-paragraph-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:not(:first-child) {
+    padding-top: var(--paragraph-padding-top);
+  }
+
+  &:not(td p.editor-paragraph-block, th p.editor-paragraph-block) {
+    &:last-child {
+      padding-bottom: var(--paragraph-padding-bottom);
+    }
+
+    &:not(:last-child) {
+      padding-bottom: var(--paragraph-padding-between);
+    }
+  }
+
+  font-size: var(--font-size-regular) !important;
+  line-height: var(--line-height-regular) !important;
+}
+
+p.editor-paragraph-block + p.editor-paragraph-block {
+  padding-top: var(--paragraph-padding-between) !important;
+}
+
+.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block,
+.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block {
+  font-size: var(--font-size-list);
+  line-height: var(--line-height-list);
+}
+
+.prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+}
+/* end tailwind typography */
+
+/* text colors */
+[data-text-color="gray"] {
+  color: var(--editor-colors-gray-text);
+}
+[data-text-color="peach"] {
+  color: var(--editor-colors-peach-text);
+}
+[data-text-color="pink"] {
+  color: var(--editor-colors-pink-text);
+}
+[data-text-color="orange"] {
+  color: var(--editor-colors-orange-text);
+}
+[data-text-color="green"] {
+  color: var(--editor-colors-green-text);
+}
+[data-text-color="light-blue"] {
+  color: var(--editor-colors-light-blue-text);
+}
+[data-text-color="dark-blue"] {
+  color: var(--editor-colors-dark-blue-text);
+}
+[data-text-color="purple"] {
+  color: var(--editor-colors-purple-text);
+}
+/* end text colors */
+
+/* background colors */
+[data-background-color="gray"] {
+  background-color: var(--editor-colors-gray-background);
+}
+[data-background-color="peach"] {
+  background-color: var(--editor-colors-peach-background);
+}
+[data-background-color="pink"] {
+  background-color: var(--editor-colors-pink-background);
+}
+[data-background-color="orange"] {
+  background-color: var(--editor-colors-orange-background);
+}
+[data-background-color="green"] {
+  background-color: var(--editor-colors-green-background);
+}
+[data-background-color="light-blue"] {
+  background-color: var(--editor-colors-light-blue-background);
+}
+[data-background-color="dark-blue"] {
+  background-color: var(--editor-colors-dark-blue-background);
+}
+[data-background-color="purple"] {
+  background-color: var(--editor-colors-purple-background);
+}
+/* end background colors */
+
+/* emoji styles */
+span[data-name][data-type="emoji"] img {
+  display: inline !important;
+  vertical-align: middle;
+  margin: 0;
+  padding: 0;
+  max-width: 1.25em;
+  max-height: 1.25em;
+}
+
+/* touch device styles */
+.touch-select-none {
+  user-select: none;
+  -webkit-user-select: none;
+}
diff --git a/packages/tailwind-config/styles/editor/github-dark.css b/packages/tailwind-config/styles/editor/github-dark.css
new file mode 100644
index 0000000000..9374de403f
--- /dev/null
+++ b/packages/tailwind-config/styles/editor/github-dark.css
@@ -0,0 +1,85 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: #ff7b72;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: #d2a8ff;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: #79c0ff;
+}
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #a5d6ff;
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: #ffa657;
+}
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: #8b949e;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: #7ee787;
+}
+.hljs-subst {
+  color: #c9d1d9;
+}
+.hljs-section {
+  color: #1f6feb;
+  font-weight: 700;
+}
+.hljs-bullet {
+  color: #f2cc60;
+}
+.hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #c9d1d9;
+  font-weight: 700;
+}
+.hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
diff --git a/packages/tailwind-config/styles/editor/index.css b/packages/tailwind-config/styles/editor/index.css
new file mode 100644
index 0000000000..e38c01c283
--- /dev/null
+++ b/packages/tailwind-config/styles/editor/index.css
@@ -0,0 +1,5 @@
+@import "./variables.css";
+@import "./editor.css";
+@import "./table.css";
+@import "./github-dark.css";
+@import "./drag-drop.css";
diff --git a/packages/tailwind-config/styles/editor/table.css b/packages/tailwind-config/styles/editor/table.css
new file mode 100644
index 0000000000..ef95348663
--- /dev/null
+++ b/packages/tailwind-config/styles/editor/table.css
@@ -0,0 +1,216 @@
+.table-wrapper {
+  overflow-x: auto;
+  padding-bottom: 26px;
+
+  table {
+    position: relative;
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0.5rem 0 0 0;
+    border: 1px solid rgba(var(--color-border-200));
+    width: 100%;
+
+    td,
+    th {
+      min-width: 1em;
+      border: 1px solid rgba(var(--color-border-300));
+      padding: 7px 10px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      transition: background-color 0.3s ease;
+
+      > * {
+        margin-bottom: 0;
+      }
+
+      /* Selected cell outline */
+      &.selectedCell:not(.content-hidden) {
+        user-select: none;
+
+        &::after {
+          position: absolute;
+          content: "";
+          top: -1px;
+          left: -1px;
+          height: calc(100% + 2px);
+          width: calc(100% + 2px);
+        }
+
+        &.selectedCell-border-top::after {
+          border-top: 2px solid rgba(var(--color-primary-100));
+        }
+
+        &.selectedCell-border-left::after {
+          border-left: 2px solid rgba(var(--color-primary-100));
+        }
+
+        &.selectedCell-border-bottom::after {
+          border-bottom: 2px solid rgba(var(--color-primary-100));
+        }
+
+        &.selectedCell-border-right::after {
+          border-right: 2px solid rgba(var(--color-primary-100));
+        }
+      }
+      /* End selected cell outline */
+
+      .table-col-handle-container,
+      .table-row-handle-container {
+        & > button {
+          opacity: 0;
+        }
+      }
+
+      &:hover {
+        .table-col-handle-container,
+        .table-row-handle-container {
+          & > button {
+            opacity: 1;
+          }
+        }
+      }
+
+      .ProseMirror-widget + * {
+        padding-top: 0 !important;
+      }
+
+      &.content-hidden > * {
+        visibility: hidden;
+      }
+    }
+
+    th {
+      font-weight: 500;
+      text-align: left;
+    }
+
+    tr[background="none"],
+    tr:not([background]) {
+      th {
+        background-color: rgba(var(--color-background-90));
+      }
+    }
+
+    .table-drop-marker {
+      background-color: rgba(var(--color-primary-100));
+      position: absolute;
+      z-index: 10;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .table-col-drag-marker,
+    .table-row-drag-marker {
+      position: absolute;
+      z-index: 10;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .table-col-drag-marker {
+      top: -9px;
+    }
+
+    .table-row-drag-marker {
+      left: 0;
+    }
+  }
+
+  /* Selected status */
+  &.ProseMirror-selectednode {
+    table {
+      background-color: rgba(var(--color-primary-100), 0.2);
+    }
+  }
+  /* End selected status */
+}
+
+/* Column resizer */
+.table-wrapper table .column-resize-handle {
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  width: 2px;
+  height: calc(100% + 2px);
+  z-index: 5;
+  background-color: rgba(var(--color-primary-100));
+  pointer-events: none;
+}
+/* End column resizer */
+
+.resize-cursor .table-wrapper .table-controls .rows-control,
+.table-wrapper.controls--disabled .table-controls .rows-control,
+.resize-cursor .table-wrapper .table-controls .columns-control,
+.table-wrapper.controls--disabled .table-controls .columns-control {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Insert buttons */
+.table-wrapper {
+  .table-column-insert-button,
+  .table-row-insert-button {
+    position: absolute;
+    background-color: rgba(var(--color-background-90));
+    color: rgba(var(--color-text-300));
+    border: 1px solid rgba(var(--color-border-200));
+    border-radius: 4px;
+    display: grid;
+    place-items: center;
+    opacity: 0;
+    pointer-events: none;
+    outline: none;
+    z-index: 10;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba(var(--color-background-80));
+      color: rgba(var(--color-text-100));
+    }
+
+    &.dragging {
+      opacity: 1;
+      pointer-events: auto;
+      background-color: rgba(var(--color-primary-100), 0.2);
+      color: rgba(var(--color-text-100));
+    }
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  .table-column-insert-button {
+    top: 0;
+    right: -16px;
+    width: 16px;
+    height: 100%;
+    transform: translateX(50%);
+    cursor: col-resize;
+  }
+
+  .table-row-insert-button {
+    bottom: -16px;
+    left: 0;
+    width: 100%;
+    height: 16px;
+    transform: translateY(50%);
+    cursor: row-resize;
+  }
+
+  /* Show buttons on table hover */
+  &:hover {
+    .table-column-insert-button,
+    .table-row-insert-button {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+/* End insert buttons */
diff --git a/packages/tailwind-config/styles/editor/tailwind.css b/packages/tailwind-config/styles/editor/tailwind.css
new file mode 100644
index 0000000000..b5c61c9567
--- /dev/null
+++ b/packages/tailwind-config/styles/editor/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/tailwind-config/styles/editor/variables.css b/packages/tailwind-config/styles/editor/variables.css
new file mode 100644
index 0000000000..c7726ce2d3
--- /dev/null
+++ b/packages/tailwind-config/styles/editor/variables.css
@@ -0,0 +1,305 @@
+:root {
+  /* text colors */
+  --editor-colors-gray-text: #5c5e63;
+  --editor-colors-peach-text: #ff5b59;
+  --editor-colors-pink-text: #f65385;
+  --editor-colors-orange-text: #fd9038;
+  --editor-colors-green-text: #0fc27b;
+  --editor-colors-light-blue-text: #17bee9;
+  --editor-colors-dark-blue-text: #266df0;
+  --editor-colors-purple-text: #9162f9;
+  /* end text colors */
+
+  /* layout */
+  --normal-content-width: 720px;
+  --wide-content-width: 1152px;
+  --normal-content-margin: 20px;
+  --wide-content-margin: 96px;
+  /* end layout */
+}
+
+/* text background colors */
+[data-theme*="light"] {
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
+}
+[data-theme*="dark"] {
+  --editor-colors-gray-background: #404144;
+  --editor-colors-peach-background: #593032;
+  --editor-colors-pink-background: #562e3d;
+  --editor-colors-orange-background: #583e2a;
+  --editor-colors-green-background: #1d4a3b;
+  --editor-colors-light-blue-background: #1f495c;
+  --editor-colors-dark-blue-background: #223558;
+  --editor-colors-purple-background: #3d325a;
+}
+/* end text background colors */
+
+/* font size and style */
+.editor-container {
+  --color-placeholder: rgba(var(--color-text-100), 0.5);
+
+  /* font sizes and line heights */
+  &.large-font {
+    --font-size-h1: 1.75rem;
+    --font-size-h2: 1.5rem;
+    --font-size-h3: 1.375rem;
+    --font-size-h4: 1.25rem;
+    --font-size-h5: 1.125rem;
+    --font-size-h6: 1rem;
+    --font-size-regular: 1rem;
+    --font-size-code: 0.85rem;
+    --font-size-list: var(--font-size-regular);
+
+    --line-height-h1: 2.25rem;
+    --line-height-h2: 2rem;
+    --line-height-h3: 1.75rem;
+    --line-height-h4: 1.5rem;
+    --line-height-h5: 1.5rem;
+    --line-height-h6: 1.5rem;
+    --line-height-regular: 1.5rem;
+    --line-height-code: 1.5rem;
+    --line-height-list: var(--line-height-regular);
+  }
+  &.small-font {
+    --font-size-h1: 1.4rem;
+    --font-size-h2: 1.2rem;
+    --font-size-h3: 1.1rem;
+    --font-size-h4: 1rem;
+    --font-size-h5: 0.9rem;
+    --font-size-h6: 0.8rem;
+    --font-size-regular: 0.8rem;
+    --font-size-code: 0.8rem;
+    --font-size-list: var(--font-size-regular);
+
+    --line-height-h1: 1.8rem;
+    --line-height-h2: 1.6rem;
+    --line-height-h3: 1.4rem;
+    --line-height-h4: 1.2rem;
+    --line-height-h5: 1.2rem;
+    --line-height-h6: 1.2rem;
+    --line-height-regular: 1.2rem;
+    --line-height-code: 1.2rem;
+    --line-height-list: var(--line-height-regular);
+  }
+
+  &.mobile-font {
+    --font-size-h1: 1.75rem;
+    --font-size-h2: 1.5rem;
+    --font-size-h3: 1.375rem;
+    --font-size-h4: 1.25rem;
+    --font-size-h5: 1.125rem;
+    --font-size-h6: 1rem;
+    --font-size-regular: 0.95rem;
+    --font-size-code: 0.85rem;
+    --font-size-list: var(--font-size-regular);
+
+    --line-height-h1: 2.25rem;
+    --line-height-h2: 2rem;
+    --line-height-h3: 1.75rem;
+    --line-height-h4: 1.5rem;
+    --line-height-h5: 1.5rem;
+    --line-height-h6: 1.5rem;
+    --line-height-regular: 1.5rem;
+    --line-height-code: 1.5rem;
+    --line-height-list: var(--line-height-regular);
+  }
+  /* end font sizes and line heights */
+
+  /* font styles */
+  --font-style: "Inter", sans-serif;
+
+  &.sans-serif {
+    --font-style: "Inter", sans-serif;
+  }
+  &.serif {
+    --font-style: serif;
+  }
+  &.monospace {
+    --font-style: monospace;
+  }
+  /* end font styles */
+
+  /* spacing */
+  &.line-spacing-regular {
+    --heading-1-padding-top: 28px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 28px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 28px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 28px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 20px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 20px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 4px;
+    --paragraph-padding-bottom: 4px;
+    --paragraph-padding-between: 8px;
+    --list-spacing-y: 8px;
+    --divider-padding-top: 4px;
+    --divider-padding-bottom: 4px;
+  }
+
+  &.line-spacing-small {
+    --heading-1-padding-top: 16px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 16px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 16px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 16px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 12px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 12px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 2px;
+    --paragraph-padding-bottom: 2px;
+    --paragraph-padding-between: 4px;
+    --list-spacing-y: 0px;
+    --divider-padding-top: 0px;
+    --divider-padding-bottom: 4px;
+  }
+
+  &.line-spacing-mobile-regular {
+    --heading-1-padding-top: 16px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 16px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 16px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 16px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 12px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 12px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 2px;
+    --paragraph-padding-bottom: 2px;
+    --paragraph-padding-between: 4px;
+    --list-spacing-y: 0px;
+    --divider-padding-top: 0px;
+    --divider-padding-bottom: 4px;
+  }
+  /* end spacing */
+}
+/* end font size and style */
+
+/* layout config */
+#page-toolbar-container {
+  container-name: page-toolbar-container;
+  container-type: inline-size;
+
+  .page-toolbar-content {
+    --header-width: var(--normal-content-width);
+
+    &.wide-layout {
+      --header-width: var(--wide-content-width);
+    }
+
+    padding-left: calc(((100% - var(--header-width)) / 2) - 10px);
+  }
+}
+
+#page-content-container {
+  container-name: page-content-container;
+  container-type: inline-size;
+
+  .frame-renderer {
+    --editor-content-width: var(--normal-content-width);
+
+    &.wide-layout {
+      --editor-content-width: var(--wide-content-width);
+    }
+
+    .editor-container.page-title-editor .ProseMirror,
+    .document-editor-loader {
+      max-width: var(--editor-content-width);
+      margin: 0 auto;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .editor-container.document-editor .ProseMirror {
+      & > *:not(.editor-full-width-block) {
+        max-width: var(--editor-content-width);
+        margin-left: auto !important;
+        margin-right: auto !important;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      & > .editor-full-width-block {
+        max-width: 100%;
+        padding-inline-start: calc((100% - var(--editor-content-width)) / 2);
+        padding-inline-end: var(--wide-content-margin);
+      }
+    }
+  }
+}
+
+/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
+@container page-toolbar-container (min-width: 912px) and (max-width: 1344px) {
+  .page-toolbar-content.wide-layout {
+    padding-left: var(--wide-content-margin) !important;
+  }
+}
+
+/* keep a static padding of 96px for wide layouts for container width <912px */
+@container page-toolbar-container (max-width: 912) {
+  .page-toolbar-content.wide-layout {
+    padding-left: var(--wide-content-margin) !important;
+  }
+}
+/* end layout config */
+
+/* keep a static padding of 20px for wide layouts for container width <760px */
+@container page-toolbar-container (max-width: 760px) {
+  .page-toolbar-content {
+    padding-left: var(--normal-content-margin) !important;
+  }
+}
+/* end layout config */
+
+/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
+@container page-content-container (min-width: 912px) and (max-width: 1344px) {
+  #page-content-container .frame-renderer.wide-layout .editor-container,
+  #page-content-container .frame-renderer.wide-layout .document-editor-loader,
+  .page-header-container {
+    padding-left: var(--wide-content-margin);
+    padding-right: var(--wide-content-margin);
+  }
+}
+
+/* keep a static padding of 20px for wide layouts for container width <912px */
+@container page-content-container (max-width: 912px) {
+  #page-content-container .frame-renderer.wide-layout .editor-container,
+  #page-content-container .frame-renderer.wide-layout .document-editor-loader,
+  .page-header-container {
+    padding-left: var(--normal-content-margin);
+    padding-right: var(--normal-content-margin);
+  }
+}
+
+/* keep a static padding of 20px for normal layouts for container width <760px */
+@container page-content-container (max-width: 760px) {
+  #page-content-container .frame-renderer:not(.wide-layout) .editor-container,
+  #page-content-container .frame-renderer:not(.wide-layout) .document-editor-loader,
+  .page-header-container {
+    padding-left: var(--normal-content-margin);
+    padding-right: var(--normal-content-margin);
+  }
+}
+
+@container page-content-container (max-width: 930px) {
+  .page-summary-container {
+    display: none;
+  }
+}
+/* end layout config */