diff --git a/package.json b/package.json
index 3c344e7..abf4888 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "dev": "next dev",
     "start": "next start",
-    "build": "next build",
+    "build": "next build --no-lint",
     "lint": "eslint --cache src --ext ts,tsx --max-warnings=0",
     "lint:fix": "eslint --cache --fix src --ext ts,tsx",
     "next:lint": "next lint",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "dotenv": "^16.3.1",
     "@commitlint/cli": "^18.4.4",
-    "eleganceui-tailwind-utilities": "^2.1.0",
+    "eleganceui-tailwind-utilities": "^3.0.0",
     "@commitlint/config-conventional": "^18.4.4",
     "@playwright/test": "^1.41.0",
     "@testing-library/dom": "^9.3.4",
diff --git a/src/theme/components/underlined-title.css b/src/theme/components/underlined-title.css
index 965dda3..d5154cd 100644
--- a/src/theme/components/underlined-title.css
+++ b/src/theme/components/underlined-title.css
@@ -1,5 +1,5 @@
 @layer components {
   .underlined-title {
-    @apply max-w-fit text-20 font-700 uppercase text-primary-500 after-base after:mt-8 after:h-4 after:w-[30%] after:rounded-4 after:bg-secondary-500;
+    @apply fs-20 font-700 max-w-fit uppercase after-base tx-primary-500 after:mt-8 after:h-4 after:w-[30%] after:bg-secondary-500 after:br;
   }
 }
diff --git a/src/theme/reset.css b/src/theme/reset.css
index 172fd6d..2c77626 100644
--- a/src/theme/reset.css
+++ b/src/theme/reset.css
@@ -1,7 +1,6 @@
 @layer base {
   * {
     outline: none;
-    line-height: calc(1em + 0.5rem);
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
     @apply m-0 box-border list-none p-0 font-sans no-underline antialiased;
@@ -21,12 +20,8 @@
     }
   }
 
