diff --git a/.github/workflows/verify-pr-build.yaml b/.github/workflows/verify-pr-build.yaml
index 1ca1a43..99fb022 100644
--- a/.github/workflows/verify-pr-build.yaml
+++ b/.github/workflows/verify-pr-build.yaml
@@ -24,9 +24,9 @@ jobs:
 
       - name: Create .env file
         run: |
-          touch ./packages/sdk/.env
-          echo API_USERNAME=${{ secrets.API_USERNAME }} >> ./packages/sdk/.env
-          echo API_PASSWORD=${{ secrets.API_PASSWORD }} >> ./packages/sdk/.env
+          touch ./shared/sdk/.env
+          echo API_USERNAME=${{ secrets.API_USERNAME }} >> ./shared/sdk/.env
+          echo API_PASSWORD=${{ secrets.API_PASSWORD }} >> ./shared/sdk/.env
 
       - run: npx nx format:check
       - run: npx nx affected -t lint,test,build --parallel=3
diff --git a/README.md b/README.md
index 5a3c009..69fcf1f 100755
--- a/README.md
+++ b/README.md
@@ -2,13 +2,13 @@
 
 Repo for practicing different tools
 
-List of things being practiced
+List of things done so far
 
-- Created NX workspace
-- Created react app via nx
-- Created ui lib via nx
-- Added storybook in ui lib via nx
-- Added i18n translations
-- Added locize integration
-- Added github action to verify build of affected nx projects
-- Added Api class in sdk lib to provie an interfaace for fetching
+- [x] Created nx workspace
+- [x] Created react app via nx
+- [x] Created ui lib via nx
+- [x] Added storybook in ui lib via nx
+- [x] Added i18n translations
+- [x] Added locize integration
+- [x] Added github action to verify lint, test & build of affected nx projects
+- [x] Added Api class in sdk lib to provide an interfaace for fetching
diff --git a/apps/asdf/.env.sample b/apps/asdf/.env.sample
index 4376f8c..da8075e 100644
--- a/apps/asdf/.env.sample
+++ b/apps/asdf/.env.sample
@@ -1,2 +1,2 @@
 LOCIZE_PROJECT_ID=your-locize-project-id
-LOCIZE_API_KEY=your-locize-api-key
\ No newline at end of file
+LOCIZE_API_KEY=your-locize-api-key
diff --git a/apps/asdf/vite.config.ts b/apps/asdf/vite.config.ts
index 321e205..f9229ab 100755
--- a/apps/asdf/vite.config.ts
+++ b/apps/asdf/vite.config.ts
@@ -47,5 +47,6 @@ export default defineConfig({
       reportsDirectory: '../../coverage/apps/asdf',
       provider: 'v8',
     },
+    passWithNoTests: true,
   },
 });
