diff --git a/01/Task01.js b/01/Task01.js
index c12ef98b..e26e0799 100644
--- a/01/Task01.js
+++ b/01/Task01.js
@@ -2,17 +2,46 @@ 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: {
+            background: '#d1ecf1',
+            color: '#0c5460',
+        },
+        secondary: {
+            background: '#f8d7da',
+            color: '#721c24',
+        },
+    },
+};
 
 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>
+                    {/* <RBAlert variant="secondary">
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </RBAlert> */}
+                </Col>
+                <Col>
+                    <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/02/Task02.js b/02/Task02.js
index 0894136e..b6834b76 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: '#007bff',
+            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/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/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/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.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..9d18a140 100644
--- a/src/components/Alert/Alert.styled.js
+++ b/src/components/Alert/Alert.styled.js
@@ -2,6 +2,13 @@ import styled from 'styled-components';
 
 const StyledAlert = styled.div`
     display: block;
-`
+    padding: 12px;
+    /* margin: 10px 0; */
+    border-radius: 4px;
+        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/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
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..4cb8568b 100644
--- a/src/components/Button/Button.styled.js
+++ b/src/components/Button/Button.styled.js
@@ -0,0 +1,72 @@
+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] || defaultVariants[variant] || defaultVariants.primary;
+
+const getSize = ({ size }) =>
+    defaultSize[size] || defaultSize.md;
+
+const StyledButton = styled.button`
+display: inline-block;
+text-align: center;
+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};
+    transition: 0.2s ease;
+    
+    &:hover {
+  opacity: 0.9;
+}
+    `;
+    }}
+
+    ${({ 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
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
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;
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