diff --git a/static/app.js b/static/app.js
index 86b10bd..023f5d9 100755
--- a/static/app.js
+++ b/static/app.js
@@ -44,6 +44,7 @@ var teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
 var imagesFeatures = document.querySelectorAll("#images-features li");
 var gifsFeatures = document.querySelectorAll("#gifs-features li");
 var messagesFeatures = document.querySelectorAll("#messages-features li");
+var commoditiesFeatures = document.querySelectorAll("#commodities-features li");
 
 var allFeaturesList = [
   stocksFeatures,
@@ -59,6 +60,7 @@ var allFeaturesList = [
   imagesFeatures,
   gifsFeatures,
   messagesFeatures,
+  commoditiesFeatures,
 ];
 
 // features remove buttons
@@ -81,6 +83,7 @@ var teamStatsRemoveBtn = document.getElementById("team-stats-remove-btn");
 var imagesRemoveBtn = document.getElementById("images-remove-btn");
 var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
 var messagesRemoveBtn = document.getElementById("messages-remove-btn");
+var commoditiesRemoveBtn = document.getElementById("commodities-remove-btn");
 
 var allFeaturesRemoveBtns = [
   stocksRemoveBtn,
@@ -96,6 +99,7 @@ var allFeaturesRemoveBtns = [
   imagesRemoveBtn,
   gifsRemoveBtn,
   messagesRemoveBtn,
+  commoditiesRemoveBtn,
 ];
 // features increase buttons
 var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
@@ -117,6 +121,7 @@ var teamStatsincreaseBtn = document.getElementById("team-stats-increase-btn");
 var imagesincreaseBtn = document.getElementById("images-increase-btn");
 var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
 var messagesincreaseBtn = document.getElementById("messages-increase-btn");
+var commoditiesincreaseBtn = document.getElementById("commodities-increase-btn");
 
 var allFeaturesIncreaseBtns = [
   stocksincreaseBtn,
@@ -132,6 +137,7 @@ var allFeaturesIncreaseBtns = [
   imagesincreaseBtn,
   gifsincreaseBtn,
   messagesincreaseBtn,
+  commoditiesincreaseBtn,
 ];
 
 // features decrease buttons
@@ -154,6 +160,7 @@ var teamStatsDecreaseBtn = document.getElementById("team-stats-decrease-btn");
 var imagesDecreaseBtn = document.getElementById("images-decrease-btn");
 var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
 var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");
+var commoditiesDecreaseBtn = document.getElementById("commodities-decrease-btn");
 
 var allFeaturesDecreaseBtns = [
   stocksDecreaseBtn,
@@ -169,6 +176,7 @@ var allFeaturesDecreaseBtns = [
   imagesDecreaseBtn,
   gifsDecreaseBtn,
   messagesDecreaseBtn,
+  commoditiesDecreaseBtn,
 ];
 
 const changeVarValue = () => {
@@ -191,6 +199,7 @@ const changeVarValue = () => {
   imagesFeatures = document.querySelectorAll("#images-features li");
   gifsFeatures = document.querySelectorAll("#gifs-features li");
   messagesFeatures = document.querySelectorAll("#messages-features li");
+  commoditiesFeatures = document.querySelectorAll("#commodities-features li");
 
   allFeaturesList = [
     stocksFeatures,
@@ -206,6 +215,7 @@ const changeVarValue = () => {
     imagesFeatures,
     gifsFeatures,
     messagesFeatures,
+    commoditiesFeatures,
   ];
 };
 
@@ -574,6 +584,7 @@ var teamStats = document.getElementById("team-stats-features");
 var images = document.getElementById("images-features");
 var gifs = document.getElementById("gifs-features");
 var messages = document.getElementById("messages-features");
+var commodities = document.getElementById("commodities-features");
 
 var allFeatures = [
   stocks,
@@ -589,6 +600,7 @@ var allFeatures = [
   images,
   gifs,
   messages,
+  commodities,
 ];
 
 // features select box
@@ -611,6 +623,7 @@ var allFeaturesSelectBox = [
   null,
   null,
   null,
+  null,
 ];
 
 // features select add buttons
@@ -633,6 +646,7 @@ var allFeaturesSelectAddBtn = [
   null,
   null,
   null,
+  null,
 ];
 
 allFeaturesSelectAddBtn.map((value, index) => {
@@ -665,6 +679,7 @@ var allFeaturesFile = [
   imagesFile,
   gifsFile,
   null,
+  null,
 ];
 // features file add button
 var imagesFileAddBtn = document.getElementById("inputTextBtn11");
@@ -684,6 +699,7 @@ var allFeaturesFileAddBtn = [
   imagesFileAddBtn,
   gifsFileAddBtn,
   null,
+  null,
 ];
 
 // features input text
@@ -693,6 +709,7 @@ var forexText = document.getElementById("inputText5");
 var currentWeatherText = document.getElementById("inputText6");
 var dailyForecastText = document.getElementById("inputText7");
 var messagesText = document.getElementById("inputText13");
+var commoditiesText = document.getElementById("inputText20");
 
 var allFeaturesText = [
   stocksText,
@@ -708,6 +725,7 @@ var allFeaturesText = [
   null,
   null,
   messagesText,
+  commoditiesText,
 ];
 
 // features text add button
@@ -717,6 +735,7 @@ var forexTextAddBtn = document.getElementById("inputTextBtn5");
 var currentWeatherTextAddBtn = document.getElementById("inputTextBtn6");
 var dailyForecastTextAddBtn = document.getElementById("inputTextBtn7");
 var messagesTextAddBtn = document.getElementById("inputTextBtn13");
+var commoditiesTextAddBtn = document.getElementById("inputTextBtn20");
 
 var allFeaturesTextAddBtn = [
   stocksTextAddBtn,
@@ -732,6 +751,7 @@ var allFeaturesTextAddBtn = [
   null,
   null,
   messagesTextAddBtn,
+  commoditiesTextAddBtn,
 ];
 
 
@@ -749,6 +769,7 @@ var allFeaturesLimit = [
   20,
   20,
   20,
+  30,
 ];
 
 
@@ -995,6 +1016,7 @@ function getFeatureSettings() {
     "Custom Images",
     "Custom GIFs",
     "Custom Messages",
+    "Commodities",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1045,6 +1067,9 @@ function getFeatureSettings() {
     case 13:
       s = getMessageSettings(page);
       break;
+    case 14:
+      s = getTradingSettings(page);
+      break;
   }
   
   settings = { ...settings, ...s }; // merge both sets of settings
@@ -1166,6 +1191,7 @@ function saveWeatherAPIKey(){
     "Custom Images",
     "Custom GIFs",
     "Custom Messages",
+    "Commodities",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1502,7 +1528,7 @@ inputAnimationBtn.addEventListener("click", () => {
 // scroll speed row two
 let inputScrollSpeedRow = [];
 
-for (let i = 1; i <= 13; i++) {
+for (let i = 1; i <= 14; i++) {
   inputScrollSpeedRow.push(
     document.getElementById(
       i === 1 ? "inputScrollSpeedRow" : `inputScrollSpeedRow${i}`