diff --git a/src/entities/additional-service/model/account-holder-auth/types.ts b/src/entities/additional-service/model/account-holder-auth/types.ts
index 72da789..acec12f 100644
--- a/src/entities/additional-service/model/account-holder-auth/types.ts
+++ b/src/entities/additional-service/model/account-holder-auth/types.ts
@@ -28,7 +28,9 @@ export interface AccountHolderAuthListProps {
   listItems: Array<AccountHolderAuthItem>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
-}
+  onClickToOpenFilter: () => void;
+  onClickToOpenDownloadBottomSheet: () => void;
+};
 export interface AccountHolderAuthFilterProps extends FilterProps {
   mid: string;
   startDate: string;
diff --git a/src/entities/additional-service/model/account-holder-search/types.ts b/src/entities/additional-service/model/account-holder-search/types.ts
index fbf955f..f8a5da0 100644
--- a/src/entities/additional-service/model/account-holder-search/types.ts
+++ b/src/entities/additional-service/model/account-holder-search/types.ts
@@ -25,7 +25,9 @@ export interface AccountHolderSearchListProps {
   listItems: Array<AccountHolderSearchListItem>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
-}
+  onClickToOpenFilter: () => void;
+  onClickToOpenDownloadBottomSheet: () => void;
+};
 
 export interface AccountHolderSearchFilterProps extends FilterProps {
   mid: string;
diff --git a/src/entities/additional-service/model/key-in/types.ts b/src/entities/additional-service/model/key-in/types.ts
index 51490e5..b2eca4b 100644
--- a/src/entities/additional-service/model/key-in/types.ts
+++ b/src/entities/additional-service/model/key-in/types.ts
@@ -34,7 +34,9 @@ export interface KeyInPaymentListProps {
   additionalServiceCategory: AdditionalServiceCategory;
   listItems: Array<KeyInPaymentListItem>;
   mid?: string;
-}
+  onClickToOpenFilter: () => void;
+  onClickToOpenDownloadBottomSheet: () => void;
+};
 
 export interface KeyInPaymentFilterProps extends FilterProps {
   mid: string,
diff --git a/src/entities/additional-service/model/sms-payment/types.ts b/src/entities/additional-service/model/sms-payment/types.ts
index 8fcf328..135749c 100644
--- a/src/entities/additional-service/model/sms-payment/types.ts
+++ b/src/entities/additional-service/model/sms-payment/types.ts
@@ -30,7 +30,9 @@ export interface SmsPaymentListProps {
   additionalServiceCategory: AdditionalServiceCategory;
   mid: string;
   onResendClick?: (seq: number) => void;
-}
+  onClickToOpenFilter: () => void;
+  onClickToOpenDownloadBottomSheet: () => void;
+};
 
 export interface SmsPaymentFilterProps extends FilterProps {
   mid: string;
diff --git a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx b/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
index 9d91b29..637dc46 100644
--- a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
+++ b/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
@@ -1,12 +1,24 @@
 import { ListDateGroup } from '../list-date-group';
 import { AccountHolderAuthListProps } from '../../model/account-holder-auth/types';
+import { useTranslation } from 'react-i18next';
+import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
+import { useEffect, useState } from 'react';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 
 export const AccountHolderAuthList = ({
   additionalServiceCategory,
   listItems,
   mid,
-  setDetailData
+  setDetailData,
+  onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: AccountHolderAuthListProps) => {
+  const { t, i18n } = useTranslation();
+  
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
 
   const getListDateGroup = () => {
     let rs = [];
@@ -57,9 +69,92 @@ export const AccountHolderAuthList = ({
     return rs;
   };
 
+  const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
+
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+    
+  useEffect(() => {
+    ListScrollOn(true);
+    let heightList = GetListHeight();
+    setListHeight(heightList.listHeight);
+
+    let tabContent = document.querySelector('.tab-content');
+    tabContent?.addEventListener('scroll', setScrollAction);
+    
+    return () => {
+      ListScrollOn(false);
+      tabContent?.removeEventListener('scroll', setScrollAction);
+    };
+  }, []);
+
   return (
     <>
-      <div className="transaction-list">
+      { groupDateOn &&
+      <div className="summary-amount scroll-group-date">
+        <span className="amount-text">{ groupDate }</span>
+        <div className="summary-actions">
+          <button className="filter-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_setting.svg' }
+              alt={t('transaction.searchOptions')}
+              onClick={ onClickToOpenFilter }
+            />
+          </button>
+          <button className="download-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={t('transaction.download')}
+              onClick={ onClickToOpenDownloadBottomSheet }
+            />
+          </button>
+        </div>
+      </div>
+      }
+      <div 
+        className="transaction-list"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
         {getListDateGroup()}
       </div>
     </>
diff --git a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
index 2fe3c09..fff43a7 100644
--- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
@@ -6,15 +6,25 @@ import { AccountHolderSearchListProps } from '../../model/account-holder-search/
 import { useTranslation } from 'react-i18next';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
+import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
+import { useEffect, useState } from 'react';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 
 export const AccountHolderSearchList = ({
 	listItems,
 	mid,
-	setDetailData
+	setDetailData,
+	onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: AccountHolderSearchListProps) => {
 	const { navigate } = useNavigate();
 	const { t } = useTranslation();
 
+	const { groupDate, setGroupDate } = useGroupDateStore();
+	const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+		
+	const [listHeight, setListHeight] = useState<number>(0);
+
 	const getListDateGroup = () => {
 		let rs = [];
 		let date = '';
@@ -72,17 +82,100 @@ export const AccountHolderSearchList = ({
 		navigate(PATHS.additionalService.accountHolderSearch.request)
 	};
 
+	const getMax = (data: Array<Record<string, any>>) => {
+		let maxItem = null;
+		if(data.length > 0){
+			let numberArr = data.map((
+				value: Record<string, any>, 
+				index: number
+			) => {
+				return value.top;
+			});
+			let max = Math.max(...numberArr);
+			maxItem = data.filter((
+				value: Record<string, any>, 
+				index: number
+			) => {
+				return value.top === max;
+			});
+		} 
+		
+		return maxItem? maxItem[0]: null;
+	};
+
+	const setScrollAction = (e: Event) => {
+		let dateHeader = document.querySelectorAll('.date-header');
+		let posData: Array<Record<string, any>> = [];
+		dateHeader.forEach((value, index) => {
+			let date: string = value.innerHTML;
+			let top: number = value.getBoundingClientRect().top;
+			if(top < 10){
+				posData.push({
+					date: date,
+					top: top
+				});
+			}
+		});
+		let maxItem = getMax(posData);
+		if(maxItem){
+			setGroupDateOn(true);
+			setGroupDate(maxItem.date);
+		}
+		else{
+			setGroupDateOn(false);
+			setGroupDate('');
+		}
+	};
+		
+	useEffect(() => {
+		ListScrollOn(true);
+		let heightList = GetListHeight();
+		setListHeight(heightList.listHeight);
+
+		let tabContent = document.querySelector('.tab-content');
+		tabContent?.addEventListener('scroll', setScrollAction);
+		
+		return () => {
+			ListScrollOn(false);
+			tabContent?.removeEventListener('scroll', setScrollAction);
+		};
+	}, []);
+
 	return (
 		<>
-				<section className="transaction-list">
-					{ getListDateGroup() }
-				</section>
-				<div className="apply-row">
-					<button
-						className="btn-50 btn-blue flex-1"
-						onClick={onClickToNavigate}
-					>{ t('additionalService.accountHolderSearch.searchRequest') }</button>
+			{ groupDateOn &&
+			<div className="summary-amount scroll-group-date">
+				<span className="amount-text">{ groupDate }</span>
+				<div className="summary-actions">
+					<button className="filter-btn">
+						<img
+							src={ IMAGE_ROOT + '/ico_setting.svg' }
+							alt={t('transaction.searchOptions')}
+							onClick={ onClickToOpenFilter }
+						/>
+					</button>
+					<button className="download-btn">
+						<img
+							src={ IMAGE_ROOT + '/ico_download.svg' }
+							alt={t('transaction.download')}
+							onClick={ onClickToOpenDownloadBottomSheet }
+						/>
+					</button>
 				</div>
+			</div>
+			}	
+			<section 
+				className="transaction-list"
+				style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+			>
+				{ getListDateGroup() }
+			</section>
+			<div className="apply-row">
+				<button
+					className="btn-50 btn-blue flex-1"
+					onClick={onClickToNavigate}
+				>{ t('additionalService.accountHolderSearch.searchRequest') }</button>
+			</div>
 		</>
 	);
 }
\ No newline at end of file
diff --git a/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx b/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
index e722642..3ebc860 100644
--- a/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
@@ -2,19 +2,28 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListDateGroup } from '../list-date-group';
 import { KeyInPaymentListItem, KeyInPaymentListProps } from '../../model/key-in/types';
-import { JSX } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
 
 export const KeyInPaymentList = ({
   additionalServiceCategory,
   listItems,
-  mid
+  mid,
+  onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: KeyInPaymentListProps) => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
 
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
+
   const getListDateGroup = () => {
     let rs = [];
     let date = '';
@@ -68,9 +77,92 @@ export const KeyInPaymentList = ({
     navigate(PATHS.additionalService.keyInPayment.request);
   };
 
+  const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
+
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+    
+  useEffect(() => {
+    ListScrollOn(true);
+    let heightList = GetListHeight();
+    setListHeight(heightList.listHeight);
+
+    let tabContent = document.querySelector('.tab-content');
+    tabContent?.addEventListener('scroll', setScrollAction);
+    
+    return () => {
+      ListScrollOn(false);
+      tabContent?.removeEventListener('scroll', setScrollAction);
+    };
+  }, []);
+
   return (
     <>
-      <section className="transaction-list">
+      { groupDateOn &&
+      <div className="summary-amount scroll-group-date">
+        <span className="amount-text">{ groupDate }</span>
+        <div className="summary-actions">
+          <button className="filter-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_setting.svg' }
+              alt={t('transaction.searchOptions')}
+              onClick={ onClickToOpenFilter }
+            />
+          </button>
+          <button className="download-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={t('transaction.download')}
+              onClick={ onClickToOpenDownloadBottomSheet }
+            />
+          </button>
+        </div>
+      </div>
+      }
+      <section 
+        className="transaction-list"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
         {getListDateGroup()}
       </section>
       <div className="apply-row">
diff --git a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx b/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
index 22472d6..a5185bd 100644
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
@@ -1,12 +1,24 @@
+import { useTranslation } from 'react-i18next';
 import { SmsPaymentListProps } from '../../model/sms-payment/types';
 import { ListDateGroup } from '../list-date-group';
+import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
+import { useEffect, useState } from 'react';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 
 export const SmsPaymentList = ({
     listItems,
     additionalServiceCategory,
     mid,
-    onResendClick
+    onResendClick,
+    onClickToOpenFilter,
+    onClickToOpenDownloadBottomSheet
 }: SmsPaymentListProps) => {
+  const { t, i18n } = useTranslation();
+  
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
 
   const getListDateGroup = () => {
     let rs = [];
@@ -56,11 +68,94 @@ export const SmsPaymentList = ({
     return rs;
   };
 
-    return (
-        <>
-            <section className="transaction-list">
-                {getListDateGroup()}
-            </section>
-        </>
-    )
-}
\ No newline at end of file
+  const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
+
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+    
+  useEffect(() => {
+    ListScrollOn(true);
+    let heightList = GetListHeight();
+    setListHeight(heightList.listHeight);
+
+    let tabContent = document.querySelector('.tab-content');
+    tabContent?.addEventListener('scroll', setScrollAction);
+    
+    return () => {
+      ListScrollOn(false);
+      tabContent?.removeEventListener('scroll', setScrollAction);
+    };
+  }, []);
+
+  return (
+    <>
+      { groupDateOn &&
+      <div className="summary-amount scroll-group-date">
+        <span className="amount-text">{ groupDate }</span>
+        <div className="summary-actions">
+          <button className="filter-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_setting.svg' }
+              alt={t('transaction.searchOptions')}
+              onClick={ onClickToOpenFilter }
+            />
+          </button>
+          <button className="download-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={t('transaction.download')}
+              onClick={ onClickToOpenDownloadBottomSheet }
+            />
+          </button>
+        </div>
+      </div>
+      }
+      <section 
+        className="transaction-list"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
+        {getListDateGroup()}
+      </section>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
index bce82cd..911e5b1 100644
--- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
@@ -270,6 +270,8 @@ export const AccountHolderAuthPage = () => {
               listItems={listItems}
               mid={mid}
               setDetailData={setDetailData}
+              onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></AccountHolderAuthList>
             <div ref={setTarget}></div>
           </div>
diff --git a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
index e254c8c..bade272 100644
--- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
+++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
@@ -281,6 +281,8 @@ export const AccountHolderSearchPage = () => {
               listItems={listItems}
               mid={mid}
               setDetailData={setDetailData}
+              onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></AccountHolderSearchList>
             <div ref={setTarget}></div>
           </div>
diff --git a/src/pages/additional-service/alimtalk/list-page.tsx b/src/pages/additional-service/alimtalk/list-page.tsx
index 6ad1a95..1ab500c 100644
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -1,7 +1,7 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 import {
   useSetHeaderTitle,
   useSetHeaderType,
@@ -27,7 +27,7 @@ import { useExtensionAlimtalkListMutation } from '@/entities/additional-service/
 import { useExtensionAlimtalkDownloadExcelMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-download-excel-mutation';
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
 import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
-import { useStore } from '@/shared/model/store';
+import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
 import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter';
@@ -69,6 +69,11 @@ export const AlimtalkListPage = () => {
   const [detailTid, setDetailTid] = useState<string>('');
   const [detailSeq, setDetailSeq] = useState<number>(0);
 
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
+
   const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation();
   const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation();
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
@@ -277,6 +282,65 @@ export const AlimtalkListPage = () => {
     sendCl
   ]);
 
+  const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
+
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+    
+  useEffect(() => {
+    ListScrollOn(true);
+    let heightList = GetListHeight();
+    setListHeight(heightList.listHeight);
+
+    let tabContent = document.querySelector('.tab-content');
+    tabContent?.addEventListener('scroll', setScrollAction);
+    
+    return () => {
+      ListScrollOn(false);
+      tabContent?.removeEventListener('scroll', setScrollAction);
+    };
+  }, []);
+
   // if (!hasAccess) {
   //   return <AccessDeniedDialog />;
   // }
@@ -318,8 +382,31 @@ export const AlimtalkListPage = () => {
                 </button>
               </div>
             </section>
-
-            <section className="transaction-list">
+            { groupDateOn &&
+            <div className="summary-amount scroll-group-date">
+              <span className="amount-text">{ groupDate }</span>
+              <div className="summary-actions">
+                <button className="filter-btn">
+                  <img
+                    src={ IMAGE_ROOT + '/ico_setting.svg' }
+                    alt={t('transaction.searchOptions')}
+                    onClick={ onClickToOpenFilter }
+                  />
+                </button>
+                <button className="download-btn">
+                  <img
+                    src={ IMAGE_ROOT + '/ico_download.svg' }
+                    alt={t('transaction.download')}
+                    onClick={ onClickToOpenDownloadBottomSheet }
+                  />
+                </button>
+              </div>
+            </div>
+            }
+            <section 
+              className="transaction-list"
+              style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+            >
               { getAlimtalkList() }
             </section>
             <div ref={ setTarget }></div>
diff --git a/src/pages/additional-service/face-auth/face-auth-page.tsx b/src/pages/additional-service/face-auth/face-auth-page.tsx
index 73f7ba8..0f129f5 100644
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/src/pages/additional-service/face-auth/face-auth-page.tsx
@@ -4,9 +4,9 @@ import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/c
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 import { useEffect, useState } from 'react';
-import { useStore } from '@/shared/model/store';
+import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
 import { PATHS } from '@/shared/constants/paths';
 import {
 	useSetHeaderTitle,
@@ -54,6 +54,11 @@ export const FaceAuthPage = () => {
 
 	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
+	const { groupDate, setGroupDate } = useGroupDateStore();
+	const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+		
+	const [listHeight, setListHeight] = useState<number>(0);
+
 	useSetHeaderTitle(t('faceAuth.title'));
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetFooterMode(false);
@@ -233,6 +238,65 @@ export const FaceAuthPage = () => {
 		sortType
 	]);
 
+	const getMax = (data: Array<Record<string, any>>) => {
+		let maxItem = null;
+		if(data.length > 0){
+			let numberArr = data.map((
+				value: Record<string, any>, 
+				index: number
+			) => {
+				return value.top;
+			});
+			let max = Math.max(...numberArr);
+			maxItem = data.filter((
+				value: Record<string, any>, 
+				index: number
+			) => {
+				return value.top === max;
+			});
+		} 
+		
+		return maxItem? maxItem[0]: null;
+	};
+
+	const setScrollAction = (e: Event) => {
+		let dateHeader = document.querySelectorAll('.date-header');
+		let posData: Array<Record<string, any>> = [];
+		dateHeader.forEach((value, index) => {
+			let date: string = value.innerHTML;
+			let top: number = value.getBoundingClientRect().top;
+			if(top < 10){
+				posData.push({
+					date: date,
+					top: top
+				});
+			}
+		});
+		let maxItem = getMax(posData);
+		if(maxItem){
+			setGroupDateOn(true);
+			setGroupDate(maxItem.date);
+		}
+		else{
+			setGroupDateOn(false);
+			setGroupDate('');
+		}
+	};
+		
+	useEffect(() => {
+		ListScrollOn(true);
+		let heightList = GetListHeight();
+		setListHeight(heightList.listHeight);
+
+		let tabContent = document.querySelector('.tab-content');
+		tabContent?.addEventListener('scroll', setScrollAction);
+		
+		return () => {
+			ListScrollOn(false);
+			tabContent?.removeEventListener('scroll', setScrollAction);
+		};
+	}, []);
+
 	// if (!hasAccess) {
 	//     return <AccessDeniedDialog />;
 	// }
@@ -298,7 +362,31 @@ export const FaceAuthPage = () => {
 								</div>
 							</div>
 						</div>
-						<section className="transaction-list">
+						{ groupDateOn &&
+						<div className="summary-amount scroll-group-date">
+							<span className="amount-text">{ groupDate }</span>
+							<div className="summary-actions">
+								<button className="filter-btn">
+									<img
+										src={ IMAGE_ROOT + '/ico_setting.svg' }
+										alt={t('transaction.searchOptions')}
+										onClick={ onClickToOpenFilter }
+									/>
+								</button>
+								<button className="download-btn">
+									<img
+										src={ IMAGE_ROOT + '/ico_download.svg' }
+										alt={t('transaction.download')}
+										onClick={ onClickToOpenDownloadBottomSheet }
+									/>
+								</button>
+							</div>
+						</div>
+						}
+						<section 
+							className="transaction-list"
+							style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+						>
 							{ getListDateGroup() }
 						</section>
 						<div ref={ setTarget }></div>
diff --git a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
index 49486ec..17833f3 100644
--- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
+++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
@@ -262,6 +262,8 @@ export const KeyInPaymentPage = () => {
               listItems={listItems}
               additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
               mid={mid}
+              onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></KeyInPaymentList>
             <div ref={ setTarget }></div>
           </div>
diff --git a/src/pages/additional-service/sms-payment/sms-payment-page.tsx b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
index 2e2a4cc..bd14b66 100644
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
@@ -249,6 +249,8 @@ export const SmsPaymentPage = () => {
               additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
               mid={mid}
               onResendClick={onClickToShowDetail}
+              onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></SmsPaymentList>
           </div>
         </div>