diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js
index bc31443..4e738f9 100644
--- a/docs/assets/js/index.js
+++ b/docs/assets/js/index.js
@@ -19,13 +19,14 @@ var globalStates = {
     end: 4,
     building: 5
 };
-var globalState = globalStates.playing;
+var globalState = globalStates.titleScreen;
 
 function update() {
+        
     switch (globalState) {
         // title screen
         case globalStates.titleScreen:
-
+            handleTitleScreen();
             break;
         // level transition
         case globalStates.levelTransition:
@@ -61,7 +62,7 @@ function draw() {
     switch (globalState) {
         // title screen
         case globalStates.titleScreen:
-
+            drawTitleScreen();
             break;
         // level transition
         case globalStates.levelTransition:
diff --git a/docs/assets/js/titleScreen/titleScreen.js b/docs/assets/js/titleScreen/titleScreen.js
index e69de29..3e8e08e 100644
--- a/docs/assets/js/titleScreen/titleScreen.js
+++ b/docs/assets/js/titleScreen/titleScreen.js
@@ -0,0 +1,81 @@
+var titleScreenState = "main"
+var cursor = mousePos;
+var timer = 0;
+
+function handleTitleScreen(){
+    
+    switch(titleScreenState){
+        
+        case("main"):
+            handleMainScreen();
+            break;
+        case("credits"):
+            handleCredits();
+            break;
+
+
+
+    }
+    
+    
+}
+
+
+function handleMainScreen(){
+    if(timer > 20){
+        if(rectpoint({x:415, y:200, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+            globalState = globalStates.playing;
+            timer = 0;
+        }
+        if(rectpoint({x:415, y:550, w: 300, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+            titleScreenState = "credits"
+            timer = 0;
+        }
+    }else{
+        timer++;
+    }
+}
+
+
+function handleCredits(){
+
+    if(timer > 20){
+        if(rectpoint({x:395, y:550, w: 140, h: 50}, {x:cursor.x, y:cursor.y}) && mouseDown[0]){
+            titleScreenState = "main";
+            timer = 0;
+        }
+    }else{
+        timer++;
+    }
+    
+
+}
+
+
+
+function drawTitleScreen(){
+    
+    if(titleScreenState === "main"){
+        text("GAME TITLE HERE", 50, 50, "green", 8, 1000);
+        rect(415, 200, 300, 50, "green");
+        text("Play!", 355, 185, "white", 5, 150);
+
+        rect(415, 550, 300, 50, "green");
+        text("Credits", 325, 535, "white", 5, 150);
+    }
+
+    if(titleScreenState === "credits"){
+        text("CREDITS", 250, 50, "green", 8, 300);
+
+
+
+        rect(395, 550, 140, 50, "green");
+        text("Back", 345, 535, "white", 5, 150);
+
+    }
+
+
+
+
+
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index e5212f0..badf7e9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -46,7 +46,7 @@
 
         <script src="assets/js/playing/playing.js"></script>
 
-        <!-- <script src="assets/js/titleScreen/titleScreen.js"></script> -->
+        <script src="assets/js/titleScreen/titleScreen.js"></script>
         <script src="assets/js/UI/ui.js"></script>
 
         <!-- Webpage -->