diff --git a/gip1.gif b/gip1.gif
new file mode 100644
index 0000000..3d2e6ae
Binary files /dev/null and b/gip1.gif differ
diff --git a/gip2.gif b/gip2.gif
new file mode 100644
index 0000000..c2fe93b
Binary files /dev/null and b/gip2.gif differ
diff --git a/giphy.gif b/giphy.gif
new file mode 100644
index 0000000..6e2f4c2
Binary files /dev/null and b/giphy.gif differ
diff --git a/index.html b/index.html
index 37d4af0..7297421 100644
--- a/index.html
+++ b/index.html
@@ -4,16 +4,18 @@
   <title>Javascript Tetris</title>
   <style>
     body      { font-family: Helvetica, sans-serif; }
-    #tetris   { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; }
+    #tetris   { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background: url(gip1.gif); }
     #stats    { display: inline-block; vertical-align: top; }
-    #canvas   { display: inline-block; vertical-align: top; background: url(texture.jpg); box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
+    #canvas   { display: inline-block; vertical-align: top; background: url(giphy.gif); box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
     #menu     { display: inline-block; vertical-align: top; position: relative; }
     #menu p   { margin: 0.5em 0; text-align: center; }
     #menu p a { text-decoration: none; color: black; }
-    #upcoming { display: block; margin: 0 auto; background-color: #E0E0E0; }
+    #upcoming { display: block; margin: 0 auto; background: url(giphy.gif); }
     #score    { color: red; font-weight: bold; vertical-align: middle; }
     #rows     { color: blue; font-weight: bold; vertical-align: middle; }
     #stats    { position: absolute; bottom: 0em; right: 1em; }
