diff --git a/public/js/app.js b/public/js/app.js
index 3522a421..b10bcdce 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -127786,12 +127786,11 @@ var Backup = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Dropdown"], {
-        className: "m-2"
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Dropdown"].Toggle, {
+      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["DropdownButton"], {
+        title: "Backup",
         variant: "primary",
-        id: "backupDropdown"
-      }, "Backup"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Dropdown"].Menu, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Dropdown"].Item, {
+        className: "m-2 d-inline-block"
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Dropdown"].Item, {
         href: "#",
         onClick: function onClick() {
           _this2.backup('json');
@@ -127801,7 +127800,7 @@ var Backup = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           _this2.backup('csv');
         }
-      }, "CSV")));
+      }, "CSV"));
     }
   }]);
 
diff --git a/resources/js/components/Data/Backup.js b/resources/js/components/Data/Backup.js
index e87d4204..3b2e4f4b 100644
--- a/resources/js/components/Data/Backup.js
+++ b/resources/js/components/Data/Backup.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Button, Dropdown } from 'react-bootstrap';
+import { Button, Dropdown, DropdownButton } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import Axios from 'axios';
 
@@ -29,16 +29,10 @@ export default class Backup extends Component {
 
     render() {
         return (
-            <Dropdown className="m-2">
-                <Dropdown.Toggle variant="primary" id="backupDropdown">
-                    Backup
-                </Dropdown.Toggle>
-
-                <Dropdown.Menu>
-                    <Dropdown.Item href="#" onClick={() => { this.backup('json') }}>JSON</Dropdown.Item>
-                    <Dropdown.Item href="#" onClick={() => { this.backup('csv') }}>CSV</Dropdown.Item>
-                </Dropdown.Menu>
-            </Dropdown>
+            <DropdownButton title="Backup" variant="primary" className="m-2 d-inline-block">
+                <Dropdown.Item href="#" onClick={() => { this.backup('json') }}>JSON</Dropdown.Item>
+                <Dropdown.Item href="#" onClick={() => { this.backup('csv') }}>CSV</Dropdown.Item>
+            </DropdownButton>
         );
     }
 }