diff --git a/src/components/SpeakerCard/SpeakerCard.stories.tsx b/src/components/SpeakerCard/SpeakerCard.stories.tsx
index 510a077..54c2e3e 100644
--- a/src/components/SpeakerCard/SpeakerCard.stories.tsx
+++ b/src/components/SpeakerCard/SpeakerCard.stories.tsx
@@ -15,6 +15,8 @@ const meta: Meta<typeof SpeakerCard> = {
     name: { control: "text" },
     role: { control: "text" },
     onChangeMode: { action: "mode changed" },
+    hour: { control: "text" },
+    isSaved: { control: "boolean" },
   },
 } satisfies Meta<typeof SpeakerCard>;
 
@@ -28,5 +30,7 @@ export const Default: Story = {
     imageUrl: "",
     name: "Abraão",
     role: "Developer",
+    hour: "10:00",
+    isSaved: true,
   },
 };
diff --git a/src/components/SpeakerCard/SpeakerCard.test.tsx b/src/components/SpeakerCard/SpeakerCard.test.tsx
index e44bf32..bc9aae4 100644
--- a/src/components/SpeakerCard/SpeakerCard.test.tsx
+++ b/src/components/SpeakerCard/SpeakerCard.test.tsx
@@ -11,6 +11,8 @@ test("renders SpeakerCard", () => {
       role="Developer"
       tags={["Frontend", "Convida", "Comunidade"]}
       label="Typescript morreu?"
+      hour="10:00"
+      isSaved={true}
     />
   );
   const element = getByText(/Typescript morreu?/i);
diff --git a/src/components/SpeakerCard/SpeakerCard.tsx b/src/components/SpeakerCard/SpeakerCard.tsx
index 8e06daf..96d62c7 100644
--- a/src/components/SpeakerCard/SpeakerCard.tsx
+++ b/src/components/SpeakerCard/SpeakerCard.tsx
@@ -3,7 +3,7 @@ import { ProfileCard } from "../ProfileCard";
 import { Badge } from "../ui/badge";
 import { Card } from "../ui/card";
 import { SpeakerCardProps } from "./types";
-import { Togglebutton } from "../Togglebutton";
+import { ToggleButton } from "../ToggleButton";
 
 export const SpeakerCard = ({
   label,
@@ -12,34 +12,33 @@ export const SpeakerCard = ({
   imageUrl,
   name,
   role,
+  hour,
+  isSaved,
   onChangeMode,
 }: SpeakerCardProps) => {
+  const handleToggleSave = () => {
+    onChangeMode(!isSaved);
+  };
+
   return (
-    <Card className="max-w-[300px] p-3 flex items-start flex-col justify-center bg-transparent border gap-4 border-[#D9B1FF] rounded-lg ">
+    <Card className="max-w-[500px] p-5 w-full flex items-start flex-col justify-center bg-transparent border gap-4 border-[#D9B1FF] rounded-lg ">
       <div className="flex gap-3 justify-between items-start w-full">
-        <span className="text-[#A190B2]">8:00</span>
-        <h1
-          className="text-[#E6D5F7] mt-0 pt-0 w-full text-wrap whitespace-normal text-base max-w-[180px] break-words"
-        >
+        <span className="text-[#A190B2] text-sm">{hour}</span>
+        <h1 className="text-[#E6D5F7] mt-0 pt-0 w-full text-wrap whitespace-normal text-base break-words">
           {label}
         </h1>
-        <Togglebutton initialMode={true} onModeChange={onChangeMode} />{" "}
+        <ToggleButton isSaved={isSaved} onToggle={handleToggleSave} />
       </div>
       <div className="flex gap-2 w-full justify-start overflow-x-auto scrollbar-cards [&::-webkit-scrollbar]:hidden">
-        {tags.map((tag: string) => (
+        {tags.map((tag: string, index) => (
           <Badge
+            key={index}
             variant="outline"
             className="bg-white text-[#A855F7] font-thin rounded-lg"
           >
             {tag}
           </Badge>
         ))}
-        <Badge
-          variant="outline"
-          className="bg-white text-[#A855F7] font-thin rounded-lg"
-        >
-          Carreira
-        </Badge>
       </div>
       <div className=" flex-cols p-2  w-full">
         <Separator className="w-full h-[0.3px] mb-4 bg-[#D9B1FF] rounded-xl" />
diff --git a/src/components/SpeakerCard/types.ts b/src/components/SpeakerCard/types.ts
index 1742b70..72cb42d 100644
--- a/src/components/SpeakerCard/types.ts
+++ b/src/components/SpeakerCard/types.ts
@@ -3,5 +3,7 @@ import { ProfileCardProps } from "../ProfileCard/types"
 export interface SpeakerCardProps extends ProfileCardProps {
     label: string
     tags: string[]
+    hour: string
+    isSaved: boolean
     onChangeMode: (mode: boolean) => void
 }
\ No newline at end of file
diff --git a/src/components/ToggleButton/ToggleButton.stories.tsx b/src/components/ToggleButton/ToggleButton.stories.tsx
new file mode 100644
index 0000000..7aba76e
--- /dev/null
+++ b/src/components/ToggleButton/ToggleButton.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggleButton } from "./ToggleButton";
+import { action } from "@storybook/addon-actions";
+
+export type Story = StoryObj<typeof ToggleButton>;
+
+const meta: Meta<typeof ToggleButton> = {
+  title: "Components/ToggleButton",
+  component: ToggleButton,
+  argTypes: {
+    isSaved: { control: "boolean" },
+    onToggle: { action: "mode changed" },
+  },
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+
+export const PlusButton: Story = {
+  args: {
+    isSaved: true,
+    onToggle: action("mode changed"),
+  },
+};
+
+export const MinusButton: Story = {
+  args: {
+    isSaved: false,
+    onToggle: action("mode changed"),
+  },
+};
\ No newline at end of file
diff --git a/src/components/ToggleButton/ToggleButton.test.tsx b/src/components/ToggleButton/ToggleButton.test.tsx
new file mode 100644
index 0000000..79e836f
--- /dev/null
+++ b/src/components/ToggleButton/ToggleButton.test.tsx
@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import { ToggleButton } from './ToggleButton';
+
+test('renders Togglebutton', () => {
+  const { getByTestId } = render(<ToggleButton isSaved={true} onToggle={() => (true)} />);
+  const element = getByTestId("toggleButton");
+  expect(element).toBeInTheDocument();
+});
\ No newline at end of file
diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx
new file mode 100644
index 0000000..5327811
--- /dev/null
+++ b/src/components/ToggleButton/ToggleButton.tsx
@@ -0,0 +1,14 @@
+import { CircleMinus, CirclePlus } from "lucide-react";
+
+type ToggleButtonProps = {
+  isSaved: boolean;
+  onToggle: (isSaved: boolean) => void;
+};
+
+export const ToggleButton = ({ isSaved, onToggle }: ToggleButtonProps) => {
+  return (
+    <div data-testid="toggleButton" onClick={() => onToggle(!isSaved)}>
+      {isSaved ? ( <CircleMinus color="#ffffff" /> ) : ( <CirclePlus color="#ffffff" /> )}
+    </div>
+  );
+};
diff --git a/src/components/ToggleButton/index.ts b/src/components/ToggleButton/index.ts
new file mode 100644
index 0000000..f814e20
--- /dev/null
+++ b/src/components/ToggleButton/index.ts
@@ -0,0 +1,3 @@
+import { ToggleButton } from "./ToggleButton"
+
+export { ToggleButton }
\ No newline at end of file
diff --git a/src/components/ToggleButton/types.ts b/src/components/ToggleButton/types.ts
new file mode 100644
index 0000000..dd9148f
--- /dev/null
+++ b/src/components/ToggleButton/types.ts
@@ -0,0 +1,4 @@
+export type ToggleButtonProps = {
+  isSaved: boolean;
+  onToggle: (isSaved: boolean) => void;
+};
diff --git a/src/components/Togglebutton/Togglebutton.stories.tsx b/src/components/Togglebutton/Togglebutton.stories.tsx
deleted file mode 100644
index c984018..0000000
--- a/src/components/Togglebutton/Togglebutton.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Togglebutton } from "./Togglebutton";
-import { action } from "@storybook/addon-actions";
-
-export type Story = StoryObj<typeof Togglebutton>;
-
-const meta: Meta<typeof Togglebutton> = {
-  title: "Components/Togglebutton",
-  component: Togglebutton,
-  argTypes: {
-    initialMode: { control: "boolean" },
-    onModeChange: { action: "mode changed" },
-  },
-} satisfies Meta<typeof Togglebutton>;
-
-export default meta;
-
-export const PlusButton: Story = {
-  args: {
-    initialMode: true,
-    onModeChange: action("mode changed"),
-  },
-};
-
-export const MinusButton: Story = {
-  args: {
-    initialMode: false,
-    onModeChange: action("mode changed"),
-  },
-};
\ No newline at end of file
diff --git a/src/components/Togglebutton/Togglebutton.test.tsx b/src/components/Togglebutton/Togglebutton.test.tsx
deleted file mode 100644
index 3dea0db..0000000
--- a/src/components/Togglebutton/Togglebutton.test.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render } from '@testing-library/react';
-import { Togglebutton } from './Togglebutton';
-
-test('renders Togglebutton', () => {
-  const { getByTestId } = render(<Togglebutton initialMode={false} />);
-  const element = getByTestId("false");
-  expect(element).toBeInTheDocument();
-});
\ No newline at end of file
diff --git a/src/components/Togglebutton/Togglebutton.tsx b/src/components/Togglebutton/Togglebutton.tsx
deleted file mode 100644
index b9fa0ea..0000000
--- a/src/components/Togglebutton/Togglebutton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { CircleMinus, CirclePlus } from "lucide-react";
-import { useState } from 'react';
-
-type ToggleButtonProps = {
-  initialMode?: boolean;
-  onModeChange?: (newMode: boolean) => void;
-};
-
-export const Togglebutton = ({ initialMode = true, onModeChange }: ToggleButtonProps) => {
-  const [mode, setMode] = useState(initialMode);
-
-  const handleChange = () => {
-    const newMode = !mode;
-    setMode(newMode);
-    if (onModeChange) {
-      onModeChange(newMode);
-    }
-  };
-
-  if (mode) {
-    return (
-      <div data-testid="true" onClick={handleChange}>
-        <CirclePlus color="#ffffff" />
-      </div>
-    );
-  } else {
-    return (
-      <div data-testid="false" onClick={handleChange}>
-        <CircleMinus color="#ffffff" />
-      </div>
-    );
-  }
-};
\ No newline at end of file
diff --git a/src/components/Togglebutton/index.ts b/src/components/Togglebutton/index.ts
deleted file mode 100644
index 3a033f4..0000000
--- a/src/components/Togglebutton/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Togglebutton } from "./Togglebutton"
-
-export { Togglebutton }
\ No newline at end of file