diff --git a/app/models.py b/app/models.py
index 72d119aad6445148002c5aef9c956ce189188d7f..e8e236222d4697de3672d20d382ab9613c0ea37f 100644
--- a/app/models.py
+++ b/app/models.py
@@ -10,7 +10,6 @@ This module implements the models used in the app.
 
 """
 import ipaddress
-import json
 import string
 import qrcode
 import itertools
@@ -771,7 +770,7 @@ class AnsibleGroup(CreatedMixin, db.Model):
         d.update(
             {
                 "name": self.name,
-                "vars": json.dumps(self.vars),
+                "vars": self.vars,
                 "hosts": [str(host) for host in self.hosts],
             }
         )
@@ -858,7 +857,7 @@ class Host(CreatedMixin, db.Model):
                 "description": self.description,
                 "items": [str(item) for item in self.items],
                 "interfaces": [str(interface) for interface in self.interfaces],
-                "ansible_vars": json.dumps(self.ansible_vars),
+                "ansible_vars": self.ansible_vars,
                 "ansible_groups": [str(group) for group in self.ansible_groups],
             }
         )
diff --git a/app/static/js/groups.js b/app/static/js/groups.js
index fc05e518d56990d25c84e36edc38ca6016dcf07b..ae2007b9fde4291b17b621c53bd33e16417e00c2 100644
--- a/app/static/js/groups.js
+++ b/app/static/js/groups.js
@@ -30,10 +30,10 @@ $(document).ready(function() {
       },
       { data: 'vars',
         render: function(data, type, row) {
-          if ( data === "null" ) {
+          if ( data === null ) {
             return "";
           }
-          return '<pre>' + data + '</pre>';
+          return '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
         }
       },
       { data: 'hosts' }
diff --git a/tests/functional/test_api.py b/tests/functional/test_api.py
index fd2f294fb7356b970960994053334c83e91dc05d..7a04465e82af6f02e8e629d65a8b34ac6605b17f 100644
--- a/tests/functional/test_api.py
+++ b/tests/functional/test_api.py
@@ -1125,7 +1125,7 @@ def test_create_ansible_group_with_vars(client, admin_token):
     data = {"name": "mygroup", "vars": {"foo": "hello", "mylist": [1, 2, 3]}}
     response = post(client, f"{API_URL}/network/groups", data=data, token=admin_token)
     assert response.status_code == 201
-    assert response.json["vars"] == '{"foo": "hello", "mylist": [1, 2, 3]}'
+    assert response.json["vars"] == data["vars"]
     group = models.AnsibleGroup.query.filter_by(name="mygroup").first()
     assert group.vars == data["vars"]
 
@@ -1141,10 +1141,11 @@ def test_get_hosts(client, host_factory, readonly_token):
 
 
 def test_get_hosts_with_ansible_vars(client, host_factory, readonly_token):
-    host_factory(ansible_vars={"foo": "hello", "mylist": [1, 2, 3]})
+    vars = {"foo": "hello", "mylist": [1, 2, 3]}
+    host_factory(ansible_vars=vars)
     response = get(client, f"{API_URL}/network/hosts", token=readonly_token)
     assert response.status_code == 200
-    assert response.json[0]["ansible_vars"] == '{"foo": "hello", "mylist": [1, 2, 3]}'
+    assert response.json[0]["ansible_vars"] == vars
 
 
 def test_create_host(client, device_type_factory, user_token):
@@ -1220,9 +1221,9 @@ def test_create_host_with_ansible_vars(client, device_type_factory, user_token):
     }
     response = post(client, f"{API_URL}/network/hosts", data=data, token=user_token)
     assert response.status_code == 201
-    assert response.json["ansible_vars"] == '{"foo": "hello", "mylist": [1, 2, 3]}'
+    assert response.json["ansible_vars"] == data["ansible_vars"]
     host = models.Host.query.filter_by(name="my-host").first()
-    assert host.ansible_vars == {"foo": "hello", "mylist": [1, 2, 3]}
+    assert host.ansible_vars == data["ansible_vars"]
 
 
 def test_create_host_with_ansible_groups(