diff --git a/src/components/ContainerResourcesModal.vue b/src/components/ContainerResourcesModal.vue
new file mode 100644
index 0000000..4fa2733
--- /dev/null
+++ b/src/components/ContainerResourcesModal.vue
@@ -0,0 +1,485 @@
+<template>
+  <div v-if="visible" class="modal-overlay" @click.self="$emit('close')">
+    <div class="modal-panel">
+      <div class="modal-header">
+        <div class="modal-title-group">
+          <h2>Container Resources</h2>
+          <code class="container-name">{{ containerName }}</code>
+        </div>
+        <button class="close-btn" @click="$emit('close')">
+          <i class="pi pi-times" />
+        </button>
+      </div>
+
+      <div v-if="loadingResources" class="modal-loading">
+        <i class="pi pi-spin pi-spinner" />
+        <span>Loading resources...</span>
+      </div>
+
+      <template v-else-if="resources">
+        <div class="modal-body">
+          <div class="current-resources">
+            <h3>Current Limits</h3>
+            <div class="resource-grid">
+              <div class="resource-display">
+                <span class="resource-label">CPU</span>
+                <span class="resource-value">{{ resources.cpus > 0 ? resources.cpus + " cores" : "Unlimited" }}</span>
+              </div>
+              <div class="resource-display">
+                <span class="resource-label">Memory</span>
+                <span class="resource-value">{{
+                  resources.memory_limit > 0 ? formatBytes(resources.memory_limit) : "Unlimited"
+                }}</span>
+              </div>
+              <div class="resource-display">
+                <span class="resource-label">Memory + Swap</span>
+                <span class="resource-value">{{
+                  resources.memory_swap > 0 ? formatBytes(resources.memory_swap) : "Unlimited"
+                }}</span>
+              </div>
+              <div class="resource-display">
+                <span class="resource-label">CPU Shares</span>
+                <span class="resource-value">{{ resources.cpu_shares || 1024 }}</span>
+              </div>
+              <div class="resource-display">
+                <span class="resource-label">Restart Policy</span>
+                <span class="resource-value">{{ resources.restart_policy || "no" }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="canWrite" class="update-resources">
+            <h3>Update Limits</h3>
+            <div class="form-grid">
+              <div class="form-group">
+                <label for="cpus">CPU Cores</label>
+                <div class="input-with-hint">
+                  <input
+                    id="cpus"
+                    v-model.number="form.cpus"
+                    type="number"
+                    min="0"
+                    step="0.25"
+                    placeholder="e.g. 0.5, 1, 2"
+                  />
+                  <span class="input-hint">0 = unlimited</span>
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="memory">Memory Limit (MB)</label>
+                <div class="input-with-hint">
+                  <input
+                    id="memory"
+                    v-model.number="form.memoryMB"
+                    type="number"
+                    min="0"
+                    step="32"
+                    placeholder="e.g. 256, 512, 1024"
+                  />
+                  <span class="input-hint">0 = unlimited</span>
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="memorySwap">Memory + Swap (MB)</label>
+                <div class="input-with-hint">
+                  <input
+                    id="memorySwap"
+                    v-model.number="form.memorySwapMB"
+                    type="number"
+                    min="0"
+                    step="32"
+                    placeholder="e.g. 512, 1024"
+                  />
+                  <span class="input-hint">Must be >= memory limit</span>
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="cpuShares">CPU Shares</label>
+                <div class="input-with-hint">
+                  <input
+                    id="cpuShares"
+                    v-model.number="form.cpuShares"
+                    type="number"
+                    min="0"
+                    step="128"
+                    placeholder="Default: 1024"
+                  />
+                  <span class="input-hint">Relative weight (default 1024)</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="canWrite" class="modal-footer">
+          <div v-if="error" class="error-message">
+            <i class="pi pi-exclamation-circle" />
+            {{ error }}
+          </div>
+          <div class="footer-actions">
+            <button class="btn btn-secondary" @click="$emit('close')">Cancel</button>
+            <button class="btn btn-primary" :disabled="saving || !hasChanges" @click="saveResources">
+              <i v-if="saving" class="pi pi-spin pi-spinner" />
+              <span>{{ saving ? "Updating..." : "Update Resources" }}</span>
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="modal-error">
+        <i class="pi pi-exclamation-triangle" />
+        <span>Failed to load container resources</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { containersApi, type ResourceLimits, type ResourceUpdate } from "@/services/api";
+
+const props = defineProps<{
+  visible: boolean;
+  containerId: string;
+  containerName: string;
+  canWrite: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  updated: [];
+}>();
+
+const resources = ref<ResourceLimits | null>(null);
+const loadingResources = ref(false);
+const saving = ref(false);
+const error = ref("");
+
+const form = ref({
+  cpus: null as number | null,
+  memoryMB: null as number | null,
+  memorySwapMB: null as number | null,
+  cpuShares: null as number | null,
+});
+
+const hasChanges = computed(() => {
+  if (!resources.value) return false;
+  const r = resources.value;
+  const f = form.value;
+  if (f.cpus !== null && f.cpus !== r.cpus) return true;
+  if (f.memoryMB !== null && f.memoryMB !== bytesToMB(r.memory_limit)) return true;
+  if (f.memorySwapMB !== null && f.memorySwapMB !== bytesToMB(r.memory_swap)) return true;
+  if (f.cpuShares !== null && f.cpuShares !== r.cpu_shares) return true;
+  return false;
+});
+
+const bytesToMB = (bytes: number) => Math.round(bytes / (1024 * 1024));
+
+const formatBytes = (bytes: number) => {
+  if (bytes >= 1024 * 1024 * 1024) return (bytes / (1024 * 1024 * 1024)).toFixed(1) + " GB";
+  if (bytes >= 1024 * 1024) return Math.round(bytes / (1024 * 1024)) + " MB";
+  if (bytes >= 1024) return Math.round(bytes / 1024) + " KB";
+  return bytes + " B";
+};
+
+const fetchResources = async () => {
+  if (!props.containerId) return;
+  loadingResources.value = true;
+  error.value = "";
+  try {
+    const res = await containersApi.getResources(props.containerId);
+    resources.value = res.data.resources;
+    form.value = {
+      cpus: null,
+      memoryMB: null,
+      memorySwapMB: null,
+      cpuShares: null,
+    };
+  } catch {
+    resources.value = null;
+  } finally {
+    loadingResources.value = false;
+  }
+};
+
+const saveResources = async () => {
+  if (!props.containerId || !hasChanges.value) return;
+  saving.value = true;
+  error.value = "";
+
+  const update: ResourceUpdate = {};
+  if (form.value.cpus !== null && form.value.cpus !== resources.value?.cpus) {
+    update.cpus = form.value.cpus;
+  }
+  if (form.value.memoryMB !== null && form.value.memoryMB !== bytesToMB(resources.value?.memory_limit || 0)) {
+    update.memory_limit = form.value.memoryMB * 1024 * 1024;
+  }
+  if (form.value.memorySwapMB !== null && form.value.memorySwapMB !== bytesToMB(resources.value?.memory_swap || 0)) {
+    update.memory_swap = form.value.memorySwapMB * 1024 * 1024;
+  }
+  if (form.value.cpuShares !== null && form.value.cpuShares !== resources.value?.cpu_shares) {
+    update.cpu_shares = form.value.cpuShares;
+  }
+
+  try {
+    const res = await containersApi.updateResources(props.containerId, update);
+    resources.value = res.data.resources;
+    form.value = { cpus: null, memoryMB: null, memorySwapMB: null, cpuShares: null };
+    emit("updated");
+  } catch (e: any) {
+    error.value = e.response?.data?.error || "Failed to update resources";
+  } finally {
+    saving.value = false;
+  }
+};
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) fetchResources();
+  },
+);
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-panel {
+  background: white;
+  border-radius: var(--radius-md);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  width: 100%;
+  max-width: 560px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.modal-title-group h2 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.container-name {
+  font-size: 0.75rem;
+  background: #f3f4f6;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-sm);
+  color: #6b7280;
+  font-family: "SF Mono", "Fira Code", monospace;
+  margin-top: 0.375rem;
+  display: inline-block;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  color: #374151;
+  background: #f3f4f6;
+}
+
+.modal-loading,
+.modal-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 3rem;
+  color: #9ca3af;
+}
+
+.modal-loading i,
+.modal-error i {
+  font-size: 1.5rem;
+}
+
+.modal-body {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.current-resources h3,
+.update-resources h3 {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 0.75rem 0;
+}
+
+.resource-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.resource-display {
+  background: #f9fafb;
+  padding: 0.75rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #f3f4f6;
+}
+
+.resource-label {
+  display: block;
+  font-size: 0.6875rem;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  margin-bottom: 0.25rem;
+}
+
+.resource-value {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.update-resources {
+  padding-top: 1rem;
+  border-top: 1px solid #f3f4f6;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.375rem;
+}
+
+.input-with-hint {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  color: #1f2937;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+.input-hint {
+  font-size: 0.6875rem;
+  color: #9ca3af;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.error-message {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: #dc2626;
+  background: #fef2f2;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-sm);
+}
+
+.footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: white;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.btn-secondary:hover {
+  background: #f9fafb;
+}
+
+@media (max-width: 640px) {
+  .resource-grid,
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-panel {
+    margin: 1rem;
+  }
+}
+</style>
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index d441bd4..4ccb1e5 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -6,10 +6,36 @@
       </div>
 
       <div v-if="!sidebarCollapsed" class="environment-selector">
-        <div class="env-current">
+        <div class="env-current" @click="envDropdownOpen = !envDropdownOpen">
           <i class="pi pi-server" />
-          <span>Local Environment</span>
-          <i class="pi pi-chevron-down" />
+          <span>{{ currentServerName }}</span>
+          <i class="pi" :class="envDropdownOpen ? 'pi-chevron-up' : 'pi-chevron-down'" />
+        </div>
+        <div v-if="envDropdownOpen" class="env-dropdown">
+          <div class="env-option active" @click="envDropdownOpen = false">
+            <i class="pi pi-server" />
+            <div class="env-option-info">
+              <span class="env-option-name">{{ currentServerName }}</span>
+              <span class="env-option-hint">Current server</span>
+            </div>
+            <i class="pi pi-check" />
+          </div>
+          <div v-for="peer in clusterPeers" :key="peer.id" class="env-option" @click="envDropdownOpen = false">
+            <i class="pi pi-server" />
+            <div class="env-option-info">
+              <span class="env-option-name">{{ peer.name }}</span>
+              <span class="env-option-hint">{{ peer.status }}</span>
+            </div>
+          </div>
+          <router-link
+            v-if="authStore.hasPermission('cluster:read')"
+            to="/cluster"
+            class="env-option env-manage"
+            @click="envDropdownOpen = false"
+          >
+            <i class="pi pi-cog" />
+            <span class="env-option-name">Manage Cluster</span>
+          </router-link>
         </div>
       </div>
 
@@ -31,8 +57,8 @@
           </div>
           <div v-show="expandedGroups.stacks && !sidebarCollapsed" class="nav-group-items">
             <router-link to="/deployments" class="nav-subitem" active-class="active">
-              <span class="nav-count">{{ stats.deployments }}</span>
               Deployments
+              <span class="nav-count">{{ stats.deployments }}</span>
             </router-link>
           </div>
         </div>
@@ -62,8 +88,8 @@
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.containers }}</span>
               Containers
