diff --git a/packages/ui-kit/src/assets/svg/explore.svg b/packages/ui-kit/src/assets/svg/explore.svg
new file mode 100644
index 00000000..8a9cb253
--- /dev/null
+++ b/packages/ui-kit/src/assets/svg/explore.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16.2398 7.75999L14.1198 14.12L7.75977 16.24L9.87977 9.87999L16.2398 7.75999Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/ui-kit/src/assets/svg/markets.svg b/packages/ui-kit/src/assets/svg/markets.svg
new file mode 100644
index 00000000..397faf08
--- /dev/null
+++ b/packages/ui-kit/src/assets/svg/markets.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M18 20V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 20V4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 20V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/ui-kit/src/assets/svg/portfolio.svg b/packages/ui-kit/src/assets/svg/portfolio.svg
new file mode 100644
index 00000000..201a6da5
--- /dev/null
+++ b/packages/ui-kit/src/assets/svg/portfolio.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M21.2099 15.89C20.5737 17.3945 19.5787 18.7202 18.3118 19.7513C17.0449 20.7824 15.5447 21.4874 13.9424 21.8048C12.34 22.1221 10.6843 22.0421 9.12006 21.5718C7.55578 21.1015 6.13054 20.2551 4.96893 19.1067C3.80733 17.9582 2.94473 16.5428 2.45655 14.984C1.96837 13.4251 1.86948 11.7705 2.16851 10.1646C2.46755 8.55878 3.15541 7.05063 4.17196 5.77203C5.18851 4.49343 6.5028 3.48332 7.99992 2.83" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2V12H22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/ui-kit/src/assets/svg/superfeed.svg b/packages/ui-kit/src/assets/svg/superfeed.svg
new file mode 100644
index 00000000..8e8789c2
--- /dev/null
+++ b/packages/ui-kit/src/assets/svg/superfeed.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Icon" d="M18.8135 9.43959C16.9304 12.7029 15.0473 15.9661 13.1583 19.2294C12.7548 19.9312 12.9946 20.8318 13.7022 21.2353C14.404 21.6388 15.3046 21.3991 15.7081 20.6914C16.5093 19.3054 17.3047 17.9253 18.1059 16.5392C18.5094 15.8375 19.41 15.5918 20.1118 15.9954C20.8136 16.3989 21.0592 17.2995 20.6557 18.0013C20.0007 19.1358 19.3457 20.2704 18.6907 21.4107C19.6732 21.4107 21.8896 21.6213 22.8195 21.0891C23.9482 20.44 24.3342 19.0072 23.685 17.8785C22.0592 15.0655 20.4393 12.2467 18.8135 9.43374V9.43959ZM8.90673 20.6914C8.50321 21.3932 7.6026 21.6388 6.90082 21.2353C6.19904 20.8318 5.95342 19.9312 6.35694 19.2294C7.24001 17.6972 8.12308 16.165 9.012 14.6327C9.41552 13.931 9.17575 13.0304 8.46812 12.6268C7.76635 12.2233 6.86573 12.4631 6.46221 13.1707C4.88906 15.8901 3.32175 18.6153 1.7486 21.3347C0.742716 21.0657 0 20.1476 0 19.0539C0 18.5452 0.163749 18.0715 0.432764 17.6855C3.61416 12.1765 6.78385 6.67927 9.9594 1.17616C10.6085 0.047463 12.053 -0.332668 13.1759 0.316477C13.556 0.538707 13.8484 0.842807 14.0473 1.19954L17.1058 6.49797C14.3689 11.235 11.6203 15.9661 8.89504 20.6914H8.90673Z" fill="currentColor"/>
+</svg>
diff --git a/packages/ui-kit/src/mobile-components/navigation/NavBottom.tsx b/packages/ui-kit/src/mobile-components/navigation/NavBottom.tsx
index 25abf5a3..5fea1a0d 100644
--- a/packages/ui-kit/src/mobile-components/navigation/NavBottom.tsx
+++ b/packages/ui-kit/src/mobile-components/navigation/NavBottom.tsx
@@ -1,4 +1,7 @@
-import { ReactComponent as HomeSVG } from "src/assets/svg/home.svg";
+import { ReactComponent as ExploreSVG } from "src/assets/svg/explore.svg";
+import { ReactComponent as MarketsSVG } from "src/assets/svg/markets.svg";
+import { ReactComponent as PortfolioSVG } from "src/assets/svg/portfolio.svg";
+import { ReactComponent as SuperfeedSVG } from "src/assets/svg/superfeed.svg";
 import { twMerge } from "tailwind-merge";
 
 const navigation = [
@@ -7,67 +10,61 @@ const navigation = [
         href: "#",
         current: true,
         hasNew: true,
-        icon: <HomeSVG className="w-4 h-4 my-0.5" />,
+        icon: <SuperfeedSVG className="w-6 h-6 my-0.5" />,
     },
     {
-        name: "Portfolio",
-        href: "#",
-        current: false,
-        hasNew: true,
-
-        icon: <HomeSVG className="w-4 h-4 my-0.5" />,
-    },
-    {
-        name: "Events",
+        name: "Markets",
         href: "#",
         current: false,
         hasNew: false,
-        icon: <HomeSVG className="w-4 h-4 my-0.5" />,
+        icon: <MarketsSVG className="w-6 h-6 my-0.5" />,
     },
     {
-        name: "Settings",
+        name: "Portfolio",
         href: "#",
         current: false,
         hasNew: true,
-        icon: <HomeSVG className="w-4 h-4 my-0.5" />,
+
+        icon: <PortfolioSVG className="w-6 h-6 my-0.5" />,
     },
     {
-        name: "Places",
+        name: "Explore",
         href: "#",
         current: false,
         hasNew: false,
-        icon: <HomeSVG className="w-4 h-4 my-0.5" />,
+        icon: <ExploreSVG className="w-6 h-6 my-0.5" />,
     },
 ];
 
-const NavItem = ({ href, icon, current, hasNew }: (typeof navigation)[0]) => (
+const NavItem = ({ href, icon, current, name }: (typeof navigation)[0]) => (
     <a
         href={href}
-        className="inline-flex flex-col items-center justify-center px-5"
+        className="inline-flex flex-col items-center justify-center py-3 px-2"
     >
         <span
             className={twMerge(
-                "border border-gray-200 py-1 px-2 rounded-2xl relative",
-                current && "bg-black border-black"
+                "rounded-2xl relative text-primaryVariant100",
+                current &&
+                    "bg-background border-background fill-secondaryOrange text-secondaryOrange"
             )}
         >
             {icon}
-            {hasNew && (
-                <span
-                    className={twMerge(
-                        "w-2 h-2 bg-black border border-gray-200 rounded-full my-1 absolute -top-0.5 -right-0.5",
-                        current && "bg-gray-200 border-black"
-                    )}
-                />
+        </span>
+        <span
+            className={twMerge(
+                "capitalize text-primaryVariant100 mt-1 fontGroup-highlightSemi",
+                current && "text-primary"
             )}
+        >
+            {name}
         </span>
     </a>
 );
 
 export const NavBottom = () => {
     return (
-        <div className="fixed bottom-0 left-0 z-50 w-full h-16 border-t bg-gray-700 border-gray-600">
-            <div className="grid h-full max-w-lg grid-cols-5 mx-auto">
+        <div className="fixed bottom-0 left-0 z-50 w-full border-t bg-background border-borderLine">
+            <div className="grid h-full max-w-lg grid-cols-4 mx-auto">
                 {navigation.map((item) => (
                     <NavItem key={item.name} {...item} />
                 ))}