diff --git a/.changeset/five-radios-tie.md b/.changeset/five-radios-tie.md
new file mode 100644
index 0000000000..a8163dda4e
--- /dev/null
+++ b/.changeset/five-radios-tie.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Refactor `image` prop in `<Banner />` component. If the prop is a string, it will be displayed inside img tag so you can set a url to simply set the image.
diff --git a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap
index 4b0ba6a93e..a0fc1fc19c 100644
--- a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap
@@ -41,30 +41,6 @@ exports[`Banner > renders correctly with a button 1`] = `
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 140px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -86,7 +62,7 @@ exports[`Banner > renders correctly with a button 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -109,7 +85,7 @@ exports[`Banner > renders correctly with a button 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #641cb3;
   font-size: 1.3125rem;
   font-family: Space Grotesk,Inter,Asap,sans-serif;
@@ -121,7 +97,7 @@ exports[`Banner > renders correctly with a button 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -133,7 +109,7 @@ exports[`Banner > renders correctly with a button 1`] = `
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -156,7 +132,7 @@ exports[`Banner > renders correctly with a button 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-12 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -195,22 +171,22 @@ exports[`Banner > renders correctly with a button 1`] = `
   color: #ffffff;
 }
 
-.emotion-14:hover {
+.emotion-12:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-14:active {
+.emotion-12:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-14:hover,
-.emotion-14:active {
+.emotion-12:hover,
+.emotion-12:active {
   background: #792dd4;
   color: #f9f9fa;
 }
 
-.emotion-16 {
+.emotion-14 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -249,22 +225,22 @@ exports[`Banner > renders correctly with a button 1`] = `
   color: #3f4250;
 }
 
