diff --git a/src/assets/ellipse.svg b/src/assets/ellipse.svg
new file mode 100644
index 0000000..7276c3d
--- /dev/null
+++ b/src/assets/ellipse.svg
@@ -0,0 +1,3 @@
+<svg width="611" height="458" viewBox="0 0 611 458" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M610.5 164.5C610.5 297.048 518.447 458 350 458C181.553 458 0 421.048 0 288.5C0 155.952 144.553 0 313 0C481.447 0 610.5 31.9517 610.5 164.5Z" fill="#1B998B" fill-opacity="0.1"/>
+</svg>
diff --git a/src/components/sections/Motivation.js b/src/components/sections/Motivation.js
index 92252b9..51b7336 100644
--- a/src/components/sections/Motivation.js
+++ b/src/components/sections/Motivation.js
@@ -1,8 +1,10 @@
 import React from "react";
-import {FlexColumn, FlexRow, Svg} from "../../utils/containers";
+import {FlexColumn, FlexRow, ImageBackground, Svg} from "../../utils/containers";
 import {Body, H2} from "../../utils/fonts";
 import cubeIcon from '../../assets/cube_ico.svg';
 import theme from "../../utils/theme";
+import Media from "react-media";
+import ellipse from '../../assets/ellipse.svg'
 
 const Motivation = () => {
 
@@ -12,28 +14,68 @@ const Motivation = () => {
         'Participate in competitions with commercial challenges'
     ];
 
-    return (
-        <FlexColumn as='section' alignmentX='flex-start' gap='24px' width='100%'>
-            <H2 as='h2'>
-                Motivation
-            </H2>
+    const mobileRender = () => {
+        return (
+            <FlexColumn as='section' alignmentX='flex-start' gap='24px' width='100%'>
+                <H2 as='h2'>
+                    Motivation
+                </H2>
 
-            <FlexColumn as='ul' gap='16px' alignmentX='flex-start'>
-                {
-                    content.map((paragraph, index) => {
-                        return (
-                            <FlexRow key={`motivation-${index}`} as='li' gap='12px' alignmentY='flex-start'>
-                                <Svg src={cubeIcon} width='14px' height='14px' margin='4px 0 0 0'
-                                     backgroundColor={theme.colors.green}/>
-                                <Body as='p'>
-                                    {paragraph}
-                                </Body>
-                            </FlexRow>
-                        );
-                    })
-                }
+                <FlexColumn as='ul' gap='16px' alignmentX='flex-start'>
+                    {
+                        content.map((paragraph, index) => {
+                            return (
+                                <FlexRow key={`motivation-${index}`} as='li' gap='12px' alignmentY='flex-start'>
+                                    <Svg src={cubeIcon} width='14px' height='14px' margin='4px 0 0 0'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p'>
+                                        {paragraph}
+                                    </Body>
+                                </FlexRow>
+                            );
+                        })
+                    }
+                </FlexColumn>
             </FlexColumn>
-        </FlexColumn>
+        );
+    }
+
+    const desktopRender = () => {
+        return (
+            <ImageBackground as='section' image={ellipse}
+                             gap='48px' width='612px' height='458px'>
+                <H2 as='h2'>
+                    Motivation
+                </H2>
+
+                <FlexColumn as='ul' gap='22px' alignmentX='flex-start'>
+                    {
+                        content.map((paragraph, index) => {
+                            return (
+                                <FlexRow key={`motivation-${index}`} as='li' gap='16px' alignmentY='flex-start'>
+                                    <Svg src={cubeIcon} width='20px' height='20px' size='cover' margin='2px 0 0 0'
+                                         backgroundColor={theme.colors.green}/>
+                                    <Body as='p' maxWidth='380px'>
+                                        {paragraph}
+                                    </Body>
+                                </FlexRow>
+                            );
+                        })
+                    }
+                </FlexColumn>
+            </ImageBackground>
+        );
+    }
+
+    return (
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
+        </>
     );
 }
 
diff --git a/src/utils/containers.js b/src/utils/containers.js
index 272ea21..44540b2 100644
--- a/src/utils/containers.js
+++ b/src/utils/containers.js
@@ -51,6 +51,7 @@ const Svg = styled(Container)`
   width: ${({width}) => width ? width : '16px'};
   height: ${({height}) => height ? height : '16px'};
   transform: rotate(${({rotate}) => rotate ? rotate : '0'});
+  mask-size: ${({size}) => size ? size : 'auto'};
 `;
 
 const TransBack = styled(FlexRow)`
@@ -64,4 +65,11 @@ const TransBack = styled(FlexRow)`
   z-index: 2;
 `;
 
-export {Container, FlexRow, FlexColumn, Grid, Svg, TransBack};
\ No newline at end of file
+const ImageBackground = styled(FlexColumn)`
+  background-size: cover;
+  background-position: center;
+  background-image: url(${({image}) => image});
+  background-repeat: no-repeat;
+`;
+
+export {Container, FlexRow, FlexColumn, Grid, Svg, TransBack, ImageBackground};
\ No newline at end of file
