diff --git a/src/data/sounds.ts b/src/data/sounds.ts
new file mode 100644
index 0000000..5a194ec
--- /dev/null
+++ b/src/data/sounds.ts
@@ -0,0 +1,14 @@
+import { nature } from './sounds/nature';
+import { rain } from './sounds/rain';
+import { animals } from './sounds/animals';
+import { urban } from './sounds/urban';
+import { things } from './sounds/things';
+import { noise } from './sounds/noise';
+
+import type { Categories } from './types';
+
+export const sounds: {
+  categories: Categories;
+} = {
+  categories: [nature, rain, animals, urban, things, noise],
+};
diff --git a/src/data/sounds.tsx b/src/data/sounds.tsx
deleted file mode 100644
index 252b735..0000000
--- a/src/data/sounds.tsx
+++ /dev/null
@@ -1,337 +0,0 @@
-import {
-  GiCricket,
-  GiSeagull,
-  GiWindow,
-  GiWaterfall,
-  GiWolfHead,
-  GiOwl,
-  GiWindchimes,
-  GiSoundWaves,
-} from 'react-icons/gi/index';
-import {
-  BsFire,
-  BsSoundwave,
-  BsFillCloudRainFill,
-  BsFillCloudRainHeavyFill,
-  BsUmbrellaFill,
-  BsFillKeyboardFill,
-} from 'react-icons/bs/index';
-import {
-  BiSolidTree,
-  BiWater,
-  BiSolidCoffeeAlt,
-  BiSolidTrain,
-  BiSolidPlaneAlt,
-} from 'react-icons/bi/index';
-import {
-  FaWater,
-  FaWind,
-  FaLeaf,
-  FaDog,
-  FaFrog,
-  FaCity,
-  FaRoad,
-  FaKeyboard,
-  FaClock,
-  FaRegSnowflake,
-} from 'react-icons/fa/index';
-import {
-  PiBirdFill,
-  PiTentFill,
-  PiRoadHorizonFill,
-  PiSirenBold,
-} from 'react-icons/pi/index';
-import { MdOutlineThunderstorm, MdSmartToy } from 'react-icons/md/index';
-import { TbScubaMask, TbBowlFilled } from 'react-icons/tb/index';
-import { RiFilePaper2Fill } from 'react-icons/ri/index';
-
-import type { Categories } from './types';
-
-export const sounds: {
-  categories: Categories;
-} = {
-  categories: [
-    {
-      icon: <BiSolidTree />,
-      id: 'nature',
-      sounds: [
-        {
-          icon: <BiWater />,
-          id: 'river',
-          label: 'River',
-          src: '/sounds/nature/river.mp3',
-        },
-        {
-          icon: <FaWater />,
-          id: 'waves',
-          label: 'Waves',
-          src: '/sounds/nature/waves.mp3',
-        },
-        {
-          icon: <BsFire />,
-          id: 'campfire',
-          label: 'Campfire',
-          src: '/sounds/nature/campfire.mp3',
-        },
-        {
-          icon: <FaWind />,
-          id: 'wind',
-          label: 'Wind',
-          src: '/sounds/nature/wind.mp3',
-        },
-        {
-          icon: <FaWind />,
-          id: 'howling-wind',
-          label: 'Howling Wind',
-          src: '/sounds/nature/howling-wind.mp3',
-        },
-        {
-          icon: <FaWind />,
-          id: 'wind-in-trees',
-          label: 'Wind in Trees',
-          src: '/sounds/nature/wind-in-trees.mp3',
-        },
-        {
-          icon: <GiWaterfall />,
-          id: 'waterfall',
-          label: 'Waterfall',
-          src: '/sounds/nature/waterfall.mp3',
-        },
-        {
-          icon: <TbScubaMask />,
-          id: 'underwater',
-          label: 'Underwater',
-          src: '/sounds/nature/underwater.mp3',
-        },
-        {
-          icon: <FaRegSnowflake />,
-          id: 'walk-in-snow',
-          label: 'Walk in Snow',
-          src: '/sounds/nature/walk-in-snow.mp3',
-        },
-        {
-          icon: <FaLeaf />,
-          id: 'walk-on-leaves',
-          label: 'Walk on Leaves',
-          src: '/sounds/nature/walk-on-leaves.mp3',
-        },
-      ],
-      title: 'Nature',
-    },
-    {
-      icon: <BsFillCloudRainFill />,
-      id: 'rain',
-      sounds: [
-        {
-          icon: <BsFillCloudRainFill />,
-          id: 'light-rain',
-          label: 'Light Rain',
-          src: '/sounds/rain/light-rain.mp3',
-        },
-        {
-          icon: <BsFillCloudRainHeavyFill />,
-          id: 'heavy-rain',
-          label: 'Heavy Rain',
-          src: '/sounds/rain/heavy-rain.mp3',
-        },
-        {
-          icon: <MdOutlineThunderstorm />,
-          id: 'thunder',
-          label: 'Thunder',
-          src: '/sounds/rain/thunder.mp3',
-        },
-        {
-          icon: <GiWindow />,
-          id: 'rain-on-window',
-          label: 'Rain on Window',
-          src: '/sounds/rain/rain-on-window.mp3',
-        },
-        {
-          icon: <BsUmbrellaFill />,
-          id: 'rain-on-umbrella',
-          label: 'Rain on Umbrella',
-          src: '/sounds/rain/rain-on-umbrella.mp3',
-        },
-        {
-          icon: <PiTentFill />,
-          id: 'rain-on-tent',
-          label: 'Rain on Tent',
-          src: '/sounds/rain/rain-on-tent.mp3',
-        },
-        {
-          icon: <FaLeaf />,
-          id: 'rain-on-leaves',
-          label: 'Rain on Leaves',
-          src: '/sounds/rain/rain-on-leaves.mp3',
-        },
-      ],
-      title: 'Rain',
-    },
-    {
-      icon: <FaDog />,
-      id: 'animals',
-      sounds: [
-        {
-          icon: <PiBirdFill />,
-          id: 'birds',
-          label: 'Birds',
-          src: '/sounds/animals/birds.mp3',
-        },
-        {
-          icon: <GiSeagull />,
-          id: 'seagulls',
-          label: 'Seagulls',
-          src: '/sounds/animals/seagulls.mp3',
-        },
-        {
-          icon: <GiCricket />,
-          id: 'crickets',
-          label: 'Crickets',
-          src: '/sounds/animals/crickets.mp3',
-        },
-        {
-          icon: <GiWolfHead />,
-          id: 'wolf',
-          label: 'Wolf',
-          src: '/sounds/animals/wolf.mp3',
-        },
-        {
-          icon: <GiOwl />,
-          id: 'owl',
-          label: 'Owl',
-          src: '/sounds/animals/owl.mp3',
-        },
-        {
-          icon: <FaFrog />,
-          id: 'frog',
-          label: 'Frog',
-          src: '/sounds/animals/frog.mp3',
-        },
-      ],
-      title: 'Animals',
-    },
-    {
-      icon: <FaCity />,
-      id: 'urban',
-      sounds: [
-        {
-          icon: <BiSolidCoffeeAlt />,
-          id: 'cafe',
-          label: 'Cafe',
-          src: '/sounds/urban/cafe.mp3',
-        },
-        {
-          icon: <PiRoadHorizonFill />,
-          id: 'highway',
-          label: 'Highway',
-          src: '/sounds/urban/highway.mp3',
-        },
-        {
-          icon: <FaRoad />,
-          id: 'road',
-          label: 'Road',
-          src: '/sounds/urban/road.mp3',
-        },
-        {
-          icon: <PiSirenBold />,
-          id: 'ambulance-siren',
-          label: 'Ambulance Siren',
-          src: '/sounds/urban/ambulance-siren.mp3',
-        },
-        {
-          icon: <BiSolidTrain />,
-          id: 'train',
-          label: 'Train',
-          src: '/sounds/urban/train.mp3',
-        },
-        {
-          icon: <BiSolidTrain />,
-          id: 'inside-a-train',
-          label: 'Inside a Train',
-          src: '/sounds/urban/inside-a-train.mp3',
-        },
-        {
-          icon: <BiSolidPlaneAlt />,
-          id: 'airport',
-          label: 'Airport',
-          src: '/sounds/urban/airport.mp3',
-        },
-        {
-          icon: <BiSolidPlaneAlt />,
-          id: 'airplane',
-          label: 'Airplane',
-          src: '/sounds/urban/airplane.mp3',
-        },
-      ],
-      title: 'Urban',
-    },
-    {
-      icon: <MdSmartToy />,
-      id: 'things',
-      sounds: [
-        {
-          icon: <BsFillKeyboardFill />,
-          id: 'keyboard',
-          label: 'Keyboard',
-          src: '/sounds/things/keyboard.mp3',
-        },
-        {
-          icon: <FaKeyboard />,
-          id: 'typewriter',
-          label: 'Typewriter',
-          src: '/sounds/things/typewriter.mp3',
-        },
-        {
-          icon: <RiFilePaper2Fill />,
-          id: 'paper',
-          label: 'Paper',
-          src: '/sounds/things/paper.mp3',
-        },
-        {
-          icon: <FaClock />,
-          id: 'clock',
-          label: 'Clock',
-          src: '/sounds/things/clock.mp3',
-        },
-        {
-          icon: <GiWindchimes />,
-          id: 'wind-chimes',
-          label: 'Wind Chimes',
-          src: '/sounds/things/wind-chimes.mp3',
-        },
-        {
-          icon: <TbBowlFilled />,
-          id: 'singing-bowl',
-          label: 'Singing Bowl',
-          src: '/sounds/things/singing-bowl.mp3',
-        },
-      ],
-      title: 'Things',
-    },
-    {
-      icon: <BsSoundwave />,
-      id: 'noise',
-      sounds: [
-        {
-          icon: <GiSoundWaves />,
-          id: 'white-noise',
-          label: 'White Noise',
-          src: '/sounds/noise/white-noise.wav',
-        },
-        {
-          icon: <GiSoundWaves />,
-          id: 'pink-noise',
-          label: 'Pink Noise',
-          src: '/sounds/noise/pink-noise.wav',
-        },
-        {
-          icon: <GiSoundWaves />,
-          id: 'brown-noise',
-          label: 'Brown Noise',
-          src: '/sounds/noise/brown-noise.wav',
-        },
-      ],
-      title: 'Noise',
-    },
-  ],
-};
diff --git a/src/data/sounds/animals.tsx b/src/data/sounds/animals.tsx
new file mode 100644
index 0000000..aa58216
--- /dev/null
+++ b/src/data/sounds/animals.tsx
@@ -0,0 +1,49 @@
+import { GiCricket, GiSeagull, GiWolfHead, GiOwl } from 'react-icons/gi/index';
+import { FaDog, FaFrog } from 'react-icons/fa/index';
+import { PiBirdFill } from 'react-icons/pi/index';
+
+import type { Category } from '../types';
+
+export const animals: Category = {
+  icon: <FaDog />,
+  id: 'animals',
+  sounds: [
+    {
+      icon: <PiBirdFill />,
+      id: 'birds',
+      label: 'Birds',
+      src: '/sounds/animals/birds.mp3',
+    },
+    {
+      icon: <GiSeagull />,
+      id: 'seagulls',
+      label: 'Seagulls',
+      src: '/sounds/animals/seagulls.mp3',
+    },
+    {
+      icon: <GiCricket />,
+      id: 'crickets',
+      label: 'Crickets',
+      src: '/sounds/animals/crickets.mp3',
+    },
+    {
+      icon: <GiWolfHead />,
+      id: 'wolf',
+      label: 'Wolf',
+      src: '/sounds/animals/wolf.mp3',
+    },
+    {
+      icon: <GiOwl />,
+      id: 'owl',
+      label: 'Owl',
+      src: '/sounds/animals/owl.mp3',
+    },
+    {
+      icon: <FaFrog />,
+      id: 'frog',
+      label: 'Frog',
+      src: '/sounds/animals/frog.mp3',
+    },
+  ],
+  title: 'Animals',
+};
diff --git a/src/data/sounds/nature.tsx b/src/data/sounds/nature.tsx
new file mode 100644
index 0000000..58dafd6
--- /dev/null
+++ b/src/data/sounds/nature.tsx
@@ -0,0 +1,75 @@
+import { GiWaterfall } from 'react-icons/gi/index';
+import { BsFire } from 'react-icons/bs/index';
+import { BiSolidTree, BiWater } from 'react-icons/bi/index';
+import { FaWater, FaWind, FaLeaf, FaRegSnowflake } from 'react-icons/fa/index';
+import { TbScubaMask } from 'react-icons/tb/index';
+
+import type { Category } from '../types';
+
+export const nature: Category = {
+  icon: <BiSolidTree />,
+  id: 'nature',
+  sounds: [
+    {
+      icon: <BiWater />,
+      id: 'river',
+      label: 'River',
+      src: '/sounds/nature/river.mp3',
+    },
+    {
+      icon: <FaWater />,
+      id: 'waves',
+      label: 'Waves',
+      src: '/sounds/nature/waves.mp3',
+    },
+    {
+      icon: <BsFire />,
+      id: 'campfire',
+      label: 'Campfire',
+      src: '/sounds/nature/campfire.mp3',
+    },
+    {
+      icon: <FaWind />,
+      id: 'wind',
+      label: 'Wind',
+      src: '/sounds/nature/wind.mp3',
+    },
+    {
+      icon: <FaWind />,
+      id: 'howling-wind',
+      label: 'Howling Wind',
+      src: '/sounds/nature/howling-wind.mp3',
+    },
+    {
+      icon: <FaWind />,
+      id: 'wind-in-trees',
+      label: 'Wind in Trees',
+      src: '/sounds/nature/wind-in-trees.mp3',
+    },
+    {
+      icon: <GiWaterfall />,
+      id: 'waterfall',
+      label: 'Waterfall',
+      src: '/sounds/nature/waterfall.mp3',
+    },
+    {
+      icon: <TbScubaMask />,
+      id: 'underwater',
+      label: 'Underwater',
+      src: '/sounds/nature/underwater.mp3',
+    },
+    {
+      icon: <FaRegSnowflake />,
+      id: 'walk-in-snow',
+      label: 'Walk in Snow',
+      src: '/sounds/nature/walk-in-snow.mp3',
+    },
+    {
+      icon: <FaLeaf />,
+      id: 'walk-on-leaves',
+      label: 'Walk on Leaves',
+      src: '/sounds/nature/walk-on-leaves.mp3',
+    },
+  ],
+  title: 'Nature',
+};
diff --git a/src/data/sounds/noise.tsx b/src/data/sounds/noise.tsx
new file mode 100644
index 0000000..5042001
--- /dev/null
+++ b/src/data/sounds/noise.tsx
@@ -0,0 +1,30 @@
+import { GiSoundWaves } from 'react-icons/gi/index';
+import { BsSoundwave } from 'react-icons/bs/index';
+
+import type { Category } from '../types';
+
+export const noise: Category = {
+  icon: <BsSoundwave />,
+  id: 'noise',
+  sounds: [
+    {
+      icon: <GiSoundWaves />,
+      id: 'white-noise',
+      label: 'White Noise',
+      src: '/sounds/noise/white-noise.wav',
+    },
+    {
+      icon: <GiSoundWaves />,
+      id: 'pink-noise',
+      label: 'Pink Noise',
+      src: '/sounds/noise/pink-noise.wav',
+    },
+    {
+      icon: <GiSoundWaves />,
+      id: 'brown-noise',
+      label: 'Brown Noise',
+      src: '/sounds/noise/brown-noise.wav',
+    },
+  ],
+  title: 'Noise',
+};
diff --git a/src/data/sounds/rain.tsx b/src/data/sounds/rain.tsx
new file mode 100644
index 0000000..0fc4691
--- /dev/null
+++ b/src/data/sounds/rain.tsx
@@ -0,0 +1,61 @@
+import {
+  BsFillCloudRainFill,
+  BsFillCloudRainHeavyFill,
+  BsUmbrellaFill,
+} from 'react-icons/bs/index';
+import { GiWindow } from 'react-icons/gi/index';
+import { FaLeaf } from 'react-icons/fa/index';
+import { PiTentFill } from 'react-icons/pi/index';
+import { MdOutlineThunderstorm } from 'react-icons/md/index';
+
+import type { Category } from '../types';
+
+export const rain: Category = {
+  icon: <BsFillCloudRainFill />,
+  id: 'rain',
+  sounds: [
+    {
+      icon: <BsFillCloudRainFill />,
+      id: 'light-rain',
+      label: 'Light Rain',
+      src: '/sounds/rain/light-rain.mp3',
+    },
+    {
+      icon: <BsFillCloudRainHeavyFill />,
+      id: 'heavy-rain',
+      label: 'Heavy Rain',
+      src: '/sounds/rain/heavy-rain.mp3',
+    },
+    {
+      icon: <MdOutlineThunderstorm />,
+      id: 'thunder',
+      label: 'Thunder',
+      src: '/sounds/rain/thunder.mp3',
+    },
+    {
+      icon: <GiWindow />,
+      id: 'rain-on-window',
+      label: 'Rain on Window',
+      src: '/sounds/rain/rain-on-window.mp3',
+    },
+    {
+      icon: <BsUmbrellaFill />,
+      id: 'rain-on-umbrella',
+      label: 'Rain on Umbrella',
+      src: '/sounds/rain/rain-on-umbrella.mp3',
+    },
+    {
+      icon: <PiTentFill />,
+      id: 'rain-on-tent',
+      label: 'Rain on Tent',
+      src: '/sounds/rain/rain-on-tent.mp3',
+    },
+    {
+      icon: <FaLeaf />,
+      id: 'rain-on-leaves',
+      label: 'Rain on Leaves',
+      src: '/sounds/rain/rain-on-leaves.mp3',
+    },
+  ],
+  title: 'Rain',
+};
diff --git a/src/data/sounds/things.tsx b/src/data/sounds/things.tsx
new file mode 100644
index 0000000..1bfb2b5
--- /dev/null
+++ b/src/data/sounds/things.tsx
@@ -0,0 +1,52 @@
+import { GiWindchimes } from 'react-icons/gi/index';
+import { BsFillKeyboardFill } from 'react-icons/bs/index';
+import { FaKeyboard, FaClock } from 'react-icons/fa/index';
+import { MdSmartToy } from 'react-icons/md/index';
+import { TbBowlFilled } from 'react-icons/tb/index';
+import { RiFilePaper2Fill } from 'react-icons/ri/index';
+
+import type { Category } from '../types';
+
+export const things: Category = {
+  icon: <MdSmartToy />,
+  id: 'things',
+  sounds: [
+    {
+      icon: <BsFillKeyboardFill />,
+      id: 'keyboard',
+      label: 'Keyboard',
+      src: '/sounds/things/keyboard.mp3',
+    },
+    {
+      icon: <FaKeyboard />,
+      id: 'typewriter',
+      label: 'Typewriter',
+      src: '/sounds/things/typewriter.mp3',
+    },
+    {
+      icon: <RiFilePaper2Fill />,
+      id: 'paper',
+      label: 'Paper',
+      src: '/sounds/things/paper.mp3',
+    },
+    {
+      icon: <FaClock />,
+      id: 'clock',
+      label: 'Clock',
+      src: '/sounds/things/clock.mp3',
+    },
+    {
+      icon: <GiWindchimes />,
+      id: 'wind-chimes',
+      label: 'Wind Chimes',
+      src: '/sounds/things/wind-chimes.mp3',
+    },
+    {
+      icon: <TbBowlFilled />,
+      id: 'singing-bowl',
+      label: 'Singing Bowl',
+      src: '/sounds/things/singing-bowl.mp3',
+    },
+  ],
+  title: 'Things',
+};
diff --git a/src/data/sounds/urban.tsx b/src/data/sounds/urban.tsx
new file mode 100644
index 0000000..b210e9d
--- /dev/null
+++ b/src/data/sounds/urban.tsx
@@ -0,0 +1,65 @@
+import {
+  BiSolidCoffeeAlt,
+  BiSolidTrain,
+  BiSolidPlaneAlt,
+} from 'react-icons/bi/index';
+import { FaCity, FaRoad } from 'react-icons/fa/index';
+import { PiRoadHorizonFill, PiSirenBold } from 'react-icons/pi/index';
+
+import type { Category } from '../types';
+
+export const urban: Category = {
+  icon: <FaCity />,
+  id: 'urban',
+  sounds: [
+    {
+      icon: <BiSolidCoffeeAlt />,
+      id: 'cafe',
+      label: 'Cafe',
+      src: '/sounds/urban/cafe.mp3',
+    },
+    {
+      icon: <PiRoadHorizonFill />,
+      id: 'highway',
+      label: 'Highway',
+      src: '/sounds/urban/highway.mp3',
+    },
+    {
+      icon: <FaRoad />,
+      id: 'road',
+      label: 'Road',
+      src: '/sounds/urban/road.mp3',
+    },
+    {
+      icon: <PiSirenBold />,
+      id: 'ambulance-siren',
+      label: 'Ambulance Siren',
+      src: '/sounds/urban/ambulance-siren.mp3',
+    },
+    {
+      icon: <BiSolidTrain />,
+      id: 'train',
+      label: 'Train',
+      src: '/sounds/urban/train.mp3',
+    },
+    {
+      icon: <BiSolidTrain />,
+      id: 'inside-a-train',
+      label: 'Inside a Train',
+      src: '/sounds/urban/inside-a-train.mp3',
+    },
+    {
+      icon: <BiSolidPlaneAlt />,
+      id: 'airport',
+      label: 'Airport',
+      src: '/sounds/urban/airport.mp3',
+    },
+    {
+      icon: <BiSolidPlaneAlt />,
+      id: 'airplane',
+      label: 'Airplane',
+      src: '/sounds/urban/airplane.mp3',
+    },
+  ],
+  title: 'Urban',
+};