diff --git a/app/views/tasks/_form.html.erb b/app/views/tasks/_form.html.erb
index 6cab2c70..13e34352 100644
--- a/app/views/tasks/_form.html.erb
+++ b/app/views/tasks/_form.html.erb
@@ -99,14 +99,39 @@
     <%= form.text_field :content, class: "form-control", placeholder: "タスクの内容を入力してください", required: true %>
   </div>
 
-  <div class="mb-4">
-    <%= form.label :description, "説明", class: "form-label fw-bold" %>
-    <%= form.text_area :description, class: "form-control", rows: 10, placeholder: "タスクの説明を入力してください" %>
+  <div class="tabs">
+    <input id="write" type="radio" name="tab_item" checked>
+    <label class="tab_item" for="write">Write</label>
+    <input id="preview" type="radio" name="tab_item">
+    <label class="tab_item" for="preview">Preview</label>
+    <div class="tab_content" id="write_content">
+      <%= form.text_area :description, class: "border-2 w-full", rows: 10, id: "write-area", placeholder: "タスクの説明を入力してください" %>
+    </div>
+    <div class="tab_content" id="preview_content">
+      <div style="height: 300px" class="overflow-y-scroll">
+        <div id="preview-area" class="markdown-body p-12 list-style-none">
+        </div>
+      </div>
+    </div>
   </div>
 
   <div class="d-grid">
     <%= form.submit "保存", class: "btn btn-danger" %>
   </div>
 
+  <script>
+    document.getElementById('preview').onchange=function(){
+    const text = document.getElementById("write-area").value
+    const preview = document.getElementById("preview-area")
+    const obj = {text: text};
+    const method = "POST";
+    const body = JSON.stringify(obj);
+    const headers = {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+    };
+    fetch("/documents/api_markdown", {method, headers, body}).then((res)=> res.json()).then((obj) => {preview.innerHTML=obj.text}).catch(console.error);}
+  </script>
+
   <%= javascript_include_tag 'prevent_transition_in_editing' %>
 <% end %>