diff --git a/frontend/src/pages/BloggerProfile.js b/frontend/src/pages/BloggerProfile.js
new file mode 100644
index 00000000..a63841d4
--- /dev/null
+++ b/frontend/src/pages/BloggerProfile.js
@@ -0,0 +1,181 @@
+
+function getQueryParams() {
+    const params = new URLSearchParams(window.location.search);
+    return {
+        name: params.get('name'),
+        email: params.get('email'),
+        profilePic: params.get('profilePic')
+    };
+}
+
+import signOut from "./Login";
+
+const userDetails = getQueryParams();
+
+
+
+export function renderProfilePage(container) {
+    container.innerHTML = `
+        <div class="w-4/5 mx-auto p-6 pb-20">
+            <div class='flex w-full justify-between'>
+                <!-- Draft Form -->
+                <div class="p-6 bg-white dark:bg-gray-800 dark:text-gray-200 rounded-lg shadow-md w-3/5">
+                    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Draft a New Blog</h2>
+                    <p class="text-gray-600 dark:text-gray-400 mb-6">Create and save your blog drafts below.</p>
+
+                    <input type="text" id="draft-title" placeholder="Draft Title..."
+                        class="border border-gray-300 dark:border-gray-700 p-3 w-full rounded-lg shadow-sm focus:outline-none 
+                        focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-300 dark:bg-gray-700 dark:text-gray-200" />
+
+                    <textarea id="draft-details" placeholder="Draft Details..."
+                        class="border border-gray-300 dark:border-gray-700 p-3 w-full mt-4 rounded-lg shadow-sm focus:outline-none 
+                        focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-300 h-32 dark:bg-gray-700 dark:text-gray-200"></textarea>
+                    
+                    <!-- Category Selection -->
+                    <select id="draft-category" class="border border-gray-300 dark:border-gray-700 p-3 w-full mt-4 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all duration-300 dark:bg-gray-700 dark:text-gray-200">
+                        <option value="" disabled selected>Select Category</option>
+                        <option value="Vocabulary">Vocabulary</option>
+                        <option value="Grammar">Grammar</option>
+                        <option value="Pronunciation">Pronunciation</option>
+                        <option value="Culture">Culture</option>
+                        <option value="Learning Tips">Learning Tips</option>
+                    </select>
+
+                    <!-- Image Upload -->
+                    <input type="file" id="draft-image" accept="image/*"
+                        class="mt-4 border border-gray-300 dark:border-gray-700 p-2 w-full rounded-lg focus:outline-none 
+                        focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-300 dark:bg-gray-700 dark:text-gray-200" />
+
+                    <button id="save-draft-btn"
+                        class="mt-4 bg-blue-600 text-white px-6 py-3 rounded-md shadow-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 transition-all duration-300 w-full sm:w-auto">
+                        Save Draft
+                    </button>
+                </div>
+
+                <!-- Profile Header -->
+                <div class="bg-white dark:bg-gray-800 dark:text-gray-200 p-6 rounded-lg border-2 border-blue-300 shadow-lg w-1/3 h-64 flex flex-col items-center transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
+                   <button id="logout-btn" class="bg-red-500 hover:bg-red-600 text-white font-semibold py-1 px-4 rounded shadow-md focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75 transition duration-300 ease-in-out hidden relative -top-[17px]  left-[135px]">
+                        Sign out
+                    </button>    
+                <img
+                        src=${userDetails.profilePic}
+                        alt="Profile"
+                        class="rounded-full object-cover w-28 h-28 border-4 border-gray-200 shadow-sm transition-transform duration-300 hover:scale-105" />
+                    <div class="">
+                        <h1 class="text-2xl text-center font-semibold text-gray-800 dark:text-gray-100 tracking-wide transition-colors duration-300 hover:text-blue-600">
+                            ${userDetails.name}
+                        </h1>
+                        <p class="text-gray-500 dark:text-gray-400 mt-2 leading-relaxed">${userDetails.email}</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- My Drafts Section -->
+            <div class="my-8 border-t-2 border-gray-500 dark:border-gray-600 w-full"></div>
+
+            <div class="mt-6 p-6 bg-white dark:bg-gray-800 dark:text-gray-200 rounded-lg shadow-md w-full">
+                <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-100">My Drafts</h2>
+                <ul class="space-y-3" id="draft-list"></ul>
+            </div>
+        </div>
+    `;
+    document.getElementById('logout-btn').addEventListener('click', () => {
+        signOut()
+        window.location.href = '/';
+    });
+    // Sample Data (Simulating State)
+    let drafts = [];
+
+    // Save draft functionality
+    const saveDraftButton = container.querySelector('#save-draft-btn');
+    saveDraftButton.addEventListener('click', () => {
+        const draftTitle = container.querySelector('#draft-title').value.trim();
+        const draftDetails = container.querySelector('#draft-details').value.trim();
+        const draftCategory = container.querySelector('#draft-category').value;
+        const draftImageInput = container.querySelector('#draft-image');
+        const draftImage = draftImageInput.files[0]; // Get the selected file
+
+        if (draftTitle && draftDetails && draftCategory && draftImage) {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                drafts.push({
+                    title: draftTitle,
+                    details: draftDetails,
+                    category: draftCategory,
+                    image: e.target.result, // Save the image as a data URL
+                    date: new Date()
+                });
+                renderDrafts();
+                container.querySelector('#draft-title').value = '';
+                container.querySelector('#draft-details').value = '';
+                container.querySelector('#draft-category').value = ''; // Reset category
+                draftImageInput.value = ''; // Reset the file input
+            };
+            reader.readAsDataURL(draftImage); // Convert image to data URL
+        }
+    });
+
+    // Render Drafts
+    // Render Drafts
+    function renderDrafts() {
+        const draftList = container.querySelector('#draft-list');
+        draftList.innerHTML = drafts.length
+            ? drafts.map((draft, index) =>
+                `<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                <img src="${draft.image}" alt="${draft.title}" class="w-full h-48 object-cover" 
+                    onerror="this.onerror=null; this.src='/placeholder.svg?height=200&width=400';">
+                <div class="p-6">
+                    <h2 class="text-2xl font-semibold mb-2">
+                        <a href="#" class="text-gray-900 dark:text-white hover:underline">${draft.title}</a>
+                    </h2>
+                    <p class="text-gray-600 dark:text-gray-300 mb-4">${draft.details}</p>
+                    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        <time datetime="${draft.date.toISOString()}">${draft.date.toDateString()}</time>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                        </svg>
+                        <span>${draft.category}</span>
+                    </div>
+                </div>
+                <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+                    <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 edit-btn" data-index="${index}">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h8M8 16h8M8 8h8" />
+                        </svg>
+                        Edit
+                    </a>
+                </div>
+            </article>
+            `).join('')
+            : `<p class="text-center text-gray-500 dark:text-gray-400">No drafts available. Create your first draft!</p>`;
+
+        // Attach edit event listeners
+        const editButtons = draftList.querySelectorAll('.edit-btn');
+        editButtons.forEach(button => {
+            button.addEventListener('click', (event) => {
+                event.preventDefault(); // Prevent default link behavior
+
+                const draftIndex = event.target.dataset.index; // Get the index of the draft to edit
+                const draftToEdit = drafts[draftIndex]; // Get the draft object
+
+                // Fill the form with draft details
+                container.querySelector('#draft-title').value = draftToEdit.title;
+                container.querySelector('#draft-details').value = draftToEdit.details;
+                container.querySelector('#draft-category').value = draftToEdit.category;
+
+                // Remove the draft from the drafts array
+                drafts.splice(draftIndex, 1);
+                renderDrafts(); // Re-render the drafts list
+            });
+        });
+    }
+
+
+
+
+
+
+}
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
index 920ba0f0..e3d73183 100644
--- a/frontend/src/pages/Login.js
+++ b/frontend/src/pages/Login.js
@@ -1,12 +1,11 @@
 // Function to render the login UI
 export function renderLogin(container) {
     container.innerHTML = `
-        <div id="auth-status" class="text-gray-600 text-sm font-medium mr-2">
-            Loading...
+        <div id="auth-status" class="flex items-center bg-[#8b5cf6] hover:bg-[#753ff1] text-white text-sm font-medium mr-2 space-x-4 p-2 shadow-lg rounded-md border-none hidden ">
         </div>
 
         <div class="flex justify-evenly">
-            <button id="google-login-btn" class="bg-[#8b5cf6] flex hover:bg-[#753ff1] text-white font-semibold py-2 px-4 rounded shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300 ease-in-out mb-4 hidden">
+            <button id="google-login-btn" class="bg-[#8b5cf6] flex hover:bg-[#753ff1] text-white font-semibold py-2 px-4 rounded shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300 ease-in-out mb-4">
                 <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" alt="Google Logo" class="w-5 h-5 mr-1">    
             Sign in with Google
             </button>
@@ -29,13 +28,13 @@ import { getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signO
 
 // Initialize Firebase
 const firebaseConfig = {
-    apiKey: "YOUR_API_KEY",
-    authDomain: "YOUR_AUTH_DOMAIN",
-    projectId: "YOUR_PROJECT_ID",
-    storageBucket: "YOUR_STORAGE_BUCKET",
-    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
-    appId: "YOUR_APP_ID",
-    measurementId: "YOUR_MEASUREMENT_ID"
+    apiKey: "AIzaSyDwowmzH0skVhieH3KPgIP8_vQBzhJmIi4",
+    authDomain: "wordwise-d1607.firebaseapp.com",
+    projectId: "wordwise-d1607",
+    storageBucket: "wordwise-d1607.appspot.com",
+    messagingSenderId: "426579758621",
+    appId: "1:426579758621:web:5bc883cd5eea3a416940f4",
+    measurementId: "G-QL9ZF6G3HH"
 };
 
 
@@ -49,13 +48,23 @@ function initializeUser(user) {
     const googleBtn = document.getElementById('google-login-btn');
     const signoutBtn = document.getElementById('logout-btn')
     if (user) {
-        authStatus.innerHTML = `Logged in as: ${user.displayName}`;
+        authStatus.innerHTML = `View profile: ${user.displayName}`;
         googleBtn.classList.add('hidden');
         signoutBtn.classList.remove('hidden');
+        authStatus.classList.remove('hidden')
+
+        authStatus.style.cursor = 'pointer';
+        authStatus.addEventListener('click', () => {
+            const name = user.displayName ? encodeURIComponent(user.displayName) : 'unknown';
+            const email = user.email ? encodeURIComponent(user.email) : 'unknown';
+            const profilePic = user.photoURL ? encodeURIComponent(user.photoURL) : '';
+
+            window.location.href = `/profile?name=${name}&email=${email}&profilePic=${profilePic}`;
+        });
     } else {
         authStatus.innerHTML = '';
-        googleBtn.classList.remove('hidden');
         signoutBtn.classList.add('hidden');
+        authStatus.removeEventListener('click', () => { });
     }
 }
 
@@ -76,10 +85,11 @@ function signInWithGoogle() {
 }
 
 // Function to log out the user
-function signOut() {
+export default function signOut() {
     firebaseSignOut(auth)
         .then(() => {
             initializeUser(null);
+            document.getElementById('google-login-btn').classList.remove('hidden')
         })
         .catch((error) => {
             console.error('Error during sign-out:', error);
diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css
index be860370..b1343ad6 100644
--- a/frontend/src/styles/output.css
+++ b/frontend/src/styles/output.css
@@ -616,11 +616,24 @@ video {
   top: 0.75rem;
 }
 
+.-top-\[17px\] {
+  top: -17px;
+}
+
+.left-\[135px\] {
+  left: 135px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -705,6 +718,14 @@ video {
   height: 4rem;
 }
 
+.h-28 {
+  height: 7rem;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -721,6 +742,14 @@ video {
   height: 1.5rem;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -729,10 +758,22 @@ video {
   width: 4rem;
 }
 
+.w-28 {
+  width: 7rem;
+}
+
+.w-3\/5 {
+  width: 60%;
+}
+
 .w-4 {
   width: 1rem;
 }
 
+.w-4\/5 {
+  width: 80%;
+}
+
 .w-5 {
   width: 1.25rem;
 }
@@ -754,6 +795,10 @@ video {
   max-width: 1280px;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -820,6 +865,12 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -860,6 +911,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -868,6 +923,14 @@ video {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-4 {
+  border-width: 4px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -880,6 +943,19 @@ video {
   border-top-width: 1px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border-none {
+  border-style: none;
+}
+
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+}
+
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -895,6 +971,11 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 .border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -924,6 +1005,11 @@ video {
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -992,6 +1078,10 @@ video {
   padding: 0.625rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1055,6 +1145,10 @@ video {
   padding-bottom: 2rem;
 }
 
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -1138,6 +1232,10 @@ video {
   line-height: 1.25;
 }
 
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -1168,6 +1266,11 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1259,12 +1362,24 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -1300,11 +1415,27 @@ body.dark-mode {
   padding: 20px;
 }
 
+.hover\:-translate-y-1:hover {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:bg-\[\#753ff1\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(117 63 241 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1335,6 +1466,11 @@ body.dark-mode {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.hover\:text-blue-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1349,6 +1485,12 @@ body.dark-mode {
   text-decoration-line: underline;
 }
 
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:shadow-gray-300:hover {
   --tw-shadow-color: #d1d5db;
   --tw-shadow: var(--tw-shadow-colored);
@@ -1369,6 +1511,10 @@ body.dark-mode {
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1609,6 +1755,10 @@ body.dark-mode {
     display: inline;
   }
 
+  .sm\:w-auto {
+    width: auto;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
diff --git a/frontend/src/utils/router.js b/frontend/src/utils/router.js
index 98227e71..48df898d 100644
--- a/frontend/src/utils/router.js
+++ b/frontend/src/utils/router.js
@@ -5,6 +5,7 @@ import { renderCategories } from '../pages/Categories.js';
 import { renderAbout } from '../pages/About.js';
 import { renderContact } from '../pages/Contact.js';
 import { renderFeedback } from '../pages/Feedback.js';
+import { renderProfilePage } from '../pages/BloggerProfile.js';
 
 const routes = {
     '/': renderHome,
@@ -13,7 +14,8 @@ const routes = {
     '/categories': renderCategories,
     '/about': renderAbout,
     '/contact': renderContact,
-    '/feedback': renderFeedback
+    '/feedback': renderFeedback,
+    '/profile': renderProfilePage
 };
 
 export function router() {