diff --git a/packages/ui/src/components/pagination/Pagination.tsx b/packages/ui/src/components/pagination/Pagination.tsx
index 92d0ce03..288e6a25 100644
--- a/packages/ui/src/components/pagination/Pagination.tsx
+++ b/packages/ui/src/components/pagination/Pagination.tsx
@@ -87,139 +87,7 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
 
   const [jumpValue, setJumpValue] = useState('');
   const lastPage = Math.max(Math.ceil(dTotal / pageSize), 1);
-
-  const totalNode = (() => {
-    if (dCompose.includes('total')) {
-      const range: [number, number] = [Math.min((active - 1) * pageSize + 1, dTotal), Math.min(active * pageSize, dTotal)];
-      if (dCustomRender && dCustomRender.total) {
-        return dCustomRender.total(range);
-      } else {
-        return (
-          <div>
-            {t('Pagination', 'Total')} {dTotal} {t('Pagination', 'items')}
-          </div>
-        );
-      }
-    }
-    return null;
-  })();
-
-  const [prevNode, pageNode, nextNode] = (() => {
-    let [prevNode, nextNode]: [React.ReactNode, React.ReactNode] = [null, null];
-    if (dCompose.includes('pages')) {
-      prevNode = (
-        <li
-          {...getButtonRoleAttributes(() => {
-            changeActive(active - 1);
-          }, active === 1)}
-          className={getClassName(`${dPrefix}pagination__button`, {
-            'is-disabled': active === 1,
-            [`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.prev),
-          })}
-          title={t('Pagination', 'Previous page')}
-        >
-          {dCustomRender && dCustomRender.prev ? dCustomRender.prev : <LeftOutlined />}
-        </li>
-      );
-
-      nextNode = (
-        <li
-          {...getButtonRoleAttributes(() => {
-            changeActive(active + 1);
-          }, active === lastPage)}
-          className={getClassName(`${dPrefix}pagination__button`, {
-            'is-disabled': active === lastPage,
-            [`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.next),
-          })}
-          style={{ marginRight: dCompose[dCompose.length - 1] === 'pages' ? 0 : `var(--${dPrefix}pagination-space)` }}
-          title={t('Pagination', 'Next page')}
-        >
-          {dCustomRender && dCustomRender.next ? dCustomRender.next : <RightOutlined />}
-        </li>
-      );
-    }
-    return [
-      prevNode,
-      (page: number) => {
-        if (dCustomRender && dCustomRender.page) {
-          return dCustomRender.page(page);
-        } else {
-          return <div>{page}</div>;
-        }
-      },
-      nextNode,
-    ];
-  })();
-
-  const pageSizeNode = (() => {
-    const list = dPageSizeList.map((size) => ({
-      label: size.toString(),
-      value: size,
-    }));
-
-    return (
-      <DSelect
-        key="page-size"
-        className={`${dPrefix}pagination__page-size`}
-        style={{ marginRight: dCompose[dCompose.length - 1] === 'page-size' ? 0 : undefined }}
-        dList={list}
-        dModel={pageSize}
-        dCustomItem={(item) => (dCustomRender && dCustomRender.pageSize ? dCustomRender.pageSize(item.value) : item.label)}
-        dCustomSelected={(select) => `${select.label}${t('Pagination', ' / Page')}`}
-        onModelChange={(value) => {
-          if (!isNull(value)) {
-            changePageSize(value);
-          }
-        }}
-      />
-    );
-  })();
-
-  const jumpNode = (() => {
-    if (dCompose.includes('jump')) {
-      const jumpInput = (
-        <DInput
-          className={`${dPrefix}pagination__jump-input`}
-          dType="number"
-          dMax={lastPage}
-          dMin={1}
-          dStep={1}
-          dModel={jumpValue}
-          dNumbetButton={!dMini}
-          dInputRender={(el) =>
-            cloneHTMLElement(el, {
-              onKeyDown: (e) => {
-                el.props.onKeyDown?.(e);
-
-                if (e.code === 'Enter') {
-                  e.preventDefault();
-
-                  const val = Number(jumpValue);
-                  if (!isNaN(val)) {
-                    changeActive(val);
-                  }
-                }
-              },
-            })
-          }
-          onModelChange={setJumpValue}
-        />
-      );
-
-      if (dCustomRender && dCustomRender.jump) {
-        return dCustomRender.jump(jumpInput);
-      } else {
-        return (
-          <>
-            <span>{t('Pagination', 'Go')}</span>
-            {jumpInput}
-            <span>{t('Pagination', 'Page')}</span>
-          </>
-        );
-      }
-    }
-    return null;
-  })();
+  const paginationSpace = dMini ? 8 : 16;
 
   return (
     <nav
@@ -232,20 +100,64 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
       role="navigation"
       aria-label={restProps['aria-label'] ?? 'Pagination Navigation'}
     >
-      {dCompose.map((item) => {
+      {dCompose.map((item, index) => {
         if (item === 'total') {
+          const totalNode = (() => {
+            const range: [number, number] = [Math.min((active - 1) * pageSize + 1, dTotal), Math.min(active * pageSize, dTotal)];
+            if (dCustomRender && dCustomRender.total) {
+              return dCustomRender.total(range);
+            } else {
+              return (
+                <div>
+                  {t('Pagination', 'Total')} {dTotal} {t('Pagination', 'items')}
+                </div>
+              );
+            }
+          })();
+
           return (
-            <div
-              key="total"
-              className={`${dPrefix}pagination__total`}
-              style={{ marginRight: dCompose[dCompose.length - 1] === 'total' ? 0 : undefined }}
-            >
+            <div key="total" className={`${dPrefix}pagination__total`} style={{ marginLeft: index === 0 ? undefined : paginationSpace }}>
               {totalNode}
             </div>
           );
         }
 
         if (item === 'pages') {
+          const [prevNode, pageNode, nextNode] = [
+            <li
+              {...getButtonRoleAttributes(() => {
+                changeActive(active - 1);
+              }, active === 1)}
+              className={getClassName(`${dPrefix}pagination__button`, {
+                'is-disabled': active === 1,
+                [`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.prev),
+              })}
+              style={{ marginLeft: index === 0 ? undefined : paginationSpace }}
+              title={t('Pagination', 'Previous page')}
+            >
+              {dCustomRender && dCustomRender.prev ? dCustomRender.prev : <LeftOutlined />}
+            </li>,
+            (page: number) => {
+              if (dCustomRender && dCustomRender.page) {
+                return dCustomRender.page(page);
+              } else {
+                return <div>{page}</div>;
+              }
+            },
+            <li
+              {...getButtonRoleAttributes(() => {
+                changeActive(active + 1);
+              }, active === lastPage)}
+              className={getClassName(`${dPrefix}pagination__button`, {
+                'is-disabled': active === lastPage,
+                [`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.next),
+              })}
+              title={t('Pagination', 'Next page')}
+            >
+              {dCustomRender && dCustomRender.next ? dCustomRender.next : <RightOutlined />}
+            </li>,
+          ];
+
           let pages: (number | 'prev5' | 'next5')[] = [];
 
           if (lastPage <= 7) {
@@ -370,16 +282,75 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
         }
 
         if (item === 'page-size') {
-          return pageSizeNode;
+          const list = dPageSizeList.map((size) => ({
+            label: size.toString(),
+            value: size,
+          }));
+
+          return (
+            <DSelect
+              key="page-size"
+              className={`${dPrefix}pagination__page-size`}
+              style={{ marginLeft: index === 0 ? undefined : paginationSpace }}
+              dList={list}
+              dModel={pageSize}
+              dCustomItem={(item) => (dCustomRender && dCustomRender.pageSize ? dCustomRender.pageSize(item.value) : item.label)}
+              dCustomSelected={(select) => `${select.label}${t('Pagination', ' / Page')}`}
+              onModelChange={(value) => {
+                if (!isNull(value)) {
+                  changePageSize(value);
+                }
+              }}
+            />
+          );
         }
 
         if (item === 'jump') {
+          const jumpNode = (() => {
+            const jumpInput = (
+              <DInput
+                className={`${dPrefix}pagination__jump-input`}
+                dType="number"
+                dMax={lastPage}
+                dMin={1}
+                dStep={1}
+                dModel={jumpValue}
+                dNumbetButton={!dMini}
+                dInputRender={(el) =>
+                  cloneHTMLElement(el, {
+                    onKeyDown: (e) => {
+                      el.props.onKeyDown?.(e);
+
+                      if (e.code === 'Enter') {
+                        e.preventDefault();
+
+                        const val = Number(jumpValue);
+                        if (!isNaN(val)) {
+                          changeActive(val);
+                        }
+                      }
+                    },
+                  })
+                }
+                onModelChange={setJumpValue}
+              />
+            );
+
+            if (dCustomRender && dCustomRender.jump) {
+              return dCustomRender.jump(jumpInput);
+            } else {
+              return (
+                <>
+                  <span>{t('Pagination', 'Go')}</span>
+                  {jumpInput}
+                  <span>{t('Pagination', 'Page')}</span>
+                </>
+              );
+            }
+          })();
+
           return (
-            <div
-              key="jump"
-              className={`${dPrefix}pagination__jump`}
-              style={{ marginRight: dCompose[dCompose.length - 1] === 'jump' ? 0 : undefined }}
-            >
+            <div key="jump" className={`${dPrefix}pagination__jump`} style={{ marginLeft: index === 0 ? undefined : paginationSpace }}>
               {jumpNode}
             </div>
           );
diff --git a/packages/ui/src/styles/components/pagination.scss b/packages/ui/src/styles/components/pagination.scss
index 84abfaa0..f8817254 100644
--- a/packages/ui/src/styles/components/pagination.scss
+++ b/packages/ui/src/styles/components/pagination.scss
@@ -2,8 +2,6 @@
 
 @include b(pagination) {
   --#{$rd-prefix}pagination-size: 32px;
-  --#{$rd-prefix}pagination-space: 16px;
-  --#{$rd-prefix}pagination-button-space: 8px;
 
   display: flex;
   flex-wrap: wrap;
@@ -29,8 +27,6 @@
 
   @include m(mini) {
     --#{$rd-prefix}pagination-size: 24px;
-    --#{$rd-prefix}pagination-space: 8px;
-    --#{$rd-prefix}pagination-button-space: 2px;
 
     @include polyfill-gap(4px, 2px);
 
@@ -66,7 +62,6 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    margin-right: var(--#{$rd-prefix}pagination-space);
     vertical-align: top;
   }
 
@@ -77,7 +72,6 @@
     justify-content: center;
     min-width: var(--#{$rd-prefix}pagination-size);
     height: var(--#{$rd-prefix}pagination-size);
-    margin-right: var(--#{$rd-prefix}pagination-button-space);
     vertical-align: top;
     cursor: pointer;
     user-select: none;
@@ -152,7 +146,6 @@
   @include e(page-size) {
     @include overwrite-component(select) {
       width: auto;
-      margin-right: var(--#{$rd-prefix}pagination-space);
       font-size: inherit;
     }
   }
@@ -161,7 +154,6 @@
     position: relative;
     display: inline-flex;
     align-items: center;
-    margin-right: var(--#{$rd-prefix}pagination-space);
     vertical-align: top;
   }