diff --git a/public/background.jpg b/public/background.jpg
new file mode 100644
index 0000000..d699455
Binary files /dev/null and b/public/background.jpg differ
diff --git a/public/styles.css b/public/styles.css
index f54a0f0..77f8506 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -4,68 +4,81 @@
  * "npc" / Samuel Clements [ http://borntyping.co.uk ]
  */
 
-/* #quotelist {
-    padding: 10px;
-}
-
-.quotes {
-    border-left: 2px solid red;
-    padding: 10px;
-}
-
-.quote {
-    border-left: 2px solid blue;
-} */
-
 html {
-  background: url(http://dl.dropbox.com/u/13375195/depressionbot/images/background.jpg) no-repeat center center fixed;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
+    background: url("background.jpg") no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
 }
 
 body {
-  padding: 30px;
-  font-size: 46px;
-  font-family: "Lucida Grande";
-  font-weight: bold;
-  margin: 0;
-  color: black;
-  text-shadow: 1px 1px 2px #2B2B2B;
+    padding: 25px;
+    margin: 0;
+    font-family: "Lucida Grande";
+    color: black;
+    text-shadow: 1px 1px 2px #2B2B2B;
 }
 
-ul {
-  list-style: none;
+div#title {
+    font-size: 42px;
+    font-weight: bold;
+}
+
+div#main {
+    padding: 25px 0px;
+    margin: 0px; 
+    font-size: 21px;
+    text-align:center;
 }
 
 a {
-  width: 600px;
-  height: 150px;
-  margin: 25px auto;
-  display: block;
-  background: white;
-  box-shadow: 0 0 20px black;
-  padding: 20px;
-  border-radius: 15px;
-  opacity: 0.5;
-  color: #12699B;
-  text-align: center;
-  vertical-align: middle;
   text-decoration: none;
 }
 
-a:hover {
+div.quotes, div.quote {
+    color: #12699B;
+    box-shadow: 0 0 20px black;
+    opacity: 0.5;
+}
+
+/* Quotes list page */
+
+div.quotes {
+    background: white;
+    float: left;
+    display: inline;
+    margin: 10px;
+    padding: 20px;
+    border-radius: 15px;
+}
+
+div.quotes:hover {
   opacity: 0.8;
 }
 
-a span {
-  position: relative;
-  top: -60px;
+div.quotes a {
+
 }
 
-img {
-  width: 150px;
-  height: 150px;
-  background: url(http://dl.dropbox.com/u/13375195/depressionbot/images/null.png);
+/* Quote list pages */
+
+div#quotelist {
+    width:100%;
 }
+
+div#quotelist div.quote {
+    background: white;
+    border-radius: 5px;
+    margin: 10px auto;
+    padding: 10px;
+    font-size: 18px;
+    width:90%;
+    opacity: 0.7;
+    color:darkblue;
+    text-shadow: 1px 1px 1px black;
+}
+
+div#quotelist div.quote:hover {
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/views/layout.jade b/views/layout.jade
index 9f2e090..4709720 100644
--- a/views/layout.jade
+++ b/views/layout.jade
@@ -6,4 +6,5 @@ html(lang: 'en')
     title Depressionbot web interface
   body
     div#title Depressionbot web interface
-    !{body}
+    div#main
+        !{body}
diff --git a/views/quotelist.jade b/views/quotelist.jade
index d36ecc7..c33110c 100644
--- a/views/quotelist.jade
+++ b/views/quotelist.jade
@@ -1,4 +1,3 @@
-div#quotelist
-    -each quote in quotelist
-        div.category
-            a(href='/quotes/' + quote) #{quote}
+-each quote in quotelist
+    div.quotes
+        a(href='/quotes/'+quote) #{quote}
diff --git a/views/quotes.jade b/views/quotes.jade
index d14cc44..ce8a7a8 100644
--- a/views/quotes.jade
+++ b/views/quotes.jade
@@ -1,3 +1,3 @@
-div.quotes
+div#quotelist
     -each quote in quotes
         div.quote #{quote}