diff --git a/types/client/marketplace.ts b/types/client/marketplace.ts
index edbd0b4132..185db5045d 100644
--- a/types/client/marketplace.ts
+++ b/types/client/marketplace.ts
@@ -24,6 +24,7 @@ export type MarketplaceAppOverview = MarketplaceAppPreview & MarketplaceAppSocia
   author: string;
   description: string;
   site?: string;
+  rating?: number;
 };
 
 export type AppRating = {
diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx
index 07de33d020..320c283407 100644
--- a/ui/snippets/searchBar/SearchBar.tsx
+++ b/ui/snippets/searchBar/SearchBar.tsx
@@ -28,7 +28,8 @@ import SearchBarInput from './SearchBarInput';
 import SearchBarRecentKeywords from './SearchBarRecentKeywords';
 import SearchBarSuggest from './SearchBarSuggest/SearchBarSuggest';
 import useQuickSearchQuery from './useQuickSearchQuery';
-
+import SearchBarSuggestExternalAppModal from './SearchBarSuggest/SearchBarSuggestExternalAppModal';
+import { MarketplaceAppOverview } from 'types/client/marketplace';
 type Props = {
   isHomepage?: boolean;
 };
@@ -37,6 +38,7 @@ const SCROLL_CONTAINER_ID = 'search_bar_popover_content';
 
 const SearchBar = ({ isHomepage }: Props) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
+  const modal = useDisclosure(); 
   const inputRef = React.useRef<HTMLFormElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const scrollRef = React.useRef<HTMLDivElement>(null);
@@ -96,6 +98,12 @@ const SearchBar = ({ isHomepage }: Props) => {
     saveToRecentKeywords(searchTerm);
     onClose();
   }, [ router.pathname, searchTerm, onClose ]);
+  const [dappDetails, setDappDetails] = React.useState<MarketplaceAppOverview | null>(null);
+  const handleData = (data: MarketplaceAppOverview) => {
+    setDappDetails(data);
+    onClose();
+    modal.onOpen();
+  };
 
   const menuPaddingX = isMobile && !isHomepage ? 24 : 0;
   const calculateMenuWidth = React.useCallback(() => {
@@ -174,6 +182,7 @@ const SearchBar = ({ isHomepage }: Props) => {
                     searchTerm={ debouncedSearchTerm }
                     onItemClick={ handleItemClick }
                     containerId={ SCROLL_CONTAINER_ID }
+                    handleData={handleData}
                   />
                 ) }
               </Box>
@@ -191,6 +200,7 @@ const SearchBar = ({ isHomepage }: Props) => {
           </PopoverContent>
         </Portal>
       </Popover>
+      <SearchBarSuggestExternalAppModal isModalOpen={modal.isOpen} onModalClose={modal.onClose} dappDetails={dappDetails} />
       <SearchBarBackdrop isOpen={ isOpen }/>
     </>
   );
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
index a3a01f0a50..11db405969 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
@@ -19,15 +19,16 @@ import { getItemCategory, searchCategories } from 'ui/shared/search/utils';
 import SearchBarSuggestApp from './SearchBarSuggestApp';
 import SearchBarSuggestBlockCountdown from './SearchBarSuggestBlockCountdown';
 import SearchBarSuggestItem from './SearchBarSuggestItem';
-
+import { MarketplaceAppOverview } from 'types/client/marketplace';
 interface Props {
   query: UseQueryResult<Array<SearchResultItem>, ResourceError<unknown>>;
   searchTerm: string;
   onItemClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
   containerId: string;
+  handleData :(data:MarketplaceAppOverview) => void;
 }
 
-const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props) => {
+const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId, handleData }: Props) => {
   const isMobile = useIsMobile();
 
   const marketplaceApps = useMarketplaceApps(searchTerm);
@@ -180,7 +181,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
                 />
               )) }
               { cat.id === 'app' && itemsGroups[cat.id]?.map((item, index) =>
-                <SearchBarSuggestApp key={ index } data={ item } isMobile={ isMobile } searchTerm={ searchTerm } onClick={ onItemClick }/>,
+                <SearchBarSuggestApp key={ index } data={ item } isMobile={ isMobile } searchTerm={ searchTerm } onClick={ onItemClick } handleData={handleData}/>,
               ) }
             </Element>
           );
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
index f945d372ca..16397bb4dc 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
@@ -8,15 +8,17 @@ import highlightText from 'lib/highlightText';
 import IconSvg from 'ui/shared/IconSvg';
 
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
-
+import SearchBarSuggestExternalAppModal from './SearchBarSuggestExternalAppModal';
+import SearchBarSuggestItemButton from './SearchBarSuggestItemButton';
 interface Props {
   data: MarketplaceAppOverview;
   isMobile: boolean | undefined;
   searchTerm: string;
   onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  handleData: (data: MarketplaceAppOverview) => void;
 }
 
