diff --git a/app/views/admin/broadcasts/_form.html.erb b/app/views/admin/broadcasts/_form.html.erb
index c7cc8c784..f5b1673ef 100644
--- a/app/views/admin/broadcasts/_form.html.erb
+++ b/app/views/admin/broadcasts/_form.html.erb
@@ -1,24 +1,26 @@
-<div class="form-group">
-  <%= label_tag :title, "Title:" %>
-  <%= text_field_tag :title, @broadcast.title, class: "form-control" %>
-</div>
+<div class="flex flex-col gap-4">
+  <div class="crayons-field">
+    <%= label_tag :title, "Title", class: "crayons-field__label" %>
+    <%= text_field_tag :title, @broadcast.title, class: "crayons-textfield" %>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :processed_html, "HTML" %>
-  <%= text_area_tag :processed_html, @broadcast.processed_html, size: "100x10", class: "form-control" %>
-</div>
+  <div class="crayons-field">
+    <%= label_tag :processed_html, "HTML", class: "crayons-field__label" %>
+    <%= text_area_tag :processed_html, @broadcast.processed_html, size: "100x10", class: "crayons-textfield" %>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :type_of, "Type:" %>
-  <%= select_tag :type_of, options_for_select(%w[Welcome Announcement], selected: @broadcast.type_of) %>
-</div>
+  <div class="crayons-field">
+    <%= label_tag :type_of, "Type", class: "crayons-field__label" %>
+    <%= select_tag :type_of, options_for_select(%w[Welcome Announcement],  selected: @broadcast.type_of), class: "crayons-select"%>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :banner_style, "Banner Style:" %>
-  <%= select_tag :banner_style, options_for_select(%w[default brand success warning error], selected: @broadcast.banner_style), include_blank: true %>
-</div>
+  <div class="crayons-field">
+    <%= label_tag :banner_style, "Banner Style", class: "crayons-field__label" %>
+    <%= select_tag :banner_style, options_for_select(%w[default brand success warning error], selected: @broadcast.banner_style), include_blank: true, class: "crayons-select"%>
+  </div>
 
-<div class="form-group">
-  <%= label_tag :active, "Active:" %>
-  <%= select_tag :active, options_for_select([false, true], selected: @broadcast.active) %>
+  <div class="crayons-field">
+    <%= label_tag :active, "Active", class: "crayons-field__label" %>
+    <%= select_tag :active, options_for_select([false, true], selected: @broadcast.active), class: "crayons-select"%>
+  </div>
 </div>
diff --git a/app/views/admin/broadcasts/edit.html.erb b/app/views/admin/broadcasts/edit.html.erb
index 9cf1c3258..5c38bd157 100644
--- a/app/views/admin/broadcasts/edit.html.erb
+++ b/app/views/admin/broadcasts/edit.html.erb
@@ -2,6 +2,6 @@
 <div class="crayons-card p-6">
   <%= form_for([:admin, @broadcast], method: :patch) do %>
     <%= render "form" %>
-    <%= submit_tag "Update broadcast", class: "btn btn-primary" %>
+    <%= submit_tag "Update broadcast", class: "crayons-btn mt-4" %>
   <% end %>
 </div>
diff --git a/app/views/admin/broadcasts/index.html.erb b/app/views/admin/broadcasts/index.html.erb
index 7d95972be..d9221d45d 100644
--- a/app/views/admin/broadcasts/index.html.erb
+++ b/app/views/admin/broadcasts/index.html.erb
@@ -1,20 +1,20 @@
-<nav class="flex mb-4" aria-label="Broadcasts navigation">
-  <ul class="nav nav-pills">
-    <li class="nav-item">
-      <%= link_to "All", admin_broadcasts_path, class: "nav-link #{'active' if params[:type_of].blank?}" %>
+<header class="flex items-center mb-6">
+  <h2 class="crayons-title">Broadcasts</h2>
+  <a href="<%= new_admin_broadcast_path %>" class="crayons-btn ml-auto" role="button">Make a New Broadcast</a>
+</header>
+
+<nav class="mb-2 flex justify-between items-center" aria-label="Broadcasts navigation">
+  <ul class="crayons-navigation crayons-navigation--horizontal">
+    <li>
+      <%= link_to "All", admin_broadcasts_path, class: "crayons-navigation__item #{'crayons-navigation__item--current' if params[:type_of].blank?}" %>
     </li>
-    <li class="nav-item">
-      <%= link_to "Announcement", admin_broadcasts_path(type_of: :announcement), class: "nav-link #{'active' if params[:type_of] == 'announcement'}" %>
+    <li>
+      <%= link_to "Announcement", admin_broadcasts_path(type_of: :announcement), class: "crayons-navigation__item #{'crayons-navigation__item--current' if params[:type_of] == 'announcement'}" %>
     </li>
-    <li class="nav-item">
-      <%= link_to "Welcome", admin_broadcasts_path(type_of: :welcome), class: "nav-link #{'active' if params[:type_of] == 'welcome'}" %>
+    <li>
+      <%= link_to "Welcome", admin_broadcasts_path(type_of: :welcome), class: "crayons-navigation__item #{'crayons-navigation__item--current' if params[:type_of] == 'welcome'}" %>
     </li>
   </ul>
-  <div class="ml-auto">
-    <div class="justify-content-end">
-      <%= link_to "Make A New Broadcast", new_admin_broadcast_path, class: "btn btn-primary" %>
-    </div>
-  </div>
 </nav>
 
 <div class="crayons-card p-6 grid gap-6">
@@ -33,7 +33,7 @@
         <tr>
           <td><%= link_to broadcast.title, admin_broadcast_path(broadcast.id) %></td>
           <td class="justify-content-center">
-            <div class="badge badge-<%= broadcast.active? ? "success" : "warning" %>">
+            <div class="c-indicator c-indicator--<%= broadcast.active? ? "success" : "warning" %>">
               <%= broadcast.active? ? "Active" : "Inactive" %>
             </div>
           </td>
diff --git a/app/views/admin/broadcasts/new.html.erb b/app/views/admin/broadcasts/new.html.erb
index 79e18fbb8..1965522b0 100644
--- a/app/views/admin/broadcasts/new.html.erb
+++ b/app/views/admin/broadcasts/new.html.erb
@@ -2,6 +2,6 @@
 <div class="crayons-card p-6">
   <%= form_for([:admin, @broadcast], method: :post) do %>
     <%= render "form" %>
-    <%= submit_tag "Create broadcast", class: "btn btn-primary" %>
+    <%= submit_tag "Create broadcast", class: "crayons-btn mt-4" %>
   <% end %>
 </div>
diff --git a/app/views/admin/broadcasts/show.html.erb b/app/views/admin/broadcasts/show.html.erb
index a733885f4..5900631c2 100644
--- a/app/views/admin/broadcasts/show.html.erb
+++ b/app/views/admin/broadcasts/show.html.erb
@@ -36,7 +36,7 @@
     <div>
       <p class="fw-bold">Status</p>
       <p>
-        <span class="badge badge-<%= @broadcast.active? ? "success" : "warning" %>">
+        <span class="c-indicator c-indicator--<%= @broadcast.active? ? "success" : "warning" %>">
           <%= @broadcast.active? ? "Active" : "Inactive" %>
         </span>
       </p>