diff --git a/src/containers/Full/FullAside.js b/src/containers/Full/FullAside.js
index e701fdd..77de818 100644
--- a/src/containers/Full/FullAside.js
+++ b/src/containers/Full/FullAside.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane, ListGroup, ListGroupItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { AppSwitch } from '@coreui/react'
 
 const propTypes = {
   children: PropTypes.node,
@@ -239,11 +240,7 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-4">
                 <small><b>Option 1</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'}/>
               </div>
               <div>
                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -255,11 +252,7 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 2</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} size={'sm'}/>
               </div>
               <div>
                 <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -271,22 +264,17 @@ class FullAside extends Component {
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 3</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} disabled/>
+                <div>
+                  <small className="text-muted">Option disabled.</small>
+                </div>
               </div>
             </div>
 
             <div className="aside-options">
               <div className="clearfix mt-3">
                 <small><b>Option 4</b></small>
-                <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right'} variant={'pill'} label color={'success'} defaultChecked size={'sm'} />
               </div>
             </div>
 
diff --git a/src/views/Base/Cards/Cards.js b/src/views/Base/Cards/Cards.js
index 25d0310..4a894b6 100644
--- a/src/views/Base/Cards/Cards.js
+++ b/src/views/Base/Cards/Cards.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap';
+import { AppSwitch } from '@coreui/react'
 
 class Cards extends Component {
   constructor(props) {
@@ -64,11 +65,7 @@ class Cards extends Component {
             <Card>
               <CardHeader>
                 Card with switch
-                <Label className="switch switch-sm switch-text switch-info float-right mb-0">
-                  <Input type="checkbox" className="switch-input" />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
               </CardHeader>
               <CardBody>
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
diff --git a/src/views/Base/Switches/Switches.js b/src/views/Base/Switches/Switches.js
index 4e3dc73..6de680a 100644
--- a/src/views/Base/Switches/Switches.js
+++ b/src/views/Base/Switches/Switches.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Card, CardBody, CardHeader, Col, Input, Label, Row, Table } from 'reactstrap';
+import { AppSwitch } from '@coreui/react'
 
 class Switches extends Component {
   render() {
@@ -7,137 +8,184 @@ class Switches extends Component {
       <div className="animated fadeIn">
 
         <Row>
-          <Col xs="12">
+          <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 3d Switch
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-3d switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-3d switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-3d switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-3d switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-3d switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-3d switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'}  />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>disabled</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked disabled />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
               </CardBody>
             </Card>
           </Col>
 
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline="alt"</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} checked outline={'alt'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} outline={'alt'} disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline={'alt'} label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                3d Switch <small><code>outline={'alt'} label</code></small>
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'secondary'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'success'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'warning'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'info'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'danger'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'light'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'dark'} defaultChecked label />
+                <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} label />
+              </CardBody>
+            </Card>
+          </Col>
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 Switch default
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'primary'} checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} checked />
+                <AppSwitch className={'mx-1'} color={'success'} checked />
+                <AppSwitch className={'mx-1'} color={'warning'} checked />
+                <AppSwitch className={'mx-1'} color={'info'} checked />
+                <AppSwitch className={'mx-1'} color={'danger'} checked />
+                <AppSwitch className={'mx-1'} color={'light'} checked />
+                <AppSwitch className={'mx-1'} color={'dark'} checked />
+                <AppSwitch className={'mx-1'} color={'primary'} disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch default - pills
+                Switch pills
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-pill switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} disabled />
               </CardBody>
             </Card>
           </Col>
@@ -148,131 +196,51 @@ class Switches extends Component {
                 Switch outline
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-primary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-secondary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'primary'} outline checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch outline - pills
+                Switch outline pills
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-pill switch-primary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-secondary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 Switch outline alternative
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-primary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-secondary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled />
               </CardBody>
             </Card>
           </Col>
@@ -283,41 +251,15 @@ class Switches extends Component {
                 Switch outline alternative - pills
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-default switch-pill switch-primary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-secondary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-default switch-pill switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled />
               </CardBody>
             </Card>
           </Col>
@@ -328,178 +270,105 @@ class Switches extends Component {
                 Switch with text
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'primary'} label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} label checked />
+                <AppSwitch className={'mx-1'} color={'success'} label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} label checked />
+                <AppSwitch className={'mx-1'} color={'info'} label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} label checked />
+                <AppSwitch className={'mx-1'} color={'light'} label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} label disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch with text - pills
+                Switch with text pills
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-pill switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} label disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
                 Switch with text outline
               </CardHeader>
               <CardBody>
-
-                <Label className="switch switch-text switch-primary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-secondary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'primary'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline label disabled />
               </CardBody>
             </Card>
           </Col>
-
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch with text outline - pills
+                Switch with text outline pills
               </CardHeader>
               <CardBody>
-
-                <Label className="switch switch-text switch-pill switch-primary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-secondary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} label disabled />
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} label checked />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} label disabled />
               </CardBody>
             </Card>
           </Col>
@@ -510,41 +379,33 @@ class Switches extends Component {
                 Switch with text outline alternative
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-primary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-secondary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
               </CardBody>
             </Card>
           </Col>
@@ -552,44 +413,36 @@ class Switches extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                Switch with text outline alternative - pills
+                Switch with text outline alternative
               </CardHeader>
               <CardBody>
-                <Label className="switch switch-text switch-pill switch-primary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-secondary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-text switch-pill switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on="On" data-off="Off"></span>
-                  <span className="switch-handle"></span>
-                </Label>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'}/>
+                <AppSwitch className={'mx-1'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
+              </CardBody>
+            </Card>
+          </Col>
+          <Col xs="12" md="6">
+            <Card>
+              <CardHeader>
+                Switch with text outline alternative pills
+              </CardHeader>
+              <CardBody>
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'secondary'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'success'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'warning'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'info'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'danger'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'light'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'dark'} outline={'alt'} checked label dataOn={'\u2713'} dataOff={'\u2715'} />
+                <AppSwitch className={'mx-1'} variant={'pill'} color={'primary'} outline={'alt'} disabled label dataOn={'\u2713'} dataOff={'\u2715'}/>
               </CardBody>
             </Card>
           </Col>
@@ -605,7 +458,7 @@ class Switches extends Component {
                   <tr>
                     <th>Size</th>
                     <th>Example</th>
-                    <th>CSS Class</th>
+                    <th>Props</th>
                   </tr>
                   </thead>
                   <tbody>
@@ -614,14 +467,10 @@ class Switches extends Component {
                       Large
                     </td>
                     <td>
-                      <Label className="switch switch-lg switch-3d switch-primary">
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'lg'} />
                     </td>
                     <td>
-                      Add following class <code>.switch-lg</code>
+                      Add <code>size={'lg'}</code>
                     </td>
                   </tr>
                   <tr>
@@ -629,11 +478,7 @@ class Switches extends Component {
                       Normal
                     </td>
                     <td>
-                      <Label className="switch switch-3d switch-primary">
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked  />
                     </td>
                     <td>
                       -
@@ -644,14 +489,10 @@ class Switches extends Component {
                       Small
                     </td>
                     <td>
-                      <Label className="switch switch-sm switch-3d switch-primary">
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
+                      <AppSwitch className={'mx-1'} variant={'3d'} color={'primary'} checked size={'sm'} />
                     </td>
                     <td>
-                      Add following class <code>.switch-sm</code>
+                      Add <code>size={'sm'}</code>
                     </td>
                   </tr>
                   </tbody>