diff --git a/app/components/content_card_component.html.erb b/app/components/content_card_component.html.erb
index f58841da..f12472bb 100644
--- a/app/components/content_card_component.html.erb
+++ b/app/components/content_card_component.html.erb
@@ -1,8 +1,8 @@
-<div class="card shadow-sm w-full border border-base-300 p-4 bg-base-200 bg-opacity-70
+<div class="card shadow-sm w-full border border-base-300 p-2 sm:p-4 bg-base-200 bg-opacity-70
     [background-color:var(--color-base-200)]
     [background-image:radial-gradient(color-mix(in_srgb,var(--color-primary)_25%,transparent)_0.5px,transparent_0.5px)]
     [background-size:10px_10px]">
-  <div class="card-body">
+  <div class="card-body p-2 sm:p-4">
     <%= content %>
   </div>
 </div>
diff --git a/app/components/modal_component.html.erb b/app/components/modal_component.html.erb
index 7a8aefcd..6fdf99dd 100644
--- a/app/components/modal_component.html.erb
+++ b/app/components/modal_component.html.erb
@@ -1,11 +1,11 @@
 <div id="modal"
-     class="fixed inset-0 z-50 hidden bg-black/40 backdrop-blur-sm flex items-center justify-center"
+     class="fixed inset-0 z-50 hidden bg-black/40 backdrop-blur-sm flex items-center justify-center p-4"
      data-controller="modal"
      data-action="turbo:submit-end->modal#close">
 
-  <div class="card bg-base-100 border border-base-300 rounded-xl shadow-xl w-full max-w-xl p-6 max-h-[90vh] flex flex-col">
+  <div class="card bg-base-100 border border-base-300 rounded-xl shadow-xl w-full max-w-xl p-4 sm:p-6 max-h-[90vh] flex flex-col">
     <div class="flex items-center justify-between">
-      <h2 class="text-lg font-semibold"><%= title %></h2>
+      <h2 class="text-base sm:text-lg font-semibold"><%= title %></h2>
       <button type="button"
               class="btn btn-ghost btn-xs btn-circle text-base-content/40 hover:text-error"
               data-action="modal#close">
diff --git a/app/components/projects/log_schema_component.html.erb b/app/components/projects/log_schema_component.html.erb
index e00a9b9a..2177e73f 100644
--- a/app/components/projects/log_schema_component.html.erb
+++ b/app/components/projects/log_schema_component.html.erb
@@ -1,11 +1,11 @@
-<div class="flex justify-between items-center">
-  <div class="flex items-center space-x-2">
-    <h3 class="text-2xl font-bold">
+<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3">
+  <div class="flex items-center gap-2 flex-wrap">
+    <h3 class="text-xl sm:text-2xl font-bold">
       <%= t(".title") %>
     </h3>
     <%= render BadgeComponent.new(text: t(".attributes_count", count: project.log_schema.size), colour: :warning, size: :sm) %>
   </div>
-  <div>
+  <div class="flex-shrink-0">
     <%= render ActionButtonComponent.new(to: edit_project_attributes_schema_path(project), icon: "edit", colour: :info, turbo_stream: true, size: :medium) do %>
       <%= t(".edit_attributes") %>
     <% end %>
diff --git a/app/components/projects/projects_card_component.html.erb b/app/components/projects/projects_card_component.html.erb
index f8ed0102..d7da2932 100644
--- a/app/components/projects/projects_card_component.html.erb
+++ b/app/components/projects/projects_card_component.html.erb
@@ -6,7 +6,7 @@
         <input id="search" type="search" name="q" required placeholder="<%= t(".search_placeholder") %>" autocomplete="off" data-project-card-search-target="input" data-action="input->project-card-search#filter">
       </label>
     </div>
-    <div class="grid grid-cols-[repeat(auto-fill,minmax(285px,1fr))] gap-6 w-full">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(285px,1fr))] gap-4 sm:gap-6 w-full">
       <% projects.each do |project| %>
         <div
           class="card w-full flex flex-col justify-between gap-2 bg-base-100 border border-base-300 shadow-md p-4 rounded-xl"
