diff --git a/components/blogpost.tsx b/components/blogpost.tsx
index b129d60..9226df3 100644
--- a/components/blogpost.tsx
+++ b/components/blogpost.tsx
@@ -1,4 +1,9 @@
+'use client';
+
 import Link from 'next/link';
+import Image from 'next/image';
+
+import blogTestPic from './retrofuturism.webp';
 
 interface BlogPost {
   label: string;
@@ -19,10 +24,12 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
           <div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
             <div className="left mr-5">
               <div className="blogpost-image">
-                <img
-                  src="/images/retrofuturism.webp"
+                <Image
+                  src="/images/retrofuturism.webp" // Path to the local image
                   alt="Retrospective Science Image"
-                  className="w-96 h-96 rounded-lg border border-white"
+                  width={384} // Set width (in pixels)
+                  height={384} // Set height (in pixels)
+                  className="rounded-lg"
                 />
               </div>
             </div>
diff --git a/public/images/retrofuturism.webp b/public/images/retrofuturism.webp
new file mode 100644
index 0000000..a4a94cd
Binary files /dev/null and b/public/images/retrofuturism.webp differ