diff --git a/src/styles/FeaturesDiagonal.styles.css b/src/styles/FeaturesDiagonal.styles.css
new file mode 100644
index 0000000..b2e395b
--- /dev/null
+++ b/src/styles/FeaturesDiagonal.styles.css
@@ -0,0 +1,32 @@
+/* Top */
+
+.custom-shape-divider-bottom-1665696614 {
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  transform: rotate(180deg);
+}
+
+.custom-shape-divider-bottom-1665696614 svg {
+  position: relative;
+  display: block;
+  width: calc(100% + 1.3px);
+  height: 127px;
+  transform: rotateY(180deg);
+}
+
+/* Bottom */
+
+.custom-shape-divider-top-1665696661 {
+  overflow: hidden;
+  line-height: 0;
+}
+
+.custom-shape-divider-top-1665696661 svg {
+  position: relative;
+  display: block;
+  width: calc(100% + 1.3px);
+  height: 127px;
+  transform: rotateY(180deg);
+}
+
diff --git a/src/styles/Hero.styles.css b/src/styles/Hero.styles.css
new file mode 100644
index 0000000..aa87335
--- /dev/null
+++ b/src/styles/Hero.styles.css
@@ -0,0 +1,16 @@
+.custom-shape-divider-bottom-1665343298 {
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+}
+.custom-shape-divider-bottom-1665343298 svg {
+  position: relative;
+  display: block;
+  width: calc(100% + 1.3px);
+  height: 200px;
+}
+.hero-title-gradient {
+  background: -webkit-linear-gradient(white, #b4add1);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/src/styles/Navbar.styles.css b/src/styles/Navbar.styles.css
new file mode 100644
index 0000000..de2d69c
--- /dev/null
+++ b/src/styles/Navbar.styles.css
@@ -0,0 +1,3 @@
+.navbar-link {
+  @apply text-white lg:text-base text-2xl  leading-6 mr-4 ml-4   2xl:mr-6 2xl:ml-6 cursor-pointer font-normal lg:font-medium hover:scale-125 transition duration-300 h-full pt-2
+}
\ No newline at end of file
diff --git a/src/styles/Utils.styles.css b/src/styles/Utils.styles.css
new file mode 100644
index 0000000..dfca2be
--- /dev/null
+++ b/src/styles/Utils.styles.css
@@ -0,0 +1,66 @@
+/* Typography */
+
+.custom-block-title {
+  @apply text-white text-3xl font-bold tracking-normal;
+}
+.custom-block-big-title {
+  @apply text-white text-4xl xl:text-5xl font-bold tracking-normal;
+}
+.custom-block-subtitle {
+  @apply text-xs text-customSecondary  tracking-wider font-bold uppercase;
+}
+.custom-content-title {
+  @apply text-white text-lg font-bold tracking-normal;
+}
+.custom-content-text-white {
+  @apply text-white text-base leading-relaxed
+}
+.custom-content-text-gray {
+  @apply text-gray-400 text-base
+}
+
+/* Backgrounds */
+
+.custom-bg-dark1 {
+  @apply bg-customDarkBg1  fill-customDarkBg1
+}
+.custom-bg-dark2 {
+  @apply bg-customDarkBg2  fill-customDarkBg2
+}
+.custom-bg-dark3 {
+  @apply bg-customDarkBg3  fill-customDarkBg3
+}
+body, html {
+  @apply bg-customDarkBg2
+}
+
+/* Borders */
+
+.custom-border-gray {
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgb(255, 255, 255, 0.15);  
+}
+.custom-border-gray-darker {
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgb(255, 255, 255, 0.07);
+
+}
+.custom-border-gray-nobottom {
+  border-style: solid;
+  border-width: 1px 1px 0 1px;
+  border-color: rgb(255, 255, 255, 0.1);
+  border-radius: "10px";
+}
+
+/* Buttons */
+
+.custom-button-colored {
+ @apply rounded-lg font-bold bg-customPrimary text-white flex justify-center items-center hover:bg-[#7765e6] cursor-pointer transition
+}
+
+/* Preventing FOUC */
+@font-face {
+  font-display: var(--fontsource-Inter-font-display, optional);
+}
\ No newline at end of file