diff --git a/.env b/.env
index c1117f5..9cf1821 100644
--- a/.env
+++ b/.env
@@ -1,8 +1,8 @@
 # ===================================
 # CLOUDINARY                  
 # ===================================
-NEXT_PUBLIC_CLOUD_NAME=dwqknejrz
-NEXT_PUBLIC_UPLOAD_PRESET=ad-app
+NEXT_PUBLIC_CLOUD_NAME=
+NEXT_PUBLIC_UPLOAD_PRESET=
 # ===================================
 
 # ===================================
@@ -15,4 +15,4 @@ NEXT_PUBLIC_UPLOAD_PRESET=ad-app
 # VERCEL
 # ===================================
 # NEXT_PUBLIC_PROJECT_HTTP_URL=
-# ===================================
\ No newline at end of file
+# ===================================
diff --git a/package.json b/package.json
index 40afd86..54ec885 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "@prisma/client": "^5.2.0",
+    "@tanstack/react-query": "^4.35.3",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "classnames": "^2.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 82d8e89..f7f7c72 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@hookform/resolvers': ^3.3.1
   '@prisma/client': ^5.2.0
+  '@tanstack/react-query': ^4.35.3
   '@types/node': 20.5.9
   '@types/react': 18.2.21
   '@types/react-dom': 18.2.7
@@ -27,6 +28,7 @@ specifiers:
 dependencies:
   '@hookform/resolvers': 3.3.1_react-hook-form@7.46.1
   '@prisma/client': 5.2.0_prisma@5.2.0
+  '@tanstack/react-query': 4.35.3_biqbaboplfbrettd7655fr4n2y
   '@types/react': 18.2.21
   '@types/react-dom': 18.2.7
   classnames: 2.3.2
@@ -319,6 +321,28 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@tanstack/query-core/4.35.3:
+    resolution: {integrity: sha512-PS+WEjd9wzKTyNjjQymvcOe1yg8f3wYc6mD+vb6CKyZAKvu4sIJwryfqfBULITKCla7P9C4l5e9RXePHvZOZeQ==}
+    dev: false
+
+  /@tanstack/react-query/4.35.3_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-UgTPioip/rGG3EQilXfA2j4BJkhEQsR+KAbF+KIuvQ7j4MkgnTCJF01SfRpIRNtQTlEfz/+IL7+jP8WA8bFbsw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@tanstack/query-core': 4.35.3
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      use-sync-external-store: 1.2.0_react@18.2.0
+    dev: false
+
   /@tsconfig/node10/1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
     dev: true
@@ -2672,6 +2696,14 @@ packages:
       punycode: 2.3.0
     dev: false
 
+  /use-sync-external-store/1.2.0_react@18.2.0:
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: false
diff --git a/src/app/add-advertisement/loading.tsx b/src/app/add-advertisement/loading.tsx
index c7bb90d..16693de 100644
--- a/src/app/add-advertisement/loading.tsx
+++ b/src/app/add-advertisement/loading.tsx
@@ -1,8 +1,7 @@
 import { AddAdvertisementFormSkeleton } from '@/components/add-advertisement/add-advertisement-form/add-advertisement-form'
 import { BreadcrumbSkeleton } from '@/components/general/breadcrumb/breadcrumb'
-import { NextPage } from 'next'
 
