diff --git a/css/blog.css b/css/blog.css
index 3f9f4f6..726b099 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -91,4 +91,34 @@
   border-bottom-right-radius: 1rem;
 }
 
+.blog-pagination {
+  margin-bottom: 2rem;
+}
+.blog-pagination .btn {
+  margin-left: 1rem;
+  width: 5rem;
+}
+
+.avatar {
+  max-height: 10rem;
+  max-width: 10rem;
+}
+
+.blogpost-comment {
+  margin-bottom: 0.75rem;
+}
+.blogpost-comment .avatar {
+  max-height: 7rem;
+  max-width: 7rem;
+}
+.blogpost-comment div strong {
+  margin-bottom: 0.5rem;
+}
+.blogpost-comment div div {
+  margin-bottom: 0.5rem;
+}
+.blogpost-comment .bi-calendar {
+  margin-right: 0.5rem;
+}
+
 /*# sourceMappingURL=blog.css.map */
diff --git a/css/blog.css.map b/css/blog.css.map
index b1d4b26..f861ae0 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;;;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
+{"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;;;AAKF;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;;AAIA;EACE;;AAGF;EACE;;AAIJ;EACE","file":"blog.css"}
\ No newline at end of file
diff --git a/css/blog.min.css b/css/blog.min.css
index 27118c7..ef3f6dd 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-body-color)}.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
+.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-body-color)}.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}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}.avatar{max-height:10rem;max-width:10rem}.blogpost-comment{margin-bottom:.75rem}.blogpost-comment .avatar{max-height:7rem;max-width:7rem}.blogpost-comment div div,.blogpost-comment div strong{margin-bottom:.5rem}.blogpost-comment .bi-calendar{margin-right:.5rem}
\ No newline at end of file
diff --git a/css/blog.scss b/css/blog.scss
index 81f78ec..06966f7 100644
--- a/css/blog.scss
+++ b/css/blog.scss
@@ -94,9 +94,47 @@
     border-bottom-right-radius: 1rem;
   }
 }
+
 .form-auth.form-signup {
   #confirmPassword {
     border-bottom-left-radius: 1rem;
     border-bottom-right-radius: 1rem;
   }
 }
