diff --git a/web/package.json b/web/package.json
index ed4a91b..432e9c1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -40,7 +40,8 @@
     "themer-colors-seti": "^1.0.0",
     "themer-colors-solarized": "^1.0.3",
     "themer-conemu": "^1.0.5",
-    "themer-firefox-color": "^1.0.0",
+    "themer-firefox-addon": "^1.0.0",
+    "themer-firefox-color": "^1.0.1",
     "themer-gnome-terminal": "^1.0.1",
     "themer-hyper": "^3.0.2",
     "themer-iterm": "^2.0.2",
diff --git a/web/src/Download.js b/web/src/Download.js
index aa817c4..6232b9c 100644
--- a/web/src/Download.js
+++ b/web/src/Download.js
@@ -37,7 +37,7 @@ export default () => {
   const [sketchPalettes, setSketchPalettes] = useState(false);
   const [tmux, setTmux] = useState(false);
   const [prism, setPrism] = useState(false);
-  const [firefoxColor, setFirefoxColor] = useState(false);
+  const [firefox, setFirefox] = useState(false);
 
   const { getActiveColorOrFallback, preparedColorSet, cliColorSet } = useContext(ThemeContext);
 
@@ -221,9 +221,9 @@ export default () => {
             accentSelected
           />
           <Checkbox
-            value={ firefoxColor }
-            onChange={ () => setFirefoxColor(!firefoxColor) }
-            label="Firefox Color"
+            value={ firefox }
+            onChange={ () => setFirefox(!firefox) }
+            label="Firefox"
             accentSelected
           />
           <Checkbox
@@ -294,7 +294,7 @@ export default () => {
               sketchPalettes,
               tmux,
               prism,
-              firefoxColor,
+              firefox,
             },
             preparedColorSet,
             window.innerWidth * window.devicePixelRatio,
diff --git a/web/src/generateZip.js b/web/src/generateZip.js
index d8d4c3c..3add591 100644
--- a/web/src/generateZip.js
+++ b/web/src/generateZip.js
@@ -1,6 +1,7 @@
 import prepareColors from 'themer/lib/prepare';
 import themer from 'themer/lib/themer';
 import JSZip from 'jszip';
+import { flatten } from 'lodash';
 
 import * as themerAlacritty from 'themer-alacritty';
 import * as themerAlfred from 'themer-alfred';
@@ -11,6 +12,7 @@ import * as themerBrave from 'themer-brave';
 import * as themerChrome from 'themer-chrome';
 import * as themerCmd from 'themer-cmd';
 import * as themerConemu from 'themer-conemu';
+import * as themerFirefoxAddon from 'themer-firefox-addon';
 import * as themerFirefoxColor from 'themer-firefox-color';
 import * as themerGnomeTerminal from 'themer-gnome-terminal';
 import * as themerHyper from 'themer-hyper';
@@ -44,7 +46,10 @@ const templates = {
   chrome: { name: 'Chrome', ...themerChrome },
   cmd: { name: 'CMD', ...themerCmd },
   conemu: { name: 'ConEmu', ...themerConemu },
-  firefoxColor: { name: 'Firefox Color', ...themerFirefoxColor },
+  firefox: [
+    { name: 'Firefox Add-on', ...themerFirefoxAddon },
+    { name: 'Firefox Color', ...themerFirefoxColor },
+  ],
   gnomeTerminal: { name: 'GNOME Terminal', ...themerGnomeTerminal },
   hyper: { name: 'Hyper', ...themerHyper },
   iterm: { name: 'iTerm', ...themerIterm },
@@ -104,7 +109,9 @@ export default async function generateZip(selections, colors, width, height, url
   const selectedKeys = Array.from(Object.entries(selections))
     .filter(([_, selected]) => selected)
     .map(([key]) => key);
-  const selectedTemplates = selectedKeys.map(key => templates[key]);
+  const selectedTemplates = flatten(
+    selectedKeys.map(key => Array.isArray(templates[key]) ? templates[key] : [templates[key]]),
+  );
   const extraArgs = selectedKeys.reduce(
     (acc, key) => ({
       ...acc,
diff --git a/web/yarn.lock b/web/yarn.lock
index 78aa234..071236b 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -10042,10 +10042,18 @@ themer-conemu@^1.0.5:
   dependencies:
     lodash "^4.17.4"
 
-themer-firefox-color@^1.0.0:
+themer-firefox-addon@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/themer-firefox-color/-/themer-firefox-color-1.0.0.tgz#fa6e29be7f566f244a8bbce0ea6173f9627798df"
-  integrity sha512-CcjKkxjIqBcq95FeDQwcMQtHTqMG7FoMZTAuvFUmSQPtvHu3qdfEfHqbTnSnVF35/VOufILZMJtfxWdh/Su7ew==
+  resolved "https://registry.yarnpkg.com/themer-firefox-addon/-/themer-firefox-addon-1.0.0.tgz#5aa4cb9714751bb026d2cbef10ff404cd2219eaa"
+  integrity sha512-tvV3bCHpcioGVdiFmLBrOT3QfeBABWJZy8FYLLUojYPaAo4BZo/F+nVQdJ6WyBTHN/Xb/my2Dc7JEPaI79h1zg==
+  dependencies:
+    color "^3.1.2"
+    lodash "^4.17.15"
+
+themer-firefox-color@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/themer-firefox-color/-/themer-firefox-color-1.0.1.tgz#6cf7c5984b55ebe5376c4bb8646ebad90784260c"
+  integrity sha512-Y2Y5I2dxAcskJPK2vxK8Qpz+qUaryGyyPD6/5JlcT7qhqcBUxQAiZIbrrEBkIHtnFypvL3WWbh8BUNxGiLtR7w==
   dependencies:
     "@babel/runtime" "^7.9.2"
     color "^3.1.2"