diff --git a/sesame-vitejs/sesame/img/baozun.jpg b/sesame-vitejs/sesame/img/baozun.jpg
new file mode 100644
index 0000000..184f04a
Binary files /dev/null and b/sesame-vitejs/sesame/img/baozun.jpg differ
diff --git a/sesame-vitejs/sesame/src/assets/styles/0-general.css b/sesame-vitejs/sesame/src/assets/styles/0-general.css
deleted file mode 100644
index d412755..0000000
--- a/sesame-vitejs/sesame/src/assets/styles/0-general.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/******** all sections *********/
-body {
-	background: #020225;
-	padding-bottom: 50vh;
-	overflow-x: hidden;
-}
-
-main section {
-	font-family: "GT Walsheim Pro", Arial;
-	height: 1300px;
-	min-height: 1300px;
-	width: 100vw;
-}
-
-main section h2 {
-	color: #fffdfc;
-	font-family: "GT Walsheim Pro", Arial;
-	font-size: 60px;
-	font-style: normal;
-	font-weight: 600;
-
-	/* or 66px */
-	letter-spacing: -0.04em;
-
-	/* Secondary 100 */
-	line-height: 110%;
-}
-
-img {
-	max-width: 100vw;
-}
-
-.credits {
-	margin-top: 10vh;
-}
diff --git a/sesame-vitejs/sesame/src/assets/styles/0-general.scss b/sesame-vitejs/sesame/src/assets/styles/0-general.scss
new file mode 100644
index 0000000..fbca4e0
--- /dev/null
+++ b/sesame-vitejs/sesame/src/assets/styles/0-general.scss
@@ -0,0 +1,52 @@
+/******** all sections *********/
+body {
+	background: #020225;
+	padding-bottom: 50vh;
+	overflow-x: hidden;
+	font-family: "GT Walsheim Pro", Arial;
+}
+
+main {
+	section {
+		font-family: "GT Walsheim Pro", Arial;
+		height: 100vh;
+		min-height: 1300px;
+		width: 100vw;
+
+		h2 {
+			color: #fffdfc;
+
+			font-size: 60px;
+			font-style: normal;
+			font-weight: 600;
+
+			letter-spacing: -0.04em;
+
+			line-height: 110%;
+		}
+
+	}
+
+
+	img {
+		max-width: 100vw;
+	}
+
+	.credits {
+		margin-top: 10vh;
+	}
+
+}
+#sprint_4 {
+	background: #ccc;
+}
+
+.primary-color{
+	color: $primary-color;
+}
+.secondary-color{
+	color: $secondary-color;
+}
+.dark-color{
+	color: $dark-color;
+}
diff --git a/sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss b/sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss
index 8f8674b..6fcf78f 100644
--- a/sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss
@@ -1,13 +1,14 @@
 #transactionnal_webdesign {
 	padding-top: 363px;
-	background: url('');
+
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
+	background-size: cover ;
 	font-family: "GT Walsheim Pro";
 	color: #00001f;
 
 	.title {
 		width: 1680px;
 		height: 109px;
-
 		font-style: normal;
 		font-weight: 600;
 		font-size: 40px;
@@ -16,7 +17,6 @@
 		letter-spacing: 0.2em;
 		text-transform: uppercase;
 		color: #fffdfc;
-
 		backdrop-filter: blur(5px);
 		flex: none;
 		order: 0;
@@ -25,14 +25,34 @@
 
 	.description {
 		color: rgba(231, 112, 100, 0.8);
-
 		font-weight: 600;
 		font-size: 270px;
 		line-height: 65%;
 		backdrop-filter: blur(5px);
+		margin-bottom:140px;
 	}
 
 	.color-emphasis {
 		color: #1e33da;
 	}
+
+	.sub-title{
+		font-weight: 600;
+		font-size: 100px;
+		line-height: 90px;
+		letter-spacing: -0.04em;
+	}
+
+	.columns {
+		text-align:left;
+		margin: 0 auto;
+		width: 80%;
+	}
+	.second{
+
+
+		font-weight: 400;
+		font-size: 24px;
+		line-height: 130%;
+	}
 }
