diff --git a/_templates/_head.php b/_templates/_head.php
new file mode 100644
index 0000000000000000000000000000000000000000..b851178e56e72d5519269e629021b57f453b584e
--- /dev/null
+++ b/_templates/_head.php
@@ -0,0 +1,18 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="Selfmade Ninja Academy">
+    <meta name="generator" content="Hugo 0.88.1">
+    <title>Login to Photogram</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="/app/assets/dist/css/bootstrap.min.css" rel="stylesheet">
+    <title>Photogram by LAHTP</title>
+    <?if (file_exists($_SERVER['DOCUMENT_ROOT'].'/app/css/'.basename($_SERVER['PHP_SELF'], ".php").".css")) {?>
+    <link
+        href="/app/css/<?=basename($_SERVER['PHP_SELF'], ".php")?>.css"
+        rel="stylesheet">
+    <?}?>
+
+</head>
\ No newline at end of file
diff --git a/_templates/_header.php b/_templates/_header.php
index 5249e3971ea0c39cceb7dad438034db86ea551ce..e8805a113fbf03800306b8150eaa5130b358e167 100644
--- a/_templates/_header.php
+++ b/_templates/_header.php
@@ -1,11 +1,41 @@
-<div class="navbar navbar-dark bg-dark shadow-sm">
-    <div class="container">
-      <a href="#" class="navbar-brand d-flex align-items-center">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
-        <strong>Album</strong>
-      </a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-    </div>
-  </div>
\ No newline at end of file
+<header>
+	<div class="collapse bg-dark" id="navbarHeader">
+		<div class="container">
+			<div class="row">
+				<div class="col-sm-8 col-md-7 py-4">
+					<h4 class="text-white">About</h4>
+					<p class="text-muted">Add some information about the album below, the author, or any other
+						background
+						context. Make it a few sentences long so folks can pick up some informative tidbits. Then,
+						link them off
+						to some social networking sites or contact information.</p>
+				</div>
+				<div class="col-sm-4 offset-md-1 py-4">
+					<h4 class="text-white">Contact</h4>
+					<ul class="list-unstyled">
+						<li><a href="#" class="text-white">Follow on Twitter</a></li>
+						<li><a href="#" class="text-white">Like on Facebook</a></li>
+						<li><a href="#" class="text-white">Email me</a></li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="navbar navbar-dark bg-dark shadow-sm">
+		<div class="container">
+			<a href="#" class="navbar-brand d-flex align-items-center">
+				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
+					stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2"
+					viewBox="0 0 24 24">
+					<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+					<circle cx="12" cy="13" r="4" />
+				</svg>
+				<strong>Album</strong>
+			</a>
+			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
+				aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+				<span class="navbar-toggler-icon"></span>
+			</button>
+		</div>
+	</div>
+</header>
\ No newline at end of file
diff --git a/_templates/_signup.php b/_templates/_signup.php
new file mode 100644
index 0000000000000000000000000000000000000000..dacf04a2ac67cbdc09cc312af29884991a43fe5b
--- /dev/null
+++ b/_templates/_signup.php
@@ -0,0 +1,67 @@
+<?php
+
+$signup = false;
+if (isset($_POST['username']) and isset($_POST['password']) and isset($_POST['email_address']) and isset($_POST['phone'])) {
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+    $email = $_POST['email_address'];
+    $phone = $_POST['phone'];
+    $error = signup($username, $password, $email, $phone);
+    $signup = true;
+}
+?>
+
+<?php
+    if ($signup) {
+        if (!$error) {
+            ?>
+<main class="container">
+    <div class="bg-light p-5 rounded mt-3">
+        <h1>Signup Success</h1>
+        <p class="lead">Now you can login from <a href="/login.php">here</a>.</p>
+
+    </div>
+</main>
+<?php
+        } else {
+            ?>
+<main class="container">
+    <div class="bg-light p-5 rounded mt-3">
+        <h1>Signup Fail</h1>
+        <p class="lead">Something went wrong, <?=$error?>
+        </p>
+    </div>
+</main>
+<?php
+        }
+    } else {
+        ?>
+<main class="form-signup">
+    <form method="post" action="signup.php">
+        <img class="mb-4" src="https://git.selfmade.ninja/uploads/-/system/appearance/logo/1/Logo_Dark.png" alt=""
+            height="50">
+        <h1 class="h3 mb-3 fw-normal">Signup here</h1>
+        <div class="form-floating">
+            <input name="username" type="text" class="form-control" id="floatingInputUsername"
+                placeholder="name@example.com">
+            <label for="floatingInputUsername">Username</label>
+        </div>
+        <div class="form-floating">
+            <input name="phone" type="text" class="form-control" id="floatingInputUsername"
+                placeholder="name@example.com">
+            <label for="floatingInputUsername">Phone</label>
+        </div>
+        <div class="form-floating">
+            <input name="email_address" type="email" class="form-control" id="floatingInput"
+                placeholder="name@example.com">
+            <label for="floatingInput">Email address</label>
+        </div>
+        <div class="form-floating">
+            <input name="password" type="password" class="form-control" id="floatingPassword" placeholder="Password">
+            <label for="floatingPassword">Password</label>
+        </div>
+        <button class="w-100 btn btn-lg btn-primary hvr-grow-rotate" type="submit">Sign up</button>
+    </form>
+</main>
+<?php
+    }
diff --git a/css/login.css b/css/login.css
new file mode 100644
index 0000000000000000000000000000000000000000..2d386d2922bd744957f7c774709aa37a0467727c
--- /dev/null
+++ b/css/login.css
@@ -0,0 +1,34 @@
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.form-signin {
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+}
+
+.form-signin .checkbox {
+    font-weight: 400;
+}
+
+.form-signin .form-floating:focus-within {
+    z-index: 2;
+}
+
+.form-signin input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
\ No newline at end of file
diff --git a/css/signup.css b/css/signup.css
new file mode 100644
index 0000000000000000000000000000000000000000..9267f4835ffb06c5cd3bac20952121321c485da0
--- /dev/null
+++ b/css/signup.css
@@ -0,0 +1,50 @@
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.form-signup {
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+}
+
+.form-signup .checkbox {
+    font-weight: 400;
+}
+
+.form-signup .form-floating:focus-within {
+    z-index: 2;
+}
+
+.form-signup input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.form-signup input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.form-signup input[name="phone"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.form-signup input[name="username"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index 38077b2fd124a0ca28a8c03766b68bc91e6bc84d..7e218f32c6b0e336b973185ce96023b09a9cf618 100644
--- a/index.php
+++ b/index.php
@@ -6,61 +6,11 @@ include 'libs/load.php';
 
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <meta name="author" content="Selfmade Ninja Academy">
-    <meta name="generator" content="Hugo 0.88.1">
-    <title>Photogram by LAHTP</title>
-
-    <!-- Bootstrap core CSS -->
-    <link href="/app/assets/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        .bd-placeholder-img {
-            font-size: 1.125rem;
-            text-anchor: middle;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            user-select: none;
-        }
-
-        @media (min-width: 768px) {
-            .bd-placeholder-img-lg {
-                font-size: 3.5rem;
-            }
-        }
-    </style>
-</head>
+<?load_template('_head');?>
 
 <body>
 
-    <header>
-        <div class="collapse bg-dark" id="navbarHeader">
-            <div class="container">
-                <div class="row">
-                    <div class="col-sm-8 col-md-7 py-4">
-                        <h4 class="text-white">About</h4>
-                        <p class="text-muted">Add some information about the album below, the author, or any other
-                            background
-                            context. Make it a few sentences long so folks can pick up some informative tidbits. Then,
-                            link them off
-                            to some social networking sites or contact information.</p>
-                    </div>
-                    <div class="col-sm-4 offset-md-1 py-4">
-                        <h4 class="text-white">Contact</h4>
-                        <ul class="list-unstyled">
-                            <li><a href="#" class="text-white">Follow on Twitter</a></li>
-                            <li><a href="#" class="text-white">Like on Facebook</a></li>
-                            <li><a href="#" class="text-white">Email me</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <?load_template('_header');?>
-    </header>
+    <?load_template('_header');?>
     <main>
 
         <?load_template('_calltoaction');?>
diff --git a/libs/load.php b/libs/load.php
index 2546d20245f98ac87a395e84d62ab8127ec71a9e..d7e8ec0d1199863d5e00c5d1280656d2a0688031 100644
--- a/libs/load.php
+++ b/libs/load.php
@@ -13,3 +13,31 @@ function validate_credentials($username, $password)
         return false;
     }
 }
