diff --git a/app.js b/app.js
index a2bd126..45c8ca7 100644
--- a/app.js
+++ b/app.js
@@ -90,18 +90,46 @@ async function fetchCardDetails(cardName, setCode) {
 
 async function addCard() {
     const cardName = document.getElementById('card-name').value;
-    const setCode = document.getElementById('set-code').value;
+    const setCodeInput = document.getElementById('set-code');
+    const cardIdInput = document.getElementById('card-id');
 
     // Fetch card details using the card name and set code
+    let setCode = setCodeInput.value;
+    let cardId = cardIdInput.value;
+
+    // Always fetch card details
     const cardDetails = await fetchCardDetails(cardName, setCode);
 
     if (cardDetails) {
-        updateCardDetails(cardDetails);
+        // If set code or card ID is not filled, auto-fill them
+        if (!setCode) {
+            setCode = cardDetails.set;
+            setCodeInput.value = setCode;
+        }
+        if (!cardId) {
+            cardId = cardDetails.card_id;
+            cardIdInput.value = cardId;
+        }
+        
+        // Update card details with either user input or fetched data
+        updateCardDetails({
+            name: cardName,
+            set: setCode,
+            card_id: cardId,
+            mana_cost: cardDetails.mana_cost,
+            power: cardDetails.power,
+            toughness: cardDetails.toughness,
+            type: cardDetails.type,
+            rarity: cardDetails.rarity,
+            price: cardDetails.price,
+            imageUrl: cardDetails.imageUrl
+        });
     } else {
-        alert("Card not found with the given name and set code.");
+        alert("Card not found with the given name.");
     }
 }
 
+
 function updateCardDetails(printing) {
     document.getElementById('set-code').value = printing.set;
     document.getElementById('card-id').value = printing.card_id;
diff --git a/index.html b/index.html
index b2c3e5c..d870f7b 100644
--- a/index.html
+++ b/index.html
@@ -30,34 +30,45 @@
         </div>
 
         <h1>MTG Card CSV Generator</h1>
-        <form id="card-form">
-            <div>
-                <label for="card-name">Card Name:</label>
-                <input type="text" id="card-name" autocomplete="off" required>
-                <div id="suggestions"></div>
+        <form id="card-form" class="mdc-card">
+            <div class="mdc-text-field mdc-text-field--outlined">
+                <input type="text" id="card-name" class="mdc-text-field__input" autocomplete="off" required>
+                <label class="mdc-floating-label" for="card-name">Card Name</label>
+                <div class="mdc-line-ripple"></div>
             </div>
-            <div>
-                <label for="set-code">Set Code:</label>
-                <input type="text" id="set-code" required>
+        
+            <div class="mdc-text-field mdc-text-field--outlined">
+                <input type="text" id="set-code" class="mdc-text-field__input" required>
+                <label class="mdc-floating-label" for="set-code">Set Code</label>
+                <div class="mdc-line-ripple"></div>
             </div>
-            <div>
-                <label for="card-id">Card ID:</label>
-                <input type="text" id="card-id" required>
+        
+            <div class="mdc-text-field mdc-text-field--outlined">
+                <input type="text" id="card-id" class="mdc-text-field__input" required>
+                <label class="mdc-floating-label" for="card-id">Card ID</label>
+                <div class="mdc-line-ripple"></div>
             </div>
-            <div>
-                <label for="quantity">Quantity:</label>
-                <input type="number" id="quantity" min="1" value="1" required>
+        
+            <div class="mdc-text-field mdc-text-field--outlined">
+                <input type="number" id="quantity" class="mdc-text-field__input" min="1" value="1" required>
+                <label class="mdc-floating-label" for="quantity">Quantity</label>
+                <div class="mdc-line-ripple"></div>
             </div>
-            <div>
-                <label for="foil">Is it Foil?</label>
-                <select id="foil">
+        
+            <div class="mdc-select">
+                <select id="foil" class="mdc-select__native-control">
                     <option value="No">No</option>
                     <option value="Yes">Yes</option>
                 </select>
+                <label class="mdc-floating-label">Is it Foil?</label>
+                <div class="mdc-line-ripple"></div>
             </div>
-            <button type="button" id="add-card-button">Add Card</button>
+        
+            <button type="button" class="mdc-button mdc-button--raised" id="add-card-button">Add Card</button>
         </form>
-        <button id="download-csv-button">Download CSV</button>
+        
+        <button class="mdc-button mdc-button--outlined" id="download-csv-button">Download CSV</button>
+        
         <textarea id="csv-output" readonly></textarea>
         <div id="card-popup" class="card-popup"></div>
     </div>
@@ -75,5 +86,6 @@
           navigator.serviceWorker.register('sw.js')
         }
       </script>
+      
 </body>
 </html>
diff --git a/offline.html b/offline.html
index b31cad6..e0db80a 100644
--- a/offline.html
+++ b/offline.html
@@ -8,6 +8,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
     <link rel="icon" href="icon.png" type="image/png">
     <link href="//cdn.jsdelivr.net/npm/mana-font@latest/css/mana.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
+
 </head>
 <body>
     <div class="container">
@@ -25,5 +27,9 @@
             This app is not affiliated with Wizards of the Coast or Hasbro. All rights and trademarks are owned by their respective owners.
         </p>
     </footer>
+    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+    <script>
+        mdc.autoInit(); // Initialize all MDC components
+    </script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
index 33074b2..aa0d8aa 100644
--- a/styles.css
+++ b/styles.css
@@ -6,6 +6,14 @@
     --button-hover: #005fa3;
 }
 
+.material-theme {
+    --background-color: #ffffff;
+    --text-color: #000000;
+    --card-background: #f8f8f8;
+    --button-background: #6200ee;
+    --button-hover: #3700b3;
+}
+
 .theme-white {
     --background-color: #f9f8f6;
     --text-color: #1e1e1e;
@@ -86,6 +94,7 @@
         --button-background: #2e7d32;
         --button-hover: #388e3c;
     }
+    
 }