From f4b25703db5fdaac66278629d987c5aa4214f22d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Sun, 1 Aug 2021 21:33:07 +0200
Subject: [PATCH] refactor: update views

---
 src/views/components/base/cards/Cards.js      |   4 +-
 .../components/base/collapses/Collapses.js    |   4 +-
 .../components/base/jumbotrons/Jumbotrons.js  |   4 +-
 src/views/components/base/navbars/Navbars.js  |   8 +-
 .../buttons/button-groups/ButtonGroups.js     |   6 +-
 .../forms/checks-radios/ChecksRadios.js       |  29 ++---
 .../forms/floating-labels/FloatingLabels.js   |  45 ++++---
 .../forms/form-control/FormControl.js         |  43 +++----
 .../forms/input-group/InputGroup.js           |  67 +++++-----
 src/views/components/forms/layout/Layout.js   |  94 +++++++--------
 src/views/components/forms/range/Range.js     |   2 +-
 .../components/forms/validation/Validation.js | 114 +++++++++---------
 src/views/components/icons/brands/Brands.js   |   2 +-
 src/views/components/widgets/Widgets.js       |  76 ++++++------
 src/views/components/widgets/WidgetsBrand.js  |   8 +-
 .../components/widgets/WidgetsDropdown.js     |   8 +-
 src/views/dashboard/Dashboard.js              |  16 +--
 src/views/pages/login/Login.js                |  12 +-
 src/views/pages/page404/Page404.js            |   6 +-
 src/views/pages/page500/Page500.js            |   6 +-
 src/views/pages/register/Register.js          |  12 +-
 src/views/theme/colors/Colors.js              |   2 +-
 22 files changed, 275 insertions(+), 293 deletions(-)

