diff --git a/README.md b/README.md
index 317a3e58..182d7095 100644
--- a/README.md
+++ b/README.md
@@ -1,64 +1,215 @@
-# Project Name (Start editing here)
-<!---
-Read Me Contents
--->
+# Star Power !
+
+# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: Star Power !
 
-# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game
 
 ### Overview
 
-Let's start out with something fun - **a game!**
 
-Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build.
 
-**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got!
+![star girl](/assets/images/PinkStarGirl.gif "star girl")
+
+Simple side scroller game
+
+It's that time of the year again, special **Stars** are falling through the skies. littering precious stars of sorts over the lands. Collect these special stars to auction them off at the upcoming **MEGA STAR BAZZAR**. The more stars collected, the more gold can be gained. Think about the children at the orphanage.
 
+**Player** will be moving across screen collecting stars fallen from the sky, each star has a different score. Collect as much stars as humanly possible to earn points! But watch out for the pesky **7 month cat ghost**, they are here to steal your stars away, they can't resist shiny stuff.
+
+**TL;DR** Collect stars and avoid cat ghost.
+
+Play it here !!!
+https://sillyadventures.github.io/project-1/
 
 ---
 
-### Technical Requirements
+---
 
-Your app must:
+### Technical Codes
+```
+
+                        ."      _.---_
+                       / |     /___--"     
+                       |/           
+           __--=======-+"..-..
+         //           /\  "-__\
+       //  __         \/
+     //   //\\        
+_-==//==-.|| || _---_    .     -      .-==-.   .-._
+./   //     ||// //   \\   ||   | \    //    || //   \\
+  //     .||  ||     |\./\\  /|^\\  ||-===-" //     ||
+ //        \=//\=___=//^  \\//   \-/ \\=...="/       \==-.
+//                 
+.
+```
+
+###### Codes:
+
+* **Flower**
+
+Here I created a constructor with the purpose to create flowers of different properties. Each time a flower is create, it will have a particular set of properties that is unique to one of the 5 classes created. In here I use (this) to bind the values needed to each flower created at the interval.
+
+* **fall**
+
+```
+fall () {
+  var position = this.element.position()
+  this.element.css('top', position.top + this.speed)
+  if (position.top > '600') {
+    this.element.remove()
+  }
+}
+```
+Here I am making the fall effect, coming from the top of the game screen, then removing them when they hit a certain height. This will stop them from falling all the way down the page.
+
+* **leaderBoard**
+
+```
+var highScoreArr = JSON.parse(localStorage.getItem('HighScore'))
+  highScoreArr.sort((a, b) => b - a)
+var storage = window.localStorage
+```
+Creating a localstorage to hold highscores. scores in the array are taken out as a string, JSON.parse will change it to an object. Then only can the sorting from High to low scores be done.
+```
+if (!highScoreArr.includes(score)) {
+  highScoreArr.push(score)
+  localStorage.setItem('HighScore', JSON.stringify(highScoreArr))
+  ```
+If highScoreArr does !NOT is the same as in the array, it will be pushed into it.
+Using JSON.stringify to make highScoreArr a string so it can be stored in the local storage. local storage does not accept objects, just strings.
+
+  ```
+  $highscore.text(`HighScore: ${highScoreArr[0]}
+                   HighScore: ${highScoreArr[1]}
+                   HighScore: ${highScoreArr[2]}`)
+```
+Scores are updated each time the game is played, showing only index[0,1,2] means only the top 3 scores will be shown.
+
+* **startGame() & gameOver()**
+
+```
+$startbtn.one('click', () => {
+  $clickme.css('display', 'none')
+  create = setInterval(createFlower, 50)
+  $timer = $('.timer')
+  timerInt = setInterval(() => {
+    timer = timer - 1
+    $timer.text('Time: ' + timer)
+    if (timer <= 0) {
+      gameOver()
+    }
+  }, 1000)
+})
+```
+Start button to start the game, when clicked, start screen is removed, timer begins at 30seconds, the interval for creating flowers begins. at each second interval, timer reduces by 1, and gameOver() is called.
+
+```
+$allFlowers.remove()
+clearInterval(create)
+clearInterval(find)
+clearInterval(timerInt)
+
+$gameStart.css('display', 'block')
+$highscore.css('display', 'block')
+$gameOverScreen.text(`Score: ${score}`)
+$highscore.text(`HighScore: ${highScoreArr[0]}
+                 HighScore: ${highScoreArr[1]}
+                 HighScore: ${highScoreArr[2]}`)
+
+$('.playerOne').css('backgroundImage', 'url(./assets/images/superPink2.gif)')
+```
+When gameOver() is called, game will clear all intervals, not allowing timer and flowers to fall. It will change background and show the top 3 highscores.
+
+* **detech()**
+
+```
+function detect () {
+  var $playerOne = $('.playerOne')
+  var $playerPos = $playerOne.position()
+  var $score = $('.score')
+
+  for (var key in flowerList) {
+    var $flower = flowerList[key].element
+    var $flowerPos = $flower.position()
+
+    if ($playerPos.left <= $flowerPos.left + $flower.width() &&
+    $playerPos.left + $playerOne.width() >= $flowerPos.left &&
+    $playerPos.top <= $flowerPos.top + $flower.height()) {
+      var indiFlower = flowerList.splice(key, 1)
+
+      score += indiFlower[0].points
+      timer += indiFlower[0].sec
+      $score.text(`Score: ${score}`)
+
+      indiFlower[0].element.remove()
+    }
+  }
+}
+```
+
+Getting the positions for both player and the flowers(stars).
+var $flower = flowerList[key].element, means the the exact star in the array of flowers on screen that touches the player. That flower is then spliced into a new array indiFlower[], score and time is taken from it, and is removed from the array. the removal of it makes sure that when the calculation of score happens, it does not key in multiple score & time.
 
