diff --git a/src/assets/css/components/Logo.scss b/src/assets/css/components/Logo.scss
new file mode 100644
index 0000000..8e78be7
--- /dev/null
+++ b/src/assets/css/components/Logo.scss
@@ -0,0 +1,17 @@
+.logo {
+	@apply absolute top-0 left-0 z-10  bg-no-repeat  w-auto h-auto;
+	background-size: 100% 100%;
+	background-position: left;
+	translate: -2px -3px;
+
+	isolation: isolate;
+	img {
+		@apply w-24 h-auto py-6 px-12 z-10;
+	}
+	&:after {
+		@apply absolute block top-0 left-0 w-full h-full bg-white;
+		content: "";
+		transform: skew(-2deg) rotate(-2deg);
+		z-index: -1;
+	}
+}
diff --git a/src/components/ui/Logo.jsx b/src/components/ui/Logo.jsx
new file mode 100644
index 0000000..34cc14d
--- /dev/null
+++ b/src/components/ui/Logo.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import appLogo from "../../assets/img/app_logo.svg";
+import appLogoBackground from "../../assets/img/app_logo_background3.png";
+export default function Logo() {
+	return (
+		<div className='logo'>
+			<img src={appLogo} alt='' />
+		</div>
+	);
+}