@@ -15,10 +15,10 @@
           <div class="flex flex-col">
             <div class="flex justify-between items-center pb-2 mb-2">
               <h2
-                class="text-color-base-content text-lg font-semibold">
+                class="text-color-base-content text-base sm:text-lg font-semibold truncate pr-2">
                 <%= project.name %>
               </h2>
-              <div>
+              <div class="flex-shrink-0">
                 <%= render BadgeComponent.new(**project_badge_args(project), style: :soft, size: :sm) %>
               </div>
             </div>
@@ -28,7 +28,7 @@
               <% end %>
             </div>
           </div>
-          <%= link_to t(".view_project"), project_path(project), class: "text-sm bg-base-300 rounded-md py-2 flex flex-row justify-center items-center" %>
+          <%= link_to t(".view_project"), project_path(project), class: "text-sm bg-base-300 hover:bg-base-400 rounded-md py-2 flex flex-row justify-center items-center transition-colors" %>
         </div>
       <% end %>
     </div>
diff --git a/app/components/shared/index_table_component.html.erb b/app/components/shared/index_table_component.html.erb
index a9d16d3d..76d93146 100644
--- a/app/components/shared/index_table_component.html.erb
+++ b/app/components/shared/index_table_component.html.erb
@@ -17,29 +17,51 @@
   <!-- Construct columns sizes string from individual col_size parameters -->
   <% column_sizes = columns.map { |c| c.col_size || "minmax(0, 1fr)" }.join(" ") %>
 
-  <!-- Each row (including header) is its own rounded box -->
-  <div class="mb-2">
-    <div class="card bg-neutral rounded-lg">
-      <div class="p-4 grid items-center gap-4" style="grid-template-columns: <%= column_sizes %>">
-        <% columns.each do |column| %>
-          <div class="text-sm font-semibold text-neutral-content"><%= column.header %></div>
-        <% end %>
+  <!-- Desktop view: Grid layout -->
+  <div class="hidden md:block">
+    <!-- Each row (including header) is its own rounded box -->
+    <div class="mb-2">
+      <div class="card bg-neutral rounded-lg">
+        <div class="p-4 grid items-center gap-4" style="grid-template-columns: <%= column_sizes %>">
+          <% columns.each do |column| %>
+            <div class="text-sm font-semibold text-neutral-content"><%= column.header %></div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <div class="space-y-2">
+      <% records.each_with_index do |record, index| %>
+        <div data-index-table-component-target="row" class="card bg-white rounded-lg shadow-sm">
+          <div class="p-3 grid items-center gap-4" style="grid-template-columns: <%= column_sizes %>">
+            <% columns.each do |column| %>
+              <div class="text-sm text-base-content"><%= render_cell_content(record, column) %></div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+      <div data-index-table-component-target="emptyRow" class="card bg-white rounded-lg shadow-sm <%= "hidden" unless empty? %>">
+        <div class="flex justify-center p-3 items-center">
+          <div class="text-sm text-base-content/40 font-bold"><%= t("shared.index_table_component.no_entries") %></div>
+        </div>
       </div>
     </div>
   </div>
 
-  <div class="space-y-2">
+  <!-- Mobile view: Stacked cards -->
+  <div class="md:hidden space-y-3">
     <% records.each_with_index do |record, index| %>
-      <div data-index-table-component-target="row" class="card bg-white rounded-lg shadow-sm">
-        <div class="p-3 grid items-center gap-4" style="grid-template-columns: <%= column_sizes %>">
-          <% columns.each do |column| %>
+      <div data-index-table-component-target="row" class="card bg-white rounded-lg shadow-sm p-4">
+        <% columns.each do |column| %>
+          <div class="flex flex-col py-2 border-b border-base-200 last:border-0">
+            <div class="text-xs font-semibold text-base-content mb-1"><%= column.header %></div>
             <div class="text-sm text-base-content"><%= render_cell_content(record, column) %></div>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
       </div>
     <% end %>
     <div data-index-table-component-target="emptyRow" class="card bg-white rounded-lg shadow-sm <%= "hidden" unless empty? %>">
