diff --git a/packages/pancake-uikit/src/widgets/Menu/components/DefaultDropDown.tsx b/packages/pancake-uikit/src/widgets/Menu/components/DefaultDropDown.tsx
new file mode 100644
index 0000000..e1f77e4
--- /dev/null
+++ b/packages/pancake-uikit/src/widgets/Menu/components/DefaultDropDown.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import { SocialLink } from "../types";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import ExternalLink from "./ExternalLink";
+
+interface Props {
+  list: SocialLink[];
+}
+
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+`;
+
+const PanelFooter: React.FC<Props> = ({ list }) => {
+  return (
+    <>
+      {list?.map((item) => {
+        return item.list && item.list.length > 1 ? (
+          <Dropdown position="top-right" key={item.key} target={<Image src={item.icon} title={item.name} />}>
+            {item.list?.map((childItem) => {
+              return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
+            })}
+          </Dropdown>
+        ) : (
+          item.list && <ExternalLink key={item.key} link={item.list[0].link} icon={item.icon} name={item.name} />
+        );
+      })}
+    </>
+  );
+};
+
+export default PanelFooter;
diff --git a/packages/pancake-uikit/src/widgets/Menu/components/MoreDropDown.tsx b/packages/pancake-uikit/src/widgets/Menu/components/MoreDropDown.tsx
new file mode 100644
index 0000000..21ee2e7
--- /dev/null
+++ b/packages/pancake-uikit/src/widgets/Menu/components/MoreDropDown.tsx
@@ -0,0 +1,131 @@
+import React from "react";
+import styled from "styled-components";
+import { SocialLink } from "../types";
+import Flex from "../../../components/Box/Flex";
+import Text from "../../../components/Text/Text";
+import Link from "../../../components/Link/Link";
+import MoreIcon from "../../../components/Svg/Icons/More";
+import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
+import ExternalLink from "./ExternalLink";
+
+interface Props {
+  list: SocialLink[];
+}
+
+const Image = styled.img`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  cursor: pointer;
+`;
+const ImageDiv = styled.div`
+  position: relative;
+  cursor: pointer;
+  & > .content {
+    display: none;
+    background-color: #fff;
+    box-sizing: border-box;
+    border-radius: 10px;
+    position: absolute;
+    width: 140px;
+    right: 0px;
+    left: 0;
+    z-index: 99999;
+    bottom: 0;
+    margin: 20px auto;
+    box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
+  }
+  :hover {
+    & > .content {
+      display: block;
+    }
+  }
+`;
+const ImageItem = styled.div`
+  /* padding: 5px 0; */
+  position: relative;
+  .itemDiv {
+    display: none;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 0 10px;
+    border-radius: 10px;
+    position: absolute;
+    width: 100px;
+    right: 0px;
+    left: 130px;
+    z-index: 99999;
+    bottom: 0;
+    margin: 20px auto;
+    box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
+  }
+  :hover {
+    & > .itemDiv {
+      display: block;
+    }
+  }
+  & > .content-item {
+    padding: 5px 10px;
+  }
+  & > .content-item:hover {
+    background-color: rgba(112, 112, 112, 0.2);
+  }
+`;
+const SingleLink = styled(Link)`
+  padding: 5px 10px;
+  width: 100%;
+  :hover {
+    background-color: rgba(112, 112, 112, 0.2);
+  }
+`;
+
+const MoreIconSvg = styled(MoreIcon)`
+  width: 30px;
+  height: 30px;
+`;
+const TextDiv = styled(Text)`
+  width: 70px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const MoreDropDown: React.FC<Props> = ({ list }) => {
+  return (
+    <>
+      <ImageDiv>
+        <div>
+          <MoreIconSvg />
+        </div>
+        <div className="content">
+          {list?.map((item) => {
+            return item.list && item.list.length > 1 ? (
+              <ImageItem key={item.key}>
+                <Flex className="content-item" alignItems="center" justifyContent="space-between">
+                  <>
+                    <Image src={item.icon} title={item.name} />
+                    <TextDiv marginLeft="5px">{item.name}</TextDiv>
+                  </>
+                  <ChevronRightIcon />
+                </Flex>
+                <div className="itemDiv">
+                  {item.list?.map((childItem) => {
+                    return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
+                  })}
+                </div>
+              </ImageItem>
+            ) : (
+              item.list && item.list.length > 0 && (
+                <SingleLink key={item.key} external href={item.list[0].link} color="textSubtle">
+                  <Image src={item.icon} title={item.name} />
+                </SingleLink>
+              )
+            );
+          })}
+        </div>
+      </ImageDiv>
+    </>
+  );
+};
+
+export default MoreDropDown;
diff --git a/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx b/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx
index fc6ddf1..85cc973 100644
--- a/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx
+++ b/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx
@@ -3,18 +3,12 @@ import styled from "styled-components";
 import { CogIcon } from "../../../components/Svg";
 import IconButton from "../../../components/Button/IconButton";
 import { MENU_ENTRY_HEIGHT } from "../config";
-import { PanelProps, PushedProps, SocialLink } from "../types";
+import { PanelProps, PushedProps } from "../types";
 import CakePrice from "./CakePrice";
 import ThemeSwitcher from "./ThemeSwitcher";
-import SocialLinks from "./SocialLinks";
 import LangSelector from "./LangSelector";
