diff --git a/bun.lock b/bun.lock
index ba88731..f71c8e2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -21,6 +21,7 @@
         "react": "19.2.3",
         "react-dom": "19.2.3",
         "react-map-gl": "^8.1.0",
+        "react-photo-view": "^1.2.7",
         "tailwind-merge": "^3.4.0",
         "tw-animate-css": "^1.4.0",
         "zustand": "^5.0.9",
@@ -922,6 +923,8 @@
 
     "react-map-gl": ["react-map-gl@8.1.0", "", { "dependencies": { "@vis.gl/react-mapbox": "8.1.0", "@vis.gl/react-maplibre": "8.1.0" }, "peerDependencies": { "mapbox-gl": ">=1.13.0", "maplibre-gl": ">=1.13.0", "react": ">=16.3.0", "react-dom": ">=16.3.0" }, "optionalPeers": ["mapbox-gl", "maplibre-gl"] }, "sha512-vDx/QXR3Tb+8/ap/z6gdMjJQ8ZEyaZf6+uMSPz7jhWF5VZeIsKsGfPvwHVPPwGF43Ryn+YR4bd09uEFNR5OPdg=="],
 
+    "react-photo-view": ["react-photo-view@1.2.7", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-MfOWVPxuibncRLaycZUNxqYU8D9IA+rbGDDaq6GM8RIoGJal592hEJoRAyRSI7ZxyyJNJTLMUWWL3UIXHJJOpw=="],
+
     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
diff --git a/components/sidebar/intersection-sidebar.tsx b/components/sidebar/intersection-sidebar.tsx
index 5234d35..a5e8bee 100644
--- a/components/sidebar/intersection-sidebar.tsx
+++ b/components/sidebar/intersection-sidebar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useMapStore } from "@/stores/map-store";
 import { X } from "lucide-react";
