diff --git a/src/data/sounds/animals.tsx b/src/data/sounds/animals.tsx
index b2f8ced..c248930 100644
--- a/src/data/sounds/animals.tsx
+++ b/src/data/sounds/animals.tsx
@@ -21,6 +21,8 @@ import { PiBirdFill, PiDogBold } from 'react-icons/pi/index';
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const animals: Category = {
   icon: <FaDog />,
   id: 'animals',
@@ -29,97 +31,97 @@ export const animals: Category = {
       icon: <PiBirdFill />,
       id: 'birds',
       label: 'Birds',
-      src: '/sounds/animals/birds.mp3',
+      src: getAssetPath('/sounds/animals/birds.mp3'),
     },
     {
       icon: <GiSeagull />,
       id: 'seagulls',
       label: 'Seagulls',
-      src: '/sounds/animals/seagulls.mp3',
+      src: getAssetPath('/sounds/animals/seagulls.mp3'),
     },
     {
       icon: <GiCricket />,
       id: 'crickets',
       label: 'Crickets',
-      src: '/sounds/animals/crickets.mp3',
+      src: getAssetPath('/sounds/animals/crickets.mp3'),
     },
     {
       icon: <GiWolfHead />,
       id: 'wolf',
       label: 'Wolf',
-      src: '/sounds/animals/wolf.mp3',
+      src: getAssetPath('/sounds/animals/wolf.mp3'),
     },
     {
       icon: <GiOwl />,
       id: 'owl',
       label: 'Owl',
-      src: '/sounds/animals/owl.mp3',
+      src: getAssetPath('/sounds/animals/owl.mp3'),
     },
     {
       icon: <FaFrog />,
       id: 'frog',
       label: 'Frog',
-      src: '/sounds/animals/frog.mp3',
+      src: getAssetPath('/sounds/animals/frog.mp3'),
     },
     {
       icon: <PiDogBold />,
       id: 'dog-barking',
       label: 'Dog Barking',
-      src: '/sounds/animals/dog-barking.mp3',
+      src: getAssetPath('/sounds/animals/dog-barking.mp3'),
     },
     {
       icon: <FaHorseHead />,
       id: 'horse-gallop',
       label: 'Horse Gallop',
-      src: '/sounds/animals/horse-gallop.mp3',
+      src: getAssetPath('/sounds/animals/horse-gallop.mp3'),
     },
     {
       icon: <FaCat />,
       id: 'cat-purring',
       label: 'Cat Purring',
-      src: '/sounds/animals/cat-purring.mp3',
+      src: getAssetPath('/sounds/animals/cat-purring.mp3'),
     },
     {
       icon: <FaCrow />,
       id: 'crows',
       label: 'Crows',
-      src: '/sounds/animals/crows.mp3',
+      src: getAssetPath('/sounds/animals/crows.mp3'),
     },
     {
       icon: <GiWhaleTail />,
       id: 'whale',
       label: 'Whale',
-      src: '/sounds/animals/whale.mp3',
+      src: getAssetPath('/sounds/animals/whale.mp3'),
     },
     {
       icon: <GiTreeBeehive />,
       id: 'beehive',
       label: 'Beehive',
-      src: '/sounds/animals/beehive.mp3',
+      src: getAssetPath('/sounds/animals/beehive.mp3'),
     },
     {
       icon: <GiEgyptianBird />,
       id: 'woodpecker',
       label: 'Woodpecker',
-      src: '/sounds/animals/woodpecker.mp3',
+      src: getAssetPath('/sounds/animals/woodpecker.mp3'),
     },
     {
       icon: <GiChicken />,
       id: 'chickens',
       label: 'Chickens',
-      src: '/sounds/animals/chickens.mp3',
+      src: getAssetPath('/sounds/animals/chickens.mp3'),
     },
     {
       icon: <GiCow />,
       id: 'cows',
       label: 'Cows',
-      src: '/sounds/animals/cows.mp3',
+      src: getAssetPath('/sounds/animals/cows.mp3'),
     },
     {
       icon: <GiSheep />,
       id: 'sheep',
       label: 'Sheep',
-      src: '/sounds/animals/sheep.mp3',
+      src: getAssetPath('/sounds/animals/sheep.mp3'),
     },
   ],
   title: 'Animals',