-import Flex from "../../../components/Box/Flex";
-import Text from "../../../components/Text/Text";
-import Dropdown from "../../../components/Dropdown/Dropdown";
-import Link from "../../../components/Link/Link";
-import MoreIcon from "../../../components/Svg/Icons/More";
-import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
-import ExternalLink from "./ExternalLink";
+import MoreDropDown from "./MoreDropDown";
+import DefaultDropDown from "./DefaultDropDown";
 
 interface Props extends PanelProps, PushedProps {}
 
@@ -40,89 +34,6 @@ const SocialEntry = styled.div`
   height: ${MENU_ENTRY_HEIGHT}px;
   padding: 0 16px;
 `;
-const Image = styled.img`
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  cursor: pointer;
-`;
-const ImageDiv = styled.div`
-  position: relative;
-  cursor: pointer;
-
-  & > .moreText {
-  }
-  & > .content {
-    display: none;
-    background-color: #fff;
-    box-sizing: border-box;
-    /* padding: 0 10px; */
-    border-radius: 10px;
-    position: absolute;
-    width: 140px;
-    /* height: 400px; */
-    /* top: 0; */
-    right: 0px;
-    left: 0;
-    z-index: 99999;
-    bottom: 0;
-    margin: 20px auto;
-    box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
-  }
-  :hover {
-    & > .content {
-      display: block;
-    }
-  }
-`;
-const ImageItem = styled.div`
-  /* padding: 5px 0; */
-  position: relative;
-  .itemDiv {
-    display: none;
-    background-color: #fff;
-    box-sizing: border-box;
-    padding: 0 10px;
-    border-radius: 10px;
-    position: absolute;
-    width: 100px;
-    right: 0px;
-    left: 130px;
-    z-index: 99999;
-    bottom: 0;
-    margin: 20px auto;
-    box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
-  }
-  :hover {
-    & > .itemDiv {
-      display: block;
-    }
-  }
-  & > .content-item {
-    padding: 5px 10px;
-  }
-  & > .content-item:hover {
-    background-color: rgba(112, 112, 112, 0.2);
-  }
-`;
-const SingleLink = styled(Link)`
-  padding: 5px 10px;
-  width: 100%;
-  :hover {
-    background-color: rgba(112, 112, 112, 0.2);
-  }
-`;
-
-const MoreIconSvg = styled(MoreIcon)`
-  width: 30px;
-  height: 30px;
-`;
-const TextDiv = styled(Text)`
-  width: 70px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
 
 const PanelFooter: React.FC<Props> = ({
   isPushed,
@@ -135,17 +46,8 @@ const PanelFooter: React.FC<Props> = ({
   setLang,
   socialLink,
 }) => {
-  let defaultList = undefined;
-  let moreList = undefined;
-  if (socialLink && socialLink.length > 0) {
-    defaultList = socialLink.filter((item, index) => {
-      if (index < 2) return item;
-    });
-    moreList = socialLink.filter((item, index) => {
-      if (index >= 2) return item;
-    });
-  }
-
+  const defaultList = socialLink?.slice(0, 2);
+  const moreList = socialLink?.slice(2);
   if (!isPushed) {
     return (
       <Container>
@@ -160,54 +62,8 @@ const PanelFooter: React.FC<Props> = ({
       <SocialEntry>
         <CakePrice cakePriceUsd={cakePriceUsd} />
         <>
-          {defaultList?.map((item) => {
-            return item.list && item.list.length > 1 ? (
-              <Dropdown position="top-right" target={<Image src={item.icon} title={item.name} />}>
-                {item.list?.map((childItem) => {
-                  return <ExternalLink link={childItem.link} name={childItem.name} />;
-                })}
-              </Dropdown>
-            ) : item.list ? (
-              <ExternalLink link={item.list[0].link} icon={item.icon} name={item.name} />
-            ) : (
-              ""
-            );
-          })}
-          {moreList ? (
-            <ImageDiv>
-              <div className="moreText">
-                <MoreIconSvg />
-              </div>
-              <div className="content">
-                {moreList?.map((item) => {
-                  return item.list && item.list.length > 1 ? (
-                    <ImageItem key={item.key}>
-                      <Flex className="content-item" alignItems="center" justifyContent="space-between">
-                        <>
-                          <Image src={item.icon} title={item.name} />
-                          <TextDiv marginLeft="5px">{item.name}</TextDiv>
-                        </>
-                        <ChevronRightIcon />
-                      </Flex>
-                      <div className="itemDiv">
-                        {item.list?.map((childItem) => {
-                          return <ExternalLink link={childItem.link} name={childItem.name} />;
-                        })}
-                      </div>
-                    </ImageItem>
-                  ) : item.list && item.list.length > 0 ? (
-                    <SingleLink key={item.key} external href={item.list[0].link} color="textSubtle">
-                      <Image src={item.icon} title={item.name} />
-                    </SingleLink>
-                  ) : (
-                    ""
-                  );
-                })}
-              </div>
-            </ImageDiv>
-          ) : (
-            ""
-          )}
+          {defaultList && <DefaultDropDown list={defaultList} />}
+          {moreList && moreList.length > 0 && <MoreDropDown list={moreList} />}
         </>
       </SocialEntry>
       <SettingsEntry>