diff --git a/ui/ui/voucher-add.tpl b/ui/ui/voucher-add.tpl
new file mode 100644
index 0000000..8454a6b
--- /dev/null
+++ b/ui/ui/voucher-add.tpl
@@ -0,0 +1,83 @@
+{include file="sections/header.tpl"}
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-sm-12 col-md-12">
+                        <div class="card card-primary card-hovered card-stacked mb30">
+                            <div class="card-header">
+                                <h3 class="card-title">{Lang::T('Add Vouchers')}</h3>
+                            </div>
+                            <div class="card-body">
+                                <form class="form-horizontal" method="post" role="form" action="{$_url}plan/voucher-post">
+                                    <div class="form-group row">
+                                        <label class="col-md-2 control-label">{Lang::T('Type')}</label>
+                                        <div class="col-md-6">
+                                            <input type="radio" id="Hot" name="type" value="Hotspot"> {Lang::T('Hotspot Plans')}
+                                            <input type="radio" id="POE" name="type" value="PPPOE"> {Lang::T('PPPOE Plans')}
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-md-2 control-label">{Lang::T('Routers')}</label>
+                                        <div class="col-md-6">
+                                            <select id="server" name="server" class="form-select" style="height: 52px; background-color: white;">
+                                                <option value=''>{Lang::T('Select Routers')}</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-md-2 control-label">{Lang::T('Service Plan')}</label>
+                                        <div class="col-md-6">
+                                            <select id="plan" name="plan" class="form-select select2" style="height: 52px; background-color: white;">
+                                                <option value=''>{Lang::T('Select Plans')}</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-md-2 control-label">{Lang::T('Number of Vouchers')}</label>
+                                        <div class="col-md-6">
+                                            <input type="text" class="form-control" name="numbervoucher" value="1">
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-md-2 control-label">{Lang::T('Voucher Format')}</label>
+                                        <div class="col-md-6">
+                                            <select name="voucher_format" id="voucher_format" class="form-select" style="height: 52px; background-color: white;">
+                                                <option value="up" {if $_c['voucher_format'] == 'up'}selected="selected" {/if}>UPPERCASE
+                                                </option>
+                                                <option value="low" {if $_c['voucher_format'] == 'low'}selected="selected" {/if}>
+                                                    lowercase
+                                                </option>
+                                                <option value="rand" {if $_c['voucher_format'] == 'rand'}selected="selected" {/if}>
+                                                    RaNdoM
+                                                </option>
+                                            </select>
+                                        </div>
+                                        <p class="help-block col-md-4">UPPERCASE lowercase RaNdoM</p>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-md-2 control-label">{Lang::T('Voucher Prefix')}</label>
+                                        <div class="col-md-6">
+                                            <input type="text" class="form-control" name="prefix" placeholder="NUX-" value="{$_c['voucher_prefix']}">
+                                        </div>
+                                        <p class="help-block col-md-4">NUX-VoUCHeRCOdE</p>
+                                    </div>
+                                    <div class="form-group row">
+                                        <label class="col-md-2 control-label">{Lang::T('Length Code')}</label>
+                                        <div class="col-md-6">
+                                            <input type="text" class="form-control" name="lengthcode" value="12">
+                                        </div>
+                                    </div>
+                                    <center>
+                                        <div class="form-group row">
+                                            <div class="col-lg-offset-2 col-lg-10">
+                                                <button class="btn btn-success"
+                                                    type="submit">{Lang::T('Generate')}</button>
+                                            </div>
+                                        </div>
+                                    </center>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+{include file="sections/footer.tpl"}
\ No newline at end of file
diff --git a/ui/ui/voucher-view.tpl b/ui/ui/voucher-view.tpl
new file mode 100644
index 0000000..4d55f9d
--- /dev/null
+++ b/ui/ui/voucher-view.tpl
@@ -0,0 +1,41 @@
+{include file="sections/header.tpl"}
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-md-6 col-sm-12 col-md-offset-3">
+                        <div class="card card-hovered card-primary card-stacked mb30">
+                            <div class="card-body">
+                                <form class="form-horizontal" method="post" action="{$_url}plan/print" target="_blank">
+                                    <pre id="content"></pre>
+                                    <textarea class="hidden" id="formcontent" name="content">{$print}</textarea>
+                                    <input type="hidden" name="id" value="{$in['id']}">
+                                    <div class="row">
+                                        <a href="{$_url}plan/voucher" class="btn btn-success btn-sm mb-2"><i
+                                                class="fa fa-reply-all"></i>{Lang::T('Finish')}</a>
+                                        <a href="https://api.whatsapp.com/send/?text={$whatsapp}" target="_blank"
+                                            class="btn btn-primary btn-sm mb-2">
+                                            <i class="fa fa-share"></i> WhatsApp</a>
+                                        <button type="submit" class="btn btn-info btn-sm"><i class="fa fa-print"></i>
+                                            Print</button>
+                                            <!-- <a href="nux://print?text={urlencode($print)}"
+                                            class="btn btn-success text-black btn-sm hidden-md hidden-lg">
+                                                <i class="fa fa-phone"></i>
+                                                Print
+                                            </a>
+                                            <a href="https://github.com/hotspotbilling/android-printer"
+                                            class="btn btn-success text-black btn-sm hidden-xs hidden-sm" target="_blank">
+                                                <i class="fa fa-phone"></i>
+                                                NuxPrint
+                                            </a> -->
+                                    </div>
+                                </form>
+                                <javascript type="text/javascript">
+                                </javascript>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <script type="text/javascript">
+                    document.getElementById('content').innerHTML = document.getElementById('formcontent').innerHTML;
+                </script>
+            </div>
+{include file="sections/footer.tpl"}
\ No newline at end of file