diff --git a/src/App.svelte b/src/App.svelte
index 40ad73b6..6f73c974 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { Router, Link, Route } from "svelte-navigator";
+  import { Router, Route } from "svelte-navigator";
   import Navigation from "./lib/Navigation.svelte";
   import Dash from "./pages/Dash.svelte";
   import Home from "./pages/Home.svelte";
   import Settings from './pages/Settings.svelte';
   import Footer from './lib/Footer.svelte';
+  import Public from "./pages/Public.svelte";
+  import System from "./pages/profiles/System.svelte";
   
   // theme cdns (I might make some myself too)
   let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
@@ -31,6 +33,7 @@
       localStorage.setItem("pk-style", "dark");
     };
   };
+
 </script>
 
 <svelte:head>
@@ -39,14 +42,35 @@
 
 <Router>
   <Navigation bind:style={style}/>
-    <Route path="/">
-        <Home />
-    </Route>
-    <Route path="/dash">
-      <Dash />
-    </Route>
-    <Route path="/settings">
-      <Settings />
+    <Route path="/"><Home /></Route>
+    <Route path="/dash"><Dash /></Route>
+    <Route path="/settings"><Settings /></Route>
+    <Route path="/public/*">
+      <Route path="/"><Public /></Route>
+      <Route path="/s/*">
+        <Route path = "/:id">
+          <System />
+        </Route>
+        <Route path = "/">
+          hey please provide a system
+        </Route>
+      </Route>
+      <Route path="/m/*">
+        <Route path = "/:id">
+          member
+        </Route>
+        <Route path = "/">
+          hey please provide a member
+        </Route>
+      </Route>
+      <Route path="/g/*">
+        <Route path = "/:id">
+          group
+        </Route>
+        <Route path = "/">
+          hey please provide a group
+        </Route>
+      </Route>
     </Route>
   <Footer />
 </Router>
\ No newline at end of file
diff --git a/src/lib/system/Body.svelte b/src/lib/system/Body.svelte
index a6777bbd..382f950d 100644
--- a/src/lib/system/Body.svelte
+++ b/src/lib/system/Body.svelte
@@ -6,6 +6,7 @@
    
     export let user: Sys;
     export let editMode: boolean;
