diff --git a/docs/release-notes/version-2.8.md b/docs/release-notes/version-2.8.md
index c2dd7ba80..5b73cc85d 100644
--- a/docs/release-notes/version-2.8.md
+++ b/docs/release-notes/version-2.8.md
@@ -5,7 +5,8 @@
 ### Enhancements
 
 * [#3294](https://github.com/netbox-community/netbox/issues/3294) - Implement mechanism for storing user preferences
-* [#4531](https://github.com/netbox-community/netbox/issues/4531) - Retain user's pagination preference
+* [#4421](https://github.com/netbox-community/netbox/issues/4421) - Retain user's preference for config context format
+* [#4531](https://github.com/netbox-community/netbox/issues/4531) - Retain user's preference for page length
 
 ### Bug Fixes
 
diff --git a/netbox/extras/views.py b/netbox/extras/views.py
index bb7d76dd0..613e45132 100644
--- a/netbox/extras/views.py
+++ b/netbox/extras/views.py
@@ -119,11 +119,18 @@ class ConfigContextView(PermissionRequiredMixin, View):
     permission_required = 'extras.view_configcontext'
 
     def get(self, request, pk):
-
         configcontext = get_object_or_404(ConfigContext, pk=pk)
 
+        # Determine user's preferred output format
+        if request.GET.get('format') in ['json', 'yaml']:
+            format = request.GET.get('format')
+            request.user.config.set('extras.configcontext.format', format, commit=True)
+        else:
+            format = request.user.config.get('extras.configcontext.format', 'json')
+
         return render(request, 'extras/configcontext.html', {
             'configcontext': configcontext,
+            'format': format,
         })
 
 
@@ -171,11 +178,19 @@ class ObjectConfigContextView(View):
         source_contexts = ConfigContext.objects.get_for_object(obj)
         model_name = self.object_class._meta.model_name
 
+        # Determine user's preferred output format
+        if request.GET.get('format') in ['json', 'yaml']:
+            format = request.GET.get('format')
+            request.user.config.set('extras.configcontext.format', format, commit=True)
+        else:
+            format = request.user.config.get('extras.configcontext.format', 'json')
+
         return render(request, 'extras/object_configcontext.html', {
             model_name: obj,
             'obj': obj,
             'rendered_context': obj.get_config_context(),
             'source_contexts': source_contexts,
+            'format': format,
             'base_template': self.base_template,
             'active_tab': 'config-context',
         })
diff --git a/netbox/project-static/js/configcontext.js b/netbox/project-static/js/configcontext.js
deleted file mode 100644
index 1d731e696..000000000
--- a/netbox/project-static/js/configcontext.js
+++ /dev/null
@@ -1,11 +0,0 @@
-$('.rendered-context-format').on('click', function() {
-    if (!$(this).hasClass('active')) {
-        // Update selection in the button group
-        $('span.rendered-context-format').removeClass('active');
-        $('span.rendered-context-format[data-format=' + $(this).data('format') + ']').addClass('active');
-
-        // Hide all rendered contexts and only show the selected one
-        $('div.rendered-context-data').hide();
-        $('div.rendered-context-data[data-format=' + $(this).data('format') + ']').show();
-    }
-});
diff --git a/netbox/templates/extras/configcontext.html b/netbox/templates/extras/configcontext.html
index 998ab7681..21e8cdab6 100644
--- a/netbox/templates/extras/configcontext.html
+++ b/netbox/templates/extras/configcontext.html
@@ -215,13 +215,9 @@
                     {% include 'extras/inc/configcontext_format.html' %}
                 </div>
                 <div class="panel-body">
-                    {% include 'extras/inc/configcontext_data.html' with data=configcontext.data %}
+                    {% include 'extras/inc/configcontext_data.html' with data=configcontext.data format=format %}
                 </div>
             </div>
         </div>
     </div>
 {% endblock %}
-
-{% block javascript %}
-<script src="{% static 'js/configcontext.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}
diff --git a/netbox/templates/extras/inc/configcontext_data.html b/netbox/templates/extras/inc/configcontext_data.html
index d91960e2c..085887748 100644
--- a/netbox/templates/extras/inc/configcontext_data.html
+++ b/netbox/templates/extras/inc/configcontext_data.html
@@ -1,8 +1,5 @@
 {% load helpers %}
 
-<div class="rendered-context-data" data-format="json">
-    <pre>{{ data|render_json }}</pre>
-</div>
-<div class="rendered-context-data" data-format="yaml" style="display: none;">
-    <pre>{{ data|render_yaml }}</pre>
+<div class="rendered-context-data">
+    <pre>{% if format == 'json' %}{{ data|render_json }}{% elif format == 'yaml' %}{{ data|render_yaml }}{% else %}{{ data }}{% endif %}</pre>
 </div>
diff --git a/netbox/templates/extras/inc/configcontext_format.html b/netbox/templates/extras/inc/configcontext_format.html
index d3467f131..a3543d582 100644
--- a/netbox/templates/extras/inc/configcontext_format.html
+++ b/netbox/templates/extras/inc/configcontext_format.html
@@ -1,6 +1,6 @@
 <div class="pull-right">
     <div class="btn-group btn-group-xs" role="group">
-        <span class="btn btn-default rendered-context-format active" data-format="json">JSON</span>
-        <span class="btn btn-default rendered-context-format" data-format="yaml">YAML</span>
+        <a href="?format=json" class="btn btn-default{% if format == 'json' %} active{% endif %}">JSON</a>
+        <a href="?format=yaml" class="btn btn-default{% if format == 'yaml' %} active{% endif %}">YAML</a>
     </div>
 </div>
diff --git a/netbox/templates/extras/object_configcontext.html b/netbox/templates/extras/object_configcontext.html
index 784b5805f..cc77def06 100644
--- a/netbox/templates/extras/object_configcontext.html
+++ b/netbox/templates/extras/object_configcontext.html
@@ -13,7 +13,7 @@
                     {% include 'extras/inc/configcontext_format.html' %}
                 </div>
                 <div class="panel-body">
-                    {% include 'extras/inc/configcontext_data.html' with data=rendered_context %}
+                    {% include 'extras/inc/configcontext_data.html' with data=rendered_context format=format %}
                 </div>
             </div>
         </div>
@@ -24,7 +24,7 @@
                 </div>
                 <div class="panel-body">
                     {% if obj.local_context_data %}
-                        {% include 'extras/inc/configcontext_data.html' with data=obj.local_context_data %}
+                        {% include 'extras/inc/configcontext_data.html' with data=obj.local_context_data format=format %}
                     {% else %}
                         <span class="text-muted">None</span>
                     {% endif %}
@@ -49,7 +49,7 @@
                         {% if context.description %}
                             <br /><small>{{ context.description }}</small>
                         {% endif %}
-                        {% include 'extras/inc/configcontext_data.html' with data=context.data %}
+                        {% include 'extras/inc/configcontext_data.html' with data=context.data format=format %}
                     </div>
                 {% empty %}
                     <div class="panel-body">
@@ -60,7 +60,3 @@
         </div>
     </div>
 {% endblock %}
-
-{% block javascript %}
-<script src="{% static 'js/configcontext.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}