diff --git a/base/templates/common_form.html b/base/templates/common_form.html
new file mode 100644
index 0000000..9d74fff
--- /dev/null
+++ b/base/templates/common_form.html
@@ -0,0 +1,50 @@
+{% load widget_tweaks %}
+{% load i18n %}
+<style>
+    .condition-highlight {
+        background-color: #ffa5000f;
+    }
+</style>
+<div class="oh-general__tab-target oh-profile-section" id="personal">
+    {% if form.verbose_name %}
+        <div class="oh-payslip__header">
+            <div class="oh-payslip__header-left">
+                <div class="oh-payroll__component-title">{% trans form.verbose_name %}</div>
+            </div>
+        </div>
+    {% endif %}
+    <div class="oh-profile-section__card">
+        <div class="row">
+            <div class="col-12">{{ form.non_field_errors }}</div>
+            {% for field in form.visible_fields %}
+            <div class="col-12 col-md-6" id="id_{{field.name}}_parent_div">
+                <div class="oh-label__info" for="id_{{ field.name }}">
+                    <label class="oh-label {% if field.field.required %} required-star{% endif %}"
+                        for="id_{{ field.name }}">{% trans field.label %}</label>
+                    {% if field.help_text != '' %}
+                    <span class="oh-info mr-2" title="{{ field.help_text|safe }}"></span>
+                    {% endif %}
+                </div>
+
+                {% if field.field.widget.input_type == 'checkbox' %}
+                <div class="oh-switch" style="width: 30px;">{{ field|add_class:'oh-switch__checkbox' }}</div>
+                {% else %}
+                {{ field|add_class:'form-control' }}
+                {% endif %}
+                {{ field.errors }}
+            </div>
+            {% endfor %}
+        </div>
+
+        {% for field in form.hidden_fields %}
+            {{ field }}
+        {% endfor %}
+
+        <div class="d-flex flex-row-reverse">
+            <button type="submit" class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp">{% trans 'Save' %}</button>
+        </div>
+    </div>
+</div>
+<script>
+    $("#personal").closest(".oh-modal--show").find("button[aria-label='Close']").attr("style", "top: 33px; right: 20px; z-index:1");
+</script>
diff --git a/base/templates/email_config.html b/base/templates/email_config.html
new file mode 100644
index 0000000..3037d5a
--- /dev/null
+++ b/base/templates/email_config.html
@@ -0,0 +1,46 @@
+
+{% extends 'index.html' %}
+{% load i18n %}
+{% block content %}
+
+  <main class="oh-auth">
+    <div class="oh-auth-card">
+      <h1 class="oh-onboarding-card__title oh-onboarding-card__title--h2 text-center my-3">{% trans "Email Configuration" %}</h1>
+      <p class="text-muted text-center">{% trans "Configure your email server." %}</p>
+      <form method='post' class="oh-form-group">
+          {% csrf_token %}
+          <div class="oh-input-group">
+            <label class="oh-label" for="email_host">{% trans "Email Host" %}</label>
+            <input type="text" name="email_host" class="oh-input w-100" value="{{ settings.EMAIL_HOST }}" />
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="email_port">{% trans "Email Port" %}</label>
+            <input type="text" name="email_port" class="oh-input w-100" value="{{ settings.EMAIL_PORT }}" />
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="email_username">{% trans "Email Username" %}</label>
+            <input type="text" name="email_username" class="oh-input w-100" value="{{ settings.EMAIL_HOST_USER }}" />
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="email_password">{% trans "Email Password" %}</label>
+            <input type="text" name="email_password" class="oh-input w-100" value="{{ settings.EMAIL_HOST_PASSWORD }}" />
+          </div>
+          <div class="oh-input-group">
+            <label class="oh-label" for="email_use_tls">{% trans "Use Tls" %}</label>
+            <div class="oh-switch">
+              <input type="text" name="email_use_tls"class="oh-input w-100"  value="{{ settings.EMAIL_HOST_PASSWORD }}" />
+            </div>
+          </div>
+        <button
+        type='submit'
+        class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-100 mb-4"
+        role="button"
+      >
+      <ion-icon class="me-2" name="lock-closed-outline"></ion-icon>
+        {% trans "Configure" %}
+      </button>
+      </form>
+    </div>
+</main>
+
+{% endblock content %}
diff --git a/base/templates/horilla_form.html b/base/templates/horilla_form.html
new file mode 100644
index 0000000..903f6a8
--- /dev/null
+++ b/base/templates/horilla_form.html
@@ -0,0 +1,52 @@
+{% load i18n %}{% load widget_tweaks %} {% load horillafilters %}
+{% for field in form %}
+    {% if field.field.widget.is_hidden %}
+        {{ field }}
+    {% endif %}
+{% endfor %}
+<div class="oh-general__tab-target oh-profile-section" id="personal">
+    <div class="oh-profile-section__card">
+        <div class="row">
+            <div class="col-12">{{form.non_field_errors}}</div>
+            {% for field in form.visible_fields %}
+                {% if field.field.widget|is_select_multiple or field.field.widget|is_text_area %}
+                    <div class="oh-label__info" for="id_{{ field.name }}">
+                        <label class="oh-label {% if field.field.required %} required-star{% endif %}"
+                            for="id_{{ field.name }}">{% trans field.label %}</label>
+                        {% if field.help_text != '' %}
+                        <span class="oh-info mr-2" title="{{ field.help_text|safe }}"></span>
+                        {% endif %}
+                    </div>
+                    <div style="width: 100%; padding: 12px;" id="id_{{ field.name }}_parent_div">
+                        {{ field|add_class:"form-control" }}
+                    </div>
+                    {{field.errors}}
+                {% else %}
+                    <div class="col-12 col-md-6" id="id_{{ field.name }}_parent_div">
+                        <div class="oh-label__info" for="id_{{ field.name }}">
+                            <label class="oh-label {% if field.field.required %} required-star{% endif %}"
+                                for="id_{{ field.name }}">{% trans field.label %}</label>
+                            {% if field.help_text != '' %}
+                                <span class="oh-info mr-2" title="{{ field.help_text|safe }}"></span>
+                            {% endif %}
+                        </div>
+                        {% if field.field.widget.input_type == "checkbox" %}
+                            <div class="oh-switch" style="width: 30px">
+                                {{ field|add_class:"oh-switch__checkbox" }}
+                            </div>
+                        {% else %}
+                            {{ field|add_class:"form-control" }}
+                        {% endif %}
+                        {{field.errors}}
+                    </div>
+                {% endif %}
+            {% endfor %}
+        </div>
+
+        <div class="oh-modal__dialog-footer p-0 mt-3">
+            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
+                {% trans "Save" %}
+            </button>
+        </div>
+    </div>
+</div>