diff --git a/.codespellrc b/.codespellrc
new file mode 100644
index 000000000000..1ea9900bd343
--- /dev/null
+++ b/.codespellrc
@@ -0,0 +1,2 @@
+[codespell]
+skip = *.lock,*.json,node_modules,.git,__snapshots__,__snapshots__,dist,build,coverage,*.svg,*.png,*.jpg,*.jpeg,*.gif,*.ico,*.woff,*.woff2,*.ttf,*.eot,./showcases/screen-reader/translations.ts
diff --git a/.config/.codespellignorewords b/.config/.codespellignorewords
new file mode 100644
index 000000000000..4e769678c156
--- /dev/null
+++ b/.config/.codespellignorewords
@@ -0,0 +1,3 @@
+moz
+webkit
+merget
diff --git a/.config/.lintstagedrc.js b/.config/.lintstagedrc.js
index fafd909006f1..e96f8636a845 100644
--- a/.config/.lintstagedrc.js
+++ b/.config/.lintstagedrc.js
@@ -16,4 +16,7 @@ export default {
 		() => 'npm install --package-lock-only --ignore-scripts',
 		'npx npm-package-json-lint'
 	],
+	'*.{md,mdx,txt,yml,yaml,ts,tsx,js,jsx,html,css,scss,sass,vue}': [
+		'npm run lint:codespell -- --write-changes --'
+	]
 };
diff --git a/.github/workflows/01-lint.yml b/.github/workflows/01-lint.yml
index 95c0755fd4e4..ee03d83cf9e9 100644
--- a/.github/workflows/01-lint.yml
+++ b/.github/workflows/01-lint.yml
@@ -14,6 +14,13 @@ jobs:
       - name: 🔄 Init Cache
         uses: ./.github/actions/npm-cache
 
