diff --git a/static/indexstyle.css b/static/indexstyle.css
new file mode 100644
index 0000000..6160fb4
--- /dev/null
+++ b/static/indexstyle.css
@@ -0,0 +1,212 @@
+body {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #000;
+    transition: background-color 0.5s ease;
+  }
+
+  .container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #screen2 {
+    color: #fff;
+  }
+
+  #openHealthText {
+    font-size: 250px;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    background: -webkit-linear-gradient(red, #b055de,#12c2e9);
+    background-clip: border-box;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  #clickableButton {
+    cursor: pointer;
+    max-width: 100%;
+    height: auto;
+    transition: transform 0.5s ease;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  
+
+  .star-1 {
+    position: absolute;
+    top: 20%;
+    left: 20%;
+    width: 25px;
+    height: auto;
+    filter: drop-shadow(0 0 0 #0ef);
+    z-index: -5;
+    transition: all 0.8s cubic-bezier(0.05, 0.83, 0.43, 0.96);
+  }
+
+  .star-2 {
+    position: absolute;
+    top: 45%;
+    left: 45%;
+    width: 15px;
+    height: auto;
+    filter: drop-shadow(0 0 0 #0ef);
+    z-index: -5;
+    transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
+  }
+
+  .star-3 {
+    position: absolute;
+    top: 40%;
+    left: 40%;
+    width: 5px;
+    height: auto;
+    filter: drop-shadow(0 0 0 #0ef);
+    z-index: -5;
+    transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
+  }
+
+  .star-4 {
+    position: absolute;
+    top: 20%;
+    left: 40%;
+    width: 8px;
+    height: auto;
+    filter: drop-shadow(0 0 0 #0ef);
+    z-index: -5;
+    transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
+  }
+
+  .star-5 {
+    position: absolute;
+    top: 25%;
+    left: 45%;
+    width: 15px;
+    height: auto;
+    filter: drop-shadow(0 0 0 #0ef);
+    z-index: -5;
+    transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
+  }
+
+  .star-6 {
+    position: absolute;
+    top: 5%;
+    left: 50%;
+    width: 5px;
+    height: auto;
+    filter: drop-shadow(0 0 0 #0ef);
+    z-index: -5;
+    transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
+  }
+
+  button:hover {
+    background: #000000;
+    color: #0ef;
+    box-shadow: 0 0 80px #0ef;
+  }
+
+  button:hover .star-1 {
+    position: absolute;
+    top: -20%;
+    left: -25%;
+    width: 30px;
+    height: auto;
+    filter: drop-shadow(0 0 10px #0ef);
+    z-index: 2;
+  }
+
+  button:hover .star-2 {
+    position: absolute;
+    top: 35%;
+    left: -25%;
+    width: 20px;
+    height: auto;
+    filter: drop-shadow(0 0 10px #0ef);
+    z-index: 2;
+  }
+
+  button:hover .star-3 {
+    position: absolute;
+    top: 80%;
+    left: -10%;
+    width: 12px;
+    height: auto;
+    filter: drop-shadow(0 0 10px #0ef);
+    z-index: 2;
+  }
+
+  button:hover .star-4 {
+    position: absolute;
+    top: -25%;
+    left: 105%;
+    width: 30px;
+    height: auto;
+    filter: drop-shadow(0 0 10px #0ef);
+    z-index: 2;
+  }
+
+  button:hover .star-5 {
+    position: absolute;
+    top: 30%;
+    left: 115%;
+    width: 20px;
+    height: auto;
+    filter: drop-shadow(0 0 10px #0ef);
+    z-index: 2;
+  }
+
+  button:hover .star-6 {
+    position: absolute;
+    top: 80%;
+    left: 105%;
+    width: 12px;
+    height: auto;
+    filter: drop-shadow(0 0 10px #0ef);
+    z-index: 2;
+  }
+
+  .fil0 {
+    fill: #0ef;
+  }
+
+  #particles-js {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+
+  .glow-button {
+    position: relative;
+    padding: 22px 35px;
+    background: #0ef;
+    font-size: 17px;
+    font-weight: bolder;
+    color: #181818;
+    border: 3px solid #0ef;
+    border-radius: 40px;
+    box-shadow: 0 0 0 #0ef;
+    transition: all 0.3s ease-in-out;
+    animation: glow 2s infinite alternate; 
+  }
+
+  @keyframes glow {
+    0% {
+      box-shadow: 0 0 10px #0ef;
+    }
+    100% {
+      box-shadow: 0 0 25px #0ef;
+    }
+  }
\ No newline at end of file
diff --git a/static/landingstyle.css b/static/landingstyle.css
new file mode 100644
index 0000000..7c27e42
--- /dev/null
+++ b/static/landingstyle.css
@@ -0,0 +1,62 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: black;
+  }
+  canvas {
+    display: block;
+  }
+  .topnav {
+    overflow: hidden;
+    background-color: #333;
+  }
+  
+  .topnav a {
+    float: left;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+  }
+  
+  .topnav a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+  
+  .topnav a.active {
+    background-color: #04AA6D;
+    color: white;
+  }
+  
+  .topnav .icon {
+    display: none;
+  }
+  
+  @media screen and (max-width: 600px) {
+    .topnav a:not(:first-child) {display: none;}
+    .topnav a.icon {
+      float: right;
+      display: block;
+    }
+  }
+  
+  @media screen and (max-width: 600px) {
+    .topnav.responsive {position: relative;}
+    .topnav.responsive .icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+    .topnav.responsive a {
+      float: none;
+      display: block;
+      text-align: left;
+    }
+  }
+  #bars{
+    color: #0ef;
+  }
\ No newline at end of file
diff --git a/static/script1.js b/static/script1.js
new file mode 100644
index 0000000..14e225f
--- /dev/null
+++ b/static/script1.js
@@ -0,0 +1,120 @@
+particlesJS(
+    "particles-js",
+
+    {
+      particles: {
+        number: {
+          value: 80,
+          density: {
+            enable: true,
+            value_area: 600,
+          },
+        },
+        color: {
+          value: "#0ef",
+        },
+        shape: {
+          type: "circle",
+          stroke: {
+            width: 0,
+            color: "#0ef",
+          },
+          polygon: {
+            nb_sides: 2,
+          },
+          image: {
+            src: "img/github.svg",
+            width: 100,
+            height: 100,
+          },
+        },
+        opacity: {
+          value: 0.3,
+          random: false,
+          anim: {
+            enable: false,
+            speed: 1,
+            opacity_min: 0.1,
+            sync: false,
+          },
+        },
+        size: {
+          value: 5,
+          random: true,
+          anim: {
+            enable: false,
+            speed: 40,
+            size_min: 0.1,
+            sync: false,
+          },
+        },
+        line_linked: {
+          enable: true,
+          distance: 200,
+          color: "#0ef",
+          opacity: 0.4,
+          width: 1,
+        },
+        move: {
+          enable: true,
+          speed: 6,
+          direction: "none",
+          random: false,
+          straight: false,
+          out_mode: "out",
+          attract: {
+            enable: false,
+            rotateX: 600,
+            rotateY: 1200,
+          },
+        },
+      },
+      interactivity: {
+        detect_on: "canvas",
+        events: {
+          onhover: {
+            enable: true,
+            mode: "repulse",
+          },
+          onclick: {
+            enable: true,
+            mode: "push",
+          },
+          resize: true,
+        },
+        modes: {
+          grab: {
+            distance: 400,
+            line_linked: {
+              opacity: 1,
+            },
+          },
+          bubble: {
+            distance: 400,
+            size: 40,
+            duration: 2,
+            opacity: 8,
+            speed: 3,
+          },
+          repulse: {
+            distance: 200,
+          },
+          push: {
+            particles_nb: 4,
+          },
+          remove: {
+            particles_nb: 2,
+          },
+        },
+      },
+      retina_detect: true,
+      config_demo: {
+        hide_card: false,
+        background_color: "#000",
+        background_image: "",
+        background_position: "50% 50%",
+        background_repeat: "no-repeat",
+        background_size: "cover",
+      },
+    }
+  );
\ No newline at end of file
diff --git a/static/script2.js b/static/script2.js
new file mode 100644
index 0000000..8a93fa9
--- /dev/null
+++ b/static/script2.js
@@ -0,0 +1,20 @@
+document
+        .getElementById("clickableButton")
+        .addEventListener("click", function () {
+          document.body.style.backgroundColor = "#000";
+          document.getElementById("initialScreen").classList.add("hidden");
+
+          setTimeout(function () {
+            document.getElementById("initialScreen").style.display = "none";
+            document.getElementById("screen2").classList.remove("hidden");
+
+            setTimeout(function () {
+              document.getElementById("screen2").style.opacity = "1";
+              document.getElementById("openHealthText").style.opacity = "1";
+            }, 100);
+          }, 400);
+
+          setTimeout(function () {
+            window.location.href = "landing1.html";
+          }, 4000);
+        });
\ No newline at end of file
diff --git a/static/script3.js b/static/script3.js
new file mode 100644
index 0000000..9c93b55
--- /dev/null
+++ b/static/script3.js
@@ -0,0 +1,120 @@
+particlesJS('particles-js',
+  
+  {
+    "particles": {
+      "number": {
+        "value": 80,
+        "density": {
+          "enable": true,
+          "value_area": 600
+        }
+      },
+      "color": {
+        "value": "#0ef"
+      },
+      "shape": {
+        "type": "circle",
+        "stroke": {
+          "width": 0,
+          "color": "#0ef"
+        },
+        "polygon": {
+          "nb_sides": 5
+        },
+        "image": {
+          "src": "img/github.svg",
+          "width": 100,
+          "height": 100
+        }
+      },
+      "opacity": {
+        "value": 0.5,
+        "random": false,
+        "anim": {
+          "enable": false,
+          "speed": 1,
+          "opacity_min": 0.1,
+          "sync": false
+        }
+      },
+      "size": {
+        "value": 5,
+        "random": true,
+        "anim": {
+          "enable": false,
+          "speed": 40,
+          "size_min": 0.1,
+          "sync": false
+        }
+      },
+      "line_linked": {
+        "enable": true,
+        "distance": 200,
+        "color": "#0ef",
+        "opacity": 0.8,
+        "width": 1
+      },
+      "move": {
+        "enable": true,
+        "speed": 6,
+        "direction": "none",
+        "random": false,
+        "straight": false,
+        "out_mode": "out",
+        "attract": {
+          "enable": false,
+          "rotateX": 600,
+          "rotateY": 1200
+        }
+      }
+    },
+    "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+        "onhover": {
+          "enable": true,
+          "mode": "repulse"
+        },
+        "onclick": {
+          "enable": true,
+          "mode": "push"
+        },
+        "resize": true
+      },
+      "modes": {
+        "grab": {
+          "distance": 400,
+          "line_linked": {
+            "opacity": 1
+          }
+        },
+        "bubble": {
+          "distance": 400,
+          "size": 40,
+          "duration": 2,
+          "opacity": 8,
+          "speed": 3
+        },
+        "repulse": {
+          "distance": 200
+        },
+        "push": {
+          "particles_nb": 4
+        },
+        "remove": {
+          "particles_nb": 2
+        }
+      }
+    },
+    "retina_detect": true,
+    "config_demo": {
+      "hide_card": false,
+      "background_color": "#000",
+      "background_image": "",
+      "background_position": "50% 50%",
+      "background_repeat": "no-repeat",
+      "background_size": "cover"
+    }
+  }
+
+);
\ No newline at end of file