diff --git a/config.js b/config.js
index f38884f..0b1f7d1 100644
--- a/config.js
+++ b/config.js
@@ -9,10 +9,12 @@ angular.module('flashy', [
     'flashy.StudyController',
     'flashy.UserService',
     'flashy.FlashcardDirective',
+    //'flashy.SelectDirective',
+    // DOESNT WORK RN
     'flashy.ResetPasswordController',
     'flashy.VerifyEmailController',
     'flashy.CardListController',
-	'flashy.SettingsController',
+    'flashy.SettingsController',
     'ngCookies']).
     config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) {
         'use strict';
diff --git a/home.html b/home.html
index f344bdc..d19f37f 100644
--- a/home.html
+++ b/home.html
@@ -163,6 +163,7 @@
 
 <!-- Directives -->
 <script src="scripts/FlashcardDirective.js"></script>
+<script src="scripts/SelectDirective.js"></script>
 
 <!-- Other -->
 <!--<script src="scripts/StudyController.js"></script>-->
diff --git a/scripts/SelectDirective.js b/scripts/SelectDirective.js
new file mode 100644
index 0000000..e9bb6a7
--- /dev/null
+++ b/scripts/SelectDirective.js
@@ -0,0 +1,38 @@
+/*  Credits to vinciciusmelquiades:
+https://github.com/viniciusmelquiades/firstExample/blob/master/app/src/directive/directive.js */
+(function () {
+    'use strict';
+
+    angular.module('flashy.SelectDirective', [])
+        .directive('select', materialSelect);
+    console.log("coming inside directive");
+    materialSelect.$inject = ['$timeout'];
+
+    function materialSelect($timeout) {
+        var directive = {
+            link: link,
+            restrict: 'E',
+            require: '?ngModel'
+        };
+
+        function link(scope, element, attrs, ngModel) {
+            $timeout(create);
+
+            if (ngModel) {
+                ngModel.$render = create;
+            }
+
+            function create() {
+                element.material_select();
+            }
+
+            //if using materialize v0.96.0 use this
+            element.one('$destroy', function () {
+                element.material_select('destroy');
+            });
+        }
+
+        return directive;
+    }
+
+})();
diff --git a/scripts/StudyController.js b/scripts/StudyController.js
index 5092d6f..6f814b1 100644
--- a/scripts/StudyController.js
+++ b/scripts/StudyController.js
@@ -6,13 +6,16 @@ controller('StudyController', ['$scope', '$stateParams', '$state', '$http', 'Use
         sectionId = $stateParams.sectionId;
 
         $(document).ready(function() {
-          $('.datepicker').pickadate({
-            selectMonths: true, // Creates a dropdown to control month
-            selectYears: 15 // Creates a dropdown of 15 years to control year
-          });
+            $('.datepicker').pickadate({
+                selectMonths: true, // Creates a dropdown to control month
+                selectYears: 15 // Creates a dropdown of 15 years to control year
+            });
+
+            $('select').material_select();
         });
 
         $scope.UserService = UserService;
+        $scope.isParamOpen = true;
 
         console.log($scope.UserService.getUserData().sections);
 
@@ -21,6 +24,15 @@ controller('StudyController', ['$scope', '$stateParams', '$state', '$http', 'Use
             $scope.sectionToStudy = id;
         };
 
+        $scope.openParams = function() {
+            $scope.isParamOpen = !$scope.isParamOpen;
+        }
+
+        $scope.fetchQuiz = function (a,b) {
+          //console.log($scope.startDate, $scope.endDate);
+          console.log(a,b);
+        }
+
 /*
         $scope.fetchQuiz = function() {
           console.log('fetching quiz...');
diff --git a/styles/flashy.css b/styles/flashy.css
index ff41a08..40d4194 100644
--- a/styles/flashy.css
+++ b/styles/flashy.css
@@ -364,6 +364,7 @@ md-content.md-default-theme {
     opacity: 0;
 }
 
+
 /*.repeated-card.ng-move + div div {*/
 /*background-color:blue;*/
 /*top: -150px;*/
@@ -396,7 +397,7 @@ margin: 0;
 }
 
 
-#resetPasswordForm{
+#resetPasswordForm
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
@@ -410,6 +411,26 @@ margin: 0;
 	width: 200px;
 }
 
-
-
-
+.study-params {
+  background-color: #f6f6f6;
+  height: 100%;
+  overflow: hidden;
+  transition: all 1.2s cubic-bezier(0, 0, 0.6, 1);
+  will-change: opacity;
+}
+.dropping.ng-enter {
+  height: 0%;
+  opacity: 0;
+}
+.dropping.ng-enter-active {
+  height: 100%;
+  opacity: 1;
+}
+.dropping.ng-leave {
+  height: 100%;
+  opacity: 1;
+}
+.dropping.ng-leave-active {
+  opacity: 0;
+  height: 0%;
+}
diff --git a/templates/study.html b/templates/study.html
index bf81fc0..1160a9d 100644
--- a/templates/study.html
+++ b/templates/study.html
@@ -1,43 +1,62 @@
 <!-- Parameters for the studying -->
-<div class="row">
-  <div class="col s6 offset-s3">
-    <h3>Choose what to study</h3>
-    <!-- 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">
-      <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>
 
-    <input type="date" class="datepicker">
+<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-init="isParamOpen = true" ng-if="isParamOpen">
+  <div class="row">
+        <h3>Choose what to study</h3>
+        <!-- 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">
+          <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 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>
+        </div>
+        -->
   </div>
-</div>
 
-<div class="row">
-  <div class="col s6 offset-s3">
-    <div class="card-action">
-      <button class="btn waves-effect waves-light" ng-click="fetchQuiz()">
-        Fetch!
-        <i class="mdi-content-send right"></i>
-      </button>
-    </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 class="row">
+      <div class="card-action">
+        <button class="btn waves-effect waves-light" ng-click="fetchQuiz()">
+          Fetch!
+          <i class="mdi-content-send right"></i>
+        </button>
+      </div>
   </div>
 </div>
 
+
 <!-- Fetched card "quiz" -->
 <div class="row">
-  <div class="col s6 offset-s3">
     <div class="card">
       <div class="card-content">
         <span ng-repeat="display in displayText">{{display}}<input ng-model="blank[displayText.indexOf(display)]" ng-show="displayText.indexOf(display) < blankText.length" class="" type="text"/></span>
@@ -48,5 +67,4 @@
         </button>
       </div>
     </div>
-  </div>
 </div>