diff --git a/app/imports/api/creature/log/CreatureLogs.js b/app/imports/api/creature/log/CreatureLogs.js
index a37569bd..453012e4 100644
--- a/app/imports/api/creature/log/CreatureLogs.js
+++ b/app/imports/api/creature/log/CreatureLogs.js
@@ -137,26 +137,7 @@ const insertCreatureLog = new ValidatedMethod({
   },
 });
 
-const insertTabletopLog = new ValidatedMethod({
-  name: 'creatureLogs.methods.insertTabletopLog',
-  mixins: [RateLimiterMixin],
-  rateLimit: {
-    numRequests: 5,
-    timeInterval: 5000,
-  },
-  validate: new SimpleSchema({
-    log: CreatureLogSchema.omit('date'),
-  }).validator(),
-  run({ log }) {
-    const tabletopId = log.tabletopId;
-    assertUserInTabletop(tabletopId, this.userId);
-    // Build the new log
-    let id = insertCreatureLogWork({ log, method: this })
-    return id;
-  },
-});
-
-export function insertCreatureLogWork({ log, creature, method }) {
+export function insertCreatureLogWork({ log, creature, tabletopId, method }) {
   // Build the new log
   if (typeof log === 'string') {
     log = { content: [{ value: log }] };
@@ -170,8 +151,8 @@ export function insertCreatureLogWork({ log, creature, method }) {
     }
   });
   log.date = new Date();
-  if (creature) log.tabletopId = creature.tabletop;
-
+  if (tabletopId) log.tabletopId = tabletopId;
+  if (creature && creature.tabletop) log.tabletopId = creature.tabletop;
   // Insert it
   let id = CreatureLogs.insert(log);
   if (Meteor.isServer) {
@@ -205,24 +186,39 @@ const logRoll = new ValidatedMethod({
     roll: {
       type: String,
     },
+    tabletopId: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+      optional: true,
+    },
     creatureId: {
       type: String,
       regEx: SimpleSchema.RegEx.Id,
+      optional: true,
     },
   }).validator(),
-  run({ roll, creatureId }) {
-    const creature = Creatures.findOne(creatureId, {
-      fields: {
-        readers: 1,
-        writers: 1,
-        owner: 1,
-        'settings.discordWebhook': 1,
-        name: 1,
-        avatarPicture: 1,
-      }
-    });
-    assertEditPermission(creature, this.userId);
-    const variables = CreatureVariables.findOne({ _creatureId: creatureId });
+  run({ roll, tabletopId, creatureId }) {
+    if (!creatureId && !tabletopId) throw new Meteor.Error('no-id',
+      'A creature id or tabletop id must be given'
+    );
+    let creature;
+    if (creatureId) {
+      creature = Creatures.findOne(creatureId, {
+        fields: {
+          readers: 1,
+          writers: 1,
+          owner: 1,
+          'settings.discordWebhook': 1,
+          name: 1,
+          avatarPicture: 1,
+        }
+      });
+      assertEditPermission(creature, this.userId);
+    }
+    if (tabletopId) {
+      assertUserInTabletop(tabletopId, this.userId);
+    }
+    const variables = CreatureVariables.findOne({ _creatureId: creatureId }) || {};
     let logContent = []
     let parsedResult = undefined;
     try {
@@ -263,11 +259,11 @@ const logRoll = new ValidatedMethod({
       date: new Date(),
     };
 
-    let id = insertCreatureLogWork({ log, creature, method: this });
+    let id = insertCreatureLogWork({ log, creature, tabletopId, method: this });
 
     return id;
   },
 });
 
 export default CreatureLogs;
-export { CreatureLogSchema, insertCreatureLog, logRoll, insertTabletopLog, PER_CREATURE_LOG_LIMIT };
+export { CreatureLogSchema, insertCreatureLog, logRoll, PER_CREATURE_LOG_LIMIT };
diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computeAction.js b/app/imports/api/engine/computation/computeComputation/computeByType/computeAction.js
index 663922a5..86d23e80 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computeAction.js
+++ b/app/imports/api/engine/computation/computeComputation/computeByType/computeAction.js
@@ -9,8 +9,7 @@ export default function computeAction(computation, node) {
   computeResources(computation, node);
   if (!prop.resources) return;
   prop.resources.itemsConsumed.forEach(itemConsumed => {
-    if (!itemConsumed.itemId) return;
-    if (itemConsumed.available < itemConsumed.quantity?.value) {
+    if (!itemConsumed.itemId || itemConsumed.available < itemConsumed.quantity?.value) {
       prop.insufficientResources = true;
     }
   });
diff --git a/app/imports/api/engine/loadCreatures.js b/app/imports/api/engine/loadCreatures.js
index aa036a37..829033cb 100644
--- a/app/imports/api/engine/loadCreatures.js
+++ b/app/imports/api/engine/loadCreatures.js
@@ -10,15 +10,17 @@ export const loadedCreatures = new Map(); // creatureId => {creature, properties
 export function loadCreature(creatureId, subscription) {
   if (!creatureId) throw 'creatureId is required';
   let creature = loadedCreatures.get(creatureId);
+  if (!creature || !creature.subs.has(subscription)) {
+    subscription.onStop(() => {
+      unloadCreature(creatureId, subscription);
+    });
+  }
   if (loadedCreatures.has(creatureId)) {
     creature.subs.add(subscription);
   } else {
     creature = new LoadedCreature(subscription, creatureId);
     loadedCreatures.set(creatureId, creature);
   }
-  subscription.onStop(() => {
-    unloadCreature(creatureId, subscription);
-  });
 }
 
 function unloadCreature(creatureId, subscription) {
@@ -43,7 +45,7 @@ export function getSingleProperty(creatureId, propertyId) {
   const prop = CreatureProperties.findOne({
     _id: propertyId,
     'ancestors.id': creatureId,
-    'removed': {$ne: true},
+    'removed': { $ne: true },
   }, {
     sort: { order: 1 },
   });
@@ -61,7 +63,7 @@ export function getProperties(creatureId) {
   // console.time(`Cache miss on creature properties: ${creatureId}`)
   const props = CreatureProperties.find({
     'ancestors.id': creatureId,
-    'removed': {$ne: true},
+    'removed': { $ne: true },
   }, {
     sort: { order: 1 },
   }).fetch();
@@ -73,7 +75,7 @@ export function getPropertiesOfType(creatureId, propType) {
   if (loadedCreatures.has(creatureId)) {
     const creature = loadedCreatures.get(creatureId);
     const props = []
-    for (const prop of creature.properties.values()){
+    for (const prop of creature.properties.values()) {
       if (prop.type === propType) {
         props.push(prop);
       }
@@ -97,7 +99,7 @@ export function getCreature(creatureId) {
   if (loadedCreatures.has(creatureId)) {
     const loadedCreature = loadedCreatures.get(creatureId);
     const creature = loadedCreature.creature;
-    if (creature) {  
+    if (creature) {
       const cloneCreature = EJSON.clone(creature);
       return cloneCreature;
     }
@@ -118,7 +120,7 @@ export function getVariables(creatureId) {
     }
   }
   // console.time(`Cache miss on variables: ${creatureId}`);
-  const variables = CreatureVariables.findOne({_creatureId: creatureId});
+  const variables = CreatureVariables.findOne({ _creatureId: creatureId });
   // console.timeEnd(`Cache miss on variables: ${creatureId}`);
   return variables;
 }
@@ -148,7 +150,7 @@ export function getProperyAncestors(creatureId, propertyId) {
     // Fetch from database
     return CreatureProperties.find({
       _id: { $in: ancestorIds },
-      removed: {$ne: true},
+      removed: { $ne: true },
     }, {
       sort: { order: 1 },
     }).fetch();
@@ -164,7 +166,7 @@ export function getPropertyDecendants(creatureId, propertyId) {
   if (loadedCreatures.has(creatureId)) {
     const creature = loadedCreatures.get(creatureId);
     const props = [];
-    for(const prop of creature.properties.values()){
+    for (const prop of creature.properties.values()) {
       if (prop.ancestors[expectedAncestorPostition]?.id === propertyId) {
         props.push(prop);
       }
@@ -216,7 +218,7 @@ class LoadedCreature {
           compute();
         },
       });
-      
+
       // Observe the creature itself
       self.creatureObserver = Creatures.find({
         _id: creatureId,
@@ -239,7 +241,7 @@ class LoadedCreature {
       self.variablesObserver = CreatureVariables.find({
         _creatureId: creatureId,
       }, {
-        fields: { _creatureId: 0},
+        fields: { _creatureId: 0 },
       }).observeChanges({
         added(id, fields) {
           fields._id = id;
diff --git a/app/imports/api/log/LogComponent.vue b/app/imports/api/log/LogComponent.vue
deleted file mode 100644
index d3036749..00000000
--- a/app/imports/api/log/LogComponent.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template lang="html">
-  <div
-    style="height: 100%; overflow: hidden;"
-    class="character-log layout column justify-end"
-  >
-    <v-slide-y-reverse-transition
-      group
-      hide-on-leave
-      class="card-raised-background flex layout column reverse align-end pa-3"
-      style="overflow: auto;"
-    >
-      <log-entry
-        v-for="log in logs"
-        :key="log._id"
-        :model="log"
-        :show-name="showName"
-      />
-    </v-slide-y-reverse-transition>
-    <v-card>
-      <v-text-field
-        v-model="input"
-        class="mx-2 mb-2"
-        persistent-hint
-        style="flex-grow: 0"
-        append-outer-icon="mdi-send"
-        :hint="inputHint"
-        :error-messages="inputError"
-        :disabled="!editPermission"
-        @click:append-outer="submit"
-        @keyup.enter="submit"
-      />
-    </v-card>
-  </div>
-</template>
-
-<script lang="js">
-import LogEntry from '/imports/client/ui/log/LogEntry.vue';
-import { parse, prettifyParseError } from '/imports/parser/parser.js';
-import resolve, { toString } from '/imports/parser/resolve.js';
-
-export default {
-  components: {
-    LogEntry,
-  },
-  props: {
-    logs: {
-      type: Array,
-      required: true,
-    },
-    editPermission: Boolean,
-    showName: Boolean,
-  },
-  data(){return {
-    inputHint: undefined,
-    inputError: undefined,
-    input: undefined,
-  }},
-  watch: {
-    input(value){
-      this.input = value;
-      this.inputHint = this.inputError = undefined;
-      if (!this.input) return;
-      let result;
-      try {
-        result = parse(value);
-      } catch (e){
-        if (e.constructor.name === 'EndOfInputError'){
-          this.inputError = '...';
-        } else {
-          let error = prettifyParseError(e);
-          this.inputError = error;
-        }
-        return;
-      }
-      try {
-        let {result: compiled} = resolve('compile', result, this.creature.variables);
-        this.inputHint = toString(compiled);
-        return;
-      } catch (e){
-        console.warn(e);
-        this.inputError = 'Compilation error';
-        return;
-      }
-    },
-  },
-  methods: {
-    submit(){
-      if (this.inputError || !this.input) return;
-      this.$emit('submit', this.input);
-      this.input = '';
-    },
-  },
-}
-
-</script>
-
-<style lang="css" scoped>
-</style>
diff --git a/app/imports/api/tabletop/map/TabletopMap.vue b/app/imports/api/tabletop/map/TabletopMap.vue
deleted file mode 100644
index 0c87c5ae..00000000
--- a/app/imports/api/tabletop/map/TabletopMap.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div>
-    <canvas
-      ref="map"
-      class="tabletop-map"
-    />
-  </div>
-</template>
-
-<script>
-import * as THREE from 'three';
-import { Tracker } from 'meteor/tracker'
-import { MapControls } from '/imports/client/ui/tabletop/three/OrbitControls.js';
-
-const maps = [
-  {
-    name: 'first map',
-    position: { x: 0, y: 0 },
-    width: 5,
-    height: 5,
-    texture: '/images/battlemap.webp',
-  }
-];
-
-export default {
-  mounted(){
-    const scene = new THREE.Scene();
-    const perspectiveCam = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-    perspectiveCam.position.z = 5;
-    const orthoCam = new THREE.OrthographicCamera( -2, 2, 2, -2, 1, 1000 );
-    orthoCam.position.z = 5
-    const activeCamera = orthoCam;
-
-
-    const renderer = new THREE.WebGLRenderer({canvas: this.$refs.map});
-
-    activeCamera.up.set( 0, 0, 1 ); // Use z as upwards
-    const controls = new MapControls( activeCamera, renderer.domElement );
-
-    maps.forEach(map => {
-      const texture = new THREE.TextureLoader().load( map.texture );
-      const material = new THREE.MeshBasicMaterial({ map: texture });
-      material.map.needsUpdate = true;
-      const plane = new THREE.Mesh(new THREE.PlaneGeometry(map.width, map.height), material);
-      plane.overdraw = true;
-      scene.add(plane);
-    });
-
-  /*
-    const axesHelper = new THREE.AxesHelper( 5 );
-    scene.add( axesHelper );
-  */
-
-    function resizeCanvasToDisplaySize() {
-      const canvas = renderer.domElement;
-      // look up the size the canvas is being displayed
-      const width = canvas.clientWidth;
-      const height = canvas.clientHeight - 50;
-
-      // adjust displayBuffer size to match
-      if (canvas.width !== width || canvas.height !== height) {
-        // you must pass false here or three.js sadly fights the browser
-        perspectiveCam.aspect = width / height;
-        orthoCam.left= width / -200;
-        orthoCam.right = width / 200;
-        orthoCam.top = height / 200;
-        orthoCam.bottom = height / -200;
-        perspectiveCam.updateProjectionMatrix();
-        orthoCam.updateProjectionMatrix();
-        controls.update();
-        renderer.setSize(width, height, false);
-      }
-    }
-    function animate() {
-      resizeCanvasToDisplaySize();
-      renderer.render( scene, activeCamera );
-      requestAnimationFrame( animate );
-    }
-    animate();
-  },
-}
-</script>
-
-<style>
-  .tabletop-map {
-    height: 100%;
-    width: 100%;
-  }
-</style>
\ No newline at end of file
diff --git a/app/imports/client/ui/components/RollPopup.vue b/app/imports/client/ui/components/RollPopup.vue
index d7cb25b8..0aaca754 100644
--- a/app/imports/client/ui/components/RollPopup.vue
+++ b/app/imports/client/ui/components/RollPopup.vue
@@ -12,8 +12,8 @@
         <v-btn
           v-bind="$attrs"
           :class="buttonClass"
-          v-on="on"
-          @click.stop
+          v-on="noClick ? {} : on"
+          @click="e => { if (!noClick) e.stopPropagation(); }"
         >
           <slot />
         </v-btn>
@@ -90,6 +90,7 @@ export default {
       type: Number,
       default: undefined,
     },
+    noClick: Boolean,
   },
   data(){return {
     open: false,
diff --git a/app/imports/client/ui/creature/character/CharacterSheet.vue b/app/imports/client/ui/creature/character/CharacterSheet.vue
index 75f4cbd8..568ebe79 100644
--- a/app/imports/client/ui/creature/character/CharacterSheet.vue
+++ b/app/imports/client/ui/creature/character/CharacterSheet.vue
@@ -30,17 +30,17 @@
       <div
         v-else
         key="character-tabs"
-        class="card-background"
+        class="card-background fill-height"
       >
         <v-tabs-items
           :key=" '' +
             creature.settings.hideSpellsTab +
             creature.settings.showTreeTab
           "
-          :value="$store.getters.tabById($route.params.id)"
+          :value="$store.getters.tabById(creatureId)"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
-            {id: $route.params.id, tab: e}
+            {id: creatureId, tab: e}
           )"
         >
           <v-tab-item>
@@ -68,11 +68,10 @@
             <tree-tab :creature-id="creatureId" />
           </v-tab-item>
         </v-tabs-items>
-        <character-sheet-initiative />
       </div>
     </v-fade-transition>
     <character-sheet-fab
-      v-if="$vuetify.breakpoint.xsOnly"
+      v-if="!embedded && $vuetify.breakpoint.xsOnly"
       direction="top"
       fixed
       bottom
@@ -81,15 +80,15 @@
       :edit-permission="editPermission"
     />
     <v-bottom-navigation
-      v-if="$vuetify.breakpoint.xsOnly && creature && creature.settings"
+      v-if="!embedded && $vuetify.breakpoint.xsOnly && creature && creature.settings"
       app
       shift
       mandatory
       class="bottom-nav-btns"
-      :value="$store.getters.tabById($route.params.id)"
+      :value="$store.getters.tabById(creatureId)"
       @change="e => $store.commit(
         'setTabForCharacterSheet',
-        {id: $route.params.id, tab: e}
+        {id: creatureId, tab: e}
       )"
     >
       <v-btn>
@@ -164,7 +163,9 @@ export default {
       type: String,
       required: true,
     },
+    embedded: Boolean,
   },
+  // @ts-ignore
   reactiveProvide: {
     name: 'context',
     include: ['creatureId', 'editPermission'],
@@ -250,7 +251,11 @@ export default {
 <style>
 .character-sheet .v-window-item {
   min-height: calc(100vh - 96px);
-  padding-bottom: 70px;
   overflow: hidden;
 }
+
+.dialog-component .character-sheet .v-window-item {
+  min-height: unset;
+  overflow: unset;
+}
 </style>
diff --git a/app/imports/client/ui/dialogStack/DialogComponentIndex.js b/app/imports/client/ui/dialogStack/DialogComponentIndex.js
index 471d3b6a..bf084614 100644
--- a/app/imports/client/ui/dialogStack/DialogComponentIndex.js
+++ b/app/imports/client/ui/dialogStack/DialogComponentIndex.js
@@ -1,6 +1,7 @@
 // Load commonly used dialogs immediately
 import InsertPropertyDialog from '/imports/client/ui/properties/InsertPropertyDialog.vue';
 import CharacterCreationDialog from '/imports/client/ui/creature/character/CharacterCreationDialog.vue';
+import CharacterSheetDialog from '/imports/client/ui/tabletop/CharacterSheetDialog.vue';
 import CastSpellWithSlotDialog from '/imports/client/ui/properties/components/spells/CastSpellWithSlotDialog.vue';
 import CreatureFormDialog from '/imports/client/ui/creature/CreatureFormDialog.vue';
 import CreaturePropertyDialog from '/imports/client/ui/creature/creatureProperties/CreaturePropertyDialog.vue';
@@ -37,6 +38,7 @@ export default {
   ArchiveDialog,
   CastSpellWithSlotDialog,
   CharacterCreationDialog,
+  CharacterSheetDialog,
   CreatureFormDialog,
   CreaturePropertyDialog,
   CreaturePropertyFromLibraryDialog,
diff --git a/app/imports/client/ui/layouts/Sidebar.vue b/app/imports/client/ui/layouts/Sidebar.vue
index 9037b346..e8bfe92c 100644
--- a/app/imports/client/ui/layouts/Sidebar.vue
+++ b/app/imports/client/ui/layouts/Sidebar.vue
@@ -80,6 +80,7 @@ export default {
   components: {
     CreatureFolderList
   },
+  // @ts-ignore
   meteor: {
     $subscribe: {
       'characterList': [],
diff --git a/app/imports/client/ui/log/CharacterLog.vue b/app/imports/client/ui/log/CharacterLog.vue
index f4e9582a..6f32d184 100644
--- a/app/imports/client/ui/log/CharacterLog.vue
+++ b/app/imports/client/ui/log/CharacterLog.vue
@@ -25,8 +25,11 @@
         :hint="inputHint"
         :error-messages="inputError"
         :disabled="!editPermission"
+        :loading="submitLoading"
         @click:append-outer="submit"
         @keyup.enter="submit"
+        @keyup.up="decrementHistory"
+        @keyup.down="incrementHistory"
       />
     </v-card>
   </div>
@@ -40,6 +43,7 @@ import { assertEditPermission } from '/imports/api/creature/creatures/creaturePe
 import { parse, prettifyParseError } from '/imports/parser/parser.js';
 import resolve, { toString } from '/imports/parser/resolve.js';
 import LogEntry from '/imports/client/ui/log/LogEntry.vue';
+import { Tracker } from 'meteor/tracker'
 
 export default {
   components: {
@@ -48,22 +52,70 @@ export default {
   props: {
     creatureId: {
       type: String,
-      required: true,
+      default: undefined,
+    },
+    tabletopId: {
+      type: String,
+      default: undefined,
     },
   },
   data(){return {
     inputHint: undefined,
     inputError: undefined,
     input: undefined,
+    history: [],
+    historyIndex: 1,
+    submitLoading: false,
   }},
   watch: {
     input(value){
       this.input = value;
+      this.recalculate();
+    },
+    creatureId() {
+      Tracker.afterFlush(() => this.recalculate())
+    },
+    historyIndex(i) {
+      if (typeof this.history[i] === 'string') {
+        this.input = this.history[i];
+      }
+    }
+  },
+  methods: {
+    submit() {
+      if (!this.input) return;
+      if (this.submitLoading) return;
+      const log = {
+        roll: this.input,
+      };
+      if (this.tabletopId) log.tabletopId = this.tabletopId;
+      if (this.creatureId) log.creatureId = this.creatureId;
+      this.submitLoading = true;
+      logRoll.call(log, (error) => {
+        this.submitLoading = false;
+        if (!error) {
+          this.addHistory(this.input);
+          this.input = '';
+          this.inputError = undefined;
+          return;
+        }
+        this.inputError = error.message || error.toString();
+        console.error(error);
+      });
+    },
+    addHistory(string) {
+      // Don't add duplicates back to back in history
+      if (string === this.history[this.history.length - 1]) return;
+      this.history.push(string);
+      if (this.history.length > 50) this.history.shift();
+      this.historyIndex = this.history.length;
+    },
+    recalculate() {
       this.inputHint = this.inputError = undefined;
       if (!this.input) return;
       let result;
       try {
-        result = parse(value);
+        result = parse(this.input);
       } catch (e){
         if (e.constructor.name === 'EndOfInputError'){
           this.inputError = '...';
@@ -83,24 +135,29 @@ export default {
         return;
       }
     },
-  },
-  methods: {
-    submit(input){
-      logRoll.call({
-        roll: input,
-        creatureId: this.creatureId,
-      }, (error) => {
-        if (error) console.error(error);
-      });
+    incrementHistory() {
+      if (this.historyIndex < this.history.length) {
+        this.historyIndex += 1;
+      }
     },
+    decrementHistory() {
+      if (this.historyIndex > 0) {
+        this.historyIndex -= 1;
+      }
+    }
   },
+  // @ts-ignore
   meteor: {
-    logs(){
-      return CreatureLogs.find({
-        creatureId: this.creatureId,
-      }, {
+    logs() {
+      const filter = {};
+      if (this.tabletopId) {
+        filter.tabletopId = this.tabletopId;
+      } else if (this.creatureId) {
+        filter.creatureId = this.creatureId;
+      }
+      return CreatureLogs.find(filter, {
         sort: {date: -1},
-        limit: 20
+        limit: 100
       });
     },
     creature(){
diff --git a/app/imports/client/ui/properties/components/actions/AttributeConsumedView.vue b/app/imports/client/ui/properties/components/actions/AttributeConsumedView.vue
index 26571332..9ae84918 100644
--- a/app/imports/client/ui/properties/components/actions/AttributeConsumedView.vue
+++ b/app/imports/client/ui/properties/components/actions/AttributeConsumedView.vue
@@ -4,16 +4,23 @@
     :class="insufficient && 'error--text'"
   >
     <div
+      v-if="model.quantity && model.quantity.value !== 1"
       class="mr-2"
       style="width: 24px; text-align: center;"
     >
-      {{ model.quantity && model.quantity.value }}
+      {{ model.quantity.value }}
     </div>
     <div
       class="text-no-wrap text-truncate"
     >
       {{ model.statName || model.variableName }}
     </div>
+    <div
+      v-if="(typeof model.available) == 'number'"
+      class="text--disabled text-no-wrap text-truncate ml-1 flex-shrink-0"
+    >
+      ({{ model.available }})
+    </div>
   </div>
 </template>
 
diff --git a/app/imports/client/ui/properties/components/actions/ItemConsumedView.vue b/app/imports/client/ui/properties/components/actions/ItemConsumedView.vue
index f0eae75a..11be31fb 100644
--- a/app/imports/client/ui/properties/components/actions/ItemConsumedView.vue
+++ b/app/imports/client/ui/properties/components/actions/ItemConsumedView.vue
@@ -27,28 +27,30 @@
             :color="model.itemColor"
           />
           <div
+            v-if="quantity !== 1"
             class="mr-2 text-no-wrap"
             style="min-width: 24px; text-align: center;"
           >
-            <template v-if="quantity !== 1">
-              {{ model.available }} / {{ quantity }}
-            </template>
-            <template v-else>
-              {{ model.available }}
-            </template>
+            {{ quantity }}
           </div>
-          <div
-            class="text-no-wrap text-truncate flex"
-          >
-            <template v-if="model.itemId">
-              {{ model.itemName }}
-            </template>
-            <span
-              v-else
-              class="error--text"
+          <template v-if="model.itemId">
+            <div
+              class="text-no-wrap text-truncate"
             >
-              Select item
-            </span>
+              {{ model.itemName }}
+            </div>
+            <div
+              v-if="(typeof model.available) == 'number'"
+              class="text--disabled text-no-wrap text-truncate ml-1 flex-shrink-0"
+            >
+              ({{ model.available }})
+            </div>
+          </template>
+          <div
+            v-else
+            class="error--text text-no-wrap text-truncate flex"
+          >
+            Select item
           </div>
           <v-icon
             v-if="context.editPermission"
diff --git a/app/imports/client/ui/styles/cardColors.css b/app/imports/client/ui/styles/cardColors.css
index 04f0f52e..2873e9a4 100644
--- a/app/imports/client/ui/styles/cardColors.css
+++ b/app/imports/client/ui/styles/cardColors.css
@@ -7,14 +7,22 @@
   background: #151515;
 }
 
+.card-background .v-tabs-items.theme--dark {
+  background: #151515;
+}
+
 .theme--light .card-background {
   background: #f6f6f6;
 }
 
+.card-background .v-tabs-items.theme--light {
+  background: #f6f6f6;
+}
+
 .theme--dark .card-raised-background {
   background: #1d1d1d;
 }
 
 .theme--light .card-raised-background {
   background: #fafafa;
-}
+}
\ No newline at end of file
diff --git a/app/imports/api/tabletop/CharacterSheetDialog.vue b/app/imports/client/ui/tabletop/CharacterSheetDialog.vue
similarity index 51%
rename from app/imports/api/tabletop/CharacterSheetDialog.vue
rename to app/imports/client/ui/tabletop/CharacterSheetDialog.vue
index 93367fe8..f3b010b0 100644
--- a/app/imports/api/tabletop/CharacterSheetDialog.vue
+++ b/app/imports/client/ui/tabletop/CharacterSheetDialog.vue
@@ -1,41 +1,60 @@
 <template>
   <dialog-base>
-    <template #replace-toolbar>
+    <template #toolbar-extension>
       <v-tabs
         v-if="creature && creature.settings"
-        v-model="tab"
-        :color="$vuetify.theme.themes.dark.primary"
+        :value="$store.getters.tabById(creatureId)"
+        :color="$vuetify.theme.themes.dark.primary" 
+        class="flex"
+        style="min-width: 0"
+        centered
+        grow
+        max="100px"
+        @change="e => $store.commit(
+          'setTabForCharacterSheet',
+          {id: creatureId, tab: e}
+        )"
       >
         <v-tab>
           Stats
         </v-tab>
         <v-tab>
-          Features
-        </v-tab>
-        <v-tab>
-          Inventory
+          Actions
         </v-tab>
         <v-tab v-if="!creature.settings.hideSpellsTab">
           Spells
         </v-tab>
         <v-tab>
-          Character
+          Inventory
+        </v-tab>
+        <v-tab>
+          Features
+        </v-tab>
+        <v-tab>
+          Journal
+        </v-tab>
+        <v-tab>
+          Build
         </v-tab>
         <v-tab v-if="creature.settings.showTreeTab">
           Tree
         </v-tab>
       </v-tabs>
     </template>
-    <character-sheet
-      show-menu-button
-      :creature-id="creatureId"
-    />
+    <template #unwrapped-content>
+      <character-sheet
+        show-menu-button
+        embedded
+        :creature-id="creatureId"
+      />
+    </template>
   </dialog-base>
 </template>
 
 <script lang="js">
 import DialogBase from '/imports/client/ui/dialogStack/DialogBase.vue';
 import CharacterSheet from '/imports/client/ui/creature/character/CharacterSheet.vue';
+import Creatures from '/imports/api/creature/creatures/Creatures.js';
 
 export default {
 	components: {
@@ -48,6 +67,13 @@ export default {
       required: true,
     },
   },
+  // @ts-ignore
+  meteor: {
+    creature() {
+      if (!this.creatureId) return;
+      return Creatures.findOne(this.creatureId);
+    },
+  },
   data(){return {
     tab: 0,
   }},
diff --git a/app/imports/client/ui/tabletop/TabletopActionCard.vue b/app/imports/client/ui/tabletop/TabletopActionCard.vue
new file mode 100644
index 00000000..92b6e0bd
--- /dev/null
+++ b/app/imports/client/ui/tabletop/TabletopActionCard.vue
@@ -0,0 +1,395 @@
+<template lang="html">
+  <v-sheet
+    class="action-card  overflow-y-auto"
+    rounded
+    :class="cardClasses"
+    :data-id="model._id"
+  >
+    <div class="layout align-center px-3">
+      <div
+        class="avatar"
+        :style="{ opacity: active ? '' : '0.5'}"
+      >
+        <roll-popup
+          v-if="rollBonus"
+          :icon="!active"
+          :outlined="!active"
+          :fab="active"
+          style="letter-spacing: normal;"
+          class="mr-2"
+          :no-click="!active"
+          :style="{
+            fontSize: active ? '24px' : '16px'
+          }"
+          :large="active"
+          :color="model.color || 'primary'"
+          :loading="doActionLoading"
+          :disabled="model.insufficientResources || !context.editPermission || !!targetingError"
+          :roll-text="rollBonus"
+          :name="model.name"
+          :advantage="model.attackRoll && model.attackRoll.advantage"
+          @roll="doAction"
+        >
+          <template v-if="rollBonus && !rollBonusTooLong">
+            {{ rollBonus }}
+          </template>
+          <property-icon
+            v-else
+            :model="model"
+          />
+        </roll-popup>
+        <v-btn
+          v-else
+          :icon="!active"
+          :outlined="!active"
+          :fab="active"
+          style="letter-spacing: normal;"
+          class="mr-2"
+          :style="{
+            fontSize: active ? '24px' : '16px'
+          }"
+          :large="active"
+          :color="model.color || 'primary'"
+          :loading="doActionLoading"
+          :disabled="model.insufficientResources || !context.editPermission || !!targetingError"
+          v-on="active ? {
+            click: e => {
+              if (!active) return;
+              e.stopPropagation();
+              doAction({});
+            }
+          } : {}"
+        >
+          <template v-if="rollBonus && !rollBonusTooLong">
+            {{ rollBonus }}
+          </template>
+          <property-icon
+            v-else
+            :model="model"
+          />
+        </v-btn>
+      </div>
+      <div
+        class="action-header flex layout column justify-center pl-1"
+        style="height: 72px; cursor: pointer;"
+        @mouseover="() => { if (active) hovering = true }"
+        @mouseleave="() => { if (active) hovering = false }"
+        @click="(e) => { if (active) { $emit('deactivate'); e.stopPropagation() } }"
+      >
+        <div class="action-title my-1">
+          {{ model.name || propertyName }}
+        </div>
+        <div class="action-sub-title layout align-center">
+          <div
+            v-if="targetingError"
+            class="flex error--text"
+          >
+            {{ targetingError }}
+          </div>
+          <template v-else>
+            <div class="flex">
+              {{ model.actionType }}
+            </div>
+            <div v-if="Number.isFinite(model.usesLeft)">
+              {{ model.usesLeft }} uses
+            </div>
+          </template>
+        </div>
+      </div>
+      <v-btn
+        v-if="active"
+        icon
+        class="flex-grow-0"
+        @click.stop="openPropertyDetails(model._id)"
+      >
+        <v-icon>mdi-window-restore</v-icon>
+      </v-btn>
+    </div>
+    <div class="px-3 pb-3">
+      <template
+        v-if="model.resources && model.resources.attributesConsumed.length ||
+          model.resources.itemsConsumed.length"
+      >
+        <attribute-consumed-view
+          v-for="attributeConsumed in model.resources.attributesConsumed"
+          :key="attributeConsumed._id"
+          class="action-child"
+          :model="attributeConsumed"
+        />
+        <item-consumed-view
+          v-for="itemConsumed in model.resources.itemsConsumed"
+          :key="itemConsumed._id"
+          class="action-child"
+          :model="itemConsumed"
+          :action="model"
+        />
+        <v-divider
+          v-if="active && model.summary"
+          class="my-2"
+        />
+      </template>
+      <template v-if="active && model.summary">
+        <markdown-text :markdown="model.summary.value || model.summary.text" />
+      </template>
+      <v-divider v-if="active && children && children.length" />
+      <tree-node-list
+        v-if="active && children && children.length"
+        start-expanded
+        :children="children"
+        @selected="e => $emit('sub-click', e)"
+      />
+    </div>
+    <card-highlight :active="hovering" />
+    <div
+      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer"
+      :style="{pointerEvents: active ? 'none' : ''}"
+      @mouseover="() => { if (!active) hovering = true }"
+      @mouseleave="hovering = false"
+      @click="() => { if (!active) $emit('activate') }"
+    />
+  </v-sheet>
+</template>
+
+<script lang="js">
+import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import numberToSignedString from '/imports/api/utility/numberToSignedString.js';
+import doAction from '/imports/api/engine/actions/doAction.js';
+import AttributeConsumedView from '/imports/client/ui/properties/components/actions/AttributeConsumedView.vue';
+import ItemConsumedView from '/imports/client/ui/properties/components/actions/ItemConsumedView.vue';
+import PropertyIcon from '/imports/client/ui/properties/shared/PropertyIcon.vue';
+import RollPopup from '/imports/client/ui/components/RollPopup.vue';
+import MarkdownText from '/imports/client/ui/components/MarkdownText.vue';
+import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
+import CardHighlight from '/imports/client/ui/components/CardHighlight.vue';
+import TreeNodeList from '/imports/client/ui/components/tree/TreeNodeList.vue';
+import { nodeArrayToTree } from '/imports/api/parenting/nodesToTree.js';
+import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+import { some } from 'lodash';
+
+export default {
+  components: {
+    AttributeConsumedView,
+    ItemConsumedView,
+    MarkdownText,
+    PropertyIcon,
+    RollPopup,
+    CardHighlight,
+    TreeNodeList,
+  },
+  inject: {
+    context: {
+      default: {},
+    },
+    theme: {
+      default: {
+        isDark: false,
+      },
+    },
+  },
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+    targets: {
+      type: Array,
+      default: undefined,
+    },
+    active: Boolean,
+  },
+  data() {
+    return {
+      activated: undefined,
+      doActionLoading: false,
+      hovering: false,
+    }
+  },
+  computed: {
+    rollBonus() {
+      if (!this.model.attackRoll) return;
+      return numberToSignedString(this.model.attackRoll.value);
+    },
+    rollBonusTooLong() {
+      return this.rollBonus && this.rollBonus.length > 3;
+    },
+    propertyName() {
+      return getPropertyName(this.model.type);
+    },
+    cardClasses() {
+      return {
+        'theme--dark': this.theme.isDark,
+        'theme--light': !this.theme.isDark,
+        'muted-text': this.model.insufficientResources,
+        'active': this.activated,
+        'tabletop-active': this.active,
+        'elevation-8': this.hovering,
+      }
+    },
+    actionTypeIcon() {
+      return `$vuetify.icons.${this.model.actionType}`;
+    },
+    targetingError() {
+      if (!this.active) return;
+      const targets = this.targets || [];
+      if (this.model.target === 'singleTarget' && targets.length === 0) {
+        return 'Select target';
+      } else if (targets.length > 1 && this.model.target !== 'multipleTargets'){
+        return 'Single target only';
+      } else if (this.model.target === 'self' && targets.length > 0){
+        return 'Can only target self';
+      }
+      return undefined;
+    }
+  },
+  // @ts-ignore
+  meteor: {
+    children() {
+      const indicesOfTerminatingProps = [];
+      const decendants = CreatureProperties.find({
+        'ancestors.id': this.model._id,
+        'removed': { $ne: true },
+      }, {
+        sort: {order: 1}
+      }).map(prop => {
+        // Get all the props we don't want to show the decendants of and
+        // where they might appear in the ancestor list
+        if (prop.type === 'buff' || prop.type === 'folder') {
+          indicesOfTerminatingProps.push({
+            id: prop._id,
+            ancestorIndex: prop.ancestors.length,
+          });
+        }
+        return prop;
+      }).filter(prop => {
+        // Filter out folders entirely
+        if (prop.type === 'folder') return false;
+        // Filter out decendants of terminating props
+        return !some(indicesOfTerminatingProps, buffIndex => {
+          return prop.ancestors[buffIndex.ancestorIndex]?.id === buffIndex.id;
+        });
+      });
+      return nodeArrayToTree(decendants);
+    },
+  },
+  methods: {
+    click(e) {
+      this.$emit('click', e);
+    },
+    doAction({ advantage }) {
+      this.doActionLoading = true;
+      this.shwing();
+      doAction.call({
+        actionId: this.model._id,
+        targetIds: this.targets,
+        scope: {
+          $attackAdvantage: advantage,
+        }
+      }, error => {
+        this.doActionLoading = false;
+        this.$emit('deactivate');
+        if (error) {
+          console.error(error);
+          snackbar({ text: error.reason });
+        }
+      });
+    },
+    shwing() {
+      this.activated = true;
+      setTimeout(() => {
+        this.activated = undefined;
+      }, 150);
+    },
+    openPropertyDetails() {
+      this.$store.commit('pushDialogStack', {
+        component: 'creature-property-dialog',
+        elementId: `${this.model._id}`,
+        data: {_id: this.model._id},
+      });
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.action-card {
+  transition: box-shadow .4s cubic-bezier(0.25, 0.8, 0.25, 1),
+    transform 0.075s ease,
+    width .3s ease,
+    margin-top .3s ease,
+    height .3s ease;
+  max-width: 100vw;
+  position: relative;
+}
+.action-card.tabletop-active {
+  margin-top: -100px;
+  width: 320px;
+  height: 300px;
+}
+
+.action-card.active {
+  transform: scale(0.92);
+}
+.action-card-container {
+  transition: width .3s ease;
+}
+
+.action-title {
+  font-size: 16px;
+  font-weight: 400;
+  height: 24px;
+  line-height: 24px;
+  position: relative;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: .3s cubic-bezier(.25, .8, .5, 1);
+  width: 100%;
+}
+
+.action-sub-title {
+  color: #9e9e9e;
+  flex-grow: 0;
+  font-size: 12px;
+  line-height: 12px;
+  height: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.action-child {
+  height: 32px;
+}
+
+.theme--light.muted-text {
+  color: rgba(0, 0, 0, .3) !important;
+}
+
+.theme--dark.muted-text {
+  color: hsla(0, 0%, 100%, .3) !important;
+}
+
+.action-card {
+  transition: transform 0.15s cubic;
+}
+</style>
+
+<style lang="css">
+.action-card.theme--light.muted-text .v-icon {
+  color: rgba(0, 0, 0, .3) !important;
+}
+
+.action-card.theme--dark.muted-text .v-icon {
+  color: hsla(0, 0%, 100%, .3) !important;
+}
+
+.action-card .property-description>p:last-of-type {
+  margin-bottom: 0;
+}
+
+.action-card .v-btn--icon {
+  transition: all .3s ease, height .3s ease;
+}
+</style>
diff --git a/app/imports/client/ui/tabletop/TabletopActionCards.vue b/app/imports/client/ui/tabletop/TabletopActionCards.vue
deleted file mode 100644
index 5fe2efd8..00000000
--- a/app/imports/client/ui/tabletop/TabletopActionCards.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template lang="html">
-  <div class="action-cards">
-    <action-card
-      v-for="action in actions"
-      :key="action._id"
-      :model="action"
-    />
-  </div>
-</template>
-
-<script lang="js">
-import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
-import ActionCard from '/imports/client/ui/properties/components/actions/ActionCard.vue';
-
-function getProperties(ancestorId, type){
-  if (!ancestorId) return [];
-  return CreatureProperties.find({
-    'ancestors.id': ancestorId,
-    type,
-    removed: {$ne: true},
-    inactive: {$ne: true},
-  }, {
-    sort: {order: 1}
-  });
-}
-
-export default {
-  components: {
-    ActionCard,
-  },
-  props: {
-    creatureId: {
-      type: String,
-      default: undefined,
-    },
-  },
-  data(){ return {
-    actionType: 'action',
-  }},
-  meteor: {
-    actions(){
-      return getProperties(this.creatureId, 'action');
-    },
-  }
-}
-</script>
-
-<style lang="css" scoped>
-</style>
diff --git a/app/imports/client/ui/tabletop/TabletopComponent.vue b/app/imports/client/ui/tabletop/TabletopComponent.vue
index 603c8fbd..1e9bbf0a 100644
--- a/app/imports/client/ui/tabletop/TabletopComponent.vue
+++ b/app/imports/client/ui/tabletop/TabletopComponent.vue
@@ -19,16 +19,31 @@
       <v-row
         dense
         class="initiative-row flex-grow-0"
-        style="flex-wrap: nowrap; overflow-x: auto;"
+        style="flex-wrap: nowrap; overflow-x: auto; padding-bottom: 50px;"
         @wheel="transformScroll($event)"
       >
         <tabletop-creature-card
           v-for="creature in creatures"
           :key="creature._id"
           :model="creature"
-          :active="activeCreature === creature._id"
+          :active="activeCreatureId === creature._id"
           :targeted="targets.includes(creature._id)"
-          @click="activeCreature = creature._id; targets = []"
+          :show-target-btn="targets.includes(creature._id) || moreTargets"
+          v-on="(!activeActionId || (targets.includes(creature._id) || moreTargets)) ? {
+            click: () => {
+              if (activeActionId) {
+                if (targets.includes(creature._id)) {
+                  untarget(creature._id)
+                } else {
+                  if (moreTargets) targets.push(creature._id);
+                }
+              } else {
+                activeCreatureId = creature._id;
+                targets = [];
+                activeActionId = undefined;
+              }
+            }
+          } : {}"
           @target="targets.push(creature._id)"
           @untarget="untarget(creature._id)"
         />
@@ -67,22 +82,24 @@
       <v-container fluid>
         <v-row
           dense
-          class="action-row"
-          style="flex-wrap: nowrap; overflow-x: auto;"
+          class="action-row overflow-x-auto align-end"
+          style="flex-wrap: nowrap; padding-top: 100px;"
           @wheel="transformScroll($event)"
         >
           <mini-character-sheet
-            v-if="activeCreature"
+            v-if="activeCreatureId"
             data-id="mini-character-sheet"
+            :creature-id="activeCreatureId"
             @click="openCharacterSheetDialog"
           />
           <action-card
             v-for="action in actions"
             :key="action._id"
             :model="action"
-            :data-id="action._id"
+            :active="activeActionId === action._id"
             :targets="targets"
-            @click="clickProperty({_id: action._id})"
+            @activate="activeActionId = action._id"
+            @deactivate="activeActionId = undefined; targets = [];"
           />
         </v-row>
       </v-container>
@@ -95,9 +112,29 @@ import addCreaturesToTabletop from '/imports/api/tabletop/methods/addCreaturesTo
 import TabletopCreatureCard from '/imports/client/ui/tabletop/TabletopCreatureCard.vue';
 import TabletopMap from '/imports/client/ui/tabletop/TabletopMap.vue';
 import Creatures from '/imports/api/creature/creatures/Creatures.js';
-import TabletopActionCards from '/imports/client/ui/tabletop/TabletopActionCards.vue';
 import MiniCharacterSheet from '/imports/client/ui/creature/character/MiniCharacterSheet.vue';
 import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
+import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+import { assertEditPermission } from '/imports/api/creature/creatures/creaturePermissions.js';
+import ActionCard from '/imports/client/ui/tabletop/TabletopActionCard.vue';
+
+const getProperties = function (creatureId, selector = {}) {
+  return CreatureProperties.find({
+    'ancestors.id': {
+      $eq: creatureId,
+    },
+    inactive: { $ne: true },
+    removed: { $ne: true },
+    overridden: { $ne: true },
+    $nor: [
+      { hideWhenTotalZero: true, total: 0 },
+      { hideWhenValueZero: true, value: 0 },
+    ],
+    ...selector,
+  }, {
+    sort: { order: 1 }
+  });
+}
 
 export default {
   components: {
@@ -118,8 +155,14 @@ export default {
   },
   data() {
     return {
-      activeCreature: undefined,
-    targets: [],
+      activeCreatureId: undefined,
+      activeActionId: undefined,
+      targets: [],
+    }
+  },
+  watch: {
+    activeCreatureId(id) {
+      this.$root.$emit('active-tabletop-character-change', id);
     }
   },
   meteor: {
@@ -132,28 +175,20 @@ export default {
       return Creatures.find({ tabletop: this.model._id });
     },
     actions(){
-      return getProperties(this.activeCreature, 'action').map(a => {
-        delete a.summary;
-        return a;
-      });
+      return getProperties(this.activeCreatureId, { type: 'action', actionType: { $ne: 'event'} });
     },
-    editPermission(){
-      try {
-        assertEditPermission(this.activeCreature, Meteor.userId());
+    moreTargets(){
+      const activeAction = CreatureProperties.findOne(this.activeActionId);
+      if (!activeAction) return;
+      if (activeAction.target === 'singleTarget') {
+        return this.targets.length === 0;
+      } else if (activeAction.target === 'multipleTargets') {
         return true;
-      } catch (e) {
-        return false;
       }
     },
-    actions(){
-      return getProperties(this.activeCreature, 'action').map(a => {
-        delete a.summary;
-        return a;
-      });
-    },
     editPermission(){
       try {
-        assertEditPermission(this.activeCreature, Meteor.userId());
+        assertEditPermission(this.activeCreatureId, Meteor.userId());
         return true;
       } catch (e) {
         return false;
@@ -184,7 +219,7 @@ export default {
 				component: 'character-sheet-dialog',
 				elementId: 'mini-character-sheet',
         data: {
-          creatureId: this.activeCreature,
+          creatureId: this.activeCreatureId,
         },
 			});
     },
@@ -199,7 +234,7 @@ export default {
       if (!event.deltaY) {
         return;
       }
-      event.currentTarget.scrollLeft += event.deltaY + event.deltaX;
+      event.currentTarget.scrollLeft += event.deltaY;
       event.preventDefault();
     },
     untarget(id){
@@ -208,7 +243,7 @@ export default {
         this.targets.splice(index, 1);
       }
     }
-  }
+  },
 }
 </script>
 
@@ -220,12 +255,11 @@ export default {
   width: 100px;
   margin: 4px;
 }
-.action-row > .v-card {
+.action-row > div {
   flex-grow: 0;
   flex-shrink: 0;
-  max-height: 320px;
+  height: 120px;
   width: 200px;
   margin: 4px;
-  overflow-y: hidden;
 }
 </style>
diff --git a/app/imports/client/ui/tabletop/TabletopCreatureCard.vue b/app/imports/client/ui/tabletop/TabletopCreatureCard.vue
index 656249e6..76e5c3d7 100644
--- a/app/imports/client/ui/tabletop/TabletopCreatureCard.vue
+++ b/app/imports/client/ui/tabletop/TabletopCreatureCard.vue
@@ -1,15 +1,17 @@
 <template lang="html">
   <v-card
     style="height: 100px; width: 70px;"
-    :color="active ? 'accent' : ''"
-    hover
-    @mouseover="hover = true"
+    class="tabletop-creature-card"
+    :class="{ active }"
+    :hover="hasClickListener"
+    :elevation="active ? 8 : 2"
+    @mouseover="() => { if (hasClickListener) hover = true; }"
     @mouseleave="hover = false"
-    @click="$emit('click')"
+    v-on="hasClickListener ? {click: () => $emit('click')} : {}"
   >
     <v-progress-linear
-      v-if="model.variables.hitPoints"
-      :value="model.variables.hitPoints.value * 100 / model.variables.hitPoints.total"
+      v-if="variables.hitPoints"
+      :value="variables.hitPoints.value * 100 / variables.hitPoints.total"
     />
     <v-img
       :src="model.picture"
@@ -22,20 +24,27 @@
       {{ model.name }}
     </div>
     <card-highlight :active="hover" />
-    <v-btn
-      :color="targeted ? 'accent' : ''"
-      fab
-      small
-      style="position: fixed;"
-      @click.stop="targeted ? $emit('untarget') : $emit('target')"
-    >
-      <v-icon>{{ targeted ? 'mdi-target' : 'mdi-target' }}</v-icon>
-    </v-btn>
+    <div class="d-flex justify-center">
+      <v-scale-transition>
+        <v-btn
+          v-if="showTargetBtn"
+          :color="targeted ? 'accent' : ''"
+          :elevation="targeted ? 8 : 2"
+          fab
+          small
+          @click.stop="targeted ? $emit('untarget') : $emit('target')"
+        >
+          <v-icon>{{ targeted ? 'mdi-target' : 'mdi-target' }}</v-icon>
+        </v-btn>
+      </v-scale-transition>
+    </div>
   </v-card>
 </template>
 
 <script lang="js">
+import CreatureVariables from '/imports/api/creature/creatures/CreatureVariables.js';
 import CardHighlight from '/imports/client/ui/components/CardHighlight.vue';
+
 export default {
   components: {
     CardHighlight,
@@ -47,10 +56,23 @@ export default {
     },
     active: Boolean,
     targeted: Boolean,
+    showTargetBtn: Boolean,
   },
   data(){return {
     hover: false,
-  }},
+  }
+  },
+  computed: {
+    hasClickListener() {
+      return this.$listeners && !!this.$listeners.click;
+    },
+  },
+  // @ts-ignore
+  meteor: {
+    variables() {
+      return CreatureVariables.findOne({ _creatureId: this.model._id }) || {};
+    }
+  }
 }
 </script>
 
@@ -63,3 +85,9 @@ export default {
   text-overflow: ellipsis;
 }
 </style>
+
+<style lang="css">
+.tabletop-creature-card .v-btn {
+  transition: all .3s ease;
+}
+</style>
diff --git a/app/imports/client/ui/tabletop/TabletopLog.vue b/app/imports/client/ui/tabletop/TabletopLog.vue
index 2dcd16ea..7f077e31 100644
--- a/app/imports/client/ui/tabletop/TabletopLog.vue
+++ b/app/imports/client/ui/tabletop/TabletopLog.vue
@@ -1,20 +1,17 @@
 <template lang="html">
-  <log-component
-    :logs="logs"
-    :edit-permission="context.editPermission"
-    show-name
-    @submit="submit"
+  <character-log
+    :tabletop-id="tabletopId"
+    :creature-id="activeCreatureId"
   />
 </template>
 
 <script lang="js">
-import CreatureLogs from '/imports/api/creature/log/CreatureLogs.js';
-import insertTabletopLog from '/imports/api/creature/log/CreatureLogs.js';
-import LogComponent from '/imports/client/ui/log/LogComponent.vue';
+import { insertTabletopLog } from '/imports/api/creature/log/CreatureLogs.js';
+import CharacterLog from '/imports/client/ui/log/CharacterLog.vue';
 
 export default {
   components: {
-    LogComponent,
+    CharacterLog,
   },
   inject: {
     context: {
@@ -24,28 +21,18 @@ export default {
   props: {
     tabletopId: {
       type: String,
-      required: true,
+      default: undefined,
     },
   },
-  meteor: {
-    logs() {
-      return CreatureLogs.find({
-        tabletopId: this.tabletopId,
-      }, {
-        sort: {date: -1},
-        limit: 50
-      });
-    },
+  data() {
+    return {
+      activeCreatureId: undefined,
+    }
   },
-  methods: {
-    submit(){
-      insertTabletopLog.call({
-        content: this.logContent,
-        tabletopId: this.tabletopId,
-      }, (error) => {
-        if (error) console.error(error);
-      });
-    },
+  mounted() {
+    this.$root.$on('active-tabletop-character-change', (id) => {
+      this.activeCreatureId = id;
+    });
   },
 }
 </script>
diff --git a/app/imports/client/ui/tabletop/TabletopMap.vue b/app/imports/client/ui/tabletop/TabletopMap.vue
index 605da292..37546d7e 100644
--- a/app/imports/client/ui/tabletop/TabletopMap.vue
+++ b/app/imports/client/ui/tabletop/TabletopMap.vue
@@ -1,11 +1,89 @@
-<template lang="html">
-  <div class="tabletop-map" />
+<template>
+  <div>
+    <canvas
+      ref="map"
+      class="tabletop-map"
+    />
+  </div>
 </template>
 
 <script lang="js">
+import * as THREE from 'three';
+import { Tracker } from 'meteor/tracker'
+import { MapControls } from '/imports/api/tabletop/three/OrbitControls.js';
+
+const maps = [
+  {
+    name: 'first map',
+    position: { x: 0, y: 0 },
+    width: 5,
+    height: 5,
+    texture: '/images/battlemap.webp',
+  }
+];
+
 export default {
+  mounted(){
+    const scene = new THREE.Scene();
+    const perspectiveCam = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+    perspectiveCam.position.z = 5;
+    const orthoCam = new THREE.OrthographicCamera( -2, 2, 2, -2, 1, 1000 );
+    orthoCam.position.z = 5
+    const activeCamera = orthoCam;
+
+
+    const renderer = new THREE.WebGLRenderer({canvas: this.$refs.map});
+
+    activeCamera.up.set( 0, 0, 1 ); // Use z as upwards
+    const controls = new MapControls( activeCamera, renderer.domElement );
+
+    maps.forEach(map => {
+      const texture = new THREE.TextureLoader().load( map.texture );
+      const material = new THREE.MeshBasicMaterial({ map: texture });
+      material.map.needsUpdate = true;
+      const plane = new THREE.Mesh(new THREE.PlaneGeometry(map.width, map.height), material);
+      plane.overdraw = true;
+      scene.add(plane);
+    });
+
+  /*
+    const axesHelper = new THREE.AxesHelper( 5 );
+    scene.add( axesHelper );
+  */
+
+    function resizeCanvasToDisplaySize() {
+      const canvas = renderer.domElement;
+      // look up the size the canvas is being displayed
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight - 50;
+
+      // adjust displayBuffer size to match
+      if (canvas.width !== width || canvas.height !== height) {
+        // you must pass false here or three.js sadly fights the browser
+        perspectiveCam.aspect = width / height;
+        orthoCam.left= width / -200;
+        orthoCam.right = width / 200;
+        orthoCam.top = height / 200;
+        orthoCam.bottom = height / -200;
+        perspectiveCam.updateProjectionMatrix();
+        orthoCam.updateProjectionMatrix();
+        controls.update();
+        renderer.setSize(width, height, false);
+      }
+    }
+    function animate() {
+      resizeCanvasToDisplaySize();
+      renderer.render( scene, activeCamera );
+      requestAnimationFrame( animate );
+    }
+    animate();
+  },
 }
 </script>
 
-<style lang="css" scoped>
-</style>
+<style>
+  .tabletop-map {
+    height: 100%;
+    width: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/app/imports/server/publications/tabletops.js b/app/imports/server/publications/tabletops.js
index 83bc84c1..58f10a48 100644
--- a/app/imports/server/publications/tabletops.js
+++ b/app/imports/server/publications/tabletops.js
@@ -2,37 +2,41 @@ import Tabletops from '/imports/api/tabletop/Tabletops.js';
 import Creatures from '/imports/api/creature/creatures/Creatures.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import CreatureLogs from '/imports/api/creature/log/CreatureLogs.js';
+import CreatureVariables from '/imports/api/creature/creatures/CreatureVariables.js';
+import { loadCreature } from '/imports/api/engine/loadCreatures.js';
 
-Meteor.publish('tabletops', function(){
+Meteor.publish('tabletops', function () {
   var userId = this.userId;
   if (!userId) {
     return [];
   }
   return Tabletops.find({
     $or: [
-      {players: userId},
-      {gameMaster: userId},
+      { players: userId },
+      { gameMaster: userId },
     ],
   });
 });
 
-Meteor.publish('tabletop', function(tabletopId){
+Meteor.publish('tabletop', function (tabletopId) {
   var userId = this.userId;
   if (!userId) {
     return [];
   }
-  this.autorun(function (){
+  this.autorun(function () {
+    const self = this;
     let tabletopCursor = Tabletops.find({
       _id: tabletopId,
       $or: [
-        {players: userId},
-        {gameMaster: userId},
+        { players: userId },
+        { gameMaster: userId },
       ]
     });
     let tabletop = tabletopCursor.fetch()[0];
-    if (!tabletop){
+    if (!tabletop) {
       return [];
     }
+
     // Warning, this leaks data to users of the same tabletop who may not have
     // read permission of this specific creature, so publish as few fields as
     // possible
@@ -40,25 +44,31 @@ Meteor.publish('tabletop', function(tabletopId){
       tabletop: tabletopId,
     }, {
       fields: {
+        _id: 1,
         name: 1,
         picture: 1,
         avatarPicture: 1,
-        variables: 1,
         tabletop: 1,
         initiativeRoll: 1,
       },
     });
     const creatureIds = creatureSummaries.map(c => c._id);
+    creatureIds.forEach(creatureId => {
+      loadCreature(creatureId, self);
+    });
+    const variables = CreatureVariables.find({
+      _creatureId: { $in: creatureIds }
+    });
     let properties = CreatureProperties.find({
-      'ancestors.0.id': {$in: creatureIds},
-      removed: {$ne: true},
+      'ancestors.id': { $in: creatureIds },
+      removed: { $ne: true },
     });
     const logs = CreatureLogs.find({
       tabletopId,
     }, {
-      limit: 50,
-      sort: {date: -1},
+      limit: 100,
+      sort: { date: -1 },
     });
-    return [ tabletopCursor, creatureSummaries, properties, logs]
+    return [tabletopCursor, creatureSummaries, properties, logs, variables]
   })
 });
diff --git a/app/package-lock.json b/app/package-lock.json
index ae7c0414..daf70f03 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -3426,15 +3426,9 @@
       "dev": true
     },
     "signal-exit": {
-<<<<<<< HEAD
-      "version": "3.0.2",
-      "resolved": "",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
-=======
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
->>>>>>> version-2
     },
     "simpl-schema": {
       "version": "1.13.1",
@@ -3748,9 +3742,9 @@
       "dev": true
     },
     "three": {
-      "version": "0.139.2",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.139.2.tgz",
-      "integrity": "sha512-gV7q7QY8rogu7HLFZR9cWnOQAUedUhu2WXAnpr2kdXZP9YDKsG/0ychwQvWkZN5PlNw9mv5MoCTin6zNTXoONg=="
+      "version": "0.148.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.148.0.tgz",
+      "integrity": "sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw=="
     },
     "to-regex-range": {
       "version": "5.0.1",
diff --git a/app/package.json b/app/package.json
index 463be480..75f76649 100644
--- a/app/package.json
+++ b/app/package.json
@@ -52,8 +52,9 @@
     "simpl-schema": "^1.13.1",
     "source-map-support": "^0.5.21",
     "speakingurl": "^14.0.1",
+    "three": "^0.148.0",
     "vivagraphjs": "^0.12.0",
-    "vue": "2.6.14",
+    "vue": "2.6.10",
     "vue-meteor-tracker": "^2.0.0",
     "vue-reactive-provide": "^0.3.0",
     "vue-router": "^3.6.5",