diff --git a/src/app/dashboard/diaries/page.tsx b/src/app/dashboard/diaries/page.tsx
index a63b75c..a7e0f7d 100644
--- a/src/app/dashboard/diaries/page.tsx
+++ b/src/app/dashboard/diaries/page.tsx
@@ -1,7 +1,64 @@
+'use client';
+
+import { useSuspenseQuery } from '@apollo/experimental-nextjs-app-support/ssr';
+import { gql } from '@apollo/client';
 import Diaries from '@/src/components/diaries/Diaries';
+import {
+  Diary,
+  ReadDiariesQuery,
+  ReadDiariesQueryVariables,
+} from '@/src/@types/__graphqlTypes__/graphql';
+
+const DIARIES_QUERY = gql`
+  query ReadDiaries($take: Int!, $skip: Int!) {
+    readDiaries(take: $take, skip: $skip) {
+      code
+      success
+      message
+      data {
+        createdDate
+        updatedDate
+        deletedDate
+        version
+        id
+        userId
+        title
+        notes {
+          createdDate
+          updatedDate
+          deletedDate
+          version
+          id
+          diaryId
+          title
+          text
+          images {
+            url
+            title
+          }
+        }
+      }
+      count
+    }
+  }
+`;
 
 const DiariesPage = () => {
-  return <Diaries />;
+  const { data, error } = useSuspenseQuery<
+    ReadDiariesQuery,
+    ReadDiariesQueryVariables
+  >(DIARIES_QUERY, {
+    variables: { take: 10, skip: 0 },
+  });
+
+  if (error) return <p>Error loading diaries: {error.message}</p>;
+  if (!data || !data.readDiaries || !data.readDiaries.data)
+    return <p>No data available</p>;
+  const filteredData = data.readDiaries.data.filter(
+    (diary): diary is Diary => diary !== null
+  );
+
+  return <Diaries diariesData={filteredData} />;
 };
 
 export default DiariesPage;
diff --git a/src/components/diaries/Diaries.tsx b/src/components/diaries/Diaries.tsx
index a5cc625..8d155d0 100644
--- a/src/components/diaries/Diaries.tsx
+++ b/src/components/diaries/Diaries.tsx
@@ -1,74 +1,17 @@
-'use client';
+import React from 'react';
+import { Diary } from '@/src/@types/__graphqlTypes__/graphql';
 
-export const dynamic = 'force-dynamic';
-
-import { useSuspenseQuery } from '@apollo/experimental-nextjs-app-support/ssr';
-import { gql } from '@apollo/client';
-import {
-  ReadDiariesQuery,
-  ReadDiariesQueryVariables,
-} from '@/src/@types/__graphqlTypes__/graphql';
-
-const query = gql`
-  query ReadDiaries($take: Int!, $skip: Int!) {
-    readDiaries(take: $take, skip: $skip) {
-      code
-      success
-      message
-      data {
-        createdDate
-        updatedDate
-        deletedDate
-        version
-        id
-        userId
-        title
-        notes {
-          createdDate
-          updatedDate
-          deletedDate
-          version
-          id
-          diaryId
-          title
-          text
-          images {
-            url
-            title
-          }
-        }
-      }
-      count
-    }
-  }
-`;
-const Diaries = () => {
-  const { data, error } = useSuspenseQuery<
-    ReadDiariesQuery,
-    ReadDiariesQueryVariables
-  >(query, {
-    variables: { take: 10, skip: 0 },
-  });
-
-  if (error) return <p>Error loading diaries: {error.message}</p>;
-  if (!data || !data.readDiaries || !data.readDiaries.data)
-    return <p>No data available</p>;
+interface DiariesProps {
+  diariesData: Diary[];
+}
 
+const Diaries: React.FC<DiariesProps> = ({ diariesData }) => {
   return (
     <div>
       <h1>Diaries</h1>
-      {data.readDiaries.data.map((diary) => (
-        <div key={diary?.id}>
-          <h2>{diary?.title}</h2>
-          {diary?.notes.map((note) => (
-            <div key={note?.id}>
-              <h3>{note?.title}</h3>
-              <p>{note?.text}</p>
-              {note?.images.map((image) => (
-                <img key={image?.url} src={image?.url} alt={image?.title} />
-              ))}
-            </div>
-          ))}
+      {diariesData.map((diary) => (
+        <div key={diary.id}>
+          <h2>{diary.title}</h2>
         </div>
       ))}
     </div>
diff --git a/src/lib/ApolloWrapper.tsx b/src/lib/ApolloWrapper.tsx
index 94ad6c6..11a9329 100644
--- a/src/lib/ApolloWrapper.tsx
+++ b/src/lib/ApolloWrapper.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import { ApolloLink, HttpLink } from '@apollo/client';
 import {
   ApolloNextAppProvider,
diff --git a/yarn.lock b/yarn.lock
index b4a17c9..e4d5c1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34,9 +34,9 @@
     ts-invariant "^0.10.3"
 
 "@apollo/client@^3.10.2":
-  version "3.10.2"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.10.2.tgz#3c27edb7762fa60dc4064d31aa2723d7006e7ff1"
-  integrity sha512-J4e2RQN4DgMthCqBtBOXOawYTWmdJprAWqv8rdYLmeW4/Pnrlrl4Hvb/zvENlitDAiRUU33Dc/3OJqIMEJAxNw==
+  version "3.10.3"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.10.3.tgz#07b90daea8a2cc83b1aca992caed55e5e9572c9d"
+  integrity sha512-4EIgZnFmRO1laWv3NCxlVIxcvimG63djuAXvyXhpQH3wkNMv9SykrasKRN08+z+cn/fVisBOLmkSRdyNyP9f4A==
   dependencies:
     "@graphql-typed-document-node/core" "^3.1.1"
     "@wry/caches" "^1.0.0"
@@ -55,7 +55,7 @@
 
 "@apollo/experimental-nextjs-app-support@^0.10.0":
   version "0.10.0"
-  resolved "https://registry.npmjs.org/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.10.0.tgz"
+  resolved "https://registry.yarnpkg.com/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.10.0.tgz#2fe52e6bc18de87c17bfc2bc78ec63acf8260c8f"
   integrity sha512-S3mfZRnAAAaKwA8RNckS4TWYLX5utpmRTwG3WGFtpooYx8QQG8xft0p0a9eTQ53Jrw3nSMJc/wOOsT/5noMCQg==
   dependencies:
     "@apollo/client-react-streaming" "0.10.0"
@@ -6885,7 +6885,7 @@ react-hot-toast@^2.4.1:
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-is@^17.0.1:
@@ -7733,7 +7733,7 @@ ts-interface-checker@^0.1.9:
 
 ts-invariant@^0.10.3:
   version "0.10.3"
-  resolved "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz"
+  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
   integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==
   dependencies:
     tslib "^2.1.0"
@@ -7774,7 +7774,7 @@ tsconfig-paths@^3.15.0:
 
 tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.1, tslib@^2.6.2, tslib@~2.6.0:
   version "2.6.2"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
 tslib@~2.4.0: