diff --git a/src/assets/codepen.svg b/src/assets/codepen.svg
deleted file mode 100644
index 7e154c0..0000000
--- a/src/assets/codepen.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="CodePen" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#111"/><g
-fill="none"
-stroke="#e6e6e6"
-stroke-width="33"
-stroke-linejoin="round"><path d="M81 198v116l175 117 175-117V198L256 81z"/><path d="M81 198l175 116 175-116M256 81v117"/><path d="M81 314l175-116 175 116M256 431V314"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/codepen.tsx b/src/assets/codepen.tsx
new file mode 100644
index 0000000..e6388ca
--- /dev/null
+++ b/src/assets/codepen.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+function SvgCodepen() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="CodePen"
+      viewBox="0 0 512 512"
+    >
+      <rect width={512} height={512} rx="15%" fill="#111" />
+      <g fill="none" stroke="#e6e6e6" strokeWidth={33} strokeLinejoin="round">
+        <path d="M81 198v116l175 117 175-117V198L256 81z" />
+        <path d="M81 198l175 116 175-116M256 81v117" />
+        <path d="M81 314l175-116 175 116M256 431V314" />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgCodepen;
+
diff --git a/src/assets/github.jpg b/src/assets/github.jpg
deleted file mode 100644
index c5b234a..0000000
Binary files a/src/assets/github.jpg and /dev/null differ
diff --git a/src/assets/github.svg b/src/assets/github.svg
deleted file mode 100644
index 8a75650..0000000
--- a/src/assets/github.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="GitHub" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#1B1817"/><path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg>
\ No newline at end of file
diff --git a/src/assets/github.tsx b/src/assets/github.tsx
new file mode 100644
index 0000000..d350218
--- /dev/null
+++ b/src/assets/github.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+function SvgGithub() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="GitHub"
+      viewBox="0 0 512 512"
+    >
+      <rect width={512} height={512} rx="15%" fill="#1B1817" />
+      <path
+        fill="#fff"
+        d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"
+      />
+    </svg>
+  );
+}
+
+export default SvgGithub;
+
diff --git a/src/assets/linkedin.svg b/src/assets/linkedin.svg
deleted file mode 100644
index 8558ec9..0000000
--- a/src/assets/linkedin.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="LinkedIn" role="img"
-viewBox="0 0 512 512"
-fill="#fff"><rect
-width="512" height="512"
-rx="15%"
-fill="#0077b5"/><circle cx="142" cy="138" r="37"/><path stroke="#fff" stroke-width="66" d="M244 194v198M142 194v198"/><path d="M276 282c0-20 13-40 36-40 24 0 33 18 33 45v105h66V279c0-61-32-89-76-89-34 0-51 19-59 32"/></svg>
\ No newline at end of file
diff --git a/src/assets/linkedin.tsx b/src/assets/linkedin.tsx
new file mode 100644
index 0000000..a113e40
--- /dev/null
+++ b/src/assets/linkedin.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+function SvgLinkedin() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="LinkedIn"
+      viewBox="0 0 512 512"
+      fill="#fff"
+    >
+      <rect width={512} height={512} rx="15%" fill="#0077b5" />
+      <circle cx={142} cy={138} r={37} />
+      <path stroke="#fff" strokeWidth={66} d="M244 194v198M142 194v198" />
+      <path d="M276 282c0-20 13-40 36-40 24 0 33 18 33 45v105h66V279c0-61-32-89-76-89-34 0-51 19-59 32" />
+    </svg>
+  );
+}
+
+export default SvgLinkedin;
+
diff --git a/src/assets/stackoverflow.svg b/src/assets/stackoverflow.svg
deleted file mode 100644
index 6a21879..0000000
--- a/src/assets/stackoverflow.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Stack Overflow" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#f58025"/><path stroke="#fff" stroke-width="30" fill="none" d="M293 89l90 120zm-53 50l115 97zm-41 65l136 64zm-23 69l148 31zm-6 68h150zm-45-44v105h241V297"/></svg>
\ No newline at end of file
diff --git a/src/assets/stackoverflow.tsx b/src/assets/stackoverflow.tsx
new file mode 100644
index 0000000..1e2e234
--- /dev/null
+++ b/src/assets/stackoverflow.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+function SvgStackoverflow() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Stack Overflow"
+      viewBox="0 0 512 512"
+    >
+      <rect width={512} height={512} rx="15%" fill="#f58025" />
+      <path
+        stroke="#fff"
+        strokeWidth={30}
+        fill="none"
+        d="M293 89l90 120zm-53 50l115 97zm-41 65l136 64zm-23 69l148 31zm-6 68h150zm-45-44v105h241V297"
+      />
+    </svg>
+  );
+}
+
+export default SvgStackoverflow;
+
diff --git a/src/demo/Content.tsx b/src/demo/Content.tsx
index 753c7dc..13f0e76 100644
--- a/src/demo/Content.tsx
+++ b/src/demo/Content.tsx
@@ -32,18 +32,18 @@ export const ChangingBackground: FC<ContentTypes> = ({
   </div>
 );
 
-export const MediaContent: FC<ContentTypes> = ({ imgSrc, description }) => (
+export const MediaContent: FC<ContentTypes> = ({ children }) => (
   <div
     style={{
       display: 'flex',
       alignItems: 'center',
       padding: 12,
+      borderRadius: '56px',
       background: '#fff',
       overflow: 'hidden'
     }}
   >
-    <img src={imgSrc} alt={description} height="32" />
-    <span style={{ paddingLeft: 12 }}>{description}</span>
+    {children}
   </div>
 );
 
diff --git a/src/demo/data.tsx b/src/demo/data.tsx
index 4d8f92c..646819e 100644
--- a/src/demo/data.tsx
+++ b/src/demo/data.tsx
@@ -2,10 +2,10 @@
 
 import React from 'react';
 
-import codepenlogo from '../assets/codepen.svg';
-import githublogo from '../assets/github.svg';
-import likedinlogo from '../assets/linkedin.svg';
-import stackoverflowlogo from '../assets/stackoverflow.svg';
+import CodePen from '../assets/codepen';
+import Github from '../assets/github';
+import Linkedin from '../assets/linkedin';
+import StacOverflow from '../assets/stackoverflow';
 import type { Configuration } from '../types/Configuration.types';
 import Content, { ChangingBackground, MediaContent } from './Content';
 
@@ -163,23 +163,34 @@ export const configuration4: Configuration = {
   items: [
     {
       id: 'green',
-      content: <MediaContent imgSrc={codepenlogo} description="Codepen logo" />
+      content: (
+        <MediaContent description="Codepen logo">
+          <CodePen />
+        </MediaContent>
+      )
     },
     {
       id: 'red',
-      content: <MediaContent imgSrc={githublogo} description="Github Logo" />
+      content: (
+        <MediaContent description="Github Logo">
+          <Github />
+        </MediaContent>
+      )
     },
     {
       id: 'blue',
-      content: <MediaContent imgSrc={likedinlogo} description="Linkedin Logo" />
+      content: (
+        <MediaContent description="Linkedin Logo">
+          <Linkedin />
+        </MediaContent>
+      )
     },
     {
       id: 'yellow',
       content: (
-        <MediaContent
-          imgSrc={stackoverflowlogo}
-          description="Stackoverflow logo"
-        />
+        <MediaContent description="Stackoverflow logo">
+          <StacOverflow />
+        </MediaContent>
       )
     }
   ],
@@ -187,15 +198,18 @@ export const configuration4: Configuration = {
   height: 400,
   timing: 3000,
   cardStyles: {
-    borderRadius: '0',
+    borderRadius: '56px',
     padding: '0',
-    backgroundColor: 'none'
+    backgroundColor: 'none',
+    boxShadow: 'none'
   },
   stackCardStyles: {
     secondColor: '#b0521f',
     thirdColor: '#8c4018'
   },
-  containerStyles
+  containerStyles: {
+    padding: '0% 5% 0'
+  }
 };
 
 export default configuration;