diff --git a/public/modules/forms/admin/directives/design-form.client.directive.js b/public/modules/forms/admin/directives/design-form.client.directive.js
new file mode 100644
index 00000000..d786c91e
--- /dev/null
+++ b/public/modules/forms/admin/directives/design-form.client.directive.js
@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('forms').directive('designFormDirective', [
+    function () {
+        return {
+            templateUrl: 'modules/forms/admin/views/directiveViews/form/design-form.client.view.html',
+            restrict: 'E',
+            scope: {
+               myform:'=',
+               formurl: '='
+            }
+        }
+    }
+]);
\ No newline at end of file
diff --git a/public/modules/forms/admin/directives/edit-form.client.directive.js b/public/modules/forms/admin/directives/edit-form.client.directive.js
index 28cd0d6b..79f39e48 100644
--- a/public/modules/forms/admin/directives/edit-form.client.directive.js
+++ b/public/modules/forms/admin/directives/edit-form.client.directive.js
@@ -1,4 +1,3 @@
-
 'use strict';
 
 angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormFields', '$uibModal',
diff --git a/public/modules/forms/admin/directives/share-form.client.directive.js b/public/modules/forms/admin/directives/share-form.client.directive.js
new file mode 100644
index 00000000..ad8d1536
--- /dev/null
+++ b/public/modules/forms/admin/directives/share-form.client.directive.js
@@ -0,0 +1,16 @@
+'use strict';
+
+angular.module('forms').directive('shareFormDirective', ['$rootScope',
+    function ($rootScope) {
+        return {
+            templateUrl: 'modules/forms/admin/views/directiveViews/form/share-form.client.view.html',
+            restrict: 'E',
+            scope: {
+                actualformurl:'='
+            },
+            controller: function($scope){
+                $scope.actualFormURL = $scope.actualformurl;
+            }
+        };
+    }
+]);
\ No newline at end of file
diff --git a/public/modules/forms/admin/services/form-fields.client.service.js b/public/modules/forms/admin/services/form-fields.client.service.js
index d6dae5eb..dd1d7dec 100644
--- a/public/modules/forms/admin/services/form-fields.client.service.js
+++ b/public/modules/forms/admin/services/form-fields.client.service.js
@@ -4,7 +4,6 @@
 angular.module('forms').service('FormFields', [ '$rootScope', '$translate', '$window',
 	function($rootScope, $translate, $window) {
 		$translate.use($window.user.language);
-		console.log($translate.instant('SHORT_TEXT'));
 
 		this.types = [
 		    {
diff --git a/public/modules/forms/admin/views/admin-form.client.view.html b/public/modules/forms/admin/views/admin-form.client.view.html
index bbcc183b..17e9aa64 100644
--- a/public/modules/forms/admin/views/admin-form.client.view.html
+++ b/public/modules/forms/admin/views/admin-form.client.view.html
@@ -68,130 +68,11 @@
 				<uib-tab index="2" heading="{{ 'ANALYZE_TAB' | translate }}" select="deactivateDesignTab()">
 					<edit-submissions-form-directive myform="myform" user="myform.admin"></edit-submissions-form-directive>
 				</uib-tab>
-				<uib-tab ng-if="tabData" heading="{{ 'SHARE_TAB' | translate }}" index="{{tabData.length}}" select="deactivateDesignTab()">
-					<div class="config-form">
-						<div class="row">
-							<div class="col-sm-12">
-								<uib-tabset active="activePill" vertical="true" type="pills">
-									<uib-tab index="0" heading="{{ 'SHARE_YOUR_FORM' | translate }}">
-										<div class="row">
-											<div class="col-sm-12">
-												{{ 'TELLFORM_URL' | translate }}
-											</div>
-											<div class="col-sm-8 form-input">
-												<span ngclipboard data-clipboard-target="#copyURL"> <input id="copyURL" ng-value="actualFormURL" class="form-control ng-pristine ng-untouched ng-valid"> </span>
-											</div>
-											<div class="col-sm-4">
-												<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyURL">
-													{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
-												</button>
-											</div>
-										</div>
-									</uib-tab>
-									<uib-tab index="1" heading="{{ 'EMBED_YOUR_FORM' | translate }}">
-										<div class="row">
-											<div class="col-sm-12">
-												{{ 'COPY_AND_PASTE' | translate }}
-											</div>
-											<div class="col-sm-8 form-input">
-												<span ngclipboard data-clipboard-target="#copyEmbedded">
-													<textarea id="copyEmbedded" class="form-control ng-pristine ng-untouched ng-valid" style="min-height:200px; width:100%; background-color: #FFFFCC; color: #30313F;">
-														&lt;!-- {{ 'CHANGE_WIDTH_AND_HEIGHT' | translate }} --&gt;
-														<iframe id="iframe" src="{{actualFormURL}}" style="width:100%;height:500px;"></iframe>
-														<div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;">{{ 'POWERED_BY' | translate }} <a href="https://www.tellform.com" style="color: #999" target="_blank">TellForm</a></div>
-													</textarea>
-												</span>
-											</div>
-											<div class="col-sm-4">
-												<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyEmbedded">
-													{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
-												</button>
-											</div>
-										</div>
-									</uib-tab>
-								</uib-tabset>
-							</div>
-						</div>
-					</div>
+				<uib-tab ng-if="tabData" heading="{{ 'SHARE_TAB' | translate }}" index="3" select="deactivateDesignTab()">
+					<share-form-directive actualformurl="actualFormURL"></share-form-directive>
 				</uib-tab>
-				<uib-tab class="design-tab" ng-if="tabData && myform.form_fields.length" heading="{{ 'DESIGN_TAB' | translate }}" index="{{tabData.length}}+1"
-					select="activateDesignTab()">
-					<div class="config-form design container">
-						<div class="row">
-							<div class="col-sm-4 col-xs-12">
-								<div class="row field">
-									<div class="field-title col-sm-5">
-										<h5>{{ 'BACKGROUND_COLOR' | translate }}</h5>
-									</div>
-									<div class="field-input col-sm-6">
-										<input class="form-control" colorpicker="hex" type="text" 
-										ng-model="myform.design.colors.backgroundColor" 
-										ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
-										ng-style="{ 'background-color': myform.design.colors.backgroundColor }"/>
-									</div>
-								</div>
-
-								<div class="row field">
-									<div class="field-title col-sm-5">
-										<h5>{{ 'QUESTION_TEXT_COLOR' | translate }}</h5>
-									</div>
-
-									<div class="field-input col-sm-6">
-										<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.questionColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"ng-style="{ 'background-color': myform.design.colors.questionColor }"/>
-									</div>
-								</div>
-
-								<div class="row field">
-									<div class="field-title col-sm-5">
-										<h5>{{ 'ANSWER_TEXT_COLOR' | translate }}</h5>
-									</div>
-
-									<div class="field-input col-sm-6">
-										<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
-									</div>
-								</div>
-
-								<div class="row field">
-									<div class="field-title col-sm-5">
-										<h5>{{ 'BTN_BACKGROUND_COLOR' | translate }}</h5>
-									</div>
-
-									<div class="field-input col-sm-6">
-										<input class="form-control" colorpicker="hex" type="text"
-											   ng-model="myform.design.colors.buttonColor"
-											   ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
-											   ng-style="{ 'background-color': myform.design.colors.buttonColor }"/>
-									</div>
-								</div>
-								<div class="row field">
-									<div class="field-title col-sm-5">
-										<h5>{{ 'BTN_TEXT_COLOR' | translate }}</h5>
-									</div>
-
-									<div class="field-input col-sm-6">
-										<input class="form-control" colorpicker="hex" type="text"
-											   ng-model="myform.design.colors.buttonTextColor"
-											   ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
-											   ng-style="{ 'background-color': myform.design.colors.buttonTextColor }"/>
-									</div>
-								</div>
-							</div>
-							<div class="col-sm-8 hidden-xs" ng-if="designTabActive">
-								<div class="public-form" ng-style="{ 'background-color': myform.design.colors.backgroundColor }">
-									<iframe id="iframe" ng-if="!!formURL" ng-src="{{formURL | trustSrc}}" style="border: none; box-shadow: 0px 0px 10px 0px grey; overflow: hidden; height: 400px; width: 90%; position: absolute;"></iframe>
-								</div>
-							</div>
-						</div>
-
-						<div class="row">
-							<div class="col-sm-offset-4 col-sm-2">
-								<button class="btn btn-signup btn-rounded" type="button" ng-click="updateDesign(false, myform, false, false)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
-							</div>
-							<div class="col-sm-1">
-								<button class="btn btn-secondary btn-rounded" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
-							</div>
-						</div>
-					</div>
+				<uib-tab class="design-tab" ng-if="tabData && myform.form_fields.length" heading="{{ 'DESIGN_TAB' | translate }}" index="4" select="activateDesignTab()">
+					<design-form-directive myform="myform" formurl="formURL"></design-form-directive>
 				</uib-tab>
 			</uib-tabset>
 		</div>
diff --git a/public/modules/forms/admin/views/directiveViews/form/design-form.client.view.html b/public/modules/forms/admin/views/directiveViews/form/design-form.client.view.html
new file mode 100644
index 00000000..8c0783c0
--- /dev/null
+++ b/public/modules/forms/admin/views/directiveViews/form/design-form.client.view.html
@@ -0,0 +1,76 @@
+<div class="config-form design container">
+	<div class="row">
+		<div class="col-sm-4 col-xs-12">
+			<div class="row field">
+				<div class="field-title col-sm-5">
+					<h5>{{ 'BACKGROUND_COLOR' | translate }}</h5>
+				</div>
+				<div class="field-input col-sm-6">
+					<input class="form-control" colorpicker="hex" type="text" 
+					ng-model="myform.design.colors.backgroundColor" 
+					ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
+					ng-style="{ 'background-color': myform.design.colors.backgroundColor }"/>
+				</div>
+			</div>
+
+			<div class="row field">
+				<div class="field-title col-sm-5">
+					<h5>{{ 'QUESTION_TEXT_COLOR' | translate }}</h5>
+				</div>
+
+				<div class="field-input col-sm-6">
+					<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.questionColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"ng-style="{ 'background-color': myform.design.colors.questionColor }"/>
+				</div>
+			</div>
+
+			<div class="row field">
+				<div class="field-title col-sm-5">
+					<h5>{{ 'ANSWER_TEXT_COLOR' | translate }}</h5>
+				</div>
+
+				<div class="field-input col-sm-6">
+					<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
+				</div>
+			</div>
+
+			<div class="row field">
+				<div class="field-title col-sm-5">
+					<h5>{{ 'BTN_BACKGROUND_COLOR' | translate }}</h5>
+				</div>
+
+				<div class="field-input col-sm-6">
+					<input class="form-control" colorpicker="hex" type="text"
+						   ng-model="myform.design.colors.buttonColor"
+						   ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
+						   ng-style="{ 'background-color': myform.design.colors.buttonColor }"/>
+				</div>
+			</div>
+			<div class="row field">
+				<div class="field-title col-sm-5">
+					<h5>{{ 'BTN_TEXT_COLOR' | translate }}</h5>
+				</div>
+
+				<div class="field-input col-sm-6">
+					<input class="form-control" colorpicker="hex" type="text"
+						   ng-model="myform.design.colors.buttonTextColor"
+						   ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
+						   ng-style="{ 'background-color': myform.design.colors.buttonTextColor }"/>
+				</div>
+			</div>
+		</div>
+		<div class="col-sm-8 hidden-xs">
+			<div class="public-form" ng-style="{ 'background-color': myform.design.colors.backgroundColor }">
+				<iframe id="iframe" ng-if="!!formurl" ng-src="{{formurl | trustSrc}}" style="border: none; box-shadow: 0px 0px 10px 0px grey; overflow: hidden; height: 400px; width: 90%; position: absolute;"></iframe>
+			</div>
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="col-sm-offset-4 col-sm-2">
+			<button class="btn btn-signup btn-rounded" type="button" ng-click="updateDesign(false, myform, false, false)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
+		</div>
+		<div class="col-sm-1">
+			<button class="btn btn-secondary btn-rounded" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/public/modules/forms/admin/views/directiveViews/form/share-form.client.view.html b/public/modules/forms/admin/views/directiveViews/form/share-form.client.view.html
new file mode 100644
index 00000000..2312b1f8
--- /dev/null
+++ b/public/modules/forms/admin/views/directiveViews/form/share-form.client.view.html
@@ -0,0 +1,44 @@
+<div class="config-form">
+	<div class="row">
+		<div class="col-sm-12">
+			<uib-tabset active="activePill" vertical="true" type="pills">
+				<uib-tab index="0" heading="{{ 'SHARE_YOUR_FORM' | translate }}">
+					<div class="row">
+						<div class="col-sm-12">
+							{{ 'TELLFORM_URL' | translate }}
+						</div>
+						<div class="col-sm-8 form-input">
+							<span ngclipboard data-clipboard-target="#copyURL"> <input id="copyURL" ng-value="actualFormURL" class="form-control ng-pristine ng-untouched ng-valid"> </span>
+						</div>
+						<div class="col-sm-4">
+							<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyURL">
+								{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
+							</button>
+						</div>
+					</div>
+				</uib-tab>
+				<uib-tab index="1" heading="{{ 'EMBED_YOUR_FORM' | translate }}">
+					<div class="row">
+						<div class="col-sm-12">
+							{{ 'COPY_AND_PASTE' | translate }}
+						</div>
+						<div class="col-sm-8 form-input">
+							<span ngclipboard data-clipboard-target="#copyEmbedded">
+								<textarea id="copyEmbedded" class="form-control ng-pristine ng-untouched ng-valid" style="min-height:200px; width:100%; background-color: #FFFFCC; color: #30313F;">
+									&lt;!-- {{ 'CHANGE_WIDTH_AND_HEIGHT' | translate }} --&gt;
+									<iframe id="iframe" src="{{actualFormURL}}" style="width:100%;height:500px;"></iframe>
+									<div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;">{{ 'POWERED_BY' | translate }} <a href="https://www.tellform.com" style="color: #999" target="_blank">TellForm</a></div>
+								</textarea>
+							</span>
+						</div>
+						<div class="col-sm-4">
+							<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyEmbedded">
+								{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
+							</button>
+						</div>
+					</div>
+				</uib-tab>
+			</uib-tabset>
+		</div>
+	</div>
+</div>
\ No newline at end of file