+              <span class="nav-count">{{ stats.containers }}</span>
             </router-link>
             <router-link
               v-if="authStore.hasPermission('images:read')"
@@ -71,8 +97,8 @@
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.images }}</span>
               Images
+              <span class="nav-count">{{ stats.images }}</span>
             </router-link>
             <router-link
               v-if="authStore.hasPermission('volumes:read')"
@@ -80,8 +106,8 @@
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.volumes }}</span>
               Volumes
+              <span class="nav-count">{{ stats.volumes }}</span>
             </router-link>
             <router-link
               v-if="authStore.hasPermission('networks:read')"
@@ -89,8 +115,8 @@
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.networks }}</span>
               Networks
+              <span class="nav-count">{{ stats.networks }}</span>
             </router-link>
             <router-link
               v-if="authStore.hasPermission('containers:read')"
@@ -98,8 +124,8 @@
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.dockerPorts }}</span>
               Port Mappings
+              <span class="nav-count">{{ stats.dockerPorts }}</span>
             </router-link>
           </div>
         </div>
@@ -108,7 +134,8 @@
           v-if="
             authStore.hasPermission('system:read') ||
             authStore.hasPermission('infrastructure:read') ||
-            authStore.hasPermission('scheduler:read')
+            authStore.hasPermission('scheduler:read') ||
+            authStore.hasPermission('cluster:read')
           "
           class="nav-group"
         >
@@ -122,14 +149,31 @@
             />
           </div>
           <div v-show="expandedGroups.system && !sidebarCollapsed" class="nav-group-items">
