diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
index d9412662..968449db 100644
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
@@ -146,9 +146,45 @@ body {
   width: 6rem;
   height: 6rem; }
 
+.section {
+  font-family: 'Open Sans', sans-serif; }
+  .section-about {
+    min-height: 10rem;
+    background-color: #141414;
+    color: whitesmoke;
+    padding: 7rem 0; }
+    .section-about__about {
+      font-weight: 300;
+      font-family: 'Open Sans', sans-serif;
+      margin: auto;
+      text-align: center;
+      font-size: 2.5rem; }
+  .section-clear {
+    font-weight: 300;
+    font-family: 'Open Sans', sans-serif;
+    min-height: 20rem;
+    background-color: whitesmoke;
+    padding: 1rem; }
+    .section-clear__title {
+      font-weight: 400;
+      font-size: 2.5rem;
+      color: #141414;
+      margin-left: 15vw; }
+    .section-clear__subtitle {
+      font-weight: 400;
+      font-size: 2rem;
+      color: #141414;
+      margin-left: 1rem;
+      font-style: italic; }
+  .section-separator {
+    height: .5rem;
+    background-color: #141414;
+    background-color: white; }
+
 .footer {
   text-align: center;
   background-color: #141414;
+  background-color: #141414;
   color: white;
   height: 18rem;
   padding-top: 4em; }
diff --git a/docs/assets/sass/abstracts/_variables.scss b/docs/assets/sass/abstracts/_variables.scss
index 30fe4710..f1c2762d 100644
--- a/docs/assets/sass/abstracts/_variables.scss
+++ b/docs/assets/sass/abstracts/_variables.scss
@@ -25,4 +25,8 @@ $default-font-size: 1.6rem;
 $grid-width: 114rem;
 $gutter-vertical: 1rem;
 $gutter-vertical-small: 1rem;
-$gutter-horizontal: 1rem;
\ No newline at end of file
+$gutter-horizontal: 1rem;
+
+
+//COLOR 
+$dark-background: rgb(20, 20, 20);
\ No newline at end of file
diff --git a/docs/assets/sass/layout/_footer.scss b/docs/assets/sass/layout/_footer.scss
index 49448df2..bb366f24 100644
--- a/docs/assets/sass/layout/_footer.scss
+++ b/docs/assets/sass/layout/_footer.scss
@@ -1,6 +1,7 @@
 .footer {
     text-align: center;
     background-color: rgb(20, 20, 20);
+    background-color: $dark-background;
     color: white;
     height: 18rem;
     padding-top: 4em;
diff --git a/docs/assets/sass/layout/_section.scss b/docs/assets/sass/layout/_section.scss
new file mode 100644
index 00000000..d8a8c422
--- /dev/null
+++ b/docs/assets/sass/layout/_section.scss
@@ -0,0 +1,49 @@
+.section {
+    font-family: 'Open Sans', sans-serif;
+
+    &-about {
+        min-height: 10rem;
+        background-color: $dark-background;
+        color: whitesmoke;
+        padding: 7rem 0;
+
+        &__about {
+            font-weight: 300;
+            font-family: 'Open Sans', sans-serif;
+            margin: auto;
+            text-align: center;
+            font-size: 2.5rem;
+        }
+    }
+
+    &-clear {
+        font-weight: 300;
+        font-family: 'Open Sans', sans-serif;       
+        min-height: 20rem;
+        background-color: whitesmoke;
+        padding: 1rem;
+
+        &__title {
+            font-weight: 400;
+            font-size: 2.5rem;
+            color: $dark-background;
+            margin-left: 15vw;
+            // text-align: center;
+        }
+
+        &__subtitle{
+            font-weight: 400;
+            font-size: 2rem;
+            color: $dark-background;
+            margin-left: 1rem;
+            font-style: italic;
+        }
+
+    }
+
+    &-separator {
+        height: .5rem;
+        background-color: $dark-background;
+        background-color: rgb(255, 255, 255);
+    }
+}
\ No newline at end of file
diff --git a/docs/assets/sass/main.scss b/docs/assets/sass/main.scss
index 78527569..d6a365b9 100644
--- a/docs/assets/sass/main.scss
+++ b/docs/assets/sass/main.scss
@@ -5,4 +5,5 @@
 
 @import "./layout/grid";
 @import "./layout/header";
+@import "./layout/section";
 @import "./layout/footer";
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 5baad5f4..1bc91f83 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -75,7 +75,8 @@
 
                     </div>
                     <div>
-                        <a class="header__old-releases" href="https://github.com/NicolasConstant/sengi/releases/">browse previous releases</a>
+                        <a class="header__old-releases" href="https://github.com/NicolasConstant/sengi/releases/">browse
+                            previous releases</a>
                     </div>
                 </div>
             </div>
@@ -85,13 +86,40 @@
     <main>
         <section class="section-about">
 
-            <!-- <p>Sengi is a </p> -->
+            <div class="section-about__about">
+                <p>Sengi is a multi-account desktop client.<br />
+                    <br />
+                    Its aim is to let you use all your accounts<br /> easily and seamlessly.<br />
+                </p>
+            </div>
 
         </section>
 
-        <section class="section-about">
+        <section class="section-separator"></section>
+
+        <section class="section-clear">
+            <h3 class="section-clear__title">Quick Overview</h3>
 
         </section>
+
+        <section class="section-separator"></section>
+
+        <section class="section-clear">
+            <h3 class="section-clear__title">Functionalities</h3>
+            
+            <h4 class="section-clear__subtitle">Labels</h4>
+
+
+            <h4 class="section-clear__subtitle">Seamless account switch</h4>
+            
+            <h4 class="section-clear__subtitle">Display globaly, interact precisely</h4>
+
+            <h4 class="section-clear__subtitle">Autoremove Thread's Content-Warnings</h4>
+
+            
+
+        </section>
+        <section class="section-separator"></section>
     </main>
     <footer class="footer">
         <h3 class="footer__title">Let's keep in touch!</h3>