diff --git a/app/instructionalSupport/studentSupportCallForm/StudentSupportCallForm.html b/app/instructionalSupport/studentSupportCallForm/StudentSupportCallForm.html
index 48204b81b..ae969a50e 100644
--- a/app/instructionalSupport/studentSupportCallForm/StudentSupportCallForm.html
+++ b/app/instructionalSupport/studentSupportCallForm/StudentSupportCallForm.html
@@ -30,8 +30,8 @@
 		<div class="student-support-call-form__page">
 			<div class="student-support-call-form__main">
 				<confirm-eligible support-call-response="view.state.supportCallResponse"></confirm-eligible>
-				<student-availabilities state="view.state"></student-availabilities>
 				<student-preferences state="view.state"></student-preferences>
+				<student-availabilities state="view.state"></student-availabilities>
 				<student-qualifications support-call-response="view.state.supportCallResponse"></student-qualifications>
 				<student-comments support-call-response="view.state.supportCallResponse"></student-comments>
 			</div>
diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.html b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.html
index 04891d085..b2506fcf2 100644
--- a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.html
+++ b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.html
@@ -1,2 +1,3 @@
 <div class="crn-available">
+	crn
 </div>
\ No newline at end of file
diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.js b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.js
index ff7a48b4f..968f2103d 100644
--- a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.js
+++ b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/crnAvailable/crnAvailable.js
@@ -3,21 +3,8 @@ instructionalSupportApp.directive("crnAvailable", this.crnAvailable = function (
 		restrict: 'E',
 		templateUrl: 'crnAvailable.html',
 		replace: true,
-		scope: {
-			state: '<'
-		},
 		link: function (scope, element, attrs) {
-			scope.props = {};
-
-			scope.$watch('state',function() {
-				scope.mapStateToProps(scope.state);
-			});
-
-			scope.mapStateToProps = function(state) {
-				scope.props.state = state;
-			};
-
-			scope.mapStateToProps(scope.state);
+			// Intentionally empty
 		}
 	};
 });
\ No newline at end of file
diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.css b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.css
index e69de29bb..384712728 100644
--- a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.css
+++ b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.css
@@ -0,0 +1,5 @@
+.grid-available {
+	border: 1px solid #ebebeb;
+	border-radius: 3px;
+	padding: 10px;
+}
\ No newline at end of file
diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.html b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.html
index 005ad12a7..4c6480a4f 100644
--- a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.html
+++ b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.html
@@ -1,2 +1,5 @@
 <div class="grid-available">
+	<availability-grid blob="state.supportCallResponse.availabilityBlob"
+		on-change="saveSupportCallResponse(blob, 500)">
+	</availability-grid>
 </div>