-const Loading: NextPage = () => {
+const Loading = () => {
   return (
     <div className='container'>
       <BreadcrumbSkeleton />
diff --git a/src/app/add-advertisement/page.tsx b/src/app/add-advertisement/page.tsx
index 6ca3ff6..2f3ea54 100644
--- a/src/app/add-advertisement/page.tsx
+++ b/src/app/add-advertisement/page.tsx
@@ -1,7 +1,6 @@
 import AddAdvertisement from '@/components/add-advertisement/add-advertisement'
-import { NextPage } from 'next'
 
-const AddAdvertisementPage: NextPage = () => {
+const AddAdvertisementPage = () => {
   return <AddAdvertisement />
 }
 
diff --git a/src/app/api/advertisements/[id]/route.ts b/src/app/api/advertisements/[id]/route.ts
index 7590543..37fbb36 100644
--- a/src/app/api/advertisements/[id]/route.ts
+++ b/src/app/api/advertisements/[id]/route.ts
@@ -2,6 +2,8 @@ import { NextResponse } from 'next/server'
 import moment from 'moment-timezone'
 import prisma from '@/lib/prisma'
 
+export const dynamic = 'force-dynamic'
+
 export async function PATCH(
   request: Request,
   { params }: { params: { id: string } }
diff --git a/src/app/api/advertisements/route.ts b/src/app/api/advertisements/route.ts
index 29c50fb..2414983 100644
--- a/src/app/api/advertisements/route.ts
+++ b/src/app/api/advertisements/route.ts
@@ -1,5 +1,18 @@
 import { NextResponse } from 'next/server'
 import prisma from '@/lib/prisma'
+export const dynamic = 'force-dynamic'
+
+export async function GET(request: Request) {
+  try {
+    const ads = await prisma.advertisement.findMany({
+      orderBy: [{ lastUpdated: 'desc' }]
+    })
+
+    return NextResponse.json(ads)
+  } catch (error: any) {
+    return new NextResponse(error.message, { status: 500 })
+  }
+}
 
 export async function POST(request: Request) {
   try {
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 36c0d77..b13219d 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -8,7 +8,7 @@ interface Props {
   reset: () => void
 }
 
-const Error: React.FC<Props> = ({ error, reset }) => {
+const Error = ({ error, reset }: Props) => {
   const [show, setShow] = useState(false)
   const showError = () => {
     setShow(true)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 26e6bc2..57d4255 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import Header from '@/components/layout/header/header'
 import { Inter } from 'next/font/google'
 import Main from '@/components/layout/main/main'
 import type { Metadata } from 'next'
+import { ReactQueryProviders } from '@/context/react-query.context'
 import { SortOptionProvider } from '@/context/sort-option.context'
 import Toast from '@/components/general/toast/toast'
 import { ToastProvider } from '@/context/toast.context'
@@ -19,23 +20,24 @@ export const metadata: Metadata = {
   }
 }
 
-
 interface Props {
   children: React.ReactNode
 }
 
-const RootLayout: React.FC<Props> = ({ children }) => {
+const RootLayout = ({ children }: Props) => {
   return (
     <html lang='en'>
       <body className={inter.className}>
-        <ToastProvider>
-          <Toast />
-          <Header />
-          <SortOptionProvider>
-            <Main>{children}</Main>
-            <Footer />
-          </SortOptionProvider>
-        </ToastProvider>
+        <ReactQueryProviders>
+          <ToastProvider>
+            <Toast />
+            <Header />
+            <SortOptionProvider>
+              <Main>{children}</Main>
+              <Footer />
+            </SortOptionProvider>
+          </ToastProvider>
+        </ReactQueryProviders>
       </body>
     </html>
   )
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 6f0841a..5a310e4 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -7,7 +7,7 @@ interface Props {
   reset: () => void
 }
 
-const Error: React.FC<Props> = ({ error, reset }) => {
+const Error = ({ error, reset }: Props) => {
   return (
     <div className='textCenter'>
       <h2 className='mb3xl'>Sayfa bulunamadı!</h2>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8ea255b..d7359d5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,6 @@
 import HomePage from '@/components/homepage/homepage'
-import { NextPage } from 'next'
 
-export const dynamic = 'force-dynamic'
-
-const Home: NextPage = () => {
+const Home = () => {
   return <HomePage />
 }
 
diff --git a/src/components/add-advertisement/add-advertisement-form/add-advertisement-form.tsx b/src/components/add-advertisement/add-advertisement-form/add-advertisement-form.tsx
index 9758ed4..ca0448e 100644
--- a/src/components/add-advertisement/add-advertisement-form/add-advertisement-form.tsx
+++ b/src/components/add-advertisement/add-advertisement-form/add-advertisement-form.tsx
@@ -10,16 +10,19 @@ import { checkFile, uploadToCloudinary } from '@/utils/helpers'
 import { Button } from '@/components/general/button/button'
 import Icon from '@/components/general/icon/icon'
 import { Skeleton } from '@/components/general/skeleton/skeleton'
+import { addAdvertisements } from '@/lib/query-service'
 import classNames from 'classnames'
 import styles from './styles.module.scss'
 import { useForm } from 'react-hook-form'
+import { useMutation } from '@tanstack/react-query'
+import { useQueryClientInstance } from '@/context/query-client.context'
 // Because of using App dir, we need to use next/navigation instead of next/router
 // See: https://nextjs.org/docs/messages/next-router-not-mounted
 import { useRouter } from 'next/navigation'
 import { useToast } from '@/hooks/use-toast'
 import { yupResolver } from '@hookform/resolvers/yup'
 
-export const AddAdvertisementForm: React.FC = () => {
+export const AddAdvertisementForm = () => {
   const [imageUploadLabel, setImageUploadLabel] = useState<string>('Yükle')
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const formOptions = {
@@ -41,6 +44,22 @@ export const AddAdvertisementForm: React.FC = () => {
   } = useForm(formOptions)
   const { errors } = formState
 
+  const { queryClient } = useQueryClientInstance()
+
+  const { isLoading: dataIsLoading, mutate } = useMutation({
+    mutationFn: addAdvertisements,
+    onSuccess: () => {
+      showToast(
+        'İlan başarıyla kaydedilmiştir. Ana sayfaya yönlendiriliyorsunuz',
+        'success'
+      )
+      queryClient.invalidateQueries({ queryKey: ['ads'] })
+    },
+    onError: () => {
+      showToast('İlan eklenirken bir sorun oluştu.', 'error')
+    }
+  })
+
   const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
     setIsLoading(true)
 
@@ -66,25 +85,15 @@ export const AddAdvertisementForm: React.FC = () => {
   }
 
   const onSubmit = async () => {
-    const response = await fetch('/api/advertisements', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ ...watch() })
-    })
-
-    if (response.ok) {
-      showToast(
-        'İlan başarıyla kaydedilmiştir. Ana sayfaya yönlendiriliyorsunuz',
-        'success'
-      )
-    } else {
-      const error = await response.text()
-      showToast(error, 'error')
-    }
-    reset()
-    setImageUploadLabel('Yükle')
-    router.refresh()
-    router.push('/')
+    mutate(
+      { ...watch() },
+      {
+        onSuccess: () => {
+          setImageUploadLabel('Yükle')
+          router.push('/')
+        }
+      }
+    )
   }
 
   return (
@@ -164,7 +173,7 @@ export const AddAdvertisementForm: React.FC = () => {
         </div>
         <Button
           type='submit'
-          disabled={isLoading}
+          disabled={isLoading || dataIsLoading}
           className={styles.submitButton}
         >
           {isLoading ? <Icon name='Spinner' size={16} /> : 'KAYDET'}
@@ -174,7 +183,7 @@ export const AddAdvertisementForm: React.FC = () => {
   )
 }
 
-export const AddAdvertisementFormSkeleton: React.FC = () => {
+export const AddAdvertisementFormSkeleton = () => {
   return (
     <div className='centerAlignedItems ptXl'>
       <div className={classNames(styles.wrapper, 'pl2xl')}>
diff --git a/src/components/add-advertisement/add-advertisement-form/styles.module.scss b/src/components/add-advertisement/add-advertisement-form/styles.module.scss
index bf5154a..f3e7de1 100644
--- a/src/components/add-advertisement/add-advertisement-form/styles.module.scss
+++ b/src/components/add-advertisement/add-advertisement-form/styles.module.scss
@@ -52,7 +52,7 @@
     }
 
     .imageUploadButton {
-      height: unset;
+      height: initial;
       display: inline-flex;
       gap: $space-sm;
       align-items: center;
diff --git a/src/components/add-advertisement/add-advertisement.tsx b/src/components/add-advertisement/add-advertisement.tsx
index 29dd005..c65e159 100644
--- a/src/components/add-advertisement/add-advertisement.tsx
+++ b/src/components/add-advertisement/add-advertisement.tsx
@@ -1,7 +1,7 @@
 import { AddAdvertisementForm } from './add-advertisement-form/add-advertisement-form'
 import { Breadcrumb } from '@/components/general/breadcrumb/breadcrumb'
 
-const AddAdvertisement: React.FC = () => {
+const AddAdvertisement = () => {
   return (
     <div className='container'>
       <Breadcrumb page='yeni ilan' subtitle='ekle' />
diff --git a/src/components/general/breadcrumb/breadcrumb.tsx b/src/components/general/breadcrumb/breadcrumb.tsx
index c835193..4010d3a 100644
--- a/src/components/general/breadcrumb/breadcrumb.tsx
+++ b/src/components/general/breadcrumb/breadcrumb.tsx
@@ -7,7 +7,7 @@ interface Props {
   children?: React.ReactNode
 }
 
-export const Breadcrumb: React.FC<Props> = ({ page, subtitle, children }) => {
+export const Breadcrumb = ({ page, subtitle, children }: Props) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.title}>
@@ -24,9 +24,7 @@ interface BreadcrumbSkeletonProps {
   children?: React.ReactNode
 }
 
-export const BreadcrumbSkeleton: React.FC<BreadcrumbSkeletonProps> = ({
-  children
-}) => {
+export const BreadcrumbSkeleton = ({ children }: BreadcrumbSkeletonProps) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.titleSkeleton}>
diff --git a/src/components/general/button/button.tsx b/src/components/general/button/button.tsx
index cf1dc12..6d88855 100644
--- a/src/components/general/button/button.tsx
+++ b/src/components/general/button/button.tsx
@@ -8,13 +8,13 @@ interface Props {
   type?: 'button' | 'submit' | 'reset'
 }
 
-export const Button: React.FC<Props> = ({
+export const Button = ({
   className,
   disabled,
   onClick,
   children,
   type
-}) => {
+}: Props) => {
   return (
     <button
       onClick={onClick}
diff --git a/src/components/general/icon/icon.tsx b/src/components/general/icon/icon.tsx
index e2e5062..8d56079 100644
--- a/src/components/general/icon/icon.tsx
+++ b/src/components/general/icon/icon.tsx
@@ -10,7 +10,7 @@ interface Props {
   className?: string
 }
 
-const Icon: React.FC<Props> = ({ name, size, className }) => {
+const Icon = ({ name, size, className }: Props) => {
   const Component = iconNameMap[name]
 
   return (
diff --git a/src/components/general/skeleton/skeleton.tsx b/src/components/general/skeleton/skeleton.tsx
index 08124da..9204b8c 100644
--- a/src/components/general/skeleton/skeleton.tsx
+++ b/src/components/general/skeleton/skeleton.tsx
@@ -5,6 +5,6 @@ interface Props {
   className?: string
 }
 
-export const Skeleton: React.FC<Props> = ({ className }) => {
+export const Skeleton = ({ className }: Props) => {
   return <div className={classNames(styles.skeleton, className)} />
 }
diff --git a/src/components/general/toast/toast.tsx b/src/components/general/toast/toast.tsx
index a7098b9..948efcb 100644
--- a/src/components/general/toast/toast.tsx
+++ b/src/components/general/toast/toast.tsx
@@ -6,7 +6,7 @@ import { ToastContext } from '@/context/toast.context'
 import classNames from 'classnames'
 import styles from './styles.module.scss'
 
-const Toast: React.FC = () => {
+const Toast = () => {
   const {
     state: { display, type, message }
   } = useContext(ToastContext)
diff --git a/src/components/homepage/ad-list/ad-list.tsx b/src/components/homepage/ad-list/ad-list.tsx
index 90965af..539cb6c 100644
--- a/src/components/homepage/ad-list/ad-list.tsx
+++ b/src/components/homepage/ad-list/ad-list.tsx
@@ -1,30 +1,49 @@
 'use client'
 
-import { Ad } from '@/components/homepage/ad/ad'
+import { Ad, AdSkeleton } from '@/components/homepage/ad/ad'
+
 import { Advertisement } from '@prisma/client'
 import { Fragment } from 'react'
+import { getAdvertisements } from '@/lib/query-service'
 import styles from './styles.module.scss'
+import { useQuery } from '@tanstack/react-query'
 import { useSortOption } from '@/hooks/use-sort-option'
 
-interface Props {
-  ads: Advertisement[]
-}
+export const AdList = () => {
+  const {
+    data: ads,
+    isLoading,
+    error
+  } = useQuery<Advertisement[]>({
+    queryKey: ['ads'],
+    queryFn: getAdvertisements
+  })
 
-export const AdList: React.FC<Props> = ({ ads }) => {
   const { sortedAds } = useSortOption()
-  const data = sortedAds(ads)
 
   const adList = () => {
-    if (data.length === 0 || !data) {
+    if (isLoading) {
+      return (
+        <>
+          {Array(3)
+            .fill(null)
+            .map((_, index) => (
+              <AdSkeleton key={index} />
+            ))}
+        </>
+      )
+    }
+    if (error) {
+      return <p>Bir sorun oluştu.</p>
+    }
+    if (!ads || ads.length === 0) {
       return <p>Henüz ilan bulunmamaktadır.</p>
     }
+    const data = sortedAds(ads)
+
     return data.map((ad, index) => (
       <Fragment key={`ad-card-${index}`}>
-        {index < 6 ? (
-          <Ad data={ad} imgPriority={true} />
-        ) : (
-          <Ad data={ad}  />
-        )}
+        {index < 6 ? <Ad data={ad} imgPriority={true} /> : <Ad data={ad} />}
       </Fragment>
     ))
   }
@@ -35,6 +54,6 @@ interface AdListSkeletonProps {
   children: React.ReactNode
 }
 
-export const AdListSkeleton: React.FC<AdListSkeletonProps> = ({ children }) => {
+export const AdListSkeleton = ({ children }: AdListSkeletonProps) => {
   return <div className={styles.wrapper}>{children}</div>
 }
diff --git a/src/components/homepage/ad/ad.tsx b/src/components/homepage/ad/ad.tsx
index 6079844..cdacf5d 100644
--- a/src/components/homepage/ad/ad.tsx
+++ b/src/components/homepage/ad/ad.tsx
@@ -12,7 +12,7 @@ interface Props {
   imgPriority?: boolean
 }
 
-export const Ad: React.FC<Props> = ({ data, imgPriority = false }) => {
+export const Ad = ({ data, imgPriority = false }: Props) => {
   const { id, isUrgent, imageUrl, title, favoriteCount, lastUpdated } = data
 
   const date = useFormattedDate(lastUpdated)
@@ -55,7 +55,7 @@ export const Ad: React.FC<Props> = ({ data, imgPriority = false }) => {
   )
 }
 
-export const AdSkeleton: React.FC = () => {
+export const AdSkeleton = () => {
   return (
     <div className={styles.cardContainer}>
       <div className={styles.wrapper}>
diff --git a/src/components/homepage/ad/delete-ad-button/delete-ad-button.tsx b/src/components/homepage/ad/delete-ad-button/delete-ad-button.tsx
index c31b194..c33d41c 100644
--- a/src/components/homepage/ad/delete-ad-button/delete-ad-button.tsx
+++ b/src/components/homepage/ad/delete-ad-button/delete-ad-button.tsx
@@ -1,52 +1,42 @@
 'use client'
 
-import { startTransition, useState } from 'react'
-
 import { Button } from '@/components/general/button/button'
 import Icon from '@/components/general/icon/icon'
+import { deleteAdvertisement } from '@/lib/query-service'
 import styles from './styles.module.scss'
-import { useRouter } from 'next/navigation'
+import { useMutation } from '@tanstack/react-query'
+import { useQueryClientInstance } from '@/context/query-client.context'
 import { useToast } from '@/hooks/use-toast'
 
 interface Props {
   id: string
 }
 
-const DeleteAdButton: React.FC<Props> = ({ id }) => {
-  const router = useRouter()
+const DeleteAdButton = ({ id }: Props) => {
   const { showToast } = useToast()
 
-  const [isDeleting, setIsDeleting] = useState<boolean>(false)
+  const { queryClient } = useQueryClientInstance()
 
-  const handleDelete = async (id: string) => {
-    setIsDeleting(true)
-    if (!id) {
+  const { isLoading, mutate } = useMutation({
+    mutationFn: deleteAdvertisement,
+    onSuccess: () => {
+      showToast('İlan başarıyla silindi.', 'success')
+      queryClient.invalidateQueries({ queryKey: ['ads'] })
+    },
+    onError: () => {
       showToast('İlan silinirken bir sorun oluştu.', 'error')
-      return
     }
+  })
 
-    const response = await fetch(`/api/advertisements/${id}`, {
-      method: 'DELETE'
-    })
-
-    if (!response.ok) {
-      const errorMessage = await response.text()
-      showToast(`İlan silinirken bir sorun oluştu: ${errorMessage}`, 'error')
-      setIsDeleting(false)
-      return
-    }
-    setIsDeleting(false)
-    showToast('İlan başarıyla silindi.', 'success')
-    startTransition(() => {
-      router.refresh()
-    })
+  const handleDelete = () => {
+    mutate({ id })
   }
 
   return (
     <Button
       className={styles.button}
-      onClick={() => handleDelete(id)}
-      disabled={isDeleting}
+      onClick={handleDelete}
+      disabled={isLoading}
     >
       <Icon name='TrashIcon' size={20} className={styles.icon} />
     </Button>
diff --git a/src/components/homepage/ad/favorite-ad-button/favorite-ad-button.tsx b/src/components/homepage/ad/favorite-ad-button/favorite-ad-button.tsx
index 7c04ffc..1a42e54 100644
--- a/src/components/homepage/ad/favorite-ad-button/favorite-ad-button.tsx
+++ b/src/components/homepage/ad/favorite-ad-button/favorite-ad-button.tsx
@@ -1,11 +1,11 @@
 'use client'
 
-import { startTransition, useState } from 'react'
-
 import { Button } from '@/components/general/button/button'
 import Icon from '@/components/general/icon/icon'
 import styles from './styles.module.scss'
-import { useRouter } from 'next/navigation'
+import { updateAdvertisements } from '@/lib/query-service'
+import { useMutation } from '@tanstack/react-query'
+import { useQueryClientInstance } from '@/context/query-client.context'
 import { useToast } from '@/hooks/use-toast'
 
 interface Props {
@@ -13,44 +13,31 @@ interface Props {
   favoriteCount: number
 }
 
-const FavoriteAdButton: React.FC<Props> = ({ id, favoriteCount }) => {
-  const router = useRouter()
+const FavoriteAdButton = ({ id, favoriteCount }: Props) => {
   const { showToast } = useToast()
 
-  const [isFavoriting, setIsFavoriting] = useState<boolean>(false)
+  const { queryClient } = useQueryClientInstance()
 
-  const handleFavorite = async (id: string) => {
-    setIsFavoriting(true)
-    if (!id) {
+  const { isLoading, mutate } = useMutation({
+    mutationFn: updateAdvertisements,
+    onSuccess: () => {
+      showToast('İlan başarıyla favorilendi.', 'success')
+      queryClient.invalidateQueries({ queryKey: ['ads'] })
+    },
+    onError: () => {
       showToast('İlan favorilenirken bir sorun oluştu.', 'error')
-      return
-    }
-
-    const response = await fetch(`/api/advertisements/${id}`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ favoriteCount: favoriteCount + 1 })
-    })
-
-    if (!response.ok) {
-      const errorMessage = await response.text()
-      showToast(`Favori işleminde bir sorun oluştu: ${errorMessage}`, 'error')
-      setIsFavoriting(false)
-      return
     }
+  })
 
-    setIsFavoriting(false)
-    showToast('İlan başarıyla favorilendi.', 'success')
-    startTransition(() => {
-      router.refresh()
-    })
+  const handleFavorite = () => {
+    mutate({ id, favoriteCount })
   }
 
   return (
     <Button
       className={styles.button}
-      onClick={() => handleFavorite(id)}
-      disabled={isFavoriting}
+      onClick={handleFavorite}
+      disabled={isLoading}
     >
       <Icon name='HeartIcon' size={20} />
     </Button>
diff --git a/src/components/homepage/homepage.tsx b/src/components/homepage/homepage.tsx
index 54c90d8..90bd1b5 100644
--- a/src/components/homepage/homepage.tsx
+++ b/src/components/homepage/homepage.tsx
@@ -1,17 +1,23 @@
 import { AdList } from './ad-list/ad-list'
 import { Breadcrumb } from '@/components/general/breadcrumb/breadcrumb'
 import ListingDropdown from './listing-dropdown/listing-dropdown'
-import { getAdvertisements } from '@/lib/advertisement-service'
+import { ReactQueryHydrate } from '../hydrate'
+import { dehydrate } from '@tanstack/react-query'
+import { getAdvertisements } from '@/lib/query-service'
+import getQueryClient from '@/lib/getQueryClient'
 
-const HomePage: React.FC = async () => {
-  const data = await getAdvertisements()
+const HomePage = async () => {
+  const queryClient = getQueryClient()
+  const dehydratedState = dehydrate(queryClient)
 
   return (
     <div className='container'>
       <Breadcrumb page='ana sayfa' subtitle='vitrini'>
         <ListingDropdown />
       </Breadcrumb>
-      <AdList ads={data} />
+      <ReactQueryHydrate state={dehydratedState}>
+        <AdList />
+      </ReactQueryHydrate>
     </div>
   )
 }
diff --git a/src/components/homepage/listing-dropdown/listing-dropdown.tsx b/src/components/homepage/listing-dropdown/listing-dropdown.tsx
index de918eb..66e98f0 100644
--- a/src/components/homepage/listing-dropdown/listing-dropdown.tsx
+++ b/src/components/homepage/listing-dropdown/listing-dropdown.tsx
@@ -9,7 +9,7 @@ import { capitalizeFirstLetter } from '@/utils/helpers'
 import styles from './styles.module.scss'
 import { useSortOption } from '@/hooks/use-sort-option'
 
-const ListingDropdown: React.FC = () => {
+const ListingDropdown = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
 
diff --git a/src/components/hydrate/index.tsx b/src/components/hydrate/index.tsx
new file mode 100644
index 0000000..e96439c
--- /dev/null
+++ b/src/components/hydrate/index.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import { HydrateProps, Hydrate as RQHydrate } from '@tanstack/react-query';
+
+export const ReactQueryHydrate = (props: HydrateProps) => {
+  return <RQHydrate {...props} />;
+};
diff --git a/src/components/layout/footer/footer.tsx b/src/components/layout/footer/footer.tsx
index 6f36387..f7e5081 100644
--- a/src/components/layout/footer/footer.tsx
+++ b/src/components/layout/footer/footer.tsx
@@ -1,6 +1,6 @@
 import styles from './styles.module.scss'
 
-const Footer: React.FC = () => {
+const Footer = () => {
   return (
     <footer className={styles.footer}>
       <p>Copyright © 2023 by Damla Köksal</p>
diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
index f7e188e..0244670 100644
--- a/src/components/layout/header/header.tsx
+++ b/src/components/layout/header/header.tsx
@@ -3,9 +3,9 @@ import Link from 'next/link'
 import classNames from 'classnames'
 import styles from './styles.module.scss'
 
-const Header: React.FC = () => {
+const Header = () => {
   return (
-    <header className={styles.header} id="header">
+    <header className={styles.header} id='header'>
       <Link href='/' className={styles.logo}>
         <Image src='/logo.png' alt='Ad Logo' width={40} height={40} priority />
       </Link>
diff --git a/src/components/layout/main/main.tsx b/src/components/layout/main/main.tsx
index f7ad64f..11f6f9e 100644
--- a/src/components/layout/main/main.tsx
+++ b/src/components/layout/main/main.tsx
@@ -4,7 +4,7 @@ interface Props {
   children?: React.ReactNode
 }
 
-const Main: React.FC<Props> = ({ children }) => {
+const Main = ({ children }: Props) => {
   return <main className={styles.main}>{children}</main>
 }
 
diff --git a/src/context/query-client.context.tsx b/src/context/query-client.context.tsx
new file mode 100644
index 0000000..b5e8012
--- /dev/null
+++ b/src/context/query-client.context.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { ReactNode, createContext, useContext, useState } from 'react'
+
+import { QueryClient } from '@tanstack/react-query'
+
+export const QueryClientInstanceContext = createContext<{
+  queryClient: QueryClient | null
+}>({
+  queryClient: null
+})
+
+export const QueryClientInstanceProvider = ({
+  children
+}: {
+  children: ReactNode
+}) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false
+          }
+        }
+      })
+  )
+
+  return (
+    <QueryClientInstanceContext.Provider value={{ queryClient }}>
+      {children}
+    </QueryClientInstanceContext.Provider>
+  )
+}
+
+export const useQueryClientInstance = (): { queryClient: QueryClient } => {
+  const { queryClient } = useContext(QueryClientInstanceContext)
+
+  if (!queryClient) {
+    throw new Error('No QueryClientInstanceProvider found')
+  }
+
+  return { queryClient }
+}
diff --git a/src/context/react-query.context.tsx b/src/context/react-query.context.tsx
new file mode 100644
index 0000000..ceef476
--- /dev/null
+++ b/src/context/react-query.context.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import {
+  QueryClientInstanceProvider,
+  useQueryClientInstance
+} from '@/context/query-client.context'
+import React, { ReactNode } from 'react'
+
+import { QueryClientProvider } from '@tanstack/react-query'
+
+const ReactQueryClientInstanceWrapper = ({
+  children
+}: {
+  children: ReactNode
+}) => {
+  const { queryClient } = useQueryClientInstance()
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+interface Props {
+  children: ReactNode
+}
+
+export const ReactQueryProviders = ({ children }: Props) => {
+  return (
+    <QueryClientInstanceProvider>
+      <ReactQueryClientInstanceWrapper>
+        {children}
+      </ReactQueryClientInstanceWrapper>
+    </QueryClientInstanceProvider>
+  )
+}
diff --git a/src/hooks/use-formatted-date.tsx b/src/hooks/use-formatted-date.tsx
index 0caac51..5c81d09 100644
--- a/src/hooks/use-formatted-date.tsx
+++ b/src/hooks/use-formatted-date.tsx
@@ -11,7 +11,7 @@ const useFormattedDate = (date: Date) => {
 
   useEffect(
     () => setFormattedDate(moment(date).format('DD.MM.YYYY HH:mm')),
-    [] // eslint-disable-line react-hooks/exhaustive-deps
+    [date]
   )
 
   return formattedDate
diff --git a/src/lib/advertisement-service.ts b/src/lib/advertisement-service.ts
deleted file mode 100644
index 5f0d176..0000000
--- a/src/lib/advertisement-service.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Advertisement } from '@prisma/client'
-import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library'
-import prisma from './prisma'
-
-export const getAdvertisements = async () => {
-  try {
-    const advertisements: Advertisement[] = await prisma.advertisement.findMany(
-      {
-        orderBy: [{ lastUpdated: 'desc' }]
-      }
-    )
-
-    return advertisements
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      throw error
-    }
-    if (error instanceof PrismaClientKnownRequestError) {
-      throw error
-    }
-    throw new Error('An unexpected error occurred')
-  }
-}
diff --git a/src/lib/getQueryClient.ts b/src/lib/getQueryClient.ts
new file mode 100644
index 0000000..6670e31
--- /dev/null
+++ b/src/lib/getQueryClient.ts
@@ -0,0 +1,14 @@
+import { QueryClient } from '@tanstack/react-query'
+import { cache } from 'react'
+
+const getQueryClient = cache(
+  () =>
+    new QueryClient({
+      defaultOptions: {
+        queries: {
+          refetchOnWindowFocus: false
+        }
+      }
+    })
+)
+export default getQueryClient
diff --git a/src/lib/query-service.ts b/src/lib/query-service.ts
new file mode 100644
index 0000000..6f0bf95
--- /dev/null
+++ b/src/lib/query-service.ts
@@ -0,0 +1,58 @@
+import { url } from '@/utils/env'
+
+export const addAdvertisements = async ({
+  title,
+  isUrgent,
+  imageUrl
+}: {
+  title: string
+  isUrgent: NonNullable<boolean | undefined>
+  imageUrl: string
+}) => {
+  const response = await fetch(`${url}/api/advertisements`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title, isUrgent, imageUrl })
+  })
+
+  if (!response.ok) {
+    return new Error('An error occurred while adding the advertisement.')
+  }
+  return
+}
+
+export const getAdvertisements = async () => {
+  const response = await fetch(`${url}/api/advertisements`)
+  const data = await response.json()
+  return data
+}
+
+export const updateAdvertisements = async ({
+  id,
+  favoriteCount
+}: {
+  id: string
+  favoriteCount: number
+}) => {
+  const response = await fetch(`${url}/api/advertisements/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ favoriteCount: favoriteCount + 1 })
+  })
+
+  if (!response.ok) {
+    return new Error('An error occurred while updating the advertisement.')
+  }
+  return response.json()
+}
+
+export const deleteAdvertisement = async ({ id }: { id: string }) => {
+  const response = await fetch(`${url}/api/advertisements/${id}`, {
+    method: 'DELETE'
+  })
+
+  if (!response.ok) {
+    return new Error('An error occurred while deleting the advertisement.')
+  }
+  return
+}