diff --git a/react-academy/src/Components/BreadCrumb/index.tsx b/react-academy/src/Components/BreadCrumb/index.tsx
new file mode 100644
index 0000000..378146d
--- /dev/null
+++ b/react-academy/src/Components/BreadCrumb/index.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import home from "./BreadImages/home.png";
+import arrow from "./BreadImages/arrow.png";
+
+import "./style.css";
+
+const BreadCrumb = () => {
+ return (
+
+ );
+};
+
+export default BreadCrumb;
diff --git a/react-academy/src/Components/BreadCrumb/style.css b/react-academy/src/Components/BreadCrumb/style.css
new file mode 100644
index 0000000..448689b
--- /dev/null
+++ b/react-academy/src/Components/BreadCrumb/style.css
@@ -0,0 +1,33 @@
+.BreadCrumb {
+ display: flex;
+ align-items: center;
+ margin: 29px 0px 80px 100px;
+ gap: 8px;
+}
+
+.BreadCrump-image1 {
+ display: block;
+ width: 16px;
+ height: 16px;
+}
+
+.BreadCrump-image2 {
+ display: block;
+ width: 8px;
+ height: 8px;
+}
+
+.BreadCrumb-text {
+ font-family: "Roboto", sans-serif;
+ font-size: 12px;
+ line-height: 14px;
+ font-weight: 400;
+ text-decoration: none;
+ color: var(--color-gray-200);
+}
+
+@media screen and (max-width: 1024px) {
+ .BreadCrumb {
+ margin-left: 16px;
+ }
+}