diff --git a/package-lock.json b/package-lock.json
index 493fb58cf..9fa9695bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,6 @@
         "passport-activedirectory": "^1.4.0",
         "passport-local": "^1.0.0",
         "perfect-scrollbar": "^1.5.6",
-        "prop-types": "15.8.1",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-html-parser": "^2.0.2",
diff --git a/package.json b/package.json
index 6c0e652a5..7c7a282fa 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,6 @@
     "passport-activedirectory": "^1.4.0",
     "passport-local": "^1.0.0",
     "perfect-scrollbar": "^1.5.6",
-    "prop-types": "15.8.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-html-parser": "^2.0.2",
diff --git a/src/ui/components/CustomInput/CustomInput.jsx b/src/ui/components/CustomInput/CustomInput.jsx
deleted file mode 100644
index 831f8c804..000000000
--- a/src/ui/components/CustomInput/CustomInput.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
-import Clear from '@material-ui/icons/Clear';
-import Check from '@material-ui/icons/Check';
-import styles from '../../assets/jss/material-dashboard-react/components/customInputStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function CustomInput(props) {
-  const classes = useStyles();
-  const { formControlProps, labelText, id, labelProps, inputProps, error, success } = props;
-
-  const labelClasses = clsx({
-    [classes.labelRootError]: error,
-    [classes.labelRootSuccess]: success && !error,
-  });
-  const underlineClasses = clsx({
-    [classes.underlineError]: error,
-    [classes.underlineSuccess]: success && !error,
-    [classes.underline]: true,
-  });
-  const marginTop = clsx({
-    [classes.marginTop]: labelText === undefined,
-  });
-
-  const generateIcon = () => {
-    if (error) {
-      return <Clear className={clsx(classes.feedback, classes.labelRootError)} />;
-    }
-    if (success) {
-      return <Check className={clsx(classes.feedback, classes.labelRootSuccess)} />;
-    }
-    return null;
-  };
-
-  return (
-    <FormControl
-      {...formControlProps}
-      className={clsx(formControlProps.className, classes.formControl)}
-    >
-      {labelText !== undefined ? (
-        <InputLabel className={classes.labelRoot + labelClasses} htmlFor={id} {...labelProps}>
-          {labelText}
-        </InputLabel>
-      ) : null}
-      <Input
-        classes={{
-          root: marginTop,
-          disabled: classes.disabled,
-          underline: underlineClasses,
-        }}
-        id={id}
-        {...inputProps}
-      />
-      {generateIcon()}
-    </FormControl>
-  );
-}
-
-CustomInput.propTypes = {
-  labelText: PropTypes.node,
-  labelProps: PropTypes.object,
-  id: PropTypes.string,
-  inputProps: PropTypes.object,
-  formControlProps: PropTypes.object,
-  error: PropTypes.bool,
-  success: PropTypes.bool,
-};
diff --git a/src/ui/components/Table/Table.jsx b/src/ui/components/Table/Table.jsx
deleted file mode 100644
index c2cebfecf..000000000
--- a/src/ui/components/Table/Table.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-
-import Table from '@material-ui/core/Table';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import styles from '../../assets/jss/material-dashboard-react/components/tableStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function CustomTable(props) {
-  const classes = useStyles();
-  const { tableHead, tableData, tableHeaderColor } = props;
-  return (
-    <div className={classes.tableResponsive}>
-      <Table className={classes.table}>
-        {tableHead !== undefined ? (
-          <TableHead className={clsx(classes[`${tableHeaderColor}TableHeader`])}>
-            <TableRow className={classes.tableHeadRow}>
-              {tableHead.map((prop, key) => {
-                return (
-                  <TableCell className={clsx(classes.tableCell, classes.tableHeadCell)} key={key}>
-                    {prop}
-                  </TableCell>
-                );
-              })}
-            </TableRow>
-          </TableHead>
-        ) : null}
-        <TableBody>
-          {tableData.map((prop, key) => {
-            return (
-              <TableRow key={key} className={clsx(classes.tableBodyRow)}>
-                {prop.map((p, k) => {
-                  return (
-                    <TableCell className={clsx(classes.tableCell)} key={k}>
-                      {p}
-                    </TableCell>
-                  );
-                })}
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}
-
-CustomTable.defaultProps = {
-  tableHeaderColor: 'gray',
-};
-
-CustomTable.propTypes = {
-  tableHeaderColor: PropTypes.oneOf([
-    'warning',
-    'primary',
-    'danger',
-    'success',
-    'info',
-    'rose',
-    'gray',
-  ]),
-  tableHead: PropTypes.arrayOf(PropTypes.string),
-  tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
-};
diff --git a/src/ui/components/Tasks/Tasks.jsx b/src/ui/components/Tasks/Tasks.jsx
deleted file mode 100644
index 44fe0c5c4..000000000
--- a/src/ui/components/Tasks/Tasks.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import Checkbox from '@material-ui/core/Checkbox';
-import Tooltip from '@material-ui/core/Tooltip';
-import IconButton from '@material-ui/core/IconButton';
-import Table from '@material-ui/core/Table';
-import TableRow from '@material-ui/core/TableRow';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import Edit from '@material-ui/icons/Edit';
-import Close from '@material-ui/icons/Close';
-import Check from '@material-ui/icons/Check';
-import styles from '../../assets/jss/material-dashboard-react/components/tasksStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function Tasks(props) {
-  const classes = useStyles();
-  const [checked, setChecked] = React.useState([...props.checkedIndexes]);
-  const handleToggle = (value) => {
-    const currentIndex = checked.indexOf(value);
-    const newChecked = [...checked];
-    if (currentIndex === -1) {
-      newChecked.push(value);
-    } else {
-      newChecked.splice(currentIndex, 1);
-    }
-    setChecked(newChecked);
-  };
-  const { tasksIndexes, tasks, rtlActive } = props;
-  const tableCellClasses = clsx(classes.tableCell, {
-    [classes.tableCellRTL]: rtlActive,
-  });
-  return (
-    <Table className={classes.table}>
-      <TableBody>
-        {tasksIndexes.map((value) => (
-          <TableRow key={value} className={classes.tableRow}>
-            <TableCell className={tableCellClasses}>
-              <Checkbox
-                checked={checked.indexOf(value) !== -1}
-                tabIndex={-1}
-                onClick={() => handleToggle(value)}
-                checkedIcon={<Check className={classes.checkedIcon} />}
-                icon={<Check className={classes.uncheckedIcon} />}
-                classes={{
-                  checked: classes.checked,
-                  root: classes.root,
-                }}
-              />
-            </TableCell>
-            <TableCell className={tableCellClasses}>{tasks[value]}</TableCell>
-            <TableCell className={classes.tableActions}>
-              <Tooltip
-                id='tooltip-top'
-                title='Edit Task'
-                placement='top'
-                classes={{ tooltip: classes.tooltip }}
-              >
-                <IconButton aria-label='Edit' className={classes.tableActionButton}>
-                  <Edit className={clsx(classes.tableActionButtonIcon, classes.edit)} />
-                </IconButton>
-              </Tooltip>
-              <Tooltip
-                id='tooltip-top-start'
-                title='Remove'
-                placement='top'
-                classes={{ tooltip: classes.tooltip }}
-              >
-                <IconButton aria-label='Close' className={classes.tableActionButton}>
-                  <Close className={clsx(classes.tableActionButtonIcon, classes.close)} />
-                </IconButton>
-              </Tooltip>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-}
-
-Tasks.propTypes = {
-  tasksIndexes: PropTypes.arrayOf(PropTypes.number),
-  tasks: PropTypes.arrayOf(PropTypes.node),
-  rtlActive: PropTypes.bool,
-  checkedIndexes: PropTypes.array,
-};
diff --git a/src/ui/components/Typography/Danger.jsx b/src/ui/components/Typography/Danger.tsx
similarity index 70%
rename from src/ui/components/Typography/Danger.jsx
rename to src/ui/components/Typography/Danger.tsx
index ee6e94b59..18a47c05c 100644
--- a/src/ui/components/Typography/Danger.jsx
+++ b/src/ui/components/Typography/Danger.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import styles from '../../assets/jss/material-dashboard-react/components/typographyStyle';
 
 const useStyles = makeStyles(styles);
 
-export default function Danger(props) {
-  const classes = useStyles();
-  const { children } = props;
-  return <div className={clsx(classes.primaryText, classes.dangerText)}>{children}</div>;
+interface DangerProps {
+  children?: React.ReactNode;
 }
 
-Danger.propTypes = {
-  children: PropTypes.node,
+const Danger: React.FC<DangerProps> = ({ children }) => {
+  const classes = useStyles();
+  return <div className={clsx(classes.primaryText, classes.dangerText)}>{children}</div>;
 };
+
+export default Danger;
diff --git a/src/ui/components/Typography/Info.jsx b/src/ui/components/Typography/Info.jsx
deleted file mode 100644
index 17c3a9ddc..000000000
--- a/src/ui/components/Typography/Info.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import styles from '../../assets/jss/material-dashboard-react/components/typographyStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function Info(props) {
-  const classes = useStyles();
-  const { children } = props;
-  return <div className={clsx(classes.defaultFontStyle, classes.infoText)}>{children}</div>;
-}
-
-Info.propTypes = {
-  children: PropTypes.node,
-};
diff --git a/src/ui/components/Typography/Muted.jsx b/src/ui/components/Typography/Muted.jsx
deleted file mode 100644
index 9b625c5f2..000000000
--- a/src/ui/components/Typography/Muted.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-// @material-ui/core components
-import { makeStyles } from '@material-ui/core/styles';
-// core components
-import styles from '../../assets/jss/material-dashboard-react/components/typographyStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function Muted(props) {
-  const classes = useStyles();
-  const { children } = props;
-  return <div className={clsx(classes.defaultFontStyle, classes.mutedText)}>{children}</div>;
-}
-
-Muted.propTypes = {
-  children: PropTypes.node,
-};
diff --git a/src/ui/components/Typography/Primary.jsx b/src/ui/components/Typography/Primary.jsx
deleted file mode 100644
index b58206c4f..000000000
--- a/src/ui/components/Typography/Primary.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-// @material-ui/core components
-import { makeStyles } from '@material-ui/core/styles';
-// core components
-import styles from '../../assets/jss/material-dashboard-react/components/typographyStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function Primary(props) {
-  const classes = useStyles();
-  const { children } = props;
-  return <div className={clsx(classes.defaultFontStyle, classes.primaryText)}>{children}</div>;
-}
-
-Primary.propTypes = {
-  children: PropTypes.node,
-};
diff --git a/src/ui/components/Typography/Quote.jsx b/src/ui/components/Typography/Quote.jsx
deleted file mode 100644
index 3dedbc7bb..000000000
--- a/src/ui/components/Typography/Quote.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-// @material-ui/core components
-import { makeStyles } from '@material-ui/core/styles';
-// core components
-import styles from '../../assets/jss/material-dashboard-react/components/typographyStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function Quote(props) {
-  const classes = useStyles();
-  const { text, author } = props;
-  return (
-    <blockquote className={clsx(classes.defaultFontStyle, classes.quote)}>
-      <p className={classes.quoteText}>{text}</p>
-      <small className={classes.quoteAuthor}>{author}</small>
-    </blockquote>
-  );
-}
-
-Quote.propTypes = {
-  text: PropTypes.node,
-  author: PropTypes.node,
-};
diff --git a/src/ui/components/Typography/Success.jsx b/src/ui/components/Typography/Success.jsx
deleted file mode 100644
index a40affc47..000000000
--- a/src/ui/components/Typography/Success.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-// @material-ui/core components
-import { makeStyles } from '@material-ui/core/styles';
-// core components
-import styles from '../../assets/jss/material-dashboard-react/components/typographyStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function Success(props) {
-  const classes = useStyles();
-  const { children } = props;
-  return <div className={clsx(classes.defaultFontStyle, classes.successText)}>{children}</div>;
-}
-
-Success.propTypes = {
-  children: PropTypes.node,
-};
diff --git a/src/ui/components/Typography/Warning.jsx b/src/ui/components/Typography/Warning.jsx
deleted file mode 100644
index 70db1ea6d..000000000
--- a/src/ui/components/Typography/Warning.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-// @material-ui/core components
-import { makeStyles } from '@material-ui/core/styles';
-// core components
-import styles from 'ui/assets/jss/material-dashboard-react/components/typographyStyle';
-
-const useStyles = makeStyles(styles);
-
-export default function Warning(props) {
-  const classes = useStyles();
-  const { children } = props;
-  return <div className={clsx(classes.defaultFontStyle, classes.warningText)}>{children}</div>;
-}
-
-Warning.propTypes = {
-  children: PropTypes.node,
-};
diff --git a/src/ui/views/Extras/NotAuthorized.jsx b/src/ui/views/Extras/NotAuthorized.tsx
similarity index 100%
rename from src/ui/views/Extras/NotAuthorized.jsx
rename to src/ui/views/Extras/NotAuthorized.tsx
diff --git a/src/ui/views/Extras/NotFound.jsx b/src/ui/views/Extras/NotFound.tsx
similarity index 100%
rename from src/ui/views/Extras/NotFound.jsx
rename to src/ui/views/Extras/NotFound.tsx
diff --git a/src/ui/views/Settings/Settings.jsx b/src/ui/views/Settings/Settings.tsx
similarity index 83%
rename from src/ui/views/Settings/Settings.jsx
rename to src/ui/views/Settings/Settings.tsx
index 7accfce22..f5ac24fdd 100644
--- a/src/ui/views/Settings/Settings.jsx
+++ b/src/ui/views/Settings/Settings.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, ChangeEvent } from 'react';
 import {
   TextField,
   IconButton,
@@ -31,33 +31,33 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function SettingsView() {
+const SettingsView: React.FC = () => {
   const classes = useStyles();
 
-  const [jwtToken, setJwtToken] = useState('');
-  const [showToken, setShowToken] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState('');
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [jwtToken, setJwtToken] = useState<string>('');
+  const [showToken, setShowToken] = useState<boolean>(false);
+  const [snackbarMessage, setSnackbarMessage] = useState<string>('');
+  const [snackbarOpen, setSnackbarOpen] = useState<boolean>(false);
 
   useEffect(() => {
     const savedToken = localStorage.getItem('ui_jwt_token');
     if (savedToken) setJwtToken(savedToken);
   }, []);
 
-  const handleSave = () => {
+  const handleSave = (): void => {
     localStorage.setItem('ui_jwt_token', jwtToken);
     setSnackbarMessage('JWT token saved');
     setSnackbarOpen(true);
   };
 
-  const handleClear = () => {
+  const handleClear = (): void => {
     setJwtToken('');
     localStorage.removeItem('ui_jwt_token');
     setSnackbarMessage('JWT token cleared');
     setSnackbarOpen(true);
   };
 
-  const toggleShowToken = () => {
+  const toggleShowToken = (): void => {
     setShowToken(!showToken);
   };
 
@@ -81,7 +81,7 @@ export default function SettingsView() {
                 variant='outlined'
                 placeholder='Enter your JWT token...'
                 value={jwtToken}
-                onChange={(e) => setJwtToken(e.target.value)}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setJwtToken(e.target.value)}
                 InputProps={{
                   endAdornment: (
                     <InputAdornment position='end'>
@@ -98,7 +98,7 @@ export default function SettingsView() {
                 }}
               />
               <div className={classes.buttonRow}>
-                <Button color='default' onClick={handleClear}>
+                <Button onClick={handleClear}>
                   <Clear style={{ marginRight: '5px' }} />
                   Clear
                 </Button>
@@ -119,4 +119,6 @@ export default function SettingsView() {
       />
     </form>
   );
-}
+};
+
+export default SettingsView;