diff --git a/ui/package.json b/ui/package.json
index ab0b4daf..8649cb38 100755
--- a/ui/package.json
+++ b/ui/package.json
@@ -37,13 +37,16 @@
   },
   "type": "module",
   "dependencies": {
+    "carta-md": "^4.4.2",
     "cookie": "^0.5.0",
     "date-fns": "^2.29.3",
+    "isomorphic-dompurify": "^2.14.0",
     "isomorphic-unfetch": "^4.0.2",
     "jsonwebtoken": "^9.0.0",
     "jwks-rsa": "^3.0.1",
     "leaflet": "1.7.1",
     "quill": "^1.3.7",
-    "streamsaver": "^2.0.6"
+    "streamsaver": "^2.0.6",
+    "turndown": "^7.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/ui/src/routes/datasets/IngestForm.svelte b/ui/src/routes/datasets/IngestForm.svelte
index 50d35040..8a536090 100755
--- a/ui/src/routes/datasets/IngestForm.svelte
+++ b/ui/src/routes/datasets/IngestForm.svelte
@@ -69,18 +69,17 @@
 </script>
 
 <label for="ingest-dataset" class="btn btn-ghost btn-outline">{text}</label>
-
 <input type="checkbox" id="ingest-dataset" class="modal-toggle" />
 <div class="modal">
   <form
     on:submit|preventDefault={ingest}
-    class="flex flex-col gap-2 text-sm modal-box"
+    class="flex flex-col gap-2 text-sm modal-box w-[95%] sm:w-[75%] max-w-none"
   >
     <slot />
     <span>
       <p>Name</p>
       <input
-        class="input input-bordered w-full"
+        class="w-full input input-bordered"
         type="text"
         placeholder="Dataset name"
         {required}
@@ -92,7 +91,7 @@
       <span>
         <p>Authors (use comma for multiple authors)</p>
         <input
-          class="input input-bordered w-full"
+          class="w-full input input-bordered"
           type="text"
           placeholder="Dataset authors"
           {required}
@@ -105,7 +104,7 @@
       <span>
         <p>Link to source data</p>
         <input
-          class="input input-bordered w-full"
+          class="w-full input input-bordered"
           type="text"
           placeholder="Link to source data"
           {required}
@@ -118,7 +117,7 @@
       <span>
         <p>License</p>
         <input
-          class="input input-bordered w-full"
+          class="w-full input input-bordered"
           type="text"
           placeholder="License"
           {required}
diff --git a/ui/src/routes/datasets/TextEditor.svelte b/ui/src/routes/datasets/TextEditor.svelte
index 6c36936e..e154425b 100755
--- a/ui/src/routes/datasets/TextEditor.svelte
+++ b/ui/src/routes/datasets/TextEditor.svelte
@@ -1,35 +1,41 @@
 <script>
-  import "../../styles/quill.snow.css";
-  import { onMount } from "svelte";
-  // import Quill from "quill";
-
-  export let options = {
-    placeholder: "Description...",
-    modules: {
-      toolbar: [
-        [{ header: [1, 2, 3, false] }],
-        ["bold", "italic", "underline", "strike"],
-        ["link", "code-block"],
-      ],
-    },
-    theme: "snow",
-  };
-  export let content = "";
+	import { Carta, MarkdownEditor } from 'carta-md';
+	import 'carta-md/default.css'; /* Default theme */
+	import "$styles/carta-md.css"
+  import DOMPurify from 'isomorphic-dompurify';
+  
+  var x = window.matchMedia("(max-width: 640px)")
+  let sm = x.matches ? true : false;
+  let normal = x.matches ? false : true;;
+  // Attach listener function on state changes
+  x.addEventListener("change", function() {
+    if(x.matches){
+      sm = true;
+      normal = false;
+    }
+    else{
+      sm = false;
+      normal = true;
+    }
+  });
 
-  let a = "";
+  import TurndownService from 'turndown';
+  const carta = new Carta({
+		extensions: [],
+    sanitizer: DOMPurify.sanitize
+	});
 
-  let quillInstance;
-  onMount(async () => {
-    const Quill = (await import("quill")).default;
-    if (quillInstance) return;
-    const node = document.getElementById("editor");
-    quillInstance = new Quill(node, options);
-    const container = node.getElementsByClassName("ql-editor")[0];
-    if (content) container.innerHTML = content;
-    quillInstance.on("text-change", (delta, oldDelta, source) => {
-      content = container.innerHTML;
-    });
-  });
+  export let content;
+  var turndownService = new TurndownService({codeBlockStyle:"fenced", preformattedCode:true})
+	let value = turndownService.turndown(content);
+  const renderHtml = async () => {
+    content = await carta.render(value);
+  }
 </script>
 
-<div id="editor" />
+<div class="flex justify-center">
+    <div on:change={renderHtml} class="w-[62rem] flex flex-col items-center justify-center p-2 rounded-xl">
+        <MarkdownEditor mode={sm ? "tabs" : "split"} {carta} bind:value />
+    </div>
+</div>
+<slot />
diff --git a/ui/src/routes/datasets/[name]/+page.svelte b/ui/src/routes/datasets/[name]/+page.svelte
index ea42829c..712dc24a 100755
--- a/ui/src/routes/datasets/[name]/+page.svelte
+++ b/ui/src/routes/datasets/[name]/+page.svelte
@@ -101,8 +101,8 @@
 				field="liked_datasets"
 				bind:version
 			/>
-
-			<div class="grid grid-cols-[auto,350px] gap-3 mt-5">
+			<hr class="sm:hidden">
+			<div class="sm:grid sm:grid-cols-[auto,350px] sm:gap-3 flex flex-col mt-5">
 				<div class="w-full overflow-auto">
 					<div class="content">
 						{#if dataset.description}
@@ -120,7 +120,8 @@
 							)}</pre>
 					{/if}
 				</div>
