diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts
index a1a6b7b49..7bd09fc9b 100644
--- a/framework/vendure/schema.d.ts
+++ b/framework/vendure/schema.d.ts
@@ -105,6 +105,16 @@ export type QuerySearchArgs = {
   input: SearchInput
 }
 
+export type QueryNewNotificationsArgs = {
+  customOption?: Maybe<CustomNotificationListOptions>;
+  options?: Maybe<NotificationListOptions>;
+};
+
+export type QueryNotificationsArgs = {
+  customOption?: Maybe<CustomNotificationListOptions>;
+  options?: Maybe<NotificationListOptions>;
+};
+
 export type Mutation = {
   __typename?: 'Mutation'
   /** Adds an item to the order. If custom fields are defined on the OrderLine entity, a third argument 'customFields' will be available. */
@@ -2855,6 +2865,51 @@ export type FacetListOptions = {
   filter?: Maybe<FacetFilterParameter>
 }
 
+export type CustomNotificationListOptions = {
+  skip?: Maybe<Scalars['Int']>;
+  take?: Maybe<Scalars['Int']>;
+};
+
+export type Notification = Node & {
+  __typename?: 'Notification';
+  createdAt: Scalars['DateTime'];
+  data: Scalars['JSON'];
+  description: Scalars['String'];
+  id: Scalars['ID'];
+  isNew: Scalars['Boolean'];
+  order?: Maybe<Order>;
+  type: HistoryEntryType;
+  updatedAt: Scalars['DateTime'];
+};
+
+export type NotificationFilterParameter = {
+  createdAt?: Maybe<DateOperators>;
+  description?: Maybe<StringOperators>;
+  isNew?: Maybe<BooleanOperators>;
+  type?: Maybe<StringOperators>;
+  updatedAt?: Maybe<DateOperators>;
+};
+
+export type NotificationList = PaginatedList & {
+  __typename?: 'NotificationList';
+  items: Array<Notification>;
+  totalItems: Scalars['Int'];
+};
+
+export type NotificationListOptions = {
+  filter?: Maybe<NotificationFilterParameter>;
+  skip?: Maybe<Scalars['Int']>;
+  sort?: Maybe<NotificationSortParameter>;
+  take?: Maybe<Scalars['Int']>;
+};
+
+export type NotificationSortParameter = {
+  createdAt?: Maybe<SortOrder>;
+  description?: Maybe<SortOrder>;
+  id?: Maybe<SortOrder>;
+  updatedAt?: Maybe<SortOrder>;
+};
+
 export type UpdateOrderItemsResult =
   | Order
   | OrderModificationError
@@ -3501,6 +3556,30 @@ export type ActiveOrderQuery = { __typename?: 'Query' } & {
   activeOrder?: Maybe<{ __typename?: 'Order' } & CartFragment>
 }
 
+export type NewNotificationsQuery = { __typename?: 'Query' } & {
+  newNotifications?: { __typename?: 'NotificationList' } & {
+    items: Array<
+      { __typename?: 'Notification' } & Pick<
+      Notification,
+        'id' | 'createdAt' | 'createdAt' | 'type' | 'data' | 'order'
+      > 
+    >,
+    'totalItems'
+  }
+}
+
+export type NotificationsQuery = { __typename?: 'Query' } & {
+  notifications?: { __typename?: 'NotificationList' } & {
+    items: Array<
+      { __typename?: 'Notification' } & Pick<
+      Notification,
+        'id' | 'createdAt' | 'updatedAt' | 'type' | 'data' | 'description' |'order' |'isNew'
+      > 
+    >,
+    'totalItems'
+  }
+}
+
 export type GetCollectionsQueryVariables = Exact<{ [key: string]: never }>
 
 export type GetCollectionsQuery = { __typename?: 'Query' } & {
diff --git a/framework/vendure/utils/queries/notification-query.ts b/framework/vendure/utils/queries/notification-query.ts
new file mode 100644
index 000000000..b09821a5b
--- /dev/null
+++ b/framework/vendure/utils/queries/notification-query.ts
@@ -0,0 +1,45 @@
+export const newNotificationsQuery = /* GraphQL */ `
+query newNotifications($customOption: CustomNotificationListOptions) {
+  newNotifications(customOption: $customOption) {
+    totalItems
+    items {
+      id
+      createdAt
+      type
+      data
+      description
+      isNew
+      order {
+        id
+        code
+        customFields {
+          lastedNotificationAt
+        }
+      }
+    }
+  }
+}
+`
+
+export const notificationsQuery = /* GraphQL */ `
+query notifications($customOption: CustomNotificationListOptions) {
+  notifications(customOption: $customOption) {
+    totalItems
+    items {
+      id
+      createdAt
+      type
+      data
+      description
+      isNew
+      order {
+        id
+        code
+        customFields {
+          lastedNotificationAt
+        }
+      }
+    }
+  }
+}
+`
diff --git a/src/components/hooks/notification/index.ts b/src/components/hooks/notification/index.ts
new file mode 100644
index 000000000..0f01442ab
--- /dev/null
+++ b/src/components/hooks/notification/index.ts
@@ -0,0 +1,2 @@
+export { default as useNotifications } from './useNotifications'
+
diff --git a/src/components/hooks/notification/useNotifications.tsx b/src/components/hooks/notification/useNotifications.tsx
new file mode 100644
index 000000000..f6caf5ce2
--- /dev/null
+++ b/src/components/hooks/notification/useNotifications.tsx
@@ -0,0 +1,12 @@
+import { NotificationsQuery, QueryNotificationsArgs } from '@framework/schema'
+import { notificationsQuery } from '@framework/utils/queries/notification-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useNotifications = (options?: QueryNotificationsArgs) => {
+  const { data, isValidating, ...rest } = useSWR<NotificationsQuery>([notificationsQuery, options], gglFetcher)
+  console.log("data: ", data)
+  return { notifications: data?.notifications?.items, total: data?.notifications?.totalItems, loading: isValidating, ...rest }
+}
+
+export default useNotifications
diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss
index ac064e19f..2d283170a 100644
--- a/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss
+++ b/src/components/modules/Notification/NotificationItem/NotificationItem.module.scss
@@ -9,7 +9,6 @@
     .contentWrapper {
         padding-left: 1.6rem;
         padding-bottom: 1.4rem;
-        max-width: 26.3rem;
         .title {
             font-weight: bold;
             color: var(--text-active);
diff --git a/src/components/modules/Notification/NotificationItem/NotificationItem.tsx b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx
index 402575daf..37dc7992c 100644
--- a/src/components/modules/Notification/NotificationItem/NotificationItem.tsx
+++ b/src/components/modules/Notification/NotificationItem/NotificationItem.tsx
@@ -1,29 +1,21 @@
-import React, {useState} from 'react'
-import s from '../NotificationItem/NotificationItem.module.scss'
+import { Notification } from '@framework/schema'
 import ClassNames from 'classnames'
-import { IconBill } from 'src/components/icons'
 import Link from 'next/link'
-import {ROUTE , QUERY_KEY, ACCOUNT_TAB } from 'src/utils/constanst.utils'
+import React from 'react'
+import { IconBill } from 'src/components/icons'
+import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import s from '../NotificationItem/NotificationItem.module.scss'
+
+export interface NotificationItemProps extends Omit<Notification, "type" | "data"> {
 
-export interface NotificationItemProps {
-    ID?: string,
-    title?: string,
-    content?: string,
-    date?: string,
-    checked?: boolean,
 }
 
-const NotificationItem = ({ ID, title, content, date, checked}: NotificationItemProps) => {
-    const [isChecked, setChecked] = useState(checked)
-    const Check = () => {
-        setChecked(true)
-    }
+const NotificationItem = ({ description, createdAt, order, isNew }: NotificationItemProps) => {
     return (
         <section className={ClassNames({
-            [s.notificationItem] : true,
-            [s.isChecked] : isChecked,
-        })} 
-            onClick = {Check}
+            [s.notificationItem]: true,
+            [s.isChecked]: !isNew,
+        })}
         >
             <div className={s.icon}>
                 <IconBill />
@@ -32,13 +24,13 @@ const NotificationItem = ({ ID, title, content, date, checked}: NotificationItem
                 <a>
                     <div className={s.contentWrapper}>
                         <div className={s.title}>
-                            {title}
+                            Order {order?.code}
                         </div>
                         <div className={s.content}>
-                            {content}
+                            {description}
                         </div>
                         <div className={s.date}>
-                            {date}
+                            {createdAt}
                         </div>
                     </div>
                 </a>
diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss b/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss
index 1a214dccc..d3044148f 100644
--- a/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss
+++ b/src/components/modules/Notification/NotificationPage/NotificationPage.module.scss
@@ -1,4 +1,5 @@
 .notificationPage {
+    min-height: 30rem;
     padding-bottom: 5.4rem;
     @screen md {
         padding-bottom: 12.8rem;
diff --git a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
index 954b7727c..f928671c6 100644
--- a/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
+++ b/src/components/modules/Notification/NotificationPage/NotificationPage.tsx
@@ -1,56 +1,48 @@
 import React from 'react'
+import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon'
+import { useNotifications } from 'src/components/hooks/notification'
 import NotificationEmptyPage from '../NotificationEmptyPage/NotificationEmptyPage'
-import NotificationItem, { NotificationItemProps } from '../NotificationItem/NotificationItem'
+import NotificationItem from '../NotificationItem/NotificationItem'
 import s from './NotificationPage.module.scss'
 
 interface NotificationPageProps {
-    isEmpty?: boolean,
-    data?: NotificationItemProps[],
+
 }
-const NOTIFICATION_DATA = [
-    {
-        ID: "ID33455",
-        title: "Your order ID33455",
-        content: "The order has been deliveried successfully!",
-        date: "2 days ago",
-        checked: false,
-    },
-    {
-        ID: "ID33456",
-        title: "Your order ID33456",
-        content: "The order has been deliveried successfully!",
-        date: "2 days ago",
-        checked: false,
-    },
-    {
-        ID: "ID33457",
-        title: "Your order ID33457",
-        content: "The order has been deliveried successfully!",
-        date: "2 days ago",
-        checked: true,
+
+
+const NotificationPage = ({ }: NotificationPageProps) => {
+    const { notifications, loading } = useNotifications()
+    if (loading) {
+        return <div className={s.notificationPage}>
+            <LoadingCommon />
+        </div>
     }
-]
-
-
-const NotificationPage = ({ isEmpty=false, data = NOTIFICATION_DATA }: NotificationPageProps) => {
     return (
         <div className={s.notificationPage}>
-        {
-        isEmpty ? 
-        <NotificationEmptyPage /> 
-        :
-        <>
             {
-                data.map(item => {
-                    return (
-                        <NotificationItem key={`${item.ID}-${item.title}`} title={item.title} content={item.content} date={item.date} checked={item.checked}/>
-                    )
-                })
+                !notifications || notifications.length === 0 ?
+                    <NotificationEmptyPage />
+                    :
+                    <>
+                        {
+                            notifications.map(item => {
+                                return (
+                                    <NotificationItem
+                                        key={item.id}
+                                        id={item.id}
+                                        description={item.description}
+                                        createdAt={item.createdAt}
+                                        updatedAt={item.updatedAt}
+                                        isNew={item.isNew}
+                                        order={item.order}
+                                    />
+                                )
+                            })
+                        }
+                    </>
             }
-        </>
-        }
         </div>
     )
 }
 
-export default NotificationPage
\ No newline at end of file
+export default NotificationPage