diff --git a/client/src/ui/components/bd/ThemeCard.vue b/client/src/ui/components/bd/ThemeCard.vue
index b1cb7912..686aa581 100644
--- a/client/src/ui/components/bd/ThemeCard.vue
+++ b/client/src/ui/components/bd/ThemeCard.vue
@@ -12,6 +12,7 @@
     <Card :item="theme">
         <SettingSwitch slot="toggle" :value="theme.enabled" @input="$emit('toggle-theme')" />
         <ButtonGroup slot="controls" v-if="!online">
+            <Button v-if="devmode && !theme.packed" v-tooltip="'Package Theme'" @click="package"><MiBoxDownload size="18" /></Button>
             <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" @click="$emit('show-settings', $event.shiftKey)"><MiSettings size="18" /></Button>
             <Button v-tooltip="'Recompile (shift + click to reload)'" @click="$emit('reload-theme', $event.shiftKey)"><MiRefresh size="18" /></Button>
             <Button v-tooltip="'Edit'" @click="editTheme"><MiPencil size="18" /></Button>
@@ -22,17 +23,33 @@
 
 <script>
     // Imports
+    import { Toasts } from 'ui';
+    import { Settings, ThemeManager } from 'modules';
+    import { ClientLogger as Logger } from 'common';
     import { shell } from 'electron';
     import Card from './Card.vue';
-    import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
+    import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension, MiBoxDownload } from '../common';
 
     export default {
+        data() {
+            return {
+                devmode: Settings.getSetting('core', 'advanced', 'developer-mode').value
+            }
+        },
         props: ['theme', 'online'],
         components: {
             Card, Button, ButtonGroup, SettingSwitch,
-            MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
+            MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension, MiBoxDownload
         },
         methods: {
+            async package() {
+                try {
+                    const packagePath = await ThemeManager.packContent(this.theme.name, this.theme.contentPath);
+                    Toasts.success(`Theme Packaged: ${packagePath}`);
+                } catch (err) {
+                    Logger.log('ThemeCard', err);
+                }
+            },
             editTheme() {
                 try {
                     shell.openItem(this.theme.contentPath);