diff --git a/components/index.ts b/components/index.ts
index 24679e3..4194409 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -1,16 +1,21 @@
 /// <reference types="styled-jsx" />
 
 export * from './styles/themes'
-export { default as Utils } from './utils-shared/index'
+export { default as Utils } from './utils-shared-deprecated/index'
 export { default as useTheme } from './styles/use-theme'
 export { default as ZEITUIProvider } from './zeit-provider-deprecated'
 export { default as ZeitProvider } from './zeit-provider'
 export { default as CSSBaseline } from './css-baseline-deprecated'
 export { default as CssBaseline } from './css-baseline'
-export { default as useToasts } from './toast'
+export { default as useToasts } from './use-toasts'
 export { default as useInput } from './input/use-input'
 export { default as useModal } from './modal/use-modal'
 export { default as useTabs } from './tabs/use-tabs'
+export { default as useBodyScroll } from './use-body-scroll'
+export { default as useClickAway } from './use-click-away'
+export { default as useClipboard } from './use-clipboard'
+export { default as useCurrentState } from './use-current-state'
+export { default as useMediaQuery } from './use-media-query'
 export { default as Avatar } from './avatar'
 export { default as Text } from './text'
 export { default as Note } from './note'
@@ -39,7 +44,7 @@ export { default as Radio } from './radio'
 export { default as Select } from './select'
 export { default as Tabs } from './tabs'
 export { default as Progress } from './progress'
-export { default as Tree } from './file-tree'
+export { default as Tree } from './tree'
 export { default as Badge } from './badge'
 export { default as AutoComplete } from './auto-complete'
 export { default as Collapse } from './collapse'
diff --git a/components/page/__tests__/index.test.tsx b/components/page/__tests__/index.test.tsx
index d48eafa..cd686bb 100644
--- a/components/page/__tests__/index.test.tsx
+++ b/components/page/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDom from 'react-dom/server'
 import { mount } from 'enzyme'