+      # For now we keep this check in the codebase, even though that we already do the codespell check on git pre-commit hook. We might remove this check in the pipeline (even though that performance is not an issue, but it might be good for reducing external dependencies).
+      - name: 📖 Check spelling
+        uses: codespell-project/actions-codespell@v2
+        with:
+          ignore_words_file: .config/.codespellignorewords
+          check_filenames: true
+
       - name: ⚡ Run Lint
         run: |
           npm run postinstall --workspace=nuxt-showcase
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d14daefe038a..bfede2d9d0dc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -18,7 +18,7 @@ node node_modules/@db-ux/db-theme-illustrative-icons/build/scripts/index.js
 ```
 
 > [!NOTE]
-> If you missed setting up the `.env`-file before running `npm install`, you may need to re-install your packages to ensure the postinstall scrips are executed for decrypting the fonts and other artifacts (`rm --recursive --force node_modules/@db-ux/db-theme* && npm update @db-ux/db-theme`)
+> If you missed setting up the `.env`-file before running `npm install`, you may need to re-install your packages to ensure the postinstall scripts are executed for decrypting the fonts and other artifacts (`rm --recursive --force node_modules/@db-ux/db-theme* && npm update @db-ux/db-theme`)
 
 ## Start locally
 
diff --git a/docs/adr/adr-02-monorepo.md b/docs/adr/adr-02-monorepo.md
index 68e614f28788..248b465e0eec 100644
--- a/docs/adr/adr-02-monorepo.md
+++ b/docs/adr/adr-02-monorepo.md
@@ -2,7 +2,7 @@
 
 ## Decision and Rationale
 
-To reduce the amount of time spent deploying and linking dependant packages, we combined [base](https://github.com/db-ui/base), [core](https://github.com/db-ui/core) and [elements](https://github.com/db-ui/elements) into a single monorepo, and evolved afterwards regarding new technologies (compare to ADR 01).
+To reduce the amount of time spent deploying and linking dependent packages, we combined [base](https://github.com/db-ui/base), [core](https://github.com/db-ui/core) and [elements](https://github.com/db-ui/elements) into a single monorepo, and evolved afterwards regarding new technologies (compare to ADR 01).
 
 ## Problem description and context
 
diff --git a/docs/how-to-develop-a-component.md b/docs/how-to-develop-a-component.md
index 3337feeb3998..92455375b807 100644
--- a/docs/how-to-develop-a-component.md
+++ b/docs/how-to-develop-a-component.md
@@ -58,7 +58,7 @@ We use [Mitosis](https://github.com/BuilderIO/Mitosis/tree/main/docs) to develop
 ### Good to know
 
 1. You cannot use functions directly in a Mitosis component. A function has to be inside the `state`. So add your function to the `model.ts` `DBMyAwesomeComponentDefaultState`. Then you can define your component inside the `.tsx` file and use it in the `jsx` with `state.myAwsomeFunction()`.
-2. Try to enable multiple ways of data-binding: For example in `select` you are able to pass in a list of `<option>` via the `props.children` similiar to standard HTML composition, but we also give the developers the possibility to pass in a stripped down option list via another property: `options?: DBSelectOptionType[]`. We populate this with the internal `<For>` from Mitosis.
+2. Try to enable multiple ways of data-binding: For example in `select` you are able to pass in a list of `<option>` via the `props.children` similar to standard HTML composition, but we also give the developers the possibility to pass in a stripped down option list via another property: `options?: DBSelectOptionType[]`. We populate this with the internal `<For>` from Mitosis.
    Why do we do this? We have multiple frameworks and all behave differently. With multiple ways of data-binding we try to provide a JS framework native experience as closely as we can.
 3. Try to parameterize a lot: For example if your component includes an icon button you should give it a text for accessibility. You should provide a default text, so it can't be empty, but you should also let the user change it with a property e.g. `iconButtonText`.
 4. To enable some native functionalities for Vue and Angular (`v-model` and `[(ng-model)]`) you might need to add some extra code to your component. At the generation process you might select `formValue` anyhow, but otherwise take a look at the `input` to see what you need to add to make this work.
diff --git a/docs/research-other-design-systems.md b/docs/research-other-design-systems.md
index c57e2f538d8b..7e6e7a3b9ecf 100644
--- a/docs/research-other-design-systems.md
+++ b/docs/research-other-design-systems.md
@@ -24,7 +24,7 @@ We'd like to maintain a list of other design systems that might be interesting f
     - Web Components / StencilJS
 - [Porsche Design System](https://designsystem.porsche.com/v3/)
     - Web Components / StencilJS
-- [Barmer Puls Design System](https://barmer-puls.entw.bconnect.barmer.de/)
+- [Barmer Puls Design System](https://barmer-puls.entw.bconnect.barmer.de/) <!-- codespell:ignore -->
     - React Native
     - [Storybook](https://barmer-puls-react.entw.bconnect.barmer.de/?path=/story/surfaces-accordion--base)
 - [SAP UI5 Web Components](https://sap.github.io/ui5-webcomponents/)
@@ -40,7 +40,7 @@ We'd like to maintain a list of other design systems that might be interesting f
     - HTML & CSS first
     - JavaScript only as an addition, mainly because of that the target are content pages even only
     - Web Components (upcoming)
-- ["Informationstechnikzentrum Bund" Germany / KoliBri steht für "Komponentenbibliothek für die Barrierefreiheit"](https://public-ui.github.io/)
+- ["Informationstechnikzentrum Bund" Germany / KoliBri steht für "Komponentenbibliothek für die Barrierefreiheit"](https://public-ui.github.io/) <!-- codespell:ignore -->
     - Web Components / StencilJS
 - [Washington Post Design System (WPDS)](https://build.washingtonpost.com/)
     - React
diff --git a/docs/research/multi-select.md b/docs/research/multi-select.md
index 5bbd6f630415..2bdb725e94c3 100644
--- a/docs/research/multi-select.md
+++ b/docs/research/multi-select.md
@@ -14,7 +14,7 @@
 | [MongoDB.design](https://github.com/mongodb/design)                                     |                                 [combobox](https://www.mongodb.design/component/combobox/live-example)                                  | tags with remove button (tabable) + `input` with `aria-expanded` &`role=combobox` + extra container checkbox group                                                       |
 | [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) |                          [multi-select](https://designsystem.porsche.com/v3/components/multi-select/examples)                           | tags inside input as `text` + input with filter + extra container and checkbox group                                                                                     |
 | [SBB Lyne](https://github.com/lyne-design-system/lyne-components)                       |                   [multi-select](https://lyne-storybook.app.sbb.ch/?path=/story/elements-sbb-select--multiple-select)                   | only divs + extra container and checkbox group                                                                                                                           |
-| [Shopify Polaris](https://github.com/Shopify/polaris)                                   | [combobox](https://polaris.shopify.com/components/selection-and-input/combobox?example=combobox-with-multi-select-and-vertical-content) | ags with remove button (tabable) + `input` with `aria-expanded` &`role=combobox` + extra container checkbox group                                                        |
+| [Shopify Polaris](https://github.com/Shopify/polaris)                                   | [combobox](https://polaris.shopify.com/components/selection-and-input/combobox?example=combobox-with-multi-select-and-vertical-content) | tags with remove button (tabable) + `input` with `aria-expanded` &`role=combobox` + extra container checkbox group                                                       |
 | [SNCF Design System](https://gitlab.com/SNCF/wcs)                                       |                       [multi-select](https://designmetier-bootstrap.sncf.fr/docs/4.3/components/select/#multiple)                       | sr-only `select` + extra container with list buttons                                                                                                                     |
 | [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |                                                                   ❌                                                                    | --                                                                                                                                                                       |
 | [Telekom Scale](https://github.com/telekom/scale)                                       |                                                                   ❌                                                                    | --                                                                                                                                                                       |
@@ -26,5 +26,5 @@
 - [combobox_role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role)
 - [combobox example w3](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
 
-We should work with the button + checkbox approach. Maybe we can replace `button` with `details` + `summary`. Furthermore, out filtering (search inout) will be inside the dropdown/menu (see design). We may use `DBSelectOptionType` for the checkboxes to reflect groups etc.
+We should work with the button + checkbox approach. Maybe we can replace `button` with `details` + `summary`. Furthermore, out filtering (search input) will be inside the dropdown/menu (see design). We may use `DBSelectOptionType` for the checkboxes to reflect groups etc.
 Tags should be our `DBTag` with close function or a `span` based on the props we should change it like this variant="tags|overflow|amount".
diff --git a/docs/research/tabs.md b/docs/research/tabs.md
index e93e712fb853..2848e241bea5 100644
--- a/docs/research/tabs.md
+++ b/docs/research/tabs.md
@@ -18,7 +18,7 @@
 | [SNCF Design System](https://gitlab.com/SNCF/wcs)                                       |                [navs/tabs](https://designmetier-bootstrap.sncf.fr/docs/4.3/layout/navs/#tabs)                | `nav role="navigation"`,`<ul>`,`<li>`                                                                                                                          |
 | [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |               [tabs](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/tabs)                | `div`, `button role=tab`, no panels                                                                                                                            |
 | [Telekom Scale](https://github.com/telekom/scale)                                       |      [tab-navigation](https://telekom.github.io/scale/?path=/docs/components-tab-navigation--text-icon)      | `div role=tablist`, `span role=tab`, `div role="tabpanel"`                                                                                                     |
-| [Washington Post Design System](https://build.washingtonpost.com/)                      |                           [tabs](https://build.washingtonpost.com/components/tabs)                           | `div role=tablist`, `button role=tab`, `div`, alignement, disabled, overflow, !activationMode!                                                                 |
+| [Washington Post Design System](https://build.washingtonpost.com/)                      |                           [tabs](https://build.washingtonpost.com/components/tabs)                           | `div role=tablist`, `button role=tab`, `div`, alignment, disabled, overflow, !activationMode!                                                                  |
 | [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/)                                        |                        [tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)                        | Tabs -> Tablist = set of tab-elements (serves as label for tabpanel) -> activation displays content of tabpanel; aria and role attributes accurately described |
 
 ## Conclusion
@@ -32,7 +32,7 @@
 
 Findings:
 
-- Some design systems are using `activation-mode=auto/manual` - is this a vaild use-case for design? Default should be `auto` select which first tab selected
+- Some design systems are using `activation-mode=auto/manual` - is this a valid use-case for design? Default should be `auto` select which first tab selected
 - Prop `label` should be a slot to pass in e.g. a `<span>` and a `<DBBadge>`
 - Shall we provide a `badgeNumber` as a default property?
 - `fitted` property should be `width=auto/full`
diff --git a/docs/research/tooltip.md b/docs/research/tooltip.md
index 77e203e3e772..5d03ad10c1f5 100644
--- a/docs/research/tooltip.md
+++ b/docs/research/tooltip.md
@@ -14,9 +14,9 @@
 | [MongoDB.design](https://github.com/mongodb/design)                                     |                 [tooltip](https://www.mongodb.design/component/tooltip/example/)                  | wrapping tag, onHover add to dom                                                                |
 | [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) |                                                ❌                                                 |                                                                                                 |
 | [SBB Lyne](https://github.com/lyne-design-system/lyne-components)                       | [tooltip](https://lyne-storybook.app.sbb.ch/?path=/docs/components-sbb-tooltip-sbb-tooltip--docs) | own component + wrapping trigger                                                                |
-| [Shopify Polaris](https://github.com/Shopify/polaris)                                   |                [tooltip](https://polaris.shopify.com/components/overlays/tooltip)                 | warpping tag + `::after`                                                                        |
+| [Shopify Polaris](https://github.com/Shopify/polaris)                                   |                [tooltip](https://polaris.shopify.com/components/overlays/tooltip)                 | wrapping tag + `::after`                                                                        |
 | [SNCF Design System](https://gitlab.com/SNCF/wcs)                                       |         [tooltips](https://designmetier-bootstrap.sncf.fr/docs/4.3/components/tooltips/)          | `data-toggle="tooltip"` + `data-placement="top"` + `title="Tooltip on top"`, onHover add to dom |
-| [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |       [tooltip](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/tooltip)       | warpping tag + `aria-expand`                                                                    |
+| [Telefonica Mistica](https://github.com/Telefonica/mistica-web)                         |       [tooltip](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/tooltip)       | wrapping tag + `aria-expand`                                                                    |
 | [Telekom Scale](https://github.com/telekom/scale)                                       |        [tooltip](https://telekom.github.io/scale/?path=/docs/components-tooltip--standard)        | wrapping tag + `open`                                                                           |
 | [Washington Post Design System](https://build.washingtonpost.com/)                      |                  [tooltip](https://build.washingtonpost.com/components/tooltip)                   | wrapping tag + dom                                                                              |
 
diff --git a/package.json b/package.json
index ccc1d63c50ef..ff659bf6fc76 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "lint": "npm-run-all --parallel lint:*",
     "lint-docs-file-references": "node scripts/check-docs.js",
     "lint-packages": "tsx scripts/lint-packages.ts publint",
+    "lint:codespell": "codespell --ignore-words .config/.codespellignorewords --config .config/.codespellrc",
     "lint:jscpd": "jscpd . --exitCode 1 --config .config/.jscpd.json",
     "lint:markdownlint": "markdownlint --config .config/.markdown-lint.yml **/*.md",
     "lint:package-json": "npx npm-package-json-lint packages/*/package.json",
diff --git a/packages/components/docs/Backdrop.md b/packages/components/docs/Backdrop.md
index 8f636ab8bec3..f528a059985f 100644
--- a/packages/components/docs/Backdrop.md
+++ b/packages/components/docs/Backdrop.md
@@ -1,7 +1,7 @@
 # Backdrop
 
 There is no `Backdrop` component.
-If you need a backdrop like the one in `DBDrawer` you sould apply those styles:
+If you need a backdrop like the one in `DBDrawer` you should apply those styles:
 
 ## CSS
 
diff --git a/packages/components/docs/Validation.md b/packages/components/docs/Validation.md
index 411d731ebf1a..89a0afa80ec0 100644
--- a/packages/components/docs/Validation.md
+++ b/packages/components/docs/Validation.md
@@ -15,4 +15,4 @@ If you use some framework you can pass the props `invalidMessage` and `validMess
 
 You can use `data-validation|validation="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
 
-> **Note:** This may lead to problems and inconsistency, only use it if you know what you do, and have specific validation conditions that aren't possible to get defined by the huge range of already existing [validation conditions and patterns through attributs](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation).
+> **Note:** This may lead to problems and inconsistency, only use it if you know what you do, and have specific validation conditions that aren't possible to get defined by the huge range of already existing [validation conditions and patterns through attributes](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation).
diff --git a/packages/components/src/components/accordion-item/index.html b/packages/components/src/components/accordion-item/index.html
index 8b057d67a075..469e5f677734 100644
--- a/packages/components/src/components/accordion-item/index.html
+++ b/packages/components/src/components/accordion-item/index.html
@@ -9,7 +9,9 @@
 		<!-- HTML only component -->
 		<details class="db-accordion-item">
 			<summary>DB Accordion Item</summary>
-			<div class="db-accordion-content">Und hier ist der Content</div>
+			<div class="db-accordion-content" lang="de">
+				Und hier ist der Content <!-- codespell:ignore ist -->
+			</div>
 		</details>
 	</body>
 </html>
diff --git a/packages/components/src/components/link/docs/Migration.md b/packages/components/src/components/link/docs/Migration.md
index 15d3ec1db876..093123fbb8d4 100644
--- a/packages/components/src/components/link/docs/Migration.md
+++ b/packages/components/src/components/link/docs/Migration.md
@@ -13,8 +13,8 @@
 
 ### icons
 
-| Before        | Status | After | Description                                                            |
-| ------------- | :----: | ----- | ---------------------------------------------------------------------- |
-| `icon`        |   ❌   | ❌    | not valid anymore use `content` to show interal or external arrow icon |
-| `icononly`    |   ❌   | ❌    |                                                                        |
-| `iconVariant` |   ❌   | ❌    |                                                                        |
+| Before        | Status | After | Description                                                             |
+| ------------- | :----: | ----- | ----------------------------------------------------------------------- |
+| `icon`        |   ❌   | ❌    | not valid anymore use `content` to show internal or external arrow icon |
+| `icononly`    |   ❌   | ❌    |                                                                         |
+| `iconVariant` |   ❌   | ❌    |                                                                         |
diff --git a/packages/foundations/assets/fonts/unicode-eu.txt b/packages/foundations/assets/fonts/unicode-eu.txt
index 92678db0f8ba..5e5c2196cbff 100644
--- a/packages/foundations/assets/fonts/unicode-eu.txt
+++ b/packages/foundations/assets/fonts/unicode-eu.txt
@@ -1,4 +1,4 @@
-# compare to https://symbl.cc/de/unicode-table/
+# compare to https://symbl.cc/de/unicode-table/ /// codespell:ignore symbl
 U+0000-024F # Latin (all)
 U+0020,U+0009,U+000A,U+000D # white space characters
 U+00E4,U+00F6,U+00FC,U+00DF # German characters
diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html
index 7b4647b36874..a784f9b38588 100644
--- a/showcases/angular-showcase/src/app/components/form/form.component.html
+++ b/showcases/angular-showcase/src/app/components/form/form.component.html
@@ -303,34 +303,34 @@ <h1>Output</h1>
 				</db-tab-panel>
 				<db-tab-panel>Tab Panel 2</db-tab-panel>
 				<db-tab-panel>Tab Panel 3</db-tab-panel>
-				<db-tab-panel>
+				<db-tab-panel lang="la">
 					At vero eos et accusamus et iusto odio dignissimos ducimus
 					qui blanditiis praesentium voluptatum deleniti atque
 					corrupti quos dolores et quas molestias excepturi sint
 					occaecati cupiditate non provident, similique sunt in culpa
 					qui officia deserunt mollitia animi, id est laborum et
 					dolorum fuga. Et harum quidem rerum facilis est et expedita
-					distinctio. Nam libero tempore, cum soluta nobis est
-					eligendi optio cumque nihil impedit quo minus id quod maxime
-					placeat facere possimus, omnis voluptas assumenda est, omnis
-					dolor repellendus. Temporibus autem quibusdam et aut
-					officiis debitis aut rerum necessitatibus saepe eveniet ut
-					et voluptates repudiandae sint et molestiae non recusandae.
-					Itaque earum rerum hic tenetur a sapiente delectus, ut aut
-					reiciendis voluptatibus maiores alias consequatur aut
-					perferendis doloribus asperiores repellat. n the other hand,
-					we denounce with righteous indignation and dislike men who
-					are so beguiled and demoralized by the charms of pleasure of
-					the moment, so blinded by desire, that they cannot foresee
-					the pain and trouble that are bound to ensue; and equal
-					blame belongs to those who fail in their duty through
-					weakness of will, which is the same as saying through
-					shrinking from toil and pain. These cases are perfectly
-					simple and easy to distinguish. In a free hour, when our
-					power of choice is untrammelled and when nothing prevents
-					our being able to do what we like best, every pleasure is to
-					be welcomed and every pain avoided. But in certain
-					circumstances and owing to the claims of duty or the
+					distinctio. Name libero tempore, cum soluta nobis est
+					eligendi option cumque nihil impedit quo minus id quod
+					maxime placeat facere possimus, omnis voluptas assumenda
+					est, omnis dolor repellendus. Temporibus autem quibusdam et
+					aut officiis debitis aut rerum necessitatibus saepe eveniet
+					ut et voluptates repudiandae sint et molestiae non
+					recusandae. Itaque earum rerum hic tenetur a sapiente
+					delectus, ut aut reiciendis voluptatibus maiores alias
+					consequatur aut perferendis doloribus asperiores repellat. n
+					the other hand, we denounce with righteous indignation and
+					dislike men who are so beguiled and demoralized by the
+					charms of pleasure of the moment, so blinded by desire, that
+					they cannot foresee the pain and trouble that are bound to
+					ensue; and equal blame belongs to those who fail in their
+					duty through weakness of will, which is the same as saying
+					through shrinking from toil and pain. These cases are
+					perfectly simple and easy to distinguish. In a free hour,
+					when our power of choice is untrammelled and when nothing
+					prevents our being able to do what we like best, every
+					pleasure is to be welcomed and every pain avoided. But in
+					certain circumstances and owing to the claims of duty or the
 					obligations of business it will frequently occur that
 					pleasures have to be repudiated and annoyances accepted. The
 					wise man therefore always holds in these matters to this
diff --git a/showcases/vue-showcase/src/components/form/Form.vue b/showcases/vue-showcase/src/components/form/Form.vue
index 95dff3fd6d51..a59f5df0d2d7 100644
--- a/showcases/vue-showcase/src/components/form/Form.vue
+++ b/showcases/vue-showcase/src/components/form/Form.vue
@@ -53,9 +53,9 @@ const logAll = () => {
 };
 
 const reset = () => {
-	firstInput.value = "resetted";
-	textarea.value = "resetted";
-	textareavModel.value = "resetted";
+	firstInput.value = "resetted"; // codespell:ignore resetted
+	textarea.value = "resetted"; // codespell:ignore resetted
+	textareavModel.value = "resetted"; // codespell:ignore resetted
 	checkbox.value = [true, false];
 	dateInput.value = "";
 };