diff --git a/home.html b/home.html
index 2a4ddb4..0627450 100644
--- a/home.html
+++ b/home.html
@@ -80,16 +80,16 @@
       <!-- Slide-in side-nav for small screens -->
       <ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo">
         <span ng-show="currentSection.id">
-          <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped">
+          <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})">
             <i class="mdi-action-view-module left"></i>
             Feed</a>
           </li>
-          <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped">
+          <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})">
             <i class="mdi-action-view-carousel left"> </i>
             Deck
           </a>
           </li>
-          <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped">
+          <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})">
             <i class="mdi-action-view-list left"></i>
             Card List
           </a>
diff --git a/scripts/StudyController.js b/scripts/StudyController.js
index 26c0a5d..ffc1998 100644
--- a/scripts/StudyController.js
+++ b/scripts/StudyController.js
@@ -29,24 +29,39 @@ controller('StudyController', ['$scope', '$stateParams', '$state', '$http', 'Use
             $scope.isParamOpen = !$scope.isParamOpen;
         };
 
+        $scope.toggleContent = function(event, index) {
+            if ($('#content-x').hasClass('open')) { // let's close it
+                // Note: 250 is duration (ms) of animation
+                $('#content-x').slideUp(250).removeClass('open');
+            } else { // let's open it
+                $('#content-x').slideDown(250).addClass('open');
+            }
+        };
+        
+
+        /*
         $scope.fetchQuiz = function(a, b) {
           //console.log($scope.startDate, $scope.endDate);
           console.log(a, b);
+          console.log($('#start-date').val());
         };
+        */
 
-/*
         $scope.fetchQuiz = function() {
           console.log('fetching quiz...');
           var studyRequest = {
-              'sections': ($scope.sectionToStudy == null) ? [] : [$scope.sectionToStudy],
-              'material_date_begin':,
-              'material_date_end':
+              'sections': ($scope.sectionToStudy == null) ? [] : [$scope.sectionToStudy]
           };
+          console.log('enddate:', $('#end-date').val() + 'T00:00:00Z');
+          console.log('study sect', $scope.sectionToStudy);
+
 
-//          $http.post('/api/study/', studyRequest).
-//TODO
+          $http.post('/api/study/', studyRequest).
+              success(function(data) {
+                  console.log('Fetched card:', data);
+              }).error(function(err) {
+              });
         };
-          */
 
   /* OLD STUFF :in case you still neeed it */
         // Flashcard content
diff --git a/templates/flashcard.html b/templates/flashcard.html
index 0e0a004..a26279f 100644
--- a/templates/flashcard.html
+++ b/templates/flashcard.html
@@ -19,8 +19,7 @@
       <div class="left-box">
         <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
       </div>
-      <div class="right-box" ng-click="
-          hideCard(flashcard)">
+      <div class="right-box" ng-click="hideCard(flashcard)">
         <div class="center-me"><i class="mdi-action-delete small"></i></div>
       </div>
 
diff --git a/templates/study.html b/templates/study.html
index da81b4d..ec7a424 100644
--- a/templates/study.html
+++ b/templates/study.html
@@ -1,48 +1,47 @@
-<!-- Parameters for the studying -->
-
-<div class="collapsible-header param-header"
-    ng-click="openParams()">
-<i class="mdi-image-filter-drama"></i>Choose study settings</div>
-
-<div class="study-params dropping" ng-show="isParamOpen">
-  <div class="row">
-        <h3>Choose what to study</h3>
+<div class="container">
+  <ul class="collection st-accordion">
+    <li class="st-accordion--item">
+      <div class="st-accordion--header" ng-click="toggleContent($event, $index)">
+        <i class="mdi-image-filter-drama"></i>
+        Choose what to study
+      </div>
+      <div id="content-x" class="st-accordion--content">
         <!-- lots of difficulty with materializecss select and angularjs. If we want to
         refactor into a select(which prob looks better), maybe refer to this article:
         http://stackoverflow.com/questions/29402495/values-not-showing-up-in-select-button
         -->
         <!-- Also suffered huge casualties trying to do radios...let's just do buttons...
         -->
-        <a class="waves-effect waves-light btn toggley"
-            ng-init="sectionToStudy = null"
-            ng-click="toggleSectionToStudy(null)"
-            ng-class="{'pink white-text': sectionToStudy == null}">
-            All classes</a>
-        <div ng-repeat="section in UserService.getUserData().sections">
+        <!-- Default: all classes button -->
+        <!-- Button for classes -->
+        <div class="card">
+          <!-- Default: all classes button -->
           <a class="waves-effect waves-light btn toggley"
-              ng-click="toggleSectionToStudy(section.id)"
-              ng-class="{'pink white-text': sectionToStudy == section.id}">
-              {{section.short_name}}
-          </a>
-        </div>
+              ng-init="sectionToStudy = null"
+              ng-click="toggleSectionToStudy(null)"
+              ng-class="{'pink white-text': sectionToStudy == null}">
+              All classes</a>
 
-<!--
-        <div class="input-field col s12">
-          <select ng-model="selectedClass"
-              ng-options="section.short_name for section in UserService.getUserData().sections">
-          </select>
-          <label>Materialize Select</label>
+          <!-- Buttons of rest of classes -->
+          <div ng-repeat="section in UserService.getUserData().sections">
+            <a class="waves-effect waves-light btn toggley"
+                ng-click="toggleSectionToStudy(section.id)"
+                ng-class="{'pink white-text': sectionToStudy == section.id}">
+                {{section.short_name}}
+            </a>
+          </div>
+        </div> <!-- end of buttons for classes -->
+        <div class="row">
+          <div class="card">
+            <h3>Choose Date</h3>
+            <input id="start-date" type="date" class="" ng-model="startDate" placeholder="Start Date"/>
+            <input id="end-date" type="date" class="" ng-model"endDate" placeholder="End Date"/>
+          </div>
         </div>
-        -->
-  </div>
 
-  <div class="row">
-      <div class="card">
-        <h3>Choose Date</h3>
-        <input type="date" class="datepicker" ng-model="startDate" placeholder="Start Date"/>
-        <input type="date" class="datepicker" ng-model"endDate" placeholder="End Date"/>
-      </div>
-  </div>
+      </div> <!-- end of #content-x -->
+    </li>
+  </ul>
 
   <div class="row">
       <div class="card-action">
@@ -52,7 +51,6 @@
         </button>
       </div>
   </div>
-</div>
 
 
 <!-- Fetched card "quiz" -->
@@ -68,3 +66,4 @@
       </div>
     </div>
 </div>
+</div> <!-- End of .container-->