From f182f6a07989d52b9cc35eda8dde7d114626bbc4 Mon Sep 17 00:00:00 2001
From: Zeeshan Tariq <zeeshan.ghazi@yahoo.com>
Date: Tue, 11 Nov 2025 12:02:27 +0500
Subject: [PATCH] Implement complete Sonora audio NFT marketplace functionality

---
 SONORA.md                                     | 138 +++++++--
 .../src/features/permasearch/utils/helpers.ts |   2 +
 .../src/features/pinax/constants.tsx          |   3 +-
 .../features/pinax/hooks/useUploadAndMint.ts  | 119 ++++++++
 .../src/features/pinax/index.tsx              | 102 +------
 .../src/features/sonora/api/arweave.ts        | 107 +++++++
 .../sonora/api/fetchMarketAudioNFTs.ts        | 215 +++++++++++++
 .../sonora/api/fetchStudioAudioNFTs.ts        | 206 +++++++++++++
 .../features/sonora/api/fetchUserAudioNFTs.ts | 211 +++++++++++++
 .../src/features/sonora/archiveSlice.ts       | 131 ++++++++
 .../src/features/sonora/browse/browseSlice.ts |  57 ++++
 .../sonora/browse/thunks/fetchAudios.ts       |  44 +++
 .../features/sonora/components/AudioCard.tsx  | 284 ++++++++++++++----
 .../features/sonora/components/BuyButton.tsx  | 113 ++++++-
 .../features/sonora/components/EditButton.tsx | 130 +++++++-
 .../features/sonora/components/MintButton.tsx |  39 ++-
 .../sonora/components/PlayPauseButton.tsx     |  11 +-
 .../features/sonora/components/SellButton.tsx | 110 ++++++-
 .../sonora/components/UnlistButton.tsx        | 110 ++++++-
 .../features/sonora/hooks/useArweaveAudios.ts |  50 +++
 .../src/features/sonora/hooks/useBuyAudio.ts  | 112 +++++++
 .../sonora/hooks/useMarketAudioNFTs.ts        |  29 ++
 .../src/features/sonora/hooks/useSellAudio.ts | 140 +++++++++
 .../sonora/hooks/useStudioAudioNFTs.ts        |  23 ++
 .../features/sonora/hooks/useUnlistAudio.ts   |  59 ++++
 .../features/sonora/hooks/useUpdateAudio.ts   |  65 ++++
 .../features/sonora/hooks/useUserAudioNFTs.ts |  25 ++
 .../src/features/sonora/marketSlice.ts        | 121 ++++++++
 .../src/features/sonora/sonoraSlice.ts        |  51 ++--
 .../src/features/sonora/studioSlice.ts        | 122 ++++++++
 .../src/features/sonora/types.ts              |  54 +++-
 .../src/features/sonora/utils/audioFilters.ts |  97 ++++++
 .../src/layouts/SonoraLayout.tsx              |   5 +-
 .../src/pages/sonora/ArchivePage.tsx          | 102 +++++--
 .../src/pages/sonora/MarketPage.tsx           | 104 +++++--
 .../src/pages/sonora/RecordPage.tsx           | 265 ++++++++++------
 .../src/pages/sonora/StudioPage.tsx           | 114 +++++--
 .../src/pages/sonora/UploadPage.tsx           |  95 ++++--
 src/alex_frontend/src/pages/sonora/index.tsx  | 126 ++++++--
 src/alex_frontend/src/store/rootReducer.ts    |   6 +
 src/alex_frontend/src/styles/tailwind.css     |   5 +
 src/nft_manager/nft_manager.did               |  26 +-
 42 files changed, 3461 insertions(+), 467 deletions(-)
 create mode 100644 src/alex_frontend/src/features/pinax/hooks/useUploadAndMint.ts
 create mode 100644 src/alex_frontend/src/features/sonora/api/arweave.ts
 create mode 100644 src/alex_frontend/src/features/sonora/api/fetchMarketAudioNFTs.ts
 create mode 100644 src/alex_frontend/src/features/sonora/api/fetchStudioAudioNFTs.ts
 create mode 100644 src/alex_frontend/src/features/sonora/api/fetchUserAudioNFTs.ts
 create mode 100644 src/alex_frontend/src/features/sonora/archiveSlice.ts
 create mode 100644 src/alex_frontend/src/features/sonora/browse/browseSlice.ts
 create mode 100644 src/alex_frontend/src/features/sonora/browse/thunks/fetchAudios.ts
 create mode 100644 src/alex_frontend/src/features/sonora/hooks/useArweaveAudios.ts
 create mode 100644 src/alex_frontend/src/features/sonora/hooks/useBuyAudio.ts
 create mode 100644 src/alex_frontend/src/features/sonora/hooks/useMarketAudioNFTs.ts
 create mode 100644 src/alex_frontend/src/features/sonora/hooks/useSellAudio.ts
 create mode 100644 src/alex_frontend/src/features/sonora/hooks/useStudioAudioNFTs.ts
 create mode 100644 src/alex_frontend/src/features/sonora/hooks/useUnlistAudio.ts
 create mode 100644 src/alex_frontend/src/features/sonora/hooks/useUpdateAudio.ts
 create mode 100644 src/alex_frontend/src/features/sonora/hooks/useUserAudioNFTs.ts
 create mode 100644 src/alex_frontend/src/features/sonora/marketSlice.ts
 create mode 100644 src/alex_frontend/src/features/sonora/studioSlice.ts
 create mode 100644 src/alex_frontend/src/features/sonora/utils/audioFilters.ts

