diff --git a/src/servala/core/forms.py b/src/servala/core/forms.py
index 034d1c9..baa85fb 100644
--- a/src/servala/core/forms.py
+++ b/src/servala/core/forms.py
@@ -5,25 +5,14 @@ from django_jsonform.widgets import JSONFormWidget
 from servala.core.models import ControlPlane, ServiceDefinition
 
 CONTROL_PLANE_USER_INFO_SCHEMA = {
-    "type": "array",
-    "items": {
-        "type": "object",
-        "properties": {
-            "title": {
-                "type": "string",
-                "title": "Title",
-            },
-            "content": {
-                "type": "string",
-                "title": "Content",
-            },
-            "help_text": {
-                "type": "string",
-                "title": "Help Text (optional)",
-            },
+    "type": "object",
+    "properties": {
+        "CNAME Record": {
+            "title": "CNAME Record",
+            "type": "string",
         },
-        "required": ["title", "content"],
     },
+    "additionalProperties": {"type": "string"},
 }
 
 
diff --git a/src/servala/core/migrations/0012_convert_user_info_to_array.py b/src/servala/core/migrations/0012_convert_user_info_to_array.py
deleted file mode 100644
index 892949e..0000000
--- a/src/servala/core/migrations/0012_convert_user_info_to_array.py
+++ /dev/null
@@ -1,65 +0,0 @@
-# Generated by Django 5.2.7 on 2025-10-24 10:04
-
-from django.db import migrations
-
-
-def convert_user_info_to_array(apps, schema_editor):
-    """
-    Convert user_info from object format {"key": "value"} to array format
-    [{"title": "key", "content": "value"}].
-    """
-    ControlPlane = apps.get_model("core", "ControlPlane")
-
-    for control_plane in ControlPlane.objects.all():
-        if not control_plane.user_info:
-            continue
-
-        # If it's already an array (migration already run or new format), skip
-        if isinstance(control_plane.user_info, list):
-            continue
-
-        # Convert from dict to array
-        if isinstance(control_plane.user_info, dict):
-            new_user_info = []
-            for key, value in control_plane.user_info.items():
-                new_user_info.append({"title": key, "content": value})
-
-            control_plane.user_info = new_user_info
-            control_plane.save(update_fields=["user_info"])
-
-
-def reverse_user_info_to_object(apps, schema_editor):
-    """
-    Reverse the migration by converting array format back to object format.
-    Note: help_text will be lost during reversal.
-    """
-    ControlPlane = apps.get_model("core", "ControlPlane")
-
-    for control_plane in ControlPlane.objects.all():
-        if not control_plane.user_info:
-            continue
-
-        # If it's already an object, skip
-        if isinstance(control_plane.user_info, dict):
-            continue
-
-        # Convert from array to dict
-        if isinstance(control_plane.user_info, list):
-            new_user_info = {}
-            for item in control_plane.user_info:
-                if isinstance(item, dict) and "title" in item and "content" in item:
-                    new_user_info[item["title"]] = item["content"]
-
-            control_plane.user_info = new_user_info
-            control_plane.save(update_fields=["user_info"])
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ("core", "0011_alter_organizationorigin_billing_entity"),
-    ]
-
-    operations = [
-        migrations.RunPython(convert_user_info_to_array, reverse_user_info_to_object),
-    ]
diff --git a/src/servala/core/models/service.py b/src/servala/core/models/service.py
index 3af8c89..42fc500 100644
--- a/src/servala/core/models/service.py
+++ b/src/servala/core/models/service.py
@@ -156,8 +156,7 @@ class ControlPlane(ServalaModelMixin, models.Model):
         blank=True,
         verbose_name=_("User Information"),
         help_text=_(
-            'Array of info objects: [{"title": "…", "content": "…", "help_text": "…"}]. '
-            "The help_text field is optional and will be shown as a hover popover on an info icon."
+            "Key-value information displayed to users when selecting this control plane"
         ),
     )
     wildcard_dns = models.CharField(
diff --git a/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html b/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
index 4aaef14..d375344 100644
--- a/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
+++ b/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
@@ -102,16 +102,7 @@
                         </div>
                     </div>
                 {% endif %}
-                {% if control_plane.user_info %}
-                    <div class="card">
-                        <div class="card-header">
-                            <h4 class="card-title">{% translate "Service Provider Zone Information" %}</h4>
-                        </div>
-                        <div class="card-content">
-                            {% include "includes/control_plane_user_info.html" with control_plane=instance.context.control_plane %}
-                        </div>
-                    </div>
-                {% endif %}
+                {% include "includes/control_plane_user_info.html" with control_plane=instance.context.control_plane %}
             </div>
             {% if instance.spec and spec_fieldsets %}
                 <div class="col-12">
@@ -248,12 +239,3 @@
         </div>
     </div>
 {% endblock content %}
-{% block extra_js %}
-    <script>
-        // Initialize Bootstrap popovers for help text
-        document.addEventListener('DOMContentLoaded', function() {
-            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
-            [...popoverTriggerList].map(el => new bootstrap.Popover(el));
-        });
-    </script>
-{% endblock extra_js %}
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 3305328..842e610 100644
--- a/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
+++ b/src/servala/frontend/templates/frontend/organizations/service_offering_detail.html
@@ -7,13 +7,9 @@
         {{ offering }}
     {% endblock page_title %}
 {% endblock html_title %}
-{% partialdef control-plane-info inline=True %}
-{% if selected_plane and selected_plane.user_info %}
-    <div class="mt-3">
-        <div class="border-top pt-3">
-            {% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
-        </div>
-    </div>
+{% partialdef control-plane-info %}
+{% if selected_plane %}
+    {% include "includes/control_plane_user_info.html" with control_plane=selected_plane %}
 {% endif %}
 {% endpartialdef %}
 {% partialdef service-form %}
@@ -34,99 +30,66 @@
 {% endpartialdef %}
 {% block content %}
     <section class="section">
-        {% 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 class="row">
+            <div class="col-12 col-lg-8">
+                <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>
                         </div>
                     </div>
-                </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">
+                    <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 %}
                             <form hx-trigger="change"
                                   hx-get="{{ request.path }}?fragment=service-form"
                                   hx-target="#service-form"
-                                  hx-swap="outerHTML"
-                                  class="control-plane-select-form">
+                                  hx-swap="outerHTML">
                                 {{ select_form }}
                             </form>
-                            <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 %}
+                        {% 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>
-                        </div>
+                        {% endif %}
                     </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 class="col-12 col-lg-4">
+                {% if has_control_planes %}
+                    <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 %}
+            </div>
         </div>
     </section>
 {% endblock content %}
@@ -140,19 +103,4 @@
         </script>
         <script defer src="{% static "js/fqdn.js" %}"></script>
     {% endif %}
-    <script>
-        // Initialize Bootstrap popovers for help text
-        document.addEventListener('DOMContentLoaded', function() {
-            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
-            [...popoverTriggerList].map(el => new bootstrap.Popover(el));
-        });
-
-        // Re-initialize popovers after HTMX swaps
-        document.body.addEventListener('htmx:afterSwap', function(event) {
-            if (event.detail.target.id === 'control-plane-info') {
-                const popoverTriggerList = event.detail.target.querySelectorAll('[data-bs-toggle="popover"]');
-                [...popoverTriggerList].map(el => new bootstrap.Popover(el));
-            }
-        });
-    </script>
 {% endblock extra_js %}
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 a3a27f5..b9ffe99 100644
--- a/src/servala/frontend/templates/includes/control_plane_user_info.html
+++ b/src/servala/frontend/templates/includes/control_plane_user_info.html
@@ -1,26 +1,26 @@
 {% load i18n %}
+{% comment %}
+Reusable snippet for displaying ControlPlane user_info
+Usage: {% include "includes/control_plane_user_info.html" with control_plane=control_plane_object %}
+{% endcomment %}
 {% if control_plane.user_info %}
-    <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 class="card">
+        <div class="card-header">
+            <h4 class="card-title">{% translate "Service Provider Zone Information" %}</h4>
+        </div>
+        <div class="card-content">
+            <div class="table-responsive">
+                <table class="table mb-0 table-lg">
+                    <tbody>
+                        {% for key, value in control_plane.user_info.items %}
+                            <tr>
+                                <th>{{ key }}</th>
+                                <td>{{ value }}</td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
             </div>
-        {% endfor %}
+        </div>
     </div>
 {% endif %}