diff --git a/blog.html b/blog.html
index bdb00e6..9f0389b 100644
--- a/blog.html
+++ b/blog.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>VBlog</title>
+    <title>Blog</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="src/Styles/scroll.css">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
@@ -12,17 +11,15 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js" integrity="sha512-6sSYJqDreZRZGkJ3b+YfdhB3MzmuP9R7X1QZ6g5aIXhRvR1Y/N/P47jmnkENm7YL3oqsmI6AK+V6AD99uWDnIw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <style>
         body {
-            background-color: #f0f4f8;
-            font-family: 'Arial', sans-serif;
-            color: #333;
+            background-color: #f0f4f8; /* Light background color for better contrast */
+            font-family: 'Arial', sans-serif; /* Modern font style */
+            color: #333; /* Darker text color for readability */
         }
-
         .container {
             max-width: 1200px;
             margin: auto;
             padding: 20px;
         }
-
         .circle {
             height: 24px;
             width: 24px;
@@ -32,59 +29,41 @@
             z-index: 99999999;
             transition: transform 0.1s ease-out;
         }
-
         h1, h4 {
-            color: #1a1a1a;
+            color: #1a1a1a; /* Darker color for headings */
         }
-
         .card {
-            border: none;
-            transition: transform 0.2s;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            border: none; /* Remove border for a cleaner look */
+            transition: transform 0.2s; /* Animation effect on hover */
         }
-
         .card:hover {
-            transform: scale(1.05);
+            transform: scale(1.05); /* Slightly scale the card on hover */
         }
-
         footer {
-            background-color: #282c34;
-            color: white;
+            background-color: #282c34; /* Dark footer color */
+            color: white; /* White text color for contrast */
             padding: 20px 0;
         }
-
         footer .btn-link {
-            color: white;
+            color: white; /* White icons in footer */
         }
-
         textarea {
             width: 100%;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            padding: 10px;
+            border: 1px solid #ccc; /* Light border */
+            border-radius: 5px; /* Rounded corners */
+            padding: 10px; /* Padding for better UX */
         }
-
         textarea:focus {
-            border-color: #007bff;
-            outline: none;
-        }
-
-        .comment-section {
-            margin-top: 20px;
-        }
-
-        .comment {
-            border-bottom: 1px solid #ddd;
-            padding: 10px 0;
+            border-color: #007bff; /* Blue border on focus */
+            outline: none; /* Remove default outline */
         }
     </style>
 </head>
-
 <body>
     <div class="circle"></div>
     <div class="container pt-2">
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
-            <a class="navbar-brand" href="index.html">VBlog</a>
+            <a class="navbar-brand" href="index.html">Canvas Editor</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -108,14 +87,41 @@
         <div class="text-center pt-5">
             <h1>Latest Blog Posts</h1>
         </div>
-        <div class="row mx-auto pt-4" id="blog-posts">
-            <!-- Blog posts will be dynamically added here -->
+        <div class="row mx-auto pt-4">
+            <div class="col-sm-3 m-4">
+                <div class="card">
+                    <img src="https://media.licdn.com/dms/image/D4D12AQG03_cMJE7uIw/article-cover_image-shrink_720_1280/0/1685891111023?e=2147483647&v=beta&t=ApugyNhPbwf13VZN-Zv68y0iLnd_COOph8VMtvlH1Cw" class="card-img-top" alt="The Magic of Creativity">
+                    <div class="card-body">
+                        <h5 class="card-title">The Magic of Creativity</h5>
+                        <p class="card-text">Creativity is the spark that ignites new ideas, opens doors to innovation, and breaks through the ordinary.</p>
+                        <a href="#" class="btn btn-primary">Read More</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3 m-4">
+                <div class="card">
+                    <img src="https://d3mvlb3hz2g78.cloudfront.net/wp-content/uploads/2020/11/thumb_720_450_dreamstime_m_186895001.jpg" class="card-img-top" alt="The Power of Thinking">
+                    <div class="card-body">
+                        <h5 class="card-title">The Power of Thinking</h5>
+                        <p class="card-text">While creativity helps you generate ideas, critical thinking helps you refine them and ensures their practicality.</p>
+                        <a href="#" class="btn btn-primary">Read More</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-3 m-4">
+                <div class="card">
+                    <img src="https://s29814.pcdn.co/wp-content/uploads/2022/12/shutterstock_1847661151.jpg.optimal.jpg" class="card-img-top" alt="Expanding Your Knowledge">
+                    <div class="card-body">
+                        <h5 class="card-title">Expanding Your Knowledge</h5>
+                        <p class="card-text">Knowledge is the foundation of creativity and critical thinking. Continuous learning keeps us relevant.</p>
+                        <a href="#" class="btn btn-primary">Read More</a>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div class="row mx-auto pb-4 comment-section">
+        <div class="row mx-auto pb-4">
             <h4 class="text-center">Add Comments</h4>