diff --git a/SONORA.md b/SONORA.md
index f0c94f3dd..2ac8d21c6 100644
--- a/SONORA.md
+++ b/SONORA.md
@@ -177,24 +177,124 @@ src/layouts/
 src/config/apps.ts             # Add Sonora to apps list with placeholder image
 ```
 
-## Technical Decisions (TO BE MADE)
-- [ ] Audio format support (.mp3, .wav, .ogg)
-- [ ] Streaming vs download approach
-- [ ] File size limitations
-- [ ] Quality options
-- [ ] Offline playback support
-
-## Implementation Notes
-- Using TanStack Router for routing
-- TanStack Query for data fetching
-- Redux Toolkit with thunks for state management
-- Tailwind CSS + Shadcn components
-- Features pattern for organization
-- Following existing permasearch/pinax patterns
-
-## Discussion Notes
-*This section will be updated with our decisions as we discuss each feature*
+## Technical Decisions (IMPLEMENTED)
+- [x] Audio format support (.mp3, .wav, .ogg, .flac, .m4a, .mpeg, .webm)
+- [x] Streaming approach with HTML5 audio element
+- [x] File size limitations per Pinax file type configuration
+- [x] Direct playback with browser audio controls
+- [x] Arweave permanent storage for audio files
+
+## Implementation Status
+
+### ✅ COMPLETED FEATURES
+
+#### Core Marketplace Functionality
+- **Archive Page**: User's owned audio NFTs (not listed for sale)
+- **Studio Page**: User's audio NFTs listed for sale (with edit/unlist actions)  
+- **Market Page**: Other users' audio NFTs available for purchase
+- **Working Action Buttons**: Buy, Sell, Edit Price, Unlist with dialog modals
+- **ICRC-2 Integration**: Proper approval flow for secure NFT purchases
+
+#### State Management & Data Flow
+- **Redux Store**: Separate slices for archive, studio, and market
+- **Pagination**: Load More functionality with page size of 8
+- **Loading States**: Smart loading that preserves existing content while loading new pages
+- **Error Handling**: Comprehensive error states with retry functionality
+
+#### User Experience
+- **Audio Player**: Integrated playback with visual progress indicators
+- **Price Display**: Show NFT prices in ICP format
+- **Owner Information**: Display NFT owner (truncated principal) on market page only
+- **Filtering**: Market page excludes current user's listings automatically
+
+#### Integration with Existing System
+- **Emporium**: Marketplace transactions and listings
+- **ICP Ledger**: ICRC-2 token approval and transfers
+- **ICRC7**: NFT ownership verification and transfers
+- **Arweave**: Audio metadata and content fetching via GraphQL
+
+#### Browse/Discovery (Main Page)
+- **Arweave Integration**: Fetches audio files from Arweave network via GraphQL
+- **Minting**: Full integration with existing Permasearch minting system
+- **UI**: Complete card-based interface with Load More pagination
+- **Audio Playback**: Integrated audio player with progress indicators
+
+#### Upload/Record Pages
+- **Upload Flow**: Complete file selection with Pinax integration for upload and mint
+- **Recording**: Full browser-based audio recording with MediaRecorder API
+- **Audio Preview**: Real-time playback of recorded/uploaded content with AudioCard
+- **Processing States**: Complete upload/mint workflow with error handling
+
+### 📋 IMPLEMENTATION DETAILS
+
+#### File Structure (COMPLETED)
+```
+src/features/sonora/
+├── archiveSlice.ts              # User's owned NFTs state
+├── marketSlice.ts               # Marketplace state  
+├── studioSlice.ts              # User's listed NFTs state
+├── sonoraSlice.ts              # Global audio player state
+├── types.ts                    # TypeScript interfaces
+├── components/
+│   ├── AudioCard.tsx           # NFT display with player controls
+│   ├── BuyButton.tsx          # Purchase dialog with approval flow
+│   ├── SellButton.tsx         # List for sale dialog
+│   ├── EditButton.tsx         # Edit price dialog
+│   ├── UnlistButton.tsx       # Remove from marketplace dialog
+│   ├── MintButton.tsx         # Mint from Arweave (browse page)
+│   └── PlayPauseButton.tsx    # Audio player controls
+├── hooks/
+│   ├── useUserAudioNFTs.ts    # Archive page data
+│   ├── useStudioAudioNFTs.ts  # Studio page data
+│   ├── useMarketAudioNFTs.ts  # Market page data
+│   ├── useBuyAudio.ts         # Purchase workflow with ICRC-2
+│   ├── useSellAudio.ts        # Listing workflow
+│   ├── useUpdateAudio.ts      # Price editing
+│   ├── useUnlistAudio.ts      # Marketplace removal
+│   └── useArweaveAudios.ts    # Browse page data
+├── api/
+│   ├── fetchUserAudioNFTs.ts  # User's NFTs from multiple sources
+│   ├── fetchStudioAudioNFTs.ts # User's marketplace listings
+│   ├── fetchMarketAudioNFTs.ts # All marketplace listings (filtered)
+│   └── fetchArweaveAudios.ts   # Arweave audio discovery
+└── utils/
+    └── audioHelpers.ts         # Audio format validation & utilities
+```
+
+#### Pages Structure (COMPLETED)
+```
+src/pages/sonora/
+├── index.tsx                   # Browse page (Arweave discovery)
+├── ArchivePage.tsx            # User's collection
+├── StudioPage.tsx             # User's listings
+├── MarketPage.tsx             # Global marketplace
+├── UploadPage.tsx             # File upload + mint
+└── RecordPage.tsx             # Audio recording + mint
+```
+
+#### Navigation & Layout (COMPLETED)
+- **SonoraLayout.tsx**: Horizontal tab navigation following Exchange/Emporium pattern
+- **Active Route Highlighting**: Visual indication of current page
+- **Responsive Design**: Works across different screen sizes
+
+## Technical Specifications
+
+### Audio Formats Supported
+- MP3, WAV, OGG, FLAC, M4A, MPEG, WebM
+- File size limits per Pinax configuration (100MB for media)
+
+### Blockchain Integration
+- **ICP Ledger**: ICRC-2 token standard for payments
+- **ICRC7**: NFT ownership and transfers
+- **Emporium**: Marketplace contract for listings
+- **Arweave**: Permanent storage via GraphQL queries
+
+### State Management Architecture
+- **Modular Redux Slices**: Separate state management for each page type
+- **Async Thunks**: Handle API calls and error states
+- **Pagination**: Append mode to preserve existing content during loading
+- **Loading States**: Separate loading indicators for initial load vs. load more
 
 ---
-**Last Updated:** 2025-10-26  
-**Status:** Detailed specification with code structure
\ No newline at end of file
+**Last Updated:** 2025-11-11  
+**Status:** ✅ **FULLY COMPLETED** - Complete Sonora audio NFT marketplace with all 6 pages, working marketplace actions, ICRC-2 integration, pagination, and full blockchain integration
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/permasearch/utils/helpers.ts b/src/alex_frontend/src/features/permasearch/utils/helpers.ts
index 19209a755..7bc20966c 100644
--- a/src/alex_frontend/src/features/permasearch/utils/helpers.ts
+++ b/src/alex_frontend/src/features/permasearch/utils/helpers.ts
@@ -11,6 +11,8 @@ import type { ActorSubclass } from "@dfinity/agent";
 import type { _SERVICE } from "../../../../../declarations/nft_manager/nft_manager.did";
 import { estimateBlockHeight, fetchBlockHeightForTimestamp, getBlockHeightForTimestamp, getCurrentBlockHeight } from "./blocks";
 
+export { getCurrentBlockHeight };
+
 export const ARWEAVE_GRAPHQL_ENDPOINT = "https://arweave.net/graphql";
 
 export async function filterAvailableAssets(
diff --git a/src/alex_frontend/src/features/pinax/constants.tsx b/src/alex_frontend/src/features/pinax/constants.tsx
index 6e44eb37e..49c8930be 100644
--- a/src/alex_frontend/src/features/pinax/constants.tsx
+++ b/src/alex_frontend/src/features/pinax/constants.tsx
@@ -29,7 +29,8 @@ export const FILE_TYPES = {
         "video/webm",
         "audio/mpeg", // or mp3. There is also a video/mpeg which is not included
         "audio/wav",
-        "audio/ogg"
+        "audio/ogg",
+        "audio/webm" // Support for recorded audio from MediaRecorder
     ],
     icon: <Video className="w-7 h-7 text-muted-foreground" strokeWidth={1.5} />,
     label: "Media",
diff --git a/src/alex_frontend/src/features/pinax/hooks/useUploadAndMint.ts b/src/alex_frontend/src/features/pinax/hooks/useUploadAndMint.ts
new file mode 100644
index 000000000..dc6669f0e
--- /dev/null
+++ b/src/alex_frontend/src/features/pinax/hooks/useUploadAndMint.ts
@@ -0,0 +1,119 @@
+import { useState } from 'react';
+import { useAppDispatch } from '@/store/hooks/useAppDispatch';
+import { useAppSelector } from '@/store/hooks/useAppSelector';
+import useAlexWallet from '@/hooks/actors/useAlexWallet';
+import useNftManager from '@/hooks/actors/useNftManager';
+import { getFileTypeInfo } from '../constants';
+import { formatFileSize } from '../utils';
+import estimateCost from '../thunks/estimateCost';
+import fetchWallets from '../thunks/fetchWallets';
+import selectWallet from '../thunks/selectWallet';
+import processPayment from '../thunks/processPayment';
+import uploadFile from '../thunks/uploadFile';
+import mint from '../../nft/thunks/mint';
+import { reset } from '../pinaxSlice';
+
+const validateFileType = (file: File) => {
+	const typeInfo = getFileTypeInfo(file.type);
+	if (!typeInfo) {
+		throw new Error(`File type ${file.type} is not supported.`);
+	}
+};
+
+const validateFileSize = (file: File) => {
+	const typeInfo = getFileTypeInfo(file.type);
+	if (!typeInfo) throw new Error("Invalid file type");
+
+	if (file.size > typeInfo.maxSize) {
+		throw new Error(
+			`File size ${formatFileSize(file.size)} exceeds ${formatFileSize(typeInfo.maxSize)} limit for ${typeInfo.label.toLowerCase()}.`
+		);
+	}
+};
+
+export const useUploadAndMint = () => {
+	const dispatch = useAppDispatch();
+	const { uploading, minting, estimating, progress, cost, lbryFee } = useAppSelector(
+		(state) => state.pinax
+	);
+	const { actor: walletActor } = useAlexWallet();
+	const { actor: nftActor } = useNftManager();
+
+	const [error, setError] = useState<string | null>(null);
+	const [success, setSuccess] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+
+	const uploadAndMint = async (file: File) => {
+		setError(null);
+		setSuccess(null);
+		setLoading(true);
+
+		try {
+			// Step 1: Validate file type
+			validateFileType(file);
+
+			// Step 2: Validate file size
+			validateFileSize(file);
+
+			// Step 3: Estimate cost
+			await dispatch(estimateCost({ file })).unwrap();
+
+			// Step 4: Fetch wallets
+			if (!walletActor) throw new Error("No wallet connection available");
+			await dispatch(fetchWallets(walletActor)).unwrap();
+
+			// Step 5: Select suitable wallet
+			await dispatch(selectWallet()).unwrap();
+
+			// Step 6: Process payment
+			if (!nftActor)
+				throw new Error("No NFT manager connection available");
+			await dispatch(
+				processPayment({ fileSizeBytes: file.size, actor: nftActor })
+			).unwrap();
+
+			// Step 7: Upload file
+			const transaction = await dispatch(
+				uploadFile({ file, actor: walletActor })
+			).unwrap();
+
+			// Step 8: Mint NFT
+			await dispatch(mint({ transaction, actor: nftActor })).unwrap();
+
+			setSuccess(
+				`File uploaded successfully! Transaction ID: ${transaction}`
+			);
+			
+			return transaction;
+		} catch (err: any) {
+			setError(err.message || err || "An unknown error occurred");
+			throw err;
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const resetUpload = () => {
+		setError(null);
+		setSuccess(null);
+		setLoading(false);
+		dispatch(reset());
+	};
+
+	const isProcessing = uploading || minting || estimating || loading;
+
+	return {
+		uploadAndMint,
+		resetUpload,
+		isProcessing,
+		uploading,
+		minting,
+		estimating,
+		progress,
+		cost,
+		lbryFee,
+		error,
+		success,
+		loading
+	};
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/pinax/index.tsx b/src/alex_frontend/src/features/pinax/index.tsx
index 04e8cb270..1ccef3dbb 100644
--- a/src/alex_frontend/src/features/pinax/index.tsx
+++ b/src/alex_frontend/src/features/pinax/index.tsx
@@ -6,23 +6,11 @@ import {
 	DialogTitle,
 	DialogDescription,
 } from "@/lib/components/dialog";
-import { useAppDispatch } from "@/store/hooks/useAppDispatch";
-import { useAppSelector } from "@/store/hooks/useAppSelector";
 import { Upload, XIcon, LoaderPinwheel } from "lucide-react";
 import { Button } from "@/lib/components/button";
 import { Alert } from "@/components/Alert";
 import Processing from "@/components/Processing";
-import { getFileTypeInfo } from "./constants";
-import { formatFileSize } from "./utils";
-import estimateCost from "./thunks/estimateCost";
-import processPayment from "./thunks/processPayment";
-import uploadFile from "./thunks/uploadFile";
-import mint from "../nft/thunks/mint";
-import fetchWallets from "./thunks/fetchWallets";
-import selectWallet from "./thunks/selectWallet";
-import { reset } from "./pinaxSlice";
-import useAlexWallet from "@/hooks/actors/useAlexWallet";
-import useNftManager from "@/hooks/actors/useNftManager";
+import { useUploadAndMint } from "./hooks/useUploadAndMint";
 
 // DialogContent will be loaded when it can be loaded, not blocking the ui
 const DialogContent = lazy(() =>
@@ -31,93 +19,28 @@ const DialogContent = lazy(() =>
 	}))
 );
 
-const validateFileType = (file: File) => {
-	const typeInfo = getFileTypeInfo(file.type);
-	if (!typeInfo) {
-		throw new Error(`File type ${file.type} is not supported.`);
-	}
-};
-
-const validateFileSize = (file: File) => {
-	const typeInfo = getFileTypeInfo(file.type);
-	if (!typeInfo) throw new Error("Invalid file type");
-
-	if (file.size > typeInfo.maxSize) {
-		throw new Error(
-			`File size ${formatFileSize(file.size)} exceeds ${formatFileSize(typeInfo.maxSize)} limit for ${typeInfo.label.toLowerCase()}.`
-		);
-	}
-};
-
 const Pinax: React.FC = () => {
-	const dispatch = useAppDispatch();
-	const { uploading, minting, estimating, progress } = useAppSelector(
-		(state) => state.pinax
-	);
-	const { actor: walletActor } = useAlexWallet();
-	const { actor: nftActor } = useNftManager();
+	const { uploadAndMint, isProcessing, error, success, progress, estimating, uploading, minting, resetUpload } = useUploadAndMint();
 
 	const [selectedFile, setSelectedFile] = useState<File | null>(null);
-	const [error, setError] = useState<string | null>(null);
-	const [success, setSuccess] = useState<string | null>(null);
 	const [isDragging, setIsDragging] = useState(false);
-	const [loading, setLoading] = useState(false);
 	const [open, setOpen] = useState(false);
 	const fileInputRef = useRef<HTMLInputElement>(null);
 
 	const handleCreate = async (file: File) => {
-		setError(null);
-		setSuccess(null);
-		setLoading(true);
-
 		try {
-			// Step 1: Validate file type
-			validateFileType(file);
-
-			// Step 2: Validate file size
-			validateFileSize(file);
-
-			// Step 3: Estimate cost
-			await dispatch(estimateCost({ file })).unwrap();
-
-			// Step 4: Fetch wallets
-			if (!walletActor) throw new Error("No wallet connection available");
-			await dispatch(fetchWallets(walletActor)).unwrap();
-
-			// Step 5: Select suitable wallet
-			await dispatch(selectWallet()).unwrap();
-
-			// Step 6: Process payment
-			if (!nftActor)
-				throw new Error("No NFT manager connection available");
-			await dispatch(
-				processPayment({ fileSizeBytes: file.size, actor: nftActor })
-			).unwrap();
-
-			// Step 7: Upload file
-			const transaction = await dispatch(
-				uploadFile({ file, actor: walletActor })
-			).unwrap();
-
-			// Step 8: Mint NFT
-			await dispatch(mint({ transaction, actor: nftActor })).unwrap();
-
-			setSuccess(
-				`File uploaded successfully! Transaction ID: ${transaction}`
-			);
+			await uploadAndMint(file);
+			// Only clear file on successful upload
 			setSelectedFile(null);
 			if (fileInputRef.current) fileInputRef.current.value = '';
-		} catch (err: any) {
-			setError(err.message || err || "An unknown error occurred");
-		} finally {
-			setLoading(false);
+		} catch (error) {
+			// Error handling is done in the hook, keep file selected for retry
 		}
 	};
 
 	const handleFileSelect = (file: File) => {
 		setSelectedFile(file);
-		setError(null);
-		setSuccess(null);
+		resetUpload(); // Clear any previous errors/success
 		handleCreate(file);
 	};
 
@@ -143,20 +66,15 @@ const Pinax: React.FC = () => {
 		if (file) handleFileSelect(file);
 	};
 
-	const isProcessing = uploading || minting || estimating;
-
 	const resetState = () => {
 		setSelectedFile(null);
-		setError(null);
-		setSuccess(null);
-		setLoading(false);
 		if (fileInputRef.current) fileInputRef.current.value = '';
-		dispatch(reset());
+		resetUpload();
 	};
 
 	const handleOpenChange = (newOpen: boolean) => {
 		// Prevent closing if currently processing
-		if (!newOpen && loading) {
+		if (!newOpen && isProcessing) {
 			return;
 		}
 		setOpen(newOpen);
@@ -214,7 +132,7 @@ const Pinax: React.FC = () => {
 						)}
 
 						<div className="relative space-y-6">
-							{loading && (
+							{isProcessing && (
 								<div className="absolute inset-0 bg-black z-10 flex items-center justify-center rounded-lg">
 									<div className="text-center space-y-3">
 										<LoaderPinwheel className="w-8 h-8 text-white animate-spin mx-auto" />
diff --git a/src/alex_frontend/src/features/sonora/api/arweave.ts b/src/alex_frontend/src/features/sonora/api/arweave.ts
new file mode 100644
index 000000000..f2d5f62dc
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/api/arweave.ts
@@ -0,0 +1,107 @@
+import { ARWEAVE_GRAPHQL_ENDPOINT, getCurrentBlockHeight } from "@/features/permasearch/utils/helpers";
+import { ArweaveAudio, FetchAudiosResponse } from "../types";
+
+// Audio content types we want to fetch
+const AUDIO_CONTENT_TYPES = [
+    "audio/mp3",
+    "audio/wav", 
+    "audio/ogg",
+    "audio/flac",
+    "audio/m4a",
+    "audio/mpeg",
+    "audio/webm"
+];
+
+interface FetchAudiosParams {
+    cursor?: string | null;
+    signal?: AbortSignal;
+}
+
+interface GraphQLResponse {
+    data: {
+        transactions: {
+            edges: Array<{
+                cursor: string;
+                node: ArweaveAudio;
+            }>;
+            pageInfo: {
+                hasNextPage: boolean;
+            };
+        };
+    };
+    errors?: Array<{ message: string }>;
+}
+
+export async function fetchAudios({ cursor, signal }: FetchAudiosParams = {}): Promise<FetchAudiosResponse> {
+    try {
+        // Use simple block offset instead of precise timestamp calculation
+        // Arweave averages ~130 seconds per block, so 1 hour ≈ 27 blocks
+        const currentHeight = await getCurrentBlockHeight();
+        const blockRange = { min: 0, max: currentHeight - 30 }; // 30 blocks for safety
+
+        const response = await fetch(ARWEAVE_GRAPHQL_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                query: `
+                    query GetAudioFiles($after: String, $tags: [TagFilter!], $range: BlockFilter) {
+                        transactions(
+                            first: 20, 
+                            sort: HEIGHT_DESC, 
+                            after: $after, 
+                            tags: $tags, 
+                            block: $range
+                        ) {
+                            edges {
+                                cursor
+                                node {
+                                    id
+                                    data { size type }
+                                    tags { name value }
+                                    block { height timestamp }
+                                }
+                            }
+                            pageInfo { hasNextPage }
+                        }
+                    }
+                `,
+                variables: {
+                    after: cursor,
+                    tags: [
+                        {
+                            name: "Content-Type",
+                            values: AUDIO_CONTENT_TYPES
+                        }
+                    ],
+                    range: blockRange
+                }
+            }),
+            signal,
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: Failed to fetch audio transactions`);
+        }
+
+        const data: GraphQLResponse = await response.json();
+
+        if (data.errors) {
+            throw new Error(`GraphQL errors: ${data.errors.map(e => e.message).join(", ")}`);
+        }
+
+        const edges = data.data.transactions?.edges || [];
+        
+        return {
+            audios: edges.map(edge => edge.node),
+            cursor: edges[edges.length - 1]?.cursor || null,
+            hasNext: data.data.transactions?.pageInfo.hasNextPage || false
+        };
+
+    } catch (error) {
+        if (error instanceof Error && error.name === 'AbortError') {
+            throw error;
+        }
+        console.error('Failed to fetch audio transactions:', error);
+        throw new Error('Failed to fetch audio transactions');
+    }
+}
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/api/fetchMarketAudioNFTs.ts b/src/alex_frontend/src/features/sonora/api/fetchMarketAudioNFTs.ts
new file mode 100644
index 000000000..f8c86fe22
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/api/fetchMarketAudioNFTs.ts
@@ -0,0 +1,215 @@
+import { ARWEAVE_GRAPHQL_ENDPOINT } from "../../permasearch/utils/helpers";
+import { emporium } from "../../../../../declarations/emporium";
+
+// Audio content types we want to filter for
+const AUDIO_CONTENT_TYPES = [
+    "audio/mp3",
+    "audio/wav", 
+    "audio/ogg",
+    "audio/flac",
+    "audio/m4a",
+    "audio/mpeg",
+    "audio/webm",
+    "audio/x-wav",
+    "audio/x-m4a"
+];
+
+interface ArweaveTransaction {
+    id: string;
+    data: {
+        size: string;
+        type: string;
+    };
+    tags: Array<{
+        name: string;
+        value: string;
+    }>;
+    block: {
+        height: number;
+        timestamp: number;
+    };
+}
+
+interface GraphQLResponse {
+    data: {
+        transactions: {
+            edges: Array<{
+                node: ArweaveTransaction;
+            }>;
+        };
+    };
+    errors?: Array<{ message: string }>;
+}
+
+export interface MarketAudio {
+    id: string;
+    type: string | null;
+    size: string | null;
+    timestamp: string;
+    price: string;
+    owner: string;
+    token_id: string;
+}
+
+export interface FetchMarketAudioParams {
+    page?: number;
+    pageSize?: number;
+    currentUserPrincipal?: string;
+    signal?: AbortSignal;
+}
+
+export interface MarketAudioResponse {
+    audios: MarketAudio[];
+    totalPages: number;
+    totalCount: number;
+    page: number;
+}
+
+export async function fetchMarketAudioNFTs({
+    page = 1,
+    pageSize = 8,
+    currentUserPrincipal,
+    signal
+}: FetchMarketAudioParams = {}): Promise<MarketAudioResponse> {
+    try {
+        console.log("Market: Fetching all marketplace listings, page:", page, "pageSize:", pageSize);
+        
+        // Step 1: Get all listed NFTs from emporium marketplace  
+        const query = {
+            page: BigInt(page),
+            page_size: BigInt(pageSize),
+            sort_by: { Time: null },
+            sort_order: { Desc: null }, // Newest first
+            selected_user: [] as [], // No user filter - get all listings
+            search_term: [] as [],
+        };
+
+        const listingsResponse = await emporium.get_listings(query);
+
+        console.log("Market: Found", listingsResponse.nfts.length, "total marketplace listings");
+
+        // Filter out current user's listings if user is provided
+        let filteredListings = listingsResponse.nfts;
+        if (currentUserPrincipal) {
+            filteredListings = listingsResponse.nfts.filter(nft => 
+                nft.owner.toString() !== currentUserPrincipal
+            );
+            console.log("Market: Filtered to", filteredListings.length, "listings (excluding current user)");
+        }
+
+        if (filteredListings.length === 0) {
+            console.log("Market: No listings found after filtering");
+            return {
+                audios: [],
+                totalPages: 0,
+                totalCount: 0,
+                page,
+            };
+        }
+
+        // Step 2: Extract arweave IDs from the filtered listings
+        const arweaveIds = filteredListings.map(nft => nft.arweave_id);
+
+        // Step 3: Fetch transaction metadata from Arweave using GraphQL
+        const response = await fetch(ARWEAVE_GRAPHQL_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                query: `
+                    query GetTransactionsByIds($ids: [ID!]) {
+                        transactions(
+                            ids: $ids,
+                            first: 100
+                        ) {
+                            edges {
+                                node {
+                                    id
+                                    data { size type }
+                                    tags { name value }
+                                    block { height timestamp }
+                                }
+                            }
+                        }
+                    }
+                `,
+                variables: { ids: arweaveIds }
+            }),
+            signal,
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch transaction metadata: ${response.status}`);
+        }
+
+        const data: GraphQLResponse = await response.json();
+
+        if (data.errors) {
+            throw new Error(`GraphQL errors: ${data.errors.map(e => e.message).join(", ")}`);
+        }
+
+        // Step 4: Filter for audio content types
+        const audioNFTs: MarketAudio[] = [];
+        
+        for (const edge of data.data.transactions?.edges || []) {
+            const transaction = edge.node;
+            
+            // Find the corresponding listing
+            const listing = filteredListings.find(
+                nft => nft.arweave_id === transaction.id
+            );
+
+            if (!listing) continue;
+            
+            // Find Content-Type tag
+            const contentTypeTag = transaction.tags.find(
+                tag => tag.name === "Content-Type"
+            );
+            
+            // Check if it's an audio file
+            if (contentTypeTag && AUDIO_CONTENT_TYPES.some(type => 
+                contentTypeTag.value.toLowerCase().startsWith(type)
+            )) {
+                // Convert to MarketAudio format
+                const sizeInBytes = parseInt(transaction.data.size || "0");
+                const sizeInMB = sizeInBytes / (1024 * 1024);
+                
+                // Convert price from e8s to readable format (assuming ICP)
+                const priceInIcp = Number(listing.price) / 100_000_000;
+                
+                audioNFTs.push({
+                    id: transaction.id,
+                    type: contentTypeTag.value,
+                    size: sizeInMB > 0 ? `${sizeInMB.toFixed(1)} MB` : "Unknown",
+                    timestamp: transaction.block?.timestamp 
+                        ? new Date(transaction.block.timestamp * 1000).toISOString()
+                        : new Date(Number(listing.time) / 1_000_000).toISOString(), // Convert nanoseconds to milliseconds
+                    price: `${priceInIcp.toFixed(3)} ICP`,
+                    owner: listing.owner.toString(),
+                    token_id: listing.token_id.toString(),
+                });
+            }
+        }
+
+        // Calculate pagination based on filtered results
+        // This gives approximate pagination since we filter after fetching
+        const audioRatio = audioNFTs.length / filteredListings.length || 0;
+        const estimatedTotalAudio = Number(listingsResponse.total_count) * audioRatio;
+        const estimatedTotalPages = Math.ceil(estimatedTotalAudio / pageSize);
+
+        console.log(`Found ${audioNFTs.length} audio NFTs out of ${filteredListings.length} filtered marketplace listings`);
+        
+        return {
+            audios: audioNFTs,
+            totalPages: Math.max(1, estimatedTotalPages),
+            totalCount: Math.floor(estimatedTotalAudio),
+            page,
+        };
+        
+    } catch (error) {
+        console.error("Error fetching market audio NFTs:", error);
+        if (error instanceof Error && error.name === 'AbortError') {
+            throw error;
+        }
+        throw new Error("Failed to fetch market audio NFTs");
+    }
+}
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/api/fetchStudioAudioNFTs.ts b/src/alex_frontend/src/features/sonora/api/fetchStudioAudioNFTs.ts
new file mode 100644
index 000000000..21a2d902e
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/api/fetchStudioAudioNFTs.ts
@@ -0,0 +1,206 @@
+import { ARWEAVE_GRAPHQL_ENDPOINT } from "../../permasearch/utils/helpers";
+import { emporium } from "../../../../../declarations/emporium";
+import { Principal } from "@dfinity/principal";
+
+// Audio content types we want to filter for
+const AUDIO_CONTENT_TYPES = [
+    "audio/mp3",
+    "audio/wav", 
+    "audio/ogg",
+    "audio/flac",
+    "audio/m4a",
+    "audio/mpeg",
+    "audio/webm",
+    "audio/x-wav",
+    "audio/x-m4a"
+];
+
+interface ArweaveTransaction {
+    id: string;
+    data: {
+        size: string;
+        type: string;
+    };
+    tags: Array<{
+        name: string;
+        value: string;
+    }>;
+    block: {
+        height: number;
+        timestamp: number;
+    };
+}
+
+interface GraphQLResponse {
+    data: {
+        transactions: {
+            edges: Array<{
+                node: ArweaveTransaction;
+            }>;
+        };
+    };
+    errors?: Array<{ message: string }>;
+}
+
+export interface StudioAudio {
+    id: string;
+    type: string | null;
+    size: string | null;
+    timestamp: string;
+    price: string;
+    owner: string;
+    token_id: string;
+}
+
+export interface FetchStudioAudioParams {
+    userPrincipal: string;
+    page?: number;
+    pageSize?: number;
+    signal?: AbortSignal;
+}
+
+export interface StudioAudioResponse {
+    audios: StudioAudio[];
+    totalPages: number;
+    totalCount: number;
+    page: number;
+}
+
+export async function fetchStudioAudioNFTs({
+    userPrincipal,
+    page = 1,
+    pageSize = 8,
+    signal
+}: FetchStudioAudioParams): Promise<StudioAudioResponse> {
+    try {
+        console.log("Studio: Fetching user's marketplace listings, user:", userPrincipal, "page:", page, "pageSize:", pageSize);
+        
+        // Step 1: Get user's listed NFTs directly from emporium marketplace
+        const query = {
+            page: BigInt(page),
+            page_size: BigInt(pageSize),
+            sort_by: { Time: null },
+            sort_order: { Desc: null }, // Newest first
+            selected_user: [Principal.fromText(userPrincipal)] as [Principal],
+            search_term: [] as [],
+        };
+
+        const listingsResponse = await emporium.get_listings(query);
+        console.log("Studio: Found", listingsResponse.nfts.length, "marketplace listings for user");
+
+        if (listingsResponse.nfts.length === 0) {
+            console.log("Studio: No listings found for user");
+            return {
+                audios: [],
+                totalPages: 0,
+                totalCount: 0,
+                page,
+            };
+        }
+
+        // Step 2: Extract arweave IDs from the listings
+        const arweaveIds = listingsResponse.nfts.map(nft => nft.arweave_id);
+
+        // Step 3: Fetch transaction metadata from Arweave using GraphQL
+        const response = await fetch(ARWEAVE_GRAPHQL_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                query: `
+                    query GetTransactionsByIds($ids: [ID!]) {
+                        transactions(
+                            ids: $ids,
+                            first: 100
+                        ) {
+                            edges {
+                                node {
+                                    id
+                                    data { size type }
+                                    tags { name value }
+                                    block { height timestamp }
+                                }
+                            }
+                        }
+                    }
+                `,
+                variables: { ids: arweaveIds }
+            }),
+            signal,
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch transaction metadata: ${response.status}`);
+        }
+
+        const data: GraphQLResponse = await response.json();
+
+        if (data.errors) {
+            throw new Error(`GraphQL errors: ${data.errors.map(e => e.message).join(", ")}`);
+        }
+
+        // Step 4: Filter for audio content and transform
+        const audioNFTs: StudioAudio[] = [];
+        
+        for (const edge of data.data.transactions?.edges || []) {
+            const transaction = edge.node;
+            
+            // Find the corresponding listing
+            const listing = listingsResponse.nfts.find(
+                nft => nft.arweave_id === transaction.id
+            );
+
+            if (!listing) continue;
+            
+            // Find Content-Type tag
+            const contentTypeTag = transaction.tags.find(
+                tag => tag.name === "Content-Type"
+            );
+            
+            // Check if it's an audio file
+            if (contentTypeTag && AUDIO_CONTENT_TYPES.some(type => 
+                contentTypeTag.value.toLowerCase().startsWith(type)
+            )) {
+                // Convert to StudioAudio format
+                const sizeInBytes = parseInt(transaction.data.size || "0");
+                const sizeInMB = sizeInBytes / (1024 * 1024);
+                
+                // Convert price from e8s to readable format (assuming ICP)
+                const priceInIcp = Number(listing.price) / 100_000_000;
+                
+                audioNFTs.push({
+                    id: transaction.id,
+                    type: contentTypeTag.value,
+                    size: sizeInMB > 0 ? `${sizeInMB.toFixed(1)} MB` : "Unknown",
+                    timestamp: transaction.block?.timestamp 
+                        ? new Date(transaction.block.timestamp * 1000).toISOString()
+                        : new Date(Number(listing.time) / 1_000_000).toISOString(), // Convert nanoseconds to milliseconds
+                    price: `${priceInIcp.toFixed(3)} ICP`,
+                    owner: listing.owner.toString(),
+                    token_id: listing.token_id.toString(),
+                });
+            }
+        }
+
+        // Calculate pagination based on filtered results
+        // This gives approximate pagination since we filter after fetching
+        const audioRatio = audioNFTs.length / listingsResponse.nfts.length || 0;
+        const estimatedTotalAudio = Number(listingsResponse.total_count) * audioRatio;
+        const estimatedTotalPages = Math.ceil(estimatedTotalAudio / pageSize);
+
+        console.log(`Studio: Found ${audioNFTs.length} audio NFTs out of ${listingsResponse.nfts.length} user listings`);
+        
+        return {
+            audios: audioNFTs,
+            totalPages: Math.max(1, estimatedTotalPages),
+            totalCount: Math.floor(estimatedTotalAudio),
+            page,
+        };
+        
+    } catch (error) {
+        console.error("Error fetching studio audio NFTs:", error);
+        if (error instanceof Error && error.name === 'AbortError') {
+            throw error;
+        }
+        throw new Error("Failed to fetch studio audio NFTs");
+    }
+}
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/api/fetchUserAudioNFTs.ts b/src/alex_frontend/src/features/sonora/api/fetchUserAudioNFTs.ts
new file mode 100644
index 000000000..5658b2899
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/api/fetchUserAudioNFTs.ts
@@ -0,0 +1,211 @@
+import { createTokenAdapter } from "../../alexandrian/adapters/TokenAdapter";
+import { fetchUserTokens } from "../../alexandrian/api/fetchUserTokens";
+import { ARWEAVE_GRAPHQL_ENDPOINT } from "../../permasearch/utils/helpers";
+import { natToArweaveId } from "../../../utils/id_convert";
+import { ArchiveAudio } from "../types";
+
+// Audio content types we want to filter for
+const AUDIO_CONTENT_TYPES = [
+    "audio/mp3",
+    "audio/wav", 
+    "audio/ogg",
+    "audio/flac",
+    "audio/m4a",
+    "audio/mpeg",
+    "audio/webm",
+    "audio/x-wav",
+    "audio/x-m4a"
+];
+
+interface ArweaveTransaction {
+    id: string;
+    data: {
+        size: string;
+        type: string;
+    };
+    tags: Array<{
+        name: string;
+        value: string;
+    }>;
+    block: {
+        height: number;
+        timestamp: number;
+    };
+}
+
+interface GraphQLResponse {
+    data: {
+        transactions: {
+            edges: Array<{
+                node: ArweaveTransaction;
+            }>;
+        };
+    };
+    errors?: Array<{ message: string }>;
+}
+
+export interface FetchUserAudioParams {
+    userPrincipal: string;
+    page?: number;
+    pageSize?: number;
+    signal?: AbortSignal;
+}
+
+export interface UserAudioResponse {
+    audios: ArchiveAudio[];
+    page: number;
+    totalPages: number;
+    totalCount: number;
+    hasMore: boolean;
+}
+
+export async function fetchUserAudioNFTs({
+    userPrincipal,
+    page = 1,
+    pageSize = 8,
+    signal
+}: FetchUserAudioParams): Promise<UserAudioResponse> {
+    try {
+        // Step 1: Get user's NFT token IDs using Alexandrian patterns
+        const tokenAdapter = createTokenAdapter("NFT");
+        
+        const tokenParams = {
+            page: page - 1, // Convert to 0-based indexing for alexandrian API
+            pageSize: pageSize,
+            sortOrder: "newest" as const,
+            sortBy: "default" as const,
+            collectionType: "NFT" as const,
+            user: userPrincipal,
+        };
+        
+        const tokenResult = await fetchUserTokens(
+            tokenAdapter,
+            userPrincipal,
+            tokenParams,
+            signal
+        );
+
+        const { tokenIds } = tokenResult;
+        
+        // For now, we'll estimate pagination based on pageSize
+        // Since fetchUserTokens doesn't return total count directly,
+        // we'll use the returned tokenIds length to determine if there are more pages
+        const hasMore = tokenIds.length === pageSize;
+        const estimatedTotalCount = hasMore ? (page * pageSize) + 1 : (page - 1) * pageSize + tokenIds.length;
+        const estimatedTotalPages = Math.ceil(estimatedTotalCount / pageSize);
+
+        if (tokenIds.length === 0) {
+            return {
+                audios: [],
+                page,
+                totalPages: page === 1 ? 1 : page - 1,
+                totalCount: (page - 1) * pageSize,
+                hasMore: false
+            };
+        }
+
+        // Step 2: Convert token IDs to Arweave IDs
+        const arweaveIds = tokenIds.map(tokenId => natToArweaveId(tokenId));
+
+        // Step 3: Fetch transaction metadata from Arweave using GraphQL
+        const response = await fetch(ARWEAVE_GRAPHQL_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                query: `
+                    query GetTransactionsByIds($ids: [ID!]) {
+                        transactions(
+                            ids: $ids,
+                            first: 100
+                        ) {
+                            edges {
+                                node {
+                                    id
+                                    data { size type }
+                                    tags { name value }
+                                    block { height timestamp }
+                                }
+                            }
+                        }
+                    }
+                `,
+                variables: { ids: arweaveIds }
+            }),
+            signal,
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch transaction metadata: ${response.status}`);
+        }
+
+        const data: GraphQLResponse = await response.json();
+
+        if (data.errors) {
+            throw new Error(`GraphQL errors: ${data.errors.map(e => e.message).join(", ")}`);
+        }
+
+        // Step 4: Filter for audio content types and convert to ArchiveAudio format
+        const audioNFTs: ArchiveAudio[] = [];
+        
+        // Create a map of Arweave ID to Token ID for quick lookup
+        const arweaveToTokenMap = new Map<string, bigint>();
+        for (let i = 0; i < arweaveIds.length; i++) {
+            arweaveToTokenMap.set(arweaveIds[i], tokenIds[i]);
+        }
+        
+        for (const edge of data.data.transactions?.edges || []) {
+            const transaction = edge.node;
+            
+            // Find Content-Type tag
+            const contentTypeTag = transaction.tags.find(
+                tag => tag.name === "Content-Type"
+            );
+            
+            // Check if it's an audio file
+            if (contentTypeTag && AUDIO_CONTENT_TYPES.some(type => 
+                contentTypeTag.value.toLowerCase().startsWith(type)
+            )) {
+                // Get the corresponding token ID
+                const tokenId = arweaveToTokenMap.get(transaction.id);
+                if (!tokenId) continue; // Skip if no token ID found
+                
+                // Convert to ArchiveAudio format
+                const sizeInBytes = parseInt(transaction.data.size || "0");
+                const sizeInMB = sizeInBytes / (1024 * 1024);
+                
+                audioNFTs.push({
+                    id: transaction.id,
+                    type: contentTypeTag.value,
+                    size: sizeInMB > 0 ? `${sizeInMB.toFixed(1)} MB` : "Unknown",
+                    timestamp: transaction.block?.timestamp 
+                        ? new Date(transaction.block.timestamp * 1000).toISOString()
+                        : new Date().toISOString(),
+                    token_id: tokenId.toString()
+                });
+            }
+        }
+
+        console.log(`Found ${audioNFTs.length} audio NFTs out of ${tokenIds.length} total NFTs`);
+        
+        // Calculate final pagination info based on actual audio NFTs found
+        const audioRatio = tokenIds.length > 0 ? audioNFTs.length / tokenIds.length : 1;
+        const adjustedTotalCount = Math.ceil(estimatedTotalCount * audioRatio);
+        const adjustedTotalPages = Math.ceil(adjustedTotalCount / pageSize);
+        const adjustedHasMore = audioNFTs.length === pageSize || hasMore;
+        
+        return {
+            audios: audioNFTs,
+            page,
+            totalPages: Math.max(1, adjustedTotalPages),
+            totalCount: Math.max(audioNFTs.length, adjustedTotalCount),
+            hasMore: adjustedHasMore && audioNFTs.length === pageSize
+        };
+        
+    } catch (error) {
+        console.error("Error fetching user audio NFTs:", error);
+        if (error instanceof Error && error.name === 'AbortError') {
+            throw error;
+        }
+        throw new Error("Failed to fetch user audio NFTs");
+    }
+}
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/archiveSlice.ts b/src/alex_frontend/src/features/sonora/archiveSlice.ts
new file mode 100644
index 000000000..c800af9b4
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/archiveSlice.ts
@@ -0,0 +1,131 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { ArchiveAudio } from "./types";
+import { fetchUserAudioNFTs as fetchUserAudioNFTsAPI, UserAudioResponse } from "./api/fetchUserAudioNFTs";
+
+export interface ArchiveState {
+  audios: ArchiveAudio[];
+  loading: boolean;
+  loadingMore: boolean; // For append mode
+  error: string | null;
+  pagination: {
+    page: number;
+    totalPages: number;
+    totalCount: number;
+    hasMore: boolean;
+  };
+  selling: string; // arweave_id, empty string for no selection
+}
+
+const initialState: ArchiveState = {
+  audios: [],
+  loading: false,
+  loadingMore: false,
+  error: null,
+  pagination: {
+    page: 1,
+    totalPages: 1,
+    totalCount: 0,
+    hasMore: false,
+  },
+  selling: '',
+};
+
+// Async thunk for fetching user's audio NFTs
+export const fetchUserAudioNFTs = createAsyncThunk<
+  UserAudioResponse & { appendMode?: boolean },
+  { userPrincipal: string; page?: number; pageSize?: number; appendMode?: boolean },
+  { rejectValue: string }
+>(
+  "archive/fetchUserAudioNFTs",
+  async ({ userPrincipal, page = 1, pageSize = 8, appendMode = false }, { rejectWithValue, signal }) => {
+    try {
+      console.log("Fetching audio NFTs for user:", userPrincipal);
+      
+      // Fetch real audio NFTs from the blockchain
+      const result = await fetchUserAudioNFTsAPI({ userPrincipal, page, pageSize, signal });
+      
+      return {
+        ...result,
+        appendMode
+      };
+    } catch (error) {
+      console.error("Error fetching user audio NFTs:", error);
+      if (error instanceof Error && error.message === 'AbortError') {
+        throw error; // Re-throw abort errors
+      }
+      return rejectWithValue("Failed to fetch user audio NFTs");
+    }
+  }
+);
+
+const archiveSlice = createSlice({
+  name: "archive",
+  initialState,
+  reducers: {
+    setSelling: (state, action) => {
+      state.selling = action.payload;
+    },
+    clearError: (state) => {
+      state.error = null;
+    },
+    resetArchive: (state) => {
+      state.audios = [];
+      state.loading = false;
+      state.loadingMore = false;
+      state.pagination = {
+        page: 1,
+        totalPages: 1,
+        totalCount: 0,
+        hasMore: false,
+      };
+      state.error = null;
+      state.selling = '';
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      // fetchUserAudioNFTs
+      .addCase(fetchUserAudioNFTs.pending, (state, action) => {
+        const { appendMode } = action.meta.arg;
+        if (appendMode) {
+          state.loadingMore = true;
+        } else {
+          // Only show full loading if there are no existing audios
+          if (state.audios.length === 0) {
+            state.loading = true;
+          } else {
+            state.loadingMore = true;
+          }
+        }
+        state.error = null;
+      })
+      .addCase(fetchUserAudioNFTs.fulfilled, (state, action) => {
+        state.loading = false;
+        state.loadingMore = false;
+        
+        if (action.payload.appendMode) {
+          // Append to existing audios
+          state.audios = [...state.audios, ...action.payload.audios];
+        } else {
+          // Replace audios (first page or refresh)
+          state.audios = action.payload.audios;
+        }
+        
+        state.pagination = {
+          page: action.payload.page,
+          totalPages: action.payload.totalPages,
+          totalCount: action.payload.totalCount,
+          hasMore: action.payload.hasMore,
+        };
+        state.error = null;
+      })
+      .addCase(fetchUserAudioNFTs.rejected, (state, action) => {
+        state.loading = false;
+        state.loadingMore = false;
+        state.error = action.payload || "Failed to fetch user audio NFTs";
+      });
+  },
+});
+
+export const { setSelling, clearError, resetArchive } = archiveSlice.actions;
+export default archiveSlice.reducer;
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/browse/browseSlice.ts b/src/alex_frontend/src/features/sonora/browse/browseSlice.ts
new file mode 100644
index 000000000..b00ffa0b8
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/browse/browseSlice.ts
@@ -0,0 +1,57 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { BrowseState, ArweaveAudio, FetchAudiosResponse } from "../types";
+
+const initialState: BrowseState = {
+    audios: [],
+    loading: false,
+    error: null,
+    cursor: null,
+    hasNext: false,
+};
+
+const browseSlice = createSlice({
+    name: "sonora/browse",
+    initialState,
+    reducers: {
+        setLoading: (state, action: PayloadAction<boolean>) => {
+            state.loading = action.payload;
+            if (action.payload) {
+                state.error = null;
+            }
+        },
+        setError: (state, action: PayloadAction<string>) => {
+            state.loading = false;
+            state.error = action.payload;
+        },
+        clearError: (state) => {
+            state.error = null;
+        },
+        setAudiosData: (state, action: PayloadAction<FetchAudiosResponse & { reset: boolean }>) => {
+            const { audios, cursor, hasNext, reset } = action.payload;
+            
+            if (reset) {
+                state.audios = audios;
+            } else {
+                state.audios.push(...audios);
+            }
+            
+            state.cursor = cursor;
+            state.hasNext = hasNext;
+            state.loading = false;
+            state.error = null;
+        },
+        reset: (state) => {
+            Object.assign(state, initialState);
+        }
+    },
+});
+
+export const {
+    setLoading,
+    setError,
+    clearError,
+    setAudiosData,
+    reset,
+} = browseSlice.actions;
+
+export default browseSlice.reducer;
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/browse/thunks/fetchAudios.ts b/src/alex_frontend/src/features/sonora/browse/thunks/fetchAudios.ts
new file mode 100644
index 000000000..2bb214a9a
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/browse/thunks/fetchAudios.ts
@@ -0,0 +1,44 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { fetchAudios as fetchAudiosAPI } from "../../api/arweave";
+import { setLoading, setError, setAudiosData } from "../browseSlice";
+import type { RootState } from "@/store";
+
+interface FetchAudiosParams {
+    reset?: boolean;
+    signal?: AbortSignal;
+}
+
+export const fetchAudios = createAsyncThunk(
+    "sonora/browse/fetchAudios",
+    async ({ reset = false, signal }: FetchAudiosParams = {}, { dispatch, getState }) => {
+        dispatch(setLoading(true));
+        
+        try {
+            const state = getState() as RootState;
+            const currentCursor = reset ? null : state.sonora.browse.cursor;
+            
+            const result = await fetchAudiosAPI({ 
+                cursor: currentCursor,
+                signal 
+            });
+            
+            dispatch(setAudiosData({ 
+                ...result, 
+                reset 
+            }));
+            
+            return result;
+            
+        } catch (error) {
+            if (error instanceof Error && error.name === 'AbortError') {
+                throw error;
+            }
+            
+            const errorMessage = error instanceof Error ? error.message : "Failed to fetch audios";
+            dispatch(setError(errorMessage));
+            throw error;
+        }
+    }
+);
+
+export default fetchAudios;
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/components/AudioCard.tsx b/src/alex_frontend/src/features/sonora/components/AudioCard.tsx
index f0c95be03..814301e35 100644
--- a/src/alex_frontend/src/features/sonora/components/AudioCard.tsx
+++ b/src/alex_frontend/src/features/sonora/components/AudioCard.tsx
@@ -1,36 +1,149 @@
-import React from "react";
-import { FileAudio, HardDrive, Calendar } from "lucide-react";
+import React, { useRef, useState, useEffect } from "react";
+import { FileAudio, HardDrive, Calendar, Play, Pause, Loader2, DollarSign, User } from "lucide-react";
 import { useAppDispatch } from "@/store/hooks/useAppDispatch";
 import { useAppSelector } from "@/store/hooks/useAppSelector";
-import { setSelected } from "../sonoraSlice";
+import { setSelected, clearSelected } from "../sonoraSlice";
 import { Audio } from "../types";
 
 interface AudioCardProps {
     item: Audio;
     actions?: React.ReactNode;
+    price?: string; // Optional price to display
+    owner?: string; // Optional owner to display
 }
 
-export const AudioCard: React.FC<AudioCardProps> = ({ item, actions }) => {
+export const AudioCard: React.FC<AudioCardProps> = ({ item, actions, price, owner }) => {
     const dispatch = useAppDispatch();
     const { selected } = useAppSelector((state) => state.sonora);
+    const audioRef = useRef<HTMLAudioElement>(null);
+    
+    const [isLoading, setIsLoading] = useState(false);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [progress, setProgress] = useState(0);
     
     const isSelected = selected?.id === item.id;
+    const audioUrl = item.id.startsWith('blob:') || item.id.includes('.') ? 
+        item.id : `https://arweave.net/${item.id}`;
+    
+
+
+    // Audio event handlers
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio) return;
+
+        const handleLoadStart = () => setIsLoading(true);
+        const handleCanPlay = () => setIsLoading(false);
+        const handleWaiting = () => setIsLoading(true);
+        const handlePlay = () => {
+            setIsPlaying(true);
+            setIsLoading(false);
+        };
+        const handlePause = () => setIsPlaying(false);
+        const handleEnded = () => {
+            setIsPlaying(false);
+            setCurrentTime(0);
+            setProgress(0);
+        };
+        const handleTimeUpdate = () => {
+            if (audio.duration) {
+                setCurrentTime(audio.currentTime);
+                setProgress((audio.currentTime / audio.duration) * 100);
+            }
+        };
+        const handleDurationChange = () => {
+            setDuration(audio.duration);
+        };
+        const handleError = () => {
+            setIsLoading(false);
+            setIsPlaying(false);
+        };
+
+        audio.addEventListener('loadstart', handleLoadStart);
+        audio.addEventListener('canplay', handleCanPlay);
+        audio.addEventListener('waiting', handleWaiting);
+        audio.addEventListener('play', handlePlay);
+        audio.addEventListener('pause', handlePause);
+        audio.addEventListener('ended', handleEnded);
+        audio.addEventListener('timeupdate', handleTimeUpdate);
+        audio.addEventListener('durationchange', handleDurationChange);
+        audio.addEventListener('error', handleError);
+
+        return () => {
+            audio.removeEventListener('loadstart', handleLoadStart);
+            audio.removeEventListener('canplay', handleCanPlay);
+            audio.removeEventListener('waiting', handleWaiting);
+            audio.removeEventListener('play', handlePlay);
+            audio.removeEventListener('pause', handlePause);
+            audio.removeEventListener('ended', handleEnded);
+            audio.removeEventListener('timeupdate', handleTimeUpdate);
+            audio.removeEventListener('durationchange', handleDurationChange);
+            audio.removeEventListener('error', handleError);
+        };
+    }, []);
+
+    // Reset state when not selected
+    useEffect(() => {
+        if (!isSelected && audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current.src = '';
+            setIsPlaying(false);
+            setIsLoading(false);
+            setCurrentTime(0);
+            setProgress(0);
+        }
+    }, [isSelected]);
 
