diff --git a/src/components/data-container/data-grid/TDataGrid.interface.ts b/src/components/data-container/data-grid/TDataGrid.interface.ts
index d24d62ef..c2783c59 100644
--- a/src/components/data-container/data-grid/TDataGrid.interface.ts
+++ b/src/components/data-container/data-grid/TDataGrid.interface.ts
@@ -18,6 +18,7 @@ export interface TDataGridProps extends TBaseProps, AgReactUiProps {
     height?: string,
 
     leftAction?: ReactElement
+    centerAction?: ReactElement,
     rightAction?: ReactElement
 
     onChange?: (value: any[]) => void
@@ -28,6 +29,9 @@ export interface TDataGridProps extends TBaseProps, AgReactUiProps {
     paging?: TPageResponseVO,
     maxRowsWithoutScroll?: number,
 
+    noJumper?: boolean,
+    jumperText?: string,
+
     noDataText?: string,
     noDataContent?: {
         title: string,
diff --git a/src/components/data-container/data-grid/TDataGrid.tsx b/src/components/data-container/data-grid/TDataGrid.tsx
index 5fea1a76..54d498cb 100644
--- a/src/components/data-container/data-grid/TDataGrid.tsx
+++ b/src/components/data-container/data-grid/TDataGrid.tsx
@@ -5,6 +5,7 @@ import {SelectionChangedEvent} from 'ag-grid-community';
 import {TDataGridProps} from './TDataGrid.interface';
 import TButton from '../../button/button/TButton';
 import TPagination from '../pagination/TPagination';
+import TActionBar from '~/data-container/action-bar/TActionBar';
 
 const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
 
@@ -73,11 +74,11 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
 
     const noRowsOverlayComponent = useCallback(() => (<>
         <div className={'t-data-grid__body__no-rows-template'}>
-            <svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 100 100'>
-                <circle cx='44' cy='44' r='44' transform='translate(6.5 6.5)'
+            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100">
+                <circle cx="44" cy="44" r="44" transform="translate(6.5 6.5)"
                         style={{fill: '#f2f2f2', stroke: '#ddd', strokeMiterlimit: 10, strokeWidth: '2px'}}/>
-                <path transform='translate(49 35)' style={{fill: '#999'}} d='M0 0h4v24H0z'/>
-                <path transform='translate(49 62.953)' style={{fill: '#999'}} d='M0 0h4v4H0z'/>
+                <path transform="translate(49 35)" style={{fill: '#999'}} d="M0 0h4v24H0z"/>
+                <path transform="translate(49 62.953)" style={{fill: '#999'}} d="M0 0h4v4H0z"/>
             </svg>
 
             {
@@ -107,7 +108,7 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
         <div className={`t-data-grid ${rootClass}`} style={rootStyle} id={props.id} data-testid={'data-grid-root'}>
             {
                 !props.noHeader && (
-                    <div className={'t-data-grid__header'}>
+                    <div className={'t-data-grid__header'} data-testid={'data-grid-header-root'}>
                         {
                             !props.noTotalRows && (
                                 <div className={'t-data-grid__header__pagination'}>
@@ -125,17 +126,11 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
                         }
 
                         {
-                            props.leftAction && (
-                                <div className={'t-data-grid__header__left-action'}>
-                                    {props.leftAction}
-                                </div>
-                            )
-                        }
-                        {
-                            props.rightAction && (
-                                <div className={'t-data-grid__header__right-action'}>
-                                    {props.rightAction}
-                                </div>
+                            (props.leftAction || props.rightAction || props.centerAction) && (
+                                <TActionBar className={'t-data-grid__header__action-bar'}
+                                            leftAction={props.leftAction}
+                                            centerAction={props.centerAction}
+                                            rightAction={props.rightAction}/>
                             )
                         }
                     </div>
@@ -143,7 +138,7 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
             }
 
 
-            <div className={'t-data-grid__body ag-theme-material'}
+            <div className={'t-data-grid__body ag-theme-material'} data-testid={'data-grid-body-root'}
                  style={{height: generatedHeightProps.height}}>
                 <AgGridReact className={''}
                              ref={gridRef}
@@ -160,6 +155,8 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
                                  totalPages={props.paging?.totalPages || 1}
                                  pageNumber={props.paging?.pageNumber || 1}
                                  onChangePageNumber={(value) => props.onChangePageNumber(value)}
+                                 noJumper={props.noJumper}
+                                 jumperText={props.jumperText}
                     />
                 )
             }
@@ -180,8 +177,8 @@ TDataGrid.defaultProps = {
     suppressRowClickSelection: true,
     enableCellTextSelection: true,
     noDataText: '검색 조건에 맞는 데이터가 없습니다',
-    headerHeight: 48,
-    rowHeight: 76,
+    headerHeight: 32,
+    rowHeight: 40,
 };
 
 TDataGrid.displayName = 'TDataGrid';
diff --git a/src/components/data-container/pagination/TPagination.interface.ts b/src/components/data-container/pagination/TPagination.interface.ts
index 6380f3e9..afceeba4 100644
--- a/src/components/data-container/pagination/TPagination.interface.ts
+++ b/src/components/data-container/pagination/TPagination.interface.ts
@@ -4,6 +4,8 @@ export interface TPaginationProps extends TBaseProps {
 
     totalPages: number,
     pageNumber: number,
+    noJumper?: boolean,
+    jumperText?: string,
 
     onChangePageNumber(value: number): void,
 }
diff --git a/src/components/data-container/pagination/TPagination.tsx b/src/components/data-container/pagination/TPagination.tsx
index 0bbb4458..0ca11d47 100644
--- a/src/components/data-container/pagination/TPagination.tsx
+++ b/src/components/data-container/pagination/TPagination.tsx
@@ -1,7 +1,10 @@
-import {CSSProperties, forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useState} from 'react';
+import {CSSProperties, forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 
 import {TPaginationProps, TPaginationRef} from './TPagination.interface';
 import TIcon from '../../icon/TIcon';
+import TButton from '~/button/button/TButton';
+import TNumberField from '~/input/number-field/TNumberField';
+import rule from '@/common/validator/TValidatorRule';
 
 
 const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef>) => {
@@ -16,10 +19,13 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
         nextPageSet(): void { onClickNextPageSet(); },
         previousPage(): void { onClickPreviousPage(); },
         previousPageSet(): void { onClickPreviousPageSet(); },
+        jumpToPage(): void { onClickJumperButton(); },
     }));
 
     const [pageRange, setPageRange] = useState<{ min: number, max: number }>({min: 1, max: 1});
-
+    const [jumperPage, setJumperPage] = useState<number>(props.pageNumber);
+    const numberFieldRef = useRef(null);
+    const jumperTextFieldMin = 1;
     // endregion
 
 
@@ -49,7 +55,6 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
     const getPageRange = useCallback((currentPage: number, totalPages: number) => {
         const min = Math.floor((currentPage - 1) / 10) * 10 + 1;
         const max = Math.min(totalPages, min + 9);
-
         return {min, max};
     }, []);
 
@@ -108,6 +113,14 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
         onChangePageNumber(targetPage);
     }, [onChangePageNumber, pageRange.min, props.pageNumber]);
 
+    const onChangeJumperPageNumber = useCallback((pageNumber: string) => {
+        setJumperPage(Number(pageNumber));
+    }, [pageRange]);
+
+    const onClickJumperButton = useCallback(() => {
+        const validResult = numberFieldRef.current?.validate();
+        if (validResult === true && onChangePageNumber) { onChangePageNumber(jumperPage); }
+    }, [jumperPage, pageRange, onChangePageNumber]);
 
     // endregion
 
@@ -116,14 +129,14 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
     useEffect(() => {
         const range = getPageRange(props.pageNumber, props.totalPages);
         setPageRange(range);
+        setJumperPage(props.pageNumber);
     }, [getPageRange, props.pageNumber, props.totalPages]);
 
-
     // endregion
 
 
     return (
-        <nav className={`t-pagination ${rootClass}`} style={rootStyle}>
+        <nav className={`t-pagination ${rootClass}`} style={rootStyle} data-testid={'pagination-root'}>
 
             <span className={'t-pagination__nav-button-container'}>
                 <TIcon className={`t-pagination__nav-button-container__button ${prevPageButtonClass}`}
@@ -132,14 +145,14 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
                        disabled={props.pageNumber === 1}
                        onClick={onClickPreviousPageSet}
                        onKeyDownEnter={onClickPreviousPageSet}
-                       onKeyDownSpace={onClickPreviousPageSet}>t_navigate_left_double</TIcon>
+                       onKeyDownSpace={onClickPreviousPageSet}>keyboard_double_arrow_left</TIcon>
                 <TIcon className={`t-pagination__nav-button-container__button ${prevPageButtonClass}`}
                        clickable
                        small
                        disabled={props.pageNumber === 1}
                        onClick={onClickPreviousPage}
                        onKeyDownEnter={onClickPreviousPage}
-                       onKeyDownSpace={onClickPreviousPage}>t_navigate_left</TIcon>
+                       onKeyDownSpace={onClickPreviousPage}>keyboard_arrow_left</TIcon>
             </span>
 
             <ul className={'t-pagination__page-container'}>
@@ -162,19 +175,36 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
                        disabled={props.pageNumber === props.totalPages}
                        onClick={onClickNextPage}
                        onKeyDownEnter={onClickNextPage}
-                       onKeyDownSpace={onClickNextPage}>t_navigate_right</TIcon>
+                       onKeyDownSpace={onClickNextPage}>keyboard_arrow_right</TIcon>
                 <TIcon className={`t-pagination__nav-button-container__button ${nextPageButtonClass}`}
                        clickable
                        small
                        disabled={props.pageNumber === props.totalPages}
                        onClick={onClickNextPageSet}
                        onKeyDownEnter={onClickNextPageSet}
-                       onKeyDownSpace={onClickNextPageSet}>t_navigate_right_double</TIcon>
+                       onKeyDownSpace={onClickNextPageSet}>keyboard_double_arrow_right</TIcon>
             </span>
+            {
+                !props.noJumper && (
+                    <div className={'t-pagination__jumper__container'} data-testid={'pagination-jumper-root'}>
+                        <TNumberField ref={numberFieldRef} className={'t-pagination__jumper__container__page__field'}
+                                      value={jumperPage.toString()} min={jumperTextFieldMin} max={props.totalPages}
+                                      rules={[rule.valueMin(jumperTextFieldMin), rule.valueMax(props.totalPages)]}
+                                      onChange={onChangeJumperPageNumber} onKeyDownEnter={onClickJumperButton}
+                        />
+                        <TButton className={'t-pagination__jumper__container__button'} onClick={onClickJumperButton}>
+                            {props.jumperText}
+                        </TButton>
+                    </div>
+                )
+            }
+
         </nav>
     );
 });
-TPagination.defaultProps = {};
+TPagination.defaultProps = {
+    jumperText: '바로가기',
+};
 
 TPagination.displayName = 'TPagination';
 
diff --git a/src/components/input/number-field/TNumberField.tsx b/src/components/input/number-field/TNumberField.tsx
index 8408afd3..e236dd1d 100644
--- a/src/components/input/number-field/TNumberField.tsx
+++ b/src/components/input/number-field/TNumberField.tsx
@@ -228,6 +228,7 @@ const TNumberField = forwardRef((props: TNumberFieldProps, ref: Ref<TNumberField
                        onKeyDown={onKeyDown}
                        onFocus={onFocus}
                        onBlur={onBlur}
+                       data-testid={'number-field-input-root'}
                 />
                 {
 
diff --git a/src/styles/component/data-container/action-bar/TActionBar.scss b/src/styles/component/data-container/action-bar/TActionBar.scss
index 00a93af5..4b3fca7a 100644
--- a/src/styles/component/data-container/action-bar/TActionBar.scss
+++ b/src/styles/component/data-container/action-bar/TActionBar.scss
@@ -1,4 +1,5 @@
 .t-action-bar {
+    width: 100%;
 
         .t-action-bar__container {
         display: flex;
diff --git a/src/styles/component/data-container/data-grid/TDataGrid.scss b/src/styles/component/data-container/data-grid/TDataGrid.scss
index a4a783cb..f8c633c9 100644
--- a/src/styles/component/data-container/data-grid/TDataGrid.scss
+++ b/src/styles/component/data-container/data-grid/TDataGrid.scss
@@ -14,37 +14,31 @@
     }
 
     .t-data-grid__header {
-        height: 46px;
-        margin-bottom: $t-spacing-8;
+        margin-bottom: $t-spacing-10;
         display: flex;
         align-items: center;
         gap: $t-spacing-16;
 
         .t-data-grid__header__pagination {
             color: $t-gray-color-5;
-            strong { color: $t-primary-color; }
+            white-space: nowrap;
+            @include typo-element-3;
+
+            strong {
+                color: $t-black-color;
+                font-weight: $t-font-weight-regular;
+            }
         }
         .t-data-grid__header__select-indicator {
+            @include typo-element-3;
             color: $t-primary-color;
-            font-weight: $t-font-weight-medium;
-        }
-        .t-data-grid__header__left-action {
-            flex: 1 1 auto;
-            display: flex;
-            align-items: center;
-        }
-        .t-data-grid__header__right-action {
-            flex: 1 1 auto;
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
         }
     }
 
     .t-data-grid__body.ag-theme-material {
         --ag-material-primary-color: #{$t-primary-color};
         --ag-font-family: #{$t-font-family};
-        --ag-font-size: var(--t-font-size-medium);
+        --ag-font-size: #{$t-font-size-body-3};
 
         --ag-checkbox-checked-color: #{$t-primary-color};
         --ag-checkbox-indeterminate-color: #{$t-primary-color};
@@ -55,19 +49,24 @@
         --ag-input-focus-box-shadow: none;
 
         --ag-cell-horizontal-padding: 32px;
-        --ag-row-border-color: #{$t-grid-border-color--01};
+        --ag-row-border-color: #{$t-grid-border-color--02};
 
-        border-top: 2px solid $t-grid-border-color--03;
+        --ag-header-cell-hover-background-color: #{$t-blue-gray-color-3};
+        --ag-border-color: none;
+        --ag-foreground-color: #{$t-gray-color-6};
 
         .ag-header {
 
-            border-bottom: 1px solid $t-border-color--default;
-
             .ag-header-row {
-                font-size: var(--ag-font-size);
-                font-weight: $t-font-weight-bold;
                 color: $t-black-color;
-                background-color: $t-gray-color-1;
+                background-color: $t-blue-gray-color-2;
+                @include typo-subtitle-4;
+
+                & .ag-header-cell {
+                    padding: 0 $t-spacing-20;
+
+                    .ag-header-cell-label { position: relative; }
+                }
             }
 
             .ag-header-viewport {
@@ -105,10 +104,12 @@
             min-width: 100%;
         }
 
+        .ag-cell { padding: 0 $t-spacing-20; }
 
         .ag-cell, .ag-cell-wrapper {
             display: flex;
             align-items: center;
+
             @include ellipsis;
             &::selection { color: transparent; background: transparent;}
 
@@ -129,6 +130,6 @@
 
 
     .t-data-grid__pagination.t-pagination {
-        margin-top: 64px;
+        margin-top: $t-spacing-40;
     }
 }
diff --git a/src/styles/component/data-container/pagination/TPagination.scss b/src/styles/component/data-container/pagination/TPagination.scss
index 6fa98fcd..2bb0a8e3 100644
--- a/src/styles/component/data-container/pagination/TPagination.scss
+++ b/src/styles/component/data-container/pagination/TPagination.scss
@@ -3,13 +3,15 @@
 
     display: flex;
     justify-content: center;
-    height: 24px;
+    align-items: center;
+    gap: $t-spacing-8;
     width: 100%;
+    height: 24px;
 
     .t-pagination__nav-button-container {
         display: flex;
         align-items: center;
-        gap: 16px;
+        gap: $t-spacing-8;
 
         .t-icon.t-pagination__nav-button-container__button {
             @include icon-color($t-gray-color-4);
@@ -32,38 +34,76 @@
     .t-pagination__page-container {
         display: flex;
         align-items: center;
-        gap: 28px;
-        padding: 0 36px;
+        gap: $t-spacing-8;
+        margin: 0 $t-spacing-8;
 
         .t-pagination__page-container__page {
             min-width: 24px;
             display: flex;
             align-items: center;
             justify-content: center;
+
             .t-pagination__page-container__page__button {
-                height: 24px;
-                padding: 0 3px;
+                width: 28px;
+                height: 28px;
                 border: none;
                 background: none;
-                color: $t-gray-color-4;
+                color: $t-gray-color-5;
                 @include typo-element-3;
                 cursor: pointer;
 
-                &:hover {
-                    color: $t-primary-color;
-                }
-                &:focus-visible {
-                    outline: 1px solid $t-primary-color;
-                }
+                &:hover { color: $t-primary-color; }
+                &:focus-visible { outline: 1px solid $t-primary-color; }
 
                 &.t-pagination__page-container__page__button--active {
                     color: $t-primary-color;
-                    font-weight: $t-font-weight-bold;
-                    border-bottom: 2px solid $t-primary-color;
+                    @include typo-subtitle-4
+                }
+            }
+        }
+
+    }
+
+    .t-pagination__jumper__container {
+        display: flex;
+        align-items: center;
+        gap: $t-spacing-4;
+        margin-left: $t-spacing-24;
+
+        .t-pagination__jumper__container__page__field {
+            width: $t-spacing-48;
+
+            .t-number-field__container {
+                height: $t-spacing-24;
+                padding: 0 $t-spacing-2;
+                border-radius: $t-spacing-4;
+                border-color: $t-gray-color-2;
+            }
+
+            &.t-number-field--failure {
+                .t-number-field__container {
+                    border-color: $t-status-color--error;
                 }
             }
+
+
+            .t-number-field__container__action-icon { display: none; }
+            .t-number-field__container__input {
+                text-align: center;
+                @include typo-element-3;
+            }
+        }
+
+        .t-pagination__jumper__container__button {
+            min-width: 71px;
+            height: 24px;
+            border: 1px solid $t-gray-color-4;
+            border-radius: $t-spacing-2;
+            padding: 0;
+            @include typo-element-4;
         }
 
+        .t-number-field__details { display: none; }
     }
 
 }
diff --git a/src/styles/designToken/ThemeToken.scss b/src/styles/designToken/ThemeToken.scss
index 2cee13b9..f27c5ee0 100644
--- a/src/styles/designToken/ThemeToken.scss
+++ b/src/styles/designToken/ThemeToken.scss
@@ -226,7 +226,7 @@ $t-chart-color-10: color-mix(in srgb, var(--t-point-color), black 20%);
 
 // grid color
 $t-grid-border-color--01: #DDDDDD;
-$t-grid-border-color--02: #EEEEEE;
+$t-grid-border-color--02: $t-blue-gray-color-2;
 $t-grid-border-color--03: $t-black-color;
 $t-grid-background-color--01: $t-gray-color-2;
 
diff --git a/stories/components/data-container/data-grid/TDataGrid.stories.tsx b/stories/components/data-container/data-grid/TDataGrid.stories.tsx
index fdf23c9c..37762485 100644
--- a/stories/components/data-container/data-grid/TDataGrid.stories.tsx
+++ b/stories/components/data-container/data-grid/TDataGrid.stories.tsx
@@ -10,9 +10,7 @@ import useInputState from '@/common/hook/UseInputState';
 const meta: Meta<typeof TDataGrid> = {
     title: 'DataContainer/TDataGrid',
     component: TDataGrid,
-    parameters: {
-        layout: 'fullscreen',
-    },
+    parameters: {layout: 'fullscreen'},
 };
 
 export default meta;
@@ -71,9 +69,6 @@ const Template = () => {
                    rightAction={gridRightAction}
                    onChange={selectedRows.onChange}
         />
-
-        <br/><br/>
-
     </>);
 };
 
diff --git a/stories/components/data-container/pagination/TPagination.stories.tsx b/stories/components/data-container/pagination/TPagination.stories.tsx
index ae5eec9e..f1e7eb5e 100644
--- a/stories/components/data-container/pagination/TPagination.stories.tsx
+++ b/stories/components/data-container/pagination/TPagination.stories.tsx
@@ -1,5 +1,5 @@
 import {Meta, StoryObj} from '@storybook/react';
-import {useState} from 'react';
+import {ReactNode, useState} from 'react';
 import TPagination from '@/components/data-container/pagination/TPagination';
 import {TPaginationProps} from '@/components/data-container/pagination/TPagination.interface';
 
@@ -16,14 +16,35 @@ type Story = StoryObj<typeof TPagination>;
 
 // region [Normal]
 
+const Container = ({label, children}: { label?: string, children: ReactNode }) => {
+    return (
+        <div style={{display: 'flex', alignItems: 'flex-start', flexDirection: 'column', gap: '16px', width: '100%'}}>
+            <p style={{fontSize: '14px'}}>{label}</p>
+            <div style={{display: 'flex', alignItems: 'center', border: '1px solid lightgray', padding: '32px 16px', width: '100%'}}>
+                {children}
+            </div>
+        </div>
+    );
+};
+
 const NormalTemplate = (args: TPaginationProps) => {
     const [pageNumber, setPageNumber] = useState<number>(1);
 
-    return (<>
-        <div style={{display: 'flex', height: '80px', border: '1px solid lightgray'}}>
-            <TPagination {...args} pageNumber={pageNumber} onChangePageNumber={(number) => { setPageNumber(number); }}/>
-        </div>
-    </>);
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: '16px', width: '100%'}}>
+            <Container label={'Normal'}>
+                <TPagination {...args} pageNumber={pageNumber} onChangePageNumber={(number) => { setPageNumber(number); }}/>
+            </Container>
+
+            <Container label={'Jumper'}>
+                <TPagination {...args} pageNumber={pageNumber} onChangePageNumber={(number) => { setPageNumber(number); }}/>
+            </Container>
+
+            <Container label={'Custom Jumper Text'}>
+                <TPagination {...args} pageNumber={pageNumber} jumperText={'Go'}
+                             onChangePageNumber={(number) => { setPageNumber(number); }}/>
+            </Container>
+        </div>);
 };
 
 
diff --git a/tests/unit/react/tks/component/data-container/data-grid/TDataGrid.test.tsx b/tests/unit/react/tks/component/data-container/data-grid/TDataGrid.test.tsx
index 394fd82d..7fe45edf 100644
--- a/tests/unit/react/tks/component/data-container/data-grid/TDataGrid.test.tsx
+++ b/tests/unit/react/tks/component/data-container/data-grid/TDataGrid.test.tsx
@@ -1,6 +1,9 @@
 import {findByText, render, screen} from '@testing-library/react';
 import TDataGrid from '~/data-container/data-grid/TDataGrid';
 
+
+// columnDefs
+
 describe('TDataGrid', () => {
 
     const mockOnChange = jest.fn();
@@ -85,8 +88,6 @@ describe('TDataGrid', () => {
 
     describe('Render', () => {
 
-
-
         it('ColumnDefs prop applies to root', async () => {
 
             // Arrange
@@ -100,57 +101,114 @@ describe('TDataGrid', () => {
             expect(await findByText(root, 'Color')).toBeInTheDocument();
         });
 
+        it('NoJumper prop applies to root', async () => {
+
+            // Arrange
+            render(<TDataGrid rowData={[]} noJumper/>);
+
+            const root = screen.getByTestId('pagination-root');
+            const jumperRoot = root.querySelector('.t-pagination__jumper__container');
+
+            // // Assert
+            expect(root).toBeInTheDocument();
+            expect(jumperRoot).toBeNull();
+        });
+
+        it('JumperText prop applies to root', async () => {
+
+            // Arrange
+            const jumperText = 'Jumper Text';
+            render(<TDataGrid rowData={[]} jumperText={jumperText}/>);
+
+            const root = screen.getByTestId('pagination-jumper-root');
+            const jumperElement = screen.getByText(jumperText);
+
+            // // Assert
+            expect(root).toBeInTheDocument();
+            expect(jumperElement).toBeInTheDocument();
+        });
+
+        it('If noTotalRows property is true, header total rows is displayed.', async () => {
+
+            // Arrange
+            render(<TDataGrid rowData={[]} noTotalRows/>);
+
+            const rootHeader = screen.getByTestId('data-grid-header-root');
+            // // Assert
+            expect(rootHeader).toBeInTheDocument();
+            expect(rootHeader.childNodes.length).toBe(0);
+        });
+
+        it('If noTotalRows property is false, header total rows is displayed.', () => {
+
+            // Arrange
+            render(<TDataGrid {...baseProps} noTotalRows={false}/>);
+            const root = screen.getByTestId('data-grid-header-root');
+
+            // Assert
+            expect(root).toBeInTheDocument();
+            expect(root.childNodes.length).toBe(1);
+        });
+
         it('If noHeader property is false, grid header is displayed.', () => {
 
             // Arrange
             render(<TDataGrid {...baseProps} noHeader={false}/>);
-            const root = screen.getByTestId('data-grid-root');
+            const root = screen.getByTestId('data-grid-header-root');
 
             // Assert
-            expect(root.getElementsByClassName('t-data-grid__header').length).toBe(1);
+            expect(root.childNodes.length).toBe(1);
         });
 
         it('If noPagination property is false, pagination is displayed.', () => {
 
             // Arrange
             render(<TDataGrid {...baseProps} noPagination={false}/>);
-            const root = screen.getByTestId('data-grid-root');
+            const root = screen.getByTestId('pagination-root');
 
             // Assert
-            expect(root.getElementsByClassName('t-data-grid__pagination').length).toBe(1);
+            expect(root).toBeInTheDocument();
         });
 
-        it('If noTotalRows property is false, header total rows is displayed.', () => {
+        it('If leftAction exists, the left action area is exposed.', () => {
 
             // Arrange
-            render(<TDataGrid {...baseProps} noTotalRows={false}/>);
-            const root = screen.getByTestId('data-grid-root');
+            const buttonText = 'Left Button';
+            const leftAction = <button>{buttonText}</button>;
+            render(<TDataGrid {...baseProps} leftAction={leftAction}/>);
+            const root: HTMLButtonElement = screen.getByText(buttonText);
 
             // Assert
-            expect(root.getElementsByClassName('t-data-grid__header__pagination').length).toBe(1);
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(root.parentElement).toHaveClass('t-action-bar__container__left-action');
         });
 
         it('If leftAction exists, the left action area is exposed.', () => {
 
             // Arrange
-            const leftAction = <button>left button</button>
-            render(<TDataGrid {...baseProps} leftAction={leftAction}/>);
-            const root = screen.getByTestId('data-grid-root');
+            const buttonText = 'Center Button';
+            const centerAction = <button>{buttonText}</button>;
+            render(<TDataGrid {...baseProps} centerAction={centerAction}/>);
+            const root: HTMLButtonElement = screen.getByText(buttonText);
 
             // Assert
-            expect(root.getElementsByClassName('t-data-grid__header__left-action').length).toBe(1);
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(root.parentElement).toHaveClass('t-action-bar__container__center-action');
         });
 
         it('If rightAction exists, the right action area is exposed.', () => {
 
             // Arrange
-            const rightAction = <button>right button</button>
+            const buttonText = 'Right Button';
+            const rightAction = <button>{buttonText}</button>;
             render(<TDataGrid {...baseProps} rightAction={rightAction}/>);
-            const root = screen.getByTestId('data-grid-root');
+            const root = screen.getByText(buttonText);
 
             // Assert
-            expect(root.getElementsByClassName('t-data-grid__header__right-action').length).toBe(1);
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(root.parentElement).toHaveClass('t-action-bar__container__right-action');
         });
 
+
     });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/react/tks/component/data-container/pagination/TPagination.test.tsx b/tests/unit/react/tks/component/data-container/pagination/TPagination.test.tsx
index 3d5a0f0f..d8ae297b 100644
--- a/tests/unit/react/tks/component/data-container/pagination/TPagination.test.tsx
+++ b/tests/unit/react/tks/component/data-container/pagination/TPagination.test.tsx
@@ -4,13 +4,19 @@ import {CSSProperties} from 'react';
 import useInputState from '@/common/hook/UseInputState';
 import TPagination from '~/data-container/pagination/TPagination';
 
+jest.mock('@/common/util/ColorUtil', () => ({
+    shadeColor: jest.fn(() => 'blue'),
+}));
 
 describe('TPagination', () => {
 
+
     const Pagination = (props: {
         totalPages: number,
         className?: string,
         style?: CSSProperties,
+        noJumper?: boolean,
+        jumperText?: string,
     }) => {
         const pageNumber = useInputState<number>(1);
         return (
@@ -26,26 +32,45 @@ describe('TPagination', () => {
         it('Classname prop applies to root', () => {
 
             // Arrange
-            render(<Pagination totalPages={13} className={'class-name-prop'}/>);
+            const testClassName = 'class-name-prop';
+            render(<Pagination totalPages={13} className={testClassName}/>);
             const root = screen.getByRole('navigation');
 
             // Assert
-
-            expect(root)
-                .toHaveClass('class-name-prop');
-
+            expect(root).toHaveClass(testClassName);
         });
 
         it('Style prop applies to root', () => {
 
             // Arrange
-            render(<Pagination totalPages={13} style={{width: '100%'}}/>);
+            const testStyle = {width: '100%'};
+            render(<Pagination totalPages={13} style={testStyle}/>);
             const root = screen.getByRole('navigation');
 
             // Assert
+            expect(root).toHaveStyle(testStyle);
+        });
 
-            expect(root)
-                .toHaveStyle({width: '100%'});
+        it('NoJumper prop applies to root', async () => {
+
+            // Arrange
+            render(<Pagination totalPages={13}/>);
+            const jumperRoot = screen.getByTestId('pagination-jumper-root');
+
+            // Assert
+            expect(jumperRoot).toBeInTheDocument();
+            expect(jumperRoot).toHaveClass('t-pagination__jumper__container');
+        });
+
+        it('jumperText prop applies to root', async () => {
+
+            // Arrange
+            const jumperText = 'Go Page';
+            render(<Pagination jumperText={jumperText} totalPages={13}/>);
+            const jumperButtonElement = screen.getByText(jumperText);
+
+            // Assert
+            expect(jumperButtonElement).toBeInTheDocument();
         });
     });
 
@@ -53,9 +78,10 @@ describe('TPagination', () => {
         it('Using the previous and next buttons allows navigation to the previous or next page.', async () => {
 
             // Arrange
+            const user = userEvent.setup();
             render(<Pagination totalPages={13}/>);
-            const nextPageIcon = screen.getByLabelText('t_navigate_right');
-            const prevPageIcon = screen.getByLabelText('t_navigate_left');
+            const nextPageIcon = screen.getByLabelText('keyboard_arrow_right');
+            const prevPageIcon = screen.getByLabelText('keyboard_arrow_left');
             const page1Button = screen.getByRole('button', {name: '1'});
             const page2Button = screen.getByRole('button', {name: '2'});
 
@@ -67,7 +93,7 @@ describe('TPagination', () => {
 
             // Act
             await act(async () => {
-                await userEvent.click(nextPageIcon);
+                await user.click(nextPageIcon);
             });
 
             // Assert
@@ -78,7 +104,7 @@ describe('TPagination', () => {
 
             // Act
             await act(async () => {
-                await userEvent.click(prevPageIcon);
+                await user.click(prevPageIcon);
             });
 
             // Assert
@@ -92,6 +118,7 @@ describe('TPagination', () => {
         it('When you press the number button, the button is activated', async () => {
 
             // Arrange
+            const user = userEvent.setup();
             render(<Pagination totalPages={13}/>);
             const page1Button = screen.getByRole('button', {name: '1'});
             const page3Button = screen.getByRole('button', {name: '3'});
@@ -104,15 +131,15 @@ describe('TPagination', () => {
 
             // Act
             await act(async () => {
-                await userEvent.click(page3Button);
+                await user.click(page3Button);
             });
 
+            // Assert
             expect(page1Button)
                 .not.toHaveClass('t-pagination__page-container__page__button--active');
             expect(page3Button)
                 .toHaveClass('t-pagination__page-container__page__button--active');
         });
-
     });
 
 
@@ -122,37 +149,34 @@ describe('TPagination', () => {
 
             // Arrange
             render(<Pagination totalPages={13}/>);
-            const previousPageSetIcon = screen.getByLabelText('t_navigate_left_double');
-            const previousPageIcon = screen.getByLabelText('t_navigate_left');
-
+            const previousPageSetIcon = screen.getByLabelText('keyboard_double_arrow_left');
+            const previousPageIcon = screen.getByLabelText('keyboard_arrow_left');
 
             // Assert
-            expect(previousPageSetIcon)
-                .toHaveClass('t-icon--disabled');
-
-            expect(previousPageIcon)
-                .toHaveClass('t-icon--disabled');
+            expect(previousPageSetIcon).toHaveClass('t-icon--disabled');
+            expect(previousPageIcon).toHaveClass('t-icon--disabled');
         });
 
 
         it('When page number is not equal to 1, prev(set) button is not disabled', async () => {
+
             // Arrange
+            const user = userEvent.setup();
             render(<Pagination totalPages={2}/>);
-            const nextPageIcon = screen.getByLabelText('t_navigate_right');
+            const nextPageIcon = screen.getByLabelText('keyboard_arrow_right');
 
             // Act
             await act(async () => {
-                await userEvent.click(nextPageIcon);
+                await user.click(nextPageIcon);
             });
 
-            // Assert
-            const previousPageSetIcon = screen.getByLabelText('t_navigate_left_double');
-            const previousPageIcon = screen.getByLabelText('t_navigate_left');
+            // Arrange
+            const previousPageSetIcon = screen.getByLabelText('keyboard_double_arrow_left');
+            const previousPageIcon = screen.getByLabelText('keyboard_arrow_left');
 
-            expect(previousPageSetIcon)
-                .not.toHaveClass('t-icon--disabled');
-            expect(previousPageIcon)
-                .not.toHaveClass('t-icon--disabled');
+            // Assert
+            expect(previousPageSetIcon).not.toHaveClass('t-icon--disabled');
+            expect(previousPageIcon).not.toHaveClass('t-icon--disabled');
         });
 
 
@@ -160,48 +184,43 @@ describe('TPagination', () => {
 
             // Arrange
             render(<Pagination totalPages={2}/>);
-            const nextPageSetIcon = screen.getByLabelText('t_navigate_right_double');
-            const nextPageIcon = screen.getByLabelText('t_navigate_right');
-
+            const nextPageSetIcon = screen.getByLabelText('keyboard_double_arrow_right');
+            const nextPageIcon = screen.getByLabelText('keyboard_arrow_right');
 
             // Assert
-            expect(nextPageSetIcon)
-                .not.toHaveClass('t-icon--disabled');
-
-            expect(nextPageIcon)
-                .not.toHaveClass('t-icon--disabled');
+            expect(nextPageSetIcon).not.toHaveClass('t-icon--disabled');
+            expect(nextPageIcon).not.toHaveClass('t-icon--disabled');
         });
 
 
         it('When page number is equal to total pages, next(set) button is disabled', async () => {
+
             // Arrange
+            const user = userEvent.setup();
             render(<Pagination totalPages={2}/>);
-            const nextPageIcon = screen.getByLabelText('t_navigate_right');
-            const nextPageSetIcon = screen.getByLabelText('t_navigate_right_double');
+            const nextPageIcon = screen.getByLabelText('keyboard_arrow_right');
+            const nextPageSetIcon = screen.getByLabelText('keyboard_double_arrow_right');
 
             // Act
             await act(async () => {
-                await userEvent.click(nextPageIcon);
+                await user.click(nextPageIcon);
             });
 
             // Assert
-            expect(nextPageSetIcon)
-                .toHaveClass('t-icon--disabled');
-            expect(nextPageIcon)
-                .toHaveClass('t-icon--disabled');
+            expect(nextPageSetIcon).toHaveClass('t-icon--disabled');
+            expect(nextPageIcon).toHaveClass('t-icon--disabled');
         });
 
         it('When page number is not equal to total pages, next(set) button is not disabled', async () => {
+
             // Arrange
             render(<Pagination totalPages={2}/>);
-            const nextPageIcon = screen.getByLabelText('t_navigate_right');
-            const nextPageSetIcon = screen.getByLabelText('t_navigate_right_double');
+            const nextPageIcon = screen.getByLabelText('keyboard_arrow_right');
+            const nextPageSetIcon = screen.getByLabelText('keyboard_double_arrow_right');
 
             // Assert
-            expect(nextPageSetIcon)
-                .not.toHaveClass('t-icon--disabled');
-            expect(nextPageIcon)
-                .not.toHaveClass('t-icon--disabled');
+            expect(nextPageSetIcon).not.toHaveClass('t-icon--disabled');
+            expect(nextPageIcon).not.toHaveClass('t-icon--disabled');
         });
 
         it(
@@ -209,29 +228,26 @@ describe('TPagination', () => {
             async () => {
 
                 // Arrange
+                const user = userEvent.setup();
                 render(<Pagination totalPages={13}/>);
-
-                const nextPageSetIcon = screen.getByLabelText('t_navigate_right_double');
-                const prevPageSetIcon = screen.getByLabelText('t_navigate_left_double');
+                const nextPageSetIcon = screen.getByLabelText('keyboard_double_arrow_right');
+                const prevPageSetIcon = screen.getByLabelText('keyboard_double_arrow_left');
 
                 let pageButtons = screen.getAllByRole('button');
 
                 // Assert
                 expect(pageButtons[0])
                     .toHaveClass('t-pagination__page-container__page__button--active');
-
-                expect(pageButtons[0])
-                    .toHaveAccessibleName('1');
-
+                expect(pageButtons[0]).toHaveAccessibleName('1');
 
                 // Act
                 // next set (range 1-10 -> 11-13, current 1 -> 11)
                 await act(async () => {
-                    await userEvent.click(nextPageSetIcon);
+                    await user.click(nextPageSetIcon);
                 });
+                pageButtons = screen.getAllByRole('button');
 
                 // Assert
-                pageButtons = screen.getAllByRole('button');
                 expect(pageButtons[0])
                     .toHaveClass('t-pagination__page-container__page__button--active');
 
@@ -241,18 +257,17 @@ describe('TPagination', () => {
                 // Act
                 // prev set (range 11-13 -> 1-10, current 11 -> 10)
                 await act(async () => {
-                    await userEvent.click(prevPageSetIcon);
+                    await user.click(prevPageSetIcon);
                 });
+                pageButtons = screen.getAllByRole('button');
 
                 // Assert
-                pageButtons = screen.getAllByRole('button');
                 expect(pageButtons[0])
                     .not.toHaveClass('t-pagination__page-container__page__button--active');
                 expect(pageButtons[9])
                     .toHaveClass('t-pagination__page-container__page__button--active');
                 expect(pageButtons[0])
                     .toHaveAccessibleName('1');
-
             },
         );
 
@@ -261,10 +276,10 @@ describe('TPagination', () => {
             async () => {
 
                 // Arrange
+                const user = userEvent.setup();
                 render(<Pagination totalPages={5}/>);
-
-                const nextPageSetIcon = screen.getByLabelText('t_navigate_right_double');
-                const prevPageSetIcon = screen.getByLabelText('t_navigate_left_double');
+                const nextPageSetIcon = screen.getByLabelText('keyboard_double_arrow_right');
+                const prevPageSetIcon = screen.getByLabelText('keyboard_double_arrow_left');
 
                 let pageButtons = screen.getAllByRole('button');
 
@@ -275,15 +290,14 @@ describe('TPagination', () => {
                 expect(pageButtons[0])
                     .toHaveAccessibleName('1');
 
-
                 // Act
                 // next set (range 1-5 not changed, current 1 to last page 5)
                 await act(async () => {
-                    await userEvent.click(nextPageSetIcon);
+                    await user.click(nextPageSetIcon);
                 });
+                pageButtons = screen.getAllByRole('button');
 
                 // Assert
-                pageButtons = screen.getAllByRole('button');
                 expect(pageButtons[0])
                     .not.toHaveClass('t-pagination__page-container__page__button--active');
                 expect(pageButtons[4])
@@ -295,11 +309,11 @@ describe('TPagination', () => {
                 // Act
                 // next set (range 1-5 not changed, current 5 to first page 1)
                 await act(async () => {
-                    await userEvent.click(prevPageSetIcon);
+                    await user.click(prevPageSetIcon);
                 });
+                pageButtons = screen.getAllByRole('button');
 
                 // Assert
-                pageButtons = screen.getAllByRole('button');
                 expect(pageButtons[0])
                     .toHaveClass('t-pagination__page-container__page__button--active');
                 expect(pageButtons[4])
@@ -307,10 +321,121 @@ describe('TPagination', () => {
 
                 expect(pageButtons[0])
                     .toHaveAccessibleName('1');
-
             },
         );
+    });
+
+    describe('Jumper', () => {
+
+        it('Jumper area allows input and button click', async () => {
+
+            // Arrange
+            const user = userEvent.setup();
+            const testPageNumber = '7';
+            render(<Pagination totalPages={13}/>);
+            const jumperButtonElement = screen.getByText('바로가기');
+            const numberFieldElement = screen.getByTestId('number-field-input-root');
 
+            // Act
+            await act(async () => {
+                await user.click(numberFieldElement);
+                await user.clear(numberFieldElement);
+                await user.keyboard(testPageNumber);
+                await user.click(jumperButtonElement);
+            });
+            const activePageNumberButton = screen.getByText(testPageNumber);
+
+            // Assert
+            expect(activePageNumberButton)
+                .toHaveClass('t-pagination__page-container__page__button--active');
+        });
+
+        it('If you enter an invalid page number, an error appears in the Number field.', async () => {
+
+            // Arrange
+            const user = userEvent.setup();
+            const invalidNumber = '0';
+            render(<Pagination totalPages={13}/>);
+            const jumperButtonElement = screen.getByText('바로가기');
+            const numberFieldInputElement = screen.getByTestId('number-field-input-root');
+
+            // Act
+            await act(async () => {
+                await user.click(numberFieldInputElement);
+                await user.clear(numberFieldInputElement);
+                await user.keyboard(invalidNumber);
+                await user.click(jumperButtonElement);
+            });
+            const failureElement = screen.getByTestId('number-field-root');
+
+            // Assert
+            expect(failureElement).toHaveClass('t-number-field--failure');
+        });
+
+        it('If you enter an over page number, an error appears in the Number field.', async () => {
+
+            // Arrange
+            const user = userEvent.setup();
+            const invalidNumber = 77;
+            const totalPages = 70;
+            render(<Pagination totalPages={totalPages}/>);
+            const numberFieldInputElement = screen.getByTestId('number-field-input-root');
+
+            // Act
+            await act(async () => {
+                await user.click(numberFieldInputElement);
+                await user.clear(numberFieldInputElement);
+                await user.keyboard(invalidNumber.toString());
+            });
+            const inputElement: HTMLInputElement = screen.getByTestId('number-field-input-root');
+            const typedNumber = Number(inputElement.value);
+
+            // Assert
+            expect(totalPages > typedNumber).toBeTruthy();
+        });
+
+        it('If the page number changes, the jumper number field number also changes.', async () => {
+
+            // Arrange
+            const user = userEvent.setup();
+            const targetNumberPage = '7';
+            render(<Pagination totalPages={13}/>);
+            const targetPageNumberElement = screen.getByText(targetNumberPage);
+
+            // Act
+            await act(async () => {
+                await user.click(targetPageNumberElement);
+            });
+            const numberFieldInputElement: HTMLInputElement = screen.getByTestId('number-field-input-root');
+
+            // Assert
+            expect(numberFieldInputElement?.value).toBe(targetNumberPage);
+        });
+
+        it('After navigating to a different page, return to a lower page number.', async () => {
+
+            // Arrange
+            const user = userEvent.setup();
+            const targetNumberPage = '7';
+            render(<Pagination totalPages={77}/>);
+            const jumperNumberFieldElement = screen.getByTestId('number-field-input-root');
+            const jumperButtonElement = screen.getByText('바로가기');
+
+            // Act
+            await act(async () => {
+                await user.click(jumperNumberFieldElement);
+                await user.keyboard('70');
+                await user.click(jumperButtonElement);
+                await user.clear(jumperNumberFieldElement);
+                await user.click(jumperNumberFieldElement);
+                await user.keyboard(targetNumberPage);
+                await user.click(jumperButtonElement);
+            });
+            const activeNumberElement = screen.getByText(targetNumberPage);
+
+            // Assert
+            expect(activeNumberElement).toHaveClass('t-pagination__page-container__page__button--active');
+        });
 
     });