diff --git a/lifetracker-server/src/app.js b/lifetracker-server/src/app.js
index a1f54ed..bb01870 100644
--- a/lifetracker-server/src/app.js
+++ b/lifetracker-server/src/app.js
@@ -6,6 +6,7 @@ const sdk = require('node-appwrite')
 const client = new sdk.Client()
 const databases = new sdk.Databases(client)
 const strftime = require('strftime')
+const { entries } = require('./import.js')
 client
     .setEndpoint('http://ryanpandya.com:8080/v1') // Your API Endpoint
     .setProject('lifetracker') // Your project ID
diff --git a/lifetracker-server/src/import.js b/lifetracker-server/src/import.js
index bbd8838..014355b 100644
--- a/lifetracker-server/src/import.js
+++ b/lifetracker-server/src/import.js
@@ -22,10 +22,10 @@ var data = fs.readFileSync('data.csv')
         var comments = entry.slice(27).filter(x => x != "").join().replace(/^"/,"").replace(/"$/,'')
         
         var dbEntry = {
-            Date: date,
-            Hours: hours,
-            Mood: mood,
-            Comments: comments
+            date: date,
+            hours: hours,
+            mood: mood,
+            comments: comments
         };
         client
             .setEndpoint('http://ryanpandya.com:8080/v1') // Your API Endpoint
diff --git a/lifetracker-vue/package-lock.json b/lifetracker-vue/package-lock.json
index 3cb1de3..00a75de 100644
--- a/lifetracker-vue/package-lock.json
+++ b/lifetracker-vue/package-lock.json
@@ -12,6 +12,7 @@
         "appwrite": "^11.0.0",
         "axios": "^1.4.0",
         "handsontable": "^12.3.3",
+        "moment": "^2.29.4",
         "node": "^20.0.0",
         "pinia": "^2.0.35",
         "vue": "^3.2.47",
diff --git a/lifetracker-vue/package.json b/lifetracker-vue/package.json
index dbcb18b..55389a2 100644
--- a/lifetracker-vue/package.json
+++ b/lifetracker-vue/package.json
@@ -14,6 +14,7 @@
     "appwrite": "^11.0.0",
     "axios": "^1.4.0",
     "handsontable": "^12.3.3",
+    "moment": "^2.29.4",
     "node": "^20.0.0",
     "pinia": "^2.0.35",
     "vue": "^3.2.47",
diff --git a/lifetracker-vue/src/assets/colors.css b/lifetracker-vue/src/assets/colors.css
new file mode 100644
index 0000000..0c34788
--- /dev/null
+++ b/lifetracker-vue/src/assets/colors.css
@@ -0,0 +1,69 @@
+:root{
+    --white: white;
+    --black: #273036;
+    --red: #c71634;
+    --cyan: #005744;
+    --pink: #ff65ae;
+    --blue: #00a9b3;
+    --green: #189749;
+    --yellow: #fff336;
+    --orange: #ff6d01;
+    --purple: #5b3ab1;
+    --darkred: #ff2816;
+    --lime: #bfff55;
+}
+
+.handsontable * {
+    border: 0px !important;
+    text-align: center !important;
+    vertical-align: middle !important;
+    font-size: 15px;
+}
+
+.handsontable td, .handsontable th{
+    font-family: monospace;
+    color: var(--white);
+    background: var(--black);
+}
+
+th{
+    color: gray !important;
+}
+td.color-black{
+    background: var(--black);
+}
+td.color-red{
+    background: var(--red);
+}
+td.color-blue{
+    background: var(--blue);
+}
+td.color-green{
+    background: var(--green);
+}
+td.color-purple{
+    background: var(--purple);
+}
+td.color-lime{
+    background: var(--lime);
+    color: var(--black);
+}
+td.color-cyan{
+    background: var(--cyan);
+}
+td.color-darkred{
+    background: var(--darkred);
+}
+td.color-pink{
+    background: var(--pink);
+}
+td.color-orange{
+    background: var(--orange);
+}
+td.color-yellow{
+    background: var(--yellow);
+    color: var(--black);
+}
+h2{
+    color:green;
+}
\ No newline at end of file
diff --git a/lifetracker-vue/src/components/AuthNav.vue b/lifetracker-vue/src/components/AuthNav.vue
index ca2c321..73185f0 100644
--- a/lifetracker-vue/src/components/AuthNav.vue
+++ b/lifetracker-vue/src/components/AuthNav.vue
@@ -8,7 +8,9 @@ storeSession.connect();
 
 <template>
     <div v-if="!storeSession.isConnected">
