diff --git a/app/templates/ipam/subnet_view.html b/app/templates/ipam/subnet_view.html
index b5a0c58..d6fa156 100644
--- a/app/templates/ipam/subnet_view.html
+++ b/app/templates/ipam/subnet_view.html
@@ -1,4 +1,58 @@
 {% extends "layout.html" %}
+{% from "components/markdown_content.html" import render_markdown, render_markdown_with_truncate %}
+
+{% block styles %}
+<link href="{{ url_for('static', filename='css/github-markdown-reading-view.css') }}" rel="stylesheet">
+<style>
+  /* Custom styling for markdown within tables */
+  .documentation-cell {
+    min-width: 300px;
+    max-width: 600px;
+  }
+
+  .documentation-cell .markdown-content {
+    padding: 0;
+    margin: 0;
+  }
+
+  .documentation-cell .markdown-reading-view {
+    background: transparent !important;
+    padding: 0;
+  }
+
+  .documentation-cell h1,
+  .documentation-cell h2,
+  .documentation-cell h3 {
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .documentation-cell p {
+    margin-bottom: 0.25rem;
+  }
+
+  .documentation-cell .markdown-alert {
+    padding: 0.5rem;
+    margin: 0.25rem 0;
+  }
+
+  .app-name {
+    color: var(--tblr-primary);
+    font-weight: 600;
+  }
+
+  .server-link {
+    color: var(--tblr-body-color);
+    text-decoration: none;
+  }
+
+  .server-link:hover {
+    text-decoration: underline;
+  }
+</style>
+{% endblock %}
 
 {% block content %}
 <div class="container-xl">
@@ -156,43 +210,55 @@
     </div>
   </div>
 
-  {% from "components/markdown_content.html" import render_markdown, render_markdown_with_truncate %}
   <!-- Applications in this Subnet Section -->
   <div class="row mt-3">
     <div class="col-12">
-      <div class="card glass-card">
+      <div class="card">
         <div class="card-header">
           <h3 class="card-title">Applications in this Subnet</h3>
         </div>
-        <div class="card-body">
+        <div class="card-body p-0">
           {% if subnet_apps %}
-          <div class="app-grid">
-            {% for app in subnet_apps %}
-            <div class="app-card">
-              <div class="app-card-header">
-                <div class="app-card-title">
-                  <h4>{{ app.name }}</h4>
-                  <span class="text-muted small">on {{ app.server.hostname }} ({{ app.server.ip_address }})</span>
-                </div>
-                <div class="app-card-actions">
-                  <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-outline-primary">
-                    View
-                  </a>
-                </div>
-              </div>
-              <div class="app-card-body markdown-content">
-                {% if app.documentation %}
-                {{ render_markdown_with_truncate(app.documentation) }}
-                <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="text-primary">Read more</a>
-                {% else %}
-                <p class="text-muted">No documentation available for this application.</p>
-                {% endif %}
-              </div>
-            </div>
-            {% endfor %}
+          <div class="table-responsive">
+            <table class="table card-table table-vcenter">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Server</th>
+                  <th>Documentation</th>
+                  <th class="w-1"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for app in subnet_apps %}
+                <tr>
+                  <td class="text-nowrap">
+                    <span class="app-name">{{ app.name }}</span>
+                  </td>
+                  <td class="text-nowrap">
+                    <a href="{{ url_for('dashboard.server_view', server_id=app.server.id) }}" class="server-link">
+                      {{ app.server.hostname }} ({{ app.server.ip_address }})
+                    </a>
+                  </td>
+                  <td class="documentation-cell">
+                    {% if app.documentation %}
+                    {{ render_markdown_with_truncate(app.documentation, 120) }}
+                    {% else %}
+                    <span class="text-muted">No documentation available</span>
+                    {% endif %}
+                  </td>
+                  <td>
+                    <a href="{{ url_for('dashboard.app_view', app_id=app.id) }}" class="btn btn-sm btn-primary">
+                      View
+                    </a>
+                  </td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
           </div>
           {% else %}
-          <div class="empty">
+          <div class="empty p-4">
             <div class="empty-icon">
               <span class="ti ti-app-window"></span>
             </div>
@@ -208,15 +274,18 @@
   </div>
 
   <!-- Update the usage progress bar section -->
-  <div class="mb-3">
-    <div class="form-label">Usage</div>
-    <div class="progress mb-2">
-      <div class="progress-bar" style="width: {{ (used_ips / total_ips * 100) if total_ips > 0 else 0 }}%"
-        role="progressbar"></div>
-    </div>
-    <div class="d-flex justify-content-between">
-      <span>{{ used_ips }} used</span>
-      <span>{{ total_ips }} total</span>
+  <div class="card mt-3">
+    <div class="card-body">
+      <div class="mb-3">
+        <div class="d-flex justify-content-between">
+          <div class="form-label mb-0">IP Usage ({{ used_ips }} of {{ total_ips }})</div>
+          <div class="text-muted">{{ (used_ips / total_ips * 100)|round(1) }}%</div>
+        </div>
+        <div class="progress mt-2">
+          <div class="progress-bar" style="width: {{ (used_ips / total_ips * 100) if total_ips > 0 else 0 }}%"
+            role="progressbar"></div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -249,65 +318,4 @@
     </div>
   </div>
 </div>
-
-<style>
-  .glass-card {
-    background-color: rgba(255, 255, 255, 0.03);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  }
-
-  [data-bs-theme="light"] .glass-card {
-    background-color: rgba(255, 255, 255, 0.7);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-  }
-
-  .app-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-    gap: 1.5rem;
-  }
-
-  .app-card {
-    border-radius: 10px;
-    overflow: hidden;
-    transition: transform 0.2s, box-shadow 0.2s;
-    background-color: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  [data-bs-theme="light"] .app-card {
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-  }
-
-  .app-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-  }
-
-  .app-card-header {
-    padding: 1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  [data-bs-theme="light"] .app-card-header {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  }
-
-  .app-card-title h4 {
-    margin: 0 0 0.25rem 0;
-    font-size: 1.25rem;
-  }
-
-  .app-card-body {
-    padding: 1rem;
-    max-height: 200px;
-    overflow: hidden;
-  }
-</style>
 {% endblock %}
\ No newline at end of file