diff --git a/app/Models/Sale/Invoice.php b/app/Models/Sale/Invoice.php
index 40207dca4..2006c1139 100644
--- a/app/Models/Sale/Invoice.php
+++ b/app/Models/Sale/Invoice.php
@@ -11,7 +11,6 @@ use App\Traits\Media;
 use App\Traits\Recurring;
 use App\Traits\Sales;
 use Bkwld\Cloner\Cloneable;
-use Date;
 
 class Invoice extends Model
 {
diff --git a/public/css/custom.css b/public/css/custom.css
index e553429f1..b25bf599a 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -678,7 +678,7 @@ table .align-items-center td span.badge {
 
 .print-edge
 {
-    width: 147px;
+    width: 140px;
 }
 /*--------Print Template Finish--------*/
 
diff --git a/public/css/element.css b/public/css/element.css
index d1e718ef4..74a3e2a04 100644
--- a/public/css/element.css
+++ b/public/css/element.css
@@ -15326,8 +15326,7 @@
 
 .el-color-dropdown.el-color-picker__panel
 {
-    top: 360px !important;
-    left: 580px !important;
+    left: 341px !important;
 }
 
 .el-color-picker__color
@@ -15394,7 +15393,6 @@
     margin-top: 10px !important;
 }
 
-
 /*--------El Select Icon--------*/
 .select-icon-position
 {
diff --git a/resources/assets/js/views/settings/categories.js b/resources/assets/js/views/settings/categories.js
index dcf8d3f2f..c2a7ac02b 100644
--- a/resources/assets/js/views/settings/categories.js
+++ b/resources/assets/js/views/settings/categories.js
@@ -41,7 +41,7 @@ const app = new Vue({
         return {
             form: new Form('category'),
             bulk_action: new BulkAction('categories'),
-            color: '#6DA252',
+            color: '#55588b',
             predefineColors: [
                 '#3c3f72',
                 '#55588b',
diff --git a/resources/assets/js/views/settings/settings.js b/resources/assets/js/views/settings/settings.js
index 3f21b2999..0e3058ec5 100644
--- a/resources/assets/js/views/settings/settings.js
+++ b/resources/assets/js/views/settings/settings.js
@@ -15,9 +15,10 @@ import Global from './../../mixins/global';
 import Form from './../../plugins/form';
 import BulkAction from './../../plugins/bulk-action';
 import HtmlEditor from './../../components/Inputs/HtmlEditor';
+import {ColorPicker} from 'element-ui';
 
 // plugin setup
-Vue.use(DashboardPlugin);
+Vue.use(DashboardPlugin, ColorPicker);
 
 const app = new Vue({
     el: '#app',
@@ -27,7 +28,13 @@ const app = new Vue({
     ],
 
     components: {
-        HtmlEditor
+        HtmlEditor,
+        [ColorPicker.name]: ColorPicker,
+    },
+
+    mounted() {
+        this.onChangeProtocol(this.form.protocol);
+        this.color = this.form.color;
     },
 
     data: function () {
@@ -42,6 +49,7 @@ const app = new Vue({
                 smtpPassword:true,
                 smtpEncryption:true,
             },
+
             invoice_form: new Form('template'),
             template: {
                 modal: false,
@@ -49,17 +57,24 @@ const app = new Vue({
                 message: '',
                 html: '',
                 errors: new Error()
-            }
+            },
+
+            color: '#55588b',
+            predefineColors:[
+                '#3c3f72',
+                '#55588b',
+                '#e5e5e5',
+                '#328aef',
+                '#efad32',
+                '#ef3232',
+                '#efef32'
+            ],
         }
     },
 
-    mounted(){
-        this.onChangeProtocol(this.form.protocol);
-    },
-
     methods:{
-        onChangeProtocol(protocol){
-            switch(protocol){
+        onChangeProtocol(protocol) {
+            switch(protocol) {
                 case "smtp":
                     this.email.sendmailPath = true;
                     this.email.smtpHost = false;
@@ -68,6 +83,7 @@ const app = new Vue({
                     this.email.smtpPassword = false;
                     this.email.smtpEncryption = false;
                     break;
+
                 case "sendmail":
                     this.email.sendmailPath = false;
                     this.email.smtpHost = true;
@@ -76,6 +92,7 @@ const app = new Vue({
                     this.email.smtpPassword = true;
                     this.email.smtpEncryption = true;
                     break;
+
                 default:
                     this.email.sendmailPath = true;
                     this.email.smtpHost = true;
@@ -97,6 +114,7 @@ const app = new Vue({
 
         addTemplate() {
             if (this.invoice_form.template != 1) {
+
                 this.invoice_form.submit();
 
                 this.template.errors = this.invoice_form.errors;
@@ -111,5 +129,13 @@ const app = new Vue({
                 errors: this.invoice_form.errors
             };
         },
+
+        onChangeColor() {
+            this.form.color = this.color;
+        },
+
+        onChangeColorInput() {
+            this.color = this.form.color;
+        }
     }
 });
diff --git a/resources/views/modals/settings/invoice_template.blade.php b/resources/views/modals/settings/invoice_template.blade.php
index 52f76206d..877c51640 100644
--- a/resources/views/modals/settings/invoice_template.blade.php
+++ b/resources/views/modals/settings/invoice_template.blade.php
@@ -11,7 +11,7 @@
             'novalidate' => true
     ]) !!}
         <div class="row">
-            <div class="col-md-4 text-center px-0">
+            <div class="col-md-4 text-center">
                 <div class="bg-print border-radius-default print-edge choose" @click="invoice_form.template='default'">
                     <img src="{{ asset('public/img/invoice_templates/default.png') }}" class="mb-1 mt-3" height="200" alt="Default"/>
                     <label>
@@ -21,7 +21,7 @@
                 </div>
             </div>
 
-            <div class="col-md-4 text-center px-0">
+            <div class="col-md-4 text-center px-2">
                 <div class="bg-print border-radius-default print-edge choose" @click="invoice_form.template='classic'">
                     <img src="{{ asset('public/img/invoice_templates/classic.png') }}" class="mb-1 mt-3" height="200" alt="Classic"/>
                     <label>
@@ -42,6 +42,24 @@
             </div>
         </div>
 
+        <div class="row mt-4">
+            @stack('color_input_start')
+                <div class="form-group col-md-12 {{ $errors->has('color') ? 'has-error' : ''}}">
+                    {!! Form::label('color', trans('general.color'), ['class' => 'form-control-label']) !!}
+                    <div class="input-group input-group-merge" id="invoice-color-picker">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text">
+                                <el-color-picker v-model="invoice_form.color" size="mini" :predefine="predefineColors" @change="onChangeColor"></el-color-picker>
+                            </span>
+                        </div>
+                        {!! Form::text('color', $setting['color'], ['v-model' => 'invoice_form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}
+                    </div>
+                    {!! $errors->first('color', '<p class="help-block">:message</p>') !!}
+                </div>
+            @stack('color_input_end')
+        </div>
+
+
         {!! Form::hidden('_template', $setting['template']) !!}
         {!! Form::hidden('_prefix', 'invoice') !!}
     {!! Form::close() !!}
diff --git a/resources/views/sales/invoices/print_classic.blade.php b/resources/views/sales/invoices/print_classic.blade.php
index 9df21e6b0..27371fff1 100644
--- a/resources/views/sales/invoices/print_classic.blade.php
+++ b/resources/views/sales/invoices/print_classic.blade.php
@@ -35,8 +35,8 @@
 
     <div class="row mt-2">
         <div class="col-33">
-            <hr class="bg-default invoice-classic-line mb-1 mt-4">
-            <hr class="bg-default invoice-classic-line">
+            <hr class="invoice-classic-line mb-1 mt-4" style="background-color:{{ setting('invoice.color') }};">
+            <hr class="invoice-classic-line" style="background-color:{{ setting('invoice.color') }};">
         </div>
 
         <div class="col-33">
@@ -53,8 +53,8 @@
         </div>
 
         <div class="col-33">
-            <hr class="bg-default invoice-classic-line mb-1 mt-4">
-            <hr class="bg-default invoice-classic-line">
+            <hr class="invoice-classic-line mb-1 mt-4" style="background-color:{{ setting('invoice.color') }};">
+            <hr class="invoice-classic-line" style="background-color:{{ setting('invoice.color') }};">
         </div>
     </div>
 
diff --git a/resources/views/sales/invoices/print_default.blade.php b/resources/views/sales/invoices/print_default.blade.php
index 90a83db89..96a47ce31 100644
--- a/resources/views/sales/invoices/print_default.blade.php
+++ b/resources/views/sales/invoices/print_default.blade.php
@@ -114,7 +114,9 @@
         <div class="col-100">
             <div class="text">
                 <table class="lines">
-                    <thead class="bg-default">
+                    @foreach($invoice as $item)
+                        <thead style="background-color:{{ setting('invoice.color') }};">
+                    @endforeach
                         <tr>
                             @stack('name_th_start')
                                 <th class="item text-white">{{ trans_choice($text_override['items'], 2) }}</th>
diff --git a/resources/views/sales/invoices/print_modern.blade.php b/resources/views/sales/invoices/print_modern.blade.php
index d763e9fd5..3d320cb7e 100644
--- a/resources/views/sales/invoices/print_modern.blade.php
+++ b/resources/views/sales/invoices/print_modern.blade.php
@@ -3,7 +3,7 @@
 @section('title', trans_choice('general.invoices', 1) . ': ' . $invoice->invoice_number)
 
 @section('content')
-    <div class="row bg-primary">
+    <div class="row"  style="background-color:{{ setting('invoice.color') }};">
         <div class="col-58 m-first-column">
             <div class="text company pl-2 m-fc-left">
                 <img src="{{ $logo }}" class="m-logo" alt="{{ setting('company.name') }}"/>
@@ -12,7 +12,7 @@
                 <strong class="text-white">{{ setting('company.name') }}</strong>
             </div>
         </div>
-        
+
         <div class="col-42">
             <div class="text company">
                 <br>
@@ -43,7 +43,7 @@
                 @stack('name_input_start')
                     <strong>{{ $invoice->contact_name }}</strong><br><br>
                 @stack('name_input_end')
-        
+
                 @stack('address_input_start')
                     {!! nl2br($invoice->contact_address) !!}<br><br>
                 @stack('address_input_end')
@@ -53,7 +53,7 @@
                        {{ trans('general.tax_number') }}: {{ $invoice->contact_tax_number }}<br><br>
                     @endif
                 @stack('tax_number_input_end')
-            
+
                 @stack('phone_input_start')
                     @if ($invoice->contact_phone)
                         {{ $invoice->contact_phone }}<br><br>
@@ -105,7 +105,7 @@
         <div class="col-100">
             <div class="text">
                 <table class="m-lines">
-                    <thead class="bg-default">
+                    <thead  style="background-color:{{ setting('invoice.color') }};">
                         <tr>
                             @stack('name_th_start')
                                 <th class="item text-white">{{ trans_choice($text_override['items'], 2) }}</th>
@@ -168,7 +168,7 @@
                 @stack('notes_input_end')
             </div>
         </div>
-        
+
         <div class="col-42 text-right">
             <div class="text company pr-2">
                 @foreach ($invoice->totals as $total)
@@ -194,7 +194,7 @@
 
     @if ($invoice->footer)
         <div class="row mt-7">
-            <div class="col-100 bg-default py-2">
+            <div class="col-100 py-2"  style="background-color:{{ setting('invoice.color') }};">
                 <div class="text company pl-2">
                     <strong class="text-white">{!! $invoice->footer !!}</strong>
                 </div>
diff --git a/resources/views/settings/categories/create.blade.php b/resources/views/settings/categories/create.blade.php
index c27847776..a167a0c14 100644
--- a/resources/views/settings/categories/create.blade.php
+++ b/resources/views/settings/categories/create.blade.php
@@ -30,7 +30,7 @@
                                         <el-color-picker v-model="color" size="mini" :predefine="predefineColors" @change="onChangeColor"></el-color-picker>
                                     </span>
                                 </div>
-                                {!! Form::text('color', '#6DA252', ['v-model' => 'form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}
+                                {!! Form::text('color', '#55588b', ['v-model' => 'form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}
                             </div>
                             {!! $errors->first('color', '<p class="help-block">:message</p>') !!}
                         </div>