diff --git a/authors.html b/authors.html
index b74954ef..58d46dd8 100644
--- a/authors.html
+++ b/authors.html
@@ -8,6 +8,7 @@
     <meta name="description" content="A countdown app and day of year counter with light and dark mode auto functionality">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="themes.css">
     <link rel="manifest" href="/manifest.json">
     <title>Final Countdown </title>
     <link href="img/icons/favicon.png" rel="icon">
diff --git a/countdown-list.html b/countdown-list.html
index e27120e6..65d5d86b 100644
--- a/countdown-list.html
+++ b/countdown-list.html
@@ -12,6 +12,7 @@
     <meta name="Author" content="R.Djarbeng| A.Nyakotey">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="themes.css">
     <link rel="manifest" href="manifest.json">
     <!-- ios support -->
     <link rel="apple-touch-icon" href="img/icons/favicon.png">
diff --git a/fallback.html b/fallback.html
index b4a009d5..1c23b458 100644
--- a/fallback.html
+++ b/fallback.html
@@ -12,6 +12,7 @@
     <meta name="Author" content="R.Djarbeng| A.Nyakotey">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="themes.css">
     <link rel="manifest" href="manifest.json">
     <!-- ios support -->
     <link rel="apple-touch-icon" href="img/icons/favicon.png">
diff --git a/form-upload.html b/form-upload.html
index 47079d71..365dc69a 100644
--- a/form-upload.html
+++ b/form-upload.html
@@ -3,18 +3,21 @@
         <div class="form-header">Set Custom Bg</div>
         <div class="bg-presets">
             <div class="bg-presets-preview  p1">
-                <img src="img/bg/2082226.jpg" alt="">
+                <img src="img/bg/earth.jpg" alt="earth">
             </div>
             <div class="bg-presets-preview  p2">
-                <img src="img/bg/basketball_ball_basketball_court_120082_1920x1080.jpg" alt="">
+                <img src="img/bg/basketball_on_court.jpg" alt="basketball_on_court">
             </div>
             <div class="bg-presets-preview  p3">
-                <img src="img/bg/ship_sky_balloons_80359_1920x1080.jpg" alt="">
+                <img src="img/bg/ship_sky_balloons.jpg" alt="ship_sky_balloons">
             </div>
             <div class="bg-presets-preview  p4">
-                <img src="img/bg/gif6.gif" alt="">
+                <img src="img/bg/goku.jpg" alt="goku">
             </div>
-            <div class="bg-presets-preview  p5"><label for="upload"><i class="fas fa-plus fa-lg"></i></label></div>
+            <div class="bg-presets-preview  p5">
+                <img src="img/bg/wait_impatient.gif" alt="wait impatiently">
+            </div>
+            <div class="bg-presets-preview  upload-preview"><label for="upload"><i class="fas fa-plus fa-lg"></i></label></div>
         </div>
         <div>
             <label for="upload-info">Uploaded image must be &lt; 5mb &nbsp;</label>
diff --git a/form.css b/form.css
index 3e3b9d5d..190d4bf6 100644
--- a/form.css
+++ b/form.css
@@ -70,7 +70,7 @@ input[type="submit"]:hover,.reset button:hover{
 /* upload image form */
 .bg-presets {
     display: flex;
-    width: 100%;
+    width: 82%;
     align-items: center;
     justify-content: center;
     flex-flow: row wrap;
diff --git a/img/bg/basketball_ball_basketball_court_120082_1920x1080.jpg b/img/bg/basketball_on_court.jpg
similarity index 100%
rename from img/bg/basketball_ball_basketball_court_120082_1920x1080.jpg
rename to img/bg/basketball_on_court.jpg
diff --git a/img/bg/2082226.jpg b/img/bg/earth.jpg
similarity index 100%
rename from img/bg/2082226.jpg
rename to img/bg/earth.jpg
diff --git a/img/bg/goku.jpg b/img/bg/goku.jpg
new file mode 100644
index 00000000..d5540c48
Binary files /dev/null and b/img/bg/goku.jpg differ
diff --git a/img/bg/ship_sky_balloons_80359_1920x1080.jpg b/img/bg/ship_sky_balloons.jpg
similarity index 100%
rename from img/bg/ship_sky_balloons_80359_1920x1080.jpg
rename to img/bg/ship_sky_balloons.jpg
diff --git a/img/bg/gif6.gif b/img/bg/wait_impatient.gif
similarity index 100%
rename from img/bg/gif6.gif
rename to img/bg/wait_impatient.gif
diff --git a/index.html b/index.html
index 74cd4c28..606446f6 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="themes.css">
 
     <link rel="manifest" href="manifest.json">
     <!-- ios support -->
diff --git a/loader.css b/loader.css
index 9c43b623..9c8d3f8c 100644
--- a/loader.css
+++ b/loader.css
@@ -1,7 +1,6 @@
-@import url("themes.css");
 .loader{
     background-color: rgba(255, 255, 255, 0.95);
-    color: var(--bg-sidebar);
+    color: var(--color-banner);
     padding: 0 1rem;
     border-radius: 0.4rem;
     font-size: 1.5em;
diff --git a/sidebar.js b/sidebar.js
index 458c18be..2ba82f89 100644
--- a/sidebar.js
+++ b/sidebar.js
@@ -72,7 +72,7 @@ function openBgPicker() {
         document.body.insertAdjacentHTML(
             "afterbegin",
             `<aside class="pop-up-container loader-container">
-                <section class="loader">
+                <section class="loader" style="--color-banner: ${getComputedStyle($("body")[0]).getPropertyValue("--color-banner")}">
                     <span>Loading</span>
                     <span>.</span>
                     <span>.</span>
@@ -85,9 +85,9 @@ function openBgPicker() {
     const loadForm = async () => {
         let file = await fetch("./form-upload.html");
         let ft = await file.text();
+        document.getElementsByClassName("loader-container")[0].remove();
         document.body.insertAdjacentHTML("afterbegin", ft);
         document.body.style.position = "fixed";
-        document.getElementsByClassName("loader-container")[0].remove();
         const filePicker = document.querySelector("input[type='file']");
         const reading = (uploadedPic) => {
             let reader = new FileReader();
@@ -115,7 +115,7 @@ function openBgPicker() {
             localStorage.removeItem("userBg");
             document.body.style.backgroundImage = "";
         });
-        $(".bg-presets-preview:not(.p5) img").forEach((e) => {
+        $(".bg-presets-preview:not(.upload-preview) img").forEach((e) => {
             e.addEventListener("click", () => {
                 const sbg = async () => {
                     let img = await fetch(e.src);
diff --git a/styles.css b/styles.css
index bf41221b..e010e6a5 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap");
-@import url("./themes.css");
 /* basic reset */
 *,
 *::before,