diff --git a/src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx b/src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx
index 9b3583c..11112bd 100644
--- a/src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx
+++ b/src/components/EvolutionSpecies/EvolutionSpecies.stories.tsx
@@ -1,35 +1,29 @@
-import EvolutionSpecies, { EvolutionSpeciesProps } from './EvolutionSpecies';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
+import EvolutionSpecies from './EvolutionSpecies';
+
+const meta: Meta<typeof EvolutionSpecies> = {
   title: 'Component/EvolutionSpecies',
   component: EvolutionSpecies,
-} as ComponentMeta<typeof EvolutionSpecies>;
-
-const Template: ComponentStory<typeof EvolutionSpecies> = (
-  args: EvolutionSpeciesProps,
-) => <EvolutionSpecies {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  types: ['grass', 'poison'],
-  image_url:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
-  name: 'Bulbasaur',
 };
 
-export const Bulbasaur = Template.bind({});
-Bulbasaur.args = {
-  types: ['grass', 'poison'],
-  image_url:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
-  name: 'Bulbasaur',
+export default meta;
+type Story = StoryObj<typeof EvolutionSpecies>;
+
+export const Bulbasaur: Story = {
+  args: {
+    types: ['grass', 'poison'],
+    image_url:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+    name: 'Bulbasaur',
+  },
 };
 
-export const Magneton = Template.bind({});
-Magneton.args = {
-  types: ['electric', 'steel'],
-  image_url:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/82.svg',
-  name: 'Magneton',
+export const Magneton: Story = {
+  args: {
+    types: ['electric', 'steel'],
+    image_url:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/82.svg',
+    name: 'Magneton',
+  },
 };
diff --git a/src/components/GenderRate/GenderRate.stories.tsx b/src/components/GenderRate/GenderRate.stories.tsx
index 6630b1c..1f53136 100644
--- a/src/components/GenderRate/GenderRate.stories.tsx
+++ b/src/components/GenderRate/GenderRate.stories.tsx
@@ -1,22 +1,23 @@
-import GenderRate, { GenderRateProps } from './GenderRate';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
+import GenderRate from './GenderRate';
+
+const meta: Meta<typeof GenderRate> = {
   title: 'Component/GenderRate',
   component: GenderRate,
-} as ComponentMeta<typeof GenderRate>;
-
-const Template: ComponentStory<typeof GenderRate> = (args: GenderRateProps) => (
-  <GenderRate {...args} />
-);
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  genderRatio: 0,
 };
 
-export const Option1 = Template.bind({});
-Option1.args = {
-  genderRatio: 1,
+export default meta;
+type Story = StoryObj<typeof GenderRate>;
+
+export const Option1: Story = {
+  args: {
+    genderRatio: 1,
+  },
+};
+
+export const Option2: Story = {
+  args: {
+    genderRatio: 2,
+  },
 };
diff --git a/src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx b/src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx
index 3ed6680..0eae648 100644
--- a/src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx
+++ b/src/components/InfoDialogComponent/InfoDialogComponent.stories.tsx
@@ -1,52 +1,53 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
 import InfoDialogComponent, {
   InfoDialogComponentProps,
 } from './InfoDialogComponent';
 
-export default {
+const meta: Meta<typeof InfoDialogComponent> = {
   title: 'Component/InfoDialogComponent',
   component: InfoDialogComponent,
-} as ComponentMeta<typeof InfoDialogComponent>;
-
-const Template: ComponentStory<typeof InfoDialogComponent> = (
-  args: InfoDialogComponentProps,
-) => <InfoDialogComponent {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  openDialog: true,
-  id: 84,
-  name: 'Doduo',
-  genera: 'Twin Bird Pokémon',
-  image:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/84.svg',
-  types: ['normal', 'flying'],
-  height: 14,
-  weight: 392,
-  genderRatio: 4,
-  description:
-    'A bird that makes up for its poor flying with its fast foot speed. Leaves giant footprints.',
-  abilities: ['run-away', 'early-bird', 'tangled-feet'],
-  stats: [
-    { stat__name: 'hp', stat__value: 35 },
-    { stat__name: 'attack', stat__value: 85 },
-    { stat__name: 'defense', stat__value: 45 },
-    { stat__name: 'special-attack', stat__value: 35 },
-    { stat__name: 'special-defense', stat__value: 35 },
-    { stat__name: 'speed', stat__value: 75 },
-  ],
-  evolutionChain: [
-    {
-      types: ['normal', 'flying'],
-      image:
-        'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/84.svg',
-      name: 'Doduo',
-    },
-    {
-      name: 'Dodrio',
-      types: ['normal', 'flying'],
-      image:
-        'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/85.svg',
-    },
-  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof InfoDialogComponent>;
+
+export const Duduo: Story = {
+  args: {
+    openDialog: true,
+    id: 84,
+    name: 'Doduo',
+    genera: 'Twin Bird Pokémon',
+    image:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/84.svg',
+    types: ['normal', 'flying'],
+    height: 14,
+    weight: 392,
+    genderRatio: 4,
+    description:
+      'A bird that makes up for its poor flying with its fast foot speed. Leaves giant footprints.',
+    abilities: ['run-away', 'early-bird', 'tangled-feet'],
+    stats: [
+      { stat__name: 'hp', stat__value: 35 },
+      { stat__name: 'attack', stat__value: 85 },
+      { stat__name: 'defense', stat__value: 45 },
+      { stat__name: 'special-attack', stat__value: 35 },
+      { stat__name: 'special-defense', stat__value: 35 },
+      { stat__name: 'speed', stat__value: 75 },
+    ],
+    evolutionChain: [
+      {
+        types: ['normal', 'flying'],
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/84.svg',
+        name: 'Doduo',
+      },
+      {
+        name: 'Dodrio',
+        types: ['normal', 'flying'],
+        image:
+          'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/85.svg',
+      },
+    ],
+  },
 };
diff --git a/src/components/PokemonCard/PokemonCard.stories.tsx b/src/components/PokemonCard/PokemonCard.stories.tsx
index c4158e3..fea7236 100644
--- a/src/components/PokemonCard/PokemonCard.stories.tsx
+++ b/src/components/PokemonCard/PokemonCard.stories.tsx
@@ -1,43 +1,32 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import PokemonCard, { PokemonCardProps } from './PokemonCard';
+import PokemonCard from './PokemonCard';
 
 import charizard_svg from './assets/stories/charizard.svg';
 import charizard_info from './assets/stories/charizard.json';
 
-export default {
+const meta: Meta<typeof PokemonCard> = {
   title: 'Component/PokemonCard',
   component: PokemonCard,
-} as ComponentMeta<typeof PokemonCard>;
+};
+export default meta;
+type Story = StoryObj<typeof PokemonCard>;
 
-const Template: ComponentStory<typeof PokemonCard> = (
-  args: PokemonCardProps,
-) => <PokemonCard {...args} />;
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  id: 6,
-  name: charizard_info.name,
-  image: charizard_svg,
-  types: ['fire', 'flying'],
+export const Charizard: Story = {
+  args: {
+    id: 6,
+    name: charizard_info.name,
+    image: charizard_svg,
+    types: ['fire', 'flying'],
+  },
 };
 
-export const Charizard = Template.bind({});
-Charizard.args = {
-  id: 6,
-  name: charizard_info.name,
-  image: charizard_svg,
-  types: ['fire', 'flying'],
-};
-
-export const Bulbasaur = Template.bind({});
-Bulbasaur.args = {
-  id: 1,
-  name: 'bulbasaur',
-  image:
-    'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
-  types: ['grass', 'poison'],
+export const Bulbasaur: Story = {
+  args: {
+    id: 1,
+    name: 'bulbasaur',
+    image:
+      'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg',
+    types: ['grass', 'poison'],
+  },
 };
diff --git a/src/components/PokemonTypes/PokemonTypes.stories.tsx b/src/components/PokemonTypes/PokemonTypes.stories.tsx
index f34219a..e949b9d 100644
--- a/src/components/PokemonTypes/PokemonTypes.stories.tsx
+++ b/src/components/PokemonTypes/PokemonTypes.stories.tsx
@@ -1,35 +1,35 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import PokemonTypes from './PokemonTypes';
 
-import PokemonTypes, { PokemonTypesProps } from './PokemonTypes';
-
-export default {
+const meta: Meta<typeof PokemonTypes> = {
   title: 'Component/PokemonTypes',
   component: PokemonTypes,
-} as ComponentMeta<typeof PokemonTypes>;
-
-const Template: ComponentStory<typeof PokemonTypes> = (
-  args: PokemonTypesProps,
-) => <PokemonTypes {...args} />;
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  types: ['fire'],
 };
 
-export const bulbasaur = Template.bind({});
-bulbasaur.args = {
-  types: ['grass', 'poison'],
+export default meta;
+type Story = StoryObj<typeof PokemonTypes>;
+
+export const charmander: Story = {
+  args: {
+    types: ['fire'],
+  },
 };
 
-export const charizard = Template.bind({});
-charizard.args = {
-  types: ['fire', 'flying'],
+export const bulbasaur: Story = {
+  args: {
+    types: ['grass', 'poison'],
+  },
 };
 
-export const threetypes = Template.bind({});
-threetypes.args = {
-  types: ['fire', 'flying', 'grass'],
+export const charizard: Story = {
+  args: {
+    types: ['fire', 'flying'],
+  },
+};
+
+export const threetypes: Story = {
+  args: {
+    types: ['fire', 'flying', 'grass'],
+  },
 };