diff --git a/css/auth.css b/css/auth.css
new file mode 100644
index 0000000000000000000000000000000000000000..0f20a83e97f00fdbab483dae4e7ad266c1ef2c46
--- /dev/null
+++ b/css/auth.css
@@ -0,0 +1,163 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ color: #02702C;
+}
+
+.apps {
+ margin-top: 200px;
+ width: 380px;
+ height: 440px;
+ margin: 0 auto;
+ background: #8BBD3C;
+ border: 10px solid #02702C;
+ border-radius: 60px;
+}
+
+.form-heading {
+ margin: 0 auto;
+ display: flex;
+}
+
+.heading-left {
+ display: inline-block;
+ width: 25%;
+ padding: 45px 15px 45px 25px;
+}
+
+.heading-right {
+ display: inline-block;
+ width: 25%;
+ padding: 45px 25px 45px 15px;
+}
+
+.heading-title {
+ width: 40%;
+ padding: 5px;
+ text-align: center;
+ margin: auto;
+ font-size: 2.3em;
+ font-weight: 700;
+ line-height: 30px;
+ transform: scaleY(1.6);
+}
+
+
+.heading-left hr, .heading-right hr {
+ display: block;
+ height: 2px;
+ border: 0;
+ border-top: 2px solid #02702C;
+ margin: 0;
+ padding: 0 5px;
+}
+
+.form-login {
+ margin-top: 60px;
+ padding: 0 20px;
+ font-size: 1.5em;
+}
+
+.form-login .form-group {
+ margin-bottom: 10px;
+}
+
+.form-login .form-group label {
+ width: 30%;
+ display: inline-block;
+}
+
+.form-login .form-group input {
+ width: 60%;
+}
+
+.form-login .form-group input[type=text], .form-login .form-group input[type=password] {
+ height: 30px;
+ border: 1px solid black;
+ margin-left: 15px;
+ padding-left: 10px;
+}
+
+.form-login .action {
+ margin-top: 45px;
+}
+
+.form-login .action .register {
+ float: left;
+}
+
+.form-login .action .register a {
+ font-size: 0.6em;
+ color: #453333;
+}
+
+.form-login .action .submit {
+ float: right;
+}
+
+.form-login .action .submit input[type=submit] {
+ padding: 4px 28px;
+ background: #82D800;
+ border: 3px solid black;
+ font-family: 'Roboto', sans-serif;
+ font-size: 1em;
+ color: #453333;
+ border-radius: 10px;
+ width: 100%;
+}
+
+.form-signup {
+ padding: 0 10px;
+ font-size: 1em;
+}
+
+.form-signup .form-group {
+ margin-bottom: 3px;
+}
+
+.form-signup .form-group label {
+ width: 40%;
+ display: inline-block;
+}
+
+.form-signup .form-group input {
+ width: 53%;
+}
+
+.form-signup .form-group input[type=text], .form-signup .form-group input[type=password] {
+ height: 23px;
+ border: 1px solid black;
+ padding-left: 10px;
+}
+
+.form-signup input[type=checkbox] {
+ margin-top: 15px;
+}
+
+.form-signup .action {
+ margin-top: 30px;
+}
+
+.form-signup .action .login {
+ float: left;
+}
+
+.form-signup .action .login a {
+ font-size: 0.8em;
+ color: #453333;
+}
+
+.form-signup .action .submit {
+ float: right;
+ margin-right: 10px;
+}
+
+.form-signup .action .submit input[type=submit] {
+ padding: 10px 5px;
+ background: #82D800;
+ border: 3px solid black;
+ font-family: 'Roboto', sans-serif;
+ font-size: 1em;
+ color: #453333;
+ border-radius: 10px;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/login.html b/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..4f0435725d77138f9a6f088dc5a153c660f1ba67
--- /dev/null
+++ b/login.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Halaman Login</title>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+ <link rel="stylesheet" href="css/auth.css">
+ </head>
+ <body>
+ <div class="apps">
+ <div class="form-heading">
+ <div class="heading-left">
+ <hr>
+ </div>
+ <div class="heading-title">
+ LOGIN
+ </div>
+ <div class="heading-right">
+ <hr>
+ </div>
+ </div>
+ <div class="form-login">
+ <form action="login.php" method="POST">
+ <div class="form-group">
+ <label for="username">Username </label>
+ <input id="username" type="text" name="username" placeholder="your username" required>
+ </div>
+ <div class="form-group">
+ <label for="password">Password </label>
+ <input id="password" type="password" name="password" placeholder="your password" pattern=".{5,10}" title="5 to 10 characters" required>
+ </div>
+ <div class="action">
+ <div class="register">
+ <a href="#">Don't have an account ?</a>
+ </div>
+ <div class="submit">
+ <input type="submit" value="GO!">
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </body>
+</html>