diff --git a/index.html b/index.html
index 96a9203..3bc2f47 100644
--- a/index.html
+++ b/index.html
@@ -1,174 +1,257 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ChickenScout Upload</title>
     <style>
-        /* style.css file*/
-        body {
-            display: flex;
-            justify-content: center;
-            margin: 0;
-            padding: 0;
-            height: 100vh;
-            box-sizing: border-box;
-            text-align: center;
-            background: rgba(137, 175, 226, 0.66);
-        }
-        
-        .container {
-            width: 100%;
-            max-width: 500px;
-            margin: 5px;
-        }
-        
-        .container h1 {
-            color: #0b0125;
-        }
-        
-        .section {
-            background-color: #ffffff;
-            padding: 50px 30px;
-            border: 1.5px solid #b2b2b2;
-            border-radius: 0.25em;
-            box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
-        }
-        
-        #my-qr-reader { 
-            padding: 20px !important;
-            border: 1.5px solid #b2b2b2 !important;
-            border-radius: 8px;
-        }
-        
-        #my-qr-reader img[alt="Info icon"] {
-            display: none;
-        }
-        
-        #my-qr-reader img[alt="Camera based scan"] {
-            width: 100px !important;
-            height: 100px !important;
-        }
-        
-        button {
-            padding: 10px 20px;
-            border: 1px solid #b2b2b2;
-            outline: none;
-            border-radius: 0.25em;
-            color: white;
-            font-size: 15px;
-            cursor: pointer;
-            margin-top: 15px;
-            margin-bottom: 10px;
-            background-color: #008000ad;
-            transition: 0.3s background-color;
-        }
-        
-        button:hover {
-            background-color: #008000;
-        }
-        
-        #html5-qrcode-anchor-scan-type-change {
-            text-decoration: none !important;
-            color: #1d9bf0;
-        }
-        
-        video {
-            width: 100% !important;
-            border: 1px solid #b2b2b2 !important;
-            border-radius: 0.25em;
-        }
+      @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+    </style>
+    <style>
+      /* style.css file*/
+      body {
+        font-family: Inter;
+        display: flex;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        height: 100vh;
+        box-sizing: border-box;
+        text-align: center;
+        color: #ffffff;
+        background: url("scouting\ bg.png");
+        background-size: cover;
+        background-position: center;
+      }
+
+      .container {
+        width: 100%;
+        max-width: 500px;
+        margin: 5px;
+      }
+
+      .container h1 {
+      }
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      * {
+        -ms-overflow-style: none; /* Internet Explorer 10+ */
+        scrollbar-width: none; /* Firefox */
+      }
+      *::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
+      }
+      select {
+        appearance: none;
+        border: none;
+        padding: 0 1em 0 0;
+        margin: 0;
+        width: 100%;
+        cursor: inherit;
+        line-height: inherit;
+        outline: none;
+        width: 100%;
+        min-width: 15ch;
+        max-width: 30ch;
+        color: white;
+        border-radius: 0.25em;
+        padding: 6px 8px;
+        cursor: pointer;
+        line-height: 1.1;
+        background-color: #1f1b2b;
+      }
+      .section {
+        position: fixed;
+        overflow-y: scroll;
+        top: 40px;
+        bottom: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #121019;
+        padding: 64px 48px;
+        border-radius: 8px;
+        box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        gap: 16px;
+      }
+
+      #my-qr-reader {
+        padding: 20px !important;
+        border-radius: 8px;
+        border: none !important;
+        display: flex;
+        flex-flow: column;
+        gap: 16px;
+      }
+
+      #my-qr-reader img[alt="Info icon"] {
+        display: none;
+      }
+      #my-qr-reader__dashboard_section {
+        display: flex;
+        flex-flow: column;
+        gap: 12px;
+      }
+
+      #my-qr-reader__header_message {
+        border: none !important;
+        padding: 8px !important;
+        border-radius: 8px;
+      }
+      div:has(>label[for=html5-qrcode-private-filescan-input]) {
+        border: 2px #1f1b2b solid !important;
+        padding: 32px !important;
+        border-radius: 8px;
+      }
+
+      span:has(select) {
+        display: flex;
+        flex-flow: row;
+        gap: 16px;
+        margin-right: 0px !important;
+        width: 400px;
+        justify-content: center;
+      }
+      #my-qr-reader img[alt="Camera based scan"] {
+        width: 100px;
+        height: 100px;
+        filter: invert(1);
+      }
+      #my-qr-reader img[alt="Fule based scan"] {
+        width: 100px;
+        height: 100px;
+        filter: invert(1);
+      }
+
+      button {
+        border: none;
+        padding: 10px 20px;
+        outline: none;
+        border-radius: 0.25em;
+        color: white;
+        font-size: 15px;
+        cursor: pointer;
+        margin-top: 15px;
+        margin-bottom: 10px;
+        background-color: #688cdbad;
+        transition: 0.3s background-color;
+      }
+
+      button:hover {
+        background-color: #688cdb;
+      }
+
+      #html5-qrcode-anchor-scan-type-change {
+        text-decoration: none !important;
+        color: #688cdb;
+      }
+
+      video {
+        width: 400px !important;
+        border: 1px solid #121019 !important;
+        border-radius: 0.25em;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="container">
-        <h1>Chicken Scout Upload</h1>
-        <div class="section">
-            <div id="my-qr-reader"></div>
-        </div>
+      <div class="section">
+        <h1 style="width: 396px;">Chicken Scout Upload</h1>
+        <div id="my-qr-reader"></div>
+      </div>
     </div>
     <script type="module">
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
-    import { getFirestore, doc, setDoc } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";
+      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
+      import {
+        getFirestore,
+        doc,
+        setDoc,
+      } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";
+
+      function domReady(fn) {
+        if (
+          document.readyState === "complete" ||
+          document.readyState === "interactive"
+        ) {
+          setTimeout(fn, 1000);
+        } else {
+          document.addEventListener("DOMContentLoaded", fn);
+        }
+      }
+
+      domReady(function () {
+        const firebaseConfig = {
+          apiKey: "AIzaSyDShBwN6mChQt9P0PdKxsOR5HG_Uq172nI",
+          authDomain: "chickenscout-21e32.firebaseapp.com",
+          databaseURL: "https://chickenscout-21e32-default-rtdb.firebaseio.com",
+          projectId: "chickenscout-21e32",
+          storageBucket: "chickenscout-21e32.firebasestorage.app",
+          messagingSenderId: "177473839950",
+          appId: "1:177473839950:web:22a232d21ad941cc1c341f",
+          measurementId: "G-BMHHNB3SZ2",
+        };
+
+        // Initialize Firebase
+        const app = initializeApp(firebaseConfig);
+        const db = getFirestore(app);
+
+        function onScanSuccess(decodeText, decodeResult) {
+          htmlscanner.pause();
+          processScannedData(decodeText);
+        }
 
+        async function processScannedData(data) {
+          try {
+            const parsedData = JSON.parse(data);
 
-        function domReady(fn) {
             if (
-                document.readyState === "complete" ||
-                document.readyState === "interactive"
+              parsedData &&
+              typeof parsedData === "object" &&
+              !Array.isArray(parsedData)
             ) {
-                setTimeout(fn, 1000);
-            } else {
-                document.addEventListener("DOMContentLoaded", fn);
-            }
-        }
+              const { doc_ID, ...docData } = parsedData; // Extract doc_ID and the rest of the data
 
-        domReady(function () {
-            const firebaseConfig = {
-                apiKey: "AIzaSyDShBwN6mChQt9P0PdKxsOR5HG_Uq172nI",
-                authDomain: "chickenscout-21e32.firebaseapp.com",
-                databaseURL: "https://chickenscout-21e32-default-rtdb.firebaseio.com",
-                projectId: "chickenscout-21e32",
-                storageBucket: "chickenscout-21e32.firebasestorage.app",
-                messagingSenderId: "177473839950",
-                appId: "1:177473839950:web:22a232d21ad941cc1c341f",
-                measurementId: "G-BMHHNB3SZ2"
-            };
-
-            // Initialize Firebase
-            const app = initializeApp(firebaseConfig);
-            const db = getFirestore(app);
-
-            function onScanSuccess(decodeText, decodeResult) {
-                htmlscanner.pause()
-                processScannedData(decodeText);
-            }
+              if (!doc_ID) {
+                alert("Missing 'doc_ID' field. Please find Emilio.");
+                return;
+              }
 
-            async function processScannedData(data) {
-                try {
-                    const parsedData = JSON.parse(data);
-            
-                    if (parsedData && typeof parsedData === 'object' && !Array.isArray(parsedData)) {
-                        const { doc_ID, ...docData } = parsedData; // Extract doc_ID and the rest of the data
-            
-                        if (!doc_ID) {
-                            alert("Missing 'doc_ID' field. Please find Emilio.");
-                            return;
-                        }
-            
-                        const docRef = doc(db, '10kMatches', doc_ID); // Use doc_ID as the document ID
-                        await setDoc(docRef, docData); // Save data without doc_ID
-            
-                        alert("Data sent successfully!");
-                        setTimeout(() => {
-                            htmlscanner.resume(); // Automatically resume scanning after 1 second
-                        }, 1000);
-                    } else {
-                        alert("Invalid data format. Please find Emilio.");
-                        setTimeout(() => {
-                            htmlscanner.resume(); // Automatically resume scanning after 1 second
-                        }, 1000);
-                    }
-                } catch (error) {
-                    console.error("Error processing scanned data:", error);
-                    alert("Data Parsing Error. Please find Emilio." + error);
-                    setTimeout(() => {
-                        htmlscanner.resume(); // Automatically resume scanning after 1 second
-                    }, 1000);
-                }
-            }
+              const docRef = doc(db, "10kMatches", doc_ID); // Use doc_ID as the document ID
+              await setDoc(docRef, docData); // Save data without doc_ID
 
+              alert("Data sent successfully!");
+              setTimeout(() => {
+                htmlscanner.resume(); // Automatically resume scanning after 1 second
+              }, 1000);
+            } else {
+              alert("Invalid data format. Please find Emilio.");
+              setTimeout(() => {
+                htmlscanner.resume(); // Automatically resume scanning after 1 second
+              }, 1000);
+            }
+          } catch (error) {
+            console.error("Error processing scanned data:", error);
+            alert("Data Parsing Error. Please find Emilio." + error);
+            setTimeout(() => {
+              htmlscanner.resume(); // Automatically resume scanning after 1 second
+            }, 1000);
+          }
+        }
 
-            let htmlscanner = new Html5QrcodeScanner(
-                "my-qr-reader",
-                { fps: 10, qrbos: 250 }
-            );
-            htmlscanner.render(onScanSuccess);
+        let htmlscanner = new Html5QrcodeScanner("my-qr-reader", {
+          fps: 10,
+          qrbos: 250,
         });
+        htmlscanner.render(onScanSuccess);
+      });
     </script>
     <script src="https://unpkg.com/html5-qrcode"></script>
-</body>
-
+  </body>
 </html>
diff --git a/scouting bg.png b/scouting bg.png
new file mode 100644
index 0000000..dab72ce
Binary files /dev/null and b/scouting bg.png differ
