diff --git a/index.html b/index.html
index 4744229..a6e4a48 100644
--- a/index.html
+++ b/index.html
@@ -1,36 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-    <link rel="stylesheet" href="/src/style.css" />
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <link rel="stylesheet" href="/src/style.css" />
   <!-- Include Firebase Compatibility Build -->
-  <script type="module"  src="/src/script.js"></script>
+  <script type="module" src="/src/script.js"></script>
+  <script src="src/profile.js"></script>
 
 </head>
-  </head>
-  <body>
-    <main>
-      <div class="container">
+</head>
 
-        <input class="name-input" type="text">
-        <input class="insta-input" type="text">
+<body>
+
+  <main>
+    <div class="container">
+      <header class="header"><span class="head">Hit The Like Button</span></header>
+      <div class="input-wrapper">
+        <div>
+          <div>
+            <label class="label-name" for="name-input">Name</label>
+          </div>
+          <input id="name-input" class="name-input input" type="text">
+        </div>
+        <div>
+          <div>
+            <label class="label-insta" for="insta-input">Insta Id</label>
+          </div>
+          <input id="insta-input" class="insta-input input" type="text">
+        </div>
         <div class="msg-wrapper">
           <span class="msg">this is messege</span>
         </div>
 
-        <div class="like-wrapper">
-          <button class="btn">
-            <img class="like-btn" src="/src/greylike.png" alt="" />
-            <span>like</span>
-          </button>
+      </div>
+
+
+      <div class="like-wrapper">
+
+        <button class="btn">
+          <svg class="empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="10" height="10">
+            <path fill="none" d="M0 0H24V24H0z"></path>
+            <path
+              d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604c.881-.556 1.676-1.109 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903.745.592 1.54 1.145 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571z">
+            </path>
+          </svg>
+          <svg class="filled" height="30" width="30" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 0H24V24H0z" fill="none"></path>
+            <path
+              d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z">
+            </path>
+          </svg>
+        </button>
+
+      </div>
+
+      <div class="credit">
+        <div><span>Thanks For Your Like</span></div>
+
+        <div class="credit-conatiner">
+
+          <div><span class="credit-head">credit</span></div>
+          <div class="credit-wrapper">
+
+            <div class="credit-img-div"><img class="credit-img" src="src/credit.webp" alt=""></div>
+            <div class="credit-para">
+              <div><span class="developer-credit">developed by sujan thapa</span></div>
+              <div><span class="bio">made with love</span></div>
+
+            </div>
+          </div>
+
+
 
-          <div class="like-count">Likes: <span id="likeCount">0</span></div>
         </div>
+
+
+
+
       </div>
-    </main>
 
-    </script>
-  </body>
-</html>
+
+    </div>
+
+    <div class="user-names">
+      <div class="like-count">Likes: <span id="likeCount">0</span></div>
+      <div id="nameBackground"></div>
+    </div>
+  </main>
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4744229..0a96078 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,14 +11,19 @@
 </head>
   </head>
   <body>
+    <div>
+      <img class="profile" src="/src/profile.jpg" alt="">
+    </div>
     <main>
       <div class="container">
-
-        <input class="name-input" type="text">
-        <input class="insta-input" type="text">
-        <div class="msg-wrapper">
-          <span class="msg">this is messege</span>
+        <div>
+          <div class="card" id="imageCard">
+            <div class="close-card" onclick="closeCard()"><p>X</p></div>
+            <div class="card-image" id="cardImage"></div>
+          </div>
+          <div><button onclick="openCard()">Add Image</button></div>
         </div>
+      
 
         <div class="like-wrapper">
           <button class="btn">
