diff --git a/static/css/sign_in.css b/static/css/sign_in.css
index dcc8c223..e80a62ec 100644
--- a/static/css/sign_in.css
+++ b/static/css/sign_in.css
@@ -4,7 +4,7 @@
 }
 body {
   /* background-color: #f1f1f1; */
-  background-image: url("../images/40.jpg");
+  /* background-image: url("../images/40.jpg"); */
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
@@ -48,7 +48,8 @@ a {
   /* background-color: #fff; */
   /* opacity: 0.9; */
   border-radius: 4px;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  /* border:1px solid black; */
+  box-shadow: 0px 0px 28px 8px rgba(0, 0, 0, 0.1);
   vertical-align: middle;
   display: inline-block;
   -webkit-box-sizing: border-box;
@@ -60,8 +61,9 @@ a {
   margin: 0 auto 50px;
   padding: 10px;
   font-weight: 500;
-  color: white;
+  /* color: white; */
   font-size: 48px;
+  color:#3e3e3e;
 }
 
 .context .login-form {
@@ -72,61 +74,28 @@ a {
   justify-content: center;
   position: relative;
   left: -15px;
-  color: #fff;
+  /* color: #fff; */
 }
 
-/* .context .title a:hover {
-  border-bottom: 2px solid #ea6f5a;
-}
-.context .title .active {
-  font-weight: 700;
-  color: #ea6f5a;
-  border-bottom: 2px solid #ea6f5a;
-}
-.context .title b {
-  padding: 10px;
-} */
-/* .context form {
-  position: relative;
-  margin-bottom: 30px;
-  margin-top: 30px;
-} */
 .context form .input-num {
   position: relative;
   width: 285px;
   top: -20px;
 }
 .context form .input-num input {
-  width: 100%;
+  width: 93%;
   height: 40px;
   margin-bottom: 15px;
   padding: 4px 12px 4px 35px;
-  border: 2px solid white;
+  border: 1px solid rgba(20, 19, 19, 0.6);
   border-radius: 4px;
   background: inherit;
   /* background-color: hsla(0, 0%, 71%, 0.1); */
   opacity: 0.9;
   /* background-color: #f8f8ff; */
   vertical-align: middle;
-  color: white;
+  /* color: white; */
 }
-/* input::-webkit-input-placeholder {
-  color: white !important;
-  z-index: 1000;
-}
-::-moz-placeholder {
-  color: white !important;
-  z-index: 1000;
-}
-input:-ms-input-placeholde {
-  z-index: 1000;
-  color: white !important;
-}
-input:-moz-placeholder {
-  color: white !important;
-  z-index: 1000;
-} */
-
 .context .remember-btn {
   float: left;
   margin: 15px 0;
@@ -137,7 +106,7 @@ input:-moz-placeholder {
 .context .remember-btn span {
   margin-left: 5px;
   font-size: 15px;
-  color: white;
+  /* color: white; */
   vertical-align: middle;
 }
 .context .forget-btn {
@@ -150,7 +119,7 @@ input:-moz-placeholder {
   left: 15px;
 }
 .context .forget-btn span {
-  color: white;
+  /* color: white; */
 }
 .context .forget-btn a {
   color: #3194d0;
@@ -173,12 +142,14 @@ input:-moz-placeholder {
   background-color: rgb(22, 122, 253);
   background-color: rgb(5, 5, 65);
   background-color: rgba(6, 6, 77, 0.8);
+  background-color: #21a0f0;
   border: none;
   border-radius: 25px;
-  color: #fff;
+  /* color: #fff; */
   cursor: pointer;
   display: block;
   clear: both;
+  color:#fff;
   outline: none;
   /* opacity: 0; */
 }
@@ -186,6 +157,7 @@ input:-moz-placeholder {
   /* background: #187cb7; */
   /* background-color: rgb(10, 108, 236); */
   background-color: rgb(4, 4, 80);
+  background-color: #0f92e4;
 }
 
 .context .restyle {
@@ -205,8 +177,8 @@ input:-moz-placeholder {
   margin-top: -50px;
   margin-left: -160px;
   color: #969696;
-  color: #fff;
-  color: white;
+  /* color: #fff;
+  color: white; */
 }
 
 .context .passw i {
@@ -217,8 +189,8 @@ input:-moz-placeholder {
   margin-top: -50px;
   margin-left: -160px;
   color: #969696;
-  color: #fff;
-  color: white;
+  /* color: #fff;
+  color: white; */
 }
 
 .context .passw i:hover {
diff --git a/static/css/sign_up.css b/static/css/sign_up.css
index 19055a31..814d56e0 100644
--- a/static/css/sign_up.css
+++ b/static/css/sign_up.css
@@ -4,7 +4,7 @@
 }
 
 body {
-  background-image: url("../images/45.jpg");
+  /* background-image: url("../images/45.jpg"); */
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
@@ -31,12 +31,13 @@ a {
 
 .context .container {
   width: 400px;
-  height: 450px;
+  height: 560px;
   margin: -10px auto 0px;
-  padding: 0px 50px 20px;
+  padding: 20px 50px 20px;
   /* background-color: #fff; */
   border-radius: 4px;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 28px 8px rgba(0, 0, 0, 0.1);
   vertical-align: middle;
   /* display: flex; */
   align-items: center;
@@ -53,6 +54,7 @@ a {
   font-size: 48px;
   font-weight: 500;
   color: white;
+  color: #3e3e3e;
 }
 
 .context .logo img {
@@ -84,6 +86,7 @@ a {
   margin-bottom: 7px;
   padding: 4px 12px 4px 35px;
   border: 2px solid #e9e6e6;
+  border: 1px solid rgba(20, 19, 19, 0.6);
 
   border-radius: 4px;
   /* background-color: hsla(0, 0%, 71%, 0.1); */
@@ -140,6 +143,7 @@ input::placeholder {
   border-radius: 25px;
   color: #fff;
   background-color: rgba(6, 6, 77, 0.8);
+  background-color: #21a0f0;
   outline: none;
   display: block;
   clear: both;
@@ -150,6 +154,7 @@ input::placeholder {
   /* background: #3db922;
   background-color: rgb(10, 108, 236); */
   background-color: rgb(3, 3, 54);
+  background-color: #0f92e4;
   cursor: pointer;
 }
 
@@ -165,6 +170,7 @@ input::placeholder {
   margin-top: -45px;
   margin-left: -163px;
   color: #fff;
+  color: #969696;
 }
 
 .context .passw i {
@@ -175,6 +181,7 @@ input::placeholder {
   margin-top: -45px;
   margin-left: -163px;
   color: #fff;
+  color: #969696;
 }
 
 .context .input-prepend i {
@@ -185,6 +192,7 @@ input::placeholder {
   margin-top: -45px;
   margin-left: -163px;
   color: #fff;
+  color: #969696;
 }
 .context .paw i:hover {
   cursor: pointer;
@@ -196,6 +204,7 @@ input::placeholder {
   font-size: 12px;
   line-height: 20px;
   color: #fff;
+  color: #3e3e3e;
   position: relative;
   left: 22px;
 }
@@ -204,19 +213,3 @@ input::placeholder {
 .context .sign-up-msg a:hover {
   color: #3194d0;
 }
-
-/* #sign-in-form-submit-btn {
-  position: absolute;
-} */
-/* .error {
-  position: absolute;
-  margin-top: -30px;
-  width: 100%;
-  height: 10px;
-  margin-bottom: 0px;
-  border: 2px red solid;
-  font-size: 64px;
-  color: red;
-  z-index: 100;
-  border-radius: 4px 4px 0 0;
-} */
diff --git a/static/images/40.jpg b/static/images/40.jpg
new file mode 100644
index 00000000..13f2435c
Binary files /dev/null and b/static/images/40.jpg differ
diff --git a/static/images/45.jpg b/static/images/45.jpg
new file mode 100644
index 00000000..1021aad9
Binary files /dev/null and b/static/images/45.jpg differ
diff --git a/static/images/logo.jpg b/static/images/logo.jpg
new file mode 100644
index 00000000..eaad8c04
Binary files /dev/null and b/static/images/logo.jpg differ
diff --git a/templates/sign_in.html b/templates/sign_in.html
index c2b0b0cd..e4d87431 100644
--- a/templates/sign_in.html
+++ b/templates/sign_in.html
@@ -30,7 +30,7 @@ <h1>
     </div>
     <div class="container">
       <h2 class="title">
-        登陆
+        Welcome
       </h2>
       <div class="login-form">
         <form action="" method="POST" id="form" name="myform" onsubmit="checkform();">
diff --git a/templates/sign_up.html b/templates/sign_up.html
index 2e8bc13f..c0a142d7 100644
--- a/templates/sign_up.html
+++ b/templates/sign_up.html
@@ -30,7 +30,7 @@ <h1>
       </h1>
       <div class="container">
         <h4 class="title">
-          注册
+          Sign up
         </h4>
         <div class="login-form">
           <form action="" method="POST" id="form" name="myform" onsubmit="return checkform();">