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