diff --git a/archivist/apps/templates/accounts/register.html b/archivist/apps/templates/accounts/register.html
new file mode 100644
index 0000000..7f25140
--- /dev/null
+++ b/archivist/apps/templates/accounts/register.html
@@ -0,0 +1,101 @@
+{% extends "layouts/base-fullscreen.html" %}
+
+{% load static %}
+
+{% block title %} Sign up {% endblock %} 
+
+{% block body_class %}{% endblock %}
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+{% include 'includes/navigation-transparent.html' %} 
+<style type="text/css">
+    .body-p{
+        background-image: url('{% static "/img/bg/login-bg.jpg" %}');
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-position: center; 
+        background-size: cover;
+    }
+    
+    .div-p{
+        max-width:700px;
+        background: rgb(0,0,0);
+        background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
+        background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
+        background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1); 
+    }
+</style>
+
+<div class="d-flex flex-column body-p vh-100" loading="lazy">
+    <div class="d-flex flex-grow-1 div-p">
+        <form class="p-3 bg-body m-auto border border-2 border-info-subtle rounded bg-opacity-75" style="width: 24rem;" role="form" method="post" action="">
+            
+            <h3 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">
+                <i class="nf nf-md-login"></i>
+                 Sign up
+            </h3>
+            
+            <div class="row mb-3">
+                <p class="mb-0 text-danger text-center">
+                    {% if msg %}
+                    {{ msg | safe }}
+                    {% else %}
+                    Enter your email and password to register
+                    {% endif %}
+                </p>
+            </div>
+
+            {% csrf_token %} 
+                            
+            <div class="input-group input-group-outline mb-3">
+                {{ form.username }}
+            </div>
+            <span class="text-danger">{{ form.username.errors }}</span>
+            
+            <div class="input-group input-group-outline mb-3">
+                {{ form.email }}
+            </div>
+            <span class="text-danger">{{ form.email.errors }}</span>
+            
+            <div class="input-group input-group-outline mb-3">
+                {{ form.password1 }}
+            </div>
+            <span class="text-danger">{{ form.password1.errors }}</span>
+            
+            <div class="input-group input-group-outline mb-3">
+                {{ form.password2 }}
+            </div>
+            <span class="text-danger">{{ form.password2.errors }}</span>
+            
+            <div class="input-group form-check form-check-info text-start">
+                <input class="form-check-input rounded" type="checkbox" value="" id="flexCheckDefault">
+                <label class="form-check-label ps-2" for="flexCheckDefault">
+                    I agree the <a href="javascript:;" class="text-info font-weight-bolder">Terms and Conditions</a>
+                </label>
+            </div>
+            <div class="text-center">
+                <button type="submit" name="register" 
+                class="btn btn-outline-primary bg-gradient-primary w-100 mt-4 mb-0 text-body-emphasis">Sign up</button>
+            </div>
+            <p class="mt-4 text-sm text-center">
+                Already have an account?
+                <a href="{% url 'login' %}" class="text-primary text-gradient font-weight-bold">Sign in</a>
+            </p>
+
+        </form>
+        
+    </div>
+    {% include 'includes/footer-auth.html' %} 
+    
+</div>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}
+