diff --git a/static/CSS/loginstyle.css b/static/CSS/loginstyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..9bc8eac8b095916148d36dd41afcb9869d2add21
--- /dev/null
+++ b/static/CSS/loginstyle.css
@@ -0,0 +1,25 @@
+header{
+    background-color: black;
+    display: block;
+    color: black;
+    margin-left: auto;
+    margin-right: inherit;
+    width: 100%;
+    height: 75%;
+}
+
+.card{
+    margin: 0 auto;
+    float: none; 
+    margin-bottom: 10px;
+}
+
+#logo{
+    width: 10%;
+}
+
+body{
+    font-family: 'Sora', sans-serif;
+    background-color: #212529;
+    color: white;
+}
\ No newline at end of file
diff --git a/static/login.html b/static/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..4d10ccba95340026d3ae59cbf6538c1e38ccdda1
--- /dev/null
+++ b/static/login.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<header class="masthead bg-dark text-white text-center">
+    <div class="container-fluid">
+        <img id="logo" src="Media/logo.png"/>
+        <h1 id="header">Tramshed Tech</h1>
+    </div>
+  </header>
+<body>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="CSS/loginstyle.css">
+    <title>Login</title>
+    <div id="card" class="card text-dark w-25 text-center">
+        <div class="card-body text-center">
+        
+
+        <form>
+            <!-- Email input -->
+            <div class="form-outline mb-4">
+                <input type="email" id="form2Example1" class="form-control" />
+                <label class="form-label" for="form2Example1">Email address</label>
+            </div>
+  
+            <!-- Password input -->
+            <div class="form-outline mb-4">
+                <input type="password" id="form2Example2" class="form-control" />
+                <label class="form-label" for="form2Example2">Password</label>
+            </div>
+  
+            <!-- 2 column grid layout for inline styling -->
+            <div class="row mb-4">
+            <div class="col d-flex justify-content-center">
+            <!-- Checkbox -->
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" value="" id="form2Example31" checked />
+                    <label class="form-check-label" for="form2Example31"> Remember me </label>
+                </div>
+            </div>
+  
+            <div class="col">
+                <!-- Simple link -->
+                <a href="#!">Forgot password?</a>
+            </div>
+  
+            <!-- Submit button -->
+            <button onclick="window.location.href='landingpage.html';" type="button" class="btn btn-light">
+                <span class="spinner-grow spinner-grow-sm"></span>
+                Sign in
+            </button>
+            <!-- Register buttons -->
+            <div class="text-center">
+            <p>Not a member? <a href="#!">Register</a></p>
+        </form>
+    </body>
+</html>
\ No newline at end of file