diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
index 6e0a03abd..a40e34136 100644
--- a/src/__tests__/widgets/menu.test.tsx
+++ b/src/__tests__/widgets/menu.test.tsx
@@ -209,7 +209,7 @@ it("renders correctly", () => {
               class="sc-kEjbxe fnkFQx"
             >
               <div
-                class="sc-fubCfw hswJXu"
+                class="sc-fubCfw ivOlsg"
                 role="button"
               >
                 <a
@@ -239,7 +239,7 @@ it("renders correctly", () => {
                 class="sc-pFZIQ kJqcph"
               >
                 <div
-                  class="sc-fubCfw duwseR"
+                  class="sc-fubCfw bRGoVr"
                   role="button"
                 >
                   <svg
@@ -277,7 +277,7 @@ it("renders correctly", () => {
                 />
               </div>
               <div
-                class="sc-fubCfw duwseR"
+                class="sc-fubCfw bRGoVr"
                 role="button"
               >
                 <a
@@ -315,7 +315,7 @@ it("renders correctly", () => {
                 </a>
               </div>
               <div
-                class="sc-fubCfw duwseR"
+                class="sc-fubCfw bRGoVr"
                 role="button"
               >
                 <a
@@ -345,7 +345,7 @@ it("renders correctly", () => {
                 </a>
               </div>
               <div
-                class="sc-fubCfw duwseR"
+                class="sc-fubCfw bRGoVr"
                 role="button"
               >
                 <a
@@ -372,7 +372,7 @@ it("renders correctly", () => {
                 </a>
               </div>
               <div
-                class="sc-fubCfw duwseR"
+                class="sc-fubCfw bRGoVr"
                 role="button"
               >
                 <a
@@ -400,7 +400,7 @@ it("renders correctly", () => {
                 class="sc-pFZIQ kJqcph"
               >
                 <div
-                  class="sc-fubCfw duwseR rainbow"
+                  class="sc-fubCfw bRGoVr rainbow"
                   role="button"
                 >
                   <svg
@@ -439,7 +439,7 @@ it("renders correctly", () => {
                 class="sc-pFZIQ kJqcph"
               >
                 <div
-                  class="sc-fubCfw duwseR"
+                  class="sc-fubCfw bRGoVr"
                   role="button"
                 >
                   <svg
@@ -483,7 +483,7 @@ it("renders correctly", () => {
                 class="sc-pFZIQ kJqcph"
               >
                 <div
-                  class="sc-fubCfw duwseR"
+                  class="sc-fubCfw bRGoVr"
                   role="button"
                 >
                   <svg
@@ -522,7 +522,7 @@ it("renders correctly", () => {
                 class="sc-pFZIQ kJqcph"
               >
                 <div
-                  class="sc-fubCfw duwseR"
+                  class="sc-fubCfw bRGoVr"
                   role="button"
                 >
                   <svg
@@ -559,10 +559,10 @@ it("renders correctly", () => {
               </div>
             </div>
             <div
-              class="sc-bkzZxe jfJWEE"
+              class="sc-idOhPF bXwMqE"
             >
               <button
-                class="sc-eCssSg bcQvse sc-fFubgz gudwLA"
+                class="sc-eCssSg bcQvse sc-iqHYGH iOsNjo"
                 scale="md"
               >
                 <svg
diff --git a/src/widgets/Menu/components/Accordion.tsx b/src/widgets/Menu/components/Accordion.tsx
index 4556c87f1..3b6ebb609 100644
--- a/src/widgets/Menu/components/Accordion.tsx
+++ b/src/widgets/Menu/components/Accordion.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { ReactNode, useState } from "react";
 import styled from "styled-components";
 import { MENU_ENTRY_HEIGHT } from "../config";
 import { MenuEntry, LinkLabel } from "./MenuEntry";
@@ -10,6 +10,7 @@ interface Props extends PushedProps {
   icon: React.ReactElement;
   initialOpenState?: boolean;
   className?: string;
+  children: ReactNode;
 }
 
 const Container = styled.div`
@@ -66,4 +67,4 @@ const Accordion: React.FC<Props> = ({
   );
 };
 
-export default Accordion;
+export default React.memo(Accordion, (prev, next) => prev.isPushed === next.isPushed);
diff --git a/src/widgets/Menu/components/CakePrice.tsx b/src/widgets/Menu/components/CakePrice.tsx
new file mode 100644
index 000000000..5c9b0c2cf
--- /dev/null
+++ b/src/widgets/Menu/components/CakePrice.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import styled from "styled-components";
+import { PancakeRoundIcon } from "../../../components/Svg";
+import Text from "../../../components/Text/Text";
+import Skeleton from "../../../components/Skeleton/Skeleton";
+
+interface Props {
+  cakePriceUsd?: number;
+}
+
+const PriceLink = styled.a`
+  display: flex;
+  align-items: center;
+  svg {
+    transition: transform 0.3s;
+  }
+  :hover {
+    svg {
+      transform: scale(1.2);
+    }
+  }
+`;
+
+const CakePrice: React.FC<Props> = ({ cakePriceUsd }) => {
+  return cakePriceUsd ? (
+    <PriceLink href="https://pancakeswap.info/token/0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82" target="_blank">
+      <PancakeRoundIcon width="24px" mr="8px" />
+      <Text color="textSubtle" bold>{`$${cakePriceUsd.toFixed(3)}`}</Text>
+    </PriceLink>
+  ) : (
+    <Skeleton width={80} height={24} />
+  );
+};
+
+export default React.memo(CakePrice);
diff --git a/src/widgets/Menu/components/LangSelector.tsx b/src/widgets/Menu/components/LangSelector.tsx
new file mode 100644
index 000000000..019f68044
--- /dev/null
+++ b/src/widgets/Menu/components/LangSelector.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { SvgProps } from "../../../components/Svg";
+import Text from "../../../components/Text/Text";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import Button from "../../../components/Button/Button";
+import * as IconModule from "../icons";
+import { LangType } from "../types";
+import MenuButton from "./MenuButton";
+
+const Icons = (IconModule as unknown) as { [key: string]: React.FC<SvgProps> };
+const { LanguageIcon } = Icons;
+
+interface Props {
+  currentLang: string;
+  langs: LangType[];
+  setLang: (lang: LangType) => void;
+}
+
+const LangSelector: React.FC<Props> = ({ currentLang, langs, setLang }) => (
+  <Dropdown
+    position="top-right"
+    target={
+      <Button variant="text" startIcon={<LanguageIcon color="textSubtle" width="24px" />}>
+        <Text color="textSubtle">{currentLang?.toUpperCase()}</Text>
+      </Button>
+    }
+  >
+    {langs.map((lang) => (
+      <MenuButton
+        key={lang.code}
+        fullWidth
+        onClick={() => setLang(lang)}
+        // Safari fix
+        style={{ minHeight: "32px", height: "auto" }}
+      >
+        {lang.language}
+      </MenuButton>
+    ))}
+  </Dropdown>
+);
+
+export default React.memo(LangSelector, (prev, next) => prev.currentLang === next.currentLang);
diff --git a/src/widgets/Menu/components/Logo.tsx b/src/widgets/Menu/components/Logo.tsx
index f9f53d576..d8fb6a570 100644
--- a/src/widgets/Menu/components/Logo.tsx
+++ b/src/widgets/Menu/components/Logo.tsx
@@ -62,4 +62,4 @@ const Logo: React.FC<Props> = ({ isPushed, togglePush, isDark, href }) => {
   );
 };
 
-export default Logo;
+export default React.memo(Logo, (prev, next) => prev.isPushed === next.isPushed && prev.isDark === next.isDark);
diff --git a/src/widgets/Menu/components/MenuEntry.tsx b/src/widgets/Menu/components/MenuEntry.tsx
index 537e5e8e8..e0b426ec5 100644
--- a/src/widgets/Menu/components/MenuEntry.tsx
+++ b/src/widgets/Menu/components/MenuEntry.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import styled, { keyframes, DefaultTheme } from "styled-components";
 import { MENU_ENTRY_HEIGHT } from "../config";
 
@@ -65,4 +66,7 @@ MenuEntry.defaultProps = {
   role: "button",
 };
 
-export { MenuEntry, LinkLabel };
+const MenuEntryMemo = React.memo(MenuEntry, () => true);
+const LinkLabelMemo = React.memo(LinkLabel, () => true);
+
+export { MenuEntryMemo as MenuEntry, LinkLabelMemo as LinkLabel };
diff --git a/src/widgets/Menu/components/MenuLink.tsx b/src/widgets/Menu/components/MenuLink.tsx
index 3db29953a..d08c37a97 100644
--- a/src/widgets/Menu/components/MenuLink.tsx
+++ b/src/widgets/Menu/components/MenuLink.tsx
@@ -10,4 +10,4 @@ const MenuLink: React.FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ href, ...
   return <Tag {...props} {...otherProps} />;
 };
 
-export default MenuLink;
+export default React.memo(MenuLink, () => true);
diff --git a/src/widgets/Menu/components/PanelFooter.tsx b/src/widgets/Menu/components/PanelFooter.tsx
index 09c6a9b85..98479afc1 100644
--- a/src/widgets/Menu/components/PanelFooter.tsx
+++ b/src/widgets/Menu/components/PanelFooter.tsx
@@ -1,23 +1,16 @@
 import React from "react";
 import styled from "styled-components";
-import { PancakeRoundIcon, CogIcon, SvgProps } from "../../../components/Svg";
-import Text from "../../../components/Text/Text";
-import Flex from "../../../components/Box/Flex";
-import Dropdown from "../../../components/Dropdown/Dropdown";
-import Link from "../../../components/Link/Link";
-import Skeleton from "../../../components/Skeleton/Skeleton";
-import Button from "../../../components/Button/Button";
+import { CogIcon } from "../../../components/Svg";
 import IconButton from "../../../components/Button/IconButton";
-import MenuButton from "./MenuButton";
-import * as IconModule from "../icons";
-import { socials, MENU_ENTRY_HEIGHT } from "../config";
+import { MENU_ENTRY_HEIGHT } from "../config";
 import { PanelProps, PushedProps } from "../types";
+import CakePrice from "./CakePrice";
+import ThemeSwitcher from "./ThemeSwitcher";
+import SocialLinks from "./SocialLinks";
+import LangSelector from "./LangSelector";
 
 interface Props extends PanelProps, PushedProps {}
 
-const Icons = (IconModule as unknown) as { [key: string]: React.FC<SvgProps> };
-const { MoonIcon, SunIcon, LanguageIcon } = Icons;
-
 const Container = styled.div`
   flex: none;
   padding: 8px 4px;
@@ -25,19 +18,6 @@ const Container = styled.div`
   border-top: solid 2px rgba(133, 133, 133, 0.1);
 `;
 
-const PriceLink = styled.a`
-  display: flex;
-  align-items: center;
-  svg {
-    transition: transform 0.3s;
-  }
-  :hover {
-    svg {
-      transform: scale(1.2);
-    }
-  }
-`;
-
 const SettingsEntry = styled.div`
   display: flex;
   align-items: center;
@@ -77,69 +57,12 @@ const PanelFooter: React.FC<Props> = ({
   return (
     <Container>
       <SocialEntry>
-        {cakePriceUsd ? (
-          <PriceLink href="https://pancakeswap.info/token/0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82" target="_blank">
-            <PancakeRoundIcon width="24px" mr="8px" />
-            <Text color="textSubtle" bold>{`$${cakePriceUsd.toFixed(3)}`}</Text>
-          </PriceLink>
-        ) : (
-          <Skeleton width={80} height={24} />
-        )}
-        <Flex>
-          {socials.map((social, index) => {
-            const Icon = Icons[social.icon];
-            const iconProps = { width: "24px", color: "textSubtle", style: { cursor: "pointer" } };
-            const mr = index < socials.length - 1 ? "24px" : 0;
-            if (social.items) {
-              return (
-                <Dropdown key={social.label} position="top" target={<Icon {...iconProps} mr={mr} />}>
-                  {social.items.map((item) => (
-                    <Link external key={item.label} href={item.href} aria-label={item.label} color="textSubtle">
-                      {item.label}
-                    </Link>
-                  ))}
-                </Dropdown>
-              );
-            }
-            return (
-              <Link external key={social.label} href={social.href} aria-label={social.label} mr={mr}>
-                <Icon {...iconProps} />
-              </Link>
-            );
-          })}
-        </Flex>
+        <CakePrice cakePriceUsd={cakePriceUsd} />
+        <SocialLinks />
       </SocialEntry>
       <SettingsEntry>
-        <Button variant="text" onClick={() => toggleTheme(!isDark)}>
-          {/* alignItems center is a Safari fix */}
-          <Flex alignItems="center">
-            <SunIcon color={isDark ? "textDisabled" : "text"} width="24px" />
-            <Text color="textDisabled" mx="4px">
-              /
-            </Text>
-            <MoonIcon color={isDark ? "text" : "textDisabled"} width="24px" />
-          </Flex>
-        </Button>
-        <Dropdown
-          position="top-right"
-          target={
-            <Button variant="text" startIcon={<LanguageIcon color="textSubtle" width="24px" />}>
-              <Text color="textSubtle">{currentLang?.toUpperCase()}</Text>
-            </Button>
-          }
-        >
-          {langs.map((lang) => (
-            <MenuButton
-              key={lang.code}
-              fullWidth
-              onClick={() => setLang(lang)}
-              // Safari fix
-              style={{ minHeight: "32px", height: "auto" }}
-            >
-              {lang.language}
-            </MenuButton>
-          ))}
-        </Dropdown>
+        <ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} />
+        <LangSelector currentLang={currentLang} langs={langs} setLang={setLang} />
       </SettingsEntry>
     </Container>
   );
diff --git a/src/widgets/Menu/components/SocialLinks.tsx b/src/widgets/Menu/components/SocialLinks.tsx
new file mode 100644
index 000000000..0306e3de4
--- /dev/null
+++ b/src/widgets/Menu/components/SocialLinks.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { SvgProps } from "../../../components/Svg";
+import Flex from "../../../components/Box/Flex";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import Link from "../../../components/Link/Link";
+import * as IconModule from "../icons";
+import { socials } from "../config";
+
+const Icons = (IconModule as unknown) as { [key: string]: React.FC<SvgProps> };
+
+const SocialLinks: React.FC = () => (
+  <Flex>
+    {socials.map((social, index) => {
+      const Icon = Icons[social.icon];
+      const iconProps = { width: "24px", color: "textSubtle", style: { cursor: "pointer" } };
+      const mr = index < socials.length - 1 ? "24px" : 0;
+      if (social.items) {
+        return (
+          <Dropdown key={social.label} position="top" target={<Icon {...iconProps} mr={mr} />}>
+            {social.items.map((item) => (
+              <Link external key={item.label} href={item.href} aria-label={item.label} color="textSubtle">
+                {item.label}
+              </Link>
+            ))}
+          </Dropdown>
+        );
+      }
+      return (
+        <Link external key={social.label} href={social.href} aria-label={social.label} mr={mr}>
+          <Icon {...iconProps} />
+        </Link>
+      );
+    })}
+  </Flex>
+);
+
+export default React.memo(SocialLinks, () => true);
diff --git a/src/widgets/Menu/components/ThemeSwitcher.tsx b/src/widgets/Menu/components/ThemeSwitcher.tsx
new file mode 100644
index 000000000..85a443c3f
--- /dev/null
+++ b/src/widgets/Menu/components/ThemeSwitcher.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { SvgProps } from "../../../components/Svg";
+import Text from "../../../components/Text/Text";
+import Flex from "../../../components/Box/Flex";
+import Button from "../../../components/Button/Button";
+import * as IconModule from "../icons";
+
+const Icons = (IconModule as unknown) as { [key: string]: React.FC<SvgProps> };
+const { MoonIcon, SunIcon } = Icons;
+
+interface Props {
+  isDark: boolean;
+  toggleTheme: (isDark: boolean) => void;
+}
+
+const ThemeSwitcher: React.FC<Props> = ({ isDark, toggleTheme }) => (
+  <Button variant="text" onClick={() => toggleTheme(!isDark)}>
+    {/* alignItems center is a Safari fix */}
+    <Flex alignItems="center">
+      <SunIcon color={isDark ? "textDisabled" : "text"} width="24px" />
+      <Text color="textDisabled" mx="4px">
+        /
+      </Text>
+      <MoonIcon color={isDark ? "text" : "textDisabled"} width="24px" />
+    </Flex>
+  </Button>
+);
+
+export default React.memo(ThemeSwitcher, (prev, next) => prev.isDark === next.isDark);
diff --git a/src/widgets/Menu/components/UserBlock.tsx b/src/widgets/Menu/components/UserBlock.tsx
index 6457a85a0..01f7e834f 100644
--- a/src/widgets/Menu/components/UserBlock.tsx
+++ b/src/widgets/Menu/components/UserBlock.tsx
@@ -38,4 +38,4 @@ const UserBlock: React.FC<Props> = ({ account, login, logout }) => {
   );
 };
 
-export default UserBlock;
+export default React.memo(UserBlock, (prevProps, nextProps) => prevProps.account === nextProps.account);
diff --git a/src/widgets/Menu/icons/Logo.tsx b/src/widgets/Menu/icons/Logo.tsx
index 6f5383e08..fb898e0e1 100644
--- a/src/widgets/Menu/icons/Logo.tsx
+++ b/src/widgets/Menu/icons/Logo.tsx
@@ -82,4 +82,4 @@ const Logo: React.FC<LogoProps> = ({ isDark, ...props }) => {
   );
 };
 
-export default Logo;
+export default React.memo(Logo, (prev, next) => prev.isDark === next.isDark);