diff --git a/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html b/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
index 6fdc61a..3305328 100644
--- a/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
+++ b/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
@@ -9,9 +9,8 @@
 {% endblock html_title %}
 {% partialdef control-plane-info inline=True %}
 {% if selected_plane and selected_plane.user_info %}
-    <div class="row mt-3">
-        <div class="col-12">
-            <h6 class="mb-3">{% translate "Service Provider Zone Information" %}</h6>
+    <div class="mt-3">
+        <div class="border-top pt-3">
             {% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
         </div>
     </div>
@@ -35,64 +34,97 @@
 {% endpartialdef %}
 {% block content %}
     <section class="section">
-        <div class="row">
-            <div class="col-12">
-                <div class="card">
-                    <div class="card-header d-flex align-items-center">
-                        {% if service.logo %}
-                            <img src="{{ service.logo.url }}"
-                                 alt="{{ service.name }}"
-                                 class="me-3"
-                                 style="max-width: 48px;
-                                        max-height: 48px">
-                        {% endif %}
-                        <div class="d-flex flex-column">
-                            <h4 class="mb-0">{{ offering }}</h4>
-                            <small class="text-muted">{{ offering.service.category }}</small>
+        {% if not has_control_planes %}
+            <!-- No Service Available Message -->
+            <div class="row">
+                <div class="col-12">
+                    <div class="alert alert-warning d-flex align-items-center" role="alert">
+                        <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                        <div>
+                            <strong>{% translate "Service Unavailable" %}</strong>
+                            <p class="mb-0">{% translate "We currently cannot offer this service. Please check back later or contact support for more information." %}</p>
                         </div>
                     </div>
-                    <div class="card-body">
-                        {% if offering.description %}
-                            <div class="row mb-3">
-                                <div class="col-12">
-                                    <p>{{ offering.description|urlize }}</p>
-                                </div>
-                            </div>
-                        {% endif %}
-                        {% if not has_control_planes %}
-                            <p>{% translate "We currently cannot offer this service, sorry!" %}</p>
-                        {% else %}
+                </div>
+            </div>
+        {% else %}
+            <!-- Two Column Layout -->
+            <div class="row g-3">
+                <!-- Left Column: Service Provider Zone -->
+                <div class="col-12 col-lg-6">
+                    <div class="card h-100">
+                        <div class="card-header">
+                            <h5 class="mb-0">{% translate "Service Provider Zone" %}</h5>
+                        </div>
+                        <div class="card-body">
                             <form hx-trigger="change"
                                   hx-get="{{ request.path }}?fragment=service-form"
                                   hx-target="#service-form"
-                                  hx-swap="outerHTML">
+                                  hx-swap="outerHTML"
+                                  class="control-plane-select-form">
                                 {{ select_form }}
                             </form>
-                        {% endif %}
-                        {% if has_control_planes %}
+                            <style>
+                                .control-plane-select-form .form-label {
+                                    display: none;
+                                }
+                            </style>
                             <div id="control-plane-info"
                                  hx-trigger="load, change from:form"
                                  hx-get="{{ request.path }}?fragment=control-plane-info">
                                 {% partial control-plane-info %}
                             </div>
-                        {% endif %}
-                        {% if service.external_links or offering.external_links %}
-                            <div class="row mt-3">
-                                <div class="col-12">
-                                    <h6 class="mb-3">{% translate "External Links" %}</h6>
-                                    <div class="d-flex flex-wrap gap-2">
-                                        {% for link in service.external_links %}
-                                            {% include "includes/external_link.html" %}
-                                        {% endfor %}
-                                        {% for link in offering.external_links %}
-                                            {% include "includes/external_link.html" %}
-                                        {% endfor %}
-                                    </div>
-                                </div>
-                            </div>
-                        {% endif %}
+                        </div>
                     </div>
                 </div>
+                <!-- Right Column: Service Information -->
+                <div class="col-12 col-lg-6">
+                    <div class="card h-100">
+                        <div class="card-header">
+                            <h5 class="mb-0">{% translate "Service Information" %}</h5>
+                        </div>
+                        <div class="card-body">
+                            {% if offering.service.logo or offering.description %}
+                                <div class="d-flex gap-3 mb-3">
+                                    {% if offering.service.logo %}
+                                        <div class="flex-shrink-0">
+                                            <img src="{{ offering.service.logo.url }}"
+                                                 alt="{{ offering.service.name }}"
+                                                 style="max-width: 64px;
+                                                        max-height: 64px">
+                                        </div>
+                                    {% endif %}
+                                    {% if offering.description %}
+                                        <div class="flex-grow-1">
+                                            <p class="mb-0">{{ offering.description|urlize }}</p>
+                                        </div>
+                                    {% endif %}
+                                </div>
+                            {% endif %}
+                            {% if offering.service.external_links or offering.external_links %}
+                                {% if offering.service.logo or offering.description %}<hr class="my-3">{% endif %}
+                                <h6 class="mb-3">{% translate "External Links" %}</h6>
+                                <div class="d-flex flex-wrap gap-2">
+                                    {% for link in offering.service.external_links %}
+                                        {% include "includes/external_link.html" %}
+                                    {% endfor %}
+                                    {% for link in offering.external_links %}
+                                        {% include "includes/external_link.html" %}
+                                    {% endfor %}
+                                </div>
+                            {% else %}
+                                {% if not offering.service.logo and not offering.description %}
+                                    <p class="text-muted mb-0">{% translate "No additional information available." %}</p>
+                                {% endif %}
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+        <!-- Service Form (unchanged) -->
+        <div class="row mt-3">
+            <div class="col-12">
                 <div id="service-form">{% partial service-form %}</div>
             </div>
         </div>
diff --git a/src/servala/frontend/templates/includes/control_plane_user_info.html b/src/servala/frontend/templates/includes/control_plane_user_info.html
index 21d5cdb..a3a27f5 100644
--- a/src/servala/frontend/templates/includes/control_plane_user_info.html
+++ b/src/servala/frontend/templates/includes/control_plane_user_info.html
@@ -1,25 +1,26 @@
 {% load i18n %}
 {% if control_plane.user_info %}
-    <div class="table-responsive">
-        <table class="table mb-0 table-lg">
-            <tbody>
-                {% for info in control_plane.user_info %}
-                    <tr>
-                        <th>
-                            {{ info.title }}
-                            {% if info.help_text %}
-                                <i class="bi bi-info-circle ms-1"
-                                   data-bs-toggle="popover"
-                                   data-bs-trigger="hover focus"
-                                   data-bs-placement="top"
-                                   data-bs-content="{{ info.help_text }}"
-                                   style="cursor: help"></i>
-                            {% endif %}
-                        </th>
-                        <td>{{ info.content }}</td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+    <div class="control-plane-info-list">
+        {% for info in control_plane.user_info %}
+            <div class="info-item mb-3">
+                <div class="d-flex align-items-center mb-1">
+                    <small class="text-muted fw-semibold">
+                        {{ info.title }}
+                    </small>
+                    {% if info.help_text %}
+                        <i class="bi bi-info-circle ms-1 text-muted"
+                           data-bs-toggle="popover"
+                           data-bs-trigger="hover focus"
+                           data-bs-placement="top"
+                           data-bs-content="{{ info.help_text }}"
+                           style="cursor: help;
+                                  font-size: 0.875rem;"></i>
+                    {% endif %}
+                </div>
+                <div class="bg-light-subtle p-2 rounded">
+                    <code class="text-dark">{{ info.content }}</code>
+                </div>
+            </div>
+        {% endfor %}
     </div>
 {% endif %}