From 970b26dbdbc0f62cd92ea3472a457196ed5d99a1 Mon Sep 17 00:00:00 2001
From: Ole Magnus Fon Johnsen <me@omfj.no>
Date: Tue, 29 Jul 2025 14:16:53 +0200
Subject: [PATCH 1/4] Create color variables

---
 .../core/partials/user-dropdown.html          |   6 +-
 .../analysis_samples/components/Filters.jsx   |   2 +-
 .../components/SearchApplyMarker.jsx          |   2 +-
 .../src/helpers/PastableArrayInput.jsx        |  10 +-
 .../components/Cell/MultiSelectCell.jsx       |  31 +--
 .../samples/components/Cell/SelectCell.jsx    |  21 +-
 .../components/Cell/SelectCreateCell.jsx      |  30 +--
 .../src/samples/components/SampleForm.jsx     |   2 +-
 src/frontend/src/samples/components/Table.jsx |   2 +-
 .../analysisorder_detail.html                 |  18 +-
 .../analysisorder_filter.html                 |  19 +-
 .../genlab_bestilling/analysisorder_form.html |  27 ++-
 .../equipmentorder_detail.html                |  12 +-
 .../equipmentorder_filter.html                |  19 +-
 .../equipmentorder_form.html                  |  26 ++-
 .../equipmentorderquantity_form.html          |  18 +-
 .../extractionorder_detail.html               |  16 +-
 .../extractionorder_filter.html               |   4 +-
 .../extractionorder_form.html                 |  27 ++-
 .../genrequest_confirm_delete.html            |  25 ++-
 .../genlab_bestilling/genrequest_detail.html  |  16 +-
 .../genlab_bestilling/genrequest_filter.html  |  10 +-
 .../genlab_bestilling/genrequest_form.html    |  29 +--
 .../order_confirm_delete.html                 |   4 +-
 .../genlab_bestilling/order_filter.html       |   8 +-
 .../genlab_bestilling/sample_list.html        |  10 +-
 .../samplemarkeranalysis_list.html            |  32 +--
 src/nina/templates/nina/project_detail.html   |  10 +-
 src/nina/templates/nina/project_form.html     |  21 +-
 .../nina/projectmembership_form.html          |  20 +-
 .../nina/projectmembership_list.html          |  12 +-
 .../templates/staff/analysisorder_detail.html |   8 +-
 src/staff/templates/staff/base.html           |  16 +-
 .../staff/components/extraction_tabs.html     |  18 +-
 .../staff/components/seen_column.html         |   6 +-
 src/staff/templates/staff/dashboard.html      |  14 +-
 .../staff/equipmentorder_detail.html          |   8 +-
 .../staff/extractionorder_detail.html         |   6 +-
 .../staff/extractionplate_detail.html         |   2 +-
 .../staff/extractionplate_filter.html         |   2 +-
 .../templates/staff/extractionplate_form.html |  36 ++--
 .../templates/staff/order_staff_edit.html     |   8 +-
 src/staff/templates/staff/project_detail.html |   2 +-
 src/staff/templates/staff/sample_detail.html  |   2 +-
 src/staff/templates/staff/sample_filter.html  |   6 +-
 src/staff/templates/staff/sample_lab.html     |   6 +-
 .../staff/samplemarkeranalysis_filter.html    |   4 +-
 src/staff/templatetags/order_tags.py          |   2 +-
 src/templates/components/action-button.html   |  10 +-
 src/templates/components/filtering.html       |  26 +--
 src/templates/components/formset.html         |  14 +-
 src/templates/core/partials/app-dropdown.html |   8 +-
 .../core/partials/project-dropdown.html       |   6 +-
 src/templates/users/user_detail.html          |  12 +-
 src/templates/users/user_form.html            |  14 +-
 src/theme/static_src/src/styles.css           | 192 +++++++-----------
 src/theme/static_src/tailwind.config.js       |  56 ++++-
 57 files changed, 514 insertions(+), 459 deletions(-)

diff --git a/src/capps/core/templates/core/partials/user-dropdown.html b/src/capps/core/templates/core/partials/user-dropdown.html
index de58ae27..e307f621 100644
--- a/src/capps/core/templates/core/partials/user-dropdown.html
+++ b/src/capps/core/templates/core/partials/user-dropdown.html
@@ -34,7 +34,7 @@
       <li>
         <a
           href="{% url 'socialaccount_connections' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-user"></i>
           My profile
@@ -45,7 +45,7 @@
       <li>
         <a
           href="{% url 'admin:index' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
             <i class="fas fa-cog "></i>
             {% trans 'Admin' %}
@@ -55,7 +55,7 @@
       <li>
         <a
           href="{% url 'account_logout' %}"
-          class="flex items-center gap-3.5 px-3 py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-right-from-bracket"></i>
           {% trans 'Log Out' %}
