diff --git a/apps/user-ui/app/(drawer)/(tabs)/home/index.tsx b/apps/user-ui/app/(drawer)/(tabs)/home/index.tsx
index 6bfb0da..f07d5e0 100755
--- a/apps/user-ui/app/(drawer)/(tabs)/home/index.tsx
+++ b/apps/user-ui/app/(drawer)/(tabs)/home/index.tsx
@@ -422,6 +422,7 @@ export default function Dashboard() {
                       )
                     }
                     showDeliveryInfo={false}
+                    useAddToCartDialog={true}
                     miniView={true}
                   />
                 </View>
diff --git a/apps/user-ui/app/(drawer)/(tabs)/home/search-results/index.tsx b/apps/user-ui/app/(drawer)/(tabs)/home/search-results/index.tsx
index 8bcb128..912c298 100644
--- a/apps/user-ui/app/(drawer)/(tabs)/home/search-results/index.tsx
+++ b/apps/user-ui/app/(drawer)/(tabs)/home/search-results/index.tsx
@@ -1,34 +1,21 @@
 import React, { useState, useRef, useEffect } from "react";
-import {
-  View,
-  Dimensions,
-  Image,
-  Alert,
-  Platform,
-} from "react-native";
+import { View, Dimensions } from "react-native";
 import { useRouter, useLocalSearchParams } from "expo-router";
 import {
-  theme,
   tw,
   useManualRefresh,
   useMarkDataFetchers,
-  LoadingDialog,
-  AppContainer,
   MyFlatList,
   MyText,
-  MyTextInput,
-  MyTouchableOpacity,
- SearchBar } from "common-ui";
-import dayjs from "dayjs";
+  SearchBar,
+} from "common-ui";
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import { trpc } from "@/src/trpc-client";
-import { useGetCart, useAddToCart } from '@/hooks/cart-query-hooks';
 import ProductCard from "@/components/ProductCard";
 import FloatingCartBar from "@/components/floating-cart-bar";
 
 const { width: screenWidth } = Dimensions.get("window");
