diff --git a/assets/extera.svg b/assets/extera.svg
new file mode 100644
index 0000000..67218ea
--- /dev/null
+++ b/assets/extera.svg
@@ -0,0 +1 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.82 81.78"><defs><linearGradient id="a" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#406FBF"/><stop offset="100%" stop-color="#23509D"/></linearGradient></defs><path fill-rule="evenodd" d="M70.82 44.98v16.36l-17.7 10.22-17.71 10.22-2.59-1.5L0 61.34V20.45l17.7-10.23L35.41 0l28.33 16.36 4.49 2.59 2.59 1.5v8.17L35.41 49.07l-7.08-4.09V36.8l21.25-12.27-14.17-8.17-21.25 12.26v24.54l21.25 12.26.03.02.02-.05z" style="fill:url(#a)"/></svg>
\ No newline at end of file
diff --git a/assets/favicon.png b/assets/favicon.png
new file mode 100644
index 0000000..6c16520
Binary files /dev/null and b/assets/favicon.png differ
diff --git a/assets/preview-dark.png b/assets/preview-dark.png
new file mode 100644
index 0000000..40bc846
Binary files /dev/null and b/assets/preview-dark.png differ
diff --git a/assets/preview-light.png b/assets/preview-light.png
new file mode 100644
index 0000000..47ab3d5
Binary files /dev/null and b/assets/preview-light.png differ
diff --git a/assets/preview-monet-dark.png b/assets/preview-monet-dark.png
new file mode 100644
index 0000000..556413a
Binary files /dev/null and b/assets/preview-monet-dark.png differ
diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..faa4f1b
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,340 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+:root {
+
+  /* background color | --bg-[background type]: value */
+  --bg-surface: #FFFFFF;
+  --bg-surface-transparent: #FFFFFF00;
+  --bg-surface-low: #F6F6F6;
+  --bg-surface-low-transparent: #F6F6F600;
+  --bg-surface-hover: rgba(0, 0, 0, 3%);
+  --bg-surface-active: rgba(0, 0, 0, 5%);
+  --bg-surface-border: rgba(0, 0, 0, 6%);
+
+  --bg-primary: rgb(83, 110, 234);
+  --bg-primary-hover: rgba(83, 110, 234, 80%);
+  --bg-primary-active: rgba(83, 110, 234, 70%);
+  --bg-primary-border: rgba(83, 110, 234, 38%);
+
+  --bg-positive: rgb(69, 184, 59);
+  --bg-positive-hover: rgba(69, 184, 59, 8%);
+  --bg-positive-active: rgba(69, 184, 59, 15%);
+  --bg-positive-border: rgba(69, 184, 59, 40%);
+  
+  --bg-caution: rgb(255, 179, 0);
+  --bg-caution-hover: rgba(255, 179, 0, 8%);
+  --bg-caution-active: rgba(255, 179, 0, 15%);
+  --bg-caution-border: rgba(255, 179, 0, 40%);
+
+  --bg-danger: rgb(240, 71, 71);
+  --bg-danger-hover: rgba(240, 71, 71, 5%);
+  --bg-danger-active: rgba(240, 71, 71, 10%);
+  --bg-danger-border: rgba(240, 71, 71, 20%);
+
+  --bg-tooltip: #353535;
+  --bg-badge: #989898;
+
+  /* text color | --tc-[background type]-[priority]: value */
+  --tc-surface-high: #000000;
+  --tc-surface-normal: rgba(0, 0, 0, 68%);
+  --tc-surface-normal-low: rgba(0, 0, 0, 60%);
+  --tc-surface-low: rgba(0, 0, 0, 38%);
+  
+  --tc-primary-high: #ffffff;
+  --tc-primary-normal: rgba(255, 255, 255, 68%);
+  --tc-primary-low: rgba(255, 255, 255, 40%);
+  
+  --tc-positive-high: var(--bg-positive);
+  --tc-positive-normal: rgb(69, 184, 59, 80%);
+  --tc-positive-low: rgb(69, 184, 59, 60%);
+
+  --tc-caution-high: var(--bg-caution);
+  --tc-caution-normal: rgb(255, 179, 0, 80%);
+  --tc-caution-low: rgb(255, 179, 0, 60%);
+  
+  --tc-danger-high: var(--bg-danger);
+  --tc-danger-normal: rgba(240, 71, 71, 88%);
+  --tc-danger-low: rgba(240, 71, 71, 60%);
+
+  --tc-code: #e62498;
+  --tc-link: hsl(213deg 76% 56%);
+  --tc-tooltip: white;
+  --tc-badge: white;
+
+
+  /* system icons | --ic-[background type]-[priority]: value */
+  --ic-surface-normal: #626262;
+  --ic-primary-normal: #ffffff;
+  --ic-positive-normal: rgba(69, 184, 59, 80%);
+  --ic-caution-normal: rgba(255, 179, 0, 80%);
+  --ic-danger-normal: rgba(240, 71, 71, 0.7);
+
+
+  /* system icon size | -ic-[size]: value */
+  --ic-large: 38px;
+  --ic-normal: 24px;
+  --ic-small: 20px;
+  --ic-extra-small: 18px;
+
+  /* avatar size */
+  --av-large: 80px;
+  --av-normal: 42px;
+  --av-small: 36px;
+  --av-extra-small: 24px;
+
+
+  /* shadow and overlay */
+  --bg-overlay: rgba(0, 0, 0, 20%);
+
+  --bs-popup: 0 0 16px rgba(0, 0, 0, 10%);
+
+  --bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
+  --bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
+
+  --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
+  --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
+
+  --bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
+  --bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
+
+  --bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
+  --bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
+
+  --bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
+  --bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
+
+
+  /* border */
+  --bo-radius: 8px;
+
+
+  /* font syles */
+  --fs-h1: 36px;
+  --ls-h1: -1.5px;
+  --lh-h1: 38px;
+
+  --fs-h2: 24px;
+  --ls-h2: -0.5px;
+  --lh-h2: 30px;
+
+  --fs-s1: 18px;
+  --ls-s1: -0.2px;
+  --lh-s1: 24px;
+
+  --fs-b1: 16px;
+  --ls-b1: 0.1px;
+  --lh-b1: 24px;
+
+  --fs-b2: 14px;
+  --ls-b2: 0.2px;
+  --lh-b2: 20px;
+
+  --fs-b3: 12px;
+  --ls-b3: 0px;
+  --lh-b3: 16px;
+
+
+  /* spacing | --sp-[space]: value */
+  --sp-none: 0px;
+  --sp-ultra-tight: 4px;
+  --sp-extra-tight: 8px;
+  --sp-tight: 12px;
+  --sp-normal: 16px;
+  --sp-loose: 20px;
+  --sp-extra-loose: 32px;
+
+
+  /* other */
+  --border-width: 1px;
+
+  --font-family: 'Roboto', 'Supreme', sans-serif;
+}
+
+.silver-theme {
+  /* background color | --bg-[background type]: value */
+  --bg-surface: hsl(0, 0%, 95%);
+  --bg-surface-transparent: hsla(0, 0%, 95%, 0);
+  --bg-surface-low: hsl(0, 0%, 91%);
+  --bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
+}
+
+.dark-theme,
+.monet-dark-theme {
+  /* background color | --bg-[background type]: value */
+  --bg-surface: hsl(208, 8%, 20%);
+  --bg-surface-transparent: hsla(208, 8%, 20%, 0);
+  --bg-surface-low: hsl(208, 8%, 16%);
+  --bg-surface-low-transparent: hsla(208, 8%, 16%, 0);
+  --bg-surface-hover: rgba(255, 255, 255, 3%);
+  --bg-surface-active: rgba(255, 255, 255, 5%);
+  --bg-surface-border: rgba(0, 0, 0, 20%);
+
+  --bg-primary: rgb(42, 98, 166);
+  --bg-primary-hover: rgba(42, 98, 166, 80%);
+  --bg-primary-active: rgba(42, 98, 166, 70%);
+  --bg-primary-border: rgba(42, 98, 166, 38%);
+
+  --bg-tooltip: #000;
+  --bg-badge: hsl(0, 0%, 75%);
+
+  /* text color | --tc-[background type]-[priority]: value */
+  --tc-surface-high: rgba(255, 255, 255, 98%);
+  --tc-surface-normal: rgba(255, 255, 255, 84%);
+  --tc-surface-normal-low: rgba(255, 255, 255, 60%);
+  --tc-surface-low: rgba(255, 255, 255, 48%);
+  
+  --tc-primary-high: #ffffff;
+  --tc-primary-normal: rgba(255, 255, 255, 0.68);
+  --tc-primary-low: rgba(255, 255, 255, 0.4);
+
+  --tc-code: #e565b1;
+  --tc-link: hsl(213deg 94% 73%);
+  --tc-badge: black;
+
+  /* system icons | --ic-[background type]-[priority]: value */
+  --ic-surface-normal: rgba(255, 255, 255, 68%);
+  --ic-primary-normal: #ffffff;
+  
+  /* shadow and overlay */
+  --bg-overlay: rgba(0, 0, 0, 50%);
+
+  --bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
+
+  --bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
+  --bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
+
+  --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
+  --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
+
+  --font-family: 'Supreme', 'Roboto', sans-serif;
+}
+
+.butter-theme {
+  /* background color | --bg-[background type]: value */
+  --bg-surface: hsl(64, 6%, 14%);
+  --bg-surface-transparent: hsla(64, 6%, 14%, 0);
+  --bg-surface-low: hsl(64, 6%, 10%);
+  --bg-surface-low-transparent: hsla(64, 6%, 14%, 0);
+
+  --bg-badge: #c4c1ab;
+
+  
+  /* text color | --tc-[background type]-[priority]: value */
+  --tc-surface-high: rgb(255, 251, 222, 94%);
+  --tc-surface-normal: rgba(255, 251, 222, 74%);
+  --tc-surface-normal-low: rgba(255, 251, 222, 60%); 
+  --tc-surface-low: rgba(255, 251, 222, 38%);
+
+
+  /* system icons | --ic-[background type]-[priority]: value */
+  --ic-surface-normal: rgb(255 251 222 / 68%);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family);
+  font-size: 16px;
+  background-color: var(--bg-surface);
+  scroll-behavior: smooth;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
+}
+a {
+  color: var(--tc-link);
+  text-decoration: none;
+}
+b {
+  font-weight: 500;
+}
+label {
+  margin: 0;
+  padding: 0;
+}
+button,
+textarea {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  border: none;
+}
+button {
+  max-width: 100%;
+  text-transform: none;
+  text-align: inherit;
+  overflow: visible;
+  -webkit-appearance: button;
+}
+textarea {
+  color: inherit;
+  word-spacing: inherit;
+}
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+.text-h1,
+.text-h2,
+.text-s1,
+.text-b1,
+.text-b2,
+.text-b3 {
+  margin: 0;
+  padding: 0;
+  color: var(--tc-surface-high);
+}
+
+.text-h1 {
+  font-size: var(--fs-h1);
+  font-weight: 500;
+  letter-spacing: var(--ls-h1);
+  line-height: var(--lh-h1);
+}
+.text-h2 {
+  font-size: var(--fs-h2);
+  font-weight: 500;
+  letter-spacing: var(--ls-h2);
+  line-height: var(--lh-h2);
+}
+.text-s1 {
+  font-size: var(--fs-s1);
+  font-weight: 400;
+  letter-spacing: var(--ls-s1);
+  line-height: var(--lh-s1);
+}
+.text-b1 {
+  color: var(--tc-surface-normal);
+  font-size: var(--fs-b1);
+  font-weight: 400;
+  letter-spacing: var(--ls-b1);
+  line-height: var(--lh-b1);
+}
+.text-b2 {
+  color: var(--tc-surface-normal);
+  font-size: var(--fs-b2);
+  font-weight: 400;
+  letter-spacing: var(--ls-b2);
+  line-height: var(--lh-b2);
+}
+.text-b3 {
+  color: var(--tc-surface-low);
+  font-size: var(--fs-b3);
+  font-weight: 400;
+  letter-spacing: var(--ls-b3);
+  line-height: var(--lh-b3);
+}
\ No newline at end of file
diff --git a/css/components.css b/css/components.css
new file mode 100644
index 0000000..a95c605
--- /dev/null
+++ b/css/components.css
@@ -0,0 +1,71 @@
+
+/* --- branding --- */
+.branding-container {
+    display: flex;
+    align-items: center;
+  
+    padding: var(--sp-normal);
+  }
+  
+  .branding-container img {
+    width: 28px;
+    height: 28px;
+  }
+  .branding-container > div {
+    display: flex;
+    align-items: baseline;
+  }
+  .branding-container > div .text-h2 {
+    margin: 0 var(--sp-normal);
+  }
+  .branding-container > div .text-s1 {
+    padding-left: var(--sp-normal);
+    border-left: 1px solid var(--bg-surface-border);
+  }
+  
+  /* --- grid --- */
+  .base-grid-12 {
+    display: grid;
+    grid-column-gap: var(--sp-loose);
+    grid-template-columns: repeat(12, 1fr);
+  }
+  
+  /* --- button --- */
+  
+  a.btn-primary,
+  a.btn-surface {
+    display: inline-block;
+  }
+  .btn-primary,
+  .btn-surface {
+    padding: var(--sp-extra-tight) var(--sp-normal);
+    border-radius: var(--bo-radius);
+    cursor: pointer;
+  }
+  .btn-large {
+    padding: var(--sp-tight) calc(var(--sp-loose) + var(--sp-ultra-tight));
+  }
+  
+  .btn-primary {
+    background-color: var(--bg-primary);
+  }
+  .btn-surface {
+    box-shadow: var(--bs-surface-border);
+  }
+  .btn-primary [class^="text"] {
+    color: var(--tc-primary-high)
+  }
+  .btn-primary:active {
+    background-color: var(--bg-primary-active);
+  }
+  .btn-surface:active {
+    background-color: var(--bg-surface-active);
+  }
+  @media(hover: hover) {
+    .btn-primary:hover {
+      background-color: var(--bg-primary-hover);
+    }
+    .btn-surface:hover {
+      background-color: var(--bg-surface-hover);
+    }
+  }
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..8bd8f96
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,521 @@
+@import url(./base.css);
+@import url(./scrollbar.css);
+@import url(./components.css);
+
+:root {
+    --section-max-width: 1274px;
+    --navbar-height: 61.6px;
+    --section-side-padding: 60px;
+
+    --preview-width: 1920px;
+    --preview-height: 1080px;
+}
+
+#root section>.base-grid-12 {
+    margin: auto;
+    padding: 0 var(--section-side-padding);
+    max-width: var(--section-max-width);
+}
+
+
+.nav {
+    width: 100%;
+    background-color: var(--bg-surface);
+    border-bottom: 1px solid var(--bg-surface-border);
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+}
+
+.nav__base {
+    max-width: var(--section-max-width);
+    margin: auto;
+    display: flex;
+}
+
+.nav__options {
+    flex: 1;
+    min-width: 0;
+
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: var(--sp-normal);
+}
+
+
+/* -- hero -- */
+.hero {
+    padding-top: var(--navbar-height);
+    position: relative;
+    overflow: hidden;
+}
+
+.hero>.base-grid-12 {
+    grid-template-rows: repeat(2, auto);
+}
+
+.hero__preview {
+    grid-column-start: 7;
+    grid-row: 1 / 3;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.hero__preview__container {
+    position: absolute;
+}
+
+.hero__preview__container>img {
+    width: calc(var(--preview-width) / 1.8);
+    height: calc(var(--preview-height) / 1.8);
+
+    border-radius: var(--bo-radius);
+    box-shadow: var(--bs-popup);
+}
+
+.hero__preview__container>.text-b3 {
+    margin-top: var(--sp-extra-tight);
+}
+
+
+.hero__info {
+    grid-column: 1 / 5;
+    height: 100%;
+}
+
+.hero__intro {
+    margin-top: calc(4 * var(--sp-extra-loose));
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.hero__intro>p {
+    margin: var(--sp-extra-loose) 0;
+}
+
+.hero__intro__btns>[class^=btn] {
+    margin-top: var(--sp-normal);
+    margin-right: var(--sp-normal);
+}
+
+.themes {
+    margin-top: calc(6 * var(--sp-extra-loose));
+    margin-bottom: var(--sp-extra-loose);
+}
+
+.themes .text-b3 {
+    margin: var(--sp-extra-tight) 0;
+}
+
+.themes__btn {
+    display: flex;
+}
+
+.themes__btn>.theme-btn {
+    margin-right: var(--sp-extra-tight);
+}
+
+.theme-btn {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+
+    position: relative;
+    overflow: hidden;
+    border: 1px solid var(--bg-surface-border);
+    cursor: pointer;
+    transition: border-radius 200ms ease-in-out;
+}
+
+.theme-btn--active {
+    border-radius: var(--bo-radius);
+}
+
+.theme-btn::before {
+    content: '';
+    display: inline-block;
+    width: 35%;
+    height: 100%;
+    background-color: var(--bg-surface-low);
+}
+
+@media (hover: hover) {
+    .theme-btn:hover {
+        box-shadow: var(--bs-primary-outline);
+    }
+}
+
+.theme-btn--light {
+    background-color: #ffffff;
+}
+
+.theme-btn--light::before {
+    background-color: #f6f6f6;
+}
+
+.theme-btn--silver {
+    background-color: hsl(0, 0%, 95%);
+}
+
+.theme-btn--silver::before {
+    background-color: hsl(0, 0%, 91%);
+}
+
+.theme-btn--dark {
+    background-color: hsl(208, 8%, 20%);
+}
+
+.theme-btn--dark::before {
+    background-color: hsl(208, 8%, 16%);
+}
+
+.theme-btn--monet-dark {
+    background-color: #161c24;
+}
+
+.theme-btn--monet-dark::before {
+    background-color: #161c24;
+}
+
+.theme-btn--butter {
+    background-color: hsl(64, 6%, 14%);
+}
+
+.theme-btn--butter::before {
+    background-color: hsl(64, 6%, 10%);
+}
+
+
+/* -- features --- */
+.features {
+    background-color: var(--bg-surface-low);
+    border: 1px solid var(--bg-surface-border);
+    border-width: 1px 0 1px 0;
+
+    background-image: radial-gradient(var(--bg-surface-border) 2px, transparent 2px);
+    background-size: 48px 48px;
+}
+
+.features__info {
+    grid-column: 1 / 5;
+
+    margin-top: 100px;
+    margin-bottom: var(--sp-extra-loose);
+}
+
+.features__info>.text-b1 {
+    margin-top: var(--sp-extra-loose);
+    background-color: var(--bg-surface-low);
+}
+
+.features__list {
+    --feat-left-space: calc((100% - var(--section-max-width)) / 2 + var(--section-side-padding));
+    padding-bottom: var(--sp-extra-loose);
+}
+
+@media screen and (max-width: 1274px) {
+    .features__list {
+        --feat-left-space: var(--section-side-padding);
+    }
+}
+
+.features__list>.scrollbar {
+    padding: var(--sp-extra-loose) var(--feat-left-space);
+    margin-bottom: var(--sp-extra-loose);
+}
+
+.feature__cards {
+    display: flex;
+}
+
+.feat-card {
+    min-width: 300px;
+    width: 300px;
+    margin-right: var(--sp-loose);
+    padding: var(--sp-normal);
+    background-color: var(--bg-surface);
+    border-radius: var(--bo-radius);
+    /* border: 1px solid var(--bg-surface-border) */
+    box-shadow: 0 3px 8px rgb(0 0 0 / 10%);
+}
+
+.feat-card__preview {
+    height: 160px;
+    margin-bottom: var(--sp-extra-loose);
+    outline: 1px solid var(--bg-surface-border);
+    overflow: hidden;
+
+    position: relative;
+}
+
+.feat-card__preview>img {
+    --preview-scale: 1.8;
+    width: calc(var(--preview-width) / var(--preview-scale));
+    height: calc(var(--preview-height) / var(--preview-scale));
+    box-shadow: var(--bs-popup);
+    border-radius: var(--bo-radius);
+    transform-origin: left top;
+}
+
+.feat-card:nth-child(3n + 1) .feat-card__preview {
+    background-color: #b6fa8c46;
+}
+
+.feat-card:nth-child(3n + 2) .feat-card__preview {
+    background-color: #77eeee3d;
+}
+
+.feat-card:nth-child(3n + 3) .feat-card__preview {
+    background-color: #d07ef133;
+}
+
+.feat-card__info .text-b1 {
+    margin: var(--sp-loose) 0;
+}
+
+/* -- about -- */
+.about {
+    padding: calc(4.5 * var(--sp-extra-loose)) 0;
+}
+
+.about>.base-grid-12 {
+    display: block;
+}
+
+.about__info {
+    max-width: 412px;
+    width: 100%;
+    margin: auto;
+    text-align: center;
+}
+
+.about__info img {
+    width: 78px;
+    height: 78px;
+}
+
+.about__info>.text-h1 {
+    margin: var(--sp-extra-loose) 0;
+}
+
+.about__info__btns {
+    margin-top: var(--sp-extra-loose);
+    display: inline-flex;
+    flex-direction: column;
+}
+
+/* support */
+.support {
+    padding: 100px 0 50px;
+    background-color: var(--bg-surface-low);
+    border-top: 1px solid var(--bg-surface-border);
+
+    background-image: radial-gradient(var(--bg-surface-border) 2px, transparent 2px);
+    background-size: 48px 48px;
+}
+
+.support__info {
+    grid-column: 1 / 5;
+    padding-bottom: 50px;
+}
+
+.support__info>.text-b1 {
+    margin: var(--sp-extra-loose) 0 var(--sp-extra-tight);
+}
+
+.support__info .btn-large {
+    margin-top: var(--sp-tight);
+    margin-right: var(--sp-tight);
+}
+
+.support__list {
+    grid-column: 7 / 13;
+}
+
+.support__container {
+    padding: var(--sp-loose) 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.support__label {
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+.support__container a {
+    margin: 0 var(--sp-normal) var(--sp-normal) 0;
+}
+
+.support__container .supporterProfile {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--bo-radius);
+    background-color: var(--bg-positive-active);
+    text-transform: uppercase;
+    font-weight: 500;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* footer */
+.footer {
+    background-color: black;
+    padding: var(--sp-loose) 0;
+}
+
+.footer .base-grid-12 {
+    display: block;
+}
+
+.footer__branding {
+    grid-column: 1 / 13;
+
+    display: flex;
+    align-items: center;
+}
+
+.footer__branding .branding-container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.footer__branding .branding-container img {
+    display: none;
+}
+
+.footer__branding .branding-container [class^="text"] {
+    color: white;
+    margin-left: 0;
+}
+
+.footer__branding .branding-container .text-s1 {
+    border-left-color: hsla(0, 0%, 100%, 20%);
+    color: hsla(0, 0%, 100%, 90%)
+}
+
+.footer__branding__options {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.footer__menu {
+    margin-top: var(--sp-normal);
+    max-width: 300px;
+    width: 100%;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.footer__menu-container {
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--sp-normal);
+    padding-right: var(--sp-normal);
+}
+
+.footer__menu-container .text-b3 {
+    color: white;
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
+.footer__menu-container>* {
+    margin-bottom: var(--sp-tight);
+}
+
+.footer__menu-container a {
+    color: hsla(0, 0%, 100%, 68%);
+    cursor: pointer;
+}
+
+.footer__creator {
+    margin-top: var(--sp-extra-loose);
+    color: hsla(0, 0%, 100%, 38%);
+}
+
+.footer__creator a {
+    color: rgb(140, 147, 184);
+}
+
+/* -- tablet view -- */
+
+@media screen and (max-width: 1112px) {
+
+    .hero>.base-grid-12,
+    .features>.base-grid-12,
+    .support>.base-grid-12 {
+        display: block;
+    }
+
+    .hero__preview__container {
+        position: relative;
+        margin: calc(2 * var(--sp-extra-loose)) 0;
+    }
+
+    .hero__preview__container>img {
+        width: calc(var(--preview-width) / 2.5);
+        height: calc(var(--preview-height) / 2.5);
+    }
+
+    .hero__info,
+    .features__info,
+    .support__info {
+        max-width: 412px;
+    }
+
+    .hero__intro {
+        margin-top: calc(2 * var(--sp-extra-loose));
+    }
+
+    .hero__info .themes {
+        margin-top: 0;
+    }
+}
+
+/* -- mobile view -- */
+@media screen and (max-width: 586px) {
+    :root {
+        --section-side-padding: var(--sp-loose);
+        --navbar-height: 86.6px;
+    }
+
+    .branding-container>div {
+        display: block;
+    }
+
+    .branding-container>div .text-s1 {
+        border-left: none;
+    }
+
+    .hero__preview__container>img {
+        width: calc(var(--preview-width) / 4);
+        height: calc(var(--preview-height) / 4);
+    }
+
+    .footer__branding .branding-container .text-s1 {
+        padding: 0;
+    }
+}
+
+@media screen and (max-width: 398px) {
+    :root {
+        --navbar-height: 61.6px;
+    }
+
+    .branding-container>div .text-s1 {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/css/scrollbar.css b/css/scrollbar.css
new file mode 100644
index 0000000..c139cfb
--- /dev/null
+++ b/css/scrollbar.css
@@ -0,0 +1,65 @@
+.scrollbar {
+    /* firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--bg-surface-hover) transparent;
+    overflow: hidden;
+
+}
+
+.scrollbar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--bg-surface-hover);
+}
+
+.scrollbar:hover::-webkit-scrollbar-thumb {
+    background-color: var(--bg-surface-hover);
+}
+
+
+.scrollbar__h {
+    overflow-x: scroll;
+}
+
+.scrollbar__v {
+    overflow-y: scroll;
+}
+
+
+
+
+.scrollbar--auto-hide {
+    /* firefox */
+    scrollbar-color: transparent transparent;
+}
+
+.scrollbar--auto-hide::-webkit-scrollbar-thumb {
+    background-color: transparent;
+}
+
+.scrollbar--auto-hide:hover {
+    scrollbar-color: var(--bg-surface-hover) transparent;
+}
+
+
+
+/* invisible scrollbar but contain will scroll */
+.scrollbar--invisible {
+    /* firefox */
+    scrollbar-color: transparent transparent;
+}
+
+.scrollbar--invisible::-webkit-scrollbar-thumb {
+    background-color: transparent;
+}
+
+.scrollbar--invisible:hover::-webkit-scrollbar-thumb {
+    background-color: transparent;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..94234df
--- /dev/null
+++ b/index.html
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="css/index.css">
+
+    <link rel="icon" type="image/png" sizes="48x48" href="assets/favicon.png">
+
+    <title>Extera Project</title>
+    <meta name="name" content="Extera">
+    <meta name="author" content="OfficialDakari">
+    <meta name="description" content="A Matrix client with new cool features based on Cinny.">
+    <meta name="keywords" content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element, extera">
+
+    <meta property="og:title" content="Extera">
+    <meta property="og:url" content="https://extera.xyz">
+    <meta property="og:image" content="https://extera.xyz/assets/favicon-48x48.png">
+    <meta property="og:description" content="A Matrix client with new cool features based on Cinny.">
+</head>
+
+<body>
+    <div id="root">
+        <nav class="nav">
+            <div class="nav__base">
+                <div class="branding-container">
+                    <img src="assets/extera.svg" alt="Cinny logo">
+                    <div>
+                        <h2 class="text-h2">Extera</h2>
+                        <p class="text-s1">A new Matrix client</p>
+                    </div>
+                </div>
+                <div class="nav__options">
+                    <a class="btn-primary" href="https://app.extera.xyz">
+                        <span class="text-b1">Try it</span>
+                    </a>
+                </div>
+            </div>
+        </nav>
+        <section class="hero">
+            <div class="base-grid-12">
+                <div class="hero__info">
+                    <div class="hero__intro">
+                        <h1 class="text-h1">Imagine a <a href="https://matrix.org" target="_blank">Matrix</a> client...
+                        </h1>
+                        <p class="text-b1">Where you can enjoy conversation in Material-designed UI via protocol
+                            protected by power of the open-source.</p>
+                        <div class="hero__intro__btns">
+                            <a class="btn-primary btn-large"
+                                href="https://cloud.officialdakari.ru/index.php/apps/forms/s/arBS3eL4A8oDcHSnz7dgNQkf">
+                                <span class="text-s1">Register</span>
+                            </a>
+                            <a class="btn-secondary btn-large" href="https://app.extera.xyz">
+                                <span class="text-s1">Open Extera</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="hero__preview">
+                    <div class="hero__preview__container">
+                        <img id="previewImage" src="assets/preview-light.png" alt="Cinny preview image">
+                        <p class="text-b3">Preview from Firefox (desktop)</p>
+                    </div>
+                </div>
+
+                <div class="hero__info">
+                    <div class="themes">
+                        <h4 class="text-s1">Themes</h4>
+                        <p id="themeStatus" class="text-b3">Selected: light</p>
+                        <div class="themes__btn">
+                            <button onclick="changeTheme(this)" themeName=""
+                                class="theme-btn theme-btn--light theme-btn--active" />
+                            <button onclick="changeTheme(this)" themeName="dark-theme"
+                                class="theme-btn theme-btn--dark" />
+                            <button onclick="changeTheme(this)" themeName="monet-dark-theme"
+                                class="theme-btn theme-btn--monet-dark" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="features" class="features">
+            <div class="base-grid-12">
+                <div class="features__info">
+                    <h1 class="text-h1">Features</h1>
+                    <p class="text-b1">Below is the list of features we added.</p>
+                </div>
+            </div>
+            <div class="features__list">
+                <div class="scrollbar scrollbar__h scrollbar--auto-hide">
+                    <div class="feature__cards">
+
+                        <div class="feat-card">
+                            <div class="feat-card__info">
+                                <h2 class="text-h2">Captions</h2>
+                                <p class="text-b1">Send captions with attachments in one message. Your group chat won't
+                                    think that you are schizophrenic when a caption is sent, but the meme is
+                                    still uploading.</p>
+                            </div>
+                        </div>
+
+                        <div class="feat-card">
+                            <div class="feat-card__info">
+                                <h2 class="text-h2">Presence status</h2>
+                                <p class="text-b1">Have full control over your presence status: from online status to
+                                    ghost mode.</p>
+                            </div>
+                        </div>
+
+                        <div class="feat-card">
+                            <div class="feat-card__info">
+                                <h2 class="text-h2">Rich profile</h2>
+                                <p class="text-b1">If modifying your display name and profile picture is not enough for
+                                    you, you can also set profile banner.</p>
+                            </div>
+                        </div>
+
+                        <div class="feat-card">
+                            <div class="feat-card__info">
+                                <h2 class="text-h2">Custom themes</h2>
+                                <p class="text-b1">Easily modify Extera's look by adding custom CSS themes. You can get
+                                    some themes <a href="https://matrix.to/#/#themes:extera.xyz">here</a>.</p>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="about" class="about">
+            <div class="base-grid-12">
+                <div class="about__info">
+                    <img src="assets/extera.svg" alt="Extera logo" />
+                    <h1 class="text-h1">Extera is open-source</h1>
+                    <p class="text-b1">Extera uses <a href="https://matrix.org" target="_blank">Matrix</a> as it's
+                        communication protocol
+                        — An open
+                        network for secure, decentralized
+                        communication. We have also made the source code of Extera open to everyone, so you can enhance,
+                        modify and
+                        inspect it.</p>
+
+                    <div class="about__info__btns">
+                        <a class="btn-surface btn-large" href="https://github.com/OfficialDakari/Extera"
+                            target="_blank">
+                            <span class="text-b1">Source code</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="sponsor" class="support">
+            <div class="base-grid-12">
+                <div class="support__info">
+                    <h1 class="text-h1">Financial contribution</h1>
+                    <p class="text-b1">Support this project by becoming a financial contributor.</p>
+                    <a class="btn-surface btn-large" href="https://officialdakari.ru/sponsor/" target="_blank">
+                        <span class="text-b1">Go to sponsor page</span>
+                    </a>
+                </div>
+                <div class="support__list">
+                    <p class="support__label text-b2">Organizations</p>
+                    <div id="supportOrg" class="support__container"></div>
+                    <p class="support__label text-b2">Individuals</p>
+                    <div id="supportInd" class="support__container">
+                        <ul>
+                            <li class="text-b1">konrad (@konrad:re128.org)</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="footer">
+            <div class="base-grid-12">
+                <div class="footer__branding">
+                    <div class="branding-container">
+                        <img src="assets/extera.svg" alt="Cinny logo">
+                        <div>
+                            <h2 class="text-h2">Extera</h2>
+                            <p class="text-s1">A new cool Matrix client</p>
+                        </div>
+                    </div>
+                    <div class="footer__branding__options">
+                        <a class="btn-primary" href="https://app.extera.xyz">
+                            <span class="text-b1">Get Started</span>
+                        </a>
+                    </div>
+                </div>
+
+                <div
+                    style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px;">
+                    <div class="footer__menu">
+                        <div class="footer__menu-container">
+                            <h4 class="text-b3">Menu</h4>
+                            <a href="/" class="text-b2">Home</a>
+                            <a href="#features" class="text-b2">Features</a>
+                            <a href="#about" class="text-b2">About</a>
+                            <a href="#sponsor" class="text-b2">Sponsor</a>
+                        </div>
+                        <div class="footer__menu-container">
+                            <h4 class="text-b3">Community</h4>
+                            <a class="text-b2" href="https://matrix.to/#/#extera:extera.xyz" target="_blank">Matrix
+                                (#extera:extera.xyz)</a>
+                            <a class="text-b2" href="https://matrix.to/#/#themes:extera.xyz" target="_blank">CSS
+                                (#themes:extera.xyz)</a>
+                            <!-- <a class="text-b2" rel="me" href="https://fosstodon.org/@cinnyapp" target="_blank">Mastodon</a> -->
+                        </div>
+                    </div>
+                </div>
+
+                <p class="footer__creator text-b3">Copyright © 2024 <a href="https://officialdakari.ru"
+                        target="_blank">OfficialDakari</a> • <a href="https://github.com/cinnyapp/cinny-site"
+                        target="_blank">Based
+                        on Cinny's website</a> • <a href="https://git.extera.xyz/OfficialDakari/ExteraWebsite">Source
+                        code</a></p>
+            </div>
+        </section>
+    </div>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..1ee6b74
--- /dev/null
+++ b/main.js
@@ -0,0 +1,37 @@
+function changeTheme(that) {
+    const themeName = that.getAttribute('themeName');
+    const previewImage = document.getElementById('previewImage');
+    const themeStatus = document.getElementById('themeStatus');
+
+    document.body.className = themeName;
+
+    that.parentElement.childNodes.forEach((child) => {
+        if (child.classList?.contains('theme-btn--active')) {
+            child.classList.remove('theme-btn--active');
+        }
+    });
+    that.classList.add('theme-btn--active');
+
+    let previewImgSrc = null;
+    switch (themeName) {
+        case 'dark-theme':
+            previewImage.src = 'assets/preview-dark.png';
+            themeStatus.textContent = 'Selected: Dark'
+            previewImgSrc = 'assets/preview-dark.png';
+            break;
+        case 'monet-dark-theme':
+            previewImage.src = 'assets/preview-monet-dark.png';
+            themeStatus.textContent = 'Selected: Monet Dark (Custom)'
+            previewImgSrc = 'assets/preview-monet-dark.png';
+            break;
+        default:
+            previewImage.src = 'assets/preview-light.png';
+            themeStatus.textContent = 'Selected: Light'
+            previewImgSrc = 'assets/preview-light.png';
+    }
+
+    const featImgs = document.getElementsByClassName('feat-img');
+    for (let featImg of featImgs) {
+        featImg.src = previewImgSrc;
+    }
+}
\ No newline at end of file