diff --git a/src/components/Header/Tools.tsx b/src/components/Header/Tools.tsx
index 93d5b460c..5c0d70753 100644
--- a/src/components/Header/Tools.tsx
+++ b/src/components/Header/Tools.tsx
@@ -82,7 +82,7 @@ const Tools = () => {
   });
   const { xs } = useWindowWidth();
   const user = useSelector(({ chrome: { user } }: ReduxState) => user!);
-  const unreadNotifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data?.filter((isRead) => isRead) || []);
+  const unreadNotifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data?.filter((isRead) => !isRead) || []);
   const isDrawerExpanded = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.isExpanded);
   const dispatch = useDispatch();
   const libjwt = useContext(LibtJWTContext);
diff --git a/src/components/NotificationsDrawer/DrawerPanelContent.tsx b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
index a0f80d281..bdf629598 100644
--- a/src/components/NotificationsDrawer/DrawerPanelContent.tsx
+++ b/src/components/NotificationsDrawer/DrawerPanelContent.tsx
@@ -1,16 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { PopoverPosition } from '@patternfly/react-core/dist/dynamic/components/Popover';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
+import { Badge } from '@patternfly/react-core/dist/dynamic/components/Badge';
+import { Flex, FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
+import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
+import { Divider } from '@patternfly/react-core/dist/dynamic/components/Divider';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { EmptyState, EmptyStateBody, EmptyStateIcon } from '@patternfly/react-core/dist/dynamic/components/EmptyState';
-import { NotificationDrawer, NotificationDrawerHeader } from '@patternfly/react-core/dist/dynamic/components/NotificationDrawer';
+import {
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerHeader,
+  NotificationDrawerList,
+} from '@patternfly/react-core/dist/dynamic/components/NotificationDrawer';
 import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
 import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
 import { useDispatch, useSelector } from 'react-redux';
-import { toggleNotificationsDrawer } from '../../redux/actions';
 import FilterIcon from '@patternfly/react-icons/dist/dynamic/icons/filter-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
 import BellSlashIcon from '@patternfly/react-icons/dist/dynamic/icons/bell-slash-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/dynamic/icons/external-link-square-alt-icon';
-import { ReduxState } from '../../redux/store';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
+import orderBy from 'lodash/orderBy';
+import { useNavigate } from 'react-router-dom';
+import { NotificationData, ReduxState } from '../../redux/store';
+import NotificationItem from './NotificationItem';
+import { markAllNotificationsAsRead, markAllNotificationsAsUnread, toggleNotificationsDrawer } from '../../redux/actions';
+import { filterConfig } from './notificationDrawerUtils';
 
 export type DrawerPanelProps = {
   innerRef: React.Ref<unknown>;
@@ -39,19 +56,178 @@ const EmptyNotifications = () => (
 );
 
 const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
+  const [activeFilters, setActiveFilters] = useState<string[]>([]);
+  const [filteredNotifications, setFilteredNotifications] = useState<NotificationData[]>([]);
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const notifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications?.data || []);
+  const isOrgAdmin = useSelector(({ chrome }: ReduxState) => chrome.user?.identity.user?.is_org_admin);
+
+  useEffect(() => {
+    const modifiedNotifications = (activeFilters || []).reduce(
+      (acc: NotificationData[], chosenFilter: string) => [...acc, ...notifications.filter(({ source }) => source === chosenFilter)],
+      []
+    );
+
+    setFilteredNotifications(modifiedNotifications);
+  }, [activeFilters]);
+
+  const onNotificationsDrawerClose = () => {
+    setActiveFilters([]);
+    dispatch(toggleNotificationsDrawer());
+  };
+
+  const onMarkAllAsRead = () => {
+    dispatch(markAllNotificationsAsRead());
+    setIsDropdownOpen(false);
+  };
+
+  const onMarkAllAsUnread = () => {
+    dispatch(markAllNotificationsAsUnread());
+    setIsDropdownOpen(false);
+  };
+
+  const onFilterSelect = (chosenFilter: string) => {
+    activeFilters.includes(chosenFilter)
+      ? setActiveFilters(activeFilters.filter((filter) => filter !== chosenFilter))
+      : setActiveFilters([...activeFilters, chosenFilter]);
+  };
+
+  const onNavigateTo = (link: string) => {
+    navigate(link);
+    onNotificationsDrawerClose();
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="read all" onClick={onMarkAllAsRead} isDisabled={notifications.length === 0}>
+      Mark visible as read
+    </DropdownItem>,
+    <DropdownItem key="unread all" onClick={onMarkAllAsUnread} isDisabled={notifications.length === 0}>
+      Mark visible as unread
+    </DropdownItem>,
+    <Divider key="divider" />,
+    <DropdownItem key="event log" onClick={() => onNavigateTo('/settings/notifications/eventlog')}>
+      <Flex>
+        <FlexItem>View event log</FlexItem>
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Icon className="pf-v5-u-ml-auto">
+            <ExternalLinkAltIcon />
+          </Icon>
+        </FlexItem>
+      </Flex>
+    </DropdownItem>,
+    isOrgAdmin && (
+      <DropdownItem key="notification settings" onClick={() => onNavigateTo('/settings/notifications/configure-events')}>
+        <Flex>
+          <FlexItem>Configure notification settings</FlexItem>
+          <FlexItem align={{ default: 'alignRight' }}>
+            <Icon className="pf-v5-u-ml-auto">
+              <ExternalLinkAltIcon />
+            </Icon>
+          </FlexItem>
+        </Flex>
+      </DropdownItem>
+    ),
+    <DropdownItem key="notification preferences" onClick={() => onNavigateTo('/settings/notifications/user-preferences')}>
+      <Flex>
+        <FlexItem>Manage my notification preferences</FlexItem>
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Icon className="pf-v5-u-ml-auto">
+            <ExternalLinkAltIcon />
+          </Icon>
+        </FlexItem>
+      </Flex>
+    </DropdownItem>,
+  ];
+
+  const filterDropdownItems = () => {
+    return [
+      <DropdownGroup key="filter-label" label="Show notifications for...">
+        <DropdownList>
+          {filterConfig.map((source) => (
+            <DropdownItem
+              key={source.value}
+              onClick={() => onFilterSelect(source.value)}
+              isDisabled={notifications.length === 0}
+              isSelected={activeFilters.includes(source.value)}
+              hasCheckbox
+            >
+              {source.title}
+            </DropdownItem>
+          ))}
+          <Divider />
+          <DropdownItem key="reset-filters" isDisabled={activeFilters.length === 0} onClick={() => setActiveFilters([])}>
+            Reset filters
+          </DropdownItem>
+        </DropdownList>
+      </DropdownGroup>,
+    ];
+  };
+
+  const renderNotifications = () => {
+    if (notifications.length === 0) {
+      return <EmptyNotifications />;
+    }
+
+    const sortedNotifications = orderBy(activeFilters?.length > 0 ? filteredNotifications : notifications, ['read', 'created'], ['asc', 'asc']);
+
+    return sortedNotifications.map((notification) => (
+      <NotificationItem key={notification.id} notification={notification} onNavigateTo={onNavigateTo} />
+    ));
+  };
+
   return (
     <NotificationDrawer ref={innerRef}>
-      <NotificationDrawerHeader onClose={() => dispatch(toggleNotificationsDrawer())}>
-        <Button variant="plain" aria-label="Filter">
-          <FilterIcon />
-        </Button>
-        <Button variant="plain" aria-label="Mark as read">
-          <EllipsisVIcon />
-        </Button>
+      <NotificationDrawerHeader onClose={onNotificationsDrawerClose} title="Notifications" className="pf-u-align-items-center">
+        {activeFilters.length > 0 && <Badge isRead>{activeFilters.length}</Badge>}
+        <Dropdown
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
+              id="notifications-filter-toggle"
+              variant="plain"
+            >
+              <FilterIcon />
+            </MenuToggle>
+          )}
+          isOpen={isFilterDropdownOpen}
+          onOpenChange={setIsFilterDropdownOpen}
+          popperProps={{
+            position: PopoverPosition.right,
+          }}
+          id="notifications-filter-dropdown"
+          aria-label="Notifications filter"
+        >
+          {filterDropdownItems()}
+        </Dropdown>
+        <Dropdown
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              variant="plain"
+              id="notifications-actions-toggle"
+              isFullWidth
+            >
+              <EllipsisVIcon />
+            </MenuToggle>
+          )}
+          isOpen={isDropdownOpen}
+          onOpenChange={setIsDropdownOpen}
+          popperProps={{
+            position: PopoverPosition.right,
+          }}
+          id="notifications-actions-dropdown"
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
       </NotificationDrawerHeader>
