diff --git a/17th Website/src/api/request.js b/17th Website/src/api/request.js
new file mode 100644
index 0000000..a9e80b5
--- /dev/null
+++ b/17th Website/src/api/request.js	
@@ -0,0 +1,24 @@
+async function QueryApolloGraphQL (setName, query) {
+  return await fetch(
+    'https://unit-tracker-api.iceberg-gaming.com/',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      cache: 'no-cache',
+      body: JSON.stringify({
+        "query": query
+      })
+    })
+    .then(response => response.json())
+    .then(response => {
+      return response.data[setName].items;
+    })
+    .catch((error) => {
+      return console.error('Error:', error);
+    }
+  );
+}
+
+export default QueryApolloGraphQL
\ No newline at end of file
diff --git a/17th Website/src/components/ProfilePage/profile.vue b/17th Website/src/components/ProfilePage/profile.vue
index af2c391..6a227d4 100644
--- a/17th Website/src/components/ProfilePage/profile.vue	
+++ b/17th Website/src/components/ProfilePage/profile.vue	
@@ -12,7 +12,13 @@ export default {
 
 <template>
     <div id="ProfileWrapper">
-        <profileHeader></profileHeader>
+        <div>
+            <profileHeader></profileHeader>
+            <div id="profileSubnavWrapper">
+                
+            </div>
+        </div>
+
         test words
         <div id="profileContentWrapper">
             <RouterView />
diff --git a/17th Website/src/components/ProfilePage/profileHeader.vue b/17th Website/src/components/ProfilePage/profileHeader.vue
index d3426bb..abed1b3 100644
--- a/17th Website/src/components/ProfilePage/profileHeader.vue	
+++ b/17th Website/src/components/ProfilePage/profileHeader.vue	
@@ -1,5 +1,5 @@
 <script>
-// import {subnav} from './profileSubNav.vue'
+import profileSubNav from './profileSubNav.vue';
 
 export default {
     name: 'profileHeader',
@@ -8,14 +8,19 @@ export default {
             count: 0
         }
     },
-    // components: {
-    //     subnav,
-    // }
+    components: {
+        profileSubNav,
+    }
 }
 </script>
 
 <template>
     <div id="wrapper">
+        <div>
+            <profileSubNav link="profile" content="Home"></profileSubNav>
+            <profileSubNav link="activityHistory" content="History"></profileSubNav>
+            <profileSubNav link="shadowbox" content="Shadowbox"></profileSubNav>
+        </div>
         <div id="headerImages">
             <img id="rankImg" src="../icons/misc/test.png" />
             <img id="rangerTab" src="#" />
@@ -25,6 +30,7 @@ export default {
             <h2>Rank</h2>
             <h2>Unit</h2>
         </div>
+
     </div>
 </template>
 
@@ -56,11 +62,10 @@ export default {
 }
 
 @media screen and (max-width: 1300px) {
-  #wrapper {
-    flex-direction: row;
-    border: none;
-    margin-left: 25vw;
-  }
+    #wrapper {
+        flex-direction: row;
+        border: none;
+        margin-left: 25vw;
+    }
 }
-
 </style>
\ No newline at end of file
diff --git a/17th Website/src/components/ProfilePage/profileSubNav.vue b/17th Website/src/components/ProfilePage/profileSubNav.vue
index 400383d..c4157d6 100644
--- a/17th Website/src/components/ProfilePage/profileSubNav.vue	
+++ b/17th Website/src/components/ProfilePage/profileSubNav.vue	
@@ -1,19 +1,18 @@
 <script>
- import { stringLiteral } from '@babel/types';
 import { RouterLink } from 'vue-router'
