diff --git a/lib/towerops_web/live/org/settings_live.html.heex b/lib/towerops_web/live/org/settings_live.html.heex
index accfa4d3..c5866912 100644
--- a/lib/towerops_web/live/org/settings_live.html.heex
+++ b/lib/towerops_web/live/org/settings_live.html.heex
@@ -804,214 +804,288 @@
   <% end %>
 
   <%= if @active_tab == "integrations" do %>
-    <div class="mt-8 space-y-6">
+    <div class="mt-8 space-y-5">
       <div
         :for={provider <- @providers}
-        class="rounded-lg border border-gray-200 bg-white p-6 dark:border-white/10 dark:bg-white/5"
-      >
-        <div class="flex items-start justify-between">
-          <div class="flex items-start gap-4">
-            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900/30">
-              <.icon name={provider.icon} class="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
-            </div>
-            <div>
-              <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
-                {provider.name}
-              </h3>
-              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                {provider.description}
-              </p>
+        class={[
+          "relative overflow-hidden rounded-xl border bg-white shadow-sm transition-all dark:bg-white/[0.03]",
+          cond do
+            @integrations[provider.id] && @integrations[provider.id].last_sync_status == "failed" ->
+              "border-red-200 dark:border-red-500/30"
 
+            @integrations[provider.id] && @integrations[provider.id].enabled ->
+              "border-green-200 dark:border-green-500/20"
+
+            true ->
+              "border-gray-200 dark:border-white/10"
+          end
+        ]}
+      >
+        <%!-- Left status accent bar --%>
+        <div class={[
+          "absolute inset-y-0 left-0 w-1",
+          cond do
+            @integrations[provider.id] && @integrations[provider.id].last_sync_status == "failed" ->
+              "bg-red-500"
+
+            @integrations[provider.id] && @integrations[provider.id].enabled ->
+              "bg-green-500"
+
+            @integrations[provider.id] ->
+              "bg-gray-300 dark:bg-gray-600"
+
+            true ->
+              "bg-gray-200 dark:bg-gray-700"
+          end
+        ]} />
+
+        <div class="pl-5 pr-6 py-5">
+          <%!-- === Header Row === --%>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-4">
+              <div class={[
+                "flex h-11 w-11 shrink-0 items-center justify-center rounded-full",
+                case provider.id do
+                  "preseem" -> "bg-blue-100 dark:bg-blue-900/40"
+                  "gaiia" -> "bg-purple-100 dark:bg-purple-900/40"
+                  "pagerduty" -> "bg-emerald-100 dark:bg-emerald-900/40"
+                  "netbox" -> "bg-orange-100 dark:bg-orange-900/40"
+                  _ -> "bg-indigo-100 dark:bg-indigo-900/40"
+                end
+              ]}>
+                <.icon
+                  name={provider.icon}
+                  class={[
+                    "h-5 w-5",
+                    case provider.id do
+                      "preseem" -> "text-blue-600 dark:text-blue-400"
+                      "gaiia" -> "text-purple-600 dark:text-purple-400"
+                      "pagerduty" -> "text-emerald-600 dark:text-emerald-400"
+                      "netbox" -> "text-orange-600 dark:text-orange-400"
+                      _ -> "text-indigo-600 dark:text-indigo-400"
+                    end
+                  ]}
+                />
+              </div>
+              <div>
+                <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+                  {provider.name}
+                </h3>
+                <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+                  {provider.description}
+                </p>
+              </div>
+            </div>
+
+            <%!-- === Actions (top right) === --%>
+            <div class="flex items-center gap-4 shrink-0 ml-4">
               <%= if integration = @integrations[provider.id] do %>
-                <div class="mt-3 flex items-center gap-4">
+                <div class="flex items-center gap-2">
                   <span class={[
-                    "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+                    "text-xs font-medium",
                     if(integration.enabled,
-                      do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
-                      else: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                      do: "text-green-700 dark:text-green-400",
+                      else: "text-gray-500 dark:text-gray-400"
                     )
                   ]}>
                     {if integration.enabled, do: "Enabled", else: "Disabled"}
                   </span>
+                  <button
+                    type="button"
+                    phx-click="toggle_enabled"
+                    phx-value-provider={provider.id}
+                    class={[
+                      "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 dark:focus:ring-offset-gray-900",
+                      if(integration.enabled,
+                        do: "bg-indigo-600",
+                        else: "bg-gray-200 dark:bg-gray-700"
+                      )
+                    ]}
+                  >
+                    <span class={[
+                      "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+                      if(integration.enabled, do: "translate-x-5", else: "translate-x-0")
+                    ]}>
+                    </span>
+                  </button>
+                </div>
+              <% end %>
 