diff --git a/packages/ui/src/styles/mvp.css b/packages/ui/src/styles/mvp.css
deleted file mode 100644
index 7a64dac..0000000
--- a/packages/ui/src/styles/mvp.css
+++ /dev/null
@@ -1,536 +0,0 @@
-/* MVP.css v1.14 - https://github.com/andybrewer/mvp */
-
-:root {
-    --active-brightness: 0.85;
-    --border-radius: 5px;
-    --box-shadow: 2px 2px 10px;
-    --color-accent: #118bee15;
-    --color-bg: #fff;
-    --color-bg-secondary: #e9e9e9;
-    --color-link: #118bee;
-    --color-secondary: #920de9;
-    --color-secondary-accent: #920de90b;
-    --color-shadow: #f4f4f4;
-    --color-table: #118bee;
-    --color-text: #000;
-    --color-text-secondary: #999;
-    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    --hover-brightness: 1.2;
-    --justify-important: center;
-    --justify-normal: left;
-    --line-height: 1.5;
-    --width-card: 285px;
-    --width-card-medium: 460px;
-    --width-card-wide: 800px;
-    --width-content: 1080px;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root[color-mode="user"] {
-        --color-accent: #0097fc4f;
-        --color-bg: #333;
-        --color-bg-secondary: #555;
-        --color-link: #0097fc;
-        --color-secondary: #e20de9;
-        --color-secondary-accent: #e20de94f;
-        --color-shadow: #bbbbbb20;
-        --color-table: #0097fc;
-        --color-text: #f7f7f7;
-        --color-text-secondary: #aaa;
-    }
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
-}
-
-/* Layout */
-article aside {
-    background: var(--color-secondary-accent);
-    border-left: 4px solid var(--color-secondary);
-    padding: 0.01rem 0.8rem;
-}
-
-body {
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: var(--font-family);
-    line-height: var(--line-height);
-    margin: 0;
-    overflow-x: hidden;
-    padding: 0;
-}
-
-footer,
-header,
-main {
-    margin: 0 auto;
-    max-width: var(--width-content);
-    padding: 3rem 1rem;
-}
-
-hr {
-    background-color: var(--color-bg-secondary);
-    border: none;
-    height: 1px;
-    margin: 4rem 0;
-    width: 100%;
-}
-
-section {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: var(--justify-important);
-}
-
-section img,
-article img {
-    max-width: 100%;
-}
-
-section pre {
-    overflow: auto;
-}
-
-section aside {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    margin: 1rem;
-    padding: 1.25rem;
-    width: var(--width-card);
-}
-
-section aside:hover {
-    box-shadow: var(--box-shadow) var(--color-bg-secondary);
-}
-
-[hidden] {
-    display: none;
-}
-
-/* Headers */
-article header,
-div header,
-main header {
-    padding-top: 0;
-}
-
-header {
-    text-align: var(--justify-important);
-}
-
-header a b,
-header a em,
-header a i,
-header a strong {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-}
-
-header nav img {
-    margin: 1rem 0;
-}
-
-section header {
-    padding-top: 0;
-    width: 100%;
-}
-
-/* Nav */
-nav {
-    align-items: center;
-    display: flex;
-    font-weight: bold;
-    justify-content: space-between;
-    margin-bottom: 7rem;
-}
-
-nav ul {
-    list-style: none;
-    padding: 0;
-}
-
-nav ul li {
-    display: inline-block;
-    margin: 0 0.5rem;
-    position: relative;
-    text-align: left;
-}
-
-/* Nav Dropdown */
-nav ul li:hover ul {
-    display: block;
-}
-
-nav ul li ul {
-    background: var(--color-bg);
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    display: none;
-    height: auto;
-    left: -2px;
-    padding: .5rem 1rem;
-    position: absolute;
-    top: 1.7rem;
-    white-space: nowrap;
-    width: auto;
-    z-index: 1;
-}
-
-nav ul li ul::before {
-    /* fill gap above to make mousing over them easier */
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -0.5rem;
-    height: 0.5rem;
-}
-
-nav ul li ul li,
-nav ul li ul li a {
-    display: block;
-}
-
-/* Typography */
-code,
-samp {
-    background-color: var(--color-accent);
-    border-radius: var(--border-radius);
-    color: var(--color-text);
-    display: inline-block;
-    margin: 0 0.1rem;
-    padding: 0 0.5rem;
-}
-
-details {
-    margin: 1.3rem 0;
-}
-
-details summary {
-    font-weight: bold;
-    cursor: pointer;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    line-height: var(--line-height);
-    text-wrap: balance;
-}
-
-mark {
-    padding: 0.1rem;
-}
-
-ol li,
-ul li {
-    padding: 0.2rem 0;
-}
-
-p {
-    margin: 0.75rem 0;
-    padding: 0;
-    width: 100%;
-}
-
-pre {
-    margin: 1rem 0;
-    max-width: var(--width-card-wide);
-    padding: 1rem 0;
-}
-
-pre code,
-pre samp {
-    display: block;
-    max-width: var(--width-card-wide);
-    padding: 0.5rem 2rem;
-    white-space: pre-wrap;
-}
-
-small {
-    color: var(--color-text-secondary);
-}
-
-sup {
-    background-color: var(--color-secondary);
-    border-radius: var(--border-radius);
-    color: var(--color-bg);
-    font-size: xx-small;
-    font-weight: bold;
-    margin: 0.2rem;
-    padding: 0.2rem 0.3rem;
-    position: relative;
-    top: -2px;
-}
-
-/* Links */
-a {
-    color: var(--color-link);
-    display: inline-block;
-    font-weight: bold;
-    text-decoration: underline;
-}
-
-a:active {
-    filter: brightness(var(--active-brightness));
-}
-
-a:hover {
-    filter: brightness(var(--hover-brightness));
-}
-
-a b,
-a em,
-a i,
-a strong,
-button,
-input[type="submit"] {
-    border-radius: var(--border-radius);
-    display: inline-block;
-    font-size: medium;
-    font-weight: bold;
-    line-height: var(--line-height);
-    margin: 0.5rem 0;
-    padding: 1rem 2rem;
-}
-
-button,
-input[type="submit"] {
-    font-family: var(--font-family);
-}
-
-button:active,
-input[type="submit"]:active {
-    filter: brightness(var(--active-brightness));
-}
-
-button:hover,
-input[type="submit"]:hover {
-    cursor: pointer;
-    filter: brightness(var(--hover-brightness));
-}
-
-a b,
-a strong,
-button,
-input[type="submit"] {
-    background-color: var(--color-link);
-    border: 2px solid var(--color-link);
-    color: var(--color-bg);
-}
-
-a em,
-a i {
-    border: 2px solid var(--color-link);
-    border-radius: var(--border-radius);
-    color: var(--color-link);
-    display: inline-block;
-    padding: 1rem 2rem;
-}
-
-article aside a {
-    color: var(--color-secondary);
-}
-
-/* Images */
-figure {
-    margin: 0;
-    padding: 0;
-}
-
-figure img {
-    max-width: 100%;
-}
-
-figure figcaption {
-    color: var(--color-text-secondary);
-}
-
-/* Forms */
-button:disabled,
-input:disabled {
-    background: var(--color-bg-secondary);
-    border-color: var(--color-bg-secondary);
-    color: var(--color-text-secondary);
-    cursor: not-allowed;
-}
-
-button[disabled]:hover,
-input[type="submit"][disabled]:hover {
-    filter: none;
-}
-
-form {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    display: block;
-    max-width: var(--width-card-wide);
-    min-width: var(--width-card);
-    padding: 1.5rem;
-    text-align: var(--justify-normal);
-}
-
-form header {
-    margin: 1.5rem 0;
-    padding: 1.5rem 0;
-}
-
-input,
-label,
-select,
-textarea {
-    display: block;
-    font-size: inherit;
-    max-width: var(--width-card-wide);
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-    display: inline-block;
-}
-
-input[type="checkbox"]+label,
-input[type="radio"]+label {
-    display: inline-block;
-    font-weight: normal;
-    position: relative;
-    top: 1px;
-}
-
-input[type="range"] {
-    padding: 0.4rem 0;
-}
-
-input,
-select,
-textarea {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    margin-bottom: 1rem;
-    padding: 0.4rem 0.8rem;
-}
-
-input[type="text"],
-textarea {
-    width: calc(100% - 1.6rem);
-}
-
-input[readonly],
-textarea[readonly] {
-    background-color: var(--color-bg-secondary);
-}
-
-label {
-    font-weight: bold;
-    margin-bottom: 0.2rem;
-}
-
-/* Popups */
-dialog {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 50%;
-    z-index: 999;
-}
-
-/* Tables */
-table {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    border-spacing: 0;
-    display: inline-block;
-    max-width: 100%;
-    overflow-x: auto;
-    padding: 0;
-    white-space: nowrap;
-}
-
-table td,
-table th,
-table tr {
-    padding: 0.4rem 0.8rem;
-    text-align: var(--justify-important);
-}
-
-table thead {
-    background-color: var(--color-table);
-    border-collapse: collapse;
-    border-radius: var(--border-radius);
-    color: var(--color-bg);
-    margin: 0;
-    padding: 0;
-}
-
-table thead th:first-child {
-    border-top-left-radius: var(--border-radius);
-}
-
-table thead th:last-child {
-    border-top-right-radius: var(--border-radius);
-}
-
-table thead th:first-child,
-table tr td:first-child {
-    text-align: var(--justify-normal);
-}
-
-table tr:nth-child(even) {
-    background-color: var(--color-accent);
-}
-
-/* Quotes */
-blockquote {
-    display: block;
-    font-size: x-large;
-    line-height: var(--line-height);
-    margin: 1rem auto;
-    max-width: var(--width-card-medium);
-    padding: 1.5rem 1rem;
-    text-align: var(--justify-important);
-}
-
-blockquote footer {
-    color: var(--color-text-secondary);
-    display: block;
-    font-size: small;
-    line-height: var(--line-height);
-    padding: 1.5rem 0;
-}
-
-/* Scrollbars */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: rgb(202, 202, 232) auto;
-}
-
-*::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-}
-
-*::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-    background-color: rgb(202, 202, 232);
-    border-radius: 10px;
-}
diff --git a/packages/sdk/.env.sample b/shared/sdk/.env.sample
similarity index 79%
rename from packages/sdk/.env.sample
rename to shared/sdk/.env.sample
index 0ecce7a..30cdeac 100644
--- a/packages/sdk/.env.sample
+++ b/shared/sdk/.env.sample
@@ -1,4 +1,4 @@
 # for Api tests
 # https://dummyjson.com/docs/auth
 API_USERNAME=...
