diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..9cf45ca
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,33 @@
+import {Copyright} from "lucide-react";
+import Link from "next/link";
+
+
+export function Footer() {
+
+
+	return (
+		<footer className={"flex flex-col-reverse md:flex-row justify-between gap-2 md:gap-1 items-center p-2 border-t-2 w-full"}>
+			<div className={"flex flex-row gap-1 items-center justify-center md:justify-start md:w-1/3 opacity-50"}>
+				<Copyright className={"w-4"}/>
+				<h4 className={"pr-2"}>Yidhra Studio</h4>
+				<p>All right reserved <em>2024</em></p>
+			</div>
+			<div className={"flex flex-col flex-wrap md:flex-row max-h-24 md:flex-nowrap gap-1 md:gap-2 items-center justify-evenly w-full md:w-1/3"}>
+				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+					<h3 className={"text-nowrap text-center"}>Data privacy</h3>
+				</Link>
+				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+					<h3 className={"text-nowrap text-center"}>Terms and conditions</h3>
+				</Link>
+				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+					<h3 className={"text-nowrap text-center"}>Legal notice</h3>
+				</Link>
+				<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
+					<h3 className={"text-nowrap text-center"}>Support Center</h3>
+				</Link>
+			</div>
+			<div className={"flex flex-row gap-1 items-center justify-center md:justify-end md:w-1/3"}>
+			</div>
+		</footer>
+	)
+}
\ No newline at end of file
diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..6662c8c
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,24 @@
+import Image from "next/image";
+import React from "react";
+import {ThemeBtnSelector} from "@/components/theme-btn-selector";
+
+
+export function Header({title, children}: {title?: string, children?: React.ReactNode}) {
+
+
+
+	return (
+		<header className={"flex flex-col md:flex-row justify-between items-center w-full p-1 md:px-3 md:py-2 border-b-2"}>
+			<div className={"flex flex-row justify-center md:justify-start items-center gap-2 md:w-1/3"}>
+				<Image src={'yellow-bit.svg'} alt={'Logo of YeloBit'} width={42} height={42}/>
+				<h1 className={"font-bold text-xl align-middle text-center text-wrap"}>{title || 'YeloBit'}</h1>
+			</div>
+			<div className={"w-1/3 flex flex-row justify-center items-center"}>
+				{children}
+			</div>
+			<div className={"w-1/3 flex flex-row justify-end items-center"}>
+				<ThemeBtnSelector/>
+			</div>
+		</header>
+	)
+}
\ No newline at end of file