diff --git a/src/components/CharacterCard.vue b/src/components/CharacterCard.vue
index 45d0392..5c51660 100644
--- a/src/components/CharacterCard.vue
+++ b/src/components/CharacterCard.vue
@@ -1,10 +1,24 @@
 <template>
-  <div>
-    <div
-      v-on:click="selectCharacter()"
-      >
-      {{activeTable == props.character ? "*" :""}}
-      {{name}} the <span v-html="job" /> ({{galders.toLocaleString()}}g) ({{props.character}}, {{items}})</div>
+  <div
+    class="cc_parent"
+    v-on:click="selectCharacter()"
+    >
+    <div class="cc_div1">
+      <span v-html="job" />
+    </div>
+    <div class="cc_div2">name: <br/> items: </div>
+    <div class="cc_div3"> {{name}} <br> {{items}} </div>
+    <div class="cc_div4">
+      {{galders.toLocaleString()}}g
+    </div>
+    <div class="cc_div5">
+    </div>
+    <div class="cc_div6">
+      {{activeTable == props.character ? "**" :""}}
+    </div>
+    <div class="cc_div7">
+      {{currentChar?.path.split("/")[0]}}
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -49,3 +63,26 @@ import { JobNumberToString } from '../lib/trickster';
 import { storage } from '../session_storage';
 import { useStore, useStoreRef } from '../state/state';
 </script>
+
+<style>
+
+.cc_parent {
+  border: 1px black solid;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(7, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.cc_div1 { grid-area: 1 / 1 / 5 / 6; }
+.cc_div2 { grid-area: 5 / 2 / 6 / 3; }
+.cc_div3 { grid-area: 5 / 4 / 6 / 5; }
+.cc_div4 { grid-area: 6 / 4 / 7 / 5; }
+.cc_div5 { grid-area: 1 / 1 / 8 / 6; }
+.cc_div6 { grid-area: 7 / 1 / 8 / 3; }
+.cc_div7 { grid-area: 7 / 4 / 8 / 6; }
+
+</style>
diff --git a/src/components/CharacterRoulette.vue b/src/components/CharacterRoulette.vue
index 7b57d01..f173622 100644
--- a/src/components/CharacterRoulette.vue
+++ b/src/components/CharacterRoulette.vue
@@ -1,7 +1,9 @@
 <template>
-  <div v-for="v in characters">
+  <div id="character_roulette">
+  <div class="single_character_card" v-for="v in characters">
     <CharacterCard :character="v" />
   </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -32,15 +34,27 @@ onMounted(()=>{
     api.GetInventory(activeTable.value)
   }
 })
-
 </script>
 
 <script lang="ts">
-import { defineComponent, computed, PropType, defineProps, defineEmits, ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { getLTOState, LTOApi, LTOApiv0 } from '../lib/lifeto';
-import { LoginHelper, Session } from '../lib/session';
 import { storage } from '../session_storage';
-import { saveStore, useStore, useStoreRef } from '../state/state';
-import log from 'loglevel';
-
+import { saveStore, useStoreRef } from '../state/state';
 </script>
+
+
+<style>
+#character_roulette {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  overflow-x: scroll;
+  width: 1000px;
+}
+
+.single_character_card {
+  display: flex;
+}
+</style>