diff --git a/src/assets/small-spinner.svg b/src/assets/small-spinner.svg
new file mode 100644
index 000000000..282ee98c5
--- /dev/null
+++ b/src/assets/small-spinner.svg
@@ -0,0 +1,12 @@
+<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+  <path fill="currentColor" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
+    <animateTransform attributeType="xml"
+      attributeName="transform"
+      type="rotate"
+      from="0 25 25"
+      to="360 25 25"
+      dur="0.6s"
+      repeatCount="indefinite"/>
+  </path>
+</svg>
\ No newline at end of file
diff --git a/src/components/AwesomeLoadings/SmallSpinner/index.tsx b/src/components/AwesomeLoadings/SmallSpinner/index.tsx
new file mode 100644
index 000000000..f243d9340
--- /dev/null
+++ b/src/components/AwesomeLoadings/SmallSpinner/index.tsx
@@ -0,0 +1,7 @@
+import styles from './styles.module.scss'
+import { ReactComponent as SmallSpinner } from '../../../assets/small-spinner.svg'
+
+const Loading = () => {
+  return <SmallSpinner className={styles.container} />
+}
+export default Loading
diff --git a/src/components/AwesomeLoadings/SmallSpinner/styles.module.scss b/src/components/AwesomeLoadings/SmallSpinner/styles.module.scss
new file mode 100644
index 000000000..a9f665e94
--- /dev/null
+++ b/src/components/AwesomeLoadings/SmallSpinner/styles.module.scss
@@ -0,0 +1,6 @@
+@import '../../../styles/variables.module';
+
+.container {
+  margin: 40px auto;
+  color: var(--primary-color);
+}
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss b/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss
index e1bb4608d..bebabef4f 100644
--- a/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss
+++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.module.scss
@@ -8,6 +8,14 @@
   }
 }
 
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex: 1;
+}
+
 .noRecords {
   display: flex;
   background: #fff;
@@ -25,7 +33,6 @@
   gap: 16px;
   font-size: 16px;
   white-space: nowrap;
-  overflow: hidden;
   margin-bottom: 1rem;
 
   @media screen and (max-width: $mobileBreakPoint) {
@@ -144,11 +151,9 @@
 }
 
 .list {
-  max-height: 540px;
+  height: 100%;
   overflow-y: auto;
   scroll-snap-type: y mandatory;
-
-  & > div {
-    scroll-snap-align: center;
-  }
+  display: flex;
+  flex-direction: column;
 }
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx b/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx
index ecacdd4fb..2508e6a8f 100644
--- a/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx
+++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx
@@ -6,11 +6,12 @@ import CloseIcon from '../../../assets/modal_close.png'
 import { TransactionRGBPPDigestContent } from './TransactionRGBPPDigestContent'
 import { explorerService } from '../../../services/ExplorerService'
 import { TransactionLeapDirection } from '../../RGBPP/types'
+import SmallSpinner from '../../AwesomeLoadings/SmallSpinner'
 
 const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Function; hash: string }) => {
   const { t } = useTranslation()
 
-  const { data, isFetched } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash))
+  const { data, isFetched, isLoading } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash))
 
   const direction = useMemo(() => {
     switch (data?.data.leapDirection) {
@@ -25,25 +26,30 @@ const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Fun
     }
   }, [data])
 
-  if (isFetched && data?.data) {
-    return (
-      <div className={styles.container}>
-        <div className={styles.header}>
-          <div className={styles.left}>
-            <span>{t('address.transaction_rgbpp_digest')}</span>
-            {direction !== TransactionLeapDirection.NONE && (
-              <span className={styles.leap}>{t(`address.leap_${direction}`)}</span>
-            )}
-          </div>
-          <button onClick={() => onClickClose()} type="button" className={styles.buttonClose}>
-            <img src={CloseIcon} alt="close icon" className={styles.closeIcon} />
-          </button>
+  return (
+    <div className={styles.container}>
+      {isLoading ? (
+        <div style={{ margin: 'auto', width: '100%', display: 'flex' }}>
+          <SmallSpinner />
         </div>
-        <TransactionRGBPPDigestContent hash={hash} digest={data?.data} isFetched={isFetched} />
-      </div>
-    )
-  }
-  return null
+      ) : (
+        <>
+          <div className={styles.header}>
+            <div className={styles.left}>
+              <span>{t('address.transaction_rgbpp_digest')}</span>
+              {direction !== TransactionLeapDirection.NONE && (
+                <span className={styles.leap}>{t(`address.leap_${direction}`)}</span>
+              )}
+            </div>
+            <button onClick={() => onClickClose()} type="button" className={styles.buttonClose}>
+              <img src={CloseIcon} alt="close icon" className={styles.closeIcon} />
+            </button>
+          </div>
+          <TransactionRGBPPDigestContent hash={hash} digest={data?.data} isFetched={isFetched} />
+        </>
+      )}
+    </div>
+  )
 }
 
 export default TransactionRGBPPDigestModal
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss b/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss
index 14338168e..e165ada8e 100644
--- a/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss
+++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss
@@ -4,20 +4,25 @@
   background-color: #fff;
   padding: 20px 40px;
   width: 75%;
-  margin: 15% auto;
+  max-height: 80%;
+  top: 50%;
+  left: 50%;
+  gap: 10px;
+  transform: translate(-50%, -50%);
   border-radius: 4px;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
 
   @media screen and (max-width: $mobileBreakPoint) {
     width: 90%;
     padding: 16px;
-    margin: 178px auto;
   }
 }
 
 .header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
 
   .left {
     display: flex;