diff --git a/components/Nft/NftContentRenderer.js b/components/Nft/NftContentRenderer.js
new file mode 100644
index 000000000..88ed06c0a
--- /dev/null
+++ b/components/Nft/NftContentRenderer.js
@@ -0,0 +1,189 @@
+import { useTranslation } from 'next-i18next'
+import Head from 'next/head'
+import { useRef, useEffect } from 'react'
+import ReactPannellum from 'react-pannellum'
+import LoadingGif from '../../public/images/loading.gif'
+import { 
+  needNftAgeCheck, 
+  nftName, 
+  renderLoadingImage,
+  handle18PlusClick
+} from '../../utils/nft'
+
+export default function NftContentRenderer({
+  nft,
+  contentTab,
+  imageUrl,
+  videoUrl,
+  modelUrl,
+  defaultTab,
+  defaultUrl,
+  clUrl,
+  imageStyle,
+  modelAttr,
+  isPanoramic,
+  loaded,
+  errored,
+  setLoaded,
+  setErrored,
+  setShowAgeCheck,
+  classNamePrefix = 'fv-preview',
+  panoramaIds = { image: '1', video: '2' },
+  panoramaSceneIds = { image: 'firstScene', video: 'videoScene' }
+}) {
+  const { t } = useTranslation()
+  const modelViewerRef = useRef(null)
+
+  const clickOn18PlusImage = () => handle18PlusClick(setShowAgeCheck)
+
+  useEffect(() => {
+    const modelViewer = modelViewerRef.current
+    if (!modelViewer || defaultTab !== 'model') return
+
+    const handleLoad = () => {
+      setLoaded(true)
+      setErrored(false)
+    }
+
+    const handleError = () => {
+      setErrored(true)
+    }
+
+    modelViewer.addEventListener('load', handleLoad)
+    modelViewer.addEventListener('error', handleError)
+
+    return () => {
+      modelViewer.removeEventListener('load', handleLoad)
+      modelViewer.removeEventListener('error', handleError)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultTab, modelUrl])
+
+  return (
+    <>
+      {needNftAgeCheck(nft) ? (
+        <img
+          src="/images/nft/18plus.jpg"
+          className={`${classNamePrefix}-age-image`}
+          onClick={clickOn18PlusImage}
+          alt="18 plus content"
+        />
+      ) : (
+        <>
+          {imageUrl && contentTab === 'image' && (
+            <>
+              {renderLoadingImage(errored, loaded, t)}
+              {isPanoramic ? (
+                <ReactPannellum
+                  id={panoramaIds.image}
+                  sceneId={panoramaSceneIds.image}
+                  imageSource={defaultUrl}
+                  config={{
+                    autoLoad: true,
+                    autoRotate: -2
+                  }}
+                  className={`${classNamePrefix}-panorama`}
+                  style={{ display: loaded ? 'inline-block' : 'none' }}
+                />
+              ) : (
+                <img
+                  className={classNamePrefix === 'fv-fullscreen' ? 'fv-fullscreen-media-image' : `${classNamePrefix}-image`}
+                  style={(() => {
+                    if (classNamePrefix === 'fv-fullscreen') {
+                      return {
+                        imageRendering: imageStyle.imageRendering,
+                        filter: imageStyle.filter,
+                        display: loaded ? 'inline-block' : 'none'
+                      }
+                    }
+                    return {
+                      ...imageStyle,
+                      display: loaded ? 'inline-block' : 'none'
+                    }
+                  })()}
+                  src={imageUrl}
+                  onLoad={() => {
+                    setLoaded(true)
+                    setErrored(false)
+                  }}
+                  onError={({ currentTarget }) => {
+                    if (currentTarget.src === imageUrl && imageUrl !== clUrl.image) {
+                      currentTarget.src = clUrl.image
+                    } else {
+                      setErrored(true)
+                    }
+                  }}
+                  alt={nftName(nft)}
+                />
+              )}
+            </>
+          )}
+          
+          {videoUrl && defaultTab === 'video' && (
+            <>
+              {renderLoadingImage(errored, loaded, t)}
+              {isPanoramic ? (
+                <ReactPannellum
+                  id={panoramaIds.video}
+                  sceneId={panoramaSceneIds.video}
+                  imageSource={videoUrl}
+                  config={{
+                    autoLoad: true,
+                    autoRotate: 0
+                  }}
+                  className={`${classNamePrefix}-panorama`}
+                  style={{ display: loaded ? 'inline-block' : 'none' }}
+                />
+              ) : (
+                <video 
+                  autoPlay 
+                  playsInline 
+                  muted 
+                  loop 
+                  controls 
+                  className={`${classNamePrefix}-video`}
+                  style={{ display: loaded ? 'block' : 'none' }}
+                  onLoadedData={() => {
+                    setLoaded(true)
+                    setErrored(false)
+                  }}
+                  onError={() => {
+                    setErrored(true)
+                  }}
+                >
+                  <source src={videoUrl} type="video/mp4" />
+                </video>
+              )}
+            </>
+          )}
+          
+          {modelUrl && defaultTab === 'model' && (
+            <>
+              {renderLoadingImage(errored, loaded, t)}
+              <Head>
+                <script type="module" src="/js/model-viewer.min.js?v=2" defer />
+              </Head>
+              <model-viewer
+                ref={modelViewerRef}
+                className={`model-viewer ${classNamePrefix === 'fv-fullscreen' ? 'fv-fullscreen-model' : ''}`}
+                src={modelUrl}
+                camera-controls
+                auto-rotate
+                ar
+                poster={LoadingGif}
+                autoplay
+                ar-modes="webxr scene-viewer quick-look"
+                style={{ opacity: loaded ? 1 : 0 }}
+                {...modelAttr?.reduce((prev, curr) => {
+                  prev[curr.attribute] = curr.value
+                  return prev
+                }, {})}
+              ></model-viewer>
+            </>
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
diff --git a/components/NftFullScreenViewer.js b/components/NftFullScreenViewer.js
new file mode 100644
index 000000000..aa8dd7688
--- /dev/null
+++ b/components/NftFullScreenViewer.js
@@ -0,0 +1,165 @@
+import { useEffect } from 'react'
+import Head from 'next/head'
+
+import { 
+  nftName, 
+  renderDownloadButton
+} from '../utils/nft'
+
+import { useNftContent } from '../hooks/useNftContent'
+import { FaTimes } from 'react-icons/fa'
+import AgeCheck from './UI/AgeCheck'
+import NftContentRenderer from './Nft/NftContentRenderer'
+import styles from '../styles/components/nftFullScreenViewer.module.scss'
+
+export default function NftFullScreenViewer({ nft, onClose }) {
+  const {
+    contentTab,
+    setContentTab,
+    loaded,
+    setLoaded,
+    errored,
+    setErrored,
+    isPanoramic,
+    showAgeCheck,
+    setShowAgeCheck,
+    imageUrl,
+    videoUrl,
+    audioUrl,
+    modelUrl,
+    clUrl,
+    contentTabList,
+    imageStyle,
+    defaultTab,
+    defaultUrl,
+    modelAttr,
+    t
+  } = useNftContent(nft, { baseStyle: { width: '100%', height: 'auto', maxHeight: '76vh' } })
+
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+    
+    document.body.setAttribute('data-fullscreen-open', 'true')
+
+    return () => {
+      document.body.style.overflow = 'unset'
+      document.body.setAttribute('data-fullscreen-open', 'false')
+    }
+  }, [])
+
+
+  // Reusable button rendering functions
+  const renderTabButtons = (containerClass = '') => (
+    contentTabList.length > 1 && (
+      <div className={`fv-fullscreen-tabs-container ${containerClass}`}>
+        {contentTabList.map(tab => (
+          <button
+            key={tab.value}
+            onClick={() => setContentTab(tab.value)}
+            className={`fv-fullscreen-tab-button ${contentTab === tab.value ? 'fv-fullscreen-tab-button-active' : ''}`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+    )
+  );
+
+  const renderActionButtons = (containerClass = '') => {
+    // Use the actual content URL for download, not the clUrl
+    let downloadUrl = null
+    if (contentTab === 'image' && imageUrl) {
+      downloadUrl = imageUrl
+    } else if (contentTab === 'video' && videoUrl) {
+      downloadUrl = videoUrl
+    } else if (contentTab === 'model' && modelUrl) {
+      downloadUrl = modelUrl
+    } else if (contentTab === 'audio' && audioUrl) {
+      downloadUrl = audioUrl
+    }
+
+    return (
+      <div className={`fv-fullscreen-actions-container ${containerClass}`}>
+        {downloadUrl && renderDownloadButton(downloadUrl, t('tabs.' + contentTab), 'fv-fullscreen-button fv-fullscreen-action-button')}
+        
+        <button
+          onClick={onClose}
+          className="fv-fullscreen-button fv-fullscreen-close-button"
+        >
+          <FaTimes /> Close
+        </button>
+      </div>
+    );
+  };
+
+
+  return (
+    <div className={styles.nftFullScreenView}>
+      <div className="fv-fullscreen-root">
+        <Head>
+          <title>{nftName(nft) || 'NFT Viewer'} - Full Screen</title>
+        </Head>
+        
+        {/* Header with close button and tabs */}
+        <div className="fv-fullscreen-header">
+          <div className="fv-fullscreen-header-left">
+            <h2 className="fv-fullscreen-title">
+              {nftName(nft) || 'NFT Viewer'}
+            </h2>
+            
+            {renderTabButtons()}
+          </div>
+          
+          {renderActionButtons()}
+
+          {/* Mobile buttons row */}
+          <div className="fv-fullscreen-mobile-buttons">
+            {renderTabButtons()}
+            {renderActionButtons()}
+          </div>
+        </div>
+
+        {/* Content Area */}
+        <div className="fv-fullscreen-content">
+          <NftContentRenderer
+            nft={nft}
+            contentTab={contentTab}
+            imageUrl={imageUrl}
+            videoUrl={videoUrl}
+            modelUrl={modelUrl}
+            defaultTab={defaultTab}
+            defaultUrl={defaultUrl}
+            clUrl={clUrl}
+            imageStyle={imageStyle}
+            modelAttr={modelAttr}
+            isPanoramic={isPanoramic}
+            loaded={loaded}
+            errored={errored}
+            setLoaded={setLoaded}
+            setErrored={setErrored}
+            setShowAgeCheck={setShowAgeCheck}
+            classNamePrefix="fv-fullscreen"
+            panoramaIds={{ image: 'fullscreen-panorama', video: 'fullscreen-video-panorama' }}
+            panoramaSceneIds={{ image: 'fullscreenScene', video: 'fullscreenVideoScene' }}
+          />
+        </div>
+
+        {/* Audio player at bottom if applicable */}
+        {defaultTab !== 'model' && defaultTab !== 'video' && audioUrl && (
+          <div className="fv-fullscreen-audio-bar">
+            <div className="fv-fullscreen-audio-row">
+              <audio 
+                src={audioUrl} 
+                controls 
+                className="fv-fullscreen-audio"
+              />
+              {renderDownloadButton(audioUrl, t('tabs.audio'), 'fv-fullscreen-button fv-fullscreen-action-button')}
+            </div>
+          </div>
+        )}
+
+        {showAgeCheck && <AgeCheck setShowAgeCheck={setShowAgeCheck} />}
+      </div>
+    </div>
+  )
+}
diff --git a/components/NftPreview.js b/components/NftPreview.js
index 24cc5c4fa..13be5adca 100644
--- a/components/NftPreview.js
+++ b/components/NftPreview.js
@@ -1,196 +1,62 @@
-import { useState, useEffect } from 'react'
-import { useTranslation } from 'next-i18next'
-import Head from 'next/head'
+import { useState } from 'react'
 
-import { forbid18Plus, stripText } from '../utils'
-import { needNftAgeCheck, nftName, nftUrl } from '../utils/nft'
+import { 
+  renderDownloadButton
+} from '../utils/nft'
 
+import { useNftContent } from '../hooks/useNftContent'
 import Tabs from './Tabs'
-import LoadingGif from '../public/images/loading.gif'
-import { FaCloudDownloadAlt } from 'react-icons/fa'
-import ReactPannellum from 'react-pannellum'
+import { FaExpand } from 'react-icons/fa'
 import AgeCheck from './UI/AgeCheck'
+import NftFullScreenViewer from './NftFullScreenViewer'
+import NftContentRenderer from './Nft/NftContentRenderer'
+import styles from '../styles/components/nftPreview.module.scss'
+
+export default function NftPreview({ nft, setIsHidden }) {
+  const [showFullScreen, setShowFullScreen] = useState(false)
+
+  const {
+    contentTab,
+    setContentTab,
+    loaded,
+    setLoaded,
+    errored,
+    setErrored,
+    isPanoramic,
+    showAgeCheck,
+    setShowAgeCheck,
+    imageUrl,
+    videoUrl,
+    audioUrl,
+    modelUrl,
+    viewerUrl,
+    clUrl,
+    contentTabList,
+    imageStyle,
+    defaultTab,
+    defaultUrl,
+    modelAttr,
+    t
+  } = useNftContent(nft)
+
+  const renderFullScreenButton = () => (
+    <button
+      onClick={() => {
+        setShowFullScreen(true)
+        setIsHidden && setIsHidden(true)
+      }}
+      className="fv-preview-button"
+    >
+      <FaExpand /> Full Screen
+    </button>
+  )
 
-const downloadIcon = (
-  <div style={{ display: 'inline-block', verticalAlign: 'bottom', height: '19px' }}>
-    <FaCloudDownloadAlt />
-  </div>
-)
-
-const isPanorama = (metadata) => {
-  if (!metadata) return false
-
-  // Check name and description for panorama keywords
-  const panoramaKeywords = ['360', 'panorama', 'panoramic', 'equirectangular']
-  const name = metadata.name?.toString().toLowerCase() || ''
-  const description = metadata.description?.toString().toLowerCase() || ''
-
-  // Check if name or description contains panorama keywords
-  const hasPanoramaKeyword = panoramaKeywords.some((keyword) => name.includes(keyword) || description.includes(keyword))
-
-  // Check for specific camera types known for panoramas
-  const panoramaCameras = ['gopro fusion', 'insta360', 'ricoh theta']
-  const hasPanoramaCamera = panoramaCameras.some((camera) => description.includes(camera.toLowerCase()))
-
-  return hasPanoramaKeyword || hasPanoramaCamera
-}
-
-export default function NftPreview({ nft }) {
-  const { t } = useTranslation()
-  const [contentTab, setContentTab] = useState('image')
-  const [loaded, setLoaded] = useState(false)
-  const [errored, setErrored] = useState(false)
-  const [isPanoramic, setIsPanoramic] = useState(false)
-  const [showAgeCheck, setShowAgeCheck] = useState(false)
-
-  const style = {
-    textAlign: 'center',
-    marginTop: '40px',
-    marginBottom: '20px'
-  }
-
-  const loadingImage = () => {
-    if (errored) {
-      return (
-        <div style={style}>
-          {t('general.load-failed')}
-          <br />
-        </div>
-      )
-    } else if (!loaded) {
-      return (
-        <div style={style}>
-          <span className="waiting"></span>
-          <br />
-          {t('general.loading')}
-        </div>
-      )
-    }
-  }
-
-  const imageUrl = nftUrl(nft, 'image')
-  const videoUrl = nftUrl(nft, 'video')
-  const audioUrl = nftUrl(nft, 'audio')
-  const modelUrl = nftUrl(nft, 'model')
-  const viewerUrl = nftUrl(nft, 'viewer')
-
-  let modelState = null
-
-  const clUrl = {
-    image: nftUrl(nft, 'image', 'cl'),
-    video: nftUrl(nft, 'video', 'cl'),
-    audio: nftUrl(nft, 'audio', 'cl'),
-    model: nftUrl(nft, 'model', 'cl')
-  }
-
-  const contentTabList = []
-  if (imageUrl) {
-    contentTabList.push({ value: 'image', label: t('tabs.image') })
-  }
-  if (videoUrl) {
-    contentTabList.push({ value: 'video', label: t('tabs.video') })
-  }
-  if (modelUrl) {
-    contentTabList.push({ value: 'model', label: t('tabs.model') })
-  }
-
-  let imageStyle = { width: '100%', height: 'auto' }
-  if (imageUrl) {
-    if (imageUrl.slice(0, 10) === 'data:image') {
-      imageStyle.imageRendering = 'pixelated'
-    }
-    if (nft.deletedAt) {
-      imageStyle.filter = 'grayscale(1)'
-    }
-  }
-  let errorStyle = { marginTop: '40px' }
-  let defaultTab = contentTab
-  let defaultUrl = clUrl[contentTab]
-  if (!imageUrl && contentTab === 'image') {
-    if (clUrl['video']) {
-      defaultTab = 'video'
-      defaultUrl = clUrl['video']
-    } else if (clUrl['model']) {
-      defaultTab = 'model'
-      defaultUrl = clUrl['model']
-    }
-  }
-
-  //add attributes for the 3D model viewer
-  let modelAttr = []
-  if (nft.metadata && (nft.metadata['3D_attributes'] || nft.metadata['3d_attributes'])) {
-    modelAttr = nft.metadata['3D_attributes'] || nft.metadata['3d_attributes']
-    const supportedAttr = [
-      'environment-image',
-      'exposure',
-      'shadow-intensity',
-      'shadow-softness',
-      'camera-orbit',
-      'camera-target',
-      'skybox-image',
-      'auto-rotate-delay',
-      'rotation-per-second',
-      'field-of-view',
-      'max-camera-orbit',
-      'min-camera-orbit',
-      'max-field-of-view',
-      'min-field-of-view',
-      'disable-zoom',
-      'orbit-sensitivity',
-      'animation-name',
-      'animation-crossfade-duration',
-      'variant-name',
-      'orientation',
-      'scale'
-    ]
-    if (Array.isArray(modelAttr)) {
-      for (let i = 0; i < modelAttr.length; i++) {
-        if (supportedAttr.includes(modelAttr[i].attribute)) {
-          modelAttr[i].value = stripText(modelAttr[i].value)
-        } else {
-          delete modelAttr[i]
-        }
-      }
-    } else if (typeof modelAttr === 'object') {
-      let metaModelAttr = modelAttr
-      modelAttr = []
-      Object.keys(metaModelAttr).forEach((e) => {
-        if (supportedAttr.includes(e)) {
-          modelAttr.push({
-            attribute: e,
-            value: stripText(metaModelAttr[e])
-          })
-        }
-      })
-    }
-  }
-
-  useEffect(() => {
-    if (imageUrl || videoUrl) {
-      const panoramic = isPanorama(nft.metadata)
-      setIsPanoramic(panoramic)
-      if (panoramic) {
-        setLoaded(true)
-      }
-      // if no image, but there is a video, don't show loading spinner
-      if (!imageUrl) {
-        setLoaded(true)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageUrl, videoUrl])
-
-  const clickOn18PlusImage = async () => {
-    const forbid = await forbid18Plus()
-    if (forbid) return
-    setShowAgeCheck(true)
-  }
 
   return (
-    <>
+    <div className={styles.nftPreview}>
       {contentTabList.length > 1 && (
-        <div style={{ height: '31px', marginBottom: '10px' }}>
-          <span className="tabs-inline" style={{ float: 'left' }}>
+        <div className="fv-preview-tabs-container">
+          <span className="tabs-inline fv-preview-tabs-inline">
             <Tabs
               tabList={contentTabList}
               tab={contentTab}
@@ -199,155 +65,83 @@ export default function NftPreview({ nft }) {
               style={{ margin: 0 }}
             />
           </span>
-          <span style={{ float: 'right', padding: '4px 0px' }}>
-            <a href={clUrl[contentTab]} target="_blank" rel="noreferrer">
-              {t('tabs.' + contentTab)} {downloadIcon}
-            </a>
+          <span className="fv-preview-actions-right">
+            {renderFullScreenButton()}
+            {renderDownloadButton(clUrl[contentTab], t('tabs.' + contentTab))}
           </span>
         </div>
       )}
 
-      {needNftAgeCheck(nft) ? (
-        <img
-          src="/images/nft/18plus.jpg"
-          style={{ width: '100%', height: 'auto' }}
-          onClick={clickOn18PlusImage}
-          alt="18 plus content"
-        />
-      ) : (
-        <>
-          {imageUrl && contentTab === 'image' && (
-            <>
-              {loadingImage(nft)}
-              {isPanoramic ? (
-                <ReactPannellum
-                  id="1"
-                  sceneId="firstScene"
-                  imageSource={defaultUrl}
-                  config={{
-                    autoLoad: true,
-                    autoRotate: -2
-                  }}
-                  style={{ width: '100%', aspectRatio: '2/1', display: loaded ? 'inline-block' : 'none' }}
-                />
-              ) : (
-                <img
-                  style={{ ...imageStyle, display: loaded ? 'inline-block' : 'none' }}
-                  src={imageUrl}
-                  onLoad={() => {
-                    setLoaded(true)
-                    setErrored(false)
-                  }}
-                  onError={({ currentTarget }) => {
-                    if (currentTarget.src === imageUrl && imageUrl !== clUrl.image) {
-                      currentTarget.src = clUrl.image
-                    } else {
-                      setErrored(true)
-                    }
-                  }}
-                  alt={nftName(nft)}
-                />
-              )}
-            </>
-          )}
-          {videoUrl && defaultTab === 'video' && (
-            <>
-              {loadingImage(nft)}
-              {isPanoramic ? (
-                <ReactPannellum
-                  id="2"
-                  sceneId="videoScene"
-                  imageSource={videoUrl}
-                  config={{
-                    autoLoad: true,
-                    autoRotate: 0
-                  }}
-                  style={{ width: '100%', aspectRatio: '2/1', display: loaded ? 'inline-block' : 'none' }}
-                />
-              ) : (
-                <video autoPlay playsInline muted loop controls style={{ width: '100%', height: 'auto' }}>
-                  <source src={videoUrl} type="video/mp4" />
-                </video>
-              )}
-            </>
-          )}
-          {modelUrl && defaultTab === 'model' && (
-            <>
-              {modelState === 'loading' && (
-                <div style={style}>
-                  <span className="waiting"></span>
-                  <br />
-                  {t('general.loading')}
-                </div>
-              )}
-              {modelState !== 'ready' && (
-                <>
-                  <Head>
-                    <script type="module" src="/js/model-viewer.min.js?v=2" defer />
-                  </Head>
-                  <model-viewer
-                    className="model-viewer"
-                    src={modelUrl}
-                    camera-controls
-                    auto-rotate
-                    ar
-                    poster={LoadingGif}
-                    autoplay
-                    ar-modes="webxr scene-viewer quick-look"
-                    {...modelAttr?.reduce((prev, curr) => {
-                      prev[curr.attribute] = curr.value
-                      return prev
-                    }, {})}
-                  ></model-viewer>
-                </>
-              )}
-            </>
-          )}
-          {contentTabList.length < 2 && defaultUrl && (
-            <span style={{ padding: '4px 0px' }}>
-              <a href={defaultUrl} target="_blank" rel="noreferrer">
-                {t('tabs.' + defaultTab)}
-              </a>{' '}
-              <a href={defaultUrl} target="_blank" rel="noreferrer">
-                {downloadIcon}
-              </a>
-            </span>
-          )}
-        </>
+      <NftContentRenderer
+        nft={nft}
+        contentTab={contentTab}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+        modelUrl={modelUrl}
+        defaultTab={defaultTab}
+        defaultUrl={defaultUrl}
+        clUrl={clUrl}
+        imageStyle={imageStyle}
+        modelAttr={modelAttr}
+        isPanoramic={isPanoramic}
+        loaded={loaded}
+        errored={errored}
+        setLoaded={setLoaded}
+        setErrored={setErrored}
+        setShowAgeCheck={setShowAgeCheck}
+        classNamePrefix="fv-preview"
+        panoramaIds={{ image: '1', video: '2' }}
+        panoramaSceneIds={{ image: 'firstScene', video: 'videoScene' }}
+      />
+      
+      {contentTabList.length < 2 && defaultUrl && (
+        <span className="fv-preview-action-row">
+          {renderFullScreenButton()}
+          {renderDownloadButton(defaultUrl, t('tabs.' + defaultTab))}
+        </span>
       )}
 
       {defaultTab !== 'model' && defaultTab !== 'video' && audioUrl && (
         <>
-          <audio src={audioUrl} controls style={{ display: 'block', margin: '20px auto' }}></audio>
-          <span style={{ padding: '4px 0px' }}>
-            <a href={clUrl.audio} target="_blank" rel="noreferrer">
-              {t('tabs.audio')} {downloadIcon}
-            </a>
+          <audio src={audioUrl} controls className="fv-preview-audio"></audio>
+          <span className="fv-preview-action-row-center">
+            {renderDownloadButton(clUrl.audio, t('tabs.audio'))}
           </span>
         </>
       )}
       {viewerUrl && (
-        <span style={{ padding: '4px 0px', float: 'right' }}>
+        <span className="fv-preview-action-row-right">
           <a href={viewerUrl} target="_blank" rel="noreferrer">
             {t('general.viewer')}
           </a>
         </span>
       )}
       {!nft.uri && !nft.metadata ? (
-        <div className="center bold" style={errorStyle}>
+        <div className="center bold" style={{ marginTop: '40px' }}>
           {t('general.no-uri')}
         </div>
       ) : (
         <>
           {!(imageUrl || videoUrl || audioUrl || modelUrl) && (
-            <div className="center bold" style={errorStyle}>
+            <div className="center bold" style={{ marginTop: '40px' }}>
               {t('general.no-media')}
             </div>
           )}
         </>
       )}
-      <div style={{ height: '15px' }}></div>
+      <div className="fv-preview-spacer"></div>
       {showAgeCheck && <AgeCheck setShowAgeCheck={setShowAgeCheck} />}
-    </>
+      
+      {/* Full Screen Viewer */}
+      {showFullScreen && (
+        <NftFullScreenViewer 
+          nft={nft} 
+          onClose={() => {
+            setShowFullScreen(false)
+            setIsHidden && setIsHidden(false)
+          }} 
+        />
+      )}
+    </div>
   )
 }
diff --git a/hooks/useNftContent.js b/hooks/useNftContent.js
new file mode 100644
index 000000000..6a9960b8d
--- /dev/null
+++ b/hooks/useNftContent.js
@@ -0,0 +1,71 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'next-i18next'
+import { 
+  isPanorama, 
+  processModelAttributes, 
+  buildContentTabList, 
+  extractNftUrls, 
+  getDefaultTabAndUrl, 
+  buildImageStyle
+} from '../utils/nft'
+
+/**
+ * Custom hook that manages NFT content state and logic
+ * @param {Object} nft - The NFT object
+ * @param {Object} imageStyleOptions - Optional options for buildImageStyle
+ * @returns {Object} NFT content state and computed values
+ */
+export const useNftContent = (nft, imageStyleOptions = {}) => {
+  const { t } = useTranslation()
+  const [contentTab, setContentTab] = useState('image')
+  const [loaded, setLoaded] = useState(true)
+  const [errored, setErrored] = useState(false)
+  const [isPanoramic, setIsPanoramic] = useState(false)
+  const [showAgeCheck, setShowAgeCheck] = useState(false)
+
+  // Extract URLs and build content structures
+  const { imageUrl, videoUrl, audioUrl, modelUrl, viewerUrl, clUrl } = extractNftUrls(nft)
+
+  const contentTabList = buildContentTabList(imageUrl, videoUrl, modelUrl, t)
+  const imageStyle = buildImageStyle(imageUrl, nft, imageStyleOptions)
+  const { defaultTab, defaultUrl } = getDefaultTabAndUrl(contentTab, imageUrl, clUrl)
+  const modelAttr = processModelAttributes(nft)
+
+  // Handle panorama detection and loading state
+  useEffect(() => {
+    // Reset loading state when content changes
+    setLoaded(false)
+    setErrored(false)
+    
+    if (imageUrl || videoUrl) {
+      const panoramic = isPanorama(nft.metadata)
+      setIsPanoramic(panoramic)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageUrl, videoUrl, modelUrl, contentTab])
+
+  return {
+    contentTab,
+    setContentTab,
+    loaded,
+    setLoaded,
+    errored,
+    setErrored,
+    isPanoramic,
+    showAgeCheck,
+    setShowAgeCheck,
+    imageUrl,
+    videoUrl,
+    audioUrl,
+    modelUrl,
+    viewerUrl,
+    clUrl,
+    contentTabList,
+    imageStyle,
+    defaultTab,
+    defaultUrl,
+    modelAttr,
+    t
+  }
+}
+
diff --git a/pages/nft/[[...id]].js b/pages/nft/[[...id]].js
index 85ccc2b4f..ff05a0e5a 100644
--- a/pages/nft/[[...id]].js
+++ b/pages/nft/[[...id]].js
@@ -112,6 +112,7 @@ export default function Nft({ setSignRequest, account, pageMeta, id, selectedCur
   const [isValidDigest, setIsValidDigest] = useState(false)
   const [warnings, setWarnings] = useState([])
   const [rendered, setRendered] = useState(false)
+  const [isHidden, setIsHidden] = useState(false)
 
   useEffect(() => {
     if (!data || !hasJsonMeta(data) || !data.digest) return
@@ -1134,7 +1135,9 @@ export default function Nft({ setSignRequest, account, pageMeta, id, selectedCur
         }
         image={{ file: imageUrl }}
       />
-      <SearchBlock searchPlaceholderText={t('enter-nft-id', { ns: 'nft' })} tab="nft" />
+      <div style={isHidden ? { position: 'relative', zIndex: 0 } : {}}>
+        <SearchBlock searchPlaceholderText={t('enter-nft-id', { ns: 'nft' })} tab="nft" />
+      </div>
       <div className="content-profile">
         {id ? (
           <>
@@ -1155,7 +1158,7 @@ export default function Nft({ setSignRequest, account, pageMeta, id, selectedCur
                         <div className="column-left">
                           {!notFoundInTheNetwork ? (
                             <>
-                              {rendered && <NftPreview nft={data} />}
+                              {rendered && <NftPreview nft={data} setIsHidden={setIsHidden} />}
                               {setAsAvatarButton(data)}
                               {sellButton(data.buyOffers)}
                               {buyButton(data.sellOffers)}
diff --git a/styles/components/NftViewer.scss b/styles/components/NftViewer.scss
new file mode 100644
index 000000000..6b7f797af
--- /dev/null
+++ b/styles/components/NftViewer.scss
@@ -0,0 +1,17 @@
+// Shared styles for both NftPreview and NftFullScreenViewer
+// This mixin is included in both nftFullScreenViewer.module.scss and nftPreview.module.scss
+
+@mixin shared-nft-viewer-styles {
+  .fv-download-icon {
+    display: inline-block;
+    vertical-align: bottom;
+    height: 19px;
+  }
+
+  .fv-loading-container {
+    text-align: center;
+    margin-top: 40px;
+    margin-bottom: 20px;
+  }
+}
+
diff --git a/styles/components/nftFullScreenViewer.module.scss b/styles/components/nftFullScreenViewer.module.scss
new file mode 100644
index 000000000..58d6159ed
--- /dev/null
+++ b/styles/components/nftFullScreenViewer.module.scss
@@ -0,0 +1,226 @@
+@import './NftViewer.scss';
+
+.nftFullScreenView :global {
+  // Shared styles (from NftViewer.scss)
+  @include shared-nft-viewer-styles;
+
+  // Fullscreen-specific styles
+  .fv-fullscreen-root {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.95);
+    z-index: 9999;
+    overflow: hidden;
+  
+    :global(.button-arrow-scroll) {
+      display: none !important;
+    }
+  }
+  
+  .fv-fullscreen-header {
+    position: sticky;
+    top: 80px;
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .fv-fullscreen-header-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+  
+  .fv-fullscreen-tabs-container {
+    display: flex;
+    gap: 10px;
+  }
+  
+  .fv-fullscreen-actions-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+  
+  .fv-fullscreen-button {
+    background-color: transparent;
+    border: 1px solid var(--accent-link);
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    box-sizing: border-box;
+  }
+  
+  .fv-fullscreen-action-button {
+    padding: 8px 16px;
+    min-height: 40px;
+    font-size: 14px;
+    color: white;
+  }
+  
+  .fv-fullscreen-close-button {
+    padding: 8px 16px;
+    min-height: 40px;
+    font-size: 16px;
+    color: white;
+  }
+  
+  .fv-fullscreen-tab-button {
+    padding: 8px 16px;
+    font-size: 14px;
+    border: 1px solid var(--accent-link);
+    border-radius: 4px;
+    background-color: transparent;
+    color: white;
+  }
+  
+  .fv-fullscreen-tab-button-active {
+    background-color: var(--accent-link);
+  }
+  
+  .fv-fullscreen-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 0;
+    overflow: hidden;
+  }
+  
+  .fv-fullscreen-age-image {
+    max-width: 100%;
+    max-height: 76vh;
+    height: auto;
+  }
+  
+  .fv-fullscreen-media-image {
+    padding-top: 60px;
+    max-width: 90vw;
+    max-height: 76vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+  }
+  
+  .fv-fullscreen-panorama {
+    width: 90vw;
+    height: 76vh;
+    max-width: 1200px;
+  }
+  
+  .fv-fullscreen-model {
+    width: 90vw;
+    height: 76vh;
+    max-width: 1200px;
+  }
+  
+  .fv-fullscreen-video {
+    padding-top: 60px;
+    max-width: 90vw;
+    max-height: 76vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+  }
+  
+  .fv-fullscreen-audio-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 20px;
+    backdrop-filter: blur(10px);
+  }
+  
+  .fv-fullscreen-audio-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+  }
+  
+  .fv-fullscreen-audio {
+    max-width: 600px;
+    width: 100%;
+  }
+  
+  .fv-fullscreen-title {
+    color: white;
+    margin: 0;
+    font-size: 24px;
+  }
+  
+  .fv-fullscreen-mobile-buttons {
+    display: none;
+  }
+  
+  @media (max-width: 768px) {
+    .fv-fullscreen-header {
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+    }
+  
+    .fv-fullscreen-header-left {
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+  
+    .fv-fullscreen-header-left .fv-fullscreen-tabs-container {
+      display: none;
+    }
+  
+    .fv-fullscreen-actions-container {
+      display: none;
+    }
+  
+    .fv-fullscreen-mobile-buttons {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: center;
+      gap: 6px;
+      width: 100%;
+    }
+  
+    .fv-fullscreen-mobile-buttons .fv-fullscreen-tabs-container {
+      flex-wrap: nowrap;
+      justify-content: center;
+      gap: 4px;
+      display: flex;
+    }
+  
+    .fv-fullscreen-mobile-buttons .fv-fullscreen-actions-container {
+      justify-content: center;
+      flex-wrap: nowrap;
+      gap: 4px;
+      display: flex;
+    }
+  
+    .fv-fullscreen-tab-button,
+    .fv-fullscreen-button {
+      font-size: 10px;
+      padding: 3px 6px;
+      min-height: 26px;
+      white-space: nowrap;
+      flex-shrink: 1;
+    }
+  
+    .fv-fullscreen-close-button {
+      font-size: 11px;
+    }
+  
+    .fv-fullscreen-title {
+      font-size: 18px !important;
+      margin: 0 0 8px 0 !important;
+    }
+  }  
+}
diff --git a/styles/components/nftPreview.module.scss b/styles/components/nftPreview.module.scss
new file mode 100644
index 000000000..a7812a583
--- /dev/null
+++ b/styles/components/nftPreview.module.scss
@@ -0,0 +1,85 @@
+@import './NftViewer.scss';
+
+.nftPreview :global {
+  // Shared styles (from NftViewer.scss)
+  @include shared-nft-viewer-styles;
+
+  // Preview-specific styles
+  .fv-preview-button {
+    background-color: transparent;
+    color: var(--accent-link);
+    border: 1px solid var(--accent-link);
+    border-radius: 4px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    box-sizing: border-box;
+    text-decoration: none;
+  }
+  
+  .fv-preview-image, .fv-preview-video, .fv-preview-age-image {
+    width: 100%;
+    height: auto;
+  }
+  
+  .fv-preview-panorama {
+    width: 100%;
+    aspect-ratio: 2/1;
+  }
+  
+  .fv-preview-audio {
+    display: block;
+    margin: 20px auto;
+  }
+  
+  .fv-preview-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  
+  .fv-preview-tabs-container {
+    height: 31px;
+    margin-bottom: 10px;
+  }
+  
+  .fv-preview-tabs-inline {
+    float: left;
+  }
+  
+  .fv-preview-actions-right {
+    float: right;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  
+  .fv-preview-action-row {
+    padding: 4px 0px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  
+  .fv-preview-action-row-center {
+    padding: 4px 0px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .fv-preview-action-row-right {
+    padding: 4px 0px;
+    float: right;
+  }
+  
+  .fv-preview-spacer {
+    height: 15px;
+  }
+}
+
diff --git a/utils/nft.js b/utils/nft.js
index 13852f5ca..915ba22fb 100644
--- a/utils/nft.js
+++ b/utils/nft.js
@@ -1,9 +1,11 @@
+import React from 'react'
 import { Buffer } from 'buffer'
-import { stripText, shortName, webSiteName } from '.'
+import { stripText, shortName, webSiteName, forbid18Plus } from '.'
 
 import Link from 'next/link'
 import LinkIcon from '../public/images/link.svg'
 import { amountFormat, shortHash } from './format'
+import { FaCloudDownloadAlt } from 'react-icons/fa'
 
 //partner market places (destinations)
 export const partnerMarketplaces = {
@@ -566,3 +568,188 @@ export const collectionNameText = (data) => {
   }
   return data.collection
 }
+
+// Check if NFT metadata indicates a panorama/360 image
+export const isPanorama = (metadata) => {
+  if (!metadata) return false
+
+  // Check name and description for panorama keywords
+  const panoramaKeywords = ['360', 'panorama', 'panoramic', 'equirectangular']
+  const name = metadata.name?.toString().toLowerCase() || ''
+  const description = metadata.description?.toString().toLowerCase() || ''
+
+  // Check if name or description contains panorama keywords
+  const hasPanoramaKeyword = panoramaKeywords.some((keyword) => name.includes(keyword) || description.includes(keyword))
+
+  // Check for specific camera types known for panoramas
+  const panoramaCameras = ['gopro fusion', 'insta360', 'ricoh theta']
+  const hasPanoramaCamera = panoramaCameras.some((camera) => description.includes(camera.toLowerCase()))
+
+  return hasPanoramaKeyword || hasPanoramaCamera
+}
+
+// Extract and process 3D model attributes from NFT metadata
+export const processModelAttributes = (nft) => {
+  if (!nft.metadata || (!nft.metadata['3D_attributes'] && !nft.metadata['3d_attributes'])) {
+    return []
+  }
+
+  let modelAttr = nft.metadata['3D_attributes'] || nft.metadata['3d_attributes']
+  const supportedAttr = [
+    'environment-image',
+    'exposure',
+    'shadow-intensity',
+    'shadow-softness',
+    'camera-orbit',
+    'camera-target',
+    'skybox-image',
+    'auto-rotate-delay',
+    'rotation-per-second',
+    'field-of-view',
+    'max-camera-orbit',
+    'min-camera-orbit',
+    'max-field-of-view',
+    'min-field-of-view',
+    'disable-zoom',
+    'orbit-sensitivity',
+    'animation-name',
+    'animation-crossfade-duration',
+    'variant-name',
+    'orientation',
+    'scale'
+  ]
+
+  if (Array.isArray(modelAttr)) {
+    const filtered = []
+    for (let i = 0; i < modelAttr.length; i++) {
+      if (modelAttr[i] && supportedAttr.includes(modelAttr[i].attribute)) {
+        filtered.push({
+          attribute: modelAttr[i].attribute,
+          value: stripText(modelAttr[i].value)
+        })
+      }
+    }
+    return filtered
+  } else if (typeof modelAttr === 'object') {
+    const filtered = []
+    Object.keys(modelAttr).forEach((e) => {
+      if (supportedAttr.includes(e)) {
+        filtered.push({
+          attribute: e,
+          value: stripText(modelAttr[e])
+        })
+      }
+    })
+    return filtered
+  }
+
+  return []
+}
+
+// Build content tab list based on available media types
+export const buildContentTabList = (imageUrl, videoUrl, modelUrl, t) => {
+  const contentTabList = []
+  if (imageUrl) {
+    contentTabList.push({ value: 'image', label: t('tabs.image') })
+  }
+  if (videoUrl) {
+    contentTabList.push({ value: 'video', label: t('tabs.video') })
+  }
+  if (modelUrl) {
+    contentTabList.push({ value: 'model', label: t('tabs.model') })
+  }
+  return contentTabList
+}
+
+// Extract all media URLs from NFT
+export const extractNftUrls = (nft) => {
+  return {
+    imageUrl: nftUrl(nft, 'image'),
+    videoUrl: nftUrl(nft, 'video'),
+    audioUrl: nftUrl(nft, 'audio'),
+    modelUrl: nftUrl(nft, 'model'),
+    viewerUrl: nftUrl(nft, 'viewer'),
+    clUrl: {
+      image: nftUrl(nft, 'image', 'cl'),
+      video: nftUrl(nft, 'video', 'cl'),
+      audio: nftUrl(nft, 'audio', 'cl'),
+      model: nftUrl(nft, 'model', 'cl')
+    }
+  }
+}
+
+// Determine default tab and URL when image is not available
+export const getDefaultTabAndUrl = (contentTab, imageUrl, clUrl) => {
+  let defaultTab = contentTab
+  let defaultUrl = clUrl[contentTab]
+  
+  if (!imageUrl && contentTab === 'image') {
+    if (clUrl.video) {
+      defaultTab = 'video'
+      defaultUrl = clUrl.video
+    } else if (clUrl.model) {
+      defaultTab = 'model'
+      defaultUrl = clUrl.model
+    }
+  }
+  
+  return { defaultTab, defaultUrl }
+}
+
+// Build image style object with dynamic properties
+export const buildImageStyle = (imageUrl, nft, options = {}) => {
+  const style = options.baseStyle || {}
+  
+  if (imageUrl) {
+    if (imageUrl.slice(0, 10) === 'data:image') {
+      style.imageRendering = 'pixelated'
+    }
+    if (nft.deletedAt) {
+      style.filter = 'grayscale(1)'
+    }
+  }
+  
+  return style
+}
+
+// Render loading/error state for NFT media
+export const renderLoadingImage = (errored, loaded, t) => {
+  if (errored) {
+    return (
+      <div className="fv-loading-container">
+        {t('general.load-failed')}
+        <br />
+      </div>
+    )
+  } else if (!loaded) {
+    return (
+      <div className="fv-loading-container">
+        <span className="waiting"></span>
+        <br />
+        {t('general.loading')}
+      </div>
+    )
+  }
+  return null
+}
+
+// Handle 18+ content age check click
+export const handle18PlusClick = async (setShowAgeCheck) => {
+  const forbid = await forbid18Plus()
+  if (forbid) return
+  setShowAgeCheck(true)
+}
+
+// Render download button component
+export const renderDownloadButton = (url, label, className = 'fv-preview-button') => {
+  return (
+    <a 
+      href={url} 
+      target="_blank" 
+      rel="noreferrer"
+      className={className}
+    >
+      {label} <FaCloudDownloadAlt />
+    </a>
+  )
+}