diff --git a/src/data/sounds/binaural.tsx b/src/data/sounds/binaural.tsx
index ffe96de..b30c33e 100644
--- a/src/data/sounds/binaural.tsx
+++ b/src/data/sounds/binaural.tsx
@@ -3,6 +3,8 @@ import { BsSoundwave } from 'react-icons/bs/index';
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const binaural: Category = {
   icon: <TbWaveSine />,
   id: 'binaural',
@@ -11,31 +13,31 @@ export const binaural: Category = {
       icon: <BsSoundwave />,
       id: 'binaural-delta',
       label: 'Delta',
-      src: '/sounds/binaural/binaural-delta.wav',
+      src: getAssetPath('/sounds/binaural/binaural-delta.wav'),
     },
     {
       icon: <BsSoundwave />,
       id: 'binaural-theta',
       label: 'Theta',
-      src: '/sounds/binaural/binaural-theta.wav',
+      src: getAssetPath('/sounds/binaural/binaural-theta.wav'),
     },
     {
       icon: <BsSoundwave />,
       id: 'binaural-alpha',
       label: 'Alpha',
-      src: '/sounds/binaural/binaural-alpha.wav',
+      src: getAssetPath('/sounds/binaural/binaural-alpha.wav'),
     },
     {
       icon: <BsSoundwave />,
       id: 'binaural-beta',
       label: 'Beta',
-      src: '/sounds/binaural/binaural-beta.wav',
+      src: getAssetPath('/sounds/binaural/binaural-beta.wav'),
     },
     {
       icon: <BsSoundwave />,
       id: 'binaural-gamma',
       label: 'Gamma',
-      src: '/sounds/binaural/binaural-gamma.wav',
+      src: getAssetPath('/sounds/binaural/binaural-gamma.wav'),
     },
   ],
   title: 'Binaural Beats',
