diff --git a/app/controllers/map_controller.rb b/app/controllers/map_controller.rb
index aeef5dc2..ef44981b 100644
--- a/app/controllers/map_controller.rb
+++ b/app/controllers/map_controller.rb
@@ -37,7 +37,7 @@ class MapController < ApplicationController
 
     @coordinates.each_cons(2) do
       @distance += Geocoder::Calculations.distance_between(
-        [_1[0], _1[1]], [_2[0], _2[1]], units: current_user.safe_settings.distance_unit
+        [_1[0], _1[1]], [_2[0], _2[1]], units: current_user.safe_settings.distance_unit.to_sym
       )
     end
 
diff --git a/app/controllers/settings/maps_controller.rb b/app/controllers/settings/maps_controller.rb
index 58e2fef6..3cee8e0e 100644
--- a/app/controllers/settings/maps_controller.rb
+++ b/app/controllers/settings/maps_controller.rb
@@ -24,6 +24,6 @@ class Settings::MapsController < ApplicationController
   private
 
   def settings_params
-    params.require(:maps).permit(:name, :url)
+    params.require(:maps).permit(:name, :url, :distance_unit)
   end
 end
diff --git a/app/controllers/settings_controller.rb b/app/controllers/settings_controller.rb
index 82a934af..73f758b0 100644
--- a/app/controllers/settings_controller.rb
+++ b/app/controllers/settings_controller.rb
@@ -31,7 +31,8 @@ class SettingsController < ApplicationController
     params.require(:settings).permit(
       :meters_between_routes, :minutes_between_routes, :fog_of_war_meters,
       :time_threshold_minutes, :merge_threshold_minutes, :route_opacity,
-      :immich_url, :immich_api_key, :photoprism_url, :photoprism_api_key
+      :immich_url, :immich_api_key, :photoprism_url, :photoprism_api_key,
+      :distance_unit
     )
   end
 end
diff --git a/app/models/visit.rb b/app/models/visit.rb
index 4e452a11..794cfe06 100644
--- a/app/models/visit.rb
+++ b/app/models/visit.rb
@@ -25,7 +25,9 @@ class Visit < ApplicationRecord
     return area&.radius if area.present?
 
     radius = points.map do |point|
-      Geocoder::Calculations.distance_between(center, [point.lat, point.lon])
+      Geocoder::Calculations.distance_between(
+        center, [point.lat, point.lon], units: user.safe_settings.distance_unit.to_sym
+      )
     end.max
 
     radius && radius >= 15 ? radius : 15
diff --git a/app/services/users/safe_settings.rb b/app/services/users/safe_settings.rb
index 13275332..0b057e48 100644
--- a/app/services/users/safe_settings.rb
+++ b/app/services/users/safe_settings.rb
@@ -93,6 +93,6 @@ class Users::SafeSettings
   end
 
   def distance_unit
-    settings['distance_unit'] || 'km'
+    settings['maps']['distance_unit'] || 'km'
   end
 end
diff --git a/app/views/settings/_navigation.html.erb b/app/views/settings/_navigation.html.erb
index 8b5e51e0..1f61e86b 100644
--- a/app/views/settings/_navigation.html.erb
+++ b/app/views/settings/_navigation.html.erb
@@ -1,8 +1,8 @@
-<div role="tablist" class="tabs tabs-lifted tabs-lg">
-  <%= link_to 'Integrations', settings_path, role: 'tab', class: "tab #{active_tab?(settings_path)}" %>
+<div class="tabs tabs-boxed mb-6">
+  <%= link_to 'Integrations', settings_path, role: 'tab', class: "tab tab-lg #{active_tab?(settings_path)}" %>
   <% if DawarichSettings.self_hosted? && current_user.admin? %>
-    <%= link_to 'Users', settings_users_path, role: 'tab', class: "tab #{active_tab?(settings_users_path)}" %>
-    <%= link_to 'Background Jobs', settings_background_jobs_path, role: 'tab', class: "tab #{active_tab?(settings_background_jobs_path)}" %>
+    <%= link_to 'Users', settings_users_path, role: 'tab', class: "tab tab-lg #{active_tab?(settings_users_path)}" %>
+    <%= link_to 'Background Jobs', settings_background_jobs_path, role: 'tab', class: "tab tab-lg #{active_tab?(settings_background_jobs_path)}" %>
   <% end %>
-  <%= link_to 'Map', settings_maps_path, role: 'tab', class: "tab #{active_tab?(settings_maps_path)}" %>
+  <%= link_to 'Map', settings_maps_path, role: 'tab', class: "tab tab-lg #{active_tab?(settings_maps_path)}" %>
 </div>
