diff --git a/shell/ermine/BUILD.gn b/shell/ermine/BUILD.gn
index ec7d8f3..117bcba 100644
--- a/shell/ermine/BUILD.gn
+++ b/shell/ermine/BUILD.gn
@@ -61,7 +61,8 @@
     "src/widgets/tile_chrome.dart",
     "src/widgets/tile_sizer.dart",
     "src/widgets/tile_tab.dart",
-    "src/widgets/status_bar_visualizer.dart"
+    "src/widgets/status_tick_bar_visualizer.dart",
+    "src/widgets/status_progress_bar_visualizer.dart"
   ]
 
   deps = [
diff --git a/shell/ermine/lib/src/widgets/status.dart b/shell/ermine/lib/src/widgets/status.dart
index d04220d..4e8fb4f 100644
--- a/shell/ermine/lib/src/widgets/status.dart
+++ b/shell/ermine/lib/src/widgets/status.dart
@@ -8,7 +8,7 @@
 
 import '../models/status_model.dart';
 import '../utils/elevations.dart';
-import '../widgets/status_bar_visualizer.dart';
+import '../widgets/status_tick_bar_visualizer.dart';
 
 const _listItemHeight = 35.0;
 const _leadingStyle = TextStyle(
@@ -80,11 +80,14 @@
                     'CPU Usage',
                     style: _leadingStyle,
                   ),
-                  title: StatusBarVisualizer(
+                  title: StatusTickBarVisualizer(
                     barValue: model.getCpu(),
                     barFill: model.getCpuFill(),
                     barMax: model.getCpuMax(),
-                    barSize: 25,
+                    tickMax: 25,
+                    textStyle: _titleStyle,
+                    textAlignment: TextAlign.left,
+                    barFirst: true,
                   ),
                 ),
               ),
@@ -97,11 +100,14 @@
                     'Mem Usage',
                     style: _leadingStyle,
                   ),
-                  title: StatusBarVisualizer(
+                  title: StatusTickBarVisualizer(
                     barValue: model.getMem(),
                     barFill: model.getMemFill(),
                     barMax: model.getMemMax(),
-                    barSize: 25,
+                    tickMax: 25,
+                    textStyle: _titleStyle,
+                    textAlignment: TextAlign.left,
+                    barFirst: true,
                   ),
                 ),
               ),
@@ -159,4 +165,4 @@
       ),
     );
   }
