diff --git a/src/Dimmer/Dimmer.tsx b/src/Dimmer/Dimmer.tsx
index 2a9a67e6e..d6a1b9bbe 100644
--- a/src/Dimmer/Dimmer.tsx
+++ b/src/Dimmer/Dimmer.tsx
@@ -1,15 +1,17 @@
-import React, { FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
+import React, { FC, HTMLAttributes } from 'react';
 
 import { Icon } from '../Icon/Icon';
 
 export interface DimmerProps extends HTMLAttributes<HTMLElement> {
-  /** Il nome dell'icona da mostrare. Per una lista completa vedi: @TODO-URL */
+  /** Il nome dell'icona da mostrare */
   icon?: string;
   /** Le varianti di colore definite in Bootstrap Italia */
-  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
+  color?: 'primary' | 'secondary';
   /** Classi aggiuntive da usare per il componente Dimmer */
   className?: string;
+  /** Mostra il wrapper */
+  show?: boolean;
   /**
    * Classi aggiuntive da usare per il componente contenitore del Dimmer
    * Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,
@@ -19,20 +21,28 @@ export interface DimmerProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const Dimmer: FC<DimmerProps> = ({ icon, color, className, wrapperClassName, testId, ...attributes }) => {
-  const { children, ...rest } = attributes;
-  const classes = classNames('dimmer', wrapperClassName === true ? className : wrapperClassName, {
-    [`dimmer-${color}`]: color
-  });
-  const innerClasses = classNames('dimmer-inner', className);
-  const dimmerIcon = icon && (
-    <div className='dimmer-icon'>
-      <Icon icon={icon} />
-    </div>
-  );
+export const Dimmer: FC<DimmerProps> = ({
+  icon,
+  color,
+  className,
+  show = true,
+  wrapperClassName,
+  testId,
+  ...attributes
+}) => {
+  const { children, ...rest } = attributes,
+    classes = classNames('dimmer fade', { show: show }, wrapperClassName === true ? className : wrapperClassName, {
+      [`dimmer-${color}`]: color
+    }),
+    innerClasses = classNames('dimmer-inner', className),
+    dimmerIcon = icon && (
+      <div className='dimmer-icon'>
+        <Icon icon={icon} />
+      </div>
+    );
 
   return (
-    <div className={classes} {...rest} style={{ display: 'flex' }} data-testid={testId}>
+    <div className={classes} {...rest} data-testid={testId} aria-hidden={show ? undefined : true}>
       <div className={innerClasses} {...rest}>
         {dimmerIcon}
         {children}
diff --git a/stories/Components/Dimmer.stories.tsx b/stories/Components/Dimmer.stories.tsx
index e388eddd7..76f063dcc 100644
--- a/stories/Components/Dimmer.stories.tsx
+++ b/stories/Components/Dimmer.stories.tsx
@@ -1,10 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Button, Card, CardBody, CardText, CardTitle, Dimmer, DimmerButtons, Fade } from '../../src';
+import { Button, Card, CardBody, CardText, CardTitle, Dimmer, DimmerButtons } from '../../src';
+
+const colors = ['primary', 'secondary'];
 
 const meta: Meta<typeof Dimmer> = {
-  title: "Documentazione/Componenti/Dimmer",
-  component: Dimmer,
+  title: 'Documentazione/Componenti/Dimmer',
+  component: Dimmer
 };
 
 export default meta;
@@ -12,9 +14,16 @@ export default meta;
 type Story = StoryObj<typeof Dimmer>;
 
 export const Esempi: Story = {
-  render: () => (
+  parameters: {
+    docs: {
+      controls: {
+        include: ['color', 'show', 'icon']
+      }
+    }
+  },
+  render: ({ ...args }) => (
     <div>
-      <div className='row'>
+      <div className='row dimmable'>
         <div className='col-12 col-lg-4'>
           {/* start card */}
           <Card>
@@ -61,84 +70,37 @@ export const Esempi: Story = {
           </Card>
         </div>
       </div>
-      <Fade in={true} tag='div' className='mt-3'>
-        <Dimmer icon='it-unlocked'>
-          <p>
-            Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
-            donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
-          </p>
-        </Dimmer>
-      </Fade>
+      <Dimmer {...args}>
+        <p>
+          Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
+          donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
+        </p>
+      </Dimmer>
     </div>
-  )
-};
-
-export const ColorePrimario: Story = {
-  render: () => (
-    <div>
-      <div className='row'>
-        <div className='col-12 col-lg-4'>
-          {/* start card */}
-          <Card>
-            <CardBody>
-              <CardTitle tag='h5'>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
-              </CardTitle>
-              <CardText>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua.
-              </CardText>
-            </CardBody>
-          </Card>
-          {/* end card */}
-        </div>
-
-        <div className='col-12 col-lg-4 d-none d-lg-block'>
-          {/* start card */}
-          <Card>
-            <CardBody>
-              <CardTitle tag='h5'>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
-              </CardTitle>
-              <CardText>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua.
-              </CardText>
-            </CardBody>
-          </Card>
-          {/* end card */}
-        </div>
-        <div className='col-12 col-lg-4 d-none d-lg-block'>
-          {/* start card */}
-          <Card>
-            <CardBody>
-              <CardTitle tag='h5'>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
-              </CardTitle>
-              <CardText>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua.
-              </CardText>
-            </CardBody>
-          </Card>
-        </div>
-      </div>
-      <Fade in={true} tag='div' className='mt-3'>
-        <Dimmer color='primary' icon='it-unlocked'>
-          <p>
-            Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
-            donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
-          </p>
-        </Dimmer>
-      </Fade>
-    </div>
-  )
+  ),
+  args: {
+    color: 'primary',
+    show: true,
+    icon: 'it-unlocked'
+  },
+  argTypes: {
+    color: {
+      control: 'radio',
+      options: colors
+    },
+    show: {
+      control: 'boolean'
+    },
+    icon: {
+      control: 'text'
+    }
+  }
 };
 
 export const DimmerConAzioni: Story = {
   render: () => (
     <div>
-      <div className='col'>
+      <div className='col dimmable'>
         <div className='col-12 col-lg-4'>
           {/* start card */}
           <Card>
@@ -170,17 +132,15 @@ export const DimmerConAzioni: Story = {
           {/* end card */}
         </div>
       </div>
-      <Fade in={true} tag='div' className='mt-3'>
-        <Dimmer icon='it-unlocked'>
-          <h4>Titolo Dimmer</h4>
-          <DimmerButtons>
-            <Button color='primary' outline>
-              Azione secondaria
-            </Button>
-            <Button color='primary'>Azione primaria</Button>
-          </DimmerButtons>
-        </Dimmer>
-      </Fade>
+      <Dimmer icon='it-unlocked'>
+        <h4>Titolo Dimmer</h4>
+        <DimmerButtons>
+          <Button color='primary' outline>
+            Azione secondaria
+          </Button>
+          <Button color='primary'>Azione primaria</Button>
+        </DimmerButtons>
+      </Dimmer>
     </div>
   )
 };
@@ -188,7 +148,7 @@ export const DimmerConAzioni: Story = {
 export const DimmerConAzioniColorePrimario: Story = {
   render: () => (
     <div>
-      <div className='col'>
+      <div className='col dimmable'>
         <div className='col-12 col-lg-4'>
           {/* start card */}
           <Card>
@@ -220,14 +180,12 @@ export const DimmerConAzioniColorePrimario: Story = {
           {/* end card */}
         </div>
       </div>
-      <Fade in={true} tag='div' className='mt-3'>
-        <Dimmer color='primary' icon='it-unlocked'>
-          <h4>Titolo Dimmer</h4>
-          <DimmerButtons single>
-            <Button color='primary'>Azione primaria</Button>
-          </DimmerButtons>
-        </Dimmer>
-      </Fade>
+      <Dimmer color='primary' icon='it-unlocked'>
+        <h4>Titolo Dimmer</h4>
+        <DimmerButtons single>
+          <Button color='primary'>Azione primaria</Button>
+        </DimmerButtons>
+      </Dimmer>
     </div>
   )
 };
diff --git a/stories/Documentation/Dimmer.mdx b/stories/Documentation/Dimmer.mdx
index d079fc7ef..2165035db 100644
--- a/stories/Documentation/Dimmer.mdx
+++ b/stories/Documentation/Dimmer.mdx
@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
-import { Dimmer } from '../../src';
+import { ArgTypes, Canvas, Controls, Meta } from '@storybook/blocks';
+import { Dimmer, DimmerButtons } from '../../src';
 import * as DimmerStories from '../Components/Dimmer.stories';
 
 <Meta of={DimmerStories} />
@@ -8,19 +8,14 @@ import * as DimmerStories from '../Components/Dimmer.stories';
 
 ## Un componente per focalizzare l’attenzione su un contenuto
 
-Un Dimmer occupa tutta l’altezza e la larghezza dell’elemento all’interno del quale è contenuto.
+Un Dimmer occupa tutta l’altezza e la larghezza dell’elemento all’interno del quale è contenuto, l’elemento contenitore deve avere la classe `.dimmable`
 
-### Esempio
+### Esempio interattivo
 
-Il componente `Dimmer` può contenere del testo, che può essere preceduto da un'icona, come da esempio:
+Il componente `Dimmer` può contenere del testo, può essere preceduto da un'icona e può avere diversi colori; puoi eseguire delle prove con i controlli sotto al canvas.
 
 <Canvas of={DimmerStories.Esempi} />
-
-#### Colore primario
-
-Impostando l'attributo `color="primary"` si ottiene una versione con sfondo di colore primario.
-
-<Canvas of={DimmerStories.ColorePrimario} />
+<Controls of={DimmerStories.Esempi} />
 
 ### Dimmer con Azioni
 
@@ -28,7 +23,7 @@ Un Dimmer può contenere tasti collegati ad azioni ed un titolo descrittivo.
 
 <Canvas of={DimmerStories.DimmerConAzioni} />
 
-#### Colore primario
+#### Colore primario con azioni
 
 Impostando l'attributo `color="primary"` si ottiene una versione con sfondo di colore primario.
 
@@ -36,6 +31,10 @@ Impostando l'attributo `color="primary"` si ottiene una versione con sfondo di c
 
 ## Argomenti componente
 
-## Dimmer
+### Dimmer
 
 <ArgTypes of={Dimmer} />
+
+### DimmerButton
+
+<ArgTypes of={DimmerButtons} />
diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
index aabc039b0..de247c8cf 100644
--- a/test/__snapshots__/Storybook.test.tsx.snap
+++ b/test/__snapshots__/Storybook.test.tsx.snap
@@ -5154,11 +5154,11 @@ exports[`Stories Snapshots Documentazione/Componenti/Chips VariantiDiColore 1`]
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Componenti/Dimmer ColorePrimario 1`] = `
+exports[`Stories Snapshots Documentazione/Componenti/Dimmer DimmerConAzioni 1`] = `
 <div>
   <div>
     <div
-      class="row"
+      class="col dimmable"
     >
       <div
         class="col-12 col-lg-4"
@@ -5212,171 +5212,45 @@ exports[`Stories Snapshots Documentazione/Componenti/Dimmer ColorePrimario 1`] =
           </div>
         </div>
       </div>
-      <div
-        class="col-12 col-lg-4 d-none d-lg-block"
-      >
-        <div
-          class="card-wrapper"
-        >
-          <div
-            class="card"
-          >
-            <div
-              class="card-body"
-            >
-              <h5
-                class="card-title"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
-              </h5>
-              <p
-                class="card-text"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
     <div
-      class="mt-3 fade"
-    >
-      <div
-        class="dimmer dimmer-primary"
-        style="display: flex;"
-      >
-        <div
-          class="dimmer-inner"
-        >
-          <div
-            class="dimmer-icon"
-          >
-            <svg
-              class="icon"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M16.5 12H16V6c0-2.2-1.8-4-4-4S8 3.8 8 6v3h1V6c0-1.7 1.3-3 3-3s3 1.3 3 3v6H7.5c-.6 0-1.1.5-1.1 1.1v6.8c0 .6.5 1.1 1.1 1.1h9c.6 0 1.1-.5 1.1-1.1v-6.8c0-.6-.5-1.1-1.1-1.1zm.1 7.9c0 .1 0 .1-.1.1h-9c-.1 0-.1 0-.1-.1v-6.8h9.2v6.8zM13 15.5c0 .3-.2.7-.5.8v1.5h-1v-1.5c-.3-.1-.5-.5-.5-.8 0-.6.4-1 1-1s1 .4 1 1z"
-              />
-            </svg>
-          </div>
-          <p>
-            Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Componenti/Dimmer DimmerConAzioni 1`] = `
-<div>
-  <div>
-    <div
-      class="col"
+      class="dimmer fade show"
     >
       <div
-        class="col-12 col-lg-4"
+        class="dimmer-inner"
       >
         <div
-          class="card-wrapper"
+          class="dimmer-icon"
         >
-          <div
-            class="card"
-          >
-            <div
-              class="card-body"
-            >
-              <h5
-                class="card-title"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
-              </h5>
-              <p
-                class="card-text"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="col-12 col-lg-4 d-none d-lg-block"
-      >
-        <div
-          class="card-wrapper"
-        >
-          <div
-            class="card"
+          <svg
+            class="icon"
+            enable-background="new 0 0 24 24"
+            role="img"
+            viewBox="0 0 24 24"
+            xml:space="preserve"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <div
-              class="card-body"
-            >
-              <h5
-                class="card-title"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
-              </h5>
-              <p
-                class="card-text"
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-              </p>
-            </div>
-          </div>
+            <path
+              d="M16.5 12H16V6c0-2.2-1.8-4-4-4S8 3.8 8 6v3h1V6c0-1.7 1.3-3 3-3s3 1.3 3 3v6H7.5c-.6 0-1.1.5-1.1 1.1v6.8c0 .6.5 1.1 1.1 1.1h9c.6 0 1.1-.5 1.1-1.1v-6.8c0-.6-.5-1.1-1.1-1.1zm.1 7.9c0 .1 0 .1-.1.1h-9c-.1 0-.1 0-.1-.1v-6.8h9.2v6.8zM13 15.5c0 .3-.2.7-.5.8v1.5h-1v-1.5c-.3-.1-.5-.5-.5-.8 0-.6.4-1 1-1s1 .4 1 1z"
+            />
+          </svg>
         </div>
-      </div>
-    </div>
-    <div
-      class="mt-3 fade"
-    >
-      <div
-        class="dimmer"
-        style="display: flex;"
-      >
+        <h4>
+          Titolo Dimmer
+        </h4>
         <div
-          class="dimmer-inner"
+          class="dimmer-buttons bg-dark"
         >
-          <div
-            class="dimmer-icon"
+          <button
+            class="btn btn-outline-primary"
           >
-            <svg
-              class="icon"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M16.5 12H16V6c0-2.2-1.8-4-4-4S8 3.8 8 6v3h1V6c0-1.7 1.3-3 3-3s3 1.3 3 3v6H7.5c-.6 0-1.1.5-1.1 1.1v6.8c0 .6.5 1.1 1.1 1.1h9c.6 0 1.1-.5 1.1-1.1v-6.8c0-.6-.5-1.1-1.1-1.1zm.1 7.9c0 .1 0 .1-.1.1h-9c-.1 0-.1 0-.1-.1v-6.8h9.2v6.8zM13 15.5c0 .3-.2.7-.5.8v1.5h-1v-1.5c-.3-.1-.5-.5-.5-.8 0-.6.4-1 1-1s1 .4 1 1z"
-              />
-            </svg>
-          </div>
-          <h4>
-            Titolo Dimmer
-          </h4>
-          <div
-            class="dimmer-buttons bg-dark"
+            Azione secondaria
+          </button>
+          <button
+            class="btn btn-primary"
           >
-            <button
-              class="btn btn-outline-primary"
-            >
-              Azione secondaria
-            </button>
-            <button
-              class="btn btn-primary"
-            >
-              Azione primaria
-            </button>
-          </div>
+            Azione primaria
+          </button>
         </div>
       </div>
     </div>
@@ -5388,7 +5262,7 @@ exports[`Stories Snapshots Documentazione/Componenti/Dimmer DimmerConAzioniColor
 <div>
   <div>
     <div
-      class="col"
+      class="col dimmable"
     >
       <div
         class="col-12 col-lg-4"
@@ -5444,43 +5318,38 @@ exports[`Stories Snapshots Documentazione/Componenti/Dimmer DimmerConAzioniColor
       </div>
     </div>
     <div
-      class="mt-3 fade"
+      class="dimmer fade show dimmer-primary"
     >
       <div
-        class="dimmer dimmer-primary"
-        style="display: flex;"
+        class="dimmer-inner"
       >
         <div
-          class="dimmer-inner"
+          class="dimmer-icon"
         >
-          <div
-            class="dimmer-icon"
+          <svg
+            class="icon"
+            enable-background="new 0 0 24 24"
+            role="img"
+            viewBox="0 0 24 24"
+            xml:space="preserve"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              class="icon"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M16.5 12H16V6c0-2.2-1.8-4-4-4S8 3.8 8 6v3h1V6c0-1.7 1.3-3 3-3s3 1.3 3 3v6H7.5c-.6 0-1.1.5-1.1 1.1v6.8c0 .6.5 1.1 1.1 1.1h9c.6 0 1.1-.5 1.1-1.1v-6.8c0-.6-.5-1.1-1.1-1.1zm.1 7.9c0 .1 0 .1-.1.1h-9c-.1 0-.1 0-.1-.1v-6.8h9.2v6.8zM13 15.5c0 .3-.2.7-.5.8v1.5h-1v-1.5c-.3-.1-.5-.5-.5-.8 0-.6.4-1 1-1s1 .4 1 1z"
-              />
-            </svg>
-          </div>
-          <h4>
-            Titolo Dimmer
-          </h4>
-          <div
-            class="dimmer-buttons bg-dark single-button"
+            <path
+              d="M16.5 12H16V6c0-2.2-1.8-4-4-4S8 3.8 8 6v3h1V6c0-1.7 1.3-3 3-3s3 1.3 3 3v6H7.5c-.6 0-1.1.5-1.1 1.1v6.8c0 .6.5 1.1 1.1 1.1h9c.6 0 1.1-.5 1.1-1.1v-6.8c0-.6-.5-1.1-1.1-1.1zm.1 7.9c0 .1 0 .1-.1.1h-9c-.1 0-.1 0-.1-.1v-6.8h9.2v6.8zM13 15.5c0 .3-.2.7-.5.8v1.5h-1v-1.5c-.3-.1-.5-.5-.5-.8 0-.6.4-1 1-1s1 .4 1 1z"
+            />
+          </svg>
+        </div>
+        <h4>
+          Titolo Dimmer
+        </h4>
+        <div
+          class="dimmer-buttons bg-dark single-button"
+        >
+          <button
+            class="btn btn-primary"
           >
-            <button
-              class="btn btn-primary"
-            >
-              Azione primaria
-            </button>
-          </div>
+            Azione primaria
+          </button>
         </div>
       </div>
     </div>
@@ -5492,7 +5361,7 @@ exports[`Stories Snapshots Documentazione/Componenti/Dimmer Esempi 1`] = `
 <div>
   <div>
     <div
-      class="row"
+      class="row dimmable"
     >
       <div
         class="col-12 col-lg-4"
@@ -5574,35 +5443,30 @@ exports[`Stories Snapshots Documentazione/Componenti/Dimmer Esempi 1`] = `
       </div>
     </div>
     <div
-      class="mt-3 fade"
+      class="dimmer fade show dimmer-primary"
     >
       <div
-        class="dimmer"
-        style="display: flex;"
+        class="dimmer-inner"
       >
         <div
-          class="dimmer-inner"
+          class="dimmer-icon"
         >
-          <div
-            class="dimmer-icon"
+          <svg
+            class="icon"
+            enable-background="new 0 0 24 24"
+            role="img"
+            viewBox="0 0 24 24"
+            xml:space="preserve"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              class="icon"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M16.5 12H16V6c0-2.2-1.8-4-4-4S8 3.8 8 6v3h1V6c0-1.7 1.3-3 3-3s3 1.3 3 3v6H7.5c-.6 0-1.1.5-1.1 1.1v6.8c0 .6.5 1.1 1.1 1.1h9c.6 0 1.1-.5 1.1-1.1v-6.8c0-.6-.5-1.1-1.1-1.1zm.1 7.9c0 .1 0 .1-.1.1h-9c-.1 0-.1 0-.1-.1v-6.8h9.2v6.8zM13 15.5c0 .3-.2.7-.5.8v1.5h-1v-1.5c-.3-.1-.5-.5-.5-.8 0-.6.4-1 1-1s1 .4 1 1z"
-              />
-            </svg>
-          </div>
-          <p>
-            Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
-          </p>
+            <path
+              d="M16.5 12H16V6c0-2.2-1.8-4-4-4S8 3.8 8 6v3h1V6c0-1.7 1.3-3 3-3s3 1.3 3 3v6H7.5c-.6 0-1.1.5-1.1 1.1v6.8c0 .6.5 1.1 1.1 1.1h9c.6 0 1.1-.5 1.1-1.1v-6.8c0-.6-.5-1.1-1.1-1.1zm.1 7.9c0 .1 0 .1-.1.1h-9c-.1 0-.1 0-.1-.1v-6.8h9.2v6.8zM13 15.5c0 .3-.2.7-.5.8v1.5h-1v-1.5c-.3-.1-.5-.5-.5-.8 0-.6.4-1 1-1s1 .4 1 1z"
+            />
+          </svg>
         </div>
+        <p>
+          Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
+        </p>
       </div>
     </div>
   </div>