-      <div class="flex justify-center p-3 items-center">
+      <div class="flex justify-center p-4 items-center">
         <div class="text-sm text-base-content/40 font-bold"><%= t("shared.index_table_component.no_entries") %></div>
       </div>
     </div>
diff --git a/app/components/sidebar_component.html.erb b/app/components/sidebar_component.html.erb
index 6727050e..cdb66502 100644
--- a/app/components/sidebar_component.html.erb
+++ b/app/components/sidebar_component.html.erb
@@ -1,4 +1,4 @@
-<ul class="menu shadow-lg bg-base-200 w-64 min-h-screen tracking-wide justify-between">
+<ul data-mobile-menu-target="sidebar" role="navigation" aria-label="Main navigation" class="menu shadow-lg bg-base-200 w-64 min-h-screen tracking-wide justify-between fixed md:sticky top-0 left-0 z-40 transition-transform duration-300 -translate-x-full md:translate-x-0">
   <div>
     <div class="px-4 py-4 border-b border-base-300">
       <%= link_to root_path do %>
@@ -10,12 +10,12 @@
         </div>
       <% end %>
     </div>
-    <li class="py-6">
+    <li class="py-6 overflow-y-auto max-h-[calc(100vh-200px)]">
       <% sections.each do |section| %>
         <h2 class="menu-title uppercase"> <%= section.title %></h2>
         <ul>
           <% section.items.each do |item| %>
-            <li> <%= link_to item.path do %>
+            <li> <%= link_to item.path, data: { action: "click->mobile-menu#close" } do %>
               <%= render IconComponent.new(icon: item.icon, size: :md, classes: "w-5 h-5") %>
                 <span class="truncate text-base-content"><%= item.name %></span>
               <% end %>
diff --git a/app/components/users/form_component.html.erb b/app/components/users/form_component.html.erb
index ca1e29e7..f6a454d3 100644
--- a/app/components/users/form_component.html.erb
+++ b/app/components/users/form_component.html.erb
@@ -9,15 +9,16 @@
       <%= form.label :name %>
       <%= form.text_field :name, required: true, class: "w-full", placeholder: t(".placeholder") %>
     </div>
-    <div class="flex gap-4">
+    <div class="flex flex-col gap-1">
       <%= form.label :roles %>
-      <% UserRole.roles.each_key do |role| %>
-        <label class="flex items-center gap-2">
-          <%= check_box_tag("user[roles][]", role, @user.has_roles?(role.to_sym), class: "checkbox") %>
-          <%= role.humanize %>
-        </label>
-      <% end %>
-
+      <div class="flex flex-wrap gap-3 sm:gap-4">
+        <% UserRole.roles.each_key do |role| %>
+          <label class="flex items-center gap-2 text-sm sm:text-base">
+            <%= check_box_tag("user[roles][]", role, @user.has_roles?(role.to_sym), class: "checkbox") %>
+            <%= role.humanize %>
+          </label>
+        <% end %>
+      </div>
     </div>
     <div class="flex flex-col gap-1">
       <%= form.label :password %>
diff --git a/app/javascript/controllers/mobile_menu_controller.js b/app/javascript/controllers/mobile_menu_controller.js
new file mode 100644
index 00000000..60e8e9e7
--- /dev/null
+++ b/app/javascript/controllers/mobile_menu_controller.js
@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Mobile menu controller for toggling sidebar on mobile devices
+export default class extends Controller {
+  static targets = ["sidebar", "overlay", "menuButton"];
+
+  connect() {
+    // Close menu on window resize if screen becomes larger
+    this.handleResize = this.handleResize.bind(this);
+    window.addEventListener("resize", this.handleResize);
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this.handleResize);
+  }
+
+  toggle() {
+    const isOpen = !this.sidebarTarget.classList.contains("-translate-x-full");
+
+    if (isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    this.sidebarTarget.classList.remove("-translate-x-full");
+    this.overlayTarget.classList.remove("hidden");
+    document.body.style.overflow = "hidden";
+  }
+
+  close() {
+    this.sidebarTarget.classList.add("-translate-x-full");
+    this.overlayTarget.classList.add("hidden");
+    document.body.style.overflow = "";
+  }
+
+  handleResize() {
+    // Close menu if screen becomes large (md breakpoint = 768px)
+    if (window.innerWidth >= 768) {
+      this.close();
+    }
+  }
+}
diff --git a/app/views/journals/show.html.erb b/app/views/journals/show.html.erb
index 28aed645..85f06fee 100644
--- a/app/views/journals/show.html.erb
+++ b/app/views/journals/show.html.erb
@@ -1,18 +1,20 @@
-<div class="mx-8 my-10">
-  <div class="flex items-center justify-between mb-5">
-    <h1 class="text-4xl font-bold"><%= @journal.title %></h1>
-    <div class="flex flex-row gap-4">
+<div class="mx-4 sm:mx-8 my-6 sm:my-10">
+  <div class="flex flex-col gap-4 mb-5">
+    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold"><%= @journal.title %></h1>
+    <div class="flex flex-row flex-wrap gap-2 sm:gap-4">
       <%= render ActionButtonComponent.new(to: edit_project_subproject_journal_path(@project, @subproject, @journal), icon: "edit", colour: :info, size: :large) do %>
