diff --git a/client/src/pages/Config/Inventory/InventoryList.tsx b/client/src/pages/Config/Inventory/InventoryList.tsx
index 0dc4cd63..548f8e53 100644
--- a/client/src/pages/Config/Inventory/InventoryList.tsx
+++ b/client/src/pages/Config/Inventory/InventoryList.tsx
@@ -4,10 +4,24 @@ import Menubar from "@thorium/ui/Menubar";
 import Button from "@thorium/ui/Button";
 import {toast} from "client/src/context/ToastContext";
 import SearchableList from "@thorium/ui/SearchableList";
-import {Fragment} from "react";
+import {Fragment, Suspense} from "react";
 import {q} from "@client/context/AppContext";
 
 export function InventoryList() {
+  const {pluginId} = useParams() as {
+    pluginId: string;
+  };
+  return (
+    <div className="h-full">
+      <Menubar backTo={`/config/${pluginId}/list`}></Menubar>
+      <Suspense>
+        <InventoryListInner />
+      </Suspense>
+    </div>
+  );
+}
+
+function InventoryListInner() {
   const {pluginId, inventoryId} = useParams() as {
     pluginId: string;
     inventoryId?: string;
@@ -16,61 +30,59 @@ export function InventoryList() {
   const prompt = usePrompt();
   const [data] = q.plugin.inventory.all.useNetRequest({pluginId});
   const inventory = data.find(d => d.name === inventoryId);
+
   return (
-    <div className="h-full">
-      <Menubar backTo={`/config/${pluginId}/list`}></Menubar>
-      <div className="p-8 h-[calc(100%-2rem)]">
-        <h1 className="font-bold text-white text-3xl mb-4">Inventory Config</h1>
-        <div className="flex gap-8 h-[calc(100%-3rem)]">
-          <div className="flex flex-col w-80 h-full">
-            <Button
-              className="btn-success btn-sm w-full"
-              onClick={async () => {
-                const name = await prompt({
-                  header: "Enter inventory item name",
+    <div className="p-8 h-[calc(100%-2rem)]">
+      <h1 className="font-bold text-white text-3xl mb-4">Inventory Config</h1>
+      <div className="flex gap-8 h-[calc(100%-3rem)]">
+        <div className="flex flex-col w-80 h-full">
+          <Button
+            className="btn-success btn-sm w-full"
+            onClick={async () => {
+              const name = await prompt({
+                header: "Enter inventory item name",
+              });
+              if (typeof name !== "string") return;
+              try {
+                const result = await q.plugin.inventory.create.netSend({
+                  name,
+                  pluginId,
                 });
-                if (typeof name !== "string") return;
-                try {
-                  const result = await q.plugin.inventory.create.netSend({
-                    name,
-                    pluginId,
+                navigate(`${result.inventoryId}`);
+              } catch (err) {
+                if (err instanceof Error) {
+                  toast({
+                    title: "Error creating inventory item",
+                    body: err.message,
+                    color: "error",
                   });
-                  navigate(`${result.inventoryId}`);
-                } catch (err) {
-                  if (err instanceof Error) {
-                    toast({
-                      title: "Error creating inventory item",
-                      body: err.message,
-                      color: "error",
-                    });
-                    return;
-                  }
+                  return;
                 }
-              }}
-            >
-              New Inventory Item
-            </Button>
+              }
+            }}
+          >
+            New Inventory Item
+          </Button>
 
-            <SearchableList
-              items={data.map(d => ({
-                id: d.name,
-                name: d.name,
-                description: d.description,
-              }))}
-              searchKeys={["name"]}
-              selectedItem={inventoryId || null}
-              setSelectedItem={({id}) => navigate(`${id}`)}
-              renderItem={c => (
-                <div className="flex justify-between items-center" key={c.id}>
-                  <div>{c.name}</div>
-                </div>
-              )}
-            />
-          </div>
-          <Fragment key={inventory?.name}>
-            <Outlet />
-          </Fragment>
+          <SearchableList
+            items={data.map(d => ({
+              id: d.name,
+              name: d.name,
+              description: d.description,
+            }))}
+            searchKeys={["name"]}
+            selectedItem={inventoryId || null}
+            setSelectedItem={({id}) => navigate(`${id}`)}
+            renderItem={c => (
+              <div className="flex justify-between items-center" key={c.id}>
+                <div>{c.name}</div>
+              </div>
+            )}
+          />
         </div>
+        <Fragment key={inventory?.name}>
+          <Outlet />
+        </Fragment>
       </div>
     </div>
   );
diff --git a/client/src/pages/Config/PluginEdit.tsx b/client/src/pages/Config/PluginEdit.tsx
index 9104b36c..d2804fc9 100644
--- a/client/src/pages/Config/PluginEdit.tsx
+++ b/client/src/pages/Config/PluginEdit.tsx
@@ -13,80 +13,87 @@ import {toast} from "@client/context/ToastContext";
 import {q} from "@client/context/AppContext";
 
 export default function PluginEdit() {
+  return (
+    <div className="h-full">
+      <Menubar></Menubar>
+      <Suspense>
+        <PluginEditInner />
+      </Suspense>
+    </div>
+  );
+}
+
+function PluginEditInner() {
   const {pluginId} = useParams() as {pluginId: string};
   const [plugins] = q.plugin.all.useNetRequest();
   const navigate = useNavigate();
   const prompt = usePrompt();
-
   return (
-    <div className="h-full">
-      <Menubar></Menubar>
-      <div className="p-8 h-[calc(100%-2rem)]">
-        <h1 className="font-bold text-white text-3xl mb-4">Plugin Config</h1>
+    <div className="p-8 h-[calc(100%-2rem)]">
+      <h1 className="font-bold text-white text-3xl mb-4">Plugin Config</h1>
 
-        <div className="flex gap-8 h-[calc(100%-3rem)]">
-          <div className="flex flex-col w-80 h-full">
-            <Button
-              className="w-full btn-sm btn-success"
-              onClick={async () => {
-                const name = await prompt({header: "Enter plugin name"});
-                if (typeof name !== "string") return;
-                try {
-                  const result = await q.plugin.create.netSend({name});
-                  navigate(`/config/${result.pluginId}`);
-                } catch (err) {
-                  if (err instanceof Error) {
-                    toast({
-                      title: "Error creating plugin",
-                      body: err.message,
-                      color: "error",
-                    });
-                  }
+      <div className="flex gap-8 h-[calc(100%-3rem)]">
+        <div className="flex flex-col w-80 h-full">
+          <Button
+            className="w-full btn-sm btn-success"
+            onClick={async () => {
+              const name = await prompt({header: "Enter plugin name"});
+              if (typeof name !== "string") return;
+              try {
+                const result = await q.plugin.create.netSend({name});
+                navigate(`/config/${result.pluginId}`);
+              } catch (err) {
+                if (err instanceof Error) {
+                  toast({
+                    title: "Error creating plugin",
+                    body: err.message,
+                    color: "error",
+                  });
                 }
-              }}
-            >
-              New Plugin
-            </Button>
+              }
+            }}
+          >
+            New Plugin
+          </Button>
 
-            <SearchableList
-              items={plugins.map(d => ({
-                id: d.id,
-                name: d.name,
-                description: d.description,
-                tags: d.tags,
-                author: d.author,
-                active: d.active,
-              }))}
-              searchKeys={["name", "author", "tags"]}
-              selectedItem={pluginId || null}
-              setSelectedItem={({id}) => navigate(`/config/${id}`)}
-              renderItem={c => (
-                <div className="flex justify-between items-center" key={c.id}>
+          <SearchableList
+            items={plugins.map(d => ({
+              id: d.id,
+              name: d.name,
+              description: d.description,
+              tags: d.tags,
+              author: d.author,
+              active: d.active,
+            }))}
+            searchKeys={["name", "author", "tags"]}
+            selectedItem={pluginId || null}
+            setSelectedItem={({id}) => navigate(`/config/${id}`)}
+            renderItem={c => (
+              <div className="flex justify-between items-center" key={c.id}>
+                <div>
+                  {c.name}
+                  {c.active ? (
+                    ""
+                  ) : (
+                    <span className="text-red-600"> (inactive)</span>
+                  )}
                   <div>
-                    {c.name}
-                    {c.active ? (
-                      ""
-                    ) : (
-                      <span className="text-red-600"> (inactive)</span>
-                    )}
-                    <div>
-                      <small>{c.author}</small>
-                    </div>
+                    <small>{c.author}</small>
                   </div>
-                  <NavLink
-                    {...{to: `/config/${c.id}/list`}}
-                    onClick={e => e.stopPropagation()}
-                  >
-                    <FaEdit />
-                  </NavLink>
                 </div>
-              )}
-            />
-          </div>
-          <Suspense fallback={<PluginDetails />}>
-            <PluginDetails />
-          </Suspense>
+                <NavLink
+                  {...{to: `/config/${c.id}/list`}}
+                  onClick={e => e.stopPropagation()}
+                >
+                  <FaEdit />
+                </NavLink>
+              </div>
+            )}
+          />
         </div>
+        <Suspense fallback={<PluginDetails />}>
+          <PluginDetails />
+        </Suspense>
       </div>
     </div>
   );
diff --git a/client/src/pages/Config/ShipSystems/ShipSystemsList.tsx b/client/src/pages/Config/ShipSystems/ShipSystemsList.tsx
index 4bcf8a2d..411ce7cf 100644
--- a/client/src/pages/Config/ShipSystems/ShipSystemsList.tsx
+++ b/client/src/pages/Config/ShipSystems/ShipSystemsList.tsx
@@ -2,7 +2,7 @@ import {usePrompt} from "@thorium/ui/AlertDialog";
 import Menubar from "@thorium/ui/Menubar";
 import SearchableList from "@thorium/ui/SearchableList";
 import {Outlet, useParams, useNavigate} from "react-router-dom";
-import {Fragment} from "react";
+import {Fragment, Suspense} from "react";
 import {toast} from "client/src/context/ToastContext";
 import Dropdown, {DropdownItem} from "@thorium/ui/Dropdown";
 import {HiChevronDown} from "react-icons/hi";
@@ -11,6 +11,20 @@ import {capitalCase} from "change-case";
 import {q} from "@client/context/AppContext";
 
 export function ShipSystemsList() {
+  const {pluginId} = useParams() as {
+    pluginId: string;
+  };
+  return (
+    <div className="h-full">
+      <Menubar backTo={`/config/${pluginId}/list`}></Menubar>
+      <Suspense>
+        <ShipSystemsInner />
+      </Suspense>
+    </div>
+  );
+}
+
+function ShipSystemsInner() {
   const {pluginId, systemId} = useParams() as {
     pluginId: string;
     systemId?: string;
@@ -20,82 +34,80 @@ export function ShipSystemsList() {
   const [data] = q.plugin.systems.all.useNetRequest({pluginId});
   const [availableShipSystems] = q.plugin.systems.available.useNetRequest();
   const system = data.find(d => d.name === systemId);
+
   return (
-    <div className="h-full">
-      <Menubar backTo={`/config/${pluginId}/list`}></Menubar>
-      <div className="p-8 h-[calc(100%-2rem)]">
-        <h1 className="font-bold text-white text-3xl mb-4">
-          Ship Systems Config
-        </h1>
-        <div className="flex gap-8 h-[calc(100%-3rem)]">
-          <div className="flex flex-col w-80 h-full">
-            <Dropdown
-              triggerEl={
-                <Menu.Button className="btn btn-success btn-sm w-full">
-                  New Ship System <HiChevronDown />
-                </Menu.Button>
-              }
-            >
-              {availableShipSystems.map(system => (
-                <DropdownItem
-                  key={system.type}
-                  onClick={async () => {
-                    const name = await prompt({
-                      header: "Enter system name",
-                      defaultValue: capitalCase(system.type),
+    <div className="p-8 h-[calc(100%-2rem)]">
+      <h1 className="font-bold text-white text-3xl mb-4">
+        Ship Systems Config
+      </h1>
+      <div className="flex gap-8 h-[calc(100%-3rem)]">
+        <div className="flex flex-col w-80 h-full">
+          <Dropdown
+            triggerEl={
+              <Menu.Button className="btn btn-success btn-sm w-full">
+                New Ship System <HiChevronDown />
+              </Menu.Button>
+            }
+          >
+            {availableShipSystems.map(system => (
+              <DropdownItem
+                key={system.type}
+                onClick={async () => {
+                  const name = await prompt({
+                    header: "Enter system name",
+                    defaultValue: capitalCase(system.type),
+                  });
+                  if (typeof name !== "string") return;
+                  try {
+                    const result = await q.plugin.systems.create.netSend({
+                      name,
+                      type: system.type,
+                      pluginId,
                     });
-                    if (typeof name !== "string") return;
-                    try {
-                      const result = await q.plugin.systems.create.netSend({
-                        name,
-                        type: system.type,
-                        pluginId,
+                    navigate(`${result.shipSystemId}`);
+                  } catch (err) {
+                    if (err instanceof Error) {
+                      toast({
+                        title: "Error creating system",
+                        body: err.message,
+                        color: "error",
                       });
-                      navigate(`${result.shipSystemId}`);
-                    } catch (err) {
-                      if (err instanceof Error) {
-                        toast({
-                          title: "Error creating system",
-                          body: err.message,
-                          color: "error",
-                        });
-                        return;
-                      }
+                      return;
                     }
-                  }}
-                >
-                  {capitalCase(system.type)}
-                </DropdownItem>
-              ))}
-            </Dropdown>
+                  }
+                }}
+              >
+                {capitalCase(system.type)}
+              </DropdownItem>
+            ))}
+          </Dropdown>
 
-            <SearchableList
-              items={data.map(d => ({
-                id: d.name,
-                name: d.name,
-                description: d.description,
-                category: capitalCase(d.type),
-                tags: d.tags,
-              }))}
-              searchKeys={["name", "category", "tags"]}
-              selectedItem={systemId || null}
-              setSelectedItem={({id}) => navigate(`${id}`)}
-              renderItem={c => (
-                <div className="flex justify-between items-center" key={c.id}>
+          <SearchableList
+            items={data.map(d => ({
+              id: d.name,
+              name: d.name,
+              description: d.description,
+              category: capitalCase(d.type),
+              tags: d.tags,
+            }))}
+            searchKeys={["name", "category", "tags"]}
+            selectedItem={systemId || null}
+            setSelectedItem={({id}) => navigate(`${id}`)}
+            renderItem={c => (
+              <div className="flex justify-between items-center" key={c.id}>
+                <div>
+                  {c.name}
                   <div>
-                    {c.name}
-                    <div>
-                      <small>{c.category}</small>
-                    </div>
+                    <small>{c.category}</small>
                   </div>
                 </div>
-              )}
-            />
-          </div>
-          <Fragment key={system?.name}>
-            <Outlet />
-          </Fragment>
+              </div>
+            )}
+          />
         </div>
+        <Fragment key={system?.name}>
+          <Outlet />
+        </Fragment>
       </div>
     </div>
   );
diff --git a/client/src/pages/Config/Ships/ShipList.tsx b/client/src/pages/Config/Ships/ShipList.tsx
index abc5ca9b..c8693114 100644
--- a/client/src/pages/Config/Ships/ShipList.tsx
+++ b/client/src/pages/Config/Ships/ShipList.tsx
@@ -3,77 +3,87 @@ import Menubar from "@thorium/ui/Menubar";
 import SearchableList from "@thorium/ui/SearchableList";
 import Button from "@thorium/ui/Button";
 import {Outlet, useParams, useNavigate} from "react-router-dom";
-import {Fragment} from "react";
+import {Fragment, Suspense} from "react";
 import {toast} from "@client/context/ToastContext";
 import {q} from "@client/context/AppContext";
 
 export function ShipList() {
+  const {pluginId} = useParams() as {pluginId: string};
+
+  return (
+    <div className="h-full">
+      <Menubar backTo={`/config/${pluginId}/list`}></Menubar>
+      <Suspense>
+        <ShipListInner />
+      </Suspense>
+    </div>
+  );
+}
+
+function ShipListInner() {
   const {pluginId, shipId} = useParams() as {pluginId: string; shipId?: string};
   const navigate = useNavigate();
   const prompt = usePrompt();
   const [ships] = q.plugin.ship.all.useNetRequest({pluginId});
   const ship = ships.find(d => d.name === shipId);
+
   return (
-    <div className="h-full">
-      <Menubar backTo={`/config/${pluginId}/list`}></Menubar>
-      <div className="p-8 h-[calc(100%-2rem)]">
-        <h1 className="font-bold text-white text-3xl mb-4">Ships Config</h1>
-        <div className="flex gap-8 h-[calc(100%-3rem)]">
-          <div className="flex flex-col w-80 h-full">
-            <Button
-              className="w-full btn-sm btn-success"
-              onClick={async () => {
-                const name = await prompt({header: "Enter ship name"});
-                if (typeof name !== "string" || name.trim().length === 0)
-                  return;
-                try {
-                  const result = await q.plugin.ship.create.netSend({
-                    name,
-                    pluginId,
+    <div className="p-8 h-[calc(100%-2rem)]">
+      <h1 className="font-bold text-white text-3xl mb-4">Ships Config</h1>
+      <div className="flex gap-8 h-[calc(100%-3rem)]">
+        <div className="flex flex-col w-80 h-full">
+          <Button
+            className="w-full btn-sm btn-success"
+            onClick={async () => {
+              const name = await prompt({header: "Enter ship name"});
+              if (typeof name !== "string" || name.trim().length === 0) return;
+              try {
+                const result = await q.plugin.ship.create.netSend({
+                  name,
+                  pluginId,
+                });
+                navigate(`${result.shipId}`);
+              } catch (err) {
+                if (err instanceof Error) {
+                  toast({
+                    title: "Error creating ship",
+                    body: err.message,
+                    color: "error",
                   });
-                  navigate(`${result.shipId}`);
-                } catch (err) {
-                  if (err instanceof Error) {
-                    toast({
-                      title: "Error creating ship",
-                      body: err.message,
-                      color: "error",
-                    });
-                    return;
-                  }
+                  return;
                 }
-              }}
-            >
-              New Ship
-            </Button>
+              }
+            }}
+          >
+            New Ship
+          </Button>
 
-            <SearchableList
-              items={ships.map(d => ({
-                id: d.name,
-                name: d.name,
-                description: d.description,
-                category: d.category,
-                tags: d.tags,
-              }))}
-              searchKeys={["name", "category", "tags"]}
-              selectedItem={shipId || null}
-              setSelectedItem={({id}) => navigate(`${id}`)}
-              renderItem={c => (
-                <div className="flex justify-between items-center" key={c.id}>
+          <SearchableList
+            items={ships.map(d => ({
+              id: d.name,
+              name: d.name,
+              description: d.description,
+              category: d.category,
+              tags: d.tags,
+            }))}
+            searchKeys={["name", "category", "tags"]}
+            selectedItem={shipId || null}
+            setSelectedItem={({id}) => navigate(`${id}`)}
+            renderItem={c => (
+              <div className="flex justify-between items-center" key={c.id}>
+                <div>
+                  {c.name}
                   <div>
-                    {c.name}
-                    <div>
-                      <small>{c.category}</small>
-                    </div>
+                    <small>{c.category}</small>
                   </div>
                 </div>
-              )}
-            />
-          </div>
-          <Fragment key={ship?.name}>
-            <Outlet />
-          </Fragment>
+              </div>
+            )}
+          />
         </div>
+        <Fragment key={ship?.name}>
+          <Outlet />
+        </Fragment>
       </div>
     </div>
   );
diff --git a/client/src/pages/Config/Themes/ThemeList.tsx b/client/src/pages/Config/Themes/ThemeList.tsx
index bba6c59b..806a7879 100644
--- a/client/src/pages/Config/Themes/ThemeList.tsx
+++ b/client/src/pages/Config/Themes/ThemeList.tsx
@@ -3,11 +3,25 @@ import Menubar from "@thorium/ui/Menubar";
 import SearchableList from "@thorium/ui/SearchableList";
 import Button from "@thorium/ui/Button";
 import {Outlet, useParams, useNavigate} from "react-router-dom";
-import {Fragment} from "react";
+import {Fragment, Suspense} from "react";
 import {toast} from "client/src/context/ToastContext";
 import {q} from "@client/context/AppContext";
 
 export function ThemeList() {
+  const {pluginId} = useParams() as {
+    pluginId: string;
+  };
+  return (
+    <div className="h-full">
+      <Menubar backTo={`/config/${pluginId}/list`}></Menubar>
+      <Suspense>
+        <ThemeListInner />
+      </Suspense>
+    </div>
+  );
+}
+
+function ThemeListInner() {
   const {pluginId, themeId} = useParams() as {
     pluginId: string;
     themeId?: string;
@@ -16,59 +30,56 @@ export function ThemeList() {
   const prompt = usePrompt();
   const [data] = q.plugin.theme.all.useNetRequest({pluginId});
   const theme = data.find(d => d.name === themeId);
+
   return (
-    <div className="h-full">
-      <Menubar backTo={`/config/${pluginId}/list`}></Menubar>
-      <div className="p-8 h-[calc(100%-2rem)]">
-        <h1 className="font-bold text-white text-3xl mb-4">Themes Config</h1>
-        <div className="flex gap-8 h-[calc(100%-3rem)]">
-          <div className="flex flex-col w-80 h-full">
-            <Button
-              className="w-full btn-sm btn-success"
-              onClick={async () => {
-                const name = await prompt({header: "Enter theme name"});
-                if (typeof name !== "string" || name.trim().length === 0)
-                  return;
-                try {
-                  const result = await q.plugin.theme.create.netSend({
-                    name,
-                    pluginId,
+    <div className="p-8 h-[calc(100%-2rem)]">
+      <h1 className="font-bold text-white text-3xl mb-4">Themes Config</h1>
+      <div className="flex gap-8 h-[calc(100%-3rem)]">
+        <div className="flex flex-col w-80 h-full">
+          <Button
+            className="w-full btn-sm btn-success"
+            onClick={async () => {
+              const name = await prompt({header: "Enter theme name"});
+              if (typeof name !== "string" || name.trim().length === 0) return;
+              try {
+                const result = await q.plugin.theme.create.netSend({
+                  name,
+                  pluginId,
+                });
+                navigate(`${result.themeId}`);
+              } catch (err) {
+                if (err instanceof Error) {
+                  toast({
+                    title: "Error creating theme",
+                    body: err.message,
+                    color: "error",
                   });
-                  navigate(`${result.themeId}`);
-                } catch (err) {
-                  if (err instanceof Error) {
-                    toast({
-                      title: "Error creating theme",
-                      body: err.message,
-                      color: "error",
-                    });
-                    return;
-                  }
+                  return;
                 }
-              }}
-            >
-              New theme
-            </Button>
+              }
+            }}
+          >
+            New theme
+          </Button>
 
-            <SearchableList
-              items={data.map(d => ({
-                id: d.name,
-                name: d.name,
-              }))}
-              searchKeys={["name"]}
-              selectedItem={themeId || null}
-              setSelectedItem={({id}) => navigate(`${id}`)}
-              renderItem={c => (
-                <div className="flex justify-between items-center" key={c.id}>
-                  <div>{c.name}</div>
-                </div>
-              )}
-            />
-          </div>
-          <Fragment key={theme?.name}>
-            <Outlet />
-          </Fragment>
+          <SearchableList
+            items={data.map(d => ({
+              id: d.name,
+              name: d.name,
+            }))}
+            searchKeys={["name"]}
+            selectedItem={themeId || null}
+            setSelectedItem={({id}) => navigate(`${id}`)}
+            renderItem={c => (
+              <div className="flex justify-between items-center" key={c.id}>
+                <div>{c.name}</div>
+              </div>
+            )}
+          />
         </div>
+        <Fragment key={theme?.name}>
+          <Outlet />
+        </Fragment>
       </div>
     </div>
   );
diff --git a/client/src/pages/Config/index.tsx b/client/src/pages/Config/index.tsx
index fc0bd956..57db10e9 100644
--- a/client/src/pages/Config/index.tsx
+++ b/client/src/pages/Config/index.tsx
@@ -1,5 +1,5 @@
 import {q} from "@client/context/AppContext";
-import {lazy} from "react";
+import {lazy, Suspense} from "react";
 import {Navigate, Route, Routes} from "react-router-dom";
 
 const PluginEdit = lazy(() => import("./PluginEdit"));
@@ -16,15 +16,25 @@ export default function ConfigRoutes() {
   if (!client.isHost) return <Navigate to="/" replace />;
 
   return (
-    <Routes>
-      <Route path="/" element={<PluginEdit />} />
-      <Route path="/:pluginId" element={<PluginEdit />} />
-      <Route path="/:pluginId/list" element={<ConfigList />} />
-      <Route path="/:pluginId/ships/*" element={<ShipsConfig />} />
-      <Route path="/:pluginId/themes/*" element={<ThemesConfig />} />
-      <Route path="/:pluginId/starmap/*" element={<StarmapConfig />} />
-      <Route path="/:pluginId/systems/*" element={<ShipSystemConfig />} />
-      <Route path="/:pluginId/inventory/*" element={<InventoryConfig />} />
-    </Routes>
+    <>
+      <div className="z-10 relative h-full">
+        <Suspense>
+          <Routes>
+            <Route path="/" element={<PluginEdit />} />
+            <Route path="/:pluginId" element={<PluginEdit />} />
+            <Route path="/:pluginId/list" element={<ConfigList />} />
+            <Route path="/:pluginId/ships/*" element={<ShipsConfig />} />
+            <Route path="/:pluginId/themes/*" element={<ThemesConfig />} />
+            <Route path="/:pluginId/starmap/*" element={<StarmapConfig />} />
+            <Route path="/:pluginId/systems/*" element={<ShipSystemConfig />} />
+            <Route
+              path="/:pluginId/inventory/*"
+              element={<InventoryConfig />}
+            />
+          </Routes>
+        </Suspense>
+      </div>
+      <div className="w-full h-full bg-black/60 fixed top-0 z-0"></div>
+    </>
   );
 }