diff --git a/src/components/gui/partials/CharacterScreen.vue b/src/components/gui/partials/CharacterScreen.vue
index bcb415b..3b59417 100644
--- a/src/components/gui/partials/CharacterScreen.vue
+++ b/src/components/gui/partials/CharacterScreen.vue
@@ -10,28 +10,31 @@
                 </div>
                 <div class="flex flex-col gap-4">
                     <div class="flex flex-col gap-3 mx-5 mt-2">
-                        <h3>Ethereal</h3>
+                        <h3>{{ gameStore.character?.name }}</h3>
                         <div class="flex gap-4 flex-wrap max-w-[375px]">
                             <ul class="p-0 m-0 list-none">
                                 <li class="leading-6 text-lg">Class:</li>
-                                <li class="leading-6 text-lg">Health Points:</li>
-                                <li class="leading-6 text-lg">Magic Points:</li>
+                                <li class="leading-6 text-lg">Race:</li>
+                                <li class="leading-6 text-lg">Hit Points:</li>
+                                <li class="leading-6 text-lg">Mana Points:</li>
                                 <li class="leading-6 text-lg">Level:</li>
                                 <li class="leading-6 text-lg">Stat Points:</li>
                             </ul>
                             <ul class="p-0 m-0 list-none">
-                                <li class="leading-6 text-lg">Knight</li>
-                                <li class="leading-6 text-lg">100 <span class="text-green">(+15)</span></li>
-                                <li class="leading-6 text-lg">100</li>
-                                <li class="leading-6 text-lg">69</li>
-                                <li class="leading-6 text-lg">3</li>
+                                <li class="leading-6 text-lg min-h-6">Knight</li>
+                                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.characterType?.race }}</li>
+                                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.hitpoints }} <span class="text-green">(+15)</span></li>
+                                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.mana }}</li>
+                                <li class="leading-6 text-lg min-h-6">{{ gameStore.character?.level }}</li>
+                                <li class="leading-6 text-lg min-h-6">3</li>
                             </ul>
                         </div>
                     </div>
                     <div class="flex flex-col gap-3 mx-5 mt-2">
                         <h3>Alignment</h3>
-                        <div class="h-10 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue">
-
+                        <div class="h-8 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue relative">
+                            <!-- TODO: Give slider left value based on alignment (0-100), new characters start with 50 -->
+                            <div class="rounded border-2 border-solid border-white h-10 w-2 absolute top-1/2 -translate-y-1/2"></div>
                         </div>
                     </div>
                 </div>
@@ -56,4 +59,11 @@
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/game'
+
+const gameStore = useGameStore()
+
+</script>
\ No newline at end of file
diff --git a/src/components/gui/partials/Equipment.vue b/src/components/gui/partials/Equipment.vue
index f8f935e..90032e0 100644
--- a/src/components/gui/partials/Equipment.vue
+++ b/src/components/gui/partials/Equipment.vue
@@ -5,9 +5,9 @@
             <div class="flex justify-center items-center flex-wrap gap-20">
                 <div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
                     <div class="h-full flex flex-col justify-center items-center">
-                        <h3>Ethereal</h3>
+                        <h3>{{ gameStore.character?.name }}</h3>
                         <img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
-                        <span class="block text-sm">Level 69</span>
+                        <span class="block text-sm">Level {{ gameStore.character?.level }}</span>
                     </div>
                 </div>
                 <div class="flex flex-col gap-3 mx-5 mt-2">
@@ -80,4 +80,11 @@
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { useGameStore } from '@/stores/game'
+
+const gameStore = useGameStore()
+
+</script>
\ No newline at end of file
diff --git a/src/components/gui/partials/settings/CharacterSettings.vue b/src/components/gui/partials/settings/CharacterSettings.vue
index ce31a35..bca082a 100644
--- a/src/components/gui/partials/settings/CharacterSettings.vue
+++ b/src/components/gui/partials/settings/CharacterSettings.vue
@@ -6,11 +6,15 @@
             <form class="flex gap-2.5 flex-wrap">
                 <div class="form-field-half max-w-[300px]">
                     <label for="name">Name</label>
-                    <input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="name" placeholder="Ethereal" disabled />
+                    <input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
                 </div>
-                <div class="form-field-half max-w-[300px]">
+                <div class="form-field-half max-w-[300px] relative">
                     <label for="class">Class</label>
-                    <input class="input-cyan" :class="{'inactive': !editCharacter}" type="text" name="class" placeholder="Knight" disabled />
+                    <select class="input-cyan" v-model="characterClass" :class="{'inactive': !editCharacter}" name="class" :disabled="!editCharacter">
+                        <option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
+                        <option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
+                    </select>
+                    <span v-if="!editCharacter" class="absolute bottom-[9px] left-[14px] text-sm text-gray-300/50">{{characterClass}}</span>
                 </div>
                 <button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
             </form>
@@ -22,6 +26,7 @@
 import { ref } from 'vue'
 
 const editCharacter = ref(false)
+const characterClass = ref('')
 
 const toggle = () => {
     editCharacter.value = !editCharacter.value