diff --git a/404.html b/404.html
index 1242fdb..854fd25 100644
--- a/404.html
+++ b/404.html
@@ -1 +1,3 @@
-<title>404 Not Found</title><link href=https://lcedit.com/odometer.css rel=stylesheet><style>body{background-color:rgb(208,228,254);font-family:Arial,Helvetica,sans-serif;color:#000;text-align:center}#channelSubs,a{font-family:Arial,Helvetica,sans-serif;color:#000}input,input[type=number],input[type=text]{height:3%}#channelName{font-size:3vw;top:20%;z-index:2;position:relative;text-align:center;text-decoration:none}#channelSubs{text-align:center;font-size:15.5vw;top:30%;z-index:1}#options{position:absolute;left:0;top:0;text-align:left}</style><a href=/ id=channelName>Not Found</a><br><div id=channelSubs class="odometer odometer-auto-theme">0</div><div id=options style=font-size:36px><input id=channelSubmitName name=channelSubmitName placeholder="Channel Name" value="Not Found"><br><input id=countSubmit name=countSubmit placeholder="Channel subs"type=number value="404"><br><input type=submit onclick=submit() value="Set Values"> <a href=../ ><button>Back to main page</button></a></div><script>function submit(){var e=document.querySelector("#channelSubmitName").value,n=document.querySelector("#countSubmit").value;return e?n>1e12||n<-1e12?alert("Count must be between -1 trillion and +1 trillion."):(document.querySelector("#channelName").innerText=e,void(document.querySelector("#channelSubs").innerText=Math.round(n))):alert("You must specify a channel name.")}window.onload=()=>{document.querySelector("#channelSubs").innerText=404}</script><script src=https://lcedit.com/odometer.js></script>
\ No newline at end of file
+<title>404 Not Found</title><link href=https://lcedit.com/odometer.css rel=stylesheet><style>body{background-color:rgb(208,228,254);font-family:Arial,Helvetica,sans-serif;color:#000;text-align:center}#channelSubs,a{font-family:Arial,Helvetica,sans-serif;color:#000}input,input[type=number],input[type=text]{height:3%}#channelName{font-size:3vw;top:20%;z-index:2;position:relative;text-align:center;text-decoration:none}#channelSubs{text-align:center;font-size:15.5vw;top:30%;z-index:1}#options{position:absolute;left:0;top:0;text-align:left}</style><a href=/ id=channelName>Not Found</a><br><div id=channelSubs class="odometer odometer-auto-theme">0</div><div id=options style=font-size:36px><input id=channelSubmitName name=channelSubmitName placeholder="Channel Name" value="Not Found"><br><input id=countSubmit name=countSubmit placeholder="Channel subs"type=number value="404"><br><input type=submit onclick=submit() value="Set Values"> <a href=../ ><button>Back to main page</button></a></div><script>function submit(){var e=document.querySelector("#channelSubmitName").value,n=document.querySelector("#countSubmit").value;return e?n>1e12||n<-1e12?alert("Count must be between -1 trillion and +1 trillion."):(document.querySelector("#channelName").innerText=e,void(document.querySelector("#channelSubs").innerText=Math.round(n))):alert("You must specify a channel name.")}window.onload=()=>{document.querySelector("#channelSubs").innerText=404}</script><script src=https://lcedit.com/odometer.js></script>
+<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
\ No newline at end of file
diff --git a/akshatmittal/compare/index.html b/akshatmittal/compare/index.html
index 13ff606..7852d7f 100644
--- a/akshatmittal/compare/index.html
+++ b/akshatmittal/compare/index.html
@@ -32,6 +32,8 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
     <link href="../odometer.css" rel="stylesheet">
     <link href="./index.css" rel="stylesheet">
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 
 <body class="fix-header fix-sidebar card-no-border">
diff --git a/akshatmittal/index.html b/akshatmittal/index.html
index d126677..c503bba 100644
--- a/akshatmittal/index.html
+++ b/akshatmittal/index.html
@@ -31,6 +31,8 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
     <link href="./odometer.css" rel="stylesheet">
     <link href="./index.css" rel="stylesheet">
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 
 <body class="fix-header fix-sidebar card-no-border">
diff --git a/akshatmittal/video/index.html b/akshatmittal/video/index.html
index 2852da5..4d0729a 100644
--- a/akshatmittal/video/index.html
+++ b/akshatmittal/video/index.html
@@ -32,6 +32,8 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
     <link href="../odometer.css" rel="stylesheet">
     <link href="../index.css" rel="stylesheet">
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 
 <body class="fix-header fix-sidebar card-no-border">
diff --git a/index.html b/index.html
index f651e44..1abe5cc 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,8 @@
 <meta property="og:url" content="https://lcedit.com" />
 <meta property="og:image" content="https://lcedit.com/images/index.png" />
 <script id="dsq-count-scr" src="//livecountsedit.disqus.com/count.js" async></script>
+<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 
 <body>
diff --git a/livecountsedit/compare/index.html b/livecountsedit/compare/index.html
index 312ed1a..ca3a7a9 100644
--- a/livecountsedit/compare/index.html
+++ b/livecountsedit/compare/index.html
@@ -21,6 +21,8 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://lcedit.com" />
     <meta property="og:image" content="https://lcedit.com/images/livecountsedit_compare.png" />
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 
 <body style="font-family: Lato, Arial, Helvetica, sans-serif; color: var(--fg-color, #fff); background-color: var(--bg-color, #1a1a20);">
