diff --git a/src/components/DocsNavigation.astro b/src/components/DocsNavigation.astro
index c852808c..d43aa6df 100644
--- a/src/components/DocsNavigation.astro
+++ b/src/components/DocsNavigation.astro
@@ -17,7 +17,8 @@ const users = await getUsers();
 
 const messages = [...events, ...commands];
 
-const allData = [ ...domains, ...services, ...messages, ...teams, ...users];
+// @ts-ignore
+const allData = [...domains, ...services, ...messages, ...teams, ...users];
 
 const eventCatalogConfig = config as CatalogConfig;
 const { services: servicesConfig, domains: domainsConfig, messages: messagesConfig, teams: teamsConfig, users: usersConfig, showPageHeadings = true  } = eventCatalogConfig?.docs?.sidebar || {};
@@ -26,7 +27,7 @@ const getConfigValue = (obj: any, key:string, defaultValue: any) => {
   return obj?.[key] ?? defaultValue;
 }
 
-const visibleCollections = {
+const visibleCollections: {[key:string]: boolean} = {
   events: getConfigValue(messagesConfig, 'visible', true),
   commands: getConfigValue(messagesConfig, 'visible', true),
   domains: getConfigValue(domainsConfig, 'visible', true),
@@ -76,36 +77,36 @@ const currentPath = Astro.url.pathname;
 ---
 
 <div class="font-light w-full xl:pr-10 pb-20 ">
-    {
-      Object.keys(sideNav).map((key) => {
-        const collection = sideNav[key];
+  {
+    Object.keys(sideNav).map((key) => {
+      const collection = sideNav[key];
         if(collection[0] && collection[0].visible === false) return null;
-        return (
-          <ul class=" w-full space-y-2 pb-8">
-            <li class="font-semibold capitalize ">{key}</li>
-            {collection.map((item: any) => {
-              return (
+      return (
+        <ul class=" w-full space-y-2 pb-8">
+          <li class="font-semibold capitalize ">{key}</li>
+          {collection.map((item: any) => {
+            return (
                 <li class="px-2 w-full text-md xl:text-lg border-l border-gray-200 space-y-2 scroll-m-20" id={item.href} >
                   <a class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`} href={`${item.href}`}>
-                    <span class="block">{item.label}</span>
+                  <span class="block">{item.label}</span>
                     {item.version && <span class="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">v{item.version}</span>}
-                  </a>
-                  <ul class="hidden xl:block px-4  text-gray-500 text-md space-y-2  ">
-                    {item.items.map((heading: any) => {
-                      return (
-                        <li class="text-xs">
-                          <a href={`${item.href}/#${heading.slug}`}>{heading.text}</a>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </li>
-              );
-            })}
-          </ul>
-        );
-      })
-    }
+                </a>
+                <ul class="hidden xl:block px-4  text-gray-500 text-md space-y-2  ">
+                  {item.items.map((heading: any) => {
+                    return (
+                      <li class="text-xs">
+                        <a href={`${item.href}/#${heading.slug}`}>{heading.text}</a>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    })
+  }
 </div>
 
 <script>
diff --git a/src/layouts/VisualiserLayout.astro b/src/layouts/VisualiserLayout.astro
index b6a22026..b79ad7ca 100644
--- a/src/layouts/VisualiserLayout.astro
+++ b/src/layouts/VisualiserLayout.astro
@@ -11,9 +11,9 @@ import type { CollectionEntry } from 'astro:content';
 import { ViewTransitions } from 'astro:transitions';
 
 const [services, events, commands, domains] = await Promise.all([getServices(), getEvents(), getCommands(), getDomains()]);
+// @ts-ignore
 const navItems = [...domains, ...services, ...events, ...commands];
 
-
 const navigation = navItems.reduce((acc, item) => {
   //  @ts-ignore
   const group = acc[item.collection] || [];
@@ -41,13 +41,15 @@ const getColor = (collection: string) => {
       return 'gray';
   }
 };
-
 ---
 
 <PlainPage title={title} description={description}>
   <div class="flex min-h-full flex-row md:flex-col">
     <div class="mx-auto flex flex-col-reverse md:flex-row w-full items-start">
-      <aside class="md:sticky mt-14 md:mt-0 top-0 w-full md:w-60 xl:w-[19em] shrink-0 lg:block font-light pr-10" id="visualiser-navigation">
+      <aside
+        class="md:sticky mt-14 md:mt-0 top-0 w-full md:w-60 xl:w-[19em] shrink-0 lg:block font-light pr-10"
+        id="visualiser-navigation"
+      >
         {
           Object.keys(navigation).map((key: any) => {
             const items = navigation[key].map((item: any) => {
@@ -57,15 +59,23 @@ const getColor = (collection: string) => {
                 version: item.data.version,
                 color: getColor(item.collection),
                 href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
-                active: isCurrent
-              }
+                active: isCurrent,
+              };
             });
-            return <BasicList title={`${key} (${navigation[key].length})`} items={items} emptyMessage='Nothing to show' color="gray" client:load />
+            return (
+              <BasicList
+                title={`${key} (${navigation[key].length})`}
+                items={items}
+                emptyMessage="Nothing to show"
+                color="gray"
+                client:load
+              />
+            );
           })
         }
       </aside>
 
-      <main class="flex-1 h-full w-full " >
+      <main class="flex-1 h-full w-full">
         <slot />
       </main>
     </div>