diff --git a/package.json b/package.json
index 50a7b7e..a031402 100644
--- a/package.json
+++ b/package.json
@@ -40,11 +40,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@inubekit/stack": "^1.1.0",
-    "@inubekit/text": "^1.3.0",
+    "@inubekit/foundations": "^2.12.1",
     "@inubekit/grid": "^2.0.0",
-    "@inubekit/icon": "^1.1.0",
-    "@inubekit/foundations": "^1.1.2"
+    "@inubekit/icon": "^1.5.0",
+    "@inubekit/stack": "^2.1.1",
+    "@inubekit/text": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
diff --git a/src/Nav/index.tsx b/src/Nav/index.tsx
index 430eed3..db08066 100644
--- a/src/Nav/index.tsx
+++ b/src/Nav/index.tsx
@@ -1,32 +1,16 @@
 import { useLocation } from "react-router-dom";
 import { MdLogout } from "react-icons/md";
 
-import { Text } from "@inubekit/text";
+import { ITextAppearance, Text } from "@inubekit/text";
 import { Stack } from "@inubekit/stack";
+import { inube } from "@inubekit/foundations";
 
 import { StyledNav, StyledFooter, SeparatorLine } from "./styles";
 import { NavLink } from "../NavLink";
+import { ILink, INavNavigation } from "./props";
 
