diff --git a/example.html b/example.html
index dba8d32..340069a 100644
--- a/example.html
+++ b/example.html
@@ -1,2 +1,22 @@
 <!-- You might want to add additional HTML elements to ST. 
-    It's good practice to separate it out from your code -->
\ No newline at end of file
+    It's good practice to separate it out from your code -->
+<div class="example-extension-settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b>Extension Example</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <div class="example-extension_block flex-container">
+                <input id="my_button" class="menu_button" type="submit" value="Example Button" />
+            </div>
+
+            <div class="example-extension_block flex-container">
+                <input id="example_setting" type="checkbox" />
+                <label for="example_setting">This is an example</label>
+            </div>
+
+            <hr class="sysHR" />
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/index.js b/index.js
index 966c29e..1cf888a 100644
--- a/index.js
+++ b/index.js
@@ -4,27 +4,44 @@
 //You'll likely need to import extension_settings, getContext, and loadExtensionSettings from extensions.js
 import { extension_settings, getContext, loadExtensionSettings } from "../../../extensions.js";
 
-// Keep track of where your extension is located
-const extensionName = "example-extension";
-const extensionFolderPath = `scripts/extensions/third-party/${extensionName}/`;
+//You'll likely need to import some other functions from the main script
+import { saveSettingsDebounced } from "../../../../script.js";
+
+// Keep track of where your extension is located, name should match repo name
+const extensionName = "st-extension-example";
+const extensionFolderPath = `scripts/extensions/third-party/${extensionName}`;
 const extensionSettings = extension_settings[extensionName];
 const defaultSettings = {};
 
-/**
- * Loads the extension settings if they exist, otherwise initializes them to the defaults.
- */
+
+ 
+// Loads the extension settings if they exist, otherwise initializes them to the defaults.
 async function loadSettings() {
   //Create the settings if they don't exist
   extension_settings[extensionName] = extension_settings[extensionName] || {};
   if (Object.keys(extension_settings[extensionName]).length === 0) {
     Object.assign(extension_settings[extensionName], defaultSettings);
   }
+
+  // Updating settings in the UI
+  $("#example_setting").prop("checked", extension_settings[extensionName].example_setting).trigger("input");
 }
 
+// This function is called when the extension settings are changed in the UI
+function onExampleInput(event) {
+  const value = Boolean($(event.target).prop("checked"));
+  extension_settings[extensionName].example_setting = value;
+  saveSettingsDebounced();
+}
 
+// This function is called when the button is clicked
 function onButtonClick() {
-  // This function is called when the button is clicked
   // You can do whatever you want here
+  // Let's make a popup appear with the checked setting
+  toastr.info(
+    `The checkbox is ${extension_settings[extensionName].example_setting ? "checked" : "not checked"}`,
+    "A popup appeared because you clicked the button!"
+  );
 }
 
 // This function is called when the extension is loaded
@@ -38,7 +55,8 @@ jQuery(async () => {
   $("#extensions_settings").append(settingsHtml);
 
   // These are examples of listening for events
-  $("#my_button").on("click", onButtonClick());
+  $("#my_button").on("click", onButtonClick);
+  $("#example_setting").on("input", onExampleInput);
 
   // Load settings when starting things up (if you have any)
   loadSettings();