diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss
index 645994a4a..505dd7ee3 100644
--- a/app/assets/stylesheets/components/forms.scss
+++ b/app/assets/stylesheets/components/forms.scss
@@ -255,17 +255,24 @@ textarea.crayons-textfield.crayons-textfield--ghost {
 
 ///////////////////////////////////////////////////
 .crayons-color-selector {
+  --swatch-width: var(--su-6);
+  --swatch-height: var(--su-6);
   @extend %form-styling;
   padding: calc(0.5em - var(--border-width)) 0.5em;
   height: 40px;
 
   &::-webkit-color-swatch-wrapper {
     padding: 0;
-    height: var(--su-6);
-    width: var(--su-6);
+    width: var(--swatch-width);
+    height: var(--swatch-height);
   }
 
   &::-webkit-color-swatch {
     border: 0;
   }
+
+  &--full {
+    width: 100%;
+    --swatch-width: 100%;
+  }
 }
diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss
index ae48567b9..e294cc316 100644
--- a/app/assets/stylesheets/minimal.scss
+++ b/app/assets/stylesheets/minimal.scss
@@ -7,11 +7,9 @@
 @import 'dashboard';
 @import 'settings';
 @import 'podcast-episodes-show';
-@import 'user-profile-header';
 @import 'live';
 @import 'preact/sidebar-widget';
 @import 'preact/article-form';
-@import 'tag-edit';
 @import 'sidebar-data';
 @import 'video-collection';
 @import 'video-player';
diff --git a/app/assets/stylesheets/tag-edit.scss b/app/assets/stylesheets/tag-edit.scss
deleted file mode 100644
index f9717f88e..000000000
--- a/app/assets/stylesheets/tag-edit.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-.tag-edit-form {
-  margin-bottom: 5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.tag-edit-container {
-  margin-top: 1em;
-  max-width: 50%;
-}
-.tag-form-field {
-  margin-top: 10px;
-
-  br {
-    margin-bottom: 3px;
-  }
-}
-.tag-form-label {
-  margin-bottom: 2px;
-}
-.tag-form-text-field {
-  height: 2em;
-  width: 23em;
-  text-align: left;
-  overflow-wrap: break-word;
-  font-size: 1em;
-  resize: vertical;
-}
-.tag-area-text {
-  height: 5em;
-}
-.tag-edit-submit {
-  height: 2em;
-  text-align: center;
-  font-weight: bold;
-  font-size: 17px;
-  border-radius: 3px;
-  border: 2px solid var(--button-primary-bg-hover);
-  background: var(--button-primary-bg);
-  color: var(--button-primary-color);
-}
-.tag-edit-flash-success {
-  color: white;
-  background: #388019;
-  padding: 15px;
-}
-.tag-edit-flash-error {
-  color: white;
-  background: $red;
-  padding: 15px 15px 15px 40px;
-}
diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss
deleted file mode 100644
index 9703bf6d6..000000000
--- a/app/assets/stylesheets/user-profile-header.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-.user-profile-header {
-  padding: calc(1.4vw + 8px) 0px;
-  font-family: var(--ff-sans-serif);
-  position: relative;
-  overflow: hidden;
-  background: var(--card-bg);
-  border-radius: 3px;
-  @media screen and (min-width: 1100px) {
-    padding: 25px 0px 11px;
-  }
-  &.podcast-header {
-    background: rgb(5, 22, 32);
-    text-align: center;
-    padding: 70px 0px;
-    color: white;
-    h1 {
-      .follow-action-button {
-        font-size: 25px;
-        display: block;
-        margin: 10px auto;
-        width: 100%;
-        padding: 15px 0px;
-        @media screen and (min-width: 950px) {
-          vertical-align: 5px;
-          display: inline-block;
-          font-size: calc(1.5vw + 8px);
-          width: 280px;
-          padding: 3px 0px;
-        }
-      }
-    }
-  }
-  .user-profile-header-container,
-  .tag-or-query-header-container {
-    max-width: 96%;
-    margin: auto;
-    overflow-y: auto;
-    h1 {
-      position: relative;
-      img {
-        height: 1.5em;
-        width: 1.5em;
-        vertical-align: -0.22em;
-        margin-right: 0.15em;
-      }
-    }
-    a {
-      color: rgb(97, 97, 97);
-    }
-    .crayons-btn--outlined {
-      background: white;
-    }
-    .profile-pic-wrapper {
-      float: left;
-      width: calc(14.5vw + 60px);
-      max-width: 270px;
-      position: relative;
-      z-index: 5;
-      .profile-pic {
-        width: calc(12.2vw + 50px);
-        height: calc(12.2vw + 50px);
-        border-radius: 200px;
-        max-width: 220px;
-        max-height: 220px;
-        border: 4px solid white;
-        margin-top: 2vw;
-        background: no-repeat center center;
-        background-size: cover;
-        img {
-          height: 100%;
-          width: 100%;
-        }
-      }
-    }
-  }
-  .user-metadata-details {
-    width: 97%;
-    overflow-y: auto;
-    @media screen and (min-width: 1100px) {
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      bottom: 0px;
-      width: 370px;
-    }
-    .user-metadata-details-inner {
-      padding: 8px 0px;
-      margin-left: 5%;
-      @media screen and (min-width: 430px) {
-        font-size: 1.15em;
-        padding: 15px 15px 15px 0;
-      }
-      @media screen and (min-width: 1100px) {
-        position: absolute;
-        top: 45%;
-        transform: translateY(-45%);
-        padding: 15px 15px 15px 0;
-      }
-      .row {
-        padding: calc(5px + 0.2vw) 0px;
-        display: inline-block;
-        padding-left: 16px;
-        width: 322px;
-        max-width: 92%;
-      }
-      .key {
-        font-size: 0.7em;
-        font-weight: 800;
-        margin-bottom: 2px;
-        color: var(--card-color-tertiary);
-      }
-      .value {
-        display: inline-block;
-        font-size: 0.85em;
-        margin-bottom: 4px;
-      }
-    }
-  }
-}
diff --git a/app/views/tags/edit.html.erb b/app/views/tags/edit.html.erb
index 9f28488a6..4f68f246c 100644
--- a/app/views/tags/edit.html.erb
+++ b/app/views/tags/edit.html.erb
@@ -1,73 +1,66 @@
 <% title t("views.tags.edit.meta.title", tag: @tag.name) %>
 
-<div style="background-color:<%= @tag.bg_color_hex %>;color:<%= @tag.text_color_hex %>;">
-  <div class="tag-or-query-header-container tag-edit-tag py-8 align-center">
-    <h1><% t("views.tags.edit.heading_html", tag: link_to(@tag.name, URL.tag(@tag), style: "color: #{@tag.text_color_hex};text-decoration: underline;")) %></h1>
-    <p>
-      <%= t("views.tags.edit.markdown_html", tag: tag.code("##{@tag.name}", style: "background-color: #D2D2D2; color: black; padding: 5px; border-radius: 5px;")) %>
-    </p>
-  </div>
-</div>
-<%= form_tag("/tag/#{@tag.id}", method: :patch, class: "tag-edit-form") do %>
-  <div class="tag-edit-container">
-    <% if flash[:success] %>
-      <p class="tag-edit-flash-success">
-        <%= flash[:success] %>
-      </p>
-    <% elsif flash[:error] %>
-      <ul class="tag-edit-flash-error">
-        <% flash[:error].each do |message| %>
-          <li><%= message %></li>
-        <% end %>
-      </ul>
-    <% end %>
-    <h4>
-      <a target="_blank" rel="noopener" href="https://thepracticaldev.s3.amazonaws.com/i/cc8vz48djnhty6c31jog.png">
-        <%= t("views.tags.edit.form.example") %>
-      </a>
-    </h4>
-    <% label_i18n = ->(param) { label_tag param, t("views.tags.edit.form.#{param}.label") } %>
-    <div class="tag-form-field">
-      <%= label_tag :pretty_name %>
-      <br>
-      <%= text_field_tag "tag[pretty_name]", @tag.pretty_name, placeholder: t("views.tags.edit.form.pretty_name.placeholder"), class: "tag-form-text-field" %>
+<main id="main-content" class="crayons-layout crayons-layout--limited-m">
+  <header class="crayons-card flex items-center justify-between branded-4 p-3 pr-1 m:pr-5 m:p-6 m:pt-5" style="border-top-color: <%= Color::CompareHex.new([@tag.bg_color_hex || "#000000", @tag.text_color_hex || "#ffffff"]).brightness(0.88) %>">
+    <h1 class="crayons-title">
+      <% if @tag_model && @tag_model.pretty_name.present? %>
+        <%= @tag_model.pretty_name %>
+      <% else %>
+        <span class="opacity-50">#</span><%= @tag %>
+      <% end %>
+    </h1>
+    <div class="flex">
+      <% if current_user.has_role?(:super_admin) || current_user.has_role?(:admin) %>
+        <a href="<%= edit_admin_tag_path(@tag.id) %>" class="crayons-btn crayons-btn--ghost" data-no-instant><%= t("views.tags.edit.admin") %></a>
+      <% end %>
+      <a target="_blank" rel="noopener" href="https://admin.forem.com/docs/forem-basics/tags#editing-a-tag" class="crayons-btn crayons-btn--ghost"><%= t("views.tags.edit.help") %></a>
+      <a href="/t/<%= @tag %>" class="crayons-btn crayons-btn--ghost"><%= t("views.tags.edit.view") %></a>
     </div>
-    <div class="tag-form-field">
-      <%= label_tag :bg_color_hex %>
-      <br>
-      <%= color_field_tag "tag[bg_color_hex]", @tag.bg_color_hex.presence || "#000000", placeholder: "#000000", class: "tag-form-text-field" %>
-    </div>
-    <div class="tag-form-field">
-      <%= label_tag :text_color_hex %>
-      <br>
-      <%= color_field_tag "tag[text_color_hex]", @tag.text_color_hex.presence || "#ffffff", placeholder: "#ffffff", class: "tag-form-text-field" %>
-    </div>
-    <div class="tag-form-field">
-      <%= label_tag :short_summary %>
-      <br>
-      <%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: t("views.tags.edit.form.short_summary.placeholder"), class: "tag-form-text-field tag-area-text" %>
-    </div>
-    <div class="tag-form-field">
-      <%= label_tag :wiki_body_markdown %>
-      <br>
-      <%= text_area_tag "tag[wiki_body_markdown]", @tag.wiki_body_markdown, placeholder: t("views.tags.edit.form.wiki_body_markdown.placeholder"), class: "tag-form-text-field tag-area-text" %>
-    </div>
-    <div class="tag-form-field">
-      <%= label_tag :rules_markdown %>
-      <br>
-      <%= text_area_tag "tag[rules_markdown]", @tag.rules_markdown, placeholder: t("views.tags.edit.form.rules_markdown.placeholder"), class: "tag-form-text-field tag-area-text" %>
-    </div>
-    <div class="tag-form-field">
-      <%= submit_tag t("views.tags.edit.form.submit"), class: "tag-edit-submit" %>
-    </div>
-  </div>
-<% end %>
+  </header>
 
-<% if current_user.has_role?(:super_admin) || current_user.has_role?(:admin) %>
-  <center>
-    <h1><a href="<%= edit_admin_tag_path(@tag.id) %>" data-no-instant><%= t("views.tags.edit.admin", tag: @tag.name) %></a></h1>
-    <br />
-    <br />
-    <br />
-  </center>
-<% end %>
+  <%= form_tag("/tag/#{@tag.id}", method: :patch, class: "crayons-card p-4 m:p-6 grid gap-4") do %>
+    <% if flash[:success] %>
+      <div class="crayons-notice crayons-notice--success">
+        <%= flash[:success] %>
+      </div>
+    <% elsif flash[:error] %>
+      <div class="crayons-notice crayons-notice--danger">
+        <ul>
+          <% flash[:error].each do |message| %>
+            <li><%= message %></li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+    <% label_i18n = ->(param) { label_tag param, t("views.tags.edit.form.#{param}.label") } %>
+    <div class="crayons-field">
+      <%= label_tag :pretty_name, nil, class: "crayons-field__label" %>
+      <%= text_field_tag "tag[pretty_name]", @tag.pretty_name, placeholder: t("views.tags.edit.form.pretty_name.placeholder"), class: "crayons-textfield" %>
+    </div>
+    <div class="flex gap-4">
+      <div class="crayons-field flex-1">
+        <%= label_tag :bg_color_hex, nil, class: "crayons-field__label" %>
+        <%= color_field_tag "tag[bg_color_hex]", @tag.bg_color_hex.presence || "#000000", placeholder: "#000000", class: "crayons-color-selector crayons-color-selector--full" %>
+      </div>
+      <div class="crayons-field flex-1">
+        <%= label_tag :text_color_hex, nil, class: "crayons-field__label" %>
+        <%= color_field_tag "tag[text_color_hex]", @tag.text_color_hex.presence || "#ffffff", placeholder: "#ffffff", class: "crayons-color-selector crayons-color-selector--full" %>
+      </div>
+    </div>
+    <div class="crayons-field">
+      <%= label_tag :short_summary, nil, class: "crayons-field__label" %>
+      <%= text_area_tag "tag[short_summary]", @tag.short_summary, placeholder: t("views.tags.edit.form.short_summary.placeholder"), class: "crayons-textfield" %>
+    </div>
+    <div class="crayons-field">
+      <%= label_tag :wiki_body_markdown, nil, class: "crayons-field__label" %>
+      <%= text_area_tag "tag[wiki_body_markdown]", @tag.wiki_body_markdown, placeholder: t("views.tags.edit.form.wiki_body_markdown.placeholder"), class: "crayons-textfield" %>
+    </div>
+    <div class="crayons-field">
+      <%= label_tag :rules_markdown, nil, class: "crayons-field__label" %>
+      <%= text_area_tag "tag[rules_markdown]", @tag.rules_markdown, placeholder: t("views.tags.edit.form.rules_markdown.placeholder"), class: "crayons-textfield" %>
+    </div>
+    <div>
+      <%= submit_tag t("views.tags.edit.form.submit"), class: "crayons-btn" %>
+    </div>
+  <% end %>
+</main>
diff --git a/config/locales/views/tags/en.yml b/config/locales/views/tags/en.yml
index 92e289a7e..23adbfd54 100644
--- a/config/locales/views/tags/en.yml
+++ b/config/locales/views/tags/en.yml
@@ -12,9 +12,10 @@ en:
         meta:
           title: Edit %{tag}
         heading_html: " Editing: %{tag}"
-        admin: "%{tag}'s admin page"
+        admin: "Admin"
+        help: "Help"
+        view: "View"
         form:
-          example: Click here to see an example of attributes.
           pretty_name:
             label: Pretty name
             placeholder: This is the name at the top of the show page.
@@ -31,8 +32,7 @@ en:
           rules_markdown:
             label: Rules markdown
             placeholder: Optional - Can be used for challenges, i.e. submission guidelines.
-          submit: SAVE CHANGES
-        markdown_html: "%{tag} is the name of the tag used in Markdown."
+          submit: Save
       follow: Follow
       following_tags: Following tags
       moderator:
diff --git a/config/locales/views/tags/fr.yml b/config/locales/views/tags/fr.yml
index ef9b49f2c..e7c9975e3 100644
--- a/config/locales/views/tags/fr.yml
+++ b/config/locales/views/tags/fr.yml
@@ -12,9 +12,10 @@ fr:
         meta:
           title: Edit %{tag}
         heading_html: " Editing: %{tag}"
-        admin: "%{tag}'s admin page"
+        admin: "Admin"
+        help: "Help"
+        view: "View"
         form:
-          example: Click here to see an example of attributes.
           pretty_name:
             label: Pretty name
             placeholder: This is the name at the top of the show page.
@@ -31,7 +32,7 @@ fr:
           rules_markdown:
             label: Rules markdown
             placeholder: Optional - Can be used for challenges, i.e. submission guidelines.
-          submit: SAVE CHANGES
+          submit: Save
         markdown_html: "%{tag} is the name of the tag used in Markdown."
       follow: Suivre
       following_tags: Sujets suivis
diff --git a/spec/requests/tags_spec.rb b/spec/requests/tags_spec.rb
index fd6f5bdc3..105fc75fc 100644
--- a/spec/requests/tags_spec.rb
+++ b/spec/requests/tags_spec.rb
@@ -55,7 +55,7 @@ RSpec.describe "Tags", type: :request, proper_status: true do
     it "allows super admins" do
       sign_in super_admin
       get "/t/#{tag}/edit"
-      expect(response.body).to include("Click here to see an example of attributes.")
+      expect(response.body).to include(I18n.t("views.tags.edit.help"))
     end
 
     context "when user is a tag moderator" do
@@ -66,7 +66,7 @@ RSpec.describe "Tags", type: :request, proper_status: true do
 
       it "allows authorized tag moderators" do
         get "/t/#{tag}/edit"
-        expect(response.body).to include("Click here to see an example of attributes.")
+        expect(response.body).to include(I18n.t("views.tags.edit.help"))
       end
 
       it "does not allow moderators of one tag to edit another tag" do
diff --git a/spec/system/tags/user_updates_a_tag_spec.rb b/spec/system/tags/user_updates_a_tag_spec.rb
index e1acbd425..0cd6dc331 100644
--- a/spec/system/tags/user_updates_a_tag_spec.rb
+++ b/spec/system/tags/user_updates_a_tag_spec.rb
@@ -20,7 +20,7 @@ RSpec.describe "User updates a tag", type: :system do
       end
 
       it "defaults to black and white upon update", :aggregate_failures do
-        click_button("SAVE CHANGES")
+        click_button(I18n.t("views.tags.edit.form.submit"))
 
         tag.reload
 
@@ -41,7 +41,7 @@ RSpec.describe "User updates a tag", type: :system do
         old_bg_color_hex = tag.bg_color_hex
         old_text_color_hex = tag.text_color_hex
 
-        click_button("SAVE CHANGES")
+        click_button(I18n.t("views.tags.edit.form.submit"))
 
         expect(tag.reload.bg_color_hex).to eq(old_bg_color_hex)
         expect(tag.reload.text_color_hex).to eq(old_text_color_hex)
@@ -64,7 +64,7 @@ RSpec.describe "User updates a tag", type: :system do
       end
 
       it "defaults to black and white upon update", :aggregate_failures do
-        click_button("SAVE CHANGES")
+        click_button(I18n.t("views.tags.edit.form.submit"))
 
         tag.reload
 
@@ -86,7 +86,7 @@ RSpec.describe "User updates a tag", type: :system do
         old_bg_color_hex = tag.bg_color_hex
         old_text_color_hex = tag.text_color_hex
 
-        click_button("SAVE CHANGES")
+        click_button(I18n.t("views.tags.edit.form.submit"))
 
         expect(tag.reload.bg_color_hex).to eq(old_bg_color_hex)
         expect(tag.reload.text_color_hex).to eq(old_text_color_hex)