diff --git a/src/data/sounds/nature.tsx b/src/data/sounds/nature.tsx
index f90d2ea..e3d5b8d 100644
--- a/src/data/sounds/nature.tsx
+++ b/src/data/sounds/nature.tsx
@@ -11,6 +11,8 @@ import {
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const nature: Category = {
   icon: <BiSolidTree />,
   id: 'nature',
@@ -19,73 +21,73 @@ export const nature: Category = {
       icon: <BiWater />,
       id: 'river',
       label: 'River',
-      src: '/sounds/nature/river.mp3',
+      src: getAssetPath('/sounds/nature/river.mp3'),
     },
     {
       icon: <FaWater />,
       id: 'waves',
       label: 'Waves',
-      src: '/sounds/nature/waves.mp3',
+      src: getAssetPath('/sounds/nature/waves.mp3'),
     },
     {
       icon: <BsFire />,
       id: 'campfire',
       label: 'Campfire',
-      src: '/sounds/nature/campfire.mp3',
+      src: getAssetPath('/sounds/nature/campfire.mp3'),
     },
     {
       icon: <FaWind />,
       id: 'wind',
       label: 'Wind',
-      src: '/sounds/nature/wind.mp3',
+      src: getAssetPath('/sounds/nature/wind.mp3'),
     },
     {
       icon: <FaWind />,
       id: 'howling-wind',
       label: 'Howling Wind',
-      src: '/sounds/nature/howling-wind.mp3',
+      src: getAssetPath('/sounds/nature/howling-wind.mp3'),
     },
     {
       icon: <BiSolidTree />,
       id: 'wind-in-trees',
       label: 'Wind in Trees',
-      src: '/sounds/nature/wind-in-trees.mp3',
+      src: getAssetPath('/sounds/nature/wind-in-trees.mp3'),
     },
     {
       icon: <GiWaterfall />,
       id: 'waterfall',
       label: 'Waterfall',
-      src: '/sounds/nature/waterfall.mp3',
+      src: getAssetPath('/sounds/nature/waterfall.mp3'),
     },
     {
       icon: <FaRegSnowflake />,
       id: 'walk-in-snow',
       label: 'Walk in Snow',
-      src: '/sounds/nature/walk-in-snow.mp3',
+      src: getAssetPath('/sounds/nature/walk-in-snow.mp3'),
     },
     {
       icon: <FaLeaf />,
       id: 'walk-on-leaves',
       label: 'Walk on Leaves',
-      src: '/sounds/nature/walk-on-leaves.mp3',
+      src: getAssetPath('/sounds/nature/walk-on-leaves.mp3'),
     },
     {
       icon: <GiStonePile />,
       id: 'walk-on-gravel',
       label: 'Walk on Gravel',
-      src: '/sounds/nature/walk-on-gravel.mp3',
+      src: getAssetPath('/sounds/nature/walk-on-gravel.mp3'),
     },
     {
       icon: <BsFillDropletFill />,
       id: 'droplets',
       label: 'Droplets',
-      src: '/sounds/nature/droplets.mp3',
+      src: getAssetPath('/sounds/nature/droplets.mp3'),
     },
     {
       icon: <FaTree />,
       id: 'jungle',
       label: 'Jungle',
-      src: '/sounds/nature/jungle.mp3',
+      src: getAssetPath('/sounds/nature/jungle.mp3'),
     },
   ],
   title: 'Nature',
diff --git a/src/data/sounds/noise.tsx b/src/data/sounds/noise.tsx
index 5042001..e0e7f39 100644
--- a/src/data/sounds/noise.tsx
+++ b/src/data/sounds/noise.tsx
@@ -3,6 +3,8 @@ import { BsSoundwave } from 'react-icons/bs/index';
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const noise: Category = {
   icon: <BsSoundwave />,
   id: 'noise',
@@ -11,19 +13,19 @@ export const noise: Category = {
       icon: <GiSoundWaves />,
       id: 'white-noise',
       label: 'White Noise',
-      src: '/sounds/noise/white-noise.wav',
+      src: getAssetPath('/sounds/noise/white-noise.wav'),
     },
     {
       icon: <GiSoundWaves />,
       id: 'pink-noise',
       label: 'Pink Noise',
-      src: '/sounds/noise/pink-noise.wav',
+      src: getAssetPath('/sounds/noise/pink-noise.wav'),
     },
     {
       icon: <GiSoundWaves />,
       id: 'brown-noise',
       label: 'Brown Noise',
-      src: '/sounds/noise/brown-noise.wav',
+      src: getAssetPath('/sounds/noise/brown-noise.wav'),
     },
   ],
   title: 'Noise',
diff --git a/src/data/sounds/places.tsx b/src/data/sounds/places.tsx
index b9c771a..c63ed2b 100644
--- a/src/data/sounds/places.tsx
+++ b/src/data/sounds/places.tsx
@@ -18,6 +18,8 @@ import { FaBookOpen } from 'react-icons/fa6/index';
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const places: Category = {
   icon: <MdLocationPin />,
   id: 'places',
@@ -26,97 +28,97 @@ export const places: Category = {
       icon: <BiSolidCoffeeAlt />,
       id: 'cafe',
       label: 'Cafe',
-      src: '/sounds/places/cafe.mp3',
+      src: getAssetPath('/sounds/places/cafe.mp3'),
     },
     {
       icon: <BiSolidPlaneAlt />,
       id: 'airport',
       label: 'Airport',
-      src: '/sounds/places/airport.mp3',
+      src: getAssetPath('/sounds/places/airport.mp3'),
     },
     {
       icon: <FaChurch />,
       id: 'church',
       label: 'Church',
-      src: '/sounds/places/church.mp3',
+      src: getAssetPath('/sounds/places/church.mp3'),
     },
     {
       icon: <MdTempleBuddhist />,
       id: 'temple',
       label: 'Temple',
-      src: '/sounds/places/temple.mp3',
+      src: getAssetPath('/sounds/places/temple.mp3'),
     },
     {
       icon: <MdConstruction />,
       id: 'construction-site',
       label: 'Construction Site',
-      src: '/sounds/places/construction-site.mp3',
+      src: getAssetPath('/sounds/places/construction-site.mp3'),
     },
     {
       icon: <TbScubaMask />,
       id: 'underwater',
       label: 'Underwater',
-      src: '/sounds/places/underwater.mp3',
+      src: getAssetPath('/sounds/places/underwater.mp3'),
     },
     {
       icon: <TbBeerFilled />,
       id: 'crowded-bar',
       label: 'Crowded Bar',
-      src: '/sounds/places/crowded-bar.mp3',
+      src: getAssetPath('/sounds/places/crowded-bar.mp3'),
     },
     {
       icon: <GiVillage />,
       id: 'night-village',
       label: 'Night Village',
-      src: '/sounds/places/night-village.mp3',
+      src: getAssetPath('/sounds/places/night-village.mp3'),
     },
     {
       icon: <FaSubway />,
       id: 'subway-station',
       label: 'Subway Station',
-      src: '/sounds/places/subway-station.mp3',
+      src: getAssetPath('/sounds/places/subway-station.mp3'),
     },
     {
       icon: <HiOfficeBuilding />,
       id: 'office',
       label: 'Office',
-      src: '/sounds/places/office.mp3',
+      src: getAssetPath('/sounds/places/office.mp3'),
     },
     {
       icon: <FaShoppingBasket />,
       id: 'supermarket',
       label: 'Supermarket',
-      src: '/sounds/places/supermarket.mp3',
+      src: getAssetPath('/sounds/places/supermarket.mp3'),
     },
     {
       icon: <GiCarousel />,
       id: 'carousel',
       label: 'Carousel',
-      src: '/sounds/places/carousel.mp3',
+      src: getAssetPath('/sounds/places/carousel.mp3'),
     },
     {
       icon: <AiFillExperiment />,
       id: 'laboratory',
       label: 'Laboratory',
-      src: '/sounds/places/laboratory.mp3',
+      src: getAssetPath('/sounds/places/laboratory.mp3'),
     },
     {
       icon: <BiSolidDryer />,
       id: 'laundry-room',
       label: 'Laundry Room',
-      src: '/sounds/places/laundry-room.mp3',
+      src: getAssetPath('/sounds/places/laundry-room.mp3'),
     },
     {
       icon: <IoRestaurant />,
       id: 'restaurant',
       label: 'Restaurant',
-      src: '/sounds/places/restaurant.mp3',
+      src: getAssetPath('/sounds/places/restaurant.mp3'),
     },
     {
       icon: <FaBookOpen />,
       id: 'library',
       label: 'Library',
-      src: '/sounds/places/library.mp3',
+      src: getAssetPath('/sounds/places/library.mp3'),
     },
   ],
   title: 'Places',
diff --git a/src/data/sounds/rain.tsx b/src/data/sounds/rain.tsx
index 0a23a69..1276ef6 100644
--- a/src/data/sounds/rain.tsx
+++ b/src/data/sounds/rain.tsx
@@ -10,6 +10,8 @@ import { MdOutlineThunderstorm } from 'react-icons/md/index';
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const rain: Category = {
   icon: <BsFillCloudRainFill />,
   id: 'rain',
@@ -18,49 +20,49 @@ export const rain: Category = {
       icon: <BsFillCloudRainFill />,
       id: 'light-rain',
       label: 'Light Rain',
-      src: '/sounds/rain/light-rain.mp3',
+      src: getAssetPath('/sounds/rain/light-rain.mp3'),
     },
     {
       icon: <BsFillCloudRainHeavyFill />,
       id: 'heavy-rain',
       label: 'Heavy Rain',
-      src: '/sounds/rain/heavy-rain.mp3',
+      src: getAssetPath('/sounds/rain/heavy-rain.mp3'),
     },
     {
       icon: <MdOutlineThunderstorm />,
       id: 'thunder',
       label: 'Thunder',
-      src: '/sounds/rain/thunder.mp3',
+      src: getAssetPath('/sounds/rain/thunder.mp3'),
     },
     {
       icon: <GiWindow />,
       id: 'rain-on-window',
       label: 'Rain on Window',
-      src: '/sounds/rain/rain-on-window.mp3',
+      src: getAssetPath('/sounds/rain/rain-on-window.mp3'),
     },
     {
       icon: <FaCarSide />,
       id: 'rain-on-car-roof',
       label: 'Rain on Car Roof',
-      src: '/sounds/rain/rain-on-car-roof.mp3',
+      src: getAssetPath('/sounds/rain/rain-on-car-roof.mp3'),
     },
     {
       icon: <BsUmbrellaFill />,
       id: 'rain-on-umbrella',
       label: 'Rain on Umbrella',
-      src: '/sounds/rain/rain-on-umbrella.mp3',
+      src: getAssetPath('/sounds/rain/rain-on-umbrella.mp3'),
     },
     {
       icon: <PiTentFill />,
       id: 'rain-on-tent',
       label: 'Rain on Tent',
-      src: '/sounds/rain/rain-on-tent.mp3',
+      src: getAssetPath('/sounds/rain/rain-on-tent.mp3'),
     },
     {
       icon: <FaLeaf />,
       id: 'rain-on-leaves',
       label: 'Rain on Leaves',
-      src: '/sounds/rain/rain-on-leaves.mp3',
+      src: getAssetPath('/sounds/rain/rain-on-leaves.mp3'),
     },
   ],
   title: 'Rain',
diff --git a/src/data/sounds/things.tsx b/src/data/sounds/things.tsx
index f5bb59f..3b58b2f 100644
--- a/src/data/sounds/things.tsx
+++ b/src/data/sounds/things.tsx
@@ -14,6 +14,8 @@ import { PiVinylRecord } from 'react-icons/pi/index';
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const things: Category = {
   icon: <MdSmartToy />,
   id: 'things',
@@ -22,97 +24,97 @@ export const things: Category = {
       icon: <BsFillKeyboardFill />,
       id: 'keyboard',
       label: 'Keyboard',
-      src: '/sounds/things/keyboard.mp3',
+      src: getAssetPath('/sounds/things/keyboard.mp3'),
     },
     {
       icon: <FaKeyboard />,
       id: 'typewriter',
       label: 'Typewriter',
-      src: '/sounds/things/typewriter.mp3',
+      src: getAssetPath('/sounds/things/typewriter.mp3'),
     },
     {
       icon: <RiFilePaper2Fill />,
       id: 'paper',
       label: 'Paper',
-      src: '/sounds/things/paper.mp3',
+      src: getAssetPath('/sounds/things/paper.mp3'),
     },
     {
       icon: <FaClock />,
       id: 'clock',
       label: 'Clock',
-      src: '/sounds/things/clock.mp3',
+      src: getAssetPath('/sounds/things/clock.mp3'),
     },
     {
       icon: <GiWindchimes />,
       id: 'wind-chimes',
       label: 'Wind Chimes',
-      src: '/sounds/things/wind-chimes.mp3',
+      src: getAssetPath('/sounds/things/wind-chimes.mp3'),
     },
     {
       icon: <TbBowlFilled />,
       id: 'singing-bowl',
       label: 'Singing Bowl',
-      src: '/sounds/things/singing-bowl.mp3',
+      src: getAssetPath('/sounds/things/singing-bowl.mp3'),
     },
     {
       icon: <FaFan />,
       id: 'ceiling-fan',
       label: 'Ceiling Fan',
-      src: '/sounds/things/ceiling-fan.mp3',
+      src: getAssetPath('/sounds/things/ceiling-fan.mp3'),
     },
     {
       icon: <BiSolidDryer />,
       id: 'dryer',
       label: 'Dryer',
-      src: '/sounds/things/dryer.mp3',
+      src: getAssetPath('/sounds/things/dryer.mp3'),
     },
     {
       icon: <GiFilmProjector />,
       id: 'slide-projector',
       label: 'Slide Projector',
-      src: '/sounds/things/slide-projector.mp3',
+      src: getAssetPath('/sounds/things/slide-projector.mp3'),
     },
     {
       icon: <MdWaterDrop />,
       id: 'boiling-water',
       label: 'Boiling Water',
-      src: '/sounds/things/boiling-water.mp3',
+      src: getAssetPath('/sounds/things/boiling-water.mp3'),
     },
     {
       icon: <RiBubbleChartFill />,
       id: 'bubbles',
       label: 'Bubbles',
-      src: '/sounds/things/bubbles.mp3',
+      src: getAssetPath('/sounds/things/bubbles.mp3'),
     },
     {
       icon: <MdRadio />,
       id: 'tuning-radio',
       label: 'Tuning Radio',
-      src: '/sounds/things/tuning-radio.mp3',
+      src: getAssetPath('/sounds/things/tuning-radio.mp3'),
     },
     {
       icon: <IoIosRadio />,
       id: 'morse-code',
       label: 'Morse Code',
-      src: '/sounds/things/morse-code.mp3',
+      src: getAssetPath('/sounds/things/morse-code.mp3'),
     },
     {
       icon: <GiWashingMachine />,
       id: 'washing-machine',
       label: 'Washing Machine',
-      src: '/sounds/things/washing-machine.mp3',
+      src: getAssetPath('/sounds/things/washing-machine.mp3'),
     },
     {
       icon: <PiVinylRecord />,
       id: 'vinyl-effect',
       label: 'Vinyl Effect',
-      src: '/sounds/things/vinyl-effect.mp3',
+      src: getAssetPath('/sounds/things/vinyl-effect.mp3'),
     },
     {
       icon: <TbWiper />,
       id: 'windshield-wipers',
       label: 'Windshield Wipers',
-      src: '/sounds/things/windshield-wipers.mp3',
+      src: getAssetPath('/sounds/things/windshield-wipers.mp3'),
     },
   ],
   title: 'Things',
diff --git a/src/data/sounds/transport.tsx b/src/data/sounds/transport.tsx
index 5273332..62d2579 100644
--- a/src/data/sounds/transport.tsx
+++ b/src/data/sounds/transport.tsx
@@ -5,6 +5,8 @@ import { TbSailboat } from 'react-icons/tb/index';
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const transport: Category = {
   icon: <FaCarSide />,
   id: 'transport',
@@ -13,37 +15,37 @@ export const transport: Category = {
       icon: <BiSolidTrain />,
       id: 'train',
       label: 'Train',
-      src: '/sounds/transport/train.mp3',
+      src: getAssetPath('/sounds/transport/train.mp3'),
     },
     {
       icon: <BiSolidTrain />,
       id: 'inside-a-train',
       label: 'Inside a Train',
-      src: '/sounds/transport/inside-a-train.mp3',
+      src: getAssetPath('/sounds/transport/inside-a-train.mp3'),
     },
     {
       icon: <BiSolidPlaneAlt />,
       id: 'airplane',
       label: 'Airplane',
-      src: '/sounds/transport/airplane.mp3',
+      src: getAssetPath('/sounds/transport/airplane.mp3'),
     },
     {
       icon: <GiSubmarine />,
       id: 'submarine',
       label: 'Submarine',
-      src: '/sounds/transport/submarine.mp3',
+      src: getAssetPath('/sounds/transport/submarine.mp3'),
     },
     {
       icon: <GiSailboat />,
       id: 'sailboat',
       label: 'Sailboat',
-      src: '/sounds/transport/sailboat.mp3',
+      src: getAssetPath('/sounds/transport/sailboat.mp3'),
     },
     {
       icon: <TbSailboat />,
       id: 'rowing-boat',
       label: 'Rowing Boat',
-      src: '/sounds/transport/rowing-boat.mp3',
+      src: getAssetPath('/sounds/transport/rowing-boat.mp3'),
     },
   ],
   title: 'Transport',
diff --git a/src/data/sounds/urban.tsx b/src/data/sounds/urban.tsx
index 59cf3eb..142745e 100644
--- a/src/data/sounds/urban.tsx
+++ b/src/data/sounds/urban.tsx
@@ -6,6 +6,8 @@ import { RiSparkling2Fill } from 'react-icons/ri/index';
 
 import type { Category } from '../types';
 
+import { getAssetPath } from '@/helpers/path';
+
 export const urban: Category = {
   icon: <FaCity />,
   id: 'urban',
@@ -14,43 +16,43 @@ export const urban: Category = {
       icon: <PiRoadHorizonFill />,
       id: 'highway',
       label: 'Highway',
-      src: '/sounds/urban/highway.mp3',
+      src: getAssetPath('/sounds/urban/highway.mp3'),
     },
     {
       icon: <FaRoad />,
       id: 'road',
       label: 'Road',
-      src: '/sounds/urban/road.mp3',
+      src: getAssetPath('/sounds/urban/road.mp3'),
     },
     {
       icon: <PiSirenBold />,
       id: 'ambulance-siren',
       label: 'Ambulance Siren',
-      src: '/sounds/urban/ambulance-siren.mp3',
+      src: getAssetPath('/sounds/urban/ambulance-siren.mp3'),
     },
     {
       icon: <BsSoundwave />,
       id: 'busy-street',
       label: 'Busy Street',
-      src: '/sounds/urban/busy-street.mp3',
+      src: getAssetPath('/sounds/urban/busy-street.mp3'),
     },
     {
       icon: <BsPeopleFill />,
       id: 'crowd',
       label: 'Crowd',
-      src: '/sounds/urban/crowd.mp3',
+      src: getAssetPath('/sounds/urban/crowd.mp3'),
     },
     {
       icon: <BiSolidTraffic />,
       id: 'traffic',
       label: 'Traffic',
-      src: '/sounds/urban/traffic.mp3',
+      src: getAssetPath('/sounds/urban/traffic.mp3'),
     },
     {
       icon: <RiSparkling2Fill />,
       id: 'fireworks',
       label: 'Fireworks',
-      src: '/sounds/urban/fireworks.mp3',
+      src: getAssetPath('/sounds/urban/fireworks.mp3'),
     },
   ],
   title: 'Urban',
diff --git a/src/helpers/path.ts b/src/helpers/path.ts
new file mode 100644
index 0000000..ceee6ba
--- /dev/null
+++ b/src/helpers/path.ts
@@ -0,0 +1,7 @@
+export function getAssetPath(relativePath: string): string {
+  const baseURL = import.meta.env.BASE_URL;
+  const withoutTrailingSlash = baseURL.replace(/\/+$/, '');
+  const withoutLeadingSlash = relativePath.replace(/^\/+/, '');
+
+  return `${withoutTrailingSlash}/${withoutLeadingSlash}`;
+}