-API_PASSWORD=...
\ No newline at end of file
+API_PASSWORD=...
diff --git a/packages/sdk/.eslintrc.json b/shared/sdk/.eslintrc.json
similarity index 100%
rename from packages/sdk/.eslintrc.json
rename to shared/sdk/.eslintrc.json
diff --git a/packages/sdk/.swcrc b/shared/sdk/.swcrc
similarity index 100%
rename from packages/sdk/.swcrc
rename to shared/sdk/.swcrc
diff --git a/packages/sdk/README.md b/shared/sdk/README.md
similarity index 100%
rename from packages/sdk/README.md
rename to shared/sdk/README.md
diff --git a/packages/sdk/jest-setup.ts b/shared/sdk/jest-setup.ts
similarity index 100%
rename from packages/sdk/jest-setup.ts
rename to shared/sdk/jest-setup.ts
diff --git a/packages/sdk/jest.config.ts b/shared/sdk/jest.config.ts
similarity index 87%
rename from packages/sdk/jest.config.ts
rename to shared/sdk/jest.config.ts
index bed2101..1202821 100644
--- a/packages/sdk/jest.config.ts
+++ b/shared/sdk/jest.config.ts
@@ -14,7 +14,7 @@ if (swcJestConfig.swcrc === undefined) {
 }
 
 // Uncomment if using global setup/teardown files being transformed via swc
