diff --git a/index.html b/index.html
index 222377e..33249f7 100644
--- a/index.html
+++ b/index.html
@@ -1,635 +1,828 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="MyriadFlow is an innovative platform to explore & launch NFT Experiences. Dive into the next generation of Utility NFTs through our Revolutionary App Store"
+    />
+    <meta
+      name="keywords"
+      content="buy matic from inr, buy bnb from inr, onramp in india, buy crypto from fiat, buy crypto from inr, buy crypto from rupee, crypto, 
+        crypto market cap, crypto prices,best crypto wallet, crypto currencies, crypto market, crypto trader, bitcoin, crypto site"
+    />
+    <meta
+      property="og:image"
+      content="./https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233"
+    />
+    <meta property="og:title" content="MyriadFlow" />
+    <meta property="og:url" content="https://www.myriadflow.com/" />
+    <meta
+      property="og:description"
+      content="MyriadFlow is an innovative platform to explore & launch NFT Experiences. Dive into the next generation of Utility NFTs through our Revolutionary App Store"
+    />
+    <meta
+      property="og:image"
+      itemprop="image"
+      content="./https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="en_GB" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+    <script
+      async
+      defer
+      data-website-id="e56d6cc6-9b0d-46db-b074-704f242dc50a"
+      src="https://umami.lazarus.network/umami.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+    />
+    <link
+      rel="shortcut icon"
+      href="./resources/readyimages/logo_meta.png"
+      type="image/x-icon"
+    />
+    <title>MyriadFlow</title>
+
+    <!-- Primary Meta Tags -->
+    <title>MyriadFlow</title>
+    <meta name="title" content="MyriadFlow" />
+    <meta
+      name="description"
+      content="MyriadFlow is an innovative platform to explore & launch NFT Experiences. Dive into the next generation of Utility NFTs through our Revolutionary App Store"
+    />
+    <meta
+      name="image"
+      content="./https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233"
+    />
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://myriadflow.com/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="MyriadFlow" />
+    <meta
+      property="og:description"
+      content="Innovative next-gen platform for exploring and launching NFT Xperiences with AI-powered brand ambassadors and no-code tools."
+    />
+    <meta
+      property="og:image"
+      content="https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233"
+    />
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="myriadflow.com" />
+    <meta property="twitter:url" content="https://myriadflow.com/" />
+    <meta name="twitter:title" content="MyriadFlow" />
+    <meta
+      name="twitter:description"
+      content="Innovative next-gen platform for exploring and launching NFT Xperiences with AI-powered brand ambassadors and no-code tools."
+    />
+    <meta
+      name="twitter:image"
+      content="https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233"
+    />
+
+    <!-- Meta Tags Generated with https://metatags.io -->
+
+    <script>
+      let slideIndex = 1;
+      showSlides(slideIndex);
+
+      // Next/previous controls
+      function plusSlides(n) {
+        showSlides((slideIndex += n));
+      }
+
+      function showSlides(n) {
+        let i;
+        let slides = document.getElementsByClassName("mySlides");
+        if (n > slides.length) {
+          slideIndex = 1;
+        }
+        if (n < 1) {
+          slideIndex = slides.length;
+        }
+        for (i = 0; i < slides.length; i++) {
+          slides[i].style.display = "none";
+        }
+        slides[slideIndex - 1].style.display = "block";
+      }
+    </script>
+
+    <style>
+      /* Add your CSS styles here */
+      .footer {
+        background: linear-gradient(to right, #30d8ff, #a32cc4, #c243fe);
+        color: white;
+        padding: 40px;
+      }
+
+      .footer .container {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        text-align: left;
+        flex-wrap: wrap;
+      }
+
+      .footer .brand img {
+        width: 200px;
+        height: auto;
+        margin-bottom: 20px;
+      }
+
+      .footer .brand p {
+        max-width: 300px;
+        font-size: 14px;
+        margin: 0 auto;
+      }
+
+      .footer .brand .copy {
+        margin-top: 20px;
+        font-size: 12px;
+      }
+
+      .footer .links,
+      .footer .platform {
+        margin: 20px 0;
+      }
+
+      .footer .links a,
+      .footer .platform a {
+        color: white;
+        display: block;
+        margin: 10px 0;
+        text-decoration: none;
+      }
+
+      .footer .links h3,
+      .footer .platform h3 {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 15px;
+      }
+
+      .footer .social-links {
+        display: flex;
+        justify-content: flex-start;
+        gap: 20px;
+        margin-top: 20px;
+      }
+
+      .footer .social-links .social-icon {
+        border: 2px solid #0e46a3;
+        background-color: #15063c;
+        border-radius: 50%;
+        padding: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .footer .social-links img {
+        width: 20px;
+        height: auto;
+      }
+      body,
+      html {
+        margin: 0; /* Remove default margin */
+        padding: 0; /* Remove default padding */
+        overflow-x: hidden; /* Prevent horizontal overflow */
+      }
+      @media (max-width: 768px) {
+        body,
+        html {
+          margin: 0; /* Remove default margin */
+          padding: 0; /* Remove default padding */
+          overflow-x: hidden; /* Prevent horizontal overflow */
+        }
+        .footer .container {
+          flex-direction: column;
+          /* align-items: center;
+    text-align: center; */
+        }
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="description"
-    content="MyriadFlow is an innovative platform to explore & launch NFT Experiences. Dive into the next generation of Utility NFTs through our Revolutionary App Store" />
-  <meta name="keywords"
-    content="buy matic from inr, buy bnb from inr, onramp in india, buy crypto from fiat, buy crypto from inr, buy crypto from rupee, crypto, 
-        crypto market cap, crypto prices,best crypto wallet, crypto currencies, crypto market, crypto trader, bitcoin, crypto site" />
-  <meta property="og:image" content="./https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233"/>
-  <meta property="og:title" content="MyriadFlow" />
-  <meta property="og:url" content="https://www.myriadflow.com/" />
-  <meta property="og:description"
-    content="MyriadFlow is an innovative platform to explore & launch NFT Experiences. Dive into the next generation of Utility NFTs through our Revolutionary App Store" />
-  <meta property="og:image" itemprop="image" content="./https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233" />
-  <meta property="og:type" content="website" />
-  <meta property="og:locale" content="en_GB" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="./styles.css" />
-  <script async defer data-website-id="e56d6cc6-9b0d-46db-b074-704f242dc50a"
-    src="https://umami.lazarus.network/umami.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
-  <link rel="shortcut icon" href="./resources/readyimages/logo_meta.png" type="image/x-icon" />
-  <title>MyriadFlow</title>
-
-
-  <!-- Primary Meta Tags -->
-<title>MyriadFlow</title>
-<meta name="title" content="MyriadFlow" />
-<meta name="description" content="MyriadFlow is an innovative platform to explore & launch NFT Experiences. Dive into the next generation of Utility NFTs through our Revolutionary App Store" />
-<meta name="image" content="./https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233" />
-
-  <!-- Facebook Meta Tags -->
-  <meta property="og:url" content="https://myriadflow.com/">
-  <meta property="og:type" content="website">
-  <meta property="og:title" content="MyriadFlow">
-  <meta property="og:description" content="Innovative next-gen platform for exploring and launching NFT Xperiences with AI-powered brand ambassadors and no-code tools.">
-  <meta property="og:image" content="https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233">
-
-  <!-- Twitter Meta Tags -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta property="twitter:domain" content="myriadflow.com">
-  <meta property="twitter:url" content="https://myriadflow.com/">
-  <meta name="twitter:title" content="MyriadFlow">
-  <meta name="twitter:description" content="Innovative next-gen platform for exploring and launching NFT Xperiences with AI-powered brand ambassadors and no-code tools.">
-  <meta name="twitter:image" content="https://opengraph.b-cdn.net/production/images/3f55f0cf-50cb-476f-b3f9-9994f867e84a.jpg?token=ujyykynFTqAgW36NnNygS6EeKfuIY5UbJgsjhA9g_Bg&height=694&width=1200&expires=33264933233">
-
-<!-- Meta Tags Generated with https://metatags.io -->
-
-  <script>
-    let slideIndex = 1;
-        showSlides(slideIndex);
-
-        // Next/previous controls
-        function plusSlides(n) {
-            showSlides(slideIndex += n);
+        .footer .brand img {
+          margin-bottom: 20px;
         }
 
-        function showSlides(n) {
-            let i;
-            let slides = document.getElementsByClassName("mySlides");
-            if (n > slides.length) { slideIndex = 1; }
-            if (n < 1) { slideIndex = slides.length; }
-            for (i = 0; i < slides.length; i++) {
-                slides[i].style.display = "none";
-            }
-            slides[slideIndex - 1].style.display = "block";
+        .footer .brand p,
+        .footer .links,
+        .footer .platform {
+          max-width: 100%;
         }
-</script>
-
-<style>
-  /* Add your CSS styles here */
-.footer {
-  background: linear-gradient(to right, #30D8FF, #A32CC4, #C243FE);
-  color: white;
-  padding: 40px ;
-}
-
-.footer .container {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-  text-align: left;
-  flex-wrap: wrap;
-}
-
-.footer .brand img {
-  width: 200px;
-  height: auto;
-  margin-bottom: 20px;
-}
-
-.footer .brand p {
-  max-width: 300px;
-  font-size: 14px;
-  margin: 0 auto;
-}
-
-.footer .brand .copy {
-  margin-top: 20px;
-  font-size: 12px;
-}
-
-.footer .links,
-.footer .platform {
-  margin: 20px 0;
-}
-
-.footer .links a,
-.footer .platform a {
-  color: white;
-  display: block;
-  margin: 10px 0;
-  text-decoration: none;
-}
-
-.footer .links h3,
-.footer .platform h3 {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: 15px;
-}
-
-.footer .social-links {
-  display: flex;
-  justify-content: flex-start;
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.footer .social-links .social-icon {
-  border: 2px solid #0E46A3;
-  background-color: #15063C;
-  border-radius: 50%;
-  padding: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer .social-links img {
-  width: 20px;
-  height: auto;
-}
-body, html {
-  margin: 0; /* Remove default margin */
-  padding: 0; /* Remove default padding */
-  overflow-x: hidden; /* Prevent horizontal overflow */
-}
-@media (max-width: 768px) {
-  body, html {
-  margin: 0; /* Remove default margin */
-  padding: 0; /* Remove default padding */
-  overflow-x: hidden; /* Prevent horizontal overflow */
-}
-  .footer .container {
-    flex-direction: column;
-    /* align-items: center;
-    text-align: center; */
-  }
-
-  .footer .brand img {
-    margin-bottom: 20px;
-  }
-
-  .footer .brand p,
-  .footer .links,
-  .footer .platform {
-    max-width: 100%;
-  }
-
-  .footer .links h3,
-  .footer .platform h3 {
-    font-size: 18px;
-  }
-
-  .footer .social-links {
-    justify-content: center;
-  }
-}
-
-@media (max-width: 767px) { 
-  .carousel-item {
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .carousel-item img {
-    width: 100%;
-    height: 100%; 
-    object-fit: cover;
-    border-radius: 10px;
-  }
-}
-
-  .slideshow-container {
-      position: relative;
-  }
-
-  .mySlides {
-      display: none;
-  }
-
-  /* Style for previous and next buttons */
-  .prev, .next {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      padding: 16px;
-      cursor: pointer;
-      background-color: rgba(0, 0, 0, 0.5);
-      color: white;
-  }
-
-  .prev {
-      left: 0;
-  }
-
-  .next {
-      right: 0;
-  }
-</style>
-
-<style>
-
-  .padd2 {
-    padding-top: 120px;
-    padding-bottom: 40px;
-  }
-
-  /* Float four columns side by side */
-  .column {
-    float: left;
-    width: 50%;
-    padding: 0 50px;
-    margin-bottom: 50px;
-  }
-
-  /* Remove extra left and right margins, due to padding */
-  .row {
-    padding: 0 100px;
-  }
-
-  /* Clear floats after the columns */
-  .row:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  @media (min-width: 600px) and (max-width: 1000px) {
-    .row {
-      padding: 0 20px;
-    }
-    .column {
-    float: left;
-    width: 50%;
-    padding: 0 10px;
-    margin-bottom: 50px;
-  }
-  }
-
-  /* Responsive columns */
-  @media screen and (max-width: 600px) {
-    .column {
-      width: 100%;
-      display: block;
-      margin-bottom: 20px;
-    }
-
-    .row {
-      padding: 0 0px;
-    }
-  }
-
-  /* Add your CSS styles here */
-.slideshow-container2 {
-    position: relative;
-}
-
-.mySlides2 {
-    display: none;
-}
-
-/* Style for previous and next buttons */
-.prev, .next {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 16px;
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-}
-
-.prev {
-    left: 0;
-}
-
-.next {
-    right: 0;
-}
-</style>
-
-<style>
-
-  .padd3 {
-    padding-top: 120px;
-    padding-bottom: 40px;
-  }
-
-  /* Float four columns side by side */
-  .column {
-    float: left;
-    width: 50%;
-    padding: 0 50px;
-    margin-bottom: 50px;
-  }
-
-  /* Remove extra left and right margins, due to padding */
-  .row {
-    padding: 0 100px;
-  }
-
-  /* Clear floats after the columns */
-  .row:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  @media (min-width: 600px) and (max-width: 1000px) {
-    .row {
-      padding: 0 20px;
-    }
-    .column {
-    float: left;
-    width: 50%;
-    padding: 0 10px;
-    margin-bottom: 50px;
-  }
-  }
-
-  /* Responsive columns */
-  @media screen and (max-width: 600px) {
-    .column {
-      width: 100%;
-      display: block;
-      margin-bottom: 20px;
-    }
-
-    .row {
-      padding: 0 0px;
-    }
-  }
-
-  /* Add your CSS styles here */
-.slideshow-container3 {
-    position: relative;
-}
-
-.mySlides3 {
-    display: none;
-}
-
-/* Style for previous and next buttons */
-.prev, .next {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 16px;
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-}
-
-.prev {
-    left: 0;
-}
-
-.next {
-    right: 0;
-}
-</style>
-
-<style>
-
-  .padd4 {
-    padding-top: 120px;
-    padding-bottom: 40px;
-  }
-
-  /* Float four columns side by side */
-  .column {
-    float: left;
-    width: 50%;
-    padding: 0 50px;
-    margin-bottom: 50px;
-  }
-
-  /* Remove extra left and right margins, due to padding */
-  .row {
-    padding: 0 100px;
-  }
-
-  /* Clear floats after the columns */
-  .row:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  @media (min-width: 600px) and (max-width: 1000px) {
-    .row {
-      padding: 0 20px;
-    }
-    .column {
-    float: left;
-    width: 50%;
-    padding: 0 10px;
-    margin-bottom: 50px;
-  }
-  }
-
-  /* Responsive columns */
-  @media screen and (max-width: 600px) {
-    .column {
-      width: 100%;
-      display: block;
-      margin-bottom: 20px;
-    }
-
-    .row {
-      padding: 0 0px;
-    }
-  }
-
-  /* Add your CSS styles here */
-.slideshow-container4 {
-    position: relative;
-}
-
-.mySlides4 {
-    display: none;
-}
-
-/* Style for previous and next buttons */
-.prev, .next {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 16px;
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-}
-
-.prev {
-    left: 0;
-}
-
-.next {
-    right: 0;
-}
-</style>
-
-<style>
-
-  .padd5 {
-    padding-top: 120px;
-    padding-bottom: 40px;
-  }
-
-  /* Float four columns side by side */
-  .column {
-    float: left;
-    width: 50%;
-    padding: 0 50px;
-    margin-bottom: 50px;
-  }
-
-  /* Remove extra left and right margins, due to padding */
-  .row {
-    padding: 0 100px;
-  }
-
-  /* Clear floats after the columns */
-  .row:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  @media (min-width: 600px) and (max-width: 1000px) {
-    .row {
-      padding: 0 20px;
-    }
-    .column {
-    float: left;
-    width: 50%;
-    padding: 0 10px;
-    margin-bottom: 50px;
-  }
-  }
-
-  /* Responsive columns */
-  @media screen and (max-width: 600px) {
-    .column {
-      width: 100%;
-      display: block;
-      margin-bottom: 20px;
-    }
-
-    .row {
-      padding: 0 0px;
-    }
-  }
-
-  /* Add your CSS styles here */
-.slideshow-container5 {
-    position: relative;
-}
-
-.mySlides5 {
-    display: none;
-}
-
-/* Style for previous and next buttons */
-.prev, .next {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 16px;
-    cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-}
-
-.prev {
-    left: 0;
-}
-
-.next {
-    right: 0;
-}
-</style>
-
-</head>
-
-<body>
-  <header>
-    <nav class="min-w-full h-[88px] px-4 m37:px-8 text-white absolute flex items-center justify-between z-50">
-      <div class="flex justify-center items-center gap-x-2 sm:gap-x-4">
-        <a href="#"><img src="./resources/readyimages/Rectangle.png" width="40" height="40" alt="logo" /></a>
-        <a href="#"><img src="./resources/myriadflow.png" width="200" height="200" alt="logo" /></a>
-      </div>
-      <button class="lg:hidden text-2xl" id="navbtn">
-        <i class="fa-solid fa-bars"></i>
-      </button>
-      <div class="font-bold hidden lg:flex gap-x-8" style="text-transform: capitalize;">
-        <a href="https://myriadflow.com" class="nav-link">Home</a>
-        <a href="https://discover.myriadflow.com" target="_blank" class="nav-link">
-          <span style="margin-left: 10px;">Discover</span>
-        </a>
-        <a href="https://studio.myriadflow.com" target="_blank" class="nav-link">Studio</a>
-        <a href="https://webxr.myriadflow.com" target="_blank" class="nav-link">WebXR</a>
-        <div class="join-button">
+
+        .footer .links h3,
+        .footer .platform h3 {
+          font-size: 18px;
+        }
+
+        .footer .social-links {
+          justify-content: center;
+        }
+      }
+
+      @media (max-width: 767px) {
+        .carousel-item {
+          height: 100px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .carousel-item img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          border-radius: 10px;
+        }
+      }
+
+      .slideshow-container {
+        position: relative;
+      }
+
+      .mySlides {
+        display: none;
+      }
+
+      /* Style for previous and next buttons */
+      .prev,
+      .next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 16px;
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+      }
+
+      .prev {
+        left: 0;
+      }
+
+      .next {
+        right: 0;
+      }
+    </style>
+
+    <style>
+      .padd2 {
+        padding-top: 120px;
+        padding-bottom: 40px;
+      }
+
+      /* Float four columns side by side */
+      .column {
+        float: left;
+        width: 50%;
+        padding: 0 50px;
+        margin-bottom: 50px;
+      }
+
+      /* Remove extra left and right margins, due to padding */
+      .row {
+        padding: 0 100px;
+      }
+
+      /* Clear floats after the columns */
+      .row:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+
+      @media (min-width: 600px) and (max-width: 1000px) {
+        .row {
+          padding: 0 20px;
+        }
+        .column {
+          float: left;
+          width: 50%;
+          padding: 0 10px;
+          margin-bottom: 50px;
+        }
+      }
+
+      /* Responsive columns */
+      @media screen and (max-width: 600px) {
+        .column {
+          width: 100%;
+          display: block;
+          margin-bottom: 20px;
+        }
+
+        .row {
+          padding: 0 0px;
+        }
+      }
+
+      /* Add your CSS styles here */
+      .slideshow-container2 {
+        position: relative;
+      }
+
+      .mySlides2 {
+        display: none;
+      }
+
+      /* Style for previous and next buttons */
+      .prev,
+      .next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 16px;
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+      }
+
+      .prev {
+        left: 0;
+      }
+
+      .next {
+        right: 0;
+      }
+    </style>
+
+    <style>
+      .padd3 {
+        padding-top: 120px;
+        padding-bottom: 40px;
+      }
+
+      /* Float four columns side by side */
+      .column {
+        float: left;
+        width: 50%;
+        padding: 0 50px;
+        margin-bottom: 50px;
+      }
+
+      /* Remove extra left and right margins, due to padding */
+      .row {
+        padding: 0 100px;
+      }
+
+      /* Clear floats after the columns */
+      .row:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+
+      @media (min-width: 600px) and (max-width: 1000px) {
+        .row {
+          padding: 0 20px;
+        }
+        .column {
+          float: left;
+          width: 50%;
+          padding: 0 10px;
+          margin-bottom: 50px;
+        }
+      }
+
+      /* Responsive columns */
+      @media screen and (max-width: 600px) {
+        .column {
+          width: 100%;
+          display: block;
+          margin-bottom: 20px;
+        }
+
+        .row {
+          padding: 0 0px;
+        }
+      }
+
+      /* Add your CSS styles here */
+      .slideshow-container3 {
+        position: relative;
+      }
+
+      .mySlides3 {
+        display: none;
+      }
+
+      /* Style for previous and next buttons */
+      .prev,
+      .next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 16px;
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+      }
+
+      .prev {
+        left: 0;
+      }
+
+      .next {
+        right: 0;
+      }
+    </style>
+
+    <style>
+      .padd4 {
+        padding-top: 120px;
+        padding-bottom: 40px;
+      }
+
+      /* Float four columns side by side */
+      .column {
+        float: left;
+        width: 50%;
+        padding: 0 50px;
+        margin-bottom: 50px;
+      }
+
+      /* Remove extra left and right margins, due to padding */
+      .row {
+        padding: 0 100px;
+      }
+
+      /* Clear floats after the columns */
+      .row:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+
+      @media (min-width: 600px) and (max-width: 1000px) {
+        .row {
+          padding: 0 20px;
+        }
+        .column {
+          float: left;
+          width: 50%;
+          padding: 0 10px;
+          margin-bottom: 50px;
+        }
+      }
+
+      /* Responsive columns */
+      @media screen and (max-width: 600px) {
+        .column {
+          width: 100%;
+          display: block;
+          margin-bottom: 20px;
+        }
+
+        .row {
+          padding: 0 0px;
+        }
+      }
+
+      /* Add your CSS styles here */
+      .slideshow-container4 {
+        position: relative;
+      }
+
+      .mySlides4 {
+        display: none;
+      }
+
+      /* Style for previous and next buttons */
+      .prev,
+      .next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 16px;
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+      }
+
+      .prev {
+        left: 0;
+      }
+
+      .next {
+        right: 0;
+      }
+    </style>
+
+    <style>
+      .padd5 {
+        padding-top: 120px;
+        padding-bottom: 40px;
+      }
+
+      /* Float four columns side by side */
+      .column {
+        float: left;
+        width: 50%;
+        padding: 0 50px;
+        margin-bottom: 50px;
+      }
+
+      /* Remove extra left and right margins, due to padding */
+      .row {
+        padding: 0 100px;
+      }
+
+      /* Clear floats after the columns */
+      .row:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+
+      @media (min-width: 600px) and (max-width: 1000px) {
+        .row {
+          padding: 0 20px;
+        }
+        .column {
+          float: left;
+          width: 50%;
+          padding: 0 10px;
+          margin-bottom: 50px;
+        }
+      }
+
+      /* Responsive columns */
+      @media screen and (max-width: 600px) {
+        .column {
+          width: 100%;
+          display: block;
+          margin-bottom: 20px;
+        }
+
+        .row {
+          padding: 0 0px;
+        }
+      }
+
+      /* Add your CSS styles here */
+      .slideshow-container5 {
+        position: relative;
+      }
+
+      .mySlides5 {
+        display: none;
+      }
+
+      /* Style for previous and next buttons */
+      .prev,
+      .next {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 16px;
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+      }
+
+      .prev {
+        left: 0;
+      }
+
+      .next {
+        right: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <header>
+      <nav
+        class="min-w-full bg-black h-[88px] px-4 m37:px-8 text-white fixed flex items-center justify-between z-50"
+      >
+        <div class="flex justify-center items-center gap-x-2 sm:gap-x-4">
+          <a href="#"
+            ><img
+              src="./resources/readyimages/Rectangle.png"
+              width="40"
+              height="40"
+              alt="logo"
+          /></a>
+          <a href="#"
+            ><img
+              src="./resources/myriadflow.png"
+              width="200"
+              height="200"
+              alt="logo"
+          /></a>
+        </div>
+        <button class="lg:hidden text-2xl" id="navbtn">
+          <i class="fa-solid fa-bars"></i>
+        </button>
+        <div
+          class="font-bold hidden lg:flex gap-x-8"
+          style="text-transform: capitalize"
+        >
+          <a href="https://myriadflow.com" class="nav-link">Home</a>
+          <a
+            href="https://discover.myriadflow.com"
+            target="_blank"
+            class="nav-link"
+          >
+            <span style="margin-left: 10px">Discover</span>
+          </a>
+          <a
+            href="https://studio.myriadflow.com"
+            target="_blank"
+            class="nav-link"
+            >Studio</a
+          >
+          <a
+            href="https://webxr.myriadflow.com"
+            target="_blank"
+            class="nav-link"
+            >WebXR</a
+          >
+          <div class="join-button">
+            <a href="https://studio.myriadflow.com" target="_blank">LAUNCH</a>
+          </div>
+        </div>
+      </nav>
+      <ul
+        id="links"
+        class="fixed px-8 top-[88px] bg-black link text-white font-semibold text-xl w-full z-50 flex flex-col gap-4 text-right overflow-hidden lg:hidden"
+      >
+        <a href="https://myriadflow.com" class="block pt-8">Home</a>
+        <a href="https://discover.myriadflow.com" target="_blank">Discover</a>
+        <a href="https://studio.myriadflow.com" target="_blank">Studio</a>
+        <a href="https://webxr.myriadflow.com" target="_blank">WebXR</a>
+        <div
+          class="px-10"
+          style="padding-top: 4px; padding-bottom: 4px; border: 2px solid white"
+        >
           <a href="https://studio.myriadflow.com" target="_blank">LAUNCH</a>
         </div>
+      </ul>
+
+      <div
+        class="hidden h-screen header-bg bg-center text-white lg:flex items-center w-full"
+        id="home"
+        style="
+          position: relative;
+          padding: 0px 7vw;
+          background-image: url(&quot;./resources/readyimages/hero_background.png&quot;);
+        "
+      >
+        <div class="w-2/2 ">
+          <h1
+            class="text-7xl lg:text-9xl font-black mb-8 hero-content"
+            style="line-height: 1"
+          >
+            Discover NFT <br> Xperiences<br />
+          </h1>
+          <p class="text-2xl text-gray-50 font-thin mb-10">
+            Step into a universe of limitless possibilities, where <br />
+            brand activation opens a portal to extraordinary <br />
+            storytelling and unforgettable NFT experience
+          </p>
+          <div class="inline-block rounded-full">
+            <!-- <div class="capitalize font-bold text-xl" style="color: #13d5dc66">
+              Stay tuned
+            </div>
+            <div class="capitalize font-bold text-xl" style="color: #13d5dc99">
+              Coming Soon
+            </div>
+            <div class="font-bold text-xl mb-10" style="color: #13d5dc">
+              Prepare to Launch!
+            </div> -->
+
+            <button
+              class="py-3 px-8 m41:px-16 m41:text-lg font-medium mb-4"
+              style="border: 2px solid white"
+            >
+              <a
+                href="https://discord.gg/38jktRtuY7"
+                target="_blank"
+                style="color: white"
+                class="flex gap-4"
+              >
+              <img
+                  src="/resources/readyimages/Vector.png"
+                  style="width: 30px; border-radius: 100%"
+                />
+                Join
+                
+              </a>
+            </button>
+          </div>
+        </div>
       </div>
-    </nav>
-    <ul id="links"
-      class="fixed px-8 top-[88px] bg-black link text-white font-semibold text-xl w-full z-50 flex flex-col gap-4 text-right overflow-hidden lg:hidden">
-      <a href="https://myriadflow.com" class="block pt-8">Home</a>
-      <a href="https://discover.myriadflow.com" target="_blank">Discover</a>
-      <a href="https://studio.myriadflow.com" target="_blank">Studio</a>
-      <a href="https://webxr.myriadflow.com" target="_blank">WebXR</a>
-      <div class="px-10" style="padding-top: 4px; padding-bottom: 4px; border: 2px solid white">
-        <a href="https://studio.myriadflow.com" target="_blank">LAUNCH</a>
-      </div>
-    </ul>
-    
-    <div class="h-screen header-bg bg-center text-white flex w-full" id="home" style="position:relative; padding: 0px 7vw; background-image: url('./resources/readyimages/hero_background.png');">
-      <div class="w-full lg:w-1/2 md:w-1/2">
-        <h1 class="text-2xl lg:text-7xl font-black mb-8 hero-content" style="line-height: 1;">
-          Your Gateway to Discover NFT Xperiences<br />
-        </h1>
-        <p class="text-md lg:text-lg font-semibold sm:font-semibold mb-10">
-          MyriadFlow is an innovative platform to explore and launch<br/> NFT experiences. Dive into the next generation of utility NFTs <br/>and phygitals in our revolutionary app store
-        </p>
-        <div class="inline-block rounded-full">
-          <div class="capitalize font-bold text-xl" style="color: #13D5DC66">Stay tuned</div>
-          <div class="capitalize font-bold text-xl" style="color: #13D5DC99">Coming Soon</div>
-          <div class="font-bold text-xl mb-10" style="color: #13D5DC">Prepare to Launch!</div>
-    
-          <button class="py-3 px-8 m41:px-16 m41:text-lg font-medium mb-4" style="border: 2px solid white;">
-            <a href="https://discord.gg/38jktRtuY7" target="_blank" style="color: white" class="flex gap-4">
+
+      <div class="flex flex-col text-white lg:hidden w-full" id="home">
+        <!-- Heading Section -->
+        <div class="pt-24 px-7">
+          <h1
+            class="text-4xl text-center font-black mb-4"
+            style="line-height: 1; color: black; margin-top: 100px"
+          >
+            Discover NFT Xperiences
+          </h1>
+        </div>
+
+        <!-- Image Section -->
+        <div class="flex-1 mt-40 mb-10 relative">
+          <img
+            src="./resources/readyimages/hero_background.png"
+            alt="NFT Experience"
+            class="w-full h-full object-cover"
+          />
+        </div>
+
+        <!-- Text and Button Section -->
+        <div class="px-7 py-8 mt-10 mb-10 z-10 flex items-center flex-col">
+          <p
+            class="text-md px-4 text-center font-semibold mb-6"
+            style="color: black"
+          >
+            Step into a universe of limitless possibilities, where brand
+            activation opens a portal to extraordinary storytelling and
+            unforgettable NFT experience
+          </p>
+          <button class="py-3 px-8 font-medium w-[200px] text-center flex items-center justify-center" style="border: 2px solid black">
+            <a
+              href="https://discord.gg/38jktRtuY7"
+              target="_blank"
+              style="color: black"
+              class="flex items-center gap-4"
+            >
+            <svg 
+              width="30" 
+              height="30" 
+              viewBox="0 0 24 24" 
+            >
+              <path 
+                fill="#333"
+                d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"
+              />
+            </svg>
               Join
-              <img src="/resources/readyimages/Vector.png" style="width: 30px; border-radius: 100%;"/> 
             </a>
           </button>
+
+        </div>
+        <div class="mt-20 bg-black px-6 py-4 flex justify-center items-center gap-2">
+          <a href="#" class="text-2xl" style="color: #c243fe;">
+            Discover MarketPlace
+          </a>
+          <svg 
+            xmlns="http://www.w3.org/2000/svg" 
+            width="24" 
+            height="24" 
+            viewBox="0 0 24 24" 
+            fill="none" 
+            stroke="#c243fe" 
+            stroke-width="2" 
+            stroke-linecap="round" 
+            stroke-linejoin="round"
+          >
+            <line x1="7" y1="17" x2="17" y2="7"></line>
+            <polyline points="7 7 17 7 17 17"></polyline>
+          </svg>
+        </div>
         </div>
       </div>
-    </div>
-  </header>
+    </header>
 
-  <div class="carousel-container w-full" style="padding-top: 80px; padding-bottom: 80px;">
-    <div class="carousel" id="carousel">
+    <div
+      class="carousel-container w-full"
+      style="padding-top: 80px; padding-bottom: 80px"
+    >
+      <div class="carousel" id="carousel">
         <!-- JavaScript will insert carousel items here -->
+      </div>
     </div>
-</div>
-
-  <section class="" style="background-color: #F2F2F3">
-    <div class="mx-auto" style="padding: 8px 14vw;">
-
-    <h1
-      class="pt-14 m28:text-2xl text-3xl m48:text-5xl m28:font-extrabold font-black lg:font-extrabold mb-4 w-1/2" id="possibilities">
-      <span style="color:#4B4B4B">Cutting Edge Features<br/> in the Works</span>
-    </h1>
-    <img src="./resources/readyimages/line2.png" class="mb-10"/>
 
-    <div class="lg:flex gap-20">
-      <div class="lg:w-1/2">
-      <div class="lg:w-1/3">
-            <div class="mx-auto">
+    <section class="" style="background-color: #f2f2f3">
+      <div class="mx-auto" style="padding: 8px 14vw">
+        <h1
+          class="pt-14 m28:text-2xl text-3xl m48:text-5xl m28:font-extrabold font-black lg:font-extrabold mb-4 w-1/2"
+          id="possibilities"
+        >
+          <span style="color: #4b4b4b"
+            >Cutting Edge Features<br />
+            in the Works</span
+          >
+        </h1>
+        <img src="./resources/readyimages/line2.png" class="mb-10" />
 
-              <!-- <div class="slideshow-container2 w-full mx-auto mb-4">
+        <div class="lg:flex gap-20">
+          <div class="lg:w-1/2">
+            <div class="lg:w-1/3">
+              <div class="mx-auto">
+                <!-- <div class="slideshow-container2 w-full mx-auto mb-4">
           
                 <div class="mySlides2 mx-auto" style="display: block;">
                      <img src="./resources/readyimages/features1.png" class="w-full mx-auto" alt="" />
@@ -645,62 +838,99 @@ <h1 class="text-2xl lg:text-7xl font-black mb-8 hero-content" style="line-height
             
                 </div> -->
 
-                 <img src="./resources/readyimages/features1.png" class="w-full mx-auto mb-4" alt="" />
+                <img
+                  src="./resources/readyimages/features1.png"
+                  class="w-full mx-auto mb-4"
+                  alt=""
+                />
 
-                 <div class="text-3xl text-black font-semibold mb-4">Supercharge Your Phygital NFTs with AI-Powered Brand Ambassadors</div>
-                 <div class="text-lg text-black mb-10">With MyriadFlow you can go beyond the ordinary and impress your audience with Next-Level NFTs. We are building interactive AI-powered brand ambassadors in VR environments that your audience can interact with. Stay tuned – AI integration for all NFTs is coming soon!</div>
-                 <!-- <div class="uppercase font-bold mb-10" style="color: #545454;">Ai integration coming soon</div> -->
+                <div class="text-3xl text-black font-semibold mb-4">
+                  Supercharge Your Phygital NFTs with AI-Powered Brand
+                  Ambassadors
+                </div>
+                <div class="text-lg text-black mb-10">
+                  With MyriadFlow you can go beyond the ordinary and impress
+                  your audience with Next-Level NFTs. We are building
+                  interactive AI-powered brand ambassadors in VR environments
+                  that your audience can interact with. Stay tuned – AI
+                  integration for all NFTs is coming soon!
+                </div>
+                <!-- <div class="uppercase font-bold mb-10" style="color: #545454;">Ai integration coming soon</div> -->
+              </div>
             </div>
-        </div>
-        </div>
-        <div class="lg:w-1/2">
-          <div class="lg:w-1/3">
-                <div class="mx-auto">
-
-                  <div class="slideshow-container3 w-full mx-auto mb-4">
-
-                    <div class="mySlides3 mx-auto" style="display: block;">
-                         <img src="./resources/readyimages/features3.jpg" class="w-full mx-auto" alt="" />
-                    </div>
-      
-                    <div class="mySlides3 mx-auto">
-                        <img src="./resources/readyimages/features2.jpg" class="w-full mx-auto" alt="" /> 
-                    </div>
-      
-                    <div class="mySlides3 mx-auto">
-                        <img src="./resources/readyimages/features2.jpg" class="w-full mx-auto" alt="" />
-                    </div>
-      
-                    </div>
-
-                     <!-- <img src="./resources/readyimages/features2.jpg" class="w-full mx-auto mb-4" alt="" /> -->
-                     <div class="text-3xl text-black font-semibold mb-4">Craft Your NFT Vision: Customizable Storefronts for Creators & Brands</div>
-                 <div class="text-lg text-black mb-10">MyriadFlow empowers creators and businesses to seamlessly navigate the NFT landscape, and to create and manage customizable storefronts without any coding knowledge. Get your NFT solution live in seconds with an easy to use storefront that represents Your Brand!</div>
+          </div>
+          <div class="lg:w-1/2">
+            <div class="lg:w-1/3">
+              <div class="mx-auto">
+                <div class="slideshow-container3 w-full mx-auto mb-4">
+                  <div class="mySlides3 mx-auto" style="display: block">
+                    <img
+                      src="./resources/readyimages/features3.jpg"
+                      class="w-full mx-auto"
+                      alt=""
+                    />
+                  </div>
+
+                  <div class="mySlides3 mx-auto">
+                    <img
+                      src="./resources/readyimages/features2.jpg"
+                      class="w-full mx-auto"
+                      alt=""
+                    />
+                  </div>
+
+                  <div class="mySlides3 mx-auto">
+                    <img
+                      src="./resources/readyimages/features2.jpg"
+                      class="w-full mx-auto"
+                      alt=""
+                    />
+                  </div>
+                </div>
+
+                <!-- <img src="./resources/readyimages/features2.jpg" class="w-full mx-auto mb-4" alt="" /> -->
+                <div class="text-3xl text-black font-semibold mb-4">
+                  Craft Your NFT Vision: Customizable Storefronts for Creators &
+                  Brands
                 </div>
+                <div class="text-lg text-black mb-10">
+                  MyriadFlow empowers creators and businesses to seamlessly
+                  navigate the NFT landscape, and to create and manage
+                  customizable storefronts without any coding knowledge. Get
+                  your NFT solution live in seconds with an easy to use
+                  storefront that represents Your Brand!
+                </div>
+              </div>
             </div>
+          </div>
         </div>
-
       </div>
-  </div>
-  </section>
-
-  <main>
-    
+    </section>
 
+    <main>
       <div class="flex justify-center">
         <h1
-          class="m28:text-2xl text-3xl m48:text-5xl m28:font-extrabold font-black lg:font-extrabold mb-4 w-1/2 flex gap-4" id="possibilities" style="margin-top: 100px;">
-          <span style="color:#4B4B4B"><img src="./resources/readyimages/line.png"/></span>
-          <span style="color:#4B4B4B"> Stay Tuned for More Details in This Space</span>
+          class="m28:text-2xl text-3xl m48:text-5xl m28:font-extrabold font-black lg:font-extrabold mb-4 w-1/2 flex gap-4"
+          id="possibilities"
+          style="margin-top: 100px"
+        >
+          <span style="color: #4b4b4b"
+            ><img src="./resources/readyimages/line.png"
+          /></span>
+          <span style="color: #4b4b4b">
+            Stay Tuned for More Details in This Space</span
+          >
         </h1>
-        </div>
-
-        <div class="carousel-container2 w-full" style="padding-top: 80px; padding-bottom: 150px;">
-          <div class="carousel2" id="carousel2">
-              <!-- JavaScript will insert carousel items here -->
-          </div>
       </div>
 
+      <div
+        class="carousel-container2 w-full"
+        style="padding-top: 80px; padding-bottom: 150px"
+      >
+        <div class="carousel2" id="carousel2">
+          <!-- JavaScript will insert carousel items here -->
+        </div>
+      </div>
 
       <footer class="footer">
         <section class="container">
@@ -708,25 +938,48 @@ <h1 class="text-2xl lg:text-7xl font-black mb-8 hero-content" style="line-height
             <a href="https://myriadflow.com/" target="_blank">
               <img src="./resources/MFlogo.png" alt="logo" />
             </a>
-            <p>Innovative next-gen platform for exploring and launching NFT Xperiences with AI-powered brand ambassadors and no-code tools.</p>
-            <p class="copy">© Copyright 2024 MyriadFlow. All rights reserved</p>
+            <p>
+              Innovative next-gen platform for exploring and launching NFT
+              Xperiences with AI-powered brand ambassadors and no-code tools.
+            </p>
+            <p class="copy">
+              © Copyright 2024 MyriadFlow. All rights reserved
+            </p>
           </div>
-    
+
           <div class="links">
-            <h3 style="font-size: 24px; font-weight: 600; color: white;">About</h3>
-            <a href="./resources/MyriadFlow_Terms_of_Service.pdf" target="_blank">Terms of Service</a>
-            <a href="./resources/MyriadFlow_Creator_Terms_and_Conditions.pdf" target="_blank">Creator Terms and Conditions</a>
-            <a href="./resources/MyriadFlow_Privacy_Policy.pdf" target="_blank">Privacy Policy</a>
-            <a href="./resources/MyriadFlow_Community_Guidelines.pdf" target="_blank">Community Guidelines</a>
+            <h3 style="font-size: 24px; font-weight: 600; color: white">
+              About
+            </h3>
+            <a
+              href="./resources/MyriadFlow_Terms_of_Service.pdf"
+              target="_blank"
+              >Terms of Service</a
+            >
+            <a
+              href="./resources/MyriadFlow_Creator_Terms_and_Conditions.pdf"
+              target="_blank"
+              >Creator Terms and Conditions</a
+            >
+            <a href="./resources/MyriadFlow_Privacy_Policy.pdf" target="_blank"
+              >Privacy Policy</a
+            >
+            <a
+              href="./resources/MyriadFlow_Community_Guidelines.pdf"
+              target="_blank"
+              >Community Guidelines</a
+            >
           </div>
-    
+
           <div class="platform">
-            <h3 style="font-size: 24px; font-weight: 600; color: white;">Platform</h3>
+            <h3 style="font-size: 24px; font-weight: 600; color: white">
+              Platform
+            </h3>
             <a href="https://studio.myriadflow.com">Studio</a>
             <a href="https://discover.myriadflow.com">Discover</a>
             <a href="https://webxr.myriadflow.com">WebXR</a>
           </div>
-    
+
           <section class="social-links">
             <div class="social-icon">
               <a href="https://discord.gg/38jktRtuY7" target="_blank">
@@ -751,144 +1004,133 @@ <h3 style="font-size: 24px; font-weight: 600; color: white;">Platform</h3>
           </section>
         </section>
       </footer>
-
-  
-
-  </main>
-  <script type="module" src="/app.js"></script>
-
-<script>
-  const images = [
-            { src: './resources/readyimages/carousel7.png', name: 'Image 1' },
-            { src: './resources/readyimages/carousel1.png', name: 'Image 1' },
-            { src: './resources/readyimages/carousel2.png', name: 'Image 2' },
-            { src: './resources/readyimages/carousel3.png', name: 'Image 3' },
-            { src: './resources/readyimages/carousel4.png', name: 'Image 4' },
-            { src: './resources/readyimages/carousel5.png', name: 'Image 5' },
-            { src: './resources/readyimages/carousel6.png', name: 'Image 6' },
-            { src: './resources/readyimages/carousel8.png', name: 'Image 1' }
-        ];
-
-        const carousel = document.getElementById('carousel');
-
-        function createCarouselItem(image) {
-            const item = document.createElement('div');
-            item.className = 'carousel-item';
-
-            const img = document.createElement('img');
-            img.src = image.src;
-            img.alt = image.name;
-
-            const caption = document.createElement('p');
-            caption.textContent = image.name;
-
-            item.appendChild(img);
-            // item.appendChild(caption);
-
-            return item;
+    </main>
+    <script type="module" src="/app.js"></script>
+
+    <script>
+      const images = [
+        { src: "./resources/readyimages/carousel7.png", name: "Image 1" },
+        { src: "./resources/readyimages/carousel1.png", name: "Image 1" },
+        { src: "./resources/readyimages/carousel2.png", name: "Image 2" },
+        { src: "./resources/readyimages/carousel3.png", name: "Image 3" },
+        { src: "./resources/readyimages/carousel4.png", name: "Image 4" },
+        { src: "./resources/readyimages/carousel5.png", name: "Image 5" },
+        { src: "./resources/readyimages/carousel6.png", name: "Image 6" },
+        { src: "./resources/readyimages/carousel8.png", name: "Image 1" },
+      ];
+
+      const carousel = document.getElementById("carousel");
+
+      function createCarouselItem(image) {
+        const item = document.createElement("div");
+        item.className = "carousel-item";
+
+        const img = document.createElement("img");
+        img.src = image.src;
+        img.alt = image.name;
+
+        const caption = document.createElement("p");
+        caption.textContent = image.name;
+
+        item.appendChild(img);
+        // item.appendChild(caption);
+
+        return item;
+      }
+
+      // Add the images to the carousel
+      images.forEach((image) => {
+        carousel.appendChild(createCarouselItem(image));
+      });
+
+      // Duplicate the images for continuous effect
+      images.forEach((image) => {
+        carousel.appendChild(createCarouselItem(image));
+      });
+    </script>
+
+    <script>
+      const images2 = [
+        { src: "./resources/readyimages/slider4.jpg", name: "Image 4" },
+        { src: "./resources/readyimages/slider1.jpg", name: "Image 1" },
+        { src: "./resources/readyimages/slider2.jpg", name: "Image 2" },
+        { src: "./resources/readyimages/slider3.jpg", name: "Image 3" },
+        { src: "./resources/readyimages/slider5.jpg", name: "Image 5" },
+        // { src: './resources/readyimages/slider5.jpg', name: 'Image 6' }
+      ];
+
+      const carousel2 = document.getElementById("carousel2");
+
+      function createCarouselItem2(image) {
+        const item = document.createElement("div");
+        item.className = "carousel-item2";
+
+        const img = document.createElement("img");
+        img.src = image.src;
+        img.alt = image.name;
+
+        const caption = document.createElement("p");
+        caption.textContent = image.name;
+
+        item.appendChild(img);
+        // item.appendChild(caption);
+
+        return item;
+      }
+
+      // Add the images to the carousel
+      images2.forEach((image) => {
+        carousel2.appendChild(createCarouselItem2(image));
+      });
+
+      // Duplicate the images for continuous effect
+      images2.forEach((image) => {
+        carousel2.appendChild(createCarouselItem2(image));
+      });
+    </script>
+
+    <script>
+      let slideIndex2 = 1;
+      showSlides2();
+
+      function showSlides2() {
+        let i;
+        let slides2 = document.getElementsByClassName("mySlides2");
+        for (i = 0; i < slides2.length; i++) {
+          slides2[i].style.display = "none";
         }
-
-        // Add the images to the carousel
-        images.forEach(image => {
-            carousel.appendChild(createCarouselItem(image));
-        });
-
-        // Duplicate the images for continuous effect
-        images.forEach(image => {
-            carousel.appendChild(createCarouselItem(image));
-        });
-  </script>
-
-
-<script>
-  const images2 = [
-            { src: './resources/readyimages/slider4.jpg', name: 'Image 4' },
-            { src: './resources/readyimages/slider1.jpg', name: 'Image 1' },
-            { src: './resources/readyimages/slider2.jpg', name: 'Image 2' },
-            { src: './resources/readyimages/slider3.jpg', name: 'Image 3' },
-            { src: './resources/readyimages/slider5.jpg', name: 'Image 5' },
-            // { src: './resources/readyimages/slider5.jpg', name: 'Image 6' }
-        ];
-
-        const carousel2 = document.getElementById('carousel2');
-
-        function createCarouselItem2(image) {
-            const item = document.createElement('div');
-            item.className = 'carousel-item2';
-
-            const img = document.createElement('img');
-            img.src = image.src;
-            img.alt = image.name;
-
-            const caption = document.createElement('p');
-            caption.textContent = image.name;
-
-            item.appendChild(img);
-            // item.appendChild(caption);
-
-            return item;
+        slideIndex2++;
+        if (slideIndex2 > slides2.length) {
+          slideIndex2 = 1; // Reset slideIndex to 1 when it exceeds the number of slides
         }
-
-        // Add the images to the carousel
-        images2.forEach(image => {
-            carousel2.appendChild(createCarouselItem2(image));
-        });
-
-        // Duplicate the images for continuous effect
-        images2.forEach(image => {
-            carousel2.appendChild(createCarouselItem2(image));
-        });
-  </script>
-
-
-
-<script>
-  let slideIndex2 = 1;
-  showSlides2();
-  
-  function showSlides2() {
-    let i;
-    let slides2 = document.getElementsByClassName("mySlides2");
-    for (i = 0; i < slides2.length; i++) {
-      slides2[i].style.display = "none";  
-    }
-    slideIndex2++;
-    if (slideIndex2 > slides2.length) {
-      slideIndex2 = 1;  // Reset slideIndex to 1 when it exceeds the number of slides
-    }
-    slides2[slideIndex2 - 1].style.display = "block";  
-    setTimeout(showSlides2, 3000); // Change slide every 3 seconds (adjust the timing as needed)
-  }
-  
-  // Start the automatic slideshow immediately
-  showSlides2();
-  </script>
-
-
-
-<script>
-  let slideIndex3 = 1;
-  showSlides3();
-  
-  function showSlides3() {
-    let i;
-    let slides3 = document.getElementsByClassName("mySlides3");
-    for (i = 0; i < slides3.length; i++) {
-      slides3[i].style.display = "none";  
-    }
-    slideIndex3++;
-    if (slideIndex3 > slides3.length) {
-      slideIndex3 = 1;  // Reset slideIndex to 1 when it exceeds the number of slides
-    }
-    slides3[slideIndex3 - 1].style.display = "block";  
-    setTimeout(showSlides3, 3000); // Change slide every 3 seconds (adjust the timing as needed)
-  }
-  
-  // Start the automatic slideshow immediately
-  showSlides3();
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
+        slides2[slideIndex2 - 1].style.display = "block";
+        setTimeout(showSlides2, 3000); // Change slide every 3 seconds (adjust the timing as needed)
+      }
+
+      // Start the automatic slideshow immediately
+      showSlides2();
+    </script>
+
+    <script>
+      let slideIndex3 = 1;
+      showSlides3();
+
+      function showSlides3() {
+        let i;
+        let slides3 = document.getElementsByClassName("mySlides3");
+        for (i = 0; i < slides3.length; i++) {
+          slides3[i].style.display = "none";
+        }
+        slideIndex3++;
+        if (slideIndex3 > slides3.length) {
+          slideIndex3 = 1; // Reset slideIndex to 1 when it exceeds the number of slides
+        }
+        slides3[slideIndex3 - 1].style.display = "block";
+        setTimeout(showSlides3, 3000); // Change slide every 3 seconds (adjust the timing as needed)
+      }
+
+      // Start the automatic slideshow immediately
+      showSlides3();
+    </script>
+  </body>
+</html>
