diff --git a/src/app/html/html.wrapper.tsx b/src/app/html/html.wrapper.tsx
index 9d5b389..99841dc 100644
--- a/src/app/html/html.wrapper.tsx
+++ b/src/app/html/html.wrapper.tsx
@@ -37,7 +37,7 @@ export const HtmlPageWrapper = ({ children, ...otherProps }: any) => {
   console.log('HtmlPageWrapper', { pathname, hasJs });
 
   return (
-    <CoreUIRoot cssVars>
+    <CoreUIRoot cssVars theme={otherProps.theme}>
       {/* @ts-ignore */}
       <AccentRegion
       // {...generateAccentRegionProps("#28ff00")}
diff --git a/src/app/html/notifications/[slug]/route.ts b/src/app/html/notifications/[slug]/route.ts
new file mode 100644
index 0000000..003b29e
--- /dev/null
+++ b/src/app/html/notifications/[slug]/route.ts
@@ -0,0 +1,32 @@
+'use server';
+
+// import { logger } from '@/lib/Logger';
+import { isEmpty } from 'lodash';
+import { NextResponse } from 'next/server';
+
+import {
+  getNotificationNextPath,
+  readNotifications,
+} from '@/lib/hooksServer/notifications';
+
+export const GET = async (
+  req: Request,
+  { params }: { params: { slug: string } },
+) => {
+  try {
+    const id = params.slug;
+    const notifications = await readNotifications({ id });
+    if (!notifications || isEmpty(notifications)) {
+      throw new Error('Notifications not found');
+    }
+    const notification = notifications[0];
+    if (!notification) {
+      throw new Error('Notification not found');
+    }
+    const nextPath = getNotificationNextPath(notification);
+    return NextResponse.redirect(new URL(nextPath, req.url));
+  } catch (error) {
+    console.log('An error occurred while fetching notifications', error);
+    return NextResponse.redirect(new URL('/html/notifications', req.url));
+  }
+};
diff --git a/src/components/navHTML/RightNav.tsx b/src/components/navHTML/RightNav.tsx
index c9d30e9..10e5dad 100644
--- a/src/components/navHTML/RightNav.tsx
+++ b/src/components/navHTML/RightNav.tsx
@@ -62,6 +62,8 @@ const AuthRightNav = ({
     (b) => (b.model || '').toLowerCase() === BadgeType.Notification,
   );
 
+  const notificationBadgeCount = notificationBadge?.count || 0;
+
   const avatarUri = cdnPath(currentUser && currentUser.avatar); // TODO default image
 
   const username = currentUser.username || '';
@@ -146,11 +148,11 @@ const AuthRightNav = ({
               variant={ButtonIconType.Primary}
             />
 
-            {notificationBadge && notificationBadge.count && (
-              <div style={{ marginLeft: '-15px', marginTop: '-10px' }}>
-                <NumberBadge value={notificationBadge.count} />
-              </div>
-            )}
+            {notificationBadgeCount > 0 && (
+                <div style={{ marginLeft: '-15px', marginTop: '-10px' }}>
+                  <NumberBadge value={notificationBadge.count} />
+                </div>
+              )}
           </Layout>
         </Link>
       </Layout>
diff --git a/src/components/types.generated.ts b/src/components/types.generated.ts
index 2820078..700937d 100644
--- a/src/components/types.generated.ts
+++ b/src/components/types.generated.ts
@@ -992,6 +992,7 @@ export type Query = {
   getCityByState: Array<CityType>;
   getFeePrices: FeePrices;
   getMoneyInEscrow?: Maybe<Scalars['Float']>;
+  getNotification?: Maybe<Notification>;
   getOrderRating?: Maybe<OrderRatingType>;
   getOrderRatings: OrderRatingOutputPagination;
   getPgpKey?: Maybe<PgpPublicKey>;
@@ -1012,6 +1013,7 @@ export type Query = {
   posts: PostPagination;
   reactionGet: Reaction;
   reactionPagination: ReactionPagination;
+  readNotifications: Array<Notification>;
   searchAdListingPublic?: Maybe<AdsListingOutputPagination>;
   transactionById?: Maybe<Transaction>;
   transactionGet: Transaction;
@@ -1126,6 +1128,11 @@ export type QueryGetCityByStateArgs = {
 };
 
 
+export type QueryGetNotificationArgs = {
+  id: Scalars['String'];
+};
+
+
 export type QueryGetOrderRatingArgs = {
   orderId: Scalars['String'];
 };
@@ -1247,6 +1254,13 @@ export type QueryReactionPaginationArgs = {
 };
 
 
+export type QueryReadNotificationsArgs = {
+  before?: InputMaybe<Scalars['DateTime']>;
+  id?: InputMaybe<Scalars['String']>;
+  limit?: InputMaybe<Scalars['Float']>;
+};
+
+
 export type QuerySearchAdListingPublicArgs = {
   after?: InputMaybe<Scalars['DateTime']>;
   before?: InputMaybe<Scalars['DateTime']>;
diff --git a/src/containers/Notification/Notification.html.tsx b/src/containers/Notification/Notification.html.tsx
index 919afa1..d681cf8 100644
--- a/src/containers/Notification/Notification.html.tsx
+++ b/src/containers/Notification/Notification.html.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  Background,
   CoreText,
   Display,
   FlexDirection,
@@ -10,12 +11,13 @@ import {
   SVGAsset,
 } from '@uuixjs/uuixweb';
 import { BorderRadius } from '@uuixjs/uuixweb-lib';
+import Link from 'next/link';
 import React from 'react';
 
-import type { NotificationType } from '@/components/types.generated';
+import type { Notification } from '@/components/types.generated';
 
 interface Props {
-  notifications?: NotificationType[];
+  notifications?: Notification[];
   // todo pagination
 }
 
@@ -29,23 +31,30 @@ export const NotificationsContainerHtml = (props: Props) => {
       <Layout
         display={Display.Flex}
         justifyContent={JustifyContent.Center}
-        margin={{ top: 2 }}
+        margin={{ top: 2, bottom: 2 }}
       >
         <CoreText as="h3">Notifications</CoreText>
       </Layout>
 
       {notifications.map((notification) => (
-        <Layout
+        <Link
           key={notification.id}
-          padding={2}
-          display={Display.Flex}
-          border={BorderRadius.None}
+          href={`/html/notifications/${notification.id}`}
         >
-          <Icon asset={SVGAsset.Account} />
-          <CoreText as="h5" bold>
-            {notification.message}
-          </CoreText>{' '}
-        </Layout>
+          <Layout
+            padding={2}
+            display={Display.Flex}
+            border={BorderRadius.None}
+            background={
+              notification.read ? Background.Alt2 : Background.Inherit
+            }
+          >
+            <Icon asset={SVGAsset.Account} />
+            <CoreText as="h5" bold>
+              {notification.message}
+            </CoreText>{' '}
+          </Layout>
+        </Link>
       ))}
     </Layout>
   );
diff --git a/src/lib/gql/notifications/notification.query.ts b/src/lib/gql/notifications/notification.query.ts
index a2e3c1a..b6942e9 100644
--- a/src/lib/gql/notifications/notification.query.ts
+++ b/src/lib/gql/notifications/notification.query.ts
@@ -38,3 +38,12 @@ export const GET_NOTIFICATIONS = gql`
   }
   ${NotificationFragment}
 `;
+
+export const READ_NOTIFICATIONS = gql`
+  query ReadNotification($id: String, $before: DateTime, $limit: Float) {
+    data: readNotifications(id: $id, before: $before, limit: $limit) {
+      ...NotificationFragment
+    }
+  }
+  ${NotificationFragment}
+`;
diff --git a/src/lib/hooksServer/notifications.ts b/src/lib/hooksServer/notifications.ts
index 504cf30..c086ab8 100644
--- a/src/lib/hooksServer/notifications.ts
+++ b/src/lib/hooksServer/notifications.ts
@@ -4,13 +4,19 @@ import pickBy from 'lodash/pickBy';
 
 import type {
   Badge,
+  Notification,
   NotificationPagination,
   QueryGetBadgesArgs,
   QueryNotificationsArgs,
+  QueryReadNotificationsArgs,
 } from '@/components/types.generated';
 
 import { getClient } from '../apollo-wrapper.server';
-import { GET_BADGES, GET_NOTIFICATIONS } from '../gql/notifications';
+import {
+  GET_BADGES,
+  GET_NOTIFICATIONS,
+  READ_NOTIFICATIONS,
+} from '../gql/notifications';
 
 export const fetchBadges = async (
   props: QueryGetBadgesArgs,
@@ -57,5 +63,43 @@ export const fetchNotifications = async (
   return undefined;
 };
 
-// readNotification,
+export const readNotifications = async (
+  props: QueryReadNotificationsArgs,
+): Promise<Notification[] | undefined> => {
+  const [errorData, data] = await awaitTo(
+    getClient().query<{ data: Notification[] }>({
+      query: READ_NOTIFICATIONS,
+      variables: pickBy(props, identity),
+      fetchPolicy: 'no-cache',
+    }),
+  );
+
+  if (errorData) {
+    console.error(errorData);
+  }
+
+  if (data && data.data) {
+    return data.data.data;
+  }
+
+  return undefined;
+};
+
+export const getNotificationNextPath = (notification: Notification): string => {
+  const notificationSource = (notification.source || '').toLowerCase();
+
+  switch (notificationSource) {
+    case 'user':
+      return `/html/u/${notification.sourceId}`;
+    case 'vendor':
+      return `/html/store/${notification.sourceId}`;
+    case 'ordertype':
+    case 'order':
+      return `/html/order/${notification.sourceId}`;
+    case 'notification':
+    default:
+      return '/html/notifications';
+  }
+};
+
 // deleteNotification, ....