diff --git a/sesame-vitejs/sesame/src/assets/styles/_0-variables.scss b/sesame-vitejs/sesame/src/assets/styles/_0-variables.scss
new file mode 100644
index 0000000..e620f33
--- /dev/null
+++ b/sesame-vitejs/sesame/src/assets/styles/_0-variables.scss
@@ -0,0 +1,3 @@
+$primary-color: #1E33DA;
+$secondary-color: #E77064;
+$dark-color: #020225;;
diff --git a/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss b/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss
index e69de29..25a72a1 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss
@@ -0,0 +1,99 @@
+
+
+#carry {
+	position: relative;
+	background:white;
+	.title {
+		margin-bottom: 46px;
+
+		font-size: 60px;
+		line-height: 110%;
+	}
+
+	.description {
+		margin-top: 270px;
+		font-style: normal;
+		font-weight: 600;
+		font-size: 270px;
+		line-height: 65%;
+		text-align: center;
+		letter-spacing: -0.06em;
+		color: rgba(30, 51, 218, 0.15);
+	}
+	.description2{
+
+		font-weight: 600;
+		font-size: 60px;
+		line-height: 110%;
+		text-align: center;
+
+	}
+
+	.color-emphasis {
+		color: #1e33da;
+	}
+
+	.bubbles {
+		p{
+			position: relative;
+			padding: 4em;
+			background: url('img/Ellipse 777.2.png') no-repeat;
+			font-weight: 400;
+			font-size: 24px;
+			line-height: 130%;
+			display: flex;
+			align-items: center;
+			text-align: center;
+
+			color: #E77064;
+			&:nth-of-type(0){
+				position: absolute;
+				width: 315px;
+				height: 285px;
+				left: 92px;
+				top: 814px;
+			}
+			&:nth-of-type(1){
+				width: 453px;
+				height: 451.56px;
+				left: 710px;
+				top: 974px;
+			}
+			&:nth-of-type(2){
+				width: 453px;
+				height: 451.56px;
+				left: 710px;
+				top: 974px;
+			}
+			&:nth-of-type(3){
+				width: 315px;
+				height: 314px;
+				left: 1329px;
+				top: 561px;
+			}
+		}
+
+	}
+
+	.gradient-bg{
+		position: absolute;
+		width: 1189.9px;
+		height: 644.02px;
+		left: 182.69px;
+		top: 1088.73px;
+
+		/* Gradient/radial_100 */
+
+		background: radial-gradient(50% 50% at 50% 50%, #1E33DA 0%, rgba(30, 51, 218, 0.958333) 4.17%, rgba(30, 51, 218, 0) 100%);
+		opacity: 0.5;
+		transform: rotate(-17.32deg);
+	}
+	.computer-block {
+		background: url('img/Macbook_color 1.png') no-repeat;
+		position: absolute;
+		width: 1920px;
+		height: 1080px;
+		left: -61px;
+		top: 329px;
+	}
+}
diff --git a/sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss b/sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss
index e69de29..ae592c9 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss
@@ -0,0 +1,13 @@
+#kyc{
+	background: white;
+
+	.title{
+margin-top: 250px;
+	}
+	.description{
+
+	}
+	.color-emphasis {
+		color: #1E33DA;
+	}
+}
diff --git a/sesame-vitejs/sesame/src/assets/styles/_13-china.scss b/sesame-vitejs/sesame/src/assets/styles/_13-china.scss
index e69de29..4b40ad6 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_13-china.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_13-china.scss
@@ -0,0 +1,10 @@
+#cina{
+	.title{
+
+	}
+	.description{
+
+	}
+	.color-emphasis {
+	}
+}
diff --git a/sesame-vitejs/sesame/src/assets/styles/_18-baozun-group.scss b/sesame-vitejs/sesame/src/assets/styles/_18-baozun-group.scss
index e69de29..404f2bd 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_18-baozun-group.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_18-baozun-group.scss
@@ -0,0 +1,15 @@
+#baozun_group{
+	margin-top: 150px;
+	background: url('img/baozun.jpg')no-repeat;
+	background-size: cover;
+	.title{
+		color:#FFFDFC;
+		font-style: normal;
+		font-weight: 600;
+		font-size: 100px;
+		line-height: 90px;
+		text-align: center;
+		letter-spacing: -0.04em;
+		padding-top: 464px;
+	}
+}
diff --git a/sesame-vitejs/sesame/src/assets/styles/main.scss b/sesame-vitejs/sesame/src/assets/styles/main.scss
index 2c8a3fd..72bb9a5 100644
--- a/sesame-vitejs/sesame/src/assets/styles/main.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/main.scss
@@ -9,7 +9,8 @@ libs
 /**
 custom
  */
-@import "./0-general.css";
+@import "./0-variables.scss";
+@import "0-general";
 @import "./0-1-nav.css";
 @import "./1-cover.css";
 @import "./1-2-main_title.css";
