diff --git a/src/frontend/packages/ui/src/components/Collapsible/collapsible.stories.tsx b/src/frontend/packages/ui/src/components/Collapsible/collapsible.stories.tsx
index 957664cb..49b75eaa 100644
--- a/src/frontend/packages/ui/src/components/Collapsible/collapsible.stories.tsx
+++ b/src/frontend/packages/ui/src/components/Collapsible/collapsible.stories.tsx
@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from './collapsible';
 import { Button } from '../Button';
 import { useState } from 'react';
 
@@ -15,27 +19,35 @@ const meta: Meta<typeof Collapsible> = {
 export default meta;
 type Story = StoryObj<typeof Collapsible>;
 
-export const Default: Story = {
-  render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (
-      <Collapsible
-        open={isOpen}
-        onOpenChange={setIsOpen}
-        className="w-[350px] space-y-2"
-      >
-        <div className="flex items-center justify-between">
-          <h4 className="text-sm font-semibold">Title</h4>
-          <CollapsibleTrigger asChild>
-            <Button>Toggle</Button>
-          </CollapsibleTrigger>
+const CollapsibleListTemplate = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-semibold">Title</h4>
+        <CollapsibleTrigger asChild>
+          <Button>Toggle</Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-3 font-mono text-sm">
+        Contents1
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">
+          Contents2
         </div>
-        <div className="rounded-md border px-4 py-3 font-mono text-sm">Contents1</div>
-        <CollapsibleContent className="space-y-2">
-          <div className="rounded-md border px-4 py-3 font-mono text-sm">Contents2</div>
-          <div className="rounded-md border px-4 py-3 font-mono text-sm">Contents3</div>
-        </CollapsibleContent>
-      </Collapsible>
-    );
-  },
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">
+          Contents3
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+export const Default: Story = {
+  render: () => <CollapsibleListTemplate />,
 };
diff --git a/src/frontend/packages/ui/src/components/Toggle/toggle-group.stories.tsx b/src/frontend/packages/ui/src/components/Toggle/toggle-group.stories.tsx
index a9fc13e2..9eaf27f0 100644
--- a/src/frontend/packages/ui/src/components/Toggle/toggle-group.stories.tsx
+++ b/src/frontend/packages/ui/src/components/Toggle/toggle-group.stories.tsx
@@ -1,7 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ToggleGroup, ToggleGroupItem } from './toggle-group';
 import { useState } from 'react';
-import { Mic, MicOff, ScreenShare, ScreenShareOff, Video, VideoOff } from 'lucide-react';
+import {
+  Mic,
+  MicOff,
+  ScreenShare,
+  ScreenShareOff,
+  Video,
+  VideoOff,
+} from 'lucide-react';
 
 const meta: Meta<typeof ToggleGroup> = {
   title: 'Widget/ToggleGroup',
@@ -14,37 +21,46 @@ const meta: Meta<typeof ToggleGroup> = {
 export default meta;
 type Story = StoryObj<typeof ToggleGroup>;
 
-export const Default: Story = {
-  render: () => {
-    const [isMicOn, setIsMicOn] = useState(false);
-    const [isVideoOn, setIsVideoOn] = useState(false);
-    const [isScreenSharing, setIsScreenSharing] = useState(false);
+const ToggleGroupTemplate = ({
+  type = 'multiple',
+  variant = 'outline',
+  size = 'lg',
+}: {
+  type?: 'multiple';
+  variant?: 'default' | 'outline';
+  size?: 'default' | 'lg';
+}) => {
+  const [isMicOn, setIsMicOn] = useState(false);
+  const [isVideoOn, setIsVideoOn] = useState(false);
+  const [isScreenSharing, setIsScreenSharing] = useState(false);
 
-    return (
-      <ToggleGroup
-        variant="outline"
-        type="multiple"
-        size="lg"
+  return (
+    <ToggleGroup
+      type={type}
+      variant={variant}
+      size={size}
+    >
+      <ToggleGroupItem
+        value="mic"
+        onClick={() => setIsMicOn((prev) => !prev)}
       >
-        <ToggleGroupItem
-          value="mic"
-          onClick={() => setIsMicOn((prev) => !prev)}
-        >
-          {isMicOn ? <Mic /> : <MicOff />}
-        </ToggleGroupItem>
-        <ToggleGroupItem
-          value="video"
-          onClick={() => setIsVideoOn((prev) => !prev)}
-        >
-          {isVideoOn ? <Video /> : <VideoOff />}
-        </ToggleGroupItem>
-        <ToggleGroupItem
-          value="sharing"
-          onClick={() => setIsScreenSharing((prev) => !prev)}
-        >
-          {isScreenSharing ? <ScreenShare /> : <ScreenShareOff />}
-        </ToggleGroupItem>
-      </ToggleGroup>
-    );
-  },
+        {isMicOn ? <Mic /> : <MicOff />}
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="video"
+        onClick={() => setIsVideoOn((prev) => !prev)}
+      >
+        {isVideoOn ? <Video /> : <VideoOff />}
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="sharing"
+        onClick={() => setIsScreenSharing((prev) => !prev)}
+      >
+        {isScreenSharing ? <ScreenShare /> : <ScreenShareOff />}
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+};
+export const Default: Story = {
+  render: () => <ToggleGroupTemplate />,
 };
diff --git a/src/frontend/packages/ui/src/components/Toggle/toggle.stories.tsx b/src/frontend/packages/ui/src/components/Toggle/toggle.stories.tsx
index 6cc40faf..284fc42e 100644
--- a/src/frontend/packages/ui/src/components/Toggle/toggle.stories.tsx
+++ b/src/frontend/packages/ui/src/components/Toggle/toggle.stories.tsx
@@ -24,21 +24,39 @@ const meta: Meta<typeof Toggle> = {
 export default meta;
 type Story = StoryObj<typeof Toggle>;
 
+const ToggleButtonTemplate = ({
+  variant = 'outline',
+  size = 'default',
+}: {
+  variant?: 'default' | 'outline';
+  size?: 'default' | 'lg';
+}) => {
+  const [isPressed, setIsPressed] = useState(false);
+  return (
+    <Toggle
+      pressed={isPressed}
+      onPressedChange={setIsPressed}
+      variant={variant}
+      size={size}
+      className="bg-gray-100 border-black-100"
+    >
+      {isPressed ? <Mic /> : <MicOff />}
+    </Toggle>
+  );
+};
+
 export const Default: Story = {
   args: {
     variant: 'outline',
     size: 'default',
   },
-  render: (args) => {
-    const [isPressed, setIsPressed] = useState(false);
-    return (
-      <Toggle
-        {...args}
-        pressed={isPressed}
-        onPressedChange={setIsPressed}
-      >
-        {isPressed ? <Mic /> : <MicOff />}
-      </Toggle>
-    );
+  render: (args) => <ToggleButtonTemplate {...args} />,
+};
+
+export const LargeButton: Story = {
+  args: {
+    variant: 'default',
+    size: 'lg',
   },
+  render: (args) => <ToggleButtonTemplate {...args} />,
 };