diff --git a/fittrak-client/src/App.vue b/fittrak-client/src/App.vue
index 474da52..f30a503 100644
--- a/fittrak-client/src/App.vue
+++ b/fittrak-client/src/App.vue
@@ -8,7 +8,7 @@
       app
       dark
     >
-      <SidebarNavigationItems />
+      <Sidebar :viewer=viewer />
     </v-navigation-drawer>
 
     <v-toolbar 
@@ -22,12 +22,7 @@
         :class="{ main: $route.name === APP_NAME }">{{ $route.name }}</v-toolbar-title>
       <v-spacer/>
       <v-layout>
-        <v-flex text-xs-right>
-          <Loader />
-        </v-flex>
-        <v-flex text-xs-right>
-          <v-flex>Heya, <strong>{{ viewer }}</strong></v-flex>
-        </v-flex>
+        <CreateWorkout />
       </v-layout>
     </v-toolbar>
 
@@ -42,39 +37,45 @@
     <AppSnackbar />
   </v-app>
   <v-app v-else>
-    <v-layout 
-      justify-center 
-      align-center 
-      fill-height>
-      <v-flex text-xs-center>
-        <v-progress-circular 
-          color="primary" 
-          size="64" 
-          :indeterminate="true"/>
-        <v-flex mt-2>Firing up ... 💪</v-flex>
-        <v-flex 
-          v-if="error" 
-          mt-2>
-          <p>
-            Hmm, looks like there was an issue making the connection. Please try again!
-            If this persists please contact: <a href="mailto:help@fittrak.ca">help@fittrak.ca</a>
-          </p>
-          <v-btn 
-            @click="signOut" 
-            depressed 
-            color="secondary">Sign out</v-btn>
+    <v-container
+      fill-height
+    >
+      <v-layout 
+        row
+        wrap
+        align-center
+      >
+        <v-flex text-xs-center>
+          <v-flex>
+            <Loader />
+            <span class="headline">Firing up ... 💪</span>
+          </v-flex>
+          <v-flex 
+            v-if="error" 
+            mt-2>
+            <p>
+              Hmm, looks like there was an issue making the connection. Please try again!
+              If this persists please contact: <a href="mailto:help@fittrak.ca">help@fittrak.ca</a>
+            </p>
+            <v-btn 
+              @click="signOut" 
+              depressed 
+              color="secondary">Sign out</v-btn>
+          </v-flex>
         </v-flex>
-      </v-flex>
-    </v-layout>
+      </v-layout>
+    </v-container>
   </v-app>
 </template>
 
 <script>
-import VIEWER from "@/graphql/queries/viewer.graphql";
+import { queries } from "@/graphql";
 
-import SidebarNavigationItems from "@/components/sidebar/SidebarNavigationItems";
-import AppSnackbar from "@/components/app/AppSnackbar";
 import Loader from "@/components/app/Loader";
+import Sidebar from "@/components/app/Sidebar";
+import AppSnackbar from "@/components/app/AppSnackbar";
+
+import CreateWorkout from "@/components/workouts/CreateWorkout";
 
 import { APP_NAME, SIGNOUT_URL } from "@/constants";
 
@@ -85,7 +86,7 @@ export default {
     return {
       APP_NAME,
       drawer: null,
-      viewer: "Stranger",
+      viewer: { username: "Stranger" },
       error: false
     };
   },
@@ -96,31 +97,27 @@ export default {
     }
   },
 
-  /*
-  props: {
-    source: {
-      type: String,
-      required: true
-    }
-  },
-  */
-
-  components: {
-    SidebarNavigationItems,
-    AppSnackbar,
-    Loader
-  },
-
   apollo: {
     viewer: {
-      query: VIEWER,
-      update: data => data.viewer.username,
+      query: queries.viewerQuery,
+
+      update(data) {
+        return data.viewer;
+      },
+
       error(error) {
         // TODO: Send error up
         console.log(`Error: ${error}`); // eslint-disable-line
         this.error = true;
       }
     }
+  },
+
+  components: {
+    Sidebar,
+    AppSnackbar,
+    CreateWorkout,
+    Loader
   }
 };
 </script>
diff --git a/fittrak-client/src/components/app/Sidebar.vue b/fittrak-client/src/components/app/Sidebar.vue
index 3e1e6ea..a9387f5 100644
--- a/fittrak-client/src/components/app/Sidebar.vue
+++ b/fittrak-client/src/components/app/Sidebar.vue
@@ -1,5 +1,14 @@
 <template>
   <v-list dark>
