From b785457106491edd87e42652b918689603c3e48f Mon Sep 17 00:00:00 2001
From: Michal Wasiak <michal.wasiak@hotmail.com>
Date: Thu, 19 Mar 2026 14:46:20 +1000
Subject: [PATCH 1/7] Task 01 done

---
 01/Task01.js                         | 32 +++++++++++++++++++++-------
 src/components/Alert/Alert.js        |  3 ++-
 src/components/Alert/Alert.styled.js | 12 ++++++++++-
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/01/Task01.js b/01/Task01.js
index c12ef98b..f3fd1e71 100644
--- a/01/Task01.js
+++ b/01/Task01.js
@@ -2,17 +2,33 @@ import React from 'react';
 
 import Alert from './../src/components/Alert';
 import { Row, Col, Alert as RBAlert } from 'react-bootstrap';
+import { ThemeProvider } from 'styled-components';
+
+const theme = {
+    colors: {
+        primary: 'green',
+        secondary: 'blue',
+    }
+}
 
 const Task01 = () => {
+
     return (
-        <Row>
-            <Col>
-                <RBAlert variant="primary">Uwaga! <em>Styled Components</em> nadchodzi!</RBAlert>
-            </Col>
-            <Col>
-                <Alert>Uwaga! <em>Styled Components</em> nadchodzi!</Alert>
-            </Col>
-        </Row>
+
+        <ThemeProvider theme={theme}>
+            <Row>
+                <Col>
+                    <RBAlert variant="primary">
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </RBAlert>
+                </Col>
+                <Col>
+                    <Alert type='secondary'>
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </Alert>
+                </Col>
+            </Row>
+        </ThemeProvider>
     )
 }
 
diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js
index 1b5f521c..6acb0905 100644
--- a/src/components/Alert/Alert.js
+++ b/src/components/Alert/Alert.js
@@ -3,8 +3,9 @@ import React from 'react';
 import { StyledAlert } from './Alert.styled';
 
 const Alert = props => {
+    const { type } = props;
     return (
-        <StyledAlert>{props.children}</StyledAlert>
+        <StyledAlert type={type}>{props.children}</StyledAlert>
     );
 }
 
diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js
index 117843d9..0032768c 100644
--- a/src/components/Alert/Alert.styled.js
+++ b/src/components/Alert/Alert.styled.js
@@ -1,7 +1,17 @@
 import styled from 'styled-components';
 
+// const StyledAlert = styled.div`
+//    
+//     background-color: ${props => props.type === 'primary' ? '#c5aeb4' : '#fce2c2'
+//     }
+// `
+
 const StyledAlert = styled.div`
     display: block;
-`
+    padding: 16px;
+    border-radius: 4px;
+    margin: 10px 0;
+    background-color: ${props => props.theme?.colors?.[props.type]};
+`;
 
 export { StyledAlert };
\ No newline at end of file

From 3f10c0a67d1fc311decd5a287026863b4a55b7de Mon Sep 17 00:00:00 2001
From: Michal Wasiak <michal.wasiak@hotmail.com>
Date: Thu, 19 Mar 2026 14:59:14 +1000
Subject: [PATCH 2/7] Task 01 done

---
 01/Task01.js                         | 23 ++++++++++++++++++-----
 src/components/Alert/Alert.styled.js |  9 ++++++---
 src/components/Button/index.js       |  4 ++++
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/01/Task01.js b/01/Task01.js
index f3fd1e71..e26e0799 100644
--- a/01/Task01.js
+++ b/01/Task01.js
@@ -6,10 +6,16 @@ import { ThemeProvider } from 'styled-components';
 
 const theme = {
     colors: {
-        primary: 'green',
-        secondary: 'blue',
-    }
-}
+        primary: {
+            background: '#d1ecf1',
+            color: '#0c5460',
+        },
+        secondary: {
+            background: '#f8d7da',
+            color: '#721c24',
+        },
+    },
+};
 
 const Task01 = () => {
 
@@ -21,12 +27,19 @@ const Task01 = () => {
                     <RBAlert variant="primary">
                         Uwaga! <em>Styled Components</em> nadchodzi!
                     </RBAlert>
+                    {/* <RBAlert variant="secondary">
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </RBAlert> */}
                 </Col>
                 <Col>
-                    <Alert type='secondary'>
+                    <Alert type='primary'>
                         Uwaga! <em>Styled Components</em> nadchodzi!
                     </Alert>
+                    {/* <Alert type='secondary'>
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </Alert> */}
                 </Col>
+
             </Row>
         </ThemeProvider>
     )
diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js
index 0032768c..c9d820bf 100644
--- a/src/components/Alert/Alert.styled.js
+++ b/src/components/Alert/Alert.styled.js
@@ -8,10 +8,13 @@ import styled from 'styled-components';
 
 const StyledAlert = styled.div`
     display: block;