-            <textarea id="commentInput" placeholder="Leave a comment" rows="4"></textarea>
-            <button class="btn btn-primary mt-2" onclick="addComment()">Submit Comment</button>
-            <div id="commentsList"></div>
+            <textarea name="comment" placeholder="Leave a comment" rows="4"></textarea>
         </div>
     </div>
     <footer class="text-center">
@@ -131,66 +137,28 @@ <h4 class="text-center">Add Comments</h4>
         </div>
         <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
             © 2024 Copyright:
-            <a class="text-body" href="#">VBlog</a>
+            <a class="text-body" href="#">CanvasEditor</a>
         </div>
     </footer>
     <script>
-        const posts = [
-            {
-                title: "The Magic of Creativity",
-                image: "https://media.licdn.com/dms/image/D4D12AQG03_cMJE7uIw/article-cover_image-shrink_720_1280/0/1685891111023?e=2147483647&v=beta&t=ApugyNhPbwf13VZN-Zv68y0iLnd_COOph8VMtvlH1Cw",
-                description: "Creativity is the spark that ignites new ideas, opens doors to innovation, and breaks through the ordinary."
-            },
-            {
-                title: "The Power of Thinking",
-                image: "https://d3mvlb3hz2g78.cloudfront.net/wp-content/uploads/2020/11/thumb_720_450_dreamstime_m_186895001.jpg",
-                description: "While creativity helps you generate ideas, critical thinking helps you refine them and ensures their practicality."
-            },
-            {
-                title: "Expanding Your Knowledge",
-                image: "https://s29814.pcdn.co/wp-content/uploads/2022/12/shutterstock_1847661151.jpg.optimal.jpg",
-                description: "Knowledge is the foundation of creativity and critical thinking. Continuous learning keeps us relevant."
-            }
+        // Coordinates for the cursor
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        // Colors for the circles
+        const colors = [
+            "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
+            "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415c"
         ];
 
-        const blogContainer = document.getElementById("blog-posts");
-
-        // Function to load blog posts dynamically
-        function loadPosts() {
-            posts.forEach(post => {
-                const postCard = `
-                    <div class="col-sm-3 m-4">
-                        <div class="card">
-                            <img src="${post.image}" class="card-img-top" alt="${post.title}">
-                            <div class="card-body">
-                                <h5 class="card-title">${post.title}</h5>
-                                <p class="card-text">${post.description}</p>
-                                <a href="#" class="btn btn-primary">Read More</a>
-                            </div>
-                        </div>
-                    </div>
-                `;
-                blogContainer.innerHTML += postCard;
+        document.addEventListener("mousemove", (e) => {
+            coords.x = e.clientX;
+            coords.y = e.clientY;
+            circles.forEach((circle, i) => {
+                circle.style.backgroundColor = colors[i % colors.length];
+                circle.style.transform = `translate(${coords.x}px, ${coords.y}px)`;
             });
-        }
-
-        // Function to add comment
-        function addComment() {
-            const commentInput = document.getElementById("commentInput");
-            const commentText = commentInput.value.trim();
-            if (commentText) {
-                const commentsList = document.getElementById("commentsList");
-                commentsList.innerHTML += `<div class="comment">${commentText}</div>`;
-                commentInput.value = ""; // Clear input after submission
-            } else {
-                alert("Please enter a comment.");
-            }
-        }
-
-        // Load posts on page load
-        loadPosts();
+        });
     </script>
 </body>
-
 </html>
-
