diff --git a/docs/src/content/docs/styling/setup-scss-config.mdx b/docs/src/content/docs/styling/setup-scss-config.mdx
index 3ac149f..2ba8557 100644
--- a/docs/src/content/docs/styling/setup-scss-config.mdx
+++ b/docs/src/content/docs/styling/setup-scss-config.mdx
@@ -15,54 +15,50 @@ _Please correct me if this should be different and open a [Github issue](https:/
1. Install the SASS Pre-processor
-If already present this is optional.
-
-
-
- ```bash
- # Using NPM
- npm install -D sass
- ```
-
-
-
-
- ```bash
- # Using PNPM
- pnpm add -D sass
- ```
-
-
-
-
- ```bash
- # Using Yarn
- yarn add -D sass
- ```
-
-
-
-
+ If already present this is optional.
+
+
+ ```bash
+ # Using NPM
+ npm install -D sass
+ ```
+
+
+
+ ```bash
+ # Using PNPM
+ pnpm add -D sass
+ ```
+
+
+
+ ```bash
+ # Using Yarn
+ yarn add -D sass
+ ```
+
+
+
2. Create a new SCSS file
-Create a new SCSS file (for example astro-breadcrumbs-config.scss) in your project and import the `astro-breadcrumbs` SCSS file. You can then use the SCSS variables to customize the look of your breadcrumbs.
-
-```scss
-// astro-breadcrumbs-config.scss
-@use "astro-breadcrumbs/breadcrumbs.scss" with (
- /// Your config goes here
- $size-font: 12px,
- $color-link: rebeccapurple
-);
-```
+ Create a new SCSS file (for example astro-breadcrumbs-config.scss) in your project and import the `astro-breadcrumbs` SCSS file. You can then use the SCSS variables to customize the look of your breadcrumbs.
+ ```scss
+ // astro-breadcrumbs-config.scss
+ @use "astro-breadcrumbs/breadcrumbs.scss" with (
+ /// Your config goes here
+ /// $size-font: 12px;
+ /// $color-link: rebeccapurple;
+ );
+ ```
3. Import the SCSS file in your Astro file
-```astro
----
-import "../styles/astro-breadcrumbs-config.scss";
----
-```
-
+ ```astro
+ ---
+ import "../styles/astro-breadcrumbs-config.scss";
+ ---
+ ```
+
+