-    padding: 16px;
+    padding: 12px;
+    /* margin: 10px 0; */
     border-radius: 4px;
-    margin: 10px 0;
-    background-color: ${props => props.theme?.colors?.[props.type]};
+        background-color: ${({ theme, type }) =>
+        theme?.colors?.[type]?.background};
+            color: ${({ theme, type }) =>
+        theme?.colors?.[type]?.color};
 `;
 
 export { StyledAlert };
\ No newline at end of file
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index e69de29b..a80a61cb 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -0,0 +1,4 @@
+import Button from './Button';
+
+
+export default Button;
\ No newline at end of file

From f667f4f6a8d4aebfde59a9eda58fc13666d8de7b Mon Sep 17 00:00:00 2001
From: Michal Wasiak <michal.wasiak@hotmail.com>
Date: Thu, 19 Mar 2026 16:45:16 +1000
Subject: [PATCH 3/7] Task 02 done

---
 02/Task02.js                           | 35 +++++++++++--
 src/components/Button/Button.js        | 12 +++++
 src/components/Button/Button.styled.js | 68 ++++++++++++++++++++++++++
 3 files changed, 112 insertions(+), 3 deletions(-)

diff --git a/02/Task02.js b/02/Task02.js
index 0894136e..9e86a374 100644
--- a/02/Task02.js
+++ b/02/Task02.js
@@ -1,19 +1,48 @@
 import React from 'react';
 
 import Button from './../src/components/Button';
+import { ThemeProvider } from 'styled-components';
 import { Row, Col, Button as RBButton } from 'react-bootstrap';
 
+const theme = {
+    buttons: {
+        primary: {
+            background: 'blue',
+            color: 'white',
+        },
+        secondary: {
+            background: 'green',
+            color: 'white',
+        },
+    },
+};
+
+
 const Task02 = () => {
-    return (
+    return (<>
         <Row>
             <Col>
                 <RBButton variant="primary" size="lg">Button!</RBButton>
             </Col>
             <Col>
-                Button!
+                <ThemeProvider theme={theme}>
+
+                    <Button variant="primary">Primary</Button>
+                    {/* 
+                    <Button variant="secondary">Secondary</Button>
+
+                    <Button size="sm">Small</Button>
+
+                    <Button size="lg">Large</Button>
+
+                    <Button active>Active</Button>
+
+                    <Button disabled>Disabled</Button> */}
+                </ThemeProvider>
             </Col>
         </Row>
-)
+    </>
+    )
 }
 
 export default Task02;
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index e69de29b..0924429e 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { StyledButton } from './Button.styled';
+
+const Button = props => {
+    const { variant = 'primary', size = 'md', active = false, disabled = false } = props;
+    return (
+        <StyledButton variant={variant} size={size} active={active} disabled={disabled}>{props.children}</StyledButton>
+    );
+}
+
+export default Button;
\ No newline at end of file
diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js
index e69de29b..cbc160c0 100644
--- a/src/components/Button/Button.styled.js
+++ b/src/components/Button/Button.styled.js
@@ -0,0 +1,68 @@
+import styled, { css } from 'styled-components';
+
+const defaultVariants = {
+    primary: {
+        background: '#007bff',
+        color: '#fff',
+    },
+    secondary: {
+        background: '#6c757d',
+        color: '#fff',
+    },
+};
+
+const defaultSize = {
+    sm: {
+        padding: '4px 10px',
+        fontSize: '12px',
+    },
+    md: {
+        padding: '8px 16px',
+        fontSize: '14px',
+    },
+    lg: {
+        padding: '12px 20px',
+        fontSize: '16px',
+    }
+}
+
+const getVariant = ({ theme, variant }) =>
+    theme?.buttons?.[variant];
+
+const getSize = ({ size }) =>
+    defaultSize[size] || defaultSize.md;
+
+const StyledButton = styled.div`
+display: flex;
+justify-content: center;
+width: 100px;
+border: none;
+border-radius: 4px;
+cursor: pointer;
+background-color:${({ theme, variant }) =>
+        getVariant({ theme, variant }).background};
+    color:${({ theme, variant }) =>
+        getVariant({ theme, variant }).color};        
+    ${({ size }) => {
+        const s = getSize(({ size }));
+        return css`
+    padding: ${s.padding};
+    font-size: ${s.fontSize};
+    `;
+    }}
+
+    ${({ active }) =>
+        active &&
+        css`
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+        `}
+
+    ${({ disabled }) =>
+        disabled &&
+        css`
+            opacity: 0.6;
+            cursor: not-allowed;
+        `}
+`;
+
+export { StyledButton };
\ No newline at end of file

From 5b22923440ff590ab70e7a8d4c3b1e2f37710b88 Mon Sep 17 00:00:00 2001
From: Michal Wasiak <michal.wasiak@hotmail.com>
Date: Thu, 19 Mar 2026 20:37:43 +1000
Subject: [PATCH 4/7] Task 02 done

---
 02/Task02.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/02/Task02.js b/02/Task02.js
index 9e86a374..b6834b76 100644
--- a/02/Task02.js
+++ b/02/Task02.js
@@ -7,7 +7,7 @@ import { Row, Col, Button as RBButton } from 'react-bootstrap';
 const theme = {
     buttons: {
         primary: {
-            background: 'blue',
+            background: '#007bff',
             color: 'white',
         },
         secondary: {
@@ -28,16 +28,16 @@ const Task02 = () => {
                 <ThemeProvider theme={theme}>
 
                     <Button variant="primary">Primary</Button>
-                    {/* 
-                    <Button variant="secondary">Secondary</Button>
 
-                    <Button size="sm">Small</Button>
+                    {/* <Button variant="secondary">Secondary</Button> */}
 
-                    <Button size="lg">Large</Button>
+                    {/* <Button size="sm">Small</Button> */}
 
-                    <Button active>Active</Button>
+                    {/* <Button size="lg">Large</Button> */}
 
-                    <Button disabled>Disabled</Button> */}
+                    {/* <Button active>Active</Button> */}
+
+                    {/* <Button disabled>Disabled</Button> */}
                 </ThemeProvider>
             </Col>
         </Row>

From a54c25da62f41c40ef012068aae212d1c1a88a07 Mon Sep 17 00:00:00 2001
From: Michal Wasiak <michal.wasiak@hotmail.com>
Date: Fri, 20 Mar 2026 15:05:46 +1000
Subject: [PATCH 5/7] Task 03 done

---
 03/Task03.js                                  | 11 ++++-
 .../Breadcrumb/Breadcrumb.Styled.js           | 49 +++++++++++++++++++
 src/components/Breadcrumb/Breadcrumb.js       | 15 ++++++
 src/components/Breadcrumb/BreadcrumbItem.js   | 12 +++++
 src/components/Breadcrumb/index.js            |  1 +
 5 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Breadcrumb/Breadcrumb.Styled.js
 create mode 100644 src/components/Breadcrumb/Breadcrumb.js
 create mode 100644 src/components/Breadcrumb/BreadcrumbItem.js
 create mode 100644 src/components/Breadcrumb/index.js

diff --git a/03/Task03.js b/03/Task03.js
index 6c884d18..bedf5f3c 100644
--- a/03/Task03.js
+++ b/03/Task03.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap';
+import Breadcrumb from './../src/components/Breadcrumb';
 
 const Task03 = () => {
     return (
@@ -15,10 +16,16 @@ const Task03 = () => {
                 </RBBreadcrumb>
             </Col>
             <Col>
-                Breadcrumb!
+                <Breadcrumb>
+                    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+                    <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/">
+                        Library
+                    </Breadcrumb.Item>
+                    <Breadcrumb.Item active>Data</Breadcrumb.Item>
+                </Breadcrumb>
             </Col>
         </Row>
-)
+    )
 }
 
 export default Task03;
diff --git a/src/components/Breadcrumb/Breadcrumb.Styled.js b/src/components/Breadcrumb/Breadcrumb.Styled.js
new file mode 100644
index 00000000..835c1e82
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.Styled.js
@@ -0,0 +1,49 @@
+import styled, { css } from "styled-components";
+
+export const Nav = styled.nav`
+background-color: #e9ecef;    
+width: 100%; 
+border-radius: 4px;
+`;
+
+export const List = styled.ol`
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding:12px;
+   
+`;
+
+export const Item = styled.li`
+    display: flex;
+    /* background-color: #fff; */
+    align-items: center;
+    font-size: 16px;
+    color: ${({ $active }) => ($active ? "#6c757d" : "#007bff")};
+
+    &:not(:first-child)::before {
+        content: "/";
+        margin: 0 8px;
+        color: #999;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    ${({ $active }) =>
+        $active &&
+        css`
+            font-weight: 600;
+
+            a {
+                pointer-events: none;
+            }
+        `}
+`;
\ No newline at end of file
diff --git a/src/components/Breadcrumb/Breadcrumb.js b/src/components/Breadcrumb/Breadcrumb.js
new file mode 100644
index 00000000..38209026
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.js
@@ -0,0 +1,15 @@
+import React from "react";
+import BreadcrumbItem from "./BreadcrumbItem";
+import { Nav, List } from "./Breadcrumb.styled";
+
+const Breadcrumb = ({ children }) => {
+    return (
+        <Nav>
+            <List>{children}</List>
+        </Nav>
+    );
+};
+
+Breadcrumb.Item = BreadcrumbItem;
+
+export default Breadcrumb;
\ No newline at end of file
diff --git a/src/components/Breadcrumb/BreadcrumbItem.js b/src/components/Breadcrumb/BreadcrumbItem.js
new file mode 100644
index 00000000..aced82a6
--- /dev/null
+++ b/src/components/Breadcrumb/BreadcrumbItem.js
@@ -0,0 +1,12 @@
+import React from "react";
+import { Item } from "./Breadcrumb.styled";
+
+const BreadcrumbItem = ({ children, href, active }) => {
+    return (
+        <Item $active={active}>
+            {active ? children : <a href={href}>{children}</a>}
+        </Item>
+    );
+};
+
+export default BreadcrumbItem;
\ No newline at end of file
diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js
new file mode 100644
index 00000000..603c8d27
--- /dev/null
+++ b/src/components/Breadcrumb/index.js
@@ -0,0 +1 @@
+export { default } from "./Breadcrumb";
\ No newline at end of file

From dbeae86f3625443d2a54bd169943fc586005c37f Mon Sep 17 00:00:00 2001
From: Michal Wasiak <michal.wasiak@hotmail.com>
Date: Fri, 20 Mar 2026 15:44:42 +1000
Subject: [PATCH 6/7] Task 04 done

---
 04/Task04.js                       | 20 ++++++++++++++++--
 src/components/Tabs/Tab.js         |  7 ++++++
 src/components/Tabs/Tabs.js        | 34 ++++++++++++++++++++++++++++++
 src/components/Tabs/Tabs.styled.js | 34 ++++++++++++++++++++++++++++++
 src/components/Tabs/index.js       |  4 ++++
 5 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Tabs/Tab.js
 create mode 100644 src/components/Tabs/Tabs.js
 create mode 100644 src/components/Tabs/Tabs.styled.js
 create mode 100644 src/components/Tabs/index.js

diff --git a/04/Task04.js b/04/Task04.js
index 8a8e5b21..fe519cf1 100644
--- a/04/Task04.js
+++ b/04/Task04.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap';
+import { Row, Col, Tabs as RBTabs, Tab as RBTab, Form, } from 'react-bootstrap';
+import { Tab, Tabs } from '../src/components/Tabs'
 
 const Task04 = () => {
     return (
@@ -19,7 +20,22 @@ const Task04 = () => {
                 </RBTabs>
             </Col>
             <Col>
-                Tabs!
+                <Tabs>
+                    <Tab title="Home">
+                        <h3>Home</h3>
+                        <p>This is home content.</p>
+                    </Tab>
+
+                    <Tab title="Profile">
+                        <h3>Profile</h3>
+                        <p>This is profile content.</p>
+                    </Tab>
+
+                    <Tab title="Contact">
+                        <h3>Contact</h3>
+                        <p>This is contact content.</p>
+                    </Tab>
+                </Tabs>
             </Col>
         </Row>
     )
diff --git a/src/components/Tabs/Tab.js b/src/components/Tabs/Tab.js
new file mode 100644
index 00000000..ccba66ba
--- /dev/null
+++ b/src/components/Tabs/Tab.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Tab = ({ children }) => {
+    return children;
+}
+
+export default Tab;
\ No newline at end of file
diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js
new file mode 100644
index 00000000..7549cc8d
--- /dev/null
+++ b/src/components/Tabs/Tabs.js
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import {
+    TabsWrapper,
+    TabsHeader,
+    TabButton,
+    TabContent,
+} from './Tabs.styled';
+
+const Tabs = ({ children }) => {
+    const tabsArray = React.Children.toArray(children);
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    return (
+        <TabsWrapper>
+            <TabsHeader>
+                {tabsArray.map((child, index) => (
+                    <TabButton
+                        key={index}
+                        active={index === activeIndex}
+                        onClick={() => setActiveIndex(index)}
+                    >
+                        {child.props.title}
+                    </TabButton>
+                ))}
+            </TabsHeader>
+
+            <TabContent>
+                {tabsArray[activeIndex]}
+            </TabContent>
+        </TabsWrapper>
+    );
+};
+
+export default Tabs;
\ No newline at end of file
diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js
new file mode 100644
index 00000000..c8b23d43
--- /dev/null
+++ b/src/components/Tabs/Tabs.styled.js
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+export const TabsWrapper = styled.div`
+    width: 100%;
+`;
+
+export const TabsHeader = styled.div`
+    display: flex;
+    gap: 8px;
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 16px;
+`;
+
+export const TabButton = styled.button`
+    padding: 10px 16px;
+    border: none;
+    border-bottom: 2px solid
+        ${({ active }) => (active ? '#007bff' : 'transparent')};
+    background-color: transparent;
+    color: ${({ active }) => (active ? '#007bff' : '#333')};
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover {
+        color: #007bff;
+    }
+`;
+
+export const TabContent = styled.div`
+    padding: 16px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: #fff;
+`;
\ No newline at end of file
diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js
new file mode 100644
index 00000000..96845cc9
--- /dev/null
+++ b/src/components/Tabs/index.js
@@ -0,0 +1,4 @@
+import Tabs from './Tabs';
+import Tab from './Tab';
+
+export { Tabs, Tab };
\ No newline at end of file

From a2da509ee857d67d5e7830da5cfbcb5eb58ef6ce Mon Sep 17 00:00:00 2001
From: Michal Wasiak <michal.wasiak@hotmail.com>
Date: Sun, 22 Mar 2026 20:30:47 +1000
Subject: [PATCH 7/7] Task 05 done

---
 05/Task05.js                           | 16 +++++++--
 src/components/Alert/Alert.styled.js   |  6 ----
 src/components/Button/Button.styled.js | 16 +++++----
 src/components/Card/Card.js            | 12 +++++++
 src/components/Card/Card.styled.js     | 45 ++++++++++++++++++++++++++
 src/components/Card/CardBody.js        | 10 ++++++
 src/components/Card/CardImg.js         | 10 ++++++
 src/components/Card/CardText.js        | 10 ++++++
 src/components/Card/CardTitle.js       | 11 +++++++
 src/components/Card/index.js           | 12 +++++++
 10 files changed, 134 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Card/Card.js
 create mode 100644 src/components/Card/Card.styled.js
 create mode 100644 src/components/Card/CardBody.js
 create mode 100644 src/components/Card/CardImg.js
 create mode 100644 src/components/Card/CardText.js
 create mode 100644 src/components/Card/CardTitle.js
 create mode 100644 src/components/Card/index.js

diff --git a/05/Task05.js b/05/Task05.js
index 6cebfeda..af7133b4 100644
--- a/05/Task05.js
+++ b/05/Task05.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import Card from '../src/components/Card';
+import Button from './../src/components/Button';
 
 import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap';
 
@@ -19,11 +21,21 @@ const Task05 = () => {
                 </RBCard>
             </Col>
             <Col>
-                Card!
+                <Card>
+                    <Card.Img src="https://picsum.photos/100/80" />
+                    <Card.Body>
+                        <Card.Title>Card Title</Card.Title>
+                        <Card.Text>
+                            Some quick example text to build on the card title and make up the bulk of
+                            the card's content.
+                        </Card.Text>
+
+                        <Button>Go somewhere</Button>
+                    </Card.Body>
+                </Card>
             </Col>
         </Row>
     )
 }
 
 export default Task05;
-
diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js
index c9d820bf..9d18a140 100644
--- a/src/components/Alert/Alert.styled.js
+++ b/src/components/Alert/Alert.styled.js
@@ -1,11 +1,5 @@
 import styled from 'styled-components';
 
-// const StyledAlert = styled.div`
-//    
-//     background-color: ${props => props.type === 'primary' ? '#c5aeb4' : '#fce2c2'
-//     }
-// `
-
 const StyledAlert = styled.div`
     display: block;
     padding: 12px;
diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js
index cbc160c0..4cb8568b 100644
--- a/src/components/Button/Button.styled.js
+++ b/src/components/Button/Button.styled.js
@@ -27,15 +27,14 @@ const defaultSize = {
 }
 
 const getVariant = ({ theme, variant }) =>
-    theme?.buttons?.[variant];
+    theme?.buttons?.[variant] || defaultVariants[variant] || defaultVariants.primary;
 
 const getSize = ({ size }) =>
     defaultSize[size] || defaultSize.md;
 
-const StyledButton = styled.div`
-display: flex;
-justify-content: center;
-width: 100px;
+const StyledButton = styled.button`
+display: inline-block;
+text-align: center;
 border: none;
 border-radius: 4px;
 cursor: pointer;
@@ -44,10 +43,15 @@ background-color:${({ theme, variant }) =>
     color:${({ theme, variant }) =>
         getVariant({ theme, variant }).color};        
     ${({ size }) => {
-        const s = getSize(({ size }));
+        const s = getSize({ size });
         return css`
     padding: ${s.padding};
     font-size: ${s.fontSize};
