diff --git a/app/MobileNav.js b/app/MobileNav.js
index 01ae616..ba62a44 100644
--- a/app/MobileNav.js
+++ b/app/MobileNav.js
@@ -12,7 +12,9 @@ export default function MobileNav() {
     try {
       await logout()
       router.push('/signin')
-    } catch (error) {}
+    } catch (error) {
+      console.error('error logging out', error)
+    }
   }
 
   return (
@@ -23,12 +25,12 @@ export default function MobileNav() {
             Home
           </span>
         </Link>
-        <Link href="/about">
+        <Link href="/archive">
           <span className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 cursor-pointer">
             Archive
           </span>
         </Link>
-        <Link href="/contact">
+        <Link href="/profile">
           <span className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 cursor-pointer">
             Profile
           </span>
@@ -39,12 +41,16 @@ export default function MobileNav() {
         <>
           {/* Sign Out Button */}
 
-          <button
-            onClick={handleSignOut}
-            className="text-gray-700 hover:text-gray-900 bg-gray-100 px-3 py-2 rounded-md text-sm font-medium"
-          >
-            Sign Out
-          </button>
+          <div className="pt-4 pb-3 border-t border-gray-200">
+            <div className="flex items-center px-4 space-x-4">
+              <button
+                onClick={handleSignOut}
+                className="text-gray-700 hover:text-gray-900 bg-gray-100 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                Sign Out
+              </button>
+            </div>
+          </div>
         </>
       ) : (
         <>
diff --git a/app/archive/page.js b/app/archive/page.js
index ac0bdea..1c71c76 100644
--- a/app/archive/page.js
+++ b/app/archive/page.js
@@ -124,7 +124,7 @@ function Archive() {
           </table>
         </div>
       ) : (
-        'fetching archive URLs...'
+        'No archive URLs'
       )}
     </section>
   )
diff --git a/app/email-verification/page.js b/app/email-verification/page.js
index caa5a6b..6a34386 100644
--- a/app/email-verification/page.js
+++ b/app/email-verification/page.js
@@ -64,8 +64,8 @@ export default function Verification() {
             </label>
             <input
               type="text"
-              name="email"
-              id="email"
+              name="otp"
+              id="otp"
               value={otp}
               onChange={(e) => setOtp(e.target.value)}
               required
diff --git a/app/navbar.js b/app/navbar.js
index 19eba59..84f42e0 100644
--- a/app/navbar.js
+++ b/app/navbar.js
@@ -6,11 +6,13 @@ import Link from 'next/link'
 import MobileNav from './MobileNav'
 import { AuthContext } from './AuthContext'
 import { usePathname } from 'next/navigation'
+import { useRouter } from 'next/navigation'
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false)
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const { token, logout } = useContext(AuthContext)
+  const router = useRouter()
 
   const pathname = usePathname()
 
@@ -25,6 +27,7 @@ export default function Navbar() {
       console.error('Logout failed:', error)
     }
   }
+
   return (
     <nav className={`${bgColor} shadow-md`}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
diff --git a/app/page.js b/app/page.js
index e5969b9..087ea2b 100644
--- a/app/page.js
+++ b/app/page.js
@@ -70,8 +70,11 @@ export default function Home() {
     } catch (err) {
       setError(err.message || 'An unexpected error occurred')
     } finally {
-      setTimeout(() => setLoading(false), 1000)
-      setTimeout(() => setShortenedUrl(''), 1000) // Clear message after 1 seconds
+      setTimeout(() => {
+        setLoading(false)
+        setShortenedUrl('')
+      }, 1000)
+      // Clear message after 1 seconds      
     }
   }
 
@@ -103,7 +106,6 @@ export default function Home() {
         }),
       })
 
