diff --git a/src/css/docs.css b/src/css/docs.css
deleted file mode 100644
index 46aa473..0000000
--- a/src/css/docs.css
+++ /dev/null
@@ -1,48 +0,0 @@
-body {
-    font-family: monospace, monospace;
-    background: #f9f9f9;
-    color: #222;
-    margin: 1rem;
-}
-
-h1,
-h2,
-h3 {
-    margin-top: 1.5rem;
-}
-
-pre {
-    background: #eee;
-    padding: 1rem;
-    overflow-x: auto;
-}
-
-table {
-    border-collapse: collapse;
-    width: 100%;
-    margin-top: 1rem;
-}
-
-th,
-td {
-    border: 1px solid #ccc;
-    padding: 0.5rem;
-    text-align: left;
-    vertical-align: top;
-}
-
-th {
-    background: #ddd;
-}
-
-.section {
-    margin-bottom: 2rem;
-}
-
-.key {
-    font-weight: bold;
-}
-
-.list {
-    margin: 0.25rem 0 1rem 1.5rem;
-}
diff --git a/src/middleware/hbs.js b/src/middleware/hbs.js
index 42f7ded..2e805ca 100644
--- a/src/middleware/hbs.js
+++ b/src/middleware/hbs.js
@@ -1,6 +1,8 @@
 // src/middleware/hbs.js
 const path = require("path");
 const exphbs = require("express-handlebars");
+const Handlebars = require("handlebars");
+
 const { registerHelpers } = require("../utils/hbsHelpers");
 const {
   VIEW_ENGINE,
@@ -10,6 +12,26 @@
   EXTENSION,
   RUNTIME_OPTIONS,
 } = require("../constants/hbsConstants");
+const renderObject = (obj) => {
+  if (typeof obj !== "object" || obj === null) {
+    return new Handlebars.SafeString(`<span>${String(obj)}</span>`);
+  }
+
+  if (Array.isArray(obj)) {
+    const items = obj
+      .map((item) => `<li>${Handlebars.escapeExpression(String(item))}</li>`)
+      .join("");
+    return new Handlebars.SafeString(`<ul>${items}</ul>`);
+  }
+
+  const entries = Object.entries(obj)
+    .map(([key, value]) => {
+      const renderedValue = renderObject(value);
+      return `<div class="doc-entry"><strong>${Handlebars.escapeExpression(key)}:</strong> ${renderedValue}</div>`;
+    })
+    .join("");
+  return new Handlebars.SafeString(`<div class="doc-object">${entries}</div>`);
+};
 
 const hbsMiddleware = (req, res, next) => {
   if (!req.app.get("view engine")) {
@@ -27,6 +49,7 @@
         json(context) {
           return JSON.stringify(context, null, 2);
         },
+        renderObject,
       },
       extname: EXTENSION,
       runtimeOptions: RUNTIME_OPTIONS,
diff --git a/src/routes/docs.js b/src/routes/docs.js
index a9811d2..ffdfc69 100644
--- a/src/routes/docs.js
+++ b/src/routes/docs.js
@@ -7,6 +7,7 @@
 const router = express.Router();
 const docsContext = require("../utils/docsContext");
 const HttpError = require("../utils/HttpError");
+const { baseUrl } = require("../utils/baseUrl");
 
 const docsDir = path.join(__dirname, "../../content/docs");
 let docsCache = {}; // { [path]: { modules: {}, crossCuttingSummary: {} } }
@@ -46,7 +47,7 @@
 
   const context = await docsContext(req.isAuthenticated, {
     layout: "docs",
-    docPath: "/docs/summary",
+    docPath: baseUrl + "/docs/summary",
     docModule: null,
   });
 
@@ -63,7 +64,7 @@
 
   const context = await docsContext(req.isAuthenticated, {
     layout: "docs",
-    docPath: "/docs" + docPath,
+    docPath: baseUrl + "/docs" + docPath,
     docModule: null,
   });
 
diff --git a/src/utils/docsContext.js b/src/utils/docsContext.js
index afbe6f5..db407dc 100644
--- a/src/utils/docsContext.js
+++ b/src/utils/docsContext.js
@@ -61,7 +61,7 @@
     originCountry: process.env.COUNTRY,
     navLinks: qualifiedNavLinks,
     baseUrl,
-    docsMenu,
+    paths: docsMenu,
     isAuthenticated,
     showFooter: true,
     showSidebar: true,
diff --git a/src/views/docs/index.handlebars b/src/views/docs/index.handlebars
index c97da1b..bd25b1f 100644
--- a/src/views/docs/index.handlebars
+++ b/src/views/docs/index.handlebars
@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="{{baseUrl}}/static/css/docs.css" />
 {{/section}}
 {{#section "scripts"}}
-<script src="{{baseUrl}}"></script>
+<script src="{{baseUrl}}/static/js/docs.js"></script>
 {{/section}}
 <h1>Documentation Files</h1>
 <ul>
diff --git a/src/views/docs/module.handlebars b/src/views/docs/module.handlebars
index 78b9fbf..657bde1 100644
--- a/src/views/docs/module.handlebars
+++ b/src/views/docs/module.handlebars
@@ -3,10 +3,10 @@
 <link rel="stylesheet" href="{{baseUrl}}/static/css/docs.css" />
 {{/section}}
 {{#section "scripts"}}
-<script src="{{baseUrl}}"></script>
+<script src="{{baseUrl}}/static/js/docs.js"></script>
 {{/section}}
 <h1>Documentation: {{path}} / {{module}}</h1>
 
-<pre>{{json moduleDoc}}</pre>
-
-{{!-- json helper needed to pretty print object --}}
+<div class="doc-content">
+    {{#renderObject moduleDoc}}{{item}}{{/renderObject}}
+</div>
diff --git a/src/views/docs/summary.handlebars b/src/views/docs/summary.handlebars
index 32ba766..35a7810 100644
--- a/src/views/docs/summary.handlebars
+++ b/src/views/docs/summary.handlebars
@@ -3,7 +3,7 @@
 <link rel="stylesheet" href="{{baseUrl}}/static/css/docs.css" />
 {{/section}}
 {{#section "scripts"}}
-<script src="{{baseUrl}}"></script>
+<script src="{{baseUrl}}/static/js/docs.js"></script>
 {{/section}}
 
 <h1>Cross Cutting Summaries</h1>