diff --git a/components/button.css b/components/button.css
deleted file mode 100644
index 84813d0..0000000
--- a/components/button.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.button-container {
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  flex-direction: column;
-}
-.button-text {
-  color: var(--dl-color-gray-white);
-  cursor: pointer;
-  align-self: center;
-  margin-top: var(--dl-space-space-halfunit);
-  transition: 0.3s;
-  margin-left: var(--dl-space-space-halfunit);
-  padding-top: var(--dl-space-space-halfunit);
-  margin-right: var(--dl-space-space-halfunit);
-  padding-left: var(--dl-space-space-oneandhalfunits);
-  border-radius: var(--dl-radius-radius-radius8);
-  margin-bottom: var(--dl-space-space-halfunit);
-  padding-right: var(--dl-space-space-oneandhalfunits);
-  padding-bottom: var(--dl-space-space-halfunit);
-  background-color: var(--dl-color-primary-300);
-}
-.button-text:hover {
-  color: var(--dl-color-primary-300);
-  background-color: var(--dl-color-gray-white);
-}
-
-
-
-
-
-
-
-
-
-
diff --git a/components/button.html b/components/button.html
deleted file mode 100644
index cd99953..0000000
--- a/components/button.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div>
-  <link href="./button.css" rel="stylesheet" />
-  <div class="button-container">
-    <span class="button-text body-16"><span>Download</span></span>
-  </div>
-</div>
diff --git a/components/button_nofill.css b/components/button_nofill.css
deleted file mode 100644
index fb83597..0000000
--- a/components/button_nofill.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.button_nofill-container {
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  flex-direction: column;
-}
-.button_nofill-text {
-  color: var(--dl-color-primary-300);
-  cursor: pointer;
-  align-self: center;
-  margin-top: var(--dl-space-space-halfunit);
-  transition: 0.3s;
-  margin-left: var(--dl-space-space-halfunit);
-  padding-top: var(--dl-space-space-halfunit);
-  border-color: var(--dl-color-primary-300);
-  border-width: 1px;
-  margin-right: var(--dl-space-space-halfunit);
-  padding-left: var(--dl-space-space-oneandhalfunits);
-  border-radius: var(--dl-radius-radius-radius8);
-  margin-bottom: var(--dl-space-space-halfunit);
-  padding-right: var(--dl-space-space-oneandhalfunits);
-  padding-bottom: var(--dl-space-space-halfunit);
-}
-.button_nofill-text:hover {
-  color: var(--dl-color-gray-white);
-  background-color: var(--dl-color-primary-300);
-}
-
diff --git a/components/button_nofill.html b/components/button_nofill.html
deleted file mode 100644
index 78dfc04..0000000
--- a/components/button_nofill.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div>
-  <link href="./button_nofill.css" rel="stylesheet" />
-  <div class="button_nofill-container">
-    <span class="button_nofill-text body-16"><span>Download</span></span>
-  </div>
-</div>
diff --git a/components/carrousel.css b/components/carrousel.css
deleted file mode 100644
index d0641d3..0000000
--- a/components/carrousel.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.carrousel-carrousel {
-  flex: 0 0 auto;
-  margin: var(--dl-space-space-oneandhalfunits);
-  display: flex;
-  min-height: 50vh;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-}
-.carrousel-title {
-  color: var(--dl-color-gray-white);
-  margin: var(--dl-space-space-oneandhalfunits);
-}
-.carrousel-images {
-  flex: 1;
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  justify-content: center;
-}
-.carrousel-go-left {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-}
-.carrousel-icon {
-  fill: var(--dl-color-primary-700);
-  width: var(--dl-size-size-small);
-}
-.carrousel-slider {
-  flex: 1;
-  width: 824px;
-  display: flex;
-  overflow: hidden;
-  position: relative;
-  align-self: stretch;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-}
-.carrousel-slides-container {
-  flex: 1;
-  width: 100%;
-  display: flex;
-  overflow: hidden;
-  max-width: 100%;
-  align-self: stretch;
-  align-items: center;
-  border-radius: 16px;
-  flex-direction: row;
-  justify-content: center;
-}
-.carrousel-left {
-  object-fit: cover;
-  object-position: center;
-}
-.carrousel-left1 {
-  object-fit: cover;
-  object-position: center;
-}
-.carrousel-mid {
-  object-fit: cover;
-  object-position: center;
-}
-.carrousel-right {
-  object-fit: cover;
-  object-position: center;
-}
-.carrousel-right1 {
-  object-fit: cover;
-  object-position: center;
-}
-.carrousel-go-right {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-}
-.carrousel-icon2 {
-  fill: var(--dl-color-primary-700);
-  width: var(--dl-size-size-small);
-}
diff --git a/components/carrousel.html b/components/carrousel.html
deleted file mode 100644
index 9a39d9e..0000000
--- a/components/carrousel.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<div>
-  <link href="./carrousel.css" rel="stylesheet" />
-  <div class="carrousel-carrousel">
-    <span class="carrousel-title h3-36"><span>Screenshots</span></span>
-    <div class="carrousel-images">
-      <div data-action="goLeft" class="carrousel-go-left">
-        <svg viewBox="0 0 1024 1024" class="carrousel-icon">
-          <path d="M658 708l-60 60-256-256 256-256 60 60-196 196z"></path>
-        </svg>
-      </div>
-      <div class="carrousel-slider">
-        <div class="carrousel-slides-container">
-          <img
-            src="https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixid=Mnw5MTMyMXwwfDF8YWxsfDN8fHx8fHwyfHwxNjM4MzQwMjk2&ixlib=rb-1.2.1&h=300"
-            class="
-              carrousel-left
-              hidden-element
-              left-element left-element-initial
-            "
-          />
-          <img
-            src="https://images.unsplash.com/photo-1638190654307-66662e77fed9?ixid=Mnw5MTMyMXwwfDF8YWxsfDN8fHx8fHwyfHwxNjM4MjkzODc1&ixlib=rb-1.2.1&h=300"
-            class="carrousel-left1 left-element left-element-initial"
-          />
-          <img
-            src="https://images.unsplash.com/photo-1638204956063-5e65c3288d3c?ixid=Mnw5MTMyMXwwfDF8YWxsfDE3fHx8fHx8Mnx8MTYzODI5Mzg3NQ&ixlib=rb-1.2.1&h=300"
-            loading="lazy"
-            class="carrousel-mid mid-element mid-element-initial"
-          />
-          <img
-            src="https://images.unsplash.com/photo-1638210574680-b30164f073f3?ixid=Mnw5MTMyMXwwfDF8YWxsfDE5fHx8fHx8Mnx8MTYzODI5NzAzOQ&ixlib=rb-1.2.1&h=300"
-            class="carrousel-right right-element-initial right-element"
-          />
-          <img
-            src="https://images.unsplash.com/photo-1638043883400-33d4ab1017a1?ixid=Mnw5MTMyMXwwfDF8YWxsfDV8fHx8fHwyfHwxNjM4MzQwMjk2&ixlib=rb-1.2.1&h=300"
-            class="
-              carrousel-right1
-              hidden-element
-              right-element-initial right-element
-            "
-          />
-        </div>
-      </div>
-      <div data-action="goRight" class="carrousel-go-right">
-        <svg viewBox="0 0 1024 1024" class="carrousel-icon2">
-          <path d="M426 256l256 256-256 256-60-60 196-196-196-196z"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/components/download.css b/components/download.css
deleted file mode 100644
index 6bea4c3..0000000
--- a/components/download.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.download-container {
-  display: flex;
-  position: relative;
-}
-.download-button {
-  color: var(--dl-color-gray-white);
-  transition: 0.3s;
-  border-color: var(--dl-color-primary-300);
-  background-color: var(--dl-color-primary-300);
-}
-.download-button:hover {
-  color: var(--dl-color-primary-300);
-  background-color: var(--dl-color-primary-700);
-}
diff --git a/components/download.html b/components/download.html
deleted file mode 100644
index 131ba61..0000000
--- a/components/download.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div>
-  <link href="./download.css" rel="stylesheet" />
-  <div class="download-container">
-    <button class="download-button button-14 button">
-      <span>Download</span>
-    </button>
-  </div>
-</div>
diff --git a/components/features.css b/components/features.css
index 44bd840..4e9029f 100644
--- a/components/features.css
+++ b/components/features.css
@@ -1,178 +1,250 @@
 .features-features {
+  width: 100%;
   display: flex;
+  padding: var(--dl-space-space-threeunits);
+  position: relative;
+  max-width: var(--dl-size-size-maxwidth);
+  align-self: center;
   align-items: center;
   flex-direction: column;
 }
