diff --git a/backend/app/main.py b/backend/app/main.py
index 66b63aa..95bbc2b 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -76,7 +76,7 @@ class DrugWithVariantsResponse(BaseModel):
 class DispensingCreate(BaseModel):
     drug_variant_id: int
     quantity: float
-    animal_name: str
+    animal_name: Optional[str] = None
     user_name: str
     notes: Optional[str] = None
 
@@ -84,7 +84,7 @@ class DispensingResponse(BaseModel):
     id: int
     drug_variant_id: int
     quantity: float
-    animal_name: str
+    animal_name: Optional[str] = None
     user_name: str
     notes: Optional[str] = None
     dispensed_at: datetime
diff --git a/frontend/app.js b/frontend/app.js
index bcee764..b50773b 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -223,18 +223,41 @@ async function handleAddDrug(e) {
     };
 
     try {
-        const response = await fetch(`${API_URL}/drugs`, {
+        // Create the drug first
+        const drugResponse = await fetch(`${API_URL}/drugs`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(drugData)
         });
 
-        if (!response.ok) throw new Error('Failed to add drug');
+        if (!drugResponse.ok) throw new Error('Failed to add drug');
+        const createdDrug = await drugResponse.json();
+
+        // Check if initial variant data was provided
+        const variantStrength = document.getElementById('initialVariantStrength').value.trim();
+        if (variantStrength) {
+            const variantData = {
+                strength: variantStrength,
+                quantity: parseFloat(document.getElementById('initialVariantQuantity').value) || 0,
+                unit: document.getElementById('initialVariantUnit').value || 'units',
+                low_stock_threshold: parseFloat(document.getElementById('initialVariantThreshold').value) || 10
+            };
+
+            const variantResponse = await fetch(`${API_URL}/drugs/${createdDrug.id}/variants`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(variantData)
+            });
+
+            if (!variantResponse.ok) throw new Error('Failed to add variant');
+        }
 
         document.getElementById('drugForm').reset();
+        document.getElementById('initialVariantUnit').value = 'units';
+        document.getElementById('initialVariantThreshold').value = '10';
         closeModal(document.getElementById('addModal'));
         await loadDrugs();
-        alert('Drug added successfully! Now add variants for this drug.');
+        alert('Drug added successfully!');
     } catch (error) {
         console.error('Error adding drug:', error);
         alert('Failed to add drug. Check the console for details.');
@@ -251,8 +274,8 @@ async function handleDispenseDrug(e) {
     const userName = document.getElementById('dispenseUser').value;
     const notes = document.getElementById('dispenseNotes').value;
 
-    if (!variantId || !quantity || !animalName || !userName) {
-        alert('Please fill in all required fields');
+    if (!variantId || isNaN(quantity) || quantity <= 0 || !userName) {
+        alert('Please fill in all required fields (Drug Variant, Quantity > 0, Dispensed by)');
         return;
     }
 
@@ -358,7 +381,13 @@ async function handleAddVariant(e) {
 
 // Open edit variant modal
 function openEditVariantModal(variantId) {
-    const variant = currentDrug.variants.find(v => v.id === variantId);
+    // Find the variant from all drugs
+    let variant = null;
+    for (const drug of allDrugs) {
+        variant = drug.variants.find(v => v.id === variantId);
+        if (variant) break;
+    }
+    
     if (!variant) return;
 
     document.getElementById('editVariantId').value = variant.id;
diff --git a/frontend/index.html b/frontend/index.html
index c1d8400..9b88c98 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -82,6 +82,29 @@
                     <label for="drugDescription">Description</label>
                     <input type="text" id="drugDescription">
                 </div>
+
+                <hr style="margin: 20px 0; border: none; border-top: 1px solid #ddd;">
+                <h3 style="margin-top: 0;">Initial Variant (Optional)</h3>
+                
+                <div class="form-group">
+                    <label for="initialVariantStrength">Strength</label>
+                    <input type="text" id="initialVariantStrength" placeholder="e.g., 10mg, 5.4mg">
+                </div>
+                
+                <div class="form-group">
+                    <label for="initialVariantQuantity">Quantity</label>
+                    <input type="number" id="initialVariantQuantity" placeholder="0" min="0" step="0.1">
+                </div>
+                
+                <div class="form-group">
+                    <label for="initialVariantUnit">Unit</label>
+                    <input type="text" id="initialVariantUnit" placeholder="e.g., tablets, capsules, vials" value="units">
+                </div>
+                
+                <div class="form-group">
+                    <label for="initialVariantThreshold">Low Stock Threshold</label>
+                    <input type="number" id="initialVariantThreshold" placeholder="0" min="0" step="0.1" value="10">
+                </div>
                 
                 <div class="form-actions">
                     <button type="submit" class="btn btn-primary">Add Drug</button>
@@ -96,27 +119,27 @@
         <div class="modal-content">
             <span class="close">&times;</span>
             <h2>Dispense Drug</h2>
-            <form id="dispenseForm">
+            <form id="dispenseForm" novalidate>
                 <div class="form-group">
                     <label for="dispenseDrugSelect">Drug Variant *</label>
-                    <select id="dispenseDrugSelect" required>
+                    <select id="dispenseDrugSelect">
                         <option value="">-- Select a drug variant --</option>
                     </select>
                 </div>
                 
                 <div class="form-group">
                     <label for="dispenseQuantity">Quantity *</label>
-                    <input type="number" id="dispenseQuantity" step="0.1" required>
+                    <input type="number" id="dispenseQuantity" step="0.1">
                 </div>
                 
                 <div class="form-group">
-                    <label for="dispenseAnimal">Animal Name/ID *</label>
-                    <input type="text" id="dispenseAnimal" required>
+                    <label for="dispenseAnimal">Animal Name/ID</label>
+                    <input type="text" id="dispenseAnimal">
                 </div>
                 
                 <div class="form-group">
-                    <label for="dispenseUser">User Name *</label>
-                    <input type="text" id="dispenseUser" required>
+                    <label for="dispenseUser">Dispensed by *</label>
+                    <input type="text" id="dispenseUser">
                 </div>
                 
                 <div class="form-group">