diff --git a/app/assets/javascripts/app.js.coffee b/app/assets/javascripts/app.js.coffee
index 48a5ab2..dcab302 100644
--- a/app/assets/javascripts/app.js.coffee
+++ b/app/assets/javascripts/app.js.coffee
@@ -1,4 +1,4 @@
-CourseRegistrationApp = angular.module('CourseRegistrationApp', ['Controllers', 'Services', 'Directives']);
+CourseRegistrationApp = angular.module('CourseRegistrationApp', ['Controllers', 'Services', 'Directives', 'filters']);
 
 CourseRegistrationApp.config(['$routeProvider', ($routeProvider) ->
 	$routeProvider.when('/', {templateUrl: '/views/requirements.html', controller: 'RequirementsController', resolve: {ClassesStub: 'ClassesStub'}})
@@ -6,4 +6,4 @@ CourseRegistrationApp.config(['$routeProvider', ($routeProvider) ->
 	$routeProvider.when('/search/:searchQuery', { templateUrl: '/views/courseList.html', controller: 'ClassListController', resolve: {ClassesStub: 'ClassesStub'} } );
 	$routeProvider.when('/requirements', { templateUrl: '/views/requirements.html', controller: 'RequirementsController', resolve: {ClassesStub: 'ClassesStub'}} )
 	$routeProvider.otherwise('/')
-]);
\ No newline at end of file
+]);
diff --git a/app/assets/javascripts/filters.js b/app/assets/javascripts/filters.js
new file mode 100644
index 0000000..0d7010b
--- /dev/null
+++ b/app/assets/javascripts/filters.js
@@ -0,0 +1,18 @@
+angular.module('filters', []).
+    filter('truncate', function () {
+        return function (text, length, end) {
+            if (isNaN(length))
+                length = 10;
+
+            if (end === undefined)
+                end = "...";
+
+            if (text.length <= length || text.length - end.length <= length) {
+                return text;
+            }
+            else {
+                return String(text).substring(0, length-end.length) + end;
+            }
+
+        };
+    });
diff --git a/public/views/courseList.html b/public/views/courseList.html
index af968c3..0a54f58 100644
--- a/public/views/courseList.html
+++ b/public/views/courseList.html
@@ -8,14 +8,23 @@
 		<div class="row" ng-repeat="course in classList">
 			<div class="panel panel-default">
 				<div class="panel-heading">
-					<h3 class="panel-title">{{course.className}}</h3>
-					<p>{{course.professor}}</p>
+					<div class="row">
+							<div class="col-md-6 col-sm-6 col-xs-6">
+								<h3 class="panel-title">{{course.className}}</h3>
+							</div>
+							<div class="col-md-6 col-sm-6 col-xs-6">
+								<p align="right">{{course.professor}}</p>
+							</div>
+					</div>
 				</div>
 				<div class="panel-body">
 					<div class="row">
-						<div class="col-md-6 col-sm-6 col-xs-6">
-							<p>{{course.description}}</p>
+						<div class="col-md-12 col-sm-12 col-xs-12">
+							<p>{{course.description|truncate:25:"..."}}</p> <!-- |truncate:25:"..." TODO: implement truncate-->
+							<button type="button" class="btn btn-info">More Info</button>
 						</div>
+					</div>
+					<div class="row">
 						<div class="col-md-6 col-sm-6 col-xs-6">
 							<div class="btn-group" ng-repeat="section in course.sections">
 								<div class="row">