-        <%= t(".actions.edit") %>
+        <span class="hidden sm:inline"><%= t(".actions.edit") %></span>
+        <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".actions.edit") %></span>
       <% end %>
       <%= render ActionButtonComponent.new(to: project_subproject_journal_path(@project, @subproject, @journal), method: :delete, icon: "delete", colour: :error, size: :large, confirm: t("journals.destroy.confirm")) do %>
-        <%= t(".actions.delete") %>
+        <span class="hidden sm:inline"><%= t(".actions.delete") %></span>
+        <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".actions.delete") %></span>
       <% end %>
     </div>
   </div>
-  <div class="flex flex-col">
-    <span class="text-lg text-base-content/60"><%= t(".created_on") %>: <%= @journal.created_at.to_fs(:long_ordinal) %></span>
-    <span class="text-lg text-base-content/60"><%= t(".author") %>: <%= @journal.user.username %></span>
+  <div class="flex flex-col gap-1">
+    <span class="text-base sm:text-lg text-base-content/60"><%= t(".created_on") %>: <%= @journal.created_at.to_fs(:long_ordinal) %></span>
+    <span class="text-base sm:text-lg text-base-content/60"><%= t(".author") %>: <%= @journal.user.username %></span>
   </div>
   <div class="divider m-0 mb-2"></div>
   <%= @journal.markdown_content %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index cd550d90..b9213815 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -24,10 +24,28 @@
   </head>
 
 <body class="min-h-screen bg-base-100">
-  <div class="flex min-h-screen">
+  <div class="flex min-h-screen" <%= "data-controller=\"mobile-menu\"".html_safe unless current_page?(login_path) %>>
+    <!-- Mobile Menu Button (visible only on mobile and when not on login page) -->
+    <% unless current_page?(login_path) %>
+      <button
+        data-mobile-menu-target="menuButton"
+        data-action="click->mobile-menu#toggle"
+        class="md:hidden fixed top-4 left-4 z-50 btn btn-circle btn-primary shadow-lg">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+      </button>
+
+      <!-- Overlay (for mobile when menu is open) -->
+      <div
+        data-mobile-menu-target="overlay"
+        data-action="click->mobile-menu#close"
+        class="hidden fixed inset-0 bg-black/50 z-30 md:hidden"></div>
+    <% end %>
+
     <%= render SidebarComponent.new %>
 
-    <main class="flex-1 overflow-auto">
+    <main class="flex-1 overflow-auto <%= current_page?(login_path) ? "" : "pt-16 md:pt-0" %>">
       <%= render "shared/flash" %>
       <%= yield %>
     <div id="modal"></div>
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
index a1ced0ca..bbcb1092 100644
--- a/app/views/projects/show.html.erb
+++ b/app/views/projects/show.html.erb
@@ -1,28 +1,31 @@
-<section class="mx-8 my-10">
+<section class="mx-4 sm:mx-8 my-6 sm:my-10">
   <div class="flex flex-col gap-4">
-    <div class="flex flex-row justify-between items-start">
+    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
       <div class="flex flex-col gap-1">
