diff --git a/system/controllers/home.php b/system/controllers/home.php
index cf8c5b67..f5b1214c 100644
--- a/system/controllers/home.php
+++ b/system/controllers/home.php
@@ -95,8 +95,7 @@ if (_post('send') == 'balance') {
     }
     r2(getUrl('home'), 'w', Lang::T('Your friend do not have active package'));
 }
-$_bill = User::_billing();
-$ui->assign('_bills', $_bill);
+
 
 // Sync plan to router
 if (isset($_GET['sync']) && !empty($_GET['sync'])) {
@@ -310,46 +309,25 @@ if (!empty($_SESSION['nux-mac']) && !empty($_SESSION['nux-ip'] && !empty($_SESSI
     }
 }
 
-$tcf = ORM::for_table('tbl_customers_fields')
-    ->where('customer_id', $user['id'])
-    ->find_many();
-$vpn = ORM::for_table('tbl_port_pool')
-    ->find_one();
-$ui->assign('cf', $tcf);
-$ui->assign('vpn', $vpn);
 
-$unpaid = ORM::for_table('tbl_payment_gateway')
-    ->where('username', $user['username'])
-    ->where('status', 1)
-    ->find_one();
-
-// check expired payments
-if ($unpaid) {
-    try {
-        if (strtotime($unpaid['expired_date']) < time()) {
-            $unpaid->status = 4;
-            $unpaid->save();
-            $unpaid = [];
+$widgets = ORM::for_table('tbl_widgets')->where("enabled", 1)->where('user', 'Customer')->order_by_asc("orders")->findArray();
+$count = count($widgets);
+for ($i = 0; $i < $count; $i++) {
+    try{
+        if(file_exists($WIDGET_PATH . DIRECTORY_SEPARATOR . 'customer' . DIRECTORY_SEPARATOR . $widgets[$i]['widget'].".php")){
+            require_once $WIDGET_PATH . DIRECTORY_SEPARATOR . 'customer' . DIRECTORY_SEPARATOR . $widgets[$i]['widget'].".php";
+            $widgets[$i]['content'] = (new $widgets[$i]['widget'])->getWidget($widgets[$i]);
+        }else{
+            $widgets[$i]['content'] = "Widget not found";
         }
     } catch (Throwable $e) {
-    } catch (Exception $e) {
-    }
-    try {
-        if (strtotime($unpaid['created_date'], "+24 HOUR") < time()) {
-            $unpaid->status = 4;
-            $unpaid->save();
-            $unpaid = [];
-        }
-    } catch (Throwable $e) {
-    } catch (Exception $e) {
+        $widgets[$i]['content'] = $e->getMessage();
     }
 }
 
-$ui->assign('unpaid', $unpaid);
-$ui->assign('code', alphanumeric(_get('code'), "-"));
+$ui->assign('widgets', $widgets);
 
-$abills = User::getAttributes("Bill");
-$ui->assign('abills', $abills);
+$ui->assign('code', alphanumeric(_get('code'), "-"));
 
 run_hook('view_customer_dashboard'); #HOOK
 $ui->display('customer/dashboard.tpl');
diff --git a/system/widgets/customer/account_info.php b/system/widgets/customer/account_info.php
new file mode 100644
index 00000000..53cb953c
--- /dev/null
+++ b/system/widgets/customer/account_info.php
@@ -0,0 +1,14 @@
+<?php
+
+
+class account_info
+{
+    public function getWidget()
+    {
+        global $ui;
+
+        $abills = User::getAttributes("Bill");
+        $ui->assign('abills', $abills);
+        return $ui->fetch('widget/customers/account_info.tpl');
+    }
+}
diff --git a/system/widgets/customer/active_internet_plan.php b/system/widgets/customer/active_internet_plan.php
new file mode 100644
index 00000000..8bf0501f
--- /dev/null
+++ b/system/widgets/customer/active_internet_plan.php
@@ -0,0 +1,20 @@
+<?php
+
+
+class active_internet_plan
+{
+    public function getWidget()
+    {
+        global $ui, $user;
+        $_bill = User::_billing();
+        $ui->assign('_bills', $_bill);
+        $tcf = ORM::for_table('tbl_customers_fields')
+            ->where('customer_id', $user['id'])
+            ->find_many();
+        $vpn = ORM::for_table('tbl_port_pool')
+            ->find_one();
+        $ui->assign('cf', $tcf);
+        $ui->assign('vpn', $vpn);
+        return $ui->fetch('widget/customers/active_internet_plan.tpl');
+    }
+}
diff --git a/system/widgets/customer/announcement.php b/system/widgets/customer/announcement.php
new file mode 100644
index 00000000..348cd368
--- /dev/null
+++ b/system/widgets/customer/announcement.php
@@ -0,0 +1,11 @@
+<?php
+
+
+class announcement
+{
+    public function getWidget()
+    {
+        global $ui;
+        return $ui->fetch('widget/customers/announcement.tpl');
+    }
+}
diff --git a/system/widgets/customer/balance_transfer.php b/system/widgets/customer/balance_transfer.php
new file mode 100644
index 00000000..e424c20f
--- /dev/null
+++ b/system/widgets/customer/balance_transfer.php
@@ -0,0 +1,11 @@
+<?php
+
+
+class balance_transfer
+{
+    public function getWidget()
+    {
+        global $ui;
+        return $ui->fetch('widget/customers/balance_transfer.tpl');
+    }
+}
diff --git a/system/widgets/customer/button_order_internet_plan.php b/system/widgets/customer/button_order_internet_plan.php
new file mode 100644
index 00000000..5e6bc4f5
--- /dev/null
+++ b/system/widgets/customer/button_order_internet_plan.php
@@ -0,0 +1,11 @@
+<?php
+
+
+class button_order_internet_plan
+{
+    public function getWidget()
+    {
+        global $ui;
+        return $ui->fetch('widget/customers/button_order_internet_plan.tpl');
+    }
+}
diff --git a/system/widgets/customer/html_only.php b/system/widgets/customer/html_only.php
new file mode 100644
index 00000000..b7131c01
--- /dev/null
+++ b/system/widgets/customer/html_only.php
@@ -0,0 +1,11 @@
+<?php
+
+class html_only
+{
+
+    public function getWidget($data = null)
+    {
+        global $ui;
+        return $data['content'];
+    }
+}
\ No newline at end of file
diff --git a/system/widgets/customer/html_php.php b/system/widgets/customer/html_php.php
new file mode 100644
index 00000000..dcbb9040
--- /dev/null
+++ b/system/widgets/customer/html_php.php
@@ -0,0 +1,22 @@
+<?php
+
+class html_php
+{
+
+    public function getWidget($data = null)
+    {
+        global $ui;
+        $ui->assign('card_header', $data['title']);
+        ob_start();
+        try{
+        eval('?>'. $data['content']);
+        }catch(Exception $e){
+            echo $e->getMessage();
+            echo "<br>";
+            echo $e->getTraceAsString();
+        }
+        $content = ob_get_clean();
+        $ui->assign('card_body', $content);
+        return $ui->fetch('widget/card_html.tpl');
+    }
+}
\ No newline at end of file
diff --git a/system/widgets/customer/recharge_a_friend.php b/system/widgets/customer/recharge_a_friend.php
new file mode 100644
index 00000000..5d6ccb45
--- /dev/null
+++ b/system/widgets/customer/recharge_a_friend.php
@@ -0,0 +1,11 @@
+<?php
+
+
+class recharge_a_friend
+{
+    public function getWidget()
+    {
+        global $ui;
+        return $ui->fetch('widget/customers/recharge_a_friend.tpl');
+    }
+}
diff --git a/system/widgets/customer/unpaid_order.php b/system/widgets/customer/unpaid_order.php
new file mode 100644
index 00000000..b4b5abbd
--- /dev/null
+++ b/system/widgets/customer/unpaid_order.php
@@ -0,0 +1,39 @@
+<?php
+
+
+class unpaid_order
+{
+    public function getWidget()
+    {
+        global $ui, $user;
+        $unpaid = ORM::for_table('tbl_payment_gateway')
+            ->where('username', $user['username'])
+            ->where('status', 1)
+            ->find_one();
+
+        // check expired payments
+        if ($unpaid) {
+            try {
+                if (strtotime($unpaid['expired_date']) < time()) {
+                    $unpaid->status = 4;
+                    $unpaid->save();
+                    $unpaid = [];
+                }
+            } catch (Throwable $e) {
+            } catch (Exception $e) {
+            }
+            try {
+                if (strtotime($unpaid['created_date'], "+24 HOUR") < time()) {
+                    $unpaid->status = 4;
+                    $unpaid->save();
+                    $unpaid = [];
+                }
+            } catch (Throwable $e) {
+            } catch (Exception $e) {
+            }
+        }
+
+        $ui->assign('unpaid', $unpaid);
+        return $ui->fetch('widget/customers/unpaid_order.tpl');
+    }
+}
diff --git a/system/widgets/customer/voucher_activation.php b/system/widgets/customer/voucher_activation.php
new file mode 100644
index 00000000..5674feeb
--- /dev/null
+++ b/system/widgets/customer/voucher_activation.php
@@ -0,0 +1,11 @@
+<?php
+
+
+class voucher_activation
+{
+    public function getWidget()
+    {
+        global $ui;
+        return $ui->fetch('widget/customers/voucher_activation.tpl');
+    }
+}
diff --git a/ui/ui/customer/dashboard.tpl b/ui/ui/customer/dashboard.tpl
index 6cf5aa89..53efb76a 100644
--- a/ui/ui/customer/dashboard.tpl
+++ b/ui/ui/customer/dashboard.tpl
@@ -1,436 +1,39 @@
 {include file="customer/header.tpl"}
 <!-- user-dashboard -->
 
-<div class="row">
-    <div class="col col-md-6 col-md-push-6">
-        {if $unpaid }
-            <div class="box box-danger box-solid">
-                <div class="box-header">
-                    <h3 class="box-title">{Lang::T('Unpaid Order')}</h3>
-                </div>
-                <div style="margin-left: 5px; margin-right: 5px;">
-                    <table class="table table-condensed table-bordered table-striped table-hover"
-                        style="margin-bottom: 0px;">
-                        <tbody>
-                            <tr>
-                                <td>{Lang::T('expired')}</td>
-                                <td>{Lang::dateTimeFormat($unpaid['expired_date'])} </td>
-                            </tr>
-                            <tr>
-                                <td>{Lang::T('Package Name')}</td>
-                                <td>{$unpaid['plan_name']}</td>
-                            </tr>
-                            <tr>
-                                <td>{Lang::T('Package Price')}</td>
-                                <td>{$unpaid['price']}</td>
-                            </tr>
-                            <tr>
-                                <td>{Lang::T('Routers')}</td>
-                                <td>{$unpaid['routers']}</td>
-                            </tr>
-                        </tbody>
-                    </table> &nbsp;
-                </div>
-                <div class="box-footer p-2">
-                    <div class="btn-group btn-group-justified mb15">
-                        <div class="btn-group">
-                            <a href="{Text::url('order/view/', $unpaid['id'], '/cancel')}" class="btn btn-danger btn-sm"
-                                onclick="return ask(this, '{Lang::T('Cancel it?')}')">
-                                <span class="glyphicon glyphicon-trash"></span>
-                                {Lang::T('Cancel')}
-                            </a>
-                        </div>
-                        <div class="btn-group">
-                            <a class="btn btn-success btn-block btn-sm" href="{Text::url('order/view/',$unpaid['id'])}">
-                                <span class="icon"><i class="ion ion-card"></i></span>
-                                <span>{Lang::T('PAY NOW')}</span>
-                            </a>
-                        </div>
-                    </div>
-
-                </div>&nbsp;&nbsp;
-            </div>
+{function showWidget pos=0}
+    {foreach $widgets as $w}
+        {if $w['position'] == $pos}
+            {$w['content']}
         {/if}
-        <div class="box box-info box-solid">
-            <div class="box-header">
-                <h3 class="box-title">{Lang::T('Announcement')}</h3>
-            </div>
-            <div class="box-body">
-                {$Announcement_Customer = "{$PAGES_PATH}/Announcement_Customer.html"}
-                {if file_exists($Announcement_Customer)}
-                    {include file=$Announcement_Customer}
-                {/if}
+    {/foreach}
+{/function}
+
+
+{assign rows explode(".", $_c['dashboard_Customer'])}
+{assign pos 1}
+{foreach $rows as $cols}
+    {if $cols == 12}
+        <div class="row">
+            <div class="col-md-12">
+                {showWidget widgets=$widgets pos=$pos}
             </div>
         </div>
-    </div>
-    <div class="col col-md-6 col-md-pull-6">
-        <div class="box box-primary box-solid">
-            <div class="box-header">
-                <h3 class="box-title">{Lang::T('Your Account Information')}</h3>
-            </div>
-            <div style="margin-left: 5px; margin-right: 5px;">
-                <table class="table table-bordered table-striped table-bordered table-hover mb-0"
-                    style="margin-bottom: 0px;">
-                    <tr>
-                        <td class="small text-success text-uppercase text-normal">{Lang::T('Usernames')}</td>
-                        <td class="small mb15">{$_user['username']}</td>
-                    </tr>
-                    <tr>
-                        <td class="small text-success text-uppercase text-normal">{Lang::T('Password')}</td>
-                        <td class="small mb15"><input type="password" value="{$_user['password']}"
-                                style="width:100%; border: 0px;" onmouseleave="this.type = 'password'"
-                                onmouseenter="this.type = 'text'" onclick="this.select()"></td>
-                    </tr>
-                    <tr>
-                        <td class="small text-success text-uppercase text-normal">{Lang::T('Service Type')}</td>
-                        <td class="small mb15">
-                            {if $_user.service_type == 'Hotspot'}
-                                Hotspot
-                            {elseif $_user.service_type == 'PPPoE'}
-                                PPPoE
-                            {elseif $_user.service_type == 'VPN'}
-                                VPN
-                            {elseif $_user.service_type == 'Others' || $_user.service_type == null}
-                                Others
-                            {/if}
-                        </td>
-                    </tr>
-
-                    {if $_c['enable_balance'] == 'yes'}
-                        <tr>
-                            <td class="small text-warning text-uppercase text-normal">{Lang::T('Yours Balance')}</td>
-                            <td class="small mb15 text-bold">
-                                {Lang::moneyFormat($_user['balance'])}
-                                {if $_user['auto_renewal'] == 1}
-                                    <a class="label label-success pull-right" href="{Text::url('home&renewal=0')}"
-                                        onclick="return ask(this, '{Lang::T('Disable auto renewal?')}')">{Lang::T('Auto Renewal
-                                On')}</a>
-                                {else}
-                                    <a class="label label-danger pull-right" href="{Text::url('home&renewal=1')}"
-                                        onclick="return ask(this, '{Lang::T('Enable auto renewal?')}')">{Lang::T('Auto Renewal
-                                Off')}</a>
-                                {/if}
-                            </td>
-                        </tr>
-                    {/if}
-                </table>&nbsp;&nbsp;
-            </div>
-            {if $abills && count($abills)>0}
-                <div class="box-header">
-                    <h3 class="box-title">{Lang::T('Additional Billing')}</h3>
+        {assign pos value=$pos+1}
+    {else}
+        {assign colss explode(",", $cols)}
+        <div class="row">
+            {foreach $colss as $c}
+                <div class="col-md-{$c}">
+                    {showWidget widgets=$widgets pos=$pos}
                 </div>
-
-                <div style="margin-left: 5px; margin-right: 5px;">
-                    <table class="table table-bordered table-striped table-bordered table-hover mb-0"
-                        style="margin-bottom: 0px;">
-                        {assign var="total" value=0}
-                        {foreach $abills as $k => $v}
-                            <tr>
-                                <td class="small text-success text-uppercase text-normal">{str_replace(' Bill', '', $k)}</td>
-                                <td class="small mb15">
-                                    {if strpos($v, ':') === false}
-                                        {Lang::moneyFormat($v)}
-                                        <sup title="recurring">∞</sup>
-                                        {assign var="total" value=$v+$total}
-                                    {else}
-                                        {assign var="exp" value=explode(':',$v)}
-                                        {Lang::moneyFormat($exp[0])}
-                                        <sup title="{$exp[1]} more times">{if $exp[1]==0}{Lang::T('paid
-                                off')}{else}{$exp[1]}x{/if}</sup>
-                                        {if $exp[1]>0}
-                                            {assign var="total" value=$exp[0]+$total}
-                                        {/if}
-                                    {/if}
-                                </td>
-                            </tr>
-                        {/foreach}
-                        <tr>
-                            <td class="small text-success text-uppercase text-normal"><b>{Lang::T('Total')}</b></td>
-                            <td class="small mb15"><b>
-                                    {if $total==0}
-                                        {ucwords(Lang::T('paid off'))}
-                                    {else}
-                                        {Lang::moneyFormat($total)}
-                                    {/if}
-                                </b></td>
-                        </tr>
-                    </table>
-                </div> &nbsp;&nbsp;
-            {/if}
-        </div>
-        {if $_bills}
-            <div class="box box-primary box-solid">
-                {foreach $_bills as $_bill}
-                    {if $_bill['routers'] != 'radius'}
-                        <div class="box-header">
-                            <h3 class="box-title">{$_bill['routers']}</h3>
-                            <div class="btn-group pull-right">
-                                {if $_bill['type'] == 'Hotspot'}
-                                    {if $_c['hotspot_plan']==''}Hotspot Plan{else}{$_c['hotspot_plan']}{/if}
-                                {else if $_bill['type'] == 'PPPOE'}
-                                    {if $_c['pppoe_plan']==''}PPPOE Plan{else}{$_c['pppoe_plan']}{/if}
-                                {else if $_bill['type'] == 'VPN'}
-                                    {if $_c['pppoe_plan']==''}VPN Plan{else}{$_c['vpn_plan']}{/if}
-                                {/if}
-                            </div>
-                        </div>
-                    {else}
-                        <div class="box-header">
-                            <h3 class="box-title">{if $_c['radius_plan']==''}Radius Plan{else}{$_c['radius_plan']}{/if}</h3>
-                        </div>
-                    {/if}
-                    <div style="margin-left: 5px; margin-right: 5px;">
-                        <table class="table table-bordered table-striped table-bordered table-hover"
-                            style="margin-bottom: 0px;">
-                            <tr>
-                                <td class="small text-primary text-uppercase text-normal">{Lang::T('Package Name')}</td>
-                                <td class="small mb15">
-                                    {$_bill['namebp']}
-                                    {if $_bill['status'] != 'on'}
-                                        <a class="label label-danger pull-right"
-                                            href="{Text::url('order/package')}">{Lang::T('Expired')}</a>
-                                    {/if}
-                                </td>
-                            </tr>
-                            {if $_c['show_bandwidth_plan'] == 'yes'}
-                                <tr>
-                                    <td class="small text-primary text-uppercase text-normal">{Lang::T('Bandwidth')}</td>
-                                    <td class="small mb15">
-                                        {$_bill['name_bw']}
-                                    </td>
-                                </tr>
-                            {/if}
-                            <tr>
-                                <td class="small text-info text-uppercase text-normal">{Lang::T('Created On')}</td>
-                                <td class="small mb15">
-                                    {if $_bill['time'] ne
-                                                                            ''}{Lang::dateAndTimeFormat($_bill['recharged_on'],$_bill['recharged_time'])}
-                                {/if}&nbsp;</td>
-                        </tr>
-                        <tr>
-                            <td class="small text-danger text-uppercase text-normal">{Lang::T('Expires On')}</td>
-                            <td class="small mb15 text-danger">
-                                {if $_bill['time'] ne
-                            ''}{Lang::dateAndTimeFormat($_bill['expiration'],$_bill['time'])}{/if}&nbsp;
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class="small text-success text-uppercase text-normal">{Lang::T('Type')}</td>
-                        <td class="small mb15 text-success">
-                            <b>{if $_bill['prepaid'] eq yes}Prepaid{else}Postpaid{/if}</b>
-                            {$_bill['plan_type']}
-                        </td>
-                    </tr>
-                    {if $_bill['type'] == 'VPN' && $_bill['routers'] == $vpn['routers']}
-                        <tr>
-                            <td class="small text-success text-uppercase text-normal">{Lang::T('Public IP')}</td>
-                            <td class="small mb15">{$vpn['public_ip']} / {$vpn['port_name']}</td>
-                        </tr>
-                        <tr>
-                            <td class="small text-success text-uppercase text-normal">{Lang::T('Private IP')}</td>
-                            <td class="small mb15">{$_user['pppoe_ip']}</td>
-                        </tr>
-                        {foreach $cf as $tcf}
-                            <tr>
-                                {if $tcf['field_name'] == 'Winbox' or $tcf['field_name'] == 'Api' or $tcf['field_name'] == 'Web'}
-                                    <td class="small text-info text-uppercase text-normal">{$tcf['field_name']} - Port</td>
-                                    <td class="small mb15"><a href="http://{$vpn['public_ip']}:{$tcf['field_value']}"
-                                            target="_blank">{$tcf['field_value']}</a></td>
-                                </tr>
-                            {/if}
-                        {/foreach}
-                    {/if}
-
-                    {if $nux_ip neq ''}
-                        <tr>
-                            <td class="small text-primary text-uppercase text-normal">{Lang::T('Current IP')}</td>
-                            <td class="small mb15">{$nux_ip}</td>
-                        </tr>
-                    {/if}
-                    {if $nux_mac neq ''}
-                        <tr>
-                            <td class="small text-primary text-uppercase text-normal">{Lang::T('Current MAC')}</td>
-                            <td class="small mb15">{$nux_mac}</td>
-                        </tr>
-                    {/if}
-                    {if $_bill['type'] == 'Hotspot' && $_bill['status'] == 'on' && $_bill['routers'] != 'radius' &&
-                    $_c['hs_auth_method'] != 'hchap'}
-                    <tr>
-                        <td class="small text-primary text-uppercase text-normal">{Lang::T('Login Status')}</td>
-                        <td class="small mb15" id="login_status_{$_bill['id']}">
-                            <img src="{$app_url}/ui/ui/images/loading.gif">
-                        </td>
-                    </tr>
-                    {/if}
-                    {if $_bill['type'] == 'Hotspot' && $_bill['status'] == 'on' && $_c['hs_auth_method'] == 'hchap'}
-                        <tr>
-                            <td class="small text-primary text-uppercase text-normal">{Lang::T('Login Status')}</td>
-                            <td class="small mb15">
-                                {if $logged == '1'}
-                                    <a href="http://{$hostname}/status" class="btn btn-success btn-xs btn-block">{Lang::T('You
-                                are
-                                Online, Check Status')}</a>
-                                {else}
-                                    <a href="{Text::url('home&mikrotik=login')}"
-                                        onclick="return ask(this, '{Lang::T('Connect to Internet')}')"
-                                        class="btn btn-danger btn-xs btn-block">{Lang::T('Not Online, Login now?')}</a>
-                                {/if}
-                            </td>
-                        </tr>
-                    {/if}
-                    <tr>
-                        <td class="small text-primary text-uppercase text-normal">
-                            {if $_bill['status'] == 'on' && $_bill['prepaid'] != 'YES'}
-                                <a href="{Text::url('home&deactivate=', $_bill['id'])}"
-                                    onclick="return ask(this, '{Lang::T('Deactivate')}?')" class="btn btn-danger btn-xs"><i
-                                        class="glyphicon glyphicon-trash"></i></a>
-                            {/if}
-                        </td>
-                        <td class="small row">
-                            {if $_bill['status'] != 'on' && $_bill['prepaid'] != 'yes' && $_c['extend_expired']}
-                                <a class="btn btn-warning text-black btn-sm"
-                                    href="{Text::url('home&extend=', $_bill['id'], '&stoken=', App::getToken())}"
-                                    onclick="return ask(this, '{Text::toHex($_c['extend_confirmation'])}')">{Lang::T('Extend')}</a>
-                            {/if}
-                            <a class="btn btn-primary pull-right btn-sm"
-                                href="{Text::url('home&recharge=', $_bill['id'], '&stoken=', App::getToken())}"
-                                onclick="return ask(this, '{Lang::T('Recharge')}?')">{Lang::T('Recharge')}</a>
-                            <a class="btn btn-warning text-black pull-right btn-sm"
-                                href="{Text::url('home&sync=', $_bill['id'], '&stoken=', App::getToken())}"
-                                onclick="return ask(this, '{Lang::T('Sync account if you failed login to internet')}?')"
-                                data-toggle="tooltip" data-placement="top"
-                                title="{Lang::T('Sync account if you failed login to internet')}"><span
-                                    class="glyphicon glyphicon-refresh" aria-hidden="true"></span> {Lang::T('Sync')}</a>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-            &nbsp;&nbsp;
+                {assign pos value=$pos+1}
             {/foreach}
         </div>
-        {/if}
-        {if $_c['disable_voucher'] == 'yes'}
-            <div class="box-footer">
-                {if $_c['payment_gateway'] != 'none' or $_c['payment_gateway'] == '' }
-                    <a href="{Text::url('order/package')}" class="btn btn-primary btn-block">
-                        <i class="ion ion-ios-cart"></i>
-                        {Lang::T('Order Package')}
-                    </a>
-                {/if}
-            </div>
-        {/if}
-        {if $_bills}
-            {foreach $_bills as $_bill}
-                {if $_bill['type'] == 'Hotspot' && $_bill['status'] == 'on' && $_c['hs_auth_method'] != 'hchap'}
-                    <script>
-                        setTimeout(() => {
-                            $.ajax({
-                                url: "{Text::url('autoload_user/isLogin/')}{$_bill['id']}",
-                                cache: false,
-                                success: function(msg) {
-                                    $("#login_status_{$_bill['id']}").html(msg);
-                                }
-                            });
-                        }, 2000);
-                    </script>
-                {/if}
-            {/foreach}
-        {/if}
-        {if $_c['enable_balance'] == 'yes' && $_c['allow_balance_transfer'] == 'yes'}
-            <div class="box box-primary box-solid mb30">
-                <div class="box-header">
-                    <h4 class="box-title">{Lang::T("Transfer Balance")}</h4>
-                </div>
-                <div class="box-body p-0">
-                    <form method="post" onsubmit="return askConfirm()" role="form" action="{Text::url('home')}">
-                        <div class="form-group">
-                            <div class="col-sm-5">
-                                <input type="text" id="username" name="username" class="form-control" required
-                                    placeholder="{Lang::T('Friend Usernames')}">
-                            </div>
-                            <div class="col-sm-5">
-                                <input type="number" id="balance" name="balance" autocomplete="off" class="form-control"
-                                    required placeholder="{Lang::T('Balance Amount')}">
-                            </div>
-                            <div class="form-group col-sm-2" align="center">
-                                <button class="btn btn-success btn-block" id="sendBtn" type="submit" name="send"
-                                    onclick="return ask(this, '{Lang::T(" Are You Sure?")}')" value="balance"><i
-                                        class="glyphicon glyphicon-send"></i></button>
-                            </div>
-                        </div>
-                    </form>
-                    <script>
-                        function askConfirm() {
-                            if (confirm('{Lang::T('Send yours balance ? ')}')) {
-                            setTimeout(() => {
-                                document.getElementById('sendBtn').setAttribute('disabled', '');
-                            }, 1000);
-                            return true;
-                        }
-                        return false;
-                        }
-                    </script>
-                </div>
-                <div class="box-header">
-                    <h4 class="box-title">{Lang::T("Recharge a friend")}</h4>
-                </div>
-                <div class="box-body p-0">
-                    <form method="post" role="form" action="{Text::url('home')}">
-                        <div class="form-group">
-                            <div class="col-sm-10">
-                                <input type="text" id="username" name="username" class="form-control" required
-                                    placeholder="{Lang::T('Usernames')}">
-                            </div>
-                            <div class="form-group col-sm-2" align="center">
-                                <button class="btn btn-success btn-block" id="sendBtn" type="submit" name="send"
-                                    onclick="return ask(this, '{Lang::T(" Are You Sure?")}')" value="plan"><i
-                                        class="glyphicon glyphicon-send"></i></button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        {/if}
-        <br>
-        {if $_c['disable_voucher'] != 'yes'}
-            <div class="box box-primary box-solid mb30">
-                <div class="box-header">
-                    <h3 class="box-title">{Lang::T('Voucher Activation')}</h3>
-                </div>
-                <div class="box-body">
-                    <form method="post" role="form" class="form-horizontal" action="{Text::url('voucher/activation-post')}">
-                        <div class="input-group">
-                            <span class="input-group-btn">
-                                <a class="btn btn-default"
-                                    href="{$app_url}/scan/?back={urlencode(Text::url('home&code='))}"><i
-                                        class="glyphicon glyphicon-qrcode"></i></a>
-                            </span>
-                            <input type="text" id="code" name="code" class="form-control"
-                                placeholder="{Lang::T('Enter voucher code here')}" value="{$code}">
-                            <span class="input-group-btn">
-                                <button class="btn btn-primary" type="submit">{Lang::T('Recharge')}</button>
-                            </span>
-                        </div>
-                    </form>
-                </div>
-                <div class="box-body">
-                    <div class="btn-group btn-group-justified" role="group">
-                        <a class="btn btn-default" href="{Text::url('voucher/activation')}">
-                            <i class="ion ion-ios-cart"></i>
-                            {Lang::T('Order Voucher')}
-                        </a>
-                        {if $_c['payment_gateway'] != 'none' or $_c['payment_gateway'] == '' }
-                            <a href="{Text::url('order/package')}" class="btn btn-default">
-                                <i class="ion ion-ios-cart"></i>
-                                {Lang::T('Order Package')}
-                            </a>
-                        {/if}
-                    </div>
-                </div>
-            </div>
-        {/if}
-    </div>
-</div>
+    {/if}
+{/foreach}
+
+
 {if isset($hostname) && $hchap == 'true' && $_c['hs_auth_method'] == 'hchap'}
     <script type="text/javascript" src="/ui/ui/scripts/md5.js"></script>
     <script type="text/javascript">
diff --git a/ui/ui/widget/customers/account_info.tpl b/ui/ui/widget/customers/account_info.tpl
new file mode 100644
index 00000000..e9930ded
--- /dev/null
+++ b/ui/ui/widget/customers/account_info.tpl
@@ -0,0 +1,92 @@
+<div class="box box-primary box-solid">
+    <div class="box-header">
+        <h3 class="box-title">{Lang::T('Your Account Information')}</h3>
+    </div>
+    <div style="margin-left: 5px; margin-right: 5px;">
+        <table class="table table-bordered table-striped table-bordered table-hover mb-0" style="margin-bottom: 0px;">
+            <tr>
+                <td class="small text-success text-uppercase text-normal">{Lang::T('Usernames')}</td>
+                <td class="small mb15">{$_user['username']}</td>
+            </tr>
+            <tr>
+                <td class="small text-success text-uppercase text-normal">{Lang::T('Password')}</td>
+                <td class="small mb15"><input type="password" value="{$_user['password']}"
+                        style="width:100%; border: 0px;" onmouseleave="this.type = 'password'"
+                        onmouseenter="this.type = 'text'" onclick="this.select()"></td>
+            </tr>
+            <tr>
+                <td class="small text-success text-uppercase text-normal">{Lang::T('Service Type')}</td>
+                <td class="small mb15">
+                    {if $_user.service_type == 'Hotspot'}
+                        Hotspot
+                    {elseif $_user.service_type == 'PPPoE'}
+                        PPPoE
+                    {elseif $_user.service_type == 'VPN'}
+                        VPN
+                    {elseif $_user.service_type == 'Others' || $_user.service_type == null}
+                        Others
+                    {/if}
+                </td>
+            </tr>
+
+            {if $_c['enable_balance'] == 'yes'}
+                <tr>
+                    <td class="small text-warning text-uppercase text-normal">{Lang::T('Yours Balance')}</td>
+                    <td class="small mb15 text-bold">
+                        {Lang::moneyFormat($_user['balance'])}
+                        {if $_user['auto_renewal'] == 1}
+                            <a class="label label-success pull-right" href="{Text::url('home&renewal=0')}"
+                                onclick="return ask(this, '{Lang::T('Disable auto renewal?')}')">{Lang::T('Auto Renewal
+                                On')}</a>
+                        {else}
+                            <a class="label label-danger pull-right" href="{Text::url('home&renewal=1')}"
+                                onclick="return ask(this, '{Lang::T('Enable auto renewal?')}')">{Lang::T('Auto Renewal
+                                Off')}</a>
+                        {/if}
+                    </td>
+                </tr>
+            {/if}
+        </table>&nbsp;&nbsp;
+    </div>
+    {if $abills && count($abills)>0}
+        <div class="box-header">
+            <h3 class="box-title">{Lang::T('Additional Billing')}</h3>
+        </div>
+
+        <div style="margin-left: 5px; margin-right: 5px;">
+            <table class="table table-bordered table-striped table-bordered table-hover mb-0" style="margin-bottom: 0px;">
+                {assign var="total" value=0}
+                {foreach $abills as $k => $v}
+                    <tr>
+                        <td class="small text-success text-uppercase text-normal">{str_replace(' Bill', '', $k)}</td>
+                        <td class="small mb15">
+                            {if strpos($v, ':') === false}
+                                {Lang::moneyFormat($v)}
+                                <sup title="recurring">∞</sup>
+                                {assign var="total" value=$v+$total}
+                            {else}
+                                {assign var="exp" value=explode(':',$v)}
+                                {Lang::moneyFormat($exp[0])}
+                                <sup title="{$exp[1]} more times">{if $exp[1]==0}{Lang::T('paid
+                                off')}{else}{$exp[1]}x{/if}</sup>
+                                {if $exp[1]>0}
+                                    {assign var="total" value=$exp[0]+$total}
+                                {/if}
+                            {/if}
+                        </td>
+                    </tr>
+                {/foreach}
+                <tr>
+                    <td class="small text-success text-uppercase text-normal"><b>{Lang::T('Total')}</b></td>
+                    <td class="small mb15"><b>
+                            {if $total==0}
+                                {ucwords(Lang::T('paid off'))}
+                            {else}
+                                {Lang::moneyFormat($total)}
+                            {/if}
+                        </b></td>
+                </tr>
+            </table>
+        </div> &nbsp;&nbsp;
+    {/if}
+</div>
\ No newline at end of file
diff --git a/ui/ui/widget/customers/active_internet_plan.tpl b/ui/ui/widget/customers/active_internet_plan.tpl
new file mode 100644
index 00000000..6d04b9a8
--- /dev/null
+++ b/ui/ui/widget/customers/active_internet_plan.tpl
@@ -0,0 +1,165 @@
+{if $_bills}
+    <div class="box box-primary box-solid">
+        {foreach $_bills as $_bill}
+            {if $_bill['routers'] != 'radius'}
+                <div class="box-header">
+                    <h3 class="box-title">{$_bill['routers']}</h3>
+                    <div class="btn-group pull-right">
+                        {if $_bill['type'] == 'Hotspot'}
+                            {if $_c['hotspot_plan']==''}Hotspot Plan{else}{$_c['hotspot_plan']}{/if}
+                        {else if $_bill['type'] == 'PPPOE'}
+                            {if $_c['pppoe_plan']==''}PPPOE Plan{else}{$_c['pppoe_plan']}{/if}
+                        {else if $_bill['type'] == 'VPN'}
+                            {if $_c['pppoe_plan']==''}VPN Plan{else}{$_c['vpn_plan']}{/if}
+                        {/if}
+                    </div>
+                </div>
+            {else}
+                <div class="box-header">
+                    <h3 class="box-title">{if $_c['radius_plan']==''}Radius Plan{else}{$_c['radius_plan']}{/if}</h3>
+                </div>
+            {/if}
+            <div style="margin-left: 5px; margin-right: 5px;">
+                <table class="table table-bordered table-striped table-bordered table-hover" style="margin-bottom: 0px;">
+                    <tr>
+                        <td class="small text-primary text-uppercase text-normal">{Lang::T('Package Name')}</td>
+                        <td class="small mb15">
+                            {$_bill['namebp']}
+                            {if $_bill['status'] != 'on'}
+                                <a class="label label-danger pull-right"
+                                    href="{Text::url('order/package')}">{Lang::T('Expired')}</a>
+                            {/if}
+                        </td>
+                    </tr>
+                    {if $_c['show_bandwidth_plan'] == 'yes'}
+                        <tr>
+                            <td class="small text-primary text-uppercase text-normal">{Lang::T('Bandwidth')}</td>
+                            <td class="small mb15">
+                                {$_bill['name_bw']}
+                            </td>
+                        </tr>
+                    {/if}
+                    <tr>
+                        <td class="small text-info text-uppercase text-normal">{Lang::T('Created On')}</td>
+                        <td class="small mb15">
+                            {if $_bill['time'] ne ''}
+                                {Lang::dateAndTimeFormat($_bill['recharged_on'],$_bill['recharged_time'])}
+                            {/if}
+                            &nbsp;</td>
+                    </tr>
+                    <tr>
+                        <td class="small text-danger text-uppercase text-normal">{Lang::T('Expires On')}</td>
+                        <td class="small mb15 text-danger">
+                            {if $_bill['time'] ne ''}
+                                {Lang::dateAndTimeFormat($_bill['expiration'],$_bill['time'])}
+                            {/if}&nbsp;
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="small text-success text-uppercase text-normal">{Lang::T('Type')}</td>
+                        <td class="small mb15 text-success">
+                            <b>{if $_bill['prepaid'] eq yes}Prepaid{else}Postpaid{/if}</b>
+                            {$_bill['plan_type']}
+                        </td>
+                    </tr>
+                    {if $_bill['type'] == 'VPN' && $_bill['routers'] == $vpn['routers']}
+                        <tr>
+                            <td class="small text-success text-uppercase text-normal">{Lang::T('Public IP')}</td>
+                            <td class="small mb15">{$vpn['public_ip']} / {$vpn['port_name']}</td>
+                        </tr>
+                        <tr>
+                            <td class="small text-success text-uppercase text-normal">{Lang::T('Private IP')}</td>
+                            <td class="small mb15">{$_user['pppoe_ip']}</td>
+                        </tr>
+                        {foreach $cf as $tcf}
+                            <tr>
+                                {if $tcf['field_name'] == 'Winbox' or $tcf['field_name'] == 'Api' or $tcf['field_name'] == 'Web'}
+                                    <td class="small text-info text-uppercase text-normal">{$tcf['field_name']} - Port</td>
+                                    <td class="small mb15"><a href="http://{$vpn['public_ip']}:{$tcf['field_value']}"
+                                            target="_blank">{$tcf['field_value']}</a></td>
+                                </tr>
+                            {/if}
+                        {/foreach}
+                    {/if}
+
+                    {if $nux_ip neq ''}
+                        <tr>
+                            <td class="small text-primary text-uppercase text-normal">{Lang::T('Current IP')}</td>
+                            <td class="small mb15">{$nux_ip}</td>
+                        </tr>
+                    {/if}
+                    {if $nux_mac neq ''}
+                        <tr>
+                            <td class="small text-primary text-uppercase text-normal">{Lang::T('Current MAC')}</td>
+                            <td class="small mb15">{$nux_mac}</td>
+                        </tr>
+                    {/if}
+                    {if $_bill['type'] == 'Hotspot' && $_bill['status'] == 'on' && $_bill['routers'] != 'radius' && $_c['hs_auth_method'] != 'hchap'}
+                        <tr>
+                            <td class="small text-primary text-uppercase text-normal">{Lang::T('Login Status')}</td>
+                            <td class="small mb15" id="login_status_{$_bill['id']}">
+                                <img src="{$app_url}/ui/ui/images/loading.gif">
+                            </td>
+                        </tr>
+                    {/if}
+                    {if $_bill['type'] == 'Hotspot' && $_bill['status'] == 'on' && $_c['hs_auth_method'] == 'hchap'}
+                        <tr>
+                            <td class="small text-primary text-uppercase text-normal">{Lang::T('Login Status')}</td>
+                            <td class="small mb15">
+                                {if $logged == '1'}
+                                    <a href="http://{$hostname}/status" class="btn btn-success btn-xs btn-block">
+                                        {Lang::T('You are Online, Check Status')}</a>
+                                {else}
+                                    <a href="{Text::url('home&mikrotik=login')}"
+                                        onclick="return ask(this, '{Lang::T('Connect to Internet')}')"
+                                        class="btn btn-danger btn-xs btn-block">{Lang::T('Not Online, Login now?')}</a>
+                                {/if}
+                            </td>
+                        </tr>
+                    {/if}
+                    <tr>
+                        <td class="small text-primary text-uppercase text-normal">
+                            {if $_bill['status'] == 'on' && $_bill['prepaid'] != 'YES'}
+                                <a href="{Text::url('home&deactivate=', $_bill['id'])}"
+                                    onclick="return ask(this, '{Lang::T('Deactivate')}?')" class="btn btn-danger btn-xs"><i
+                                        class="glyphicon glyphicon-trash"></i></a>
+                            {/if}
+                        </td>
+                        <td class="small row">
+                            {if $_bill['status'] != 'on' && $_bill['prepaid'] != 'yes' && $_c['extend_expired']}
+                                <a class="btn btn-warning text-black btn-sm"
+                                    href="{Text::url('home&extend=', $_bill['id'], '&stoken=', App::getToken())}"
+                                    onclick="return ask(this, '{Text::toHex($_c['extend_confirmation'])}')">{Lang::T('Extend')}</a>
+                            {/if}
+                            <a class="btn btn-primary pull-right btn-sm"
+                                href="{Text::url('home&recharge=', $_bill['id'], '&stoken=', App::getToken())}"
+                                onclick="return ask(this, '{Lang::T('Recharge')}?')">{Lang::T('Recharge')}</a>
+                            <a class="btn btn-warning text-black pull-right btn-sm"
+                                href="{Text::url('home&sync=', $_bill['id'], '&stoken=', App::getToken())}"
+                                onclick="return ask(this, '{Lang::T('Sync account if you failed login to internet')}?')"
+                                data-toggle="tooltip" data-placement="top"
+                                title="{Lang::T('Sync account if you failed login to internet')}"><span
+                                    class="glyphicon glyphicon-refresh" aria-hidden="true"></span> {Lang::T('Sync')}</a>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            &nbsp;&nbsp;
+        {/foreach}
+    </div>
+    {foreach $_bills as $_bill}
+        {if $_bill['type'] == 'Hotspot' && $_bill['status'] == 'on' && $_c['hs_auth_method'] != 'hchap'}
+            <script>
+                setTimeout(() => {
+                    $.ajax({
+                        url: "{Text::url('autoload_user/isLogin/')}{$_bill['id']}",
+                        cache: false,
+                        success: function(msg) {
+                            $("#login_status_{$_bill['id']}").html(msg);
+                        }
+                    });
+                }, 2000);
+            </script>
+        {/if}
+    {/foreach}
+{/if}
\ No newline at end of file
diff --git a/ui/ui/widget/customers/announcement.tpl b/ui/ui/widget/customers/announcement.tpl
new file mode 100644
index 00000000..8525df4d
--- /dev/null
+++ b/ui/ui/widget/customers/announcement.tpl
@@ -0,0 +1,11 @@
+<div class="box box-info box-solid">
+    <div class="box-header">
+        <h3 class="box-title">{Lang::T('Announcement')}</h3>
+    </div>
+    <div class="box-body">
+        {$Announcement_Customer = "{$PAGES_PATH}/Announcement_Customer.html"}
+        {if file_exists($Announcement_Customer)}
+            {include file=$Announcement_Customer}
+        {/if}
+    </div>
+</div>
\ No newline at end of file
diff --git a/ui/ui/widget/customers/balance_transfer.tpl b/ui/ui/widget/customers/balance_transfer.tpl
new file mode 100644
index 00000000..f7db2bd8
--- /dev/null
+++ b/ui/ui/widget/customers/balance_transfer.tpl
@@ -0,0 +1,38 @@
+
+{if $_c['enable_balance'] == 'yes' && $_c['allow_balance_transfer'] == 'yes'}
+    <div class="box box-primary box-solid mb30">
+        <div class="box-header">
+            <h4 class="box-title">{Lang::T("Transfer Balance")}</h4>
+        </div>
+        <div class="box-body p-0">
+            <form method="post" onsubmit="return askConfirm()" role="form" action="{Text::url('home')}">
+                <div class="form-group">
+                    <div class="col-sm-5">
+                        <input type="text" id="username" name="username" class="form-control" required
+                            placeholder="{Lang::T('Friend Usernames')}">
+                    </div>
+                    <div class="col-sm-5">
+                        <input type="number" id="balance" name="balance" autocomplete="off" class="form-control"
+                            required placeholder="{Lang::T('Balance Amount')}">
+                    </div>
+                    <div class="form-group col-sm-2" align="center">
+                        <button class="btn btn-success btn-block" id="sendBtn" type="submit" name="send"
+                            onclick="return ask(this, '{Lang::T(" Are You Sure?")}')" value="balance"><i
+                                class="glyphicon glyphicon-send"></i></button>
+                    </div>
+                </div>
+            </form>
+            <script>
+                function askConfirm() {
+                    if (confirm('{Lang::T('Send yours balance ? ')}')) {
+                    setTimeout(() => {
+                        document.getElementById('sendBtn').setAttribute('disabled', '');
+                    }, 1000);
+                    return true;
+                }
+                return false;
+                }
+            </script>
+        </div>
+    </div>
+{/if}
\ No newline at end of file
diff --git a/ui/ui/widget/customers/button_order_internet_plan.tpl b/ui/ui/widget/customers/button_order_internet_plan.tpl
new file mode 100644
index 00000000..93393110
--- /dev/null
+++ b/ui/ui/widget/customers/button_order_internet_plan.tpl
@@ -0,0 +1,8 @@
+<div class="box-footer">
+    {if $_c['payment_gateway'] != 'none' or $_c['payment_gateway'] == '' }
+        <a href="{Text::url('order/package')}" class="btn btn-primary btn-block">
+            <i class="ion ion-ios-cart"></i>
+            {Lang::T('Order Package')}
+        </a>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/ui/ui/widget/customers/recharge_a_friend.tpl b/ui/ui/widget/customers/recharge_a_friend.tpl
new file mode 100644
index 00000000..e0705f19
--- /dev/null
+++ b/ui/ui/widget/customers/recharge_a_friend.tpl
@@ -0,0 +1,20 @@
+<div class="box box-primary box-solid mb30">
+    <div class="box-header">
+        <h4 class="box-title">{Lang::T("Recharge a friend")}</h4>
+    </div>
+    <div class="box-body p-0">
+        <form method="post" role="form" action="{Text::url('home')}">
+            <div class="form-group">
+                <div class="col-sm-10">
+                    <input type="text" id="username" name="username" class="form-control" required
+                        placeholder="{Lang::T('Usernames')}">
+                </div>
+                <div class="form-group col-sm-2" align="center">
+                    <button class="btn btn-success btn-block" id="sendBtn" type="submit" name="send"
+                        onclick="return ask(this, '{Lang::T(" Are You Sure?")}')" value="plan"><i
+                            class="glyphicon glyphicon-send"></i></button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ui/ui/widget/customers/unpaid_order.tpl b/ui/ui/widget/customers/unpaid_order.tpl
new file mode 100644
index 00000000..a49bb469
--- /dev/null
+++ b/ui/ui/widget/customers/unpaid_order.tpl
@@ -0,0 +1,48 @@
+{if $unpaid }
+    <div class="box box-danger box-solid">
+        <div class="box-header">
+            <h3 class="box-title">{Lang::T('Unpaid Order')}</h3>
+        </div>
+        <div style="margin-left: 5px; margin-right: 5px;">
+            <table class="table table-condensed table-bordered table-striped table-hover"
+                style="margin-bottom: 0px;">
+                <tbody>
+                    <tr>
+                        <td>{Lang::T('expired')}</td>
+                        <td>{Lang::dateTimeFormat($unpaid['expired_date'])} </td>
+                    </tr>
+                    <tr>
+                        <td>{Lang::T('Package Name')}</td>
+                        <td>{$unpaid['plan_name']}</td>
+                    </tr>
+                    <tr>
+                        <td>{Lang::T('Package Price')}</td>
+                        <td>{$unpaid['price']}</td>
+                    </tr>
+                    <tr>
+                        <td>{Lang::T('Routers')}</td>
+                        <td>{$unpaid['routers']}</td>
+                    </tr>
+                </tbody>
+            </table> &nbsp;
+        </div>
+        <div class="box-footer p-2">
+            <div class="btn-group btn-group-justified mb15">
+                <div class="btn-group">
+                    <a href="{Text::url('order/view/', $unpaid['id'], '/cancel')}" class="btn btn-danger btn-sm"
+                        onclick="return ask(this, '{Lang::T('Cancel it?')}')">
+                        <span class="glyphicon glyphicon-trash"></span>
+                        {Lang::T('Cancel')}
+                    </a>
+                </div>
+                <div class="btn-group">
+                    <a class="btn btn-success btn-block btn-sm" href="{Text::url('order/view/',$unpaid['id'])}">
+                        <span class="icon"><i class="ion ion-card"></i></span>
+                        <span>{Lang::T('PAY NOW')}</span>
+                    </a>
+                </div>
+            </div>
+
+        </div>&nbsp;&nbsp;
+    </div>
+{/if}
\ No newline at end of file
diff --git a/ui/ui/widget/customers/voucher_activation.tpl b/ui/ui/widget/customers/voucher_activation.tpl
new file mode 100644
index 00000000..bb43c29d
--- /dev/null
+++ b/ui/ui/widget/customers/voucher_activation.tpl
@@ -0,0 +1,38 @@
+
+{if $_c['disable_voucher'] != 'yes'}
+    <div class="box box-primary box-solid mb30">
+        <div class="box-header">
+            <h3 class="box-title">{Lang::T('Voucher Activation')}</h3>
+        </div>
+        <div class="box-body">
+            <form method="post" role="form" class="form-horizontal" action="{Text::url('voucher/activation-post')}">
+                <div class="input-group">
+                    <span class="input-group-btn">
+                        <a class="btn btn-default"
+                            href="{$app_url}/scan/?back={urlencode(Text::url('home&code='))}"><i
+                                class="glyphicon glyphicon-qrcode"></i></a>
+                    </span>
+                    <input type="text" id="code" name="code" class="form-control"
+                        placeholder="{Lang::T('Enter voucher code here')}" value="{$code}">
+                    <span class="input-group-btn">
+                        <button class="btn btn-primary" type="submit">{Lang::T('Recharge')}</button>
+                    </span>
+                </div>
+            </form>
+        </div>
+        <div class="box-body">
+            <div class="btn-group btn-group-justified" role="group">
+                <a class="btn btn-default" href="{Text::url('voucher/activation')}">
+                    <i class="ion ion-ios-cart"></i>
+                    {Lang::T('Order Voucher')}
+                </a>
+                {if $_c['payment_gateway'] != 'none' or $_c['payment_gateway'] == '' }
+                    <a href="{Text::url('order/package')}" class="btn btn-default">
+                        <i class="ion ion-ios-cart"></i>
+                        {Lang::T('Order Package')}
+                    </a>
+                {/if}
+            </div>
+        </div>
+    </div>
+{/if}
\ No newline at end of file