diff --git a/.gitignore b/.gitignore
index 9155d99..5e0408d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,4 @@ yarn.lock
 cypress/videos/
 cypress/screenshots/
 lighthouse-report.html
+assets/ysw-*.min.*
diff --git a/assets/main.min.js b/assets/main.min.js
deleted file mode 100644
index 8b13789..0000000
--- a/assets/main.min.js
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/ysw-styles.css b/assets/ysw-styles.css
deleted file mode 100644
index e480e4d..0000000
--- a/assets/ysw-styles.css
+++ /dev/null
@@ -1 +0,0 @@
-.ysw-example {}
diff --git a/package.json b/package.json
index ec8c379..183ae2c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,11 @@
   "description": "Shopify Boilerplate Template based on Dawn",
   "scripts": {
     "test": "shopify ",
-    "cy:open": "cypress open"
+    "cy:open": "cypress open",
+    "dev:vite": "nodemon --watch 'src/**/*' -e ts,scss --exec \"npm run build:vite\"",
+    "dev": "npm-run-all --parallel dev:*",
+    "build:vite": "vite build",
+    "build": "npm-run-all --parallel build:*"
   },
   "keywords": [
     "shopify"
@@ -14,6 +18,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
+    "@shopify/themekit": "^1.1.9",
     "cypress": "^10.11.0",
     "eslint": "^8.26.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -22,6 +27,8 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.1",
+    "nodemon": "^3.0.1",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "sass": "^1.55.0",
     "stylelint-config-prettier": "^9.0.3",
@@ -29,7 +36,8 @@
     "stylelint-config-standard": "^29.0.0",
     "stylelint-config-standard-scss": "^6.0.0",
     "stylelint-scss": "^4.3.0",
-    "vite": "^3.2.2",
-    "vite-plugin-singlefile": "^0.12.3"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-sass-dts": "^1.3.9"
   }
 }
