diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..006c774
Binary files /dev/null and b/.DS_Store differ
diff --git a/admin/admin.html b/admin/admin.html
index 9acaa8b..28f2c6f 100644
--- a/admin/admin.html
+++ b/admin/admin.html
@@ -4,6 +4,10 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
   <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -95,7 +99,7 @@ <h2 class="create-article">Create Article</h2>
               <span class="title-error error-message"></span>
             </div>
             <div class="upload-article-image">
-              <input type="file" name="file" class="article-picture" accept="image/x-jpeg,image/x-png">
+              <input type="file" name="imageUrl" class="article-picture">
 
             </div>
             <div class="preview-picture">
@@ -103,7 +107,7 @@ <h2 class="create-article">Create Article</h2>
               <span class="preview-picture-alt">Image Preview</span>
             </div>
             <div class="article-content">
-              <textarea name="description" id="" cols="30" rows="10" placeholder="article description" class="detailed-article-description ckeditor"></textarea>
+              <textarea name="content" id="" cols="30" rows="10" placeholder="article description" class="detailed-article-description ckeditor"></textarea>
               <span class="detailed-description error-message"></span>
             </div>
             <div class="position-content">
@@ -133,7 +137,7 @@ <h2 class="create-article">Update Article</h2>
               <span class="title-update-error error-message hidden">title is required</span>
             </div>
             <div class="upload-article-image">
-              <input type="file" class="article-picture-update" accept="image/x-jpeg,image/x-png">
+              <input type="file" name="imageUrl" class="article-picture-update"/>
 
             </div>
             <div class="preview-picture">
@@ -141,7 +145,7 @@ <h2 class="create-article">Update Article</h2>
               <span class="preview-picture-alt">Image Preview</span>
             </div>
             <div class="article-content">
-              <textarea name="description" id="" cols="30" rows="10" placeholder="article description" class="detailed-update-description"></textarea>
+              <textarea name="content" id="" cols="30" rows="10" placeholder="article description" class="detailed-update-description"></textarea>
               <span class="detailed-update-description error-message hidden">Body is required</span>
             </div>
             <div class="position-content">
@@ -178,6 +182,8 @@ <h2 class="create-article">Update Article</h2>
         <div class="section-title">
           <h1 class="title-article">Articles</h1>
         </div>
+        
+      <div class="input-field popupCreate"></div>
         <section class="section-content">
           
              
@@ -364,7 +370,7 @@ <h3 class="name-skill">CSS</h3>
   <script src="./js/model.js"></script>
   <script src="./js/skillsModel.js"></script>
   <script src="./js/adminHambuger.js"></script>
