diff --git a/system/controllers/login.php b/system/controllers/login.php
index d4871243..4bd773f9 100644
--- a/system/controllers/login.php
+++ b/system/controllers/login.php
@@ -313,9 +313,23 @@ switch ($do) {
             $ui->assign('code', alphanumeric(_get('code'), "-"));
             $ui->display('customer/login-noreg.tpl');
         } else {
+            $UPLOAD_URL_PATH = str_replace($root_path, '',  $UPLOAD_PATH);
+            $login_logo = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'login-logo.png';
+            $ui->assign('login_logo', $login_logo);
+            $wallpaper = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'wallpaper.png';
+            $ui->assign('wallpaper', $wallpaper);
+            $favicon = (file_exists($UPLOAD_PATH . DIRECTORY_SEPARATOR . 'favicon.png')) ? $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'favicon.png' : $root . DIRECTORY_SEPARATOR . 'ui/ui/images/logo.png';
+            $ui->assign('favicon', $favicon);
             $ui->assign('csrf_token', $csrf_token);
             $ui->assign('_title', Lang::T('Login'));
-            $ui->display('customer/login.tpl');
+            switch ($config['login_page_type']) {
+                case 'custom':
+                    $ui->display('customer/login-custom-' . $config['login_Page_template'] . '.tpl');
+                    break;
+                default:
+                    $ui->display('customer/login.tpl');
+                    break;
+            }
         }
         break;
 }
diff --git a/system/controllers/settings.php b/system/controllers/settings.php
index 62445e06..3aebdb5e 100644
--- a/system/controllers/settings.php
+++ b/system/controllers/settings.php
@@ -81,6 +81,14 @@ switch ($action) {
             $logo = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'logo.default.png';
         }
         $ui->assign('logo', $logo);
+
+        $login_logo = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'login-logo.png';
+        $ui->assign('login_logo', $login_logo);
+        $wallpaper = $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'wallpaper.png';
+        $ui->assign('wallpaper', $wallpaper);
+        $favicon = (file_exists($UPLOAD_PATH . DIRECTORY_SEPARATOR . 'favicon.png')) ? $UPLOAD_URL_PATH . DIRECTORY_SEPARATOR . 'favicon.png' : $root . DIRECTORY_SEPARATOR . 'ui/ui/images/logo.png';
+        $ui->assign('favicon', $favicon);
+
         $themes = [];
         $files = scandir('ui/themes/');
         foreach ($files as $file) {
@@ -88,6 +96,20 @@ switch ($action) {
                 $themes[] = $file;
             }
         }
+
+        $template_files = glob('ui/ui/customer/login-custom-*.tpl');
+        $templates = [];
+
+        foreach ($template_files as $file) {
+            $parts = explode('-', basename($file, '.tpl'));
+            $template_identifier = $parts[2] ?? 'unknown';
+            $templates[] = [
+                'filename' => basename($file),
+                'value' => $template_identifier,
+                'name' => str_replace('_', ' ', ucfirst($template_identifier))
+            ];
+        }
+
         $r = ORM::for_table('tbl_routers')->find_many();
         $ui->assign('r', $r);
         if (function_exists("shell_exec")) {
@@ -111,6 +133,7 @@ switch ($action) {
                 $d->save();
             }
         }
+        $ui->assign('template_files', $templates);
         $ui->assign('_c', $config);
         $ui->assign('php', $php);
         $ui->assign('dir', str_replace('controllers', '', __DIR__));
@@ -199,6 +222,94 @@ switch ($action) {
         }
         break;
 