-      console.log(response.status)
       if (response.status === 400) {
         // Assuming 409 is returned by the backend when there's a duplicate URL
         setError(
diff --git a/app/profile/page.js b/app/profile/page.js
new file mode 100644
index 0000000..538889f
--- /dev/null
+++ b/app/profile/page.js
@@ -0,0 +1,189 @@
+'use client'
+
+import Cookies from 'js-cookie'
+import { useRef, useState } from 'react'
+import { FcCamera } from 'react-icons/fc'
+import Image from 'next/image'
+
+export default function ProfilePage() {
+  const webURL = process.env.NEXT_PUBLIC_WEB_URL
+  const imgRef = useRef(null)
+  const [form, setForm] = useState({
+    image: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+  })
+  const [previewFile, setPreviewFile] = useState('')
+  const [token, setToken] = useState(Cookies.get('jwt'))
+  const [userData, setUserData] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState('')
+
+  const getUserDetails = async () => {
+    try {
+      const response = await fetch(webURL + 'auth/me', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch user data')
+      }
+
+      const data = await response.json()
+      console.log(data)
+      setUserData(data)
+      setForm({
+        image: '',
+        firstName: data.firstName || '',
+        lastName: data.lastName || '',
+        email: data.email || '',
+      })
+    } catch (error) {
+      console.error('Error fetching user data:', error)
+    }
+  }
+
+  if (token && !userData) {
+    getUserDetails()
+  }
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0]
+
+    if (file) {
+      const imageUrl = URL.createObjectURL(file)
+      setPreviewFile(imageUrl)
+      setForm((prevForm) => ({
+        ...prevForm,
+        image: imageUrl,
+      }))
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    setLoading(true)
+    try {
+      const response = await fetch(webURL + 'auth/me', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(form),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to update profile')
+      }
+
+      const updatedUser = await response.json()
+      setUserData(updatedUser)
+
+      setMessage(updatedUser.message)
+
+      //  update form with the new user data
+      setForm((prevForm) => ({
+        ...prevForm,
+        firstName: updatedUser.firstName || prevForm.firstName,
+        lastName: updatedUser.lastName || prevForm.lastName,
+        email: updatedUser.email || prevForm.email,
+      }))
+
+      setLoading(false)
+    } catch (error) {
+      console.error('Error updating profile:', error)
+    }
+  }
+
+  return (
+    <section className="flex flex-col items-center min-h-screen bg-[#f4f4f5] p-6">
+      <form
+        onSubmit={handleSubmit}
+        className="w-full max-w-xl bg-white p-8 rounded-lg shadow-md"
+      >
+        <div className="flex flex-col items-center mb-6">
+          <div className="relative h-24 w-24 mb-3">
+            <Image
+              className="h-24 w-24 object-cover border border-gray-300 rounded-full"
+              width={24}
+              height={24}
+              src={previewFile}
+            />
+            <FcCamera
+              className="absolute bottom-0 right-0 cursor-pointer text-3xl bg-white p-1 rounded-full border border-gray-300"
+              onClick={() => imgRef.current.click()} // Trigger file input on click
+            />
+            <input
+              type="file"
+              ref={imgRef}
+              onChange={handleFileChange}
+              hidden
+            />
+          </div>
+        </div>
+        <div className="w-full mb-4">
+          <label
+            htmlFor="firstName"
+            className="block mb-2 text-sm text-gray-600"
+          >
+            First Name
+          </label>
+          <input
+            type="text"
+            id="firstName"
+            name="firstName"
+            className="w-full p-2 border border-gray-300 rounded-lg"
+            value={form.firstName}
+            onChange={(e) => setForm({ ...form, firstName: e.target.value })}
+            required
+          />
+        </div>
+        <div className="w-full mb-4">
+          <label
+            htmlFor="lastName"
+            className="block mb-2 text-sm text-gray-600"
+          >
+            Last Name
+          </label>
+          <input
+            type="text"
+            id="lastName"
+            name="lastName"
+            className="w-full p-2 border border-gray-300 rounded-lg"
+            value={form.lastName}
+            onChange={(e) => setForm({ ...form, lastName: e.target.value })}
+            required
+          />
+        </div>
+        <div className="w-full mb-6">
+          <label htmlFor="email" className="block mb-2 text-sm text-gray-600">
+            Email
+          </label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            className="w-full p-2 border border-gray-300 rounded-lg"
+            value={form.email}
+            onChange={(e) => setForm({ ...form, email: e.target.value })}
+            required
+          />
+        </div>
+        {message && <p className="text-green-500 mt-4">{message}</p>}
+        <button
+          type="submit"
+          className="w-full bg-teal-500 text-white py-2 rounded-lg hover:bg-teal-600 transition duration-300"
+        >
+          {loading ? 'Submiting...' : 'Submit'}
+        </button>
+      </form>
+    </section>
+  )
+}
diff --git a/public/default-avatar.jpg b/public/default-avatar.jpg
new file mode 100644
index 0000000..10cfb2f
Binary files /dev/null and b/public/default-avatar.jpg differ