diff --git a/package.json b/package.json
index dd62db1..ab8575c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "essentials-web-config-app",
-  "version": "0.1.0",
+  "version": "1.0.0-local",
   "type": "module",
   "private": true,
   "dependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index f150db5..03a8f52 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -52,12 +52,10 @@ function App() {
       <Suspense fallback={null}>
         <Routes>
         <Route path="/" element={<Navigate to="/login" replace />} />
-        <Route path="/login" element={<MainLayout isConnected={isConnected} />}>
-          <Route index element={<LoginForm />} />
-        </Route>
+        <Route path="/login" element={<LoginForm />} />
           
+        <Route path=":appId/login" element={<LoginForm />} />
         <Route path=":appId" element={<MainLayout isConnected={isConnected} />}>
-          <Route path="login" element={<LoginForm />} />
           <Route element={<RequireAuth />}>
             <Route path="versions" element={<Versions />} />
             <Route path="apiPaths" element={<ApiPaths />} />
diff --git a/src/features/DebugConsole/DebugFilters.tsx b/src/features/DebugConsole/DebugFilters.tsx
index 36ae562..1ca03b1 100644
--- a/src/features/DebugConsole/DebugFilters.tsx
+++ b/src/features/DebugConsole/DebugFilters.tsx
@@ -33,7 +33,7 @@ export const DebugFilters = () => {
       <div className="col-12 d-none d-lg-block">
         <DeviceFilterDropdown items={items} />
         <Button
-          variant="outline"
+          variant="outline-secondary"
           className="py-1 ms-1"
           onClick={() => dispatch(debugConsoleActions.clearAllFilters())}
         >
diff --git a/src/features/InitializationExceptions.tsx b/src/features/InitializationExceptions.tsx
index 6c372a3..b14e77a 100644
--- a/src/features/InitializationExceptions.tsx
+++ b/src/features/InitializationExceptions.tsx
@@ -1,5 +1,5 @@
 import { skipToken } from "@reduxjs/toolkit/query";
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import useAppParams from "../shared/hooks/useAppParams";
 import {
   EssentialsException,
@@ -12,8 +12,6 @@ const InitializationExceptions = () => {
     appId ? { appId } : skipToken,
   );
 
-  console.log("Initialization exceptions:", data?.Exceptions);
-
   const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
 
   if (isLoading) return <div className="p-3">Loading…</div>;
@@ -48,8 +46,8 @@ const InitializationExceptions = () => {
             {data.Exceptions.map((ex: EssentialsException, idx: number) => {
               const isExpanded = expandedIndex === idx;
               return (
-                <>
-                  <tr key={`ex-${idx}`}>
+                <Fragment key={`ex-${idx}`}>
+                  <tr>
                     <td className="text-muted">{idx + 1}</td>
                     <td>
                       <span className="text-danger fw-semibold">
@@ -70,7 +68,7 @@ const InitializationExceptions = () => {
                     </td>
                   </tr>
                   {isExpanded && ex.StackTrace && (
-                    <tr key={`ex-${idx}-trace`}>
+                    <tr>
                       <td colSpan={3} className="p-0">
                         <pre
                           className="m-0 p-3 bg-light text-muted"
@@ -81,7 +79,7 @@ const InitializationExceptions = () => {
                       </td>
                     </tr>
                   )}
-                </>
+                </Fragment>
               );
             })}
           </tbody>
diff --git a/src/features/LoginForm.tsx b/src/features/LoginForm.tsx
index 8e0d44f..79fdd96 100644
--- a/src/features/LoginForm.tsx
+++ b/src/features/LoginForm.tsx
@@ -3,7 +3,7 @@ import { Alert, Button, Form, Spinner } from 'react-bootstrap';
 import { Navigate, useLocation, useNavigate } from 'react-router-dom';
 import useAppParams from '../shared/hooks/useAppParams';
 import { useSetLoginCredentialsMutation } from '../store/apiSlice';
-import { selectIsAuthenticated } from '../store/auth/authSelectors';
+import { selectAvailableApps, selectIsAuthenticated } from '../store/auth/authSelectors';
 import { authActions } from '../store/auth/authSlice';
 import { useAppDispatch, useAppSelector } from '../store/hooks';
 
@@ -15,6 +15,7 @@ const ALL_APP_IDS = [
 const LoginForm = () => {
   const { appId } = useAppParams();
   const isAuthenticated = useAppSelector(selectIsAuthenticated);
+  const discoveredApps = useAppSelector(selectAvailableApps);
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const location = useLocation();
@@ -30,9 +31,10 @@ const LoginForm = () => {
 
   const isValidAppId = appId && ALL_APP_IDS.includes(appId);
   const probeAppId = isValidAppId ? appId : ALL_APP_IDS[0];
+  const safeAppId = isValidAppId ? appId : (discoveredApps[0] ?? probeAppId);
 
   if (isAuthenticated) {
-    return <Navigate to={from ?? `/${appId}/versions`} replace />;
+    return <Navigate to={from ?? `/${safeAppId}/versions`} replace />;
   }
 
   async function handleSubmit(e: FormEvent) {
@@ -68,7 +70,8 @@ const LoginForm = () => {
   }
 
   return (
-    <div className="d-flex justify-content-center align-items-center h-100">
+    <div className="d-flex flex-column justify-content-center align-items-center h-100">
+      <h1 className="mb-5 text-center">PepperDash Essentials Developer Tools</h1>
       <div className="w-100" style={{ maxWidth: '360px' }}>
         <h2 className="mb-4">Sign In</h2>
         {error && <Alert variant="danger">{error}</Alert>}
diff --git a/src/features/MobileControl.tsx b/src/features/MobileControl.tsx
index c8750dd..2bfdb2b 100644
--- a/src/features/MobileControl.tsx
+++ b/src/features/MobileControl.tsx
@@ -16,7 +16,6 @@ import {
 
 const MobileControl = () => {
   const { appId } = useAppParams();
-  console.log("AppId in MobileControl", appId);
 
   const { data: info } = useGetMobileControlInfoQuery(
     appId ? { appId, deviceKey: "appServer" } : skipToken,
diff --git a/src/features/Routing.tsx b/src/features/Routing.tsx
index 4672ebb..17fd37b 100644
--- a/src/features/Routing.tsx
+++ b/src/features/Routing.tsx
@@ -17,7 +17,7 @@ import dagre from "dagre";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Dropdown } from "react-bootstrap";
 
-import { meetsMinVersion } from '../shared/functions/meetsMinimumVersion';
+import { meetsMinVersion } from "../shared/functions/meetsMinimumVersion";
 import useAppParams from "../shared/hooks/useAppParams";
 import {
   RoutingDevice,
@@ -125,13 +125,20 @@ function buildGraph(
       : d,
   );
 
+  const effectiveDeviceKeys = new Set(effectiveDevices.map((d) => d.key));
   // Collect one unique device-pair edge per source→destination (dagre only
-  // needs connectivity, not multiplicity, for rank assignment).
+  // needs connectivity, not multiplicity, for rank assignment). Only use
+  // visible tie lines whose endpoints are present in the visible device set
+  // so hidden devices cannot be implicitly added to the layout graph.
   const uniquePairs = [
     ...new Set(
-      data.tieLines.map(
-        (tl) => `${tl.sourceDeviceKey}|${tl.destinationDeviceKey}`,
-      ),
+      visibleTieLines
+        .filter(
+          (tl) =>
+            effectiveDeviceKeys.has(tl.sourceDeviceKey) &&
+            effectiveDeviceKeys.has(tl.destinationDeviceKey),
+        )
+        .map((tl) => `${tl.sourceDeviceKey}|${tl.destinationDeviceKey}`),
     ),
   ];
 
@@ -172,18 +179,20 @@ function buildGraph(
   dagre.layout(g);
 
   // Map dagre positions → React Flow nodes
-  const nodes: Node<RoutingDeviceNodeData>[] = effectiveDevices.map((device) => {
-    const pos = g.node(device.key);
-    return {
-      id: device.key,
-      type: "routingDevice",
-      position: {
-        x: pos.x - NODE_WIDTH / 2,
-        y: pos.y - nodeHeight(device) / 2,
-      },
-      data: { device },
-    };
-  });
+  const nodes: Node<RoutingDeviceNodeData>[] = effectiveDevices.map(
+    (device) => {
+      const pos = g.node(device.key);
+      return {
+        id: device.key,
+        type: "routingDevice",
+        position: {
+          x: pos.x - NODE_WIDTH / 2,
+          y: pos.y - nodeHeight(device) / 2,
+        },
+        data: { device },
+      };
+    },
+  );
 
   // Map tieLines → React Flow edges, filtering by hidden signal types and hidden devices.
   // All tie lines are rendered regardless of whether they were excluded from
@@ -223,7 +232,6 @@ function uniqueSignalTypes(tieLines: TieLine[]): string[] {
   return [...new Set(tieLines.map((tl) => tl.signalType))].sort();
 }
 
-
 // ─── Node types registry (stable reference outside component) ────────────────
 
 const nodeTypes: NodeTypes = {
@@ -305,7 +313,16 @@ const Routing = () => {
     );
     setEdges(layoutEdges);
     setSelectedEdgeId(null);
-  }, [data, hiddenTypes, hideUnconnected, hiddenDevices, hideUnconnectedPorts, darkMode, setNodes, setEdges]);
+  }, [
+    data,
+    hiddenTypes,
+    hideUnconnected,
+    hiddenDevices,
+    hideUnconnectedPorts,
+    darkMode,
+    setNodes,
+    setEdges,
+  ]);
 
   // Re-style edges when selection changes without triggering a layout rebuild.
   useEffect(() => {
@@ -402,7 +419,6 @@ const Routing = () => {
   if (isError || !data)
     return <div className="p-3 text-danger">Failed to load routing data.</div>;
 
-
   if (
     versions &&
     !versions.some(
@@ -572,7 +588,9 @@ const Routing = () => {
       </div>
 
       {/* React Flow canvas */}
-      <div className={`flex-grow-1 position-relative${darkMode ? " bg-dark" : ""}`}>
+      <div
+        className={`flex-grow-1 position-relative${darkMode ? " bg-dark" : ""}`}
+      >
         <ReactFlow
           nodes={nodes}
           edges={edges}
diff --git a/src/features/TopNav.tsx b/src/features/TopNav.tsx
index 956aa26..412f815 100644
--- a/src/features/TopNav.tsx
+++ b/src/features/TopNav.tsx
@@ -8,15 +8,48 @@ import { useGetVersionsQuery } from "../store/apiSlice";
 import { selectAvailableApps } from "../store/auth/authSelectors";
 import { useAppSelector } from "../store/hooks";
 
+const AppNavLink = ({
+  appId,
+  path,
+  children,
+}: {
+  appId: string | undefined;
+  path: string;
+  children: React.ReactNode;
+}) => {
+  if (!appId) {
+    return (
+      <span
+        className="me-3 text-muted nav-link-disabled"
+        role="link"
+        aria-disabled="true"
+        tabIndex={-1}
+      >
+        {children}
+      </span>
+    );
+  }
+  return (
+    <NavLink
+      className={({ isActive }) => (isActive ? "me-3 text-secondary" : "me-3")}
+      to={`/${appId}/${path}`}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
 const TopNav = ({ isConnected }: { isConnected: boolean }) => {
   const location = useLocation();
   const params = useAppParams();
   const availableApps = useAppSelector(selectAvailableApps);
 
+  const reactAppVersion = APP_VERSION;
+
   // Single version query for the currently active app only (used for feature flagging)
   const { data: currentVersions } = useGetVersionsQuery(
-    params.appId ? { appId: params.appId } : { appId: '' },
-    { skip: !params.appId }
+    params.appId ? { appId: params.appId } : { appId: "" },
+    { skip: !params.appId },
   );
 
   const appIdOptions = availableApps;
@@ -71,108 +104,47 @@ const TopNav = ({ isConnected }: { isConnected: boolean }) => {
           </Dropdown>
         )}
         <Nav className="me-auto">
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/versions`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/versions`}
-          >
+          <AppNavLink appId={params.appId} path="versions">
             Versions
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/apiPaths`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/apiPaths`}
-          >
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="apiPaths">
             API Paths
-          </NavLink>
+          </AppNavLink>
           {showInitializationExceptions && (
-            <NavLink
-              className={
-                location.pathname.includes(
-                  `/${params.appId}/initializationExceptions`,
-                )
-                  ? "text-secondary me-3"
-                  : "me-3"
-              }
-              to={`/${params.appId}/initializationExceptions`}
-            >
+            <AppNavLink appId={params.appId} path="initializationExceptions">
               Initialization Exceptions
-            </NavLink>
+            </AppNavLink>
           )}
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/console`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/console`}
-          >
+          <AppNavLink appId={params.appId} path="console">
             Debug Console
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/config`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/config`}
-          >
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="config">
             Config File
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/devices`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/devices`}
-          >
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="devices">
             Devices
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/types`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/types`}
-          >
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="types">
             Types
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/routing`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/routing`}
-          >
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="routing">
             Routing
-          </NavLink>
-          <NavLink
-            className={
-              location.pathname.includes(`/${params.appId}/mobileControl`)
-                ? "text-secondary me-3"
-                : "me-3"
-            }
-            to={`/${params.appId}/mobileControl`}
-          >
+          </AppNavLink>
+          <AppNavLink appId={params.appId} path="mobileControl">
             Mobile Control
-          </NavLink>
+          </AppNavLink>
         </Nav>
-        <div className="d-flex align-items-center">
-          <IconDarkEllipse
-            className={isConnected ? "text-success" : "text-danger"}
-          />
-          <span className="ms-2">
-            Debug Console {isConnected ? "Connected" : "Disconnected"}
-          </span>
+        <div className="d-flex flex-column align-items-end">
+          <span>Version: {reactAppVersion}</span>
+
+          <div className="d-flex align-items-center">
+            <IconDarkEllipse
+              className={isConnected ? "text-success" : "text-danger"}
+            />
+            <span className="ms-2">
+              Debug Console {isConnected ? "Connected" : "Disconnected"}
+            </span>
+          </div>
         </div>
       </div>
     </Navbar>
diff --git a/src/styles.scss b/src/styles.scss
index 6a22963..78d5600 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -894,3 +894,7 @@ textarea:hover {
 //   max-height: 25rem;
 //   overflow: hidden ;
 // }
+
+.nav-link-disabled {
+  cursor: default;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..28929cc
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+declare const APP_VERSION: string;
\ No newline at end of file
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
deleted file mode 100644
index 1b6a8f0..0000000
--- a/tsconfig.tsbuildinfo
+++ /dev/null
@@ -1 +0,0 @@
-{"root":["./src/app.test.tsx","./src/app.tsx","./src/index.tsx","./src/react-app-env.d.ts","./src/reportwebvitals.ts","./src/setuptests.ts","./src/features/apipathdetaildrawer.tsx","./src/features/apipaths.tsx","./src/features/configfile.tsx","./src/features/devicedetail.tsx","./src/features/devicelist.tsx","./src/features/errorboundary.tsx","./src/features/errorbox.tsx","./src/features/initializationexceptions.tsx","./src/features/loginform.tsx","./src/features/mainlayout.tsx","./src/features/mobilecontrol.tsx","./src/features/requireauth.tsx","./src/features/routing.tsx","./src/features/routingdevicenode.tsx","./src/features/tielineedge.tsx","./src/features/topnav.tsx","./src/features/types.tsx","./src/features/versions.tsx","./src/features/debugconsole/consolewindow.tsx","./src/features/debugconsole/debugconsole.tsx","./src/features/debugconsole/debugfilters.tsx","./src/features/debugconsole/devicefilterdropdown.tsx","./src/features/debugconsole/logmessagedetaildrawer.tsx","./src/features/debugconsole/minimumlogleveldropdown.tsx","./src/features/debugconsole/restartconfirmmodal.tsx","./src/features/debugconsole/debugconsts.ts","./src/features/debugconsole/hooks/usefilteredmessages.ts","./src/services/httpservice.ts","./src/shared/filterclearbutton.tsx","./src/shared/filterdropdownsearchparams.tsx","./src/shared/filtersearchtext.tsx","./src/shared/headerscrollerfooter.tsx","./src/shared/listfiltersheader.tsx","./src/shared/tablecellspacer.tsx","./src/shared/functions/meetsminimumversion.ts","./src/shared/hooks/useappparams.ts","./src/shared/icons/objecticons.ts","./src/shared/icons/othericons.ts","./src/shared/icons/index.tsx","./src/shared/types/idlabel.ts","./src/shared/types/logmessage.ts","./src/store/apislice.ts","./src/store/hooks.ts","./src/store/store.ts","./src/store/websocketmiddleware.ts","./src/store/websocketslice.ts","./src/store/auth/authselectors.ts","./src/store/auth/authslice.ts","./src/store/commonui/commonuihooks.ts","./src/store/commonui/commonuiselectors.ts","./src/store/commonui/commonuislice.ts","./src/store/commonui/commonuistate.ts","./src/store/debugconsole/debugconsoleselectors.ts","./src/store/debugconsole/debugconsoleslice.ts","./vite.config.ts"],"version":"6.0.2"}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index ba76fcb..79cafa9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,31 +1,44 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig, loadEnv } from 'vite';
-import svgr from 'vite-plugin-svgr';
+import react from "@vitejs/plugin-react";
+import { defineConfig, loadEnv } from "vite";
+import svgr from "vite-plugin-svgr";
 
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), '');
+  const env = loadEnv(mode, process.cwd(), "");
 
   const programHost = env.PROGRAM_HOST;
-  if (!programHost && mode !== 'test') {
-    console.warn('Warning: PROGRAM_HOST is not set — proxy will not be configured.');
+  if (!programHost && mode !== "test") {
+    console.warn(
+      "Warning: PROGRAM_HOST is not set — proxy will not be configured.",
+    );
   }
 
   return {
-    base: '/cws/debug/',
-    plugins: [react(), svgr({ include: '**/*.svg', svgrOptions: { exportType: 'named' } })],
+    base: "/cws/debug/",
+    plugins: [
+      react(),
+      svgr({ include: "**/*.svg", svgrOptions: { exportType: "named" } }),
+    ],
+    define: {
+      APP_VERSION: JSON.stringify(process.env.npm_package_version),
+    },
     server: {
       proxy: programHost
         ? {
-            '^/cws/.*/api/.*': {
+            "^/cws/.*/api/.*": {
               target: programHost,
               changeOrigin: true,
               secure: false,
               configure: (proxy) => {
-                proxy.on('proxyReq', (proxyReq) => {
-                  const referer = proxyReq.getHeader('referer') as string | undefined;
+                proxy.on("proxyReq", (proxyReq) => {
+                  const referer = proxyReq.getHeader("referer") as
+                    | string
+                    | undefined;
                   if (referer) {
-                    const newReferer = referer.replace(/https:\/\/localhost:.*/, programHost);
-                    proxyReq.setHeader('referer', newReferer);
+                    const newReferer = referer.replace(
+                      /https:\/\/localhost:.*/,
+                      programHost,
+                    );
+                    proxyReq.setHeader("referer", newReferer);
                   }
                 });
               },
@@ -35,8 +48,8 @@ export default defineConfig(({ mode }) => {
     },
     test: {
       globals: true,
-      environment: 'jsdom',
-      setupFiles: './src/setupTests.ts',
+      environment: "jsdom",
+      setupFiles: "./src/setupTests.ts",
     },
   };
 });