diff --git a/app/views/settings/background_jobs/index.html.erb b/app/views/settings/background_jobs/index.html.erb
index 5af212dc..faf8502e 100644
--- a/app/views/settings/background_jobs/index.html.erb
+++ b/app/views/settings/background_jobs/index.html.erb
@@ -1,12 +1,9 @@
 <% content_for :title, "Background jobs" %>
 
 <div class="min-h-content w-full my-5">
+  <h1 class="text-3xl font-bold mb-6">Background jobs</h1>
   <%= render 'settings/navigation' %>
 
-  <div class="flex justify-between items-center mt-5">
-    <h1 class="font-bold text-4xl">Background jobs</h1>
-  </div>
-
   <div role="alert" class="alert m-5">
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/app/views/settings/index.html.erb b/app/views/settings/index.html.erb
index fc828c07..2226c69a 100644
--- a/app/views/settings/index.html.erb
+++ b/app/views/settings/index.html.erb
@@ -1,34 +1,78 @@
 <% content_for :title, 'Settings' %>
 
 <div class="min-h-content w-full my-5">
+  <h1 class="text-3xl font-bold mb-6">User Settings</h1>
   <%= render 'settings/navigation' %>
 
-  <div class="flex flex-col lg:flex-row w-full my-10 space-x-4">
-    <div class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100 px-5 py-5 mx-5">
-      <h2 class="text-2xl font-bold">Edit your Integrations settings!</h1>
-      <%= form_for :settings, url: settings_path, method: :patch, data: { turbo_method: :patch, turbo: false } do |f| %>
-        <div class="form-control my-2">
-          <%= f.label :immich_url %>
-          <%= f.text_field :immich_url, value: current_user.safe_settings.immich_url, class: "input input-bordered", placeholder: 'http://192.168.0.1:2283' %>
+  <div class="card bg-base-200 shadow-xl">
+    <%= form_for :settings, url: settings_path, method: :patch, data: { turbo_method: :patch, turbo: false } do |f| %>
+      <div class="card-body">
+        <div class="space-y-8 animate-fade-in">
+          <div>
+            <h2 class="text-2xl font-bold mb-4 flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera mr-2 text-primary">
+                <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path>
+                <circle cx="12" cy="13" r="3"></circle>
+              </svg>Immich Integration
+            </h2>
+            <div class="bg-base-100 p-5 rounded-lg shadow-sm space-y-4">
+              <div class="form-control w-full">
+                <%= f.label :immich_url, class: 'label' do %>
+                  <span class="label-text font-medium">Immich URL</span>
+                <% end %>
+                <%= f.url_field :immich_url, value: current_user.safe_settings.immich_url, class: "input input-bordered w-full pr-10", placeholder: 'http://192.168.0.1:2283' %>
+                <span class="label-text-alt mt-1">The base URL of your Immich instance</span>
+              </div>
+              <div class="form-control w-full">
+                <%= f.label :immich_api_key, class: 'label' do %>
+                  <span class="label-text font-medium">Immich API Key</span>
+                <% end %>
+                <div class="relative">
+                  <%= f.password_field :immich_api_key, value: current_user.safe_settings.immich_api_key, class: "input input-bordered w-full pr-10", placeholder: 'xxxxxxxxxxxxxx' %>
+                </div>
+                <span class="label-text-alt mt-1">Found in your Immich admin panel under API settings</span>
+              </div>
+              <%# <div class="flex justify-end">
+                <button class="btn btn-sm btn-outline">Test Connection</button>
+              </div> %>
+            </div>
+          </div>
+          <div>
+            <h2 class="text-2xl font-bold mb-4 flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera mr-2 text-primary">
+                <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path>
+                <circle cx="12" cy="13" r="3"></circle>
+              </svg>Photoprism Integration
+            </h2>
+            <div class="bg-base-100 p-5 rounded-lg shadow-sm space-y-4">
+              <div class="form-control w-full">
+                <%= f.label :photoprism_url, class: 'label' do %>
+                  <span class="label-text font-medium">Photoprism URL</span>
+                <% end %>
+                <div class="relative">
+                  <%= f.url_field :photoprism_url, value: current_user.safe_settings.photoprism_url, class: "input input-bordered w-full pr-10", placeholder: 'http://192.168.0.1:2342' %>
+                </div>
+                <span class="label-text-alt mt-1">The base URL of your Photoprism instance</span>
+              </div>
+              <div class="form-control w-full">
+                <%= f.label :photoprism_api_key, class: 'label' do %>
+                  <span class="label-text font-medium">Photoprism API Key</span>
+                <% end %>
+                <div class="relative">
+                  <%= f.password_field :photoprism_api_key, value: current_user.safe_settings.photoprism_api_key, class: "input input-bordered w-full pr-10", placeholder: 'xxxxxxxxxxxxxx' %>
+                </div>
+                <span class="label-text-alt mt-1">Found in your Photoprism settings under Library</span>
+              </div>
+              <%# <div class="flex justify-end">
+                <button class="btn btn-sm btn-outline">Test Connection</button>
+              </div> %>
+            </div>
+          </div>
         </div>
