diff --git a/public/css/styles.css b/public/css/styles.css
index 8b049bb7f0323233c23897684900567db6be42e9..b8ff9362c3dac1dd28adf9476a49140fd562fcdc 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -23,6 +23,12 @@ time, mark, audio, video {
 	font: inherit;
 	vertical-align: baseline;
 }
+
+
+* {
+  box-sizing: border-box;
+}
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
@@ -51,3 +57,70 @@ table {
   font-family: 'Open Sans', sans-serif;
 }
 
+.form-container {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10%;
+  width: 30%;
+  border-radius: 60px;
+  border: 1px solid #CBD5E1;
+  background: #FFF;
+  padding: 5%;
+  margin-top: 5%;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+
+}
+
+.form-group {
+  padding: 5%;
+  width: 100%;
+}
+
+
+.header-title {
+  color: #414141;
+  text-align: center;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 36px; /* 120% */
+  letter-spacing: -0.225px;
+  margin-bottom: 10%;
+}
+
+.input {
+  border-radius: 6px;
+  border: 1px solid #CBD5E1;
+  background: #FFF;
+  width: 100%;
+  padding: 5%;
+  margin-top: 5%;
+}
+
+.button {
+  border-radius: 6px;
+  background: teal;
+  color: white;
+  width: 100%;  
+  padding-top: 3%;
+  padding-bottom: 3%;
+  transition: all 0.5s;
+  cursor: pointer;
+}
+
+.button:hover {background-color: #08bc4d}
+
+.button:active {
+  background-color: #2b5c02;
+  transform: translateY(4px);
+}
diff --git a/views/layouts/base.php b/views/layouts/base.php
index 5b66d8ea89bcd2c67a91b08926c4e5432dcd3222..30cb2f4340b0ca9fb1b9e3cb937bfab56a3a79b8 100644
--- a/views/layouts/base.php
+++ b/views/layouts/base.php
@@ -50,9 +50,12 @@
 
   <main>
     <h1>hai!!!</h1>
-    <?= $__content ?>
+    <div class="content">
+      <?= $__content ?>
+    </div>
   </main>
 
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/views/login.php b/views/login.php
index 903724bcf64b1678d09b6146191c3de176fd685f..04bf1f404329986fc3fbc8cee594255ef8f8dab5 100644
--- a/views/login.php
+++ b/views/login.php
@@ -1,18 +1,18 @@
-<div class="login-container">
-  <h2>Login</h2>
-  <form class="login-form" method="post">
+<div class="form-container">
+  <h2 class="header-title">Login</h2>
+  <form class="form" method="post">
     <div class="form-group">
       <label for="username-email">Username or Email</label>
       <br>
-      <input type="text" id="username" name="username-email" required>
+      <input class="input" type="text" id="username" name="username-email" required>
     </div>
     <div class="form-group">
       <label for="password">Password</label>
       <br>
-      <input type="password" id="password" name="password" required>
+      <input class="input" type="password" id="password" name="password" required>
     </div>
     <div class="form-group">
-      <button type="submit">Login</button>
+      <button class="button" ctype="submit">Login</button>
     </div>
   </form>
 </div>
\ No newline at end of file
diff --git a/views/register.php b/views/register.php
index 7fd86fc731aef32cdab576ff811670776ecd33a5..083290218487db6905b03c0d496b293ebc8d4395 100644
--- a/views/register.php
+++ b/views/register.php
@@ -1,28 +1,29 @@
-<div class="register-container">
-  <h2>Register</h2>
-  <form class="register-form" method="post">
+<div class="form-container">
+  <h2 class="header-title">Register</h2>
+  <form class="form" method="post">
     <div class="form-group">
       <label for="username">Username</label>
       <br>
-      <input type="text" id="username" name="username" required>
+      <input class="input" type="text" id="username" name="username" required>
     </div>
     <div class="form-group">
       <label for="email">Email</label>
       <br>
-      <input type="text" id="email" name="email" required>
+      <input class="input" type="text" id="email" name="email" required>
     </div>
     <div class="form-group">
       <label for="password">Password</label>
       <br>
-      <input type="password" id="password" name="password" required>
+      <input class="input" type="password" id="password" name="password" required>
     </div>
     <div class="form-group">
       <label for="confirm-password">Confirm Password</label>
       <br>
-      <input type="password" id="confirm-password" name="confirm-password" required>
+      <input class="input" type="password" id="confirm-password" name="confirm-password" required>
     </div>
     <div class="form-group">
-      <button type="submit">Register</button>
+      <button class="button" type="submit">Register</button>
     </div>
   </form>
+</div>
 </div>
\ No newline at end of file