diff --git a/kung-fu-quoting/client/kung-fu-quoting.css b/kung-fu-quoting/client/kung-fu-quoting.css
index be82a3b..7daf22d 100644
--- a/kung-fu-quoting/client/kung-fu-quoting.css
+++ b/kung-fu-quoting/client/kung-fu-quoting.css
@@ -1,16 +1,109 @@
+@font-face {
+    font-family: 'seven';
+    src: url('./font.ttf');
+}
+
+body {
+	font-family: "seven";
+	background-image: url('./bg.png');
+}
+
+p {
+	margin-bottom: 0%;
+}
+
+h1 {
+	display: inline;
+}
+
 #main {
 	margin: auto;
 	width: 66%;
-	background-color: red;
+	background-color: #CFAB5D;
 	padding: 2%;
+	padding-bottom: 3.5%;
 	margin-top: 2%;
 	border-radius: 15px;
+	height: 135px;
+
+	-webkit-box-shadow: 5px 5px 6px 2px #01030F;
+	box-shadow: 5px 5px 6px 2px #01030F;
+}
+
+.-autocomplete-container {
+    top: 35% !important;
+    background-color: #FCEDD1 !important;
+	width: 66% !important;
+    border-radius: 15px !important;
+}
+
+.options {
+	padding-top: 5%;
+}
+
+.-autocomplete-item.selected {
+	background-color: #85351C !important;
+    border-radius : 15px !important;
 }
 
 #spin {
-	margin-left: 10%;
+	float: right;
+	margin-top: -1.5%;
+    margin-right: 1;
+    text-align: center;
 }
 
 #legend {
 	font-size: 190%;
-}
\ No newline at end of file
+	font-family: "seven";
+	width: 75%;
+	margin-top: 4.5%;
+	margin-left: 3%;
+    background-color: #FCEDD1;
+    padding-left: 1%;
+
+}
+
+#spin > div {
+    padding-bottom: 25%;
+}
+
+#beforespin {
+	background-color: #79B766;
+	border-color: #01030F;
+}
+
+#afterspin {
+	background-color: #79B766;
+	border-color: #01030F;
+}
+
+.sub {
+	background-color: #79B766;
+
+	-webkit-transition: background-color 0.5s ease !important;
+	-moz-transition: background-color 0.5s ease !important;
+	-ms-transition: background-color 0.5s ease !important;
+	-o-transition: background-color 0.5s ease !important;
+	transition: background-color 0.5s ease !important;
+	border-color: #01030F !important;	
+}
+
+.add {
+	background-color: #79B766;
+
+	-webkit-transition: background-color 0.5s ease !important;
+	-moz-transition: background-color 0.5s ease !important;
+	-ms-transition: background-color 0.5s ease !important;
+	-o-transition: background-color 0.5s ease !important;
+	transition: background-color 0.5s ease !important;	
+	border-color: #01030F !important;
+}
+
+.sub:hover {
+	background-color: #537F47 !important;
+}
+
+.add:hover {
+	background-color: #537F47 !important;
+}
diff --git a/kung-fu-quoting/client/kung-fu-quoting.html b/kung-fu-quoting/client/kung-fu-quoting.html
index 3474945..68ec5c7 100644
--- a/kung-fu-quoting/client/kung-fu-quoting.html
+++ b/kung-fu-quoting/client/kung-fu-quoting.html
@@ -8,20 +8,23 @@
 
 <template name="hello">
   <div id="main">
-    {{> inputAutocomplete settings=settings id="legend" class="form-control" name="legend" placeholder="Quote Fragment" }}
+    <h1> Kung Fu Quoting </h1>
+    {{> inputAutocomplete settings=settings id="legend" class="form-control" name="legend" placeholder="Quote" }}
     <div id="spin">
-      <div>
+      <div id='before'>
         <p>Padding Before</p>
-        {{> numberSpinner min=0 max=10 value=0 id="before"}}
+        {{> numberSpinner min=0 max=10 value=0 id="beforespin"}}
       </div>
