diff --git a/images/banner.png b/images/banner.png
deleted file mode 100644
index 4ca04897..00000000
Binary files a/images/banner.png and /dev/null differ
diff --git a/images/banner@2x.png b/images/banner@2x.png
deleted file mode 100644
index 4ca04897..00000000
Binary files a/images/banner@2x.png and /dev/null differ
diff --git a/images/cartoon-docker-compose.png b/images/cartoon-docker-compose.png
new file mode 100644
index 00000000..26594ae2
Binary files /dev/null and b/images/cartoon-docker-compose.png differ
diff --git a/images/cartoon-docker-compose@2x.png b/images/cartoon-docker-compose@2x.png
new file mode 100644
index 00000000..70a83edf
Binary files /dev/null and b/images/cartoon-docker-compose@2x.png differ
diff --git a/images/cartoon-docker-machine.png b/images/cartoon-docker-machine.png
new file mode 100644
index 00000000..15ca37ad
Binary files /dev/null and b/images/cartoon-docker-machine.png differ
diff --git a/images/cartoon-docker-machine@2x.png b/images/cartoon-docker-machine@2x.png
new file mode 100644
index 00000000..64100408
Binary files /dev/null and b/images/cartoon-docker-machine@2x.png differ
diff --git a/images/cartoon-docker.png b/images/cartoon-docker.png
new file mode 100644
index 00000000..7eb4d4da
Binary files /dev/null and b/images/cartoon-docker.png differ
diff --git a/images/cartoon-docker@2x.png b/images/cartoon-docker@2x.png
new file mode 100644
index 00000000..3de525f1
Binary files /dev/null and b/images/cartoon-docker@2x.png differ
diff --git a/images/cartoon-kitematic.png b/images/cartoon-kitematic.png
new file mode 100644
index 00000000..495aabae
Binary files /dev/null and b/images/cartoon-kitematic.png differ
diff --git a/images/cartoon-kitematic@2x.png b/images/cartoon-kitematic@2x.png
new file mode 100644
index 00000000..b0621c99
Binary files /dev/null and b/images/cartoon-kitematic@2x.png differ
diff --git a/src/components/About.react.js b/src/components/About.react.js
index 914b24a3..45c2e402 100644
--- a/src/components/About.react.js
+++ b/src/components/About.react.js
@@ -25,39 +25,40 @@ var Preferences = React.createClass({
   render: function () {
     return (
       <div className="preferences">
-        <div className="preferences-content">
+        <div className="about-content">
           <a onClick={this.handleGoBackClick}>Go Back</a>
-          <RetinaImage src="banner.png"/>
-          <table className="table">
-            <thead>
-              <tr>
-                <th>APP NAME</th>
-                <th>VERSION</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>{packages.name}</td>
-                <td>{packages.version}</td>
-              </tr>
-              <tr>
-                <td>Docker</td>
-                <td>{packages["docker-version"]}</td>
-              </tr>
-              <tr>
-                <td>Docker Machine</td>
-                <td>{packages["docker-machine-version"]}</td>
-              </tr>
-              <tr>
-                <td>Docker Compose</td>
-                <td>{packages["docker-compose-version"]}</td>
-              </tr>
-              <tr>
-                <td>VirtualBox</td>
-                <td>{packages["virtualbox-version"]}</td>
-              </tr>
-            </tbody>
-          </table>
+          <h2>Installed Software</h2>
+          <div className="row">
+            <div className="col-md-6">
+              <RetinaImage src="cartoon-kitematic.png"/>
+              <h3>{packages.name}</h3>
+              <p>{packages.version}</p>
+            </div>
+            <div className="col-md-6">
+              <RetinaImage src="cartoon-docker.png"/>
+              <h3>Docker</h3>
+              <p>{packages["docker-version"]}</p>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-md-6">
+              <RetinaImage src="cartoon-docker-machine.png"/>
+              <h3>Docker Machine</h3>
+              <p>{packages["docker-machine-version"]}</p>
+            </div>
+            <div className="col-md-6">
+              <RetinaImage src="cartoon-docker-compose.png"/>
+              <h3>Docker Compose</h3>
+              <p>{packages["docker-compose-version"]}</p>
+            </div>
+          </div>
+          <h2>Third-Party Software</h2>
+          <div className="row">
+            <div className="col-md-6 col-md-offset-3">
+              <h3>VirtualBox</h3>
+              <p>{packages["virtualbox-version"]}</p>
+            </div>
+          </div>
         </div>
       </div>
     );
diff --git a/styles/preferences.less b/styles/preferences.less
index 189d46bf..f41544d6 100644
--- a/styles/preferences.less
+++ b/styles/preferences.less
@@ -6,7 +6,7 @@
   align-items: flex-start;
   justify-content: center;
 
-  .preferences-content {
+  .preferences-content, .about-content {
     flex: 1 auto;
     margin-top: 45px;
     padding: 50px;
@@ -37,4 +37,22 @@
       }
     }
   }
+  .about-content {
+    margin-top: 0px;
+    h2 {
+      font-size: 3rem;
+      text-align: center;
+    }
+    .row {
+      text-align: center;
+    }
+    h3 {
+      font-size: 2rem;
+      text-align: center;
+    }
+    p {
+      color: @gray-normal;
+      font-size: 1.5rem;
+    }
+  }
 }