diff --git a/api/main.py b/api/main.py
index 27c9690f6..d871860bf 100644
--- a/api/main.py
+++ b/api/main.py
@@ -714,6 +714,21 @@ async def stats(user: User = Depends(get_current_superuser)):
     return await pubsub.subscription_stats()
 
 
+@app.get('/viewer')
+async def viewer():
+    """Serve simple HTML page to view the API /static/viewer.html
+    Set various no-cache tag we might update it often"""
+    with open('api/viewer.html', 'r', encoding='utf-8') as file:
+        # set header to text/html and no-cache stuff
+        hdr = {
+            'Content-Type': 'text/html',
+            'Cache-Control': 'no-cache, no-store, must-revalidate',
+            'Pragma': 'no-cache',
+            'Expires': '0'
+        }
+        return PlainTextResponse(file.read(), headers=hdr)
+
+
 versioned_app = VersionedFastAPI(
         app,
         version_format='{major}',
diff --git a/api/viewer.html b/api/viewer.html
new file mode 100644
index 000000000..851247d03
--- /dev/null
+++ b/api/viewer.html
@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>KernelCIv2 API Viewer</title>
+    <!-- add vertical divider at menu -->
+    <style>
+        body {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            color: #333333;
+            background-color: #ffffff;
+            padding: 10px;
+        }
+        #menu {
+            background-color: #f5f5f5;
+            border-bottom: 1px solid #e5e5e5;
+            border-top: 1px solid #e5e5e5;
+            margin-bottom: 20px;
+            padding: 10px 0;
+        }
+        #menu a {
+            color: #999999;
+            font-size: 14px;
+            font-weight: bold;
+            margin-right: 10px;
+            text-decoration: none;
+            /* Add light grey box for each menu item */
+            padding: 10px;
+            border: 1px solid #e5e5e5;
+            border-radius: 4px;
+
+        }
+        #menu a:hover {
+            color: #333333;
+            text-decoration: none;            
+        }
+        #menu a:active {
+            color: #333333;
+            text-decoration: none;
+        }
+        #menu a:focus {
+            color: #333333;
+            text-decoration: none;
+        }        
+        #requestinfo {
+            background-color: #f5f5f5;
+            border-bottom: 1px solid #e5e5e5;
+            border-top: 1px solid #e5e5e5;
+            margin-bottom: 20px;
+            padding: 10px 0;
+        }
+        #requestinfo input {
+            font-size: 14px;
+            font-weight: bold;
+            margin-right: 10px;
+            text-decoration: none;
+        }
+        #requestinfo button {
+            font-size: 14px;
+            font-weight: bold;
+            margin-right: 10px;
+            text-decoration: none;
+        }
+        #miscbuttons {
+            background-color: #f5f5f5;
+            border-bottom: 1px solid #e5e5e5;
+            border-top: 1px solid #e5e5e5;
+            margin-bottom: 20px;
+            padding: 10px 0;
+        }
+        .nodesearch {
+            border-collapse: collapse;
+            border-spacing: 1;
+            width: 100%;
+            border: 1px solid #ddd;
+        }
+        .nodesearch th, .nodesearch td {
+            text-align: left;
+            padding: 8px;
+        }
+        .nodesearch tr:nth-child(even){background-color: #f2f2f2}
+        .nodesearch tr:hover {background-color: #ddd;}
+        .nodesearch th {
+            background-color: #4CAF50;
+            color: white;
+        }
+    </style>
+    <script>
+        var pagebaseurl;
+        var apiurl;
+        var weekago = new Date();
+        weekago.setDate(weekago.getDate() - 7);
+        // format: 2024-01-12T12:21:00.421000
+        var weekagostring = weekago.toISOString().split(".")[0];
+        var mainmenu = [
+            {
+                "name": "Home",
+                "suffix": "",
+            },
+            {
+                "name": "Node",
+                "suffix": "?node_id=",
+            },
+            {
+                "name": "Search",
+                "suffix": "?search=",
+            },
+            {
+                "name": "Last week Checkouts",
+                "suffix": "?search=kind%3Dcheckout&search=created%3E" + weekagostring,
+            },
+        ];
+
+        function fancydisplayjson(jsontext) {
+            // add indentation to json text
+            var json = JSON.parse(jsontext);
+            var jsonhtml = JSON.stringify(json, null, 2);
+            return jsonhtml;
+        }
+
+        function cleardivs() {
+            // hide&clean nodeinfo and requestinfo
+            var nodeinfo = document.getElementById("nodeinfo");
+            nodeinfo.innerHTML = "";
+            var requestinfo = document.getElementById("requestinfo");
+            requestinfo.innerHTML = "";
+            var miscbuttons = document.getElementById("miscbuttons");
+            miscbuttons.innerHTML = "";
+        }
+
+        function miscclick(event) {
+            event.preventDefault();
+            var fullurl = pagebaseurl + this.getAttribute("href");
+            window.history.pushState("", "", fullurl);
+            parseParameters(fullurl);
+            console.log("miscclick fullurl: " + fullurl);
+        }
+
+        function addmiscbuttons(data) {
+            var miscbuttons = document.getElementById("miscbuttons");
+            var miscbuttonshtml = "";
+            // do we have parent? then add button to display parent
+            if (data.parent != null) {
+                miscbuttonshtml += "<button id=\"parentbutton\" class=\"misc\" href=\"?node_id=" + data.parent + "\">Parent</button>";
+            }
+            // search for children, ?search=parent=65b09399b198ea6cb7bbffda
+            var url = apiurl + "/latest/nodes?search=parent=" + data.id;
+            var urlencoded_condition = encodeURIComponent("parent=" + data.id);
+            miscbuttonshtml += "<button id=\"childrenbutton\" class=\"misc\" href=\"?search=" + urlencoded_condition + "\">Children</button>";
+
+            // add miscbuttons
+            miscbuttons.innerHTML = miscbuttonshtml;
+
+            // add onclick event listener to all misc buttons
+            links = document.getElementsByClassName("misc");
+            for (var i = 0; i < links.length; i++) {
+                links[i].addEventListener("click", miscclick);
+            };
+        }
+
+
+        function displaynode(nodeid) {
+            // hide requestinfo
+            var requestinfo = document.getElementById("requestinfo");
+            requestinfo.innerHTML = "";
+            requestinfo.style.display = "none";
+            // request API for node info
+            // /latest/node/{node_id}
+            var url = apiurl + "/latest/node/" + nodeid;
+            var request = new XMLHttpRequest();
+            request.open('GET', url, true);
+            request.onload = function() {
+                console.log("request.status: " + request.status);
+                if (request.status >= 200 && request.status < 400) {
+                    // Success!
+                    var data = JSON.parse(request.responseText);
+                    addmiscbuttons(data);
+                    var nodeinfo = document.getElementById("nodeinfo");
+                    var nodeinfohtml = "";
+                    // add pre tag to display json
+                    nodeinfohtml += "<pre>";
+                    nodeinfohtml += fancydisplayjson(request.responseText);
+                    nodeinfohtml += "</pre>";
+                    nodeinfo.innerHTML = nodeinfohtml;
+                    console.log(data);
+                }
+            };
+            request.onerror = function() {
+                // There was a connection error of some sort
+            };
+            request.send();
+        }
+
+    /*
+    As a syntactic convenience, if the operator matches one of >, <, >=, <=, !=
+    then the corresponding API operator '__gt', '__lt', '__gte', '__lte',
+    '__ne' is added to the key name automatically.  Spaces can also be used
+    around the operators, although this typically means adding double quotes on
+    the command line around each attribute.  As such, the example used
+    previously is equivalent to "score >= 100".
+    """
+    operators = {
+        '>': '__gt',
+        '<': '__lt',
+        '>=': '__gte',
+        '<=': '__lte',
+        '!=': '__ne',
+        '=': '',
+    }
+        // on python we split by using regex
+            pattern = re.compile(r'^([.a-zA-Z0-9_-]+) *([<>!=]+) *(.*)')
+        */
+        function convert_condition(condition) {
+            var operators = {
+                '>': '__gt=',
+                '<': '__lt=',
+                '>=': '__gte=',
+                '<=': '__lte=',
+                '!=': '__ne=',
+                '=': '=',
+            }
+            //var pattern = /^([.a-zA-Z0-9_-]+) *([<>!=]+) *(.*)/;
+            var pattern = /^([.a-zA-Z0-9_-]+)([<>!=]+)(.*)/;
+            var match = pattern.exec(condition);
+            if (match == null) {
+                console.log("condition: " + condition + " does not match");
+                return condition;
+            }
+            var key = match[1];
+            var op = match[2];
+            var value = match[3];
+            if (op in operators) {
+                op = operators[op];
+            }
+            console.log("key: " + key + " op: " + op + " value: " + value);
+            return key + op + value;
+        }
+
+        function display_search(data) {
+            cleardivs();
+            var nodeinfo = document.getElementById("nodeinfo");
+            var nodeinfohtml = "<table class=\"nodesearch\">";
+            var thnames = ["id", "kind", "name", "state", "result", "created"];
+            // is data.kernel_revision present? then add to thnames: 
+            // data.kernel_revision.tree, data.kernel_revision.branch, data.kernel_revision.commit
+            if (data.items.length > 0) {
+                if (data.items[0].data.kernel_revision != null) {
+                    thnames.push("tree");
+                    thnames.push("branch");
+                    thnames.push("commit");
+                }
+            }
+            // header
+            nodeinfohtml += "<tr>";
+            for (var i = 0; i < thnames.length; i++) {
+                nodeinfohtml += "<th>" + thnames[i] + "</th>";
+            }
+            nodeinfohtml += "</tr>";
+            // data            
+            for (var i = 0; i < data.items.length; i++) {
+                node = data.items[i];
+                nodeinfohtml += "<tr>";
+                nodeinfohtml += "<td><a href=\"?node_id=" + node.id + "\">" + node.id + "</a></td>";
+                nodeinfohtml += "<td>" + node.kind + "</td>";
+                nodeinfohtml += "<td>" + node.name + "</td>";
+                nodeinfohtml += "<td>" + node.state + "</td>";
+                nodeinfohtml += "<td>" + node.result + "</td>";
+                nodeinfohtml += "<td>" + node.created + "</td>";
+                if (node.data.kernel_revision != null) {
+                    nodeinfohtml += "<td>" + node.data.kernel_revision.tree + "</td>";
+                    nodeinfohtml += "<td>" + node.data.kernel_revision.branch + "</td>";
+                    nodeinfohtml += "<td>" + node.data.kernel_revision.commit + "</td>";
+                }
+                nodeinfohtml += "</tr>";
+            }
+            nodeinfohtml += "</table>";
+            nodeinfo.innerHTML = nodeinfohtml;
+        }
+
+        function process_search(conditions) {
+            // urldecode
+            //conditions = decodeURIComponent(conditions);
+            console.log("conditions: " + conditions + " number of conditions: " + conditions.length);
+            // group conditions for url
+            var url = apiurl + "/latest/nodes?";
+            // build url nodes?condition1&condition2&condition3
+            for (var i = 0; i < conditions.length; i++) {
+                dec = decodeURIComponent(conditions[i]);
+                url += convert_condition(dec);
+                if (i != conditions.length - 1) {
+                    url += "&";
+                }
+            }
+            // add limit=50
+            url += "&limit=250";
+            console.log("url: " + url);
+            // request API for node info
+            var request = new XMLHttpRequest();
+            request.open('GET', url, true);
+            request.onload = function() {
+                console.log("request.status: " + request.status);
+                if (request.status >= 200 && request.status < 400) {
+                    var data = JSON.parse(request.responseText);
+                    display_search(data);
+                    //nodeinfo = document.getElementById("nodeinfo");
+                    //nodeinfo.innerHTML = fancydisplayjson(request.responseText);
+                }
+            };
+            request.onerror = function() {
+                // There was a connection error of some sort
+            };
+            request.send();
+        }
+
+        function requestnodeid() {
+            // request in requestinfo input text field the node id with
+            // the following format: ?node_id=1
+            var requestinfo = document.getElementById("requestinfo");
+            var requestinfohtml = "";
+            requestinfohtml += "<input type=\"text\" id=\"nodeid\" value=\"\" placeholder=\"65b09399b198ea6cb7bbffda\">";
+            requestinfohtml += "<button id=\"nodeidbutton\"\">Request</button>";
+            requestinfo.innerHTML = requestinfohtml;
+            requestinfo.style.display = "block";
+            // add event listener to nodeidbutton
+            document.getElementById("nodeidbutton").addEventListener("click", function(event) {
+                event.preventDefault();
+                var nodeid = document.getElementById("nodeid").value;
+                var fullurl = pagebaseurl + "?node_id=" + nodeid;
+                // dont refresh, just change the url
+                window.history.pushState("", "", fullurl);
+                displaynode(nodeid);
+            });
+        }
+
+        function displayMenu() {
+            var menu = document.getElementById("menu");
+            var menuhtml = "";
+            for (var i = 0; i < mainmenu.length; i++) {
+                menuhtml += "<a class=\"menulink\" href=\"" + mainmenu[i].suffix + "\">" + mainmenu[i].name + "</a> ";
+            }
+            menu.innerHTML = menuhtml;
+            // add event listener to all menu links (by class)
+            links = document.getElementsByClassName("menulink");
+            for (var i = 0; i < links.length; i++) {
+                links[i].addEventListener("click", function(event) {
+                    event.preventDefault();
+                    var fullurl = pagebaseurl + this.getAttribute("href");
+                    window.history.pushState("", "", fullurl);
+                    parseParameters(fullurl);
+                });
+            };
+        }
+
+        function parseParameters(url) {
+            // parse the url and extract the parameters
+            var url = url.split("?")[1];
+            if (url == undefined) {
+                cleardivs();
+                return;
+            }
+            var parameters = url.split("&");
+            for (var i = 0; i < parameters.length; i++) {
+                var parameter = parameters[i].split("=");
+                if (parameter[0] == "node_id") {
+                    // if node_id is present, then display the node, if not then request it
+                    if (parameter[1] == "") {
+                        requestnodeid();
+                    } else {
+                        console.log("node_id: " + parameter[1]);
+                        displaynode(parameter[1]);
+                    }
+                    return;
+                }
+                if (parameter[0] == "search") {
+                    var conditions = [];
+                    for (var j = 0; j < parameters.length; j++) {
+                        var parameter = parameters[j].split("=");
+                        if (parameter[0] == "search") {
+                            conditions.push(parameter[1]);
+                        }
+                    }
+                    process_search(conditions);
+                    return;
+                }
+                // if we are here, then we have an unknown parameter
+                console.log("unknown parameter: " + parameter[0]);
+                alert("unknown parameter: " + parameter[0]);
+                cleardivs();
+            }
+        }
+
+        function onLoad() {
+            // do we have a node id in the url?
+            var url = window.location.href;
+            pagebaseurl = url.split("?")[0];
+            // api url is just remove /viewer
+            apiurl = pagebaseurl.replace("/viewer", "");
+            // do we have any parameters? then call parseParameters()
+            if (url.indexOf("?") != -1) {
+                parseParameters(url);
+            }
+            displayMenu();
+        }
+    </script>
+</head>
+<body onload="onLoad()">
+<!-- nice horizontal menu at top -->
+<div id="menu">
+</div>
+<div id="requestinfo"></div>
+<div id="miscbuttons"></div>
+<div id="nodeinfo"></div>
+</body>
+</html>
\ No newline at end of file
