diff --git a/sections/FeatureCloudsync/index.module.scss b/sections/FeatureCloudsync/index.module.scss
index f89eea39..1f76ab0b 100644
--- a/sections/FeatureCloudsync/index.module.scss
+++ b/sections/FeatureCloudsync/index.module.scss
@@ -2,3 +2,16 @@
   margin: 0 auto;
   text-align: center;
 }
+
+.title {
+  color: #fff;
+  font-weight: 900 !important;
+  line-height: 112px;
+  letter-spacing: 0.01em !important;
+}
+
+.sub_title {
+  color: #fff;
+  font-weight: 500 !important;
+  letter-spacing: 0em !important;
+}
diff --git a/sections/FeatureCloudsync/index.tsx b/sections/FeatureCloudsync/index.tsx
index c2482135..84a7a858 100644
--- a/sections/FeatureCloudsync/index.tsx
+++ b/sections/FeatureCloudsync/index.tsx
@@ -3,18 +3,36 @@ import React from 'react';
 import updateBtnWithPhone from '../../images/update_btn_with_phone.svg';
 // @ts-ignore
 import styles from './index.module.scss';
+// @ts-ignore
+import home from '../../styles/Home.module.css';
 import { featureCloudSyncContents } from './toolkit';
 import { Text } from '../../components';
 
 const FeatureCloudSync = () => {
   return (
     <>
-      <div className={styles.container}>
-        <Text value={featureCloudSyncContents.title} />
+      <div className={home.inner_container}>
+        <Text
+          variant="h1"
+          className={styles.title}
+          value={featureCloudSyncContents.title()}
+        />
       </div>
-      <div className={styles.container} style={{ color: '#fff' }}>
-        <Text algin="left" value={featureCloudSyncContents.subTitleFirst} />
-        <Text algin="left" value={featureCloudSyncContents.subTitleSeconde} />
+      <div className={home.inner_container} style={{ color: '#fff' }}>
+        <Text
+          algin="left"
+          variant="h5"
+          className={styles.sub_title}
+          style={{ marginTop: '121px' }}
+          value={featureCloudSyncContents.subTitleFirst()}
+        />
+        <Text
+          algin="left"
+          variant="h5"
+          className={styles.sub_title}
+          style={{ margin: '24px 0 79px 0x' }}
+          value={featureCloudSyncContents.subTitleSecond()}
+        />
       </div>
       <div>
         <img src={updateBtnWithPhone} />
diff --git a/sections/FeatureCloudsync/toolkit.tsx b/sections/FeatureCloudsync/toolkit.tsx
index 186923ec..9ee22d31 100644
--- a/sections/FeatureCloudsync/toolkit.tsx
+++ b/sections/FeatureCloudsync/toolkit.tsx
@@ -12,7 +12,7 @@ export const featureCloudSyncContents = {
   subTitleFirst: () => {
     return <>Your design is</>;
   },
-  subTitleSeconde: () => {
+  subTitleSecond: () => {
     return (
       <>
         “Micro-manage your contents.” <br />
diff --git a/sections/FeatureCodegen/index.module.scss b/sections/FeatureCodegen/index.module.scss
index 645dfcbb..01bb1340 100644
--- a/sections/FeatureCodegen/index.module.scss
+++ b/sections/FeatureCodegen/index.module.scss
@@ -2,11 +2,22 @@
   font-weight: 900 !important;
   color: #fff;
   font-size: 112px !important;
+  letter-spacing: 0.01em !important;
+  line-height: 100% !important;
 }
 
 .sub_title_box {
   color: #fff;
-  margin-top: 140px;
+  margin-top: 143px;
+
+
+  .sub_title_second {
+    margin-top: 14px;
+    font-size: 36px !important;
+    font-weight: 500 !important;
+    line-height: 49px !important;
+    letter-spacing: 0.01em !important;
+  }
 }
 
 .link {
diff --git a/sections/FeatureCodegen/index.tsx b/sections/FeatureCodegen/index.tsx
index 4829d236..aab7905b 100644
--- a/sections/FeatureCodegen/index.tsx
+++ b/sections/FeatureCodegen/index.tsx
@@ -5,33 +5,38 @@ import { featureCodegenContents } from './toolkit';
 
 // @ts-ignore
 import styles from './index.module.scss';
+// @ts-ignore
+import home from '../../styles/Home.module.css';
 
 const FeatureCodegen = () => {
   return (
     <>
-      <div>
-        <Text
-          className={styles.title}
-          algin="left"
-          value={featureCodegenContents.title()}
-        />
-      </div>
-      <div className={styles.sub_title_box}>
-        <Text
-          algin="left"
-          variant="h5"
-          value={featureCodegenContents.subTitleFirst()}
-        />
-        <Text
-          algin="left"
-          variant="h5"
-          value={featureCodegenContents.subTitleSeconde()}
-        />
-      </div>
-      <div className={styles.link}>
-        <Link href="/" style={{ color: '#463F95' }}>
-          <Text algin="left" variant="h5" value="Learn more how it works" />
-        </Link>
+      <div className={home.inner_container}>
+        <div>
+          <Text
+            className={styles.title}
+            algin="left"
+            value={featureCodegenContents.title()}
+          />
+        </div>
+        <div className={styles.sub_title_box}>
+          <Text
+            algin="left"
+            variant="h5"
+            value={featureCodegenContents.subTitleFirst()}
+          />
+          <Text
+            algin="left"
+            variant="h5"
+            className={styles.sub_title_second}
+            value={featureCodegenContents.subTitleSecond()}
+          />
+        </div>
+        <div className={styles.link}>
+          <Link href="/" style={{ color: '#463F95' }}>
+            <Text algin="left" variant="h5" value="Learn more how it works" />
+          </Link>
+        </div>
       </div>
     </>
   );
diff --git a/sections/FeatureCodegen/toolkit.tsx b/sections/FeatureCodegen/toolkit.tsx
index da795f06..219abf84 100644
--- a/sections/FeatureCodegen/toolkit.tsx
+++ b/sections/FeatureCodegen/toolkit.tsx
@@ -2,21 +2,16 @@ const endTag = '< /.';
 
 export const featureCodegenContents = {
   title: () => {
-    return (
-      <>
-        Code is - your <br />
-        prototype {endTag}
-      </>
-    );
+    return <>Code is - your prototype {endTag}</>;
   },
   subTitleFirst: () => {
     return <>Finally, the usable code exporter</>;
   },
-  subTitleSeconde: () => {
+  subTitleSecond: () => {
     return (
       <>
         readable, production ready code. no custom <br />
-        implementaion. all in standard form.
+        implementation. all in standard form.
       </>
     );
   },
diff --git a/sections/FeatureEngine/index.tsx b/sections/FeatureEngine/index.tsx
index d8d6950d..9f232ea8 100644
--- a/sections/FeatureEngine/index.tsx
+++ b/sections/FeatureEngine/index.tsx
@@ -15,7 +15,7 @@ const FeatureEngine = () => {
       </div>
       <div className={styles.sub_title}>
         <Text value={featureEngineContents.subTitleFirst()} />
-        <Text value={featureEngineContents.subTitleSeconde()} />
+        <Text value={featureEngineContents.subTitleSecond()} />
       </div>
       <div>
         <Link href="/" style={{ color: '#463F95' }}>
diff --git a/sections/FeatureEngine/toolkit.tsx b/sections/FeatureEngine/toolkit.tsx
index 8899fe46..295f9708 100644
--- a/sections/FeatureEngine/toolkit.tsx
+++ b/sections/FeatureEngine/toolkit.tsx
@@ -18,7 +18,7 @@ export const featureEngineContents = {
       </>
     );
   },
-  subTitleSeconde: () => {
+  subTitleSecond: () => {
     return (
       <>
         With most advanced UI Context detection <br />
diff --git a/sections/index.ts b/sections/index.ts
index 6ddf2ca1..5df1b484 100644
--- a/sections/index.ts
+++ b/sections/index.ts
@@ -1,10 +1,10 @@
 import Header from './Header';
 import Hero from './Hero';
 import FeatureOverview from './FeatureOverview';
-import FeatureCloudSync from './FeatureCloudSync';
+import FeatureCloudSync from './FeatureCloudsync';
 import FeatureCodegen from './FeatureCodegen';
 import FeatureEngine from './FeatureEngine';
-import FeatureLint from './FeatureLint'
+import FeatureLint from './FeatureLint';
 
 export {
   Header,
@@ -13,5 +13,5 @@ export {
   FeatureCloudSync,
   FeatureCodegen,
   FeatureEngine,
-  FeatureLint
+  FeatureLint,
 };