diff --git a/browser/flagr-ui/src/App.vue b/browser/flagr-ui/src/App.vue
index 978b4ef2..0ed1131d 100644
--- a/browser/flagr-ui/src/App.vue
+++ b/browser/flagr-ui/src/App.vue
@@ -3,11 +3,11 @@
     <el-menu mode="horizontal" class="navbar">
       <el-row>
         <el-col :span="6">
-          <div class="img-frame">
-            <router-link :to="{name: 'home'}"><img src="./assets/logo.png"></router-link>
-          </div>
+          <router-link :to="{name: 'home'}">
+            <h3 class="logo">Flagr</h3>
+          </router-link>
         </el-col>
-        <el-col :span="3" :offset="12">
+        <el-col :span="2" :offset="13">
           <a href="https://checkr.github.io/flagr/api_docs" target="_blank"><h3>API</h3></a>
         </el-col>
         <el-col :span="2">
@@ -29,7 +29,6 @@ export default {
 
 <style lang="less">
 body {
-  background-color: #f7f7f7;
   margin: 0;
   padding: 0;
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -69,27 +68,9 @@ ul {
 
   .navbar {
     background-color: #74E5E0;
-    .img-frame {
-      height: 80px;
-      width: 150px;
-      position: relative;
-    }
-    img {
-      max-height: 100%;
-      max-width: 100%;
-      width: auto;
-      height: auto;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      margin: auto;
-    }
     h3 {
       color: white;
-      text-align: right;
-      margin-right: 1em;
+      margin-left: 2em;
       &:hover {
         color: #f7f7f7;
       }
@@ -174,10 +155,10 @@ ul {
   }
 
   .jsoneditor{
-    border-color: #d8dce5;
+    border-color: #E4E7ED;
     .jsoneditor-menu {
-      background-color: #74E5E0;
-      border-bottom-color: #74E5E0;
+      background-color: #E4E7ED;
+      border-bottom-color: #E4E7ED;
     }
     .jsoneditor-poweredBy {
       display: none;
diff --git a/browser/flagr-ui/src/components/Flag.vue b/browser/flagr-ui/src/components/Flag.vue
index aacc9db0..76ed893a 100644
--- a/browser/flagr-ui/src/components/Flag.vue
+++ b/browser/flagr-ui/src/components/Flag.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-col :span="14" :offset="5">
+    <el-col :span="20" :offset="2">
       <div class="container flag-container">
         <el-dialog
           title="Delete feature flag"
@@ -90,7 +90,7 @@
         <div v-if="loaded && flag">
           <el-tabs>
             <el-tab-pane label="Config">
-              <el-card>
+              <el-card class="flag-config-card">
                 <div slot="header" class="el-card-header">
                   <div class="flex-row">
                     <div class="flex-row-left">
@@ -110,7 +110,7 @@
                     </div>
                   </div>
                 </div>
-                <el-card>
+                <el-card shadow="hover">
                   <div class="flex-row id-row">
                     <div class="flex-row-left">
                       <el-tag type="primary" :disable-transitions="true">
@@ -127,7 +127,7 @@
                           :inactive-value="false">
                         </el-switch>
                       </el-tooltip>
-                      <span size="small">Data Records</span>
+                      <span size="small" class="data-records-label">Data Records</span>
                       <el-button size="small" @click="putFlag(flag)">
                         Save Flag
                       </el-button>
@@ -160,7 +160,7 @@
                 </div>
                 <div class="variants-container-inner" v-if="flag.variants.length">
                   <div v-for="variant in flag.variants" :key="variant.id">
-                    <el-card>
+                    <el-card shadow="hover">
                       <el-form label-position="left" label-width="100px">
                         <div class="flex-row id-row">
                           <div class="flex-row-left">
@@ -175,18 +175,24 @@
                             </el-button>
                           </div>
                         </div>
-                        <el-input
-                          size="small"
-                          placeholder="Key"
-                          v-model="variant.key">
-                          <template slot="prepend">Key</template>
-                        </el-input>
-                        <el-input
-                          size="small"
-                          placeholder="{}"
-                          v-model="variant.attachmentStr">
-                          <template slot="prepend">Attachment </template>
-                        </el-input>
+                        <el-row :gutter="10">
+                          <el-col :span="12">
+                            <el-input
+                              size="small"
+                              placeholder="Key"
+                              v-model="variant.key">
+                              <template slot="prepend">Key</template>
+                            </el-input>
+                          </el-col>
+                          <el-col :span="12">
+                            <el-input
+                              size="small"
+                              placeholder="{}"
+                              v-model="variant.attachmentStr">
+                              <template slot="prepend">Attachment </template>
+                            </el-input>
+                          </el-col>
+                        </el-row>
                       </el-form>
                     </el-card>
                   </div>
@@ -234,6 +240,7 @@
                   <draggable v-model="flag.segments" @start="drag=true" @end="drag=false">
                     <transition-group>
                       <el-card
+                        shadow="hover"
                         v-for="segment in flag.segments"
                         :key="segment.id"
                         class="segment grabbable">
@@ -243,14 +250,14 @@
                           </div>
                           <div class="flex-row-right">
                             <el-button slot="append" size="small" @click="putSegment(segment)">
-                              Save Segment
+                              Save Segment Setting
                             </el-button>
                             <el-button @click="deleteSegment(segment)" size="small">
                               <span class="el-icon-delete"/>
                             </el-button>
                           </div>
                         </div>
-                        <el-row :gutter="20" class="id-row">
+                        <el-row :gutter="10" class="id-row">
                           <el-col :span="15">
                             <el-input
                               size="small"
@@ -275,7 +282,7 @@
                         </el-row>
                         <el-row>
                           <el-col :span="24">
-                            <h4>Constraints (match ALL of them)</h4>
+                            <h5>Constraints (match ALL of them)</h5>
                             <div class="constraints">
                               <div class="constraints-inner" v-if="segment.constraints.length">
                                 <div
@@ -309,13 +316,13 @@
                                       </el-input>
                                     </el-col>
                                     <el-col :span="2">
-                                      <el-button class="width--full" @click="putConstraint(segment, constraint)" size="small">
-                                        <span class="el-icon-check"/>
+                                      <el-button type="success" plain class="width--full" @click="putConstraint(segment, constraint)" size="small">
+                                        Save
                                       </el-button>
                                     </el-col>
                                     <el-col :span="2">
-                                      <el-button class="width--full" @click="deleteConstraint(segment, constraint)" size="small">
-                                        <span class="el-icon-delete"/>
+                                      <el-button type="danger" plain class="width--full" @click="deleteConstraint(segment, constraint)" size="small">
+                                        <i class="el-icon-delete"></i>
                                       </el-button>
                                     </el-col>
                                   </el-row>
@@ -354,6 +361,8 @@
                                     <el-button
                                       class="width--full"
                                       size="small"
+                                      type="primary"
+                                      plain
                                       :disabled="!segment.newConstraint.property || !segment.newConstraint.value"
                                       @click.prevent="() => createConstraint(segment)">
                                       <span class="el-icon-plus"/>
@@ -364,22 +373,33 @@
                             </div>
                           </el-col>
                           <el-col :span="24" class="segment-distributions">
-                            <h4>Distribution</h4>
-                            <ul class="segment-distributions-inner" v-if="segment.distributions.length">
-                              <li v-for="distribution in segment.distributions" :key="distribution.id">
-                                <el-tag type="gray" :disable-transitions="true">{{ distribution.variantKey }}</el-tag>
-                                <span size="small">{{ distribution.percent }}%</span>
-                              </li>
-                            </ul>
+                            <h5>
+                              <span>Distribution</span>
+                              <el-button round size="mini" @click="editDistribution(segment)">
+                                <span class="el-icon-edit"></span> edit
+                              </el-button>
+                            </h5>
+                            <el-row type="flex" v-if="segment.distributions.length" :gutter="20">
+                              <el-col
+                                v-for="distribution in segment.distributions" :key="distribution.id"
+                                :span="6">
+                                <el-card shadow="never" class="distribution-card">
+                                  <div>
+                                    <span size="small">{{distribution.variantKey}}</span>
+                                  </div>
+                                  <el-progress
+                                    type="circle"
+                                    color="#74E5E0"
+                                    width="70"
+                                    :percentage="distribution.percent">
+                                  </el-progress>
+                                </el-card>
+                              </el-col>
+                            </el-row>
+
                             <div class="card--error" v-else>
                               No distribution yet
                             </div>
-                            <div class="edit-distribution-button">
-                              <el-button class="width--full" @click="editDistribution(segment)">
-                                <span class="el-icon-edit"></span>
-                                Edit distribution
-                              </el-button>
-                            </div>
                           </el-col>
                         </el-row>
                       </el-card>
@@ -395,7 +415,7 @@
                 <div slot="header" class="el-card-header">
                   <h2>Flag Settings</h2>
                 </div>
-                <el-button @click="dialogDeleteFlagVisible = true">
+                <el-button @click="dialogDeleteFlagVisible = true" type="danger" plain>
                   <span class="el-icon-delete"></span>
                   Delete Flag
                 </el-button>
@@ -714,9 +734,9 @@ export default {
 </script>
 
 <style lang="less">
-h4 {
+h5 {
   padding: 0;
-  margin: 10px 0;
+  margin: 10px 0 5px;
 }
 
 .grabbable {
@@ -739,6 +759,19 @@ h4 {
     background-color: #f6f6f6;
     border-radius: 5px;
   }
+  .distribution-card {
+    height: 110px;
+    text-align: center;
+    .el-card__body {
+      padding: 3px 10px 10px 10px;
+    }
+    font-size: 0.9em;
+  }
+  .distribution-card__edit {
+    button {
+      boarder-size: 0;
+    }
+  }
 }
 
 ol.constraints-inner {
@@ -764,7 +797,7 @@ ol.constraints-inner {
     margin-bottom: 1em;
   }
   .el-input-group__prepend {
-    width: 8em;
+    width: 2em;
   }
 }
 
@@ -792,10 +825,16 @@ ol.constraints-inner {
   margin-bottom: 8px;
 }
 
-.flag-content{
-  margin-top: 8px;
-  .el-input-group__prepend {
-    width: 8em;
+.flag-config-card {
+  .flag-content {
+    margin-top: 8px;
+    .el-input-group__prepend {
+      width: 8em;
+    }
+  }
+  .data-records-label {
+    margin-right: 8px;
   }
 }
+
 </style>
diff --git a/browser/flagr-ui/src/components/Flags.vue b/browser/flagr-ui/src/components/Flags.vue
index f9671f4a..67a460bc 100644
--- a/browser/flagr-ui/src/components/Flags.vue
+++ b/browser/flagr-ui/src/components/Flags.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-col :span="14" :offset="5">
+    <el-col :span="20" :offset="2">
       <div class="flags-container container">
         <el-breadcrumb separator="/" v-if="loaded">
           <el-breadcrumb-item>Home page</el-breadcrumb-item>
@@ -9,43 +9,73 @@
         <spinner v-if="!loaded" />
 
         <div v-if="loaded">
-          <ul v-if="flags.length">
-            <li
-              v-for="flag in flags" class="flag"
-              :class="{new: flag._new}">
-              <router-link
-                class="flag-link flex-row"
-                :to="{name: 'flag', params: {flagId: flag.id}}">
-                <div class="flex-row-left">
-                  <el-tag type="primary" :disable-transitions="true">Flag ID: {{ flag.id }}</el-tag> {{ flag.description }}
-                </div>
-                <div class="flex-row-right">
-                  <span :class="{'flag-enabled-icon': true, enabled: flag.enabled}"></span>
-                </div>
-              </router-link>
-            </li>
-          </ul>
-          <div class="card--empty" v-else>
-            No feature flags created yet
-          </div>
-          <div>
-            <p>
+          <el-row>
+            <el-col>
               <el-input
                 placeholder="Specific new flag description"
                 v-model="newFlag.description">
                 <template slot="prepend">
-                  Description
+                  <span class="el-icon-plus"/>
                 </template>
                 <template slot="append">
                   <el-button
+                    type="primary"
                     :disabled="!newFlag.description"
                     @click.prevent="createFlag">
-                    <span class="el-icon-plus"/> Create Flag
+                    Create New Flag
                   </el-button>
                 </template>
               </el-input>
-            </p>
-          </div>
+            </el-col>
+          </el-row>
+
+          <el-table
+            :data="flags"
+            :stripe="true"
+            :highlight-current-row="false"
+            :default-sort="{prop: 'id', order: 'descending'}"
+            v-on:row-click="goToFlag"
+            style="width: 100%">
+            <el-table-column
+              prop="id"
+              align="center"
+              label="Flag ID"
+              sortable
+              fixed
+              width="100">
+            </el-table-column>
+            <el-table-column
+              prop="description"
+              label="Description"
+              min-width="380">
+            </el-table-column>
+            <el-table-column
+              prop="updatedBy"
+              label="Last Updated By"
+              sortable
+              width="200">
+            </el-table-column>
+            <el-table-column
+              prop="updatedAt"
+              label="Updated At (UTC)"
+              :formatter="datetimeFormatter"
+              sortable
+              width="200">
+            </el-table-column>
+            <el-table-column
+              prop="enabled"
+              label="Enabled"
+              sortable
+              align="center"
+              fixed="right"
+              width="100">
+              <template slot-scope="scope">
+                <el-tag
+                  :type="scope.row.enabled ? 'primary' : 'danger'"
+                  disable-transitions>{{scope.row.enabled ? 'on' : 'off'}}</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
       </div>
     </el-col>
@@ -91,6 +121,15 @@ export default {
       }, handleErr.bind(this))
   },
   methods: {
+    flagEnabledFormatter (row, col, val) {
+      return val ? 'on' : 'off'
+    },
+    datetimeFormatter (row, col, val) {
+      return val.split('.')[0]
+    },
+    goToFlag (row) {
+      this.$router.push({name: 'flag', params: {flagId: row.id}})
+    },
     createFlag () {
       if (!this.newFlag.description) {
         return
@@ -110,51 +149,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 
 .flags-container {
-  ul {
-    border-radius: 3px;
-    border: 1px solid #ddd;
-    background-color: white;
-    overflow-x: hidden;
-    list-style-type: none;
-    padding: 0;
-    li.flag {
-      text-align: left;
-      display: block;
-      padding: 0;
-      border-bottom: 1px solid #ccc;
-      &.new {
-        background-color: #13ce66;
-        .flag-link {
-          color: white;
-        }
-      }
-      .flag-link {
-        display: inline-block;
-        box-sizing: border-box;
-        padding: 8px 12px;
-        font-size: 1.1em;
-        width: 100%;
-        text-decoration: none;
-        color: #2c3e50;
-        &:hover {
-          background-color: #74E5E0;
-          color: white;
-        }
-      }
-      .flag-enabled-icon {
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        border-radius: 5px;
-        background-color: #ff4949;
-        &.enabled {
-          background-color: #13ce66;
-        }
-      }
-    }
+  .el-table {
+    margin-top: 2em;
   }
 }