+              <button
+                type="button"
+                id={"configure-#{provider.id}"}
+                phx-click="configure"
+                phx-value-provider={provider.id}
+                class={[
+                  "rounded-lg px-4 py-2 text-sm font-semibold shadow-xs transition-colors",
+                  if(@configuring == provider.id,
+                    do:
+                      "bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-300 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10",
+                    else:
+                      "bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
+                  )
+                ]}
+              >
+                {if @configuring == provider.id, do: "Close", else: "Configure"}
+              </button>
+            </div>
+          </div>
+
+          <%!-- === Status Row (when configured) === --%>
+          <%= if integration = @integrations[provider.id] do %>
+            <%!-- Failed sync banner --%>
+            <%= if integration.last_sync_status == "failed" do %>
+              <div class="mt-4 flex items-start gap-3 rounded-lg bg-red-50 px-4 py-3 dark:bg-red-900/20">
+                <.icon
+                  name="hero-exclamation-triangle"
+                  class="h-5 w-5 shrink-0 text-red-500 dark:text-red-400 mt-0.5"
+                />
+                <div>
+                  <p class="text-sm font-medium text-red-800 dark:text-red-300">
+                    Last sync failed
+                  </p>
+                  <%= if integration.last_sync_message && integration.last_sync_message != "" do %>
+                    <p class="mt-0.5 text-sm text-red-700 dark:text-red-400">
+                      {integration.last_sync_message}
+                    </p>
+                  <% end %>
                   <%= if integration.last_synced_at do %>
-                    <span class="text-xs text-gray-500 dark:text-gray-400">
-                      Last synced:
+                    <p class="mt-1 text-xs text-red-600/70 dark:text-red-400/60">
+                      <.timestamp
+                        datetime={integration.last_synced_at}
+                        timezone={@timezone}
+                        format="absolute"
+                      />
+                    </p>
+                  <% end %>
+                </div>
+              </div>
+            <% else %>
+              <div class="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2">
+                <%!-- Status dot + label --%>
+                <div class="flex items-center gap-2">
+                  <span class={[
+                    "inline-block h-2 w-2 rounded-full",
+                    if(integration.enabled,
+                      do: "bg-green-500",
+                      else: "bg-gray-400 dark:bg-gray-500"
+                    )
+                  ]} />
+                  <span class="text-sm text-gray-600 dark:text-gray-400">
+                    {if integration.enabled, do: "Connected", else: "Paused"}
+                  </span>
+                </div>
+
+                <%!-- Last synced --%>
+                <%= if integration.last_synced_at do %>
+                  <div class="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+                    <.icon name="hero-clock" class="h-3.5 w-3.5" />
+                    <span>
+                      Synced
                       <.timestamp
                         datetime={integration.last_synced_at}
                         timezone={@timezone}
                         format="absolute"
                       />
                     </span>
-                  <% end %>
+                  </div>
+                <% else %>
+                  <span class="text-sm italic text-gray-400 dark:text-gray-500">
+                    Never synced
+                  </span>
+                <% end %>
 
-                  <%= if integration.last_sync_status && integration.last_sync_status != "never" do %>
-                    <span class={[
-                      "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
-                      case integration.last_sync_status do
-                        "success" ->
-                          "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+                <%!-- Sync status badge (success/partial) --%>
+                <%= if integration.last_sync_status && integration.last_sync_status not in ["never", "failed"] do %>
+                  <span class={[
+                    "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium",
+                    case integration.last_sync_status do
+                      "success" ->
+                        "bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20"
 
-                        "partial" ->
-                          "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+                      "partial" ->
+                        "bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-500/10 dark:text-yellow-400 dark:ring-yellow-500/20"
 
-                        "failed" ->
-                          "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+                      _ ->
+                        "bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:bg-gray-500/10 dark:text-gray-400 dark:ring-gray-500/20"
+                    end
+                  ]}>
+                    <%= if integration.last_sync_status == "success" do %>
+                      <.icon name="hero-check-circle-mini" class="h-3.5 w-3.5" />
+                    <% end %>
+                    {String.capitalize(integration.last_sync_status)}
+                  </span>
+                <% end %>
 
-                        _ ->
-                          "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
-                      end
-                    ]}>
-                      {String.capitalize(integration.last_sync_status)}
-                    </span>
-                  <% end %>
+                <%!-- Sync message (success/partial) --%>
+                <%= if integration.last_sync_message && integration.last_sync_message != "" && integration.last_sync_status != "failed" do %>
+                  <span class="text-sm text-gray-500 dark:text-gray-400">
+                    {integration.last_sync_message}
+                  </span>
+                <% end %>
 
