diff --git a/src/main/webapp/WEB-INF/pages/main_new.jsp b/src/main/webapp/WEB-INF/pages/main_new.jsp
index a5bf2da80..b1d6ae446 100644
--- a/src/main/webapp/WEB-INF/pages/main_new.jsp
+++ b/src/main/webapp/WEB-INF/pages/main_new.jsp
@@ -74,7 +74,7 @@
 		<button type="button" class="btn btn-primary btn-sm">Params/Cookies</button>
 		<button type="button" class="btn btn-primary btn-sm">Hints</button>
 		<button type="button" class="btn btn-primary btn-sm">Lesson Plan</button>
-		<button type="button" class="btn btn-primary btn-sm">Java [Source]</button>
+                <button type="button" class="btn btn-primary btn-sm" ng-click="showSource('lg')">Java [Source]</button>
 		<button type="button" class="btn btn-primary btn-sm">Solution</button>
             </div><!--toggle navigation end-->
         </header>
@@ -115,7 +115,7 @@
                		</div>
                 </div>
             
-               
+               <!--
                 <div class="row">
                		<div class="col-md-12">
                             <h4>Lesson Source Code</h4>
@@ -126,6 +126,7 @@
                			</div>
                		</div>
                 </div> 
+               -->
             </section>
         </section>
 
@@ -133,7 +134,6 @@
         
     </section>
     
-
 <!--     <script src="plugins/waypoints/waypoints.min.js"></script> -->
 <!--     <script src="js/application.js"></script> -->
 
@@ -216,4 +216,21 @@
 
         </script>
     </body>
+        <!-- Modals -->        
+        <script type="text/ng-template" id="showSource.html">
+            <div class="modal-header">
+                <button class="btn btn-primary pull-right" ng-click="ok()">Close</button>            
+                <h3 class="modal-title">Lesson Source</h3>
+                
+            </div>
+            <div class="modal-body">
+                <pre>{{lessonSource}}</pre>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary" ng-click="ok()">Close</button>                
+            </div>
+        </script>
+
+
+
 </html>
diff --git a/src/main/webapp/js/goat.js b/src/main/webapp/js/goat.js
index 1c53c82a8..c920e1b43 100644
--- a/src/main/webapp/js/goat.js
+++ b/src/main/webapp/js/goat.js
@@ -6,7 +6,7 @@
 /** Menu Controller
  *  prepares and updates menu topic items for the view
  */
-goat.controller('goatLesson', function($scope, $http) {
+goat.controller('goatLesson', function($scope, $http, $modal, $log) {
     //TODO: implement via separate promise and use config for menu
     $http({method: 'GET', url: 'service/lessonmenu.mvc'}).then(
             function(menuData) {
@@ -22,42 +22,75 @@ goat.controller('goatLesson', function($scope, $http) {
         console.log(url + ' was passed in');
         // use jquery to render lesson content to div
         loadLessonContent(url).then(
-			function(reply) {
-				$("#lesson_content").html(reply);
-				// hook forms
-				makeFormsAjax();
-				$('#lessonTitle').text(extractLessonTitle($(reply)));
-				// adjust menu to lessonContent size if necssary
-				if ($('div.panel-body').height() > 400) {
-				    $('#leftside-navigation').height($(window).height());
-				}
-			}
+                function(reply) {
+                    $("#lesson_content").html(reply);
+                    // hook forms
+                    makeFormsAjax();
+                    $('#lessonTitle').text(extractLessonTitle($(reply)));
+                    // adjust menu to lessonContent size if necssary
+                    if ($('div.panel-body').height() > 400) {
+                        $('#leftside-navigation').height($(window).height());
+                    }
+                }
         );
-
-        console.log("Updating Lesson Source...");
-        $http.get('service/source.mvc').success( function(data){
+        /*
+         console.log("Updating Lesson Source...");
+         $http.get('service/source.mvc').success(function(data) {
+         $scope.lessonSource = data.source;
+         }).error(function(data) {
+         $scope.lessonSource = data.message;
+         console.log("LessonSource = '" + data.message + "'");
+         });
+         */
+    };
+    /*
+     * Function to load lesson source
+     * @returns {undefined}
+     */
+    $scope.showSource = function(size) {
+        // fetch source from web service
+        $http.get('service/source.mvc').success(function(data) {
             $scope.lessonSource = data.source;
-        }).error( function(data){
+            $scope.openSourceModal(size);
+        }).error(function(data) {
             $scope.lessonSource = data.message;
             console.log("LessonSource = '" + data.message + "'");
+             $scope.openSourceModal(size);
         })
-    };
-})
-        .animation('.slideDown', function() {
-            var NgHideClassName = 'ng-hide';
-            return {
-                beforeAddClass: function(element, className, done) {
-                    if (className === NgHideClassName) {
-                        $(element).slideUp(done);
-                    }
-                },
-                removeClass: function(element, className, done) {
-                    if (className === NgHideClassName) {
-                        $(element).hide().slideDown(done);
-                    }
+
+    }
+
+    $scope.openSourceModal = function(size) {
+        var modalInstance = $modal.open({
+            templateUrl: 'showSource.html',
+            controller: showSourceController,
+            size: size,
+            resolve: {
+                lessonSource: function() {
+                    return $scope.lessonSource;
                 }
             }
         });
+        modalInstance.result.then(function() {
+            $log.info('Modal dismissed at: ' + new Date());
+        });
+    }
+
+}).animation('.slideDown', function() {
+    var NgHideClassName = 'ng-hide';
+    return {
+        beforeAddClass: function(element, className, done) {
+            if (className === NgHideClassName) {
+                $(element).slideUp(done);
+            }
+        },
+        removeClass: function(element, className, done) {
+            if (className === NgHideClassName) {
+                $(element).hide().slideDown(done);
+            }
+        }
+    }
+});
 
 
 //TODO add recursion to handle arr[i].children objects
@@ -80,12 +113,27 @@ goat.addMenuClasses = function(arr) {
 function loadLessonContent(_url) {
     //TODO: switch to $http (angular) later
     //return $http({method:'GET', url: _url});
-    return $.get(_url,{},null,"html");
-    
+    return $.get(_url, {}, null, "html");
+
 }
 
 function loadMenuData() {
     return $http({method: 'GET', url: 'service/lessonmenu.mvc'});
 }
 
+/* Controllers for modal instances */
+var showSourceController = function($scope, $modalInstance, lessonSource) {
+
+    $scope.lessonSource = lessonSource;
+
+    $scope.ok = function() {
+        $modalInstance.close();
+    };
+
+    $scope.cancel = function() {
+        $modalInstance.dismiss('cancel');
+    };
+};
+
+