diff --git a/electron.js b/electron.js
index 45d64ab..df5f212 100644
--- a/electron.js
+++ b/electron.js
@@ -1,14 +1,18 @@
-const { app, BrowserWindow } = require('electron');
+const {app, BrowserWindow} = require('electron');
 const path = require('path');
 
 function createWindow() {
     const win = new BrowserWindow({
-        width: 1024,
-        height: 720,
+        width: 1100,
+        height: 790,
+        resizable: false,
+        frame: false,
+        transparent: true,
+        autoHideMenuBar: true,
         webPreferences: {
             preload: path.join(__dirname, 'preload.js'),
             nodeIntegration: true,
-            contextIsolation: false
+            contextIsolation: false,
         }
     });
     win.loadURL('http://localhost:8080');
@@ -21,7 +25,6 @@ app.on('window-all-closed', () => {
         app.quit();
     }
 });
-
 app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) {
         createWindow();
diff --git a/package-lock.json b/package-lock.json
index 7dabaea..b9d63c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,17 +8,22 @@
       "name": "digitalpower-stock",
       "version": "0.1.0",
       "dependencies": {
+        "bootstrap": "^5.3.3",
+        "boxicons": "^2.1.4",
         "pinia": "^2.2.2",
         "vue": "^3.2.13",
-        "vue-router": "^4.0.3"
+        "vue-router": "^4.0.3",
+        "vuedigitalpowerui": "^0.1.7"
       },
       "devDependencies": {
         "@vue/cli-plugin-router": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
         "electron": "^32.1.2",
         "electron-builder": "^25.0.5",
-        "sass": "^1.32.7",
-        "sass-loader": "^12.0.0"
+        "jquery": "^3.7.1",
+        "popper.js": "^1.16.1",
+        "sass": "^1.79.3",
+        "sass-loader": "^12.6.0"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -204,6 +209,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.25.6",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
@@ -706,7 +723,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -721,7 +738,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -731,7 +748,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -741,7 +758,7 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -758,7 +775,7 @@
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -999,6 +1016,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -1164,7 +1192,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/express": {
@@ -1249,7 +1277,7 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/keyv": {
@@ -1294,7 +1322,7 @@
       "version": "22.5.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
       "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.19.2"
@@ -1876,7 +1904,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
       "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.6",
@@ -1887,28 +1915,28 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
       "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
       "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
       "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
       "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.6",
@@ -1920,14 +1948,14 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
       "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
       "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -1940,7 +1968,7 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
       "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
@@ -1950,7 +1978,7 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
       "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@xtuc/long": "4.2.2"
@@ -1960,14 +1988,14 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
       "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
       "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -1984,7 +2012,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
       "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -1998,7 +2026,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
       "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -2011,7 +2039,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
       "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -2026,13 +2054,19 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
       "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webcomponents/webcomponentsjs": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.8.0.tgz",
+      "integrity": "sha512-loGD63sacRzOzSJgQnB9ZAhaQGkN7wl2Zuw7tsphI5Isa0irijrRo6EnJii/GgjGefIFO8AIO7UivzRhFaEk9w==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
@@ -2047,14 +2081,14 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0"
     },
     "node_modules/7zip-bin": {
@@ -2089,7 +2123,7 @@
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -2102,7 +2136,7 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
       "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^8"
@@ -2175,7 +2209,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -2234,7 +2268,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "ajv": "^6.9.1"
@@ -2865,6 +2899,39 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
+    "node_modules/boxicons": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/boxicons/-/boxicons-2.1.4.tgz",
+      "integrity": "sha512-BvJNfYfnE4g9WQ7GL91fftxMOTwAleWlPFwvQJPYb/Ju7aLjlQ/Eu55AH9JLNk/OR82z+ZSq4TbKzbV/e5Rr0A==",
+      "license": "(CC-BY-4.0 OR OFL-1.1 OR MIT)",
+      "dependencies": {
+        "@webcomponents/webcomponentsjs": "^2.0.2",
+        "prop-types": "^15.6.0",
+        "react": "^16.0.0",
+        "react-dom": "^16.0.0",
+        "react-interactive": "^0.8.1",
+        "react-router-dom": "^4.2.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2893,7 +2960,7 @@
       "version": "4.23.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
       "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2961,7 +3028,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/builder-util": {
@@ -3322,7 +3389,7 @@
       "version": "1.0.30001662",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz",
       "integrity": "sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3415,7 +3482,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0"
@@ -3936,6 +4003,17 @@
         "webpack": "^5.1.0"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -4652,6 +4730,24 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-hover": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-hover/-/detect-hover-1.0.3.tgz",
+      "integrity": "sha512-HtLoY+tClgYucJNiovNICGWFp9nOGVmHY44s7L62iPqORXM9vujeWFaVcqtA7XRvp/2Y+4RBUfHbDKFGN+xxZQ==",
+      "license": "MIT"
+    },
+    "node_modules/detect-it": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/detect-it/-/detect-it-3.0.7.tgz",
+      "integrity": "sha512-RxpgcdbatUX6epJE09K16iJqF7x6iEcEdoL18FR2zpBO4JhnL7aMOAUoUEyexdtbWOSfTmoDWmeD6mwRBQyRXg==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-hover": "^1.0.3",
+        "detect-passive-events": "^1.0.5",
+        "detect-pointer": "^1.0.3",
+        "detect-touch-events": "^2.0.2"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -4669,6 +4765,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-passive-events": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.5.tgz",
+      "integrity": "sha512-foW7Q35wwOCxVzW0xLf5XeB5Fhe7oyRgvkBYdiP9IWgLMzjqUqTvsJv9ymuEWGjY6AoDXD3OC294+Z9iuOw0QA==",
+      "license": "MIT"
+    },
+    "node_modules/detect-pointer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-pointer/-/detect-pointer-1.0.3.tgz",
+      "integrity": "sha512-d0o/Puo3fiGSCXy6H039h9Kwz+mmYCGKZ/qtPFnpN3WfsumjC1C9b5KKvRu+aYnfdI8peqN/iAe7dPd85qIt2g==",
+      "license": "MIT"
+    },
+    "node_modules/detect-touch-events": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-touch-events/-/detect-touch-events-2.0.2.tgz",
+      "integrity": "sha512-g8GWBkJLiIDRJfRXEdrd1wMXpNyGId2DkbfuwFahSb4OCvn717hyRJtAcEDISfp3zkwEhZ4Y4woHPA6DeyB3Fw==",
+      "license": "MIT"
+    },
     "node_modules/dir-compare": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-4.2.0.tgz",
