diff --git a/app/Http/ViewComposers/AssetComposer.php b/app/Http/ViewComposers/AssetComposer.php
new file mode 100644
index 000000000..41e5f7e10
--- /dev/null
+++ b/app/Http/ViewComposers/AssetComposer.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Pterodactyl\Http\ViewComposers;
+
+use Illuminate\View\View;
+use Pterodactyl\Services\Helpers\AssetHashService;
+
+class AssetComposer
+{
+    /**
+     * @var \Pterodactyl\Services\Helpers\AssetHashService
+     */
+    private $assetHashService;
+
+    /**
+     * AssetComposer constructor.
+     *
+     * @param \Pterodactyl\Services\Helpers\AssetHashService $assetHashService
+     */
+    public function __construct(AssetHashService $assetHashService)
+    {
+        $this->assetHashService = $assetHashService;
+    }
+
+    /**
+     * Provide access to the asset service in the views.
+     *
+     * @param \Illuminate\View\View $view
+     */
+    public function compose(View $view)
+    {
+        $view->with('asset', $this->assetHashService);
+    }
+}
diff --git a/app/Providers/ViewComposerServiceProvider.php b/app/Providers/ViewComposerServiceProvider.php
index ab8c9e164..9490234f3 100644
--- a/app/Providers/ViewComposerServiceProvider.php
+++ b/app/Providers/ViewComposerServiceProvider.php
@@ -3,6 +3,7 @@
 namespace Pterodactyl\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Pterodactyl\Http\ViewComposers\AssetComposer;
 use Pterodactyl\Http\ViewComposers\ServerListComposer;
 use Pterodactyl\Http\ViewComposers\Server\ServerDataComposer;
 
