diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..5b38214
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,78 @@
+<html>
+<head>
+<!-- Required meta tags -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<!-- font awesome -->
+<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/fontawesome-free-5.15.3-web/css/all.min.css' ) }}">
+
+<!-- Bootstrap CSS -->
+<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/bootstrap-4.6.0-dist/css/bootstrap.min.css' ) }}">
+<link rel="stylesheet" href="{{ url_for( 'static', filename='upstream/jquery.contextMenu.css' ) }}">
+
+<!-- code to get bootstrap to work -->
+<script src="{{ url_for( 'static', filename='upstream/jquery-3.6.0.min.js')}}"></script>
+<script src="{{ url_for( 'static', filename='upstream/bootstrap-4.6.0-dist/js/bootstrap.min.js')}}"></script>
+<script src="{{ url_for( 'static', filename='upstream/jquery.contextMenu.min.js')}}"></script>
+<script src="{{ url_for( 'static', filename='upstream/jquery.ui.position.min.js')}}"></script>
+
+<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+
+{% import "bootstrap/wtf.html" as wtf %}
+<style>
+.highlight { box-shadow: 0 0 7px 4px #5bc0de }
+.sm-txt { font-size: 0.8rem }
+</style>
+</head>
+<body>
+
+<div class="container">
+{% if form.errors|length > 0 %}
+    <div class="row my-5">
+        <alert class="alert alert-danger alert-dismissible fade show">
+            {% set last_err = namespace(txt="") %}
+            {% for e in form.errors %}
+                {% if last_err.txt != form.errors[e] %}
+                    {% set err = form.errors[e]|replace("['", "" ) %}
+                    {% set err = err|replace("']", "" ) %}
+                    {{err}}
+                    {% set last_err.txt=form.errors[e] %}
+                {% endif %}
+            {% endfor %}
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+        </alert>
+    </div class="row">
+{% endif %}
+
+{#     <div class="row my-5 col-lg-6 rounded border border-primary border-3"> #}
+
+    <div class="row my-5 col-lg-6" style="border: 3px solid #5bc0de; border-radius: 15px;">
+        <h3 class="col-lg-12 my-3 text-center" style="color: #5bc0de">
+            <span class="fa-stack">
+                <i class="fas fa-brain fa-stack-2x"></i>
+                <i class="far fa-image fa-stack-1x fa-inverse"></i>
+            </span>
+        &nbsp;Photo Assistant Login</h3>
+        <form class="form form-inline" method="POST">
+            <div class="col-lg-12">
+                <label labelfor="username" class="text-right form-control-plaintext col-lg-4 text-info">Username:</label>
+                <input class="form-control col-lg-8" type="text" name="username"></input>
+            </div>
+            <div class="col-lg-12">
+                <label labelfor="password" class="text-right form-control-plaintext col-lg-4 text-info">Password:</label>
+                <input class="form-control col-lg-8" type="password" name="password"></input>
+            </div>
+
+            <div class="col-lg-12 my-2 text-center">
+            {{ form.submit( class="form-control text-info") }}
+            </div>
+            {{ form.hidden_tag() }}
+        </form>
+    </div class="row">
+</div class="container">
+
+</body>
+</html>
