diff --git a/.eleventy.js b/.eleventy.js
index 06b723a7a..1d87caeaf 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -138,16 +138,16 @@ module.exports = function (eleventyConfig) {
     return bottom;
   });
 
-  eleventyConfig.addFilter('colourFromValue', function(value, tokens) {
-    let colourName = "";
+  eleventyConfig.addFilter('colourFromValue', function (value, tokens) {
+    let colourName = '';
     Object.keys(tokens).forEach(colour => {
       Object.keys(tokens[colour]).forEach(weightValue => {
-        if (tokens[colour][weightValue]["value"] === value) {
+        if (tokens[colour][weightValue]['value'] === value) {
           colourName = `${colour}-${weightValue}`;
         }
       });
     });
-    return colourName
+    return colourName;
   });
 
   /* Markdown Overrides */
@@ -163,13 +163,15 @@ module.exports = function (eleventyConfig) {
 
   // Short codes
 
-  eleventyConfig.addPairedShortcode('viewCode', (children, lang, id, name) => {
+  eleventyConfig.addPairedShortcode('viewCode', (content, lang, id, name) => {
     const langStrings = {
       en: {
+        code: 'Code display',
         view: 'View code',
         copy: 'Copy code',
       },
       fr: {
+        code: 'Affichage du code',
         view: 'Voir le code',
         copy: 'Copier le code',
       },
@@ -177,18 +179,31 @@ module.exports = function (eleventyConfig) {
     if (lang != 'en ' && lang != 'fr') {
       lang = 'en';
     }
-    const content = markdownLibrary.render(children);
 
     return `
-    <div class="code-showcase mb-400">
-      <div class="showcase mb-400 p-400" id="${id}" aria-hidden="true">
-        ${content}
-      </div>
-      <div>
-        <gcds-button button-type="button" button-role="secondary" aria-label="${langStrings[lang].view} - ${name}" onclick="toggleCodeShowcase(this, '${id}');" aria-controls="${id}" aria-expanded="false">${langStrings[lang].view}</gcds-button>
-        <gcds-button button-type="button" button-role="secondary" onclick="copyCodeShowcase(this, '${id}', '${lang}');" onblur="this.innerText = '${langStrings[lang].copy}'">${langStrings[lang].copy}</gcds-button>
-      </div>
-    </div>
+        <div class="code-showcase mb-400">
+          <textarea class="showcase text-light mb-400 p-400" id="${id}" rows="8" aria-label="${langStrings[lang].code} - ${name}" aria-hidden="true" readonly>${content}</textarea>
+          <div>
+            <gcds-button
+              class="showcase-view-button"
+              button-type="button"
+              button-role="secondary"
+              aria-label="${langStrings[lang].view} - ${name}"
+              aria-controls="${id}"
+              aria-expanded="false"
+            >
+              ${langStrings[lang].view}
+            </gcds-button>
+            <gcds-button
+              class="showcase-copy-button"
+              button-type="button"
+              button-role="secondary"
+              lang="${lang}"
+            >
+              ${langStrings[lang].copy}
+            </gcds-button>
+          </div>
+        </div>
     `;
   });
 
diff --git a/src/en/components/grid/base.md b/src/en/components/grid/base.md
index 7aae7e0ce..6e4c3acf1 100644
--- a/src/en/components/grid/base.md
+++ b/src/en/components/grid/base.md
@@ -6,8 +6,6 @@ permalink: false
 tags: ['gridEN', 'header']
 ---
 
-{{ locale }}
-
 # Grid <br>`<gcds-grid>`
 
 _Also called: layout, columns, columns layout, grid container._
diff --git a/src/en/components/grid/code.md b/src/en/components/grid/code.md
index 45df624cd..6fba58d5c 100644
--- a/src/en/components/grid/code.md
+++ b/src/en/components/grid/code.md
@@ -69,15 +69,12 @@ Mobile
 </div>
 
 {% viewCode "en" "preview-grid-flexible" "gcds-grid" %}
-
-```
 <gcds-grid tag="article" columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" gap="300">
-    <p>This is some example content to display the grid component.</p>
-    <p>This is some example content to display the grid component.</p>
-    <p>This is some example content to display the grid component.</p>
-</gcds-grid>
-```
 
+  <p>This is some example content to display the grid component.</p>
+  <p>This is some example content to display the grid component.</p>
+  <p>This is some example content to display the grid component.</p>
+</gcds-grid>
 {% endviewCode %}
 
 Set the minimum and maximum width to design equal-width columns with restrictions to limit how wide they will span on any screen size.
@@ -122,15 +119,12 @@ Mobile
 </div>
 
 {% viewCode "en" "preview-grid-fixed-width" "gcds-grid" %}
-
-```
 <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
-    <p>This is some example content to display the grid component.</p>
-    <p>This is some example content to display the grid component.</p>
-    <p>This is some example content to display the grid component.</p>
-</gcds-grid>
-```
 
+  <p>This is some example content to display the grid component.</p>
+  <p>This is some example content to display the grid component.</p>
+  <p>This is some example content to display the grid component.</p>
+</gcds-grid>
 {% endviewCode %}
 
 {% include "partials/getcode.njk" %}
diff --git a/src/fr/composants/grille/code.md b/src/fr/composants/grille/code.md
index 5ba6e446a..33ef1a71f 100644
--- a/src/fr/composants/grille/code.md
+++ b/src/fr/composants/grille/code.md
@@ -69,15 +69,12 @@ Mobile
 </div>
 
 {% viewCode "fr" "preview-grid-flexible" "gcds-grid" %}
-
-```
 <gcds-grid tag="article" columns-desktop="1fr 1fr 1fr" columns-tablet="1fr 1fr" columns="1fr" gap="300">
-    <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
-    <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
-    <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
-</gcds-grid>
-```
 
+  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
+  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
+  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
+</gcds-grid>
 {% endviewCode %}
 
 Définissez la largeur minimale et la largeur maximale pour concevoir des colonnes de largeur égale afin de limiter la largeur des colonnes sur n'importe quelle taille d'écran.
@@ -122,15 +119,12 @@ Mobile
 </div>
 
 {% viewCode "fr" "preview-grid-fixed-width" "gcds-grid" %}
-
-```
 <gcds-grid tag="article" columns="repeat(auto-fit, minmax(100px, 300px))" gap="500">
-    <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
-    <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
-    <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
-</gcds-grid>
-```
 
+  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
+  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
+  <p>Ceci est un exemple de contenu pour illustrer le composant Grille.</p>
+</gcds-grid>
 {% endviewCode %}
 
 {% include "partials/getcode.njk" %}
diff --git a/src/scripts/code-showcase.js b/src/scripts/code-showcase.js
index 54d18d263..a15ff13d6 100644
--- a/src/scripts/code-showcase.js
+++ b/src/scripts/code-showcase.js
@@ -1,28 +1,36 @@
-function toggleCodeShowcase(trigger, id) {
-  const element = document.querySelector(`#${id}`);
-  if (element.getAttribute('aria-hidden') == 'true') {
-    element.setAttribute('aria-hidden', false);
-    trigger.setAttribute('aria-expanded', 'true');
-  } else {
-    element.setAttribute('aria-hidden', true);
-    trigger.setAttribute('aria-expanded', 'false');
+document.addEventListener('DOMContentLoaded', function () {
+  // Toggle code visibility
+  document.querySelectorAll('.showcase-view-button').forEach(button => {
+    button.addEventListener('click', toggleCodeVisibility);
+  });
+
+  function toggleCodeVisibility() {
+    const code = this.closest('.code-showcase').querySelector('.showcase');
+    const isHidden = code.getAttribute('aria-hidden') === 'true';
+
+    code.setAttribute('aria-hidden', !isHidden);
+    this.setAttribute('aria-expanded', String(isHidden));
   }
-}
 
-function copyCodeShowcase(trigger, id, lang) {
-  const parentElement = document.getElementById(id);
-  const codeElement = parentElement.querySelector('code');
-  const copyButton = parentElement.querySelector('.code-copy');
+  // Copy code showcase
+  document.querySelectorAll('.code-showcase').forEach(codeShowcase => {
+    codeShowcase
+      .querySelector('.showcase-copy-button')
+      .addEventListener('click', copyCode);
+  });
 
-  // Change values to slect right code element
-  // The ID attribute is not set properly due to how we render our code elements
-  codeElement.setAttribute('id', `code-${id}`);
-  copyButton.setAttribute('data-clipboard-target', `#code-${id}`);
-  copyButton.click();
+  function copyCode() {
+    const codeElement =
+      this.closest('.code-showcase').querySelector('.showcase');
+    const lang = this.getAttribute('lang');
 
-  if (lang == 'en') {
-    trigger.innerText = 'Copied';
-  } else {
-    trigger.innerText = 'Copié';
+    navigator.clipboard
+      .writeText(codeElement.value)
+      .then(() => {
+        this.innerText = lang === 'en' ? 'Copied' : 'Copié';
+      })
+      .catch(error => {
+        console.error('Failed to copy text: ', error);
+      });
   }
-}
+});
diff --git a/src/styles/components/_code-showcase.scss b/src/styles/components/_code-showcase.scss
index 798060fcb..8b167242e 100644
--- a/src/styles/components/_code-showcase.scss
+++ b/src/styles/components/_code-showcase.scss
@@ -4,6 +4,7 @@
 
 .code-showcase {
   .showcase {
+    width: 100%;
     background-color: #262626;
 
     &[aria-hidden='true'] {
@@ -12,17 +13,13 @@
       height: 0;
       margin: 0;
       padding: 0;
+      border: 0;
       overflow: hidden;
     }
 
     &[aria-hidden='false'] {
       margin-top: calc(-1 * var(--gcds-spacing-400));
     }
-
-    code {
-      background-color: transparent;
-      color: var(--gcds-text-light);
-    }
   }
 
   gcds-button {
diff --git a/src/styles/style.css b/src/styles/style.css
index bc266a94c..16073994b 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -157,6 +157,7 @@ ul li ul li {
  * Code showcase
  */
 .code-showcase .showcase {
+  width: 100%;
   background-color: #262626;
 }
 .code-showcase .showcase[aria-hidden=true] {
@@ -165,15 +166,12 @@ ul li ul li {
   height: 0;
   margin: 0;
   padding: 0;
+  border: 0;
   overflow: hidden;
 }
 .code-showcase .showcase[aria-hidden=false] {
   margin-top: calc(-1 * var(--gcds-spacing-400));
 }
-.code-showcase .showcase code {
-  background-color: transparent;
-  color: var(--gcds-text-light);
-}
 .code-showcase gcds-button {
   margin: 0 var(--gcds-spacing-300) 0 0;
 }