diff --git a/app/core/views/common.py b/app/core/views/common.py
index f1baac20..a1350afa 100644
--- a/app/core/views/common.py
+++ b/app/core/views/common.py
@@ -75,6 +75,13 @@ class ChangeView(View, generic.UpdateView):
 
         external_links_query = None
 
+        if 'tab' in self.request.GET:
+
+            context['open_tab'] = str(self.request.GET.get("tab")).lower()
+
+        else:
+             context['open_tab'] = None
+
 
         if self.model._meta.model_name == 'device':
 
diff --git a/app/itim/forms/services.py b/app/itim/forms/services.py
index a88dc277..e591afb4 100644
--- a/app/itim/forms/services.py
+++ b/app/itim/forms/services.py
@@ -1,8 +1,11 @@
 from django import forms
 from django.forms import ValidationError
+from django.urls import reverse
 
 from itim.models.services import Service
 
+from app import settings
+
 from core.forms.common import CommonModelForm
 
 
@@ -79,3 +82,81 @@ class ServiceForm(CommonModelForm):
 
 
         return cleaned_data
+
+
+
+class DetailForm(ServiceForm):
+
+
+    tabs: dict = {
+        "details": {
+            "name": "Details",
+            "slug": "details",
+            "sections": [
+                {
+                    "layout": "double",
+                    "left": [
+                        'name',
+                        'config_key_variable',
+                        'template',
+                        'organization',
+                        'c_created',
+                        'c_modified'
+                    ],
+                    "right": [
+                        'model_notes',
+                    ]
+                }
+            ]
+        },
+        "rendered_config": {
+            "name": "Rendered Config",
+            "slug": "rendered_config",
+            "sections": [
+                {
+                    "layout": "single",
+                    "fields": [
+                        'config_variables',
+                    ],
+                    "json": [
+                        'config_variables'
+                    ]
+                }
+            ]
+        }
+    }
+
+
+    def __init__(self, *args, **kwargs):
+
+        super().__init__(*args, **kwargs)
+
+
+        self.fields['config_variables'] = forms.fields.JSONField(
+            widget = forms.Textarea(
+                attrs = {
+                    "cols": "80",
+                    "rows": "100"
+                }
+            ),
+            label = 'Rendered Configuration',
+            initial = self.instance.config_variables,
+        )
+
+        self.fields['c_created'] = forms.DateTimeField(
+            label = 'Created',
+            input_formats=settings.DATETIME_FORMAT,
+            disabled = True,
+            initial = self.instance.created,
+        )
+
+        self.fields['c_modified'] = forms.DateTimeField(
+            label = 'Modified',
+            input_formats=settings.DATETIME_FORMAT,
+            disabled = True,
+            initial = self.instance.modified,
+        )
+
+        self.tabs['details'].update({
+            "edit_url": reverse('ITIM:_service_change', args=(self.instance.pk,))
+        })
diff --git a/app/itim/templates/itim/service.html.j2 b/app/itim/templates/itim/service.html.j2
index 14bbe245..c6b48466 100644
--- a/app/itim/templates/itim/service.html.j2
+++ b/app/itim/templates/itim/service.html.j2
@@ -1,273 +1,75 @@
-{% extends 'base.html.j2' %}
+{% extends 'detail.html.j2' %}
 
 {% load json %}
 {% load markdown %}
 
-{% block content %}
 
-<script>
+{% block tabs %}
 
-    function openCity(evt, cityName) {
-        var i, tabcontent, tablinks;
+<div id="details" class="content-tab">
 
-        tabcontent = document.getElementsByClassName("tabcontent");
-        for (i = 0; i < tabcontent.length; i++) {
-            tabcontent[i].style.display = "none";
-        }
+    {% include 'content/section.html.j2' with tab=form.tabs.details %}
 
-        tablinks = document.getElementsByClassName("tablinks");
-        for (i = 0; i < tablinks.length; i++) {
-            tablinks[i].className = tablinks[i].className.replace(" active", "");
-        }
+    <hr />
 
-        document.getElementById(cityName).style.display = "block";
-        evt.currentTarget.className += " active";
-    }
+    <div style="display: block; width: 100%;">
+        <h3>Ports</h3>
+        <table>
+            <tr>
+                <th>Name</th>
+                <th>Description</th>
+            </tr>
+            {% if item.port.all and not item.template %}
+            {% for port in item.port.all %}
+            <tr>
+                <td><a href="{% url 'Settings:_port_view' item.pk %}">{{ port }}</a></td>
+                <td>{{ port.description }}</td>
+            </tr>
+            {% endfor %}
+            {% elif not item.port.all and item.template %}
+            {% for port in item.template.port.all %}
+            <tr>
+                <td><a href="{% url 'Settings:_port_view' item.pk %}">{{ port }}</a></td>
+                <td>{{ port.description }}</td>
+            </tr>
+            {% endfor%}
+            {% else %}
+            <tr>
+            <td colspan="2"> Nothing Found</td>
+            </tr>
+            {% endif %}
+        </table>
+    </div>
 
