diff --git a/package-lock.json b/package-lock.json
index 68579bd3b..939977086 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "xverse-web-extension",
-  "version": "0.11.6",
+  "version": "0.12.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "xverse-web-extension",
-      "version": "0.11.6",
+      "version": "0.12.0",
       "dependencies": {
         "@react-spring/web": "^9.6.1",
         "@secretkeylabs/xverse-core": "^1.0.0",
diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx
index d27cee9d3..42a9383c0 100644
--- a/src/app/screens/ordinalDetail/index.tsx
+++ b/src/app/screens/ordinalDetail/index.tsx
@@ -130,18 +130,18 @@ const RowContainer = styled.div((props) => ({
   flexDirection: 'row',
 }));
 
-const ColumnContainer = styled.div((props) => ({
+const ColumnContainer = styled.div({
   display: 'flex',
   alignItems: 'flex-start',
   flexDirection: 'column',
   width: '100%',
-}));
+});
 
-const Row = styled.div((props) => ({
+const Row = styled.div({
   display: 'flex',
   justifyContent: 'space-between',
   flexDirection: 'row',
-}));
+});
 
 const MintLimitContainer = styled.div((props) => ({
   marginLeft: props.theme.spacing(30),
@@ -299,10 +299,8 @@ function OrdinalDetailScreen() {
   }, [selectedOrdinal?.content_type]);
 
   useEffect(() => {
-    if (textContent) {
-      if (textContent.includes('brc-20')) {
-        setIsBrc20Ordinal(true);
-      }
+    if (textContent?.includes('brc-20')) {
+      setIsBrc20Ordinal(true);
     }
   }, [textContent]);
 
@@ -317,6 +315,7 @@ function OrdinalDetailScreen() {
       url: chrome.runtime.getURL('options.html#/nft-dashboard/ordinal-detail'),
     });
   };
+
   const showAlert = () => {
     setshowSendOridnalsAlert(true);
   };
@@ -343,79 +342,6 @@ function OrdinalDetailScreen() {
     window.open(`https://www.ord.io/${selectedOrdinal?.number}`);
   };
 
-  const showBrc20OrdinalDetail = (isGallery: boolean) => {
-    const regex = /”/g;
-    const validBrcContentValue = textContent.replace(regex, '"');
-    const content = JSON.parse(validBrcContentValue);
-    if (content.op === 'mint') {
-      return (
-        <ColumnContainer>
-          <OrdinalAttributeComponent title={t('AMOUNT_TO_MINT')} value={content.amt} />
-          {!isGallery && (
-          <OrdinalAttributeComponent
-            title={t('OWNED_BY')}
-            value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-              ordinalsAddress.length - 4,
-              ordinalsAddress.length,
-            )}`}
-            showOridnalTag
-            isAddress
-          />
-          )}
-        </ColumnContainer>
-      );
-    }
-    if (content.op === 'transfer') {
-      return (
-        <ColumnContainer>
-          <DetailSection isGallery={isGalleryOpen}>
-            <OrdinalAttributeComponent title={t('AMOUNT_TO_TRANSFER')} value={content.amt} />
-            <OrdinalAttributeComponent
-              title={t('BRC20_TRANSFER_STATUS')}
-              value={isTransferValid}
-              valueColor={isBrcTransferValid(selectedOrdinal!) ? theme.colors.feedback.success : theme.colors.feedback.error}
-              isAddress
-            />
-          </DetailSection>
-          {!isGallery && (
-          <OrdinalAttributeComponent
-            title={t('OWNED_BY')}
-            value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-              ordinalsAddress.length - 4,
-              ordinalsAddress.length,
-            )}`}
-            showOridnalTag
-            isAddress
-          />
-          )}
-        </ColumnContainer>
-      );
-    }
-    if (content.op === 'deploy') {
-      return (
-        <ColumnContainer>
-          <Row>
-            <OrdinalAttributeComponent title={t('TOTAL_SUPPLY')} value={content.max} />
-            <MintLimitContainer>
-              <OrdinalAttributeComponent title={t('MINT_LIMIT')} value={content.lim} />
-            </MintLimitContainer>
-          </Row>
-          {!isGallery && (
-          <OrdinalAttributeComponent
-            title={t('OWNED_BY')}
-            value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
-              ordinalsAddress.length - 4,
-              ordinalsAddress.length,
-            )}`}
-            showOridnalTag
-            isAddress
-          />
-          )}
-        </ColumnContainer>
-      );
-    }
-  };
-
   const ownedByView = (
     <RowContainer>
       <NftOwnedByText>{t('OWNED_BY')}</NftOwnedByText>
@@ -431,11 +357,119 @@ function OrdinalDetailScreen() {
       </OrdinalsTag>
     </RowContainer>
   );
+
+  const ordinalDescriptionData = (
+    <>
+      <DescriptionTile title={t('ID')} value={selectedOrdinal?.id!} />
+      {selectedOrdinal?.content_length && (
+        <DescriptionTile
+          title={t('CONTENT_LENGTH')}
+          value={selectedOrdinal?.content_length.toString()!}
+        />
+      )}
+      {selectedOrdinal?.content_type && (
+        <DescriptionTile title={t('CONTENT_TYPE')} value={selectedOrdinal?.content_type!} />
+      )}
+      {selectedOrdinal?.value && (
+        <DescriptionTile title={t('OUTPUT_VALUE')} value={selectedOrdinal?.value!} />
+      )}
+      {selectedOrdinal?.timestamp && (
+        <DescriptionTile title={t('TIMESTAMP')} value={selectedOrdinal?.timestamp.toString()!} />
+      )}
+      {selectedOrdinal?.genesis_block_height && (
+        <DescriptionTile
+          title={t('GENESIS_HEIGHT')}
+          value={selectedOrdinal?.genesis_block_height.toString()!}
+        />
+      )}
+      {selectedOrdinal?.location && (
+        <DescriptionTile title={t('LOCATION')} value={selectedOrdinal?.location!} />
+      )}
+    </>
+  );
+
+  const showBrc20OrdinalDetail = (isGallery: boolean) => {
+    try {
+      const regex = /”/g;
+      const validBrcContentValue = textContent.replace(regex, '"');
+      const content = JSON.parse(validBrcContentValue);
+
+      switch (content.op) {
+        case 'mint':
+          return (
+            <ColumnContainer>
+              <OrdinalAttributeComponent title={t('AMOUNT_TO_MINT')} value={content.amt} />
+              {!isGallery && (
+              <OrdinalAttributeComponent
+                title={t('OWNED_BY')}
+                value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                  ordinalsAddress.length - 4,
+                  ordinalsAddress.length,
+                )}`}
+                showOridnalTag
+                isAddress
+              />
+              )}
+            </ColumnContainer>
+          );
+        case 'transfer':
+          return (
+            <ColumnContainer>
+              <DetailSection isGallery={isGalleryOpen}>
+                <OrdinalAttributeComponent title={t('AMOUNT_TO_TRANSFER')} value={content.amt} />
+                <OrdinalAttributeComponent
+                  title={t('BRC20_TRANSFER_STATUS')}
+                  value={isTransferValid}
+                  valueColor={isBrcTransferValid(selectedOrdinal!) ? theme.colors.feedback.success : theme.colors.feedback.error}
+                  isAddress
+                />
+              </DetailSection>
+              {!isGallery && (
+              <OrdinalAttributeComponent
+                title={t('OWNED_BY')}
+                value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                  ordinalsAddress.length - 4,
+                  ordinalsAddress.length,
+                )}`}
+                showOridnalTag
+                isAddress
+              />
+              )}
+            </ColumnContainer>
+          );
+        case 'deploy':
+          return (
+            <ColumnContainer>
+              <Row>
+                <OrdinalAttributeComponent title={t('TOTAL_SUPPLY')} value={content.max} />
+                <MintLimitContainer>
+                  <OrdinalAttributeComponent title={t('MINT_LIMIT')} value={content.lim} />
+                </MintLimitContainer>
+              </Row>
+              {!isGallery && (
+              <OrdinalAttributeComponent
+                title={t('OWNED_BY')}
+                value={`${ordinalsAddress.substring(0, 4)}...${ordinalsAddress.substring(
+                  ordinalsAddress.length - 4,
+                  ordinalsAddress.length,
+                )}`}
+                showOridnalTag
+                isAddress
+              />
+              )}
+            </ColumnContainer>
+          );
+        default:
+          return null;
+      }
+    } catch (error) {
+      return isGallery ? ordinalDescriptionData : ownedByView;
+    }
+  };
+
   const extensionView = (
     <ExtensionContainer>
-      <CollectibleText>
-        {isBrc20Ordinal ? t('BRC20_INSCRIPTION') : t('COLLECTIBLE')}
-      </CollectibleText>
+      <CollectibleText>{isBrc20Ordinal ? t('BRC20_INSCRIPTION') : t('COLLECTIBLE')}</CollectibleText>
       <OrdinalTitleText>{`${t('INSCRIPTION')} ${selectedOrdinal?.number}`}</OrdinalTitleText>
       <WebGalleryButton onClick={openInGalleryView}>
         <>
@@ -467,36 +501,6 @@ function OrdinalDetailScreen() {
     </ExtensionContainer>
   );
 
-  const ordinalDescriptionData = (
-    <>
-      <DescriptionTile title={t('ID')} value={selectedOrdinal?.id!} />
-      {selectedOrdinal?.content_length && (
-        <DescriptionTile
-          title={t('CONTENT_LENGTH')}
-          value={selectedOrdinal?.content_length.toString()!}
-        />
-      )}
-      {selectedOrdinal?.content_type && (
-        <DescriptionTile title={t('CONTENT_TYPE')} value={selectedOrdinal?.content_type!} />
-      )}
-      {selectedOrdinal?.value && (
-        <DescriptionTile title={t('OUTPUT_VALUE')} value={selectedOrdinal?.value!} />
-      )}
-      {selectedOrdinal?.timestamp && (
-        <DescriptionTile title={t('TIMESTAMP')} value={selectedOrdinal?.timestamp.toString()!} />
-      )}
-      {selectedOrdinal?.genesis_block_height && (
-        <DescriptionTile
-          title={t('GENESIS_HEIGHT')}
-          value={selectedOrdinal?.genesis_block_height.toString()!}
-        />
-      )}
-      {selectedOrdinal?.location && (
-        <DescriptionTile title={t('LOCATION')} value={selectedOrdinal?.location!} />
-      )}
-    </>
-  );
-
   const galleryView = (
     <Container>
       <BackButtonContainer>
diff --git a/src/app/screens/ordinals/brc20Tile.tsx b/src/app/screens/ordinals/brc20Tile.tsx
index 97d3bcfc4..171f77964 100644
--- a/src/app/screens/ordinals/brc20Tile.tsx
+++ b/src/app/screens/ordinals/brc20Tile.tsx
@@ -53,6 +53,14 @@ const PlaceholderImageContainer = styled.div<ContainerProps>(({
   maxHeight: isGalleryOpen ? (inNftDetail ? 450 : 300) : isSmallImage ? 50 : 150,
 }));
 
+const OrdinalContentText = styled.h1<TextProps>((props) => ({
+  ...props.theme.body_medium_m,
+  color: props.theme.colors.white[0],
+  fontSize: props.inNftSend ? 15 : 'calc(0.8vw + 2vh)',
+  overflow: 'hidden',
+  textAlign: 'center',
+}));
+
 interface TextProps {
   inNftSend?: boolean;
 }
@@ -138,75 +146,88 @@ export default function Brc20Tile(props: Brc20TileProps) {
       </TickerIconContainer>
     );
   }
+
   try {
     const regex = /”/g;
     const validBrcContentValue = brcContent.replace(regex, '"');
     const content = JSON.parse(validBrcContentValue);
-    if (content?.op === 'mint') {
-      return (
-        <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
-          <BRC20Container>
-            <BRC20Text>{t('MINT')}</BRC20Text>
-            {renderFTIcon(content?.tick)}
-            <NumericFormat
-              value={content?.amt}
-              displayType="text"
-              thousandSeparator
-              renderText={(text) => <BRC20Text>{text}</BRC20Text>}
-            />
-            {isNftDashboard && (
-              <OrdinalsTag>
-                <ButtonIcon src={OrdinalsIcon} />
-                <Text>{t('ORDINAL')}</Text>
-              </OrdinalsTag>
-            )}
-          </BRC20Container>
-        </ImageContainer>
-      );
-    }
-    if (content?.op === 'transfer') {
-      return (
-        <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
-          <BRC20Container>
-            <BRC20Text>{t('TRANSFER')}</BRC20Text>
-            {renderFTIcon(content?.tick)}
-            <NumericFormat
-              value={content?.amt}
-              displayType="text"
-              thousandSeparator
-              renderText={(text) => <BRC20Text>{text}</BRC20Text>}
-            />
-            {isNftDashboard && (
-              <OrdinalsTag>
-                <ButtonIcon src={OrdinalsIcon} />
-                <Text>{t('ORDINAL')}</Text>
-              </OrdinalsTag>
-            )}
-          </BRC20Container>
-        </ImageContainer>
-      );
-    }
-    if (content?.op === 'deploy') {
-      return (
-        <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
-          <BRC20Container>
-            <BRC20Text>{t('DEPLOY')}</BRC20Text>
-            {renderFTIcon(content?.tick)}
-            {isNftDashboard && (
-              <OrdinalsTag>
-                <ButtonIcon src={OrdinalsIcon} />
-                <Text>{t('ORDINAL')}</Text>
-              </OrdinalsTag>
-            )}
-          </BRC20Container>
-        </ImageContainer>
-      );
+
+    switch (content?.op) {
+      case 'mint':
+        return (
+          <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
+            <BRC20Container>
+              <BRC20Text>{t('MINT')}</BRC20Text>
+              {renderFTIcon(content?.tick)}
+              <NumericFormat
+                value={content?.amt}
+                displayType="text"
+                thousandSeparator
+                renderText={(text) => <BRC20Text>{text}</BRC20Text>}
+              />
+              {isNftDashboard && (
+                <OrdinalsTag>
+                  <ButtonIcon src={OrdinalsIcon} />
+                  <Text>{t('ORDINAL')}</Text>
+                </OrdinalsTag>
+              )}
+            </BRC20Container>
+          </ImageContainer>
+        );
+      case 'transfer':
+        return (
+          <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
+            <BRC20Container>
+              <BRC20Text>{t('TRANSFER')}</BRC20Text>
+              {renderFTIcon(content?.tick)}
+              <NumericFormat
+                value={content?.amt}
+                displayType="text"
+                thousandSeparator
+                renderText={(text) => <BRC20Text>{text}</BRC20Text>}
+              />
+              {isNftDashboard && (
+                <OrdinalsTag>
+                  <ButtonIcon src={OrdinalsIcon} />
+                  <Text>{t('ORDINAL')}</Text>
+                </OrdinalsTag>
+              )}
+            </BRC20Container>
+          </ImageContainer>
+        );
+      case 'deploy':
+        return (
+          <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
+            <BRC20Container>
+              <BRC20Text>{t('DEPLOY')}</BRC20Text>
+              {renderFTIcon(content?.tick)}
+              {isNftDashboard && (
+                <OrdinalsTag>
+                  <ButtonIcon src={OrdinalsIcon} />
+                  <Text>{t('ORDINAL')}</Text>
+                </OrdinalsTag>
+              )}
+            </BRC20Container>
+          </ImageContainer>
+        );
+      default:
+        return (
+          <PlaceholderImageContainer isSmallImage={isSmallImage} isGalleryOpen={isGalleryOpen}>
+            <img src={PlaceholderImage} alt="ordinal" />
+          </PlaceholderImageContainer>
+        );
     }
-  } catch (error) {
+  } catch (e) {
     return (
-      <PlaceholderImageContainer isSmallImage={isSmallImage} isGalleryOpen={isGalleryOpen}>
-        <img src={PlaceholderImage} alt="ordinal" />
-      </PlaceholderImageContainer>
+      <ImageContainer isSmallImage={isSmallImage} inNftDetail={inNftDetail} isGalleryOpen={isGalleryOpen}>
+        <OrdinalContentText inNftSend={false}>{brcContent}</OrdinalContentText>
+        {isNftDashboard && (
+        <OrdinalsTag>
+          <ButtonIcon src={OrdinalsIcon} />
+          <Text>{t('ORDINAL')}</Text>
+        </OrdinalsTag>
+        )}
+      </ImageContainer>
     );
   }
 }