diff --git a/index.html b/index.html
index 8608baa1..46a82375 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,10 @@
 triedel@utexas.edu
  
 Brief Description of Goal of Code:
-blah, blah, blah,
+This app is to be used as a diagnostic code to identify whether someone is struggling with burnout or temporary stress.
  
 Known Issues:
-blah, blah, blah, blah
+Feeling overwhelmed, emotionally exhausted, tired after resting, decrease in motivation, irritability, recent stress, numbness towards work or school
 Ignore this error message if you see it using the javaScript console: Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
 
 References:
@@ -29,8 +29,8 @@
 -->
 	
 <head> 
-	<title>Hello World</title>  
-]	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Burnout vs Temporary Stress</title>  
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<link rel="stylesheet" href="w3.css">
 	<link rel="stylesheet" href="w3-colors-flat.css">
@@ -38,7 +38,51 @@
 
 <script>
 
-	//YOUR JAVASCRIPT GOES HERE
+/* Counters */
+var burnout_score = 0;
+var stress_score = 0;
+var question_count = 0;
+
+function addBurnout(weight){
+    burnout_score += weight;
+    question_count += 1;
+}
+
+function addStress(weight){
+    stress_score += weight;
+    question_count += 1;
+}
+
+function showResults(){
+    var total = burnout_score + stress_score;
+    var resultText = document.getElementById("results");
+
+    if (total == 0){
+        resultText.innerHTML = "No answers selected.";
+        return;
+    }
+
+    var burnoutPercent = Math.round((burnout_score / total) * 100);
+    var stressPercent = Math.round((stress_score / total) * 100);
+
+    var message = "";
+
+    if (burnoutPercent >= 70){
+        message = "<br><br>You show strong signs of burnout.";
+    }
+    else if (stressPercent >= 70){
+        message = "<br><br>Your symptoms match those of temporary stress.";
+    }
+    else{
+        message = "<br><br>You show a mix of both patterns.";
+    }
+
+    resultText.innerHTML =
+        "Burnout Likelihood = " + burnoutPercent + "%<br>" +
+        "Temporary Stress Likelihood = " + stressPercent + "%" +
+        message;
+}
+
 
 </script>	
 
@@ -64,12 +108,138 @@
     left: 0vw;
     z-index: 1;
 }
+/* adding image requirement*/
+	img, object{
+		max-height: 90%;
+		max-width: 90%;
+}
+/* learned how to add pink and blue buttons so I'll add them here */
+.pink-btn{
+    background-color:#ff4da6;
+    color:white;
+}
+
+.blue-btn{
+    background-color:#4da6ff;
+    color:white;
+}
 </style>
 
 <body>
 	
