diff --git a/src/components/AutoComplete/AutoComplete.stories.tsx b/src/components/AutoComplete/AutoComplete.stories.tsx
index bd975bf..535b4b0 100644
--- a/src/components/AutoComplete/AutoComplete.stories.tsx
+++ b/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -29,6 +29,7 @@ export const Single: Story<SingleAutoComplete<string>> = () => {
       value={value}
       displayValue={(e) => e as string}
       onChange={(e: string) => update(e)}
+      hint="Select an alter ego"
     />
   );
 };
diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx
index 7b0e50b..cc2f480 100644
--- a/src/components/AutoComplete/AutoComplete.tsx
+++ b/src/components/AutoComplete/AutoComplete.tsx
@@ -12,6 +12,8 @@ import { lightText } from '../../helpers/color';
 import { Skeleton } from '../Loading';
 
 export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State<T>> {
+  dataActualLength = 0;
+
   constructor(props) {
     super(props);
 
@@ -20,6 +22,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
       data: [],
       open: false,
       loading: false,
+      selected: -1,
     };
   }
 
@@ -41,6 +44,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
       items = await items;
       this.setState({ loading: false });
     }
+    this.dataActualLength = items.length;
     this.setState({ data: items });
   };
 
@@ -48,26 +52,35 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
     if (this.props.disabled) {
       return;
     }