@@ -5156,7 +5270,7 @@
       "version": "1.5.27",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.27.tgz",
       "integrity": "sha512-o37j1vZqCoEgBuWWXLHQgTN/KDKe7zwpiY5CPeq2RvUqOyJw9xnrULzZAEVQ5p4h+zjMk7hgtOoPdnLxr7m/jw==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/electron/node_modules/@types/node": {
@@ -5235,7 +5349,7 @@
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
       "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -5319,7 +5433,7 @@
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
       "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/es6-error": {
@@ -5334,7 +5448,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5361,7 +5475,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -5375,7 +5489,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -5388,7 +5502,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -5398,7 +5512,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -5441,7 +5555,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.x"
@@ -5585,7 +5699,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -5622,7 +5736,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-uri": {
@@ -6127,7 +6241,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/global-agent": {
@@ -6245,7 +6359,7 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/gzip-size": {
@@ -6275,7 +6389,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6367,6 +6481,26 @@
         "node": "*"
       }
     },
+    "node_modules/history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -6739,7 +6873,6 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
       "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/import-fresh": {
@@ -6805,6 +6938,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip-address": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
@@ -7133,7 +7275,7 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -7148,7 +7290,7 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -7174,6 +7316,13 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -7188,7 +7337,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -7229,14 +7377,14 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-stringify-safe": {
@@ -7402,7 +7550,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.11.5"
@@ -7671,6 +7819,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -7843,7 +8003,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/merge2": {
@@ -7897,7 +8057,7 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -7907,7 +8067,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -8250,7 +8410,6 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nice-try": {
@@ -8418,7 +8577,7 @@
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/nopt": {
@@ -8540,7 +8699,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9075,6 +9233,18 @@
         "node": ">=10.4.0"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -9842,6 +10012,17 @@
         "node": ">= 4"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -9888,7 +10069,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -9948,7 +10129,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "^5.1.0"
@@ -9990,6 +10171,105 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0"
+      }
+    },
+    "node_modules/react-interactive": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/react-interactive/-/react-interactive-0.8.3.tgz",
+      "integrity": "sha512-mmRvA9aKP7zu9kVfP1AX1egX8tFlnE3DDXq92z0JTZezfOpmeQBzr77O1+mTV54OOmn+M2t6c5kFD5VnuFoM7A==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-it": "^3.0.3",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-router": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+      "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+      "license": "MIT",
+      "dependencies": {
+        "history": "^4.7.2",
+        "hoist-non-react-statics": "^2.5.0",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.1",
+        "warning": "^4.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "license": "MIT",
+      "dependencies": {
+        "history": "^4.7.2",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1",
+        "react-router": "^4.3.1",
+        "warning": "^4.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-router/node_modules/path-to-regexp": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+      "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
+      "license": "MIT",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
     "node_modules/read-binary-file-arch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz",
@@ -10171,6 +10451,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/relateurl": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -10275,6 +10561,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==",
+      "license": "MIT"
+    },
     "node_modules/responselike": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
@@ -10387,7 +10679,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -10425,7 +10717,6 @@
       "version": "1.79.3",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.3.tgz",
       "integrity": "sha512-m7dZxh0W9EZ3cw50Me5GOuYm/tVAJAn91SUnohLRo9cXBixGUOdvmryN+dXpwR831bhoY3Zv7rEFt85PUwTmzA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "chokidar": "^4.0.0",
@@ -10482,7 +10773,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.0.tgz",
       "integrity": "sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "readdirp": "^4.0.1"
@@ -10498,7 +10788,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz",
       "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 14.16.0"
@@ -10515,11 +10804,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -10660,7 +10959,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -10996,7 +11295,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -11015,7 +11314,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -11325,7 +11624,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
       "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -11427,7 +11726,7 @@
       "version": "5.33.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.33.0.tgz",
       "integrity": "sha512-JuPVaB7s1gdFKPKTelwUyRq5Sid2A3Gko2S0PncwdBq7kN9Ti9HPWDQ06MPsEDGsZeVESjKEnyGy68quBk1w6g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -11446,7 +11745,7 @@
       "version": "5.3.10",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
       "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.20",
@@ -11481,7 +11780,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/thenify": {
@@ -11566,6 +11865,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
     "node_modules/tmp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
@@ -11694,7 +12005,7 @@
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unique-filename": {
@@ -11747,7 +12058,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
       "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "opencollective",
@@ -11778,7 +12089,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -11836,6 +12147,12 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==",
+      "license": "MIT"
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -11978,11 +12295,74 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vuedigitalpowerui": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/vuedigitalpowerui/-/vuedigitalpowerui-0.1.7.tgz",
+      "integrity": "sha512-Lrw7amTMvb+f19TVAHN8HnPMKuzt73OORQCT2Szu/Mwbg6dUO9QQ5XPNffnPJmliHUeUGKMxtPdSCZgMx5AAJQ==",
+      "dependencies": {
+        "bootstrap": "^5.3.3",
+        "boxicons": "^2.1.4",
+        "core-js": "^3.8.3",
+        "sass": "^1.77.2",
+        "sass-loader": "^14.2.1",
+        "vue": "^3.2.13",
+        "vuedigitalpowerui": "^0.1.6"
+      }
+    },
+    "node_modules/vuedigitalpowerui/node_modules/sass-loader": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-14.2.1.tgz",
+      "integrity": "sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
       "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