-				<div class="flex flex-col gap-3 text-xs">
+				<div class="flex flex-col gap-3 text-xs sm:mt-0 mt-16">
+					<hr class="sm:hidden">
 					<p>Download the dataset with the CLI:</p>
 					<div class="relative">
 						<pre class="bg-gray-200 p-3 overflow-x-auto"><button
diff --git a/ui/src/styles/carta-md.css b/ui/src/styles/carta-md.css
new file mode 100644
index 00000000..78038d76
--- /dev/null
+++ b/ui/src/styles/carta-md.css
@@ -0,0 +1,57 @@
+.carta-renderer p code {
+    @apply bg-slate-200 rounded-md py-[2px] px-1
+}
+.carta-renderer pre {
+    @apply bg-[rgb(31,41,55)] w-fit rounded-md my-2 py-[2px] px-1 text-white
+}
+
+.carta-editor{
+    @apply w-[100%] max-w-[99%]
+}
+.carta-container{
+    @apply flex h-96 justify-between max-w-[100%]
+}
+.carta-renderer, .carta-input {
+    @apply w-max max-h-[95%]
+}
+.carta-renderer ol {
+    @apply list-decimal pl-6
+}
+.carta-renderer ul {
+    @apply list-disc pl-6
+}
+
+
+.carta-renderer h1 {
+    @apply text-5xl
+}
+.carta-renderer h2 {
+    @apply text-4xl
+
+}
+.carta-renderer h3 {
+    @apply text-3xl
+
+}
+.carta-renderer h4 {
+    @apply text-2xl
+
+}
+.carta-renderer h5 {
+    @apply text-xl
+
+}
+.carta-renderer h6 {
+    @apply text-lg
+
+}
+.carta-renderer blockquote {
+    @apply bg-gray-100 border-l-8 border-gray-300 pl-4
+
+}
+
+
+:global(.carta-font-code) {
+    font-family: '...', monospace;
+    font-size: 1.1rem;
+}
\ No newline at end of file
diff --git a/ui/src/styles/dataset.css b/ui/src/styles/dataset.css
index e7004552..3c93f3ab 100755
--- a/ui/src/styles/dataset.css
+++ b/ui/src/styles/dataset.css
@@ -16,9 +16,11 @@
 }
 
 .content ul {
-    @apply list-disc list-inside p-5;
+    @apply list-disc list-inside px-5;
+}
+.content ol {
+    @apply list-decimal list-inside px-5;
 }
-
 .content pre {
     @apply bg-gray-800 text-white p-4 rounded-lg overflow-auto;
 }
\ No newline at end of file