diff --git a/css/blog.css b/css/blog.css
index 3fac510..940a8ad 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -57,4 +57,38 @@
   height: 25rem;
 }
 
+.form-auth {
+  max-width: 330px;
+  padding: 15px;
+}
+
+.form-auth {
+  height: 100%;
+  display: block;
+  align-items: center;
+  text-align: center;
+  max-width: 300px;
+  padding: 15px;
+}
+.form-auth input {
+  border-radius: 0;
+}
+.form-auth input#username {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+.form-auth .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-auth.form-signin #password {
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+}
+
+.form-auth.form-signup #confirmPassword {
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+}
+
 /*# sourceMappingURL=blog.css.map */
diff --git a/css/blog.css.map b/css/blog.css.map
index 270fcea..b1d4b26 100644
--- a/css/blog.css.map
+++ b/css/blog.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"blog.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA","file":"blog.css"}
\ No newline at end of file
diff --git a/css/blog.min.css b/css/blog.min.css
index 697b7fe..22d3940 100644
--- a/css/blog.min.css
+++ b/css/blog.min.css
@@ -1 +1 @@
-.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-dark)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}
\ No newline at end of file
+.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-dark)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}
\ No newline at end of file
diff --git a/css/blog.scss b/css/blog.scss
index 603240d..8061b60 100644
--- a/css/blog.scss
+++ b/css/blog.scss
@@ -59,4 +59,44 @@
 
 .carousel-item {
   height: 25rem;
-}
\ No newline at end of file
+}
+
+.form-auth {
+  max-width: 330px;
+  padding: 15px;
+}
+
+.form-auth {
+  height: 100%;
+  display: block;
+  align-items: center;
+  text-align: center;
+  max-width: 300px;
+  padding: 15px;
+
+  input {
+    border-radius: 0;
+  }
+
+  input#username {
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+  }
+
+  .form-floating:focus-within {
+    z-index: 2;
+  }
+}
+
+.form-auth.form-signin {
+  #password {
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+}
+.form-auth.form-signup {
+  #confirmPassword {
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+}
diff --git a/templates/signin.html b/templates/signin.html
new file mode 100644
index 0000000..ef34a70
--- /dev/null
+++ b/templates/signin.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Python training course - Django blog project">
+  <title>Blog</title>
+  <link rel="icon" type="image/svg+xml" href="../img/favicon.svg">
+  <link rel="icon" type="image/png" href="../img/favicon.png">
+  <link rel="stylesheet" href="../css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="../css/blog.min.css">
+</head>
+<body>
+
+<div class="container">
+  <header class="blog-header lh-1 py-3">
+    <div class="row d-flex justify-content-between align-items-center">
+      <div class="col-4">
+        <img src="../img/logo.svg" alt="logo" class="logo">
+      </div>
+      <div class="col-4 text-center">
+        <a href="" class="blog-title text-dark">Python course</a>
+      </div>
+      <div class="col-4 d-flex justify-content-end align-items-center dropdown">
+        <div class="btn-group">
+          <button type="button" class="btn btn-secondary">Authenticate</button>
+          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
+                  aria-expanded="false">
+            <span class="visually-hidden">Toggle Dropdown</span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="#">Sign In</a></li>
+            <li><a class="dropdown-item" href="#">Sign Up</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="nav-scroller py-1 mb-3">
+    <nav class="nav d-flex justify-content-between">
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category1</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category2</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category3</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category4</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category5</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category6</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category7</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category8</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category9</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category10</a></div>
+    </nav>
+  </div>
+</div>
+<main class="form-auth form-signin w-100 m-auto">
+  <form>
+    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
+    <div class="form-floating">
+      <input type="text" class="form-control" id="username" placeholder="Username">
+      <label for="username">Username</label>
+    </div>
+    <div class="form-floating">
+      <input type="password" class="form-control" id="password" placeholder="Password">
+      <label for="password">Password</label>
+    </div>
+    <div class="my-3">
+      <p>Have no account?</p>
+      <a href="" class="text-body fw-bold">Sing up now</a>
+    </div>
+    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign In</button>
+  </form>
+</main>
+
+<script src="../js/bootstrap.bundle.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/signup.html b/templates/signup.html
new file mode 100644
index 0000000..7541bb0
--- /dev/null
+++ b/templates/signup.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="description" content="Python training course - Django blog project">
+  <title>Blog</title>
+  <link rel="icon" type="image/svg+xml" href="../img/favicon.svg">
+  <link rel="icon" type="image/png" href="../img/favicon.png">
+  <link rel="stylesheet" href="../css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="../css/blog.min.css">
+</head>
+<body>
+
+<div class="container">
+  <header class="blog-header lh-1 py-3">
+    <div class="row d-flex justify-content-between align-items-center">
+      <div class="col-4">
+        <img src="../img/logo.svg" alt="logo" class="logo">
+      </div>
+      <div class="col-4 text-center">
+        <a href="" class="blog-title text-dark">Python course</a>
+      </div>
+      <div class="col-4 d-flex justify-content-end align-items-center dropdown">
+        <div class="btn-group">
+          <button type="button" class="btn btn-secondary">Authenticate</button>
+          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
+                  aria-expanded="false">
+            <span class="visually-hidden">Toggle Dropdown</span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="#">Sign In</a></li>
+            <li><a class="dropdown-item" href="#">Sign Up</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="nav-scroller py-1 mb-3">
+    <nav class="nav d-flex justify-content-between">
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category1</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category2</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category3</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category4</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category5</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category6</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category7</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category8</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category9</a></div>
+      <div class="nav-item"><a href="" class="nav-link link-secondary">Category10</a></div>
+    </nav>
+  </div>
+</div>
+<main class="form-auth form-signup w-100 m-auto">
+  <form>
+    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
+
+    <div class="form-floating">
+      <input type="text" class="form-control" id="username" placeholder="Username" name="username">
+      <label for="username">Username</label>
+    </div>
+
+    <div class="form-floating">
+      <input type="email" class="form-control" id="email" placeholder="Email" name="email">
+      <label for="email">Email</label>
+    </div>
+
+    <div class="form-floating">
+      <input type="password" class="form-control" id="password" placeholder="Password" name="password">
+      <label for="password">Password</label>
+    </div>
+
+    <div class="form-floating">
+      <input type="password" class="form-control" id="confirmPassword" placeholder="Password" name="confirm_password">
+      <label for="confirmPassword">Confirm Password</label>
+    </div>
+
+    <div class="my-3">
+      <p>Have already an account?</p>
+      <a href="" class="text-body fw-bold">Sing in here</a>
+    </div>
+
+    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign Up</button>
+  </form>
+</main>
+
+<script src="../js/bootstrap.bundle.js"></script>
+</body>
+</html>
\ No newline at end of file