diff --git a/resources/lang/en/texts.php b/resources/lang/en/texts.php
index 163a285565ac..de34898f48aa 100644
--- a/resources/lang/en/texts.php
+++ b/resources/lang/en/texts.php
@@ -2483,6 +2483,11 @@ $LANG = array(
     'credit_total' => 'Credit Total',
     'mark_billable' => 'Mark Billable',
     'billed' => 'Billed',
+    'company_variables' => 'Company Variables',
+    'client_variables' => 'Client Variables',
+    'invoice_variables' => 'Invoice Variables',
+    'navigation_variables' => 'Navigation Variables',
+    'custom_variables' => 'Custom Variables',
 
 );
 
diff --git a/resources/views/accounts/template.blade.php b/resources/views/accounts/template.blade.php
index b3831f5b97b1..3ea3b8dcca02 100644
--- a/resources/views/accounts/template.blade.php
+++ b/resources/views/accounts/template.blade.php
@@ -107,6 +107,4 @@
         });
     });
 
-
-
 </script>
diff --git a/resources/views/accounts/templates_and_reminders.blade.php b/resources/views/accounts/templates_and_reminders.blade.php
index ea94c9427cf9..e440a44980eb 100644
--- a/resources/views/accounts/templates_and_reminders.blade.php
+++ b/resources/views/accounts/templates_and_reminders.blade.php
@@ -132,83 +132,6 @@
         </div>
     </div>
 
-    <div class="modal fade" id="templateHelpModal" tabindex="-1" role="dialog" aria-labelledby="templateHelpModalLabel" aria-hidden="true">
-        <div class="modal-dialog" style="min-width:150px">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title" id="templateHelpModalLabel">{{ trans('texts.template_help_title') }}</h4>
-                </div>
-
-                <div class="container" style="width: 100%; padding-bottom: 0px !important">
-                <div class="panel panel-default">
-                <div class="panel-body">
-                    <p>{{ trans('texts.template_help_1') }}</p>
-                    <ul>
-                        @foreach([
-                            'account',
-                            'dueDate',
-                            'invoiceDate',
-                            'client',
-                            'amount',
-                            'contact',
-                            'firstName',
-                            'invoice',
-                            'quote',
-                            'emailSignature',
-                            'password',
-                            'documents',
-                            'viewLink',
-                            'viewButton',
-                            'paymentLink',
-                            'paymentButton',
-                            'autoBill',
-                            'portalLink',
-                            'portalButton',
-                        ] as $field)
-                            <li>${{ $field }}</li>
-                        @endforeach
-                        @if ($account->custom_client_label1)
-                            <li>$customClient1</li>
-                        @endif
-                        @if ($account->custom_client_label2)
-                            <li>$customClient2</li>
-                        @endif
-                        @if ($account->custom_contact_label1)
-                            <li>$customContact1</li>
-                        @endif
-                        @if ($account->custom_contact_label2)
-                            <li>$customContact2</li>
-                        @endif
-                        @if ($account->custom_invoice_text_label1)
-                            <li>$customInvoice1</li>
-                        @endif
-                        @if ($account->custom_invoice_text_label2)
-                            <li>$customInvoice2</li>
-                        @endif
-                        @if (count($account->account_gateways) > 0)
-                            @foreach (\App\Models\Gateway::$gatewayTypes as $type)
-                                @if ($account->getGatewayByType($type))
-                                    @if ($type != GATEWAY_TYPE_TOKEN)
-                                        <li>${{ Utils::toCamelCase(\App\Models\GatewayType::getAliasFromId($type)) }}Link</li>
-                                        <li>${{ Utils::toCamelCase(\App\Models\GatewayType::getAliasFromId($type)) }}Button</li>
-                                    @endif
-                                @endif
-                            @endforeach
-                        @endif
-                    </ul>
-                </div>
-                </div>
-                </div>
-
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" data-dismiss="modal">{{ trans('texts.close') }}</button>
-                </div>
-
-            </div>
-        </div>
-    </div>
-
     @if (Auth::user()->hasFeature(FEATURE_EMAIL_TEMPLATES_REMINDERS))
         <center>
             {!! Button::success(trans('texts.save'))->submit()->large()->appendIcon(Icon::create('floppy-disk')) !!}
diff --git a/resources/views/invoices/email.blade.php b/resources/views/invoices/email.blade.php
index 370a9e65b908..24d87c53c762 100644
--- a/resources/views/invoices/email.blade.php
+++ b/resources/views/invoices/email.blade.php
@@ -1,4 +1,4 @@
-<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel" aria-hidden="true">
+<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel" aria-hidden="true" style="z-index:10000">
     <div class="modal-dialog">
         <div class="modal-content" style="background-color: #f8f8f8">
 
@@ -53,20 +53,24 @@
                         </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="customize">
