diff --git a/package.json b/package.json
index 1167126b..2c5c82be 100644
--- a/package.json
+++ b/package.json
@@ -6,17 +6,17 @@
     "autoprefixer-core": "~5.2.1",
     "connect-livereload": "~0.3.2",
     "cssnano": "~2.1.0",
-    "grunt": "~0.4.5",
+    "grunt": "^0.4.5",
     "grunt-bg-shell": "~2.3.1",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-flake8": "^0.1.3",
     "grunt-postcss": "~0.5.5",
     "grunt-sass": "^1.0.0",
-    "load-grunt-tasks": "~3.2.0",
+    "load-grunt-tasks": "^3.2.0",
     "pixrem": "~1.3.1"
   },
   "dependencies": {
-    "bower": "*"
+    "bower": "^1.8.0"
   },
   "engines": {
     "node": "~0.12.2"
diff --git a/static/django_templates/index.html b/static/django_templates/index.html
index b69f0c47..96af65b3 100644
--- a/static/django_templates/index.html
+++ b/static/django_templates/index.html
@@ -145,6 +145,7 @@
     <script type="text/javascript" src="{% static 'js/project/controllers/project-review.controller.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/project/controllers/my-tasks.controller.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/project/services/project.service.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/project/directives/project.directive.js' %}"></script>
 
     <script type="text/javascript" src="{% static 'js/payment/payment.module.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/payment/controllers/payment.controller.js' %}"></script>
diff --git a/static/js/project/directives/project.directive.js b/static/js/project/directives/project.directive.js
new file mode 100644
index 00000000..739f98b3
--- /dev/null
+++ b/static/js/project/directives/project.directive.js
@@ -0,0 +1,33 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('crowdsource.project.directives', [])
+        .directive('projectPreview', projectPreview);
+
+    function projectPreview(Project) {
+        return {
+            replace: true,
+            templateUrl: '/static/templates/project/public-preview.html',
+            restrict: 'A',
+            scope: {
+                projectPreview: '='
+            },
+            link: function (scope, elem, attrs, ctrl) {
+                scope.projectId = scope.projectPreview;
+
+                Project.getPreview(scope.projectId).then(
+                    function success(data) {
+                        scope.previewedProject = data[0];
+                    },
+                    function error(errData) {
+                    }
+                ).finally(function () {
+                });
+                console.log('scope.projectId');
+            }
+        };
+    }
+
+
+})();
diff --git a/static/js/project/project.module.js b/static/js/project/project.module.js
index 772db475..b41a2d9a 100644
--- a/static/js/project/project.module.js
+++ b/static/js/project/project.module.js
@@ -4,11 +4,14 @@
     angular
         .module('crowdsource.project', [
             'crowdsource.project.controllers',
-            'crowdsource.project.services'
+            'crowdsource.project.services',
+            'crowdsource.project.directives'
     ]);
 
     angular
         .module('crowdsource.project.controllers', []);
     angular
         .module('crowdsource.project.services', []);
-})();
\ No newline at end of file
+    angular
+        .module('crowdsource.project.directives', []);
+})();
diff --git a/static/templates/project/public-preview.html b/static/templates/project/public-preview.html
new file mode 100644
index 00000000..6c25ba0b
--- /dev/null
+++ b/static/templates/project/public-preview.html
@@ -0,0 +1,29 @@
+<div>
+    <div layout="row" class="layout-align-start-center _content-nav _relative"
+         ng-class="{'_sm': $mdMedia('sm'), '_gt-sm': $mdMedia('gt-sm')}">
+        <span class="_nav-title _truncated-text" style="max-width: 650px; margin-left: 32px">{{ previewedProject.name }}</span>
+
+    </div>
+    <div class="_main-content-body">
+        <div class="md-whiteframe-z1 md-padding">
+            <div>
+                <div style="font-size: large; font-weight: 500; color: rgba(0, 0, 0, 0.54); text-align: center; line-height: 36px">
+                    PREVIEWING A SAMPLE TASK
+                </div>
+                <div ng-cloak="" ng-controller="TemplateController as template" style="margin-left: 16px">
+                    <div style="font-weight: 500; color: rgba(0, 0, 0, 0.7);
+                    padding-bottom: 32px; font-size: large">Task #1
+                    </div>
+                    <div ng-cloak="" class="template-item"
+                         ng-repeat="item in previewedProject.task.template.items">
+                        <div md-template-compiler="item" editor="false" is-disabled="true" instance="template"
+                             is-review="false"></div>
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+    </div>
+
+</div>