diff --git a/ARSETUP.md b/ARSETUP.md
new file mode 100644
index 00000000..b287154f
--- /dev/null
+++ b/ARSETUP.md
@@ -0,0 +1,254 @@
+# AR Functionality Setup Guide
+
+The InteractiveHtmlBom plugin's AR functionality uses MindAR for image tracking and requires users to provide .mind files for their PCB.
+
+## System Requirements
+
+### Browser and Network Requirements
+
+- **Localhost Access Required**: AR functionality must be accessed via localhost (e.g., `http://localhost:8080/bom.html` or `http://127.0.0.1:8080/bom.html`) or HTTPS. The `file://` protocol cannot access camera.
+- **Internet Connection Required**: AR functionality requires downloading external JavaScript libraries (A-Frame and MindAR) from CDN. Ensure stable internet connection during first load.
+- **Modern Browser**: Supports WebRTC and camera access (Chrome 67+, Firefox 63+, Safari 11+, Edge 79+)
+- **Camera Permission**: Browser must have permission to access device camera for AR tracking
+
+### Hardware Requirements
+
+- **Device Camera**: Built-in or external camera capable of capturing video
+- **Adequate Lighting**: Good lighting conditions for optimal AR tracking performance
+- **Stable Surface**: Recommended to place PCB on stable, non-reflective surface during AR use
+
+## What are .mind files
+
+.mind files are image tracking target files used by MindAR, containing feature point information for AR tracking. You need to create separate .mind files for the front and back sides of your PCB.
+
+## Creating .mind files
+
+### Step 1: Capture PCB Images from KiCad 3D Viewer
+
+**IMPORTANT: You must use KiCad 3D Viewer, following these steps:**
+
+1. **Open KiCad 3D Viewer**:
+   - In PCB Editor, click `View` → `3D Viewer`
+
+2. **Set Orthographic Projection Mode**:
+   - In 3D Viewer, click `View` → `Projection` → `Orthographic`
+   - **CRITICAL: Must disable perspective mode, use orthographic projection**
+
+3. **Capture Front Image**:
+   - Click `View` → `Preset Views` → `Top`
+   - Use mouse wheel to zoom, ensure PCB fills the entire view
+   - **IMPORTANT: Image edges must be tight against PCB, no extra white space**
+   - Take screenshot and save as `pcb_front.png`
+
+4. **Capture Back Image**:
+   - Click `View` → `Preset Views` → `Bottom`
+   - Use mouse wheel to zoom, ensure PCB fills the entire view
+   - **IMPORTANT: Image edges must be tight against PCB, no extra white space**
+   - Take screenshot and save as `pcb_back.png`
+
+### Step 2: Use MindAR Online Tool
+
+1. Visit [MindAR Image Target Creator](https://hiukim.github.io/mind-ar-js-doc/tools/compile)
+2. Upload `pcb_front.png`
+3. Click "Compile" to generate .mind file
+4. Download the generated .mind file, rename to `pcb_front.mind`
+5. Repeat steps 2-4, upload `pcb_back.png` to create `pcb_back.mind`
+
+### Method 2: Using MindAR CLI Tool
+
+If you have Node.js environment, you can use command line tools:
+
+```bash
+# Install MindAR CLI
+npm install -g @hiukim/mind-ar-js-cli
+
+# Create .mind file for PCB front
+mind-ar-js-cli compile --input pcb_front.png --output pcb_front.mind
+
+# Create .mind file for PCB back
+mind-ar-js-cli compile --input pcb_back.png --output pcb_back.mind
+```
+
+## Configure AR in Plugin
+
+1. Open PCB file in KiCad
+2. Run InteractiveHtmlBom plugin
+3. In settings dialog:
+   - Check "Enable AR functionality"
+   - Select "Front PCB Mind File": choose your front .mind file
+   - Select "Back PCB Mind File": choose your back .mind file
+4. Generate BOM
+
+## AR Functionality Features
+
+### Real-time PCB Overlay
+
+- **Live Camera Feed**: View your physical PCB through device camera
+- **Digital Overlay**: Interactive BOM components overlaid on physical PCB in real-time
+- **Component Highlighting**: Click on physical components to highlight in BOM table and vice versa
+- **Layer Switching**: Toggle between front and back PCB views while maintaining AR tracking
+
+### AR Controls and Interface
+
+- **AR Status Indicator**: Shows current AR tracking status (Searching, Tracking, Lost)
+- **Opacity Control**: Adjust transparency of digital overlay (0-100%) for better visibility
+- **Manual Lock Feature**: Lock AR position to prevent tracking drift during extended use
+- **Layer Toggle**: Switch between front (F) and back (B) PCB layers in AR view
+
+### Manual Lock Functionality
+
+The manual lock feature helps maintain stable AR positioning:
+
+1. **Auto-tracking Mode** (Default): AR system continuously tracks PCB position
+   - Adapts to PCB movement and camera angle changes
+   - May occasionally experience tracking drift or jitter
+
+2. **Manual Lock Mode**: Freeze AR overlay at current position
+   - Click the lock button (🔓) in AR interface to enable lock mode
+   - AR overlay becomes fixed relative to camera view
+   - Useful for detailed component inspection without tracking interference
+   - Click lock button again (🔒) to return to auto-tracking mode
+
+**When to Use Manual Lock:**
+- During detailed component examination
+- When experiencing tracking instability
+- For precise component identification tasks
+- When PCB is in optimal tracking position
+
+## Network and Security Considerations
+
+### Internet Connectivity Requirements
+
+AR functionality requires internet access for:
+
+- **External Libraries**: Downloads A-Frame (WebXR framework) and MindAR libraries from CDN
+- **First Load**: Initial library download (~2-3MB total)
+- **Offline Use**: After first successful load, libraries are cached for offline use
+- **CDN Dependencies**:
+  - A-Frame: `https://aframe.io/releases/1.5.0/aframe.min.js`
+  - MindAR: `https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js`
+
+### Localhost and Protocol Requirements
+
+- **Required**: Must use localhost server (http://localhost or http://127.0.0.1) or HTTPS
+- **File Protocol**: Direct file:// access **NOT SUPPORTED** - cannot access camera
+- **Remote Hosting**: Requires HTTPS for camera access
+- **Security Context**: Camera access requires secure context (HTTPS or localhost only)
+
+### Privacy and Security
+
+- **Local Processing**: All AR processing happens locally in browser
+- **No Data Upload**: PCB images and .mind files remain on your device
+- **Camera Access**: Only used for AR tracking, no recording or transmission
+- **Network Traffic**: Only for downloading required JavaScript libraries
+
+## PCB Image Requirements
+
+**Must use KiCad 3D Viewer screenshots, not physical photos!**
+
+For optimal AR tracking performance, your PCB images must meet:
+
+- **Use KiCad 3D Viewer**: Must be screenshots from 3D Viewer, not physical photos
+- **Orthographic Projection**: Must disable perspective mode, use orthographic projection
+- **Standard Views**: Use Top view (front) and Bottom view (back)
+- **Tight Cropping**: Image edges must be tight against PCB, no extra white space
+- **High Resolution**: Recommend at least 1200x800 pixels
+- **Clear Features**: Include components, silkscreen, traces and other identifiable features
+
+## Troubleshooting
+
+### Issue 1: Unstable AR Tracking
+
+- Check if .mind files are correctly generated
+- Ensure PCB image quality is good
+- Try using under different lighting conditions
+
+### Issue 2: Cannot Start AR Mode
+
+- **Check Internet Connection**: Ensure stable internet for downloading AR libraries
+- **Verify Localhost Access**: Use localhost or HTTPS, file:// protocol NOT supported
+- **Browser Compatibility**: Ensure browser supports WebRTC (camera access)
+- **Camera Permissions**: Grant camera access when prompted by browser
+- **Check .mind Files**: Verify .mind files are correctly selected and valid
+- **Console Errors**: Check browser console (F12) for error messages
+- **HTTPS/Security**: Ensure secure context for camera access
+
+### Issue 3: .mind File Generation Failed
+
+- Ensure using KiCad 3D Viewer screenshots, not physical photos
+- Ensure perspective mode is disabled, using orthographic projection
+- Ensure image edges are tight against PCB, no extra white space
+- Ensure input image format is correct (PNG/JPG)
+- Image should contain sufficient feature points
+- Try adjusting image contrast and clarity
+
+### Issue 4: Common Problems with 3D Viewer Screenshots
+
+- **Perspective mode not disabled**: Must use orthographic projection, not perspective
+- **Incorrect view**: Must use Top and Bottom views, not angled views
+- **Improper zoom**: PCB should fill entire view, edges tight against image boundaries
+- **Low resolution**: Recommend maximizing 3D Viewer window for high-resolution screenshots
+
+### Issue 5: Network and Connectivity Problems
+
+**AR Libraries Not Loading:**
+- Check internet connection stability
+- Verify CDN accessibility (aframe.io and cdn.jsdelivr.net)
+- Try refreshing page to retry library download
+- Check browser console for network errors
+
+**Camera Access Denied:**
+- Ensure using localhost (127.0.0.1) or HTTPS protocol
+- Grant camera permissions when browser prompts
+- Check browser settings for camera access permissions
+- Try different browser if issues persist
+
+**Performance Issues:**
+- Close unnecessary browser tabs to free memory
+- Ensure adequate lighting for camera
+- Use wired internet connection for stability
+- Clear browser cache if experiencing loading issues
+
+### Issue 6: AR Tracking and Lock Problems
+
+**Tracking Instability:**
+- Use manual lock feature during detailed inspection
+- Ensure adequate lighting and contrast
+- Place PCB on non-reflective, stable surface
+- Avoid rapid camera movements
+
+**Manual Lock Not Working:**
+- Ensure AR tracking is active before locking
+- Click lock button when PCB is in optimal position
+- Unlock and re-lock if position drifts
+- Check that lock button is visible in AR interface
+
+## Getting Help
+
+If you still encounter problems:
+
+1. **Check System Requirements**: Verify browser compatibility and internet connection
+2. **Test Basic Functionality**: Ensure camera access and localhost setup work correctly
+3. **Review Console Logs**: Check browser console (F12) for error messages
+4. **Verify KiCad Version**: Recommend KiCad 7.0+ for best compatibility
+5. **Check Plugin Logs**: Review plugin log output for configuration issues
+6. **Submit GitHub Issue**: Report problems on project GitHub page with:
+   - Operating system and version
+   - Browser type and version
+   - KiCad version
+   - Network setup (localhost/file protocol)
+   - Console error messages
+   - Steps to reproduce the issue
+
+## Quick Start Checklist
+
+Before using AR functionality, ensure:
+
+- [ ] Internet connection available for library download
+- [ ] Using localhost (127.0.0.1) or HTTPS protocol access (NOT file://)
+- [ ] Browser supports camera access (Chrome/Firefox/Safari/Edge)
+- [ ] Camera permissions granted
+- [ ] .mind files created from KiCad 3D Viewer screenshots
+- [ ] AR functionality enabled in plugin settings
+- [ ] Both front and back .mind files selected
+- [ ] Good lighting conditions for AR tracking
diff --git a/InteractiveHtmlBom/core/config.py b/InteractiveHtmlBom/core/config.py
index b39d0b67..d0dbea93 100644
--- a/InteractiveHtmlBom/core/config.py
+++ b/InteractiveHtmlBom/core/config.py
@@ -59,6 +59,9 @@ class Config:
     layer_view = layer_view_choices[1]
     compression = True
     open_browser = True
+    enable_ar = False
+    ar_front_mind_file = ''
+    ar_back_mind_file = ''
 
     # General section
     bom_dest_dir = 'bom/'  # This is relative to pcb file directory
@@ -125,6 +128,9 @@ def load_from_ini(self):
         self.layer_view = f.Read('layer_view', self.layer_view)
         self.compression = f.ReadBool('compression', self.compression)
         self.open_browser = f.ReadBool('open_browser', self.open_browser)
+        self.enable_ar = f.ReadBool('enable_ar', self.enable_ar)
+        self.ar_front_mind_file = f.Read('ar_front_mind_file', self.ar_front_mind_file)
+        self.ar_back_mind_file = f.Read('ar_back_mind_file', self.ar_back_mind_file)
 
         f.SetPath('/general')
         self.bom_dest_dir = f.Read('bom_dest_dir', self.bom_dest_dir)
@@ -184,6 +190,9 @@ def save(self, locally):
         f.Write('layer_view', self.layer_view)
         f.WriteBool('compression', self.compression)
         f.WriteBool('open_browser', self.open_browser)
+        f.WriteBool('enable_ar', self.enable_ar)
+        f.Write('ar_front_mind_file', self.ar_front_mind_file)
+        f.Write('ar_back_mind_file', self.ar_back_mind_file)
 
         f.SetPath('/general')
         bom_dest_dir = self.bom_dest_dir
@@ -231,6 +240,9 @@ def set_from_dialog(self, dlg):
             dlg.html.layerDefaultView.Selection]
         self.compression = dlg.html.compressionCheckbox.IsChecked()
         self.open_browser = dlg.html.openBrowserCheckbox.IsChecked()
+        self.enable_ar = dlg.general.enableArCheckbox.IsChecked()
+        self.ar_front_mind_file = dlg.general.arFrontMindFilePicker.Path
+        self.ar_back_mind_file = dlg.general.arBackMindFilePicker.Path
 
         # General
         self.bom_dest_dir = dlg.general.bomDirPicker.Path
@@ -296,6 +308,9 @@ def transfer_to_dialog(self, dlg):
         dlg.general.blacklistEmptyValCheckbox.Value = self.blacklist_empty_val
         dlg.general.includeTracksCheckbox.Value = self.include_tracks
         dlg.general.includeNetsCheckbox.Value = self.include_nets
+        dlg.general.enableArCheckbox.Value = self.enable_ar
+        dlg.general.arFrontMindFilePicker.Path = self.ar_front_mind_file
+        dlg.general.arBackMindFilePicker.Path = self.ar_back_mind_file
 
         # Fields
         dlg.fields.extraDataFilePicker.SetInitialDirectory(
@@ -371,6 +386,12 @@ def add_options(cls, parser, version):
                             action='store_true')
         parser.add_argument('--no-browser', help='Do not launch browser.',
                             action='store_true')
+        parser.add_argument('--enable-ar', help='Enable AR functionality.',
+                            action='store_true')
+        parser.add_argument('--ar-front-mind', help='Path to front PCB mind file.',
+                            type=str, default='')
+        parser.add_argument('--ar-back-mind', help='Path to back PCB mind file.',
+                            type=str, default='')
 
         # General
         parser.add_argument('--dest-dir', default=cls.bom_dest_dir,
@@ -450,6 +471,9 @@ def set_from_args(self, args):
         self.layer_view = args.layer_view
         self.compression = not args.no_compression
         self.open_browser = not args.no_browser
+        self.enable_ar = args.enable_ar
+        self.ar_front_mind_file = args.ar_front_mind
+        self.ar_back_mind_file = args.ar_back_mind
 
         # General
         self.bom_dest_dir = args.dest_dir
diff --git a/InteractiveHtmlBom/core/ibom.py b/InteractiveHtmlBom/core/ibom.py
index 178467cb..ed6a8ad8 100644
--- a/InteractiveHtmlBom/core/ibom.py
+++ b/InteractiveHtmlBom/core/ibom.py
@@ -301,6 +301,7 @@ def get_file_content(file_name):
     html = html.replace('///UTILJS///', get_file_content('util.js'))
     html = html.replace('///RENDERJS///', get_file_content('render.js'))
     html = html.replace('///TABLEUTILJS///', get_file_content('table-util.js'))
+    html = html.replace('///ARJS///', get_file_content('ar.js'))
     html = html.replace('///IBOMJS///', get_file_content('ibom.js'))
     html = html.replace('///USERJS///', get_file_content('user.js'))
     html = html.replace('///USERHEADER///',
@@ -324,6 +325,23 @@ def main(parser, config, logger):
     pcb_file_name = os.path.basename(parser.file_name)
     pcb_file_dir = os.path.dirname(parser.file_name)
 
+    # Validate AR configuration if enabled
+    if config.enable_ar:
+        logger.info("AR functionality enabled")
+
+        # Validate mind files
+        if not config.ar_front_mind_file or not os.path.isfile(config.ar_front_mind_file):
+            logger.error(f"Front PCB mind file not found: {config.ar_front_mind_file}")
+            raise ParsingException("AR functionality requires valid front PCB mind file")
+
+        if not config.ar_back_mind_file or not os.path.isfile(config.ar_back_mind_file):
+            logger.error(f"Back PCB mind file not found: {config.ar_back_mind_file}")
+            raise ParsingException("AR functionality requires valid back PCB mind file")
+
+        logger.info(f"Using AR mind files:")
+        logger.info(f"  Front: {config.ar_front_mind_file}")
+        logger.info(f"  Back: {config.ar_back_mind_file}")
+
     pcbdata, components = parser.parse()
     if not pcbdata and not components:
         raise ParsingException('Parsing failed.')
@@ -331,6 +349,36 @@ def main(parser, config, logger):
     pcbdata["bom"] = generate_bom(components, config)
     pcbdata["ibom_version"] = config.version
 
+    # Add AR configuration to pcbdata if enabled
+    if config.enable_ar:
+        import base64
+
+        ar_config = {
+            "enabled": True,
+            "front_mind_data": None,
+            "back_mind_data": None
+        }
+
+        # Convert front mind file to base64
+        try:
+            with open(config.ar_front_mind_file, 'rb') as f:
+                front_data = f.read()
+                ar_config["front_mind_data"] = base64.b64encode(front_data).decode('utf-8')
+                logger.info(f"Embedded front mind file: {config.ar_front_mind_file}")
+        except Exception as e:
+            logger.error(f"Failed to read front mind file: {str(e)}")
+
+        # Convert back mind file to base64
+        try:
+            with open(config.ar_back_mind_file, 'rb') as f:
+                back_data = f.read()
+                ar_config["back_mind_data"] = base64.b64encode(back_data).decode('utf-8')
+                logger.info(f"Embedded back mind file: {config.ar_back_mind_file}")
+        except Exception as e:
+            logger.error(f"Failed to read back mind file: {str(e)}")
+
+        pcbdata["ar_config"] = ar_config
+
     # build BOM
     bom_file = generate_file(pcb_file_dir, pcb_file_name, pcbdata, config)
 
diff --git a/InteractiveHtmlBom/dialog/dialog_base.py b/InteractiveHtmlBom/dialog/dialog_base.py
index 6b3c5d4a..ec3e0f71 100644
--- a/InteractiveHtmlBom/dialog/dialog_base.py
+++ b/InteractiveHtmlBom/dialog/dialog_base.py
@@ -49,6 +49,8 @@ def __init__( self, parent, id = wx.ID_ANY, pos = wx.DefaultPosition, size = wx.
         self.saveSettingsBtn = wx.Button( self, wx.ID_ANY, u"Save current settings...", wx.DefaultPosition, wx.DefaultSize, 0|wx.BORDER_DEFAULT )
         bSizer39.Add( self.saveSettingsBtn, 0, wx.ALL, 5 )
 
+        self.arHelpBtn = wx.Button( self, wx.ID_ANY, u"AR Help", wx.DefaultPosition, wx.DefaultSize, 0|wx.BORDER_DEFAULT )
+        bSizer39.Add( self.arHelpBtn, 0, wx.ALL, 5 )
 
         bSizer39.Add( ( 50, 0), 1, wx.EXPAND, 5 )
 
@@ -69,6 +71,7 @@ def __init__( self, parent, id = wx.ID_ANY, pos = wx.DefaultPosition, size = wx.
 
         # Connect Events
         self.saveSettingsBtn.Bind( wx.EVT_BUTTON, self.OnSave )
+        self.arHelpBtn.Bind( wx.EVT_BUTTON, self.OnArHelp )
         self.generateBomBtn.Bind( wx.EVT_BUTTON, self.OnGenerateBom )
         self.cancelBtn.Bind( wx.EVT_BUTTON, self.OnExit )
 
@@ -80,6 +83,9 @@ def __del__( self ):
     def OnSave( self, event ):
         event.Skip()
 
+    def OnArHelp( self, event ):
+        event.Skip()
+
     def OnGenerateBom( self, event ):
         event.Skip()
 
@@ -352,6 +358,42 @@ def __init__( self, parent, id = wx.ID_ANY, pos = wx.DefaultPosition, size = wx.
 
         bSizer32.Add( blacklistSizer, 1, wx.ALL|wx.EXPAND|wx.TOP, 5 )
 
+        sbSizer12 = wx.StaticBoxSizer( wx.StaticBox( self, wx.ID_ANY, u"AR (Augmented Reality)" ), wx.VERTICAL )
+
+        self.enableArCheckbox = wx.CheckBox( sbSizer12.GetStaticBox(), wx.ID_ANY, u"Enable AR functionality", wx.DefaultPosition, wx.DefaultSize, 0 )
+        sbSizer12.Add( self.enableArCheckbox, 0, wx.ALL, 5 )
+
+        sbSizer13 = wx.StaticBoxSizer( wx.StaticBox( sbSizer12.GetStaticBox(), wx.ID_ANY, u"AR Mind Files" ), wx.VERTICAL )
+
+        self.arInfoText = wx.StaticText( sbSizer13.GetStaticBox(), wx.ID_ANY, u"AR requires .mind files from KiCad 3D Viewer screenshots (orthographic, top/bottom views, tight crop).", wx.DefaultPosition, wx.DefaultSize, 0 )
+        self.arInfoText.Wrap( 400 )
+        sbSizer13.Add( self.arInfoText, 0, wx.ALL, 5 )
+
+        self.m_staticText11 = wx.StaticText( sbSizer13.GetStaticBox(), wx.ID_ANY, u"Front PCB Mind File (.mind)", wx.DefaultPosition, wx.DefaultSize, 0 )
+        self.m_staticText11.Wrap( -1 )
+
+        sbSizer13.Add( self.m_staticText11, 0, wx.ALL, 5 )
+
+        self.arFrontMindFilePicker = wx.FilePickerCtrl( sbSizer13.GetStaticBox(), wx.ID_ANY, wx.EmptyString, u"Select front PCB mind file", u"Mind files (*.mind)|*.mind", wx.DefaultPosition, wx.DefaultSize, wx.FLP_DEFAULT_STYLE )
+        sbSizer13.Add( self.arFrontMindFilePicker, 0, wx.ALL|wx.EXPAND, 5 )
+
+        self.m_staticText12 = wx.StaticText( sbSizer13.GetStaticBox(), wx.ID_ANY, u"Back PCB Mind File (.mind)", wx.DefaultPosition, wx.DefaultSize, 0 )
+        self.m_staticText12.Wrap( -1 )
+
+        sbSizer13.Add( self.m_staticText12, 0, wx.ALL, 5 )
+
+        self.arBackMindFilePicker = wx.FilePickerCtrl( sbSizer13.GetStaticBox(), wx.ID_ANY, wx.EmptyString, u"Select back PCB mind file", u"Mind files (*.mind)|*.mind", wx.DefaultPosition, wx.DefaultSize, wx.FLP_DEFAULT_STYLE )
+        sbSizer13.Add( self.arBackMindFilePicker, 0, wx.ALL|wx.EXPAND, 5 )
+
+        self.createMindFileButton = wx.Button( sbSizer13.GetStaticBox(), wx.ID_ANY, u"Create Mind Files Online", wx.DefaultPosition, wx.DefaultSize, 0 )
+        sbSizer13.Add( self.createMindFileButton, 0, wx.ALL|wx.CENTER, 5 )
+
+
+        sbSizer12.Add( sbSizer13, 0, wx.ALL|wx.EXPAND, 5 )
+
+
+        bSizer32.Add( sbSizer12, 0, wx.ALL|wx.EXPAND, 5 )
+
 
         self.SetSizer( bSizer32 )
         self.Layout()
diff --git a/InteractiveHtmlBom/dialog/settings_dialog.py b/InteractiveHtmlBom/dialog/settings_dialog.py
index 107af591..09333945 100644
--- a/InteractiveHtmlBom/dialog/settings_dialog.py
+++ b/InteractiveHtmlBom/dialog/settings_dialog.py
@@ -82,10 +82,88 @@ def __init__(self, parent, extra_data_func, extra_data_wildcard,
         self.Bind(
             wx.EVT_MENU, self.OnSaveGlobally, id=self.save_globally.GetId())
 
+    def OnArHelp(self, event):
+        """Show AR help dialog and open online resources"""
+        import webbrowser
+
+        help_msg = ("AR (Augmented Reality) Functionality Help\n\n"
+                   "REQUIREMENTS:\n"
+                   "• Internet connection (downloads AR libraries from CDN)\n"
+                   "• Localhost or HTTPS access (file:// protocol NOT supported)\n"
+                   "• Modern browser with camera support\n"
+                   "• .mind files created from 3D Viewer screenshots\n\n"
+                   "Quick Setup Steps:\n"
+                   "1. Use 3D Viewer (orthographic mode, top/bottom views)\n"
+                   "2. Take tight screenshots (no white space around PCB)\n"
+                   "3. Create .mind files using MindAR online tool\n"
+                   "4. Select .mind files in plugin settings\n"
+                   "5. Open BOM via localhost (127.0.0.1) or HTTPS for camera access\n\n"
+                   "AR Features: Real-time overlay, manual lock, opacity control\n\n"
+                   "Click YES to open MindAR tool\n"
+                   "Click NO to view detailed setup guide")
+
+        result = wx.MessageBox(help_msg, "AR Help",
+                              wx.YES_NO | wx.CANCEL | wx.ICON_INFORMATION,
+                              self)
+
+        if result == wx.YES:
+            # Open MindAR online tool
+            try:
+                webbrowser.open('https://hiukim.github.io/mind-ar-js-doc/tools/compile')
+            except Exception as e:
+                wx.MessageBox(f"Failed to open web browser: {str(e)}\n\n"
+                             "Please manually visit:\n"
+                             "https://hiukim.github.io/mind-ar-js-doc/tools/compile",
+                             "Error", wx.OK | wx.ICON_ERROR)
+        elif result == wx.NO:
+            # Open setup guide
+            try:
+                # Try to open local ARSETUP.md file
+                import os
+                setup_file = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'ARSETUP.md')
+                if os.path.exists(setup_file):
+                    if os.name == 'nt':  # Windows
+                        os.startfile(setup_file)
+                    else:  # macOS and Linux
+                        webbrowser.open('file://' + setup_file)
+                else:
+                    # Fallback to GitHub
+                    webbrowser.open('https://github.com/openscopeproject/InteractiveHtmlBom/blob/master/ARSETUP.md')
+            except Exception as e:
+                wx.MessageBox(f"Failed to open setup guide: {str(e)}\n\n"
+                             "Please check ARSETUP.md in the plugin directory",
+                             "Error", wx.OK | wx.ICON_ERROR)
+
     def OnExit(self, event):
         self.GetParent().EndModal(wx.ID_CANCEL)
 
     def OnGenerateBom(self, event):
+        # Validate AR settings if AR is enabled
+        if self.general.enableArCheckbox.IsChecked():
+            front_mind = self.general.arFrontMindFilePicker.Path
+            back_mind = self.general.arBackMindFilePicker.Path
+
+            if not front_mind or not os.path.isfile(front_mind):
+                wx.MessageBox("Please select a valid front PCB mind file (.mind) for AR functionality.",
+                             "AR Configuration Error", wx.OK | wx.ICON_ERROR)
+                return
+
+            if not back_mind or not os.path.isfile(back_mind):
+                wx.MessageBox("Please select a valid back PCB mind file (.mind) for AR functionality.",
+                             "AR Configuration Error", wx.OK | wx.ICON_ERROR)
+                return
+
+            # Validate file extensions
+            if not front_mind.lower().endswith('.mind'):
+                wx.MessageBox("Front PCB file must be a .mind file.",
+                             "AR Configuration Error", wx.OK | wx.ICON_ERROR)
+                return
+
+            if not back_mind.lower().endswith('.mind'):
+                wx.MessageBox("Back PCB file must be a .mind file.",
+                             "AR Configuration Error", wx.OK | wx.ICON_ERROR)
+                return
+
         self.GetParent().EndModal(wx.ID_OK)
 
     def finish_init(self):
@@ -114,6 +192,8 @@ def OnBoardRotationSlider(self, event):
         self.rotationDegreeLabel.LabelText = u"{}\u00B0".format(degrees)
 
 
+
+
 # Implementing GeneralSettingsPanelBase
 class GeneralSettingsPanel(dialog_base.GeneralSettingsPanelBase):
 
@@ -136,6 +216,15 @@ def __init__(self, parent, file_name_format_hint):
         self.m_btnBlacklistAdd.SetBitmap(bmp_plus)
         self.m_btnBlacklistRemove.SetBitmap(bmp_minus)
 
+        # Bind AR checkbox event
+        self.enableArCheckbox.Bind(wx.EVT_CHECKBOX, self.OnEnableArCheckbox)
+
+        # Bind create mind file button event
+        self.createMindFileButton.Bind(wx.EVT_BUTTON, self.OnCreateMindFileButton)
+
+        # Initially disable AR mind file pickers
+        self.OnEnableArCheckbox(None)
+
         self.Layout()
 
     # Handlers for GeneralSettingsPanelBase events.
@@ -207,6 +296,50 @@ def OnNameFormatHintClick(self, event):
         wx.MessageBox(self.file_name_format_hint, 'File name format help',
                       style=wx.ICON_NONE | wx.OK)
 
+    def OnEnableArCheckbox(self, event):
+        """Enable/disable AR mind file pickers based on AR checkbox state"""
+        ar_enabled = self.enableArCheckbox.IsChecked()
+        self.arInfoText.Enable(ar_enabled)
+        self.arFrontMindFilePicker.Enable(ar_enabled)
+        self.arBackMindFilePicker.Enable(ar_enabled)
+        self.createMindFileButton.Enable(ar_enabled)
+
+        # Update labels to show required status
+        if ar_enabled:
+            self.m_staticText11.SetLabel("Front PCB Mind File (.mind) *Required")
+            self.m_staticText12.SetLabel("Back PCB Mind File (.mind) *Required")
+        else:
+            self.m_staticText11.SetLabel("Front PCB Mind File (.mind)")
+            self.m_staticText12.SetLabel("Back PCB Mind File (.mind)")
+
+    def OnCreateMindFileButton(self, event):
+        """Open MindAR online tool for creating mind files"""
+        import webbrowser
+
+        # Show simplified information dialog
+        info_msg = ("This will open the MindAR Image Target Creator.\n\n"
+                   "Before using the tool:\n"
+                   "1. Capture PCB screenshots from KiCad 3D Viewer\n"
+                   "   - Use orthographic mode (disable perspective)\n"
+                   "   - Take top and bottom views\n"
+                   "   - Crop tightly (no white space around PCB)\n\n"
+                   "2. Upload images to MindAR tool\n"
+                   "3. Download generated .mind files\n"
+                   "4. Select them in the file pickers above\n\n"
+                   "Open MindAR tool now?")
+
+        result = wx.MessageBox(info_msg, "Create Mind Files",
+                              wx.YES_NO | wx.ICON_INFORMATION)
+
+        if result == wx.YES:
+            try:
+                webbrowser.open('https://hiukim.github.io/mind-ar-js-doc/tools/compile')
+            except Exception as e:
+                wx.MessageBox(f"Failed to open web browser: {str(e)}\n\n"
+                             "Please manually visit:\n"
+                             "https://hiukim.github.io/mind-ar-js-doc/tools/compile",
+                             "Error", wx.OK | wx.ICON_ERROR)
+
     def OnSize(self, event):
         # Trick the listCheckBox best size calculations
         tmp = self.componentSortOrderBox.GetStrings()
diff --git a/InteractiveHtmlBom/web/ar.js b/InteractiveHtmlBom/web/ar.js
new file mode 100644
index 00000000..8df93952
--- /dev/null
+++ b/InteractiveHtmlBom/web/ar.js
@@ -0,0 +1,1252 @@
+/* PCB AR code */
+let pcbARStarted = false;
+let arLocked = false;
+
+function getARIframeContent() {
+  return `<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AR View</title>
+    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"><\/script>
+    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"><\/script>
+    <style>
+        body { margin: 0; padding: 0; overflow: hidden; }
+    <\/style>
+<\/head>
+<body>
+    <a-scene
+        id="ar-scene"
+        color-space="sRGB"
+        renderer="colorManagement: true, physicallyCorrectLights"
+        vr-mode-ui="enabled: false"
+        device-orientation-permission-ui="enabled: false">
+
+        <a-assets>
+            <canvas id="pcb-canvas" width="512" height="512"><\/canvas>
+        <\/a-assets>
+
+        <a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: 10000; objects: .clickable"><\/a-camera>
+
+        <a-entity id="pcb-target" mindar-image-target="targetIndex: 0">
+            <a-plane
+                id="pcb-canvas-plane"
+                class="clickable"
+                material="src: #pcb-canvas; transparent: true; side: double"
+                position="0 0 0"
+                height="0.5625"
+                width="1"
+                rotation="0 0 0"
+                opacity="0.8">
+            <\/a-plane>
+        <\/a-entity>
+    <\/a-scene>
+
+    <script>
+        let arStarted = false;
+        let arSystem = null;
+        let opacityLevel = 0.8;
+        let mindTargetSrc = null;
+        let arInitialized = false;
+        let arLocked = false;
+        let lockedMatrix = null;
+        let originalUpdateWorldMatrix = null;
+
+        function initializeMindAR(targetSrc) {
+            mindTargetSrc = targetSrc;
+            const scene = document.getElementById('ar-scene');
+            scene.setAttribute('mindar-image', {
+                imageTargetSrc: targetSrc,
+                autoStart: false
+            });
+            if (scene.hasLoaded) {
+                setupARSystem();
+            } else {
+                scene.addEventListener('loaded', setupARSystem);
+            }
+        }
+
+        function setupARSystem() {
+            const scene = document.getElementById('ar-scene');
+            arSystem = scene.systems['mindar-image-system'];
+            arInitialized = true;
+            if (window.parent !== window) {
+                window.parent.postMessage({type: 'ar-ready'}, '*');
+            }
+        }
+
+        function setupEventListeners() {
+            const target = document.getElementById('pcb-target');
+            if (target) {
+                target.addEventListener('targetFound', function() {
+                    if (window.parent !== window) {
+                        window.parent.postMessage({type: 'pcb-detected'}, '*');
+                    }
+                });
+                target.addEventListener('targetLost', function() {
+                    if (window.parent !== window) {
+                        window.parent.postMessage({type: 'pcb-lost'}, '*');
+                    }
+                });
+            }
+        }
+
+        async function startAR() {
+            try {
+                if (!arInitialized || !arSystem) {
+                    throw new Error('AR system not initialized');
+                }
+                await arSystem.start();
+                arStarted = true;
+                setupEventListeners();
+                setupARClickDetection();
+                if (window.parent !== window) {
+                    window.parent.postMessage({type: 'ar-started'}, '*');
+                }
+            } catch (error) {
+                if (window.parent !== window) {
+                    window.parent.postMessage({type: 'ar-start-failed', error: error.message}, '*');
+                }
+            }
+        }
+
+        async function stopAR() {
+            try {
+                if (arSystem) {
+                    await arSystem.stop();
+                }
+                arStarted = false;
+                try {
+                    const video = document.querySelector('video');
+                    if (video && video.srcObject) {
+                        const stream = video.srcObject;
+                        const tracks = stream.getTracks();
+                        tracks.forEach(track => track.stop());
+                        video.srcObject = null;
+                    }
+                } catch (cleanupError) {}
+                if (window.parent !== window) {
+                    window.parent.postMessage({type: 'ar-stopped'}, '*');
+                }
+            } catch (error) {
+                if (window.parent !== window) {
+                    window.parent.postMessage({type: 'ar-stopped'}, '*');
+                }
+            }
+        }
+
+        function changeOpacity(value) {
+            opacityLevel = parseFloat(value);
+            const canvasPlane = document.getElementById('pcb-canvas-plane');
+            if (canvasPlane) {
+                canvasPlane.setAttribute('opacity', opacityLevel);
+            }
+        }
+
+        function lockAR() {
+            arLocked = true;
+            const target = document.getElementById('pcb-target');
+
+            if (target && target.components && target.components['mindar-image-target']) {
+                const targetComponent = target.components['mindar-image-target'];
+
+                if (target.object3D.visible && target.object3D.matrix) {
+                    lockedMatrix = target.object3D.matrix.clone();
+
+                    if (!originalUpdateWorldMatrix) {
+                        originalUpdateWorldMatrix = targetComponent.updateWorldMatrix.bind(targetComponent);
+                    }
+
+                    targetComponent.updateWorldMatrix = function(worldMatrix) {
+                        target.object3D.visible = true;
+                        target.object3D.matrix = lockedMatrix;
+
+                        target.emit("targetUpdate");
+                    };
+                }
+            }
+        }
+
+        function unlockAR() {
+            arLocked = false;
+            const target = document.getElementById('pcb-target');
+
+            if (target && target.components && target.components['mindar-image-target'] && originalUpdateWorldMatrix) {
+                const targetComponent = target.components['mindar-image-target'];
+
+                targetComponent.updateWorldMatrix = originalUpdateWorldMatrix;
+
+                setTimeout(() => {
+                    if (target.object3D.visible) {
+                        // 如果目标可见，发送检测到的消息
+                        if (window.parent !== window) {
+                            window.parent.postMessage({type: 'pcb-detected'}, '*');
+                        }
+                    } else {
+                        // 如果目标不可见，发送丢失的消息
+                        if (window.parent !== window) {
+                            window.parent.postMessage({type: 'pcb-lost'}, '*');
+                        }
+                    }
+                }, 100);
+            }
+
+            lockedMatrix = null;
+        }
+
+        function setupARClickDetection() {
+            const pcbPlane = document.getElementById('pcb-canvas-plane');
+            if (pcbPlane) {
+                pcbPlane.addEventListener('click', function(event) {
+                    const intersection = event.detail.intersection;
+                    if (intersection && intersection.uv) {
+                        const uv = intersection.uv;
+                        const clickData = {
+                            uvX: uv.x,
+                            uvY: 1 - uv.y,
+                            worldPosition: intersection.point
+                        };
+
+                        if (window.parent !== window) {
+                            window.parent.postMessage({
+                                type: 'ar-pcb-click',
+                                data: clickData
+                            }, '*');
+                        }
+                    }
+                });
+            }
+        }
+
+        function updatePCBData(pcbData) {
+            try {
+                if (pcbData.imageData) {
+                    const canvas = document.getElementById('pcb-canvas');
+                    const ctx = canvas.getContext('2d');
+                    const img = new Image();
+                    img.onload = function() {
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        ctx.clearRect(0, 0, canvas.width, canvas.height);
+                        ctx.drawImage(img, 0, 0);
+                        const canvasPlane = document.getElementById('pcb-canvas-plane');
+                        if (pcbData.pcbWidth && pcbData.pcbHeight) {
+                            const aspectRatio = pcbData.pcbWidth / pcbData.pcbHeight;
+                            const planeWidth = 1;
+                            const planeHeight = 1 / aspectRatio;
+                            canvasPlane.setAttribute('width', planeWidth);
+                            canvasPlane.setAttribute('height', planeHeight);
+                        }
+                        const material = canvasPlane.getObject3D('mesh').material;
+                        if (material && material.map) {
+                            material.map.needsUpdate = true;
+                        }
+                        if (window.parent !== window) {
+                            window.parent.postMessage({type: 'pcb-data-updated'}, '*');
+                        }
+                    };
+                    img.src = pcbData.imageData;
+                }
+            } catch (error) {}
+        }
+
+        window.addEventListener('message', function(event) {
+            if (event.data.type === 'init-ar-target') {
+                initializeMindAR(event.data.targetSrc);
+            } else if (event.data.type === 'start-ar') {
+                startAR();
+            } else if (event.data.type === 'stop-ar') {
+                stopAR();
+            } else if (event.data.type === 'update-pcb-data') {
+                updatePCBData(event.data.data);
+            } else if (event.data.type === 'change-opacity') {
+                changeOpacity(event.data.value);
+            } else if (event.data.type === 'lock-ar') {
+                lockAR();
+            } else if (event.data.type === 'unlock-ar') {
+                unlockAR();
+            }
+        });
+
+        document.addEventListener('DOMContentLoaded', function() {
+            if (window.parent !== window) {
+                window.parent.postMessage({type: 'ar-iframe-loaded'}, '*');
+            }
+        });
+    <\/script>
+<\/body>
+<\/html>`;
+}
+
+function createARIframe() {
+  const arcanvas = document.getElementById('arcanvas');
+  if (!arcanvas) return;
+
+  if (document.getElementById('ar-iframe')) {
+    return;
+  }
+
+  const iframe = document.createElement('iframe');
+  iframe.id = 'ar-iframe';
+  iframe.srcdoc = getARIframeContent();
+  iframe.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: transparent; pointer-events: auto;';
+  iframe.setAttribute('allow', 'camera; microphone');
+
+  arcanvas.insertBefore(iframe, arcanvas.firstChild);
+}
+
+function removeARIframe() {
+  const arIframe = document.getElementById('ar-iframe');
+  if (arIframe) {
+    arIframe.remove();
+  }
+}
+
+window.addEventListener('message', function(event) {
+  const arIframe = document.getElementById('ar-iframe');
+  if (!arIframe || event.source !== arIframe.contentWindow) return;
+
+  switch(event.data.type) {
+    case 'ar-iframe-loaded':
+      const targetSrc = getCurrentARTargetFile();
+      if (targetSrc) {
+        arIframe.contentWindow.postMessage({
+          type: 'init-ar-target',
+          targetSrc: targetSrc
+        }, '*');
+      } else {
+        document.getElementById('ar-status-text').textContent = 'Mind file not available';
+        document.getElementById('ar-status-text').style.color = '#f44336';
+      }
+      break;
+    case 'ar-ready':
+      document.getElementById('ar-status-text').textContent = 'Searching';
+      document.getElementById('ar-status-text').style.color = '#ff9800';
+
+      setTimeout(function() {
+        const arIframe = document.getElementById('ar-iframe');
+        if (arIframe && arIframe.contentWindow) {
+          arIframe.contentWindow.postMessage({
+            type: 'change-opacity',
+            value: settings.arOpacity / 100
+          }, '*');
+        }
+      }, 500);
+      break;
+    case 'ar-started':
+      pcbARStarted = true;
+      document.getElementById('ar-status-text').textContent = 'Searching';
+      document.getElementById('ar-status-text').style.color = '#ff9800';
+      const startedDot = document.getElementById('ar-status-dot');
+      if (startedDot) startedDot.style.background = '#ff9800';
+
+      document.getElementById('ar-lock-btn').style.display = 'flex';
+
+      function tryToSendPCBData(retryCount = 0) {
+        const maxRetries = 10;
+        const retryDelay = 200;
+
+        if (retryCount >= maxRetries) {
+          console.warn('Failed to send PCB data to AR after', maxRetries, 'retries');
+          return;
+        }
+
+        var pcbData = getPCBCanvasData();
+        if (pcbData) {
+          sendPCBDataToAR();
+
+          const arIframe = document.getElementById('ar-iframe');
+          if (arIframe && arIframe.contentWindow) {
+            arIframe.contentWindow.postMessage({
+              type: 'change-opacity',
+              value: settings.arOpacity / 100
+            }, '*');
+          }
+        } else {
+          setTimeout(() => tryToSendPCBData(retryCount + 1), retryDelay);
+        }
+      }
+
+      setTimeout(tryToSendPCBData, 1000);
+      break;
+    case 'ar-stopped':
+      pcbARStarted = false;
+      arLocked = false;
+
+      const arLockBtn = document.getElementById('ar-lock-btn');
+      if (arLockBtn) {
+        arLockBtn.style.display = 'none';
+        arLockBtn.textContent = '🔓';
+        arLockBtn.style.borderColor = 'rgba(255,255,255,0.3)';
+        arLockBtn.style.background = 'rgba(255,255,255,0.1)';
+      }
+
+      window.arStoppedCallback && window.arStoppedCallback();
+      break;
+    case 'ar-start-failed':
+      pcbARStarted = false;
+      document.getElementById('ar-status-text').textContent = 'Failed';
+      document.getElementById('ar-status-text').style.color = '#f44336';
+      const failedDot = document.getElementById('ar-status-dot');
+      if (failedDot) failedDot.style.background = '#f44336';
+      break;
+    case 'pcb-detected':
+      if (!arLocked) {
+        document.getElementById('ar-status-text').textContent = 'Locked';
+        document.getElementById('ar-status-text').style.color = '#4CAF50';
+        const detectedDot = document.getElementById('ar-status-dot');
+        if (detectedDot) detectedDot.style.background = '#4CAF50';
+      }
+      break;
+    case 'pcb-lost':
+      if (!arLocked) {
+        document.getElementById('ar-status-text').textContent = 'Searching';
+        document.getElementById('ar-status-text').style.color = '#ff9800';
+        const lostDot = document.getElementById('ar-status-dot');
+        if (lostDot) lostDot.style.background = '#ff9800';
+      }
+      break;
+    case 'ar-pcb-click':
+      handleARPCBClick(event.data.data);
+      break;
+  }
+});
+
+function startPCBAR() {
+  if (pcbARStarted) return;
+
+  document.getElementById('ar-status-text').textContent = 'Searching';
+  document.getElementById('ar-status-text').style.color = '#ff9800';
+
+  const arIframe = document.getElementById('ar-iframe');
+  if (arIframe && arIframe.contentWindow) {
+    arIframe.contentWindow.postMessage({type: 'start-ar'}, '*');
+  } else {
+    document.getElementById('ar-status-text').textContent = 'Failed';
+    document.getElementById('ar-status-text').style.color = '#f44336';
+  }
+}
+
+function stopPCBAR(callback) {
+  if (!pcbARStarted) {
+    callback && callback();
+    return;
+  }
+
+  if (callback) {
+    window.arStoppedCallback = callback;
+  }
+
+  const arIframe = document.getElementById('ar-iframe');
+  if (arIframe && arIframe.contentWindow) {
+    arIframe.contentWindow.postMessage({type: 'stop-ar'}, '*');
+  } else {
+    callback && callback();
+  }
+}
+
+function toggleARLock() {
+  arLocked = !arLocked;
+  const lockBtn = document.getElementById('ar-lock-btn');
+  const statusText = document.getElementById('ar-status-text');
+  const statusDot = document.getElementById('ar-status-dot');
+
+  if (arLocked) {
+    lockBtn.textContent = '🔒';
+    lockBtn.title = 'Unlock AR position - Return to auto-tracking mode';
+    lockBtn.style.borderColor = '#4CAF50';
+    lockBtn.style.background = 'rgba(76, 175, 80, 0.2)';
+    statusText.textContent = 'Locked (Manual)';
+    statusText.style.color = '#4CAF50';
+    if (statusDot) {
+      statusDot.style.background = '#4CAF50';
+    }
+
+    const arIframe = document.getElementById('ar-iframe');
+    if (arIframe && arIframe.contentWindow) {
+      arIframe.contentWindow.postMessage({type: 'lock-ar'}, '*');
+    }
+  } else {
+    lockBtn.textContent = '🔓';
+    lockBtn.title = 'Lock AR position - Freeze overlay for stable viewing';
+    lockBtn.style.borderColor = 'rgba(255,255,255,0.3)';
+    lockBtn.style.background = 'rgba(255,255,255,0.1)';
+
+    const arIframe = document.getElementById('ar-iframe');
+    if (arIframe && arIframe.contentWindow) {
+      arIframe.contentWindow.postMessage({type: 'unlock-ar'}, '*');
+    }
+  }
+}
+
+function handleARPCBClick(clickData) {
+  var currentLayer = settings.canvaslayout;
+  var layerdict = null;
+
+  if (currentLayer === 'F') {
+    layerdict = allcanvas.front;
+  } else if (currentLayer === 'B') {
+    layerdict = allcanvas.back;
+  } else {
+    layerdict = allcanvas.front;
+  }
+
+  if (!layerdict || !layerdict.bg) {
+    console.warn('Layer data not available for AR click');
+    return;
+  }
+
+  var canvasWidth = layerdict.bg.width;
+  var canvasHeight = layerdict.bg.height;
+
+  var flip = (layerdict.layer === "B");
+  var bbox = applyRotation(pcbdata.edges_bbox, flip);
+  var transform = layerdict.transform;
+
+  var pcbWidth = (bbox.maxx - bbox.minx) * transform.s;
+  var pcbHeight = (bbox.maxy - bbox.miny) * transform.s;
+  var pcbX = transform.x + (bbox.minx * transform.s);
+  var pcbY = transform.y + (bbox.miny * transform.s);
+
+  if (flip) {
+    pcbX = canvasWidth + transform.x - (bbox.maxx * transform.s);
+  }
+
+  var canvasClickX = pcbX + (clickData.uvX * pcbWidth);
+  var canvasClickY = pcbY + (clickData.uvY * pcbHeight);
+
+  var simulatedEvent = {
+    offsetX: canvasClickX / devicePixelRatio,
+    offsetY: canvasClickY / devicePixelRatio,
+    hasOwnProperty: function(prop) { return prop === 'offsetX' || prop === 'offsetY'; }
+  };
+
+  handleMouseClick(simulatedEvent, layerdict);
+
+  showARClickFeedback(canvasClickX, canvasClickY, layerdict);
+}
+
+function showARClickFeedback(x, y, layerdict) {
+  var canvas = layerdict.highlight;
+  var ctx = canvas.getContext('2d');
+
+  ctx.save();
+
+  ctx.strokeStyle = '#FF6B6B';
+  ctx.fillStyle = 'rgba(255, 107, 107, 0.3)';
+  ctx.lineWidth = 3;
+
+  ctx.beginPath();
+  ctx.arc(x, y, 20, 0, 2 * Math.PI);
+  ctx.fill();
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(x - 15, y);
+  ctx.lineTo(x + 15, y);
+  ctx.moveTo(x, y - 15);
+  ctx.lineTo(x, y + 15);
+  ctx.stroke();
+
+  ctx.restore();
+
+  setTimeout(() => {
+    redrawCanvas(layerdict);
+  }, 1000);
+}
+
+function getPCBCanvasData() {
+  try {
+    var currentLayer = settings.canvaslayout;
+    var layerdict = null;
+
+    if (currentLayer === 'F') {
+      layerdict = allcanvas.front;
+    } else if (currentLayer === 'B') {
+      layerdict = allcanvas.back;
+    } else {
+      layerdict = allcanvas.front;
+    }
+
+    if (!layerdict) {
+      console.error('Failed to get layer data');
+      return null;
+    }
+
+    if (!layerdict.bg || layerdict.bg.width === 0 || layerdict.bg.height === 0) {
+      console.warn('Canvas not properly initialized, width:', layerdict.bg ? layerdict.bg.width : 'undefined', 'height:', layerdict.bg ? layerdict.bg.height : 'undefined');
+      return null;
+    }
+
+    var flip = (layerdict.layer === "B");
+    var bbox = applyRotation(pcbdata.edges_bbox, flip);
+    var transform = layerdict.transform;
+
+    var pcbWidth = (bbox.maxx - bbox.minx) * transform.s;
+    var pcbHeight = (bbox.maxy - bbox.miny) * transform.s;
+
+    var tempCanvas = document.createElement('canvas');
+    var tempCtx = tempCanvas.getContext('2d');
+
+    tempCanvas.width = Math.ceil(pcbWidth);
+    tempCanvas.height = Math.ceil(pcbHeight);
+
+    if (tempCanvas.width <= 0 || tempCanvas.height <= 0) {
+      console.warn('Invalid temp canvas size:', tempCanvas.width, 'x', tempCanvas.height);
+      return null;
+    }
+
+    var pcbX = transform.x + (bbox.minx * transform.s);
+    var pcbY = transform.y + (bbox.miny * transform.s);
+
+    if (flip) {
+      pcbX = layerdict.bg.width + transform.x - (bbox.maxx * transform.s);
+    }
+
+    var sourceX = Math.max(0, Math.min(pcbX, layerdict.bg.width - pcbWidth));
+    var sourceY = Math.max(0, Math.min(pcbY, layerdict.bg.height - pcbHeight));
+    var sourceWidth = Math.min(pcbWidth, layerdict.bg.width - sourceX);
+    var sourceHeight = Math.min(pcbHeight, layerdict.bg.height - sourceY);
+
+    if (layerdict.bg && sourceWidth > 0 && sourceHeight > 0) {
+      tempCtx.drawImage(layerdict.bg,
+        sourceX, sourceY, sourceWidth, sourceHeight,
+        0, 0, tempCanvas.width, tempCanvas.height
+      );
+    }
+
+    if (settings.renderFabrication && layerdict.fab && sourceWidth > 0 && sourceHeight > 0) {
+      tempCtx.drawImage(layerdict.fab,
+        sourceX, sourceY, sourceWidth, sourceHeight,
+        0, 0, tempCanvas.width, tempCanvas.height
+      );
+    }
+
+    if (settings.renderSilkscreen && layerdict.silk && sourceWidth > 0 && sourceHeight > 0) {
+      tempCtx.drawImage(layerdict.silk,
+        sourceX, sourceY, sourceWidth, sourceHeight,
+        0, 0, tempCanvas.width, tempCanvas.height
+      );
+    }
+
+    if (layerdict.highlight && sourceWidth > 0 && sourceHeight > 0) {
+      tempCtx.drawImage(layerdict.highlight,
+        sourceX, sourceY, sourceWidth, sourceHeight,
+        0, 0, tempCanvas.width, tempCanvas.height
+      );
+    }
+
+    var imageData = tempCanvas.toDataURL('image/png');
+
+    return {
+      imageData: imageData,
+      width: tempCanvas.width,
+      height: tempCanvas.height,
+      layer: currentLayer,
+      transform: transform,
+      bbox: bbox,
+      pcbWidth: pcbWidth,
+      pcbHeight: pcbHeight
+    };
+
+  } catch (error) {
+    console.error('Failed to get PCB canvas data:', error);
+    return null;
+  }
+}
+
+function sendPCBDataToAR() {
+  var pcbData = getPCBCanvasData();
+  const arIframe = document.getElementById('ar-iframe');
+  if (pcbData && arIframe && arIframe.contentWindow) {
+    arIframe.contentWindow.postMessage({
+      type: 'update-pcb-data',
+      data: pcbData
+    }, '*');
+  } else if (!pcbData) {
+    console.warn('PCB canvas data not ready, skipping AR update');
+  }
+}
+
+function setARTargetFile(targetSrc) {
+  const arIframe = document.getElementById('ar-iframe');
+  if (arIframe && arIframe.contentWindow) {
+    arIframe.contentWindow.postMessage({
+      type: 'init-ar-target',
+      targetSrc: targetSrc
+    }, '*');
+  }
+}
+
+async function initializeARMode() {
+  document.getElementById("ar-btn").classList.add("depressed");
+
+  document.getElementById("arcanvas").style.display = "block";
+
+  const statusElement = document.getElementById('ar-status-text');
+  if (statusElement) {
+    statusElement.textContent = 'Checking environment...';
+    statusElement.style.color = '#ff9800';
+  }
+
+  const cameraCheck = await checkCameraAvailability();
+
+  if (!cameraCheck.available) {
+    showCameraError(cameraCheck);
+
+    document.getElementById("arcanvas").style.display = "none";
+
+    document.getElementById("ar-btn").classList.remove("depressed");
+
+    const previousLayout = settings.bomlayout === 'ar-view' ? 'left-right' : settings.bomlayout;
+    changeBomLayout(previousLayout);
+    return;
+  }
+
+  settings.bomlayout = 'ar-view';
+  writeStorage("bomlayout", 'ar-view');
+  setupARLayout();
+}
+
+function setupARLayout() {
+  document.getElementById("frontcanvas").style.display = "";
+  document.getElementById("backcanvas").style.display = "";
+  document.getElementById("topmostdiv").style.height = "100%";
+  document.getElementById("topmostdiv").style.display = "flex";
+  document.getElementById("bot").style.height = "calc(100% - 80px)";
+  document.getElementById("bomdiv").classList.add("split-horizontal");
+  document.getElementById("canvasdiv").classList.add("split-horizontal");
+  document.getElementById("frontcanvas").classList.remove("split-horizontal");
+  document.getElementById("backcanvas").classList.remove("split-horizontal");
+
+  if (bomsplit) {
+    bomsplit.destroy();
+    bomsplit = null;
+  }
+  if (canvassplit) {
+    canvassplit.destroy();
+    canvassplit = null;
+  }
+
+  bomsplit = Split(['#bomdiv', '#canvasdiv'], {
+    sizes: [50, 50],
+    onDragEnd: resizeAll,
+    gutterSize: 5
+  });
+  canvassplit = Split(['#frontcanvas', '#backcanvas'], {
+    sizes: [50, 50],
+    gutterSize: 5,
+    direction: "vertical",
+    onDragEnd: resizeAll
+  });
+
+  document.getElementById("arcanvas").style.display = "block";
+  createARIframe();
+
+  document.getElementById("fl-btn").disabled = false;
+  document.getElementById("fb-btn").disabled = true;
+  document.getElementById("fb-btn").title = "FB mode not available in AR view";
+  document.getElementById("bl-btn").disabled = false;
+
+  document.getElementById("fl-btn").classList.remove("depressed");
+  document.getElementById("fb-btn").classList.remove("depressed");
+  document.getElementById("bl-btn").classList.remove("depressed");
+
+  settings.canvaslayout = 'F';
+  writeStorage("canvaslayout", 'F');
+  document.getElementById("fl-btn").classList.add("depressed");
+
+  setTimeout(function() {
+    resizeAll();
+    redrawIfInitDone();
+  }, 200);
+
+  setTimeout(function() {
+    resizeAll();
+    redrawIfInitDone();
+  }, 500);
+
+  setTimeout(function() {
+    changeCanvasLayout('F');
+  }, 600);
+
+  setTimeout(function() {
+    startPCBAR();
+  }, 1000);
+}
+
+function updateARButtonStatus() {
+  const envInfo = getEnvironmentInfo();
+  const arButton = document.getElementById('ar-btn');
+
+  if (arButton) {
+    if (envInfo.supported) {
+      arButton.title = `AR View (${envInfo.status})`;
+      arButton.style.opacity = '1';
+    } else {
+      arButton.title = `AR View - ${envInfo.status} (Click for details)`;
+      arButton.style.opacity = '0.7';
+    }
+  }
+}
+
+function getEnvironmentInfo() {
+  const protocol = window.location.protocol;
+  const hostname = window.location.hostname;
+  const protocolCheck = checkProtocolSupport();
+
+  let status = '';
+  let statusColor = '';
+
+  if (protocolCheck.supported) {
+    if (protocol === 'https:') {
+      status = 'Secure (HTTPS)';
+      statusColor = '#4CAF50';
+    } else {
+      status = 'Secure (Localhost)';
+      statusColor = '#4CAF50';
+    }
+  } else {
+    if (protocol === 'file:') {
+      status = 'File System (Insecure)';
+      statusColor = '#f44336';
+    } else {
+      status = 'HTTP (Insecure)';
+      statusColor = '#f44336';
+    }
+  }
+
+  return {
+    supported: protocolCheck.supported,
+    status: status,
+    color: statusColor,
+    protocol: protocol,
+    hostname: hostname
+  };
+}
+
+function getCurrentFileName() {
+  const path = window.location.pathname;
+  const fileName = path.split('/').pop();
+  return fileName || 'index.html';
+}
+
+function checkProtocolSupport() {
+  const protocol = window.location.protocol;
+  const hostname = window.location.hostname;
+  const port = window.location.port;
+  const currentURL = window.location.href;
+  const fileName = getCurrentFileName();
+
+  if (protocol === 'https:') {
+    return { supported: true, error: null };
+  }
+
+  if (protocol === 'http:' && (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1')) {
+    return { supported: true, error: null };
+  }
+
+  let errorMessage = 'Camera access requires a secure environment.\n\n';
+
+  errorMessage += `Current environment:\n`;
+  errorMessage += `• Protocol: ${protocol}\n`;
+  errorMessage += `• Hostname: ${hostname || 'N/A'}\n`;
+  if (port) {
+    errorMessage += `• Port: ${port}\n`;
+  }
+  errorMessage += `• File: ${fileName}\n`;
+  errorMessage += `• URL: ${currentURL}\n\n`;
+
+  if (protocol === 'file:') {
+    return {
+      supported: false,
+      error: null,
+      isFileProtocol: true,
+      fileName: fileName
+    };
+  } else if (protocol === 'http:') {
+    errorMessage += 'Issue: HTTP is not secure enough for camera access.\n\n';
+    errorMessage += 'Solutions:\n\n';
+    errorMessage += '1. Use HTTPS instead of HTTP\n';
+    errorMessage += '2. Or access via localhost:\n';
+    errorMessage += `   • http://localhost/${fileName}\n`;
+    errorMessage += `   • http://127.0.0.1/${fileName}`;
+  } else {
+    errorMessage += `Issue: Protocol "${protocol}" is not supported for camera access.\n\n`;
+    errorMessage += 'Supported protocols:\n';
+    errorMessage += '• https:// (recommended)\n';
+    errorMessage += '• http://localhost/\n';
+    errorMessage += '• http://127.0.0.1/';
+  }
+
+  return {
+    supported: false,
+    error: errorMessage
+  };
+}
+
+async function checkCameraAvailability() {
+  try {
+    const protocolCheck = checkProtocolSupport();
+    if (!protocolCheck.supported) {
+      return {
+        available: false,
+        error: protocolCheck.error,
+        isFileProtocol: protocolCheck.isFileProtocol,
+        fileName: protocolCheck.fileName
+      };
+      }
+
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      return {
+        available: false,
+        error: 'Camera API not supported in this browser'
+      };
+    }
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: {
+        facingMode: 'environment'
+      }
+    });
+
+    stream.getTracks().forEach(track => track.stop());
+
+    return {
+      available: true,
+      error: null
+    };
+
+  } catch (error) {
+    let errorMessage = 'Camera access failed';
+
+    switch(error.name) {
+      case 'NotAllowedError':
+        errorMessage = 'Camera permission denied. Please allow camera access and try again.';
+        break;
+      case 'NotFoundError':
+        errorMessage = 'No camera found on this device.';
+        break;
+      case 'NotReadableError':
+        errorMessage = 'Camera is being used by another application.';
+        break;
+      case 'OverconstrainedError':
+        errorMessage = 'Camera does not support the required settings.';
+        break;
+      case 'SecurityError':
+        errorMessage = 'Camera access blocked due to security restrictions.';
+        break;
+      default:
+        errorMessage = `Camera error: ${error.message}`;
+        break;
+    }
+
+    return {
+      available: false,
+      error: errorMessage
+    };
+  }
+}
+
+function createCopyButton(elementId, title) {
+  const copyButtonStyle = `
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #444d56;
+    border: 1px solid #586069;
+    color: #e1e4e8;
+    padding: 6px 8px;
+    border-radius: 3px;
+    font-size: 11px;
+    cursor: pointer;
+    height: 28px;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `.replace(/\s+/g, ' ').trim();
+
+  return `<button onclick="copyCommand('${elementId}', this)" style="${copyButtonStyle}" title="${title}">📋</button>`;
+}
+
+function showCameraError(errorData) {
+  const errorDiv = document.createElement('div');
+  errorDiv.id = 'camera-error-dialog';
+  errorDiv.style.cssText = `
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    border: 2px solid #f44336;
+    border-radius: 8px;
+    padding: 25px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+    z-index: 10000;
+    max-width: 600px;
+    min-width: 400px;
+    text-align: center;
+    font-family: Arial, sans-serif;
+    max-height: 80vh;
+    overflow-y: auto;
+  `;
+
+  let contentHTML = '';
+
+  if (typeof errorData === 'string') {
+    errorData = { error: errorData };
+  }
+
+  if (errorData && errorData.isFileProtocol) {
+    const fileName = errorData.fileName;
+    contentHTML = `
+      <div style="color: #f44336; font-size: 18px; font-weight: bold; margin-bottom: 15px;">
+        Camera Not Available
+      </div>
+      <div style="color: #333; margin-bottom: 20px; line-height: 1.6; text-align: left;">
+        <strong>Issue:</strong> You are opening this file directly from your file system.<br>
+        Camera access requires a secure environment (HTTPS or localhost).
+      </div>
+
+      <div style="text-align: left; margin-bottom: 20px;">
+        <div style="color: #333; font-weight: bold; margin-bottom: 10px;">💡 Quick Solution (Recommended):</div>
+        <div style="background: #f6f8fa; border: 1px solid #d1d9e0; border-radius: 6px; padding: 16px; margin-bottom: 10px; position: relative;">
+          <div style="color: #586069; font-size: 12px; margin-bottom: 8px;">1. Open terminal in this file's directory</div>
+          <div style="background: #24292e; color: #e1e4e8; padding: 12px 50px 12px 12px; border-radius: 4px; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; position: relative; min-height: 20px; display: flex; align-items: center;">
+            <span id="python-command" style="flex: 1; line-height: 20px;">python -m http.server 8000</span>
+            ${createCopyButton('python-command', 'Copy command')}
+          </div>
+          <div style="color: #586069; font-size: 12px; margin-top: 8px;">2. Then open this URL:</div>
+          <div style="background: #24292e; color: #e1e4e8; padding: 12px 50px 12px 12px; border-radius: 4px; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; position: relative; margin-top: 4px; min-height: 20px; display: flex; align-items: center;">
+            <span id="url-command" style="flex: 1; line-height: 20px;">http://localhost:8000/${fileName}</span>
+            ${createCopyButton('url-command', 'Copy URL')}
+          </div>
+        </div>
+      </div>
+
+      <details style="text-align: left; margin-bottom: 20px;">
+        <summary style="cursor: pointer; color: #0366d6; font-weight: bold;">🔧 Other Options</summary>
+        <div style="margin-top: 10px; padding-left: 20px;">
+          <div style="margin-bottom: 15px;">
+            <strong>Node.js:</strong><br>
+            <code style="background: #f6f8fa; padding: 2px 4px; border-radius: 3px;">npm install -g http-server</code><br>
+            <code style="background: #f6f8fa; padding: 2px 4px; border-radius: 3px;">http-server -p 8000</code>
+          </div>
+          <div style="margin-bottom: 15px;">
+            <strong>PHP:</strong><br>
+            <code style="background: #f6f8fa; padding: 2px 4px; border-radius: 3px;">php -S localhost:8000</code>
+          </div>
+          <div style="margin-bottom: 15px;">
+            <strong>VS Code:</strong><br>
+            Install "Live Server" extension → Right-click file → "Open with Live Server"
+          </div>
+        </div>
+      </details>
+    `;
+  } else {
+    const errorMessage = typeof errorData === 'string' ? errorData : (errorData.error || 'Unknown error');
+    contentHTML = `
+      <div style="color: #f44336; font-size: 18px; font-weight: bold; margin-bottom: 10px;">
+        Camera Not Available
+      </div>
+      <div style="color: #333; margin-bottom: 15px; line-height: 1.6; text-align: left; white-space: pre-line;">
+        ${errorMessage}
+      </div>
+    `;
+  }
+
+  contentHTML += `
+    <div style="text-align: center; margin-top: 20px;">
+      <button onclick="closeCameraError()" style="
+        background: #f44336;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: bold;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+      ">OK</button>
+    </div>
+  `;
+
+  errorDiv.innerHTML = contentHTML;
+
+  const overlay = document.createElement('div');
+  overlay.id = 'camera-error-overlay';
+  overlay.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 9999;
+  `;
+
+  document.body.appendChild(overlay);
+  document.body.appendChild(errorDiv);
+}
+
+function copyToClipboard(text, buttonElement, originalColor = '#e1e4e8') {
+  if (!buttonElement) return;
+
+  const originalText = buttonElement.textContent;
+  const originalBackground = buttonElement.style.background;
+
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(() => {
+      buttonElement.textContent = '✓';
+      buttonElement.style.background = '#28a745';
+      buttonElement.style.color = '#fff';
+
+      setTimeout(() => {
+        buttonElement.textContent = originalText;
+        buttonElement.style.background = originalBackground;
+        buttonElement.style.color = originalColor;
+      }, 2000);
+    }).catch(() => {
+      buttonElement.textContent = '✗';
+      buttonElement.style.background = '#dc3545';
+      buttonElement.style.color = '#fff';
+
+      setTimeout(() => {
+        buttonElement.textContent = originalText;
+        buttonElement.style.background = originalBackground;
+        buttonElement.style.color = originalColor;
+      }, 2000);
+    });
+  } else {
+    buttonElement.textContent = '✗';
+    buttonElement.style.background = '#dc3545';
+    buttonElement.style.color = '#fff';
+
+    setTimeout(() => {
+      buttonElement.textContent = originalText;
+      buttonElement.style.background = originalBackground;
+      buttonElement.style.color = originalColor;
+    }, 2000);
+  }
+}
+
+function copyCommand(elementId, buttonElement) {
+  const element = document.getElementById(elementId);
+  if (!element) return;
+
+  const text = element.textContent;
+  copyToClipboard(text, buttonElement, '#e1e4e8');
+}
+
+function copyServerCommand(buttonElement) {
+  const fileName = getCurrentFileName();
+  const command = `python -m http.server 8000`;
+  const url = `http://localhost:8000/${fileName}`;
+  const fullCommand = `${command}\n\nThen open: ${url}`;
+
+  copyToClipboard(fullCommand, buttonElement, '');
+}
+
+function closeCameraError() {
+  const errorDiv = document.getElementById('camera-error-dialog');
+  const overlay = document.getElementById('camera-error-overlay');
+
+  if (errorDiv) errorDiv.remove();
+  if (overlay) overlay.remove();
+}
+
+function getCurrentARTargetFile() {
+  if (settings.bomlayout === "ar-view" && pcbdata && pcbdata.ar_config && pcbdata.ar_config.enabled) {
+    switch(settings.canvaslayout) {
+      case 'F':
+        if (pcbdata.ar_config.front_mind_data) {
+          return 'data:application/octet-stream;base64,' + pcbdata.ar_config.front_mind_data;
+        }
+        break;
+      case 'B':
+        if (pcbdata.ar_config.back_mind_data) {
+          return 'data:application/octet-stream;base64,' + pcbdata.ar_config.back_mind_data;
+        }
+        break;
+      default:
+        if (pcbdata.ar_config.front_mind_data) {
+          return 'data:application/octet-stream;base64,' + pcbdata.ar_config.front_mind_data;
+        }
+        break;
+    }
+  }
+
+  console.error('AR mind file data not available');
+  return null;
+}
+
+function completeARReload() {
+  const layerName = settings.canvaslayout === 'F' ? 'Front' : 'Back';
+
+  document.getElementById('ar-status-text').textContent = `Switching to ${layerName}`;
+  document.getElementById('ar-status-text').style.color = '#ff9800';
+
+  const wasARRunning = pcbARStarted;
+
+  exitARMode(function() {
+    document.getElementById('ar-status-text').textContent = `Loading ${layerName} AR`;
+    document.getElementById('ar-status-text').style.color = '#ff9800';
+
+    setTimeout(function() {
+      enterARMode(wasARRunning);
+    }, 300);
+  });
+}
+
+function exitARMode(callback) {
+  if (pcbARStarted) {
+    stopPCBAR(function() {
+      removeARIframe();
+      document.getElementById("arcanvas").style.display = "none";
+
+      callback && callback();
+    });
+  } else {
+    removeARIframe();
+    document.getElementById("arcanvas").style.display = "none";
+
+    callback && callback();
+  }
+}
+
+function enterARMode(shouldStartAR) {
+  document.getElementById("arcanvas").style.display = "block";
+
+  createARIframe();
+
+  document.getElementById("fl-btn").disabled = false;
+  document.getElementById("fb-btn").disabled = true;
+  document.getElementById("fb-btn").title = "FB mode not available in AR view";
+  document.getElementById("bl-btn").disabled = false;
+
+  document.getElementById("fl-btn").classList.remove("depressed");
+  document.getElementById("bl-btn").classList.remove("depressed");
+
+  if (settings.canvaslayout === 'F') {
+    document.getElementById("fl-btn").classList.add("depressed");
+  } else if (settings.canvaslayout === 'B') {
+    document.getElementById("bl-btn").classList.add("depressed");
+  }
+
+  if (shouldStartAR) {
+    setTimeout(function() {
+      startPCBAR();
+    }, 1000);
+  } else {
+    setTimeout(function() {
+      document.getElementById('ar-status-text').textContent = 'Ready';
+      document.getElementById('ar-status-text').style.color = '#666';
+    }, 1500);
+  }
+}
\ No newline at end of file
diff --git a/InteractiveHtmlBom/web/ibom.css b/InteractiveHtmlBom/web/ibom.css
index a601c3f8..b3e8e336 100644
--- a/InteractiveHtmlBom/web/ibom.css
+++ b/InteractiveHtmlBom/web/ibom.css
@@ -71,6 +71,19 @@ button:focus {
   outline: 0;
 }
 
+button:disabled {
+  background-color: #ccc;
+  color: #888;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dark button:disabled {
+  /* This will be inverted */
+  background-color: #666;
+  color: #999;
+}
+
 button#tb-btn {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' fill='none' stroke='%23000' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M1.32 290.12h5.82M1.32 291.45h5.82' fill='none' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M4.37 292.5v4.23M.26 292.63H8.2' fill='none' stroke='%23000' stroke-width='.3'/%3E%3Ctext font-weight='700' font-size='3.17' font-family='sans-serif'%3E%3Ctspan x='1.35' y='295.73'%3EF%3C/tspan%3E%3Ctspan x='5.03' y='295.68'%3EB%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A");
 }
@@ -95,6 +108,10 @@ button#bom-netlist-btn {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%23000' class='layer'%3E%3Crect width='29' height='29' x='1.5' y='1.5' stroke-width='2' fill='%23fff' rx='5' ry='5'/%3E%3Cpath stroke-width='2' d='M6 26l6-6v-8m13.8-6.3l-6 6v8'/%3E%3Ccircle cx='11.8' cy='9.5' r='2.8' stroke-width='2'/%3E%3Ccircle cx='19.8' cy='22.8' r='2.8' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
 }
 
+button#ar-btn {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.47 8.47'%3E%3Crect transform='translate(0 -288.53)' ry='1.17' y='288.8' x='.27' height='7.94' width='7.94' fill='%23f9f9f9'/%3E%3Cg transform='translate(0 -288.53)'%3E%3Crect width='7.94' height='7.94' x='.27' y='288.8' ry='1.17' fill='none' stroke='%23000' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M1.06 290.12H3.7m-2.64 1.33H3.7m-2.64 1.32H3.7m-2.64 1.3H3.7m-2.64 1.33H3.7' fill='none' stroke='%23000' stroke-width='.4'/%3E%3Cpath d='M4.37 288.8v7.94m0-4.11' fill='none' stroke='%23000' stroke-width='.3'/%3E%3Ctext font-weight='700' font-size='3.17' font-family='sans-serif'%3E%3Ctspan x='5.11' y='291.96'%3EA%3C/tspan%3E%3Ctspan x='5.03' y='295.68'%3ER%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
 button#copy {
   background-image: url("data:image/svg+xml,%3Csvg height='48' viewBox='0 0 48 48' width='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h48v48h-48z' fill='none'/%3E%3Cpath d='M32 2h-24c-2.21 0-4 1.79-4 4v28h4v-28h24v-4zm6 8h-22c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h22c2.21 0 4-1.79 4-4v-28c0-2.21-1.79-4-4-4zm0 32h-22v-28h22v28z'/%3E%3C/svg%3E");
   background-position: 6px 6px;
diff --git a/InteractiveHtmlBom/web/ibom.html b/InteractiveHtmlBom/web/ibom.html
index 69fd7771..1ae09071 100644
--- a/InteractiveHtmlBom/web/ibom.html
+++ b/InteractiveHtmlBom/web/ibom.html
@@ -42,6 +42,10 @@
 ///TABLEUTILJS///
 ///////////////////////////////////////////////
 
+///////////////////////////////////////////////
+///ARJS///
+///////////////////////////////////////////////
+
 ///////////////////////////////////////////////
 ///IBOMJS///
 ///////////////////////////////////////////////
@@ -156,6 +160,11 @@
             <span style="float: right"><span id="rotationDegree">0</span>&#176;</span>
             <input id="boardRotation" type="range" min="-36" max="36" value="0" class="slider" oninput="setBoardRotation(this.value)">
           </label>
+          <label class="menu-label" id="ar-opacity-control">
+            <span>AR Opacity</span>
+            <span style="float: right"><span id="arOpacityPercent">80</span>%</span>
+            <input id="arOpacitySlider" type="range" min="10" max="100" value="80" class="slider" oninput="setAROpacity(this.value)">
+          </label>
           <label class="menu-label">
             <input id="offsetBackRotationCheckbox" type="checkbox" onchange="setOffsetBackRotation(this.checked)">
             Offset back rotation
@@ -194,8 +203,10 @@
                 title="BOM only"></button>
         <button id="lr-btn" class="middle-button" onclick="changeBomLayout('left-right')"
                 title="BOM left, drawings right"></button>
-        <button id="tb-btn" class="right-most-button" onclick="changeBomLayout('top-bottom')"
+        <button id="tb-btn" class="middle-button" onclick="changeBomLayout('top-bottom')"
                 title="BOM top, drawings bot"></button>
+        <button id="ar-btn" class="right-most-button" onclick="handleARButtonClick()"
+                title="AR View - Augmented Reality overlay (requires camera and internet)"></button>
       </div>
       <div class="button-container hideonprint">
         <button id="bom-grouped-btn" class="left-most-button" onclick="changeBomMode('grouped')"
@@ -315,7 +326,7 @@
         </tbody>
       </table>
     </div>
-    <div id="canvasdiv" class="split split-horizontal">
+    <div id="canvasdiv" class="split split-horizontal" style="position: relative;">
       <div id="frontcanvas" class="split" touch-action="none" style="overflow: hidden">
         <div style="position: relative; width: 100%; height: 100%;">
           <canvas id="F_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
@@ -332,6 +343,36 @@
           <canvas id="B_hl" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
         </div>
       </div>
+      <div id="arcanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 50; pointer-events: none;">
+        <div id="ar-status" style="position: absolute; top: 10px; right: 10px; z-index: 90; background: rgba(0,0,0,0.8); color: white; padding: 8px 12px; border-radius: 8px; font-size: 12px; pointer-events: auto; backdrop-filter: blur(4px);">
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <div style="display: flex; align-items: center; gap: 6px;">
+              <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff9800;" id="ar-status-dot"></span>
+              <span id="ar-status-text" style="color: #ff9800; font-weight: 500;">Searching</span>
+            </div>
+            <button id="ar-lock-btn" onclick="toggleARLock()" style="
+              background: rgba(255,255,255,0.1);
+              border: 1px solid rgba(255,255,255,0.3);
+              color: white;
+              padding: 6px;
+              border-radius: 6px;
+              font-size: 14px;
+              cursor: pointer;
+              display: none;
+              width: 30px;
+              height: 30px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              transition: all 0.2s ease;
+              box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            "
+            onmouseover="this.style.background='rgba(255,255,255,0.2)'; this.style.transform='scale(1.05)'"
+            onmouseout="this.style.background='rgba(255,255,255,0.1)'; this.style.transform='scale(1)'"
+            title="Manual Lock - Click to freeze AR position for stable viewing">🔓</button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/InteractiveHtmlBom/web/ibom.js b/InteractiveHtmlBom/web/ibom.js
index d628d982..58ae201d 100644
--- a/InteractiveHtmlBom/web/ibom.js
+++ b/InteractiveHtmlBom/web/ibom.js
@@ -23,6 +23,7 @@ function redrawIfInitDone() {
   if (initDone) {
     redrawCanvas(allcanvas.front);
     redrawCanvas(allcanvas.back);
+    scheduleARUpdate();
   }
 }
 
@@ -133,6 +134,21 @@ function setHighlightPin1(value) {
   redrawIfInitDone();
 }
 
+function setAROpacity(value) {
+  settings.arOpacity = parseInt(value);
+  document.getElementById("arOpacityPercent").textContent = settings.arOpacity;
+
+  const arIframe = document.getElementById('ar-iframe');
+  if (arIframe && arIframe.contentWindow) {
+    arIframe.contentWindow.postMessage({
+      type: 'change-opacity',
+      value: settings.arOpacity / 100
+    }, '*');
+  }
+
+  writeStorage("arOpacity", settings.arOpacity);
+}
+
 function setHighlightRowOnClick(value) {
   settings.highlightRowOnClick = value;
   writeStorage("highlightRowOnClick", value);
@@ -863,25 +879,55 @@ function updateRefLookup(input) {
 }
 
 function changeCanvasLayout(layout) {
+  if (settings.bomlayout === "ar-view") {
+    if (layout === 'FB') {
+      return;
+    }
+
+    if (settings.canvaslayout === layout) {
+      return;
+    }
+
+    document.getElementById("fl-btn").classList.remove("depressed");
+    document.getElementById("bl-btn").classList.remove("depressed");
+
+    if (layout === 'F') {
+      document.getElementById("fl-btn").classList.add("depressed");
+    } else if (layout === 'B') {
+      document.getElementById("bl-btn").classList.add("depressed");
+    }
+
+    settings.canvaslayout = layout;
+    writeStorage("canvaslayout", layout);
+
+    completeARReload();
+
+    if (canvassplit) {
+      canvassplit.setSizes([50, 50]);
+    }
+    resizeAll();
+    return;
+  }
+    
   document.getElementById("fl-btn").classList.remove("depressed");
   document.getElementById("fb-btn").classList.remove("depressed");
   document.getElementById("bl-btn").classList.remove("depressed");
   switch (layout) {
     case 'F':
       document.getElementById("fl-btn").classList.add("depressed");
-      if (settings.bomlayout != "bom-only") {
+      if (settings.bomlayout != "bom-only" && canvassplit) {
         canvassplit.collapse(1);
       }
       break;
     case 'B':
       document.getElementById("bl-btn").classList.add("depressed");
-      if (settings.bomlayout != "bom-only") {
+      if (settings.bomlayout != "bom-only" && canvassplit) {
         canvassplit.collapse(0);
       }
       break;
     default:
       document.getElementById("fb-btn").classList.add("depressed");
-      if (settings.bomlayout != "bom-only") {
+      if (settings.bomlayout != "bom-only" && canvassplit) {
         canvassplit.setSizes([50, 50]);
       }
   }
@@ -941,16 +987,46 @@ function populateMetadata() {
     /^v\d+\.\d+/.exec(pcbdata.ibom_version)[0];
 }
 
+function handleARButtonClick() {
+  if (!pcbdata.ar_config || !pcbdata.ar_config.enabled) {
+    alert("AR functionality is not configured.\n\nTo enable AR:\n1. Open the plugin settings\n2. Check 'Enable AR functionality'\n3. Provide front and back PCB mind files (.mind)\n4. Regenerate the BOM");
+    return;
+  }
+  changeBomLayout('ar-view');
+}
+
 function changeBomLayout(layout) {
   document.getElementById("bom-btn").classList.remove("depressed");
   document.getElementById("lr-btn").classList.remove("depressed");
   document.getElementById("tb-btn").classList.remove("depressed");
+  document.getElementById("ar-btn").classList.remove("depressed");
+
+  if (layout !== 'ar-view') {
+    if (typeof pcbARStarted !== 'undefined' && pcbARStarted) {
+      stopPCBAR(function() {
+        removeARIframe();
+        document.getElementById("arcanvas").style.display = "none";
+      });
+    } else {
+      removeARIframe();
+      document.getElementById("arcanvas").style.display = "none";
+    }
+
+    document.getElementById("fl-btn").disabled = false;
+    document.getElementById("fb-btn").disabled = false;
+    document.getElementById("fb-btn").title = "Front and Back";
+    document.getElementById("bl-btn").disabled = false;
+    document.getElementById("frontcanvas").style.visibility = "visible";
+    document.getElementById("backcanvas").style.visibility = "visible";
+  }
   switch (layout) {
     case 'bom-only':
       document.getElementById("bom-btn").classList.add("depressed");
       if (bomsplit) {
         bomsplit.destroy();
         bomsplit = null;
+      }
+      if (canvassplit) {
         canvassplit.destroy();
         canvassplit = null;
       }
@@ -972,6 +1048,8 @@ function changeBomLayout(layout) {
       if (bomsplit) {
         bomsplit.destroy();
         bomsplit = null;
+      }
+      if (canvassplit) {
         canvassplit.destroy();
         canvassplit = null;
       }
@@ -1000,6 +1078,8 @@ function changeBomLayout(layout) {
       if (bomsplit) {
         bomsplit.destroy();
         bomsplit = null;
+      }
+      if (canvassplit) {
         canvassplit.destroy();
         canvassplit = null;
       }
@@ -1014,10 +1094,21 @@ function changeBomLayout(layout) {
         direction: "vertical",
         onDragEnd: resizeAll
       });
+      break;
+    case 'ar-view':
+      if (!pcbdata.ar_config || !pcbdata.ar_config.enabled) {
+        console.warn('AR functionality is not configured. Cannot switch to AR view.');
+        changeBomLayout('left-right');
+        return;
+      }
+      initializeARMode();
   }
   settings.bomlayout = layout;
   writeStorage("bomlayout", layout);
-  changeCanvasLayout(settings.canvaslayout);
+
+  if (layout !== 'ar-view') {
+    changeCanvasLayout(settings.canvaslayout);
+  }
 }
 
 function changeBomMode(mode) {
@@ -1315,6 +1406,15 @@ window.onload = function (e) {
   if (!("nets" in pcbdata)) {
     hideNetlistButton();
   }
+
+  if (!pcbdata.ar_config || !pcbdata.ar_config.enabled) {
+    var arButton = document.getElementById("ar-btn");
+    if (arButton) {
+      arButton.title = "AR View - Not configured (Click for details)";
+      arButton.style.opacity = "0.5";
+    }
+  }
+
   initDone = true;
   setBomCheckboxes(document.getElementById("bomCheckboxes").value);
   // Triggers render
diff --git a/InteractiveHtmlBom/web/render.js b/InteractiveHtmlBom/web/render.js
index 9fc2e9b9..c7f10f8b 100644
--- a/InteractiveHtmlBom/web/render.js
+++ b/InteractiveHtmlBom/web/render.js
@@ -548,6 +548,7 @@ function drawHighlightsOnLayer(canvasdict, clear = true) {
 function drawHighlights() {
   drawHighlightsOnLayer(allcanvas.front);
   drawHighlightsOnLayer(allcanvas.back);
+  scheduleARUpdate();
 }
 
 function drawBackground(canvasdict, clear = true) {
@@ -660,6 +661,19 @@ function redrawCanvas(layerdict) {
   drawHighlightsOnLayer(layerdict);
 }
 
+let arUpdateTimeout = null;
+function scheduleARUpdate() {
+  if (typeof pcbARStarted !== 'undefined' && pcbARStarted && typeof sendPCBDataToAR === 'function') {
+    if (arUpdateTimeout) {
+      clearTimeout(arUpdateTimeout);
+    }
+    arUpdateTimeout = setTimeout(() => {
+      sendPCBDataToAR();
+      arUpdateTimeout = null;
+    }, 150);
+  }
+}
+
 function resizeCanvas(layerdict) {
   var canvasdivid = {
     "F": "frontcanvas",
@@ -674,6 +688,7 @@ function resizeCanvas(layerdict) {
 function resizeAll() {
   resizeCanvas(allcanvas.front);
   resizeCanvas(allcanvas.back);
+  scheduleARUpdate();
 }
 
 function pointWithinDistanceToSegment(x, y, x1, y1, x2, y2, d) {
diff --git a/InteractiveHtmlBom/web/util.js b/InteractiveHtmlBom/web/util.js
index 3f84b6d9..8115aaad 100644
--- a/InteractiveHtmlBom/web/util.js
+++ b/InteractiveHtmlBom/web/util.js
@@ -500,6 +500,7 @@ var settings = {
   highlightpin1: "none",
   redrawOnDrag: true,
   boardRotation: 0,
+  arOpacity: 80,
   offsetBackRotation: false,
   renderPads: true,
   renderReferences: true,
@@ -519,7 +520,7 @@ function initDefaults() {
   if (settings.bomlayout === null) {
     settings.bomlayout = config.bom_view;
   }
-  if (!['bom-only', 'left-right', 'top-bottom'].includes(settings.bomlayout)) {
+  if (!['bom-only', 'left-right', 'top-bottom', 'ar-view'].includes(settings.bomlayout)) {
     settings.bomlayout = config.bom_view;
   }
   settings.bommode = readStorage("bommode");
@@ -608,6 +609,17 @@ function initDefaults() {
   document.getElementById("rotationDegree").textContent = settings.boardRotation;
   initBooleanSetting("offsetBackRotation", config.offset_back_rotation, "offsetBackRotationCheckbox", setOffsetBackRotation);
 
+  settings.arOpacity = readStorage("arOpacity");
+  if (settings.arOpacity === null) {
+    settings.arOpacity = 80;
+  } else {
+    settings.arOpacity = parseInt(settings.arOpacity);
+  }
+  document.getElementById("arOpacitySlider").value = settings.arOpacity;
+  document.getElementById("arOpacityPercent").textContent = settings.arOpacity;
+  
+  updateARButtonStatus();
+    
   settings.netColors = JSON.parse(readStorage("netColors")) || {};
 }
 
diff --git a/icons/bom-ar-32px.svg b/icons/bom-ar-32px.svg
new file mode 100644
index 00000000..3f1067da
--- /dev/null
+++ b/icons/bom-ar-32px.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+  <rect transform="translate(0 -288.53)" ry="1.17" y="288.8" x=".27" height="7.94" width="7.94" fill="#f9f9f9"/>
+  <g transform="translate(0 -288.53)">
+    <rect width="7.94" height="7.94" x=".27" y="288.8" ry="1.17" fill="none" stroke="#000" stroke-width=".4" stroke-linejoin="round"/>
+    <path d="M1.06 290.12H3.7m-2.64 1.33H3.7m-2.64 1.32H3.7m-2.64 1.3H3.7m-2.64 1.33H3.7" fill="none" stroke="#000" stroke-width=".4"/>
+    <path d="M4.37 288.8v7.94m0-4.11" fill="none" stroke="#000" stroke-width=".3"/>
+    <text font-weight="700" font-size="3.17" font-family="sans-serif">
+      <tspan x="5.11" y="291.96">A</tspan>
+      <tspan x="5.03" y="295.68">R</tspan>
+    </text>
+  </g>
+</svg>