-const itemWidth = (screenWidth - 48) / 2; // 48 = padding horizontal (16*2) + gap (16)
-
+const itemWidth = (screenWidth - 48) / 2;
 
 export default function SearchResults() {
   const router = useRouter();
@@ -36,29 +23,20 @@ export default function SearchResults() {
   const query = (q as string) || "";
   const [inputQuery, setInputQuery] = useState(query);
   const [searchQuery, setSearchQuery] = useState(query);
-  const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
   const searchInputRef = useRef<any>(null);
 
   useEffect(() => {
-    // Auto-focus search bar on mount
     setTimeout(() => {
       searchInputRef.current?.focus();
     }, 100);
   }, []);
 
-  const {
-    data: productsData,
-    isLoading,
-    error,
-    refetch,
-  } = trpc.common.product.getAllProductsSummary.useQuery({
-    searchQuery: searchQuery || undefined,
-  });
-
-  const { data: cartData, refetch: refetchCart } = useGetCart();
+  const { data: productsData, isLoading, error, refetch } =
+    trpc.common.product.getAllProductsSummary.useQuery({
+      searchQuery: searchQuery || undefined,
+    });
 
   const products = productsData?.products || [];
-  const addToCart = useAddToCart({ showSuccessAlert: false, showErrorAlert: false, refetchCart: true });
 
   useManualRefresh(() => {
     refetch();
@@ -68,43 +46,6 @@ export default function SearchResults() {
     refetch();
   });
 
-  const handleAddToCart = (productId: number) => {
-    setIsLoadingDialogOpen(true);
-    addToCart.mutate(
-      { productId, quantity: 1 },
-      {
-        onSuccess: () => {
-          Alert.alert("Success", "Item added to cart!");
-          refetchCart();
-        },
-        onError: (error: any) => {
-          Alert.alert("Error", error.message || "Failed to add item to cart");
-        },
-        onSettled: () => {
-          setIsLoadingDialogOpen(false);
-        },
-      }
-    );
-  };
-
-  const handleBuyNow = (productId: number) => {
-    setIsLoadingDialogOpen(true);
-    addToCart.mutate(
-      { productId, quantity: 1 },
-      {
-        onSuccess: () => {
-          router.push(`/(drawer)/(tabs)/home/cart?select=${productId}`);
-        },
-        onError: (error: any) => {
-          Alert.alert("Error", error.message || "Failed to add item to cart");
-        },
-        onSettled: () => {
-          setIsLoadingDialogOpen(false);
-        },
-      }
-    );
-  };
-
   const handleSearch = () => {
     setSearchQuery(inputQuery);
   };
@@ -136,16 +77,18 @@ export default function SearchResults() {
           <ProductCard
             item={item}
             itemWidth={itemWidth}
-            onPress={() => router.push(`/(drawer)/(tabs)/home/product-detail/${item.id}`)}
+            onPress={() =>
+              router.push(`/(drawer)/(tabs)/home/product-detail/${item.id}`)
+            }
             showDeliveryInfo={false}
+            useAddToCartDialog={true}
           />
         )}
         keyExtractor={(item, index) => index.toString()}
-        columnWrapperStyle={{ gap: 16, justifyContent: 'center' }}
+        columnWrapperStyle={{ gap: 16, justifyContent: "center" }}
         contentContainerStyle={[tw`pb-24`, { gap: 16 }]}
         ListHeaderComponent={
           <View style={tw`pt-4 pb-2 px-4`}>
-            {/* Search Bar */}
             <SearchBar
               ref={searchInputRef}
               value={inputQuery}
@@ -153,21 +96,19 @@ export default function SearchResults() {
               onSubmitEditing={handleSearch}
               returnKeyType="search"
             />
-
-            {/* Section Title */}
             <View style={tw`flex-row justify-between items-center mb-2`}>
               <MyText style={tw`text-lg font-bold text-gray-900`}>
-                {searchQuery ? `Search Results for "${searchQuery}"` : 'All Products'}
+                {searchQuery
+                  ? `Search Results for "${searchQuery}"`
+                  : "All Products"}
               </MyText>
             </View>
           </View>
         }
       />
-
-      <LoadingDialog open={isLoadingDialogOpen} message="Adding to cart..." />
-    <View style={tw`absolute bottom-2 left-4 right-4`}> 
+      <View style={tw`absolute bottom-2 left-4 right-4`}>
         <FloatingCartBar />
-    </View>
+      </View>
     </View>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/user-ui/app/(drawer)/(tabs)/order-again/index.tsx b/apps/user-ui/app/(drawer)/(tabs)/order-again/index.tsx
index e6637c1..7bd04bc 100644
--- a/apps/user-ui/app/(drawer)/(tabs)/order-again/index.tsx
+++ b/apps/user-ui/app/(drawer)/(tabs)/order-again/index.tsx
@@ -1,54 +1,31 @@
-import React, { useState } from "react";
-import {
-  View,
-  Dimensions,
-  Image,
-  Platform,
-  Alert,
-  ScrollView,
-} from "react-native";
+import React from "react";
+import { View, Dimensions, ScrollView } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useRouter } from "expo-router";
 import {
-  theme,
   tw,
   useManualRefresh,
   useMarkDataFetchers,
-  LoadingDialog,
   AppContainer,
   MyFlatList,
   MyText,
 } from "common-ui";
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import ProductCard from "@/components/ProductCard";
-
 import { trpc } from "@/src/trpc-client";
-import { useGetCart, useAddToCart } from '@/hooks/cart-query-hooks';
-import { useProductSlotIdentifier } from '@/hooks/useProductSlotIdentifier';
 import FloatingCartBar from "@/components/floating-cart-bar";
 import TabLayoutWrapper from "@/components/TabLayoutWrapper";
 
 const { width: screenWidth } = Dimensions.get("window");
-const itemWidth = (screenWidth - 48) / 2; // 2 items per row with padding
+const itemWidth = (screenWidth - 48) / 2;
 
 export default function OrderAgain() {
   const router = useRouter();
-  const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
 
-  const {
-    data: recentProductsData,
-    isLoading,
-    error,
-    refetch,
-  } = trpc.user.order.getRecentlyOrderedProducts.useQuery({
-    limit: 20,
-  });
-
-  
-  
-  const { data: cartData, refetch: refetchCart } = useGetCart();
-  const { addToCart = () => {} } = useAddToCart({ showSuccessAlert: false, showErrorAlert: false, refetchCart: true }) || {};
-  const { getQuickestSlot } = useProductSlotIdentifier();
+  const { data: recentProductsData, isLoading, error, refetch } =
+    trpc.user.order.getRecentlyOrderedProducts.useQuery({
+      limit: 20,
+    });
 
   const recentProducts = recentProductsData?.products || [];
 
@@ -60,37 +37,14 @@ export default function OrderAgain() {
     refetch();
   });
 
-  const handleAddToCart = (productId: number) => {
-    const slotId = getQuickestSlot(productId);
-    if (!slotId) {
-      Alert.alert("Error", "No available delivery slot for this product");
-      return;
-    }
-
-    setIsLoadingDialogOpen(true);
-    addToCart(productId, 1, slotId, () => setIsLoadingDialogOpen(false));
-  };
-
-  const handleBuyNow = (productId: number) => {
-    const slotId = getQuickestSlot(productId);
-    if (!slotId) {
-      Alert.alert("Error", "No available delivery slot for this product");
-      return;
-    }
-
-    setIsLoadingDialogOpen(true);
-    addToCart(productId, 1, slotId, () => {
-      setIsLoadingDialogOpen(false);
-      router.push(`/(drawer)/(tabs)/home/cart?select=${productId}`);
-    });
-  };
-
   if (isLoading) {
     return (
       <AppContainer>
         <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
           <MaterialIcons name="refresh" size={48} color="#3B82F6" />
-          <MyText style={tw`text-gray-500 font-medium mt-4`}>Loading your recent orders...</MyText>
+          <MyText style={tw`text-gray-500 font-medium mt-4`}>
+            Loading your recent orders...
+          </MyText>
         </View>
       </AppContainer>
     );
@@ -102,7 +56,9 @@ export default function OrderAgain() {
         <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
           <MaterialIcons name="error-outline" size={48} color="#EF4444" />
           <MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Oops!</MyText>
-          <MyText style={tw`text-gray-500 mt-2`}>Failed to load recent orders</MyText>
+          <MyText style={tw`text-gray-500 mt-2`}>
+            Failed to load recent orders
+          </MyText>
         </View>
       </AppContainer>
     );
@@ -112,7 +68,7 @@ export default function OrderAgain() {
     <TabLayoutWrapper>
       <ScrollView style={tw`flex-1`} contentContainerStyle={tw`pb-20`}>
         <LinearGradient
-          colors={['#194185', '#1570EF']} // brand900 to brand600
+          colors={["#194185", "#1570EF"]}
           start={{ x: 0, y: 0 }}
           end={{ x: 1, y: 1 }}
           style={tw`pb-8 pt-6 px-5 rounded-b-[32px] shadow-lg mb-4`}
@@ -123,22 +79,27 @@ export default function OrderAgain() {
                 <View style={tw`bg-white/20 p-1 rounded-full mr-2`}>
                   <MaterialIcons name="refresh" size={14} color="#FFF" />
                 </View>
-                <MyText style={tw`text-brand100 text-xs font-bold uppercase tracking-widest`}>
+                <MyText
+                  style={tw`text-brand100 text-xs font-bold uppercase tracking-widest`}
+                >
                   Order Again
                 </MyText>
               </View>
-              <MyText style={tw`text-white text-sm font-medium opacity-90 ml-1`} numberOfLines={1}>
+              <MyText
+                style={tw`text-white text-sm font-medium opacity-90 ml-1`}
+                numberOfLines={1}
+              >
                 Reorder your favorite items quickly
               </MyText>
             </View>
           </View>
         </LinearGradient>
 
-        {/* White Section */}
         <View style={tw`bg-white`}>
-          {/* Section Title */}
           <View style={tw`flex-row items-center mb-2 px-4 pt-4`}>
-            <MyText style={tw`text-lg font-bold text-gray-900`}>Recently Ordered</MyText>
+            <MyText style={tw`text-lg font-bold text-gray-900`}>
+              Recently Ordered
+            </MyText>
           </View>
 
           {recentProducts.length === 0 ? (
@@ -152,22 +113,27 @@ export default function OrderAgain() {
                 No recent orders
               </MyText>
               <MyText style={tw`text-gray-500 mt-2 text-center px-8`}>
-                Items you&apos;ve ordered recently will appear here
+                Items you've ordered recently will appear here
               </MyText>
             </View>
           ) : (
             <View style={tw`px-4 pb-4`}>
               <View style={tw`flex-row flex-wrap justify-between`}>
                 {recentProducts.map((item, index) => (
-                  <View key={item.id} style={tw`mb-4 ${index % 2 === 0 ? 'mr-2' : ''}`}>
+                  <View
+                    key={item.id}
+                    style={tw`mb-4 ${index % 2 === 0 ? "mr-2" : ""}`}
+                  >
                     <ProductCard
                       item={item}
-                      // handleAddToCart={handleAddToCart}
-                      // handleBuyNow={handleBuyNow}
                       itemWidth={itemWidth}
-                      onPress={() => router.push(`/(drawer)/(tabs)/order-again/product-detail/${item.id}`)}
+                      onPress={() =>
+                        router.push(
+                          `/(drawer)/(tabs)/order-again/product-detail/${item.id}`
+                        )
+                      }
                       showDeliveryInfo={false}
-                      // iconType="flash"
+                      useAddToCartDialog={true}
                     />
                   </View>
                 ))}
@@ -177,10 +143,9 @@ export default function OrderAgain() {
         </View>
       </ScrollView>
 
-      <LoadingDialog open={isLoadingDialogOpen} message="Adding to cart..." />
       <View style={tw`absolute bottom-2 left-4 right-4`}>
         <FloatingCartBar />
       </View>
     </TabLayoutWrapper>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/[id].tsx b/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/[id].tsx
index 58f1ebf..bc8855a 100644
--- a/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/[id].tsx
+++ b/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/[id].tsx
@@ -1,76 +1,44 @@
-import React, { useState } from 'react';
+import React from "react";
+import { View, Dimensions } from "react-native";
+import { useRouter, useLocalSearchParams } from "expo-router";
 import {
-  View,
-  Dimensions,
-  Image,
-  TouchableOpacity,
-  Alert,
-  Platform,
-} from 'react-native';
-import { useRouter, useLocalSearchParams } from 'expo-router';
-import { theme, tw, useManualRefresh, MyFlatList, useDrawerTitle, useMarkDataFetchers, LoadingDialog, MyText, MyTouchableOpacity } from 'common-ui';
-import dayjs from 'dayjs';
-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
-import { trpc } from '@/src/trpc-client';
-import { useAddToCart } from '@/hooks/cart-query-hooks';
-import ProductCard from '@/components/ProductCard';
-import FloatingCartBar from '@/components/floating-cart-bar';
-
-const { width: screenWidth } = Dimensions.get('window');
-const itemWidth = (screenWidth - 48) / 2; // 48 = padding horizontal (16*2) + gap (16)
+  theme,
+  tw,
+  useManualRefresh,
+  useMarkDataFetchers,
+  MyFlatList,
+  useDrawerTitle,
+  MyText,
+} from "common-ui";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import FontAwesome5 from "@expo/vector-icons/FontAwesome5";
+import { trpc } from "@/src/trpc-client";
+import ProductCard from "@/components/ProductCard";
+import FloatingCartBar from "@/components/floating-cart-bar";
 
+const { width: screenWidth } = Dimensions.get("window");
+const itemWidth = (screenWidth - 48) / 2;
 
 export default function StoreDetail() {
   const router = useRouter();
-  // const { storeId } = useLocalSearchParams();
   const { id: storeId } = useLocalSearchParams();
   const storeIdNum = parseInt(storeId as string);
-  const [isLoadingDialogOpen, setIsLoadingDialogOpen] = useState(false);
 
-  const { data: storeData, isLoading, refetch, error } = trpc.user.stores.getStoreWithProducts.useQuery(
-    { storeId: storeIdNum },
-    { enabled: !!storeIdNum }
-  );
-  
+  const { data: storeData, isLoading, refetch, error } =
+    trpc.user.stores.getStoreWithProducts.useQuery(
+      { storeId: storeIdNum },
+      { enabled: !!storeIdNum }
+    );
+
+  useManualRefresh(() => {
+    refetch();
+  });
 
   useMarkDataFetchers(() => {
     refetch();
   });
 
-  useDrawerTitle(storeData?.store?.name || 'Store', [storeData?.store?.name]);
-
-  const addToCart = useAddToCart({ showSuccessAlert: false, showErrorAlert: false, refetchCart: true });
-
-  const handleAddToCart = (productId: number) => {
-    setIsLoadingDialogOpen(true);
-    addToCart.mutate({ productId, quantity: 1 }, {
-      onSuccess: () => {
-        Alert.alert('Success', 'Item added to cart!');
-      },
-      onError: (error: any) => {
-        Alert.alert('Error', error.message || 'Failed to add item to cart');
-      },
-      onSettled: () => {
-        setIsLoadingDialogOpen(false);
-      },
-    });
-  };
-
-  const handleBuyNow = (productId: number) => {
-    setIsLoadingDialogOpen(true);
-    addToCart.mutate({ productId, quantity: 1 }, {
-      onSuccess: () => {
-        router.push(`/(drawer)/(tabs)/home/cart?select=${productId}`);
-      },
-      onError: (error: any) => {
-        Alert.alert('Error', error.message || 'Failed to add item to cart');
-      },
-      onSettled: () => {
-        setIsLoadingDialogOpen(false);
-      },
-    });
-  };
+  useDrawerTitle(storeData?.store?.name || "Store", [storeData?.store?.name]);
 
   if (isLoading) {
     return (
@@ -85,51 +53,75 @@ export default function StoreDetail() {
       <View style={tw`flex-1 justify-center items-center bg-gray-50`}>
         <MaterialIcons name="error-outline" size={48} color="#EF4444" />
         <MyText style={tw`text-gray-900 text-lg font-bold mt-4`}>Oops!</MyText>
-        <MyText style={tw`text-gray-500 mt-2`}>Store not found or error loading</MyText>
+        <MyText style={tw`text-gray-500 mt-2`}>
+          Store not found or error loading
+        </MyText>
       </View>
     );
   }
-  
+
   return (
     <View style={tw`flex-1 bg-gray-50 relative`}>
       <MyFlatList
         data={storeData?.products || []}
         numColumns={2}
         renderItem={({ item }) => (
-           <ProductCard
-             item={item}
-             itemWidth={itemWidth}
-             onPress={() => router.push(`/(drawer)/(tabs)/stores/store-detail/product-detail/${item.id}`)}
-             showDeliveryInfo={false}
-             miniView={true}
-           />
+          <ProductCard
+            item={item}
+            itemWidth={itemWidth}
+            onPress={() =>
+              router.push(
+                `/(drawer)/(tabs)/stores/store-detail/product-detail/${item.id}`
+              )
+            }
+            showDeliveryInfo={false}
+            miniView={true}
+            useAddToCartDialog={true}
+          />
         )}
         keyExtractor={(item, index) => index.toString()}
         columnWrapperStyle={{ gap: 16 }}
         contentContainerStyle={[tw`px-4 pb-24`, { gap: 16 }]}
         ListHeaderComponent={
           <View style={tw`pt-4 pb-6`}>
-            <View style={tw`bg-white p-6 rounded-2xl shadow-sm border border-gray-100 items-center`}>
-              <View style={tw`w-16 h-16 bg-pink-50 rounded-full items-center justify-center mb-4`}>
-                <FontAwesome5 name="store" size={28} color={theme.colors.brand500} />
+            <View
+              style={tw`bg-white p-6 rounded-2xl shadow-sm border border-gray-100 items-center`}
+            >
+              <View
+                style={tw`w-16 h-16 bg-pink-50 rounded-full items-center justify-center mb-4`}
+              >
+                <FontAwesome5
+                  name="store"
+                  size={28}
+                  color={theme.colors.brand500}
+                />
               </View>
-              <MyText style={tw`text-2xl font-bold text-gray-900 text-center mb-2`}>{storeData?.store?.name}</MyText>
+              <MyText
+                style={tw`text-2xl font-bold text-gray-900 text-center mb-2`}
+              >
+                {storeData?.store?.name}
+              </MyText>
               {storeData?.store?.description && (
-                <MyText style={tw`text-gray-500 text-center leading-5 px-4`}>{storeData?.store?.description}</MyText>
+                <MyText
+                  style={tw`text-gray-500 text-center leading-5 px-4`}
+                >
+                  {storeData?.store?.description}
+                </MyText>
               )}
             </View>
             <View style={tw`flex-row items-center mt-6 mb-2`}>
               <MaterialIcons name="grid-view" size={20} color="#374151" />
-              <MyText style={tw`text-lg font-bold text-gray-900 ml-2`}>Products from this Store</MyText>
+              <MyText style={tw`text-lg font-bold text-gray-900 ml-2`}>
+                Products from this Store
+              </MyText>
             </View>
           </View>
         }
       />
-      <LoadingDialog open={isLoadingDialogOpen} message="Processing..." />
 
       <View style={tw`absolute bottom-2 left-4 right-4`}>
         <FloatingCartBar />
       </View>
     </View>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/user-ui/app/_layout.tsx b/apps/user-ui/app/_layout.tsx
index 23b8acb..e064c6a 100755
--- a/apps/user-ui/app/_layout.tsx
+++ b/apps/user-ui/app/_layout.tsx
@@ -25,6 +25,7 @@ import UpdateChecker from "@/components/UpdateChecker";
 import { RefreshProvider } from "../../../packages/ui/src/lib/refresh-context";
 import WebViewWrapper from "@/components/WebViewWrapper";
 import BackHandlerWrapper from "@/components/BackHandler";
+import AddToCartDialog from "@/src/components/AddToCartDialog";
 import React from "react";
 
 export default function RootLayout() {
@@ -61,6 +62,7 @@ export default function RootLayout() {
                                 <RefreshProvider queryClient={queryClient}>
                                   <BackHandlerWrapper />
                                   <Stack screenOptions={{ headerShown: false }} />
+                                  <AddToCartDialog />
                                 </RefreshProvider>
                               </LocationTestWrapper>
                             </PaperProvider>
diff --git a/apps/user-ui/components/QuickDeliveryAddressSelector.tsx b/apps/user-ui/components/QuickDeliveryAddressSelector.tsx
index e407084..dc28eeb 100644
--- a/apps/user-ui/components/QuickDeliveryAddressSelector.tsx
+++ b/apps/user-ui/components/QuickDeliveryAddressSelector.tsx
@@ -121,174 +121,157 @@ const QuickDeliveryAddressSelector: React.FC<QuickDeliveryAddressSelectorProps>
       )}
 
       {!isForFlashDelivery && (
-        <View style={tw`flex-1 mr-2`}>
-                  <View style={tw`flex-row items-center mb-1`}>
-          <MyTouchableOpacity
-            onPress={() => router.back()}
-            style={tw`p-2 -ml-2`}
-            activeOpacity={0.7}
-          >
-            <MaterialIcons name="chevron-left" size={24} />
-          </MyTouchableOpacity>
-          <MyText style={[tw`text-lg font-bold ml-2`]}>
-            Delivery At {getCurrentSlotDisplay()}
-          </MyText>
-        </View>
-        {/* Trigger Component with Separate Chevrons */}
-        <View style={tw`bg-brand50 border border-brand100 rounded-lg p-3`}>
-
-            {/* Regular Delivery Time Section */}
+        <>
+          <View style={tw`flex-1 flex-row items-center gap-2`}>
             <MyTouchableOpacity
-              onPress={() => setDialogOpen(true)}
-              style={tw`flex-row items-center justify-between mb-2`}
+              onPress={() => router.back()}
+              style={tw`p-1`}
               activeOpacity={0.7}
             >
-              <View style={tw`flex-1`}>
-                {/* <MyText style={tw`text-xs text-brand500 font-bold uppercase tracking-wider leading-3`}>
-                  Delivery Time
-                </MyText> */}
-                <MyText style={tw`text-sm font-bold text-brand900 leading-4`}>
-                  Delivery at: {getCurrentSlotDisplay()}
-                </MyText>
-              </View>
-              <MaterialIcons name="keyboard-arrow-down" size={20} color={theme.colors.brand500} />
+              <MaterialIcons name="chevron-left" size={24} />
             </MyTouchableOpacity>
 
+            <View style={tw`flex-1 gap-1`}>
+              <MyTouchableOpacity
+                onPress={() => setDialogOpen(true)}
+                style={tw`flex-row items-center bg-brand50 border border-brand100 rounded-lg px-3 py-2`}
+                activeOpacity={0.7}
+              >
+                <View style={tw`flex-1`}>
+                  <MyText style={tw`text-xs text-brand500 font-bold uppercase`}>Delivery Time</MyText>
+                  <MyText style={tw`text-sm font-bold text-brand900`}>
+                    {getCurrentSlotDisplay()}
+                  </MyText>
+                </View>
+                <MaterialIcons name="keyboard-arrow-down" size={18} color={theme.colors.brand500} />
+              </MyTouchableOpacity>
 
-          {/* Address Section */}
-          <MyTouchableOpacity
-            onPress={() => setDialogOpen(true)}
-            style={tw`flex-row items-center justify-between`}
-            activeOpacity={0.7}
-          >
-            <View style={tw`flex-1`}>
-              {/* <MyText style={tw`text-xs text-brand500 font-bold uppercase tracking-wider leading-3`}>
-                Delivery Address
-              </MyText> */}
-              <MyText style={tw`text-sm font-bold text-brand900 leading-4`} numberOfLines={1}>
-               TO: {getCurrentAddressDisplay()}
-              </MyText>
-            </View>
-            <MaterialIcons name="keyboard-arrow-down" size={20} color={theme.colors.brand500} />
-          </MyTouchableOpacity>
-        </View>
-
-        {/* Consolidated Dialog - 80% height */}
-        <BottomDialog
-          open={dialogOpen}
-          onClose={() => setDialogOpen(false)}
-        >
-          <View style={[tw`py-6`, { height: Dimensions.get('window').height * 0.8 }]}>
-            <MyText style={tw`text-xl font-bold text-gray-900 mb-6 text-center`}>
-              Select Delivery Options
-            </MyText>
-
-            <View style={tw`flex-1`}>
-              {/* Section 1: Delivery Time Selection */}
-              <View style={tw`mb-6`}>
-                <MyText style={tw`text-lg font-bold text-gray-900 mb-3`}>
-                  Select Delivery Time
-                </MyText>
-
-                <ScrollView style={tw`max-h-40`} showsVerticalScrollIndicator={false}>
-                  {isForFlashDelivery ? (
-                    <View style={tw`p-3 bg-green-50 border border-green-200 rounded-lg mb-2`}>
-                      <View style={tw`flex-row items-center`}>
-                        <MaterialIcons name="bolt" size={20} color="#16a34a" />
-                        <MyText style={tw`text-green-800 font-medium ml-2`}>
-                          1 Hr Delivery - within 1 hour
-                        </MyText>
-                      </View>
-                      <MyText style={tw`text-green-700 text-xs mt-1`}>
-                        Selected automatically for flash delivery
-                      </MyText>
-                    </View>
-                  ) : (
-                    slotOptions.map(slot => (
-                      <MyTouchableOpacity
-                        key={slot.id}
-                        style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
-                          slot.id === (slotId || earliestSlot?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
-                        }`}
-                        onPress={() => {
-                          onSlotChange?.(slot.id);
-                          setDialogOpen(false);
-                        }}
-                        activeOpacity={0.7}
-                      >
-                        <MyText style={tw`font-medium text-gray-900`}>
-                          Delivery: {slot.deliveryTime}
-                        </MyText>
-                        <MyText style={tw`text-xs text-gray-500 mt-1`}>
-                          Orders Close at: {slot.closeTime}
-                        </MyText>
-                      </MyTouchableOpacity>
-                    ))
-                  )}
-                </ScrollView>
-              </View>
-
-              {/* Divider */}
-              <View style={tw`h-px bg-gray-200 mb-6`} />
-
-              {/* Section 2: Address Selection */}
-              <View style={tw`flex-1`}>
-                <MyText style={tw`text-lg font-bold text-gray-900 mb-3`}>
-                  Select Delivery Address
-                </MyText>
-
-                <ScrollView style={tw`flex-1`} showsVerticalScrollIndicator={false}>
-                  {!isAuthenticated ? (
-                    <View style={tw`p-4 bg-red-50 border border-red-200 rounded-lg`}>
-                      <View style={tw`flex-row items-center`}>
-                        <MaterialIcons name="error" size={20} color="#DC2626" />
-                        <MyText style={tw`text-red-800 font-medium ml-2`}>
-                          Authentication Required
-                        </MyText>
-                      </View>
-                      <MyText style={tw`text-red-700 text-sm mt-2`}>
-                        Please log in to select and manage delivery addresses.
-                      </MyText>
-                    </View>
-                  ) : addressOptions.length === 0 ? (
-                    <View style={tw`p-4 bg-gray-50 border border-gray-200 rounded-lg`}>
-                      <MyText style={tw`text-gray-600 text-center`}>
-                        No delivery addresses available. Please add an address first.
-                      </MyText>
-                    </View>
-                  ) : (
-                    addressOptions.map(address => (
-                      <MyTouchableOpacity
-                        key={address.id}
-                        style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
-                          address.id === (selectedAddressId || defaultAddress?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
-                        }`}
-                        onPress={() => {
-                          setSelectedAddressId(address.id);
-                          setDialogOpen(false);
-                        }}
-                        activeOpacity={0.7}
-                      >
-                        <MyText style={tw`font-medium text-gray-900`}>
-                          {address.name}
-                        </MyText>
-                        <MyText style={tw`text-sm text-gray-600 mt-1`} numberOfLines={2}>
-                          {address.address}
-                        </MyText>
-                        <MyText style={tw`text-xs text-gray-500 mt-1`}>
-                          Phone: {address.phone}
-                        </MyText>
-                      </MyTouchableOpacity>
-                    ))
-                  )}
-                </ScrollView>
-              </View>
+              {/* Address dropdown - temporarily hidden
+              <MyTouchableOpacity
+                onPress={() => setDialogOpen(true)}
+                style={tw`flex-row items-center bg-brand50 border border-brand100 rounded-lg px-3 py-2`}
+                activeOpacity={0.7}
+              >
+                <View style={tw`flex-1`}>
+                  <MyText style={tw`text-xs text-brand500 font-bold uppercase`}>Address</MyText>
+                  <MyText style={tw`text-sm font-bold text-brand900`} numberOfLines={1}>
+                    {getCurrentAddressDisplay()}
+                  </MyText>
+                </View>
+                <MaterialIcons name="keyboard-arrow-down" size={18} color={theme.colors.brand500} />
+              </MyTouchableOpacity>
+              */}
             </View>
           </View>
-        </BottomDialog>
-      </View>
-      )}
 
+          <BottomDialog
+            open={dialogOpen}
+            onClose={() => setDialogOpen(false)}
+          >
+            <View style={[tw`py-6`, { height: Dimensions.get('window').height * 0.5 }]}>
+              <MyText style={tw`text-xl font-bold text-gray-900 mb-4 text-center`}>
+                Select Delivery Time
+              </MyText>
+
+              <ScrollView showsVerticalScrollIndicator={false}>
+                {isForFlashDelivery ? (
+                  <View style={tw`p-3 bg-green-50 border border-green-200 rounded-lg mb-2`}>
+                    <View style={tw`flex-row items-center`}>
+                      <MaterialIcons name="bolt" size={20} color="#16a34a" />
+                      <MyText style={tw`text-green-800 font-medium ml-2`}>
+                        1 Hr Delivery - within 1 hour
+                      </MyText>
+                    </View>
+                    <MyText style={tw`text-green-700 text-xs mt-1`}>
+                      Selected automatically for flash delivery
+                    </MyText>
+                  </View>
+                ) : (
+                  slotOptions.map(slot => (
+                    <MyTouchableOpacity
+                      key={slot.id}
+                      style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
+                        slot.id === (slotId || earliestSlot?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
+                      }`}
+                      onPress={() => {
+                        onSlotChange?.(slot.id);
+                        setDialogOpen(false);
+                      }}
+                      activeOpacity={0.7}
+                    >
+                      <MyText style={tw`font-medium text-gray-900`}>
+                        Delivery: {slot.deliveryTime}
+                      </MyText>
+                      <MyText style={tw`text-xs text-gray-500 mt-1`}>
+                        Orders Close at: {slot.closeTime}
+                      </MyText>
+                    </MyTouchableOpacity>
+                  ))
+                )}
+              </ScrollView>
+            </View>
+          </BottomDialog>
+
+          {/* Address section - temporarily hidden
+          <BottomDialog
+            open={addressDialogOpen}
+            onClose={() => setAddressDialogOpen(false)}
+          >
+            <View style={[tw`py-6`, { height: Dimensions.get('window').height * 0.5 }]}>
+              <MyText style={tw`text-xl font-bold text-gray-900 mb-4 text-center`}>
+                Select Delivery Address
+              </MyText>
+
+              <ScrollView showsVerticalScrollIndicator={false}>
+                {!isAuthenticated ? (
+                  <View style={tw`p-4 bg-red-50 border border-red-200 rounded-lg`}>
+                    <View style={tw`flex-row items-center`}>
+                      <MaterialIcons name="error" size={20} color="#DC2626" />
+                      <MyText style={tw`text-red-800 font-medium ml-2`}>
+                        Authentication Required
+                      </MyText>
+                    </View>
+                    <MyText style={tw`text-red-700 text-sm mt-2`}>
+                      Please log in to select and manage delivery addresses.
+                    </MyText>
+                  </View>
+                ) : addressOptions.length === 0 ? (
+                  <View style={tw`p-4 bg-gray-50 border border-gray-200 rounded-lg`}>
+                    <MyText style={tw`text-gray-600 text-center`}>
+                      No delivery addresses available. Please add an address first.
+                    </MyText>
+                  </View>
+                ) : (
+                  addressOptions.map(address => (
+                    <MyTouchableOpacity
+                      key={address.id}
+                      style={tw`p-3 border border-gray-200 rounded-lg mb-2 ${
+                        address.id === (selectedAddressId || defaultAddress?.id) ? 'bg-brand50 border-brand500' : 'bg-white'
+                      }`}
+                      onPress={() => {
+                        setSelectedAddressId(address.id);
+                        setAddressDialogOpen(false);
+                      }}
+                      activeOpacity={0.7}
+                    >
+                      <MyText style={tw`font-medium text-gray-900`}>
+                        {address.name}
+                      </MyText>
+                      <MyText style={tw`text-sm text-gray-600 mt-1`} numberOfLines={2}>
+                        {address.address}
+                      </MyText>
+                      <MyText style={tw`text-xs text-gray-500 mt-1`}>
+                        Phone: {address.phone}
+                      </MyText>
+                    </MyTouchableOpacity>
+                  ))
+                )}
+              </ScrollView>
+            </View>
+          </BottomDialog>
+          */}
+        </>
+      )}
     </>
   );
 };
diff --git a/apps/user-ui/components/floating-cart-bar.tsx b/apps/user-ui/components/floating-cart-bar.tsx
index db5b60c..fa76b2a 100644
--- a/apps/user-ui/components/floating-cart-bar.tsx
+++ b/apps/user-ui/components/floating-cart-bar.tsx
@@ -162,8 +162,8 @@ useEffect(() => {
                       <>
                         <MyText style={tw`text-white font-black text-base`}>
                           ₹{totalCartValue}
-                        </MyText>
                         {` • ${itemCount} ${itemCount === 1 ? "Item" : "Items"}`}
+                        </MyText>
                       </>
                     )}
                   </MyText>
diff --git a/apps/user-ui/src/components/AddToCartDialog.tsx b/apps/user-ui/src/components/AddToCartDialog.tsx
index 9ed7d60..e5ff411 100644
--- a/apps/user-ui/src/components/AddToCartDialog.tsx
+++ b/apps/user-ui/src/components/AddToCartDialog.tsx
@@ -4,7 +4,7 @@ import { tw, BottomDialog, MyText, MyTouchableOpacity, Quantifier } from 'common
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { useCartStore } from '@/src/store/cartStore';
 import { trpc } from '@/src/trpc-client';
-import { useAddToCart, useGetCart } from '@/hooks/cart-query-hooks';
+import { useAddToCart, useGetCart, useUpdateCartItem } from '@/hooks/cart-query-hooks';
 import dayjs from 'dayjs';
 
 export default function AddToCartDialog() {
@@ -21,15 +21,26 @@ export default function AddToCartDialog() {
     refetchCart: true,
   });
 
+  const updateCartItem = useUpdateCartItem({
+    showSuccessAlert: false,
+    showErrorAlert: false,
+    refetchCart: true,
+  });
+
   const isOpen = !!addedToCartProduct;
   
 
   const product = addedToCartProduct?.product;
 
-  // Pre-select cart's slotId if item is already in cart
+  // Pre-select cart's slotId and quantity if item is already in cart
   useEffect(() => {
     if (isOpen && product) {
       const cartItem = cartData?.items?.find((item: any) => item.productId === product.id);
+      const cartQuantity = cartItem?.quantity || 0;
+      
+      // Set quantity: 0 → 1, >1 → keep as is
+      setQuantity(cartQuantity === 0 ? 1 : cartQuantity);
+      
       if (cartItem?.slotId) {
         setSelectedSlotId(cartItem.slotId);
       } else {
@@ -64,13 +75,25 @@ export default function AddToCartDialog() {
     .map((slotId) => slotMap[slotId])
     .filter(Boolean);
 
+  // Find cart item for this product
+  const cartItem = cartData?.items?.find((item: any) => item.productId === product?.id);
+
+  // Determine if updating existing item (quantity > 1 means it's an update)
+  const isUpdate = (cartItem?.quantity || 0) > 1;
+
   const handleAddToCart = () => {
-    const slotId = selectedSlotId ?? availableSlotIds[0] ?? 0;
-    
-    addToCart.mutate(
-      { productId: product.id, quantity, slotId },
-      { onSuccess: () => clearAddedToCartProduct() }
-    );
+    if (isUpdate && cartItem?.id) {
+      updateCartItem.mutate(
+        { itemId: cartItem.id, quantity },
+        { onSuccess: () => clearAddedToCartProduct() }
+      );
+    } else {
+      const slotId = selectedSlotId ?? availableSlotIds[0] ?? 0;
+      addToCart.mutate(
+        { productId: product.id, quantity, slotId },
+        { onSuccess: () => clearAddedToCartProduct() }
+      );
+    }
   };
 
   if (!isOpen || !addedToCartProduct) return null;
@@ -78,11 +101,16 @@ export default function AddToCartDialog() {
   return (
     <BottomDialog open={isOpen} onClose={clearAddedToCartProduct}>
       <View style={tw`p-6 max-h-[500px]`}>
-        <View style={tw`flex-row items-center mb-6`}>
+        <View style={tw`flex-row items-center mb-2`}>
           <View style={tw`w-10 h-10 bg-blue-50 rounded-full items-center justify-center mr-3`}>
             <MaterialIcons name="schedule" size={20} color="#3B82F6" />
           </View>
-          <MyText style={tw`text-xl font-bold text-gray-900`}>Select Delivery Slot</MyText>
+          <View>
+            <MyText style={tw`text-xl font-bold text-gray-900`}>Select Delivery Slot</MyText>
+            {product?.name && (
+              <MyText style={tw`text-sm text-gray-500`}>{product.name}</MyText>
+            )}
+          </View>
         </View>
 
         <ScrollView showsVerticalScrollIndicator={false}>
@@ -124,10 +152,10 @@ export default function AddToCartDialog() {
           <MyTouchableOpacity
             style={tw`flex-1 bg-brand500 py-3.5 rounded-xl items-center ${!selectedSlotId ? 'opacity-50' : ''}`}
             onPress={handleAddToCart}
-            disabled={addToCart.isLoading || !selectedSlotId}
+            disabled={(addToCart.isLoading || updateCartItem.isLoading) || !selectedSlotId}
           >
             <MyText style={tw`text-white font-bold`}>
-              {addToCart.isLoading ? 'Adding...' : 'Add to Cart'}
+              {addToCart.isLoading || updateCartItem.isLoading ? (isUpdate ? 'Updating...' : 'Adding...') : (isUpdate ? 'Update Item' : 'Add to Cart')}
             </MyText>
           </MyTouchableOpacity>
           <MyTouchableOpacity