+            <router-link
+              v-if="authStore.hasPermission('system:read')"
+              to="/server-info"
+              class="nav-subitem"
+              active-class="active"
+            >
+              Server Info
+            </router-link>
+            <router-link
+              v-if="authStore.hasPermission('cluster:read')"
+              to="/cluster"
+              class="nav-subitem"
+              active-class="active"
+            >
+              Cluster
+              <span v-if="clusterPeers.length" class="nav-count">{{ clusterPeers.length + 1 }}</span>
+            </router-link>
             <router-link
               v-if="authStore.hasPermission('infrastructure:read')"
               to="/infrastructure"
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.infrastructure }}</span>
               Infrastructure
+              <span class="nav-count">{{ stats.infrastructure }}</span>
             </router-link>
             <router-link
               v-if="authStore.hasPermission('system:read')"
@@ -137,8 +181,8 @@
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.ports }}</span>
               Ports
+              <span class="nav-count">{{ stats.ports }}</span>
             </router-link>
             <router-link
               v-if="authStore.hasPermission('system:read')"
@@ -146,8 +190,8 @@
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.services }}</span>
               Services
+              <span class="nav-count">{{ stats.services }}</span>
             </router-link>
             <router-link
               v-if="authStore.hasPermission('scheduler:read')"
@@ -172,8 +216,8 @@
           </div>
           <div v-show="expandedGroups.databases && !sidebarCollapsed" class="nav-group-items">
             <router-link to="/databases" class="nav-subitem" active-class="active">
-              <span class="nav-count">{{ stats.databases }}</span>
               Servers
+              <span class="nav-count">{{ stats.databases }}</span>
             </router-link>
           </div>
         </div>
@@ -222,8 +266,8 @@
               class="nav-subitem"
               active-class="active"
             >
-              <span class="nav-count">{{ stats.certificates }}</span>
               Certificates
+              <span class="nav-count">{{ stats.certificates }}</span>
             </router-link>
           </div>
         </div>
@@ -240,8 +284,8 @@
           </div>
           <div v-show="expandedGroups.extensions && !sidebarCollapsed" class="nav-group-items">
             <router-link to="/apps" class="nav-subitem" active-class="active">
-              <span class="nav-count">{{ stats.apps }}</span>
               Installed Apps
+              <span class="nav-count">{{ stats.apps }}</span>
             </router-link>
             <router-link to="/marketplace" class="nav-subitem" active-class="active"> Marketplace </router-link>
           </div>
@@ -388,6 +432,7 @@ import { ref, reactive, computed, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useStatsStore } from "@/stores/stats";
 import { useAuthStore } from "@/stores/auth";
+import { clusterApi, type ClusterPeer } from "@/services/api";
 import Logo from "@/components/base/Logo.vue";
 
 const route = useRoute();
@@ -396,6 +441,9 @@ const statsStore = useStatsStore();
 const authStore = useAuthStore();
 const sidebarCollapsed = ref(false);
 const isRefreshing = ref(false);