-* **Render a game in the browser**
-* **Any number of players** will be okay, switch turns will be great 
-* **Design logic for winning** & **visually display which player won**
-* **Include separate HTML / CSS / JavaScript files**
-* Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles
-* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory
-* **Deploy your game online**, where the rest of the world can access it
-* Use **semantic markup** for HTML and CSS (adhere to best practices)
-* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please
+---
 
 ---
+### TimeFlow
+
+* Day 1
+
+1. Able to make it rain randomly all over the map.
+2. flowers are removed just before bottom line, does not go all the way down.
+3. Make create player at start of game
+4. Player move left and right.
+5. Player does not leave game screen area.
 
-### Necessary Deliverables
+* Day 2
 
-* A **working game, built by you**, hosted somewhere on the internet
-* A **link to your hosted working game** in the URL section of your GitHub repo
-* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project
-* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.
+1. Did collision, player and flower able to detect each other.
+2. collision able to give the correct values, but multiple times.
+3. collision able to give correct values once, and removed from game.
+4. added "time" value, "speed" value, different images to the stars.
+5. made gameover functiom
+6. started on CSS for the game.
+
+* Day 3
+
+1. added restart function.
+2. added more aesthetics to game.
+3. added highscore function .
+4. added leaderboard function.
+---
 
 ---
 
