diff --git a/.gitignore b/.gitignore
index 4881966..1955a3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 .test
-node_modules
\ No newline at end of file
+node_modules
+
+.DS_Store
\ No newline at end of file
diff --git a/src/client/package.json b/libs/core/package.json
similarity index 97%
rename from src/client/package.json
rename to libs/core/package.json
index 5983f48..b9b836d 100644
--- a/src/client/package.json
+++ b/libs/core/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "client",
+  "name": "core",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
diff --git a/libs/core/src/index.ts b/libs/core/src/index.ts
new file mode 100644
index 0000000..1767e84
--- /dev/null
+++ b/libs/core/src/index.ts
@@ -0,0 +1 @@
+export { parseCommentTable } from "./parser/comment_parser"
\ No newline at end of file
diff --git a/src/lib/info.ts b/libs/core/src/info.ts
similarity index 99%
rename from src/lib/info.ts
rename to libs/core/src/info.ts
index e2830e2..4281dd8 100644
--- a/src/lib/info.ts
+++ b/libs/core/src/info.ts
@@ -30,4 +30,4 @@ class ViewAnnotation extends Annotation {
 class ProcedureAnnotation extends Annotation {
     name = 'ProcedureAnnotation';
     description = '';
-}
\ No newline at end of file
+}
diff --git a/src/lib/parser/comment_parser.ts b/libs/core/src/parser/comment_parser.ts
similarity index 100%
rename from src/lib/parser/comment_parser.ts
rename to libs/core/src/parser/comment_parser.ts
diff --git a/src/lib/parser/field.ts b/libs/core/src/parser/field.ts
similarity index 100%
rename from src/lib/parser/field.ts
rename to libs/core/src/parser/field.ts
diff --git a/src/lib/parser/types/common.ts b/libs/core/src/parser/types/common.ts
similarity index 100%
rename from src/lib/parser/types/common.ts
rename to libs/core/src/parser/types/common.ts
diff --git a/src/lib/render/element.ts b/libs/core/src/render/element.ts
similarity index 100%
rename from src/lib/render/element.ts
rename to libs/core/src/render/element.ts
diff --git a/src/lib/render/event.ts b/libs/core/src/render/event.ts
similarity index 100%
rename from src/lib/render/event.ts
rename to libs/core/src/render/event.ts
diff --git a/src/client/tsconfig.json b/libs/core/tsconfig.json
similarity index 90%
rename from src/client/tsconfig.json
rename to libs/core/tsconfig.json
index bfb42f6..ff0dc65 100644
--- a/src/client/tsconfig.json
+++ b/libs/core/tsconfig.json
@@ -1,4 +1,5 @@
 {
+    "extends": "../../tsconfig.base.json",
     "compilerOptions": {
         "target": "ES2020",
         "lib": [
@@ -6,10 +7,8 @@
             "DOM"
         ],
         "module": "ES2020",
-        "sourceMap": true,
         "removeComments": true,
         "strict": true,
-        "baseUrl": "./src",
         "outDir": "./dest",
         "esModuleInterop": true,
         "skipLibCheck": true,
diff --git a/package-lock.json b/package-lock.json
index 134bbed..54a020f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,22 +8,33 @@
       "name": "sqldoc",
       "version": "1.0.0",
       "license": "MIT",
+      "workspaces": [
+        "packages/*",
+        "libs/*"
+      ],
+      "devDependencies": {
+        "ts-node": "^10.9.2"
+      }
+    },
+    "libs/core": {
+      "version": "1.0.0",
+      "license": "ISC",
       "dependencies": {
-        "@types/express": "^4.17.17",
-        "@types/morgan": "^1.9.4",
-        "@types/nunjucks": "^3.2.2",
-        "express": "^4.18.2",
-        "morgan": "^1.10.0",
-        "nunjucks": "^3.2.4"
+        "axios": "^1.4.0",
+        "express": "^4.18.2"
       },
       "devDependencies": {
-        "@types/jest": "^29.5.2",
-        "jest": "^29.5.0",
-        "lit-html": "^2.0.0",
-        "nodemon": "^2.0.22",
-        "ts-jest": "^29.1.0",
-        "ts-node": "^10.9.1",
-        "tslib": "^2.6.1"
+        "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-commonjs": "^25.0.3",
+        "@rollup/plugin-json": "^6.0.0",
+        "@rollup/plugin-node-resolve": "^15.1.0",
+        "@types/axios": "^0.14.0",
+        "rollup": "^3.26.3",
+        "rollup-plugin-node-resolve": "^5.2.0",
+        "rollup-plugin-sourcemaps": "^0.6.3",
+        "rollup-plugin-typescript2": "^0.35.0",
+        "tslib": "^2.6.0",
+        "typescript": "^5.1.6"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1089,10 +1100,11 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.9",
@@ -1104,6 +1116,203 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@rollup/plugin-alias": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.1.tgz",
+      "integrity": "sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-babel": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.4.tgz",
+      "integrity": "sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@rollup/pluginutils": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@types/babel__core": "^7.1.9",
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/babel__core": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs": {
+      "version": "25.0.8",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.8.tgz",
+      "integrity": "sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "commondir": "^1.0.1",
+        "estree-walker": "^2.0.2",
+        "glob": "^8.0.3",
+        "is-reference": "1.2.1",
+        "magic-string": "^0.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.68.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rollup/plugin-json": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
+      "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
+      "integrity": "sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "@types/resolve": "1.20.2",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.78.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.2.0.tgz",
+      "integrity": "sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.25.24",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz",
@@ -1152,6 +1361,17 @@
       "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==",
       "dev": true
     },
+    "node_modules/@types/axios": {
+      "version": "0.14.4",
+      "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.4.tgz",
+      "integrity": "sha512-9JgOaunvQdsQ/qW2OPmE5+hCeUB52lQSolecrFrthct55QekhmXEwT203s20RL+UHtCQc15y3VXpby9E7Kkh/g==",
+      "deprecated": "This is a stub types definition. axios provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "axios": "*"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.1",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
@@ -1210,6 +1430,13 @@
         "@types/node": "*"
       }
     },
+    "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/@types/express": {
       "version": "4.17.17",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
@@ -1319,6 +1546,13 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "node_modules/@types/resolve": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/send": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
@@ -1486,6 +1720,36 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
+    "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/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true,
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.5.0.tgz",
@@ -1712,6 +1976,19 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
+    "node_modules/builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -1732,6 +2009,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1864,6 +2154,10 @@
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
       "dev": true
     },
+    "node_modules/client": {
+      "resolved": "packages/client",
+      "link": true
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -1912,6 +2206,18 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "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/commander": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
@@ -1920,6 +2226,13 @@
         "node": ">= 6"
       }
     },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1964,6 +2277,10 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/core": {
+      "resolved": "libs/core",
+      "link": true
+    },
     "node_modules/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -1992,6 +2309,16 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -2007,6 +2334,15 @@
         "node": ">=0.10.0"
       }
     },
+    "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/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -2051,6 +2387,20 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.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/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -2097,6 +2447,51 @@
         "is-arrayish": "^0.2.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/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -2133,6 +2528,13 @@
         "node": ">=4"
       }
     },
+    "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==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -2274,6 +2676,24 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -2287,6 +2707,42 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "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.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
+      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
+      "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/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -2303,6 +2759,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2324,9 +2795,13 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "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/gensync": {
       "version": "1.0.0-beta.2",
@@ -2347,14 +2822,24 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "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": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "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"
@@ -2369,6 +2854,19 @@
         "node": ">=8.0.0"
       }
     },
+    "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/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -2422,6 +2920,18 @@
         "node": ">=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/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2432,6 +2942,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -2448,10 +2959,11 @@
         "node": ">=4"
       }
     },
-    "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+    "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"
       },
@@ -2459,10 +2971,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+    "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"
       },
@@ -2470,6 +2986,18 @@
         "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/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -2637,6 +3165,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -2646,6 +3181,16 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -3432,6 +3977,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -3492,6 +4050,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -3531,6 +4099,15 @@
         "tmpl": "1.0.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/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -4038,6 +4615,12 @@
         "node": ">= 0.10"
       }
     },