diff --git a/sesame-vitejs/sesame/src/components/CoverSection.vue b/sesame-vitejs/sesame/src/components/CoverSection.vue
index 0dec96a..e3f3cc8 100644
--- a/sesame-vitejs/sesame/src/components/CoverSection.vue
+++ b/sesame-vitejs/sesame/src/components/CoverSection.vue
@@ -3,308 +3,269 @@
 <template>
   <main class="has-text-centered">
     <!--		sprint 4 content-->
-    <section
-      id="transactionnal_webdesign"
-      class="has-text-centerd"
-    >
-      <h2 class="title">
-        Transactional
-      </h2>
-      <p class="description">
-        Webdesign
-      </p>
-      <div class="columns">
-        <div class="column first">
-          <h3 class="sub-title">
-            For all your
-            <br>
-            <span class="color-emphasis"> digital</span> uses.
-          </h3>
+    <div id="sprint_4">
+      <section
+        id="transactionnal_webdesign"
+        class="has-text-centerd"
+      >
+        <h2 class="title">
+          Transactional
+        </h2>
+        <div class="description has-text-centered">
+          Webdesign
         </div>
-        <div class="column second">
-          Our creative competitive edge <br>
-          <br>
-          We leverage our own studio in Paris equipped to produce all e-formats.
-          We power transactional content with our technology. Our content is
-          transactional and generate online sales. We produce multi-purpose
-          content at scale for all touchpoints to reduce costs.
-        </div>
-      </div>
-    </section>
-    <section id="carry">
-      <h2 class="color-emphasis">
-        We carry out web design and development
-      </h2>
-      <p class="description">
-        in headless commerce.
-      </p>
-
-      <div class="bubbles">
-        <p>Evolutive maintenance</p>
-        <p>Front end (ux/ui) development</p>
-        <p>Web App (pwa) development</p>
-        <p>Consulting</p>
-      </div>
-      <p>
-        We craft e-commerce Ux template based on qualitative and quantitative
-        studies
-      </p>
-    </section>
-    <section id="kyc">
-      <h2>We help you to know your customer needs</h2>
-      <p>With our method</p>
-      <a
-        href="#kyc"
-        class="button"
-      > Show Sesame method </a>
-
-      <div class="bubbles">
-        <p>to Prioritize development effort</p>
-        <p>to improve customer satisfaction</p>
-        <p>to increase conversion rate</p>
-      </div>
-    </section>
-    <section id="china">
-      <h2>Our China-inspired ui in 4 pillars</h2>
-      <p>
-        a quick and smoth consumer journey and never ending shopping experience
-        at the same time
-      </p>
-      <div class="blocks">
-        <div class="block">
-          <div class="top">
-            Content driven
-          </div>
-          <div class="bottom">
-            -Rebound rate
-          </div>
-        </div>
-        <div class="block">
-          <div class="top">
-            Experimental
-          </div>
-          <div class="bottom">
-            -Return rate
-          </div>
-        </div>
-        <div class="block">
-          <div class="top">
-            Interactive
-          </div>
-          <div class="bottom">
-            +Conversion rate
-          </div>
-        </div>
-        <div class="block">
-          <div class="top">
-            Agile
-          </div>
-          <div class="bottom">
-            +Retention rate
-          </div>
-        </div>
-      </div>
-    </section>
-    <section id="we_develop">
-      <h2>
-        We develop custom-made innovative e-commerce features based on your
-        brand stakes.
-      </h2>
-      <div class="phone-container">
-        <div class="top" />
-        <div class="picture" />
-        <div class="bottom" />
-      </div>
-      <div class="arrow-left" />
-      <div class="arrow-right" />
-      <div class="data">
-        Data
-      </div>
-      <div class="data">
-        AR
-      </div>
-      <div class="quick">
-        Quick wins
-      </div>
-      <div class="long_term">
-        Long-Term Project
-      </div>
-    </section>
-    <section id="full_creative">
-      <h2>A full creative & production Studio in Paris</h2>
-      <div class="tiles columns">
-        <div class="aside column" />
-        <div class="picture column" />
-        <div class="picture column" />
-      </div>
-    </section>
-    <section id="our_team">
-      <h2>Our team.</h2>
-      <div class="sub-category">
-        <p>of experts and directors.</p>
         <div class="columns">
