diff --git a/static/css/style.css b/static/css/style.css
index b63e4ba..6f7df4c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -114,7 +114,48 @@ stroke-dasharray:6px;
 .c2{ left:50%; background:blue; }
 .c3{ left:30%; background: yellow;}
 
+/* map legend */
 
+.box1 {
+  height: 15px;
+  width: 15px;
+  margin-left : 15px;
+  margin-top: 10px;
+
+  background-color: #bedbbb;
+}
+
+.box2 {
+  height: 15px;
+  width: 15px;
+  margin-left : 15px;
+  margin-top: 10px;
+  background-color: #92817a;
+}
+
+.box3 {
+  height: 15px;
+  width: 15px;
+  margin-left : 15px;
+  margin-top: 10px;
+  background-color: #707070;
+}
+
+.box4 {
+  height: 15px;
+  width: 15px;
+  margin-left : 15px;
+  margin-top: 10px;
+
+  background-color: #8db956;
+}
+
+.map_legend p {
+  padding-left: 15px;
+  font-family: 'Vesper Libre', serif;
+
+
+}
 /* text area */
 .thesis {
 overflow-y: scroll;
diff --git a/templates/hello.html b/templates/hello.html
index 93a40c1..eda5652 100644
--- a/templates/hello.html
+++ b/templates/hello.html
@@ -10,7 +10,13 @@
     </div>
     <div class="row">
       <div class="col-md-12">
+        <div class="map_legend">
         <p>Map legend</p>
+        <div class="box1"></div> <p>Folklore literature</p>
+        <div class="box2"></div> <p>Islamic Mysticism</p>
+        <div class="box3"></div> <p>Contemporary poets</p>
+        <div class="box4"></div> <p>Contemporary musicians</p>
+      </div>
       </div>
     </div>
   </div>