-import { Page, ZEITUIProvider } from 'components'
+import { Page, ZeitProvider } from 'components'
 
 describe('Page', () => {
   it('should render correctly', () => {
@@ -48,9 +48,9 @@ describe('Page', () => {
 
   it('should disable dot style when in dark mode', () => {
     const wrapper = mount(
-      <ZEITUIProvider theme={{ type: 'dark' }}>
+      <ZeitProvider theme={{ type: 'dark' }}>
         <Page dotBackdrop />
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
     expect(wrapper.html()).not.toContain('global(body)')
   })
diff --git a/components/snippet/snippet.tsx b/components/snippet/snippet.tsx
index f4e6095..b7dda7b 100644
--- a/components/snippet/snippet.tsx
+++ b/components/snippet/snippet.tsx
@@ -5,7 +5,7 @@ import { SnippetTypes, CopyTypes } from '../utils/prop-types'
 import { getStyles } from './styles'
 import SnippetIcon from './snippet-icon'
 import useClipboard from '../utils/use-clipboard'
-import useToasts from '../toast/use-toast'
+import useToasts from '../use-toasts'
 
 interface Props {
   text?: string | string[]
diff --git a/components/styles/__tests__/theme-provider.test.tsx b/components/styles/__tests__/theme-provider.test.tsx
index 7c65045..c3bf711 100644
--- a/components/styles/__tests__/theme-provider.test.tsx
+++ b/components/styles/__tests__/theme-provider.test.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { render, mount } from 'enzyme'
 import { deepMergeObject } from '../theme-provider/theme-provider'
 import DefaultThemes from '../themes/default'
-import { ZEITUIProvider, ZeitUIThemes, Text } from 'components'
+import { ZeitProvider, ZeitUIThemes, Text } from 'components'
 import { DeepPartial } from 'components/utils/types'
 
 describe('ThemeProvider', () => {
@@ -51,9 +51,9 @@ describe('ThemeProvider', () => {
       }
     }
     const wrapper = render(
-      <ZEITUIProvider theme={customFunc}>
+      <ZeitProvider theme={customFunc}>
         <Text type="success">hello</Text>
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
     expect(wrapper).toMatchSnapshot()
   })
@@ -62,9 +62,9 @@ describe('ThemeProvider', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
     const customFunc = () => 0 as DeepPartial<ZeitUIThemes>
     const wrapper = mount(
-      <ZEITUIProvider theme={customFunc}>
+      <ZeitProvider theme={customFunc}>
         <p>test</p>
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
 
     expect(errorSpy).toHaveBeenCalled()
diff --git a/components/tooltip/__test__/index.test.tsx b/components/tooltip/__test__/index.test.tsx
index 8018932..d6018fd 100644
--- a/components/tooltip/__test__/index.test.tsx
+++ b/components/tooltip/__test__/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { mount, ReactWrapper } from 'enzyme'
-import { Button, Tooltip, ZEITUIProvider } from 'components'
+import { Button, Tooltip, ZeitProvider } from 'components'
 import { nativeEvent, updateWrapper } from 'tests/utils'
 import { act } from 'react-dom/test-utils'
 
@@ -15,9 +15,9 @@ const expectTooltipIsHidden = (wrapper: ReactWrapper) => {
 describe('Tooltip', () => {
   it('should render correctly', async () => {
     const wrapper = mount(
-      <ZEITUIProvider theme={{ type: 'dark' }}>
+      <ZeitProvider theme={{ type: 'dark' }}>
         <Tooltip text={<p id="test">custom-content</p>}>some tips</Tooltip>
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
 
     expectTooltipIsHidden(wrapper)
diff --git a/components/file-tree/__tests__/__snapshots__/index.test.tsx.snap b/components/tree/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/file-tree/__tests__/__snapshots__/index.test.tsx.snap
rename to components/tree/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/file-tree/__tests__/index.test.tsx b/components/tree/__tests__/index.test.tsx
similarity index 97%
rename from components/file-tree/__tests__/index.test.tsx
rename to components/tree/__tests__/index.test.tsx
index f213c64..cde7557 100644
--- a/components/file-tree/__tests__/index.test.tsx
+++ b/components/tree/__tests__/index.test.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { Tree } from 'components'
 import { nativeEvent } from 'tests/utils'
-import { FileTreeValue } from 'components/file-tree/tree'
+import { FileTreeValue } from 'components/tree/tree'
 
 const mockFiles: Array<FileTreeValue> = [
   {
diff --git a/components/file-tree/index.ts b/components/tree/index.ts
similarity index 100%
rename from components/file-tree/index.ts
rename to components/tree/index.ts
diff --git a/components/file-tree/tree-context.ts b/components/tree/tree-context.ts
similarity index 100%
rename from components/file-tree/tree-context.ts
rename to components/tree/tree-context.ts
diff --git a/components/file-tree/tree-file-icon.tsx b/components/tree/tree-file-icon.tsx
similarity index 100%
rename from components/file-tree/tree-file-icon.tsx
rename to components/tree/tree-file-icon.tsx
diff --git a/components/file-tree/tree-file.tsx b/components/tree/tree-file.tsx
similarity index 100%
rename from components/file-tree/tree-file.tsx
rename to components/tree/tree-file.tsx
diff --git a/components/file-tree/tree-folder-icon.tsx b/components/tree/tree-folder-icon.tsx
similarity index 100%
rename from components/file-tree/tree-folder-icon.tsx
rename to components/tree/tree-folder-icon.tsx
diff --git a/components/file-tree/tree-folder.tsx b/components/tree/tree-folder.tsx
similarity index 100%
rename from components/file-tree/tree-folder.tsx
rename to components/tree/tree-folder.tsx
diff --git a/components/file-tree/tree-help.ts b/components/tree/tree-help.ts
similarity index 100%
rename from components/file-tree/tree-help.ts
rename to components/tree/tree-help.ts
diff --git a/components/file-tree/tree-indents.tsx b/components/tree/tree-indents.tsx
similarity index 100%
rename from components/file-tree/tree-indents.tsx
rename to components/tree/tree-indents.tsx
diff --git a/components/file-tree/tree-status-icon.tsx b/components/tree/tree-status-icon.tsx
similarity index 100%
rename from components/file-tree/tree-status-icon.tsx
rename to components/tree/tree-status-icon.tsx
diff --git a/components/file-tree/tree.tsx b/components/tree/tree.tsx
similarity index 97%
rename from components/file-tree/tree.tsx
rename to components/tree/tree.tsx
index e339459..eecf68d 100644
--- a/components/file-tree/tree.tsx
+++ b/components/tree/tree.tsx
@@ -3,7 +3,7 @@ import TreeFile from './tree-file'
 import TreeFolder from './tree-folder'
 import { TreeContext } from './tree-context'
 import { tuple } from '../utils/prop-types'
-import { sortChildren } from '../file-tree/tree-help'
+import { sortChildren } from './/tree-help'
 
 const FileTreeValueType = tuple('directory', 'file')
 
diff --git a/components/utils-shared/__tests__/body-scroll.test.tsx b/components/use-body-scroll/__tests__/body-scroll.test.tsx
similarity index 99%
rename from components/utils-shared/__tests__/body-scroll.test.tsx
rename to components/use-body-scroll/__tests__/body-scroll.test.tsx
index dfdb7ac..988e9c0 100644
--- a/components/utils-shared/__tests__/body-scroll.test.tsx
+++ b/components/use-body-scroll/__tests__/body-scroll.test.tsx
@@ -1,5 +1,5 @@
 import React, { RefObject } from 'react'
-import useBodyScroll from '../use-body-scroll'
+import { useBodyScroll } from 'components'
 import { act, renderHook } from '@testing-library/react-hooks'
 
 describe('UseBodyScroll', () => {
diff --git a/components/use-body-scroll/index.ts b/components/use-body-scroll/index.ts
new file mode 100644
index 0000000..f65551d
--- /dev/null
+++ b/components/use-body-scroll/index.ts
@@ -0,0 +1,3 @@
+import useBodyScroll from './use-body-scroll'
+
+export default useBodyScroll
diff --git a/components/utils-shared/use-body-scroll.ts b/components/use-body-scroll/use-body-scroll.ts
similarity index 100%
rename from components/utils-shared/use-body-scroll.ts
rename to components/use-body-scroll/use-body-scroll.ts
diff --git a/components/utils-shared/__tests__/click-away.test.tsx b/components/use-click-away/__tests__/click-away.test.tsx
similarity index 95%
rename from components/utils-shared/__tests__/click-away.test.tsx
rename to components/use-click-away/__tests__/click-away.test.tsx
index c8f38ad..ef9661f 100644
--- a/components/utils-shared/__tests__/click-away.test.tsx
+++ b/components/use-click-away/__tests__/click-away.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { renderHook } from '@testing-library/react-hooks'
-import useClickAway from '../use-click-away'
+import { useClickAway } from 'components'
 
 const simulateNativeClick = (el: Element) => {
   el.dispatchEvent(
diff --git a/components/use-click-away/index.ts b/components/use-click-away/index.ts
new file mode 100644
index 0000000..83cf129
--- /dev/null
+++ b/components/use-click-away/index.ts
@@ -0,0 +1,3 @@
+import useClickAway from './use-click-away'
+
+export default useClickAway
diff --git a/components/utils-shared/use-click-away.ts b/components/use-click-away/use-click-away.ts
similarity index 100%
rename from components/utils-shared/use-click-away.ts
rename to components/use-click-away/use-click-away.ts
diff --git a/components/utils-shared/__tests__/clipboard.test.tsx b/components/use-clipboard/__tests__/clipboard.test.tsx
similarity index 97%
rename from components/utils-shared/__tests__/clipboard.test.tsx
rename to components/use-clipboard/__tests__/clipboard.test.tsx
index e5484b5..720f1aa 100644
--- a/components/utils-shared/__tests__/clipboard.test.tsx
+++ b/components/use-clipboard/__tests__/clipboard.test.tsx
@@ -1,4 +1,4 @@
-import useClipboard from '../use-clipboard'
+import { useClipboard } from 'components'
 import { renderHook } from '@testing-library/react-hooks'
 
 describe('UseClipboard', () => {
diff --git a/components/use-clipboard/index.ts b/components/use-clipboard/index.ts
new file mode 100644
index 0000000..3c09962
--- /dev/null
+++ b/components/use-clipboard/index.ts
@@ -0,0 +1,3 @@
+import useClipboard from './use-clipboard'
+
+export default useClipboard
diff --git a/components/utils-shared/use-clipboard.ts b/components/use-clipboard/use-clipboard.ts
similarity index 100%
rename from components/utils-shared/use-clipboard.ts
rename to components/use-clipboard/use-clipboard.ts
diff --git a/components/utils-shared/__tests__/current-state.test.tsx b/components/use-current-state/__tests__/current-state.test.tsx
similarity index 96%
rename from components/utils-shared/__tests__/current-state.test.tsx
rename to components/use-current-state/__tests__/current-state.test.tsx
index 2114150..8f90c12 100644
--- a/components/utils-shared/__tests__/current-state.test.tsx
+++ b/components/use-current-state/__tests__/current-state.test.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { mount } from 'enzyme'
-import useCurrentState from '../use-current-state'
+import { useCurrentState } from 'components'
 import { renderHook, act } from '@testing-library/react-hooks'
 
 describe('UseCurrentState', () => {
diff --git a/components/use-current-state/index.ts b/components/use-current-state/index.ts
new file mode 100644
index 0000000..b563a37
--- /dev/null
+++ b/components/use-current-state/index.ts
@@ -0,0 +1,3 @@
+import useCurrentState from './use-current-state'
+
+export default useCurrentState
diff --git a/components/utils-shared/use-current-state.ts b/components/use-current-state/use-current-state.ts
similarity index 100%
rename from components/utils-shared/use-current-state.ts
rename to components/use-current-state/use-current-state.ts
diff --git a/components/utils-shared/__tests__/media-query.test.tsx b/components/use-media-query/__tests__/media-query.test.tsx
similarity index 96%
rename from components/utils-shared/__tests__/media-query.test.tsx
rename to components/use-media-query/__tests__/media-query.test.tsx
index 25a574d..e46fe6a 100644
--- a/components/utils-shared/__tests__/media-query.test.tsx
+++ b/components/use-media-query/__tests__/media-query.test.tsx
@@ -1,8 +1,7 @@
-import { Utils } from 'components'
+import { useMediaQuery } from 'components'
 import { renderHook } from '@testing-library/react-hooks'
 // @ts-ignore
 import mediaQuery from 'css-mediaquery'
-const { useMediaQuery } = Utils
 
 const mediaListMock = (width: number) => {
   ;(window as any).listeners = [] as Array<Function>
diff --git a/components/use-media-query/index.ts b/components/use-media-query/index.ts
new file mode 100644
index 0000000..0a6879a
--- /dev/null
+++ b/components/use-media-query/index.ts
@@ -0,0 +1,3 @@
+import useMediaQuery from './use-media-query'
+
+export default useMediaQuery
diff --git a/components/utils-shared/use-media-query.ts b/components/use-media-query/use-media-query.ts
similarity index 100%
rename from components/utils-shared/use-media-query.ts
rename to components/use-media-query/use-media-query.ts
diff --git a/components/toast/__tests__/__snapshots__/index.test.tsx.snap b/components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
similarity index 100%
rename from components/toast/__tests__/__snapshots__/index.test.tsx.snap
rename to components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/toast/__tests__/index.test.tsx b/components/use-toasts/__tests__/index.test.tsx
similarity index 92%
rename from components/toast/__tests__/index.test.tsx
rename to components/use-toasts/__tests__/index.test.tsx
index 778f8e5..db32b67 100644
--- a/components/toast/__tests__/index.test.tsx
+++ b/components/use-toasts/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { mount, ReactWrapper } from 'enzyme'
-import { useToasts, ZEITUIProvider } from 'components'
+import { useToasts, ZeitProvider } from 'components'
 import { nativeEvent, updateWrapper } from 'tests/utils'
 
 const MockToast: React.FC<{}> = () => {
@@ -41,9 +41,9 @@ const expectToastIsHidden = (wrapper: ReactWrapper) => {
 describe('UseToast', () => {
   it('should render correctly', async () => {
     const wrapper = mount(
-      <ZEITUIProvider>
+      <ZeitProvider>
         <MockToast />
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
 
     expectToastIsHidden(wrapper)
@@ -54,9 +54,9 @@ describe('UseToast', () => {
 
   it('should work with different types', async () => {
     const wrapper = mount(
-      <ZEITUIProvider>
+      <ZeitProvider>
         <MockToast />
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
 
     expectToastIsHidden(wrapper)
@@ -68,9 +68,9 @@ describe('UseToast', () => {
 
   it('should close toast', async () => {
     const wrapper = mount(
-      <ZEITUIProvider>
+      <ZeitProvider>
         <MockToast />
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
 
     expectToastIsHidden(wrapper)
@@ -85,9 +85,9 @@ describe('UseToast', () => {
 
   it('the removeal should be delayed when hover is triggerd', async () => {
     const wrapper = mount(
-      <ZEITUIProvider>
+      <ZeitProvider>
         <MockToast />
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
 
     expectToastIsHidden(wrapper)
@@ -111,9 +111,9 @@ describe('UseToast', () => {
 
   it('should render different actions', async () => {
     const wrapper = mount(
-      <ZEITUIProvider>
+      <ZeitProvider>
         <MockToast />
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
     const actions = [
       {
@@ -135,9 +135,9 @@ describe('UseToast', () => {
 
   it('should close toast when action triggered', async () => {
     const wrapper = mount(
-      <ZEITUIProvider>
+      <ZeitProvider>
         <MockToast />
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
     const actions = [
       {
@@ -160,9 +160,9 @@ describe('UseToast', () => {
 
   it('should work with multiple toasts', async () => {
     const wrapper = mount(
-      <ZEITUIProvider>
+      <ZeitProvider>
         <MockToast />
-      </ZEITUIProvider>,
+      </ZeitProvider>,
     )
 
     expectToastIsHidden(wrapper)
diff --git a/components/toast/index.ts b/components/use-toasts/index.ts
similarity index 100%
rename from components/toast/index.ts
rename to components/use-toasts/index.ts
diff --git a/components/toast/toast-container.tsx b/components/use-toasts/toast-container.tsx
similarity index 100%
rename from components/toast/toast-container.tsx
rename to components/use-toasts/toast-container.tsx
diff --git a/components/toast/toast-item.tsx b/components/use-toasts/toast-item.tsx
similarity index 100%
rename from components/toast/toast-item.tsx
rename to components/use-toasts/toast-item.tsx
diff --git a/components/toast/use-toast.tsx b/components/use-toasts/use-toast.tsx
similarity index 100%
rename from components/toast/use-toast.tsx
rename to components/use-toasts/use-toast.tsx
diff --git a/components/utils-shared-deprecated/index.ts b/components/utils-shared-deprecated/index.ts
new file mode 100644
index 0000000..1862cea
--- /dev/null
+++ b/components/utils-shared-deprecated/index.ts
@@ -0,0 +1,19 @@
+import useBodyScroll from '../use-body-scroll'
+import useClipboard from '../use-clipboard'
+import useCurrentState from '../use-current-state'
+import useClickAway from '../use-click-away'
+import useMediaQuery from '../use-media-query'
+import useWarning from '../utils/use-warning'
+
+useWarning(
+  'Module "Utils" is deprecated. All hooks are now exported directly from the main module.',
+  'Utils',
+)
+
+export default {
+  useBodyScroll,
+  useClipboard,
+  useCurrentState,
+  useClickAway,
+  useMediaQuery,
+}
diff --git a/components/utils-shared/index.ts b/components/utils-shared/index.ts
deleted file mode 100644
index 0fe42ee..0000000
--- a/components/utils-shared/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { default as useBodyScroll } from './use-body-scroll'
-import { default as useClipboard } from './use-clipboard'
-import { default as useCurrentState } from './use-current-state'
-import { default as useClickAway } from './use-click-away'
-import { default as useMediaQuery } from './use-media-query'
-
-export default {
-  useBodyScroll,
-  useClipboard,
-  useCurrentState,
-  useClickAway,
-  useMediaQuery,
-}
diff --git a/components/utils/use-body-scroll.ts b/components/utils/use-body-scroll.ts
index c6a70aa..f129f05 100644
--- a/components/utils/use-body-scroll.ts
+++ b/components/utils/use-body-scroll.ts
@@ -1,3 +1,3 @@
-import useBodyScroll from '../utils-shared/use-body-scroll'
+import useBodyScroll from '../utils-shared-deprecated/use-body-scroll'
 
 export default useBodyScroll
diff --git a/components/utils/use-click-away.ts b/components/utils/use-click-away.ts
index cf1e7b1..d26d56c 100644
--- a/components/utils/use-click-away.ts
+++ b/components/utils/use-click-away.ts
@@ -1,3 +1,3 @@
-import { default as useClickAway } from '../utils-shared/use-click-away'
+import { default as useClickAway } from '../utils-shared-deprecated/use-click-away'
 
 export default useClickAway
diff --git a/components/utils/use-clipboard.ts b/components/utils/use-clipboard.ts
index 360793f..279d4dc 100644
--- a/components/utils/use-clipboard.ts
+++ b/components/utils/use-clipboard.ts
@@ -1,3 +1,3 @@
-import useClipboard from '../utils-shared/use-clipboard'
+import useClipboard from '../utils-shared-deprecated/use-clipboard'
 
 export default useClipboard
diff --git a/components/utils/use-current-state.ts b/components/utils/use-current-state.ts
index f606510..10f3ec0 100644
--- a/components/utils/use-current-state.ts
+++ b/components/utils/use-current-state.ts
@@ -1,3 +1,3 @@
-import useCurrentState from '../utils-shared/use-current-state'
+import useCurrentState from '../utils-shared-deprecated/use-current-state'
 
 export default useCurrentState
diff --git a/components/utils/use-zeit-ui-context.ts b/components/utils/use-zeit-ui-context.ts
index a8e5bea..d761cf2 100644
--- a/components/utils/use-zeit-ui-context.ts
+++ b/components/utils/use-zeit-ui-context.ts
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ToastWithID } from '../toast/toast-container'
+import { ToastWithID } from '../use-toasts/toast-container'
 
 export type UpdateToastsFunction<T> = (fn: (toasts: Array<T>) => Array<T>) => any
 
diff --git a/components/zeit-provider/zeit-provider.tsx b/components/zeit-provider/zeit-provider.tsx
index ae124a4..fd63281 100644
--- a/components/zeit-provider/zeit-provider.tsx
+++ b/components/zeit-provider/zeit-provider.tsx
@@ -7,7 +7,7 @@ import {
 import ThemeProvider from '../styles/theme-provider'
 import { ThemeParam } from '../styles/theme-provider/theme-provider'
 import useCurrentState from '../utils/use-current-state'
-import ToastContainer, { ToastWithID } from '../toast/toast-container'
+import ToastContainer, { ToastWithID } from '../use-toasts/toast-container'
 
 export interface Props {
   theme?: ThemeParam