diff --git a/readme.md b/readme.md
index c3e5e4a9a9fea83d7add79bddf4a97b2c974a4b2..454b3fc88a15fd2f64ce5ab283cf839bea86554e 100644
--- a/readme.md
+++ b/readme.md
@@ -53,6 +53,7 @@
 - [X] 4.增加lsg配置模型和缓存
 - [X] 5.增加了默认alist挂载
 - [X] 6.升级到3.2.0,进行了全面后端重构用了蓝图写法,app.py文件以后尽量不动
+- [X] 7.后台管理界面显示美化-感谢蓝莓果酱
 ###### 2022/09/05
 - [X] 1.内置jar修复了原本tv_box无法播放直播的问题
 - [X] 2.重新构建了三种平台的镜像 amd64,armv7,arm64
diff --git a/static/css/admin.css b/static/css/admin.css
index e3eafcb3b06be36512cc09f7b217383b856a8c17..03f415ecd9f97d3692308303f7a85035c50a0e48 100644
--- a/static/css/admin.css
+++ b/static/css/admin.css
@@ -1,69 +1,298 @@
-.title{
-    /*font-size: 18px;*/
-    color: #5dc2f1;
-
+body{
+    text-align: center;
 }
 
+.title {
+    background-image: linear-gradient(to right, orange, purple);
+    -webkit-background-clip: text;
+    color: transparent;
+    font-size: 30px;
+    text-align: center;
+    line-height: height;
+}
+.zt{
+    width: 90%;
+}
 .red {
-        color:red;
-        font-weight: bold;
-        padding-left:10px;
-        /*padding-top:10px;*/
-        margin-left:10px;
-        width: 360px;
-        height: 30px;
-    }
-    .green {
-        color:forestgreen;
-        font-weight: bold;
-        padding-left:10px;
-        /*padding-top:10px;*/
-        margin-left:10px;
-        width: 360px;
-        height: 30px;
-    }
-    .btn{
-        color:#FFFFFF;
-        background-color: #1379cb;
-    }
-    .clear{
-        /*word-spacing:2px;*/
-        letter-spacing:5px;
-        margin-left:20px;
-        width: 120px;
-        height: 30px;
-        text-align: center;
-        border-style: solid;
-        /*border-color: #8CD4F5;*/
-        border-color: #1379cb;
-        text-decoration:none;
-        color:#FFFFFF;
-        background-color: #1379cb;
-    }
-    .view_home{
-        letter-spacing:5px;
-        margin-left:20px;
-        width: 150px;
-        height: 30px;
-        text-align: center;
-        border-style: solid;
-        /*border-color: #8CD4F5;*/
-        border-color: #17af30;
-        text-decoration:none;
-        color:#FFFFFF;
-        background-color: #17af30;
-    }
-    /*li a {*/
-    /*    display: block !important;*/
-    /*}*/
-    .ver_title{
-        font-size: 15px;margin-right: 10px
-    }
-
-    .ver{
-        font-size: 16px;margin-left: 1px;color: #ea7d7d;
-    }
-
-    a.funcbtn{
-        margin-right: 10px;
-    }
\ No newline at end of file
+    color: red;
+    font-weight: bold;
+    width: 100%;
+    text-align: right;
+    height: 40px;
+}
+.mz{
+    text-align: left;
+    display: inline-block;
+}
+.mz a{
+    border-radius: 50px;
+    border-style: solid;
+    color: #FFFFFF;
+    text-align: center;
+    padding: 1px 3px 1px 3px;
+    border-style: solid;
+    border-color: #cb1397;
+    text-decoration: none;
+    background-color: #cb13b2;
+}
+
+.sj{
+    text-align: center;
+    width: 48%;
+    display: inline-block;
+}
+.sj a{
+    border-radius: 50px;
+    border-style: solid;
+    color: #FFFFFF;
+    padding: 2px 7px 2px 7px;
+    border-style: solid;
+    border-color: #17af30;
+    text-decoration: none;
+    background-color: #17af30;
+
+}
+.sc{
+    text-align: right;
+    width: 15%;
+    padding-right: 5%;
+    display: inline-block;
+}
+.sc a{
+    border-radius: 50px;
+    border-style: solid;
+    color: #FFFFFF;
+    text-align: center;
+    padding: 1px 3px 1px 3px;
+    border-style: solid;
+    border-color: #1379cb;
+    text-decoration: none;
+    background-color: #1379cb;
+}
+
+.btn {
+    color: #FFFFFF;
+    background-color: #1379cb;
+}
+
+.ver_title {
+    font-size: 15px;
+    padding-left: 5px
+}
+
+.ver {
+    font-size: 16px;
+    margin-left: 5px;
+    color: #ea7d7d;
+}
+
+a {
+    text-decoration: none;
+}
+
+.yongyin {
+    width: 80px;
+    text-align: center;
+    line-height: 110%;
+    padding: 0.2em;
+    font: 15px Arial, sans-serif bold;
+    font-style: normal;
+    margin: 2px;
+    vertical-align: text-bottom;
+    zoom: 1;
+    outline: none;
+    font-size-adjust: none;
+    font-stretch: normal;
+    border-radius: 50px;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+    color: #fafafa;
+    border: 0.2px solid #2299ff;
+    background-repeat: repeat;
+    background-size: auto;
+    background-origin: padding-box;
+    background-clip: padding-box;
+    background-color: #3399ff;
+    background: linear-gradient(to bottom, #eeeff9 0%, #3399ff 100%);
+}
+
+.yongyin:hover {
+    background: #268DFF;
+}
+
+.yongyin1 {
+    width: 80px;
+    text-align: center;
+    line-height: 110%;
+    padding: 0.3em;
+    font: 16px Arial, sans-serif bold;
+    font-style: normal;
+    margin: 2px;
+    vertical-align: text-bottom;
+    zoom: 1;
+    outline: none;
+    font-size-adjust: none;
+    font-stretch: normal;
+    border-radius: 50px;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+    color: #fafafa;
+    border: 0.2px solid #ef6fd1;
+    background-repeat: repeat;
+    background-size: auto;
+    background-origin: padding-box;
+    background-clip: padding-box;
+    background-color: #e92072;
+    background: linear-gradient(to bottom, #eeeff9 0%, #f85cb2 100%);
+}
+
+.yongyin1:hover {
+    background: #f343a0;
+}
+
+.yongyin2 {
+    width: 80px;
+    text-align: center;
+    line-height: 110%;
+    padding: 0.3em;
+    font: 16px Arial, sans-serif bold;
+    font-style: normal;
+    margin: 2px;
+    vertical-align: text-bottom;
+    zoom: 1;
+    outline: none;
+    font-size-adjust: none;
+    font-stretch: normal;
+    border-radius: 50px;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+    color: #fafafa;
+    border: 0.2px solid #fa7d49;
+    background-repeat: repeat;
+    background-size: auto;
+    background-origin: padding-box;
+    background-clip: padding-box;
+    background-color: #ea6e3d;
+    background: linear-gradient(to bottom, #eeeff9 0%, #f29545 100%);
+}
+
+.yongyin2:hover {
+    background: #f39943;
+}
+
+
+.yongyin3 {
+    width: 80px;
+    text-align: center;
+    line-height: 110%;
+    padding: 0.3em;
+    font: 16px Arial, sans-serif bold;
+    font-style: normal;
+    margin: 2px;
+    vertical-align: text-bottom;
+    zoom: 1;
+    outline: none;
+    font-size-adjust: none;
+    font-stretch: normal;
+    border-radius: 50px;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+    color: #fafafa;
+    border: 0.2px solid #c158fa;
+    background-repeat: repeat;
+    background-size: auto;
+    background-origin: padding-box;
+    background-clip: padding-box;
+    background-color: #c158fa;
+    background: linear-gradient(to bottom, #eeeff9 0%, #c158fa 100%);
+}
+
+.yongyin3:hover {
+    background: #c158fa;
+}
+
+.yongyin4 {
+    width: 80px;
+    text-align: center;
+    line-height: 110%;
+    padding: 0.3em;
+    font: 16px Arial, sans-serif bold;
+    font-style: normal;
+    margin: 2px;
+    vertical-align: text-bottom;
+    zoom: 1;
+    outline: none;
+    font-size-adjust: none;
+    font-stretch: normal;
+    border-radius: 50px;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+    color: #fafafa;
+    border: 0.2px solid #c2fa49;
+    background-repeat: repeat;
+    background-size: auto;
+    background-origin: padding-box;
+    background-clip: padding-box;
+    background-color: #c2fa49;
+    background: linear-gradient(to bottom, #eeeff9 0%, #c2fa49 100%);
+}
+
+.yongyin4:hover {
+    background: #c2fa49;
+}
+
+
+
+.wrapper {
+    position: relative;
+}
+
+#input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: -10;
+}
+
+h4 {
+    text-align: center;
+
+}
+
+.box {
+    color: red;
+    font-weight: bold;
+    padding-bottom: 10px;
+    font-size: 15px;
+    text-align: center;
+}
+
+.filediv {
+    position: relative;
+}
+
+.filediv input {
+    opacity: 0;
+    width: 100px;
+    height: 35px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 99;
+}
+
+.filediv div {
+    height: 25px;
+    line-height: 25px;
+    background-color: #03a9f4;
+    color: #fff;
+    width: 100px;
+    text-align: center;
+    font-size: 14px;
+    position: absolute;
+    border-radius: 50px;
+    top: 0;
+    left: 0;
+    z-index: 98;
+}
\ No newline at end of file
diff --git a/templates/admin.html b/templates/admin.html
index 2606656de5153e416b1ff2fab89f14aafb8b83c7..0e08d9ee094e044fcf5779223e310403fa3e8a3b 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -6,6 +6,7 @@
   <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
   <meta name="author" content="道长"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<!--    <link rel="stylesheet" media="screen" href="/static/css/admin.css">-->
     <link rel="stylesheet" media="screen" href="/static/css/admin.css">
   <link rel="icon" href="/static/img/logo.png" type="image/x-icon">
     <script src="/static/js/jquery.min.js"></script>
@@ -145,21 +146,22 @@ function getFileSize(fileObj) {
    $('#file_size').text('文件大小为:'+fileObj.files[0].size/1024+'kb');
 }
 </script>
-
-<h2 class="title">欢迎使用drpy管理员界面</h2>
-<h3 class="title">
-    <span class="ver_title">当前版本:</span><span class="ver">{{ ver }}</span>
-</h3>
+<h2 class="title">欢迎使用DR-PY管理界面<div><span class="ver_title">当前版本: {{ ver }}</span><span
+                class="ver_title">框架开发：道长</span><span class="ver_title">框架美化：蓝莓</span></div>
+</h2>
 <h4>
-<a href="/index" class="funcbtn">返回首页</a>
-<a href="javascript:void(0);" class="funcbtn" id="checkUpdate">检测升级</a>
-<!--<a href="javascript:copyText('update_by_self');" class="funcbtn" id="update_by_self">cp ./tmp/dr_py-master/app.py ./app.py</a>-->
-<a href="javascript:copy('cp ./tmp/dr_py-master/app.py ./app.py');" class="funcbtn" id="update_by_self">复制主程升级指令</a>
-<a href="javascript:void(0);" class="funcbtn" id="write_lives">修改默认直播源</a>
-<a href="javascript:void(0);" class="funcbtn" id="update_lives">同步直播源</a>
+    <button type="button" class="yongyin"><a href="/index">返回首页</a></button>
+    <button type="button" class="yongyin1"><a href="javascript:void(0);" class="funcbtn"
+            id="checkUpdate">检测升级</a></button>
+    <button type="button" class="yongyin2"><a href="javascript:copy('cp ./tmp/dr_py-master/app.py ./app.py');"
+            class="funcbtn" id="update_by_self">升级指令</a></button>
+    <button type="button" class="yongyin3"><a href="javascript:void(0);" class="funcbtn"
+            id="write_lives">修改直播源</a></button>
+    <button type="button" class="yongyin4"><a href="javascript:void(0);" class="funcbtn"
+            id="update_lives">同步直播源</a></button>
+    <input id="live_url" value="{{live_url}}" style="display: none">
+    <p class="box">你可以在此界面在线管理JS目录里规则文件的上传/删除</p>
 </h4>
-<input id="live_url" value="{{live_url}}" style="display: none"/>
-<p>你可以在此页面在线上传规则文件到js目录或者删除js目录的文件</p>
  <form action = "/admin/upload" method = "POST" enctype = "multipart/form-data">
 <!--     <input type = "file" name = "file" class="btn" accept=".js"  onchange="getFileSize(this)"/>-->
      <input type = "file" name = "file" class="btn" onchange="getFileSize(this)"/>
@@ -167,38 +169,18 @@ function getFileSize(fileObj) {
      <input type="button" id="upload" value="上传" class="btn"/>
 </form>
 <p id="file_size"></p>
-<h1>内置规则列表-共{{rules.count}}条</h1>
+<h2>规则列表数据-共{{rules.count}}条</h2>
 {% if rules.count < 1 %}
 <h3>暂无内置的规则</h3>
 {% endif %}
+<div class="zt">
 {% for rule in rules.list %}
-    	{% if rule.name|length > 2 %}
-        	<li class="red">
-                <a class="view" href="javascript:void(0);">{{ rule.name }}</a>
-                <a class="view_home" href="javascript:void(0);" value="{{ rule.name }}">主页数据预览</a>
-                <a class="clear" href="javascript:void(0);" value="{{ rule.name }}">删除</a>
-            </li>
-        {% else %}
-            <li class="green">
-                <a class="view" href="javascript:void(0);">{{ rule.name }}</a>
-                <a class="view_home" href="javascript:void(0);" value="{{ rule.name }}">主页数据预览</a>
-                <a class="clear" href="javascript:void(0);" value="{{ rule.name }}">删除</a>
-            </li>
-        {% endif %}
+    <div class="red">
+         <div class="mz"><a class="view" href="javascript:void(0);">{{ rule.name }}</a></div>
+        <div class="sj"><a class="view_home" href="javascript:void(0);" value="{{ rule.name }}">主页数据预览</a></div>
+        <div class="sc"><a class="clear" href="javascript:void(0);" value="{{ rule.name }}">删除</a></div>
+    </div>
  {% endfor %}
-<!--{% if rules.count > 0 %}-->
-<!--<h1>删除内置规则</h1>-->
-<!--{% for rule in rules.list %}-->
-<!--{% if rule|length > 2 %}-->
-<!--    <li class="red">-->
-<!--        <a class="clear" href="javascript:void(0);">{{ rule.name }}</a>-->
-<!--    </li>-->
-<!--{% else %}-->
-<!--    <li class="yellow">-->
-<!--        <a class="clear" href="javascript:void(0);">{{ rule.name }}</a>-->
-<!--    </li>-->
-<!--{% endif %}-->
-<!-- {% endfor %}-->
-<!--{% endif %}-->
+</div>
 </body>
 </html>
\ No newline at end of file