-        <div class="form-control my-2">
-          <%= f.label :immich_api_key %>
-          <%= f.text_field :immich_api_key, value: current_user.safe_settings.immich_api_key, class: "input input-bordered", placeholder: 'xxxxxxxxxxxxxx' %>
+        <div class="card-actions justify-end mt-6">
+          <%= f.submit "Save changes", class: "btn btn-primary" %>
         </div>
-        <div class="divider"></div>
-        <div class="form-control my-2">
-          <%= f.label :photoprism_url %>
-          <%= f.text_field :photoprism_url, value: current_user.safe_settings.photoprism_url, class: "input input-bordered", placeholder: 'http://192.168.0.1:2342' %>
-        </div>
-        <div class="form-control my-2">
-          <%= f.label :photoprism_api_key %>
-          <%= f.text_field :photoprism_api_key, value: current_user.safe_settings.photoprism_api_key, class: "input input-bordered", placeholder: 'xxxxxxxxxxxxxx' %>
-        </div>
-
-        <div class="form-control my-2">
-          <%= f.submit "Update", class: "btn btn-primary" %>
-        </div>
-      <% end %>
-    </div>
+      </div>
+    <% end %>
   </div>
 </div>
diff --git a/app/views/settings/maps/index.html.erb b/app/views/settings/maps/index.html.erb
index 0910f9b9..fa8ee555 100644
--- a/app/views/settings/maps/index.html.erb
+++ b/app/views/settings/maps/index.html.erb
@@ -1,12 +1,9 @@
 <% content_for :title, "Map settings" %>
 
 <div class="min-h-content w-full my-5">
+  <h1 class="text-3xl font-bold mb-6">Map settings</h1>
   <%= render 'settings/navigation' %>
 