-	<!-- HERE IS WHERE ALL OF YOUR HTML PAGES GO -->
-	REPLACE THIS TEXT
+	<div id="header" class="w3-container w3-flat-carrot">
+	<h1>Burnout or Temporary Stress?</h1>
+</div>
+	
+<div id="content" class="w3-container">
+	<p>Are you feeling like you might have burnout but wonder if it is just temporary stress. Answer a few short questions to find out!</p>
+	
+	<a href="#one" class="w3-btn w3-grey w3-round"> Get Started </a>
+
+	<h3>Take a calming moment</h3> <!--adding sakura image-->
+	<img id="calmImage" src="sakura.jpg" alt="Cherry blossoms"><!--had to change the formatting here and add my jpg-->
+	
+
+	
+	<p>The following code has been developed by students and/or researchers of the Freshman Research Initiative DIY Diagnostics Stream at The University of Texas at 		Austin.  This code is shared for demonstration purposes and should not be considered a product -- it is for entertainment purposes only. Any user of this code 			does so at their own risk. Members of the DIY Stream, FRI, and The University of Texas system are not liable for anything related to this code.</p>
+ 	
+	<p>THIS CODE SHOULD NOT BE USED TO DIAGNOSE ANY KIND OF MEDICAL CONDITION.</p>
+</div> 
+	
+<div class="page" id="one">
+	<div id="header" class="w3-container w3-flat-carrot">
+		<h1>Question 1</h1>
+	</div>
+	
+    	<div id="content" class="w3-container">
+        <p>Have you felt emotionally exhausted for more than 2 weeks?</p> 
+			<a href="#two" onclick= "addBurnout(1)" class="w3-btn pink-btn">Yes</a><!--buttons were acting out so I changed the formatting a bit-->
+			<a href="#two" onclick= "addStress(1)" class="w3-btn blue-btn">No</a>
+    	</div> <!-- My first question adding 2 buttons for burnout and stress and letting them be different colors-->
+</div>
+
+<div class="page" id="two">
+	<div class="w3-container w3-flat-carrot">
+		<h1>Question 2</h1>
+	</div>
+	
+	<div id="content" class="w3-container">
+		<p>Do you feel tired even after sleeping?</p>
+			<a href="#three" onclick= "addBurnout(1)" class="w3-btn pink-btn">Yes</a><!--adding number values inside for weighted scoring-->
+			<a href="#three" onclick= "addStress(1)" class="w3-btn blue-btn">No</a>
+	</div>
+</div>
+
+<div class="page" id="three">
+	<div class="w3-container w3-flat-carrot">
+		<h1>Question 3</h1>
+	</div>
+	
+    	<div id="content" class="w3-container">
+        <p>Have you lost motivation for things you usually care about?</p>    
+			<a href="#four" onclick= "addBurnout(1)" class="w3-btn pink-btn">Yes</a>
+			<a href="#four" onclick= "addStress(1)" class="w3-btn blue-btn">No</a>
+		</div><!--My third question buttons function the same as the last -->
+</div><!--Just figured out I need this div here for spacing. Had too many div's earlier so it was hard to read-->
+
+<div class="page" id="four">
+	<div class="w3-container w3-flat-carrot">
+		<h1>Question 4</h1>
+	</div>
+	
+    	<div id="content" class="w3-container">
+        <p>Do you feel detached or numb towards your school or work?</p>    
+			<a href="#five" onclick= "addBurnout(1)" class="w3-btn pink-btn">Yes</a>
+			<a href="#five" onclick= "addStress(1)" class="w3-btn blue-btn">No</a>
+		</div>
+</div>
+
+<div class="page" id="five">
+	<div class="w3-container w3-flat-carrot">
+		<h1>Question 5</h1>
+	</div>
+	
+    	<div id="content" class="w3-container">
+        <p>Are you more irritable than usual?</p>    
+			<a href="#six" onclick="addBurnout(1)" class="w3-btn pink-btn">Yes</a><!--changed button colors hehe-->
+			<a href="#six" onclick="addStress(1)" class="w3-btn blue-btn">No</a>
+		</div>
+</div>
+
+<div class="page" id="six"><!--change page -->
+	<div class="w3-container w3-flat-carrot">
+		<h1>Question 6</h1>
+	</div>
+	
+    	<div id="content" class="w3-container">
+        <p>Did this stress start recently (less than 2 weeks ago)?</p>    
+			<a href="#resultsPage" onclick="addStress(1)" class="w3-btn blue-btn">Yes</a>
+			<a href="#resultsPage" onclick="addBurnout(1)" class="w3-btn pink-btn">No</a>
+		</div>
+</div><!--the #resultsPage on the buttons are added to make sure this goes to the results page instead of page 7-->
+
+
+<div class="page" id="resultsPage"><!-- instead of page 7 I had to change this to results page-->
+	<div class="w3-container w3-flat-carrot">
+
+		<h1>Results</h1>
+	</div>
+
+	<div class="w3-container">
+
+		<button onclick="showResults()" class="w3-btn w3-green">
+			Show Results <!--Make sure to add this so it shows on the page-->
+		</button>
+
+		<p id="results"></p><!--make sure the page shows the results and identifies as the results page from the previous question-->
+
+	</div>
+</div>
+
+
+<footer class="w3-bottom w3-container w3-flat-carrot">
+	<p>DIY!</p>
+</footer><!--finished the app:) made sure the footer was here properly-->
 	
 </body>
 </html>
diff --git a/sakura.jpg b/sakura.jpg
new file mode 100644
index 00000000..e649ab29
Binary files /dev/null and b/sakura.jpg differ