-        <h1 class="text-4xl font-bold"><%= @project.name %></h1>
-        <span class="text-lg text-base-content/60"><%= @project.description %></span>
+        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold"><%= @project.name %></h1>
+        <span class="text-base sm:text-lg text-base-content/60"><%= @project.description %></span>
       </div>
 
-      <div class="flex flex-row gap-4">
+      <div class="flex flex-row flex-wrap gap-2 sm:gap-4 sm:flex-shrink-0">
         <%= render ActionButtonComponent.new(to: edit_project_path(@project), icon: "edit", colour: :info, turbo_stream: true, size: :large) do %>
-          <%= t(".actions.edit") %>
+          <span class="hidden sm:inline"><%= t(".actions.edit") %></span>
+          <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".actions.edit") %></span>
         <% end %>
 
         <%= render ActionButtonComponent.new(to: new_project_subproject_path(@project), icon: "add", size: :large, turbo_stream: true, colour: :primary) do %>
-          <%= t(".create_subproject") %>
+          <span class="hidden sm:inline"><%= t(".create_subproject") %></span>
+          <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".create_subproject") %></span>
         <% end %>
 
         <%= render ActionButtonComponent.new(to: project_path(@project), method: :delete, icon: "delete", colour: :error, size: :large, confirm: t("projects.destroy.confirm")) do %>
-          <%= t(".actions.delete") %>
+          <span class="hidden sm:inline"><%= t(".actions.delete") %></span>
+          <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".actions.delete") %></span>
         <% end %>
       </div>
     </div>
 
     <%= render ContentCardComponent.new do %>
-      <h1 class="text-2xl font-bold"><%= t(".subprojects") %></h1>
+      <h1 class="text-xl sm:text-2xl font-bold"><%= t(".subprojects") %></h1>
       <%= render Shared::IndexTableComponent.new(records: @project.subprojects) do |table| %>
         <% table.column :name do |subproject| %>
           <%= subproject.name %>
diff --git a/app/views/regions/index.html.erb b/app/views/regions/index.html.erb
index ef8cd9d4..c580e31e 100644
--- a/app/views/regions/index.html.erb
+++ b/app/views/regions/index.html.erb
@@ -1,8 +1,9 @@
-<div class="mx-8 my-10">
-  <div class="flex items-center justify-between mb-5">
-    <h1 class="text-4xl font-bold"><%= t(".title") %></h1>
+<div class="mx-4 sm:mx-8 my-6 sm:my-10">
+  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-5">
+    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold"><%= t(".title") %></h1>
     <%= render ActionButtonComponent.new(to: new_region_path, icon: "add", colour: :primary, size: :large, turbo_stream: true) do %>
-      <%= t(".actions.create") %>
+      <span class="hidden sm:inline"><%= t(".actions.create") %></span>
+      <span class="sm:hidden">New</span>
     <% end %>
   </div>
   <%= render ContentCardComponent.new do %>
diff --git a/app/views/sessions/login.html.erb b/app/views/sessions/login.html.erb
index 720a8cd0..10d1b92e 100644
--- a/app/views/sessions/login.html.erb
+++ b/app/views/sessions/login.html.erb
@@ -1,5 +1,6 @@
-<fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 mt-10 mx-auto">
-  <legend class="fieldset-legend text-lg font-semibold">Login</legend>
+<div class="flex justify-center items-start min-h-screen px-4 py-10">
+  <fieldset class="fieldset bg-base-200 border-base-300 rounded-box w-full max-w-sm border p-4 sm:p-6">
+    <legend class="fieldset-legend text-base sm:text-lg font-semibold">Login</legend>
 
   <%= form_with url: login_path, local: true do |form| %>
     <div>
@@ -16,4 +17,5 @@
       <%= form.submit "Login", class: "btn btn-neutral w-full" %>
     </div>
   <% end %>