-// https://nx.dev/packages/jest/documents/overview#global-setup/teardown-with-nx-libraries
+// https://nx.dev/shared/jest/documents/overview#global-setup/teardown-with-nx-libraries
 // jest needs EsModule Interop to find the default exported setup/teardown functions
 // swcJestConfig.module.noInterop = false;
 
@@ -26,6 +26,6 @@ export default {
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   testEnvironment: 'node',
-  coverageDirectory: '../../coverage/packages/sdk',
+  coverageDirectory: '../../coverage/shared/sdk',
   setupFiles: ['./jest-setup.ts'],
 };
diff --git a/packages/sdk/package.json b/shared/sdk/package.json
similarity index 100%
rename from packages/sdk/package.json
rename to shared/sdk/package.json
diff --git a/packages/sdk/project.json b/shared/sdk/project.json
similarity index 68%
rename from packages/sdk/project.json
rename to shared/sdk/project.json
index 4bb959f..4d5cb2d 100644
--- a/packages/sdk/project.json
+++ b/shared/sdk/project.json
@@ -1,18 +1,18 @@
 {
   "name": "sdk",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/sdk/src",
+  "sourceRoot": "shared/sdk/src",
   "projectType": "library",
   "targets": {
     "build": {
       "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/packages/sdk",
-        "main": "packages/sdk/src/index.ts",
-        "tsConfig": "packages/sdk/tsconfig.lib.json",
+        "outputPath": "dist/shared/sdk",
+        "main": "shared/sdk/src/index.ts",
+        "tsConfig": "shared/sdk/tsconfig.lib.json",
         "assets": [],
-        "project": "packages/sdk/package.json",
+        "project": "shared/sdk/package.json",
         "compiler": "swc",
         "format": ["cjs", "esm"]
       }
@@ -25,7 +25,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "packages/sdk/jest.config.ts"
+        "jestConfig": "shared/sdk/jest.config.ts"
       }
     }
   },