+    
+
     @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
     @media screen and (min-width: 400px) and (min-height: 400px)  { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width:  75px; height:  75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
     @media screen and (min-width: 500px) and (min-height: 500px)  { #tetris { font-size: 1.25em; width: 450px; } #menu { width: 200px; height: 400px; } #upcoming { width: 100px; height: 100px; } #canvas { width: 200px; height: 400px; } } /* 20px chunks */
@@ -25,13 +27,14 @@
 </head>
 
 <body>
+ <embed src="music.mp3" autostart="true" loop="true" hidden="true"> 
 
   <div id="tetris">
     <div id="menu">
       <p id="start"><a href="javascript:play();">Press Space to Play.</a></p>
       <p><canvas id="upcoming"></canvas></p>
-      <p>score <span id="score">00000</span></p>
-      <p>rows <span id="rows">0</span></p>
+      <p>Score <span id="score">00000</span></p>
+      <p>Rows <span id="rows">0</span></p>
     </div>
     <canvas id="canvas">
       Sorry, this example cannot be run because your browser does not support the &lt;canvas&gt; element
@@ -120,6 +123,10 @@
     var t = { size: 3, blocks: [0x0E40, 0x4C40, 0x4E00, 0x4640], color: 'purple' };
     var z = { size: 3, blocks: [0x0C60, 0x4C80, 0xC600, 0x2640], color: 'red'    };
 
+
+
+
+
     //------------------------------------------------
     // do the bit manipulation and iterate through each
     // occupied block (x,y) for a given piece
diff --git a/music.mp3 b/music.mp3
new file mode 100644
index 0000000..90cca67
Binary files /dev/null and b/music.mp3 differ
diff --git a/start.html b/start.html
new file mode 100644
index 0000000..43874b4
--- /dev/null
+++ b/start.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html> 
+<html>
+<head>
+  <title>Javascript Tetris</title>
+  <style>
+    body      { font-family: Helvetica, sans-serif; }
+     #tetris   { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background: url(gip1.gif); }
+    #stats    { display: inline-block; vertical-align: top; }
+    #menu     { display: inline-block; vertical-align: top; position: relative; }
+    #menu p   { margin: 0.5em 0; text-align: center; }
+    #menu p a { text-decoration: none; color: black; }
+    @media screen and (min-width:   0px) and (min-height:   0px)  { #tetris { font-size: 0.75em; width: 250px; } #menu { width: 100px; height: 200px; } #upcoming { width:  50px; height:  50px; } #canvas { width: 100px; height: 200px; } } /* 10px chunks */
+    @media screen and (min-width: 400px) and (min-height: 400px)  { #tetris { font-size: 1.00em; width: 350px; } #menu { width: 150px; height: 300px; } #upcoming { width:  75px; height:  75px; } #canvas { width: 150px; height: 300px; } } /* 15px chunks */
+    @media screen and (min-width: 500px) and (min-height: 500px)  { #tetris { font-size: 1.25em; width: 450px; } #menu { width: 200px; height: 400px; } #upcoming { width: 100px; height: 100px; } #canvas { width: 200px; height: 400px; } } /* 20px chunks */
+    @media screen and (min-width: 600px) and (min-height: 600px)  { #tetris { font-size: 1.50em; width: 550px; } #menu { width: 250px; height: 500px; } #upcoming { width: 125px; height: 125px; } #canvas { width: 250px; height: 500px; } } /* 25px chunks */
+    @media screen and (min-width: 700px) and (min-height: 700px)  { #tetris { font-size: 1.75em; width: 650px; } #menu { width: 300px; height: 600px; } #upcoming { width: 150px; height: 150px; } #canvas { width: 300px; height: 600px; } } /* 30px chunks */
+    @media screen and (min-width: 800px) and (min-height: 800px)  { #tetris { font-size: 2.00em; width: 750px; } #menu { width: 350px; height: 700px; } #upcoming { width: 175px; height: 175px; } #canvas { width: 350px; height: 700px; } } /* 35px chunks */
+    @media screen and (min-width: 900px) and (min-height: 900px)  { #tetris { font-size: 2.25em; width: 850px; } #menu { width: 400px; height: 800px; } #upcoming { width: 200px; height: 200px; } #canvas { width: 400px; height: 800px; } } /* 40px chunks */
+  </style>
+</head>
+
+<body>
+
+
+  <div id="tetris">
+    <div id="menu">
+  
+<style>
+
+.button {
+  display: inline-block;
+  padding: 15px 25px;
+  font-size: 24px;
+  cursor: pointer;
+  text-align: center;
+  align-content: center;
+  text-decoration: none;
+  outline: none;
+  color: #fff;
+  background-color: #4CAF50;
+  border: none;
+  border-radius: 15px;
+  box-shadow: 0 9px #999;
+}
+
+.button
+{
+  width: 150px;
+  text-align: center;
+   align-items: center;
+  alignment-baseline: central;
+  margin:5 auto;
+  right: -150px;
+
+
+}
+.button:hover {background-color: #3e8e41}
+
+.button:active {
+  background-color: #3e8e41;
+  box-shadow: 0 5px #666;
+  transform: translateY(4px);
+  align-content: center;
+}
+.button{
+   display: block;
+    margin-left: 500px;
+    position: absolute;
+    bottom: 250px;
+</style>
+ 
+<body>
+ 
+<a href="index.html" class="button">START</a>
+
+</body>
+<style>
+
+.Qbutton {
+  display: inline-block;
+  padding: 15px 25px;
+  font-size: 24px;
+  cursor: pointer;
+  text-align: center;
+  align-content: center;
+  text-decoration: none;
+  outline: none;
+  color: #fff;
+  background-color: #4CAF50;
+  border: none;
+  border-radius: 15px;
+  box-shadow: 0 9px #999;
+}
+
+.Qbutton
+{
+  width: 150px;
+  text-align: center;
+   align-items: center;
+  alignment-baseline: central;
+  margin:5 auto;
+  right: -150px;
+
+
+}
+.Qbutton:hover {background-color: #3e8e41}
+
+.Qbutton:active {
+  background-color: #3e8e41;
+  box-shadow: 0 5px #666;
+  transform: translateY(4px);
+  align-content: center;
+}
+.Qbutton{
+   display: block;
+    margin-left: 500px;
+    position: absolute;
+    bottom: 150px;
+</style>
+<body>
+ 
+<a href="Javascript:window.close()" class="Qbutton">QUIT</a>
+
+
+
+</body>
+
