diff --git a/app/assets/javascripts/admin.js b/app/assets/javascripts/admin.js
index b40ef6990a..ac2689fb50 100644
--- a/app/assets/javascripts/admin.js
+++ b/app/assets/javascripts/admin.js
@@ -11,4 +11,5 @@
 //= require admin/category-order
 //= require admin/censor-rules
 //= require admin/holidays
+//= require admin/notes
 //= require jquery_ujs
diff --git a/app/assets/javascripts/admin/notes.js b/app/assets/javascripts/admin/notes.js
new file mode 100644
index 0000000000..6d8c766c9d
--- /dev/null
+++ b/app/assets/javascripts/admin/notes.js
@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var selectElement = document.getElementById('note_style');
+  var bodyInput = document.getElementById('bodyInput');
+  var richBodyInput = document.getElementById('richBodyInput');
+
+  function updateBodyVisibility() {
+    if (selectElement.value === 'original') {
+      bodyInput.style.display = 'block';
+      richBodyInput.style.display = 'none';
+    } else {
+      bodyInput.style.display = 'none';
+      richBodyInput.style.display = 'block';
+    }
+  }
+
+  selectElement.addEventListener('change', updateBodyVisibility);
+
+  updateBodyVisibility();
+});
diff --git a/app/assets/stylesheets/actiontext.css b/app/assets/stylesheets/actiontext.css
new file mode 100644
index 0000000000..b7e9e58575
--- /dev/null
+++ b/app/assets/stylesheets/actiontext.css
@@ -0,0 +1,35 @@
+/*
+ * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+ * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+ * inclusion directly in any other asset bundle and remove this file.
+ *
+ *= require trix
+*/
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}
+
+.trix-button-group--file-tools {
+  display: none !important;
+}
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index c2f1cb9726..c1e7df9d91 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -1,3 +1,5 @@
+//= require "actiontext"
+
 /* As we're namespacing bootstrap to class admin, which is applied to the body
 element in the admin interface (no id or class allowed on the HTML element
 in HTML 4.01) and to the navbar also, so it can be styled with bootstrap
diff --git a/app/assets/stylesheets/responsive/_notes_layout.scss b/app/assets/stylesheets/responsive/_notes_layout.scss
index 1398cb7719..776fca8d1f 100644
--- a/app/assets/stylesheets/responsive/_notes_layout.scss
+++ b/app/assets/stylesheets/responsive/_notes_layout.scss
@@ -1,20 +1,21 @@
 #notes {
-  // Variables to keep consistency speacilly with the spacing.
+  // Variables to keep consistency specially with the spacing.
   $padding-x: 1em;
-  $border: 1px solid rgba(0, 0, 0, 0.1);
+  $border: 1px solid rgba(0, 0, 0, 0);
+  $border-top-size: 8px;
 
-  padding: 0 $padding-x;
+  padding: $border-top-size $padding-x 0;
   margin-bottom: 2em;
 
-  border-top: 8px solid $primary-color;
-
-  article {
+  .note {
     margin: 0 -#{$padding-x};
     padding: $padding-x $padding-x;
     border: $border;
-    border-top: none;
     word-break: break-word;
 
+    &:first-child { box-shadow: 0 -#{$border-top-size} 0 0 rgba(0, 0, 0, 0); }
+    border-top-width: 0;
+
     h1, h2, h3, h4, h5, h6 {
       margin-bottom: 0.5em;
       margin-top: 0;
diff --git a/app/assets/stylesheets/responsive/_notes_styles.scss b/app/assets/stylesheets/responsive/_notes_styles.scss
index 0f4e3aa93d..2faaf5c90e 100644
--- a/app/assets/stylesheets/responsive/_notes_styles.scss
+++ b/app/assets/stylesheets/responsive/_notes_styles.scss
@@ -1,7 +1,61 @@
+$note-text:          $oil;
+$note-bg:            lighten($primary-color, 60%);
+$note-border:        $primary-color;
+
+$note-red-text:      darken($alert-color, 10%);
+$note-red-bg:        lighten($alert-color, 40%);
+$note-red-border:    $alert-color;
+
+$note-green-text:    darken($success-color, 10%);
+$note-green-bg:      lighten($success-color, 40%);
+$note-green-border:  $success-color;
+
+$note-blue-text:     darken($primary-color, 10%);
+$note-blue-bg:       lighten($primary-color, 60%);
+$note-blue-border:   $primary-color;
+
+$note-yellow-text:   darken($warning-color, 10%);
+$note-yellow-bg:     lighten($warning-color, 40%);
+$note-yellow-border: $warning-color;
+
+$border-top-size: 8px;
+
 #notes {
-  background-color: lighten($primary-color, 60%);
+  .note {
+    color: $note-text;
+    background-color: $note-bg;
+    border-color: rgba(0, 0, 0, 0.1);
+
+    &:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-border; }
+
+    &.note--style-red {
+      color: $note-red-text;
+      background-color: $note-red-bg;
+      &:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-red-border; }
+      h1 { color: $note-red-text; }
+    }
+
+    &.note--style-green {
+      color: $note-green-text;
+      background-color: $note-green-bg;
+      &:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-green-border; }
+      h1 { color: $note-green-text; }
+    }
+
+    &.note--style-blue {
+      color: $note-blue-text;
+      background-color: $note-blue-bg;
+      &:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-blue-border; }
+      h1 { color: $note-blue-text; }
+    }
+
+    &.note--style-yellow {
+      color: $note-yellow-text;
+      background-color: $note-yellow-bg;
+      &:first-child { box-shadow: 0 -#{$border-top-size} 0 0 $note-yellow-border; }
+      h1 { color: $note-yellow-text; }
+    }
 
-  article {
     h1 {
       font-size: 1.5em;
     }
@@ -21,5 +75,14 @@
       font-size: 0.9em;
       text-transform: uppercase;
     }
+
+    &.note--style-red,
+    &.note--style-green,
+    &.note--style-blue,
+    &.note--style-yellow {
+      h1 {
+        font-size: 1.3em;
+      }
+    }
   }
 }
diff --git a/app/controllers/admin/notes_controller.rb b/app/controllers/admin/notes_controller.rb
index d09f834a3c..be7e3129ac 100644
--- a/app/controllers/admin/notes_controller.rb
+++ b/app/controllers/admin/notes_controller.rb
@@ -54,8 +54,8 @@ def scope
   def note_params
     translatable_params(
       params.require(:note),
-      translated_keys: [:locale, :body],
-      general_keys: [:notable_tag, :notable_id, :notable_type]
+      translated_keys: [:locale, :body, :rich_body],
+      general_keys: [:notable_tag, :notable_id, :notable_type, :style]
     )
   end
 end
diff --git a/app/helpers/notes_helper.rb b/app/helpers/notes_helper.rb
index 0ae51ccd91..e43d7cae63 100644
--- a/app/helpers/notes_helper.rb
+++ b/app/helpers/notes_helper.rb
@@ -1,15 +1,20 @@
 module NotesHelper
+  def note_as_html(note, batch: false)
+    allowed_tags = batch ? batch_notes_allowed_tags : notes_allowed_tags
+    content = note.original_style? ? note.body : note.rich_body.to_trix_html
+    sanitize(content, tags: allowed_tags)
+  end
+
   def render_notes(notes, batch: false, **options)
     return unless notes.present?
 
-    allowed_tags = batch ? batch_notes_allowed_tags : notes_allowed_tags
-
     tag.aside(**options.merge(id: 'notes')) do
-      notes.each do |note|
+      Note.sort(notes).each do |note|
         note_classes = ['note']
+        note_classes << "note--style-#{note.style}"
         note_classes << "tag-#{note.notable_tag}" if note.notable_tag
 
-        concat tag.article sanitize(note.body, tags: allowed_tags),
+        concat tag.article note_as_html(note, batch: batch),
                            id: dom_id(note),
                            class: note_classes
       end
diff --git a/app/models/note.rb b/app/models/note.rb
index ff8a5bc1b5..bdc97080eb 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -1,5 +1,5 @@
 # == Schema Information
-# Schema version: 20220720085105
+# Schema version: 20240227080436
 #
 # Table name: notes
 #
@@ -9,6 +9,7 @@
 #  notable_tag  :string
 #  created_at   :datetime         not null
 #  updated_at   :datetime         not null
+#  style        :string           default("original"), not null
 #  body         :text
 #
 
@@ -16,16 +17,47 @@ class Note < ApplicationRecord
   include AdminColumn
 
   translates :body
+  translates :rich_body, touch: true
   include Translatable
+  delegate :rich_body, :rich_body=, :rich_body?, to: :translation
+  after_save { rich_body.save if rich_body.changed? }
+
+  cattr_accessor :default_style, default: 'original'
+  cattr_accessor :style_labels, default: {
+    '🔵 Blue': 'blue',
+    '🔴 Red': 'red',
+    '🟢 Green': 'green',
+    '🟡 Yellow': 'yellow',
+    'Original': 'original'
+  }
+
+  enum :style, Note.style_labels.values.index_by(&:itself),
+               default: Note.default_style,
+               suffix: true
 
   belongs_to :notable, polymorphic: true
 
-  validates :body, presence: true
+  validates :body, presence: true, if: ->(n) { n.original_style? }
+  validates :rich_body, presence: true, unless: ->(n) { n.original_style? }
+  validates :style, presence: true
   validates :notable_or_notable_tag, presence: true
 
+  def self.sort(notes)
+    notes.sort_by! { Note.style_labels.values.index(_1.style) }
+  end
+
+  def to_plain_text
+    b = original_style? ? ActionText::Fragment.wrap(body) : rich_body
+    b.to_plain_text
+  end
+
   private
 
   def notable_or_notable_tag
     notable || notable_tag
   end
+
+  class Translation # :nodoc:
+    has_rich_text :rich_body
+  end
 end
diff --git a/app/models/public_body.rb b/app/models/public_body.rb
index 151a9aeb96..7d5f0073bb 100644
--- a/app/models/public_body.rb
+++ b/app/models/public_body.rb
@@ -662,11 +662,11 @@ def self.extract_domain_from_email(email)
   end
 
   def notes
-    all_notes
+    Note.sort(all_notes)
   end
 
   def notes_as_string
-    notes.map(&:body).join(' ')
+    notes.map(&:to_plain_text).join(' ')
   end
 
   def has_notes?
diff --git a/app/views/active_storage/blobs/_blob.html.erb b/app/views/active_storage/blobs/_blob.html.erb
new file mode 100644
index 0000000000..49ba357dd1
--- /dev/null
+++ b/app/views/active_storage/blobs/_blob.html.erb
@@ -0,0 +1,14 @@
+<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
+  <% if blob.representable? %>
+    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
+  <% end %>
+
+  <figcaption class="attachment__caption">
+    <% if caption = blob.try(:caption) %>
+      <%= caption %>
+    <% else %>
+      <span class="attachment__name"><%= blob.filename %></span>
+      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
+    <% end %>
+  </figcaption>
+</figure>
diff --git a/app/views/admin/notes/_form.html.erb b/app/views/admin/notes/_form.html.erb
index 073586b65c..79320f2e90 100644
--- a/app/views/admin/notes/_form.html.erb
+++ b/app/views/admin/notes/_form.html.erb
@@ -11,6 +11,13 @@
   <% end %>
 </div>
 
+<div class="control-group">
+  <%= f.label :style, class: 'control-label' %>
+  <div class="controls">
+    <%= f.select :style, Note.style_labels %>
+  </div>
+</div>
+
 <% f.translated_fields do |t| %>
   <%= render partial: 'locale_fields', locals: { t: t } %>
 <% end %>
diff --git a/app/views/admin/notes/_locale_fields.html.erb b/app/views/admin/notes/_locale_fields.html.erb
index adff16268c..df2c9f851d 100644
--- a/app/views/admin/notes/_locale_fields.html.erb
+++ b/app/views/admin/notes/_locale_fields.html.erb
@@ -1,6 +1,13 @@
-<div class="control-group">
+<div id="bodyInput" class="control-group">
   <%= t.label :body, class: 'control-label' %>
   <div class="controls">
-    <%= t.text_area :body, class: 'span6', rows: 10 %>
+    <%= t.text_area :body, class: 'input-block-level', rows: 10 %>
+  </div>
+</div>
+
+<div id="richBodyInput" class="control-group">
+  <%= t.label :rich_body, 'Body', class: 'control-label' %>
+  <div class="controls">
+    <%= t.rich_text_area :rich_body %>
   </div>
 </div>
diff --git a/app/views/admin/notes/_note.html.erb b/app/views/admin/notes/_note.html.erb
index 0607754d93..ae8da6b132 100644
--- a/app/views/admin/notes/_note.html.erb
+++ b/app/views/admin/notes/_note.html.erb
@@ -2,7 +2,7 @@
   <div class="accordion-heading accordion-toggle row">
     <span class="item-title span6">
       <%= link_to chevron_right, "##{dom_id(note)}", data: { toggle: 'collapse', parent: 'notes' } %>
-      <%= link_to(note.body, edit_admin_note_path(note), title: 'view full details') %>
+      <%= link_to(note.to_plain_text, edit_admin_note_path(note), title: 'view full details') %>
     </span>
 
     <span class="item-metadata span6">
diff --git a/app/views/admin/notes/_show.html.erb b/app/views/admin/notes/_show.html.erb
index 72d28164ef..767da1a3f2 100644
--- a/app/views/admin/notes/_show.html.erb
+++ b/app/views/admin/notes/_show.html.erb
@@ -4,6 +4,7 @@
       <tr>
         <th>ID</th>
         <th>Notable ID</th>
+        <th>Style</th>
         <th>Note Body</th>
         <th>Notable type</th>
         <th>Notable tag</th>
@@ -14,7 +15,8 @@
         <tr class="<%= cycle('odd', 'even') %>">
           <td class="id"><%= h note.id %></td>
           <td class="notable_id"><%= h note.notable_id %></td>
-          <td class="body_snippet"><%= truncate(h(note.body), length: 50) %></td>
+          <td class="style"><%= note.style %></td>
+          <td class="body_snippet"><%= truncate(note.to_plain_text, length: 50) %></td>
           <td class="notable_type"><%= h note.notable_type %></td>
           <td class="notable_tag"><%= h note.notable_tag %></td>
           <td><%= link_to "Edit", edit_admin_note_path(note) %></td>
diff --git a/app/views/layouts/action_text/contents/_content.html.erb b/app/views/layouts/action_text/contents/_content.html.erb
new file mode 100644
index 0000000000..9e3c0d0dff
--- /dev/null
+++ b/app/views/layouts/action_text/contents/_content.html.erb
@@ -0,0 +1,3 @@
+<div class="trix-content">
+  <%= yield -%>
+</div>
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 1d2bdce0a7..208c078523 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -11,6 +11,9 @@
     <%= javascript_include_tag "admin" %>
     <%= stylesheet_link_tag "admin", :title => "Main", :rel => "stylesheet" %>
     <%= stylesheet_link_tag 'admin/print', :rel => "stylesheet", :media => "print"  %>
+
+    <script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
+
     <%= render :partial => 'layouts/favicon' %>
 
   </head>
diff --git a/config/application.rb b/config/application.rb
index 25e5a6a13c..b1dee98822 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -9,7 +9,7 @@
 require "action_controller/railtie"
 require "action_mailer/railtie"
 # require "action_mailbox/engine"
-# require "action_text/engine"
+require "action_text/engine"
 require "action_view/railtie"
 # require "action_cable/engine"
 require "sprockets/railtie"
@@ -34,6 +34,7 @@ class Application < Rails::Application
     config.autoloader = :zeitwerk
     config.active_record.legacy_connection_handling = false
     config.active_support.use_rfc4122_namespaced_uuids = true
+    config.active_storage.replace_on_assign_to_many = true
 
     # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
     # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
diff --git a/db/migrate/20240227080436_add_style_to_notes.rb b/db/migrate/20240227080436_add_style_to_notes.rb
new file mode 100644
index 0000000000..23205be1b6
--- /dev/null
+++ b/db/migrate/20240227080436_add_style_to_notes.rb
@@ -0,0 +1,5 @@
+class AddStyleToNotes < ActiveRecord::Migration[7.0]
+  def change
+    add_column :notes, :style, :string, default: 'original', null: false
+  end
+end
diff --git a/db/migrate/20240228122324_create_action_text_tables.action_text.rb b/db/migrate/20240228122324_create_action_text_tables.action_text.rb
new file mode 100644
index 0000000000..df058aeceb
--- /dev/null
+++ b/db/migrate/20240228122324_create_action_text_tables.action_text.rb
@@ -0,0 +1,29 @@
+# This migration comes from action_text (originally 20180528164100)
+class CreateActionTextTables < ActiveRecord::Migration[6.0]
+  def change
+    # Use Active Record's configured type for primary and foreign keys
+    primary_key_type, foreign_key_type = primary_and_foreign_key_types
+
+    create_table :action_text_rich_texts, id: primary_key_type do |t|
+      t.string     :name, null: false
+      t.text       :body, size: :long
+      t.references :record,
+        null: false, polymorphic: true, index: false, type: foreign_key_type
+
+      t.timestamps
+
+      t.index [:record_type, :record_id, :name],
+        name: "index_action_text_rich_texts_uniqueness", unique: true
+    end
+  end
+
+  private
+
+  def primary_and_foreign_key_types
+    config = Rails.configuration.generators
+    setting = config.options[config.orm][:primary_key_type]
+    primary_key_type = setting || :primary_key
+    foreign_key_type = setting || :bigint
+    [primary_key_type, foreign_key_type]
+  end
+end
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 9388ece6a7..99cea028db 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -2,6 +2,7 @@
 
 ## Highlighted Features
 
+* Add styling option and rich text editor to the notes admin (Graeme Porteous)
 * Strengthen 2FA warning. Users *must* remember to keep this code safe (Gareth
   Rees)
 * Broaden citation type classifications to cover wider thematic areas and add
diff --git a/spec/controllers/admin/notes_controller_spec.rb b/spec/controllers/admin/notes_controller_spec.rb
index cc3e7e6235..efa7487e64 100644
--- a/spec/controllers/admin/notes_controller_spec.rb
+++ b/spec/controllers/admin/notes_controller_spec.rb
@@ -46,7 +46,7 @@
       end
 
       it 'creates the note' do
-        expect(assigns[:note].body).to eq('New body')
+        expect(assigns[:note].rich_body.to_plain_text).to eq('New body')
       end
 
       it 'sets a notice' do
@@ -64,9 +64,10 @@
         {
           id: note.id,
           note: {
-            body: 'New body',
+            rich_body: 'New body',
             notable_id: public_body.id,
-            notable_type: public_body.class.name
+            notable_type: public_body.class.name,
+            style: 'blue'
           }
         }
       end
@@ -85,7 +86,7 @@
       let(:params) do
         {
           id: note.id,
-          note: { body: 'New body', notable_tag: tag }
+          note: { rich_body: 'New body', notable_tag: tag, style: 'blue' }
         }
       end
 
@@ -96,7 +97,7 @@
 
     context 'on an unsuccessful create' do
       let(:params) do
-        { note: { body: '' } }
+        { note: { rich_body: '', style: '' } }
       end
 
       it 'assigns the note' do
@@ -144,7 +145,7 @@
       end
 
       it 'updates the note' do
-        expect(note.reload.body).to eq('New body')
+        expect(note.reload.rich_body.to_plain_text).to eq('New body')
       end
 
       it 'sets a notice' do
@@ -162,9 +163,10 @@
         {
           id: note.id,
           note: {
-            body: 'New body',
+            rich_body: 'New body',
             notable_id: public_body.id,
-            notable_type: public_body.class.name
+            notable_type: public_body.class.name,
+            style: 'blue'
           }
         }
       end
@@ -183,7 +185,7 @@
       let(:params) do
         {
           id: note.id,
-          note: { body: 'New body', notable_tag: tag }
+          note: { rich_body: 'New body', notable_tag: tag, style: 'blue' }
         }
       end
 
@@ -194,7 +196,7 @@
 
     context 'on an unsuccessful update' do
       let(:params) do
-        { id: note.id, note: { body: '' } }
+        { id: note.id, note: { rich_body: '', style: '' } }
       end
 
       it 'assigns the note' do
@@ -202,7 +204,7 @@
       end
 
       it 'does not update the note' do
-        expect(note.reload.body).not_to be_blank
+        expect(note.reload.rich_body).not_to be_blank
       end
 
       it 'renders the form again' do
diff --git a/spec/factories/notes.rb b/spec/factories/notes.rb
index b4f042430f..093e5056cc 100644
--- a/spec/factories/notes.rb
+++ b/spec/factories/notes.rb
@@ -1,5 +1,5 @@
 # == Schema Information
-# Schema version: 20220720085105
+# Schema version: 20240227080436
 #
 # Table name: notes
 #
@@ -9,14 +9,16 @@
 #  notable_tag  :string
 #  created_at   :datetime         not null
 #  updated_at   :datetime         not null
+#  style        :string           default("original"), not null
 #  body         :text
 #
 
 FactoryBot.define do
   factory :note do
-    body { 'Test note' }
+    rich_body { 'Test note' }
     association :notable, factory: :public_body
     notable_tag { 'some_tag' }
+    style { 'blue' }
 
     trait :for_public_body do
       association :notable, factory: :public_body
@@ -27,5 +29,10 @@
       notable { nil }
       notable_tag { 'foo' }
     end
+
+    trait :original do
+      body { 'Test note' }
+      style { 'original' }
+    end
   end
 end
diff --git a/spec/factories/public_bodies.rb b/spec/factories/public_bodies.rb
index 111615abb5..9b28268ae7 100644
--- a/spec/factories/public_bodies.rb
+++ b/spec/factories/public_bodies.rb
@@ -52,7 +52,7 @@
       end
 
       concrete_notes do
-        [association(:note, body: note_body)]
+        [association(:note, rich_body: note_body)]
       end
     end
 
diff --git a/spec/fixtures/notes.yml b/spec/fixtures/notes.yml
index 2765719141..1218a3a11e 100644
--- a/spec/fixtures/notes.yml
+++ b/spec/fixtures/notes.yml
@@ -1,5 +1,5 @@
 # == Schema Information
-# Schema version: 20220928093559
+# Schema version: 20240227080436
 #
 # Table name: notes
 #
@@ -9,6 +9,7 @@
 #  notable_tag  :string
 #  created_at   :datetime         not null
 #  updated_at   :datetime         not null
+#  style        :string           default("original"), not null
 #  body         :text
 #
 
diff --git a/spec/helpers/notes_helper_spec.rb b/spec/helpers/notes_helper_spec.rb
index 76d91fec92..c09a039a5f 100644
--- a/spec/helpers/notes_helper_spec.rb
+++ b/spec/helpers/notes_helper_spec.rb
@@ -3,36 +3,61 @@
 RSpec.describe NotesHelper do
   include NotesHelper
 
-  describe '#render_notes' do
-    let(:note) { FactoryBot.build(:note, body: '<h1>title</h1>') }
+  describe '#note_as_html' do
+    let(:note) { FactoryBot.build(:note, rich_body: '<h1>title</h1>') }
+
+    it { expect(note_as_html(note)).to eq('<h1>title</h1>') }
+
+    context 'with original style note' do
+      let(:note) { FactoryBot.build(:note, :original, body: '<h1>title</h1>') }
+      it { expect(note_as_html(note)).to eq('<h1>title</h1>') }
+    end
 
     context 'when not a batch' do
-      subject { render_notes([note], class: 'notes') }
+      subject { note_as_html(note, batch: false) }
 
       it 'allows more tags' do
-        is_expected.to eq(
-          '<aside class="notes" id="notes">' \
-            '<article id="new_note" class="note tag-some_tag">' \
-              '<h1>title</h1>' \
-            '</article>' \
-          '</aside>'
-        )
+        is_expected.to eq('<h1>title</h1>')
       end
     end
 
     context 'when batch' do
-      subject { render_notes([note], batch: true, class: 'notes') }
+      subject { note_as_html(note, batch: true) }
 
       it 'removes more tags' do
-        is_expected.to eq(
-          '<aside class="notes" id="notes">' \
-            '<article id="new_note" class="note tag-some_tag">' \
-              'title' \
-            '</article>' \
-          '</aside>'
-        )
+        is_expected.to eq('title')
       end
     end
+  end
+
+  describe '#render_notes' do
+    let(:note) { FactoryBot.build(:note, rich_body: '<h1>title</h1>') }
+
+    it 'wrap notes in aside and article tags' do
+      expect(self).to receive(:note_as_html).with(note, batch: false).
+        and_return('foo')
+
+      expect(render_notes([note], class: 'notes')).to eq(
+        '<aside class="notes" id="notes">' \
+          '<article id="new_note" class="note note--style-blue tag-some_tag">' \
+            'foo' \
+          '</article>' \
+        '</aside>'
+      )
+    end
+
+    it 'pass batch argument to note_as_html' do
+      expect(self).to receive(:note_as_html).with(note, batch: true).
+        and_return('bar')
+
+      expect(render_notes([note], batch: true)).to eq(
+        '<aside id="notes">' \
+          '<article id="new_note" class="note note--style-blue tag-some_tag">' \
+            'bar' \
+          '</article>' \
+        '</aside>'
+      )
+    end
 
     context 'without notes' do
       subject { render_notes([], class: 'notes') }
diff --git a/spec/models/note_spec.rb b/spec/models/note_spec.rb
index 0b82d4d852..521b62bb0d 100644
--- a/spec/models/note_spec.rb
+++ b/spec/models/note_spec.rb
@@ -1,5 +1,5 @@
 # == Schema Information
-# Schema version: 20220720085105
+# Schema version: 20240227080436
 #
 # Table name: notes
 #
@@ -9,6 +9,7 @@
 #  notable_tag  :string
 #  created_at   :datetime         not null
 #  updated_at   :datetime         not null
+#  style        :string           default("original"), not null
 #  body         :text
 #
 
@@ -20,11 +21,30 @@
   describe 'validations' do
     specify { expect(note).to be_valid }
 
-    it 'requires body' do
-      note.body = nil
+    context 'original style' do
+      let(:note) { FactoryBot.build(:note, :original) }
+
+      it 'requires body' do
+        note.body = nil
+        expect(note).not_to be_valid
+      end
+    end
+
+    it 'requires rich body' do
+      note.rich_body = nil
+      expect(note).not_to be_valid
+    end
+
+    it 'requires style' do
+      note.style = nil
       expect(note).not_to be_valid
     end
 
+    it 'requires known style' do
+      expect { note.style = 'invalid' }.
+        to raise_error(ArgumentError, "'invalid' is not a valid style")
+    end
+
     it 'requires notable or notable_tag' do
       note.notable = nil
       note.notable_tag = nil
@@ -43,10 +63,14 @@
   describe 'translations' do
     before { note.save! }
 
-    it 'adds translated body' do
-      expect(note.body_translations).to_not include(es: 'body')
-      AlaveteliLocalization.with_locale(:es) { note.body = 'body' }
-      expect(note.body_translations).to include(es: 'body')
+    def plain_body
+      note.rich_body_translations.transform_values(&:to_plain_text)
+    end
+
+    it 'adds translated rich_body' do
+      expect(plain_body).to_not include(es: 'content')
+      AlaveteliLocalization.with_locale(:es) { note.rich_body = 'content' }
+      expect(plain_body).to include(es: 'content')
     end
   end
 
@@ -59,4 +83,35 @@
       end
     end
   end
+
+  describe '.sort' do
+    let(:original) { FactoryBot.build(:note, :original) }
+    let(:red) { FactoryBot.build(:note, style: 'red') }
+    let(:green) { FactoryBot.build(:note, style: 'green') }
+    let(:blue_1) { FactoryBot.build(:note, style: 'blue') }
+    let(:blue_2) { FactoryBot.build(:note, style: 'blue') }
+    let(:yellow) { FactoryBot.build(:note, style: 'yellow') }
+
+    subject do
+      described_class.sort([yellow, blue_1, green, red, original, blue_2])
+    end
+
+    it 'sorts based on enum value index' do
+      is_expected.to match_array([original, blue_1, blue_2, red, green, yellow])
+    end
+  end
+
+  describe '#to_plain_text' do
+    subject { note.to_plain_text }
+
+    context 'with original style note' do
+      let(:note) { FactoryBot.build(:note, :original, body: '<h1>title</h1>') }
+      it { is_expected.to eq('title') }
+    end
+
+    context 'with styled note' do
+      let(:note) { FactoryBot.build(:note, rich_body: '<h1>title</h1>') }
+      it { is_expected.to eq('title') }
+    end
+  end
 end
diff --git a/spec/models/public_body_spec.rb b/spec/models/public_body_spec.rb
index db0a1f8788..3307bcbf2c 100644
--- a/spec/models/public_body_spec.rb
+++ b/spec/models/public_body_spec.rb
@@ -597,11 +597,12 @@
 
     let!(:concrete_note) do
       FactoryBot.create(:note, :for_public_body,
-                        body: 'bar', notable: public_body)
+                        rich_body: 'bar', notable: public_body)
     end
 
     let!(:tagged_note) do
-      FactoryBot.create(:note, :tagged, body: 'baz', notable_tag: 'important')
+      FactoryBot.create(:note, :tagged,
+                        rich_body: 'baz', notable_tag: 'important')
     end
 
     it 'concaterates note bodies' do