-        Not connected.
+        <button @click="storeSession.loginAsRyan()">
+            Connect
+        </button>
     </div>
     <div v-if="storeSession.isConnected">
         Connected as {{ storeSession.session.userId }}.
diff --git a/lifetracker-vue/src/services/appwrite.js b/lifetracker-vue/src/services/appwrite.js
index 6ed4e9d..122ff20 100644
--- a/lifetracker-vue/src/services/appwrite.js
+++ b/lifetracker-vue/src/services/appwrite.js
@@ -1,4 +1,4 @@
-import { Client, Databases, Account } from "appwrite";
+import { Client, Databases, Account, Query } from "appwrite";
 
 class AppwriteService {
     databaseId = 'lifetracker-db';
@@ -41,7 +41,11 @@ class AppwriteService {
     }
 
     getEntries = async () => {
-        return (await this.database.listDocuments(this.databaseId, this.collectionId)).documents;
+        return (await this.database.listDocuments(
+            this.databaseId, this.collectionId,
+            [Query.orderAsc("date")]
+        )
+        ).documents;
     }
 
     logout = () => {
diff --git a/lifetracker-vue/src/stores/session.ts b/lifetracker-vue/src/stores/session.ts
index 8b02f30..a3ce287 100644
--- a/lifetracker-vue/src/stores/session.ts
+++ b/lifetracker-vue/src/stores/session.ts
@@ -3,8 +3,8 @@ import { defineStore } from 'pinia';
 import { Client, Account, ID } from 'appwrite';
 
 const appwriteclient = new Client()
-        .setEndpoint('http://ryanpandya.com:8080/v1')
-        .setProject('lifetracker');
+  .setEndpoint('http://ryanpandya.com:8080/v1')
+  .setProject('lifetracker');
 
 const account = new Account(appwriteclient);
 
@@ -18,18 +18,23 @@ export const useSessionStore = defineStore({
   },
   actions: {
     logout() {
-      const promise = account.deleteSession(this.session.id);
+      const promise = account.deleteSession(this.session['id']);
       var self = this;
-      promise.then(function (response) {
-          self.session = {
-            email: '',
-            userId: '',
-            id: '',
-          };
+      promise.then(
+        function (response) {
+          self.session = [
+            {
+              email: '',
+              userId: '',
+              id: '',
+            },
+          ];
           console.log(response); // Success
-      }, function (error) {
+        },
+        function (error) {
           console.log(error); // Failure
-      });
+        }
+      );
     },
     connect() {
       const promise = account.getSession('current');
@@ -56,7 +61,10 @@ export const useSessionStore = defineStore({
         }
       );
     },
-    login(email : string, password : string) {
+    loginAsRyan() {
+      this.login('ryan@ryanpandya.com', 'A(84)o9@38appwrite');
+    },
+    login(email: string, password: string) {
       console.log(this.session);
       const promise = account.createEmailSession(email, password);
       var session: ISession = {
@@ -65,15 +73,18 @@ export const useSessionStore = defineStore({
         id: '',
       };
       var self = this;
-      promise.then(function (response) {
-        session.email = response.providerUid;
-        session.userId = response.userId;
-        session.id = response.$id;
-        console.log('Logged in');
-        self.session = session;        
-      }, function (error) {
-        console.log('Error');
-      });
+      promise.then(
+        function (response) {
+          session.email = response.providerUid;
+          session.userId = response.userId;
+          session.id = response.$id;
+          console.log('Logged in');
+          self.session = session;
+        },
+        function (error) {
+          console.log('Error');
+        }
+      );
     },
   },
 });
diff --git a/lifetracker-vue/src/views/TableView.vue b/lifetracker-vue/src/views/TableView.vue
index c1b2887..76811d2 100644
--- a/lifetracker-vue/src/views/TableView.vue
+++ b/lifetracker-vue/src/views/TableView.vue
@@ -2,7 +2,7 @@
 import { useDatabaseStore } from "@/stores/database"
 import Api from "@/services/Api"
 import appwrite from '@/services/appwrite';
-
+import moment from 'moment';
 </script>
 
 <script>
@@ -10,10 +10,45 @@ import { defineComponent } from 'vue';
 import { HotTable } from '@handsontable/vue3';
 import { registerAllModules } from 'handsontable/registry';
 import 'handsontable/dist/handsontable.full.css';
+import '../assets/colors.css';
 import Handsontable from 'handsontable/base';
 // register Handsontable's modules
 registerAllModules();
 
+function getHourClass(i) {
+  const colorMapping = {
+    0: "black",
+    1: "red",
+    2: "cyan",
+    3: "pink",
+    4: "blue",
+    5: "green",
+    6: "yellow",
+    7: "orange",
+    8: "purple",
+    9: "darkred",
+    10: "lime"
+  }
+  if (i == null) {
+      return "";
+    }
+    else {
+      return "color-" + colorMapping[i];
+    }
+}
+
+function hourCol(t) {
+  return {
+    data: "hours." + t,
+    type: 'numeric',
+    renderer(instance, td, row, col, prop, value) {
+      td.className = getHourClass(value);
+      td.innerText = value == null ? value : parseFloat(value);
+              return td;
+            }
+  }
+}
+
 const colHeaders = ["DATE", "DAY", "12 AM"]
     .concat(Array.from(new Array(11), (x, y) => y+1 + " AM") )
     .concat(Array.from(new Array(12), (x, y) => y+1 + " PM") )
@@ -26,21 +61,37 @@ const ExampleComponent = defineComponent({
       hotSettings: {
         columns: [
           {
-            type: 'text',
-            data: "date"
+            readOnly: true,
+            data: "date",
+            renderer(instance, td, row, col, prop, value) {
+              var date = new moment(value).utc().format("MM/DD");
+              td.className = "color-black";
+              td.innerText = date;
+              return td;
+            }
           },
-          { renderer: 'text'},
-          Array.from(new Array(24), (a, b) => { renderer: 'hour'}),
-          { renderer: 'text'},
-          { renderer: 'text'}
+          {
+            readOnly: true,
+            data: "date",
+            renderer(instance, td, row, col, prop, value) {
+              var date = new moment(value).utc().format("ddd")
+              td.innerText = date;
+              return td;
+            }
+          },
+          Array.from(new Array(24), (_, t) => hourCol(t)),
+          { data: "mood", type: "numeric" },
+          { data: "comments", style: "text-align:left;" }
         ].flat(),
         colHeaders: colHeaders,
         rowHeaders: false,
         readOnly: false,
         height: 'auto',
-        afterChange: () => {
-          if (this.hotRef) {
-            console.log(this.hotRef.getSourceData());
+        afterChange: (changes) => {
+          if (changes != null) {
+            var entry = this.entries[changes[0][0]];
+            entry.date = entry.date.replace(/T.*/, "");
+            appwrite.updateEntry(entry);
           }
         },
         licenseKey: 'non-commercial-and-evaluation'
@@ -57,7 +108,8 @@ const ExampleComponent = defineComponent({
   methods: {
     subscribe(){
             console.log("subscribing");
-            appwrite.subscribe((payload) => {
+      appwrite.subscribe((payload) => {
+        console.log("Caught " + payload);
                 var event = payload.events.filter((e) => 
                     e.match(/databases\.\*\.collections\.\*\.documents\.\*\.\w+/)
                 )[0].replace(/.+\./,"");
@@ -96,12 +148,12 @@ export default ExampleComponent;
 </script>
 
 <template>
-  <button @click="updateTable">Fetch</button>
+  <!-- <button @click="updateTable">Fetch</button>
 <ul>
     <li v-for="e in entries" :key="e">
       {{ e }}
     </li>
-  </ul>
+  </ul> -->
   <hot-table ref="wrapper" :settings="hotSettings" :data="entries"></hot-table>
 </template>