diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index a390d1d0b04c..55006fa5b5f2 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1902,6 +1902,9 @@
   "experimental": {
     "message": "Experimental"
   },
+  "exploreweb3": {
+    "message": "Explore web3"
+  },
   "exportYourData": {
     "message": "Export your data"
   },
@@ -2670,6 +2673,9 @@
   "manageDefaultSettings": {
     "message": "Manage default privacy settings"
   },
+  "managePermissions": {
+    "message": "Manage permissions"
+  },
   "marketCap": {
     "message": "Market cap"
   },
diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js
index 5c490e9d6e04..5461cca7f251 100644
--- a/ui/components/multichain/connected-site-menu/connected-site-menu.js
+++ b/ui/components/multichain/connected-site-menu/connected-site-menu.js
@@ -44,7 +44,7 @@ export const ConnectedSiteMenu = ({
   disabled,
 }) => {
   const t = useI18nContext();
-    const [showPopover, setShowPopover] = useState(false);
+  const [showPopover, setShowPopover] = useState(false);
   const handleMouseEnter = () => {
     setShowPopover(true);
   };
@@ -55,12 +55,10 @@ export const ConnectedSiteMenu = ({
 
   const [referenceElement, setReferenceElement] = useState();
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const setBoxRef = (ref: any) => {
+  const setBoxRef = (ref) => {
     setReferenceElement(ref);
   };
 
-
   const selectedAccount = useSelector(getSelectedInternalAccount);
   const subjectMetadata = useSelector(getSubjectMetadata);
   const connectedOrigin = useSelector(getOriginOfCurrentTab);
@@ -145,7 +143,10 @@ export const ConnectedSiteMenu = ({
         )}
       </Box>
       {showPopover && (
-        <ConnectedSitePopover referenceElement={referenceElement} isOpen={showPopover} />
+        <ConnectedSitePopover
+          referenceElement={referenceElement}
+          isOpen={showPopover}
+        />
       )}
     </>
   );
diff --git a/ui/components/multichain/connected-site-popover/connected-site-popover.stories.tsx b/ui/components/multichain/connected-site-popover/connected-site-popover.stories.tsx
index 80222c0385d8..e2e5958907e2 100644
--- a/ui/components/multichain/connected-site-popover/connected-site-popover.stories.tsx
+++ b/ui/components/multichain/connected-site-popover/connected-site-popover.stories.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
-import {ConnectedSitePopover} from './connected-site-popover';
+import { ConnectedSitePopover } from './connected-site-popover';
 
 export default {
   title: 'Components/Multichain/ConnectedSitePopover',
   component: ConnectedSitePopover,
   argTypes: {
-    onRemove: {
-      action: 'onRemove',
-    },
-    onViewOnOpensea: {
-      action: 'onViewOnOpensea',
+    isOpen: {
+      control: 'boolean',
     },
   },
+  args: {
+    isOpen: true,
+    networkImageUrl: './images/eth_logo.svg',
+    networkName: 'Avalanche Network C-Chain',
+    isConnected: true,
+  },
 };
 
 export const DefaultStory = (args) => <ConnectedSitePopover {...args} />;
diff --git a/ui/components/multichain/connected-site-popover/connected-site-popover.tsx b/ui/components/multichain/connected-site-popover/connected-site-popover.tsx
index cc2d8c4dde0a..80625b5b8fa0 100644
--- a/ui/components/multichain/connected-site-popover/connected-site-popover.tsx
+++ b/ui/components/multichain/connected-site-popover/connected-site-popover.tsx
@@ -1,12 +1,25 @@
-import React, { useState } from 'react';
-import { Box, Popover, PopoverPosition, Text } from '../../component-library';
+import React, { useContext, useState } from 'react';
+import {
+  AvatarNetwork,
+  AvatarNetworkSize,
+  Box,
+  Button,
+  ButtonLink,
+  ButtonSecondary,
+  IconName,
+  Popover,
+  PopoverPosition,
+  Text,
+} from '../../component-library';
 import {
   BackgroundColor,
   Display,
+  FlexDirection,
   JustifyContent,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
+import { I18nContext } from '../../../contexts/i18n';
 
 type ConnectedSitePopoverProp = {
   title: string;
@@ -14,7 +27,7 @@ type ConnectedSitePopoverProp = {
   value?: string | null;
   icon?: React.ReactNode;
   buttonAddressValue?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
-  withPopover?: boolean;
+  isConnected?: boolean;
   fullValue?: string;
 };
 
@@ -28,7 +41,11 @@ export const ConnectedSitePopover: React.FC<ConnectedSitePopoverProp> = ({
   fullValue,
   referenceElement,
   isOpen,
+  networkImageUrl,
+  networkName,
+  isConnected,
 }) => {
+  const t = useContext(I18nContext);
   return (
     <Box
       display={Display.Flex}
@@ -40,14 +57,55 @@ export const ConnectedSitePopover: React.FC<ConnectedSitePopoverProp> = ({
         referenceElement={referenceElement}
         isOpen={isOpen}
         position={PopoverPosition.BottomStart}
-        hasArrow
         flip
         backgroundColor={BackgroundColor.overlayAlternative}
-        className="tokenId-popover"
-        paddingLeft={4}
-        paddingRight={4}
+        paddingLeft={0}
+        paddingRight={0}
+        style={{
+          width: '256px',
+        }}
       >
-        <Box>Nidhi K Jha</Box>
+        <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
+          <Box
+            style={{
+              borderBottomWidth: '1px',
+              borderBottomStyle: 'solid',
+              borderBottomColor: '#858B9A33',
+            }}
+            paddingLeft={4}
+            paddingRight={4}
+            paddingBottom={2}
+          >
+            <Text variant={TextVariant.bodyMd}>sitename.domain.url</Text>
+            {isConnected ? (
+              <Box display={Display.Flex} flexDirection={FlexDirection.Row}>
+                <ButtonLink>{networkName}</ButtonLink>{' '}
+                <AvatarNetwork
+                  size={AvatarNetworkSize.Xs}
+                  name={networkImageUrl}
+                  src={networkImageUrl ?? undefined}
+                />
+              </Box>
+            ) : (
+              <Text variant={TextVariant.bodySm}>Not connected</Text>
+            )}
+          </Box>
+          <Box paddingLeft={4} paddingRight={4} paddingTop={2}>
+            <Box>
+              <Text variant={TextVariant.bodyMd}>
+                To connect to a site, select the "connect" button. MetaMask can
+                only connect to web3 sites.
+              </Text>
+              <ButtonLink>Learn more</ButtonLink>
+            </Box>
+          </Box>
+          <Box paddingTop={2} paddingLeft={4} paddingRight={4}>
+
+            <ButtonSecondary endIconName={IconName.Export} block>
+              {isConnected ? t('managePermissions'): t('exploreweb3')}
+            </ButtonSecondary>
+          </Box>
+        </Box>
       </Popover>
     </Box>
   );