-                  <%= if integration.last_sync_message && integration.last_sync_message != "" do %>
-                    <span class={[
-                      "text-xs",
-                      if(integration.last_sync_status == "failed",
-                        do: "text-red-600 dark:text-red-400",
-                        else: "text-gray-500 dark:text-gray-400"
-                      )
-                    ]}>
-                      {integration.last_sync_message}
-                    </span>
-                  <% end %>
+                <%!-- Next sync --%>
+                <%= if integration.last_synced_at && integration.enabled do %>
+                  <span class="text-xs text-gray-400 dark:text-gray-500">
+                    Next in ~{next_sync_minutes(
+                      integration.last_synced_at,
+                      integration.sync_interval_minutes
+                    )}m
+                  </span>
+                <% end %>
 
-                  <%= if integration.last_synced_at do %>
-                    <span class="text-xs text-gray-400 dark:text-gray-500">
-                      · Next sync in ~{next_sync_minutes(
-                        integration.last_synced_at,
-                        integration.sync_interval_minutes
-                      )}m
-                    </span>
-                  <% end %>
-
-                  <%= if provider.id == "preseem" do %>
-                    <.link
-                      navigate={
-                        ~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices"
-                      }
-                      class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                    >
-                      Manage Devices →
-                    </.link>
-                    <.link
-                      navigate={~p"/insights?source=preseem"}
-                      class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                    >
-                      Network Insights →
-                    </.link>
-                  <% end %>
-                  <%= if provider.id == "gaiia" do %>
-                    <.link
-                      navigate={
-                        ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"
-                      }
-                      class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                    >
-                      Entity Mapping →
-                    </.link>
-                    <.link
-                      navigate={
-                        ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"
-                      }
-                      class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                    >
-                      Reconciliation →
-                    </.link>
-                  <% end %>
-                  <%!-- Sync schedule info --%>
-                  <%= if integration.enabled do %>
-                    <div class="mt-3 rounded-md bg-gray-50 p-3 dark:bg-gray-800/50">
-                      <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300">
-                        <.icon name="hero-clock" class="h-3.5 w-3.5 inline" /> Sync Schedule
-                      </h4>
-                      <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                        <%= if provider.id == "preseem" do %>
-                          Syncs every {integration.sync_interval_minutes} minutes. Baselines and fleet profiles computed nightly.
-                        <% end %>
-                        <%= if provider.id == "gaiia" do %>
-                          Syncs every {integration.sync_interval_minutes} minutes. Reconciliation runs nightly. Also receives real-time webhook updates.
-                        <% end %>
-                        <%= if provider.id == "pagerduty" do %>
-                          Event-driven — no polling needed. TowerOps sends events to PagerDuty in real time:
-                          <ul class="mt-1 space-y-0.5 list-disc list-inside text-xs text-gray-500 dark:text-gray-400">
-                            <li>
-                              <strong class="text-gray-700 dark:text-gray-300">
-                                Device down
-                              </strong>
-                              → PagerDuty incident triggered (critical)
-                            </li>
-                            <li>
-                              <strong class="text-gray-700 dark:text-gray-300">
-                                Alert acknowledged
-                              </strong>
-                              → PagerDuty incident acknowledged
-                            </li>
-                            <li>
-                              <strong class="text-gray-700 dark:text-gray-300">
-                                Device recovers
-                              </strong>
-                              → PagerDuty incident auto-resolved
-                            </li>
-                          </ul>
-                        <% end %>
-                        <%= if provider.id == "netbox" do %>
-                          <% direction = get_credential(integration, "sync_direction") %> Syncs every {integration.sync_interval_minutes} minutes.
-                          <%= case direction do %>
-                            <% "push" -> %>
-                              TowerOps → NetBox (TowerOps is source of truth)
-                            <% "both" -> %>
-                              Bidirectional sync (merge from both systems)
-                            <% _ -> %>
-                              NetBox → TowerOps (NetBox is source of truth)
-                          <% end %>
-                        <% end %>
-                      </p>
-                    </div>
-                  <% end %>
-                </div>
-              <% end %>
-            </div>
-          </div>
-
-          <div class="flex items-center gap-3">
-            <%= if integration = @integrations[provider.id] do %>
-              <button
-                type="button"
-                phx-click="toggle_enabled"
-                phx-value-provider={provider.id}
-                class={[
-                  "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
-                  if(integration.enabled,
-                    do: "bg-indigo-600",
-                    else: "bg-gray-200 dark:bg-gray-700"
-                  )
-                ]}
-              >
-                <span class={[
-                  "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-                  if(integration.enabled, do: "translate-x-5", else: "translate-x-0")
-                ]}>
-                </span>
-              </button>
+                <%!-- Sync schedule note --%>
+                <%= if integration.enabled && provider.id == "pagerduty" do %>
+                  <span class="text-xs text-gray-400 dark:text-gray-500">
+                    · Event-driven (real-time)
+                  </span>
+                <% end %>
+              </div>
             <% end %>
 