diff --git a/packages/sdk/src/index.ts b/shared/sdk/src/index.ts
similarity index 100%
rename from packages/sdk/src/index.ts
rename to shared/sdk/src/index.ts
diff --git a/packages/sdk/src/lib/Api/Api.spec.ts b/shared/sdk/src/lib/Api/Api.spec.ts
similarity index 100%
rename from packages/sdk/src/lib/Api/Api.spec.ts
rename to shared/sdk/src/lib/Api/Api.spec.ts
diff --git a/packages/sdk/src/lib/Api/Api.ts b/shared/sdk/src/lib/Api/Api.ts
similarity index 100%
rename from packages/sdk/src/lib/Api/Api.ts
rename to shared/sdk/src/lib/Api/Api.ts
diff --git a/packages/sdk/src/lib/Api/IApi.ts b/shared/sdk/src/lib/Api/IApi.ts
similarity index 100%
rename from packages/sdk/src/lib/Api/IApi.ts
rename to shared/sdk/src/lib/Api/IApi.ts
diff --git a/packages/sdk/src/lib/Api/index.ts b/shared/sdk/src/lib/Api/index.ts
similarity index 100%
rename from packages/sdk/src/lib/Api/index.ts
rename to shared/sdk/src/lib/Api/index.ts
diff --git a/packages/sdk/src/lib/Api/types.ts b/shared/sdk/src/lib/Api/types.ts
similarity index 100%
rename from packages/sdk/src/lib/Api/types.ts
rename to shared/sdk/src/lib/Api/types.ts
diff --git a/packages/sdk/tsconfig.json b/shared/sdk/tsconfig.json
similarity index 100%
rename from packages/sdk/tsconfig.json
rename to shared/sdk/tsconfig.json
diff --git a/packages/sdk/tsconfig.lib.json b/shared/sdk/tsconfig.lib.json
similarity index 100%
rename from packages/sdk/tsconfig.lib.json
rename to shared/sdk/tsconfig.lib.json
diff --git a/packages/sdk/tsconfig.spec.json b/shared/sdk/tsconfig.spec.json
similarity index 100%
rename from packages/sdk/tsconfig.spec.json
rename to shared/sdk/tsconfig.spec.json
diff --git a/packages/ui/.babelrc b/shared/ui/.babelrc
similarity index 100%
rename from packages/ui/.babelrc
rename to shared/ui/.babelrc
diff --git a/packages/ui/.eslintrc.json b/shared/ui/.eslintrc.json
similarity index 100%
rename from packages/ui/.eslintrc.json
rename to shared/ui/.eslintrc.json
diff --git a/packages/ui/.storybook/main.ts b/shared/ui/.storybook/main.ts
similarity index 100%
rename from packages/ui/.storybook/main.ts
rename to shared/ui/.storybook/main.ts
diff --git a/packages/ui/.storybook/preview.ts b/shared/ui/.storybook/preview.ts
similarity index 100%
rename from packages/ui/.storybook/preview.ts
rename to shared/ui/.storybook/preview.ts
diff --git a/packages/ui/README.md b/shared/ui/README.md
similarity index 100%
rename from packages/ui/README.md
rename to shared/ui/README.md
diff --git a/packages/ui/jest.config.ts b/shared/ui/jest.config.ts
similarity index 85%
rename from packages/ui/jest.config.ts
rename to shared/ui/jest.config.ts
index 2337cb6..8f250c3 100644
--- a/packages/ui/jest.config.ts
+++ b/shared/ui/jest.config.ts
@@ -7,5 +7,5 @@ export default {
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/packages/ui',
+  coverageDirectory: '../../coverage/shared/ui',
 };