+.features-heading {
+  display: flex;
+  z-index: 100;
+  margin-bottom: var(--dl-space-space-threeunits);
+  flex-direction: column;
+  justify-content: center;
+}
 .features-text {
-  color: var(--dl-color-gray-white);
+  color: var(--dl-color-bliss-primary);
+  font-size: 3rem;
   align-self: center;
-  margin-top: 96px;
-}
-.features-text01 {
-  color: var(--dl-color-primary-500);
-  font-size: 24px;
-  margin-top: 8px;
-  font-family: Poppins;
-}
-.features-features1 {
-  display: flex;
-  margin-top: 32px;
-  align-items: center;
-  margin-bottom: 32px;
-  flex-direction: row;
-}
-.features-sec-bb {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-.features-security {
-  width: 352px;
-  display: flex;
-  padding: 16px;
-  align-items: center;
-  margin-bottom: 40px;
-  flex-direction: column;
-}
-.features-icon {
-  fill: var(--dl-color-gray-white);
-  width: 32px;
-}
-.features-text02 {
-  color: var(--dl-color-primary-300);
-  font-style: normal;
-  margin-top: 12px;
-  margin-bottom: 12px;
+  text-align: center;
+  margin-bottom: var(--dl-space-space-unit);
 }
 .features-text03 {
-  fill: var(--dl-color-gray-white);
-  color: var(--dl-color-gray-white);
-  text-align: center;
-}
-.features-battery {
-  width: 352px;
-  display: flex;
-  padding: 16px;
-  align-items: center;
-  flex-direction: column;
-}
-.features-icon02 {
-  fill: var(--dl-color-gray-white);
-  width: 32px;
-}
-.features-text04 {
-  color: var(--dl-color-primary-300);
+  font-size: 18px;
+  align-self: center;
   font-style: normal;
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
-.features-text05 {
-  fill: var(--dl-color-gray-white);
-  color: var(--dl-color-gray-white);
   text-align: center;
+  font-weight: 500;
 }
-.features-design-settings {
+.features-list {
+  gap: 24px;
   display: flex;
-  align-items: center;
+  z-index: 100;
   flex-direction: column;
 }
-.features-focusondesign {
-  width: 352px;
+.features-f-1 {
+  gap: 24px;
+  width: auto;
   display: flex;
-  padding: 16px;
-  align-items: center;
-  flex-direction: column;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
 }
-.features-icon04 {
-  fill: var(--dl-color-gray-white);
-  width: 32px;
+.features-focus-on-design {
+  transition: 0.3s;
 }
-.features-text06 {
-  color: var(--dl-color-primary-300);
-  font-style: normal;
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
-.features-text07 {
-  fill: var(--dl-color-gray-white);
-  color: var(--dl-color-gray-white);
-  text-align: center;
+.features-focus-on-design:hover {
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
 }
 .features-image {
-  width: 180px;
-  margin-top: 88px;
-  object-fit: cover;
-  margin-bottom: 88px;
-}
-.features-settings {
-  width: 352px;
-  display: flex;
-  padding: 16px;
-  align-items: center;
-  flex-direction: column;
-}
-.features-icon07 {
-  fill: var(--dl-color-gray-white);
   width: 32px;
+  object-fit: cover;
 }
-.features-text08 {
-  color: var(--dl-color-primary-300);
-  font-style: normal;
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
-.features-text09 {
-  fill: var(--dl-color-gray-white);
-  color: var(--dl-color-gray-white);
-  text-align: center;
-}
-.features-perf-comp {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
+.features-text04 {
+  color: #002766;
+  font-size: 18px;
 }
 .features-performance {
-  width: 352px;
+  gap: 12px;
+  flex: 0 0 auto;
+  width: auto;
   display: flex;
-  padding: 16px;
-  align-items: center;
-  margin-bottom: 40px;
+  padding: var(--dl-space-space-unit);
+  max-width: 280px;
+  transition: 0.3s;
+  align-items: flex-start;
+  border-color: #AEF998;
+  border-width: 1.6px;
+  border-radius: 16px;
   flex-direction: column;
+  background-color: #D2FDC5;
 }
-.features-icon09 {
-  fill: var(--dl-color-gray-white);
-  width: 32px;
-}
-.features-text10 {
-  color: var(--dl-color-primary-300);
-  font-style: normal;
-  margin-top: 12px;
-  margin-bottom: 12px;
-}
-.features-text11 {
-  fill: var(--dl-color-gray-white);
-  color: var(--dl-color-gray-white);
-  text-align: center;
-}
-.features-compatibility {
-  width: 352px;
-  display: flex;
-  padding: 16px;
-  align-items: center;
-  flex-direction: column;
+.features-performance:hover {
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
 }
 .features-image1 {
   width: 32px;
   object-fit: cover;
 }
-.features-text12 {
-  color: var(--dl-color-primary-300);
-  font-style: normal;
-  margin-top: 12px;
-  margin-bottom: 12px;
+.features-text06 {
+  color: #186601;
+  font-size: 18px;
 }
-.features-text13 {
-  fill: var(--dl-color-gray-white);
-  color: var(--dl-color-gray-white);
-  text-align: center;
+.features-regular-updates {
+  gap: 12px;
+  flex: 0 0 auto;
+  width: auto;
+  display: flex;
+  padding: var(--dl-space-space-unit);
+  max-width: 280px;
+  transition: 0.3s;
+  align-items: flex-start;
+  border-color: #98EFF9;
+  border-width: 1.6px;
+  border-radius: 16px;
+  flex-direction: column;
+  background-color: #C5F7FD;
+}
+.features-regular-updates:hover {
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image2 {
+  width: 32px;
+  object-fit: cover;
+}
+.features-text08 {
+  color: #002766;
+  font-size: 18px;
+}
+.features-f-2 {
+  gap: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
+}
+.features-battery-friendly {
+  gap: 12px;
+  flex: 0 0 auto;
+  width: auto;
+  display: flex;
+  padding: var(--dl-space-space-unit);
+  max-width: 280px;
+  transition: 0.3s;
+  align-items: flex-start;
+  border-color: #F9E798;
+  border-width: 1.6px;
+  border-radius: 16px;
+  flex-direction: column;
+  background-color: #FDF3C5;
+}
+.features-battery-friendly:hover {
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image3 {
+  width: 32px;
+  object-fit: cover;
+}
+.features-text10 {
+  color: #665300;
+  font-size: 18px;
+}
+.features-added-security {
+  gap: 12px;
+  flex: 0 0 auto;
+  width: auto;
+  display: flex;
+  padding: var(--dl-space-space-unit);
+  max-width: 280px;
+  transition: 0.3s;
+  align-items: flex-start;
+  border-color: #A598F9;
+  border-width: 1.6px;
+  border-radius: 16px;
+  flex-direction: column;
+  background-color: #CDC5FD;
+}
+.features-added-security:hover {
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image4 {
+  width: 32px;
+  object-fit: cover;
+}
+.features-text12 {
+  color: #002766;
+  font-size: 18px;
+}
+.features-many-more {
+  gap: 12px;
+  flex: 0 0 auto;
+  width: auto;
+  display: flex;
+  padding: var(--dl-space-space-unit);
+  max-width: 280px;
+  transition: 0.3s;
+  align-items: flex-start;
+  border-color: #F9989C;
+  border-width: 1.6px;
+  border-radius: 16px;
+  flex-direction: column;
+  background-color: #FDC5C8;
+}
+.features-many-more:hover {
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;;
+}
+.features-image5 {
+  width: 32px;
+  object-fit: cover;
+}
+.features-text14 {
+  color: #660005;
+  font-size: 18px;
+}
+.features-image6 {
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: 306px;
+  margin: auto;
+  z-index: 1;
+  position: absolute;
+  object-fit: cover;
+}
+@media(max-width: 991px) {
+  .features-text {
+    align-self: center;
+  }
+}
+@media(max-width: 767px) {
+  .features-features {
+    max-width: 100%;
+    padding-left: var(--dl-space-space-twounits);
+    padding-right: var(--dl-space-space-twounits);
+  }
+  .features-f-1 {
+    flex-wrap: wrap;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .features-f-2 {
+    flex-wrap: wrap;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+@media(max-width: 479px) {
+  .features-features {
+    width: 454px;
+    max-width: auto;
+    align-self: center;
+    align-items: center;
+    padding-top: var(--dl-space-space-twounits);
+    padding-left: var(--dl-space-space-unit);
+    padding-right: var(--dl-space-space-unit);
+    padding-bottom: var(--dl-space-space-twounits);
+  }
+  .features-text {
+    width: 478px;
+    font-size: 1.6rem;
+    margin-bottom: var(--dl-space-space-halfunit);
+  }
+  .features-text03 {
+    font-size: 16px;
+  }
 }
diff --git a/components/features.html b/components/features.html
index be3ad0e..959094c 100644
--- a/components/features.html
+++ b/components/features.html
@@ -1,117 +1,110 @@
 <div>
   <link href="./features.css" rel="stylesheet" />
-  <div class="features-features">
-    <span class="features-text h4-28">
-      <span>It’s more than what you think</span>
-    </span>
-    <span class="features-text01">
-      <span>A comprehesive overview of features</span>
-    </span>
-    <div class="features-features1">
-      <div class="features-sec-bb">
-        <div class="features-security">
-          <svg viewBox="0 0 1024 1024" class="features-icon">
-            <path
-              d="M512 42l384 172v256q0 178-110 325t-274 187q-164-40-274-187t-110-325v-256zM512 512v382q118-38 200-143t98-239h-298zM512 512v-376l-298 132v244h298z"
-            ></path>
-          </svg>
-          <span class="features-text02 h6-20"><span>Added Security</span></span>
-          <span class="features-text03 body-12">
+  <div id="features" class="features-features">
+    <div class="features-heading">
+      <h1 class="features-text">
+        <span></span>
+        <span>It’s more than what you think</span>
+      </h1>
+      <span class="features-text03">
+        <span>A comprehesive overview of features</span>
+      </span>
+    </div>
+    <div class="features-list">
+      <div class="features-f-1">
+        <div class="features-focus-on-design feature-card">
+          <img
+            alt="image"
+            src="public/playground_assets/design_services_black_24dp%201.svg"
+            class="features-image"
+          />
+          <h1 class="features-text04"><span>Focus on design</span></h1>
+          <span>
             <span>
               We include many options for customization and theming throughout
               the OS
             </span>
           </span>
         </div>
-        <div class="features-battery">
-          <svg viewBox="0 0 1024 1024" class="features-icon02">
-            <path
-              d="M213.333 725.333h-85.333c-11.776 0-22.4-4.736-30.165-12.501s-12.501-18.389-12.501-30.165v-341.333c0-11.776 4.736-22.4 12.501-30.165s18.389-12.501 30.165-12.501h136.107c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-136.107c-35.328 0-67.413 14.379-90.496 37.504s-37.504 55.168-37.504 90.496v341.333c0 35.328 14.379 67.413 37.504 90.496s55.168 37.504 90.496 37.504h85.333c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667zM640 298.667h85.333c11.776 0 22.4 4.736 30.165 12.501s12.501 18.389 12.501 30.165v341.333c0 11.776-4.736 22.4-12.501 30.165s-18.389 12.501-30.165 12.501h-136.107c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667h136.107c35.328 0 67.413-14.379 90.496-37.504s37.504-55.168 37.504-90.496v-341.333c0-35.328-14.379-67.413-37.504-90.496s-55.168-37.504-90.496-37.504h-85.333c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM1024 554.667v-85.333c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667v85.333c0 23.552 19.115 42.667 42.667 42.667s42.667-19.115 42.667-42.667zM433.835 232.32l-170.667 256c-13.056 19.627-7.765 46.080 11.819 59.179 7.339 4.907 15.659 7.211 23.68 7.168h176.256l-126.464 189.653c-13.056 19.627-7.765 46.080 11.819 59.179s46.080 7.765 59.179-11.819l170.667-256c4.523-6.656 7.211-14.848 7.211-23.68 0-23.552-19.115-42.667-42.667-42.667h-176.256l126.464-189.653c13.056-19.627 7.765-46.080-11.819-59.179s-46.080-7.765-59.179 11.819z"
-            ></path>
-          </svg>
-          <span class="features-text04 h6-20">
-            <span>Battery-friendly</span>
-          </span>
-          <span class="features-text05 body-12">
-            <span>
-              Extra options are provided to help tune battery consumption to the
-              best levels
-            </span>
-          </span>
-        </div>
-      </div>
-      <div class="features-design-settings">
-        <div class="features-focusondesign">
-          <svg viewBox="0 0 1024 1024" class="features-icon04">
-            <path
-              d="M1018.17 291.89l-286.058-286.058c-9.334-9.334-21.644-7.234-27.356 4.666l-38.354 79.904 267.198 267.198 79.904-38.354c11.9-5.712 14-18.022 4.666-27.356z"
-            ></path>
-            <path
-              d="M615.384 135.384l-263.384 21.95c-17.5 2.166-32.080 5.898-37.090 28.752-0.006 0.024-0.012 0.042-0.018 0.066-71.422 343.070-314.892 677.848-314.892 677.848l57.374 57.374 271.986-271.99c-5.996-12.53-9.36-26.564-9.36-41.384 0-53.020 42.98-96 96-96s96 42.98 96 96-42.98 96-96 96c-14.82 0-28.852-3.364-41.384-9.36l-271.988 271.986 57.372 57.374c0 0 334.778-243.47 677.848-314.892 0.024-0.006 0.042-0.012 0.066-0.018 22.854-5.010 26.586-19.59 28.752-37.090l21.95-263.384-273.232-273.232z"
-            ></path>
-          </svg>
-          <span class="features-text06 h6-20">
-            <span>Focus on design</span>
-          </span>
-          <span class="features-text07 body-12">
-            <span>
-              We include many options for customization and theming throughout
-              the OS
-            </span>
-          </span>
-        </div>
-        <img
-          alt="image"
-          src="../public/playground_assets/bliss_logo.svg"
-          class="features-image"
-        />
-        <div class="features-settings">
-          <svg viewBox="0 0 1024 1024" class="features-icon07">
-            <path
-              d="M512 662q62 0 106-44t44-106-44-106-106-44-106 44-44 106 44 106 106 44zM830 554l90 70q14 10 4 28l-86 148q-8 14-26 8l-106-42q-42 30-72 42l-16 112q-4 18-20 18h-172q-16 0-20-18l-16-112q-38-16-72-42l-106 42q-18 6-26-8l-86-148q-10-18 4-28l90-70q-2-14-2-42t2-42l-90-70q-14-10-4-28l86-148q8-14 26-8l106 42q42-30 72-42l16-112q4-18 20-18h172q16 0 20 18l16 112q38 16 72 42l106-42q18-6 26 8l86 148q10 18-4 28l-90 70q2 14 2 42t-2 42z"
-            ></path>
-          </svg>
-          <span class="features-text08 h6-20">
-            <span>Customized settings</span>
-          </span>
-          <span class="features-text09 body-12">
-            <span>
-              Choose settings depending on the criteria you value the most. With
-              no limits.
-            </span>
-          </span>
-        </div>
-      </div>
-      <div class="features-perf-comp">
-        <div class="features-performance">
-          <svg viewBox="0 0 1024 1024" class="features-icon09">
-            <path
-              d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM302.836 834.152c11.106-30.632 17.164-63.688 17.164-98.152 0-124.35-78.81-230.292-189.208-270.606 10.21-84.924 48.254-163.498 109.678-224.924 72.53-72.526 168.96-112.47 271.53-112.47s199 39.944 271.53 112.47c61.428 61.426 99.468 140 109.682 224.924-110.402 40.314-189.212 146.256-189.212 270.606 0 34.468 6.060 67.52 17.166 98.15-61.706 40.242-133.77 61.85-209.166 61.85-75.394 0-147.458-21.608-209.164-61.848zM551.754 640.996c13.878 3.494 24.246 16.080 24.246 31.004v64c0 17.6-14.4 32-32 32h-64c-17.6 0-32-14.4-32-32v-64c0-14.924 10.368-27.51 24.246-31.004l23.754-448.996h32l23.754 448.996z"
-            ></path>
-          </svg>
-          <span class="features-text10 h6-20"><span>Performance</span></span>
-          <span class="features-text11 body-12">
+        <div class="features-performance feature-card">
+          <img
+            alt="image"
+            src="public/playground_assets/assessment_black_24dp%201.svg"
+            class="features-image1"
+          />
+          <h1 class="features-text06"><span>Performance</span></h1>
+          <span>
             <span>
               Focused on speed and stability with tweaks to assist in the most
               demanding applications
             </span>
           </span>
         </div>
-        <div class="features-compatibility">
+        <div class="features-regular-updates feature-card">
           <img
             alt="image"
-            src="../public/playground_assets/compatibility.svg"
-            class="features-image1"
+            src="public/playground_assets/ontime%20updates.svg"
+            class="features-image2"
           />
-          <span class="features-text12 h6-20"><span>Compatibility</span></span>
-          <span class="features-text13 body-12">
+          <h1 class="features-text08"><span>Regular updates</span></h1>
+          <span>
             <span>
-              We bring Bliss to every device we own. And our PC builds include
-              extras for ARM/ARM64 app compatibility
+              Bliss mainterners provide regular updates based on released
+              builds.
+            </span>
+          </span>
+        </div>
+      </div>
+      <div class="features-f-2">
+        <div class="features-battery-friendly feature-card">
+          <img
+            alt="image"
+            src="public/playground_assets/battery-heart-outline.svg"
+            class="features-image3"
+          />
+          <h1 class="features-text10"><span>Battery-friendly</span></h1>
+          <span>
+            <span>
+              Extra options are provided to help tune battery consumption to the
+              best levels
+            </span>
+          </span>
+        </div>
+        <div class="features-added-security feature-card">
+          <img
+            alt="image"
+            src="public/playground_assets/verified_user_black_24dp%201.svg"
+            class="features-image4"
+          />
+          <h1 class="features-text12"><span>Added Security</span></h1>
+          <span>
+            <span>
+              We include many options for security and safety throughout the OS
+            </span>
+          </span>
+        </div>
+        <div class="features-many-more feature-card">
+          <img
+            alt="image"
+            src="public/playground_assets/more_black_24dp%201.svg"
+            class="features-image5"
+          />
+          <h1 class="features-text14">
+            <span></span>
+            <span>and many more</span>
+          </h1>
+          <span>
+            <span>
+              More options are provided to help tune android to the best levels
             </span>
           </span>
         </div>
       </div>
     </div>
+    <img
+      alt="image"
+      src="public/playground_assets/bg-logo-400w.png"
+      class="features-image6"
+    />
   </div>
 </div>
diff --git a/components/footer.css b/components/footer.css
index f638265..98af4ba 100644
--- a/components/footer.css
+++ b/components/footer.css
@@ -1,112 +1,105 @@
 .footer-footer {
   width: 100%;
   display: flex;
-  max-width: 100%;
+  position: relative;
+  max-width: var(--dl-size-size-maxwidth);
   align-items: center;
   padding-top: var(--dl-space-space-twounits);
-  padding-left: var(--dl-space-space-fourunits);
-  padding-right: var(--dl-space-space-fourunits);
+  padding-left: var(--dl-space-space-threeunits);
+  padding-right: var(--dl-space-space-threeunits);
   flex-direction: column;
   padding-bottom: var(--dl-space-space-twounits);
   justify-content: space-between;
-  background-image: linear-gradient(180deg, rgb(18, 18, 18) 0.00%,rgb(35, 55, 74) 97.00%);
 }
 .footer-container {
   width: 100%;
   display: flex;
-  align-items: flex-start;
-  flex-direction: row;
   justify-content: space-between;
 }
 .footer-logo {
+  width: 32%;
   display: flex;
   max-width: var(--dl-size-size-maxwidth);
-  align-self: flex-start;
   align-items: flex-start;
-  margin-right: 56px;
-  flex-direction: column;
-  justify-content: center;
-}
-.footer-logo1 {
-  display: flex;
-  align-items: center;
+  margin-bottom: var(--dl-space-space-twounits);
   flex-direction: column;
 }
 .footer-image {
-  width: var(--dl-size-size-medium);
-  height: 64px;
+  width: 64px;
+  height: auto;
 }
 .footer-text {
-  color: var(--dl-color-primary-500);
-  margin-top: var(--dl-space-space-halfunit);
-  margin-bottom: var(--dl-space-space-halfunit);
-}
-.footer-text02 {
-  color: var(--dl-color-gray-900);
-  width: 224px;
-  margin-top: var(--dl-space-space-unit);
-  line-height: 1.32;
+  width: 100%;
+  margin-top: var(--dl-space-space-twounits);
 }
 .footer-links-container {
   display: flex;
   align-items: flex-start;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 .footer-container1 {
   display: flex;
   align-items: flex-start;
-  margin-right: var(--dl-space-space-fourunits);
+  margin-right: 4rem;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-start;
 }
-.footer-community-container {
+.footer-product-container {
   flex: 0 0 auto;
   display: flex;
   align-items: flex-start;
-  margin-right: var(--dl-space-space-fourunits);
+  margin-right: 4rem;
   flex-direction: column;
   justify-content: flex-start;
 }
-.footer-text05 {
-  color: var(--dl-color-primary-700);
+.footer-text1 {
+  color: var(--dl-color-bliss-primary);
   font-weight: 700;
   margin-bottom: var(--dl-space-space-oneandhalfunits);
 }
 .footer-link {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link01 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link02 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
-.footer-sources-container {
+.footer-company-container {
   flex: 0 0 auto;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   justify-content: flex-start;
 }
-.footer-text08 {
-  color: var(--dl-color-primary-700);
+.footer-text2 {
+  color: var(--dl-color-bliss-primary);
   font-weight: 700;
   margin-bottom: var(--dl-space-space-oneandhalfunits);
 }
 .footer-link03 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link04 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link05 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link06 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link07 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-container2 {
@@ -118,18 +111,21 @@
 .footer-contact {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 40px;
+  margin-bottom: var(--dl-space-space-oneandhalfunits);
   flex-direction: column;
   justify-content: flex-start;
 }
-.footer-text12 {
-  color: var(--dl-color-primary-700);
+.footer-text3 {
+  color: var(--dl-color-bliss-primary);
+  font-weight: 700;
   margin-bottom: var(--dl-space-space-oneandhalfunits);
 }
 .footer-link08 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link09 {
+  margin-bottom: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link10 {
@@ -141,9 +137,10 @@
   flex-direction: column;
   justify-content: flex-start;
 }
-.footer-text13 {
-  color: var(--dl-color-primary-700);
-  margin-bottom: var(--dl-space-space-unit);
+.footer-text4 {
+  color: var(--dl-color-bliss-primary);
+  font-weight: 700;
+  margin-bottom: var(--dl-space-space-oneandhalfunits);
 }
 .footer-icon-group {
   display: flex;
@@ -154,58 +151,47 @@
 .footer-link11 {
   display: contents;
 }
+.footer-icon {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+  margin-right: var(--dl-space-space-unit);
+  text-decoration: none;
+}
 .footer-link12 {
   display: contents;
 }
-.footer-icon02 {
+.footer-icon2 {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+  margin-right: var(--dl-space-space-unit);
   text-decoration: none;
 }
 .footer-link13 {
   display: contents;
 }
-.footer-icon04 {
+.footer-icon4 {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
   text-decoration: none;
 }
-.footer-link14 {
-  display: contents;
-}
-.footer-icon06 {
-  fill: #D9D9D9;
-  text-decoration: none;
-}
-.footer-link15 {
-  display: contents;
-}
-.footer-icon08 {
-  text-decoration: none;
-}
-.footer-link16 {
-  display: contents;
-}
 .footer-separator {
   width: 100%;
   height: 1px;
   margin-top: var(--dl-space-space-twounits);
   margin-bottom: var(--dl-space-space-twounits);
-  background-color: var(--dl-color-primary-700);
+  background-color: var(--dl-color-gray-900);
 }
-
-.rootClassName1 {
-  margin-top: var(--dl-space-space-oneandhalfunits);
-  background-image: linear-gradient(180deg, rgb(18, 18, 18) 0.00%,rgb(16, 44, 70) 97.00%);
+.footer-text5 {
+  align-self: center;
 }
 @media(max-width: 991px) {
   .footer-footer {
     flex-direction: column;
   }
-  .footer-links-container {
-    align-items: flex-start;
-    flex-direction: column;
-  }
   .footer-container1 {
     margin-right: var(--dl-space-space-fourunits);
   }
-  .footer-community-container {
+  .footer-product-container {
     margin-right: var(--dl-space-space-fourunits);
   }
 }
@@ -225,13 +211,13 @@
   .footer-image {
     margin-bottom: var(--dl-space-space-oneandhalfunits);
   }
-  .footer-text02 {
-    margin-top: var(--dl-space-space-twounits);
+  .footer-text {
+    margin-top: var(--dl-space-space-unit);
     text-align: center;
-    margin-bottom: var(--dl-space-space-twounits);
   }
   .footer-links-container {
     width: 100%;
+    margin-top: var(--dl-space-space-twounits);
     align-items: flex-start;
     flex-direction: row;
     justify-content: center;
@@ -239,81 +225,48 @@
   .footer-container1 {
     margin-right: var(--dl-space-space-fourunits);
   }
-  .footer-community-container {
+  .footer-product-container {
     margin-right: var(--dl-space-space-fourunits);
   }
-  .rootClassName {
-    width: 100%;
-  }
 }
 @media(max-width: 479px) {
   .footer-footer {
     padding: var(--dl-space-space-unit);
   }
   .footer-container {
-    padding: var(--dl-space-space-twounits);
-    align-self: center;
     align-items: center;
     flex-direction: column;
   }
   .footer-logo {
-    align-self: center;
-    align-items: center;
-    margin-right: 0px;
-    justify-content: center;
+    width: auto;
   }
   .footer-image {
     margin-bottom: 0px;
   }
-  .footer-text02 {
-    width: var(--dl-size-size-xxlarge);
-    align-self: center;
-    margin-top: var(--dl-space-space-unit);
-    text-align: center;
-    margin-bottom: var(--dl-space-space-unit);
+  .footer-text {
+    width: 80%;
   }
   .footer-links-container {
-    align-self: flex-start;
+    align-items: flex-start;
     flex-direction: column;
   }
   .footer-container1 {
-    margin: var(--dl-space-space-unit);
+    margin-right: 0px;
     flex-direction: column;
   }
-  .footer-sources-container {
+  .footer-company-container {
     margin-top: var(--dl-space-space-twounits);
   }
   .footer-container2 {
-    margin: var(--dl-space-space-unit);
+    margin-top: var(--dl-space-space-twounits);
+    align-items: flex-start;
+    margin-bottom: 0px;
   }
   .footer-contact {
     align-items: flex-start;
     margin-bottom: var(--dl-space-space-unit);
   }
-  .footer-socials {
-    margin-top: var(--dl-space-space-oneandhalfunits);
-  }
-  .footer-icon02 {
-    fill: var(--dl-color-gray-white);
-  }
-  .footer-icon04 {
-    fill: var(--dl-color-gray-white);
-  }
-  .footer-icon06 {
-    fill: var(--dl-color-gray-white);
-  }
-  .footer-icon08 {
-    fill: var(--dl-color-gray-white);
-  }
-  .footer-icon10 {
-    fill: var(--dl-color-gray-white);
-  }
-  .footer-separator {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    background-color: var(--dl-color-primary-700);
-  }
-  .rootClassName {
-    width: 100%;
+  .footer-text5 {
+    text-align: center;
   }
 }
diff --git a/components/footer.html b/components/footer.html
index 51d9933..77b22d6 100644
--- a/components/footer.html
+++ b/components/footer.html
@@ -1,212 +1,157 @@
 <div>
   <link href="./footer.css" rel="stylesheet" />
-  <footer id="footer" class="footer-footer">
+  <footer class="footer-footer">
     <div class="footer-container">
       <div class="footer-logo">
-        <div class="footer-logo1">
-          <img
-            alt="logo"
-            src="../public/playground_assets/bliss%20logo1.svg"
-            class="footer-image"
-          />
-          <span class="footer-text body-16"><span>BlissRoms</span></span>
-        </div>
-        <span class="footer-text02">
+        <img
+          alt="logo"
+          src="public/playground_assets/bliss-logo.svg"
+          class="footer-image"
+        />
+        <span class="footer-text">
           <span>
-            <span>
-              An open-source operating system based on Android with
-              customizations, options and added security features.
-            </span>
+            An open-source operating system based on Android with
+            customizations, options and added security features.
           </span>
         </span>
       </div>
       <div class="footer-links-container">
         <div class="footer-container1">
-          <div class="footer-community-container">
-            <span class="footer-text05">Community</span>
+          <div class="footer-product-container">
+            <span class="footer-text1"><span>Community</span></span>
             <a
               href="https://t.me/Team_Bliss_Community"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link Footerlink"
+              class="footer-link"
             >
               <span>BlissRoms Telegram</span>
-              <br />
-              <span></span>
             </a>
             <a
               href="https://t.me/blissx86"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link01 Footerlink"
+              class="footer-link01"
             >
-              Bliss OS Telegram
+              <span>Bliss OS Telegram</span>
             </a>
             <a
-              href="https://discord.gg/wwc4Aua4fp"
+              href="https://discord.com/invite/wwc4Aua4fp"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link02 Footerlink"
+              class="footer-link02"
             >
-              Bliss Discord
+              <span>Bliss Discord</span>
             </a>
           </div>
-          <div class="footer-sources-container">
-            <span class="footer-text08">Sources</span>
-            <span class="Footerlink">BlissRoms Gerrit Review</span>
+          <div class="footer-company-container">
+            <span class="footer-text2"><span>Sources</span></span>
             <a
-              href="https://review-x86.blissroms.com/"
+              href="https://review.blissroms.org/q/status:open+-is:wip"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link03 Footerlink"
+              class="footer-link03"
             >
-              <span>Bliss OS (x86) Gerrit Review</span>
-              <br />
-              <span></span>
+              <span>BlissRoms Gerrit Review</span>
             </a>
             <a
               href="https://github.com/BlissRoms"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link04 Footerlink"
+              class="footer-link04"
             >
-              BlissRoms GitHub
+              <span>BlissRoms GitHub</span>
             </a>
             <a
               href="https://github.com/BlissRoms-Devices"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link05 Footerlink"
+              class="footer-link05"
             >
-              BlissRoms-Devices GitHub
+              <span>BlissRoms-Devices GitHub</span>
             </a>
             <a
               href="https://github.com/BlissRoms-x86"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link06 Footerlink"
+              class="footer-link06"
             >
-              Bliss OS GitHub
+              <span>Bliss OS GitHub</span>
             </a>
             <a
               href="https://github.com/BlissRoms-pine64"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link07 Footerlink"
+              class="footer-link07"
             >
-              BlissRoms-PINE64 GitHub
+              <span>BlissRoms-PINE64 GitHub</span>
             </a>
           </div>
         </div>
         <div class="footer-container2">
           <div class="footer-contact">
-            <span class="footer-text12 footer-Text-Style">Links</span>
+            <span class="footer-text3"><span>Links</span></span>
             <a
               href="https://blissroms.org/team.html"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link08 Footerlink"
+              class="footer-link08"
             >
-              Team members
+              <span>Team members</span>
             </a>
             <a
-              href="https://status.blissroms.org/"
+              href="https://status.blissroms.org"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link09 Footerlink"
+              class="footer-link09"
             >
-              Status
+              <span>Status</span>
             </a>
             <a
               href="https://blog.blissroms.org/"
               target="_blank"
               rel="noreferrer noopener"
-              class="footer-link10 Footerlink"
+              class="footer-link10"
             >
-              Blog
+              <span>Blog</span>
             </a>
           </div>
           <div class="footer-socials">
-            <span class="footer-text13 footer-Text-Style">Follow Us</span>
+            <span class="footer-text4"><span>Follow Us</span></span>
             <div class="footer-icon-group">
               <a
-                href="https://twitter.com/stayblissful"
+                href="https://twitter.com/bliss_roms"
                 target="_blank"
                 rel="noreferrer noopener"
                 class="footer-link11"
               >
-                <svg viewBox="0 0 950.8571428571428 1024" class="icons">
+                <svg viewBox="0 0 950.8571428571428 1024" class="footer-icon">
                   <path
                     d="M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"
                   ></path>
                 </svg>
               </a>
               <a
-                href="https://www.instagram.com/blissroms/"
+                href="https://www.instagram.com/blissroms"
                 target="_blank"
                 rel="noreferrer noopener"
                 class="footer-link12"
               >
-                <svg
-                  viewBox="0 0 877.7142857142857 1024"
-                  class="footer-icon02 icons"
-                >
+                <svg viewBox="0 0 877.7142857142857 1024" class="footer-icon2">
                   <path
                     d="M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z"
                   ></path>
                 </svg>
               </a>
               <a
-                href="https://github.com/BlissRoms"
+                href="https://www.facebook.com/BlissROMs"
                 target="_blank"
                 rel="noreferrer noopener"
                 class="footer-link13"
               >
-                <svg
-                  viewBox="0 0 877.7142857142857 1024"
-                  class="footer-icon04 icons"
-                >
+                <svg viewBox="0 0 602.2582857142856 1024" class="footer-icon4">
                   <path
-                    d="M438.857 73.143c242.286 0 438.857 196.571 438.857 438.857 0 193.714-125.714 358.286-300 416.571-22.286 4-30.286-9.714-30.286-21.143 0-14.286 0.571-61.714 0.571-120.571 0-41.143-13.714-67.429-29.714-81.143 97.714-10.857 200.571-48 200.571-216.571 0-48-17.143-86.857-45.143-117.714 4.571-11.429 19.429-56-4.571-116.571-36.571-11.429-120.571 45.143-120.571 45.143-34.857-9.714-72.571-14.857-109.714-14.857s-74.857 5.143-109.714 14.857c0 0-84-56.571-120.571-45.143-24 60.571-9.143 105.143-4.571 116.571-28 30.857-45.143 69.714-45.143 117.714 0 168 102.286 205.714 200 216.571-12.571 11.429-24 30.857-28 58.857-25.143 11.429-89.143 30.857-127.429-36.571-24-41.714-67.429-45.143-67.429-45.143-42.857-0.571-2.857 26.857-2.857 26.857 28.571 13.143 48.571 64 48.571 64 25.714 78.286 148 52 148 52 0 36.571 0.571 70.857 0.571 81.714 0 11.429-8 25.143-30.286 21.143-174.286-58.286-300-222.857-300-416.571 0-242.286 196.571-438.857 438.857-438.857zM166.286 703.429c1.143-2.286-0.571-5.143-4-6.857-3.429-1.143-6.286-0.571-7.429 1.143-1.143 2.286 0.571 5.143 4 6.857 2.857 1.714 6.286 1.143 7.429-1.143zM184 722.857c2.286-1.714 1.714-5.714-1.143-9.143-2.857-2.857-6.857-4-9.143-1.714-2.286 1.714-1.714 5.714 1.143 9.143 2.857 2.857 6.857 4 9.143 1.714zM201.143 748.571c2.857-2.286 2.857-6.857 0-10.857-2.286-4-6.857-5.714-9.714-3.429-2.857 1.714-2.857 6.286 0 10.286s7.429 5.714 9.714 4zM225.143 772.571c2.286-2.286 1.143-7.429-2.286-10.857-4-4-9.143-4.571-11.429-1.714-2.857 2.286-1.714 7.429 2.286 10.857 4 4 9.143 4.571 11.429 1.714zM257.714 786.857c1.143-3.429-2.286-7.429-7.429-9.143-4.571-1.143-9.714 0.571-10.857 4s2.286 7.429 7.429 8.571c4.571 1.714 9.714 0 10.857-3.429zM293.714 789.714c0-4-4.571-6.857-9.714-6.286-5.143 0-9.143 2.857-9.143 6.286 0 4 4 6.857 9.714 6.286 5.143 0 9.143-2.857 9.143-6.286zM326.857 784c-0.571-3.429-5.143-5.714-10.286-5.143-5.143 1.143-8.571 4.571-8 8.571 0.571 3.429 5.143 5.714 10.286 4.571s8.571-4.571 8-8z"
-                  ></path>
-                </svg>
-              </a>
-              <a
-                href="https://t.me/BlissROM_Updates"
-                target="_blank"
-                rel="noreferrer noopener"
-                class="footer-link14"
-              >
-                <svg viewBox="0 0 1024 1024" class="footer-icon06 icons">
-                  <path
-                    d="M679.429 746.857l84-396c7.429-34.857-12.571-48.571-35.429-40l-493.714 190.286c-33.714 13.143-33.143 32-5.714 40.571l126.286 39.429 293.143-184.571c13.714-9.143 26.286-4 16 5.143l-237.143 214.286-9.143 130.286c13.143 0 18.857-5.714 25.714-12.571l61.714-59.429 128 94.286c23.429 13.143 40 6.286 46.286-21.714zM1024 512c0 282.857-229.143 512-512 512s-512-229.143-512-512 229.143-512 512-512 512 229.143 512 512z"
-                  ></path>
-                </svg>
-              </a>
-              <a
-                href="https://www.linkedin.com/company/stayblissful"
-                target="_blank"
-                rel="noreferrer noopener"
-                class="footer-link15"
-              >
-                <svg
-                  viewBox="0 0 877.7142857142857 1024"
-                  class="footer-icon08 icons"
-                >
-                  <path
-                    d="M135.429 808h132v-396.571h-132v396.571zM276 289.143c-0.571-38.857-28.571-68.571-73.714-68.571s-74.857 29.714-74.857 68.571c0 37.714 28.571 68.571 73.143 68.571h0.571c46.286 0 74.857-30.857 74.857-68.571zM610.286 808h132v-227.429c0-121.714-65.143-178.286-152-178.286-70.857 0-102.286 39.429-119.429 66.857h1.143v-57.714h-132s1.714 37.143 0 396.571v0h132v-221.714c0-11.429 0.571-23.429 4-32 9.714-23.429 31.429-48 68-48 47.429 0 66.286 36 66.286 89.714v212zM877.714 237.714v548.571c0 90.857-73.714 164.571-164.571 164.571h-548.571c-90.857 0-164.571-73.714-164.571-164.571v-548.571c0-90.857 73.714-164.571 164.571-164.571h548.571c90.857 0 164.571 73.714 164.571 164.571z"
-                  ></path>
-                </svg>
-              </a>
-              <a
-                href="https://www.reddit.com/r/BlissRoms"
-                target="_blank"
-                rel="noreferrer noopener"
-                class="footer-link16"
-              >
-                <svg viewBox="0 0 1024 1024" class="icons footer-icon10">
-                  <path
-                    d="M1024 483.429c0 44.571-25.143 82.857-62.286 101.714 4.571 17.714 6.857 36 6.857 54.857 0 180.571-204 326.857-455.429 326.857-250.857 0-454.857-146.286-454.857-326.857 0-18.286 2.286-36.571 6.286-53.714-38.286-18.857-64.571-57.714-64.571-102.857 0-62.857 50.857-113.714 113.714-113.714 32.571 0 61.714 13.714 82.857 36 77.143-53.714 180-88.571 294.286-92.571l66.286-297.714c2.286-10.286 13.143-17.143 23.429-14.857l210.857 46.286c13.714-27.429 42.857-46.857 76-46.857 47.429 0 85.714 38.286 85.714 85.143 0 47.429-38.286 85.714-85.714 85.714-46.857 0-85.143-38.286-85.143-85.143l-190.857-42.286-59.429 269.714c114.857 3.429 218.857 37.714 296.571 91.429 20.571-21.714 49.714-34.857 81.714-34.857 62.857 0 113.714 50.857 113.714 113.714zM238.857 597.143c0 47.429 38.286 85.714 85.143 85.714 47.429 0 85.714-38.286 85.714-85.714 0-46.857-38.286-85.143-85.714-85.143-46.857 0-85.143 38.286-85.143 85.143zM701.714 800c8.571-8.571 8.571-21.143 0-29.714-8-8-21.143-8-29.143 0-34.286 34.857-108 46.857-160.571 46.857s-126.286-12-160.571-46.857c-8-8-21.143-8-29.143 0-8.571 8-8.571 21.143 0 29.714 54.286 54.286 158.857 58.286 189.714 58.286s135.429-4 189.714-58.286zM700 682.857c46.857 0 85.143-38.286 85.143-85.714 0-46.857-38.286-85.143-85.143-85.143-47.429 0-85.714 38.286-85.714 85.143 0 47.429 38.286 85.714 85.714 85.714z"
+                    d="M548 6.857v150.857h-89.714c-70.286 0-83.429 33.714-83.429 82.286v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571c0-144.571 88.571-223.429 217.714-223.429 61.714 0 114.857 4.571 130.286 6.857z"
                   ></path>
                 </svg>
               </a>
@@ -216,5 +161,8 @@
       </div>
     </div>
     <div class="footer-separator"></div>
+    <span class="footer-text5">
+      <span>Copyright © 2022 BlissLabs. All rights reserved</span>
+    </span>
   </footer>
 </div>
diff --git a/components/member.css b/components/member.css
deleted file mode 100644
index 2498696..0000000
--- a/components/member.css
+++ /dev/null
@@ -1,133 +0,0 @@
-.member-container {
-  cursor: pointer;
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  justify-content: center;
-}
-.member-container1 {
-  flex: 0 0 auto;
-  width: 240px;
-  height: 280px;
-  margin: var(--dl-space-space-halfunit);
-  display: flex;
-  padding: var(--dl-space-space-unit);
-  transition: 0.3s;
-  align-items: center;
-  border-radius: var(--dl-radius-radius-radius8);
-  flex-direction: column;
-  justify-content: center;
-  background-color: #121212;
-}
-.member-container1:hover {
-  box-shadow: 0px 2px 32px 24px #000000;
-  background-color: #181818;
-}
-.member-image {
-  width: 104px;
-  height: 104px;
-  min-width: var(--dl-size-size-small);
-  min-height: var(--dl-size-size-small);
-  object-fit: cover;
-  border-radius: var(--dl-radius-radius-round);
-}
-.member-text {
-  color: var(--dl-color-primary-300);
-  margin-top: var(--dl-space-space-unit);
-}
-.member-text1 {
-  color: var(--dl-color-gray-900);
-  align-self: center;
-  margin-top: var(--dl-space-space-halfunit);
-  text-align: center;
-  margin-bottom: var(--dl-space-space-halfunit);
-}
-.member-text2 {
-  color: var(--dl-color-gray-500);
-  width: 250px;
-  display: none;
-  text-align: center;
-}
-.member-icons {
-  flex: 0 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: var(--dl-space-space-halfunit);
-  align-items: center;
-  margin-bottom: var(--dl-space-space-halfunit);
-  justify-content: center;
-}
-.member-icon {
-  fill: #D9D9D9;
-  width: 20px;
-  transition: 0.3s;
-}
-.member-icon:hover {
-  fill: var(--dl-color-primary-500);
-}
-.member-icon2 {
-  fill: #D9D9D9;
-  width: 20px;
-  transition: 0.3s;
-  margin-left: var(--dl-space-space-unit);
-  margin-right: var(--dl-space-space-unit);
-}
-.member-icon2:hover {
-  fill: var(--dl-color-primary-500);
-}
-.member-icon4 {
-  fill: #D9D9D9;
-  width: 20px;
-  transition: 0.3s;
-}
-.member-icon4:hover {
-  fill: var(--dl-color-primary-500);
-}
-
-
-
-
-
-.rootClassName5 {
-  align-self: center;
-}
-
-
-
-
-
-
-
-
-@media(max-width: 479px) {
-  .member-container {
-    width: auto;
-  }
-  .member-container1 {
-    width: auto;
-    height: auto;
-    margin: 0px;
-    padding-top: var(--dl-space-space-unit);
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-bottom: var(--dl-space-space-unit);
-  }
-  .member-image {
-    width: var(--dl-size-size-medium);
-    height: var(--dl-size-size-medium);
-    min-width: var(--dl-size-size-small);
-    min-height: var(--dl-size-size-small);
-  }
-  .member-text1 {
-    width: var(--dl-size-size-medium);
-  }
-  .member-icon {
-    width: var(--dl-size-size-xsmall);
-  }
-  .member-icon2 {
-    width: var(--dl-size-size-xsmall);
-  }
-  .member-icon4 {
-    width: var(--dl-size-size-xsmall);
-  }
-}
diff --git a/components/member.html b/components/member.html
deleted file mode 100644
index a19ef4f..0000000
--- a/components/member.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<div>
-  <link href="./member.css" rel="stylesheet" />
-  <div class="member-container">
-    <div class="member-container1">
-      <img
-        alt="image"
-        src="https://images.unsplash.com/photo-1633190206143-e618bc3c0e8b?ixid=Mnw5MTMyMXwwfDF8YWxsfDE0fHx8fHx8Mnx8MTYzMzI4MjIyMw&ixlib=rb-1.2.1&w=1500"
-        class="member-image"
-      />
-      <h1 class="member-text h6-20"><span>Silene Tokyo</span></h1>
-      <span class="member-text1 body-12"><span>VP Operations</span></span>
-      <span class="member-text2 subtitle-14">
-        <span>
-          The Vice President, Operations is responsible for planning, directing,
-          and overseeing finance and operations activities in the organization,
-          and ensuring development.
-        </span>
-      </span>
-      <div class="member-icons">
-        <svg viewBox="0 0 877.7142857142857 1024" class="member-icon">
-          <path
-            d="M438.857 73.143c242.286 0 438.857 196.571 438.857 438.857 0 193.714-125.714 358.286-300 416.571-22.286 4-30.286-9.714-30.286-21.143 0-14.286 0.571-61.714 0.571-120.571 0-41.143-13.714-67.429-29.714-81.143 97.714-10.857 200.571-48 200.571-216.571 0-48-17.143-86.857-45.143-117.714 4.571-11.429 19.429-56-4.571-116.571-36.571-11.429-120.571 45.143-120.571 45.143-34.857-9.714-72.571-14.857-109.714-14.857s-74.857 5.143-109.714 14.857c0 0-84-56.571-120.571-45.143-24 60.571-9.143 105.143-4.571 116.571-28 30.857-45.143 69.714-45.143 117.714 0 168 102.286 205.714 200 216.571-12.571 11.429-24 30.857-28 58.857-25.143 11.429-89.143 30.857-127.429-36.571-24-41.714-67.429-45.143-67.429-45.143-42.857-0.571-2.857 26.857-2.857 26.857 28.571 13.143 48.571 64 48.571 64 25.714 78.286 148 52 148 52 0 36.571 0.571 70.857 0.571 81.714 0 11.429-8 25.143-30.286 21.143-174.286-58.286-300-222.857-300-416.571 0-242.286 196.571-438.857 438.857-438.857zM166.286 703.429c1.143-2.286-0.571-5.143-4-6.857-3.429-1.143-6.286-0.571-7.429 1.143-1.143 2.286 0.571 5.143 4 6.857 2.857 1.714 6.286 1.143 7.429-1.143zM184 722.857c2.286-1.714 1.714-5.714-1.143-9.143-2.857-2.857-6.857-4-9.143-1.714-2.286 1.714-1.714 5.714 1.143 9.143 2.857 2.857 6.857 4 9.143 1.714zM201.143 748.571c2.857-2.286 2.857-6.857 0-10.857-2.286-4-6.857-5.714-9.714-3.429-2.857 1.714-2.857 6.286 0 10.286s7.429 5.714 9.714 4zM225.143 772.571c2.286-2.286 1.143-7.429-2.286-10.857-4-4-9.143-4.571-11.429-1.714-2.857 2.286-1.714 7.429 2.286 10.857 4 4 9.143 4.571 11.429 1.714zM257.714 786.857c1.143-3.429-2.286-7.429-7.429-9.143-4.571-1.143-9.714 0.571-10.857 4s2.286 7.429 7.429 8.571c4.571 1.714 9.714 0 10.857-3.429zM293.714 789.714c0-4-4.571-6.857-9.714-6.286-5.143 0-9.143 2.857-9.143 6.286 0 4 4 6.857 9.714 6.286 5.143 0 9.143-2.857 9.143-6.286zM326.857 784c-0.571-3.429-5.143-5.714-10.286-5.143-5.143 1.143-8.571 4.571-8 8.571 0.571 3.429 5.143 5.714 10.286 4.571s8.571-4.571 8-8z"
-          ></path></svg
-        ><svg viewBox="0 0 950.8571428571428 1024" class="member-icon2">
-          <path
-            d="M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"
-          ></path></svg
-        ><svg viewBox="0 0 877.7142857142857 1024" class="member-icon4">
-          <path
-            d="M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z"
-          ></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/components/nav.css b/components/nav.css
new file mode 100644
index 0000000..ef56252
--- /dev/null
+++ b/components/nav.css
@@ -0,0 +1,263 @@
+.navigation-links-nav {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.navigation-links-text1 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+}
+.navigation-links-link {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+  text-decoration: none;
+}
+.navigation-links-link1 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+  text-decoration: none;
+}
+.navigation-links-text2 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+}
+
+
+
+
+
+
+
+
+
+@media(max-width: 767px) {
+  .navigation-links-nav {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .navigation-links-text1 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navigation-links-link {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navigation-links-link1 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navigation-links-text2 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+}
+@media(max-width: 479px) {
+  .navigation-links-root-class-name11 {
+    margin-left: var(--dl-space-space-unit);
+  }
+}
+
+.nav-nav {
+  width: 100%;
+  display: flex;
+  z-index: 100;
+  position: sticky;
+  max-width: var(--dl-size-size-maxwidth);
+  align-items: center;
+  padding-top: var(--dl-space-space-twounits);
+  padding-left: var(--dl-space-space-threeunits);
+  padding-right: var(--dl-space-space-threeunits);
+  padding-bottom: var(--dl-space-space-twounits);
+  justify-content: space-between;
+}
+.nav-image {
+  width: var(--dl-size-size-small);
+  object-fit: cover;
+}
+.nav-nav1 {
+  display: flex;
+}
+.nav-nav2 {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.nav-link {
+  text-decoration: none;
+}
+.nav-link1 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+  text-decoration: none;
+}
+.nav-link2 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+  text-decoration: none;
+}
+.nav-link3 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+  text-decoration: none;
+}
+.nav-link4 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+  text-decoration: none;
+}
+.nav-btn-group {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+.nav-register {
+  color: var(--dl-color-gray-white);
+  display: flex;
+  grid-gap: 8px;
+  align-self: center;
+  align-items: center;
+  border-width: 0px;
+  flex-direction: row;
+  text-decoration: none;
+  background-color: var(--dl-color-bliss-primary);
+}
+.nav-icon {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+}
+.nav-nav3 {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+.nav-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--dl-space-space-threeunits);
+  justify-content: space-between;
+}
+.nav-image1 {
+  height: 2rem;
+}
+.nav-menu-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.nav-icon04 {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+  margin-right: var(--dl-space-space-twounits);
+}
+.nav-icon06 {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+  margin-right: var(--dl-space-space-twounits);
+}
+.nav-icon08 {
+  width: var(--dl-size-size-xsmall);
+  height: var(--dl-size-size-xsmall);
+}
+@media(max-width: 1200px) {
+  .nav-mobile-menu {
+    display: none;
+  }
+}
+@media(max-width: 991px) {
+  .nav-burger-menu {
+    display: none;
+  }
+  .nav-mobile-menu {
+    display: none;
+  }
+}
+@media(max-width: 767px) {
+  .nav-nav {
+    padding-left: var(--dl-space-space-twounits);
+    padding-right: var(--dl-space-space-twounits);
+  }
+  .nav-nav1 {
+    display: none;
+  }
+  .nav-nav2 {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .nav-link1 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .nav-link2 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .nav-link3 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .nav-link4 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .nav-btn-group {
+    display: none;
+  }
+  .nav-burger-menu {
+    width: var(--dl-size-size-small);
+    height: var(--dl-size-size-small);
+    display: flex;
+  }
+  .nav-icon {
+    width: 32px;
+    height: 32px;
+  }
+  .nav-mobile-menu {
+    display: none;
+  }
+}
+@media(max-width: 479px) {
+  .nav-nav {
+    padding: var(--dl-space-space-unit);
+  }
+  .nav-nav1 {
+    display: none;
+    align-items: flex-start;
+  }
+  .nav-icon {
+    fill: var(--dl-color-gray-500);
+  }
+  .nav-mobile-menu {
+    display: none;
+    background-color: #ffffff;
+  }
+  .nav-nav3 {
+    width: 100%;
+    background-color: #ffffff;
+  }
+  .nav-container {
+    background-color: #ffffff;
+  }
+  .nav-menu-close {
+    width: var(--dl-size-size-small);
+    height: var(--dl-size-size-small);
+  }
+  .nav-icon02 {
+    width: 24px;
+  }
+  .nav-icon-group {
+    margin-top: var(--dl-space-space-twounits);
+  }
+}
diff --git a/components/nav.html b/components/nav.html
new file mode 100644
index 0000000..e4e85ba
--- /dev/null
+++ b/components/nav.html
@@ -0,0 +1,126 @@
+<div>
+  <link href="./nav.css" rel="stylesheet" />
+  <header data-role="Header" class="nav-nav">
+    <img
+      alt="image"
+      src="public/playground_assets/bliss-logo.svg"
+      class="nav-image"
+    />
+    <div class="nav-nav1">
+      <nav class="nav-nav2">
+        <a
+          href="http://docs.blissroms.org"
+          target="_blank"
+          rel="noreferrer noopener"
+          class="nav-link"
+        >
+          <span>Docs</span>
+        </a>
+        <a href="#features" class="nav-link1 nav-link"><span>Features</span></a>
+        <a
+          href="https://blisslabs.org"
+          target="_blank"
+          rel="noreferrer noopener"
+          class="nav-link2 nav-link"
+        >
+          <span>BlissLabs</span>
+        </a>
+        <a
+          href="https://blissroms.org/team.html"
+          target="_blank"
+          rel="noreferrer noopener"
+          class="nav-link3 nav-link"
+        >
+          <span>Team</span>
+        </a>
+        <a
+          href="https://blog.blissroms.org/"
+          target="_blank"
+          rel="noreferrer noopener"
+          class="nav-link4 nav-link"
+        >
+          <span>Blog</span>
+        </a>
+      </nav>
+    </div>
+    <div class="nav-btn-group">
+      <a href="#download" class="nav-register button">
+        <span><span>Download</span></span>
+      </a>
+    </div>
+    <div
+      id="hamicon"
+      data-type="BurgerMenu"
+      class="teleport-menu-burger nav-burger-menu"
+    >
+      <svg viewBox="0 0 1024 1024" class="nav-icon">
+        <path
+          d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
+        ></path>
+      </svg>
+    </div>
+    <div
+      id="mobilemenu"
+      data-type="MobileMenu"
+      class="teleport-menu-mobile nav-mobile-menu"
+    >
+      <div class="nav-nav3">
+        <div class="nav-container">
+          <img
+            alt="image"
+            src="public/playground_assets/bliss-logo.svg"
+            class="nav-image1"
+          />
+          <div
+            data-type="CloseMobileMenu"
+            class="nav-menu-close teleport-menu-close"
+          >
+            <svg viewBox="0 0 1024 1024" class="nav-icon02">
+              <path
+                d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
+              ></path>
+            </svg>
+          </div>
+        </div>
+        <nav class="navigation-links-nav navigation-links-root-class-name11">
+          <span class="nav-link"><span>About</span></span>
+          <span class="navigation-links-text1 nav-link">
+            <span>Features</span>
+          </span>
+          <a
+            href="https://blisslabs.org"
+            target="_blank"
+            rel="noreferrer noopener"
+            class="navigation-links-link nav-link"
+          >
+            <span>BlissLabs</span>
+          </a>
+          <a
+            href="https://blissroms.org/team.html"
+            target="_blank"
+            rel="noreferrer noopener"
+            class="navigation-links-link1 nav-link"
+          >
+            <span>Team</span>
+          </a>
+          <span class="navigation-links-text2 nav-link"><span>Blog</span></span>
+        </nav>
+      </div>
+      <div class="nav-icon-group">
+        <svg viewBox="0 0 950.8571428571428 1024" class="nav-icon04">
+          <path
+            d="M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"
+          ></path></svg
+        ><svg viewBox="0 0 877.7142857142857 1024" class="nav-icon06">
+          <path
+            d="M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z"
+          ></path></svg
+        ><svg viewBox="0 0 602.2582857142856 1024" class="nav-icon08">
+          <path
+            d="M548 6.857v150.857h-89.714c-70.286 0-83.429 33.714-83.429 82.286v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571c0-144.571 88.571-223.429 217.714-223.429 61.714 0 114.857 4.571 130.286 6.857z"
+          ></path>
+        </svg>
+      </div>
+    </div>
+  </header>
+</div>
diff --git a/components/nav_element.css b/components/nav_element.css
deleted file mode 100644
index 6ae0966..0000000
--- a/components/nav_element.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.nav_element-container {
-  display: flex;
-  position: relative;
-}
-.nav_element-text {
-  font-style: normal;
-  transition: 0.3s;
-  font-weight: 500;
-  margin-left: 72px;
-}
-
diff --git a/components/nav_element.html b/components/nav_element.html
deleted file mode 100644
index 7a31fcc..0000000
--- a/components/nav_element.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div>
-  <link href="./nav_element.css" rel="stylesheet" />
-  <div class="nav_element-container">
-    <span class="nav_element-text navelement"><span>Home</span></span>
-  </div>
-</div>
diff --git a/components/navbar.css b/components/navbar.css
deleted file mode 100644
index 5c19692..0000000
--- a/components/navbar.css
+++ /dev/null
@@ -1,295 +0,0 @@
-.nav_element-container {
-  display: flex;
-  position: relative;
-}
-.nav_element-text {
-  font-style: normal;
-  transition: 0.3s;
-  font-weight: 500;
-  margin-left: 72px;
-}
-
-
-.button-container {
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  flex-direction: column;
-}
-.button-text {
-  color: var(--dl-color-gray-white);
-  cursor: pointer;
-  align-self: center;
-  margin-top: var(--dl-space-space-halfunit);
-  transition: 0.3s;
-  margin-left: var(--dl-space-space-halfunit);
-  padding-top: var(--dl-space-space-halfunit);
-  margin-right: var(--dl-space-space-halfunit);
-  padding-left: var(--dl-space-space-oneandhalfunits);
-  border-radius: var(--dl-radius-radius-radius8);
-  margin-bottom: var(--dl-space-space-halfunit);
-  padding-right: var(--dl-space-space-oneandhalfunits);
-  padding-bottom: var(--dl-space-space-halfunit);
-  background-color: var(--dl-color-primary-300);
-}
-.button-text:hover {
-  color: var(--dl-color-primary-300);
-  background-color: var(--dl-color-gray-white);
-}
-
-
-
-
-
-
-
-
-
-
-
-.navbar-image {
-  width: 60px;
-  height: 60px;
-}
-.navbar-container {
-  flex: 0 0 auto;
-  width: auto;
-  height: auto;
-  display: flex;
-  align-items: space-between;
-  margin-right: var(--dl-space-space-oneandhalfunits);
-  flex-direction: column;
-}
-.navbar-nav-elements-desktop {
-  flex: 0 0 auto;
-  display: flex;
-  align-self: center;
-  align-items: center;
-  margin-left: 0px;
-  flex-direction: row;
-}
-.navbar-navlink {
-  display: contents;
-}
-.navbar-component {
-  text-decoration: none;
-}
-.navbar-navlink1 {
-  display: contents;
-}
-.navbar-component1 {
-  text-decoration: none;
-}
-.navbar-navlink2 {
-  display: contents;
-}
-.navbar-component2 {
-  text-decoration: none;
-}
-.navbar-link {
-  display: contents;
-}
-.navbar-component3 {
-  text-decoration: none;
-}
-.navbar-link1 {
-  display: contents;
-}
-.navbar-component4 {
-  text-decoration: none;
-}
-.navbar-btn-group {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-  text-decoration: none;
-}
-.navbar-component5 {
-  text-decoration: none;
-}
-.navbar-burger-menu {
-  display: none;
-}
-.navbar-icon {
-  width: var(--dl-size-size-xsmall);
-  height: var(--dl-size-size-xsmall);
-  display: none;
-  transition: 0.3s;
-}
-
-.navbar-nav-elements-mobile {
-  flex: 0 0 auto;
-  display: none;
-  position: absolute;
-  align-self: center;
-  align-items: center;
-  margin-left: 0px;
-  flex-direction: column;
-}
-.navbar-navlink3 {
-  font-style: normal;
-  transition: 0.3s;
-}
-
-.navbar-navlink3:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar-link3 {
-  font-style: normal;
-  transition: 0.3s;
-}
-
-.navbar-link3:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar-navlink4 {
-  font-style: normal;
-  transition: 0.3s;
-  text-decoration: none;
-}
-
-.navbar-navlink4:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar-text {
-  font-style: normal;
-  transition: 0.3s;
-}
-
-.navbar-text:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar-text1 {
-  font-style: normal;
-  transition: 0.3s;
-}
-
-.navbar-text1:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar-btn-group1 {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-  text-decoration: none;
-}
-.navbar-component6 {
-  text-decoration: none;
-}
-.navbar-container1 {
-  top: 32px;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-}
-.navbar-icon2 {
-  width: 24px;
-  height: 24px;
-}
-
-@media(max-width: 991px) {
-  .navbar-nav-elements-desktop {
-    display: none;
-  }
-  .navbar-btn-group {
-    display: none;
-  }
-  .navbar-burger-menu {
-    display: flex;
-  }
-  .navbar-icon {
-    fill: #D9D9D9;
-    width: var(--dl-size-size-small);
-    height: var(--dl-size-size-small);
-    display: flex;
-  }
-  .navbar-nav-elements-mobile {
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    display: flex;
-    align-items: flex-start;
-    margin-left: 0px;
-    padding-top: var(--dl-space-space-twounits);
-    padding-left: var(--dl-space-space-twounits);
-    padding-right: var(--dl-space-space-twounits);
-    padding-bottom: var(--dl-space-space-twounits);
-    background-color: var(--dl-color-gray-black);
-  }
-  .navbar-btn-group1 {
-    display: none;
-  }
-  .navbar-container1 {
-    right: 32px;
-  }
-}
-@media(max-width: 767px) {
-  .navbar-icon {
-    fill: var(--dl-color-gray-900);
-    width: var(--dl-size-size-small);
-    height: var(--dl-size-size-small);
-  }
-}
-@media(max-width: 479px) {
-  .navbar-image {
-    width: auto;
-    height: auto;
-  }
-  .navbar-burger-menu {
-    display: flex;
-  }
-  .navbar-icon {
-    fill: var(--dl-color-gray-900);
-    width: 32px;
-    height: 32px;
-  }
-  .navbar-nav-elements-mobile {
-    height: 100vh;
-    flex-direction: column;
-    justify-content: center;
-    background-color: var(--dl-color-gray-white);
-  }
-  .navbar-navlink3 {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar-link3 {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar-navlink4 {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar-text {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar-text1 {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar-btn-group1 {
-    display: flex;
-    margin-top: var(--dl-space-space-halfunit);
-    margin-bottom: var(--dl-space-space-halfunit);
-  }
-  .navbar-icon2 {
-    fill: var(--dl-color-primary-100);
-  }
-  .rootClassName {
-    width: 100%;
-  }
-}
diff --git a/components/navbar.html b/components/navbar.html
deleted file mode 100644
index 66e8c4d..0000000
--- a/components/navbar.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<div>
-  <link href="./navbar.css" rel="stylesheet" />
-  <nav class="Navbar navbar-fixed">
-    <img
-      alt="logo"
-      src="../public/playground_assets/nav_logo.svg"
-      class="navbar-image"
-    />
-    <div class="navbar-container">
-      <nav class="navbar-nav-elements-desktop">
-        <a href="/" class="navbar-navlink">
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement"><span>Home</span></span>
-          </div>
-        </a>
-        <a href="/" class="navbar-navlink1">
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement">
-              <span>Features</span>
-            </span>
-          </div>
-        </a>
-        <a href="/team.html" class="navbar-navlink2">
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement"><span>Team</span></span>
-          </div>
-        </a>
-        <a
-          href="https://bliss-family-store.creator-spring.com/"
-          target="_blank"
-          rel="noreferrer noopener"
-          class="navbar-link"
-        >
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement"><span>Gear</span></span>
-          </div>
-        </a>
-        <a
-          href="https://docs.blissroms.org/"
-          target="_blank"
-          rel="noreferrer noopener"
-          class="navbar-link1"
-        >
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement"><span>Docs</span></span>
-          </div>
-        </a>
-      </nav>
-    </div>
-    <a href="#downloads">
-      <div class="navbar-btn-group">
-        <div class="button-container rootClassName4">
-          <span class="button-text body-16"><span>Download</span></span>
-        </div>
-      </div>
-    </a>
-    <div class="navbar-burger-menu teleport-menu-burger">
-      <svg viewBox="0 0 1024 1024" class="navbar-icon">
-        <path
-          d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
-        ></path>
-      </svg>
-    </div>
-    <nav class="navbar-nav-elements-mobile teleport-menu-mobile">
-      <a href="/" class="navbar-navlink3 h4-28 mb-12 navelement">
-        <span>Home</span>
-      </a>
-      <a href="#features" class="navbar-link3 h4-28 mb-12 navelement">
-        <span>Features</span>
-      </a>
-      <a href="/team.html" class="navbar-navlink4 h4-28 mb-12 navelement">
-        <span>Team</span>
-      </a>
-      <span class="navbar-text h4-28 mb-12 navelement"><span>Gear</span></span>
-      <span class="navbar-text1 mb-12 navelement h4-28"><span>Blog</span></span>
-      <a href="#downloads">
-        <div class="navbar-btn-group1">
-          <div class="button-container rootClassName4">
-            <span class="button-text body-16"><span>Download</span></span>
-          </div>
-        </div>
-      </a>
-      <div class="navbar-container1 teleport-menu-close">
-        <svg viewBox="0 0 804.5714285714286 1024" class="navbar-icon2">
-          <path
-            d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
-          ></path>
-        </svg>
-      </div>
-    </nav>
-  </nav>
-</div>
diff --git a/components/navbar_team.css b/components/navbar_team.css
deleted file mode 100644
index da853c2..0000000
--- a/components/navbar_team.css
+++ /dev/null
@@ -1,286 +0,0 @@
-.nav_element-container {
-  display: flex;
-  position: relative;
-}
-.nav_element-text {
-  font-style: normal;
-  transition: 0.3s;
-  font-weight: 500;
-  margin-left: 72px;
-}
-
-
-.button-container {
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  flex-direction: column;
-}
-.button-text {
-  color: var(--dl-color-gray-white);
-  cursor: pointer;
-  align-self: center;
-  margin-top: var(--dl-space-space-halfunit);
-  transition: 0.3s;
-  margin-left: var(--dl-space-space-halfunit);
-  padding-top: var(--dl-space-space-halfunit);
-  margin-right: var(--dl-space-space-halfunit);
-  padding-left: var(--dl-space-space-oneandhalfunits);
-  border-radius: var(--dl-radius-radius-radius8);
-  margin-bottom: var(--dl-space-space-halfunit);
-  padding-right: var(--dl-space-space-oneandhalfunits);
-  padding-bottom: var(--dl-space-space-halfunit);
-  background-color: var(--dl-color-primary-300);
-}
-.button-text:hover {
-  color: var(--dl-color-primary-300);
-  background-color: var(--dl-color-gray-white);
-}
-
-
-
-
-
-
-
-
-
-
-
-.navbar_team-image {
-  width: 60px;
-  height: 60px;
-}
-.navbar_team-container {
-  flex: 0 0 auto;
-  width: auto;
-  height: auto;
-  display: flex;
-  align-items: space-between;
-  margin-right: var(--dl-space-space-oneandhalfunits);
-  flex-direction: column;
-}
-.navbar_team-nav-elements-desktop {
-  flex: 0 0 auto;
-  display: flex;
-  align-self: center;
-  align-items: center;
-  margin-left: 0px;
-  flex-direction: row;
-}
-.navbar_team-navlink {
-  display: contents;
-}
-.navbar_team-component {
-  text-decoration: none;
-}
-.navbar_team-navlink1 {
-  display: contents;
-}
-.navbar_team-component1 {
-  text-decoration: none;
-}
-.navbar_team-link {
-  display: contents;
-}
-.navbar_team-component2 {
-  text-decoration: none;
-}
-.navbar_team-link1 {
-  display: contents;
-}
-.navbar_team-component3 {
-  text-decoration: none;
-}
-.navbar_team-btn-group {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-  text-decoration: none;
-}
-.navbar_team-component4 {
-  text-decoration: none;
-}
-.navbar_team-burger-menu {
-  display: none;
-}
-.navbar_team-icon {
-  width: var(--dl-size-size-xsmall);
-  height: var(--dl-size-size-xsmall);
-  display: none;
-  transition: 0.3s;
-}
-
-.navbar_team-nav-elements-mobile {
-  flex: 0 0 auto;
-  display: none;
-  position: absolute;
-  align-self: center;
-  align-items: center;
-  margin-left: 0px;
-  flex-direction: column;
-}
-.navbar_team-navlink2 {
-  font-style: normal;
-  transition: 0.3s;
-}
-
-.navbar_team-navlink2:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar_team-link3 {
-  font-style: normal;
-  transition: 0.3s;
-}
-
-.navbar_team-link3:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar_team-navlink3 {
-  font-style: normal;
-  transition: 0.3s;
-  text-decoration: none;
-}
-
-.navbar_team-navlink3:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar_team-text {
-  font-style: normal;
-  transition: 0.3s;
-}
-
-.navbar_team-text:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar_team-text1 {
-  font-style: normal;
-  transition: 0.3s;
-}
-
-.navbar_team-text1:active {
-  color: var(--dl-color-primary-300);
-}
-.navbar_team-btn-group1 {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-  text-decoration: none;
-}
-.navbar_team-component5 {
-  text-decoration: none;
-}
-.navbar_team-container1 {
-  top: 32px;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-}
-.navbar_team-icon2 {
-  width: 24px;
-  height: 24px;
-}
-
-@media(max-width: 991px) {
-  .navbar_team-nav-elements-desktop {
-    display: none;
-  }
-  .navbar_team-btn-group {
-    display: none;
-  }
-  .navbar_team-burger-menu {
-    display: flex;
-  }
-  .navbar_team-icon {
-    fill: #D9D9D9;
-    width: var(--dl-size-size-small);
-    height: var(--dl-size-size-small);
-    display: flex;
-  }
-  .navbar_team-nav-elements-mobile {
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    display: flex;
-    align-items: flex-start;
-    margin-left: 0px;
-    padding-top: var(--dl-space-space-twounits);
-    padding-left: var(--dl-space-space-twounits);
-    padding-right: var(--dl-space-space-twounits);
-    padding-bottom: var(--dl-space-space-twounits);
-    background-color: var(--dl-color-gray-black);
-  }
-  .navbar_team-btn-group1 {
-    display: none;
-  }
-  .navbar_team-container1 {
-    right: 32px;
-  }
-}
-@media(max-width: 767px) {
-  .navbar_team-icon {
-    fill: var(--dl-color-gray-900);
-    width: var(--dl-size-size-small);
-    height: var(--dl-size-size-small);
-  }
-}
-@media(max-width: 479px) {
-  .navbar_team-image {
-    width: auto;
-    height: auto;
-  }
-  .navbar_team-burger-menu {
-    display: flex;
-  }
-  .navbar_team-icon {
-    fill: var(--dl-color-gray-900);
-    width: 32px;
-    height: 32px;
-  }
-  .navbar_team-nav-elements-mobile {
-    height: 100vh;
-    flex-direction: column;
-    justify-content: center;
-    background-color: var(--dl-color-gray-white);
-  }
-  .navbar_team-navlink2 {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar_team-link3 {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar_team-navlink3 {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar_team-text {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar_team-text1 {
-    color: var(--dl-color-primary-100);
-    margin-top: var(--dl-space-space-unit);
-    text-align: left;
-    margin-bottom: var(--dl-space-space-unit);
-  }
-  .navbar_team-btn-group1 {
-    display: flex;
-    margin-top: var(--dl-space-space-halfunit);
-    margin-bottom: var(--dl-space-space-halfunit);
-  }
-  .navbar_team-icon2 {
-    fill: var(--dl-color-primary-100);
-  }
-}
diff --git a/components/navbar_team.html b/components/navbar_team.html
deleted file mode 100644
index f7caede..0000000
--- a/components/navbar_team.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<div>
-  <link href="./navbar_team.css" rel="stylesheet" />
-  <nav class="Navbar navbar-fixed">
-    <img
-      alt="logo"
-      src="../public/playground_assets/nav_logo.svg"
-      class="navbar_team-image"
-    />
-    <div class="navbar_team-container">
-      <nav class="navbar_team-nav-elements-desktop">
-        <a href="/" class="navbar_team-navlink">
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement"><span>Home</span></span>
-          </div>
-        </a>
-        <a href="/team.html" class="navbar_team-navlink1">
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement"><span>Team</span></span>
-          </div>
-        </a>
-        <a
-          href="https://bliss-family-store.creator-spring.com/"
-          target="_blank"
-          rel="noreferrer noopener"
-          class="navbar_team-link"
-        >
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement"><span>Gear</span></span>
-          </div>
-        </a>
-        <a
-          href="https://docs.blissroms.org/"
-          target="_blank"
-          rel="noreferrer noopener"
-          class="navbar_team-link1"
-        >
-          <div class="nav_element-container">
-            <span class="nav_element-text navelement"><span>Docs</span></span>
-          </div>
-        </a>
-      </nav>
-    </div>
-    <a href="#downloads">
-      <div class="navbar_team-btn-group">
-        <div class="button-container rootClassName8">
-          <span class="button-text body-16"><span>Download</span></span>
-        </div>
-      </div>
-    </a>
-    <div class="navbar_team-burger-menu teleport-menu-burger">
-      <svg viewBox="0 0 1024 1024" class="navbar_team-icon">
-        <path
-          d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
-        ></path>
-      </svg>
-    </div>
-    <nav class="navbar_team-nav-elements-mobile teleport-menu-mobile">
-      <a href="/" class="navbar_team-navlink2 h4-28 mb-12 navelement">
-        <span>Home</span>
-      </a>
-      <a href="#features" class="navbar_team-link3 h4-28 mb-12 navelement">
-        <span>Features</span>
-      </a>
-      <a href="/team.html" class="navbar_team-navlink3 h4-28 mb-12 navelement">
-        <span>Team</span>
-      </a>
-      <span class="navbar_team-text h4-28 mb-12 navelement">
-        <span>Gear</span>
-      </span>
-      <span class="navbar_team-text1 h4-28 mb-12 navelement">
-        <span>Blog</span>
-      </span>
-      <a href="#downloads">
-        <div class="navbar_team-btn-group1">
-          <div class="button-container rootClassName8">
-            <span class="button-text body-16"><span>Download</span></span>
-          </div>
-        </div>
-      </a>
-      <div class="navbar_team-container1 teleport-menu-close">
-        <svg viewBox="0 0 804.5714285714286 1024" class="navbar_team-icon2">
-          <path
-            d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
-          ></path>
-        </svg>
-      </div>
-    </nav>
-  </nav>
-</div>
diff --git a/components/navigation-links.css b/components/navigation-links.css
new file mode 100644
index 0000000..e07afe6
--- /dev/null
+++ b/components/navigation-links.css
@@ -0,0 +1,64 @@
+.navigation-links-nav {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.navigation-links-text1 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+}
+.navigation-links-link {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+  text-decoration: none;
+}
+.navigation-links-link1 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+  text-decoration: none;
+}
+.navigation-links-text2 {
+  font-style: normal;
+  font-weight: 500;
+  margin-left: var(--dl-space-space-twounits);
+}
+
+
+
+
+
+
+
+
+
+@media(max-width: 767px) {
+  .navigation-links-nav {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .navigation-links-text1 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navigation-links-link {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navigation-links-link1 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+  .navigation-links-text2 {
+    margin-left: 0;
+    margin-bottom: var(--dl-space-space-unit);
+  }
+}
+@media(max-width: 479px) {
+  .navigation-links-root-class-name11 {
+    margin-left: var(--dl-space-space-unit);
+  }
+}
diff --git a/components/navigation-links.html b/components/navigation-links.html
new file mode 100644
index 0000000..17e7789
--- /dev/null
+++ b/components/navigation-links.html
@@ -0,0 +1,24 @@
+<div>
+  <link href="./navigation-links.css" rel="stylesheet" />
+  <nav class="navigation-links-nav">
+    <span class="nav-link"><span>About</span></span>
+    <span class="navigation-links-text1 nav-link"><span>Features</span></span>
+    <a
+      href="https://blisslabs.org"
+      target="_blank"
+      rel="noreferrer noopener"
+      class="navigation-links-link nav-link"
+    >
+      <span>BlissLabs</span>
+    </a>
+    <a
+      href="https://blissroms.org/team.html"
+      target="_blank"
+      rel="noreferrer noopener"
+      class="navigation-links-link1 nav-link"
+    >
+      <span>Team</span>
+    </a>
+    <span class="navigation-links-text2 nav-link"><span>Blog</span></span>
+  </nav>
+</div>
diff --git a/components/stats.css b/components/stats.css
new file mode 100644
index 0000000..3905146
--- /dev/null
+++ b/components/stats.css
@@ -0,0 +1,132 @@
+.stats-stats {
+  gap: 24px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+  align-self: center;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+.stats-maintainer {
+  flex: 0 0 auto;
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding-top: 32px;
+  padding-left: 48px;
+  border-radius: 16px;
+  padding-right: 48px;
+  flex-direction: column;
+  padding-bottom: 32px;
+}
+.stats-image {
+  width: 56px;
+  object-fit: cover;
+}
+.stats-text {
+  color: #301BB8;
+  font-size: 24px;
+}
+.stats-text1 {
+  margin-top: var(--dl-space-space-halfunit);
+  margin-bottom: var(--dl-space-space-halfunit);
+}
+.stats-text2 {
+  color: #1E0E87;
+  font-size: 3em;
+  margin-top: var(--dl-space-space-halfunit);
+}
+.stats-downloads {
+  flex: 0 0 auto;
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding-top: 32px;
+  padding-left: 48px;
+  border-radius: 16px;
+  padding-right: 48px;
+  flex-direction: column;
+  padding-bottom: 32px;
+}
+.stats-image1 {
+  width: 56px;
+  object-fit: cover;
+}
+.stats-text3 {
+  color: #1B57B8;
+  font-size: 24px;
+}
+.stats-text4 {
+  margin-top: var(--dl-space-space-halfunit);
+  margin-bottom: var(--dl-space-space-halfunit);
+}
+.stats-text5 {
+  color: #0E3C87;
+  font-size: 3em;
+  margin-top: var(--dl-space-space-halfunit);
+}
+.stats-devices {
+  flex: 0 0 auto;
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding-top: 32px;
+  padding-left: 48px;
+  border-radius: 16px;
+  padding-right: 48px;
+  flex-direction: column;
+  padding-bottom: 32px;
+}
+.stats-image2 {
+  width: 56px;
+  object-fit: cover;
+}
+.stats-text6 {
+  color: #3FB81B;
+  font-size: 24px;
+}
+.stats-text7 {
+  margin-top: var(--dl-space-space-halfunit);
+  margin-bottom: var(--dl-space-space-halfunit);
+}
+.stats-text8 {
+  color: #004C41;
+  font-size: 3em;
+  margin-top: var(--dl-space-space-halfunit);
+}
+@media(max-width: 767px) {
+  .stats-stats {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  .stats-maintainer {
+    padding-top: var(--dl-space-space-oneandhalfunits);
+    padding-left: var(--dl-space-space-oneandhalfunits);
+    padding-bottom: var(--dl-space-space-oneandhalfunits);
+  }
+  .stats-downloads {
+    padding-top: var(--dl-space-space-oneandhalfunits);
+    padding-left: var(--dl-space-space-oneandhalfunits);
+    padding-bottom: var(--dl-space-space-oneandhalfunits);
+  }
+  .stats-devices {
+    padding-top: var(--dl-space-space-oneandhalfunits);
+    padding-left: var(--dl-space-space-oneandhalfunits);
+    padding-bottom: var(--dl-space-space-oneandhalfunits);
+  }
+}
+@media(max-width: 479px) {
+  .stats-stats {
+    width: auto;
+    align-self: center;
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
diff --git a/components/stats.html b/components/stats.html
new file mode 100644
index 0000000..65666b2
--- /dev/null
+++ b/components/stats.html
@@ -0,0 +1,35 @@
+<div>
+  <link href="./stats.css" rel="stylesheet" />
+  <div class="stats-stats">
+    <div class="stats-maintainer">
+      <img
+        alt="image"
+        src="public/playground_assets/groups_black_24dp.svg"
+        class="stats-image"
+      />
+      <h1 class="stats-text"><span>Maintainer</span></h1>
+      <span class="stats-text1"><span>Total no of maintainers</span></span>
+      <h1 class="stats-text2"><span>35</span></h1>
+    </div>
+    <div class="stats-downloads">
+      <img
+        alt="image"
+        src="public/playground_assets/file_download_black_24dp.svg"
+        class="stats-image1"
+      />
+      <h1 class="stats-text3"><span>Downloads</span></h1>
+      <span class="stats-text4"><span>Total no of downloads</span></span>
+      <h1 class="stats-text5"><span>20M+</span></h1>
+    </div>
+    <div class="stats-devices">
+      <img
+        alt="image"
+        src="public/playground_assets/devices_black_24dp.svg"
+        class="stats-image2"
+      />
+      <h1 class="stats-text6"><span>Devices</span></h1>
+      <span class="stats-text7"><span>Total no of devices</span></span>
+      <h1 class="stats-text8"><span>35</span></h1>
+    </div>
+  </div>
+</div>