diff --git a/public/static/css/invoice.css b/public/static/css/invoice.css
index 90d0c4c..7e0fa86 100644
--- a/public/static/css/invoice.css
+++ b/public/static/css/invoice.css
@@ -1,143 +1,221 @@
-.layui-form-label {
-    width: 110px;
+body.user-page {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: #f5f7fb;
 }
-.layui-form{
-    margin-right: 10px;
+
+.user-main {
+    flex: 1;
+    padding: 32px 0 52px;
 }
-.login-bg{
-    background: #f0f0f0;
+
+.account-layout {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    gap: 18px;
+    align-items: start;
 }
-.login-box{
-    width: 460px;
-    height: auto;
-    padding: 40px 0 20px;
+
+.account-nav,
+.account-panel {
     background: #fff;
-    box-shadow: 0 0 20px rgba(0,0,0,0.2);
-    border-radius: 20px;
-    position: relative;
-    margin-top: 10px;
-}
-.login-logo{
-    width: 180px;
-    height: 70px;
-    text-align: center;
-    background: url(/static/home/images/loginbg3.png) no-repeat;
-    background-size: 180px 60px;
-    position: absolute;
-    left: 50%;
-    margin-left: -90px;
-    top: 0;
-    margin-top: -30px;
-    color: #fff;
-    line-height: 60px;
-}
-.login-con{
-    padding: 10px 20px;
+    border: 1px solid rgba(15, 23, 42, .08);
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
     overflow: hidden;
 }
-.login-row{
-    width: 100%;
-    min-height: 40px;
-    border-bottom: 1px solid #ddd;
-    margin-top: 10px;
-    line-height: 40px;
-}
-.login-row input{
-    padding: 0;
-    box-shadow: none!important;
-    font-size: 16px;
-}
-.login-row label{
-    font-size: 14px;
-    color: #666;
-}
-.login-row .login-text{
-    width: 100%;
-    height: 40px;
-    background: none;
-    border: none;
-    outline: none;
-    line-height: 40px;
-}
-.login-row .login-text2{
-    width: 75%;
-    float: left;
-}
-.login-row .login-get{
-    float: right;
-    line-height: 36px;
-    height: 36px;
-    width: 25%;
-    background: #14286d;
-    border-radius: 5px;
-    border: none;
-    outline: none;
-    text-align: center;
+
+.account-nav__title,
+.account-panel__title {
+    background: var(--main-color);
     color: #fff;
-    font-size: 14px;
-    cursor: pointer;
+    font-size: 17px;
+    font-weight: 800;
+    line-height: 50px;
+    padding: 0 20px;
 }
-.login-row .login-get:disabled{
-    background: #999;
-}
-.login-row .login-get:hover{
-    opacity: 0.8;
-}
-.login-row .login-btn{
-    width: 100%;
+
+.account-nav__link {
+    display: flex;
+    align-items: center;
+    gap: 9px;
     height: 50px;
-    background: #14286d;
-    border: none;
-    outline: none;
-    color: #fff;
-    font-size: 18px;
-    border-radius: 10px;
-    margin-top: 15px;
-    cursor: pointer;
+    padding: 0 18px;
+    color: #263241;
+    border-bottom: 1px solid #eef1f5;
+    text-decoration: none;
+    font-size: 15px;
 }
-.login-row .login-btn:hover{
-    opacity: 0.8;
+
+.account-nav__link:hover,
+.account-nav__link.is-active {
+    color: var(--main-color);
+    background: rgba(21, 56, 84, .06);
+    text-decoration: none;
 }
-.login-row a{
-    text-align: center;
-    margin: 0 auto;
+
+.account-panel__body {
+    padding: 22px;
+}
+
+.invoice-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 18px;
+    margin-bottom: 18px;
+    padding: 16px 18px;
+    border: 1px solid #dfe5ee;
+    border-radius: 8px;
+    background: #f8fafc;
+}
+
+.invoice-summary strong {
+    display: block;
+    margin-bottom: 5px;
+    color: #1f2937;
     font-size: 14px;
-    line-height: 40px;
 }
-.login-row .checkbox-inline input[type="checkbox"]:checked:after{
-    top: 5px;
+
+.invoice-summary span {
+    color: #951e14;
+    font-size: 24px;
+    font-weight: 900;
+    line-height: 1.2;
+    word-break: break-word;
 }
-@media(max-width:700px) {
-    .login-box{
-        width: 350px;
-        margin-bottom: 10px;
-        margin-top: 60px;
-    }
-    .login-row{ font-size: 14px;}
-    .login-row .login-text2{ width: 55%;}
-    .login-row .login-get{ width: 35%;}
-}
-.layui-btn{
-    background: #14286d;
-}
-.in-img{
-    text-align: center;
-}
-.addBox {
-    width: 90%;
+
+.invoice-summary p {
+    margin: 0;
+    color: #64748b;
+    font-size: 14px;
+    line-height: 1.7;
     text-align: right;
-    margin-top: 5px;
 }
-.addBox .layui-icon {
-    font-size: 14px;
-    color: #666;
-    cursor: pointer;
-    margin-left: 10px;
+
+.invoice-tip {
+    margin: 0 0 20px;
+    padding: 12px 14px;
+    border: 1px solid rgba(149, 30, 20, .16);
+    border-radius: 6px;
+    color: #951e14;
+    background: rgba(149, 30, 20, .05);
+    line-height: 1.7;
+    text-align: center;
 }
-.input-button {
-    width: 40%;
-    margin: 0 auto;
+
+.invoice-section-title {
+    margin: 0 0 16px;
+    padding-left: 10px;
+    border-left: 4px solid var(--main-color);
+    color: #1f2937;
+    font-size: 16px;
+    font-weight: 900;
+    line-height: 1.3;
 }
-.layui-layer-content img{
+
+.invoice-section-title--sub {
+    margin-top: 8px;
+}
+
+.invoice-form .layui-form-label {
+    display: block;
+    float: none;
+    width: auto;
+    padding: 0 0 7px;
+    color: #1f2937;
+    text-align: left;
+    font-weight: 800;
+}
+
+.invoice-form .layui-form-label span {
+    color: #e53935;
+    margin-left: 3px;
+}
+
+.invoice-form .layui-input-block {
+    margin-left: 0;
+    min-height: auto;
+}
+
+.invoice-form .layui-input {
+    height: 50px;
+    border: 1px solid #d8dee8;
+    border-radius: 4px;
+    font-size: 15px;
+}
+
+.invoice-form .layui-input:focus {
+    border-color: var(--main-color) !important;
+    box-shadow: 0 0 0 3px rgba(21, 56, 84, .08);
+}
+
+.invoice-form .layui-btn {
+    height: 50px;
+    line-height: 50px;
+    border-radius: 6px;
+    background: var(--main-color);
+    font-size: 17px;
+    font-weight: 800;
+}
+
+.invoice-form .layui-btn:hover,
+.invoice-form .layui-btn:focus {
+    color: #fff;
+    background: #0f2b42;
+}
+
+.invoice-form .layui-btn:disabled {
+    cursor: not-allowed;
+    background: #98a2b3;
+}
+
+.in-img {
+    margin-top: 12px;
+    text-align: center;
+}
+
+.layui-layer-content img {
     width: 150px;
-}
\ No newline at end of file
+}
+
+@media (max-width: 768px) {
+    .user-main {
+        padding: 20px 12px 36px;
+    }
+
+    .account-layout {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
+
+    .account-nav {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .account-nav__title {
+        display: none;
+    }
+
+    .account-nav__link {
+        justify-content: center;
+        padding: 0 8px;
+        font-size: 14px;
+        border-right: 1px solid #eef1f5;
+    }
+
+    .account-panel__body {
+        padding: 18px;
+    }
+
+    .invoice-summary {
+        display: block;
+    }
+
+    .invoice-summary p {
+        margin-top: 8px;
+        text-align: left;
+    }
+}