-      {notifications.length === 0 ? <EmptyNotifications /> : 'TODO'}
+      <NotificationDrawerBody>
+        <NotificationDrawerList>{renderNotifications()}</NotificationDrawerList>
+      </NotificationDrawerBody>
     </NotificationDrawer>
   );
 };
diff --git a/src/components/NotificationsDrawer/NotificationItem.tsx b/src/components/NotificationsDrawer/NotificationItem.tsx
new file mode 100644
index 000000000..dabf6fbd4
--- /dev/null
+++ b/src/components/NotificationsDrawer/NotificationItem.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import {
+  NotificationDrawerList,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader,
+} from '@patternfly/react-core/dist/dynamic/components/NotificationDrawer';
+import { PopoverPosition } from '@patternfly/react-core/dist/dynamic/components/Popover';
+import { Checkbox } from '@patternfly/react-core/dist/dynamic/components/Checkbox';
+import { Label } from '@patternfly/react-core/dist/dynamic/components/Label';
+import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
+import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
+import EllipsisVIcon from '@patternfly/react-icons/dist/dynamic/icons/ellipsis-v-icon';
+import DateFormat from '@redhat-cloud-services/frontend-components/DateFormat';
+import { useDispatch } from 'react-redux';
+import { NotificationData } from '../../redux/store';
+import { markNotificationAsRead, markNotificationAsUnread } from '../../redux/actions';
+
+interface NotificationItemProps {
+  notification: NotificationData;
+  onNavigateTo: (link: string) => void;
+}
+const NotificationItem: React.FC<NotificationItemProps> = ({ notification, onNavigateTo }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const onCheckboxToggle = () => {
+    dispatch(!notification.read ? markNotificationAsRead(notification.id) : markNotificationAsUnread(notification.id));
+    setIsDropdownOpen(false);
+  };
+
+  const notificationDropdownItems = [
+    <DropdownItem key="read" onClick={onCheckboxToggle}>{`Mark as ${!notification.read ? 'read' : 'unread'}`}</DropdownItem>,
+    <DropdownItem key="manage-event" onClick={() => onNavigateTo('settings/notifications/configure-events')}>
+      Manage this event
+    </DropdownItem>,
+  ];
+  return (
+    <React.Fragment>
+      <NotificationDrawerList>
+        <NotificationDrawerListItem variant="info" isRead={notification.read}>
+          <NotificationDrawerListItemHeader title={notification.title} srTitle="Info notification:">
+            <Checkbox isChecked={notification.read} onChange={onCheckboxToggle} id="read-checkbox" name="read-checkbox" />
+            <Dropdown
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  aria-label="Notification actions dropdown"
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  id="notification-item-toggle"
+                  isExpanded={isDropdownOpen}
+                  variant="plain"
+                >
+                  <EllipsisVIcon />
+                </MenuToggle>
+              )}
+              isOpen={isDropdownOpen}
+              onOpenChange={setIsDropdownOpen}
+              popperProps={{
+                position: PopoverPosition.right,
+              }}
+              id="notification-item-dropdown"
+            >
+              <DropdownList>{notificationDropdownItems}</DropdownList>
+            </Dropdown>
+          </NotificationDrawerListItemHeader>
+          <NotificationDrawerListItemBody timestamp={<DateFormat date={notification.created} />}>
+            <Label variant="outline" isCompact className="pf-u-mb-md">
+              {notification.source}
+            </Label>
+            <span className="pf-u-display-block">{notification.description}</span>
+          </NotificationDrawerListItemBody>
+        </NotificationDrawerListItem>
+      </NotificationDrawerList>
+    </React.Fragment>
+  );
+};
+
+export default NotificationItem;
diff --git a/src/components/NotificationsDrawer/notificationDrawerUtils.ts b/src/components/NotificationsDrawer/notificationDrawerUtils.ts
new file mode 100644
index 000000000..cb7279e35
--- /dev/null
+++ b/src/components/NotificationsDrawer/notificationDrawerUtils.ts
@@ -0,0 +1,6 @@
+export const filterConfig = [
+  { title: 'Console', value: 'console' },
+  { title: 'OpenShift', value: 'openshift' },
+  { title: 'Red Hat Enterprise Linux', value: 'rhel' },
+  { title: 'Ansible Automation Platform', value: 'ansible' },
+];
diff --git a/src/redux/action-types.ts b/src/redux/action-types.ts
index 9dcec285d..1e2dfee27 100644
--- a/src/redux/action-types.ts
+++ b/src/redux/action-types.ts
@@ -41,3 +41,8 @@ export const CLEAR_QUICKSTARTS = '@@chrome/clear-quickstarts';
 export const SET_GATEWAY_ERROR = '@@chrome/set-gateway-error';
 
 export const TOGGLE_NOTIFICATIONS_DRAWER = '@@chrome/toggle-notifications-drawer';