@@ -12023,7 +12403,7 @@
       "version": "5.94.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
       "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.5",
@@ -12370,7 +12750,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.13.0"
diff --git a/package.json b/package.json
index 36f5e3c..0967221 100644
--- a/package.json
+++ b/package.json
@@ -21,16 +21,21 @@
     }
   },
   "dependencies": {
+    "bootstrap": "^5.3.3",
+    "boxicons": "^2.1.4",
     "pinia": "^2.2.2",
     "vue": "^3.2.13",
-    "vue-router": "^4.0.3"
+    "vue-router": "^4.0.3",
+    "vuedigitalpowerui": "^0.1.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "electron": "^32.1.2",
     "electron-builder": "^25.0.5",
-    "sass": "^1.32.7",
-    "sass-loader": "^12.0.0"
+    "jquery": "^3.7.1",
+    "popper.js": "^1.16.1",
+    "sass": "^1.79.3",
+    "sass-loader": "^12.6.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 25115a0..9fefda2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,18 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view />
+  <head>
+    <link rel="stylesheet" href="https://digitalpower.ar/cdn/digitalpower.css">
+  </head>
+  <div class="window-container">
+    <div id="title-bar" noselect></div>
+    <Nav/>
+    <router-view/>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue';
+import {onMounted, ref} from 'vue';
 import {useRouter} from 'vue-router';
+import Nav from "@/components/app/Nav.vue";
 
 const router = useRouter();
 
@@ -18,6 +22,16 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+:root {
+  --header-height: 150px !important;
+  --app-shadow: rgba(0, 0, 0, 0.45);
+  --navmenu-height: 200px;
+}
+
+body {
+  background: transparent !important;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -38,4 +52,63 @@ nav {
     }
   }
 }