-  html {
-    @apply text-[62.5%];
-  }
-
   body {
-    @apply isolate min-h-screen bg-soft-white-blue pb-[50px] text-dark col-full jc-start;
+    @apply isolate min-h-screen bg-soft-white-blue pb-12 col-full jc-start tx-dark;
 
     @screen sm {
       @apply pb-0;
@@ -45,7 +40,7 @@
 
   b,
   strong {
-    @apply font-700;
+    @apply font-bold;
   }
 
   optgroup,
@@ -54,7 +49,7 @@
   select,
   textarea,
   button {
-    @apply m-0 font-sans text-16 font-500;
+    @apply m-0 font-sans font-medium fs-base;
   }
 
   button {
@@ -68,11 +63,11 @@
 
   :focus,
   :focus-visible {
-    @apply outline outline-4 outline-offset-1 outline-focus;
+    @apply otl-4-focus otl-o-1;
   }
 
   :focus:not(:focus-visible) {
-    @apply outline-0;
+    @apply otl-0;
   }
 
   mark {
@@ -81,7 +76,7 @@
       clip: rect(1px, 1px, 1px, 1px);
       clip-path: inset(100%);
       content: ' [start of highlighted text] ';
-      @apply absolute h-1 w-1 overflow-hidden whitespace-nowrap;
+      @apply absolute h-px w-px ov-hidden whitespace-nowrap;
     }
 
     &::after {
@@ -91,11 +86,11 @@
 
   ::-webkit-scrollbar,
   scrollbar-width {
-    @apply w-12 bg-soft-white-blue;
+    @apply w-3 bg-soft-white-blue;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply rounded-20 border border-solid border-soft-white-blue bg-grey-light-500;
+    @apply br-5 bw-soft-white-blue bg-grey-light-500;
   }
 
   :root {
diff --git a/src/theme/utilities/directional.ts b/src/theme/utilities/directional.ts
deleted file mode 100644
index 0d11ac0..0000000
--- a/src/theme/utilities/directional.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-
-import { spacings } from '../variables'
-
-export const directional = plugin(({ addUtilities }) => {
-  const directions: Record<string, any> = {}
-  Object.entries(spacings).forEach(([key, value]) => {
-    const size = `${value}`
-    directions[`.t-${key}`] = { top: size }
-    directions[`.b-${key}`] = { bottom: size }
-    directions[`.l-${key}`] = { left: size }
-    directions[`.r-${key}`] = { right: size }
-    directions[`.y-${key}`] = { top: size, bottom: size }
-    directions[`.x-${key}`] = { left: size, right: size }
-  })
-  addUtilities(directions)
-})
diff --git a/src/theme/utilities/fontSize.ts b/src/theme/utilities/fontSize.ts
deleted file mode 100644
index e276274..0000000
--- a/src/theme/utilities/fontSize.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-
-import { fontSizes } from '../variables'
-
-export const fontSize = plugin(({ addUtilities }) => {
-  const fs: Record<string, { fontSize: string }> = {}
-  Object.entries(fontSizes).forEach(([key, value]) => {
-    fs[`.fs-${key}`] = { fontSize: `${value}` }
-  })
-  addUtilities(fs)
-})
diff --git a/src/theme/utilities/fontWeight.ts b/src/theme/utilities/fontWeight.ts
deleted file mode 100644
index ddf1836..0000000
--- a/src/theme/utilities/fontWeight.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-
-import { fontWeights } from '../variables'
-
-export const fontWeight = plugin(({ addUtilities }) => {
-  const fw: Record<string, { fontWeight: string }> = {}
-  Object.entries(fontWeights).forEach(([key, value]) => {
-    fw[`.fw-${key}`] = { fontWeight: `${value}` }
-  })
-  addUtilities(fw)
-})
diff --git a/src/theme/utilities/gap.ts b/src/theme/utilities/gap.ts
deleted file mode 100644
index 3fd3c84..0000000
--- a/src/theme/utilities/gap.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-
-import { spacings } from '../variables'
-
-export const gap = plugin(({ addUtilities }) => {
-  const gaps: Record<string, any> = {}
-  Object.entries(spacings).forEach(([key, value]) => {
-    gaps[`.g-${key}`] = { gap: `${value}` }
-    gaps[`.gx-${key}`] = { columnGap: `${value}` }
-    gaps[`.gy-${key}`] = { rowGap: `${value}` }
-  })
-  addUtilities(gaps)
-})
diff --git a/src/theme/utilities/index.ts b/src/theme/utilities/index.ts
deleted file mode 100644
index b501ecf..0000000
--- a/src/theme/utilities/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { directional } from './directional'
-import { fontSize } from './fontSize'
-import { fontWeight } from './fontWeight'
-import { gap } from './gap'
-import { lineHeight } from './lineHeight'
-import { size } from './size'
-
-export const utilities = [
-  gap,
-  lineHeight,
-  directional,
-  size,
-  fontWeight,
-  fontSize
-]
diff --git a/src/theme/utilities/lineHeight.ts b/src/theme/utilities/lineHeight.ts
deleted file mode 100644
index ed5dad4..0000000
--- a/src/theme/utilities/lineHeight.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-
-import { lineHeights } from '../variables'
-
-export const lineHeight = plugin(({ addUtilities }) => {
-  const lh: Record<string, { lineHeight: string }> = {}
-  Object.entries(lineHeights).forEach(([key, value]) => {
-    lh[`.lh-${key}`] = { lineHeight: `${value}` }
-  })
-  addUtilities(lh)
-})
diff --git a/src/theme/utilities/size.ts b/src/theme/utilities/size.ts
deleted file mode 100644
index 5f87e23..0000000
--- a/src/theme/utilities/size.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import plugin from 'tailwindcss/plugin'
-
-import { spacings } from '../variables'
-
-export const size = plugin(({ addUtilities }) => {
-  const sizes: Record<string, any> = {}
-  Object.entries(spacings).forEach(([key, value]) => {
-    sizes[`.max-size-${key}`] = { maxWidth: `${value}`, maxHeight: `${value}` }
-    sizes[`.min-size-${key}`] = { minWidth: `${value}`, minHeight: `${value}` }
-    sizes[`.square-${key}`] = {
-      minWidth: `${value}`,
-      minHeight: `${value}`,
-      width: `${value}`,
-      height: `${value}`
-    }
-  })
-  addUtilities(sizes)
-})
diff --git a/src/theme/variables/fontSizes.ts b/src/theme/variables/fontSizes.ts
deleted file mode 100644
index 1033d47..0000000
--- a/src/theme/variables/fontSizes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const fontSizes = {
-  12: '12px',
-  14: '14px',
-  16: '16px',
-  18: '18px',
-  20: '20px',
-  24: '24px',
-  28: '28px',
-  32: '32px',
-  36: '36px'
-}
diff --git a/src/theme/variables/fontWeights.ts b/src/theme/variables/fontWeights.ts
index 885e5f7..dfdc286 100644
--- a/src/theme/variables/fontWeights.ts
+++ b/src/theme/variables/fontWeights.ts
@@ -1,5 +1,5 @@
 export const fontWeights = {
-  700: '700',
-  600: '600',
-  500: '500'
+  bold: '700',
+  semibold: '600',
+  medium: '500'
 }
diff --git a/src/theme/variables/index.ts b/src/theme/variables/index.ts
index ff57152..816ea46 100644
--- a/src/theme/variables/index.ts
+++ b/src/theme/variables/index.ts
@@ -1,10 +1,6 @@
 export { colors } from './colors'
-export { screens } from './screens'
-export { spacings } from './spacings'
-export { borderRadius } from './borderRadius'
 export { zIndex } from './zIndex'
-export { fontWeights } from './fontWeights'
 export { boxShadows } from './boxShadows'
-export { fontSizes } from './fontSizes'
 export { keyframes } from './keyframes'
-export { lineHeights } from './lineHights'
+export { fontWeights } from './fontWeights'
+export { borderRadius } from './borderRadius'
diff --git a/src/theme/variables/lineHights.ts b/src/theme/variables/lineHights.ts
deleted file mode 100644
index 8b6bb40..0000000
--- a/src/theme/variables/lineHights.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const lineHeights = {
-  100: '1',
-  110: '1.1',
-  120: '1.2',
-  130: '1.3',
-  140: '1.4',
-  150: '1.5',
-  160: '1.6',
-  170: '1.7',
-  180: '1.8',
-  190: '1.9',
-  200: '2'
-}
diff --git a/src/theme/variables/screens.ts b/src/theme/variables/screens.ts
deleted file mode 100644
index 6042a2b..0000000
--- a/src/theme/variables/screens.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const screens = {
-  xs: '440px',
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1536px'
-}
diff --git a/src/theme/variables/spacings.ts b/src/theme/variables/spacings.ts
deleted file mode 100644
index 9b29357..0000000
--- a/src/theme/variables/spacings.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export const spacings = {
-  0: '0px',
-  1: '1px',
-  2: '2px',
-  3: '3px',
-  4: '4px',
-  5: '5px',
-  6: '6px',
-  7: '7px',
-  8: '8px',
-  9: '9px',
-  10: '10px',
-  11: '11px',
-  12: '12px',
-  14: '14px',
-  16: '16px',
-  20: '20px',
-  24: '24px',
-  28: '28px',
-  32: '32px',
-  36: '36px',
-  40: '40px',
-  44: '44px',
-  48: '48px',
-  52: '52px',
-  56: '56px',
-  60: '60px',
-  64: '64px',
-  72: '72px',
-  80: '80px',
-  96: '96px'
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e241ea3..cf52a4d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,19 +1,15 @@
 import defaultTheme from 'tailwindcss/defaultTheme'
 import type { Config } from 'tailwindcss'
-import * as customUtilities from 'eleganceui-tailwind-utilities'
+import eleganceUIUtilities from 'eleganceui-tailwind-utilities'
 
 import {
+  boxShadows,
   colors,
+  keyframes,
   zIndex,
-  spacings,
   fontWeights,
-  fontSizes,
-  boxShadows,
   borderRadius,
-  screens,
-  keyframes
 } from './src/theme/variables'
-import { utilities } from './src/theme/utilities'
 
 const config: Config = {
   content: [
@@ -23,15 +19,9 @@ const config: Config = {
   theme: {
     extend: {
       colors,
-      screens,
       zIndex,
+      fontWeights,
       borderRadius,
-      fontWeight: fontWeights,
-      fontSize: fontSizes,
-      width: { ...defaultTheme.width, ...spacings },
-      height: { ...defaultTheme.height, ...spacings },
-      spacing: { ...defaultTheme.spacing, ...spacings },
-      borderWidth: { ...defaultTheme.borderWidth, ...spacings },
       boxShadow: { ...defaultTheme.boxShadow, ...boxShadows },
       keyframes: { ...defaultTheme.keyframes, ...keyframes },
       fontFamily: {
@@ -41,10 +31,14 @@ const config: Config = {
         ...defaultTheme.aspectRatio,
         '600/317': '600/317',
         '10/7': '10/7'
+      },
+      screens: {
+        ...defaultTheme.screens,
+        xs: '440px'
       }
     }
   },
-  plugins: [...utilities, ...Object.values(customUtilities)]
+  plugins: [...eleganceUIUtilities]
 }
 
 export default config
diff --git a/yarn.lock b/yarn.lock
index a8b87e5..30b0e8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3687,10 +3687,10 @@ electron-to-chromium@^1.4.668:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz#1f077d9a095761804aec7ec6346c3f4b69b56534"
   integrity sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==
 
-eleganceui-tailwind-utilities@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eleganceui-tailwind-utilities/-/eleganceui-tailwind-utilities-2.1.0.tgz#4bccbd3656c1faea2163e94420d2a52182f0e5f6"
-  integrity sha512-8TqlVgXjrkydIoCyQfA4n1SdP7SQP4rwNLCHGYgoi4oxxEyLrua2yNhyAv4HCD+mJZAFFRC1wBRTqXs4A6Lb4w==
+eleganceui-tailwind-utilities@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eleganceui-tailwind-utilities/-/eleganceui-tailwind-utilities-3.0.0.tgz#0abea7ebc2c06bd1ab0d9a600fe945528bddaee2"
+  integrity sha512-/M7jpzj5WB+rjK7IIpTkEDtE4gxwQgAUuFJNJ+roJJtt1HUvIM6FLVdHipDGZSulNjmEfY/F7RcV2Ne5+SQc1w==
 
 emoji-regex@^10.3.0:
   version "10.3.0"