-  <div class="flex justify-between items-center my-5">
-    <h1 class="font-bold text-4xl">Maps settings</h1>
-  </div>
-
   <div role="alert" class="alert alert-info">
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,50 +19,106 @@
     <span>Please remember, that using a custom tile URL may result in extra costs. Check your map tile provider's terms of service for more information.</span>
   </div>
 
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-5" data-controller="map-preview">
-    <div class="flex flex-col gap-4">
-      <%= form_for :maps,
-          url: settings_maps_path,
-          method: :patch,
-          autocomplete: "off",
-          data: { turbo_method: :patch, turbo: false } do |f| %>
-        <div class="form-control my-2">
-          <%= f.label :name %>
-          <%= f.text_field :name, value: @maps['name'], placeholder: 'Example: OpenStreetMap', class: "input input-bordered" %>
+  <div class="card bg-base-200 shadow-xl">
+    <%= form_for :maps,
+      url: settings_maps_path,
+      method: :patch,
+      autocomplete: "off",
+      data: { turbo_method: :patch, turbo: false } do |f| %>
+
+      <div class="card-body">
+        <div class="space-y-8 animate-fade-in">
+          <div>
+            <h2 class="text-2xl font-bold mb-4 flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map mr-2 text-primary">
+                <polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"></polygon>
+                <line x1="9" x2="9" y1="3" y2="18"></line>
+                <line x1="15" x2="15" y1="6" y2="21"></line>
+              </svg>Map Configuration
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6" data-controller="map-preview">
+              <div class="bg-base-100 p-5 rounded-lg shadow-sm space-y-4">
+                <div class="form-control w-full">
+                  <%= f.label :name, class: 'label' do %>
+                    <span class="label-text font-medium">Map Name</span>
+                  <% end %>
+                  <div class="relative">
+                    <%= f.text_field :name, value: @maps['name'], placeholder: 'Example: OpenStreetMap', class: "input input-bordered w-full pr-10" %>
+                  </div>
+                  <span class="label-text-alt mt-1">A descriptive name for your map configuration</span>
+                </div>
+                <div class="form-control w-full">
+                  <%= f.label :url, class: 'label' do %>
+                    <span class="label-text font-medium">Tile URL</span>
+                  <% end %>
+                  <div class="relative">
+                    <%= f.text_field :url,
+                      value: @maps['url'],
+                      autocomplete: "off",
+                      placeholder: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                      class: "input input-bordered w-full pr-10",
+                      data: {
+                        map_preview_target: "urlInput",
+                        action: "input->map-preview#updatePreview"
+                      } %>
+                  </div>
+                  <span class="label-text-alt mt-1">URL pattern for map tiles. Must include {x}, {y}, and {z} placeholders</span>
+                </div>
+                <div class="form-control">
+                  <label class="label cursor-pointer justify-start">
+                    <span class="label-text mr-4 flex items-center">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe mr-2 w-4 h-4">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
+                        <path d="M2 12h20"></path>
+                      </svg>Distance Unit </span>
+                    <div class="flex items-center space-x-2">
+                      <%= f.label :distance_unit_km, 'Kilometers', class: 'cursor-pointer' %>
+                      <%= f.radio_button :distance_unit, 'km', id: 'maps_distance_unit_km', class: 'radio radio-primary ml-1 mr-4', checked: @maps['distance_unit'] == 'km' %>
+                      <%= f.label :distance_unit_mi, 'Miles', class: 'cursor-pointer' %>
+                      <%= f.radio_button :distance_unit, 'mi', id: 'maps_distance_unit_mi', class: 'radio radio-primary ml-1', checked: @maps['distance_unit'] == 'mi' %>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <div class="bg-base-100 p-5 rounded-lg shadow-sm">
+                <h3 class="font-semibold mb-2">Map Preview</h3>
+                <div class="h-[250px] w-full rounded-lg overflow-hidden border border-base-300">
+                  <div class="h-full w-full relative">
+                    <div style="height: 500px;">
+                      <div
+                        data-map-preview-target="mapContainer"
+                        class="w-full h-full rounded-lg border"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bg-base-100 p-5 mt-5 rounded-lg shadow-sm">
+            <h3 class="font-semibold mb-4">Tile Usage (Last 7 Days)</h3>
+            <div class="h-[250px]">
+              <%= line_chart(
+                @tile_usage,
+                height: '200px',
+                xtitle: 'Days',
+                ytitle: 'Tiles',
+                suffix: ' tiles loaded'
+              ) %>
+            </div>
+            <div class="mt-4 text-sm text-base-content/70">
+              <p>Total usage this week: <span class="font-semibold"><%= @tile_usage.sum { |_, count| count } %> tiles</span>
+              </p>
+              <!--p>Monthly quota: <span class="font-semibold">100,000 tiles</span-->
+              </p>
+            </div>
+          </div>
         </div>
-
-        <div class="form-control my-2">
-          <%= f.label :url, 'URL' %>
-          <%= f.text_field :url,
-              value: @maps['url'],
-              autocomplete: "off",
-              placeholder: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-              class: "input input-bordered",
-              data: {
-                map_preview_target: "urlInput",
-                action: "input->map-preview#updatePreview"
-              } %>
+        <div class="card-actions justify-end mt-6">
+          <%= f.submit 'Save changes', class: "btn btn-primary", data: { map_preview_target: "saveButton" } %>
         </div>
-
-        <%= f.submit 'Save', class: "btn btn-primary", data: { map_preview_target: "saveButton" } %>
-      <% end %>
-
-      <h2 class="text-lg font-bold">Tile usage</h2>
-
-      <%= line_chart(
-        @tile_usage,
-        height: '200px',
-        xtitle: 'Days',
-        ytitle: 'Tiles',
-        suffix: ' tiles loaded'
-      ) %>
-    </div>
-
-    <div style="height: 500px;">
-      <div
-        data-map-preview-target="mapContainer"
-        class="w-full h-full rounded-lg border"
-      ></div>
-    </div>
+      </div>
+    <% end %>
   </div>
 </div>
diff --git a/app/views/settings/users/index.html.erb b/app/views/settings/users/index.html.erb
index dff5d2fb..a04c25f6 100644
--- a/app/views/settings/users/index.html.erb
+++ b/app/views/settings/users/index.html.erb
@@ -1,6 +1,7 @@
 <% content_for :title, 'Users' %>
 
-<div class="min-h-content w-full">
+<div class="min-h-content w-full my-5">
+  <h1 class="text-3xl font-bold mb-6">Users management</h1>
   <%= render 'settings/navigation' %>
 
   <div class="flex flex-col lg:flex-row w-full my-10 space-x-4">