\ No newline at end of file
diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.js b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.js
index 68fc319f2..8115f85f5 100644
--- a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.js
+++ b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/gridAvailable/gridAvailable.js
@@ -1,23 +1,21 @@
-instructionalSupportApp.directive("gridAvailable", this.gridAvailable = function () {
+instructionalSupportApp.directive("gridAvailable", this.gridAvailable = function (studentActions, $timeout) {
 	return {
 		restrict: 'E',
 		templateUrl: 'gridAvailable.html',
 		replace: true,
-		scope: {
-			state: '<'
-		},
 		link: function (scope, element, attrs) {
-			scope.props = {};
 
-			scope.$watch('state',function() {
-				scope.mapStateToProps(scope.state);
-			});
+			scope.saveSupportCallResponse = function(newBlob, delay) {
+				scope.state.supportCallResponse.availabilityBlob = newBlob;
 
-			scope.mapStateToProps = function(state) {
-				scope.props.state = state;
+				// Report changes back to server after some delay
+				$timeout.cancel(scope.timeout);
+				scope.timeout = $timeout(function() {
+					studentActions.updateAvailability(scope.state.supportCallResponse);
+				}, delay);
 			};
 
-			scope.mapStateToProps(scope.state);
+			scope.timeout = {};
 		}
 	};
 });
\ No newline at end of file
diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.css b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.css
index e69de29bb..1a76f010e 100644
--- a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.css
+++ b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.css
@@ -0,0 +1,27 @@
+.student-availabilities__header-container {
+	display: flex;
+	justify-content: space-between;
+}
+
+.student-availabilities__header {
+	flex: 1 1 0px;
+}
+
+.student-availabilities__legend {
+	flex: 1 1 0px;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.student-availabilities__unavailable-color {
+	background-color: #ccc;
+}
+
+.student-availabilities__available-color {
+	background-color: white;
+}
+
+.student-availabilities__question {
+	padding-left: 5px;
+}
\ No newline at end of file
diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.html b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.html
index 085494018..a8e3f818d 100644
--- a/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.html
+++ b/app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.html
@@ -1,2 +1,26 @@
-<div class="student-availabilities">
+<div class="student-availabilities" ng-show="state.supportCallResponse.collectAvailabilityByGrid || state.supportCallResponse.collectAvailabilityByCrn">
+	<div class="student-availabilities__header-container">
+		<div class="student-availabilities__header">
+			<h5>Please indicate your un-availabilities</h5>
+		</div>
+		<div class="student-availabilities__legend">
+			<small class="legend">
+				<div class="legend-square student-availabilities__available-color"></div>Available
+				<div class="legend-square student-availabilities__unavailable-color"></div>Unavailable
+			</small>
+			<div
+			class="student-availabilities__question"
+			tooltip-placement="left"
+			uib-tooltip="You can left click and drag to paint unavailability on the grids below.">
+				<i class="glyphicon glyphicon-question-sign"></i>
+			</div>
+		</div>
+	</div>
+
+	<div ng-show="state.supportCallResponse.collectAvailabilityByGrid">
+		<grid-available></grid-available>
+	</div>
+	<div ng-show="state.supportCallResponse.collectAvailabilityByCrn">
+		<crn-available></crn-available>
+	</div>
 </div>
\ No newline at end of file
diff --git a/app/instructionalSupport/studentSupportCallForm/services/studentActions.js b/app/instructionalSupport/studentSupportCallForm/services/studentActions.js
index a78c7c705..56752ebce 100644
--- a/app/instructionalSupport/studentSupportCallForm/services/studentActions.js
+++ b/app/instructionalSupport/studentSupportCallForm/services/studentActions.js
@@ -48,6 +48,19 @@ instructionalSupportApp.service('studentActions', function ($rootScope, $window,
 				$rootScope.$emit('toast', { message: "Could not update qualifications.", type: "ERROR" });
 			});
 		},
+		updateAvailability: function(supportCallResponse) {
+			console.log("update avail");
+			studentService.updateSupportCallResponse(supportCallResponse).then(function (payload) {
+				$rootScope.$emit('toast', { message: "Updated availability.", type: "SUCCESS" });
+				var action = {
+					type: UPDATE_SUPPORT_CALL_RESPONSE,
+					payload: payload
+				};
+				studentReducers.reduce(action);
+			}, function (err) {
+				$rootScope.$emit('toast', { message: "Could not update qualifications.", type: "ERROR" });
+			});
+		},
 		updateSupportCallResponse: function (supportCallResponse) {
 			studentService.updateSupportCallResponse(supportCallResponse).then(function (payload) {
 				$rootScope.$emit('toast', { message: "Updated preferences", type: "SUCCESS" });
diff --git a/app/instructionalSupport/studentSupportCallForm/services/studentReducers.js b/app/instructionalSupport/studentSupportCallForm/services/studentReducers.js
index 3b74513c1..de85ffbdf 100644
--- a/app/instructionalSupport/studentSupportCallForm/services/studentReducers.js
+++ b/app/instructionalSupport/studentSupportCallForm/services/studentReducers.js
@@ -137,11 +137,20 @@ instructionalSupportApp.service('studentReducers', function ($rootScope, $log, s
 					if (!supportCallResponse) {
 						return null;
 					}
-					supportCallResponse.dueDateDescription = millisecondsToDate(supportCallResponse.dueDate);
+					if (!supportCallResponse.availabilityBlob) {
+						supportCallResponse.availabilityBlob =
+								"1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,"
+							+ "1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,"
+							+ "1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,"
+							+ "1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,"
+							+ "1,1,1,1,1,1,1,1,1,1,1,1,1,1,1";
+					}
+
+					supportCallResponse.dueDateDescription = supportCallResponse.dueDate ? millisecondsToDate(supportCallResponse.dueDate) : "";
 					return supportCallResponse;
 				case UPDATE_SUPPORT_CALL_RESPONSE:
 					supportCallResponse = action.payload;
-					supportCallResponse.dueDateDescription = millisecondsToDate(supportCallResponse.dueDate);
+					supportCallResponse.dueDateDescription = supportCallResponse.dueDate ? millisecondsToDate(supportCallResponse.dueDate) : "";
 					return supportCallResponse;
 				default:
 					return supportCallResponse;
diff --git a/app/shared/css/shared.css b/app/shared/css/shared.css
index 732b8c3c9..404b6edcc 100644
--- a/app/shared/css/shared.css
+++ b/app/shared/css/shared.css
@@ -78,7 +78,8 @@ table.availability-grid {
 table.availability-grid tr th {
 	border: none;
 	font-weight: normal;
-	padding: 0 !important;
+	padding: 10px;
+	text-align: center;
 }
 
 table.availability-grid tr th.left {
@@ -88,7 +89,6 @@ table.availability-grid tr th.left {
 
 table.availability-grid tr th.hover {
 	color: #BA0C2F;
-	font-weight: bold;
 }
 
 table.availability-grid tr td.unavailable {
@@ -96,7 +96,7 @@ table.availability-grid tr td.unavailable {
 }
 
 table.availability-grid tr td {
-	border-top: 1px solid #ddd !important;
+	border: 1px solid #ddd;
 }
 
 .legend-square {