diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..0d02352
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,17 @@
+Changelog
+
+# v2.0.0 [2024-07-31]
+
+## Patch with Breaking Changes
+
+### Fixes 
+- Styling conflicts with other design systems by scoping the Tailwind base styles
+
+### Breaking Changes
+- Wraps the toolkit with a div with the class name "stk-core" to enable scoping of the toolkit styles. An additional property is added to the style prop under `core` to allow customization of the core div.
+
+---
+
+# v1.0.0 [2024-06-18]
+
+## Initial Stable Release
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index af392d6..1d072a9 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 30d3849..d59c05a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mezh-hq/react-seat-toolkit",
-  "version": "1.3.8",
+  "version": "2.0.0-blizzard.2",
   "description": "React UI library to design and render seat layouts",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -28,7 +28,7 @@
     "build:types": "bunx tsc --project ./tsconfig.declaration.json && tsc-alias --project ./tsconfig.declaration.json && cd dist && ls -d */ | grep -Ev 'actions|types' | xargs rm -rf && cp ./index.d.ts ./index.slim.d.ts",
     "bump-version": "bunx --bun automatic-versioning --disable-auto-sync --recursive $(if [ \"$TAG\" != \"latest\" ]; then echo --prerelease; fi) --prerelease-branch=development --prerelease-tag=$TAG --name=@mezh-hq/react-seat-toolkit --ignore-prefixes=ci",
     "format": "bunx prettier --write --cache \"**/*.{js,jsx,ts,tsx,md,css,yml}\"",
-    "lint": "bun run --bun eslint . --ext js,jsx,ts,tsx,mdx --ignore-path .gitignore --fix --cache --report-unused-disable-directives",
+    "lint": "bun run --bun eslint . --ext js,jsx,ts,tsx --ignore-path .gitignore --fix --cache --report-unused-disable-directives",
     "storybook": "NODE_ENV=storybook storybook dev -p 6006",
     "build-storybook": "storybook build",
     "postbuild": "bun build:types && bun build:css",
@@ -116,8 +116,9 @@
     "sonner": "1.5.0",
     "storybook": "7.3.2",
     "storybook-addon-deep-controls": "0.2.1",
-    "tailwindcss": "3.4.1",
+    "tailwindcss": "3.4.6",
     "tailwindcss-animate": "1.0.6",
+    "tailwindcss-scoped-preflight": "3.4.3",
     "tsc-alias": "1.8.8",
     "vite": "4.5.2"
   },
diff --git a/src/hooks/breakpoint.ts b/src/hooks/breakpoint.ts
index 04c25ec..c142550 100644
--- a/src/hooks/breakpoint.ts
+++ b/src/hooks/breakpoint.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { screens } from "../../tailwind.config";
+import { screens } from "../utils/tailwind";
 
 const calculateBreakpoints = () =>
   Object.entries(screens).reduce((acc, [key, value]) => {
diff --git a/src/index.tsx b/src/index.tsx
index 0db4701..6dbd8c0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
 import { Provider } from "react-redux";
+import { twMerge } from "tailwind-merge";
 import { default as Core, TooltipProvider } from "@/components";
 import { store } from "@/store";
 import { type ISTKProps } from "./types";
@@ -11,7 +12,12 @@ export const SeatToolkit = (props: ISTKProps) => {
   return (
     <Provider store={store}>
       <TooltipProvider>
-        <Core {...props} />
+        <div
+          className={twMerge("stk-core h-full w-full", props.styles?.core?.container?.className)}
+          style={props.styles?.core?.container?.properties}
+        >
+          <Core {...props} />
+        </div>
       </TooltipProvider>
     </Provider>
   );
diff --git a/src/styles/storybook.css b/src/styles/storybook.css
index 53db733..51a0691 100644
--- a/src/styles/storybook.css
+++ b/src/styles/storybook.css
@@ -4,6 +4,7 @@ body,
 #storybook-root {
   min-height: 100% !important;
   height: 100% !important;
+  font-family: "Inter", sans-serif !important;
 }
 body {
   margin-right: 0px !important;
diff --git a/src/types/styles.ts b/src/types/styles.ts
index 92dc55c..f23bac7 100644
--- a/src/types/styles.ts
+++ b/src/types/styles.ts
@@ -87,6 +87,7 @@ export interface IStyles {
     };
   };
   core?: {
+    container?: IStyle;
     button?: IStyle;
   };
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 41b18bf..c76eb53 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -4,6 +4,7 @@ import { ids, selectors } from "@/constants";
 export * from "./d3";
 export * from "./transformer";
 export * from "./workspace";
+export * from "./tailwind";
 
 export const fallible = (fn: Function) => {
   try {
diff --git a/src/utils/tailwind.ts b/src/utils/tailwind.ts
new file mode 100644
index 0000000..a383932
--- /dev/null
+++ b/src/utils/tailwind.ts
@@ -0,0 +1,9 @@
+export const screens = {
+  xs: "400px",
+  xsm: "450px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  xxl: "1536px"
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 9060891..c49c3f8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,6 @@
 import animate from "tailwindcss-animate";
-
-export const screens = {
-  xs: "400px",
-  xsm: "450px",
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  xxl: "1536px"
-};
+import { isolateInsideOfContainer, scopedPreflightStyles } from "tailwindcss-scoped-preflight";
+import { screens } from "./src/utils/tailwind";
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -26,5 +18,10 @@ export default {
       }
     }
   },
-  plugins: [animate]
+  plugins: [
+    animate,
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer(".stk-core")
+    })
+  ]
 };