diff --git a/cardStyle.css b/cardStyle.css
index 4e024c3..9070bfa 100644
--- a/cardStyle.css
+++ b/cardStyle.css
@@ -68,10 +68,10 @@ nav ul a {
 
 .article-card {
 	width: 320px;
-	margin: 30rem 0;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
+	margin-top: 50px;
 }
 
 .article-card h1 {
@@ -83,7 +83,6 @@ nav ul a {
 
 .article-card p {
 	font-weight: 400;
-	font-size: 17px;
 	line-height: 22px;
 	margin: 15px 0;
 }
@@ -92,7 +91,7 @@ nav ul a {
 	margin-top: 30px;
 }
 .body-div2 {
-	display: flex;
+	margin: 40px;
 	flex-direction: row ;
 	/* justify-content: space-between; */
 	float: left;
@@ -215,4 +214,19 @@ text-align: center;
 background: #6C63FF;
 border-radius: 4px;
 color: #FFFFFF;
+}
+
+.post-date{
+	color: gray;
+	font-size: small;
+}
+
+.card-buttons a button{
+	background-color: gold;
+	border: none;
+	padding: 5px;
+	border-radius: 4px;
+	box-shadow: 0px 0px 6px rgba(128, 128, 128, 0.199);
+	margin: 5px;
+	cursor: pointer;
 }
\ No newline at end of file
diff --git a/displayCard.html b/displayCard.html
index a8ee226..c0e3f8c 100644
--- a/displayCard.html
+++ b/displayCard.html
@@ -10,9 +10,9 @@
     <nav>
         <img src="/assets/logo.svg" alt="logo" />
         <ul>
-            <li> <a href="/displayCard.html">My Blogs</a></li>
-            <li> <a href="/displayCard.html">Login</a></li>
-            <li> <a href="/displayCard.html">Sign Up</a></li> 
+            <li> <a href="displayCard.html">My Blogs</a></li>
+            <li> <a href="displayCard.html">Login</a></li>
+            <li> <a href="displayCard.html">Sign Up</a></li> 
         </ul>
     </nav>
     <div class="body-div1">
@@ -20,21 +20,10 @@
         <a ><button class="button" id="addBlog" ><i class="fas fa-plus-circle"></i>Add New Post</button></a>  
     </div>
     <div class="body-div2">
-        <div class="article-card" id="flashcard">
-            <!-- <img src="./assets/java card image.svg" alt=""> -->
-                <div class="card-text" id="card-text">
-                    <!-- <h1 id="blog-title">sda</h1> -->
-                    <!-- <p id="blog-description">da</p> -->
-                    <!-- <p>Posted on</p> -->
-                </div>
-                  <!-- <div class="card-buttons">
-                    <a><button type="button" id="edit">EDIT</button></a> <span>|</span><a ><button id="delete">DELETE</button></a>
-                </div> -->
-        </div>
     </div>
     <div id="popupContact">
-        <button id="close"> <img id="close" src="./assets/close-button.svg"></button>
-        <img id="rect" src=./assets/rect.svg>
+        <button id="close"> <img id="close" src="displayCard.html"></button>
+        <img id="rect" src=../assets/rect.svg>
         <h2>Your Post</h2>
         <div id="card" >
             <input type="hidden" name="blogId" value="" /> 
@@ -44,5 +33,5 @@ <h2>Your Post</h2>
         </div>
     </div>
 </body>
-<script src="/script.js"></script>
+<script src="script.js"></script>
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index e60691b..1354013 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,59 @@
 /* Fill your code*/
+class Blog{
+    constructor(title, detail){
+        this.title = title;
+        this.detail = detail;
+    }
+
+    addTitle() {
+        var title_card = document.createElement('h1');
+        title_card.setAttribute("id","blog-title");
+        console.log(title_card);
+        document.getElementById('card-text').appendChild(title_card);
+        title_card.innerHTML += this.title;
+    }
+
+    addDetails(){
+        var detail_card = document.createElement('p');
+        detail_card.setAttribute("id", "blog-description");
+        document.getElementById('card-text').appendChild(detail_card);
+        detail_card.innerHTML += this.detail;
+    }
+
+    addCard() {
+        document.querySelector(".body-div2").innerHTML += 
+        `<div class="article-card">
+            <img src="./assets/java card image.svg" alt="">
+                <div class="card-text" id="card-text">
+                    <h1>${this.title}</h1>
+                    <p>${this.detail}</p>
+                    <p class="post-date">Posted on</p>
+                </div>
+                <div class="card-buttons">
+                    <a><button type="button" id="edit">EDIT</button></a> <span>|</span><a ><button id="delete">DELETE</button></a>
+                </div>
+        </div>`
+    }
+
+
+}
+
+document.querySelector("#addBlog").onclick = ()=>{
+    document.querySelector("#popupContact").style.display = "inherit";
+}
+
+document.querySelector("#close").onclick = ()=>{
+    document.querySelector("#popupContact").style.display = "none";
+}
+
+
+
+document.querySelector("#post").onclick = ()=>{
+    let title = document.querySelector("#title").value;
+    let description = document.querySelector("#detail").value;
+
+    new Blog(title, description).addCard();
+    document.querySelector("#close").click();
+
+
+}
\ No newline at end of file