diff --git a/livecountsedit/index.html b/livecountsedit/index.html
index 7448d84..19f30ee 100644
--- a/livecountsedit/index.html
+++ b/livecountsedit/index.html
@@ -25,6 +25,8 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://lcedit.com" />
     <meta property="og:image" content="https://lcedit.com/images/livecountsedit.png" />
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
     <style></style>
 </head> 
 <body>
diff --git a/livecountsedit/video/index.html b/livecountsedit/video/index.html
index 6a37024..4b8e4c6 100644
--- a/livecountsedit/video/index.html
+++ b/livecountsedit/video/index.html
@@ -24,6 +24,8 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://lcedit.com" />
     <meta property="og:image" content="https://lcedit.com/images/livecountsedit_video.png" />
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
     <style></style>
 </head>
 
diff --git a/livecountsnet/index.html b/livecountsnet/index.html
index d01ed9c..2be0fd5 100644
--- a/livecountsnet/index.html
+++ b/livecountsnet/index.html
@@ -24,6 +24,8 @@
     <meta property="og:url" content="https://lcedit.com" />
     <meta property="og:image" content="https://lcedit.com/images/lcnet.png" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 <noscript>Please enable JavaScript.</noscript>
 
diff --git a/socialblade/index.html b/socialblade/index.html
index f6f70f7..c19389a 100644
--- a/socialblade/index.html
+++ b/socialblade/index.html
@@ -25,6 +25,8 @@
     <link href="./index.css" type="text/css" rel="stylesheet">
     <link rel="stylesheet" href="../odometer.css" id="counterStyle" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 <html>
 
diff --git a/studio/index.html b/studio/index.html
index 67d751e..183a6df 100644
--- a/studio/index.html
+++ b/studio/index.html
@@ -24,6 +24,8 @@
     <meta property="og:image" content="../images/studio.png" />
     <link rel="stylesheet" id="themeStylesheet" href="./dark.css">
     <script src="../highstock.js"></script>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 
 <body>
diff --git a/studio/old/index.html b/studio/old/index.html
index 486739e..b9c0996 100644
--- a/studio/old/index.html
+++ b/studio/old/index.html
@@ -26,6 +26,8 @@
     <link href="./odometer.css" rel="stylesheet" />
     <link rel="stylesheet" id="themeStylesheet" href="./dark.css">
     <script src="../../highstock.js"></script>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
 </head>
 
 <body>
