diff --git a/api/product/templates/cutout_notification_error.html b/api/product/templates/cutout_notification_error.html
index 9f2dc3863..df7f1f2e3 100644
--- a/api/product/templates/cutout_notification_error.html
+++ b/api/product/templates/cutout_notification_error.html
@@ -27,7 +27,7 @@
                                                 style="font-family: Bitter, Georgia, serif; font-size: 16px; font-weight: bold">
                                                 LIneA Science Server</h1>
 
-                                            <img style="height: 30px" src="{{host}}/linea-dark.svg">
+                                            <img style="height: 30px" src="{{host}}/images/linea-dark.svg">
                                         </a>
                                     </header>
                                 </td>
diff --git a/api/product/templates/cutout_notification_finish.html b/api/product/templates/cutout_notification_finish.html
index 6410a7faf..e8beeab66 100644
--- a/api/product/templates/cutout_notification_finish.html
+++ b/api/product/templates/cutout_notification_finish.html
@@ -26,7 +26,7 @@
                       <h1 style="font-family: Bitter, Georgia, serif; font-size: 16px; font-weight: bold">
                         LIneA Science Server</h1>
 
-                      <img style="height: 30px" src="{{host}}/linea-dark.svg">
+                      <img style="height: 30px" src="{{host}}/images/linea-dark.svg">
                     </a>
                   </header>
                 </td>
diff --git a/api/product/templates/cutout_notification_start.html b/api/product/templates/cutout_notification_start.html
index 43c1191c3..b8ad27638 100644
--- a/api/product/templates/cutout_notification_start.html
+++ b/api/product/templates/cutout_notification_start.html
@@ -27,7 +27,7 @@
                                                 style="font-family: Bitter, Georgia, serif; font-size: 16px; font-weight: bold">
                                                 LIneA Science Server</h1>
 
-                                            <img style="height: 30px" src="{{host}}/linea-dark.svg">
+                                            <img style="height: 30px" src="{{host}}/images/linea-dark.svg">
                                         </a>
                                     </header>
                                 </td>
