diff --git a/.gitignore b/.gitignore
index da64c7b..ed65dbe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,6 @@ dist/
 # generated types
 .astro/
 .idea/
-.vscode/
 
 # dependencies
 node_modules/
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..c37a100
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,18 @@
+{
+  // Enable pasting files into a Markdown editor to create Markdown links.
+  "markdown.editor.filePaste.enabled": true,
+
+  // Copy pasted media files into a Markdown editor to the workspace.
+  "markdown.editor.filePaste.copyIntoWorkspace": "mediaFiles",
+
+  // Enable dropping files into a Markdown editor to create Markdown links.
+  "markdown.editor.drop.enabled": true,
+
+  // Copy dropped media files into a Markdown editor to the workspace.
+  "markdown.editor.drop.copyIntoWorkspace": "mediaFiles",
+
+  // Define the destination folder for copied files.
+  "markdown.copyFiles.destination": {
+    "/src/content/**/*": "/src/images/content/${documentBaseName}/"
+  },
+}
diff --git a/README.md b/README.md
index 83cb402..d6cc510 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ ScrewFast is an open-source template designed for quick and efficient web projec
       - [Footer Links](#footer-links)
       - [Social Media Links](#social-media-links)
   * [Integrations and Enhancements](#integrations-and-enhancements)
-  * + [Starlight Documentation](#starlight-documentation)
+    + [Starlight Documentation](#starlight-documentation)
     + [Lenis for Smooth Scrolling](#lenis-for-smooth-scrolling)
     + [GSAP Integration](#gsap-integration)
     + [Hiding Scrollbar](#hiding-scrollbar)
@@ -38,6 +38,8 @@ ScrewFast is an open-source template designed for quick and efficient web projec
       - [Structured Data and Rich Snippets](#structured-data-and-rich-snippets)
       - [Using Astro SEO Integrations](#using-astro-seo-integrations)
     + [Robots.txt](#robotstxt)
+    + [Markdown/MDX](#markdownmdx)
+      - [Image Integration](#image-integration)
     + [Astro Integrations](#astro-integrations)
     + [Flexibility with Integrations](#flexibility-with-integrations)
   * [Tools and Technologies](#tools-and-technologies)
@@ -563,6 +565,25 @@ export const GET: APIRoute = () => {
   });
 };
 ```
+### Markdown/MDX
+
+#### Image Integration
+
+The addition of `.vscode/settings.json` file in the root directory facilitates image integration directly into content collections within Markdown editors. This feature enables effortless creation of Markdown links with media files and seamless copying into the workspace.
+
+##### Usage
+- **Paste/Drop Images**: Activate by pressing <kbd>Shift</kbd> while dropping the file.
+- **Markdown Link**: Image is linked using Markdown syntax `(![alt text](../../images/content/<path>))`.
+- **File Handling**: Images are organized in `src/images/content/<path>`.
+
+##### Example
+Pasting `getting-started.png` into `src/content/post-1.md` results in:
+
+- Adding `![alt text](../../images/content/post-1/getting-started.png)` to `post-1.md`.
+- Moving the image file to `src/images/content/post-1/getting-started.png`.
+
+> [!NOTE]
+> Remember to press <kbd>Shift</kbd> while dropping images.
 
 ### Astro Integrations
 
diff --git a/src/components/BrandLogo.astro b/src/components/BrandLogo.astro
index 3a65828..d4be8df 100644
--- a/src/components/BrandLogo.astro
+++ b/src/components/BrandLogo.astro
@@ -1,12 +1,8 @@
----
-const { width } = Astro.props;
-
-interface Props {
-  width: string;
-}
----
-
-<svg class=`h-auto ${width}` viewBox="0 0 521 226" fill="none">
+<svg
+  {...Astro.props}
+  viewBox="0 0 521 226"
+  fill="none"
+>
   <rect
     width="78.937"
     height="18.485"
diff --git a/src/components/sections/FooterSection.astro b/src/components/sections/FooterSection.astro
index 96fe575..b6c8bb1 100644
--- a/src/components/sections/FooterSection.astro
+++ b/src/components/sections/FooterSection.astro
@@ -25,7 +25,7 @@ const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafte
     <div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
       <div class="col-span-full lg:col-span-1">
         <!-- Brand Logo -->
-        <BrandLogo width="w-32" />
+        <BrandLogo class="h-auto w-32" />
       </div>
       <!-- An array of links for Product and Company sections -->
       {
diff --git a/src/components/sections/Navbar.astro b/src/components/sections/Navbar.astro
index babbf26..1dd3323 100644
--- a/src/components/sections/Navbar.astro
+++ b/src/components/sections/Navbar.astro
@@ -29,7 +29,7 @@ const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
         href={homeUrl}
         aria-label="Brand"
       >
-        <BrandLogo width="w-24" />
+        <BrandLogo class="h-auto w-24" />
       </a>
       <!-- Collapse toggle for smaller screens -->
       <div class="ml-auto mr-5 md:hidden">