-interface INavLink {
-  section: ILink[];
-}
-
-interface ILink {
-  id: string;
-  label: string;
-  icon: React.ReactNode;
-  path: string;
-}
-
-interface INavSection {
-  name: string;
-  links: { [key: string]: ILink };
-}
-
-interface INavNavigation {
-  title: string;
-  sections: { [key: string]: INavSection };
-}
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
 
 interface INav {
   navigation: INavNavigation;
@@ -34,6 +18,10 @@ interface INav {
   logoutTitle: string;
 }
 
+interface INavLink {
+  section: ILink[];
+}
+
 const year = new Date().getFullYear();
 
 const Links = (props: INavLink) => {
@@ -57,6 +45,10 @@ const Links = (props: INavLink) => {
 
 const MultiSections = ({ navigation }: INav) => {
   const sections = Object.keys(navigation.sections);
+  const theme: typeof inube = useContext(ThemeContext);
+  const navTitleAppearance =
+    (theme?.nav?.title?.appearance as ITextAppearance) ||
+    inube.nav.title.appearance;
 
   return (
     <Stack direction="column">
@@ -69,7 +61,7 @@ const MultiSections = ({ navigation }: INav) => {
           <Text
             padding="16px"
             as="h2"
-            appearance="gray"
+            appearance={navTitleAppearance}
             type="title"
             size="small"
             textAlign="start"
@@ -101,7 +93,13 @@ const OneSection = ({ navigation }: INav) => {
 
 const Nav = (props: INav) => {
   const { navigation, logoutTitle, logoutPath } = props;
-
+  const theme: typeof inube = useContext(ThemeContext);
+  const navSubtitleAppearance =
+    (theme?.nav?.subtitle?.appearance?.regular as ITextAppearance) ||
+    inube.nav.subtitle.appearance.regular;
+  const navCopyrightAppearance =
+    (theme?.nav?.copyright?.appearance as ITextAppearance) ||
+    inube.nav.copyright.appearance;
   return (
     <StyledNav>
       <Stack direction="column" justifyContent="space-between" height="100dvh">
@@ -109,7 +107,7 @@ const Nav = (props: INav) => {
           <Text
             padding="32px 16px 16px 16px"
             as="h2"
-            appearance="gray"
+            appearance={navSubtitleAppearance}
             type="title"
             size="small"
             textAlign="start"
@@ -142,7 +140,7 @@ const Nav = (props: INav) => {
             <Text
               type="label"
               size="medium"
-              appearance="gray"
+              appearance={navCopyrightAppearance}
               padding="24px"
               textAlign="start"
             >
@@ -156,4 +154,4 @@ const Nav = (props: INav) => {
 };
 
 export { Nav };
-export type { INav, INavLink, ILink, INavSection, INavNavigation };
+export type { INav };
diff --git a/src/Nav/props.ts b/src/Nav/props.ts
index 49c4e9c..c339b1f 100644
--- a/src/Nav/props.ts
+++ b/src/Nav/props.ts
@@ -1,3 +1,20 @@
+interface ILink {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  path: string;
+}
+
+interface INavSection {
+  name: string;
+  links: { [key: string]: ILink };
+}
+
+interface INavNavigation {
+  title: string;
+  sections: { [key: string]: INavSection };
+}
+
 const parameters = {
   layout: "fullscreen",
   docs: {
@@ -20,3 +37,4 @@ const props = {
 };
 
 export { parameters, props };
+export type { ILink, INavSection, INavNavigation };
diff --git a/src/Nav/stories/Nav.WithoutSections.stories.tsx b/src/Nav/stories/Nav.WithoutSections.stories.tsx
deleted file mode 100644
index af9b53d..0000000
--- a/src/Nav/stories/Nav.WithoutSections.stories.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { BrowserRouter } from "react-router-dom";
-import {
-  MdKey,
-  MdMeetingRoom,
-  MdPhone,
-  MdBadge,
-  MdStarBorder,
-  MdAccountBalance,
-  MdAccountBalanceWallet,
-} from "react-icons/md";
-
-import { Nav, INav } from "..";
-
-import { props } from "../props";
-
-const story = {
-  title: "navigation/Nav",
-  components: Nav,
-  argTypes: props,
-  decorators: [
-    (Story: React.ElementType) => (
-      <BrowserRouter>
-        <Story />
-      </BrowserRouter>
-    ),
-  ],
-};
-
-const WithoutSections = (args: INav) => <Nav {...args} />;
-
-WithoutSections.args = {
-  navigation: {
-    title: "MENU",
-    sections: {
-      administrate: {
-        name: "Administrate",
-        links: {
-          privileges: {
-            id: "privileges",
-            label: "Privileges",
-            icon: <MdKey />,
-            path: "/privileges",
-          },
-          accounting: {
-            id: "accounting",
-            label: "Accounting",
-            icon: <MdMeetingRoom />,
-            path: "/accounting",
-          },
-          contacts: {
-            id: "contacts",
-            label: "Contacts",
-            icon: <MdPhone />,
-            path: "/contacts",
-          },
-          documents: {
-            id: "documents",
-            label: "Documents",
-            icon: <MdBadge />,
-            path: "/documents",
-          },
-          marketing: {
-            id: "marketing",
-            label: "Marketing",
-            icon: <MdStarBorder />,
-            path: "/marketing",
-          },
-          savings: {
-            id: "savings",
-            label: "Savings",
-            icon: <MdAccountBalanceWallet />,
-            path: "/savings",
-          },
-          credit: {
-            id: "credit",
-            label: "Credit",
-            icon: <MdAccountBalance />,
-            path: "/credit",
-          },
-        },
-      },
-    },
-  },
-  logoutPath: "/logout",
-  logoutTitle: "logout",
-};
-
-export { WithoutSections };
-export default story;
diff --git a/src/Nav/styles.js b/src/Nav/styles.js
index e2c0939..832ec0a 100644
--- a/src/Nav/styles.js
+++ b/src/Nav/styles.js
@@ -5,11 +5,9 @@ const StyledNav = styled.div`
   width: 248px;
   box-sizing: border-box;
   background-color: ${({ theme }) =>
-    theme?.color?.surface?.nav?.regular || inube.color.surface.nav.regular};
+    theme?.nav?.background?.color || inube.nav.background.color};
   border-right: 1px solid
-    ${({ theme }) =>
-      theme?.color?.stroke?.divider?.regular ||
-      inube.color.stroke.divider.regular};
+    ${({ theme }) => theme?.nav?.divider?.color || inube.nav.divider.color};
 `;
 
 const StyledFooter = styled.footer`
@@ -18,15 +16,11 @@ const StyledFooter = styled.footer`
 
 const SeparatorLine = styled.div`
   width: calc(100% - 32px);
-  margin: ${({ theme }) =>
-    `${theme?.spacing?.s100 || inube.spacing.s100} ${
-      theme?.spacing?.s200 || inube.spacing.s200
-    }`};
+  margin: 8px 16px;
   height: 1px;
-  padding: ${({ theme }) => theme?.spacing?.s0 || inube.spacing.s0};
+  padding: 0px;
   background-color: ${({ theme }) =>
-    theme?.color?.stroke?.divider?.regular ||
-    inube.color.stroke.divider.regular};
+    theme?.nav?.divider?.color || inube.nav.divider.color};
 `;
 
 export { StyledNav, StyledFooter, SeparatorLine };
diff --git a/src/NavLink/index.tsx b/src/NavLink/index.tsx
index 965d7e2..674e22a 100644
--- a/src/NavLink/index.tsx
+++ b/src/NavLink/index.tsx
@@ -1,9 +1,12 @@
 import { MdKeyboardArrowRight } from "react-icons/md";
-import { Icon } from "@inubekit/icon";
+import { IIconAppearance, Icon } from "@inubekit/icon";
 import { Text } from "@inubekit/text";
 import { Grid } from "@inubekit/grid";
 
 import { StyledLink, StyledNavList } from "./styles";
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { inube } from "@inubekit/foundations";
 
 interface INavLink {
   id: string;
@@ -26,11 +29,19 @@ const NavLink = (props: INavLink) => {
     onClick,
   } = props;
 
+  const theme: typeof inube = useContext(ThemeContext);
+
+  const selectedNavLinkAppearance =
+    (theme?.nav?.link?.appearance?.selected as IIconAppearance) ||
+    inube.nav.link.appearance.selected;
+  const regularNavLinkAppearance =
+    (theme?.nav?.link?.appearance?.regular as IIconAppearance) ||
+    inube.nav.link.appearance.regular;
   return (
     <StyledNavList
       id={id}
       disabled={disabled}
-      selected={selected}
+      appearance={selected ? selectedNavLinkAppearance : undefined}
       onClick={onClick}
     >
       <StyledLink to={path} disabled={+disabled}>
@@ -43,19 +54,30 @@ const NavLink = (props: INavLink) => {
           {icon && (
             <Icon
               icon={icon}
-              appearance={selected ? "primary" : "dark"}
+              appearance={
+                selected ? selectedNavLinkAppearance : regularNavLinkAppearance
+              }
               disabled={disabled}
               size="24px"
               parentHover={!disabled && true}
             />
           )}
-          <Text type="label" disabled={disabled} textAlign="start">
+          <Text
+            appearance={
+              selected ? selectedNavLinkAppearance : regularNavLinkAppearance
+            }
+            type="label"
+            disabled={disabled}
+            textAlign="start"
+          >
             {label}
           </Text>
           {!disabled && selected && (
             <Icon
               icon={<MdKeyboardArrowRight />}
-              appearance="dark"
+              appearance={
+                selected ? selectedNavLinkAppearance : regularNavLinkAppearance
+              }
               size="24px"
               parentHover={!disabled && true}
             />
diff --git a/src/NavLink/styles.js b/src/NavLink/styles.js
index 6f3c0cf..7ff6d52 100644
--- a/src/NavLink/styles.js
+++ b/src/NavLink/styles.js
@@ -11,31 +11,28 @@ const StyledNavList = styled.li`
   min-width: 180px;
   min-height: 40px;
   box-sizing: border-box;
-  border-left: ${({ disabled, selected, theme }) => {
-    if (selected && !disabled) {
+  border-left: ${({ appearance, disabled, theme }) => {
+    if (appearance && !disabled) {
       return `5px solid ${
-        theme?.color?.stroke?.dark?.regular || inube.color.stroke.dark.regular
+        theme?.nav?.[appearance]?.content?.color?.regular ||
+        inube.text[appearance].content.color.regular
       }`;
     }
-    return `0px`;
+    return `5px solid transparent`;
   }};
   background-color: ${({ selected, disabled, theme }) => {
     if (disabled) {
       return (
-        theme?.color?.surface?.navLink?.regular ||
-        inube.color.surface.navLink.regular
+        theme?.nav?.link?.background?.selected ||
+        inube.nav.link.background.selected
       );
     }
     if (selected && !disabled) {
       return (
-        theme?.color?.surface?.navLink?.selected ||
-        inube.color.surface.navLink.selected
+        theme?.nav?.link?.background?.selected ||
+        inube.nav.link.background.selected
       );
     }
-    return (
-      theme?.color?.surface?.navLink?.regular ||
-      inube.color.surface.navLink.regular
-    );
   }};
 
   ${({ disabled, theme }) =>
@@ -43,8 +40,7 @@ const StyledNavList = styled.li`
     `
       &:hover {
         background-color: ${
-          theme?.color?.surface?.navLink?.hover ||
-          inube.color.surface.navLink.hover
+          theme?.nav?.link?.background?.hover || inube.nav.link.background.hover
         };     
       }
   `};
diff --git a/src/index.ts b/src/index.ts
index 3b82e77..6e1879b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 export { Nav } from "./Nav";
 export { NavLink } from "./NavLink";
-export type { INav, ILink, INavSection, INavNavigation } from "./Nav";
+export type { INav } from "./Nav";
 export type { INavLink } from "./NavLink";
+export type { ILink, INavSection, INavNavigation } from "./Nav/props";