diff --git a/top50/index.css b/top50/index.css
index de4a22b..be6865a 100644
--- a/top50/index.css
+++ b/top50/index.css
@@ -48,6 +48,7 @@ h2 {
   border: solid 0.1em #000;
   z-index: 1;
   position: relative;
+  margin-top: 0px;
 }
 
 .count {
@@ -61,7 +62,7 @@ h2 {
 .name {
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow:clip;
   padding-left: 0.1vw;
   font-size: 1.5vw;
   src: url('../../fonts/Roboto-Regular.ttf') format('truetype');
diff --git a/top50/index.html b/top50/index.html
index d4116ba..e9e7246 100644
--- a/top50/index.html
+++ b/top50/index.html
@@ -24,6 +24,8 @@
     <meta property="og:url" content="https://lcedit.com" />
     <meta property="og:image" content="https://lcedit.com/images/top50.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+        crossorigin="anonymous"></script>
 
     <script src="../jquery.js"></script>
     <script>
@@ -41,6 +43,7 @@
     <style id="centerRanks"></style>
     <style id="rankSizeStyles"></style>
     <style id="differenceStyling"></style>
+    <style id="cardStyles"></style>
 </head>
 
 <body>
@@ -234,12 +237,34 @@ <h2>Fire Icons (BETA)</h2>
                         <div>
                             <br>
                             <label>Box Spacing</label><br>
-                            <input value="0.2" id="boxSpacing" autocomplete="off">
+                            <input type="number" value="0.2" id="boxSpacing" autocomplete="off">
                         </div>
                         <div>
                             <br>
                             <label>Rank Size</label><br>
-                            <input value="1" id="rankSize" autocomplete="off">
+                            <input type="number" value="1" id="rankSize" autocomplete="off">
+                        </div>
+                        <div>
+                            <br>
+                            <label>Name Size</label><br>
+                            <input type="number" value="1" id="nameSize" autocomplete="off">
+                        </div>
+                        <div>
+                            <br>
+                            <label>Count Size</label><br>
+                            <input type="number" value="1" id="countSize" autocomplete="off">
+                        </div>
+                        <div>
+                            <br>
+                            <label>Image Size</label><br>
+                            <input type="number" value="1" id="imageSize" autocomplete="off">
+                        </div>
+                        <div>
+                            <br>
+                            <label>Card Width</label><br>
+                            <input type="number" value="1" id="cardWidth" autocomplete="off">
+                            <br><label>Card Height</label><br>
+                            <input type="number" value="1" id="cardHeight" autocomplete="off">
                         </div>
                         <div>
                             <br>
@@ -291,6 +316,10 @@ <h2>Fire Icons (BETA)</h2>
                             <br>
                             <input type="checkbox" id="showRankings" checked><label>Show Rankings</label>
                         </div>
+                        <div>
+                            <br>
+                            <input type="number" id="rankingsWidth"><label>Rank Box Width</label>
+                        </div>
                         <div>
                             <br>
                             <input type="checkbox" id="showImages" checked><label>Show Images</label>
@@ -318,12 +347,12 @@ <h2>Fire Icons (BETA)</h2>
                         <div>
                             <br>
                             <label>Image Border Radius</label><br>
-                            <input value="50" id="imageBorder" autocomplete="off"><label>%</label>
+                            <input type="number" value="50" id="imageBorder" autocomplete="off"><label>%</label>
                         </div>
                         <div>
                             <br>
                             <label>Box Border Roundness (0-100)</label><br>
-                            <input value="0" id="boxBorderRadius" autocomplete="off"><label>%</label>
+                            <input type="number" value="0" id="boxBorderRadius" autocomplete="off"><label>%</label>
                         </div>
                         <div>
                             <br>
@@ -338,7 +367,7 @@ <h2>Fire Icons (BETA)</h2>
                         <div>
                             <br>
                             <label>Box Background Duration (in seconds)</label><br>
-                            <input value="1" id="boxBGLength" autocomplete="off"><br>
+                            <input type="number" value="1" id="boxBGLength" autocomplete="off"><br>
                             <label>*Leave at 0 to disable</label>
                         </div>
                     </div>
@@ -354,12 +383,13 @@ <h2>Fire Icons (BETA)</h2>
                         <div>
                             <br>
                             <label>Update Interval (in seconds)</label><br>
-                            <input value="2" id="updateint" autocomplete="off">
+                            <input type="number" value="2" id="updateint" autocomplete="off">
                         </div>
                         <div>
                             <br>
                             <label>Odometer Speed</label><br>
-                            <input value="2" id="odometerSpeed" autocomplete="off"><label> (in seconds)</label>
+                            <input type="number" value="2" id="odometerSpeed" autocomplete="off"><label> (in
+                                seconds)</label>
                         </div>
                         <div>
                             <br>
@@ -383,26 +413,32 @@ <h2>Fire Icons (BETA)</h2>
                             <br>
                             <input type="checkbox" id="showDifferences" checked><label>Show Differences</label>
                             <br>
-                            <label>Differences Placing (top): </label><input type="text" id="topDifferencePlacing"
+                            <label>Difference Threshold: </label><input type="number" id="differenceThreshold"
                                 autocomplete="off">
                             <br>
-                            <label>Differences Placing (left): </label><input type="text" id="leftDifferencePlacing"
+                            <label>Differences Placing (top): </label><input type="number" id="topDifferencePlacing"
+                                autocomplete="off">
+                            <br>
+                            <label>Differences Placing (left): </label><input type="number" id="leftDifferencePlacing"
                                 autocomplete="off">
                             <br>
                             <label>Differences Color: </label><input type="text" id="differenceColor"
                                 autocomplete="off">
+                            <br>
+                            <label>Difference Size: </label>
+                            <input type="number" value="1" id="differenceSize" autocomplete="off">
                         </div>
                         <div><br>
                             <label>Difference Images: </label><input type="checkbox" id="enableDifferenceImages"
                                 autocomplete="off">
                             <br>
-                            <label>Image Place (top): </label><input type="text" id="topDifferenceImagePlacing"
+                            <label>Image Place (top): </label><input type="number" id="topDifferenceImagePlacing"
                                 autocomplete="off">
                             <br>
-                            <label>Image Placing (left): </label><input type="text" id="leftDifferenceImagePlacing"
+                            <label>Image Placing (left): </label><input type="number" id="leftDifferenceImagePlacing"
                                 autocomplete="off">
                             <br>
-                            <label>Image Size: </label><input type="text" id="differenceImageSize"
+                            <label>Image Size: </label><input type="number" id="differenceImageSize"
                                 autocomplete="off"><br>
                             <label>Image Shaking: </label><input type="checkbox" id="enableImageShakes"
                                 autocomplete="off">
@@ -413,7 +449,35 @@ <h2>Fire Icons (BETA)</h2>
                                 onclick="saveImageForDiffs()">Save Image Upload</button>
                             <br>
                         </div>
-                    </div>
+                    </div><br><br><br>
+                    <!--<div class="boringSettings">
+                        <div>
+                            <label class="bold">TOP Settings:</label>
+                            <br><br>
+                            <label>How many sections?</label><br>
+                            <input type="number" id="totalSections"><label> sections</label><br><br>
+                            <label>Set the order of sizes?</label>
+                            <label>ex: (1, 5, 4, 3) - they are relative to each other</label>
+                            <br>
+                            <label>Sizes: </label><input type="text" id="sizeSections">
+                            <br><br>
+                            <label>How tall should the top part be?</label><br>
+                            <input type="number" id="heightSections"><br><br>
+                        </div>
+                        <div>
+                            <label>For each section, select its purpose.</label>
+                            <div id="sections" style="height: 200px; overflow-y: scroll;">
+
+                            options:
+                                text:
+                                    color, size, scroll
+                                gains: 
+                                    color, size, scroll
+                                battle: 
+                                    color, size, (custom, closest)
+                            </div>
+                        </div>
+                    </div>-->
                 </div>
             </div>
         </div>
@@ -479,7 +543,8 @@ <h3>Updates</h3>
                     </div>
                     <hr>
                 </div><br>
-                <input id="forceUpdates" type="checkbox" autocomplete="off"><label>Force Updates (even without count changes)</label><br>
+                <input id="forceUpdates" type="checkbox" autocomplete="off"><label>Force Updates (even without count
+                    changes)</label><br>
                 <button onclick="apiUpdate()">Update Now</button>
                 <input type="number" id="apiUpdateInt" placeholder="Update Interval (in seconds)" autocomplete="off">
                 <button onclick="enableApiUpdate()" id="enableApiUpdate">Enable API Updates</button>
diff --git a/top50/index.js b/top50/index.js
index a018584..cf78907 100644
--- a/top50/index.js
+++ b/top50/index.js
@@ -86,7 +86,6 @@ function adjustColors() {
 
 function mergeWithExampleData(imported, example) {
     if (typeof imported !== 'object' || imported === null) return example;
-
     for (let key in example) {
         if (!imported.hasOwnProperty(key)) {
             imported[key] = example[key];
@@ -104,8 +103,10 @@ let example_data = {
     "showNames": true,
     "showCounts": true,
     "showRankings": true,
+    "rankingsWidth": '10',
     "showBlankSlots": true,
     "showDifferences": false,
+    "differenceThreshold": 100,
     "differenceStyles": {
         "left": "75",
         "top": "-5",
@@ -116,10 +117,18 @@ let example_data = {
         "imageEnabled": false,
         "shakingEnabled": true,
         "differenceImage": "./mdm_gifs/lightning.png",
+        "differenceSize": '5',
+    },
+    "cardStyles": {
+        "cardWidth": '',
+        "cardHeight": '',
+        "imageSize": '',
+        "nameSize": '',
+        "countSize": '',
+        "rankSize": '',
     },
     "bgColor": "#141414",
     "textColor": "#000",
-    "rankSize": "15",
     "boxColor": "#f7f5fe",
     "boxBorder": "#FFF",
     "imageBorder": "0",
@@ -206,10 +215,12 @@ initLoad()
 function initLoad(redo) {
     let storedData = localStorage.getItem("data") ? JSON.parse(localStorage.getItem("data")) : null;
 
-    if (storedData) {
-        data = mergeWithExampleData(storedData, example_data);
-    } else {
-        data = example_data;
+    if (!redo) {
+        if (storedData) {
+            data = mergeWithExampleData(storedData, example_data);
+        } else {
+            data = example_data;
+        }
     }
 
     if (data.apiUpdates.enabled) {
@@ -217,9 +228,6 @@ function initLoad(redo) {
             apiUpdate(true);
         }, parseFloat(data.apiUpdates.interval));
     }
-    if (!data.theme) {
-        data.theme = 'top50';
-    }
     if (data.theme.includes('top100')) {
         data.max = 100;
     } else if (data.theme.includes('top25')) {
@@ -233,21 +241,6 @@ function initLoad(redo) {
     } else if (data.theme.includes('top200')) {
         data.max = 200;
     }
-    if ((!data.showImages) && (data.showImages !== false)) {
-        data.showImages = true;
-    }
-    if ((!data.showNames) && (data.showNames !== false)) {
-        data.showNames = true;
-    }
-    if ((!data.showCounts) && (data.showCounts !== false)) {
-        data.showCounts = true;
-    }
-    if ((!data.showRankings) && (data.showRankings !== false)) {
-        data.showRankings = true;
-    }
-    if ((!data.showBlankSlots) && (data.showBlankSlots !== false)) {
-        data.showBlankSlots = true;
-    }
     data.pause = false;
     if (data.lastOnline && data.offlineGains == true) {
         const interval = data.updateInterval / 1000;
@@ -268,7 +261,7 @@ function initLoad(redo) {
     let design = setupDesign();
     document.getElementById('main').innerHTML = design[0].innerHTML;
     document.getElementById('main').style = design[1];
-    document.getElementById('designStyles').innerText = design[2];
+    //document.getElementById('designStyles').innerText = design[2];
     if (!data.uuid) {
         data.uuid = uuidGen();
     }
@@ -311,43 +304,65 @@ function setupDesign(list, sort, order) {
             channels = channels.reverse();
         }
     }
+
+    if ((data.theme.includes('top100')) || (data.theme.includes('top150'))) {
+        toReturn[2] = `.image { height: ${(data.showDifferences) ? 1.5 : 2.15}vw; width: ${(data.showDifferences) ? 1.5 : 2.15}vw; }
+        .card { height: 2.3vw; }
+        .count { font-size: ${(data.showDifferences) ? 0.7 : 1}vw; }
+        .name { font-size: ${(data.showDifferences) ? 0.5 : 0.75}vw; }
+        .subgap { font-size: 0.7vw;};`
+
+        data.cardStyles.imageSize = (data.showDifferences) ? 1.5 : 2.15;
+        data.cardStyles.cardHeight = '2.15'
+        data.cardStyles.countSize = (data.showDifferences) ? '0.7' : '1'
+        data.cardStyles.nameSize = (data.showDifferences) ? '0.5' : '0.75';
+        data.differenceStyles.differenceSize = '0.7vw';
+        toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);";
+
+    } else if (data.theme.includes('top200')) {
+        toReturn[2] = `.image { height: ${(data.showDifferences) ? 1.2 : 1.8}vw; width: ${(data.showDifferences) ? 1.2 : 1.8}vw; }
+        .card { height: 2vw; }
+        .count { font-size: ${(data.showDifferences) ? 0.6 : 0.9}vw; }
+        .name { font-size: ${(data.showDifferences) ? 0.4 : 0.6}vw; }
+        .subgap { font-size: 0.6vw; };`
+        toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);";
+
+        data.cardStyles.imageSize = (data.showDifferences) ? 1.2 : 1.8;
+        data.cardStyles.cardHeight = '1.8'
+        data.cardStyles.countSize = (data.showDifferences) ? '0.6' : '0.9'
+        data.cardStyles.nameSize = (data.showDifferences) ? '0.4' : '0.6';
+        data.differenceStyles.differenceSize = '0.6vw';
+    } else {
+        toReturn[2] = `.image { height: ${(data.showDifferences) ? 3 : 4.25}vw; width: ${(data.showDifferences) ? 3 : 4.25}vw; }
+        .card { height: 4.5vw; }
+        .count { font-size: ${(data.showDifferences) ? 1.4 : 2}vw; }
+        .name { font-size: ${(data.showDifferences) ? 1.05 : 1.5}vw; }
+        .subgap {font-size: 1.25vw;};`
+        toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(5, 1fr);";
+
+        data.cardStyles.imageSize = (data.showDifferences) ? 3 : 4.25;
+        data.cardStyles.cardHeight = '4.25'
+        data.cardStyles.countSize = (data.showDifferences) ? '1.4' : '2'
+        data.cardStyles.nameSize = (data.showDifferences) ? '1.05' : '1.5';
+        data.differenceStyles.differenceSize = '1.25vw';
+    }
+
     if (data.theme.includes('H')) {
         let cards = parseInt(data.theme.split('H')[0].split('top')[1]);
-        toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);";
-        if (cards == 100) {
-            toReturn[2] = `.image { height: ${(data.showDifferences == 'default') ? 1.5 : 2.15}vw; width: ${(data.showDifferences == 'default') ? 1.5 : 2.15}vw; }
-            .card { height: 2.15vw; }
-            .count { font-size: ${(data.showDifferences == 'default') ? 0.7 : 1}vw; }
-            .name { font-size: ${(data.showDifferences == 'default') ? 0.5 : 0.75}vw; }
-            .subgap { font-size: 0.7vw;}`;
-        } else if (cards == 150) {
-            toReturn[2] = `.image { height: ${(data.showDifferences == 'default') ? 1.5 : 2.15}vw; width: ${(data.showDifferences == 'default') ? 1.5 : 2.15}vw; }
-            .card { height: 2.15vw; }
-            .count { font-size: ${(data.showDifferences == 'default') ? 0.7 : 1}vw; }
-            .name { font-size: ${(data.showDifferences == 'default') ? 0.5 : 0.75}vw; }
-            .subgap { font-size: 0.7vw;}`;
-        } else if (cards == 200) {
-            toReturn[2] = `.image { height: ${(data.showDifferences == 'default') ? 1.2 : 1.8}vw; width: ${(data.showDifferences == 'default') ? 1.2 : 1.8}vw; }
-            .card { height: 1.8vw; }
-            .count { font-size: ${(data.showDifferences == 'default') ? 0.6 : 0.9}vw; }
-            .name { font-size: ${(data.showDifferences == 'default') ? 0.4 : 0.6}vw; }
-            .subgap { font-size: 0.6vw; }`;
+        toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(5, 1fr);";
+
+        if (cards > 50) {
             toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);";
-        } else {
-            toReturn[2] = `.image { height: ${(data.showDifferences == 'default') ? 3 : 4.25}vw; width: ${(data.showDifferences == 'default') ? 3 : 4.25}vw; }
-            .card { height: 4.25vw; }
-            .count { font-size: ${(data.showDifferences == 'default') ? 1.4 : 2}vw; }
-            .name { font-size: ${(data.showDifferences == 'default') ? 1.05 : 1.5}vw; }
-            .subgap {font-size: 1.25vw;}`;
-            toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(5, 1fr);";
+            data.cardStyles.cardWidth = '9'
         }
+
         for (let l = 1; l <= cards; l++) {
             const cc = (c < 10) ? "0" + c : c;
             const dataIndex = c - 1;
             const htmlcard = document.createElement('div');
             const cid = channels[dataIndex] ? channels[dataIndex].id : '';
             htmlcard.innerHTML = `<div class="card card_${dataIndex}" id="card_${cid}">
-                <div class="num" id="num_${cid}"><div>${cc}</div></div>
+                <div class="num" id="num_${cid}"><div class="num_text">${cc}</div></div>
                 <img src="../blank.png" alt="" id="image_${cid}" class="image">
                 <div>
                     <div class="name" id="name_${cid}">Loading...</div>
@@ -380,14 +395,14 @@ function setupDesign(list, sort, order) {
                 const htmlcard = document.createElement('div');
                 const cid = channels[dataIndex] ? channels[dataIndex].id : '';
                 htmlcard.innerHTML = `<div class="card card_${dataIndex}" id="card_${cid}">
-                    <div class="num" id="num_${cid}"><div>${cc}</div></div>
-                    <img src="../blank.png" alt="" id="image_${cid}" class="image">
-                    <div>
-                        <div class="name" id="name_${cid}">Loading...</div>
-                        <div class="count odometer" id="count_${cid}">${getDisplayedCount(Math.floor(channels[dataIndex] ? channels[dataIndex].count : 0))}</div>
-                    </div>
-                    <img src="${data.differenceStyles.differenceImage}" class="gapimg">
-                    <div class="subgap odometer"></div>
+                <div class="num" id="num_${cid}"><div class="num_text">${cc}</div></div>
+                <img src="../blank.png" alt="" id="image_${cid}" class="image">
+                <div>
+                    <div class="name" id="name_${cid}">Loading...</div>
+                    <div class="count odometer" id="count_${cid}">${getDisplayedCount(Math.floor(channels[dataIndex] ? channels[dataIndex].count : 0))}</div>
+                </div>
+                <img src="${data.differenceStyles.differenceImage}" class="gapimg">
+                <div class="subgap odometer"></div>
                 </div>`;
                 if (channels[dataIndex]) {
                     if (htmlcard.querySelector('.image').src != channels[dataIndex].image) {
@@ -400,41 +415,13 @@ function setupDesign(list, sort, order) {
             }
             main.appendChild(htmlcolumn);
         }
-        if (data.theme == 'top100') {
-            toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);";
-            toReturn[2] = `.image { height: ${(data.showDifferences == 'default') ? 1.5 : 2.15}vw; width: ${(data.showDifferences == 'default') ? 1.5 : 2.15}vw; }
-            .card { height: 2.15vw; }
-            .count { font-size: ${(data.showDifferences == 'default') ? 0.7 : 1}vw; }
-            .name { font-size: ${(data.showDifferences == 'default') ? 0.5 : 0.75}vw; }
-            .subgap { font-size: 0.7vw;}`;
-        } else if (data.theme == 'top150') {
-            toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);";
-            toReturn[2] = `.image { height: ${(data.showDifferences == 'default') ? 1.5 : 2.15}vw; width: ${(data.showDifferences == 'default') ? 1.5 : 2.15}vw; }
-            .card { height: 2.15vw; }
-            .count { font-size: ${(data.showDifferences == 'default') ? 0.7 : 1}vw; }
-            .name { font-size: ${(data.showDifferences == 'default') ? 0.5 : 0.75}vw; }
-            .subgap { font-size: 0.7vw;}`;
-            toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);";
-        } else if (data.theme == 'top200') {
-            toReturn[2] = `.image { height: ${(data.showDifferences == 'default') ? 1.2 : 1.8}vw; width: ${(data.showDifferences == 'default') ? 1.2 : 1.8}vw; }
-            .card { height: 1.8vw; }
-            .count { font-size: ${(data.showDifferences == 'default') ? 0.6 : 0.9}vw; }
-            .name { font-size: ${(data.showDifferences == 'default') ? 0.4 : 0.6}vw; }
-            .subgap { font-size: 0.6vw; }`;
-            toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(10, 1fr);";
-        } else {
-            toReturn[2] = `.image { height: ${(data.showDifferences == 'default') ? 3 : 4.25}vw; width: ${(data.showDifferences == 'default') ? 3 : 4.25}vw; }
-            .card { height: 4.25vw; }
-            .count { font-size: ${(data.showDifferences == 'default') ? 1.4 : 2}vw; }
-            .name { font-size: ${(data.showDifferences == 'default') ? 1.05 : 1.5}vw; }
-            .subgap {font-size: 1.25vw;}`;
-            toReturn[1] = "margin-top: 0px; display: grid; grid-template-columns: repeat(5, 1fr);";
-        }
     }
     toReturn[0] = main;
+    document.getElementById('theme').value = data.theme;
     return toReturn;
 }
 
+
 function create() {
     let addMinGain = document.getElementById('add_min_gain').value;
     let addMaxGain = document.getElementById('add_max_gain').value;
@@ -511,7 +498,7 @@ function setupMDMStyles(undo) {
     if (undo) {
         appendedMDMStyles = false;
         document.getElementById('mdm-styles').remove();
-        document.querySelectorAll('.num').forEach(item=> {
+        document.querySelectorAll('.num').forEach(item => {
             item.style.backgroundImage = '';
             item.style.border = '';
         })
@@ -525,7 +512,6 @@ function setupMDMStyles(undo) {
     
                         .num {
                             height: 100%;
-                            width: 40px;
                             display: flex;
                             ${data.verticallyCenterRanks ? 'flex-direction: column' : ''}
                             align-items: center;
@@ -537,7 +523,7 @@ function setupMDMStyles(undo) {
                         }
 
                         .num_text {
-                            ${data.verticallyCenterRanks ? 'margin-top: 0.25em;' : 'margin-top: -1.25em;'}
+                            ${data.verticallyCenterRanks ? 'margin-top: 0.25em;' : 'margin-top: 0em;'}
                             z-index: 1000;
                             margin-left: 0.1em;
                         }
@@ -674,9 +660,17 @@ function update(doGains = true) {
                             currentCard.children[2].children[1].id = "count_" + data.data[i].id
                             currentCard.children[2].children[1].innerText = getDisplayedCount(data.data[i].count)
                             if (data.data[i + 1]) {
-                                currentCard.children[4].innerText = getDisplayedCount(data.data[i].count) - getDisplayedCount(data.data[i + 1].count)
+                                if (data.data[i].count - data.data[i + 1].count < parseInt(data.differenceThreshold)) {
+                                    currentCard.children[4].innerText = getDisplayedCount(data.data[i].count) - getDisplayedCount(data.data[i + 1].count)
+                                    currentCard.children[4].style.visibility = 'visible'
+                                    currentCard.children[3].style.visibility = 'visible'
+                                } else {
+                                    currentCard.children[3].style.visibility = 'hidden'
+                                    currentCard.children[4].style.visibility = 'hidden'
+                                }
                             } else {
-                                currentCard.children[4].innerText = getDisplayedCount(data.data[i].count)
+                                currentCard.children[4].style.visibility = 'hidden'
+                                currentCard.children[3].style.visibility = 'hidden'
                             }
                             if (selected == data.data[i].id) {
                                 document.getElementById("card_" + selected).style.border = "0.1em solid red";
@@ -799,6 +793,10 @@ function update(doGains = true) {
                                         break;
                                     } else {
                                         currentCard.children[0].innerHTML = `<div class="num_text">${num}</div>`;
+                                        if (firePosition == 'mdm') {
+                                            currentCard.children[0].style.backgroundImage = `url('')`;
+                                            currentCard.children[0].style.color = `${data.textColor}`;
+                                        }
                                     }
                                 }
                             } else {
@@ -1166,7 +1164,37 @@ document.getElementById('textPicker').addEventListener('change', function () {
 });
 
 document.getElementById('rankSize').addEventListener('change', function () {
-    data.rankSize = this.value;
+    data.cardStyles.rankSize = this.value;
+    fix();
+});
+
+document.getElementById('differenceSize').addEventListener('change', function () {
+    data.differenceStyles.differenceSize = this.value;
+    fix();
+});
+
+document.getElementById('cardWidth').addEventListener('change', function () {
+    data.cardStyles.cardWidth = this.value;
+    fix();
+});
+
+document.getElementById('cardHeight').addEventListener('change', function () {
+    data.cardStyles.cardHeight = this.value;
+    fix();
+});
+
+document.getElementById('imageSize').addEventListener('change', function () {
+    data.cardStyles.imageSize = this.value;
+    fix();
+});
+
+document.getElementById('nameSize').addEventListener('change', function () {
+    data.cardStyles.nameSize = this.value;
+    fix();
+});
+
+document.getElementById('countSize').addEventListener('change', function () {
+    data.cardStyles.countSize = this.value;
     fix();
 });
 
@@ -1248,47 +1276,52 @@ document.getElementById('verticallyCenterRanks').addEventListener('change', func
     } else {
         data.verticallyCenterRanks = false;
     }
-    fix()
+    fix();
 });
 
 document.getElementById('topDifferencePlacing').addEventListener('change', function () {
     data.differenceStyles.top = document.getElementById('topDifferencePlacing').value;
-    fix()
-});
-
-document.getElementById('enableImageShakes').addEventListener('change', function () {
-    data.differenceStyles.shakingEnabled = document.getElementById('enableImageShakes').checked;
-    fix()
+    fix();
 });
 
 document.getElementById('leftDifferencePlacing').addEventListener('change', function () {
     data.differenceStyles.left = document.getElementById('leftDifferencePlacing').value;
-    fix()
+    fix();
+});
+
+document.getElementById('differenceThreshold').addEventListener('change', function () {
+    data.differenceThreshold = document.getElementById('differenceThreshold').value;
+    fix();
+});
+
+document.getElementById('enableImageShakes').addEventListener('change', function () {
+    data.differenceStyles.shakingEnabled = document.getElementById('enableImageShakes').checked;
+    fix();
 });
 
 document.getElementById('differenceColor').addEventListener('change', function () {
     data.differenceStyles.color = document.getElementById('differenceColor').value;
-    fix()
+    fix();
 });
 
 document.getElementById('enableDifferenceImages').addEventListener('change', function () {
     data.differenceStyles.imageEnabled = document.getElementById('enableDifferenceImages').checked;
-    fix()
+    fix();
 });
 
 document.getElementById('leftDifferenceImagePlacing').addEventListener('change', function () {
     data.differenceStyles.imageLeft = document.getElementById('leftDifferenceImagePlacing').value;
-    fix()
+    fix();
 });
 
 document.getElementById('topDifferenceImagePlacing').addEventListener('change', function () {
     data.differenceStyles.imageTop = document.getElementById('topDifferenceImagePlacing').value;
-    fix()
+    fix();
 });
 
 document.getElementById('differenceImageSize').addEventListener('change', function () {
     data.differenceStyles.imageSize = document.getElementById('differenceImageSize').value;
-    fix()
+    fix();
 });
 
 document.getElementById('differenceImageUrl').addEventListener('change', function () {
@@ -1326,14 +1359,15 @@ document.getElementById('showDifferences').addEventListener('change', function (
 });
 
 document.getElementById('showRankings').addEventListener('change', function () {
-    if (document.getElementById('showRankings').checked) {
-        data.showRankings = true;
-    } else {
-        data.showRankings = false;
-    }
+    data.showRankings = document.getElementById('showRankings').checked;
     fix()
 });
 
+
+document.getElementById('rankingsWidth').addEventListener('change', function () {
+    data.rankingsWidth = document.getElementById('rankingsWidth').value;
+    fix()
+});
 document.getElementById('showNames').addEventListener('change', function () {
     if (document.getElementById('showNames').checked) {
         data.showNames = true;
@@ -1458,6 +1492,7 @@ function fix() {
 
     document.getElementById('leftDifferencePlacing').value = data.differenceStyles.left;
     document.getElementById('topDifferencePlacing').value = data.differenceStyles.top;
+    document.getElementById('differenceThreshold').value = data.differenceThreshold;
     document.getElementById('differenceColor').value = data.differenceStyles.color;
 
     document.getElementById('enableDifferenceImages').checked = data.differenceStyles.imageEnabled;
@@ -1473,11 +1508,12 @@ function fix() {
 
     document.getElementById('differenceStyling').innerText = `
         .subgap {
-            margin-top: ${data.differenceStyles.top}%;
+            top: ${data.differenceStyles.top}%;
             z-index: 100;
             position: absolute;
             float: none;
-            margin-left: ${data.differenceStyles.left}%;
+            left: ${data.differenceStyles.left}%;
+            font-size: ${data.differenceStyles.differenceSize}vw;
         }
 
         .subgap {
@@ -1489,12 +1525,26 @@ function fix() {
             height: ${data.differenceStyles.imageSize}px;
             ${data.differenceStyles.imageEnabled ? "" : "display: none"};
             left: ${data.differenceStyles.imageLeft}%;
-            margin-top: ${data.differenceStyles.imageTop}%;
+            top: ${data.differenceStyles.imageTop}%;
             ${data.differenceStyles.shakingEnabled ? "animation: shake 1s infinite;" : ""}
         }`;
 
-    let design = setupDesign()
-    document.getElementById('designStyles').innerText = design[2];
+    document.getElementById('cardStyles').innerText = `
+            .name {
+                font-size: ${data.cardStyles.nameSize}vw;
+            }
+            .count {
+                font-size: ${data.cardStyles.countSize}vw;
+            }
+            .image {
+                height: ${data.cardStyles.imageSize}vw;
+                width: ${data.cardStyles.imageSize}vw;
+            }
+            .card {
+                height: ${data.cardStyles.cardHeight}vw;
+                width: ${data.cardStyles.cardWidth}vw;
+            }
+        `
 
     if (data.prependZeros == true) {
         document.getElementById('prependZeros').checked = true;
@@ -1559,7 +1609,6 @@ function fix() {
         })
     }
 
-    document.getElementById('theme').value = data.theme;
     document.getElementById('setting').innerText = "Current: " + data.hideSettings + ""
     document.querySelectorAll('.card').forEach(function (card) {
         card.style.backgroundColor = data.boxColor;
@@ -1577,17 +1626,33 @@ function fix() {
         card.style.borderColor = data.imageBorderColor;
     });
     document.getElementById('main').children = Array.from(document.getElementById('main').children).forEach(child => {
-        Array.from(child.children).forEach(child2 => {
-            child2.style.margin = data.boxSpacing + 'vw';
-        });
+        if (data.theme.includes('H')) {
+            child.style.margin = data.boxSpacing + 'vw';
+        } else {
+            Array.from(child.children).forEach(child2 => {
+                child2.style.margin = data.boxSpacing + 'vw';
+            });
+        }
     });
     document.getElementById('rankSizeStyles').innerText = `
         .num_text {
-        font-size: ${data.rankSize}px;
-        }`;
+        font-size: ${data.cardStyles.rankSize}px;
+        }
+
+        .num {
+          width: ${data.rankingsWidth}px;
+        }
+        
+        `;
     document.getElementById('backPicker').value = convert3letterhexto6letters(data.bgColor);
     document.getElementById('boxSpacing').value = data.boxSpacing;
-    document.getElementById('rankSize').value = data.rankSize;
+    document.getElementById('rankSize').value = data.cardStyles.rankSize;
+    document.getElementById('differenceSize').value = data.differenceStyles.differenceSize;
+    document.getElementById('cardWidth').value = data.cardStyles.cardWidth;
+    document.getElementById('cardHeight').value = data.cardStyles.cardHeight;
+    document.getElementById('nameSize').value = data.cardStyles.nameSize;
+    document.getElementById('countSize').value = data.cardStyles.countSize;
+    document.getElementById('imageSize').value = data.cardStyles.imageSize;
     document.getElementById('textPicker').value = convert3letterhexto6letters(data.textColor);
     document.getElementById('boxPicker').value = convert3letterhexto6letters(data.boxColor);
     document.getElementById('borderPicker').value = convert3letterhexto6letters(data.boxBorder);
@@ -1866,8 +1931,7 @@ document.getElementById('abbreviate').addEventListener('click', function () {
 })
 
 document.getElementById('theme').addEventListener('change', function () {
-    let theme = document.getElementById('theme').value;
-    data.theme = theme;
+    data.theme = document.getElementById('theme').value;
     themeChanger();
 })
 
diff --git a/video/index.html b/video/index.html
index a3da162..5933795 100644
--- a/video/index.html
+++ b/video/index.html
@@ -24,6 +24,8 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://lcedit.com" />
     <meta property="og:image" content="https://lcedit.com/images/livecountsedit_video.png" />
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5666487244102554"
+     crossorigin="anonymous"></script>
     <style></style>
 </head>
 