+const envDropdownOpen = ref(false);
+const currentServerName = ref("Local Server");
+const clusterPeers = ref<ClusterPeer[]>([]);
 
 const expandedGroups = reactive({
   stacks: true,
@@ -453,6 +501,8 @@ const currentPageTitle = computed(() => {
     "system-ports": "System Ports",
     services: "System Services",
     "cron-jobs": "Cron Jobs",
+    "server-info": "Server Info",
+    cluster: "Cluster",
     databases: "Database Servers",
     security: "Security & Monitoring",
     certificates: "SSL Certificates",
@@ -478,7 +528,9 @@ const breadcrumbs = computed(() => {
   } else if (["containers", "images", "volumes", "networks", "docker-ports"].includes(routeName)) {
     crumbs.push({ label: "Docker", path: "" });
     crumbs.push({ label: currentPageTitle.value, path: "" });
-  } else if (["infrastructure", "system-ports", "services", "cron-jobs"].includes(routeName)) {
+  } else if (
+    ["infrastructure", "system-ports", "services", "cron-jobs", "server-info", "cluster"].includes(routeName)
+  ) {
     crumbs.push({ label: "System", path: "" });
     crumbs.push({ label: currentPageTitle.value, path: "" });
   } else if (routeName === "databases") {
@@ -526,9 +578,23 @@ const handleLogout = () => {
   router.push("/login");
 };
 
+const fetchClusterInfo = async () => {
+  try {
+    const res = await clusterApi.getStatus();
+    if (res.data.enabled && res.data.server_name) {
+      currentServerName.value = res.data.server_name;
+      const peersRes = await clusterApi.listPeers();
+      clusterPeers.value = peersRes.data.peers || [];
+    }
+  } catch {
+    // cluster not available
+  }
+};
+
 onMounted(() => {
   statsStore.fetchAll();
   authStore.fetchCurrentUser();
+  fetchClusterInfo();
   setInterval(() => statsStore.fetchAll(), 15000);
 });
 </script>
@@ -600,6 +666,80 @@ onMounted(() => {
   font-size: 0.75rem;
 }
 
+.env-dropdown {
+  margin-top: 0.375rem;
+  background: #1e293b;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+
+.env-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  cursor: pointer;
+  transition: background 0.15s;
+  color: #94a3b8;
+  font-size: 0.8125rem;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.env-option:last-child {
+  border-bottom: none;
+}
+
+.env-option:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: white;
+}
+
+.env-option.active {
+  color: #60a5fa;
+}
+
+.env-option.active .pi-check {
+  margin-left: auto;
+  font-size: 0.6875rem;
+}
+
+.env-option i:first-child {
+  font-size: 0.8125rem;
+  width: 16px;
+  text-align: center;
+}
+
+.env-option-info {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.env-option-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.env-option-hint {
+  font-size: 0.625rem;
+  color: #64748b;
+}
+
+.env-manage {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  color: #64748b;
+}
+
+.env-manage:hover {
+  color: #94a3b8;
+}
+
 .nav-menu {
   flex: 1;
   padding: 0.75rem 0;
@@ -700,7 +840,7 @@ onMounted(() => {
   border-radius: 9999px;
   font-size: 0.6875rem;
   font-weight: 600;
-  margin-right: auto;
+  margin-left: auto;
 }
 
 .sidebar-footer {
diff --git a/src/router/index.ts b/src/router/index.ts
index 110ee9f..149d1ca 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -123,6 +123,18 @@ const routes: RouteRecordRaw[] = [
         component: () => import("@/views/InfrastructureView.vue"),
         meta: { permission: "infrastructure:read" },
       },
+      {
+        path: "server-info",
+        name: "server-info",
+        component: () => import("@/views/ServerInfoView.vue"),
+        meta: { permission: "system:read" },
+      },
+      {
+        path: "cluster",
+        name: "cluster",
+        component: () => import("@/views/ClusterView.vue"),
+        meta: { permission: "cluster:read" },
+      },
       {
         path: "security",
         name: "security",
diff --git a/src/services/api.ts b/src/services/api.ts
index 5b42335..e5e4be8 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -275,6 +275,21 @@ export const composeApi = {
     ),
 };
 
+export interface ResourceLimits {
+  memory_limit: number;
+  memory_swap: number;
+  cpus: number;
+  cpu_shares: number;
+  restart_policy: string;
+}
+
+export interface ResourceUpdate {
+  memory_limit?: number;
+  memory_swap?: number;
+  cpus?: number;
+  cpu_shares?: number;
+}
+
 export const containersApi = {
   list: () => apiClient.get<{ containers: any[] }>("/containers"),
   start: (id: string) => apiClient.post(`/containers/${id}/start`),
@@ -296,6 +311,9 @@ export const containersApi = {
         pids: number;
       }>;
     }>("/containers/stats"),
+  getResources: (id: string) => apiClient.get<{ resources: ResourceLimits }>(`/containers/${id}/resources`),
+  updateResources: (id: string, update: ResourceUpdate) =>
+    apiClient.put<{ message: string; resources: ResourceLimits }>(`/containers/${id}/resources`, update),
 };
 
 export const imagesApi = {
@@ -321,6 +339,43 @@ export const healthApi = {
   stats: () => apiClient.get("/stats"),
 };
 
+export interface NetworkInterface {
+  name: string;
+  addresses: string[];
+  flags: string;
+}
+
+export interface ServerInfo {
+  hostname: string;
+  public_ipv4: string;
+  public_ipv6: string;
+  interfaces: NetworkInterface[];
+}
+
+export interface ResolverCheck {
+  server: string;
+  healthy: boolean;
+  latency_ms: number;
+  error?: string;
+}
+
+export interface DNSHealthInfo {
+  healthy: boolean;
+  resolvers: ResolverCheck[];
+}
+
+export interface NetworkHealth {
+  external_access: boolean;
+  dns: DNSHealthInfo;
+  interfaces: NetworkInterface[];
+  checked_at: string;
+}
+
+export const serverApi = {
+  getInfo: () => apiClient.get<{ server: ServerInfo }>("/server/info"),
+  getNetworkHealth: () => apiClient.get<{ network_health: NetworkHealth }>("/server/network-health"),
+};
+
 export interface FileInfo {
   name: string;
   path: string;
@@ -1111,6 +1166,44 @@ export const powerDnsApi = {
     apiClient.patch<PowerDNSZone>(`/dns/powerdns/zones/${zoneId}`, { rrsets }),
 };
 
+export interface ClusterStatus {
+  enabled: boolean;
+  server_name?: string;
+  peer_count?: number;
+  version?: { version: string; build_time: string; git_commit: string };
+}
+
+export interface ClusterPeer {
+  id: number;
+  name: string;
+  url: string;
+  status: string;
+  created_at: string;
+  last_seen_at?: string;
+}
+
+export interface ClusterInvite {
+  invite_token: string;
+  expires_at: string;
+}
+
+export interface ClusterAcceptResult {
+  peer_name: string;
+  peer_url: string;
+  status: string;
+}
+
+export const clusterApi = {
+  getStatus: () => apiClient.get<ClusterStatus>("/cluster/status"),
+  listPeers: () => apiClient.get<{ peers: ClusterPeer[] }>("/cluster/peers"),
+  createInvite: () => apiClient.post<ClusterInvite>("/cluster/invite"),
+  acceptInvite: (inviteToken: string, peerUrl: string) =>
+    apiClient.post<ClusterAcceptResult>("/cluster/accept", { invite_token: inviteToken, peer_url: peerUrl }),
+  removePeer: (name: string) => apiClient.delete<{ status: string; peer: string }>(`/cluster/peers/${name}`),
+  getAggregatedDeployments: () => apiClient.get("/cluster/deployments"),
+  getAggregatedStats: () => apiClient.get("/cluster/stats"),
+};
+
 import type { User, APIKey, UserRole, UserDeploymentAccess } from "@/types";
 
 export const usersApi = {
diff --git a/src/types/index.ts b/src/types/index.ts
index b4039d7..5e9870f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -332,4 +332,6 @@ export type Permission =
   | "templates:read"
   | "templates:write"
   | "traffic:read"
-  | "traffic:write";
+  | "traffic:write"
+  | "cluster:read"
+  | "cluster:write";
diff --git a/src/views/ClusterView.vue b/src/views/ClusterView.vue
new file mode 100644
index 0000000..c18223f
--- /dev/null
+++ b/src/views/ClusterView.vue
@@ -0,0 +1,859 @@
+<template>
+  <div class="cluster-view">
+    <div class="view-header">
+      <div class="header-content">
+        <h1>Cluster</h1>
+        <p class="subtitle">Manage peer servers in your cluster</p>
+      </div>
+      <div class="header-actions">
+        <button class="btn btn-icon" :disabled="loading" @click="fetchAll">
+          <i class="pi pi-refresh" :class="{ 'pi-spin': loading }" />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading && !status" class="loading-state">
+      <i class="pi pi-spin pi-spinner" />
+      <span>Loading cluster status...</span>
+    </div>
+
+    <template v-else-if="status && !status.enabled">
+      <div class="disabled-state">
+        <i class="pi pi-sitemap" />
+        <h3>Cluster Not Enabled</h3>
+        <p>Enable clustering in your agent configuration to connect multiple servers.</p>
+        <code class="config-hint"
+          >cluster: enabled: true server_name: "my-server" advertise_url: "https://my-server:8090"</code
+        >
+      </div>
+    </template>
+
+    <template v-else-if="status">
+      <div class="status-cards">
+        <div class="status-card">
+          <div class="status-icon blue">
+            <i class="pi pi-server" />
+          </div>
+          <div class="status-info">
+            <span class="status-value">{{ status.server_name }}</span>
+            <span class="status-label">This Server</span>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon green">
+            <i class="pi pi-sitemap" />
+          </div>
+          <div class="status-info">
+            <span class="status-value">{{ status.peer_count }}</span>
+            <span class="status-label">Peers</span>
+          </div>
+        </div>
+        <div class="status-card">
+          <div class="status-icon purple">
+            <i class="pi pi-tag" />
+          </div>
+          <div class="status-info">
+            <span class="status-value">{{ status.version?.version || "—" }}</span>
+            <span class="status-label">Version</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="section-card">
+        <div class="card-header">
+          <div class="header-left">
+            <i class="pi pi-users" />
+            <h3>Peers</h3>
+          </div>
+          <div v-if="canWrite" class="header-right">
+            <button class="btn btn-sm btn-secondary" @click="showAcceptModal = true">
+              <i class="pi pi-sign-in" />
+              Join Cluster
+            </button>
+            <button class="btn btn-sm btn-primary" :disabled="creatingInvite" @click="createInvite">
+              <i :class="creatingInvite ? 'pi pi-spin pi-spinner' : 'pi pi-plus'" />
+              Generate Invite
+            </button>
+          </div>
+        </div>
+
+        <div v-if="peers.length === 0" class="empty-peers">
+          <i class="pi pi-sitemap" />
+          <p>No peers connected yet</p>
+          <span class="hint">Generate an invite token and share it with another server to connect</span>
+        </div>
+
+        <table v-else class="data-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>URL</th>
+              <th>Status</th>
+              <th>Connected</th>
+              <th>Last Seen</th>
+              <th v-if="canWrite">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="peer in peers" :key="peer.id">
+              <td>
+                <div class="peer-name">
+                  <i class="pi pi-server" />
+                  <strong>{{ peer.name }}</strong>
+                </div>
+              </td>
+              <td>
+                <code>{{ peer.url }}</code>
+              </td>
+              <td>
+                <span class="peer-status" :class="peer.status">
+                  {{ peer.status }}
+                </span>
+              </td>
+              <td class="time-cell">{{ formatTime(peer.created_at) }}</td>
+              <td class="time-cell">{{ peer.last_seen_at ? formatTime(peer.last_seen_at) : "—" }}</td>
+              <td v-if="canWrite">
+                <button
+                  class="btn btn-sm btn-danger"
+                  :disabled="removingPeer === peer.name"
+                  @click="confirmRemovePeer(peer)"
+                >
+                  <i :class="removingPeer === peer.name ? 'pi pi-spin pi-spinner' : 'pi pi-trash'" />
+                  Remove
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+
+    <div v-if="showInviteModal" class="modal-overlay" @click.self="showInviteModal = false">
+      <div class="modal-panel">
+        <div class="modal-header">
+          <h2>Invite Token</h2>
+          <button class="close-btn" @click="showInviteModal = false">
+            <i class="pi pi-times" />
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="modal-hint">Share this token with the server you want to connect. It expires in 1 hour.</p>
+          <div class="token-display">
+            <code class="token-value">{{ inviteToken }}</code>
+            <button class="btn btn-sm btn-secondary" @click="copyToken">
+              <i class="pi pi-copy" />
+              {{ copied ? "Copied" : "Copy" }}
+            </button>
+          </div>
+          <div v-if="inviteExpiry" class="token-expiry">
+            <i class="pi pi-clock" />
+            Expires: {{ formatDateTime(inviteExpiry) }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showAcceptModal" class="modal-overlay" @click.self="showAcceptModal = false">
+      <div class="modal-panel">
+        <div class="modal-header">
+          <h2>Join Cluster</h2>
+          <button class="close-btn" @click="showAcceptModal = false">
+            <i class="pi pi-times" />
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="modal-hint">Enter the invite token and the URL of the server that generated it.</p>
+          <div class="form-group">
+            <label for="peerUrl">Peer Server URL</label>
+            <input id="peerUrl" v-model="acceptForm.peerUrl" type="url" placeholder="https://other-server:8090" />
+          </div>
+          <div class="form-group">
+            <label for="inviteTokenInput">Invite Token</label>
+            <input
+              id="inviteTokenInput"
+              v-model="acceptForm.inviteToken"
+              type="text"
+              placeholder="Paste the invite token"
+            />
+          </div>
+          <div v-if="acceptError" class="error-message">
+            <i class="pi pi-exclamation-circle" />
+            {{ acceptError }}
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showAcceptModal = false">Cancel</button>
+          <button
+            class="btn btn-primary"
+            :disabled="accepting || !acceptForm.peerUrl || !acceptForm.inviteToken"
+            @click="acceptInvite"
+          >
+            <i v-if="accepting" class="pi pi-spin pi-spinner" />
+            {{ accepting ? "Connecting..." : "Connect" }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showRemoveModal" class="modal-overlay" @click.self="showRemoveModal = false">
+      <div class="modal-panel">
+        <div class="modal-header">
+          <h2>Remove Peer</h2>
+          <button class="close-btn" @click="showRemoveModal = false">
+            <i class="pi pi-times" />
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>
+            Are you sure you want to remove <strong>{{ peerToRemove?.name }}</strong> from the cluster?
+          </p>
+          <p class="warning-text">
+            <i class="pi pi-exclamation-triangle" />
+            This will disconnect the peer server. You'll need a new invite to reconnect.
+          </p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showRemoveModal = false">Cancel</button>
+          <button class="btn btn-danger" :disabled="removingPeer !== null" @click="removePeer">
+            <i v-if="removingPeer" class="pi pi-spin pi-spinner" />
+            {{ removingPeer ? "Removing..." : "Remove Peer" }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { clusterApi, type ClusterStatus, type ClusterPeer } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+import { useAuthStore } from "@/stores/auth";
+
+const notifications = useNotificationsStore();
+const authStore = useAuthStore();
+const canWrite = authStore.hasPermission("cluster:write");
+
+const loading = ref(false);
+const status = ref<ClusterStatus | null>(null);
+const peers = ref<ClusterPeer[]>([]);
+
+const showInviteModal = ref(false);
+const inviteToken = ref("");
+const inviteExpiry = ref("");
+const creatingInvite = ref(false);
+const copied = ref(false);
+
+const showAcceptModal = ref(false);
+const acceptForm = ref({ peerUrl: "", inviteToken: "" });
+const accepting = ref(false);
+const acceptError = ref("");
+
+const showRemoveModal = ref(false);
+const peerToRemove = ref<ClusterPeer | null>(null);
+const removingPeer = ref<string | null>(null);
+
+const fetchAll = async () => {
+  loading.value = true;
+  try {
+    const statusRes = await clusterApi.getStatus();
+    status.value = statusRes.data;
+
+    if (status.value.enabled) {
+      const peersRes = await clusterApi.listPeers();
+      peers.value = peersRes.data.peers || [];
+    }
+  } catch {
+    notifications.error("Error", "Failed to load cluster status");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const createInvite = async () => {
+  creatingInvite.value = true;
+  try {
+    const res = await clusterApi.createInvite();
+    inviteToken.value = res.data.invite_token;
+    inviteExpiry.value = res.data.expires_at;
+    copied.value = false;
+    showInviteModal.value = true;
+  } catch {
+    notifications.error("Error", "Failed to generate invite token");
+  } finally {
+    creatingInvite.value = false;
+  }
+};
+
+const copyToken = async () => {
+  await navigator.clipboard.writeText(inviteToken.value);
+  copied.value = true;
+  setTimeout(() => (copied.value = false), 2000);
+};
+
+const acceptInvite = async () => {
+  accepting.value = true;
+  acceptError.value = "";
+  try {
+    const res = await clusterApi.acceptInvite(acceptForm.value.inviteToken, acceptForm.value.peerUrl);
+    notifications.success("Connected", `Peer "${res.data.peer_name}" joined the cluster`);
+    showAcceptModal.value = false;
+    acceptForm.value = { peerUrl: "", inviteToken: "" };
+    await fetchAll();
+  } catch (e: any) {
+    acceptError.value = e.response?.data?.error || "Failed to connect to peer";
+  } finally {
+    accepting.value = false;
+  }
+};
+
+const confirmRemovePeer = (peer: ClusterPeer) => {
+  peerToRemove.value = peer;
+  showRemoveModal.value = true;
+};
+
+const removePeer = async () => {
+  if (!peerToRemove.value) return;
+  removingPeer.value = peerToRemove.value.name;
+  try {
+    await clusterApi.removePeer(peerToRemove.value.name);
+    notifications.success("Removed", `Peer "${peerToRemove.value.name}" has been removed`);
+    showRemoveModal.value = false;
+    peerToRemove.value = null;
+    await fetchAll();
+  } catch {
+    notifications.error("Error", "Failed to remove peer");
+  } finally {
+    removingPeer.value = null;
+  }
+};
+
+const formatTime = (iso: string) => {
+  if (!iso) return "—";
+  const date = new Date(iso);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+};
+
+const formatDateTime = (iso: string) => {
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+};
+
+onMounted(() => {
+  fetchAll();
+});
+</script>
+
+<style scoped>
+.cluster-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  padding: 1.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+}
+
+.header-content h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0.25rem 0 0 0;
+}
+
+.btn-icon {
+  padding: 0.625rem;
+  background: transparent;
+  border: none;
+  color: #6b7280;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-icon:hover:not(:disabled) {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.btn-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.loading-state,
+.disabled-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem;
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+  text-align: center;
+  gap: 1rem;
+}
+
+.loading-state i,
+.disabled-state i {
+  font-size: 3rem;
+  color: #9ca3af;
+}
+
+.disabled-state h3 {
+  font-size: 1.125rem;
+  color: #374151;
+  margin: 0;
+}
+
+.disabled-state p {
+  color: #6b7280;
+  margin: 0;
+}
+
+.config-hint {
+  display: block;
+  text-align: left;
+  background: #1f2937;
+  color: #e5e7eb;
+  padding: 1rem 1.25rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  white-space: pre;
+  font-family: "SF Mono", "Fira Code", monospace;
+}
+
+.status-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.status-card {
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+  padding: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.status-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+.status-icon.blue {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+.status-icon.green {
+  background: rgba(34, 197, 94, 0.1);
+  color: #22c55e;
+}
+
+.status-icon.purple {
+  background: rgba(139, 92, 246, 0.1);
+  color: #8b5cf6;
+}
+
+.status-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.status-value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.status-label {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+
+.section-card {
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.header-left i {
+  color: #3b82f6;
+  font-size: 1rem;
+}
+
+.card-header h3 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.header-right {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.empty-peers {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3rem;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.empty-peers i {
+  font-size: 2.5rem;
+  color: #d1d5db;
+}
+
+.empty-peers p {
+  color: #6b7280;
+  margin: 0;
+  font-weight: 500;
+}
+
+.empty-peers .hint {
+  font-size: 0.8125rem;
+  color: #9ca3af;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th {
+  text-align: left;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.data-table td {
+  padding: 0.75rem 1.25rem;
+  font-size: 0.8125rem;
+  color: #374151;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.data-table tr:last-child td {
+  border-bottom: none;
+}
+
+.peer-name {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.peer-name i {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.peer-status {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.peer-status.active,
+.peer-status.peered {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.peer-status.unreachable {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.peer-status.pending {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.time-cell {
+  color: #9ca3af;
+  font-size: 0.75rem;
+}
+
+code {
+  background: #f3f4f6;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 0.8125rem;
+  color: #374151;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-secondary {
+  background: white;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #f9fafb;
+}
+
+.btn-danger {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #fecaca;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-panel {
+  background: white;
+  border-radius: var(--radius-md);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.modal-header h2 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+}
+
+.close-btn:hover {
+  color: #374151;
+  background: #f3f4f6;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-hint {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0 0 1rem 0;
+}
+
+.token-display {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  padding: 0.75rem;
+}
+
+.token-value {
+  flex: 1;
+  font-size: 0.75rem;
+  word-break: break-all;
+  background: transparent;
+  padding: 0;
+}
+
+.token-expiry {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: #9ca3af;
+  margin-top: 0.75rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.375rem;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  color: #1f2937;
+  box-sizing: border-box;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+.error-message {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: #dc2626;
+  background: #fef2f2;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-sm);
+}
+
+.warning-text {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: #92400e;
+  background: #fef3c7;
+  padding: 0.625rem 0.75rem;
+  border-radius: var(--radius-sm);
+  margin-top: 0.75rem;
+}
+
+.warning-text i {
+  flex-shrink: 0;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .status-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .header-right {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/src/views/ContainersView.vue b/src/views/ContainersView.vue
index c50ad9d..63be290 100644
--- a/src/views/ContainersView.vue
+++ b/src/views/ContainersView.vue
@@ -87,6 +87,9 @@
           <button v-if="canWrite" class="action-btn restart" title="Restart" @click.stop="restartContainer(item.id)">
             <RotateCw :size="14" />
           </button>
+          <button class="action-btn resources" title="Resources" @click.stop="showResources(item.id, item.name)">
+            <Gauge :size="14" />
+          </button>
           <button class="action-btn logs" title="Logs" @click.stop="showLogs(item.id, item.name)">
             <FileText :size="14" />
           </button>
@@ -140,6 +143,15 @@
       @confirm="confirmBulkRemove"
       @cancel="showBulkDeleteModal = false"
     />
+
+    <ContainerResourcesModal
+      :visible="resourcesModal.visible"
+      :container-id="resourcesModal.containerId"
+      :container-name="resourcesModal.containerName"
+      :can-write="canWrite"
+      @close="resourcesModal.visible = false"
+      @updated="onResourcesUpdated"
+    />
   </div>
 </template>
 
@@ -151,7 +163,8 @@ import { useAuthStore } from "@/stores/auth";
 import DataTable from "@/components/DataTable.vue";
 import LogsModal from "@/components/LogsModal.vue";
 import ConfirmModal from "@/components/ConfirmModal.vue";
-import { RefreshCw, Play, Square, RotateCw, FileText, Trash2, Package, Link } from "lucide-vue-next";
+import ContainerResourcesModal from "@/components/ContainerResourcesModal.vue";
+import { RefreshCw, Play, Square, RotateCw, FileText, Trash2, Package, Link, Gauge } from "lucide-vue-next";
 
 const router = useRouter();
 const authStore = useAuthStore();
@@ -204,6 +217,12 @@ const bulkDeleteIds = ref<string[]>([]);
 const bulkDeleteClearFn = ref<(() => void) | null>(null);
 const bulkDeleting = ref(false);
 
+const resourcesModal = ref({
+  visible: false,
+  containerId: "",
+  containerName: "",
+});
+
 const columns = [
   { key: "status", label: "Status", width: "60px" },
   { key: "name", label: "Container", sortable: true },
@@ -211,7 +230,7 @@ const columns = [
   { key: "image", label: "Image", sortable: true },
   { key: "ports", label: "Ports" },
   { key: "created", label: "Created", sortable: true },
-  { key: "actions", label: "Actions", width: "160px" },
+  { key: "actions", label: "Actions", width: "192px" },
 ];
 
 const statusFilters = computed(() => [
@@ -301,6 +320,14 @@ const confirmDeleteContainer = async () => {
   }
 };
 
+const showResources = (id: string, name: string) => {
+  resourcesModal.value = { visible: true, containerId: id, containerName: name };
+};
+
+const onResourcesUpdated = () => {
+  resourcesModal.value.visible = false;
+};
+
 const showLogs = async (id: string, name: string) => {
   selectedContainerName.value = name;
   const response = await containersApi.logs(id);
@@ -514,6 +541,14 @@ onMounted(() => {
   background: var(--color-info-100);
 }
 
+.action-btn.resources {
+  background: rgba(139, 92, 246, 0.1);
+  color: #7c3aed;
+}
+.action-btn.resources:hover {
+  background: rgba(139, 92, 246, 0.2);
+}
+
 .action-btn.logs {
   background: var(--color-gray-100);
   color: var(--color-gray-600);
diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue
index dbdd9c9..956aed2 100644
--- a/src/views/DeploymentDetailView.vue
+++ b/src/views/DeploymentDetailView.vue
@@ -310,6 +310,9 @@
                       </span>
                     </div>
                     <div class="service-actions">
+                      <button class="action-btn" title="Resources" @click="openServiceResources(service)">
+                        <i class="pi pi-sliders-h" />
+                      </button>
                       <button class="action-btn" title="Terminal" @click="openTerminal(service)">
                         <i class="pi pi-desktop" />
                       </button>
@@ -1384,6 +1387,15 @@
       @save="handleAddDomain"
       @cancel="showAddDomainModal = false"
     />
+
+    <ContainerResourcesModal
+      :visible="serviceResourcesModal.visible"
+      :container-id="serviceResourcesModal.containerId"
+      :container-name="serviceResourcesModal.containerName"
+      :can-write="canWrite"
+      @close="serviceResourcesModal.visible = false"
+      @updated="serviceResourcesModal.visible = false"
+    />
   </div>
 </template>
 
@@ -1413,6 +1425,7 @@ import ContainerTerminal from "@/components/ContainerTerminal.vue";
 import BackupsTab from "@/components/BackupsTab.vue";
 import DomainsManager from "@/components/DomainsManager.vue";
 import DomainFormModal from "@/components/DomainFormModal.vue";
+import ContainerResourcesModal from "@/components/ContainerResourcesModal.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -1440,6 +1453,12 @@ const disablingSSL = ref(false);
 const showAddDomainModal = ref(false);
 const addingDomain = ref(false);
 
+const serviceResourcesModal = ref({
+  visible: false,
+  containerId: "",
+  containerName: "",
+});
+
 const securityConfig = ref<DeploymentSecurityConfig>({
   enabled: false,
   blocked_ips: [],
@@ -2102,6 +2121,14 @@ const migrateToInfrastructure = async () => {
   }
 };
 
+const openServiceResources = (service: any) => {
+  serviceResourcesModal.value = {
+    visible: true,
+    containerId: service.container_id,
+    containerName: service.name,
+  };
+};
+
 const openTerminal = (service: any) => {
   terminalService.value = service.container_id;
   activeTab.value = "terminal";
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 9c92e1b..f324d4a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -117,15 +117,24 @@
           </div>
         </div>
 
-        <div class="panel quick-actions-panel">
+        <div class="panel shortcuts-panel">
           <div class="panel-header">
             <div class="panel-title">
-              <i class="pi pi-bolt" />
-              <span>Quick Actions</span>
+              <i class="pi pi-compass" />
+              <span>Shortcuts</span>
             </div>
           </div>
           <div class="panel-body">
             <div class="actions-row">
+              <button class="quick-action" @click="$router.push('/server-info')">
+                <div class="action-icon teal">
+                  <i class="pi pi-info-circle" />
+                </div>
+                <div class="action-label">
+                  <span class="action-name">Server Info</span>
+                  <span class="action-hint">Host & network</span>
+                </div>
+              </button>
               <button class="quick-action" @click="$router.push('/security')">
                 <div class="action-icon orange">
                   <i class="pi pi-chart-line" />
@@ -822,7 +831,7 @@ onMounted(() => {
 
 .actions-row {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   gap: 0.75rem;
 }
 
@@ -883,6 +892,11 @@ onMounted(() => {
   color: #8b5cf6;
 }
 
+.action-icon.teal {
+  background: rgba(20, 184, 166, 0.1);
+  color: #14b8a6;
+}
+
 .action-icon.orange {
   background: rgba(249, 115, 22, 0.1);
   color: #f97316;
diff --git a/src/views/ServerInfoView.vue b/src/views/ServerInfoView.vue
new file mode 100644
index 0000000..75a86d2
--- /dev/null
+++ b/src/views/ServerInfoView.vue
@@ -0,0 +1,425 @@
+<template>
+  <div class="server-info-view">
+    <div class="view-header">
+      <div class="header-content">
+        <h1>Server Info</h1>
+        <p class="subtitle">Server details and network health</p>
+      </div>
+      <div class="header-actions">
+        <button class="btn btn-icon" :disabled="loading" @click="fetchAll">
+          <i class="pi pi-refresh" :class="{ 'pi-spin': loading }" />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="loading && !serverInfo" class="loading-state">
+      <i class="pi pi-spin pi-spinner" />
+      <span>Loading server information...</span>
+    </div>
+
+    <template v-else>
+      <div class="info-grid">
+        <div class="info-card">
+          <div class="card-header">
+            <i class="pi pi-server" />
+            <h3>Host</h3>
+          </div>
+          <div class="card-body">
+            <div class="info-row">
+              <span class="info-label">Hostname</span>
+              <code>{{ serverInfo?.hostname || "—" }}</code>
+            </div>
+            <div class="info-row">
+              <span class="info-label">Public IPv4</span>
+              <code>{{ serverInfo?.public_ipv4 || "—" }}</code>
+            </div>
+            <div class="info-row">
+              <span class="info-label">Public IPv6</span>
+              <code class="ipv6">{{ serverInfo?.public_ipv6 || "—" }}</code>
+            </div>
+          </div>
+        </div>
+
+        <div class="info-card">
+          <div class="card-header">
+            <i class="pi pi-globe" />
+            <h3>Network Health</h3>
+            <span v-if="networkHealth" class="health-pill" :class="networkHealthy ? 'healthy' : 'unhealthy'">
+              {{ networkHealthy ? "Healthy" : "Issues Detected" }}
+            </span>
+          </div>
+          <div class="card-body">
+            <div class="info-row">
+              <span class="info-label">External Access</span>
+              <span class="status-badge" :class="networkHealth?.external_access ? 'ok' : 'fail'">
+                <i :class="networkHealth?.external_access ? 'pi pi-check-circle' : 'pi pi-times-circle'" />
+                {{ networkHealth?.external_access ? "Reachable" : "Unreachable" }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">DNS</span>
+              <span class="status-badge" :class="networkHealth?.dns?.healthy ? 'ok' : 'fail'">
+                <i :class="networkHealth?.dns?.healthy ? 'pi pi-check-circle' : 'pi pi-times-circle'" />
+                {{ networkHealth?.dns?.healthy ? "Healthy" : "Degraded" }}
+              </span>
+            </div>
+            <div v-if="networkHealth?.checked_at" class="info-row">
+              <span class="info-label">Last Check</span>
+              <span class="info-value">{{ formatTime(networkHealth.checked_at) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="networkHealth?.dns?.resolvers?.length" class="section-card">
+        <div class="card-header">
+          <i class="pi pi-sitemap" />
+          <h3>DNS Resolvers</h3>
+        </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Server</th>
+              <th>Status</th>
+              <th>Latency</th>
+              <th>Error</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="resolver in networkHealth.dns.resolvers" :key="resolver.server">
+              <td>
+                <code>{{ resolver.server }}</code>
+              </td>
+              <td>
+                <span class="status-badge" :class="resolver.healthy ? 'ok' : 'fail'">
+                  <i :class="resolver.healthy ? 'pi pi-check-circle' : 'pi pi-times-circle'" />
+                  {{ resolver.healthy ? "OK" : "Failed" }}
+                </span>
+              </td>
+              <td>{{ resolver.latency_ms }}ms</td>
+              <td>
+                <span v-if="resolver.error" class="error-text">{{ resolver.error }}</span>
+                <span v-else class="muted">—</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div v-if="allInterfaces.length" class="section-card">
+        <div class="card-header">
+          <i class="pi pi-share-alt" />
+          <h3>Network Interfaces</h3>
+        </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Interface</th>
+              <th>Addresses</th>
+              <th>Flags</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="iface in allInterfaces" :key="iface.name">
+              <td>
+                <code>{{ iface.name }}</code>
+              </td>
+              <td>
+                <div class="address-list">
+                  <code v-for="addr in iface.addresses" :key="addr" class="address-chip">{{ addr }}</code>
+                </div>
+              </td>
+              <td>
+                <span class="muted">{{ iface.flags }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { serverApi, type ServerInfo, type NetworkHealth } from "@/services/api";
+import { useNotificationsStore } from "@/stores/notifications";
+
+const notifications = useNotificationsStore();
+const loading = ref(false);
+const serverInfo = ref<ServerInfo | null>(null);
+const networkHealth = ref<NetworkHealth | null>(null);
+
+const networkHealthy = computed(() => {
+  if (!networkHealth.value) return false;
+  return networkHealth.value.external_access && networkHealth.value.dns?.healthy;
+});
+
+const allInterfaces = computed(() => {
+  return serverInfo.value?.interfaces || [];
+});
+
+const formatTime = (iso: string) => {
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+};
+
+const fetchAll = async () => {
+  loading.value = true;
+  try {
+    const [infoRes, healthRes] = await Promise.all([serverApi.getInfo(), serverApi.getNetworkHealth()]);
+    serverInfo.value = infoRes.data.server;
+    networkHealth.value = healthRes.data.network_health;
+  } catch {
+    notifications.error("Error", "Failed to load server information");
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchAll();
+});
+</script>
+
+<style scoped>
+.server-info-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: white;
+  padding: 1.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+}
+
+.header-content h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0.25rem 0 0 0;
+}
+
+.btn-icon {
+  padding: 0.625rem;
+  background: transparent;
+  border: none;
+  color: #6b7280;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-icon:hover:not(:disabled) {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.btn-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem;
+  background: white;
+  border-radius: var(--radius-sm);
+  text-align: center;
+  gap: 1rem;
+}
+
+.loading-state i {
+  font-size: 3rem;
+  color: #9ca3af;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 1rem;
+}
+
+.info-card,
+.section-card {
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-header i {
+  color: #3b82f6;
+  font-size: 1rem;
+}
+
+.card-header h3 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.health-pill {
+  margin-left: auto;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.health-pill.healthy {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.health-pill.unhealthy {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.card-body {
+  padding: 1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-label {
+  font-size: 0.8125rem;
+  color: #6b7280;
+}
+
+.info-value {
+  font-size: 0.8125rem;
+  color: #374151;
+}
+
+code {
+  background: #f3f4f6;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 0.8125rem;
+  color: #374151;
+}
+
+code.ipv6 {
+  font-size: 0.6875rem;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.status-badge.ok {
+  color: #16a34a;
+}
+
+.status-badge.ok i {
+  color: #16a34a;
+}
+
+.status-badge.fail {
+  color: #dc2626;
+}
+
+.status-badge.fail i {
+  color: #dc2626;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th {
+  text-align: left;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.data-table td {
+  padding: 0.75rem 1.25rem;
+  font-size: 0.8125rem;
+  color: #374151;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.data-table tr:last-child td {
+  border-bottom: none;
+}
+
+.address-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.address-chip {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+}
+
+.error-text {
+  font-size: 0.8125rem;
+  color: #dc2626;
+}
+
+.muted {
+  color: #9ca3af;
+  font-size: 0.8125rem;
+}
+
+@media (max-width: 768px) {
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>