-      <div>
+      <div id='after'>
         <p>Padding After</p>
-        {{> numberSpinner min=0 max=10 value=0 id="after"}}
+        {{> numberSpinner min=0 max=10 value=0 id="afterspin"}}
       </div>
     </div>
   </div>
 </template>
 
 <template name="kung">
-	{{name}}
+  <div class="options">
+	 {{name}} 
+  </div>
 </template>
diff --git a/kung-fu-quoting/client/kung-fu-quoting.js b/kung-fu-quoting/client/kung-fu-quoting.js
index 1044052..b7462f7 100644
--- a/kung-fu-quoting/client/kung-fu-quoting.js
+++ b/kung-fu-quoting/client/kung-fu-quoting.js
@@ -1,10 +1,45 @@
-test = "";
+function playQuote () {
+  search = document.getElementById('legend').value;
+  before = document.getElementById('beforespin').value;
+  after = document.getElementById('afterspin').value;
+
+  document.getElementById('legend').value = "";
+  document.getElementById('beforespin').value = "0";
+  document.getElementById('afterspin').value = "0";
+
+
+  if (before === "" || before === NaN) {
+    before = 0;
+  } else {
+    before = parseInt(before) * 1000;
+  }
+
+  if (after === "" || after === NaN) {
+    after = 0;
+  } else {
+    after = parseInt(after) * 1000;
+  }
+
+  search = subtitles.find({"subtitle": search}).fetch()[0];
+
+  start = search['start'];
+  start = start.split(":");
+  start = 1000 * ((60 * 60 * parseInt(start[0])) + (60 * parseInt(start[1])) + parseInt(start[2]));
+
+
+  end = search.end;
+  end = end.split(":")
+  end = 1000 * ((60 * 60 * parseInt(end[0])) + (60 * parseInt(end[1])) + parseInt(end[2])) + 500;
+
+  mySound = new Audio("http://68.56.19.11:5000/getquote?start=" + (start - before) + "&end=" + (end + after) );
+  mySound.play();
+}
 
 Template.hello.helpers({
   settings: function() {
     return {
       position: "bottom",
-      limit: 10,
+      limit: 6,
       rules: [
         {
           token: '',
@@ -15,39 +50,19 @@ Template.hello.helpers({
         }
       ]
     };
-  },
-  sounurl: function() {
   }
 });
 
 Template.hello.events({
-  'click button': function() {
-    console.log("clicked");
-    
+  'click .options': function() {
+    playQuote();
   },
   'keyup #legend': function(event) {
-    search = document.getElementById('legend').value;
-    before = document.getElementById('before').value
-    if (before === "" || before === NaN) {
-      before = 0;
-    } else {
-      before = parseInt(before);
-    }
-    // search = "I figured it out. Skadoosh."
-    search = subtitles.find({"subtitle": search}).fetch()[0];
+    if (event.which === 13) {
+      playQuote();
+    };
+  },
 
-    start = search.start;
-    start = start.split(":")
-    start = 1000 * ((60 * 60 * parseInt(start[0])) + (60 * parseInt(start[1])) + parseInt(start[2]));
-
-    end = search.end;
-    end = end.split(":")
-    end = 1000 * ((60 * 60 * parseInt(end[0])) + (60 * parseInt(end[1])) + parseInt(end[2])) + 500;
-
-    mySound = new Audio("http://127.0.0.1:5000/getquote?start=" + start + "&end=" + (end + (1000*before)));
-    mySound.play();
-
-  }
 });
 
 Template.kung.helpers({
diff --git a/kung-fu-quoting/public/bg.png b/kung-fu-quoting/public/bg.png
new file mode 100644
index 0000000..b6691c8
Binary files /dev/null and b/kung-fu-quoting/public/bg.png differ
diff --git a/kung-fu-quoting/public/font.ttf b/kung-fu-quoting/public/font.ttf
new file mode 100644
index 0000000..e8b41e0
Binary files /dev/null and b/kung-fu-quoting/public/font.ttf differ