diff --git a/accounts/templates/login.html b/accounts/templates/login.html
index 08c6424..b81a63e 100644
--- a/accounts/templates/login.html
+++ b/accounts/templates/login.html
@@ -9,24 +9,27 @@
 {% endblock style %}
 
 {% block content %}
-<div class="page-header">
-    <a class="" href="/"><h1>WebVirtCloud</h1></a>
-</div>
-<div class="col-12" role="main">
-    {% if form.errors %}
-        <div class="alert alert-danger">
-            <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
-            {% trans "Incorrect username or password." %}
-        </div>
-    {% endif %}
-    <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
-        <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
-        <input type="text" class="form-control" name="username" placeholder="{% trans "User" %}" autocapitalize="none" autocorrect="off" autofocus>
-        <input type="password" class="form-control" name="password" placeholder="{% trans "Password" %}">
-        <input type="hidden" name="next" value="{{ next }}">
-        <div class="d-grid">
-            <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
-        </div>
-    </form>
+<div class="login-box">
+    <div class="page-header">
+        <a class="" href="/"><h1>WebVirtCloud</h1></a>
+    </div>
+    <div class="col-12" role="main">
+        {% if form.errors %}
+            <div class="alert alert-danger">
+                <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
+                {% trans "Incorrect username or password." %}
+            </div>
+        {% endif %}
+        <form class="form-signin" method="post" role="form" aria-label="Login form">{% csrf_token %}
+            <h2 class="form-signin-heading">{% trans "Sign In" %}</h2>
+            <input type="text" class="form-control" name="username" placeholder="{% trans "User" %}" autocapitalize="none" autocorrect="off" autofocus>
+            <input type="password" class="form-control" name="password" placeholder="{% trans "Password" %}">
+            <input type="hidden" name="next" value="{{ next }}">
+            <div class="d-grid">
+                <button class="btn btn-lg btn-success" type="submit">{% trans "Sign In" %}</button>
+            </div>
+        </form>
+    </div>
 </div>
+
 {% endblock %}
\ No newline at end of file
diff --git a/static/css/signin.css b/static/css/signin.css
index 7e39d61..b21906c 100644
--- a/static/css/signin.css
+++ b/static/css/signin.css
@@ -1,3 +1,24 @@
+/* body {
+    background: rgba(203,203,203,1)
+} */
+.login-box {
+    margin-top: 25%;
+    display: block;
+    align-content: center;
+    align-items: center;
+    box-shadow: 0px 0px 30px black;
+    border-radius: 20px;
+    padding-top: 30px;
+    padding-bottom: 20px;
+    background: linear-gradient(0deg, rgba(203,203,203,1) 0%, rgba(255,255,255,1) 100%);
+}
+h1 {
+    color:#212529;
+}
+h2 {
+    color:#212529;
+}
+
 .form-signin {
     max-width: 330px;
     padding: 15px;
@@ -29,15 +50,28 @@
 }
 
 .form-signin input[type="text"] {
-    margin-bottom: -1px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    margin-bottom: 10px;
+    border-radius: 5px;
 }
 
 .form-signin input[type="password"] {
     margin-bottom: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-radius: 5px;
+}
+
+.btn-success {
+    background: linear-gradient(45deg, rgba(190,120,255,1) 0%, rgba(43,108,173,1) 34%, rgba(38,173,151,1) 68%, rgba(208,144,71,1) 100%);
+    transition-duration: 0.5s;
+    border-color: rgba(11, 12, 13, 0);
+    border-width: 2px;
+    border-style: solid;
+    color:white;
+}
+.btn-success:hover {
+    transition-duration: 0.5s;
+    border-color: goldenrod;
+    border-width: 2px;
+    border-style: solid;
 }
 
 .logout {