diff --git a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
index 1e2997c4a..0b4811752 100644
--- a/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
+++ b/packages/app/components/card/PackCardHeader/PackCardHeader.tsx
@@ -31,25 +31,39 @@ interface PackCardHeaderProps {
 export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
   const { isLoading, refetch } = useFetchSinglePack(data?.id);
   const user = useAuthUser();
-  const handleDeletePack = useDeletePack(data.id);
-  const { handleActionsOpenChange, handleEdit, handleSaveTitle, isEditMode } =
-    usePackTitleInput(data);
+  const { handleDeletePack } = useDeletePack(data.id);
+  const {
+    handleActionsOpenChange,
+    handleEdit,
+    handleSaveTitle,
+    isEditMode,
+    isOpen,
+    setIsOpen,
+  } = usePackTitleInput(data);
 
   const { isDark, currentTheme } = useTheme();
+
   const router = useRouter();
   const { editPack } = useEditPack();
 
+  const handleDelete = () => {
+    handleDeletePack();
+    setIsOpen(false);
+  };
   const handleSavePack = () => {
     const packDetails = {
       id: data.id,
       name: data.name,
       is_public: data.is_public,
     };
+    setIsOpen(false);
     editPack(packDetails);
   };
+  
   return (
     <>
       <CustomCardHeader
+        link={''}
         data={data}
         title={
           <RStack
@@ -89,11 +103,11 @@ export const PackCardHeader = ({ data, title }: PackCardHeaderProps) => {
         }
         actionsComponent={
           user?.id === data.owner_id && (
-            <ThreeDotsMenu onOpenChange={handleActionsOpenChange}>
+            <ThreeDotsMenu open={isOpen} onOpenChange={handleActionsOpenChange}>
               <YStack space="$1">
                 <RButton onPress={handleEdit}>Edit</RButton>
                 <RButton onPress={handleSavePack}>Save</RButton>
-                <RButton onPress={handleDeletePack}>Delete</RButton>
+                <RButton onPress={handleDelete}>Delete</RButton>
               </YStack>
             </ThreeDotsMenu>
           )
diff --git a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
index 9c954211e..53c119077 100644
--- a/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
+++ b/packages/app/components/card/PackCardHeader/usePackTitleInput.ts
@@ -4,17 +4,21 @@ import { useRef, useState } from 'react';
 export const usePackTitleInput = (data) => {
   const [isEditMode, setIsEditMode] = useState(false);
   const isEditModeRef = useRef(false);
+  const [isOpen, setIsOpen] = useState(false);
   const { editPack } = useEditPack();
 
   const handleActionsOpenChange = (state) => {
+    setIsOpen(true);
     if (!state && isEditModeRef.current) {
       isEditModeRef.current = false;
       setIsEditMode(true);
+      setIsOpen(true);
     }
   };
 
   const handleEdit = () => {
     isEditModeRef.current = true;
+    setIsOpen(false);
   };
 
   const handleSaveTitle = (title) => {
@@ -23,10 +27,17 @@ export const usePackTitleInput = (data) => {
       name: title,
       is_public: data.is_public,
     };
-
+    setIsOpen(false);
     editPack(packDetails);
     setIsEditMode(false);
   };
 
-  return { handleActionsOpenChange, isEditMode, handleEdit, handleSaveTitle };
+  return {
+    handleActionsOpenChange,
+    isEditMode,
+    handleEdit,
+    handleSaveTitle,
+    isOpen,
+    setIsOpen,
+  };
 };
diff --git a/packages/app/components/dashboard/QuickActionButton.tsx b/packages/app/components/dashboard/QuickActionButton.tsx
index f4bb83f69..92139fea1 100644
--- a/packages/app/components/dashboard/QuickActionButton.tsx
+++ b/packages/app/components/dashboard/QuickActionButton.tsx
@@ -57,7 +57,7 @@ const loadStyles = (theme: any) => {
     },
     text: {
       fontSize: 13,
-      fontWeight:'bold',
+      fontWeight: 'bold',
       color: currentTheme.colors.iconColor,
     },
   };
diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index f78bdc38f..a83af08d3 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -213,4 +213,4 @@ const loadStyles = (theme: any) => {
   };
 };
 
-export default FeedSearchFilter;
\ No newline at end of file
+export default FeedSearchFilter;
diff --git a/packages/app/components/map/MapButtonsOverlay.tsx b/packages/app/components/map/MapButtonsOverlay.tsx
index 73d4199ce..8832ca6f9 100644
--- a/packages/app/components/map/MapButtonsOverlay.tsx
+++ b/packages/app/components/map/MapButtonsOverlay.tsx
@@ -334,7 +334,7 @@ const loadStyles = (theme) => {
     downloadText: {
       fontSize: 15,
       fontWeight: '500',
-      marginRight:8
+      marginRight: 8,
     },
     modal: {
       alignItems: 'center',
diff --git a/packages/app/components/map/NativeMap.native.tsx b/packages/app/components/map/NativeMap.native.tsx
index 7c1db095f..aa242f698 100644
--- a/packages/app/components/map/NativeMap.native.tsx
+++ b/packages/app/components/map/NativeMap.native.tsx
@@ -299,7 +299,13 @@ function NativeMap({ shape: shapeProp }) {
                 />
               </AlertDialog.Body>
               <AlertDialog.Footer>
-                <RStack style={{width:'60%', justifyContent:'space-between', flexDirection:'row'}}>
+                <RStack
+                  style={{
+                    width: '60%',
+                    justifyContent: 'space-between',
+                    flexDirection: 'row',
+                  }}
+                >
                   <RButton
                     variant="unstyled"
                     colorScheme="coolGray"
diff --git a/packages/app/components/navigation/NavigationList.tsx b/packages/app/components/navigation/NavigationList.tsx
index 2f056d433..2f85a023c 100644
--- a/packages/app/components/navigation/NavigationList.tsx
+++ b/packages/app/components/navigation/NavigationList.tsx
@@ -25,7 +25,7 @@ export const NavigationList: React.FC<NavigationListProps> = ({
             style={{
               width: '100%',
               borderRadius: 8,
-              marginBottom: isMobileView ? 6:0,
+              marginBottom: isMobileView ? 6 : 0,
               backgroundColor: currentTheme.colors.background,
               color: currentTheme.colors.white,
             }}
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index d0637eac4..90e87c44b 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -66,7 +66,7 @@ export function PackDetails() {
   if (isLoading) return <RText>Loading...</RText>;
 
   return (
-    <>
+    <ScrollView>
       <Layout>
         <View
           style={[
@@ -158,6 +158,8 @@ export function PackDetails() {
           bottom: 30,
           width: 60,
           height: 60,
+          marginBottom: 20,
+
           justifyContent: 'center',
           alignItems: 'center',
         }}
@@ -168,7 +170,7 @@ export function PackDetails() {
           trigger="Open Chat"
         />
       </View>
-    </>
+    </ScrollView>
   );
 }
 
diff --git a/packages/app/hooks/packs/useDeletePack.ts b/packages/app/hooks/packs/useDeletePack.ts
index c3f0c17ff..0bacedeb1 100644
--- a/packages/app/hooks/packs/useDeletePack.ts
+++ b/packages/app/hooks/packs/useDeletePack.ts
@@ -12,5 +12,5 @@ export const useDeletePack = (id) => {
     } catch {}
   };
 
-  return handleDeletePack;
+  return { handleDeletePack };
 };
diff --git a/packages/app/screens/dashboard/index.tsx b/packages/app/screens/dashboard/index.tsx
index 9047cf261..13b560ed4 100644
--- a/packages/app/screens/dashboard/index.tsx
+++ b/packages/app/screens/dashboard/index.tsx
@@ -59,11 +59,11 @@ const loadStyles = (theme) => {
       alignItems: 'stretch',
       paddingHorizontal: 20,
       width:
-      Platform.OS === 'web'
-        ? screenWidth <= SCREEN_WIDTH
-          ? '100vw'
-          : '90vw'
-        : '100%',
+        Platform.OS === 'web'
+          ? screenWidth <= SCREEN_WIDTH
+            ? '100vw'
+            : '90vw'
+          : '100%',
     },
     cardContainer: {
       flexDirection: 'column',
diff --git a/packages/app/screens/user/Settings.tsx b/packages/app/screens/user/Settings.tsx
index 2f88aa0e3..fe997d614 100644
--- a/packages/app/screens/user/Settings.tsx
+++ b/packages/app/screens/user/Settings.tsx
@@ -50,6 +50,7 @@ export default function Settings() {
         paddingVertical={20}
         paddingHorizontal={8}
         marginHorizontal="auto"
+        marginVertical={40}
       >
         <RStack
           style={{
diff --git a/packages/crosspath/types/lib-interface.d.ts b/packages/crosspath/types/lib-interface.d.ts
index 524b24431..acf8c94d3 100644
--- a/packages/crosspath/types/lib-interface.d.ts
+++ b/packages/crosspath/types/lib-interface.d.ts
@@ -1,4 +1,6 @@
 import { LinkComponent, Router, CreateParam } from './model';
-export declare function Link(props: Parameters<LinkComponent>): ReturnType<LinkComponent>;
+export declare function Link(
+  props: Parameters<LinkComponent>,
+): ReturnType<LinkComponent>;
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;
diff --git a/packages/crosspath/types/model/types.d.ts b/packages/crosspath/types/model/types.d.ts
index 9c3ee437d..5e7b7414e 100644
--- a/packages/crosspath/types/model/types.d.ts
+++ b/packages/crosspath/types/model/types.d.ts
@@ -1,27 +1,32 @@
 import { FC } from 'react';
 import { LinkProps } from 'solito/link';
 export interface CreateParamOptions {
-    initial?: string;
-    parse?: (param: string) => unknown;
-    stringify?: (param: unknown) => string;
+  initial?: string;
+  parse?: (param: string) => unknown;
+  stringify?: (param: unknown) => string;
 }
 export interface Router {
-    push: (url: URL) => void;
-    replace: (url: URL) => void;
-    back: () => void;
+  push: (url: URL) => void;
+  replace: (url: URL) => void;
+  back: () => void;
 }
 export type LinkComponent = FC<LinkProps>;
-export type URL = string | {
-    pathname?: string;
-    query?: Record<string, any>;
-    state?: Record<string, any>;
-    hash?: string;
-    as?: string | object;
-};
-export type CreateParam = <T>() => {
-    useParam: (key: keyof T, options?: CreateParamOptions) => [value: any, setValue: (value: any) => void];
-    useParams: (key: keyof T) => {
-        params: T;
-        setParams: (value: any) => void;
+export type URL =
+  | string
+  | {
+      pathname?: string;
+      query?: Record<string, any>;
+      state?: Record<string, any>;
+      hash?: string;
+      as?: string | object;
     };
+export type CreateParam = <T>() => {
+  useParam: (
+    key: keyof T,
+    options?: CreateParamOptions,
+  ) => [value: any, setValue: (value: any) => void];
+  useParams: (key: keyof T) => {
+    params: T;
+    setParams: (value: any) => void;
+  };
 };
diff --git a/packages/ui/src/Bento/elements/tables/Basic.tsx b/packages/ui/src/Bento/elements/tables/Basic.tsx
index dcfd7ad2c..7ee30baf4 100644
--- a/packages/ui/src/Bento/elements/tables/Basic.tsx
+++ b/packages/ui/src/Bento/elements/tables/Basic.tsx
@@ -152,7 +152,7 @@ export function BasicTable({
       header: () => 'Category',
       cell: (info) => info.getValue(),
       // footer: (info) => 'category',
-    })
+    }),
   ];
 
   if (hasPermissions) {
@@ -161,7 +161,7 @@ export function BasicTable({
         id: 'actions',
         cell: (props) => <ActionButtons item={props.row.original} />,
         header: () => 'Actions',
-      })
+      }),
     );
   }
 
diff --git a/packages/ui/src/RSelect/index.tsx b/packages/ui/src/RSelect/index.tsx
index 000754db3..eb38203ff 100644
--- a/packages/ui/src/RSelect/index.tsx
+++ b/packages/ui/src/RSelect/index.tsx
@@ -6,6 +6,7 @@ import {
   Sheet,
   YStack as OriginalYStack,
   getFontSize,
+  Text,
 } from 'tamagui';
 
 const YStack: any = OriginalYStack;
@@ -83,7 +84,7 @@ export function SelectItem(props) {
 
   // Conditional rendering based on options
   if (options.length === 0) {
-    return <div>No options available</div>;
+    return <Text>No options available</Text>;
   }
 
   return (
diff --git a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
index 9be99fa2b..07314982a 100644
--- a/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
+++ b/packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { MoreHorizontal } from '@tamagui/lucide-icons';
 import { Adapt, Button, Popover as OriginalPopover } from 'tamagui';
+import { Platform } from 'react-native';
 
 // Bypass TypeScript's type checking on opacity and borderWidth, since component is directly from the library
 const Popover: any = OriginalPopover;
@@ -8,15 +9,22 @@ const Popover: any = OriginalPopover;
 interface ThreeDotsMenuProps {
   children: ReactNode;
   onOpenChange: (open: boolean) => void;
+  open: boolean;
 }
 
-export function ThreeDotsMenu({ children, onOpenChange }: ThreeDotsMenuProps) {
+export function ThreeDotsMenu({
+  children,
+  onOpenChange,
+  open,
+}: ThreeDotsMenuProps) {
+  console.log('ksksksks', open);
   return (
     <Popover
       size="$5"
       allowFlip
       placement="bottom"
       onOpenChange={onOpenChange}
+      open={Platform.OS != 'web' ? open : undefined}
       disableFocus
     >
       <Popover.Trigger asChild backgroundColor="transparent">
diff --git a/packages/ui/src/dialog/BaseDialog.tsx b/packages/ui/src/dialog/BaseDialog.tsx
index 245b407af..924da238c 100644
--- a/packages/ui/src/dialog/BaseDialog.tsx
+++ b/packages/ui/src/dialog/BaseDialog.tsx
@@ -38,7 +38,7 @@ export const BaseDialog = ({
       </Dialog.Trigger>
       <Adapt when="sm" platform="touch">
         <Sheet zIndex={200000} modal dismissOnSnapToBottom>
-          <Sheet.Frame padding="$4" gap="$4">
+          <Sheet.Frame padding="$4" gap="$0">
             <Adapt.Contents />
           </Sheet.Frame>
 
@@ -74,9 +74,10 @@ export const BaseDialog = ({
           exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
           gap="$4"
         >
-          <Dialog.Title>{title}</Dialog.Title>
-
-          <Dialog.Description>{description}</Dialog.Description>
+          {title && <Dialog.Title>{title}</Dialog.Title>}
+          {description && (
+            <Dialog.Description>{description}</Dialog.Description>
+          )}
           {children}
         </Dialog.Content>
       </Dialog.Portal>