@@ -9,6 +10,43 @@ import { PhotoProvider } from "react-photo-view";
 
 export function IntersectionSidebar() {
   const { selectedHotspot, selectHotspot } = useMapStore();
+  const [activeTab, setActiveTab] = useState("overview");
+  const [direction, setDirection] = useState(1);
+
+  // Tab order for directional animations
+  const tabOrder = ["overview", "audit", "reimagine"];
+
+  // Reset to overview tab when hotspot changes
+  useEffect(() => {
+    if (selectedHotspot) {
+      setActiveTab("overview");
+      setDirection(1);
+    }
+  }, [selectedHotspot?.id]);
+
+  // Handle tab change
+  const handleTabChange = (newTab: string) => {
+    const currentIndex = tabOrder.indexOf(activeTab);
+    const newIndex = tabOrder.indexOf(newTab);
+    const newDirection = newIndex > currentIndex ? 1 : -1;
+    setDirection(newDirection);
+    setActiveTab(newTab);
+  };
+
+  const variants = {
+    enter: (direction: number) => ({
+      x: direction > 0 ? 80 : -80,
+      opacity: 0,
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+    },
+    exit: (direction: number) => ({
+      x: direction < 0 ? 80 : -80,
+      opacity: 0,
+    }),
+  };
 
   return (
     <AnimatePresence mode="wait">
@@ -16,12 +54,12 @@ export function IntersectionSidebar() {
         <motion.aside
           key={selectedHotspot.id}
           initial={{ x: "100%", opacity: 0 }}
-          animate={{ 
-            x: 0, 
+          animate={{
+            x: 0,
             opacity: 1
           }}
-          exit={{ 
-            x: "100%", 
+          exit={{
+            x: "100%",
             opacity: 0
           }}
           transition={{
@@ -43,55 +81,114 @@ export function IntersectionSidebar() {
             }}
             className="flex flex-col h-full"
           >
-                <div className="flex items-center justify-between border-b border-zinc-800 p-4">
-                  <div>
-                    <h2 className="text-lg font-semibold text-white">
-                      {selectedHotspot.intersection}
-                    </h2>
-                    <p className="text-sm text-zinc-400">
-                      {selectedHotspot.total_count} collisions recorded
-                    </p>
-                  </div>
-                  <button
-                    onClick={() => selectHotspot(null)}
-                    className="rounded-lg p-2 hover:bg-zinc-800"
-                  >
-                    <X className="h-5 w-5 text-zinc-400" />
-                  </button>
-                </div>
+            <div className="flex items-center justify-between border-b border-zinc-800 p-4">
+              <div>
+                <h2 className="text-lg font-semibold text-white">
+                  {selectedHotspot.intersection}
+                </h2>
+                <p className="text-sm text-zinc-400">
+                  {selectedHotspot.total_count} collisions recorded
+                </p>
+              </div>
+              <button
+                onClick={() => selectHotspot(null)}
+                className="rounded-lg p-2 hover:bg-zinc-800"
+              >
+                <X className="h-5 w-5 text-zinc-400" />
+              </button>
+            </div>
 
-                <div className="flex-1 overflow-y-auto p-4">
-                  <PhotoProvider>
-                    <Tabs defaultValue="overview" className="w-full">
-                      <TabsList className="grid w-full grid-cols-3 bg-zinc-900">
-                        <TabsTrigger value="overview">Overview</TabsTrigger>
-                        <TabsTrigger value="audit">Safety Audit</TabsTrigger>
-                        <TabsTrigger value="reimagine">Re-imagine</TabsTrigger>
-                      </TabsList>
+            <div className="flex-1 overflow-y-auto p-4 scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+              <PhotoProvider>
+                <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
+                  <TabsList className="grid w-full grid-cols-3 bg-zinc-900">
+                    <TabsTrigger
+                      value="overview"
+                      className="transition-all hover:scale-105 active:scale-95"
+                    >
+                      Overview
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="audit"
+                      className="transition-all hover:scale-105 active:scale-95"
+                    >
+                      Safety Audit
+                    </TabsTrigger>
+                    <TabsTrigger
+                      value="reimagine"
+                      className="transition-all hover:scale-105 active:scale-95"
+                    >
+                      Re-imagine
+                    </TabsTrigger>
+                  </TabsList>
 
-                      <TabsContent value="overview" className="mt-4">
-                        <OverviewTab hotspot={selectedHotspot} />
-                      </TabsContent>
+                  <div className="relative mt-4 overflow-hidden">
+                    <AnimatePresence mode="wait" custom={direction}>
+                      {activeTab === "overview" && (
+                        <motion.div
+                          key="overview"
+                          custom={direction}
+                          variants={variants}
+                          initial="enter"
+                          animate="center"
+                          exit="exit"
+                          transition={{
+                            duration: 0.25,
+                            ease: [0.25, 0.1, 0.25, 1],
+                          }}
+                          style={{ willChange: "transform, opacity" }}
+                        >
+                          <OverviewTab hotspot={selectedHotspot} />
+                        </motion.div>
+                      )}
 
-                      <TabsContent value="audit" className="mt-4">
-                        <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
+                      {activeTab === "audit" && (
+                        <motion.div
+                          key="audit"
+                          custom={direction}
+                          variants={variants}
+                          initial="enter"
+                          animate="center"
+                          exit="exit"
+                          transition={{
+                            duration: 0.25,
+                            ease: [0.25, 0.1, 0.25, 1],
+                          }}
+                          className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4"
+                          style={{ willChange: "transform, opacity" }}
+                        >
                           <p className="text-sm text-zinc-400">
                             Generate a safety audit to see AI analysis
                           </p>
-                        </div>
-                      </TabsContent>
+                        </motion.div>
+                      )}
 
-                      <TabsContent value="reimagine" className="mt-4">
-                        <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
+                      {activeTab === "reimagine" && (
+                        <motion.div
+                          key="reimagine"
+                          custom={direction}
+                          variants={variants}
+                          initial="enter"
+                          animate="center"
+                          exit="exit"
+                          transition={{
+                            duration: 0.25,
+                            ease: [0.25, 0.1, 0.25, 1],
+                          }}
+                          className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4"
+                          style={{ willChange: "transform, opacity" }}
+                        >
                           <p className="text-sm text-zinc-400">
                             Re-imagine this intersection with AI
                           </p>
-                        </div>
-                      </TabsContent>
-                    </Tabs>
-                  </PhotoProvider>
-                </div>
-              </motion.div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                </Tabs>
+              </PhotoProvider>
+            </div>
+          </motion.div>
         </motion.aside>
       )}
     </AnimatePresence>
diff --git a/components/sidebar/persona-sidebar.tsx b/components/sidebar/persona-sidebar.tsx
index 4629fca..6db3df4 100644
--- a/components/sidebar/persona-sidebar.tsx
+++ b/components/sidebar/persona-sidebar.tsx
@@ -208,12 +208,12 @@ export function PersonaSidebar() {
         connectionType: "websocket",
         dynamicVariables: selectedHotspot
           ? {
-              intersection_name: selectedHotspot.intersection || selectedHotspot.address,
-              collision_count: selectedHotspot.total_count.toString(),
-              fatal_count: selectedHotspot.fatal_count.toString(),
-              cyclist_count: selectedHotspot.cyclist_count.toString(),
-              pedestrian_count: selectedHotspot.pedestrian_count.toString(),
-            }
+            intersection_name: selectedHotspot.intersection || selectedHotspot.address,
+            collision_count: selectedHotspot.total_count.toString(),
+            fatal_count: selectedHotspot.fatal_count.toString(),
+            cyclist_count: selectedHotspot.cyclist_count.toString(),
+            pedestrian_count: selectedHotspot.pedestrian_count.toString(),
+          }
           : undefined,
       });
     } catch (error) {
@@ -247,7 +247,7 @@ export function PersonaSidebar() {
     <motion.aside
       initial={{ x: 0 }}
       animate={{ x: 0 }}
-      className="fixed left-16 top-0 z-40 h-screen w-80 border-r border-zinc-800 bg-zinc-950 flex flex-col"
+      className="fixed left-16 top-0 z-40 h-screen w-80 border-r border-zinc-800 bg-zinc-950 flex flex-col overflow-hidden"
     >
       <AnimatePresence mode="wait">
         {currentView === "list" ? (
@@ -256,6 +256,10 @@ export function PersonaSidebar() {
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: -20 }}
+            transition={{
+              duration: 0.3,
+              ease: "easeInOut",
+            }}
             className="flex flex-col h-full"
           >
             {/* Header */}
@@ -267,11 +271,18 @@ export function PersonaSidebar() {
             </div>
 
             {/* Agent List */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-3">
-              {PERSONAS.map((persona) => (
+            <div className="flex-1 overflow-y-auto p-4 space-y-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+              {PERSONAS.map((persona, index) => (
                 <motion.button
                   key={persona.id}
                   onClick={() => selectPersona(persona)}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{
+                    duration: 0.3,
+                    delay: index * 0.1,
+                    ease: "easeOut",
+                  }}
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                   className="w-full bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 hover:border-zinc-700 rounded-xl p-4 transition-all text-left group"
@@ -327,17 +338,23 @@ export function PersonaSidebar() {
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             exit={{ opacity: 0, x: 20 }}
+            transition={{
+              duration: 0.3,
+              ease: "easeInOut",
+            }}
             className="flex flex-col h-full"
           >
             {/* Header with Back Button */}
             <div className="border-b border-zinc-800 p-4">
               <div className="flex items-center gap-3">
-                <button
+                <motion.button
                   onClick={goBack}
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
                   className="p-2 -ml-2 hover:bg-zinc-800 rounded-lg transition-colors"
                 >
                   <ArrowLeft className="h-5 w-5 text-zinc-400" />
-                </button>
+                </motion.button>
                 <div className="flex-1">
                   <h2 className="text-lg font-semibold text-white">
                     {selectedPersona.name}
@@ -363,7 +380,7 @@ export function PersonaSidebar() {
             </div>
 
             {/* Transcript Area */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+            <div className="flex-1 overflow-y-auto p-4 space-y-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
               {transcriptMessages.length === 0 && !isCallInProgress && (
                 <div className="flex flex-col items-center justify-center h-full text-center px-4">
                   <div
@@ -441,12 +458,17 @@ export function PersonaSidebar() {
               )}
 
               <AnimatePresence initial={false}>
-                {transcriptMessages.map((message) => (
+                {transcriptMessages.map((message, index) => (
                   <motion.div
                     key={message.id}
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
                     exit={{ opacity: 0 }}
+                    transition={{
+                      duration: 0.3,
+                      delay: index * 0.05,
+                      ease: "easeOut",
+                    }}
                     className="space-y-1"
                   >
                     <div className="flex items-center gap-2">
diff --git a/next.config.ts b/next.config.ts
index fa67b35..cb651cd 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,9 +1,5 @@
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {
-  turbopack: {
-    root: __dirname,
-  },
-};
+const nextConfig: NextConfig = {};
 
 export default nextConfig;