diff --git a/lifetracker-vue/src/assets/colors.css b/lifetracker-vue/src/assets/colors.css
index 0c34788..b056e68 100644
--- a/lifetracker-vue/src/assets/colors.css
+++ b/lifetracker-vue/src/assets/colors.css
@@ -13,11 +13,19 @@
     --lime: #bfff55;
 }
 
+.handsontable td.align-left, .handsontable th:last-child div {
+    text-align: left !important;
+}
+
+.highlight {
+    filter: contrast(85%);
+}
+
 .handsontable * {
     border: 0px !important;
     text-align: center !important;
     vertical-align: middle !important;
-    font-size: 15px;
+    font-size: 13px;
 }
 
 .handsontable td, .handsontable th{
diff --git a/lifetracker-vue/src/views/TableView.vue b/lifetracker-vue/src/views/TableView.vue
index e730d7c..49cdb9d 100644
--- a/lifetracker-vue/src/views/TableView.vue
+++ b/lifetracker-vue/src/views/TableView.vue
@@ -81,18 +81,30 @@ const ExampleComponent = defineComponent({
           },
           Array.from(new Array(24), (_, t) => hourCol(t)),
           { data: "mood", type: "numeric" },
-          { data: "comments", style: "text-align:left;" }
+          { data: "comments", className: "align-left" }
         ].flat(),
         colHeaders: colHeaders,
         rowHeaders: false,
         readOnly: false,
         width: '100%',
         height: 'auto',
+        rowHeights: '22px',
+        colWidths(i) {
+          if((i > 1) && (i < 26)){
+            return "40px";
+          }
+          else if(i == 27){
+            return "1000px";
+          }
+          else{
+            return "50px";
+          }
+        },
         afterSelection: (row, column, row2, column2, preventScrolling, selectionLayerLevel) => {
           
         },
         afterChange: (changes) => {
-          fixSelectionBug();
+          this.fixSelectionBug();
           if (changes != null) {
             var entry = this.entries[changes[0][0]];
             entry.date = entry.date.replace(/T.*/, "");
@@ -113,10 +125,10 @@ const ExampleComponent = defineComponent({
     },
   methods: {
     fixSelectionBug(){
-  if(this.hotRef){
-          var offset =  (self.hotRef.getRowHeight() + 1) * self.entries.length;//document.querySelector(".wtHider").clientHeight;
+      if(this.hotRef){
+          var offset =  (this.hotRef.getRowHeight() + 1) * this.entries.length;//document.querySelector(".wtHider").clientHeight;
           document.querySelector(".htBorders div").style.top = "-" + offset + "px";
-  }
+      }
 },
     subscribe(){
             console.log("subscribing");