diff --git a/package-lock.json b/package-lock.json
index ad5e341..a16b594 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -170,6 +170,14 @@
         "@types/react": "16.3.14"
       }
     },
+    "@types/es6-promise": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@types/es6-promise/-/es6-promise-3.3.0.tgz",
+      "integrity": "sha512-ixCIAEkLUKv9movnHKCzx2rzAJgEnSALDXPrOSSwOjWwXFs0ssSZKan+O2e3FExPPCbX+DfA9NcKsbvLuyUlNA==",
+      "requires": {
+        "es6-promise": "4.2.4"
+      }
+    },
     "@types/history": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.6.2.tgz",
@@ -4095,6 +4103,11 @@
         "es6-symbol": "3.1.1"
       }
     },
+    "es6-promise": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz",
+      "integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ=="
+    },
     "es6-symbol": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
diff --git a/package.json b/package.json
index 7523faa..a297296 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "@material-ui/core": "^1.3.0",
     "@material-ui/icons": "^2.0.0-beta.1",
     "@types/classnames": "^2.2.4",
+    "@types/es6-promise": "^3.3.0",
     "@types/recharts": "^1.0.21",
     "html-loader": "^0.5.4",
     "lodash": "^4.17.4",
diff --git a/src/app/AsyncComponent.tsx b/src/app/AsyncComponent.tsx
new file mode 100644
index 0000000..ebd7787
--- /dev/null
+++ b/src/app/AsyncComponent.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Theme, withStyles, CircularProgress } from '@material-ui/core';
+
+interface IAsyncComponentOwnProps {
+  moduleProvider: any;
+  classes: any;
+}
+
+interface IAsyncComponentState {
+  Component: any;
+}
+
+interface IAsyncComponentStateProps {
+  theme?: Theme;
+}
+
+type IAsyncComponentProps = IAsyncComponentOwnProps & IAsyncComponentStateProps;
+
+export const styles = (theme: Theme): any => ({
+  loader: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100vw',
+    height: '100vh',
+  },
+  progress: {
+    margin: theme.spacing.unit * 2,
+  },
+});
+
+class AsyncComponent extends React.PureComponent<IAsyncComponentProps, IAsyncComponentState> {
+  constructor(props: IAsyncComponentProps) {
+    super(props);
+    this.state = {
+      Component: null,
+    };
+  }
+
+  public componentWillMount(): any {
+    if (!this.state.Component) {
+        this.props.moduleProvider().then((data: any) => this.setState({ Component: data.default }));
+    }
+  }
+
+  public renderLoader(): any {
+    const {classes} = this.props;
+    return (
+      <div className={classes.loader}>
+        <CircularProgress className={classes.progress} />
+      </div>
+    );
+  }
+
+  public render(): any {
+    const { Component } = this.state;
+    return Component ? <Component /> : this.renderLoader();
+  }
+}
+
+export default withStyles(styles)(AsyncComponent);
diff --git a/src/app/buttons/Buttons.tsx b/src/app/buttons/Buttons.tsx
new file mode 100644
index 0000000..1b1a535
--- /dev/null
+++ b/src/app/buttons/Buttons.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import { buttonStyles } from './buttons.styles';
+import { IButtonProps, IButtonState } from './IButtons';
+import { Button, CardContent } from '@material-ui/core';
+import { CollapsiblePanel } from '../components';
+import { ButtonProps } from '@material-ui/core/Button';
+
+class Buttons extends React.Component<IButtonProps, IButtonState> {
+  public renderButtons(headerText: string, buttonVariant: ButtonProps['variant']): any {
+    const { classes } = this.props;
+    return (
+      <Grid item xs={12}>
+        <CollapsiblePanel className={classes.panelHeader} header={headerText} autoOpen>
+          <CardContent style={{ paddingBottom: 0 }}>
+            <Grid container className={classes.gridContainer}>
+              <Button variant={buttonVariant} className={classes.button}>Default</Button>
+              <Button color='primary' className={classes.button}>
+                Primary
+              </Button>
+              <Button variant={buttonVariant} color='secondary' className={classes.button}>
+                Secondary
+              </Button>
+              <Button variant={buttonVariant} disabled className={classes.button}>
+                Disabled
+              </Button>
+              <Button variant={buttonVariant} href='/#/dashboard' className={classes.button}>
+                Link
+              </Button>
+              <input accept='image/*' className={classes.input} id='flat-button-file' multiple type='file' />
+              <label htmlFor='flat-button-file'>
+                <Button variant={buttonVariant} component='span' className={classes.button}>
+                  Upload
+                </Button>
+              </label>
+            </Grid>
+          </CardContent>
+        </CollapsiblePanel>
+      </Grid>
+    );
+  }
+  public render(): React.ReactElement<Buttons> {
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <Grid container spacing={8}>
+          {this.renderButtons('Text Buttons', 'text')}
+          {this.renderButtons('Outline Buttons', 'outlined')}
+          {this.renderButtons('Contained Buttons', 'contained')}
+          {this.renderButtons('Raised Buttons', 'raised')}
+          {this.renderButtons('Raised Buttons', 'flat')}
+          {this.renderButtons('Raised Buttons', 'fab')}
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default withStyles(buttonStyles)(Buttons);
diff --git a/src/app/buttons/IButtons.tsx b/src/app/buttons/IButtons.tsx
new file mode 100644
index 0000000..8dd36bc
--- /dev/null
+++ b/src/app/buttons/IButtons.tsx
@@ -0,0 +1,13 @@
+import { Theme } from '@material-ui/core';
+
+interface IButtonOwnProps {
+    classes: any;
+}
+interface IButtonStateProps {
+    theme: Theme;
+}
+
+export type IButtonProps = IButtonOwnProps & IButtonStateProps;
+
+export interface IButtonState {
+}
diff --git a/src/app/buttons/buttons.styles.tsx b/src/app/buttons/buttons.styles.tsx
index 66d8efa..8642633 100644
--- a/src/app/buttons/buttons.styles.tsx
+++ b/src/app/buttons/buttons.styles.tsx
@@ -1,12 +1,19 @@
 import { Theme } from '@material-ui/core';
 
-export const homeStyles = (theme: Theme): any => ({
+export const buttonStyles = (theme: Theme): any => ({
   root: {
     flexGrow: 1,
   },
-  paper: {
-    padding: theme.spacing.unit * 2,
-    textAlign: 'center',
-    color: theme.palette.text.secondary,
+  gridContainer: {
+    justifyContent: 'center',
+  },
+  panelHeader: {
+    backgroundColor: theme.palette.grey[200],
+  },
+  button: {
+    margin: theme.spacing.unit,
+  },
+  input: {
+    display: 'none',
   },
 });
diff --git a/src/app/buttons/index.tsx b/src/app/buttons/index.tsx
index eea5f4b..bdef67b 100644
--- a/src/app/buttons/index.tsx
+++ b/src/app/buttons/index.tsx
@@ -1,37 +1 @@
-import * as React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import { homeStyles } from './buttons.styles';
-import { IHomeProps, IHomeState } from './buttons.interface';
-import { Card, Button } from '@material-ui/core';
-
-class Buttons extends React.Component<IHomeProps, IHomeState> {
-    public render(): React.ReactElement<Buttons> {
-        const { classes } = this.props;
-
-        return (
-            <div className={classes.root}>
-                <Grid container spacing={8}>
-                    <Grid item sm={12} md={6}>
-                        <Card>
-                            <Button color='primary'>Primary</Button>
-                            <Button color='default'>Default</Button>
-                            <Button color='secondary'>Secondary</Button>
-                        </Card>
-                    </Grid>
-                    <Grid item sm={12} md={6}>
-                        <Card>
-                            <div><Button variant='flat'>Flat Button</Button></div>
-                            <div><Button variant='contained' color='primary'>Contained Button</Button></div>
-                            <div><Button variant='flat' color='primary'>Contained Button</Button></div>
-                            <div><Button variant='raised'>Raised Button</Button></div>
-                            <div><Button variant='fab'>Fab Button</Button></div>
-                        </Card>
-                    </Grid>
-                </Grid>
-            </div >
-        );
-    }
-}
-
-export default withStyles(homeStyles)(Buttons);
+export { default } from './Buttons';
diff --git a/src/app/components/panel/CollapsiblePanel/CollapsiblePanel.tsx b/src/app/components/panel/CollapsiblePanel/CollapsiblePanel.tsx
index 6f8d770..0569246 100644
--- a/src/app/components/panel/CollapsiblePanel/CollapsiblePanel.tsx
+++ b/src/app/components/panel/CollapsiblePanel/CollapsiblePanel.tsx
@@ -41,7 +41,6 @@ class CollapsiblePanel extends React.Component<any, any> {
 
   public render(): any {
     const { classes, header, customheader, className } = this.props;
-    console.log('cjeckdfd', this.props);
 
     return (
       <div>
diff --git a/src/app/dashboard/Dashboard.tsx b/src/app/dashboard/Dashboard.tsx
index 4f00260..2318e1b 100644
--- a/src/app/dashboard/Dashboard.tsx
+++ b/src/app/dashboard/Dashboard.tsx
@@ -2,14 +2,18 @@ import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { dashboardStyles } from './dashboard.styles';
 import { IDashboardProps, IDashboardState } from './IDashboard';
-import Home from '../home';
-import Charts from '../charts';
-import Buttons from '../buttons';
-import Icons from '../icons';
-import Forms from '../forms';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import Sidebar from './SideBar';
 import Header from './Header';
+import AsyncComponent from '../AsyncComponent';
+
+const home = () => import('../home');
+const widgets = () => import('../widgets');
+const charts = () => import('../charts');
+const buttons = () => import('../buttons');
+const icons = () => import('../icons');
+const forms = () => import('../forms');
+const textFields = () => import('../text-fields');
 
 
 class Dashboard extends React.Component<IDashboardProps, IDashboardState> {
@@ -39,12 +43,13 @@ class Dashboard extends React.Component<IDashboardProps, IDashboardState> {
           <div className={classes.toolbar}>
             <div style={{ width: '100%' }}>
               <Switch>
-                <Route exact path='/dashboard/home' component={Home} />
-                <Route exact path='/dashboard/charts' component={Charts} />
-                <Route exact path='/dashboard/buttons' component={Buttons} />
-                <Route exact path='/dashboard/icons' component={Icons} />
-                <Route exact path='/dashboard/widgets' component={Home} />
-                <Route exact path='/dashboard/form-elements/forms' component={Forms} />
+                <Route exact path='/dashboard/home' component={() => <AsyncComponent moduleProvider={home} />} />
+                <Route exact path='/dashboard/widgets' component={() => <AsyncComponent moduleProvider={widgets} />} />
+                <Route exact path='/dashboard/charts' component={() => <AsyncComponent moduleProvider={charts} />} />
+                <Route exact path='/dashboard/buttons' component={() => <AsyncComponent moduleProvider={buttons} />} />
+                <Route exact path='/dashboard/icons' component={() => <AsyncComponent moduleProvider={icons} />} />
+                <Route exact path='/dashboard/form-elements/forms' component={() => <AsyncComponent moduleProvider={forms} />} />
+                <Route exact path='/dashboard/form-elements/text-fields' component={() => <AsyncComponent moduleProvider={textFields} />} />
                 <Redirect path='/dashboard' to='/dashboard/home' />
               </Switch>
             </div>
diff --git a/src/app/dashboard/SideBar/menuItems.tsx b/src/app/dashboard/SideBar/menuItems.tsx
index fb02abf..35d416e 100644
--- a/src/app/dashboard/SideBar/menuItems.tsx
+++ b/src/app/dashboard/SideBar/menuItems.tsx
@@ -1,15 +1,12 @@
 import * as React from 'react';
 import { IMenuItems } from './ISideBar';
-import {
-  Drafts,
-  Inbox,
-  Report,
-  SentimentVerySatisfied,
-  Star,
-  TextFields,
-  Dashboard,
-  PermContactCalendar,
-} from '@material-ui/icons';
+import Drafts from '@material-ui/icons/Drafts';
+import Dashboard from '@material-ui/icons/Dashboard';
+import TagFaces from '@material-ui/icons/TagFaces';
+import PieChart from '@material-ui/icons/PieChart';
+import Widgets from '@material-ui/icons/Widgets';
+import Crop169 from '@material-ui/icons/Crop169';
+import Description from '@material-ui/icons/Description';
 
 export const menuItems: Array<IMenuItems> = [
   {
@@ -21,32 +18,32 @@ export const menuItems: Array<IMenuItems> = [
   {
     id: 2,
     title: 'Widgets',
-    path: 'widgets',
-    icon: <Star />,
+    path: '/dashboard/widgets',
+    icon: <Widgets />,
   },
   {
     id: 3,
     title: 'Charts',
     path: '/dashboard/charts',
-    icon: <Report />,
+    icon: <PieChart />,
   },
   {
     id: 4,
     title: 'Buttons',
     path: '/dashboard/buttons',
-    icon: <Inbox />,
+    icon: <Crop169 />,
   },
   {
     id: 5,
     title: 'Icons',
     path: '/dashboard/icons',
-    icon: <SentimentVerySatisfied />,
+    icon: <TagFaces />,
   },
   {
     id: 6,
     title: 'Form Elements',
     path: '',
-    icon: <TextFields />,
+    icon: <Description />,
     isOpen: false,
     children: [
       {
@@ -59,25 +56,25 @@ export const menuItems: Array<IMenuItems> = [
         id: 62,
         title: 'Text Fields',
         path: '/dashboard/form-elements/text-fields',
-        icon: <TextFields />,
+        icon: <Dashboard />,
       },
       {
         id: 63,
         title: 'Selection Controls',
         path: '/dashboard/form-elements/selection-controls',
-        icon: <TextFields />,
+        icon: <Dashboard />,
       },
       {
         id: 64,
         title: 'Dropdown Select',
         path: '/dashboard/form-elements/forms',
-        icon: <TextFields />,
+        icon: <Dashboard />,
       },
       {
         id: 65,
         title: 'Date Time Pickers',
         path: '/dashboard/form-elements/forms',
-        icon: <PermContactCalendar />,
+        icon: <Dashboard />,
       },
     ],
   },
diff --git a/src/app/icons/Icons.tsx b/src/app/icons/Icons.tsx
index 6154327..48a2e98 100644
--- a/src/app/icons/Icons.tsx
+++ b/src/app/icons/Icons.tsx
@@ -6,7 +6,6 @@ import { IIconsProps, IIconsState } from './IIcons';
 import { Paper, Divider, Typography, CardContent } from '@material-ui/core';
 import { CollapsiblePanel } from '../components';
 import { colorVariantIcons } from './iconSet/colorVariantIcons';
-import { actionIcons } from './iconSet/actionIcons';
 
 class Icons extends React.Component<IIconsProps, IIconsState> {
     public render(): React.ReactElement<Icons> {
@@ -21,7 +20,7 @@ class Icons extends React.Component<IIconsProps, IIconsState> {
                                 <Grid container className={classes.gridContainer}>
                                     {colorVariantIcons && colorVariantIcons.map((colorVariantIcon, index) => (
                                         <Grid className={classes.iconGrid} item xs={6} sm={3} md={2} key={`color_variant_icon_${index}`}>
-                                            <Paper elevation={0} style={{color: 'reds'}}>
+                                            <Paper elevation={0} style={{color: 'red'}}>
                                                 {colorVariantIcon.icon}
                                                 <Divider style={{margin: '5px 10px'}} />
                                                 <Typography> {colorVariantIcon.title} </Typography>
@@ -32,23 +31,6 @@ class Icons extends React.Component<IIconsProps, IIconsState> {
                             </CardContent>
                         </CollapsiblePanel>
                     </Grid>
-                    <Grid item xs={12}>
-                        <CollapsiblePanel header='Action Icons' autoOpen>
-                            <CardContent style={{paddingBottom: 0}}>
-                                <Grid container className={classes.gridContainer}>
-                                    {actionIcons && actionIcons.map((actionIcon, index) => (
-                                        <Grid className={classes.iconGrid} item xs={6} sm={3} md={2} key={`material_icon_${index}`}>
-                                            <Paper elevation={0} style={{color: 'reds'}}>
-                                                {actionIcon.icon}
-                                                <Divider style={{margin: '5px 10px'}} />
-                                                <Typography> {actionIcon.title} </Typography>
-                                            </Paper>
-                                        </Grid>
-                                    ))}
-                                </Grid>
-                            </CardContent>
-                        </CollapsiblePanel>
-                    </Grid>
                 </Grid>
             </div >
         );
diff --git a/src/app/icons/iconSet/colorVariantIcons.tsx b/src/app/icons/iconSet/colorVariantIcons.tsx
index 0037553..c226ced 100644
--- a/src/app/icons/iconSet/colorVariantIcons.tsx
+++ b/src/app/icons/iconSet/colorVariantIcons.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { deepOrange } from '@material-ui/core/colors';
-import { Star } from '@material-ui/icons';
+import Star from '@material-ui/icons/Star';
 import { iconStyle } from '../icons.styles';
 
 export const colorVariantIcons = [
diff --git a/src/app/icons/iconSet/index.tsx b/src/app/icons/iconSet/index.tsx
index 23b7537..61ec5a2 100644
--- a/src/app/icons/iconSet/index.tsx
+++ b/src/app/icons/iconSet/index.tsx
@@ -1,2 +1 @@
-export { actionIcons } from './actionIcons';
 export { colorVariantIcons } from './colorVariantIcons';
diff --git a/src/app/index.tsx b/src/app/index.tsx
index da931bb..56c9594 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,17 +1,21 @@
 import * as React from 'react';
 import { Route, Redirect, Switch } from 'react-router-dom';
-import Login from './login';
-import Dashboard from './dashboard';
+import AsyncComponent from './AsyncComponent';
+// import Login from './login';
+// import Dashboard from './dashboard';
 
 const NoMatch = () => <h1 style={{ color: 'red' }}>Page not found!</h1>;
 
+const login = () => import('./login');
+const dashboard = () => import('./dashboard');
+
 export class App extends React.Component<object, object> {
   public render(): React.ReactElement<App> {
     return (
       <div>
         <Switch>
-          <Route exact path='/login' component={Login} />
-          <Route path='/dashboard' component={Dashboard} />
+          <Route exact path='/login' component={() => <AsyncComponent moduleProvider={login} />} />
+          <Route path='/dashboard' component={() => <AsyncComponent moduleProvider={dashboard} />} />
           <Redirect exact from='/' to='dashboard' />
           <Route component={NoMatch} />
         </Switch>
diff --git a/src/app/text-fields/ITextFields.tsx b/src/app/text-fields/ITextFields.tsx
new file mode 100644
index 0000000..cbff7e2
--- /dev/null
+++ b/src/app/text-fields/ITextFields.tsx
@@ -0,0 +1,17 @@
+import { Theme } from '@material-ui/core';
+
+interface ITextFieldsOwnProps {
+    classes: any;
+}
+interface ITextFieldsStateProps {
+    theme: Theme;
+}
+
+export type ITextFieldsProps = ITextFieldsOwnProps & ITextFieldsStateProps;
+
+export interface ITextFieldsState {
+    name: string;
+    age: string;
+    multiline: string;
+    currency: string;
+}
diff --git a/src/app/text-fields/TextFields.tsx b/src/app/text-fields/TextFields.tsx
new file mode 100644
index 0000000..14196fe
--- /dev/null
+++ b/src/app/text-fields/TextFields.tsx
@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import { textFieldStyles } from './textFields.styles';
+import { ITextFieldsProps, ITextFieldsState } from './ITextFields';
+import { CardContent, TextField, MenuItem } from '@material-ui/core';
+import { CollapsiblePanel } from '../components';
+
+const currencies = [
+    {
+      value: 'USD',
+      label: '$',
+    },
+    {
+      value: 'EUR',
+      label: '€',
+    },
+    {
+      value: 'BTC',
+      label: '฿',
+    },
+    {
+      value: 'JPY',
+      label: '¥',
+    },
+  ];
+
+class TextFields extends React.Component<ITextFieldsProps, ITextFieldsState> {
+    constructor(props: ITextFieldsProps, context: any) {
+        super(props, context);
+        this.state = {
+            name: 'Cat in the Hat',
+            age: '',
+            multiline: 'Controlled',
+            currency: 'EUR',
+          };
+    }
+
+    public render(): React.ReactElement<TextFields> {
+        const { classes } = this.props;
+
+        return (
+            <div className={classes.root}>
+                <Grid container spacing={8}>
+                    <Grid item xs={12}>
+                        <CollapsiblePanel header='Text Fields' autoOpen>
+                            <CardContent style={{paddingBottom: 0}}>
+                                <Grid container className={classes.gridContainer}>
+                                    <form className={classes.container} noValidate autoComplete='off'>
+                                        <TextField
+                                        id='name'
+                                        label='Name'
+                                        className={classes.textField}
+                                        value={this.state.name}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='uncontrolled'
+                                        label='Uncontrolled'
+                                        defaultValue='foo'
+                                        className={classes.textField}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        required
+                                        id='required'
+                                        label='Required'
+                                        defaultValue='Hello World'
+                                        className={classes.textField}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        error
+                                        id='error'
+                                        label='Error'
+                                        defaultValue='Hello World'
+                                        className={classes.textField}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='password-input'
+                                        label='Password'
+                                        className={classes.textField}
+                                        type='password'
+                                        autoComplete='current-password'
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='read-only-input'
+                                        label='Read Only'
+                                        defaultValue='Hello World'
+                                        className={classes.textField}
+                                        margin='normal'
+                                        InputProps={{
+                                            disabled: true,
+                                        }}
+                                        />
+                                        <TextField
+                                        id='multiline-flexible'
+                                        label='Multiline'
+                                        multiline
+                                        rowsMax='4'
+                                        value={this.state.multiline}
+                                        className={classes.textField}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='multiline-static'
+                                        label='Multiline'
+                                        multiline
+                                        rows='4'
+                                        defaultValue='Default Value'
+                                        className={classes.textField}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='helperText'
+                                        label='Helper text'
+                                        defaultValue='Default Value'
+                                        className={classes.textField}
+                                        helperText='Some important text'
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='with-placeholder'
+                                        label='With placeholder'
+                                        placeholder='Placeholder'
+                                        className={classes.textField}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='textarea'
+                                        label='With placeholder multiline'
+                                        placeholder='Placeholder'
+                                        multiline
+                                        className={classes.textField}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='number'
+                                        label='Number'
+                                        value={this.state.age}
+                                        type='number'
+                                        className={classes.textField}
+                                        InputLabelProps={{
+                                            shrink: true,
+                                        }}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='search'
+                                        label='Search field'
+                                        type='search'
+                                        className={classes.textField}
+                                        margin='normal'
+                                        />
+                                        <TextField
+                                        id='select-currency'
+                                        select
+                                        label='Select'
+                                        className={classes.textField}
+                                        value={this.state.currency}
+                                        SelectProps={{
+                                            MenuProps: {
+                                            className: classes.menu,
+                                            },
+                                        }}
+                                        helperText='Please select your currency'
+                                        margin='normal'
+                                        >
+                                        {currencies.map(option => (
+                                            <MenuItem key={option.value} value={option.value}>
+                                            {option.label}
+                                            </MenuItem>
+                                        ))}
+                                        </TextField>
+                                        <TextField
+                                        id='select-currency-native'
+                                        select
+                                        label='Native select'
+                                        className={classes.textField}
+                                        value={this.state.currency}
+                                        SelectProps={{
+                                            native: true,
+                                            MenuProps: {
+                                            className: classes.menu,
+                                            },
+                                        }}
+                                        helperText='Please select your currency'
+                                        margin='normal'
+                                        >
+                                        {currencies.map(option => (
+                                            <option key={option.value} value={option.value}>
+                                            {option.label}
+                                            </option>
+                                        ))}
+                                        </TextField>
+                                        <TextField
+                                        id='full-width'
+                                        label='Label'
+                                        InputLabelProps={{
+                                            shrink: true,
+                                        }}
+                                        placeholder='Placeholder'
+                                        helperText='Full width!'
+                                        fullWidth
+                                        margin='normal'
+                                        />
+                                    </form>
+                                </Grid>
+                            </CardContent>
+                        </CollapsiblePanel>
+                    </Grid>
+                </Grid>
+            </div >
+        );
+    }
+}
+
+export default withStyles(textFieldStyles)(TextFields);
diff --git a/src/app/text-fields/index.tsx b/src/app/text-fields/index.tsx
new file mode 100644
index 0000000..ace9e51
--- /dev/null
+++ b/src/app/text-fields/index.tsx
@@ -0,0 +1 @@
+export { default } from './TextFields';
diff --git a/src/app/text-fields/textFields.styles.tsx b/src/app/text-fields/textFields.styles.tsx
new file mode 100644
index 0000000..3957d17
--- /dev/null
+++ b/src/app/text-fields/textFields.styles.tsx
@@ -0,0 +1,24 @@
+import { Theme } from '@material-ui/core';
+
+export const textFieldStyles = (theme: Theme): any => ({
+  root: {
+    flexGrow: 1,
+  },
+  gridContainer: {
+    justifyContent: 'center',
+  },
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  textField: {
+    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing.unit,
+    width: 200,
+  },
+  menu: {
+    width: 200,
+  },
+});
+
diff --git a/src/app/buttons/buttons.interface.tsx b/src/app/widgets/IWidgets.tsx
similarity index 100%
rename from src/app/buttons/buttons.interface.tsx
rename to src/app/widgets/IWidgets.tsx
diff --git a/src/app/widgets/index.tsx b/src/app/widgets/index.tsx
new file mode 100644
index 0000000..ad60242
--- /dev/null
+++ b/src/app/widgets/index.tsx
@@ -0,0 +1 @@
+export { default } from './widgets';
diff --git a/src/app/widgets/widgets.styles.tsx b/src/app/widgets/widgets.styles.tsx
new file mode 100644
index 0000000..d2ee4fc
--- /dev/null
+++ b/src/app/widgets/widgets.styles.tsx
@@ -0,0 +1,17 @@
+import { Theme } from '@material-ui/core';
+import { ThemeConfig, defineColours } from '../../theme';
+
+export const homeStyles = (theme: Theme): any => ({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    padding: theme.spacing.unit * 2,
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+  },
+  panelHeader: {
+    background: defineColours(ThemeConfig.warningColor, true),
+    color: '#fff',
+  },
+});
diff --git a/src/app/widgets/widgets.tsx b/src/app/widgets/widgets.tsx
new file mode 100644
index 0000000..024ef10
--- /dev/null
+++ b/src/app/widgets/widgets.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, CardContent, Typography } from '@material-ui/core';
+import { homeStyles } from './widgets.styles';
+import { IHomeProps, IHomeState } from './IWidgets';
+import { StatsWidget, CollapsiblePanel } from '../components';
+import StarIcon from '@material-ui/icons/Star';
+import InboxIcon from '@material-ui/icons/Inbox';
+import { defineColours, ThemeConfig } from '../../theme';
+
+class Home extends React.Component<IHomeProps, IHomeState> {
+  public render(): React.ReactElement<Home> {
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <Grid container spacing={8}>
+          <Grid item xs={12} sm={6} md={3}>
+            <StatsWidget
+              component={<StarIcon style={{ fontSize: 50 }} />}
+              value='32.5 C'
+              title='Temperature'
+              textColor={defineColours(ThemeConfig.primaryColor, true)}
+              backgroundColor={defineColours(ThemeConfig.primaryColor)}
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={3}>
+            <StatsWidget
+              component={<InboxIcon style={{ fontSize: 50 }} />}
+              value='13486'
+              title='Visibility'
+              color='secondary'
+              backgroundColor={defineColours(ThemeConfig.secondaryColor)}
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={3}>
+            <StatsWidget
+              component={<StarIcon style={{ fontSize: 50 }} />}
+              value='87%'
+              title='Humidity'
+              textColor={defineColours(ThemeConfig.warningColor, true)}
+              backgroundColor={defineColours(ThemeConfig.warningColor)}
+            />
+          </Grid>
+          <Grid item xs={12} sm={6} md={3}>
+            <StatsWidget
+              component={<StarIcon style={{ fontSize: 50 }} />}
+              value='2.1 m/s'
+              title='Wind Speed'
+              textColor={defineColours(ThemeConfig.dangerColor, true)}
+              backgroundColor={defineColours(ThemeConfig.dangerColor)}
+            />
+          </Grid>
+        </Grid>
+        <Grid container spacing={8}>
+          <Grid item xs={12} sm={6} md={6}>
+            <CollapsiblePanel header='Some Title' className={classes.panelHeader}>
+              <CardContent>
+                <Typography paragraph variant='body2'>
+                  Method:
+                </Typography>
+                <Typography paragraph>
+                  Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
+                  minutes.
+                </Typography>
+                <Typography paragraph>
+                  Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
+                  heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
+                  browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving
+                  chicken and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion,
+                  salt and pepper, and cook, stirring often until thickened and fragrant, about 10
+                  minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+                </Typography>
+                <Typography paragraph>
+                  Add rice and stir very gently to distribute. Top with artichokes and peppers, and
+                  cook without stirring, until most of the liquid is absorbed, 15 to 18 minutes.
+                  Reduce heat to medium-low, add reserved shrimp and mussels, tucking them down into
+                  the rice, and cook again without stirring, until mussels have opened and rice is
+                  just tender, 5 to 7 minutes more. (Discard any mussels that don’t open.)
+                </Typography>
+                <Typography>
+                  Set aside off of the heat to let rest for 10 minutes, and then serve.
+                </Typography>
+              </CardContent>
+            </CollapsiblePanel>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default withStyles(homeStyles, {withTheme: true})(Home);
diff --git a/tsconfig.json b/tsconfig.json
index a4b046e..618059f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
     "strictNullChecks": true,
     "outDir": "build",
     "noUnusedLocals": true,
+    "lib": ["es2015", "dom"],
   },
   "exclude": [
     "build",