diff --git a/components/project/traces/trace-filter.tsx b/components/project/traces/trace-filter.tsx
index e12526e3..78ca1e78 100644
--- a/components/project/traces/trace-filter.tsx
+++ b/components/project/traces/trace-filter.tsx
@@ -134,96 +134,98 @@ export default function FilterDialog({
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="max-w-3xl h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>Filter Traces</DialogTitle>
-          <DialogDescription>
-            Select filters to apply to the traces.
-          </DialogDescription>
-        </DialogHeader>
-        <VendorDropdown
-          selectedFilters={selectedFilters}
-          handleFilterChange={handleFilterChange}
-        />
-        <div>
-          <h4 className="mt-4">Attributes</h4>
-          {advancedFilters.map((filter, index) => (
-            <div key={index} className="flex items-center mt-2 space-x-2">
-              <AttributesCombobox
-                initialAttribute={filter.attribute}
-                setSelectedAttribute={(attribute) =>
-                  updateAdvancedFilter(index, "attribute", attribute)
-                }
-              />
-              <OperatorCombox
-                initialOperator={filter.operator}
-                setSelectedOperator={(operator) =>
-                  updateAdvancedFilter(index, "operator", operator)
-                }
-              />
-              <Input
-                placeholder="Value"
-                value={filter.value}
-                onChange={(e) =>
-                  updateAdvancedFilter(index, "value", e.target.value)
-                }
-                className="mr-2"
-              />
+      <DialogContent className="max-w-3xl h-[90vh] overflow-y-scroll flex flex-col">
+        <div className="flex-grow overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Filter Traces</DialogTitle>
+            <DialogDescription>
+              Select filters to apply to the traces.
+            </DialogDescription>
+          </DialogHeader>
+          <VendorDropdown
+            selectedFilters={selectedFilters}
+            handleFilterChange={handleFilterChange}
+          />
+          <div>
+            <h4 className="mt-4">Attributes</h4>
+            {advancedFilters.map((filter, index) => (
+              <div key={index} className="flex items-center mt-2 space-x-2">
+                <AttributesCombobox
+                  initialAttribute={filter.attribute}
+                  setSelectedAttribute={(attribute) =>
+                    updateAdvancedFilter(index, "attribute", attribute)
+                  }
+                />
+                <OperatorCombox
+                  initialOperator={filter.operator}
+                  setSelectedOperator={(operator) =>
+                    updateAdvancedFilter(index, "operator", operator)
+                  }
+                />
+                <Input
+                  placeholder="Value"
+                  value={filter.value}
+                  onChange={(e) =>
+                    updateAdvancedFilter(index, "value", e.target.value)
+                  }
+                  className="mr-2"
+                />
+                <Button
+                  variant={"destructive"}
+                  onClick={() => removeAdvancedFilter(index)}
+                >
+                  Remove
+                </Button>
+              </div>
+            ))}
+            <Button
+              variant={"secondary"}
+              onClick={addAdvancedFilter}
+              className="mt-2"
+            >
+              Add Attribute
+            </Button>
+          </div>
+          <div>
+            <h4 className="mt-4">User Id</h4>
+            <UserCombobox
+              selectedUser={selectedUserId}
+              setSelectedUser={setSelectedUserId}
+            />
+          </div>
+          <div>
+            <h4 className="mt-4">Prompt Id</h4>
+            <PromptCombobox
+              selectedPrompt={selectedPromptId}
+              setSelectedPrompt={setSelectedPromptId}
+            />
+          </div>
+          <DialogFooter className="sticky bottom-0 bg-white py-4">
+            <Button variant={"outline"} onClick={onClose}>
+              Cancel
+            </Button>
+            {(selectedFilters.length > 0 ||
+              advancedFilters.length > 0 ||
+              selectedUserId !== "" ||
+              selectedPromptId !== "") && (
               <Button
                 variant={"destructive"}
-                onClick={() => removeAdvancedFilter(index)}
+                onClick={() => {
+                  setSelectedFilters([]);
+                  setAdvancedFilters([]);
+                  setSelectedUserId("");
+                  setSelectedPromptId("");
+                }}
               >
-                Remove
+                <ClearIcon className="h-4 w-4" />
+                Clear Filters
               </Button>
-            </div>
-          ))}
-          <Button
-            variant={"secondary"}
-            onClick={addAdvancedFilter}
-            className="mt-2"
-          >
-            Add Attribute
-          </Button>
-        </div>
-        <div>
-          <h4 className="mt-4">User Id</h4>
-          <UserCombobox
-            selectedUser={selectedUserId}
-            setSelectedUser={setSelectedUserId}
-          />
-        </div>
-        <div>
-          <h4 className="mt-4">Prompt Id</h4>
-          <PromptCombobox
-            selectedPrompt={selectedPromptId}
-            setSelectedPrompt={setSelectedPromptId}
-          />
-        </div>
-        <DialogFooter>
-          <Button variant={"outline"} onClick={onClose}>
-            Cancel
-          </Button>
-          {(selectedFilters.length > 0 ||
-            advancedFilters.length > 0 ||
-            selectedUserId !== "" ||
-            selectedPromptId !== "") && (
-            <Button
-              variant={"destructive"}
-              onClick={() => {
-                setSelectedFilters([]);
-                setAdvancedFilters([]);
-                setSelectedUserId("");
-                setSelectedPromptId("");
-              }}
-            >
-              <ClearIcon className="h-4 w-4" />
-              Clear Filters
+            )}
+            <Button variant={"default"} onClick={applyFilters} color="primary">
+              Apply Filters
             </Button>
-          )}
-          <Button variant={"default"} onClick={applyFilters} color="primary">
-            Apply Filters
-          </Button>
-        </DialogFooter>
+          </DialogFooter>
+        </div>
       </DialogContent>
     </Dialog>
   );
diff --git a/components/shared/project-switcher.tsx b/components/shared/project-switcher.tsx
index 99b31610..70f23a0e 100644
--- a/components/shared/project-switcher.tsx
+++ b/components/shared/project-switcher.tsx
@@ -18,6 +18,7 @@ import { usePathname } from "next/navigation";
 import React from "react";
 import { useQuery } from "react-query";
 import { toast } from "sonner";
+import { ScrollArea } from "../ui/scroll-area";
 
 export function ProjectSwitcher({ email }: { email: string }) {
   const [open, setOpen] = React.useState(false);
@@ -45,7 +46,7 @@ export function ProjectSwitcher({ email }: { email: string }) {
   });
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={setOpen} modal>
       <PopoverTrigger asChild>
         <Button
           variant="outline"
@@ -54,47 +55,49 @@ export function ProjectSwitcher({ email }: { email: string }) {
           className="flex w-[200px] justify-between"
         >
           <p className="truncate">
-          {
-            projects?.projects.filter(
-              (project: any) => project.id === pathname.split("/")[2]
-            )[0]?.name
-          }
+            {
+              projects?.projects.filter(
+                (project: any) => project.id === pathname.split("/")[2]
+              )[0]?.name
+            }
           </p>
           <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
+      <PopoverContent className="w-[200px] h-[400px] p-0">
         <Command>
           <CommandInput placeholder="Search Project..." className="h-9" />
-          <CommandEmpty>No project found.</CommandEmpty>
-          <CommandGroup>
-            {projects?.projects.map((project: any) => (
-              <Link
-                key={project.id}
-                href={`/project/${project.id}/${pathname.split("/")[3]}`}
-                legacyBehavior
-              >
-                <a>
-                  <CommandItem
-                    value={project.id}
-                    onSelect={() => setOpen(false)}
-                  >
-                    <div className="flex justify-between w-full cursor-pointer">
-                      <p className="truncate">{project.name}</p>
-                      <CheckIcon
-                        className={cn(
-                          "ml-auto h-4 w-4",
-                          pathname.split("/")[2] === project.id
-                            ? "opacity-100"
-                            : "opacity-0"
-                        )}
-                      />
-                    </div>
-                  </CommandItem>
-                </a>
-              </Link>
-            ))}
-          </CommandGroup>
+          <ScrollArea>
+            <CommandEmpty>No project found.</CommandEmpty>
+            <CommandGroup>
+              {projects?.projects.map((project: any) => (
+                <Link
+                  key={project.id}
+                  href={`/project/${project.id}/${pathname.split("/")[3]}`}
+                  legacyBehavior
+                >
+                  <a>
+                    <CommandItem
+                      value={project.id}
+                      onSelect={() => setOpen(false)}
+                    >
+                      <div className="flex justify-between w-full cursor-pointer">
+                        <p className="truncate">{project.name}</p>
+                        <CheckIcon
+                          className={cn(
+                            "ml-auto h-4 w-4",
+                            pathname.split("/")[2] === project.id
+                              ? "opacity-100"
+                              : "opacity-0"
+                          )}
+                        />
+                      </div>
+                    </CommandItem>
+                  </a>
+                </Link>
+              ))}
+            </CommandGroup>
+          </ScrollArea>
         </Command>
       </PopoverContent>
     </Popover>