diff --git a/assets/ysw-main.js b/src/main.ts
similarity index 100%
rename from assets/ysw-main.js
rename to src/main.ts
diff --git a/src/modules/README.md b/src/modules/README.md
new file mode 100644
index 0000000..64517a8
--- /dev/null
+++ b/src/modules/README.md
@@ -0,0 +1,27 @@
+# Typescript Guidelines
+
+Let's keep all the JS assets to this path.
+
+## Naming classes
+
+Use `PascalCase` for classes.
+
+```ts
+class YswProduct {
+    constructor() {}
+}
+
+class YswGlobal {
+    constructor() {}
+}
+```
+
+## Naming functions, variables, methods, etc
+
+Use `camelCase` for functions, variables methods and others.
+
+```ts
+function getProduct() {}
+
+const productPrice = () => {}
+```
diff --git a/src/sass/README.md b/src/sass/README.md
new file mode 100644
index 0000000..d375877
--- /dev/null
+++ b/src/sass/README.md
@@ -0,0 +1,34 @@
+# CSS Architecture
+
+Let's keep all the CSS assets to this path.
+
+If you want to add new CSS section, create the new file and be sure to add it to the list of folders in this path.
+
+- `sections` larger modules that can be used in multiple places.
+- `snippets` small pieces of reusable code that can be used in multiple places.
+- `utilities` helper utility classes.
+- `global` global functionalities, variables and colors.
+
+Follow the guide created by Brad Frost: https://bradfrost.com/blog/post/css-architecture-for-design-systems/.
+
+## Global namespace
+
+All classes associated with the design system are prefixed with a global namespace, which is the Company Name followed by a hyphen:
+
+```
+.ysw-
+```
+
+## Class prefixes
+
+`c-` for UI components, such as `.ysw-c-card` or `.ysw-c-header`.
+`l-` for layout-related styles, such as `.ysw-l-grid__item` or `.ysw-l--two-column`.
+`u-` for utilities, such as `.ysw-u-margin-bottom-double` or `.ysw-u-margin-bottom-double`.
+`is-` and `has-` for specific states, such as `.ysw-is-active` or `.ysw-is-disabled`. These state-based classes would apply to.
+`js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these `js-` classes would toggle state-based classes to an element.
+
+## BEM syntax>
+
+`Block` is the primary component block, such as `.ysw-c-card` or `.ysw-c-btn`.
+`Element` is a child of the primary block, such as `.ysw-c-card__title`.
+`Modifier` is a variation of a component style, such as `.ysw-c-alert--error`.
diff --git a/src/sass/global/README.md b/src/sass/global/README.md
new file mode 100644
index 0000000..1a47f5f
--- /dev/null
+++ b/src/sass/global/README.md
@@ -0,0 +1,18 @@
+
+## EXAMPLE of calls to the variables and functions on this carpet
+
+Using global `header.scss`
+```scss
+@use "../global";
+
+header {
+  width: global.rem-calc(10px);
+  color: global.$ysw-color-black;
+}
+```
+
+them create a file for it on `./src/sections/header.ts`
+
+```ts
+import "../sass/sections/header.scss";
+```
diff --git a/src/sass/global/_rem-calc.scss b/src/sass/global/_rem-calc.scss
new file mode 100644
index 0000000..e7b529e
--- /dev/null
+++ b/src/sass/global/_rem-calc.scss
@@ -0,0 +1,5 @@
+$base-font-size: 14px;
+
+@function rem-calc($value) {
+    @return calc($value / $base-font-size * 1rem);
+}
diff --git a/src/sass/global/_variables.scss b/src/sass/global/_variables.scss
new file mode 100644
index 0000000..f479341
--- /dev/null
+++ b/src/sass/global/_variables.scss
@@ -0,0 +1,2 @@
+$ysw-color-black: #000;
+$ysw-color-white: #fff;
diff --git a/src/sass/global/index.scss b/src/sass/global/index.scss
new file mode 100644
index 0000000..f0a0605
--- /dev/null
+++ b/src/sass/global/index.scss
@@ -0,0 +1,2 @@
+@forward "rem-calc";
+@forward "variables";
diff --git a/src/sass/sections/README.md b/src/sass/sections/README.md
new file mode 100644
index 0000000..2f8e569
--- /dev/null
+++ b/src/sass/sections/README.md
@@ -0,0 +1,3 @@
+## Folder description
+
+- In this the larger scss modules that can be used in multiple places will be set.
diff --git a/src/sass/snippets/README.md b/src/sass/snippets/README.md
new file mode 100644
index 0000000..9bd7f37
--- /dev/null
+++ b/src/sass/snippets/README.md
@@ -0,0 +1,3 @@
+## Folder description
+
+- In this folder the small pieces of reusable code that can be used in multiple place will be set.
diff --git a/src/sass/utilities/README.md b/src/sass/utilities/README.md
new file mode 100644
index 0000000..5e747d5
--- /dev/null
+++ b/src/sass/utilities/README.md
@@ -0,0 +1,3 @@
+## Folder description
+
+- In this folder the helper utility classes will be set.
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..75abdef
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/vite.config.js b/vite.config.js
index 8893559..b860b11 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,18 +1,43 @@
 import { defineConfig } from 'vite';
+import path from 'path';
+import fs from 'fs';
+
+function generateEntryPoints() {
+  const entryPoints = {};
+  const srcDir = './src';
+  const modulesDir = './src/modules';
+
+  const files = fs.readdirSync(srcDir);
+  const tsFiles = files.filter((file) => file.endsWith('.ts'));
+
+  if (fs.existsSync(modulesDir)) {
+    const moduleFiles = fs.readdirSync(modulesDir).filter((file) => file.endsWith('.ts'));
+
+    moduleFiles.forEach((file) => {
+      const fileName = path.basename(file, '.ts');
+      entryPoints[fileName] = path.resolve(modulesDir, file);
+    });
+  }
+
+  tsFiles.forEach((file) => {
+    const fileName = path.basename(file, '.ts');
+    entryPoints[fileName] = path.resolve(srcDir, file);
+  });
+
+  return entryPoints;
+}
 
 export default defineConfig({
-    build: {
-        outDir: './assets',
-        assetsDir: '',
-        rollupOptions: {
-            input: {
-                'main': './assets/ysw-main.js',
-            },
-            output: {
-                entryFileNames: '[name].min.js',
-                assetFileNames: '[name].min.[ext]',
-            },
-        },
-        emptyOutDir: false,
+  build: {
+    outDir: './assets',
+    assetsDir: '',
+    rollupOptions: {
+      input: generateEntryPoints(),
+      output: {
+        entryFileNames: 'ysw-[name].min.js',
+        assetFileNames: 'ysw-[name].min.[ext]',
+      },
     },
+    emptyOutDir: false,
+  },
 });