diff --git a/eslint.config.mjs b/eslint.config.mjs
index e1543a2a4..6932cb4f8 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -122,27 +122,31 @@ const config = tseslint.config([
     languageOptions: {
       parserOptions: {
         ecmaFeatures: {
-          jsx: true
-        }
-      }
+          jsx: true,
+        },
+      },
     },
     plugins: {
       "react-hooks": reactHooks,
-      'better-tailwindcss': eslintPluginBetterTailwindcss,
+      "better-tailwindcss": eslintPluginBetterTailwindcss,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
       // enable all recommended rules to report an error
       ...eslintPluginBetterTailwindcss.configs["recommended-error"].rules,
       "better-tailwindcss/enforce-consistent-line-wrapping": "off",
+      "better-tailwindcss/no-unregistered-classes": [
+        "error",
+        { ignore: ["ory-elements"] },
+      ],
     },
     settings: {
       "better-tailwindcss": {
         // // tailwindcss 4: the path to the entry file of the css based tailwind config (eg: `src/global.css`)
-        "entryPoint": "packages/elements-react/src/theme/default/global.css",
+        entryPoint: "packages/elements-react/src/theme/default/global.css",
         // tailwindcss 3: the path to the tailwind config file (eg: `tailwind.config.js`)
         // "tailwindConfig": "/Users/jonas.hungershausen/Repositories/cloud/elements/packages/elements-react/tailwind.config.ts"
-      }
+      },
     },
   },
   {
diff --git a/examples/nextjs-app-router/postcss.config.mjs b/examples/nextjs-app-router/postcss.config.mjs
index 7e7f8a54e..f6c75ff96 100644
--- a/examples/nextjs-app-router/postcss.config.mjs
+++ b/examples/nextjs-app-router/postcss.config.mjs
@@ -2,7 +2,7 @@
 const config = {
   plugins: {
     "@tailwindcss/postcss": {},
-  }
+  },
 }
 
 export default config
diff --git a/package-lock.json b/package-lock.json
index 86509d7a7..6a1a81177 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16951,6 +16951,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csso": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
@@ -29562,6 +29574,29 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-scope": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/postcss-scope/-/postcss-scope-1.7.4.tgz",
+      "integrity": "sha512-qZ7miyYDK6E5TLU1QL4a0baAVnX0CeI90YIz17fLSDsCU/F9m2Y2U3+QdTJ2x/Rvk3G0qqB1KHqmkEFfmtFxGg==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^8.4.48",
+        "postcss-selector-parser": "^7.0.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -34353,6 +34388,7 @@
         "esbuild-plugin-svgr": "3.1.1",
         "eslint-plugin-react": "7.37.5",
         "postcss": "8.4.47",
+        "postcss-scope": "^1.7.4",
         "tailwindcss-animate": "1.0.7",
         "tsup": "8.4.0",
         "typedoc": "0.28.5"
diff --git a/packages/elements-react/package.json b/packages/elements-react/package.json
index 569a1c2fd..cc4c2c891 100644
--- a/packages/elements-react/package.json
+++ b/packages/elements-react/package.json
@@ -69,6 +69,7 @@
     "esbuild-plugin-svgr": "3.1.1",
     "eslint-plugin-react": "7.37.5",
     "postcss": "8.4.47",
+    "postcss-scope": "^1.7.4",
     "tailwindcss-animate": "1.0.7",
     "tsup": "8.4.0",
     "typedoc": "0.28.5"
diff --git a/packages/elements-react/postcss.config.ts b/packages/elements-react/postcss.config.ts
index a07ab399b..3a9c13267 100644
--- a/packages/elements-react/postcss.config.ts
+++ b/packages/elements-react/postcss.config.ts
@@ -3,5 +3,8 @@
 
 module.exports = {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-require-imports
-  plugins: [require("@tailwindcss/postcss")()],
+  plugins: [
+    require("@tailwindcss/postcss")(),
+    require("postcss-scope")(".ory-elements"),
+  ],
 }
diff --git a/packages/elements-react/src/tests/jest/setup.ts b/packages/elements-react/src/tests/jest/setup.ts
index a42bcc4bd..0821ab3c1 100644
--- a/packages/elements-react/src/tests/jest/setup.ts
+++ b/packages/elements-react/src/tests/jest/setup.ts
@@ -1,2 +1,5 @@
+// Copyright © 2025 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
 import "@testing-library/jest-dom"
 // import "@testing-library/jest-dom/jest-globals"
diff --git a/packages/elements-react/src/theme/default/components/card/index.tsx b/packages/elements-react/src/theme/default/components/card/index.tsx
index bf9b95585..492d32479 100644
--- a/packages/elements-react/src/theme/default/components/card/index.tsx
+++ b/packages/elements-react/src/theme/default/components/card/index.tsx
@@ -19,10 +19,12 @@ import { DefaultCurrentIdentifierButton } from "./current-identifier-button"
  */
 export function DefaultCard({ children }: OryCardProps) {
   return (
-    <div className="flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center">
-      <div className="relative grid w-full grid-cols-1 gap-8 border-b border-form-border-default bg-form-background-default px-8 py-12 sm:rounded-cards sm:border sm:px-12 sm:py-14">
-        {children}
-        <Badge />
+    <div className="ory-elements">
+      <div className="flex w-full flex-1 items-start justify-center font-sans-default sm:w-[480px] sm:max-w-[480px] sm:items-center">
+        <div className="relative grid w-full grid-cols-1 gap-8 border-b border-form-border-default bg-form-background-default px-8 py-12 sm:rounded-cards sm:border sm:px-12 sm:py-14">
+          {children}
+          <Badge />
+        </div>
       </div>
     </div>
   )
diff --git a/packages/elements-react/src/theme/default/flows/settings.tsx b/packages/elements-react/src/theme/default/flows/settings.tsx
index 68c6f118a..4b0287bbb 100644
--- a/packages/elements-react/src/theme/default/flows/settings.tsx
+++ b/packages/elements-react/src/theme/default/flows/settings.tsx
@@ -68,10 +68,10 @@ export function Settings({
       components={components}
     >
       {children ?? (
-        <>
+        <div className="ory-elements">
           <OryPageHeader />
           <OrySettingsCard />
-        </>
+        </div>
       )}
     </OryProvider>
   )
diff --git a/packages/elements-react/tailwind/generated/variables.css b/packages/elements-react/tailwind/generated/variables.css
index c3ebe8f4e..f82f96ddf 100644
--- a/packages/elements-react/tailwind/generated/variables.css
+++ b/packages/elements-react/tailwind/generated/variables.css
@@ -1,3 +1,6 @@
+/* Copyright © 2025 Ory Corp */
+/* SPDX-License-Identifier: Apache-2.0 */
+
 @theme {
   --ui-100: #f1f5f9;
   --ui-200: #e2e8f0;