-            <button
-              type="button"
-              id={"configure-#{provider.id}"}
-              phx-click="configure"
-              phx-value-provider={provider.id}
-              class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
-            >
-              Configure
-            </button>
-          </div>
+            <%!-- === Provider Links Row === --%>
+            <%= if provider.id == "preseem" || provider.id == "gaiia" do %>
+              <div class="mt-3 flex flex-wrap gap-3">
+                <%= if provider.id == "preseem" do %>
+                  <.link
+                    navigate={
+                      ~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices"
+                    }
+                    class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
+                  >
+                    <.icon name="hero-cpu-chip" class="h-3.5 w-3.5" /> Manage Devices
+                  </.link>
+                  <.link
+                    navigate={~p"/insights?source=preseem"}
+                    class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
+                  >
+                    <.icon name="hero-chart-bar" class="h-3.5 w-3.5" /> Network Insights
+                  </.link>
+                <% end %>
+                <%= if provider.id == "gaiia" do %>
+                  <.link
+                    navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"}
+                    class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
+                  >
+                    <.icon name="hero-arrows-right-left" class="h-3.5 w-3.5" /> Entity Mapping
+                  </.link>
+                  <.link
+                    navigate={
+                      ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"
+                    }
+                    class="inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200 transition-colors hover:bg-gray-100 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/10"
+                  >
+                    <.icon name="hero-scale" class="h-3.5 w-3.5" /> Reconciliation
+                  </.link>
+                <% end %>
+              </div>
+            <% end %>
+          <% end %>
         </div>
 
+        <%!-- === Configure Panel === --%>
         <%= if @configuring == provider.id do %>
-          <div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
+          <div class="border-t border-gray-200 bg-gray-50/50 px-6 py-6 dark:border-white/10 dark:bg-white/[0.02]">
             <%= if provider.id == "netbox" do %>
               <.form
                 for={@integration_form}
@@ -1022,10 +1096,13 @@
                 <div class="space-y-6">
                   <%!-- Connection Section --%>
                   <div>
-                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
-                      Connection
-                    </h4>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">
+                    <div class="flex items-center gap-2 mb-1">
+                      <.icon name="hero-link" class="h-4 w-4 text-gray-400" />
+                      <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
+                        Connection
+                      </h4>
+                    </div>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
                       Your NetBox instance URL and API token. The token needs read permission at minimum.
                       Write permission is required if you want to push data to NetBox.
                     </p>
@@ -1051,15 +1128,18 @@
 
                   <%!-- Sync Direction Section --%>
                   <div class="border-t border-gray-200 pt-6 dark:border-white/10">
