diff --git a/packages/app/src/components/commons/Editor/EditorBlock.tsx b/packages/app/src/components/commons/Editor/EditorBlock.tsx
index a0f3709d..75099da2 100644
--- a/packages/app/src/components/commons/Editor/EditorBlock.tsx
+++ b/packages/app/src/components/commons/Editor/EditorBlock.tsx
@@ -25,6 +25,24 @@ const EditorBlockItem: React.FC<EditorBlockItemProps> = (props) => {
   const isFocused = props.blockProps.isFocused
   const type = props.block.getType()
 
+  const handleTop = (): number => {
+    switch (type) {
+      case "header-one":
+        return 12
+      case "header-two":
+        return 2
+      case "header-three":
+        return 10
+      case "header-four":
+        return 6
+      case "header-five":
+        return 4
+      case "header-six":
+        return 2
+      default:
+        return 0
+    }
+  }
   return (
     <Box
       sx={{
@@ -39,8 +57,10 @@ const EditorBlockItem: React.FC<EditorBlockItemProps> = (props) => {
       {isBlockFocused && isEmpty && isFocused && (
         <Typography
           variant="body1"
+          className="rich-editor-placeholder"
           sx={{
             position: "absolute",
+            top: handleTop,
             left: type.includes("ordered-list-item" || "unordered-list-item") ? 30 : 0,
             color: palette.grays[600],
           }}
diff --git a/packages/app/src/theme/index.ts b/packages/app/src/theme/index.ts
index d06d9fec..dd9a67ab 100644
--- a/packages/app/src/theme/index.ts
+++ b/packages/app/src/theme/index.ts
@@ -238,6 +238,11 @@ let theme = createTheme({
           overflow: auto;
           padding: 1rem;
         }
+        .rich-editor-placeholder{
+          font-family: ${fontFamilies.serif} !important;
+          font-size: 16px !important;
+          line-height: 1.75 !important;
+        }
         .public-DraftStyleDefault-pre {
           background-color: initial;
           border-radius: initial;