diff --git a/app/views/admin/listing_categories/_form.html.erb b/app/views/admin/listing_categories/_form.html.erb
index cb0736642..0da78c02a 100644
--- a/app/views/admin/listing_categories/_form.html.erb
+++ b/app/views/admin/listing_categories/_form.html.erb
@@ -1,30 +1,32 @@
-<div class="form-group">
-  <%= label_tag :name, "Name" %>
-  <%= text_field_tag :name, @listing_category.name, class: "form-control" %>
-</div>
+<div class="flex flex-col gap-4">
+  <div class="crayons-field">
+    <%= label_tag :name, "Name", class: "crayons-field_label" %>
+    <%= text_field_tag :name, @listing_category.name, class: "crayons-textfield" %>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :cost, "Cost" %>
-  <%= number_field_tag :cost, @listing_category.cost, class: "form-control" %>
-</div>
+  <div class="crayons-field">
+    <%= label_tag :cost, "Cost", class: "crayons-field_label" %>
+    <%= number_field_tag :cost, @listing_category.cost, class: "crayons-textfield" %>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :rules, "Rules" %>
-  <%= text_field_tag :rules, @listing_category.rules, class: "form-control" %>
-</div>
+  <div class="crayons-field">
+    <%= label_tag :rules, "Rules", class: "crayons-field_label" %>
+    <%= text_field_tag :rules, @listing_category.rules, class: "crayons-textfield" %>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :slug, "Slug" %>
-  <%= text_field_tag :slug, @listing_category.slug, class: "form-control" %>
-</div>
+  <div class="crayons-field">
+    <%= label_tag :slug, "Slug", class: "crayons-field_label" %>
+    <%= text_field_tag :slug, @listing_category.slug, class: "crayons-textfield" %>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :social_preview_color, "Social preview color" %>
-  <%= text_field_tag :social_preview_color, @listing_category.social_preview_color || "#000000", class: "crayons-textfield", placeholder: "#000000", data: { color_picker: true, label_text: "Social preview color" } %>
-</div>
+  <div class="crayons-field">
+    <%= label_tag :social_preview_color, "Social preview color", class: "crayons-field_label" %>
+    <%= text_field_tag :social_preview_color, @listing_category.social_preview_color || "#000000", class: "crayons-textfield", placeholder: "#000000", data: { color_picker: true, label_text: "Social preview color" } %>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :social_preview_description, "Description" %>
-  <%= text_area_tag :social_preview_description, @listing_category.social_preview_description, size: "100x10", class: "form-control" %>
+  <div class="crayons-field">
+    <%= label_tag :social_preview_description, "Description", class: "crayons-field_label" %>
+    <%= text_area_tag :social_preview_description, @listing_category.social_preview_description, size: "100x10", class: "crayons-textfield" %>
+  </div>
 </div>
 <%= javascript_packs_with_chunks_tag "enhanceColorPickers", defer: true %>
diff --git a/app/views/admin/listing_categories/edit.html.erb b/app/views/admin/listing_categories/edit.html.erb
index 0c245a81c..b664a45b4 100644
--- a/app/views/admin/listing_categories/edit.html.erb
+++ b/app/views/admin/listing_categories/edit.html.erb
@@ -2,6 +2,6 @@
 <div class="crayons-card p-6">
   <%= form_for([:admin, @listing_category], method: :patch) do %>
     <%= render "form" %>
-    <%= submit_tag "Update Listing Category", class: "btn btn-primary" %>
+    <%= submit_tag "Update Listing Category", class: "crayons-btn crayons-btn--primary mt-4" %>
   <% end %>
 </div>
diff --git a/app/views/admin/listing_categories/new.html.erb b/app/views/admin/listing_categories/new.html.erb
index 4ad040cbb..98d0b7f8d 100644
--- a/app/views/admin/listing_categories/new.html.erb
+++ b/app/views/admin/listing_categories/new.html.erb
@@ -2,6 +2,6 @@
 <div class="crayons-card p-6">
   <%= form_for([:admin, @listing_category], method: :post) do %>
     <%= render "form" %>
-    <%= submit_tag "Create Listing Category", class: "btn btn-primary" %>
+    <%= submit_tag "Create Listing Category", class: "crayons-btn crayons-btn--primary mt-4" %>
   <% end %>
 </div>
diff --git a/app/views/admin/listings/edit.html.erb b/app/views/admin/listings/edit.html.erb
index b0694e1c4..75330dc90 100644
--- a/app/views/admin/listings/edit.html.erb
+++ b/app/views/admin/listings/edit.html.erb
@@ -2,45 +2,47 @@
   <h2 class="crayons-title mb-4">Edit</h2>
 
   <div class="ml-auto flex">