+    if (!open) {
+      return this.setState({ open, selected: -1, search: '' });
+    }
     open && this.fetchData();
     this.setState({ open });
   };
 
   displayList = () => {
-    const { data, search, loading } = this.state;
+    const { data, search, loading, selected } = this.state;
     const { listDisplayProp, uniqueIdentifier, searchValue } = this.props;
 
+    const filteredData = data?.filter((v) => searchValue(v).toLowerCase().includes(search.toLowerCase()));
+
+    this.dataActualLength = filteredData.length;
+
     return (
       <Skeleton
         isLoading={loading}
         render={() => (
-          <List style={{ maxHeight: '300px', overflowY: 'auto' }}>
-            {data
-              .filter((v) => searchValue(v).toLowerCase().includes(search))
-              .map((v) => (
-                <ListItem key={uniqueIdentifier(v)} selected={this.isItemSelected(v)} onClick={() => this.onChange(v)}>
-                  {listDisplayProp(v)}
-                </ListItem>
-              ))}
+          <List densed style={{ maxHeight: '300px', overflowY: 'auto' }}>
+            {filteredData?.map((v, i) => (
+              <ListItem
+                key={uniqueIdentifier(v)}
+                selected={this.isItemSelected(v) || selected === i}
+                onClick={() => this.onChange(v)}
+              >
+                {listDisplayProp(v)}
+              </ListItem>
+            ))}
           </List>
         )}
       />
@@ -166,7 +179,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
     this.setState({ search }, this.fetchData);
   };
 
-  onChange = (selected: AutoCompleteProps<T>['value']) => {
+  onChange = (selected: T) => {
     const { mode, value, onChange, uniqueIdentifier } = this.props;
     if (mode === 'single') {
       onChange(selected as never);
@@ -185,13 +198,37 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
     this.setState({ search: '' });
   };
 
-  onKeyUp = (e: React.KeyboardEvent) => {
-    switch (e.which) {
-      case 27: {
-        return this.onOpen(false);
+  onKeyDown = (e: React.KeyboardEvent) => {
+    const { data, selected, open } = this.state;
+    switch (e.key) {
+      case 'ArrowDown': {
+        if (!open) {
+          return this.onOpen(true);
+        }
+
+        if (selected === this.dataActualLength - 1) {
+          return this.setState({ selected: -1 });
+        }
+
+        return this.setState({ selected: selected + 1 });
       }
-      case 9: {
-        return this.onOpen(true);
+      case 'ArrowUp': {
+        if (!open) {
+          return this.onOpen(true);
+        }
+
+        if (selected === -1) {
+          return this.setState({ selected: this.dataActualLength - 1 });
+        }
+
+        return this.setState({ selected: selected - 1 });
+      }
+      case 'Enter': {
+        if (selected === -1) {
+          return;
+        }
+
+        return this.onChange(data[selected]);
       }
     }
   };
@@ -209,7 +246,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
       value: this.displayValue(),
       before: this.renderBefore(),
       onChange: (e) => this.onSearch(e.target.value),
-      onKeyUp: this.onKeyUp,
+      onKeyDown: this.onKeyDown,
       required,
       disabled: this.props.disabled,
     });
@@ -269,4 +306,5 @@ interface State<T> {
   data: T[];
   open: boolean;
   loading: boolean;
+  selected: number;
 }
diff --git a/src/components/Breadcrumb/Breadcrumb.stories.tsx b/src/components/Breadcrumb/Breadcrumb.stories.tsx
index b01dacd..5a16844 100644
--- a/src/components/Breadcrumb/Breadcrumb.stories.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -3,7 +3,8 @@ import { Story, Meta } from '@storybook/react';
 
 import { MdHome, MdNavigateNext } from 'react-icons/md';
 import { Breadcrumb, BreadcrumbProps } from './Breadcrumb';
-import { MenuItemGroup, MenuItem } from '../Menu';
+import { MenuItem, Menu } from '../Menu';
+import { Button } from '../Button';
 
 export default {
   title: 'Navigation/Breadcrumb',
@@ -27,8 +28,8 @@ Icons.args = {
   paths: [() => <a href="#">Home</a>, () => <a href="#">Breadcrumb</a>],
 };
 
-export const Menu = Template.bind({});
-Menu.args = {
+export const WithMenu = Template.bind({});
+WithMenu.args = {
   seperator: '>',
   paths: [
     () => (
@@ -37,9 +38,9 @@ Menu.args = {
       </a>
     ),
     () => (
-      <MenuItemGroup title="hello" inline={false}>
-        <MenuItem name="1">Option 1</MenuItem>
-      </MenuItemGroup>
+      <Menu anchor={<Button flat>Options</Button>}>
+        <MenuItem>Option 1</MenuItem>
+      </Menu>
     ),
   ],
 };
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 8dfe393..7fed818 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -17,16 +17,16 @@ export default {
 const BlockTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
   <>
     <Button {...args}>Default</Button>
-    <Button {...args} type="primary">
+    <Button {...args} primary>
       Primary
     </Button>
-    <Button {...args} type="secondary">
+    <Button {...args} secondary>
       Secondary
     </Button>
-    <Button {...args} type="danger">
+    <Button {...args} danger>
       Danger
     </Button>
-    <Button {...args} type="link">
+    <Button {...args} link>
       Link
     </Button>
   </>
@@ -35,16 +35,16 @@ const BlockTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
 const MixedTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
   <>
     <Button {...args}>Default</Button>
-    <Button {...args} type="primary">
+    <Button {...args} primary>
       Primary
     </Button>
-    <Button {...args} outline type="secondary">
+    <Button {...args} outline secondary>
       Secondary
     </Button>
-    <Button {...args} flat type="danger">
+    <Button {...args} flat danger>
       Danger
     </Button>
-    <Button {...args} type="link">
+    <Button {...args} link>
       Link
     </Button>
   </>
@@ -53,11 +53,11 @@ const MixedTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
 const CircleTemplate: Story<AnchorButtonProps & NativeButtonProps> = (args) => (
   <>
     <Button {...args} shape="circle" />
-    <Button {...args} type="primary" shape="circle" />
-    <Button {...args} type="secondary" outline shape="circle" />
-    <Button {...args} type="secondary" flat shape="circle" />
-    <Button {...args} type="danger" disabled shape="circle" />
-    <Button {...args} type="link" shape="circle" />
+    <Button {...args} primary shape="circle" />
+    <Button {...args} secondary outline shape="circle" />
+    <Button {...args} secondary flat shape="circle" />
+    <Button {...args} danger disabled shape="circle" />
+    <Button {...args} link shape="circle" />
   </>
 );
 
@@ -98,11 +98,16 @@ Loading.args = {
   loading: true,
 };
 
+export const Size = MixedTemplate.bind({});
+Size.args = {
+  size: 'big',
+};
+
 export const Group = () => (
   <ButtonGroup>
     <Button>Default</Button>
-    <Button type="primary">Primary</Button>
-    <Button type="secondary">Secondary</Button>
-    <Button type="danger">Danger</Button>
+    <Button primary>Primary</Button>
+    <Button secondary>Secondary</Button>
+    <Button danger>Danger</Button>
   </ButtonGroup>
 );
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b2e7f21..246a7ec 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { stylesheet, classes } from 'typestyle';
-import { removeObjectProperties } from '../../helpers';
 import { Theme, ThemeConsumer } from '../Theme/Theme';
 import { buttonColor } from '../../helpers/color';
 import { Loading } from '../Loading';
@@ -8,7 +7,6 @@ import { Text } from '../Text';
 
 export const Button: React.FunctionComponent<ButtonProps> = (props) => {
   const {
-    type,
     size: __size,
     shape: __shape,
     displayBlock: __displayBlock,
@@ -19,6 +17,10 @@ export const Button: React.FunctionComponent<ButtonProps> = (props) => {
     component,
     onClick,
     outline: __outline,
+    primary,
+    secondary,
+    danger,
+    link,
     ...rest
   } = props;
 
@@ -28,15 +30,14 @@ export const Button: React.FunctionComponent<ButtonProps> = (props) => {
     if (component) {
       return React.cloneElement(props.component, p);
     }
-    if (rest.href !== undefined || type === 'link') {
+    if (rest.href !== undefined || link) {
       return React.cloneElement(<a {...(p as React.AnchorHTMLAttributes<HTMLAnchorElement>)} />);
     }
 
     return React.cloneElement(<button {...(p as React.ButtonHTMLAttributes<HTMLButtonElement>)} />);
   };
 
-  const linkButtonRestProps = removeObjectProperties(rest as AnchorButtonProps, 'type');
-  if (rest.href !== undefined || type === 'link') {
+  if (rest.href !== undefined || link) {
     return (
       <ThemeConsumer>
         {(theme) => {
@@ -45,11 +46,11 @@ export const Button: React.FunctionComponent<ButtonProps> = (props) => {
             <BaseElement
               className={classes(css.anchor, css.default, className)}
               onClick={(e) => !loading && onClick && onClick(e)}
-              {...linkButtonRestProps}
+              {...rest}
             >
               {icon}
               <Loading
-                color={buttonColor(props, theme)[1]}
+                color={buttonColor(props, theme, primary, secondary, danger, link)[1]}
                 isLoading={loading}
                 size="small"
                 render={() => <span>{props.children}</span>}
@@ -75,7 +76,7 @@ export const Button: React.FunctionComponent<ButtonProps> = (props) => {
             {icon}
             <Loading
               style={{ margin: '0' }}
-              color={buttonColor(props, theme)[1]}
+              color={buttonColor(props, theme, primary, secondary, danger, link)[1]}
               isLoading={loading}
               size="small"
               render={() => <span>{props.children}</span>}
@@ -89,7 +90,6 @@ export const Button: React.FunctionComponent<ButtonProps> = (props) => {
 };
 
 Button.defaultProps = {
-  type: 'default',
   size: 'default',
   shape: 'default',
 };
@@ -111,6 +111,15 @@ function getSize(size: sizeTypes, shape: shapeTypes, block: boolean, flat: boole
         height: '40px',
         fontSize: '16px',
       };
+      break;
+    }
+    case 'small': {
+      buttonStyles = {
+        ...buttonStyles,
+        padding: `0 ${flat ? 5 : 20}px`,
+        height: '30px',
+        fontSize: '12px',
+      };
     }
   }
   if (shape === 'circle') {
@@ -123,9 +132,9 @@ function getSize(size: sizeTypes, shape: shapeTypes, block: boolean, flat: boole
 }
 
 export function style(props: ButtonProps, theme: Theme) {
-  const { disabled, children } = props;
+  const { disabled, children, primary, secondary, danger, link } = props;
 
-  const [bgColor, textColor, hoverBgColor, border] = buttonColor(props, theme);
+  const [bgColor, textColor, hoverBgColor, border] = buttonColor(props, theme, primary, secondary, danger, link);
 
   return stylesheet({
     default: {
@@ -143,6 +152,7 @@ export function style(props: ButtonProps, theme: Theme) {
       justifyContent: 'center',
       background: bgColor,
       whiteSpace: 'nowrap',
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
       $nest: {
         '&:focus': {
           outline: 'none',
@@ -172,10 +182,12 @@ export function style(props: ButtonProps, theme: Theme) {
       textAlign: 'center',
       color: textColor,
       $nest: {
-        '&:hover': !disabled && {
-          background: hoverBgColor,
-          color: textColor,
-        },
+        '&:hover':
+          (!disabled && {
+            background: hoverBgColor,
+            color: textColor,
+          }) ||
+          undefined,
       },
     },
     anchor: {
@@ -191,11 +203,15 @@ export function style(props: ButtonProps, theme: Theme) {
   });
 }
 
-declare type sizeTypes = 'default' | 'big';
+declare type sizeTypes = 'default' | 'big' | 'small';
 declare type shapeTypes = 'default' | 'circle';
 
 export interface BaseButtonProps {
-  type?: 'default' | 'primary' | 'secondary' | 'danger' | 'link';
+  primary?: boolean;
+  secondary?: boolean;
+  danger?: boolean;
+  link?: boolean;
+
   size?: sizeTypes;
   shape?: shapeTypes;
   className?: string;
@@ -226,7 +242,3 @@ export type NativeButtonProps = {
   React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export type ButtonProps = AnchorButtonProps | NativeButtonProps;
-
-interface State {
-  theme: Theme;
-}
diff --git a/src/components/Calendar/Calendar.stories.tsx b/src/components/Calendar/Calendar.stories.tsx
index e0d7067..249626f 100644
--- a/src/components/Calendar/Calendar.stories.tsx
+++ b/src/components/Calendar/Calendar.stories.tsx
@@ -20,7 +20,7 @@ export const CellAppend = Template.bind({});
 CellAppend.args = {
   cellRender: ([__year, __month, day], week: weeksEnum) => {
     if (week === weeksEnum.SUNDAY) {
-      return <div style={{ background: 'red', color: 'white' }}>{day}</div>;
+      return <div style={{ background: 'red', color: 'white', width: '100%' }}>{day}</div>;
     }
   },
 };
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index 75cd31e..c9c211c 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { stylesheet, style as typeStyle, classes } from 'typestyle';
+import { stylesheet } from 'typestyle';
 import { getDate, getMonth, getDay, getDaysInMonth, getYear, compareDesc } from 'date-fns';
-import { nestedAccess, arrayBetween, getColor } from './../../helpers';
-import { disabledColor } from '../../helpers/color';
-import { AutoComplete } from '../AutoComplete';
+import { nestedAccess, arrayBetween } from './../../helpers';
 import { Row, Col } from './../../index';
 import { Card, CardBody } from '../Card';
 import { color } from 'csx';
-import RCTooltip from 'rc-tooltip';
-import { ThemeConsumer, Theme } from '../Theme/Theme';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+import { Text } from '../Text';
+import { Menu, MenuItem } from '../Menu';
 
 export class Calendar extends React.Component<CalendarProps, State> {
   static defaultProps = {
     date: new Date(),
-    cellRender: ([, , date]) => date,
     disabledDate: () => false,
     elevation: 0,
   };
@@ -28,6 +27,9 @@ export class Calendar extends React.Component<CalendarProps, State> {
   }
 
   initialDate = (date = this.props.date) => {
+    if (!date) {
+      return [getYear(new Date()), getMonth(new Date()), getDate(new Date())] as DateTupple;
+    }
     if (Array.isArray(date)) {
       return date;
     }
@@ -36,10 +38,10 @@ export class Calendar extends React.Component<CalendarProps, State> {
 
   dateObj = (dateTupple = this.props.date) => {
     const [year, month, date] = this.initialDate(dateTupple);
-    const dateObj = [];
+    const dateObj: Record<weeksEnum, number>[] = [];
     let monthStart = 1;
     for (let i = 0; i < 6; i++) {
-      const obj = {};
+      const obj: Record<weeksEnum, number> = {} as Record<weeksEnum, number>;
       for (let j = getDay(new Date(year, month, monthStart)); j < 7; j++) {
         if (monthStart > getDaysInMonth(new Date(year, month, date))) {
           break;
@@ -52,16 +54,14 @@ export class Calendar extends React.Component<CalendarProps, State> {
     return dateObj;
   };
 
-  todayStyle = (date: number, primaryColor: string): React.CSSProperties => {
+  today = (date: number): boolean => {
     const {
       date: [year, month],
     } = this.state;
     if (getYear(new Date()) === year && getMonth(new Date()) === month && getDate(new Date()) === date) {
-      return {
-        borderBottom: '2px solid ' + primaryColor,
-      };
+      return true;
     }
-    return {};
+    return false;
   };
 
   monthChange = (month: string) => {
@@ -80,12 +80,10 @@ export class Calendar extends React.Component<CalendarProps, State> {
     if (!day) {
       return;
     }
-
     const { callendarEvents } = this.props;
     const {
       date: [year, month, __],
     } = this.state;
-
     if (!callendarEvents) {
       return;
     }
@@ -96,7 +94,7 @@ export class Calendar extends React.Component<CalendarProps, State> {
       const [startDate, endDate] = [this.initialDate(v.startDate), this.initialDate(v.endDate)];
       if (day === startDate[2] && month === startDate[1] && year === startDate[0]) {
         return (
-          <RCTooltip placement="top" trigger={['hover']} overlay={v.eventName}>
+          <Tooltip placement="top" trigger={['hover']} overlay={v.eventName}>
             <div
               className={style.badge}
               style={{
@@ -109,7 +107,7 @@ export class Calendar extends React.Component<CalendarProps, State> {
                     .toString(),
               }}
             />
-          </RCTooltip>
+          </Tooltip>
         );
       }
 
@@ -118,7 +116,7 @@ export class Calendar extends React.Component<CalendarProps, State> {
         compareDesc(new Date(year, month, day), new Date(...endDate)) === 1
       ) {
         return (
-          <RCTooltip placement="top" trigger={['hover']} overlay={v.eventName}>
+          <Tooltip placement="top" trigger={['hover']} overlay={v.eventName}>
             <div
               className={style.badge}
               style={{
@@ -130,17 +128,17 @@ export class Calendar extends React.Component<CalendarProps, State> {
                     .toString(),
               }}
             />
-          </RCTooltip>
+          </Tooltip>
         );
       }
 
       if (day === endDate[2] && month === endDate[1] && year === endDate[0]) {
         return (
-          <RCTooltip placement="top" trigger={['hover']} overlay={v.eventName}>
+          <Tooltip placement="top" trigger={['hover']} overlay={v.eventName}>
             <div
               className={style.badge}
               style={{
-                borderRadius: '0 0 4px 4px',
+                borderRadius: '0 4px 4px 0',
                 background: v.color || '#fcc',
                 boxShadow:
                   '0 10px 14px ' +
@@ -149,26 +147,13 @@ export class Calendar extends React.Component<CalendarProps, State> {
                     .toString(),
               }}
             />
-          </RCTooltip>
+          </Tooltip>
         );
       }
     });
   };
 
-  cellDisabledStyle = (disabled: boolean, theme: Theme) =>
-    disabled &&
-    typeStyle({
-      background: disabledColor(theme),
-      cursor: 'not-allowed',
-      color: '#fff',
-      $nest: {
-        '&:hover': {
-          background: disabledColor(theme) + ' !important',
-        },
-      },
-    });
-
-  toDate = (date: Date | DateTupple) => {
+  toDate = (date: Date | DateTupple | null) => {
     if (!date) {
       return null;
     }
@@ -183,87 +168,92 @@ export class Calendar extends React.Component<CalendarProps, State> {
     const style = this.css();
     const { dateObj, date } = this.state;
     return (
-      <ThemeConsumer>
-        {(theme) => (
-          <Card elevation={this.props.elevation}>
-            <CardBody>
-              <div>
-                <Row>
-                  <Col span={12}>
-                    <AutoComplete
-                      data={() => months}
-                      label="Month"
-                      value={months[date[1]]}
-                      uniqueIdentifier={(e: string) => e}
-                      listDisplayProp={(e) => e}
-                      onChange={this.monthChange}
-                      displayValue={(e: string) => e.toString()}
-                      clearable={false}
-                    />
-                  </Col>
-                  <Col span={12}>
-                    <AutoComplete
-                      data={() => arrayBetween(1980, 2030)}
-                      label="Year"
-                      value={date[0]}
-                      uniqueIdentifier={(e: string) => e}
-                      listDisplayProp={(e) => e}
-                      onChange={this.yearChange}
-                      displayValue={(e) => e}
-                      clearable={false}
-                    />
-                  </Col>
-                </Row>
-                <Row>
-                  {weeks.map((v) => (
-                    <Col className={style.weeks} span={24 / 7} key={v}>
-                      {v.slice(0, 3)}
-                    </Col>
-                  ))}
-                </Row>
-                <Row>
-                  {dateObj.map((v) => {
-                    return weeks.map((f, i) => {
-                      const isSelectedDate =
-                        compareDesc(new Date(date[0], date[1], nestedAccess(v, f)), this.toDate(this.props.date)) === 0;
-
-                      return (
-                        <Col
-                          style={{
-                            ...this.todayStyle(nestedAccess(v, f), theme.primary),
-                            padding: '0',
-                            background: isSelectedDate && theme.primary,
-                            color: isSelectedDate && getColor(theme.primary),
-                            boxSizing: 'border-box',
-                          }}
-                          className={classes(
-                            style.cell,
-                            this.cellDisabledStyle(
-                              this.props.disabledDate([date[0], date[1], nestedAccess(v, f)]),
-                              theme,
-                            ),
-                          )}
-                          key={i}
-                          span={24 / 7}
+      <Card elevation={this.props.elevation}>
+        <CardBody>
+          <Row gutter={[0, '5px']} justifyContent="flex-end">
+            <Col flex="0 1 auto">
+              <Menu
+                height="300px"
+                trigger="onHover"
+                anchor={
+                  <Button primary displayBlock flat>
+                    {months[date[1]]}
+                  </Button>
+                }
+              >
+                {months.map((v) => (
+                  <MenuItem active={v === months[date[1]]} onClick={() => this.monthChange(v)} key={v}>
+                    {v}
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Col>
+            <Col flex="0 1 auto">
+              <Menu
+                height="300px"
+                trigger="onHover"
+                anchor={
+                  <Button primary displayBlock flat>
+                    {date[0]}
+                  </Button>
+                }
+              >
+                {arrayBetween(1980, 2030).map((v) => (
+                  <MenuItem active={v === date[0]} onClick={() => this.yearChange(v)} key={v}>
+                    {v}
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Col>
+          </Row>
+          <Row gutter={[0, 0]}>
+            {weeks.map((v) => (
+              <Col span={24 / 7} key={v}>
+                <Text fontWeight={600} textAlign="center" variant="p" color="light">
+                  {v.slice(0, 3)}
+                </Text>
+              </Col>
+            ))}
+          </Row>
+          <Row gutter={[0, 0]}>
+            {dateObj.map((v) => {
+              return weeks.map((f, i) => {
+                const selectedDate = this.toDate(this.props.date || null);
+                const isSelectedDate =
+                  selectedDate && compareDesc(new Date(date[0], date[1], nestedAccess(v, f)), selectedDate) === 0;
+                const today = this.today(v?.[f]);
+                return (
+                  <Col className={style.cell} key={i} span={24 / 7}>
+                    {nestedAccess(v, f) ? (
+                      this.props.cellRender?.([date?.[0], date?.[1], v?.[f]], f) || (
+                        <Button
+                          disabled={this.props.disabledDate?.([date[0], date[1], v?.[f]])}
+                          flat={!today && !isSelectedDate}
+                          shape="circle"
+                          outline={today}
+                          primary={today || isSelectedDate || false}
                           onClick={() =>
-                            !this.props.disabledDate([date[0], date[1], nestedAccess(v, f)]) &&
+                            !this.props.disabledDate?.([date?.[0], date?.[1], v?.[f]]) &&
                             this.props.onClick &&
-                            this.props.onClick([date[0], date[1], nestedAccess(v, f)] as DateTupple)
+                            this.props.onClick([date?.[0], date?.[1], nestedAccess(v, f)] as DateTupple)
                           }
                         >
-                          {(nestedAccess(v, f) && this.props.cellRender([date[0], date[1], nestedAccess(v, f)], f)) ||
-                            '-'}
-                          <div className={style.dateContent}>{this.calendarEvent(nestedAccess(v, f))}</div>
-                        </Col>
-                      );
-                    });
-                  })}
-                </Row>
-              </div>
-            </CardBody>
-          </Card>
-        )}
-      </ThemeConsumer>
+                          {v?.[f]}
+                        </Button>
+                      )
+                    ) : (
+                      <div />
+                    )}
+                    {this.props.callendarEvents && (
+                      <div className={style.dateContent}>{this.calendarEvent(v?.[f])}</div>
+                    )}
+                  </Col>
+                );
+              });
+            })}
+          </Row>
+        </CardBody>
+      </Card>
     );
   }
 
@@ -271,37 +261,28 @@ export class Calendar extends React.Component<CalendarProps, State> {
     return stylesheet({
       dateContent: {
         position: 'static',
+        width: '110%',
         height: '0',
         textAlign: 'left',
         paddingBottom: '25%',
         boxSizing: 'border-box',
       },
-      weeks: {
-        textAlign: 'right',
-        fontWeight: 'bold',
-        color: '#333',
-      },
       cell: {
-        borderBottom: '1px solid #eee',
-        fontWeight: 400,
+        border: '1px solid rgba(0,0,0,0.1)',
         color: '#555',
-        textAlign: 'right',
+        display: 'flex',
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
         padding: '0',
-        borderLeft: 'none #e0e0e0 1px solid',
-        borderRight: 'none #e0e0e0 1px solid',
         cursor: 'pointer',
-
-        $nest: {
-          '&:hover': {
-            background: '#eee',
-          },
-        },
       },
       badge: {
-        height: '5px',
-        width: '100%',
+        height: '10px',
+        minWidth: '100%',
         cursor: 'pointer',
-        marginBottom: '2px',
+        margin: '2px 0',
       },
     });
   };
diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx
index c2094fb..dffe905 100644
--- a/src/components/DatePicker/DatePicker.stories.tsx
+++ b/src/components/DatePicker/DatePicker.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react';
 
 import { DatePicker, DatePickerProps } from './DatePicker';
@@ -11,9 +11,15 @@ export default {
   },
 } as Meta;
 
-const Template: Story<DatePickerProps> = (args) => <DatePicker {...args} />;
+const Template: Story<DatePickerProps> = (args) => {
+  const [date, updateDate] = useState(null);
+  return <DatePicker {...args} date={date} onChange={(_, e) => updateDate(e)} />;
+};
 
 export const Basic = Template.bind({});
+Basic.args = {
+  label: 'Enter Date',
+};
 
 export const DisabledDates = Template.bind({});
 DisabledDates.args = {
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 32876a2..54f27df 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -1,17 +1,12 @@
 import * as React from 'react';
 import { InputProps, Input } from '../Input/Input';
 import { Button } from '../Button';
-import { Text } from '../Text';
-import { MdPermContactCalendar } from 'react-icons/md';
 import { Calendar } from '../Calendar';
-import { Modal } from '../Modal';
 import { Row, Col } from '../Grid';
 import { CalendarProps, DateTupple } from '../Calendar/Calendar';
-import { format } from 'date-fns';
-import { getColor } from '../../helpers';
 import { TimePickerProps, TimePicker, TimeTupple } from './TimePicker';
-import { ThemeConsumer } from '../Theme/Theme';
-import { lightText } from '../../helpers/color';
+import { Popover } from '../Popover';
+import { IoMdCalendar } from 'react-icons/io';
 
 export const DatePicker: React.FunctionComponent<DatePickerProps> = (props) => {
   const {
@@ -27,72 +22,58 @@ export const DatePicker: React.FunctionComponent<DatePickerProps> = (props) => {
 
   const date = toDate(props.date);
 
-  const [calendar, toggleCalendar] = React.useState(false);
-  const [time, onTimeChange] = React.useState<TimeTupple>([date.getHours(), date.getMinutes(), date.getSeconds()]);
+  const [time, onTimeChange] = React.useState<TimeTupple | null>([
+    date?.getHours() || 0,
+    date?.getMinutes() || 0,
+    date?.getSeconds() || 0,
+  ]);
 
   return (
     <>
-      <Input
-        {...rest}
-        value={displayProp(props.date)}
-        readOnly
-        onFocus={() => toggleCalendar(true)}
-        after={
-          <>
-            <Button flat shape="circle" icon={<MdPermContactCalendar />} onClick={() => toggleCalendar(true)} />
-            {after}
-          </>
+      <Popover
+        content={
+          <Row gutter={['0', '0']}>
+            <Col span={24}>
+              <Calendar
+                date={date || undefined}
+                cellRender={cellRender}
+                callendarEvents={callendarEvents}
+                disabledDate={disabledDate}
+                onClick={(d) => {
+                  handleDateChange(toDate(d), time, onChange);
+                }}
+              />
+            </Col>
+            <Col style={{ padding: '10px' }}>
+              {timePickerProps && (
+                <>
+                  <TimePicker
+                    {...timePickerProps}
+                    time={time || undefined}
+                    onChange={(t) => handleTimeChange(t, date, onTimeChange, onChange)}
+                  />
+                </>
+              )}
+            </Col>
+          </Row>
         }
-      />
-      <Modal isVisible={calendar} onClose={() => toggleCalendar(false)}>
-        <ThemeConsumer>
-          {(theme) => (
-            <Row gutter={['0', '0']}>
-              <Col style={{ display: 'flex' }} span={8}>
-                <div
-                  style={{
-                    background: theme.primary,
-                    padding: '16px',
-                    borderTopRightRadius: '4px',
-                    color: getColor(theme.primary),
-                    width: '100%',
-                  }}
-                >
-                  <Text margin="0" variant="h4" color={lightText(theme)}>
-                    {date.getFullYear()}
-                  </Text>
-                  <h5>{format(date, 'eee')},</h5>
-                  <h4>
-                    {format(date, 'MMM')} {format(date, 'do')}
-                  </h4>
-                  {timePickerProps && (
-                    <>
-                      <h6>At</h6>
-                      <TimePicker
-                        {...timePickerProps}
-                        time={time}
-                        onChange={(t) => handleTimeChange(t, date, onTimeChange, onChange)}
-                      />
-                    </>
-                  )}
-                </div>
-              </Col>
-              <Col span={16}>
-                <Calendar
-                  date={date}
-                  cellRender={cellRender}
-                  callendarEvents={callendarEvents}
-                  disabledDate={disabledDate}
-                  onClick={(d) => {
-                    toggleCalendar(false);
-                    handleDateChange(toDate(d), time, onChange);
-                  }}
-                />
-              </Col>
-            </Row>
-          )}
-        </ThemeConsumer>
-      </Modal>
+        style={{ child: { display: 'block' } }}
+        hideArrow
+        expand
+        trigger="onClick"
+      >
+        <Input
+          {...rest}
+          value={displayProp(props.date)}
+          readOnly
+          after={
+            <>
+              <Button flat shape="circle" icon={<IoMdCalendar />} />
+              {after}
+            </>
+          }
+        />
+      </Popover>
     </>
   );
 };
@@ -101,16 +82,17 @@ type InputType = Omit<InputProps, 'onClick' | 'value' | 'onChange'>;
 type CalendarType = Omit<CalendarProps, 'onClick'>;
 
 export interface DatePickerProps extends InputType, CalendarType {
-  displayProp?: (date?: DateTupple | Date) => string;
-  onChange?: (tupple?: DateTupple, date?: Date) => void;
+  displayProp?: (date?: DateTupple | Date | null) => string;
+  onChange?: (tupple?: DateTupple | null, date?: Date | null) => void;
 
   timePickerProps?: TimePickerProps;
 }
 
-const toDate = (date: Date | DateTupple) => {
+const toDate = (date: Date | DateTupple | null | undefined) => {
   if (!date) {
     return null;
   }
+
   if (Array.isArray(date)) {
     return new Date(...date);
   }
@@ -118,7 +100,7 @@ const toDate = (date: Date | DateTupple) => {
   return date;
 };
 
-const toDateTupple = (date: Date | DateTupple): DateTupple => {
+const toDateTupple = (date: Date | DateTupple | null): DateTupple | null => {
   if (!date) {
     return null;
   }
@@ -131,33 +113,32 @@ const toDateTupple = (date: Date | DateTupple): DateTupple => {
 };
 
 const handleTimeChange = (
-  time: TimeTupple,
-  date: Date,
-  onChange: (time: TimeTupple) => void,
+  time: TimeTupple | null,
+  date: Date | null,
+  onChange: (time: TimeTupple | null) => void,
   update: DatePickerProps['onChange'],
 ) => {
   onChange(time);
   handleDateChange(date, time, update);
 };
 
-const handleDateChange = (d: Date, time: TimeTupple, onChange: DatePickerProps['onChange']) => {
+const handleDateChange = (d: Date | null, time: TimeTupple | null, onChange: DatePickerProps['onChange']) => {
   if (time) {
-    d.setHours(...time);
+    d?.setHours(...time);
   }
 
-  onChange(toDateTupple(d), d);
+  onChange?.(toDateTupple(d), d);
 };
 
-const defaultDisplayProp = (d: DateTupple | Date, withTime: boolean) => {
+const defaultDisplayProp = (d: DateTupple | Date | null | undefined, withTime: boolean) => {
+  if (!d) {
+    return '';
+  }
   const date = toDate(d);
 
   if (withTime) {
-    return date.toLocaleString();
+    return date?.toLocaleString();
   }
 
-  return date.toDateString();
-};
-
-DatePicker.defaultProps = {
-  date: new Date(),
+  return date?.toDateString();
 };
diff --git a/src/components/DatePicker/TimePicker.tsx b/src/components/DatePicker/TimePicker.tsx
index 49ad5bb..d7aa310 100644
--- a/src/components/DatePicker/TimePicker.tsx
+++ b/src/components/DatePicker/TimePicker.tsx
@@ -9,26 +9,32 @@ import { MdTimer } from 'react-icons/md';
 import { style } from 'typestyle';
 
 export const TimePicker: React.FunctionComponent<TimePickerProps> = (props) => {
-  const { onChange, time, ...inputProps } = props;
+  const { onChange, time = [0, 0, 0], ...inputProps } = props;
 
   const [amPmValue, updateAmPm] = React.useState<'AM' | 'PM'>(to12HourFormat(time[0])[1] as 'AM' | 'PM');
 
   const handleChange = (h?: number, m?: number, s?: number) => {
-    const hour = h ?? props.time[0];
-    const minute = m ?? props.time[1];
-    const sec = s ?? props.time[2];
+    const hour = h ?? time[0];
+    const minute = m ?? time[1];
+    const sec = s ?? time[2];
 
-    onChange([hour, minute, sec]);
+    onChange?.([hour, minute, sec]);
     updateAmPm(hour > 12 ? 'PM' : 'AM');
   };
 
   return (
     <>
-      <Popover content={content(props, handleChange, amPmValue)} trigger="onClick" expand hideArrow>
+      <Popover
+        style={{ child: { display: 'block' } }}
+        content={content(props, handleChange, amPmValue)}
+        trigger="onClick"
+        expand
+        hideArrow
+      >
         <div>
           <Input
             {...inputProps}
-            value={formatTime(props.time, props.use24Hour)}
+            value={formatTime(time, props.use24Hour || false)}
             readOnly
             after={
               <>
@@ -63,22 +69,22 @@ const content = (props: TimePickerProps, onChange: (h?: number, m?: number, s?:
       </Col>
       <Col span={6}>
         {arrayBetween(0, 60).map((v) => (
-          <div onClick={() => onChange(null, v)} key={v}>
+          <div onClick={() => onChange(undefined, v)} key={v}>
             {v}
           </div>
         ))}
       </Col>
       <Col span={6}>
         {arrayBetween(0, 60).map((v) => (
-          <div onClick={() => onChange(null, null, v)} key={v}>
+          <div onClick={() => onChange(undefined, undefined, v)} key={v}>
             {v}
           </div>
         ))}
       </Col>
       {!props.use24Hour && (
         <Col span={6}>
-          <div onClick={() => handleAmPmChange('AM', props.time, onChange)}>AM</div>
-          <div onClick={() => handleAmPmChange('PM', props.time, onChange)}>PM</div>
+          <div onClick={() => handleAmPmChange('AM', props.time || [0, 0, 0], onChange)}>AM</div>
+          <div onClick={() => handleAmPmChange('PM', props.time || [0, 0, 0], onChange)}>PM</div>
         </Col>
       )}
     </Row>
@@ -126,7 +132,7 @@ export type TimeTupple = [number, number, number];
 
 export interface TimePickerProps extends InputType {
   time?: TimeTupple;
-  onChange?: (time: TimeTupple) => void;
+  onChange?: (time: TimeTupple | null) => void;
   use24Hour?: boolean;
 }
 
@@ -177,7 +183,3 @@ const to24HourFormat = (hour: number, amPm: 'AM' | 'PM') => {
 
   return hour;
 };
-
-TimePicker.defaultProps = {
-  time: [0, 0, 0],
-};
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index 5c0c643..2755124 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -6,16 +6,60 @@ import { Theme, ThemeConsumer } from '../Theme/Theme';
 import elevations from '../../helpers/elevations';
 
 export const Drawer: React.FunctionComponent<DrawerProps> = (props) => {
-  const { elevation = 0 } = props;
+  const { elevation = 24, onClose = () => ({}) } = props;
 
   if (!props.isVisible) {
-    document.body.style.overflow = 'auto';
-    document.body.style.position = '';
     return null;
   }
 
-  document.body.style.overflow = 'hidden';
-  document.body.style.position = 'relative';
+  const [className, updateClassName] = React.useState('');
+
+  const beforeClose = () => {
+    const slideOutRight = keyframes(
+      {
+        right: {
+          '0%': {
+            transform: 'translateX(0)',
+          },
+          '100%': {
+            transform: 'translateX(120vw)',
+          },
+        },
+        left: {
+          '0%': {
+            transform: 'translateX(0)',
+          },
+          '100%': {
+            transform: 'translateX(-1000px)',
+          },
+        },
+        top: {
+          '0%': {
+            transform: 'translateY(0)',
+          },
+          '100%': {
+            transform: 'translateY(-1000px)',
+          },
+        },
+        bottom: {
+          '0%': {
+            transform: 'translateY(0)',
+          },
+          '100%': {
+            transform: 'translateY(120vh)',
+          },
+        },
+      }[props.placement || 'right'],
+    );
+
+    setTimeout(onClose, 200);
+
+    updateClassName(
+      style({
+        animation: `${slideOutRight} .5s ease-in both !important`,
+      }),
+    );
+  };
 
   return (
     <Portal>
@@ -24,23 +68,23 @@ export const Drawer: React.FunctionComponent<DrawerProps> = (props) => {
           const css = elevationCss(theme);
           return (
             <>
-              <div className={MaskStyle()} onClick={() => props.onClose && props.onClose()} />
+              <div className={MaskStyle()} onClick={() => props.onClose && beforeClose()} />
               <div
-                style={props.style.container}
-                className={classes(DrawerStyle(props, theme), css[`elevation${elevation}`])}
+                style={props.style?.container}
+                className={classes(DrawerStyle(props, theme), css[`elevation${elevation}`], className)}
               >
                 {props.header && (
-                  <div style={props.style.header} className="header">
+                  <div style={props.style?.header} className="header">
                     {props.header}
                   </div>
                 )}
 
-                <div style={props.style.body} className="body">
+                <div style={props.style?.body} className="body">
                   {props.children}
                 </div>
 
                 {props.footer && (
-                  <div style={props.style.footer} className="footer">
+                  <div style={props.style?.footer} className="footer">
                     {props.footer}
                   </div>
                 )}
@@ -55,7 +99,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = (props) => {
 
 const MaskStyle = () =>
   style({
-    position: 'absolute',
+    position: 'fixed',
     width: '100%',
     height: '100%',
     left: '0',
@@ -144,6 +188,7 @@ const DrawerStyle = (props: DrawerProps, theme: Theme) => {
         top: '0',
         width: '100%',
         height: 'auto',
+        left: 0,
         animation: `${slideInTop} 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both`,
       }),
     bottom: () =>
@@ -151,6 +196,7 @@ const DrawerStyle = (props: DrawerProps, theme: Theme) => {
         bottom: '0',
         width: '100%',
         height: 'auto',
+        left: 0,
         animation: `${slideInBottom} 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both`,
       }),
     left: () =>
@@ -179,7 +225,7 @@ const DrawerStyle = (props: DrawerProps, theme: Theme) => {
           },
         },
       }),
-  }[props.placement]());
+  }[props.placement || 'right']());
 
   return style(...styles);
 };
diff --git a/src/components/Input/BaseInputComponent.tsx b/src/components/Input/BaseInputComponent.tsx
index 7cc0ad2..22ec3e6 100644
--- a/src/components/Input/BaseInputComponent.tsx
+++ b/src/components/Input/BaseInputComponent.tsx
@@ -39,7 +39,15 @@ export const BaseInputComponent: React.FunctionComponent<BaseInputProps | BaseTe
   return (
     <ThemeConsumer>
       {(theme) => {
-        const css = style(theme, !!error, !!label, isInputActive(), borderLess, props.disabled, !!before);
+        const css = style(
+          theme,
+          !!error,
+          !!label,
+          isInputActive(),
+          borderLess || false,
+          props.disabled || false,
+          !!before,
+        );
         return (
           <>
             <Row
@@ -52,7 +60,7 @@ export const BaseInputComponent: React.FunctionComponent<BaseInputProps | BaseTe
                 <Col
                   className={classes(css.seudo, 'seudo')}
                   flex="0 1 auto"
-                  style={{ paddingLeft: !borderLess && '5px' }}
+                  style={{ paddingLeft: (!borderLess && '5px') || undefined }}
                 >
                   {before}
                 </Col>
@@ -89,7 +97,7 @@ export const BaseInputComponent: React.FunctionComponent<BaseInputProps | BaseTe
                       <Col
                         className={classes(css.seudo, 'seudo')}
                         flex="0 1 auto"
-                        style={{ paddingRight: !borderLess && '5px' }}
+                        style={{ paddingRight: (!borderLess && '5px') || undefined }}
                       >
                         {after}
                       </Col>
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index 6cdb2df..5cd8a1b 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -46,6 +46,7 @@ BeforeAndAfter.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  placeholder: 'Disabled',
+  defaultValue: 'Disabled',
   disabled: true,
+  label: 'Disabled',
 };
diff --git a/src/components/Input/style.tsx b/src/components/Input/style.ts
similarity index 80%
rename from src/components/Input/style.tsx
rename to src/components/Input/style.ts
index 042ce09..2e69f3b 100644
--- a/src/components/Input/style.tsx
+++ b/src/components/Input/style.ts
@@ -1,5 +1,5 @@
 import { stylesheet } from 'typestyle';
-import { lightText, borderColor as borderColorHelper, disabledColor, colorShades } from '../../helpers/color';
+import { lightText, borderColor as borderColorHelper, disabledText } from '../../helpers/color';
 import { Theme } from '../Theme/Theme';
 import { getColor } from '../../helpers';
 
@@ -16,11 +16,11 @@ export function style(
 
   const borderStyle = borderLess
     ? {
-        borderBottom: `1px solid ${borderColor}`,
+        borderBottom: `1px ${disabled ? 'dotted' : 'solid'} ${borderColor}`,
         borderRadius: '0',
       }
     : {
-        border: `1px solid ${borderColor}`,
+        border: `1px ${disabled ? 'dotted' : 'solid'} ${borderColor}`,
         borderRadius: '4px',
       };
 
@@ -28,17 +28,15 @@ export function style(
     container: {
       ...borderStyle,
       position: 'relative',
-      color: lightText(theme),
+      color: disabled ? disabledText(theme) : lightText(theme),
       fontSize: '14px',
       lineHeight: 1.12857,
       cursor: 'text',
-      borderTop: active && label && 'none',
+      borderTop: (active && label && 'none') || undefined,
       transition: 'background-color 0.2s ease-in-out 0s, border-color 0.2s ease-in-out 0s',
-      background: disabled && colorShades(disabledColor(theme))[4],
       $nest: {
         '&:focus-within': {
           borderColor: theme.primary,
-          // background: theme.background,
 
           $nest: {
             '.seudo': {
@@ -57,15 +55,14 @@ export function style(
           },
         },
         '&:hover': {
-          borderColor: !active && 'rgb(9, 30, 66)',
+          borderColor: (!active && !disabled && 'rgb(9, 30, 66)') || undefined,
         },
       },
     },
-
     section: {
       position: 'relative',
       boxSizing: 'border-box',
-      color: lightText(theme),
+      color: disabled ? disabledText(theme) : lightText(theme),
       fontSize: '14px',
       lineHeight: 1.12857,
       maxWidth: '100%',
@@ -73,8 +70,10 @@ export function style(
       borderWidth: '1px',
     },
     input: {
-      fontSize: '16px',
-      width: '100%',
+      fontSize: '14px',
+      minWidth: '100%',
+      display: 'inline',
+      maxWidth: '100%',
       background: 'transparent',
       borderWidth: '0px',
       borderStyle: 'initial',
@@ -83,9 +82,10 @@ export function style(
       outline: 'none',
       lineHeight: '12px',
       padding: `9px ${borderLess ? '0' : before ? '5px' : '10px'}`,
-      color: getColor(theme.background),
+      color: disabled ? disabledText(theme) : getColor(theme.background),
       boxSizing: 'border-box',
       height: '36px',
+      fontFamily: '"Roboto", sans-serif',
       $nest: {
         '&::placeholder': {
           color: '#aaaaaa',
@@ -96,7 +96,7 @@ export function style(
       },
     },
     textarea: {
-      fontSize: '16px',
+      fontSize: '14px',
       minWidth: '0px',
       width: '100%',
       background: 'transparent',
@@ -109,7 +109,8 @@ export function style(
       lineHeight: '1em',
       padding: '8px 5px',
       maxWidth: '100%',
-      color: getColor(theme.background),
+      color: disabled ? disabledText(theme) : lightText(theme),
+      fontFamily: '"Roboto", sans-serif',
       $nest: {
         '&::placeholder': {
           color: '#aaaaaa',
@@ -120,7 +121,7 @@ export function style(
       position: 'absolute',
       display: 'flex',
       alignSelf: 'center',
-      color: lightText(theme),
+      color: disabled ? disabledText(theme) : lightText(theme),
       boxSizing: 'border-box',
       left: 0,
       top: -7,
@@ -133,7 +134,7 @@ export function style(
           display: 'block',
           boxSizing: 'border-box',
           marginTop: '6px',
-          borderTop: 'solid 1px',
+          borderTop: `${disabled ? 'dotted' : 'solid'} 1px`,
           borderTopColor: active && !borderLess ? borderColor : 'transparent',
           minWidth: borderLess ? '0px' : '10px',
           height: '8px',
diff --git a/src/components/Layout/Container.tsx b/src/components/Layout/Container.tsx
index 6674b06..e31f57f 100644
--- a/src/components/Layout/Container.tsx
+++ b/src/components/Layout/Container.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { style } from 'typestyle';
 
-export const [OPEN_WIDTH, COLLAPSED_WIDTH] = [250, 50];
+export const [OPEN_WIDTH, COLLAPSED_WIDTH] = [250, 60];
 
 const ctx = React.createContext<{ width: number; updateWidth: (width: number) => void; toggle: () => void }>({
   width: OPEN_WIDTH,
@@ -19,7 +19,7 @@ export const Container: React.FC<ContainerProps> = (props) => {
   };
 
   return (
-    <SidePanelContext.Provider value={{ width, updateWidth: (e) => updateWidth(e), toggle }}>
+    <SidePanelContext.Provider value={{ width, updateWidth, toggle }}>
       <div className={css}>{props.children}</div>
     </SidePanelContext.Provider>
   );
diff --git a/src/components/Layout/Layout.stories.tsx b/src/components/Layout/Layout.stories.tsx
index e715e23..72e9ce1 100644
--- a/src/components/Layout/Layout.stories.tsx
+++ b/src/components/Layout/Layout.stories.tsx
@@ -2,8 +2,12 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 
 import { Container, Content, SidePanel } from './';
-import { Menu, MenuItem, MenuItemGroup } from '../Menu';
-import { MdHome, Md3DRotation, MdAccountBox } from 'react-icons/md';
+import { Menu, MenuItem } from '../Menu';
+import { MdHome, Md3DRotation, MdAccountBox, MdAcUnit, MdAccessTime, MdVerifiedUser, MdSettings } from 'react-icons/md';
+import { Button } from '../Button';
+import { Divider } from '../Divider';
+import { Popover } from '../..';
+import { List, ListItem } from '../List';
 
 export default {
   title: 'Layout/Layouts',
@@ -15,97 +19,140 @@ export default {
 } as Meta;
 
 export const BasicLayout = () => (
-  <Container>
-    <SidePanel>Side Panel</SidePanel>
-    <Content>Container</Content>
-  </Container>
-);
-
-export const SidePanelMenu = () => (
-  <Container>
-    <SidePanel>
-      <Menu>
-        <MenuItem icon={<MdHome />} active name="nav 1">
-          NAV 1
-        </MenuItem>
-        <MenuItem icon={<Md3DRotation />} name="nav 2">
-          NAV 2
-        </MenuItem>
-        <MenuItem icon={<MdAccountBox />} name="nav 3">
-          NAV 3
-        </MenuItem>
-        <MenuItemGroup title="Group" icon={<MdHome />}>
-          <MenuItem icon={<MdHome />} name="nav 1">
-            NAV 1
-          </MenuItem>
-          <MenuItem icon={<Md3DRotation />} name="nav 2">
-            NAV 2
-          </MenuItem>
-          <MenuItem icon={<MdAccountBox />} name="nav 3">
-            NAV 3
-          </MenuItem>
-        </MenuItemGroup>
-      </Menu>
-    </SidePanel>
-    <Content>
-      <div>Content</div>
-    </Content>
-  </Container>
-);
-
-export const SidePanelMenuWithBottom = () => (
   <Container>
     <SidePanel
-      bottom={
-        <Menu>
-          <MenuItem icon={<MdHome />} active name="nav 1">
-            NAV 1
-          </MenuItem>
-          <MenuItem icon={<Md3DRotation />} name="nav 2">
-            NAV 2
+      logo={<Md3DRotation size="50px" />}
+      bottom={[
+        <Popover
+          key="bottom-2"
+          position="right"
+          trigger="onHover"
+          style={{ child: { display: 'block' } }}
+          animation="zoom"
+          content={
+            <List>
+              <ListItem>user option 1</ListItem>
+              <ListItem>user option 2</ListItem>
+              <ListItem>user option 3</ListItem>
+            </List>
+          }
+        >
+          <Button size="big" displayBlock flat primary icon={<MdVerifiedUser />} />
+        </Popover>,
+        <Menu key="bottom-1" anchor={<Button icon={<MdSettings />} flat displayBlock size="big" />}>
+          <MenuItem icon={<MdHome />}>Setting 1</MenuItem>
+          <MenuItem icon={<MdHome />} active>
+            Setting 2
           </MenuItem>
-          <MenuItem icon={<MdAccountBox />} name="nav 3">
-            NAV 3
-          </MenuItem>
-          <MenuItemGroup title="Group" icon={<MdHome />}>
-            <MenuItem icon={<MdHome />} name="nav 1">
-              NAV 1
-            </MenuItem>
-            <MenuItem icon={<Md3DRotation />} name="nav 2">
-              NAV 2
-            </MenuItem>
-            <MenuItem icon={<MdAccountBox />} name="nav 3">
-              NAV 3
-            </MenuItem>
-          </MenuItemGroup>
-        </Menu>
-      }
+          <MenuItem icon={<Md3DRotation />}>Setting 3</MenuItem>
+          <MenuItem icon={<MdAccountBox />}>Setting 4</MenuItem>
+        </Menu>,
+      ]}
     >
-      <Menu>
-        <MenuItem icon={<MdHome />} active name="nav 1">
+      <Menu anchor={<Button icon={<MdAcUnit />} flat displayBlock size="big" />}>
+        <MenuItem icon={<MdHome />}>Home</MenuItem>
+        <MenuItem icon={<MdHome />} active>
           NAV 1
         </MenuItem>
-        <MenuItem icon={<Md3DRotation />} name="nav 2">
-          NAV 2
-        </MenuItem>
-        <MenuItem icon={<MdAccountBox />} name="nav 3">
-          NAV 3
-        </MenuItem>
-        <MenuItemGroup title="Group" icon={<MdHome />}>
-          <MenuItem icon={<MdHome />} name="nav 1">
-            NAV 1
-          </MenuItem>
-          <MenuItem icon={<Md3DRotation />} name="nav 2">
-            NAV 2
-          </MenuItem>
-          <MenuItem icon={<MdAccountBox />} name="nav 3">
-            NAV 3
-          </MenuItem>
-        </MenuItemGroup>
+        <MenuItem icon={<Md3DRotation />}>NAV 2</MenuItem>
+        <MenuItem icon={<MdAccountBox />}>NAV 3</MenuItem>
+      </Menu>
+      <Divider />
+      <Menu anchor={<Button icon={<MdAccessTime />} flat displayBlock size="big" />}>
+        <MenuItem icon={<MdHome />}>NAV 1</MenuItem>
+        <MenuItem icon={<Md3DRotation />}>NAV 2</MenuItem>
+        <MenuItem icon={<MdAccountBox />}>NAV 3</MenuItem>
       </Menu>
     </SidePanel>
-    <Content>
-      <div>Content</div>
-    </Content>
+    <Content>Container</Content>
   </Container>
 );
+
+// export const SidePanelMenu = () => (
+//   <Container>
+//     <SidePanel>
+//       <Menu>
+//         <MenuItem icon={<MdHome />} active name="nav 1">
+//           NAV 1
+//         </MenuItem>
+//         <MenuItem icon={<Md3DRotation />} name="nav 2">
+//           NAV 2
+//         </MenuItem>
+//         <MenuItem icon={<MdAccountBox />} name="nav 3">
+//           NAV 3
+//         </MenuItem>
+//         <MenuItemGroup title="Group" icon={<MdHome />}>
+//           <MenuItem icon={<MdHome />} name="nav 1">
+//             NAV 1
+//           </MenuItem>
+//           <MenuItem icon={<Md3DRotation />} name="nav 2">
+//             NAV 2
+//           </MenuItem>
+//           <MenuItem icon={<MdAccountBox />} name="nav 3">
+//             NAV 3
+//           </MenuItem>
+//         </MenuItemGroup>
+//       </Menu>
+//     </SidePanel>
+//     <Content>
+//       <div>Content</div>
+//     </Content>
+//   </Container>
+// );
+
+// export const SidePanelMenuWithBottom = () => (
+//   <Container>
+//     <SidePanel
+//       bottom={
+//         <Menu>
+//           <MenuItem icon={<MdHome />} active name="nav 1">
+//             NAV 1
+//           </MenuItem>
+//           <MenuItem icon={<Md3DRotation />} name="nav 2">
+//             NAV 2
+//           </MenuItem>
+//           <MenuItem icon={<MdAccountBox />} name="nav 3">
+//             NAV 3
+//           </MenuItem>
+//           <MenuItemGroup title="Group" icon={<MdHome />}>
+//             <MenuItem icon={<MdHome />} name="nav 1">
+//               NAV 1
+//             </MenuItem>
+//             <MenuItem icon={<Md3DRotation />} name="nav 2">
+//               NAV 2
+//             </MenuItem>
+//             <MenuItem icon={<MdAccountBox />} name="nav 3">
+//               NAV 3
+//             </MenuItem>
+//           </MenuItemGroup>
+//         </Menu>
+//       }
+//     >
+//       <Menu>
+//         <MenuItem icon={<MdHome />} active name="nav 1">
+//           NAV 1
+//         </MenuItem>
+//         <MenuItem icon={<Md3DRotation />} name="nav 2">
+//           NAV 2
+//         </MenuItem>
+//         <MenuItem icon={<MdAccountBox />} name="nav 3">
+//           NAV 3
+//         </MenuItem>
+//         <MenuItemGroup title="Group" icon={<MdHome />}>
+//           <MenuItem icon={<MdHome />} name="nav 1">
+//             NAV 1
+//           </MenuItem>
+//           <MenuItem icon={<Md3DRotation />} name="nav 2">
+//             NAV 2
+//           </MenuItem>
+//           <MenuItem icon={<MdAccountBox />} name="nav 3">
+//             NAV 3
+//           </MenuItem>
+//         </MenuItemGroup>
+//       </Menu>
+//     </SidePanel>
+//     <Content>
+//       <div>Content</div>
+//     </Content>
+//   </Container>
+// );
diff --git a/src/components/Layout/SidePanel.tsx b/src/components/Layout/SidePanel.tsx
index 97170cf..dfc9cda 100644
--- a/src/components/Layout/SidePanel.tsx
+++ b/src/components/Layout/SidePanel.tsx
@@ -1,40 +1,97 @@
 import * as React from 'react';
-import { stylesheet } from 'typestyle';
-
-import { MdMenu, MdKeyboardArrowLeft } from 'react-icons/md';
-import { Button } from '../../index';
+import { classes, stylesheet } from 'typestyle';
 import { ThemeConsumer, Theme } from '../Theme/Theme';
-import { COLLAPSED_WIDTH, SidePanelContext } from './Container';
+import { getColor } from '../../helpers';
+import elevations from '../../helpers/elevations';
+import { Col, Row } from '../Grid';
+import { Menu } from '../Menu';
+import { Button } from '../Button';
+import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
+import { SidePanelContext } from './Container';
+import { TabPanelContainer } from '../Tabs';
 
 export const SidePanel: React.FunctionComponent<SidePanelProps> = (props) => {
+  const children: React.ReactElement[] = Array.isArray(props.children)
+    ? (props.children as React.ReactElement[])
+    : [props.children];
+
+  const bottom: React.ReactElement[] = Array.isArray(props.bottom)
+    ? (props.bottom as React.ReactElement[])
+    : (props.bottom && [props.bottom]) || [];
+
+  const [drawer, toggleDrawer] = React.useState<boolean>(false);
+  const [activeDrawer, updateActiveDrawer] = React.useState(0);
+
+  const onOpen = (v: React.ReactElement, index: number, close: boolean, toggle: () => void) => {
+    if (close) {
+      toggle();
+      toggleDrawer(false);
+      return;
+    }
+    if (((v.type as unknown) as { displayName: string }).displayName !== 'Menu') {
+      return;
+    }
+    !drawer && toggle();
+    updateActiveDrawer(index);
+    setTimeout(() => toggleDrawer(true), 200);
+  };
+
   return (
     <ThemeConsumer>
       {(theme) => (
         <SidePanelContext.Consumer>
           {({ width, toggle }) => {
-            const open = width > COLLAPSED_WIDTH;
-            const css = style(open, theme, width);
-
+            const css = style(theme, width);
             return (
-              // <SidePanelContext.Provider value={{ width }}>
-              <aside className={css.container}>
-                <div
-                  className={css.resizer}
-                  // TODO: proper implementation is required.
-                  // draggable
-                  // onDrag={this.onDrag}
-                  // onDragStart={(e) => (e.target as HTMLDivElement).style.opacity = '0'}
-                  // onDragEnd={(e) => (e.target as HTMLDivElement).style.opacity = '1'}
-                >
-                  <div style={(!open && { display: 'block' }) || {}} className={css.arrow} onClick={toggle}>
-                    <Button shape="circle" icon={!open ? <MdMenu /> : <MdKeyboardArrowLeft />} />
+              <>
+                <div className={classes(css.container, css['elevation2'])}>
+                  <Row gutter={[0, '0 5px 0 5px']}>
+                    <Col flex="0 1 60px" className={css['elevation3']}>
+                      {props.logo && <div className={css.logo}>{props.logo}</div>}
+                      {children.map((v, i) => (
+                        <div className={css.item} key={`item-${i}`} onClick={() => onOpen(v, i, false, toggle)}>
+                          {v?.props?.anchor || v}
+                        </div>
+                      ))}
+                    </Col>
+                    {drawer && (
+                      <Col flex="1 0 auto" className={css.drawer}>
+                        <TabPanelContainer
+                          activeKey={String(activeDrawer)}
+                          titles={children.concat(bottom).map((_, i) => ({ title: '', key: String(i) }))}
+                        >
+                          {children.concat(bottom).map((v, i) => (
+                            <Menu key={`drawer-${i}`} elevation={0} anchor={<button />} mode="vertical">
+                              {v.props.children}
+                            </Menu>
+                          ))}
+                        </TabPanelContainer>
+                      </Col>
+                    )}
+                  </Row>
+                  <div className={css.resizer}>
+                    <Button
+                      onClick={() => onOpen(children[0], activeDrawer, !!drawer, toggle)}
+                      shape="circle"
+                      size="small"
+                      icon={drawer ? <MdChevronLeft /> : <MdChevronRight />}
+                      primary
+                    />
                   </div>
+                  {!drawer && <div className={css.line} />}
+                </div>
+                <div className={css.bottom}>
+                  {bottom.map((v, i) => (
+                    <div
+                      className={css.item}
+                      key={`item-${i}`}
+                      onClick={() => onOpen(v, children.length + i, false, toggle)}
+                    >
+                      {v.props?.anchor || v}
+                    </div>
+                  ))}
                 </div>
-                <div className={css.line} />
-                <div>{props.children}</div>
-                <div className={css.bottom}>{props.bottom}</div>
-              </aside>
-              // </SidePanelContext.Provider>
+              </>
             );
           }}
         </SidePanelContext.Consumer>
@@ -43,75 +100,79 @@ export const SidePanel: React.FunctionComponent<SidePanelProps> = (props) => {
   );
 };
 
-const style = (open: boolean, theme: Theme, width: number) => {
+const style = (theme: Theme, width: number) => {
+  const background = theme.background;
+  const color = getColor(background);
   return stylesheet({
+    ...elevations(theme),
     container: {
       position: 'fixed',
-      width,
-      flex: `0 1 ${width}px`,
-      height: '100vh',
+      width: width + 'px',
+      flex: `0 1 60px`,
       maxHeight: '100%',
-      background: open ? theme.background : 'none',
+      color,
+      background,
       transition: '.3s all',
+      overflow: 'auto',
       zIndex: 1,
       left: 0,
       top: 0,
+      overflowX: 'visible',
+      overflowY: 'auto',
     },
-    line: {
-      width: !open && '3px',
-      height: '100%',
-      position: 'absolute',
-      left: open ? '100%' : '23.5px',
-      background: theme.primary,
-      transition: '1s all',
-      zIndex: -1,
-    },
-    arrow: {
-      zIndex: 1000,
-      display: 'none',
-      position: 'absolute',
-      right: '0',
+    logo: {
       cursor: 'pointer',
-      color: theme.secondary,
-      fontSize: '30px',
-      transition: '.2s',
-      left: '0',
-      top: '10px',
+      margin: 'auto',
+      marginTop: '20px',
       $nest: {
-        '&:hover': {
-          color: theme.warning,
+        svg: {
+          width: '100%',
         },
       },
     },
-    resizer: {
-      position: 'absolute',
-      right: '-12px',
-      top: '0',
-      bottom: '0',
-      width: '30px',
-      // TODO: activate once drag is fixed
-      // cursor: 'ew-resize',
-      zIndex: 1,
+    item: {
+      margin: '20px 0',
+      color,
       $nest: {
-        '&:hover': {
+        '*': {
+          color,
           $nest: {
-            '& div': {
-              display: 'block',
+            '&:hover': {
+              color,
             },
           },
         },
       },
     },
+    drawer: {
+      height: '100vh',
+      overflow: 'auto',
+    },
+    resizer: {
+      position: 'fixed',
+      top: '20px',
+      left: width - 10 + 'px',
+    },
+    line: {
+      position: 'fixed',
+      height: '110vh',
+      left: width / 2 + 'px',
+      width: '2px',
+      background: theme.primary,
+    },
     bottom: {
-      position: 'absolute',
-      bottom: 0,
-      width: '100%',
+      position: 'fixed',
+      bottom: '0',
+      left: '0',
+      width: '60px',
+      background,
+      zIndex: 2,
     },
   });
 };
 
 export interface SidePanelProps {
-  children: React.ReactNode;
-  bottom?: React.ReactNode;
-  // collapsed?: boolean;
+  children: React.ReactElement[] | React.ReactElement;
+  bottom?: React.ReactElement[] | React.ReactElement;
+  logo?: React.ReactNode;
 }
diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx
index b192aa6..507a20b 100644
--- a/src/components/List/List.stories.tsx
+++ b/src/components/List/List.stories.tsx
@@ -15,7 +15,7 @@ export default {
   },
 } as Meta;
 
-export const Basic: Story<ListProps<any>> = (args) => (
+export const Basic: Story<ListProps> = (args) => (
   <List {...args}>
     <ListItem avatar={<MdAcUnit />}>Basic Item List</ListItem>
     <ListItem avatar={<Md3DRotation />}>Basic Item List</ListItem>
@@ -25,7 +25,7 @@ export const Basic: Story<ListProps<any>> = (args) => (
   </List>
 );
 
-export const Subtitle: Story<ListProps<any>> = (args) => (
+export const Subtitle: Story<ListProps> = (args) => (
   <List {...args}>
     <ListItem avatar={<MdAcUnit />} subtitle="Do you Know Lorem Ipsum?">
       Basic Item List
@@ -40,7 +40,7 @@ export const Subtitle: Story<ListProps<any>> = (args) => (
   </List>
 );
 
-export const Collapsible: Story<ListProps<any>> = (args) => (
+export const Collapsible: Story<ListProps> = (args) => (
   <List {...args}>
     <ListItem avatar={<MdAcUnit />} subtitle="Do you Know Lorem Ipsum?">
       Basic Item List
@@ -57,3 +57,21 @@ export const Collapsible: Story<ListProps<any>> = (args) => (
     <ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
   </List>
 );
+
+export const Densed: Story<ListProps> = (args) => (
+  <List densed {...args}>
+    <ListItem avatar={<MdAcUnit />} subtitle="Do you Know Lorem Ipsum?">
+      Basic Item List
+    </ListItem>
+    <ListItem avatar={<Md3DRotation />} subtitle="Do you Know Lorem Ipsum?">
+      Basic Item List
+    </ListItem>
+    <ListItem avatar={<MdAccessAlarm />} subtitle="Do you Know Lorem Ipsum?">
+      Basic Item List
+    </ListItem>
+    <CollapsibleList header={'Hello World'}>
+      <ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
+    </CollapsibleList>
+    <ListItem subtitle="Do you Know Lorem Ipsum?">Basic Item List</ListItem>
+  </List>
+);
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index f3f8629..a377633 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -4,10 +4,13 @@ import { ThemeConsumer } from '../Theme/Theme';
 import { style } from './style';
 
 export interface ListProps {
-  children?: React.ReactNode;
+  children?: React.ReactElement | React.ReactElement[];
   style?: React.CSSProperties;
   elevation?: number;
   className?: string;
+  densed?: boolean;
+  inline?: boolean;
+  backgroundColor?: string;
 }
 
 export const List: React.FC<ListProps> = (props) => {
@@ -16,11 +19,22 @@ export const List: React.FC<ListProps> = (props) => {
   return (
     <ThemeConsumer>
       {(theme) => {
-        const css = style(theme);
+        const css = style(theme, props.backgroundColor, props.densed, props.inline);
         return (
           <div className={classes(css[`elevation${elevation}`], props.className)}>
             <ul className={css.list} style={props.style}>
-              {props.children}
+              {Array.isArray(props.children)
+                ? (props.children as React.ReactElement[])?.map(
+                    (v, i) =>
+                      v &&
+                      React.cloneElement(v, {
+                        key: `item-${i}`,
+                        gutter: (props.densed && [0, '6px 8px 6px 9px']) || v.props.gutter,
+                      }),
+                  )
+                : React.cloneElement(props.children || <div />, {
+                    gutter: (props.densed && [0, '6px 8px 6px 9px']) || props.children?.props.gutter,
+                  })}
             </ul>
           </div>
         );
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index d12ed38..7fbb843 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -37,7 +37,7 @@ export const ListItem: React.FC<ListItemProps> = (props) => {
         const css = listStyle(theme);
         const Element: React.FC<unknown> = (p) =>
           React.cloneElement(props.element || <li />, {
-            className: classes(css.listItem, props.className),
+            className: classes(css.listItem, props.className, 'list-item'),
             onClick: onClick,
             style: {
               background: selected && theme.primary,
diff --git a/src/components/List/style.ts b/src/components/List/style.ts
index 44c1d87..d6a2381 100644
--- a/src/components/List/style.ts
+++ b/src/components/List/style.ts
@@ -3,31 +3,42 @@ import { Theme } from '../Theme/Theme';
 import { hoverColor } from '../../helpers/color';
 import elevations from '../../helpers/elevations';
 
-export const style = (theme: Theme) => {
+export const style = (theme: Theme, background: string = theme.background, densed?: boolean, inline?: boolean) => {
   return stylesheet({
     list: {
-      padding: '8px 0',
+      padding: densed ? '4px 0' : '8px 0',
       margin: 0,
       listStyle: 'none',
       width: '100%',
       boxSizing: 'border-box',
-      background: theme.background,
+      background: background,
+      $nest: {
+        '.list-item': {
+          display: inline ? 'inline-block' : 'block',
+          background: background,
+          $nest: {
+            '&:hover': {
+              filter: hoverColor(background),
+              background: background,
+            },
+          },
+        },
+      },
     },
     listItem: {
       transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       cursor: 'pointer',
       listStyle: 'none',
       overflow: 'hidden',
-      display: 'block',
-      // color: theme.textColor,
       $nest: {
         '&:hover': {
-          background: hoverColor(theme.background),
+          filter: hoverColor(background),
+          background: background,
         },
       },
     },
     nestedItem: {
-      paddingLeft: '20px',
+      paddingLeft: densed ? '10px' : '20px',
       overflowY: 'hidden',
       transition: 'all .6s cubic-bezier(0.4, 0, 0.2, 1)',
     },
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
index 251cca6..20af0a6 100644
--- a/src/components/Menu/Menu.stories.tsx
+++ b/src/components/Menu/Menu.stories.tsx
@@ -1,45 +1,76 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
 
-import { MenuItemGroup, MenuItem, Menu } from '.';
+import { MenuItem, Menu } from '.';
 import { Button } from '../Button';
-import { IoMdOptions } from 'react-icons/io';
-import { MenuItemGroupProps } from './MenuItemGroup';
+import { MenuProps } from './Menu';
+import { MdAcUnit, MdChevronRight, MdExpandMore } from 'react-icons/md';
 
 export default {
   title: 'Navigation/Menu',
-  component: MenuItemGroup,
-  subcomponents: { MenuItem, MenuItemGroup },
-  argTypes: {
-    // backgroundColor: { control: 'color' },
-  },
+  component: Menu,
+  subcomponents: { MenuItem },
 } as Meta;
 
-export const Collapsible: Story<MenuItemGroupProps> = (args) => (
-  <Menu>
-    <MenuItemGroup {...args} title="Options">
-      <MenuItem element={<a />} name="1">
-        Option 1
-      </MenuItem>
-      <MenuItem name="2">Option 2</MenuItem>
-      <MenuItem name="2">Option 3</MenuItem>
-    </MenuItemGroup>
+export const InlineMenu: Story<MenuProps> = (args) => (
+  <Menu {...args} anchor={<Button flat>OPEN MENU</Button>}>
+    <MenuItem element={<a />}>Option 1</MenuItem>
+    <MenuItem>Option 2</MenuItem>
+    <MenuItem>Option 3</MenuItem>
+    <Menu
+      trigger="onHover"
+      position="right"
+      anchor={
+        <MenuItem action={<MdChevronRight />} icon={<MdAcUnit />}>
+          More
+        </MenuItem>
+      }
+    >
+      <MenuItem element={<a />}>Option 4</MenuItem>
+      <MenuItem>Option 5</MenuItem>
+      <MenuItem>Option 6</MenuItem>
+      <Menu trigger="onHover" position="right" anchor={<MenuItem icon={<MdAcUnit />}>Even More</MenuItem>}>
+        <MenuItem element={<a />}>Option 7</MenuItem>
+        <MenuItem>Option 8</MenuItem>
+        <MenuItem>Option 9</MenuItem>
+      </Menu>
+    </Menu>
   </Menu>
 );
 
-export const PopupMenu = Collapsible.bind({});
-PopupMenu.args = {
-  inline: false,
+export const HorizontalMenu: Story<MenuProps> = (args) => (
+  <Menu mode="horizontal" {...args} anchor={<Button flat>OPEN MENU</Button>}>
+    <MenuItem element={<a />}>Option 1</MenuItem>
+    <MenuItem>Option 2</MenuItem>
+    <MenuItem>Option 3</MenuItem>
+    <Menu
+      trigger="onHover"
+      position="right"
+      anchor={
+        <MenuItem action={<MdExpandMore />} icon={<MdAcUnit />}>
+          More
+        </MenuItem>
+      }
+    >
+      <MenuItem element={<a />}>Option 4</MenuItem>
+      <MenuItem>Option 5</MenuItem>
+      <MenuItem>Option 6</MenuItem>
+      <Menu trigger="onHover" position="right" anchor={<MenuItem icon={<MdAcUnit />}>Even More</MenuItem>}>
+        <MenuItem element={<a />}>Option 7</MenuItem>
+        <MenuItem>Option 8</MenuItem>
+        <MenuItem>Option 9</MenuItem>
+      </Menu>
+    </Menu>
+  </Menu>
+);
+
+HorizontalMenu.args = {
+  mode: 'horizontal',
+  elevation: 0,
 };
 
-export const AnchorAndOffset = Collapsible.bind({});
-AnchorAndOffset.args = {
-  inline: false,
-  position: 'bottom',
-  anchor: (
-    <span>
-      <Button icon={<IoMdOptions />} />
-    </span>
-  ),
-  offset: [0, -40],
+export const VerticalMenu = HorizontalMenu.bind({});
+VerticalMenu.args = {
+  mode: 'vertical',
+  elevation: 2,
 };
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index cdca0bb..a4ae3b3 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,7 +1,58 @@
 import * as React from 'react';
-import { List } from '../..';
-import { ListProps } from '../List/List';
+import { CollapsibleList, List } from '../List';
+import { Popover } from '../Popover';
+import { PopoverProps } from '../Popover/Popover';
 
-export const Menu: React.FC<ListProps> = (props) => {
-  return <List {...props}>{props.children}</List>;
+export const Menu: React.FC<MenuProps> = (props) => {
+  const { anchor, trigger, mode, children, position, elevation, backgroundColor, height } = props;
+
+  if (mode === 'expand') {
+    return <CollapsibleList header={anchor}>{children}</CollapsibleList>;
+  }
+
+  if (mode === 'horizontal' || mode === 'vertical') {
+    return (
+      <List
+        backgroundColor={backgroundColor}
+        style={{ width: 'auto' }}
+        inline={mode === 'horizontal'}
+        elevation={elevation}
+      >
+        {children}
+      </List>
+    );
+  }
+
+  return (
+    <Popover
+      cover={!position}
+      hideArrow
+      content={
+        <List style={{ maxHeight: height, overflow: 'auto' }} elevation={elevation}>
+          {children}
+        </List>
+      }
+      position={position}
+      trigger={trigger}
+    >
+      {anchor}
+    </Popover>
+  );
+};
+
+export interface MenuProps {
+  anchor: React.ReactElement;
+  children: React.ReactElement | React.ReactElement[];
+  mode?: 'vertical' | 'horizontal' | 'inline' | 'expand';
+  trigger?: PopoverProps['trigger'];
+  position?: PopoverProps['position'];
+  elevation?: number;
+  backgroundColor?: string;
+  height?: string;
+}
+
+Menu.defaultProps = {
+  mode: 'inline',
+  trigger: 'onClick',
+  height: '500px',
 };
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 57f6396..5d2a285 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -1,34 +1,25 @@
 import * as React from 'react';
-import { SidePanelContext } from '../Layout/Container';
 import { ListItem } from '../List';
 
 export const MenuItem: React.FC<MenuItemProps> = (props) => {
+  const { icon, children, onClick, element, close, active, action } = props;
   return (
-    <SidePanelContext.Consumer>
-      {(context) => {
-        const isBarOpen = context.width > 200;
-        const { nested, icon, name, children, onClick, element, close, active } = props;
-        return (
-          <ListItem
-            key={name}
-            onClick={() => {
-              onClick && onClick();
-              close && close();
-            }}
-            avatar={icon}
-            element={element}
-            selected={active}
-          >
-            {(isBarOpen || nested) && children}
-          </ListItem>
-        );
+    <ListItem
+      onClick={() => {
+        onClick && onClick();
+        close && close();
       }}
-    </SidePanelContext.Consumer>
+      avatar={icon}
+      element={element}
+      selected={active}
+      action={action}
+    >
+      {children}
+    </ListItem>
   );
 };
 
 export interface MenuItemProps {
-  name: string;
   children: React.ReactNode;
   active?: boolean;
   icon?: React.ReactElement;
@@ -36,4 +27,5 @@ export interface MenuItemProps {
   onClick?: () => void;
   element?: React.ReactElement;
   close?: () => void;
+  action?: React.ReactNode;
 }
diff --git a/src/components/Menu/MenuItemGroup.tsx b/src/components/Menu/MenuItemGroup.tsx
deleted file mode 100644
index 9fbf46a..0000000
--- a/src/components/Menu/MenuItemGroup.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import * as React from 'react';
-import { SidePanelContext } from '../Layout/Container';
-import { Popover } from '../Popover';
-import { PopoverProps } from '../Popover/Popover';
-import { CollapsibleList, ListItem } from '../List';
-
-export class MenuItemGroup extends React.Component<MenuItemGroupProps, State> {
-  constructor(props: MenuItemGroupProps) {
-    super(props);
-
-    this.state = {
-      active: this.props.defaultActive,
-      open: false,
-    };
-  }
-
-  static defaultProps = {
-    inline: true,
-    position: 'right',
-  };
-
-  toggle = () => {
-    this.setState({ open: !this.state.open });
-  };
-
-  renderChilden = () => {
-    if (Array.isArray(this.props.children)) {
-      return this.props.children.map((el) => {
-        if (['string', 'number', 'boolean'].indexOf(typeof el) < 0) {
-          return React.cloneElement(el as React.ReactElement, { nested: true, close: this.toggle });
-        }
-      });
-    }
-    return React.cloneElement(this.props.children as React.ReactElement, { nested: true, close: this.toggle });
-  };
-
-  renderPopup = (isBarOpen: boolean) => {
-    const { icon, title, children } = this.props;
-
-    if (isBarOpen) {
-      return (
-        <CollapsibleList header={isBarOpen && title} avatar={icon}>
-          {children}
-        </CollapsibleList>
-      );
-    }
-
-    return (
-      <Popover
-        content={<div style={{ maxHeight: '500px', overflow: 'auto' }}>{this.renderChilden()}</div>}
-        trigger={this.props.trigger}
-        position={this.props.position}
-        visible={this.state.open}
-        onVisibleChange={(open) => this.setState({ open })}
-        hideArrow
-        style={{
-          content: {
-            padding: '0',
-          },
-          child: {
-            display: 'inline-block',
-          },
-        }}
-        align={this.props.offset && { offset: this.props.offset }}
-      >
-        {this.props.anchor || (
-          <ListItem avatar={icon} onClick={this.toggle} key={name}>
-            {!this.props.inline && title}
-          </ListItem>
-        )}
-      </Popover>
-    );
-  };
-
-  render() {
-    return (
-      <SidePanelContext.Consumer>
-        {(context) => {
-          const isBarOpen = this.props.inline && context.width > 200;
-          return this.renderPopup(isBarOpen);
-        }}
-      </SidePanelContext.Consumer>
-    );
-  }
-}
-
-export interface MenuItemGroupProps {
-  title: React.ReactNode;
-  icon?: React.ReactNode;
-  name?: string;
-  defaultActive?: boolean;
-  inline?: boolean;
-  position?: PopoverProps['position'];
-  trigger?: PopoverProps['trigger'];
-
-  /**
-   * Custom element to be shown as anchor
-   * Applicable only for popover menu.
-   */
-  anchor?: PopoverProps['children'];
-
-  /**
-   * Offset for element popup placement
-   * [X, Y]
-   */
-  offset?: [number, number];
-}
-
-interface State {
-  active?: boolean;
-  open: boolean;
-}
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index ab4f36b..4825138 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -1,3 +1,2 @@
 export { MenuItem } from './MenuItem';
-export { MenuItemGroup } from './MenuItemGroup';
 export { Menu } from './Menu';
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index a9469e7..524e7c6 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,21 +1,37 @@
 import * as React from 'react';
 import { Portal } from '../Popover/Portal';
-import { style as typeStyle, stylesheet, keyframes, classes } from 'typestyle';
+import { style as typeStyle, stylesheet, keyframes, classes, style, media } from 'typestyle';
 import { Theme, ThemeConsumer } from '../Theme/Theme';
 import { colorShades } from '../../helpers/color';
 import elevations from '../../helpers/elevations';
 
 export const Modal: React.FunctionComponent<ModalProps> = (props) => {
-  const { children, onClose, isVisible, style = {}, width, elevation = 0 } = props;
+  const { children, onClose = () => ({}), isVisible, style = {}, width, elevation = 24 } = props;
 
   if (!isVisible) {
-    document.body.style.overflow = 'auto';
-    document.body.style.position = '';
     return null;
   }
 
-  document.body.style.overflow = 'hidden';
-  document.body.style.position = 'relative';
+  const [className, updateClassName] = React.useState('');
+
+  const beforeClose = () => {
+    const slideOutRight = keyframes({
+      '0%': {
+        transform: 'translateY(0)',
+      },
+      '100%': {
+        transform: 'translateY(120vh)',
+      },
+    });
+
+    setTimeout(onClose, 200);
+
+    updateClassName(
+      typeStyle({
+        animation: `${slideOutRight} .2s ease-in both !important`,
+      }),
+    );
+  };
 
   return (
     <Portal key="modal">
@@ -23,10 +39,10 @@ export const Modal: React.FunctionComponent<ModalProps> = (props) => {
         {(theme) => {
           const css = modalStyle(theme);
           return (
-            <div key="mask" className={MaskStyle} onClick={() => onClose && onClose()}>
+            <div key="mask" className={MaskStyle} onClick={() => onClose && beforeClose()}>
               <div
                 key="container"
-                className={classes(css.container, css[`elevation${elevation}`])}
+                className={classes(mediaQueries, css.container, css[`elevation${elevation}`], className)}
                 style={{ width, ...style }}
                 onClick={(e) => e.stopPropagation()}
               >
@@ -51,6 +67,41 @@ const slideInBottom = keyframes({
   },
 });
 
+const mediaQueries = style(
+  media(
+    {
+      maxWidth: 768,
+    },
+    {
+      width: '99vw',
+    },
+  ),
+  media(
+    {
+      minWidth: 768,
+    },
+    {
+      width: '80vw',
+    },
+  ),
+  media(
+    {
+      minWidth: 992,
+    },
+    {
+      width: '70vw',
+    },
+  ),
+  media(
+    {
+      minWidth: 1200,
+    },
+    {
+      width: '50vw',
+    },
+  ),
+);
+
 const modalStyle = (theme: Theme) => {
   return stylesheet({
     container: {
@@ -59,7 +110,6 @@ const modalStyle = (theme: Theme) => {
       zIndex: 1001,
       top: '10vh',
       overflowY: 'auto',
-      width: '50vw',
       animation: `${slideInBottom} 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both`,
       borderRadius: '2px',
     },
diff --git a/src/components/Page/Page.stories.tsx b/src/components/Page/Page.stories.tsx
index f14f480..03fcc7c 100644
--- a/src/components/Page/Page.stories.tsx
+++ b/src/components/Page/Page.stories.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
 
-import { Page, Row, Col, Tag, TabPanel, Card, Collapse } from '../../';
+import { Page, Row, Col, Tag, TabPanel, Card, Collapse, AutoComplete } from '../../';
 
 import { Textarea, Input } from '../Input';
 
-import { MdArrowBack, MdSearch } from 'react-icons/md';
+import { MdAdd, MdArrowBack, MdSearch } from 'react-icons/md';
 import { Breadcrumb } from '../Breadcrumb';
 import { FlexTable } from '../Table';
 import MOCK_DATA from '../Table/MOCK_DATA.json';
+import { Button } from '../Button';
 
 type DataType = typeof MOCK_DATA[0];
 
@@ -39,6 +40,11 @@ export const Basic = () => (
         List
       </Tag>,
     ]}
+    bottom={
+      <Button type="primary" outline icon={<MdAdd />}>
+        Add
+      </Button>
+    }
     tabs={{
       defaultActiveKey: 'a',
       headers: [
@@ -70,7 +76,15 @@ export const Basic = () => (
           Yolo
         </TabPanel>,
         <TabPanel key="c" title="YOLO">
-          Yolo
+          <AutoComplete
+            mode="single"
+            data={() => ['Bruce', 'Clark', 'Arthur', 'Diana']}
+            uniqueIdentifier={(e) => e}
+            listDisplayProp={(e) => e}
+            label="Select Alter Ego"
+            displayValue={(e) => e as string}
+            hint="Select an alter ego"
+          />
         </TabPanel>,
         <TabPanel key="d" title="YOLO">
           Yolo
@@ -101,12 +115,51 @@ export const Basic = () => (
           <Col span={12}>HELLO</Col>
         </Row>
       </Collapse>
+      <AutoComplete
+        mode="single"
+        data={() => ['Bruce', 'Clark', 'Arthur', 'Diana']}
+        uniqueIdentifier={(e) => e}
+        listDisplayProp={(e) => e}
+        label="Select Alter Ego"
+        displayValue={(e) => e as string}
+        hint="Select an alter ego"
+      />
+      <AutoComplete
+        mode="single"
+        data={() => ['Bruce', 'Clark', 'Arthur', 'Diana']}
+        uniqueIdentifier={(e) => e}
+        listDisplayProp={(e) => e}
+        label="Select Alter Ego"
+        displayValue={(e) => e as string}
+        hint="Select an alter ego"
+      />
+      <AutoComplete
+        mode="single"
+        data={() => ['Bruce', 'Clark', 'Arthur', 'Diana']}
+        uniqueIdentifier={(e) => e}
+        listDisplayProp={(e) => e}
+        label="Select Alter Ego"
+        displayValue={(e) => e as string}
+        hint="Select an alter ego"
+      />
+      <AutoComplete
+        mode="single"
+        data={() => ['Bruce', 'Clark', 'Arthur', 'Diana']}
+        uniqueIdentifier={(e) => e}
+        listDisplayProp={(e) => e}
+        label="Select Alter Ego"
+        displayValue={(e) => e as string}
+        hint="Select an alter ego"
+      />
+      <AutoComplete
+        mode="single"
+        data={() => ['Bruce', 'Clark', 'Arthur', 'Diana']}
+        uniqueIdentifier={(e) => e}
+        listDisplayProp={(e) => e}
+        label="Select Alter Ego"
+        displayValue={(e) => e as string}
+        hint="Select an alter ego"
+      />
     </Card>
   </Page>
 );
-// stories.add(
-//   'Page',
-//   withInfo()(() => (
-//
-//   )),
-// );
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 3889f18..5059d75 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -31,13 +31,13 @@ export const Page: React.FC<PageProps> = (props) => {
               </Row>
               {(props.bottom || props.tabs) && (
                 <div style={{ paddingRight: '0', paddingLeft: '0' }} className={classes(css.bottom)}>
-                  <Row gutter={[0, 0]} alignItems="flex-end">
+                  <Row gutter={[0, 0]} alignItems="center" justifyContent="space-between">
                     {props.tabs && (
-                      <Col flex="0 1 auto">
+                      <Col flex="1 0 auto">
                         <TabHeader titles={props.tabs.headers} activeKey={activeKey} onClick={setActiveKey} />
                       </Col>
                     )}
-                    <Col flex="1 0 auto">{props.bottom}</Col>
+                    <Col flex="0 1 auto">{props.bottom}</Col>
                   </Row>
                 </div>
               )}
@@ -64,9 +64,7 @@ const style = (theme: Theme) => {
   const shadowDef = shadow('DEFAULT', theme);
 
   return stylesheet({
-    container: {
-      margin: '1%',
-    },
+    container: {},
     header: {
       padding: '0px 1.5%',
       background: theme.background,
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index acefb25..b6351aa 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
 import { MdExpandMore } from 'react-icons/md';
-import { Row, Col, Text, MenuItem, MenuItemGroup } from '../..';
+import { Row, Col, Text, MenuItem, Menu } from '../..';
 import { Button } from '../Button';
 import { RowProps } from '../Grid/Row';
 import { Input } from '../Input';
@@ -12,37 +12,36 @@ export const Pagination: React.FC<PaginationProps> = (props) => {
     <Row alignItems="center" justifyContent={justify} gutter={[0, '10px']}>
       {itemsPerPage && (
         <Col flex="0 1 auto">
-          <MenuItemGroup
+          <Menu
             anchor={
               <Input
                 style={{ width: '50px' }}
                 after={<MdExpandMore />}
                 label="Items/Page"
                 value={batchSize}
+                readOnly
                 borderLess
               />
             }
-            inline={false}
             position="bottom"
-            title="Options"
           >
             {itemsPerPage.map((v) => (
-              <MenuItem onClick={() => onChange(1, v, false, false)} key={`pagination-${v}`} name={`pagination-${v}`}>
+              <MenuItem onClick={() => onChange?.(1, v, false, false)} key={`pagination-${v}`}>
                 {v}
               </MenuItem>
             ))}
-          </MenuItemGroup>
+          </Menu>
         </Col>
       )}
       <Col flex="0 1 auto">
         <Text color="light">
-          {batchSize * (currentPage - 1) + 1} -{' '}
+          {totalCount === 0 ? 0 : batchSize * (currentPage - 1) + 1} -{' '}
           {batchSize * currentPage > totalCount ? totalCount : batchSize * currentPage} of {totalCount}
         </Text>
       </Col>
       <Col flex="0 1 auto">
         <Button
-          onClick={() => onChange(currentPage - 1, batchSize, false, true)}
+          onClick={() => onChange?.(currentPage - 1, batchSize, false, true)}
           disabled={currentPage === 1}
           flat
           icon={<IoIosArrowBack />}
@@ -51,8 +50,8 @@ export const Pagination: React.FC<PaginationProps> = (props) => {
       <Col flex="0 1 auto">{currentPage}</Col>
       <Col flex="0 1 auto">
         <Button
-          onClick={() => onChange(currentPage + 1, batchSize, true, false)}
-          disabled={currentPage === Math.ceil(totalCount / batchSize)}
+          onClick={() => onChange?.(currentPage + 1, batchSize, true, false)}
+          disabled={currentPage === Math.ceil(totalCount / batchSize) || totalCount === 0}
           flat
           icon={<IoIosArrowForward />}
         />
diff --git a/src/components/Popover/Popover.stories.tsx b/src/components/Popover/Popover.stories.tsx
index be74ab0..25b199f 100644
--- a/src/components/Popover/Popover.stories.tsx
+++ b/src/components/Popover/Popover.stories.tsx
@@ -4,6 +4,7 @@ import { Story, Meta } from '@storybook/react';
 import { Popover, PopoverProps } from './Popover';
 import { Button } from '../Button';
 import { Row, Col } from '../Grid';
+import { Text } from '../Text';
 
 export default {
   title: 'Feedback/Popover',
@@ -14,7 +15,14 @@ export default {
 } as Meta;
 
 export const Basic: Story<PopoverProps> = (args) => (
-  <Popover {...args} content={<h1>Hello</h1>}>
+  <Popover
+    {...args}
+    content={
+      <Text margin="15px" variant="h4">
+        Content
+      </Text>
+    }
+  >
     <Button>Hello</Button>
   </Popover>
 );
@@ -23,46 +31,110 @@ export const Position: Story<PopoverProps> = (args) => (
   <>
     <Row justifyContent="center">
       <Col span={8}>
-        <Popover {...args} position="topLeft" content={<span>Hello</span>}>
+        <Popover
+          {...args}
+          position="topLeft"
+          content={
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          }
+        >
           <Button>Top left</Button>
         </Popover>
       </Col>
       <Col span={8}>
-        <Popover {...args} position="top" content={<span>Hello</span>}>
+        <Popover
+          {...args}
+          position="top"
+          content={
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          }
+        >
           <Button>Top</Button>
         </Popover>
       </Col>
       <Col span={8}>
-        <Popover {...args} position="topRight" content={<span>Hello</span>}>
+        <Popover
+          {...args}
+          position="topRight"
+          content={
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          }
+        >
           <Button>Top Right</Button>
         </Popover>
       </Col>
     </Row>
     <Row justifyContent="center">
       <Col span={8}>
-        <Popover {...args} position="left" content={<span>Hello</span>}>
+        <Popover
+          {...args}
+          position="left"
+          content={
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          }
+        >
           <Button>left</Button>
         </Popover>
       </Col>
       <Col span={8}>
-        <Popover {...args} position="right" content={<span>Hello</span>}>
+        <Popover
+          {...args}
+          position="right"
+          content={
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          }
+        >
           <Button>Right</Button>
         </Popover>
       </Col>
     </Row>
     <Row justifyContent="center">
       <Col span={8}>
-        <Popover {...args} position="bottomLeft" content={<span>Hello</span>}>
+        <Popover
+          {...args}
+          position="bottomLeft"
+          content={
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          }
+        >
           <Button>Bottom Left</Button>
         </Popover>
       </Col>
       <Col span={8}>
-        <Popover {...args} position="bottom" content={<span>Hello</span>}>
+        <Popover
+          {...args}
+          position="bottom"
+          content={
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          }
+        >
           <Button>Bottom</Button>
         </Popover>
       </Col>
       <Col span={8}>
-        <Popover {...args} position="bottomRight" content={<span>Hello</span>}>
+        <Popover
+          {...args}
+          position="bottomRight"
+          content={
+            <Text margin="15px" variant="h4">
+              Content
+            </Text>
+          }
+        >
           <Button>Bottom Right</Button>
         </Popover>
       </Col>
@@ -72,20 +144,52 @@ export const Position: Story<PopoverProps> = (args) => (
 
 export const Triggers: Story<PopoverProps> = (args) => (
   <>
-    <Popover {...args} trigger="onClick" content={<h1>Hello</h1>}>
+    <Popover
+      {...args}
+      trigger="onClick"
+      content={
+        <Text margin="15px" variant="h4">
+          Content
+        </Text>
+      }
+    >
       <Button>Click</Button>
     </Popover>
-    <Popover {...args} trigger="onFocus" content={<h1>Hello</h1>}>
+    <Popover
+      {...args}
+      trigger="onFocus"
+      content={
+        <Text margin="15px" variant="h4">
+          Content
+        </Text>
+      }
+    >
       <Button>Focus</Button>
     </Popover>
-    <Popover {...args} trigger="onHover" content={<h1>Hello</h1>}>
+    <Popover
+      {...args}
+      trigger="onHover"
+      content={
+        <Text margin="15px" variant="h4">
+          Content
+        </Text>
+      }
+    >
       <Button>Hover</Button>
     </Popover>
   </>
 );
 
 export const HideArrow: Story<PopoverProps> = (args) => (
-  <Popover {...args} content={<h1>Hello</h1>} hideArrow>
+  <Popover
+    {...args}
+    content={
+      <Text margin="15px" variant="h4">
+        Content
+      </Text>
+    }
+    hideArrow
+  >
     <Button>Hello</Button>
   </Popover>
 );
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 55dc46e..95d4c96 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -10,6 +10,7 @@ export class Popover extends React.Component<PopoverProps, State> {
     trigger: 'onClick',
     position: 'bottom',
     style: {},
+    elevation: 12,
   };
 
   child = React.createRef<HTMLDivElement>();
@@ -19,13 +20,18 @@ export class Popover extends React.Component<PopoverProps, State> {
 
     this.state = {
       childWidth: 0,
+      childHeight: 0,
       isBrowser: false,
       visible: false,
     };
   }
 
   componentDidMount() {
-    this.setState({ childWidth: this.child.current.getBoundingClientRect().width });
+    const childRect = this.child.current?.getBoundingClientRect();
+    this.setState({
+      childWidth: childRect?.width || 0,
+      childHeight: childRect?.height || 0,
+    });
     this.isBrowser();
   }
 
@@ -35,7 +41,7 @@ export class Popover extends React.Component<PopoverProps, State> {
         visible: props.visible,
       };
     }
-    return null;
+    return {};
   }
 
   isBrowser = () => {
@@ -49,9 +55,9 @@ export class Popover extends React.Component<PopoverProps, State> {
     const { hideArrow } = this.props;
     return (
       <div>
-        <div className="rc-tooltip-arrow" style={{ display: !hideArrow && 'block' }} />
+        <div className="rc-tooltip-arrow" style={{ display: !hideArrow ? 'block' : 'none' }} />
         <div>
-          <div style={this.props.style.content}>{this.props.content}</div>
+          <div style={this.props.style?.content}>{this.props.content}</div>
         </div>
       </div>
     );
@@ -63,7 +69,7 @@ export class Popover extends React.Component<PopoverProps, State> {
       children,
       preserveOnClose,
       position,
-      style: { container: containerStyle, child: childStyle },
+      style: { container: containerStyle = {}, child: childStyle = {} } = {},
       onVisibleChange,
       elevation = 12,
     } = this.props;
@@ -79,7 +85,7 @@ export class Popover extends React.Component<PopoverProps, State> {
     return (
       <ThemeConsumer>
         {(theme) => {
-          const css = style(this.props.expand, this.state.childWidth, theme);
+          const css = style(this.props.expand || false, this.state.childWidth, theme);
           return (
             <RCTooltip
               placement={position}
@@ -89,11 +95,12 @@ export class Popover extends React.Component<PopoverProps, State> {
               overlayClassName={classes(css.container, css[`elevation${elevation}`])}
               overlayStyle={containerStyle}
               onVisibleChange={(v) => {
-                this.setState({ visible: v, childWidth: this.child.current?.getBoundingClientRect().width });
+                this.setState({ visible: v, childWidth: this.child.current?.getBoundingClientRect().width || 0 });
                 onVisibleChange && onVisibleChange(v);
               }}
               visible={this.state.visible}
-              align={this.props.align}
+              align={this.props.cover ? { points: ['tl', 't'] } : this.props.align}
+              animation={this.props.animation}
             >
               <div ref={this.child} style={{ display: 'inline-block', ...childStyle }}>
                 {React.cloneElement(children)}
@@ -111,14 +118,14 @@ const triggers = (t: PopoverProps['trigger']) =>
     onClick: 'click',
     onHover: 'hover',
     onFocus: 'focus',
-  }[t]);
+  }[t || 'onClick']);
 
 function style(expand: boolean, childWidth: number, theme: Theme) {
   return stylesheet({
     container: {
       width: expand ? childWidth : 'auto',
       minWidth: '100px',
-      borderRadius: '2px',
+      borderRadius: '4px',
       padding: '0',
       background: theme.background,
       color: `${theme.textColor} !important`,
@@ -145,10 +152,13 @@ export interface PopoverProps {
   onVisibleChange?: (visible?: boolean) => void;
   align?: Record<string, unknown>;
   elevation: number;
+  cover?: boolean;
+  animation?: string;
 }
 
 interface State {
   childWidth: number;
   isBrowser: boolean;
   visible: boolean;
+  childHeight: number;
 }
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
index 07b8baa..80ee7f9 100644
--- a/src/components/Slider/Slider.stories.tsx
+++ b/src/components/Slider/Slider.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
 
-import { Slider, SliderProps, Range as SlRange, RangeProps, Handle } from './Slider';
+import { Slider, SliderProps, Range as SlRange, RangeProps, SliderHandle } from './Slider';
 import { Text } from '../Text';
 import { SliderTooltip } from 'rc-slider';
 
@@ -39,7 +39,7 @@ Marks.args = {
 export const WithTooltip: Story<SliderProps> = (args) => {
   const handle = ({ value, dragging, ...rest }: { value: number; dragging?: boolean }) => (
     <SliderTooltip visible={dragging} prefixCls="rc-slider-tooltip" overlay={`${value} KM`} placement="top">
-      <Handle value={value} {...rest} />
+      <SliderHandle value={value} {...rest} />
     </SliderTooltip>
   );
   return <Slider {...args} handle={handle} />;
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 81bf869..f24392b 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -28,4 +28,4 @@ export const Range: React.FC<RangeProps> = (props) => {
   );
 };
 
-export { RangeProps, SliderProps, HandleProps, Handle, SliderTooltip };
+export { RangeProps, SliderProps, HandleProps, Handle as SliderHandle, SliderTooltip };
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
index ecad1fc..65ee6c0 100644
--- a/src/components/Slider/index.ts
+++ b/src/components/Slider/index.ts
@@ -1 +1 @@
-export { Slider, SliderTooltip, Range, Handle } from './Slider';
+export { Slider, SliderTooltip, Range, SliderHandle } from './Slider';
diff --git a/src/components/Table/FlexTable.stories.tsx b/src/components/Table/FlexTable.stories.tsx
index e7fd6a7..7ce3b1f 100644
--- a/src/components/Table/FlexTable.stories.tsx
+++ b/src/components/Table/FlexTable.stories.tsx
@@ -12,7 +12,7 @@ import { IoMdFunnel } from 'react-icons/io';
 import { MdClear } from 'react-icons/md';
 
 export default {
-  title: 'Display/FlexTable',
+  title: 'Display/Flex Table',
   component: FlexTable,
   subcomponents: { Column: FlexTable.Column },
   argTypes: {
diff --git a/src/components/Table/FlexTable.tsx b/src/components/Table/FlexTable.tsx
index 4ac3c5d..1353b5d 100644
--- a/src/components/Table/FlexTable.tsx
+++ b/src/components/Table/FlexTable.tsx
@@ -61,7 +61,6 @@ export function FlexTable<T>(props: FlexTableProps<T>) {
               className={css.header}
               style={style.header}
               gutter={[0, 0]}
-              selected
               action={nested && <MdExpandMore style={{ color: disabledColor(theme) }} />}
             >
               <Row gutter={[0, '15px']} alignItems="stretch">
@@ -69,7 +68,7 @@ export function FlexTable<T>(props: FlexTableProps<T>) {
               </Row>
             </ListItem>
             <Skeleton
-              isLoading={loading}
+              isLoading={loading || false}
               render={() => (
                 <>
                   {showEmptyState(css.empty)}
@@ -80,7 +79,7 @@ export function FlexTable<T>(props: FlexTableProps<T>) {
                         )
                       : React.cloneElement(props.children, { data: v, key: `col-${index}`, index });
 
-                    if (nested && nested.exapandable(v, index)) {
+                    if (nested && nested.exapandable?.(v, index)) {
                       return (
                         <CollapsibleList
                           header={
@@ -116,7 +115,7 @@ export function FlexTable<T>(props: FlexTableProps<T>) {
                 </>
               )}
             />
-            {pagination}
+            {pagination || <div />}
           </List>
         );
       }}
@@ -150,7 +149,7 @@ interface ColumnProps<T> extends ColProps {
   /**
    * Index will have -1 for header
    */
-  children: (data: T, index: number) => React.ReactNode;
+  children: (data?: T, index?: number) => React.ReactNode;
   header?: React.ReactNode;
   key: string;
 }
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index c8fda63..eb5ebef 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Story, Meta } from '@storybook/react';
 
 import { Table } from '.';
-import { Row, Col, MenuItemGroup, MenuItem, Tooltip, Pagination } from '../..';
+import { Row, Col, MenuItem, Tooltip, Pagination, Menu } from '../..';
 import { MdSort, MdSortByAlpha } from 'react-icons/md';
 import { TableProps } from './Table';
 
@@ -41,25 +41,23 @@ export const BasicTableWithHeadersAndFooters: Story<TableProps<{ name: string; a
       <Row justifyContent="flex-end" gutter={['0', '0']}>
         <Col flex="1 0 auto">Profile Table</Col>
         <Col flex="0 1 auto">
-          <MenuItemGroup title="" icon={<MdSort />} inline={false} position="bottom">
-            <MenuItem name={'List'} key={'List'}>
-              {'List'}
-            </MenuItem>
-          </MenuItemGroup>
+          <Menu anchor={<MdSort />} position="bottom">
+            <MenuItem key={'List'}>{'List'}</MenuItem>
+          </Menu>
         </Col>
         <Col flex="0 1 auto">
           <Tooltip overlay="Sorting Order" trigger={['hover']}>
             <div>
-              <MenuItemGroup title="" icon={<MdSortByAlpha />} inline={false} position="bottom">
-                <MenuItem name="asc">Ascending</MenuItem>
-                <MenuItem name="desc">Descening</MenuItem>
-              </MenuItemGroup>
+              <Menu anchor={<MdSortByAlpha />} position="bottom">
+                <MenuItem>Ascending</MenuItem>
+                <MenuItem>Descening</MenuItem>
+              </Menu>
             </div>
           </Tooltip>
         </Col>
       </Row>
     }
-    footer={<Pagination batchSize={20} totalCount={19} currentPage={1} showTotal />}
+    footer={<Pagination batchSize={20} totalCount={19} currentPage={1} />}
   />
 );
 
diff --git a/src/components/Table/style.ts b/src/components/Table/style.ts
index ae46a17..c7d3ee0 100644
--- a/src/components/Table/style.ts
+++ b/src/components/Table/style.ts
@@ -1,3 +1,4 @@
+import { borderColor } from 'csx';
 import { stylesheet } from 'typestyle';
 import { lightText, shadowColor } from '../../helpers/color';
 import { Theme } from '../Theme/Theme';
@@ -22,22 +23,21 @@ export const style = (theme: Theme, nested: boolean, clickableRow: boolean) => {
     header: {
       fontWeight: 600,
       fontSize: '12px',
+      color: lightText(theme),
+      borderBottom: '2px solid ' + borderColor(theme.bodyBg),
+      cursor: 'default',
       $nest: {
         '&:hover': {
-          background: `${theme.primary}`,
+          background: theme.background,
         },
       },
     },
     tableRow: {
       padding: '0',
-      cursor: !nested && !clickableRow && 'auto !important',
+      cursor: (!nested && !clickableRow && 'auto !important') || undefined,
       fontFamily: "'Fira Code', monospace !important",
-      $nest: {
-        '& .table-cell': {
-          borderBottom: `1px solid ${shadowColor(theme)[0]}`,
-          borderCollapse: 'collapse',
-        },
-      },
+      borderBottom: `1px solid ${shadowColor(theme)[0]}`,
+      borderCollapse: 'collapse',
     },
     nestedContent: {
       marginLeft: '-20px',
diff --git a/src/components/Tabs/TabPanelContainer.tsx b/src/components/Tabs/TabPanelContainer.tsx
index 5a45af2..c7f4c36 100644
--- a/src/components/Tabs/TabPanelContainer.tsx
+++ b/src/components/Tabs/TabPanelContainer.tsx
@@ -45,7 +45,7 @@ interface TabPanelContainerProps {
   titles: TabPanelProps[];
   activeKey: string;
   children: React.ReactNode;
-  unMountOnChange: boolean;
+  unMountOnChange?: boolean;
 }
 
 const Container = posed.div({
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 6dd5f6e..5b3b655 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -42,7 +42,7 @@ export class Tabs extends React.Component<TabsProps, State> {
     return (
       <div>
         <TabHeader titles={titles} activeKey={activeKey} onClick={(key) => this.setState({ activeKey: key })} />
-        <TabPanelContainer titles={titles} activeKey={activeKey} unMountOnChange={this.props.unMountOnChange}>
+        <TabPanelContainer titles={titles} activeKey={activeKey} unMountOnChange={this.props.unMountOnChange || false}>
           {this.props.children}
         </TabPanelContainer>
       </div>
diff --git a/src/components/Tabs/style.ts b/src/components/Tabs/style.ts
index 8c43b99..98ca366 100644
--- a/src/components/Tabs/style.ts
+++ b/src/components/Tabs/style.ts
@@ -41,7 +41,8 @@ export const style = (theme: Theme) => {
       $nest: {
         '&:hover': {
           color: theme.primary,
-          background: hoverColor(theme.background),
+          filter: hoverColor(theme.background),
+          background: theme.background,
         },
       },
     },
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index f76570f..58a2523 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -11,7 +11,7 @@ export const Tag: React.StatelessComponent<TagProps> = (props) => {
   return (
     <ThemeConsumer>
       {(theme) => (
-        <span className={css(props, theme)} onClick={() => props.onClick()} style={props.style}>
+        <span className={css(props, theme)} onClick={() => props?.onClick()} style={props.style}>
           {props.children}
           {props.chips && (
             <span className={chipIconCss()}>
@@ -72,7 +72,7 @@ const css = (props: TagProps, theme: Theme) =>
     margin: '5px',
     display: 'inline-flex',
     boxShadow: shadow('DEFAULT', theme),
-    cursor: 'pointer',
+    cursor: props.onClick && 'pointer',
     textTransform: 'uppercase',
     minWidth: '64px',
     textAlign: 'center',
@@ -94,7 +94,6 @@ export interface TagProps {
 }
 
 Tag.defaultProps = {
-  onClick: () => null,
   style: {},
   size: 'DEFAULT',
 };
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
index c90f010..c08fffd 100644
--- a/src/components/Text/Text.stories.tsx
+++ b/src/components/Text/Text.stories.tsx
@@ -31,7 +31,7 @@ export const Variants = () => (
 
 export const Styling = () => (
   <>
-    <Text underline fontWeight="bold" padding="5px" variant="p">
+    <Text underline fontWeight="bold" padding="5px" variant="p" textAlign="center">
       The quick brown fox jumps over the lazy dog
     </Text>
     <Text strikeThrough italicize padding="5px" variant="p">
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index a570c68..dab4e00 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -70,6 +70,14 @@ export const Text: React.FunctionComponent<TextProps> = (props) => {
       );
     }
 
+    if (props.variant === 'label') {
+      return (
+        <label className={css} style={props.style}>
+          {props.children}
+        </label>
+      );
+    }
+
     return (
       <span className={css} style={props.style}>
         {props.children}
@@ -84,7 +92,7 @@ export interface TextProps {
   /**
    *  Defines variant for heading.
    */
-  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'label';
   /**
    * Sets the font style to italics.
    */
@@ -127,6 +135,11 @@ export interface TextProps {
    */
   fontWeight?: React.CSSProperties['fontWeight'];
 
+  /**
+   * Add text align
+   */
+  textAlign?: React.CSSProperties['textAlign'];
+
   className?: string;
 }
 
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 0000000..8aad358
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Tooltip } from '../..';
+
+import { Button } from '../Button';
+import { Text } from '../Text';
+import { TooltipProps } from './Tooltip';
+
+export default {
+  title: 'Feedback/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    // backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+export const Basic: Story<TooltipProps> = (args) => (
+  <Tooltip {...args} placement="top" overlay={<Text>Content</Text>}>
+    <Button>Hello</Button>
+  </Tooltip>
+);
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
new file mode 100644
index 0000000..7350d86
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import RCTooltip from 'rc-tooltip';
+import { TooltipProps } from 'rc-tooltip/lib/Tooltip';
+import { Theme, ThemeConsumer } from '../Theme/Theme';
+import { stylesheet } from 'typestyle';
+import { color } from 'csx';
+import { colorShades } from '../../helpers/color';
+
+const style = (theme: Theme) =>
+  stylesheet({
+    overlay: {
+      background: colorShades(color(theme.background).invert().toString())[4],
+      color: theme.background,
+      borderRadius: '4px',
+      padding: '5px 10px',
+    },
+  });
+
+export const Tooltip: React.FC<TooltipProps> = (props) => {
+  return (
+    <ThemeConsumer>
+      {(theme) => {
+        const css = style(theme);
+
+        return <RCTooltip {...props} overlayClassName={css.overlay} />;
+      }}
+    </ThemeConsumer>
+  );
+};
+
+export { TooltipProps };
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
new file mode 100644
index 0000000..b44d466
--- /dev/null
+++ b/src/components/Tooltip/index.ts
@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';
diff --git a/src/helpers/color.ts b/src/helpers/color.ts
index 3f3b111..6b4c5eb 100644
--- a/src/helpers/color.ts
+++ b/src/helpers/color.ts
@@ -19,7 +19,7 @@ export const shadowColor = (theme: Theme) => {
 
 export const hoverColor = (bgColor: string) => {
   const color = csxColor(bgColor);
-  return (color.lightness() > 0.7 ? color.darken(0.1) : color.lighten(0.1)).toString();
+  return color.lightness() > 0.7 ? 'brightness(90%)' : 'brightness(130%)';
 };
 
 export const borderColor = (bodyBg: string) => {
@@ -31,20 +31,41 @@ export const disabledColor = (theme: Theme) => {
   return getColor(theme.background, 'rgba(0, 0, 0, 0.20)', 'rgba(255,255,255,0.20)');
 };
 
+export const disabledText = (theme: Theme) => {
+  return getColor(theme.background, 'rgba(0, 0, 0, 0.38)', 'rgba(255, 255, 255, 0.5)');
+};
+
 /**
  * @param props: ButtonProps,
  * @param theme: Theme
  * @returns [backgroundColor, textColor, hoverBgColor, border],
  */
-export const buttonColor = (props: ButtonProps, theme: Theme): [string, string, string, string] => {
+export const buttonColor = (
+  props: ButtonProps,
+  theme: Theme,
+  primary,
+  secondary: boolean,
+  danger: boolean,
+  link: boolean,
+): [string, string, string, string] => {
   let backgroundColor = 'transparent';
   let textColor = '';
   let hoverBgColor = 'none';
   let border = 'none';
 
-  const defaultColor = () => (props.type === 'default' ? getColor(theme.background) : theme[props.type]);
+  const type = primary
+    ? 'primary'
+    : secondary
+    ? 'secondary'
+    : danger
+    ? 'danger'
+    : link
+    ? 'link'
+    : props.type || 'default';
+
+  const defaultColor = () => (type === 'default' ? getColor(theme.background) : theme[type]);
 
-  if (props.type === 'link') {
+  if (type === 'link') {
     textColor = getColor(theme.background, theme.primary, csxColor(theme.primary).lighten(0.7).toString());
   } else if (props.flat) {
     textColor = defaultColor();
@@ -52,11 +73,11 @@ export const buttonColor = (props: ButtonProps, theme: Theme): [string, string,
   } else if (props.outline) {
     border = `1px solid ${defaultColor()}`;
     textColor = defaultColor();
-    hoverBgColor = csxColor(theme[props.type]).fade(0.2).toString();
+    hoverBgColor = csxColor(theme[type]).fade(0.2).toString();
   }
 
-  if (!(props.flat || props.outline || props.type === 'link')) {
-    backgroundColor = props.type === 'default' ? colorShades(theme.background)[1] : theme[props.type];
+  if (!(props.flat || props.outline || type === 'link' || link)) {
+    backgroundColor = type === 'default' ? colorShades(theme.background)[1] : theme[type];
     textColor = getColor(backgroundColor);
     hoverBgColor = csxColor(backgroundColor).lighten(0.1).toHexString();
   }
@@ -64,7 +85,7 @@ export const buttonColor = (props: ButtonProps, theme: Theme): [string, string,
   if (props.disabled && props.outline) {
     border = `1px solid ${disabledColor(theme)}`;
     textColor = disabledColor(theme);
-  } else if (props.disabled && !(props.type === 'link' || props.flat) && !props.outline) {
+  } else if (props.disabled && !(type === 'link' || link || props.flat) && !props.outline) {
     backgroundColor = disabledColor(theme);
     textColor = getColor(disabledColor(theme));
   } else if (props.disabled && !props.outline) {
@@ -74,7 +95,7 @@ export const buttonColor = (props: ButtonProps, theme: Theme): [string, string,
 
   if (props.loading) {
     backgroundColor =
-      backgroundColor === 'transparent' || props.type === 'default'
+      backgroundColor === 'transparent' || type === 'default'
         ? 'transparent'
         : color(backgroundColor).lighten(0.1).toHexString();
   }
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 9b76e26..b66acfe 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -5,7 +5,10 @@ import { initializeNotification } from './../components/Notification/Notificatio
 import popverCss from './popover.css';
 import topography from './topography.css';
 
-export function removeObjectProperties<T>(obj: T, ...props: (keyof T)[]): Omit<T, keyof T> {
+export function removeObjectProperties<T extends Record<string, unknown>>(
+  obj: T,
+  ...props: (keyof T)[]
+): Omit<T, keyof T> {
   obj = { ...obj };
   for (let i = 0; i < props.length; i++) {
     if (obj.hasOwnProperty(props[i])) {
@@ -78,7 +81,7 @@ export function initialize() {
 }
 
 export function arrayBetween(num1: number, num2: number) {
-  const arr = [];
+  const arr: number[] = [];
   for (let i = num1; i < num2; i++) {
     arr.push(i);
   }
diff --git a/src/helpers/popover.css.ts b/src/helpers/popover.css.ts
index bea58ca..3c8c279 100644
--- a/src/helpers/popover.css.ts
+++ b/src/helpers/popover.css.ts
@@ -185,14 +185,15 @@ export default `
 *::-webkit-scrollbar
 {
     height: 5px;
+    width: 5px;
     background-color: rgba(0,0,0,0);
 }
 
 *::-webkit-scrollbar-thumb
 {
-    height: 2px,
-    width: 10px;
-    background-color: var(--primary);
+    height: 2px;
+    width: 2px;
+    background-color: #ccc;
     background-image: -webkit-linear-gradient(45deg,
                                               rgba(255, 255, 255, .2) 25%,
                                               transparent 25%,
diff --git a/src/helpers/text.ts b/src/helpers/text.ts
index 5c72b1b..75d0946 100644
--- a/src/helpers/text.ts
+++ b/src/helpers/text.ts
@@ -39,5 +39,6 @@ export function format(props: TextProps, theme: Theme) {
     margin,
     textDecoration,
     padding,
+    textAlign: props.textAlign,
   });
 }
diff --git a/src/index.ts b/src/index.ts
index a69328f..eb6b61e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,3 @@
-import RCTooltip from 'rc-tooltip';
-
 import { initialize } from './helpers';
 
 initialize();
@@ -12,7 +10,7 @@ export { Card, CardHeader, CardBody, CardMedia } from './components/Card';
 export { Row, Col } from './components/Grid';
 export { SidePanel, Container, Content } from './components/Layout';
 export { Loading, Skeleton } from './components/Loading';
-export { MenuItem, MenuItemGroup, Menu } from './components/Menu';
+export { MenuItem, Menu } from './components/Menu';
 export { Modal } from './components/Modal';
 export { Pagination } from './components/Pagination';
 export { Popover } from './components/Popover';
@@ -36,7 +34,7 @@ export { Drawer } from './components/Drawer';
 export { DatePicker, TimePicker } from './components/DatePicker';
 export { Transfer } from './components/Transfer';
 export { List, ListItem, CollapsibleList } from './components/List';
-export { RCTooltip as Tooltip };
+export { Tooltip } from './components/Tooltip';
 export { Text } from './components/Text';
 export { Upload } from './components/Upload';
-export { Slider, Range, Handle } from './components/Slider';
+export { Slider, Range, SliderHandle } from './components/Slider';
diff --git a/tsconfig.json b/tsconfig.json
index a62a43c..3664e2c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
     "declaration": true,
     "noImplicitAny": false,
     "removeComments": true,
+    // "strictNullChecks": true,
     "noLib": false,
     "allowSyntheticDefaultImports": true,
     "emitDecoratorMetadata": true,