diff --git a/app/models/User.php b/app/models/User.php
index ee40aec..f33146c 100644
--- a/app/models/User.php
+++ b/app/models/User.php
@@ -60,6 +60,6 @@ class User {
             } 
         } 
 
-        return "Invalid email or password.";
+        return "Incorrect username or password.";
     }
 }
diff --git a/app/views/auth/signin.php b/app/views/auth/signin.php
index 5cedda4..d624326 100644
--- a/app/views/auth/signin.php
+++ b/app/views/auth/signin.php
@@ -1,4 +1,10 @@
+<link rel="stylesheet" href="/css/login.css">
 <section class="signin">
+    <div class="header-form">
+        <img src="/img/logo.jpg" alt="Habit Tracker Logo">
+        <h1>Sign in to Habit Tracker</h1>
+    </div>
+
     <?php if ($this->get('error')): ?>
         <div class="error"><?= $this->get('error') ?></div>
     <?php endif; ?>
diff --git a/app/views/auth/signup.php b/app/views/auth/signup.php
index b937291..5ab2a00 100644
--- a/app/views/auth/signup.php
+++ b/app/views/auth/signup.php
@@ -1,4 +1,10 @@
-<section class="signup">
+<link rel="stylesheet" href="/css/login.css">
+<section class="signin">
+    <div class="header-form">
+        <img src="/img/logo.jpg" alt="Habit Tracker Logo">
+        <h1>Sign up to Habit Tracker</h1>
+    </div>
+
     <?php if ($this->get('error')): ?>
         <div class="error"><?= $this->get('error') ?></div>
     <?php endif; ?>
diff --git a/app/views/layouts/base.php b/app/views/layouts/base.php
index c1de6d1..6106199 100644
--- a/app/views/layouts/base.php
+++ b/app/views/layouts/base.php
@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8">
     <title>Habit Tracker | <?= $data['title'] ?></title>
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/global.css">
+    <link rel="stylesheet" href="/css/vars.css">
   </head>
   <body>
     <header>
@@ -10,8 +13,8 @@
       <a href="/auth/signup">Sign Up</a>
       <a href="/auth/logout">Log Out</a>
     </header>
-    <section class="content">
+    <main class="content">
       <?= $content ?>
-    </section>
+    </main>
   </body>
 </html>
diff --git a/public/css/global.css b/public/css/global.css
new file mode 100644
index 0000000..47fe3ef
--- /dev/null
+++ b/public/css/global.css
@@ -0,0 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
+
+body {
+  font-family: "Open Sans", serif;
+  background-color: var(--clr-primary);
+}
+
+a,
+p,
+label,
+h1 {
+  color: white;
+}
+
+a,
+p,
+label,
+div {
+  font-size: 14px;
+}
diff --git a/public/css/login.css b/public/css/login.css
new file mode 100644
index 0000000..7319916
--- /dev/null
+++ b/public/css/login.css
@@ -0,0 +1,62 @@
+.signin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+}
+
+body {
+  background-color: var(--clr-secondary);
+}
+
+.signin .header-form {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 2rem;
+}
+
+.signin .header-form img {
+  height: 5rem;
+  margin-bottom: 2rem;
+}
+
+.signin form {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background-color: var(--clr-tertiary);
+  gap: .5rem;
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+}
+
+.signin form input {
+  background-color: var(--clr-secondary);
+  caret-color: white;
+  color: white;
+  padding: .3rem;
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+  width: 15rem;
+}
+
+.signin form input[type="submit"] {
+  background-color: var(--clr-green);
+  color: white;
+}
+
+.signin .error {
+  width: 17rem;
+  padding: 1rem;
+  background-color: var(--clr-danger-muted);
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border-danger);
+  margin-bottom: 1rem;
+  color: white;
+}
+
+.signin small.error {
+  width: 15rem;
+}
diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000..bb20eee
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,13 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+main {
+  display: flex;
+  gap: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding: 0 var(--container-size);
+}
diff --git a/public/css/vars.css b/public/css/vars.css
new file mode 100644
index 0000000..5d87cec
--- /dev/null
+++ b/public/css/vars.css
@@ -0,0 +1,13 @@
+:root {
+  --container-size: 5vw;
+  --clr-primary: #010409;
+  --clr-secondary: #0d1117;
+  --clr-tertiary: #151b23;
+  --clr-green: #238636;
+  --clr-danger-muted: #f851491a;
+
+  --border-radious: 5px;
+  --borderWidth-thin: max(1px, 0.0625rem);
+  --clr-border: #3d444db3;
+  --clr-border-danger: #f8514966;
+}
diff --git a/public/img/logo.jpg b/public/img/logo.jpg
new file mode 100644
index 0000000..89afb73
Binary files /dev/null and b/public/img/logo.jpg differ
