diff --git a/docs/admin/release_notes/version_2.2.md b/docs/admin/release_notes/version_2.2.md
index dae668d8..b4ccece9 100644
--- a/docs/admin/release_notes/version_2.2.md
+++ b/docs/admin/release_notes/version_2.2.md
@@ -8,6 +8,18 @@ This document describes all new features and changes in the release. The format
 - Added Python 3.12 support.
 - Added REST API endpoint for Jinja as first part of journey towards a jinja live editor.
 
+## [v2.2.2 (2024-12-17)](https://github.com/nautobot/nautobot-app-golden-config/releases/tag/v2.2.2)
+
+### Added
+
+- [#840](https://github.com/nautobot/nautobot-app-golden-config/issues/840) - Added GraphQL output to the "Generate Intended Config" view.
+- [#841](https://github.com/nautobot/nautobot-app-golden-config/issues/841) - Added GraphQL query form field to the "Generate Intended Config" view.
+- [#844](https://github.com/nautobot/nautobot-app-golden-config/issues/844) - Added a diff output to the "Generate Intended Config" view and associated REST API.
+
+### Fixed
+
+- [#849](https://github.com/nautobot/nautobot-app-golden-config/issues/849) - Fixed failing tests in Nautobot v2.3.13.
+
 ## [v2.2.1 (2024-11-27)](https://github.com/nautobot/nautobot-app-golden-config/releases/tag/v2.2.1)
 
 ### Added
diff --git a/docs/images/generate-intended-config-ui-dark.png b/docs/images/generate-intended-config-ui-dark.png
index 7980b92c..a8c218ee 100644
Binary files a/docs/images/generate-intended-config-ui-dark.png and b/docs/images/generate-intended-config-ui-dark.png differ
diff --git a/docs/images/generate-intended-config-ui.png b/docs/images/generate-intended-config-ui.png
index 604a6ab3..782c5023 100644
Binary files a/docs/images/generate-intended-config-ui.png and b/docs/images/generate-intended-config-ui.png differ
diff --git a/docs/user/app_feature_intended.md b/docs/user/app_feature_intended.md
index a27170a5..b2319ef6 100644
--- a/docs/user/app_feature_intended.md
+++ b/docs/user/app_feature_intended.md
@@ -45,7 +45,9 @@ curl -s -X GET \
     http://nautobot/api/plugins/golden-config/generate-intended-config/?device_id=231b8765-054d-4abe-bdbf-cd60e049cd8d
 ```
 
-The returned response will contain the rendered configuration for the specified device. The web UI provides a simple form to input the device and displays the rendered configuration when submitted.
+The returned response will contain the rendered configuration for the specified device, the GraphQL data that was used, and if applicable, a diff of the most recent intended config that was generated by the **Intended Configuration** job. The web UI provides a simple form to interact with this REST API. You can access the web UI by clicking on "Generate Intended Config" in the "Tools" section of the Golden Config navigation menu.
+
+For more advanced use cases, the REST API and web UI also accept a `graphql_query_id` parameter to specify a custom GraphQL query to use when rendering the configuration. If a `graphql_query_id` is not provided, the default query configured in the Device's Golden Config settings will be used.
 
 ![Intended Configuration Web UI](../images/generate-intended-config-ui.png#only-light)
 ![Intended Configuration Web UI](../images/generate-intended-config-ui-dark.png#only-dark)
diff --git a/nautobot_golden_config/api/serializers.py b/nautobot_golden_config/api/serializers.py
index d67f57d4..73c30a54 100644
--- a/nautobot_golden_config/api/serializers.py
+++ b/nautobot_golden_config/api/serializers.py
@@ -131,3 +131,6 @@ class GenerateIntendedConfigSerializer(serializers.Serializer):  # pylint: disab
 
     intended_config = serializers.CharField(read_only=True)
     intended_config_lines = serializers.ListField(read_only=True, child=serializers.CharField())
+    graphql_data = serializers.JSONField(read_only=True)
+    diff = serializers.CharField(read_only=True)
+    diff_lines = serializers.ListField(read_only=True, child=serializers.CharField())
diff --git a/nautobot_golden_config/api/views.py b/nautobot_golden_config/api/views.py
index acba6b2c..11c23951 100644
--- a/nautobot_golden_config/api/views.py
+++ b/nautobot_golden_config/api/views.py
@@ -1,6 +1,7 @@
 """View for Golden Config APIs."""
 
 import datetime
+import difflib
 import json
 import logging
 from pathlib import Path
@@ -20,6 +21,7 @@
 from nautobot.dcim.models import Device
 from nautobot.extras.api.views import NautobotModelViewSet, NotesViewSetMixin
 from nautobot.extras.datasources.git import ensure_git_repository
+from nautobot.extras.models import GraphQLQuery
 from nautobot_plugin_nornir.constants import NORNIR_SETTINGS
 from nornir import InitNornir
 from nornir_nautobot.plugins.tasks.dispatcher import dispatcher
@@ -202,6 +204,26 @@ class GenerateIntendedConfigView(NautobotAPIVersionMixin, GenericAPIView):
     permission_classes = [IsAuthenticated]
     serializer_class = serializers.GenerateIntendedConfigSerializer
 
+    def _get_diff(self, device, intended_config):
+        """Generate a unified diff between the provided config and the intended config stored on the Device's GoldenConfig.intended_config."""
+        diff = None
+        try:
+            golden_config = device.goldenconfig
+            if golden_config.intended_last_success_date is not None:
+                prior_intended_config = golden_config.intended_config
+                diff = "".join(
+                    difflib.unified_diff(
+                        prior_intended_config.splitlines(keepends=True),
+                        intended_config.splitlines(keepends=True),
+                        fromfile="prior intended config",
+                        tofile="rendered config",
+                    )
+                )
+        except models.GoldenConfig.DoesNotExist:
+            pass
+
+        return diff
+
     def _get_object(self, request, model, query_param):
         """Get the requested model instance, restricted to requesting user."""
         pk = request.query_params.get(query_param)
@@ -232,19 +254,41 @@ def _get_jinja_template_path(self, settings, device, git_repository):
                 type=OpenApiTypes.UUID,
                 location=OpenApiParameter.QUERY,
             ),
+            OpenApiParameter(
+                name="graphql_query_id",
+                required=False,
+                type=OpenApiTypes.UUID,
+                location=OpenApiParameter.QUERY,
+            ),
         ]
     )
     def get(self, request, *args, **kwargs):
         """Generate intended configuration for a Device."""
         device = self._get_object(request, Device, "device_id")
+        graphql_query = None
+        graphql_query_id_param = request.query_params.get("graphql_query_id")
+        if graphql_query_id_param:
+            try:
+                graphql_query = GraphQLQuery.objects.get(pk=request.query_params.get("graphql_query_id"))
+            except GraphQLQuery.DoesNotExist as exc:
+                raise GenerateIntendedConfigException(
+                    f"GraphQLQuery with id '{graphql_query_id_param}' not found"
+                ) from exc
         settings = models.GoldenConfigSetting.objects.get_for_device(device)
         if not settings:
             raise GenerateIntendedConfigException("No Golden Config settings found for this device")
-        if not settings.sot_agg_query:
-            raise GenerateIntendedConfigException("Golden Config settings sot_agg_query not set")
         if not settings.jinja_repository:
             raise GenerateIntendedConfigException("Golden Config settings jinja_repository not set")
 
+        if graphql_query is None:
+            if settings.sot_agg_query is not None:
+                graphql_query = settings.sot_agg_query
+            else:
+                raise GenerateIntendedConfigException("Golden Config settings sot_agg_query not set")
+
+        if "device_id" not in graphql_query.variables:
+            raise GenerateIntendedConfigException("The selected GraphQL query is missing a 'device_id' variable")
+
         try:
             git_repository = settings.jinja_repository
             ensure_git_repository(git_repository)
@@ -253,21 +297,27 @@ def get(self, request, *args, **kwargs):
 
         filesystem_path = self._get_jinja_template_path(settings, device, git_repository)
 
-        status_code, context = graph_ql_query(request, device, settings.sot_agg_query.query)
+        status_code, graphql_data = graph_ql_query(request, device, graphql_query.query)
         if status_code == status.HTTP_200_OK:
             try:
                 intended_config = self._render_config_nornir_serial(
                     device=device,
                     jinja_template=filesystem_path.name,
                     jinja_root_path=filesystem_path.parent,
-                    graphql_data=context,
+                    graphql_data=graphql_data,
                 )
             except Exception as exc:
                 raise GenerateIntendedConfigException(f"Error rendering Jinja template: {exc}") from exc
+
+            diff = self._get_diff(device, intended_config)
+
             return Response(
                 data={
                     "intended_config": intended_config,
                     "intended_config_lines": intended_config.split("\n"),
+                    "graphql_data": graphql_data,
+                    "diff": diff,
+                    "diff_lines": diff.split("\n") if diff else [],
                 },
                 status=status.HTTP_200_OK,
             )
diff --git a/nautobot_golden_config/filter_extensions.py b/nautobot_golden_config/filter_extensions.py
new file mode 100644
index 00000000..276b62a0
--- /dev/null
+++ b/nautobot_golden_config/filter_extensions.py
@@ -0,0 +1,30 @@
+"""FilterSet and FilterForm extensions for the Golden Config app."""
+
+from django.db.models import Q
+from nautobot.apps.filters import FilterExtension, MultiValueCharFilter
+
+
+def filter_graphql_query_variables(queryset, name, value):  # pylint: disable=unused-argument
+    """Filter the queryset based on the presence of variables."""
+    query = Q()
+    for variable_name in value:
+        query |= Q(**{f"variables__{variable_name}__isnull": True})
+    return queryset.exclude(query)
+
+
+class GraphQLQueryFilterExtension(FilterExtension):
+    """Filter extensions for the extras.GraphQLQuery model."""
+
+    model = "extras.graphqlquery"
+
+    filterset_fields = {
+        "nautobot_golden_config_graphql_query_variables": MultiValueCharFilter(
+            field_name="variables",
+            lookup_expr="exact",
+            method=filter_graphql_query_variables,
+            label="Variable key(s) exist",
+        ),
+    }
+
+
+filter_extensions = [GraphQLQueryFilterExtension]
diff --git a/nautobot_golden_config/filters.py b/nautobot_golden_config/filters.py
index c3193289..2223200a 100644
--- a/nautobot_golden_config/filters.py
+++ b/nautobot_golden_config/filters.py
@@ -245,6 +245,27 @@ class Meta:
 class GoldenConfigSettingFilterSet(NautobotFilterSet):
     """Inherits Base Class NautobotFilterSet."""
 
+    device_id = django_filters.ModelMultipleChoiceFilter(
+        queryset=Device.objects.all(),
+        label="Device (ID)",
+        method="filter_device_id",
+    )
+
+    def filter_device_id(self, queryset, name, value):  # pylint: disable=unused-argument
+        """Filter by Device ID."""
+        if not value:
+            return queryset
+        golden_config_setting_ids = []
+        for instance in value:
+            if isinstance(instance, Device):
+                device = instance
+            else:
+                device = Device.objects.get(id=instance)
+            golden_config_setting = models.GoldenConfigSetting.objects.get_for_device(device)
+            if golden_config_setting is not None:
+                golden_config_setting_ids.append(golden_config_setting.id)
+        return queryset.filter(id__in=golden_config_setting_ids)
+
     class Meta:
         """Boilerplate filter Meta data for Config Remove."""
 
diff --git a/nautobot_golden_config/forms.py b/nautobot_golden_config/forms.py
index 1c7a5740..2bd45559 100644
--- a/nautobot_golden_config/forms.py
+++ b/nautobot_golden_config/forms.py
@@ -7,7 +7,7 @@
 from nautobot.apps import forms
 from nautobot.dcim.models import Device, DeviceType, Location, Manufacturer, Platform, Rack, RackGroup
 from nautobot.extras.forms import NautobotBulkEditForm, NautobotFilterForm, NautobotModelForm
-from nautobot.extras.models import DynamicGroup, GitRepository, JobResult, Role, Status, Tag
+from nautobot.extras.models import DynamicGroup, GitRepository, GraphQLQuery, JobResult, Role, Status, Tag
 from nautobot.tenancy.models import Tenant, TenantGroup
 
 from nautobot_golden_config import models
@@ -608,3 +608,9 @@ class GenerateIntendedConfigForm(django_forms.Form):
         required=True,
         label="Device",
     )
+    graphql_query = forms.DynamicModelChoiceField(
+        queryset=GraphQLQuery.objects.all(),
+        required=True,
+        label="GraphQL Query",
+        query_params={"nautobot_golden_config_graphql_query_variables": "device_id"},
+    )
diff --git a/nautobot_golden_config/tables.py b/nautobot_golden_config/tables.py
index 9c1386ef..57adbaaf 100644
--- a/nautobot_golden_config/tables.py
+++ b/nautobot_golden_config/tables.py
@@ -63,7 +63,7 @@
     {% if record.config_type == 'json' %}
         <i class="mdi mdi-circle-small"></i>
     {% else %}
-        <a href="{% url 'extras:job_run_by_class_path' class_path='nautobot_golden_config.jobs.AllGoldenConfig' %}?device={{ record.device.pk }}"
+        <a href="{% url 'extras:job_run_by_class_path' class_path='nautobot_golden_config.jobs.AllGoldenConfig' %}?device={{ record.device.pk }}">
             <span class="text-primary">
                 <i class="mdi mdi-play-circle" title="Execute All Golden Config Jobs"></i>
             </span>
diff --git a/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_devicetab.html b/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_devicetab.html
index e42c4a69..c44e0087 100644
--- a/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_devicetab.html
+++ b/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_devicetab.html
@@ -5,7 +5,8 @@
 
 {% block title %} {{ object }} - Config Compliance {% endblock %}
 
-{% block content %}
+{% block extra_styles %}
+{{ block.super }}
 <style>
     #compliance-content pre {
         font-size: 10px;
@@ -56,12 +57,15 @@
         transform: scale(1.1);
     }
 </style>
+{% endblock extra_styles %}
+
+{% block content %}
 {% block navigation %}
 <div class="panel panel-default" style="width:100%">
-        <div class="panel-heading"><strong>Feature Navigation</strong> 
-            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}&compliance=compliant" class="btn btn-success">Compliant</a>  
-            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}&compliance=non-compliant" class="btn btn-danger">Non-Compliant</a>  
-            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}" class="btn btn-info">Clear</a>  
+        <div class="panel-heading"><strong>Feature Navigation</strong>
+            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}&compliance=compliant" class="btn btn-success">Compliant</a>
+            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}&compliance=non-compliant" class="btn btn-danger">Non-Compliant</a>
+            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}" class="btn btn-info">Clear</a>
         </div>
     <div id="navigation">
         <table>
@@ -203,4 +207,4 @@
     </table>
     </div>
 {% endfor %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_overview.html b/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_overview.html
index e6e741e6..8d6a1325 100644
--- a/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_overview.html
+++ b/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_overview.html
@@ -6,7 +6,7 @@
 {% block title %}Overview Reports{% endblock %}
 
 {% block breadcrumbs %}
-<li><a href="{% url 'plugins:nautobot_golden_config:configcompliance_overview' %}">Overview Reports</a></li>  
+<li><a href="{% url 'plugins:nautobot_golden_config:configcompliance_overview' %}">Overview Reports</a></li>
 {% block extra_breadcrumbs %}{% endblock extra_breadcrumbs %}
 {% endblock breadcrumbs %}
 
@@ -74,5 +74,6 @@ <h3 class="text-center m-2 p-3">Feature Summary</h3>
 {% table_config_form table table_name="ObjectTable" %}
 {% endblock %}
 {% block javascript %}
+{{ block.super }}
 <script src="{% static 'js/tableconfig.js' %}"></script>
 {% endblock %}
diff --git a/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_retrieve.html b/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_retrieve.html
index d3fb5921..e544d072 100644
--- a/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_retrieve.html
+++ b/nautobot_golden_config/templates/nautobot_golden_config/configcompliance_retrieve.html
@@ -2,13 +2,7 @@
 {% load helpers %}
 {% load static %}
 
-{% block content_left_page %}
-<script src="{% static 'clipboard.js-2.0.9/clipboard.min.js' %}"></script>
-<script>    
-    var clipboard = new ClipboardJS('.btn');
-    clipboard.on('success', function (e) {});
-    clipboard.on('error', function (e) {});
-</script>
+{% block extra_styles %}
 <style>
     #config-output pre {
         white-space: pre-wrap;       /* CSS 2.1 */
@@ -18,6 +12,9 @@
         word-wrap: break-word;       /* IE >= 5.5 */
     }
 </style>
+{% endblock extra_styles %}
+
+{% block content_left_page %}
     <div id="config-output" class="panel panel-default">
         <div class="panel-heading">
             <strong>Details</strong>
@@ -90,4 +87,13 @@
     </div>
     {% include 'inc/custom_fields_panel.html' %}
     {% include 'inc/relationships_panel.html' %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
+{% block javascript %}
+{{ block.super }}
+<script>
+    var clipboard = new ClipboardJS('.btn');
+    clipboard.on('success', function (e) {});
+    clipboard.on('error', function (e) {});
+</script>
+{% endblock javascript %}
diff --git a/nautobot_golden_config/templates/nautobot_golden_config/configplan_create.html b/nautobot_golden_config/templates/nautobot_golden_config/configplan_create.html
index e7aecf8c..55dca93c 100644
--- a/nautobot_golden_config/templates/nautobot_golden_config/configplan_create.html
+++ b/nautobot_golden_config/templates/nautobot_golden_config/configplan_create.html
@@ -47,6 +47,7 @@
 {% endblock %}
 
 {% block javascript %}
+{{ block.super }}
 <script src="{% static 'toggle_fields.js' %}"></script>
 <script src="{% static 'run_job.js' %}"></script>
 <script>
diff --git a/nautobot_golden_config/templates/nautobot_golden_config/configplan_retrieve.html b/nautobot_golden_config/templates/nautobot_golden_config/configplan_retrieve.html
index 4c8460ad..41e1c5f7 100644
--- a/nautobot_golden_config/templates/nautobot_golden_config/configplan_retrieve.html
+++ b/nautobot_golden_config/templates/nautobot_golden_config/configplan_retrieve.html
@@ -1,8 +1,8 @@
 {% extends 'generic/object_detail.html' %}
 {% load helpers %}
 
-{% block content_left_page %}
-    <style> 
+{% block extra_styles %}
+    <style>
         .table-wrapper{
         display: block;
         overflow-x: auto;
@@ -10,7 +10,9 @@
         width: 100%;
     }
     </style>
+{% endblock extra_styles %}
 
+{% block content_left_page %}
     <div class="panel panel-default">
         <div class="panel-heading">
             <strong>Config Plan Details</strong>
diff --git a/nautobot_golden_config/templates/nautobot_golden_config/generate_intended_config.html b/nautobot_golden_config/templates/nautobot_golden_config/generate_intended_config.html
index d74e62a2..bcf27eac 100644
--- a/nautobot_golden_config/templates/nautobot_golden_config/generate_intended_config.html
+++ b/nautobot_golden_config/templates/nautobot_golden_config/generate_intended_config.html
@@ -4,10 +4,40 @@
 {% load static %}
 
 {% block extra_styles %}
+<link rel="stylesheet" type="text/css" href="{% static 'nautobot_golden_config/diff2html-3.4.43/diff2html.min.css' %}"/>
 <style type="text/css">
+    .d2h-tag {
+        display: none;
+    }
+    .d2h-file-name {
+        visibility: hidden;
+    }
+    .d2h-moved {
+        visibility: hidden;
+    }
+    .d2h-file-list-title {
+        display: none;
+    }
     .button-container {
         margin-bottom: 24px;
     }
+    pre:has(code) {
+        padding: 0;
+    }
+    pre code {
+        display: block;
+        height: 50vh;
+        overflow: auto;
+        resize: vertical;
+        word-wrap: normal;
+        overflow-wrap: normal;
+        word-break: normal;
+        white-space: pre;
+        padding: 11.5px;
+    }
+    .nav-tabs li.disabled a {
+        pointer-events: none;
+    }
 </style>
 {% endblock extra_styles %}
 
@@ -23,7 +53,7 @@
                     <a href="{% url 'plugins:nautobot_golden_config:goldenconfig_list' %}">Config Overview</a> page.
                     </p>
                     <p>
-                    This will render the configuration for the selected device using Jinja templates from the golden config <code>jinja_repository</code>
+                    This will render the configuration for the selected device using Jinja templates from the Golden Config <code>jinja_repository</code>
                     Git repository for that device.
                     This feature allows developers to test their configuration templates without running a full "intended configuration" job. See the
                     <a href="{% static 'nautobot_golden_config/docs/user/app_feature_intended.html' %}#developing-intended-configuration-templates">
@@ -32,27 +62,45 @@
                     </p>
                     <p>
                     <strong>Note:</strong>
-                    This will perform a <code>git pull</code> on the golden config Jinja template repository to ensure the latest templates are used.
+                    This will fetch the latest templates from the Golden Config Jinja template repository.
                     </p>
                     {% render_field form.device %}
-                    {% render_field form.git_repository %}
+                    {% render_field form.graphql_query %}
                 </div>
             </div>
             <div class="button-container text-right">
                 <button type="submit" class="btn btn-primary">Render</button>
-                <a href="{{ return_url }}" class="btn btn-default">Cancel</a>
             </div>
         </div>
         <div class="col-lg-6 col-md-6">
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Intended Configuration</strong>
-                    <button type="button" class="btn btn-inline btn-default copy-rendered-config" data-clipboard-target="#rendered_config">
+                    <button type="button" class="btn btn-inline btn-default copy-rendered-config" data-clipboard-target="#id_rendered_config_tabs .active pre code">
                         <span class="mdi mdi-content-copy"></span>
                     </button>
                 </div>
                 <div class="panel-body">
-                    <textarea readonly="readonly" cols="40" rows="10" class="form-control" placeholder="Rendered Config" id="rendered_config"></textarea>
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li role="presentation" class="active" id="id_intended_config_tab"><a href="#id_intended_config_tab_content" aria-controls="id_rendered_config_tabs" role="tab" data-toggle="tab">Configuration</a></li>
+                        <li role="presentation" class="disabled" id="id_graphql_data_tab"><a href="#id_graphql_data_tab_content" aria-controls="id_graphql_data_tab_content" role="tab" data-toggle="tab">GraphQL Data</a></li>
+                        <li role="presentation" class="disabled" id="id_diff_tab"><a href="#id_diff_tab_content" aria-controls="id_diff_tab_content" role="tab" data-toggle="tab">Diff</a></li>
+                    </ul>
+                    <div class="tab-content" id="id_rendered_config_tabs">
+                        <div class="tab-pane active" id="id_intended_config_tab_content">
+                            {% comment %}
+                            The attributes `contenteditable="true"` and `onbeforeinput="return false"` are used
+                            to let the <code> block be selectable but not editable, emulating a textarea but supporting nested html tags.
+                            {% endcomment %}
+                            <pre><code id="id_rendered_config_code_block" contenteditable="true" onbeforeinput="return false"></code></pre>
+                        </div>
+                        <div class="tab-pane" id="id_graphql_data_tab_content">
+                            <pre><code class="language-json" id="id_graphql_data_code_block" contenteditable="true" onbeforeinput="return false"></code></pre>
+                        </div>
+                        <div class="tab-pane" id="id_diff_tab_content">
+                            <div id="id_diff_render"></div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -62,20 +110,74 @@
 
 {% block javascript %}
     {{ block.super }}
+    <script type="text/javascript" src="{% static 'nautobot_golden_config/diff2html-3.4.43/diff2html.min.js' %}"></script>
     <script>
+        // When a device is selected, populate the GraphQL query field with the default query for that device
+        async function handleDeviceFieldSelect(event) {
+            const device_id = event.params.data.id;
+            const goldenconfigsettings_url = "{% url 'plugins-api:nautobot_golden_config-api:goldenconfigsetting-list' %}";
+
+            // fetch the golden config settings for the device
+            const data = {device_id: device_id, depth: 1};
+            const query_params = new URLSearchParams(data).toString();
+            const response = await fetch(goldenconfigsettings_url + "?" + query_params, {
+                method: "GET",
+                headers: {"Content-Type": "application/json"}
+            });
+            const responseData = await response.json();
+
+            // set the graphql query field to the default query for the device
+            if (response.ok && responseData.count > 0) {
+                const graphql_query = responseData.results[0]?.sot_agg_query;
+
+                // Check if the option for the GraphQL query already exists
+                if ($("#id_graphql_query").find("option[value='" + graphql_query.id + "']").length) {
+                    $("#id_graphql_query").val(graphql_query.id).trigger("change");
+
+                // Otherwise create a new Option and select it
+                } else {
+                    var newOption = new Option(graphql_query.display, graphql_query.id, true, true);
+                    $("#id_graphql_query").append(newOption).trigger("change");
+                }
+            }
+        }
+
+        // jQuery used here because it is required for select2 events
+        $("#id_device").on("select2:select", handleDeviceFieldSelect);
+
+        // Initialize the copy to clipboard button
         new ClipboardJS('.copy-rendered-config');
+
+        // Sanitize a string for display in a code block by replacing HTML tags with character references
         const sanitize = function(string) {
             return string.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
         };
+
+        // Custom form submission handling
         async function handleFormSubmit(event) {
             event.preventDefault(); // Prevent default form submission
 
+            const rendered_config_code_block = document.getElementById("id_rendered_config_code_block");
+            const device_id = document.getElementById("id_device").value;
+            const graphql_query_id = document.getElementById("id_graphql_query").value;
+            const url = "{% url 'plugins-api:nautobot_golden_config-api:generate_intended_config' %}";
+            const graphql_data_tab = document.getElementById("id_graphql_data_tab");
+            const graphql_data_code_block = document.getElementById("id_graphql_data_code_block");
+            const diff_tab = document.getElementById("id_diff_tab");
+            const diff_render_div = document.getElementById("id_diff_render");
+
             try {
-                const rendered_config = document.getElementById("rendered_config");
-                rendered_config.innerHTML = "Loading...";
-                const device = document.getElementById("id_device").value;
-                const url = "{% url 'plugins-api:nautobot_golden_config-api:generate_intended_config' %}";
-                const data = {device_id: device};
+                rendered_config_code_block.innerHTML = "Loading...";
+
+                // switch to the intended config tab and disable the graphql data and diff tabs
+                $("#id_intended_config_tab a").tab("show");
+                graphql_data_tab.classList.add("disabled");
+                graphql_data_tab.classList.remove("active");
+                diff_tab.classList.add("disabled");
+                diff_tab.classList.remove("active");
+
+                // fetch the intended config
+                const data = {device_id: device_id, graphql_query_id: graphql_query_id};
                 const query_params = new URLSearchParams(data).toString();
                 const response = await fetch(url + "?" + query_params, {
                     method: "GET",
@@ -84,12 +186,36 @@
                 const responseData = await response.json();
                 if (!response.ok) {
                     const msg = responseData.detail ? responseData.detail : response.statusText;
-                    rendered_config.innerHTML = sanitize(`An error occurred:\n\n${msg}`);
+                    rendered_config_code_block.innerHTML = sanitize(`An error occurred:\n\n${msg}`);
                 } else {
-                    rendered_config.innerHTML = sanitize(responseData.intended_config);
+                    // populate the rendered config
+                    rendered_config_code_block.innerHTML = sanitize(responseData.intended_config);
+
+                    // populate and syntax highlight the graphql data
+                    graphql_data_code_block.innerHTML = JSON.stringify(responseData.graphql_data, null, 4);
+                    delete graphql_data_code_block.dataset.highlighted;
+                    hljs.highlightElement(graphql_data_code_block);
+
+                    // render the diff
+                    if (responseData.diff == null) {
+                        diff_render_div.innerHTML = "<p>No intended configuration available to diff against. You may need to run the intended configuration job first.</p>";
+                    // output a message if no diff
+                    } else if (responseData.diff === "") {
+                        diff_render_div.innerHTML = "<p>No changes detected.</p>";
+                    } else {
+                        diff_render_div.innerHTML = Diff2Html.html(responseData.diff, {
+                            drawFileList: true,
+                            matching: "lines",
+                            outputFormat: "line-by-line",
+                        });
+                    }
+
+                    // enable the graphql data and diff tabs
+                    graphql_data_tab.classList.remove("disabled");
+                    diff_tab.classList.remove("disabled");
                 }
             } catch (error) {
-                rendered_config.innerHTML = sanitize(`An error occurred:\n\n${error.message}`);
+                rendered_config_code_block.innerHTML = sanitize(`An error occurred:\n\n${error.message}`);
             }
         }
     </script>
diff --git a/nautobot_golden_config/templates/nautobot_golden_config/goldenconfig_detailsmodal.html b/nautobot_golden_config/templates/nautobot_golden_config/goldenconfig_detailsmodal.html
index e895377e..ebbb17d2 100644
--- a/nautobot_golden_config/templates/nautobot_golden_config/goldenconfig_detailsmodal.html
+++ b/nautobot_golden_config/templates/nautobot_golden_config/goldenconfig_detailsmodal.html
@@ -2,8 +2,7 @@
 <!-- Reference https://cdn.jsdelivr.net/npm/diff2html/bundles/ and obtain files and version folder name -->
 <link rel="stylesheet" type="text/css" href="{% static 'nautobot_golden_config/diff2html-3.4.43/diff2html.min.css' %}"/>
 <script type="text/javascript" src="{% static 'nautobot_golden_config/diff2html-3.4.43/diff2html.min.js' %}"></script>
-<script src="{% static 'clipboard.js-2.0.9/clipboard.min.js' %}"></script>
-<script>    
+<script>
     var clipboard = new ClipboardJS('.btn');
     clipboard.on('success', function (e) {});
     clipboard.on('error', function (e) {});
@@ -15,7 +14,10 @@
     }
     .d2h-file-collapse {
         display:none;
-    } 
+    }
+    #diffoutput {
+        display: none;
+    }
 </style>
 <h1>{{ title_name }} - {{ device_name }}
     {% if format != 'diff' %}
@@ -32,7 +34,7 @@ <h1>{{ title_name }} - {{ device_name }}
         {% if format in 'json,yaml' %}
             <pre id="{{ title_name|slugify }}_{{ device_name|slugify }}">{{ output }}</pre>
         {% elif format == 'diff' %}
-            <div id="diffoutput" value="{{ output }}"></div>
+            <div id="diffoutput">{{ output }}</div>
             <div id="diffrender"></div>
         {% else %}
             <pre id="{{ title_name|slugify }}_{{ device_name|slugify }}">{{ output }}</pre>
@@ -40,28 +42,20 @@ <h1>{{ title_name }} - {{ device_name }}
     </div>
 </div>
 <script type="text/javascript">
-    var str_input = document.getElementById("diffoutput").getAttribute("value");
-    var isModal = "{{ is_modal }}";
-    if (isModal === "True") {
-        var diffHtml = Diff2Html.html(str_input, {
+    var is_modal = {{ is_modal|lower }};
+    async function renderDiff() {
+        const str_input = document.getElementById("diffoutput").innerText;
+        const outputFormat = is_modal ? "line-by-line" : "side-by-side";
+        const diffHtml = Diff2Html.html(str_input, {
             drawFileList: true,
             matching: 'lines',
-            outputFormat: 'line_by_line',
-            }
-        )
-        // TODO: Fixed, but didn't update querySelectorAll
-        let elements = document.querySelectorAll('#diffrender');
-        elements.forEach((element) => {
-            element.innerHTML = diffHtml;
-        });    
-    } else {
-        document.addEventListener('DOMContentLoaded', () => {
-            var diffHtml = Diff2Html.html(str_input, {
-                drawFileList: true,
-                matching: 'lines',
-                outputFormat: 'side-by-side',
-            });
-        document.getElementById('diffrender').innerHTML = diffHtml;
+            outputFormat: outputFormat,
         });
+        document.getElementById('diffrender').innerHTML = diffHtml;
+    }
+    if (is_modal) {
+        renderDiff();
+    } else {
+        document.addEventListener("DOMContentLoaded", renderDiff);
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/nautobot_golden_config/templates/nautobot_golden_config/goldenconfig_list.html b/nautobot_golden_config/templates/nautobot_golden_config/goldenconfig_list.html
index 0c662ec3..f8a38c5c 100644
--- a/nautobot_golden_config/templates/nautobot_golden_config/goldenconfig_list.html
+++ b/nautobot_golden_config/templates/nautobot_golden_config/goldenconfig_list.html
@@ -5,8 +5,33 @@
 
 <h1>{% block title %}Configuration Overview{% endblock %}</h1>
 
+{% block extra_styles %}
+<style>
+    #actions {
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      vertical-align: left;
+    }
+    #actions #actiontext {
+      visibility: hidden;
+      background-color: LightSlateGray;
+      color: #ffffff;
+      text-align: center;
+      border-radius: 6px;
+      width:175px;
+      position:absolute;
+      z-index: 1;
+      top: -5px;
+      right: 110%;
+    }
+    #actions:hover #actiontext {
+      visibility: visible;
+    }
+</style>
+{% endblock extra_styles %}
+
 {% block buttons %}
-<script src="{% static 'jquery/jquery-3.6.0.min.js' %}"></script>
 <div class="btn-group">
     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Execute <span class="caret"></span>
@@ -29,7 +54,7 @@ <h1>{% block title %}Configuration Overview{% endblock %}</h1>
 {% endblock %}
 {% block content %}
   {{ block.super }}
-    
+
 <div class="modal fade" id="gcModal" role="dialog">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
@@ -45,31 +70,9 @@ <h1 class="modal-title">Golden Configuration</h4>
         </div>
     </div>
 </div>
-<style>
-    #actions {
-      position: relative;
-      display: inline-block;
-      text-align: center;
-      vertical-align: left;
-    }
-    #actions #actiontext {
-      visibility: hidden;
-      background-color: LightSlateGray;
-      color: #ffffff;
-      text-align: center;
-      border-radius: 6px;
-      width:175px;
-      position:absolute;
-      z-index: 1;
-      top: -5px;
-      right: 110%;
-    }
-    #actions:hover #actiontext {
-      visibility: visible;
-    }
-    </style>
 {% endblock %}
 {% block javascript %}
+{{ block.super }}
 <script src="{% static 'js/tableconfig.js' %}"></script>
 <script>
     $( document ).ready(function(){
@@ -87,4 +90,4 @@ <h1 class="modal-title">Golden Configuration</h4>
         $(this).css('cursor', 'pointer');
     });
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/nautobot_golden_config/tests/test_api.py b/nautobot_golden_config/tests/test_api.py
index 13855679..e8e0a3f1 100644
--- a/nautobot_golden_config/tests/test_api.py
+++ b/nautobot_golden_config/tests/test_api.py
@@ -6,13 +6,13 @@
 from django.contrib.auth import get_user_model
 from django.contrib.contenttypes.models import ContentType
 from django.urls import reverse
-from nautobot.core.testing import APITestCase, APIViewTestCases
+from nautobot.apps.testing import APITestCase, APIViewTestCases
 from nautobot.dcim.models import Device, Platform
 from nautobot.extras.models import DynamicGroup, GitRepository, GraphQLQuery, Status
 from rest_framework import status
 
 from nautobot_golden_config.choices import RemediationTypeChoice
-from nautobot_golden_config.models import ConfigPlan, GoldenConfigSetting, RemediationSetting
+from nautobot_golden_config.models import ConfigPlan, ConfigReplace, GoldenConfigSetting, RemediationSetting
 from nautobot_golden_config.tests.conftest import (
     create_config_compliance,
     create_device,
@@ -409,6 +409,65 @@ def setUpTestData(cls):
         }
 
 
+class ConfigReplaceAPITestCase(  # pylint: disable=too-many-ancestors
+    APIViewTestCases.CreateObjectViewTestCase,
+    APIViewTestCases.GetObjectViewTestCase,
+    APIViewTestCases.ListObjectsViewTestCase,
+    APIViewTestCases.UpdateObjectViewTestCase,
+    APIViewTestCases.DeleteObjectViewTestCase,
+    APIViewTestCases.NotesURLViewTestCase,
+):
+    """Test API for ConfigReplace."""
+
+    model = ConfigReplace
+
+    @classmethod
+    def setUpTestData(cls):
+        create_device_data()
+        platform = Device.objects.first().platform
+        for num in range(3):
+            ConfigReplace.objects.create(
+                name=f"test configreplace {num}",
+                platform=platform,
+                description="test description",
+                regex="^(.*)$",
+                replace="xyz",
+            )
+        cls.update_data = {
+            "name": "new name",
+            "platform": platform.pk,
+            "description": "new description",
+            "regex": "^NEW (.*)$",
+            "replace": "NEW replaced text",
+        }
+        cls.create_data = [
+            {
+                "name": "test configreplace 4",
+                "platform": platform.pk,
+                "description": "test description",
+                "regex": "^(.*)$",
+                "replace": "xyz",
+            },
+            {
+                "name": "test configreplace 5",
+                "platform": platform.pk,
+                "description": "test description",
+                "regex": "^(.*)$",
+                "replace": "xyz",
+            },
+            {
+                "name": "test configreplace 6",
+                "platform": platform.pk,
+                "description": "test description",
+                "regex": "^(.*)$",
+                "replace": "xyz",
+            },
+        ]
+        cls.bulk_update_data = {
+            "description": "new description",
+        }
+
+
 class GenerateIntendedConfigViewAPITestCase(APITestCase):
     """Test API for GenerateIntendedConfigView."""
 
@@ -567,9 +626,10 @@ def _generate_config(task, *args, **kwargs):
         self.assertTrue("detail" in response.data)
         self.assertEqual("Error trying to sync git repository", response.data["detail"])
 
-        # test jinja_repository not set
-        self.golden_config_setting.jinja_repository = None
+        # test no sot_agg_query on GoldenConfigSetting
+        self.golden_config_setting.sot_agg_query = None
         self.golden_config_setting.save()
+
         response = self.client.get(
             reverse("plugins-api:nautobot_golden_config-api:generate_intended_config"),
             data={"device_id": self.device.pk},
@@ -578,10 +638,10 @@ def _generate_config(task, *args, **kwargs):
 
         self.assertHttpStatus(response, status.HTTP_400_BAD_REQUEST)
         self.assertTrue("detail" in response.data)
-        self.assertEqual(response.data["detail"], "Golden Config settings jinja_repository not set")
+        self.assertEqual("Golden Config settings sot_agg_query not set", response.data["detail"])
 
-        # test no sot_agg_query on GoldenConfigSetting
-        self.golden_config_setting.sot_agg_query = None
+        # test jinja_repository not set
+        self.golden_config_setting.jinja_repository = None
         self.golden_config_setting.save()
 
         response = self.client.get(
@@ -592,7 +652,7 @@ def _generate_config(task, *args, **kwargs):
 
         self.assertHttpStatus(response, status.HTTP_400_BAD_REQUEST)
         self.assertTrue("detail" in response.data)
-        self.assertEqual("Golden Config settings sot_agg_query not set", response.data["detail"])
+        self.assertEqual(response.data["detail"], "Golden Config settings jinja_repository not set")
 
         # test no GoldenConfigSetting found for device
         GoldenConfigSetting.objects.all().delete()
diff --git a/nautobot_golden_config/tests/test_views.py b/nautobot_golden_config/tests/test_views.py
index 51eca381..937826b7 100644
--- a/nautobot_golden_config/tests/test_views.py
+++ b/nautobot_golden_config/tests/test_views.py
@@ -9,8 +9,8 @@
 from django.test import RequestFactory, override_settings
 from django.urls import reverse
 from lxml import html
-from nautobot.core.models.querysets import RestrictedQuerySet
-from nautobot.core.testing import TestCase, ViewTestCases
+from nautobot.apps.models import RestrictedQuerySet
+from nautobot.apps.testing import TestCase, ViewTestCases
 from nautobot.dcim.models import Device
 from nautobot.extras.models import Relationship, RelationshipAssociation, Status
 
@@ -102,57 +102,43 @@ def test_config_compliance_details_sotagg_no_error(
         mock_graph_ql_query.assert_called()
 
 
-@override_settings(EXEMPT_VIEW_PERMISSIONS=["*"])
-class ConfigReplaceListViewTestCase(TestCase):
-    """Test ConfigReplaceListView."""
+class ConfigReplaceUIViewSetTestCase(ViewTestCases.PrimaryObjectViewTestCase):  # pylint: disable=too-many-ancestors
+    """Test ConfigReplaceUIViewSet."""
+
+    model = models.ConfigReplace
 
-    _csv_headers = "name,platform,description,regex,replace"
-    _entry_name = "test name"
-    _entry_description = "test description"
-    _entry_regex = "^startswiththeend$"
-    _entry_replace = "<dontlookatme>"
+    bulk_edit_data = {
+        "description": "new description",
+    }
 
     @classmethod
     def setUpTestData(cls):
         """Set up base objects."""
         create_device_data()
-        cls._delete_test_entry()
-        models.ConfigReplace.objects.create(
-            name=cls._entry_name,
-            platform=Device.objects.first().platform,
-            description=cls._entry_description,
-            regex=cls._entry_regex,
-            replace=cls._entry_replace,
-        )
-
-    @property
-    def _url(self):
-        return reverse("plugins:nautobot_golden_config:configreplace_list")
-
-    @classmethod
-    def _delete_test_entry(cls):
-        try:
-            entry = models.ConfigReplace.objects.get(name=cls._entry_name)
-            entry.delete()
-        except models.ConfigReplace.DoesNotExist:
-            pass
-
-    def test_configreplace_import(self):
-        self._delete_test_entry()
-        self.add_permissions("nautobot_golden_config.add_configreplace")
         platform = Device.objects.first().platform
-        import_entry = (
-            f"{self._entry_name},{platform.id},{self._entry_description},{self._entry_regex},{self._entry_replace}"
+        for num in range(3):
+            models.ConfigReplace.objects.create(
+                name=f"test configreplace {num}",
+                platform=platform,
+                description="test description",
+                regex="^(.*)$",
+                replace="xyz",
+            )
+        cls.form_data = {
+            "name": "new name",
+            "platform": platform.pk,
+            "description": "new description",
+            "regex": "^NEW (.*)$",
+            "replace": "NEW replaced text",
+        }
+
+        # For compatibility with Nautobot lower than v2.2.0
+        cls.csv_data = (
+            "name,regex,replace,platform",
+            f"test configreplace 4,^(.*)$,xyz,{platform.pk}",
+            f"test configreplace 5,^(.*)$,xyz,{platform.pk}",
+            f"test configreplace 6,^(.*)$,xyz,{platform.pk}",
         )
-        form_data = {"csv_data": f"{self._csv_headers}\n{import_entry}"}
-        response = self.client.post(f"{self._url}import/", data=form_data, follow=True)
-        last_entry = models.ConfigReplace.objects.last()
-        self.assertEqual(response.status_code, 200)
-        self.assertEqual(last_entry.name, self._entry_name)
-        self.assertEqual(last_entry.platform, platform)
-        self.assertEqual(last_entry.description, self._entry_description)
-        self.assertEqual(last_entry.regex, self._entry_regex)
-        self.assertEqual(last_entry.replace, self._entry_replace)
 
 
 class GoldenConfigListViewTestCase(TestCase):
diff --git a/pyproject.toml b/pyproject.toml
index 893391a5..4ceb8280 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "nautobot-golden-config"
-version = "2.2.1"
+version = "2.2.2"
 description = "An app for configuration on nautobot"
 authors = ["Network to Code, LLC <opensource@networktocode.com>"]
 license = "Apache-2.0"