+
+export const MARK_NOTIFICATION_AS_READ = '@@chrome/mark-notification-as-read';
+export const MARK_NOTIFICATION_AS_UNREAD = '@@chrome/mark-notification-as-unread';
+export const MARK_ALL_NOTIFICATION_AS_READ = '@@chrome/mark-all-notification-as-read';
+export const MARK_ALL_NOTIFICATION_AS_UNREAD = '@@chrome/mark-all-notification-as-unread';
diff --git a/src/redux/actions.ts b/src/redux/actions.ts
index dea54bb16..fb46f0101 100644
--- a/src/redux/actions.ts
+++ b/src/redux/actions.ts
@@ -206,3 +206,21 @@ export const setGatewayError = (error?: ThreeScaleError) => ({
 export const toggleNotificationsDrawer = () => ({
   type: actionTypes.TOGGLE_NOTIFICATIONS_DRAWER,
 });
+
+export const markNotificationAsRead = (id: number) => ({
+  type: actionTypes.MARK_NOTIFICATION_AS_READ,
+  payload: id,
+});
+
+export const markNotificationAsUnread = (id: number) => ({
+  type: actionTypes.MARK_NOTIFICATION_AS_UNREAD,
+  payload: id,
+});
+
+export const markAllNotificationsAsRead = () => ({
+  type: actionTypes.MARK_ALL_NOTIFICATION_AS_READ,
+});
+
+export const markAllNotificationsAsUnread = () => ({
+  type: actionTypes.MARK_ALL_NOTIFICATION_AS_UNREAD,
+});
diff --git a/src/redux/chromeReducers.ts b/src/redux/chromeReducers.ts
index cc3d3c8ea..83d149abf 100644
--- a/src/redux/chromeReducers.ts
+++ b/src/redux/chromeReducers.ts
@@ -4,7 +4,7 @@ import { REQUESTS_COUNT, REQUESTS_DATA } from '../utils/consts';
 import { ChromeModule, NavItem, Navigation } from '../@types/types';
 import { ITLess, generateRoutesList, highlightItems, isBeta, levelArray } from '../utils/common';
 import { ThreeScaleError } from '../utils/responseInterceptors';
-import { AccessRequest, ChromeState } from './store';
+import { AccessRequest, ChromeState, NotificationData } from './store';
 
 export function contextSwitcherBannerReducer(state: ChromeState): ChromeState {
   return {
@@ -338,7 +338,56 @@ export function toggleNotificationsReducer(state: ChromeState) {
     ...state,
     notifications: {
       ...state.notifications,
+      data: state.notifications?.data || [],
       isExpanded: !state.notifications?.isExpanded,
     },
   };
 }
+
+export function markNotificationAsRead(state: ChromeState, { payload }: { payload: number }): ChromeState {
+  return {
+    ...state,
+    notifications: {
+      isExpanded: state.notifications?.isExpanded || false,
+      count: state.notifications?.data?.length || 0,
+      data: (state.notifications?.data || []).map((notification: NotificationData) =>
+        notification.id === payload ? { ...notification, read: true } : notification
+      ),
+    },
+  };
+}
+
+export function markNotificationAsUnread(state: ChromeState, { payload }: { payload: number }): ChromeState {
+  return {
+    ...state,
+    notifications: {
+      isExpanded: state.notifications?.isExpanded || false,
+      count: state.notifications?.data?.length || 0,
+      data: (state.notifications?.data || []).map((notification: NotificationData) =>
+        notification.id === payload ? { ...notification, read: false } : notification
+      ),
+    },
+  };
+}
+
+export function markAllNotificationsAsRead(state: ChromeState): ChromeState {
+  return {
+    ...state,
+    notifications: {
+      isExpanded: state.notifications?.isExpanded || false,
+      count: state.notifications?.count || 0,
+      data: (state.notifications?.data || []).map((notification) => ({ ...notification, read: true })),
+    },
+  };
+}
+
+export function markAllNotificationsAsUnread(state: ChromeState): ChromeState {
+  return {
+    ...state,
+    notifications: {
+      isExpanded: state.notifications?.isExpanded || false,
+      count: state.notifications?.data?.length || 0,
+      data: (state.notifications?.data || []).map((notification) => ({ ...notification, read: false })),
+    },
+  };
+}
diff --git a/src/redux/index.ts b/src/redux/index.ts
index d3c058adc..8b745ba48 100644
--- a/src/redux/index.ts
+++ b/src/redux/index.ts
@@ -15,6 +15,10 @@ import {
   loginReducer,
   markAccessRequestRequestReducer,
   markActiveProduct,
+  markAllNotificationsAsRead,
+  markAllNotificationsAsUnread,
+  markNotificationAsRead,
+  markNotificationAsUnread,
   onPageAction,
   onPageObjectId,
   onRegisterModule,
@@ -58,6 +62,10 @@ import {
   LOAD_MODULES_SCHEMA,
   LOAD_NAVIGATION_LANDING_PAGE,
   MARK_ACTIVE_PRODUCT,
+  MARK_ALL_NOTIFICATION_AS_READ,
+  MARK_ALL_NOTIFICATION_AS_UNREAD,
+  MARK_NOTIFICATION_AS_READ,
+  MARK_NOTIFICATION_AS_UNREAD,
   MARK_REQUEST_NOTIFICATION_SEEN,
   POPULATE_QUICKSTARTS_CATALOG,
   REGISTER_MODULE,
@@ -100,6 +108,10 @@ const reducers = {
   [SET_GATEWAY_ERROR]: setGatewayError,
   [CLEAR_QUICKSTARTS]: clearQuickstartsReducer,
   [TOGGLE_NOTIFICATIONS_DRAWER]: toggleNotificationsReducer,
+  [MARK_NOTIFICATION_AS_READ]: markNotificationAsRead,
+  [MARK_NOTIFICATION_AS_UNREAD]: markNotificationAsUnread,
+  [MARK_ALL_NOTIFICATION_AS_READ]: markAllNotificationsAsRead,
+  [MARK_ALL_NOTIFICATION_AS_UNREAD]: markAllNotificationsAsUnread,
 };
 
 const globalFilter = {
@@ -128,6 +140,11 @@ export const chromeInitialState: ReduxState = {
       quickstarts: {},
     },
     moduleRoutes: [],
+    notifications: {
+      data: [],
+      isExpanded: false,
+      count: 0,
+    },
   },
   globalFilter: globalFilterDefaultState,
 };
diff --git a/src/redux/store.d.ts b/src/redux/store.d.ts
index be4b74732..a72375108 100644
--- a/src/redux/store.d.ts
+++ b/src/redux/store.d.ts
@@ -11,11 +11,18 @@ export type InternalNavigation = {
 
 export type AccessRequest = { request_id: string; created: string; seen: boolean };
 
+export type NotificationData = {
+  id: number;
+  title: string;
+  description: string;
+  read: boolean;
+  source: string;
+  created: string;
+};
+
 export type Notifications = {
   isExpanded: boolean;
-  data: Array<{
-    isRead: boolean;
-  }>;
+  data: NotificationData[];
   count: number;
 };