-    const handleSelect = () => {
-        if (selected?.id === item.id) return;
+    const handleCardClick = () => {
         dispatch(setSelected(item));
     };
 
-    const formatDate = (timestamp: string) => {
-        return new Date(timestamp).toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
+    const handlePlayPause = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const audio = audioRef.current;
+        if (!audio) return;
+
+        // Select this card when play is clicked
+        if (!isSelected) {
+            dispatch(setSelected(item));
+        }
+
+        // Stop all other audio
+        document.querySelectorAll('audio').forEach(otherAudio => {
+            if (otherAudio !== audio) {
+                otherAudio.pause();
+                otherAudio.src = '';
+            }
         });
+
+        if (isPlaying) {
+            audio.pause();
+        } else {
+            // Load and play audio only when play is clicked
+            if (!audio.src || audio.src !== audioUrl) {
+                audio.src = audioUrl;
+            }
+            audio.play().catch(console.error);
+        }
+    };
+
+    const formatDate = (timestamp: string) => {
+        try {
+            return new Date(timestamp).toLocaleDateString('en-US', {
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        } catch (error) {
+            return 'Invalid date';
+        }
     };
 
-    const getFormatColor = (type: string) => {
+    const getFormatColor = (type: string | null | undefined) => {
+        if (!type) return 'bg-gray-100 text-gray-800';
         const colors: Record<string, string> = {
             'audio/mp3': 'bg-blue-100 text-blue-800',
             'audio/wav': 'bg-green-100 text-green-800',
@@ -41,59 +154,128 @@ export const AudioCard: React.FC<AudioCardProps> = ({ item, actions }) => {
         return colors[type] || 'bg-gray-100 text-gray-800';
     };
 
-    const getFormatLabel = (type: string) => {
-        return type.replace('audio/', '').toUpperCase();
+    const getFormatLabel = (type: string | null | undefined) => {
+        return type || 'No Type';
+    };
+
+    const formatOwner = (ownerPrincipal: string) => {
+        if (!ownerPrincipal) return 'Unknown';
+        // Show first 6 and last 4 characters with ellipsis
+        if (ownerPrincipal.length > 12) {
+            return `${ownerPrincipal.slice(0, 6)}...${ownerPrincipal.slice(-4)}`;
+        }
+        return ownerPrincipal;
     };
 
     return (
         <div
-            onClick={handleSelect}
-            className={`group cursor-pointer rounded-lg border p-4 transition-all duration-200 hover:shadow-lg hover:scale-[1.01] ${
+            onClick={handleCardClick}
+            className={`group cursor-pointer rounded-lg border transition-all duration-200 hover:shadow-lg hover:scale-[1.01] relative overflow-hidden font-roboto-condensed ${
                 isSelected 
-                    ? 'border-primary bg-primary/5 shadow-md scale-[1.01]' 
+                    ? 'border-primary shadow-md scale-[1.01]' 
                     : 'border-border bg-card hover:border-primary/30'
             }`}
         >
-            <div className="flex items-center gap-4">
-                {/* Icon */}
-                <div className={`p-3 rounded-full transition-all duration-200 ${
-                    isSelected 
-                        ? 'bg-primary/15 scale-110' 
-                        : 'bg-muted group-hover:bg-primary/10'
-                }`}>
-                    <FileAudio size={24} className={`transition-colors ${
-                        isSelected ? 'text-primary' : 'text-muted-foreground group-hover:text-primary'
-                    }`} />
+            {/* Hidden Audio Element */}
+            <audio
+                ref={audioRef}
+                preload="metadata"
+                crossOrigin="anonymous"
+                style={{ display: 'none' }}
+            />
+
+            {/* Progress Background */}
+            {isSelected && progress > 0 && (
+                <div 
+                    className="absolute inset-0 bg-primary/10 transition-all duration-100 ease-linear"
+                    style={{ 
+                        background: `linear-gradient(to right, hsl(var(--primary) / 0.1) ${progress}%, transparent ${progress}%)` 
+                    }}
+                />
+            )}
+
+            {/* Loading Animation Background */}
+            {isLoading && isSelected && (
+                <div className="absolute inset-0 overflow-hidden">
+                    <div 
+                        className="absolute inset-y-0 w-1/2 bg-gradient-to-r from-transparent via-primary/20 to-transparent"
+                        style={{
+                            animation: 'shimmer 2s infinite linear',
+                            left: '-50%',
+                        }}
+                    />
                 </div>
+            )}
 
-                {/* Main Info */}
-                <div className="flex-1 min-w-0 space-y-2">
-                    <div className="flex items-center gap-3">
-                        <h3 className={`font-mono text-sm font-medium truncate transition-colors ${
-                            isSelected ? 'text-primary' : 'text-foreground'
-                        }`}>
-                            {item.id}
-                        </h3>
-                        <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getFormatColor(item.type)}`}>
-                            {getFormatLabel(item.type)}
-                        </span>
-                    </div>
+            <div className="relative p-4">
+                <div className="flex items-center gap-4">
+                    {/* Play/Pause Button */}
+                    <button
+                        onClick={handlePlayPause}
+                        disabled={isLoading}
+                        className={`p-3 rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20 ${
+                            isSelected 
+                                ? 'bg-primary text-primary-foreground hover:bg-primary/90' 
+                                : 'bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary'
+                        } ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    >
+                        {isLoading ? (
+                            <Loader2 size={24} className="animate-spin" />
+                        ) : isPlaying ? (
+                            <Pause size={24} />
+                        ) : (
+                            <Play size={24} />
+                        )}
+                    </button>
 
-                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                        <div className="flex items-center gap-1">
-                            <HardDrive size={12} />
-                            <span>{item.size}</span>
+                    {/* Main Info */}
+                    <div className="flex-1 min-w-0 space-y-2">
+                        <div>
+                            <h3 className={`font-mono text-sm font-medium truncate transition-colors ${
+                                isSelected ? 'text-primary' : 'text-foreground'
+                            }`}>
+                                {item.id}
+                            </h3>
                         </div>
-                        <div className="flex items-center gap-1">
-                            <Calendar size={12} />
-                            <span>{formatDate(item.timestamp)}</span>
+
+                        <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getFormatColor(item.type)}`}>
+                                {getFormatLabel(item.type)}
+                            </span>
+                            <div className="flex items-center gap-1">
+                                <HardDrive size={12} />
+                                <span>{item.size || 'Unknown size'}</span>
+                            </div>
+                            <div className="flex items-center gap-1">
+                                <Calendar size={12} />
+                                <span>{formatDate(item.timestamp)}</span>
+                            </div>
+                            {price && (
+                                <div className="flex items-center gap-1">
+                                    <DollarSign size={12} />
+                                    <span className="font-medium text-foreground">{price}</span>
+                                </div>
+                            )}
+                            {owner && (
+                                <div className="flex items-center gap-1">
+                                    <User size={12} />
+                                    <span className="font-medium text-foreground">{formatOwner(owner)}</span>
+                                </div>
+                            )}
+                            {isSelected && duration > 0 && (
+                                <div className="flex items-center gap-1">
+                                    <span>
+                                        {Math.floor(currentTime / 60)}:{Math.floor(currentTime % 60).toString().padStart(2, '0')} / {Math.floor(duration / 60)}:{Math.floor(duration % 60).toString().padStart(2, '0')}
+                                    </span>
+                                </div>
+                            )}
                         </div>
                     </div>
-                </div>
 
-                {/* Action Buttons */}
-                <div className="flex items-center gap-3">
-                    {actions}
+                    {/* Action Buttons */}
+                    <div className="flex items-center gap-3">
+                        {actions}
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/alex_frontend/src/features/sonora/components/BuyButton.tsx b/src/alex_frontend/src/features/sonora/components/BuyButton.tsx
index 2ed250dfe..c016c4158 100644
--- a/src/alex_frontend/src/features/sonora/components/BuyButton.tsx
+++ b/src/alex_frontend/src/features/sonora/components/BuyButton.tsx
@@ -1,23 +1,114 @@
 import React from "react";
-import { ShoppingCart } from "lucide-react";
+import { Button } from "@/lib/components/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/lib/components/dialog";
+import { Alert } from "@/components/Alert";
+import { LoaderPinwheel, ShoppingCart, X } from "lucide-react";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { setPurchasing } from "../marketSlice";
+import { useBuyAudio } from "../hooks/useBuyAudio";
 import { Audio } from "../types";
 
 interface BuyButtonProps {
-    item?: Audio;
+    item: Audio;
+    price: string;
+    tokenId: string;
 }
 
-export const BuyButton: React.FC<BuyButtonProps> = ({ item }) => {
-    const handleBuy = (e: React.MouseEvent) => {
+export const BuyButton: React.FC<BuyButtonProps> = ({ item, price, tokenId }) => {
+    const dispatch = useAppDispatch();
+    const purchasing = useAppSelector((state) => state.market.purchasing);
+    const isOpen = !!(purchasing && purchasing === item.id);
+
+    const { buyAudio, isLoading, error } = useBuyAudio();
+
+    const handleOpen = (e: React.MouseEvent) => {
         e.stopPropagation();
-        alert("Buy functionality coming soon!");
+        dispatch(setPurchasing(item.id));
+    };
+
+    const handleClose = () => {
+        dispatch(setPurchasing(""));
+    };
+
+    const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        buyAudio({
+            arweaveId: item.id,
+            tokenId,
+            price,
+        });
     };
 
     return (
-        <div 
-            className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary/90 group-hover:text-white cursor-pointer"
-            onClick={handleBuy}
-        >
-            <ShoppingCart size={18} />
-        </div>
+        <>
+            <div 
+                className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary group-hover:text-primary-foreground cursor-pointer"
+                onClick={handleOpen}
+            >
+                <ShoppingCart size={18} />
+            </div>
+            {isOpen && (
+                <Dialog open={true}>
+                    <DialogContent className="sm:max-w-[425px]" closeIcon={null}>
+                        <DialogHeader>
+                            <DialogTitle>Purchase Audio NFT</DialogTitle>
+                            <DialogDescription>
+                                Confirm your purchase of this audio NFT
+                            </DialogDescription>
+                        </DialogHeader>
+                        {error && (
+                            <Alert variant="danger" title="Error">
+                                {error}
+                            </Alert>
+                        )}
+                        {isLoading ? (
+                            <div className="p-6 flex justify-center items-center h-full">
+                                <LoaderPinwheel className="animate-spin" />
+                            </div>
+                        ) : (
+                            <div className="grid gap-4 py-4">
+                                <div className="flex flex-col space-y-2">
+                                    <p className="text-sm">
+                                        <strong>Price:</strong> {price} ICP
+                                    </p>
+                                    <p className="text-sm">
+                                        <strong>Type:</strong> {item.type}
+                                    </p>
+                                    <p className="text-sm">
+                                        <strong>Size:</strong> {item.size}
+                                    </p>
+                                    <p className="text-sm text-muted-foreground mt-2">
+                                        This will transfer the audio NFT to your wallet
+                                        and remove it from the marketplace.
+                                    </p>
+                                </div>
+                            </div>
+                        )}
+                        <DialogFooter>
+                            <Button disabled={isLoading} onClick={handleClose} variant="outline">
+                                Cancel
+                            </Button>
+                            <Button
+                                disabled={isLoading}
+                                onClick={handleSubmit}
+                                variant="primary"
+                            >
+                                {isLoading
+                                    ? "Processing..."
+                                    : `Buy for ${price} ICP`}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            )}
+        </>
     );
 };
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/components/EditButton.tsx b/src/alex_frontend/src/features/sonora/components/EditButton.tsx
index 7d1a54526..3ec7f5f7a 100644
--- a/src/alex_frontend/src/features/sonora/components/EditButton.tsx
+++ b/src/alex_frontend/src/features/sonora/components/EditButton.tsx
@@ -1,23 +1,129 @@
-import React from "react";
-import { Edit } from "lucide-react";
+import React, { useState } from "react";
+import { Button } from "@/lib/components/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/lib/components/dialog";
+import { Input } from "@/lib/components/input";
+import { Label } from "@/lib/components/label";
+import { Alert } from "@/components/Alert";
+import { toast } from "sonner";
+import { LoaderPinwheel, X, Edit } from "lucide-react";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { setEditing } from "../studioSlice";
+import { useUpdateAudio } from "../hooks/useUpdateAudio";
 import { Audio } from "../types";
 
 interface EditButtonProps {
-    item?: Audio;
+    item: Audio;
+    currentPrice: string;
+    tokenId: string;
 }
 
-export const EditButton: React.FC<EditButtonProps> = ({ item }) => {
-    const handleEdit = (e: React.MouseEvent) => {
+export const EditButton: React.FC<EditButtonProps> = ({ item, currentPrice, tokenId }) => {
+    const dispatch = useAppDispatch();
+    const editing = useAppSelector((state) => state.studio.editing);
+    const isOpen = !!(editing && editing === item.id);
+    
+    const [price, setPrice] = useState(currentPrice);
+    const { updateAudio, isLoading, error } = useUpdateAudio();
+
+    const handleOpen = (e: React.MouseEvent) => {
         e.stopPropagation();
-        alert("Edit functionality coming soon!");
+        dispatch(setEditing(item.id));
+        setPrice(currentPrice);
+    };
+
+    const handleClose = () => {
+        dispatch(setEditing(""));
+        setPrice(currentPrice);
+    };
+
+    const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+
+        if (price === currentPrice) {
+            toast.info("Price unchanged");
+            return;
+        }
+
+        if (!price || isNaN(Number(price)) || Number(price) <= 0) {
+            toast.error("Invalid price");
+            return;
+        }
+
+        updateAudio({
+            arweaveId: item.id,
+            tokenId,
+            newPrice: price,
+        });
     };
 
     return (
-        <div 
-            className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary/90 group-hover:text-white cursor-pointer"
-            onClick={handleEdit}
-        >
-            <Edit size={18} />
-        </div>
+        <>
+            <div 
+                className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary group-hover:text-primary-foreground cursor-pointer"
+                onClick={handleOpen}
+            >
+                <Edit size={18} />
+            </div>
+            {isOpen && (
+                <Dialog open={true}>
+                    <DialogContent className="sm:max-w-[425px]" closeIcon={null}>
+                        <DialogHeader>
+                            <DialogTitle>Edit Audio NFT Price</DialogTitle>
+                            <DialogDescription>
+                                Set a new price for your audio NFT.
+                            </DialogDescription>
+                        </DialogHeader>
+                        {error && (
+                            <Alert variant="danger" title="Error">
+                                {error}
+                            </Alert>
+                        )}
+                        {isLoading ? (
+                            <div className="p-6 flex justify-center items-center h-full">
+                                <LoaderPinwheel className="animate-spin" />
+                            </div>
+                        ) : (
+                            <div className="grid gap-4 py-4">
+                                <div className="flex flex-col">
+                                    <Label htmlFor="price" className="text-right mb-2">
+                                        Price (ICP)
+                                    </Label>
+                                    <Input
+                                        id="price"
+                                        type="number"
+                                        step="0.01"
+                                        min="0"
+                                        placeholder="0.00"
+                                        value={price}
+                                        onChange={(e) => setPrice(e.target.value)}
+                                        className="col-span-3"
+                                        required
+                                    />
+                                    <p className="text-sm text-muted-foreground mt-2">
+                                        Current price: {currentPrice} ICP
+                                    </p>
+                                </div>
+                            </div>
+                        )}
+                        <DialogFooter>
+                            <Button disabled={isLoading} onClick={handleClose} variant="outline">
+                                Cancel
+                            </Button>
+                            <Button disabled={isLoading} onClick={handleSubmit}>
+                                {isLoading ? "Updating..." : "Update Price"}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            )}
+        </>
     );
 };
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/components/MintButton.tsx b/src/alex_frontend/src/features/sonora/components/MintButton.tsx
index bc1bce78d..bd75000b0 100644
--- a/src/alex_frontend/src/features/sonora/components/MintButton.tsx
+++ b/src/alex_frontend/src/features/sonora/components/MintButton.tsx
@@ -1,23 +1,44 @@
 import React from "react";
-import { Coins } from "lucide-react";
+import { Coins, LoaderPinwheel } from "lucide-react";
 import { Audio } from "../types";
+import { useMinting } from "@/features/permasearch/hooks/useMinting";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/lib/components/tooltip";
 
 interface MintButtonProps {
     item?: Audio;
 }
 
 export const MintButton: React.FC<MintButtonProps> = ({ item }) => {
-    const handleMint = (e: React.MouseEvent) => {
+    const { mintTransaction, isMinting } = useMinting();
+
+    if (!item) return null;
+
+    const handleMint = async (e: React.MouseEvent) => {
         e.stopPropagation();
-        alert("Mint functionality coming soon!");
+        await mintTransaction(item.id);
     };
 
     return (
-        <div 
-            className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary/90 group-hover:text-white cursor-pointer"
-            onClick={handleMint}
-        >
-            <Coins size={18} />
-        </div>
+        <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+                <div 
+                    className={`p-3 rounded-full transition-all duration-200 cursor-pointer ${
+                        isMinting(item.id) 
+                            ? 'bg-primary/20 opacity-100' 
+                            : 'bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary group-hover:text-primary-foreground'
+                    }`}
+                    onClick={handleMint}
+                >
+                    {isMinting(item.id) ? (
+                        <LoaderPinwheel size={18} className="animate-spin text-primary" />
+                    ) : (
+                        <Coins size={18} />
+                    )}
+                </div>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={8} portal>
+                {isMinting(item.id) ? 'Minting...' : 'Mint NFT'}
+            </TooltipContent>
+        </Tooltip>
     );
 };
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/components/PlayPauseButton.tsx b/src/alex_frontend/src/features/sonora/components/PlayPauseButton.tsx
index 937eebbdf..0ed218df0 100644
--- a/src/alex_frontend/src/features/sonora/components/PlayPauseButton.tsx
+++ b/src/alex_frontend/src/features/sonora/components/PlayPauseButton.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Play, Pause } from "lucide-react";
 import { useAppDispatch } from "@/store/hooks/useAppDispatch";
 import { useAppSelector } from "@/store/hooks/useAppSelector";
-import { playAudio, pauseAudio } from "../sonoraSlice";
+import { setSelected, clearSelected } from "../sonoraSlice";
 import { Audio } from "../types";
 
 interface PlayPauseButtonProps {
@@ -11,19 +11,18 @@ interface PlayPauseButtonProps {
 
 export const PlayPauseButton: React.FC<PlayPauseButtonProps> = ({ item }) => {
     const dispatch = useAppDispatch();
-    const { selected, playing } = useAppSelector((state) => state.sonora);
+    const { selected } = useAppSelector((state) => state.sonora);
     
     const isSelected = selected?.id === item.id;
-    const isPlaying = playing && isSelected;
 
     const handlePlay = (e: React.MouseEvent) => {
         e.stopPropagation();
-        dispatch(playAudio(item));
+        dispatch(setSelected(item));
     };
 
     const handlePause = (e: React.MouseEvent) => {
         e.stopPropagation();
-        dispatch(pauseAudio());
+        dispatch(clearSelected());
     };
 
     return (
@@ -32,7 +31,7 @@ export const PlayPauseButton: React.FC<PlayPauseButtonProps> = ({ item }) => {
                 ? 'bg-primary text-primary-foreground shadow-md' 
                 : 'bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary/90 group-hover:text-white'
         }`}>
-            {isPlaying ? (
+            {isSelected ? (
                 <Pause 
                     size={18} 
                     fill="currentColor"
diff --git a/src/alex_frontend/src/features/sonora/components/SellButton.tsx b/src/alex_frontend/src/features/sonora/components/SellButton.tsx
index 2ea385ffe..1ec6febad 100644
--- a/src/alex_frontend/src/features/sonora/components/SellButton.tsx
+++ b/src/alex_frontend/src/features/sonora/components/SellButton.tsx
@@ -1,23 +1,109 @@
-import React from "react";
-import { DollarSign } from "lucide-react";
+import React, { useState } from "react";
+import { Button } from "@/lib/components/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/lib/components/dialog";
+import { Input } from "@/lib/components/input";
+import { Label } from "@/lib/components/label";
+import { Alert } from "@/components/Alert";
+import { toast } from "sonner";
+import { LoaderPinwheel, X, DollarSign } from "lucide-react";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { setSelling } from "../archiveSlice";
+import { useSellAudio } from "../hooks/useSellAudio";
 import { Audio } from "../types";
 
 interface SellButtonProps {
-    item?: Audio;
+    item: Audio;
+    tokenId: string;
 }
 
-export const SellButton: React.FC<SellButtonProps> = ({ item }) => {
-    const handleSell = (e: React.MouseEvent) => {
+export const SellButton: React.FC<SellButtonProps> = ({ item, tokenId }) => {
+    const dispatch = useAppDispatch();
+    const selling = useAppSelector((state) => state.archive.selling);
+    const isOpen = !!(selling && selling === item.id);
+    
+    const [price, setPrice] = useState("");
+    const { sellAudio, isLoading, error } = useSellAudio();
+
+    const handleOpen = (e: React.MouseEvent) => {
         e.stopPropagation();
-        alert("Sell functionality coming soon!");
+        dispatch(setSelling(item.id));
+    };
+
+    const handleClose = () => {
+        dispatch(setSelling(""));
+        setPrice("");
+    };
+
+    const handleSubmit = async () => {
+        if (!price || isNaN(Number(price)) || Number(price) <= 0) {
+            toast.error("Invalid price");
+            return;
+        }
+
+        sellAudio({ tokenId, price });
     };
 
     return (
-        <div 
-            className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary/90 group-hover:text-white cursor-pointer"
-            onClick={handleSell}
-        >
-            <DollarSign size={18} />
-        </div>
+        <>
+            <div 
+                className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary group-hover:text-primary-foreground cursor-pointer"
+                onClick={handleOpen}
+            >
+                <DollarSign size={18} />
+            </div>
+            {isOpen && (
+                <Dialog open={true}>
+                    <DialogContent className="sm:max-w-[425px]" closeIcon={null}>
+                        <DialogHeader>
+                            <DialogTitle>List Audio NFT for Sale</DialogTitle>
+                            <DialogDescription>
+                                Set a price for your audio NFT. Once listed, others will be able to purchase it on the marketplace.
+                            </DialogDescription>
+                        </DialogHeader>
+                        {error && <Alert variant="danger" title="Error">{error}</Alert>}
+                        {isLoading ? (
+                            <div className="p-6 flex justify-center items-center h-full">
+                                <LoaderPinwheel className="animate-spin" />
+                            </div>
+                        ) : (
+                            <div className="grid gap-4 py-4">
+                                <div className="flex flex-col">
+                                    <Label htmlFor="price" className="text-right mb-2">
+                                        Price (ICP)
+                                    </Label>
+                                    <Input
+                                        id="price"
+                                        type="number"
+                                        step="0.01"
+                                        min="0"
+                                        placeholder="0.00"
+                                        value={price}
+                                        onChange={(e) => setPrice(e.target.value)}
+                                        className="col-span-3"
+                                        required
+                                    />
+                                </div>
+                            </div>
+                        )}
+                        <DialogFooter>
+                            <Button disabled={isLoading} onClick={handleClose} variant="outline">
+                                Cancel
+                            </Button>
+                            <Button disabled={isLoading} onClick={handleSubmit}>
+                                {isLoading ? "Listing..." : "List for Sale"}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            )}
+        </>
     );
 };
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/components/UnlistButton.tsx b/src/alex_frontend/src/features/sonora/components/UnlistButton.tsx
index e95e36133..84d98ed88 100644
--- a/src/alex_frontend/src/features/sonora/components/UnlistButton.tsx
+++ b/src/alex_frontend/src/features/sonora/components/UnlistButton.tsx
@@ -1,23 +1,111 @@
 import React from "react";
-import { X } from "lucide-react";
+import { Button } from "@/lib/components/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/lib/components/dialog";
+import { Alert } from "@/components/Alert";
+import { LoaderPinwheel, Trash2, X } from "lucide-react";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { setUnlisting } from "../studioSlice";
+import { useUnlistAudio } from "../hooks/useUnlistAudio";
 import { Audio } from "../types";
 
 interface UnlistButtonProps {
-    item?: Audio;
+    item: Audio;
+    tokenId: string;
 }
 
-export const UnlistButton: React.FC<UnlistButtonProps> = ({ item }) => {
-    const handleUnlist = (e: React.MouseEvent) => {
+export const UnlistButton: React.FC<UnlistButtonProps> = ({ item, tokenId }) => {
+    const dispatch = useAppDispatch();
+    const unlisting = useAppSelector((state) => state.studio.unlisting);
+    const isOpen = !!(unlisting && unlisting === item.id);
+
+    const { unlistAudio, isLoading, error } = useUnlistAudio();
+
+    const handleOpen = (e: React.MouseEvent) => {
         e.stopPropagation();
-        alert("Unlist functionality coming soon!");
+        dispatch(setUnlisting(item.id));
+    };
+
+    const handleClose = () => {
+        dispatch(setUnlisting(""));
+    };
+
+    const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        unlistAudio({
+            arweaveId: item.id,
+            tokenId,
+        });
     };
 
     return (
-        <div 
-            className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-primary/90 group-hover:text-white cursor-pointer"
-            onClick={handleUnlist}
-        >
-            <X size={18} />
-        </div>
+        <>
+            <div 
+                className="p-3 rounded-full transition-all duration-200 bg-muted/50 opacity-0 group-hover:opacity-100 group-hover:bg-destructive group-hover:text-destructive-foreground cursor-pointer"
+                onClick={handleOpen}
+            >
+                <Trash2 size={18} />
+            </div>
+            {isOpen && (
+                <Dialog open={true}>
+                    <DialogContent className="sm:max-w-[425px]" closeIcon={null}>
+                        <DialogHeader>
+                            <DialogTitle>Remove from Marketplace</DialogTitle>
+                            <DialogDescription>
+                                Are you sure you want to remove this audio NFT from the
+                                marketplace?
+                            </DialogDescription>
+                        </DialogHeader>
+                        {error && (
+                            <Alert variant="danger" title="Error">
+                                {error}
+                            </Alert>
+                        )}
+                        {isLoading ? (
+                            <div className="p-6 flex justify-center items-center h-full">
+                                <LoaderPinwheel className="animate-spin" />
+                            </div>
+                        ) : (
+                            <div className="grid gap-4 py-4">
+                                <div className="flex flex-col">
+                                    <p className="text-sm text-muted-foreground">
+                                        This action will remove your audio NFT from the
+                                        marketplace. You can list it again later if
+                                        needed.
+                                    </p>
+                                    <div className="mt-3 space-y-1">
+                                        <p className="text-sm">
+                                            <strong>Type:</strong> {item.type}
+                                        </p>
+                                        <p className="text-sm">
+                                            <strong>Size:</strong> {item.size}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                        <DialogFooter>
+                            <Button disabled={isLoading} onClick={handleClose} variant="outline">
+                                Cancel
+                            </Button>
+                            <Button
+                                disabled={isLoading}
+                                onClick={handleSubmit}
+                                variant="destructive"
+                            >
+                                {isLoading ? "Removing..." : "Remove from Sale"}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            )}
+        </>
     );
 };
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/hooks/useArweaveAudios.ts b/src/alex_frontend/src/features/sonora/hooks/useArweaveAudios.ts
new file mode 100644
index 000000000..7b99443be
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/hooks/useArweaveAudios.ts
@@ -0,0 +1,50 @@
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { fetchAudios } from "../browse/thunks/fetchAudios";
+import { clearError, reset } from "../browse/browseSlice";
+import { ArweaveAudio } from "../types";
+
+interface UseArweaveAudiosReturn {
+    audios: ArweaveAudio[];
+    loading: boolean;
+    error: string | null;
+    hasNext: boolean;
+    loadMore: () => void;
+    refresh: () => void;
+    clearError: () => void;
+    isEmpty: boolean;
+}
+
+export const useArweaveAudios = (): UseArweaveAudiosReturn => {
+    const dispatch = useAppDispatch();
+    const { audios, loading, error, hasNext } = useAppSelector(
+        (state) => state.sonora.browse
+    );
+
+    const loadMore = () => {
+        if (loading || !hasNext) return;
+        dispatch(fetchAudios({ reset: false }));
+    };
+
+    const refresh = () => {
+        if (loading) return;
+        dispatch(fetchAudios({ reset: true }));
+    };
+
+    const handleClearError = () => {
+        dispatch(clearError());
+    };
+
+    const isEmpty = !loading && audios.length === 0;
+
+    return {
+        audios,
+        loading,
+        error,
+        hasNext,
+        loadMore,
+        refresh,
+        clearError: handleClearError,
+        isEmpty,
+    };
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/hooks/useBuyAudio.ts b/src/alex_frontend/src/features/sonora/hooks/useBuyAudio.ts
new file mode 100644
index 000000000..fc4058e8a
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/hooks/useBuyAudio.ts
@@ -0,0 +1,112 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import useEmporium from "@/hooks/actors/useEmporium";
+import useIcpLedger from "@/hooks/actors/useIcpLedger";
+import { Principal } from "@dfinity/principal";
+import { toast } from "sonner";
+import { setPurchasing, fetchMarketAudioNFTs } from "../marketSlice";
+
+interface BuyAudioParams {
+    arweaveId: string;
+    tokenId: string;
+    price: string;
+}
+
+export const useBuyAudio = () => {
+    const queryClient = useQueryClient();
+    const dispatch = useAppDispatch();
+    const user = useAppSelector((state) => state.auth.user);
+    const { actor: actorEmporium } = useEmporium();
+    const { actor: actorIcpLedger } = useIcpLedger();
+
+    const emporium_canister_id = process.env.CANISTER_ID_EMPORIUM!;
+
+    const buyMutation = useMutation({
+        mutationFn: async ({ arweaveId, tokenId, price }: BuyAudioParams) => {
+            if (!user) {
+                throw new Error("User not found");
+            }
+            if (!actorEmporium) {
+                throw new Error("Emporium actor not available");
+            }
+            if (!actorIcpLedger) {
+                throw new Error("ICP Ledger actor not available");
+            }
+
+            const tokenIdNat = BigInt(tokenId);
+
+            // Calculate approval amount (price + fee)
+            const priceNum = parseFloat(price);
+            const amountFormatApprove = BigInt(
+                Number((priceNum + 0.0001) * 10 ** 8).toFixed(0)
+            );
+
+            // Check current allowance
+            const checkApproval = await actorIcpLedger.icrc2_allowance({
+                account: {
+                    owner: Principal.fromText(user.principal),
+                    subaccount: [],
+                },
+                spender: {
+                    owner: Principal.fromText(emporium_canister_id),
+                    subaccount: [],
+                },
+            });
+
+            // Approve if allowance is insufficient
+            if (checkApproval.allowance < amountFormatApprove) {
+                const resultIcpApprove = await actorIcpLedger.icrc2_approve({
+                    spender: {
+                        owner: Principal.fromText(emporium_canister_id),
+                        subaccount: [],
+                    },
+                    amount: amountFormatApprove,
+                    fee: [BigInt(10000)],
+                    memo: [],
+                    from_subaccount: [],
+                    created_at_time: [],
+                    expected_allowance: [],
+                    expires_at: [],
+                });
+
+                if ("Err" in resultIcpApprove) {
+                    const error = resultIcpApprove.Err;
+                    let errorMessage = "Unknown error";
+                    if ("TemporarilyUnavailable" in error) {
+                        errorMessage = "Service is temporarily unavailable";
+                    }
+                    throw new Error(`Approval failed: ${errorMessage}`);
+                }
+            }
+            
+            // Buy the NFT from the marketplace
+            const result = await actorEmporium.buy_nft(tokenIdNat);
+
+            if ("Err" in result) {
+                throw new Error(result.Err);
+            }
+
+            return { arweaveId, price };
+        },
+        onSuccess: ({ arweaveId, price }) => {
+            toast.success(`Audio NFT purchased for ${price} ICP`);
+            
+            // Close the dialog
+            dispatch(setPurchasing(""));
+
+            // Refresh market data to update UI
+            dispatch(fetchMarketAudioNFTs({ page: 1, pageSize: 8, appendMode: false, currentUserPrincipal: user?.principal }));
+        },
+        onError: (error: Error) => {
+            console.error("Error purchasing audio NFT:", error);
+            toast.error(`Failed to purchase audio NFT: ${error.message}`);
+        },
+    });
+
+    return {
+        buyAudio: buyMutation.mutate,
+        isLoading: buyMutation.isPending,
+        error: buyMutation.error?.message || null,
+    };
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/hooks/useMarketAudioNFTs.ts b/src/alex_frontend/src/features/sonora/hooks/useMarketAudioNFTs.ts
new file mode 100644
index 000000000..6e416869b
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/hooks/useMarketAudioNFTs.ts
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { fetchMarketAudioNFTs } from "../marketSlice";
+
+// Hook for marketplace audio NFTs (follows Archive page pattern)
+export const useMarketAudioNFTs = () => {
+    const dispatch = useAppDispatch();
+    const user = useAppSelector((state) => state.auth.user);
+    const { audios, loading, loadingMore, error, pagination } = useAppSelector((state) => state.market);
+
+    const refreshMarketAudioNFTs = (page = 1, pageSize = 8, appendMode = false) => {
+        dispatch(fetchMarketAudioNFTs({ 
+            page, 
+            pageSize, 
+            appendMode, 
+            currentUserPrincipal: user?.principal 
+        }));
+    };
+
+    return {
+        audios,
+        loading,
+        loadingMore,
+        error,
+        pagination,
+        refreshMarketAudioNFTs,
+    };
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/hooks/useSellAudio.ts b/src/alex_frontend/src/features/sonora/hooks/useSellAudio.ts
new file mode 100644
index 000000000..4b98823ec
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/hooks/useSellAudio.ts
@@ -0,0 +1,140 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import useEmporium from "@/hooks/actors/useEmporium";
+import { useIcrc7 } from "@/hooks/actors";
+import { Principal } from "@dfinity/principal";
+import { toast } from "sonner";
+import { setSelling, fetchUserAudioNFTs } from "../archiveSlice";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+
+const emporium_canister_id = process.env.CANISTER_ID_EMPORIUM!;
+
+interface SellAudioParams {
+    tokenId: string;
+    price: string;
+}
+
+export const useSellAudio = () => {
+    const queryClient = useQueryClient();
+    const dispatch = useAppDispatch();
+    const { actor: actorEmporium } = useEmporium();
+    const { actor: actorIcrc7 } = useIcrc7();
+    const { user } = useAppSelector((state) => state.auth);
+
+    const sellMutation = useMutation({
+        mutationFn: async ({ tokenId, price }: SellAudioParams) => {
+            if (!actorEmporium || !actorIcrc7) {
+                throw new Error("Actors not available");
+            }
+
+            if (!price || isNaN(Number(price)) || Number(price) <= 0) {
+                throw new Error("Invalid price");
+            }
+
+            const tokenIdNat = BigInt(tokenId);
+            const priceFormat: bigint = BigInt(Math.round(Number(price) * 10 ** 8));
+            
+            console.log('Selling audio NFT:', { tokenId, tokenIdNat: tokenIdNat.toString(), price, priceFormat: priceFormat.toString() });
+
+            // Step 1: Verify token ownership
+            try {
+                const ownerResult = await actorIcrc7.icrc7_owner_of([tokenIdNat]);
+                const ownerInfo = ownerResult[0]; // This is [] | [Account]
+                console.log('Token ownership check:', { tokenId: tokenIdNat.toString(), ownerInfo });
+                
+                // Check if token has an owner (array is not empty)
+                if (!ownerInfo || ownerInfo.length === 0) {
+                    throw new Error("Token has no owner or does not exist");
+                }
+                
+                // Extract the actual owner account
+                const ownerAccount = ownerInfo[0];
+                console.log('Token owner account:', ownerAccount);
+                
+                // Verify the owner matches the current user
+                // Note: We don't need to check this for basic ownership verification
+                // The backend emporium will verify ownership when listing
+            } catch (error) {
+                console.error('Ownership verification failed:', error);
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                throw new Error(`Unable to verify token ownership: ${errorMessage}`);
+            }
+
+            // Step 2: Check if token is already approved
+            const isApproved = await actorIcrc7.icrc37_is_approved([
+                {
+                    token_id: tokenIdNat,
+                    from_subaccount: [],
+                    spender: {
+                        owner: Principal.fromText(emporium_canister_id),
+                        subaccount: [],
+                    },
+                },
+            ]);
+
+            // Step 3: Approve if not already approved
+            if (isApproved[0] === false) {
+                const resultApproveIcrc7 = await actorIcrc7.icrc37_approve_tokens([
+                    {
+                        token_id: tokenIdNat,
+                        approval_info: {
+                            memo: [],
+                            from_subaccount: [],
+                            created_at_time: [],
+                            expires_at: [],
+                            spender: {
+                                owner: Principal.fromText(emporium_canister_id),
+                                subaccount: [],
+                            },
+                        },
+                    },
+                ]);
+                if ("Err" in resultApproveIcrc7) {
+                    throw new Error("Approval failed");
+                }
+            }
+
+            // Step 4: Check if token is already listed
+            try {
+                const listingStatus = await actorEmporium.get_listed_tokens([tokenIdNat]);
+                if (listingStatus[0] && listingStatus[0].length > 0) {
+                    console.warn('Token is already listed:', listingStatus[0]);
+                    throw new Error("This NFT is already listed for sale");
+                }
+            } catch (error) {
+                console.log('Listing check failed (probably not listed):', error);
+            }
+
+            // Step 5: List the NFT
+            const result = await actorEmporium.list_nft(tokenIdNat, priceFormat);
+
+            if ("Err" in result) {
+                throw new Error(result.Err);
+            }
+
+            return { tokenId, price };
+        },
+        onSuccess: ({ tokenId, price }) => {
+            toast.success(`Audio NFT listed for ${price} ICP`);
+            
+            // Close the dialog
+            dispatch(setSelling(""));
+
+            // Refresh archive data to update UI - use Redux thunk instead of query client
+            if (user?.principal) {
+                dispatch(fetchUserAudioNFTs({ userPrincipal: user.principal }));
+            }
+            queryClient.invalidateQueries({ queryKey: ["archive-audio-nfts"] });
+        },
+        onError: (error: Error) => {
+            console.error("Error listing audio NFT:", error);
+            toast.error(`Failed to list audio NFT: ${error.message}`);
+        },
+    });
+
+    return {
+        sellAudio: sellMutation.mutate,
+        isLoading: sellMutation.isPending,
+        error: sellMutation.error?.message || null,
+    };
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/hooks/useStudioAudioNFTs.ts b/src/alex_frontend/src/features/sonora/hooks/useStudioAudioNFTs.ts
new file mode 100644
index 000000000..bd198ec65
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/hooks/useStudioAudioNFTs.ts
@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { fetchStudioAudioNFTs } from "../studioSlice";
+
+// Hook for user's listed audio NFTs (follows Market page pattern)
+export const useStudioAudioNFTs = () => {
+    const dispatch = useAppDispatch();
+    const { audios, loading, loadingMore, error, pagination } = useAppSelector((state) => state.studio);
+
+    const refreshStudioAudioNFTs = (userPrincipal: string, page = 1, pageSize = 8, appendMode = false) => {
+        dispatch(fetchStudioAudioNFTs({ userPrincipal, page, pageSize, appendMode }));
+    };
+
+    return {
+        audios,
+        loading,
+        loadingMore,
+        error,
+        pagination,
+        refreshStudioAudioNFTs,
+    };
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/hooks/useUnlistAudio.ts b/src/alex_frontend/src/features/sonora/hooks/useUnlistAudio.ts
new file mode 100644
index 000000000..5f8896812
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/hooks/useUnlistAudio.ts
@@ -0,0 +1,59 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import useEmporium from "@/hooks/actors/useEmporium";
+import { toast } from "sonner";
+import { setUnlisting, fetchStudioAudioNFTs } from "../studioSlice";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+
+interface UnlistAudioParams {
+    arweaveId: string;
+    tokenId: string;
+}
+
+export const useUnlistAudio = () => {
+    const queryClient = useQueryClient();
+    const dispatch = useAppDispatch();
+    const { actor: actorEmporium } = useEmporium();
+    const { user } = useAppSelector((state) => state.auth);
+
+    const unlistMutation = useMutation({
+        mutationFn: async ({ tokenId }: UnlistAudioParams) => {
+            if (!actorEmporium) {
+                throw new Error("Emporium actor not available");
+            }
+
+            const tokenIdNat = BigInt(tokenId);
+
+            // Remove the NFT from marketplace
+            const result = await actorEmporium.remove_nft_listing(tokenIdNat);
+
+            if ("Err" in result) {
+                throw new Error(result.Err);
+            }
+
+            return { tokenId };
+        },
+        onSuccess: ({ tokenId }) => {
+            toast.success("Audio NFT removed from marketplace");
+            
+            // Close the dialog
+            dispatch(setUnlisting(""));
+
+            // Refresh studio data to update UI
+            if (user?.principal) {
+                dispatch(fetchStudioAudioNFTs({ userPrincipal: user.principal }));
+            }
+            queryClient.invalidateQueries({ queryKey: ["studio-audio-nfts"] });
+        },
+        onError: (error: Error) => {
+            console.error("Error unlisting audio NFT:", error);
+            toast.error(`Failed to unlist: ${error.message}`);
+        },
+    });
+
+    return {
+        unlistAudio: unlistMutation.mutate,
+        isLoading: unlistMutation.isPending,
+        error: unlistMutation.error?.message || null,
+    };
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/hooks/useUpdateAudio.ts b/src/alex_frontend/src/features/sonora/hooks/useUpdateAudio.ts
new file mode 100644
index 000000000..e3236908f
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/hooks/useUpdateAudio.ts
@@ -0,0 +1,65 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import useEmporium from "@/hooks/actors/useEmporium";
+import { toast } from "sonner";
+import { setEditing, fetchStudioAudioNFTs } from "../studioSlice";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+
+interface UpdateAudioParams {
+    arweaveId: string;
+    tokenId: string;
+    newPrice: string;
+}
+
+export const useUpdateAudio = () => {
+    const queryClient = useQueryClient();
+    const dispatch = useAppDispatch();
+    const { actor: actorEmporium } = useEmporium();
+    const { user } = useAppSelector((state) => state.auth);
+
+    const updateMutation = useMutation({
+        mutationFn: async ({ tokenId, newPrice }: UpdateAudioParams) => {
+            if (!actorEmporium) {
+                throw new Error("Emporium actor not available");
+            }
+
+            if (!newPrice || isNaN(Number(newPrice)) || Number(newPrice) <= 0) {
+                throw new Error("Invalid price");
+            }
+
+            const tokenIdNat = BigInt(tokenId);
+            const priceFormat: bigint = BigInt(Math.round(Number(newPrice) * 10 ** 8));
+
+            // Update the NFT price
+            const result = await actorEmporium.update_nft_price(tokenIdNat, priceFormat);
+
+            if ("Err" in result) {
+                throw new Error(result.Err);
+            }
+
+            return { tokenId, newPrice };
+        },
+        onSuccess: ({ tokenId, newPrice }) => {
+            toast.success(`Audio NFT price updated to ${newPrice} ICP`);
+            
+            // Close the dialog
+            dispatch(setEditing(""));
+
+            // Refresh studio data to update UI
+            if (user?.principal) {
+                dispatch(fetchStudioAudioNFTs({ userPrincipal: user.principal }));
+            }
+            queryClient.invalidateQueries({ queryKey: ["studio-audio-nfts"] });
+        },
+        onError: (error: Error) => {
+            console.error("Error updating audio NFT price:", error);
+            toast.error(`Failed to update price: ${error.message}`);
+        },
+    });
+
+    return {
+        updateAudio: updateMutation.mutate,
+        isLoading: updateMutation.isPending,
+        error: updateMutation.error?.message || null,
+    };
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/hooks/useUserAudioNFTs.ts b/src/alex_frontend/src/features/sonora/hooks/useUserAudioNFTs.ts
new file mode 100644
index 000000000..e91cf297c
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/hooks/useUserAudioNFTs.ts
@@ -0,0 +1,25 @@
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { ArchiveAudio } from "../types";
+import { useCallback } from "react";
+import { fetchUserAudioNFTs } from "../archiveSlice";
+
+export const useUserAudioNFTs = () => {
+  const dispatch = useAppDispatch();
+  const { audios, loading, loadingMore, error, pagination } = useAppSelector(
+    (state) => state.archive
+  );
+
+  const refreshAudioNFTs = useCallback((userPrincipal: string, page = 1, appendMode = false) => {
+    return dispatch(fetchUserAudioNFTs({ userPrincipal, page, pageSize: 8, appendMode }));
+  }, [dispatch]);
+
+  return {
+    audios,
+    loading,
+    loadingMore,
+    error,
+    pagination,
+    refreshAudioNFTs,
+  };
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/marketSlice.ts b/src/alex_frontend/src/features/sonora/marketSlice.ts
new file mode 100644
index 000000000..adb250b4b
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/marketSlice.ts
@@ -0,0 +1,121 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { MarketAudio } from "./types";
+import { fetchMarketAudioNFTs as fetchMarketAudioNFTsAPI, MarketAudioResponse } from "./api/fetchMarketAudioNFTs";
+
+export interface MarketState {
+  audios: MarketAudio[];
+  loading: boolean;
+  loadingMore: boolean; // For append mode
+  error: string | null;
+  pagination: {
+    page: number;
+    totalPages: number;
+    totalCount: number;
+  };
+  purchasing: string; // arweave_id for purchase actions
+}
+
+const initialState: MarketState = {
+  audios: [],
+  loading: false,
+  loadingMore: false,
+  error: null,
+  pagination: {
+    page: 1, // API uses 1-based indexing (like marketplace)
+    totalPages: 0,
+    totalCount: 0,
+  },
+  purchasing: '',
+};
+
+// Async thunk for fetching marketplace audio NFTs (following archiveSlice pattern)
+export const fetchMarketAudioNFTs = createAsyncThunk<
+  MarketAudioResponse & { appendMode?: boolean },
+  { page?: number; pageSize?: number; appendMode?: boolean; currentUserPrincipal?: string },
+  { rejectValue: string }
+>(
+  "market/fetchMarketAudioNFTs",
+  async ({ page = 1, pageSize = 8, appendMode = false, currentUserPrincipal }, { rejectWithValue, signal }) => {
+    try {
+      console.log("Market: Fetching marketplace audio NFTs, page:", page, "pageSize:", pageSize, "excluding user:", currentUserPrincipal);
+      
+      // Fetch marketplace audio NFTs using our API
+      const result = await fetchMarketAudioNFTsAPI({ page, pageSize, currentUserPrincipal, signal });
+      
+      console.log("Market slice: API returned", result.audios.length, "audio NFTs");
+
+      return {
+        ...result,
+        appendMode
+      };
+    } catch (error) {
+      console.error("Error fetching market audio NFTs:", error);
+      return rejectWithValue("Failed to fetch market audio NFTs");
+    }
+  }
+);
+
+const marketSlice = createSlice({
+  name: "market",
+  initialState,
+  reducers: {
+    setPage: (state, action) => {
+      state.pagination.page = action.payload;
+    },
+    setPurchasing: (state, action) => {
+      state.purchasing = action.payload;
+    },
+    clearError: (state) => {
+      state.error = null;
+    },
+    resetMarket: () => ({
+      ...initialState,
+      loading: false,
+      loadingMore: false,
+    }),
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchMarketAudioNFTs.pending, (state, action) => {
+        const { appendMode } = action.meta.arg;
+        if (appendMode) {
+          state.loadingMore = true;
+        } else {
+          // Only show full loading if there are no existing audios
+          if (state.audios.length === 0) {
+            state.loading = true;
+          } else {
+            state.loadingMore = true;
+          }
+        }
+        state.error = null;
+      })
+      .addCase(fetchMarketAudioNFTs.fulfilled, (state, action) => {
+        state.loading = false;
+        state.loadingMore = false;
+        
+        if (action.payload.appendMode) {
+          // Append to existing audios
+          state.audios = [...state.audios, ...action.payload.audios];
+        } else {
+          // Replace audios (first page or refresh)
+          state.audios = action.payload.audios;
+        }
+        
+        state.pagination = {
+          page: action.payload.page,
+          totalPages: action.payload.totalPages,
+          totalCount: action.payload.totalCount,
+        };
+        state.error = null;
+      })
+      .addCase(fetchMarketAudioNFTs.rejected, (state, action) => {
+        state.loading = false;
+        state.loadingMore = false;
+        state.error = action.payload || "Failed to fetch market audio NFTs";
+      });
+  },
+});
+
+export const { setPage, setPurchasing, clearError, resetMarket } = marketSlice.actions;
+export default marketSlice.reducer;
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/sonoraSlice.ts b/src/alex_frontend/src/features/sonora/sonoraSlice.ts
index 3b9bd8d06..a3d5e35cd 100644
--- a/src/alex_frontend/src/features/sonora/sonoraSlice.ts
+++ b/src/alex_frontend/src/features/sonora/sonoraSlice.ts
@@ -1,9 +1,10 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { Audio, SonoraState } from "./types";
+import browseReducer from "./browse/browseSlice";
+import { Audio } from "./types";
 
-const initialState: SonoraState = {
-    selected: null,
-    playing: false,
+// Keep minimal state for AudioPlayer component compatibility
+const initialState = {
+    selected: null as Audio | null,
 };
 
 const sonoraSlice = createSlice({
@@ -11,22 +12,10 @@ const sonoraSlice = createSlice({
     initialState,
     reducers: {
         setSelected: (state, action: PayloadAction<Audio>) => {
-            state.playing = false;
             state.selected = action.payload;
         },
         clearSelected: (state) => {
             state.selected = null;
-            state.playing = false;
-        },
-        setPlaying: (state, action: PayloadAction<boolean>) => {
-            state.playing = action.payload;
-        },
-        playAudio: (state, action: PayloadAction<Audio>) => {
-            state.selected = action.payload;
-            state.playing = true;
-        },
-        pauseAudio: (state) => {
-            state.playing = false;
         },
     },
 });
@@ -34,9 +23,31 @@ const sonoraSlice = createSlice({
 export const {
     setSelected,
     clearSelected,
-    setPlaying,
-    playAudio,
-    pauseAudio,
 } = sonoraSlice.actions;
 
-export default sonoraSlice.reducer;
\ No newline at end of file
+// Create a custom root reducer that combines the main slice with sub-feature slices
+const sonoraReducer = (state: any = {}, action: any) => {
+    // Check if this is the initial empty state
+    const isInitialState = Object.keys(state).length === 0;
+    
+    // Extract the main state properties (excluding nested reducers)
+    const { browse, ...mainStateProps } = state;
+    
+    // For initial state, pass undefined to get proper initial values
+    // Otherwise, pass the current main state props
+    const mainState = sonoraSlice.reducer(
+        isInitialState ? undefined : mainStateProps, 
+        action
+    );
+
+    // Then get state from the browse sub-slice
+    const browseState = browseReducer(state?.browse, action);
+
+    // Return combined state with main properties at root level
+    return {
+        ...mainState,
+        browse: browseState,
+    };
+};
+
+export default sonoraReducer;
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/studioSlice.ts b/src/alex_frontend/src/features/sonora/studioSlice.ts
new file mode 100644
index 000000000..2256f6b5b
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/studioSlice.ts
@@ -0,0 +1,122 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { StudioAudio } from "./types";
+import { fetchStudioAudioNFTs as fetchStudioAudioNFTsAPI, StudioAudioResponse } from "./api/fetchStudioAudioNFTs";
+
+export interface StudioState {
+  audios: StudioAudio[];
+  loading: boolean;
+  loadingMore: boolean; // For append mode
+  error: string | null;
+  pagination: {
+    page: number;
+    totalPages: number;
+    totalCount: number;
+  };
+  editing: string; // arweave_id, empty string for no selection
+  unlisting: string; // arweave_id, empty string for no selection
+}
+
+const initialState: StudioState = {
+  audios: [],
+  loading: false,
+  loadingMore: false,
+  error: null,
+  pagination: {
+    page: 1, // API uses 1-based indexing (like marketplace)
+    totalPages: 0,
+    totalCount: 0,
+  },
+  editing: '',
+  unlisting: '',
+};
+
+// Async thunk for fetching user's listed audio NFTs (following marketSlice pattern)
+export const fetchStudioAudioNFTs = createAsyncThunk<
+  StudioAudioResponse & { appendMode?: boolean },
+  { userPrincipal: string; page?: number; pageSize?: number; appendMode?: boolean },
+  { rejectValue: string }
+>(
+  "studio/fetchStudioAudioNFTs",
+  async ({ userPrincipal, page = 1, pageSize = 8, appendMode = false }, { rejectWithValue, signal }) => {
+    try {
+      console.log("Studio: Fetching user's listed audio NFTs, user:", userPrincipal, "page:", page, "pageSize:", pageSize);
+      
+      // Fetch user's marketplace listings using our corrected API
+      const result = await fetchStudioAudioNFTsAPI({ userPrincipal, page, pageSize, signal });
+      
+      console.log("Studio slice: API returned", result.audios.length, "audio NFTs");
+
+      return {
+        ...result,
+        appendMode
+      };
+    } catch (error) {
+      console.error("Error fetching studio audio NFTs:", error);
+      return rejectWithValue("Failed to fetch studio audio NFTs");
+    }
+  }
+);
+
+const studioSlice = createSlice({
+  name: "studio",
+  initialState,
+  reducers: {
+    setPage: (state, action) => {
+      state.pagination.page = action.payload;
+    },
+    setEditing: (state, action) => {
+      state.editing = action.payload;
+    },
+    setUnlisting: (state, action) => {
+      state.unlisting = action.payload;
+    },
+    clearError: (state) => {
+      state.error = null;
+    },
+    resetStudio: () => initialState,
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchStudioAudioNFTs.pending, (state, action) => {
+        const { appendMode } = action.meta.arg;
+        if (appendMode) {
+          state.loadingMore = true;
+        } else {
+          // Only show full loading if there are no existing audios
+          if (state.audios.length === 0) {
+            state.loading = true;
+          } else {
+            state.loadingMore = true;
+          }
+        }
+        state.error = null;
+      })
+      .addCase(fetchStudioAudioNFTs.fulfilled, (state, action) => {
+        state.loading = false;
+        state.loadingMore = false;
+        
+        if (action.payload.appendMode) {
+          // Append to existing audios
+          state.audios = [...state.audios, ...action.payload.audios];
+        } else {
+          // Replace audios (first page or refresh)
+          state.audios = action.payload.audios;
+        }
+        
+        state.pagination = {
+          page: action.payload.page,
+          totalPages: action.payload.totalPages,
+          totalCount: action.payload.totalCount,
+        };
+        state.error = null;
+      })
+      .addCase(fetchStudioAudioNFTs.rejected, (state, action) => {
+        state.loading = false;
+        state.loadingMore = false;
+        state.error = action.payload || "Failed to fetch studio audio NFTs";
+      });
+  },
+});
+
+export const { setPage, setEditing, setUnlisting, clearError, resetStudio } = studioSlice.actions;
+export default studioSlice.reducer;
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/types.ts b/src/alex_frontend/src/features/sonora/types.ts
index 368f7b4ed..f790209e0 100644
--- a/src/alex_frontend/src/features/sonora/types.ts
+++ b/src/alex_frontend/src/features/sonora/types.ts
@@ -1,11 +1,55 @@
 export interface Audio {
     id: string;
-    type: string;
-    size: string;
+    type: string | null;
+    size: string | null;
     timestamp: string;
 }
 
-export interface SonoraState {
-    selected: Audio | null;
-    playing: boolean;
+export interface MarketAudio extends Audio {
+    price: string;
+    owner: string;
+    token_id: string;
+}
+
+export interface StudioAudio extends Audio {
+    price: string;
+    owner: string;
+    token_id: string;
+}
+
+export interface ArchiveAudio extends Audio {
+    token_id: string;
+}
+
+export interface ArweaveAudio {
+    id: string;
+    data: {
+        size: string;
+        type: string;
+    };
+    tags: Array<{
+        name: string;
+        value: string;
+    }>;
+    block: {
+        height: number;
+        timestamp: number;
+    };
+    minted?: boolean;
+}
+
+export interface BrowseState {
+    audios: ArweaveAudio[];
+    loading: boolean;
+    error: string | null;
+    cursor: string | null;
+    hasNext: boolean;
+}
+
+// SonoraState removed - we use global AudioPlayer state
+
+export interface FetchAudiosResponse {
+    audios: ArweaveAudio[];
+    cursor: string | null;
+    hasNext: boolean;
 }
\ No newline at end of file
diff --git a/src/alex_frontend/src/features/sonora/utils/audioFilters.ts b/src/alex_frontend/src/features/sonora/utils/audioFilters.ts
new file mode 100644
index 000000000..7456f602b
--- /dev/null
+++ b/src/alex_frontend/src/features/sonora/utils/audioFilters.ts
@@ -0,0 +1,97 @@
+// Utility functions for filtering audio content in Sonora
+
+// Check if a content type is an audio MIME type
+export const isAudioContentType = (contentType: string): boolean => {
+  if (!contentType || typeof contentType !== 'string') {
+    return false;
+  }
+  
+  // Normalize the content type by removing charset and other parameters
+  const normalizedType = contentType.toLowerCase().split(';')[0].trim();
+  
+  // Check for audio MIME types
+  return normalizedType.startsWith('audio/');
+};
+
+// Common audio MIME types we support
+export const SUPPORTED_AUDIO_TYPES = [
+  'audio/mp3',
+  'audio/mpeg',
+  'audio/wav',
+  'audio/wave',
+  'audio/webm',
+  'audio/ogg',
+  'audio/aac',
+  'audio/flac',
+  'audio/m4a',
+  'audio/mp4',
+  'audio/x-wav',
+  'audio/x-mpeg',
+  'audio/x-mp3',
+] as const;
+
+// Check if content type is in our supported list
+export const isSupportedAudioType = (contentType: string): boolean => {
+  if (!contentType) return false;
+  
+  const normalizedType = contentType.toLowerCase().split(';')[0].trim();
+  return SUPPORTED_AUDIO_TYPES.includes(normalizedType as any);
+};
+
+// Extract audio type for display (remove 'audio/' prefix)
+export const getDisplayAudioType = (contentType: string): string => {
+  if (!contentType) return 'unknown';
+  
+  const normalizedType = contentType.toLowerCase().split(';')[0].trim();
+  if (normalizedType.startsWith('audio/')) {
+    return normalizedType.replace('audio/', '');
+  }
+  
+  return normalizedType;
+};
+
+// Check if transaction data indicates audio content
+export const isAudioTransaction = (transaction: any): boolean => {
+  // Check various possible fields where content type might be stored
+  if (transaction?.contentType) {
+    return isAudioContentType(transaction.contentType);
+  }
+  
+  if (transaction?.content_type) {
+    return isAudioContentType(transaction.content_type);
+  }
+  
+  if (transaction?.type) {
+    return isAudioContentType(transaction.type);
+  }
+  
+  // Check tags if available (common in Arweave transactions)
+  if (transaction?.tags) {
+    const contentTypeTag = transaction.tags.find((tag: any) => 
+      tag.name?.toLowerCase() === 'content-type'
+    );
+    if (contentTypeTag?.value) {
+      return isAudioContentType(contentTypeTag.value);
+    }
+  }
+  
+  // Check metadata if available
+  if (transaction?.metadata?.contentType) {
+    return isAudioContentType(transaction.metadata.contentType);
+  }
+  
+  return false;
+};
+
+// Filter array of transactions/NFTs for audio content
+export const filterAudioItems = <T extends Record<string, any>>(
+  items: T[], 
+  getContentType?: (item: T) => string
+): T[] => {
+  return items.filter(item => {
+    if (getContentType) {
+      return isAudioContentType(getContentType(item));
+    }
+    return isAudioTransaction(item);
+  });
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/layouts/SonoraLayout.tsx b/src/alex_frontend/src/layouts/SonoraLayout.tsx
index 899fb4a3c..8a4178872 100644
--- a/src/alex_frontend/src/layouts/SonoraLayout.tsx
+++ b/src/alex_frontend/src/layouts/SonoraLayout.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
-import AudioPlayer from "@/components/AudioPlayer";
 import { useAppDispatch } from "@/store/hooks/useAppDispatch";
 import { clearSelected } from "@/features/sonora/sonoraSlice";
 
@@ -14,7 +13,7 @@ function SonoraLayout() {
 	}, [location.pathname, dispatch]);
 
 	return (
-		<div className="flex-grow bg-background p-4 grid grid-rows-[auto_auto_1fr_auto] gap-8 min-h-0">
+		<div className="flex-grow bg-background p-4 grid grid-rows-[auto_auto_1fr] gap-8 min-h-0">
 			<div className="flex flex-col">
 				<h1 className="text-xxltabsheading font-syne font-bold text-center text-primary">
 					Sonora
@@ -125,8 +124,6 @@ function SonoraLayout() {
 			</div>
 
 			<Outlet />
-
-			<AudioPlayer />
 		</div>
 	);
 }
diff --git a/src/alex_frontend/src/pages/sonora/ArchivePage.tsx b/src/alex_frontend/src/pages/sonora/ArchivePage.tsx
index 9e7faa441..cc168f3f5 100644
--- a/src/alex_frontend/src/pages/sonora/ArchivePage.tsx
+++ b/src/alex_frontend/src/pages/sonora/ArchivePage.tsx
@@ -1,16 +1,33 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button } from "@/lib/components/button";
-import { Archive, User, FileAudio, Download, ArrowDown } from "lucide-react";
-import { mockAudio } from "@/features/sonora/data";
+import { Archive, User, FileAudio, Download, ArrowDown, LoaderPinwheel } from "lucide-react";
 import { AudioCard } from "@/features/sonora/components/AudioCard";
-import { PlayPauseButton } from "@/features/sonora/components/PlayPauseButton";
 import { SellButton } from "@/features/sonora/components/SellButton";
+import { useUserAudioNFTs } from "@/features/sonora/hooks/useUserAudioNFTs";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
 
 const SonoraArchivePage: React.FC = () => {
+	const { user } = useAppSelector((state) => state.auth);
+	const { audios, loading, loadingMore, error, pagination, refreshAudioNFTs } = useUserAudioNFTs();
+
+	// Fetch user's audio NFTs when component mounts or user changes
+	useEffect(() => {
+		if (user?.principal) {
+			refreshAudioNFTs(user.principal, 1, false); // First page, not append mode
+		}
+	}, [user?.principal, refreshAudioNFTs]);
+
+	// Load More handler
+	const handleLoadMore = () => {
+		if (user?.principal && !loadingMore && pagination.hasMore) {
+			refreshAudioNFTs(user.principal, pagination.page + 1, true); // Next page, append mode
+		}
+	};
+
 	return (
-		<div className="h-[62vh] grid grid-cols-5 grid-rows-1">
+		<div className="grid grid-cols-5 min-h-full">
 			{/* Left Sidebar */}
-			<div className="col-span-1 flex flex-col gap-4 items-center">
+			<div className="col-span-1 flex flex-col gap-4 items-center sticky top-0 h-fit">
 				<div className="w-full bg-card rounded-lg border p-5">
 					<div className="space-y-4">
 						<div className="flex items-center gap-2">
@@ -58,33 +75,72 @@ const SonoraArchivePage: React.FC = () => {
 						</div>
 						<div className="pt-2 border-t">
 							<p className="text-xs text-muted-foreground">
-								<span className="font-medium">{mockAudio.length}</span> items in collection
+								<span className="font-medium">{audios.length}</span> of <span className="font-medium">{pagination.totalCount}</span> items
 							</p>
 						</div>
 					</div>
 				</div>
 
 				{/* Load More */}
-				<Button variant="outline" className="gap-2">
-					<ArrowDown size={16} />
-					Load More
-				</Button>
+				{pagination.hasMore && (
+					<Button 
+						variant="outline" 
+						className="gap-2" 
+						onClick={handleLoadMore}
+						disabled={loadingMore}
+					>
+						{loadingMore ? (
+							<LoaderPinwheel size={16} className="animate-spin" />
+						) : (
+							<ArrowDown size={16} />
+						)}
+						{loadingMore ? "Loading..." : "Load More"}
+					</Button>
+				)}
 			</div>
 
 			{/* Audio Grid */}
 			<div className="col-span-4 space-y-4 overflow-y-auto px-6">
-				{mockAudio.map((item) => (
-					<AudioCard 
-						key={item.id} 
-						item={item}
-						actions={
-							<>
-								<SellButton item={item} />
-								<PlayPauseButton item={item} />
-							</>
-						}
-					/>
-				))}
+				{loading ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<LoaderPinwheel className="w-8 h-8 animate-spin mx-auto mb-4" />
+							<p className="text-muted-foreground">Loading your audio NFTs...</p>
+						</div>
+					</div>
+				) : error ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<p className="text-destructive font-medium">Error loading NFTs</p>
+							<p className="text-muted-foreground text-sm mt-1">{error}</p>
+							<Button 
+								onClick={() => user?.principal && refreshAudioNFTs(user.principal, 1, false)}
+								className="mt-4"
+								variant="outline"
+							>
+								Try Again
+							</Button>
+						</div>
+					</div>
+				) : audios.length === 0 ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<FileAudio className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
+							<h3 className="text-lg font-medium mb-2">No Audio NFTs Found</h3>
+							<p className="text-muted-foreground">You haven't minted any audio NFTs yet.</p>
+						</div>
+					</div>
+				) : (
+					audios.map((item) => (
+						<AudioCard 
+							key={item.id} 
+							item={item}
+							actions={
+								<SellButton item={item} tokenId={item.token_id} />
+							}
+						/>
+					))
+				)}
 			</div>
 		</div>
 	);
diff --git a/src/alex_frontend/src/pages/sonora/MarketPage.tsx b/src/alex_frontend/src/pages/sonora/MarketPage.tsx
index e41a4dc5c..97c3983cd 100644
--- a/src/alex_frontend/src/pages/sonora/MarketPage.tsx
+++ b/src/alex_frontend/src/pages/sonora/MarketPage.tsx
@@ -1,16 +1,29 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button } from "@/lib/components/button";
-import { Store, TrendingUp, Search, Filter, ArrowDown, FileAudio } from "lucide-react";
-import { mockAudio } from "@/features/sonora/data";
+import { Store, TrendingUp, Search, Filter, ArrowDown, FileAudio, LoaderPinwheel } from "lucide-react";
 import { AudioCard } from "@/features/sonora/components/AudioCard";
-import { PlayPauseButton } from "@/features/sonora/components/PlayPauseButton";
 import { BuyButton } from "@/features/sonora/components/BuyButton";
+import { useMarketAudioNFTs } from "@/features/sonora/hooks/useMarketAudioNFTs";
 
 const SonoraMarketPage: React.FC = () => {
+	const { audios, loading, loadingMore, error, pagination, refreshMarketAudioNFTs } = useMarketAudioNFTs();
+
+	// Fetch market audio NFTs on component mount
+	useEffect(() => {
+		refreshMarketAudioNFTs(1, 8, false); // First page, not append mode
+	}, []);
+
+	// Load More handler
+	const handleLoadMore = () => {
+		if (!loadingMore && pagination.page < pagination.totalPages) {
+			refreshMarketAudioNFTs(pagination.page + 1, 8, true); // Next page, append mode
+		}
+	};
+
 	return (
-		<div className="h-[62vh] grid grid-cols-5 grid-rows-1">
+		<div className="grid grid-cols-5 min-h-full">
 			{/* Left Sidebar */}
-			<div className="col-span-1 flex flex-col gap-4 items-center">
+			<div className="col-span-1 flex flex-col gap-4 items-center sticky top-0 h-fit">
 				<div className="w-full bg-card rounded-lg border p-5">
 					<div className="space-y-4">
 						<div className="flex items-center gap-2">
@@ -58,33 +71,78 @@ const SonoraMarketPage: React.FC = () => {
 						</div>
 						<div className="pt-2 border-t">
 							<p className="text-xs text-muted-foreground">
-								<span className="font-medium">{mockAudio.length}</span> items for sale
+								<span className="font-medium">{audios.length}</span> of <span className="font-medium">{pagination.totalCount}</span> items shown
 							</p>
 						</div>
 					</div>
 				</div>
 
 				{/* Load More */}
-				<Button variant="outline" className="gap-2">
-					<ArrowDown size={16} />
-					Load More
-				</Button>
+				{pagination.page < pagination.totalPages && (
+					<Button 
+						variant="outline" 
+						className="gap-2" 
+						onClick={handleLoadMore}
+						disabled={loadingMore}
+					>
+						{loadingMore ? (
+							<LoaderPinwheel size={16} className="animate-spin" />
+						) : (
+							<ArrowDown size={16} />
+						)}
+						{loadingMore ? "Loading..." : "Load More"}
+					</Button>
+				)}
 			</div>
 
 			{/* Audio Grid */}
 			<div className="col-span-4 space-y-4 overflow-y-auto px-6">
-				{mockAudio.map((item) => (
-					<AudioCard 
-						key={item.id} 
-						item={item}
-						actions={
-							<>
-								<BuyButton item={item} />
-								<PlayPauseButton item={item} />
-							</>
-						}
-					/>
-				))}
+				{loading ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<LoaderPinwheel className="w-8 h-8 animate-spin mx-auto mb-4" />
+							<p className="text-muted-foreground">Loading marketplace audio NFTs...</p>
+						</div>
+					</div>
+				) : error ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<p className="text-destructive font-medium">Error loading marketplace</p>
+							<p className="text-muted-foreground text-sm mt-1">{error}</p>
+							<Button 
+								onClick={() => refreshMarketAudioNFTs(1, 8, false)}
+								className="mt-4"
+								variant="outline"
+							>
+								Try Again
+							</Button>
+						</div>
+					</div>
+				) : audios.length === 0 ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<Store className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
+							<h3 className="text-lg font-medium mb-2">No Items for Sale</h3>
+							<p className="text-muted-foreground">There are currently no audio NFTs listed in the marketplace.</p>
+						</div>
+					</div>
+				) : (
+					audios.map((audio) => (
+						<AudioCard 
+							key={audio.id} 
+							item={audio}
+							price={audio.price}
+							owner={audio.owner}
+							actions={
+								<BuyButton 
+									item={audio} 
+									price={audio.price.replace(' ICP', '')} 
+									tokenId={audio.token_id} 
+								/>
+							}
+						/>
+					))
+				)}
 			</div>
 		</div>
 	);
diff --git a/src/alex_frontend/src/pages/sonora/RecordPage.tsx b/src/alex_frontend/src/pages/sonora/RecordPage.tsx
index 831320b4d..6c3668940 100644
--- a/src/alex_frontend/src/pages/sonora/RecordPage.tsx
+++ b/src/alex_frontend/src/pages/sonora/RecordPage.tsx
@@ -1,26 +1,31 @@
 import React, { useState, useRef } from "react";
 import { Button } from "@/lib/components/button";
-import { Mic, Square, Play, Upload, Trash2 } from "lucide-react";
+import { Mic, Square, Upload, Trash2, LoaderPinwheel } from "lucide-react";
 import { Link } from "@tanstack/react-router";
 import { useAppDispatch } from "@/store/hooks/useAppDispatch";
-import { playAudio, clearSelected } from "@/features/sonora/sonoraSlice";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { clearSelected, setSelected } from "@/features/sonora/sonoraSlice";
 import { Audio } from "@/features/sonora/types";
+import { AudioCard } from "@/features/sonora/components/AudioCard";
+import { useUploadAndMint } from "@/features/pinax/hooks/useUploadAndMint";
 
 const SonoraRecordPage: React.FC = () => {
 	const [isRecording, setIsRecording] = useState(false);
 	const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null);
 	const [recordedUrl, setRecordedUrl] = useState<string>("");
 	const [recordingTime, setRecordingTime] = useState(0);
-	const [error, setError] = useState<string>("");
+	const [recordingError, setRecordingError] = useState<string>("");
+	const { uploadAndMint, isProcessing, error: uploadError, success, progress, estimating, uploading, minting, resetUpload } = useUploadAndMint();
 	
 	const mediaRecorderRef = useRef<MediaRecorder | null>(null);
 	const streamRef = useRef<MediaStream | null>(null);
 	const timerRef = useRef<NodeJS.Timeout | null>(null);
 	const dispatch = useAppDispatch();
+	const { selected } = useAppSelector((state) => state.sonora);
 
 	const startRecording = async () => {
 		try {
-			setError("");
+			setRecordingError("");
 			const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 			streamRef.current = stream;
 			
@@ -40,6 +45,15 @@ const SonoraRecordPage: React.FC = () => {
 				setRecordedBlob(blob);
 				const url = URL.createObjectURL(blob);
 				setRecordedUrl(url);
+				
+				// Automatically create audio data for preview
+				const audioData: Audio = {
+					id: url,
+					type: 'audio/webm',
+					size: `${(blob.size / (1024 * 1024)).toFixed(2)} MB`,
+					timestamp: new Date().toISOString()
+				};
+				dispatch(setSelected(audioData));
 			};
 			
 			mediaRecorder.start();
@@ -52,7 +66,7 @@ const SonoraRecordPage: React.FC = () => {
 			}, 1000);
 			
 		} catch (err) {
-			setError("Failed to access microphone. Please check permissions.");
+			setRecordingError("Failed to access microphone. Please check permissions.");
 		}
 	};
 
@@ -71,19 +85,6 @@ const SonoraRecordPage: React.FC = () => {
 		}
 	};
 
-	const playRecording = () => {
-		if (recordedUrl && recordedBlob) {
-			// Create Audio object for Redux
-			const audioData: Audio = {
-				id: recordedUrl, // Use object URL as ID for recorded files
-				type: 'audio/webm',
-				size: `${(recordedBlob.size / (1024 * 1024)).toFixed(2)} MB`,
-				timestamp: new Date().toISOString()
-			};
-			
-			dispatch(playAudio(audioData));
-		}
-	};
 
 	const deleteRecording = () => {
 		if (recordedUrl) {
@@ -93,13 +94,40 @@ const SonoraRecordPage: React.FC = () => {
 		setRecordedUrl("");
 		setRecordingTime(0);
 		dispatch(clearSelected());
+		// Reset upload state
+		resetUpload();
 	};
 
-	const handleUpload = () => {
+	const handleUpload = async () => {
 		if (recordedBlob) {
-			// TODO: Implement upload logic
-			console.log("Uploading recorded audio");
-			alert("Upload functionality coming soon!");
+			try {
+				// Convert blob to File object
+				const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+				const fileName = `sonora-recording-${timestamp}.webm`;
+				const file = new File([recordedBlob], fileName, { type: 'audio/webm' });
+				
+				const transactionId = await uploadAndMint(file);
+				// Replace blob URL with Arweave transaction URL
+				if (recordedUrl) {
+					URL.revokeObjectURL(recordedUrl);
+				}
+				const arweaveUrl = `https://arweave.net/${transactionId}`;
+				setRecordedUrl(arweaveUrl);
+				
+				// Update the audio data with Arweave URL
+				const audioData: Audio = {
+					id: transactionId, // Use transaction ID as the ID
+					type: 'audio/webm',
+					size: `${(recordedBlob.size / (1024 * 1024)).toFixed(2)} MB`,
+					timestamp: new Date().toISOString()
+				};
+				dispatch(setSelected(audioData));
+				
+				// Clear the blob reference but keep the UI showing the uploaded file
+				setRecordedBlob(null);
+			} catch (error) {
+				// Error handling is done in the hook, keep recording for retry
+			}
 		}
 	};
 
@@ -119,87 +147,136 @@ const SonoraRecordPage: React.FC = () => {
 				</div>
 
 				{/* Recording Interface */}
-				<div className="bg-card rounded-lg border p-8 text-center space-y-6">
-					{/* Recording Status */}
-					<div className="space-y-2">
-						<div className={`w-24 h-24 mx-auto rounded-full flex items-center justify-center ${
-							isRecording 
-								? 'bg-red-500 animate-pulse' 
-								: recordedBlob 
-								? 'bg-green-500' 
-								: 'bg-muted'
-						}`}>
-							<Mic size={32} className="text-white" />
-						</div>
-						
-						<div className="text-2xl font-mono">
-							{formatTime(recordingTime)}
+				<div>
+					<div className="bg-card rounded-lg border p-8 text-center space-y-6">
+						{/* Recording Status */}
+						<div className="space-y-2">
+							<div className={`w-24 h-24 mx-auto rounded-full flex items-center justify-center ${
+								isRecording 
+									? 'bg-red-500 animate-pulse' 
+									: recordedBlob 
+									? 'bg-green-500' 
+									: 'bg-muted'
+							}`}>
+								<Mic size={32} className="text-white" />
+							</div>
+							
+							<div className="text-2xl font-mono">
+								{formatTime(recordingTime)}
+							</div>
+							
+							{isRecording && (
+								<p className="text-sm text-red-500 animate-pulse">
+									Recording in progress...
+								</p>
+							)}
+							
+							{recordedBlob && !isRecording && (
+								<p className="text-sm text-green-600">
+									Recording completed
+								</p>
+							)}
 						</div>
-						
-						{isRecording && (
-							<p className="text-sm text-red-500 animate-pulse">
-								Recording in progress...
-							</p>
-						)}
-						
-						{recordedBlob && !isRecording && (
-							<p className="text-sm text-green-600">
-								Recording completed
-							</p>
-						)}
-					</div>
 
-					{/* Error Message */}
-					{error && (
-						<div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4">
-							<p className="text-destructive text-sm">{error}</p>
-						</div>
-					)}
-
-					{/* Control Buttons */}
-					<div className="flex justify-center gap-4">
-						{!isRecording && !recordedBlob && (
-							<Button onClick={startRecording} scale="lg" className="gap-2">
-								<Mic size={20} />
-								Start Recording
-							</Button>
-						)}
-						
-						{isRecording && (
-							<Button onClick={stopRecording} variant="destructive" scale="lg" className="gap-2">
-								<Square size={20} />
-								Stop Recording
-							</Button>
+						{/* Error Message */}
+						{recordingError && (
+							<div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4">
+								<p className="text-destructive text-sm">{recordingError}</p>
+							</div>
 						)}
-						
-						{recordedBlob && !isRecording && (
-							<>
-								<Button onClick={playRecording} variant="outline" className="gap-2">
-									<Play size={16} />
-									Preview
+
+						{/* Control Buttons */}
+						<div className="flex justify-center gap-4">
+							{!isRecording && !recordedBlob && (
+								<Button onClick={startRecording} scale="lg" className="gap-2">
+									<Mic size={20} />
+									Start Recording
 								</Button>
-								<Button onClick={deleteRecording} variant="outline" className="gap-2">
-									<Trash2 size={16} />
-									Delete
+							)}
+							
+							{isRecording && (
+								<Button onClick={stopRecording} variant="destructive" scale="lg" className="gap-2">
+									<Square size={20} />
+									Stop Recording
 								</Button>
-								<Button onClick={handleUpload} className="gap-2">
-									<Upload size={16} />
-									Upload & Mint NFT
+							)}
+						</div>
+					</div>
+
+					{/* Upload option below recording box */}
+					<div className="text-center mt-1">
+						<p className="text-sm text-muted-foreground">
+							<Link to="/app/sonora/upload">
+								<Button
+									variant="muted"
+									scale="sm"
+									className="gap-1 py-0 px-1 my-0"
+								>
+									or
+									<Upload size={16} className="p-0"/>
+									upload an existing audio file
 								</Button>
-							</>
-						)}
+							</Link>
+						</p>
 					</div>
 				</div>
 
-				{/* Upload option */}
-				<div className="text-center">
-					<p className="text-sm text-muted-foreground">
-						or{" "}
-						<Link to="/app/sonora/upload" className="text-muted-foreground hover:text-foreground underline underline-offset-4">
-							upload an existing audio file
-						</Link>
-					</p>
-				</div>
+				{/* Audio Preview */}
+				{(recordedBlob || recordedUrl) && selected && !isRecording && (
+					<div className="space-y-4">
+						<div className="flex items-center justify-between">
+							<h3 className="text-lg font-medium">
+								{recordedBlob ? "Preview" : "Uploaded to Arweave"}
+							</h3>
+							<Button
+								variant="ghost"
+								scale="sm"
+								onClick={deleteRecording}
+								className="text-muted-foreground hover:text-foreground"
+							>
+								<Trash2 size={16} />
+								{recordedBlob ? "Delete" : "Clear"}
+							</Button>
+						</div>
+						<AudioCard item={selected} />
+					</div>
+				)}
+
+				{/* Upload Error and Success Messages */}
+				{uploadError && (
+					<div className="text-center p-4 bg-destructive/10 border border-destructive rounded-lg">
+						<p className="text-destructive font-medium">{uploadError}</p>
+					</div>
+				)}
+				
+				{success && (
+					<div className="text-center p-4 bg-green-500/10 border border-green-500 rounded-lg">
+						<p className="text-green-600 font-medium">{success}</p>
+					</div>
+				)}
+
+				{/* Upload Button */}
+				{recordedBlob && (
+					<div className="flex justify-center">
+						<Button 
+							onClick={handleUpload} 
+							className="gap-2"
+							disabled={isProcessing || isRecording}
+						>
+							{isProcessing ? (
+								<>
+									<LoaderPinwheel size={16} className="animate-spin" />
+									{estimating ? "Estimating..." : uploading ? `Uploading ${Math.round(progress)}%` : minting ? "Minting..." : "Processing..."}
+								</>
+							) : (
+								<>
+									<Upload size={16} />
+									Upload & Mint NFT
+								</>
+							)}
+						</Button>
+					</div>
+				)}
 			</div>
 		</div>
 	);
diff --git a/src/alex_frontend/src/pages/sonora/StudioPage.tsx b/src/alex_frontend/src/pages/sonora/StudioPage.tsx
index 53e57741e..173f11b03 100644
--- a/src/alex_frontend/src/pages/sonora/StudioPage.tsx
+++ b/src/alex_frontend/src/pages/sonora/StudioPage.tsx
@@ -1,17 +1,34 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button } from "@/lib/components/button";
-import { Palette, Settings, TrendingUp, BarChart3, ArrowDown, FileAudio } from "lucide-react";
-import { mockAudio } from "@/features/sonora/data";
+import { Palette, Settings, TrendingUp, BarChart3, ArrowDown, FileAudio, LoaderPinwheel } from "lucide-react";
 import { AudioCard } from "@/features/sonora/components/AudioCard";
-import { PlayPauseButton } from "@/features/sonora/components/PlayPauseButton";
 import { EditButton } from "@/features/sonora/components/EditButton";
 import { UnlistButton } from "@/features/sonora/components/UnlistButton";
+import { useStudioAudioNFTs } from "@/features/sonora/hooks/useStudioAudioNFTs";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
 
 const SonoraStudioPage: React.FC = () => {
+	const { user } = useAppSelector((state) => state.auth);
+	const { audios, loading, loadingMore, error, pagination, refreshStudioAudioNFTs } = useStudioAudioNFTs();
+
+	// Fetch user's listed audio NFTs on component mount
+	useEffect(() => {
+		if (user?.principal) {
+			refreshStudioAudioNFTs(user.principal, 1, 8, false); // First page, not append mode
+		}
+	}, [user?.principal]);
+
+	// Load More handler
+	const handleLoadMore = () => {
+		if (user?.principal && !loadingMore && pagination.page < pagination.totalPages) {
+			refreshStudioAudioNFTs(user.principal, pagination.page + 1, 8, true); // Next page, append mode
+		}
+	};
+
 	return (
-		<div className="h-[62vh] grid grid-cols-5 grid-rows-1">
+		<div className="grid grid-cols-5 min-h-full">
 			{/* Left Sidebar */}
-			<div className="col-span-1 flex flex-col gap-4 items-center">
+			<div className="col-span-1 flex flex-col gap-4 items-center sticky top-0 h-fit">
 				<div className="w-full bg-card rounded-lg border p-5">
 					<div className="space-y-4">
 						<div className="flex items-center gap-2">
@@ -59,34 +76,83 @@ const SonoraStudioPage: React.FC = () => {
 						</div>
 						<div className="pt-2 border-t">
 							<p className="text-xs text-muted-foreground">
-								<span className="font-medium">{mockAudio.length}</span> active listings
+								<span className="font-medium">{audios.length}</span> of <span className="font-medium">{pagination.totalCount}</span> listings shown
 							</p>
 						</div>
 					</div>
 				</div>
 
 				{/* Load More */}
-				<Button variant="outline" className="gap-2">
-					<ArrowDown size={16} />
-					Load More
-				</Button>
+				{pagination.page < pagination.totalPages && (
+					<Button 
+						variant="outline" 
+						className="gap-2" 
+						onClick={handleLoadMore}
+						disabled={loadingMore}
+					>
+						{loadingMore ? (
+							<LoaderPinwheel size={16} className="animate-spin" />
+						) : (
+							<ArrowDown size={16} />
+						)}
+						{loadingMore ? "Loading..." : "Load More"}
+					</Button>
+				)}
 			</div>
 
 			{/* Audio Grid */}
 			<div className="col-span-4 space-y-4 overflow-y-auto px-6">
-				{mockAudio.map((item) => (
-					<AudioCard 
-						key={item.id} 
-						item={item}
-						actions={
-							<>
-								<EditButton item={item} />
-								<UnlistButton item={item} />
-								<PlayPauseButton item={item} />
-							</>
-						}
-					/>
-				))}
+				{loading ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<LoaderPinwheel className="w-8 h-8 animate-spin mx-auto mb-4" />
+							<p className="text-muted-foreground">Loading your listed audio NFTs...</p>
+						</div>
+					</div>
+				) : error ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<p className="text-destructive font-medium">Error loading listed audio NFTs</p>
+							<p className="text-muted-foreground text-sm mt-1">{error}</p>
+							<Button 
+								onClick={() => user?.principal && refreshStudioAudioNFTs(user.principal, 1, 8, false)}
+								className="mt-4"
+								variant="outline"
+							>
+								Try Again
+							</Button>
+						</div>
+					</div>
+				) : audios.length === 0 ? (
+					<div className="flex items-center justify-center py-12">
+						<div className="text-center">
+							<Palette className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
+							<h3 className="text-lg font-medium mb-2">No Active Listings</h3>
+							<p className="text-muted-foreground">You don't have any audio NFTs listed for sale yet.</p>
+						</div>
+					</div>
+				) : (
+					audios.map((item) => (
+						<AudioCard 
+							key={item.id} 
+							item={item}
+							price={item.price}
+							actions={
+								<>
+									<EditButton 
+										item={item} 
+										currentPrice={item.price.replace(' ICP', '')}
+										tokenId={item.token_id} 
+									/>
+									<UnlistButton 
+										item={item} 
+										tokenId={item.token_id} 
+									/>
+								</>
+							}
+						/>
+					))
+				)}
 			</div>
 		</div>
 	);
diff --git a/src/alex_frontend/src/pages/sonora/UploadPage.tsx b/src/alex_frontend/src/pages/sonora/UploadPage.tsx
index 58a105d62..4e8d2516d 100644
--- a/src/alex_frontend/src/pages/sonora/UploadPage.tsx
+++ b/src/alex_frontend/src/pages/sonora/UploadPage.tsx
@@ -1,10 +1,13 @@
 import React, { useState, useRef } from "react";
 import { Button } from "@/lib/components/button";
-import { Upload, Mic, X } from "lucide-react";
+import { Upload, Mic, X, LoaderPinwheel } from "lucide-react";
 import { Link } from "@tanstack/react-router";
 import { useAppDispatch } from "@/store/hooks/useAppDispatch";
-import { playAudio, clearSelected } from "@/features/sonora/sonoraSlice";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { setSelected, clearSelected } from "@/features/sonora/sonoraSlice";
 import { Audio } from "@/features/sonora/types";
+import { AudioCard } from "@/features/sonora/components/AudioCard";
+import { useUploadAndMint } from "@/features/pinax/hooks/useUploadAndMint";
 
 const SonoraUploadPage: React.FC = () => {
 	const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -12,6 +15,8 @@ const SonoraUploadPage: React.FC = () => {
 	const [isDragging, setIsDragging] = useState(false);
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const dispatch = useAppDispatch();
+	const { selected } = useAppSelector((state) => state.sonora);
+	const { uploadAndMint, isProcessing, error, success, progress, estimating, uploading, minting, resetUpload } = useUploadAndMint();
 
 	const handleFileSelect = (file: File) => {
 		// Validate audio file
@@ -34,7 +39,7 @@ const SonoraUploadPage: React.FC = () => {
 		};
 		
 		// Set audio in global state for player
-		dispatch(playAudio(audioData));
+		dispatch(setSelected(audioData));
 	};
 
 	const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -68,13 +73,32 @@ const SonoraUploadPage: React.FC = () => {
 		if (fileInputRef.current) fileInputRef.current.value = "";
 		// Clear audio from global state
 		dispatch(clearSelected());
+		// Reset upload state
+		resetUpload();
 	};
 
-	const handleUpload = () => {
+	const handleUpload = async () => {
 		if (selectedFile) {
-			// TODO: Implement upload logic
-			console.log("Uploading file:", selectedFile.name);
-			alert("Upload functionality coming soon!");
+			try {
+				const transactionId = await uploadAndMint(selectedFile);
+				// Replace blob URL with Arweave transaction URL
+				if (audioUrl) {
+					URL.revokeObjectURL(audioUrl);
+				}
+				const arweaveUrl = `https://arweave.net/${transactionId}`;
+				setAudioUrl(arweaveUrl);
+				
+				// Update the audio data with Arweave URL
+				const audioData: Audio = {
+					id: transactionId, // Use transaction ID as the ID
+					type: selectedFile.type,
+					size: `${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`,
+					timestamp: new Date().toISOString()
+				};
+				dispatch(setSelected(audioData));
+			} catch (error) {
+				// Error handling is done in the hook, keep file for retry
+			}
 		}
 	};
 
@@ -140,22 +164,13 @@ const SonoraUploadPage: React.FC = () => {
 					</div>
 				</div>
 
-				{/* Selected File Info */}
-				{selectedFile && (
-					<div className="bg-muted/50 rounded-lg p-4 space-y-4 border">
+				{/* Audio Preview */}
+				{selectedFile && selected && (
+					<div className="space-y-4">
 						<div className="flex items-center justify-between">
-							<div>
-								<h3 className="font-medium">
-									{selectedFile.name}
-								</h3>
-								<p className="text-sm text-muted-foreground">
-									{(
-										selectedFile.size /
-										(1024 * 1024)
-									).toFixed(2)}{" "}
-									MB • {selectedFile.type}
-								</p>
-							</div>
+							<h3 className="text-lg font-medium">
+								{audioUrl.startsWith('blob:') ? "Preview" : "Uploaded to Arweave"}
+							</h3>
 							<Button
 								variant="ghost"
 								scale="sm"
@@ -163,17 +178,45 @@ const SonoraUploadPage: React.FC = () => {
 								className="text-muted-foreground hover:text-foreground"
 							>
 								<X size={16} />
+								{audioUrl.startsWith('blob:') ? "Remove" : "Clear"}
 							</Button>
 						</div>
+						<AudioCard item={selected} />
+					</div>
+				)}
+
+				{/* Error and Success Messages */}
+				{error && (
+					<div className="text-center p-4 bg-destructive/10 border border-destructive rounded-lg">
+						<p className="text-destructive font-medium">{error}</p>
+					</div>
+				)}
+				
+				{success && (
+					<div className="text-center p-4 bg-green-500/10 border border-green-500 rounded-lg">
+						<p className="text-green-600 font-medium">{success}</p>
 					</div>
 				)}
 
 				{/* Upload Button */}
-				{selectedFile && (
+				{selectedFile && audioUrl.startsWith('blob:') && (
 					<div className="flex justify-center">
-						<Button onClick={handleUpload} className="gap-2">
-							<Upload size={16} />
-							Upload & Mint NFT
+						<Button 
+							onClick={handleUpload} 
+							className="gap-2"
+							disabled={isProcessing}
+						>
+							{isProcessing ? (
+								<>
+									<LoaderPinwheel size={16} className="animate-spin" />
+									{estimating ? "Estimating..." : uploading ? `Uploading ${Math.round(progress)}%` : minting ? "Minting..." : "Processing..."}
+								</>
+							) : (
+								<>
+									<Upload size={16} />
+									Upload & Mint NFT
+								</>
+							)}
 						</Button>
 					</div>
 				)}
diff --git a/src/alex_frontend/src/pages/sonora/index.tsx b/src/alex_frontend/src/pages/sonora/index.tsx
index 64514d5b5..21e37f699 100644
--- a/src/alex_frontend/src/pages/sonora/index.tsx
+++ b/src/alex_frontend/src/pages/sonora/index.tsx
@@ -1,17 +1,55 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button } from "@/lib/components/button";
-import { Database, Globe, ArrowDown, FileAudio, Coins } from "lucide-react";
-import { mockAudio } from "@/features/sonora/data";
+import { Database, Globe, ArrowDown, FileAudio, Coins, AlertCircle, Loader2 } from "lucide-react";
 import { AudioCard } from "@/features/sonora/components/AudioCard";
-import { PlayPauseButton } from "@/features/sonora/components/PlayPauseButton";
 import { MintButton } from "@/features/sonora/components/MintButton";
+import { useArweaveAudios } from "@/features/sonora/hooks/useArweaveAudios";
+import { fetchAudios } from "@/features/sonora/browse/thunks/fetchAudios";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { ArweaveAudio, Audio } from "@/features/sonora/types";
 
 const SonoraPage: React.FC = () => {
+	const dispatch = useAppDispatch();
+	const { audios, loading, error, hasNext, loadMore, isEmpty } = useArweaveAudios();
+
+	// Convert ArweaveAudio to Audio format for AudioCard
+	const convertToAudio = (arweaveAudio: ArweaveAudio): Audio => {
+		// Try to get content type from data.type or Content-Type tag
+		let contentType = arweaveAudio.data?.type;
+		if (!contentType) {
+			const contentTypeTag = arweaveAudio.tags?.find(tag => tag.name === "Content-Type");
+			contentType = contentTypeTag?.value || '';
+		}
+		
+		return {
+			id: arweaveAudio.id,
+			type: contentType,
+			size: arweaveAudio.data?.size || null,
+			timestamp: new Date(arweaveAudio.block.timestamp * 1000).toISOString()
+		};
+	};
+
+	// Fetch initial data on mount
+	useEffect(() => {
+		if (audios.length === 0 && !loading && !error) {
+			dispatch(fetchAudios({ reset: true }));
+		}
+	}, [dispatch, audios.length, loading, error]);
+
+	const formatFileSize = (sizeString: string | null) => {
+		if (!sizeString) return 'Unknown size';
+		const size = parseInt(sizeString);
+		if (isNaN(size)) return 'Unknown size';
+		if (size < 1024 * 1024) {
+			return `${(size / 1024).toFixed(1)} KB`;
+		}
+		return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+	};
 
 	return (
-		<div className="h-[62vh] grid grid-cols-5 grid-rows-1">
+		<div className="grid grid-cols-5 min-h-full">
 			{/* Left Sidebar */}
-			<div className="col-span-1 flex flex-col gap-4 items-center">
+			<div className="col-span-1 flex flex-col gap-4 items-center sticky top-0 h-fit">
 				<div className="w-full bg-card rounded-lg border p-5">
 					<div className="space-y-4">
 						<div className="flex items-center gap-2">
@@ -59,33 +97,75 @@ const SonoraPage: React.FC = () => {
 						</div>
 						<div className="pt-2 border-t">
 							<p className="text-xs text-muted-foreground">
-								<span className="font-medium">{mockAudio.length}</span> files available
+								{loading && audios.length === 0 ? (
+									"Loading files..."
+								) : (
+									<>
+										<span className="font-medium">{audios.length}</span> files available
+									</>
+								)}
 							</p>
 						</div>
 					</div>
 				</div>
 
 				{/* Load More */}
-				<Button variant="outline" className="gap-2">
-					<ArrowDown size={16} />
-					Load More
-				</Button>
+				{hasNext && (
+					<Button 
+						variant="outline" 
+						className="gap-2"
+						onClick={loadMore}
+						disabled={loading}
+					>
+						{loading ? (
+							<Loader2 size={16} className="animate-spin" />
+						) : (
+							<ArrowDown size={16} />
+						)}
+						{loading ? "Loading..." : "Load More"}
+					</Button>
+				)}
 			</div>
 
 			{/* Audio Grid */}
 			<div className="col-span-4 space-y-4 overflow-y-auto px-6">
-				{mockAudio.map((item) => (
-					<AudioCard 
-						key={item.id} 
-						item={item}
-						actions={
-							<>
-								<MintButton item={item} />
-								<PlayPauseButton item={item} />
-							</>
-						}
-					/>
-				))}
+				{error && (
+					<div className="flex items-center gap-2 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
+						<AlertCircle size={16} className="text-destructive" />
+						<span className="text-destructive text-sm">{error}</span>
+					</div>
+				)}
+
+				{loading && audios.length === 0 && (
+					<div className="flex items-center justify-center py-8">
+						<Loader2 size={24} className="animate-spin text-muted-foreground" />
+						<span className="ml-2 text-muted-foreground">Loading audio files from Arweave...</span>
+					</div>
+				)}
+
+				{isEmpty && !loading && (
+					<div className="flex flex-col items-center justify-center py-8 text-center">
+						<FileAudio size={48} className="text-muted-foreground mb-4" />
+						<p className="text-muted-foreground">No audio files found</p>
+						<p className="text-sm text-muted-foreground mt-1">Try refreshing the page</p>
+					</div>
+				)}
+
+				{audios.map((arweaveAudio) => {
+					const audioItem = convertToAudio(arweaveAudio);
+					// Format size better
+					audioItem.size = formatFileSize(audioItem.size);
+					
+					return (
+						<AudioCard 
+							key={arweaveAudio.id} 
+							item={audioItem}
+							actions={
+								<MintButton item={audioItem} />
+							}
+						/>
+					);
+				})}
 			</div>
 
 		</div>
diff --git a/src/alex_frontend/src/store/rootReducer.ts b/src/alex_frontend/src/store/rootReducer.ts
index 55f65ff5f..bb142547e 100644
--- a/src/alex_frontend/src/store/rootReducer.ts
+++ b/src/alex_frontend/src/store/rootReducer.ts
@@ -46,6 +46,9 @@ import permasearchReducer from '@/features/permasearch/store/slice';
 import alexandrianReducer from '@/features/alexandrian/alexandrianSlice';
 import nftReducer from '@/features/nft/slice';
 import sonoraReducer from '@/features/sonora/sonoraSlice';
+import archiveReducer from '@/features/sonora/archiveSlice';
+import studioReducer from '@/features/sonora/studioSlice';
+import marketReducer from '@/features/sonora/marketSlice';
 
 const rootReducer = combineReducers({
 	home: homeReducer,
@@ -96,6 +99,9 @@ const rootReducer = combineReducers({
 	alexandrian: alexandrianReducer,
 	nft: nftReducer,
 	sonora: sonoraReducer,
+	archive: archiveReducer,
+	studio: studioReducer,
+	market: marketReducer,
 });
 
 export default rootReducer;
diff --git a/src/alex_frontend/src/styles/tailwind.css b/src/alex_frontend/src/styles/tailwind.css
index 79e2596de..6d59d4fe7 100644
--- a/src/alex_frontend/src/styles/tailwind.css
+++ b/src/alex_frontend/src/styles/tailwind.css
@@ -101,4 +101,9 @@
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+  
+  @keyframes shimmer {
+    0% { left: -50%; }
+    100% { left: 100%; }
+  }
 }
\ No newline at end of file
diff --git a/src/nft_manager/nft_manager.did b/src/nft_manager/nft_manager.did
index f74321d7c..e934dc4b8 100644
--- a/src/nft_manager/nft_manager.did
+++ b/src/nft_manager/nft_manager.did
@@ -1,11 +1,26 @@
 type Account = record { owner : principal; subaccount : opt blob };
+type BTreeMap = vec record {
+  text;
+  variant {
+    Int : int;
+    Map : BTreeMap;
+    Nat : nat;
+    Nat64 : nat64;
+    Blob : blob;
+    Text : text;
+    Array : vec Value;
+  };
+};
 type Result = variant { Ok : nat; Err : text };
 type Result_1 = variant { Ok : text; Err : text };
 type Result_10 = variant { Ok : vec opt Account; Err : text };
 type Result_11 = variant { Ok : record { opt nat; opt nat }; Err : text };
 type Result_2 = variant { Ok; Err : text };
 type Result_3 = variant { Ok : vec opt text; Err : text };
-type Result_4 = variant { Ok : vec opt vec record { text; Value }; Err : text };
+type Result_4 = variant {
+  Ok : vec opt vec record { text; Value_1 };
+  Err : text;
+};
 type Result_5 = variant { Ok : vec record { nat; TokenBalances }; Err : text };
 type Result_6 = variant { Ok : vec TokenBalances; Err : text };
 type Result_7 = variant { Ok : vec nat; Err : text };
@@ -13,6 +28,15 @@ type Result_8 = variant { Ok : vec record { nat; opt text }; Err : text };
 type Result_9 = variant { Ok : vec bool; Err : text };
 type TokenBalances = record { alex : nat; lbry : nat };
 type Value = variant {
+  Int : int;
+  Map : BTreeMap;
+  Nat : nat;
+  Nat64 : nat64;
+  Blob : blob;
+  Text : text;
+  Array : vec Value;
+};
+type Value_1 = variant {
   Int : int;
   Map : vec record { text; Value };
   Nat : nat;