diff --git a/components/Elevation/Elevation.tsx b/components/Elevation/Elevation.tsx
index 0d664582..8631c9c5 100644
--- a/components/Elevation/Elevation.tsx
+++ b/components/Elevation/Elevation.tsx
@@ -1,6 +1,8 @@
-import { styled } from '../../stitches.config';
+import { styled, CSS } from '../../stitches.config';
 
-export const elevationVariant = {
+type ElevationVariant = Record<number, CSS>;
+
+export const elevationVariant: ElevationVariant = {
   0: {
     boxShadow: 'none',
   },
diff --git a/components/Navigation/Navigation.themes.ts b/components/Navigation/Navigation.themes.ts
index 6b0a7090..a9baa775 100644
--- a/components/Navigation/Navigation.themes.ts
+++ b/components/Navigation/Navigation.themes.ts
@@ -3,7 +3,6 @@ import { Property } from '@stitches/react/types/css';
 import { ColorInfo } from '../../utils/getPrimaryColorInfo';
 export namespace Theme {
   type Colors = {
-    navBg: Property.Color;
     navButtonBg: Property.Color;
     navButtonHoverBg: Property.Color;
     navButtonHoverBg2: Property.Color;
@@ -19,7 +18,6 @@ export namespace Theme {
   type Factory = (primaryColor: ColorInfo) => Colors;
 
   export const getLight: Factory = (primaryColor) => ({
-    navBg: 'white',
     navButtonBg: 'transparent',
     navButtonHoverBg: tinycolor('black').setAlpha(0.04).toHslString(),
     navButtonHoverBg2: 'transparent',
@@ -35,7 +33,6 @@ export namespace Theme {
   });
 
   export const getDark: Factory = (primaryColor) => ({
-    navBg: '$deepBlue2',
     navButtonBg: 'transparent',
     navButtonHoverBg: tinycolor('white').setAlpha(0.05).toHslString(),
     navButtonHoverBg2: '$primary',
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index 428534f2..20a307c6 100644
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import React, { useMemo, ReactNode } from 'react';
 import { styled, css, VariantProps } from '../../stitches.config';
 import { elevationVariant } from '../Elevation';
 import { Flex } from '../Flex';
@@ -110,19 +110,19 @@ export const NavigationContainer = styled('div', {
 export type NavigationContainerVariants = VariantProps<typeof NavigationContainer>;
 export type NavigationContainerProps = NavigationContainerVariants & {};
 
+const elevation = Object.keys(elevationVariant).map((elevationKey) => ({
+  ...elevationVariant[Number(elevationKey)],
+  bc: `$${Number(elevationKey) < 10 ? '0' : ''}${elevationKey}dp`,
+})) as any;
+
 export const NavigationDrawer = styled('nav', {
   display: 'flex',
   boxSizing: 'border-box',
   padding: '$3',
-  backgroundColor: '$navBg',
   maxWidth: '240px',
   flexDirection: 'column',
-
   variants: {
-    elevation: Object.keys(elevationVariant).map((_, index) => ({
-      ...elevationVariant[index],
-      bc: `$${index < 10 ? '0' : ''}${index}dp`,
-    })) as any,
+    elevation,
   },
   defaultVariants: {
     elevation: 1,
@@ -144,9 +144,9 @@ type StyledButtonVariants = VariantProps<typeof StyledButton>;
 
 export type NavigationItemProps = {
   as?: 'button' | 'a';
-  startAdornment?: React.ReactNode;
-  endAdornment?: React.ReactNode;
-  children: React.ReactNode;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  children: ReactNode;
   href?: string;
 } & StyledLinkVariants &
   StyledButtonVariants;
diff --git a/index.ts b/index.ts
index bbda34b4..035cdc7b 100644
--- a/index.ts
+++ b/index.ts
@@ -53,6 +53,12 @@ export { Link } from './components/Link';
 //   MenuRadioItem,
 //   MenuSeparator,
 // } from './components/Menu';
+export {
+  NavigationContainer,
+  NavigationDrawer,
+  NavigationItem,
+  NavigationLink,
+} from './components/Navigation';
 export { Overlay } from './components/Overlay';
 // export { Paragraph } from './components/Paragraph';
 // export { Panel } from './components/Panel';