diff --git a/dist/logob.webp b/dist/logob.webp
new file mode 100644
index 0000000..7be49b6
Binary files /dev/null and b/dist/logob.webp differ
diff --git a/public/logob.webp b/public/logob.webp
new file mode 100644
index 0000000..7be49b6
Binary files /dev/null and b/public/logob.webp differ
diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
new file mode 100644
index 0000000..f4d38a3
--- /dev/null
+++ b/src/components/AppHeader.jsx
@@ -0,0 +1,90 @@
+"use client";
+
+import React from "react";
+import { Box, HStack, Image, Text, VStack } from "@chakra-ui/react";
+
+function AppHeaderRoot({ children, ...props }) {
+  return (
+    <Box
+      as="header"
+      w="100%"
+      h="92px"
+      borderBottom="1px solid"
+      borderColor="gray.200"
+      bg="#fdfbff"
+      px="20px"
+      zIndex={10}
+      position="fixed"
+      top={0}
+      {...props}
+    >
+      <HStack h="100%" alignItems="center" justifyContent="space-between">
+        {children}
+      </HStack>
+    </Box>
+  );
+}
+
+function BrandSection({ children, ...props }) {
+  return (
+    <HStack alignItems="end" h="100%" py="10px" {...props}>
+      {children}
+    </HStack>
+  );
+}
+
+function Logo(props) {
+  return <Image loading="lazy" {...props} />;
+}
+
+function Brand({ children, ...props }) {
+  return (
+    <VStack
+      alignItems="start"
+      justifyContent="end"
+      h="100%"
+      spacing={0}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+}
+
+function Title({ children, ...props }) {
+  return (
+    <Text fontWeight="bold" fontSize="20px" {...props}>
+      {children}
+    </Text>
+  );
+}
+
+function Description({ children, ...props }) {
+  return <Text {...props}>{children}</Text>;
+}
+
+function Bi({ logoSrc = "/logob.png", ...props }) {
+  return (
+    <VStack
+      w="fit-content"
+      alignItems="center"
+      justifyContent="center"
+      py="10px"
+      {...props}
+    >
+      <Image src={logoSrc} loading="lazy" />
+      <Text fontSize="xs" fontWeight="bold" textAlign="center">
+        موسسه تولید سیستم های خبره و هوشمند اسلامی باقرالعلوم(ع)
+      </Text>
+    </VStack>
+  );
+}
+
+export const AppHeader = Object.assign(AppHeaderRoot, {
+  BrandSection,
+  Logo,
+  Brand,
+  Title,
+  Description,
+  Bi,
+});