-  <script src="js/blogs.js"></script>
+  <script src="./js/blogs.js"></script>
   <script>
     const logoutBtn = document.querySelector(".logout-btn");
     logoutBtn.addEventListener("click", (e) => {
diff --git a/admin/contacts.html b/admin/contacts.html
index f823c85..6a8bbe9 100644
--- a/admin/contacts.html
+++ b/admin/contacts.html
@@ -4,6 +4,10 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
   <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -79,6 +83,8 @@ <h1 class="title">My-brand</h1>
         <div class="section-title">
           <h1 class="title-article">Contact Messages</h1>
         </div>
+
+      <div class="input-field popupCreate"></div>
         <section class="section-content">
         </section>
       </content>
diff --git a/admin/js/blogs.js b/admin/js/blogs.js
index e518216..dd270ab 100644
--- a/admin/js/blogs.js
+++ b/admin/js/blogs.js
@@ -1,7 +1,10 @@
 // populating data  in the dashboard
+const popCreate = document.querySelector(".popupCreate");
 
 const newCredentials = localStorage.getItem("loginCredentials");
-if (!newCredentials) {
+const loginData = JSON.parse(newCredentials);
+
+if (loginData?.role !== "Admin") {
   window.location.replace("../login.html");
 }
 const deleteBlo = document.querySelector("#my-delete-model");
@@ -33,14 +36,12 @@ function update(id) {
     const reader = new FileReader();
     reader.onload = () => {
       const imageUrls = reader.result;
-      console.log(imageUrls);
       if (imageUrls === null) {
         return "image is required";
       } else {
         localStorage.setItem("recent-image", imageUrls);
         localStorage.setItem("save", imageUrls);
         const imagePreviewUpdate = localStorage.getItem("recent-image");
-        console.log(imagePreviewUpdate);
 
         document
           .querySelector("#image-preview-update")
@@ -50,7 +51,62 @@ function update(id) {
     };
     reader.readAsDataURL(imageUpdate.files[0]);
   });
-  RetrievedObj.forEach((article) => {
+
+  fetch(`https://my-brand-server.herokuapp.com/api/v1/posts/${id}`, {
+    method: "get",
+    headers: {
+      "Access-Control-Cross-origin": "*",
+      "content-Type": "application/json",
+    },
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      if (!newCredentials) {
+        console.log("you are not logged in please loggIn");
+      } else {
+        const title = (document.querySelector(".title-update").value =
+          data.data[0].title);
+        const content = (document.querySelector(
+          ".detailed-update-description"
+        ).value = data.data[0].content);
+        const image = document
+          .querySelector("#image-preview-update")
+          .setAttribute("src", data.data[0].imageUrl);
+        const filesUpdate = document.querySelector(".article-picture-update");
+
+        const updated = document.querySelector(".submit-update-btn");
+        updated.addEventListener("click", () => {
+          const title = document.querySelector(".title-update").value;
+          const content = document.querySelector(
+            ".detailed-update-description"
+          ).value;
+          const updateData = new FormData();
+          updateData.append("title", title);
+          updateData.append("content", content);
+          updateData.append("imageUrl", filesUpdate.files[0]);
+          const idUpdate = data.data[0]._id;
+          console.log(loginData.token);
+          console.log(idUpdate);
+          fetch(
+            `https://my-brand-server.herokuapp.com/api/v1/posts/${idUpdate}`,
+            {
+              method: "put",
+              headers: {
+                authorization: `Bearer ${loginData.token}`,
+              },
+              body: updateData,
+            }
+          )
+            .then((res) => res.json())
+            .then((data) => {
+              console.log("log to the console the updated data", data);
+              window.location.reload();
+            });
+        });
+      }
+    })
+    .catch((err) => console.log(err));
+  RetrievedObj?.forEach((article) => {
     if (article.id == id) {
       const title = (document.querySelector(".title-update").value =
         article.title);
@@ -111,12 +167,29 @@ function update(id) {
 const getData = JSON.parse(localStorage.getItem("blogList"));
 console.log(getData);
 let blogCardElement = document.querySelector(".section-content");
-getData?.forEach((element) => {
-  let body = element?.description.slice(0, 120) + "....";
-
-  blogCardElement.innerHTML += `
-  <div class="article-card">
-              <a href="../article.html?id=${element.id}" data-id="${element.id}">
+fetch("https://my-brand-server.herokuapp.com/api/v1/posts", {
+  method: "get",
+  headers: {
+    "Access-Control-Cross-origin": "*",
+    "content-Type": "application/json",
+  },
+})
+  .then((res) => res.json())
+  .then((data) => {
+    console.log(data);
+    popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+    setTimeout(() => {
+      const removeElement = document.querySelector(".success");
+      removeElement.remove();
+      // window.location.reload();
+    }, 3000);
+    data?.data?.forEach((element) => {
+      let body = element?.content?.slice(0, 120) + "....";
+      const id = element._id;
+      console.log(id);
+      blogCardElement.innerHTML += `
+            <div class="article-card">
+              <a href="../article.html?id=${element._id}" data-id="${element._id}">
               <div class="article-owner-image">
                 <img src="${element.imageUrl}" alt="importance of reading" width="400" height="350"/>
               </div>
@@ -131,11 +204,15 @@ getData?.forEach((element) => {
             </a>
                <div class="edit-delete">
                 <div class="edit-skill-article" id="edit-skill">
-                  <i onclick="update(${element.id})" class="fas fa-pen update"></i>
+                  <i onclick="update(id)" class="fas fa-pen update"></i>
                 </div>
                 <div class="delete-blog">
-                  <i onclick="deleteArticle(${element.id})" class="fas fa-trash-alt delete"></i>
+                  <i onclick="deleteArticle(${element._id})" class="fas fa-trash-alt delete"></i>
                 </div>
               </div>
             </div>`;
-});
\ No newline at end of file
+    });
+  })
+  .catch((err) => console.log(err));
+
+// fetch();
diff --git a/admin/js/model.js b/admin/js/model.js
index 6e7ae34..2156dde 100644
--- a/admin/js/model.js
+++ b/admin/js/model.js
@@ -39,10 +39,10 @@ const handleCreateArticle = (e) => {
   e.preventDefault();
 
   const formData = new FormData(articleForm).entries();
-  const { title, description } = Object.fromEntries(formData);
+  const { title, content } = Object.fromEntries(formData);
 
   const titleErrorMessage = validateTitle(title);
-  const descriptionErrorMessage = validateDescription(description);
+  const descriptionErrorMessage = validateDescription(content);
 
   if (titleErrorMessage) {
     const titleErrorMessageElement = document.querySelector(
@@ -70,11 +70,31 @@ const handleCreateArticle = (e) => {
     descriptionErrorMessageElement.style.display = "none";
 
     const imageUrl = localStorage.getItem("save");
+    const loginCredentials = JSON.parse(
+      localStorage.getItem("loginCredentials")
+    );
+    console.log(loginCredentials);
+    const files = document.querySelector(".article-picture");
+    const dataFormatted = new FormData();
+    dataFormatted.append("title", title);
+    dataFormatted.append("content", content);
+    dataFormatted.append("imageUrl", files.files[0]);
+
+    fetch("https://my-brand-server.herokuapp.com/api/v1/posts", {
+      method: "post",
+      headers: {
+        authorization: `Bearer ${loginCredentials.token}`,
+      },
+      body: dataFormatted,
+    })
+      .then((res) => res.json())
+      .then((data) => console.log(data))
+      .catch((err) => console.log(err));
     const blog = {
       id: Date.now(),
       imageUrl,
       title,
-      description,
+      content,
       like: 0,
       comments: [],
       numberOfComments: 0,
@@ -89,7 +109,7 @@ const handleCreateArticle = (e) => {
       localStorage.removeItem("save");
       document.querySelector("form").reset();
       model.style.display = "none";
-      window.location.reload();
+      // window.location.reload();
     } else {
       blogList.push(blog);
       console.log(blogList);
@@ -108,19 +128,17 @@ const handleCreateArticle = (e) => {
   }
 };
 
-
-
- const validateTitle = (title) => {
-   if (!title.trim()) return "Title of the article is required";
-   if (title.trim().length < 8) return "Title must be atleast 8 character long";
-   return " ";
- };
- const validateDescription = (description) => {
-   if (!description.trim()) return "decription of the article is required";
-   if (description.trim().length < 20)
-     return "article description must be atleast 20 character long";
-   return " ";
- };
+const validateTitle = (title) => {
+  if (!title.trim()) return "Title of the article is required";
+  if (title.trim().length < 8) return "Title must be atleast 8 character long";
+  return " ";
+};
+const validateDescription = (content) => {
+  if (!content.trim()) return "decription of the article is required";
+  if (content.trim().length < 6)
+    return "article description must be atleast 20 character long";
+  return " ";
+};
 
 
 
diff --git a/admin/js/queryMesssage.js b/admin/js/queryMesssage.js
index a4ed2aa..34881e7 100644
--- a/admin/js/queryMesssage.js
+++ b/admin/js/queryMesssage.js
@@ -1,17 +1,45 @@
+const popCreate = document.querySelector(".popupCreate");
+
 const newCredentials = localStorage.getItem("loginCredentials");
 const cred = JSON.parse(newCredentials);
-if (cred.isLoggedIn === false) {
+if (cred?.role !== "Admin") {
   window.location.replace("../login.html");
 }
 
 const contacts = localStorage.getItem("contact-message");
 const section = document.querySelector(".section-content");
 const contact = JSON.parse(contacts);
-console.log(contact);
-contact?.forEach((message) => {
-  section.innerHTML += `<div class="message-card">
+const getQueries = async () => {
+  const res = await fetch(
+    "https://my-brand-server.herokuapp.com/api/v1/queries/all-messages",
+    {
+      method: "get",
+      headers: {
+        "content-Type": "application/json",
+        authorization: `Bearer ${cred.token}`,
+      },
+    }
+  );
+  const data = await res.json();
+  if (data.status !== 200) {
+    popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+    setTimeout(() => {
+      const removeElement = document.querySelector(".success");
+      removeElement.remove();
+      // window.location.reload();
+    }, 3000);
+  } else {
+    popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+    setTimeout(() => {
+      const removeElement = document.querySelector(".success");
+      removeElement.remove();
+      // window.location.reload();
+    }, 3000);
+    data.data.forEach((message) => {
+      console.log(message);
+      section.innerHTML += `<div class="message-card">
               <div class="article-title-date">
-                <h3 class="title-articles">${message.name}</h3>
+                <h3 class="title-articles">${message.guestName}</h3>
                 <p class="date-article">${message.email}</p>
                 <div class="article-line"></div>
               </div>
@@ -23,9 +51,11 @@ contact?.forEach((message) => {
                   <i class="fas fa-reply"></i>
                 </div>
                 <div class="location">
-                  ${message.userLocation}
+                  Kigali-Rwanda
                 </div>
               </div>
             </div>`;
-  console.log(message);
-});
+    });
+  }
+};
+getQueries();
diff --git a/admin/styles/admin.css b/admin/styles/admin.css
index 5649838..1a39942 100644
--- a/admin/styles/admin.css
+++ b/admin/styles/admin.css
@@ -135,6 +135,33 @@ body{
   display:grid;
   grid-template-columns: 1fr 2fr 1.5fr;
 }
+.section-container{
+position: relative;
+}
+.popupCreate .success{
+  position:absolute;
+  top:0px;
+  left:1000px;
+  background-color:green;
+  padding:20px;
+  width:200px;
+  height:40px;
+  display:flex;
+  z-index:2;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}
+
+.fade-out{
+  color:white;
+  font-family: Raleway;
+  font-weight: 500;
+  font-size: 15px;
+}
+.fadeout{
+  display:none;
+}
 .left-sidebar{
   border-right:1px solid var(--bordersides);
   width:17vw;
diff --git a/admin/styles/contacts.css b/admin/styles/contacts.css
index 88792ff..6a4df64 100644
--- a/admin/styles/contacts.css
+++ b/admin/styles/contacts.css
@@ -37,6 +37,33 @@
   width:110%;
   padding:10px;
 }
+.sections-container{
+  position:relative
+}
+.popupCreate .success{
+  position:absolute;
+  top:0px;
+  left:1000px;
+  background-color:green;
+  padding:20px;
+  width:200px;
+  height:40px;
+  display:flex;
+  z-index:2;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}
+
+.fade-out{
+  color:white;
+  font-family: Raleway;
+  font-weight: 500;
+  font-size: 15px;
+}
+.fadeout{
+  display:none;
+}
 .section-content{
   display:grid;
   grid-gap:40px;
@@ -70,4 +97,4 @@
 .fa-reply{
   color:var(--textColor);
   font-size: 12px;
-}
\ No newline at end of file
+}
diff --git a/admin/styles/mobileview.css b/admin/styles/mobileview.css
index acc2c4c..0b070cc 100644
--- a/admin/styles/mobileview.css
+++ b/admin/styles/mobileview.css
@@ -228,6 +228,31 @@ body{
   width:20vw;
   height:5vh;
 }
+
+.popupCreate .success{
+  position:absolute;
+  top:0px;
+  left:200px;
+  background-color:green;
+  padding:20px;
+  width:200px;
+  height:40px;
+  display:flex;
+  z-index:2;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}
+
+.fade-out{
+  color:white;
+  font-family: Raleway;
+  font-weight: 500;
+  font-size: 15px;
+}
+.fadeout{
+  display:none;
+}
 /* delete a blog model */
 
 .comfirm{
diff --git a/article.html b/article.html
index 5359183..1632831 100644
--- a/article.html
+++ b/article.html
@@ -4,11 +4,16 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
   <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
   <link rel="stylesheet" href="./styles/article.css"/>
+  <link rel="stylesheet" href="./styles/notification.css"/>
   <title>Blog-article</title>
 
 </head>
@@ -37,11 +42,9 @@
   
   <div class="container">
     <div class="content">
+      <div class="input-field popupCreate"></div>
       <div class="blog-article-content">
 
-        
-        
-
       </div>
       <div class="likes">
         <i class="fa fa-thumbs-up" aria-hidden="true"></i>
diff --git a/favicon_io/about.txt b/favicon_io/about.txt
new file mode 100755
index 0000000..8dbd3e7
--- /dev/null
+++ b/favicon_io/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Norican
+- Font Author: Copyright (c) 2011 by vernon adams (www.newtypography.co.uk), with Reserved Font Names "Norican"
+- Font Source: http://fonts.gstatic.com/s/norican/v12/MwQ2bhXp1eSBqjkPGJJRtGs-lbA.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
diff --git a/favicon_io/android-chrome-192x192.png b/favicon_io/android-chrome-192x192.png
new file mode 100755
index 0000000..d008b1c
Binary files /dev/null and b/favicon_io/android-chrome-192x192.png differ
diff --git a/favicon_io/android-chrome-512x512.png b/favicon_io/android-chrome-512x512.png
new file mode 100755
index 0000000..16335b3
Binary files /dev/null and b/favicon_io/android-chrome-512x512.png differ
diff --git a/favicon_io/apple-touch-icon.png b/favicon_io/apple-touch-icon.png
new file mode 100755
index 0000000..4fa9926
Binary files /dev/null and b/favicon_io/apple-touch-icon.png differ
diff --git a/favicon_io/favicon-16x16.png b/favicon_io/favicon-16x16.png
new file mode 100755
index 0000000..67613bc
Binary files /dev/null and b/favicon_io/favicon-16x16.png differ
diff --git a/favicon_io/favicon-32x32.png b/favicon_io/favicon-32x32.png
new file mode 100755
index 0000000..e45a138
Binary files /dev/null and b/favicon_io/favicon-32x32.png differ
diff --git a/favicon_io/favicon.ico b/favicon_io/favicon.ico
new file mode 100755
index 0000000..b0a708c
Binary files /dev/null and b/favicon_io/favicon.ico differ
diff --git a/favicon_io/manifest.json b/favicon_io/manifest.json
new file mode 100755
index 0000000..58340f5
--- /dev/null
+++ b/favicon_io/manifest.json
@@ -0,0 +1,31 @@
+{
+  "name": "Richard Munyemana",
+  "short_name": "RM",
+  "start_url": "index.html",
+  "display": "standalone",
+  "background_color": "#fdfdfd",
+  "theme_color": "#db4938",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/favicon_io/android-chrome-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/favicon_io/android-chrome-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/favicon_io/favicon-16x16.png",
+      "type": "image/png",
+      "sizes": "16x16"
+    },
+    {
+      "src": "/favicon_io/favicon-32x32.png",
+      "type": "image/png",
+      "sizes": "32x32"
+    }
+  ]
+}
diff --git a/index.html b/index.html
index f7fbbba..bf1f9a8 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="./favicon_io/manifest.json">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="apple-touch-icon" type="image/png" sizes="32x32" href="./favicon_io/favicon-32x32.png">
+    <link rel="apple-touch-icon" type="image/png" sizes="16x16" href="./favicon_io/favicon-16x16.png">
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -445,6 +449,8 @@ <h3 class="title">BLOG</h3>
 
     <section class="contact-container" id="contact-link">
       <div class="contact-content">
+
+      <div class="input-field popupCreate"></div>
         <div class="contact-title">
           <h3 class="title-contact">Contact</h3>
           <div class="contact-line"></div>
@@ -454,7 +460,7 @@ <h3 class="title-contact">Contact</h3>
         </div>
         <form class="contact-inputs">
           <div class="input-group">
-            <input type="text" name="name" id="name" class="guest-name" placeholder="Name" required>
+            <input type="text" name="guestName" id="name" class="guest-name" placeholder="Name" required>
             <span class="name error-message"></span>
           </div>
           <div class="input-group">
diff --git a/js/blog.js b/js/blog.js
index 0f5332d..77089e9 100644
--- a/js/blog.js
+++ b/js/blog.js
@@ -1,10 +1,145 @@
-
-
 const navBar = document.querySelector(".profile-full");
+const showLikes = document.querySelector(".likes-data");
+const liked = document.querySelector(".fa-thumbs-up");
+const SubmitComments = document.querySelector(".comment-btn");
+const popCreate = document.querySelector(".popupCreate");
 
 const urlParams = new URLSearchParams(window.location.search);
 const id = urlParams.get("id");
 let article = document.querySelector(".blog-article-content");
+fetch(`https://my-brand-server.herokuapp.com/api/v1/posts/${id}`, {
+  method: "get",
+  headers: {
+    "content-Type": "application/json",
+  },
+})
+  .then((res) => res.json())
+  .then((data) => {
+    if (data.status !== 200) {
+      popCreate.innerHTML = `<p class="fade-out">${data.message}</p>`;
+    } else {
+      popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+      setTimeout(() => {
+        const removeElement = document.querySelector(".success");
+        removeElement.remove();
+      }, 3000);
+      article.innerHTML = `<div class="blog-image">
+      <img src="${data?.data?.imageUrl}" alt="dockeriziation working ahead" class="blog-picture">
+      </div>
+      <div class="blogger-profile-date">
+      <div class="blogger-image">
+      <img src="./assets/rich-bw.jpg" alt="blog owner profile picture" class="blogger">
+      </div>
+      <div class="blogger-name-date">
+      <h6 class="blogger-name">Rich Munye</h6>
+      <p class="date-posted">March, 12, 2021</p>
+      </div>
+      </div>
+      <div class="blog-title-container">
+      <h3 class="title-blog">
+      ${data?.data?.title}
+      </h3>
+      </div>
+      <div class="blog-full-content">
+      <p class="blog-content-full">
+      ${data?.data?.content}
+      </p>
+      
+      </div>
+      <div class="blog-final-line">`;
+      showLikes.innerText = `${data.data.likes} likes`;
+      getAllComments();
+    }
+  })
+  .catch((err) => console.log(err));
+liked.addEventListener("click", async () => {
+  const res = await fetch(
+    `https://my-brand-server.herokuapp.com/api/v1/post/${id}/likes`,
+    {
+      method: "post",
+      headers: {
+        "content-Type": "application/json",
+      },
+    }
+  );
+  const likes = await res.json();
+  console.log(likes);
+  showLikes.innerText = `${likes.data.likes} likes`;
+  popCreate.innerHTML = `<div class="success"><p class="fade-out ">${likes.message}</p></div>`;
+  setTimeout(() => {
+    const removeElement = document.querySelector(".success");
+    removeElement.remove();
+  }, 3000);
+});
+
+const createComment = async () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const id = urlParams.get("id");
+  const name = document.querySelector(".names");
+  const comment = document.querySelector("#comment");
+  const res3 = await fetch(
+    `https://my-brand-server.herokuapp.com/api/v1/${id}/comment`,
+    {
+      method: "post",
+      headers: {
+        "content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        name: name.value,
+        comment: comment.value,
+      }),
+    }
+  );
+  const data = await res3.json();
+  console.log(data);
+  popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+  setTimeout(() => {
+    const removeElement = document.querySelector(".success");
+    removeElement.remove();
+    window.location.reload();
+  }, 3000);
+};
+
+SubmitComments.addEventListener("click", createComment);
+const getAllComments = async () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const assignData = document.querySelector(".comments-container");
+  const id = urlParams.get("id");
+  const res2 = await fetch(
+    `https://my-brand-server.herokuapp.com/api/v1/${id}/all-comments`,
+    {
+      method: "get",
+    }
+  );
+  const CommentsRetrieved = await res2.json();
+  console.log(CommentsRetrieved);
+  const commentsList = CommentsRetrieved?.data?.comments;
+  console.log(commentsList);
+  commentsList?.forEach((comment) => {
+    console.log(comment.time);
+    assignData.innerHTML += `
+    <div class="comment-guest">
+        <div class="guest-profile">
+          <img src="./assets/rich-bw.jpg" alt="guest profile picture" class="guest">
+        </div>
+
+      <div class="comment-holder">
+        <div class="guest-comment">
+          <h6 class="guest-name">${comment.name}</h6>
+          <p class="guest-dot">.</p>
+          <p class="date">Dec, 2, 2021</p>
+        </div>
+        <div class="comment-description">
+          <p class="comment">
+            ${comment.comment}
+          </p>
+        </div>
+      </div>
+      </div>`;
+  });
+};
+
+getAllComments();
 console.log(id);
 const getArticle = JSON.parse(localStorage.getItem("blogList"));
 const getUser = JSON.parse(localStorage.getItem("loginCredentials"));
@@ -20,30 +155,7 @@ if (getUser) {
 getArticle?.forEach((element) => {
   if (id == element.id) {
     console.log(id, element.id);
-    article.innerHTML = `<div class="blog-image">
-          <img src="${element.imageUrl}" alt="dockeriziation working ahead" class="blog-picture">
-        </div>
-        <div class="blogger-profile-date">
-          <div class="blogger-image">
-            <img src="./assets/rich-bw.jpg" alt="blog owner profile picture" class="blogger">
-          </div>
-          <div class="blogger-name-date">
-            <h6 class="blogger-name">Rich Munye</h6>
-            <p class="date-posted">March, 12, 2021</p>
-          </div>
-        </div>
-        <div class="blog-title-container">
-          <h3 class="title-blog">
-            ${element.title}
-          </h3>
-        </div>
-        <div class="blog-full-content">
-        <p class="blog-content-full">
-        ${element.description}
-        </p>
-        
-        </div>
-        <div class="blog-final-line">`;
+
     console.log(element);
   } else {
     console.log("this article does not exist");
diff --git a/js/blogs.js b/js/blogs.js
index ea0025f..4669bfb 100644
--- a/js/blogs.js
+++ b/js/blogs.js
@@ -3,18 +3,25 @@
 const getData = JSON.parse(localStorage.getItem("blogList"));
 console.log(getData);
 let blogCardElement = document.querySelector(".blog-list");
-
-getData?.forEach((element) => {
-  let body = element?.description.slice(0, 120) + "....";
-
-  blogCardElement.innerHTML += `
-           <a href="./article.html?id=${element.id}" data-id=${element.id}> 
+fetch("https://my-brand-server.herokuapp.com/api/v1/posts", {
+  method: "get",
+  headers: {
+    "content-Type": "application/json",
+  },
+})
+  .then((res) => res.json())
+  .then((data) => {
+    const retrievedData = data.data;
+    retrievedData?.map((article) => {
+      let body = article?.content?.slice(0, 120) + "....";
+      blogCardElement.innerHTML += `
+           <a href="./article.html?id=${article._id}" data-id=${article._id}> 
                <div class="blog-card">
               <div class="blog-image">
-                <img src="${element.imageUrl}" alt="importance of reading" width="400" height="350"/>
+                <img src="${article.imageUrl}" alt="importance of reading" width="400" height="350"/>
               </div>
               <div class="blog-title-date">
-                <h3 class="title-blog">${element.title}</h3>
+                <h3 class="title-blog">${article.title}</h3>
                 <p class="date">march, 12,2021</p>
                 <div class="blog-line"></div>
               </div>
@@ -24,13 +31,19 @@ getData?.forEach((element) => {
                <div class="likes-comment-view">
                 <div class="likes">
                   <i class="fa fa-thumbs-up" aria-hidden="true"></i>
-                  <p class="likes-data">${element.like} likes</p>
+                  <p class="likes-data">${article.likes} likes</p>
                 </div>
                 <div class="comments">
                   <i class="fa fa-comments" aria-hidden="true"></i>
-                  <p class="comments-data">${element.numberOfComments} comments</p>
+                  <p class="comments-data">${article.commentsCount} comments</p>
                 </div>
               </div>
             </div>
             </a>`;
-});
+    });
+  })
+  .catch((err) => {
+    console.log(err, "this is not working here");
+  });
+
+
diff --git a/js/likeComment.js b/js/likeComment.js
index 6852a1b..b1e465f 100644
--- a/js/likeComment.js
+++ b/js/likeComment.js
@@ -1,8 +1,19 @@
 const commentData = document.querySelector("form");
 const SubmitComment = document.querySelector(".comment-btn");
-
+const urlParamss = new URLSearchParams(window.location.search);
+const ids = urlParamss.get("id");
 const getBlogsData = JSON.parse(localStorage.getItem("blogList"));
 console.log(getBlogsData);
+
+fetch(`https://my-brand-server.herokuapp.com/api/v1/posts/${ids}`, {
+  method: "get",
+  headers: {
+    "content-Type": "application/json",
+  },
+})
+  .then((res) => res.json())
+  .then((data) => {})
+  .catch((err) => console.log(err));
 const Params = new URLSearchParams(window.location.search);
 const articleId = Params.get("id");
 getBlogsData?.forEach((element) => {
diff --git a/js/validations/contactMessage.js b/js/validations/contactMessage.js
index 299047e..b95ae45 100644
--- a/js/validations/contactMessage.js
+++ b/js/validations/contactMessage.js
@@ -1,138 +1,154 @@
 const contactForm = document.querySelector(".contact-inputs");
- let Messages = [];
- const handleContact = (e) => {
-   e.preventDefault();
-   const contactFormData = new FormData(contactForm).entries();
-   const { name, email, message } = Object.fromEntries(contactFormData);
-   const guestNameErrorMessage = validateGuestName(name);
-   const contactEmailErrorMessage = validateEmail(email);
-   const descriptionErrorMessage = validateDescription(message);
+const name = document.getElementsByName("name").value;
+const email = document.getElementsByName("email").value;
+const message = document.getElementsByName("message").value;
+const popCreate = document.querySelector(".popupCreate");
+let Messages = [];
+const handleContact = (e) => {
+  e.preventDefault();
+  const contactFormData = new FormData(contactForm).entries();
+  const { guestName, email, message } = Object.fromEntries(contactFormData);
+  const guestNameErrorMessage = validateGuestName(guestName);
+  const contactEmailErrorMessage = validateEmail(email);
+  const descriptionErrorMessage = validateDescription(message);
 
-   if (guestNameErrorMessage) {
-     const guestNameErrorMessageElement = document.querySelector(
-       ".name.error-message"
-     );
-     guestNameErrorMessageElement.innerText = guestNameErrorMessage;
-     if (contactEmailErrorMessage) {
-       const contactEmailErrorMessageElement = document.querySelector(
-         ".email.error-message"
-       );
-       contactEmailErrorMessageElement.innerText = contactEmailErrorMessage;
-     }
-     if (descriptionErrorMessage) {
-       const descriptionErrorMessageElement = document.querySelector(
-         ".text-area.error-message"
-       );
-       descriptionErrorMessageElement.innerText = descriptionErrorMessage;
-     }
-   }
-   if (
-     (guestNameErrorMessage === " ") &
-     (contactEmailErrorMessage === " ") &
-     (descriptionErrorMessage === " ")
-   ) {
-     const guestNameErrorMessageElement = document.querySelector(
-       ".name.error-message"
-     );
-     guestNameErrorMessageElement.classList.add("hidden");
-     guestNameErrorMessageElement.innerText = " ";
+  if (guestNameErrorMessage) {
+    const guestNameErrorMessageElement = document.querySelector(
+      ".name.error-message"
+    );
+    guestNameErrorMessageElement.innerText = guestNameErrorMessage;
+    if (contactEmailErrorMessage) {
+      const contactEmailErrorMessageElement = document.querySelector(
+        ".email.error-message"
+      );
+      contactEmailErrorMessageElement.innerText = contactEmailErrorMessage;
+    }
+    if (descriptionErrorMessage) {
+      const descriptionErrorMessageElement = document.querySelector(
+        ".text-area.error-message"
+      );
+      descriptionErrorMessageElement.innerText = descriptionErrorMessage;
+    }
+  }
+  if (
+    (guestNameErrorMessage === " ") &
+    (contactEmailErrorMessage === " ") &
+    (descriptionErrorMessage === " ")
+  ) {
+    const guestNameErrorMessageElement = document.querySelector(
+      ".name.error-message"
+    );
+    guestNameErrorMessageElement.classList.add("hidden");
+    guestNameErrorMessageElement.innerText = " ";
 
-     const contactEmailErrorMessageElement = document.querySelector(
-       ".email.error-message"
-     );
-     contactEmailErrorMessageElement.classList.add("hidden");
+    const contactEmailErrorMessageElement = document.querySelector(
+      ".email.error-message"
+    );
+    contactEmailErrorMessageElement.classList.add("hidden");
 
-     const descriptionErrorMessageElement = document.querySelector(
-       ".text-area.error-message"
-     );
-     descriptionErrorMessageElement.classList.add("hidden");
+    const descriptionErrorMessageElement = document.querySelector(
+      ".text-area.error-message"
+    );
+    descriptionErrorMessageElement.classList.add("hidden");
 
-     function getLocation() {
-       if (navigator.geolocation) {
-         navigator.geolocation.getCurrentPosition(showPosition, showError);
-       } else {
-         console.log("The Browser Does not Support Geolocation");
-       }
-     }
+    function getLocation() {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(showPosition, showError);
+      } else {
+        console.log("The Browser Does not Support Geolocation");
+      }
+    }
 
-     async function showPosition(position) {
-       const { latitude, longitude } = position.coords;
-       const response = await fetch(
-         `https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=312f08e67dbc4295bfacafdfd8a9d3bc`
-       );
-       const results = await response.json();
-       const userLoc = JSON.stringify(results.results[0].formatted);
-       localStorage.setItem("userLocation", userLoc);
-     }
+    async function showPosition(position) {
+      const { latitude, longitude } = position.coords;
+      const response = await fetch(
+        `https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=312f08e67dbc4295bfacafdfd8a9d3bc`
+      );
+      const results = await response.json();
+      const userLoc = JSON.stringify(results.results[0].formatted);
+      localStorage.setItem("userLocation", userLoc);
+    }
 
-     function showError(error) {
-       switch (error.code) {
-         case error.PERMISSION_DENIED:
-           console.log("User denied the request for Geolocation.");
-           break;
-         case error.POSITION_UNAVAILABLE:
-           console.log("Location information is unavailable.");
-           break;
-         case error.TIMEOUT:
-           console.log("The request to get user location timed out.");
-           break;
-         case error.UNKNOWN_ERROR:
-           conole.log("An unknown error occurred.");
-           break;
-       }
-     }
+    function showError(error) {
+      switch (error.code) {
+        case error.PERMISSION_DENIED:
+          console.log("User denied the request for Geolocation.");
+          break;
+        case error.POSITION_UNAVAILABLE:
+          console.log("Location information is unavailable.");
+          break;
+        case error.TIMEOUT:
+          console.log("The request to get user location timed out.");
+          break;
+        case error.UNKNOWN_ERROR:
+          conole.log("An unknown error occurred.");
+          break;
+      }
+    }
 
-     getLocation();
+    getLocation();
 
-     function addMessage() {
-       const userLocation = JSON.parse(localStorage.getItem("userLocation"));
-       const contactMessage = {
-         id: Date.now(),
-         name: name,
-         email: email,
-         message: message,
-         userLocation: userLocation,
-       };
-       const getMessages = JSON.parse(localStorage.getItem("contact-message"))
-       if (getMessages?.length >= 1) {
-         getMessages.push(contactMessage);
-         localStorage.removeItem("userLocation");
-         document.querySelector("form").reset();
+    async function addMessage() {
+      const userLocation = JSON.parse(localStorage.getItem("userLocation"));
+      const contactMessage = {
+        guestName: guestName,
+        email: email,
+        message: message,
+      };
+      const createMessage = await fetch(
+        "https://my-brand-server.herokuapp.com/api/v1/queries/send-message",
+        {
+          method: "post",
+          headers: {
+            "content-Type": "application/json",
+          },
+          body: JSON.stringify(contactMessage),
+        }
+      );
+      const response = await createMessage.json();
+      popCreate.innerHTML = `<div class="success"><p class="fade-out ">${response.message}</p></div>`;
+      setTimeout(() => {
+        const removeElement = document.querySelector(".success");
+        removeElement.remove();
+        // window.location.reload();
+      }, 3000);
 
-         const saveMessage = "\n" + JSON.stringify(getMessages, "\t", 2);
-         localStorage.setItem("contact-message", saveMessage);
-       } else {
-         Messages.push(contactMessage);
-         localStorage.removeItem("userLocation");
-         console.warn(Messages);
-         document.querySelector("form").reset();
+      const getMessages = JSON.parse(localStorage.getItem("contact-message"));
+      if (getMessages?.length >= 1) {
+        getMessages.push(contactMessage);
+        localStorage.removeItem("userLocation");
+        document.querySelector("form").reset();
 
-         const Message = "\n" + JSON.stringify(Messages, "\t", 2);
-         localStorage.setItem("contact-message", Message);
-       }
-       
-     }
-     addMessage();
-   }
-     
+        const saveMessage = "\n" + JSON.stringify(getMessages, "\t", 2);
+        localStorage.setItem("contact-message", saveMessage);
+      } else {
+        Messages.push(contactMessage);
+        localStorage.removeItem("userLocation");
+        console.warn(Messages);
+        document.querySelector("form").reset();
 
-     
- };
- const validateGuestName = (name) => {
-   if (!name.trim()) return "name is required";
-   return " "
- };
- const validateEmail = (email) => {
-   if (!email.trim()) return "email is required";
-   const emailValidated = /\S+@\S+\.\S+/;
-   if (!emailValidated.test(email)) return "please enter a valid email";
-   return " "
- };
+        const Message = "\n" + JSON.stringify(Messages, "\t", 2);
+        localStorage.setItem("contact-message", Message);
+      }
+    }
+    addMessage();
+  }
+};
+const validateGuestName = (guestName) => {
+  if (!guestName?.trim()) return "name is required";
+  return " ";
+};
+const validateEmail = (email) => {
+  if (!email?.trim()) return "email is required";
+  const emailValidated = /\S+@\S+\.\S+/;
+  if (!emailValidated.test(email)) return "please enter a valid email";
+  return " ";
+};
 
- const validateDescription = (message) => {
-   if (!message.trim()) return "Message is required";
-   return " "
- };
+const validateDescription = (message) => {
+  if (!message?.trim()) return "Message is required";
+  return " ";
+};
  const contactSubmitBtn = document.querySelector(".contact-btns");
  document.addEventListener("DOMContentLoaded", () => {
    contactSubmitBtn.addEventListener("click", handleContact);
diff --git a/js/validations/loginformValidation.js b/js/validations/loginformValidation.js
index addebf8..da1094a 100644
--- a/js/validations/loginformValidation.js
+++ b/js/validations/loginformValidation.js
@@ -1,4 +1,6 @@
 // validator.initialize();;
+const popCreate = document.querySelector(".popupCreate");
+
 const loginForm = document.querySelector("form");
 const handleLogin = (e) => {
   e.preventDefault();
@@ -43,7 +45,20 @@ const handleLogin = (e) => {
         return res.json();
       })
       .then((data) => {
-        if (data.status === 200) {
+        if (data.status !== 200) {
+          popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+          setTimeout(() => {
+            const removeElement = document.querySelector(".success");
+            removeElement?.remove();
+            // window.location.reload();
+          }, 3000);
+        } else {
+          popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+          setTimeout(() => {
+            const removeElement = document.querySelector(".success");
+            removeElement.remove();
+            // window.location.reload();
+          }, 3000);
           const token = data.data.token;
           console.log(token, data.data.foundEmail.role);
           const loginCredentials = {
@@ -64,9 +79,6 @@ const handleLogin = (e) => {
           }
         }
       });
-   
-   
-    
   }
 };
 const validateEmail = (email) => {
diff --git a/js/validations/registerformValidation.js b/js/validations/registerformValidation.js
new file mode 100644
index 0000000..814c68f
--- /dev/null
+++ b/js/validations/registerformValidation.js
@@ -0,0 +1,113 @@
+// validator.initialize();;
+const popCreate = document.querySelector(".popupCreate");
+
+const loginForm = document.querySelector("form");
+const handleRegister = (e) => {
+  e.preventDefault();
+  const formData = new FormData(loginForm).entries();
+  const { email, password, userName } = Object.fromEntries(formData);
+  // console.log("keeeee");
+  const emailErrorMessage = validateEmail(email);
+  const passowrdErrorMessage = validatePassword(password, 6);
+  const UserNameErrorMessage = validateUserName(userName);
+
+  if (UserNameErrorMessage) {
+    const UserNameErrorMessageElement = document.querySelector(
+      ".userName.error-message"
+    );
+    // show email error message to user
+    UserNameErrorMessageElement.innerText = UserNameErrorMessage;
+  }
+
+  if (emailErrorMessage) {
+    // select the email form field message element
+    const emailErrorMessageElement = document.querySelector(
+      ".email.error-message"
+    );
+    // show email error message to user
+    emailErrorMessageElement.innerText = emailErrorMessage;
+  }
+
+  if (passowrdErrorMessage) {
+    // select the email form field message element
+    const passwordErrorMessageElement = document.querySelector(
+      ".password.error-message"
+    );
+    // show password error message to user
+    passwordErrorMessageElement.innerText = passowrdErrorMessage;
+  }
+  if (
+    (emailErrorMessage === " ") &
+    (passowrdErrorMessage === " ") &
+    (UserNameErrorMessage === " ")
+  ) {
+    fetch("https://my-brand-server.herokuapp.com/api/v1/users/register", {
+      method: "POST",
+      headers: {
+        "content-Type": "application/json",
+        "Access-Control-Cross-origin": "*",
+      },
+      body: JSON.stringify({
+        userName,
+        email,
+        password,
+      }),
+    })
+      .then((res) => {
+        email === null;
+        password === null;
+        return res.json();
+      })
+      .then((data) => {
+        if (data.status !== 200) {
+          popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+          setTimeout(() => {
+            const removeElement = document.querySelector(".success");
+            removeElement?.remove();
+            // window.location.reload();
+          }, 3000);
+        } else {
+          popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+          setTimeout(() => {
+            const removeElement = document.querySelector(".success");
+            removeElement.remove();
+            // window.location.reload();
+          }, 3000);
+          window.location.href("./login.html");
+        }
+      });
+  }
+};
+const validateEmail = (email) => {
+  if (!email.trim()) return "email is required";
+  const emailValidated = /\S+@\S+\.\S+/;
+  if (!emailValidated.test(email)) {
+    return "please enter a valid email";
+  }
+
+  return " ";
+};
+const validateUserName = (userName) => {
+  if (!userName?.trim()) return "userName is required";
+  return " ";
+};
+const validatePassword = (password, minLength) => {
+  if (!password) return "Password is required";
+  if (password.length < minLength) {
+    return `Please enter a password that's at least ${minLength} characters long`;
+  }
+
+  const hasCapitalLetter = /[A-Z]/g;
+  if (!hasCapitalLetter.test(password)) {
+    return "Please use at least one capital letter.";
+  }
+
+  const hasNumber = /\d/g;
+  if (!hasNumber.test(password)) {
+    return "Please use at least one number.";
+  }
+  return " ";
+};
+
+const loginBtn = document.querySelector(".login-btn");
+loginBtn.addEventListener("click", handleRegister);
diff --git a/login.html b/login.html
index e3426fc..d9b06c1 100644
--- a/login.html
+++ b/login.html
@@ -4,12 +4,18 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
   <link rel="stylesheet" href="styles/login.css">
   <title>login Page</title>
 </head>
 <body>
-  <div class="container">  
+  <div class="container">
     <div class="content">
+
+      <div class="input-field popupCreate"></div>
       <h2 class="title">Welcome <span>ADMIN.</span></h2>
       <form action="#" class="login-content"> 
         <div class="input-group">
diff --git a/register.html b/register.html
new file mode 100644
index 0000000..3b9a7a7
--- /dev/null
+++ b/register.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="stylesheet" href="styles/register.css">
+  <title>login Page</title>
+</head>
+<body>
+  <div class="container">
+    <div class="content">
+
+      <div class="input-field popupCreate"></div>
+      <h2 class="title">Welcome <span>Please Register</span></h2>
+      <form action="#" class="login-content"> 
+        <div class="input-group">
+          <input autofocus type='text' placeholder="userName" name="userName" class="input input-error" required id="userName">
+          <span class="userName error-message"></span>
+        </div>
+        <div class="input-group">
+          <input type='email' placeholder="Enter your email" name="email" class="input input-error" required id="email">
+          <span class="email error-message"></span>
+        </div>
+        <div class="input-group">
+          <input type='password' required placeholder="Enter your password" class="input input-error"name="password" id="password">
+          <span class="password error-message"></span>
+        </div>
+        
+        <!-- <a href="./admin/admin.html"> -->
+          <div class="login-btn " type="submit">Register</div>
+        <!-- </a> -->
+        <div class="back-links">
+          <div class="back-to-home">Go back<a href="./index.html" class="go-back"> Home</a></div>
+        
+          <div class="back-to-login"><a href="./login.html" class="go-back">Sign in</a> instead</div>
+        </div>
+        
+        
+      </form>
+      
+    </div>
+  </div>
+  <script src="./js/validations/registerformValidation.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/styles/article.css b/styles/article.css
index ecac94b..fff7f08 100644
--- a/styles/article.css
+++ b/styles/article.css
@@ -236,9 +236,8 @@
 }
 .comment-btn{
   position:absolute;
-  top:300px;
-  left:555px;
-  right:0;
+  top:320px;
+  right:110px;
   padding:10px;
   text-align:center;
   width:9vw;
@@ -374,6 +373,19 @@
     width:95%;
     padding:0px;
   }
+  .comment-btn{
+    position:absolute;
+    top:320px;
+    right:70px;
+    padding:10px;
+    text-align:center;
+    width:30vw;
+    font-family: Raleway;
+    font-weight:600;
+    border-radius:10px ;
+    border: 3px solid var(--textColor);
+  
+  }
   .comment-guest{
   width:95%;
   padding:10px;
diff --git a/styles/contact.css b/styles/contact.css
index bff1e28..100dee1 100644
--- a/styles/contact.css
+++ b/styles/contact.css
@@ -37,6 +37,31 @@
 .contact-content{
   width:40%;
   text-align:center;
+  position: relative;
+}
+.popupCreate .success{
+  position:absolute;
+  top:0px;
+  left:800px;
+  background-color:green;
+  padding:20px;
+  width:200px;
+  height:40px;
+  display:flex;
+  z-index:2;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}
+
+.fade-out{
+  color:white;
+  font-family: Raleway;
+  font-weight: 500;
+  font-size: 15px;
+}
+.fadeout{
+  display:none;
 }
 .contact-title{
   position:relative;
@@ -319,4 +344,33 @@
     margin:10px;
     font-size: 15px;
   }
+  .contact-content{
+    width:40%;
+    text-align:center;
+    position: relative;
+  }
+  .popupCreate .success{
+    position:absolute;
+    top:0px;
+    left:200px;
+    background-color:green;
+    padding:20px;
+    width:200px;
+    height:40px;
+    display:flex;
+    z-index:2;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+  }
+  
+  .fade-out{
+    color:white;
+    font-family: Raleway;
+    font-weight: 500;
+    font-size: 15px;
+  }
+  .fadeout{
+    display:none;
+  }
 }
\ No newline at end of file
diff --git a/styles/login.css b/styles/login.css
index c913959..8a17801 100644
--- a/styles/login.css
+++ b/styles/login.css
@@ -25,6 +25,30 @@
   background-color: #1B242F;
   position: relative;
 }
+.popupCreate .success{
+  position:absolute;
+  top:-140px;
+  left:690px;
+  background-color:green;
+  padding:20px;
+  width:200px;
+  height:40px;
+  display:flex;
+  z-index:2;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}
+
+.fade-out{
+  color:white;
+  font-family: Raleway;
+  font-weight: 500;
+  font-size: 15px;
+}
+.fadeout{
+  display:none;
+}
 .content{
   background: rgba(196, 196, 196, 0.1);
   display:flex;
@@ -70,6 +94,7 @@
   margin-top:60px;
   color:#5A5A5A
 }
+
 .input.input-error{
   border:1px solid red;
 }
@@ -161,4 +186,28 @@
   .go-back{
     margin-top:40px;
   }
+  .popupCreate .success{
+    position:absolute;
+    top:-120px;
+    left:100px;
+    background-color:green;
+    padding:20px;
+    width:200px;
+    height:40px;
+    display:flex;
+    z-index:2;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+  }
+  
+  .fade-out{
+    color:white;
+    font-family: Raleway;
+    font-weight: 500;
+    font-size: 15px;
+  }
+  .fadeout{
+    display:none;
+  }
 }
\ No newline at end of file
diff --git a/styles/notification.css b/styles/notification.css
new file mode 100644
index 0000000..5bd574f
--- /dev/null
+++ b/styles/notification.css
@@ -0,0 +1,27 @@
+.container{
+  position:relative
+}
+.popupCreate .success{
+  position:absolute;
+  top:70px;
+  left:1100px;
+  background-color:green;
+  padding:20px;
+  width:300px;
+  height:40px;
+  display:flex;
+  z-index:2;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}
+
+.fade-out{
+  color:white;
+  font-family: Raleway;
+  font-weight: 500;
+  font-size: 15px;
+}
+.fadeout{
+  display:none;
+}
\ No newline at end of file
diff --git a/styles/register.css b/styles/register.css
new file mode 100644
index 0000000..87a9ddc
--- /dev/null
+++ b/styles/register.css
@@ -0,0 +1,239 @@
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Nunito:wght@200;300;400;600;700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,700&display=swap');
+
+:root{
+  --headerback:#252934;
+  --navback:#1B242F;
+  --navborder:#04C2C9;
+  --textColor:#E31B6D;
+  --textwhite:#ffff;
+  --textSecondColor:#5A5A5A;
+  --skillBackground:#E5E2E2;
+  --skillanim:#04A4AA;
+  --titleText:#444649;
+  --projectback:#f5f5f5;
+}
+
+*{
+  padding:0;
+  margin:0;
+  font-family: "Relaway" sans-serif;
+}
+
+.container{
+  width:100%;
+  min-height:100vh;
+  background-color: #1B242F;
+  position: relative;
+}
+.popupCreate .success{
+  position:absolute;
+  top:-140px;
+  left:690px;
+  background-color:green;
+  padding:20px;
+  width:200px;
+  height:40px;
+  display:flex;
+  z-index:2;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}
+
+.fade-out{
+  color:white;
+  font-family: Raleway;
+  font-weight: 500;
+  font-size: 15px;
+}
+.fadeout{
+  display:none;
+}
+.back-links{
+  display:flex;
+  justify-content: space-between;
+  width:100%;
+}
+.back-to-home, .back-to-login{
+  color:white;
+  font-family: Raleway;
+  font-weight: 400;
+  font-size:15px;
+  padding-right:15px;
+}
+.content{
+  background: rgba(196, 196, 196, 0.1);
+  display:flex;
+  flex-direction: column;
+  width:30vw;
+  min-height:65vh;
+  border-radius: 10px;
+  position:absolute;
+  top:20%;
+  right:0;
+  left:0;
+  /* justify-content: center; */
+  margin:auto;
+  align-items:center;
+}
+.title{
+  margin-top:30px;
+  color:white;
+  font-weight:400;
+}
+.title span{
+  color:var(--textColor);
+  font-weight:700;
+}
+.login-content{
+  background-color: #252934;
+  min-height:40vh;
+  width:26vw;
+  border-radius: 10px;
+  display:flex;
+  margin-top:30px;
+  flex-direction: column;
+  text-align:center;
+  align-items: center;
+  padding: 12px;
+}
+#email{
+  padding:10px;
+  width:22vw;
+  background: #1E242C;
+  border:none;
+  border-radius:2px;
+  margin-top:35px;
+  color:#5A5A5A
+}
+#userName{
+  padding:10px;
+  width:22vw;
+  background: #1E242C;
+  border:none;
+  border-radius:2px;
+  margin-top:60px;
+  color:#5A5A5A
+}
+.input.input-error{
+  border:1px solid red;
+}
+#password{
+  padding:10px;
+  width:22vw;
+  background: #1E242C;
+  margin-top:35px;
+  border:none;
+  border-radius:2px;
+  color:#5A5A5A
+}
+.login-btn{
+  width:8vw;
+  background-color: var(#E31B6D);
+  height:40px;
+  color:white;
+  text-align:center;
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Raleway;
+  font-weight: 500;
+  border:4px solid var(--textColor);
+  margin:30px;
+  margin-left:245px;
+}
+.login-btn:hover{
+  background-color: var(--textColor);
+  transition:0.4s ease-in-out;
+  cursor:pointer;
+}
+.go-back{
+  color:var(--navborder);
+  font-family: Raleway;
+  font-weight:400;
+  margin-top: -10px;
+  text-decoration: none;
+}
+.hidden{
+  display:none;
+}
+.icon {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 32px;
+  right: 5px;
+  pointer-events: none;
+  z-index: 2;
+}
+.icon.icon-success {
+  fill: green;
+}
+
+.icon.icon-error {
+  fill: red;
+}
+.error-message {
+  font-size: .85rem;
+  color: red;
+  font-family:Raleway;
+  margin-top:.8rem;
+}
+@media screen and (max-width:768px){
+  .content{
+    width:80%;
+  }
+  .login-content{
+    width:85%;
+    margin-top:10px;
+    padding:5px;
+  }
+  #email{
+    width:80%;
+    margin-top:30px;
+    border-radius: 5px;
+  }
+  #userName{
+    width:80%;
+    margin-top:30px;
+    border-radius: 5px;
+  }
+  #password{
+    width:80%;
+    margin-top:20px;
+    border-radius:5px;
+  }
+  .login-btn{
+    width:25vw;
+    height:30px;
+    margin: auto;
+    margin-top:20px;
+  }
+  .go-back{
+    margin-top:40px;
+  }
+  .popupCreate .success{
+    position:absolute;
+    top:-120px;
+    left:100px;
+    background-color:green;
+    padding:20px;
+    width:200px;
+    height:40px;
+    display:flex;
+    z-index:2;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+  }
+  
+  .fade-out{
+    color:white;
+    font-family: Raleway;
+    font-weight: 500;
+    font-size: 15px;
+  }
+  .fadeout{
+    display:none;
+  }
+}
\ No newline at end of file