+    "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/pstree.remy": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
@@ -4170,6 +4753,168 @@
         "node": ">=10"
       }
     },
+    "node_modules/rollup": {
+      "version": "3.29.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+      "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=14.18.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-node-resolve": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",
+      "integrity": "sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==",
+      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-node-resolve.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/resolve": "0.0.8",
+        "builtin-modules": "^3.1.0",
+        "is-module": "^1.0.0",
+        "resolve": "^1.11.1",
+        "rollup-pluginutils": "^2.8.1"
+      },
+      "peerDependencies": {
+        "rollup": ">=1.11.0"
+      }
+    },
+    "node_modules/rollup-plugin-node-resolve/node_modules/@types/resolve": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
+      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/rollup-plugin-sourcemaps": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.6.3.tgz",
+      "integrity": "sha512-paFu+nT1xvuO1tPFYXGe+XnQvg4Hjqv/eIhG8i5EspfYYPBKL57X7iVbfv55aNVASg3dzWvES9dmWsL2KhfByw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.9",
+        "source-map-resolve": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=10.0.0",
+        "rollup": ">=0.31.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup-plugin-sourcemaps/node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-sourcemaps/node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rollup-plugin-sourcemaps/node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rollup-plugin-typescript2": {
+      "version": "0.35.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.35.0.tgz",
+      "integrity": "sha512-szcIO9hPUx3PhQl91u4pfNAH2EKbtrXaES+m163xQVE5O1CC0ea6YZV/5woiDDW3CR9jF2CszPrKN+AFiND0bg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^4.1.2",
+        "find-cache-dir": "^3.3.2",
+        "fs-extra": "^10.0.0",
+        "semver": "^7.3.7",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "rollup": ">=1.26.3",
+        "typescript": ">=2.4.0"
+      }
+    },
+    "node_modules/rollup-plugin-typescript2/node_modules/@rollup/pluginutils": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+      "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-typescript2/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      }
+    },
+    "node_modules/rollup-pluginutils/node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -4245,6 +4990,10 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/server": {
+      "resolved": "packages/server",
+      "link": true
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -4335,6 +5084,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-resolve": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -4602,10 +5363,11 @@
       "dev": true
     },
     "node_modules/ts-node": {
-      "version": "10.9.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
-      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -4684,11 +5446,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
-      "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
-      "peer": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4703,6 +5465,16 @@
       "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
       "dev": true
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -4930,6 +5702,53 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "packages/client": {
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "axios": "^1.4.0",
+        "express": "^4.18.2"
+      },
+      "devDependencies": {
+        "@rollup/plugin-alias": "^5.1.1",
+        "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-commonjs": "^25.0.3",
+        "@rollup/plugin-json": "^6.0.0",
+        "@rollup/plugin-node-resolve": "^15.1.0",
+        "@types/axios": "^0.14.0",
+        "rollup": "^3.26.3",
+        "rollup-plugin-node-resolve": "^5.2.0",
+        "rollup-plugin-sourcemaps": "^0.6.3",
+        "rollup-plugin-typescript2": "^0.35.0",
+        "tslib": "^2.6.0",
+        "typescript": "^5.1.6"
+      }
+    },
+    "packages/server": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*",
+        "libs/*"
+      ],
+      "dependencies": {
+        "@types/express": "^4.17.17",
+        "@types/morgan": "^1.9.4",
+        "@types/nunjucks": "^3.2.2",
+        "express": "^4.18.2",
+        "morgan": "^1.10.0",
+        "nunjucks": "^3.2.4"
+      },
+      "devDependencies": {
+        "@types/jest": "^29.5.2",
+        "jest": "^29.5.0",
+        "lit-html": "^2.0.0",
+        "nodemon": "^2.0.22",
+        "ts-jest": "^29.1.0",
+        "ts-node": "^10.9.2",
+        "tslib": "^2.6.1"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index c78189a..794195a 100644
--- a/package.json
+++ b/package.json
@@ -19,37 +19,11 @@
     "type": "git",
     "url": "https://github.com/dbwodlf3/sqldoc.git"
   },
+  "workspaces": [
+    "packages/*",
+    "libs/*"
+  ],
   "devDependencies": {
-    "@types/jest": "^29.5.2",
-    "jest": "^29.5.0",
-    "lit-html": "^2.0.0",
-    "nodemon": "^2.0.22",
-    "ts-jest": "^29.1.0",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.6.1"
-  },
-  "dependencies": {
-    "@types/express": "^4.17.17",
-    "@types/morgan": "^1.9.4",
-    "@types/nunjucks": "^3.2.2",
-    "express": "^4.18.2",
-    "morgan": "^1.10.0",
-    "nunjucks": "^3.2.4"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "ts"
-    ],
-    "testRegex": ".*\\.spec\\.ts$",
-    "transform": {
-      "^.+\\.(t|j)s$": "ts-jest"
-    },
-    "collectCoverageFrom": [
-      "**/*.(t|j)s"
-    ],
-    "coverageDirectory": "../coverage",
-    "testEnvironment": "node"
+    "ts-node": "^10.9.2"
   }
 }
