diff --git a/analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc b/analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc
index e891b08..d0f82f7 100644
Binary files a/analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc and b/analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc differ
diff --git a/analytics/static/analytics/general.css b/analytics/static/analytics/general.css
index edbadaa..3214902 100644
--- a/analytics/static/analytics/general.css
+++ b/analytics/static/analytics/general.css
@@ -62,4 +62,16 @@
   .chart h4 {
     color: #009688; }
 
+.selector {
+  width: 80%;
+  height: 40px;
+  color: white;
+  padding-left: 5px;
+  background-color: #009688;
+  margin-top: 10px;
+  border-radius: 0px 20px 20px 0px; }
+  .selector p {
+    padding-top: 10px;
+    font-size: 16px; }
+
 /*# sourceMappingURL=general.css.map */
diff --git a/analytics/static/analytics/general.css.map b/analytics/static/analytics/general.css.map
index 090e9c2..9048f9f 100644
--- a/analytics/static/analytics/general.css.map
+++ b/analytics/static/analytics/general.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAEvB,eAAe;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEhB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;;AAIf,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;;AAEnD,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO",
+"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAEvB,eAAe;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEhB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;;AAIf,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;;AAEnD,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO;;AA4ErB,SAAS;EACL,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,iBAAiB;EAChC,WAAC;IACG,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI",
 "sources": ["general.sass"],
 "names": [],
 "file": "general.css"
diff --git a/analytics/static/analytics/general.sass b/analytics/static/analytics/general.sass
index 92f2460..a99e8ac 100644
--- a/analytics/static/analytics/general.sass
+++ b/analytics/static/analytics/general.sass
@@ -72,4 +72,16 @@ $title-color: #009688
     width: 30%
     float: left
     h4
-        color: $title-color
\ No newline at end of file
+        color: $title-color
+
+.selector
+    width: 80%
+    height: 40px
+    color: white
+    padding-left: 5px
+    background-color: #009688
+    margin-top: 10px
+    border-radius: 0px 20px 20px 0px
+    p
+        padding-top: 10px
+        font-size: 16px
\ No newline at end of file
diff --git a/analytics/static/analytics/js/behavior.js b/analytics/static/analytics/js/behavior.js
new file mode 100644
index 0000000..410367c
--- /dev/null
+++ b/analytics/static/analytics/js/behavior.js
@@ -0,0 +1,47 @@
+
+$(document).ready(function(){
+	selectors_options.init();
+});
+
+
+var selectors_options = {
+	init: function(){
+		selectors = $("div.selector");
+		selectors.click(function(e){
+			selectors_options.loadData(e.currentTarget);
+		});
+	},
+	loadData: function(e){
+		if (e){
+			if (e.attributes['data-url'].value == "subjects"){
+				var url = "/analytics/most_accessed_subjects";
+			}
+		}
+		if(url){
+			$.get(url, function(dataset){
+				return dataset;
+			}).done(function(data){
+				selectors_options.modifyElement(e, data);
+				
+			}).fail(function(error){
+				console.log("couldn't complete get request");
+			});
+		}
+	
+		
+	},
+	modifyElement: function(e, data){
+		var string_build = "";
+		string_build += "<ul>";
+		
+		data.forEach(function(datum){
+			string_build += '<li class="most-accessed-item">' +datum.name+ ' ' + datum.count+ '</li>';
+		});
+		string_build += "</ul>";
+		
+		$(e).append(string_build);
+
+		e.attributes.open = True;
+		
+	},
+};
diff --git a/analytics/templates/analytics/general.html b/analytics/templates/analytics/general.html
index b669eb7..4eac9f1 100644
--- a/analytics/templates/analytics/general.html
+++ b/analytics/templates/analytics/general.html
@@ -8,6 +8,7 @@
 
 {% block javascript %}
     <script type="text/javascript" src="{% static "analytics/js/charts.js" %}"></script>
+    <script type="text/javascript" src=" {% static "analytics/js/behavior.js" %} "></script>
 {% endblock javascript %}
 
 {% block breadcrumbs %}
@@ -70,18 +71,19 @@
                     </div>
 
                     <div id="left-data-selector">
-                        <ul>
-                            <li>
-                                {% trans "most accessed categories" %}
-                            </li>
-                            <li>
-                                {% trans "most accessed subjects" %}
-                            </li>
-                            <li>
-                                {% trans "most accessed resource" %}
-                            </li>
-                        </ul>
-                        
+                      
+                                <div class="selector">
+                                    <p>  {% trans "most accessed categories" %} </p>
+                                </div>
+                          
+                                <div class="selector" data-url="subjects">
+                                   <p> {% trans "most accessed subjects" %} </p>
+                                </div>
+                           
+                                <div class="selector">
+                                   <p> {% trans "most accessed resource" %} </p>
+                                </div>
+                         
                     </div>
 
                 </div>
--
libgit2 0.21.2