-</script>
+    <div style="display: block; width: 100%;">
+        <h3>Dependent Services</h3>
+        <table>
+            <tr>
+                <th>Name</th>
+                <th>Organization</th>
+            </tr>
+            {% if item.dependent_service.all %}
+            {% for service in item.dependent_service.all %}
+            <tr>
+                <td><a href="{% url 'ITIM:_service_view' service.pk %}">{{ service }}</a></td>
+                <td>{{ service.organization }}</td>
+            </tr>
+            {% endfor%}
+            {% else %}
+            <tr>
+            <td colspan="2"> Nothing Found</td>
+            </tr>
+            {% endif %}
+        </table>
+    </div>
 
-<style>
-    .detail-view-field {
-        display: unset;
-        height: 30px;
-        line-height: 30px;
-        padding: 0px 20px 40px 20px;
-
-    }
-
-    .detail-view-field label {
-        display: inline-block;
-        font-weight: bold;
-        width: 200px;
-        margin: 10px;
-        height: 30px;
-        line-height: 30px;
-
-    }
-
-    .detail-view-field span {
-        display: inline-block;
-        width: 340px;
-        margin: 10px;
-        border-bottom: 1px solid #ccc;
-        height: 30px;
-        line-height: 30px;
-
-    }
-
-    pre {
-        word-wrap: break-word;
-        white-space: pre-wrap;
-    }
-</style>
-<div class="tab">
-    <button onclick="window.location='{% url 'ITIM:Services' %}';"
-        style="vertical-align: middle; padding: auto; margin: 0px">
-        <svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 -960 960 960" width="25px"
-            style="vertical-align: middle; margin: 0px; padding: 0px border: none; " fill="#6a6e73">
-            <path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z" />
-        </svg>Back to Services</button>
-
-    <button id="defaultOpen" class="tablinks" onclick="openCity(event, 'Details')">Details</button>
-    <button class="tablinks" onclick="openCity(event, 'Rendered_Config')">Rendered Config</button>
-    {% if perms.assistance.change_service %}
-    <button class="tablinks" onclick="openCity(event, 'Notes')">Notes</button>
-    {% endif %}
 </div>
 
-<form method="post">
-    <div id="Details" class="tabcontent">
-        <h3>Details</h3>
 
-        {% csrf_token %}
+<div id="rendered_config" class="content-tab">
 
-        <div style="align-items:flex-start; align-content: center; display: flexbox; width: 100%">
+    {% include 'content/section.html.j2' with tab=form.tabs.rendered_config %}
 