+    export let isPublic: boolean;
 
     let htmlDescription: string;
     if (user.description) { 
@@ -23,23 +24,31 @@
 </script>
 
 <Row>
+    {#if user.id}
     <Col xs={12} lg={4} class="mb-2">
         <b>ID:</b> {user.id}
     </Col>
+    {/if}
+    {#if user.name}
     <Col xs={12} lg={4} class="mb-2">
         <b>Name:</b> {user.name}
     </Col>
+    {/if}
     {#if user.tag}
     <Col xs={12} lg={4} class="mb-2">
         <b>Tag:</b> {user.tag}
     </Col>
+    {/if}
+    {#if user.created}
     <Col xs={12} lg={4} class="mb-2">
         <b>Created:</b> {created}
     </Col>
     {/if}
+    {#if user.timezone}
     <Col xs={12} lg={4} class="mb-2">
         <b>Timezone:</b> {user.timezone}
     </Col>
+    {/if}
     {#if user.color}
     <Col xs={12} lg={4} class="mb-2">
         <b>Color:</b> {user.color}
@@ -63,4 +72,6 @@
 {#if user.banner && settings && settings.appearance.banner_bottom}
 <img src={user.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
 {/if}
-<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
\ No newline at end of file
+{#if !isPublic}
+<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
+{/if}
\ No newline at end of file
diff --git a/src/lib/system/Main.svelte b/src/lib/system/Main.svelte
index 3edaa6a1..52eb3b81 100644
--- a/src/lib/system/Main.svelte
+++ b/src/lib/system/Main.svelte
@@ -8,7 +8,7 @@
 
     export let user: Sys;
     export let isPublic = true;
-    let loading: boolean;
+    let loading = false;
 
     let editMode = false;
 </script>
@@ -17,7 +17,7 @@
     <CardsHeader bind:item={user} bind:loading/>
     <CardBody style="border-left: 4px solid #{user.color}">
         {#if !editMode}
-        <Body bind:user bind:editMode/>
+        <Body bind:user bind:editMode bind:isPublic/>
         {:else}
         <Edit bind:user bind:editMode bind:loading />
         {/if}
diff --git a/src/pages/Public.svelte b/src/pages/Public.svelte
new file mode 100644
index 00000000..141eccd3
--- /dev/null
+++ b/src/pages/Public.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { Container, Row, Col, Card, CardHeader, CardTitle, CardBody, Input, Button } from 'sveltestrap';
+    import { Link } from 'svelte-navigator';
+    import FaRocket from 'svelte-icons/fa/FaRocket.svelte';
+
+    let sysInput: string = "";
+</script>
+
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={10}>
+            <Card>
+                <CardHeader>
+                    <CardTitle style="margin-top: 8px; outline: none;">
+                        <div class="icon d-inline-block">
+                            <FaRocket />
+                        </div>Profile
+                    </CardTitle>
+                </CardHeader>
+                <CardBody>
+                    Submit a <b>system ID</b> to view that system's profile.
+                    <Row>
+                        <Col xs={12} lg={9} class="my-2">
+                            <Input bind:value={sysInput} />
+                        </Col>
+                        <Col xs={12} lg={3} class="my-2 d-flex">
+                            {#if sysInput !== ""}
+                            <Link style="text-decoration: none; flex: 1 0 auto" to="/public/s/{sysInput.trim()}"><Button class="w-100" color="primary">View</Button></Link>
+                            {:else}
+                                <Button class="w-100" disabled color="primary">View</Button>
+                            {/if}
+                        </Col>
+                    </Row>
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+</Container>
\ No newline at end of file
diff --git a/src/pages/profiles/System.svelte b/src/pages/profiles/System.svelte
new file mode 100644
index 00000000..e5464c4e
--- /dev/null
+++ b/src/pages/profiles/System.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
+    import { useParams } from "svelte-navigator";
+    import { onMount } from 'svelte';
+    
+    import System from '../../lib/system/Main.svelte';
+    import PKAPI from '../../api';
+    import Sys from '../../api/system';
+
+    let isPublic = true;
+
+    let user = new Sys({});
+    let settings = JSON.parse(localStorage.getItem("pk-settings"));
+
+    let params = useParams();
+    $: id = $params.id;
+    
+    let err: string;
+    
+    const api = new PKAPI();
+
+    let title = "system"
+
+    onMount(() => {
+        getSystem();
+    })
+
+    async function getSystem() {
+        try {
+            let res: Sys = await api.getSystem({id: id})
+            user = res;
+            title = user.name;
+        } catch (error) {
+            console.log(error);
+            err = error.message;
+        }
+    }
+
+</script>
+
+<!-- display the banner if there's a banner set, and if the current settings allow for it-->
+{#if user && user.banner && settings && settings.appearance.banner_top}
+<div class="banner" style="background-image: url({user.banner})" />
+{/if}
+<Container>
+    <Row>
+        <Col class="mx-auto" xs={12} lg={10}>
+            {#if !user.id && !err}
+            <div class="mx-auto text-center">
+                <Spinner class="d-inline-block" />
+            </div>
+            {:else if err}
+                <Alert color="danger">{err}</Alert>
+            {:else}
+            <Alert color="info">You are currently <b>viewing</b> a system.</Alert>
+            <TabContent class="mt-3">
+                <TabPane tabId="system" tab="System" active>
+                        <System bind:user={user} bind:isPublic={isPublic} />
+                </TabPane>
+                <TabPane tabId="members" tab="Members">
+                        alo
+                </TabPane> 
+            </TabContent>
+            {/if}
+        </Col>
+    </Row>
+</Container>
+
+<svelte:head>
+    <title>pk-webs | {title}</title>
+</svelte:head>
\ No newline at end of file