-    <%= link_to "Remove", url_for(action: :destroy, id: @listing.id), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger mr-2" %>
+    <%= link_to "Remove", url_for(action: :destroy, id: @listing.id), method: :delete, data: { confirm: "Are you sure?" }, class: "crayons-btn crayons-btn--danger mr-2" %>
 
     <%= form_with model: [:admin, @listing], method: :patch do |f| %>
       <input type="hidden" name="listing[action]" value="bump" />
-      <%= f.submit "Bump Listing ⏫", class: "btn btn-secondary" %>
+      <%= f.submit "Bump Listing ⏫", class: "crayons-btn crayons-btn--secondary" %>
     <% end %>
 
-    <%= link_to "View", "/listings/#{@listing.category}/#{@listing.slug}", target: "_blank", rel: "noopener", class: "btn btn-primary ml-2" %>
+    <%= link_to "View", "/listings/#{@listing.category}/#{@listing.slug}", target: "_blank", rel: "noopener", class: "crayons-btn crayons-btn--primary ml-2" %>
 
   </div>
 </header>
 
 <div class="crayons-card p-6">
   <%= form_with model: [:admin, @listing], method: :patch, local: true do |form| %>
-    <div class="form-group">
-      <%= form.label :title %>
-      <%= form.text_field :title, size: 100, maxlength: 128, class: "form-control" %>
+    <div class="flex flex-col gap-4">
+      <div class="crayons-field">
+        <%= form.label :title, class: "crayons-field__label"%>
+        <%= form.text_field :title, size: 100, maxlength: 128, class: "crayons-textfield" %>
+      </div>
+      <div class="crayons-field">
+        <%= form.label :body_markdown, class: "crayons-field__label" %>
+        <%= form.text_area :body_markdown, cols: 40, rows: 15, maxlength: 400, class: "crayons-textfield" %>
+      </div>
+      <div class="crayons-field">
+        <%= form.label :tag_list, class: "crayons-field__label" %>
+        <i class="fs-s">Comma separated, one space, 8 tags max</i>
+        <%= form.text_field :tag_list, value: @listing.cached_tag_list, size: 100, class: "crayons-textfield" %>
+      </div>
+      <div class="crayons-field">
+        <%= form.label :organization_id, "Organization ID (Optional)", class: "crayons-field__label" %>
+        <%= form.text_field :organization_id, value: @listing.organization_id, class: "crayons-textfield" %>
+      </div>
+      <div class="crayons-field">
+        <%= form.label :listing_category_id, class: "crayons-field__label" %>
+        <%= form.select :listing_category_id, select_options_for_categories, class: "crayons-select" %>
+      </div>
+      <div class="crayons-field crayons-field--checkbox">
+        <%= form.check_box :published, checked: @listing.published?, class: "crayons-checkbox" %>
+        <%= form.label :published, class: "crayons-field__label" %>
+      </div>
+      <%= form.submit "Update Listing", class: "crayons-btn crayons-btn--primary mr-auto" %>
     </div>
-    <div class="form-group">
-      <%= form.label :body_markdown %>
-      <%= form.text_area :body_markdown, cols: 40, rows: 15, maxlength: 400, class: "form-control" %>
-    </div>
-    <div class="form-group">
-      <%= form.label :tag_list %>
-      <i class="fs-s">Comma separated, one space, 8 tags max</i>
-      <%= form.text_field :tag_list, value: @listing.cached_tag_list, size: 100, class: "form-control" %>
-    </div>
-    <div class="form-group">
-      <%= form.label :organization_id, "Organization ID (Optional)" %>
-      <%= form.text_field :organization_id, value: @listing.organization_id, class: "form-control" %>
-    </div>
-    <div class="form-group">
-      <%= form.label :listing_category_id %>
-      <%= form.select :listing_category_id, select_options_for_categories %>
-    </div>
-    <div class="form-check">
-      <%= form.check_box :published, checked: @listing.published? %>
-      <%= form.label :published %>
-    </div>
-    <%= form.submit "Update Listing", class: "btn btn-primary" %>
   <% end %>
 </div>
diff --git a/app/views/admin/navigation_links/_form.html.erb b/app/views/admin/navigation_links/_form.html.erb
index 1e8898571..df69838e2 100644
--- a/app/views/admin/navigation_links/_form.html.erb
+++ b/app/views/admin/navigation_links/_form.html.erb
@@ -21,7 +21,6 @@
       <input
         type="file"
         accept="image/svg+xml"
-        class="form-control-file"
         data-action="svg-icon-upload#selectSvgIcon"
         <%= form.object[:icon].blank? ? "required=true" : "" %> />
 
diff --git a/app/views/admin/settings/forms/_campaign.html.erb b/app/views/admin/settings/forms/_campaign.html.erb
index 4332e59fe..67aa6989a 100644
--- a/app/views/admin/settings/forms/_campaign.html.erb
+++ b/app/views/admin/settings/forms/_campaign.html.erb
@@ -41,7 +41,7 @@
           <% if Settings::Campaign.sidebar_image.present? %>
             <div class="row mt-2">
               <div class="col-12">