-### Suggested Ways to Get Started
+### Gameplay Flowchart
+![flowchart](https://raw.githubusercontent.com/sillyadventures/project-1/master/assets/images/flowchart.png "flow chart")
 
-* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards!
-* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems
-* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_.
-* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version.
-* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.
-* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then.
+![gameplay](https://raw.githubusercontent.com/sillyadventures/project-1/master/assets/images/gameplay.png "gamplay")
+
+![legend](https://raw.githubusercontent.com/sillyadventures/project-1/master/assets/images/legend.png "legend")
+
+---
 
 ---
 
-### Potential Project Ideas
+### Potential Advancements
+
+##### Player 2 option
+Create a Player 2 option for friends to join in the fun!
+
+Hit box collision for both players, able to push or stun the other one away, a Jump ability.
+
+##### Different level layouts & player avatar
+Create different levels with obstacles.
 
-##### Blackjack
-Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next!
+Have different avatars for players to choose from.
 
-##### Self-scoring Trivia
-Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are!
+##### animations
+Create original sprites of game.
+
+Introduce hit animations, gaining star animations and sound.
+
+---
 
 ---
 
@@ -67,8 +218,11 @@ Test your wits & knowledge with whatever-the-heck you know about (so you can act
 * **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_
 * **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_
 * **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_
-* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ 
+* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_
 * **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_
+# Powered By : [![N|GitHub](https://cdn1.iconfinder.com/data/icons/logotypes/32/github-128.png "Git Hub")](https://github.com/)
+
+---
 
 ---
 
diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css
index e69de29b..78faa409 100644
--- a/assets/css/stylesheet.css
+++ b/assets/css/stylesheet.css
@@ -0,0 +1,221 @@
+#startbtn {
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  background-color: inherit;
+  border: none;
+}
+
+#startbtn img {
+  height: 350px;
+  width: 350px;
+}
+
+#restartbtn {
+  font-family: "Press Start 2P";
+  font-size: 20px;
+  margin: 20px auto;
+  display: flex;
+  align-items: center;
+  background-color: white;
+  border: 2px solid black;
+  height: 150px;
+  width: 220px;
+}
+
+body {
+  font-family: "Press Start 2P";
+  background-repeat: repeat;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 35px;
+  text-align: center;
+  line-height: 50px;
+}
+
+h2 {
+
+  display:flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+h3 {
+  font-size: 17px;
+  text-align: center;
+}
+
+h4 {
+  font-size: 12px;
+  word-spacing: 140px;
+  text-align: center;
+}
+
+h5 {
+  font-size: 32px;
+  text-align: center;
+}
+
+h6 {
+  text-align: center;
+  font-size: 50px;
+}
+
+.clickme {
+  background: url("../images/background4.gif");
+  height: 100%;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  display: block;
+  z-index: 1;
+}
+
+.leaderBoard {
+  text-align: center;
+  font-size: 22px;
+  height: 400px;
+  width: 200px;
+  position: absolute;
+  display: block;
+  line-height: 70px;
+}
+
+.flower {
+  height: 55px;
+  width: 55px;
+  left: 0px;
+  display: inline-block;
+  position: absolute;
+  transition: all 0.5s ease-out;
+  background-size: cover;
+}
+
+.playerOne {
+  height: 125px;
+  width: 125px;
+  background-image: url("../images/superPink1.gif");
+  background-size: cover;
+  top: 540px;
+  left: 550px;
+  position: absolute;
+  transition: all 0.05s ease-out;
+}
+
+.container {
+  background: url("../images/background2.gif");
+  background-size: 100% 100%;
+  background-position: center;
+  width: 1200px;
+  height: 700px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.timer {
+  color: #a5ffcc;
+  font-size: 70px;
+  text-align: center;
+  width: 500px;
+  padding-top: 30px;
+  float: left;
+  line-height: 120px;
+}
+
+.score {
+  color: 	#a5ffcc;
+  font-size: 70px;
+  text-align: center;
+  padding-top: 30px;
+  width: 500px;
+  float: right;
+  line-height: 120px;
+}
+
+.highscore {
+  height: 90%;
+  width: 70%;
+  position: absolute;
+  display: none;
+  z-index: 1;
+  font-size: 50px;
+  text-align: center;
+  top: 35%;
+  left: 16%;
+  line-height: 90px;
+}
+
+.gameover {
+  background: url("../images/trip1.gif");
+  font-size: 60px;
+  text-align: center;
+  line-height: 150px;
+  height: 700px;
+  width: 1200px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  display: none;
+  z-index: 0;
+}
+
+.bottom {
+  height: 180px;
+  width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.gamestart {
+  background: url("../images/trip2.gif");
+  background-size: 100% 100%;
+  height: 180px;
+  width: 1200px;
+  margin: 0 auto;
+  position: absolute;
+  z-index: 1;
+  display: none;
+}
+
+.gamestart img {
+  height: 140px;
+  weight: 140px;
+}
+
+
+.instructions {
+  position: absolute;
+  background-color: white;
+  font: 30px;
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  z-index: 0;
+}
+
+.instructions img {
+  height: 50px;
+  width: 50px;
+}
+
+.sideinstructions {
+  text-align: center;
+  font-size: 30px;
+  height: 400px;
+  width: 200px;
+  position: absolute;
+  display: block;
+  line-height: 70px;
+  right: 0px;
+}
+
+/*scoring*/
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+  text-align: center;
+}
diff --git a/assets/images/200.gif b/assets/images/200.gif
new file mode 100644
index 00000000..33d81115
Binary files /dev/null and b/assets/images/200.gif differ
diff --git a/assets/images/PinkCatGirl.gif b/assets/images/PinkCatGirl.gif
new file mode 100644
index 00000000..1420c640
Binary files /dev/null and b/assets/images/PinkCatGirl.gif differ
diff --git a/assets/images/PinkStarGirl.gif b/assets/images/PinkStarGirl.gif
new file mode 100644
index 00000000..fa3e501a
Binary files /dev/null and b/assets/images/PinkStarGirl.gif differ
diff --git a/assets/images/TataroTile.gif b/assets/images/TataroTile.gif
new file mode 100644
index 00000000..590b5ae4
Binary files /dev/null and b/assets/images/TataroTile.gif differ
diff --git a/assets/images/arcade.jpg b/assets/images/arcade.jpg
new file mode 100644
index 00000000..af7bf856
Binary files /dev/null and b/assets/images/arcade.jpg differ
diff --git a/assets/images/background2.gif b/assets/images/background2.gif
new file mode 100644
index 00000000..9b20075e
Binary files /dev/null and b/assets/images/background2.gif differ
diff --git a/assets/images/background3.gif b/assets/images/background3.gif
new file mode 100644
index 00000000..41060121
Binary files /dev/null and b/assets/images/background3.gif differ
diff --git a/assets/images/background4.gif b/assets/images/background4.gif
new file mode 100644
index 00000000..1c188e87
Binary files /dev/null and b/assets/images/background4.gif differ
diff --git a/assets/images/bottleStar.gif b/assets/images/bottleStar.gif
new file mode 100644
index 00000000..8a2916bd
Binary files /dev/null and b/assets/images/bottleStar.gif differ
diff --git a/assets/images/byebye.gif b/assets/images/byebye.gif
new file mode 100644
index 00000000..d8bb5789
Binary files /dev/null and b/assets/images/byebye.gif differ
diff --git a/assets/images/catGhost.gif b/assets/images/catGhost.gif
new file mode 100644
index 00000000..7d77b3e5
Binary files /dev/null and b/assets/images/catGhost.gif differ
diff --git a/assets/images/flowchart.png b/assets/images/flowchart.png
new file mode 100644
index 00000000..59c93845
Binary files /dev/null and b/assets/images/flowchart.png differ
diff --git a/assets/images/gameplay.png b/assets/images/gameplay.png
new file mode 100644
index 00000000..10616a91
Binary files /dev/null and b/assets/images/gameplay.png differ
diff --git a/assets/images/legend.png b/assets/images/legend.png
new file mode 100644
index 00000000..8ec3595f
Binary files /dev/null and b/assets/images/legend.png differ
diff --git a/assets/images/panada.gif b/assets/images/panada.gif
new file mode 100644
index 00000000..0871435d
Binary files /dev/null and b/assets/images/panada.gif differ
diff --git a/assets/images/sailormoonTile.png b/assets/images/sailormoonTile.png
new file mode 100644
index 00000000..119a5c82
Binary files /dev/null and b/assets/images/sailormoonTile.png differ
diff --git a/assets/images/star2.gif b/assets/images/star2.gif
new file mode 100644
index 00000000..61e5783d
Binary files /dev/null and b/assets/images/star2.gif differ
diff --git a/assets/images/star3.gif b/assets/images/star3.gif
new file mode 100644
index 00000000..9a298658
Binary files /dev/null and b/assets/images/star3.gif differ
diff --git a/assets/images/star5.gif b/assets/images/star5.gif
new file mode 100644
index 00000000..6102f1ac
Binary files /dev/null and b/assets/images/star5.gif differ
diff --git a/assets/images/star6.gif b/assets/images/star6.gif
new file mode 100644
index 00000000..583407fc
Binary files /dev/null and b/assets/images/star6.gif differ
diff --git a/assets/images/superPink1.gif b/assets/images/superPink1.gif
new file mode 100644
index 00000000..34763001
Binary files /dev/null and b/assets/images/superPink1.gif differ
diff --git a/assets/images/superPink2.gif b/assets/images/superPink2.gif
new file mode 100644
index 00000000..81be696e
Binary files /dev/null and b/assets/images/superPink2.gif differ
diff --git a/assets/images/trip1.gif b/assets/images/trip1.gif
new file mode 100644
index 00000000..66ecd96b
Binary files /dev/null and b/assets/images/trip1.gif differ
diff --git a/assets/images/trip2.gif b/assets/images/trip2.gif
new file mode 100644
index 00000000..899df96f
Binary files /dev/null and b/assets/images/trip2.gif differ
diff --git a/assets/js/script.js b/assets/js/script.js
index e69de29b..25dae3ca 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -0,0 +1,206 @@
+// star catching//
+
+class Flower {
+  constructor () {
+    this.index = this.colorFn()
+    this.color = this.index.color
+    this.points = this.index.points
+    this.element = $(`<div class="flower" data-score=${this.points}>`)
+    setInterval(() => {
+      this.fall()
+    }, 90)
+  }
+
+  colorFn () {
+    var colorSet = [
+      {
+        points: -3,
+        speed: 55,
+        sec: -1.5,
+        img: 'url(./assets/images/catGhost.gif)'
+      },
+      {
+        points: 1,
+        speed: 60,
+        sec: 0,
+        img: 'url(./assets/images/star2.gif)'
+      },
+      {
+        points: 2,
+        speed: 65,
+        sec: 0,
+        img: 'url(./assets/images/star3.gif)'
+      },
+      {
+        points: 3,
+        speed: 75,
+        sec: 0,
+        img: 'url(./assets/images/star6.gif)'
+      },
+      {
+        points: 4,
+        speed: 85,
+        sec: 1,
+        img: 'url(./assets/images/bottleStar.gif)'
+      }
+    ]
+
+    var colorIndex = Math.floor(Math.random() * colorSet.length)
+
+    this.sec = colorSet[colorIndex].sec
+    this.speed = colorSet[colorIndex].speed
+    this.img = colorSet[colorIndex].img
+    return colorSet[colorIndex]
+  }
+
+  fall () {
+    var position = this.element.position()
+    this.element.css('top', position.top + this.speed)
+    if (position.top > '600') {
+      this.element.remove()
+    }
+  }
+}
+
+class Player {
+  constructor () {
+    this.name = 'player'
+    this.element = $('<div class="playerOne">')
+  }
+}
+
+$(function () {
+  var $playerOne = $('.playerOne')
+  var $container = $('.container')
+  var $playerPos = $playerOne.position()
+  var $flower = $('.flower')
+  var $flowerPos = $flower.position()
+  var score = 0
+  var highScoreArr = JSON.parse(localStorage.getItem('HighScore'))
+  if(!highScoreArr) highScoreArr = [120, 100, 300];
+  highScoreArr.sort((a, b) => b - a)
+
+  var timer = 30
+  var create
+  var play = createPlayerOne()
+  var find = setInterval(detect, 50)
+  var flowerList = []
+  var flowerIndex = 0
+  var storage = window.localStorage
+  var timerInt
+
+  leaderBoard()
+  startGame()
+
+  function startGame () {
+    var $startbtn = $('#startbtn')
+    var $clickme = $('.clickme')
+
+    $startbtn.one('click', () => {
+      $clickme.css('display', 'none')
+      create = setInterval(createFlower, 50)
+      $timer = $('.timer')
+      timerInt = setInterval(() => {
+        timer = timer - 1
+        $timer.text('Time: ' + timer)
+        if (timer <= 0) {
+          gameOver()
+        }
+      }, 1000)
+    })
+  }
+
+  var $restartbtn = $('#restartbtn')
+  $restartbtn.one('click', () => { this.location.reload() })
+
+  function createFlower () {
+    var randomFlower = new Flower()
+    var $newFlower = randomFlower.element
+    $newFlower.css({
+      backgroundImage: randomFlower.img,
+      backgroundColor: randomFlower.color,
+      left: (Math.floor(Math.random() * 1150) + 'px')
+    })
+    flowerList.push(randomFlower)
+    flowerIndex++
+    $container.append($newFlower)
+  }
+
+  function createPlayerOne () {
+    var player = new Player()
+    var $newPlayer = player.element
+    $container.append($newPlayer)
+  }
+
+  $('body').on('keydown', $playerOne, function (event) {
+    var $playerOne = $('.playerOne')
+    var $playerPos = $playerOne.position()
+
+    switch (event.key) {
+      case 'ArrowRight':
+        if ($playerPos.left < 1050) $('.playerOne').css('left', $playerPos.left + 50)
+        break
+      case 'ArrowLeft':
+        if ($playerPos.left > 0) $('.playerOne').css('left', $playerPos.left - 50)
+        break
+    }
+  })
+
+  function detect () {
+    var $playerOne = $('.playerOne')
+    var $playerPos = $playerOne.position()
+    var $score = $('.score')
+
+    for (var key in flowerList) {
+      var $flower = flowerList[key].element
+      var $flowerPos = $flower.position()
+
+      if ($playerPos.left <= $flowerPos.left + $flower.width() &&
+      $playerPos.left + $playerOne.width() >= $flowerPos.left &&
+      $playerPos.top <= $flowerPos.top + $flower.height()) {
+        var indiFlower = flowerList.splice(key, 1)
+
+        score += indiFlower[0].points
+        timer += indiFlower[0].sec
+        $score.text(`Score: ${score}`)
+
+        indiFlower[0].element.remove()
+      }
+    }
+  }
+
+  function gameOver () {
+    var $allFlowers = $('.flower')
+    var $gameOverScreen = $('.gameover')
+    var $gameStart = $('.gamestart')
+    var $highscore = $('.highscore')
+
+    $allFlowers.remove()
+    clearInterval(create)
+    clearInterval(find)
+    clearInterval(timerInt)
+
+    $gameStart.css('display', 'block')
+    $highscore.css('display', 'block')
+    $gameOverScreen.text(`Score: ${score}`)
+    $highscore.text(`HighScore: ${highScoreArr[0]}
+                     HighScore: ${highScoreArr[1]}
+                     HighScore: ${highScoreArr[2]}`)
+
+    $('.playerOne').css('backgroundImage', 'url(./assets/images/superPink2.gif)')
+
+    if (!highScoreArr.includes(score)) {
+      highScoreArr.push(score)
+      localStorage.setItem('HighScore', JSON.stringify(highScoreArr))
+      $gameOverScreen.css('display', 'block')
+
+      console.log(storage)
+    }
+  }
+  function leaderBoard () {
+    var $leaderBoard = $('.leaderBoard')
+    $leaderBoard.text(`First: ${highScoreArr[0]}
+                   Second: ${highScoreArr[1]}
+                   Third: ${highScoreArr[2]}`)
+  }
+})
diff --git a/assets/sound/flicker.mp3 b/assets/sound/flicker.mp3
new file mode 100644
index 00000000..27cd2ea2
Binary files /dev/null and b/assets/sound/flicker.mp3 differ
diff --git a/assets/sound/shelter.mp3 b/assets/sound/shelter.mp3
new file mode 100644
index 00000000..90a969a5
Binary files /dev/null and b/assets/sound/shelter.mp3 differ
diff --git a/index.html b/index.html
index 5b002212..a1bbc6e6 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,65 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title></title>
-    <link rel="stylesheet" href="css/style.css">
+    <title>Star Power !</title>
+    <link rel="stylesheet" type= "text/css" href="./assets/css/stylesheet.css">
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
   </head>
   <body>
-    <script src="js/script.js" charset="utf-8"></script>
+    <!-- <h1> Star Power !</h1> -->
+    <aside class ="leaderBoard">
+    </aside>
+    <aside class ="sideinstructions">
+      <h3> ArrowKeys to move Left & Right. Avoid Ghost! Collect Stars! 30seconds! Go! </h3>
+    </aside>
+
+      <div class = "container">
+        <div class = "clickme">
+          <h5> Star Power! </h5>
+          <button id="startbtn" type="button "><img src="./assets/images/PinkCatGirl.gif"></button>
+          <h5> Click Me! </h5>
+
+        </div>
+        <audio src="./assets/sound/flicker.mp3"autoplay>
+        </audio>
+
+        <div class = "timer">
+          Time: 30
+        </div>
+        <div class = "score">
+          Score: 0
+        </div>
+        <div class = "gameover">
+          <h6>Score: 0</h6>
+        </div>
+        <div class = "highscore">
+        </div>
+      </div>
+
+
+  <div class = "bottom">
+    <div class = "instructions">
+       <h2> <img src="./assets/images/catGhost.gif">
+            <img src="./assets/images/star2.gif">
+            <img src="./assets/images/star3.gif">
+            <img src="./assets/images/star6.gif">
+            <img src="./assets/images/bottleStar.gif">
+       </h2>
+       <div class="wrapper">
+        <div class="one">Score:-3 Time:-1.5s</div>
+        <div class="two">Score:+1 Time:+0</div>
+        <div class="three">Score:+2 Time:+0 </div>
+        <div class="four">Score:+3 Time:+0s</div>
+        <div class="five">Score:+4 Time:+1s</div>
+      </div>
+       </div>
+
+        <div class = "gamestart">
+          <button id="restartbtn">Play Again</button>
+        </div>
+  </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="./assets/js/script.js" charset="utf-8"></script>
   </body>
 </html>