diff --git a/src/credit.webp b/src/credit.webp
new file mode 100644
index 0000000..cbe82b6
Binary files /dev/null and b/src/credit.webp differ
diff --git a/src/profile.jpg b/src/profile.jpg
new file mode 100644
index 0000000..8225210
Binary files /dev/null and b/src/profile.jpg differ
diff --git a/src/profile.js b/src/profile.js
new file mode 100644
index 0000000..816b9d4
--- /dev/null
+++ b/src/profile.js
@@ -0,0 +1,43 @@
+function handleImageInputChange() {
+  const imageInput = document.getElementById('imageInput');
+  const selectedImage = imageInput.files[0];
+  const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+
+  // Clear previous previews
+  imagePreviewContainer.innerHTML = '';
+
+  if (selectedImage) {
+    // Display the selected image preview
+    displayImagePreview(selectedImage, imagePreviewContainer);
+  } else {
+    // Display a random image preview
+    displayRandomImage(imagePreviewContainer);
+  }
+}
+
+function displayImagePreview(imageFile, container) {
+  const reader = new FileReader();
+
+  reader.onload = function (e) {
+    const imagePreview = document.createElement('img');
+    imagePreview.src = e.target.result;
+    imagePreview.style.maxWidth = '100%';
+    container.appendChild(imagePreview);
+  };
+
+  reader.readAsDataURL(imageFile);
+}
+
+function displayRandomImage(container) {
+  const randomImages = [
+    'https://via.placeholder.com/300',
+    'https://via.placeholder.com/300/0000FF/808080?text=Random+Image',
+    // Add more random image URLs as needed
+  ];
+
+  const randomImageUrl = randomImages[Math.floor(Math.random() * randomImages.length)];
+  const randomImage = document.createElement('img');
+  randomImage.src = randomImageUrl;
+  randomImage.style.maxWidth = '100%';
+  container.appendChild(randomImage);
+}
\ No newline at end of file
diff --git a/src/script.js b/src/script.js
index f07c226..cde2625 100644
--- a/src/script.js
+++ b/src/script.js
@@ -20,13 +20,18 @@
       // Initialize Firebase
       const app = initializeApp(firebaseConfig);
     //   const analytics = getAnalytics(app);
+
+    
     var msg = document.querySelector('.msg');
     const db = getDatabase();
     
+    var labelName = document.querySelector('.label-name');
+    var labelInsta = document.querySelector('.label-insta');
     var user = document.querySelector('.name-input');
     var likeBtn = document.querySelector('.btn');
     var insta = document.querySelector('.insta-input');
     var likeCountElement = document.getElementById('likeCount');
+    var heart = document.querySelector('.filled');
     
     // Function to get the user's IP address
     function getIPAddress() {
@@ -39,109 +44,135 @@
         });
     }
     
