diff --git a/public/puffinOffset.webp b/public/puffinOffset.webp
new file mode 100644
index 0000000..516e6c0
Binary files /dev/null and b/public/puffinOffset.webp differ
diff --git a/src/App.tsx b/src/App.tsx
index 9a3a466..0dfe55d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Bird, Menu, X } from 'lucide-react';
+import { Menu, X } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Home } from './components/Home';
 import { YachtSearch } from './components/YachtSearch';
@@ -120,10 +120,14 @@ function App() {
         <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between">
             <div 
-              className="flex items-center space-x-2 cursor-pointer" 
+              className="flex items-center space-x-3 cursor-pointer" 
               onClick={() => handleNavigate('home')}
             >
-              <Bird className="text-blue-600" size={24} />
+              <img 
+                src="/puffinOffset.webp" 
+                alt="Puffin Offset Logo" 
+                className="h-8 w-auto"
+              />
               <h1 className="text-xl font-bold text-gray-900">Puffin Offset</h1>
             </div>
             
diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index 6459f3a..22f2747 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Check, AlertCircle, ArrowLeft, Loader2, Globe2, TreePine, Waves, Factory, Wind, X } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { createOffsetOrder, getPortfolios } from '../api/wrenClient';
 import type { CurrencyCode, OffsetOrder as OffsetOrderType, Portfolio, OffsetProject } from '../types';
 import { currencies, formatCurrency, getCurrencyByCode } from '../utils/currencies';
@@ -487,17 +487,30 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
         </>
       ) : null}
 
-      {/* Simplified Lightbox Modal */}
-      {selectedProject && (
-        <div 
-          className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
-          style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
-          onClick={handleCloseLightbox}
-        >
-          <div
-            className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
+      {/* Animated Lightbox Modal */}
+      <AnimatePresence>
+        {selectedProject && (
+          <motion.div 
+            className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+            style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
+            onClick={handleCloseLightbox}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
           >
+            <motion.div
+              className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+              onClick={(e) => e.stopPropagation()}
+              initial={{ opacity: 0, scale: 0.8, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.8, y: 20 }}
+              transition={{ 
+                duration: 0.4, 
+                ease: [0.22, 1, 0.36, 1],
+                scale: { type: "spring", stiffness: 300, damping: 30 }
+              }}
+            >
             {/* Close Button */}
             <button
               onClick={handleCloseLightbox}
@@ -581,9 +594,10 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
                 </div>
               )}
             </div>
-          </div>
-        </div>
-      )}
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </motion.div>
   );
 }