-                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
-                      Sync Direction
-                    </h4>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">
+                    <div class="flex items-center gap-2 mb-1">
+                      <.icon name="hero-arrows-right-left" class="h-4 w-4 text-gray-400" />
+                      <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
+                        Sync Direction
+                      </h4>
+                    </div>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
                       Choose how data flows between TowerOps and NetBox. You can change this later.
                     </p>
                     <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                       <label class={[
-                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs focus:outline-none",
+                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
                         if(
                           get_credential(@integrations["netbox"], "sync_direction") in [
                             "pull",
@@ -1069,7 +1149,7 @@
                           do:
                             "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
                           else:
-                            "border-gray-300 dark:border-white/10 hover:border-gray-400 dark:hover:border-white/20"
+                            "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
                         )
                       ]}>
                         <input
@@ -1090,19 +1170,19 @@
                             <.icon name="hero-arrow-down-tray" class="h-4 w-4 text-indigo-600" />
                             NetBox → TowerOps
                           </span>
-                          <span class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                          <span class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                             NetBox is the source of truth. Import devices, sites, and IPs from NetBox into TowerOps.
                           </span>
                         </div>
                       </label>
                       <label class={[
-                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs focus:outline-none",
+                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
                         if(
                           get_credential(@integrations["netbox"], "sync_direction") == "push",
                           do:
                             "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
                           else:
-                            "border-gray-300 dark:border-white/10 hover:border-gray-400 dark:hover:border-white/20"
+                            "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
                         )
                       ]}>
                         <input
@@ -1119,19 +1199,19 @@
                             <.icon name="hero-arrow-up-tray" class="h-4 w-4 text-orange-600" />
                             TowerOps → NetBox
                           </span>
-                          <span class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                          <span class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                             TowerOps is the source of truth. Push discovered devices and monitoring data to NetBox.
                           </span>
                         </div>
                       </label>
                       <label class={[
-                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs focus:outline-none",
+                        "relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
                         if(
                           get_credential(@integrations["netbox"], "sync_direction") == "both",
                           do:
                             "border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
                           else:
-                            "border-gray-300 dark:border-white/10 hover:border-gray-400 dark:hover:border-white/20"
+                            "border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
                         )
                       ]}>
                         <input
@@ -1150,7 +1230,7 @@
                               class="h-4 w-4 text-green-600"
                             /> Bidirectional
                           </span>
-                          <span class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                          <span class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                             Merge data from both systems. Conflicts resolved by most-recently-updated. Requires write token.
                           </span>
                         </div>
@@ -1160,14 +1240,17 @@
 
                   <%!-- What to Sync Section --%>
                   <div class="border-t border-gray-200 pt-6 dark:border-white/10">
-                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
-                      What to Sync
-                    </h4>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">
+                    <div class="flex items-center gap-2 mb-1">
+                      <.icon name="hero-circle-stack" class="h-4 w-4 text-gray-400" />
+                      <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
+                        What to Sync
+                      </h4>
+                    </div>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
                       Choose which NetBox objects participate in sync. Devices and sites are recommended at minimum.
                     </p>
                     <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                      <label class="flex items-start gap-3 rounded-lg border border-gray-200 p-3 dark:border-white/10">
+                      <label class="flex items-start gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
                         <input
                           type="hidden"
                           name="integration[sync_devices]"
@@ -1191,7 +1274,7 @@
                           </p>
                         </div>
                       </label>
-                      <label class="flex items-start gap-3 rounded-lg border border-gray-200 p-3 dark:border-white/10">
+                      <label class="flex items-start gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
                         <input
                           type="hidden"
                           name="integration[sync_sites]"
@@ -1215,7 +1298,7 @@
                           </p>
                         </div>
                       </label>
-                      <label class="flex items-start gap-3 rounded-lg border border-gray-200 p-3 dark:border-white/10">
+                      <label class="flex items-start gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
                         <input
                           type="hidden"
                           name="integration[sync_ip_addresses]"
@@ -1239,7 +1322,7 @@
                           </p>
                         </div>
                       </label>
-                      <label class="flex items-start gap-3 rounded-lg border border-gray-200 p-3 dark:border-white/10">
+                      <label class="flex items-start gap-3 rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5">
                         <input
                           type="hidden"
                           name="integration[sync_interfaces]"
@@ -1268,13 +1351,16 @@
 
                   <%!-- Filtering Section --%>
                   <div class="border-t border-gray-200 pt-6 dark:border-white/10">
-                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
-                      Filters
+                    <div class="flex items-center gap-2 mb-1">
+                      <.icon name="hero-funnel" class="h-4 w-4 text-gray-400" />
+                      <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
+                        Filters
+                      </h4>
                       <span class="text-xs font-normal text-gray-400 dark:text-gray-500">
                         (optional)
                       </span>
-                    </h4>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">
+                    </div>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
                       Narrow the sync scope. Leave blank to sync everything. Comma-separated for multiple values.
                     </p>
                     <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
@@ -1341,45 +1427,45 @@
                   <%!-- Test & Save --%>
                   <%= if @test_result do %>
                     <div class={[
-                      "rounded-md p-4",
+                      "flex items-start gap-3 rounded-lg p-4",
                       case @test_result do
                         {:ok, _} -> "bg-green-50 dark:bg-green-900/20"
                         {:error, _} -> "bg-red-50 dark:bg-red-900/20"
                       end
                     ]}>
-                      <p class={[
-                        "text-sm",
-                        case @test_result do
-                          {:ok, _} -> "text-green-700 dark:text-green-400"
-                          {:error, _} -> "text-red-700 dark:text-red-400"
-                        end
-                      ]}>
-                        <%= case @test_result do %>
-                          <% {:ok, msg} -> %>
-                            <.icon name="hero-check-circle" class="h-4 w-4 inline" />
+                      <%= case @test_result do %>
+                        <% {:ok, msg} -> %>
+                          <.icon
+                            name="hero-check-circle"
+                            class="h-5 w-5 shrink-0 text-green-500 dark:text-green-400"
+                          />
+                          <p class="text-sm font-medium text-green-800 dark:text-green-300">
                             {msg}
-                          <% {:error, msg} -> %>
-                            <.icon name="hero-x-circle" class="h-4 w-4 inline" />
-                            {msg}
-                        <% end %>
-                      </p>
+                          </p>
+                        <% {:error, msg} -> %>
+                          <.icon
+                            name="hero-x-circle"
+                            class="h-5 w-5 shrink-0 text-red-500 dark:text-red-400"
+                          />
+                          <p class="text-sm font-medium text-red-800 dark:text-red-300">{msg}</p>
+                      <% end %>
                     </div>
                   <% end %>
 
-                  <div class="flex items-center justify-end gap-x-4 border-t border-gray-200 pt-4 dark:border-white/10">
+                  <div class="flex items-center justify-end gap-x-3 border-t border-gray-200 pt-5 dark:border-white/10">
                     <button
                       type="button"
                       phx-click="test_connection"
-                      class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
+                      class="rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 transition-colors hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
                     >
-                      Test Connection
+                      <.icon name="hero-signal" class="h-4 w-4 inline -mt-0.5" /> Test Connection
                     </button>
                     <button
                       type="submit"
                       phx-disable-with="Saving..."
-                      class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+                      class="rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-xs transition-colors hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                     >
-                      Save
+                      Save Integration
                     </button>
                   </div>
                 </div>
@@ -1391,32 +1477,42 @@
                 phx-change="validate_integration"
                 phx-submit="save_integration"
               >
-                <div class="space-y-4">
-                  <.input
-                    field={@integration_form[:api_key]}
-                    type="password"
-                    label={
-                      if(provider.id == "pagerduty",
-                        do: "Integration Key (Routing Key)",
-                        else: "API Key"
-                      )
-                    }
-                    placeholder={
-                      if(provider.id == "pagerduty",
-                        do: "Enter your PagerDuty integration key",
-                        else: "Enter your #{provider.name} API key"
-                      )
-                    }
-                    autocomplete="off"
-                    value={get_credential(@integrations[provider.id], "api_key")}
-                  />
+                <div class="space-y-5">
+                  <div>
+                    <div class="flex items-center gap-2 mb-4">
+                      <.icon name="hero-key" class="h-4 w-4 text-gray-400" />
+                      <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
+                        Connection Settings
+                      </h4>
+                    </div>
+
+                    <.input
+                      field={@integration_form[:api_key]}
+                      type="password"
+                      label={
+                        if(provider.id == "pagerduty",
+                          do: "Integration Key (Routing Key)",
+                          else: "API Key"
+                        )
+                      }
+                      placeholder={
+                        if(provider.id == "pagerduty",
+                          do: "Enter your PagerDuty integration key",
+                          else: "Enter your #{provider.name} API key"
+                        )
+                      }
+                      autocomplete="off"
+                      value={get_credential(@integrations[provider.id], "api_key")}
+                    />
+                  </div>
 
                   <%= if provider.id == "pagerduty" do %>
-                    <div class="rounded-md bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 p-4 -mt-1">
-                      <h4 class="text-xs font-semibold text-blue-900 dark:text-blue-300 mb-2">
+                    <div class="rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/50 p-4">
+                      <h4 class="flex items-center gap-1.5 text-xs font-semibold text-blue-900 dark:text-blue-300 mb-2">
+                        <.icon name="hero-information-circle" class="h-4 w-4" />
                         Where to find your Integration Key
                       </h4>
-                      <ol class="list-decimal list-inside space-y-1 text-xs text-blue-800 dark:text-blue-300">
+                      <ol class="list-decimal list-inside space-y-1 text-xs text-blue-800 dark:text-blue-300 ml-5">
                         <li>
                           In PagerDuty, go to <strong>Services</strong>
                           → select your service (or create one)
@@ -1428,40 +1524,50 @@
                         </li>
                         <li>Copy the <strong>Integration Key</strong> and paste it above</li>
                       </ol>
-                      <p class="mt-2 text-xs text-blue-700 dark:text-blue-400">
+                      <p class="mt-2.5 text-xs text-blue-700 dark:text-blue-400 ml-5">
                         When connected, TowerOps will automatically trigger, acknowledge, and resolve PagerDuty incidents in sync with your alerts.
                       </p>
                     </div>
                   <% end %>
 
                   <%= if provider.id != "pagerduty" do %>
-                    <.input
-                      field={@integration_form[:sync_interval_minutes]}
-                      type="number"
-                      label="Sync interval (minutes)"
-                      min="5"
-                      value={
-                        if(@integrations[provider.id],
-                          do: @integrations[provider.id].sync_interval_minutes,
-                          else: if(provider.id == "gaiia", do: 15, else: 10)
-                        )
-                      }
-                    />
+                    <div class="border-t border-gray-200 pt-5 dark:border-white/10">
+                      <div class="flex items-center gap-2 mb-4">
+                        <.icon name="hero-clock" class="h-4 w-4 text-gray-400" />
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
+                          Sync Settings
+                        </h4>
+                      </div>
+                      <div class="max-w-xs">
+                        <.input
+                          field={@integration_form[:sync_interval_minutes]}
+                          type="number"
+                          label="Sync interval (minutes)"
+                          min="5"
+                          value={
+                            if(@integrations[provider.id],
+                              do: @integrations[provider.id].sync_interval_minutes,
+                              else: if(provider.id == "gaiia", do: 15, else: 10)
+                            )
+                          }
+                        />
+                      </div>
+                    </div>
                   <% end %>
 
                   <%= if @test_result do %>
                     <div class={[
-                      "rounded-md p-4",
+                      "flex items-start gap-3 rounded-lg p-4",
                       case @test_result do
                         {:ok, _} -> "bg-green-50 dark:bg-green-900/20"
                         {:error, _} -> "bg-red-50 dark:bg-red-900/20"
                       end
                     ]}>
                       <p class={[
-                        "text-sm",
+                        "text-sm font-medium",
                         case @test_result do
-                          {:ok, _} -> "text-green-800 dark:text-green-200"
-                          {:error, _} -> "text-red-800 dark:text-red-200"
+                          {:ok, _} -> "text-green-800 dark:text-green-300"
+                          {:error, _} -> "text-red-800 dark:text-red-300"
                         end
                       ]}>
                         {elem(@test_result, 1)}
@@ -1469,111 +1575,115 @@
                     </div>
                   <% end %>
 
-                  <div class="flex items-center justify-between pt-4">
+                  <div class="flex items-center justify-between border-t border-gray-200 pt-5 dark:border-white/10">
                     <button
                       type="button"
                       id="test-connection"
                       phx-click="test_connection"
-                      class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
+                      class="rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 transition-colors hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
                     >
-                      Test Connection
+                      <.icon name="hero-signal" class="h-4 w-4 inline -mt-0.5" /> Test Connection
                     </button>
 
                     <div class="flex items-center gap-3">
                       <button
                         type="button"
                         phx-click="close_config"
-                        class="text-sm font-semibold text-gray-900 dark:text-white"
+                        class="rounded-lg px-4 py-2.5 text-sm font-semibold text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
                       >
                         Cancel
                       </button>
                       <button
                         type="submit"
                         phx-disable-with="Saving..."
-                        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+                        class="rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-xs transition-colors hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                       >
-                        Save
+                        Save Integration
                       </button>
                     </div>
                   </div>
                 </div>
               </.form>
             <% end %>
-          </div>
-        <% end %>
 
-        <%= if provider.id == "gaiia" && @integrations["gaiia"] && @configuring == "gaiia" do %>
-          <div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
-            <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
-              Webhook Configuration
-            </h4>
-            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-              Receive real-time updates from Gaiia when accounts, subscriptions, or inventory items change.
-            </p>
+            <%!-- Gaiia Webhook Section --%>
+            <%= if provider.id == "gaiia" && @integrations["gaiia"] do %>
+              <div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
+                <div class="flex items-center gap-2 mb-1">
+                  <.icon name="hero-globe-alt" class="h-4 w-4 text-gray-400" />
+                  <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
+                    Webhook Configuration
+                  </h4>
+                </div>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-6">
+                  Receive real-time updates from Gaiia when accounts, subscriptions, or inventory items change.
+                </p>
 
-            <div class="mt-4 space-y-4">
-              <div>
-                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300">
-                  Webhook URL
-                </label>
-                <div class="mt-1 flex items-center gap-2">
-                  <input
-                    id="gaiia-webhook-url"
-                    type="text"
-                    readonly
-                    value={webhook_url(@organization.id)}
-                    class="block w-full rounded-md border-gray-300 bg-gray-50 py-1.5 text-sm text-gray-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
-                  />
-                  <button
-                    type="button"
-                    phx-hook="CopyToClipboard"
-                    data-target="#gaiia-webhook-url"
-                    id="copy-webhook-url"
-                    class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/20"
-                  >
-                    <.icon name="hero-clipboard" class="h-3.5 w-3.5" /> Copy
-                  </button>
+                <div class="mt-4 space-y-4">
+                  <div>
+                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300">
+                      Webhook URL
+                    </label>
+                    <div class="mt-1 flex items-center gap-2">
+                      <input
+                        id="gaiia-webhook-url"
+                        type="text"
+                        readonly
+                        value={webhook_url(@organization.id)}
+                        class="block w-full rounded-md border-gray-300 bg-gray-50 py-1.5 text-sm text-gray-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
+                      />
+                      <button
+                        type="button"
+                        phx-hook="CopyToClipboard"
+                        data-target="#gaiia-webhook-url"
+                        id="copy-webhook-url"
+                        class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/20"
+                      >
+                        <.icon name="hero-clipboard" class="h-3.5 w-3.5" /> Copy
+                      </button>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300">
+                      Webhook Secret
+                    </label>
+                    <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                      Paste the secret key generated by Gaiia when you create the webhook.
+                    </p>
+                    <div class="mt-1 flex items-center gap-2">
+                      <input
+                        id="gaiia-webhook-secret"
+                        type="password"
+                        name="webhook_secret"
+                        value={get_credential(@integrations["gaiia"], "webhook_secret")}
+                        placeholder="Paste the secret from Gaiia"
+                        phx-blur="save_webhook_secret"
+                        class="block w-full rounded-md border-gray-300 py-1.5 font-mono text-sm text-gray-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/50">
+                    <h5 class="flex items-center gap-1.5 text-xs font-semibold text-blue-800 dark:text-blue-300">
+                      <.icon name="hero-information-circle" class="h-4 w-4" /> Setup Instructions
+                    </h5>
+                    <ol class="mt-2 list-inside list-decimal space-y-1 text-xs text-blue-700 dark:text-blue-400 ml-5">
+                      <li>In your Gaiia admin panel, go to Settings → Webhooks</li>
+                      <li>Click &quot;Add Webhook&quot;</li>
+                      <li>Paste the Webhook URL above</li>
+                      <li>Under Events, select &quot;All Events&quot;</li>
+                      <li>Gaiia will generate a secret key — copy it</li>
+                      <li>Paste the secret key into the Webhook Secret field above</li>
+                      <li>Save the webhook</li>
+                    </ol>
+                    <p class="mt-2.5 text-xs text-blue-600 dark:text-blue-400 ml-5">
+                      Once configured, Towerops will receive real-time updates when accounts, subscriptions, or inventory items change in Gaiia.
+                    </p>
+                  </div>
                 </div>
               </div>
-
-              <div>
-                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300">
-                  Webhook Secret
-                </label>
-                <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
-                  Paste the secret key generated by Gaiia when you create the webhook.
-                </p>
-                <div class="mt-1 flex items-center gap-2">
-                  <input
-                    id="gaiia-webhook-secret"
-                    type="password"
-                    name="webhook_secret"
-                    value={get_credential(@integrations["gaiia"], "webhook_secret")}
-                    placeholder="Paste the secret from Gaiia"
-                    phx-blur="save_webhook_secret"
-                    class="block w-full rounded-md border-gray-300 py-1.5 font-mono text-sm text-gray-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
-                  />
-                </div>
-              </div>
-
-              <div class="rounded-md bg-blue-50 p-3 dark:bg-blue-900/20">
-                <h5 class="text-xs font-medium text-blue-800 dark:text-blue-300">
-                  Setup Instructions
-                </h5>
-                <ol class="mt-2 list-inside list-decimal space-y-1 text-xs text-blue-700 dark:text-blue-400">
-                  <li>In your Gaiia admin panel, go to Settings → Webhooks</li>
-                  <li>Click &quot;Add Webhook&quot;</li>
-                  <li>Paste the Webhook URL above</li>
-                  <li>Under Events, select &quot;All Events&quot;</li>
-                  <li>Gaiia will generate a secret key — copy it</li>
-                  <li>Paste the secret key into the Webhook Secret field above</li>
-                  <li>Save the webhook</li>
-                </ol>
-                <p class="mt-2 text-xs text-blue-600 dark:text-blue-400">
-                  Once configured, Towerops will receive real-time updates when accounts, subscriptions, or inventory items change in Gaiia.
-                </p>
-              </div>
-            </div>
+            <% end %>
           </div>
         <% end %>
       </div>