diff --git a/pages/companions/index.vue b/pages/companions/index.vue
index b8d48d4..d3c28a0 100644
--- a/pages/companions/index.vue
+++ b/pages/companions/index.vue
@@ -23,7 +23,7 @@
         <tbody>
           <tr v-for="companion in p.pages[p.index.value]" :key="companion.contentId" style="position: relative;">
             <td scope="row">
-              <NuxtLink class="text-decoration-none text-light stretched-link" :to="`/companions/overview/${companion.contentId}`">
+              <NuxtLink class="text-decoration-none text-light stretched-link" :to="`/companions/overview/${companion.itemId}`">
                 {{ companion.itemId }}
               </NuxtLink>
             </td>
diff --git a/pages/companions/overview/[id].vue b/pages/companions/overview/[id].vue
index 61c7765..ec64608 100644
--- a/pages/companions/overview/[id].vue
+++ b/pages/companions/overview/[id].vue
@@ -1,3 +1,32 @@
 <template>
-  
-</template>
\ No newline at end of file
+  <div class="row">
+    <div class="col-md-6 col-sm-12">
+      <h1 class="display-4 mb-0">{{ companion.name }}</h1>
+      <p class="text-muted border-bottom -b-3 border-light border-opacity-25 border-4">{{ companion.description }}</p>
+
+      <div class="d-flex flex-wrap gap-3">
+        
+      </div>
+
+    </div>
+
+    <div class="col-md-6 col-sm-12 d-flex justify-content-center align-items-center">
+      <img :src="companion.getLoadoutsIcon('latest')"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Badge from "../../../components/Badge.vue";
+import useClient from "../../../composables/useClient";
+import { Companion } from "~/core/models";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const id = route.params.id as unknown;
+
+const { client } = useClient();
+
+const companions = await client.companions.listAsync({locale: "default", version: "latest"});
+const companion = companions.find((x) => x.itemId == id) || new Companion({});
+</script>
\ No newline at end of file