diff --git a/components/Logo.tsx b/components/Logo.tsx
new file mode 100644
index 0000000..b7c73c6
--- /dev/null
+++ b/components/Logo.tsx
@@ -0,0 +1,23 @@
+"use client";
+import Link from "next/link";
+import React from "react";
+import { AlertTriangle, Camera } from "lucide-react";
+
+export const Logo = () => {
+  return (
+    <Link
+      href="/"
+      className="font-normal flex space-x-2 items-center text-sm mr-4 text-black px-2 py-1 relative z-20"
+    >
+      <div className="flex items-center gap-1">
+        <AlertTriangle className="h-5 w-5 text-red-600" />
+        <Camera className="h-5 w-5 text-black" />
+      </div>
+      <span className="font-bold text-xl tracking-tight text-black">Accident</span>
+      <div className="hidden md:flex flex-col text-[10px] leading-tight ml-2 border-l pl-2 border-neutral-200">
+        <span className="font-semibold text-red-600">Save lives.</span>
+        <span dir="rtl" className="font-semibold text-red-600">أنقذ الأرواح</span>
+      </div>
+    </Link>
+  );
+};