+                        {{ Former::setOption('TwitterBootstrap3.labelWidths.large', 0) }}
+                        {{ Former::setOption('TwitterBootstrap3.labelWidths.small', 0) }}
                         {!! Former::text('emailSubject')
                                 ->placeholder('subject')
+                                ->label(false)
                                 ->onchange('onEmailSubjectChange()')
                                 ->oninput('onEmailSubjectInput()')
-                                ->raw() !!}
+                                ->appendIcon('question-sign')
+                                ->addGroupClass('email-subject') !!}
+                        {{ Former::setOption('TwitterBootstrap3.labelWidths.large', 4) }}
+                        {{ Former::setOption('TwitterBootstrap3.labelWidths.small', 4) }}
+
                         <br/>
                         <div id="templateEditor" class="form-control" style="min-height:160px"></div>
                         <div style="display:none">
-                            {!! Former::textarea("template[body]")
-                                    ->raw() !!}
-                            {!! Former::text('template[subject]')
-                                    ->raw() !!}
-                            {!! Former::text('reminder')
-                                    ->raw() !!}
+                            {!! Former::textarea("template[body]")->raw() !!}
+                            {!! Former::text('template[subject]')->raw() !!}
+                            {!! Former::text('reminder')->raw() !!}
                         </div>
                         @include('partials/quill_toolbar', ['name' => 'template'])
                     </div>
@@ -226,6 +230,10 @@
               $('#template_type').val(window.defaultTemplate);
           }
       @endif
+
+      $('.email-subject .input-group-addon').click(function() {
+          $('#templateHelpModal').modal('show');
+      });
     });
 
 </script>
diff --git a/resources/views/partials/email_templates.blade.php b/resources/views/partials/email_templates.blade.php
index 55daf4122d53..7f02ab7bc59b 100644
--- a/resources/views/partials/email_templates.blade.php
+++ b/resources/views/partials/email_templates.blade.php
@@ -68,3 +68,110 @@
     }
 
 </script>
+
+<div class="modal fade" id="templateHelpModal" tabindex="-1" role="dialog" aria-labelledby="templateHelpModalLabel" aria-hidden="true" style="z-index:10001">
+    <div class="modal-dialog" style="min-width:150px">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="templateHelpModalLabel">{{ trans('texts.template_help_title') }}</h4>
+            </div>
+
+            <div class="container" style="width: 100%; padding-bottom: 0px !important">
+            <div class="panel panel-default">
+            <div class="panel-body">
+                <div class="row">
+                    <div class="col-md-6">
+                        <p>{{ trans('texts.company_variables') }}</p>
+                        <ul>
+                            @foreach([
+                                'account',
+                                'emailSignature',
+                            ] as $field)
+                                <li>${{ $field }}</li>
+                            @endforeach
+                        </ul>
+                        <p>{{ trans('texts.client_variables') }}</p>
+                        <ul>
+                            @foreach([
+                                'client',
+                                'contact',
+                                'firstName',
+                                'password',
+                                'autoBill',
+                            ] as $field)
+                                <li>${{ $field }}</li>
+                            @endforeach
+                        </ul>
+                        <p>{{ trans('texts.invoice_variables') }}</p>
+                        <ul>
+                            @foreach([
+                                'invoice',
+                                'quote',
+                                'amount',
+                                'invoiceDate',
+                                'dueDate',
+                                'documents',
+                            ] as $field)
+                                <li>${{ $field }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                    <div class="col-md-6">
+                        <p>{{ trans('texts.navigation_variables') }}</p>
+                        <ul>
+                            @foreach([
+                                'viewLink',
+                                'viewButton',
+                                'paymentLink',
+                                'paymentButton',
+                                'portalLink',
+                                'portalButton',
+                            ] as $field)
+                                <li>${{ $field }}</li>
+                            @endforeach
+                            @foreach (\App\Models\Gateway::$gatewayTypes as $type)
+                                @if ($account->getGatewayByType($type))
+                                    @if ($type != GATEWAY_TYPE_TOKEN)
+                                        <li>${{ Utils::toCamelCase(\App\Models\GatewayType::getAliasFromId($type)) }}Link</li>
+                                        <li>${{ Utils::toCamelCase(\App\Models\GatewayType::getAliasFromId($type)) }}Button</li>
+                                    @endif
+                                @endif
+                            @endforeach
+                        </ul>
+                        @if ($account->custom_client_label1 || $account->custom_contact_label1 || $account->custom_invoice_text_label1)
+                            <p>{{ trans('texts.custom_variables') }}</p>
+                            <ul>
+                                @if ($account->custom_client_label1)
+                                    <li>$customClient1</li>
+                                @endif
+                                @if ($account->custom_client_label2)
+                                    <li>$customClient2</li>
+                                @endif
+                                @if ($account->custom_contact_label1)
+                                    <li>$customContact1</li>
+                                @endif
+                                @if ($account->custom_contact_label2)
+                                    <li>$customContact2</li>
+                                @endif
+                                @if ($account->custom_invoice_text_label1)
+                                    <li>$customInvoice1</li>
+                                @endif
+                                @if ($account->custom_invoice_text_label2)
+                                    <li>$customInvoice2</li>
+                                @endif
+                            </ul>
+                        @endif
+                    </div>
+                </div>
+            </div>
+            </div>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-dismiss="modal">{{ trans('texts.close') }}</button>
+            </div>
+
+        </div>
+    </div>
+</div>