diff --git a/src/characters/CharacterLabel.vue b/src/characters/CharacterLabel.vue
new file mode 100644
index 0000000..fe3de5e
--- /dev/null
+++ b/src/characters/CharacterLabel.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+import {Character} from "./chartacters.ts";
+
+interface Props {
+  character: Character;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <div class="flex">
+    <img class="me-2" :src="`https://images.evetech.net/characters/${character.characterId}/portrait?size=32`" />
+    <span>{{ character.name }}</span>
+  </div>
+</template>
diff --git a/src/characters/chartacters.ts b/src/characters/chartacters.ts
new file mode 100644
index 0000000..7195bfd
--- /dev/null
+++ b/src/characters/chartacters.ts
@@ -0,0 +1,16 @@
+import {characterControllerApi} from "@/mammon";
+import {defineStore} from "pinia";
+import {ref} from "vue";
+import {CharacterResponse} from "@/generated/mammon";
+
+export type Character = CharacterResponse
+
+export const useCharactersStore = defineStore('characters', () => {
+    const characters = ref<Character[]>([]);
+
+    const refresh = () => characterControllerApi.getCharacters().then(response => characters.value = response.data);
+
+    refresh();
+
+    return {characters, refresh};
+})
\ No newline at end of file
diff --git a/src/characters/index.ts b/src/characters/index.ts
new file mode 100644
index 0000000..ffae57c
--- /dev/null
+++ b/src/characters/index.ts
@@ -0,0 +1,3 @@
+export * from './chartacters.ts'
+
+export {default as CharacterLabel} from './CharacterLabel.vue';
\ No newline at end of file
diff --git a/src/mammon/mammonService.ts b/src/mammon/mammonService.ts
index c10e97d..ba051b1 100644
--- a/src/mammon/mammonService.ts
+++ b/src/mammon/mammonService.ts
@@ -1,9 +1,12 @@
 import {logResource} from "@/service";
 import axios from "axios";
-import {LedgerControllerApi} from "@/generated/mammon";
+import {CharacterControllerApi, LedgerControllerApi} from "@/generated/mammon";
+
+export const mammonUrl = import.meta.env.VITE_MAMMON_URL;
+export const mammonAddCharacterUrl = mammonUrl + "oauth2/authorization/esi"
 
 const mammonAxiosInstance = axios.create({
-    baseURL: import.meta.env.VITE_MAMMON_URL,
+    baseURL: mammonUrl,
     headers: {
         'Accept': 'application/json',
         "Content-Type": "application/json",
@@ -11,4 +14,5 @@ const mammonAxiosInstance = axios.create({
 })
 logResource(mammonAxiosInstance)
 
-export const ledgerControllerApi = new LedgerControllerApi(undefined, import.meta.env.VITE_MAMMON_URL, mammonAxiosInstance);
+export const ledgerControllerApi = new LedgerControllerApi(undefined, mammonUrl, mammonAxiosInstance);
+export const characterControllerApi = new CharacterControllerApi(undefined, mammonUrl, mammonAxiosInstance);
diff --git a/src/pages/Characters.vue b/src/pages/Characters.vue
index 6deb4ce..3103c7e 100644
--- a/src/pages/Characters.vue
+++ b/src/pages/Characters.vue
@@ -1,12 +1,21 @@
 <script setup lang="ts">
 
+import {mammonAddCharacterUrl} from "@/mammon";
+import {storeToRefs} from "pinia";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+
+const {characters} = storeToRefs(useCharactersStore());
+
 const addCharacter = () => {
-    window.location.replace("http://localhost:8080/oauth2/authorization/esi");
+    window.location.replace(mammonAddCharacterUrl);
 }
 </script>
 
 <template>
     <div class="grid mb-2 mt-4">
-        <button class="justify-self-end" @click="addCharacter">Add chacarcter</button>
+      <button class="justify-self-end" @click="addCharacter">Add chacarcter</button>
+      <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
+        <CharacterLabel :character="character" />
+      </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/pages/Rules.vue b/src/pages/Rules.vue
index 5af7627..8eb5db4 100644
--- a/src/pages/Rules.vue
+++ b/src/pages/Rules.vue
@@ -1,10 +1,21 @@
 <script setup lang="ts">
+import {mammonAddCharacterUrl} from "@/mammon";
+import {storeToRefs} from "pinia";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 
+const {characters} = storeToRefs(useCharactersStore());
 
+const addCharacter = () => {
+  window.location.replace(mammonAddCharacterUrl);
+}
 </script>
 
 <template>
-    <div class="mt-4">
-
+  <div class="grid mb-2 mt-4">
+    <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
+      <CharacterLabel class="flex grow" :character="character" />
+      <button class="btn-icon ms-2" @click=""><PencilSquareIcon /></button>
     </div>
-</template>
+  </div>
+</template>
\ No newline at end of file