diff --git a/config.json b/config.json
index e02b1f8d..46c029b1 100644
--- a/config.json
+++ b/config.json
@@ -1,4 +1,6 @@
 {
-  "defaultHost": "95.111.249.143:10000",
-  "defaultProxy": ""
-}
\ No newline at end of file
+  "defaultHost": "95.111.249.143",
+  "defaultHostPort": 10000,
+  "defaultProxy": "",
+  "defaultProxyPort": 0
+}
diff --git a/lib/menu.js b/lib/menu.js
index c8ed2bbc..cc1e0826 100644
--- a/lib/menu.js
+++ b/lib/menu.js
@@ -6,7 +6,9 @@ class PrismarineMenu extends LitElement {
     super()
 
     this.server = config.defaultHost
+    this.serverport = config.defaultHostPort ?? 25565
     this.proxy = config.defaultProxy
+    this.proxyport = !config.defaultProxy && !config.defaultProxyPort ? '' : config.defaultProxyPort ?? 443
     this.username = window.localStorage.getItem('username') ?? 'pviewer' + (Math.floor(Math.random() * 1000))
     this.password = ''
   }
@@ -14,7 +16,9 @@ class PrismarineMenu extends LitElement {
   static get properties () {
     return {
       server: { type: String },
+      serverport: { type: Number },
       proxy: { type: String },
+      proxyport: { type: Number },
       username: { type: String },
       password: { type: String }
     }
@@ -22,35 +26,218 @@ class PrismarineMenu extends LitElement {
 
   static get styles () {
     return css`
-        label {
-            grid-column: labels;
-            grid-row: auto;
-        }
+    html {
+      height: 100%;
+    }
+    body {
+      margin:0;
+      padding:0;
+      font-family: sans-serif;
+      background: linear-gradient(#141e30, #243b55);
+    }
+    
+    .login-box {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 400px;
+      padding: 40px;
+      transform: translate(-50%, -50%);
+      background: rgba(0,0,0,.5);
+      box-sizing: border-box;
+      box-shadow: 0 15px 25px rgba(0,0,0,.6);
+      border-radius: 10px;
+    }
+    
+    .login-box h2 {
+      margin: 0 0 30px;
+      padding: 0;
+      color: #fff;
+      text-align: center;
+    }
+    
+    .login-box .user-box,
+    .login-box .port-box,
+    .login-box .ip-box{
+      position: relative;
+    }
+    
+    .login-box .user-box input,
+    .login-box .port-box input,
+    .login-box .ip-box input{
+      padding: 10px 0;
+      font-size: 16px;
+      color: #fff;
+      margin-bottom: 30px;
+      border: none;
+      border-bottom: 1px solid #fff;
+      outline: none;
+      background: transparent;
+    }
+    
+    .login-box .user-box input{
+      width: 100%
+    }
+    
+    .login-box .port-box input {
+      width: 15%
+    }
+    
+    .login-box .user-box label,
+    .login-box .port-box label,
+    .login-box .ip-box label{
+      position: absolute;
+      top:0;
+      left: 0;
+      padding: 10px 0;
+      font-size: 16px;
+      color: #fff;
+      pointer-events: none;
+      transition: .5s;
+    }
+    
+    .login-box .user-box input:focus ~ label,
+    .login-box .user-box input:valid ~ label,
+    .login-box .port-box input:focus ~ label,
+    .login-box .port-box input:valid ~ label,
+    .login-box .ip-box input:focus ~ label,
+    .login-box .ip-box input:valid ~ label{
+      top: -20px;
+      left: 0;
+      color: #03e9f4;
+      font-size: 12px;
+    }
+    
+    .login-box form a {
+      position: relative;
+      display: inline-block;
+      padding: 10px 20px;
+      color: #03e9f4;
+      font-size: 16px;
+      text-decoration: none;
+      text-transform: uppercase;
+      overflow: hidden;
+      transition: .5s;
+      margin-top: 40px;
+      letter-spacing: 4px
+    }
+    
+    .login-box a:hover {
+      background: #03e9f4;
+      color: #fff;
+      border-radius: 5px;
+      box-shadow: 0 0 5px #03e9f4,
+                  0 0 25px #03e9f4,
+                  0 0 50px #03e9f4,
+                  0 0 100px #03e9f4;
+    }
+    
+    .login-box a span {
+      position: absolute;
+      display: block;
+    }
+    
+    .login-box a span:nth-child(1) {
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, #03e9f4);
+      animation: btn-anim1 1s linear infinite;
+    }
+    
+    @keyframes btn-anim1 {
+      0% {
+        left: -100%;
+      }
+      50%,100% {
+        left: 100%;
+      }
+    }
+    
+    .login-box a span:nth-child(2) {
+      top: -100%;
+      right: 0;
+      width: 2px;
+      height: 100%;
+      background: linear-gradient(180deg, transparent, #03e9f4);
+      animation: btn-anim2 1s linear infinite;
+      animation-delay: .25s
+    }
+    
+    @keyframes btn-anim2 {
+      0% {
+        top: -100%;
+      }
+      50%,100% {
+        top: 100%;
+      }
+    }
+    
+    .login-box a span:nth-child(3) {
+      bottom: 0;
+      right: -100%;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(270deg, transparent, #03e9f4);
+      animation: btn-anim3 1s linear infinite;
+      animation-delay: .5s
+    }
+    
+    @keyframes btn-anim3 {
+      0% {
+        right: -100%;
+      }
+      50%,100% {
+        right: 100%;
+      }
+    }
+    
+    .login-box a span:nth-child(4) {
+      bottom: -100%;
+      left: 0;
+      width: 2px;
+      height: 100%;
+      background: linear-gradient(360deg, transparent, #03e9f4);
+      animation: btn-anim4 1s linear infinite;
+      animation-delay: .75s
+    }
+    
+    @keyframes btn-anim4 {
+      0% {
+        bottom: -100%;
+      }
+      50%,100% {
+        bottom: 100%;
+      }
+    }
+    form {
+      display: flex;
+     flex-direction: column
+    }
+    .ip-with-port {
+      display: flex;
+      justify-content: space-between;
+       
+      gap: 10px
+    }
+    
+    a {
+      width: max-content;
+    }
+    #port {
+      width: 100%;
+    }
         
-        input,
-        button {
-            grid-column: controls;
-            grid-row: auto;
-            border: none;
-            padding: 1em;
-        }
-        div {
-            display: grid;
-            grid-template-columns: [labels] auto [controls] 1fr;
-            grid-auto-flow: row;
-            grid-gap: .8em;
-            background: #eee;
-            padding: 1.2em;
-        }
-      `
+    `
   }
 
   dispatchConnect () {
     window.localStorage.setItem('username', this.username)
     this.dispatchEvent(new window.CustomEvent('connect', {
       detail: {
-        server: this.server,
-        proxy: this.proxy,
+        server: `${this.server}:${this.serverport}`,
+        proxy: `${this.proxy}${this.proxy !== '' ? `:${this.proxyport}` : ''}`,
         username: this.username,
         password: this.password
       }
@@ -59,22 +246,47 @@ class PrismarineMenu extends LitElement {
 
   render () {
     return html`
-    Welcome to Prismarine Web Client!
-    <div>
-        <label for="server">Server</label>
-        <input id="server" type="text" value="${this.server}" @input=${e => { this.server = e.target.value }}>
-
-        <label for="proxy">Proxy</label>
-        <input id="proxy" type="text" value="${this.proxy}" @input=${e => { this.proxy = e.target.value }}>
-
-        <label for="username">Username</label>
-        <input id="username" type="text" value="${this.username}" @input=${e => { this.username = e.target.value }}>
-
-        <label for="password">Password</label>
-        <input id="password" type="text" value="${this.password}" @input=${e => { this.paswword = e.target.value }}>
-    
-    
-        <button style="font-size:2em" @click=${() => this.dispatchConnect()}>Play</button>
+    <div class="login-box">
+      <h2>Prismarine Web Client</h2>
+      <form>
+        <div class="ip-with-port">
+        <div class="ip-box">
+          <input id="serverip" type="text" name="" required="" value="${this.server}" @input=${e => { this.server = e.target.value }}>
+          <label>Server</label>
+        </div>
+        <div class="port-box">
+          <input id="port" type="text" name="" required="" value="${this.serverport}" @input=${e => { this.serverport = e.target.value }}>
+          <label>Port</label>
+        </div>
+            </div>
+        <form>
+          <div class="ip-with-port">
+        <div class="ip-box">
+          <input id="proxy" type="text" name="" required="" value="${this.proxy}" @input=${e => { this.proxy = e.target.value }}>
+          <label>Proxy</label>
+        </div>
+        <div class="port-box">
+          <input id="port" type="text" name="" required="" value="${this.proxyport}" @input=${e => { this.proxyport = e.target.value }}>
+          <label>Port</label>
+        </div>
+            </div>
+        <form>
+        <div class="user-box">
+          <input id="username" type="text" name="" required="" value="${this.username}" @input=${e => { this.username = e.target.value }}>
+          <label>Username</label>
+        </div>
+        <div class="user-box">
+          <input id="password" type="password" name="" required="" @input=${e => { this.password = e.target.value }}>
+          <label>Password</label>
+        </div>
+        <a href="#" @click=${() => this.dispatchConnect()}>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          Play
+        </a>
+     </form>
     </div>
     `
   }
diff --git a/styles.css b/styles.css
index 869d89ba..8412dbd1 100644
--- a/styles.css
+++ b/styles.css
@@ -9,14 +9,14 @@
 }
 
 html {
-	overflow: hidden;
+  height: 100%;
+  overflow: hidden;
 }
-
-html,
 body {
-	height: 100%;
-	margin: 0;
-	padding: 0;
+  margin:0;
+  padding:0;
+  font-family: sans-serif;
+  background: linear-gradient(#141e30, #243b55);
 }
 
 canvas {