3 files changed, 25 insertions, 3 deletions
diff --git a/index.html b/index.html
index 811b527..d58721b 100644
--- a/index.html
+++ b/index.html
@@ -14,8 +14,7 @@
     </head>
     <body>
         <header>
-            <h1>CIDR.xyz</h1>
-            <h2>An interactive IP address and CIDR range visualizer</h2>
+            <h1>CIDR.xyz<small>An interactive IP address and CIDR range visualizer</small></h1>
         </header>
         <section id="app"></section>
         <footer>
diff --git a/index.js b/index.js
index 60e4611..631c12b 100644
--- a/index.js
+++ b/index.js
@@ -83,7 +83,12 @@ class IPAddress extends React.Component {
       </div>
 
       <div className="details">
-        <span className="netmask">Netmask: {this.getNetmask()}</span>, <span className="count">Address Count: {this.getCount()}</span>
+        <span className="netmask">
+          <span className="label">Netmask:</span> {this.getNetmask()}
+        </span>
+        <span className="count">
+          <span className="label">Available addresses:</span> {this.getCount()}
+        </span>
       </div>
 
     </div>
diff --git a/style.scss b/style.scss
index db3ff5f..4cec398 100644
--- a/style.scss
+++ b/style.scss
@@ -14,10 +14,20 @@ body {
 
   header {
     margin-bottom: 30px;
+    h1 {
+      font-size: 1.7em;
+      margin-left: 40px;
+      small {
+        text-transform: uppercase;
+        color: #bbb;
+        display: block;
+      }
+    }
   }
 
   div.ip-address {
     text-align: center;
+    font-family: $monospace;
     div {
       margin-top: 65px;
     }
@@ -70,6 +80,14 @@ body {
         }
       }
     }
+    div.details {
+      span.label {
+        font-family: $lucida-grande;
+      }
+      span.count {
+        margin-left: 2em;
+      }
+    }
   }
 
   footer {