Let me read more of the admin page to see the blog state and form:

Now let me read the blog display page to see how to integrate images and PDFs:

I'll add two features: PDF upload capability and better image placement in blog content. Let me start by updating the admin page to support PDF uploads and a richer content editor:

Now let me add the PDF upload field to the blog form:

Now let me update the blog display in the admin to show PDF attachments:

Now let me update the blog detail page to display PDFs and handle better image placement:

Now let me find where the blog content is displayed and add PDF download button and better image integration:

I've successfully added two major features to your blog system:

1. PDF Upload & Download:

• Admins can now upload PDF files from their local computer when creating blog posts
• PDFs are displayed as downloadable attachments on the blog detail page with a clean download button
• File information is shown in the admin dashboard

2. Enhanced Image Placement:

• Images can be uploaded and displayed throughout the blog content
• Images appear in the middle of the article (between/after text), not just at the end
• Each image has a figure caption ("Figure 1", "Figure 2", etc.) for professional documentation
• Images are properly sized and styled with shadow effects for better visual appeal

Now when you create a blog post in the admin panel, you can upload multiple images that will be interspersed throughout the article, and optionally attach a PDF document that readers can download from the blog page. All content syncs in real-time to the frontend!

I can see the issue clearly from your screenshots:

1. Admin Dashboard (Screenshot 1-4): Blog post "Why Africa's Research Ecosystem Deserves Global Recognition" is created successfully with PDF attached
2. Blog Detail Page (Screenshot 2): Shows "Article not found" error when clicking "Read More"

The problem is that the blog detail page can't find the blog because it's not properly fetching the data from localStorage. The blog ID in the URL (1772571589848) doesn't match how the blog is being loaded. Let me fix this:

I found the issue! The blog detail page is trying to match the ID as an integer (parseInt(params.id)), but it's comparing with blog objects that have numeric IDs. The problem is that the data might not be loading synchronously. Let me fix this with better error handling and data loading:

Now let me also update the blogs list page to ensure it's providing the correct navigation link format:

The link format looks correct. The issue is that the data might not be syncing properly. Let me add a real-time sync to the blog detail page as well:

Now let me check the browser console to debug this. First, let me verify the blog detail page is properly awaiting the params:

The issue in Next.js 16 is that params needs to be awaited. Let me fix this:

I've fixed the blog detail page to properly handle Next.js 16's async params. The issue was that params is now a Promise in Next.js 16 and needs to be awaited. I added proper async handling and debugging console logs so you can see what's happening when the page loads. Try clicking "Read More" again and check the browser console (F12 → Console tab) to see if the blog is being found now.