+
+.blog-pagination {
+  margin-bottom: 2rem;
+
+  .btn {
+    margin-left: 1rem;
+    width: 5rem;
+  }
+}
+
+.avatar {
+  max-height: 10rem;
+  max-width: 10rem;
+}
+
+.blogpost-comment {
+  margin-bottom: 0.75rem;
+
+  .avatar {
+    max-height: 7rem;
+    max-width: 7rem;
+  }
+
+  div {
+    strong {
+      margin-bottom: 0.5rem;
+    }
+
+    div {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .bi-calendar {
+    margin-right: 0.5rem;
+  }
+}
diff --git a/img/anonymous.svg b/img/anonymous.svg
new file mode 100644
index 0000000..ffc9539
--- /dev/null
+++ b/img/anonymous.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+     viewBox="-20 0 250 206" xml:space="preserve">
+<g>
+	<path d="M200.663,23.767c-1.125-1.125-2.651-1.758-4.243-1.758c-0.02-0.001-0.04,0-0.06,0c-4.237,0-8.227-1.651-11.234-4.652
+		c-3.037-3.03-4.708-7.062-4.707-11.354c0.001-1.592-0.632-3.118-1.757-4.244C177.537,0.632,176.011,0,174.419,0H31.581
+		c-1.592,0-3.118,0.632-4.243,1.758c-1.125,1.126-1.758,2.652-1.757,4.244c0.001,4.292-1.67,8.325-4.707,11.354
+		c-3.009,3.001-6.996,4.652-11.234,4.652c-0.02,0-0.04-0.001-0.06,0c-1.592,0-3.118,0.632-4.243,1.758
+		c-1.129,1.13-1.762,2.663-1.757,4.26c0.06,20.19,2.938,51.081,16.305,83.586c16.012,38.936,42.908,70.387,79.94,93.479
+		c0.972,0.606,2.073,0.909,3.175,0.909s2.203-0.303,3.175-0.909c37.032-23.092,63.929-54.542,79.94-93.479
+		c13.367-32.505,16.245-63.396,16.305-83.586C202.425,26.429,201.792,24.896,200.663,23.767z M103,192.891
+		C30.521,145.934,16.802,75.074,15.661,33.36c5.143-1.127,9.867-3.697,13.688-7.509c3.865-3.856,6.465-8.64,7.594-13.852h132.113
+		c1.129,5.212,3.729,9.996,7.594,13.852c3.821,3.813,8.546,6.382,13.688,7.509C189.198,75.074,175.479,145.934,103,192.891z"/>
+    <path d="M155.924,99.253c-2.903-1.597-6.553-0.537-8.148,2.366l-5.217,9.483h-16.362l-5.866-9.697
+		c-1.087-1.797-3.034-2.895-5.134-2.895H90.804c-2.1,0-4.047,1.098-5.134,2.895l-5.866,9.697H63.441l-5.217-9.483
+		c-1.596-2.903-5.244-3.963-8.148-2.366c-2.903,1.597-3.963,5.246-2.365,8.149l6.926,12.591c1.054,1.917,3.068,3.108,5.257,3.108
+		h23.293c2.1,0,4.047-1.098,5.134-2.895l5.866-9.697h17.627l5.866,9.697c1.087,1.797,3.034,2.895,5.134,2.895h23.293
+		c2.188,0,4.203-1.191,5.257-3.108l6.926-12.591C159.887,104.499,158.827,100.851,155.924,99.253z"/>
+    <polygon points="103,173.097 114.647,132.805 91.353,132.805"/>
+    <path d="M64.834,46.007c8.584,0,16.593,4.622,20.9,12.061c1.66,2.867,5.333,3.845,8.199,2.186c2.867-1.661,3.846-5.332,2.186-8.199
+		c-6.447-11.132-18.435-18.047-31.285-18.047c-12.855,0-24.846,6.918-31.29,18.055c-1.659,2.868-0.68,6.539,2.188,8.199
+		c0.946,0.547,1.979,0.808,2.999,0.808c2.071,0,4.087-1.074,5.199-2.996C48.237,50.63,56.247,46.007,64.834,46.007z"/>
+    <path d="M57.395,55.071c-2.209,0-4,1.791-4,4s1.791,4,4,4h15.859c2.209,0,4-1.791,4-4s-1.791-4-4-4H57.395z"/>
+    <path d="M141.17,34.007c-12.854,0-24.844,6.918-31.29,18.055c-1.659,2.868-0.68,6.539,2.188,8.198c0.946,0.548,1.98,0.808,3,0.808
+		c2.071,0,4.087-1.074,5.199-2.996c4.308-7.442,12.317-12.066,20.903-12.066c8.584,0,16.593,4.621,20.9,12.06
+		c1.659,2.867,5.33,3.847,8.199,2.186c2.867-1.661,3.846-5.331,2.186-8.199C166.01,40.922,154.021,34.007,141.17,34.007z"/>
+    <path d="M149.591,63.071c2.209,0,4-1.791,4-4s-1.791-4-4-4h-15.86c-2.209,0-4,1.791-4,4s1.791,4,4,4H149.591z"/>
+    <path d="M109.157,125.667c2.209,0,4-1.791,4-4s-1.791-4-4-4H96.843c-2.209,0-4,1.791-4,4s1.791,4,4,4H109.157z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/js/blog.js b/js/blog.js
new file mode 100644
index 0000000..8a38ef6
--- /dev/null
+++ b/js/blog.js
@@ -0,0 +1,67 @@
+// blogpost comment creation
+
+const createBlogpostComment = ({author, message, created_at}) => {
+    const comment = document.createElement("div");
+    comment.classList.add("blogpost-comment", "col-12", "d-flex");
+
+    const author_avatar = document.createElement("img");
+    author_avatar.src = author.img;
+    author_avatar.classList.add("avatar", "rounded-circle", "p-2");
+    comment.appendChild(author_avatar);
+
+    const comment_body = document.createElement("div");
+    comment.appendChild(comment_body);
+
+    const comment_author = document.createElement("strong");
+    comment_author.classList.add("h4", "mb-2");
+    comment_author.innerText = author.name;
+    comment_body.appendChild(comment_author);
+
+    const comment_message = document.createElement("div");
+    comment_message.innerText = message;
+    comment_body.appendChild(comment_message);
+
+    const comment_created = document.createElement("small");
+    const icon = document.createElement("i");
+    comment_created.classList.add("text-muted");
+    comment_created.innerText = created_at;
+    icon.classList.add("bi", "bi-calendar");
+    comment_created.insertBefore(icon, comment_created.firstChild);
+    comment_body.appendChild(comment_created);
+
+    return comment;
+}
+
+
+const addBlogpostComment = comment => {
+    const container = document.getElementById("BlogpostCommentsContainer");
+    if (container) container.insertBefore(comment, container.firstChild);
+}
+
+
+const handleNewCommentSubmit = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const message = event.target.querySelector("textarea").value.trim();
+    event.target.reset();
+
+    if (!message) return;
+
+    // TODO: get payload from backend
+    const payload = {
+        author: {
+            img: "https://i.pravatar.cc/350?u=da594f2b",
+            name: "Bosco Longhole",
+        },
+        message,
+        created_at: "Feb 2, 2023",
+    }
+
+    const comment = createBlogpostComment(payload);
+    addBlogpostComment(comment);
+}
+
+
+const BlogpostCommentsForm = document.getElementById("BlogpostCommentForm");
+if (BlogpostCommentsForm) BlogpostCommentsForm.addEventListener("submit", handleNewCommentSubmit);
diff --git a/templates/blogpost.html b/templates/blogpost.html
index 44611cd..59e91a9 100644
--- a/templates/blogpost.html
+++ b/templates/blogpost.html
@@ -25,17 +25,17 @@
         <a href="homepage.html" class="blog-title text-dark">Django Blog</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="signin.html">Sign In</a></li>
-            <li><a class="dropdown-item" href="signup.html">Sign Up</a></li>
-          </ul>
+        <div class="dropdown-toggle" data-bs-toggle="dropdown">
+          <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar rounded-circle">
         </div>
+        <ul class="dropdown-menu" role="menu">
+          <li><a href="" class="dropdown-item">User Profile</a></li>
+          <li><a href="" class="dropdown-item">Create post</a></li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+          <li><a href="" class="dropdown-item">Logout</a></li>
+        </ul>
       </div>
     </div>
   </header>
@@ -111,8 +111,8 @@
 <main class="container">
   <div class="row">
     <section class="col-md-9 mb-2" role="main">
-      <h1 class="h1">hydras volare!</h1>
       <div class="row position-relative">
+        <h1 class="h1">hydras volare!</h1>
         <article class="col w-100">
           <div class="mb-3">
             <strong class="fw-light">category</strong>
@@ -144,7 +144,7 @@ <h1 class="h1">hydras volare!</h1>
             minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam
             voluptatem.
           </p>
-                    <p>
+          <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa
             laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam
             vitae? Atque?
@@ -167,7 +167,7 @@ <h1 class="h1">hydras volare!</h1>
             minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam
             voluptatem.
           </p>
-                    <p>
+          <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa
             laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam
             vitae? Atque?
@@ -192,6 +192,80 @@ <h1 class="h1">hydras volare!</h1>
           </p>
         </article>
       </div>
+      <h2 class="h2">Comments</h2>
+      <form class="row position-relative" id="BlogpostCommentForm">
+        <div class="col-12 d-flex justify-content-between align-items-center mb-3">
+          <h3 class="h3">New comment</h3>
+          <button type="submit" class="btn btn-outline-primary"><i class="bi bi-send"></i>&nbsp;Post</button>
+        </div>
+        <div class="col-12 d-flex justify-content-start mb-3">
+          <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar rounded-circle p-2">
+          <label for="newCommentText" class="visually-hidden">Comment Text</label>
+          <textarea name="message" id="newCommentText" class="form-control" required></textarea>
+        </div>
+      </form>
+      <div class="row position-relative" id="BlogpostCommentsContainer">
+        <div class="blogpost-comment col-12 d-flex">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
+          </div>
+        </div>
+        <div class="blogpost-comment col-12 d-flex">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
+          </div>
+        </div>
+        <div class="blogpost-comment col-12 d-flex">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
+          </div>
+        </div>
+        <div class="blogpost-comment col-12 d-flex">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
+          </div>
+        </div>
+        <div class="blogpost-comment col-12 d-flex">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
+          </div>
+        </div>
+      </div>
     </section>
     <section class="col-md-3">
       <div class="position-sticky">
@@ -233,5 +307,6 @@ <h4>Out social media</h4>
 </main>
 
 <script src="../js/bootstrap.bundle.js"></script>
+<script src="../js/blog.js"></script>
 </body>
 </html>
diff --git a/templates/homepage.html b/templates/homepage.html
index fae0613..bee6454 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -26,15 +26,11 @@
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center dropdown">
         <div class="dropdown-toggle" data-bs-toggle="dropdown">
-          <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar rounded-circle">
+          <img src="../img/anonymous.svg" alt="avatar" class="avatar rounded-circle">
         </div>
         <ul class="dropdown-menu" role="menu">
-          <li><a href="" class="dropdown-item">User Profile</a></li>
-          <li><a href="" class="dropdown-item">Create post</a></li>
-          <li>
-            <hr class="dropdown-divider">
-          </li>
-          <li><a href="" class="dropdown-item">Logout</a></li>
+          <li><a href="" class="dropdown-item">Sign In</a></li>
+          <li><a href="" class="dropdown-item">Sing Up</a></li>
         </ul>
       </div>
     </div>
@@ -293,6 +289,12 @@ <h2 class="card-title">axonas peregrinationes!</h2>
             </div>
           </div>
         </article>
+
+        <nav class="blog-pagination" aria-label="Pagination">
+          <a href="" class="btn btn-outline-primary rounded-pill">Older</a>
+          <a href="" class="btn btn-outline-success rounded-pill">Newer</a>
+        </nav>
+
       </div>
     </section>
     <section class="col-md-3">