diff --git a/src/script/components/calling/FullscreenVideoCall.tsx b/src/script/components/calling/FullscreenVideoCall.tsx
index 67290ca6ab1..15f259d4b48 100644
--- a/src/script/components/calling/FullscreenVideoCall.tsx
+++ b/src/script/components/calling/FullscreenVideoCall.tsx
@@ -113,6 +113,8 @@ const EMOJIS_LIST = ['👍', '🎉', '❤️', '😂', '😮', '👏', '🤔', '
 
 const LOCAL_STORAGE_KEY_FOR_SCREEN_SHARING_CONFIRM_MODAL = 'DO_NOT_ASK_AGAIN_FOR_SCREEN_SHARING_CONFIRM_MODAL';
 
+const DEFAULT_VISIBLE_DOTS = 5;
+
 const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   call,
   canShareScreen,
@@ -399,6 +401,51 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
 
   const isModerator = selfUser && roles[selfUser.id] === DefaultConversationRoleName.WIRE_ADMIN;
 
+  const [currentStart, setCurrentStart] = useState(0);
+  const visibleDots = DEFAULT_VISIBLE_DOTS > totalPages ? totalPages : DEFAULT_VISIBLE_DOTS;
+
+  useEffect(() => {
+    const isLastInTheRange = currentPage === currentStart + visibleDots - 1;
+    const isLastPage = currentPage === totalPages - 1;
+
+    if (isLastInTheRange && !isLastPage) {
+      return setCurrentStart(currentStart => currentStart + 1);
+    }
+
+    if (currentStart + visibleDots - 1 >= totalPages && currentStart > 0) {
+      return setCurrentStart(currentStart => currentStart - 1);
+    }
+  }, [totalPages, setCurrentStart, currentStart, currentPage, visibleDots]);
+
+  const handlePreviousPage = () => {
+    if (currentPage === 0) {
+      return;
+    }
+
+    const previousPage = currentPage - 1;
+
+    // previousPage !== 0 --> jest niepotrzebne prawdopodnie
+    if (previousPage === currentStart && previousPage !== 0) {
+      setCurrentStart(currentStart => currentStart - 1);
+    }
+
+    changePage(previousPage, call);
+  };
+
+  const handleNextPage = () => {
+    if (currentPage === totalPages - 1) {
+      return;
+    }
+
+    const nextPage = currentPage + 1;
+
+    if (nextPage === currentStart + visibleDots - 1 && nextPage !== totalPages - 1) {
+      setCurrentStart(currentStart => currentStart + 1);
+    }
+
+    changePage(nextPage, call);
+  };
+
   return (
     <div className="video-calling-wrapper">
       <div id="video-calling" className="video-calling">
@@ -450,8 +497,8 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
                 <button
                   data-uie-name="pagination-previous"
                   type="button"
-                  onClick={() => changePage(currentPage - 1, call)}
-                  onKeyDown={event => handleKeyDown(event, () => changePage(currentPage - 1, call))}
+                  onClick={handlePreviousPage}
+                  onKeyDown={event => handleKeyDown(event, handlePreviousPage)}
                   className="button-reset-default"
                   disabled={currentPage === 0}
                   css={{
@@ -467,12 +514,13 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
                 <Pagination
                   totalPages={totalPages}
                   currentPage={currentPage}
-                  onChangePage={newPage => changePage(newPage, call)}
+                  currentStart={currentStart}
+                  visibleDots={visibleDots}
                 />
                 <button
                   data-uie-name="pagination-next"
-                  onClick={() => changePage(currentPage + 1, call)}
-                  onKeyDown={event => handleKeyDown(event, () => changePage(currentPage + 1, call))}
+                  onClick={handleNextPage}
+                  onKeyDown={event => handleKeyDown(event, handleNextPage)}
                   type="button"
                   className="button-reset-default"
                   disabled={currentPage === totalPages - 1}
diff --git a/src/script/components/calling/Pagination.tsx b/src/script/components/calling/Pagination.tsx
index f9285162c59..f7f095224fb 100644
--- a/src/script/components/calling/Pagination.tsx
+++ b/src/script/components/calling/Pagination.tsx
@@ -21,12 +21,11 @@ import React from 'react';
 
 import {CSSObject} from '@emotion/react';
 
-import {handleKeyDown} from 'Util/KeyboardUtil';
-
 export interface PaginationProps {
   currentPage: number;
-  onChangePage: (newPage: number) => void;
   totalPages: number;
+  currentStart: number;
+  visibleDots: number;
   wrapperStyles?: CSSObject;
 }
 
@@ -35,14 +34,17 @@ const paginationItemStyles: CSSObject = {
     marginRight: 4,
   },
   borderRadius: '50%',
-  cursor: 'pointer',
-  height: 12,
   marginLeft: 4,
-  width: 12,
 };
 
-const Pagination: React.FC<PaginationProps> = ({totalPages, currentPage, onChangePage, wrapperStyles = {}}) => {
-  const pages = new Array(totalPages).fill(null).map((_, index) => index);
+const Pagination: React.FC<PaginationProps> = ({
+  totalPages,
+  currentPage,
+  currentStart,
+  visibleDots,
+  wrapperStyles = {},
+}) => {
+  const visibleRange = Array.from({length: visibleDots}, (_, index) => currentStart + index);
 
   return (
     <div
@@ -56,40 +58,29 @@ const Pagination: React.FC<PaginationProps> = ({totalPages, currentPage, onChang
       }}
       data-uie-name="pagination-wrapper"
     >
-      {pages.map(page => {
+      {visibleRange.map((page, index) => {
         const isCurrentPage = currentPage === page;
+        const isFirstOrLastInTheRange = index === 0 || index === visibleRange.length - 1;
+        const isLastPage = page === totalPages - 1;
+        const isFirstPage = page === 0;
+
+        const isSmaller = isFirstOrLastInTheRange && !(isFirstPage || isLastPage);
 
         return (
-          <button
+          <div
             data-uie-name="pagination-item"
             data-uie-status={isCurrentPage ? 'active' : 'inactive'}
             key={page}
-            onClick={() => onChangePage(page)}
-            onKeyDown={event => handleKeyDown(event, () => onChangePage(page))}
-            type="button"
-            className="button-reset-default"
             css={{
               ...paginationItemStyles,
-              '&:focus-visible': {
-                backgroundColor: isCurrentPage ? 'var(--toggle-button-hover-bg)' : 'none',
-                border: '1px solid var(--accent-color)',
-                outline: 'none',
-              },
-              '&:hover': {
-                backgroundColor: isCurrentPage
-                  ? 'var(--toggle-button-hover-bg)'
-                  : 'var(--toggle-button-unselected-hover-bg)',
-                border: isCurrentPage
-                  ? '1px solid var(--toggle-button-hover-bg)'
-                  : '1px solid var(--toggle-button-unselected-hover-border)',
-              },
-
               '&:active': {
                 backgroundColor: isCurrentPage ? 'var(--accent-color)' : 'var(--toggle-button-unselected-bg)',
                 border: '1px solid var(--accent-color)',
               },
-              backgroundColor: isCurrentPage ? 'var(--accent-color)' : 'none',
+              backgroundColor: isCurrentPage ? 'var(--accent-color)' : 'transparent',
               border: isCurrentPage ? 'solid 1px var(--accent-color)' : 'solid 1px var(--foreground)',
+              width: isSmaller ? '8px' : '12px',
+              height: isSmaller ? '8px' : '12px',
             }}
           />
         );