diff --git a/api/templates/rest_framework/login.html b/api/templates/rest_framework/login.html
index 691e6defc..b865bb03f 100644
--- a/api/templates/rest_framework/login.html
+++ b/api/templates/rest_framework/login.html
@@ -1,54 +1,330 @@
+<style>
+  body.container {
+    background-image: url('/images/background.jpg');
+    background-repeat: round;
+    width: 100% !important;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+  }
+
+  .logo {
+    max-width: 150px;
+  }
+
+  .logo img {
+    max-width: 100%;
+    height: auto;
+    width: 100%;
+  }
+
+  .card {
+    background-color: #fff;
+    padding: 16px;
+    border-radius: 2px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
+  }
+
+
+  .card form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .card-header h3 {
+    margin: 6px 0 10px;
+    color: #283661;
+    font-weight: bold;
+    font-size: 28px;
+    font-family: Roboto, sans-serif;
+  }
+
+  .card .MuiFormControl-root {
+    border: 0;
+    display: inline-flex;
+    padding: 0;
+    position: relative;
+    min-width: 0;
+    flex-direction: column;
+    vertical-align: top;
+    margin: 6px;
+  }
+
+  .card .MuiInputLabel-root {
+    color: #666;
+    padding: 0;
+    font-size: 16px;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0.00938em;
+
+    z-index: 1;
+    transform: translate(14px, -6px) scale(0.75);
+    pointer-events: none;
+
+    transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+
+    top: 0;
+    left: 0;
+    position: absolute;
+  }
+
+  .card .MuiInputBase-root {
+    color: #fff;
+    cursor: text;
+    display: inline-flex;
+    position: relative;
+    font-size: 1rem;
+    border-radius: 4px;
+    box-sizing: border-box;
+    align-items: center;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-weight: 400;
+    line-height: 1.1876em;
+    letter-spacing: 0.00938em;
+  }
+
+  /*label[data-shrink="false"] + .MuiInputBase-root input::placeholder {
+    opacity: 0 !important;
+  }*/
+
+  .card .MuiInputBase-root input {
+    font-size: 16px;
+    color: #000;
+    width: 100%;
+    border: 0;
+    min-height: 2em;
+    margin: 0;
+    display: block;
+    padding: 10px 14px;
+    min-width: 0;
+    background: none;
+    box-sizing: content-box;
+    animation-name: mui-auto-fill-cancel;
+    letter-spacing: inherit;
+    animation-duration: 10ms;
+    -webkit-tap-highlight-color: transparent;
+
+    opacity: 0.5;
+    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+
+    outline: none;
+  }
+
+  .MuiOutlinedInput-notchedOutline {
+    top: -5px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0 12px;
+    overflow: hidden;
+    position: absolute;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: inherit;
+    pointer-events: none;
+
+    border-color: #666;
+    border-width: 2px;
+  }
+
+  .MuiOutlinedInput-notchedOutline legend {
+    width: auto;
+    height: 11px;
+    display: block;
+    padding: 0;
+    font-size: 0.75em;
+    max-width: 0.01px;
+    text-align: left;
+    transition: max-width 100ms cubic-bezier(0.0, 0, 0.2, 1) 50ms;
+    visibility: hidden;
+    max-width: 1000px;
+
+   }
+
+  .MuiOutlinedInput-notchedOutline legend > span {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-size: 14px;
+   }
+
+   .MuiFormControl-root .btn {
+      width: 100%;
+      padding: 8px 16px;
+      font-size: 14px;
+      box-sizing: border-box;
+      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      font-family: "Roboto", sans-serif;
+      font-weight: 700;
+      line-height: 1.75;
+      border-radius: 4px;
+      letter-spacing: 0.02857em;
+      text-transform: uppercase;
+      background-color: #283661;
+      color: #fff;
+   }
+
+   .MuiFormControl-root .btn:hover,
+   .MuiFormControl-root .btn:active,
+   .MuiFormControl-root .btn:focus {
+     color: #fff;
+   }
+
+   .well.well-small.text-error {
+    max-width: 386px;
+    margin: 8px;
+    margin: auto;
+}
+
+.form-container {
+  min-width: 400px;
+}
+
+.MuiFormControl-root .btn.btn-signup {
+  background-color: #00b9f2;
+}
+
+.MuiFormControl-root .btn.btn-google svg {
+  margin-right: 24px;
+}
+
+@media screen and (max-width: 480px) {
+  .form-container {
+    min-width: auto;
+  }
+}
+
+.MuiFormControl-root .btn.btn-google {
+  background-color: #4285f4;
+  /* display: flex;
+  align-items: center;
+  justify-content: center; */
+  position: relative;
+}
+
+.MuiFormControl-root .btn.btn-google .google-icon-wrapper {
+  position: absolute;
+  margin-top: 1px;
+  margin-left: 1px;
+  width: 38px;
+  height: 38px;
+  border-radius: 2px;
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.MuiFormControl-root .btn.btn-google .google-icon-wrapper .google-icon {
+  position: absolute;
+  margin-top: 11px;
+  margin-left: 11px;
+  width: 18px;
+  height: 18px;
+  left: 0;
+  top: 0;
+}
+
+.MuiFormControl-root .btn.btn-google:hover {
+  box-shadow: 0 0 6px #4285f4;
+}
+.MuiFormControl-root .btn.btn-google:active {
+  background: #1669F2;
+}
+</style>
+
 {% extends "rest_framework/login_base.html" %}
 {% block title %}Science Server{% endblock %}
 
+
 {% block body %}
 
 <body class="container">
-  <div class="container-fluid" style="margin-top: 30px">
+  <div>
     <div class="row-fluid">
-      <div class="well" style="width: 320px; margin-left: auto; margin-right: auto">
-        <div class="row-fluid">
-          <div>
-            {% block branding %}
-            <h3 style="margin: 0 0 20px;">Science Server</h3>
-            {% endblock %}
-
-            <br />
+      <div class="card">
+        <div class="card-header">
+          {% block branding %}
+          <div class="logo">
+            <img src="/images/linea-logo.png" alt="LIneA Logo" />
           </div>
-        </div><!-- /row fluid -->
+          <h3>Science Server</h3>
+          {% endblock %}
+        </div>
 
-        <div class="row-fluid">
-          <div>
+          <div class="form-container">
             <form action="{% url 'rest_framework:login' %}" role="form" method="post">
               {% csrf_token %}
               <input type="hidden" name="next" value="{{ next }}" />
 
-              <div id="div_id_username" class="clearfix control-group {% if form.username.errors %}error{% endif %}">
-                <div class="form-group">
-                  <label for="id_username">Username:</label>
-                  <input type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off"
-                    class="form-control textinput textInput" id="id_username" required {% if form.username.value %}
-                    value="{{ form.username.value }}" {% endif %}>
+                <div id="div_id_username" class="MuiFormControl-root {% if form.username.errors %}error{% endif %}">
+                  <label class="MuiInputLabel-root" for="id_username">Username</label>
+                  <div class="MuiInputBase-root">
+                    <input
+                      type="text"
+                      name="username"
+                      maxlength="100"
+                      autocapitalize="off"
+                      autocorrect="off"
+                      class="MuiInputBase-input"
+                      id="id_username"
+                      required
+                      {% if form.username.value %}
+                      value="{{ form.username.value }}"
+                      {% endif %}
+                    />
+                    <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline">
+                      <legend class="jss185">
+                        <span>Username</span>
+                      </legend>
+                    </fieldset>
+                  </div>
                   {% if form.username.errors %}
                   <p class="text-error">
                     {{ form.username.errors|striptags }}
                   </p>
                   {% endif %}
                 </div>
-              </div>
 
-              <div id="div_id_password" class="clearfix control-group {% if form.password.errors %}error{% endif %}">
-                <div class="form-group">
-                  <label for="id_password">Password:</label>
-                  <input type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off"
-                    class="form-control textinput textInput" id="id_password" required>
+                <div id="div_id_password" class="MuiFormControl-root {% if form.password.errors %}error{% endif %}">
+                  <label class="MuiInputLabel-root" for="id_password">Password</label>
+                  <div class="MuiInputBase-root">
+                    <input
+                      type="password"
+                      name="password"
+                      maxlength="100"
+                      autocapitalize="off"
+                      autocorrect="off"
+                      class="MuiInputBase-input"
+                      id="id_password"
+                      required
+                    />
+                    <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline">
+                      <legend class="jss185">
+                        <span>Password</span>
+                      </legend>
+                    </fieldset>
+                  </div>
                   {% if form.password.errors %}
                   <p class="text-error">
                     {{ form.password.errors|striptags }}
                   </p>
                   {% endif %}
                 </div>
-              </div>
 
               {% if form.non_field_errors %}
               {% for error in form.non_field_errors %}
@@ -56,26 +332,30 @@ <h3 style="margin: 0 0 20px;">Science Server</h3>
               {% endfor %}
               {% endif %}
 
-              <div class="form-actions-no-box">
-                <input type="submit" name="submit" value="Log in" class="btn btn-primary form-control"
+              <div class="MuiFormControl-root">
+                <input type="submit" name="submit" value="Log in" class="btn"
                   id="submit-id-submit">
-
-              </div>
-
-              {% if settings.NCSA_SIGNUP_LINK %}
-              <div style="padding-top:5px;">
-                <a href="{{ settings.NCSA_SIGNUP_LINK }}" class="btn btn-info btn-block">Sign Up</a>
               </div>
-              {% endif %}
 
               {% if settings.AUTH_SHIB_ENABLED %}
               {% if settings.SHIB_LOGIN_GOOGLE_URL is not None and settings.SHIB_LOGIN_GOOGLE_URL is not False %}
-              <div style="padding-top:5px;">
-                <a href="{{ settings.SHIB_LOGIN_GOOGLE_URL }}" class="btn btn-info btn-block">Login with Google</a>
+              <div class="MuiFormControl-root">
+                <a href="{{ settings.SHIB_LOGIN_GOOGLE_URL }}" class="btn btn-google">
+                  <div class="google-icon-wrapper">
+                    <img class="google-icon" src="/images/google_logo.svg"/>
+                  </div>
+                  <span>Login with Google</span>
+                </a>
               </div>
               {% endif %}
               {% endif %}
 
+              {% if settings.NCSA_SIGNUP_LINK %}
+              <div class="MuiFormControl-root">
+                <a href="{{ settings.NCSA_SIGNUP_LINK }}" class="btn btn-signup">Sign Up</a>
+              </div>
+              {% endif %}
+
               <!--Exibir todas as variaveis de settings diponiveis para os templates.              -->
               <!--Essas variaveis estao no settings na sessao SETTINGS_EXPORT-->
               <!-- {% for key, value in settings.items %} -->
@@ -83,7 +363,6 @@ <h3 style="margin: 0 0 20px;">Science Server</h3>
               <!-- {% endfor %} -->
             </form>
           </div>
-        </div><!-- /.row-fluid -->
       </div>
       <!--/.well-->
     </div><!-- /.row-fluid -->
diff --git a/frontend/ext/build/index.html b/frontend/ext/build/index.html
index 308afdf9b..99a25210d 100644
--- a/frontend/ext/build/index.html
+++ b/frontend/ext/build/index.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Create amazing web apps built on web standards. Sencha Touch, HTML5 mobile app framework. Ext JS, cross-browser JavaScript framework. Ext GWT" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
+    <link rel="shortcut icon" type="image/ico" href="/images/favicon.png" />
 
     <link rel="stylesheet" type="text/css" media="screen, projection, print" href="welcome/css/welcome.css" />
     <!--[if lt IE 9]>
diff --git a/frontend/ext/index.html b/frontend/ext/index.html
index 308afdf9b..99a25210d 100644
--- a/frontend/ext/index.html
+++ b/frontend/ext/index.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Create amazing web apps built on web standards. Sencha Touch, HTML5 mobile app framework. Ext JS, cross-browser JavaScript framework. Ext GWT" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
+    <link rel="shortcut icon" type="image/ico" href="/images/favicon.png" />
 
     <link rel="stylesheet" type="text/css" media="screen, projection, print" href="welcome/css/welcome.css" />
     <!--[if lt IE 9]>
diff --git a/frontend/images/background.jpg b/frontend/images/background.jpg
new file mode 100644
index 000000000..e6fed07d9
Binary files /dev/null and b/frontend/images/background.jpg differ
diff --git a/frontend/images/google_logo.svg b/frontend/images/google_logo.svg
new file mode 100644
index 000000000..c8b720b68
--- /dev/null
+++ b/frontend/images/google_logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><script xmlns=""/><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
\ No newline at end of file
diff --git a/frontend/images/linea-logo.png b/frontend/images/linea-logo.png
new file mode 100644
index 000000000..df92cd99e
Binary files /dev/null and b/frontend/images/linea-logo.png differ
diff --git a/frontend/nginx-proxy-develop.conf b/frontend/nginx-proxy-develop.conf
index 53705eb27..7a488bd96 100644
--- a/frontend/nginx-proxy-develop.conf
+++ b/frontend/nginx-proxy-develop.conf
@@ -36,7 +36,7 @@ server {
         # proxy_buffering off;
         # proxy_pass http://backend:8000;
         include uwsgi_params;
-        uwsgi_pass api;        
+        uwsgi_pass api;
     }
 
     # Admin
@@ -100,8 +100,9 @@ server {
     }
 
     # Favicon
-    location ~* favicon.png {
-      alias /var/www/images/favicon.png;
+    location /images/ {
+      alias /var/www/images/;
+      try_files $uri $uri/ /index.html;
       autoindex off;
     }
 
@@ -176,7 +177,7 @@ server {
       proxy_set_header X-Forwarded-Host $server_name;
       proxy_set_header X-Real-IP $remote_addr;
     }
-    
+
 
     location / {
       proxy_pass http://landingpage:3000$request_uri;
diff --git a/frontend/nginx-proxy.conf b/frontend/nginx-proxy.conf
index 7f8e2bedc..87af5b671 100644
--- a/frontend/nginx-proxy.conf
+++ b/frontend/nginx-proxy.conf
@@ -18,7 +18,7 @@ server {
 
     # set client body size to 100M #
     client_max_body_size 100M;
-    
+
     proxy_send_timeout 180s;
     proxy_read_timeout 180s;
     fastcgi_send_timeout 180s;
@@ -38,7 +38,7 @@ server {
       # proxy_buffering off;
       # proxy_pass http://backend:8000;
       include uwsgi_params;
-      uwsgi_pass api; 
+      uwsgi_pass api;
     }
 
     # Admin
@@ -138,13 +138,10 @@ server {
     }
 
     # Favicon
-    location ~* favicon.png {
-      alias /var/www/images/favicon.png;
-      autoindex off;
-    }
-    # Logotipo para os emails
-    location /linea-dark.svg {
-      root /var/www/images/;
+    location /images/ {
+      alias /var/www/images/;
+      try_files $uri $uri/ /index.html;
       autoindex off;
     }
+
 }