diff --git a/src/views/components/base/cards/Cards.js b/src/views/components/base/cards/Cards.js
index 5ea9161..8836345 100644
--- a/src/views/components/base/cards/Cards.js
+++ b/src/views/components/base/cards/Cards.js
@@ -355,7 +355,7 @@ const Cards = () => {
             </p>
             <Example href="components/card/#sizing">
               <CRow>
-                <CCol sm="6">
+                <CCol sm={6}>
                   <CCard>
                     <CCardBody>
                       <CCardTitle>Special title treatment</CCardTitle>
@@ -366,7 +366,7 @@ const Cards = () => {
                     </CCardBody>
                   </CCard>
                 </CCol>
-                <CCol sm="6">
+                <CCol sm={6}>
                   <CCard>
                     <CCardBody>
                       <CCardTitle>Special title treatment</CCardTitle>
diff --git a/src/views/components/base/collapses/Collapses.js b/src/views/components/base/collapses/Collapses.js
index 4a85d39..1da1f42 100644
--- a/src/views/components/base/collapses/Collapses.js
+++ b/src/views/components/base/collapses/Collapses.js
@@ -64,7 +64,7 @@ const Collapses = () => {
                 Toggle both elements
               </CButton>
               <CRow>
-                <CCol xs="6">
+                <CCol xs={6}>
                   <CCollapse visible={visibleA}>
                     <CCard className="mt-3">
                       <CCardBody>
@@ -75,7 +75,7 @@ const Collapses = () => {
                     </CCard>
                   </CCollapse>
                 </CCol>
-                <CCol xs="6">
+                <CCol xs={6}>
                   <CCollapse visible={visibleB}>
                     <CCard className="mt-3">
                       <CCardBody>
diff --git a/src/views/components/base/jumbotrons/Jumbotrons.js b/src/views/components/base/jumbotrons/Jumbotrons.js
index 1bd9340..1129668 100644
--- a/src/views/components/base/jumbotrons/Jumbotrons.js
+++ b/src/views/components/base/jumbotrons/Jumbotrons.js
@@ -21,7 +21,7 @@ const Jumbotrons = () => {
             <CButton size="lg">Example button</CButton>
           </CContainer>
           <CRow className="align-items-md-stretch">
-            <CCol md="6">
+            <CCol md={6}>
               <div className="h-100 p-5 text-white bg-dark rounded-3">
                 <h2>Change the background</h2>
                 <p>
@@ -33,7 +33,7 @@ const Jumbotrons = () => {
                 </CButton>
               </div>
             </CCol>
-            <CCol md="6">
+            <CCol md={6}>
               <div className="h-100 p-5 bg-light border rounded-3">
                 <h2>Add borders</h2>
                 <p>
diff --git a/src/views/components/base/navbars/Navbars.js b/src/views/components/base/navbars/Navbars.js
index e4c0e37..5bd3647 100644
--- a/src/views/components/base/navbars/Navbars.js
+++ b/src/views/components/base/navbars/Navbars.js
@@ -8,7 +8,7 @@ import {
   CDropdownMenu,
   CDropdownToggle,
   CForm,
-  CFormControl,
+  CFormInput,
   CImage,
   CNavbar,
   CNavbarNav,
@@ -44,7 +44,7 @@ const CNavbars = () => {
               </CNavbarNav>
               <CNavbarNav className="ms-auto">
                 <CForm className="d-flex">
-                  <CFormControl className="me-sm-2" placeholder="Search" size="sm" />
+                  <CFormInput className="me-sm-2" placeholder="Search" size="sm" />
                   <CButton color="light" className="my-2 my-sm-0" type="submit">
                     Search
                   </CButton>
@@ -148,7 +148,7 @@ const CNavbars = () => {
         <CCardBody>
           <CNavbar light color="light">
             <CForm className="d-flex">
-              <CFormControl className="me-sm-2" placeholder="Search" size="sm" />
+              <CFormInput className="me-sm-2" placeholder="Search" size="sm" />
               <CButton color="outline-success" className="my-2 my-sm-0" type="submit">
                 Search
               </CButton>
@@ -162,7 +162,7 @@ const CNavbars = () => {
         <CCardBody>
           <CNavbar light color="light">
             <CForm className="d-flex">
-              <CFormControl className="me-sm-2" placeholder="Username" />
+              <CFormInput className="me-sm-2" placeholder="Username" />
             </CForm>
           </CNavbar>
         </CCardBody>
diff --git a/src/views/components/buttons/button-groups/ButtonGroups.js b/src/views/components/buttons/button-groups/ButtonGroups.js
index 64ce7d8..a529a3b 100644
--- a/src/views/components/buttons/button-groups/ButtonGroups.js
+++ b/src/views/components/buttons/button-groups/ButtonGroups.js
@@ -13,7 +13,7 @@ import {
   CCardHeader,
   CCol,
   CFormCheck,
-  CFormControl,
+  CFormInput,
   CInputGroup,
   CInputGroupText,
   CRow,
@@ -220,7 +220,7 @@ const ButtonGroups = () => {
                 </CButtonGroup>
                 <CInputGroup>
                   <CInputGroupText>@</CInputGroupText>
-                  <CFormControl
+                  <CFormInput
                     placeholder="Input group example"
                     aria-label="Input group example"
                     aria-describedby="btnGroupAddon"
@@ -248,7 +248,7 @@ const ButtonGroups = () => {
                 </CButtonGroup>
                 <CInputGroup>
                   <CInputGroupText>@</CInputGroupText>
-                  <CFormControl
+                  <CFormInput
                     placeholder="Input group example"
                     aria-label="Input group example"
                     aria-describedby="btnGroupAddon"
diff --git a/src/views/components/forms/checks-radios/ChecksRadios.js b/src/views/components/forms/checks-radios/ChecksRadios.js
index 11117c1..805ecdb 100644
--- a/src/views/components/forms/checks-radios/ChecksRadios.js
+++ b/src/views/components/forms/checks-radios/ChecksRadios.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react'
+import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
 import { DocsCallout, Example } from 'src/reusable'
 
 const ChecksRadios = () => {
@@ -106,25 +106,18 @@ const ChecksRadios = () => {
               attribute.
             </p>
             <Example href="forms/checks-radios#switches">
-              <CFormCheck
-                switch
-                label="Default switch checkbox input"
-                id="formSwitchCheckDefault"
-              />
-              <CFormCheck
-                switch
+              <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
+              <CFormSwitch
                 label="Checked switch checkbox input"
                 id="formSwitchCheckChecked"
                 defaultChecked
               />
-              <CFormCheck
-                switch
+              <CFormSwitch
                 label="Disabled switch checkbox input"
                 id="formSwitchCheckDisabled"
                 disabled
               />
-              <CFormCheck
-                switch
+              <CFormSwitch
                 label="Disabled checked switch checkbox input"
                 id="formSwitchCheckCheckedDisabled"
                 defaultChecked
@@ -141,19 +134,13 @@ const ChecksRadios = () => {
           </CCardHeader>
           <CCardBody>
             <Example href="forms/checks-radios#sizes">
-              <CFormCheck
-                switch
-                label="Default switch checkbox input"
-                id="formSwitchCheckDefault"
-              />
-              <CFormCheck
-                switch
+              <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
+              <CFormSwitch
                 size="lg"
                 label="Large switch checkbox input"
                 id="formSwitchCheckDefaultLg"
               />
-              <CFormCheck
-                switch
+              <CFormSwitch
                 size="xl"
                 label="Extra large switch checkbox input"
                 id="formSwitchCheckDefaultXL"
diff --git a/src/views/components/forms/floating-labels/FloatingLabels.js b/src/views/components/forms/floating-labels/FloatingLabels.js
index edb7c38..c25aebf 100644
--- a/src/views/components/forms/floating-labels/FloatingLabels.js
+++ b/src/views/components/forms/floating-labels/FloatingLabels.js
@@ -4,10 +4,11 @@ import {
   CCardBody,
   CCardHeader,
   CCol,
-  CFormControl,
+  CFormInput,
   CFormLabel,
   CFormFloating,
   CFormSelect,
+  CFormTextarea,
   CRow,
 } from '@coreui/react'
 import { DocsCallout, Example } from 'src/reusable'
@@ -25,22 +26,21 @@ const FloatingLabels = () => {
           </CCardHeader>
           <CCardBody>
             <p className="text-medium-emphasis small">
-              Wrap a pair of <code>&lt;CFormControl&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
+              Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
               elements in <code>CFormFloating</code> to enable floating labels with textual form
-              fields. A <code>placeholder</code> is required on each{' '}
-              <code>&lt;CFormControl&gt;</code> as our method of CSS-only floating labels uses the{' '}
-              <code>:placeholder-shown</code> pseudo-element. Also note that the{' '}
-              <code>&lt;CFormControl&gt;</code> must come first so we can utilize a sibling selector
-              (e.g., <code>~</code>).
+              fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>{' '}
+              as our method of CSS-only floating labels uses the <code>:placeholder-shown</code>{' '}
+              pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
+              we can utilize a sibling selector (e.g., <code>~</code>).
             </p>
             <Example href="forms/floating-labels">
               <CFormFloating className="mb-3">
-                <CFormControl type="email" id="floatingInput" placeholder="name@example.com" />
+                <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
                 <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
               </CFormFloating>
               <CFormFloating>
-                <CFormControl type="password" id="floatingPassword" placeholder="Password" />
-                <CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>
+                <CFormInput type="password" id="floatingPassword" placeholder="Password" />
+                <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
               </CFormFloating>
             </Example>
             <p className="text-medium-emphasis small">
@@ -49,7 +49,7 @@ const FloatingLabels = () => {
             </p>
             <Example href="forms/floating-labels">
               <CFormFloating>
-                <CFormControl
+                <CFormInput
                   type="email"
                   id="floatingInputValue"
                   placeholder="name@example.com"
@@ -68,33 +68,30 @@ const FloatingLabels = () => {
           </CCardHeader>
           <CCardBody>
             <p className="text-medium-emphasis small">
-              By default, <code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>s will be
-              the same height as <code>&lt;CFormControl&gt;</code>s.
+              By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as{' '}
+              <code>&lt;CFormInput&gt;</code>s.
             </p>
             <Example href="forms/floating-labels#textareas">
               <CFormFloating>
-                <CFormControl
-                  component="textarea"
+                <CFormTextarea
                   id="floatingTextarea"
                   placeholder="Leave a comment here"
-                ></CFormControl>
+                ></CFormTextarea>
                 <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
               </CFormFloating>
             </Example>
             <p className="text-medium-emphasis small">
-              To set a custom height on your{' '}
-              <code>&lt;CFormControl component=&#34;textarea&#34;&gt;</code>, do not use the{' '}
+              To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the{' '}
               <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
               inline or via custom CSS).
             </p>
             <Example href="forms/floating-labels#textareas">
               <CFormFloating>
-                <CFormControl
-                  component="textarea"
+                <CFormTextarea
                   placeholder="Leave a comment here"
                   id="floatingTextarea2"
                   style={{ height: '100px' }}
-                ></CFormControl>
+                ></CFormTextarea>
                 <CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
               </CFormFloating>
             </Example>
@@ -108,9 +105,9 @@ const FloatingLabels = () => {
           </CCardHeader>
           <CCardBody>
             <p className="text-medium-emphasis small">
-              Other than <code>&lt;CFormControl&gt;</code>, floating labels are only available on{' '}
+              Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on{' '}
               <code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
-              <code>&lt;CFormControl&gt;</code>s, they&#39;ll always show the{' '}
+              <code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the{' '}
               <code>&lt;CFormLabel&gt;</code> in its floated state.{' '}
               <strong>
                 Selects with <code>size</code> and <code>multiple</code> are not supported.
@@ -144,7 +141,7 @@ const FloatingLabels = () => {
               <CRow xs={{ gutter: 2 }}>
                 <CCol md>
                   <CFormFloating>
-                    <CFormControl
+                    <CFormInput
                       type="email"
                       id="floatingInputGrid"
                       placeholder="name@example.com"
diff --git a/src/views/components/forms/form-control/FormControl.js b/src/views/components/forms/form-control/FormControl.js
index 1a84cbc..be0189a 100644
--- a/src/views/components/forms/form-control/FormControl.js
+++ b/src/views/components/forms/form-control/FormControl.js
@@ -6,8 +6,9 @@ import {
   CCardHeader,
   CCol,
   CForm,
-  CFormControl,
+  CFormInput,
   CFormLabel,
+  CFormTextarea,
   CRow,
 } from '@coreui/react'
 import { DocsCallout, Example } from 'src/reusable'
@@ -28,7 +29,7 @@ const FormControl = () => {
               <CForm>
                 <div className="mb-3">
                   <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
-                  <CFormControl
+                  <CFormInput
                     type="email"
                     id="exampleFormControlInput1"
                     placeholder="name@example.com"
@@ -36,11 +37,7 @@ const FormControl = () => {
                 </div>
                 <div className="mb-3">
                   <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
-                  <CFormControl
-                    component="textarea"
-                    id="exampleFormControlTextarea1"
-                    rows="3"
-                  ></CFormControl>
+                  <CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
                 </div>
               </CForm>
             </Example>
@@ -58,20 +55,20 @@ const FormControl = () => {
               <code>size=&#34;sm&#34;</code>.
             </p>
             <Example href="forms/form-control#sizing">
-              <CFormControl
+              <CFormInput
                 type="text"
                 size="lg"
                 placeholder="Large input"
                 aria-label="lg input example"
               />
               <br />
-              <CFormControl
+              <CFormInput
                 type="text"
                 placeholder="Default input"
                 aria-label="default input example"
               />
               <br />
-              <CFormControl
+              <CFormInput
                 type="text"
                 size="sm"
                 placeholder="Small input"
@@ -92,14 +89,14 @@ const FormControl = () => {
               appearance and remove pointer events.
             </p>
             <Example href="forms/form-control#disabled">
-              <CFormControl
+              <CFormInput
                 type="text"
                 placeholder="Disabled input"
                 aria-label="Disabled input example"
                 disabled
               />
               <br />
-              <CFormControl
+              <CFormInput
                 type="text"
                 placeholder="Disabled readonly input"
                 aria-label="Disabled input example"
@@ -123,7 +120,7 @@ const FormControl = () => {
               but retain the standard cursor.
             </p>
             <Example href="forms/form-control#readonly">
-              <CFormControl
+              <CFormInput
                 type="text"
                 placeholder="Readonly input here..."
                 aria-label="readonly input example"
@@ -150,7 +147,7 @@ const FormControl = () => {
                   Email
                 </CFormLabel>
                 <div className="col-sm-10">
-                  <CFormControl
+                  <CFormInput
                     type="text"
                     id="staticEmail"
                     defaultValue="email@example.com"
@@ -164,7 +161,7 @@ const FormControl = () => {
                   Password
                 </CFormLabel>
                 <div className="col-sm-10">
-                  <CFormControl type="password" id="inputPassword" />
+                  <CFormInput type="password" id="inputPassword" />
                 </div>
               </CRow>
             </Example>
@@ -174,7 +171,7 @@ const FormControl = () => {
                   <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
                     Email
                   </CFormLabel>
-                  <CFormControl
+                  <CFormInput
                     type="text"
                     id="staticEmail2"
                     defaultValue="email@example.com"
@@ -186,7 +183,7 @@ const FormControl = () => {
                   <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
                     Password
                   </CFormLabel>
-                  <CFormControl type="password" id="inputPassword2" placeholder="Password" />
+                  <CFormInput type="password" id="inputPassword2" placeholder="Password" />
                 </div>
                 <div className="col-auto">
                   <CButton type="submit" className="mb-3">
@@ -207,23 +204,23 @@ const FormControl = () => {
             <Example href="forms/form-control#file-input">
               <div className="mb-3">
                 <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
-                <CFormControl type="file" id="formFile" />
+                <CFormInput type="file" id="formFile" />
               </div>
               <div className="mb-3">
                 <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
-                <CFormControl type="file" id="formFileMultiple" multiple />
+                <CFormInput type="file" id="formFileMultiple" multiple />
               </div>
               <div className="mb-3">
                 <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
-                <CFormControl type="file" id="formFileDisabled" disabled />
+                <CFormInput type="file" id="formFileDisabled" disabled />
               </div>
               <div className="mb-3">
                 <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
-                <CFormControl type="file" size="sm" id="formFileSm" />
+                <CFormInput type="file" size="sm" id="formFileSm" />
               </div>
               <div>
                 <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
-                <CFormControl type="file" size="lg" id="formFileLg" />
+                <CFormInput type="file" size="lg" id="formFileLg" />
               </div>
             </Example>
           </CCardBody>
@@ -237,7 +234,7 @@ const FormControl = () => {
           <CCardBody>
             <Example href="forms/form-control#color">
               <CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
-              <CFormControl
+              <CFormInput
                 type="color"
                 id="exampleColorInput"
                 defaultValue="#563d7c"
diff --git a/src/views/components/forms/input-group/InputGroup.js b/src/views/components/forms/input-group/InputGroup.js
index a7431d9..c4e85a7 100644
--- a/src/views/components/forms/input-group/InputGroup.js
+++ b/src/views/components/forms/input-group/InputGroup.js
@@ -11,9 +11,10 @@ import {
   CDropdownMenu,
   CDropdownToggle,
   CFormCheck,
-  CFormControl,
+  CFormInput,
   CFormLabel,
   CFormSelect,
+  CFormTextarea,
   CInputGroup,
   CInputGroupText,
   CRow,
@@ -40,14 +41,14 @@ const Select = () => {
             <Example href="forms/input-group">
               <CInputGroup className="mb-3">
                 <CInputGroupText id="basic-addon1">@</CInputGroupText>
-                <CFormControl
+                <CFormInput
                   placeholder="Username"
                   aria-label="Username"
                   aria-describedby="basic-addon1"
                 />
               </CInputGroup>
               <CInputGroup className="mb-3">
-                <CFormControl
+                <CFormInput
                   placeholder="Recipient&#39;s username"
                   aria-label="Recipient&#39;s username"
                   aria-describedby="basic-addon2"
@@ -57,21 +58,21 @@ const Select = () => {
               <CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
               <CInputGroup className="mb-3">
                 <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
-                <CFormControl id="basic-url" aria-describedby="basic-addon3" />
+                <CFormInput id="basic-url" aria-describedby="basic-addon3" />
               </CInputGroup>
               <CInputGroup className="mb-3">
                 <CInputGroupText>$</CInputGroupText>
-                <CFormControl aria-label="Amount (to the nearest dollar)" />
+                <CFormInput aria-label="Amount (to the nearest dollar)" />
                 <CInputGroupText>.00</CInputGroupText>
               </CInputGroup>
               <CInputGroup className="mb-3">
-                <CFormControl placeholder="Username" aria-label="Username" />
+                <CFormInput placeholder="Username" aria-label="Username" />
                 <CInputGroupText>@</CInputGroupText>
-                <CFormControl placeholder="Server" aria-label="Server" />
+                <CFormInput placeholder="Server" aria-label="Server" />
               </CInputGroup>
               <CInputGroup>
                 <CInputGroupText>With textarea</CInputGroupText>
-                <CFormControl component="textarea" aria-label="With textarea"></CFormControl>
+                <CFormTextarea aria-label="With textarea"></CFormTextarea>
               </CInputGroup>
             </Example>
           </CCardBody>
@@ -91,7 +92,7 @@ const Select = () => {
             <Example href="forms/input-group#wrapping">
               <CInputGroup className="flex-nowrap">
                 <CInputGroupText id="addon-wrapping">@</CInputGroupText>
-                <CFormControl
+                <CFormInput
                   placeholder="Username"
                   aria-label="Username"
                   aria-describedby="addon-wrapping"
@@ -118,21 +119,21 @@ const Select = () => {
             <Example href="forms/input-group#sizing">
               <CInputGroup size="sm" className="mb-3">
                 <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
-                <CFormControl
+                <CFormInput
                   aria-label="Sizing example input"
                   aria-describedby="inputGroup-sizing-sm"
                 />
               </CInputGroup>
               <CInputGroup className="mb-3">
                 <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
-                <CFormControl
+                <CFormInput
                   aria-label="Sizing example input"
                   aria-describedby="inputGroup-sizing-default"
                 />
               </CInputGroup>
               <CInputGroup size="lg">
                 <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
-                <CFormControl
+                <CFormInput
                   aria-label="Sizing example input"
                   aria-describedby="inputGroup-sizing-lg"
                 />
@@ -159,7 +160,7 @@ const Select = () => {
                     aria-label="Checkbox for following text input"
                   />
                 </CInputGroupText>
-                <CFormControl aria-label="Text input with checkbox" />
+                <CFormInput aria-label="Text input with checkbox" />
               </CInputGroup>
               <CInputGroup>
                 <CInputGroupText>
@@ -169,7 +170,7 @@ const Select = () => {
                     aria-label="Radio button for following text input"
                   />
                 </CInputGroupText>
-                <CFormControl aria-label="Text input with radio button" />
+                <CFormInput aria-label="Text input with radio button" />
               </CInputGroup>
             </Example>
           </CCardBody>
@@ -182,15 +183,15 @@ const Select = () => {
           </CCardHeader>
           <CCardBody>
             <p className="text-medium-emphasis small">
-              While multiple <code>&lt;CFormControl&gt;</code>s are supported visually, validation
+              While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
               styles are only available for input groups with a single{' '}
-              <code>&lt;CFormControl&gt;</code>.
+              <code>&lt;CFormInput&gt;</code>.
             </p>
             <Example href="forms/input-group#multiple-inputs">
               <CInputGroup>
                 <CInputGroupText>First and last name</CInputGroupText>
-                <CFormControl aria-label="First name" />
-                <CFormControl aria-label="Last name" />
+                <CFormInput aria-label="First name" />
+                <CFormInput aria-label="Last name" />
               </CInputGroup>
             </Example>
           </CCardBody>
@@ -210,10 +211,10 @@ const Select = () => {
               <CInputGroup className="mb-3">
                 <CInputGroupText>$</CInputGroupText>
                 <CInputGroupText>0.00</CInputGroupText>
-                <CFormControl aria-label="Dollar amount (with dot and two decimal places)" />
+                <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
               </CInputGroup>
               <CInputGroup>
-                <CFormControl aria-label="Dollar amount (with dot and two decimal places)" />
+                <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
                 <CInputGroupText>$</CInputGroupText>
                 <CInputGroupText>0.00</CInputGroupText>
               </CInputGroup>
@@ -236,14 +237,14 @@ const Select = () => {
                 <CButton type="button" color="secondary" variant="outline" id="button-addon1">
                   Button
                 </CButton>
-                <CFormControl
+                <CFormInput
                   placeholder=""
                   aria-label="Example text with button addon"
                   aria-describedby="button-addon1"
                 />
               </CInputGroup>
               <CInputGroup className="mb-3">
-                <CFormControl
+                <CFormInput
                   placeholder="Recipient's username"
                   aria-label="Recipient's username"
                   aria-describedby="button-addon2"
@@ -259,10 +260,10 @@ const Select = () => {
                 <CButton type="button" color="secondary" variant="outline">
                   Button
                 </CButton>
-                <CFormControl placeholder="" aria-label="Example text with two button addons" />
+                <CFormInput placeholder="" aria-label="Example text with two button addons" />
               </CInputGroup>
               <CInputGroup>
-                <CFormControl
+                <CFormInput
                   placeholder="Recipient's username"
                   aria-label="Recipient's username with two button addons"
                 />
@@ -297,10 +298,10 @@ const Select = () => {
                     <CDropdownItem href="#">Separated link</CDropdownItem>
                   </CDropdownMenu>
                 </CDropdown>
-                <CFormControl aria-label="Text input with dropdown button" />
+                <CFormInput aria-label="Text input with dropdown button" />
               </CInputGroup>
               <CInputGroup className="mb-3">
-                <CFormControl aria-label="Text input with dropdown button" />
+                <CFormInput aria-label="Text input with dropdown button" />
                 <CDropdown alignment="end" variant="input-group">
                   <CDropdownToggle color="secondary" variant="outline">
                     Dropdown
@@ -327,7 +328,7 @@ const Select = () => {
                     <CDropdownItem href="#">Separated link</CDropdownItem>
                   </CDropdownMenu>
                 </CDropdown>
-                <CFormControl aria-label="Text input with 2 dropdown buttons" />
+                <CFormInput aria-label="Text input with 2 dropdown buttons" />
                 <CDropdown alignment="end" variant="input-group">
                   <CDropdownToggle color="secondary" variant="outline">
                     Dropdown
@@ -366,10 +367,10 @@ const Select = () => {
                     <CDropdownItem href="#">Separated link</CDropdownItem>
                   </CDropdownMenu>
                 </CDropdown>
-                <CFormControl aria-label="Text input with segmented dropdown button" />
+                <CFormInput aria-label="Text input with segmented dropdown button" />
               </CInputGroup>
               <CInputGroup>
-                <CFormControl aria-label="Text input with segmented dropdown button" />
+                <CFormInput aria-label="Text input with segmented dropdown button" />
                 <CDropdown alignment="end" variant="input-group">
                   <CButton type="button" color="secondary" variant="outline">
                     Action
@@ -454,10 +455,10 @@ const Select = () => {
                 <CInputGroupText component="label" htmlFor="inputGroupFile01">
                   Upload
                 </CInputGroupText>
-                <CFormControl type="file" id="inputGroupFile01" />
+                <CFormInput type="file" id="inputGroupFile01" />
               </CInputGroup>
               <CInputGroup className="mb-3">
-                <CFormControl type="file" id="inputGroupFile02" />
+                <CFormInput type="file" id="inputGroupFile02" />
                 <CInputGroupText component="label" htmlFor="inputGroupFile02">
                   Upload
                 </CInputGroupText>
@@ -471,7 +472,7 @@ const Select = () => {
                 >
                   Button
                 </CButton>
-                <CFormControl
+                <CFormInput
                   type="file"
                   id="inputGroupFile03"
                   aria-describedby="inputGroupFileAddon03"
@@ -479,7 +480,7 @@ const Select = () => {
                 />
               </CInputGroup>
               <CInputGroup>
-                <CFormControl
+                <CFormInput
                   type="file"
                   id="inputGroupFile04"
                   aria-describedby="inputGroupFileAddon04"
diff --git a/src/views/components/forms/layout/Layout.js b/src/views/components/forms/layout/Layout.js
index d6b1ce6..86bcba5 100644
--- a/src/views/components/forms/layout/Layout.js
+++ b/src/views/components/forms/layout/Layout.js
@@ -7,7 +7,7 @@ import {
   CCol,
   CForm,
   CFormCheck,
-  CFormControl,
+  CFormInput,
   CFormLabel,
   CFormSelect,
   CInputGroup,
@@ -32,10 +32,10 @@ const Layout = () => {
             <Example href="forms/layout#form-grid">
               <CRow>
                 <CCol xs>
-                  <CFormControl placeholder="First name" aria-label="First name" />
+                  <CFormInput placeholder="First name" aria-label="First name" />
                 </CCol>
                 <CCol xs>
-                  <CFormControl placeholder="Last name" aria-label="Last name" />
+                  <CFormInput placeholder="Last name" aria-label="Last name" />
                 </CCol>
               </CRow>
             </Example>
@@ -55,10 +55,10 @@ const Layout = () => {
             <Example href="forms/layout#gutters">
               <CRow className="g-3">
                 <CCol xs>
-                  <CFormControl placeholder="First name" aria-label="First name" />
+                  <CFormInput placeholder="First name" aria-label="First name" />
                 </CCol>
                 <CCol xs>
-                  <CFormControl placeholder="Last name" aria-label="Last name" />
+                  <CFormInput placeholder="Last name" aria-label="Last name" />
                 </CCol>
               </CRow>
             </Example>
@@ -67,41 +67,41 @@ const Layout = () => {
             </p>
             <Example href="forms/layout#gutters">
               <CForm className="row g-3">
-                <CCol md="6">
+                <CCol md={6}>
                   <CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
-                  <CFormControl type="email" id="inputEmail4" />
+                  <CFormInput type="email" id="inputEmail4" />
                 </CCol>
-                <CCol md="6">
+                <CCol md={6}>
                   <CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
-                  <CFormControl type="password" id="inputPassword4" />
+                  <CFormInput type="password" id="inputPassword4" />
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CFormLabel htmlFor="inputAddress">Address</CFormLabel>
-                  <CFormControl id="inputAddress" placeholder="1234 Main St" />
+                  <CFormInput id="inputAddress" placeholder="1234 Main St" />
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CFormLabel htmlFor="inputAddress2">Address 2</CFormLabel>
-                  <CFormControl id="inputAddress2" placeholder="Apartment, studio, or floor" />
+                  <CFormInput id="inputAddress2" placeholder="Apartment, studio, or floor" />
                 </CCol>
-                <CCol md="6">
+                <CCol md={6}>
                   <CFormLabel htmlFor="inputCity">City</CFormLabel>
-                  <CFormControl id="inputCity" />
+                  <CFormInput id="inputCity" />
                 </CCol>
-                <CCol md="4">
+                <CCol md={4}>
                   <CFormLabel htmlFor="inputState">State</CFormLabel>
                   <CFormSelect id="inputState">
                     <option>Choose...</option>
                     <option>...</option>
                   </CFormSelect>
                 </CCol>
-                <CCol md="2">
+                <CCol md={2}>
                   <CFormLabel htmlFor="inputZip">Zip</CFormLabel>
-                  <CFormControl id="inputZip" />
+                  <CFormInput id="inputZip" />
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CButton type="submit">Sign in</CButton>
                 </CCol>
               </CForm>
@@ -133,21 +133,21 @@ const Layout = () => {
                   <CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
                     Email
                   </CFormLabel>
-                  <CCol sm="10">
-                    <CFormControl type="email" id="inputEmail3" />
+                  <CCol sm={10}>
+                    <CFormInput type="email" id="inputEmail3" />
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
                   <CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
                     Password
                   </CFormLabel>
-                  <CCol sm="10">
-                    <CFormControl type="password" id="inputPassword3" />
+                  <CCol sm={10}>
+                    <CFormInput type="password" id="inputPassword3" />
                   </CCol>
                 </CRow>
                 <fieldset className="row mb-3">
                   <legend className="col-form-label col-sm-2 pt-0">Radios</legend>
-                  <CCol sm="10">
+                  <CCol sm={10}>
                     <CFormCheck
                       type="radio"
                       name="gridRadios"
@@ -203,8 +203,8 @@ const Layout = () => {
                 >
                   Email
                 </CFormLabel>
-                <CCol sm="10">
-                  <CFormControl
+                <CCol sm={10}>
+                  <CFormInput
                     type="email"
                     className="form-control form-control-sm"
                     id="colFormLabelSm"
@@ -216,8 +216,8 @@ const Layout = () => {
                 <CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
                   Email
                 </CFormLabel>
-                <CCol sm="10">
-                  <CFormControl type="email" id="colFormLabel" placeholder="col-form-label" />
+                <CCol sm={10}>
+                  <CFormInput type="email" id="colFormLabel" placeholder="col-form-label" />
                 </CCol>
               </CRow>
               <CRow>
@@ -227,8 +227,8 @@ const Layout = () => {
                 >
                   Email
                 </CFormLabel>
-                <CCol sm="10">
-                  <CFormControl
+                <CCol sm={10}>
+                  <CFormInput
                     type="email"
                     className="form-control form-control-lg"
                     id="colFormLabelLg"
@@ -256,14 +256,14 @@ const Layout = () => {
             </p>
             <Example href="forms/layout#column-sizing">
               <CRow className="g-3">
-                <CCol sm="7">
-                  <CFormControl placeholder="City" aria-label="City" />
+                <CCol sm={7}>
+                  <CFormInput placeholder="City" aria-label="City" />
                 </CCol>
                 <CCol sm>
-                  <CFormControl placeholder="State" aria-label="State" />
+                  <CFormInput placeholder="State" aria-label="State" />
                 </CCol>
                 <CCol sm>
-                  <CFormControl placeholder="Zip" aria-label="Zip" />
+                  <CFormInput placeholder="Zip" aria-label="Zip" />
                 </CCol>
               </CRow>
             </Example>
@@ -288,7 +288,7 @@ const Layout = () => {
                   <CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
                     Name
                   </CFormLabel>
-                  <CFormControl id="autoSizingInput" placeholder="Jane Doe" />
+                  <CFormInput id="autoSizingInput" placeholder="Jane Doe" />
                 </CCol>
                 <CCol xs="auto">
                   <CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
@@ -296,7 +296,7 @@ const Layout = () => {
                   </CFormLabel>
                   <CInputGroup>
                     <CInputGroupText>@</CInputGroupText>
-                    <CFormControl id="autoSizingInputGroup" placeholder="Username" />
+                    <CFormInput id="autoSizingInputGroup" placeholder="Username" />
                   </CInputGroup>
                 </CCol>
                 <CCol xs="auto">
@@ -323,22 +323,22 @@ const Layout = () => {
             </p>
             <Example href="forms/layout#auto-sizing">
               <CForm className="row gx-3 gy-2 align-items-center">
-                <CCol sm="3">
+                <CCol sm={3}>
                   <CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
                     Name
                   </CFormLabel>
-                  <CFormControl id="specificSizeInputName" placeholder="Jane Doe" />
+                  <CFormInput id="specificSizeInputName" placeholder="Jane Doe" />
                 </CCol>
-                <CCol sm="3">
+                <CCol sm={3}>
                   <CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
                     Username
                   </CFormLabel>
                   <CInputGroup>
                     <CInputGroupText>@</CInputGroupText>
-                    <CFormControl id="specificSizeInputGroupUsername" placeholder="Username" />
+                    <CFormInput id="specificSizeInputGroupUsername" placeholder="Username" />
                   </CInputGroup>
                 </CCol>
-                <CCol sm="3">
+                <CCol sm={3}>
                   <CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
                     Preference
                   </CFormLabel>
@@ -376,16 +376,16 @@ const Layout = () => {
             </p>
             <Example href="forms/layout#inline-forms">
               <CForm className="row row-cols-lg-auto g-3 align-items-center">
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
                     Username
                   </CFormLabel>
                   <CInputGroup>
                     <CInputGroupText>@</CInputGroupText>
-                    <CFormControl id="inlineFormInputGroupUsername" placeholder="Username" />
+                    <CFormInput id="inlineFormInputGroupUsername" placeholder="Username" />
                   </CInputGroup>
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
                     Preference
                   </CFormLabel>
@@ -396,10 +396,10 @@ const Layout = () => {
                     <option value="3">Three</option>
                   </CFormSelect>
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CButton type="submit">Submit</CButton>
                 </CCol>
               </CForm>
diff --git a/src/views/components/forms/range/Range.js b/src/views/components/forms/range/Range.js
index d07dd8f..163525c 100644
--- a/src/views/components/forms/range/Range.js
+++ b/src/views/components/forms/range/Range.js
@@ -16,7 +16,7 @@ const Range = () => {
           <CCardBody>
             <p className="text-medium-emphasis small">
               Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
-              <code>&lt;CFormControl&gt;</code>.
+              <code>&lt;CFormRange&gt;</code>.
             </p>
             <Example href="forms/range">
               <CFormLabel htmlFor="customRange1">Example range</CFormLabel>
diff --git a/src/views/components/forms/validation/Validation.js b/src/views/components/forms/validation/Validation.js
index 001b4a2..28538d8 100644
--- a/src/views/components/forms/validation/Validation.js
+++ b/src/views/components/forms/validation/Validation.js
@@ -7,10 +7,11 @@ import {
   CCol,
   CForm,
   CFormCheck,
-  CFormControl,
+  CFormInput,
   CFormFeedback,
   CFormLabel,
   CFormSelect,
+  CFormTextarea,
   CInputGroup,
   CInputGroupText,
   CRow,
@@ -34,21 +35,21 @@ const CustomStyles = () => {
       validated={validated}
       onSubmit={handleSubmit}
     >
-      <CCol md="4">
+      <CCol md={4}>
         <CFormLabel htmlFor="validationCustom01">Email</CFormLabel>
-        <CFormControl type="text" id="validationCustom01" defaultValue="Mark" required />
+        <CFormInput type="text" id="validationCustom01" defaultValue="Mark" required />
         <CFormFeedback valid>Looks good!</CFormFeedback>
       </CCol>
-      <CCol md="4">
+      <CCol md={4}>
         <CFormLabel htmlFor="validationCustom02">Email</CFormLabel>
-        <CFormControl type="text" id="validationCustom02" defaultValue="Otto" required />
+        <CFormInput type="text" id="validationCustom02" defaultValue="Otto" required />
         <CFormFeedback valid>Looks good!</CFormFeedback>
       </CCol>
-      <CCol md="4">
+      <CCol md={4}>
         <CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
         <CInputGroup className="has-validation">
           <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-          <CFormControl
+          <CFormInput
             type="text"
             id="validationCustomUsername"
             defaultValue=""
@@ -58,12 +59,12 @@ const CustomStyles = () => {
           <CFormFeedback invalid>Please choose a username.</CFormFeedback>
         </CInputGroup>
       </CCol>
-      <CCol md="6">
+      <CCol md={6}>
         <CFormLabel htmlFor="validationCustom03">City</CFormLabel>
-        <CFormControl type="text" id="validationCustom03" required />
+        <CFormInput type="text" id="validationCustom03" required />
         <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
       </CCol>
-      <CCol md="3">
+      <CCol md={3}>
         <CFormLabel htmlFor="validationCustom04">City</CFormLabel>
         <CFormSelect id="validationCustom04">
           <option disabled>Choose...</option>
@@ -71,12 +72,12 @@ const CustomStyles = () => {
         </CFormSelect>
         <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
       </CCol>
-      <CCol md="3">
+      <CCol md={3}>
         <CFormLabel htmlFor="validationCustom05">City</CFormLabel>
-        <CFormControl type="text" id="validationCustom05" required />
+        <CFormInput type="text" id="validationCustom05" required />
         <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
       </CCol>
-      <CCol xs="12">
+      <CCol xs={12}>
         <CFormCheck
           type="checkbox"
           id="invalidCheck"
@@ -85,7 +86,7 @@ const CustomStyles = () => {
         />
         <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
       </CCol>
-      <CCol xs="12">
+      <CCol xs={12}>
         <CButton color="primary" type="submit">
           Submit form
         </CButton>
@@ -106,21 +107,21 @@ const BrowserDefaults = () => {
   }
   return (
     <CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}>
-      <CCol md="4">
+      <CCol md={4}>
         <CFormLabel htmlFor="validationDefault01">Email</CFormLabel>
-        <CFormControl type="text" id="validationDefault01" defaultValue="Mark" required />
+        <CFormInput type="text" id="validationDefault01" defaultValue="Mark" required />
         <CFormFeedback valid>Looks good!</CFormFeedback>
       </CCol>
-      <CCol md="4">
+      <CCol md={4}>
         <CFormLabel htmlFor="validationDefault02">Email</CFormLabel>
-        <CFormControl type="text" id="validationDefault02" defaultValue="Otto" required />
+        <CFormInput type="text" id="validationDefault02" defaultValue="Otto" required />
         <CFormFeedback valid>Looks good!</CFormFeedback>
       </CCol>
-      <CCol md="4">
+      <CCol md={4}>
         <CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
         <CInputGroup className="has-validation">
           <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
-          <CFormControl
+          <CFormInput
             type="text"
             id="validationDefaultUsername"
             defaultValue=""
@@ -130,12 +131,12 @@ const BrowserDefaults = () => {
           <CFormFeedback invalid>Please choose a username.</CFormFeedback>
         </CInputGroup>
       </CCol>
-      <CCol md="6">
+      <CCol md={6}>
         <CFormLabel htmlFor="validationDefault03">City</CFormLabel>
-        <CFormControl type="text" id="validationDefault03" required />
+        <CFormInput type="text" id="validationDefault03" required />
         <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
       </CCol>
-      <CCol md="3">
+      <CCol md={3}>
         <CFormLabel htmlFor="validationDefault04">City</CFormLabel>
         <CFormSelect id="validationDefault04">
           <option disabled>Choose...</option>
@@ -143,12 +144,12 @@ const BrowserDefaults = () => {
         </CFormSelect>
         <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
       </CCol>
-      <CCol md="3">
+      <CCol md={3}>
         <CFormLabel htmlFor="validationDefault05">City</CFormLabel>
-        <CFormControl type="text" id="validationDefault05" required />
+        <CFormInput type="text" id="validationDefault05" required />
         <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
       </CCol>
-      <CCol xs="12">
+      <CCol xs={12}>
         <CFormCheck
           type="checkbox"
           id="invalidCheck"
@@ -157,7 +158,7 @@ const BrowserDefaults = () => {
         />
         <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
       </CCol>
-      <CCol xs="12">
+      <CCol xs={12}>
         <CButton color="primary" type="submit">
           Submit form
         </CButton>
@@ -183,25 +184,25 @@ const Tooltips = () => {
       validated={validated}
       onSubmit={handleSubmit}
     >
-      <CCol md="4" className="position-relative">
+      <CCol md={4} className="position-relative">
         <CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
-        <CFormControl type="text" id="validationTooltip01" defaultValue="Mark" required />
+        <CFormInput type="text" id="validationTooltip01" defaultValue="Mark" required />
         <CFormFeedback tooltip valid>
           Looks good!
         </CFormFeedback>
       </CCol>
-      <CCol md="4" className="position-relative">
+      <CCol md={4} className="position-relative">
         <CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
-        <CFormControl type="text" id="validationTooltip02" defaultValue="Otto" required />
+        <CFormInput type="text" id="validationTooltip02" defaultValue="Otto" required />
         <CFormFeedback tooltip valid>
           Looks good!
         </CFormFeedback>
       </CCol>
-      <CCol md="4" className="position-relative">
+      <CCol md={4} className="position-relative">
         <CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
         <CInputGroup className="has-validation">
           <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-          <CFormControl
+          <CFormInput
             type="text"
             id="validationTooltipUsername"
             defaultValue=""
@@ -213,14 +214,14 @@ const Tooltips = () => {
           </CFormFeedback>
         </CInputGroup>
       </CCol>
-      <CCol md="6" className="position-relative">
+      <CCol md={6} className="position-relative">
         <CFormLabel htmlFor="validationTooltip03">City</CFormLabel>
-        <CFormControl type="text" id="validationTooltip03" required />
+        <CFormInput type="text" id="validationTooltip03" required />
         <CFormFeedback tooltip invalid>
           Please provide a valid city.
         </CFormFeedback>
       </CCol>
-      <CCol md="3" className="position-relative">
+      <CCol md={3} className="position-relative">
         <CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
         <CFormSelect id="validationTooltip04" required>
           <option disabled defaultValue="">
@@ -232,14 +233,14 @@ const Tooltips = () => {
           Please provide a valid city.
         </CFormFeedback>
       </CCol>
-      <CCol md="3" className="position-relative">
+      <CCol md={3} className="position-relative">
         <CFormLabel htmlFor="validationTooltip05">City</CFormLabel>
-        <CFormControl type="text" id="validationTooltip05" required />
+        <CFormInput type="text" id="validationTooltip05" required />
         <CFormFeedback tooltip invalid>
           Please provide a valid zip.
         </CFormFeedback>
       </CCol>
-      <CCol xs="12" className="position-relative">
+      <CCol xs={12} className="position-relative">
         <CButton color="primary" type="submit">
           Submit form
         </CButton>
@@ -316,9 +317,9 @@ const Validation = () => {
             </p>
             <Example href="forms/validation#server-side">
               <CForm className="row g-3 needs-validation">
-                <CCol md="4">
+                <CCol md={4}>
                   <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
-                  <CFormControl
+                  <CFormInput
                     type="text"
                     id="validationServer01"
                     defaultValue="Mark"
@@ -327,9 +328,9 @@ const Validation = () => {
                   />
                   <CFormFeedback valid>Looks good!</CFormFeedback>
                 </CCol>
-                <CCol md="4">
+                <CCol md={4}>
                   <CFormLabel htmlFor="validationServer02">Email</CFormLabel>
-                  <CFormControl
+                  <CFormInput
                     type="text"
                     id="validationServer02"
                     defaultValue="Otto"
@@ -338,11 +339,11 @@ const Validation = () => {
                   />
                   <CFormFeedback valid>Looks good!</CFormFeedback>
                 </CCol>
-                <CCol md="4">
+                <CCol md={4}>
                   <CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
                   <CInputGroup className="has-validation">
                     <CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
-                    <CFormControl
+                    <CFormInput
                       type="text"
                       id="validationServerUsername"
                       defaultValue=""
@@ -353,12 +354,12 @@ const Validation = () => {
                     <CFormFeedback invalid>Please choose a username.</CFormFeedback>
                   </CInputGroup>
                 </CCol>
-                <CCol md="6">
+                <CCol md={6}>
                   <CFormLabel htmlFor="validationServer03">City</CFormLabel>
-                  <CFormControl type="text" id="validationServer03" invalid required />
+                  <CFormInput type="text" id="validationServer03" invalid required />
                   <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
                 </CCol>
-                <CCol md="3">
+                <CCol md={3}>
                   <CFormLabel htmlFor="validationServer04">City</CFormLabel>
                   <CFormSelect id="validationServer04" invalid>
                     <option disabled>Choose...</option>
@@ -366,12 +367,12 @@ const Validation = () => {
                   </CFormSelect>
                   <CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
                 </CCol>
-                <CCol md="3">
+                <CCol md={3}>
                   <CFormLabel htmlFor="validationServer05">City</CFormLabel>
-                  <CFormControl type="text" id="validationServer05" invalid required />
+                  <CFormInput type="text" id="validationServer05" invalid required />
                   <CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CFormCheck
                     type="checkbox"
                     id="invalidCheck"
@@ -381,7 +382,7 @@ const Validation = () => {
                   />
                   <CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
                 </CCol>
-                <CCol xs="12">
+                <CCol xs={12}>
                   <CButton color="primary" type="submit">
                     Submit form
                   </CButton>
@@ -402,7 +403,7 @@ const Validation = () => {
             </p>
             <ul>
               <li>
-                <code>&lt;CFormControl&gt;</code>s
+                <code>&lt;CFormInput&gt;</code>s
               </li>
               <li>
                 <code>&lt;CFormSelect&gt;</code>s
@@ -417,13 +418,12 @@ const Validation = () => {
                   <CFormLabel htmlFor="validationTextarea" className="form-label">
                     Textarea
                   </CFormLabel>
-                  <CFormControl
-                    component="textarea"
+                  <CFormTextarea
                     id="validationTextarea"
                     placeholder="Required example textarea"
                     invalid
                     required
-                  ></CFormControl>
+                  ></CFormTextarea>
                   <CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
                 </div>
                 <CFormCheck
@@ -463,7 +463,7 @@ const Validation = () => {
                 </div>
 
                 <div className="mb-3">
-                  <CFormControl
+                  <CFormInput
                     type="file"
                     id="validationTextarea"
                     aria-label="file example"
diff --git a/src/views/components/icons/brands/Brands.js b/src/views/components/icons/brands/Brands.js
index 9532c8f..d9b308f 100644
--- a/src/views/components/icons/brands/Brands.js
+++ b/src/views/components/icons/brands/Brands.js
@@ -10,7 +10,7 @@ const toKebabCase = (str) => {
 
 export const getIconsView = (iconset) => {
   return Object.entries(iconset).map(([name, value]) => (
-    <CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
+    <CCol className="mb-5" xs={6} sm={4} md={3} xl={2} key={name}>
       <CIcon content={value} size="2xl" />
       <div>{toKebabCase(name)}</div>
     </CCol>
diff --git a/src/views/components/widgets/Widgets.js b/src/views/components/widgets/Widgets.js
index 71f677c..355fe94 100644
--- a/src/views/components/widgets/Widgets.js
+++ b/src/views/components/widgets/Widgets.js
@@ -23,7 +23,7 @@ const Widgets = () => {
     <>
       <WidgetsDropdown />
       <CRow>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetProgress
             className="mb-4"
             value="89.9%"
@@ -33,7 +33,7 @@ const Widgets = () => {
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetProgress
             className="mb-4"
             value="12.124"
@@ -43,7 +43,7 @@ const Widgets = () => {
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetProgress
             className="mb-4"
             value="$98.111,00"
@@ -53,7 +53,7 @@ const Widgets = () => {
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetProgress
             className="mb-4"
             value="2 TB"
@@ -63,7 +63,7 @@ const Widgets = () => {
           />
         </CCol>
 
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetProgress
             className="mb-4"
             color="success"
@@ -75,7 +75,7 @@ const Widgets = () => {
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetProgress
             className="mb-4"
             color="info"
@@ -87,7 +87,7 @@ const Widgets = () => {
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetProgress
             className="mb-4"
             color="warning"
@@ -99,7 +99,7 @@ const Widgets = () => {
             text="Lorem ipsum dolor sit amet enim."
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetProgress
             className="mb-4"
             color="primary"
@@ -114,7 +114,7 @@ const Widgets = () => {
       </CRow>
 
       <CRow>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             icon={<CIcon width={24} name="cil-settings" size="xl" />}
@@ -124,7 +124,7 @@ const Widgets = () => {
             color="primary"
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             icon={<CIcon width={24} name="cil-user" size="xl" />}
@@ -134,7 +134,7 @@ const Widgets = () => {
             color="info"
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             icon={<CIcon width={24} name="cil-moon" size="xl" />}
@@ -144,7 +144,7 @@ const Widgets = () => {
             color="warning"
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             icon={<CIcon width={24} name="cil-bell" size="xl" />}
@@ -154,7 +154,7 @@ const Widgets = () => {
             color="danger"
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             icon={<CIcon width={24} name="cil-settings" size="xl" />}
@@ -175,7 +175,7 @@ const Widgets = () => {
             }
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             icon={<CIcon width={24} name="cil-laptop" size="xl" />}
@@ -196,7 +196,7 @@ const Widgets = () => {
             }
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             icon={<CIcon width={24} name="cil-moon" size="xl" />}
@@ -217,7 +217,7 @@ const Widgets = () => {
             }
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             icon={<CIcon width={24} name="cil-bell" size="xl" />}
@@ -238,7 +238,7 @@ const Widgets = () => {
             }
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             padding={0}
@@ -249,7 +249,7 @@ const Widgets = () => {
             color="primary"
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             padding={0}
@@ -260,7 +260,7 @@ const Widgets = () => {
             color="info"
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             padding={0}
@@ -271,7 +271,7 @@ const Widgets = () => {
             color="warning"
           />
         </CCol>
-        <CCol xs="12" sm="6" lg="3">
+        <CCol xs={12} sm={6} lg={3}>
           <CWidgetIcon
             className="mb-3"
             padding={0}
@@ -322,7 +322,7 @@ const Widgets = () => {
         />
       </CCardGroup>
       <CRow>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             icon={<CIcon name="cil-people" height="36" />}
             value="87.500"
@@ -332,7 +332,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             icon={<CIcon name="cil-userFollow" height="36" />}
             value="385"
@@ -342,7 +342,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             icon={<CIcon name="cil-basket" height="36" />}
             value="1238"
@@ -352,7 +352,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             icon={<CIcon name="cil-chartPie" height="36" />}
             value="28%"
@@ -362,7 +362,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             icon={<CIcon name="cil-speedometer" height="36" />}
             value="5:34:11"
@@ -372,7 +372,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             icon={<CIcon name="cil-speech" height="36" />}
             value="972"
@@ -384,7 +384,7 @@ const Widgets = () => {
         </CCol>
       </CRow>
       <CRow>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="info"
             icon={<CIcon name="cil-people" height="36" />}
@@ -395,7 +395,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="success"
             icon={<CIcon name="cil-userFollow" height="36" />}
@@ -406,7 +406,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="warning"
             icon={<CIcon name="cil-basket" height="36" />}
@@ -417,7 +417,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="primary"
             icon={<CIcon name="cil-chartPie" height="36" />}
@@ -428,7 +428,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="danger"
             icon={<CIcon name="cil-speedometer" height="36" />}
@@ -439,7 +439,7 @@ const Widgets = () => {
             className="mb-4"
           />
         </CCol>
-        <CCol sm="6" md="2">
+        <CCol sm={6} md={2}>
           <CWidgetProgressIcon
             color="info"
             icon={<CIcon name="cil-speech" height="36" />}
@@ -452,7 +452,7 @@ const Widgets = () => {
         </CCol>
       </CRow>
       <CRow>
-        <CCol sm="4" lg="2">
+        <CCol sm={4} lg={2}>
           <CWidgetSimple title="title" value="1,123" className="mb-4">
             <CChartBar
               style={{ height: '40px' }}
@@ -502,7 +502,7 @@ const Widgets = () => {
             />
           </CWidgetSimple>
         </CCol>
-        <CCol sm="4" lg="2">
+        <CCol sm={4} lg={2}>
           <CWidgetSimple title="title" value="1,123" className="mb-4">
             <CChartBar
               style={{ height: '40px' }}
@@ -552,7 +552,7 @@ const Widgets = () => {
             />
           </CWidgetSimple>
         </CCol>
-        <CCol sm="4" lg="2">
+        <CCol sm={4} lg={2}>
           <CWidgetSimple title="title" value="1,123" className="mb-4">
             <CChartBar
               style={{ height: '40px' }}
@@ -602,7 +602,7 @@ const Widgets = () => {
             />
           </CWidgetSimple>
         </CCol>
-        <CCol sm="4" lg="2">
+        <CCol sm={4} lg={2}>
           <CWidgetSimple title="title" value="1,123" className="mb-4">
             <CChartLine
               style={{ height: '40px' }}
@@ -660,7 +660,7 @@ const Widgets = () => {
             />
           </CWidgetSimple>
         </CCol>
-        <CCol sm="4" lg="2">
+        <CCol sm={4} lg={2}>
           <CWidgetSimple title="title" value="1,123" className="mb-4">
             <CChartLine
               style={{ height: '40px' }}
@@ -718,7 +718,7 @@ const Widgets = () => {
             />
           </CWidgetSimple>
         </CCol>
-        <CCol sm="4" lg="2">
+        <CCol sm={4} lg={2}>
           <CWidgetSimple title="title" value="1,123" className="mb-4">
             <CChartLine
               style={{ height: '40px' }}
diff --git a/src/views/components/widgets/WidgetsBrand.js b/src/views/components/widgets/WidgetsBrand.js
index 82e42c0..a84f263 100644
--- a/src/views/components/widgets/WidgetsBrand.js
+++ b/src/views/components/widgets/WidgetsBrand.js
@@ -35,7 +35,7 @@ const WidgetsBrand = ({ withCharts }) => {
 
   return (
     <CRow>
-      <CCol sm="6" lg="3">
+      <CCol sm={6} lg={3}>
         <CWidgetBrand
           className="mb-4"
           headerChildren={
@@ -73,7 +73,7 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm="6" lg="3">
+      <CCol sm={6} lg={3}>
         <CWidgetBrand
           className="mb-4"
           headerChildren={
@@ -111,7 +111,7 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm="6" lg="3">
+      <CCol sm={6} lg={3}>
         <CWidgetBrand
           className="mb-4"
           headerChildren={
@@ -149,7 +149,7 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm="6" lg="3">
+      <CCol sm={6} lg={3}>
         <CWidgetBrand
           className="mb-4"
           color="warning"
diff --git a/src/views/components/widgets/WidgetsDropdown.js b/src/views/components/widgets/WidgetsDropdown.js
index c95a827..ad7b8af 100644
--- a/src/views/components/widgets/WidgetsDropdown.js
+++ b/src/views/components/widgets/WidgetsDropdown.js
@@ -15,7 +15,7 @@ import CIcon from '@coreui/icons-react'
 const WidgetsDropdown = () => {
   return (
     <CRow>
-      <CCol sm="6" lg="3">
+      <CCol sm={6} lg={3}>
         <CWidgetDropdown
           className="mb-4"
           color="primary"
@@ -100,7 +100,7 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm="6" lg="3">
+      <CCol sm={6} lg={3}>
         <CWidgetDropdown
           className="mb-4"
           color="info"
@@ -199,7 +199,7 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm="6" lg="3">
+      <CCol sm={6} lg={3}>
         <CWidgetDropdown
           className="mb-4"
           color="warning"
@@ -270,7 +270,7 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm="6" lg="3">
+      <CCol sm={6} lg={3}>
         <CWidgetDropdown
           className="mb-4"
           color="danger"
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index 431ed52..aec04fd 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -36,13 +36,13 @@ const Dashboard = () => {
       <CCard className="mb-4">
         <CCardBody>
           <CRow>
-            <CCol sm="5">
+            <CCol sm={5}>
               <h4 id="traffic" className="card-title mb-0">
                 Traffic
               </h4>
               <div className="small text-medium-emphasis">January - July 2021</div>
             </CCol>
-            <CCol sm="7" className="d-none d-md-block">
+            <CCol sm={7} className="d-none d-md-block">
               <CButton color="primary" className="float-end">
                 <CIcon name="cil-cloud-download" />
               </CButton>
@@ -184,15 +184,15 @@ const Dashboard = () => {
             <CCardHeader>Traffic {' & '} Sales</CCardHeader>
             <CCardBody>
               <CRow>
-                <CCol xs="12" md="6" xl="6">
+                <CCol xs={12} md={6} xl={6}>
                   <CRow>
-                    <CCol sm="6">
+                    <CCol sm={6}>
                       <div className="border-start border-start-4 border-start-info py-1 px-3">
                         <div className="text-medium-emphasis small">New Clients</div>
                         <div className="fs-5 fw-semibold">9,123</div>
                       </div>
                     </CCol>
-                    <CCol sm="6">
+                    <CCol sm={6}>
                       <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
                         <div className="text-medium-emphasis small">Recurring Clients</div>
                         <div className="fs-5 fw-semibold">22,643</div>
@@ -267,15 +267,15 @@ const Dashboard = () => {
                   </div>
                 </CCol>
 
-                <CCol xs="12" md="6" xl="6">
+                <CCol xs={12} md={6} xl={6}>
                   <CRow>
-                    <CCol sm="6">
+                    <CCol sm={6}>
                       <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
                         <div className="text-medium-emphasis small">Pageviews</div>
                         <div className="fs-5 fw-semibold">78,623</div>
                       </div>
                     </CCol>
-                    <CCol sm="6">
+                    <CCol sm={6}>
                       <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
                         <div className="text-medium-emphasis small">Organic</div>
                         <div className="fs-5 fw-semibold">49,123</div>
diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js
index 769ee5e..ab0afb5 100644
--- a/src/views/pages/login/Login.js
+++ b/src/views/pages/login/Login.js
@@ -8,7 +8,7 @@ import {
   CCol,
   CContainer,
   CForm,
-  CFormControl,
+  CFormInput,
   CInputGroup,
   CInputGroupText,
   CRow,
@@ -20,7 +20,7 @@ const Login = () => {
     <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
-          <CCol md="8">
+          <CCol md={8}>
             <CCardGroup>
               <CCard className="p-4">
                 <CCardBody>
@@ -31,25 +31,25 @@ const Login = () => {
                       <CInputGroupText>
                         <CIcon name="cil-user" />
                       </CInputGroupText>
-                      <CFormControl placeholder="Username" autoComplete="username" />
+                      <CFormInput placeholder="Username" autoComplete="username" />
                     </CInputGroup>
                     <CInputGroup className="mb-4">
                       <CInputGroupText>
                         <CIcon name="cil-lock-locked" />
                       </CInputGroupText>
-                      <CFormControl
+                      <CFormInput
                         type="password"
                         placeholder="Password"
                         autoComplete="current-password"
                       />
                     </CInputGroup>
                     <CRow>
-                      <CCol xs="6">
+                      <CCol xs={6}>
                         <CButton color="primary" className="px-4">
                           Login
                         </CButton>
                       </CCol>
-                      <CCol xs="6" className="text-right">
+                      <CCol xs={6} className="text-right">
                         <CButton color="link" className="px-0">
                           Forgot password?
                         </CButton>
diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js
index 9d74359..87345ec 100644
--- a/src/views/pages/page404/Page404.js
+++ b/src/views/pages/page404/Page404.js
@@ -3,7 +3,7 @@ import {
   CButton,
   CCol,
   CContainer,
-  CFormControl,
+  CFormInput,
   CInputGroup,
   CInputGroupText,
   CRow,
@@ -15,7 +15,7 @@ const Page404 = () => {
     <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
-          <CCol md="6">
+          <CCol md={6}>
             <div className="clearfix">
               <h1 className="float-start display-3 me-4">404</h1>
               <h4 className="pt-3">Oops! You{"'"}re lost.</h4>
@@ -27,7 +27,7 @@ const Page404 = () => {
               <CInputGroupText>
                 <CIcon name="cil-magnifying-glass" />
               </CInputGroupText>
-              <CFormControl size="16" type="text" placeholder="What are you looking for?" />
+              <CFormInput size="16" type="text" placeholder="What are you looking for?" />
               <CButton color="info">Search</CButton>
             </CInputGroup>
           </CCol>
diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js
index c7925b6..e9c52b6 100644
--- a/src/views/pages/page500/Page500.js
+++ b/src/views/pages/page500/Page500.js
@@ -3,7 +3,7 @@ import {
   CButton,
   CCol,
   CContainer,
-  CFormControl,
+  CFormInput,
   CInputGroup,
   CInputGroupText,
   CRow,
@@ -15,7 +15,7 @@ const Page500 = () => {
     <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
-          <CCol md="6">
+          <CCol md={6}>
             <span className="clearfix">
               <h1 className="float-start display-3 me-4">500</h1>
               <h4 className="pt-3">Houston, we have a problem!</h4>
@@ -27,7 +27,7 @@ const Page500 = () => {
               <CInputGroupText>
                 <CIcon name="cil-magnifying-glass" />
               </CInputGroupText>
-              <CFormControl size="16" type="text" placeholder="What are you looking for?" />
+              <CFormInput size="16" type="text" placeholder="What are you looking for?" />
               <CButton color="info">Search</CButton>
             </CInputGroup>
           </CCol>
diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js
index cc9fc63..4882b34 100644
--- a/src/views/pages/register/Register.js
+++ b/src/views/pages/register/Register.js
@@ -6,7 +6,7 @@ import {
   CCol,
   CContainer,
   CForm,
-  CFormControl,
+  CFormInput,
   CInputGroup,
   CInputGroupText,
   CRow,
@@ -18,7 +18,7 @@ const Register = () => {
     <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
-          <CCol md="9" lg="7" xl="6">
+          <CCol md={9} lg={7} xl={6}>
             <CCard className="mx-4">
               <CCardBody className="p-4">
                 <CForm>
@@ -28,17 +28,17 @@ const Register = () => {
                     <CInputGroupText>
                       <CIcon name="cil-user" />
                     </CInputGroupText>
-                    <CFormControl placeholder="Username" autoComplete="username" />
+                    <CFormInput placeholder="Username" autoComplete="username" />
                   </CInputGroup>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>@</CInputGroupText>
-                    <CFormControl placeholder="Email" autoComplete="email" />
+                    <CFormInput placeholder="Email" autoComplete="email" />
                   </CInputGroup>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>
                       <CIcon name="cil-lock-locked" />
                     </CInputGroupText>
-                    <CFormControl
+                    <CFormInput
                       type="password"
                       placeholder="Password"
                       autoComplete="new-password"
@@ -48,7 +48,7 @@ const Register = () => {
                     <CInputGroupText>
                       <CIcon name="cil-lock-locked" />
                     </CInputGroupText>
-                    <CFormControl
+                    <CFormInput
                       type="password"
                       placeholder="Repeat password"
                       autoComplete="new-password"
diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js
index b29d8a3..a6fef82 100644
--- a/src/views/theme/colors/Colors.js
+++ b/src/views/theme/colors/Colors.js
@@ -34,7 +34,7 @@ const ThemeView = () => {
 const ThemeColor = ({ className, children }) => {
   const classes = classNames(className, 'theme-color w-75 rounded mb-3')
   return (
-    <CCol xl="2" md="4" sm="6" xs="12" className="mb-4">
+    <CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
       <div className={classes} style={{ paddingTop: '75%' }}></div>
       {children}
       <ThemeView />