-</fieldset>
+  </fieldset>
+</div>
diff --git a/app/views/subprojects/show.html.erb b/app/views/subprojects/show.html.erb
index fa9e56af..3be7a517 100644
--- a/app/views/subprojects/show.html.erb
+++ b/app/views/subprojects/show.html.erb
@@ -1,27 +1,30 @@
-<section class="mx-8 my-10">
-  <div class="flex flex-col gap-4">
-    <div class="flex flex-row justify-between items-start">
-      <div class="flex flex-col gap-1">
-        <h1 class="text-4xl font-bold"><%= @subproject.name %></h1>
-        <span class="text-lg text-base-content/60"><%= @subproject.description %></span>
-      </div>
-      <div class="flex flex-row gap-4">
+<section class="mx-4 sm:mx-8 my-6 sm:my-10">
+  <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
+    <div class="flex flex-col gap-1">
+      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold"><%= @subproject.name %></h1>
+      <span class="text-base sm:text-lg text-base-content/60"><%= @subproject.description %></span>
+    </div>
+    <div class="flex flex-row flex-wrap gap-2">
         <%= render ActionButtonComponent.new(to: project_subproject_path(@project, @subproject), method: :delete, icon: "delete", colour: :error, size: :large, confirm: t("subprojects.destroy.confirm")) do %>
-          <%= t(".actions.delete") %>
+          <span class="hidden sm:inline"><%= t(".actions.delete") %></span>
+          <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".actions.delete") %></span>
         <% end %>
         <%= render ActionButtonComponent.new(to: edit_project_subproject_path(@project, @subproject), icon: "edit", colour: :info, turbo_stream: true, size: :large) do %>
-          <%= t(".actions.edit") %>
+          <span class="hidden sm:inline"><%= t(".actions.edit") %></span>
+          <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".actions.edit") %></span>
         <% end %>
         <%= render ActionButtonComponent.new(to: new_project_subproject_log_entry_path(@project, @subproject), icon: "add", turbo_stream: true, size: :large, colour: :primary) do %>
-          <%= t(".create_log_entry") %>
+          <span class="hidden sm:inline"><%= t(".create_log_entry") %></span>
+          <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".create_log_entry") %></span>
         <% end %>
         <%= render ActionButtonComponent.new(to: new_project_subproject_journal_path(@project, @subproject), icon: "add", size: :large, colour: :primary) do %>
-          <%= t(".create_journal_entry") %>
+          <span class="hidden sm:inline"><%= t(".create_journal_entry") %></span>
+          <span class="sm:hidden text-xs whitespace-nowrap"><%= t(".create_journal_entry") %></span>
         <% end %>
       </div>
     </div>
     <%= render ContentCardComponent.new do %>
-      <h1 class="text-2xl font-bold"><%= t(".log_entries") %></h1>
+      <h1 class="text-xl sm:text-2xl font-bold"><%= t(".log_entries") %></h1>
       <%= render Shared::IndexTableComponent.new(records: @subproject.log_entries) do |table| %>
         <% table.column :created_at do |log_entry| %>
           <%= l(log_entry.created_at) %>
@@ -42,7 +45,7 @@
       <% end %>
     <% end %>
     <%= render ContentCardComponent.new do %>
-      <h1 class="text-2xl font-bold"><%= t(".journal_entries") %></h1>
+      <h1 class="text-xl sm:text-2xl font-bold"><%= t(".journal_entries") %></h1>
       <%= render Shared::IndexTableComponent.new(records: @subproject.journals) do |table| %>
         <% table.column :title do |journal| %>
           <%= journal.title %>
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
index 96f1bf92..55ced9b7 100644
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -1,8 +1,9 @@
-<div class="mx-8 my-10">
-  <div class="flex items-center justify-between mb-4">
-    <h1 class="text-4xl font-bold"><%= t(".title") %></h1>
+<div class="mx-4 sm:mx-8 my-6 sm:my-10">
+  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
+    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold"><%= t(".title") %></h1>
     <%= render ActionButtonComponent.new(to: new_user_path, icon: "add", colour: :primary, size: :large, turbo_stream: true) do %>
-      <%= t(".actions.create") %>
+      <span class="hidden sm:inline"><%= t(".actions.create") %></span>
+      <span class="sm:hidden">New</span>
     <% end %>
   </div>
   <%= render ContentCardComponent.new do %>