diff --git a/admin_app/auth/index.html b/admin_app/auth/index.html
index b40b6eafc63919da11b5e9ad889a43d0966c5945..87a1f98702c1bcf7534a2e319ea0deb6a209b0d6 100644
--- a/admin_app/auth/index.html
+++ b/admin_app/auth/index.html
@@ -1,3 +1,5 @@
+<!DOCTYPE html>
+
<html lang="en">
<head>
@@ -5,11 +7,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Krustacea | Admin dashboard</title>
+ <link rel="stylesheet" href="/admin_app/style.css">
</head>
<body>
ADMIN Dahsboard
</body>
-<script src='/assets/default/admin.js'></script>
+<script src="/admin_app/auth/index.js"></script>
</html>
\ No newline at end of file
diff --git a/admin_app/auth/index.js b/admin_app/auth/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb44693122d45adb20e96f64448ab6a46db45a48
--- /dev/null
+++ b/admin_app/auth/index.js
@@ -0,0 +1 @@
+console.log("Admin board")
\ No newline at end of file
diff --git a/admin_app/login/index.html b/admin_app/login/index.html
index 8ebf4040b0991f6c4f24d84be47652aa5e6dbcbf..52bdbedadf08aa714487593bd1617edb14dfef99 100644
--- a/admin_app/login/index.html
+++ b/admin_app/login/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
<html lang='en' prefix='og: https://ogp.me/ns#'>
<head>
@@ -5,22 +6,22 @@
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Krustacea - Admin Login</title>
- <link rel='stylesheet' href='/assets/default/admin.css'>
+ <link rel="stylesheet" href="/admin_app/style.css">
</head>
<body>
<form id='admin-login-form'>
- <div>
+ <div class="input-group">
<label for='username'>Admin Id</label>
<input type='text' name='username' />
</div>
- <div>
+ <div class="input-group">
<label for='password'>Password</label>
<input type='password' name='password' />
</div>
- <input type='submit' />
+ <input type='submit' value="Login" />
</form>
</body>
-<script src='/assets/default/admin.js'></script>
+<script src='/admin_app/login/index.js'></script>
</html>
\ No newline at end of file
diff --git a/admin_app/login/index.js b/admin_app/login/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ed73214f5ba4faf2edcd4b4e0e7bd16815a04cba
--- /dev/null
+++ b/admin_app/login/index.js
@@ -0,0 +1,11 @@
+document.getElementById("admin-login-form").onsubmit = function (e) {
+ e.preventDefault();
+ fetch('/admin/login', { method: "POST", body: new URLSearchParams(new FormData(e.target)) }).then(res => {
+ if (res.status >= 200 && res.status < 400) {
+ window.location = "/admin_app/auth/";
+ } else {
+ e.target.classList.add("error");
+ }
+
+ }).catch(err => console.log(err))
+}
\ No newline at end of file
diff --git a/admin_app/style.css b/admin_app/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..f2ad173a36fd5d05ad3b54f24d5f210b84aba355
--- /dev/null
+++ b/admin_app/style.css
@@ -0,0 +1,55 @@
+*+* {
+ box-sizing: border-box;
+ font-family: Lato, Arial, Helvetica, sans-serif
+}
+
+body {
+ margin: 0;
+}
+
+#admin-login-form {
+ display: grid;
+ width: 340px;
+ gap: 20px;
+ padding: 40px;
+ background-color: #c2ccd5;
+ position: relative;
+ margin: 0 auto;
+ top: 100px;
+}
+
+#admin-login-form.error {
+ box-shadow: 0 0 6px rgb(158, 42, 7);
+}
+
+#admin-login-form>.input-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+#admin-login-form>.input-group>input {
+ padding: 4px;
+ flex: 1;
+}
+
+#admin-login-form>.input-group>label {
+ padding: 4px;
+ font-weight: bold;
+ color: #444;
+ width: 100px;
+}
+
+#admin-login-form>input[type=submit] {
+ padding: 10px;
+ color: #ddd;
+ background-color: #657583;
+ border: none;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+#admin-login-form>input[type=submit]:hover {
+ color: white;
+ background-color: #444c53;
+}
\ No newline at end of file
diff --git a/default_assets/admin.css b/default_assets/admin.css
deleted file mode 100644
index 97d8b53016122bcd0904085a79045feae1845105..0000000000000000000000000000000000000000
--- a/default_assets/admin.css
+++ /dev/null
@@ -1,18 +0,0 @@
-*+* {
- box-sizing: border-box;
- font-family: Lato, Arial, Helvetica, sans-serif
-}
-
-body {
- margin: 0;
-}
-
-#admin-login-form {
- display: grid;
- width: 300px;
- gap: 20px;
-}
-
-#admin-login-form input {
- padding: 4px;
-}
\ No newline at end of file
diff --git a/default_assets/admin.js b/default_assets/admin.js
deleted file mode 100644
index 0b482136fb0f42419a456398d53579c2f885f08d..0000000000000000000000000000000000000000
--- a/default_assets/admin.js
+++ /dev/null
@@ -1,10 +0,0 @@
-document.getElementById('admin-login-form').onsubmit = function (e) {
- e.preventDefault();
- fetch('/admin/login', { method: 'POST', body: new URLSearchParams(new FormData(e.target)) }).then(res => {
- if (res.status >= 200 && res.status < 400) {
- console.log(res)
- window.location = '/admin_app/auth/';
- }
-
- }).catch(err => console.log(err))
-}
\ No newline at end of file