diff --git a/src/frontend/src/analysis_samples/components/Filters.jsx b/src/frontend/src/analysis_samples/components/Filters.jsx
index 9023ae6c..e849a3b9 100644
--- a/src/frontend/src/analysis_samples/components/Filters.jsx
+++ b/src/frontend/src/analysis_samples/components/Filters.jsx
@@ -235,7 +235,7 @@ export default function Filters({ onSearch, submitBtn }) {
         <Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>
           {([canSubmit, isSubmitting]) => (
             <Button
-              className="btn bg-primary block disabled:opacity-50"
+              className="btn bg-brand-primary block disabled:opacity-50"
               disabled={!canSubmit}
               onClick={handleSubmit}
             >
diff --git a/src/frontend/src/analysis_samples/components/SearchApplyMarker.jsx b/src/frontend/src/analysis_samples/components/SearchApplyMarker.jsx
index b97d52c9..45f980cd 100644
--- a/src/frontend/src/analysis_samples/components/SearchApplyMarker.jsx
+++ b/src/frontend/src/analysis_samples/components/SearchApplyMarker.jsx
@@ -66,7 +66,7 @@ export default function SearchApplyMarker() {
         {([canSubmit, isSubmitting, samples, markers]) => (
           <Button
             onClick={handleSubmit}
-            className="btn bg-primary block disabled:opacity-50"
+            className="btn bg-brand-primary block disabled:opacity-50"
             disabled={
               !canSubmit ||
               !Object.values(samples).some((_) => _) ||
diff --git a/src/frontend/src/helpers/PastableArrayInput.jsx b/src/frontend/src/helpers/PastableArrayInput.jsx
index dbb87e58..d77df157 100644
--- a/src/frontend/src/helpers/PastableArrayInput.jsx
+++ b/src/frontend/src/helpers/PastableArrayInput.jsx
@@ -10,7 +10,7 @@ import {
 import { useState } from "react";
 
 export default function PastableArrayInput({ state, handleChange }) {
-  const [input, setInput] = useState('');
+  const [input, setInput] = useState("");
   let [isOpen, setIsOpen] = useState(false);
 
   const arrayFromInput = () => {
@@ -21,9 +21,9 @@ export default function PastableArrayInput({ state, handleChange }) {
   };
 
   const open = () => {
-    setInput(state.value.join('\n'));
+    setInput(state.value.join("\n"));
     setIsOpen(true);
-  }
+  };
 
   const invalid = input.indexOf("\t") > -1;
 
@@ -38,7 +38,7 @@ export default function PastableArrayInput({ state, handleChange }) {
       </div>
 
       <div className="flex gap-2 mt-2">
-        <Button className="btn bg-primary" onClick={open}>
+        <Button className="btn bg-brand-primary" onClick={open}>
           Paste from excel
         </Button>
         {state.value.length > 0 && (
@@ -77,7 +77,7 @@ export default function PastableArrayInput({ state, handleChange }) {
             )}
             <div className="flex justify-start gap-4">
               <Button
-                className="btn block bg-primary disabled:opacity-70"
+                className="btn block bg-brand-primary disabled:opacity-70"
                 onClick={arrayFromInput}
                 disabled={invalid || !input}
               >
diff --git a/src/frontend/src/samples/components/Cell/MultiSelectCell.jsx b/src/frontend/src/samples/components/Cell/MultiSelectCell.jsx
index c9ecccba..2ccaa64e 100644
--- a/src/frontend/src/samples/components/Cell/MultiSelectCell.jsx
+++ b/src/frontend/src/samples/components/Cell/MultiSelectCell.jsx
@@ -2,15 +2,15 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 import AsyncSelect from "react-select/async";
 
-const datePortal = document.getElementById('date-portal');
+const datePortal = document.getElementById("date-portal");
 
 const CLASSNAMES = {
-  container: () => 'flex w-full',
-  control: (state) => 'px-4 w-full cursor-auto',
-  menu: () => 'bg-white border border-[#444] cursor-auto',
-  option: () => 'px-4 my-2 cursor-auto focus:bg-primary',
-  multiValue: () => 'bg-primary px-1 rounded cursor-auto',
-}
+  container: () => "flex w-full",
+  control: (state) => "px-4 w-full cursor-auto",
+  menu: () => "bg-white border border-[#444] cursor-auto",
+  option: () => "px-4 my-2 cursor-auto focus:bg-brand-primary",
+  multiValue: () => "bg-brand-primary px-1 rounded cursor-auto",
+};
 
 export default function MultiSelectCell({
   getValue,
@@ -19,8 +19,8 @@ export default function MultiSelectCell({
   table,
   loadOptions,
   queryKey,
-  idField = 'id',
-  labelField = 'name',
+  idField = "id",
+  labelField = "name",
 }) {
   const queryClient = useQueryClient();
   const initialValue = getValue();
@@ -29,8 +29,11 @@ export default function MultiSelectCell({
   // When the input is blurred, we'll call our table meta's updateData function
   const handleBlur = () => {
     if (value !== initialValue) {
-      console.log(value)
-      table.options.meta?.updateData({ id: original.id, [id]: value.map(v => v[idField]) });
+      console.log(value);
+      table.options.meta?.updateData({
+        id: original.id,
+        [id]: value.map((v) => v[idField]),
+      });
     }
   };
 
@@ -39,7 +42,11 @@ export default function MultiSelectCell({
     setValue(initialValue || "");
   }, [initialValue]);
 
-  const load = async (input) => await queryClient.fetchQuery({ queryKey: [queryKey, input], queryFn: () => loadOptions(input) });
+  const load = async (input) =>
+    await queryClient.fetchQuery({
+      queryKey: [queryKey, input],
+      queryFn: () => loadOptions(input),
+    });
 
   return (
     <AsyncSelect
diff --git a/src/frontend/src/samples/components/Cell/SelectCell.jsx b/src/frontend/src/samples/components/Cell/SelectCell.jsx
index 86840572..d0c6f691 100644
--- a/src/frontend/src/samples/components/Cell/SelectCell.jsx
+++ b/src/frontend/src/samples/components/Cell/SelectCell.jsx
@@ -2,16 +2,15 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 import AsyncSelect from "react-select/async";
 
-const datePortal = document.getElementById('date-portal');
-
+const datePortal = document.getElementById("date-portal");
 
 const CLASSNAMES = {
-  container: () => 'flex w-full',
-  control: (state) => 'px-4 w-full cursor-auto',
-  menu: () => 'bg-white border border-[#444] cursor-auto',
-  option: () => 'px-4 my-2 cursor-auto hover:bg-primary',
-  multiValue: () => 'bg-primary px-1 rounded cursor-auto',
-}
+  container: () => "flex w-full",
+  control: (state) => "px-4 w-full cursor-auto",
+  menu: () => "bg-white border border-[#444] cursor-auto",
+  option: () => "px-4 my-2 cursor-auto hover:bg-brand-primary",
+  multiValue: () => "bg-brand-primary px-1 rounded cursor-auto",
+};
 
 export default function SelectCell({
   getValue,
@@ -37,7 +36,11 @@ export default function SelectCell({
     setValue(initialValue || "");
   }, [initialValue]);
 
-  const load = async (input) => await queryClient.fetchQuery({ queryKey: [queryKey, input], queryFn: () => loadOptions(input) });
+  const load = async (input) =>
+    await queryClient.fetchQuery({
+      queryKey: [queryKey, input],
+      queryFn: () => loadOptions(input),
+    });
 
   return (
     <AsyncSelect
diff --git a/src/frontend/src/samples/components/Cell/SelectCreateCell.jsx b/src/frontend/src/samples/components/Cell/SelectCreateCell.jsx
index 7657f68c..d4654eec 100644
--- a/src/frontend/src/samples/components/Cell/SelectCreateCell.jsx
+++ b/src/frontend/src/samples/components/Cell/SelectCreateCell.jsx
@@ -2,16 +2,15 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 import AsyncSelect from "react-select/async-creatable";
 
-const datePortal = document.getElementById('date-portal');
-
+const datePortal = document.getElementById("date-portal");
 
 const CLASSNAMES = {
-  container: () => 'flex w-full',
-  control: () => 'px-4 w-full cursor-auto',
-  menu: () => 'bg-white border border-[#444] cursor-auto',
-  option: () => 'px-4 my-2 cursor-auto hover:bg-primary',
-  multiValue: () => 'bg-primary px-1 rounded cursor-auto',
-}
+  container: () => "flex w-full",
+  control: () => "px-4 w-full cursor-auto",
+  menu: () => "bg-white border border-[#444] cursor-auto",
+  option: () => "px-4 my-2 cursor-auto hover:bg-brand-primary",
+  multiValue: () => "bg-brand-primary px-1 rounded cursor-auto",
+};
 
 export default function SelectCreateCell({
   getValue,
@@ -37,8 +36,8 @@ export default function SelectCreateCell({
   const create = useMutation({
     mutationFn: onCreate,
     onSuccess: (data) => {
-      setValue(data.data)
-      queryClient.invalidateQueries({ queryKey: [queryKey] })
+      setValue(data.data);
+      queryClient.invalidateQueries({ queryKey: [queryKey] });
       setKey(key + 1);
     },
   });
@@ -48,7 +47,11 @@ export default function SelectCreateCell({
     setValue(initialValue || "");
   }, [initialValue]);
 
-  const load = async (input) => await queryClient.fetchQuery({ queryKey: [queryKey, input], queryFn: () => loadOptions(input) });
+  const load = async (input) =>
+    await queryClient.fetchQuery({
+      queryKey: [queryKey, input],
+      queryFn: () => loadOptions(input),
+    });
 
   return (
     <AsyncSelect
@@ -64,7 +67,10 @@ export default function SelectCreateCell({
       onChange={setValue}
       menuPortalTarget={datePortal}
       unstyled
-      getNewOptionData={(inputValue, optionLabel) => ({ id: inputValue, name: optionLabel })}
+      getNewOptionData={(inputValue, optionLabel) => ({
+        id: inputValue,
+        name: optionLabel,
+      })}
       onCreateOption={create.mutate}
     />
   );
diff --git a/src/frontend/src/samples/components/SampleForm.jsx b/src/frontend/src/samples/components/SampleForm.jsx
index 76dfbe0b..eb13b7c7 100644
--- a/src/frontend/src/samples/components/SampleForm.jsx
+++ b/src/frontend/src/samples/components/SampleForm.jsx
@@ -348,7 +348,7 @@ export default function SampleForm() {
             {([canSubmit, isSubmitting, ...rows]) => (
               <Button
                 type="submit"
-                className="btn bg-primary block disabled:opacity-50"
+                className="btn bg-brand-primary block disabled:opacity-50"
                 disabled={!canSubmit}
               >
                 {isSubmitting ? (
diff --git a/src/frontend/src/samples/components/Table.jsx b/src/frontend/src/samples/components/Table.jsx
index 95816645..4c23ea9e 100644
--- a/src/frontend/src/samples/components/Table.jsx
+++ b/src/frontend/src/samples/components/Table.jsx
@@ -423,7 +423,7 @@ export default function Table() {
           )}
         </button>
         <button
-          className="btn bg-secondary disabled:opacity-70 text-white"
+          className="btn bg-brand-secondary disabled:opacity-70 text-white"
           onClick={mutateConfirm.mutate}
           disabled={pendingState}
         >
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_detail.html b/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_detail.html
index 4cb9dad2..f76c932a 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_detail.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_detail.html
@@ -33,7 +33,7 @@ <h5 class="text-2xl my-5">Contacts for Analysis Results</h5>
         {% for contact in results_contacts %}
             <li>
             {{ contact.contact_person_results }} —
-            <a href="mailto:{{ contact.contact_email_results }}" class="underline text-primary">
+            <a href="mailto:{{ contact.contact_email_results }}" class="underline text-brand-primary">
                 {{ contact.contact_email_results }}
             </a>
             </li>
@@ -54,22 +54,22 @@ <h5 class="text-2xl my-5">Samples to analyze</h5>
     </div>
 
     <div class="flex gap-5 my-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
         {% if object.status == 'draft' %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-analysis-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit Order</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit Order</a>
         {% if not object.from_order %}
-            <a class="btn custom_order_button" href="{% url 'genrequest-analysis-samples-edit' genrequest_id=object.genrequest_id pk=object.id %}">Edit Samples</a>
+            <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-samples-edit' genrequest_id=object.genrequest_id pk=object.id %}">Edit Samples</a>
         {% endif %}
-        <a class="ml-auto btn custom_order_button" href="{% url 'genrequest-analysis-samples' genrequest_id=object.genrequest_id pk=object.id %}">Summary Samples</a>
+        <a class="ml-auto btn btn-tertiary" href="{% url 'genrequest-analysis-samples' genrequest_id=object.genrequest_id pk=object.id %}">Summary Samples</a>
         {% url 'genrequest-order-confirm' genrequest_id=object.genrequest_id pk=object.id as confirm_order_url %}
         {% url 'genrequest-order-clone' genrequest_id=object.genrequest_id pk=object.id as clone_order_url %}
-        {% action-button action=confirm_order_url class="btn custom_order_button" submit_text="Deliver order" csrf_token=csrf_token %}
-        {% action-button action=clone_order_url class="btn custom_order_button" submit_text="Clone Order" csrf_token=csrf_token %}
+        {% action-button action=confirm_order_url class="btn btn-tertiary" submit_text="Deliver order" csrf_token=csrf_token %}
+        {% action-button action=clone_order_url class="btn btn-tertiary" submit_text="Clone Order" csrf_token=csrf_token %}
         {% if all_samples_have_no_genlab_id %}
-        <a class="btn custom_order_button_red" href="{% url 'genrequest-analysis-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
+        <a class="btn btn-danger" href="{% url 'genrequest-analysis-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
         {% endif %}
         {% elif object.status == object.OrderStatus.DELIVERED %}
-            <a class="btn custom_order_button" href="{% url 'genrequest-analysis-samples' genrequest_id=object.genrequest_id pk=object.id %}">Samples</a>
+            <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-samples' genrequest_id=object.genrequest_id pk=object.id %}">Samples</a>
         {% endif %}
     </div>
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html b/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html
index 9dc763bb..30b5830b 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html
@@ -1,13 +1,16 @@
-{% extends "genlab_bestilling/base_filter.html" %}
+{% extends 'genlab_bestilling/base_filter.html' %}
 {% load neapolitan %}
 {% load render_table from django_tables2 %}
 
-{% block page-title %}Analysis Orders{% if genrequest %} relative to {{ genrequest }}{% endif %}{% endblock page-title %}
-{% block page-inner %}
+{% block page - title %}Analysis Orders{% if genrequest %}
+  relative to {{ genrequest }}
+{% endif %}
+{% endblock page - title %}
+{% block page - inner %}
 <div class="flex gap-5 mb-5">
-    {% if genrequest %}
-    <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-    <a class="btn custom_order_button" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
-    {% endif %}
+  {% if genrequest %}
+    <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
+  {% endif %}
 </div>
-{% endblock page-inner %}
+{% endblock page - inner %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_form.html b/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_form.html
index c201072b..08d140ca 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_form.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_form.html
@@ -1,16 +1,21 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load core %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{% if object.id %}{{ object }}{% else %}Create {{ view.model|verbose_name }}{% endif %}</h3>
-
-    <div class="flex gap-5 mb-5">
-        {% if object.id %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-analysis-detail' genrequest_id=genrequest.id pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% else %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=view.kwargs.genrequest_id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% endif %}
-    </div>
-    {% formset endpoint=request.path csrf_token=csrf_token form=form %}
+  <h3 class="text-4xl mb-5">
+    {% if object.id %}
+      {{ object }}
+    {% else %}
+      Create {{ view.model|verbose_name }}
+    {% endif %}
+  </h3>
 
+  <div class="flex gap-5 mb-5">
+    {% if object.id %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-detail' genrequest_id=genrequest.id pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% else %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=view.kwargs.genrequest_id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% endif %}
+  </div>
+  {% formset endpoint=request.path csrf_token=csrf_token form=form %}
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_detail.html b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_detail.html
index 77f9fbaf..26980864 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_detail.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_detail.html
@@ -12,7 +12,7 @@
 
     <h3 class="text-4xl mb-5">Order {{ object }}</h3>
     <div class="flex gap-5 mb-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
     </div>
 
     {% object-detail object=object %}
@@ -35,13 +35,13 @@ <h5 class="text-2xl my-5">Requested Equipment</h5>
 
     <div class="flex gap-5 my-5">
         {% if object.status == 'draft' %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-equipment-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit</a>
-        <a class="btn custom_order_button" href="{% url 'genrequest-equipment-quantity-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit requested equipment</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-equipment-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-equipment-quantity-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit requested equipment</a>
         {% url 'genrequest-order-confirm' genrequest_id=object.genrequest_id pk=object.id as confirm_order_url %}
-        {% action-button action=confirm_order_url class="btn custom_order_button" submit_text="Deliver order" csrf_token=csrf_token %}
-        <a class="btn custom_order_button_red" href="{% url 'genrequest-equipment-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
+        {% action-button action=confirm_order_url class="btn btn-tertiary" submit_text="Deliver order" csrf_token=csrf_token %}
+        <a class="btn btn-danger" href="{% url 'genrequest-equipment-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
         {% endif %}
         {% url 'genrequest-order-clone' genrequest_id=object.genrequest_id pk=object.id as clone_order_url %}
-        {% action-button action=clone_order_url class="btn custom_order_button" submit_text="Clone Order" csrf_token=csrf_token %}
+        {% action-button action=clone_order_url class="btn btn-tertiary" submit_text="Clone Order" csrf_token=csrf_token %}
     </div>
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html
index d0dad657..0041b4f6 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html
@@ -1,13 +1,16 @@
-{% extends "genlab_bestilling/base_filter.html" %}
+{% extends 'genlab_bestilling/base_filter.html' %}
 {% load neapolitan %}
 {% load render_table from django_tables2 %}
 
-{% block page-title %}Equipment Orders{% if genrequest %} relative to {{ genrequest }}{% endif %}{% endblock page-title %}
-{% block page-inner %}
+{% block page - title %}Equipment Orders{% if genrequest %}
+  relative to {{ genrequest }}
+{% endif %}
+{% endblock page - title %}
+{% block page - inner %}
 <div class="flex gap-5 mb-5">
-    {% if genrequest %}
-    <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-    <a class="btn custom_order_button_green" href="{% url 'genrequest-equipment-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
-    {% endif %}
+  {% if genrequest %}
+    <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    <a class="btn btn-success" href="{% url 'genrequest-equipment-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
+  {% endif %}
 </div>
-{% endblock page-inner %}
+{% endblock page - inner %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_form.html b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_form.html
index cc0cc260..13774b20 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_form.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_form.html
@@ -1,14 +1,20 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load core %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{% if object.id %}{{ object }}{% else %}Create {{ view.model|verbose_name }}{% endif %}</h3>
-    <div class="flex gap-5 mb-5">
-        {% if object.id %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-equipment-detail' genrequest_id=genrequest.id pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% else %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% endif %}
-    </div>
-    {% formset endpoint=request.path csrf_token=csrf_token form=form %}
+  <h3 class="text-4xl mb-5">
+    {% if object.id %}
+      {{ object }}
+    {% else %}
+      Create {{ view.model|verbose_name }}
+    {% endif %}
+  </h3>
+  <div class="flex gap-5 mb-5">
+    {% if object.id %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-equipment-detail' genrequest_id=genrequest.id pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% else %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% endif %}
+  </div>
+  {% formset endpoint=request.path csrf_token=csrf_token form=form %}
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorderquantity_form.html b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorderquantity_form.html
index 2593b8b5..6a95b33d 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorderquantity_form.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorderquantity_form.html
@@ -1,10 +1,16 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load core %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{% if object.id %}{{ object }}{% else %}Create {{ view.model|verbose_name }}{% endif %}</h3>
-    <div class="flex gap-5 mb-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-equipment-detail' genrequest_id=genrequest.id pk=view.kwargs.pk %}"><i class="fas fa-arrow-left"></i> Back</a>
-    </div>
-    {% formset endpoint=request.path csrf_token=csrf_token form_collection=form_collection %}
+  <h3 class="text-4xl mb-5">
+    {% if object.id %}
+      {{ object }}
+    {% else %}
+      Create {{ view.model|verbose_name }}
+    {% endif %}
+  </h3>
+  <div class="flex gap-5 mb-5">
+    <a class="btn btn-tertiary" href="{% url 'genrequest-equipment-detail' genrequest_id=genrequest.id pk=view.kwargs.pk %}"><i class="fas fa-arrow-left"></i> Back</a>
+  </div>
+  {% formset endpoint=request.path csrf_token=csrf_token form_collection=form_collection %}
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_detail.html b/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_detail.html
index 044bbcde..c853335e 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_detail.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_detail.html
@@ -17,26 +17,26 @@ <h3 class="text-4xl mb-5">Order {{ object }}</h3>
     </div>
 
     <div class="flex gap-5 my-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
         {% if object.status == 'draft' %}
-            <a class="btn custom_order_button" href="{% url 'genrequest-extraction-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit Order</a>
-            <a class="btn custom_order_button" href="{% url 'genrequest-extraction-samples-edit' genrequest_id=object.genrequest_id pk=object.id %}">Edit Samples</a>
+            <a class="btn btn-tertiary" href="{% url 'genrequest-extraction-update' genrequest_id=object.genrequest_id pk=object.id %}">Edit Order</a>
+            <a class="btn btn-tertiary" href="{% url 'genrequest-extraction-samples-edit' genrequest_id=object.genrequest_id pk=object.id %}">Edit Samples</a>
 
             {% url 'genrequest-order-confirm' genrequest_id=object.genrequest_id pk=object.id as confirm_order_url %}
-            {% action-button action=confirm_order_url class="btn custom_order_button" submit_text="Deliver order" csrf_token=csrf_token %}
+            {% action-button action=confirm_order_url class="btn btn-tertiary" submit_text="Deliver order" csrf_token=csrf_token %}
             {% if all_samples_have_no_genlab_id %}
-            <a class="btn custom_order_button_red" href="{% url 'genrequest-analysis-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
+            <a class="btn btn-danger" href="{% url 'genrequest-analysis-delete' genrequest_id=object.genrequest_id pk=object.id %}">Delete</a>
             {% endif %}
         {% endif %}
 
-        <a class="btn custom_order_button" href="{% url 'genrequest-extraction-samples' genrequest_id=object.genrequest_id pk=object.id %}">Samples</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-extraction-samples' genrequest_id=object.genrequest_id pk=object.id %}">Samples</a>
 
         {% if object.status != 'draft' %}
-            <a class="btn custom_order_button" href="{% url 'genrequest-analysis-create' genrequest_id=object.genrequest_id %}?from_order={{ view.kwargs.pk }}">Analyze these samples</a>
+            <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-create' genrequest_id=object.genrequest_id %}?from_order={{ view.kwargs.pk }}">Analyze these samples</a>
         {% endif %}
 
         {% url 'genrequest-order-clone' genrequest_id=object.genrequest_id pk=object.id as clone_order_url %}
-        {% action-button action=clone_order_url class="btn custom_order_button" submit_text="Clone Order" csrf_token=csrf_token %}
+        {% action-button action=clone_order_url class="btn btn-tertiary" submit_text="Clone Order" csrf_token=csrf_token %}
     </div>
 
     {% object-detail object=object %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_filter.html b/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_filter.html
index b0676d9b..6166baa6 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_filter.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_filter.html
@@ -6,8 +6,8 @@
 {% block page-inner %}
 <div class="flex gap-5 mb-5">
     {% if genrequest %}
-    <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-    <a class="btn custom_order_button_green" href="{% url 'genrequest-extraction-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
+    <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    <a class="btn btn-success" href="{% url 'genrequest-extraction-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
     {% endif %}
 </div>
 {% endblock page-inner %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_form.html b/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_form.html
index 1f96a6e8..e70c6b97 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_form.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/extractionorder_form.html
@@ -1,16 +1,21 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load core %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{% if object.id %}{{ object }}{% else %}Create {{ view.model|verbose_name }}{% endif %}</h3>
-
-    <div class="flex gap-5 mb-5">
-        {% if object.id %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-extraction-detail' genrequest_id=genrequest.id pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% else %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=view.kwargs.genrequest_id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% endif %}
-    </div>
-    {% formset endpoint=request.path csrf_token=csrf_token form=form %}
+  <h3 class="text-4xl mb-5">
+    {% if object.id %}
+      {{ object }}
+    {% else %}
+      Create {{ view.model|verbose_name }}
+    {% endif %}
+  </h3>
 
+  <div class="flex gap-5 mb-5">
+    {% if object.id %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-extraction-detail' genrequest_id=genrequest.id pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% else %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=view.kwargs.genrequest_id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% endif %}
+  </div>
+  {% formset endpoint=request.path csrf_token=csrf_token form=form %}
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_confirm_delete.html b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_confirm_delete.html
index b3c0b53b..d783ea9c 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_confirm_delete.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_confirm_delete.html
@@ -1,18 +1,17 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load i18n crispy_forms_tags %}
 
-
 {% block content %}
-    <h3 class="text-4xl mb-5">Delete request {{ object }}?</h3>
-    <div class="flex gap-5 mb-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-    </div>
+  <h3 class="text-4xl mb-5">Delete request {{ object }}?</h3>
+  <div class="flex gap-5 mb-5">
+    <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+  </div>
 
-    <div>
-        <p>Are you sure you want to delete this request?</p>
-        <form method="post">
-            {% csrf_token %}
-            <button type="submit" class="btn custom_order_button_red">Confirm</button>
-        </form>
-    </div>
+  <div>
+    <p>Are you sure you want to delete this request?</p>
+    <form method="post">
+      {% csrf_token %}
+      <button type="submit" class="btn btn-danger">Confirm</button>
+    </form>
+  </div>
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_detail.html b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_detail.html
index a24452f8..c86b31fc 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_detail.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_detail.html
@@ -16,41 +16,41 @@ <h3 id="genrequest" class="text-4xl">{{ object.project_id }} - {{ object.name|d
 {% endif %}
 
 <div class="flex gap-5 my-5">
-  <a class="btn custom_order_button" href="{% url 'genrequest-list' %}"
+  <a class="btn btn-tertiary" href="{% url 'genrequest-list' %}"
     ><i class="fas fa-arrow-left"></i> Back</a
   >
-  <a class="btn custom_order_button" href="{% url 'genrequest-update' pk=genrequest.id %}"
+  <a class="btn btn-tertiary" href="{% url 'genrequest-update' pk=genrequest.id %}"
     ><i class="fas fa-edit"></i> Edit</a
   >
   <a
-    class="btn custom_order_button"
+    class="btn btn-tertiary"
     href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"
     ><i class="fas fa-eye"></i> Orders</a
   >
   <a
-    class="btn custom_order_button_green"
+    class="btn btn-success"
     href="{% url 'genrequest-equipment-create' genrequest_id=genrequest.id %}"
     ><i class="fas fa-plus"></i> Equipment order</a
   >
   <a
-    class="btn custom_order_button_green"
+    class="btn btn-success"
     href="{% url 'genrequest-extraction-create' genrequest_id=genrequest.id %}"
     ><i class="fas fa-plus"></i> Extraction order</a
   >
   <a
-    class="btn custom_order_button_green"
+    class="btn btn-success"
     href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}"
     ><i class="fas fa-plus"></i> Analysis order</a
   >
 
   <a
-    class="btn custom_order_button_red"
+    class="btn "
     href="{% url 'genrequest-delete' pk=genrequest.id %}"
     ><i class="fas fa-trash"></i> Delete</a
   >
 
   {% if user.is_staff %}
-  <a class="btn custom_order_button ml-auto" href="{% url 'staff:add-staff' pk=genrequest.id model_type="genrequest" %}">
+  <a class="btn btn-tertiary ml-auto" href="{% url 'staff:add-staff' pk=genrequest.id model_type="genrequest" %}">
     <input type="hidden" name="type" value="genrequest">
     <i class="fa-solid fa-id-badge"></i> Assign staff
   </a>
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_filter.html b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_filter.html
index 49382992..dba22f53 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_filter.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_filter.html
@@ -1,10 +1,10 @@
-{% extends "genlab_bestilling/base_filter.html" %}
+{% extends 'genlab_bestilling/base_filter.html' %}
 {% load neapolitan %}
 {% load render_table from django_tables2 %}
 
-{% block page-title %}Genetic Project{% endblock page-title %}
-{% block page-inner %}
+{% block page - title %}Genetic Project{% endblock page - title %}
+{% block page - inner %}
 <div class="flex gap-5 mb-5">
-    <a class="btn custom_order_button_green" href="{% url 'genrequest-create' %}"><i class="fas fa-plus"></i> Project</a>
+  <a class="btn btn-success" href="{% url 'genrequest-create' %}"><i class="fas fa-plus"></i> Project</a>
 </div>
-{% endblock page-inner %}
+{% endblock page - inner %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_form.html b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_form.html
index d06e6743..e248139f 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_form.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_form.html
@@ -1,16 +1,21 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load core %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{% if object.id %}{{ object }}{% else %}Create {{ view.model|verbose_name }}{% endif %}</h3>
-    <div class="flex gap-5 mb-5">
-        {% if object.id %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-        {% else %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
-        <a class="btn custom_order_button_green" href="{% url 'nina:project-create' %}"><i class="fas fa-plus"></i> Register UBW project</a>
-        {% endif %}
-    </div>
-    {% formset endpoint=request.path csrf_token=csrf_token form=form %}
-
+  <h3 class="text-4xl mb-5">
+    {% if object.id %}
+      {{ object }}
+    {% else %}
+      Create {{ view.model|verbose_name }}
+    {% endif %}
+  </h3>
+  <div class="flex gap-5 mb-5">
+    {% if object.id %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=object.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    {% else %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
+      <a class="btn btn-success" href="{% url 'nina:project-create' %}"><i class="fas fa-plus"></i> Register UBW project</a>
+    {% endif %}
+  </div>
+  {% formset endpoint=request.path csrf_token=csrf_token form=form %}
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/order_confirm_delete.html b/src/genlab_bestilling/templates/genlab_bestilling/order_confirm_delete.html
index 76eea90c..572ba292 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/order_confirm_delete.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/order_confirm_delete.html
@@ -5,14 +5,14 @@
 {% block content %}
     <h3 class="text-4xl mb-5">Delete Order {{ object }}?</h3>
     <div class="flex gap-5 mb-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-order-list' genrequest_id=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
     </div>
 
     <div>
         <p>Are you sure you want to delete this order?</p>
         <form method="post">
             {% csrf_token %}
-            <button type="submit" class="btn custom_order_button_red">Confirm</button>
+            <button type="submit" class="btn btn-danger">Confirm</button>
         </form>
     </div>
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/order_filter.html b/src/genlab_bestilling/templates/genlab_bestilling/order_filter.html
index 80b5169a..6744567b 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/order_filter.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/order_filter.html
@@ -6,10 +6,10 @@
 {% block page-inner %}
 <div class="flex gap-5 mb-5">
     {% if genrequest %}
-    <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
-    <a class="btn custom_order_button_green" href="{% url 'genrequest-equipment-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
-    <a class="btn custom_order_button_green" href="{% url 'genrequest-extraction-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Extraction order</a>
-    <a class="btn custom_order_button_green" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Analysis order</a>
+    <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
+    <a class="btn btn-success" href="{% url 'genrequest-equipment-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
+    <a class="btn btn-success" href="{% url 'genrequest-extraction-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Extraction order</a>
+    <a class="btn btn-success" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Analysis order</a>
     {% endif %}
 </div>
 {% endblock page-inner %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/sample_list.html b/src/genlab_bestilling/templates/genlab_bestilling/sample_list.html
index 1ebbb60d..a31a8f31 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/sample_list.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/sample_list.html
@@ -6,16 +6,16 @@
     <h3 class="text-4xl mb-5">Samples for Extraction #{{ view.kwargs.pk }}</h3>
     {% render_table table %}
     <div class="flex gap-5 mt-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-extraction-detail' genrequest_id=genrequest.id pk=view.kwargs.pk %}"><i class="fas fa-arrow-left"></i> Back to order</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-extraction-detail' genrequest_id=genrequest.id pk=view.kwargs.pk %}"><i class="fas fa-arrow-left"></i> Back to order</a>
         {% if extraction.status == 'draft' %}
         {% url 'genrequest-order-confirm' genrequest_id=view.kwargs.genrequest_id pk=view.kwargs.pk as confirm_order_url %}
-        {% action-button action=confirm_order_url class="btn custom_order_button" submit_text="Deliver order" csrf_token=csrf_token %}
-        <a class="ml-auto btn custom_order_button" href="{% url 'genrequest-extraction-samples-edit' genrequest_id=genrequest.id pk=view.kwargs.pk %}">Edit samples</a>
+        {% action-button action=confirm_order_url class="btn btn-tertiary" submit_text="Deliver order" csrf_token=csrf_token %}
+        <a class="ml-auto btn btn-tertiary" href="{% url 'genrequest-extraction-samples-edit' genrequest_id=genrequest.id pk=view.kwargs.pk %}">Edit samples</a>
         {% endif %}
 
         {% if extraction.status != 'draft' %}
-        <a class="btn custom_order_button" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}?from_order={{ view.kwargs.pk }}">Analyze these samples</a>
+        <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}?from_order={{ view.kwargs.pk }}">Analyze these samples</a>
         {% endif %}
-        <a class="btn custom_order_button" href="{% url 'samples-csv' %}?order={{ view.kwargs.pk }}"><i class="fas fa-download"></i> Download CSV</a>
+        <a class="btn btn-tertiary" href="{% url 'samples-csv' %}?order={{ view.kwargs.pk }}"><i class="fas fa-download"></i> Download CSV</a>
     </div>
 {% endblock %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/samplemarkeranalysis_list.html b/src/genlab_bestilling/templates/genlab_bestilling/samplemarkeranalysis_list.html
index 5b81034a..58d0e3e4 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/samplemarkeranalysis_list.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/samplemarkeranalysis_list.html
@@ -1,25 +1,25 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load neapolitan %}
 {% load render_table from django_tables2 %}
 
 {% block content %}
-    {% if analysis.short_timeframe %}
+  {% if analysis.short_timeframe %}
     <div class="px-4 alert alert-warning">
-    <p>
+      <p>
         Contact <a class="underline" href="mailto:ninagen@nina.no">ninagen@nina.no</a> due to the short timeframe for this project
-    </p>
+      </p>
     </div>
+  {% endif %}
+  <h3 class="text-4xl mb-5">{{ analysis }} - Samples</h3>
+  {% render_table table %}
+  <div class="flex gap-5 mt-5">
+    <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-detail' genrequest_id=genrequest.id pk=view.kwargs.pk %}"><i class="fas fa-arrow-left"></i> Back to order</a>
+    {% if analysis.status == 'draft' %}
+      {% url 'genrequest-order-confirm' genrequest_id=view.kwargs.genrequest_id pk=view.kwargs.pk as confirm_order_url %}
+      {% action-button action=confirm_order_url class='bg-brand-secondary text-white' submit_text='Deliver order' csrf_token=csrf_token %}
+      {% if not analysis.from_order %}
+        <a class="ml-auto btn btn-tertiary" href="{% url 'genrequest-analysis-samples-edit' genrequest_id=genrequest.id pk=view.kwargs.pk %}">Edit samples</a>
+      {% endif %}
     {% endif %}
-    <h3 class="text-4xl mb-5">{{ analysis }} - Samples</h3>
-    {% render_table table %}
-    <div class="flex gap-5 mt-5">
-        <a class="btn custom_order_button" href="{% url 'genrequest-analysis-detail' genrequest_id=genrequest.id pk=view.kwargs.pk %}"><i class="fas fa-arrow-left"></i> Back to order</a>
-        {% if analysis.status == 'draft' %}
-        {% url 'genrequest-order-confirm' genrequest_id=view.kwargs.genrequest_id pk=view.kwargs.pk as confirm_order_url %}
-        {% action-button action=confirm_order_url class="bg-secondary text-white" submit_text="Deliver order" csrf_token=csrf_token %}
-        {% if not analysis.from_order %}
-        <a class="ml-auto btn custom_order_button" href="{% url 'genrequest-analysis-samples-edit' genrequest_id=genrequest.id pk=view.kwargs.pk %}">Edit samples</a>
-        {% endif %}
-        {% endif %}
-    </div>
+  </div>
 {% endblock %}
diff --git a/src/nina/templates/nina/project_detail.html b/src/nina/templates/nina/project_detail.html
index bd38e40d..022a0d9f 100644
--- a/src/nina/templates/nina/project_detail.html
+++ b/src/nina/templates/nina/project_detail.html
@@ -15,21 +15,21 @@ <h3 id="genrequest" class="text-4xl">{{ object }}</h3>
 {% endif %}
 
 <div class="flex gap-5 my-5">
-  <a class="btn custom_order_button" href="{% url 'nina:project-list' %}"
+  <a class="btn btn-tertiary" href="{% url 'nina:project-list' %}"
     ><i class="fas fa-arrow-left"></i> Back</a
   >
-  <a class="btn custom_order_button" href="{% url 'nina:project-edit' pk=object.pk %}"
+  <a class="btn btn-tertiary" href="{% url 'nina:project-edit' pk=object.pk %}"
     ><i class="fas fa-edit"></i> Edit</a
   >
-  <a class="btn custom_order_button" href="{% url 'nina:project-members-edit' pk=object.pk %}"
+  <a class="btn btn-tertiary" href="{% url 'nina:project-members-edit' pk=object.pk %}"
     ><i class="fas fa-edit"></i> Members</a
   >
   {% if object.verified_at %}
-  <a class="btn custom_order_button_blue" href="{% url 'genrequest-list' %}?project={{object.pk}}"
+  <a class="btn btn-primary" href="{% url 'genrequest-list' %}?project={{object.pk}}"
     ><i class="fas fa-folder"></i> Genetic projects</a
   >
     {% if object.active %}
-    <a class="btn custom_order_button_green" href="{% url 'genrequest-create' %}?project={{object.pk}}"
+    <a class="btn btn-success" href="{% url 'genrequest-create' %}?project={{object.pk}}"
       ><i class="fas fa-plus"></i> New Genetic project</a
     >
     {% endif %}
diff --git a/src/nina/templates/nina/project_form.html b/src/nina/templates/nina/project_form.html
index 55da8b8d..7588ee4a 100644
--- a/src/nina/templates/nina/project_form.html
+++ b/src/nina/templates/nina/project_form.html
@@ -1,14 +1,19 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load core static %}
 {% load formsetify %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{% if object.id %}{{ object }}{% else %}Create {{ view.model|verbose_name }}{% endif %}</h3>
-    <div class="flex gap-5 mb-5">
-    </div>
+  <h3 class="text-4xl mb-5">
+    {% if object.id %}
+      {{ object }}
+    {% else %}
+      Create {{ view.model|verbose_name }}
+    {% endif %}
+  </h3>
+  <div class="flex gap-5 mb-5"></div>
 
-    <django-formset endpoint="{{ request.path }}" csrf-token="{{ csrf_token }}">
-        {% render_form form "tailwind"  %}
-        <button type="button" class="btn custom_order_button_blue" df-click="submit -> proceed">Submit</button>
-    </django-formset>
+  <django-formset endpoint="{{ request.path }}" csrf-token="{{ csrf_token }}">
+    {% render_form form 'tailwind' %}
+    <button type="button" class="btn btn-primary" df-click="submit -> proceed">Submit</button>
+  </django-formset>
 {% endblock %}
diff --git a/src/nina/templates/nina/projectmembership_form.html b/src/nina/templates/nina/projectmembership_form.html
index fbdfb9e1..bcedcec9 100644
--- a/src/nina/templates/nina/projectmembership_form.html
+++ b/src/nina/templates/nina/projectmembership_form.html
@@ -1,16 +1,16 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load core static formsetify %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{{ object }}</h3>
-    <div class="flex gap-5 mb-5">
-        <a class="btn custom_order_button" href="{% url 'nina:project-detail' pk=view.kwargs.pk %}"><i class="fas fa-arrow-left"></i> Back</a>
-    </div>
-    {% formset endpoint=request.path csrf_token=csrf_token form_collection=form_collection %}
+  <h3 class="text-4xl mb-5">{{ object }}</h3>
+  <div class="flex gap-5 mb-5">
+    <a class="btn btn-tertiary" href="{% url 'nina:project-detail' pk=view.kwargs.pk %}"><i class="fas fa-arrow-left"></i> Back</a>
+  </div>
+  {% formset endpoint=request.path csrf_token=csrf_token form_collection=form_collection %}
 {% endblock %}
 
 {% block body_javascript %}
-{{ block.super }}
-<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
-{{ filter.form.media }}
-{% endblock body_javascript %}
+  {{ block.super }}
+  <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
+  {{ filter.form.media }}
+{% endblock %}
diff --git a/src/nina/templates/nina/projectmembership_list.html b/src/nina/templates/nina/projectmembership_list.html
index d626c8fe..496f7334 100644
--- a/src/nina/templates/nina/projectmembership_list.html
+++ b/src/nina/templates/nina/projectmembership_list.html
@@ -1,11 +1,11 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load render_table from django_tables2 %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">NINA Projects you are involved in</h3>
-    <div class="flex gap-5 mb-5">
-        <a class="btn custom_order_button_green" href="{% url 'nina:project-create' %}"><i class="fas fa-plus"></i> Register a project</a>
-    </div>
+  <h3 class="text-4xl mb-5">NINA Projects you are involved in</h3>
+  <div class="flex gap-5 mb-5">
+    <a class="btn btn-success" href="{% url 'nina:project-create' %}"><i class="fas fa-plus"></i> Register a project</a>
+  </div>
 
-    {% render_table table %}
+  {% render_table table %}
 {% endblock %}
diff --git a/src/staff/templates/staff/analysisorder_detail.html b/src/staff/templates/staff/analysisorder_detail.html
index 1b22cdae..143272a4 100644
--- a/src/staff/templates/staff/analysisorder_detail.html
+++ b/src/staff/templates/staff/analysisorder_detail.html
@@ -11,16 +11,16 @@ <h3 class="text-4xl mb-5">Order {{ object }}</h3>
         <div class="ml-auto"></div>
         {% if object.status != object.OrderStatus.DRAFT %}
             {% url 'staff:order-to-draft' pk=object.id as to_draft_url %}
-            {% action-button action=to_draft_url class="custom_order_button" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
+            {% action-button action=to_draft_url class="btn btn-tertiary" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
         {% endif %}
         {% if extraction_orders|length == 1 and not extraction_has_multiple_analysis_orders %}
-            <a class="btn custom_order_button_blue" href="{% url 'staff:order-extraction-detail' pk=extraction_orders.first.id %}">Go to {{ extraction_orders.first }}</a>
+            <a class="btn btn-primary" href="{% url 'staff:order-extraction-detail' pk=extraction_orders.first.id %}">Go to {{ extraction_orders.first }}</a>
         {% endif %}
-        <a class="btn custom_order_button_dark_blue" href="{% url 'staff:order-analysis-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
+        <a class="btn btn-secondary" href="{% url 'staff:order-analysis-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
         {% if not object.is_seen %}
             <form method="post" action="{% url 'staff:mark-as-seen' pk=object.id %}">
                 {% csrf_token %}
-                <button class="btn bg-[#DFF7CA] border-[#93AD7D] hover:bg-[#C9EBB0] hover:border-[#7F996C] active:bg-[#B5DA9C] active:border-[#6B855B] text-nowrap" style="height: auto;" type="submit">
+                <button class="btn btn-success" style="height: auto;" type="submit">
                     <p><i class="fa-solid fa-circle-check"></i> Mark as seen</p>
                 </button>
             </form>
diff --git a/src/staff/templates/staff/base.html b/src/staff/templates/staff/base.html
index 0486d3be..0c7b971b 100644
--- a/src/staff/templates/staff/base.html
+++ b/src/staff/templates/staff/base.html
@@ -2,35 +2,35 @@
 
 {% block main %}
 <main class="flex flex-col sm:flex-row">
-    <div class="flex flex-col sm:w-56 p-5 flex-shrink-0 bg-white">
+    <div class="flex flex-col sm:w-60 p-5 flex-shrink-0 bg-white">
         <h5 class="font-bold text-xl">Menu</h5>
         <ul class="flex flex-col gap-2 mt-2 text-lg px-4">
           <li>
-            <a class="hover:text-primary {% if request.resolver_match.url_name == 'dashboard' %}text-primary{% endif %}"
+            <a class="hover:text-brand-primary {% if request.resolver_match.url_name == 'dashboard' %}text-brand-primary font-bold{% endif %}"
                href="{% url 'staff:dashboard' %}">Dashboard</a>
         </li>
         <li>
-            <a class="hover:text-primary {% if request.resolver_match.url_name == 'projects-list' %}text-primary{% endif %}"
+            <a class="hover:text-brand-primary {% if request.resolver_match.url_name == 'projects-list' %}text-brand-primary font-bold{% endif %}"
                href="{% url 'staff:projects-list' %}">Projects</a>
         </li>
         <li>
-            <a class="hover:text-primary {% if request.resolver_match.url_name == 'order-equipment-list' %}text-primary{% endif %}"
+            <a class="hover:text-brand-primary {% if request.resolver_match.url_name == 'order-equipment-list' %}text-brand-primary font-bold{% endif %}"
                href="{% url 'staff:order-equipment-list' %}">Equipment Orders</a>
         </li>
         <li>
-            <a class="hover:text-primary {% if request.resolver_match.url_name == 'order-extraction-list' %}text-primary{% endif %}"
+            <a class="hover:text-brand-primary {% if request.resolver_match.url_name == 'order-extraction-list' %}text-brand-primary font-bold{% endif %}"
                href="{% url 'staff:order-extraction-list' %}">Extraction Orders</a>
         </li>
         <li>
-            <a class="hover:text-primary {% if request.resolver_match.url_name == 'order-analysis-list' %}text-primary{% endif %}"
+            <a class="hover:text-brand-primary {% if request.resolver_match.url_name == 'order-analysis-list' %}text-brand-primary font-bold{% endif %}"
                href="{% url 'staff:order-analysis-list' %}">Analysis Orders</a>
         </li>
         <li>
-            <a class="hover:text-primary {% if request.resolver_match.url_name == 'samples-list' %}text-primary{% endif %}"
+            <a class="hover:text-brand-primary {% if request.resolver_match.url_name == 'samples-list' %}text-brand-primary font-bold{% endif %}"
                href="{% url 'staff:samples-list' %}">Samples</a>
         </li>
         <li>
-            <a class="hover:text-primary {% if request.resolver_match.url_name == 'plates-list' %}text-primary{% endif %}"
+            <a class="hover:text-brand-primary {% if request.resolver_match.url_name == 'plates-list' %}text-brand-primary font-bold{% endif %}"
                href="{% url 'staff:plates-list' %}">Plates</a>
         </li>
         </ul>
diff --git a/src/staff/templates/staff/components/extraction_tabs.html b/src/staff/templates/staff/components/extraction_tabs.html
index 31dd5816..5925d1a0 100644
--- a/src/staff/templates/staff/components/extraction_tabs.html
+++ b/src/staff/templates/staff/components/extraction_tabs.html
@@ -1,15 +1,7 @@
 <div class="flex items-center w-full min-w-0 mb-5">
-    <div role="tablist" class="tabs tabs-box bg-white rounded-md border">
-        <a role="tab"
-            class="tab {% if active_tab == 'ordered' %}tab-active bg-[#FFEDC0] rounded-md{% endif %}"
-            href="{% url 'staff:order-extraction-samples' pk=order.id %}">
-            Ordered extraction
-        </a>
-        <a role="tab"
-            class="tab {% if active_tab == 'lab' %}tab-active bg-[#FFEDC0] rounded-md{% endif %}"
-            href="{% url 'staff:order-extraction-samples-lab' pk=order.id %}">
-            Lab extraction
-        </a>
-    </div>
-    <a class="btn custom_order_button_dark_blue ml-auto" href="{% url 'samples-csv' %}?order={{ order.pk }}"><i class="fas fa-download"></i> Export complete sheet</a>
+  <div role="tablist" class="tabs">
+    <a role="tab" class="tab {% if active_tab == 'ordered' %}tab-active{% endif %}" href="{% url 'staff:order-extraction-samples' pk=order.id %}">Ordered extraction</a>
+    <a role="tab" class="tab {% if active_tab == 'lab' %}tab-active{% endif %}" href="{% url 'staff:order-extraction-samples-lab' pk=order.id %}">Lab extraction</a>
+  </div>
+  <a class="btn btn-secondary ml-auto" href="{% url 'samples-csv' %}?order={{ order.pk }}"><i class="fas fa-download"></i> Export complete sheet</a>
 </div>
diff --git a/src/staff/templates/staff/components/seen_column.html b/src/staff/templates/staff/components/seen_column.html
index 85c11ce1..1229a1db 100644
--- a/src/staff/templates/staff/components/seen_column.html
+++ b/src/staff/templates/staff/components/seen_column.html
@@ -1,7 +1,9 @@
 <form method="post" action="{% url 'staff:mark-as-seen' pk=record.id %}">
   {% csrf_token %}
   <input type="hidden" name="return_to" value="dashboard" />
-  <button class="btn btn-sm bg-[#DFF7CA] border-[#93AD7D] hover:bg-[#C9EBB0] hover:border-[#7F996C] active:bg-[#B5DA9C] active:border-[#6B855B] text-nowrap" style="height: auto;" type="submit">
-    <p><i class="fa-solid fa-circle-check"></i> Mark as seen</p>
+  <button class="btn btn-sm btn-success text-nowrap" type="submit">
+    <p>
+      <i class="fa-solid fa-circle-check"></i> Mark as seen
+    </p>
   </button>
 </form>
diff --git a/src/staff/templates/staff/dashboard.html b/src/staff/templates/staff/dashboard.html
index 7361df8f..dabf286f 100644
--- a/src/staff/templates/staff/dashboard.html
+++ b/src/staff/templates/staff/dashboard.html
@@ -7,18 +7,10 @@
 
 {% block content %}
   <div class="flex items-center mb-5 gap-2">
-    <div role="tablist" class="tabs tabs-lift bg-white rounded-xl border">
-      <a role="tab"
-       class="tab {% if not request.GET.area %}tab-active bg-[#FFEDC0] rounded-xl{% endif %}"
-       href="{% url 'staff:dashboard' %}">
-      All
-      </a>
+    <div role="tablist" class="tabs">
+      <a role="tab" class="tab {% if not request.GET.area %}tab-active{% endif %}" href="{% url 'staff:dashboard' %}">All</a>
       {% for area in areas %}
-      <a role="tab"
-         class="tab {% if request.GET.area == area.pk|stringformat:'s' %}tab-active bg-[#FFEDC0] rounded-xl{% endif %}"
-         href="{% url 'staff:dashboard' %}?area={{ area.pk }}">
-        {{ area.name }}
-      </a>
+        <a role="tab" class="tab {% if request.GET.area == area.pk|stringformat:'s' %}tab-active rounded-[6px]{% endif %}" href="{% url 'staff:dashboard' %}?area={{ area.pk }}">{{ area.name }}</a>
       {% endfor %}
     </div>
 
diff --git a/src/staff/templates/staff/equipmentorder_detail.html b/src/staff/templates/staff/equipmentorder_detail.html
index a04344d0..2aa0240c 100644
--- a/src/staff/templates/staff/equipmentorder_detail.html
+++ b/src/staff/templates/staff/equipmentorder_detail.html
@@ -33,7 +33,7 @@ <h3 class="text-4xl mb-5">Order {{ object }}</h3>
         {% if object.status == object.OrderStatus.PROCESSING %}
             {% url 'staff:order-to-next-status' pk=object.id as to_next_status_url %}
             {% with "<i class='fa-solid fa-circle-check'></i> Set as "|add:object.next_status as btn_name %}
-                {% action-button action=to_next_status_url class="custom_order_button_green" submit_text=btn_name csrf_token=csrf_token %}
+                {% action-button action=to_next_status_url class="btn btn-success" submit_text=btn_name csrf_token=csrf_token %}
             {% endwith %}
         {% endif %}
     </div>
@@ -45,9 +45,9 @@ <h5 class="text-2xl my-5">Requested Equipment</h5>
     {% #table headers=table_header %}
         {% for oq in object.equipments.all %}
             <tr>
-                {% #table-cell %}{{ oq.equipment.name }}{% /table-cell %}
-                {% #table-cell %}{{ oq.buffer.name }} {{ oq.buffer_quantity}} {{ oq.buffer.unit }}{% /table-cell %}
-                {% #table-cell %}{{ oq.quantity }}{% /table-cell %}
+                {% #table-cell %}{{ oq.equipment.name }}{% /table-cell %}
+                {% #table-cell %}{{ oq.buffer.name }} {{ oq.buffer_quantity}} {{ oq.buffer.unit }}{% /table-cell %}
+                {% #table-cell %}{{ oq.quantity }}{% /table-cell %}
             </tr>
         {% empty %}
             <tr>
diff --git a/src/staff/templates/staff/extractionorder_detail.html b/src/staff/templates/staff/extractionorder_detail.html
index ec7ffdf3..dfa47b42 100644
--- a/src/staff/templates/staff/extractionorder_detail.html
+++ b/src/staff/templates/staff/extractionorder_detail.html
@@ -12,12 +12,12 @@ <h3 class="text-4xl mb-5">Order {{ object }}</h3>
         <div class="ml-auto"></div>
         {% if object.status != object.OrderStatus.DRAFT %}
             {% url 'staff:order-to-draft' pk=object.id as to_draft_url %}
-            {% action-button action=to_draft_url class="custom_order_button" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
+            {% action-button action=to_draft_url class="btn-tertiary" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
         {% endif %}
         {% if analysis_orders|length == 1 and not analysis_has_multiple_extraction_orders %}
-            <a class="btn custom_order_button_blue" href="{% url 'staff:order-analysis-detail' pk=analysis_orders.first.id %}">Go to {{ analysis_orders.first}}</a>
+            <a class="btn btn-primary" href="{% url 'staff:order-analysis-detail' pk=analysis_orders.first.id %}">Go to {{ analysis_orders.first}}</a>
         {% endif %}
-        <a class="btn custom_order_button_dark_blue" href="{% url 'staff:order-extraction-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
+        <a class="btn btn-secondary" href="{% url 'staff:order-extraction-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
 
         {% if not object.is_seen %}
             <form method="post" action="{% url 'staff:mark-as-seen' pk=object.id %}">
diff --git a/src/staff/templates/staff/extractionplate_detail.html b/src/staff/templates/staff/extractionplate_detail.html
index 38f6fb67..289abfad 100644
--- a/src/staff/templates/staff/extractionplate_detail.html
+++ b/src/staff/templates/staff/extractionplate_detail.html
@@ -10,6 +10,6 @@ <h3 class="text-4xl mb-5">Plate {{ object }}</h3>
     {% object-detail-staff object=object %}
 
     <div class="flex gap-5 my-5">
-        <a class="btn custom_order_button" href="{% url 'staff:plates-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'staff:plates-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
     </div>
 {% endblock %}
diff --git a/src/staff/templates/staff/extractionplate_filter.html b/src/staff/templates/staff/extractionplate_filter.html
index b0bcb7ba..8931eb3f 100644
--- a/src/staff/templates/staff/extractionplate_filter.html
+++ b/src/staff/templates/staff/extractionplate_filter.html
@@ -8,7 +8,7 @@
 
 {% block page-inner %}
 <div class="flex justify-end my-3">
-    <a class="btn custom_order_button_green" href="{% url 'staff:plates-create' %}"><i class="fas fa-plus"></i> Create</a>
+    <a class="btn btn-success" href="{% url 'staff:plates-create' %}"><i class="fas fa-plus"></i> Create</a>
 </div>
 
 {% filtering filter=filter request=request %}
diff --git a/src/staff/templates/staff/extractionplate_form.html b/src/staff/templates/staff/extractionplate_form.html
index 8274f222..d09b1f88 100644
--- a/src/staff/templates/staff/extractionplate_form.html
+++ b/src/staff/templates/staff/extractionplate_form.html
@@ -1,20 +1,24 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load crispy_forms_tags core %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">{% if object.id %}{{ object }}{% else %}Create {{ view.model|verbose_name }}{% endif %}</h3>
-    <div class="flex gap-5 mb-5">
-        {% if object.id %}
-        <a class="btn custom_order_button" href=".._/"><i class="fas fa-arrow-left"></i> Back</a>
-        {% else %}
-        <a class="btn custom_order_button" href="../"><i class="fas fa-arrow-left"></i> Back</a>
-        {% endif %}
-    </div>
-    <form method="post">
-        {{ form|crispy }}
-        {% csrf_token %}
-        <button class="btn custom_order_button">
-            Send
-        </button>
-    </form>
+  <h3 class="text-4xl mb-5">
+    {% if object.id %}
+      {{ object }}
+    {% else %}
+      Create {{ view.model|verbose_name }}
+    {% endif %}
+  </h3>
+  <div class="flex gap-5 mb-5">
+    {% if object.id %}
+      <a class="btn btn-tertiary" href=".._/"><i class="fas fa-arrow-left"></i> Back</a>
+    {% else %}
+      <a class="btn btn-tertiary" href="../"><i class="fas fa-arrow-left"></i> Back</a>
+    {% endif %}
+  </div>
+  <form method="post">
+    {{ form|crispy }}
+    {% csrf_token %}
+    <button class="btn btn-tertiary">Send</button>
+  </form>
 {% endblock %}
diff --git a/src/staff/templates/staff/order_staff_edit.html b/src/staff/templates/staff/order_staff_edit.html
index 9ea3ef7d..986e7bf3 100644
--- a/src/staff/templates/staff/order_staff_edit.html
+++ b/src/staff/templates/staff/order_staff_edit.html
@@ -16,10 +16,10 @@
   <h3 class="text-4xl mb-5">Manage Responsible Staff - {{ object }}</h3>
 
   <div class="flex gap-5 mb-5">
-    {% if model_type == "genrequest" %}
-    <a class="btn custom_order_button" href="{% url 'genrequest-detail' pk=object.pk %}"><i class="fas fa-arrow-left"></i> Back to Genrequest</a>
+    {% if model_type == 'genrequest' %}
+      <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=object.pk %}"><i class="fas fa-arrow-left"></i> Back to Genrequest</a>
     {% else %}
-    <a class="btn custom_order_button" href="{% url 'staff:order-'|add:model_type|add:'-detail' pk=object.pk %}"><i class="fas fa-arrow-left"></i> Back to Order</a>
+      <a class="btn btn-tertiary" href="{% url 'staff:order-'|add:model_type|add:'-detail' pk=object.pk %}"><i class="fas fa-arrow-left"></i> Back to Order</a>
     {% endif %}
   </div>
 
@@ -43,7 +43,7 @@ <h4 class="text-lg font-semibold mb-4">Assign Staff to Order</h4>
       </div>
 
       <div>
-        <button type="submit" class="btn custom_order_button"><i class="fas fa-save"></i> Update staff assignment</button>
+        <button type="submit" class="btn btn-tertiary"><i class="fas fa-save"></i> Update staff assignment</button>
       </div>
     </form>
   </div>
diff --git a/src/staff/templates/staff/project_detail.html b/src/staff/templates/staff/project_detail.html
index 99c977fd..bce2633a 100644
--- a/src/staff/templates/staff/project_detail.html
+++ b/src/staff/templates/staff/project_detail.html
@@ -7,7 +7,7 @@ <h3 class="text-4xl mb-5">Project {{ object }}</h3>
     <div class="flex gap-5 mb-5"></div>
 
     <div class="flex gap-5 my-5">
-        <a class="btn custom_order_button" href="{% url 'staff:projects-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'staff:projects-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
         {% url 'staff:projects-verify' pk=object.pk as verify_url %}
         <form method="post" action="{{ verify_url }}">
             {% csrf_token %}
diff --git a/src/staff/templates/staff/sample_detail.html b/src/staff/templates/staff/sample_detail.html
index 6eb55d3f..c4a995e6 100644
--- a/src/staff/templates/staff/sample_detail.html
+++ b/src/staff/templates/staff/sample_detail.html
@@ -10,6 +10,6 @@ <h3 class="text-4xl mb-5">Sample {{ object }}</h3>
     {% object-detail-staff object=object %}
 
     <div class="flex gap-5 my-5">
-        <a class="btn custom_order_button" href="{% url 'staff:samples-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
+        <a class="btn btn-tertiary" href="{% url 'staff:samples-list' %}"><i class="fas fa-arrow-left"></i> Back</a>
     </div>
 {% endblock %}
diff --git a/src/staff/templates/staff/sample_filter.html b/src/staff/templates/staff/sample_filter.html
index db087c4e..b4ea0dc6 100644
--- a/src/staff/templates/staff/sample_filter.html
+++ b/src/staff/templates/staff/sample_filter.html
@@ -5,7 +5,7 @@
 
 {% block page-title %}
 <div class="flex gap-5 mb-10 items-center w-full">
-  <a class="btn btn-sm custom_order_button" href="../"><i class="fas fa-arrow-left"></i> <span class="font-normal">Back</span></a>
+  <a class="btn btn-sm btn-tertiary" href="../"><i class="fas fa-arrow-left"></i> <span class="font-normal">Back</span></a>
 </div>
 <div class="flex justify-between items-center w-full">
     <div>
@@ -31,10 +31,10 @@
       <input type="hidden" name="sort" value="{{ request.GET.sort|default:'' }}">
       {% next_url_input %}
       <div class="flex gap-5 mb-5">
-        <button class="btn custom_order_button_green" type="submit" name="generate_genlab_ids">
+        <button class="btn btn-success" type="submit" name="generate_genlab_ids">
             <i class="fa-solid fa-id-badge"></i> Generate genlab IDs
         </button>
-        <a class="btn custom_order_button_blue" href="{% url 'samples-labels-csv' %}?order={{ order.pk }}"><i class="fas fa-download"></i> Export to genlabID printer</a>
+        <a class="btn btn-primary" href="{% url 'samples-labels-csv' %}?order={{ order.pk }}"><i class="fas fa-download"></i> Export to genlabID printer</a>
 
         <div class="ml-auto text-right w-full max-w-xs">
           <div class="mb-1 font-medium text-sm">
diff --git a/src/staff/templates/staff/sample_lab.html b/src/staff/templates/staff/sample_lab.html
index d27e8601..3b8fa684 100644
--- a/src/staff/templates/staff/sample_lab.html
+++ b/src/staff/templates/staff/sample_lab.html
@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="flex gap-5 mb-10 items-center w-full">
-    <a class="btn btn-sm font-normal custom_order_button" href="../"><i class="fas fa-arrow-left"></i> <span class="font-normal">Back</span></a>
+    <a class="btn btn-sm font-normal btn-tertiary" href="../"><i class="fas fa-arrow-left"></i> <span class="font-normal">Back</span></a>
 </div>
 <h3 class="text-4xl mb-5">{% block page-title %}{% if order %}Samples {{ order }}{% else %}Samples{% endif %}{% endblock page-title %}</h3>
 {% block page-inner %}
@@ -19,7 +19,7 @@ <h3 class="text-4xl mb-5">{% block page-title %}{% if order %}Samples {{ order }
         {% csrf_token %}
         {% next_url_input %}
         {% for status in statuses %}
-            <button class="btn btn-sm custom_order_button_green" type="submit" name="status" value="{{ status }}">
+            <button class="btn btn-sm btn-success" type="submit" name="status" value="{{ status }}">
                 {{ status|capfirst }}
             </button>
         {% endfor %}
@@ -27,7 +27,7 @@ <h3 class="text-4xl mb-5">{% block page-title %}{% if order %}Samples {{ order }
             <button type="button"
                 id="parent-dropdown-button"
                 onclick="document.getElementById('parent-dropdown-menu').classList.toggle('hidden')"
-                class="btn btn-sm bg-slate-100 px-4 custom_order_button">
+                class="btn btn-sm bg-slate-100 px-4 btn-tertiary">
             <span id="selected-method-{{ record.pk }}" class="truncate block w-full text-center">
                 {{ record.selected_isolation_method.name|default:"Isolation method" }}
                 <i class="fa-solid fa-chevron-down ml-2"></i>
diff --git a/src/staff/templates/staff/samplemarkeranalysis_filter.html b/src/staff/templates/staff/samplemarkeranalysis_filter.html
index 52b7051c..7c5cf160 100644
--- a/src/staff/templates/staff/samplemarkeranalysis_filter.html
+++ b/src/staff/templates/staff/samplemarkeranalysis_filter.html
@@ -6,7 +6,7 @@
 {% block content %}
 {% if order %}
 <div class="flex gap-5 mb-5">
-    <a class="btn btn-sm custom_order_button" href="../"><i class="fas fa-arrow-left"></i> Back</a>
+    <a class="btn btn-sm btn-tertiary" href="../"><i class="fas fa-arrow-left"></i> Back</a>
 </div>
 {% endif %}
 <h3 class="text-4xl mb-5">{% block page-title %}{% if order %}Samples {{ order }}{% else %}Samples{% endif %}{% endblock page-title %}</h3>
@@ -18,7 +18,7 @@ <h3 class="text-4xl mb-5">{% block page-title %}{% if order %}Samples {{ order }
     {% csrf_token %}
     {% next_url_input %}
     {% for status in statuses %}
-        <button class="btn btn-sm custom_order_button_green" type="submit" name="status" value="{{ status }}">
+        <button class="btn btn-sm btn-success" type="submit" name="status" value="{{ status }}">
             {% if status == "pcr" %}
                 PCR
             {% else %}
diff --git a/src/staff/templatetags/order_tags.py b/src/staff/templatetags/order_tags.py
index 4069543b..250b080b 100644
--- a/src/staff/templatetags/order_tags.py
+++ b/src/staff/templatetags/order_tags.py
@@ -378,7 +378,7 @@ def contact_detail_table(order: Order) -> dict:
         if result_contacts:
             result_contacts_html = format_html_join(
                 "; ",
-                '<a href="mailto:{}" class="text-primary underline !text-primary">{}</a>',  # noqa: E501
+                '<a href="mailto:{}" class="text-brand-primary underline !text-brand-primary">{}</a>',  # noqa: E501
                 [(email[0], email[0]) for email in result_contacts],
             )
 
diff --git a/src/templates/components/action-button.html b/src/templates/components/action-button.html
index 11c2e216..389e5c47 100644
--- a/src/templates/components/action-button.html
+++ b/src/templates/components/action-button.html
@@ -1,10 +1,10 @@
 {% load static %}
 
-{% var submit_text=submit_text|default:"Submit" %}
-{% var class=class|default:"bg-secondary text-white" %}
+{% var submit_text=submit_text|default:'Submit' %}
+{% var class=class|default:'bg-brand-secondary text-white' %}
 
 <form method="post" action="{{ action }}">
-    {% csrf_token %}
-    {% if form %}{{ form }}{% endif %}
-    <button class="btn {{ class }}" type="submit">{{ submit_text|safe }}</button>
+  {% csrf_token %}
+  {% if form %}{{ form }}{% endif %}
+  <button class="btn {{ class }}" type="submit">{{ submit_text|safe }}</button>
 </form>
diff --git a/src/templates/components/filtering.html b/src/templates/components/filtering.html
index 8502ada0..a4bf199c 100644
--- a/src/templates/components/filtering.html
+++ b/src/templates/components/filtering.html
@@ -1,17 +1,17 @@
 {% load crispy_forms_tags static %}
 
-<form method="get" class="py-3 px-4 border mb-3 ">
-    <div class="mb-2">
-        <span class="text-xl">Filters</span>
-    </div>
-    <div class="flex flex-wrap gap-4">
-        {{ filter.form | crispy }}
-        <div class="flex items-center gap-2">
-            <button class="btn btn-sm custom_order_button_blue" type="submit">
-                <i class="fa-solid fa-filter"></i>
-                Apply filters
-            </button>
-            <a href="{{ request.path }}" class="btn btn-sm custom_order_button">Clear all</a>
-        </div>
+<form method="get" class="py-3 px-4 border mb-3">
+  <div class="mb-2">
+    <span class="text-xl">Filters</span>
+  </div>
+  <div class="flex flex-wrap gap-4">
+    {{ filter.form|crispy }}
+    <div class="flex items-center gap-2">
+      <button class="btn btn-sm btn-primary" type="submit">
+        <i class="fa-solid fa-filter"></i>
+        Apply filters
+      </button>
+      <a href="{{ request.path }}" class="btn btn-sm btn-tertiary">Clear all</a>
     </div>
+  </div>
 </form>
diff --git a/src/templates/components/formset.html b/src/templates/components/formset.html
index e9576d8e..56dd7f9c 100644
--- a/src/templates/components/formset.html
+++ b/src/templates/components/formset.html
@@ -1,15 +1,15 @@
 {% load static %}
 {% load formsetify %}
 
-{% var submit_text=submit_text|default:"Submit" %}
-{% var reset_text=reset_text|default:"Reset to initial" %}
+{% var submit_text=submit_text|default:'Submit' %}
+{% var reset_text=reset_text|default:'Reset to initial' %}
 
 <django-formset endpoint="{{ endpoint }}" csrf-token="{{ csrf_token }}">
-    {% if form_collection %}{{ form_collection }}{% endif %}
-    {% if form %}{{ form }}{% endif %}
-    <button class="btn bg-secondary custom_order_button_blue" type="button" df-click="disable -> submit -> proceed !~ scrollToError">{{ submit_text }}</button>
-    <button class="btn bg-default custom_order_button" type="button" df-click="reset">{{ reset_text }}</button>
+  {% if form_collection %}{{ form_collection }}{% endif %}
+  {% if form %}{{ form }}{% endif %}
+  <button class="btn bg-brand-secondary btn-primary" type="button" df-click="disable -> submit -> proceed !~ scrollToError">{{ submit_text }}</button>
+  <button class="btn bg-default btn-tertiary" type="button" df-click="reset">{{ reset_text }}</button>
 </django-formset>
 
-<link href="{% static 'formset/css/collections.css' %}" rel="stylesheet">
+<link href="{% static 'formset/css/collections.css' %}" rel="stylesheet" />
 <script type="module" src="{% static 'formset/js/django-formset.js' %}"></script>
diff --git a/src/templates/core/partials/app-dropdown.html b/src/templates/core/partials/app-dropdown.html
index 5fe3eb5f..11ec583c 100644
--- a/src/templates/core/partials/app-dropdown.html
+++ b/src/templates/core/partials/app-dropdown.html
@@ -34,7 +34,7 @@
       <li>
         <a
           href="{% url 'order-list' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
         <i class="fas fa-cart-shopping"></i>
           All
@@ -43,7 +43,7 @@
       <li>
         <a
           href="{% url 'order-equipment-list' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-flask-vial"></i>
           Equipment
@@ -52,7 +52,7 @@
       <li>
         <a
           href="{% url 'order-extraction-list' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-vials"></i>
           Extraction
@@ -61,7 +61,7 @@
       <li>
         <a
           href="{% url 'order-analysis-list' %}"
-          class="flex items-center gap-3.5 px-3 py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-dna"></i>
           Analysis
diff --git a/src/templates/core/partials/project-dropdown.html b/src/templates/core/partials/project-dropdown.html
index 614cd888..6b3c9c06 100644
--- a/src/templates/core/partials/project-dropdown.html
+++ b/src/templates/core/partials/project-dropdown.html
@@ -34,7 +34,7 @@
       <li>
         <a
           href="{% url 'nina:project-list' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
         <i class="fas fa-folder"></i>
           NINA Projects
@@ -43,7 +43,7 @@
       <li>
         <a
           href="{% url 'genrequest-list' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-flask-vial"></i>
           Genetic Projects
@@ -52,7 +52,7 @@
       <li>
         <a
           href="{% url 'genrequest-create' %}"
-          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-primary lg:text-base"
+          class="flex items-center gap-3.5 px-3 border-b py-2 text-sm font-medium duration-300 ease-in-out hover:text-brand-primary lg:text-base"
         >
           <i class="fas fa-plus"></i>
           New Genetic Project
diff --git a/src/templates/users/user_detail.html b/src/templates/users/user_detail.html
index 4e4a2e27..b3c526c2 100644
--- a/src/templates/users/user_detail.html
+++ b/src/templates/users/user_detail.html
@@ -1,11 +1,11 @@
-{% extends "core/app.html" %}
+{% extends 'core/app.html' %}
 
 {% load static %}
 
 {% block title %}
   User:
   {{ object }}
-{% endblock title %}
+{% endblock %}
 {% block content %}
   <div class="container">
     <div class="row">
@@ -17,14 +17,12 @@ <h2>{{ object }}</h2>
       <!-- Action buttons -->
       <div class="row">
         <div class="col-sm-12">
-          <a class="btn custom_order_button" href="{% url 'users:update' %}" role="button">My Info</a>
-          <a class="btn custom_order_button"
-             href="{% url 'account_email' %}"
-             role="button">E-Mail</a>
+          <a class="btn btn-tertiary" href="{% url 'users:update' %}" role="button">My Info</a>
+          <a class="btn btn-tertiary" href="{% url 'account_email' %}" role="button">E-Mail</a>
           <!-- Your Stuff: Custom user template urls -->
         </div>
       </div>
       <!-- End Action buttons -->
     {% endif %}
   </div>
-{% endblock content %}
+{% endblock %}
diff --git a/src/templates/users/user_form.html b/src/templates/users/user_form.html
index fd63f9a8..7c03db1d 100644
--- a/src/templates/users/user_form.html
+++ b/src/templates/users/user_form.html
@@ -1,23 +1,21 @@
 {% raw %}
-{% extends "core/app.html" %}
+{% extends 'core/app.html' %}
 
 {% load crispy_forms_tags %}
 
 {% block title %}
   {{ user }}
-{% endblock title %}
+{% endblock %}
 {% block content %}
   <h1>{{ user }}</h1>
-  <form class="form-horizontal"
-        method="post"
-        action="{% url 'users:update' %}">
+  <form class="form-horizontal" method="post" action="{% url 'users:update' %}">
     {% csrf_token %}
     {{ form|crispy }}
     <div class="control-group">
       <div class="controls">
-        <button type="submit" class="btn custom_order_button">Update</button>
+        <button type="submit" class="btn btn-tertiary">Update</button>
       </div>
     </div>
   </form>
-{% endblock content %}
-{% endraw%}
+{% endblock %}
+{% endraw %}
diff --git a/src/theme/static_src/src/styles.css b/src/theme/static_src/src/styles.css
index 2183eb96..e15131c3 100644
--- a/src/theme/static_src/src/styles.css
+++ b/src/theme/static_src/src/styles.css
@@ -6,6 +6,49 @@
   display: none !important;
 }
 
+:root {
+  --color-brand-primary: #74a333;
+  --color-brand-secondary: #004c6c;
+
+  --color-primary-100: #c9e4ff;
+  --color-primary-300: #a7d3ff;
+  --color-primary-500: #91c8ff;
+  --color-primary-600: #6891ba;
+  --color-pirmary-700: #437ab2;
+  --color-primary-800: #2e6093;
+
+  --color-secondary-100: #e6f0fa;
+  --color-secondary-300: #d2e4f5;
+  --color-secondary-500: #bfd8f0;
+  --color-secondary-600: #8dadca;
+  --color-secondary-700: #6987a3;
+  --color-secondary-800: #54748e;
+
+  --color-tertiary-100: #f2f2f2;
+  --color-tertiary-300: #e5e5e5;
+  --color-tertiary-500: #d6d6d6;
+  --color-tertiary-600: #bababa;
+  --color-tertiary-700: #a0a0a0;
+  --color-tertiary-800: #8c8c8c;
+
+  --color-danger-100: #b96363;
+  --color-danger-300: #db7979;
+  --color-danger-500: #db7979;
+  --color-danger-600: #ffa3a3;
+  --color-danger-700: #ffc0c0;
+  --color-danger-800: #ffd7d7;
+
+  --color-success-100: #dff7ca;
+  --color-success-300: #c9ebb0;
+  --color-success-500: #b5da9c;
+  --color-success-600: #93ad7d;
+  --color-success-700: #7f996c;
+  --color-success-800: #6b855b;
+
+  --color-tab-300: #ffedc0;
+  --color-tab-500: #e1d2ad;
+}
+
 @layer components {
   .alert {
     @apply flex w-full bg-opacity-30 text-lg font-bold text-black border-l-4 md:p-7 border mb-1 items-center justify-between;
@@ -32,7 +75,7 @@
   }
 
   .tailwind-table thead tr:first-child {
-    @apply bg-gray-200 text-left;
+    @apply bg-tertiary-100 text-left;
   }
 
   .tailwind-table thead tr:first-child th {
@@ -56,12 +99,44 @@
   }
 
   .tailwind-table tbody tr td a {
-    @apply text-primary;
+    @apply text-brand-primary;
   }
 
   .btn {
     @apply px-3 py-2;
   }
+
+  .btn-success {
+    @apply bg-success-100 border-success-600 hover:bg-success-300 hover:border-success-700 active:bg-success-500 active:border-success-800;
+  }
+
+  .btn-primary {
+    @apply text-black bg-primary-100 border-primary-600 hover:bg-primary-300 hover:border-primary-700 active:bg-primary-500 active:border-primary-800;
+  }
+
+  .btn-secondary {
+    @apply text-black bg-secondary-100 border-secondary-600 hover:bg-secondary-300 hover:border-secondary-700 active:bg-secondary-500 active:border-secondary-800;
+  }
+
+  .btn-tertiary {
+    @apply bg-tertiary-100 border-tertiary-600 hover:bg-tertiary-300 hover:border-tertiary-700 active:bg-tertiary-500 active:border-tertiary-800;
+  }
+
+  .btn-danger {
+    @apply bg-danger-100 border-danger-600 hover:bg-danger-300 hover:border-danger-700 active:bg-danger-500 active:border-danger-800;
+  }
+
+  .tabs {
+    @apply bg-white rounded-lg p-0.5 border;
+  }
+
+  .tab {
+    @apply border border-transparent;
+  }
+
+  .tab-active {
+    @apply bg-tab-300 !border-tab-500 rounded-[6px];
+  }
 }
 
 .formset-label {
@@ -202,7 +277,7 @@ django-form-collection .dj-form .dj-form-errors {
 }
 
 .pagination li.active {
-  @apply bg-primary;
+  @apply bg-brand-primary;
 }
 
 .breadcrumb {
@@ -287,117 +362,6 @@ ol.breadcrumb > li + ::before {
   pointer-events: none;
 }
 
-.custom_order_button {
-  background-color: #F2F2F2; /* Fill */
-  border: 1px solid #BABABA; /* Stroke */
-  color: #000000; /* Text & icon color */
-}
-
-.custom_order_button:hover {
-  background-color: #e0e0e0; /* Optional: darker on hover */
-  border: 1px solid #a0a0a0; /* Stroke */
-}
-
-.custom_order_button:active {
-  background-color: #D6D6D6; /* Optional: darker on hover */
-  border: 1px solid #8C8C8C; /* Stroke */
-}
-
-.custom_order_button:active {
-  background-color: #D6D6D6; /* Optional: darker on hover */
-  border: 1px solid #8C8C8C; /* Stroke */
-}
-
-.custom_order_button_blue {
-  background-color: #E6F0FA; /* Fill */
-  border: 1px solid #8CA5BE; /* Stroke */
-  color: #000000; /* Text & icon color */
-}
-
-.custom_order_button_blue:hover {
-  background-color: #d2e4f5; /* Optional: darker on hover */
-  border: 1px solid #7792ab; /* Stroke */
-}
-
-.custom_order_button_blue:active {
-  background-color: #BFD8F0; /* Optional: darker on hover */
-  border: 1px solid #5F7D95; /* Stroke */
-}
-
-.custom_order_button_dark_blue {
-  background-color: #C9E4FF; /* Fill */
-  border: 1px solid #6891BA; /* Stroke */
-  color: #000000; /* Text & icon color */
-}
-
-.custom_order_button_dark_blue:hover {
-  background-color: #A7D3FF; /* Optional: darker on hover */
-  border: 1px solid #6891BA; /* Stroke */
-}
-
-.custom_order_button_dark_blue:active {
-  background-color: #91C8FF; /* Optional: darker on hover */
-  border: 1px solid #437AB2; /* Stroke */
-}
-
-.custom_order_button_blue:active {
-  background-color: #BFD8F0; /* Optional: darker on hover */
-  border: 1px solid #5F7D95; /* Stroke */
-}
-
-.custom_order_button_dark_blue {
-  background-color: #C9E4FF; /* Fill */
-  border: 1px solid #6891BA; /* Stroke */
-  color: #000000; /* Text & icon color */
-}
-
-.custom_order_button_dark_blue:hover {
-  background-color: #A7D3FF; /* Optional: darker on hover */
-  border: 1px solid #6891BA; /* Stroke */
-}
-
-.custom_order_button_dark_blue:active {
-  background-color: #91C8FF; /* Optional: darker on hover */
-  border: 1px solid #437AB2; /* Stroke */
-}
-
-.custom_order_button_green {
-  background-color: #DFF7CA; /* Fill */
-  border: 1px solid #93AD7D; /* Stroke */
-  color: #000000; /* Text & icon color */
-}
-
-.custom_order_button_green:hover {
-  background-color: #c9ebb0; /* Optional: darker on hover */
-  border: 1px solid #7f996c; /* Stroke */
-}
-
-.custom_order_button_green:active {
-  background-color: #B5DA9C; /* Optional: darker on hover */
-  border: 1px solid #6B855B; /* Stroke */
-}
-
-.custom_order_button_green:active {
-  background-color: #B5DA9C; /* Optional: darker on hover */
-  border: 1px solid #6B855B; /* Stroke */
-}
-
-.custom_order_button_red {
-  background-color: #f7caca; /* Fill */
-  border: 1px solid #ad7d7d; /* Stroke */
-  color: #000000; /* Text & icon color */
-}
-
-.custom_order_button_red:hover {
-  background-color: #ebb0b0; /* Optional: darker on hover */
-  border: 1px solid #996c6c; /* Stroke */
-}
-
-.custom_order_button_red:active {
-  background-color: #FFA3A3; /* Optional: darker on hover */
-  border: 1px solid #B96363; /* Stroke */
-}
-
 .responsible-staff-form {
   position: relative;
 }
diff --git a/src/theme/static_src/tailwind.config.js b/src/theme/static_src/tailwind.config.js
index 69952624..bc158e3a 100644
--- a/src/theme/static_src/tailwind.config.js
+++ b/src/theme/static_src/tailwind.config.js
@@ -56,8 +56,60 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: "#74A333",
-        secondary: "#004C6C",
+        brand: {
+          primary: "var(--color-brand-primary)",
+          secondary: "var(--color-brand-secondary)",
+        },
+        primary: {
+          DEFAULT: "var(--color-primary-500)",
+          100: "var(--color-primary-100)",
+          300: "var(--color-primary-300)",
+          500: "var(--color-primary-500)",
+          600: "var(--color-primary-600)",
+          700: "var(--color-primary-700)",
+          800: "var(--color-primary-800)",
+        },
+        secondary: {
+          DEFAULT: "var(--color-secondary-500)",
+          100: "var(--color-secondary-100)",
+          300: "var(--color-secondary-300)",
+          500: "var(--color-secondary-500)",
+          600: "var(--color-secondary-600)",
+          700: "var(--color-secondary-700)",
+          800: "var(--color-secondary-800)",
+        },
+        tertiary: {
+          DEFAULT: "var(--color-tertiary-500)",
+          100: "var(--color-tertiary-100)",
+          300: "var(--color-tertiary-300)",
+          500: "var(--color-tertiary-500)",
+          600: "var(--color-tertiary-600)",
+          700: "var(--color-tertiary-700)",
+          800: "var(--color-tertiary-800)",
+        },
+        success: {
+          DEFAULT: "var(--color-success-500)",
+          100: "var(--color-success-100)",
+          300: "var(--color-success-300)",
+          500: "var(--color-success-500)",
+          600: "var(--color-success-600)",
+          700: "var(--color-success-700)",
+          800: "var(--color-success-800)",
+        },
+        danger: {
+          DEFAULT: "var(--color-danger-500)",
+          100: "var(--color-danger-100)",
+          300: "var(--color-danger-300)",
+          500: "var(--color-danger-500)",
+          600: "var(--color-danger-600)",
+          700: "var(--color-danger-700)",
+          800: "var(--color-danger-800)",
+        },
+        tab: {
+          DEFAULT: "var(--color-tab-300)",
+          300: "var(--color-tab-300)",
+          500: "var(--color-tab-500)",
+        },
       },
     },
   },

From c501915ef7a6272ee41dda5f290b387764ed8698 Mon Sep 17 00:00:00 2001
From: Ole Magnus Fon Johnsen <me@omfj.no>
Date: Tue, 29 Jul 2025 21:32:11 +0200
Subject: [PATCH 2/4] Make responsible staff multiselect scrollable

---
 src/theme/static_src/src/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/static_src/src/styles.css b/src/theme/static_src/src/styles.css
index e15131c3..e5a55617 100644
--- a/src/theme/static_src/src/styles.css
+++ b/src/theme/static_src/src/styles.css
@@ -313,7 +313,7 @@ ol.breadcrumb > li + ::before {
 }
 
 .select2-selection--multiple {
-  @apply h-[2.6rem] flex items-center px-3 overflow-hidden rounded-md border border-gray-300 bg-white text-sm text-gray-700 relative;
+  @apply h-[2.6rem] flex items-center px-3 overflow-hidden rounded-md border border-gray-300 bg-white text-sm text-gray-700 relative overflow-y-auto;
 }
 
 .select2-selection--multiple .select2-selection__rendered {

From 152c440f4dc82c5189c0a5aa8c76cd0f72583a24 Mon Sep 17 00:00:00 2001
From: Ole Magnus Fon Johnsen <me@omfj.no>
Date: Tue, 29 Jul 2025 21:35:52 +0200
Subject: [PATCH 3/4] Tailwind styling for mutliselect

---
 src/theme/static_src/src/styles.css | 29 +++++++++--------------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/theme/static_src/src/styles.css b/src/theme/static_src/src/styles.css
index e5a55617..6a051a0b 100644
--- a/src/theme/static_src/src/styles.css
+++ b/src/theme/static_src/src/styles.css
@@ -313,7 +313,7 @@ ol.breadcrumb > li + ::before {
 }
 
 .select2-selection--multiple {
-  @apply h-[2.6rem] flex items-center px-3 overflow-hidden rounded-md border border-gray-300 bg-white text-sm text-gray-700 relative overflow-y-auto;
+  @apply h-[2.6rem] flex items-center px-3 overflow-hidden rounded-md border border-gray-300 bg-white text-sm text-gray-700 relative;
 }
 
 .select2-selection--multiple .select2-selection__rendered {
@@ -363,44 +363,33 @@ ol.breadcrumb > li + ::before {
 }
 
 .responsible-staff-form {
-  position: relative;
+  @apply relative;
 }
 
 .staff-status-indicator {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
+  @apply top-2 left-2 flex absolute items-center justify-center z-10;
 }
 
 .staff-status-indicator.spinner {
-  color: #6b7280;
+  @apply text-tertiary-500;
 }
 
 .staff-status-indicator.success {
-  color: #22c55e;
+  @apply text-success-500;
 }
 
 .staff-status-indicator.error {
-  color: #ef4444;
+  @apply text-danger-500;
 }
 
 .responsible-staff-form .select2-container.select2-container--default {
-  max-width: 11rem !important;
-  width: 11rem !important;
-  min-width: 11rem !important;
+  @apply !max-w-52 !w-full !min-w-52;
 }
 
 .responsible-staff-form .select2-dropdown {
-  max-width: 11rem !important;
-  width: 11rem !important;
+  @apply !max-w-52 !w-full;
 }
 
 .responsible-staff-form .select2-selection {
-  max-width: 11rem !important;
-  width: 11rem !important;
-  min-width: 11rem !important;
+  @apply !max-w-52 !w-full !min-w-52;
 }

From 6fda852d0ca37f1d0472cba4adf629a7db554404 Mon Sep 17 00:00:00 2001
From: Ole Magnus Fon Johnsen <me@omfj.no>
Date: Wed, 30 Jul 2025 08:26:40 +0200
Subject: [PATCH 4/4] fix

---
 .../analysisorder_filter.html                 | 15 ++--
 .../equipmentorder_filter.html                | 15 ++--
 .../genlab_bestilling/genrequest_detail.html  |  4 +-
 .../genlab_bestilling/genrequest_filter.html  | 10 +--
 .../components/project_verified_column.html   | 17 +++--
 .../staff/equipmentorder_detail.html          |  2 +-
 .../staff/extractionorder_detail.html         | 71 ++++++++++---------
 src/staff/templates/staff/project_detail.html |  2 +-
 8 files changed, 65 insertions(+), 71 deletions(-)

diff --git a/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html b/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html
index 30b5830b..39bb5194 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/analysisorder_filter.html
@@ -1,16 +1,13 @@
-{% extends 'genlab_bestilling/base_filter.html' %}
+{% extends "genlab_bestilling/base_filter.html" %}
 {% load neapolitan %}
 {% load render_table from django_tables2 %}
 
-{% block page - title %}Analysis Orders{% if genrequest %}
-  relative to {{ genrequest }}
-{% endif %}
-{% endblock page - title %}
-{% block page - inner %}
+{% block page-title %}Analysis Orders{% if genrequest %} relative to {{ genrequest }}{% endif %}{% endblock page-title %}
+{% block page-inner %}
 <div class="flex gap-5 mb-5">
-  {% if genrequest %}
+    {% if genrequest %}
     <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
     <a class="btn btn-tertiary" href="{% url 'genrequest-analysis-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
-  {% endif %}
+    {% endif %}
 </div>
-{% endblock page - inner %}
+{% endblock page-inner %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html
index 0041b4f6..31257e6d 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/equipmentorder_filter.html
@@ -1,16 +1,13 @@
-{% extends 'genlab_bestilling/base_filter.html' %}
+{% extends "genlab_bestilling/base_filter.html" %}
 {% load neapolitan %}
 {% load render_table from django_tables2 %}
 
-{% block page - title %}Equipment Orders{% if genrequest %}
-  relative to {{ genrequest }}
-{% endif %}
-{% endblock page - title %}
-{% block page - inner %}
+{% block page-title %}Equipment Orders{% if genrequest %} relative to {{ genrequest }}{% endif %}{% endblock page-title %}
+{% block page-inner %}
 <div class="flex gap-5 mb-5">
-  {% if genrequest %}
+    {% if genrequest %}
     <a class="btn btn-tertiary" href="{% url 'genrequest-detail' pk=genrequest.id %}"><i class="fas fa-arrow-left"></i> Back</a>
     <a class="btn btn-success" href="{% url 'genrequest-equipment-create' genrequest_id=genrequest.id %}"><i class="fas fa-plus"></i> Equipment order</a>
-  {% endif %}
+    {% endif %}
 </div>
-{% endblock page - inner %}
+{% endblock page-inner %}
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_detail.html b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_detail.html
index c86b31fc..8f749e27 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_detail.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_detail.html
@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="flex items-center mb-5 gap-2">
-  <h3 id="genrequest" class="text-4xl">{{ object.project_id }} - {{ object.name|default_if_none:"Unnamed" }} </h3>
+  <h3 id="genrequest" class="text-4xl">{{ object.project_id }} - {{ object.name|default_if_none:"Unnamed" }} </h3>
 </div>
 
 {% if object.short_timeframe %}
@@ -44,7 +44,7 @@ <h3 id="genrequest" class="text-4xl">{{ object.project_id }} - {{ object.name|d
   >
 
   <a
-    class="btn "
+    class="btn btn-danger"
     href="{% url 'genrequest-delete' pk=genrequest.id %}"
     ><i class="fas fa-trash"></i> Delete</a
   >
diff --git a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_filter.html b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_filter.html
index dba22f53..4093fab2 100644
--- a/src/genlab_bestilling/templates/genlab_bestilling/genrequest_filter.html
+++ b/src/genlab_bestilling/templates/genlab_bestilling/genrequest_filter.html
@@ -1,10 +1,10 @@
-{% extends 'genlab_bestilling/base_filter.html' %}
+{% extends "genlab_bestilling/base_filter.html" %}
 {% load neapolitan %}
 {% load render_table from django_tables2 %}
 
-{% block page - title %}Genetic Project{% endblock page - title %}
-{% block page - inner %}
+{% block page-title %}Genetic Project{% endblock page-title %}
+{% block page-inner %}
 <div class="flex gap-5 mb-5">
-  <a class="btn btn-success" href="{% url 'genrequest-create' %}"><i class="fas fa-plus"></i> Project</a>
+    <a class="btn btn-success" href="{% url 'genrequest-create' %}"><i class="fas fa-plus"></i> Project</a>
 </div>
-{% endblock page - inner %}
+{% endblock page-inner %}
diff --git a/src/staff/templates/staff/components/project_verified_column.html b/src/staff/templates/staff/components/project_verified_column.html
index 695eccae..2d32068d 100644
--- a/src/staff/templates/staff/components/project_verified_column.html
+++ b/src/staff/templates/staff/components/project_verified_column.html
@@ -2,13 +2,12 @@
 
 {% url 'staff:projects-verify' pk=record.pk as verify_url %}
 <form method="post" action="{{ verify_url }}">
-    {% csrf_token %}
-    {% next_url_input %}
-{% if not record.verified_at %}
-        <button type="submit" class="btn btn-sm bg-[#dff7ca]">
-            <i class="fa-solid fa-circle-check"></i> Mark as verified
-        </button>
-    {% else %}
-    {% comment %} Default django true checkmark {% endcomment %}
+  {% csrf_token %}
+  {% next_url_input %}
+  {% if not record.verified_at %}
+    <button type="submit" class="btn btn-sm btn-success"><i class="fa-solid fa-circle-check"></i> Mark as verified</button>
+  {% else %}
+    {% comment %}Default django true checkmark{% endcomment %}
     <span>✔</span>
-{% endif %}
+  {% endif %}
+</form>
diff --git a/src/staff/templates/staff/equipmentorder_detail.html b/src/staff/templates/staff/equipmentorder_detail.html
index 2aa0240c..24e84300 100644
--- a/src/staff/templates/staff/equipmentorder_detail.html
+++ b/src/staff/templates/staff/equipmentorder_detail.html
@@ -18,7 +18,7 @@ <h3 class="text-4xl mb-5">Order {{ object }}</h3>
         {% if not object.is_seen %}
             <form method="post" action="{% url 'staff:mark-as-seen' pk=object.id %}">
                 {% csrf_token %}
-                <button class="btn btn-sm bg-[#DFF7CA] border-[#93AD7D] hover:bg-[#C9EBB0] hover:border-[#7F996C] active:bg-[#B5DA9C] active:border-[#6B855B] text-nowrap" style="height: auto;" type="submit">
+                <button class="btn btn-sm btn-success" type="submit">
                     <p><i class="fa-solid fa-circle-check"></i> Mark as seen</p>
                 </button>
             </form>
diff --git a/src/staff/templates/staff/extractionorder_detail.html b/src/staff/templates/staff/extractionorder_detail.html
index dfa47b42..c305f2e2 100644
--- a/src/staff/templates/staff/extractionorder_detail.html
+++ b/src/staff/templates/staff/extractionorder_detail.html
@@ -1,45 +1,46 @@
-{% extends "staff/base.html" %}
+{% extends 'staff/base.html' %}
 {% load i18n %}
 {% load static %}
 {% load order_tags %}
 
 {% block content %}
-    <h3 class="text-4xl mb-5">Order {{ object }}</h3>
-    <div class="flex gap-5 mb-5"></div>
+  <h3 class="text-4xl mb-5">Order {{ object }}</h3>
+  <div class="flex gap-5 mb-5"></div>
 
-    <div class="flex gap-5 my-5">
-        {% responsible_staff_multiselect order=object %}
-        <div class="ml-auto"></div>
-        {% if object.status != object.OrderStatus.DRAFT %}
-            {% url 'staff:order-to-draft' pk=object.id as to_draft_url %}
-            {% action-button action=to_draft_url class="btn-tertiary" submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
-        {% endif %}
-        {% if analysis_orders|length == 1 and not analysis_has_multiple_extraction_orders %}
-            <a class="btn btn-primary" href="{% url 'staff:order-analysis-detail' pk=analysis_orders.first.id %}">Go to {{ analysis_orders.first}}</a>
-        {% endif %}
-        <a class="btn btn-secondary" href="{% url 'staff:order-extraction-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
+  <div class="flex gap-5 my-5">
+    {% responsible_staff_multiselect order=object %}
+    <div class="ml-auto"></div>
+    {% if object.status != object.OrderStatus.DRAFT %}
+      {% url 'staff:order-to-draft' pk=object.id as to_draft_url %}
+      {% action-button action=to_draft_url class='btn-tertiary' submit_text="<i class='fa-solid fa-pen-to-square'></i> Convert to draft"|safe csrf_token=csrf_token %}
+    {% endif %}
+    {% if analysis_orders|length == 1 and not analysis_has_multiple_extraction_orders %}
+      <a class="btn btn-primary" href="{% url 'staff:order-analysis-detail' pk=analysis_orders.first.id %}">Go to {{ analysis_orders.first }}</a>
+    {% endif %}
+    <a class="btn btn-secondary" href="{% url 'staff:order-extraction-samples' pk=object.id %}"><i class="fa-solid fa-vial"></i> Samples</a>
 
-        {% if not object.is_seen %}
-            <form method="post" action="{% url 'staff:mark-as-seen' pk=object.id %}">
-                {% csrf_token %}
-                <button class="btn bg-[#DFF7CA] border-[#93AD7D] hover:bg-[#C9EBB0] hover:border-[#7F996C] active:bg-[#B5DA9C] active:border-[#6B855B] text-nowrap" style="height: auto;" type="submit">
-                    <p><i class="fa-solid fa-circle-check"></i> Mark as seen</p>
-                </button>
-            </form>
-        {% endif %}
+    {% if not object.is_seen %}
+      <form method="post" action="{% url 'staff:mark-as-seen' pk=object.id %}">
+        {% csrf_token %}
+        <button class="btn btn-success" type="submit">
+          <p>
+            <i class="fa-solid fa-circle-check"></i> Mark as seen
+          </p>
+        </button>
+      </form>
+    {% endif %}
 
-        {% if object.status == object.OrderStatus.DELIVERED and object.internal_status == "checked" %}
-            {% url 'staff:order-to-next-status' pk=object.id as to_next_status_url %}
-            {% with "<i class='fa-solid fa-arrow-right'></i> Set as "|add:object.next_status as btn_name %}
-                {% action-button action=to_next_status_url class="bg-yellow-200 text-yellow-800 border border-yellow-700 hover:bg-yellow-300" submit_text=btn_name csrf_token=csrf_token %}
-            {% endwith %}
-        {% endif %}
-    </div>
+    {% if object.status == object.OrderStatus.DELIVERED and object.internal_status == 'checked' %}
+      {% url 'staff:order-to-next-status' pk=object.id as to_next_status_url %}
+      {% with btn_name="<i class='fa-solid fa-arrow-right'></i> Set as "|add:object.next_status %}
+        {% action-button action=to_next_status_url class='bg-yellow-200 text-yellow-800 border border-yellow-700 hover:bg-yellow-300' submit_text=btn_name csrf_token=csrf_token %}
+      {% endwith %}
+    {% endif %}
+  </div>
 
-
-    <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
-      {% extraction_order_detail_table order=object %}
-      {% extraction_order_samples_detail_table order=object analysis_orders=analysis_orders %}
-      {% contact_detail_table order=object %}
-    </div>
+  <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
+    {% extraction_order_detail_table order=object %}
+    {% extraction_order_samples_detail_table order=object analysis_orders=analysis_orders %}
+    {% contact_detail_table order=object %}
+  </div>
 {% endblock %}
diff --git a/src/staff/templates/staff/project_detail.html b/src/staff/templates/staff/project_detail.html
index bce2633a..47748955 100644
--- a/src/staff/templates/staff/project_detail.html
+++ b/src/staff/templates/staff/project_detail.html
@@ -13,7 +13,7 @@ <h3 class="text-4xl mb-5">Project {{ object }}</h3>
             {% csrf_token %}
             {% next_url_input %}
         {% if not object.verified_at %}
-            <button type="submit" class="btn bg-[#dff7ca]">
+            <button type="submit" class="btn btn-success">
                 <i class="fa-solid fa-circle-check"></i> Mark as verified
             </button>
         {% endif %}