diff --git a/apps/pxweb2/src/app/app.module.scss b/apps/pxweb2/src/app/app.module.scss
index 3d8b4e28..745e687d 100644
--- a/apps/pxweb2/src/app/app.module.scss
+++ b/apps/pxweb2/src/app/app.module.scss
@@ -1,2 +1,42 @@
+@use '$ui/style-dictionary/dist/scss/fixed-variables.scss' as fixed;
 
-  
\ No newline at end of file
+.breakpoints {
+  height: 50px;
+  width: 100%;
+}
+
+@media (min-width: fixed.$breakpoints-x-small-min-width) and (max-width: fixed.$breakpoints-x-small-max-width) {
+  .breakpoints {
+    max-width: 100px;
+    color: white;
+    background-color: black;
+  }
+}
+
+@media (min-width: fixed.$breakpoints-small-min-width) and (max-width: fixed.$breakpoints-small-max-width) {
+  .breakpoints {
+    max-width: 200px;
+    background-color: red;
+  }
+}
+
+@media (min-width: fixed.$breakpoints-medium-min-width) and (max-width: fixed.$breakpoints-medium-max-width) {
+  .breakpoints {
+    max-width: 300px;
+    background-color: green;
+  }
+}
+
+@media (min-width: fixed.$breakpoints-large-min-width) and (max-width: fixed.$breakpoints-large-max-width) {
+  .breakpoints {
+    max-width: 500px;
+    background-color: blue;
+  }
+}
+
+@media (min-width: fixed.$breakpoints-x-large-min-width) {
+  .breakpoints {
+    max-width: 700px;
+    background-color: yellow;
+  }
+}
diff --git a/apps/pxweb2/src/app/app.tsx b/apps/pxweb2/src/app/app.tsx
index 1eca7824..3763a1dc 100644
--- a/apps/pxweb2/src/app/app.tsx
+++ b/apps/pxweb2/src/app/app.tsx
@@ -1,5 +1,7 @@
 import { useTranslation, Trans } from 'react-i18next';
+import cl from 'clsx';
 
+import classes from './app.module.scss';
 import {
   Button,
   Heading,
@@ -225,6 +227,7 @@ export function App() {
           value: -2.28,
         })}
       </p>
+      <div className={cl(classes.breakpoints)}>Breakpoint test</div>
     </>
   );
 }
diff --git a/apps/pxweb2/vite.config.ts b/apps/pxweb2/vite.config.ts
index ee7384c4..8046e7cb 100644
--- a/apps/pxweb2/vite.config.ts
+++ b/apps/pxweb2/vite.config.ts
@@ -2,6 +2,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import path from 'path';
 
 export default defineConfig({
   root: __dirname,
@@ -32,6 +33,12 @@ export default defineConfig({
     },
   },
 
+  resolve: {
+    alias: {
+      '$ui': path.resolve('libs/pxweb2-ui/'),
+    },
+  },
+
   test: {
     globals: true,
     cache: {
diff --git a/libs/pxweb2-ui/style-dictionary/README.md b/libs/pxweb2-ui/style-dictionary/README.md
index 78d331a0..f3fcacc6 100644
--- a/libs/pxweb2-ui/style-dictionary/README.md
+++ b/libs/pxweb2-ui/style-dictionary/README.md
@@ -5,4 +5,4 @@ Go to the root of the entire project and run
 
 ## Custom theme
 
-To use a custom theme you have to create a file called `custom_theme.json`. When building the results end up in /build/. The variables stored in `custom_theme.json` will be used instead of the variables in `default_theme.json` when building the variables to js and sass if both files are present.
+To use a custom theme you have to create a file called `custom_theme.json`. When building the results end up in /build/. The variables stored in `custom_theme.json` will be used instead of the variables in `default_theme.json` when building the variables to js and sass if both files are present. 
diff --git a/libs/pxweb2-ui/style-dictionary/build.js b/libs/pxweb2-ui/style-dictionary/build.js
index 6e269359..3fb1619f 100644
--- a/libs/pxweb2-ui/style-dictionary/build.js
+++ b/libs/pxweb2-ui/style-dictionary/build.js
@@ -34,6 +34,7 @@ const configs = [
   {
     source: [
       './libs/pxweb2-ui/style-dictionary/src/global-tokens/spacing.json',
+      './libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json',
     ],
     platforms: {
       scss: {
diff --git a/libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json b/libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json
new file mode 100644
index 00000000..1ef2a1c9
--- /dev/null
+++ b/libs/pxweb2-ui/style-dictionary/src/global-tokens/breakpoints.json
@@ -0,0 +1,41 @@
+{
+  "breakpoints": {
+    "XSmall": {
+      "MinWidth": {
+        "value": "0px"
+      },
+      "MaxWidth": {
+        "value": "479px"
+      }
+    },
+    "Small": {
+      "MinWidth": {
+        "value": "480px"
+      },
+      "MaxWidth": {
+        "value": "689px"
+      }
+    },
+    "Medium": {
+      "MinWidth": {
+        "value": "690px"
+      },
+      "MaxWidth": {
+        "value": "1259px"
+      }
+    },
+    "Large": {
+      "MinWidth": {
+        "value": "1260px"
+      },
+      "MaxWidth": {
+        "value": "1599px"
+      }
+    },
+    "XLarge": {
+      "MinWidth": {
+        "value": "1600px"
+      }
+    }
+  }
+}