-          <div class="person column">
-            <div class="picture" />
-            <p class="name">
-              Name Surname
-            </p>
-          </div>
-          <div class="person column">
-            <div class="picture" />
-            <p class="name">
-              Name Surname
-            </p>
-          </div>
-          <div class="person column">
-            <div class="picture" />
-            <p class="name">
-              Name Surname
-            </p>
-          </div>
-          <div class="person column">
-            <div class="picture" />
-            <p class="name">
-              Name Surname
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="sub-category">
-        <p>and our senior team</p>
-        <div class="columns">
-          <div class="person column">
-            <div class="picture" />
-            <p class="name">
-              Name Surname
-            </p>
-          </div>
-          <div class="person column">
-            <div class="picture" />
-            <p class="name">
-              Name Surname
-            </p>
-          </div>
-          <div class="person column">
-            <div class="picture" />
-            <p class="name">
-              Name Surname
-            </p>
-          </div>
-          <div class="person column">
-            <div class="picture" />
-            <p class="name">
-              Name Surname
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section id="china_achievements">
-      <div class="columns">
-        <div class="column">
-          <h2>Our China achievements</h2>
-        </div>
-        <div class="column">
-          <p>
-            Backed by the Baozun Group (the leading e-commerce technology Group
-            in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
-            2021), we embrace China’s e-commerce, capitalizing on the market’s
-            unique technology and digital sales mechanisms.
-          </p>
-        </div>
-      </div>
-
-      <div class="tiles-box">
-        <div class="tile-item">
-          <div class="column">
-            <h3>
-              <span class="number">400+</span>
-              <span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
+          <div class="column first">
+            <h3 class="sub-title">
+              For all your
+              <br>
+              <span class="color-emphasis"> digital</span> uses.
             </h3>
           </div>
+          <div class="column second">
+            Our creative competitive edge <br>
+            <br>
+            We leverage our own studio in Paris equipped to produce all e-formats.
+            We power transactional content with our technology. Our content is
+            transactional and generate online sales. We produce multi-purpose
+            content at scale for all touchpoints to reduce costs.
+          </div>
+        </div>
+      </section>
+      <section id="carry">
+        <h2 class="title color-emphasis">
+          We carry out web design and development
+        </h2>
+        <p class="description">
+          in headless commerce.
+        </p>
+
+        <div class="gradient-bg" />
+        <div class="computer-block" />
+        <div class="bubbles">
+          <p>Evolutive maintenance</p>
+          <p>Front end (ux/ui) development</p>
+          <p>Web App (pwa) development</p>
+          <p>Consulting</p>
+        </div>
+        <p class="description2 primary-color">
+          We craft e-commerce Ux template based on qualitative and quantitative
+          studies
+        </p>
+      </section>
+
+      <section id="kyc">
+        <h2 class="title primary-color">
+          We help you to know your customer needs
+        </h2>
+        <p class="description secondary-color">
+          With our method
+        </p>
+        <a
+          href="#kyc"
+          class="button"
+        > Show Sesame method </a>
+
+        <div class="bubbles">
+          <p>to Prioritize development effort</p>
+          <p>to improve customer satisfaction</p>
+          <p>to increase conversion rate</p>
+        </div>
+      </section>
+      <section id="china">
+        <h2 class="title primary-color">
+          Our China-inspired ui in 4 pillars
+        </h2>
+        <p class="description secondary-color">
+          a quick and smoth consumer journey and never ending shopping experience
+          at the same time
+        </p>
+        <div class="blocks">
+          <div class="block">
+            <div class="top block-1">
+              Content driven
+            </div>
+            <div class="bottom block-2">
+              -Rebound rate
+            </div>
+          </div>
+          <div class="block">
+            <div class="top block-3">
+              Experimental
+            </div>
+            <div class="bottom block-4">
+              -Return rate
+            </div>
+          </div>
+          <div class="block">
+            <div class="top block-5">
+              Interactive
+            </div>
+            <div class="bottom block-6">
+              +Conversion rate
+            </div>
+          </div>
+          <div class="block">
+            <div class="top block-7">
+              Agile
+            </div>
+            <div class="bottom block-8">
+              +Retention rate
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="we_develop">
+        <h2 class="title secondary-color">
+          We develop custom-made innovative e-commerce features based on your
+          brand stakes.
+        </h2>
+        <div class="phone-container">
+          <div class="top" />
+          <div class="picture" />
+          <div class="bottom" />
+        </div>
+        <div class="arrow-left" />
+        <div class="arrow-right" />
+        <div class="data">
+          Data
+        </div>
+        <div class="data">
+          AR
+        </div>
+        <div class="quick">
+          Quick wins
+        </div>
+        <div class="long_term">
+          Long-Term Project
+        </div>
+      </section>
+      <section id="full_creative">
+        <h2 class="title secondary-color">
+          A full creative & production Studio in Paris
+        </h2>
+        <div class="tiles columns dark-color">
+          <div class="aside column" />
+          <div class="picture column" />
+          <div class="picture column" />
+        </div>
+      </section>
+      <section id="our_team">
+        <h2 class="title primary-color">
+          Our team.
+        </h2>
+        <div class="sub-category dark-color">
+          <p>of experts and directors.</p>
+          <div class="columns">
+            <div class="person column">
+              <div class="picture" />
+              <p class="name">
+                Name Surname
+              </p>
+            </div>
+            <div class="person column">
+              <div class="picture" />
+              <p class="name">
+                Name Surname
+              </p>
+            </div>
+            <div class="person column">
+              <div class="picture" />
+              <p class="name">
+                Name Surname
+              </p>
+            </div>
+            <div class="person column">
+              <div class="picture" />
+              <p class="name">
+                Name Surname
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="sub-category">
+          <h3 class="sub-title">
+            and our senior team
+          </h3>
+          <div class="columns">
+            <div class="person column">
+              <div class="picture" />
+              <p class="name">
+                Name Surname
+              </p>
+            </div>
+            <div class="person column">
+              <div class="picture" />
+              <p class="name">
+                Name Surname
+              </p>
+            </div>
+            <div class="person column">
+              <div class="picture" />
+              <p class="name">
+                Name Surname
+              </p>
+            </div>
+            <div class="person column">
+              <div class="picture" />
+              <p class="name">
+                Name Surname
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section id="china_achievements">
+        <div class="columns">
           <div class="column">
