diff --git a/webpack-modules/addon/manifest.json b/webpack-modules/addon/manifest.json
index 34580be..62ae79f 100644
--- a/webpack-modules/addon/manifest.json
+++ b/webpack-modules/addon/manifest.json
@@ -9,7 +9,8 @@
     "browser_action": {
         "default_icon": "icons/leftpad-32.png",
         "default_title": "Left Pad",
-        "default_popup": "popup/left-pad.html"
+        "default_popup": "popup/left-pad.html",
+        "browser_style": true
     },
     "background": {
         "scripts": ["background_scripts/index.js"]
diff --git a/webpack-modules/addon/popup/left-pad.html b/webpack-modules/addon/popup/left-pad.html
index bf4f7f3..8fb2e2a 100644
--- a/webpack-modules/addon/popup/left-pad.html
+++ b/webpack-modules/addon/popup/left-pad.html
@@ -2,15 +2,33 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
+        <link rel="stylesheet" href="style.css">
     </head>
-    <body>
+    <body class="panel">
         <form id="leftpad-form">
-            <label for="text">Text:</label><input type="text" id="text" required><br>
-            <label for="amount">Result length:</label><input type="number" id="amount" min="0" step="1" required><br>
-            <label for="with">Pad with:</label><input type="text" required value="_" id="with"><br>
-            <label for="result">Result:</label><output id="result"></output><br>
-            <button type="submit">Pad!</button>
-            <button id="pad-bg">Pad in background script</button>
+            <section class="panel-section panel-section-formElements">
+                <div class="panel-formElements-item">
+                    <label for="text">Text:</label>
+                    <input type="text" id="text" required>
+                </div>
+                <div class="panel-formElements-item">
+                    <label for="amount">Result length:</label>
+                    <input type="number" id="amount" min="0" step="1" required>
+                </div>
+                <div class="panel-formElements-item">
+                    <label for="with">Pad with:</label>
+                    <input type="text" required value="_" id="with">
+                </div>
+                <div class="panel-formElements-item">
+                    <label for="result">Result:</label>
+                    <output id="result"></output>
+                </div>
+            </section>
+            <footer class="panel-section panel-section-footer">
+                <button type="submit" class="panel-section-footer-button default">Pad!</button>
+                <div class="panel-section-footer-separator"></div>
+                <button id="pad-bg" class="panel-section-footer-button">Pad in background script</button>
+            </footer>
         </form>
         <script src="index.js"></script>
     </body>
diff --git a/webpack-modules/addon/popup/style.css b/webpack-modules/addon/popup/style.css
new file mode 100644
index 0000000..463a919
--- /dev/null
+++ b/webpack-modules/addon/popup/style.css
@@ -0,0 +1,42 @@
+/*
+ * These styles extend the styles from browser_styles, see https://firefoxux.github.io/StyleGuide.
+ */
+
+/* For some reason the footer creates a horizontal overflow */
+body {
+    overflow-x: hidden;
+}
+
+.panel-formElements-item label {
+    width: 80px;
+}
+
+.panel-formElements-item output,
+.panel-formElements-item input[type="number"] {
+    flex-grow: 1;
+}
+
+input[type="number"] {
+    background-color: #fff;
+    border: 1px solid #b1b1b1;
+    box-shadow: 0 0 0 0 rgba(97, 181, 255, 0);
+    font: caption;
+    padding: 0 6px 0;
+    transition-duration: 250ms;
+    transition-property: box-shadow;
+    height: 24px;
+}
+
+input[type="number"]:hover {
+    border-color: #858585;
+}
+
+input[type="number"]:focus {
+    border-color: #0996f8;
+    box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
+}
+
+/* Reset the default styles for buttons if it's a footer button */
+button.panel-section-footer-button {
+    padding: 12px;
+}
