commit 1196de6e88baa8db9487371d888d596c0645cca4
Author: cproudlock <cproudlock@localhost>
Date:   Tue Jan 13 16:07:34 2026 -0500

    Initial commit: Shop Database Flask Application
    
    Flask backend with Vue 3 frontend for shop floor machine management.
    Includes database schema export for MySQL shopdb_flask database.
    
    Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..0dabc15
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,15 @@
+# Flask configuration
+FLASK_APP=wsgi.py
+FLASK_ENV=development
+SECRET_KEY=change-this-to-a-secure-random-string
+
+# Database
+DATABASE_URL=mysql+pymysql://user:password@localhost:3306/shopdb_flask
+
+# JWT
+JWT_SECRET_KEY=change-this-to-another-secure-random-string
+JWT_ACCESS_TOKEN_EXPIRES=3600
+JWT_REFRESH_TOKEN_EXPIRES=2592000
+
+# Logging
+LOG_LEVEL=INFO
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..efe75be
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,59 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual environments
+venv/
+ENV/
+env/
+.venv/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# Flask
+instance/
+.env
+*.db
+*.sqlite
+
+# Testing
+.coverage
+htmlcov/
+.pytest_cache/
+.tox/
+
+# Logs
+logs/
+*.log
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Node/Frontend
+node_modules/
+frontend/dist/
+*.local
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..525c07e
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,106 @@
+# Contributing to ShopDB Flask
+
+## Coding Standards
+
+### Database Naming Convention
+
+**IMPORTANT: No underscores in database identifiers**
+
+All database table names and column names must use lowercase concatenated words (no underscores).
+
+| Pattern | Good | Bad |
+|---------|------|-----|
+| Table names | `printerdata` | `printer_data` |
+| Column names | `passwordhash` | `password_hash` |
+| Foreign keys | `machinetypeid` | `machine_type_id` |
+| Index names | `idx_printer_zabbix` | Allowed for indexes |
+
+### Intuitive Naming for Non-Technical Users
+
+Database tables and columns should use **simple, intuitive names** that non-technical users can understand when viewing data or reports.
+
+| Avoid | Prefer | Why |
+|-------|--------|-----|
+| `printerextensions` | `printerdata` | "data" is clearer than "extensions" |
+| `machinerelationships` | `machinelinks` | "links" is simpler (consider) |
+| `comtypeid` | `connectiontypeid` | Spell it out when unclear |
+
+**Guiding principle:** If someone unfamiliar with the system looked at a table name, would they understand what's in it?
+
+Examples:
+
+```python
+# Good
+class PrinterExtension(db.Model):
+    __tablename__ = 'printerextensions'
+
+    machineid = db.Column(db.Integer, db.ForeignKey('machines.machineid'))
+    lastzabbixsync = db.Column(db.DateTime)
+    isnetworkprinter = db.Column(db.Boolean)
+
+# Bad
+class PrinterExtension(db.Model):
+    __tablename__ = 'printer_extensions'
+
+    machine_id = db.Column(db.Integer, db.ForeignKey('machines.machine_id'))
+    last_zabbix_sync = db.Column(db.DateTime)
+    is_network_printer = db.Column(db.Boolean)
+```
+
+### API Response Keys
+
+API JSON responses should also use lowercase concatenated keys to match database columns:
+
+```json
+{
+    "machineid": 1,
+    "machinenumber": "M001",
+    "lastzabbixsync": "2026-01-12T10:00:00Z",
+    "isnetworkprinter": true
+}
+```
+
+### Python Code
+
+Python variable and function names follow standard Python conventions (snake_case for variables/functions, PascalCase for classes):
+
+```python
+# Variables and functions use snake_case
+machine_type = get_machine_type()
+is_valid = validate_input(data)
+
+# Classes use PascalCase
+class PrinterExtension:
+    pass
+```
+
+### File Structure
+
+- Models: `shopdb/core/models/` or `plugins/<plugin>/models/`
+- API routes: `shopdb/core/api/` or `plugins/<plugin>/api/`
+- Services: `shopdb/core/services/` or `plugins/<plugin>/services/`
+
+### Plugin Development
+
+When creating a new plugin:
+
+1. Create directory structure in `plugins/<name>/`
+2. Include `manifest.json` with metadata
+3. Extend `BasePlugin` class
+4. Follow naming conventions above
+5. Run `flask plugin install <name>` to install
+
+## Testing
+
+Run tests with:
+
+```bash
+pytest tests/
+```
+
+## Code Review Checklist
+
+- [ ] No underscores in table/column names
+- [ ] API responses use consistent key naming
+- [ ] Plugin follows BasePlugin interface
+- [ ] Tests included for new functionality
diff --git a/database/schema.sql b/database/schema.sql
new file mode 100644
index 0000000..23ff098
--- /dev/null
+++ b/database/schema.sql
@@ -0,0 +1,608 @@
+-- MySQL dump 10.13  Distrib 5.6.51, for Linux (x86_64)
+--
+-- Host: localhost    Database: shopdb_flask
+-- ------------------------------------------------------
+-- Server version	5.6.51
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8 */;
+/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
+/*!40103 SET TIME_ZONE='+00:00' */;
+/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
+/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
+/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
+/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
+
+--
+-- Table structure for table `applications`
+--
+
+DROP TABLE IF EXISTS `applications`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `applications` (
+  `appid` int(11) NOT NULL AUTO_INCREMENT,
+  `appname` varchar(100) NOT NULL,
+  `appdescription` varchar(255) DEFAULT NULL,
+  `supportteamid` int(11) DEFAULT NULL,
+  `isinstallable` tinyint(1) DEFAULT NULL,
+  `applicationnotes` text,
+  `installpath` varchar(255) DEFAULT NULL,
+  `applicationlink` varchar(512) DEFAULT NULL,
+  `documentationpath` varchar(512) DEFAULT NULL,
+  `ishidden` tinyint(1) DEFAULT NULL,
+  `isprinter` tinyint(1) DEFAULT NULL,
+  `islicenced` tinyint(1) DEFAULT NULL,
+  `image` varchar(255) DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`appid`),
+  UNIQUE KEY `appname` (`appname`),
+  KEY `supportteamid` (`supportteamid`),
+  CONSTRAINT `applications_ibfk_1` FOREIGN KEY (`supportteamid`) REFERENCES `supportteams` (`supportteamid`)
+) ENGINE=InnoDB AUTO_INCREMENT=82 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `appowners`
+--
+
+DROP TABLE IF EXISTS `appowners`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `appowners` (
+  `appownerid` int(11) NOT NULL AUTO_INCREMENT,
+  `appowner` varchar(100) NOT NULL,
+  `sso` varchar(50) DEFAULT NULL,
+  `email` varchar(100) DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`appownerid`)
+) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `appversions`
+--
+
+DROP TABLE IF EXISTS `appversions`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `appversions` (
+  `appversionid` int(11) NOT NULL AUTO_INCREMENT,
+  `appid` int(11) NOT NULL,
+  `version` varchar(50) NOT NULL,
+  `releasedate` date DEFAULT NULL,
+  `notes` varchar(255) DEFAULT NULL,
+  `dateadded` datetime DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`appversionid`),
+  UNIQUE KEY `uq_app_version` (`appid`,`version`),
+  CONSTRAINT `appversions_ibfk_1` FOREIGN KEY (`appid`) REFERENCES `applications` (`appid`)
+) ENGINE=InnoDB AUTO_INCREMENT=45 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `businessunits`
+--
+
+DROP TABLE IF EXISTS `businessunits`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `businessunits` (
+  `businessunitid` int(11) NOT NULL AUTO_INCREMENT,
+  `businessunit` varchar(100) NOT NULL,
+  `code` varchar(20) DEFAULT NULL COMMENT 'Short code',
+  `description` text,
+  `parentid` int(11) DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`businessunitid`),
+  UNIQUE KEY `businessunit` (`businessunit`),
+  UNIQUE KEY `code` (`code`),
+  KEY `parentid` (`parentid`),
+  CONSTRAINT `businessunits_ibfk_1` FOREIGN KEY (`parentid`) REFERENCES `businessunits` (`businessunitid`)
+) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `communications`
+--
+
+DROP TABLE IF EXISTS `communications`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `communications` (
+  `communicationid` int(11) NOT NULL AUTO_INCREMENT,
+  `machineid` int(11) NOT NULL,
+  `comtypeid` int(11) NOT NULL,
+  `ipaddress` varchar(50) DEFAULT NULL,
+  `subnetmask` varchar(50) DEFAULT NULL,
+  `gateway` varchar(50) DEFAULT NULL,
+  `dns1` varchar(50) DEFAULT NULL,
+  `dns2` varchar(50) DEFAULT NULL,
+  `macaddress` varchar(50) DEFAULT NULL,
+  `isdhcp` tinyint(1) DEFAULT NULL,
+  `comport` varchar(20) DEFAULT NULL,
+  `baudrate` int(11) DEFAULT NULL,
+  `databits` int(11) DEFAULT NULL,
+  `stopbits` varchar(10) DEFAULT NULL,
+  `parity` varchar(20) DEFAULT NULL,
+  `flowcontrol` varchar(20) DEFAULT NULL,
+  `port` int(11) DEFAULT NULL,
+  `username` varchar(100) DEFAULT NULL,
+  `pathname` varchar(255) DEFAULT NULL,
+  `pathname2` varchar(255) DEFAULT NULL COMMENT 'Secondary path for dualpath',
+  `isprimary` tinyint(1) DEFAULT NULL COMMENT 'Primary communication method',
+  `ismachinenetwork` tinyint(1) DEFAULT NULL COMMENT 'On machine network vs office network',
+  `notes` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`communicationid`),
+  KEY `comtypeid` (`comtypeid`),
+  KEY `idx_comm_ip` (`ipaddress`),
+  KEY `idx_comm_machine` (`machineid`),
+  CONSTRAINT `communications_ibfk_1` FOREIGN KEY (`machineid`) REFERENCES `machines` (`machineid`),
+  CONSTRAINT `communications_ibfk_2` FOREIGN KEY (`comtypeid`) REFERENCES `communicationtypes` (`comtypeid`)
+) ENGINE=InnoDB AUTO_INCREMENT=117 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `communicationtypes`
+--
+
+DROP TABLE IF EXISTS `communicationtypes`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `communicationtypes` (
+  `comtypeid` int(11) NOT NULL AUTO_INCREMENT,
+  `comtype` varchar(50) NOT NULL,
+  `description` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`comtypeid`),
+  UNIQUE KEY `comtype` (`comtype`)
+) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `installedapps`
+--
+
+DROP TABLE IF EXISTS `installedapps`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `installedapps` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `machineid` int(11) NOT NULL,
+  `appid` int(11) NOT NULL,
+  `appversionid` int(11) DEFAULT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  `installeddate` datetime DEFAULT NULL,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `uq_machine_app` (`machineid`,`appid`),
+  KEY `appid` (`appid`),
+  KEY `appversionid` (`appversionid`),
+  CONSTRAINT `installedapps_ibfk_1` FOREIGN KEY (`machineid`) REFERENCES `machines` (`machineid`),
+  CONSTRAINT `installedapps_ibfk_2` FOREIGN KEY (`appid`) REFERENCES `applications` (`appid`),
+  CONSTRAINT `installedapps_ibfk_3` FOREIGN KEY (`appversionid`) REFERENCES `appversions` (`appversionid`)
+) ENGINE=InnoDB AUTO_INCREMENT=2392 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `knowledgebase`
+--
+
+DROP TABLE IF EXISTS `knowledgebase`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `knowledgebase` (
+  `linkid` int(11) NOT NULL AUTO_INCREMENT,
+  `appid` int(11) DEFAULT NULL,
+  `shortdescription` varchar(500) NOT NULL,
+  `linkurl` varchar(2000) DEFAULT NULL,
+  `keywords` varchar(500) DEFAULT NULL,
+  `clicks` int(11) DEFAULT NULL,
+  `lastupdated` datetime DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`linkid`),
+  KEY `appid` (`appid`),
+  CONSTRAINT `knowledgebase_ibfk_1` FOREIGN KEY (`appid`) REFERENCES `applications` (`appid`)
+) ENGINE=InnoDB AUTO_INCREMENT=254 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `locations`
+--
+
+DROP TABLE IF EXISTS `locations`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `locations` (
+  `locationid` int(11) NOT NULL AUTO_INCREMENT,
+  `locationname` varchar(100) NOT NULL,
+  `building` varchar(100) DEFAULT NULL,
+  `floor` varchar(50) DEFAULT NULL,
+  `room` varchar(50) DEFAULT NULL,
+  `description` text,
+  `mapimage` varchar(500) DEFAULT NULL COMMENT 'Path to floor map image',
+  `mapwidth` int(11) DEFAULT NULL,
+  `mapheight` int(11) DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`locationid`),
+  UNIQUE KEY `locationname` (`locationname`)
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `machinerelationships`
+--
+
+DROP TABLE IF EXISTS `machinerelationships`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `machinerelationships` (
+  `relationshipid` int(11) NOT NULL AUTO_INCREMENT,
+  `parentmachineid` int(11) NOT NULL,
+  `childmachineid` int(11) NOT NULL,
+  `relationshiptypeid` int(11) NOT NULL,
+  `notes` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`relationshipid`),
+  UNIQUE KEY `uq_machine_relationship` (`parentmachineid`,`childmachineid`,`relationshiptypeid`),
+  KEY `childmachineid` (`childmachineid`),
+  KEY `relationshiptypeid` (`relationshiptypeid`),
+  CONSTRAINT `machinerelationships_ibfk_1` FOREIGN KEY (`parentmachineid`) REFERENCES `machines` (`machineid`),
+  CONSTRAINT `machinerelationships_ibfk_2` FOREIGN KEY (`childmachineid`) REFERENCES `machines` (`machineid`),
+  CONSTRAINT `machinerelationships_ibfk_3` FOREIGN KEY (`relationshiptypeid`) REFERENCES `relationshiptypes` (`relationshiptypeid`)
+) ENGINE=InnoDB AUTO_INCREMENT=208 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `machines`
+--
+
+DROP TABLE IF EXISTS `machines`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `machines` (
+  `machineid` int(11) NOT NULL AUTO_INCREMENT,
+  `machinenumber` varchar(50) NOT NULL COMMENT 'Business identifier (e.g., CMM01, G5QX1GT3ESF)',
+  `alias` varchar(100) DEFAULT NULL COMMENT 'Friendly name',
+  `hostname` varchar(100) DEFAULT NULL COMMENT 'Network hostname (for PCs)',
+  `serialnumber` varchar(100) DEFAULT NULL COMMENT 'Hardware serial number',
+  `machinetypeid` int(11) NOT NULL,
+  `pctypeid` int(11) DEFAULT NULL COMMENT 'Set for PCs, NULL for equipment',
+  `businessunitid` int(11) DEFAULT NULL,
+  `modelnumberid` int(11) DEFAULT NULL,
+  `vendorid` int(11) DEFAULT NULL,
+  `statusid` int(11) DEFAULT NULL COMMENT 'In Use, Spare, Retired, etc.',
+  `locationid` int(11) DEFAULT NULL,
+  `mapleft` int(11) DEFAULT NULL COMMENT 'X coordinate on floor map',
+  `maptop` int(11) DEFAULT NULL COMMENT 'Y coordinate on floor map',
+  `islocationonly` tinyint(1) DEFAULT NULL COMMENT 'Virtual location marker (not actual machine)',
+  `osid` int(11) DEFAULT NULL,
+  `loggedinuser` varchar(100) DEFAULT NULL,
+  `lastreporteddate` datetime DEFAULT NULL,
+  `lastboottime` datetime DEFAULT NULL,
+  `isvnc` tinyint(1) DEFAULT NULL COMMENT 'VNC remote access enabled',
+  `iswinrm` tinyint(1) DEFAULT NULL COMMENT 'WinRM enabled',
+  `isshopfloor` tinyint(1) DEFAULT NULL COMMENT 'Shopfloor PC',
+  `requiresmanualconfig` tinyint(1) DEFAULT NULL COMMENT 'Multi-PC machine needs manual configuration',
+  `notes` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  `deleteddate` datetime DEFAULT NULL,
+  `deletedby` varchar(100) DEFAULT NULL,
+  `createdby` varchar(100) DEFAULT NULL,
+  `modifiedby` varchar(100) DEFAULT NULL,
+  PRIMARY KEY (`machineid`),
+  UNIQUE KEY `ix_machines_machinenumber` (`machinenumber`),
+  KEY `pctypeid` (`pctypeid`),
+  KEY `businessunitid` (`businessunitid`),
+  KEY `modelnumberid` (`modelnumberid`),
+  KEY `vendorid` (`vendorid`),
+  KEY `statusid` (`statusid`),
+  KEY `osid` (`osid`),
+  KEY `idx_machine_active` (`isactive`),
+  KEY `idx_machine_hostname` (`hostname`),
+  KEY `idx_machine_type_bu` (`machinetypeid`,`businessunitid`),
+  KEY `ix_machines_serialnumber` (`serialnumber`),
+  KEY `ix_machines_hostname` (`hostname`),
+  KEY `idx_machine_location` (`locationid`),
+  CONSTRAINT `machines_ibfk_1` FOREIGN KEY (`machinetypeid`) REFERENCES `machinetypes` (`machinetypeid`),
+  CONSTRAINT `machines_ibfk_2` FOREIGN KEY (`pctypeid`) REFERENCES `pctypes` (`pctypeid`),
+  CONSTRAINT `machines_ibfk_3` FOREIGN KEY (`businessunitid`) REFERENCES `businessunits` (`businessunitid`),
+  CONSTRAINT `machines_ibfk_4` FOREIGN KEY (`modelnumberid`) REFERENCES `models` (`modelnumberid`),
+  CONSTRAINT `machines_ibfk_5` FOREIGN KEY (`vendorid`) REFERENCES `vendors` (`vendorid`),
+  CONSTRAINT `machines_ibfk_6` FOREIGN KEY (`statusid`) REFERENCES `machinestatuses` (`statusid`),
+  CONSTRAINT `machines_ibfk_7` FOREIGN KEY (`locationid`) REFERENCES `locations` (`locationid`),
+  CONSTRAINT `machines_ibfk_8` FOREIGN KEY (`osid`) REFERENCES `operatingsystems` (`osid`)
+) ENGINE=InnoDB AUTO_INCREMENT=639 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `machinestatuses`
+--
+
+DROP TABLE IF EXISTS `machinestatuses`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `machinestatuses` (
+  `statusid` int(11) NOT NULL AUTO_INCREMENT,
+  `status` varchar(50) NOT NULL,
+  `description` text,
+  `color` varchar(20) DEFAULT NULL COMMENT 'CSS color for UI',
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`statusid`),
+  UNIQUE KEY `status` (`status`)
+) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `machinetypes`
+--
+
+DROP TABLE IF EXISTS `machinetypes`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `machinetypes` (
+  `machinetypeid` int(11) NOT NULL AUTO_INCREMENT,
+  `machinetype` varchar(100) NOT NULL,
+  `category` varchar(50) NOT NULL COMMENT 'Equipment, PC, Network, or Printer',
+  `description` text,
+  `icon` varchar(50) DEFAULT NULL COMMENT 'Icon name for UI',
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`machinetypeid`),
+  UNIQUE KEY `machinetype` (`machinetype`)
+) ENGINE=InnoDB AUTO_INCREMENT=29 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `models`
+--
+
+DROP TABLE IF EXISTS `models`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `models` (
+  `modelnumberid` int(11) NOT NULL AUTO_INCREMENT,
+  `modelnumber` varchar(100) NOT NULL,
+  `machinetypeid` int(11) DEFAULT NULL,
+  `vendorid` int(11) DEFAULT NULL,
+  `description` text,
+  `imageurl` varchar(500) DEFAULT NULL COMMENT 'URL to product image',
+  `documentationurl` varchar(500) DEFAULT NULL COMMENT 'URL to documentation',
+  `notes` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`modelnumberid`),
+  UNIQUE KEY `uq_model_vendor` (`modelnumber`,`vendorid`),
+  KEY `machinetypeid` (`machinetypeid`),
+  KEY `vendorid` (`vendorid`),
+  CONSTRAINT `models_ibfk_1` FOREIGN KEY (`machinetypeid`) REFERENCES `machinetypes` (`machinetypeid`),
+  CONSTRAINT `models_ibfk_2` FOREIGN KEY (`vendorid`) REFERENCES `vendors` (`vendorid`)
+) ENGINE=InnoDB AUTO_INCREMENT=105 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `operatingsystems`
+--
+
+DROP TABLE IF EXISTS `operatingsystems`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `operatingsystems` (
+  `osid` int(11) NOT NULL AUTO_INCREMENT,
+  `osname` varchar(100) NOT NULL,
+  `osversion` varchar(50) DEFAULT NULL,
+  `architecture` varchar(20) DEFAULT NULL COMMENT 'x86, x64, ARM',
+  `endoflife` date DEFAULT NULL COMMENT 'End of support date',
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`osid`),
+  UNIQUE KEY `uq_os_name_version` (`osname`,`osversion`)
+) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `pctypes`
+--
+
+DROP TABLE IF EXISTS `pctypes`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `pctypes` (
+  `pctypeid` int(11) NOT NULL AUTO_INCREMENT,
+  `pctype` varchar(100) NOT NULL,
+  `description` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`pctypeid`),
+  UNIQUE KEY `pctype` (`pctype`)
+) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `printerdata`
+--
+
+DROP TABLE IF EXISTS `printerdata`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `printerdata` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `machineid` int(11) NOT NULL,
+  `windowsname` varchar(255) DEFAULT NULL COMMENT 'Windows printer name (e.g., \\\\server\\printer)',
+  `sharename` varchar(100) DEFAULT NULL COMMENT 'CSF/share name',
+  `iscsf` tinyint(1) DEFAULT NULL COMMENT 'Is CSF printer',
+  `installpath` varchar(255) DEFAULT NULL COMMENT 'Driver install path',
+  `pin` varchar(20) DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `ix_printerdata_machineid` (`machineid`),
+  KEY `idx_printer_windowsname` (`windowsname`),
+  CONSTRAINT `printerdata_ibfk_1` FOREIGN KEY (`machineid`) REFERENCES `machines` (`machineid`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `relationshiptypes`
+--
+
+DROP TABLE IF EXISTS `relationshiptypes`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `relationshiptypes` (
+  `relationshiptypeid` int(11) NOT NULL AUTO_INCREMENT,
+  `relationshiptype` varchar(50) NOT NULL,
+  `description` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`relationshiptypeid`),
+  UNIQUE KEY `relationshiptype` (`relationshiptype`)
+) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `roles`
+--
+
+DROP TABLE IF EXISTS `roles`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `roles` (
+  `roleid` int(11) NOT NULL AUTO_INCREMENT,
+  `rolename` varchar(50) NOT NULL,
+  `description` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`roleid`),
+  UNIQUE KEY `rolename` (`rolename`)
+) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `supportteams`
+--
+
+DROP TABLE IF EXISTS `supportteams`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `supportteams` (
+  `supportteamid` int(11) NOT NULL AUTO_INCREMENT,
+  `teamname` varchar(100) NOT NULL,
+  `teamurl` varchar(255) DEFAULT NULL,
+  `appownerid` int(11) DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`supportteamid`),
+  KEY `appownerid` (`appownerid`),
+  CONSTRAINT `supportteams_ibfk_1` FOREIGN KEY (`appownerid`) REFERENCES `appowners` (`appownerid`)
+) ENGINE=InnoDB AUTO_INCREMENT=25 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `userroles`
+--
+
+DROP TABLE IF EXISTS `userroles`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `userroles` (
+  `userid` int(11) NOT NULL,
+  `roleid` int(11) NOT NULL,
+  PRIMARY KEY (`userid`,`roleid`),
+  KEY `roleid` (`roleid`),
+  CONSTRAINT `userroles_ibfk_1` FOREIGN KEY (`userid`) REFERENCES `users` (`userid`),
+  CONSTRAINT `userroles_ibfk_2` FOREIGN KEY (`roleid`) REFERENCES `roles` (`roleid`)
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `users`
+--
+
+DROP TABLE IF EXISTS `users`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `users` (
+  `userid` int(11) NOT NULL AUTO_INCREMENT,
+  `username` varchar(100) NOT NULL,
+  `email` varchar(255) NOT NULL,
+  `passwordhash` varchar(255) NOT NULL,
+  `firstname` varchar(100) DEFAULT NULL,
+  `lastname` varchar(100) DEFAULT NULL,
+  `lastlogindate` datetime DEFAULT NULL,
+  `failedlogins` int(11) DEFAULT NULL,
+  `lockeduntil` datetime DEFAULT NULL,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`userid`),
+  UNIQUE KEY `email` (`email`),
+  UNIQUE KEY `ix_users_username` (`username`)
+) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Table structure for table `vendors`
+--
+
+DROP TABLE IF EXISTS `vendors`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8 */;
+CREATE TABLE `vendors` (
+  `vendorid` int(11) NOT NULL AUTO_INCREMENT,
+  `vendor` varchar(100) NOT NULL,
+  `description` text,
+  `website` varchar(255) DEFAULT NULL,
+  `supportphone` varchar(50) DEFAULT NULL,
+  `supportemail` varchar(100) DEFAULT NULL,
+  `notes` text,
+  `createddate` datetime NOT NULL,
+  `modifieddate` datetime NOT NULL,
+  `isactive` tinyint(1) NOT NULL,
+  PRIMARY KEY (`vendorid`),
+  UNIQUE KEY `vendor` (`vendor`)
+) ENGINE=InnoDB AUTO_INCREMENT=44 DEFAULT CHARSET=latin1;
+/*!40101 SET character_set_client = @saved_cs_client */;
+/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
+
+/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
+/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
+/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
+/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
+
+-- Dump completed on 2026-01-13 21:07:15
diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
new file mode 100644
index 0000000..dbe3ced
--- /dev/null
+++ b/frontend/CLAUDE.md
@@ -0,0 +1,104 @@
+# Frontend Development Standards
+
+## CSS Styling Standards
+
+### Use CSS Variables for ALL Colors
+
+**NEVER hardcode colors in component styles.** Always use CSS variables defined in `src/assets/style.css`.
+
+Available variables:
+```css
+--primary       /* Primary brand color */
+--primary-dark  /* Darker primary for hover states */
+--secondary     /* Secondary/muted color */
+--success       /* Success states (green) */
+--warning       /* Warning states (orange) */
+--danger        /* Error/danger states (red) */
+--bg            /* Page background */
+--bg-card       /* Card/panel background */
+--text          /* Primary text color */
+--text-light    /* Secondary/muted text */
+--border        /* Border color */
+--link          /* Link color (bright blue in dark mode) */
+```
+
+**Bad:**
+```css
+.my-card {
+  background: white;
+  color: #1a1a1a;
+}
+```
+
+**Good:**
+```css
+.my-card {
+  background: var(--bg-card);
+  color: var(--text);
+}
+```
+
+### Detail Pages - Use Global Styles
+
+All detail pages (MachineDetail, PCDetail, PrinterDetail, ApplicationDetail) should use the **unified global styles** from `style.css`:
+
+- `.detail-page` - Container wrapper
+- `.hero-card` - Main hero section with image and info
+- `.hero-image`, `.hero-content`, `.hero-title`, `.hero-meta`, `.hero-details`
+- `.section-card` - Info sections
+- `.section-title` - Section headers
+- `.info-list`, `.info-row`, `.info-label`, `.info-value`
+- `.content-grid`, `.content-column` - Two-column layout
+- `.audit-footer` - Created/modified timestamps
+
+**Only add scoped styles for page-specific elements** (e.g., supplies grid for printers, version list for applications).
+
+### PrinterDetail.vue is the Master Template for Detail Pages
+
+Use `PrinterDetail.vue` as the reference for new detail pages. Follow its structure and styling patterns.
+
+### List Pages - Use Global Styles
+
+All list pages should use the **unified global styles** from `style.css`:
+
+- `.page-header` - Header with title and action button
+- `.filters` - Search and filter controls
+- `.card` - Main content container
+- `.table-container` - Scrollable table wrapper
+- `table`, `th`, `td` - Table styling
+- `.pagination` - Page navigation
+- `.badge`, `.badge-success`, etc. - Status badges
+- `.actions` - Action button column
+
+**PrintersList.vue is the Master Template for List Pages**
+
+Use `PrintersList.vue` as the reference for new list pages. It has NO scoped styles - everything uses global CSS.
+
+**Only add scoped styles for page-specific elements** (e.g., icon cells for applications, stats badge for knowledge base).
+
+### Dark Mode Support
+
+Dark mode is automatic via `@media (prefers-color-scheme: dark)`. Using CSS variables ensures colors adapt automatically - no extra work needed per page.
+
+## Component Organization
+
+- **Global styles**: `src/assets/style.css`
+- **Page-specific styles**: Scoped `<style scoped>` block, only for unique elements
+- **Font sizes**: Use `rem` units, base is 18px for readability on 1080p
+
+## File Structure
+
+```
+src/
+  assets/
+    style.css          # Global styles, CSS variables, detail page styles
+  views/
+    machines/
+      MachineDetail.vue   # Uses global styles only
+    pcs/
+      PCDetail.vue        # Global + PC-specific (app-list, etc.)
+    printers/
+      PrinterDetail.vue   # Global + printer-specific (supplies-grid)
+    applications/
+      ApplicationDetail.vue  # Global + app-specific (version-list, pc-list)
+```
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..4c7dc1d
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ShopDB</title>
+  <link rel="stylesheet" href="/src/assets/style.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..cad5d55
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,1565 @@
+{
+  "name": "shopdb-frontend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "shopdb-frontend",
+      "version": "1.0.0",
+      "dependencies": {
+        "axios": "^1.6.0",
+        "leaflet": "^1.9.4",
+        "pinia": "^2.1.0",
+        "vue": "^3.4.0",
+        "vue-router": "^4.2.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.0.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
+      "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.6"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
+      "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.1.tgz",
+      "integrity": "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.55.1.tgz",
+      "integrity": "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.55.1.tgz",
+      "integrity": "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.55.1.tgz",
+      "integrity": "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.55.1.tgz",
+      "integrity": "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.55.1.tgz",
+      "integrity": "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.55.1.tgz",
+      "integrity": "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.55.1.tgz",
+      "integrity": "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.55.1.tgz",
+      "integrity": "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.55.1.tgz",
+      "integrity": "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.55.1.tgz",
+      "integrity": "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.55.1.tgz",
+      "integrity": "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.55.1.tgz",
+      "integrity": "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.55.1.tgz",
+      "integrity": "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.55.1.tgz",
+      "integrity": "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.55.1.tgz",
+      "integrity": "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.55.1.tgz",
+      "integrity": "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.55.1.tgz",
+      "integrity": "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.55.1.tgz",
+      "integrity": "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.55.1.tgz",
+      "integrity": "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.55.1.tgz",
+      "integrity": "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.55.1.tgz",
+      "integrity": "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.55.1.tgz",
+      "integrity": "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.55.1.tgz",
+      "integrity": "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.55.1.tgz",
+      "integrity": "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.26.tgz",
+      "integrity": "sha512-vXyI5GMfuoBCnv5ucIT7jhHKl55Y477yxP6fc4eUswjP8FG3FFVFd41eNDArR+Uk3QKn2Z85NavjaxLxOC19/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@vue/shared": "3.5.26",
+        "entities": "^7.0.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.26.tgz",
+      "integrity": "sha512-y1Tcd3eXs834QjswshSilCBnKGeQjQXB6PqFn/1nxcQw4pmG42G8lwz+FZPAZAby6gZeHSt/8LMPfZ4Rb+Bd/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.26",
+        "@vue/shared": "3.5.26"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.26.tgz",
+      "integrity": "sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@vue/compiler-core": "3.5.26",
+        "@vue/compiler-dom": "3.5.26",
+        "@vue/compiler-ssr": "3.5.26",
+        "@vue/shared": "3.5.26",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.26.tgz",
+      "integrity": "sha512-lZT9/Y0nSIRUPVvapFJEVDbEXruZh2IYHMk2zTtEgJSlP5gVOqeWXH54xDKAaFS4rTnDeDBQUYDtxKyoW9FwDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.26",
+        "@vue/shared": "3.5.26"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.26.tgz",
+      "integrity": "sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.26"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.26.tgz",
+      "integrity": "sha512-xJWM9KH1kd201w5DvMDOwDHYhrdPTrAatn56oB/LRG4plEQeZRQLw0Bpwih9KYoqmzaxF0OKSn6swzYi84e1/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.26",
+        "@vue/shared": "3.5.26"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.26.tgz",
+      "integrity": "sha512-XLLd/+4sPC2ZkN/6+V4O4gjJu6kSDbHAChvsyWgm1oGbdSO3efvGYnm25yCjtFm/K7rrSDvSfPDgN1pHgS4VNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.26",
+        "@vue/runtime-core": "3.5.26",
+        "@vue/shared": "3.5.26",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.26.tgz",
+      "integrity": "sha512-TYKLXmrwWKSodyVuO1WAubucd+1XlLg4set0YoV+Hu8Lo79mp/YMwWV5mC5FgtsDxX3qo1ONrxFaTP1OQgy1uA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.26",
+        "@vue/shared": "3.5.26"
+      },
+      "peerDependencies": {
+        "vue": "3.5.26"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.26.tgz",
+      "integrity": "sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A==",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/entities": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
+      "integrity": "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/rollup": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
+      "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.55.1",
+        "@rollup/rollup-android-arm64": "4.55.1",
+        "@rollup/rollup-darwin-arm64": "4.55.1",
+        "@rollup/rollup-darwin-x64": "4.55.1",
+        "@rollup/rollup-freebsd-arm64": "4.55.1",
+        "@rollup/rollup-freebsd-x64": "4.55.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.55.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.55.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.55.1",
+        "@rollup/rollup-linux-arm64-musl": "4.55.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.55.1",
+        "@rollup/rollup-linux-loong64-musl": "4.55.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.55.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.55.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.55.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.55.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.55.1",
+        "@rollup/rollup-linux-x64-gnu": "4.55.1",
+        "@rollup/rollup-linux-x64-musl": "4.55.1",
+        "@rollup/rollup-openbsd-x64": "4.55.1",
+        "@rollup/rollup-openharmony-arm64": "4.55.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.55.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.55.1",
+        "@rollup/rollup-win32-x64-gnu": "4.55.1",
+        "@rollup/rollup-win32-x64-msvc": "4.55.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.5.26",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
+      "integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.26",
+        "@vue/compiler-sfc": "3.5.26",
+        "@vue/runtime-dom": "3.5.26",
+        "@vue/server-renderer": "3.5.26",
+        "@vue/shared": "3.5.26"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    }
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..1a95a57
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "shopdb-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",
+    "leaflet": "^1.9.4",
+    "pinia": "^2.1.0",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/frontend/public/ge-aerospace-logo.svg b/frontend/public/ge-aerospace-logo.svg
new file mode 100644
index 0000000..47d2953
--- /dev/null
+++ b/frontend/public/ge-aerospace-logo.svg
@@ -0,0 +1,8 @@
+<svg width="138" height="32" viewBox="0 0 138 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1587_16237" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="138" height="32">
+<path d="M138 0H0V32H138V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1587_16237)">
+<path d="M52.7203 22.4828V9.51721H59.3399V10.944H54.3731V15.2042H59.0216V16.5948H54.3731V21.06H59.3399V22.4868H52.7203V22.4828ZM66.7717 17.1294L68.5021 10.9962L70.2325 17.1294H66.7717ZM65.2657 22.4828L66.3921 18.4999H70.6243L71.7507 22.4828H73.4811L69.5673 9.51721H67.4981L63.5843 22.4828H65.2576H65.2657ZM78.2234 14.4607C79.4069 14.4607 79.9742 15.0917 79.9742 16.4421V17.2017H76.4766V16.4421C76.4766 15.0877 77.0398 14.4607 78.2275 14.4607M74.8605 16.5546V19.3358C74.8605 21.5021 76.044 22.6677 78.1907 22.6677C80.3374 22.6677 81.4638 21.7232 81.5373 19.7217H79.9742C79.9171 20.9234 79.3743 21.4258 78.1867 21.4258C76.999 21.4258 76.4766 20.7787 76.4766 19.4243V18.4999H81.574V16.5185C81.574 14.3682 80.4068 13.2228 78.2275 13.2228C76.0481 13.2228 74.8605 14.3883 74.8605 16.5546ZM87.8957 14.9269V13.3353H87.7243C86.5775 13.3353 85.7858 13.8337 85.3368 14.7822V13.4117H83.8146V22.4868H85.4307V16.9847C85.4307 15.783 86.0143 14.8907 87.5162 14.8907C87.6672 14.8907 87.8182 14.9068 87.8916 14.9269M92.3319 21.4097C91.1484 21.4097 90.6015 20.7787 90.6015 19.4283V16.4622C90.6015 15.1118 91.1484 14.4808 92.3319 14.4808C93.5154 14.4808 94.0623 15.1118 94.0623 16.4622V19.4283C94.0623 20.7787 93.5154 21.4097 92.3319 21.4097ZM92.3319 22.6677C94.5153 22.6677 95.6825 21.5021 95.6825 19.3358V16.5546C95.6825 14.3883 94.5153 13.2228 92.3319 13.2228C90.1485 13.2228 88.9854 14.3883 88.9854 16.5546V19.3358C88.9854 21.5021 90.1526 22.6677 92.3319 22.6677ZM99.1964 15.5378C99.1964 14.8144 99.7025 14.4446 100.588 14.4446C101.641 14.4446 102.074 14.943 102.074 16.0362H103.616C103.616 14.111 102.714 13.2188 100.588 13.2188C98.6863 13.2188 97.6333 14.1432 97.6333 15.7589C97.6333 17.258 98.6128 17.7965 99.8535 18.3873L100.813 18.8495C101.792 19.3117 102.131 19.5328 102.131 20.2763C102.131 21.0721 101.568 21.4418 100.588 21.4418C99.4576 21.4418 98.9719 20.9234 98.9719 19.7739H97.4293C97.4293 21.7553 98.4087 22.6637 100.588 22.6637C102.563 22.6637 103.69 21.6991 103.69 20.0512C103.69 18.5521 102.71 18.0136 101.47 17.4228L100.511 16.9606C99.5311 16.4984 99.1923 16.2773 99.1923 15.5338M110.836 19.4243C110.836 20.7224 110.326 21.3132 109.199 21.3132C107.959 21.3132 107.375 20.4974 107.375 19.1469V16.6471C107.375 15.2967 107.959 14.4808 109.199 14.4808C110.326 14.4808 110.836 15.0756 110.836 16.3698V19.4283V19.4243ZM112.452 19.3881V16.4059C112.452 14.3321 111.379 13.2188 109.554 13.2188C108.501 13.2188 107.73 13.6609 107.277 14.5129V13.4037H105.755V25.8146H107.371V21.4418C107.82 22.1814 108.575 22.5712 109.554 22.5712C111.379 22.5712 112.452 21.4579 112.452 19.3841M117.341 21.3293C116.362 21.3293 115.876 20.8269 115.876 19.8302V19.5529C115.876 18.4959 116.533 18.0899 118.321 18.0899H119.17V19.4243C119.17 20.6662 118.529 21.3333 117.345 21.3333M116.99 22.5752C118.064 22.5752 118.851 22.1492 119.284 21.3333V22.4828H120.79V16.1286C120.79 14.1472 119.757 13.2188 117.59 13.2188C115.541 13.2188 114.525 14.107 114.488 15.9437H116.052C116.072 14.9631 116.598 14.4446 117.594 14.4446C118.668 14.4446 119.174 14.9832 119.174 16.1326V16.836H118.235C115.525 16.836 114.268 17.7242 114.268 19.6534V19.9307C114.268 21.5423 115.341 22.5793 116.994 22.5793M126.34 22.6717C128.54 22.6717 129.536 21.6549 129.536 19.376H127.977C127.977 20.839 127.487 21.4137 126.34 21.4137C125.193 21.4137 124.626 20.7827 124.626 19.4323V16.4662C124.626 15.1158 125.173 14.4848 126.34 14.4848C127.507 14.4848 127.956 14.9832 127.977 16.4099H129.536C129.515 14.1874 128.556 13.2228 126.34 13.2228C124.124 13.2228 123.01 14.3883 123.01 16.5546V19.3358C123.01 21.5021 124.177 22.6677 126.34 22.6677M134.653 14.4607C135.837 14.4607 136.404 15.0917 136.404 16.4421V17.2017H132.907V16.4421C132.907 15.0877 133.47 14.4607 134.658 14.4607M131.291 16.5546V19.3358C131.291 21.5021 132.474 22.6677 134.621 22.6677C136.767 22.6677 137.894 21.7232 137.967 19.7217H136.404C136.347 20.9234 135.804 21.4258 134.617 21.4258C133.429 21.4258 132.907 20.7787 132.907 19.4243V18.4999H138.004V16.5185C138.004 14.3682 136.837 13.2228 134.658 13.2228C132.478 13.2228 131.291 14.3883 131.291 16.5546ZM46.3088 22.6677C47.6433 22.6677 48.8473 22.3904 49.9573 21.8156V15.2042H45.9129V16.5948H48.3208V20.8912C47.7576 21.1324 47.023 21.2811 46.3292 21.2811C44.2968 21.2811 43.5255 20.3165 43.5255 17.8166V13.3514C43.5255 11.7036 44.4682 10.7229 46.0476 10.7229C47.627 10.7229 48.3412 11.4464 48.3779 13.0018H50.092C50.0349 10.5019 48.7575 9.33635 46.0476 9.33635C43.3377 9.33635 41.8726 10.7792 41.8726 13.4117V17.7443C41.8726 21.1726 43.2275 22.6717 46.3129 22.6717M19.8915 11.8362C19.8915 10.0196 21.1404 8.25119 21.826 8.5888C22.6014 8.97061 21.2424 10.6868 19.8915 11.8362ZM11.3823 12.4994C11.3823 11.0364 12.8475 8.25521 13.7453 8.54861C14.8023 8.89425 12.8679 11.6996 11.3823 12.4994ZM9.89679 22.9611C9.2234 22.9932 8.77447 22.5672 8.77447 21.8558C8.77447 19.9508 11.4558 18.1301 13.4841 17.1535C13.125 19.8141 12.2108 22.8525 9.90087 22.957M22.279 16.7516C20.7486 16.7516 19.5773 17.8608 19.5773 19.1912C19.5773 20.3004 20.2507 21.1846 21.1526 21.1846C21.4668 21.1846 21.7811 21.0078 21.7811 20.6099C21.7811 20.0352 21.0057 19.8945 21.0669 19.0304C21.1036 18.4637 21.6505 18.0819 22.1892 18.0819C23.2707 18.0819 23.7768 19.1148 23.7768 20.1758C23.7319 21.8156 22.5075 22.957 21.0669 22.957C19.1773 22.957 17.9611 21.1846 17.9611 19.2756C17.9611 16.4381 19.8507 15.3328 20.8424 15.0676C20.8547 15.0676 23.4299 15.5217 23.3483 14.4004C23.3156 13.9101 22.5688 13.7212 22.03 13.6971C21.4301 13.6729 20.8302 13.886 20.8302 13.886C20.5159 13.7292 20.2996 13.4238 20.165 13.0701C22.0096 11.6956 23.3156 10.3652 23.3156 8.85808C23.3156 8.0623 22.7769 7.35092 21.7403 7.35092C19.8956 7.35092 18.4998 9.65386 18.4998 11.7398C18.4998 12.0934 18.4998 12.4511 18.5896 12.7606C17.4183 13.6046 16.5491 14.1271 14.9737 15.0555C14.9737 14.8626 15.0145 14.3602 15.1492 13.7131C15.6879 13.1384 16.4307 12.2743 16.4307 11.6112C16.4307 11.3017 16.2511 11.0364 15.892 11.0364C14.9941 11.0364 14.3167 12.3667 14.1371 13.2952C13.7331 13.7815 12.9209 14.4044 12.2475 14.4044C11.7088 14.4044 11.5292 13.9141 11.4803 13.7413C13.1903 13.1625 15.3084 10.8596 15.3084 8.77769C15.3084 8.33559 15.1288 7.35895 13.778 7.35895C11.7537 7.35895 10.0437 10.3291 10.0437 12.632C9.32134 12.632 9.05607 11.8764 9.05607 11.3017C9.05607 10.727 9.28053 10.1482 9.28053 9.97136C9.28053 9.79452 9.19075 9.57347 8.92139 9.57347C8.248 9.57347 7.83989 10.4617 7.83989 11.4785C7.88478 12.8973 8.83161 13.7855 10.0886 13.8739C10.2682 14.7179 11.0354 15.5137 11.9782 15.5137C12.5659 15.5137 13.2841 15.3369 13.778 14.8947C13.7331 15.2042 13.6882 15.4695 13.6433 15.7388C11.6639 16.7596 10.2233 17.467 8.91731 18.6204C7.88478 19.5529 7.29709 20.7908 7.29709 21.7674C7.29709 23.0977 8.15005 24.3356 9.90903 24.3356C11.9782 24.3356 13.5535 22.6958 14.3208 20.4371C14.6799 19.372 14.8268 17.8247 14.9166 16.4059C16.9857 15.2565 17.9693 14.5853 19.0467 13.8337C19.1814 14.0548 19.3202 14.2316 19.4956 14.3642C18.5529 14.8505 16.3001 16.2251 16.3001 19.4604C16.3001 21.7674 17.8754 24.3356 20.9812 24.3356C23.5482 24.3356 25.3031 22.2537 25.3031 20.2602C25.3031 18.4436 24.2665 16.7596 22.2872 16.7596M30.025 20.5657C30.025 20.5657 29.9924 20.6019 29.9434 20.5818C29.9067 20.5697 29.8944 20.5496 29.8944 20.5255C29.8944 20.4974 30.4372 18.9219 30.4331 17.1133C30.429 15.164 29.621 13.9663 28.5884 13.9663C27.96 13.9663 27.5069 14.4084 27.5069 15.0756C27.5069 16.2733 28.9925 16.3617 28.9925 18.9781C28.9925 20.0432 28.768 21.06 28.4089 22.1693C26.7438 27.7076 21.4301 30.2798 16.2593 30.2798C13.8718 30.2798 12.1781 29.7975 11.6721 29.5765C11.6517 29.5684 11.6354 29.5283 11.6517 29.4881C11.6639 29.4559 11.6966 29.4358 11.717 29.4439C11.921 29.5242 13.378 29.9744 15.1778 29.9744C17.1571 29.9744 18.3284 29.1786 18.3284 28.202C18.3284 27.583 17.8346 27.0967 17.202 27.0967C15.9859 27.0967 15.8961 28.6039 13.2882 28.6039C12.1618 28.6039 11.1742 28.3828 10.0029 28.0291C4.41988 26.3451 1.76306 21.1605 1.76714 16.0161C1.76714 13.5122 2.48134 11.5187 2.49358 11.4986C2.50174 11.4866 2.53439 11.4705 2.5752 11.4866C2.61602 11.4986 2.62418 11.5348 2.62418 11.5428C2.55888 11.7518 2.08547 13.1786 2.08547 14.951C2.08547 16.9003 2.89353 18.0538 3.93015 18.0538C4.51783 18.0538 5.01165 17.6117 5.01165 16.9887C5.01165 15.791 3.52611 15.6584 3.52611 13.0862C3.52611 11.9769 3.75058 11.0043 4.10972 9.85079C5.80747 4.34464 11.0722 1.7684 16.2471 1.72821C18.6509 1.70811 20.7567 2.41949 20.8383 2.47978C20.8506 2.49184 20.8669 2.52399 20.8506 2.56016C20.8343 2.60035 20.8057 2.60839 20.7935 2.60437C20.769 2.60437 19.3977 2.03768 17.3286 2.03768C15.3941 2.03768 14.1779 2.83346 14.1779 3.85431C14.1779 4.42904 14.6268 4.91535 15.3043 4.91535C16.5205 4.91535 16.6103 3.4524 19.2181 3.4524C20.3445 3.4524 21.3322 3.67345 22.5035 4.02713C28.1314 5.71113 30.6902 10.94 30.7392 15.996C30.7637 18.5843 30.025 20.5456 30.0169 20.5576M16.2471 0.75157C7.69705 0.75157 0.763175 7.58001 0.763175 16C0.763175 24.42 7.69705 31.2444 16.2471 31.2444C24.7971 31.2444 31.7269 24.42 31.7269 16C31.7269 7.58001 24.7971 0.75157 16.2471 0.75157ZM16.2471 32C7.28893 32 0 24.8661 0 16C0 7.13389 7.28893 0 16.2471 0C25.2052 0 32.4941 7.18212 32.4941 16C32.4941 24.8179 25.2011 32 16.2471 32Z" fill="white"/>
+</g>
+</svg>
diff --git a/frontend/public/images/models/computers/Latitude-5450.png b/frontend/public/images/models/computers/Latitude-5450.png
new file mode 100644
index 0000000..49b419d
Binary files /dev/null and b/frontend/public/images/models/computers/Latitude-5450.png differ
diff --git a/frontend/public/images/models/computers/OptiPlex-Tower-Plus-7010.png b/frontend/public/images/models/computers/OptiPlex-Tower-Plus-7010.png
new file mode 100644
index 0000000..d6e8219
Binary files /dev/null and b/frontend/public/images/models/computers/OptiPlex-Tower-Plus-7010.png differ
diff --git a/frontend/public/images/models/computers/Optiplex-5050.png b/frontend/public/images/models/computers/Optiplex-5050.png
new file mode 100644
index 0000000..7cf3964
Binary files /dev/null and b/frontend/public/images/models/computers/Optiplex-5050.png differ
diff --git a/frontend/public/images/models/computers/Optiplex-5060.png b/frontend/public/images/models/computers/Optiplex-5060.png
new file mode 100644
index 0000000..bf10c39
Binary files /dev/null and b/frontend/public/images/models/computers/Optiplex-5060.png differ
diff --git a/frontend/public/images/models/computers/Optiplex-7000-Plus.png b/frontend/public/images/models/computers/Optiplex-7000-Plus.png
new file mode 100644
index 0000000..2cc9df3
Binary files /dev/null and b/frontend/public/images/models/computers/Optiplex-7000-Plus.png differ
diff --git a/frontend/public/images/models/computers/Optiplex-7000.png b/frontend/public/images/models/computers/Optiplex-7000.png
new file mode 100644
index 0000000..8b99888
Binary files /dev/null and b/frontend/public/images/models/computers/Optiplex-7000.png differ
diff --git a/frontend/public/images/models/computers/Optiplex-7080.jpg b/frontend/public/images/models/computers/Optiplex-7080.jpg
new file mode 100644
index 0000000..23d0c11
Binary files /dev/null and b/frontend/public/images/models/computers/Optiplex-7080.jpg differ
diff --git a/frontend/public/images/models/machines/1000C1000.jpg b/frontend/public/images/models/machines/1000C1000.jpg
new file mode 100644
index 0000000..a0bef6d
Binary files /dev/null and b/frontend/public/images/models/machines/1000C1000.jpg differ
diff --git a/frontend/public/images/models/machines/2SP-V80.png b/frontend/public/images/models/machines/2SP-V80.png
new file mode 100644
index 0000000..b774943
Binary files /dev/null and b/frontend/public/images/models/machines/2SP-V80.png differ
diff --git a/frontend/public/images/models/machines/7107sf.png b/frontend/public/images/models/machines/7107sf.png
new file mode 100644
index 0000000..2402fbb
Binary files /dev/null and b/frontend/public/images/models/machines/7107sf.png differ
diff --git a/frontend/public/images/models/machines/Cisco9120.png b/frontend/public/images/models/machines/Cisco9120.png
new file mode 100644
index 0000000..979b31f
Binary files /dev/null and b/frontend/public/images/models/machines/Cisco9120.png differ
diff --git a/frontend/public/images/models/machines/IDF.png b/frontend/public/images/models/machines/IDF.png
new file mode 100644
index 0000000..62a17f7
Binary files /dev/null and b/frontend/public/images/models/machines/IDF.png differ
diff --git a/frontend/public/images/models/machines/M710uc.png b/frontend/public/images/models/machines/M710uc.png
new file mode 100644
index 0000000..2fb2549
Binary files /dev/null and b/frontend/public/images/models/machines/M710uc.png differ
diff --git a/frontend/public/images/models/machines/M719uc.png b/frontend/public/images/models/machines/M719uc.png
new file mode 100644
index 0000000..2fb2549
Binary files /dev/null and b/frontend/public/images/models/machines/M719uc.png differ
diff --git a/frontend/public/images/models/machines/OptiPlex-7070.png b/frontend/public/images/models/machines/OptiPlex-7070.png
new file mode 100644
index 0000000..2489079
Binary files /dev/null and b/frontend/public/images/models/machines/OptiPlex-7070.png differ
diff --git a/frontend/public/images/models/machines/Optiplex-7000.png b/frontend/public/images/models/machines/Optiplex-7000.png
new file mode 100644
index 0000000..8b99888
Binary files /dev/null and b/frontend/public/images/models/machines/Optiplex-7000.png differ
diff --git a/frontend/public/images/models/machines/a81nx.png b/frontend/public/images/models/machines/a81nx.png
new file mode 100644
index 0000000..d8990d6
Binary files /dev/null and b/frontend/public/images/models/machines/a81nx.png differ
diff --git a/frontend/public/images/models/machines/abtech-eas1000.png b/frontend/public/images/models/machines/abtech-eas1000.png
new file mode 100644
index 0000000..c1d59e3
Binary files /dev/null and b/frontend/public/images/models/machines/abtech-eas1000.png differ
diff --git a/frontend/public/images/models/machines/abtech-eas1000.webp b/frontend/public/images/models/machines/abtech-eas1000.webp
new file mode 100644
index 0000000..e7bba90
Binary files /dev/null and b/frontend/public/images/models/machines/abtech-eas1000.webp differ
diff --git a/frontend/public/images/models/machines/c4500.png b/frontend/public/images/models/machines/c4500.png
new file mode 100644
index 0000000..01bf1c6
Binary files /dev/null and b/frontend/public/images/models/machines/c4500.png differ
diff --git a/frontend/public/images/models/machines/cmm.png b/frontend/public/images/models/machines/cmm.png
new file mode 100644
index 0000000..4dacbb3
Binary files /dev/null and b/frontend/public/images/models/machines/cmm.png differ
diff --git a/frontend/public/images/models/machines/d218.png b/frontend/public/images/models/machines/d218.png
new file mode 100644
index 0000000..0993b22
Binary files /dev/null and b/frontend/public/images/models/machines/d218.png differ
diff --git a/frontend/public/images/models/machines/eddy.png b/frontend/public/images/models/machines/eddy.png
new file mode 100644
index 0000000..7328989
Binary files /dev/null and b/frontend/public/images/models/machines/eddy.png differ
diff --git a/frontend/public/images/models/machines/ezeddy.png b/frontend/public/images/models/machines/ezeddy.png
new file mode 100644
index 0000000..e9e8f11
Binary files /dev/null and b/frontend/public/images/models/machines/ezeddy.png differ
diff --git a/frontend/public/images/models/machines/furnace.png b/frontend/public/images/models/machines/furnace.png
new file mode 100644
index 0000000..12a4d32
Binary files /dev/null and b/frontend/public/images/models/machines/furnace.png differ
diff --git a/frontend/public/images/models/machines/g750.jpg b/frontend/public/images/models/machines/g750.jpg
new file mode 100644
index 0000000..650b166
Binary files /dev/null and b/frontend/public/images/models/machines/g750.jpg differ
diff --git a/frontend/public/images/models/machines/hbroach.png b/frontend/public/images/models/machines/hbroach.png
new file mode 100644
index 0000000..f61aa7b
Binary files /dev/null and b/frontend/public/images/models/machines/hbroach.png differ
diff --git a/frontend/public/images/models/machines/keyence-vr3100.png b/frontend/public/images/models/machines/keyence-vr3100.png
new file mode 100644
index 0000000..0d6512d
Binary files /dev/null and b/frontend/public/images/models/machines/keyence-vr3100.png differ
diff --git a/frontend/public/images/models/machines/latitude5440.png b/frontend/public/images/models/machines/latitude5440.png
new file mode 100644
index 0000000..b44f165
Binary files /dev/null and b/frontend/public/images/models/machines/latitude5440.png differ
diff --git a/frontend/public/images/models/machines/leandrum.jpg b/frontend/public/images/models/machines/leandrum.jpg
new file mode 100644
index 0000000..e171961
Binary files /dev/null and b/frontend/public/images/models/machines/leandrum.jpg differ
diff --git a/frontend/public/images/models/machines/loc650.png b/frontend/public/images/models/machines/loc650.png
new file mode 100644
index 0000000..fe7228b
Binary files /dev/null and b/frontend/public/images/models/machines/loc650.png differ
diff --git a/frontend/public/images/models/machines/mx3100.png b/frontend/public/images/models/machines/mx3100.png
new file mode 100644
index 0000000..f63ee9b
Binary files /dev/null and b/frontend/public/images/models/machines/mx3100.png differ
diff --git a/frontend/public/images/models/machines/nt4300.jpg b/frontend/public/images/models/machines/nt4300.jpg
new file mode 100644
index 0000000..aea3db4
Binary files /dev/null and b/frontend/public/images/models/machines/nt4300.jpg differ
diff --git a/frontend/public/images/models/machines/p600s.png b/frontend/public/images/models/machines/p600s.png
new file mode 100644
index 0000000..b4b45ab
Binary files /dev/null and b/frontend/public/images/models/machines/p600s.png differ
diff --git a/frontend/public/images/models/machines/phoenixbroach.png b/frontend/public/images/models/machines/phoenixbroach.png
new file mode 100644
index 0000000..6e5307c
Binary files /dev/null and b/frontend/public/images/models/machines/phoenixbroach.png differ
diff --git a/frontend/public/images/models/machines/powerturn.png b/frontend/public/images/models/machines/powerturn.png
new file mode 100644
index 0000000..930c3f2
Binary files /dev/null and b/frontend/public/images/models/machines/powerturn.png differ
diff --git a/frontend/public/images/models/machines/precision5560.jpg b/frontend/public/images/models/machines/precision5560.jpg
new file mode 100644
index 0000000..66cf930
Binary files /dev/null and b/frontend/public/images/models/machines/precision5560.jpg differ
diff --git a/frontend/public/images/models/machines/rb2.png b/frontend/public/images/models/machines/rb2.png
new file mode 100644
index 0000000..270a9b6
Binary files /dev/null and b/frontend/public/images/models/machines/rb2.png differ
diff --git a/frontend/public/images/models/machines/shotpeen.png b/frontend/public/images/models/machines/shotpeen.png
new file mode 100644
index 0000000..d630041
Binary files /dev/null and b/frontend/public/images/models/machines/shotpeen.png differ
diff --git a/frontend/public/images/models/machines/turnburn.png b/frontend/public/images/models/machines/turnburn.png
new file mode 100644
index 0000000..92c586d
Binary files /dev/null and b/frontend/public/images/models/machines/turnburn.png differ
diff --git a/frontend/public/images/models/machines/vp9000.jpg b/frontend/public/images/models/machines/vp9000.jpg
new file mode 100644
index 0000000..3b737d7
Binary files /dev/null and b/frontend/public/images/models/machines/vp9000.jpg differ
diff --git a/frontend/public/images/models/machines/vt5502sp.png b/frontend/public/images/models/machines/vt5502sp.png
new file mode 100644
index 0000000..dc1d8d6
Binary files /dev/null and b/frontend/public/images/models/machines/vt5502sp.png differ
diff --git a/frontend/public/images/models/machines/vtm100.png b/frontend/public/images/models/machines/vtm100.png
new file mode 100644
index 0000000..40c7f3d
Binary files /dev/null and b/frontend/public/images/models/machines/vtm100.png differ
diff --git a/frontend/public/images/models/machines/zoller600.png b/frontend/public/images/models/machines/zoller600.png
new file mode 100644
index 0000000..58fc371
Binary files /dev/null and b/frontend/public/images/models/machines/zoller600.png differ
diff --git a/frontend/public/images/models/printers/AltaLink-C8130.jpg b/frontend/public/images/models/printers/AltaLink-C8130.jpg
new file mode 100644
index 0000000..6c60fbf
Binary files /dev/null and b/frontend/public/images/models/printers/AltaLink-C8130.jpg differ
diff --git a/frontend/public/images/models/printers/AltaLink-C8130.png b/frontend/public/images/models/printers/AltaLink-C8130.png
new file mode 100644
index 0000000..ea6f5c0
Binary files /dev/null and b/frontend/public/images/models/printers/AltaLink-C8130.png differ
diff --git a/frontend/public/images/models/printers/DTC4500e.png b/frontend/public/images/models/printers/DTC4500e.png
new file mode 100644
index 0000000..ef3ee50
Binary files /dev/null and b/frontend/public/images/models/printers/DTC4500e.png differ
diff --git a/frontend/public/images/models/printers/Epson-C3500.png b/frontend/public/images/models/printers/Epson-C3500.png
new file mode 100644
index 0000000..20af1d4
Binary files /dev/null and b/frontend/public/images/models/printers/Epson-C3500.png differ
diff --git a/frontend/public/images/models/printers/HP-DesignJet-T1700dr.png b/frontend/public/images/models/printers/HP-DesignJet-T1700dr.png
new file mode 100644
index 0000000..4e5036a
Binary files /dev/null and b/frontend/public/images/models/printers/HP-DesignJet-T1700dr.png differ
diff --git a/frontend/public/images/models/printers/LaserJet -CP2025.png b/frontend/public/images/models/printers/LaserJet -CP2025.png
new file mode 100644
index 0000000..f6a3cf2
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet -CP2025.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-4001n.png b/frontend/public/images/models/printers/LaserJet-4001n.png
new file mode 100644
index 0000000..d25c892
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-4001n.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-4250.png b/frontend/public/images/models/printers/LaserJet-4250.png
new file mode 100644
index 0000000..fb5d871
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-4250.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-M254dw.jpg b/frontend/public/images/models/printers/LaserJet-M254dw.jpg
new file mode 100644
index 0000000..59ceaed
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M254dw.jpg differ
diff --git a/frontend/public/images/models/printers/LaserJet-M254dw.png b/frontend/public/images/models/printers/LaserJet-M254dw.png
new file mode 100644
index 0000000..9156d86
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M254dw.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-M255dw.png b/frontend/public/images/models/printers/LaserJet-M255dw.png
new file mode 100644
index 0000000..fc3a2e0
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M255dw.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-M404.png b/frontend/public/images/models/printers/LaserJet-M404.png
new file mode 100644
index 0000000..f4c11eb
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M404.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-M406.jpg b/frontend/public/images/models/printers/LaserJet-M406.jpg
new file mode 100644
index 0000000..76bec1d
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M406.jpg differ
diff --git a/frontend/public/images/models/printers/LaserJet-M406.png b/frontend/public/images/models/printers/LaserJet-M406.png
new file mode 100644
index 0000000..66253ab
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M406.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-M454dn.png b/frontend/public/images/models/printers/LaserJet-M454dn.png
new file mode 100644
index 0000000..7002e92
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M454dn.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-M506.png b/frontend/public/images/models/printers/LaserJet-M506.png
new file mode 100644
index 0000000..29280e4
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M506.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-M602.png b/frontend/public/images/models/printers/LaserJet-M602.png
new file mode 100644
index 0000000..1893868
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M602.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-M607.png b/frontend/public/images/models/printers/LaserJet-M607.png
new file mode 100644
index 0000000..cdfdfc4
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-M607.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-P3015dn.png b/frontend/public/images/models/printers/LaserJet-P3015dn.png
new file mode 100644
index 0000000..cdff804
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-P3015dn.png differ
diff --git a/frontend/public/images/models/printers/LaserJet-Pro-M252dw.png b/frontend/public/images/models/printers/LaserJet-Pro-M252dw.png
new file mode 100644
index 0000000..2be6f9d
Binary files /dev/null and b/frontend/public/images/models/printers/LaserJet-Pro-M252dw.png differ
diff --git a/frontend/public/images/models/printers/Laserjet-Pro-M251nw.png b/frontend/public/images/models/printers/Laserjet-Pro-M251nw.png
new file mode 100644
index 0000000..df165dc
Binary files /dev/null and b/frontend/public/images/models/printers/Laserjet-Pro-M251nw.png differ
diff --git a/frontend/public/images/models/printers/Versalink-B405.jpg b/frontend/public/images/models/printers/Versalink-B405.jpg
new file mode 100644
index 0000000..6d7ae43
Binary files /dev/null and b/frontend/public/images/models/printers/Versalink-B405.jpg differ
diff --git a/frontend/public/images/models/printers/Versalink-B405.png b/frontend/public/images/models/printers/Versalink-B405.png
new file mode 100644
index 0000000..befd4ea
Binary files /dev/null and b/frontend/public/images/models/printers/Versalink-B405.png differ
diff --git a/frontend/public/images/models/printers/Versalink-B7125.png b/frontend/public/images/models/printers/Versalink-B7125.png
new file mode 100644
index 0000000..993cca7
Binary files /dev/null and b/frontend/public/images/models/printers/Versalink-B7125.png differ
diff --git a/frontend/public/images/models/printers/Versalink-C405.png b/frontend/public/images/models/printers/Versalink-C405.png
new file mode 100644
index 0000000..262a3a3
Binary files /dev/null and b/frontend/public/images/models/printers/Versalink-C405.png differ
diff --git a/frontend/public/images/models/printers/Versalink-C7125.jpg b/frontend/public/images/models/printers/Versalink-C7125.jpg
new file mode 100644
index 0000000..8e46ccf
Binary files /dev/null and b/frontend/public/images/models/printers/Versalink-C7125.jpg differ
diff --git a/frontend/public/images/models/printers/Versalink-C7125.png b/frontend/public/images/models/printers/Versalink-C7125.png
new file mode 100644
index 0000000..05aa9e5
Binary files /dev/null and b/frontend/public/images/models/printers/Versalink-C7125.png differ
diff --git a/frontend/public/images/models/printers/Xerox-EC8036.jpg b/frontend/public/images/models/printers/Xerox-EC8036.jpg
new file mode 100644
index 0000000..b3fcefc
Binary files /dev/null and b/frontend/public/images/models/printers/Xerox-EC8036.jpg differ
diff --git a/frontend/public/images/models/printers/Xerox-EC8036.png b/frontend/public/images/models/printers/Xerox-EC8036.png
new file mode 100644
index 0000000..a875139
Binary files /dev/null and b/frontend/public/images/models/printers/Xerox-EC8036.png differ
diff --git a/frontend/public/images/models/printers/zt411.jpg b/frontend/public/images/models/printers/zt411.jpg
new file mode 100644
index 0000000..0999082
Binary files /dev/null and b/frontend/public/images/models/printers/zt411.jpg differ
diff --git a/frontend/public/images/models/printers/zt411.png b/frontend/public/images/models/printers/zt411.png
new file mode 100644
index 0000000..1792b28
Binary files /dev/null and b/frontend/public/images/models/printers/zt411.png differ
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
new file mode 100644
index 0000000..d372e96
--- /dev/null
+++ b/frontend/src/App.vue
@@ -0,0 +1,6 @@
+<template>
+  <router-view />
+</template>
+
+<script setup>
+</script>
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
new file mode 100644
index 0000000..480db2c
--- /dev/null
+++ b/frontend/src/api/index.js
@@ -0,0 +1,392 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: '/api',
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// Add auth token to requests
+api.interceptors.request.use(config => {
+  const token = localStorage.getItem('token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+
+// Handle 401 errors (token expired) - only redirect if user was logged in
+api.interceptors.response.use(
+  response => response,
+  error => {
+    if (error.response?.status === 401) {
+      const hadToken = localStorage.getItem('token')
+      localStorage.removeItem('token')
+      localStorage.removeItem('user')
+      // Only redirect if user was previously logged in (session expired)
+      if (hadToken) {
+        window.location.href = '/login'
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default api
+
+// Auth API
+export const authApi = {
+  login(username, password) {
+    return api.post('/auth/login', { username, password })
+  },
+  logout() {
+    return api.post('/auth/logout')
+  },
+  me() {
+    return api.get('/auth/me')
+  },
+  refresh() {
+    const refreshToken = localStorage.getItem('refreshToken')
+    return api.post('/auth/refresh', {}, {
+      headers: { Authorization: `Bearer ${refreshToken}` }
+    })
+  }
+}
+
+// Machines API
+export const machinesApi = {
+  list(params = {}) {
+    return api.get('/machines', { params })
+  },
+  get(id) {
+    return api.get(`/machines/${id}`)
+  },
+  create(data) {
+    return api.post('/machines', data)
+  },
+  update(id, data) {
+    return api.put(`/machines/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/machines/${id}`)
+  },
+  updateCommunication(id, data) {
+    return api.put(`/machines/${id}/communication`, data)
+  },
+  // Relationships
+  getRelationships(id) {
+    return api.get(`/machines/${id}/relationships`)
+  },
+  createRelationship(id, data) {
+    return api.post(`/machines/${id}/relationships`, data)
+  },
+  deleteRelationship(relationshipId) {
+    return api.delete(`/machines/relationships/${relationshipId}`)
+  }
+}
+
+// Relationship Types API
+export const relationshipTypesApi = {
+  list() {
+    return api.get('/machines/relationshiptypes')
+  },
+  create(data) {
+    return api.post('/machines/relationshiptypes', data)
+  }
+}
+
+// Machine Types API
+export const machinetypesApi = {
+  list(params = {}) {
+    return api.get('/machinetypes', { params })
+  },
+  create(data) {
+    return api.post('/machinetypes', data)
+  },
+  update(id, data) {
+    return api.put(`/machinetypes/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/machinetypes/${id}`)
+  }
+}
+
+// Statuses API
+export const statusesApi = {
+  list(params = {}) {
+    return api.get('/statuses', { params })
+  },
+  get(id) {
+    return api.get(`/statuses/${id}`)
+  },
+  create(data) {
+    return api.post('/statuses', data)
+  },
+  update(id, data) {
+    return api.put(`/statuses/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/statuses/${id}`)
+  }
+}
+
+// Vendors API
+export const vendorsApi = {
+  list(params = {}) {
+    return api.get('/vendors', { params })
+  },
+  get(id) {
+    return api.get(`/vendors/${id}`)
+  },
+  create(data) {
+    return api.post('/vendors', data)
+  },
+  update(id, data) {
+    return api.put(`/vendors/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/vendors/${id}`)
+  }
+}
+
+// Locations API
+export const locationsApi = {
+  list(params = {}) {
+    return api.get('/locations', { params })
+  },
+  get(id) {
+    return api.get(`/locations/${id}`)
+  },
+  create(data) {
+    return api.post('/locations', data)
+  },
+  update(id, data) {
+    return api.put(`/locations/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/locations/${id}`)
+  }
+}
+
+// Printers API
+export const printersApi = {
+  list(params = {}) {
+    return api.get('/printers/', { params })
+  },
+  get(id) {
+    return api.get(`/printers/${id}`)
+  },
+  updateExtension(id, data) {
+    return api.put(`/printers/${id}/printerdata`, data)
+  },
+  updateCommunication(id, data) {
+    return api.put(`/printers/${id}/communication`, data)
+  },
+  getSupplies(id) {
+    return api.get(`/printers/${id}/supplies`)
+  },
+  getDrivers(id) {
+    return api.get(`/printers/${id}/drivers`)
+  },
+  lowSupplies() {
+    return api.get('/printers/lowsupplies')
+  },
+  dashboardSummary() {
+    return api.get('/printers/dashboard/summary')
+  },
+  drivers: {
+    list() {
+      return api.get('/printers/drivers')
+    },
+    create(data) {
+      return api.post('/printers/drivers', data)
+    },
+    update(id, data) {
+      return api.put(`/printers/drivers/${id}`, data)
+    },
+    delete(id) {
+      return api.delete(`/printers/drivers/${id}`)
+    }
+  },
+  supplyTypes: {
+    list() {
+      return api.get('/printers/supplytypes')
+    },
+    create(data) {
+      return api.post('/printers/supplytypes', data)
+    }
+  }
+}
+
+// Dashboard API
+export const dashboardApi = {
+  summary() {
+    return api.get('/dashboard/summary')
+  }
+}
+
+// Models API
+export const modelsApi = {
+  list(params = {}) {
+    return api.get('/models', { params })
+  },
+  get(id) {
+    return api.get(`/models/${id}`)
+  },
+  create(data) {
+    return api.post('/models', data)
+  },
+  update(id, data) {
+    return api.put(`/models/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/models/${id}`)
+  }
+}
+
+// PC Types API
+export const pctypesApi = {
+  list(params = {}) {
+    return api.get('/pctypes', { params })
+  },
+  get(id) {
+    return api.get(`/pctypes/${id}`)
+  },
+  create(data) {
+    return api.post('/pctypes', data)
+  },
+  update(id, data) {
+    return api.put(`/pctypes/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/pctypes/${id}`)
+  }
+}
+
+// Operating Systems API
+export const operatingsystemsApi = {
+  list(params = {}) {
+    return api.get('/operatingsystems', { params })
+  },
+  get(id) {
+    return api.get(`/operatingsystems/${id}`)
+  },
+  create(data) {
+    return api.post('/operatingsystems', data)
+  },
+  update(id, data) {
+    return api.put(`/operatingsystems/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/operatingsystems/${id}`)
+  }
+}
+
+// Business Units API
+export const businessunitsApi = {
+  list(params = {}) {
+    return api.get('/businessunits', { params })
+  },
+  get(id) {
+    return api.get(`/businessunits/${id}`)
+  },
+  create(data) {
+    return api.post('/businessunits', data)
+  },
+  update(id, data) {
+    return api.put(`/businessunits/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/businessunits/${id}`)
+  }
+}
+
+// Applications API
+export const applicationsApi = {
+  list(params = {}) {
+    return api.get('/applications', { params })
+  },
+  get(id) {
+    return api.get(`/applications/${id}`)
+  },
+  create(data) {
+    return api.post('/applications', data)
+  },
+  update(id, data) {
+    return api.put(`/applications/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/applications/${id}`)
+  },
+  // Versions
+  getVersions(appId) {
+    return api.get(`/applications/${appId}/versions`)
+  },
+  createVersion(appId, data) {
+    return api.post(`/applications/${appId}/versions`, data)
+  },
+  // Get PCs that have this app installed
+  getInstalledOn(appId) {
+    return api.get(`/applications/${appId}/installed`)
+  },
+  // Machine applications (installed apps)
+  getMachineApps(machineId) {
+    return api.get(`/applications/machines/${machineId}`)
+  },
+  installApp(machineId, data) {
+    return api.post(`/applications/machines/${machineId}`, data)
+  },
+  uninstallApp(machineId, appId) {
+    return api.delete(`/applications/machines/${machineId}/${appId}`)
+  },
+  updateInstalledApp(machineId, appId, data) {
+    return api.put(`/applications/machines/${machineId}/${appId}`, data)
+  },
+  // Support teams
+  getSupportTeams() {
+    return api.get('/applications/supportteams')
+  },
+  createSupportTeam(data) {
+    return api.post('/applications/supportteams', data)
+  },
+  // App owners
+  getAppOwners() {
+    return api.get('/applications/appowners')
+  },
+  createAppOwner(data) {
+    return api.post('/applications/appowners', data)
+  }
+}
+
+// Search API
+export const searchApi = {
+  search(query) {
+    return api.get('/search', { params: { q: query } })
+  }
+}
+
+// Knowledge Base API
+export const knowledgebaseApi = {
+  list(params = {}) {
+    return api.get('/knowledgebase', { params })
+  },
+  get(id) {
+    return api.get(`/knowledgebase/${id}`)
+  },
+  create(data) {
+    return api.post('/knowledgebase', data)
+  },
+  update(id, data) {
+    return api.put(`/knowledgebase/${id}`, data)
+  },
+  delete(id) {
+    return api.delete(`/knowledgebase/${id}`)
+  },
+  trackClick(id) {
+    return api.post(`/knowledgebase/${id}/click`)
+  },
+  getStats() {
+    return api.get('/knowledgebase/stats')
+  }
+}
diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css
new file mode 100644
index 0000000..c31fd95
--- /dev/null
+++ b/frontend/src/assets/style.css
@@ -0,0 +1,1054 @@
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary: #2563eb;
+  --primary-dark: #1d4ed8;
+  --secondary: #64748b;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --bg: #f8fafc;
+  --bg-card: #ffffff;
+  --text: #1e293b;
+  --text-light: #64748b;
+  --border: #e2e8f0;
+  --link: #2563eb;
+  --sidebar-width: 280px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  font-size: 18px;
+}
+
+/* Links */
+a {
+  color: var(--link);
+  text-decoration: none;
+}
+
+/* Only underline text links on hover, not card/button links */
+a:hover {
+  text-decoration: none;
+}
+
+/* Inline text links get underline on hover (exclude buttons) */
+p a:not(.btn):hover,
+td a:not(.btn):hover,
+.info-value a:not(.btn):hover,
+.notes-text a:not(.btn):hover {
+  text-decoration: underline;
+}
+
+/* Layout */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+}
+
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--text);
+  color: white;
+  padding: 1.25rem 0;
+  position: fixed;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.sidebar-header {
+  padding: 1.25rem;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  margin-bottom: 1.25rem;
+  text-align: center;
+}
+
+.sidebar-header h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.sidebar-logo {
+  width: 100%;
+  max-width: 200px;
+  height: auto;
+  margin-bottom: 0.75rem;
+  filter: brightness(0) invert(1);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.sidebar-search {
+  padding: 0 1.25rem 1.25rem;
+}
+
+.sidebar-search input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 6px;
+  background: rgba(255,255,255,0.1);
+  color: white;
+  font-size: 1.125rem;
+}
+
+.sidebar-search input::placeholder {
+  color: rgba(255,255,255,0.5);
+}
+
+.sidebar-search input:focus {
+  outline: none;
+  border-color: var(--primary);
+  background: rgba(255,255,255,0.15);
+}
+
+.sidebar-nav a {
+  display: flex;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  color: rgba(255,255,255,0.7);
+  text-decoration: none;
+  transition: all 0.2s;
+  font-size: 1.125rem;
+}
+
+.sidebar-nav a:hover,
+.sidebar-nav a.active {
+  background: rgba(255,255,255,0.1);
+  color: white;
+}
+
+.sidebar-nav a.active {
+  border-left: 4px solid var(--primary);
+}
+
+.main-content {
+  flex: 1;
+  margin-left: var(--sidebar-width);
+  padding: 2rem;
+}
+
+/* Header */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.page-header h2 {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+/* Cards */
+.card {
+  background: var(--bg-card);
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: 1.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.card-header h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+/* Dashboard widgets */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.25rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: var(--bg-card);
+  border-radius: 10px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.stat-card .label {
+  font-size: 1rem;
+  color: var(--text-light);
+  margin-bottom: 0.5rem;
+}
+
+.stat-card .value {
+  font-size: 2.25rem;
+  font-weight: 600;
+}
+
+.stat-card.success .value { color: var(--success); }
+.stat-card.warning .value { color: var(--warning); }
+.stat-card.danger .value { color: var(--danger); }
+
+/* Tables */
+.table-container {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+tr {
+  border-bottom: 1px solid var(--border);
+}
+
+th, td {
+  padding: 1rem 1.25rem;
+  text-align: left;
+  font-size: 1.125rem;
+  vertical-align: middle;
+}
+
+th {
+  font-weight: 600;
+  font-size: 1.0625rem;
+  color: var(--text-light);
+  background: var(--bg);
+}
+
+th.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+th.sortable:hover {
+  color: var(--text);
+}
+
+.sort-arrow {
+  margin-left: 0.25rem;
+  font-size: 0.75rem;
+}
+
+tr:hover {
+  background: var(--bg);
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 1.125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  vertical-align: middle;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--primary-dark);
+}
+
+.btn-secondary {
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+  background: var(--border);
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+}
+
+.btn-sm {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  line-height: 1;
+}
+
+/* Forms */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 1.125rem;
+  transition: border-color 0.2s;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+select.form-control {
+  background: white;
+}
+
+/* Form grid */
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.25rem;
+}
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 0.5rem 0.875rem;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.badge-success { background: #dcfce7; color: #166534; }
+.badge-warning { background: #fef3c7; color: #92400e; }
+.badge-danger { background: #fee2e2; color: #991b1b; }
+.badge-info { background: #dbeafe; color: #1e40af; }
+
+/* Login page */
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+}
+
+.login-box {
+  background: white;
+  padding: 2.5rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  width: 100%;
+  max-width: 450px;
+}
+
+.login-box h1 {
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 1.75rem;
+}
+
+.login-box .btn {
+  width: 100%;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.error-message {
+  background: #fee2e2;
+  color: #991b1b;
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 1.25rem;
+  font-size: 1rem;
+}
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: white;
+  border-radius: 10px;
+  width: 100%;
+  max-width: 600px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-header h3 {
+  font-size: 1.375rem;
+  font-weight: 600;
+}
+
+.modal-body {
+  padding: 1.75rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1.25rem 1.75rem;
+  border-top: 1px solid var(--border);
+}
+
+/* Search and filters */
+.filters {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.filters input[type="text"],
+.filters input.form-control {
+  flex: 1;
+  min-width: 200px;
+}
+
+.filters select,
+.filters select.form-control {
+  width: 220px;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 0.375rem;
+  margin-top: 1.5rem;
+}
+
+.pagination button {
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--border);
+  background: white;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.pagination button:hover {
+  background: var(--bg);
+}
+
+.pagination button.active {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+/* Loading */
+.loading {
+  text-align: center;
+  padding: 2.5rem;
+  color: var(--text-light);
+  font-size: 1.125rem;
+}
+
+/* User menu */
+.user-menu {
+  padding: 1.25rem;
+  border-top: 1px solid rgba(255,255,255,0.1);
+  margin-top: auto;
+}
+
+.user-menu .username {
+  font-size: 1rem;
+  margin-bottom: 0.625rem;
+}
+
+.user-menu .btn {
+  width: 100%;
+  justify-content: center;
+}
+
+/* Action buttons in tables */
+.actions {
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+td.actions {
+  white-space: nowrap;
+}
+
+/* ============================================
+   DETAIL PAGES (shared styles)
+   ============================================ */
+.detail-page {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+/* Hero Card */
+.hero-card {
+  display: flex;
+  gap: 2.5rem;
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.hero-image {
+  flex-shrink: 0;
+}
+
+.hero-image img {
+  width: 220px;
+  height: 220px;
+  object-fit: contain;
+  background: var(--bg);
+  border-radius: 10px;
+  padding: 1.25rem;
+}
+
+.hero-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.hero-title {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.hero-title h1 {
+  font-size: 2.75rem;
+  font-weight: 700;
+  margin: 0;
+  color: var(--text);
+}
+
+.hero-alias {
+  font-size: 1.75rem;
+  color: var(--text-light);
+}
+
+.hero-meta {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.badge-lg {
+  padding: 0.5rem 1rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 6px;
+}
+
+.hero-details {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2.5rem;
+  margin-top: auto;
+}
+
+.hero-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.hero-detail-label {
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-light);
+}
+
+.hero-detail-value {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.hero-detail-value.mono {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 1.1rem;
+}
+
+/* Content Grid */
+.content-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.content-column {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Section Cards */
+.section-card {
+  background: var(--bg-card);
+  border-radius: 10px;
+  padding: 1.75rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+}
+
+.section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-light);
+  margin: 0 0 1.25rem 0;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+/* Info List */
+.info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.info-label {
+  font-size: 1.125rem;
+  color: var(--text-light);
+}
+
+.info-value {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--text);
+  text-align: right;
+}
+
+.info-value.mono, .mono {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 1rem;
+}
+
+/* Feature Tags */
+.feature-tag {
+  display: inline-block;
+  padding: 0.3rem 0.625rem;
+  margin-left: 0.375rem;
+  font-size: 0.875rem;
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--text-light);
+}
+
+.feature-tag.active {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+/* Empty State */
+.empty-message {
+  color: var(--text-light);
+  font-size: 1.125rem;
+  font-style: italic;
+}
+
+/* Connected Device */
+.connected-device {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.25rem;
+}
+
+.device-link {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.device-link:hover .device-name {
+  color: var(--link);
+}
+
+.device-icon {
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e3f2fd;
+  border-radius: 10px;
+  color: #1976d2;
+}
+
+.device-icon svg {
+  width: 28px;
+  height: 28px;
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.device-name {
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.device-alias {
+  font-size: 1rem;
+  color: var(--text-light);
+}
+
+.connection-type {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.95rem;
+  background: #e8f5e9;
+  color: #2e7d32;
+  border-radius: 5px;
+}
+
+/* Equipment List */
+.equipment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.equipment-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: var(--bg);
+  border-radius: 8px;
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.15s;
+}
+
+.equipment-item:hover {
+  background: var(--border);
+}
+
+.equipment-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.equipment-name {
+  font-weight: 500;
+  font-size: 1.125rem;
+}
+
+.equipment-alias {
+  font-size: 1rem;
+  color: var(--text-light);
+}
+
+.connection-tag {
+  padding: 0.3rem 0.625rem;
+  font-size: 0.875rem;
+  background: #e8f5e9;
+  color: #2e7d32;
+  border-radius: 5px;
+}
+
+/* Network */
+.network-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.network-item {
+  padding: 1rem;
+  background: var(--bg);
+  border-radius: 8px;
+}
+
+.network-primary {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ip-address {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.primary-badge {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  background: #4caf50;
+  color: white;
+  border-radius: 4px;
+}
+
+.network-secondary {
+  margin-top: 0.375rem;
+}
+
+.mac-address {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 1rem;
+  color: var(--text-light);
+}
+
+/* Notes */
+.notes-text {
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.7;
+  color: var(--text);
+}
+
+/* Audit Footer */
+.audit-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 1.25rem;
+  margin-top: 2rem;
+  font-size: 1rem;
+  color: var(--text-light);
+  border-top: 1px solid var(--border);
+}
+
+/* Location link */
+.location-link {
+  color: var(--link);
+  cursor: pointer;
+  border-bottom: 1px dashed var(--link);
+}
+
+.location-link:hover {
+  color: var(--link);
+  opacity: 0.8;
+}
+
+/* Badge colors for detail pages */
+.badge-primary {
+  background: var(--primary);
+  color: white;
+}
+
+.badge-printer {
+  background: #9c27b0;
+  color: white;
+}
+
+/* Responsive detail pages */
+@media (max-width: 768px) {
+  .hero-card {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .hero-title {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .hero-details {
+    justify-content: center;
+  }
+
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .audit-footer {
+    flex-direction: column;
+    gap: 0.375rem;
+    text-align: center;
+  }
+}
+
+/* ============================================
+   DARK MODE
+   ============================================ */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: #3b82f6;
+    --primary-dark: #2563eb;
+    --secondary: #94a3b8;
+    --success: #22c55e;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --bg: #0f172a;
+    --bg-card: #1e293b;
+    --text: #e2e8f0;
+    --text-light: #94a3b8;
+    --border: #334155;
+    --link: #60a5fa;
+  }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+  }
+
+  .sidebar {
+    background: #0f172a;
+  }
+
+  .card, .stat-card, .section-card, .hero-card {
+    background: var(--bg-card);
+  }
+
+  table th {
+    background: #0f172a;
+    color: var(--text-light);
+  }
+
+  table tr:hover {
+    background: #0f172a;
+  }
+
+  .btn-secondary {
+    background: var(--bg-card);
+    color: var(--text);
+    border-color: var(--border);
+  }
+
+  .btn-secondary:hover {
+    background: var(--border);
+  }
+
+  .form-control {
+    background: var(--bg-card);
+    border-color: var(--border);
+    color: var(--text);
+  }
+
+  select.form-control {
+    background: var(--bg-card);
+  }
+
+  .modal {
+    background: var(--bg-card);
+  }
+
+  .pagination button {
+    background: var(--bg-card);
+    border-color: var(--border);
+    color: var(--text);
+  }
+
+  .pagination button:hover {
+    background: var(--border);
+  }
+
+  .login-box {
+    background: var(--bg-card);
+  }
+
+  .hero-image img {
+    background: #0f172a;
+  }
+
+  .equipment-item, .network-item {
+    background: #0f172a;
+  }
+
+  .equipment-item:hover {
+    background: var(--border);
+  }
+
+  .feature-tag {
+    background: #334155;
+    color: #94a3b8;
+  }
+
+  .feature-tag.active {
+    background: #1e3a5f;
+    color: #60a5fa;
+  }
+
+  .device-icon {
+    background: #1e3a5f;
+    color: #60a5fa;
+  }
+
+  .connection-type, .connection-tag {
+    background: #14532d;
+    color: #4ade80;
+  }
+
+  .badge-success { background: #166534; color: #4ade80; }
+  .badge-warning { background: #92400e; color: #fbbf24; }
+  .badge-danger { background: #991b1b; color: #f87171; }
+  .badge-info { background: #1e40af; color: #60a5fa; }
+
+  .sidebar-logo {
+    filter: brightness(0) invert(1);
+  }
+}
diff --git a/frontend/src/components/LocationMapTooltip.vue b/frontend/src/components/LocationMapTooltip.vue
new file mode 100644
index 0000000..6421b59
--- /dev/null
+++ b/frontend/src/components/LocationMapTooltip.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="location-tooltip-wrapper" @mouseenter="showTooltip" @mouseleave="onWrapperLeave">
+    <slot></slot>
+    <Teleport to="body">
+      <div
+        v-if="visible && hasPosition"
+        class="map-tooltip"
+        :style="tooltipStyle"
+        ref="tooltipRef"
+        @mouseenter="onTooltipEnter"
+        @mouseleave="onTooltipLeave"
+        @wheel.prevent="onWheel"
+      >
+        <div class="map-tooltip-content">
+          <div class="map-preview" ref="mapPreview">
+            <div
+              class="map-transform"
+              :style="transformStyle"
+            >
+              <img
+                :src="blueprintUrl"
+                alt="Shop Floor Map"
+                class="map-image"
+                @load="onImageLoad"
+              />
+              <!-- Marker dot -->
+              <div
+                class="marker-dot"
+                :style="markerStyle"
+              ></div>
+            </div>
+          </div>
+          <div class="map-tooltip-footer">
+            <span class="coordinates">{{ left }}, {{ top }}</span>
+            <span class="zoom-hint">Scroll to zoom</span>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue'
+
+const props = defineProps({
+  left: { type: Number, default: null },
+  top: { type: Number, default: null },
+  machineName: { type: String, default: '' },
+  theme: { type: String, default: 'dark' }
+})
+
+const visible = ref(false)
+const tooltipRef = ref(null)
+const mapPreview = ref(null)
+const tooltipPosition = ref({ x: 0, y: 0 })
+const isOverTooltip = ref(false)
+const zoom = ref(1)
+const imageLoaded = ref(false)
+
+// Map dimensions
+const MAP_WIDTH = 3300
+const MAP_HEIGHT = 2550
+
+const hasPosition = computed(() => {
+  return props.left !== null && props.top !== null
+})
+
+const blueprintUrl = computed(() => {
+  return props.theme === 'light'
+    ? '/static/images/sitemap2025-light.png'
+    : '/static/images/sitemap2025-dark.png'
+})
+
+// Calculate marker position as percentage
+const markerX = computed(() => {
+  return (props.left / MAP_WIDTH) * 100
+})
+
+const markerY = computed(() => {
+  return (props.top / MAP_HEIGHT) * 100
+})
+
+// Marker style with counter-scale to maintain constant size
+const markerStyle = computed(() => ({
+  left: markerX.value + '%',
+  top: markerY.value + '%',
+  transform: `translate(-50%, -50%) scale(${1 / zoom.value})`
+}))
+
+// Transform style that centers on the marker and zooms toward it
+const transformStyle = computed(() => {
+  // Calculate translation to center the marker in the preview
+  const translateX = 50 - markerX.value
+  const translateY = 50 - markerY.value
+
+  return {
+    transform: `translate(${translateX}%, ${translateY}%) scale(${zoom.value})`,
+    transformOrigin: `${markerX.value}% ${markerY.value}%`
+  }
+})
+
+const tooltipStyle = computed(() => ({
+  left: `${tooltipPosition.value.x}px`,
+  top: `${tooltipPosition.value.y}px`
+}))
+
+function onImageLoad() {
+  imageLoaded.value = true
+}
+
+function showTooltip(event) {
+  if (!hasPosition.value) return
+
+  visible.value = true
+  zoom.value = 1
+
+  const rect = event.target.getBoundingClientRect()
+  tooltipPosition.value = {
+    x: rect.left + rect.width / 2,
+    y: rect.bottom + 10
+  }
+
+  nextTick(() => {
+    adjustPosition()
+  })
+}
+
+function onWrapperLeave() {
+  // Small delay to allow moving to tooltip
+  setTimeout(() => {
+    if (!isOverTooltip.value) {
+      hideTooltip()
+    }
+  }, 100)
+}
+
+function onTooltipEnter() {
+  isOverTooltip.value = true
+}
+
+function onTooltipLeave() {
+  isOverTooltip.value = false
+  hideTooltip()
+}
+
+function hideTooltip() {
+  visible.value = false
+  zoom.value = 1
+}
+
+function onWheel(event) {
+  const delta = event.deltaY > 0 ? -0.3 : 0.3
+  const newZoom = Math.max(1, Math.min(8, zoom.value + delta))
+  zoom.value = newZoom
+}
+
+function adjustPosition() {
+  if (!tooltipRef.value) return
+
+  const tooltip = tooltipRef.value
+  const rect = tooltip.getBoundingClientRect()
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  if (rect.right > viewportWidth - 20) {
+    tooltipPosition.value.x -= (rect.right - viewportWidth + 20)
+  }
+  if (rect.left < 20) {
+    tooltipPosition.value.x += (20 - rect.left)
+  }
+
+  if (rect.bottom > viewportHeight - 20) {
+    tooltipPosition.value.y = rect.top - tooltip.offsetHeight - 20
+  }
+}
+
+// Reset zoom when tooltip becomes visible
+watch(visible, (newVal) => {
+  if (newVal) {
+    zoom.value = 1
+  }
+})
+</script>
+
+<style scoped>
+.location-tooltip-wrapper {
+  display: inline;
+  cursor: pointer;
+}
+
+.location-tooltip-wrapper:hover {
+  color: var(--primary, #1976d2);
+}
+</style>
+
+<style>
+.map-tooltip {
+  position: fixed;
+  z-index: 10000;
+  transform: translateX(-50%);
+}
+
+.map-tooltip-content {
+  background: var(--bg-card);
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+  overflow: hidden;
+}
+
+.map-preview {
+  position: relative;
+  width: 500px;
+  height: 385px;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+.map-transform {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.15s ease-out;
+}
+
+.map-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.marker-dot {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background: #ff0000;
+  border: 2px solid var(--border);
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px rgba(255,0,0,0.3), 0 0 10px #ff0000;
+  pointer-events: none;
+}
+
+.map-tooltip-footer {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.coordinates {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 0.875rem;
+  color: var(--text-light);
+}
+
+.zoom-hint {
+  font-size: 0.75rem;
+  color: var(--text-light);
+}
+</style>
diff --git a/frontend/src/components/Modal.vue b/frontend/src/components/Modal.vue
new file mode 100644
index 0000000..dac2495
--- /dev/null
+++ b/frontend/src/components/Modal.vue
@@ -0,0 +1,144 @@
+<template>
+  <Teleport to="body">
+    <div v-if="modelValue" class="modal-overlay" @click.self="closeOnOverlay && close()">
+      <div class="modal-container" :class="sizeClass">
+        <div class="modal-header" v-if="title || $slots.header">
+          <slot name="header">
+            <h3>{{ title }}</h3>
+          </slot>
+          <button class="modal-close" @click="close" aria-label="Close">&times;</button>
+        </div>
+
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+
+        <div class="modal-footer" v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  size: { type: String, default: 'medium' }, // small, medium, large, fullscreen
+  closeOnOverlay: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+
+const sizeClass = computed(() => `modal-${props.size}`)
+
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+// Handle escape key
+watch(() => props.modelValue, (isOpen) => {
+  if (isOpen) {
+    document.addEventListener('keydown', handleEscape)
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.removeEventListener('keydown', handleEscape)
+    document.body.style.overflow = ''
+  }
+})
+
+function handleEscape(e) {
+  if (e.key === 'Escape') close()
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal-container {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  overflow: hidden;
+}
+
+.modal-small {
+  width: 400px;
+  max-width: 90vw;
+}
+
+.modal-medium {
+  width: 600px;
+  max-width: 90vw;
+}
+
+.modal-large {
+  width: 900px;
+  max-width: 95vw;
+}
+
+.modal-fullscreen {
+  width: 95vw;
+  height: 90vh;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #666;
+  padding: 0;
+  line-height: 1;
+}
+
+.modal-close:hover {
+  color: #333;
+}
+
+.modal-body {
+  flex: 1;
+  overflow: auto;
+  padding: 1.5rem;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+</style>
diff --git a/frontend/src/components/ShopFloorMap.vue b/frontend/src/components/ShopFloorMap.vue
new file mode 100644
index 0000000..927bfcd
--- /dev/null
+++ b/frontend/src/components/ShopFloorMap.vue
@@ -0,0 +1,589 @@
+<template>
+  <div class="shopfloor-map">
+    <div class="map-controls" v-if="!pickerMode">
+      <div class="filters">
+        <select v-model="filters.machinetype" @change="applyFilters">
+          <option value="">All Types</option>
+          <option v-for="t in machinetypes" :key="t.machinetypeid" :value="t.machinetypeid">
+            {{ t.machinetype }}
+          </option>
+        </select>
+
+        <select v-model="filters.businessunit" @change="applyFilters">
+          <option value="">All Business Units</option>
+          <option v-for="bu in businessunits" :key="bu.businessunitid" :value="bu.businessunitid">
+            {{ bu.businessunit }}
+          </option>
+        </select>
+
+        <select v-model="filters.status" @change="applyFilters">
+          <option value="">All Statuses</option>
+          <option v-for="s in statuses" :key="s.statusid" :value="s.statusid">
+            {{ s.status }}
+          </option>
+        </select>
+
+        <input
+          type="text"
+          v-model="filters.search"
+          placeholder="Search..."
+          @input="debounceSearch"
+        />
+      </div>
+
+      <div class="legend">
+        <span
+          v-for="t in visibleTypes"
+          :key="t.machinetypeid"
+          class="legend-item"
+        >
+          <span class="legend-dot" :style="{ background: getTypeColor(t.machinetype) }"></span>
+          {{ t.machinetype }}
+        </span>
+      </div>
+    </div>
+
+    <div class="picker-controls" v-if="pickerMode">
+      <span class="picker-message">Click on the map to set location</span>
+      <span v-if="pickedPosition" class="picker-coords">
+        Position: {{ pickedPosition.left }}, {{ pickedPosition.top }}
+      </span>
+      <button class="btn btn-secondary btn-sm" @click="clearPosition">Clear</button>
+    </div>
+
+    <div ref="mapContainer" class="map-container" :class="{ 'picker-active': pickerMode }"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+
+const props = defineProps({
+  machines: { type: Array, default: () => [] },
+  machinetypes: { type: Array, default: () => [] },
+  businessunits: { type: Array, default: () => [] },
+  statuses: { type: Array, default: () => [] },
+  theme: { type: String, default: 'dark' },
+  pickerMode: { type: Boolean, default: false },
+  initialPosition: { type: Object, default: null }  // { left, top }
+})
+
+const emit = defineEmits(['markerClick', 'positionPicked'])
+
+const mapContainer = ref(null)
+let map = null
+let imageOverlay = null
+const markers = ref([])
+const pickedPosition = ref(null)
+let pickerMarker = null
+
+const filters = ref({
+  machinetype: '',
+  businessunit: '',
+  status: '',
+  search: ''
+})
+
+// Map dimensions (matching old system)
+const MAP_WIDTH = 3300
+const MAP_HEIGHT = 2550
+const bounds = [[0, 0], [MAP_HEIGHT, MAP_WIDTH]]
+
+// Type colors - distinct colors for each machine type
+const typeColors = {
+  // Machining
+  'Mill': '#F44336',           // Red
+  'Lathe': '#E91E63',          // Pink
+  'Grinder': '#2196F3',        // Blue
+  'Broach': '#00BCD4',         // Cyan
+  'Hobbing': '#009688',        // Teal
+  'Turn': '#FF5722',           // Deep Orange (Mill Turn, Vertical Turn)
+
+  // Inspection & Measurement
+  'CMM': '#9C27B0',            // Purple
+  'Measuring': '#7B1FA2',      // Dark Purple
+  'Eddy': '#673AB7',           // Deep Purple
+  'Inspection': '#8BC34A',     // Light Green
+
+  // Heat Treatment & Processing
+  'Furnace': '#FF9800',        // Orange
+  'Wash': '#4CAF50',           // Green
+  'Wax': '#FFEB3B',            // Yellow
+
+  // Automation
+  'Robot': '#3F51B5',          // Indigo
+  'Deburr': '#5C6BC0',         // Indigo Light
+
+  // Welding
+  'Welder': '#795548',         // Brown
+
+  // IT/Network
+  'PC': '#607D8B',             // Blue Grey
+  'Printer': '#78909C',        // Blue Grey Light
+  'Switch': '#546E7A',         // Blue Grey Dark
+  'Access Point': '#455A64',   // Blue Grey Darker
+  'IDF': '#37474F',            // Blue Grey Very Dark
+
+  // Other
+  'Saw': '#8D6E63',            // Brown Light
+  'Press': '#A1887F',          // Brown Lighter
+  'EDM': '#00ACC1',            // Cyan Dark
+  'Drill': '#26A69A',          // Teal Light
+  'CNC': '#66BB6A',            // Green Light
+  'Assembly': '#CDDC39',       // Lime
+  'Other': '#BDBDBD'           // Grey
+}
+
+function getTypeColor(typeName) {
+  if (!typeName) return '#BDBDBD'
+  for (const [key, color] of Object.entries(typeColors)) {
+    if (typeName.toLowerCase().includes(key.toLowerCase())) {
+      return color
+    }
+  }
+  return '#BDBDBD'  // Grey for unknown types
+}
+
+// Get unique visible types from machines
+const visibleTypes = computed(() => {
+  const typeIds = new Set(props.machines.map(m => m.machinetypeid))
+  return props.machinetypes.filter(t => typeIds.has(t.machinetypeid))
+})
+
+function initMap() {
+  if (!mapContainer.value) return
+
+  map = L.map(mapContainer.value, {
+    crs: L.CRS.Simple,
+    minZoom: -4,
+    maxZoom: 2
+  })
+
+  const blueprintUrl = props.theme === 'light'
+    ? '/static/images/sitemap2025-light.png'
+    : '/static/images/sitemap2025-dark.png'
+
+  imageOverlay = L.imageOverlay(blueprintUrl, bounds)
+  imageOverlay.addTo(map)
+
+  // Set initial view
+  const initialZoom = -1
+  map.setView([MAP_HEIGHT / 2, MAP_WIDTH / 2], initialZoom)
+  map.setMaxBounds(bounds)
+
+  // Picker mode: click to set position
+  if (props.pickerMode) {
+    map.on('click', handleMapClick)
+
+    // Show initial position if provided
+    if (props.initialPosition) {
+      setPickerPosition(props.initialPosition.left, props.initialPosition.top)
+    }
+  } else {
+    renderMarkers()
+  }
+}
+
+function handleMapClick(e) {
+  if (!props.pickerMode) return
+
+  const leafletY = e.latlng.lat
+  const leafletX = e.latlng.lng
+
+  // Convert back to database coordinates
+  const dbLeft = Math.round(leafletX)
+  const dbTop = Math.round(MAP_HEIGHT - leafletY)
+
+  setPickerPosition(dbLeft, dbTop)
+}
+
+function setPickerPosition(left, top) {
+  // Remove old picker marker
+  if (pickerMarker) {
+    pickerMarker.remove()
+  }
+
+  pickedPosition.value = { left, top }
+
+  // Convert to Leaflet coordinates
+  const leafletY = MAP_HEIGHT - top
+  const leafletX = left
+
+  const icon = L.divIcon({
+    html: `<div class="picker-marker-dot"></div>`,
+    iconSize: [16, 16],
+    iconAnchor: [8, 8],
+    className: 'picker-marker'
+  })
+
+  pickerMarker = L.marker([leafletY, leafletX], { icon, draggable: true })
+  pickerMarker.addTo(map)
+
+  // Allow dragging to fine-tune position
+  pickerMarker.on('dragend', () => {
+    const pos = pickerMarker.getLatLng()
+    const newLeft = Math.round(pos.lng)
+    const newTop = Math.round(MAP_HEIGHT - pos.lat)
+    pickedPosition.value = { left: newLeft, top: newTop }
+    emit('positionPicked', pickedPosition.value)
+  })
+
+  emit('positionPicked', pickedPosition.value)
+}
+
+function clearPosition() {
+  if (pickerMarker) {
+    pickerMarker.remove()
+    pickerMarker = null
+  }
+  pickedPosition.value = null
+  emit('positionPicked', null)
+}
+
+// Get the detail page route based on machine category
+// Extensible for future addon types (network, cameras, etc.)
+function getDetailRoute(machine) {
+  const category = machine.category?.toLowerCase() || ''
+  const routeMap = {
+    'equipment': '/machines',
+    'pc': '/pcs',
+    'printer': '/printers',
+    // Future addon routes can be added here:
+    // 'network': '/network',
+    // 'camera': '/cameras',
+  }
+  const basePath = routeMap[category] || '/machines'
+  return `${basePath}/${machine.machineid}`
+}
+
+function renderMarkers() {
+  // Clear existing markers
+  markers.value.forEach(m => m.marker.remove())
+  markers.value = []
+
+  props.machines.forEach(machine => {
+    if (machine.mapleft == null || machine.maptop == null) return
+
+    // Transform coordinates (database Y is top-down, Leaflet is bottom-up)
+    const leafletY = MAP_HEIGHT - machine.maptop
+    const leafletX = machine.mapleft
+
+    const typeName = machine.machinetype || ''
+    const color = getTypeColor(typeName)
+
+    const icon = L.divIcon({
+      html: `<div class="machine-marker-dot" style="background: ${color};"></div>`,
+      iconSize: [24, 24],
+      iconAnchor: [12, 12],
+      popupAnchor: [0, -12],
+      className: 'machine-marker'
+    })
+
+    const marker = L.marker([leafletY, leafletX], { icon })
+
+    // Display name for tooltips and popups
+    const displayName = machine.alias || machine.machinenumber || 'Unknown'
+    const detailRoute = getDetailRoute(machine)
+    const category = machine.category?.toLowerCase() || ''
+
+    // Build tooltip content based on category
+    let tooltipLines = [`<strong>${displayName}</strong>`]
+
+    // Don't show "LocationOnly" as machine type
+    if (typeName && typeName.toLowerCase() !== 'locationonly') {
+      tooltipLines.push(`<span style="color: #888;">${typeName}</span>`)
+    }
+
+    // Add vendor and model if available
+    if (machine.vendor) {
+      tooltipLines.push(`<span style="color: #aaa;">${machine.vendor}${machine.model ? ' ' + machine.model : ''}</span>`)
+    } else if (machine.model) {
+      tooltipLines.push(`<span style="color: #aaa;">${machine.model}</span>`)
+    }
+
+    // Category-specific info
+    if (category === 'printer') {
+      // Printers: show IP and hostname
+      if (machine.ipaddress) {
+        tooltipLines.push(`<span style="color: #8cf;">IP: ${machine.ipaddress}</span>`)
+      }
+      if (machine.hostname) {
+        tooltipLines.push(`<span style="color: #8cf;">${machine.hostname}</span>`)
+      }
+    } else {
+      // Equipment/PC: show connected PC if available
+      if (machine.connected_pc) {
+        tooltipLines.push(`<span style="color: #fc8;">PC: ${machine.connected_pc}</span>`)
+      }
+    }
+
+    // Business unit
+    if (machine.businessunit) {
+      tooltipLines.push(`<span style="color: #ccc;">${machine.businessunit}</span>`)
+    }
+
+    const tooltipContent = tooltipLines.join('<br>')
+    marker.bindTooltip(tooltipContent, {
+      direction: 'top',
+      offset: [0, -12],
+      className: 'marker-tooltip'
+    })
+
+    // Click popup (detailed info)
+    const popupContent = `
+      <div class="marker-popup">
+        <strong>${displayName}</strong>
+        <div class="popup-details">
+          <div><span class="label">Number:</span> ${machine.machinenumber || '-'}</div>
+          <div><span class="label">Type:</span> ${typeName || '-'}</div>
+          <div><span class="label">Category:</span> ${machine.category || '-'}</div>
+          <div><span class="label">Status:</span> ${machine.status || '-'}</div>
+          <div><span class="label">Vendor:</span> ${machine.vendor || '-'}</div>
+          <div><span class="label">Model:</span> ${machine.model || '-'}</div>
+        </div>
+        <a href="${detailRoute}" class="popup-link">View Details</a>
+      </div>
+    `
+
+    marker.bindPopup(popupContent)
+    marker.on('click', () => emit('markerClick', machine))
+
+    marker.addTo(map)
+
+    markers.value.push({
+      marker,
+      machine,
+      searchData: `${machine.machinenumber} ${machine.alias} ${typeName} ${machine.vendor} ${machine.model} ${machine.serialnumber} ${machine.businessunit}`.toLowerCase()
+    })
+  })
+
+  applyFilters()
+}
+
+function applyFilters() {
+  const searchTerm = filters.value.search.toLowerCase()
+
+  markers.value.forEach(({ marker, machine, searchData }) => {
+    let visible = true
+
+    if (filters.value.machinetype && machine.machinetypeid !== filters.value.machinetype) {
+      visible = false
+    }
+    if (filters.value.businessunit && machine.businessunitid !== filters.value.businessunit) {
+      visible = false
+    }
+    if (filters.value.status && machine.statusid !== filters.value.status) {
+      visible = false
+    }
+    if (searchTerm && !searchData.includes(searchTerm)) {
+      visible = false
+    }
+
+    marker.setOpacity(visible ? 1 : 0.15)
+  })
+}
+
+let searchTimeout = null
+function debounceSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(applyFilters, 300)
+}
+
+watch(() => props.machines, () => {
+  if (map) renderMarkers()
+}, { deep: true })
+
+watch(() => props.theme, (newTheme) => {
+  if (imageOverlay && map) {
+    const blueprintUrl = newTheme === 'light'
+      ? '/static/images/sitemap2025-light.png'
+      : '/static/images/sitemap2025-dark.png'
+    imageOverlay.setUrl(blueprintUrl)
+  }
+})
+
+onMounted(() => {
+  initMap()
+})
+
+onUnmounted(() => {
+  if (map) {
+    map.remove()
+    map = null
+  }
+})
+</script>
+
+<style scoped>
+.shopfloor-map {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.map-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.filters {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.filters select,
+.filters input {
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 1.125rem;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.filters input {
+  width: 280px;
+}
+
+.filters input::placeholder {
+  color: var(--text-light);
+}
+
+.legend {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  font-size: 1.125rem;
+  color: var(--text);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.legend-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--bg-card);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+}
+
+.map-container {
+  flex: 1;
+  min-height: 600px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+}
+
+.map-container.picker-active {
+  cursor: crosshair;
+}
+
+.picker-controls {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 1rem;
+  background: var(--warning);
+  border-bottom: 1px solid var(--warning);
+  font-size: 1.125rem;
+}
+
+.picker-message {
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.picker-coords {
+  font-family: monospace;
+  background: var(--bg-card);
+  color: var(--text);
+  padding: 0.375rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  font-size: 1.125rem;
+}
+
+:deep(.marker-popup) {
+  min-width: 320px;
+}
+
+:deep(.marker-popup strong) {
+  display: block;
+  margin-bottom: 0.625rem;
+  font-size: 1.5rem;
+}
+
+:deep(.popup-details) {
+  font-size: 1.125rem;
+  line-height: 1.9;
+}
+
+:deep(.popup-details .label) {
+  color: #666;
+  font-weight: 500;
+}
+
+:deep(.popup-link) {
+  display: inline-block;
+  margin-top: 1rem;
+  color: #1976d2;
+  text-decoration: none;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+:deep(.popup-link:hover) {
+  text-decoration: underline;
+}
+
+:deep(.machine-marker) {
+  background: transparent !important;
+  border: none !important;
+}
+
+:deep(.machine-marker-dot) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 3px solid var(--border);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
+}
+
+:deep(.picker-marker-dot) {
+  background: #ff0000;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
+}
+
+:deep(.marker-tooltip) {
+  background: rgba(0, 0, 0, 0.92);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 18px;
+  font-size: 1.125rem;
+  line-height: 1.7;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  max-width: 400px;
+}
+
+:deep(.marker-tooltip::before) {
+  border-top-color: rgba(0, 0, 0, 0.92);
+}
+</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
new file mode 100644
index 0000000..ef5fb9d
--- /dev/null
+++ b/frontend/src/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
new file mode 100644
index 0000000..0a1c6ca
--- /dev/null
+++ b/frontend/src/router/index.js
@@ -0,0 +1,249 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+
+// Views
+import Login from '../views/Login.vue'
+import AppLayout from '../views/AppLayout.vue'
+import Dashboard from '../views/Dashboard.vue'
+import MachinesList from '../views/machines/MachinesList.vue'
+import MachineDetail from '../views/machines/MachineDetail.vue'
+import MachineForm from '../views/machines/MachineForm.vue'
+import PrintersList from '../views/printers/PrintersList.vue'
+import PrinterDetail from '../views/printers/PrinterDetail.vue'
+import PrinterForm from '../views/printers/PrinterForm.vue'
+import PCsList from '../views/pcs/PCsList.vue'
+import PCDetail from '../views/pcs/PCDetail.vue'
+import PCForm from '../views/pcs/PCForm.vue'
+import VendorsList from '../views/vendors/VendorsList.vue'
+import ApplicationsList from '../views/applications/ApplicationsList.vue'
+import ApplicationDetail from '../views/applications/ApplicationDetail.vue'
+import ApplicationForm from '../views/applications/ApplicationForm.vue'
+import KnowledgeBaseList from '../views/knowledgebase/KnowledgeBaseList.vue'
+import KnowledgeBaseDetail from '../views/knowledgebase/KnowledgeBaseDetail.vue'
+import KnowledgeBaseForm from '../views/knowledgebase/KnowledgeBaseForm.vue'
+import SearchResults from '../views/SearchResults.vue'
+import SettingsIndex from '../views/settings/SettingsIndex.vue'
+import MachineTypesList from '../views/settings/MachineTypesList.vue'
+import LocationsList from '../views/settings/LocationsList.vue'
+import StatusesList from '../views/settings/StatusesList.vue'
+import ModelsList from '../views/settings/ModelsList.vue'
+import PCTypesList from '../views/settings/PCTypesList.vue'
+import OperatingSystemsList from '../views/settings/OperatingSystemsList.vue'
+import BusinessUnitsList from '../views/settings/BusinessUnitsList.vue'
+import MapView from '../views/MapView.vue'
+
+const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: Login,
+    meta: { guest: true }
+  },
+  {
+    path: '/',
+    component: AppLayout,
+    children: [
+      {
+        path: '',
+        name: 'dashboard',
+        component: Dashboard
+      },
+      {
+        path: 'search',
+        name: 'search',
+        component: SearchResults
+      },
+      {
+        path: 'machines',
+        name: 'machines',
+        component: MachinesList
+      },
+      {
+        path: 'machines/new',
+        name: 'machine-new',
+        component: MachineForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'machines/:id',
+        name: 'machine-detail',
+        component: MachineDetail
+      },
+      {
+        path: 'machines/:id/edit',
+        name: 'machine-edit',
+        component: MachineForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'printers',
+        name: 'printers',
+        component: PrintersList
+      },
+      {
+        path: 'printers/new',
+        name: 'printer-new',
+        component: PrinterForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'printers/:id',
+        name: 'printer-detail',
+        component: PrinterDetail
+      },
+      {
+        path: 'printers/:id/edit',
+        name: 'printer-edit',
+        component: PrinterForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'pcs',
+        name: 'pcs',
+        component: PCsList
+      },
+      {
+        path: 'pcs/new',
+        name: 'pc-new',
+        component: PCForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'pcs/:id',
+        name: 'pc-detail',
+        component: PCDetail
+      },
+      {
+        path: 'pcs/:id/edit',
+        name: 'pc-edit',
+        component: PCForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'map',
+        name: 'map',
+        component: MapView
+      },
+      {
+        path: 'applications',
+        name: 'applications',
+        component: ApplicationsList
+      },
+      {
+        path: 'applications/new',
+        name: 'application-new',
+        component: ApplicationForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'applications/:id',
+        name: 'application-detail',
+        component: ApplicationDetail
+      },
+      {
+        path: 'applications/:id/edit',
+        name: 'application-edit',
+        component: ApplicationForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'knowledgebase',
+        name: 'knowledgebase',
+        component: KnowledgeBaseList
+      },
+      {
+        path: 'knowledgebase/new',
+        name: 'knowledgebase-new',
+        component: KnowledgeBaseForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'knowledgebase/:id',
+        name: 'knowledgebase-detail',
+        component: KnowledgeBaseDetail
+      },
+      {
+        path: 'knowledgebase/:id/edit',
+        name: 'knowledgebase-edit',
+        component: KnowledgeBaseForm,
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'settings',
+        name: 'settings',
+        component: SettingsIndex,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'settings/vendors',
+        name: 'vendors',
+        component: VendorsList,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'settings/machinetypes',
+        name: 'machinetypes',
+        component: MachineTypesList,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'settings/locations',
+        name: 'locations',
+        component: LocationsList,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'settings/statuses',
+        name: 'statuses',
+        component: StatusesList,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'settings/models',
+        name: 'models',
+        component: ModelsList,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'settings/pctypes',
+        name: 'pctypes',
+        component: PCTypesList,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'settings/operatingsystems',
+        name: 'operatingsystems',
+        component: OperatingSystemsList,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      },
+      {
+        path: 'settings/businessunits',
+        name: 'businessunits',
+        component: BusinessUnitsList,
+        meta: { requiresAuth: true, requiresAdmin: true }
+      }
+    ]
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// Navigation guard
+router.beforeEach((to, from, next) => {
+  const authStore = useAuthStore()
+
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    next('/login')
+  } else if (to.meta.requiresAdmin && !authStore.isAdmin) {
+    next('/')
+  } else if (to.meta.guest && authStore.isAuthenticated) {
+    next('/')
+  } else {
+    next()
+  }
+})
+
+export default router
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
new file mode 100644
index 0000000..a419b6b
--- /dev/null
+++ b/frontend/src/stores/auth.js
@@ -0,0 +1,63 @@
+import { defineStore } from 'pinia'
+import { authApi } from '../api'
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    user: JSON.parse(localStorage.getItem('user') || 'null'),
+    token: localStorage.getItem('token') || null
+  }),
+
+  getters: {
+    isAuthenticated: (state) => !!state.token,
+    username: (state) => state.user?.username || '',
+    roles: (state) => state.user?.roles || [],
+    hasRole: (state) => (role) => state.user?.roles?.includes(role) || false,
+    isAdmin: (state) => state.user?.roles?.includes('admin') || false
+  },
+
+  actions: {
+    async login(username, password) {
+      try {
+        const response = await authApi.login(username, password)
+        const { access_token, refresh_token, user } = response.data.data
+
+        this.token = access_token
+        this.user = user
+
+        localStorage.setItem('token', access_token)
+        localStorage.setItem('refreshToken', refresh_token)
+        localStorage.setItem('user', JSON.stringify(user))
+
+        return { success: true }
+      } catch (error) {
+        const message = error.response?.data?.message || 'Login failed'
+        return { success: false, message }
+      }
+    },
+
+    async logout() {
+      try {
+        await authApi.logout()
+      } catch (e) {
+        // Ignore logout errors
+      }
+
+      this.token = null
+      this.user = null
+
+      localStorage.removeItem('token')
+      localStorage.removeItem('refreshToken')
+      localStorage.removeItem('user')
+    },
+
+    async fetchUser() {
+      try {
+        const response = await authApi.me()
+        this.user = response.data.data
+        localStorage.setItem('user', JSON.stringify(this.user))
+      } catch (error) {
+        this.logout()
+      }
+    }
+  }
+})
diff --git a/frontend/src/views/AppLayout.vue b/frontend/src/views/AppLayout.vue
new file mode 100644
index 0000000..6ac6bbc
--- /dev/null
+++ b/frontend/src/views/AppLayout.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="app-layout">
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <img src="/ge-aerospace-logo.svg" alt="GE Aerospace" class="sidebar-logo" />
+        <h1>West Jefferson</h1>
+      </div>
+
+      <div class="sidebar-search">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Search..."
+          @keyup.enter="performSearch"
+        />
+      </div>
+
+      <nav class="sidebar-nav">
+        <router-link to="/">Dashboard</router-link>
+        <router-link to="/map">Map</router-link>
+        <router-link to="/machines">Equipment</router-link>
+        <router-link to="/pcs">PCs</router-link>
+        <router-link to="/printers">Printers</router-link>
+        <router-link to="/applications">Applications</router-link>
+        <router-link to="/knowledgebase">Knowledge Base</router-link>
+        <router-link v-if="authStore.isAdmin" to="/settings">Settings</router-link>
+      </nav>
+
+      <div class="user-menu">
+        <template v-if="authStore.isAuthenticated">
+          <div class="username">{{ authStore.username }}</div>
+          <button class="btn btn-secondary" @click="handleLogout">Logout</button>
+        </template>
+        <router-link v-else to="/login" class="btn btn-primary">Login</router-link>
+      </div>
+    </aside>
+
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const searchQuery = ref('')
+
+function performSearch() {
+  if (searchQuery.value.trim()) {
+    router.push({ path: '/search', query: { q: searchQuery.value.trim() } })
+    searchQuery.value = ''
+  }
+}
+
+async function handleLogout() {
+  await authStore.logout()
+  router.push('/login')
+}
+</script>
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
new file mode 100644
index 0000000..7ed9064
--- /dev/null
+++ b/frontend/src/views/Dashboard.vue
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Dashboard</h2>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <template v-else>
+      <!-- Main Stats -->
+      <div class="dashboard-grid">
+        <div class="stat-card">
+          <div class="label">Total Machines</div>
+          <div class="value">{{ stats.totalmachines || 0 }}</div>
+        </div>
+        <div class="stat-card success">
+          <div class="label">Active</div>
+          <div class="value">{{ stats.activemachines || 0 }}</div>
+        </div>
+        <div class="stat-card warning">
+          <div class="label">In Repair</div>
+          <div class="value">{{ stats.inrepair || 0 }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="label">PCs</div>
+          <div class="value">{{ stats.totalpc || 0 }}</div>
+        </div>
+      </div>
+
+      <!-- Printer Stats -->
+      <div class="card">
+        <div class="card-header">
+          <h3>Printers</h3>
+          <router-link to="/printers" class="btn btn-secondary btn-sm">View All</router-link>
+        </div>
+
+        <div class="dashboard-grid">
+          <div class="stat-card">
+            <div class="label">Total Printers</div>
+            <div class="value">{{ printerStats.totalprinters || 0 }}</div>
+          </div>
+          <div class="stat-card success">
+            <div class="label">Online</div>
+            <div class="value">{{ printerStats.online || 0 }}</div>
+          </div>
+          <div class="stat-card warning">
+            <div class="label">Low Supplies</div>
+            <div class="value">{{ printerStats.lowsupplies || 0 }}</div>
+          </div>
+          <div class="stat-card danger">
+            <div class="label">Critical</div>
+            <div class="value">{{ printerStats.criticalsupplies || 0 }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Recent Machines -->
+      <div class="card">
+        <div class="card-header">
+          <h3>Recent Machines</h3>
+          <router-link to="/machines" class="btn btn-secondary btn-sm">View All</router-link>
+        </div>
+
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Machine #</th>
+                <th>Alias</th>
+                <th>Type</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="machine in recentMachines" :key="machine.machineid">
+                <td>{{ machine.machinenumber }}</td>
+                <td>{{ machine.alias || '-' }}</td>
+                <td>{{ machine.machinetype }}</td>
+                <td>
+                  <span class="badge" :class="getStatusClass(machine.status)">
+                    {{ machine.status || 'Unknown' }}
+                  </span>
+                </td>
+              </tr>
+              <tr v-if="recentMachines.length === 0">
+                <td colspan="4" style="text-align: center; color: var(--text-light);">
+                  No machines found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { dashboardApi, machinesApi, printersApi } from '../api'
+
+const loading = ref(true)
+const stats = ref({})
+const printerStats = ref({})
+const recentMachines = ref([])
+
+onMounted(async () => {
+  try {
+    const [dashRes, machinesRes, printersRes] = await Promise.all([
+      dashboardApi.summary().catch(() => ({ data: { data: {} } })),
+      machinesApi.list({ perpage: 5 }).catch(() => ({ data: { data: [] } })),
+      printersApi.dashboardSummary().catch(() => ({ data: { data: {} } }))
+    ])
+
+    stats.value = dashRes.data.data || {}
+    recentMachines.value = machinesRes.data.data || []
+    printerStats.value = printersRes.data.data || {}
+  } catch (error) {
+    console.error('Dashboard load error:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair') return 'badge-warning'
+  if (s === 'retired') return 'badge-danger'
+  return 'badge-info'
+}
+</script>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
new file mode 100644
index 0000000..d653a48
--- /dev/null
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="login-container">
+    <div class="login-box">
+      <h1>ShopDB</h1>
+
+      <div v-if="error" class="error-message">
+        {{ error }}
+      </div>
+
+      <form @submit.prevent="handleLogin">
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input
+            id="username"
+            v-model="username"
+            type="text"
+            class="form-control"
+            required
+            autofocus
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input
+            id="password"
+            v-model="password"
+            type="password"
+            class="form-control"
+            required
+          />
+        </div>
+
+        <button type="submit" class="btn btn-primary" :disabled="loading">
+          {{ loading ? 'Logging in...' : 'Login' }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const username = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleLogin() {
+  error.value = ''
+  loading.value = true
+
+  const result = await authStore.login(username.value, password.value)
+
+  loading.value = false
+
+  if (result.success) {
+    router.push('/')
+  } else {
+    error.value = result.message
+  }
+}
+</script>
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
new file mode 100644
index 0000000..81ef704
--- /dev/null
+++ b/frontend/src/views/MapView.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="map-page">
+    <div class="page-header">
+      <h2>Shop Floor Map</h2>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <ShopFloorMap
+      v-else
+      :machines="machines"
+      :machinetypes="machinetypes"
+      :businessunits="businessunits"
+      :statuses="statuses"
+      @markerClick="handleMarkerClick"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ShopFloorMap from '../components/ShopFloorMap.vue'
+import { machinesApi, machinetypesApi, businessunitsApi, statusesApi } from '../api'
+
+const router = useRouter()
+const loading = ref(true)
+const machines = ref([])
+const machinetypes = ref([])
+const businessunits = ref([])
+const statuses = ref([])
+
+onMounted(async () => {
+  try {
+    const [machinesRes, typesRes, busRes, statusRes] = await Promise.all([
+      machinesApi.list({ hasmap: true, all: true }),
+      machinetypesApi.list(),
+      businessunitsApi.list(),
+      statusesApi.list()
+    ])
+
+    machines.value = machinesRes.data.data || []
+    machinetypes.value = typesRes.data.data || []
+    businessunits.value = busRes.data.data || []
+    statuses.value = statusRes.data.data || []
+  } catch (error) {
+    console.error('Failed to load map data:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+function handleMarkerClick(machine) {
+  const category = machine.category?.toLowerCase() || ''
+  const routeMap = {
+    'equipment': '/machines',
+    'pc': '/pcs',
+    'printer': '/printers'
+  }
+  const basePath = routeMap[category] || '/machines'
+  router.push(`${basePath}/${machine.machineid}`)
+}
+</script>
+
+<style scoped>
+.map-page {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 2rem);
+}
+
+.map-page .page-header {
+  flex-shrink: 0;
+}
+
+.map-page :deep(.shopfloor-map) {
+  flex: 1;
+}
+</style>
diff --git a/frontend/src/views/SearchResults.vue b/frontend/src/views/SearchResults.vue
new file mode 100644
index 0000000..6383701
--- /dev/null
+++ b/frontend/src/views/SearchResults.vue
@@ -0,0 +1,267 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Search Results</h2>
+      <span v-if="results.length" class="results-count">
+        {{ results.length }} result{{ results.length !== 1 ? 's' : '' }} for "{{ query }}"
+      </span>
+    </div>
+
+    <div class="search-box">
+      <input
+        v-model="searchInput"
+        type="text"
+        class="form-control"
+        placeholder="Search machines, applications, knowledge base..."
+        @keyup.enter="performSearch"
+      />
+      <button class="btn btn-primary" @click="performSearch">Search</button>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Searching...</div>
+
+      <template v-else-if="query">
+        <div v-if="results.length === 0" class="no-results">
+          No results found for "{{ query }}"
+        </div>
+
+        <div v-else class="results-list">
+          <div
+            v-for="result in results"
+            :key="`${result.type}-${result.id}`"
+            class="result-item"
+          >
+            <span class="result-type" :class="result.type">{{ typeLabel(result.type) }}</span>
+            <div class="result-content">
+              <router-link v-if="result.type !== 'knowledgebase'" :to="result.url" class="result-title">
+                {{ result.title }}
+              </router-link>
+              <a
+                v-else
+                href="#"
+                class="result-title"
+                @click.prevent="openKBArticle(result)"
+              >
+                {{ result.title }}
+              </a>
+              <div class="result-meta">
+                <span v-if="result.subtitle" class="result-subtitle">{{ result.subtitle }}</span>
+                <span v-if="result.location" class="result-location">{{ result.location }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div v-else class="no-results">
+        Enter a search term to find machines, applications, printers, and knowledge base articles.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { searchApi, knowledgebaseApi } from '../api'
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(false)
+const results = ref([])
+const query = ref('')
+const searchInput = ref('')
+
+const typeLabels = {
+  machine: 'Equipment',
+  pc: 'PC',
+  application: 'App',
+  knowledgebase: 'KB',
+  printer: 'Printer'
+}
+
+function typeLabel(type) {
+  return typeLabels[type] || type
+}
+
+async function search(q) {
+  if (!q || q.length < 2) {
+    results.value = []
+    return
+  }
+
+  loading.value = true
+  try {
+    const response = await searchApi.search(q)
+    results.value = response.data.data?.results || []
+    query.value = q
+  } catch (error) {
+    console.error('Search error:', error)
+    results.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function performSearch() {
+  if (searchInput.value.trim()) {
+    router.push({ path: '/search', query: { q: searchInput.value.trim() } })
+  }
+}
+
+async function openKBArticle(result) {
+  // Track the click before opening
+  try {
+    await knowledgebaseApi.trackClick(result.id)
+    if (result.linkurl) {
+      window.open(result.linkurl, '_blank')
+    } else {
+      router.push(result.url)
+    }
+  } catch (error) {
+    console.error('Error tracking click:', error)
+    if (result.linkurl) {
+      window.open(result.linkurl, '_blank')
+    } else {
+      router.push(result.url)
+    }
+  }
+}
+
+onMounted(() => {
+  const q = route.query.q
+  if (q) {
+    searchInput.value = q
+    search(q)
+  }
+})
+
+watch(() => route.query.q, (newQ) => {
+  if (newQ) {
+    searchInput.value = newQ
+    search(newQ)
+  }
+})
+</script>
+
+<style scoped>
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.page-header h2 {
+  margin: 0;
+}
+
+.results-count {
+  color: var(--text-light, #666);
+  font-size: 0.9rem;
+}
+
+.search-box {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.search-box input {
+  flex: 1;
+}
+
+.no-results {
+  text-align: center;
+  color: var(--text-light, #666);
+  padding: 2rem;
+}
+
+.results-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.result-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border-color, #e5e5e5);
+}
+
+.result-item:last-child {
+  border-bottom: none;
+}
+
+.result-type {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  min-width: 70px;
+  text-align: center;
+}
+
+.result-type.machine {
+  background: #e3f2fd;
+  color: #1565c0;
+}
+
+.result-type.pc {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.result-type.application {
+  background: #fff3e0;
+  color: #e65100;
+}
+
+.result-type.knowledgebase {
+  background: #f3e5f5;
+  color: #7b1fa2;
+}
+
+.result-type.printer {
+  background: #fce4ec;
+  color: #c2185b;
+}
+
+.result-content {
+  flex: 1;
+}
+
+.result-title {
+  color: var(--primary, #1976d2);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.result-title:hover {
+  text-decoration: underline;
+}
+
+.result-meta {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--text-light, #666);
+}
+
+.result-subtitle {
+  color: var(--text-light, #666);
+}
+
+.result-location {
+  color: var(--text-light, #666);
+}
+
+.result-location::before {
+  content: '\1F4CD ';
+}
+</style>
diff --git a/frontend/src/views/applications/ApplicationDetail.vue b/frontend/src/views/applications/ApplicationDetail.vue
new file mode 100644
index 0000000..ae15a0b
--- /dev/null
+++ b/frontend/src/views/applications/ApplicationDetail.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="detail-page">
+    <div class="page-header">
+      <h2>Application Details</h2>
+      <div class="header-actions">
+        <router-link :to="`/applications/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
+        <router-link to="/applications" class="btn btn-secondary">Back to List</router-link>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <template v-else-if="app">
+      <!-- Hero Section -->
+      <div class="hero-card">
+        <div class="hero-image" v-if="app.image">
+          <img :src="`/images/applications/${app.image}`" :alt="app.appname" @error="handleImageError" />
+        </div>
+        <div class="hero-image placeholder" v-else>
+          <span class="placeholder-icon">&#x1F4E6;</span>
+        </div>
+        <div class="hero-content">
+          <div class="hero-title">
+            <h1>{{ app.appname }}</h1>
+          </div>
+          <p class="hero-description" v-if="app.appdescription">{{ app.appdescription }}</p>
+          <div class="hero-meta">
+            <span v-if="app.isinstallable" class="badge badge-lg badge-info">Installable</span>
+            <span v-if="app.islicenced" class="badge badge-lg badge-warning">Licensed</span>
+            <span v-if="app.isprinter" class="badge badge-lg badge-secondary">Printer App</span>
+            <span v-if="app.ishidden" class="badge badge-lg badge-dark">Hidden</span>
+          </div>
+          <div class="hero-links" v-if="app.applicationlink || app.installpath || app.documentationpath">
+            <a v-if="app.applicationlink" :href="app.applicationlink" target="_blank" class="hero-link">
+              <span class="link-icon">&#x1F517;</span> Launch Application
+            </a>
+            <a v-if="app.installpath" :href="app.installpath" target="_blank" class="hero-link">
+              <span class="link-icon">&#x2B07;</span> Download Files
+            </a>
+            <a v-if="app.documentationpath" :href="app.documentationpath" target="_blank" class="hero-link">
+              <span class="link-icon">&#x1F4C4;</span> Documentation
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Main Content Grid -->
+      <div class="content-grid">
+        <!-- Left Column -->
+        <div class="content-column">
+          <!-- Support Info -->
+          <div class="section-card">
+            <h3 class="section-title">Support Information</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Support Team</span>
+                <span class="info-value">
+                  <a v-if="app.supportteam?.teamurl" :href="app.supportteam.teamurl" target="_blank">
+                    {{ app.supportteam?.teamname || '-' }}
+                  </a>
+                  <span v-else>{{ app.supportteam?.teamname || '-' }}</span>
+                </span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">App Owner</span>
+                <span class="info-value">{{ app.supportteam?.owner?.appowner || '-' }}</span>
+              </div>
+              <div class="info-row" v-if="app.supportteam?.owner?.sso">
+                <span class="info-label">SSO</span>
+                <span class="info-value mono">{{ app.supportteam.owner.sso }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Application Notes -->
+          <div class="section-card" v-if="app.applicationnotes">
+            <h3 class="section-title">Application Notes</h3>
+            <div class="notes-text" v-html="app.applicationnotes"></div>
+          </div>
+
+          <!-- Versions -->
+          <div class="section-card" v-if="versions.length > 0">
+            <h3 class="section-title">Available Versions</h3>
+            <div class="version-list">
+              <div v-for="ver in versions" :key="ver.appversionid" class="version-item">
+                <span class="version-number">v{{ ver.version }}</span>
+                <span class="version-date" v-if="ver.releasedate">{{ formatDate(ver.releasedate) }}</span>
+                <span class="version-notes" v-if="ver.notes">{{ ver.notes }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right Column -->
+        <div class="content-column">
+          <!-- Installed On PCs -->
+          <div class="section-card">
+            <h3 class="section-title">Installed On ({{ installedOn.length }} PCs)</h3>
+            <div v-if="installedOn.length > 0" class="pc-list">
+              <router-link
+                v-for="install in installedOn"
+                :key="install.id"
+                :to="`/pcs/${install.machineid}`"
+                class="pc-item"
+              >
+                <div class="pc-info">
+                  <span class="pc-name">{{ install.machine?.machinenumber || `PC #${install.machineid}` }}</span>
+                  <span class="pc-alias" v-if="install.machine?.alias">{{ install.machine.alias }}</span>
+                </div>
+                <div class="pc-version" v-if="install.version">
+                  v{{ install.version }}
+                </div>
+              </router-link>
+            </div>
+            <div v-else class="empty-state">
+              <p>Not installed on any PCs</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Audit Footer -->
+      <div class="audit-footer">
+        <span>Created {{ formatDate(app.createddate) }}</span>
+        <span>Modified {{ formatDate(app.modifieddate) }}</span>
+      </div>
+    </template>
+
+    <div v-else class="card">
+      <p style="text-align: center; color: var(--text-light);">Application not found</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { applicationsApi } from '../../api'
+
+const route = useRoute()
+
+const loading = ref(true)
+const app = ref(null)
+const versions = ref([])
+const installedOn = ref([])
+
+onMounted(async () => {
+  try {
+    // Load application details
+    const response = await applicationsApi.get(route.params.id)
+    app.value = response.data.data
+
+    // Load versions
+    try {
+      const versionsRes = await applicationsApi.getVersions(route.params.id)
+      versions.value = versionsRes.data.data || []
+    } catch (e) {
+      console.log('No versions data')
+    }
+
+    // Load installed on which PCs
+    try {
+      const installedRes = await applicationsApi.getInstalledOn(route.params.id)
+      installedOn.value = installedRes.data.data || []
+    } catch (e) {
+      console.log('No installed data')
+    }
+  } catch (error) {
+    console.error('Error loading application:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleDateString()
+}
+
+function handleImageError(e) {
+  e.target.style.display = 'none'
+}
+</script>
+
+<style scoped>
+/* Application-specific styles - shared styles are in global style.css */
+
+/* Hero description (app-specific) */
+.hero-description {
+  color: var(--text-light);
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.5;
+}
+
+/* Hero links (app-specific) */
+.hero-links {
+  display: flex;
+  gap: 1rem;
+  margin-top: auto;
+  flex-wrap: wrap;
+}
+
+.hero-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  background: var(--bg);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--text);
+  font-weight: 500;
+  font-size: 1.125rem;
+  transition: background 0.15s;
+}
+
+.hero-link:hover {
+  background: var(--border);
+}
+
+.link-icon {
+  font-size: 1.25rem;
+}
+
+/* Placeholder image */
+.hero-image.placeholder {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.placeholder-icon {
+  font-size: 5rem;
+  opacity: 0.5;
+}
+
+/* Version List */
+.version-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.version-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg);
+  border-radius: 6px;
+}
+
+.version-number {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: var(--link);
+}
+
+.version-date {
+  font-size: 1rem;
+  color: var(--text-light);
+}
+
+.version-notes {
+  font-size: 1rem;
+  color: var(--text-light);
+  margin-left: auto;
+}
+
+/* PC List */
+.pc-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.pc-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: var(--bg);
+  border-radius: 8px;
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.15s;
+}
+
+.pc-item:hover {
+  background: var(--border);
+}
+
+.pc-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.pc-name {
+  font-weight: 500;
+  font-size: 1.125rem;
+  color: var(--text);
+}
+
+.pc-alias {
+  font-size: 1rem;
+  color: var(--text-light);
+}
+
+.pc-version {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 1rem;
+  color: var(--primary);
+  background: var(--bg-card);
+  padding: 0.375rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: 2.5rem;
+  color: var(--text-light);
+  font-size: 1.125rem;
+}
+
+/* Notes styling */
+.notes-text :deep(a) {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.notes-text :deep(a:hover) {
+  text-decoration: underline;
+}
+</style>
diff --git a/frontend/src/views/applications/ApplicationForm.vue b/frontend/src/views/applications/ApplicationForm.vue
new file mode 100644
index 0000000..af8e8cb
--- /dev/null
+++ b/frontend/src/views/applications/ApplicationForm.vue
@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Application' : 'New Application' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveApplication">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="appname">Application Name *</label>
+            <input
+              id="appname"
+              v-model="form.appname"
+              type="text"
+              class="form-control"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="supportteamid">Support Team</label>
+            <select
+              id="supportteamid"
+              v-model="form.supportteamid"
+              class="form-control"
+            >
+              <option value="">Select team...</option>
+              <option
+                v-for="team in supportTeams"
+                :key="team.supportteamid"
+                :value="team.supportteamid"
+              >
+                {{ team.teamname }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="appdescription">Description</label>
+          <textarea
+            id="appdescription"
+            v-model="form.appdescription"
+            class="form-control"
+            rows="2"
+          ></textarea>
+        </div>
+
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Application Flags</h4>
+
+        <div class="form-row">
+          <div class="form-group checkbox-group">
+            <label>
+              <input type="checkbox" v-model="form.isinstallable" />
+              Installable
+            </label>
+            <label>
+              <input type="checkbox" v-model="form.islicenced" />
+              Licensed
+            </label>
+            <label>
+              <input type="checkbox" v-model="form.isprinter" />
+              Printer App
+            </label>
+            <label>
+              <input type="checkbox" v-model="form.ishidden" />
+              Hidden
+            </label>
+          </div>
+        </div>
+
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Links & Paths</h4>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="applicationlink">Application Link</label>
+            <input
+              id="applicationlink"
+              v-model="form.applicationlink"
+              type="text"
+              class="form-control"
+              placeholder="https://..."
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="documentationpath">Documentation Path</label>
+            <input
+              id="documentationpath"
+              v-model="form.documentationpath"
+              type="text"
+              class="form-control"
+              placeholder="URL or file path"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="installpath">Install Path</label>
+          <input
+            id="installpath"
+            v-model="form.installpath"
+            type="text"
+            class="form-control"
+            placeholder="Network path or URL to install files"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="image">Image Filename</label>
+          <input
+            id="image"
+            v-model="form.image"
+            type="text"
+            class="form-control"
+            placeholder="e.g., myapp.png"
+          />
+          <small class="form-hint">Image should be placed in /images/applications/</small>
+        </div>
+
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Notes</h4>
+
+        <div class="form-group">
+          <label for="applicationnotes">Application Notes (HTML supported)</label>
+          <textarea
+            id="applicationnotes"
+            v-model="form.applicationnotes"
+            class="form-control"
+            rows="6"
+            placeholder="Enter notes... HTML tags like <BR>, <a>, <strong> are supported"
+          ></textarea>
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Save Application' }}
+          </button>
+          <router-link to="/applications" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { applicationsApi } from '../../api'
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+
+const form = ref({
+  appname: '',
+  appdescription: '',
+  supportteamid: '',
+  isinstallable: false,
+  islicenced: false,
+  isprinter: false,
+  ishidden: false,
+  applicationlink: '',
+  documentationpath: '',
+  installpath: '',
+  image: '',
+  applicationnotes: ''
+})
+
+const supportTeams = ref([])
+
+onMounted(async () => {
+  try {
+    // Load support teams
+    const teamsRes = await applicationsApi.getSupportTeams()
+    supportTeams.value = teamsRes.data.data || []
+
+    // Load application if editing
+    if (isEdit.value) {
+      const response = await applicationsApi.get(route.params.id)
+      const app = response.data.data
+
+      form.value = {
+        appname: app.appname || '',
+        appdescription: app.appdescription || '',
+        supportteamid: app.supportteam?.supportteamid || '',
+        isinstallable: app.isinstallable || false,
+        islicenced: app.islicenced || false,
+        isprinter: app.isprinter || false,
+        ishidden: app.ishidden || false,
+        applicationlink: app.applicationlink || '',
+        documentationpath: app.documentationpath || '',
+        installpath: app.installpath || '',
+        image: app.image || '',
+        applicationnotes: app.applicationnotes || ''
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+async function saveApplication() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const appData = {
+      appname: form.value.appname,
+      appdescription: form.value.appdescription || null,
+      supportteamid: form.value.supportteamid || null,
+      isinstallable: form.value.isinstallable,
+      islicenced: form.value.islicenced,
+      isprinter: form.value.isprinter,
+      ishidden: form.value.ishidden,
+      applicationlink: form.value.applicationlink || null,
+      documentationpath: form.value.documentationpath || null,
+      installpath: form.value.installpath || null,
+      image: form.value.image || null,
+      applicationnotes: form.value.applicationnotes || null
+    }
+
+    if (isEdit.value) {
+      await applicationsApi.update(route.params.id, appData)
+    } else {
+      await applicationsApi.create(appData)
+    }
+
+    router.push('/applications')
+  } catch (err) {
+    console.error('Error saving application:', err)
+    error.value = err.response?.data?.message || 'Failed to save application'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.checkbox-group {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+</style>
diff --git a/frontend/src/views/applications/ApplicationsList.vue b/frontend/src/views/applications/ApplicationsList.vue
new file mode 100644
index 0000000..d5e90a5
--- /dev/null
+++ b/frontend/src/views/applications/ApplicationsList.vue
@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Applications</h2>
+      <router-link to="/applications/new" class="btn btn-primary">Add Application</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search applications..."
+        @input="debouncedSearch"
+      />
+      <select v-model="filter" class="form-control" @change="loadApplications">
+        <option value="installable">Installable Applications</option>
+        <option value="all">All Applications</option>
+        <option value="hidden">Hidden Applications</option>
+      </select>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th style="width: 50px;">Files</th>
+                <th style="width: 50px;">Docs</th>
+                <th>Application Name</th>
+                <th>Description</th>
+                <th>Support Team</th>
+                <th>App Owner</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="app in applications" :key="app.appid">
+                <td class="icon-cell">
+                  <a v-if="app.installpath" :href="app.installpath" target="_blank" title="Download Installation Files" class="icon-download">
+                    &#x2B07;
+                  </a>
+                  <a v-else-if="app.applicationlink" :href="app.applicationlink" target="_blank" title="Application Link" class="icon-link">
+                    &#x1F517;
+                  </a>
+                </td>
+                <td class="icon-cell">
+                  <a v-if="app.documentationpath" :href="app.documentationpath" target="_blank" title="View Documentation" class="icon-docs">
+                    &#x1F4C4;
+                  </a>
+                </td>
+                <td>
+                  <router-link :to="`/applications/${app.appid}`">
+                    {{ app.appname }}
+                  </router-link>
+                  <span class="app-flags">
+                    <span v-if="app.isinstallable" class="badge badge-info badge-sm">Installable</span>
+                    <span v-if="app.islicenced" class="badge badge-warning badge-sm">Licensed</span>
+                    <span v-if="app.isprinter" class="badge badge-secondary badge-sm">Printer</span>
+                  </span>
+                </td>
+                <td class="description">{{ app.appdescription || '-' }}</td>
+                <td>{{ app.supportteam?.teamname || '-' }}</td>
+                <td>{{ app.supportteam?.owner?.appowner || '-' }}</td>
+                <td class="actions">
+                  <router-link
+                    :to="`/applications/${app.appid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="applications.length === 0">
+                <td colspan="7" style="text-align: center; color: var(--text-light);">
+                  No applications found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in visiblePages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { applicationsApi } from '../../api'
+
+const applications = ref([])
+const loading = ref(true)
+const search = ref('')
+const filter = ref('installable')
+const page = ref(1)
+const totalPages = ref(1)
+const perPage = 20
+
+let searchTimeout = null
+
+const visiblePages = computed(() => {
+  const pages = []
+  const start = Math.max(1, page.value - 2)
+  const end = Math.min(totalPages.value, page.value + 2)
+  for (let i = start; i <= end; i++) {
+    pages.push(i)
+  }
+  return pages
+})
+
+onMounted(() => {
+  loadApplications()
+})
+
+async function loadApplications() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      per_page: perPage,
+      search: search.value || undefined
+    }
+
+    // Apply filter
+    if (filter.value === 'installable') {
+      params.installable = true
+    } else if (filter.value === 'hidden') {
+      params.hidden = true
+    }
+
+    const response = await applicationsApi.list(params)
+    applications.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading applications:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadApplications()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadApplications()
+}
+</script>
+
+<style scoped>
+/* Application list specific styles */
+.icon-cell {
+  text-align: center;
+  width: 50px;
+}
+
+.icon-cell a {
+  font-size: 1.25rem;
+  text-decoration: none;
+}
+
+.icon-download {
+  color: var(--success);
+}
+
+.icon-link {
+  color: var(--link);
+}
+
+.icon-docs {
+  color: var(--secondary);
+}
+
+.icon-cell a:hover {
+  opacity: 0.7;
+}
+
+.app-flags {
+  display: inline-flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  margin-left: 0.5rem;
+  vertical-align: middle;
+}
+
+.badge-sm {
+  font-size: 0.75rem;
+  padding: 0.2rem 0.5rem;
+}
+
+.description {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-light);
+}
+</style>
diff --git a/frontend/src/views/knowledgebase/KnowledgeBaseDetail.vue b/frontend/src/views/knowledgebase/KnowledgeBaseDetail.vue
new file mode 100644
index 0000000..ed87346
--- /dev/null
+++ b/frontend/src/views/knowledgebase/KnowledgeBaseDetail.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="detail-page">
+    <div class="page-header">
+      <h2>Knowledge Base Article</h2>
+      <div class="header-actions">
+        <router-link :to="`/knowledgebase/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
+        <router-link to="/knowledgebase" class="btn btn-secondary">Back to List</router-link>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <template v-else-if="article">
+      <div class="card article-card">
+        <table class="info-table">
+          <tbody>
+            <tr>
+              <th>Description:</th>
+              <td>{{ article.shortdescription }}</td>
+            </tr>
+            <tr v-if="article.application">
+              <th>Topic:</th>
+              <td>
+                <router-link :to="`/applications/${article.application.appid}`">
+                  {{ article.application.appname }}
+                </router-link>
+              </td>
+            </tr>
+            <tr v-if="article.linkurl">
+              <th>URL:</th>
+              <td>
+                <a href="#" @click.prevent="openArticle">
+                  {{ article.linkurl }}
+                </a>
+              </td>
+            </tr>
+            <tr v-if="article.keywords">
+              <th>Keywords:</th>
+              <td>{{ article.keywords }}</td>
+            </tr>
+            <tr>
+              <th>Clicks:</th>
+              <td>{{ article.clicks }}</td>
+            </tr>
+            <tr>
+              <th>Last Updated:</th>
+              <td>{{ formatDate(article.lastupdated) }}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <hr />
+
+        <div class="actions-center">
+          <a
+            v-if="article.linkurl"
+            href="#"
+            class="btn btn-primary btn-lg"
+            @click.prevent="openArticle"
+          >
+            <span class="btn-icon">&#x2197;</span> Open Article
+          </a>
+          <div v-else class="alert alert-warning">
+            This article does not have a URL link defined. Please edit the article to add one.
+          </div>
+          <router-link :to="`/knowledgebase/${article.linkid}/edit`" class="btn btn-secondary btn-lg">
+            <span class="btn-icon">&#x270E;</span> Edit
+          </router-link>
+        </div>
+      </div>
+    </template>
+
+    <div v-else class="card">
+      <p style="text-align: center; color: var(--text-light);">Article not found</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { knowledgebaseApi } from '../../api'
+
+const route = useRoute()
+
+const loading = ref(true)
+const article = ref(null)
+
+onMounted(async () => {
+  try {
+    const response = await knowledgebaseApi.get(route.params.id)
+    article.value = response.data.data
+  } catch (error) {
+    console.error('Error loading article:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+
+async function openArticle() {
+  try {
+    await knowledgebaseApi.trackClick(article.value.linkid)
+    article.value.clicks = (article.value.clicks || 0) + 1
+    // Open the URL after tracking
+    if (article.value.linkurl) {
+      window.open(article.value.linkurl, '_blank')
+    }
+  } catch (error) {
+    console.error('Error tracking click:', error)
+    // Still open even if tracking fails
+    if (article.value.linkurl) {
+      window.open(article.value.linkurl, '_blank')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.detail-page {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.article-card {
+  padding: 1.5rem;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.info-table th,
+.info-table td {
+  padding: 0.75rem;
+  text-align: left;
+  border: none;
+}
+
+.info-table th {
+  width: 150px;
+  font-weight: 600;
+  color: var(--text-light, #666);
+  vertical-align: top;
+}
+
+.info-table td a {
+  color: var(--primary, #1976d2);
+  text-decoration: none;
+}
+
+.info-table td a:hover {
+  text-decoration: underline;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: none;
+  border-top: 1px solid var(--border-color, #e5e5e5);
+}
+
+.actions-center {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.btn-lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+}
+
+.btn-icon {
+  margin-right: 0.5rem;
+}
+
+.alert {
+  padding: 1rem;
+  border-radius: 4px;
+}
+
+.alert-warning {
+  background: #fff3cd;
+  color: #856404;
+}
+</style>
diff --git a/frontend/src/views/knowledgebase/KnowledgeBaseForm.vue b/frontend/src/views/knowledgebase/KnowledgeBaseForm.vue
new file mode 100644
index 0000000..f83a5c6
--- /dev/null
+++ b/frontend/src/views/knowledgebase/KnowledgeBaseForm.vue
@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Article' : 'Add Knowledge Base Article' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveArticle">
+        <div class="form-group">
+          <label for="shortdescription">Description *</label>
+          <input
+            id="shortdescription"
+            v-model="form.shortdescription"
+            type="text"
+            class="form-control"
+            required
+            maxlength="500"
+            placeholder="Brief description of the article"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="linkurl">URL *</label>
+          <input
+            id="linkurl"
+            v-model="form.linkurl"
+            type="url"
+            class="form-control"
+            required
+            maxlength="2000"
+            placeholder="https://..."
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="keywords">Keywords</label>
+          <input
+            id="keywords"
+            v-model="form.keywords"
+            type="text"
+            class="form-control"
+            maxlength="500"
+            placeholder="Space-separated keywords"
+          />
+          <small class="form-hint">Keywords help with search - separate with spaces</small>
+        </div>
+
+        <div class="form-group">
+          <label for="appid">Topic (Application)</label>
+          <select
+            id="appid"
+            v-model="form.appid"
+            class="form-control"
+          >
+            <option value="">-- Select Topic (Optional) --</option>
+            <option
+              v-for="app in applications"
+              :key="app.appid"
+              :value="app.appid"
+            >
+              {{ app.appname }}
+            </option>
+          </select>
+          <small class="form-hint">Select the application/topic this article relates to</small>
+        </div>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : (isEdit ? 'Update Article' : 'Add Article') }}
+          </button>
+          <router-link to="/knowledgebase" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { knowledgebaseApi, applicationsApi } from '../../api'
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+
+const form = ref({
+  shortdescription: '',
+  linkurl: '',
+  keywords: '',
+  appid: ''
+})
+
+const applications = ref([])
+
+onMounted(async () => {
+  try {
+    // Load applications for topic dropdown
+    const appsRes = await applicationsApi.list({ per_page: 1000 })
+    applications.value = appsRes.data.data || []
+
+    // Load article if editing
+    if (isEdit.value) {
+      const response = await knowledgebaseApi.get(route.params.id)
+      const article = response.data.data
+
+      form.value = {
+        shortdescription: article.shortdescription || '',
+        linkurl: article.linkurl || '',
+        keywords: article.keywords || '',
+        appid: article.application?.appid || ''
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+async function saveArticle() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const articleData = {
+      shortdescription: form.value.shortdescription,
+      linkurl: form.value.linkurl,
+      keywords: form.value.keywords || null,
+      appid: form.value.appid || null
+    }
+
+    if (isEdit.value) {
+      await knowledgebaseApi.update(route.params.id, articleData)
+    } else {
+      await knowledgebaseApi.create(articleData)
+    }
+
+    router.push('/knowledgebase')
+  } catch (err) {
+    console.error('Error saving article:', err)
+    error.value = err.response?.data?.message || 'Failed to save article'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+</style>
diff --git a/frontend/src/views/knowledgebase/KnowledgeBaseList.vue b/frontend/src/views/knowledgebase/KnowledgeBaseList.vue
new file mode 100644
index 0000000..6b4fd2e
--- /dev/null
+++ b/frontend/src/views/knowledgebase/KnowledgeBaseList.vue
@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <div class="page-header">
+      <div class="header-left">
+        <h2>Knowledge Base</h2>
+        <span v-if="stats" class="stats-badge">
+          {{ stats.totalarticles }} articles | {{ stats.totalclicks.toLocaleString() }} total clicks
+        </span>
+      </div>
+      <router-link to="/knowledgebase/new" class="btn btn-primary">Add Article</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search articles..."
+        @input="debouncedSearch"
+      />
+      <select v-model="topicFilter" class="form-control" @change="loadArticles">
+        <option value="">All Topics</option>
+        <option
+          v-for="app in topics"
+          :key="app.appid"
+          :value="app.appid"
+        >
+          {{ app.appname }}
+        </option>
+      </select>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th class="sortable" @click="toggleSort('topic')">
+                  Topic
+                  <span v-if="sort === 'topic'" class="sort-arrow">{{ order === 'asc' ? '&#9650;' : '&#9660;' }}</span>
+                </th>
+                <th class="sortable" @click="toggleSort('description')">
+                  Description
+                  <span v-if="sort === 'description'" class="sort-arrow">{{ order === 'asc' ? '&#9650;' : '&#9660;' }}</span>
+                </th>
+                <th class="sortable" style="width: 100px;" @click="toggleSort('clicks')">
+                  Clicks
+                  <span v-if="sort === 'clicks'" class="sort-arrow">{{ order === 'asc' ? '&#9650;' : '&#9660;' }}</span>
+                </th>
+                <th style="width: 120px;">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="article in articles" :key="article.linkid">
+                <td>
+                  <router-link
+                    v-if="article.application"
+                    :to="`/applications/${article.application.appid}`"
+                  >
+                    {{ article.application.appname }}
+                  </router-link>
+                  <span v-else class="text-muted">-</span>
+                </td>
+                <td>
+                  <a
+                    href="#"
+                    class="article-link"
+                    @click.prevent="openArticle(article)"
+                    :title="article.linkurl"
+                  >
+                    {{ truncate(article.shortdescription, 95) }}
+                  </a>
+                </td>
+                <td style="text-align: center; font-weight: 500;">{{ article.clicks }}</td>
+                <td class="actions">
+                  <router-link :to="`/knowledgebase/${article.linkid}`" class="btn btn-sm btn-secondary">
+                    View
+                  </router-link>
+                  <router-link :to="`/knowledgebase/${article.linkid}/edit`" class="btn btn-sm btn-secondary">
+                    Edit
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="articles.length === 0">
+                <td colspan="4" style="text-align: center; color: var(--text-light);">
+                  No articles found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in visiblePages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { knowledgebaseApi, applicationsApi } from '../../api'
+
+const loading = ref(true)
+const articles = ref([])
+const topics = ref([])
+const stats = ref(null)
+const page = ref(1)
+const perPage = 20
+const totalPages = ref(1)
+const search = ref('')
+const topicFilter = ref('')
+const sort = ref('clicks')
+const order = ref('desc')
+
+let searchTimeout = null
+
+const visiblePages = computed(() => {
+  const pages = []
+  const start = Math.max(1, page.value - 2)
+  const end = Math.min(totalPages.value, page.value + 2)
+  for (let i = start; i <= end; i++) {
+    pages.push(i)
+  }
+  return pages
+})
+
+onMounted(async () => {
+  await Promise.all([
+    loadArticles(),
+    loadTopics(),
+    loadStats()
+  ])
+})
+
+async function loadArticles() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      per_page: perPage,
+      sort: sort.value,
+      order: order.value
+    }
+    if (search.value) params.search = search.value
+    if (topicFilter.value) params.appid = topicFilter.value
+
+    const response = await knowledgebaseApi.list(params)
+    articles.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading articles:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadTopics() {
+  try {
+    const response = await applicationsApi.list({ per_page: 1000 })
+    topics.value = response.data.data || []
+  } catch (error) {
+    console.error('Error loading topics:', error)
+  }
+}
+
+async function loadStats() {
+  try {
+    const response = await knowledgebaseApi.getStats()
+    stats.value = response.data.data
+  } catch (error) {
+    console.error('Error loading stats:', error)
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadArticles()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadArticles()
+}
+
+function toggleSort(column) {
+  if (sort.value === column) {
+    order.value = order.value === 'desc' ? 'asc' : 'desc'
+  } else {
+    sort.value = column
+    order.value = 'desc'
+  }
+  loadArticles()
+}
+
+function truncate(text, length) {
+  if (!text) return ''
+  if (text.length <= length) return text
+  return text.substring(0, length) + '...'
+}
+
+async function openArticle(article) {
+  try {
+    await knowledgebaseApi.trackClick(article.linkid)
+    article.clicks = (article.clicks || 0) + 1
+    if (stats.value) {
+      stats.value.totalclicks++
+    }
+    if (article.linkurl) {
+      window.open(article.linkurl, '_blank')
+    }
+  } catch (error) {
+    console.error('Error tracking click:', error)
+    if (article.linkurl) {
+      window.open(article.linkurl, '_blank')
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Knowledge Base specific styles only */
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-left h2 {
+  margin: 0;
+}
+
+.stats-badge {
+  background: var(--bg);
+  color: var(--link);
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.article-link {
+  color: var(--text);
+}
+
+.article-link:hover {
+  color: var(--link);
+}
+
+.text-muted {
+  color: var(--text-light);
+}
+</style>
diff --git a/frontend/src/views/machines/MachineDetail.vue b/frontend/src/views/machines/MachineDetail.vue
new file mode 100644
index 0000000..5da08bb
--- /dev/null
+++ b/frontend/src/views/machines/MachineDetail.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="detail-page">
+    <div class="page-header">
+      <h2>Equipment Details</h2>
+      <div class="header-actions">
+        <router-link :to="`/machines/${machine?.machineid}/edit`" class="btn btn-primary" v-if="machine">
+          Edit
+        </router-link>
+        <router-link to="/machines" class="btn btn-secondary">Back to List</router-link>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <template v-else-if="machine">
+      <!-- Hero Section -->
+      <div class="hero-card">
+        <div class="hero-image" v-if="machine.model?.imageurl">
+          <img :src="machine.model.imageurl" :alt="machine.model?.modelnumber" />
+        </div>
+        <div class="hero-content">
+          <div class="hero-title">
+            <h1>{{ machine.machinenumber }}</h1>
+            <span v-if="machine.alias" class="hero-alias">{{ machine.alias }}</span>
+          </div>
+          <div class="hero-meta">
+            <span class="badge badge-lg" :class="getCategoryClass(machine.machinetype?.category)">
+              {{ machine.machinetype?.category || 'Unknown' }}
+            </span>
+            <span class="badge badge-lg" :class="getStatusClass(machine.status?.status)">
+              {{ machine.status?.status || 'Unknown' }}
+            </span>
+          </div>
+          <div class="hero-details">
+            <div class="hero-detail" v-if="machine.machinetype?.machinetype">
+              <span class="hero-detail-label">Type</span>
+              <span class="hero-detail-value">{{ machine.machinetype.machinetype }}</span>
+            </div>
+            <div class="hero-detail" v-if="machine.vendor?.vendor">
+              <span class="hero-detail-label">Vendor</span>
+              <span class="hero-detail-value">{{ machine.vendor.vendor }}</span>
+            </div>
+            <div class="hero-detail" v-if="machine.model?.modelnumber">
+              <span class="hero-detail-label">Model</span>
+              <span class="hero-detail-value">{{ machine.model.modelnumber }}</span>
+            </div>
+            <div class="hero-detail" v-if="machine.location?.location">
+              <span class="hero-detail-label">Location</span>
+              <span class="hero-detail-value">{{ machine.location.location }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Main Content Grid -->
+      <div class="content-grid">
+        <!-- Left Column -->
+        <div class="content-column">
+          <!-- Identity Section -->
+          <div class="section-card">
+            <h3 class="section-title">Identity</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Machine Number</span>
+                <span class="info-value">{{ machine.machinenumber }}</span>
+              </div>
+              <div class="info-row" v-if="machine.alias">
+                <span class="info-label">Alias</span>
+                <span class="info-value">{{ machine.alias }}</span>
+              </div>
+              <div class="info-row" v-if="machine.hostname">
+                <span class="info-label">Hostname</span>
+                <span class="info-value mono">{{ machine.hostname }}</span>
+              </div>
+              <div class="info-row" v-if="machine.serialnumber">
+                <span class="info-label">Serial Number</span>
+                <span class="info-value mono">{{ machine.serialnumber }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Hardware Section -->
+          <div class="section-card">
+            <h3 class="section-title">Hardware</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Type</span>
+                <span class="info-value">{{ machine.machinetype?.machinetype || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Vendor</span>
+                <span class="info-value">{{ machine.vendor?.vendor || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Model</span>
+                <span class="info-value">{{ machine.model?.modelnumber || '-' }}</span>
+              </div>
+              <div class="info-row" v-if="machine.operatingsystem">
+                <span class="info-label">Operating System</span>
+                <span class="info-value">{{ machine.operatingsystem.osname }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- PC Information (if PC) -->
+          <div class="section-card" v-if="isPc">
+            <h3 class="section-title">PC Status</h3>
+            <div class="info-list">
+              <div class="info-row" v-if="machine.loggedinuser">
+                <span class="info-label">Logged In User</span>
+                <span class="info-value">{{ machine.loggedinuser }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Last Reported</span>
+                <span class="info-value">{{ formatDate(machine.lastreporteddate) }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Last Boot</span>
+                <span class="info-value">{{ formatDate(machine.lastboottime) }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Features</span>
+                <span class="info-value">
+                  <span class="feature-tag" :class="{ active: machine.isvnc }">VNC</span>
+                  <span class="feature-tag" :class="{ active: machine.iswinrm }">WinRM</span>
+                  <span class="feature-tag" :class="{ active: machine.isshopfloor }">Shopfloor</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right Column -->
+        <div class="content-column">
+          <!-- Location & Organization -->
+          <div class="section-card">
+            <h3 class="section-title">Location & Organization</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Location</span>
+                <span class="info-value">
+                  <LocationMapTooltip
+                    v-if="machine.mapleft != null && machine.maptop != null"
+                    :left="machine.mapleft"
+                    :top="machine.maptop"
+                    :machineName="machine.machinenumber"
+                  >
+                    <span class="location-link">{{ machine.location?.location || 'On Map' }}</span>
+                  </LocationMapTooltip>
+                  <span v-else>{{ machine.location?.location || '-' }}</span>
+                </span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Business Unit</span>
+                <span class="info-value">{{ machine.businessunit?.businessunit || '-' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Connected PC (for Equipment) -->
+          <div class="section-card" v-if="isEquipment">
+            <h3 class="section-title">Connected PC</h3>
+            <div v-if="!controllingPc" class="empty-message">
+              No controlling PC assigned
+            </div>
+            <div v-else class="connected-device">
+              <router-link :to="getRelatedRoute(controllingPc)" class="device-link">
+                <div class="device-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                    <line x1="8" y1="21" x2="16" y2="21"></line>
+                    <line x1="12" y1="17" x2="12" y2="21"></line>
+                  </svg>
+                </div>
+                <div class="device-info">
+                  <span class="device-name">{{ controllingPc.relatedmachinenumber }}</span>
+                  <span class="device-alias" v-if="controllingPc.relatedmachinealias">{{ controllingPc.relatedmachinealias }}</span>
+                </div>
+              </router-link>
+              <span class="connection-type">{{ controllingPc.relationshiptype }}</span>
+            </div>
+          </div>
+
+          <!-- Controlled Equipment (for PCs) -->
+          <div class="section-card" v-if="isPc && controlledMachines.length > 0">
+            <h3 class="section-title">Controlled Equipment</h3>
+            <div class="equipment-list">
+              <router-link
+                v-for="rel in controlledMachines"
+                :key="rel.relationshipid"
+                :to="getRelatedRoute(rel)"
+                class="equipment-item"
+              >
+                <div class="equipment-info">
+                  <span class="equipment-name">{{ rel.relatedmachinenumber }}</span>
+                  <span class="equipment-alias" v-if="rel.relatedmachinealias">{{ rel.relatedmachinealias }}</span>
+                </div>
+                <span class="connection-tag">{{ rel.relationshiptype }}</span>
+              </router-link>
+            </div>
+          </div>
+
+          <!-- Network -->
+          <div class="section-card" v-if="machine.communications?.length">
+            <h3 class="section-title">Network</h3>
+            <div class="network-list">
+              <div v-for="comm in machine.communications" :key="comm.communicationid" class="network-item">
+                <div class="network-primary">
+                  <span class="ip-address">{{ comm.ipaddress || comm.address || '-' }}</span>
+                  <span v-if="comm.isprimary" class="primary-badge">Primary</span>
+                </div>
+                <div class="network-secondary" v-if="comm.macaddress">
+                  <span class="mac-address">{{ comm.macaddress }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Notes -->
+          <div class="section-card" v-if="machine.notes">
+            <h3 class="section-title">Notes</h3>
+            <p class="notes-text">{{ machine.notes }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Audit Footer -->
+      <div class="audit-footer">
+        <span>Created {{ formatDate(machine.createddate) }}<template v-if="machine.createdby"> by {{ machine.createdby }}</template></span>
+        <span>Modified {{ formatDate(machine.modifieddate) }}<template v-if="machine.modifiedby"> by {{ machine.modifiedby }}</template></span>
+      </div>
+    </template>
+
+    <div v-else class="card">
+      <p style="text-align: center; color: var(--text-light);">Machine not found</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { machinesApi } from '../../api'
+import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
+
+const route = useRoute()
+
+const loading = ref(true)
+const machine = ref(null)
+const relationships = ref([])
+
+const isPc = computed(() => {
+  return machine.value?.machinetype?.category === 'PC'
+})
+
+const isEquipment = computed(() => {
+  return machine.value?.machinetype?.category === 'Equipment'
+})
+
+const controllingPc = computed(() => {
+  return relationships.value.find(r => r.direction === 'controlled_by' && r.relatedcategory === 'PC')
+})
+
+const controlledMachines = computed(() => {
+  return relationships.value.filter(r => r.direction === 'controls')
+})
+
+onMounted(async () => {
+  try {
+    const response = await machinesApi.get(route.params.id)
+    machine.value = response.data.data
+
+    const relResponse = await machinesApi.getRelationships(route.params.id)
+    relationships.value = relResponse.data.data || []
+  } catch (error) {
+    console.error('Error loading machine:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+function getCategoryClass(category) {
+  if (!category) return 'badge-info'
+  const c = category.toLowerCase()
+  if (c === 'equipment') return 'badge-primary'
+  if (c === 'pc') return 'badge-info'
+  if (c === 'network') return 'badge-warning'
+  if (c === 'printer') return 'badge-secondary'
+  return 'badge-info'
+}
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair' || s === 'spare') return 'badge-warning'
+  if (s === 'retired' || s === 'disposed') return 'badge-danger'
+  return 'badge-info'
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+
+function getRelatedRoute(rel) {
+  const category = rel.relatedcategory?.toLowerCase() || ''
+  const routeMap = {
+    'equipment': '/machines',
+    'pc': '/pcs',
+    'printer': '/printers'
+  }
+  const basePath = routeMap[category] || '/machines'
+  return `${basePath}/${rel.relatedmachineid}`
+}
+</script>
+
+<!-- Uses global detail page styles from style.css -->
diff --git a/frontend/src/views/machines/MachineForm.vue b/frontend/src/views/machines/MachineForm.vue
new file mode 100644
index 0000000..5804470
--- /dev/null
+++ b/frontend/src/views/machines/MachineForm.vue
@@ -0,0 +1,523 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Equipment' : 'New Equipment' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="saveMachine">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinenumber">Machine Number *</label>
+            <input
+              id="machinenumber"
+              v-model="form.machinenumber"
+              type="text"
+              class="form-control"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="alias">Alias</label>
+            <input
+              id="alias"
+              v-model="form.alias"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="hostname">Hostname</label>
+            <input
+              id="hostname"
+              v-model="form.hostname"
+              type="text"
+              class="form-control"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="serialnumber">Serial Number</label>
+            <input
+              id="serialnumber"
+              v-model="form.serialnumber"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinetypeid">Equipment Type *</label>
+            <select
+              id="machinetypeid"
+              v-model="form.machinetypeid"
+              class="form-control"
+              required
+            >
+              <option value="">Select type...</option>
+              <option
+                v-for="mt in machineTypes"
+                :key="mt.machinetypeid"
+                :value="mt.machinetypeid"
+              >
+                {{ mt.machinetype }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="statusid">Status</label>
+            <select
+              id="statusid"
+              v-model="form.statusid"
+              class="form-control"
+            >
+              <option value="">Select status...</option>
+              <option
+                v-for="s in statuses"
+                :key="s.statusid"
+                :value="s.statusid"
+              >
+                {{ s.status }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="vendorid">Vendor</label>
+            <select
+              id="vendorid"
+              v-model="form.vendorid"
+              class="form-control"
+            >
+              <option value="">Select vendor...</option>
+              <option
+                v-for="v in vendors"
+                :key="v.vendorid"
+                :value="v.vendorid"
+              >
+                {{ v.vendor }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="modelnumberid">Model</label>
+            <select
+              id="modelnumberid"
+              v-model="form.modelnumberid"
+              class="form-control"
+            >
+              <option value="">Select model...</option>
+              <option
+                v-for="m in filteredModels"
+                :key="m.modelnumberid"
+                :value="m.modelnumberid"
+              >
+                {{ m.modelnumber }}
+              </option>
+            </select>
+            <small class="form-help">Selecting a model will auto-set the equipment type</small>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="locationid">Location</label>
+            <select
+              id="locationid"
+              v-model="form.locationid"
+              class="form-control"
+            >
+              <option value="">Select location...</option>
+              <option
+                v-for="l in locations"
+                :key="l.locationid"
+                :value="l.locationid"
+              >
+                {{ l.location }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="businessunitid">Business Unit</label>
+            <select
+              id="businessunitid"
+              v-model="form.businessunitid"
+              class="form-control"
+            >
+              <option value="">Select business unit...</option>
+              <option
+                v-for="bu in businessunits"
+                :key="bu.businessunitid"
+                :value="bu.businessunitid"
+              >
+                {{ bu.businessunit }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="notes">Notes</label>
+          <textarea
+            id="notes"
+            v-model="form.notes"
+            class="form-control"
+            rows="3"
+          ></textarea>
+        </div>
+
+        <!-- Controlling PC Selection -->
+        <div class="form-row">
+          <div class="form-group">
+            <label for="controllingpc">Controlling PC</label>
+            <select
+              id="controllingpc"
+              v-model="controllingPcId"
+              class="form-control"
+            >
+              <option :value="null">None (standalone)</option>
+              <option
+                v-for="pc in pcs"
+                :key="pc.machineid"
+                :value="pc.machineid"
+              >
+                {{ pc.machinenumber }}{{ pc.alias ? ` (${pc.alias})` : '' }}
+              </option>
+            </select>
+            <small class="form-help">Select the PC that controls this equipment</small>
+          </div>
+
+          <div class="form-group" v-if="controllingPcId">
+            <label for="connectiontype">Connection Type</label>
+            <select
+              id="connectiontype"
+              v-model="relationshipTypeId"
+              class="form-control"
+            >
+              <option
+                v-for="rt in relationshipTypes"
+                :key="rt.relationshiptypeid"
+                :value="rt.relationshiptypeid"
+              >
+                {{ rt.relationshiptype }}
+              </option>
+            </select>
+            <small class="form-help">How the PC connects to this equipment</small>
+          </div>
+        </div>
+
+        <!-- Map Location Picker -->
+        <div class="form-group">
+          <label>Map Location</label>
+          <div class="map-location-control">
+            <div v-if="form.mapleft !== null && form.maptop !== null" class="current-position">
+              Position: {{ form.mapleft }}, {{ form.maptop }}
+              <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
+            </div>
+            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+              Set Location on Map
+            </button>
+          </div>
+        </div>
+
+        <!-- Map Picker Modal -->
+        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
+          <div class="map-modal-content">
+            <ShopFloorMap
+              :pickerMode="true"
+              :initialPosition="form.mapleft !== null ? { left: form.mapleft, top: form.maptop } : null"
+              @positionPicked="handlePositionPicked"
+            />
+          </div>
+          <template #footer>
+            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
+            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
+          </template>
+        </Modal>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Save Equipment' }}
+          </button>
+          <router-link to="/machines" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { machinesApi, machinetypesApi, statusesApi, vendorsApi, locationsApi, relationshipTypesApi, modelsApi, businessunitsApi } from '../../api'
+import ShopFloorMap from '../../components/ShopFloorMap.vue'
+import Modal from '../../components/Modal.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+const showMapPicker = ref(false)
+const tempMapPosition = ref(null)
+
+const form = ref({
+  machinenumber: '',
+  alias: '',
+  hostname: '',
+  serialnumber: '',
+  machinetypeid: '',
+  modelnumberid: '',
+  statusid: '',
+  vendorid: '',
+  locationid: '',
+  businessunitid: '',
+  notes: '',
+  mapleft: null,
+  maptop: null
+})
+
+const machineTypes = ref([])
+const statuses = ref([])
+const vendors = ref([])
+const locations = ref([])
+const models = ref([])
+const businessunits = ref([])
+const pcs = ref([])
+const relationshipTypes = ref([])
+const controllingPcId = ref(null)
+const relationshipTypeId = ref(null)
+const existingRelationshipId = ref(null)
+
+// Filter models by selected vendor
+const filteredModels = computed(() => {
+  return models.value.filter(m => {
+    // Filter by vendor if selected
+    if (form.value.vendorid && m.vendorid !== form.value.vendorid) {
+      return false
+    }
+    // Only show models for Equipment category types
+    const modelType = machineTypes.value.find(t => t.machinetypeid === m.machinetypeid)
+    if (modelType && modelType.category !== 'Equipment') {
+      return false
+    }
+    return true
+  })
+})
+
+// When model changes, auto-set the machine type
+watch(() => form.value.modelnumberid, (newModelId) => {
+  if (newModelId) {
+    const selectedModel = models.value.find(m => m.modelnumberid === newModelId)
+    if (selectedModel && selectedModel.machinetypeid) {
+      form.value.machinetypeid = selectedModel.machinetypeid
+    }
+  }
+})
+
+onMounted(async () => {
+  try {
+    // Load reference data
+    const [mtRes, statusRes, vendorRes, locRes, modelsRes, buRes, pcsRes, relTypesRes] = await Promise.all([
+      machinetypesApi.list({ category: 'Equipment' }),
+      statusesApi.list(),
+      vendorsApi.list(),
+      locationsApi.list(),
+      modelsApi.list(),
+      businessunitsApi.list(),
+      machinesApi.list({ category: 'PC', perpage: 500 }),
+      relationshipTypesApi.list()
+    ])
+
+    machineTypes.value = mtRes.data.data || []
+    statuses.value = statusRes.data.data || []
+    vendors.value = vendorRes.data.data || []
+    locations.value = locRes.data.data || []
+    models.value = modelsRes.data.data || []
+    businessunits.value = buRes.data.data || []
+    pcs.value = pcsRes.data.data || []
+    relationshipTypes.value = relTypesRes.data.data || []
+
+    // Set default relationship type to "Controls" if available
+    const controlsType = relationshipTypes.value.find(t => t.relationshiptype === 'Controls')
+    if (controlsType) {
+      relationshipTypeId.value = controlsType.relationshiptypeid
+    }
+
+    // Load machine if editing
+    if (isEdit.value) {
+      const response = await machinesApi.get(route.params.id)
+      const machine = response.data.data
+      form.value = {
+        machinenumber: machine.machinenumber || '',
+        alias: machine.alias || '',
+        hostname: machine.hostname || '',
+        serialnumber: machine.serialnumber || '',
+        machinetypeid: machine.machinetype?.machinetypeid || '',
+        modelnumberid: machine.model?.modelnumberid || '',
+        statusid: machine.status?.statusid || '',
+        vendorid: machine.vendor?.vendorid || '',
+        locationid: machine.location?.locationid || '',
+        businessunitid: machine.businessunit?.businessunitid || '',
+        notes: machine.notes || '',
+        mapleft: machine.mapleft ?? null,
+        maptop: machine.maptop ?? null
+      }
+
+      // Load existing relationship (controlling PC)
+      const relResponse = await machinesApi.getRelationships(route.params.id)
+      const relationships = relResponse.data.data || []
+      const pcRelationship = relationships.find(r => r.direction === 'controlled_by' && r.relatedcategory === 'PC')
+      if (pcRelationship) {
+        controllingPcId.value = pcRelationship.relatedmachineid
+        relationshipTypeId.value = pcRelationship.relationshiptypeid
+        existingRelationshipId.value = pcRelationship.relationshipid
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+function handlePositionPicked(position) {
+  tempMapPosition.value = position
+}
+
+function confirmMapPosition() {
+  if (tempMapPosition.value) {
+    form.value.mapleft = tempMapPosition.value.left
+    form.value.maptop = tempMapPosition.value.top
+  }
+  showMapPicker.value = false
+}
+
+function clearMapPosition() {
+  form.value.mapleft = null
+  form.value.maptop = null
+  tempMapPosition.value = null
+}
+
+async function saveMachine() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const data = {
+      ...form.value,
+      machinetypeid: form.value.machinetypeid || null,
+      modelnumberid: form.value.modelnumberid || null,
+      statusid: form.value.statusid || null,
+      vendorid: form.value.vendorid || null,
+      locationid: form.value.locationid || null,
+      businessunitid: form.value.businessunitid || null,
+      mapleft: form.value.mapleft,
+      maptop: form.value.maptop
+    }
+
+    let machineId = route.params.id
+
+    if (isEdit.value) {
+      await machinesApi.update(route.params.id, data)
+    } else {
+      const response = await machinesApi.create(data)
+      machineId = response.data.data.machineid
+    }
+
+    // Handle relationship (controlling PC)
+    await saveRelationship(machineId)
+
+    router.push('/machines')
+  } catch (err) {
+    console.error('Error saving machine:', err)
+    error.value = err.response?.data?.message || 'Failed to save machine'
+  } finally {
+    saving.value = false
+  }
+}
+
+async function saveRelationship(machineId) {
+  // If no PC selected and no existing relationship, nothing to do
+  if (!controllingPcId.value && !existingRelationshipId.value) {
+    return
+  }
+
+  // If clearing the relationship
+  if (!controllingPcId.value && existingRelationshipId.value) {
+    await machinesApi.deleteRelationship(existingRelationshipId.value)
+    return
+  }
+
+  // If PC is selected
+  if (controllingPcId.value) {
+    // If there's an existing relationship, delete it first
+    if (existingRelationshipId.value) {
+      await machinesApi.deleteRelationship(existingRelationshipId.value)
+    }
+
+    // Create new relationship
+    await machinesApi.createRelationship(machineId, {
+      relatedmachineid: controllingPcId.value,
+      relationshiptypeid: relationshipTypeId.value,
+      direction: 'controlled_by'
+    })
+  }
+}
+</script>
+
+<style scoped>
+.map-location-control {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.current-position {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #e3f2fd;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.map-modal-content {
+  height: calc(90vh - 140px);
+}
+
+.map-modal-content :deep(.shopfloor-map) {
+  height: 100%;
+}
+
+.map-modal-content :deep(.map-container) {
+  height: calc(100% - 50px);
+}
+
+.form-help {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light);
+}
+</style>
diff --git a/frontend/src/views/machines/MachinesList.vue b/frontend/src/views/machines/MachinesList.vue
new file mode 100644
index 0000000..b6a2f90
--- /dev/null
+++ b/frontend/src/views/machines/MachinesList.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Equipment</h2>
+      <router-link to="/machines/new" class="btn btn-primary">Add Equipment</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search equipment..."
+        @input="debouncedSearch"
+      />
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Machine #</th>
+                <th>Alias</th>
+                <th>Hostname</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Location</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="machine in machines" :key="machine.machineid">
+                <td>{{ machine.machinenumber }}</td>
+                <td>{{ machine.alias || '-' }}</td>
+                <td>{{ machine.hostname || '-' }}</td>
+                <td>{{ machine.machinetype }}</td>
+                <td>
+                  <span class="badge" :class="getStatusClass(machine.status)">
+                    {{ machine.status || 'Unknown' }}
+                  </span>
+                </td>
+                <td>{{ machine.location || '-' }}</td>
+                <td class="actions">
+                  <router-link
+                    :to="`/machines/${machine.machineid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="machines.length === 0">
+                <td colspan="7" style="text-align: center; color: var(--text-light);">
+                  No equipment found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { machinesApi } from '../../api'
+
+const machines = ref([])
+const loading = ref(true)
+const search = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadMachines()
+})
+
+async function loadMachines() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20,
+      category: 'Equipment'
+    }
+    if (search.value) params.search = search.value
+
+    const response = await machinesApi.list(params)
+    machines.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading equipment:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadMachines()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadMachines()
+}
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair') return 'badge-warning'
+  if (s === 'retired') return 'badge-danger'
+  return 'badge-info'
+}
+</script>
diff --git a/frontend/src/views/pcs/PCDetail.vue b/frontend/src/views/pcs/PCDetail.vue
new file mode 100644
index 0000000..d011631
--- /dev/null
+++ b/frontend/src/views/pcs/PCDetail.vue
@@ -0,0 +1,372 @@
+<template>
+  <div class="detail-page">
+    <div class="page-header">
+      <h2>PC Details</h2>
+      <div class="header-actions">
+        <router-link :to="`/pcs/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
+        <router-link to="/pcs" class="btn btn-secondary">Back to List</router-link>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <template v-else-if="pc">
+      <!-- Hero Section -->
+      <div class="hero-card">
+        <div class="hero-image" v-if="pc.model?.imageurl">
+          <img :src="pc.model.imageurl" :alt="pc.model?.modelnumber" />
+        </div>
+        <div class="hero-content">
+          <div class="hero-title">
+            <h1>{{ pc.machinenumber }}</h1>
+            <span v-if="pc.alias" class="hero-alias">{{ pc.alias }}</span>
+          </div>
+          <div class="hero-meta">
+            <span class="badge badge-lg badge-info">PC</span>
+            <span class="badge badge-lg" :class="getStatusClass(pc.status?.status)">
+              {{ pc.status?.status || 'Unknown' }}
+            </span>
+          </div>
+          <div class="hero-details">
+            <div class="hero-detail" v-if="pc.pctype">
+              <span class="hero-detail-label">PC Type</span>
+              <span class="hero-detail-value">{{ pc.pctype.pctype || pc.pctype }}</span>
+            </div>
+            <div class="hero-detail" v-if="pc.vendor?.vendor">
+              <span class="hero-detail-label">Vendor</span>
+              <span class="hero-detail-value">{{ pc.vendor.vendor }}</span>
+            </div>
+            <div class="hero-detail" v-if="pc.model?.modelnumber">
+              <span class="hero-detail-label">Model</span>
+              <span class="hero-detail-value">{{ pc.model.modelnumber }}</span>
+            </div>
+            <div class="hero-detail" v-if="ipAddress">
+              <span class="hero-detail-label">IP Address</span>
+              <span class="hero-detail-value mono">{{ ipAddress }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Main Content Grid -->
+      <div class="content-grid">
+        <!-- Left Column -->
+        <div class="content-column">
+          <!-- Identity Section -->
+          <div class="section-card">
+            <h3 class="section-title">Identity</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Machine Number</span>
+                <span class="info-value">{{ pc.machinenumber }}</span>
+              </div>
+              <div class="info-row" v-if="pc.alias">
+                <span class="info-label">Alias</span>
+                <span class="info-value">{{ pc.alias }}</span>
+              </div>
+              <div class="info-row" v-if="pc.hostname">
+                <span class="info-label">Hostname</span>
+                <span class="info-value mono">{{ pc.hostname }}</span>
+              </div>
+              <div class="info-row" v-if="pc.serialnumber">
+                <span class="info-label">Serial Number</span>
+                <span class="info-value mono">{{ pc.serialnumber }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Hardware Section -->
+          <div class="section-card">
+            <h3 class="section-title">Hardware</h3>
+            <div class="info-list">
+              <div class="info-row" v-if="pc.pctype">
+                <span class="info-label">PC Type</span>
+                <span class="info-value">{{ pc.pctype.pctype || pc.pctype }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Vendor</span>
+                <span class="info-value">{{ pc.vendor?.vendor || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Model</span>
+                <span class="info-value">{{ pc.model?.modelnumber || '-' }}</span>
+              </div>
+              <div class="info-row" v-if="pc.operatingsystem">
+                <span class="info-label">Operating System</span>
+                <span class="info-value">{{ pc.operatingsystem.osname }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- PC Status -->
+          <div class="section-card">
+            <h3 class="section-title">Status</h3>
+            <div class="info-list">
+              <div class="info-row" v-if="pc.loggedinuser">
+                <span class="info-label">Logged In User</span>
+                <span class="info-value">{{ pc.loggedinuser }}</span>
+              </div>
+              <div class="info-row">
+                <span class="info-label">Features</span>
+                <span class="info-value">
+                  <span class="feature-tag" :class="{ active: pc.isvnc }">VNC</span>
+                  <span class="feature-tag" :class="{ active: pc.iswinrm }">WinRM</span>
+                  <span class="feature-tag" :class="{ active: pc.isshopfloor }">Shopfloor</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right Column -->
+        <div class="content-column">
+          <!-- Location -->
+          <div class="section-card">
+            <h3 class="section-title">Location</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Location</span>
+                <span class="info-value">
+                  <LocationMapTooltip
+                    v-if="pc.mapleft != null && pc.maptop != null"
+                    :left="pc.mapleft"
+                    :top="pc.maptop"
+                    :machineName="pc.machinenumber"
+                  >
+                    <span class="location-link">{{ pc.location?.location || 'On Map' }}</span>
+                  </LocationMapTooltip>
+                  <span v-else>{{ pc.location?.location || '-' }}</span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Controlled Equipment -->
+          <div class="section-card" v-if="controlledMachines.length > 0">
+            <h3 class="section-title">Controlled Equipment</h3>
+            <div class="equipment-list">
+              <router-link
+                v-for="rel in controlledMachines"
+                :key="rel.relationshipid"
+                :to="getRelatedRoute(rel)"
+                class="equipment-item"
+              >
+                <div class="equipment-info">
+                  <span class="equipment-name">{{ rel.relatedmachinenumber }}</span>
+                  <span class="equipment-alias" v-if="rel.relatedmachinealias">{{ rel.relatedmachinealias }}</span>
+                </div>
+                <div class="equipment-meta">
+                  <span class="category-tag">{{ rel.relatedcategory }}</span>
+                  <span class="connection-tag">{{ rel.relationshiptype }}</span>
+                </div>
+              </router-link>
+            </div>
+          </div>
+
+          <!-- Installed Applications -->
+          <div class="section-card" v-if="installedApps.length > 0">
+            <h3 class="section-title">Installed Applications</h3>
+            <div class="app-list">
+              <router-link
+                v-for="app in installedApps"
+                :key="app.id"
+                :to="`/applications/${app.application?.appid}`"
+                class="app-item"
+              >
+                <div class="app-info">
+                  <span class="app-name">{{ app.application?.appname }}</span>
+                  <span class="app-version" v-if="app.version">v{{ app.version }}</span>
+                </div>
+                <div class="app-desc" v-if="app.application?.appdescription">
+                  {{ app.application.appdescription }}
+                </div>
+              </router-link>
+            </div>
+          </div>
+
+          <!-- Network -->
+          <div class="section-card" v-if="pc.communications?.length">
+            <h3 class="section-title">Network Interfaces</h3>
+            <div class="network-list">
+              <div v-for="comm in pc.communications" :key="comm.communicationid" class="network-item">
+                <div class="network-primary">
+                  <span class="ip-address">{{ comm.ipaddress || comm.address || '-' }}</span>
+                  <span v-if="comm.isprimary" class="primary-badge">Primary</span>
+                </div>
+                <div class="network-secondary" v-if="comm.macaddress">
+                  <span class="mac-address">{{ comm.macaddress }}</span>
+                </div>
+                <div class="network-details" v-if="comm.subnetmask || comm.defaultgateway">
+                  <span v-if="comm.subnetmask">Subnet: {{ comm.subnetmask }}</span>
+                  <span v-if="comm.defaultgateway">Gateway: {{ comm.defaultgateway }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Notes -->
+          <div class="section-card" v-if="pc.notes">
+            <h3 class="section-title">Notes</h3>
+            <p class="notes-text">{{ pc.notes }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Audit Footer -->
+      <div class="audit-footer">
+        <span>Created {{ formatDate(pc.createddate) }}<template v-if="pc.createdby"> by {{ pc.createdby }}</template></span>
+        <span>Modified {{ formatDate(pc.modifieddate) }}<template v-if="pc.modifiedby"> by {{ pc.modifiedby }}</template></span>
+      </div>
+    </template>
+
+    <div v-else class="card">
+      <p style="text-align: center; color: var(--text-light);">PC not found</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { machinesApi, applicationsApi } from '../../api'
+import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
+
+const route = useRoute()
+
+const loading = ref(true)
+const pc = ref(null)
+const relationships = ref([])
+const installedApps = ref([])
+
+const ipAddress = computed(() => {
+  if (!pc.value?.communications) return null
+  const primaryComm = pc.value.communications.find(c => c.isprimary) || pc.value.communications[0]
+  return primaryComm?.ipaddress || primaryComm?.address || null
+})
+
+const controlledMachines = computed(() => {
+  return relationships.value.filter(r => r.direction === 'controls')
+})
+
+onMounted(async () => {
+  try {
+    const response = await machinesApi.get(route.params.id)
+    pc.value = response.data.data
+
+    const relResponse = await machinesApi.getRelationships(route.params.id)
+    relationships.value = relResponse.data.data || []
+
+    // Load installed applications
+    try {
+      const appsResponse = await applicationsApi.getMachineApps(route.params.id)
+      installedApps.value = appsResponse.data.data || []
+    } catch (appError) {
+      // Silently handle if no apps table yet
+      console.log('No installed apps data:', appError.message)
+    }
+  } catch (error) {
+    console.error('Error loading PC:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+function getRelatedRoute(rel) {
+  const category = rel.relatedcategory?.toLowerCase() || ''
+  const routeMap = {
+    'equipment': '/machines',
+    'pc': '/pcs',
+    'printer': '/printers'
+  }
+  const basePath = routeMap[category] || '/machines'
+  return `${basePath}/${rel.relatedmachineid}`
+}
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair') return 'badge-warning'
+  if (s === 'retired') return 'badge-danger'
+  return 'badge-info'
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+</script>
+
+<style scoped>
+/* PC-specific styles - shared styles are in global style.css */
+
+/* Installed Applications */
+.app-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.app-item {
+  display: block;
+  padding: 1rem;
+  background: var(--bg);
+  border-radius: 8px;
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.15s;
+}
+
+.app-item:hover {
+  background: var(--border);
+  text-decoration: none;
+}
+
+.app-info {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.app-name {
+  font-weight: 500;
+  font-size: 1.125rem;
+  color: var(--text);
+}
+
+.app-version {
+  font-size: 1rem;
+  color: var(--text-light);
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+.app-desc {
+  margin-top: 0.375rem;
+  font-size: 1rem;
+  color: var(--text-light);
+}
+
+/* Equipment meta */
+.equipment-meta {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.category-tag {
+  padding: 0.3rem 0.625rem;
+  font-size: 0.875rem;
+  background: var(--primary);
+  color: white;
+  border-radius: 5px;
+}
+
+/* Network details */
+.network-details {
+  margin-top: 0.5rem;
+  display: flex;
+  gap: 1.25rem;
+  font-size: 1rem;
+  color: var(--text-light);
+}
+</style>
diff --git a/frontend/src/views/pcs/PCForm.vue b/frontend/src/views/pcs/PCForm.vue
new file mode 100644
index 0000000..90454f6
--- /dev/null
+++ b/frontend/src/views/pcs/PCForm.vue
@@ -0,0 +1,484 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit PC' : 'New PC' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="savePC">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinenumber">PC Number *</label>
+            <input
+              id="machinenumber"
+              v-model="form.machinenumber"
+              type="text"
+              class="form-control"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="alias">Alias</label>
+            <input
+              id="alias"
+              v-model="form.alias"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="hostname">Hostname</label>
+            <input
+              id="hostname"
+              v-model="form.hostname"
+              type="text"
+              class="form-control"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="serialnumber">Serial Number</label>
+            <input
+              id="serialnumber"
+              v-model="form.serialnumber"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinetypeid">PC Type *</label>
+            <select
+              id="machinetypeid"
+              v-model="form.machinetypeid"
+              class="form-control"
+              required
+              @change="form.modelnumberid = ''"
+            >
+              <option value="">Select type...</option>
+              <option
+                v-for="pt in pcTypes"
+                :key="pt.machinetypeid"
+                :value="pt.machinetypeid"
+              >
+                {{ pt.machinetype }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="osid">Operating System</label>
+            <select
+              id="osid"
+              v-model="form.osid"
+              class="form-control"
+            >
+              <option value="">Select OS...</option>
+              <option
+                v-for="os in operatingsystems"
+                :key="os.osid"
+                :value="os.osid"
+              >
+                {{ os.osname }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="statusid">Status</label>
+            <select
+              id="statusid"
+              v-model="form.statusid"
+              class="form-control"
+            >
+              <option value="">Select status...</option>
+              <option
+                v-for="s in statuses"
+                :key="s.statusid"
+                :value="s.statusid"
+              >
+                {{ s.status }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="locationid">Location</label>
+            <select
+              id="locationid"
+              v-model="form.locationid"
+              class="form-control"
+            >
+              <option value="">Select location...</option>
+              <option
+                v-for="l in locations"
+                :key="l.locationid"
+                :value="l.locationid"
+              >
+                {{ l.location }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="vendorid">Vendor</label>
+            <select
+              id="vendorid"
+              v-model="form.vendorid"
+              class="form-control"
+              @change="form.modelnumberid = ''"
+            >
+              <option value="">Select vendor...</option>
+              <option
+                v-for="v in vendors"
+                :key="v.vendorid"
+                :value="v.vendorid"
+              >
+                {{ v.vendor }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="modelnumberid">Model</label>
+            <select
+              id="modelnumberid"
+              v-model="form.modelnumberid"
+              class="form-control"
+            >
+              <option value="">Select model...</option>
+              <option
+                v-for="m in filteredModels"
+                :key="m.modelnumberid"
+                :value="m.modelnumberid"
+              >
+                {{ m.modelnumber }}
+              </option>
+            </select>
+            <small v-if="!form.vendorid && !form.machinetypeid" class="form-hint">
+              Select vendor or PC type to filter models
+            </small>
+          </div>
+        </div>
+
+        <!-- PC-specific fields -->
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Network Settings</h4>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="ipaddress">IP Address</label>
+            <input
+              id="ipaddress"
+              v-model="form.ipaddress"
+              type="text"
+              class="form-control"
+              placeholder="e.g., 192.168.1.100"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="loggedinuser">Logged In User</label>
+            <input
+              id="loggedinuser"
+              v-model="form.loggedinuser"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group" style="display: flex; align-items: flex-end; gap: 1.5rem;">
+            <label style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+              <input type="checkbox" v-model="form.isvnc" />
+              VNC Enabled
+            </label>
+            <label style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+              <input type="checkbox" v-model="form.iswinrm" />
+              WinRM Enabled
+            </label>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="notes">Notes</label>
+          <textarea
+            id="notes"
+            v-model="form.notes"
+            class="form-control"
+            rows="3"
+          ></textarea>
+        </div>
+
+        <!-- Map Location Picker -->
+        <div class="form-group">
+          <label>Map Location</label>
+          <div class="map-location-control">
+            <div v-if="form.mapleft !== null && form.maptop !== null" class="current-position">
+              Position: {{ form.mapleft }}, {{ form.maptop }}
+              <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
+            </div>
+            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+              Set Location on Map
+            </button>
+          </div>
+        </div>
+
+        <!-- Map Picker Modal -->
+        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
+          <div class="map-modal-content">
+            <ShopFloorMap
+              :pickerMode="true"
+              :initialPosition="form.mapleft !== null ? { left: form.mapleft, top: form.maptop } : null"
+              @positionPicked="handlePositionPicked"
+            />
+          </div>
+          <template #footer>
+            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
+            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
+          </template>
+        </Modal>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Save PC' }}
+          </button>
+          <router-link to="/pcs" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { machinesApi, machinetypesApi, statusesApi, vendorsApi, locationsApi, modelsApi, operatingsystemsApi } from '../../api'
+import ShopFloorMap from '../../components/ShopFloorMap.vue'
+import Modal from '../../components/Modal.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+const showMapPicker = ref(false)
+const tempMapPosition = ref(null)
+
+const form = ref({
+  machinenumber: '',
+  alias: '',
+  hostname: '',
+  serialnumber: '',
+  machinetypeid: '',
+  statusid: '',
+  vendorid: '',
+  modelnumberid: '',
+  locationid: '',
+  osid: '',
+  loggedinuser: '',
+  isvnc: false,
+  iswinrm: false,
+  notes: '',
+  mapleft: null,
+  maptop: null,
+  ipaddress: ''
+})
+
+const pcTypes = ref([])
+const statuses = ref([])
+const vendors = ref([])
+const models = ref([])
+const locations = ref([])
+const operatingsystems = ref([])
+
+// Filter models by selected vendor and PC type
+const filteredModels = computed(() => {
+  return models.value.filter(m => {
+    if (form.value.vendorid && m.vendorid !== form.value.vendorid) {
+      return false
+    }
+    if (form.value.machinetypeid && m.machinetypeid !== form.value.machinetypeid) {
+      return false
+    }
+    return true
+  })
+})
+
+onMounted(async () => {
+  try {
+    // Load reference data
+    const [ptRes, statusRes, vendorRes, modelsRes, locRes, osRes] = await Promise.all([
+      machinetypesApi.list({ category: 'PC' }),
+      statusesApi.list(),
+      vendorsApi.list(),
+      modelsApi.list(),
+      locationsApi.list(),
+      operatingsystemsApi.list()
+    ])
+
+    pcTypes.value = ptRes.data.data || []
+    statuses.value = statusRes.data.data || []
+    vendors.value = vendorRes.data.data || []
+    models.value = modelsRes.data.data || []
+    locations.value = locRes.data.data || []
+    operatingsystems.value = osRes.data.data || []
+
+    // Load PC if editing
+    if (isEdit.value) {
+      const response = await machinesApi.get(route.params.id)
+      const pc = response.data.data
+
+      // Get IP from communications
+      const primaryComm = pc.communications?.find(c => c.isprimary) || pc.communications?.[0]
+
+      form.value = {
+        machinenumber: pc.machinenumber || '',
+        alias: pc.alias || '',
+        hostname: pc.hostname || '',
+        serialnumber: pc.serialnumber || '',
+        machinetypeid: pc.machinetype?.machinetypeid || '',
+        statusid: pc.status?.statusid || '',
+        vendorid: pc.vendor?.vendorid || '',
+        modelnumberid: pc.model?.modelnumberid || '',
+        locationid: pc.location?.locationid || '',
+        osid: pc.operatingsystem?.osid || '',
+        loggedinuser: pc.loggedinuser || '',
+        isvnc: pc.isvnc || false,
+        iswinrm: pc.iswinrm || false,
+        notes: pc.notes || '',
+        mapleft: pc.mapleft ?? null,
+        maptop: pc.maptop ?? null,
+        ipaddress: primaryComm?.ipaddress || ''
+      }
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+function handlePositionPicked(position) {
+  tempMapPosition.value = position
+}
+
+function confirmMapPosition() {
+  if (tempMapPosition.value) {
+    form.value.mapleft = tempMapPosition.value.left
+    form.value.maptop = tempMapPosition.value.top
+  }
+  showMapPicker.value = false
+}
+
+function clearMapPosition() {
+  form.value.mapleft = null
+  form.value.maptop = null
+  tempMapPosition.value = null
+}
+
+async function savePC() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const machineData = {
+      machinenumber: form.value.machinenumber,
+      alias: form.value.alias,
+      hostname: form.value.hostname,
+      serialnumber: form.value.serialnumber,
+      machinetypeid: form.value.machinetypeid || null,
+      statusid: form.value.statusid || null,
+      vendorid: form.value.vendorid || null,
+      modelnumberid: form.value.modelnumberid || null,
+      locationid: form.value.locationid || null,
+      osid: form.value.osid || null,
+      loggedinuser: form.value.loggedinuser,
+      isvnc: form.value.isvnc,
+      iswinrm: form.value.iswinrm,
+      notes: form.value.notes,
+      mapleft: form.value.mapleft,
+      maptop: form.value.maptop
+    }
+
+    let machineId
+    if (isEdit.value) {
+      await machinesApi.update(route.params.id, machineData)
+      machineId = route.params.id
+    } else {
+      const response = await machinesApi.create(machineData)
+      machineId = response.data.data.machineid
+    }
+
+    // Handle IP address - update communication record
+    if (form.value.ipaddress) {
+      await machinesApi.updateCommunication(machineId, {
+        ipaddress: form.value.ipaddress,
+        isprimary: true
+      })
+    }
+
+    router.push('/pcs')
+  } catch (err) {
+    console.error('Error saving PC:', err)
+    error.value = err.response?.data?.message || 'Failed to save PC'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.map-location-control {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.current-position {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #e3f2fd;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.map-modal-content {
+  height: calc(90vh - 140px);
+}
+
+.map-modal-content :deep(.shopfloor-map) {
+  height: 100%;
+}
+
+.map-modal-content :deep(.map-container) {
+  height: calc(100% - 50px);
+}
+
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+</style>
diff --git a/frontend/src/views/pcs/PCsList.vue b/frontend/src/views/pcs/PCsList.vue
new file mode 100644
index 0000000..aaa6bec
--- /dev/null
+++ b/frontend/src/views/pcs/PCsList.vue
@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>PCs</h2>
+      <router-link to="/pcs/new" class="btn btn-primary">Add PC</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search PCs..."
+        @input="debouncedSearch"
+      />
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Machine #</th>
+                <th>Serial Number</th>
+                <th>PC Type</th>
+                <th>Features</th>
+                <th>Status</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="pc in pcs" :key="pc.machineid">
+                <td>{{ pc.machinenumber }}</td>
+                <td class="mono">{{ pc.serialnumber || '-' }}</td>
+                <td>{{ pc.pctype || '-' }}</td>
+                <td class="features">
+                  <span v-if="pc.isvnc" class="feature-tag active">VNC</span>
+                  <span v-if="pc.iswinrm" class="feature-tag active">WinRM</span>
+                  <span v-if="!pc.isvnc && !pc.iswinrm">-</span>
+                </td>
+                <td>
+                  <span class="badge" :class="getStatusClass(pc.status)">
+                    {{ pc.status || 'Unknown' }}
+                  </span>
+                </td>
+                <td class="actions">
+                  <router-link
+                    :to="`/pcs/${pc.machineid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="pcs.length === 0">
+                <td colspan="6" style="text-align: center; color: var(--text-light);">
+                  No PCs found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { machinesApi } from '../../api'
+
+const pcs = ref([])
+const loading = ref(true)
+const search = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadPCs()
+})
+
+async function loadPCs() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20,
+      category: 'PC'
+    }
+    if (search.value) params.search = search.value
+
+    const response = await machinesApi.list(params)
+    pcs.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading PCs:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadPCs()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadPCs()
+}
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair') return 'badge-warning'
+  if (s === 'retired') return 'badge-danger'
+  return 'badge-info'
+}
+</script>
+
+<style scoped>
+.mono {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+.features {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.feature-tag {
+  display: inline-block;
+  padding: 0.3rem 0.625rem;
+  font-size: 0.875rem;
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--text-light);
+}
+
+.feature-tag.active {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+@media (prefers-color-scheme: dark) {
+  .feature-tag.active {
+    background: #1e3a5f;
+    color: #60a5fa;
+  }
+}
+</style>
diff --git a/frontend/src/views/printers/PrinterDetail.vue b/frontend/src/views/printers/PrinterDetail.vue
new file mode 100644
index 0000000..12d015f
--- /dev/null
+++ b/frontend/src/views/printers/PrinterDetail.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="detail-page">
+    <div class="page-header">
+      <h2>Printer Details</h2>
+      <div class="header-actions">
+        <router-link :to="`/printers/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
+        <router-link to="/printers" class="btn btn-secondary">Back to List</router-link>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Loading...</div>
+
+    <template v-else-if="printer">
+      <!-- Hero Section -->
+      <div class="hero-card">
+        <div class="hero-image" v-if="printer.model?.imageurl">
+          <img :src="printer.model.imageurl" :alt="printer.model?.modelnumber" />
+        </div>
+        <div class="hero-content">
+          <div class="hero-title">
+            <h1>{{ printer.machinenumber }}</h1>
+            <span v-if="printer.alias" class="hero-alias">{{ printer.alias }}</span>
+          </div>
+          <div class="hero-meta">
+            <span class="badge badge-lg badge-printer">Printer</span>
+            <span class="badge badge-lg" :class="getStatusClass(printer.status?.status)">
+              {{ printer.status?.status || 'Unknown' }}
+            </span>
+          </div>
+          <div class="hero-details">
+            <div class="hero-detail" v-if="printer.vendor?.vendor">
+              <span class="hero-detail-label">Vendor</span>
+              <span class="hero-detail-value">{{ printer.vendor.vendor }}</span>
+            </div>
+            <div class="hero-detail" v-if="printer.model?.modelnumber">
+              <span class="hero-detail-label">Model</span>
+              <span class="hero-detail-value">{{ printer.model.modelnumber }}</span>
+            </div>
+            <div class="hero-detail" v-if="printer.location?.locationname">
+              <span class="hero-detail-label">Location</span>
+              <span class="hero-detail-value">{{ printer.location.location }}</span>
+            </div>
+            <div class="hero-detail" v-if="ipAddress">
+              <span class="hero-detail-label">IP Address</span>
+              <span class="hero-detail-value mono">{{ ipAddress }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Main Content Grid -->
+      <div class="content-grid">
+        <!-- Left Column -->
+        <div class="content-column">
+          <!-- Identity Section -->
+          <div class="section-card">
+            <h3 class="section-title">Identity</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Windows Name</span>
+                <span class="info-value">{{ printer.machinenumber }}</span>
+              </div>
+              <div class="info-row" v-if="printer.alias">
+                <span class="info-label">Alias</span>
+                <span class="info-value">{{ printer.alias }}</span>
+              </div>
+              <div class="info-row" v-if="printer.hostname">
+                <span class="info-label">Hostname</span>
+                <span class="info-value mono">{{ printer.hostname }}</span>
+              </div>
+              <div class="info-row" v-if="printer.serialnumber">
+                <span class="info-label">Serial Number</span>
+                <span class="info-value mono">{{ printer.serialnumber }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Printer Settings -->
+          <div class="section-card" v-if="printer.printerdata?.windowsname || printer.printerdata?.sharename">
+            <h3 class="section-title">Print Server</h3>
+            <div class="info-list">
+              <div class="info-row" v-if="printer.printerdata?.windowsname">
+                <span class="info-label">Windows Name</span>
+                <span class="info-value mono">{{ printer.printerdata.windowsname }}</span>
+              </div>
+              <div class="info-row" v-if="printer.printerdata?.sharename">
+                <span class="info-label">CSF Name</span>
+                <span class="info-value mono">{{ printer.printerdata.sharename }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Notes -->
+          <div class="section-card" v-if="printer.notes">
+            <h3 class="section-title">Notes</h3>
+            <p class="notes-text">{{ printer.notes }}</p>
+          </div>
+        </div>
+
+        <!-- Right Column -->
+        <div class="content-column">
+          <!-- Location -->
+          <div class="section-card">
+            <h3 class="section-title">Location</h3>
+            <div class="info-list">
+              <div class="info-row">
+                <span class="info-label">Location</span>
+                <span class="info-value">
+                  <LocationMapTooltip
+                    v-if="printer.mapleft != null && printer.maptop != null"
+                    :left="printer.mapleft"
+                    :top="printer.maptop"
+                    :machineName="printer.machinenumber"
+                  >
+                    <span class="location-link">{{ printer.location?.locationname || 'On Map' }}</span>
+                  </LocationMapTooltip>
+                  <span v-else>{{ printer.location?.locationname || '-' }}</span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Network -->
+          <div class="section-card" v-if="printer.communications?.length">
+            <h3 class="section-title">Network</h3>
+            <div class="network-list">
+              <div v-for="comm in printer.communications" :key="comm.communicationid" class="network-item">
+                <div class="network-primary">
+                  <span class="ip-address">{{ comm.ipaddress || comm.address || '-' }}</span>
+                  <span v-if="comm.isprimary" class="primary-badge">Primary</span>
+                </div>
+                <div class="network-secondary" v-if="comm.macaddress">
+                  <span class="mac-address">{{ comm.macaddress }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Supplies Card -->
+      <div class="card">
+        <div class="card-header">
+          <h3>Supplies</h3>
+        </div>
+
+        <div v-if="supplies.length === 0" class="empty-state">
+          No supply information available
+        </div>
+
+        <div v-else class="supplies-grid">
+          <div v-for="supply in supplies" :key="supply.supplyid" class="supply-item">
+            <div class="supply-header">
+              <span class="supply-name">{{ supply.supplyname }}</span>
+              <span class="supply-level" :class="getSupplyLevelClass(supply.currentlevel)">
+                {{ supply.currentlevel !== null ? `${supply.currentlevel}%` : 'N/A' }}
+              </span>
+            </div>
+            <div class="supply-bar">
+              <div
+                class="supply-bar-fill"
+                :class="getSupplyLevelClass(supply.currentlevel)"
+                :style="{ width: `${supply.currentlevel || 0}%` }"
+              ></div>
+            </div>
+            <div class="supply-meta">
+              <span>{{ supply.supplytypename }}</span>
+              <span v-if="supply.partnumber">Part: {{ supply.partnumber }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Drivers Card -->
+      <div class="card">
+        <div class="card-header">
+          <h3>Assigned Drivers</h3>
+        </div>
+
+        <div v-if="drivers.length === 0" class="empty-state">
+          No drivers assigned
+        </div>
+
+        <div v-else class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Driver Name</th>
+                <th>OS Type</th>
+                <th>Version</th>
+                <th>Universal</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="driver in drivers" :key="driver.driverid">
+                <td>{{ driver.drivername }}</td>
+                <td>{{ driver.ostype }}</td>
+                <td>{{ driver.version || '-' }}</td>
+                <td>{{ driver.isuniversal ? 'Yes' : 'No' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+
+    <div v-else class="card">
+      <p style="text-align: center; color: var(--text-light);">Printer not found</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { printersApi } from '../../api'
+import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
+
+const route = useRoute()
+
+const loading = ref(true)
+const printer = ref(null)
+const supplies = ref([])
+const drivers = ref([])
+
+// Get IP address from communications
+const ipAddress = computed(() => {
+  if (!printer.value?.communications) return null
+  const primaryComm = printer.value.communications.find(c => c.isprimary) || printer.value.communications[0]
+  return primaryComm?.ipaddress || null
+})
+
+onMounted(async () => {
+  try {
+    const [printerRes, suppliesRes, driversRes] = await Promise.all([
+      printersApi.get(route.params.id),
+      printersApi.getSupplies(route.params.id).catch(() => ({ data: { data: [] } })),
+      printersApi.getDrivers(route.params.id).catch(() => ({ data: { data: [] } }))
+    ])
+
+    printer.value = printerRes.data.data
+    supplies.value = suppliesRes.data.data || []
+    drivers.value = driversRes.data.data || []
+  } catch (error) {
+    console.error('Error loading printer:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active' || s === 'online') return 'badge-success'
+  if (s === 'in repair' || s === 'offline') return 'badge-warning'
+  if (s === 'retired' || s === 'error') return 'badge-danger'
+  return 'badge-info'
+}
+
+function getSupplyLevelClass(level) {
+  if (level === null || level === undefined) return ''
+  if (level <= 10) return 'critical'
+  if (level <= 25) return 'low'
+  return 'ok'
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString()
+}
+</script>
+
+<style scoped>
+/* Printer-specific styles - shared styles are in global style.css */
+
+.empty-state {
+  text-align: center;
+  color: var(--text-light);
+  padding: 2.5rem;
+  font-size: 1.125rem;
+}
+
+/* Supplies */
+.supplies-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.25rem;
+}
+
+.supply-item {
+  background: var(--bg);
+  padding: 1.25rem;
+  border-radius: 8px;
+}
+
+.supply-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.supply-name {
+  font-weight: 500;
+  font-size: 1.125rem;
+}
+
+.supply-level {
+  font-weight: 600;
+  font-size: 1.125rem;
+}
+
+.supply-level.ok { color: var(--success); }
+.supply-level.low { color: var(--warning); }
+.supply-level.critical { color: var(--danger); }
+
+.supply-bar {
+  height: 10px;
+  background: var(--border);
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.supply-bar-fill {
+  height: 100%;
+  transition: width 0.3s ease;
+  background: var(--success);
+}
+
+.supply-bar-fill.low { background: var(--warning); }
+.supply-bar-fill.critical { background: var(--danger); }
+
+.supply-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1rem;
+  color: var(--text-light);
+  margin-top: 0.625rem;
+}
+</style>
diff --git a/frontend/src/views/printers/PrinterForm.vue b/frontend/src/views/printers/PrinterForm.vue
new file mode 100644
index 0000000..06ee53e
--- /dev/null
+++ b/frontend/src/views/printers/PrinterForm.vue
@@ -0,0 +1,599 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>{{ isEdit ? 'Edit Printer' : 'New Printer' }}</h2>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <form v-else @submit.prevent="savePrinter">
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinenumber">Windows Name *</label>
+            <input
+              id="machinenumber"
+              v-model="form.machinenumber"
+              type="text"
+              class="form-control"
+              required
+              @input="onWindowsNameInput"
+              :class="{ 'auto-generated': !manualWindowsName && form.machinenumber }"
+            />
+            <small class="form-hint">Auto-generated from CSF Name, Alias, Vendor & Model</small>
+          </div>
+
+          <div class="form-group">
+            <label for="alias">Alias / Location</label>
+            <input
+              id="alias"
+              v-model="form.alias"
+              type="text"
+              class="form-control"
+              placeholder="e.g., SpoolsInspection"
+            />
+            <small class="form-hint">Used in Windows name generation</small>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="hostname">Hostname (FQDN)</label>
+            <input
+              id="hostname"
+              v-model="form.hostname"
+              type="text"
+              class="form-control"
+              @input="onHostnameInput"
+              :class="{ 'auto-generated': !manualHostname && form.hostname }"
+            />
+            <small class="form-hint">Auto-generated from IP address</small>
+          </div>
+
+          <div class="form-group">
+            <label for="serialnumber">Serial Number</label>
+            <input
+              id="serialnumber"
+              v-model="form.serialnumber"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="machinetypeid">Printer Type *</label>
+            <select
+              id="machinetypeid"
+              v-model="form.machinetypeid"
+              class="form-control"
+              required
+              @change="form.modelnumberid = ''"
+            >
+              <option value="">Select type...</option>
+              <option
+                v-for="mt in printerTypes"
+                :key="mt.machinetypeid"
+                :value="mt.machinetypeid"
+              >
+                {{ mt.machinetype }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="statusid">Status</label>
+            <select
+              id="statusid"
+              v-model="form.statusid"
+              class="form-control"
+            >
+              <option value="">Select status...</option>
+              <option
+                v-for="s in statuses"
+                :key="s.statusid"
+                :value="s.statusid"
+              >
+                {{ s.status }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="vendorid">Vendor</label>
+            <select
+              id="vendorid"
+              v-model="form.vendorid"
+              class="form-control"
+              @change="form.modelnumberid = ''"
+            >
+              <option value="">Select vendor...</option>
+              <option
+                v-for="v in vendors"
+                :key="v.vendorid"
+                :value="v.vendorid"
+              >
+                {{ v.vendor }}
+              </option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="modelnumberid">Model</label>
+            <select
+              id="modelnumberid"
+              v-model="form.modelnumberid"
+              class="form-control"
+            >
+              <option value="">Select model...</option>
+              <option
+                v-for="m in filteredModels"
+                :key="m.modelnumberid"
+                :value="m.modelnumberid"
+              >
+                {{ m.modelnumber }}
+              </option>
+            </select>
+            <small v-if="!form.vendorid && !form.machinetypeid" class="form-hint">
+              Select vendor or printer type to filter models
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="locationid">Location</label>
+          <select
+            id="locationid"
+            v-model="form.locationid"
+            class="form-control"
+          >
+            <option value="">Select location...</option>
+            <option
+              v-for="l in locations"
+              :key="l.locationid"
+              :value="l.locationid"
+            >
+              {{ l.location }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Printer-specific fields -->
+        <h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Printer Settings</h4>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="ipaddress">IP Address</label>
+            <input
+              id="ipaddress"
+              v-model="form.ipaddress"
+              type="text"
+              class="form-control"
+              placeholder="e.g., 192.168.1.100"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="csfname">CSF Name</label>
+            <input
+              id="csfname"
+              v-model="form.csfname"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="pin">PIN</label>
+            <input
+              id="pin"
+              v-model="form.pin"
+              type="text"
+              class="form-control"
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="installpath">Driver Install Path</label>
+          <input
+            id="installpath"
+            v-model="form.installpath"
+            type="text"
+            class="form-control"
+            placeholder="Leave empty for universal driver"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="notes">Notes</label>
+          <textarea
+            id="notes"
+            v-model="form.notes"
+            class="form-control"
+            rows="3"
+          ></textarea>
+        </div>
+
+        <!-- Map Location Picker -->
+        <div class="form-group">
+          <label>Map Location</label>
+          <div class="map-location-control">
+            <div v-if="form.mapleft !== null && form.maptop !== null" class="current-position">
+              Position: {{ form.mapleft }}, {{ form.maptop }}
+              <button type="button" class="btn btn-sm btn-secondary" @click="clearMapPosition">Clear</button>
+            </div>
+            <button type="button" class="btn btn-secondary" @click="showMapPicker = true">
+              Set Location on Map
+            </button>
+          </div>
+        </div>
+
+        <!-- Map Picker Modal -->
+        <Modal v-model="showMapPicker" title="Select Location on Map" size="fullscreen">
+          <div class="map-modal-content">
+            <ShopFloorMap
+              :pickerMode="true"
+              :initialPosition="form.mapleft !== null ? { left: form.mapleft, top: form.maptop } : null"
+              @positionPicked="handlePositionPicked"
+            />
+          </div>
+          <template #footer>
+            <button class="btn btn-secondary" @click="showMapPicker = false">Cancel</button>
+            <button class="btn btn-primary" @click="confirmMapPosition">Confirm Location</button>
+          </template>
+        </Modal>
+
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
+          <button type="submit" class="btn btn-primary" :disabled="saving">
+            {{ saving ? 'Saving...' : 'Save Printer' }}
+          </button>
+          <router-link to="/printers" class="btn btn-secondary">Cancel</router-link>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { machinesApi, machinetypesApi, statusesApi, vendorsApi, locationsApi, printersApi, modelsApi } from '../../api'
+import ShopFloorMap from '../../components/ShopFloorMap.vue'
+import Modal from '../../components/Modal.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const isEdit = computed(() => !!route.params.id)
+const manualHostname = ref(false)
+const manualWindowsName = ref(false)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref('')
+const showMapPicker = ref(false)
+const tempMapPosition = ref(null)
+
+const form = ref({
+  machinenumber: '',
+  alias: '',
+  hostname: '',
+  serialnumber: '',
+  machinetypeid: '',
+  statusid: '',
+  vendorid: '',
+  modelnumberid: '',
+  locationid: '',
+  notes: '',
+  mapleft: null,
+  maptop: null,
+  // Printer-specific
+  ipaddress: '',
+  csfname: '',
+  installpath: '',
+  pin: ''
+})
+
+const printerTypes = ref([])
+const statuses = ref([])
+const vendors = ref([])
+const models = ref([])
+const locations = ref([])
+
+// Filter models by selected vendor and printer type
+const filteredModels = computed(() => {
+  return models.value.filter(m => {
+    // Filter by vendor if selected
+    if (form.value.vendorid && m.vendorid !== form.value.vendorid) {
+      return false
+    }
+    // Filter by printer type if selected
+    if (form.value.machinetypeid && m.machinetypeid !== form.value.machinetypeid) {
+      return false
+    }
+    return true
+  })
+})
+
+// Get short description from model number for naming
+function getModelShortDesc(modelNumber) {
+  if (!modelNumber) return ''
+  const mn = modelNumber.toLowerCase()
+
+  if (mn.includes('colorlaserjet')) return 'ColorLaserJet'
+  if (mn.includes('laserjetpro') || mn.includes('laserjet pro')) return 'LaserJetPro'
+  if (mn.includes('laserjet')) return 'LaserJet'
+  if (mn.includes('altalink')) return 'Altalink'
+  if (mn.includes('versalink')) return 'Versalink'
+  if (mn.includes('designjet')) return 'DesignJet'
+  if (mn.includes('dtc')) return 'DTC'
+  if (mn.includes('officejet')) return 'OfficeJet'
+  if (mn.includes('pagewide')) return 'PageWide'
+
+  // Fallback: get letters before first digit
+  const match = modelNumber.match(/^([A-Za-z]+)/)
+  return match ? match[1] : modelNumber.substring(0, 5)
+}
+
+// Auto-generate hostname from IP address
+function generateHostname(ip) {
+  if (!ip) return ''
+  const ipDashed = ip.replace(/\./g, '-')
+  return `Printer-${ipDashed}.printer.geaerospace.net`
+}
+
+// Auto-generate Windows name (machinenumber)
+function generateWindowsName() {
+  const parts = []
+
+  // 1. CSF Name (if set and not "NONE")
+  const csfName = form.value.csfname?.trim()
+  if (csfName && csfName.toUpperCase() !== 'NONE') {
+    parts.push(csfName.replace(/\s+/g, ''))
+  }
+
+  // 2. Location (from alias, removing spaces and "Machine")
+  const alias = form.value.alias?.trim()
+  if (alias) {
+    const location = alias.replace(/\s+/g, '').replace(/Machine/gi, '')
+    // Skip if same as CSF name
+    if (location.toLowerCase() !== csfName?.toLowerCase()) {
+      parts.push(location)
+    }
+  }
+
+  // 3. Vendor + Model short description
+  const selectedModel = models.value.find(m => m.modelnumberid === form.value.modelnumberid)
+  const selectedVendor = vendors.value.find(v => v.vendorid === form.value.vendorid)
+
+  let vendorModel = ''
+  if (selectedVendor) {
+    vendorModel = selectedVendor.vendor.replace(/\s+/g, '')
+  }
+  if (selectedModel) {
+    vendorModel += getModelShortDesc(selectedModel.modelnumber)
+  }
+  if (vendorModel) {
+    parts.push(vendorModel)
+  }
+
+  return parts.join('-')
+}
+
+// Watch IP address and auto-generate hostname
+watch(() => form.value.ipaddress, (newIp) => {
+  if (!manualHostname.value && newIp) {
+    form.value.hostname = generateHostname(newIp)
+  }
+})
+
+// Watch fields that affect Windows name generation
+watch(
+  () => [form.value.csfname, form.value.alias, form.value.vendorid, form.value.modelnumberid],
+  () => {
+    if (!manualWindowsName.value && !isEdit.value) {
+      const generated = generateWindowsName()
+      if (generated) {
+        form.value.machinenumber = generated
+      }
+    }
+  }
+)
+
+// Track manual edits to hostname
+function onHostnameInput() {
+  manualHostname.value = true
+}
+
+// Track manual edits to Windows name
+function onWindowsNameInput() {
+  manualWindowsName.value = true
+}
+
+onMounted(async () => {
+  try {
+    // Load reference data
+    const [mtRes, statusRes, vendorRes, modelsRes, locRes] = await Promise.all([
+      machinetypesApi.list({ category: 'Printer' }),
+      statusesApi.list(),
+      vendorsApi.list(),
+      modelsApi.list(),
+      locationsApi.list()
+    ])
+
+    printerTypes.value = mtRes.data.data || []
+    statuses.value = statusRes.data.data || []
+    vendors.value = vendorRes.data.data || []
+    models.value = modelsRes.data.data || []
+    locations.value = locRes.data.data || []
+
+    // Load printer if editing
+    if (isEdit.value) {
+      const response = await printersApi.get(route.params.id)
+      const printer = response.data.data
+
+      // Get IP from communications
+      const primaryComm = printer.communications?.find(c => c.isprimary) || printer.communications?.[0]
+
+      form.value = {
+        machinenumber: printer.machinenumber || '',
+        alias: printer.alias || '',
+        hostname: printer.hostname || '',
+        serialnumber: printer.serialnumber || '',
+        machinetypeid: printer.machinetype?.machinetypeid || '',
+        statusid: printer.status?.statusid || '',
+        vendorid: printer.vendor?.vendorid || '',
+        modelnumberid: printer.model?.modelnumberid || '',
+        locationid: printer.location?.locationid || '',
+        notes: printer.notes || '',
+        mapleft: printer.mapleft ?? null,
+        maptop: printer.maptop ?? null,
+        // Printer-specific
+        ipaddress: primaryComm?.ipaddress || '',
+        csfname: printer.printerdata?.sharename || '',
+        installpath: printer.printerdata?.installpath || '',
+        pin: printer.printerdata?.pin || ''
+      }
+
+      // Don't auto-generate for existing printers
+      manualWindowsName.value = true
+      manualHostname.value = true
+    }
+  } catch (err) {
+    console.error('Error loading data:', err)
+    error.value = 'Failed to load data'
+  } finally {
+    loading.value = false
+  }
+})
+
+function handlePositionPicked(position) {
+  tempMapPosition.value = position
+}
+
+function confirmMapPosition() {
+  if (tempMapPosition.value) {
+    form.value.mapleft = tempMapPosition.value.left
+    form.value.maptop = tempMapPosition.value.top
+  }
+  showMapPicker.value = false
+}
+
+function clearMapPosition() {
+  form.value.mapleft = null
+  form.value.maptop = null
+  tempMapPosition.value = null
+}
+
+async function savePrinter() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const machineData = {
+      machinenumber: form.value.machinenumber,
+      alias: form.value.alias,
+      hostname: form.value.hostname,
+      serialnumber: form.value.serialnumber,
+      machinetypeid: form.value.machinetypeid || null,
+      statusid: form.value.statusid || null,
+      vendorid: form.value.vendorid || null,
+      modelnumberid: form.value.modelnumberid || null,
+      locationid: form.value.locationid || null,
+      notes: form.value.notes,
+      mapleft: form.value.mapleft,
+      maptop: form.value.maptop
+    }
+
+    const printerData = {
+      windowsname: form.value.machinenumber,  // Windows name is the machinenumber
+      sharename: form.value.csfname,
+      installpath: form.value.installpath,
+      pin: form.value.pin,
+      iscsf: !!form.value.csfname  // Auto-set based on whether CSF name is filled
+    }
+
+    // Handle IP address - need to update/create communication record
+    const communicationData = form.value.ipaddress ? {
+      ipaddress: form.value.ipaddress,
+      isprimary: true
+    } : null
+
+    if (isEdit.value) {
+      await machinesApi.update(route.params.id, machineData)
+      await printersApi.updateExtension(route.params.id, printerData)
+      if (communicationData) {
+        await printersApi.updateCommunication(route.params.id, communicationData)
+      }
+    } else {
+      const response = await machinesApi.create(machineData)
+      const newId = response.data.data.machineid
+      await printersApi.updateExtension(newId, printerData)
+      if (communicationData) {
+        await printersApi.updateCommunication(newId, communicationData)
+      }
+    }
+
+    router.push('/printers')
+  } catch (err) {
+    console.error('Error saving printer:', err)
+    error.value = err.response?.data?.message || 'Failed to save printer'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<style scoped>
+.map-location-control {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.current-position {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #e3f2fd;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.map-modal-content {
+  height: calc(90vh - 140px);
+}
+
+.map-modal-content :deep(.shopfloor-map) {
+  height: 100%;
+}
+
+.map-modal-content :deep(.map-container) {
+  height: calc(100% - 50px);
+}
+
+.form-hint {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-light, #666);
+}
+
+.auto-generated {
+  background-color: #f0f7ff;
+  border-color: #90caf9;
+}
+
+.auto-generated:focus {
+  background-color: white;
+}
+</style>
diff --git a/frontend/src/views/printers/PrintersList.vue b/frontend/src/views/printers/PrintersList.vue
new file mode 100644
index 0000000..c6bce49
--- /dev/null
+++ b/frontend/src/views/printers/PrintersList.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Printers</h2>
+      <router-link to="/printers/new" class="btn btn-primary">Add Printer</router-link>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search printers..."
+        @input="debouncedSearch"
+      />
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Machine #</th>
+                <th>Alias</th>
+                <th>Location</th>
+                <th>Model</th>
+                <th>Status</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="printer in printers" :key="printer.machineid">
+                <td>{{ printer.machinenumber }}</td>
+                <td>{{ printer.alias || '-' }}</td>
+                <td>{{ printer.location || '-' }}</td>
+                <td>{{ printer.model || '-' }}</td>
+                <td>
+                  <span class="badge" :class="getStatusClass(printer.status)">
+                    {{ printer.status || 'Unknown' }}
+                  </span>
+                </td>
+                <td class="actions">
+                  <router-link
+                    :to="`/printers/${printer.machineid}`"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    View
+                  </router-link>
+                </td>
+              </tr>
+              <tr v-if="printers.length === 0">
+                <td colspan="6" style="text-align: center; color: var(--text-light);">
+                  No printers found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { printersApi } from '../../api'
+
+const printers = ref([])
+const loading = ref(true)
+const search = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadPrinters()
+})
+
+async function loadPrinters() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20
+    }
+    if (search.value) params.search = search.value
+
+    const response = await printersApi.list(params)
+    printers.value = response.data.data || []
+    totalPages.value = response.data.meta?.pagination?.total_pages || 1
+  } catch (error) {
+    console.error('Error loading printers:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadPrinters()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadPrinters()
+}
+
+function getStatusClass(status) {
+  if (!status) return 'badge-info'
+  const s = status.toLowerCase()
+  if (s === 'in use' || s === 'active') return 'badge-success'
+  if (s === 'in repair') return 'badge-warning'
+  if (s === 'retired') return 'badge-danger'
+  return 'badge-info'
+}
+</script>
diff --git a/frontend/src/views/settings/BusinessUnitsList.vue b/frontend/src/views/settings/BusinessUnitsList.vue
new file mode 100644
index 0000000..71417f2
--- /dev/null
+++ b/frontend/src/views/settings/BusinessUnitsList.vue
@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Business Units</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add Business Unit</button>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Business Unit</th>
+                <th>Code</th>
+                <th>Description</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="bu in items" :key="bu.businessunitid">
+                <td>{{ bu.businessunit }}</td>
+                <td>{{ bu.code || '-' }}</td>
+                <td>{{ bu.description || '-' }}</td>
+                <td class="actions">
+                  <button class="btn btn-secondary btn-sm" @click="openModal(bu)">Edit</button>
+                  <button class="btn btn-danger btn-sm" @click="confirmDelete(bu)">Delete</button>
+                </td>
+              </tr>
+              <tr v-if="items.length === 0">
+                <td colspan="4" style="text-align: center; color: var(--text-light);">
+                  No business units found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="pagination" v-if="totalPages > 1">
+          <button v-for="p in totalPages" :key="p" :class="{ active: p === page }" @click="goToPage(p)">
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>{{ editing ? 'Edit Business Unit' : 'Add Business Unit' }}</h3>
+        </div>
+        <form @submit.prevent="save">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="businessunit">Business Unit Name *</label>
+              <input id="businessunit" v-model="form.businessunit" type="text" class="form-control" required />
+            </div>
+            <div class="form-group">
+              <label for="code">Code</label>
+              <input id="code" v-model="form.code" type="text" class="form-control" placeholder="e.g., ENGR, MFG" />
+            </div>
+            <div class="form-group">
+              <label for="description">Description</label>
+              <textarea id="description" v-model="form.description" class="form-control" rows="3"></textarea>
+            </div>
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header"><h3>Delete Business Unit</h3></div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ toDelete?.businessunit }}</strong>?</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteItem">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { businessunitsApi } from '../../api'
+
+const items = ref([])
+const loading = ref(true)
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editing = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const toDelete = ref(null)
+
+const form = ref({ businessunit: '', code: '', description: '' })
+
+onMounted(() => loadData())
+
+async function loadData() {
+  loading.value = true
+  try {
+    const response = await businessunitsApi.list({ page: page.value, perpage: 20 })
+    items.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading business units:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToPage(p) { page.value = p; loadData() }
+
+function openModal(item = null) {
+  editing.value = item
+  form.value = item ? {
+    businessunit: item.businessunit || '',
+    code: item.code || '',
+    description: item.description || ''
+  } : { businessunit: '', code: '', description: '' }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() { showModal.value = false; editing.value = null }
+
+async function save() {
+  error.value = ''
+  saving.value = true
+  try {
+    if (editing.value) {
+      await businessunitsApi.update(editing.value.businessunitid, form.value)
+    } else {
+      await businessunitsApi.create(form.value)
+    }
+    closeModal()
+    loadData()
+  } catch (err) {
+    error.value = err.response?.data?.message || 'Failed to save'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(item) { toDelete.value = item; showDeleteModal.value = true }
+
+async function deleteItem() {
+  try {
+    await businessunitsApi.delete(toDelete.value.businessunitid)
+    showDeleteModal.value = false
+    toDelete.value = null
+    loadData()
+  } catch (err) {
+    alert('Failed to delete')
+  }
+}
+</script>
diff --git a/frontend/src/views/settings/LocationsList.vue b/frontend/src/views/settings/LocationsList.vue
new file mode 100644
index 0000000..99db775
--- /dev/null
+++ b/frontend/src/views/settings/LocationsList.vue
@@ -0,0 +1,324 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Locations</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add Location</button>
+    </div>
+
+    <!-- Search -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search locations..."
+        @input="debouncedSearch"
+      />
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Location Name</th>
+                <th>Building</th>
+                <th>Floor</th>
+                <th>Room</th>
+                <th>Description</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="loc in locations" :key="loc.locationid">
+                <td>{{ loc.locationname }}</td>
+                <td>{{ loc.building || '-' }}</td>
+                <td>{{ loc.floor || '-' }}</td>
+                <td>{{ loc.room || '-' }}</td>
+                <td>{{ loc.description || '-' }}</td>
+                <td class="actions">
+                  <button
+                    class="btn btn-secondary btn-sm"
+                    @click="openModal(loc)"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    class="btn btn-danger btn-sm"
+                    @click="confirmDelete(loc)"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr v-if="locations.length === 0">
+                <td colspan="6" style="text-align: center; color: var(--text-light);">
+                  No locations found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>{{ editingLocation ? 'Edit Location' : 'Add Location' }}</h3>
+        </div>
+        <form @submit.prevent="saveLocation">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="locationname">Location Name *</label>
+              <input
+                id="locationname"
+                v-model="form.locationname"
+                type="text"
+                class="form-control"
+                required
+              />
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label for="building">Building</label>
+                <input
+                  id="building"
+                  v-model="form.building"
+                  type="text"
+                  class="form-control"
+                />
+              </div>
+
+              <div class="form-group">
+                <label for="floor">Floor</label>
+                <input
+                  id="floor"
+                  v-model="form.floor"
+                  type="text"
+                  class="form-control"
+                />
+              </div>
+
+              <div class="form-group">
+                <label for="room">Room</label>
+                <input
+                  id="room"
+                  v-model="form.room"
+                  type="text"
+                  class="form-control"
+                />
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label for="description">Description</label>
+              <textarea
+                id="description"
+                v-model="form.description"
+                class="form-control"
+                rows="3"
+              ></textarea>
+            </div>
+
+            <div class="form-group">
+              <label for="mapimage">Map Image URL</label>
+              <input
+                id="mapimage"
+                v-model="form.mapimage"
+                type="text"
+                class="form-control"
+                placeholder="Optional floor plan image URL"
+              />
+            </div>
+
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>Delete Location</h3>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ locationToDelete?.locationname }}</strong>?</p>
+          <p style="color: var(--text-light); font-size: 0.875rem;">
+            This may affect machines assigned to this location.
+          </p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteLocation">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { locationsApi } from '../../api'
+
+const locations = ref([])
+const loading = ref(true)
+const search = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editingLocation = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const locationToDelete = ref(null)
+
+const form = ref({
+  locationname: '',
+  building: '',
+  floor: '',
+  room: '',
+  description: '',
+  mapimage: ''
+})
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadLocations()
+})
+
+async function loadLocations() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20
+    }
+    if (search.value) params.search = search.value
+
+    const response = await locationsApi.list(params)
+    locations.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading locations:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadLocations()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadLocations()
+}
+
+function openModal(loc = null) {
+  editingLocation.value = loc
+  if (loc) {
+    form.value = {
+      locationname: loc.locationname || '',
+      building: loc.building || '',
+      floor: loc.floor || '',
+      room: loc.room || '',
+      description: loc.description || '',
+      mapimage: loc.mapimage || ''
+    }
+  } else {
+    form.value = {
+      locationname: '',
+      building: '',
+      floor: '',
+      room: '',
+      description: '',
+      mapimage: ''
+    }
+  }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  editingLocation.value = null
+}
+
+async function saveLocation() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    if (editingLocation.value) {
+      await locationsApi.update(editingLocation.value.locationid, form.value)
+    } else {
+      await locationsApi.create(form.value)
+    }
+    closeModal()
+    loadLocations()
+  } catch (err) {
+    console.error('Error saving location:', err)
+    error.value = err.response?.data?.message || 'Failed to save location'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(loc) {
+  locationToDelete.value = loc
+  showDeleteModal.value = true
+}
+
+async function deleteLocation() {
+  try {
+    await locationsApi.delete(locationToDelete.value.locationid)
+    showDeleteModal.value = false
+    locationToDelete.value = null
+    loadLocations()
+  } catch (err) {
+    console.error('Error deleting location:', err)
+    alert('Failed to delete location')
+  }
+}
+</script>
+
+<style scoped>
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+</style>
diff --git a/frontend/src/views/settings/MachineTypesList.vue b/frontend/src/views/settings/MachineTypesList.vue
new file mode 100644
index 0000000..925cd8f
--- /dev/null
+++ b/frontend/src/views/settings/MachineTypesList.vue
@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Machine Types</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add Type</button>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Machine Type</th>
+                <th>Category</th>
+                <th>Description</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="mt in machineTypes" :key="mt.machinetypeid">
+                <td>{{ mt.machinetype }}</td>
+                <td>
+                  <span class="badge" :class="getCategoryClass(mt.category)">
+                    {{ mt.category }}
+                  </span>
+                </td>
+                <td>{{ mt.description || '-' }}</td>
+                <td class="actions">
+                  <button
+                    class="btn btn-secondary btn-sm"
+                    @click="openModal(mt)"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    class="btn btn-danger btn-sm"
+                    @click="confirmDelete(mt)"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr v-if="machineTypes.length === 0">
+                <td colspan="4" style="text-align: center; color: var(--text-light);">
+                  No machine types found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>{{ editingType ? 'Edit Machine Type' : 'Add Machine Type' }}</h3>
+        </div>
+        <form @submit.prevent="saveType">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="machinetype">Type Name *</label>
+              <input
+                id="machinetype"
+                v-model="form.machinetype"
+                type="text"
+                class="form-control"
+                required
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="category">Category *</label>
+              <select
+                id="category"
+                v-model="form.category"
+                class="form-control"
+                required
+              >
+                <option value="">Select category...</option>
+                <option value="Equipment">Equipment</option>
+                <option value="PC">PC</option>
+                <option value="Network">Network</option>
+                <option value="Printer">Printer</option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="description">Description</label>
+              <textarea
+                id="description"
+                v-model="form.description"
+                class="form-control"
+                rows="3"
+              ></textarea>
+            </div>
+
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>Delete Machine Type</h3>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ typeToDelete?.machinetype }}</strong>?</p>
+          <p style="color: var(--text-light); font-size: 0.875rem;">
+            This may affect machines using this type.
+          </p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteType">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { machinetypesApi } from '../../api'
+
+const machineTypes = ref([])
+const loading = ref(true)
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editingType = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const typeToDelete = ref(null)
+
+const form = ref({
+  machinetype: '',
+  category: '',
+  description: ''
+})
+
+onMounted(() => {
+  loadTypes()
+})
+
+async function loadTypes() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20
+    }
+
+    const response = await machinetypesApi.list(params)
+    machineTypes.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading machine types:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToPage(p) {
+  page.value = p
+  loadTypes()
+}
+
+function openModal(mt = null) {
+  editingType.value = mt
+  if (mt) {
+    form.value = {
+      machinetype: mt.machinetype || '',
+      category: mt.category || '',
+      description: mt.description || ''
+    }
+  } else {
+    form.value = {
+      machinetype: '',
+      category: '',
+      description: ''
+    }
+  }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  editingType.value = null
+}
+
+async function saveType() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    if (editingType.value) {
+      await machinetypesApi.update(editingType.value.machinetypeid, form.value)
+    } else {
+      await machinetypesApi.create(form.value)
+    }
+    closeModal()
+    loadTypes()
+  } catch (err) {
+    console.error('Error saving machine type:', err)
+    error.value = err.response?.data?.message || 'Failed to save machine type'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(mt) {
+  typeToDelete.value = mt
+  showDeleteModal.value = true
+}
+
+async function deleteType() {
+  try {
+    await machinetypesApi.delete(typeToDelete.value.machinetypeid)
+    showDeleteModal.value = false
+    typeToDelete.value = null
+    loadTypes()
+  } catch (err) {
+    console.error('Error deleting machine type:', err)
+    alert('Failed to delete machine type')
+  }
+}
+
+function getCategoryClass(category) {
+  if (!category) return 'badge-info'
+  const c = category.toLowerCase()
+  if (c === 'equipment') return 'badge-info'
+  if (c === 'pc') return 'badge-success'
+  if (c === 'network') return 'badge-warning'
+  if (c === 'printer') return 'badge-primary'
+  return 'badge-info'
+}
+</script>
+
+<!-- Uses global styles from style.css -->
diff --git a/frontend/src/views/settings/ModelsList.vue b/frontend/src/views/settings/ModelsList.vue
new file mode 100644
index 0000000..29c8fe0
--- /dev/null
+++ b/frontend/src/views/settings/ModelsList.vue
@@ -0,0 +1,362 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Models</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add Model</button>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search models..."
+        @input="debouncedSearch"
+      />
+      <select v-model="vendorFilter" class="form-control" @change="loadModels">
+        <option value="">All Vendors</option>
+        <option v-for="v in vendors" :key="v.vendorid" :value="v.vendorid">
+          {{ v.vendor }}
+        </option>
+      </select>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Model</th>
+                <th>Vendor</th>
+                <th>Type</th>
+                <th>Documentation</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="m in models" :key="m.modelnumberid">
+                <td>
+                  <div>{{ m.modelnumber }}</div>
+                  <small v-if="m.description" class="text-muted">{{ m.description }}</small>
+                </td>
+                <td>{{ m.vendor || '-' }}</td>
+                <td>{{ m.machinetype || '-' }}</td>
+                <td>
+                  <a v-if="m.documentationurl" :href="m.documentationurl" target="_blank" class="btn btn-sm btn-link">
+                    View Docs
+                  </a>
+                  <span v-else>-</span>
+                </td>
+                <td class="actions">
+                  <button class="btn btn-secondary btn-sm" @click="openModal(m)">Edit</button>
+                  <button class="btn btn-danger btn-sm" @click="confirmDelete(m)">Delete</button>
+                </td>
+              </tr>
+              <tr v-if="models.length === 0">
+                <td colspan="5" style="text-align: center; color: var(--text-light);">
+                  No models found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal modal-lg">
+        <div class="modal-header">
+          <h3>{{ editingModel ? 'Edit Model' : 'Add Model' }}</h3>
+        </div>
+        <form @submit.prevent="saveModel">
+          <div class="modal-body">
+            <div class="form-row">
+              <div class="form-group">
+                <label for="modelnumber">Model Number *</label>
+                <input
+                  id="modelnumber"
+                  v-model="form.modelnumber"
+                  type="text"
+                  class="form-control"
+                  required
+                />
+              </div>
+              <div class="form-group">
+                <label for="vendorid">Vendor *</label>
+                <select id="vendorid" v-model="form.vendorid" class="form-control" required>
+                  <option value="">Select vendor...</option>
+                  <option v-for="v in vendors" :key="v.vendorid" :value="v.vendorid">
+                    {{ v.vendor }}
+                  </option>
+                </select>
+              </div>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label for="machinetypeid">Machine Type</label>
+                <select id="machinetypeid" v-model="form.machinetypeid" class="form-control">
+                  <option value="">Select type...</option>
+                  <option v-for="mt in machineTypes" :key="mt.machinetypeid" :value="mt.machinetypeid">
+                    {{ mt.machinetype }}
+                  </option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label for="description">Description</label>
+                <input id="description" v-model="form.description" type="text" class="form-control" />
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label for="documentationurl">Documentation URL</label>
+              <input
+                id="documentationurl"
+                v-model="form.documentationurl"
+                type="url"
+                class="form-control"
+                placeholder="https://..."
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="imageurl">Image URL</label>
+              <input
+                id="imageurl"
+                v-model="form.imageurl"
+                type="url"
+                class="form-control"
+                placeholder="https://..."
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="notes">Notes</label>
+              <textarea id="notes" v-model="form.notes" class="form-control" rows="2"></textarea>
+            </div>
+
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>Delete Model</h3>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ modelToDelete?.modelnumber }}</strong>?</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteModel">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { modelsApi, vendorsApi, machinetypesApi } from '../../api'
+
+const models = ref([])
+const vendors = ref([])
+const machineTypes = ref([])
+const loading = ref(true)
+const search = ref('')
+const vendorFilter = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editingModel = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const modelToDelete = ref(null)
+
+const form = ref({
+  modelnumber: '',
+  vendorid: '',
+  machinetypeid: '',
+  description: '',
+  documentationurl: '',
+  imageurl: '',
+  notes: ''
+})
+
+let searchTimeout = null
+
+onMounted(async () => {
+  await Promise.all([
+    loadModels(),
+    loadVendors(),
+    loadMachineTypes()
+  ])
+})
+
+async function loadModels() {
+  loading.value = true
+  try {
+    const params = { page: page.value, perpage: 20 }
+    if (search.value) params.search = search.value
+    if (vendorFilter.value) params.vendor = vendorFilter.value
+
+    const response = await modelsApi.list(params)
+    models.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading models:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadVendors() {
+  try {
+    const response = await vendorsApi.list({ perpage: 100 })
+    vendors.value = response.data.data || []
+  } catch (err) {
+    console.error('Error loading vendors:', err)
+  }
+}
+
+async function loadMachineTypes() {
+  try {
+    const response = await machinetypesApi.list({ perpage: 100 })
+    machineTypes.value = response.data.data || []
+  } catch (err) {
+    console.error('Error loading machine types:', err)
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadModels()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadModels()
+}
+
+function openModal(m = null) {
+  editingModel.value = m
+  if (m) {
+    form.value = {
+      modelnumber: m.modelnumber || '',
+      vendorid: m.vendorid || '',
+      machinetypeid: m.machinetypeid || '',
+      description: m.description || '',
+      documentationurl: m.documentationurl || '',
+      imageurl: m.imageurl || '',
+      notes: m.notes || ''
+    }
+  } else {
+    form.value = {
+      modelnumber: '',
+      vendorid: '',
+      machinetypeid: '',
+      description: '',
+      documentationurl: '',
+      imageurl: '',
+      notes: ''
+    }
+  }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  editingModel.value = null
+}
+
+async function saveModel() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    const data = { ...form.value }
+    if (!data.vendorid) data.vendorid = null
+    if (!data.machinetypeid) data.machinetypeid = null
+
+    if (editingModel.value) {
+      await modelsApi.update(editingModel.value.modelnumberid, data)
+    } else {
+      await modelsApi.create(data)
+    }
+    closeModal()
+    loadModels()
+  } catch (err) {
+    console.error('Error saving model:', err)
+    error.value = err.response?.data?.message || 'Failed to save model'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(m) {
+  modelToDelete.value = m
+  showDeleteModal.value = true
+}
+
+async function deleteModel() {
+  try {
+    await modelsApi.delete(modelToDelete.value.modelnumberid)
+    showDeleteModal.value = false
+    modelToDelete.value = null
+    loadModels()
+  } catch (err) {
+    console.error('Error deleting model:', err)
+    alert('Failed to delete model')
+  }
+}
+</script>
+
+<style scoped>
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.modal-lg {
+  max-width: 600px;
+}
+
+.text-muted {
+  color: var(--text-light);
+  font-size: 0.85rem;
+}
+</style>
diff --git a/frontend/src/views/settings/OperatingSystemsList.vue b/frontend/src/views/settings/OperatingSystemsList.vue
new file mode 100644
index 0000000..568b388
--- /dev/null
+++ b/frontend/src/views/settings/OperatingSystemsList.vue
@@ -0,0 +1,213 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Operating Systems</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add OS</button>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>OS Name</th>
+                <th>Version</th>
+                <th>Architecture</th>
+                <th>End of Life</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="os in items" :key="os.osid">
+                <td>{{ os.osname }}</td>
+                <td>{{ os.osversion || '-' }}</td>
+                <td>{{ os.architecture || '-' }}</td>
+                <td>
+                  <span v-if="os.endoflife" :class="{ 'text-danger': isPastEol(os.endoflife) }">
+                    {{ os.endoflife }}
+                  </span>
+                  <span v-else>-</span>
+                </td>
+                <td class="actions">
+                  <button class="btn btn-secondary btn-sm" @click="openModal(os)">Edit</button>
+                  <button class="btn btn-danger btn-sm" @click="confirmDelete(os)">Delete</button>
+                </td>
+              </tr>
+              <tr v-if="items.length === 0">
+                <td colspan="5" style="text-align: center; color: var(--text-light);">
+                  No operating systems found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="pagination" v-if="totalPages > 1">
+          <button v-for="p in totalPages" :key="p" :class="{ active: p === page }" @click="goToPage(p)">
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>{{ editing ? 'Edit Operating System' : 'Add Operating System' }}</h3>
+        </div>
+        <form @submit.prevent="save">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="osname">OS Name *</label>
+              <input id="osname" v-model="form.osname" type="text" class="form-control" required placeholder="Windows 11" />
+            </div>
+            <div class="form-row">
+              <div class="form-group">
+                <label for="osversion">Version</label>
+                <input id="osversion" v-model="form.osversion" type="text" class="form-control" placeholder="23H2" />
+              </div>
+              <div class="form-group">
+                <label for="architecture">Architecture</label>
+                <select id="architecture" v-model="form.architecture" class="form-control">
+                  <option value="">Select...</option>
+                  <option value="x64">x64</option>
+                  <option value="x86">x86</option>
+                  <option value="ARM64">ARM64</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="endoflife">End of Life Date</label>
+              <input id="endoflife" v-model="form.endoflife" type="date" class="form-control" />
+            </div>
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header"><h3>Delete Operating System</h3></div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ toDelete?.osname }}</strong>?</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteItem">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { operatingsystemsApi } from '../../api'
+
+const items = ref([])
+const loading = ref(true)
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editing = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const toDelete = ref(null)
+
+const form = ref({ osname: '', osversion: '', architecture: '', endoflife: '' })
+
+onMounted(() => loadData())
+
+async function loadData() {
+  loading.value = true
+  try {
+    const response = await operatingsystemsApi.list({ page: page.value, perpage: 20 })
+    items.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading operating systems:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToPage(p) { page.value = p; loadData() }
+
+function isPastEol(date) {
+  return new Date(date) < new Date()
+}
+
+function openModal(item = null) {
+  editing.value = item
+  form.value = item ? {
+    osname: item.osname || '',
+    osversion: item.osversion || '',
+    architecture: item.architecture || '',
+    endoflife: item.endoflife || ''
+  } : { osname: '', osversion: '', architecture: '', endoflife: '' }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() { showModal.value = false; editing.value = null }
+
+async function save() {
+  error.value = ''
+  saving.value = true
+  try {
+    const data = { ...form.value }
+    if (!data.endoflife) data.endoflife = null
+    if (editing.value) {
+      await operatingsystemsApi.update(editing.value.osid, data)
+    } else {
+      await operatingsystemsApi.create(data)
+    }
+    closeModal()
+    loadData()
+  } catch (err) {
+    error.value = err.response?.data?.message || 'Failed to save'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(item) { toDelete.value = item; showDeleteModal.value = true }
+
+async function deleteItem() {
+  try {
+    await operatingsystemsApi.delete(toDelete.value.osid)
+    showDeleteModal.value = false
+    toDelete.value = null
+    loadData()
+  } catch (err) {
+    alert('Failed to delete')
+  }
+}
+</script>
+
+<style scoped>
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+.text-danger {
+  color: var(--danger);
+  font-weight: 500;
+}
+</style>
diff --git a/frontend/src/views/settings/PCTypesList.vue b/frontend/src/views/settings/PCTypesList.vue
new file mode 100644
index 0000000..9ba1ecf
--- /dev/null
+++ b/frontend/src/views/settings/PCTypesList.vue
@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>PC Types</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add PC Type</button>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>PC Type</th>
+                <th>Description</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="pt in pcTypes" :key="pt.pctypeid">
+                <td>{{ pt.pctype }}</td>
+                <td>{{ pt.description || '-' }}</td>
+                <td class="actions">
+                  <button class="btn btn-secondary btn-sm" @click="openModal(pt)">Edit</button>
+                  <button class="btn btn-danger btn-sm" @click="confirmDelete(pt)">Delete</button>
+                </td>
+              </tr>
+              <tr v-if="pcTypes.length === 0">
+                <td colspan="3" style="text-align: center; color: var(--text-light);">
+                  No PC types found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="pagination" v-if="totalPages > 1">
+          <button v-for="p in totalPages" :key="p" :class="{ active: p === page }" @click="goToPage(p)">
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>{{ editing ? 'Edit PC Type' : 'Add PC Type' }}</h3>
+        </div>
+        <form @submit.prevent="save">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="pctype">PC Type *</label>
+              <input id="pctype" v-model="form.pctype" type="text" class="form-control" required />
+            </div>
+            <div class="form-group">
+              <label for="description">Description</label>
+              <textarea id="description" v-model="form.description" class="form-control" rows="3"></textarea>
+            </div>
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header"><h3>Delete PC Type</h3></div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ toDelete?.pctype }}</strong>?</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteItem">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { pctypesApi } from '../../api'
+
+const pcTypes = ref([])
+const loading = ref(true)
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editing = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const toDelete = ref(null)
+
+const form = ref({ pctype: '', description: '' })
+
+onMounted(() => loadData())
+
+async function loadData() {
+  loading.value = true
+  try {
+    const response = await pctypesApi.list({ page: page.value, perpage: 20 })
+    pcTypes.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading PC types:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToPage(p) { page.value = p; loadData() }
+
+function openModal(item = null) {
+  editing.value = item
+  form.value = item ? { pctype: item.pctype || '', description: item.description || '' } : { pctype: '', description: '' }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() { showModal.value = false; editing.value = null }
+
+async function save() {
+  error.value = ''
+  saving.value = true
+  try {
+    if (editing.value) {
+      await pctypesApi.update(editing.value.pctypeid, form.value)
+    } else {
+      await pctypesApi.create(form.value)
+    }
+    closeModal()
+    loadData()
+  } catch (err) {
+    error.value = err.response?.data?.message || 'Failed to save'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(item) { toDelete.value = item; showDeleteModal.value = true }
+
+async function deleteItem() {
+  try {
+    await pctypesApi.delete(toDelete.value.pctypeid)
+    showDeleteModal.value = false
+    toDelete.value = null
+    loadData()
+  } catch (err) {
+    alert('Failed to delete')
+  }
+}
+</script>
diff --git a/frontend/src/views/settings/SettingsIndex.vue b/frontend/src/views/settings/SettingsIndex.vue
new file mode 100644
index 0000000..723333f
--- /dev/null
+++ b/frontend/src/views/settings/SettingsIndex.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="settings-page">
+    <h1>Settings</h1>
+
+    <div class="settings-grid">
+      <router-link to="/settings/vendors" class="settings-card">
+        <div class="card-icon">🏭</div>
+        <h3>Vendors</h3>
+        <p>Manage equipment vendors and manufacturers</p>
+      </router-link>
+
+      <router-link to="/settings/locations" class="settings-card">
+        <div class="card-icon">📍</div>
+        <h3>Locations</h3>
+        <p>Manage physical locations and sites</p>
+      </router-link>
+
+      <router-link to="/settings/statuses" class="settings-card">
+        <div class="card-icon">🏷️</div>
+        <h3>Statuses</h3>
+        <p>Manage equipment status types</p>
+      </router-link>
+
+      <router-link to="/settings/models" class="settings-card">
+        <div class="card-icon">📦</div>
+        <h3>Models</h3>
+        <p>Manage equipment models by vendor</p>
+      </router-link>
+
+      <router-link to="/settings/machinetypes" class="settings-card">
+        <div class="card-icon">🖥️</div>
+        <h3>Machine Types</h3>
+        <p>Manage machine type categories</p>
+      </router-link>
+
+      <router-link to="/settings/pctypes" class="settings-card">
+        <div class="card-icon">💻</div>
+        <h3>PC Types</h3>
+        <p>Manage PC form factors</p>
+      </router-link>
+
+      <router-link to="/settings/operatingsystems" class="settings-card">
+        <div class="card-icon">⚙️</div>
+        <h3>Operating Systems</h3>
+        <p>Manage OS versions and EOL dates</p>
+      </router-link>
+
+      <router-link to="/settings/businessunits" class="settings-card">
+        <div class="card-icon">🏢</div>
+        <h3>Business Units</h3>
+        <p>Manage organizational units</p>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.settings-page h1 {
+  margin-bottom: 1.5rem;
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.settings-card {
+  display: block;
+  padding: 1.5rem;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.settings-card:hover {
+  border-color: #1976d2;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.card-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.settings-card h3 {
+  margin: 0 0 0.5rem 0;
+  color: #333;
+}
+
+.settings-card p {
+  margin: 0;
+  color: #666;
+  font-size: 0.9rem;
+}
+</style>
diff --git a/frontend/src/views/settings/StatusesList.vue b/frontend/src/views/settings/StatusesList.vue
new file mode 100644
index 0000000..84d506e
--- /dev/null
+++ b/frontend/src/views/settings/StatusesList.vue
@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Machine Statuses</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add Status</button>
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Status</th>
+                <th>Color</th>
+                <th>Description</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="s in statuses" :key="s.statusid">
+                <td>
+                  <span class="status-badge" :style="getStatusStyle(s.color)">
+                    {{ s.status }}
+                  </span>
+                </td>
+                <td>
+                  <span class="color-preview" :style="{ backgroundColor: s.color || '#6c757d' }"></span>
+                  {{ s.color || 'default' }}
+                </td>
+                <td>{{ s.description || '-' }}</td>
+                <td class="actions">
+                  <button
+                    class="btn btn-secondary btn-sm"
+                    @click="openModal(s)"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    class="btn btn-danger btn-sm"
+                    @click="confirmDelete(s)"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr v-if="statuses.length === 0">
+                <td colspan="4" style="text-align: center; color: var(--text-light);">
+                  No statuses found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>{{ editingStatus ? 'Edit Status' : 'Add Status' }}</h3>
+        </div>
+        <form @submit.prevent="saveStatus">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="status">Status Name *</label>
+              <input
+                id="status"
+                v-model="form.status"
+                type="text"
+                class="form-control"
+                required
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="color">Color</label>
+              <div class="color-input-row">
+                <input
+                  id="color"
+                  v-model="form.color"
+                  type="color"
+                  class="color-picker"
+                />
+                <input
+                  v-model="form.color"
+                  type="text"
+                  class="form-control"
+                  placeholder="#000000"
+                />
+              </div>
+              <small class="form-hint">Used in UI to visually distinguish statuses</small>
+            </div>
+
+            <div class="form-group">
+              <label for="description">Description</label>
+              <textarea
+                id="description"
+                v-model="form.description"
+                class="form-control"
+                rows="3"
+              ></textarea>
+            </div>
+
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>Delete Status</h3>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ statusToDelete?.status }}</strong>?</p>
+          <p style="color: var(--text-light); font-size: 0.875rem;">
+            Cannot delete if machines are using this status.
+          </p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteStatus">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { statusesApi } from '../../api'
+
+const statuses = ref([])
+const loading = ref(true)
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editingStatus = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const statusToDelete = ref(null)
+
+const form = ref({
+  status: '',
+  color: '#6c757d',
+  description: ''
+})
+
+onMounted(() => {
+  loadStatuses()
+})
+
+async function loadStatuses() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20
+    }
+
+    const response = await statusesApi.list(params)
+    statuses.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading statuses:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToPage(p) {
+  page.value = p
+  loadStatuses()
+}
+
+function openModal(s = null) {
+  editingStatus.value = s
+  if (s) {
+    form.value = {
+      status: s.status || '',
+      color: s.color || '#6c757d',
+      description: s.description || ''
+    }
+  } else {
+    form.value = {
+      status: '',
+      color: '#6c757d',
+      description: ''
+    }
+  }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  editingStatus.value = null
+}
+
+async function saveStatus() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    if (editingStatus.value) {
+      await statusesApi.update(editingStatus.value.statusid, form.value)
+    } else {
+      await statusesApi.create(form.value)
+    }
+    closeModal()
+    loadStatuses()
+  } catch (err) {
+    console.error('Error saving status:', err)
+    error.value = err.response?.data?.message || 'Failed to save status'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(s) {
+  statusToDelete.value = s
+  showDeleteModal.value = true
+}
+
+async function deleteStatus() {
+  try {
+    await statusesApi.delete(statusToDelete.value.statusid)
+    showDeleteModal.value = false
+    statusToDelete.value = null
+    loadStatuses()
+  } catch (err) {
+    console.error('Error deleting status:', err)
+    error.value = err.response?.data?.message || 'Failed to delete status'
+    alert(error.value)
+  }
+}
+
+function getStatusStyle(color) {
+  const bgColor = color || '#6c757d'
+  return {
+    backgroundColor: bgColor,
+    color: isLightColor(bgColor) ? '#000' : '#fff'
+  }
+}
+
+function isLightColor(color) {
+  if (!color) return false
+  const hex = color.replace('#', '')
+  const r = parseInt(hex.substr(0, 2), 16)
+  const g = parseInt(hex.substr(2, 2), 16)
+  const b = parseInt(hex.substr(4, 2), 16)
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness > 128
+}
+</script>
+
+<style scoped>
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.color-preview {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  margin-right: 0.5rem;
+  vertical-align: middle;
+  border: 1px solid var(--border-color);
+}
+
+.color-input-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.color-picker {
+  width: 50px;
+  height: 38px;
+  padding: 2px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.form-hint {
+  color: var(--text-light);
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+}
+</style>
diff --git a/frontend/src/views/vendors/VendorsList.vue b/frontend/src/views/vendors/VendorsList.vue
new file mode 100644
index 0000000..ea18a29
--- /dev/null
+++ b/frontend/src/views/vendors/VendorsList.vue
@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h2>Vendors</h2>
+      <button class="btn btn-primary" @click="openModal()">+ Add Vendor</button>
+    </div>
+
+    <!-- Filters -->
+    <div class="filters">
+      <input
+        v-model="search"
+        type="text"
+        class="form-control"
+        placeholder="Search vendors..."
+        @input="debouncedSearch"
+      />
+    </div>
+
+    <div class="card">
+      <div v-if="loading" class="loading">Loading...</div>
+
+      <template v-else>
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Vendor Name</th>
+                <th>Contact</th>
+                <th>Phone</th>
+                <th>Email</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="vendor in vendors" :key="vendor.vendorid">
+                <td>{{ vendor.vendor }}</td>
+                <td>{{ vendor.contact || '-' }}</td>
+                <td>{{ vendor.phone || '-' }}</td>
+                <td>{{ vendor.email || '-' }}</td>
+                <td class="actions">
+                  <button
+                    class="btn btn-secondary btn-sm"
+                    @click="openModal(vendor)"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    class="btn btn-danger btn-sm"
+                    @click="confirmDelete(vendor)"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr v-if="vendors.length === 0">
+                <td colspan="5" style="text-align: center; color: var(--text-light);">
+                  No vendors found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button
+            v-for="p in totalPages"
+            :key="p"
+            :class="{ active: p === page }"
+            @click="goToPage(p)"
+          >
+            {{ p }}
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>{{ editingVendor ? 'Edit Vendor' : 'Add Vendor' }}</h3>
+        </div>
+        <form @submit.prevent="saveVendor">
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="vendor">Vendor Name *</label>
+              <input
+                id="vendor"
+                v-model="form.vendor"
+                type="text"
+                class="form-control"
+                required
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="contact">Contact Person</label>
+              <input
+                id="contact"
+                v-model="form.contact"
+                type="text"
+                class="form-control"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="phone">Phone</label>
+              <input
+                id="phone"
+                v-model="form.phone"
+                type="text"
+                class="form-control"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="email">Email</label>
+              <input
+                id="email"
+                v-model="form.email"
+                type="email"
+                class="form-control"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="address">Address</label>
+              <textarea
+                id="address"
+                v-model="form.address"
+                class="form-control"
+                rows="2"
+              ></textarea>
+            </div>
+
+            <div class="form-group">
+              <label for="website">Website</label>
+              <input
+                id="website"
+                v-model="form.website"
+                type="url"
+                class="form-control"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="notes">Notes</label>
+              <textarea
+                id="notes"
+                v-model="form.notes"
+                class="form-control"
+                rows="2"
+              ></textarea>
+            </div>
+
+            <div v-if="error" class="error-message">{{ error }}</div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="saving">
+              {{ saving ? 'Saving...' : 'Save' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+      <div class="modal">
+        <div class="modal-header">
+          <h3>Delete Vendor</h3>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete <strong>{{ vendorToDelete?.vendor }}</strong>?</p>
+          <p style="color: var(--text-light); font-size: 0.875rem;">This action cannot be undone.</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
+          <button class="btn btn-danger" @click="deleteVendor">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { vendorsApi } from '../../api'
+
+const vendors = ref([])
+const loading = ref(true)
+const search = ref('')
+const page = ref(1)
+const totalPages = ref(1)
+
+const showModal = ref(false)
+const editingVendor = ref(null)
+const saving = ref(false)
+const error = ref('')
+
+const showDeleteModal = ref(false)
+const vendorToDelete = ref(null)
+
+const form = ref({
+  vendor: '',
+  contact: '',
+  phone: '',
+  email: '',
+  address: '',
+  website: '',
+  notes: ''
+})
+
+let searchTimeout = null
+
+onMounted(() => {
+  loadVendors()
+})
+
+async function loadVendors() {
+  loading.value = true
+  try {
+    const params = {
+      page: page.value,
+      perpage: 20
+    }
+    if (search.value) params.search = search.value
+
+    const response = await vendorsApi.list(params)
+    vendors.value = response.data.data || []
+    totalPages.value = response.data.meta?.pages || 1
+  } catch (err) {
+    console.error('Error loading vendors:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function debouncedSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(() => {
+    page.value = 1
+    loadVendors()
+  }, 300)
+}
+
+function goToPage(p) {
+  page.value = p
+  loadVendors()
+}
+
+function openModal(vendor = null) {
+  editingVendor.value = vendor
+  if (vendor) {
+    form.value = {
+      vendor: vendor.vendor || '',
+      contact: vendor.contact || '',
+      phone: vendor.phone || '',
+      email: vendor.email || '',
+      address: vendor.address || '',
+      website: vendor.website || '',
+      notes: vendor.notes || ''
+    }
+  } else {
+    form.value = {
+      vendor: '',
+      contact: '',
+      phone: '',
+      email: '',
+      address: '',
+      website: '',
+      notes: ''
+    }
+  }
+  error.value = ''
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+  editingVendor.value = null
+}
+
+async function saveVendor() {
+  error.value = ''
+  saving.value = true
+
+  try {
+    if (editingVendor.value) {
+      await vendorsApi.update(editingVendor.value.vendorid, form.value)
+    } else {
+      await vendorsApi.create(form.value)
+    }
+    closeModal()
+    loadVendors()
+  } catch (err) {
+    console.error('Error saving vendor:', err)
+    error.value = err.response?.data?.message || 'Failed to save vendor'
+  } finally {
+    saving.value = false
+  }
+}
+
+function confirmDelete(vendor) {
+  vendorToDelete.value = vendor
+  showDeleteModal.value = true
+}
+
+async function deleteVendor() {
+  try {
+    await vendorsApi.delete(vendorToDelete.value.vendorid)
+    showDeleteModal.value = false
+    vendorToDelete.value = null
+    loadVendors()
+  } catch (err) {
+    console.error('Error deleting vendor:', err)
+    alert('Failed to delete vendor')
+  }
+}
+</script>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..5b40f18
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5050',
+        changeOrigin: true
+      }
+    }
+  }
+})
diff --git a/import_apps.py b/import_apps.py
new file mode 100644
index 0000000..82f213c
--- /dev/null
+++ b/import_apps.py
@@ -0,0 +1,340 @@
+#!/usr/bin/env python3
+"""Import applications data from original ShopDB MySQL database."""
+
+import os
+import sys
+import pymysql
+from dotenv import load_dotenv
+
+# Add project to path
+sys.path.insert(0, '/home/camp/projects/shopdb-flask')
+
+# Load environment variables
+load_dotenv('/home/camp/projects/shopdb-flask/.env')
+
+# Source MySQL connection (original shopdb)
+MYSQL_CONFIG = {
+    'host': '127.0.0.1',
+    'port': 3306,
+    'user': 'root',
+    'password': 'rootpassword',
+    'database': 'shopdb',
+    'charset': 'utf8mb4',
+    'cursorclass': pymysql.cursors.DictCursor
+}
+
+
+def get_mysql_connection():
+    """Get MySQL connection to source database."""
+    return pymysql.connect(**MYSQL_CONFIG)
+
+
+def to_bool(val):
+    """Convert MySQL bit field to Python bool."""
+    if val is None:
+        return False
+    if isinstance(val, bytes):
+        return val != b'\x00'
+    return bool(val)
+
+
+def import_appowners(mysql_conn, db, AppOwner):
+    """Import app owners from MySQL."""
+    print("Importing app owners...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("SELECT * FROM appowners WHERE isactive = 1")
+    owners = cursor.fetchall()
+
+    count = 0
+    for o in owners:
+        existing = AppOwner.query.filter_by(appownerid=o['appownerid']).first()
+        if not existing:
+            owner = AppOwner(
+                appownerid=o['appownerid'],
+                appowner=o['appowner'],
+                sso=o.get('sso'),
+                isactive=True
+            )
+            db.session.add(owner)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} app owners")
+    return count
+
+
+def import_supportteams(mysql_conn, db, SupportTeam):
+    """Import support teams from MySQL."""
+    print("Importing support teams...")
+    cursor = mysql_conn.cursor()
+    # Note: source table has typo 'supporteamid' instead of 'supportteamid'
+    cursor.execute("SELECT supporteamid as supportteamid, teamname, teamurl, appownerid, isactive FROM supportteams WHERE isactive = 1")
+    teams = cursor.fetchall()
+
+    count = 0
+    for t in teams:
+        existing = SupportTeam.query.filter_by(supportteamid=t['supportteamid']).first()
+        if not existing:
+            team = SupportTeam(
+                supportteamid=t['supportteamid'],
+                teamname=t['teamname'],
+                teamurl=t.get('teamurl'),
+                appownerid=t.get('appownerid'),
+                isactive=True
+            )
+            db.session.add(team)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} support teams")
+    return count
+
+
+def import_applications(mysql_conn, db, Application):
+    """Import applications from MySQL."""
+    print("Importing applications...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("""
+        SELECT a.*, st.supporteamid as supportteamid
+        FROM applications a
+        LEFT JOIN supportteams st ON a.supportteamid = st.supporteamid
+        WHERE a.isactive = 1
+    """)
+    apps = cursor.fetchall()
+
+    count = 0
+    skipped_dupes = 0
+    seen_names = set()
+    for a in apps:
+        # Skip duplicate appnames (source has some)
+        if a['appname'] in seen_names:
+            skipped_dupes += 1
+            continue
+        seen_names.add(a['appname'])
+
+        existing = Application.query.filter_by(appname=a['appname']).first()
+        if not existing:
+            app = Application(
+                appid=a['appid'],
+                appname=a['appname'],
+                appdescription=a.get('appdescription'),
+                supportteamid=a.get('supportteamid'),
+                isinstallable=to_bool(a.get('isinstallable')),
+                applicationnotes=a.get('applicationnotes'),
+                installpath=a.get('installpath'),
+                applicationlink=a.get('applicationlink'),
+                documentationpath=a.get('documentationpath'),
+                ishidden=to_bool(a.get('ishidden')),
+                isprinter=to_bool(a.get('isprinter')),
+                islicenced=to_bool(a.get('islicenced')),
+                image=a.get('image'),
+                isactive=True
+            )
+            db.session.add(app)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} applications (skipped {skipped_dupes} duplicates)")
+    return count
+
+
+def import_appversions(mysql_conn, db, AppVersion, Application):
+    """Import application versions from MySQL."""
+    print("Importing app versions...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("""
+        SELECT av.*, a.appname
+        FROM appversions av
+        JOIN applications a ON av.appid = a.appid
+        WHERE av.isactive = 1
+    """)
+    versions = cursor.fetchall()
+
+    # Build app lookup by name (since we may have different IDs)
+    app_map = {a.appname: a.appid for a in Application.query.all()}
+
+    count = 0
+    skipped = 0
+    for v in versions:
+        # Look up app by name
+        new_appid = app_map.get(v['appname'])
+        if not new_appid:
+            skipped += 1
+            continue
+
+        existing = AppVersion.query.filter_by(
+            appid=new_appid,
+            version=v['version']
+        ).first()
+
+        if not existing:
+            version = AppVersion(
+                appversionid=v['appversionid'],
+                appid=new_appid,
+                version=v['version'],
+                releasedate=v.get('releasedate'),
+                notes=v.get('notes'),
+                isactive=True
+            )
+            db.session.add(version)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} app versions (skipped {skipped})")
+    return count
+
+
+def import_installedapps(mysql_conn, db, InstalledApp, Machine, Application, AppVersion):
+    """Import installed apps (PC-application relationships) from MySQL."""
+    print("Importing installed apps...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("""
+        SELECT ia.*, m.machinenumber, a.appname, av.version as version_str
+        FROM installedapps ia
+        JOIN machines m ON ia.machineid = m.machineid
+        JOIN applications a ON ia.appid = a.appid
+        LEFT JOIN appversions av ON ia.appversionid = av.appversionid
+        WHERE ia.isactive = 1
+    """)
+    installed = cursor.fetchall()
+
+    # Build lookup for machines by machinenumber (since IDs may differ)
+    machine_map = {m.machinenumber: m.machineid for m in Machine.query.all()}
+    # Build app lookup by name
+    app_map = {a.appname: a.appid for a in Application.query.all()}
+    # Build version lookup by (appid, version)
+    version_map = {(v.appid, v.version): v.appversionid for v in AppVersion.query.all()}
+
+    count = 0
+    skipped = 0
+    for i in installed:
+        # Look up machine by machinenumber
+        new_machineid = machine_map.get(i['machinenumber'])
+        if not new_machineid:
+            skipped += 1
+            continue
+
+        # Look up app by name
+        new_appid = app_map.get(i['appname'])
+        if not new_appid:
+            skipped += 1
+            continue
+
+        # Look up version if exists
+        new_versionid = None
+        if i.get('version_str'):
+            new_versionid = version_map.get((new_appid, i['version_str']))
+
+        # Check if already exists
+        existing = InstalledApp.query.filter_by(
+            machineid=new_machineid,
+            appid=new_appid
+        ).first()
+
+        if not existing:
+            installed_app = InstalledApp(
+                machineid=new_machineid,
+                appid=new_appid,
+                appversionid=new_versionid,
+                isactive=True
+            )
+            db.session.add(installed_app)
+            count += 1
+        elif new_versionid and not existing.appversionid:
+            # Update existing with version if we now have it
+            existing.appversionid = new_versionid
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} installed apps (skipped {skipped})")
+    return count
+
+
+def import_knowledgebase(mysql_conn, db, KnowledgeBase, Application):
+    """Import knowledge base articles from MySQL."""
+    print("Importing knowledge base articles...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("""
+        SELECT kb.*, a.appname
+        FROM knowledgebase kb
+        LEFT JOIN applications a ON kb.appid = a.appid
+        WHERE kb.isactive = 1
+    """)
+    articles = cursor.fetchall()
+
+    # Build app lookup by name
+    app_map = {a.appname: a.appid for a in Application.query.all()}
+
+    count = 0
+    skipped = 0
+    for article in articles:
+        existing = KnowledgeBase.query.filter_by(linkid=article['linkid']).first()
+        if not existing:
+            # Look up app by name if exists
+            new_appid = None
+            if article.get('appname'):
+                new_appid = app_map.get(article['appname'])
+
+            kb = KnowledgeBase(
+                linkid=article['linkid'],
+                appid=new_appid,
+                shortdescription=article.get('shortdescription'),
+                linkurl=article.get('linkurl'),
+                keywords=article.get('keywords'),
+                clicks=article.get('clicks') or 0,
+                isactive=True
+            )
+            db.session.add(kb)
+            count += 1
+        else:
+            skipped += 1
+
+    db.session.commit()
+    print(f"  Imported {count} knowledge base articles (skipped {skipped} existing)")
+    return count
+
+
+def main():
+    """Main import function."""
+    print("=" * 60)
+    print("ShopDB Applications Import")
+    print("=" * 60)
+
+    from shopdb import create_app
+    from shopdb.extensions import db
+    from shopdb.core.models import Application, AppOwner, SupportTeam, AppVersion, InstalledApp, Machine, KnowledgeBase
+
+    app = create_app()
+
+    with app.app_context():
+        # Create any missing tables
+        print("\nCreating tables if needed...")
+        db.create_all()
+
+        print("\nConnecting to MySQL...")
+        mysql_conn = get_mysql_connection()
+        print("  Connected!")
+
+        try:
+            print("\n--- Application Data ---")
+            import_appowners(mysql_conn, db, AppOwner)
+            import_supportteams(mysql_conn, db, SupportTeam)
+            import_applications(mysql_conn, db, Application)
+            import_appversions(mysql_conn, db, AppVersion, Application)
+
+            print("\n--- PC-Application Relationships ---")
+            import_installedapps(mysql_conn, db, InstalledApp, Machine, Application, AppVersion)
+
+            print("\n--- Knowledge Base ---")
+            import_knowledgebase(mysql_conn, db, KnowledgeBase, Application)
+
+            print("\n" + "=" * 60)
+            print("Import complete!")
+            print("=" * 60)
+
+        finally:
+            mysql_conn.close()
+
+
+if __name__ == '__main__':
+    main()
diff --git a/plugins/__init__.py b/plugins/__init__.py
new file mode 100644
index 0000000..0c42fb2
--- /dev/null
+++ b/plugins/__init__.py
@@ -0,0 +1 @@
+"""ShopDB plugins package."""
diff --git a/plugins/printers/__init__.py b/plugins/printers/__init__.py
new file mode 100644
index 0000000..bc7220d
--- /dev/null
+++ b/plugins/printers/__init__.py
@@ -0,0 +1,5 @@
+"""Printers plugin - extends machines with printer-specific functionality."""
+
+from .plugin import PrintersPlugin
+
+__all__ = ['PrintersPlugin']
diff --git a/plugins/printers/api/__init__.py b/plugins/printers/api/__init__.py
new file mode 100644
index 0000000..1bc1279
--- /dev/null
+++ b/plugins/printers/api/__init__.py
@@ -0,0 +1,5 @@
+"""Printers plugin API."""
+
+from .routes import printers_bp
+
+__all__ = ['printers_bp']
diff --git a/plugins/printers/api/routes.py b/plugins/printers/api/routes.py
new file mode 100644
index 0000000..320a8e6
--- /dev/null
+++ b/plugins/printers/api/routes.py
@@ -0,0 +1,243 @@
+"""Printers API routes."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.utils.responses import success_response, error_response, paginated_response, ErrorCodes
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+from shopdb.core.models.machine import Machine, MachineType
+from shopdb.core.models.communication import Communication, CommunicationType
+
+from ..models import PrinterData
+from ..services import ZabbixService
+
+printers_bp = Blueprint('printers', __name__)
+
+
+@printers_bp.route('/', methods=['GET'])
+@jwt_required(optional=True)
+def list_printers():
+    """List all printers."""
+    page, per_page = get_pagination_params(request)
+
+    # Get printer machine types
+    printer_types = MachineType.query.filter_by(category='Printer').all()
+    printer_type_ids = [pt.machinetypeid for pt in printer_types]
+
+    query = Machine.query.filter(
+        Machine.machinetypeid.in_(printer_type_ids),
+        Machine.isactive == True
+    )
+
+    # Filters
+    if location_id := request.args.get('location', type=int):
+        query = query.filter(Machine.locationid == location_id)
+
+    if search := request.args.get('search'):
+        query = query.filter(
+            db.or_(
+                Machine.machinenumber.ilike(f'%{search}%'),
+                Machine.hostname.ilike(f'%{search}%'),
+                Machine.alias.ilike(f'%{search}%')
+            )
+        )
+
+    query = query.order_by(Machine.machinenumber)
+    items, total = paginate_query(query, page, per_page)
+
+    printers = []
+    for machine in items:
+        printer_data = {
+            'machineid': machine.machineid,
+            'machinenumber': machine.machinenumber,
+            'hostname': machine.hostname,
+            'alias': machine.alias,
+            'serialnumber': machine.serialnumber,
+            'location': machine.location.locationname if machine.location else None,
+            'vendor': machine.vendor.vendor if machine.vendor else None,
+            'model': machine.model.modelnumber if machine.model else None,
+            'status': machine.status.status if machine.status else None,
+        }
+
+        # Add printer-specific data
+        if machine.printerdata:
+            pd = machine.printerdata
+            printer_data['printerdata'] = {
+                'windowsname': pd.windowsname,
+                'sharename': pd.sharename,
+                'iscsf': pd.iscsf,
+                'pin': pd.pin,
+            }
+
+        # Get IP from communications
+        primary_comm = next((c for c in machine.communications if c.isprimary), None)
+        if not primary_comm and machine.communications:
+            primary_comm = machine.communications[0]
+        printer_data['ipaddress'] = primary_comm.ipaddress if primary_comm else None
+
+        printers.append(printer_data)
+
+    return paginated_response(printers, page, per_page, total)
+
+
+@printers_bp.route('/<int:machine_id>', methods=['GET'])
+@jwt_required(optional=True)
+def get_printer(machine_id: int):
+    """Get a single printer with details."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(ErrorCodes.NOT_FOUND, 'Printer not found', http_code=404)
+
+    data = machine.to_dict()
+    data['machinetype'] = machine.machinetype.to_dict() if machine.machinetype else None
+    data['vendor'] = machine.vendor.to_dict() if machine.vendor else None
+    data['model'] = machine.model.to_dict() if machine.model else None
+    data['location'] = machine.location.to_dict() if machine.location else None
+    data['status'] = machine.status.to_dict() if machine.status else None
+    data['communications'] = [c.to_dict() for c in machine.communications]
+
+    # Add printer-specific data
+    if machine.printerdata:
+        pd = machine.printerdata
+        data['printerdata'] = {
+            'id': pd.id,
+            'windowsname': pd.windowsname,
+            'sharename': pd.sharename,
+            'iscsf': pd.iscsf,
+            'installpath': pd.installpath,
+            'pin': pd.pin,
+        }
+
+    return success_response(data)
+
+
+@printers_bp.route('/<int:machine_id>/printerdata', methods=['PUT'])
+@jwt_required()
+def update_printer_data(machine_id: int):
+    """Update printer-specific data."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(ErrorCodes.NOT_FOUND, 'Printer not found', http_code=404)
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    # Get or create printer data
+    pd = machine.printerdata
+    if not pd:
+        pd = PrinterData(machineid=machine_id)
+        db.session.add(pd)
+
+    for key in ['windowsname', 'sharename', 'iscsf', 'installpath', 'pin']:
+        if key in data:
+            setattr(pd, key, data[key])
+
+    db.session.commit()
+
+    return success_response({
+        'id': pd.id,
+        'windowsname': pd.windowsname,
+        'sharename': pd.sharename,
+        'iscsf': pd.iscsf,
+        'installpath': pd.installpath,
+        'pin': pd.pin,
+    }, message='Printer data updated')
+
+
+@printers_bp.route('/<int:machine_id>/communication', methods=['PUT'])
+@jwt_required()
+def update_printer_communication(machine_id: int):
+    """Update printer communication (IP address)."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(ErrorCodes.NOT_FOUND, 'Printer not found', http_code=404)
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    # Get or create IP communication type
+    ip_comtype = CommunicationType.query.filter_by(comtype='IP').first()
+    if not ip_comtype:
+        ip_comtype = CommunicationType(comtype='IP', description='IP Network')
+        db.session.add(ip_comtype)
+        db.session.flush()
+
+    # Find existing primary communication or create new one
+    comm = next((c for c in machine.communications if c.isprimary), None)
+    if not comm:
+        comm = next((c for c in machine.communications if c.comtypeid == ip_comtype.comtypeid), None)
+    if not comm:
+        comm = Communication(machineid=machine_id, comtypeid=ip_comtype.comtypeid)
+        db.session.add(comm)
+
+    # Update fields
+    if 'ipaddress' in data:
+        comm.ipaddress = data['ipaddress']
+    if 'isprimary' in data:
+        comm.isprimary = data['isprimary']
+    if 'macaddress' in data:
+        comm.macaddress = data['macaddress']
+
+    db.session.commit()
+
+    return success_response({
+        'communicationid': comm.communicationid,
+        'ipaddress': comm.ipaddress,
+        'isprimary': comm.isprimary,
+    }, message='Communication updated')
+
+
+@printers_bp.route('/<int:machine_id>/supplies', methods=['GET'])
+@jwt_required(optional=True)
+def get_printer_supplies(machine_id: int):
+    """Get supply levels from Zabbix (real-time lookup)."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(ErrorCodes.NOT_FOUND, 'Printer not found', http_code=404)
+
+    # Get IP address
+    primary_comm = next((c for c in machine.communications if c.isprimary), None)
+    if not primary_comm and machine.communications:
+        primary_comm = machine.communications[0]
+
+    if not primary_comm or not primary_comm.ipaddress:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'Printer has no IP address')
+
+    service = ZabbixService()
+    if not service.isconfigured:
+        return error_response(ErrorCodes.SERVICE_UNAVAILABLE, 'Zabbix not configured')
+
+    supplies = service.getsuppliesbyip(primary_comm.ipaddress)
+
+    return success_response({
+        'ipaddress': primary_comm.ipaddress,
+        'supplies': supplies or []
+    })
+
+
+@printers_bp.route('/dashboard/summary', methods=['GET'])
+@jwt_required(optional=True)
+def dashboard_summary():
+    """Get printer summary for dashboard."""
+    printer_types = MachineType.query.filter_by(category='Printer').all()
+    printer_type_ids = [pt.machinetypeid for pt in printer_types]
+
+    total = Machine.query.filter(
+        Machine.machinetypeid.in_(printer_type_ids),
+        Machine.isactive == True
+    ).count()
+
+    return success_response({
+        'totalprinters': total,
+        'total': total,
+        'online': total,  # Placeholder - would need Zabbix integration for real status
+        'lowsupplies': 0,
+        'criticalsupplies': 0
+    })
diff --git a/plugins/printers/manifest.json b/plugins/printers/manifest.json
new file mode 100644
index 0000000..72a3a08
--- /dev/null
+++ b/plugins/printers/manifest.json
@@ -0,0 +1,25 @@
+{
+    "name": "printers",
+    "version": "1.0.0",
+    "description": "Printer management plugin with Zabbix integration, supply tracking, and QR codes",
+    "author": "ShopDB Team",
+    "dependencies": [],
+    "core_version": ">=1.0.0",
+    "api_prefix": "/api/printers",
+    "provides": {
+        "machine_category": "Printer",
+        "features": [
+            "printer_extensions",
+            "driver_management",
+            "supply_tracking",
+            "zabbix_integration",
+            "qr_codes"
+        ]
+    },
+    "settings": {
+        "zabbix_url": "",
+        "zabbix_token": "",
+        "supply_alert_threshold": 10,
+        "default_driver_source": "internal"
+    }
+}
diff --git a/plugins/printers/migrations/__init__.py b/plugins/printers/migrations/__init__.py
new file mode 100644
index 0000000..bfb65cf
--- /dev/null
+++ b/plugins/printers/migrations/__init__.py
@@ -0,0 +1 @@
+"""Printers plugin migrations."""
diff --git a/plugins/printers/models/__init__.py b/plugins/printers/models/__init__.py
new file mode 100644
index 0000000..a653ed7
--- /dev/null
+++ b/plugins/printers/models/__init__.py
@@ -0,0 +1,7 @@
+"""Printers plugin models."""
+
+from .printer_extension import PrinterData
+
+__all__ = [
+    'PrinterData',
+]
diff --git a/plugins/printers/models/printer_extension.py b/plugins/printers/models/printer_extension.py
new file mode 100644
index 0000000..3a59258
--- /dev/null
+++ b/plugins/printers/models/printer_extension.py
@@ -0,0 +1,58 @@
+"""PrinterData model - printer-specific fields linked to machines."""
+
+from shopdb.extensions import db
+from shopdb.core.models.base import BaseModel
+
+
+class PrinterData(BaseModel):
+    """
+    Printer-specific data linked to Machine table.
+
+    Printers are stored in the machines table (machinetype.category = 'Printer').
+    This table only holds printer-specific fields not in machines.
+
+    IP address is stored in the communications table.
+    Zabbix data is queried in real-time via API (not cached here).
+    """
+    __tablename__ = 'printerdata'
+
+    id = db.Column(db.Integer, primary_key=True)
+
+    # Link to machine
+    machineid = db.Column(
+        db.Integer,
+        db.ForeignKey('machines.machineid', ondelete='CASCADE'),
+        unique=True,
+        nullable=False,
+        index=True
+    )
+
+    # Windows/Network naming
+    windowsname = db.Column(
+        db.String(255),
+        comment='Windows printer name (e.g., \\\\server\\printer)'
+    )
+    sharename = db.Column(
+        db.String(100),
+        comment='CSF/share name'
+    )
+
+    # Installation
+    iscsf = db.Column(db.Boolean, default=False, comment='Is CSF printer')
+    installpath = db.Column(db.String(255), comment='Driver install path')
+
+    # Printer PIN (for secure print)
+    pin = db.Column(db.String(20))
+
+    # Relationship
+    machine = db.relationship(
+        'Machine',
+        backref=db.backref('printerdata', uselist=False, lazy='joined')
+    )
+
+    __table_args__ = (
+        db.Index('idx_printer_windowsname', 'windowsname'),
+    )
+
+    def __repr__(self):
+        return f"<PrinterData machineid={self.machineid}>"
diff --git a/plugins/printers/plugin.py b/plugins/printers/plugin.py
new file mode 100644
index 0000000..2332ed6
--- /dev/null
+++ b/plugins/printers/plugin.py
@@ -0,0 +1,174 @@
+"""Printers plugin main class."""
+
+import json
+import logging
+from pathlib import Path
+from typing import List, Dict, Optional, Type
+
+from flask import Flask, Blueprint
+import click
+
+from shopdb.plugins.base import BasePlugin, PluginMeta
+from shopdb.extensions import db
+from shopdb.core.models.machine import MachineType
+
+from .models import PrinterData
+from .api import printers_bp
+from .services import ZabbixService
+
+logger = logging.getLogger(__name__)
+
+
+class PrintersPlugin(BasePlugin):
+    """
+    Printers plugin - extends machines with printer-specific functionality.
+
+    Printers use the unified Machine model with machinetype.category = 'Printer'.
+    This plugin adds:
+    - PrinterData table for printer-specific fields (windowsname, sharename, etc.)
+    - Zabbix integration for real-time supply level lookups
+    """
+
+    def __init__(self):
+        self._manifest = self._load_manifest()
+        self._zabbixservice = None
+
+    def _load_manifest(self) -> Dict:
+        """Load plugin manifest from JSON file."""
+        manifestpath = Path(__file__).parent / 'manifest.json'
+        if manifestpath.exists():
+            with open(manifestpath, 'r') as f:
+                return json.load(f)
+        return {}
+
+    @property
+    def meta(self) -> PluginMeta:
+        """Return plugin metadata."""
+        return PluginMeta(
+            name=self._manifest.get('name', 'printers'),
+            version=self._manifest.get('version', '1.0.0'),
+            description=self._manifest.get(
+                'description',
+                'Printer management with Zabbix integration'
+            ),
+            author=self._manifest.get('author', 'ShopDB Team'),
+            dependencies=self._manifest.get('dependencies', []),
+            core_version=self._manifest.get('core_version', '>=1.0.0'),
+            api_prefix=self._manifest.get('api_prefix', '/api/printers'),
+        )
+
+    def get_blueprint(self) -> Optional[Blueprint]:
+        """Return Flask Blueprint with API routes."""
+        return printers_bp
+
+    def get_models(self) -> List[Type]:
+        """Return list of SQLAlchemy model classes."""
+        return [PrinterData]
+
+    def get_services(self) -> Dict[str, Type]:
+        """Return plugin services."""
+        return {
+            'zabbix': ZabbixService,
+        }
+
+    @property
+    def zabbixservice(self) -> ZabbixService:
+        """Get Zabbix service instance."""
+        if self._zabbixservice is None:
+            self._zabbixservice = ZabbixService()
+        return self._zabbixservice
+
+    def init_app(self, app: Flask, db_instance) -> None:
+        """Initialize plugin with Flask app."""
+        app.config.setdefault('ZABBIX_URL', '')
+        app.config.setdefault('ZABBIX_TOKEN', '')
+        logger.info(f"Printers plugin initialized (v{self.meta.version})")
+
+    def on_install(self, app: Flask) -> None:
+        """Called when plugin is installed."""
+        with app.app_context():
+            self._ensureprintertypes()
+            logger.info("Printers plugin installed")
+
+    def _ensureprintertypes(self) -> None:
+        """Ensure basic printer machine types exist."""
+        printertypes = [
+            ('Laser Printer', 'Printer', 'Standard laser printer'),
+            ('Inkjet Printer', 'Printer', 'Inkjet printer'),
+            ('Label Printer', 'Printer', 'Label/barcode printer'),
+            ('Multifunction Printer', 'Printer', 'MFP with scan/copy/fax'),
+            ('Plotter', 'Printer', 'Large format plotter'),
+        ]
+
+        for name, category, description in printertypes:
+            existing = MachineType.query.filter_by(machinetype=name).first()
+            if not existing:
+                mt = MachineType(
+                    machinetype=name,
+                    category=category,
+                    description=description,
+                    icon='printer'
+                )
+                db.session.add(mt)
+                logger.debug(f"Created machine type: {name}")
+
+        db.session.commit()
+
+    def on_uninstall(self, app: Flask) -> None:
+        """Called when plugin is uninstalled."""
+        logger.info("Printers plugin uninstalled")
+
+    def get_cli_commands(self) -> List:
+        """Return CLI commands for this plugin."""
+
+        @click.group('printers')
+        def printerscli():
+            """Printers plugin commands."""
+            pass
+
+        @printerscli.command('check-supplies')
+        @click.argument('ip')
+        def checksupplies(ip):
+            """Check supply levels for a printer by IP (via Zabbix)."""
+            from flask import current_app
+
+            with current_app.app_context():
+                service = ZabbixService()
+
+                if not service.isconfigured:
+                    click.echo('Error: Zabbix not configured. Set ZABBIX_URL and ZABBIX_TOKEN.')
+                    return
+
+                supplies = service.getsuppliesbyip(ip)
+                if not supplies:
+                    click.echo(f'No supply data found for {ip}')
+                    return
+
+                click.echo(f'Supply levels for {ip}:')
+                for supply in supplies:
+                    click.echo(f"  {supply['name']}: {supply['level']}%")
+
+        return [printerscli]
+
+    def get_dashboard_widgets(self) -> List[Dict]:
+        """Return dashboard widget definitions."""
+        return [
+            {
+                'name': 'Printer Status',
+                'component': 'PrinterStatusWidget',
+                'endpoint': '/api/printers/dashboard/summary',
+                'size': 'medium',
+                'position': 10,
+            },
+        ]
+
+    def get_navigation_items(self) -> List[Dict]:
+        """Return navigation menu items."""
+        return [
+            {
+                'name': 'Printers',
+                'icon': 'printer',
+                'route': '/printers',
+                'position': 20,
+            },
+        ]
diff --git a/plugins/printers/schemas/__init__.py b/plugins/printers/schemas/__init__.py
new file mode 100644
index 0000000..2d84390
--- /dev/null
+++ b/plugins/printers/schemas/__init__.py
@@ -0,0 +1 @@
+"""Printers plugin schemas (for future Marshmallow serialization)."""
diff --git a/plugins/printers/services/__init__.py b/plugins/printers/services/__init__.py
new file mode 100644
index 0000000..7791543
--- /dev/null
+++ b/plugins/printers/services/__init__.py
@@ -0,0 +1,5 @@
+"""Printers plugin services."""
+
+from .zabbix_service import ZabbixService
+
+__all__ = ['ZabbixService']
diff --git a/plugins/printers/services/zabbix_service.py b/plugins/printers/services/zabbix_service.py
new file mode 100644
index 0000000..de321c6
--- /dev/null
+++ b/plugins/printers/services/zabbix_service.py
@@ -0,0 +1,133 @@
+"""Zabbix service for real-time printer supply lookups."""
+
+import logging
+from typing import Dict, List, Optional
+
+import requests
+from flask import current_app
+
+logger = logging.getLogger(__name__)
+
+
+class ZabbixService:
+    """
+    Zabbix API service for real-time printer supply lookups.
+
+    Queries Zabbix by IP address to get current supply levels.
+    No caching - always returns live data.
+    """
+
+    def __init__(self):
+        self._url = None
+        self._token = None
+
+    @property
+    def isconfigured(self) -> bool:
+        """Check if Zabbix is configured."""
+        self._url = current_app.config.get('ZABBIX_URL')
+        self._token = current_app.config.get('ZABBIX_TOKEN')
+        return bool(self._url and self._token)
+
+    def _apicall(self, method: str, params: Dict) -> Optional[Dict]:
+        """Make a Zabbix API call."""
+        if not self.isconfigured:
+            return None
+
+        payload = {
+            'jsonrpc': '2.0',
+            'method': method,
+            'params': params,
+            'auth': self._token,
+            'id': 1
+        }
+
+        try:
+            response = requests.post(
+                f"{self._url}/api_jsonrpc.php",
+                json=payload,
+                headers={'Content-Type': 'application/json'},
+                timeout=10
+            )
+            response.raise_for_status()
+            data = response.json()
+
+            if 'error' in data:
+                logger.error(f"Zabbix API error: {data['error']}")
+                return None
+
+            return data.get('result')
+
+        except requests.RequestException as e:
+            logger.error(f"Zabbix API request failed: {e}")
+            return None
+
+    def gethostbyip(self, ip: str) -> Optional[Dict]:
+        """Find a Zabbix host by IP address."""
+        result = self._apicall('host.get', {
+            'output': ['hostid', 'host', 'name'],
+            'filter': {'ip': ip},
+            'selectInterfaces': ['ip']
+        })
+
+        if result:
+            return result[0] if result else None
+        return None
+
+    def getsuppliesbyip(self, ip: str) -> Optional[List[Dict]]:
+        """
+        Get printer supply levels by IP address.
+
+        Returns list of supplies with name and level percentage.
+        """
+        # Find host by IP
+        host = self.gethostbyip(ip)
+        if not host:
+            logger.debug(f"No Zabbix host found for IP {ip}")
+            return None
+
+        hostid = host['hostid']
+
+        # Get supply-related items
+        items = self._apicall('item.get', {
+            'output': ['itemid', 'name', 'lastvalue', 'key_'],
+            'hostids': hostid,
+            'search': {
+                'key_': 'supply'  # Common key pattern for printer supplies
+            },
+            'searchWildcardsEnabled': True
+        })
+
+        if not items:
+            # Try alternate patterns
+            items = self._apicall('item.get', {
+                'output': ['itemid', 'name', 'lastvalue', 'key_'],
+                'hostids': hostid,
+                'search': {
+                    'name': 'toner'
+                },
+                'searchWildcardsEnabled': True
+            })
+
+        if not items:
+            return []
+
+        supplies = []
+        for item in items:
+            try:
+                level = int(float(item.get('lastvalue', 0)))
+            except (ValueError, TypeError):
+                level = 0
+
+            supplies.append({
+                'name': item.get('name', 'Unknown'),
+                'level': level,
+                'itemid': item.get('itemid'),
+                'key': item.get('key_'),
+            })
+
+        return supplies
+
+    def gethostid(self, ip: str) -> Optional[str]:
+        """Get Zabbix host ID for an IP address."""
+        host = self.gethostbyip(ip)
+        return host['hostid'] if host else None
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..f464b31
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,31 @@
+# Flask and extensions
+flask>=3.0
+flask-sqlalchemy>=3.1
+flask-migrate>=4.0
+flask-jwt-extended>=4.6
+flask-cors>=4.0
+flask-marshmallow>=1.2
+marshmallow-sqlalchemy>=0.29
+
+# Database
+mysql-connector-python>=8.0
+pymysql>=1.1
+
+# CLI and utilities
+click>=8.1
+python-dotenv>=1.0
+tabulate>=0.9
+
+# HTTP/API clients
+requests>=2.31
+
+# Security
+werkzeug>=3.0
+
+# Validation
+email-validator>=2.0
+
+# Testing
+pytest>=7.0
+pytest-flask>=1.2
+pytest-cov>=4.0
diff --git a/scripts/import_from_mysql.py b/scripts/import_from_mysql.py
new file mode 100644
index 0000000..5ccca4a
--- /dev/null
+++ b/scripts/import_from_mysql.py
@@ -0,0 +1,581 @@
+#!/usr/bin/env python3
+"""
+Import data from legacy MySQL ShopDB to new Flask ShopDB.
+
+Usage:
+    cd /home/camp/projects/shopdb-flask
+    source venv/bin/activate
+    python scripts/import_from_mysql.py
+"""
+
+import os
+import sys
+import pymysql
+from datetime import datetime
+from dotenv import load_dotenv
+
+# Add parent directory to path for imports
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+# Load environment variables
+load_dotenv(os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), '.env'))
+
+# MySQL connection settings
+MYSQL_CONFIG = {
+    'host': '127.0.0.1',
+    'port': 3306,
+    'user': 'root',
+    'password': 'rootpassword',
+    'database': 'shopdb',
+    'charset': 'utf8mb4',
+    'cursorclass': pymysql.cursors.DictCursor
+}
+
+
+def get_mysql_connection():
+    """Get MySQL connection."""
+    return pymysql.connect(**MYSQL_CONFIG)
+
+
+def import_vendors(mysql_conn, db, Vendor):
+    """Import vendors from MySQL."""
+    print("Importing vendors...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("SELECT * FROM vendors WHERE isactive = 1")
+    vendors = cursor.fetchall()
+
+    count = 0
+    for v in vendors:
+        existing = Vendor.query.filter_by(vendor=v['vendor']).first()
+        if not existing:
+            vendor = Vendor(
+                vendor=v['vendor'],
+                isactive=True
+            )
+            db.session.add(vendor)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} vendors")
+    return count
+
+
+def import_machinetypes(mysql_conn, db, MachineType):
+    """Import machine types from MySQL with category mapping."""
+    print("Importing machine types...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("SELECT * FROM machinetypes WHERE isactive = 1")
+    types = cursor.fetchall()
+
+    # Category mapping based on machinetype name
+    pc_types = ['PC']
+    network_types = ['Access Point', 'IDF', 'Switch', 'Server', 'Camera']
+    printer_types = ['Printer']
+
+    count = 0
+    for t in types:
+        existing = MachineType.query.filter_by(machinetype=t['machinetype']).first()
+        if not existing:
+            # Determine category
+            if t['machinetype'] in pc_types:
+                category = 'PC'
+            elif t['machinetype'] in network_types:
+                category = 'Network'
+            elif t['machinetype'] in printer_types:
+                category = 'Printer'
+            else:
+                category = 'Equipment'
+
+            mt = MachineType(
+                machinetype=t['machinetype'],
+                category=category,
+                description=t.get('machinedescription'),
+                isactive=True
+            )
+            db.session.add(mt)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} machine types")
+    return count
+
+
+def import_pctypes(mysql_conn, db, PCType):
+    """Import PC types from MySQL."""
+    print("Importing PC types...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("SELECT * FROM pctype WHERE isactive = '1'")
+    types = cursor.fetchall()
+
+    count = 0
+    for t in types:
+        existing = PCType.query.filter_by(pctype=t['typename']).first()
+        if not existing:
+            pctype = PCType(
+                pctype=t['typename'],
+                description=t.get('description'),
+                isactive=True
+            )
+            db.session.add(pctype)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} PC types")
+    return count
+
+
+def import_businessunits(mysql_conn, db, BusinessUnit):
+    """Import business units from MySQL."""
+    print("Importing business units...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("SELECT * FROM businessunits WHERE isactive = 1")
+    units = cursor.fetchall()
+
+    count = 0
+    for bu in units:
+        existing = BusinessUnit.query.filter_by(businessunit=bu['businessunit']).first()
+        if not existing:
+            unit = BusinessUnit(
+                businessunit=bu['businessunit'],
+                isactive=True
+            )
+            db.session.add(unit)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} business units")
+    return count
+
+
+def import_statuses(mysql_conn, db, MachineStatus):
+    """Import machine statuses from MySQL."""
+    print("Importing machine statuses...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("SELECT * FROM machinestatus WHERE isactive = 1")
+    statuses = cursor.fetchall()
+
+    count = 0
+    for s in statuses:
+        existing = MachineStatus.query.filter_by(status=s['machinestatus']).first()
+        if not existing:
+            status = MachineStatus(
+                status=s['machinestatus'],
+                description=s.get('statusdescription'),
+                isactive=True
+            )
+            db.session.add(status)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} statuses")
+    return count
+
+
+def import_operatingsystems(mysql_conn, db, OperatingSystem):
+    """Import operating systems from MySQL."""
+    print("Importing operating systems...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("SELECT * FROM operatingsystems")
+    os_list = cursor.fetchall()
+
+    count = 0
+    for os_item in os_list:
+        os_name = os_item.get('operatingsystem') or os_item.get('osname')
+        if not os_name:
+            continue
+
+        existing = OperatingSystem.query.filter_by(osname=os_name).first()
+        if not existing:
+            os_obj = OperatingSystem(
+                osname=os_name,
+                osversion=os_item.get('osversion'),
+                isactive=True
+            )
+            db.session.add(os_obj)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} operating systems")
+    return count
+
+
+def import_models(mysql_conn, db, Model, Vendor, MachineType):
+    """Import models from MySQL."""
+    print("Importing models...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("""
+        SELECT m.*, v.vendor as vendor_name, mt.machinetype as type_name
+        FROM models m
+        LEFT JOIN vendors v ON m.vendorid = v.vendorid
+        LEFT JOIN machinetypes mt ON m.machinetypeid = mt.machinetypeid
+        WHERE m.isactive = 1
+    """)
+    models = cursor.fetchall()
+
+    count = 0
+    for m in models:
+        existing = Model.query.filter_by(modelnumber=m['modelnumber']).first()
+        if not existing:
+            # Find vendor and machinetype in new db
+            vendor = Vendor.query.filter_by(vendor=m['vendor_name']).first() if m['vendor_name'] else None
+            machinetype = MachineType.query.filter_by(machinetype=m['type_name']).first() if m['type_name'] else None
+
+            model = Model(
+                modelnumber=m['modelnumber'],
+                vendorid=vendor.vendorid if vendor else None,
+                machinetypeid=machinetype.machinetypeid if machinetype else None,
+                notes=m.get('notes'),
+                isactive=True
+            )
+            db.session.add(model)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} models")
+    return count
+
+
+def import_relationshiptypes(mysql_conn, db, RelationshipType):
+    """Import relationship types from MySQL."""
+    print("Importing relationship/connection types...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("SELECT * FROM relationshiptypes WHERE isactive = 1")
+    types = cursor.fetchall()
+
+    count = 0
+    for rt in types:
+        existing = RelationshipType.query.filter_by(relationshiptype=rt['relationshiptype']).first()
+        if not existing:
+            rel_type = RelationshipType(
+                relationshiptype=rt['relationshiptype'],
+                description=rt.get('description'),
+                isactive=True
+            )
+            db.session.add(rel_type)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} relationship types")
+    return count
+
+
+def import_machines(mysql_conn, db, Machine, MachineType, MachineStatus,
+                   Vendor, Model, BusinessUnit, OperatingSystem, Location,
+                   Communication, CommunicationType, PCType):
+    """Import machines (Equipment and PCs) from MySQL."""
+    print("Importing machines...")
+    cursor = mysql_conn.cursor()
+
+    # Get machines with related data
+    cursor.execute("""
+        SELECT m.*,
+               mt.machinetype as type_name,
+               ms.machinestatus as status_name,
+               v.vendor as vendor_name,
+               mdl.modelnumber as model_name,
+               bu.businessunit as bu_name,
+               os.operatingsystem as os_name,
+               pt.typename as pctype_name
+        FROM machines m
+        LEFT JOIN machinetypes mt ON m.machinetypeid = mt.machinetypeid
+        LEFT JOIN machinestatus ms ON m.machinestatusid = ms.machinestatusid
+        LEFT JOIN models mdl ON m.modelnumberid = mdl.modelnumberid
+        LEFT JOIN vendors v ON mdl.vendorid = v.vendorid
+        LEFT JOIN businessunits bu ON m.businessunitid = bu.businessunitid
+        LEFT JOIN operatingsystems os ON m.osid = os.osid
+        LEFT JOIN pctype pt ON m.pctypeid = pt.pctypeid
+        WHERE m.isactive = 1
+    """)
+    machines = cursor.fetchall()
+
+    # Get or create IP communication type
+    ip_comtype = CommunicationType.query.filter_by(comtype='IP').first()
+    if not ip_comtype:
+        ip_comtype = CommunicationType(comtype='IP', description='IP Network')
+        db.session.add(ip_comtype)
+        db.session.flush()
+
+    # Build lookup maps
+    type_map = {t.machinetype: t for t in MachineType.query.all()}
+    status_map = {s.status: s for s in MachineStatus.query.all()}
+    vendor_map = {v.vendor: v for v in Vendor.query.all()}
+    model_map = {m.modelnumber: m for m in Model.query.all()}
+    bu_map = {b.businessunit: b for b in BusinessUnit.query.all()}
+    os_map = {o.osname: o for o in OperatingSystem.query.all()}
+    pctype_map = {p.pctype: p for p in PCType.query.all()}
+
+    # Track old->new ID mapping for relationships
+    machine_id_map = {}
+
+    count = 0
+    comm_count = 0
+    skipped = 0
+    for m in machines:
+        # Skip machines without a machinenumber
+        if not m.get('machinenumber'):
+            skipped += 1
+            continue
+
+        # Check if already exists
+        existing = Machine.query.filter_by(machinenumber=m['machinenumber']).first()
+        if existing:
+            machine_id_map[m['machineid']] = existing.machineid
+            continue
+
+        # Get related objects
+        machinetype = type_map.get(m['type_name'])
+        status = status_map.get(m['status_name'])
+        vendor = vendor_map.get(m['vendor_name'])
+        model = model_map.get(m['model_name'])
+        bu = bu_map.get(m['bu_name'])
+        os_obj = os_map.get(m['os_name'])
+        pctype = pctype_map.get(m['pctype_name'])
+
+        machine = Machine(
+            machinenumber=m['machinenumber'],
+            alias=m.get('alias'),
+            hostname=m.get('hostname'),
+            serialnumber=m.get('serialnumber'),
+            machinetypeid=machinetype.machinetypeid if machinetype else None,
+            pctypeid=pctype.pctypeid if pctype else None,
+            statusid=status.statusid if status else None,
+            vendorid=vendor.vendorid if vendor else None,
+            modelnumberid=model.modelnumberid if model else None,
+            businessunitid=bu.businessunitid if bu else None,
+            osid=os_obj.osid if os_obj else None,
+            mapleft=m.get('mapleft'),
+            maptop=m.get('maptop'),
+            isvnc=bool(m.get('isvnc')),
+            iswinrm=bool(m.get('iswinrm')),
+            islocationonly=bool(m.get('islocationonly')),
+            loggedinuser=m.get('loggedinuser'),
+            notes=m.get('machinenotes'),
+            isactive=True
+        )
+        db.session.add(machine)
+        db.session.flush()  # Get the new ID
+
+        machine_id_map[m['machineid']] = machine.machineid
+        count += 1
+
+        # Import IP addresses
+        if m.get('ipaddress1'):
+            comm = Communication(
+                machineid=machine.machineid,
+                comtypeid=ip_comtype.comtypeid,
+                ipaddress=m['ipaddress1'],
+                isprimary=True
+            )
+            db.session.add(comm)
+            comm_count += 1
+
+        if m.get('ipaddress2'):
+            comm = Communication(
+                machineid=machine.machineid,
+                comtypeid=ip_comtype.comtypeid,
+                ipaddress=m['ipaddress2'],
+                isprimary=False
+            )
+            db.session.add(comm)
+            comm_count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} machines with {comm_count} IP addresses (skipped {skipped} invalid)")
+    return machine_id_map
+
+
+def import_relationships(mysql_conn, db, MachineRelationship, RelationshipType, machine_id_map):
+    """Import machine relationships from MySQL."""
+    print("Importing machine relationships...")
+    cursor = mysql_conn.cursor()
+    cursor.execute("""
+        SELECT mr.*, rt.relationshiptype
+        FROM machinerelationships mr
+        JOIN relationshiptypes rt ON mr.relationshiptypeid = rt.relationshiptypeid
+        WHERE mr.isactive = 1
+    """)
+    relationships = cursor.fetchall()
+
+    # Build relationship type map
+    type_map = {t.relationshiptype: t for t in RelationshipType.query.all()}
+
+    count = 0
+    skipped = 0
+    for r in relationships:
+        # Map old IDs to new IDs
+        parent_id = machine_id_map.get(r['machineid'])
+        child_id = machine_id_map.get(r['related_machineid'])
+
+        if not parent_id or not child_id:
+            skipped += 1
+            continue
+
+        rel_type = type_map.get(r['relationshiptype'])
+        if not rel_type:
+            skipped += 1
+            continue
+
+        # Check if already exists
+        existing = MachineRelationship.query.filter_by(
+            parentmachineid=parent_id,
+            childmachineid=child_id,
+            relationshiptypeid=rel_type.relationshiptypeid
+        ).first()
+
+        if not existing:
+            relationship = MachineRelationship(
+                parentmachineid=parent_id,
+                childmachineid=child_id,
+                relationshiptypeid=rel_type.relationshiptypeid,
+                notes=r.get('relationship_notes')
+            )
+            db.session.add(relationship)
+            count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} relationships (skipped {skipped})")
+    return count
+
+
+def import_printers(mysql_conn, db, Machine, MachineType, Model, Vendor,
+                   Communication, CommunicationType):
+    """Import printers from MySQL."""
+    print("Importing printers...")
+
+    # First, ensure we have a Printer machine type
+    printer_type = MachineType.query.filter_by(machinetype='Printer').first()
+    if not printer_type:
+        printer_type = MachineType(machinetype='Printer', category='Printer')
+        db.session.add(printer_type)
+        db.session.flush()
+
+    # Get or create IP communication type
+    ip_comtype = CommunicationType.query.filter_by(comtype='IP').first()
+    if not ip_comtype:
+        ip_comtype = CommunicationType(comtype='IP', description='IP Network')
+        db.session.add(ip_comtype)
+        db.session.flush()
+
+    cursor = mysql_conn.cursor()
+    cursor.execute("""
+        SELECT p.*, m.modelnumber, v.vendor as vendor_name
+        FROM printers p
+        LEFT JOIN models m ON p.modelid = m.modelnumberid
+        LEFT JOIN vendors v ON m.vendorid = v.vendorid
+        WHERE p.isactive = 1
+    """)
+    printers = cursor.fetchall()
+
+    # Build lookup maps
+    model_map = {m.modelnumber: m for m in Model.query.all()}
+    vendor_map = {v.vendor: v for v in Vendor.query.all()}
+
+    count = 0
+    comm_count = 0
+    for p in printers:
+        # Use windows name as machine number
+        machine_number = p.get('printerwindowsname') or f"Printer_{p['printerid']}"
+
+        existing = Machine.query.filter_by(machinenumber=machine_number).first()
+        if existing:
+            continue
+
+        model = model_map.get(p.get('modelnumber'))
+        vendor = vendor_map.get(p.get('vendor_name'))
+
+        machine = Machine(
+            machinenumber=machine_number,
+            alias=p.get('printercsfname'),
+            hostname=p.get('fqdn'),
+            serialnumber=p.get('serialnumber'),
+            machinetypeid=printer_type.machinetypeid,
+            vendorid=vendor.vendorid if vendor else None,
+            modelnumberid=model.modelnumberid if model else None,
+            mapleft=p.get('mapleft'),
+            maptop=p.get('maptop'),
+            notes=p.get('printernotes'),
+            isactive=True
+        )
+        db.session.add(machine)
+        db.session.flush()
+        count += 1
+
+        # Import IP address
+        if p.get('ipaddress'):
+            comm = Communication(
+                machineid=machine.machineid,
+                comtypeid=ip_comtype.comtypeid,
+                ipaddress=p['ipaddress'],
+                isprimary=True
+            )
+            db.session.add(comm)
+            comm_count += 1
+
+    db.session.commit()
+    print(f"  Imported {count} printers with {comm_count} IP addresses")
+    return count
+
+
+def main():
+    """Main import function."""
+    print("=" * 60)
+    print("ShopDB MySQL to Flask Migration")
+    print("=" * 60)
+
+    # Initialize Flask app
+    from shopdb import create_app
+    from shopdb.extensions import db
+    from shopdb.core.models import (
+        Machine, MachineType, MachineStatus, Vendor, Model,
+        BusinessUnit, OperatingSystem, Location, PCType
+    )
+    from shopdb.core.models.communication import Communication, CommunicationType
+    from shopdb.core.models.relationship import MachineRelationship, RelationshipType
+
+    app = create_app()
+
+    with app.app_context():
+        # Connect to MySQL
+        print("\nConnecting to MySQL...")
+        mysql_conn = get_mysql_connection()
+        print("  Connected!")
+
+        try:
+            # Import reference data
+            print("\n--- Reference Data ---")
+            import_vendors(mysql_conn, db, Vendor)
+            import_machinetypes(mysql_conn, db, MachineType)
+            import_pctypes(mysql_conn, db, PCType)
+            import_businessunits(mysql_conn, db, BusinessUnit)
+            import_statuses(mysql_conn, db, MachineStatus)
+            import_operatingsystems(mysql_conn, db, OperatingSystem)
+            import_models(mysql_conn, db, Model, Vendor, MachineType)
+            import_relationshiptypes(mysql_conn, db, RelationshipType)
+
+            # Import machines
+            print("\n--- Machines ---")
+            machine_id_map = import_machines(
+                mysql_conn, db, Machine, MachineType, MachineStatus,
+                Vendor, Model, BusinessUnit, OperatingSystem, Location,
+                Communication, CommunicationType, PCType
+            )
+
+            # Import relationships
+            print("\n--- Relationships ---")
+            import_relationships(mysql_conn, db, MachineRelationship, RelationshipType, machine_id_map)
+
+            # Import printers
+            print("\n--- Printers ---")
+            import_printers(mysql_conn, db, Machine, MachineType, Model, Vendor,
+                          Communication, CommunicationType)
+
+            print("\n" + "=" * 60)
+            print("Import complete!")
+            print("=" * 60)
+
+        finally:
+            mysql_conn.close()
+
+
+if __name__ == '__main__':
+    main()
diff --git a/shopdb/__init__.py b/shopdb/__init__.py
new file mode 100644
index 0000000..f066481
--- /dev/null
+++ b/shopdb/__init__.py
@@ -0,0 +1,189 @@
+"""Flask application factory."""
+
+import os
+import logging
+from flask import Flask, send_from_directory
+
+from .config import config
+from .extensions import db, migrate, jwt, cors, ma, init_extensions
+from .plugins import plugin_manager
+
+
+def create_app(config_name: str = None) -> Flask:
+    """
+    Application factory.
+
+    Args:
+        config_name: Configuration name ('development', 'production', 'testing')
+
+    Returns:
+        Configured Flask application
+    """
+    if config_name is None:
+        config_name = os.environ.get('FLASK_ENV', 'development')
+
+    app = Flask(__name__, instance_relative_config=True)
+
+    # Load configuration
+    app.config.from_object(config.get(config_name, config['default']))
+
+    # Load instance config if exists
+    app.config.from_pyfile('config.py', silent=True)
+
+    # Ensure instance folder exists
+    os.makedirs(app.instance_path, exist_ok=True)
+
+    # Configure logging
+    configure_logging(app)
+
+    # Initialize extensions
+    init_extensions(app)
+
+    # Initialize plugin manager
+    with app.app_context():
+        plugin_manager.init_app(app, db)
+
+    # Register core blueprints
+    register_blueprints(app)
+
+    # Register CLI commands
+    register_cli_commands(app)
+
+    # Register error handlers
+    register_error_handlers(app)
+
+    # Serve Vue frontend
+    register_frontend_routes(app)
+
+    # JWT user loader (identity is a string in JWT, convert to int for DB lookup)
+    @jwt.user_lookup_loader
+    def user_lookup_callback(_jwt_header, jwt_data):
+        from .core.models import User
+        identity = jwt_data["sub"]
+        return User.query.get(int(identity))
+
+    return app
+
+
+def register_blueprints(app: Flask):
+    """Register core API blueprints."""
+    from .core.api import (
+        auth_bp,
+        machines_bp,
+        machinetypes_bp,
+        pctypes_bp,
+        statuses_bp,
+        vendors_bp,
+        models_bp,
+        businessunits_bp,
+        locations_bp,
+        operatingsystems_bp,
+        dashboard_bp,
+        applications_bp,
+        knowledgebase_bp,
+        search_bp,
+    )
+
+    api_prefix = '/api'
+
+    app.register_blueprint(auth_bp, url_prefix=f'{api_prefix}/auth')
+    app.register_blueprint(machines_bp, url_prefix=f'{api_prefix}/machines')
+    app.register_blueprint(machinetypes_bp, url_prefix=f'{api_prefix}/machinetypes')
+    app.register_blueprint(pctypes_bp, url_prefix=f'{api_prefix}/pctypes')
+    app.register_blueprint(statuses_bp, url_prefix=f'{api_prefix}/statuses')
+    app.register_blueprint(vendors_bp, url_prefix=f'{api_prefix}/vendors')
+    app.register_blueprint(models_bp, url_prefix=f'{api_prefix}/models')
+    app.register_blueprint(businessunits_bp, url_prefix=f'{api_prefix}/businessunits')
+    app.register_blueprint(locations_bp, url_prefix=f'{api_prefix}/locations')
+    app.register_blueprint(operatingsystems_bp, url_prefix=f'{api_prefix}/operatingsystems')
+    app.register_blueprint(dashboard_bp, url_prefix=f'{api_prefix}/dashboard')
+    app.register_blueprint(applications_bp, url_prefix=f'{api_prefix}/applications')
+    app.register_blueprint(knowledgebase_bp, url_prefix=f'{api_prefix}/knowledgebase')
+    app.register_blueprint(search_bp, url_prefix=f'{api_prefix}/search')
+
+
+def register_cli_commands(app: Flask):
+    """Register Flask CLI commands."""
+    from .plugins.cli import plugin_cli
+    from .cli import db_cli, seed_cli
+
+    app.cli.add_command(plugin_cli)
+    app.cli.add_command(db_cli)
+    app.cli.add_command(seed_cli)
+
+
+def register_error_handlers(app: Flask):
+    """Register error handlers."""
+    from .utils.responses import error_response, ErrorCodes
+    from .exceptions import ShopDBException
+
+    @app.errorhandler(ShopDBException)
+    def handle_shopdb_exception(error):
+        http_codes = {
+            'NOT_FOUND': 404,
+            'UNAUTHORIZED': 401,
+            'FORBIDDEN': 403,
+            'CONFLICT': 409,
+            'VALIDATION_ERROR': 400,
+        }
+        http_code = http_codes.get(error.code, 400)
+        return error_response(
+            error.code,
+            error.message,
+            details=error.details,
+            http_code=http_code
+        )
+
+    @app.errorhandler(404)
+    def not_found_error(error):
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            'Resource not found',
+            http_code=404
+        )
+
+    @app.errorhandler(500)
+    def internal_error(error):
+        return error_response(
+            ErrorCodes.INTERNAL_ERROR,
+            'An internal error occurred',
+            http_code=500
+        )
+
+    @app.errorhandler(401)
+    def unauthorized_error(error):
+        return error_response(
+            ErrorCodes.UNAUTHORIZED,
+            'Authentication required',
+            http_code=401
+        )
+
+
+def register_frontend_routes(app: Flask):
+    """Serve Vue frontend static files."""
+    frontend_dist = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'frontend', 'dist')
+
+    @app.route('/', defaults={'path': ''})
+    @app.route('/<path:path>')
+    def serve_frontend(path):
+        # Don't serve API routes as frontend
+        if path.startswith('api/'):
+            from .utils.responses import error_response, ErrorCodes
+            return error_response(ErrorCodes.NOT_FOUND, 'API endpoint not found', http_code=404)
+
+        # Serve static assets
+        if path and os.path.exists(os.path.join(frontend_dist, path)):
+            return send_from_directory(frontend_dist, path)
+
+        # Serve index.html for SPA routing
+        return send_from_directory(frontend_dist, 'index.html')
+
+
+def configure_logging(app: Flask):
+    """Configure application logging."""
+    log_level = app.config.get('LOG_LEVEL', 'INFO')
+
+    logging.basicConfig(
+        level=getattr(logging, log_level),
+        format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+    )
diff --git a/shopdb/cli/__init__.py b/shopdb/cli/__init__.py
new file mode 100644
index 0000000..fb50d0b
--- /dev/null
+++ b/shopdb/cli/__init__.py
@@ -0,0 +1,147 @@
+"""Flask CLI commands."""
+
+import click
+from flask.cli import with_appcontext
+
+
+@click.group('db-utils')
+def db_cli():
+    """Database utility commands."""
+    pass
+
+
+@db_cli.command('create-all')
+@with_appcontext
+def create_all():
+    """Create all database tables."""
+    from shopdb.extensions import db
+
+    db.create_all()
+    click.echo(click.style("All tables created.", fg='green'))
+
+
+@db_cli.command('drop-all')
+@click.confirmation_option(prompt='This will delete ALL data. Are you sure?')
+@with_appcontext
+def drop_all():
+    """Drop all database tables."""
+    from shopdb.extensions import db
+
+    db.drop_all()
+    click.echo(click.style("All tables dropped.", fg='yellow'))
+
+
+@click.group('seed')
+def seed_cli():
+    """Database seeding commands."""
+    pass
+
+
+@seed_cli.command('reference-data')
+@with_appcontext
+def seed_reference_data():
+    """Seed reference data (machine types, statuses, etc.)."""
+    from shopdb.extensions import db
+    from shopdb.core.models import MachineType, MachineStatus, OperatingSystem
+    from shopdb.core.models.relationship import RelationshipType
+
+    # Machine types
+    machine_types = [
+        {'machinetype': 'CNC Mill', 'category': 'Equipment', 'description': 'CNC Milling Machine'},
+        {'machinetype': 'CNC Lathe', 'category': 'Equipment', 'description': 'CNC Lathe'},
+        {'machinetype': 'CMM', 'category': 'Equipment', 'description': 'Coordinate Measuring Machine'},
+        {'machinetype': 'EDM', 'category': 'Equipment', 'description': 'Electrical Discharge Machine'},
+        {'machinetype': 'Grinder', 'category': 'Equipment', 'description': 'Grinding Machine'},
+        {'machinetype': 'Inspection Station', 'category': 'Equipment', 'description': 'Inspection Station'},
+        {'machinetype': 'Desktop PC', 'category': 'PC', 'description': 'Desktop Computer'},
+        {'machinetype': 'Laptop', 'category': 'PC', 'description': 'Laptop Computer'},
+        {'machinetype': 'Shopfloor PC', 'category': 'PC', 'description': 'Shopfloor Computer'},
+        {'machinetype': 'Server', 'category': 'Network', 'description': 'Server'},
+        {'machinetype': 'Switch', 'category': 'Network', 'description': 'Network Switch'},
+        {'machinetype': 'Access Point', 'category': 'Network', 'description': 'Wireless Access Point'},
+    ]
+
+    for mt_data in machine_types:
+        existing = MachineType.query.filter_by(machinetype=mt_data['machinetype']).first()
+        if not existing:
+            mt = MachineType(**mt_data)
+            db.session.add(mt)
+
+    # Machine statuses
+    statuses = [
+        {'status': 'In Use', 'description': 'Currently in use', 'color': '#28a745'},
+        {'status': 'Spare', 'description': 'Available as spare', 'color': '#17a2b8'},
+        {'status': 'Retired', 'description': 'No longer in use', 'color': '#6c757d'},
+        {'status': 'In Repair', 'description': 'Currently being repaired', 'color': '#ffc107'},
+        {'status': 'Pending', 'description': 'Pending installation', 'color': '#007bff'},
+    ]
+
+    for s_data in statuses:
+        existing = MachineStatus.query.filter_by(status=s_data['status']).first()
+        if not existing:
+            s = MachineStatus(**s_data)
+            db.session.add(s)
+
+    # Operating systems
+    os_list = [
+        {'osname': 'Windows 10', 'osversion': '10.0'},
+        {'osname': 'Windows 11', 'osversion': '11.0'},
+        {'osname': 'Windows Server 2019', 'osversion': '2019'},
+        {'osname': 'Windows Server 2022', 'osversion': '2022'},
+        {'osname': 'Linux', 'osversion': 'Various'},
+    ]
+
+    for os_data in os_list:
+        existing = OperatingSystem.query.filter_by(osname=os_data['osname']).first()
+        if not existing:
+            os_obj = OperatingSystem(**os_data)
+            db.session.add(os_obj)
+
+    # Connection types (how PC connects to equipment)
+    connection_types = [
+        {'relationshiptype': 'Serial Cable', 'description': 'RS-232 or similar serial connection'},
+        {'relationshiptype': 'Direct Ethernet', 'description': 'Direct network cable (airgapped)'},
+        {'relationshiptype': 'USB', 'description': 'USB connection'},
+        {'relationshiptype': 'WiFi', 'description': 'Wireless network connection'},
+        {'relationshiptype': 'Dualpath', 'description': 'Redundant/failover network path'},
+    ]
+
+    for ct_data in connection_types:
+        existing = RelationshipType.query.filter_by(relationshiptype=ct_data['relationshiptype']).first()
+        if not existing:
+            ct = RelationshipType(**ct_data)
+            db.session.add(ct)
+
+    db.session.commit()
+    click.echo(click.style("Reference data seeded.", fg='green'))
+
+
+@seed_cli.command('test-user')
+@with_appcontext
+def seed_test_user():
+    """Create a test admin user."""
+    from shopdb.extensions import db
+    from shopdb.core.models import User, Role
+    from werkzeug.security import generate_password_hash
+
+    # Create admin role if not exists
+    admin_role = Role.query.filter_by(rolename='admin').first()
+    if not admin_role:
+        admin_role = Role(rolename='admin', description='Administrator')
+        db.session.add(admin_role)
+
+    # Create test user
+    test_user = User.query.filter_by(username='admin').first()
+    if not test_user:
+        test_user = User(
+            username='admin',
+            email='admin@localhost',
+            passwordhash=generate_password_hash('admin123'),
+            isactive=True
+        )
+        test_user.roles.append(admin_role)
+        db.session.add(test_user)
+        db.session.commit()
+        click.echo(click.style("Test user created: admin / admin123", fg='green'))
+    else:
+        click.echo(click.style("Test user already exists", fg='yellow'))
diff --git a/shopdb/config.py b/shopdb/config.py
new file mode 100644
index 0000000..38cd767
--- /dev/null
+++ b/shopdb/config.py
@@ -0,0 +1,82 @@
+"""Flask application configuration."""
+
+import os
+from datetime import timedelta
+
+
+class Config:
+    """Base configuration."""
+
+    # Flask
+    SECRET_KEY = os.environ.get('SECRET_KEY', 'dev-secret-key-change-in-production')
+
+    # SQLAlchemy
+    SQLALCHEMY_DATABASE_URI = os.environ.get(
+        'DATABASE_URL',
+        'mysql+pymysql://root:password@localhost:3306/shopdb_flask'
+    )
+    SQLALCHEMY_TRACK_MODIFICATIONS = False
+    SQLALCHEMY_ENGINE_OPTIONS = {
+        'pool_pre_ping': True,
+        'pool_recycle': 300,
+    }
+
+    # JWT
+    JWT_SECRET_KEY = os.environ.get('JWT_SECRET_KEY', 'jwt-secret-key-change-in-production')
+    JWT_ACCESS_TOKEN_EXPIRES = timedelta(
+        seconds=int(os.environ.get('JWT_ACCESS_TOKEN_EXPIRES', 3600))
+    )
+    JWT_REFRESH_TOKEN_EXPIRES = timedelta(
+        seconds=int(os.environ.get('JWT_REFRESH_TOKEN_EXPIRES', 2592000))
+    )
+
+    # CORS
+    CORS_ORIGINS = os.environ.get('CORS_ORIGINS', '*').split(',')
+
+    # Logging
+    LOG_LEVEL = os.environ.get('LOG_LEVEL', 'INFO')
+
+    # Pagination
+    DEFAULT_PAGE_SIZE = 20
+    MAX_PAGE_SIZE = 100
+
+
+class DevelopmentConfig(Config):
+    """Development configuration."""
+
+    DEBUG = True
+    SQLALCHEMY_ECHO = True
+
+    # Use SQLite for local development if no DATABASE_URL set
+    SQLALCHEMY_DATABASE_URI = os.environ.get(
+        'DATABASE_URL',
+        'sqlite:///shopdb_dev.db'
+    )
+    SQLALCHEMY_ENGINE_OPTIONS = {}  # SQLite doesn't need pool options
+
+
+class TestingConfig(Config):
+    """Testing configuration."""
+
+    TESTING = True
+    SQLALCHEMY_DATABASE_URI = 'sqlite:///:memory:'
+    JWT_ACCESS_TOKEN_EXPIRES = timedelta(seconds=5)
+
+
+class ProductionConfig(Config):
+    """Production configuration."""
+
+    DEBUG = False
+    SQLALCHEMY_ECHO = False
+
+    # Stricter security in production
+    JWT_COOKIE_SECURE = True
+    JWT_COOKIE_CSRF_PROTECT = True
+
+
+config = {
+    'development': DevelopmentConfig,
+    'testing': TestingConfig,
+    'production': ProductionConfig,
+    'default': DevelopmentConfig
+}
diff --git a/shopdb/core/__init__.py b/shopdb/core/__init__.py
new file mode 100644
index 0000000..6f4aecf
--- /dev/null
+++ b/shopdb/core/__init__.py
@@ -0,0 +1 @@
+"""Core module - always loaded."""
diff --git a/shopdb/core/api/__init__.py b/shopdb/core/api/__init__.py
new file mode 100644
index 0000000..0678558
--- /dev/null
+++ b/shopdb/core/api/__init__.py
@@ -0,0 +1,33 @@
+"""Core API blueprints."""
+
+from .auth import auth_bp
+from .machines import machines_bp
+from .machinetypes import machinetypes_bp
+from .pctypes import pctypes_bp
+from .statuses import statuses_bp
+from .vendors import vendors_bp
+from .models import models_bp
+from .businessunits import businessunits_bp
+from .locations import locations_bp
+from .operatingsystems import operatingsystems_bp
+from .dashboard import dashboard_bp
+from .applications import applications_bp
+from .knowledgebase import knowledgebase_bp
+from .search import search_bp
+
+__all__ = [
+    'auth_bp',
+    'machines_bp',
+    'machinetypes_bp',
+    'pctypes_bp',
+    'statuses_bp',
+    'vendors_bp',
+    'models_bp',
+    'businessunits_bp',
+    'locations_bp',
+    'operatingsystems_bp',
+    'dashboard_bp',
+    'applications_bp',
+    'knowledgebase_bp',
+    'search_bp',
+]
diff --git a/shopdb/core/api/applications.py b/shopdb/core/api/applications.py
new file mode 100644
index 0000000..d74c1cd
--- /dev/null
+++ b/shopdb/core/api/applications.py
@@ -0,0 +1,429 @@
+"""Applications API endpoints."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import (
+    Application, AppVersion, AppOwner, SupportTeam, InstalledApp, Machine
+)
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+applications_bp = Blueprint('applications', __name__)
+
+
+@applications_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def list_applications():
+    """List all applications."""
+    page, per_page = get_pagination_params(request)
+
+    query = Application.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(Application.isactive == True)
+
+    # Filter out hidden unless specifically requested
+    if request.args.get('showhidden', 'false').lower() != 'true':
+        query = query.filter(Application.ishidden == False)
+
+    # Filter by installable
+    if request.args.get('installable') is not None:
+        installable = request.args.get('installable').lower() == 'true'
+        query = query.filter(Application.isinstallable == installable)
+
+    if search := request.args.get('search'):
+        query = query.filter(
+            db.or_(
+                Application.appname.ilike(f'%{search}%'),
+                Application.appdescription.ilike(f'%{search}%')
+            )
+        )
+
+    query = query.order_by(Application.appname)
+
+    items, total = paginate_query(query, page, per_page)
+    data = []
+    for app in items:
+        app_dict = app.to_dict()
+        if app.supportteam:
+            app_dict['supportteam'] = {
+                'supportteamid': app.supportteam.supportteamid,
+                'teamname': app.supportteam.teamname,
+                'teamurl': app.supportteam.teamurl,
+                'owner': {
+                    'appownerid': app.supportteam.owner.appownerid,
+                    'appowner': app.supportteam.owner.appowner,
+                    'sso': app.supportteam.owner.sso
+                } if app.supportteam.owner else None
+            }
+        else:
+            app_dict['supportteam'] = None
+        app_dict['installedcount'] = app.installed_on.filter_by(isactive=True).count()
+        data.append(app_dict)
+
+    return paginated_response(data, page, per_page, total)
+
+
+@applications_bp.route('/<int:app_id>', methods=['GET'])
+@jwt_required(optional=True)
+def get_application(app_id: int):
+    """Get a single application with details."""
+    app = Application.query.get(app_id)
+
+    if not app:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    data = app.to_dict()
+    if app.supportteam:
+        data['supportteam'] = {
+            'supportteamid': app.supportteam.supportteamid,
+            'teamname': app.supportteam.teamname,
+            'teamurl': app.supportteam.teamurl,
+            'owner': {
+                'appownerid': app.supportteam.owner.appownerid,
+                'appowner': app.supportteam.owner.appowner,
+                'sso': app.supportteam.owner.sso
+            } if app.supportteam.owner else None
+        }
+    else:
+        data['supportteam'] = None
+    data['versions'] = [v.to_dict() for v in app.versions.filter_by(isactive=True).order_by(AppVersion.version.desc()).all()]
+    data['installedcount'] = app.installed_on.filter_by(isactive=True).count()
+
+    return success_response(data)
+
+
+@applications_bp.route('', methods=['POST'])
+@jwt_required()
+def create_application():
+    """Create a new application."""
+    data = request.get_json()
+
+    if not data or not data.get('appname'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'appname is required')
+
+    if Application.query.filter_by(appname=data['appname']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Application '{data['appname']}' already exists",
+            http_code=409
+        )
+
+    app = Application(
+        appname=data['appname'],
+        appdescription=data.get('appdescription'),
+        supportteamid=data.get('supportteamid'),
+        isinstallable=data.get('isinstallable', False),
+        applicationnotes=data.get('applicationnotes'),
+        installpath=data.get('installpath'),
+        applicationlink=data.get('applicationlink'),
+        documentationpath=data.get('documentationpath'),
+        ishidden=data.get('ishidden', False),
+        isprinter=data.get('isprinter', False),
+        islicenced=data.get('islicenced', False),
+        image=data.get('image')
+    )
+
+    db.session.add(app)
+    db.session.commit()
+
+    return success_response(app.to_dict(), message='Application created', http_code=201)
+
+
+@applications_bp.route('/<int:app_id>', methods=['PUT'])
+@jwt_required()
+def update_application(app_id: int):
+    """Update an application."""
+    app = Application.query.get(app_id)
+
+    if not app:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if 'appname' in data and data['appname'] != app.appname:
+        if Application.query.filter_by(appname=data['appname']).first():
+            return error_response(
+                ErrorCodes.CONFLICT,
+                f"Application '{data['appname']}' already exists",
+                http_code=409
+            )
+
+    fields = [
+        'appname', 'appdescription', 'supportteamid', 'isinstallable',
+        'applicationnotes', 'installpath', 'applicationlink', 'documentationpath',
+        'ishidden', 'isprinter', 'islicenced', 'image', 'isactive'
+    ]
+    for key in fields:
+        if key in data:
+            setattr(app, key, data[key])
+
+    db.session.commit()
+    return success_response(app.to_dict(), message='Application updated')
+
+
+@applications_bp.route('/<int:app_id>', methods=['DELETE'])
+@jwt_required()
+def delete_application(app_id: int):
+    """Delete (deactivate) an application."""
+    app = Application.query.get(app_id)
+
+    if not app:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    app.isactive = False
+    db.session.commit()
+
+    return success_response(message='Application deleted')
+
+
+# ---- Versions ----
+
+@applications_bp.route('/<int:app_id>/versions', methods=['GET'])
+@jwt_required(optional=True)
+def list_versions(app_id: int):
+    """List all versions for an application."""
+    app = Application.query.get(app_id)
+    if not app:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    versions = app.versions.filter_by(isactive=True).order_by(AppVersion.version.desc()).all()
+    return success_response([v.to_dict() for v in versions])
+
+
+@applications_bp.route('/<int:app_id>/versions', methods=['POST'])
+@jwt_required()
+def create_version(app_id: int):
+    """Create a new version for an application."""
+    app = Application.query.get(app_id)
+    if not app:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    data = request.get_json()
+    if not data or not data.get('version'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'version is required')
+
+    if AppVersion.query.filter_by(appid=app_id, version=data['version']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Version '{data['version']}' already exists for this application",
+            http_code=409
+        )
+
+    version = AppVersion(
+        appid=app_id,
+        version=data['version'],
+        releasedate=data.get('releasedate'),
+        notes=data.get('notes')
+    )
+
+    db.session.add(version)
+    db.session.commit()
+
+    return success_response(version.to_dict(), message='Version created', http_code=201)
+
+
+# ---- Machines with this app installed ----
+
+@applications_bp.route('/<int:app_id>/installed', methods=['GET'])
+@jwt_required(optional=True)
+def list_installed_machines(app_id: int):
+    """List all machines that have this application installed."""
+    app = Application.query.get(app_id)
+    if not app:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    installed = app.installed_on.filter_by(isactive=True).all()
+    data = []
+    for i in installed:
+        item = i.to_dict()
+        if i.machine:
+            item['machine'] = {
+                'machineid': i.machine.machineid,
+                'machinenumber': i.machine.machinenumber,
+                'alias': i.machine.alias,
+                'hostname': i.machine.hostname
+            }
+        data.append(item)
+
+    return success_response(data)
+
+
+# ---- Installed Apps (per machine) ----
+
+@applications_bp.route('/machines/<int:machine_id>', methods=['GET'])
+@jwt_required(optional=True)
+def list_machine_applications(machine_id: int):
+    """List all applications installed on a machine."""
+    machine = Machine.query.get(machine_id)
+    if not machine:
+        return error_response(ErrorCodes.NOT_FOUND, 'Machine not found', http_code=404)
+
+    installed = machine.installedapps.filter_by(isactive=True).all()
+    return success_response([i.to_dict() for i in installed])
+
+
+@applications_bp.route('/machines/<int:machine_id>', methods=['POST'])
+@jwt_required()
+def install_application(machine_id: int):
+    """Install an application on a machine."""
+    machine = Machine.query.get(machine_id)
+    if not machine:
+        return error_response(ErrorCodes.NOT_FOUND, 'Machine not found', http_code=404)
+
+    data = request.get_json()
+    if not data or not data.get('appid'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'appid is required')
+
+    app = Application.query.get(data['appid'])
+    if not app:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    # Check if already installed
+    existing = InstalledApp.query.filter_by(
+        machineid=machine_id,
+        appid=data['appid']
+    ).first()
+
+    if existing:
+        if existing.isactive:
+            return error_response(
+                ErrorCodes.CONFLICT,
+                'Application already installed on this machine',
+                http_code=409
+            )
+        # Reactivate
+        existing.isactive = True
+        existing.appversionid = data.get('appversionid')
+        existing.installeddate = db.func.now()
+        db.session.commit()
+        return success_response(existing.to_dict(), message='Application reinstalled')
+
+    installed = InstalledApp(
+        machineid=machine_id,
+        appid=data['appid'],
+        appversionid=data.get('appversionid')
+    )
+
+    db.session.add(installed)
+    db.session.commit()
+
+    return success_response(installed.to_dict(), message='Application installed', http_code=201)
+
+
+@applications_bp.route('/machines/<int:machine_id>/<int:app_id>', methods=['DELETE'])
+@jwt_required()
+def uninstall_application(machine_id: int, app_id: int):
+    """Uninstall an application from a machine."""
+    installed = InstalledApp.query.filter_by(
+        machineid=machine_id,
+        appid=app_id,
+        isactive=True
+    ).first()
+
+    if not installed:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not installed on this machine', http_code=404)
+
+    installed.isactive = False
+    db.session.commit()
+
+    return success_response(message='Application uninstalled')
+
+
+@applications_bp.route('/machines/<int:machine_id>/<int:app_id>', methods=['PUT'])
+@jwt_required()
+def update_installed_app(machine_id: int, app_id: int):
+    """Update installed application (e.g., change version)."""
+    installed = InstalledApp.query.filter_by(
+        machineid=machine_id,
+        appid=app_id,
+        isactive=True
+    ).first()
+
+    if not installed:
+        return error_response(ErrorCodes.NOT_FOUND, 'Application not installed on this machine', http_code=404)
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if 'appversionid' in data:
+        installed.appversionid = data['appversionid']
+
+    db.session.commit()
+
+    return success_response(installed.to_dict(), message='Installation updated')
+
+
+# ---- Support Teams ----
+
+@applications_bp.route('/supportteams', methods=['GET'])
+@jwt_required(optional=True)
+def list_support_teams():
+    """List all support teams."""
+    teams = SupportTeam.query.filter_by(isactive=True).order_by(SupportTeam.teamname).all()
+    data = []
+    for team in teams:
+        team_dict = team.to_dict()
+        team_dict['owner'] = team.owner.appowner if team.owner else None
+        data.append(team_dict)
+    return success_response(data)
+
+
+@applications_bp.route('/supportteams', methods=['POST'])
+@jwt_required()
+def create_support_team():
+    """Create a new support team."""
+    data = request.get_json()
+    if not data or not data.get('teamname'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'teamname is required')
+
+    team = SupportTeam(
+        teamname=data['teamname'],
+        teamurl=data.get('teamurl'),
+        appownerid=data.get('appownerid')
+    )
+
+    db.session.add(team)
+    db.session.commit()
+
+    return success_response(team.to_dict(), message='Support team created', http_code=201)
+
+
+# ---- App Owners ----
+
+@applications_bp.route('/appowners', methods=['GET'])
+@jwt_required(optional=True)
+def list_app_owners():
+    """List all application owners."""
+    owners = AppOwner.query.filter_by(isactive=True).order_by(AppOwner.appowner).all()
+    return success_response([o.to_dict() for o in owners])
+
+
+@applications_bp.route('/appowners', methods=['POST'])
+@jwt_required()
+def create_app_owner():
+    """Create a new application owner."""
+    data = request.get_json()
+    if not data or not data.get('appowner'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'appowner is required')
+
+    owner = AppOwner(
+        appowner=data['appowner'],
+        sso=data.get('sso'),
+        email=data.get('email')
+    )
+
+    db.session.add(owner)
+    db.session.commit()
+
+    return success_response(owner.to_dict(), message='App owner created', http_code=201)
diff --git a/shopdb/core/api/auth.py b/shopdb/core/api/auth.py
new file mode 100644
index 0000000..fb8b900
--- /dev/null
+++ b/shopdb/core/api/auth.py
@@ -0,0 +1,147 @@
+"""Authentication API endpoints."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import (
+    create_access_token,
+    create_refresh_token,
+    jwt_required,
+    get_jwt_identity,
+    current_user
+)
+from werkzeug.security import check_password_hash
+
+from shopdb.extensions import db
+from shopdb.core.models import User
+from shopdb.utils.responses import success_response, error_response, ErrorCodes
+
+auth_bp = Blueprint('auth', __name__)
+
+
+@auth_bp.route('/login', methods=['POST'])
+def login():
+    """
+    Authenticate user and return JWT tokens.
+
+    Request:
+        {
+            "username": "string",
+            "password": "string"
+        }
+
+    Response:
+        {
+            "data": {
+                "access_token": "...",
+                "refresh_token": "...",
+                "user": {...}
+            }
+        }
+    """
+    data = request.get_json()
+
+    if not data or not data.get('username') or not data.get('password'):
+        return error_response(
+            ErrorCodes.VALIDATION_ERROR,
+            'Username and password required'
+        )
+
+    user = User.query.filter_by(
+        username=data['username'],
+        isactive=True
+    ).first()
+
+    if not user or not check_password_hash(user.passwordhash, data['password']):
+        return error_response(
+            ErrorCodes.UNAUTHORIZED,
+            'Invalid username or password',
+            http_code=401
+        )
+
+    if user.islocked:
+        return error_response(
+            ErrorCodes.FORBIDDEN,
+            'Account is locked',
+            http_code=403
+        )
+
+    # Create tokens (identity must be a string in Flask-JWT-Extended 4.x)
+    access_token = create_access_token(
+        identity=str(user.userid),
+        additional_claims={
+            'username': user.username,
+            'roles': [r.rolename for r in user.roles]
+        }
+    )
+    refresh_token = create_refresh_token(identity=str(user.userid))
+
+    # Update last login
+    user.lastlogindate = db.func.now()
+    user.failedlogins = 0
+    db.session.commit()
+
+    return success_response({
+        'access_token': access_token,
+        'refresh_token': refresh_token,
+        'token_type': 'Bearer',
+        'expires_in': 3600,
+        'user': {
+            'userid': user.userid,
+            'username': user.username,
+            'email': user.email,
+            'firstname': user.firstname,
+            'lastname': user.lastname,
+            'roles': [r.rolename for r in user.roles]
+        }
+    })
+
+
+@auth_bp.route('/refresh', methods=['POST'])
+@jwt_required(refresh=True)
+def refresh():
+    """Refresh access token using refresh token."""
+    user_id = get_jwt_identity()
+    user = User.query.get(int(user_id))
+
+    if not user or not user.isactive:
+        return error_response(
+            ErrorCodes.UNAUTHORIZED,
+            'User not found or inactive',
+            http_code=401
+        )
+
+    access_token = create_access_token(
+        identity=str(user.userid),
+        additional_claims={
+            'username': user.username,
+            'roles': [r.rolename for r in user.roles]
+        }
+    )
+
+    return success_response({
+        'access_token': access_token,
+        'token_type': 'Bearer',
+        'expires_in': 3600
+    })
+
+
+@auth_bp.route('/me', methods=['GET'])
+@jwt_required()
+def get_current_user():
+    """Get current authenticated user info."""
+    return success_response({
+        'userid': current_user.userid,
+        'username': current_user.username,
+        'email': current_user.email,
+        'firstname': current_user.firstname,
+        'lastname': current_user.lastname,
+        'roles': [r.rolename for r in current_user.roles],
+        'permissions': current_user.getpermissions()
+    })
+
+
+@auth_bp.route('/logout', methods=['POST'])
+@jwt_required()
+def logout():
+    """Logout user (for frontend token cleanup)."""
+    # In a full implementation, you'd blacklist the token
+    return success_response(message='Successfully logged out')
diff --git a/shopdb/core/api/businessunits.py b/shopdb/core/api/businessunits.py
new file mode 100644
index 0000000..e51fa1c
--- /dev/null
+++ b/shopdb/core/api/businessunits.py
@@ -0,0 +1,144 @@
+"""Business Units API endpoints - Full CRUD."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import BusinessUnit
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+businessunits_bp = Blueprint('businessunits', __name__)
+
+
+@businessunits_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def list_businessunits():
+    """List all business units."""
+    page, per_page = get_pagination_params(request)
+
+    query = BusinessUnit.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(BusinessUnit.isactive == True)
+
+    if search := request.args.get('search'):
+        query = query.filter(
+            db.or_(
+                BusinessUnit.businessunit.ilike(f'%{search}%'),
+                BusinessUnit.code.ilike(f'%{search}%')
+            )
+        )
+
+    query = query.order_by(BusinessUnit.businessunit)
+
+    items, total = paginate_query(query, page, per_page)
+    data = [bu.to_dict() for bu in items]
+
+    return paginated_response(data, page, per_page, total)
+
+
+@businessunits_bp.route('/<int:bu_id>', methods=['GET'])
+@jwt_required(optional=True)
+def get_businessunit(bu_id: int):
+    """Get a single business unit."""
+    bu = BusinessUnit.query.get(bu_id)
+
+    if not bu:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Business unit with ID {bu_id} not found',
+            http_code=404
+        )
+
+    data = bu.to_dict()
+    data['parent'] = bu.parent.to_dict() if bu.parent else None
+    data['children'] = [c.to_dict() for c in bu.children]
+
+    return success_response(data)
+
+
+@businessunits_bp.route('', methods=['POST'])
+@jwt_required()
+def create_businessunit():
+    """Create a new business unit."""
+    data = request.get_json()
+
+    if not data or not data.get('businessunit'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'businessunit is required')
+
+    if BusinessUnit.query.filter_by(businessunit=data['businessunit']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Business unit '{data['businessunit']}' already exists",
+            http_code=409
+        )
+
+    bu = BusinessUnit(
+        businessunit=data['businessunit'],
+        code=data.get('code'),
+        description=data.get('description'),
+        parentid=data.get('parentid')
+    )
+
+    db.session.add(bu)
+    db.session.commit()
+
+    return success_response(bu.to_dict(), message='Business unit created', http_code=201)
+
+
+@businessunits_bp.route('/<int:bu_id>', methods=['PUT'])
+@jwt_required()
+def update_businessunit(bu_id: int):
+    """Update a business unit."""
+    bu = BusinessUnit.query.get(bu_id)
+
+    if not bu:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Business unit with ID {bu_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if 'businessunit' in data and data['businessunit'] != bu.businessunit:
+        if BusinessUnit.query.filter_by(businessunit=data['businessunit']).first():
+            return error_response(
+                ErrorCodes.CONFLICT,
+                f"Business unit '{data['businessunit']}' already exists",
+                http_code=409
+            )
+
+    for key in ['businessunit', 'code', 'description', 'parentid', 'isactive']:
+        if key in data:
+            setattr(bu, key, data[key])
+
+    db.session.commit()
+    return success_response(bu.to_dict(), message='Business unit updated')
+
+
+@businessunits_bp.route('/<int:bu_id>', methods=['DELETE'])
+@jwt_required()
+def delete_businessunit(bu_id: int):
+    """Delete (deactivate) a business unit."""
+    bu = BusinessUnit.query.get(bu_id)
+
+    if not bu:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Business unit with ID {bu_id} not found',
+            http_code=404
+        )
+
+    bu.isactive = False
+    db.session.commit()
+
+    return success_response(message='Business unit deleted')
diff --git a/shopdb/core/api/dashboard.py b/shopdb/core/api/dashboard.py
new file mode 100644
index 0000000..9ad4cbb
--- /dev/null
+++ b/shopdb/core/api/dashboard.py
@@ -0,0 +1,117 @@
+"""Dashboard API endpoints."""
+
+from flask import Blueprint
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import Machine, MachineType, MachineStatus
+from shopdb.utils.responses import success_response
+
+dashboard_bp = Blueprint('dashboard', __name__)
+
+
+@dashboard_bp.route('/summary', methods=['GET'])
+@dashboard_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def get_dashboard():
+    """Get dashboard summary data."""
+    # Count machines by category
+    equipment_count = db.session.query(Machine).join(MachineType).filter(
+        Machine.isactive == True,
+        MachineType.category == 'Equipment'
+    ).count()
+
+    pc_count = db.session.query(Machine).join(MachineType).filter(
+        Machine.isactive == True,
+        MachineType.category == 'PC'
+    ).count()
+
+    network_count = db.session.query(Machine).join(MachineType).filter(
+        Machine.isactive == True,
+        MachineType.category == 'Network'
+    ).count()
+
+    # Count by status
+    status_counts = db.session.query(
+        MachineStatus.status,
+        db.func.count(Machine.machineid)
+    ).outerjoin(
+        Machine,
+        db.and_(Machine.statusid == MachineStatus.statusid, Machine.isactive == True)
+    ).group_by(MachineStatus.status).all()
+
+    # Recent machines
+    recent_machines = Machine.query.filter_by(isactive=True).order_by(
+        Machine.createddate.desc()
+    ).limit(10).all()
+
+    # Build status dict
+    status_dict = {status: count for status, count in status_counts}
+
+    return success_response({
+        # Fields expected by frontend
+        'totalmachines': equipment_count + pc_count + network_count,
+        'totalequipment': equipment_count,
+        'totalpc': pc_count,
+        'totalnetwork': network_count,
+        'activemachines': status_dict.get('In Use', 0),
+        'inrepair': status_dict.get('In Repair', 0),
+        # Also include structured data
+        'counts': {
+            'equipment': equipment_count,
+            'pcs': pc_count,
+            'network_devices': network_count,
+            'total': equipment_count + pc_count + network_count
+        },
+        'by_status': status_dict,
+        'recent': [
+            {
+                'machineid': m.machineid,
+                'machinenumber': m.machinenumber,
+                'machinetype': m.machinetype.machinetype if m.machinetype else None,
+                'createddate': m.createddate.isoformat() + 'Z' if m.createddate else None
+            }
+            for m in recent_machines
+        ]
+    })
+
+
+@dashboard_bp.route('/stats', methods=['GET'])
+@jwt_required(optional=True)
+def get_stats():
+    """Get detailed statistics."""
+    # Machine type breakdown
+    type_counts = db.session.query(
+        MachineType.machinetype,
+        MachineType.category,
+        db.func.count(Machine.machineid)
+    ).outerjoin(
+        Machine,
+        db.and_(Machine.machinetypeid == MachineType.machinetypeid, Machine.isactive == True)
+    ).filter(MachineType.isactive == True).group_by(
+        MachineType.machinetypeid
+    ).all()
+
+    return success_response({
+        'by_type': [
+            {'type': t, 'category': c, 'count': count}
+            for t, c, count in type_counts
+        ]
+    })
+
+
+@dashboard_bp.route('/health', methods=['GET'])
+def health_check():
+    """Health check endpoint (no auth required)."""
+    try:
+        # Test database connection
+        db.session.execute(db.text('SELECT 1'))
+        db_status = 'healthy'
+    except Exception as e:
+        db_status = f'unhealthy: {str(e)}'
+
+    return success_response({
+        'status': 'ok' if db_status == 'healthy' else 'degraded',
+        'database': db_status,
+        'version': '1.0.0'
+    })
diff --git a/shopdb/core/api/knowledgebase.py b/shopdb/core/api/knowledgebase.py
new file mode 100644
index 0000000..737f595
--- /dev/null
+++ b/shopdb/core/api/knowledgebase.py
@@ -0,0 +1,207 @@
+"""Knowledge Base API endpoints."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import KnowledgeBase, Application
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+knowledgebase_bp = Blueprint('knowledgebase', __name__)
+
+
+@knowledgebase_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def list_articles():
+    """List all knowledge base articles."""
+    page, per_page = get_pagination_params(request)
+
+    query = KnowledgeBase.query.filter_by(isactive=True)
+
+    # Search
+    if search := request.args.get('search'):
+        query = query.filter(
+            db.or_(
+                KnowledgeBase.shortdescription.ilike(f'%{search}%'),
+                KnowledgeBase.keywords.ilike(f'%{search}%')
+            )
+        )
+
+    # Filter by topic/application
+    if appid := request.args.get('appid'):
+        query = query.filter(KnowledgeBase.appid == int(appid))
+
+    # Sort options
+    sort = request.args.get('sort', 'clicks')
+    order = request.args.get('order', 'desc')
+
+    if sort == 'clicks':
+        query = query.order_by(
+            KnowledgeBase.clicks.desc() if order == 'desc' else KnowledgeBase.clicks.asc(),
+            KnowledgeBase.lastupdated.desc()
+        )
+    elif sort == 'topic':
+        query = query.join(Application).order_by(
+            Application.appname.desc() if order == 'desc' else Application.appname.asc()
+        )
+    elif sort == 'description':
+        query = query.order_by(
+            KnowledgeBase.shortdescription.desc() if order == 'desc' else KnowledgeBase.shortdescription.asc()
+        )
+    elif sort == 'lastupdated':
+        query = query.order_by(
+            KnowledgeBase.lastupdated.desc() if order == 'desc' else KnowledgeBase.lastupdated.asc()
+        )
+    else:
+        query = query.order_by(KnowledgeBase.clicks.desc())
+
+    items, total = paginate_query(query, page, per_page)
+    data = []
+    for article in items:
+        article_dict = article.to_dict()
+        if article.application:
+            article_dict['application'] = {
+                'appid': article.application.appid,
+                'appname': article.application.appname
+            }
+        else:
+            article_dict['application'] = None
+        data.append(article_dict)
+
+    return paginated_response(data, page, per_page, total)
+
+
+@knowledgebase_bp.route('/stats', methods=['GET'])
+@jwt_required(optional=True)
+def get_stats():
+    """Get knowledge base statistics."""
+    total_clicks = db.session.query(
+        db.func.coalesce(db.func.sum(KnowledgeBase.clicks), 0)
+    ).filter(KnowledgeBase.isactive == True).scalar()
+
+    total_articles = KnowledgeBase.query.filter_by(isactive=True).count()
+
+    return success_response({
+        'totalclicks': int(total_clicks),
+        'totalarticles': total_articles
+    })
+
+
+@knowledgebase_bp.route('/<int:link_id>', methods=['GET'])
+@jwt_required(optional=True)
+def get_article(link_id: int):
+    """Get a single knowledge base article."""
+    article = KnowledgeBase.query.get(link_id)
+
+    if not article or not article.isactive:
+        return error_response(ErrorCodes.NOT_FOUND, 'Article not found', http_code=404)
+
+    data = article.to_dict()
+    if article.application:
+        data['application'] = {
+            'appid': article.application.appid,
+            'appname': article.application.appname
+        }
+    else:
+        data['application'] = None
+
+    return success_response(data)
+
+
+@knowledgebase_bp.route('/<int:link_id>/click', methods=['POST'])
+@jwt_required(optional=True)
+def track_click(link_id: int):
+    """Increment click counter and return the URL to redirect to."""
+    article = KnowledgeBase.query.get(link_id)
+
+    if not article or not article.isactive:
+        return error_response(ErrorCodes.NOT_FOUND, 'Article not found', http_code=404)
+
+    article.increment_clicks()
+    db.session.commit()
+
+    return success_response({
+        'linkurl': article.linkurl,
+        'clicks': article.clicks
+    })
+
+
+@knowledgebase_bp.route('', methods=['POST'])
+@jwt_required()
+def create_article():
+    """Create a new knowledge base article."""
+    data = request.get_json()
+
+    if not data or not data.get('shortdescription'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'shortdescription is required')
+
+    if not data.get('linkurl'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'linkurl is required')
+
+    # Validate application if provided
+    if data.get('appid'):
+        app = Application.query.get(data['appid'])
+        if not app:
+            return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    article = KnowledgeBase(
+        shortdescription=data['shortdescription'],
+        linkurl=data['linkurl'],
+        appid=data.get('appid'),
+        keywords=data.get('keywords'),
+        clicks=0
+    )
+
+    db.session.add(article)
+    db.session.commit()
+
+    return success_response(article.to_dict(), message='Article created', http_code=201)
+
+
+@knowledgebase_bp.route('/<int:link_id>', methods=['PUT'])
+@jwt_required()
+def update_article(link_id: int):
+    """Update a knowledge base article."""
+    article = KnowledgeBase.query.get(link_id)
+
+    if not article:
+        return error_response(ErrorCodes.NOT_FOUND, 'Article not found', http_code=404)
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    # Validate application if being changed
+    if 'appid' in data and data['appid']:
+        app = Application.query.get(data['appid'])
+        if not app:
+            return error_response(ErrorCodes.NOT_FOUND, 'Application not found', http_code=404)
+
+    fields = ['shortdescription', 'linkurl', 'appid', 'keywords', 'isactive']
+    for key in fields:
+        if key in data:
+            setattr(article, key, data[key])
+
+    db.session.commit()
+    return success_response(article.to_dict(), message='Article updated')
+
+
+@knowledgebase_bp.route('/<int:link_id>', methods=['DELETE'])
+@jwt_required()
+def delete_article(link_id: int):
+    """Delete (deactivate) a knowledge base article."""
+    article = KnowledgeBase.query.get(link_id)
+
+    if not article:
+        return error_response(ErrorCodes.NOT_FOUND, 'Article not found', http_code=404)
+
+    article.isactive = False
+    db.session.commit()
+
+    return success_response(message='Article deleted')
diff --git a/shopdb/core/api/locations.py b/shopdb/core/api/locations.py
new file mode 100644
index 0000000..5686127
--- /dev/null
+++ b/shopdb/core/api/locations.py
@@ -0,0 +1,144 @@
+"""Locations API endpoints - Full CRUD."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import Location
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+locations_bp = Blueprint('locations', __name__)
+
+
+@locations_bp.route('', methods=['GET'])
+@jwt_required()
+def list_locations():
+    """List all locations."""
+    page, per_page = get_pagination_params(request)
+
+    query = Location.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(Location.isactive == True)
+
+    if search := request.args.get('search'):
+        query = query.filter(
+            db.or_(
+                Location.locationname.ilike(f'%{search}%'),
+                Location.building.ilike(f'%{search}%')
+            )
+        )
+
+    query = query.order_by(Location.locationname)
+
+    items, total = paginate_query(query, page, per_page)
+    data = [loc.to_dict() for loc in items]
+
+    return paginated_response(data, page, per_page, total)
+
+
+@locations_bp.route('/<int:location_id>', methods=['GET'])
+@jwt_required()
+def get_location(location_id: int):
+    """Get a single location."""
+    loc = Location.query.get(location_id)
+
+    if not loc:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Location with ID {location_id} not found',
+            http_code=404
+        )
+
+    return success_response(loc.to_dict())
+
+
+@locations_bp.route('', methods=['POST'])
+@jwt_required()
+def create_location():
+    """Create a new location."""
+    data = request.get_json()
+
+    if not data or not data.get('locationname'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'locationname is required')
+
+    if Location.query.filter_by(locationname=data['locationname']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Location '{data['locationname']}' already exists",
+            http_code=409
+        )
+
+    loc = Location(
+        locationname=data['locationname'],
+        building=data.get('building'),
+        floor=data.get('floor'),
+        room=data.get('room'),
+        description=data.get('description'),
+        mapimage=data.get('mapimage'),
+        mapwidth=data.get('mapwidth'),
+        mapheight=data.get('mapheight')
+    )
+
+    db.session.add(loc)
+    db.session.commit()
+
+    return success_response(loc.to_dict(), message='Location created', http_code=201)
+
+
+@locations_bp.route('/<int:location_id>', methods=['PUT'])
+@jwt_required()
+def update_location(location_id: int):
+    """Update a location."""
+    loc = Location.query.get(location_id)
+
+    if not loc:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Location with ID {location_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if 'locationname' in data and data['locationname'] != loc.locationname:
+        if Location.query.filter_by(locationname=data['locationname']).first():
+            return error_response(
+                ErrorCodes.CONFLICT,
+                f"Location '{data['locationname']}' already exists",
+                http_code=409
+            )
+
+    for key in ['locationname', 'building', 'floor', 'room', 'description', 'mapimage', 'mapwidth', 'mapheight', 'isactive']:
+        if key in data:
+            setattr(loc, key, data[key])
+
+    db.session.commit()
+    return success_response(loc.to_dict(), message='Location updated')
+
+
+@locations_bp.route('/<int:location_id>', methods=['DELETE'])
+@jwt_required()
+def delete_location(location_id: int):
+    """Delete (deactivate) a location."""
+    loc = Location.query.get(location_id)
+
+    if not loc:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Location with ID {location_id} not found',
+            http_code=404
+        )
+
+    loc.isactive = False
+    db.session.commit()
+
+    return success_response(message='Location deleted')
diff --git a/shopdb/core/api/machines.py b/shopdb/core/api/machines.py
new file mode 100644
index 0000000..c7b757a
--- /dev/null
+++ b/shopdb/core/api/machines.py
@@ -0,0 +1,567 @@
+"""Machines API endpoints."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required, current_user
+
+from shopdb.extensions import db
+from shopdb.core.models import Machine, MachineType
+from shopdb.core.models.relationship import MachineRelationship, RelationshipType
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+machines_bp = Blueprint('machines', __name__)
+
+
+@machines_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def list_machines():
+    """
+    List all machines with filtering and pagination.
+
+    Query params:
+        page: int (default 1)
+        per_page: int (default 20, max 100)
+        machinetype: int (filter by type ID)
+        pctype: int (filter by PC type ID)
+        businessunit: int (filter by business unit ID)
+        status: int (filter by status ID)
+        category: str (Equipment, PC, Network)
+        search: str (search in machinenumber, alias, hostname)
+        active: bool (default true)
+        sort: str (field name, prefix with - for desc)
+    """
+    page, per_page = get_pagination_params(request)
+
+    # Build query
+    query = Machine.query
+
+    # Apply filters
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(Machine.isactive == True)
+
+    if machinetype_id := request.args.get('machinetype', type=int):
+        query = query.filter(Machine.machinetypeid == machinetype_id)
+
+    if pctype_id := request.args.get('pctype', type=int):
+        query = query.filter(Machine.pctypeid == pctype_id)
+
+    if businessunit_id := request.args.get('businessunit', type=int):
+        query = query.filter(Machine.businessunitid == businessunit_id)
+
+    if status_id := request.args.get('status', type=int):
+        query = query.filter(Machine.statusid == status_id)
+
+    if category := request.args.get('category'):
+        query = query.join(MachineType).filter(MachineType.category == category)
+
+    if search := request.args.get('search'):
+        search_term = f'%{search}%'
+        query = query.filter(
+            db.or_(
+                Machine.machinenumber.ilike(search_term),
+                Machine.alias.ilike(search_term),
+                Machine.hostname.ilike(search_term),
+                Machine.serialnumber.ilike(search_term)
+            )
+        )
+
+    # Filter for machines with map positions
+    if request.args.get('hasmap', '').lower() == 'true':
+        query = query.filter(
+            Machine.mapleft.isnot(None),
+            Machine.maptop.isnot(None)
+        )
+
+    # Apply sorting
+    sort_field = request.args.get('sort', 'machinenumber')
+    desc = sort_field.startswith('-')
+    if desc:
+        sort_field = sort_field[1:]
+
+    if hasattr(Machine, sort_field):
+        order = getattr(Machine, sort_field)
+        query = query.order_by(order.desc() if desc else order)
+
+    # For map view, allow fetching all machines without pagination limit
+    include_map_extras = request.args.get('hasmap', '').lower() == 'true'
+    fetch_all = request.args.get('all', '').lower() == 'true'
+
+    if include_map_extras and fetch_all:
+        # Get all map machines without pagination
+        items = query.all()
+        total = len(items)
+    else:
+        # Normal pagination
+        items, total = paginate_query(query, page, per_page)
+
+    # Convert to dicts with relationships
+    data = []
+    for m in items:
+        d = m.to_dict()
+        # Get machinetype from model (single source of truth)
+        mt = m.derived_machinetype
+        d['machinetype'] = mt.machinetype if mt else None
+        d['machinetypeid'] = mt.machinetypeid if mt else None
+        d['category'] = mt.category if mt else None
+        d['status'] = m.status.status if m.status else None
+        d['statusid'] = m.statusid
+        d['businessunit'] = m.businessunit.businessunit if m.businessunit else None
+        d['businessunitid'] = m.businessunitid
+        d['vendor'] = m.vendor.vendor if m.vendor else None
+        d['model'] = m.model.modelnumber if m.model else None
+        d['pctype'] = m.pctype.pctype if m.pctype else None
+        d['serialnumber'] = m.serialnumber
+        d['isvnc'] = m.isvnc
+        d['iswinrm'] = m.iswinrm
+
+        # Include extra fields for map view
+        if include_map_extras:
+            # Get primary IP address from communications
+            primary_comm = next(
+                (c for c in m.communications if c.isprimary and c.ipaddress),
+                None
+            )
+            if not primary_comm:
+                # Fall back to first communication with IP
+                primary_comm = next(
+                    (c for c in m.communications if c.ipaddress),
+                    None
+                )
+            d['ipaddress'] = primary_comm.ipaddress if primary_comm else None
+
+            # Get connected PC (parent machine that is a PC)
+            connected_pc = None
+            for rel in m.parent_relationships:
+                if rel.parent_machine and rel.parent_machine.is_pc:
+                    connected_pc = rel.parent_machine.machinenumber
+                    break
+            d['connected_pc'] = connected_pc
+
+        data.append(d)
+
+    return paginated_response(data, page, per_page, total)
+
+
+@machines_bp.route('/<int:machine_id>', methods=['GET'])
+@jwt_required(optional=True)
+def get_machine(machine_id: int):
+    """Get a single machine by ID."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine with ID {machine_id} not found',
+            http_code=404
+        )
+
+    data = machine.to_dict()
+    # Add related data - machinetype comes from model (single source of truth)
+    mt = machine.derived_machinetype
+    data['machinetype'] = mt.to_dict() if mt else None
+    data['pctype'] = machine.pctype.to_dict() if machine.pctype else None
+    data['status'] = machine.status.to_dict() if machine.status else None
+    data['businessunit'] = machine.businessunit.to_dict() if machine.businessunit else None
+    data['vendor'] = machine.vendor.to_dict() if machine.vendor else None
+    data['model'] = machine.model.to_dict() if machine.model else None
+    data['location'] = machine.location.to_dict() if machine.location else None
+    data['operatingsystem'] = machine.operatingsystem.to_dict() if machine.operatingsystem else None
+
+    # Add communications
+    data['communications'] = [c.to_dict() for c in machine.communications.all()]
+
+    return success_response(data)
+
+
+@machines_bp.route('', methods=['POST'])
+@jwt_required()
+def create_machine():
+    """Create a new machine."""
+    data = request.get_json()
+
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if not data.get('machinenumber'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'machinenumber is required')
+
+    if not data.get('modelnumberid'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'modelnumberid is required (determines machine type)')
+
+    # Check for duplicate machinenumber
+    if Machine.query.filter_by(machinenumber=data['machinenumber']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Machine number '{data['machinenumber']}' already exists",
+            http_code=409
+        )
+
+    # Create machine
+    allowed_fields = [
+        'machinenumber', 'alias', 'hostname', 'serialnumber',
+        'machinetypeid', 'pctypeid', 'businessunitid', 'modelnumberid',
+        'vendorid', 'statusid', 'locationid', 'osid',
+        'mapleft', 'maptop', 'islocationonly',
+        'loggedinuser', 'isvnc', 'iswinrm', 'isshopfloor',
+        'requiresmanualconfig', 'notes'
+    ]
+
+    machine_data = {k: v for k, v in data.items() if k in allowed_fields}
+    machine = Machine(**machine_data)
+    machine.createdby = current_user.username
+
+    db.session.add(machine)
+    db.session.commit()
+
+    return success_response(
+        machine.to_dict(),
+        message='Machine created successfully',
+        http_code=201
+    )
+
+
+@machines_bp.route('/<int:machine_id>', methods=['PUT'])
+@jwt_required()
+def update_machine(machine_id: int):
+    """Update an existing machine."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine with ID {machine_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    # Check for duplicate machinenumber if changed
+    if 'machinenumber' in data and data['machinenumber'] != machine.machinenumber:
+        existing = Machine.query.filter_by(machinenumber=data['machinenumber']).first()
+        if existing:
+            return error_response(
+                ErrorCodes.CONFLICT,
+                f"Machine number '{data['machinenumber']}' already exists",
+                http_code=409
+            )
+
+    # Update allowed fields
+    allowed_fields = [
+        'machinenumber', 'alias', 'hostname', 'serialnumber',
+        'machinetypeid', 'pctypeid', 'businessunitid', 'modelnumberid',
+        'vendorid', 'statusid', 'locationid', 'osid',
+        'mapleft', 'maptop', 'islocationonly',
+        'loggedinuser', 'isvnc', 'iswinrm', 'isshopfloor',
+        'requiresmanualconfig', 'notes', 'isactive'
+    ]
+
+    for key, value in data.items():
+        if key in allowed_fields:
+            setattr(machine, key, value)
+
+    machine.modifiedby = current_user.username
+    db.session.commit()
+
+    return success_response(machine.to_dict(), message='Machine updated successfully')
+
+
+@machines_bp.route('/<int:machine_id>', methods=['DELETE'])
+@jwt_required()
+def delete_machine(machine_id: int):
+    """Soft delete a machine."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine with ID {machine_id} not found',
+            http_code=404
+        )
+
+    machine.soft_delete(deleted_by=current_user.username)
+    db.session.commit()
+
+    return success_response(message='Machine deleted successfully')
+
+
+@machines_bp.route('/<int:machine_id>/communications', methods=['GET'])
+@jwt_required()
+def get_machine_communications(machine_id: int):
+    """Get all communications for a machine."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine with ID {machine_id} not found',
+            http_code=404
+        )
+
+    comms = [c.to_dict() for c in machine.communications.all()]
+    return success_response(comms)
+
+
+@machines_bp.route('/<int:machine_id>/communication', methods=['PUT'])
+@jwt_required()
+def update_machine_communication(machine_id: int):
+    """Update machine communication (IP address)."""
+    from shopdb.core.models.communication import Communication, CommunicationType
+
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine with ID {machine_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    # Get or create IP communication type
+    ip_comtype = CommunicationType.query.filter_by(comtype='IP').first()
+    if not ip_comtype:
+        ip_comtype = CommunicationType(comtype='IP', description='IP Network')
+        db.session.add(ip_comtype)
+        db.session.flush()
+
+    # Find existing primary communication or create new one
+    comms = list(machine.communications.all())
+    comm = next((c for c in comms if c.isprimary), None)
+    if not comm:
+        comm = next((c for c in comms if c.comtypeid == ip_comtype.comtypeid), None)
+    if not comm:
+        comm = Communication(machineid=machine_id, comtypeid=ip_comtype.comtypeid)
+        db.session.add(comm)
+
+    # Update fields
+    if 'ipaddress' in data:
+        comm.ipaddress = data['ipaddress']
+    if 'isprimary' in data:
+        comm.isprimary = data['isprimary']
+    if 'macaddress' in data:
+        comm.macaddress = data['macaddress']
+
+    db.session.commit()
+
+    return success_response({
+        'communicationid': comm.communicationid,
+        'ipaddress': comm.ipaddress,
+        'isprimary': comm.isprimary,
+    }, message='Communication updated')
+
+
+# ==================== Machine Relationships ====================
+
+@machines_bp.route('/<int:machine_id>/relationships', methods=['GET'])
+@jwt_required(optional=True)
+def get_machine_relationships(machine_id: int):
+    """Get all relationships for a machine (both parent and child)."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine with ID {machine_id} not found',
+            http_code=404
+        )
+
+    relationships = []
+    my_category = machine.machinetype.category if machine.machinetype else None
+    seen_ids = set()
+
+    # Get all relationships involving this machine
+    all_rels = list(machine.child_relationships) + list(machine.parent_relationships)
+
+    for rel in all_rels:
+        if rel.relationshipid in seen_ids:
+            continue
+        seen_ids.add(rel.relationshipid)
+
+        # Determine the related machine (the one that isn't us)
+        if rel.parentmachineid == machine.machineid:
+            related = rel.child_machine
+        else:
+            related = rel.parent_machine
+
+        related_category = related.machinetype.category if related and related.machinetype else None
+        rel_type = rel.relationship_type.relationshiptype if rel.relationship_type else None
+
+        # Determine direction based on relationship type and categories
+        if rel_type == 'Controls':
+            # PC controls Equipment - determine from categories
+            if my_category == 'PC':
+                direction = 'controls'
+            else:
+                direction = 'controlled_by'
+        elif rel_type == 'Dualpath':
+            direction = 'dualpath_partner'
+        else:
+            # For other types, use parent/child
+            if rel.parentmachineid == machine.machineid:
+                direction = 'controls'
+            else:
+                direction = 'controlled_by'
+
+        relationships.append({
+            'relationshipid': rel.relationshipid,
+            'direction': direction,
+            'relatedmachineid': related.machineid if related else None,
+            'relatedmachinenumber': related.machinenumber if related else None,
+            'relatedmachinealias': related.alias if related else None,
+            'relatedcategory': related_category,
+            'relationshiptype': rel_type,
+            'relationshiptypeid': rel.relationshiptypeid,
+            'notes': rel.notes
+        })
+
+    return success_response(relationships)
+
+
+@machines_bp.route('/<int:machine_id>/relationships', methods=['POST'])
+@jwt_required()
+def create_machine_relationship(machine_id: int):
+    """Create a relationship for a machine."""
+    machine = Machine.query.get(machine_id)
+
+    if not machine:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine with ID {machine_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    related_machine_id = data.get('relatedmachineid')
+    relationship_type_id = data.get('relationshiptypeid')
+    direction = data.get('direction', 'controlled_by')  # 'controls' or 'controlled_by'
+
+    if not related_machine_id:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'relatedmachineid is required')
+
+    if not relationship_type_id:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'relationshiptypeid is required')
+
+    related_machine = Machine.query.get(related_machine_id)
+    if not related_machine:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Related machine with ID {related_machine_id} not found',
+            http_code=404
+        )
+
+    # Determine parent/child based on direction
+    if direction == 'controls':
+        parent_id = machine_id
+        child_id = related_machine_id
+    else:  # controlled_by
+        parent_id = related_machine_id
+        child_id = machine_id
+
+    # Check if relationship already exists
+    existing = MachineRelationship.query.filter_by(
+        parentmachineid=parent_id,
+        childmachineid=child_id,
+        relationshiptypeid=relationship_type_id
+    ).first()
+
+    if existing:
+        return error_response(
+            ErrorCodes.CONFLICT,
+            'This relationship already exists',
+            http_code=409
+        )
+
+    relationship = MachineRelationship(
+        parentmachineid=parent_id,
+        childmachineid=child_id,
+        relationshiptypeid=relationship_type_id,
+        notes=data.get('notes')
+    )
+
+    db.session.add(relationship)
+    db.session.commit()
+
+    return success_response({
+        'relationshipid': relationship.relationshipid,
+        'parentmachineid': relationship.parentmachineid,
+        'childmachineid': relationship.childmachineid,
+        'relationshiptypeid': relationship.relationshiptypeid
+    }, message='Relationship created successfully', http_code=201)
+
+
+@machines_bp.route('/relationships/<int:relationship_id>', methods=['DELETE'])
+@jwt_required()
+def delete_machine_relationship(relationship_id: int):
+    """Delete a machine relationship."""
+    relationship = MachineRelationship.query.get(relationship_id)
+
+    if not relationship:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Relationship with ID {relationship_id} not found',
+            http_code=404
+        )
+
+    db.session.delete(relationship)
+    db.session.commit()
+
+    return success_response(message='Relationship deleted successfully')
+
+
+@machines_bp.route('/relationshiptypes', methods=['GET'])
+@jwt_required(optional=True)
+def list_relationship_types():
+    """List all relationship types."""
+    types = RelationshipType.query.order_by(RelationshipType.relationshiptype).all()
+    return success_response([{
+        'relationshiptypeid': t.relationshiptypeid,
+        'relationshiptype': t.relationshiptype,
+        'description': t.description
+    } for t in types])
+
+
+@machines_bp.route('/relationshiptypes', methods=['POST'])
+@jwt_required()
+def create_relationship_type():
+    """Create a new relationship type."""
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if not data.get('relationshiptype'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'relationshiptype is required')
+
+    existing = RelationshipType.query.filter_by(relationshiptype=data['relationshiptype']).first()
+    if existing:
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Relationship type '{data['relationshiptype']}' already exists",
+            http_code=409
+        )
+
+    rel_type = RelationshipType(
+        relationshiptype=data['relationshiptype'],
+        description=data.get('description')
+    )
+
+    db.session.add(rel_type)
+    db.session.commit()
+
+    return success_response({
+        'relationshiptypeid': rel_type.relationshiptypeid,
+        'relationshiptype': rel_type.relationshiptype,
+        'description': rel_type.description
+    }, message='Relationship type created successfully', http_code=201)
diff --git a/shopdb/core/api/machinetypes.py b/shopdb/core/api/machinetypes.py
new file mode 100644
index 0000000..5ec6582
--- /dev/null
+++ b/shopdb/core/api/machinetypes.py
@@ -0,0 +1,148 @@
+"""Machine Types API endpoints - Full CRUD."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required, current_user
+
+from shopdb.extensions import db
+from shopdb.core.models import MachineType
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+machinetypes_bp = Blueprint('machinetypes', __name__)
+
+
+@machinetypes_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def list_machinetypes():
+    """List all machine types with optional filtering."""
+    page, per_page = get_pagination_params(request)
+
+    query = MachineType.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(MachineType.isactive == True)
+
+    if category := request.args.get('category'):
+        query = query.filter(MachineType.category == category)
+
+    if search := request.args.get('search'):
+        query = query.filter(MachineType.machinetype.ilike(f'%{search}%'))
+
+    query = query.order_by(MachineType.machinetype)
+
+    items, total = paginate_query(query, page, per_page)
+    data = [mt.to_dict() for mt in items]
+
+    return paginated_response(data, page, per_page, total)
+
+
+@machinetypes_bp.route('/<int:type_id>', methods=['GET'])
+@jwt_required(optional=True)
+def get_machinetype(type_id: int):
+    """Get a single machine type."""
+    mt = MachineType.query.get(type_id)
+
+    if not mt:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine type with ID {type_id} not found',
+            http_code=404
+        )
+
+    return success_response(mt.to_dict())
+
+
+@machinetypes_bp.route('', methods=['POST'])
+@jwt_required()
+def create_machinetype():
+    """Create a new machine type."""
+    data = request.get_json()
+
+    if not data or not data.get('machinetype'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'machinetype is required')
+
+    if MachineType.query.filter_by(machinetype=data['machinetype']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Machine type '{data['machinetype']}' already exists",
+            http_code=409
+        )
+
+    mt = MachineType(
+        machinetype=data['machinetype'],
+        category=data.get('category', 'Equipment'),
+        description=data.get('description'),
+        icon=data.get('icon')
+    )
+
+    db.session.add(mt)
+    db.session.commit()
+
+    return success_response(mt.to_dict(), message='Machine type created', http_code=201)
+
+
+@machinetypes_bp.route('/<int:type_id>', methods=['PUT'])
+@jwt_required()
+def update_machinetype(type_id: int):
+    """Update a machine type."""
+    mt = MachineType.query.get(type_id)
+
+    if not mt:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine type with ID {type_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    # Check duplicate name
+    if 'machinetype' in data and data['machinetype'] != mt.machinetype:
+        if MachineType.query.filter_by(machinetype=data['machinetype']).first():
+            return error_response(
+                ErrorCodes.CONFLICT,
+                f"Machine type '{data['machinetype']}' already exists",
+                http_code=409
+            )
+
+    for key in ['machinetype', 'category', 'description', 'icon', 'isactive']:
+        if key in data:
+            setattr(mt, key, data[key])
+
+    db.session.commit()
+    return success_response(mt.to_dict(), message='Machine type updated')
+
+
+@machinetypes_bp.route('/<int:type_id>', methods=['DELETE'])
+@jwt_required()
+def delete_machinetype(type_id: int):
+    """Delete (deactivate) a machine type."""
+    mt = MachineType.query.get(type_id)
+
+    if not mt:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Machine type with ID {type_id} not found',
+            http_code=404
+        )
+
+    # Check if any machines use this type
+    from shopdb.core.models import Machine
+    if Machine.query.filter_by(machinetypeid=type_id, isactive=True).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            'Cannot delete machine type: machines are using it',
+            http_code=409
+        )
+
+    mt.isactive = False
+    db.session.commit()
+
+    return success_response(message='Machine type deleted')
diff --git a/shopdb/core/api/models.py b/shopdb/core/api/models.py
new file mode 100644
index 0000000..66238ed
--- /dev/null
+++ b/shopdb/core/api/models.py
@@ -0,0 +1,151 @@
+"""Models (equipment models) API endpoints - Full CRUD."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import Model
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+models_bp = Blueprint('models', __name__)
+
+
+@models_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def list_models():
+    """List all equipment models."""
+    page, per_page = get_pagination_params(request)
+
+    query = Model.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(Model.isactive == True)
+
+    if vendor_id := request.args.get('vendor', type=int):
+        query = query.filter(Model.vendorid == vendor_id)
+
+    if machinetype_id := request.args.get('machinetype', type=int):
+        query = query.filter(Model.machinetypeid == machinetype_id)
+
+    if search := request.args.get('search'):
+        query = query.filter(Model.modelnumber.ilike(f'%{search}%'))
+
+    query = query.order_by(Model.modelnumber)
+
+    items, total = paginate_query(query, page, per_page)
+
+    data = []
+    for m in items:
+        d = m.to_dict()
+        d['vendor'] = m.vendor.vendor if m.vendor else None
+        d['machinetype'] = m.machinetype.machinetype if m.machinetype else None
+        data.append(d)
+
+    return paginated_response(data, page, per_page, total)
+
+
+@models_bp.route('/<int:model_id>', methods=['GET'])
+@jwt_required()
+def get_model(model_id: int):
+    """Get a single model."""
+    m = Model.query.get(model_id)
+
+    if not m:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Model with ID {model_id} not found',
+            http_code=404
+        )
+
+    data = m.to_dict()
+    data['vendor'] = m.vendor.to_dict() if m.vendor else None
+    data['machinetype'] = m.machinetype.to_dict() if m.machinetype else None
+
+    return success_response(data)
+
+
+@models_bp.route('', methods=['POST'])
+@jwt_required()
+def create_model():
+    """Create a new model."""
+    data = request.get_json()
+
+    if not data or not data.get('modelnumber'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'modelnumber is required')
+
+    # Check duplicate
+    existing = Model.query.filter_by(
+        modelnumber=data['modelnumber'],
+        vendorid=data.get('vendorid')
+    ).first()
+    if existing:
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Model '{data['modelnumber']}' already exists for this vendor",
+            http_code=409
+        )
+
+    m = Model(
+        modelnumber=data['modelnumber'],
+        vendorid=data.get('vendorid'),
+        machinetypeid=data.get('machinetypeid'),
+        description=data.get('description'),
+        imageurl=data.get('imageurl'),
+        documentationurl=data.get('documentationurl'),
+        notes=data.get('notes')
+    )
+
+    db.session.add(m)
+    db.session.commit()
+
+    return success_response(m.to_dict(), message='Model created', http_code=201)
+
+
+@models_bp.route('/<int:model_id>', methods=['PUT'])
+@jwt_required()
+def update_model(model_id: int):
+    """Update a model."""
+    m = Model.query.get(model_id)
+
+    if not m:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Model with ID {model_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    for key in ['modelnumber', 'vendorid', 'machinetypeid', 'description', 'imageurl', 'documentationurl', 'notes', 'isactive']:
+        if key in data:
+            setattr(m, key, data[key])
+
+    db.session.commit()
+    return success_response(m.to_dict(), message='Model updated')
+
+
+@models_bp.route('/<int:model_id>', methods=['DELETE'])
+@jwt_required()
+def delete_model(model_id: int):
+    """Delete (deactivate) a model."""
+    m = Model.query.get(model_id)
+
+    if not m:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Model with ID {model_id} not found',
+            http_code=404
+        )
+
+    m.isactive = False
+    db.session.commit()
+
+    return success_response(message='Model deleted')
diff --git a/shopdb/core/api/operatingsystems.py b/shopdb/core/api/operatingsystems.py
new file mode 100644
index 0000000..ec2221e
--- /dev/null
+++ b/shopdb/core/api/operatingsystems.py
@@ -0,0 +1,131 @@
+"""Operating Systems API endpoints - Full CRUD."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import OperatingSystem
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+operatingsystems_bp = Blueprint('operatingsystems', __name__)
+
+
+@operatingsystems_bp.route('', methods=['GET'])
+@jwt_required()
+def list_operatingsystems():
+    """List all operating systems."""
+    page, per_page = get_pagination_params(request)
+
+    query = OperatingSystem.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(OperatingSystem.isactive == True)
+
+    if search := request.args.get('search'):
+        query = query.filter(OperatingSystem.osname.ilike(f'%{search}%'))
+
+    query = query.order_by(OperatingSystem.osname)
+
+    items, total = paginate_query(query, page, per_page)
+    data = [os.to_dict() for os in items]
+
+    return paginated_response(data, page, per_page, total)
+
+
+@operatingsystems_bp.route('/<int:os_id>', methods=['GET'])
+@jwt_required()
+def get_operatingsystem(os_id: int):
+    """Get a single operating system."""
+    os = OperatingSystem.query.get(os_id)
+
+    if not os:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Operating system with ID {os_id} not found',
+            http_code=404
+        )
+
+    return success_response(os.to_dict())
+
+
+@operatingsystems_bp.route('', methods=['POST'])
+@jwt_required()
+def create_operatingsystem():
+    """Create a new operating system."""
+    data = request.get_json()
+
+    if not data or not data.get('osname'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'osname is required')
+
+    existing = OperatingSystem.query.filter_by(
+        osname=data['osname'],
+        osversion=data.get('osversion')
+    ).first()
+    if existing:
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Operating system '{data['osname']} {data.get('osversion', '')}' already exists",
+            http_code=409
+        )
+
+    os = OperatingSystem(
+        osname=data['osname'],
+        osversion=data.get('osversion'),
+        architecture=data.get('architecture'),
+        endoflife=data.get('endoflife')
+    )
+
+    db.session.add(os)
+    db.session.commit()
+
+    return success_response(os.to_dict(), message='Operating system created', http_code=201)
+
+
+@operatingsystems_bp.route('/<int:os_id>', methods=['PUT'])
+@jwt_required()
+def update_operatingsystem(os_id: int):
+    """Update an operating system."""
+    os = OperatingSystem.query.get(os_id)
+
+    if not os:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Operating system with ID {os_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    for key in ['osname', 'osversion', 'architecture', 'endoflife', 'isactive']:
+        if key in data:
+            setattr(os, key, data[key])
+
+    db.session.commit()
+    return success_response(os.to_dict(), message='Operating system updated')
+
+
+@operatingsystems_bp.route('/<int:os_id>', methods=['DELETE'])
+@jwt_required()
+def delete_operatingsystem(os_id: int):
+    """Delete (deactivate) an operating system."""
+    os = OperatingSystem.query.get(os_id)
+
+    if not os:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Operating system with ID {os_id} not found',
+            http_code=404
+        )
+
+    os.isactive = False
+    db.session.commit()
+
+    return success_response(message='Operating system deleted')
diff --git a/shopdb/core/api/pctypes.py b/shopdb/core/api/pctypes.py
new file mode 100644
index 0000000..8cdc14e
--- /dev/null
+++ b/shopdb/core/api/pctypes.py
@@ -0,0 +1,141 @@
+"""PC Types API endpoints - Full CRUD."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import PCType
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+pctypes_bp = Blueprint('pctypes', __name__)
+
+
+@pctypes_bp.route('', methods=['GET'])
+@jwt_required()
+def list_pctypes():
+    """List all PC types."""
+    page, per_page = get_pagination_params(request)
+
+    query = PCType.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(PCType.isactive == True)
+
+    if search := request.args.get('search'):
+        query = query.filter(PCType.pctype.ilike(f'%{search}%'))
+
+    query = query.order_by(PCType.pctype)
+
+    items, total = paginate_query(query, page, per_page)
+    data = [pt.to_dict() for pt in items]
+
+    return paginated_response(data, page, per_page, total)
+
+
+@pctypes_bp.route('/<int:type_id>', methods=['GET'])
+@jwt_required()
+def get_pctype(type_id: int):
+    """Get a single PC type."""
+    pt = PCType.query.get(type_id)
+
+    if not pt:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'PC type with ID {type_id} not found',
+            http_code=404
+        )
+
+    return success_response(pt.to_dict())
+
+
+@pctypes_bp.route('', methods=['POST'])
+@jwt_required()
+def create_pctype():
+    """Create a new PC type."""
+    data = request.get_json()
+
+    if not data or not data.get('pctype'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'pctype is required')
+
+    if PCType.query.filter_by(pctype=data['pctype']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"PC type '{data['pctype']}' already exists",
+            http_code=409
+        )
+
+    pt = PCType(
+        pctype=data['pctype'],
+        description=data.get('description')
+    )
+
+    db.session.add(pt)
+    db.session.commit()
+
+    return success_response(pt.to_dict(), message='PC type created', http_code=201)
+
+
+@pctypes_bp.route('/<int:type_id>', methods=['PUT'])
+@jwt_required()
+def update_pctype(type_id: int):
+    """Update a PC type."""
+    pt = PCType.query.get(type_id)
+
+    if not pt:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'PC type with ID {type_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if 'pctype' in data and data['pctype'] != pt.pctype:
+        if PCType.query.filter_by(pctype=data['pctype']).first():
+            return error_response(
+                ErrorCodes.CONFLICT,
+                f"PC type '{data['pctype']}' already exists",
+                http_code=409
+            )
+
+    for key in ['pctype', 'description', 'isactive']:
+        if key in data:
+            setattr(pt, key, data[key])
+
+    db.session.commit()
+    return success_response(pt.to_dict(), message='PC type updated')
+
+
+@pctypes_bp.route('/<int:type_id>', methods=['DELETE'])
+@jwt_required()
+def delete_pctype(type_id: int):
+    """Delete (deactivate) a PC type."""
+    pt = PCType.query.get(type_id)
+
+    if not pt:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'PC type with ID {type_id} not found',
+            http_code=404
+        )
+
+    from shopdb.core.models import Machine
+    if Machine.query.filter_by(pctypeid=type_id, isactive=True).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            'Cannot delete PC type: machines are using it',
+            http_code=409
+        )
+
+    pt.isactive = False
+    db.session.commit()
+
+    return success_response(message='PC type deleted')
diff --git a/shopdb/core/api/search.py b/shopdb/core/api/search.py
new file mode 100644
index 0000000..2e64a0a
--- /dev/null
+++ b/shopdb/core/api/search.py
@@ -0,0 +1,203 @@
+"""Global search API endpoint."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import (
+    Machine, Application, KnowledgeBase
+)
+from shopdb.utils.responses import success_response
+
+search_bp = Blueprint('search', __name__)
+
+
+@search_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def global_search():
+    """
+    Global search across multiple entity types.
+
+    Returns combined results from:
+    - Machines (equipment and PCs)
+    - Applications
+    - Knowledge Base articles
+    - Printers (if available)
+
+    Results are sorted by relevance score.
+    """
+    query = request.args.get('q', '').strip()
+
+    if not query or len(query) < 2:
+        return success_response({
+            'results': [],
+            'query': query,
+            'message': 'Search query must be at least 2 characters'
+        })
+
+    if len(query) > 200:
+        return success_response({
+            'results': [],
+            'query': query[:200],
+            'message': 'Search query too long'
+        })
+
+    results = []
+    search_term = f'%{query}%'
+
+    # Search Machines (Equipment and PCs)
+    machines = Machine.query.filter(
+        Machine.isactive == True,
+        db.or_(
+            Machine.machinenumber.ilike(search_term),
+            Machine.alias.ilike(search_term),
+            Machine.hostname.ilike(search_term),
+            Machine.serialnumber.ilike(search_term),
+            Machine.notes.ilike(search_term)
+        )
+    ).limit(10).all()
+
+    for m in machines:
+        # Determine type: PC, Printer, or Equipment
+        is_pc = m.pctypeid is not None
+        is_printer = m.is_printer
+
+        # Calculate relevance - exact matches score higher
+        relevance = 15
+        if m.machinenumber and query.lower() == m.machinenumber.lower():
+            relevance = 100
+        elif m.hostname and query.lower() == m.hostname.lower():
+            relevance = 100
+        elif m.alias and query.lower() in m.alias.lower():
+            relevance = 50
+
+        display_name = m.hostname if is_pc and m.hostname else m.machinenumber
+        if m.alias and not is_pc:
+            display_name = f"{m.machinenumber} ({m.alias})"
+
+        # Determine result type and URL
+        if is_printer:
+            result_type = 'printer'
+            url = f"/printers/{m.machineid}"
+        elif is_pc:
+            result_type = 'pc'
+            url = f"/pcs/{m.machineid}"
+        else:
+            result_type = 'machine'
+            url = f"/machines/{m.machineid}"
+
+        # Get location - prefer machine's own location, fall back to parent machine's location
+        location_name = None
+        if m.location:
+            location_name = m.location.locationname
+        elif m.parent_relationships:
+            # Check parent machines for location
+            for rel in m.parent_relationships:
+                if rel.parent_machine and rel.parent_machine.location:
+                    location_name = rel.parent_machine.location.locationname
+                    break
+
+        # Get machinetype from model (single source of truth)
+        mt = m.derived_machinetype
+        results.append({
+            'type': result_type,
+            'id': m.machineid,
+            'title': display_name,
+            'subtitle': mt.machinetype if mt else None,
+            'location': location_name,
+            'url': url,
+            'relevance': relevance
+        })
+
+    # Search Applications
+    apps = Application.query.filter(
+        Application.isactive == True,
+        db.or_(
+            Application.appname.ilike(search_term),
+            Application.appdescription.ilike(search_term)
+        )
+    ).limit(10).all()
+
+    for app in apps:
+        relevance = 20
+        if query.lower() == app.appname.lower():
+            relevance = 100
+        elif query.lower() in app.appname.lower():
+            relevance = 50
+
+        results.append({
+            'type': 'application',
+            'id': app.appid,
+            'title': app.appname,
+            'subtitle': app.appdescription[:100] if app.appdescription else None,
+            'url': f"/applications/{app.appid}",
+            'relevance': relevance
+        })
+
+    # Search Knowledge Base
+    kb_articles = KnowledgeBase.query.filter(
+        KnowledgeBase.isactive == True,
+        db.or_(
+            KnowledgeBase.shortdescription.ilike(search_term),
+            KnowledgeBase.keywords.ilike(search_term)
+        )
+    ).limit(20).all()
+
+    for kb in kb_articles:
+        # Weight by clicks and keyword match
+        relevance = 10 + (kb.clicks or 0) * 0.1
+        if kb.keywords and query.lower() in kb.keywords.lower():
+            relevance += 15
+
+        results.append({
+            'type': 'knowledgebase',
+            'id': kb.linkid,
+            'title': kb.shortdescription,
+            'subtitle': kb.application.appname if kb.application else None,
+            'url': f"/knowledgebase/{kb.linkid}",
+            'linkurl': kb.linkurl,
+            'relevance': relevance
+        })
+
+    # Search Printers (check if printers model exists)
+    try:
+        from shopdb.plugins.printers.models import Printer
+        printers = Printer.query.filter(
+            Printer.isactive == True,
+            db.or_(
+                Printer.printercsfname.ilike(search_term),
+                Printer.printerwindowsname.ilike(search_term),
+                Printer.serialnumber.ilike(search_term),
+                Printer.fqdn.ilike(search_term)
+            )
+        ).limit(10).all()
+
+        for p in printers:
+            relevance = 15
+            if p.printercsfname and query.lower() == p.printercsfname.lower():
+                relevance = 100
+
+            display_name = p.printercsfname or p.printerwindowsname or f"Printer #{p.printerid}"
+
+            results.append({
+                'type': 'printer',
+                'id': p.printerid,
+                'title': display_name,
+                'subtitle': p.printerwindowsname if p.printercsfname else None,
+                'url': f"/printers/{p.printerid}",
+                'relevance': relevance
+            })
+    except ImportError:
+        pass  # Printers plugin not installed
+
+    # Sort by relevance (highest first)
+    results.sort(key=lambda x: x['relevance'], reverse=True)
+
+    # Limit total results
+    results = results[:30]
+
+    return success_response({
+        'results': results,
+        'query': query,
+        'total': len(results)
+    })
diff --git a/shopdb/core/api/statuses.py b/shopdb/core/api/statuses.py
new file mode 100644
index 0000000..bd8e46d
--- /dev/null
+++ b/shopdb/core/api/statuses.py
@@ -0,0 +1,139 @@
+"""Machine Statuses API endpoints - Full CRUD."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import MachineStatus
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+statuses_bp = Blueprint('statuses', __name__)
+
+
+@statuses_bp.route('', methods=['GET'])
+@jwt_required(optional=True)
+def list_statuses():
+    """List all machine statuses."""
+    page, per_page = get_pagination_params(request)
+
+    query = MachineStatus.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(MachineStatus.isactive == True)
+
+    query = query.order_by(MachineStatus.status)
+
+    items, total = paginate_query(query, page, per_page)
+    data = [s.to_dict() for s in items]
+
+    return paginated_response(data, page, per_page, total)
+
+
+@statuses_bp.route('/<int:status_id>', methods=['GET'])
+@jwt_required(optional=True)
+def get_status(status_id: int):
+    """Get a single status."""
+    s = MachineStatus.query.get(status_id)
+
+    if not s:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Status with ID {status_id} not found',
+            http_code=404
+        )
+
+    return success_response(s.to_dict())
+
+
+@statuses_bp.route('', methods=['POST'])
+@jwt_required()
+def create_status():
+    """Create a new status."""
+    data = request.get_json()
+
+    if not data or not data.get('status'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'status is required')
+
+    if MachineStatus.query.filter_by(status=data['status']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Status '{data['status']}' already exists",
+            http_code=409
+        )
+
+    s = MachineStatus(
+        status=data['status'],
+        description=data.get('description'),
+        color=data.get('color')
+    )
+
+    db.session.add(s)
+    db.session.commit()
+
+    return success_response(s.to_dict(), message='Status created', http_code=201)
+
+
+@statuses_bp.route('/<int:status_id>', methods=['PUT'])
+@jwt_required()
+def update_status(status_id: int):
+    """Update a status."""
+    s = MachineStatus.query.get(status_id)
+
+    if not s:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Status with ID {status_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if 'status' in data and data['status'] != s.status:
+        if MachineStatus.query.filter_by(status=data['status']).first():
+            return error_response(
+                ErrorCodes.CONFLICT,
+                f"Status '{data['status']}' already exists",
+                http_code=409
+            )
+
+    for key in ['status', 'description', 'color', 'isactive']:
+        if key in data:
+            setattr(s, key, data[key])
+
+    db.session.commit()
+    return success_response(s.to_dict(), message='Status updated')
+
+
+@statuses_bp.route('/<int:status_id>', methods=['DELETE'])
+@jwt_required()
+def delete_status(status_id: int):
+    """Delete (deactivate) a status."""
+    s = MachineStatus.query.get(status_id)
+
+    if not s:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Status with ID {status_id} not found',
+            http_code=404
+        )
+
+    from shopdb.core.models import Machine
+    if Machine.query.filter_by(statusid=status_id, isactive=True).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            'Cannot delete status: machines are using it',
+            http_code=409
+        )
+
+    s.isactive = False
+    db.session.commit()
+
+    return success_response(message='Status deleted')
diff --git a/shopdb/core/api/vendors.py b/shopdb/core/api/vendors.py
new file mode 100644
index 0000000..10b6439
--- /dev/null
+++ b/shopdb/core/api/vendors.py
@@ -0,0 +1,137 @@
+"""Vendors API endpoints - Full CRUD."""
+
+from flask import Blueprint, request
+from flask_jwt_extended import jwt_required
+
+from shopdb.extensions import db
+from shopdb.core.models import Vendor
+from shopdb.utils.responses import (
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from shopdb.utils.pagination import get_pagination_params, paginate_query
+
+vendors_bp = Blueprint('vendors', __name__)
+
+
+@vendors_bp.route('', methods=['GET'])
+@jwt_required()
+def list_vendors():
+    """List all vendors."""
+    page, per_page = get_pagination_params(request)
+
+    query = Vendor.query
+
+    if request.args.get('active', 'true').lower() != 'false':
+        query = query.filter(Vendor.isactive == True)
+
+    if search := request.args.get('search'):
+        query = query.filter(Vendor.vendor.ilike(f'%{search}%'))
+
+    query = query.order_by(Vendor.vendor)
+
+    items, total = paginate_query(query, page, per_page)
+    data = [v.to_dict() for v in items]
+
+    return paginated_response(data, page, per_page, total)
+
+
+@vendors_bp.route('/<int:vendor_id>', methods=['GET'])
+@jwt_required()
+def get_vendor(vendor_id: int):
+    """Get a single vendor."""
+    v = Vendor.query.get(vendor_id)
+
+    if not v:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Vendor with ID {vendor_id} not found',
+            http_code=404
+        )
+
+    return success_response(v.to_dict())
+
+
+@vendors_bp.route('', methods=['POST'])
+@jwt_required()
+def create_vendor():
+    """Create a new vendor."""
+    data = request.get_json()
+
+    if not data or not data.get('vendor'):
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'vendor is required')
+
+    if Vendor.query.filter_by(vendor=data['vendor']).first():
+        return error_response(
+            ErrorCodes.CONFLICT,
+            f"Vendor '{data['vendor']}' already exists",
+            http_code=409
+        )
+
+    v = Vendor(
+        vendor=data['vendor'],
+        description=data.get('description'),
+        website=data.get('website'),
+        supportphone=data.get('supportphone'),
+        supportemail=data.get('supportemail'),
+        notes=data.get('notes')
+    )
+
+    db.session.add(v)
+    db.session.commit()
+
+    return success_response(v.to_dict(), message='Vendor created', http_code=201)
+
+
+@vendors_bp.route('/<int:vendor_id>', methods=['PUT'])
+@jwt_required()
+def update_vendor(vendor_id: int):
+    """Update a vendor."""
+    v = Vendor.query.get(vendor_id)
+
+    if not v:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Vendor with ID {vendor_id} not found',
+            http_code=404
+        )
+
+    data = request.get_json()
+    if not data:
+        return error_response(ErrorCodes.VALIDATION_ERROR, 'No data provided')
+
+    if 'vendor' in data and data['vendor'] != v.vendor:
+        if Vendor.query.filter_by(vendor=data['vendor']).first():
+            return error_response(
+                ErrorCodes.CONFLICT,
+                f"Vendor '{data['vendor']}' already exists",
+                http_code=409
+            )
+
+    for key in ['vendor', 'description', 'website', 'supportphone', 'supportemail', 'notes', 'isactive']:
+        if key in data:
+            setattr(v, key, data[key])
+
+    db.session.commit()
+    return success_response(v.to_dict(), message='Vendor updated')
+
+
+@vendors_bp.route('/<int:vendor_id>', methods=['DELETE'])
+@jwt_required()
+def delete_vendor(vendor_id: int):
+    """Delete (deactivate) a vendor."""
+    v = Vendor.query.get(vendor_id)
+
+    if not v:
+        return error_response(
+            ErrorCodes.NOT_FOUND,
+            f'Vendor with ID {vendor_id} not found',
+            http_code=404
+        )
+
+    v.isactive = False
+    db.session.commit()
+
+    return success_response(message='Vendor deleted')
diff --git a/shopdb/core/models/__init__.py b/shopdb/core/models/__init__.py
new file mode 100644
index 0000000..f465b91
--- /dev/null
+++ b/shopdb/core/models/__init__.py
@@ -0,0 +1,49 @@
+"""Core SQLAlchemy models."""
+
+from .base import BaseModel, SoftDeleteMixin, AuditMixin
+from .machine import Machine, MachineType, MachineStatus, PCType
+from .vendor import Vendor
+from .model import Model
+from .businessunit import BusinessUnit
+from .location import Location
+from .operatingsystem import OperatingSystem
+from .relationship import MachineRelationship, RelationshipType
+from .communication import Communication, CommunicationType
+from .user import User, Role
+from .application import Application, AppVersion, AppOwner, SupportTeam, InstalledApp
+from .knowledgebase import KnowledgeBase
+
+__all__ = [
+    # Base
+    'BaseModel',
+    'SoftDeleteMixin',
+    'AuditMixin',
+    # Machine
+    'Machine',
+    'MachineType',
+    'MachineStatus',
+    'PCType',
+    # Reference
+    'Vendor',
+    'Model',
+    'BusinessUnit',
+    'Location',
+    'OperatingSystem',
+    # Relationships
+    'MachineRelationship',
+    'RelationshipType',
+    # Communication
+    'Communication',
+    'CommunicationType',
+    # Auth
+    'User',
+    'Role',
+    # Applications
+    'Application',
+    'AppVersion',
+    'AppOwner',
+    'SupportTeam',
+    'InstalledApp',
+    # Knowledge Base
+    'KnowledgeBase',
+]
diff --git a/shopdb/core/models/application.py b/shopdb/core/models/application.py
new file mode 100644
index 0000000..5775349
--- /dev/null
+++ b/shopdb/core/models/application.py
@@ -0,0 +1,130 @@
+"""Application tracking models."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class AppOwner(BaseModel):
+    """Application owner/contact."""
+    __tablename__ = 'appowners'
+
+    appownerid = db.Column(db.Integer, primary_key=True)
+    appowner = db.Column(db.String(100), nullable=False)
+    sso = db.Column(db.String(50))
+    email = db.Column(db.String(100))
+
+    # Relationships
+    supportteams = db.relationship('SupportTeam', back_populates='owner', lazy='dynamic')
+
+    def __repr__(self):
+        return f"<AppOwner {self.appowner}>"
+
+
+class SupportTeam(BaseModel):
+    """Application support team."""
+    __tablename__ = 'supportteams'
+
+    supportteamid = db.Column(db.Integer, primary_key=True)
+    teamname = db.Column(db.String(100), nullable=False)
+    teamurl = db.Column(db.String(255))
+    appownerid = db.Column(db.Integer, db.ForeignKey('appowners.appownerid'))
+
+    # Relationships
+    owner = db.relationship('AppOwner', back_populates='supportteams')
+    applications = db.relationship('Application', back_populates='supportteam', lazy='dynamic')
+
+    def __repr__(self):
+        return f"<SupportTeam {self.teamname}>"
+
+
+class Application(BaseModel):
+    """Application catalog."""
+    __tablename__ = 'applications'
+
+    appid = db.Column(db.Integer, primary_key=True)
+    appname = db.Column(db.String(100), unique=True, nullable=False)
+    appdescription = db.Column(db.String(255))
+    supportteamid = db.Column(db.Integer, db.ForeignKey('supportteams.supportteamid'))
+    isinstallable = db.Column(db.Boolean, default=False)
+    applicationnotes = db.Column(db.Text)
+    installpath = db.Column(db.String(255))
+    applicationlink = db.Column(db.String(512))
+    documentationpath = db.Column(db.String(512))
+    ishidden = db.Column(db.Boolean, default=False)
+    isprinter = db.Column(db.Boolean, default=False)
+    islicenced = db.Column(db.Boolean, default=False)
+    image = db.Column(db.String(255))
+
+    # Relationships
+    supportteam = db.relationship('SupportTeam', back_populates='applications')
+    versions = db.relationship('AppVersion', back_populates='application', lazy='dynamic')
+    installed_on = db.relationship('InstalledApp', back_populates='application', lazy='dynamic')
+
+    def __repr__(self):
+        return f"<Application {self.appname}>"
+
+
+class AppVersion(BaseModel):
+    """Application version tracking."""
+    __tablename__ = 'appversions'
+
+    appversionid = db.Column(db.Integer, primary_key=True)
+    appid = db.Column(db.Integer, db.ForeignKey('applications.appid'), nullable=False)
+    version = db.Column(db.String(50), nullable=False)
+    releasedate = db.Column(db.Date)
+    notes = db.Column(db.String(255))
+    dateadded = db.Column(db.DateTime, default=db.func.now())
+
+    # Relationships
+    application = db.relationship('Application', back_populates='versions')
+    installations = db.relationship('InstalledApp', back_populates='appversion', lazy='dynamic')
+
+    # Unique constraint on app + version
+    __table_args__ = (
+        db.UniqueConstraint('appid', 'version', name='uq_app_version'),
+    )
+
+    def __repr__(self):
+        return f"<AppVersion {self.application.appname if self.application else self.appid} v{self.version}>"
+
+
+class InstalledApp(db.Model):
+    """Junction table for applications installed on machines (PCs)."""
+    __tablename__ = 'installedapps'
+
+    id = db.Column(db.Integer, primary_key=True)
+    machineid = db.Column(db.Integer, db.ForeignKey('machines.machineid'), nullable=False)
+    appid = db.Column(db.Integer, db.ForeignKey('applications.appid'), nullable=False)
+    appversionid = db.Column(db.Integer, db.ForeignKey('appversions.appversionid'))
+    isactive = db.Column(db.Boolean, default=True, nullable=False)
+    installeddate = db.Column(db.DateTime, default=db.func.now())
+
+    # Relationships
+    machine = db.relationship('Machine', back_populates='installedapps')
+    application = db.relationship('Application', back_populates='installed_on')
+    appversion = db.relationship('AppVersion', back_populates='installations')
+
+    # Unique constraint - one app per machine (can have different versions over time)
+    __table_args__ = (
+        db.UniqueConstraint('machineid', 'appid', name='uq_machine_app'),
+    )
+
+    def to_dict(self):
+        """Convert to dictionary."""
+        return {
+            'id': self.id,
+            'machineid': self.machineid,
+            'appid': self.appid,
+            'appversionid': self.appversionid,
+            'isactive': self.isactive,
+            'installeddate': self.installeddate.isoformat() + 'Z' if self.installeddate else None,
+            'application': {
+                'appid': self.application.appid,
+                'appname': self.application.appname,
+                'appdescription': self.application.appdescription,
+            } if self.application else None,
+            'version': self.appversion.version if self.appversion else None
+        }
+
+    def __repr__(self):
+        return f"<InstalledApp machine={self.machineid} app={self.appid}>"
diff --git a/shopdb/core/models/base.py b/shopdb/core/models/base.py
new file mode 100644
index 0000000..f91176c
--- /dev/null
+++ b/shopdb/core/models/base.py
@@ -0,0 +1,66 @@
+"""Base model class with common fields."""
+
+from datetime import datetime
+from shopdb.extensions import db
+
+
+class BaseModel(db.Model):
+    """
+    Abstract base model with common fields.
+    All models should inherit from this.
+    """
+    __abstract__ = True
+
+    createddate = db.Column(
+        db.DateTime,
+        default=datetime.utcnow,
+        nullable=False
+    )
+    modifieddate = db.Column(
+        db.DateTime,
+        default=datetime.utcnow,
+        onupdate=datetime.utcnow,
+        nullable=False
+    )
+    isactive = db.Column(db.Boolean, default=True, nullable=False)
+
+    def to_dict(self):
+        """Convert model to dictionary."""
+        result = {}
+        for c in self.__table__.columns:
+            value = getattr(self, c.name)
+            if isinstance(value, datetime):
+                value = value.isoformat() + 'Z'
+            result[c.name] = value
+        return result
+
+    def update(self, **kwargs):
+        """Update model attributes."""
+        for key, value in kwargs.items():
+            if hasattr(self, key):
+                setattr(self, key, value)
+
+    @classmethod
+    def get_active(cls):
+        """Return query for active records only."""
+        return cls.query.filter_by(isactive=True)
+
+
+class SoftDeleteMixin:
+    """Mixin for soft delete functionality."""
+
+    deleteddate = db.Column(db.DateTime, nullable=True)
+    deletedby = db.Column(db.String(100), nullable=True)
+
+    def soft_delete(self, deleted_by: str = None):
+        """Mark record as deleted."""
+        self.isactive = False
+        self.deleteddate = datetime.utcnow()
+        self.deletedby = deleted_by
+
+
+class AuditMixin:
+    """Mixin for audit fields."""
+
+    createdby = db.Column(db.String(100), nullable=True)
+    modifiedby = db.Column(db.String(100), nullable=True)
diff --git a/shopdb/core/models/businessunit.py b/shopdb/core/models/businessunit.py
new file mode 100644
index 0000000..3f97163
--- /dev/null
+++ b/shopdb/core/models/businessunit.py
@@ -0,0 +1,31 @@
+"""Business Unit model."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class BusinessUnit(BaseModel):
+    """Business unit / department model."""
+    __tablename__ = 'businessunits'
+
+    businessunitid = db.Column(db.Integer, primary_key=True)
+    businessunit = db.Column(db.String(100), unique=True, nullable=False)
+    code = db.Column(db.String(20), unique=True, comment='Short code')
+    description = db.Column(db.Text)
+
+    # Optional parent for hierarchy
+    parentid = db.Column(
+        db.Integer,
+        db.ForeignKey('businessunits.businessunitid'),
+        nullable=True
+    )
+
+    # Self-referential relationship for hierarchy
+    parent = db.relationship(
+        'BusinessUnit',
+        remote_side=[businessunitid],
+        backref='children'
+    )
+
+    def __repr__(self):
+        return f"<BusinessUnit {self.businessunit}>"
diff --git a/shopdb/core/models/communication.py b/shopdb/core/models/communication.py
new file mode 100644
index 0000000..8e2acea
--- /dev/null
+++ b/shopdb/core/models/communication.py
@@ -0,0 +1,90 @@
+"""Communication/network interface models."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class CommunicationType(BaseModel):
+    """Types of communication interfaces."""
+    __tablename__ = 'communicationtypes'
+
+    comtypeid = db.Column(db.Integer, primary_key=True)
+    comtype = db.Column(db.String(50), unique=True, nullable=False)
+    description = db.Column(db.Text)
+
+    # Types: IP, Serial, USB, VNC, FTP, DNC, Parallel, Network Interface
+
+    def __repr__(self):
+        return f"<CommunicationType {self.comtype}>"
+
+
+class Communication(BaseModel):
+    """
+    Communication interface for a machine.
+    Stores network config, serial settings, etc.
+    """
+    __tablename__ = 'communications'
+
+    communicationid = db.Column(db.Integer, primary_key=True)
+
+    machineid = db.Column(
+        db.Integer,
+        db.ForeignKey('machines.machineid'),
+        nullable=False
+    )
+    comtypeid = db.Column(
+        db.Integer,
+        db.ForeignKey('communicationtypes.comtypeid'),
+        nullable=False
+    )
+
+    # Network configuration (for IP type)
+    ipaddress = db.Column(db.String(50))
+    subnetmask = db.Column(db.String(50))
+    gateway = db.Column(db.String(50))
+    dns1 = db.Column(db.String(50))
+    dns2 = db.Column(db.String(50))
+    macaddress = db.Column(db.String(50))
+    isdhcp = db.Column(db.Boolean, default=False)
+
+    # Serial configuration (for Serial type)
+    comport = db.Column(db.String(20))
+    baudrate = db.Column(db.Integer)
+    databits = db.Column(db.Integer)
+    stopbits = db.Column(db.String(10))
+    parity = db.Column(db.String(20))
+    flowcontrol = db.Column(db.String(20))
+
+    # VNC/FTP configuration
+    port = db.Column(db.Integer)
+    username = db.Column(db.String(100))
+    # Note: passwords should not be stored here - use secure vault
+
+    # DNC configuration
+    pathname = db.Column(db.String(255))
+    pathname2 = db.Column(db.String(255), comment='Secondary path for dualpath')
+
+    # Flags
+    isprimary = db.Column(
+        db.Boolean,
+        default=False,
+        comment='Primary communication method'
+    )
+    ismachinenetwork = db.Column(
+        db.Boolean,
+        default=False,
+        comment='On machine network vs office network'
+    )
+
+    notes = db.Column(db.Text)
+
+    # Relationships
+    comtype = db.relationship('CommunicationType', backref='communications')
+
+    __table_args__ = (
+        db.Index('idx_comm_machine', 'machineid'),
+        db.Index('idx_comm_ip', 'ipaddress'),
+    )
+
+    def __repr__(self):
+        return f"<Communication {self.machineid}:{self.comtype.comtype if self.comtype else 'Unknown'}>"
diff --git a/shopdb/core/models/knowledgebase.py b/shopdb/core/models/knowledgebase.py
new file mode 100644
index 0000000..316b4e9
--- /dev/null
+++ b/shopdb/core/models/knowledgebase.py
@@ -0,0 +1,27 @@
+"""Knowledge Base models."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class KnowledgeBase(BaseModel):
+    """Knowledge Base article linking to external resources."""
+    __tablename__ = 'knowledgebase'
+
+    linkid = db.Column(db.Integer, primary_key=True)
+    appid = db.Column(db.Integer, db.ForeignKey('applications.appid'))
+    shortdescription = db.Column(db.String(500), nullable=False)
+    linkurl = db.Column(db.String(2000))
+    keywords = db.Column(db.String(500))
+    clicks = db.Column(db.Integer, default=0)
+    lastupdated = db.Column(db.DateTime, default=db.func.now(), onupdate=db.func.now())
+
+    # Relationships
+    application = db.relationship('Application', backref=db.backref('knowledgebase_articles', lazy='dynamic'))
+
+    def __repr__(self):
+        return f"<KnowledgeBase {self.linkid}: {self.shortdescription[:50] if self.shortdescription else 'No desc'}>"
+
+    def increment_clicks(self):
+        """Increment click counter."""
+        self.clicks = (self.clicks or 0) + 1
diff --git a/shopdb/core/models/location.py b/shopdb/core/models/location.py
new file mode 100644
index 0000000..c2d1277
--- /dev/null
+++ b/shopdb/core/models/location.py
@@ -0,0 +1,24 @@
+"""Location model."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class Location(BaseModel):
+    """Physical location model."""
+    __tablename__ = 'locations'
+
+    locationid = db.Column(db.Integer, primary_key=True)
+    locationname = db.Column(db.String(100), unique=True, nullable=False)
+    building = db.Column(db.String(100))
+    floor = db.Column(db.String(50))
+    room = db.Column(db.String(50))
+    description = db.Column(db.Text)
+
+    # Map configuration
+    mapimage = db.Column(db.String(500), comment='Path to floor map image')
+    mapwidth = db.Column(db.Integer)
+    mapheight = db.Column(db.Integer)
+
+    def __repr__(self):
+        return f"<Location {self.locationname}>"
diff --git a/shopdb/core/models/machine.py b/shopdb/core/models/machine.py
new file mode 100644
index 0000000..f49c306
--- /dev/null
+++ b/shopdb/core/models/machine.py
@@ -0,0 +1,252 @@
+"""Unified Machine model - combines equipment and PCs."""
+
+from shopdb.extensions import db
+from .base import BaseModel, SoftDeleteMixin, AuditMixin
+
+
+class MachineType(BaseModel):
+    """
+    Machine type classification.
+    Categories: Equipment, PC, Network, Printer
+    """
+    __tablename__ = 'machinetypes'
+
+    machinetypeid = db.Column(db.Integer, primary_key=True)
+    machinetype = db.Column(db.String(100), unique=True, nullable=False)
+    category = db.Column(
+        db.String(50),
+        nullable=False,
+        default='Equipment',
+        comment='Equipment, PC, Network, or Printer'
+    )
+    description = db.Column(db.Text)
+    icon = db.Column(db.String(50), comment='Icon name for UI')
+
+    def __repr__(self):
+        return f"<MachineType {self.machinetype}>"
+
+
+class MachineStatus(BaseModel):
+    """Machine status options."""
+    __tablename__ = 'machinestatuses'
+
+    statusid = db.Column(db.Integer, primary_key=True)
+    status = db.Column(db.String(50), unique=True, nullable=False)
+    description = db.Column(db.Text)
+    color = db.Column(db.String(20), comment='CSS color for UI')
+
+    def __repr__(self):
+        return f"<MachineStatus {self.status}>"
+
+
+class PCType(BaseModel):
+    """
+    PC type classification for more specific PC categorization.
+    Examples: Shopfloor PC, Engineer Workstation, CMM PC, etc.
+    """
+    __tablename__ = 'pctypes'
+
+    pctypeid = db.Column(db.Integer, primary_key=True)
+    pctype = db.Column(db.String(100), unique=True, nullable=False)
+    description = db.Column(db.Text)
+
+    def __repr__(self):
+        return f"<PCType {self.pctype}>"
+
+
+class Machine(BaseModel, SoftDeleteMixin, AuditMixin):
+    """
+    Unified machine model for all asset types.
+
+    Machine types can be:
+    - CNC machines, CMMs, EDMs, etc. (manufacturing equipment)
+    - PCs (shopfloor PCs, engineer workstations, etc.)
+    - Network devices (servers, switches, etc.) - if network_devices plugin not used
+
+    The machinetype.category field distinguishes between types.
+    """
+    __tablename__ = 'machines'
+
+    machineid = db.Column(db.Integer, primary_key=True)
+
+    # Identification
+    machinenumber = db.Column(
+        db.String(50),
+        unique=True,
+        nullable=False,
+        index=True,
+        comment='Business identifier (e.g., CMM01, G5QX1GT3ESF)'
+    )
+    alias = db.Column(
+        db.String(100),
+        comment='Friendly name'
+    )
+    hostname = db.Column(
+        db.String(100),
+        index=True,
+        comment='Network hostname (for PCs)'
+    )
+    serialnumber = db.Column(
+        db.String(100),
+        index=True,
+        comment='Hardware serial number'
+    )
+
+    # Classification
+    machinetypeid = db.Column(
+        db.Integer,
+        db.ForeignKey('machinetypes.machinetypeid'),
+        nullable=False
+    )
+    pctypeid = db.Column(
+        db.Integer,
+        db.ForeignKey('pctypes.pctypeid'),
+        nullable=True,
+        comment='Set for PCs, NULL for equipment'
+    )
+    businessunitid = db.Column(
+        db.Integer,
+        db.ForeignKey('businessunits.businessunitid'),
+        nullable=True
+    )
+    modelnumberid = db.Column(
+        db.Integer,
+        db.ForeignKey('models.modelnumberid'),
+        nullable=True
+    )
+    vendorid = db.Column(
+        db.Integer,
+        db.ForeignKey('vendors.vendorid'),
+        nullable=True
+    )
+
+    # Status
+    statusid = db.Column(
+        db.Integer,
+        db.ForeignKey('machinestatuses.statusid'),
+        default=1,
+        comment='In Use, Spare, Retired, etc.'
+    )
+
+    # Location and mapping
+    locationid = db.Column(
+        db.Integer,
+        db.ForeignKey('locations.locationid'),
+        nullable=True
+    )
+    mapleft = db.Column(db.Integer, comment='X coordinate on floor map')
+    maptop = db.Column(db.Integer, comment='Y coordinate on floor map')
+    islocationonly = db.Column(
+        db.Boolean,
+        default=False,
+        comment='Virtual location marker (not actual machine)'
+    )
+
+    # PC-specific fields (nullable for non-PC machines)
+    osid = db.Column(
+        db.Integer,
+        db.ForeignKey('operatingsystems.osid'),
+        nullable=True
+    )
+    loggedinuser = db.Column(db.String(100), nullable=True)
+    lastreporteddate = db.Column(db.DateTime, nullable=True)
+    lastboottime = db.Column(db.DateTime, nullable=True)
+
+    # Features/flags
+    isvnc = db.Column(db.Boolean, default=False, comment='VNC remote access enabled')
+    iswinrm = db.Column(db.Boolean, default=False, comment='WinRM enabled')
+    isshopfloor = db.Column(db.Boolean, default=False, comment='Shopfloor PC')
+    requiresmanualconfig = db.Column(
+        db.Boolean,
+        default=False,
+        comment='Multi-PC machine needs manual configuration'
+    )
+
+    # Notes
+    notes = db.Column(db.Text, nullable=True)
+
+    # Relationships
+    machinetype = db.relationship('MachineType', backref='machines')
+    pctype = db.relationship('PCType', backref='machines')
+    businessunit = db.relationship('BusinessUnit', backref='machines')
+    model = db.relationship('Model', backref='machines')
+    vendor = db.relationship('Vendor', backref='machines')
+    status = db.relationship('MachineStatus', backref='machines')
+    location = db.relationship('Location', backref='machines')
+    operatingsystem = db.relationship('OperatingSystem', backref='machines')
+
+    # Communications (one-to-many)
+    communications = db.relationship(
+        'Communication',
+        backref='machine',
+        cascade='all, delete-orphan',
+        lazy='dynamic'
+    )
+
+    # Installed applications (for PCs)
+    installedapps = db.relationship(
+        'InstalledApp',
+        back_populates='machine',
+        cascade='all, delete-orphan',
+        lazy='dynamic'
+    )
+
+    # Indexes
+    __table_args__ = (
+        db.Index('idx_machine_type_bu', 'machinetypeid', 'businessunitid'),
+        db.Index('idx_machine_location', 'locationid'),
+        db.Index('idx_machine_active', 'isactive'),
+        db.Index('idx_machine_hostname', 'hostname'),
+    )
+
+    def __repr__(self):
+        return f"<Machine {self.machinenumber}>"
+
+    @property
+    def display_name(self):
+        """Get display name (alias if set, otherwise machinenumber)."""
+        return self.alias or self.machinenumber
+
+    @property
+    def derived_machinetype(self):
+        """Get machinetype from model (single source of truth)."""
+        if self.model and self.model.machinetype:
+            return self.model.machinetype
+        return None
+
+    @property
+    def is_pc(self):
+        """Check if this machine is a PC type."""
+        mt = self.derived_machinetype
+        return mt.category == 'PC' if mt else False
+
+    @property
+    def is_equipment(self):
+        """Check if this machine is equipment."""
+        mt = self.derived_machinetype
+        return mt.category == 'Equipment' if mt else False
+
+    @property
+    def is_network_device(self):
+        """Check if this machine is a network device."""
+        mt = self.derived_machinetype
+        return mt.category == 'Network' if mt else False
+
+    @property
+    def is_printer(self):
+        """Check if this machine is a printer."""
+        mt = self.derived_machinetype
+        return mt.category == 'Printer' if mt else False
+
+    @property
+    def primary_ip(self):
+        """Get primary IP address from communications."""
+        comm = self.communications.filter_by(
+            isprimary=True,
+            comtypeid=1  # IP type
+        ).first()
+        if comm:
+            return comm.ipaddress
+        # Fall back to any IP
+        comm = self.communications.filter_by(comtypeid=1).first()
+        return comm.ipaddress if comm else None
diff --git a/shopdb/core/models/model.py b/shopdb/core/models/model.py
new file mode 100644
index 0000000..b95e9ab
--- /dev/null
+++ b/shopdb/core/models/model.py
@@ -0,0 +1,43 @@
+"""Model (equipment model number) model."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class Model(BaseModel):
+    """Equipment/device model information."""
+    __tablename__ = 'models'
+
+    modelnumberid = db.Column(db.Integer, primary_key=True)
+    modelnumber = db.Column(db.String(100), nullable=False)
+
+    # Link to machine type (what kind of equipment this model is for)
+    machinetypeid = db.Column(
+        db.Integer,
+        db.ForeignKey('machinetypes.machinetypeid'),
+        nullable=True
+    )
+
+    # Link to vendor/manufacturer
+    vendorid = db.Column(
+        db.Integer,
+        db.ForeignKey('vendors.vendorid'),
+        nullable=True
+    )
+
+    description = db.Column(db.Text)
+    imageurl = db.Column(db.String(500), comment='URL to product image')
+    documentationurl = db.Column(db.String(500), comment='URL to documentation')
+    notes = db.Column(db.Text)
+
+    # Relationships
+    machinetype = db.relationship('MachineType', backref='models')
+    vendor = db.relationship('Vendor', backref='models')
+
+    # Unique constraint on modelnumber + vendor
+    __table_args__ = (
+        db.UniqueConstraint('modelnumber', 'vendorid', name='uq_model_vendor'),
+    )
+
+    def __repr__(self):
+        return f"<Model {self.modelnumber}>"
diff --git a/shopdb/core/models/operatingsystem.py b/shopdb/core/models/operatingsystem.py
new file mode 100644
index 0000000..7bb851f
--- /dev/null
+++ b/shopdb/core/models/operatingsystem.py
@@ -0,0 +1,22 @@
+"""Operating System model."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class OperatingSystem(BaseModel):
+    """Operating system model."""
+    __tablename__ = 'operatingsystems'
+
+    osid = db.Column(db.Integer, primary_key=True)
+    osname = db.Column(db.String(100), nullable=False)
+    osversion = db.Column(db.String(50))
+    architecture = db.Column(db.String(20), comment='x86, x64, ARM')
+    endoflife = db.Column(db.Date, comment='End of support date')
+
+    __table_args__ = (
+        db.UniqueConstraint('osname', 'osversion', name='uq_os_name_version'),
+    )
+
+    def __repr__(self):
+        return f"<OperatingSystem {self.osname} {self.osversion}>"
diff --git a/shopdb/core/models/relationship.py b/shopdb/core/models/relationship.py
new file mode 100644
index 0000000..56d2610
--- /dev/null
+++ b/shopdb/core/models/relationship.py
@@ -0,0 +1,77 @@
+"""Machine relationship models."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class RelationshipType(BaseModel):
+    """Types of relationships between machines."""
+    __tablename__ = 'relationshiptypes'
+
+    relationshiptypeid = db.Column(db.Integer, primary_key=True)
+    relationshiptype = db.Column(db.String(50), unique=True, nullable=False)
+    description = db.Column(db.Text)
+
+    # Example types:
+    # - "Controls" (PC controls Equipment)
+    # - "Dualpath" (Redundant path partner)
+    # - "Backup" (Backup machine)
+
+    def __repr__(self):
+        return f"<RelationshipType {self.relationshiptype}>"
+
+
+class MachineRelationship(BaseModel):
+    """
+    Relationships between machines.
+
+    Examples:
+    - PC controls CNC machine
+    - Two CNCs are dualpath partners
+    """
+    __tablename__ = 'machinerelationships'
+
+    relationshipid = db.Column(db.Integer, primary_key=True)
+
+    parentmachineid = db.Column(
+        db.Integer,
+        db.ForeignKey('machines.machineid'),
+        nullable=False
+    )
+    childmachineid = db.Column(
+        db.Integer,
+        db.ForeignKey('machines.machineid'),
+        nullable=False
+    )
+    relationshiptypeid = db.Column(
+        db.Integer,
+        db.ForeignKey('relationshiptypes.relationshiptypeid'),
+        nullable=False
+    )
+
+    notes = db.Column(db.Text)
+
+    # Relationships
+    parent_machine = db.relationship(
+        'Machine',
+        foreign_keys=[parentmachineid],
+        backref='child_relationships'
+    )
+    child_machine = db.relationship(
+        'Machine',
+        foreign_keys=[childmachineid],
+        backref='parent_relationships'
+    )
+    relationship_type = db.relationship('RelationshipType', backref='relationships')
+
+    __table_args__ = (
+        db.UniqueConstraint(
+            'parentmachineid',
+            'childmachineid',
+            'relationshiptypeid',
+            name='uq_machine_relationship'
+        ),
+    )
+
+    def __repr__(self):
+        return f"<MachineRelationship {self.parentmachineid} -> {self.childmachineid}>"
diff --git a/shopdb/core/models/user.py b/shopdb/core/models/user.py
new file mode 100644
index 0000000..31f8e73
--- /dev/null
+++ b/shopdb/core/models/user.py
@@ -0,0 +1,73 @@
+"""User and authentication models."""
+
+from datetime import datetime
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+# Association table for user roles (many-to-many)
+userroles = db.Table(
+    'userroles',
+    db.Column('userid', db.Integer, db.ForeignKey('users.userid'), primary_key=True),
+    db.Column('roleid', db.Integer, db.ForeignKey('roles.roleid'), primary_key=True)
+)
+
+
+class Role(BaseModel):
+    """User role model."""
+    __tablename__ = 'roles'
+
+    roleid = db.Column(db.Integer, primary_key=True)
+    rolename = db.Column(db.String(50), unique=True, nullable=False)
+    description = db.Column(db.Text)
+
+    def __repr__(self):
+        return f"<Role {self.rolename}>"
+
+
+class User(BaseModel):
+    """User model for authentication."""
+    __tablename__ = 'users'
+
+    userid = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(100), unique=True, nullable=False, index=True)
+    email = db.Column(db.String(255), unique=True, nullable=False)
+    passwordhash = db.Column(db.String(255), nullable=False)
+
+    # Profile
+    firstname = db.Column(db.String(100))
+    lastname = db.Column(db.String(100))
+
+    # Status
+    lastlogindate = db.Column(db.DateTime)
+    failedlogins = db.Column(db.Integer, default=0)
+    lockeduntil = db.Column(db.DateTime)
+
+    # Relationships
+    roles = db.relationship(
+        'Role',
+        secondary=userroles,
+        backref=db.backref('users', lazy='dynamic')
+    )
+
+    def __repr__(self):
+        return f"<User {self.username}>"
+
+    @property
+    def islocked(self):
+        """Check if account is locked."""
+        if self.lockeduntil:
+            return datetime.utcnow() < self.lockeduntil
+        return False
+
+    def hasrole(self, rolename: str) -> bool:
+        """Check if user has a specific role."""
+        return any(r.rolename == rolename for r in self.roles)
+
+    def getpermissions(self) -> list:
+        """Get list of permission names from roles."""
+        # Simple role-based permissions
+        perms = []
+        for role in self.roles:
+            perms.append(role.rolename)
+        return perms
diff --git a/shopdb/core/models/vendor.py b/shopdb/core/models/vendor.py
new file mode 100644
index 0000000..4653288
--- /dev/null
+++ b/shopdb/core/models/vendor.py
@@ -0,0 +1,20 @@
+"""Vendor model."""
+
+from shopdb.extensions import db
+from .base import BaseModel
+
+
+class Vendor(BaseModel):
+    """Vendor/Manufacturer model."""
+    __tablename__ = 'vendors'
+
+    vendorid = db.Column(db.Integer, primary_key=True)
+    vendor = db.Column(db.String(100), unique=True, nullable=False)
+    description = db.Column(db.Text)
+    website = db.Column(db.String(255))
+    supportphone = db.Column(db.String(50))
+    supportemail = db.Column(db.String(100))
+    notes = db.Column(db.Text)
+
+    def __repr__(self):
+        return f"<Vendor {self.vendor}>"
diff --git a/shopdb/core/schemas/__init__.py b/shopdb/core/schemas/__init__.py
new file mode 100644
index 0000000..3760951
--- /dev/null
+++ b/shopdb/core/schemas/__init__.py
@@ -0,0 +1 @@
+"""Core Marshmallow schemas."""
diff --git a/shopdb/core/services/__init__.py b/shopdb/core/services/__init__.py
new file mode 100644
index 0000000..0791aaa
--- /dev/null
+++ b/shopdb/core/services/__init__.py
@@ -0,0 +1 @@
+"""Core services."""
diff --git a/shopdb/exceptions.py b/shopdb/exceptions.py
new file mode 100644
index 0000000..657fba9
--- /dev/null
+++ b/shopdb/exceptions.py
@@ -0,0 +1,54 @@
+"""Custom exceptions for ShopDB."""
+
+
+class ShopDBException(Exception):
+    """Base exception for ShopDB."""
+
+    def __init__(self, message: str, code: str = None, details: dict = None):
+        super().__init__(message)
+        self.message = message
+        self.code = code or 'SHOPDB_ERROR'
+        self.details = details or {}
+
+
+class ValidationError(ShopDBException):
+    """Validation error."""
+
+    def __init__(self, message: str, details: dict = None):
+        super().__init__(message, 'VALIDATION_ERROR', details)
+
+
+class NotFoundError(ShopDBException):
+    """Resource not found error."""
+
+    def __init__(self, resource: str, identifier):
+        message = f"{resource} with ID {identifier} not found"
+        super().__init__(message, 'NOT_FOUND', {'resource': resource, 'id': identifier})
+
+
+class AuthenticationError(ShopDBException):
+    """Authentication error."""
+
+    def __init__(self, message: str = "Authentication required"):
+        super().__init__(message, 'UNAUTHORIZED')
+
+
+class AuthorizationError(ShopDBException):
+    """Authorization error."""
+
+    def __init__(self, message: str = "Permission denied"):
+        super().__init__(message, 'FORBIDDEN')
+
+
+class ConflictError(ShopDBException):
+    """Conflict error (e.g., duplicate entry)."""
+
+    def __init__(self, message: str, details: dict = None):
+        super().__init__(message, 'CONFLICT', details)
+
+
+class PluginError(ShopDBException):
+    """Plugin-related error."""
+
+    def __init__(self, message: str, plugin_name: str = None):
+        super().__init__(message, 'PLUGIN_ERROR', {'plugin': plugin_name})
diff --git a/shopdb/extensions.py b/shopdb/extensions.py
new file mode 100644
index 0000000..f1eee9a
--- /dev/null
+++ b/shopdb/extensions.py
@@ -0,0 +1,25 @@
+"""Flask extensions initialization."""
+
+from flask_sqlalchemy import SQLAlchemy
+from flask_migrate import Migrate
+from flask_jwt_extended import JWTManager
+from flask_cors import CORS
+from flask_marshmallow import Marshmallow
+
+# Initialize extensions without app
+db = SQLAlchemy()
+migrate = Migrate()
+jwt = JWTManager()
+cors = CORS()
+ma = Marshmallow()
+
+
+def init_extensions(app):
+    """Initialize all Flask extensions with app."""
+    db.init_app(app)
+    migrate.init_app(app, db)
+    jwt.init_app(app)
+    cors.init_app(app, resources={
+        r"/api/*": {"origins": app.config.get('CORS_ORIGINS', '*')}
+    })
+    ma.init_app(app)
diff --git a/shopdb/plugins/__init__.py b/shopdb/plugins/__init__.py
new file mode 100644
index 0000000..c468218
--- /dev/null
+++ b/shopdb/plugins/__init__.py
@@ -0,0 +1,276 @@
+"""Plugin manager - main entry point for plugin system."""
+
+from pathlib import Path
+from typing import Dict, List, Optional
+from flask import Flask
+import logging
+
+from .base import BasePlugin, PluginMeta
+from .registry import PluginRegistry, PluginState
+from .loader import PluginLoader
+from .migrations import PluginMigrationManager
+
+logger = logging.getLogger(__name__)
+
+__all__ = [
+    'PluginManager',
+    'BasePlugin',
+    'PluginMeta',
+    'PluginRegistry',
+    'PluginState',
+    'plugin_manager'
+]
+
+
+class PluginManager:
+    """
+    Central manager for all plugin operations.
+
+    Usage:
+        plugin_manager = PluginManager()
+        plugin_manager.init_app(app, db)
+
+        # In CLI:
+        plugin_manager.install_plugin('printers')
+    """
+
+    def __init__(self):
+        self.registry: Optional[PluginRegistry] = None
+        self.loader: Optional[PluginLoader] = None
+        self.migration_manager: Optional[PluginMigrationManager] = None
+        self._app: Optional[Flask] = None
+        self._db = None
+
+    def init_app(self, app: Flask, db) -> None:
+        """Initialize plugin manager with Flask app."""
+        self._app = app
+        self._db = db
+
+        # Setup paths
+        instance_path = Path(app.instance_path)
+        plugins_dir = Path(app.root_path).parent / 'plugins'
+
+        # Initialize components
+        self.registry = PluginRegistry(instance_path / 'plugins.json')
+        self.loader = PluginLoader(plugins_dir, self.registry)
+        self.migration_manager = PluginMigrationManager(
+            plugins_dir,
+            app.config.get('SQLALCHEMY_DATABASE_URI')
+        )
+
+        # Load enabled plugins
+        self._load_enabled_plugins()
+
+        # Store on app for access
+        app.extensions['plugin_manager'] = self
+
+    def _load_enabled_plugins(self) -> None:
+        """Load and register all enabled plugins."""
+        plugins = self.loader.load_enabled_plugins(self._app, self._db)
+
+        for name, plugin in plugins.items():
+            self._register_plugin_components(plugin)
+
+    def _register_plugin_components(self, plugin: BasePlugin) -> None:
+        """Register plugin's blueprint, models, CLI commands, etc."""
+        # Register blueprint
+        blueprint = plugin.get_blueprint()
+        if blueprint:
+            self._app.register_blueprint(
+                blueprint,
+                url_prefix=plugin.meta.api_prefix
+            )
+            logger.debug(f"Registered blueprint: {plugin.meta.api_prefix}")
+
+        # Register CLI commands
+        for cmd in plugin.get_cli_commands():
+            self._app.cli.add_command(cmd)
+
+    def discover_available(self) -> List[Dict]:
+        """
+        Get list of all available plugins (installed or not).
+        Returns list of plugin info dicts.
+        """
+        available = []
+
+        for name in self.loader.discover_plugins():
+            plugin_class = self.loader.load_plugin_class(name)
+            if plugin_class:
+                try:
+                    temp = plugin_class()
+                    meta = temp.meta
+                    state = self.registry.get(name)
+
+                    available.append({
+                        'name': meta.name,
+                        'version': meta.version,
+                        'description': meta.description,
+                        'author': meta.author,
+                        'dependencies': meta.dependencies,
+                        'installed': state is not None,
+                        'enabled': state.enabled if state else False,
+                        'installed_at': state.installed_at if state else None
+                    })
+                except Exception as e:
+                    logger.warning(f"Error inspecting plugin {name}: {e}")
+
+        return available
+
+    def install_plugin(self, name: str, run_migrations: bool = True) -> bool:
+        """
+        Install a plugin.
+
+        Steps:
+        1. Verify plugin exists
+        2. Check dependencies
+        3. Run database migrations
+        4. Register in registry
+        5. Call plugin's on_install hook
+        """
+        # Check if already installed
+        if self.registry.is_installed(name):
+            logger.warning(f"Plugin {name} is already installed")
+            return False
+
+        # Load plugin class
+        plugin_class = self.loader.load_plugin_class(name)
+        if not plugin_class:
+            logger.error(f"Plugin {name} not found")
+            return False
+
+        temp_plugin = plugin_class()
+        meta = temp_plugin.meta
+
+        # Check dependencies
+        for dep in meta.dependencies:
+            if not self.registry.is_installed(dep):
+                logger.error(
+                    f"Plugin {name} requires {dep} to be installed first"
+                )
+                return False
+
+        # Run migrations
+        if run_migrations:
+            success = self.migration_manager.run_plugin_migrations(name)
+            if not success:
+                logger.error(f"Failed to run migrations for {name}")
+                return False
+
+        # Register plugin
+        self.registry.register(name, meta.version)
+
+        # Load the plugin
+        plugin = self.loader.load_plugin(name, self._app, self._db)
+        if plugin:
+            self._register_plugin_components(plugin)
+            plugin.on_install(self._app)
+
+        logger.info(f"Installed plugin: {name} v{meta.version}")
+        return True
+
+    def uninstall_plugin(self, name: str, remove_data: bool = False) -> bool:
+        """
+        Uninstall a plugin.
+
+        Args:
+            name: Plugin name
+            remove_data: If True, run downgrade migrations to remove tables
+        """
+        if not self.registry.is_installed(name):
+            logger.warning(f"Plugin {name} is not installed")
+            return False
+
+        # Check if other plugins depend on this one
+        for other_name in self.registry.get_enabled_plugins():
+            if other_name == name:
+                continue
+            other_plugin = self.loader.get_loaded_plugin(other_name)
+            if other_plugin and name in other_plugin.meta.dependencies:
+                logger.error(
+                    f"Cannot uninstall {name}: {other_name} depends on it"
+                )
+                return False
+
+        # Get plugin instance
+        plugin = self.loader.get_loaded_plugin(name)
+
+        # Call on_uninstall hook
+        if plugin:
+            plugin.on_uninstall(self._app)
+
+        # Optionally remove data
+        if remove_data:
+            self.migration_manager.downgrade_plugin(name)
+
+        # Unregister
+        self.registry.unregister(name)
+
+        logger.info(f"Uninstalled plugin: {name}")
+        return True
+
+    def enable_plugin(self, name: str) -> bool:
+        """Enable a disabled plugin."""
+        if not self.registry.is_installed(name):
+            logger.error(f"Plugin {name} is not installed")
+            return False
+
+        if self.registry.is_enabled(name):
+            logger.info(f"Plugin {name} is already enabled")
+            return True
+
+        # Check dependencies are enabled
+        plugin_class = self.loader.load_plugin_class(name)
+        if plugin_class:
+            temp = plugin_class()
+            for dep in temp.meta.dependencies:
+                if not self.registry.is_enabled(dep):
+                    logger.error(f"Cannot enable {name}: {dep} is not enabled")
+                    return False
+
+        self.registry.enable(name)
+
+        # Load the plugin
+        plugin = self.loader.load_plugin(name, self._app, self._db)
+        if plugin:
+            self._register_plugin_components(plugin)
+            plugin.on_enable(self._app)
+
+        logger.info(f"Enabled plugin: {name}")
+        return True
+
+    def disable_plugin(self, name: str) -> bool:
+        """Disable an enabled plugin."""
+        if not self.registry.is_enabled(name):
+            logger.info(f"Plugin {name} is already disabled")
+            return True
+
+        # Check if other plugins depend on this one
+        for other_name in self.registry.get_enabled_plugins():
+            if other_name == name:
+                continue
+            other_plugin = self.loader.get_loaded_plugin(other_name)
+            if other_plugin and name in other_plugin.meta.dependencies:
+                logger.error(
+                    f"Cannot disable {name}: {other_name} depends on it"
+                )
+                return False
+
+        plugin = self.loader.get_loaded_plugin(name)
+        if plugin:
+            plugin.on_disable(self._app)
+
+        self.registry.disable(name)
+        logger.info(f"Disabled plugin: {name}")
+        return True
+
+    def get_plugin(self, name: str) -> Optional[BasePlugin]:
+        """Get a loaded plugin instance."""
+        return self.loader.get_loaded_plugin(name)
+
+    def get_all_plugins(self) -> Dict[str, BasePlugin]:
+        """Get all loaded plugins."""
+        return self.loader.get_all_loaded()
+
+
+# Global plugin manager instance
+plugin_manager = PluginManager()
diff --git a/shopdb/plugins/base.py b/shopdb/plugins/base.py
new file mode 100644
index 0000000..3805041
--- /dev/null
+++ b/shopdb/plugins/base.py
@@ -0,0 +1,122 @@
+"""Base plugin class that all plugins must inherit from."""
+
+from abc import ABC, abstractmethod
+from typing import List, Dict, Optional, Type
+from dataclasses import dataclass, field
+from flask import Flask, Blueprint
+
+
+@dataclass
+class PluginMeta:
+    """Plugin metadata container."""
+
+    name: str
+    version: str
+    description: str
+    author: str = ""
+    dependencies: List[str] = field(default_factory=list)
+    core_version: str = ">=1.0.0"
+    api_prefix: str = None
+
+    def __post_init__(self):
+        if self.api_prefix is None:
+            self.api_prefix = f"/api/{self.name.replace('_', '-')}"
+
+
+class BasePlugin(ABC):
+    """
+    Base class for all ShopDB plugins.
+
+    Plugins must implement:
+        - meta: PluginMeta instance
+        - get_blueprint(): Return Flask Blueprint for API routes
+        - get_models(): Return list of SQLAlchemy model classes
+
+    Optionally implement:
+        - init_app(app, db): Custom initialization
+        - get_cli_commands(): Return Click commands
+        - get_services(): Return service classes
+        - on_install(): Called when plugin is installed
+        - on_uninstall(): Called when plugin is uninstalled
+        - on_enable(): Called when plugin is enabled
+        - on_disable(): Called when plugin is disabled
+    """
+
+    @property
+    @abstractmethod
+    def meta(self) -> PluginMeta:
+        """Return plugin metadata."""
+        pass
+
+    @abstractmethod
+    def get_blueprint(self) -> Optional[Blueprint]:
+        """Return Flask Blueprint with API routes."""
+        pass
+
+    @abstractmethod
+    def get_models(self) -> List[Type]:
+        """Return list of SQLAlchemy model classes."""
+        pass
+
+    def init_app(self, app: Flask, db) -> None:
+        """
+        Initialize plugin with Flask app.
+        Override for custom initialization.
+        """
+        pass
+
+    def get_cli_commands(self) -> List:
+        """Return list of Click command groups/commands."""
+        return []
+
+    def get_services(self) -> Dict[str, Type]:
+        """Return dict of service name -> service class."""
+        return {}
+
+    def get_event_handlers(self) -> Dict[str, callable]:
+        """Return dict of event name -> handler function."""
+        return {}
+
+    def on_install(self, app: Flask) -> None:
+        """Called when plugin is installed via CLI."""
+        pass
+
+    def on_uninstall(self, app: Flask) -> None:
+        """Called when plugin is uninstalled via CLI."""
+        pass
+
+    def on_enable(self, app: Flask) -> None:
+        """Called when plugin is enabled."""
+        pass
+
+    def on_disable(self, app: Flask) -> None:
+        """Called when plugin is disabled."""
+        pass
+
+    def get_dashboard_widgets(self) -> List[Dict]:
+        """
+        Return dashboard widget definitions.
+
+        Each widget: {
+            'name': str,
+            'component': str,  # Frontend component name
+            'endpoint': str,   # API endpoint for data
+            'size': str,       # 'small', 'medium', 'large'
+            'position': int    # Order on dashboard
+        }
+        """
+        return []
+
+    def get_navigation_items(self) -> List[Dict]:
+        """
+        Return navigation menu items.
+
+        Each item: {
+            'name': str,
+            'icon': str,
+            'route': str,
+            'position': int,
+            'children': []
+        }
+        """
+        return []
diff --git a/shopdb/plugins/cli.py b/shopdb/plugins/cli.py
new file mode 100644
index 0000000..bfd1a82
--- /dev/null
+++ b/shopdb/plugins/cli.py
@@ -0,0 +1,203 @@
+"""Flask CLI commands for plugin management."""
+
+import click
+from flask import current_app
+from flask.cli import with_appcontext
+
+
+@click.group('plugin')
+def plugin_cli():
+    """Plugin management commands."""
+    pass
+
+
+@plugin_cli.command('list')
+@with_appcontext
+def list_plugins():
+    """List all available plugins."""
+    pm = current_app.extensions.get('plugin_manager')
+    if not pm:
+        click.echo(click.style("Plugin manager not initialized", fg='red'))
+        return
+
+    plugins = pm.discover_available()
+
+    if not plugins:
+        click.echo("No plugins found in plugins directory.")
+        return
+
+    # Format output
+    click.echo("")
+    click.echo(click.style("Available Plugins:", fg='cyan', bold=True))
+    click.echo("-" * 60)
+
+    for p in plugins:
+        if p['enabled']:
+            status = click.style("[Enabled]", fg='green')
+        elif p['installed']:
+            status = click.style("[Disabled]", fg='yellow')
+        else:
+            status = click.style("[Available]", fg='white')
+
+        click.echo(f"  {p['name']:20} v{p['version']:10} {status}")
+        if p['description']:
+            click.echo(f"    {p['description'][:55]}...")
+        if p['dependencies']:
+            deps = ', '.join(p['dependencies'])
+            click.echo(f"    Dependencies: {deps}")
+
+    click.echo("")
+
+
+@plugin_cli.command('install')
+@click.argument('name')
+@click.option('--skip-migrations', is_flag=True, help='Skip database migrations')
+@with_appcontext
+def install_plugin(name: str, skip_migrations: bool):
+    """
+    Install a plugin.
+
+    Usage: flask plugin install printers
+    """
+    pm = current_app.extensions.get('plugin_manager')
+    if not pm:
+        click.echo(click.style("Plugin manager not initialized", fg='red'))
+        raise SystemExit(1)
+
+    click.echo(f"Installing plugin: {name}")
+
+    if pm.install_plugin(name, run_migrations=not skip_migrations):
+        click.echo(click.style(f"Successfully installed {name}", fg='green'))
+    else:
+        click.echo(click.style(f"Failed to install {name}", fg='red'))
+        raise SystemExit(1)
+
+
+@plugin_cli.command('uninstall')
+@click.argument('name')
+@click.option('--remove-data', is_flag=True, help='Remove plugin database tables')
+@click.confirmation_option(prompt='Are you sure you want to uninstall this plugin?')
+@with_appcontext
+def uninstall_plugin(name: str, remove_data: bool):
+    """
+    Uninstall a plugin.
+
+    Usage: flask plugin uninstall printers
+    """
+    pm = current_app.extensions.get('plugin_manager')
+    if not pm:
+        click.echo(click.style("Plugin manager not initialized", fg='red'))
+        raise SystemExit(1)
+
+    click.echo(f"Uninstalling plugin: {name}")
+
+    if pm.uninstall_plugin(name, remove_data=remove_data):
+        click.echo(click.style(f"Successfully uninstalled {name}", fg='green'))
+    else:
+        click.echo(click.style(f"Failed to uninstall {name}", fg='red'))
+        raise SystemExit(1)
+
+
+@plugin_cli.command('enable')
+@click.argument('name')
+@with_appcontext
+def enable_plugin(name: str):
+    """Enable a disabled plugin."""
+    pm = current_app.extensions.get('plugin_manager')
+    if not pm:
+        click.echo(click.style("Plugin manager not initialized", fg='red'))
+        raise SystemExit(1)
+
+    if pm.enable_plugin(name):
+        click.echo(click.style(f"Enabled {name}", fg='green'))
+    else:
+        click.echo(click.style(f"Failed to enable {name}", fg='red'))
+        raise SystemExit(1)
+
+
+@plugin_cli.command('disable')
+@click.argument('name')
+@with_appcontext
+def disable_plugin(name: str):
+    """Disable an enabled plugin."""
+    pm = current_app.extensions.get('plugin_manager')
+    if not pm:
+        click.echo(click.style("Plugin manager not initialized", fg='red'))
+        raise SystemExit(1)
+
+    if pm.disable_plugin(name):
+        click.echo(click.style(f"Disabled {name}", fg='green'))
+    else:
+        click.echo(click.style(f"Failed to disable {name}", fg='red'))
+        raise SystemExit(1)
+
+
+@plugin_cli.command('info')
+@click.argument('name')
+@with_appcontext
+def plugin_info(name: str):
+    """Show detailed information about a plugin."""
+    pm = current_app.extensions.get('plugin_manager')
+    if not pm:
+        click.echo(click.style("Plugin manager not initialized", fg='red'))
+        raise SystemExit(1)
+
+    plugin_class = pm.loader.load_plugin_class(name)
+    if not plugin_class:
+        click.echo(click.style(f"Plugin {name} not found", fg='red'))
+        raise SystemExit(1)
+
+    try:
+        temp = plugin_class()
+        meta = temp.meta
+    except Exception as e:
+        click.echo(click.style(f"Error loading plugin: {e}", fg='red'))
+        raise SystemExit(1)
+
+    state = pm.registry.get(name)
+
+    click.echo("")
+    click.echo("=" * 50)
+    click.echo(click.style(f"Plugin: {meta.name}", fg='cyan', bold=True))
+    click.echo("=" * 50)
+    click.echo(f"Version:      {meta.version}")
+    click.echo(f"Description:  {meta.description}")
+    click.echo(f"Author:       {meta.author or 'Unknown'}")
+    click.echo(f"API Prefix:   {meta.api_prefix}")
+    click.echo(f"Dependencies: {', '.join(meta.dependencies) or 'None'}")
+    click.echo(f"Core Version: {meta.core_version}")
+    click.echo("")
+
+    if state:
+        status = click.style('Enabled', fg='green') if state.enabled else click.style('Disabled', fg='yellow')
+        click.echo(f"Status:       {status}")
+        click.echo(f"Installed:    {state.installed_at}")
+        click.echo(f"Migrations:   {len(state.migrations_applied)} applied")
+    else:
+        click.echo(f"Status:       {click.style('Not installed', fg='white')}")
+
+    click.echo("")
+
+
+@plugin_cli.command('migrate')
+@click.argument('name')
+@click.option('--revision', default='head', help='Target revision')
+@with_appcontext
+def migrate_plugin(name: str, revision: str):
+    """Run migrations for a specific plugin."""
+    pm = current_app.extensions.get('plugin_manager')
+    if not pm:
+        click.echo(click.style("Plugin manager not initialized", fg='red'))
+        raise SystemExit(1)
+
+    if not pm.registry.is_installed(name):
+        click.echo(click.style(f"Plugin {name} is not installed", fg='red'))
+        raise SystemExit(1)
+
+    click.echo(f"Running migrations for {name}...")
+
+    if pm.migration_manager.run_plugin_migrations(name, revision):
+        click.echo(click.style("Migrations completed", fg='green'))
+    else:
+        click.echo(click.style("Migration failed", fg='red'))
+        raise SystemExit(1)
diff --git a/shopdb/plugins/loader.py b/shopdb/plugins/loader.py
new file mode 100644
index 0000000..8023176
--- /dev/null
+++ b/shopdb/plugins/loader.py
@@ -0,0 +1,174 @@
+"""Plugin discovery and loading."""
+
+import importlib
+import importlib.util
+from pathlib import Path
+from typing import Dict, List, Type, Optional
+from flask import Flask
+import logging
+
+from .base import BasePlugin
+from .registry import PluginRegistry
+
+logger = logging.getLogger(__name__)
+
+
+class PluginLoader:
+    """
+    Discovers and loads plugins from the plugins directory.
+    """
+
+    def __init__(self, plugins_dir: Path, registry: PluginRegistry):
+        self.plugins_dir = plugins_dir
+        self.registry = registry
+        self._loaded_plugins: Dict[str, BasePlugin] = {}
+        self._plugin_classes: Dict[str, Type[BasePlugin]] = {}
+
+    def discover_plugins(self) -> List[str]:
+        """
+        Discover available plugins in plugins directory.
+        Returns list of plugin names.
+        """
+        available = []
+        if not self.plugins_dir.exists():
+            return available
+
+        for item in self.plugins_dir.iterdir():
+            if item.is_dir() and (item / 'plugin.py').exists():
+                available.append(item.name)
+            elif item.is_dir() and (item / '__init__.py').exists():
+                # Check for plugin.py in package
+                if (item / 'plugin.py').exists():
+                    available.append(item.name)
+
+        return available
+
+    def load_plugin_class(self, name: str) -> Optional[Type[BasePlugin]]:
+        """
+        Load plugin class without instantiating.
+        Used for inspection before installation.
+        """
+        if name in self._plugin_classes:
+            return self._plugin_classes[name]
+
+        plugin_dir = self.plugins_dir / name
+        plugin_module_path = plugin_dir / 'plugin.py'
+
+        if not plugin_module_path.exists():
+            logger.error(f"Plugin {name} not found: {plugin_module_path}")
+            return None
+
+        try:
+            # Import the plugin module
+            spec = importlib.util.spec_from_file_location(
+                f"plugins.{name}.plugin",
+                plugin_module_path
+            )
+            module = importlib.util.module_from_spec(spec)
+            spec.loader.exec_module(module)
+
+            # Find the plugin class
+            for attr_name in dir(module):
+                attr = getattr(module, attr_name)
+                if (isinstance(attr, type) and
+                    issubclass(attr, BasePlugin) and
+                    attr is not BasePlugin):
+                    self._plugin_classes[name] = attr
+                    return attr
+
+            logger.error(f"No BasePlugin subclass found in {name}")
+            return None
+
+        except Exception as e:
+            logger.error(f"Error loading plugin {name}: {e}")
+            return None
+
+    def load_plugin(self, name: str, app: Flask, db) -> Optional[BasePlugin]:
+        """
+        Load and instantiate a plugin.
+        """
+        if name in self._loaded_plugins:
+            return self._loaded_plugins[name]
+
+        plugin_class = self.load_plugin_class(name)
+        if not plugin_class:
+            return None
+
+        try:
+            # Instantiate plugin
+            plugin = plugin_class()
+
+            # Check dependencies
+            for dep in plugin.meta.dependencies:
+                if not self.registry.is_enabled(dep):
+                    logger.error(
+                        f"Plugin {name} requires {dep} which is not enabled"
+                    )
+                    return None
+
+            # Initialize plugin
+            plugin.init_app(app, db)
+
+            self._loaded_plugins[name] = plugin
+            return plugin
+
+        except Exception as e:
+            logger.error(f"Error instantiating plugin {name}: {e}")
+            return None
+
+    def load_enabled_plugins(self, app: Flask, db) -> Dict[str, BasePlugin]:
+        """
+        Load all enabled plugins.
+        Returns dict of name -> plugin instance.
+        """
+        loaded = {}
+
+        # Sort by dependencies (simple topological sort)
+        enabled = self.registry.get_enabled_plugins()
+        sorted_plugins = self._sort_by_dependencies(enabled)
+
+        for name in sorted_plugins:
+            plugin = self.load_plugin(name, app, db)
+            if plugin:
+                loaded[name] = plugin
+                logger.info(f"Loaded plugin: {name} v{plugin.meta.version}")
+            else:
+                logger.warning(f"Failed to load plugin: {name}")
+
+        return loaded
+
+    def _sort_by_dependencies(self, plugin_names: List[str]) -> List[str]:
+        """Sort plugins so dependencies come first."""
+        sorted_list = []
+        visited = set()
+
+        def visit(name):
+            if name in visited:
+                return
+            visited.add(name)
+
+            plugin_class = self.load_plugin_class(name)
+            if plugin_class:
+                # Create temporary instance to get meta
+                try:
+                    temp = plugin_class()
+                    for dep in temp.meta.dependencies:
+                        if dep in plugin_names:
+                            visit(dep)
+                except Exception:
+                    pass
+
+            sorted_list.append(name)
+
+        for name in plugin_names:
+            visit(name)
+
+        return sorted_list
+
+    def get_loaded_plugin(self, name: str) -> Optional[BasePlugin]:
+        """Get an already loaded plugin."""
+        return self._loaded_plugins.get(name)
+
+    def get_all_loaded(self) -> Dict[str, BasePlugin]:
+        """Get all loaded plugins."""
+        return self._loaded_plugins.copy()
diff --git a/shopdb/plugins/migrations.py b/shopdb/plugins/migrations.py
new file mode 100644
index 0000000..16f35b9
--- /dev/null
+++ b/shopdb/plugins/migrations.py
@@ -0,0 +1,173 @@
+"""Plugin migration management using Alembic."""
+
+from pathlib import Path
+from typing import Optional
+import logging
+import subprocess
+import sys
+
+logger = logging.getLogger(__name__)
+
+
+class PluginMigrationManager:
+    """
+    Manages database migrations for plugins.
+    Each plugin has its own migrations directory.
+    """
+
+    def __init__(self, plugins_dir: Path, database_url: str):
+        self.plugins_dir = plugins_dir
+        self.database_url = database_url
+
+    def get_migrations_dir(self, plugin_name: str) -> Optional[Path]:
+        """Get migrations directory for a plugin."""
+        migrations_dir = self.plugins_dir / plugin_name / 'migrations'
+        if migrations_dir.exists():
+            return migrations_dir
+        return None
+
+    def run_plugin_migrations(
+        self,
+        plugin_name: str,
+        revision: str = 'head'
+    ) -> bool:
+        """
+        Run migrations for a plugin.
+
+        Uses flask db upgrade with the plugin's migrations directory.
+        """
+        migrations_dir = self.get_migrations_dir(plugin_name)
+
+        if not migrations_dir:
+            logger.info(f"No migrations directory for plugin {plugin_name}")
+            return True  # No migrations to run
+
+        try:
+            # Use alembic directly with plugin's migrations
+            from alembic.config import Config
+            from alembic import command
+
+            config = Config()
+            config.set_main_option('script_location', str(migrations_dir))
+            config.set_main_option('sqlalchemy.url', self.database_url)
+
+            # Use plugin-specific version table
+            config.set_main_option(
+                'version_table',
+                f'alembic_version_{plugin_name}'
+            )
+
+            command.upgrade(config, revision)
+            logger.info(f"Migrations completed for {plugin_name}")
+            return True
+
+        except ImportError:
+            # Fallback to subprocess if alembic not available in context
+            logger.warning("Using subprocess for migrations")
+            return self._run_migrations_subprocess(plugin_name, revision)
+
+        except Exception as e:
+            logger.error(f"Migration failed for {plugin_name}: {e}")
+            return False
+
+    def _run_migrations_subprocess(
+        self,
+        plugin_name: str,
+        revision: str = 'head'
+    ) -> bool:
+        """Run migrations via subprocess as fallback."""
+        migrations_dir = self.get_migrations_dir(plugin_name)
+        if not migrations_dir:
+            return True
+
+        try:
+            result = subprocess.run(
+                [
+                    sys.executable, '-m', 'alembic',
+                    '-c', str(migrations_dir / 'alembic.ini'),
+                    'upgrade', revision
+                ],
+                capture_output=True,
+                text=True,
+                env={
+                    **dict(__import__('os').environ),
+                    'DATABASE_URL': self.database_url
+                }
+            )
+
+            if result.returncode != 0:
+                logger.error(f"Migration error: {result.stderr}")
+                return False
+
+            return True
+
+        except Exception as e:
+            logger.error(f"Migration subprocess failed: {e}")
+            return False
+
+    def downgrade_plugin(
+        self,
+        plugin_name: str,
+        revision: str = 'base'
+    ) -> bool:
+        """
+        Downgrade/rollback plugin migrations.
+        """
+        migrations_dir = self.get_migrations_dir(plugin_name)
+
+        if not migrations_dir:
+            return True
+
+        try:
+            from alembic.config import Config
+            from alembic import command
+
+            config = Config()
+            config.set_main_option('script_location', str(migrations_dir))
+            config.set_main_option('sqlalchemy.url', self.database_url)
+            config.set_main_option(
+                'version_table',
+                f'alembic_version_{plugin_name}'
+            )
+
+            command.downgrade(config, revision)
+            logger.info(f"Downgrade completed for {plugin_name}")
+            return True
+
+        except Exception as e:
+            logger.error(f"Downgrade failed for {plugin_name}: {e}")
+            return False
+
+    def get_current_revision(self, plugin_name: str) -> Optional[str]:
+        """Get current migration revision for a plugin."""
+        migrations_dir = self.get_migrations_dir(plugin_name)
+        if not migrations_dir:
+            return None
+
+        try:
+            from alembic.config import Config
+            from alembic.script import ScriptDirectory
+
+            config = Config()
+            config.set_main_option('script_location', str(migrations_dir))
+
+            script = ScriptDirectory.from_config(config)
+            return script.get_current_head()
+
+        except Exception:
+            return None
+
+    def has_pending_migrations(self, plugin_name: str) -> bool:
+        """Check if plugin has pending migrations."""
+        # Simplified check - would need DB connection for full check
+        migrations_dir = self.get_migrations_dir(plugin_name)
+        if not migrations_dir:
+            return False
+
+        versions_dir = migrations_dir / 'versions'
+        if not versions_dir.exists():
+            return False
+
+        # Check if there are any migration files
+        migration_files = list(versions_dir.glob('*.py'))
+        return len(migration_files) > 0
diff --git a/shopdb/plugins/registry.py b/shopdb/plugins/registry.py
new file mode 100644
index 0000000..a9c7b66
--- /dev/null
+++ b/shopdb/plugins/registry.py
@@ -0,0 +1,121 @@
+"""Plugin registry for tracking installed and enabled plugins."""
+
+import json
+from pathlib import Path
+from typing import Dict, List, Optional
+from dataclasses import dataclass, field, asdict
+from datetime import datetime
+
+
+@dataclass
+class PluginState:
+    """Persistent state for a plugin."""
+
+    name: str
+    version: str
+    installed_at: str
+    enabled: bool = True
+    migrations_applied: List[str] = field(default_factory=list)
+    config: Dict = field(default_factory=dict)
+
+
+class PluginRegistry:
+    """
+    Manages plugin state persistence.
+    Stores state in JSON file in instance folder.
+    """
+
+    def __init__(self, state_file: Path):
+        self.state_file = state_file
+        self._plugins: Dict[str, PluginState] = {}
+        self._load()
+
+    def _load(self) -> None:
+        """Load registry from file."""
+        if self.state_file.exists():
+            try:
+                with open(self.state_file, 'r') as f:
+                    data = json.load(f)
+                    for name, state_data in data.get('plugins', {}).items():
+                        self._plugins[name] = PluginState(**state_data)
+            except (json.JSONDecodeError, TypeError):
+                # Corrupted file, start fresh
+                self._plugins = {}
+
+    def _save(self) -> None:
+        """Save registry to file."""
+        self.state_file.parent.mkdir(parents=True, exist_ok=True)
+        with open(self.state_file, 'w') as f:
+            json.dump({
+                'plugins': {
+                    name: asdict(state)
+                    for name, state in self._plugins.items()
+                }
+            }, f, indent=2)
+
+    def register(self, name: str, version: str) -> PluginState:
+        """Register a newly installed plugin."""
+        state = PluginState(
+            name=name,
+            version=version,
+            installed_at=datetime.utcnow().isoformat(),
+            enabled=True
+        )
+        self._plugins[name] = state
+        self._save()
+        return state
+
+    def unregister(self, name: str) -> None:
+        """Remove plugin from registry."""
+        if name in self._plugins:
+            del self._plugins[name]
+            self._save()
+
+    def get(self, name: str) -> Optional[PluginState]:
+        """Get plugin state."""
+        return self._plugins.get(name)
+
+    def is_installed(self, name: str) -> bool:
+        """Check if plugin is installed."""
+        return name in self._plugins
+
+    def is_enabled(self, name: str) -> bool:
+        """Check if plugin is enabled."""
+        state = self._plugins.get(name)
+        return state.enabled if state else False
+
+    def enable(self, name: str) -> None:
+        """Enable a plugin."""
+        if name in self._plugins:
+            self._plugins[name].enabled = True
+            self._save()
+
+    def disable(self, name: str) -> None:
+        """Disable a plugin."""
+        if name in self._plugins:
+            self._plugins[name].enabled = False
+            self._save()
+
+    def get_enabled_plugins(self) -> List[str]:
+        """Get list of enabled plugin names."""
+        return [
+            name for name, state in self._plugins.items()
+            if state.enabled
+        ]
+
+    def add_migration(self, name: str, revision: str) -> None:
+        """Record that a migration was applied."""
+        if name in self._plugins:
+            if revision not in self._plugins[name].migrations_applied:
+                self._plugins[name].migrations_applied.append(revision)
+                self._save()
+
+    def get_all(self) -> Dict[str, PluginState]:
+        """Get all registered plugins."""
+        return self._plugins.copy()
+
+    def update_config(self, name: str, config: Dict) -> None:
+        """Update plugin configuration."""
+        if name in self._plugins:
+            self._plugins[name].config.update(config)
+            self._save()
diff --git a/shopdb/static/images/sitemap2025-dark.png b/shopdb/static/images/sitemap2025-dark.png
new file mode 100644
index 0000000..b2c29b8
Binary files /dev/null and b/shopdb/static/images/sitemap2025-dark.png differ
diff --git a/shopdb/static/images/sitemap2025-light.png b/shopdb/static/images/sitemap2025-light.png
new file mode 100644
index 0000000..43ace7e
Binary files /dev/null and b/shopdb/static/images/sitemap2025-light.png differ
diff --git a/shopdb/utils/__init__.py b/shopdb/utils/__init__.py
new file mode 100644
index 0000000..93edb23
--- /dev/null
+++ b/shopdb/utils/__init__.py
@@ -0,0 +1,20 @@
+"""Utility modules."""
+
+from .responses import (
+    api_response,
+    success_response,
+    error_response,
+    paginated_response,
+    ErrorCodes
+)
+from .pagination import get_pagination_params, paginate_query
+
+__all__ = [
+    'api_response',
+    'success_response',
+    'error_response',
+    'paginated_response',
+    'ErrorCodes',
+    'get_pagination_params',
+    'paginate_query'
+]
diff --git a/shopdb/utils/pagination.py b/shopdb/utils/pagination.py
new file mode 100644
index 0000000..c0aaf32
--- /dev/null
+++ b/shopdb/utils/pagination.py
@@ -0,0 +1,43 @@
+"""Pagination utilities."""
+
+from flask import request, current_app
+from typing import Tuple
+
+
+def get_pagination_params(req=None) -> Tuple[int, int]:
+    """
+    Extract pagination parameters from request.
+
+    Returns:
+        Tuple of (page, per_page)
+    """
+    if req is None:
+        req = request
+
+    default_size = current_app.config.get('DEFAULT_PAGE_SIZE', 20)
+    max_size = current_app.config.get('MAX_PAGE_SIZE', 100)
+
+    try:
+        page = max(1, int(req.args.get('page', 1)))
+    except (TypeError, ValueError):
+        page = 1
+
+    try:
+        per_page = int(req.args.get('per_page', default_size))
+        per_page = max(1, min(per_page, max_size))
+    except (TypeError, ValueError):
+        per_page = default_size
+
+    return page, per_page
+
+
+def paginate_query(query, page: int, per_page: int):
+    """
+    Apply pagination to a SQLAlchemy query.
+
+    Returns:
+        Tuple of (items, total)
+    """
+    total = query.count()
+    items = query.offset((page - 1) * per_page).limit(per_page).all()
+    return items, total
diff --git a/shopdb/utils/responses.py b/shopdb/utils/responses.py
new file mode 100644
index 0000000..30b4a2d
--- /dev/null
+++ b/shopdb/utils/responses.py
@@ -0,0 +1,171 @@
+"""Standardized API response helpers."""
+
+from flask import jsonify, make_response
+from typing import Any, Dict, List, Optional
+from datetime import datetime
+import uuid
+
+
+class ErrorCodes:
+    """Standard error codes."""
+
+    VALIDATION_ERROR = 'VALIDATION_ERROR'
+    NOT_FOUND = 'NOT_FOUND'
+    UNAUTHORIZED = 'UNAUTHORIZED'
+    FORBIDDEN = 'FORBIDDEN'
+    CONFLICT = 'CONFLICT'
+    INTERNAL_ERROR = 'INTERNAL_ERROR'
+    BAD_REQUEST = 'BAD_REQUEST'
+    PLUGIN_ERROR = 'PLUGIN_ERROR'
+
+
+def api_response(
+    data: Any = None,
+    message: str = None,
+    status: str = 'success',
+    meta: Dict = None,
+    http_code: int = 200
+):
+    """
+    Create standardized API response.
+
+    Response format:
+    {
+        "status": "success" | "error",
+        "data": {...} | [...],
+        "message": "Optional message",
+        "meta": {
+            "timestamp": "2025-01-12T...",
+            "request_id": "uuid"
+        }
+    }
+    """
+    response = {
+        'status': status,
+        'meta': {
+            'timestamp': datetime.utcnow().isoformat() + 'Z',
+            'request_id': str(uuid.uuid4())[:8],
+            **(meta or {})
+        }
+    }
+
+    if data is not None:
+        response['data'] = data
+
+    if message:
+        response['message'] = message
+
+    return make_response(jsonify(response), http_code)
+
+
+def success_response(
+    data: Any = None,
+    message: str = None,
+    meta: Dict = None,
+    http_code: int = 200
+):
+    """Success response helper."""
+    return api_response(
+        data=data,
+        message=message,
+        meta=meta,
+        status='success',
+        http_code=http_code
+    )
+
+
+def error_response(
+    code: str,
+    message: str,
+    details: Dict = None,
+    http_code: int = 400
+):
+    """
+    Error response helper.
+
+    Response format:
+    {
+        "status": "error",
+        "error": {
+            "code": "VALIDATION_ERROR",
+            "message": "Human-readable message",
+            "details": {...}
+        }
+    }
+    """
+    error_data = {
+        'code': code,
+        'message': message
+    }
+    if details:
+        error_data['details'] = details
+
+    return api_response(
+        data={'error': error_data},
+        status='error',
+        http_code=http_code
+    )
+
+
+def api_error(
+    message: str,
+    code: str = ErrorCodes.BAD_REQUEST,
+    details: Dict = None,
+    http_code: int = 400
+):
+    """
+    Simplified error response helper.
+
+    Args:
+        message: Human-readable error message
+        code: Error code (default BAD_REQUEST)
+        details: Optional error details
+        http_code: HTTP status code (default 400)
+    """
+    return error_response(code=code, message=message, details=details, http_code=http_code)
+
+
+def paginated_response(
+    items: List,
+    page: int,
+    per_page: int,
+    total: int,
+    schema=None
+):
+    """
+    Paginated list response.
+
+    Response format:
+    {
+        "status": "success",
+        "data": [...],
+        "meta": {
+            "pagination": {
+                "page": 1,
+                "per_page": 20,
+                "total": 150,
+                "total_pages": 8,
+                "has_next": true,
+                "has_prev": false
+            }
+        }
+    }
+    """
+    total_pages = (total + per_page - 1) // per_page if per_page > 0 else 0
+
+    if schema:
+        items = schema.dump(items, many=True)
+
+    return api_response(
+        data=items,
+        meta={
+            'pagination': {
+                'page': page,
+                'per_page': per_page,
+                'total': total,
+                'total_pages': total_pages,
+                'has_next': page < total_pages,
+                'has_prev': page > 1
+            }
+        }
+    )
diff --git a/tests/__init__.py b/tests/__init__.py
new file mode 100644
index 0000000..46816dd
--- /dev/null
+++ b/tests/__init__.py
@@ -0,0 +1 @@
+"""Tests package."""
diff --git a/tests/conftest.py b/tests/conftest.py
new file mode 100644
index 0000000..2fc17d6
--- /dev/null
+++ b/tests/conftest.py
@@ -0,0 +1,51 @@
+"""Pytest configuration and fixtures."""
+
+import pytest
+from shopdb import create_app
+from shopdb.extensions import db as _db
+
+
+@pytest.fixture(scope='session')
+def app():
+    """Create application for testing."""
+    app = create_app('testing')
+    return app
+
+
+@pytest.fixture(scope='session')
+def db(app):
+    """Create database for testing."""
+    with app.app_context():
+        _db.create_all()
+        yield _db
+        _db.drop_all()
+
+
+@pytest.fixture(scope='function')
+def session(db):
+    """Create a new database session for a test."""
+    connection = db.engine.connect()
+    transaction = connection.begin()
+
+    options = dict(bind=connection, binds={})
+    session = db.create_scoped_session(options=options)
+
+    db.session = session
+
+    yield session
+
+    transaction.rollback()
+    connection.close()
+    session.remove()
+
+
+@pytest.fixture
+def client(app):
+    """Create test client."""
+    return app.test_client()
+
+
+@pytest.fixture
+def runner(app):
+    """Create CLI runner."""
+    return app.test_cli_runner()
diff --git a/wsgi.py b/wsgi.py
new file mode 100644
index 0000000..af75811
--- /dev/null
+++ b/wsgi.py
@@ -0,0 +1,14 @@
+"""WSGI entry point for the application."""
+
+import os
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
+
+from shopdb import create_app
+
+app = create_app(os.environ.get('FLASK_ENV', 'development'))
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)