diff --git a/app/views/about.scala.html b/app/views/about.scala.html
index c36d831..e18271a 100644
--- a/app/views/about.scala.html
+++ b/app/views/about.scala.html
@@ -3,12 +3,9 @@
 @imports = {
 	<!-- <script src='@routes.Assets.at("javascripts/browser.js")' defer></script> -->
 	
-	<link href='@routes.Assets.at("stylesheets/index.css")' rel='stylesheet'>
+	<link href='@routes.Assets.at("stylesheets/about.css")' rel='stylesheet'>
 }
 
 @main(message, imports, version) {
-	<div>
-		<h1>LS stands for "Location Service"</h1>
-		<p>LS is a service to provide information about locations.</p>
-	</div>
+	<iframe class="center-block full-width full-height" src="https://docs.google.com/document/d/1aBj5Vkxmme6MiAPmAF71xDLKHxPfVK8gbf6l0eoxTSA/pub?embedded=true"></iframe>
 }
diff --git a/public/stylesheets/about.css b/public/stylesheets/about.css
new file mode 100644
index 0000000..e69de29
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index 737a330..682d38b 100644
--- a/public/stylesheets/main.css
+++ b/public/stylesheets/main.css
@@ -1,3 +1,28 @@
+@media only screen and (min-height: 1024px) {
+	.full-height {
+		height: 800px;
+	}
+}
+
+@media only screen and (max-height: 944px) {
+	.full-height {
+		height: 700px;
+	}
+}
+
+@media only screen and (max-height: 700px) {
+	.full-height {
+		height: 400px;
+	}
+}
+
+@media only screen and (max-height: 412px) {
+	.full-height {
+		height: 200px;
+	}
+}
+
+
 body {
 	background-color: rgb(237, 238, 247);
 }
@@ -29,6 +54,10 @@ legend {
 	text-indent: 5px;
 }
 
+.full-width {
+	width: 100%;
+}
+
 .azure {
 	background-color: #F0FFFF;
 }