diff --git a/src/client/package-lock.json b/packages/client/package-lock.json
similarity index 100%
rename from src/client/package-lock.json
rename to packages/client/package-lock.json
diff --git a/packages/client/package.json b/packages/client/package.json
new file mode 100644
index 0000000..00a133f
--- /dev/null
+++ b/packages/client/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.4.0",
+    "express": "^4.18.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@types/axios": "^0.14.0",
+    "rollup": "^3.26.3",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6"
+  }
+}
diff --git a/src/client/rollup.config.js b/packages/client/rollup.config.js
similarity index 100%
rename from src/client/rollup.config.js
rename to packages/client/rollup.config.js
diff --git a/packages/client/src/client.ts b/packages/client/src/client.ts
new file mode 100644
index 0000000..b50c385
--- /dev/null
+++ b/packages/client/src/client.ts
@@ -0,0 +1,36 @@
+import { parseCommentTable } from "@core";
+
+import { exampleStrings } from "../test/example/sql";
+
+import { WordCount } from "./component/table";
+import { LogoComponent } from "./component/ui/logo.component";
+import { SearchComponent } from "./component/ui/search.component";
+import { CardItemComponent } from "./component/db/card-item.component";
+import { RecentItemListComponent } from "./component/db/recent-item-list.component";
+import { DatabaseItemListComponent } from "./component/db/database-item-list.component";
+import { TableItemListComponent } from "./component/db/table-item-list.component";
+import { ClusterItemListComponent } from "./component/db/cluster-item-list.component";
+import { TableDocComponent } from "./component/db/doc/table-doc.component copy";
+import { DatabaseDocComponent } from "./component/db/doc/database-doc.component";
+
+let exampleInput = exampleStrings;
+
+let parsedData = parseCommentTable(exampleInput);
+
+let sidebar = "";
+
+let contentBody = "";
+
+WordCount;
+LogoComponent;
+SearchComponent;
+CardItemComponent;
+RecentItemListComponent;
+DatabaseItemListComponent;
+ClusterItemListComponent;
+TableItemListComponent;
+
+DatabaseDocComponent;
+TableDocComponent;
+
+console.log(parsedData);
diff --git a/packages/client/src/component/db/card-item.component.ts b/packages/client/src/component/db/card-item.component.ts
new file mode 100644
index 0000000..68f863e
--- /dev/null
+++ b/packages/client/src/component/db/card-item.component.ts
@@ -0,0 +1,87 @@
+type ItemType = "cluster" | "db" | "table";
+const InputAttributes = ["type", "cluster", "shard", "database"] as const;
+
+export class CardItemComponent extends HTMLDivElement {
+    constructor(input?: { noInit?: boolean }) {
+        super();
+        const noInit = input?.noInit;
+
+        const type = this.getAttribute("type") || "";
+        const cluster = this.getAttribute("cluster") || "";
+        const shard = this.getAttribute("shard") || "";
+        const database = this.getAttribute("database") || "";
+
+        if (!noInit) this.__init({ type, cluster, shard, database });
+    }
+
+    private __init(input: {
+        type?: string;
+        cluster?: string;
+        shard?: string;
+        database?: string;
+    }) {
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        // Attributes
+        const type_at = input.type || "";
+        const cluster_at = input.cluster || "";
+        const shard_at = input.shard || "";
+        const database_at = input.database || "";
+
+        const materialLink_el = document.createElement("link");
+        materialLink_el.href =
+            "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+        materialLink_el.rel = "stylesheet";
+
+        const card_el = document.createElement("div");
+        card_el.style.display = "flex";
+        card_el.style.flexDirection = "column";
+        card_el.style.alignItems = "center";
+        card_el.style.justifyContent = "center";
+        card_el.style.width = "160px";
+        card_el.style.height = "160px";
+        card_el.style.border = "2px dotted #B9D7EA";
+
+        const icon_el = document.createElement("span");
+        icon_el.classList.add("material-symbols-outlined");
+        icon_el.style.fontSize = "32px";
+        icon_el.style.marginBottom = "8px";
+        icon_el.textContent = (() => {
+            if (type_at == "cluster") return "hub";
+            if (type_at == "db") return "database";
+            if (type_at == "add") return "add";
+            return "";
+        })();
+
+        const cluster_name_el = document.createElement("div");
+        cluster_name_el.textContent = cluster_at;
+
+        const database_name_el = document.createElement("div");
+        database_name_el.textContent = database_at;
+
+        // Compound
+        card_el.appendChild(icon_el);
+        card_el.appendChild(cluster_name_el);
+        card_el.appendChild(database_name_el);
+
+        // Append it to the shadow root
+        shadow_el.appendChild(materialLink_el);
+        shadow_el.appendChild(card_el);
+    }
+
+    static renderItem(input: {
+        type?: string;
+        cluster?: string;
+        shard?: string;
+        database?: string;
+    }) {
+        const item = new CardItemComponent({ noInit: true });
+        item.__init(input);
+        return item;
+    }
+}
+
+// Define the new element
+customElements.define("d-card-item", CardItemComponent, { extends: "div" });
diff --git a/packages/client/src/component/db/cluster-item-list.component.ts b/packages/client/src/component/db/cluster-item-list.component.ts
new file mode 100644
index 0000000..13dd597
--- /dev/null
+++ b/packages/client/src/component/db/cluster-item-list.component.ts
@@ -0,0 +1,58 @@
+import { CardItemComponent } from "./card-item.component";
+
+type RecentItems = {
+    type?: string;
+    cluster?: string;
+    shard?: string;
+    database?: string;
+};
+
+export class ClusterItemListComponent extends HTMLDivElement {
+    listEl: HTMLDivElement;
+
+    items: CardItemComponent[] = [];
+
+    constructor() {
+        super();
+
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        // Attributes
+        const api_at = this.getAttribute("api");
+
+        // Elements
+        const list_el = document.createElement("div");
+        list_el.style.display = "flex";
+        list_el.style.gap = "16px";
+        this.listEl = list_el;
+
+        // Append
+        shadow_el.appendChild(list_el);
+
+        // Init
+        const data: RecentItems[] = [];
+
+        this.renderCardItem(data);
+    }
+
+    renderCardItem(input: RecentItems[]) {
+        const cardItems: CardItemComponent[] = [];
+        for (const item of input) {
+            const cardItem = CardItemComponent.renderItem(item);
+            this.items.push(cardItem);
+            this.listEl.appendChild(cardItem);
+        }
+
+        if (input.length == 0) {
+            const addItem = CardItemComponent.renderItem({ type: "add" });
+            this.listEl.appendChild(addItem);
+        }
+    }
+}
+
+// Define the new element
+customElements.define("d-cluster-item-list", ClusterItemListComponent, {
+    extends: "div",
+});
diff --git a/packages/client/src/component/db/database-item-list.component.ts b/packages/client/src/component/db/database-item-list.component.ts
new file mode 100644
index 0000000..310a228
--- /dev/null
+++ b/packages/client/src/component/db/database-item-list.component.ts
@@ -0,0 +1,58 @@
+import { CardItemComponent } from "./card-item.component";
+
+type RecentItems = {
+    type?: string;
+    cluster?: string;
+    shard?: string;
+    database?: string;
+};
+
+export class DatabaseItemListComponent extends HTMLDivElement {
+    listEl: HTMLDivElement;
+
+    items: CardItemComponent[] = [];
+
+    constructor() {
+        super();
+
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        // Attributes
+        const api_at = this.getAttribute("api");
+
+        // Elements
+        const list_el = document.createElement("div");
+        list_el.style.display = "flex";
+        list_el.style.gap = "16px";
+        this.listEl = list_el;
+
+        // Append
+        shadow_el.appendChild(list_el);
+
+        // Init
+        const data: RecentItems[] = [];
+
+        this.renderCardItem(data);
+    }
+
+    renderCardItem(input: RecentItems[]) {
+        const cardItems: CardItemComponent[] = [];
+        for (const item of input) {
+            const cardItem = CardItemComponent.renderItem(item);
+            this.items.push(cardItem);
+            this.listEl.appendChild(cardItem);
+        }
+
+        if (input.length == 0) {
+            const addItem = CardItemComponent.renderItem({ type: "add" });
+            this.listEl.appendChild(addItem);
+        }
+    }
+}
+
+// Define the new element
+customElements.define("d-database-item-list", DatabaseItemListComponent, {
+    extends: "div",
+});
diff --git a/packages/client/src/component/db/doc/database-doc.component.ts b/packages/client/src/component/db/doc/database-doc.component.ts
new file mode 100644
index 0000000..3f6630a
--- /dev/null
+++ b/packages/client/src/component/db/doc/database-doc.component.ts
@@ -0,0 +1,57 @@
+import { CardItemComponent } from "../card-item.component";
+
+export class DatabaseDocComponent extends HTMLDivElement {
+    items: CardItemComponent[] = [];
+    tables: [] = [];
+
+    constructor() {
+        super();
+
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        // Attributes
+        const api_at = this.getAttribute("api");
+        const database_at = this.getAttribute("database");
+        const cluster_at = this.getAttribute("cluster");
+        const shard_at = this.getAttribute("shard");
+        const description_at = this.getAttribute("description");
+
+        // Elements
+        const wrapper_el = document.createElement("div");
+
+        const database_el = document.createElement("div");
+        (() => {
+            const databaseName_el = document.createElement("div");
+            databaseName_el.style.fontSize = "2rem";
+            databaseName_el.textContent = database_at;
+
+            const clusterName_el = document.createElement("div");
+            clusterName_el.style.fontSize = "1.2rem";
+            clusterName_el.textContent = cluster_at;
+
+            const shardName_el = document.createElement("div");
+            shardName_el.style.fontSize = "1.2rem";
+            shardName_el.textContent = shard_at;
+
+            wrapper_el.appendChild(databaseName_el);
+            wrapper_el.appendChild(clusterName_el);
+            wrapper_el.appendChild(shardName_el);
+        })();
+
+        const tables_el = document.createElement("div");
+        (() => {})();
+
+        // Append
+        shadow_el.appendChild(wrapper_el);
+        wrapper_el.appendChild(database_el);
+    }
+
+    renderTables() {}
+}
+
+// Define the new element
+customElements.define("d-database-doc", DatabaseDocComponent, {
+    extends: "div",
+});
diff --git a/packages/client/src/component/db/doc/table-doc.component copy.ts b/packages/client/src/component/db/doc/table-doc.component copy.ts
new file mode 100644
index 0000000..d8eaef4
--- /dev/null
+++ b/packages/client/src/component/db/doc/table-doc.component copy.ts	
@@ -0,0 +1,64 @@
+import { CardItemComponent } from "../card-item.component";
+
+type RecentItems = {
+    type?: string;
+    cluster?: string;
+    shard?: string;
+    database?: string;
+};
+
+export class TableDocComponent extends HTMLDivElement {
+    items: CardItemComponent[] = [];
+
+    constructor(input?: { noInit?: boolean }) {
+        super();
+
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        // Attributes
+        const api_at = this.getAttribute("api");
+        const table_at = this.getAttribute("table");
+        const description_at = this.getAttribute("description");
+
+        // Elements
+        const table_el = document.createElement("div");
+        table_el;
+
+        const tableDesc_el = document.createElement("div");
+        (() => {
+            const tableName_el = document.createElement("div");
+            tableName_el.style.paddingBottom = "8px";
+            tableName_el.style.fontSize = "2rem";
+            tableName_el.textContent = table_at;
+
+            const tableExplain_el = document.createElement("div");
+            tableExplain_el.textContent = description_at;
+
+            tableDesc_el.appendChild(tableName_el);
+            tableDesc_el.appendChild(tableExplain_el);
+
+            console.log(tableName_el);
+        })();
+
+        const fieldDesc_el = document.createElement("div");
+        (() => {
+            const field_el = document.createElement("div");
+            fieldDesc_el.style.fontSize = "1.4rem";
+            fieldDesc_el.textContent = "Fields";
+
+            fieldDesc_el.appendChild(field_el);
+        })();
+
+        // Append
+        shadow_el.appendChild(table_el);
+        table_el.appendChild(tableDesc_el);
+        table_el.appendChild(fieldDesc_el);
+    }
+}
+
+// Define the new element
+customElements.define("d-table-doc", TableDocComponent, {
+    extends: "div",
+});
diff --git a/packages/client/src/component/db/recent-item-list.component.ts b/packages/client/src/component/db/recent-item-list.component.ts
new file mode 100644
index 0000000..c942f82
--- /dev/null
+++ b/packages/client/src/component/db/recent-item-list.component.ts
@@ -0,0 +1,56 @@
+import { CardItemComponent } from "./card-item.component";
+
+type RecentItems = {
+    type?: string;
+    cluster?: string;
+    shard?: string;
+    database?: string;
+};
+
+export class RecentItemListComponent extends HTMLDivElement {
+    listEl: HTMLDivElement;
+
+    items: CardItemComponent[] = [];
+
+    constructor() {
+        super();
+
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        // Attributes
+        const api_at = this.getAttribute("api");
+
+        // Elements
+        const list_el = document.createElement("div");
+        list_el.style.display = "flex";
+        list_el.style.gap = "16px";
+        this.listEl = list_el;
+
+        // Append
+        shadow_el.appendChild(list_el);
+
+        // Init
+        const data: RecentItems[] = [
+            { type: "cluster", cluster: "ExampleGlobalCluster" },
+            { type: "db", database: "ExampleDatabase" },
+        ];
+
+        this.renderCardItem(data);
+    }
+
+    renderCardItem(input: RecentItems[]) {
+        const cardItems: CardItemComponent[] = [];
+        for (const item of input) {
+            const cardItem = CardItemComponent.renderItem(item);
+            this.items.push(cardItem);
+            this.listEl.appendChild(cardItem);
+        }
+    }
+}
+
+// Define the new element
+customElements.define("d-recent-item-list", RecentItemListComponent, {
+    extends: "div",
+});
diff --git a/packages/client/src/component/db/table-item-list.component.ts b/packages/client/src/component/db/table-item-list.component.ts
new file mode 100644
index 0000000..8348ba8
--- /dev/null
+++ b/packages/client/src/component/db/table-item-list.component.ts
@@ -0,0 +1,58 @@
+import { CardItemComponent } from "./card-item.component";
+
+type RecentItems = {
+    type?: string;
+    cluster?: string;
+    shard?: string;
+    database?: string;
+};
+
+export class TableItemListComponent extends HTMLDivElement {
+    listEl: HTMLDivElement;
+
+    items: CardItemComponent[] = [];
+
+    constructor() {
+        super();
+
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        // Attributes
+        const api_at = this.getAttribute("api");
+
+        // Elements
+        const list_el = document.createElement("div");
+        list_el.style.display = "flex";
+        list_el.style.gap = "16px";
+        this.listEl = list_el;
+
+        // Append
+        shadow_el.appendChild(list_el);
+
+        // Init
+        const data: RecentItems[] = [];
+
+        this.renderCardItem(data);
+    }
+
+    renderCardItem(input: RecentItems[]) {
+        const cardItems: CardItemComponent[] = [];
+        for (const item of input) {
+            const cardItem = CardItemComponent.renderItem(item);
+            this.items.push(cardItem);
+            this.listEl.appendChild(cardItem);
+        }
+
+        if (input.length == 0) {
+            const addItem = CardItemComponent.renderItem({ type: "add" });
+            this.listEl.appendChild(addItem);
+        }
+    }
+}
+
+// Define the new element
+customElements.define("d-table-item-list", TableItemListComponent, {
+    extends: "div",
+});
diff --git a/packages/client/src/component/erd.ts b/packages/client/src/component/erd.ts
new file mode 100644
index 0000000..046b409
--- /dev/null
+++ b/packages/client/src/component/erd.ts
@@ -0,0 +1 @@
+console.log(":)");
diff --git a/src/client/src/component/table-reference.ts b/packages/client/src/component/table-reference.ts
similarity index 100%
rename from src/client/src/component/table-reference.ts
rename to packages/client/src/component/table-reference.ts
diff --git a/src/client/src/component/table.ts b/packages/client/src/component/table.ts
similarity index 100%
rename from src/client/src/component/table.ts
rename to packages/client/src/component/table.ts
diff --git a/packages/client/src/component/ui/logo.component.ts b/packages/client/src/component/ui/logo.component.ts
new file mode 100644
index 0000000..afa4178
--- /dev/null
+++ b/packages/client/src/component/ui/logo.component.ts
@@ -0,0 +1,29 @@
+// Create a class for the element
+export class LogoComponent extends HTMLDivElement {
+    constructor() {
+        super();
+
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        const logo_size = this.getAttribute("size");
+
+        // Create text node and add word count to it
+        const img_el = document.createElement("img");
+
+        img_el.setAttribute("src", "/static/img/logo.png");
+        img_el.style.blockSize = logo_size || "128px";
+
+        const text_el = document.createElement("span");
+
+        // Append it to the shadow root
+        shadow_el.appendChild(img_el);
+
+        // Update count when element content changes
+        setInterval(function () {}, 200);
+    }
+}
+
+// Define the new element
+customElements.define("d-logo", LogoComponent, { extends: "div" });
diff --git a/packages/client/src/component/ui/search.component.ts b/packages/client/src/component/ui/search.component.ts
new file mode 100644
index 0000000..758738c
--- /dev/null
+++ b/packages/client/src/component/ui/search.component.ts
@@ -0,0 +1,29 @@
+// Create a class for the element
+export class SearchComponent extends HTMLDivElement {
+    constructor() {
+        super();
+
+        // Parents
+        const parent_el = this.parentNode;
+        const shadow_el = this.attachShadow({ mode: "open" });
+
+        const logo_size = this.getAttribute("size");
+
+        // Create text node and add word count to it
+        const img_el = document.createElement("img");
+
+        img_el.setAttribute("src", "/static/img/logo.png");
+        img_el.style.blockSize = logo_size || "128px";
+
+        const text_el = document.createElement("span");
+
+        // Append it to the shadow root
+        shadow_el.appendChild(img_el);
+
+        // Update count when element content changes
+        setInterval(function () {}, 200);
+    }
+}
+
+// Define the new element
+customElements.define("d-search", SearchComponent, { extends: "div" });
diff --git a/src/client/test/example/sql.ts b/packages/client/test/example/sql.ts
similarity index 100%
rename from src/client/test/example/sql.ts
rename to packages/client/test/example/sql.ts
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
new file mode 100644
index 0000000..f0febf5
--- /dev/null
+++ b/packages/client/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "target": "ES2020",
+        "lib": [
+            "ES2020",
+            "DOM"
+        ],
+        "module": "ESNext",
+        "removeComments": true,
+        "moduleResolution": "node",
+        "strict": true,
+        "outDir": "./dest",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "downlevelIteration": true,
+        "experimentalDecorators": true
+    },
+    "include": [
+        "./**/*.ts",
+        "rollup.config.js"
+    ],
+    "exclude": []
+}
\ No newline at end of file
diff --git a/src/server/.gitignore b/packages/server/.gitignore
similarity index 100%
rename from src/server/.gitignore
rename to packages/server/.gitignore
diff --git a/packages/server/package.json b/packages/server/package.json
new file mode 100644
index 0000000..63fe090
--- /dev/null
+++ b/packages/server/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "generate sql documentation",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "jest --config ./test/unit/jest-unit.json",
+    "build:client": "",
+    "build:client:watch": "npx ts-node ./scripts/build-watch.client",
+    "start:server": "npx ts-node ./scripts/start",
+    "start:server:watch": "npx ts-node ./scripts/start-watch"
+  },
+  "author": "Cogi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dbwodlf3/sqldoc.git"
+  },
+  "workspaces": [
+    "packages/*",
+    "libs/*"
+  ],
+  "devDependencies": {
+    "@types/jest": "^29.5.2",
+    "jest": "^29.5.0",
+    "lit-html": "^2.0.0",
+    "nodemon": "^2.0.22",
+    "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.6.1"
+  },
+  "dependencies": {
+    "@types/express": "^4.17.17",
+    "@types/morgan": "^1.9.4",
+    "@types/nunjucks": "^3.2.2",
+    "express": "^4.18.2",
+    "morgan": "^1.10.0",
+    "nunjucks": "^3.2.4"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "testRegex": ".*\\.spec\\.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "collectCoverageFrom": [
+      "**/*.(t|j)s"
+    ],
+    "coverageDirectory": "../coverage",
+    "testEnvironment": "node"
+  }
+}
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
new file mode 100644
index 0000000..19b86e5
--- /dev/null
+++ b/packages/server/src/index.ts
@@ -0,0 +1,61 @@
+import path from "path";
+import express from "express";
+import morgan from "morgan";
+import * as njk from "nunjucks";
+
+import settings from "./settings";
+
+const app = express();
+
+const njk_env = njk.configure(
+    path.join(settings.serverRoot, "static", "templates"),
+    {
+        autoescape: true,
+        watch: true,
+        express: app,
+    }
+);
+
+njk_env.addGlobal("isExpirationOut", (inputDatetime: string) => {
+    const expiration = new Date(inputDatetime);
+    const current_date = new Date();
+
+    return 0 > expiration.getTime() - current_date.getTime();
+});
+
+app.use(
+    morgan(":method :url :status :res[content-length] - :response-time ms")
+);
+
+app.use(
+    "/static/js",
+    express.static(path.join(settings.serverRoot, "static", "js"))
+);
+app.use(
+    "/static/css",
+    express.static(path.join(settings.serverRoot, "static", "css"))
+);
+app.use(
+    "/static/img",
+    express.static(path.join(settings.serverRoot, "static", "img"))
+);
+app.use(
+    "/static/assets",
+    express.static(path.join(settings.serverRoot, "static", "assets"))
+);
+
+app.get("/", (req, res) => {
+    return res.render("home.html");
+});
+
+app.get("/clusters/:clusterId", (req, res) => {
+    return res.render("cluster.html");
+});
+
+app.get("/databases/:databaseId", (req, res) => {
+    return res.render("database.html");
+});
+
+app.listen(settings.port, "0.0.0.0", () => {
+    console.log(`Server is running on ${settings.port} port`);
+});
diff --git a/src/server/src/settings.ts b/packages/server/src/settings.ts
similarity index 100%
rename from src/server/src/settings.ts
rename to packages/server/src/settings.ts
diff --git a/packages/server/static/css/color.default.css b/packages/server/static/css/color.default.css
new file mode 100644
index 0000000..5f0f573
--- /dev/null
+++ b/packages/server/static/css/color.default.css
@@ -0,0 +1,6 @@
+:root {
+ --blue_1:#769FCD; 
+ --blue_2:#B9D7EA;
+ --blue_3: #D6E6F2;
+ --blue_4: #F7FBFC;
+}
\ No newline at end of file
diff --git a/packages/server/static/css/font.default.css b/packages/server/static/css/font.default.css
new file mode 100644
index 0000000..8633287
--- /dev/null
+++ b/packages/server/static/css/font.default.css
@@ -0,0 +1,29 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+.text-1, .text-2, .text-3 {
+    font-family: "Open Sans", sans-serif;
+}
+
+.text-1 {
+    font-size: 2rem;
+}
+
+.text-2 {
+    font-size: 1.7rem;
+}
+
+.text-3 {
+    font-size: 1.4rem;
+}
+
+.text-4 {
+    font-size: 1.2rem;
+}
+
+.text-5 {
+    font-size: 1rem;
+}
+
+.text-6 {
+    font-size: 0.7rem;
+}
diff --git a/packages/server/static/css/layouts/layout.default.css b/packages/server/static/css/layouts/layout.default.css
new file mode 100644
index 0000000..6319d7c
--- /dev/null
+++ b/packages/server/static/css/layouts/layout.default.css
@@ -0,0 +1,30 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    padding: 0px;
+    margin: 0px;
+}
+
+._body {
+}
+
+.body {
+
+    
+    max-width: 1440px;
+    width: 100%;
+    height: 100%;
+
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+
+    margin: auto;
+    padding:16px;
+}
+
+.box-1 {
+    
+}
\ No newline at end of file
diff --git a/packages/server/static/css/layouts/layout.documentation.css b/packages/server/static/css/layouts/layout.documentation.css
new file mode 100644
index 0000000..6319d7c
--- /dev/null
+++ b/packages/server/static/css/layouts/layout.documentation.css
@@ -0,0 +1,30 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    padding: 0px;
+    margin: 0px;
+}
+
+._body {
+}
+
+.body {
+
+    
+    max-width: 1440px;
+    width: 100%;
+    height: 100%;
+
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+
+    margin: auto;
+    padding:16px;
+}
+
+.box-1 {
+    
+}
\ No newline at end of file
diff --git a/src/server/static/templates/include/layout.njk b/packages/server/static/css/pages/database.css
similarity index 100%
rename from src/server/static/templates/include/layout.njk
rename to packages/server/static/css/pages/database.css
diff --git a/packages/server/static/css/pages/home.css b/packages/server/static/css/pages/home.css
new file mode 100644
index 0000000..0f2a121
--- /dev/null
+++ b/packages/server/static/css/pages/home.css
@@ -0,0 +1,7 @@
+.section {
+    padding-top: 32px;
+}
+
+.section-content {
+    padding-top: 8px;
+}
\ No newline at end of file
diff --git a/packages/server/static/img/logo.png b/packages/server/static/img/logo.png
new file mode 100644
index 0000000..2a0308b
Binary files /dev/null and b/packages/server/static/img/logo.png differ
diff --git a/src/server/static/templates/_index.html b/packages/server/static/templates/_index.html
similarity index 100%
rename from src/server/static/templates/_index.html
rename to packages/server/static/templates/_index.html
diff --git a/src/server/static/templates/page/erd.njk b/packages/server/static/templates/cluster.html
similarity index 100%
rename from src/server/static/templates/page/erd.njk
rename to packages/server/static/templates/cluster.html
diff --git a/packages/server/static/templates/database.html b/packages/server/static/templates/database.html
new file mode 100644
index 0000000..c9a6919
--- /dev/null
+++ b/packages/server/static/templates/database.html
@@ -0,0 +1,108 @@
+<head>
+    <link rel="icon" href="/static/img/logo.png" type="image/icon type">
+    <link rel="stylesheet" href="/static/css/font.default.css">
+    <link rel="stylesheet" href="/static/css/layouts/layout.default.css">
+    <link rel="stylesheet" href="/static/css/pages/database.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  </head>
+
+<div class="_body">
+    
+<div class="body">
+
+  <!-- Global Bar -->
+  <div style="display:flex; width:100%; align-items: center;">
+    <div is="d-logo" size="50px"></div>
+    <div style="padding-left:32px;"></div>
+    <div style="flex-grow:1;"> 
+      <div is="serachbar">
+        <div style="display:flex; border: 1px solid #769FCD; padding:8px; border-radius: 0px;">
+          <div><span class="material-symbols-outlined">search</span></div>
+          <input style="border:none; width:100%; outline:none; font-size:1rem;">
+        </div>
+      </div>
+    </div>
+    <div style="padding-left:32px;"></div>
+  </div>
+
+  <!-- Header of Contents -->
+  <div style="display:flex; flex-grow:1; flex-direction: column; width:100%;">
+    <div is="d-database-doc" database="ExampleDatabase"></div>
+    <div style="margin-top:16px; margin-bottom: 16px;">
+      <div class="text-1"> ExampleDatabase </div>
+      <div style="display:flex; gap:16px;">
+        <div class="text-4">Cluster Name</div>
+        <div class="text-4"> Shard Name</div>
+      </div>
+    </div>
+
+    <div is="d-table-doc" table="User">
+    </div>
+
+    <div id="TableBoard" style="flex-grow:1;">
+      <div style="display:flex;">
+        <!-- Table Description -->
+        <div style="flex-grow:1;">
+          <div style="padding-bottom: 16px;">
+            <!-- Table Description -->
+            <div style="font-size: 2em; padding-bottom:8px;">User</div>
+            <div style="padding-left: 8px;">
+              This table is only for user. Never use in another service. only read.<br>
+              But only write in user services.
+            </div>
+          </div>
+
+          <div style="padding-bottom: 16px;">
+            <!-- Fields Header -->
+            <div class="text-3" style="padding-bottom:16px;">Fields</div>
+            <!-- Field Description Component -->
+            <div style="padding-left: 8px;">
+              <!-- Field Description Header -->
+              <div style="padding-bottom:8px;">
+                <div class="text-4"> id </div>
+                <div style="font-size:0.9em;">
+                  <span class="col-label">BIGINT(24)</span>
+                  <span class="col-label">UNSIGNED</span>
+                  <span class="col-label">PRIMARY KEY</span>
+                  <span class="col-label">AUTO_INCREMENT</span>
+                </div>
+
+
+
+              </div>
+              <div>
+                This is just for clustred index. don't use for relation.<br>
+                later this database will be sharded
+              </div>
+            </div>
+            <div style="display:flex;">
+
+            </div>
+
+          </div>
+
+        </div>
+        <!-- Table Details -->
+        <div style="flex-grow:1; max-width: 540px;">
+          <div>
+            Table References
+          </div>
+          <div>
+            ERD Table Example
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      footer
+    </div>
+  </div>
+
+</div>
+
+
+
+</div>
+
+<script src="/static/js/index.js"></script>
\ No newline at end of file
diff --git a/packages/server/static/templates/home.html b/packages/server/static/templates/home.html
new file mode 100644
index 0000000..a1ef715
--- /dev/null
+++ b/packages/server/static/templates/home.html
@@ -0,0 +1,73 @@
+<head>
+  <link rel="icon" href="/static/img/logo.png" type="image/icon type">
+  <link rel="stylesheet" href="/static/css/font.default.css">
+  <link rel="stylesheet" href="/static/css/layouts/layout.default.css">
+  <link rel="stylesheet" href="/static/css/pages/home.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+</head>
+
+<div class="_body">
+
+<div class="body">
+
+  <!-- Global Bar -->
+  <div style="display:flex; width:100%; align-items: center;">
+    <div is="d-logo" size="50px"></div>
+    <div style="padding-left:32px;"></div>
+    <div style="flex-grow:1;"> 
+      <div is="serachbar">
+        <div style="display:flex; border: 1px solid #769FCD; padding:8px; border-radius: 0px;">
+          <div><span class="material-symbols-outlined">search</span></div>
+          <input style="border:none; width:100%; outline:none; font-size:1rem;">
+        </div>
+      </div>
+    </div>
+    <div style="padding-left:32px;"></div>
+  </div>
+
+  <!-- Recent Item List -->
+  <div style="display:flex; flex-direction:column; width:100%;">
+    <div>
+      <div class="text-3 section"> Recently </div>
+      <div class="section-content">
+        <div is="d-recent-item-list"></div>
+      </div>
+    </div>
+
+    <div>
+      <div class="text-3 section"> Clusters </div>
+      <div class="section-content"> 
+        <div is="d-cluster-item-list"></div>
+      </div>
+    </div>
+
+    <div>
+      <div class="text-3 section"> Databases </div>
+      <div class="section-content"> 
+        <div is="d-database-item-list"></div>
+      </div>
+    </div>
+
+    <div>
+      <div class="text-3 section"> Tables </div>
+      <div class="section-content"> 
+        <div is="d-table-item-list"></div>
+      </div>
+    </div>
+
+
+  </div>
+
+  <div style="margin-top: auto;">  </div>
+</div>
+
+</div>
+
+
+<div style="display: flex;">
+    <div></div>
+    <div></div>
+</div>
+<div></div>
+
+<script src="/static/js/index.js"></script>
diff --git a/test/example/sqls/procedure-example.sql b/packages/server/static/templates/include/layout.njk
similarity index 100%
rename from test/example/sqls/procedure-example.sql
rename to packages/server/static/templates/include/layout.njk
diff --git a/packages/server/static/templates/index.html b/packages/server/static/templates/index.html
new file mode 100644
index 0000000..7bda7e2
--- /dev/null
+++ b/packages/server/static/templates/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple word count web component</title>
+  </head>
+  <body>
+    <div>
+      <!-- Header -->
+      <div style="padding-bottom:32px;"></div>
+    </div>
+    <div style="display:flex;">
+      <!-- Left Menu -->
+      <div style="padding-right: 32px;"> 
+        <div> Databases </div>
+      </div>
+      <!-- Contents -->
+      <div style="max-width:1440px; padding-right:32px;"> 
+        <div>
+          <h1>Word count rating widget</h1>
+
+          <article contenteditable="">
+            <h2>Sample heading</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar sed justo sed viverra. Aliquam ac scelerisque tellus. Vivamus porttitor nunc vel nibh rutrum hendrerit. Donec viverra vestibulum pretium. Mauris at eros vitae ante pellentesque bibendum. Etiam et blandit purus, nec aliquam libero. Etiam leo felis, pulvinar et diam id, sagittis pulvinar diam. Nunc pellentesque rutrum sapien, sed faucibus urna sodales in. Sed tortor nisl, egestas nec egestas luctus, faucibus vitae purus. Ut elit nunc, pretium eget fermentum id, accumsan et velit. Sed mattis velit diam, a elementum nunc facilisis sit amet.</p>
+            <p>Pellentesque ornare tellus sit amet massa tincidunt congue. Morbi cursus, tellus vitae pulvinar dictum, dui turpis faucibus ipsum, nec hendrerit augue nisi et enim. Curabitur felis metus, euismod et augue et, luctus dignissim metus. Mauris placerat tellus id efficitur ornare. Cras enim urna, vestibulum vel molestie vitae, mollis vitae eros. Sed lacinia scelerisque diam, a varius urna iaculis ut. Nam lacinia, velit consequat venenatis pellentesque, leo tortor porttitor est, sit amet accumsan ex lectus eget ipsum. Quisque luctus, ex ac fringilla tincidunt, risus mauris sagittis mauris, at iaculis mauris purus eget neque. Donec viverra in ex sed ullamcorper. In ac nisi vel enim accumsan feugiat et sed augue. Donec nisl metus, sollicitudin eu tempus a, scelerisque sed diam.</p>
+            <p is="word-count"></p>
+          </article>
+      
+        </div>
+      </div>
+    </div>
+
+
+    <script src="/static/js/index.js"></script>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/server/static/templates/page/erd.njk b/packages/server/static/templates/page/erd.njk
new file mode 100644
index 0000000..e69de29
diff --git a/src/server/tsconfig.json b/packages/server/tsconfig.json
similarity index 78%
rename from src/server/tsconfig.json
rename to packages/server/tsconfig.json
index 3b272d0..5daa3e8 100644
--- a/src/server/tsconfig.json
+++ b/packages/server/tsconfig.json
@@ -1,17 +1,12 @@
 {
+    "extends": "../../tsconfig.base.json",
     "compilerOptions": {
         "resolveJsonModule": true,
         "target": "ES5",
-        "lib": [
-            "ES2020",
-            "DOM"
-        ],
         "module": "CommonJS",
         "inlineSourceMap": true,
-        "rootDir": "./",
         "removeComments": true,
         "strict": true,
-        "baseUrl": "./src",
         "outDir": "./dest",
         "esModuleInterop": true,
         "skipLibCheck": true,
diff --git a/readme.kr.md b/readme.kr.md
new file mode 100644
index 0000000..cc52a2e
--- /dev/null
+++ b/readme.kr.md
@@ -0,0 +1,21 @@
+# sqlDoc
+
+SQLDoc은 Database와 관련된 문서를 효과적으로 생성하고 관리하는게 목표입니다.
+이를 통해서 거대한 Database에 대한 하나의 직관적인 Insight와 커뮤니케이션에서 오는 문제를 해결하고자 합니다.
+
+## Installation
+
+```bash
+
+```
+
+## Usage
+
+generate the documentation from `mytable.sql`, `myprocedure.sql` into `doc/`.
+
+```bash
+npm run start:server:watch
+npm run build:client:watch
+
+sqldoc -i mytable.sql myprocedure.sql -o doc/
+```
diff --git a/readme.md b/readme.md
index e1d1225..29331be 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 # sqlDoc
 
-sqlDoc creates a documentation from sql descriptions in your sql code.
+Hello Sql doc
 
 ## Installation
 
diff --git a/scripts/common.ts b/scripts/common.ts
index 64d1dd7..b591f75 100644
--- a/scripts/common.ts
+++ b/scripts/common.ts
@@ -1,8 +1,8 @@
 import path from "path";
 
 const projectRoot = path.resolve(path.dirname(__dirname));
-const serverRoot = path.join(projectRoot, "src", "server");
-const clientRoot = path.join(projectRoot, "src", "client");
+const serverRoot = path.join(projectRoot, "packages", "server");
+const clientRoot = path.join(projectRoot, "packages", "client");
 
 export default {
     projectRoot,
diff --git a/src/client/src/client.ts b/src/client/src/client.ts
deleted file mode 100644
index 5a41a6e..0000000
--- a/src/client/src/client.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { WordCount } from "component/table";
-import { parseCommentTable } from "../../lib/parser/comment_parser";
-import { exampleStrings } from "../test/example/sql";
-
-const SidebarWrapper = document.getElementById("SideBar");
-const TableBoardWrapper = document.getElementById("TableBoard");
-
-let exampleInput = exampleStrings;
-
-let parsedData = parseCommentTable(exampleInput);
-
-let sidebar = "";
-
-let contentBody = "";
-
-console.log(WordCount);
diff --git a/src/client/src/component/erd.ts b/src/client/src/component/erd.ts
deleted file mode 100644
index ef32346..0000000
--- a/src/client/src/component/erd.ts
+++ /dev/null
@@ -1 +0,0 @@
-console.log(":)");
\ No newline at end of file
diff --git a/src/server/src/index.ts b/src/server/src/index.ts
deleted file mode 100644
index cb74f8e..0000000
--- a/src/server/src/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import path from "path";
-import express from "express";
-import morgan from "morgan";
-import * as njk from "nunjucks";
-
-
-import settings from "./settings";
-
-const app = express();
-
-const njk_env = njk.configure(path.join(settings.serverRoot, 'static', 'templates'), 
-    {
-        "autoescape": true,
-        "watch": true,
-        "express": app
-    }
-);
-
-njk_env.addGlobal('isExpirationOut',(inputDatetime:string)=>{
-    const expiration = new Date(inputDatetime);
-    const current_date = new Date();
-
-    return 0 > (expiration.getTime() - current_date.getTime());
-});
-
-
-app.use(morgan(':method :url :status :res[content-length] - :response-time ms'));
-
-app.use('/static/js', express.static(path.join(settings.serverRoot, 'static', 'js')));
-app.use('/static/img', express.static(path.join(settings.serverRoot, 'static', 'img')));
-app.use('/static/assets', express.static(path.join(settings.serverRoot, 'static', 'assets')));
-
-app.get("/", (req, res)=>{
-    return res.render("index.html")
-})
-
-
-app.listen(settings.port, '0.0.0.0', ()=>{
-    console.log(`Server is running on ${settings.port} port`);
-});
\ No newline at end of file
diff --git a/src/server/static/templates/index.html b/src/server/static/templates/index.html
deleted file mode 100644
index 1b5322b..0000000
--- a/src/server/static/templates/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Simple word count web component</title>
-  </head>
-  <body>
-    <h1>Word count rating widget</h1>
-
-    <article contenteditable="">
-      <h2>Sample heading</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar sed justo sed viverra. Aliquam ac scelerisque tellus. Vivamus porttitor nunc vel nibh rutrum hendrerit. Donec viverra vestibulum pretium. Mauris at eros vitae ante pellentesque bibendum. Etiam et blandit purus, nec aliquam libero. Etiam leo felis, pulvinar et diam id, sagittis pulvinar diam. Nunc pellentesque rutrum sapien, sed faucibus urna sodales in. Sed tortor nisl, egestas nec egestas luctus, faucibus vitae purus. Ut elit nunc, pretium eget fermentum id, accumsan et velit. Sed mattis velit diam, a elementum nunc facilisis sit amet.</p>
-
-      <p>Pellentesque ornare tellus sit amet massa tincidunt congue. Morbi cursus, tellus vitae pulvinar dictum, dui turpis faucibus ipsum, nec hendrerit augue nisi et enim. Curabitur felis metus, euismod et augue et, luctus dignissim metus. Mauris placerat tellus id efficitur ornare. Cras enim urna, vestibulum vel molestie vitae, mollis vitae eros. Sed lacinia scelerisque diam, a varius urna iaculis ut. Nam lacinia, velit consequat venenatis pellentesque, leo tortor porttitor est, sit amet accumsan ex lectus eget ipsum. Quisque luctus, ex ac fringilla tincidunt, risus mauris sagittis mauris, at iaculis mauris purus eget neque. Donec viverra in ex sed ullamcorper. In ac nisi vel enim accumsan feugiat et sed augue. Donec nisl metus, sollicitudin eu tempus a, scelerisque sed diam.</p>
-
-      <p is="word-count"></p>
-    </article>
-
-    <script src="/static/js/index.js"></script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/test/example/mariadb/user/procedure-example.sql b/test/example/mariadb/user/procedure-example.sql
new file mode 100644
index 0000000..e69de29
diff --git a/test/example/mariadb/user/user.database.sql b/test/example/mariadb/user/user.database.sql
new file mode 100644
index 0000000..ea24337
--- /dev/null
+++ b/test/example/mariadb/user/user.database.sql
@@ -0,0 +1,7 @@
+/**
+ * @database [InnoDB] User
+ * This database is made of Tablef related user.
+ * This database is only for user. Never use in another service.
+ * Only Read. but Only write in User Service.
+*/
+CREATE DATABASE UserDatabase DEFAULT CHARACTER SET = 'utf8' COLLATE= 'utf8_general_ci';
diff --git a/test/example/mariadb/user/user.table.sql b/test/example/mariadb/user/user.table.sql
new file mode 100644
index 0000000..f99e86d
--- /dev/null
+++ b/test/example/mariadb/user/user.table.sql
@@ -0,0 +1,61 @@
+use UserDatabase;
+
+/**
+ * @table [InnoDB] User
+ * This table is user Table.
+ * This table is only for user. Never use in another service.
+ * Only Read. but Only write in User Service.
+ *
+ * @tableColumn {BIGINT UNSIGNED} [PRIMARY KEY, AUTO_INCREMENT]     id 
+ * This is just for clustred index. don't use for relation.
+ * later this database will be sharded.
+ *
+ * @tableColumn {TINYINT UNSIGNED} [DEFAULT=0]                      type
+ * 0 is Anonymous user.
+ * 1 is Authenticated user.
+ * 2 is Admin.
+ * 3 is Super Admin.
+ * @tableColumn {DATETIME} [DEFAULT=CURRENT_TIMESTAMP]              joinDate
+ * Just signed date.
+ * @tableColumn {VARCHAR(64)} [UNIQUE, NOT NULL]                    userEmail
+ * For resetting password.
+ * @tableColumn {VARCHAR(24)} [UNIQUE, NOT NULL]                    username 
+ * For login.
+ * @tableColumn {VARCHAR(24)} [NOT NULL]                            nickname
+ * For exposing to other.
+ * @tableColumn {VARCHAR(24)} [UNIQUE, NOT NULL]                    password
+ * This column is stored as encrypted value.
+*/
+CREATE TABLE `User`(
+    `id` BIGINT(24) UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `type`   		TINYINT UNSIGNED NOT NULL DEFAULT 0,
+    `joinDate` 		DATETIME DEFAULT CURRENT_TIMESTAMP,
+    `userEmail` 	VARCHAR(64) UNIQUE NOT NULL
+    `username` 		VARCHAR(24) UNIQUE NOT NULL,
+    `nickname`		VARCHAR(24) NOT NULL,
+    `password`		VARCHAR(64) NOT NULL,
+) ENGINE = InnoDB;
+
+/**
+ * @table [InnoDB] Page
+ * This is for storing content written by User.
+ *
+ * @tableColumn {BIGINT UNSIGNED} [PRIMARY KEY, AUTO_INCREMENT]     id 
+ * This is just for clustred index. don't use for relation.
+ * later this database will be sharded.
+ * use userId with createDate instead of this.
+ * @tableColumn {BIGINT UNSIGNED} [FOREIGN KEY]                     userId
+ * @tableColumn {DATETIME} [DEFAULT=CURRENT_TIMESTAMP]              text
+ * @tableColumn {VARCHAR(24)} [UNIQUE, NOT NULL]                    createDate
+*/
+CREATE TABLE `Page`(
+    `id` 			BIGINT(24) UNSIGNED PRIMARY KEY AUTO_INCREMENT,
+    `userId`		BIGINT(24) UNSIGNED,
+    `title`			VARCHAR(24) NOT NULL,
+    `text`			TEXT default NULL,
+    `createDate` 	DATETIME DEFAULT CURRENT_TIMESTAMP
+
+    CONSTRAINT `FK_Page_User`
+        FOREIGN KEY(`userId`) REFERENCES User(`id`)
+    ON DELETE CASCADE
+) ENGINE = InnoDB;
\ No newline at end of file
diff --git a/test/example/sqls/table-example.sql b/test/example/sqls/table-example.sql
deleted file mode 100644
index 646d48e..0000000
--- a/test/example/sqls/table-example.sql
+++ /dev/null
@@ -1,62 +0,0 @@
-CREATE DATABASE SqldocExampleDatabase DEFAULT CHARACTER SET = 'utf8' COLLATE= 'utf8_general_ci';
-use SqldocExampleDatabase;
-
-/**
- * @table [InnoDB] User
- * This table is user Table.
- * This table is only for user. Never use in another service.
- * Only Read. but Only write in User Service.
- *
- * @tableColumn {BIGINT UNSIGNED} [PRIMARY KEY, AUTO_INCREMENT]		id 
- * This is just for clustred index. don't use for relation.
- * later this database will be sharded.
- *
- * @tableColumn {TINYINT UNSIGNED} [DEFAULT=0] 						type
- * 0 is Anonymous user.
- * 1 is Authenticated user.
- * 2 is Admin.
- * 3 is Super Admin.
- * @tableColumn {DATETIME} [DEFAULT=CURRENT_TIMESTAMP] 				joinDate
- * Just signed date.
- * @tableColumn {VARCHAR(64)} [UNIQUE, NOT NULL]			 		userEmail
- * For resetting password.
- * @tableColumn {VARCHAR(24)} [UNIQUE, NOT NULL] 					username 
- * For login.
- * @tableColumn {VARCHAR(24)} [NOT NULL] 							nickname
- * For exposing to other.
- * @tableColumn {VARCHAR(24)} [UNIQUE, NOT NULL] 					password
- * This column is stored as encrypted value.
-*/
-CREATE TABLE `User`(
-	`id` BIGINT(24) UNSIGNED PRIMARY KEY AUTO_INCREMENT,
-	`type`   		TINYINT UNSIGNED NOT NULL DEFAULT 0,
-	`joinDate` 		DATETIME DEFAULT CURRENT_TIMESTAMP,
-	`userEmail` 	VARCHAR(64) UNIQUE NOT NULL
-	`username` 		VARCHAR(24) UNIQUE NOT NULL,
-	`nickname`		VARCHAR(24) NOT NULL,
-	`password`		VARCHAR(64) NOT NULL,
-) ENGINE = InnoDB;
-
-/**
- * @table [InnoDB] Page
- * This is for storing content written by User.
- *
- * @tableColumn {BIGINT UNSIGNED} [PRIMARY KEY, AUTO_INCREMENT]		id 
- * This is just for clustred index. don't use for relation.
- * later this database will be sharded.
- * use userId with createDate instead of this.
- * @tableColumn {BIGINT UNSIGNED} [FOREIGN KEY]						userId
- * @tableColumn {DATETIME} [DEFAULT=CURRENT_TIMESTAMP] 				text
- * @tableColumn {VARCHAR(24)} [UNIQUE, NOT NULL] 					createDate
-*/
-CREATE TABLE `Page`(
-	`id` 			BIGINT(24) UNSIGNED PRIMARY KEY AUTO_INCREMENT,
-	`userId`		BIGINT(24) UNSIGNED,
-	`title`			VARCHAR(24) NOT NULL,
-	`text`			TEXT default NULL,
-	`createDate` 	DATETIME DEFAULT CURRENT_TIMESTAMP
-
-	CONSTRAINT `FK_Page_User`
-		FOREIGN KEY(`userId`) REFERENCES User(`id`)
-	ON DELETE CASCADE
-) ENGINE = InnoDB;
\ No newline at end of file
diff --git a/test/unit/parse-sql.spec.ts b/test/unit/parse-sql.spec.ts
index b571823..6003365 100644
--- a/test/unit/parse-sql.spec.ts
+++ b/test/unit/parse-sql.spec.ts
@@ -1,7 +1,7 @@
 import path from "path";
 import fs from "fs";
-import { ParserInputParameter } from "lib/parser/types/common";
-import { parseCommentTable } from "../../src/lib/parser/comment_parser";
+import { ParserInputParameter } from "../../libs/core/parser/types/common";
+import { parseCommentTable } from "../../libs/core/parser/comment_parser";
 
 // Helper
 function getRawStrings(inputString: ParserInputParameter) {
@@ -20,7 +20,7 @@ describe("Parsing SQL", () => {
     it("Should parse a sql file", async () => {
         const parsed_table = parseCommentTable(
             getRawStrings({
-                inputFilePath: "../example/sqls/table-example.sql",
+                inputFilePath: "../example/mariadb/user/user.table.sql",
                 callerFilePath: __dirname,
             })!
         );
diff --git a/todos.md b/todos.md
new file mode 100644
index 0000000..255b993
--- /dev/null
+++ b/todos.md
@@ -0,0 +1,9 @@
+### Cluster Documentation
+
+### Database Documentation
+
+### Table Documentation
+
+### Test Data Generation
+
+### Realtime Documentation update
diff --git a/tsconfig.json b/tsconfig.base.json
similarity index 72%
rename from tsconfig.json
rename to tsconfig.base.json
index cdef2d4..302d6e1 100644
--- a/tsconfig.json
+++ b/tsconfig.base.json
@@ -1,20 +1,19 @@
 {
     "compilerOptions": {
-        "resolveJsonModule": true,
-        "target": "ES5",
-        "lib": ["ES2020", "DOM"],
-        "module": "CommonJS",
         "inlineSourceMap": true,
         "rootDir": "./",
         "removeComments": true,
         "strict": true,
-        "baseUrl": "./src",
+        "baseUrl": ".",
         "outDir": "./dest",
         "esModuleInterop": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true,
         "downlevelIteration": true,
         "importHelpers": true,
+        "paths": {
+            "@core": ["libs/core/src"],
+        }
     },
     "include":["./**/*.ts"],
     "exclude": [