+
+body {
+  margin: 0;
+  padding: 0;
+  padding: 2em;
+  width: 1024px;
+  height: 720px;
+}
+
+.window-container {
+  box-shadow: 0px 0px 20px 0px #0a0a0a;
+  border-radius: 15px;
+  width: 1024px;
+  height: 720px;
+  background: white;
+  overflow-y: auto;
+}
+
+#title-bar {
+  -webkit-app-region: drag;
+  height: 20px;
+  background: var(--primary);
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.select-wrapper::after {
+  content: ">" !important;
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slide-leave-active {
+  transition: opacity var(--duration), transform var(--duration);
+}
+
+.slide-leave-to {
+  animation: slideOut var(--duration) forwards;
+}
+
+[selectedNav="true"] {
+  background: white;
+
+  & > p {
+    color: var(--text-color) !important;
+  }
+}
 </style>
diff --git a/src/components/app/Layout.vue b/src/components/app/Layout.vue
new file mode 100644
index 0000000..a687275
--- /dev/null
+++ b/src/components/app/Layout.vue
@@ -0,0 +1,16 @@
+<script setup>
+
+</script>
+
+<template>
+  <div id="app-layout">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+#app-layout {
+  padding: 1em 2em;
+  height: calc(100vh - var(--header-height));
+}
+</style>
\ No newline at end of file
diff --git a/src/components/app/Nav.vue b/src/components/app/Nav.vue
new file mode 100644
index 0000000..ee9e8e1
--- /dev/null
+++ b/src/components/app/Nav.vue
@@ -0,0 +1,127 @@
+<script setup>
+import NavMenu from "@/components/app/NavMenu.vue";
+import {ref} from "vue";
+import {useUi} from "@/pinia/ui";
+import {useRouter} from "vue-router";
+
+const router = useRouter();
+const ui = useUi();
+const options = ref([
+  {
+    name: "Aplicacion", items: [
+      {name: "Manual"},
+      {name: "Solicitar Ayuda"},
+      {name: "Digital Power"},
+      {
+        name: "Cerrar",
+        callback: () => {
+          window.close();
+        }
+      },
+    ]
+  },
+  {
+    name: "Productos", items: [
+      {name: "Agregar Producto"},
+      {name: "Generar Venta"},
+    ]
+  },
+  {
+    name: "Imprimir",
+    items: [
+      {name: "Listado de productos"},
+      {name: "Estadisticas"},
+    ],
+  },
+  {
+    name: "Estadisticas",
+    items: [],
+    url: '/',
+  },
+]);
+
+function openMenu(items, name, url) {
+  ui.setCurrentMenu(null);
+  if (!items) return;
+  if (url) {
+    router.push(url);
+    return;
+  }
+  setTimeout(() => {
+    ui.setCurrentMenu(items);
+    ui.selectedMenu = name;
+  }, 5)
+  setTimeout(() => {
+    let $menu = document.querySelector("#menu-dropdown");
+    let $option = document.querySelector("#" + name);
+    const rect = ($option.getBoundingClientRect())
+
+    $menu.setAttribute("style", `
+    position: fixed;
+    left: ${rect.left}px;
+    bottom: ${rect.bottom}px;
+    top: ${rect.top + rect.height}px;
+  `)
+  }, 20)
+}
+
+function handleClick(item) {
+  item?.callback();
+}
+</script>
+
+<template>
+  <nav>
+    <div class="list" noselect>
+      <div class="item" :selectedNav="opt.name === ui.selectedMenu" :id="opt?.name" v-for="(opt, key) in options" :key
+           @click="openMenu(opt?.items, opt?.name, opt?.url)"><p>
+        {{
+          opt?.name
+        }}</p></div>
+    </div>
+    <NavMenu @callback="handleClick" v-if="ui.currentMenu"></NavMenu>
+  </nav>
+</template>
+
+<style scoped lang="scss">
+nav {
+  background: var(--primary);
+  width: 100%;
+  height: 60px;
+  padding: 0;
+  z-index: 20;
+}
+
+.list {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: start;
+  align-items: end;
+
+}
+
+.item {
+  transition: var(--duration);
+  border-top-right-radius: 15px;
+
+
+  &:hover {
+    cursor: pointer;
+    background: white;
+
+    & > p {
+      color: var(--text-color);
+    }
+  }
+
+  & > p {
+    transition: var(--duration);
+    margin: 0;
+    padding: 1em;
+    border-top-right-radius: 15px;
+    color: white;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/app/NavMenu.vue b/src/components/app/NavMenu.vue
new file mode 100644
index 0000000..42afa60
--- /dev/null
+++ b/src/components/app/NavMenu.vue
@@ -0,0 +1,54 @@
+<script setup>
+import {useUi} from "@/pinia/ui";
+
+const emits = defineEmits(["callback"]);
+const ui = useUi();
+</script>
+
+<template>
+  <div class="nav-menu" id="menu-dropdown">
+    <div v-for="(item, key) in ui.currentMenu" :key class="item" @click="emits('callback', item)">
+      {{ item?.name }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nav-menu {
+  width: 250px;
+  height: var(--navmenu-height);
+
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
+  background: white;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+
+  animation: fade .2s ease-in-out forwards;
+  overflow-y: auto;
+}
+
+.item {
+  padding: .5em 1em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  text-align: left;
+  cursor: pointer;
+
+  transition: var(--duration);
+
+  &:hover {
+    color: white;
+    background: var(--primary);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+    height: 0
+  }
+  100% {
+    opacity: 1;
+    height: var(--navmenu-height);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/productos/Filters.vue b/src/components/productos/Filters.vue
new file mode 100644
index 0000000..0cd5838
--- /dev/null
+++ b/src/components/productos/Filters.vue
@@ -0,0 +1,34 @@
+<script setup>
+import {Input} from 'vuedigitalpowerui'
+import {ref} from "vue";
+
+const emits = defineEmits(["search"]);
+const props = defineProps(["filters"])
+const filter = ref("");
+const value = ref("");
+
+function search() {
+  emits("search", {filter: filter.value, value: value.value})
+}
+</script>
+
+<template>
+  <div id="filters" class="mt-3">
+    <form @submit.prevent="search" flex gapped flex-wrap>
+      <Input class="filter" type="select" v-model="filter" :options="filters"/>
+      <Input class="filter" placeholder="Busqueda" v-model="value"/>
+      <Input type="button" value="Buscar" background="var(--primary)" color="white" @click="search"/>
+      <Input type="button" value="Limpiar" background="var(--primary)" color="white"/>
+    </form>
+  </div>
+</template>
+
+<style scoped lang="scss">
+#filters {
+  width: 100%;
+}
+
+.filter {
+  width: 250px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/productos/Table.vue b/src/components/productos/Table.vue
new file mode 100644
index 0000000..d0fa2ff
--- /dev/null
+++ b/src/components/productos/Table.vue
@@ -0,0 +1,86 @@
+<script setup>
+import {useUi} from "@/pinia/ui";
+
+const props = defineProps(["items", "headers"])
+
+</script>
+
+<template>
+  <div id="table-container" radius-border>
+    <table>
+      <thead>
+      <tr>
+        <th v-for="(head, key) in headers" :key>{{ head?.name }}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(item, key) in items">
+        <td v-for="(head, key) in headers" :class="head">{{ item?.[head?.name] }}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+#table-container {
+  box-shadow: 0px 0px 5px 0px var(--app-shadow);
+  border-radius: 15px;
+  height: 80%;
+
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead > tr > th {
+  border-top: none;
+
+
+  &:first-child {
+    border-left: none;
+  }
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+tbody > tr {
+  transition: var(--duration);
+
+  &:last-child {
+    & > td {
+      border-bottom: none !important;
+    }
+  }
+
+  &:hover {
+    background: var(--primary);
+    color: white;
+  }
+}
+
+th {
+  padding: 1em 2em;
+  //border: 1px solid var(--text-color);
+  border: 1px solid rgba(0, 0, 0, 0.27);
+
+}
+
+td {
+  padding: 1em 2em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.27);
+}
+
+.Nombre {
+  width: 400px;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ef27da7..6b58add 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,13 @@ import {createApp} from 'vue'
 import App from './App.vue'
 import router from './router'
 import {createPinia} from "pinia";
-
+import "../src/styles/digitalpower.css"
+import 'boxicons'
+import * as bootstrap from 'bootstrap'
+import 'bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'jquery/src/jquery.js'
+import 'bootstrap/dist/js/bootstrap.min.js'
 
 const pinia = createPinia();
 const app = createApp(App).use(pinia).use(router).mount('#app')
diff --git a/src/pinia/ui.js b/src/pinia/ui.js
new file mode 100644
index 0000000..dbb2c51
--- /dev/null
+++ b/src/pinia/ui.js
@@ -0,0 +1,15 @@
+import {defineStore} from "pinia";
+
+export const useUi = defineStore('ui', {
+    state: () => ({
+        currentMenu: null,
+        selectedMenu: null,
+    }),
+    getters: {},
+    actions: {
+        setCurrentMenu(state) {
+            if (!state) this.selectedMenu = null;
+            this.currentMenu = state;
+        },
+    }
+})
\ No newline at end of file
diff --git a/src/styles/digitalpower.css b/src/styles/digitalpower.css
new file mode 100644
index 0000000..885b4cd
--- /dev/null
+++ b/src/styles/digitalpower.css
@@ -0,0 +1,662 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+* {
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+    /* Esto afectará a cualquier scrollbar en tu página web */
+
+    ::-webkit-scrollbar {
+        width: 3px;
+        height: 5px;
+    }
+
+    /* Track */
+
+    ::-webkit-scrollbar-track {
+        background: var(--gray-light);
+    }
+
+    /* Handle */
+
+    ::-webkit-scrollbar-thumb {
+        background: var(--primary);
+    }
+
+    /* Handle on hover */
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--secondary);
+    }
+}
+
+:root {
+    --gray: rgba(0, 0, 0, 0.3);
+    --gray-light: rgba(0, 0, 0, 0.1);
+    --gray-very-light: rgba(0, 0, 0, 0.08);
+    --primary-blue: #3a7ca5;
+    --primary: dodgerblue;
+    --primary-active-item: #efefef;
+    --secondary: #0887a1;
+    --red: #d14c4c;
+    --back-color: white;
+    --text-color: rgba(62, 62, 62, 0.7);
+    --sidebar-color: dodgerblue;
+    --sidebar-color-hover: white;
+    --input-bg: white;
+    --input-button: #efefef;
+    --input-bg-hover: #dbdbdb;
+    --shadow: 0px 0px 5px 0px var(--gray);
+
+    --admin-title-height: 67px;
+    --duration: 0.3s;
+
+    --header-height: 50px;
+}
+
+body {
+    margin: 0;
+    overflow-x: hidden;
+    background: var(--back-color);
+}
+
+#app-layout {
+    max-width: 100%;
+}
+
+#notification-container {
+    position: fixed;
+    top: calc(var(--header-height) + 1.5em);
+    right: 0;
+    margin-right: 1em;
+    z-index: 1000;
+}
+
+h1 {
+    font-weight: bold;
+    font-size: 2em;
+}
+
+h1, h2, h3, h4, h5, p, b {
+    width: fit-content;
+}
+
+pre {
+    background: lightgray;
+}
+
+.page-enter-active,
+.page-leave-active {
+    transition: all 0.2s;
+}
+
+.page-enter-from,
+.page-leave-to {
+    opacity: 0;
+}
+
+.custom-modal-html {
+    width: 80vw;
+    height: fit-content;
+    max-height: 100vh;
+    max-width: 100vh;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 200000;
+    color: var(--text-color);
+    background: var(--back-color);
+
+    overflow-y: auto;
+
+    transform: translate(-50%, -50%);
+
+    .title {
+        padding: 0.5em;
+        border-bottom: 1px solid var(--gray);
+
+        h5,
+        h1 {
+            text-align: center;
+            margin: 0;
+        }
+    }
+
+    .content {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        padding: 2em;
+
+        p {
+            margin-bottom: 2em;
+        }
+
+        .actions {
+            gap: 1em;
+        }
+    }
+}
+
+a {
+    color: dodgerblue;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+p {
+    font-size: 1em;
+}
+
+.active-item {
+    background: var(--secondary);
+    color: var(--sidebar-color-hover) !important;
+
+    .icon {
+        fill: var(--sidebar-color-hover) !important;
+    }
+}
+
+.notification {
+    padding: 1em;
+    background: var(--primary);
+    color: white;
+    margin: 1em 0;
+    min-width: 200px;
+
+    pointer-events: none;
+    user-select: none;
+    z-index: 1000;
+}
+
+.notification-enter {
+    animation-name: notificationAnimationEnter;
+    animation-duration: 0.25s;
+}
+
+.notification-exit {
+    animation-name: notificationAnimationExit;
+    animation-duration: 0.25s;
+}
+
+.ck-editor {
+    display: block;
+    width: 100% !important;
+}
+
+.ck {
+    color: var(--text-color) !important;
+    background: var(--input-bg) !important;
+    border: none !important;
+}
+
+.red {
+    background: var(--red) !important;
+}
+
+[limited-text] {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+}
+
+[flex] {
+    display: flex !important;
+}
+
+[flex-wrap] {
+    flex-wrap: wrap;
+}
+
+[nopointer] {
+    pointer-events: none;
+}
+
+[subitem] {
+    padding-left: 1em;
+}
+
+[groupitem] {
+    border-bottom: 1px solid var(--gray);
+}
+
+[grouplabel] {
+    background: var(--gray-light);
+    color: white;
+}
+
+[menuitem] {
+    border-bottom: 1px solid var(--gray);
+}
+
+[menuitem],
+[subitem] {
+    transition: 0.2s;
+
+    &:hover {
+        background: var(--secondary);
+        color: white;
+    }
+}
+
+[shadow] {
+    box-shadow: var(--shadow);
+}
+
+[borderbottom] {
+    border-bottom: 1px solid var(--gray);
+}
+
+[bordered] {
+    border: 1px solid var(--gray);
+}
+
+[radius-border] {
+    border-radius: 5px;
+}
+
+[bound] {
+    background: var(--gray-light);
+    background-image: linear-gradient(
+            to right,
+            transparent 20%,
+            var(--gray-very-light) 60%
+    );
+    background-size: 200% 100%;
+    transition: background-position 0.2s ease-out;
+    animation: boundAnimation 2s ease infinite alternate;
+}
+
+[custominput] {
+    border: 1px solid var(--gray-light);
+    border-radius: 5px;
+
+    &:focus {
+        outline: none;
+        border: 1px solid var(--gray);
+        box-shadow: 0px 0px 5px 0px var(--gray);
+    }
+}
+
+[customselect] {
+    width: 100%;
+
+    select {
+        padding: 0.6em 1em;
+        width: 100%;
+        appearance: none;
+        background: white;
+    }
+}
+
+.select-wrapper {
+    position: relative;
+
+    &::after {
+        content: "â–¼";
+        font-size: 1rem;
+        top: 50%;
+        right: 1em;
+        position: absolute;
+        color: var(--gray);
+
+        transform: translateY(-50%);
+
+        z-index: 100000;
+    }
+}
+
+.custom-button-html {
+    padding: 0.6em 1.5em;
+    border-radius: 5px;
+    border: none;
+
+    cursor: pointer;
+    font-size: 1em;
+
+    display: block;
+    width: fit-content;
+
+    transition: 0.2s;
+
+    color: white;
+    background: var(--primary);
+    margin-bottom: 0.5em;
+
+    &:hover {
+        filter: brightness(0.8);
+    }
+
+    &:focus {
+        outline: none;
+    }
+}
+
+[flex-center] {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+}
+
+[flex-start] {
+    display: flex !important;
+    align-items: start;
+    justify-content: start;
+}
+
+[flex-column] {
+    flex-direction: column;
+}
+
+[block-center] {
+    display: block;
+    margin: auto;
+    width: fit-content;
+}
+
+[overlay] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+
+    z-index: 15;
+    background: var(--gray);
+}
+
+[inside-verlay] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    display: none;
+    transition: var(--duration);
+
+    z-index: 15;
+    background: rgba(0, 0, 0, 0.4);
+}
+
+[fade] {
+    animation-name: fadeAnim;
+    animation-duration: 0.2s;
+}
+
+[delayedfade] {
+    animation: fadeAnim 0.2s forwards;
+}
+
+
+[absolute-centered] {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+[list] {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+[gapped] {
+    gap: 1em;
+}
+
+[noselect] {
+    user-select: none;
+}
+
+[underline] {
+    /*
+    border-bottom: 1px solid var(--primary);
+
+    */
+    padding-bottom: 10px;
+    margin-bottom: 1em;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: var(--primary);
+
+        animation-name: underlineAnim;
+        animation-duration: var(--duration);
+    }
+}
+
+[nowrap] {
+    text-wrap: nowrap;
+}
+
+[pointer] {
+    pointer-events: all;
+}
+
+[select] {
+    user-select: all;
+}
+
+[slide] {
+    animation: slide;
+    animation-duration: var(--duration);
+}
+
+[slideRight] {
+    animation: slideRight;
+    animation-duration: var(--duration);
+}
+
+[slideUp] {
+    animation: slideUp;
+    animation-duration: var(--duration);
+}
+
+[slideDown] {
+    animation: slideDown;
+    animation-duration: var(--duration);
+}
+
+[fixed] {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    height: 100%;
+}
+
+.loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 3px solid;
+    border-color: #fff #fff transparent transparent;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+.loader::after,
+.loader::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    border: 3px solid;
+    border-color: transparent transparent var(--primary-blue) var(--primary-blue);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    animation: rotationBack 0.5s linear infinite;
+    transform-origin: center center;
+}
+
+.loader::before {
+    width: 32px;
+    height: 32px;
+    border-color: #fff #fff transparent transparent;
+    animation: rotation 1.5s linear infinite;
+}
+
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes rotationBack {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(-360deg);
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes prixClipFix {
+    0% {
+        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+    }
+    50% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+    }
+    75%,
+    100% {
+        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+    }
+}
+
+@keyframes boundAnimation {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 100% 0;
+    }
+}
+
+@keyframes notificationAnimationEnter {
+    0% {
+        transform: translateX(150%);
+    }
+
+    100% {
+        transform: translateX(0%);
+    }
+}
+
+@keyframes notificationAnimationExit {
+    0% {
+        transform: translateX(0%);
+    }
+
+    100% {
+        transform: translateX(150%);
+    }
+}
+
+@keyframes fadeAnim {
+    0% {
+        opacity: 0%;
+    }
+
+    100% {
+        opacity: 100%;
+    }
+}
+
+@keyframes underlineAnim {
+    0% {
+        width: 0%;
+    }
+
+    100% {
+        width: 100%;
+    }
+}
+
+@keyframes slide {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(0%);
+    }
+}
+
+@keyframes slideRight {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(0%);
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        transform: translateY(100%);
+    }
+
+    100% {
+        transform: translateY(0%);
+    }
+}
+
+@keyframes slideDown {
+    0% {
+        transform: translateY(-100%);
+    }
+
+    100% {
+        transform: translateY(0%);
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .dp-container {
+        h1 {
+            text-align: center;
+            font-size: 1.5em;
+        }
+    }
+
+    .custom-modal-html {
+        height: 60vh;
+
+        .actions {
+            flex-direction: column;
+            gap: 0.5em !important;
+        }
+    }
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ae409de..41533c8 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,11 +1,49 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <Layout @click="handleClick">
+    <Table :headers :items="productos"></Table>
+    <Filters :filters="headers"></Filters>
+  </Layout>
 </template>
 
 <script setup>
-import HelloWorld from '@/components/HelloWorld.vue'
+import Layout from "@/components/app/Layout.vue";
+import Table from "@/components/productos/Table.vue";
+import {computed, onMounted, ref} from "vue";
+import Filters from "@/components/productos/Filters.vue";
+import {useUi} from "@/pinia/ui";
 
+const ui = useUi();
+const headers = computed(() => {
+  const producto = productos.value?.[0];
+  if (!producto) return [];
+
+  return Object.keys(producto).map((x) => {
+    return {value: x, name: x};
+  })
+})
+const productos = ref([
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
+]);
+
+
+onMounted(() => {
+
+})
+
+function handleClick() {
+  ui.setCurrentMenu(null)
+}
 </script>