-}
+}
\ No newline at end of file
diff --git a/shell/ermine/lib/src/widgets/status_bar_visualizer.dart b/shell/ermine/lib/src/widgets/status_bar_visualizer.dart
deleted file mode 100644
index da273b9..0000000
--- a/shell/ermine/lib/src/widgets/status_bar_visualizer.dart
+++ /dev/null
@@ -1,84 +0,0 @@
-// Copyright 2019 The Fuchsia Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'dart:ui';
-
-import 'package:flutter/material.dart';
-
-// Builds bar visualization given a value, fill amount, and maximum amount.
-class StatusBarVisualizer extends StatelessWidget {
-  // Descriptive text displayed to the right of bar visualization.
-  final String _barValue;
-  // Amount the bar visualization will be filled.
-  final double _barFill;
-  // Maximum amount the bar visualization can be filled.
-  final double _barMax;
-  // Maximum amount of tick marks allowed to be in row.
-  final int _barSize;
-
-  const StatusBarVisualizer(
-      {@required String barValue,
-      @required double barFill,
-      @required double barMax,
-      @required int barSize})
-      : _barValue = barValue,
-        _barFill = barFill,
-        _barMax = barMax,
-        _barSize = barSize;
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.end,
-      children: <Widget>[
-        Text(
-          _drawTicks(_activeTicks()),
-          style: TextStyle(
-            color: Colors.white,
-            fontSize: 14,
-            letterSpacing: -4,
-            fontFamily: 'RobotoMono',
-            fontWeight: FontWeight.w400,
-          ),
-        ),
-        Text(
-          _drawTicks(_inactiveTicks()),
-          style: TextStyle(
-            color: Colors.grey[600],
-            fontSize: 14,
-            letterSpacing: -4,
-            fontFamily: 'RobotoMono',
-            fontWeight: FontWeight.w400,
-          ),
-        ),
-        SizedBox(width: _barSpace()),
-        Text(
-          _barValue,
-          textAlign: TextAlign.right,
-          style: TextStyle(
-            color: Colors.white,
-            fontSize: 14,
-            fontFamily: 'RobotoMono',
-            fontWeight: FontWeight.w400,
-          ),
-        ),
-      ],
-    );
-  }
-
-  // Determines how many active ticks to be drawn.
-  int _activeTicks() => ((_barFill / _barMax) * _maxTicks()).toInt();
-
-  // Determines how many inactive ticks to be drawn.
-  int _inactiveTicks() => (_maxTicks() - _activeTicks());
-
-  // Determines how many ticks can fit in row.
-  int _maxTicks() => _barSize - _barValue.length;
-
-  // Builds string of ticks.
-  String _drawTicks(int numTicks) => List.filled(numTicks + 1, '').join('| ');
-
-  // Adds space to align bar visualizations.
-  double _barSpace() => _barValue.length % 2 == 0 ? 9 : 6;
-}
diff --git a/shell/ermine/lib/src/widgets/status_progress_bar_visualizer.dart b/shell/ermine/lib/src/widgets/status_progress_bar_visualizer.dart
new file mode 100644
index 0000000..92ff49a
--- /dev/null
+++ b/shell/ermine/lib/src/widgets/status_progress_bar_visualizer.dart
@@ -0,0 +1,130 @@
+// Copyright 2019 The Fuchsia Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+// Builds bar visualization given a value, fill amount, and maximum amount.
+class StatusProgressBarVisualizer extends StatelessWidget {
+  // Descriptive text displayed on the side of the progress bar visualization.
+  final String _barValue;
+  // Amount the progress bar visualization will be filled.
+  final double _barFill;
+  // Maximum amount the progress bar visualization can be filled.
+  final double _barMax;
+  // Double between 0 - 1 that determines the ratio of bar to text in container.
+  final double _barSize;
+  // Height of bar visualization & text.
+  final double _barHeight;
+  // Determines style of text in visualiation.
+  final TextStyle _textStyle;
+  // Determines alignment of text on the side of the bar visualization.
+  final TextAlign _textAlignment;
+  // Determines if bar visualization is first in order in row.
+  final bool _barFirst;
+
+  const StatusProgressBarVisualizer(
+      {@required String barValue,
+      @required double barFill,
+      @required double barMax,
+      @required double barSize,
+      @required double barHeight,
+      @required TextStyle textStyle,
+      @required TextAlign textAlignment,
+      @required bool barFirst})
+      : _barValue = barValue,
+        _barFill = barFill,
+        _barMax = barMax,
+        _barSize = barSize,
+        _barHeight = barHeight,
+        _textStyle = textStyle,
+        _textAlignment = textAlignment,
+        _barFirst = barFirst;
+
+  @override
+  Widget build(BuildContext context) {
+    if (_barFirst)
+      return _buildBarLeft(context);
+    return _buildBarRight(context);
+  }
+
+  Widget _buildBarLeft(BuildContext context) {
+    return Flex(
+      direction: Axis.horizontal,
+      children: <Widget>[
+        // Progress Bar
+        Expanded(
+          flex: (_barSize * 100).toInt(),
+          child: Flex(
+            direction: Axis.horizontal,
+            children: <Widget>[
+              Expanded(
+                  flex: ((_barFill / _barMax) * 100).toInt(),
+                  child: Container(
+                    height: _barHeight,
+                    color: Colors.white,
+                  )),
+              Expanded(
+                flex: (((_barMax - _barFill) / _barMax) * 100).toInt(),
+                child: Container(
+                  height: _barHeight,
+                  color: Colors.grey[600],
+                ),
+              ),
+            ],
+          ),
+        ),
+        // Descriptive Text
+        Expanded(
+          flex: ((1 - _barSize) * 100).toInt(),
+          child: Text(
+            _barValue,
+            textAlign: _textAlignment,
+            style: _textStyle,
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildBarRight(BuildContext context) {
+    return Flex(
+      direction: Axis.horizontal,
+      children: <Widget>[
+        // Descriptive Text
+        Expanded(
+          flex: ((1 - _barSize) * 100).toInt(),
+          child: Text(
+            _barValue,
+            textAlign: _textAlignment,
+            style: _textStyle,
+          ),
+        ),
+        // Progress Bar
+        Expanded(
+          flex: (_barSize * 100).toInt(),
+          child: Flex(
+            direction: Axis.horizontal,
+            children: <Widget>[
+              Expanded(
+                  flex: ((_barFill / _barMax) * 100).toInt(),
+                  child: Container(
+                    height: _barHeight,
+                    color: Colors.white,
+                  )),
+              Expanded(
+                flex: (((_barMax - _barFill) / _barMax) * 100).toInt(),
+                child: Container(
+                  height: _barHeight,
+                  color: Colors.grey[600],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/shell/ermine/lib/src/widgets/status_tick_bar_visualizer.dart b/shell/ermine/lib/src/widgets/status_tick_bar_visualizer.dart
new file mode 100644
index 0000000..4fea0fb
--- /dev/null
+++ b/shell/ermine/lib/src/widgets/status_tick_bar_visualizer.dart
@@ -0,0 +1,126 @@
+// Copyright 2019 The Fuchsia Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+// Builds bar visualization given a value, fill amount, and maximum amount.
+class StatusTickBarVisualizer extends StatelessWidget {
+  // Descriptive text displayed to the right of bar visualization.
+  final String _barValue;
+  // Amount the bar visualization will be filled.
+  final double _barFill;
+  // Maximum amount the bar visualization can be filled.
+  final double _barMax;
+  // Maximum amount of tick marks allowed to be in row.
+  final int _tickMax;
+  // Determines style of text in visualiation.
+  final TextStyle _textStyle;
+  // Determines alignment of text on the side of the bar visualization.
+  final TextAlign _textAlignment;
+  // Determines if bar visualization is first in order in row.
+  final bool _barFirst;
+
+  const StatusTickBarVisualizer(
+      {@required String barValue,
+      @required double barFill,
+      @required double barMax,
+      @required int tickMax,
+      @required TextStyle textStyle,
+      @required TextAlign textAlignment,
+      @required bool barFirst})
+      : _barValue = barValue,
+        _barFill = barFill,
+        _barMax = barMax,
+        _tickMax = tickMax,
+        _textStyle = textStyle,
+        _textAlignment = textAlignment,
+        _barFirst = barFirst;
+
+  @override
+  Widget build(BuildContext context) {
+    if (_barFirst)
+      return _buildBarLeft(context);
+    return _buildBarRight(context);
+  }
+
+  Widget _buildBarLeft(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: <Widget>[
+        Text(
+          _drawTicks(_activeTicks()),
+          style: _setTickStyle(true)
+        ),
+        Text(
+          _drawTicks(_inactiveTicks()),
+          style: _setTickStyle(false),
+        ),
+        SizedBox(width: _barSpace()),
+        Text(
+          _barValue,
+          textAlign: _textAlignment,
+          style: _textStyle,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildBarRight(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: <Widget>[
+        Text(
+          _barValue,
+          textAlign: _textAlignment,
+          style: _textStyle,
+        ),
+        SizedBox(width: _barSpace()),
+        Text(
+          _drawTicks(_activeTicks()),
+          style: _setTickStyle(true),
+        ),
+        Text(
+          _drawTicks(_inactiveTicks()),
+          style: _setTickStyle(false)
+        ),
+      ],
+    );
+  }
+
+  TextStyle _setTickStyle(bool active) {
+    if (active) {
+      return TextStyle(
+        color: Colors.white,
+        fontSize: 14,
+        letterSpacing: -4,
+        fontFamily: 'RobotoMono',
+        fontWeight: FontWeight.w400,
+      );
+    }
+    return TextStyle(
+      color: Colors.grey[600],
+      fontSize: 14,
+      letterSpacing: -4,
+      fontFamily: 'RobotoMono',
+      fontWeight: FontWeight.w400,
+    );
+  }
+
+  // Determines how many active ticks to be drawn.
+  int _activeTicks() => ((_barFill / _barMax) * _maxTicks()).toInt();
+
+  // Determines how many inactive ticks to be drawn.
+  int _inactiveTicks() => (_maxTicks() - _activeTicks());
+
+  // Determines how many ticks can fit in row.
+  int _maxTicks() => _tickMax - _barValue.length;
+
+  // Builds string of ticks.
+  String _drawTicks(int numTicks) => List.filled(numTicks + 1, '').join('| ');
+
+  // Adds space to align bar visualizations.
+  double _barSpace() => _barValue.length % 2 == 0 ? 9 : 6;
+}