-            <div style="display: inline; width: 40%; margin: 30px;">
-
-                <div class="detail-view-field">
-                    <label>{{ form.name.label }}</label>
-                    <span>{{ form.name.value }}</span>
-                </div>
-
-                <div class="detail-view-field">
-                    <label>{{ form.config_key_variable.label }}</label>
-                    <span>{{ form.config_key_variable.value }}</span>
-                </div>
-
-                {% if form.template.value or form.is_template.value %}
-                <div class="detail-view-field">
-                    <label>{{ form.is_template.label }}</label>
-                    <span>
-                    {% if form.is_template.value %}
-                    {{ form.is_template.value }}
-                    {% else %}
-                    <a href="{% url 'ITIM:_service_view' item.template.pk %}">{{ item.template }}</a>
-                    {% endif %}
-                    </span>
-                </div>
-                {% endif %}
-
-                <div class="detail-view-field">
-                    <label>{{ form.organization.label }}</label>
-                    <span>
-                        {% if form.organization.value %}
-                        {{ item.organization }}
-                        {% else %}
-                        &nbsp;
-                        {% endif %}
-                    </span>
-                </div>
-
-                <div class="detail-view-field">
-                    <label>Created</label>
-                    <span>{{ item.created }}</span>
-                </div>
-
-                <div class="detail-view-field">
-                    <label title="{% if item.cluster %}{{ form.cluster.help_text }}{% else %}{{ form.device.help_text }}{% endif %}">
-                        {% if item.cluster %}
-                        Cluster
-                        {% else %}
-                        Device
-                        {% endif %}
-                    </label>
-                    <span>
-                        {% if item.cluster %}
-                        {{ item.cluster }}
-                        {% else %}
-                        {% if item.device.id %}
-                        <a href="{% url 'ITAM:_device_view' item.device.id %}">{{ item.device }}</a>
-                        {% endif %}
-                        {% endif %}
-                    </span>
-                </div>
-
-                <div class="detail-view-field">
-                    <label>Modified</label>
-                    <span>{{ item.modified }}</span>
-                </div>
-
-            </div>
-
-
-            <div style="display: inline; width: 40%; margin: 30px; text-align: left;">
-                <div>
-                    <label
-                        style="font-weight: bold; width: 100%; border-bottom: 1px solid #ccc; display: block; text-align: inherit;">{{ form.model_notes.label }}</label>
-
-                    <div style="display: inline-block; text-align: left;">
-                        {% if form.model_notes.value %}
-                        {{ form.model_notes.value | markdown | safe }}
-                        {% else %}
-                        &nbsp;
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-
-        </div>
-
-        <input type="button" value="Edit" onclick="window.location='{% url 'ITIM:_service_change' item.pk %}';">
-
-        <hr />
-
-        <div style="display: block; width: 100%;">
-            <h3>Ports</h3>
-            <table>
-                <tr>
-                    <th>Name</th>
-                    <th>Description</th>
-                </tr>
-                {% if item.port.all and not item.template %}
-                {% for port in item.port.all %}
-                <tr>
-                    <td><a href="{% url 'Settings:_port_view' item.pk %}">{{ port }}</a></td>
-                    <td>{{ port.description }}</td>
-                </tr>
-                {% endfor %}
-                {% elif not item.port.all and item.template %}
-                {% for port in item.template.port.all %}
-                <tr>
-                    <td><a href="{% url 'Settings:_port_view' item.pk %}">{{ port }}</a></td>
-                    <td>{{ port.description }}</td>
-                </tr>
-                {% endfor%}
-                {% else %}
-                <tr>
-                <td colspan="2"> Nothing Found</td>
-                </tr>
-                {% endif %}
-            </table>
-        </div>
-
-
-        <div style="display: block; width: 100%;">
-            <h3>Dependent Services</h3>
-            <table>
-                <tr>
-                    <th>Name</th>
-                    <th>Organization</th>
-                </tr>
-                {% if item.dependent_service.all %}
-                {% for service in item.dependent_service.all %}
-                <tr>
-                    <td><a href="{% url 'ITIM:_service_view' service.pk %}">{{ service }}</a></td>
-                    <td>{{ service.organization }}</td>
-                </tr>
-                {% endfor%}
-                {% else %}
-                <tr>
-                <td colspan="2"> Nothing Found</td>
-                </tr>
-                {% endif %}
-            </table>
-        </div>
-
-
-        <div style="display: block; width: 100%;">
-            <h3>Service Config</h3>
-            <br>
-            <textarea cols="90" rows="30" readonly>{{ item.config | json_pretty }}</textarea>
-        </div>
-
-        <br>
-
-        <script>
-            document.getElementById("defaultOpen").click();
-        </script>
-
-    </div>
-
-    <div id="Rendered_Config" class="tabcontent">
-        <h3>
-            Rendered Config
-        </h3>
-        
-        <div>
-            <textarea cols="90" rows="30" readonly>{{ item.config_variables | json_pretty }}</textarea>
-        </div>
-
-    </div>
-
-    {% if perms.assistance.change_knowledgebase %}
-    <div id="Notes" class="tabcontent">
-        <h3>
-            Notes
-        </h3>
-        {{ notes_form }}
-        <input type="submit" name="{{ notes_form.prefix }}" value="Submit" />
-        <div class="comments">
-            {% if notes %}
-            {% for note in notes %}
-            {% include 'note.html.j2' %}
-            {% endfor %}
-            {% endif %}
-        </div>
-
-    </div>
-    {% endif %}
-
-</form>
+</div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/app/itim/views/services.py b/app/itim/views/services.py
index 42c97fb4..0068416c 100644
--- a/app/itim/views/services.py
+++ b/app/itim/views/services.py
@@ -6,7 +6,7 @@ from core.forms.comment import AddNoteForm
 from core.models.notes import Notes
 from core.views.common import AddView, ChangeView, DeleteView, IndexView
 
-from itim.forms.services import ServiceForm
+from itim.forms.services import ServiceForm, DetailForm
 from itim.models.services import Service
 
 from settings.models.user_settings import UserSettings
@@ -136,7 +136,7 @@ class View(ChangeView):
 
     context_object_name = "item"
 
-    form_class = ServiceForm
+    form_class = DetailForm
 
     model = Service
 
diff --git a/app/templates/detail.html.j2 b/app/templates/detail.html.j2
index 35d54ee2..4b893626 100644
--- a/app/templates/detail.html.j2
+++ b/app/templates/detail.html.j2
@@ -20,7 +20,7 @@
 
         {% else %}
 
-            <button class="content-navigation-tabs-link" onclick="openContentNavigationTab(event, '{{ tab.slug }}')">{{ tab.name }}</button>
+            <button id="tab-{{ tab.slug }}" class="content-navigation-tabs-link" onclick="openContentNavigationTab(event, '{{ tab.slug }}')">{{ tab.name }}</button>
 
         {% endif %}
 
@@ -30,4 +30,18 @@
 
 {% block tabs %}{% endblock %}
 
+{% if open_tab %}
+
+    <script>
+      document.getElementById("tab-{{ open_tab }}").click();
+    </script>
+
+{% else %}
+
+    <script>
+        document.getElementById("defaultOpen").click();
+    </script>
+
+{% endif %}
+
 {% endblock %}
\ No newline at end of file