diff --git a/app/canli-yayin/page.tsx b/app/canli-yayin/page.tsx
index 9d906c4..9278e69 100644
--- a/app/canli-yayin/page.tsx
+++ b/app/canli-yayin/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Image from 'next/image';
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 
@@ -143,9 +144,11 @@ export default function LiveStream() {
                 >
                   {/* Thumbnail */}
                   <div className="aspect-video bg-gray-900 relative">
-                    <img
+                    <Image
                       src={`https://picsum.photos/400/225?random=${camera.id}`}
                       alt={camera.name}
+                      width={400}
+                      height={225}
                       className="w-full h-full object-cover opacity-80"
                     />
                     {/* CANLI Badge */}
diff --git a/app/haberler/page.tsx b/app/haberler/page.tsx
index 310a717..ec0e383 100644
--- a/app/haberler/page.tsx
+++ b/app/haberler/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Image from 'next/image';
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 
@@ -132,9 +133,11 @@ export default function News() {
               >
                 {/* Görsel */}
                 <div className="relative h-48 overflow-hidden">
-                  <img
+                  <Image
                     src={item.image}
                     alt={item.title}
+                    width={400}
+                    height={192}
                     className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
                   />
                   <div className="absolute top-3 left-3">
@@ -191,9 +194,11 @@ export default function News() {
           <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
             {/* Görsel */}
             <div className="relative h-64 md:h-96">
-              <img
+              <Image
                 src={selectedNewsItem.image}
                 alt={selectedNewsItem.title}
+                width={800}
+                height={384}
                 className="w-full h-full object-cover"
               />
               <button
diff --git a/app/iletisim/page.tsx b/app/iletisim/page.tsx
index 514d855..27191db 100644
--- a/app/iletisim/page.tsx
+++ b/app/iletisim/page.tsx
@@ -126,7 +126,7 @@ export default function Contact() {
                 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                 </svg>
-                <span>Google Maps'te Aç</span>
+                <span>Google Maps&#39;te Aç</span>
               </a>
             </div>
           </div>
@@ -229,7 +229,7 @@ export default function Contact() {
                   />
                   <label htmlFor="contact-kvkk" className="ml-3 text-sm text-gray-700">
                     <span className="text-red-500">*</span> Kişisel verilerimin işlenmesine ilişkin{' '}
-                    <a href="#" className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</a>'ni okudum ve kabul ediyorum.
+                    <span className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</span>&#39;ni okudum ve kabul ediyorum.
                   </label>
                 </div>
 
@@ -254,4 +254,4 @@ export default function Contact() {
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/medya/page.tsx b/app/medya/page.tsx
index c7b5073..a0482c5 100644
--- a/app/medya/page.tsx
+++ b/app/medya/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Image from 'next/image';
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 
@@ -156,9 +157,11 @@ export default function MediaGallery() {
                 >
                   {/* Thumbnail */}
                   <div className="relative h-56 overflow-hidden">
-                    <img
+                    <Image
                       src={item.thumbnail}
                       alt={item.title}
+                      width={400}
+                      height={224}
                       className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                     />
                     {/* Video Badge */}
@@ -231,9 +234,11 @@ export default function MediaGallery() {
                   </div>
                 ) : (
                   <div className="mb-6 rounded-lg overflow-hidden">
-                    <img
-                      src={selectedMediaItem?.thumbnail}
-                      alt={selectedMediaItem?.title}
+                    <Image
+                      src={selectedMediaItem?.thumbnail || ''}
+                      alt={selectedMediaItem?.title || ''}
+                      width={800}
+                      height={600}
                       className="w-full h-auto"
                     />
                   </div>
diff --git a/app/page.tsx b/app/page.tsx
index 985311b..1ffdacd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import Link from 'next/link';
+import Image from 'next/image';
 import Header from "@/components/Header";
 import MetroLine from "@/components/MetroLine";
 import Footer from "@/components/Footer";
@@ -453,9 +453,11 @@ export default function Home() {
                   <div key={news.id} className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                     {/* Haber Görseli */}
                     <div className="h-48 overflow-hidden">
-                      <img 
-                        src={news.image} 
+                      <Image
+                        src={news.image}
                         alt={news.title}
+                        width={400}
+                        height={192}
                         className="w-full h-full object-cover hover:scale-110 transition-transform duration-500"
                       />
                     </div>
@@ -507,9 +509,11 @@ export default function Home() {
                     <div className="bg-white rounded-xl overflow-hidden">
                       {/* Büyük Görsel */}
                       <div className="h-96 overflow-hidden">
-                        <img 
-                          src={news.image} 
+                        <Image
+                          src={news.image}
                           alt={news.title}
+                          width={800}
+                          height={384}
                           className="w-full h-full object-cover"
                         />
                       </div>
@@ -728,9 +732,11 @@ export default function Home() {
                     >
                       {/* Thumbnail */}
                       <div className="relative h-56 overflow-hidden">
-                        <img
+                        <Image
                           src={item.thumbnail}
                           alt={item.title}
+                          width={400}
+                          height={224}
                           className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                         />
                         {/* Video Badge */}
@@ -805,9 +811,11 @@ export default function Home() {
                       </div>
                     ) : (
                       <div className="mb-6 rounded-lg overflow-hidden">
-                        <img
+                        <Image
                           src={item.thumbnail}
                           alt={item.title}
+                          width={800}
+                          height={600}
                           className="w-full h-auto"
                         />
                       </div>
@@ -1044,7 +1052,7 @@ export default function Home() {
                 />
                 <label htmlFor="kvkk" className="ml-3 text-sm text-gray-700">
                   <span className="text-red-500">*</span> Kişisel verilerimin işlenmesine ilişkin{' '}
-                  <a href="#" className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</a>'ni okudum ve kabul ediyorum.
+                  <span className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</span>&#39;ni okudum ve kabul ediyorum.
                 </label>
               </div>
 
@@ -1210,7 +1218,7 @@ export default function Home() {
                   <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                   </svg>
-                  <span>Google Maps'te Aç</span>
+                  <span>Google Maps&#39;te Aç</span>
                 </a>
               </div>
             </div>
diff --git a/app/sss/page.tsx b/app/sss/page.tsx
index be9053e..69cf0f9 100644
--- a/app/sss/page.tsx
+++ b/app/sss/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 
@@ -128,12 +129,12 @@ export default function FAQ() {
               <p className="text-[#F8F9FA] mb-6">
                 Yukarıdaki sorular dışında merak ettiğiniz konular için bizimle iletişime geçebilirsiniz.
               </p>
-              <a
+              <Link
                 href="/#iletisim"
                 className="inline-block bg-[#00B4D8] text-white px-8 py-3 rounded-lg font-semibold hover:bg-[#0099B8] transition-colors"
               >
                 İletişime Geç
-              </a>
+              </Link>
             </div>
           </div>
         </div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index f131832..092e376 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 
 export default function Footer() {
   return (
@@ -8,14 +9,16 @@ export default function Footer() {
           {/* Logo ve Bilgi */}
           <div>
             <div className="mb-4">
-              <img 
-                src="https://www.ankara.bel.tr/assets/images/logo-white.svg" 
+              <Image
+                src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
                 alt="Ankara Büyükşehir Belediyesi"
+                width={64}
+                height={64}
                 className="h-16 w-auto object-contain"
               />
             </div>
             <p className="text-gray-300 text-sm leading-relaxed">
-              A2 Metro Hattı İnşaat Projesi - Ankara'nın ulaşım altyapısına modern çözümler sunuyoruz.
+              A2 Metro Hattı İnşaat Projesi - Ankara&#39;nın ulaşım altyapısına modern çözümler sunuyoruz.
             </p>
           </div>
 
diff --git a/components/Header.tsx b/components/Header.tsx
index f8a0d78..e22d44a 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 export default function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -22,9 +23,11 @@ export default function Header() {
           <div className="flex justify-between items-center h-20">
             <Link href="/" className="flex items-center">
               <div className="w-32 h-32">
-                <img 
-                  src="https://www.ankara.bel.tr/assets/images/logo-white.svg" 
+                <Image
+                  src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
                   alt="Ankara Belediyesi Logo"
+                  width={128}
+                  height={128}
                   className="w-full h-full object-contain"
                 />
               </div>