+    transition: 0.2s ease;
+    
+    &:hover {
+  opacity: 0.9;
+}
     `;
     }}
 
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
new file mode 100644
index 00000000..92514dde
--- /dev/null
+++ b/src/components/Card/Card.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+import { WrapperCard } from "./Card.styled";
+
+const Card = ({ children }) => {
+    return (
+        <WrapperCard>{children}</WrapperCard>
+    );
+};
+
+
+export default Card;
diff --git a/src/components/Card/Card.styled.js b/src/components/Card/Card.styled.js
new file mode 100644
index 00000000..f2c1043d
--- /dev/null
+++ b/src/components/Card/Card.styled.js
@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+export const WrapperCard = styled.div`
+    margin-top: 20px;
+    max-width: 320px;
+    width: 100%;
+    background: white;
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+
+`
+
+export const WrapperBody = styled.div`
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-start;
+
+`
+
+export const Title = styled.h4`
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+`
+
+export const Text = styled.p`
+  margin: 0;
+  font-size: 14px;
+  color: #555;
+  line-height: 1.5;
+
+`
+
+export const Image = styled.img`
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  display: block;
+
+`
+
+// export { WrapperBody, WrapperCard, Title, Text, Image };
\ No newline at end of file
diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js
new file mode 100644
index 00000000..f2a59f7a
--- /dev/null
+++ b/src/components/Card/CardBody.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { WrapperBody } from "./Card.styled";
+
+const CardBody = ({ children }) => {
+    return (
+        <WrapperBody>{children}</WrapperBody>
+    )
+}
+
+export default CardBody;
\ No newline at end of file
diff --git a/src/components/Card/CardImg.js b/src/components/Card/CardImg.js
new file mode 100644
index 00000000..61ade585
--- /dev/null
+++ b/src/components/Card/CardImg.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { Image } from "./Card.styled";
+
+const CardImg = ({ src, alt }) => {
+    return (
+        <Image src={src} alt={alt} />
+    )
+}
+
+export default CardImg;
\ No newline at end of file
diff --git a/src/components/Card/CardText.js b/src/components/Card/CardText.js
new file mode 100644
index 00000000..38b55dc8
--- /dev/null
+++ b/src/components/Card/CardText.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { Text } from "./Card.styled";
+
+const CardText = ({ children }) => {
+    return (
+        <Text>{children}</Text>
+    )
+}
+
+export default CardText;
\ No newline at end of file
diff --git a/src/components/Card/CardTitle.js b/src/components/Card/CardTitle.js
new file mode 100644
index 00000000..a4f51fb4
--- /dev/null
+++ b/src/components/Card/CardTitle.js
@@ -0,0 +1,11 @@
+import React from "react";
+import {Title} from './Card.styled'
+
+const CardTitle = ({ children }) => {
+    return (
+        <Title>{children}</Title>
+    )
+
+}
+
+export default CardTitle;
\ No newline at end of file
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
new file mode 100644
index 00000000..f81cdb55
--- /dev/null
+++ b/src/components/Card/index.js
@@ -0,0 +1,12 @@
+import Card from "./Card";
+import CardBody from './CardBody'
+import CardTitle from "./CardTitle";
+import CardText from "./CardText";
+import CardImg from "./CardImg";
+
+Card.Body = CardBody;
+Card.Title = CardTitle;
+Card.Text = CardText;
+Card.Img = CardImg;
+
+export default Card;