-.emotion-16:hover {
+.emotion-14:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-16:active {
+.emotion-14:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-16:hover,
-.emotion-16:active {
+.emotion-14:hover,
+.emotion-14:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-18 {
+.emotion-16 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -273,7 +249,7 @@ exports[`Banner > renders correctly with a button 1`] = `
   min-height: 16px;
 }
 
-.emotion-18 .fillStroke {
+.emotion-16 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -284,38 +260,34 @@ exports[`Banner > renders correctly with a button 1`] = `
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
         </div>
         <div
-          class="emotion-12 emotion-5"
+          class="emotion-10 emotion-3"
         >
           <button
-            class="emotion-14 emotion-15"
+            class="emotion-12 emotion-13"
             type="button"
           >
             Button
@@ -323,12 +295,12 @@ exports[`Banner > renders correctly with a button 1`] = `
         </div>
       </div>
       <button
-        class="emotion-16 emotion-17"
+        class="emotion-14 emotion-15"
         name="close"
         type="button"
       >
         <svg
-          class="emotion-18 emotion-19"
+          class="emotion-16 emotion-17"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -383,30 +355,6 @@ exports[`Banner > renders correctly with a link 1`] = `
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 140px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -428,7 +376,7 @@ exports[`Banner > renders correctly with a link 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -451,7 +399,7 @@ exports[`Banner > renders correctly with a link 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #641cb3;
   font-size: 1.3125rem;
   font-family: Space Grotesk,Inter,Asap,sans-serif;
@@ -463,7 +411,7 @@ exports[`Banner > renders correctly with a link 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -475,7 +423,7 @@ exports[`Banner > renders correctly with a link 1`] = `
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -498,7 +446,7 @@ exports[`Banner > renders correctly with a link 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-14 {
+.emotion-12 {
   background-color: transparent;
   border: none;
   padding: 0;
@@ -525,17 +473,17 @@ exports[`Banner > renders correctly with a link 1`] = `
   text-case: none;
 }
 
-.emotion-14 .emotion-18 {
+.emotion-12 .emotion-16 {
   -webkit-transition: -webkit-transform 250ms ease-out;
   transition: transform 250ms ease-out;
 }
 
-.emotion-14>* {
+.emotion-12>* {
   pointer-events: none;
 }
 
-.emotion-14:hover,
-.emotion-14:focus {
+.emotion-12:hover,
+.emotion-12:focus {
   outline: none;
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -544,30 +492,30 @@ exports[`Banner > renders correctly with a link 1`] = `
   text-decoration-color: #521094;
 }
 
-.emotion-14:hover .emotion-18,
-.emotion-14:focus .emotion-18 {
+.emotion-12:hover .emotion-16,
+.emotion-12:focus .emotion-16 {
   -webkit-transform: translate(-0.25rem, 0);
   -moz-transform: translate(-0.25rem, 0);
   -ms-transform: translate(-0.25rem, 0);
   transform: translate(-0.25rem, 0);
 }
 
-.emotion-14[data-variant='inline'] {
+.emotion-12[data-variant='inline'] {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-thickness: 1px;
 }
 
-.emotion-14:hover::after,
-.emotion-14:focus::after {
+.emotion-12:hover::after,
+.emotion-12:focus::after {
   background-color: #641cb3;
 }
 
-.emotion-14:active {
+.emotion-12:active {
   text-decoration-thickness: 2px;
 }
 
-.emotion-16 {
+.emotion-14 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -575,7 +523,7 @@ exports[`Banner > renders correctly with a link 1`] = `
   padding-bottom: 0.25rem;
 }
 
-.emotion-19 {
+.emotion-17 {
   vertical-align: middle;
   fill: currentColor;
   height: 14px;
@@ -585,12 +533,12 @@ exports[`Banner > renders correctly with a link 1`] = `
   margin-left: 0.5rem;
 }
 
-.emotion-19 .fillStroke {
+.emotion-17 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
 
-.emotion-21 {
+.emotion-19 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -629,22 +577,22 @@ exports[`Banner > renders correctly with a link 1`] = `
   color: #3f4250;
 }
 
-.emotion-21:hover {
+.emotion-19:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-21:active {
+.emotion-19:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-21:hover,
-.emotion-21:active {
+.emotion-19:hover,
+.emotion-19:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-23 {
+.emotion-21 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -653,7 +601,7 @@ exports[`Banner > renders correctly with a link 1`] = `
   min-height: 16px;
 }
 
-.emotion-23 .fillStroke {
+.emotion-21 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -664,38 +612,34 @@ exports[`Banner > renders correctly with a link 1`] = `
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
         </div>
         <div
-          class="emotion-12 emotion-5"
+          class="emotion-10 emotion-3"
         >
           <a
-            class="emotion-14 emotion-15"
+            class="emotion-12 emotion-13"
             data-variant="standalone"
             href=""
             rel="noopener noreferrer"
@@ -704,10 +648,10 @@ exports[`Banner > renders correctly with a link 1`] = `
           >
             Link
             <span
-              class="emotion-16 emotion-17"
+              class="emotion-14 emotion-15"
             >
               <svg
-                class="emotion-18 emotion-19 emotion-20"
+                class="emotion-16 emotion-17 emotion-18"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -727,12 +671,12 @@ exports[`Banner > renders correctly with a link 1`] = `
         </div>
       </div>
       <button
-        class="emotion-21 emotion-22"
+        class="emotion-19 emotion-20"
         name="close"
         type="button"
       >
         <svg
-          class="emotion-23 emotion-20"
+          class="emotion-21 emotion-18"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -787,30 +731,6 @@ exports[`Banner > renders correctly with closable to false 1`] = `
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 140px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -832,7 +752,7 @@ exports[`Banner > renders correctly with closable to false 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -855,7 +775,7 @@ exports[`Banner > renders correctly with closable to false 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #641cb3;
   font-size: 1.3125rem;
   font-family: Space Grotesk,Inter,Asap,sans-serif;
@@ -867,7 +787,7 @@ exports[`Banner > renders correctly with closable to false 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -885,29 +805,25 @@ exports[`Banner > renders correctly with closable to false 1`] = `
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
@@ -959,30 +875,6 @@ exports[`Banner > renders correctly with default values 1`] = `
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 140px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1004,7 +896,7 @@ exports[`Banner > renders correctly with default values 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1027,7 +919,7 @@ exports[`Banner > renders correctly with default values 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #641cb3;
   font-size: 1.3125rem;
   font-family: Space Grotesk,Inter,Asap,sans-serif;
@@ -1039,7 +931,7 @@ exports[`Banner > renders correctly with default values 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1051,7 +943,7 @@ exports[`Banner > renders correctly with default values 1`] = `
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1090,22 +982,22 @@ exports[`Banner > renders correctly with default values 1`] = `
   color: #3f4250;
 }
 
-.emotion-12:hover {
+.emotion-10:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-12:active {
+.emotion-10:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-12:hover,
-.emotion-12:active {
+.emotion-10:hover,
+.emotion-10:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-14 {
+.emotion-12 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -1114,7 +1006,7 @@ exports[`Banner > renders correctly with default values 1`] = `
   min-height: 16px;
 }
 
-.emotion-14 .fillStroke {
+.emotion-12 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -1125,41 +1017,37 @@ exports[`Banner > renders correctly with default values 1`] = `
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
         </div>
       </div>
       <button
-        class="emotion-12 emotion-13"
+        class="emotion-10 emotion-11"
         name="close"
         type="button"
       >
         <svg
-          class="emotion-14 emotion-15"
+          class="emotion-12 emotion-13"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1214,30 +1102,6 @@ exports[`Banner > renders correctly with direction row 1`] = `
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 140px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1259,7 +1123,7 @@ exports[`Banner > renders correctly with direction row 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1282,7 +1146,7 @@ exports[`Banner > renders correctly with direction row 1`] = `
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #641cb3;
   font-size: 1.3125rem;
   font-family: Space Grotesk,Inter,Asap,sans-serif;
@@ -1294,7 +1158,7 @@ exports[`Banner > renders correctly with direction row 1`] = `
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1306,7 +1170,7 @@ exports[`Banner > renders correctly with direction row 1`] = `
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1345,22 +1209,22 @@ exports[`Banner > renders correctly with direction row 1`] = `
   color: #3f4250;
 }
 
-.emotion-12:hover {
+.emotion-10:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-12:active {
+.emotion-10:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-12:hover,
-.emotion-12:active {
+.emotion-10:hover,
+.emotion-10:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-14 {
+.emotion-12 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -1369,7 +1233,7 @@ exports[`Banner > renders correctly with direction row 1`] = `
   min-height: 16px;
 }
 
-.emotion-14 .fillStroke {
+.emotion-12 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -1380,41 +1244,37 @@ exports[`Banner > renders correctly with direction row 1`] = `
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
         </div>
       </div>
       <button
-        class="emotion-12 emotion-13"
+        class="emotion-10 emotion-11"
         name="close"
         type="button"
       >
         <svg
-          class="emotion-14 emotion-15"
+          class="emotion-12 emotion-13"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1469,30 +1329,6 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 140px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1514,7 +1350,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1537,7 +1373,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #641cb3;
   font-size: 1.3125rem;
   font-family: Space Grotesk,Inter,Asap,sans-serif;
@@ -1549,7 +1385,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1561,7 +1397,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1600,22 +1436,22 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   color: #3f4250;
 }
 
-.emotion-12:hover {
+.emotion-10:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-12:active {
+.emotion-10:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-12:hover,
-.emotion-12:active {
+.emotion-10:hover,
+.emotion-10:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-14 {
+.emotion-12 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -1624,7 +1460,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   min-height: 16px;
 }
 
-.emotion-14 .fillStroke {
+.emotion-12 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -1635,41 +1471,37 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
         </div>
       </div>
       <button
-        class="emotion-12 emotion-13"
+        class="emotion-10 emotion-11"
         name="close"
         type="button"
       >
         <svg
-          class="emotion-14 emotion-15"
+          class="emotion-12 emotion-13"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1724,30 +1556,6 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 140px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1769,7 +1577,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1792,7 +1600,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #ffffff;
   font-size: 1.3125rem;
   font-family: Space Grotesk,Inter,Asap,sans-serif;
@@ -1804,7 +1612,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #ffffff;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -1816,7 +1624,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1855,22 +1663,22 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   color: #ffffff;
 }
 
-.emotion-12:hover {
+.emotion-10:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-12:active {
+.emotion-10:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-12:hover,
-.emotion-12:active {
+.emotion-10:hover,
+.emotion-10:active {
   background: #792dd4;
   color: #f9f9fa;
 }
 
-.emotion-14 {
+.emotion-12 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -1879,7 +1687,7 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
   min-height: 16px;
 }
 
-.emotion-14 .fillStroke {
+.emotion-12 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -1890,41 +1698,37 @@ exports[`Banner > sizes and variants > renders correctly with size medium and va
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
         </div>
       </div>
       <button
-        class="emotion-12 emotion-13"
+        class="emotion-10 emotion-11"
         name="close"
         type="button"
       >
         <svg
-          class="emotion-14 emotion-15"
+          class="emotion-12 emotion-13"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -1979,30 +1783,6 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 74px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2024,7 +1804,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2047,7 +1827,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #641cb3;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -2059,7 +1839,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #3f4250;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -2071,7 +1851,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2110,22 +1890,22 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   color: #3f4250;
 }
 
-.emotion-12:hover {
+.emotion-10:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-12:active {
+.emotion-10:active {
   box-shadow: 0px 0px 0px 3px #151a2d5c;
 }
 
-.emotion-12:hover,
-.emotion-12:active {
+.emotion-10:hover,
+.emotion-10:active {
   background: #e9eaeb;
   color: #222638;
 }
 
-.emotion-14 {
+.emotion-12 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -2134,7 +1914,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   min-height: 16px;
 }
 
-.emotion-14 .fillStroke {
+.emotion-12 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -2145,41 +1925,37 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image-small.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image-small.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
         </div>
       </div>
       <button
-        class="emotion-12 emotion-13"
+        class="emotion-10 emotion-11"
         name="close"
         type="button"
       >
         <svg
-          class="emotion-14 emotion-15"
+          class="emotion-12 emotion-13"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -2234,30 +2010,6 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
 }
 
 .emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0rem;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  width: 74px;
-}
-
-.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2279,7 +2031,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   flex-wrap: nowrap;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2302,7 +2054,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   flex-wrap: nowrap;
 }
 
-.emotion-8 {
+.emotion-6 {
   color: #ffffff;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -2314,7 +2066,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   text-decoration: none;
 }
 
-.emotion-10 {
+.emotion-8 {
   color: #ffffff;
   font-size: 1rem;
   font-family: Inter,Asap,sans-serif;
@@ -2326,7 +2078,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   text-decoration: none;
 }
 
-.emotion-12 {
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2365,22 +2117,22 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   color: #ffffff;
 }
 
-.emotion-12:hover {
+.emotion-10:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-12:active {
+.emotion-10:active {
   box-shadow: 0px 0px 0px 3px #8c40ef40;
 }
 
-.emotion-12:hover,
-.emotion-12:active {
+.emotion-10:hover,
+.emotion-10:active {
   background: #792dd4;
   color: #f9f9fa;
 }
 
-.emotion-14 {
+.emotion-12 {
   vertical-align: middle;
   fill: currentColor;
   height: 16px;
@@ -2389,7 +2141,7 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
   min-height: 16px;
 }
 
-.emotion-14 .fillStroke {
+.emotion-12 .fillStroke {
   stroke: currentColor;
   fill: none;
 }
@@ -2400,41 +2152,37 @@ exports[`Banner > sizes and variants > renders correctly with size small and var
     <div
       class="emotion-0 emotion-1"
     >
+      <img
+        alt=""
+        src="/src/components/Banner/assets/default-image-small.svg"
+      />
       <div
         class="emotion-2 emotion-3"
-      >
-        <img
-          alt=""
-          src="/src/components/Banner/assets/default-image-small.svg"
-        />
-      </div>
-      <div
-        class="emotion-4 emotion-5"
         style="flex: 1;"
       >
         <div
-          class="emotion-6 emotion-5"
+          class="emotion-4 emotion-3"
           style="flex: 1;"
         >
           <p
-            class="emotion-8 emotion-9"
+            class="emotion-6 emotion-7"
           >
             Title
           </p>
           <p
-            class="emotion-10 emotion-9"
+            class="emotion-8 emotion-7"
           >
             Description
           </p>
         </div>
       </div>
       <button
-        class="emotion-12 emotion-13"
+        class="emotion-10 emotion-11"
         name="close"
         type="button"
       >
         <svg
-          class="emotion-14 emotion-15"
+          class="emotion-12 emotion-13"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >
diff --git a/packages/ui/src/components/Banner/index.tsx b/packages/ui/src/components/Banner/index.tsx
index 49f86c441a..8e8f0b8f03 100644
--- a/packages/ui/src/components/Banner/index.tsx
+++ b/packages/ui/src/components/Banner/index.tsx
@@ -108,6 +108,10 @@ type BannerProps = {
   onClickButton?: ComponentProps<typeof Button>['onClick']
   linkText?: string
   linkHref?: string
+  /**
+   * Set the image to be displayed on the left side of the banner. If not provided, a default image will be displayed.
+   * You can provide the url of the image it will be displayed as an img tag or a ReactNode to be displayed as is.
+   */
   image?: ReactNode
   closable?: boolean
   className?: string
@@ -148,9 +152,13 @@ export const Banner = ({
       className={className}
       data-testid={dataTestId}
     >
-      <ImageStack size={size} justifyContent="center">
-        {image ?? <img src={defaultImage} alt="" />}
-      </ImageStack>
+      {image ? (
+        <ImageStack size={size} justifyContent="center">
+          {typeof image === 'string' ? <img src={image} alt="" /> : image}
+        </ImageStack>
+      ) : (
+        <img src={defaultImage} alt="" />
+      )}
       <Stack
         direction={direction}
         gap={2}