+
+function signup($user, $pass, $email, $phone)
+{
+    $servername = "mysql.selfmade.ninja";
+    $username = "sibidharan";
+    $password = "xyjxo8-xefjat-gYnsif";
+    $dbname = "sibidharan_newdb";
+
+    // Create connection
+    $conn = new mysqli($servername, $username, $password, $dbname);
+    // Check connection
+    if ($conn->connect_error) {
+        die("Connection failed: " . $conn->connect_error);
+    }
+
+    $sql = "INSERT INTO `auth` (`username`, `password`, `email`, `phone`, `active`)
+    VALUES ('$user', '$pass', '$email', '$phone', '1');";
+    $error = false;
+    if ($conn->query($sql) === true) {
+        $error = false;
+    } else {
+        // echo "Error: " . $sql . "<br>" . $conn->error;
+        $error = $conn->error;
+    }
+
+    $conn->close();
+    return $error;
+}
diff --git a/login.php b/login.php
index eca0f6cd16873d24716ab750157b534752c62db8..e9616c0084583f5d77a442fc8a4efca18ba4f8cc 100644
--- a/login.php
+++ b/login.php
@@ -6,85 +6,11 @@ include 'libs/load.php';
 
 <!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="">
-    <meta name="author" content="Selfmade Ninja Academy">
-    <meta name="generator" content="Hugo 0.88.1">
-    <title>Login to Photogram</title>
-
-    <!-- Bootstrap core CSS -->
-    <link href="/app/assets/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.0/css/hover-min.css"
-        integrity="sha512-glciccPoOqr5mfDGmlJ3bpbvomZmFK+5dRARpt62nZnlKwaYZSfFpFIgUoD8ujqBw4TmPa/F3TX28OctJzoLfg=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <style>
-        .bd-placeholder-img {
-            font-size: 1.125rem;
-            text-anchor: middle;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            user-select: none;
-        }
-
-        .form-signin {
-            width: 100%;
-            max-width: 330px;
-            padding: 15px;
-            margin: auto;
-        }
-
-        .form-signin .checkbox {
-            font-weight: 400;
-        }
-
-        .form-signin .form-floating:focus-within {
-            z-index: 2;
-        }
-
-        .form-signin input[type="email"] {
-            margin-bottom: -1px;
-            border-bottom-right-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-
-        .form-signin input[type="password"] {
-            margin-bottom: 10px;
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-    </style>
-</head>
+<?load_template('_head');?>
 
 <body>
 
-    <header>
-        <div class="collapse bg-dark" id="navbarHeader">
-            <div class="container">
-                <div class="row">
-                    <div class="col-sm-8 col-md-7 py-4">
-                        <h4 class="text-white">About</h4>
-                        <p class="text-muted">Add some information about the album below, the author, or any other
-                            background
-                            context. Make it a few sentences long so folks can pick up some informative tidbits. Then,
-                            link them off
-                            to some social networking sites or contact information.</p>
-                    </div>
-                    <div class="col-sm-4 offset-md-1 py-4">
-                        <h4 class="text-white">Contact</h4>
-                        <ul class="list-unstyled">
-                            <li><a href="#" class="text-white">Follow on Twitter</a></li>
-                            <li><a href="#" class="text-white">Like on Facebook</a></li>
-                            <li><a href="#" class="text-white">Email me</a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <?load_template('_header');?>
-    </header>
+    <?load_template('_header');?>
     <main>
 
         <?load_template('_login');?>
diff --git a/signup.php b/signup.php
new file mode 100644
index 0000000000000000000000000000000000000000..8cc7d334f98e85c46c6f963cf296483cbd083b18
--- /dev/null
+++ b/signup.php
@@ -0,0 +1,25 @@
+<?php
+
+include 'libs/load.php';
+
+?>
+
+<!doctype html>
+<html lang="en">
+<?load_template('_head');?>
+
+<body>
+
+    <?load_template('_header');?>
+    <main>
+
+        <?load_template('_signup');?>
+
+    </main>
+    <?load_template('_footer');?>
+    <script src="/app/assets/dist/js/bootstrap.bundle.min.js"></script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/test.php b/test.php
index 2506f469f9a06b62bf1f65cf7157410a57004ef0..4e5eabc9cbcaa73fcfcaaa4b2c625301a9ca4096 100644
--- a/test.php
+++ b/test.php
@@ -1,18 +1,26 @@
 <pre>
 <?php
+include 'libs/load.php';
+
 // $cookie_name = "testscript";
 // $cookie_value = $_SERVER['REQUEST_URI'];
 // setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
-print("_SERVER \n");
-print_r($_SERVER);
-print("_GET \n");
-print_r($_GET);
-print("_POST \n");
-print_r($_POST);
-print("_FILES \n");
-print_r($_FILES);
-print("_COOKIES \n");
-print_r($_COOKIE);
+// print("_SERVER \n");
+// print_r($_SERVER);
+// print("_GET \n");
+// print_r($_GET);
+// print("_POST \n");
+// print_r($_POST);
+// print("_FILES \n");
+// print_r($_FILES);
+// print("_COOKIES \n");
+// print_r($_COOKIE);
+
+if (signup("sibidharan", "password", "sibi@selfmade.ninja", "9999999999")) {
+    echo "Success";
+} else {
+    echo "Fail";
+}
 
 ?>
 </pre>
\ No newline at end of file