+    case 'login-page-post':
+        // Login page post
+        $login_page_title = _post('login_page_head');
+        $login_page_description = _post('login_page_description');
+        $login_Page_template = _post('login_Page_template');
+        $login_page_type = _post('login_page_type');
+        $csrf_token = _post('csrf_token');
+
+        if (!Csrf::check($csrf_token)) {
+            r2(U . 'settings/app', 'e', Lang::T('Invalid or Expired CSRF Token') . ".");
+        }
+
+        $image_paths = [];
+
+        if ($login_page_type == 'custom' && (empty($login_Page_template) || empty($login_page_title) || empty($login_page_description))) {
+            r2(U . 'settings/app', 'e', 'Please fill all required fields');
+            return;
+        }
+
+        if (strlen($login_page_title) > 25) {
+            r2(U . 'settings/app', 'e', 'Login page title must not exceed 25 characters');
+            return;
+        }
+        if (strlen($login_page_description) > 160) {
+            r2(U . 'settings/app', 'e', 'Login page description must not exceed 160 characters');
+            return;
+        }
+
+        $settings = [
+            'login_page_head' => $login_page_title,
+            'login_page_description' => $login_page_description,
+            'login_Page_template' => $login_Page_template,
+            'login_page_type' => $login_page_type,
+        ];
+
+        if ($_FILES['login_page_favicon']['name'] != '') {
+            $favicon_type = $_FILES['login_page_favicon']['type'];
+            if (in_array($favicon_type, ['image/jpeg', 'image/png']) && preg_match('/\.(jpg|jpeg|png)$/i', $_FILES['login_page_favicon']['name'])) {
+                $favicon_path = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'favicon.png';
+                File::resizeCropImage($_FILES['login_page_favicon']['tmp_name'], $favicon_path, 30, 30, 100);
+                $image_paths['favicon'] = $favicon_path;
+                if (file_exists($_FILES['login_page_favicon']['tmp_name'])) unlink($_FILES['login_page_favicon']['tmp_name']);
+            } else {
+                r2(U . 'settings/app', 'e', 'Favicon must be a JPG, JPEG, or PNG image.');
+            }
+        }
+
+        if ($_FILES['login_page_wallpaper']['name'] != '') {
+            $wallpaper_type = $_FILES['login_page_wallpaper']['type'];
+            if (in_array($wallpaper_type, ['image/jpeg', 'image/png']) && preg_match('/\.(jpg|jpeg|png)$/i', $_FILES['login_page_wallpaper']['name'])) {
+                $wallpaper_path = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'wallpaper.png';
+                File::resizeCropImage($_FILES['login_page_wallpaper']['tmp_name'], $wallpaper_path, 1920, 1080, 100);
+                $image_paths['wallpaper'] = $wallpaper_path;
+                if (file_exists($_FILES['login_page_wallpaper']['tmp_name'])) unlink($_FILES['login_page_wallpaper']['tmp_name']);
+            } else {
+                r2(U . 'settings/app', 'e', 'Wallpaper must be a JPG, JPEG, or PNG image.');
+            }
+        }
+
+        if ($_FILES['login_page_logo']['name'] != '') {
+            $logo_type = $_FILES['login_page_logo']['type'];
+            if (in_array($logo_type, ['image/jpeg', 'image/png']) && preg_match('/\.(jpg|jpeg|png)$/i', $_FILES['login_page_logo']['name'])) {
+                $logo_path = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'login-logo.png';
+                File::resizeCropImage($_FILES['login_page_logo']['tmp_name'], $logo_path, 300, 60, 100);
+                $image_paths['logo'] = $logo_path;
+                if (file_exists($_FILES['login_page_logo']['tmp_name'])) unlink($_FILES['login_page_logo']['tmp_name']);
+            } else {
+                r2(U . 'settings/app', 'e', 'Logo must be a JPG, JPEG, or PNG image.');
+            }
+        }
+
+        foreach ($settings as $key => $value) {
+            $d = ORM::for_table('tbl_appconfig')->where('setting', $key)->find_one();
+            if ($d) {
+                $d->value = $value;
+                $d->save();
+            } else {
+                $d = ORM::for_table('tbl_appconfig')->create();
+                $d->setting = $key;
+                $d->value = $value;
+                $d->save();
+            }
+        }
+
+        _log('[' . $admin['username'] . ']: ' . Lang::T('Login Page Settings Saved Successfully'), $admin['user_type'], $admin['id']);
+        r2(U . 'settings/app', 's', Lang::T('Login Page Settings Saved Successfully'));
+        break;
+
     case 'localisation':
         if (!in_array($admin['user_type'], ['SuperAdmin', 'Admin'])) {
             _alert(Lang::T('You do not have permission to access this page'), 'danger', "dashboard");
@@ -474,19 +585,19 @@ switch ($action) {
             }
         }
         if ($d) {
-            if(isset($routes['3']) && $routes['3'] == 'deletePhoto'){
-                if($d['photo'] != '' && strpos($d['photo'], 'default') === false){
-                    if(file_exists($UPLOAD_PATH.$d['photo']) && strpos($d['photo'], 'default') === false){
-                        unlink($UPLOAD_PATH.$d['photo']);
-                        if(file_exists($UPLOAD_PATH.$d['photo'].'.thumb.jpg')){
-                            unlink($UPLOAD_PATH.$d['photo'].'.thumb.jpg');
+            if (isset($routes['3']) && $routes['3'] == 'deletePhoto') {
+                if ($d['photo'] != '' && strpos($d['photo'], 'default') === false) {
+                    if (file_exists($UPLOAD_PATH . $d['photo']) && strpos($d['photo'], 'default') === false) {
+                        unlink($UPLOAD_PATH . $d['photo']);
+                        if (file_exists($UPLOAD_PATH . $d['photo'] . '.thumb.jpg')) {
+                            unlink($UPLOAD_PATH . $d['photo'] . '.thumb.jpg');
                         }
                     }
                     $d->photo = '/admin.default.png';
                     $d->save();
                     $ui->assign('notify_t', 's');
                     $ui->assign('notify', 'You have successfully deleted the photo');
-                }else{
+                } else {
                     $ui->assign('notify_t', 'e');
                     $ui->assign('notify', 'No photo found to delete');
                 }
@@ -657,44 +768,44 @@ switch ($action) {
                 if (function_exists('imagecreatetruecolor')) {
                     $hash = md5_file($_FILES['photo']['tmp_name']);
                     $subfolder = substr($hash, 0, 2);
-                    $folder = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'photos'. DIRECTORY_SEPARATOR;
-                    if(!file_exists($folder)){
+                    $folder = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'photos' . DIRECTORY_SEPARATOR;
+                    if (!file_exists($folder)) {
                         mkdir($folder);
                     }
-                    $folder = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'photos'. DIRECTORY_SEPARATOR. $subfolder. DIRECTORY_SEPARATOR;
-                    if(!file_exists($folder)){
+                    $folder = $UPLOAD_PATH . DIRECTORY_SEPARATOR . 'photos' . DIRECTORY_SEPARATOR . $subfolder . DIRECTORY_SEPARATOR;
+                    if (!file_exists($folder)) {
                         mkdir($folder);
                     }
                     $imgPath = $folder . $hash . '.jpg';
-                    if (!file_exists($imgPath)){
+                    if (!file_exists($imgPath)) {
                         File::resizeCropImage($_FILES['photo']['tmp_name'], $imgPath, 1600, 1600, 100);
                     }
-                    if (!file_exists($imgPath.'.thumb.jpg')){
-                        if(_post('faceDetect') == 'yes'){
-                            try{
+                    if (!file_exists($imgPath . '.thumb.jpg')) {
+                        if (_post('faceDetect') == 'yes') {
+                            try {
                                 $detector = new svay\FaceDetector();
                                 $detector->setTimeout(5000);
                                 $detector->faceDetect($imgPath);
-                                $detector->cropFaceToJpeg($imgPath.'.thumb.jpg', false);
-                            }catch (Exception $e) {
-                                File::makeThumb($imgPath, $imgPath.'.thumb.jpg', 200);
+                                $detector->cropFaceToJpeg($imgPath . '.thumb.jpg', false);
+                            } catch (Exception $e) {
+                                File::makeThumb($imgPath, $imgPath . '.thumb.jpg', 200);
                             } catch (Throwable $e) {
-                                File::makeThumb($imgPath, $imgPath.'.thumb.jpg', 200);
+                                File::makeThumb($imgPath, $imgPath . '.thumb.jpg', 200);
                             }
-                        }else{
-                            File::makeThumb($imgPath, $imgPath.'.thumb.jpg', 200);
+                        } else {
+                            File::makeThumb($imgPath, $imgPath . '.thumb.jpg', 200);
                         }
                     }
-                    if(file_exists($imgPath)){
-                        if($d['photo'] != ''  && strpos($d['photo'], 'default') === false){
-                            if(file_exists($UPLOAD_PATH.$d['photo'])){
-                                unlink($UPLOAD_PATH.$d['photo']);
-                                if(file_exists($UPLOAD_PATH.$d['photo'].'.thumb.jpg')){
-                                    unlink($UPLOAD_PATH.$d['photo'].'.thumb.jpg');
+                    if (file_exists($imgPath)) {
+                        if ($d['photo'] != ''  && strpos($d['photo'], 'default') === false) {
+                            if (file_exists($UPLOAD_PATH . $d['photo'])) {
+                                unlink($UPLOAD_PATH . $d['photo']);
+                                if (file_exists($UPLOAD_PATH . $d['photo'] . '.thumb.jpg')) {
+                                    unlink($UPLOAD_PATH . $d['photo'] . '.thumb.jpg');
                                 }
                             }
                         }
-                        $d->photo = '/photos/'. $subfolder. '/'. $hash. '.jpg';
+                        $d->photo = '/photos/' . $subfolder . '/' . $hash . '.jpg';
                     }
                     if (file_exists($_FILES['photo']['tmp_name'])) unlink($_FILES['photo']['tmp_name']);
                 } else {
diff --git a/ui/ui/app-settings.tpl b/ui/ui/app-settings.tpl
index a59d4bf1..eadbf901 100644
--- a/ui/ui/app-settings.tpl
+++ b/ui/ui/app-settings.tpl
@@ -166,6 +166,94 @@
     </div>
 </form>
 
+<form class="form-horizontal" method="post" role="form" action="{$_url}settings/login-page-post" enctype="multipart/form-data">
+    <input type="hidden" name="csrf_token" value="{$csrf_token}">
+    <div class="panel" id="accordion" role="tablist" aria-multiselectable="true">
+        <div class="panel-heading" role="tab" id="LoginPage">
+            <h3 class="panel-title">
+                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseLoginPage" aria-expanded="true" aria-controls="collapseLoginPage">
+                    {Lang::T('Customer Login Page Settings')}
+                </a>
+            </h3>
+        </div>
+        <div id="collapseLoginPage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+            <div class="panel-body">
+                <div class="form-group">
+                    <label class="col-md-2 control-label">{Lang::T('Choose Template')}</label>
+                    <div class="col-md-6">
+                        <select name="login_page_type" id="login_page_type" class="form-control">
+                            <option value="default" {if $_c['login_page_type']=='default' }selected="selected"{/if}>{Lang::T('Default')}</option>
+                            <option value="custom" {if $_c['login_page_type']=='custom' }selected="selected"{/if}>{Lang::T('Custom')}</option>
+                        </select>
+                    </div>
+                    <span class="help-block col-md-4"><small>{Lang::T('Select your login template type')}</small></span>
+                </div>
+                <div id="customFields" style="display: none;">
+                    <div class="form-group">
+                        <label class="col-md-2 control-label">{Lang::T('Select Login Page')}</label>
+                        <div class="col-md-6">
+                            <select name="login_Page_template" id="login_Page_template" class="form-control">
+                                {foreach $template_files as $template}
+                                <option value="{$template.value|escape}" {if $_c['login_Page_template'] eq $template.value}selected="selected" {/if}>{$template.name|escape}</option>
+                                {/foreach}
+                            </select>
+                        </div>
+                        <span class="help-block col-md-4"><small>{Lang::T('Select your preferred login template')}</small></span>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-md-2 control-label">{Lang::T('Page Heading / Company Name')}</label>
+                        <div class="col-md-6">
+                            <input type="text" required class="form-control" id="login_page_head" name="login_page_head" value="{$_c['login_page_head']}">
+                        </div>
+                        <span class="help-block col-md-4"><small>{Lang::T('This Name will be shown on the login wallpaper')}</small></span>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-md-2 control-label">{Lang::T('Page Description')}</label>
+                        <div class="col-md-6">
+                            <textarea class="form-control" id="login_page_description" name="login_page_description" rows="3">{Lang::htmlspecialchars($_c['login_page_description'])}</textarea>
+                        </div>
+                        <span class="help-block col-md-4"><small>{Lang::T('This will also display on wallpaper, You can use html tag')}</small></span>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-md-2 control-label">{Lang::T('Favicon')}</label>
+                        <div class="col-md-6">
+                            <input type="file" class="form-control" id="login_page_favicon" name="login_page_favicon" accept="image/*">
+                            <span class="help-block"><small>{Lang::T('Best size 30 x 30 | uploaded image will be autosize')}</small></span>
+                        </div>
+                        <span class="help-block col-md-4">
+                            <a href="./{$favicon}" target="_blank"><img src="./{$favicon}" height="48" alt="Favicon"></a>
+                        </span>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-md-2 control-label">{Lang::T('Login Page Logo')}</label>
+                        <div class="col-md-6">
+                            <input type="file" class="form-control" id="login_page_logo" name="login_page_logo" accept="image/*">
+                            <span class="help-block"><small>{Lang::T('Best size 300 x 60 | uploaded image will be autosize')}</small></span>
+                        </div>
+                        <span class="help-block col-md-4">
+                            <a href="./{$login_logo}" target="_blank"><img src="./{$login_logo}" height="48" alt="Logo"></a>
+                        </span>
+                    </div>
+                    <div class="form-group">
+                        <label class="col-md-2 control-label">{Lang::T('Login Page Wallpaper')}</label>
+                        <div class="col-md-6">
+                            <input type="file" class="form-control" id="login_page_wallpaper" name="login_page_wallpaper" accept="image/*">
+                            <span class="help-block"><small>{Lang::T('Best size 1920 x 1080 | uploaded image will be autosize')}</small></span>
+                        </div>
+                        <span class="help-block col-md-4">
+                            <a href="./{$wallpaper}" target="_blank"><img src="./{$wallpaper}" height="48" alt="Wallpaper"></a>
+                        </span>
+                    </div>
+                </div>
+
+                <button class="btn btn-success btn-block" name="general" type="submit">
+                    {Lang::T('Save Changes')}
+                </button>
+            </div>
+        </div>
+    </div>
+</form>
+
 <form class="form-horizontal" method="post" role="form" action="{$_url}settings/app-post" enctype="multipart/form-data">
     <input type="hidden" name="csrf_token" value="{$csrf_token}">
     <div class="panel">
@@ -1154,4 +1242,17 @@
         document.getElementById("tax_rate").addEventListener("change", toggleCustomTaxRate);
     });
 </script>
+<script>
+    document.getElementById('login_page_type').addEventListener('change', function() {
+        var selectedValue = this.value;
+        var customFields = document.getElementById('customFields');
+        
+        if (selectedValue === 'custom') {
+            customFields.style.display = 'block';
+        } else {
+            customFields.style.display = 'none'; 
+        }
+    });
+    document.getElementById('login_page_type').dispatchEvent(new Event('change'));
+</script>
 {include file="sections/footer.tpl"}
\ No newline at end of file
diff --git a/ui/ui/customer/login-custom-moon.tpl b/ui/ui/customer/login-custom-moon.tpl
new file mode 100644
index 00000000..3f56ca61
--- /dev/null
+++ b/ui/ui/customer/login-custom-moon.tpl
@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{$_title} - {$_c['CompanyName']}</title>
+    <link rel="shortcut icon" href="./{$favicon}" type="image/x-icon" />
+    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' />
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' />
+    <!-- SweetAlert CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" />
+    <!-- SweetAlert JS -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
+    <style>
+        .login-fg .form-container {
+            color: #ccc;
+            position: relative;
+        }
+
+        .login-fg .login {
+            min-height: 100vh;
+            position: relative;
+            display: -webkit-box;
+            display: -moz-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px 15px;
+        }
+
+        .login-fg .login-section {
+            max-width: 370px;
+            margin: 0 auto;
+            text-align: center;
+            width: 100%;
+        }
+
+        .login-fg .form-fg {
+            width: 100%;
+            text-align: center;
+        }
+
+        .login-fg .form-container .form-group {
+            margin-bottom: 25px;
+        }
+
+        .login-fg .form-container .form-fg {
+            float: left;
+            width: 100%;
+            position: relative;
+        }
+
+        .login-fg .form-container .input-text {
+            font-size: 14px;
+            outline: none;
+            color: #616161;
+            border-radius: 3px;
+            font-weight: 500;
+            border: 1px solid transparent;
+            background: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        }
+
+        .login-fg .form-container img {
+            margin-bottom: 5px;
+            height: 40px;
+        }
+
+        .login-fg .form-container .form-fg input {
+            float: left;
+            width: 100%;
+            padding: 11px 45px 11px 20px;
+            border-radius: 50px;
+        }
+
+        .login-fg .form-container .form-fg i {
+            position: absolute;
+            top: 13px;
+            right: 20px;
+            font-size: 19px;
+            color: #616161;
+        }
+
+        .login-fg .form-container label {
+            font-weight: 500;
+            font-size: 14px;
+            margin-bottom: 5px;
+        }
+
+        .login-fg .form-container .forgot {
+            margin: 0;
+            line-height: 45px;
+            color: #535353;
+            font-size: 15px;
+            float: right;
+        }
+
+        .login-fg .bg {
+            background: rgba(0, 0, 0, 0.04) repeat;
+            background-size: cover;
+            top: 0;
+            width: 100%;
+            bottom: 0;
+            opacity: 1;
+            z-index: 999;
+            min-height: 100vh;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 30px;
+        }
+
+        .login-fg .info h1 {
+            font-size: 60px;
+            color: #fff;
+            font-weight: 700;
+            margin-bottom: 15px;
+            text-transform: uppercase;
+            text-shadow: 2px 0px #000;
+        }
+
+        .login-fg .info {
+            text-align: center;
+        }
+
+        .login-fg .info p {
+            margin-bottom: 0;
+            color: #fff;
+            line-height: 28px;
+            text-shadow: 1px 1px #000;
+        }
+
+        .login-fg .form-container .btn-md {
+            cursor: pointer;
+            padding: 10px 30px 9px;
+            height: 45px;
+            letter-spacing: 1px;
+            font-size: 14px;
+            font-weight: 400;
+            font-family: "Open Sans", sans-serif;
+            border-radius: 50px;
+            color: #d6d6d6;
+        }
+
+        .login-fg .form-container p {
+            margin: 0;
+            color: #616161;
+        }
+
+        .login-fg .form-container p a {
+            color: #616161;
+        }
+
+        .login-fg .form-container button:focus {
+            outline: none;
+            outline: 0 auto -webkit-focus-ring-color;
+        }
+
+        .login-fg .form-container .btn-fg.focus,
+        .btn-fg:focus {
+            box-shadow: none;
+        }
+
+        .login-fg .form-container .btn-fg {
+            background: #0f96f9;
+            border: none;
+            color: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        }
+
+        .login-fg .form-container .btn-fg:hover {
+            background: #108ae4;
+        }
+
+        .login-fg .logo a {
+            font-weight: 700;
+            color: #333;
+            font-size: 39px;
+            text-shadow: 1px 0px #000;
+        }
+
+        .login-fg .form-container .checkbox {
+            margin-bottom: 25px;
+            font-size: 14px;
+        }
+
+        .login-fg .form-container .form-check {
+            float: left;
+            margin-bottom: 0;
+        }
+
+        .login-fg .form-container .form-check a {
+            color: #d6d6d6;
+            float: right;
+        }
+
+        .login-fg .form-container .form-check-input {
+            position: absolute;
+            margin-left: 0;
+        }
+
+        .login-fg .form-container .form-check label::before {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 18px;
+            height: 18px;
+            top: 2px;
+            margin-left: -25px;
+            border: none;
+            border-radius: 3px;
+            background: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        }
+
+        .login-fg .form-container .form-check-label {
+            padding-left: 25px;
+            margin-bottom: 0;
+            font-size: 14px;
+            color: #616161;
+        }
+
+        .login-fg .form-container .checkbox-fg input[type="checkbox"]:checked+label::before {
+            color: #fff;
+            background: #0f96f9;
+        }
+
+        .login-fg .form-container input[type="checkbox"]:checked+label:before {
+            font-weight: 300;
+            color: #f3f3f3;
+            font-size: 14px;
+            content: "\2713";
+            line-height: 17px;
+        }
+
+        .login-fg .form-container input[type="checkbox"],
+        input[type="radio"] {
+            margin-top: 4px;
+        }
+
+        .login-fg .form-container .checkbox a {
+            font-size: 14px;
+            color: #616161;
+            float: right;
+            margin-left: 3px;
+        }
+
+        .login-fg .login-section h3 {
+            font-size: 20px;
+            margin-bottom: 40px;
+            font-family: "Open Sans", sans-serif;
+            font-weight: 400;
+            color: #505050;
+        }
+
+        .login-fg .login-section p {
+            margin: 25px 0 0;
+            font-size: 15px;
+            color: #616161;
+        }
+
+        .login-fg .login-section p a {
+            color: #616161;
+        }
+
+        .login-fg .login-section ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .login-fg .login-section .social li {
+            display: inline-block;
+            margin-bottom: 5px;
+        }
+
+        .login-fg .login-section .social li a {
+            font-size: 12px;
+            font-weight: 600;
+            width: 120px;
+            margin: 2px 0 3px;
+            height: 35px;
+            line-height: 35px;
+            border-radius: 20px;
+            display: inline-block;
+            text-align: center;
+            text-decoration: none;
+            background: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+        }
+
+        .login-fg .login-section .social li a i {
+            height: 35px;
+            width: 35px;
+            line-height: 35px;
+            float: left;
+            color: #fff;
+            border-radius: 20px;
+        }
+
+        .login-fg .login-section .social li a span {
+            margin-right: 7px;
+        }
+
+        .login-fg .login-section .or-login {
+            float: left;
+            width: 100%;
+            margin: 20px 0 25px;
+            text-align: center;
+            position: relative;
+        }
+
+        .login-fg .login-section .or-login::before {
+            position: absolute;
+            left: 0;
+            top: 10px;
+            width: 100%;
+            height: 1px;
+            background: #d8dcdc;
+            content: "";
+        }
+
+        .login-fg .login-section .or-login>span {
+            width: auto;
+            float: none;
+            display: inline-block;
+            background: #fff;
+            padding: 1px 20px;
+            z-index: 1;
+            position: relative;
+            font-family: Open Sans;
+            font-size: 13px;
+            color: #616161;
+            text-transform: capitalize;
+        }
+
+        .login-fg .facebook-i {
+            background: #4867aa;
+            color: #fff;
+        }
+
+        .login-fg .twitter-i {
+            background: #3cf;
+            color: #fff;
+        }
+
+        .login-fg .google-i {
+            background: #db4437;
+            color: #fff;
+        }
+
+        .login-fg .facebook {
+            color: #4867aa;
+        }
+
+        .login-fg .twitter {
+            color: #3cf;
+        }
+
+        .login-fg .google {
+            color: #db4437;
+        }
+
+        @media (max-width: 1200px) {
+            .login-fg .info h1 {
+                font-size: 45px;
+            }
+        }
+
+        @media (max-width: 992px) {
+            .login-fg .bg {
+                display: none;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .login-fg .login-section .social li a {
+                width: 100px;
+            }
+
+            .login-fg .logo a {
+                font-size: 26px;
+            }
+        }
+
+        footer {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            text-align: center;
+            font-size: 14px;
+            color: inherit;
+            background-color: #f8f8f8;
+            padding: 10px;
+        }
+
+        input {
+            width: 100%;
+            padding: 15px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+            box-sizing: border-box;
+        }
+
+        input:focus {
+            border-color: #4facfe;
+            outline: none;
+        }
+
+        .submit-btn {
+            background-color: #4facfe;
+            color: white;
+            border: none;
+            padding: 15px;
+            border-radius: 5px;
+            font-size: 16px;
+            cursor: pointer;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .submit-btn:hover {
+            background-color: #00f2fe;
+        }
+
+        @media (max-width: 768px) {
+
+            input,
+            .submit-btn {
+                padding: 12px;
+                font-size: 15px;
+            }
+        }
+
+        @media (max-width: 480px) {
+
+            input,
+            .submit-btn {
+                padding: 10px;
+                font-size: 14px;
+            }
+        }
+
+        @media (max-width: 320px) {
+
+            input,
+            .submit-btn {
+                padding: 8px;
+                font-size: 12px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    {if isset($notify)}
+    <script>
+        // Display SweetAlert toast notification
+        document.body.style.overflow = 'hidden';
+        Swal.fire({
+            icon: '{if $notify_t == "s"}success{else}warning{/if}',
+            title: '{if $notify_t == "s"}Success{else}Error{/if}',
+            text: '{$notify}',
+            backdrop: 'rgba(0, 0, 0, 0.5)',
+        }).then(() => {
+            document.body.style.overflow = '';
+        });
+    </script>
+    {/if}
+    <!-- partial:index.partial.html -->
+    <div class="login-fg">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-xl-8 col-lg-7 col-md-12 bg" style="background-image:url('./{$wallpaper}')">
+                    <div class="info">
+                        <h1>{$_c['login_page_head']}</h1>
+                        <p>{$_c['login_page_description']}</p>
+                    </div>
+                </div>
+                <div class="col-xl-4 col-lg-5 col-md-12 login">
+                    <div class="login-section">
+                        <div class="logo clearfix">
+                            <a href="./{$login_logo}" target="_blank"><img src="./{$login_logo}" height="60"
+                                    alt="Logo"></a>
+                        </div>
+                        <br>
+                        <h4>{Lang::T('Sign in into your account')}</h4>
+                        <!-- <ul class="social">
+                            <li><a href="#" class="facebook"><i
+                                        class="fa fa-facebook facebook-i"></i><span>Facebook</span></a></li>
+                            <li><a href="#" class="twitter"><i
+                                        class="fa fa-twitter twitter-i"></i><span>Twitter</span></a></li>
+                            <li><a href="#" class="google"><i class="fa fa-google google-i"></i><span>Google</span></a>
+                            </li>
+                        </ul>
+                        <div class="or-login clearfix">
+                            <span>Or</span>
+                        </div> -->
+                        <div class="form-container">
+                            <form id="login-form" method="POST" action="{$_url}login/post">
+                                <input type="hidden" name="csrf_token" value="{$csrf_token}">
+                                <div>
+                                    <input type="text" name="username"
+                                        placeholder="{if $_c['registration_username'] == 'phone'}{Lang::T('Phone Number')}{elseif $_c['registration_username'] == 'email'}{Lang::T('Email')}{else}{Lang::T('Username')}{/if}"
+                                        required>
+                                </div>
+                                <div>
+                                    <input type="password" name="password" placeholder="{Lang::T('Password')}" required>
+                                </div>
+                                <div class="checkbox clearfix">
+                                    <!-- <div class="form-check checkbox-fg">
+                                        <input class="form-check-input" type="checkbox" value="" id="remember">
+                                        <label class="form-check-label" for="remember">
+                                            Remember me
+                                        </label>
+                                    </div> -->
+                                    <a href="{$_url}forgot">{Lang::T('Forgot Password')}?</a>
+                                </div>
+                                <div class="form-group mt-2">
+                                    <button id="login-btn" type="submit" class="submit-btn">
+                                        <span id="login-text">{Lang::T('Login')}</span>
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                        {if $_c['disable_registration'] != 'noreg'}
+                        <p>{Lang::T('Don\'t have an account?')} <a href="{$_url}register"
+                                class="linkButton">{Lang::T('Register')}</a></p>
+                        {/if}
+                        <footer>
+                            © {$smarty.now|date_format:"%Y"} {$_c['CompanyName']}. All rights reserved. <br> <a
+                                href="">Privacy</a> | <a href="">Terms
+                                &amp;
+                                Conditions</a>
+                        </footer>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- partial -->
+    <script>
+        const loginForm = document.getElementById('login-form');
+        const loginBtn = document.getElementById('login-btn');
+        const loginText = document.getElementById('login-text');
+
+        loginForm.addEventListener('submit', function (event) {
+            loginBtn.classList.add('loading');
+            loginText.textContent = 'Please Wait...';
+        });
+    </script>
+    {if $_c['tawkto'] != ''}
+    <!--Start of Tawk.to Script-->
+    <script type="text/javascript">
+        var isLoggedIn = false;
+        var Tawk_API = {
+            onLoad: function () {
+                if (!isLoggedIn) {
+                    isLoggedIn = true;
+                    window.Tawk_API.login({
+                        name: '{$_user['fullname']}',
+                        email: '{$_user['email']}',
+                        userId: '{$_user['id']}'
+                    }, function (error) {
+                        //do something if there's an error
+                    });
+                }
+                Tawk_API.setAttributes({
+                    'id': '{$_user['id']}',
+                    'username': '{$_user['username']}',
+                    'service_type': '{$_user['service_type']}',
+                    'balance': '{$_user['balance']}',
+                    'account_type': '{$_user['account_type']}',
+                    'phone': '{$_user['phonenumber']}'
+                    }, function (error) { });
+            }
+        };
+        var Tawk_LoadStart = new Date();
+        Tawk_API.visitor = {
+            name: '{$_user['fullname']}',
+            email: '{$_user['email']}',
+            userId: '{$_user['id']}'
+            };
+        (function () {
+            var s1 = document.createElement("script"),
+                s0 = document.getElementsByTagName("script")[0];
+            s1.async = true;
+            s1.src = 'https://embed.tawk.to/{$_c['tawkto']}';
+            s1.charset = 'UTF-8';
+            s1.setAttribute('crossorigin', '*');
+            s0.parentNode.insertBefore(s1, s0);
+        })();
+    </script>
+    <!--End of Tawk.to Script-->
+    {/if}
+</body>
+
+</html>
\ No newline at end of file