diff --git a/config.json b/config.json
index 62becec..66eae52 100644
--- a/config.json
+++ b/config.json
@@ -46,5 +46,6 @@
   "weatherConf": {
     "location": "Pune India",
     "unit": "cel"
-  }
+  },
+  "settingsIcon": false
 }
diff --git a/css/main.css b/css/main.css
index 5d4d7bf..984cdc2 100644
--- a/css/main.css
+++ b/css/main.css
@@ -159,7 +159,8 @@ body {
   position: absolute;
   bottom: 25px;
   right: 25px;
-  transition: 2s ease-in; }
+  transition: 2s ease-in;
+  display: none; }
   #settings-cog:hover .cog {
     fill: white;
     stroke: white;
diff --git a/js/main.js b/js/main.js
index a2e9876..171c39e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -212,6 +212,9 @@ function parseAndCreate(jsonData) {
      */
     this.userName = jsonData["user"]
 
+    // Enable the settings button if it is enabled
+    if (jsonData["settingsIcon"]) enableCog();
+
     // If the user has not passed any custom message
     if (Object.keys(jsonData).includes("message") && 
             typeof(jsonData["message"]) == "string" &&
@@ -400,4 +403,33 @@ function listenForSettings() {
         if (event.ctrlKey && event.which == 188)
             showSettings();
     }
+}
+
+// Handle the settings cog
+
+function enableCog() {
+    /**
+     * Enable the settings cog.
+     * 
+     * It will be disabled by default, however, if the user
+     * wishes to enable it through the config, it will be shown.
+     * 
+     * Once shown, we need to add some event listeners to it as
+     * well so it works the right way.
+     */
+    settingsCogElement = document.getElementById("settings-cog");
+
+    // Unhide it
+    settingsCogElement.style.display = "block";
+
+    // Add event listener
+    settingsCogElement.onclick = function() {
+        editor = showSettings()
+
+        // Add an onclick listener to hide settings if the button is clicked
+        // again.
+        settingsCogElement.onclick = () => {
+            hideSettings(editor);
+        }
+    }
 }
\ No newline at end of file
diff --git a/js/settings.js b/js/settings.js
index 7936538..c049d1e 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -14,10 +14,6 @@ jsonContainer = "jsoneditor"
 // Detect browser
 BROWSER = detectBrowser()
 
-document.getElementById('settings-cog').onclick = function() {
-  showSettings()
-}
-
 function showSettings() {
     modalEl = document.getElementById(modalId)
     closeBtn = document.getElementsByClassName(closeId)[0]
@@ -33,21 +29,26 @@ function showSettings() {
     loadJson(editor)
 
     closeBtn.onclick = () => {
-        modalEl.style.display = "none"
-        // Get the updated JSON
-        updatedJson = editor.get()
-        BROWSER.storage.sync.set(updatedJson)
-        document.getElementById(jsonContainer).innerHTML = ""
-        location.reload()
-    }
-    document.getElementById('settings-cog').onclick = () => {
-        modalEl.style.display = "none"
-        // Get the updated JSON
-        updatedJson = editor.get()
-        BROWSER.storage.sync.set(updatedJson)
-        document.getElementById(jsonContainer).innerHTML = ""
-        location.reload()
+        hideSettings(editor);
     }
+
+    return editor
+}
+
+function hideSettings(editor) {
+    /**
+     * Hide the settings.
+     * 
+     * This function is to be called when the settings window
+     * is supposed to be hidden, This will automatically
+     * handle saving the updated settings to the localstorage.
+     */
+    modalEl.style.display = "none"
+    // Get the updated JSON
+    updatedJson = editor.get()
+    BROWSER.storage.sync.set(updatedJson)
+    document.getElementById(jsonContainer).innerHTML = ""
+    location.reload()
 }
 
 async function loadJson(editor) {
diff --git a/scss/main.scss b/scss/main.scss
index 96fd6b8..fbd8ab9 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -260,6 +260,7 @@ body {
     bottom: 25px;
     right: 25px;
     transition: 2s ease-in;
+    display: none;
     
     &:hover .cog {
         fill: white;