diff --git a/backend/uploads/00ce7e87-614d-44f7-a300-0ac8fb4af2bd_data.m4a b/backend/uploads/00ce7e87-614d-44f7-a300-0ac8fb4af2bd_data.m4a
new file mode 100644
index 0000000..38e5740
Binary files /dev/null and b/backend/uploads/00ce7e87-614d-44f7-a300-0ac8fb4af2bd_data.m4a differ
diff --git a/frontend/public/Logo.png b/frontend/public/Logo.png
new file mode 100644
index 0000000..6ca06f6
Binary files /dev/null and b/frontend/public/Logo.png differ
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d48ffae..5652907 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -202,10 +202,10 @@ export default function App() {
 
   // Main App
   return (
-    <div className="h-screen bg-gray-50 text-gray-800 flex flex-col overflow-hidden">
+    <div className="h-screen bg-white-50 text-gray-800 flex flex-col overflow-hidden">
       <Header onSearch={handleSearch} onLogout={handleLogout} onNavigateToSearch={handleNavigateToSearch} />
 
-      <div className="flex-1 flex overflow-hidden max-w-[1400px] mx-auto w-full">
+      <div className="flex-1 flex overflow-hidden max-w-[1500px] mx-auto w-full">
         <Sidebar user={user} activeTab={activeTab} onTabChange={setActiveTab} />
 
         <main className="flex-1 overflow-y-auto p-6">
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index c4ae9c6..5f96b8b 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -23,10 +23,15 @@ export default function Header({ onSearch, onLogout, onNavigateToSearch }) {
       <div className="max-w-[1400px] mx-auto flex items-center justify-between gap-6">
         {/* Left: Logo */}
         <div className="flex items-center gap-3 flex-shrink-0">
-          <div className="w-8 h-8 bg-[#f4b840] rounded-lg flex items-center justify-center">
-            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div className="w-8 h-8  rounded-lg flex items-center justify-center">
+            {/* <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
-            </svg>
+            </svg> */}
+            <img
+                src="/Logo.png"
+                alt="VoiceVault Logo"
+                className="w-10 h-10 object-contain rounded-lg"
+              />
           </div>
           <h1 className="text-lg font-bold text-gray-900">VoiceVault</h1>
         </div>
diff --git a/frontend/src/pages/PostDetail.jsx b/frontend/src/pages/PostDetail.jsx
index cfafa34..dd575b5 100644
--- a/frontend/src/pages/PostDetail.jsx
+++ b/frontend/src/pages/PostDetail.jsx
@@ -16,6 +16,7 @@ export default function PostDetail({ postId, user, onBack }) {
   const [volume, setVolume] = useState(1)
   const [downloading, setDownloading] = useState(false)
   const audioRef = useRef(null)
+  const [audioSrc, setAudioSrc] = useState(null)
 
   useEffect(() => {
     if (postId) {
@@ -34,6 +35,8 @@ export default function PostDetail({ postId, user, onBack }) {
 
       // Load audio URL if available
       if (postData.audio_url && audioRef.current) {
+        setPost(postData)
+        setAudioSrc(postData.audio_url)
         audioRef.current.src = postData.audio_url
         audioRef.current.load()
       }
@@ -290,12 +293,14 @@ export default function PostDetail({ postId, user, onBack }) {
 
           <audio
             ref={audioRef}
+            src={audioSrc}
             onTimeUpdate={handleTimeUpdate}
             onLoadedMetadata={handleLoadedMetadata}
             onEnded={handleEnded}
             preload="metadata"
           />
 
+
           <div className="flex items-center gap-4 mb-4">
             <button
               onClick={togglePlay}