diff --git a/packages/ui/package.json b/shared/ui/package.json
similarity index 100%
rename from packages/ui/package.json
rename to shared/ui/package.json
diff --git a/packages/ui/project.json b/shared/ui/project.json
similarity index 72%
rename from packages/ui/project.json
rename to shared/ui/project.json
index 3091387..b4713f2 100644
--- a/packages/ui/project.json
+++ b/shared/ui/project.json
@@ -1,7 +1,7 @@
 {
   "name": "ui",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/ui/src",
+  "sourceRoot": "shared/ui/src",
   "projectType": "library",
   "tags": [],
   "targets": {
@@ -13,16 +13,16 @@
       "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/packages/ui",
-        "tsConfig": "packages/ui/tsconfig.lib.json",
-        "project": "packages/ui/package.json",
-        "entryFile": "packages/ui/src/index.ts",
+        "outputPath": "dist/shared/ui",
+        "tsConfig": "shared/ui/tsconfig.lib.json",
+        "project": "shared/ui/package.json",
+        "entryFile": "shared/ui/src/index.ts",
         "external": ["react", "react-dom", "react/jsx-runtime"],
         "rollupConfig": "@nx/react/plugins/bundle-rollup",
         "compiler": "babel",
         "assets": [
           {
-            "glob": "packages/ui/README.md",
+            "glob": "shared/ui/README.md",
             "input": ".",
             "output": "."
           }
@@ -33,14 +33,14 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "packages/ui/jest.config.ts"
+        "jestConfig": "shared/ui/jest.config.ts"
       }
     },
     "storybook": {
       "executor": "@nx/storybook:storybook",
       "options": {
         "port": 4400,
-        "configDir": "packages/ui/.storybook"
+        "configDir": "shared/ui/.storybook"
       },
       "configurations": {
         "ci": {
@@ -53,7 +53,7 @@
       "outputs": ["{options.outputDir}"],
       "options": {
         "outputDir": "dist/storybook/ui",
-        "configDir": "packages/ui/.storybook"
+        "configDir": "shared/ui/.storybook"
       },
       "configurations": {
         "ci": {
@@ -64,7 +64,7 @@
     "test-storybook": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "test-storybook -c packages/ui/.storybook --url=http://localhost:4400"
+        "command": "test-storybook -c shared/ui/.storybook --url=http://localhost:4400"
       }
     }
   }
diff --git a/packages/ui/src/components/Button/Button.module.scss b/shared/ui/src/components/Button/Button.module.scss
similarity index 100%
rename from packages/ui/src/components/Button/Button.module.scss
rename to shared/ui/src/components/Button/Button.module.scss
diff --git a/packages/ui/src/components/Button/Button.spec.tsx b/shared/ui/src/components/Button/Button.spec.tsx
similarity index 100%
rename from packages/ui/src/components/Button/Button.spec.tsx
rename to shared/ui/src/components/Button/Button.spec.tsx
diff --git a/packages/ui/src/components/Button/Button.stories.tsx b/shared/ui/src/components/Button/Button.stories.tsx
similarity index 100%
rename from packages/ui/src/components/Button/Button.stories.tsx
rename to shared/ui/src/components/Button/Button.stories.tsx
diff --git a/packages/ui/src/components/Button/Button.tsx b/shared/ui/src/components/Button/Button.tsx
similarity index 100%
rename from packages/ui/src/components/Button/Button.tsx
rename to shared/ui/src/components/Button/Button.tsx
diff --git a/packages/ui/src/components/index.ts b/shared/ui/src/components/index.ts
similarity index 100%
rename from packages/ui/src/components/index.ts
rename to shared/ui/src/components/index.ts
diff --git a/packages/ui/src/index.ts b/shared/ui/src/index.ts
similarity index 100%
rename from packages/ui/src/index.ts
rename to shared/ui/src/index.ts
diff --git a/packages/ui/src/styles/index.scss b/shared/ui/src/styles/index.scss
similarity index 100%
rename from packages/ui/src/styles/index.scss
rename to shared/ui/src/styles/index.scss
diff --git a/shared/ui/src/styles/mvp.css b/shared/ui/src/styles/mvp.css
new file mode 100644
index 0000000..7eccc21
--- /dev/null
+++ b/shared/ui/src/styles/mvp.css
@@ -0,0 +1,537 @@
+/* MVP.css v1.14 - https://github.com/andybrewer/mvp */
+
+:root {
+  --active-brightness: 0.85;
+  --border-radius: 5px;
+  --box-shadow: 2px 2px 10px;
+  --color-accent: #118bee15;
+  --color-bg: #fff;
+  --color-bg-secondary: #e9e9e9;
+  --color-link: #118bee;
+  --color-secondary: #920de9;
+  --color-secondary-accent: #920de90b;
+  --color-shadow: #f4f4f4;
+  --color-table: #118bee;
+  --color-text: #000;
+  --color-text-secondary: #999;
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  --hover-brightness: 1.2;
+  --justify-important: center;
+  --justify-normal: left;
+  --line-height: 1.5;
+  --width-card: 285px;
+  --width-card-medium: 460px;
+  --width-card-wide: 800px;
+  --width-content: 1080px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[color-mode='user'] {
+    --color-accent: #0097fc4f;
+    --color-bg: #333;
+    --color-bg-secondary: #555;
+    --color-link: #0097fc;
+    --color-secondary: #e20de9;
+    --color-secondary-accent: #e20de94f;
+    --color-shadow: #bbbbbb20;
+    --color-table: #0097fc;
+    --color-text: #f7f7f7;
+    --color-text-secondary: #aaa;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+/* Layout */
+article aside {
+  background: var(--color-secondary-accent);
+  border-left: 4px solid var(--color-secondary);
+  padding: 0.01rem 0.8rem;
+}
+
+body {
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-family);
+  line-height: var(--line-height);
+  margin: 0;
+  overflow-x: hidden;
+  padding: 0;
+}
+
+footer,
+header,
+main {
+  margin: 0 auto;
+  max-width: var(--width-content);
+  padding: 3rem 1rem;
+}
+
+hr {
+  background-color: var(--color-bg-secondary);
+  border: none;
+  height: 1px;
+  margin: 4rem 0;
+  width: 100%;
+}
+
+section {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: var(--justify-important);
+}
+
+section img,
+article img {
+  max-width: 100%;
+}
+
+section pre {
+  overflow: auto;
+}
+
+section aside {
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  margin: 1rem;
+  padding: 1.25rem;
+  width: var(--width-card);
+}
+
+section aside:hover {
+  box-shadow: var(--box-shadow) var(--color-bg-secondary);
+}
+
+[hidden] {
+  display: none;
+}
+
+/* Headers */
+article header,
+div header,
+main header {
+  padding-top: 0;
+}
+
+header {
+  text-align: var(--justify-important);
+}
+
+header a b,
+header a em,
+header a i,
+header a strong {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+header nav img {
+  margin: 1rem 0;
+}
+
+section header {
+  padding-top: 0;
+  width: 100%;
+}
+
+/* Nav */
+nav {
+  align-items: center;
+  display: flex;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-bottom: 7rem;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+}
+
+nav ul li {
+  display: inline-block;
+  margin: 0 0.5rem;
+  position: relative;
+  text-align: left;
+}
+
+/* Nav Dropdown */
+nav ul li:hover ul {
+  display: block;
+}
+
+nav ul li ul {
+  background: var(--color-bg);
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  display: none;
+  height: auto;
+  left: -2px;
+  padding: 0.5rem 1rem;
+  position: absolute;
+  top: 1.7rem;
+  white-space: nowrap;
+  width: auto;
+  z-index: 1;
+}
+
+nav ul li ul::before {
+  /* fill gap above to make mousing over them easier */
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -0.5rem;
+  height: 0.5rem;
+}
+
+nav ul li ul li,
+nav ul li ul li a {
+  display: block;
+}
+
+/* Typography */
+code,
+samp {
+  background-color: var(--color-accent);
+  border-radius: var(--border-radius);
+  color: var(--color-text);
+  display: inline-block;
+  margin: 0 0.1rem;
+  padding: 0 0.5rem;
+}
+
+details {
+  margin: 1.3rem 0;
+}
+
+details summary {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: var(--line-height);
+  text-wrap: balance;
+}
+
+mark {
+  padding: 0.1rem;
+}
+
+ol li,
+ul li {
+  padding: 0.2rem 0;
+}
+
+p {
+  margin: 0.75rem 0;
+  padding: 0;
+  width: 100%;
+}
+
+pre {
+  margin: 1rem 0;
+  max-width: var(--width-card-wide);
+  padding: 1rem 0;
+}
+
+pre code,
+pre samp {
+  display: block;
+  max-width: var(--width-card-wide);
+  padding: 0.5rem 2rem;
+  white-space: pre-wrap;
+}
+
+small {
+  color: var(--color-text-secondary);
+}
+
+sup {
+  background-color: var(--color-secondary);
+  border-radius: var(--border-radius);
+  color: var(--color-bg);
+  font-size: xx-small;
+  font-weight: bold;
+  margin: 0.2rem;
+  padding: 0.2rem 0.3rem;
+  position: relative;
+  top: -2px;
+}
+
+/* Links */
+a {
+  color: var(--color-link);
+  display: inline-block;
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+a:active {
+  filter: brightness(var(--active-brightness));
+}
+
+a:hover {
+  filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a em,
+a i,
+a strong,
+button,
+input[type='submit'] {
+  border-radius: var(--border-radius);
+  display: inline-block;
+  font-size: medium;
+  font-weight: bold;
+  line-height: var(--line-height);
+  margin: 0.5rem 0;
+  padding: 1rem 2rem;
+}
+
+button,
+input[type='submit'] {
+  font-family: var(--font-family);
+}
+
+button:active,
+input[type='submit']:active {
+  filter: brightness(var(--active-brightness));
+}
+
+button:hover,
+input[type='submit']:hover {
+  cursor: pointer;
+  filter: brightness(var(--hover-brightness));
+}
+
+a b,
+a strong,
+button,
+input[type='submit'] {
+  background-color: var(--color-link);
+  border: 2px solid var(--color-link);
+  color: var(--color-bg);
+}
+
+a em,
+a i {
+  border: 2px solid var(--color-link);
+  border-radius: var(--border-radius);
+  color: var(--color-link);
+  display: inline-block;
+  padding: 1rem 2rem;
+}
+
+article aside a {
+  color: var(--color-secondary);
+}
+
+/* Images */
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+figure img {
+  max-width: 100%;
+}
+
+figure figcaption {
+  color: var(--color-text-secondary);
+}
+
+/* Forms */
+button:disabled,
+input:disabled {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  cursor: not-allowed;
+}
+
+button[disabled]:hover,
+input[type='submit'][disabled]:hover {
+  filter: none;
+}
+
+form {
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  display: block;
+  max-width: var(--width-card-wide);
+  min-width: var(--width-card);
+  padding: 1.5rem;
+  text-align: var(--justify-normal);
+}
+
+form header {
+  margin: 1.5rem 0;
+  padding: 1.5rem 0;
+}
+
+input,
+label,
+select,
+textarea {
+  display: block;
+  font-size: inherit;
+  max-width: var(--width-card-wide);
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  display: inline-block;
+}
+
+input[type='checkbox'] + label,
+input[type='radio'] + label {
+  display: inline-block;
+  font-weight: normal;
+  position: relative;
+  top: 1px;
+}
+
+input[type='range'] {
+  padding: 0.4rem 0;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  margin-bottom: 1rem;
+  padding: 0.4rem 0.8rem;
+}
+
+input[type='text'],
+textarea {
+  width: calc(100% - 1.6rem);
+}
+
+input[readonly],
+textarea[readonly] {
+  background-color: var(--color-bg-secondary);
+}
+
+label {
+  font-weight: bold;
+  margin-bottom: 0.2rem;
+}
+
+/* Popups */
+dialog {
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  z-index: 999;
+}
+
+/* Tables */
+table {
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  border-spacing: 0;
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+  padding: 0;
+  white-space: nowrap;
+}
+
+table td,
+table th,
+table tr {
+  padding: 0.4rem 0.8rem;
+  text-align: var(--justify-important);
+}
+
+table thead {
+  background-color: var(--color-table);
+  border-collapse: collapse;
+  border-radius: var(--border-radius);
+  color: var(--color-bg);
+  margin: 0;
+  padding: 0;
+}
+
+table thead th:first-child {
+  border-top-left-radius: var(--border-radius);
+}
+
+table thead th:last-child {
+  border-top-right-radius: var(--border-radius);
+}
+
+table thead th:first-child,
+table tr td:first-child {
+  text-align: var(--justify-normal);
+}
+
+table tr:nth-child(even) {
+  background-color: var(--color-accent);
+}
+
+/* Quotes */
+blockquote {
+  display: block;
+  font-size: x-large;
+  line-height: var(--line-height);
+  margin: 1rem auto;
+  max-width: var(--width-card-medium);
+  padding: 1.5rem 1rem;
+  text-align: var(--justify-important);
+}
+
+blockquote footer {
+  color: var(--color-text-secondary);
+  display: block;
+  font-size: small;
+  line-height: var(--line-height);
+  padding: 1.5rem 0;
+}
+
+/* Scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(202, 202, 232) auto;
+}
+
+*::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgb(202, 202, 232);
+  border-radius: 10px;
+}
diff --git a/packages/ui/tsconfig.json b/shared/ui/tsconfig.json
similarity index 100%
rename from packages/ui/tsconfig.json
rename to shared/ui/tsconfig.json
diff --git a/packages/ui/tsconfig.lib.json b/shared/ui/tsconfig.lib.json
similarity index 100%
rename from packages/ui/tsconfig.lib.json
rename to shared/ui/tsconfig.lib.json
diff --git a/packages/ui/tsconfig.spec.json b/shared/ui/tsconfig.spec.json
similarity index 100%
rename from packages/ui/tsconfig.spec.json
rename to shared/ui/tsconfig.spec.json
diff --git a/packages/ui/tsconfig.storybook.json b/shared/ui/tsconfig.storybook.json
similarity index 100%
rename from packages/ui/tsconfig.storybook.json
rename to shared/ui/tsconfig.storybook.json
diff --git a/tsconfig.base.json b/tsconfig.base.json
index a37ec94..819e4b8 100755
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -16,8 +16,8 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@asdf/sdk": ["packages/sdk/src/index.ts"],
-      "@asdf/ui": ["packages/ui/src/index.ts"]
+      "@asdf/sdk": ["shared/sdk/src/index.ts"],
+      "@asdf/ui": ["shared/ui/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]