diff --git a/apps/client-ts/src/components/Nav/main-nav-sm.tsx b/apps/client-ts/src/components/Nav/main-nav-sm.tsx
index 84c22e3bf..9a12966f7 100644
--- a/apps/client-ts/src/components/Nav/main-nav-sm.tsx
+++ b/apps/client-ts/src/components/Nav/main-nav-sm.tsx
@@ -13,11 +13,7 @@ import { useState } from "react"
 import Link from "next/link"
 
 
-export function SmallNav({ 
-  onLinkClick 
-} : {
-  onLinkClick: (name: string) => void
-}) {
+export function SmallNav() {
   const [selectedItem, setSelectedItem] = useState<string>("dashboard");
   const [open, setOpen] = useState(false);
   const navItemClassName = (itemName: string) =>
@@ -27,7 +23,7 @@ export function SmallNav({
   
     function click(name: string) {
       setSelectedItem(name);
-      onLinkClick(name);
+      //onLinkClick(name);
       setOpen(false);
     }
   return (
@@ -59,32 +55,36 @@ export function SmallNav({
               >
                 <p className="mx-4">Dashboard</p>
               </a>*/}
-            <a
+            <Link
                 className={navItemClassName('connections')}
                 onClick={() => click('connections')}
+                href="/connections"
               >
               <p className="mx-4">Connections</p>
-            </a>
-            <a
+            </Link>
+            <Link
                 className={navItemClassName('events')}
                 onClick={() => click('events')}
+                href="/events"
               >
               <p className="mx-4">Events</p>
 
-            </a>
-            <a
+            </Link>
+            <Link
                 className={navItemClassName('configuration')}
                 onClick={() => click('configuration')}
+                href="/configuration"
               >
               <p className="mx-4">Configuration</p>
-            </a>
-            <a
+            </Link>
+            <Link
                 className={navItemClassName('api-keys')}
                 onClick={() => click('api-keys')}
+                href="/api-keys"
               >
               <p className="mx-4">API Keys</p>
-            </a>
-            <a
+            </Link>
+            <Link
               className={`${navItemClassName('docs')} flex items-center`}
               href="https://docs.panora.dev/"
               target="_blank"
@@ -92,7 +92,7 @@ export function SmallNav({
             >
               <p className="mx-4">Docs</p>
               <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
-            </a>
+            </Link>
           </nav>
         </SheetContent>
       </Sheet>
diff --git a/apps/client-ts/src/components/Nav/main-nav.tsx b/apps/client-ts/src/components/Nav/main-nav.tsx
index 91a87b18e..97746665e 100644
--- a/apps/client-ts/src/components/Nav/main-nav.tsx
+++ b/apps/client-ts/src/components/Nav/main-nav.tsx
@@ -2,13 +2,12 @@
 
 import { usePathname } from "next/navigation";
 import { MouseEvent, useEffect, useState } from "react";
+import Link from "next/link"
 
 export function MainNav({
-  onLinkClick,
   className,
   ...props
 }: {
-  onLinkClick: (name: string) => void;
   className: string;
 }) {
   const [selectedItem, setSelectedItem] = useState<string>("connections");
@@ -24,7 +23,7 @@ export function MainNav({
   
   function click(e: MouseEvent, name: string) {
     e.preventDefault();
-    onLinkClick(name);
+    //onLinkClick(name);
   }
 
   return (
@@ -32,31 +31,35 @@ export function MainNav({
       className={`flex flex-col items-start ${className}`}
       {...props}
     >
-    <a
+      <Link
         className={navItemClassName('connections')}
         onClick={(e) => click(e,'connections')}
+        href="/connections"
       >
         Connections
-      </a>
-      <a
+      </Link>
+      <Link
         className={navItemClassName('events')}
         onClick={(e) => click(e, 'events')}
+        href="/events"
       >
         Events
-      </a>
-      <a
+      </Link>
+      <Link
         className={navItemClassName('configuration')}
         onClick={(e) => click(e,'configuration')}
+        href="/configuration"
       >
         Configuration
-      </a>
-      <a
+      </Link>
+      <Link
         className={navItemClassName('api-keys')}
         onClick={(e) => click(e,'api-keys')}
+        href="/api-keys"
       >
         API Keys
-      </a>
-      <a
+      </Link>
+      <Link
         className={`${navItemClassName('docs')} flex items-center`}
         href="https://docs.panora.dev/"
         target="_blank"
@@ -64,7 +67,7 @@ export function MainNav({
       >
         <p className="pr-2">Docs</p> 
         <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
-      </a>
+      </Link>
     </nav>
   );
 }
diff --git a/apps/client-ts/src/components/RootLayout/index.tsx b/apps/client-ts/src/components/RootLayout/index.tsx
index 2e57087f7..eea32b680 100644
--- a/apps/client-ts/src/components/RootLayout/index.tsx
+++ b/apps/client-ts/src/components/RootLayout/index.tsx
@@ -9,6 +9,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/navigation';
 import config from '@/lib/config';
 
+
 const useDeviceSize = () => {
 
   const [width, setWidth] = useState(0)
@@ -35,21 +36,22 @@ export const RootLayout = () => {
   const [width, height] = useDeviceSize();
   const router = useRouter()
   const base = process.env.NEXT_PUBLIC_WEBAPP_DOMAIN;
-  const handlePageChange = (page: string) => {
+  console.log('WEBAPP DOMAIN is '+ base)
+  /*const handlePageChange = (page: string) => {
     console.log(`${base}/${page}`)
     if (page) {
       router.push(`${base}/${page}`);
     } else {
       console.error(`Page ${page} is undefined`);
     }
-  };
+  };*/
 
   const lgBreakpoint = 1024; // Tailwind's 'lg' breakpoint
 
   return (
     <div>
       {width < lgBreakpoint ? (
-        <SmallNav onLinkClick={handlePageChange} />
+        <SmallNav/>
       ) : (
         <div className='items-center hidden lg:flex lg:flex-col border-r fixed left-0 bg-opacity-90 backdrop-filter backdrop-blur-lg w-[200px] h-screen'>
           <div className='flex lg:flex-col items-center py-4 space-y-4'>
@@ -61,7 +63,6 @@ export const RootLayout = () => {
             <TeamSwitcher className='w-40 ml-3' />
             <MainNav
               className='flex lg:flex-col mx-auto w-[200px] space-y-0'
-              onLinkClick={handlePageChange}
             />
             {
               config.DISTRIBUTION == "managed" &&