diff --git a/packages/notification-center/src/components/notification-center/components/NotificationsList.tsx b/packages/notification-center/src/components/notification-center/components/NotificationsList.tsx
index d9196c87d14..c84389cb632 100644
--- a/packages/notification-center/src/components/notification-center/components/NotificationsList.tsx
+++ b/packages/notification-center/src/components/notification-center/components/NotificationsList.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import { cx, css } from '@emotion/css';
 import { IMessage, ButtonTypeEnum } from '@novu/shared';
 import InfiniteScroll from 'react-infinite-scroll-component';
@@ -23,17 +22,18 @@ export function NotificationsList({
   const [notificationsListStyles] = useStyles('notifications.root');
 
   return (
-    <ListWrapper
-      className={cx('nc-notifications-list', css(notificationsListStyles))}
+    <div
+      className={cx('nc-notifications-list', notificationsListCss, css(notificationsListStyles))}
+      id="notifications-list"
       data-test-id="notifications-scroll-area"
     >
       <InfiniteScroll
         dataLength={totalCount}
         next={onFetch}
         hasMore={hasNextPage}
-        height={400}
         loader={<Loader />}
         endMessage={false}
+        scrollableTarget="notifications-list"
       >
         {notifications.map((notification) => {
           return (
@@ -41,8 +41,10 @@ export function NotificationsList({
           );
         })}
       </InfiniteScroll>
-    </ListWrapper>
+    </div>
   );
 }
 
-const ListWrapper = styled.div``;
+const notificationsListCss = css`
+  height: 400px;
+`;
diff --git a/packages/notification-center/src/components/novu-provider/NovuProvider.test.tsx b/packages/notification-center/src/components/novu-provider/NovuProvider.test.tsx
index 4e8a2f1e5f5..7d719bc80df 100644
--- a/packages/notification-center/src/components/novu-provider/NovuProvider.test.tsx
+++ b/packages/notification-center/src/components/novu-provider/NovuProvider.test.tsx
@@ -516,7 +516,7 @@ describe('NovuProvider', () => {
       });
     });
 
-    fireEvent.scroll(document.querySelectorAll('.infinite-scroll-component')[0], { target: { scrollY: 1000 } });
+    fireEvent.scroll(document.querySelectorAll('.nc-notifications-list')[0], { target: { scrollY: 1000 } });
 
     await waitFor(() => {
       expect(mockServiceInstance.getNotificationsList).toBeCalledTimes(2);