-const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) => {
+const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick, handleData }: Props) => {
 
   const logo = (
     <Image
@@ -42,7 +44,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             >
               <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
-            { data.external && <IconSvg name="link_external" color="icon_link_external" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> }
+            {/* { data.external && <IconSvg name="link_external" color="icon_link_external" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> } */}
           </Flex>
           <Text
             variant="secondary"
@@ -81,7 +83,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
         >
           { data.description }
         </Text>
-        { data.external && (
+        {/* { data.external && (
           <IconSvg
             name="link_external"
             color="icon_link_external"
@@ -89,16 +91,16 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             verticalAlign="middle"
             flexShrink={ 0 }
           />
-        ) }
+        ) } */}
       </Flex>
     );
   })();
 
   if (data.external) {
     return (
-      <SearchBarSuggestItemLink onClick={ onClick } href={ data.url } target="_blank">
-        { content }
-      </SearchBarSuggestItemLink>
+      <SearchBarSuggestItemButton data={data} handleData={handleData}>
+         {content}
+      </SearchBarSuggestItemButton>
     );
   }
 
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestExternalAppModal.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestExternalAppModal.tsx
new file mode 100644
index 0000000000..814128255a
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestExternalAppModal.tsx
@@ -0,0 +1,145 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  useDisclosure,
+  Box,
+  useColorModeValue,
+  HStack,
+  Image,
+  VStack,
+  Heading,
+  Text,
+  Tag,
+  TagLabel,
+  IconButton
+} from '@chakra-ui/react';
+import Stars from '../../../marketplace/Rating/Stars';
+import React, { useEffect } from 'react';
+import { MarketplaceAppOverview, MarketplaceAppSocialInfo } from 'types/client/marketplace';
+import IconSvg from 'ui/shared/IconSvg';
+import WebsiteLink from '../../../marketplace/MarketplaceAppInfo/WebsiteLink';
+import SocialLink from '../../../marketplace/MarketplaceAppInfo/SocialLink';
+import type { Props as SocialLinkProps } from '../../../marketplace/MarketplaceAppInfo/SocialLink';
+type Props = {
+  isModalOpen: boolean;
+  onModalClose: () => void;
+  dappDetails: MarketplaceAppOverview | null;
+};
+const SOCIAL_LINKS: Array<Omit<SocialLinkProps, 'href'>> = [
+  { field: 'github', icon: "social/github_filled", title: 'Github' },
+  { field: 'twitter', icon: "social/twitter_filled", title: 'X (ex-Twitter)' },
+  { field: 'telegram', icon: "social/telegram_filled", title: 'Telegram' },
+  { field: 'discord', icon: "social/discord_filled", title: 'Discord' },
+];
+const SearchBarSuggestExternalAppModal =({isModalOpen, onModalClose, dappDetails}:Props)=> {
+  const socialLinks: Array<SocialLinkProps> = [];
+  SOCIAL_LINKS.forEach((link) => {
+    const href = dappDetails?.[link.field];
+    if (href) {
+      if (Array.isArray(href)) {
+        href.forEach((href) => socialLinks.push({ ...link, href }));
+      } else {
+        socialLinks.push({ ...link, href });
+      }
+    }
+  });
+    return (
+      <Modal isOpen={isModalOpen} onClose={onModalClose} isCentered size="sm">
+        <ModalOverlay />
+        <ModalContent>
+          {/* <ModalHeader></ModalHeader> */}
+          <ModalBody>
+            {dappDetails ? (
+              <Box>
+                {/* App Header Section */}
+                <HStack spacing={4} align="start" mb={4}>
+                  <Image
+                    src={dappDetails.logo || "https://via.placeholder.com/50"}
+                    alt={`${dappDetails.title} Logo`}
+                    boxSize="100px"
+                    borderRadius="md"
+                  />
+                  <VStack align="start" spacing={1} flex="1">                 
+                  <VStack align="start" spacing={4}>
+                  <VStack align="start" spacing={1} flex="1">
+                  <HStack spacing={2} alignItems="center">
+                  <Heading size="md">{dappDetails.title}</Heading>
+                  <IconSvg
+                    name="link_external"
+                    color="icon_link_external"
+                    boxSize={3}
+                    verticalAlign="middle"
+                    flexShrink={0}
+                    />
+                  </HStack>
+                   <Text fontSize="xs" color="gray.500">
+                      By {dappDetails.author}
+                   </Text>
+                  </VStack>
+                  <HStack spacing={2}>
+                  {2
+                  && 
+                  (<>
+                  <Stars filledIndex={2 }/>
+                  <Text fontSize="sm" color="gray.500">
+                    {2}(5) 
+                  </Text>
+                  <Text fontSize="sm" color="blue.500">
+                    Rate it!
+                  </Text>
+                  </>
+                  )}
+                  </HStack>
+                  </VStack>
+                  <HStack>
+                  <Button colorScheme="blue" size="sm" mt={4}>
+                   Launch App
+                  </Button>
+                  </HStack>
+                  </VStack>
+                  <ModalCloseButton />
+                </HStack>                
+               
+                {/* Description Section */}
+                <Text fontSize="sm" color="gray.700" mt={4}>
+                  {dappDetails.description || "No description available."}
+                </Text>
+
+                {/* Tags Section */}
+                {/* <HStack spacing={2} mt={4}>
+                  {dappDetails.tags?.map((tag, index) => (
+                    <Tag key={index} size="sm" variant="subtle" colorScheme="blue">
+                      <TagLabel>{tag}</TagLabel>
+                    </Tag>
+                  ))}
+                </HStack> */}
+              </Box>
+            ) : (
+              <Text>No details available for the selected app.</Text>
+            )}
+          </ModalBody>
+          <ModalFooter>
+              <HStack spacing={2} mt={4}>
+                  {dappDetails?.categories?.map((category, index) => (
+                    <Tag key={index} size="sm" variant="subtle" colorScheme="blue">
+                      <TagLabel>{category}</TagLabel>
+                    </Tag>
+                  ))}
+              </HStack>
+              <HStack spacing={2} mt={4}>
+              (dappDetails && <WebsiteLink url={ dappDetails?.site }/>)
+              (dappDetails && { socialLinks.map((link, index) => <SocialLink key={ index } { ...link }/>) })
+              </HStack>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>   
+    );
+  
+}
+export default React.memo(SearchBarSuggestExternalAppModal);
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemButton.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemButton.tsx
new file mode 100644
index 0000000000..d7c8e5886c
--- /dev/null
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemButton.tsx
@@ -0,0 +1,42 @@
+import { chakra, useColorModeValue,Box } from '@chakra-ui/react';
+import React from 'react';
+import { MarketplaceAppOverview } from 'types/client/marketplace';
+type Props = {
+  data: any;
+  children: React.ReactNode;
+  handleData: (data: MarketplaceAppOverview) => void;
+};
+
+const SearchBarSuggestItemButton = ({ data, children,handleData }: Props) => {
+    const handleClick = () => {
+        handleData(data);
+      };
+    return(
+      <Box
+      py={3}
+      px={1}
+      display="flex"
+      flexDir="column"
+      rowGap={2}
+      borderColor="divider"
+      borderBottomWidth="1px"
+      cursor="pointer" 
+      _last={{
+        borderBottomWidth: '0',
+      }}
+      _hover={{
+        bgColor: useColorModeValue('blue.50', 'gray.800'),
+      }}
+      fontSize="sm"
+      _first={{
+        mt: 2,
+      }}
+      className="cursor-pointer"
+      onClick={handleClick}
+    >
+      {children}
+    </Box>
+    )
+};
+
+export default SearchBarSuggestItemButton;