diff --git a/package-lock.json b/package-lock.json
index 0bed3bb..54819d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "lucide-react": "^0.378.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.2.0",
         "react-router-dom": "^6.14.0",
         "slate": "^0.94.1",
         "slate-react": "^0.97.2",
@@ -14657,6 +14658,14 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-icons": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.0.tgz",
+      "integrity": "sha512-n52Y7Eb4MgQZHsSZOhSXv1zs2668/hBYKfSRIvKh42yExjyhZu0d1IK2CLLZ3BZB1oo13lDfwx2vOh2z9FTV6Q==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-inspector": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz",
diff --git a/package.json b/package.json
index 4255cde..3d3a556 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "lucide-react": "^0.378.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.0",
     "react-router-dom": "^6.14.0",
     "slate": "^0.94.1",
     "slate-react": "^0.97.2",
diff --git a/src/components/Add-cat/Add-cat.jsx b/src/components/Add-cat/Add-cat.jsx
new file mode 100644
index 0000000..4e3dd20
--- /dev/null
+++ b/src/components/Add-cat/Add-cat.jsx
@@ -0,0 +1,13 @@
+import { Button } from "@/components/ui/button"
+import { FaPlus } from "react-icons/fa";
+import "./button-add-cat.css"
+
+const AddButton = () =>{
+return(
+    <>
+        <Button className="button" variant="outline"><FaPlus /> Add cat</Button>
+    </>
+)
+}
+
+export default AddButton
\ No newline at end of file
diff --git a/src/components/Add-cat/Add-cat.stories.tsx b/src/components/Add-cat/Add-cat.stories.tsx
new file mode 100644
index 0000000..1707730
--- /dev/null
+++ b/src/components/Add-cat/Add-cat.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta,StoryObj } from '@storybook/react';
+
+import  AddButton  from './Add-cat';
+
+const meta: Meta<typeof AddButton> = {
+  component: AddButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof AddButton>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  render: () => <AddButton />,
+};
+
+export const WithLabel: Story = {
+  render: () => <AddButton  label="outro texto aqui!" />,
+};
\ No newline at end of file
diff --git a/src/components/Add-cat/button-add-cat.css b/src/components/Add-cat/button-add-cat.css
new file mode 100644
index 0000000..c8983ff
--- /dev/null
+++ b/src/components/Add-cat/button-add-cat.css
@@ -0,0 +1,3 @@
+.button{
+    border-radius: 20px;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index b5c61c9..a90f074 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index b9a469e..3cd3b6e 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -1,8 +1,11 @@
+import AddButton from "@/components/Add-cat/Add-cat";
+
 
 export const HomePage = () => {
   return (
     <div>
       <h1>Home Page</h1>
+      <AddButton/>
     </div>
   );
 }
\ No newline at end of file