-            <div class="picture has-rounded-corners" />
+            <h2 class="title primary-color">
+              Our China achievements
+            </h2>
+          </div>
+          <div class="column">
+            <p class="dark-color">
+              Backed by the Baozun Group (the leading e-commerce technology Group
+              in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
+              2021), we embrace China’s e-commerce, capitalizing on the market’s
+              unique technology and digital sales mechanisms.
+            </p>
           </div>
         </div>
 
-        <p>
-          100+ Luxury Store launches on incl. Christofle, De Beers etc. 40+
-          Luxury Brands supported with E2E services 50+ Brands assisted in
-          social project commerces. 30+ PROJECTS converted into Ecom Ops
-          management. 30-60% Of our brands’ partner China GMV done online.
-        </p>
-      </div>
-    </section>
-    <section
-      id="baozun_group"
-      class="has-rounded-corners"
-    >
-      <h2>Baozun Group and Company.</h2>
-    </section>
+        <div class="tiles-box">
+          <div class="tile-item">
+            <div class="column">
+              <h3>
+                <span class="number">400+</span>
+                <span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
+              </h3>
+            </div>
+            <div class="column">
+              <div class="picture has-rounded-corners" />
+            </div>
+          </div>
+
+          <p>
+            100+ Luxury Store launches on incl. Christofle, De Beers etc. 40+
+            Luxury Brands supported with E2E services 50+ Brands assisted in
+            social project commerces. 30+ PROJECTS converted into Ecom Ops
+            management. 30-60% Of our brands’ partner China GMV done online.
+          </p>
+        </div>
+      </section>
+      <section
+        id="baozun_group"
+        class="has-rounded-corners"
+      >
+        <h2 class="title">
+          Baozun Group
+          <br>
+          and Company.
+        </h2>
+      </section>
+    </div>
   </main>
 </template>
 
 <style lang="scss">
-#hand {
-	background: url("/img/hand 1.png");
-	background-size: cover;
-
-	position: absolute;
-	width: 100vw;
-	height: 1300px;
-	left: 1px;
-	top: -2px;
-}
-
-#cover {
-	background: url("/img/BG 1.png") no-repeat;
-	background-size: cover;
-
-	h2 {
-		position: absolute;
-		top: 10vh;
-		left: 42vw;
-
-		/* Subtitle/desktop_1 */
-		font-family: "GT Walsheim Pro", Arial;
-		font-style: normal;
-		font-weight: 600;
-		font-size: 40px;
-		line-height: 120%;
-
-		/* or 48px */
-		text-align: center;
-		letter-spacing: -0.04em;
-
-		/* Secondary 100 */
-		color: #fffdfc;
-	}
-
-	.button {
-		box-sizing: border-box;
-
-		position: relative;
-		right: 0;
-		top: calc(1 / 3 * 100vh);
-		bottom: 0;
-		width: 150px;
-		height: 150px;
-		padding: 1rem;
-		color: white;
-		font-family: "GT Walsheim Pro", Arial;
-		font-style: normal;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 26px;
-		background: linear-gradient(
-			329.49deg,
-			rgba(255, 216, 244, 0) 34.06%,
-			rgba(255, 207, 242, 0.2) 77.26%
-		);
-		backdrop-filter: blur(2.96px);
-
-		border-radius: 100%;
-		left: 3rem;
-	}
-}
 </style>