diff --git a/frontend/common/src/assets/logo-black-transparent.png b/frontend/common/src/assets/logo-black-transparent.png
new file mode 100644
index 0000000..e9a8828
Binary files /dev/null and b/frontend/common/src/assets/logo-black-transparent.png differ
diff --git a/frontend/common/src/assets/logo-white-transparent.gif b/frontend/common/src/assets/logo-white-transparent.gif
new file mode 100644
index 0000000..cfd1b06
Binary files /dev/null and b/frontend/common/src/assets/logo-white-transparent.gif differ
diff --git a/frontend/common/src/components/DefaultAgentScreen.tsx b/frontend/common/src/components/DefaultAgentScreen.tsx
index 2f1ece7..2057599 100644
--- a/frontend/common/src/components/DefaultAgentScreen.tsx
+++ b/frontend/common/src/components/DefaultAgentScreen.tsx
@@ -9,6 +9,8 @@ import { SessionDrawer } from './SessionDrawer';
 import { SessionList } from './SessionList';
 import { TimelineFeed } from './TimelineFeed';
 import { getSampleAgentSessions, getSampleAgentSteps } from '../utils/sample-data';
+import logoBlack from '../assets/logo-black-transparent.png';
+import logoWhite from '../assets/logo-white-transparent.gif';
 
 /**
  * DefaultAgentScreen component
@@ -90,9 +92,12 @@ export const DefaultAgentScreen: React.FC = () => {
   const headerContent = (
     <div className="w-full flex items-center justify-between h-full px-4">
       <div className="flex-initial">
-        <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 inline-block text-transparent bg-clip-text">
-          RA.Aid
-        </h1>
+        {/* Use the appropriate logo based on theme */}
+        <img 
+          src={isDarkTheme ? logoWhite : logoBlack} 
+          alt="RA.Aid Logo" 
+          className="h-8"
+        />
       </div>
       
       <div className="flex-initial ml-auto">
diff --git a/frontend/common/src/types/image.d.ts b/frontend/common/src/types/image.d.ts
new file mode 100644
index 0000000..611435e
--- /dev/null
+++ b/frontend/common/src/types/image.d.ts
@@ -0,0 +1,24 @@
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}