diff --git a/README.md b/README.md
index b91dcef..f590400 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,45 @@
 # SmuggleShield
-***Beta Version***
+***Stable Version (2.0)***
 
 [![CodeQL Advanced](https://github.com/RootUp/SmuggleShield/actions/workflows/codeql.yml/badge.svg)](https://github.com/RootUp/SmuggleShield/actions/workflows/codeql.yml)
 
-SmuggleShield is an experimental browser extension that aims to prevent **basic** HTML smuggling attacks by detecting common patterns. While this is not a comprehensive or bulletproof solution, it is an attempt to provide an additional layer of security during browsing. **The project is still in the testing phase!**
+SmuggleShield is a browser extension that aims to prevent **basic** HTML smuggling attacks by detecting common patterns. While this is not a comprehensive or bulletproof solution, it is an attempt to provide an additional layer of security during browsing or during your red/puprle team exercise.
 
-The extension is compatible both on Chrome and Edge for Mac and Windows OS. Enable developer mode under extension settings and click on "Load unpacked" in the "SumggleSheild" folder. The extension would be up and running. Blocked URLs are stored in extension cache up to 10 days with blocked pattern, URL, and timestamp, which can be reviewed by clicking on extension then "Export Blocked Content Logs.". 
+The extension is compatible both on Chrome and Edge for Mac and Windows OS. Enable developer mode under extension settings and click on "Load unpacked" in the "SumggleSheild" folder. The extension would be up and running. Blocked URLs are stored in extension cache up to 10 days with blocked pattern, URL, and timestamp, which can be reviewed by clicking on extension then "Export Blocked Content Logs", the current stable version also has key fatures such as "URL Whitelisting" because sometimes SmuggleShield could take few seconds extra to load a page because it scans every elements of the webpage but with this key feature (URL Whitelisting) you can reduce the overhead 
 
-## Incognito Mode Support
-SmuggleShield can protect against HTML smuggling attempts in incognito mode, but requires manual activation. To enable incognito protection: open Chrome's extension management page (`chrome://extensions/`), click "Details" on SmuggleShield, and toggle "Allow in incognito". Note: This setting is disabled by default as per Chrome's security policy. When enabled, the extension will maintain separate states for normal and incognito sessions to preserve privacy, while providing the same level of protection against HTML smuggling attempts in both modes.
+## Extension Workflow
 
-## **Install from Chrome Web Store**
-- [SmuggleShield](https://chromewebstore.google.com/detail/SmuggleShield/lglilndcogcapdkpfllcdlopgffbepce) - Currently, the GH version of this extension is more better than the one published on Chrome webstore.
+![SmuggleShield-Workflow](https://github.com/user-attachments/assets/a42d9f8d-3968-42c8-b0e8-a9507defa197)
 
-![SmuggleShield_POC](https://github.com/user-attachments/assets/c8602882-cd1b-48fb-9512-642993aadf88)
-[Watch on Youtube](https://youtu.be/6x0Fe_63qxA)
+## Machine Learning Integration & Workflow
 
-I have taken multiple code references from StackOverflow/Github and file smuggling samples from delivr[dot]to. Hence, special thanks to them!
+First, the `HTMLSmugglingBlocker` analyzes webpage content and combines both pattern-based detection and ML-based analysis. The MLDetector then extracts six key features (`base64Length`, `blobUsage`, `downloadAttr`, `scriptDensity`, `encodingFunctions`, `binaryManipulation`) and makes predictions using a **0.75** confidence threshold. Then its a continuous learning loop where the `MLMonitor` tracks performance metrics and feeds results back to improve detection accuracy, with all learned patterns persisted in `chrome.storage.local` for adaptation to new threats.
+
+![SmuggleShield-ML](https://github.com/user-attachments/assets/043b9f32-b28f-437f-a7c6-1f59e705dc22)
+
+https://github.com/user-attachments/assets/8b8f1333-6a99-4979-bc17-56026a048ba8
+
+## In Action
 
-## **Privacy Policy**
-- [Privacy Policy for SmuggleShield](https://www.inputzero.io/p/smuggelsheild.html)
+https://github.com/user-attachments/assets/8d97fdcf-b3d2-4ddb-a846-0900e333b7fe
 
-## **SmuggleShield could have prevented**
+## Incognito Mode Support
+SmuggleShield can protect against HTML smuggling attempts in incognito mode, but requires manual activation. To enable incognito protection: open Chrome's extension management page (`chrome://extensions/`), click "**Details**" on SmuggleShield, and toggle "**Allow in incognito**". Note: This setting is disabled by default as per Chrome's security policy. When enabled, the extension will maintain separate states for normal and incognito sessions to preserve privacy, while providing the same level of protection against HTML smuggling attempts in both modes.
+
+## Install from Chrome Web Store
+[SmuggleShield](https://chromewebstore.google.com/detail/SmuggleShield/lglilndcogcapdkpfllcdlopgffbepce) - Currently, the GitHub version is more better than the one published on Chrome webstore.
+
+## SmuggleShield Could Have Prevented
 
-- [Quakbot- 14072022](https://github.com/0xToxin/Malware-IOCs/blob/main/Quakbot/Quakbot-%2014072022)
-- [Pikabot | TA577 | 1.1.15-ghost](https://github.com/pr0xylife/Pikabot/blob/main/Pikabot_01.11.2023.txt)
-- [A malspam campaign delivering AsyncRAT](https://x.com/RandomDhiraj/status/1854182495337476211)
-- [HTML smuggling is delivering DCRat malware, bypassing traditional security controls by embedding malicious payloads in HTML files. This advanced technique poses a global threat to unsuspecting users](https://x.com/RandomDhiraj/status/1839717748970021027)
+| **Sr. No.** | **Details**                                | **Reference**                                                                                                                 |
+|-------------|--------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
+| 1           | Quakbot campaign (14th July 2022)          | [GitHub](https://github.com/0xToxin/Malware-IOCs/blob/main/Quakbot/Quakbot-%2014072022)                                    |
+| 2           | DCRat malware via HTML Smuggling           | [X (Twitter)](https://x.com/RandomDhiraj/status/1839717748970021027)                                                       |
+| 3           | Pikabot (TA577, Version 1.1.15-ghost)      | [GitHub](https://github.com/pr0xylife/Pikabot/blob/main/Pikabot_01.11.2023.txt)                                            |
+| 4           | AsyncRAT delivered via malspam campaign    | [X (Twitter)](https://x.com/RandomDhiraj/status/1854182495337476211)                                                       |
+
+## Special Thanks
+I have taken multiple code references from StackOverflow/Github and file smuggling samples from delivr[dot]to. Hence, special thanks to them!
 
+## Privacy Policy
+[Privacy Policy for SmuggleShield](https://www.inputzero.io/p/smuggelsheild.html)
diff --git a/SmuggleShield/background.js b/SmuggleShield/background.js
index 12ccf0b..b7cbe7f 100644
--- a/SmuggleShield/background.js
+++ b/SmuggleShield/background.js
@@ -7,6 +7,7 @@ const config = {
   suspiciousHeaders: ['content-disposition', 'content-type'],
   logRetentionDays: 10,
   cacheDurationMs: 5 * 60 * 1000,
+  whitelistEnabled: true
 };
 
 class WeakLRUCache {
@@ -79,6 +80,68 @@ function debounce(func, delay) {
 
 const debouncedLogBlockedContent = debounce(logBlockedContent, 1000);
 
+async function isWhitelisted(url) {
+  try {
+    const hostname = new URL(url).hostname;
+    const result = await chrome.storage.local.get('whitelist');
+    const whitelist = result.whitelist || [];
+    console.log('Background checking whitelist for:', hostname, 'Whitelist:', whitelist);
+    return whitelist.includes(hostname);
+  } catch (error) {
+    console.error('Error checking whitelist:', error);
+    return false;
+  }
+}
+
+chrome.webNavigation.onCommitted.addListener(async (details) => {
+  if (details.frameId === 0) { // Main frame only
+    const isWhitelistedUrl = await isWhitelisted(details.url);
+    if (isWhitelistedUrl) {
+      chrome.tabs.sendMessage(details.tabId, {
+        action: "setWhitelisted",
+        value: true
+      }).catch(error => console.debug('Tab not ready yet:', error));
+    }
+  }
+});
+
+chrome.webRequest.onBeforeRequest.addListener(
+  async (details) => {
+    if (await isWhitelisted(details.url)) {
+      console.log('URL is whitelisted, allowing request:', details.url);
+      return { cancel: false };
+    }
+
+    const isSuspiciousUrl = checkSuspiciousURL(details.url);
+    
+    if (isSuspiciousUrl) {
+      console.log('Suspicious URL detected:', details.url);
+      return { cancel: true };
+    }
+
+    return { cancel: false };
+  },
+  {urls: ["<all_urls>"]},
+  ["blocking"]
+);
+
+chrome.webRequest.onHeadersReceived.addListener(
+  async (details) => {
+    if (await isWhitelisted(details.url)) {
+      return { responseHeaders: details.responseHeaders };
+    }
+
+    const hasSuspiciousHeaders = checkSuspiciousHeaders(details.responseHeaders);
+    if (hasSuspiciousHeaders) {
+      chrome.tabs.sendMessage(details.tabId, {action: "suspiciousHeadersDetected"})
+        .catch(error => console.error('Error sending message:', error));
+    }
+    return {responseHeaders: details.responseHeaders};
+  },
+  {urls: ["<all_urls>"]},
+  ["responseHeaders"]
+);
+
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   console.log('Received message:', request);
   switch (request.action) {
@@ -87,13 +150,19 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       console.warn(request.message);
       break;
     case "analyzeURL":
-      const result = memoizedAnalyzeURL(request.url);
-      if (Date.now() - result.timestamp < config.cacheDurationMs) {
-        sendResponse({isSuspicious: result.isSuspicious});
-      } else {
-        const newResult = memoizedAnalyzeURL(request.url);
-        sendResponse({isSuspicious: newResult.isSuspicious});
-      }
+      isWhitelisted(request.url).then(whitelisted => {
+        if (whitelisted) {
+          sendResponse({isSuspicious: false, whitelisted: true});
+        } else {
+          const result = memoizedAnalyzeURL(request.url);
+          if (Date.now() - result.timestamp < config.cacheDurationMs) {
+            sendResponse({isSuspicious: result.isSuspicious, whitelisted: false});
+          } else {
+            const newResult = memoizedAnalyzeURL(request.url);
+            sendResponse({isSuspicious: newResult.isSuspicious, whitelisted: false});
+          }
+        }
+      });
       return true;
     case "exportLogs":
       chrome.storage.local.get(['blockedLogs'], result => {
@@ -134,21 +203,6 @@ const checkSuspiciousHeaders = memoize((headers) => {
   );
 }, (headers) => JSON.stringify(headers));
 
-chrome.webRequest.onHeadersReceived.addListener(
-  (details) => {
-    const hasSuspiciousHeaders = checkSuspiciousHeaders(details.responseHeaders);
-
-    if (hasSuspiciousHeaders) {
-      chrome.tabs.sendMessage(details.tabId, {action: "suspiciousHeadersDetected"})
-        .catch(error => console.error('Error sending message:', error));
-    }
-
-    return {responseHeaders: details.responseHeaders};
-  },
-  {urls: ["<all_urls>"]},
-  ["responseHeaders"]
-);
-
 const memoizedAnalyzeURL = memoize((url) => {
   const isSuspicious = checkSuspiciousURL(url);
   return {isSuspicious, timestamp: Date.now()};
@@ -160,7 +214,7 @@ class ContentAnalyzer {
     this.analysisQueue = new Set();
     this.isProcessing = false;
     this.lastAnalysis = 0;
-    this.minAnalysisInterval = 300; // ms between analyses
+    this.minAnalysisInterval = 300; 
   }
 
   queueForAnalysis(element) {
@@ -296,3 +350,20 @@ function setupObserver() {
 
   contentAnalyzer.queueForAnalysis(document.documentElement);
 }
+
+chrome.action.onClicked.addListener((tab) => {
+  chrome.tabs.create({
+    url: chrome.runtime.getURL('main.html'),
+    active: true
+  });
+});
+
+
+chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
+  if (request.action === "whitelistUpdated") {
+    const result = await chrome.storage.local.get('whitelist');
+    const whitelist = result.whitelist || [];
+    console.log('Whitelist updated:', whitelist);
+    return true;
+  }
+});
diff --git a/SmuggleShield/content.js b/SmuggleShield/content.js
index 3fc210c..32b9ffb 100644
--- a/SmuggleShield/content.js
+++ b/SmuggleShield/content.js
@@ -1,3 +1,5 @@
+const mlDetector = new MLDetector();
+
 class HTMLSmugglingBlocker {
   constructor() {
     this.blocked = false;    
@@ -73,6 +75,57 @@ class HTMLSmugglingBlocker {
 
     this.patternsByWeight = this.groupPatternsByWeight();
     this.setupListeners();
+
+    this.mlEnabled = true;
+    this.feedbackDelay = 2000;
+    this.isUrlWhitelisted = false;
+    this.checkInitialWhitelist();
+  }
+
+  async checkInitialWhitelist() {
+    try {
+      const hostname = window.location.hostname;
+      const result = await chrome.storage.local.get('whitelist');
+      const whitelist = result.whitelist || [];
+      console.log('Checking whitelist for:', hostname, 'Whitelist:', whitelist);
+      this.isUrlWhitelisted = whitelist.includes(hostname);
+      console.log('Is URL whitelisted?', this.isUrlWhitelisted);
+      if (this.isUrlWhitelisted) {
+        this.setWhitelistMode(true);
+      }
+    } catch (error) {
+      console.error('Error checking whitelist:', error);
+      this.isUrlWhitelisted = false;
+    }
+  }
+
+  setWhitelistMode(enabled) {
+    this.isUrlWhitelisted = enabled;
+    this.blocked = false;
+    
+    if (enabled) {
+      // Override all blocking methods
+      this.analyzeContent = () => {
+        console.log('Skipping analysis - URL is whitelisted');
+        return;
+      };
+      this.handleSuspiciousContent = () => {
+        console.log('Skipping blocking - URL is whitelisted');
+        return;
+      };
+      this.removeSuspiciousElements = () => 0;
+      this.disableInlineScripts = () => 0;
+      this.neutralizeSVGScripts = () => 0;
+      this.removeEmbedElements = () => 0;
+      this.removeElement = () => {};
+      
+      
+      this.allowContent();
+      
+      document.querySelectorAll('script').forEach(script => {
+        script.removeAttribute('type');
+      });
+    }
   }
 
   categorizePattern(pattern) {
@@ -103,19 +156,43 @@ class HTMLSmugglingBlocker {
   }
 
   setupListeners() {
-    this.analyzeContent();
-
+    
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-      if (request.action === "analyzeContent") {
+      if (request.action === "setWhitelisted") {
+        console.log('Received whitelist status:', request.value);
+        this.setWhitelistMode(request.value);
+        return;
+      }
+      
+      if (request.action === "whitelistUpdated") {
+        this.checkInitialWhitelist();
+      } else if (request.action === "analyzeContent") {
         this.analyzeContent();
       } else if (request.action === "getBlockedStatus") {
         sendResponse({blocked: this.blocked});
       } else if (request.action === "suspiciousHeadersDetected") {
         this.handleSuspiciousHeaders();
+      } else if (request.action === "getMLMetrics") {
+        const mlReport = mlDetector.monitor.getPerformanceReport();
+        sendResponse({
+          metrics: {
+            accuracy: mlReport.accuracy,
+            totalDetections: mlReport.totalDetections,
+            averageConfidence: mlReport.averageConfidence,
+            topFeatures: mlReport.topFeatures,
+            recentPerformance: mlReport.recentPerformance
+          }
+        });
+        return true;
       }
     });
 
     this.setupObserver();
+    
+    
+    if (!this.isUrlWhitelisted) {
+      this.analyzeContent();
+    }
   }
 
   setupObserver() {
@@ -131,9 +208,36 @@ class HTMLSmugglingBlocker {
     });
   }
 
-  analyzeContent() {
+  async analyzeContent() {
+    if (this.isUrlWhitelisted) {
+      console.log('URL is whitelisted, skipping analysis');
+      return;
+    }
+    
     const startTime = performance.now();
     const htmlContent = document.documentElement.outerHTML;
+    
+    const patternResult = this.analyzeWithPatterns(htmlContent);
+    
+    const mlResult = this.mlEnabled ? mlDetector.detect(htmlContent) : null;
+    
+    const isSuspicious = patternResult.isSuspicious || (mlResult?.isSmuggling || false);
+    
+    if (isSuspicious) {
+      this.handleSuspiciousContent(patternResult.detectedPatterns);
+      
+      setTimeout(() => {
+        if (this.blocked) {
+          mlDetector.learn(htmlContent, true);
+        }
+      }, this.feedbackDelay);
+    } else {
+      this.blocked = false;
+      this.allowContent();
+      
+      mlDetector.learn(htmlContent, false);
+    }
+    
     const cacheKey = this.getCacheKey(htmlContent);
     
     const cachedResult = this.cache.get(cacheKey);
@@ -183,20 +287,51 @@ class HTMLSmugglingBlocker {
     const analysisTime = performance.now() - startTime;
     this.metrics.analysisTime.push(analysisTime);
 
-    if (score >= this.threshold) {
-      this.handleSuspiciousContent(detectedPatterns);
-      console.debug(`Content blocked after checking ${this.metrics.matchCount} patterns. Analysis time: ${analysisTime.toFixed(2)}ms`);
-    } else {
-      this.blocked = false;
-      this.allowContent();
-    }
-
     if (this.metrics.analysisTime.length % 100 === 0) {
       this.logPerformanceMetrics();
     }
   }
 
+  analyzeWithPatterns(content) {
+    let score = 0;
+    const detectedPatterns = [];
+    
+    const weights = Object.keys(this.patternsByWeight).sort((a, b) => b - a);
+    
+    let shouldTerminate = false;
+
+    for (const weight of weights) {
+      if (shouldTerminate || score >= this.threshold) {
+        break;
+      }
+
+      const patterns = this.patternsByWeight[weight];
+      for (const {pattern, weight: patternWeight} of patterns) {
+        if (pattern.test(content)) {
+          score += patternWeight;
+          detectedPatterns.push(pattern.toString());
+          this.metrics.matchCount++;
+          
+          if (score >= this.threshold) {
+            shouldTerminate = true;
+            break;
+          }
+        }
+      }
+    }
+
+    return {
+      isSuspicious: score >= this.threshold,
+      detectedPatterns
+    };
+  }
+
   handleSuspiciousContent(detectedPatterns) {
+    if (this.isUrlWhitelisted) {
+      console.log('URL is whitelisted, allowing content despite suspicious patterns');
+      return;
+    }
+
     this.blocked = true;
     const elementsRemoved = this.removeSuspiciousElements();
     const scriptsDisabled = this.disableInlineScripts();
@@ -205,6 +340,7 @@ class HTMLSmugglingBlocker {
 
     if (elementsRemoved > 0 || scriptsDisabled > 0 || 
         svgScriptsNeutralized > 0 || embedElementsRemoved > 0) {
+      this.blocked = true;
       this.logWarning(
         elementsRemoved, 
         scriptsDisabled, 
@@ -229,6 +365,10 @@ class HTMLSmugglingBlocker {
   }
 
   removeSuspiciousElements() {
+    if (this.isUrlWhitelisted) {
+      console.log('Skipping element removal - URL is whitelisted');
+      return 0;
+    }
     const suspiciousElements = document.querySelectorAll(
       'a[download][href^="data:"], a[download][href^="blob:"]'
     );
@@ -237,6 +377,10 @@ class HTMLSmugglingBlocker {
   }
 
   disableInlineScripts() {
+    if (this.isUrlWhitelisted) {
+      console.log('Skipping script removal - URL is whitelisted');
+      return 0;
+    }
     const inlineScripts = document.querySelectorAll('script:not([src])');
     console.log(`HTML Smuggling Blocker: Analyzing ${inlineScripts.length} inline scripts`);
     return this.removeElements(inlineScripts, (script) => this.isSuspiciousScript(script.textContent));
@@ -247,12 +391,20 @@ class HTMLSmugglingBlocker {
   }
 
   neutralizeSVGScripts() {
+    if (this.isUrlWhitelisted) {
+      console.log('Skipping SVG script removal - URL is whitelisted');
+      return 0;
+    }
     const svgScripts = document.querySelectorAll('svg script');
     console.log(`HTML Smuggling Blocker: Neutralized ${svgScripts.length} SVG scripts`);
     return this.removeElements(svgScripts);
   }
 
   removeEmbedElements() {
+    if (this.isUrlWhitelisted) {
+      console.log('Skipping embed element removal - URL is whitelisted');
+      return 0;
+    }
     const embedElements = document.querySelectorAll('embed');
     console.log(`HTML Smuggling Blocker: Removed ${embedElements.length} embed elements`);
     return this.removeElements(embedElements);
@@ -269,6 +421,10 @@ class HTMLSmugglingBlocker {
   }
 
   removeElements(elements, condition = () => true) {
+    if (this.isUrlWhitelisted) {
+      console.log('Skipping element removal - URL is whitelisted');
+      return 0;
+    }
     let count = 0;
     elements.forEach(el => {
       if (condition(el)) {
@@ -287,7 +443,7 @@ class HTMLSmugglingBlocker {
 
   allowContent() {
     document.documentElement.style.display = '';
-    console.log("HTML Smuggling Blocker: Content allowed");
+    console.log("Content allowed - whitelist active");
   }
 
   handleSuspiciousHeaders() {
@@ -304,6 +460,25 @@ class HTMLSmugglingBlocker {
       });
     }
   }
+
+  verifyMLSystem() {
+    const testContent = `
+      <script>
+        const blob = new Blob(['suspicious content'], {type: 'application/octet-stream'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'test.bin';
+        a.click();
+      </script>
+    `;
+    
+    const result = mlDetector.detect(testContent);
+    console.log('ML Test Result:', result);
+    console.log('ML Performance:', mlDetector.monitor.getPerformanceReport());
+
+    return result;
+  }
 }
 
 new HTMLSmugglingBlocker();
diff --git a/SmuggleShield/main.html b/SmuggleShield/main.html
new file mode 100644
index 0000000..71a213a
--- /dev/null
+++ b/SmuggleShield/main.html
@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>SmuggleShield Dashboard</title>
+    <style>
+        :root {
+            
+            --bg-primary: #000000;
+            --bg-secondary: #1c1c1c;
+            --text-primary: #ffffff;
+            --text-secondary: #888888;
+            --border-color: rgba(255, 255, 255, 0.1);
+            --hover-bg: #242424;
+        }
+
+        
+        :root[data-theme="light"] {
+            --bg-primary: #ffffff;
+            --bg-secondary: #f5f5f5;
+            --text-primary: #000000;
+            --text-secondary: #666666;
+            --border-color: rgba(0, 0, 0, 0.1);
+            --hover-bg: #eeeeee;
+        }
+
+        
+        .theme-toggle {
+            background: transparent;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 8px 12px;
+            border-radius: 20px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: var(--text-primary);
+            font-size: 14px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            margin: 0 auto;
+            width: fit-content;
+        }
+
+        .theme-toggle:hover {
+            background-color: rgba(0, 0, 0, 0.8);
+            border-color: rgba(255, 255, 255, 0.3);
+        }
+
+        .theme-toggle svg {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+        }
+
+        
+        :root[data-theme="light"] .theme-toggle {
+            background-color: rgba(255, 255, 255, 0.9);
+            border-color: rgba(0, 0, 0, 0.1);
+            color: var(--text-primary);
+        }
+
+        :root[data-theme="light"] .theme-toggle:hover {
+            background-color: rgba(255, 255, 255, 1);
+            border-color: rgba(0, 0, 0, 0.2);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Consolas', 'Courier New', monospace;
+        }
+
+        body {
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            display: flex;
+        }
+
+        .container {
+            display: flex;
+            width: 100%;
+            min-height: 100vh;
+        }
+
+        .sidebar {
+            width: 280px;
+            background-color: var(--bg-secondary);
+            padding: 20px;
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            position: fixed;
+            height: 100vh;
+        }
+
+        .main-content {
+            flex: 1;
+            margin-left: 280px;
+            padding: 20px;
+            background: var(--bg-primary);
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding: 10px;
+            margin-bottom: 40px;
+        }
+
+        .logo {
+            width: 32px;
+            height: 32px;
+        }
+
+        .title {
+            color: var(--text-primary);
+            font-size: 24px;
+            font-weight: normal;
+        }
+
+        .nav-menu {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .nav-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+        }
+
+        .nav-item:hover {
+            background-color: var(--hover-bg);
+            color: var(--text-primary);
+        }
+
+        .nav-item.active {
+            background-color: var(--hover-bg);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+
+        .section {
+            background-color: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .section-title {
+            color: var(--text-primary);
+            font-size: 20px;
+            margin-bottom: 20px;
+            font-weight: normal;
+        }
+
+        .url-input {
+            display: flex;
+            gap: 10px;
+            margin: 20px 0;
+        }
+
+        input[type="url"] {
+            flex: 1;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            padding: 10px;
+            font-family: inherit;
+            border-radius: 4px;
+        }
+
+        input[type="url"]:focus {
+            outline: none;
+            border-color: var(--text-primary);
+        }
+
+        button {
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+            padding: 10px 20px;
+            cursor: pointer;
+            font-family: inherit;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+        }
+
+        button:hover {
+            background: var(--hover-bg);
+        }
+
+        .url-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .url-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+        }
+
+        .url-item:hover {
+            background: var(--hover-bg);
+        }
+
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+        }
+
+        .metric-card {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            padding: 15px;
+            border-radius: 4px;
+        }
+
+        .metric-card:hover {
+            background: var(--hover-bg);
+        }
+
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 10px 20px;
+            border-radius: 4px;
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: all 0.3s ease;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+        }
+
+        .notification.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        .footer {
+            padding: 20px;
+            text-align: center;
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+
+        .footer a {
+            color: var(--text-primary);
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        @media (max-width: 768px) {
+            .sidebar {
+                display: none;
+            }
+            .main-content {
+                margin-left: 0;
+            }
+        }
+
+        .footer-container {
+            margin-top: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            padding-bottom: 20px;
+        }
+
+        .footer-line {
+            border-top: 1px solid var(--border-color);
+            width: 100%;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sidebar">
+            <div class="header">
+                <img src="icon/SmuggleShield.png" alt="SmuggleShield Logo" class="logo">
+                <h1 class="title">SmuggleShield</h1>
+            </div>
+            <nav class="nav-menu">
+                <div class="nav-item active" data-section="whitelist">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                    </svg>
+                    Whitelist Manager
+                </div>
+                <div class="nav-item" data-section="metrics">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 12h-4l-3 9L9 3l-3 9H2"/>
+                    </svg>
+                    ML Metrics
+                </div>
+                <div class="nav-item" data-section="logs">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                    </svg>
+                    Activity Logs
+                </div>
+            </nav>
+            <div class="footer-container">
+                <button class="theme-toggle" id="themeToggle" title="Toggle theme">
+                    <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                    </svg>
+                    <span id="themeText">🌙 Light Mode</span>
+                </button>
+                <div class="footer-line"></div>
+                <div class="footer">
+                    © 2024 SmuggleShield by 
+                    <a href="https://x.com/RandomDhiraj" target="_blank">@RandomDhiraj</a>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-content">
+            <div class="section" id="whitelist-section">
+                <h2 class="section-title">Whitelisted URLs</h2>
+                <p>URLs added here will bypass SmuggleShield's security checks.</p>
+                
+                <div class="url-input">
+                    <input type="url" id="urlInput" placeholder="Enter URL (e.g., https://example.com)" />
+                    <button id="addUrl">Add URL</button>
+                </div>
+
+                <div id="urlList" class="url-list">
+                    
+                </div>
+            </div>
+
+            <div class="section" id="metrics-section" style="display: none;">
+                <h2 class="section-title">ML Performance Metrics</h2>
+                <div class="metrics-grid" id="ml-metrics">
+                    
+                </div>
+            </div>
+
+            <div class="section" id="logs-section" style="display: none;">
+                <h2 class="section-title">Activity Logs</h2>
+                <button id="export-logs">Export Blocked Content Logs</button>
+                <div id="logs-content">
+                    
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="notification" class="notification"></div>
+
+    <script src="main.js"></script>
+</body>
+</html> 
\ No newline at end of file
diff --git a/SmuggleShield/main.js b/SmuggleShield/main.js
new file mode 100644
index 0000000..30124a1
--- /dev/null
+++ b/SmuggleShield/main.js
@@ -0,0 +1,320 @@
+class DashboardManager {
+    constructor() {
+        this.initializeComponents();
+        this.setupEventListeners();
+        this.loadInitialData();
+        this.initializeTheme();
+        this.ensureWhitelistFunctionality();
+    }
+
+    initializeComponents() {
+        this.navItems = document.querySelectorAll('.nav-item');
+        this.sections = {
+            whitelist: document.getElementById('whitelist-section'),
+            metrics: document.getElementById('metrics-section'),
+            logs: document.getElementById('logs-section')
+        };
+
+        this.urlInput = document.getElementById('urlInput');
+        this.addButton = document.getElementById('addUrl');
+        this.urlList = document.getElementById('urlList');
+        this.notification = document.getElementById('notification');
+
+        this.exportButton = document.getElementById('export-logs');
+
+        this.mlMetricsDiv = document.getElementById('ml-metrics');
+
+        this.themeToggle = document.getElementById('themeToggle');
+        this.themeText = document.getElementById('themeText');
+        this.sunIcon = document.querySelector('.sun-icon');
+        this.moonIcon = document.querySelector('.moon-icon');
+    }
+
+    initializeTheme() {
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        this.setTheme(savedTheme);
+    }
+
+    setTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        
+        if (theme === 'light') {
+            this.themeText.textContent = 'Dark Mode';
+            this.sunIcon.style.display = 'block';
+            this.moonIcon.style.display = 'none';
+        } else {
+            this.themeText.textContent = 'Light Mode';
+            this.sunIcon.style.display = 'none';
+            this.moonIcon.style.display = 'block';
+        }
+    }
+
+    toggleTheme() {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        this.setTheme(newTheme);
+    }
+
+    setupEventListeners() {
+        this.navItems.forEach(item => {
+            item.addEventListener('click', () => this.switchSection(item.dataset.section));
+        });
+
+        this.addButton.addEventListener('click', () => this.addUrl());
+        this.urlInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.addUrl();
+        });
+
+        this.exportButton.addEventListener('click', () => this.handleExport());
+
+        this.themeToggle.addEventListener('click', () => this.toggleTheme());
+    }
+
+    switchSection(sectionId) {
+        this.navItems.forEach(item => {
+            item.classList.toggle('active', item.dataset.section === sectionId);
+        });
+
+        Object.entries(this.sections).forEach(([id, element]) => {
+            element.style.display = id === sectionId ? 'block' : 'none';
+        });
+    }
+
+    async loadInitialData() {
+        await this.loadWhitelist();
+        this.updateMLMetrics();
+        setInterval(() => this.updateMLMetrics(), 5000);
+    }
+
+    async loadWhitelist() {
+        try {
+            const result = await chrome.storage.local.get('whitelist');
+            const whitelist = result.whitelist || [];
+            this.renderUrlList(whitelist);
+            console.log('Current whitelist:', whitelist);
+        } catch (error) {
+            this.showNotification('Error loading whitelist', 'error');
+            console.error('Error loading whitelist:', error);
+        }
+    }
+
+    async addUrl() {
+        const url = this.urlInput.value.trim();
+        
+        if (!url) {
+            this.showNotification('Please enter a URL', 'error');
+            return;
+        }
+
+        try {
+            const urlObj = new URL(url);
+            const hostname = urlObj.hostname;
+
+            const result = await chrome.storage.local.get('whitelist');
+            const whitelist = result.whitelist || [];
+
+            if (whitelist.includes(hostname)) {
+                this.showNotification('This domain is already whitelisted', 'error');
+                return;
+            }
+
+            whitelist.push(hostname);
+            
+            if (await this.saveWhitelist(whitelist)) {
+                this.renderUrlList(whitelist);
+                this.urlInput.value = '';
+                this.showNotification('URL added to whitelist', 'success');
+            }
+        } catch (error) {
+            this.showNotification('Please enter a valid URL', 'error');
+        }
+    }
+
+    async removeUrl(hostname) {
+        try {
+            const result = await chrome.storage.local.get('whitelist');
+            const whitelist = result.whitelist || [];
+            const newWhitelist = whitelist.filter(url => url !== hostname);
+            
+            if (await this.saveWhitelist(newWhitelist)) {
+                this.renderUrlList(newWhitelist);
+                this.showNotification('URL removed from whitelist', 'success');
+            }
+        } catch (error) {
+            this.showNotification('Error removing URL', 'error');
+        }
+    }
+
+    async saveWhitelist(whitelist) {
+        try {
+            await chrome.storage.local.set({ whitelist });
+            
+            const tabs = await chrome.tabs.query({});
+            for (const tab of tabs) {
+                try {
+                    await chrome.tabs.sendMessage(tab.id, { 
+                        action: "whitelistUpdated" 
+                    });
+                    
+                    const tabHostname = new URL(tab.url).hostname;
+                    if (whitelist.includes(tabHostname)) {
+                        await chrome.tabs.reload(tab.id);
+                    }
+                } catch (error) {
+                    console.debug('Error updating tab:', error);
+                }
+            }
+            
+            return true;
+        } catch (error) {
+            this.showNotification('Error saving whitelist', 'error');
+            return false;
+        }
+    }
+
+    renderUrlList(whitelist) {
+        this.urlList.innerHTML = '';
+        
+        if (whitelist.length === 0) {
+            this.urlList.innerHTML = '<p class="empty-list">No URLs whitelisted</p>';
+            return;
+        }
+
+        whitelist.forEach(hostname => {
+            const urlItem = document.createElement('div');
+            urlItem.className = 'url-item';
+            
+            const urlText = document.createElement('span');
+            urlText.textContent = hostname;
+            
+            const removeButton = document.createElement('button');
+            removeButton.textContent = 'Remove';
+            removeButton.addEventListener('click', () => this.removeUrl(hostname));
+            
+            urlItem.appendChild(urlText);
+            urlItem.appendChild(removeButton);
+            this.urlList.appendChild(urlItem);
+        });
+    }
+
+    async updateMLMetrics() {
+        try {
+            const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
+            
+            if (!tab) {
+                this.mlMetricsDiv.innerHTML = '<p>Error: No active tab</p>';
+                return;
+            }
+
+            const response = await chrome.tabs.sendMessage(tab.id, {
+                action: "getMLMetrics"
+            });
+            
+            if (response?.metrics) {
+                const metrics = response.metrics;
+                this.renderMLMetrics(metrics);
+            } else {
+                this.mlMetricsDiv.innerHTML = '<p>No metrics data available</p>';
+            }
+        } catch (error) {
+            console.error('Error updating ML metrics:', error);
+            this.mlMetricsDiv.innerHTML = `<p>Error loading ML metrics: ${error.message}</p>`;
+        }
+    }
+
+    renderMLMetrics(metrics) {
+        this.mlMetricsDiv.innerHTML = `
+            <div class="metric-card">
+                <h3>Model Accuracy</h3>
+                <div class="metric-value">${(metrics.accuracy * 100).toFixed(2)}%</div>
+            </div>
+            <div class="metric-card">
+                <h3>Total Detections</h3>
+                <div class="metric-value">${metrics.totalDetections}</div>
+            </div>
+            <div class="metric-card">
+                <h3>Average Confidence</h3>
+                <div class="metric-value">${(metrics.averageConfidence * 100).toFixed(2)}%</div>
+            </div>
+            <div class="metric-card">
+                <h3>Top Features</h3>
+                <ul>
+                    ${metrics.topFeatures.map(f => 
+                        `<li>${f.feature}: ${(f.importance * 100).toFixed(2)}%</li>`
+                    ).join('')}
+                </ul>
+            </div>
+        `;
+    }
+
+    async handleExport() {
+        try {
+            this.exportButton.disabled = true;
+            this.exportButton.textContent = 'Exporting...';
+
+            const response = await new Promise((resolve, reject) => {
+                chrome.runtime.sendMessage({action: "exportLogs"}, (response) => {
+                    if (chrome.runtime.lastError) {
+                        reject(chrome.runtime.lastError);
+                    } else {
+                        resolve(response);
+                    }
+                });
+            });
+
+            if (!response?.logs?.length) {
+                this.showNotification('No logs available to export', 'warning');
+                return;
+            }
+
+            await this.processExport(response.logs);
+            this.showNotification('Logs exported successfully!', 'success');
+        } catch (error) {
+            console.error('Export failed:', error);
+            this.showNotification(`Export failed: ${error.message}`, 'error');
+        } finally {
+            this.exportButton.disabled = false;
+            this.exportButton.textContent = 'Export Blocked Content Logs';
+        }
+    }
+
+    async processExport(logs) {
+        const blob = new Blob([JSON.stringify(logs, null, 2)], {
+            type: "application/json"
+        });
+        
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `smuggleshield_logs_${new Date().toISOString()}.json`;
+        
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    showNotification(message, type) {
+        this.notification.textContent = message;
+        this.notification.className = `notification ${type}`;
+        this.notification.classList.add('show');
+        
+        setTimeout(() => {
+            this.notification.classList.remove('show');
+        }, 3000);
+    }
+
+    async ensureWhitelistFunctionality() {
+        const result = await chrome.storage.local.get('whitelist');
+        if (!result.whitelist) {
+            await chrome.storage.local.set({ whitelist: [] });
+        }
+        
+        await this.loadWhitelist();
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    new DashboardManager();
+}); 
\ No newline at end of file
diff --git a/SmuggleShield/manifest.json b/SmuggleShield/manifest.json
index 87994b9..c9069e6 100644
--- a/SmuggleShield/manifest.json
+++ b/SmuggleShield/manifest.json
@@ -4,10 +4,17 @@
   "version": "2.0",
   "description": "Basic protection against HTML smuggling attempts.",
   "author": "Dhiraj Mishra (@RandomDhiraj)",
+  "options_ui": {
+    "page": "main.html",
+    "open_in_tab": true
+  },
   "permissions": [
     "webRequest",
     "storage",
-    "tabs"
+    "tabs",
+    "unlimitedStorage",
+    "webNavigation",
+    "webRequest.filterResponseData"
   ],
   "host_permissions": [
     "<all_urls>"
@@ -18,12 +25,11 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["content.js"],
+      "js": ["ml_monitor.js", "ml_detector.js", "content.js"],
       "run_at": "document_start"
     }
   ],
   "action": {
-    "default_popup": "popup.html",
     "default_icon": {
       "16": "icon/SmuggleShield.png",
       "48": "icon/SmuggleShield.png",
@@ -38,5 +44,9 @@
   "content_security_policy": {
     "extension_pages": "script-src 'self'; object-src 'self'; style-src 'self' 'unsafe-inline'"
   },
+  "web_accessible_resources": [{
+    "resources": ["icon/SmuggleShield.png"],
+    "matches": ["<all_urls>"]
+  }],
   "incognito": "split"
 }
diff --git a/SmuggleShield/ml_detector.js b/SmuggleShield/ml_detector.js
new file mode 100644
index 0000000..9645538
--- /dev/null
+++ b/SmuggleShield/ml_detector.js
@@ -0,0 +1,128 @@
+class MLDetector {
+  constructor() {
+    this.monitor = new MLMonitor();
+    this.features = {
+      patterns: new Map(),
+      contextual: new Map(),
+      weights: new Map()
+    };
+    
+    this.threshold = 0.75;
+    this.learningRate = 0.1;
+    this.minSamples = 5;
+    
+    this.loadModel();
+  }
+
+  async loadModel() {
+    try {
+      const data = await new Promise(resolve => {
+        chrome.storage.local.get(['mlModel'], result => resolve(result.mlModel));
+      });
+      
+      if (data?.mlModel) {
+        this.features = this.deserializeModel(data.mlModel);
+      }
+    } catch (error) {
+      console.error('Error loading ML model:', error);
+    }
+  }
+
+  async saveModel() {
+    try {
+      await chrome.storage.local.set({
+        mlModel: this.serializeModel()
+      });
+    } catch (error) {
+      console.error('Error saving ML model:', error);
+    }
+  }
+
+  serializeModel() {
+    return {
+      patterns: Array.from(this.features.patterns.entries()),
+      contextual: Array.from(this.features.contextual.entries()),
+      weights: Array.from(this.features.weights.entries())
+    };
+  }
+
+  deserializeModel(data) {
+    return {
+      patterns: new Map(data.patterns),
+      contextual: new Map(data.contextual),
+      weights: new Map(data.weights)
+    };
+  }
+
+  extractFeatures(content) {
+    const features = new Map();
+    
+    features.set('base64Length', (content.match(/[A-Za-z0-9+/=]{100,}/g) || []).length);
+    features.set('blobUsage', (content.match(/new\s+blob/gi) || []).length);
+    features.set('downloadAttr', (content.match(/download=["'][^"']*["']/gi) || []).length);
+    
+    features.set('scriptDensity', content.split('script').length / content.length);
+    features.set('encodingFunctions', (content.match(/atob|btoa|encode|decode/gi) || []).length);
+    features.set('binaryManipulation', (content.match(/ArrayBuffer|Uint8Array|DataView/gi) || []).length);
+    
+    return features;
+  }
+
+  calculateScore(features) {
+    let score = 0;
+    let totalWeight = 0;
+    
+    for (const [feature, value] of features) {
+      const weight = this.features.weights.get(feature) || 1;
+      const threshold = this.features.patterns.get(feature) || 0;
+      
+      if (value > threshold) {
+        score += weight;
+      }
+      totalWeight += weight;
+    }
+    
+    return totalWeight > 0 ? score / totalWeight : 0;
+  }
+
+  async learn(content, isSmuggling) {
+    const features = this.extractFeatures(content);
+    
+    for (const [feature, value] of features) {
+
+      const currentThreshold = this.features.patterns.get(feature) || 0;
+      const samples = this.features.contextual.get(feature) || 0;
+      
+      const newThreshold = (currentThreshold * samples + value) / (samples + 1);
+      this.features.patterns.set(feature, newThreshold);
+      this.features.contextual.set(feature, samples + 1);
+      
+      if (samples >= this.minSamples) {
+        const currentWeight = this.features.weights.get(feature) || 1;
+        const correlation = isSmuggling ? 1 : -1;
+        const newWeight = Math.max(0.1, currentWeight + (this.learningRate * correlation));
+        this.features.weights.set(feature, newWeight);
+      }
+    }
+    
+    this.monitor.recordValidation(isSmuggling);
+    this.monitor.recordLearningProgress({
+      features: this.features,
+      threshold: this.threshold
+    });
+    
+    await this.saveModel();
+  }
+
+  detect(content) {
+    const features = this.extractFeatures(content);
+    const score = this.calculateScore(features);
+    const prediction = {
+      isSmuggling: score >= this.threshold,
+      confidence: score,
+      features: Object.fromEntries(features)
+    };
+    this.monitor.recordPrediction(prediction, Object.fromEntries(features));
+    return prediction;
+  }
+} 
\ No newline at end of file
diff --git a/SmuggleShield/ml_monitor.js b/SmuggleShield/ml_monitor.js
new file mode 100644
index 0000000..aa25270
--- /dev/null
+++ b/SmuggleShield/ml_monitor.js
@@ -0,0 +1,140 @@
+class MLMonitor {
+  constructor() {
+    this.metrics = {
+      totalDetections: 0,
+      truePositives: 0,
+      falsePositives: 0,
+      modelAccuracy: 0,
+      confidenceScores: [],
+      featureImportance: new Map([
+        ['base64Length', { totalImpact: 0, occurrences: 0 }],
+        ['blobUsage', { totalImpact: 0, occurrences: 0 }],
+        ['downloadAttr', { totalImpact: 0, occurrences: 0 }],
+        ['scriptDensity', { totalImpact: 0, occurrences: 0 }],
+        ['encodingFunctions', { totalImpact: 0, occurrences: 0 }],
+        ['binaryManipulation', { totalImpact: 0, occurrences: 0 }]
+      ]),
+      learningProgress: []
+    };
+    
+    this.metrics.learningProgress.push({
+      timestamp: Date.now(),
+      accuracy: 0,
+      featuresLearned: 0,
+      threshold: 0.75
+    });
+    
+    this.loadMetrics();
+  }
+
+  async loadMetrics() {
+    try {
+      const data = await new Promise(resolve => {
+        chrome.storage.local.get(['mlMetrics'], result => resolve(result.mlMetrics));
+      });
+      if (data?.mlMetrics) {
+        this.metrics = {...this.metrics, ...data.mlMetrics};
+      }
+    } catch (error) {
+      console.error('Error loading ML metrics:', error);
+    }
+  }
+
+  async saveMetrics() {
+    try {
+      await chrome.storage.local.set({
+        mlMetrics: this.metrics
+      });
+    } catch (error) {
+      console.error('Error saving ML metrics:', error);
+    }
+  }
+
+  recordPrediction(prediction, features) {
+    this.metrics.totalDetections++;
+    this.metrics.confidenceScores.push(prediction.confidence);
+    
+    for (const [feature, value] of Object.entries(features)) {
+      const current = this.metrics.featureImportance.get(feature) || {
+        totalImpact: 0,
+        occurrences: 0
+      };
+      current.totalImpact += value * prediction.confidence;
+      current.occurrences++;
+      this.metrics.featureImportance.set(feature, current);
+    }
+
+    if (this.metrics.confidenceScores.length > 1000) {
+      this.metrics.confidenceScores.shift();
+    }
+
+    this.saveMetrics();
+  }
+
+  recordValidation(wasCorrect) {
+    if (wasCorrect) {
+      this.metrics.truePositives++;
+    } else {
+      this.metrics.falsePositives++;
+    }
+    
+    this.updateAccuracy();
+    this.saveMetrics();
+  }
+
+  updateAccuracy() {
+    const total = this.metrics.truePositives + this.metrics.falsePositives;
+    this.metrics.modelAccuracy = total > 0 ? 
+      this.metrics.truePositives / total : 0;
+  }
+
+  recordLearningProgress(modelState) {
+    this.metrics.learningProgress.push({
+      timestamp: Date.now(),
+      accuracy: this.metrics.modelAccuracy,
+      featuresLearned: modelState.features.patterns.size,
+      threshold: modelState.threshold
+    });
+
+    if (this.metrics.learningProgress.length > 100) {
+      this.metrics.learningProgress.shift();
+    }
+
+    this.saveMetrics();
+  }
+
+  getPerformanceReport() {
+    return {
+      accuracy: this.metrics.modelAccuracy,
+      totalDetections: this.metrics.totalDetections,
+      averageConfidence: this.getAverageConfidence(),
+      topFeatures: this.getTopFeatures(5),
+      learningProgress: this.metrics.learningProgress,
+      recentPerformance: this.getRecentPerformance()
+    };
+  }
+
+  getAverageConfidence() {
+    return this.metrics.confidenceScores.length > 0 ?
+      this.metrics.confidenceScores.reduce((a, b) => a + b, 0) / 
+      this.metrics.confidenceScores.length : 0;
+  }
+
+  getTopFeatures(n) {
+    return Array.from(this.metrics.featureImportance.entries())
+      .map(([feature, {totalImpact, occurrences}]) => ({
+        feature,
+        importance: totalImpact / occurrences
+      }))
+      .sort((a, b) => b.importance - a.importance)
+      .slice(0, n);
+  }
+
+  getRecentPerformance() {
+    const recent = this.metrics.learningProgress.slice(-10);
+    return {
+      accuracyTrend: recent.map(p => p.accuracy),
+      featureGrowth: recent.map(p => p.featuresLearned)
+    };
+  }
+} 
\ No newline at end of file
diff --git a/SmuggleShield/popup.html b/SmuggleShield/popup.html
deleted file mode 100644
index ccedc9d..0000000
--- a/SmuggleShield/popup.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SmuggleShield (Prevents HTML Smuggling)</title>
-    <style>
-        body {
-            font-family: 'Consolas', 'Courier New', monospace;
-            width: 320px;
-            padding: 20px;
-            background-color: #000000;
-            color: #ffffff;
-            line-height: 1.6;
-            margin: 0;
-        }
-        h2 {
-            margin-top: 0;
-            color: #ffffff;
-            font-size: 24px;
-            text-align: center;
-            margin-bottom: 20px;
-            font-weight: 600;
-        }
-        .info-section {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: #1a1a1a;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(255,255,255,0.1);
-        }
-        .info-section h3 {
-            color: #ffffff;
-            margin-top: 0;
-            font-size: 18px;
-            font-weight: 600;
-        }
-        .info-section p {
-            margin-bottom: 10px;
-            font-size: 14px;
-            color: #cccccc;
-        }
-        #export-logs {
-            margin-top: 20px;
-            width: 100%;
-            padding: 12px;
-            background-color: #333333;
-            color: #ffffff;
-            border: none;
-            cursor: pointer;
-            border-radius: 25px;
-            font-size: 14px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            font-family: 'Consolas', 'Courier New', monospace;
-            box-shadow: 0 2px 4px rgba(255,255,255,0.1);
-        }
-        #export-logs:hover {
-            background-color: #4d4d4d;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(255,255,255,0.2);
-        }
-        .copyright {
-            font-size: 12px;
-            color: #808080;
-            text-align: center;
-            margin-top: 15px;
-        }
-        .notification {
-            position: absolute;
-            top: 10px;
-            left: 50%;
-            transform: translateX(-50%) translateY(0);
-            width: 280px;
-            padding: 12px;
-            border-radius: 4px;
-            color: white;
-            text-align: center;
-            opacity: 0;
-            z-index: 1000;
-            transition: all 0.3s ease-out;
-        }
-        .notification.show {
-            opacity: 1;
-            transform: translateX(-50%) translateY(10px);
-        }
-        .notification.fade-out {
-            opacity: 0;
-            transform: translateX(-50%) translateY(-10px);
-        }
-        .notification.success { background-color: #4CAF50; }
-        .notification.error { background-color: #f44336; }
-        .notification.warning { background-color: #ff9800; }
-    </style>
-</head>
-<body>
-    <h2>SmuggleShield</h2>
-    
-    <div class="info-section">
-        <h3>Protection against HTML Smuggling</h3>
-        <p>This extension protects against basic HTML smuggling attempts by analyzing page content and downloads.</p>
-    </div>
-
-    <button id="export-logs">Export Blocked Content Logs</button>
-
-    <p class="copyright">© Dhiraj Mishra (@RandomDhiraj)</p>
-
-    <script src="popup.js"></script>
-</body>
-</html>
diff --git a/SmuggleShield/popup.js b/SmuggleShield/popup.js
deleted file mode 100644
index 0791ac0..0000000
--- a/SmuggleShield/popup.js
+++ /dev/null
@@ -1,235 +0,0 @@
-console.log("Popup script started");
-
-const CacheManager = {
-  cache: new Map(),
-  maxSize: 100,
-  maxAge: 5 * 60 * 1000,
-  head: null,
-  tail: null,
-
-  createNode(key, value) {
-    return {
-      key,
-      value,
-      timestamp: Date.now(),
-      prev: null,
-      next: null
-    };
-  },
-
-  moveToFront(node) {
-    if (node === this.head) return;
-
-    const prev = node.prev;
-    const next = node.next;
-
-    if (prev) prev.next = next;
-    if (next) next.prev = prev;
-    if (this.tail === node) this.tail = prev;
-
-    node.next = this.head;
-    node.prev = null;
-    if (this.head) this.head.prev = node;
-    this.head = node;
-    if (!this.tail) this.tail = node;
-  },
-
-  set(key, value) {
-    let node = this.cache.get(key);
-    
-    if (node) {
-      node.value = value;
-      node.timestamp = Date.now();
-      this.moveToFront(node);
-      return;
-    }
-
-    node = this.createNode(key, value);
-    
-    if (this.cache.size >= this.maxSize) {
-      this.cache.delete(this.tail.key);
-      this.tail = this.tail.prev;
-      if (this.tail) this.tail.next = null;
-    }
-
-    this.cache.set(key, node);
-    
-    if (!this.head) {
-      this.head = node;
-      this.tail = node;
-    } else {
-      node.next = this.head;
-      this.head.prev = node;
-      this.head = node;
-    }
-  },
-
-  get(key) {
-    const node = this.cache.get(key);
-    if (!node) return null;
-
-    if (Date.now() - node.timestamp > this.maxAge) {
-      this.remove(key);
-      return null;
-    }
-
-    this.moveToFront(node);
-    return node.value;
-  },
-
-  remove(key) {
-    const node = this.cache.get(key);
-    if (!node) return;
-
-    if (node.prev) node.prev.next = node.next;
-    if (node.next) node.next.prev = node.prev;
-    if (this.head === node) this.head = node.next;
-    if (this.tail === node) this.tail = node.prev;
-
-    this.cache.delete(key);
-  },
-
-  clear() {
-    this.cache.clear();
-    this.head = null;
-    this.tail = null;
-  },
-
-  cleanup() {
-    const now = Date.now();
-    for (const [key, node] of this.cache) {
-      if (now - node.timestamp > this.maxAge) {
-        this.remove(key);
-      }
-    }
-  }
-};
-
-const cleanupInterval = setInterval(() => CacheManager.cleanup(), 60000);
-
-window.addEventListener('unload', () => {
-  clearInterval(cleanupInterval);
-  CacheManager.clear();
-});
-
-function debounce(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-async function handleExport() {
-  const exportButton = document.getElementById('export-logs');
-  const originalText = exportButton.textContent;
-  
-  try {
-    if (CacheManager.get("logs")) {
-      return processExport(CacheManager.get("logs"));
-    }
-
-    exportButton.disabled = true;
-    exportButton.textContent = 'Exporting...';
-
-    const response = await new Promise((resolve, reject) => {
-      chrome.runtime.sendMessage({action: "exportLogs"}, (response) => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError);
-        } else {
-          resolve(response);
-        }
-      });
-    });
-
-    if (response?.logs) {
-      CacheManager.set("logs", response.logs);
-    }
-
-    await processExport(response?.logs);
-  } catch (error) {
-    console.error('Export failed:', error);
-    showNotification('error', `Export failed: ${error.message}`);
-  } finally {
-    exportButton.disabled = false;
-    exportButton.textContent = originalText;
-  }
-}
-
-async function processExport(logs) {
-  if (!logs?.length) {
-    showNotification('warning', 'No logs available to export.');
-    return;
-  }
-
-  try {
-    const blob = new Blob([JSON.stringify(logs, null, 2)], {
-      type: "application/json"
-    });
-    
-    const url = URL.createObjectURL(blob);
-    
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `smuggleshield_logs_${new Date().toISOString()}.json`;
-    
-    requestAnimationFrame(() => {
-      document.body.appendChild(a);
-      a.click();
-      
-      requestAnimationFrame(() => {
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-      });
-    });
-
-    showNotification('success', 'Logs exported successfully!');
-  } catch (error) {
-    throw new Error(`Failed to process export: ${error.message}`);
-  }
-}
-
-function showNotification(type, message) {
-  const notification = document.createElement('div');
-  notification.className = `notification ${type}`;
-  notification.textContent = message;
-  
-  requestAnimationFrame(() => {
-    document.body.appendChild(notification);
-    
-    notification.offsetHeight;
-    notification.classList.add('show');
-    
-    setTimeout(() => {
-      notification.classList.add('fade-out');
-      setTimeout(() => {
-        if (notification.parentNode) {
-          document.body.removeChild(notification);
-        }
-      }, 300);
-    }, 3000);
-  });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const exportButton = document.getElementById('export-logs');
-  
-  const debouncedExport = debounce(handleExport, 300);
-  
-  exportButton.addEventListener('click', debouncedExport);
-  
-  window.addEventListener('unload', () => {
-    CacheManager.clear();
-  });
-});
-
-setInterval(() => {
-  const stats = CacheManager.getStats();
-  if (stats.size > stats.maxSize * 0.9) {
-    console.debug('Cache nearly full:', stats);
-  }
-}, 300000);