diff --git a/packages/extension-base/src/koni/api/nft/inscription/index.ts b/packages/extension-base/src/koni/api/nft/inscription/index.ts
index a753e4d32c..fa50604d9b 100644
--- a/packages/extension-base/src/koni/api/nft/inscription/index.ts
+++ b/packages/extension-base/src/koni/api/nft/inscription/index.ts
@@ -50,11 +50,11 @@ export class InscriptionApi extends BaseNftApi {
   }
 
   private parseInsUrl (id: string, type: string) {
-    if (type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/svg') || type.startsWith('model/gltf')) {
+    if (type.startsWith('image/svg') || type.startsWith('model/gltf') || type.startsWith('image/gif')) {
       return this.createIframePreviewUrl(id);
     }
 
-    if (type.startsWith('video/')) {
+    if (type.startsWith('video/') || type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/png') || type.startsWith('image/jpeg') || type.startsWith('image/webp') || type.startsWith('image/gif')) {
       return `https://ordinals.com/content/${id}`;
     }
 
@@ -63,8 +63,7 @@ export class InscriptionApi extends BaseNftApi {
     }
 
     if (type.startsWith('image/')) {
-      return `${HIRO_API.list_of_incriptions}/${id}/content`;
-      // return getPreviewUrl(id);
+      return `https://ordinals.com/content/${id}`;
     }
 
     return undefined;
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
index d82fbef4c6..169d10bc7e 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
@@ -120,11 +120,12 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
     return (
       <NftGalleryWrapper
-        fallbackImage={collectionInfo.image}
+        fallbackImage={{ image: collectionInfo.image }}
         handleOnClick={handleOnClickNft}
         have3dViewer={SHOW_3D_MODELS_CHAIN.includes(nftItem.chain)}
         image={nftItem.image}
         key={`${nftItem.chain}_${nftItem.collectionId}_${nftItem.id}`}
+        nftItem={nftItem}
         routingParams={routingParams}
         title={nftItem.name || nftItem.id}
       />
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
index 84f3b77f63..d09ece8e38 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
@@ -7,7 +7,7 @@ import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import { useGetNftByAccount, useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { reloadCron } from '@subwallet/extension-koni-ui/messaging';
 import { NftGalleryWrapper } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/component/NftGalleryWrapper';
-import { getTotalCollectionItems, INftCollectionDetail } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
+import { ContentType, determineContentType, getContentType, getTotalCollectionItems, INftCollectionDetail } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ActivityIndicator, ButtonProps, Icon, SwList } from '@subwallet/react-ui';
@@ -90,11 +90,13 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const renderNftCollection = useCallback((nftCollection: NftCollection) => {
     const nftList = getNftsByCollection(nftCollection);
 
-    let fallbackImage: string | undefined;
+    let fallbackImage: { image: string; contentType?: ContentType } | undefined;
 
     for (const nft of nftList) { // fallback to any nft image
+      const contentType = determineContentType(getContentType(nft?.properties));
+
       if (nft.image) {
-        fallbackImage = nft.image;
+        fallbackImage = { image: nft.image, contentType: contentType };
         break;
       }
     }
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
index 351c0dead1..49b8d403aa 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
@@ -13,7 +13,7 @@ import useDefaultNavigate from '@subwallet/extension-koni-ui/hooks/router/useDef
 import useGetChainInfo from '@subwallet/extension-koni-ui/hooks/screen/common/useFetchChainInfo';
 import useGetAccountInfoByAddress from '@subwallet/extension-koni-ui/hooks/screen/common/useGetAccountInfoByAddress';
 import InscriptionImage from '@subwallet/extension-koni-ui/Popup/Home/Nfts/component/InscriptionImage';
-import { INftItemDetail, isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
+import { ContentType, determineContentType, getContentType, INftItemDetail, isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { BackgroundIcon, Field, Icon, Image, Logo, ModalContext, SwModal } from '@subwallet/react-ui';
@@ -146,6 +146,87 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     return false;
   }, [ordinalNftItem]);
 
+  const renderAppJsonContent = () => {
+    const ordinalNftDescription = nftItem?.description && isValidJson(nftItem.description)
+      ? JSON.parse(nftItem.description) as Record<string, unknown>
+      : undefined;
+
+    if (!ordinalNftDescription || Object.keys(ordinalNftDescription).length === 0) {
+      return (
+        <Image
+          className={CN({ clickable: nftItem.externalUrl })}
+          fallbackSrc={DefaultLogosMap.default_placeholder}
+          height={358}
+          modelViewerProps={show3DModel ? { ...DEFAULT_MODEL_VIEWER_PROPS, ...CAMERA_CONTROLS_MODEL_VIEWER_PROPS } : undefined}
+          onClick={onImageClick}
+          src={nftItem.image || DefaultLogosMap.default_placeholder}
+          width={show3DModel ? 358 : undefined}
+        />
+      );
+    }
+
+    return (
+      <div className='nft-container'>
+        <pre>
+          <code>
+            {JSON.stringify(ordinalNftDescription, null, 2)}
+          </code>
+        </pre>
+      </div>
+    );
+  };
+
+  const renderNftContent = () => {
+    const contentType = determineContentType(getContentType(nftItem.properties));
+
+    switch (contentType) {
+      case ContentType.Audio:
+        return (
+          <div className='-nft-audio'>
+            <audio controls>
+              <source
+                src={nftItem.image}
+                type={getContentType(nftItem?.properties)}
+              />
+            </audio>
+          </div>
+        );
+
+      case ContentType.AppJson:
+        return renderAppJsonContent();
+
+      case ContentType.TextHTML:
+      case ContentType.ImageSVG:
+      case ContentType.ModelGltf:
+      case ContentType.ImageGIF:
+        return (
+          <div className='-nft-text-html-wrapper'>
+            <iframe
+              className='-nft-text-html'
+              src={nftItem.image}
+            />
+          </div>
+        );
+
+      default:
+        if (!isBRC20Inscription) {
+          return (
+            <Image
+              className={CN({ clickable: nftItem.externalUrl })}
+              fallbackSrc={DefaultLogosMap.default_placeholder}
+              height={358}
+              modelViewerProps={show3DModel ? { ...DEFAULT_MODEL_VIEWER_PROPS, ...CAMERA_CONTROLS_MODEL_VIEWER_PROPS } : undefined}
+              onClick={onImageClick}
+              src={nftItem.image || DefaultLogosMap.default_placeholder}
+              width={show3DModel ? 358 : undefined}
+            />
+          );
+        }
+
+        return null;
+    }
+  };
+
   return (
     <PageWrapper
       className={`${className}`}
@@ -162,23 +243,15 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       >
         <div className={'nft_item_detail__container'}>
           <div className={'nft_item_detail__nft_image'}>
-            {isBRC20Inscription && nftItem.description && (
-              <InscriptionImage
-                alone={true}
-                properties={JSON.parse(nftItem.description) as OrdinalRemarkData}
-              />
-            )}
-            {!isBRC20Inscription && (
-              <Image
-                className={CN({ clickable: nftItem.externalUrl })}
-                fallbackSrc={DefaultLogosMap.default_placeholder}
-                height={358}
-                modelViewerProps={show3DModel ? { ...DEFAULT_MODEL_VIEWER_PROPS, ...CAMERA_CONTROLS_MODEL_VIEWER_PROPS } : undefined}
-                onClick={onImageClick}
-                src={nftItem.image || DefaultLogosMap.default_placeholder}
-                width={show3DModel ? 358 : undefined}
-              />
-            )}
+            <>
+              {isBRC20Inscription && nftItem.description && (
+                <InscriptionImage
+                  alone={true}
+                  properties={JSON.parse(nftItem.description) as OrdinalRemarkData}
+                />
+              )}
+              {renderNftContent()}
+            </>
           </div>
 
           <div className={'nft_item_detail__info_container'}>
@@ -307,6 +380,40 @@ const NftItemDetail = styled(Component)<Props>(({ theme: { token } }: Props) =>
     '.clickable': {
       cursor: 'pointer'
     },
+    '.-nft-audio': {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    '.-nft-text-html': {
+      width: 358,
+      height: 358,
+      border: 'none',
+      overflow: 'hidden'
+    },
+    '.nft-container': {
+      width: 358,
+      height: 358,
+      backgroundColor: token.colorTextTertiary,
+      padding: token.padding,
+      gap: 8,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    },
+    '.__nft-item': {
+      fontSize: token.fontSize,
+      lineHeight: token.lineHeight,
+      color: token.colorTextDark1,
+      justifyContent: 'space-between',
+      display: 'flex',
+      gap: 4
+
+    },
+    '.__nft-item-value': {
+      color: token.colorTextDark4,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
 
     '.nft_item_detail__info_container': {
       display: 'flex',
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx
index 334e107d46..19825bb626 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx
@@ -1,47 +1,38 @@
 // Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { NftItem } from '@subwallet/extension-base/background/KoniTypes';
+import { ContentType, determineContentType, getContentType, isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts';
 import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ActivityIndicator, NftItem as NftItem_ } from '@subwallet/react-ui';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 // @ts-ignore
 import { LazyLoadComponent, LazyLoadImage } from 'react-lazy-load-image-component';
 import styled, { useTheme } from 'styled-components';
 
 interface Props extends ThemeProps {
   title: string;
+  nftItem?: NftItem;
   image: string | undefined;
-  fallbackImage?: string | undefined;
+  fallbackImage?: { image?: string; contentType?: ContentType } | undefined;
   itemCount?: number;
   handleOnClick?: (params?: any) => void;
   routingParams?: any;
   have3dViewer?: boolean;
 }
 
-function Component ({ className = '', fallbackImage, handleOnClick, image, itemCount, routingParams, title }: Props): React.ReactElement<Props> {
+function Component ({ className = '', fallbackImage, handleOnClick, image, itemCount, nftItem, routingParams, title }: Props): React.ReactElement<Props> {
   const { extendToken } = useTheme() as Theme;
 
-  const [showImage, setShowImage] = useState(true);
-  const [showVideo, setShowVideo] = useState(false);
-
   const onClick = useCallback(() => {
     handleOnClick && handleOnClick(routingParams);
   }, [handleOnClick, routingParams]);
 
-  const handleImageError = useCallback(() => {
-    setShowImage(false);
-    setShowVideo(true);
-  }, []);
-
-  const handleVideoError = useCallback(() => {
-    setShowVideo(false);
-  }, []);
-
   const getCollectionImage = useCallback(() => {
     if (image) {
       return image;
-    } else if (fallbackImage) {
-      return fallbackImage;
+    } else if (fallbackImage && fallbackImage.image) {
+      return fallbackImage.image;
     }
 
     return extendToken.defaultImagePlaceholder;
@@ -58,47 +49,119 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
     );
   }, []);
 
-  const getCollectionImageNode = useCallback(() => {
-    if (showImage) {
+  const renderAppJsonContent = () => {
+    const ordinalNftDescription = nftItem?.description && isValidJson(nftItem.description)
+      ? JSON.parse(nftItem.description) as Record<string, unknown>
+      : undefined;
+
+    if (!ordinalNftDescription || Object.keys(ordinalNftDescription).length === 0) {
       return (
         <LazyLoadImage
-          delayTime={10000}
-          height={'100%'}
-          onError={handleImageError}
-          placeholder={loadingPlaceholder()}
-          src={getCollectionImage()}
-          width={'100%'}
+          src={extendToken.defaultImagePlaceholder}
+          visibleByDefault={true}
         />
       );
     }
 
-    if (showVideo) {
-      return (
-        <LazyLoadComponent>
-          <video
-            autoPlay
-            height={'100%'}
-            loop={true}
-            muted
-            onError={handleVideoError}
-            width={'100%'}
-          >
-            <source
-              src={getCollectionImage()}
-              type='video/mp4'
-            />
-          </video>
-        </LazyLoadComponent>
-      );
-    }
-
     return (
-      <LazyLoadImage
-        src={extendToken.defaultImagePlaceholder}
-        visibleByDefault={true}
-      />
+      <div className='nft-container'>
+        <pre>
+          <code>
+            {JSON.stringify(ordinalNftDescription, null, 2)}
+          </code>
+        </pre>
+      </div>
     );
-  }, [extendToken.defaultImagePlaceholder, getCollectionImage, handleImageError, handleVideoError, loadingPlaceholder, showImage, showVideo]);
+  };
+
+  const getCollectionImageNode = () => {
+    let contentType = determineContentType(getContentType(nftItem?.properties));
+    const fallbackContentType = fallbackImage?.contentType;
+
+    if (!contentType) {
+      contentType = fallbackContentType;
+    }
+
+    switch (contentType) {
+      case ContentType.TextHTML:
+      case ContentType.ImageSVG:
+      case ContentType.ImageGIF:
+      case ContentType.ModelGltf:
+        return (
+          <LazyLoadComponent>
+            <div className='-nft-text-html-wrapper'>
+              <iframe
+                className='-nft-text-html'
+                src={getCollectionImage()}
+                title='HTML Inscription Content'
+              />
+            </div>
+          </LazyLoadComponent>
+        );
+
+      case ContentType.Image:
+        return (
+          <LazyLoadImage
+            delayTime={10000}
+            height='100%'
+            placeholder={loadingPlaceholder()}
+            src={getCollectionImage()}
+            width='100%'
+          />
+        );
+
+      case ContentType.Video:
+        return (
+          <LazyLoadComponent>
+            <video
+              autoPlay
+              height='100%'
+              loop={true}
+              muted
+              width='100%'
+            >
+              <source
+                src={getCollectionImage()}
+                type={getContentType(nftItem?.properties)}
+              />
+            </video>
+          </LazyLoadComponent>
+        );
+
+      case ContentType.Audio:
+        return (
+          <LazyLoadComponent>
+            <div className='nft_gallery_wrapper__audio'>
+              <audio
+                autoPlay={false}
+                controls
+                muted
+              >
+                <source
+                  src={getCollectionImage()}
+                  type={getContentType(nftItem?.properties)}
+                />
+              </audio>
+            </div>
+          </LazyLoadComponent>
+        );
+
+      case ContentType.AppJson:
+        return (
+          <LazyLoadComponent>
+            {renderAppJsonContent()}
+          </LazyLoadComponent>
+        );
+
+      default:
+        return (
+          <LazyLoadImage
+            src={getCollectionImage()}
+            visibleByDefault={true}
+          />
+        );
+    }
+  };
 
   return (
     <NftItem_
@@ -120,6 +183,45 @@ export const NftGalleryWrapper = styled(Component)<Props>(({ theme: { token } }:
       overflow: 'hidden'
     },
 
+    '.nft_gallery_wrapper__audio': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: token.padding,
+      height: '100%'
+    },
+
+    '.-nft-text-html': {
+      width: 171,
+      height: 171,
+      border: 'none',
+      overflow: 'hidden'
+    },
+
+    '.nft-container': {
+      width: 171,
+      height: 171,
+      backgroundColor: token.colorTextTertiary,
+      padding: token.paddingXS,
+      gap: 4,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    },
+    '.__nft-item': {
+      fontSize: token.fontSizeXS,
+      lineHeight: token.lineHeightXS,
+      color: token.colorTextDark1,
+      justifyContent: 'space-between',
+      display: 'flex',
+      gap: 2
+
+    },
+    '.__nft-item-value': {
+      color: token.colorTextDark4,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+
     '.nft_gallery_wrapper__loading': {
       width: '100%',
       height: '100%',
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts b/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
index 5e13c300b2..352489011e 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
@@ -15,7 +15,19 @@ export interface INftItemDetail {
   collectionInfo: NftCollection,
   nftItem: NftItem
 }
-
+export enum ContentType {
+  Audio = 'audio',
+  TextHTML = 'text/html',
+  ImageSVG = 'image/svg',
+  ImageGIF = 'image/gif',
+  Video = 'video',
+  Image = 'image',
+  AppJson = 'application/json',
+  ModelGltf = 'model/gltf'
+}
+interface NftItemProperties {
+  [key: string]: unknown;
+}
 // might set perPage based on screen height
 export const NFT_PER_PAGE = 4;
 
@@ -73,3 +85,53 @@ export const isValidJson = (str: string): boolean => {
     return false;
   }
 };
+
+export const getContentType = (nftItemProperties: NftItemProperties | null | undefined): string => {
+  if (nftItemProperties) {
+    const contentTypeEntry = Object.entries(nftItemProperties).find(([attName]) => attName === 'content_type');
+
+    if (contentTypeEntry) {
+      const { value: attValue } = contentTypeEntry[1] as Record<string, string>;
+
+      return attValue;
+    }
+  }
+
+  return '';
+};
+
+export const determineContentType = (contentType: string): ContentType | undefined => {
+  if (contentType.includes(ContentType.Audio)) {
+    return ContentType.Audio;
+  }
+
+  if (contentType.includes(ContentType.TextHTML)) {
+    return ContentType.TextHTML;
+  }
+
+  if (contentType.includes(ContentType.ImageSVG)) {
+    return ContentType.ImageSVG;
+  }
+
+  if (contentType.includes(ContentType.ImageGIF)) {
+    return ContentType.ImageGIF;
+  }
+
+  if (contentType.includes(ContentType.Video)) {
+    return ContentType.Video;
+  }
+
+  if (contentType.includes(ContentType.Image)) {
+    return ContentType.Image;
+  }
+
+  if (contentType.includes(ContentType.AppJson)) {
+    return ContentType.AppJson;
+  }
+
+  if (contentType.includes(ContentType.ModelGltf)) {
+    return ContentType.ModelGltf;
+  }
+
+  return undefined;
+};