- 
- export default {
-    name: 'subnav',
-    props: {
-        link: String,
-        content: String,
-        active: Boolean
+export default {
+    props: ['link', 'content', 'active'],
+    components: {
+        RouterLink
     },
- }
+    setup(props) {
+        console.log(props.link);
+    }
+}
 </script>
 
 <template>
     <RouterLink :to="link">
-        <p :class="{active: active}">{{ content }}</p>
+        <p class="ring-1 ring-blue rounded-md my-3 p-2 " :class="{ active: active }">{{ content }}</p>
     </RouterLink>
 </template>
\ No newline at end of file
diff --git a/17th Website/src/components/cards/Alert.vue b/17th Website/src/components/cards/Alert.vue
index 360c6ed..6071323 100644
--- a/17th Website/src/components/cards/Alert.vue	
+++ b/17th Website/src/components/cards/Alert.vue	
@@ -1,9 +1,8 @@
-<script setup>
-import { Icon } from '@iconify/vue'
-</script>
 
 <script>
-export const Alert = {
+import { Icon } from '@iconify/vue'
+
+export default {
     name: 'Alert',
     props: {
         icon: String,
diff --git a/17th Website/src/components/cards/Card.vue b/17th Website/src/components/cards/Card.vue
index 157432f..ca80e25 100644
--- a/17th Website/src/components/cards/Card.vue	
+++ b/17th Website/src/components/cards/Card.vue	
@@ -1,13 +1,12 @@
 <template>
     <div class="card">
-
+        <h1 class="bg-gray-dark rounded-xl w-fit p-5">HELLO</h1>
     </div>
 </template>
 
 
 <style>
 .card {
-    background-color: #ffffff;
     color: var(--white);
     padding: 0 10px;
     margin: 10px;
diff --git a/17th Website/src/router.js b/17th Website/src/router.js
index 17099d1..215c242 100644
--- a/17th Website/src/router.js	
+++ b/17th Website/src/router.js	
@@ -11,18 +11,23 @@ export default createRouter({
     },
     {
         path: '/profile',
-        name: 'Profile',
+        name: 'profile',
         component: () => import('./components/ProfilePage/profile.vue'),
         children: [
           {
-            path: '',
+            path: '/',
             name: 'personnel',
             component: () => import('./components/ProfilePage/personnel.vue')
           },
           {
-            path: 'activityHistory',
+            path: '/activityHistory',
             name: 'activityHistory',
             component: () => import('./components/ProfilePage/activityHistory.vue')
+          },
+          {
+            path: '/shadowbox',
+            name: 'shadowbox',
+            component: () => import('./components/ProfilePage/shadowbox.vue')
           }
         ]
     },
diff --git a/17th Website/src/views/home.vue b/17th Website/src/views/home.vue
index 36a4920..6c93a4f 100644
--- a/17th Website/src/views/home.vue	
+++ b/17th Website/src/views/home.vue	
@@ -1,5 +1,8 @@
+<script setup>
+import card from '../components/cards/Card.vue'
+</script>
+
 <template>
-    <div>
-        <h1>Home screen</h1>
-    </div>
+  <h1>Here is a child component!</h1>
+  <card></card>
 </template>
\ No newline at end of file
diff --git a/17th Website/src/views/users.vue b/17th Website/src/views/users.vue
index e41575f..bb0e2cb 100644
--- a/17th Website/src/views/users.vue	
+++ b/17th Website/src/views/users.vue	
@@ -2,24 +2,24 @@
 import { ref } from 'vue'
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
 import { Icon } from '@iconify/vue'
+import QueryApolloGraphQL from '../api/request'
 
 export default {
     data() {
         return {
-            parentMessage: 'Parent',
-            items: [{ message: 'Foo' }, { message: 'Bar' }],
+            items: [],
             dropped: false,
             search: '',
 
             unitFilters: [
-                { id: 1, name: 'All Groups', disabled: false },
-                { id: 2, name: 'Alpha', disabled: false },
-                { id: 3, name: 'Echo', disabled: false },
-                { id: 4, name: 'HHC', disabled: false },
-                { id: 5, name: 'Recruit', disabled: false },
+                { id: 1, name: 'All Groups', filter: 'none', disabled: false },
+                { id: 2, name: 'Alpha', filter: 'Alpha Company', disabled: false },
+                { id: 3, name: 'Echo', filter: 'Echo Company', disabled: false },
+                { id: 4, name: 'HHC', filter: 'HHC', disabled: false },
+                { id: 5, name: 'Recruit', filter: 'Recruit', disabled: false },
             ],
 
-            unitFilter: { id: 1, name: 'All Groups', disabled: false },
+            unitFilter: { id: 1, name: 'All Groups', filter: 'none', disabled: false },
 
             roleFilters: [
                 { id: 1, name: 'All Roles', disabled: false },
@@ -40,6 +40,21 @@ export default {
             this.search = ''
             this.unitFilter = this.unitFilters[0];
             this.roleFilter = this.roleFilters[0];
+        },
+        filterByName(item) {
+            if (this.search != '')
+                return item.member_name.toLowerCase().includes(this.search.toLowerCase());
+            else
+                return true;
+        },
+        filterByUnit(item) {
+            if (this.unitFilter.filter != 'none')
+                return item.status == this.unitFilter.filter;
+            else
+                return true;
+        },
+        filterByRole(item) {    //THIS IS NOT IMPLEMENTED YET
+            return true;
         }
     },
     components: {
@@ -49,9 +64,19 @@ export default {
         ListboxOptions,
         Icon,
     },
+    mounted() {
+        QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { this.items = value }) //console.log(value); for debug reasons
+    },
+    computed: {
+        filteredTable() {
+            var newTable = this.items;
+            newTable = newTable.filter(this.filterByUnit);
+            newTable = newTable.filter(this.filterByName);
+            return newTable;
+        }
+    }
 }
 
-// const unitFilter = ref(unitFilters[1])
 </script>
 
 <template>
@@ -60,7 +85,7 @@ export default {
 
         <h1>Members</h1>
         <div id="searchRow">
-            <input type="text" v-model="search" placeholder="Search..." />
+            <input type="text" v-model="search" placeholder="Search..." v-on:input="console.log('hello')" />
             <div id="dropdownWrapper">
 
                 <Listbox v-model="unitFilter" class="w-32 mx-2">
@@ -128,10 +153,10 @@ export default {
             </tr>
         </thead>
         <tbody id="tableBody">
-            <tr v-for="(item, index) in items">
-                <td>{{ parentMessage }}</td>
-                <td>{{ index }}</td>
-                <td>{{ item.message }}</td>
+            <tr v-for="(item, index) in filteredTable">
+                <td>{{ item.member_name }}</td>
+                <td>{{ item.status }}</td>
+                <td>{{ item.rank }}</td>
             </tr>
         </tbody>
     </table>