-    // Function to update the like count in the UI
-    function updateLikeCountUI(count) {
-      likeCountElement.innerText = count;
+
+
+// Function to update the like count in the UI
+function updateLikeCountUI(count) {
+  likeCountElement.innerText = count;
+}
+
+// Function to update the list of users in the UI
+function updateUsersList(users) {
+  const nameBackground = document.getElementById('nameBackground');
+  nameBackground.innerHTML = ''; // Clear previous users
+
+  users.forEach(user => {
+    const userNameDiv = document.createElement('div');
+    userNameDiv.innerText = user.Name;
+    userNameDiv.classList.add('user-container'); // Add the user-container class
+    nameBackground.appendChild(userNameDiv);
+  
+  });
+}
+
+// Fetch and display the initial like count
+const likeCountRef = ref(db, 'posts/likeCount');
+onValue(likeCountRef, (snapshot) => {
+  const currentLikeCount = snapshot.val() || 0;
+  updateLikeCountUI(currentLikeCount);
+});
+
+// Fetch and display the list of users
+const usersRef = ref(db, 'people');
+onValue(usersRef, (snapshot) => {
+  const usersData = snapshot.val();
+  const usersArray = usersData ? Object.values(usersData) : [];
+  updateUsersList(usersArray);
+});
+
+// Function to check if the user has already liked when the page loads
+function checkLikedStatus() {
+  getIPAddress().then(ipAddress => {
+    if (!ipAddress) {
+      console.error('Unable to retrieve IP address.');
+      msg.innerText = 'liked '
+      return;
     }
-    
-    // Fetch and display the initial like count
-    const likeCountRef = ref(db, 'posts/likeCount');
-    onValue(likeCountRef, (snapshot) => {
-      const currentLikeCount = snapshot.val() || 0;
-      updateLikeCountUI(currentLikeCount);
+
+    const userRef = ref(db, `people/${ipAddress}`);
+
+    get(child(userRef, 'liked')).then(snapshot => {
+      const alreadyLiked = snapshot.val() === true;
+
+      if (alreadyLiked) {
+        msg.innerText = `${user.value}, You already liked 😁`;
+        disableForm();
+      }
     });
-    
-    // Function to check if the user has already liked when the page loads
-    function checkLikedStatus() {
-      getIPAddress().then(ipAddress => {
-        if (!ipAddress) {
-          console.error('Unable to retrieve IP address.');
-          msg.innerText = 'liked '
-          return;
-        }
-    
-        const userRef = ref(db, `people/${ipAddress}`);
-    
-        get(child(userRef, 'liked')).then(snapshot => {
-          const alreadyLiked = snapshot.val() === true;
-    
-          if (alreadyLiked) {
-            msg.innerText = 'You already liked 😁';
-            disableForm();
-          }
-        });
-      });
+  });
+}
+
+// Call the function to check liked status when the page loads
+checkLikedStatus();
+
+likeBtn.addEventListener('click', submit);
+
+async function submit() {
+  // Check if both input fields are filled
+  if (user.value.trim() === '' || insta.value.trim() === '') {
+    msg.innerText = 'fill info before licking😊';
+    return;
+  }
+
+  const ipAddress = await getIPAddress();
+
+  if (!ipAddress) {
+    console.error('Unable to retrieve IP address.');
+    return;
+  }
+
+  const userRef = ref(db, `people/${ipAddress}`);
+
+  // Check if the user has already liked
+  get(child(userRef, 'liked')).then(snapshot => {
+    const alreadyLiked = snapshot.val() === true;
+
+    if (alreadyLiked) {
+      msg.innerText = `${user.value}, You already liked 😁`;
+      return;
     }
-    
-    // Call the function to check liked status when the page loads
-    checkLikedStatus();
-    
-    likeBtn.addEventListener('click', submit);
-    
-    async function submit() {
-      // Check if both input fields are filled
-      if (user.value.trim() === '' || insta.value.trim() === '') {
-        msg.innerText = 'Please fill in both your name and Instagram before liking. 😊';
-        return;
-      }
-    
-      const ipAddress = await getIPAddress();
-    
-      if (!ipAddress) {
-        console.error('Unable to retrieve IP address.');
-        return;
-      }
-    
-      const userRef = ref(db, `people/${ipAddress}`);
-    
-      // Check if the user has already liked
-      get(child(userRef, 'liked')).then(snapshot => {
-        const alreadyLiked = snapshot.val() === true;
-    
-        if (alreadyLiked) {
-          msg.innerText = 'You already liked 😁';
-          return;
-        }
-    
-        // If not already liked, proceed with the like
-        set(userRef, {
-          Name: user.value,
-          Instagram: insta.value,
-          liked: true // Mark the user as liked
-        })
-          .then(() => {
-            msg.innerText = 'Thanks for the like! 😍';
-    
-            // Increment the individual user like count
-            get(likeCountRef).then(snapshot => {
-              const currentLikeCount = snapshot.val() || 0;
-              set(likeCountRef, currentLikeCount + 1);
-            });
-    
-            // Increment the total like count
-            get(ref(db, 'posts/totalLikes')).then(snapshot => {
-              const currentTotalLikeCount = snapshot.val() || 0;
-              set(ref(db, 'posts/totalLikes'), currentTotalLikeCount + 1);
-            });
-    
-            // Disable the form after a successful like
-            disableForm();
-          })
-          .catch(error => {
-            alert(error);
-          });
+
+    // If not already liked, proceed with the like
+    set(userRef, {
+      Name: user.value,
+      Instagram: insta.value,
+      liked: true // Mark the user as liked
+    })
+      .then(() => {
+        msg.innerText = `Thanks for the like!😍 ,${user.value}`;
+        heart.style.opacity = '1';
+
+        // Increment the individual user like count
+        get(likeCountRef).then(snapshot => {
+          const currentLikeCount = snapshot.val() || 0;
+          set(likeCountRef, currentLikeCount + 1);
+        });
+
+        // Increment the total like count
+        get(ref(db, 'posts/totalLikes')).then(snapshot => {
+          const currentTotalLikeCount = snapshot.val() || 0;
+          set(ref(db, 'posts/totalLikes'), currentTotalLikeCount + 1);
+        });
+
+        // Disable the form after a successful like
+        disableForm();
+      })
+      .catch(error => {
+        alert(error);
       });
-    }
-    
-    // Function to disable the form elements
-    function disableForm() {
-      user.disabled = true;
-      insta.disabled = true;
-      likeBtn.disabled = true;
-      user.style.display = 'none';
-      insta.style.display = 'none';
-      likeBtn.style.display = 'none'
+  });
+}
+// ...
+  // Function to disable the form elements
+  function disableForm() {
+    user.disabled = true;
+    insta.disabled = true;
+    likeBtn.disabled = true;
+    labelName.disabled = true;
+    labelInsta.disabled = true;
+    user.style.display = 'none';
+    insta.style.display = 'none';
+labelName.style.display = 'none';
+labelInsta.style.display = 'none';
 
-    }
-    
-    
\ No newline at end of file
+  }
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 1064fdf..67c16f8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,4 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Honk&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dokdo&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
 
 *{
     margin: 0%;
@@ -13,39 +16,21 @@ main{
     height: 100vh;
     display: flex;
     justify-content: center;
+    flex-direction: column;
     align-items: center;
 }
 
-.like-btn{
- height: 20px;
- transition: all ease 300ms;  
-}
-
-.btn:hover > .like-btn{
-    scale: 1.2;
-}
-
-.btn{
-    display: flex;
-    width: 60px;
-    height: 30px;
-    align-items: center;
-    justify-content: space-evenly;
-    border-radius: 2px;
-    border: 1px solid black;
-    font-weight: 900;
-    transition: all ease 300ms; 
-
-}
 
 .container{
     display: flex;
-    justify-content: center;
+   /* justify-content: center; */
     align-items: center;
     flex-direction: column;
-    width: 10rem;
-    height: auto;
-    gap: 2rem;
+    height: 22rem;
+    
+    border: 1px solid black;
+    width: 16rem;
+    border-radius: 9px;
 }
 
 /* .msg{
@@ -57,12 +42,14 @@ main{
 
 .msg-wrapper{
     height: 40px;
+    text-align: center;
 }
 
 .msg {
     /* opacity: 0; */
     transition: opacity 0.5s ease-in-out;background-color: aliceblue;
-  
+    font-size: 12px;
+    font-family: 'Gloria Hallelujah', cursive;
   
   }
   
@@ -82,5 +69,200 @@ main{
     gap: 2rem;
     width: 100%;
   }
+Background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    z-index: -1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+  #nameBackground {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
 
+  .user-container {
+    margin: 5px; /* Adjust margin as needed */
+    background-color: #ececec; /* Add background color or any styling as needed */
+    padding: 10px; /* Add padding as needed */
+    border-radius: 5px; /* Add border-radius for a rounded appearance */
+  }
 
+  .user-names{
+    margin-top: 100px;
+  }
+
+  .h2{
+    font-size: 16px;
+  }
+
+  .input{
+    width: 12rem;
+    height: 1.8rem;
+    outline: none;
+    border: 1px solid black;
+    border-radius: 9px ;
+    padding: 0px .3rem;
+  }
+
+  .input-wrapper{
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+   
+  }
+  .header{
+    margin-bottom: 1.6rem;
+    margin-top: 1.6rem;
+    
+}
+
+.head{
+    font-family: 'Honk', system-ui;
+    font-size: 1.5rem;
+}
+
+label{
+    font-family: 'Gloria Hallelujah', cursive;
+}
+
+button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 22px 20px 22px;
+    box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+    background-color: #e8e8e8;
+    border-color: #ffe2e2;
+    border-style: solid;
+    border-width: 9px;
+    border-radius: 35px;
+    transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 
+    border-color 400ms ease-in-out,
+    background-color 400ms ease-in-out;
+    word-spacing: -2px;
+  }
+  
+  @keyframes movingBorders {
+    0% {
+      border-color: #fce4e4;
+    }
+  
+    50% {
+      border-color: #ffd8d8;
+    }
+  
+    90% {
+      border-color: #fce4e4;
+    }
+  }
+  
+  button:hover {
+    background-color: #eee;
+    transform: scale(105%);
+    animation: movingBorders 3s infinite;
+  }
+  
+  .filled,
+  .empty {
+    fill: rgb(255, 110, 110);
+    transition: opacity 100ms ease-in-out;
+  }
+  
+  .filled {
+    position: absolute;
+    opacity: 1;
+  }
+  
+  @keyframes beatingHeart {
+    0% {
+      transform: scale(1);
+    }
+  
+    15% {
+      transform: scale(1.15);
+    }
+  
+    30% {
+      transform: scale(1);
+    }
+  
+    45% {
+      transform: scale(1.15);
+    }
+  
+    60% {
+      transform: scale(1);
+    }
+  }
+  
+  button:hover .empty {
+    opacity: 0;
+  }
+  
+  button:hover .filled {
+    opacity: 1;
+    animation: beatingHeart 1.2s infinite;
+  }
+
+
+  .credit-img{
+    height: 45px;
+    width: 45px;
+  }
+
+  .credit-conatiner{
+    text-align: center;
+}
+
+.credit-wrapper{
+    display: flex;
+    gap: .5rem;
+    border: 1px solid black;
+    padding: .2rem;
+    justify-content: center;
+align-items: center; 
+border-radius: 2px; 
+padding-left: 0rem .2rem;}
+
+  .credit-para{
+    display: flex;
+    flex-direction: column;
+    text-align: start;
+    justify-content: center;
+  }
+
+  .developer-credit{
+    font-size:15px ;
+  }
+
+  .bio{
+    font-size:11px;
+  }
+
+  .credit{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+  }
+
+  .credit-head{
+    font-family: 'Honk', system-ui;
+    font-size: 1.5rem;
+  }
+
+  .credit-img-div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
\ No newline at end of file
