diff --git a/src/assets/logo-collapsed.png b/src/assets/logo-collapsed.png
new file mode 100644
index 0000000..23b251f
Binary files /dev/null and b/src/assets/logo-collapsed.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..911ec37
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/components/Layout/Logo.jsx b/src/components/Layout/Logo.jsx
index 510b329..0762fc9 100644
--- a/src/components/Layout/Logo.jsx
+++ b/src/components/Layout/Logo.jsx
@@ -1,18 +1,24 @@
-import React from 'react';
-import { RocketOutlined } from '@ant-design/icons';
-import { Typography } from 'antd';
+import React from "react";
 
-const { Text } = Typography;
+import logo from "@/assets/logo.png";
+import logoCollapsed from "@/assets/logo-collapsed.png";
 
 export const Logo = ({ collapsed, isDarkMode }) => (
   <div className="logo">
     <div className="flex items-center justify-center gap-2">
-      <RocketOutlined className="text-2xl text-primary-500" />
-      {!collapsed && (
-        <Text className="text-lg font-semibold m-0" style={{ color: 'var(--primary-color)' }}>
-          Uppeta
-        </Text>
+      {collapsed ? (
+        <div className="flex items-center justify-center">
+          <img
+            src={logoCollapsed}
+            alt="logo"
+            className="w-1/2 object-contain"
+          />
+        </div>
+      ) : (
+        <div className="flex items-center justify-center">
+          <img src={logo} alt="logo" className="w-1/2 object-contain mr-2" />
+        </div>
       )}
     </div>
   </div>
-);
\ No newline at end of file
+);