+    <v-list-tile>
+      <v-list-tile-content>
+        <v-list-tile-title class="title">
+          Heya, <span class="primary--text text--lighten-1">{{ viewer.username }}</span>
+        </v-list-tile-title>
+      </v-list-tile-content>
+    </v-list-tile>
+    <v-divider />
+
     <router-link 
       tag="v-list-tile" 
       to="/">
@@ -69,6 +78,7 @@
 <script>
 export default {
   name: "SidebarNavigationItems",
+
   methods: {
     toReleaseNotes() {
       window.location.href = "https://github.com/tsoporan/fittrak/releases";
@@ -77,6 +87,13 @@ export default {
       // Allow server side routing to kick in and logout session
       window.location.replace("/accounts/logout/");
     }
+  },
+
+  props: {
+    viewer: {
+      type: Object,
+      required: true
+    }
   }
 };
 </script>
diff --git a/fittrak-client/src/components/exercises/ExerciseActions.vue b/fittrak-client/src/components/exercises/ExerciseActions.vue
index 721f408..f88b5ef 100644
--- a/fittrak-client/src/components/exercises/ExerciseActions.vue
+++ b/fittrak-client/src/components/exercises/ExerciseActions.vue
@@ -169,8 +169,6 @@ export default {
     addExercises() {
       const workout = this.workout;
 
-      console.log("WORKOUT", workout.id);
-
       if (!this.newExercises.length) {
         return;
       }
diff --git a/fittrak-client/src/components/sets/AddSet.vue b/fittrak-client/src/components/sets/AddSet.vue
index dc335f9..894a074 100644
--- a/fittrak-client/src/components/sets/AddSet.vue
+++ b/fittrak-client/src/components/sets/AddSet.vue
@@ -68,7 +68,12 @@ export default {
       const { exercise } = this.$props;
       const { repetitions, weight, unit, bodyweight } = this;
 
-      if (!(repetitions && weight && unit)) return;
+      // TODO: Proper validation
+      const requiredSet = repetitions && weight && unit;
+
+      if (!requiredSet) {
+        return;
+      }
 
       this.$apollo
         .mutate({
diff --git a/fittrak-client/src/components/settings/UserSettings.vue b/fittrak-client/src/components/settings/UserSettings.vue
index e149168..d123962 100644
--- a/fittrak-client/src/components/settings/UserSettings.vue
+++ b/fittrak-client/src/components/settings/UserSettings.vue
@@ -48,8 +48,9 @@
         text-xs-right 
         mt-3>
         <v-btn 
-          flat
-          outline
+          dark
+          color="darkGrey"
+          depressed
           @click.stop="updateSettings"
         >Save</v-btn>
       </v-flex>
diff --git a/fittrak-client/src/components/workouts/CreateWorkout.vue b/fittrak-client/src/components/workouts/CreateWorkout.vue
index 03b6a27..1f001e6 100644
--- a/fittrak-client/src/components/workouts/CreateWorkout.vue
+++ b/fittrak-client/src/components/workouts/CreateWorkout.vue
@@ -1,21 +1,18 @@
 <template>
-  <v-flex 
-    xs6 
-    text-xs-right>
+  <v-flex text-xs-right>
     <v-btn 
-      :loading="loading" 
-      large 
+      icon
+      dark
+      color="primaryDark"
       @click.stop="createWorkout" 
-      class="success">
-      Create Workout
+      :loading="loading" 
+    ><v-icon>add</v-icon>
     </v-btn>
-  </v-flex> 
+  </v-flex>
 </template>
 
 <script>
-import WorkoutsQuery from "@/graphql/queries/workouts.graphql";
-import CreateWorkoutMutation from "@/graphql/mutations/createWorkout.graphql";
-
+import { queries, mutations } from "@/graphql";
 import { showSnackbar } from "@/helpers";
 
 export default {
@@ -33,22 +30,24 @@ export default {
 
       this.$apollo
         .mutate({
-          mutation: CreateWorkoutMutation,
+          mutation: mutations.createWorkoutMutation
 
+          /*
           update: (store, { data }) => {
             const newWorkout = data.createWorkout.workout;
             const result = store.readQuery({
-              query: WorkoutsQuery
+              query: queries.workoutsQuery
             });
 
             // Prepend the latest workout
             result.workouts.unshift(newWorkout);
 
             store.writeQuery({
-              query: WorkoutsQuery,
+              query: queries.workoutsQuery,
               data: result
             });
           }
+          */
         })
         .then(resp => {
           const workout = resp.data.createWorkout.workout;
diff --git a/fittrak-client/src/components/workouts/WorkoutCard.vue b/fittrak-client/src/components/workouts/WorkoutCard.vue
index ac1506d..36dcf33 100644
--- a/fittrak-client/src/components/workouts/WorkoutCard.vue
+++ b/fittrak-client/src/components/workouts/WorkoutCard.vue
@@ -1,37 +1,107 @@
 <template>
-  <v-list-tile @click.stop="viewWorkout">
-
-    <v-list-tile-content>
-      <v-list-tile-title>
-        #{{ $props.workout.slug }}
-      </v-list-tile-title>
-      <v-list-tile-sub-title>
-        Status: {{ getHumanStatus }}, Started: <span>{{ started }}</span>
-        <div v-if="workout.date_ended">, Ended: {{ ended }}</div>
-      </v-list-tile-sub-title>
-    </v-list-tile-content>
-
-    <v-list-tile-action>
-      <v-btn 
-        icon 
-        @click.stop="removeWorkout">
-        <v-icon>delete</v-icon>
-      </v-btn>
-    </v-list-tile-action>
-
-  </v-list-tile>
+  <v-card
+    :color="workout.color"
+    dark
+    @click.stop="viewWorkout"
+  >
+    <v-card-title primary-title> 
+      <span class="headline">{{ started }}</span>
+    </v-card-title>
+
+    <v-divider light />
+
+    <v-card-text>
+      <v-layout
+        row 
+      >
+        <v-flex 
+          class="subheading" 
+          md6 
+          xs12>
+          <div> 
+            Time Spent <span :class="relativeDarkness">Test</span>
+          </div>
+          <div>
+            Total Weight
+          </div>
+          <div>
+            Type: Custom
+          </div>
+          <div>
+            Exercises: {{ workout.exerciseCount }}
+          </div>
+        </v-flex>
+
+        <v-flex 
+          class="subheading" 
+          md6 
+          xs12>
+          <div>
+            Created on {{ workout.created_at }}
+          </div>
+          <div>
+            Last updated {{ workout.updated_at }}
+          </div>
+        </v-flex>
+      </v-layout>
+
+    </v-card-text>
+
+    <div class="status">
+      <v-chip 
+        label 
+        v-bind="{[`color`]: `${workout.color} darken-2`}"
+      >
+        <v-icon left>{{ statusIcon }}</v-icon>
+        {{ getHumanStatus }}
+      </v-chip>
+    </div>
+
+    <v-divider light />
+
+    <v-card-actions>
+      <v-toolbar 
+        flat 
+        dark 
+        :color="workout.color">
+
+        <v-btn 
+          icon>
+          <v-icon>share</v-icon>
+        </v-btn>
+
+        <v-spacer />
+
+        <v-btn 
+          icon>
+          <v-icon>favorite</v-icon>
+        </v-btn>
+        <v-btn 
+          @click.stop="removeWorkout"
+          icon>
+          <v-icon>delete</v-icon>
+        </v-btn>
+      </v-toolbar>
+    </v-card-actions>
+
+  </v-card>
 </template>
 
 <script>
-import { STATUS_MAP } from "@/constants";
-import REMOVE_WORKOUT from "@/graphql/mutations/removeWorkout.graphql";
-import WORKOUTS from "@/graphql/queries/workouts.graphql";
+import { queries, mutations } from "@/graphql";
+import {
+  STATUS_MAP,
+  PENDING,
+  COMPLETE,
+  IN_PROGRESS,
+  CANCELLED
+} from "@/constants";
 
 import { format } from "date-fns";
 import distanceInWords from "date-fns/distance_in_words";
 
 export default {
-  name: "WorkoutItem",
+  name: "WorkoutCard",
 
   computed: {
     // Human friendly status
@@ -39,10 +109,6 @@ export default {
       return STATUS_MAP[data.workout.status];
     },
 
-    exercises: data => {
-      return data.workout.exercises.filter(e => e.isActive);
-    },
-
     started: data => {
       return distanceInWords(new Date(), data.workout.dateStarted, {
         addSuffix: true
@@ -50,7 +116,32 @@ export default {
     },
 
     ended: data => {
-      return format(data.workout.dateEnded, "YYYY-MM-DD [@] h:MMA");
+      if (data.workout.dateEnded) {
+        return format(data.workout.dateEnded, "YYYY-MM-DD [@] h:MMA");
+      }
+
+      return "∞";
+    },
+
+    statusIcon: data => {
+      return {
+        [PENDING]: "hourglass_empty",
+        [IN_PROGRESS]: "hourglass_full",
+        [CANCELLED]: "cancel",
+        [COMPLETE]: "check_circle"
+      }[data.workout.status];
+    },
+
+    relativeDarkness: data => {
+      const { color } = data.workout;
+
+      const textColor = `${color}--text`;
+      const textColorDarkened = `text--darken-4`;
+
+      return {
+        [textColor]: true,
+        [textColorDarkened]: true
+      };
     }
   },
 
@@ -59,15 +150,16 @@ export default {
       const workoutId = this.$props.workout.id;
 
       this.$apollo.mutate({
-        mutation: REMOVE_WORKOUT,
+        mutation: mutations.RemoveWorkout,
 
         variables: {
-          workoutId: workoutId
-        },
+          workoutId
+        }
 
+        /*
         update(store) {
           const data = store.readQuery({
-            query: WORKOUTS
+            query: query.WorkoutsQuery
           });
 
           const filteredWorkouts = data.workouts.filter(
@@ -77,10 +169,11 @@ export default {
           data.workouts = filteredWorkouts;
 
           store.writeQuery({
-            query: WORKOUTS,
+            query: query.WorkoutsQuery,
             data
           });
         }
+        */
       });
     },
 
@@ -101,4 +194,9 @@ export default {
 </script>
 
 <style scoped>
+div.status {
+  position: absolute;
+  right: -10px;
+  top: -11px;
+}
 </style>
diff --git a/fittrak-client/src/components/workouts/WorkoutCardList.vue b/fittrak-client/src/components/workouts/WorkoutCardList.vue
new file mode 100644
index 0000000..77e72ce
--- /dev/null
+++ b/fittrak-client/src/components/workouts/WorkoutCardList.vue
@@ -0,0 +1,73 @@
+<template>
+  <v-layout 
+    row 
+    justify-space-around
+    wrap
+    mt-3
+    v-if="workouts.length"
+  >
+    <template
+      v-for="workout in coloredWorkouts"
+    >
+      <v-flex
+        xs12
+        md4
+        :key="workout.id"
+      > 
+        <WorkoutCard
+          :workout="workout" 
+          :key="workout.id" />
+      </v-flex>
+    </template>
+  </v-layout>
+
+  <v-layout
+    v-else 
+    text-xs-center
+    align-content-center
+  >
+    <v-flex>
+      <span class="headline">
+        No workouts available! 😞
+      </span>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script>
+import { getRandomColor } from "@/helpers";
+
+import WorkoutCard from "@/components/workouts/WorkoutCard";
+import WorkoutFilterHeader from "@/components/workouts/WorkoutFilterHeader";
+
+export default {
+  name: "WorkoutCardList",
+
+  data() {
+    return {
+      selectedStatus: null
+    };
+  },
+
+  computed: {
+    coloredWorkouts() {
+      return this.workouts.map(workout => ({
+        ...workout,
+        color: getRandomColor()
+      }));
+    }
+  },
+
+  components: {
+    WorkoutCard,
+    WorkoutFilterHeader
+  },
+
+  props: {
+    workouts: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>
diff --git a/fittrak-client/src/components/workouts/WorkoutFilterHeader.vue b/fittrak-client/src/components/workouts/WorkoutFilterHeader.vue
new file mode 100644
index 0000000..dc109b8
--- /dev/null
+++ b/fittrak-client/src/components/workouts/WorkoutFilterHeader.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-card 
+    flat 
+    color="mainBg"> 
+    <v-card-title>
+      <span class="headline grey--text text--darken-2">Latest</span>
+      <v-spacer />
+      <v-menu 
+        bottom 
+        left>
+        <v-btn 
+          slot="activator" 
+          dark 
+          icon>
+          <v-icon 
+            color="grey darken-2">filter_list</v-icon>
+        </v-btn>
+      </v-menu>
+    </v-card-title>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "WorkoutFilterHeader"
+};
+</script>
diff --git a/fittrak-client/src/components/workouts/WorkoutList.vue b/fittrak-client/src/components/workouts/WorkoutList.vue
deleted file mode 100644
index a005460..0000000
--- a/fittrak-client/src/components/workouts/WorkoutList.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <v-flex 
-    mt-5 
-    v-if="$apollo.loading" 
-    text-xs-center>
-    <v-progress-circular 
-      color="primary" 
-      :indeterminate="true" 
-      size="48"/>
-  </v-flex>
-  <v-flex v-else>
-    <v-flex v-if="workouts.length">
-      <v-list 
-        two-line 
-        subheader 
-        class="mt-2">
-        <v-subheader v-if="title">
-          {{ title }}
-        </v-subheader>
-        <WorkoutItem
-          v-for="workout in workouts"
-          :key="workout.id"
-          :workout="workout"
-        />
-      </v-list>
-    </v-flex>
-    <v-flex v-else>
-      <v-flex text-xs-center>No workouts available! 😞</v-flex>
-    </v-flex>
-  </v-flex>
-</template>
-
-<script>
-import { getStatusBySlug, showSnackbar } from "@/helpers";
-
-import WorkoutItem from "@/components/workouts/WorkoutItem";
-
-import WORKOUTS from "@/graphql/queries/workouts.graphql";
-
-export default {
-  name: "WorkoutList",
-
-  data() {
-    return {
-      workouts: [],
-      selectedStatus: null
-    };
-  },
-
-  created() {
-    // Set the status if we're currently in view
-    const { status } = this.$route.params;
-
-    if (status) {
-      this.selectedStatus = getStatusBySlug(status);
-    }
-  },
-
-  watch: {
-    $route(to) {
-      const { status } = to.params;
-
-      if (status) {
-        this.selectedStatus = getStatusBySlug(status);
-      }
-    }
-  },
-
-  apollo: {
-    workouts: {
-      query: WORKOUTS,
-      variables() {
-        const { status } = this.$props;
-
-        const vars = {
-          status
-        };
-
-        if (this.selectedStatus) {
-          vars.status = this.selectedStatus;
-        }
-
-        return vars;
-      },
-      update(data) {
-        const { limit } = this.$props;
-
-        if (data.workouts) {
-          if (limit) return data.workouts.slice(0, limit);
-
-          return data.workouts;
-        }
-
-        return [];
-      },
-      error() {
-        showSnackbar("error", "Could not load latest workouts.");
-      }
-    }
-  },
-
-  components: {
-    WorkoutItem
-  },
-
-  props: {
-    status: {
-      type: String,
-      required: false,
-      default: ""
-    },
-
-    title: {
-      type: String,
-      required: true
-    },
-
-    limit: {
-      type: Number,
-      required: true
-    }
-  }
-};
-</script>
-
-<style scoped>
-</style>
diff --git a/fittrak-client/src/graphql/queries.js b/fittrak-client/src/graphql/queries.js
index 2f042b5..81b3cdd 100644
--- a/fittrak-client/src/graphql/queries.js
+++ b/fittrak-client/src/graphql/queries.js
@@ -23,6 +23,7 @@ const workoutsQuery = gql`
       dateEnded
       status
       slug
+      exerciseCount
     }
   }
 `;
diff --git a/fittrak-client/src/helpers.js b/fittrak-client/src/helpers.js
index c2bc588..7b0d0c9 100644
--- a/fittrak-client/src/helpers.js
+++ b/fittrak-client/src/helpers.js
@@ -30,4 +30,37 @@ function showSnackbar(type, text, bus = EventBus) {
   });
 }
 
-export { getStatusBySlug, statusToSlug, showSnackbar, EventBus };
+function pickRandom(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function getRandomColor() {
+  const choices = [
+    "red",
+    "green",
+    "purple",
+    "orange",
+    "blue",
+    "indigo",
+    "deep-purple",
+    "pink",
+    "light-blue",
+    "cyan",
+    "teal",
+    "lime",
+    "amber",
+    "deep-orange",
+    "blue-grey",
+    "grey"
+  ];
+
+  return pickRandom(choices);
+}
+
+export {
+  getStatusBySlug,
+  statusToSlug,
+  showSnackbar,
+  EventBus,
+  getRandomColor
+};
diff --git a/fittrak-client/src/main.js b/fittrak-client/src/main.js
index 571032b..0d1f341 100644
--- a/fittrak-client/src/main.js
+++ b/fittrak-client/src/main.js
@@ -63,12 +63,15 @@ Vue.use(Vuetify, {
   },
   theme: {
     primary: "#06d6a0",
+    primaryDark: "#00ae80",
     secondary: "#26547c",
     accent: "#4ce0d2",
     error: "#d62246",
     info: "#26547c",
     success: "#06d6a0",
-    warning: "#ffd166"
+    warning: "#ffd166",
+    mainBg: "#fafafa",
+    darkGrey: "#424242"
   }
 });
 
diff --git a/fittrak/workouts/graphql/workouts.py b/fittrak/workouts/graphql/workouts.py
index dd2aedc..c33c1d2 100644
--- a/fittrak/workouts/graphql/workouts.py
+++ b/fittrak/workouts/graphql/workouts.py
@@ -31,9 +31,15 @@ class WorkoutFieldInputType(graphene.InputObjectType):
 
 
 class WorkoutType(DjangoObjectType):
+    exercise_count = graphene.Int()
+
     class Meta:
         model = Workout
 
+    @staticmethod
+    def resolve_exercise_count(workout, info):
+        return workout.exercises.count()
+
 
 class CreateWorkout(graphene.Mutation):
     workout = graphene.Field(WorkoutType)