diff --git a/.changeset/rotten-cups-sing.md b/.changeset/rotten-cups-sing.md
new file mode 100644
index 0000000..c501885
--- /dev/null
+++ b/.changeset/rotten-cups-sing.md
@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": patch
+---
+
+remove body selector
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..89752d1
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,112 @@
+<style>
+  @font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Black.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Black.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Black.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Black.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Bold.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Regular.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Light.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Light.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Light.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Thin.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.woff") format("woff");
+  font-weight: 250;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Screen.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.woff") format("woff");
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk Mono";
+  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.eot");
+  src:
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk Mono";
+  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.eot");
+  src:
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk Mono";
+  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.eot");
+  src:
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+body {
+  letter-spacing: 0;
+  font-family: Px Grotesk,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  line-height: 1.5;
+  --tw-text-opacity: 1;
+  color: rgb(18 73 94 / var(--tw-text-opacity));
+  font-feature-settings: "liga" off,"clig" off;
+}
+</style>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index f91868b..6b36827 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,110 +27,3 @@
     @apply b-bg-primary;
   }
 }
-
-@font-face {
-  font-family: "Px Grotesk";
-  src: url("/fonts/Px-Grotesk/Px-Grotesk-Black.eot");
-  src:
-    url("/fonts/Px-Grotesk/Px-Grotesk-Black.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Black.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Black.woff") format("woff");
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Px Grotesk";
-  src: url("/fonts/Px-Grotesk/Px-Grotesk-Bold.eot");
-  src:
-    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.woff") format("woff");
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Px Grotesk";
-  src: url("/fonts/Px-Grotesk/Px-Grotesk-Regular.eot");
-  src:
-    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Px Grotesk";
-  src: url("/fonts/Px-Grotesk/Px-Grotesk-Light.eot");
-  src:
-    url("/fonts/Px-Grotesk/Px-Grotesk-Light.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Light.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Light.woff") format("woff");
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Px Grotesk";
-  src: url("/fonts/Px-Grotesk/Px-Grotesk-Thin.eot");
-  src:
-    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.woff") format("woff");
-  font-weight: 250;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Px Grotesk";
-  src: url("/fonts/Px-Grotesk/Px-Grotesk-Screen.eot");
-  src:
-    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.woff") format("woff");
-  font-weight: 200;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Px Grotesk Mono";
-  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.eot");
-  src:
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.woff") format("woff");
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Px Grotesk Mono";
-  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.eot");
-  src:
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.woff") format("woff");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Px Grotesk Mono";
-  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.eot");
-  src:
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.eot?#iefix") format("embedded-opentype"),
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.woff2") format("woff2"),
-    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.woff") format("woff");
-  font-weight: 700;
-  font-style: normal;
-}
-
-body {
-  @apply b-font-sans b-text-base b-font-normal b-leading-normal b-tracking-normal;
-
-  font-feature-settings:
-    "liga" off,
-    "clig" off;
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 87fed3b..5f7c65d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@ import defaultTheme from "tailwindcss/defaultTheme";
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,css}"],
+  content: ["./src/**/*.{js,ts,jsx,tsx,css}"],
   darkMode: ["class", '[data-mode="dark"]'],
   theme: {
     colors: {