diff --git a/core/assets/css/app.css b/core/assets/css/app.css
index 3d5a4809f..51580f343 100644
--- a/core/assets/css/app.css
+++ b/core/assets/css/app.css
@@ -4,6 +4,74 @@
 
 @tailwind utilities;
 
+@layer base {
+  trix-editor {
+    @apply text-bodylarge font-body w-full border-0;
+  }
+  
+  trix-editor h1 {
+    @apply text-title3 font-title3 mb-8;
+  }
+  
+  trix-editor a:not(.no-underline) {
+    @apply text-primary underline cursor-pointer;
+  }
+  
+  trix-editor a:visited {
+    @apply text-primary;
+  } 
+  
+  trix-editor ul {
+    list-style: none; /* Remove default bullets */
+  }
+  
+  trix-editor ul li::before {
+    @apply text-tertiary/0;
+    vertical-align: center;
+    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
+    display: inline-block; /* Needed to add space between the bullet and the text */
+    width: 30px; /* Also needed for space (tweak if needed) */
+    margin-left: 6px; /* Also needed for space (tweak if needed) */
+    background-image: url(../static/images/bullit.svg); 
+    background-size:     10px 10px;
+    background-repeat:   no-repeat;
+    background-position: left center;    
+  }  
+    
+  trix-editor ol {
+    list-style: none; 
+    counter-reset: li
+  }
+
+  trix-editor ol li::before {
+    @apply text-primary font-label text-title5;
+    content: counter(li) "."; color: theme('colors.primary');
+    display: inline-block;
+    width: 30px; /* Also needed for space (tweak if needed) */
+    margin-left: 6px; /* Also needed for space (tweak if needed) */
+  }
+  
+  trix-editor ol li {
+    counter-increment: li
+  }  
+  
+  trix-editor pre {    
+    @apply text-pre font-pre text-grey2 px-4 pt-6 pb-8;
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+    white-space: pre;
+  }
+  
+  trix-editor blockquote {
+    border: 0 solid #ccc;
+    border-left-width: 0px;
+    border-left-width: 0.3em;
+    margin-left: 0.3em;
+    padding-left: 0.6em;
+  }
+}
+
 @layer utilities {
   .text-shadow {
     text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
@@ -19,6 +87,8 @@
   }
 }
 
+@import '../node_modules/trix/dist/trix.css';
+
 [x-cloak] {
   display: none !important;
 }
diff --git a/core/assets/js/app.js b/core/assets/js/app.js
index c66003216..91dc9d11a 100644
--- a/core/assets/js/app.js
+++ b/core/assets/js/app.js
@@ -33,6 +33,8 @@ import { Clipboard } from "./clipboard";
 import { DataDonationHook } from "./data_donation_hook";
 import { Port } from "./port";
 
+import Trix from "trix"
+
 window.registerAPNSDeviceToken = registerAPNSDeviceToken;
 
 window.blurHash = () => {
diff --git a/core/assets/package-lock.json b/core/assets/package-lock.json
index 19a361e48..da7d8bd82 100644
--- a/core/assets/package-lock.json
+++ b/core/assets/package-lock.json
@@ -18,6 +18,7 @@
         "port": "github:eyra/port#v1.0.0",
         "stringify": "^5.2.0",
         "topbar": "^0.1.4",
+        "trix": "^2.0.5",
         "workbox-precaching": "^6.1.5",
         "workbox-routing": "^6.1.5",
         "workbox-strategies": "^6.1.5"
@@ -13454,6 +13455,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/trix": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/trix/-/trix-2.0.5.tgz",
+      "integrity": "sha512-OiCbDf17F7JahEwhyL1MvK9DxAAT1vkaW5sn+zpwfemZAcc4RfQB4ku18/1mKP58LRwBhjcy+6TBho7ciXz52Q=="
+    },
     "node_modules/trough": {
       "version": "1.0.5",
       "dev": true,
@@ -23663,6 +23669,11 @@
       "version": "3.0.1",
       "dev": true
     },
+    "trix": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/trix/-/trix-2.0.5.tgz",
+      "integrity": "sha512-OiCbDf17F7JahEwhyL1MvK9DxAAT1vkaW5sn+zpwfemZAcc4RfQB4ku18/1mKP58LRwBhjcy+6TBho7ciXz52Q=="
+    },
     "trough": {
       "version": "1.0.5",
       "dev": true
diff --git a/core/assets/package.json b/core/assets/package.json
index 10b2f9411..c4b110956 100644
--- a/core/assets/package.json
+++ b/core/assets/package.json
@@ -19,6 +19,7 @@
     "port": "github:eyra/port#v1.0.0",
     "stringify": "^5.2.0",
     "topbar": "^0.1.4",
+    "trix": "^2.0.5",
     "workbox-precaching": "^6.1.5",
     "workbox-routing": "^6.1.5",
     "workbox-strategies": "^6.1.5"
diff --git a/core/assets/tailwind.config.js b/core/assets/tailwind.config.js
index d7deef92b..80496c2e7 100644
--- a/core/assets/tailwind.config.js
+++ b/core/assets/tailwind.config.js
@@ -164,6 +164,7 @@ module.exports = {
         hint: ["Finador-LightOblique", "sans-serif"],
         tablehead: ["Finador-Bold", "sans-serif"],
         tablerow: ["Finador-Regular", "sans-serif"],
+        pre: ["Finador-Light", "sans-serif"],
       },
       fontSize: {
         title0: ["64px", "68px"],
@@ -193,6 +194,7 @@ module.exports = {
         hint: ["20px", "24px"],
         tablehead: ["14px", "16px"],
         tablerow: ["14px", "16px"],
+        pre: ["24px", "30px"],
       },
       minWidth: {
         "1/2": "50%",
diff --git a/core/frameworks/pixel/components/form.ex b/core/frameworks/pixel/components/form.ex
index 2d70c2d65..d78463e70 100644
--- a/core/frameworks/pixel/components/form.ex
+++ b/core/frameworks/pixel/components/form.ex
@@ -337,7 +337,7 @@ defmodule Frameworks.Pixel.Form do
     field_id = String.to_atom(input_id(form, field))
 
     input_static_class =
-      "#{field_tag(@input)} field-input text-grey1 text-bodymedium font-body pl-3 pt-2 w-full h-64 border-2 focus:outline-none rounded"
+      "#{field_tag(@input)} field-input text-grey1 text-bodymedium font-body pl-3 pt-2 w-full border-2 focus:outline-none rounded"
 
     input_dynamic_class = "border-grey3"
     active_color = active_input_color(assigns)
@@ -365,6 +365,13 @@ defmodule Frameworks.Pixel.Form do
       extra_space={false}
     >
       <textarea
+        id={"#{@field_id}_textarea"}
+        name={"#{@field_name}_textarea"}
+        class="hidden"
+        phx-target={@target}
+        phx-debounce={@debounce}
+      ><%= @field_value %></textarea>
+      <div
         id={@field_id}
         name={@field_name}
         class={[@input_static_class, @input_dynamic_class]}
@@ -372,9 +379,12 @@ defmodule Frameworks.Pixel.Form do
         __eyra_field_has_errors={@has_errors}
         __eyra_field_static_class={@input_static_class}
         __eyra_field_active_color={@active_color}
-        phx-target={@target}
-        phx-debounce={@debounce}
-      ><%= @field_value %></textarea>
+        phx-update="ignore">
+        <trix-editor
+          phx-debounce={@debounce}
+          input={"#{@field_id}_textarea"}>
+        </trix-editor>
+      </div>
     </.field>
     """
   end