diff --git a/controller.php b/controller.php
index d078394..dd3f9f8 100644
--- a/controller.php
+++ b/controller.php
@@ -3,6 +3,7 @@
 namespace Concrete\Package\Ht7C5Base;
 
 use \Concrete\Core\Application\Application;
+use \Concrete\Core\Asset\AssetList;
 use \Concrete\Core\Foundation\Service\ProviderList;
 use \Concrete\Core\Package\Package;
 use \Concrete\Core\Package\PackageService;
@@ -64,6 +65,8 @@ public function install()
 
     public function on_start()
     {
+        $this->setupAutoloader();
+        $this->registerAssets();
         $this->registerServices();
     }
 
@@ -99,6 +102,19 @@ private function installUserGroups()
         }
     }
 
+    private function registerAssets()
+    {
+        $al = AssetList::getInstance();
+
+        $al->register(
+                'css',
+                'ht7-widgets/status-toggle',
+                'css/ht7.widgets.statustoggle.css',
+                ['version' => '0.0.1', 'minify' => true, 'combine' => true],
+                $this
+        );
+    }
+
     /**
      * Register the package services, register the package specific ErrorHandler.
      */
@@ -108,4 +124,13 @@ private function registerServices()
         $list->registerProvider(ServiceProvider::class);
     }
 
+    private function setupAutoloader()
+    {
+        if (file_exists($this->getPackagePath() . '/vendor')) {
+            // Only for development to make sure the package dependencies are
+            // accessable.
+            require_once $this->getPackagePath() . '/vendor/autoload.php';
+        }
+    }
+
 }
diff --git a/css/ht7.widgets.statustoggle.css b/css/ht7.widgets.statustoggle.css
new file mode 100644
index 0000000..c98a8d0
--- /dev/null
+++ b/css/ht7.widgets.statustoggle.css
@@ -0,0 +1,75 @@
+/*
+ * copyright 2021 by https://proto.io/freebies/onoff/
+ */
+.ht7-widget.onoffswitch {
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  width: 90px;
+}
+.ht7-widget.onoffswitch .onoffswitch-checkbox {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+}
+.ht7-widget.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+  margin-left: 0;
+}
+.ht7-widget.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+  right: 0px;
+}
+.ht7-widget.onoffswitch .onoffswitch-label {
+  border: 2px solid #999999;
+  border-radius: 20px;
+  cursor: pointer;
+  display: block;
+  margin: 0;
+  overflow: hidden;
+}
+.ht7-widget.onoffswitch .onoffswitch-label .onoffswitch-inner {
+  display: block;
+  margin-left: -100%;
+  transition: margin 0.3s ease-in 0s;
+  width: 200%;
+}
+.ht7-widget.onoffswitch .onoffswitch-label .onoffswitch-inner:before,
+.ht7-widget.onoffswitch .onoffswitch-label .onoffswitch-inner:after {
+  box-sizing: border-box;
+  color: white;
+  display: block;
+  float: left;
+  font-family: Trebuchet, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+  padding: 0;
+  width: 50%;
+}
+.ht7-widget.onoffswitch .onoffswitch-label .onoffswitch-inner:before {
+  background-color: #34C279;
+  color: #FFFFFF;
+  content: "ON";
+  padding-left: 10px;
+}
+.ht7-widget.onoffswitch .onoffswitch-label .onoffswitch-inner:after {
+  background-color: #EDA1A1;
+  color: #665A5A;
+  content: "OFF";
+  padding-right: 10px;
+  text-align: right;
+}
+.ht7-widget.onoffswitch .onoffswitch-label .onoffswitch-switch {
+  background: #FFFFFF;
+  border: 2px solid #999999;
+  border-radius: 20px;
+  bottom: 0;
+  display: block;
+  margin: 6px;
+  position: absolute;
+  right: 56px;
+  top: 0;
+  transition: all 0.3s ease-in 0s;
+  width: 18px;
+}
diff --git a/elements/widgets/status_toggle.php b/elements/widgets/status_toggle.php
new file mode 100644
index 0000000..690bd43
--- /dev/null
+++ b/elements/widgets/status_toggle.php
@@ -0,0 +1,20 @@
+<?php
+defined('C5_EXECUTE') or die('Access Denied.');
+/*
+ * copyright 2021 by https://proto.io/freebies/onoff/
+ */
+$checked = $status ? ' checked="checked"' : '';
+$id = empty($id) ? '' : ' id="' . $id . '"';
+$name = empty($name) ? '' : ' name="' . $name . '"';
+?>
+<div class="ht7-widget onoffswitch">
+    <input <?= $checked . $id . $name; ?>
+        class="onoffswitch-checkbox"
+        tabindex="0"
+        type="checkbox"
+        />
+    <label class="onoffswitch-label" for="myonoffswitch">
+        <span class="onoffswitch-inner"></span>
+        <span class="onoffswitch-switch"></span>
+    </label>
+</div>
diff --git a/less/ht7.widgets.statustoggle.less b/less/ht7.widgets.statustoggle.less
new file mode 100644
index 0000000..388d2a3
--- /dev/null
+++ b/less/ht7.widgets.statustoggle.less
@@ -0,0 +1,74 @@
+/*
+ * copyright 2021 by https://proto.io/freebies/onoff/
+ */
+.ht7-widget.onoffswitch {
+    position: relative;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    width: 90px;
+    .onoffswitch-checkbox {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        &:checked + .onoffswitch-label .onoffswitch-inner {
+            margin-left: 0;
+        }
+        &:checked + .onoffswitch-label .onoffswitch-switch {
+            right: 0px;
+        }
+    }
+    .onoffswitch-label {
+        border: 2px solid #999999;
+        border-radius: 20px;
+        cursor: pointer;
+        display: block;
+        margin: 0;
+        overflow: hidden;
+        .onoffswitch-inner {
+            display: block;
+            margin-left: -100%;
+            transition: margin 0.3s ease-in 0s;
+            width: 200%;
+            &:before, &:after {
+                box-sizing: border-box;
+                color: white;
+                display: block;
+                float: left;
+                font-family: Trebuchet, Arial, sans-serif;
+                font-size: 14px;
+                font-weight: bold;
+                height: 30px;
+                line-height: 30px;
+                padding: 0;
+                width: 50%;
+            }
+            &:before {
+                background-color: #34C279;
+                color: #FFFFFF;
+                content: "ON";
+                padding-left: 10px;
+            }
+            &:after {
+                background-color: #EDA1A1;
+                color: #665A5A;
+                content: "OFF";
+                padding-right: 10px;
+                text-align: right;
+            }
+        }
+        .onoffswitch-switch {
+            background: #FFFFFF;
+            border: 2px solid #999999;
+            border-radius: 20px;
+            bottom: 0;
+            display: block;
+            margin: 6px;
+            position: absolute;
+            right: 56px;
+            top: 0;
+            transition: all 0.3s ease-in 0s;
+            width: 18px;
+        }
+    }
+}