@@ -13,6 +14,8 @@ class ViewComposerServiceProvider extends ServiceProvider
      */
     public function boot()
     {
+        $this->app->make('view')->composer('*', AssetComposer::class);
+
         $this->app->make('view')->composer('server.*', ServerDataComposer::class);
 
         // Add data to make the sidebar work when viewing a server.
diff --git a/app/Services/Helpers/AssetHashService.php b/app/Services/Helpers/AssetHashService.php
index 181e84fd1..3f721c409 100644
--- a/app/Services/Helpers/AssetHashService.php
+++ b/app/Services/Helpers/AssetHashService.php
@@ -2,7 +2,6 @@
 
 namespace Pterodactyl\Services\Helpers;
 
-use Illuminate\Container\Container;
 use Illuminate\Filesystem\FilesystemManager;
 use Illuminate\Contracts\Foundation\Application;
 use Illuminate\Contracts\Cache\Repository as CacheRepository;
@@ -56,20 +55,47 @@ class AssetHashService
      *
      * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
      */
-    public function getUrl(string $resource): string
+    public function url(string $resource): string
     {
         $file = last(explode('/', $resource));
 
-        return '/' . ltrim(str_replace($file, array_get($this->getManifest(), $file, $file), $resource), '/');
+        return '/' . ltrim(str_replace($file, array_get($this->manifest(), $file, $file), $resource), '/');
+    }
+
+    /**
+     * Return a built CSS import using the provided URL.
+     *
+     * @param string $resource
+     * @return string
+     *
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function css(string $resource): string
+    {
+        return '<link href="' . $this->url($resource) . '" rel="stylesheet preload" crossorigin="anonymous" referrerpolicy="no-referrer">';
+    }
+
+    /**
+     * Return a built JS import using the provided URL.
+     *
+     * @param string $resource
+     * @return string
+     *
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function js(string $resource): string
+    {
+        return '<script src="' . $this->url($resource) . '" crossorigin="anonymous"></script>';
     }
 
     /**
      * Get the asset manifest and store it in the cache for quicker lookups.
      *
      * @return array
+     *
      * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
      */
-    public function getManifest(): array
+    protected function manifest(): array
     {
         if (! is_null(self::$manifest)) {
             return self::$manifest;
@@ -88,41 +114,4 @@ class AssetHashService
 
         return self::$manifest = $contents;
     }
-
-    /**
-     * Get the URL for a resource in a static context.
-     *
-     * @param string $resource
-     * @return string
-     *
-     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
-     */
-    public static function url(string $resource): string
-    {
-        return Container::getInstance()->make(self::class)->getUrl($resource);
-    }
-
-    /**
-     * @param string $resource
-     * @return string
-     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
-     */
-    public static function css(string $resource): string
-    {
-        $path = self::url($resource);
-
-        return '<link href="' . $path . '" rel="stylesheet preload" crossorigin="anonymous" referrerpolicy="no-referrer">';
-    }
-
-    /**
-     * @param string $resource
-     * @return string
-     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
-     */
-    public static function js(string $resource): string
-    {
-        $path = self::url($resource);
-
-        return '<script src="' . $path . '" crossorigin="anonymous">';
-    }
 }
diff --git a/resources/assets/pterodactyl/css/main.css b/resources/assets/pterodactyl/css/main.css
deleted file mode 100644
index 839383438..000000000
--- a/resources/assets/pterodactyl/css/main.css
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * This injects Tailwind's base styles, which is a combination of
- * Normalize.css and some additional base styles.
- */
-@import "tailwindcss/preflight";
-
-/**
- * This injects any component classes registered by plugins.
- */
-@import "tailwindcss/components";
-
-/**
- * Here you would add any of your custom component classes; stuff that you'd
- * want loaded *before* the utilities so that the utilities could still
- * override them.
- */
-
-/**
- * This injects all of Tailwind's utility classes, generated based on your
- * config file.
- */
-@import "tailwindcss/utilities";
-
-/**
- * Here you would add any custom utilities you need that don't come out of the
- * box with Tailwind.
- */
diff --git a/resources/assets/pterodactyl/scripts/app.js b/resources/assets/pterodactyl/scripts/app.js
new file mode 100644
index 000000000..76ebc205e
--- /dev/null
+++ b/resources/assets/pterodactyl/scripts/app.js
@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { Ziggy } from './helpers/ziggy';
+
+// Base Vuejs Templates
+import Login from './components/auth/Login';
+
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./bootstrap');
+
+window.Ziggy = Ziggy;
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const route = require('./../../../../vendor/tightenco/ziggy/src/js/route').default;
+
+Vue.config.productionTip = false;
+Vue.mixin({
+    methods: {
+        route: route,
+    },
+});
+
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+    routes: [
+        {
+            path: '/:action?',
+            component: Login,
+        }
+    ]
+});
+
+const app = new Vue({
+    router,
+}).$mount('#pterodactyl');
diff --git a/resources/assets/pterodactyl/scripts/bootstrap.js b/resources/assets/pterodactyl/scripts/bootstrap.js
new file mode 100644
index 000000000..b101f9b80
--- /dev/null
+++ b/resources/assets/pterodactyl/scripts/bootstrap.js
@@ -0,0 +1,35 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.$ = window.jQuery = require('jquery');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Next we will register the CSRF Token as a common header with Axios so that
+ * all outgoing HTTP requests automatically have it attached. This is just
+ * a simple convenience so we don't have to attach every token manually.
+ */
+
+let token = document.head.querySelector('meta[name="csrf-token"]');
+
+if (token) {
+    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+} else {
+    console.error('CSRF token not found in document.');
+}
diff --git a/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue b/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue
new file mode 100644
index 000000000..b395d4106
--- /dev/null
+++ b/resources/assets/pterodactyl/scripts/components/auth/ForgotPassword.vue
@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post">
+            <div class="flex flex-wrap -mx-3 mb-6">
+                <div class="input-open">
+                    <input class="input" id="grid-email" type="text" aria-labelledby="grid-email" required
+                           v-bind:value="email"
+                           v-on:input="updateEmail($event)"
+                    />
+                    <label for="grid-email">Email</label>
+                    <p class="text-grey-darker text-xs">Enter your account email address to recive instructions on resetting your password.</p>
+                </div>
+            </div>
+            <div>
+                <button class="bg-blue hover:bg-blue-dark hover:border-blue-darker border-blue-dark border text-white p-4 rounded w-full uppercase tracking-wide text-sm"
+                        type="submit">
+                    Recover Account
+                </button>
+            </div>
+            <div class="pt-6 text-center">
+                <router-link to="/" class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark">
+                    Go to Login
+                </router-link>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'forgot-password',
+        props: {
+            email: {type: String, required: true},
+        },
+        methods: {
+            updateEmail: function (event) {
+                this.$emit('update-email', event.target.value);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/pterodactyl/scripts/components/auth/Login.vue b/resources/assets/pterodactyl/scripts/components/auth/Login.vue
new file mode 100644
index 000000000..f663de6f1
--- /dev/null
+++ b/resources/assets/pterodactyl/scripts/components/auth/Login.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <login-form
+                v-if="this.$route.path === '/'"
+                v-bind:email="email"
+                v-on:update-email="onEmailUpdate"
+        />
+        <forgot-password
+                v-if="this.$route.path === '/forgot-password'"
+                v-bind:email="email"
+                v-on:update-email="onEmailUpdate"
+        />
+    </div>
+</template>
+
+<script>
+    import LoginForm from "./LoginForm";
+    import ForgotPassword from "./ForgotPassword";
+
+    export default {
+        name: 'login',
+        data: function () {
+            return {
+                email: '',
+            };
+        },
+        methods: {
+            onEmailUpdate: function (value) {
+                this.$data.email = value;
+            },
+        },
+        components: {
+            ForgotPassword,
+            LoginForm
+        },
+    }
+</script>
diff --git a/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue b/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue
new file mode 100644
index 000000000..6e97670d4
--- /dev/null
+++ b/resources/assets/pterodactyl/scripts/components/auth/LoginForm.vue
@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" :action="route('auth.login')" method="post">
+            <div class="flex flex-wrap -mx-3 mb-6">
+                <div class="input-open">
+                    <input class="input" id="grid-username" type="text" name="user" aria-labelledby="grid-username" required
+                           v-bind:value="email"
+                           v-on:input="updateEmail($event)"
+                    />
+                    <label for="grid-username">Username or Email</label>
+                </div>
+            </div>
+            <div class="flex flex-wrap -mx-3 mb-6">
+                <div class="input-open">
+                    <input class="input" id="grid-password" type="password" name="password" aria-labelledby="grid-password" required>
+                    <label for="grid-password">Password</label>
+                </div>
+            </div>
+            <div>
+                <button class="bg-blue hover:bg-blue-dark hover:border-blue-darker border-blue-dark border text-white p-4 rounded w-full uppercase tracking-wide text-sm" type="submit">
+                    Sign In
+                </button>
+            </div>
+            <div class="pt-6 text-center">
+                <router-link to="/forgot-password" class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark">
+                    Forgot Password?
+                </router-link>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'login-form',
+        props: {
+            email: { type: String, required: true },
+        },
+        methods: {
+            updateEmail: function (event) {
+                this.$emit('update-email', event.target.value);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/pterodactyl/scripts/helpers/ziggy.js b/resources/assets/pterodactyl/scripts/helpers/ziggy.js
new file mode 100644
index 000000000..74414d4ab
--- /dev/null
+++ b/resources/assets/pterodactyl/scripts/helpers/ziggy.js
@@ -0,0 +1,11 @@
+    var Ziggy = {
+        namedRoutes: JSON.parse('{"debugbar.openhandler":{"uri":"_debugbar\/open","methods":["GET","HEAD"],"domain":null},"debugbar.clockwork":{"uri":"_debugbar\/clockwork\/{id}","methods":["GET","HEAD"],"domain":null},"debugbar.assets.css":{"uri":"_debugbar\/assets\/stylesheets","methods":["GET","HEAD"],"domain":null},"debugbar.assets.js":{"uri":"_debugbar\/assets\/javascript","methods":["GET","HEAD"],"domain":null},"debugbar.cache.delete":{"uri":"_debugbar\/cache\/{key}\/{tags?}","methods":["DELETE"],"domain":null},"index":{"uri":"\/","methods":["GET","HEAD"],"domain":null},"index.status":{"uri":"status\/{server}","methods":["GET","HEAD"],"domain":null},"account":{"uri":"account","methods":["GET","HEAD"],"domain":null},"account.api":{"uri":"account\/api","methods":["GET","HEAD"],"domain":null},"account.api.new":{"uri":"account\/api\/new","methods":["GET","HEAD"],"domain":null},"account.api.revoke":{"uri":"account\/api\/revoke\/{identifier}","methods":["DELETE"],"domain":null},"account.security":{"uri":"account\/security","methods":["GET","HEAD"],"domain":null},"account.security.revoke":{"uri":"account\/security\/revoke\/{id}","methods":["GET","HEAD"],"domain":null},"account.security.totp":{"uri":"account\/security\/totp","methods":["PUT"],"domain":null},"account.security.totp.set":{"uri":"account\/security\/totp","methods":["POST"],"domain":null},"account.security.totp.disable":{"uri":"account\/security\/totp","methods":["DELETE"],"domain":null},"admin.index":{"uri":"admin","methods":["GET","HEAD"],"domain":null},"admin.api.index":{"uri":"admin\/api","methods":["GET","HEAD"],"domain":null},"admin.api.new":{"uri":"admin\/api\/new","methods":["GET","HEAD"],"domain":null},"admin.api.delete":{"uri":"admin\/api\/revoke\/{identifier}","methods":["DELETE"],"domain":null},"admin.locations":{"uri":"admin\/locations","methods":["GET","HEAD"],"domain":null},"admin.locations.view":{"uri":"admin\/locations\/view\/{location}","methods":["GET","HEAD"],"domain":null},"admin.databases":{"uri":"admin\/databases","methods":["GET","HEAD"],"domain":null},"admin.databases.view":{"uri":"admin\/databases\/view\/{host}","methods":["GET","HEAD"],"domain":null},"admin.settings":{"uri":"admin\/settings","methods":["GET","HEAD"],"domain":null},"admin.settings.mail":{"uri":"admin\/settings\/mail","methods":["GET","HEAD"],"domain":null},"admin.settings.advanced":{"uri":"admin\/settings\/advanced","methods":["GET","HEAD"],"domain":null},"admin.users":{"uri":"admin\/users","methods":["GET","HEAD"],"domain":null},"admin.users.json":{"uri":"admin\/users\/accounts.json","methods":["GET","HEAD"],"domain":null},"admin.users.new":{"uri":"admin\/users\/new","methods":["GET","HEAD"],"domain":null},"admin.users.view":{"uri":"admin\/users\/view\/{user}","methods":["GET","HEAD"],"domain":null},"admin.servers":{"uri":"admin\/servers","methods":["GET","HEAD"],"domain":null},"admin.servers.new":{"uri":"admin\/servers\/new","methods":["GET","HEAD"],"domain":null},"admin.servers.view":{"uri":"admin\/servers\/view\/{server}","methods":["GET","HEAD"],"domain":null},"admin.servers.view.details":{"uri":"admin\/servers\/view\/{server}\/details","methods":["GET","HEAD"],"domain":null},"admin.servers.view.build":{"uri":"admin\/servers\/view\/{server}\/build","methods":["GET","HEAD"],"domain":null},"admin.servers.view.startup":{"uri":"admin\/servers\/view\/{server}\/startup","methods":["GET","HEAD"],"domain":null},"admin.servers.view.database":{"uri":"admin\/servers\/view\/{server}\/database","methods":["GET","HEAD"],"domain":null},"admin.servers.view.manage":{"uri":"admin\/servers\/view\/{server}\/manage","methods":["GET","HEAD"],"domain":null},"admin.servers.view.delete":{"uri":"admin\/servers\/view\/{server}\/delete","methods":["GET","HEAD"],"domain":null},"admin.servers.view.manage.toggle":{"uri":"admin\/servers\/view\/{server}\/manage\/toggle","methods":["POST"],"domain":null},"admin.servers.view.manage.rebuild":{"uri":"admin\/servers\/view\/{server}\/manage\/rebuild","methods":["POST"],"domain":null},"admin.servers.view.manage.suspension":{"uri":"admin\/servers\/view\/{server}\/manage\/suspension","methods":["POST"],"domain":null},"admin.servers.view.manage.reinstall":{"uri":"admin\/servers\/view\/{server}\/manage\/reinstall","methods":["POST"],"domain":null},"admin.servers.view.database.delete":{"uri":"admin\/servers\/view\/{server}\/database\/{database}\/delete","methods":["DELETE"],"domain":null},"admin.nodes":{"uri":"admin\/nodes","methods":["GET","HEAD"],"domain":null},"admin.nodes.new":{"uri":"admin\/nodes\/new","methods":["GET","HEAD"],"domain":null},"admin.nodes.view":{"uri":"admin\/nodes\/view\/{node}","methods":["GET","HEAD"],"domain":null},"admin.nodes.view.settings":{"uri":"admin\/nodes\/view\/{node}\/settings","methods":["GET","HEAD"],"domain":null},"admin.nodes.view.configuration":{"uri":"admin\/nodes\/view\/{node}\/configuration","methods":["GET","HEAD"],"domain":null},"admin.nodes.view.allocation":{"uri":"admin\/nodes\/view\/{node}\/allocation","methods":["GET","HEAD"],"domain":null},"admin.nodes.view.servers":{"uri":"admin\/nodes\/view\/{node}\/servers","methods":["GET","HEAD"],"domain":null},"admin.nodes.view.configuration.token":{"uri":"admin\/nodes\/view\/{node}\/settings\/token","methods":["GET","HEAD"],"domain":null},"admin.nodes.view.allocation.removeBlock":{"uri":"admin\/nodes\/view\/{node}\/allocation\/remove","methods":["POST"],"domain":null},"admin.nodes.view.allocation.setAlias":{"uri":"admin\/nodes\/view\/{node}\/allocation\/alias","methods":["POST"],"domain":null},"admin.nodes.view.delete":{"uri":"admin\/nodes\/view\/{node}\/delete","methods":["DELETE"],"domain":null},"admin.nodes.view.allocation.removeSingle":{"uri":"admin\/nodes\/view\/{node}\/allocation\/remove\/{allocation}","methods":["DELETE"],"domain":null},"admin.nests":{"uri":"admin\/nests","methods":["GET","HEAD"],"domain":null},"admin.nests.new":{"uri":"admin\/nests\/new","methods":["GET","HEAD"],"domain":null},"admin.nests.view":{"uri":"admin\/nests\/view\/{nest}","methods":["GET","HEAD"],"domain":null},"admin.nests.egg.new":{"uri":"admin\/nests\/egg\/new","methods":["GET","HEAD"],"domain":null},"admin.nests.egg.view":{"uri":"admin\/nests\/egg\/{egg}","methods":["GET","HEAD"],"domain":null},"admin.nests.egg.export":{"uri":"admin\/nests\/egg\/{egg}\/export","methods":["GET","HEAD"],"domain":null},"admin.nests.egg.variables":{"uri":"admin\/nests\/egg\/{egg}\/variables","methods":["GET","HEAD"],"domain":null},"admin.nests.egg.scripts":{"uri":"admin\/nests\/egg\/{egg}\/scripts","methods":["GET","HEAD"],"domain":null},"admin.nests.egg.import":{"uri":"admin\/nests\/import","methods":["POST"],"domain":null},"admin.nests.egg.variables.edit":{"uri":"admin\/nests\/egg\/{egg}\/variables\/{variable}","methods":["PATCH"],"domain":null},"admin.packs":{"uri":"admin\/packs","methods":["GET","HEAD"],"domain":null},"admin.packs.new":{"uri":"admin\/packs\/new","methods":["GET","HEAD"],"domain":null},"admin.packs.new.template":{"uri":"admin\/packs\/new\/template","methods":["GET","HEAD"],"domain":null},"admin.packs.view":{"uri":"admin\/packs\/view\/{pack}","methods":["GET","HEAD"],"domain":null},"admin.packs.view.export":{"uri":"admin\/packs\/view\/{pack}\/export\/{files?}","methods":["POST"],"domain":null},"auth.login":{"uri":"auth\/login","methods":["GET","HEAD"],"domain":null},"auth.totp":{"uri":"auth\/login\/totp","methods":["GET","HEAD"],"domain":null},"auth.password":{"uri":"auth\/password","methods":["GET","HEAD"],"domain":null},"auth.reset":{"uri":"auth\/password\/reset\/{token}","methods":["GET","HEAD"],"domain":null},"auth.reset.post":{"uri":"auth\/password\/reset","methods":["POST"],"domain":null},"auth.logout":{"uri":"auth\/logout","methods":["GET","HEAD"],"domain":null},"server.index":{"uri":"server\/{server}","methods":["GET","HEAD"],"domain":null},"server.console":{"uri":"server\/{server}\/console","methods":["GET","HEAD"],"domain":null},"server.settings.allocation":{"uri":"server\/{server}\/settings\/allocation","methods":["GET","HEAD"],"domain":null},"server.settings.name":{"uri":"server\/{server}\/settings\/name","methods":["GET","HEAD"],"domain":null},"server.settings.sftp":{"uri":"server\/{server}\/settings\/sftp","methods":["GET","HEAD"],"domain":null},"server.settings.startup":{"uri":"server\/{server}\/settings\/startup","methods":["GET","HEAD"],"domain":null},"server.databases.index":{"uri":"server\/{server}\/databases","methods":["GET","HEAD"],"domain":null},"server.databases.new":{"uri":"server\/{server}\/databases\/new","methods":["POST"],"domain":null},"server.databases.password":{"uri":"server\/{server}\/databases\/password","methods":["PATCH"],"domain":null},"server.databases.delete":{"uri":"server\/{server}\/databases\/delete\/{database}","methods":["DELETE"],"domain":null},"server.files.index":{"uri":"server\/{server}\/files","methods":["GET","HEAD"],"domain":null},"server.files.add":{"uri":"server\/{server}\/files\/add","methods":["GET","HEAD"],"domain":null},"server.files.edit":{"uri":"server\/{server}\/files\/download\/{file}","methods":["GET","HEAD"],"domain":null},"server.files.directory-list":{"uri":"server\/{server}\/files\/directory-list","methods":["POST"],"domain":null},"server.files.save":{"uri":"server\/{server}\/files\/save","methods":["POST"],"domain":null},"server.subusers":{"uri":"server\/{server}\/users","methods":["GET","HEAD"],"domain":null},"server.subusers.new":{"uri":"server\/{server}\/users\/new","methods":["GET","HEAD"],"domain":null},"server.subusers.view":{"uri":"server\/{server}\/users\/view\/{subuser}","methods":["GET","HEAD"],"domain":null},"server.schedules":{"uri":"server\/{server}\/schedules","methods":["GET","HEAD"],"domain":null},"server.schedules.new":{"uri":"server\/{server}\/schedules\/new","methods":["GET","HEAD"],"domain":null},"server.schedules.view":{"uri":"server\/{server}\/schedules\/view\/{schedule}","methods":["GET","HEAD"],"domain":null},"server.schedules.toggle":{"uri":"server\/{server}\/schedules\/view\/{schedule}\/toggle","methods":["POST"],"domain":null},"server.schedules.trigger":{"uri":"server\/{server}\/schedules\/view\/{schedule}\/trigger","methods":["POST"],"domain":null},"api.application.users":{"uri":"api\/application\/users","methods":["GET","HEAD"],"domain":null},"api.application.users.view":{"uri":"api\/application\/users\/{user}","methods":["GET","HEAD"],"domain":null},"api.application.users.external":{"uri":"api\/application\/users\/external\/{external_id}","methods":["GET","HEAD"],"domain":null},"api.application.nodes":{"uri":"api\/application\/nodes","methods":["GET","HEAD"],"domain":null},"api.application.nodes.view":{"uri":"api\/application\/nodes\/{node}","methods":["GET","HEAD"],"domain":null},"api.application.allocations":{"uri":"api\/application\/nodes\/{node}\/allocations","methods":["GET","HEAD"],"domain":null},"api.application.allocations.view":{"uri":"api\/application\/nodes\/{node}\/allocations\/{allocation}","methods":["DELETE"],"domain":null},"api.applications.locations":{"uri":"api\/application\/locations","methods":["GET","HEAD"],"domain":null},"api.application.locations.view":{"uri":"api\/application\/locations\/{location}","methods":["GET","HEAD"],"domain":null},"api.application.servers":{"uri":"api\/application\/servers","methods":["GET","HEAD"],"domain":null},"api.application.servers.view":{"uri":"api\/application\/servers\/{server}","methods":["GET","HEAD"],"domain":null},"api.application.servers.external":{"uri":"api\/application\/servers\/external\/{external_id}","methods":["GET","HEAD"],"domain":null},"api.application.servers.details":{"uri":"api\/application\/servers\/{server}\/details","methods":["PATCH"],"domain":null},"api.application.servers.build":{"uri":"api\/application\/servers\/{server}\/build","methods":["PATCH"],"domain":null},"api.application.servers.startup":{"uri":"api\/application\/servers\/{server}\/startup","methods":["PATCH"],"domain":null},"api.application.servers.suspend":{"uri":"api\/application\/servers\/{server}\/suspend","methods":["POST"],"domain":null},"api.application.servers.unsuspend":{"uri":"api\/application\/servers\/{server}\/unsuspend","methods":["POST"],"domain":null},"api.application.servers.reinstall":{"uri":"api\/application\/servers\/{server}\/reinstall","methods":["POST"],"domain":null},"api.application.servers.rebuild":{"uri":"api\/application\/servers\/{server}\/rebuild","methods":["POST"],"domain":null},"api.application.servers.databases":{"uri":"api\/application\/servers\/{server}\/databases","methods":["GET","HEAD"],"domain":null},"api.application.servers.databases.view":{"uri":"api\/application\/servers\/{server}\/databases\/{database}","methods":["GET","HEAD"],"domain":null},"api.application.nests":{"uri":"api\/application\/nests","methods":["GET","HEAD"],"domain":null},"api.application.nests.view":{"uri":"api\/application\/nests\/{nest}","methods":["GET","HEAD"],"domain":null},"api.application.nests.eggs":{"uri":"api\/application\/nests\/{nest}\/eggs","methods":["GET","HEAD"],"domain":null},"api.application.nests.eggs.view":{"uri":"api\/application\/nests\/{nest}\/eggs\/{egg}","methods":["GET","HEAD"],"domain":null},"api.client.index":{"uri":"api\/client","methods":["GET","HEAD"],"domain":null},"api.client.servers.view":{"uri":"api\/client\/servers\/{server}","methods":["GET","HEAD"],"domain":null},"api.client.servers.resources":{"uri":"api\/client\/servers\/{server}\/utilization","methods":["GET","HEAD"],"domain":null},"api.client.servers.command":{"uri":"api\/client\/servers\/{server}\/command","methods":["POST"],"domain":null},"api.client.servers.power":{"uri":"api\/client\/servers\/{server}\/power","methods":["POST"],"domain":null},"api.remote.authenticate":{"uri":"api\/remote\/authenticate\/{token}","methods":["GET","HEAD"],"domain":null},"api.remote.download_file":{"uri":"api\/remote\/download-file","methods":["POST"],"domain":null},"api.remote.eggs":{"uri":"api\/remote\/eggs","methods":["GET","HEAD"],"domain":null},"api.remote.eggs.download":{"uri":"api\/remote\/eggs\/{uuid}","methods":["GET","HEAD"],"domain":null},"api.remote.scripts":{"uri":"api\/remote\/scripts\/{uuid}","methods":["GET","HEAD"],"domain":null},"api.remote.sftp":{"uri":"api\/remote\/sftp","methods":["POST"],"domain":null},"daemon.pack.pull":{"uri":"daemon\/packs\/pull\/{uuid}","methods":["GET","HEAD"],"domain":null},"daemon.pack.hash":{"uri":"daemon\/packs\/pull\/{uuid}\/hash","methods":["GET","HEAD"],"domain":null},"daemon.configuration":{"uri":"daemon\/configure\/{token}","methods":["GET","HEAD"],"domain":null},"daemon.install":{"uri":"daemon\/install","methods":["POST"],"domain":null}}'),
+        baseUrl: 'http://pterodactyl.local/',
+        baseProtocol: 'http',
+        baseDomain: 'pterodactyl.local',
+        basePort: false
+    };
+
+    export {
+        Ziggy
+    }
diff --git a/resources/assets/pterodactyl/styles/components/animations.css b/resources/assets/pterodactyl/styles/components/animations.css
new file mode 100644
index 000000000..cac2b2474
--- /dev/null
+++ b/resources/assets/pterodactyl/styles/components/animations.css
@@ -0,0 +1,10 @@
+.animate {
+  &.fadein {
+    animation: fadein 500ms;
+  }
+}
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
diff --git a/resources/assets/pterodactyl/styles/components/authentication.css b/resources/assets/pterodactyl/styles/components/authentication.css
new file mode 100644
index 000000000..9faacff67
--- /dev/null
+++ b/resources/assets/pterodactyl/styles/components/authentication.css
@@ -0,0 +1,37 @@
+.input-open {
+  @apply .w-full .px-3 .relative;
+}
+
+.input-open > .input {
+  @apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3;
+
+  &:focus {
+    @apply .border-blue;
+    outline: 0;
+    transition: border 500ms ease-out;
+  }
+
+  &:focus + label, &:valid + label {
+    @apply .text-grey-darker .px-0 .cursor-pointer;
+    transform:translateY(-24px)
+  }
+
+  &:invalid + label {
+    @apply .text-grey .px-1;
+    transform:translateY(0)
+  }
+
+  &:required {
+    box-shadow: none;
+  }
+}
+
+.input-open > label {
+  @apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute .px-1;
+  top: 14px;
+  transition: transform 200ms ease-out;
+}
+
+.login-box {
+  @apply .bg-white .shadow-lg .rounded-lg .pt-10 .px-8 .pb-6 .mb-4;
+}
diff --git a/resources/assets/pterodactyl/styles/main.css b/resources/assets/pterodactyl/styles/main.css
new file mode 100644
index 000000000..70c60947f
--- /dev/null
+++ b/resources/assets/pterodactyl/styles/main.css
@@ -0,0 +1,23 @@
+/**
+ * Tailwind Preflight Classes
+ */
+@import "tailwindcss/preflight";
+@import "tailwindcss/components";
+
+/**
+ * Pterodactyl Specific CSS
+ */
+@import "components/animations.css";
+@import "components/authentication.css";
+
+/**
+ * Tailwind Utilities
+ */
+@import "tailwindcss/utilities";
+
+/**
+ * Assorted Other CSS
+ */
+body {
+  @apply .font-sans;
+}
diff --git a/resources/themes/pterodactyl/auth/login.blade.php b/resources/themes/pterodactyl/auth/login.blade.php
index e81af8d31..9d14992a3 100644
--- a/resources/themes/pterodactyl/auth/login.blade.php
+++ b/resources/themes/pterodactyl/auth/login.blade.php
@@ -3,73 +3,73 @@
 
 {{-- This software is licensed under the terms of the MIT license. --}}
 {{-- https://opensource.org/licenses/MIT --}}
-@extends('layouts.auth')
+@extends('templates/auth.core')
 
 @section('title')
     Login
 @endsection
 
-@section('content')
-<div class="row">
-    <div class="col-sm-offset-3 col-xs-offset-1 col-sm-6 col-xs-10">
-        @if (count($errors) > 0)
-            <div class="alert alert-danger">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                @lang('auth.auth_error')<br><br>
-                <ul>
-                    @foreach ($errors->all() as $error)
-                        <li>{{ $error }}</li>
-                    @endforeach
-                </ul>
-            </div>
-        @endif
-        @foreach (Alert::getMessages() as $type => $messages)
-            @foreach ($messages as $message)
-                <div class="callout callout-{{ $type }} alert-dismissable" role="alert">
-                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    {!! $message !!}
-                </div>
-            @endforeach
-        @endforeach
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-offset-3 col-xs-offset-1 col-sm-6 col-xs-10 pterodactyl-login-box">
-        <form id="loginForm" action="{{ route('auth.login') }}" method="POST">
-            <div class="form-group has-feedback">
-                <div class="pterodactyl-login-input">
-                    <input type="text" name="user" class="form-control input-lg" value="{{ old('user') }}" required placeholder="@lang('strings.user_identifier')" autofocus>
-                    <span class="fa fa-envelope form-control-feedback fa-lg"></span>
-                </div>
-            </div>
-            <div class="form-group has-feedback">
-                <div class="pterodactyl-login-input">
-                    <input type="password" name="password" class="form-control input-lg" required placeholder="@lang('strings.password')">
-                    <span class="fa fa-lock form-control-feedback fa-lg"></span>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-xs-4">
-                    <a href="{{ route('auth.password') }}"><button type="button" class="btn pterodactyl-login-button--left"><i class="fa fa-life-ring"></i></button></a>
-                </div>
-                <div class="col-xs-offset-4 col-xs-4">
-                    {!! csrf_field() !!}
-                    <button type="submit" class="btn btn-block g-recaptcha pterodactyl-login-button--main" @if(config('recaptcha.enabled')) data-sitekey="{{ config('recaptcha.website_key') }}" data-callback='onSubmit' @endif>@lang('auth.sign_in')</button>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
-@endsection
+{{--@section('content')--}}
+{{--<div class="row">--}}
+    {{--<div class="col-sm-offset-3 col-xs-offset-1 col-sm-6 col-xs-10">--}}
+        {{--@if (count($errors) > 0)--}}
+            {{--<div class="alert alert-danger">--}}
+                {{--<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>--}}
+                {{--@lang('auth.auth_error')<br><br>--}}
+                {{--<ul>--}}
+                    {{--@foreach ($errors->all() as $error)--}}
+                        {{--<li>{{ $error }}</li>--}}
+                    {{--@endforeach--}}
+                {{--</ul>--}}
+            {{--</div>--}}
+        {{--@endif--}}
+        {{--@foreach (Alert::getMessages() as $type => $messages)--}}
+            {{--@foreach ($messages as $message)--}}
+                {{--<div class="callout callout-{{ $type }} alert-dismissable" role="alert">--}}
+                    {{--<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>--}}
+                    {{--{!! $message !!}--}}
+                {{--</div>--}}
+            {{--@endforeach--}}
+        {{--@endforeach--}}
+    {{--</div>--}}
+{{--</div>--}}
+{{--<div class="row">--}}
+    {{--<div class="col-sm-offset-3 col-xs-offset-1 col-sm-6 col-xs-10 pterodactyl-login-box">--}}
+        {{--<form id="loginForm" action="{{ route('auth.login') }}" method="POST">--}}
+            {{--<div class="form-group has-feedback">--}}
+                {{--<div class="pterodactyl-login-input">--}}
+                    {{--<input type="text" name="user" class="form-control input-lg" value="{{ old('user') }}" required placeholder="@lang('strings.user_identifier')" autofocus>--}}
+                    {{--<span class="fa fa-envelope form-control-feedback fa-lg"></span>--}}
+                {{--</div>--}}
+            {{--</div>--}}
+            {{--<div class="form-group has-feedback">--}}
+                {{--<div class="pterodactyl-login-input">--}}
+                    {{--<input type="password" name="password" class="form-control input-lg" required placeholder="@lang('strings.password')">--}}
+                    {{--<span class="fa fa-lock form-control-feedback fa-lg"></span>--}}
+                {{--</div>--}}
+            {{--</div>--}}
+            {{--<div class="row">--}}
+                {{--<div class="col-xs-4">--}}
+                    {{--<a href="{{ route('auth.password') }}"><button type="button" class="btn pterodactyl-login-button--left"><i class="fa fa-life-ring"></i></button></a>--}}
+                {{--</div>--}}
+                {{--<div class="col-xs-offset-4 col-xs-4">--}}
+                    {{--{!! csrf_field() !!}--}}
+                    {{--<button type="submit" class="btn btn-block g-recaptcha pterodactyl-login-button--main" @if(config('recaptcha.enabled')) data-sitekey="{{ config('recaptcha.website_key') }}" data-callback='onSubmit' @endif>@lang('auth.sign_in')</button>--}}
+                {{--</div>--}}
+            {{--</div>--}}
+        {{--</form>--}}
+    {{--</div>--}}
+{{--</div>--}}
+{{--@endsection--}}
 
-@section('scripts')
-    @parent
-    @if(config('recaptcha.enabled'))
-        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
-        <script>
-        function onSubmit(token) {
-            document.getElementById("loginForm").submit();
-        }
-        </script>
-     @endif
-@endsection
+{{--@section('scripts')--}}
+    {{--@parent--}}
+    {{--@if(config('recaptcha.enabled'))--}}
+        {{--<script src="https://www.google.com/recaptcha/api.js" async defer></script>--}}
+        {{--<script>--}}
+        {{--function onSubmit(token) {--}}
+            {{--document.getElementById("loginForm").submit();--}}
+        {{--}--}}
+        {{--</script>--}}
+     {{--@endif--}}
+{{--@endsection--}}
diff --git a/resources/themes/pterodactyl/templates/auth/core.blade.php b/resources/themes/pterodactyl/templates/auth/core.blade.php
new file mode 100644
index 000000000..a76d4e599
--- /dev/null
+++ b/resources/themes/pterodactyl/templates/auth/core.blade.php
@@ -0,0 +1,34 @@
+<html>
+    <head>
+        <title>{{ config('app.name', 'Pterodactyl') }} - @yield('title')</title>
+
+        @section('meta')
+            <meta charset="utf-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge">
+            <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+            <meta name="csrf-token" content="{{ csrf_token() }}">
+        @show
+
+        @section('assets')
+            {!! $asset->css('assets/css/bundle.css') !!}
+        @show
+
+        @include('layouts.scripts')
+    </head>
+    <body class="bg-grey-darkest">
+        <div class="container" id="pterodactyl">
+            <div class="w-full max-w-xs sm:max-w-sm m-auto mt-8">
+                <div class="text-center">
+                    <img src="/favicons/android-chrome-512x512.png" class="max-w-xxs">
+                </div>
+                <router-view></router-view>
+                <p class="text-center text-grey text-xs">
+                    &copy; 2015 - {{ date('Y') }} Pterodactyl Software
+                </p>
+            </div>
+        </div>
+        @section('scripts')
+            {!! $asset->js('assets/scripts/bundle.js') !!}
+        @show
+    </body>
+</html>