-                <img alt="Campaign sidebar image" class="img-fluid" src="<%= Settings::Campaign.sidebar_image %>" />
+                <img alt="Campaign sidebar image" class="max-w-100 h-auto" src="<%= Settings::Campaign.sidebar_image %>" />
               </div>
             </div>
           <% end %>
diff --git a/app/views/admin/settings/forms/_images.html.erb b/app/views/admin/settings/forms/_images.html.erb
index 42b1e095a..936b6693d 100644
--- a/app/views/admin/settings/forms/_images.html.erb
+++ b/app/views/admin/settings/forms/_images.html.erb
@@ -27,7 +27,7 @@
                            value: Settings::General.main_social_image,
                            placeholder: Constants::Settings::General.details[:main_social_image][:placeholder] %>
           <% if Settings::General.main_social_image.present? %>
-            <img alt="main social image" class="img-fluid" src="<%= Settings::General.main_social_image %>" width="600" height="337" loading="lazy" />
+            <img alt="main social image" class="max-w-100 h-auto" src="<%= Settings::General.main_social_image %>" width="600" height="337" loading="lazy" />
           <% end %>
         </div>
 
@@ -35,7 +35,7 @@
           <%= admin_config_label :favicon_url, "Favicon URL" %>
           <%= admin_config_description Constants::Settings::General.details[:favicon_url][:description] %>
           <%= f.text_field :favicon_url,
-                           class: "form-control",
+                           class: "crayons-textfield",
                            value: Settings::General.favicon_url,
                            placeholder: Constants::Settings::General.details[:favicon_url][:placeholder] %>
           <img alt="favicon" class="preview" src="<%= Images::Optimizer.call(Settings::General.favicon_url, width: 32) %>" width="32" height="32" loading="lazy" />
diff --git a/app/views/admin/settings/forms/_mascot.html.erb b/app/views/admin/settings/forms/_mascot.html.erb
index ac94ae4ac..7c416324b 100644
--- a/app/views/admin/settings/forms/_mascot.html.erb
+++ b/app/views/admin/settings/forms/_mascot.html.erb
@@ -27,7 +27,7 @@
                            placeholder: Constants::Settings::General.details[:mascot_image_url][:placeholder] %>
 
           <div class="col-12">
-            <img alt="Mascot image" class="img-fluid" src="<%= Settings::General.mascot_image_url %>" loading="lazy" />
+            <img alt="Mascot image" class="max-w-100 h-auto" src="<%= Settings::General.mascot_image_url %>" loading="lazy" />
           </div>
 
         </div>
diff --git a/app/views/admin/settings/forms/_onboarding.html.erb b/app/views/admin/settings/forms/_onboarding.html.erb
index ad808fe36..248ec72c6 100644
--- a/app/views/admin/settings/forms/_onboarding.html.erb
+++ b/app/views/admin/settings/forms/_onboarding.html.erb
@@ -14,7 +14,7 @@
                            placeholder: Constants::Settings::General.details[:onboarding_background_image][:placeholder] %>
           <div class="row mt-2">
             <div class="col-12">
-              <img alt="onboarding background image" class="img-fluid" src="<%= Settings::General.onboarding_background_image %>" loading="lazy" />
+              <img alt="onboarding background image" class="max-w-100 h-auto" src="<%= Settings::General.onboarding_background_image %>" loading="lazy" />
             </div>
           </div>
         </div>
diff --git a/app/views/admin/tags/index.html.erb b/app/views/admin/tags/index.html.erb
index b7bd25db8..818d5fcac 100644
--- a/app/views/admin/tags/index.html.erb
+++ b/app/views/admin/tags/index.html.erb
@@ -1,12 +1,12 @@
 <div class="flex items-center mb-6">
   <div class="crayons-tabs">
-    <div class="nav-item">
+    <div>
       <%= link_to "All", admin_tags_path("q[supported_not_null]": "true"), class: "crayons-tabs__item #{'crayons-tabs__item--current' if params.dig(:q, :supported_not_null)}", "aria-label": "All Tags", data: { text: "All" } %>
     </div>
-    <div class="nav-item">
+    <div>
       <%= link_to "Supported", admin_tags_path("q[supported_eq": "true"), class: "crayons-tabs__item #{'crayons-tabs__item--current' if params.dig(:q, :supported_eq) == 'true'}", "aria-label": "Supported Tags", data: { text: "Supported" } %>
     </div>
-    <div class="nav-item">
+    <div>
       <%= link_to "Unsupported", admin_tags_path("q[supported_eq": "false"), class: "crayons-tabs__item #{'crayons-tabs__item--current' if params.dig(:q, :supported_eq) == 'false'}", "aria-label": "Unsupported Tags", data: { text: "Unsupported" } %>
     </div>
   </div>