diff --git a/src/components/SettingsPage/index.jsx b/src/components/SettingsPage/index.jsx
deleted file mode 100644
index facfadd..0000000
--- a/src/components/SettingsPage/index.jsx
+++ /dev/null
@@ -1,1970 +0,0 @@
-import React from "react";
-import Header from "../Header/Header";
-import axios from "../../axiosInterceptor";
-import env from "../../enviroment/envFrontEnd";
-import Swal from "sweetalert2";
-import bytes from "bytes";
-import moment from "moment";
-import capitalize from "../../utils/capitalize";
-import { resetCurrentRoute } from "../../actions/routes";
-import { setFolders } from "../../actions/folders";
-import { setQuickFiles } from "../../actions/quickFiles";
-import { hideSettings } from "../../actions/settings";
-import { startLogout, startLogoutAll } from "../../actions/auth";
-import { setFiles, startResetCache } from "../../actions/files";
-import { connect } from "react-redux";
-import { setParent } from "../../actions/parent";
-import uuid from "uuid";
-import { setUpdateSettingsID } from "../../utils/updateSettings";
-import HomepageSpinner from "../HomepageSpinner/HomepageSpinner";
-import { setLoading } from "../../actions/main";
-import withNavigate from "../HocComponent";
-// import {updateSettingsID} from "../MainSection"
-// import { resetSettingsMain } from "../../actions/main";
-
-class SettingsPageContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      sideBarOpen: false,
-      mode: "general",
-      loaded: false,
-      userDetails: {},
-      addS3AccountOpen: false,
-      s3ID: "",
-      s3Key: "",
-      s3Bucket: "",
-      addGoogleAccountOpen: false,
-      googleID: "",
-      googleSecret: "",
-      invoiceData: {},
-      invoices: [],
-      invoicesLoaded: false,
-      showChangePassword: false,
-      oldPassword: "",
-      newPassword: "",
-      verifyNewPassword: "",
-      showAddName: false,
-      name: "",
-      listView: true,
-      dateSort: true,
-      descendingSort: true,
-      dropToUpload: true,
-      doubleClickFolders: false,
-      hideFolderTree: false,
-      showFolderTreeScrollBars: false,
-    };
-
-    this.uploadReference = React.createRef();
-  }
-
-  getUserDetails = () => {
-    this.props.dispatch(setLoading(true));
-
-    axios
-      .get("/user-service/user-detailed")
-      .then((response) => {
-        env.name = response.data.name;
-        env.emailAddress = response.data.email;
-        this.props.dispatch(setParent(uuid.v4()));
-
-        this.setState(
-          () => {
-            return {
-              ...this.state,
-              loaded: true,
-              userDetails: response.data,
-            };
-          },
-          () => {
-            // this.getInvoiceData();
-            this.props.dispatch(setLoading(false));
-          }
-        );
-      })
-      .catch((err) => {
-        console.log("Loading user details error", err);
-
-        Swal.fire({
-          title: "Error loading user account",
-          text: "There was an error loading your account, would you like to logout?",
-          icon: "warning",
-          showCancelButton: true,
-          confirmButtonText: "Yes, logout",
-          cancelButtonText: "No",
-        }).then((result) => {
-          if (result.value) {
-            console.log("Confirm logout");
-
-            axios
-              .post("/user-service/logout")
-              .then(() => {
-                window.location.assign(env.url);
-              })
-              .catch((e) => {
-                window.location.assign(env.url);
-              });
-          }
-        });
-      });
-  };
-
-  componentDidMount = () => {
-    this.getUserDetails();
-    this.setSettings();
-
-    //console.log("env sub", this.state.userDetails.activeSubscription)
-  };
-
-  setSettings = () => {
-    const gridMode = window.localStorage.getItem("grid-mode");
-    const nameMode = window.localStorage.getItem("name-mode");
-    const ascMode = window.localStorage.getItem("asc-mode");
-    const dropToUpload = window.localStorage.getItem("non_drop-mode");
-    const doubleClickFolders = window.localStorage.getItem(
-      "double-click-folders"
-    );
-    const hideFolderTree = window.localStorage.getItem("hide-folder-tree");
-    const showFolderTreeScrollBars = window.localStorage.getItem(
-      "show-folder-tree-scroll-bars"
-    );
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        listView: !gridMode,
-        dateSort: !nameMode,
-        descendingSort: !ascMode,
-        dropToUpload: !dropToUpload,
-        doubleClickFolders: doubleClickFolders,
-        hideFolderTree: hideFolderTree,
-        showFolderTreeScrollBars,
-      };
-    });
-  };
-
-  showSideBar = () => {
-    this.setState(() => {
-      return {
-        ...this.state,
-        sideBarOpen: !this.state.sideBarOpen,
-      };
-    });
-  };
-
-  modeChangeFullScreen = (type) => {
-    this.setState(() => {
-      return {
-        ...this.state,
-        mode: type,
-      };
-    });
-  };
-
-  modeChange = (type) => {
-    this.setState(
-      () => {
-        return {
-          ...this.state,
-          mode: type,
-        };
-      },
-      () => {
-        this.showSideBar();
-      }
-    );
-    //this.showSideBar()
-  };
-
-  getProfilePicName = () => {
-    if (!this.state.loaded) return "?";
-
-    if (this.state.userDetails.name) {
-      if (this.state.userDetails.name.length >= 1) {
-        return this.state.userDetails.name.substring(0, 1).toUpperCase();
-      } else {
-        return "?";
-      }
-    } else if (this.state.userDetails.email.length >= 1) {
-      return this.state.userDetails.email.substring(0, 1).toUpperCase();
-    } else {
-      return "?";
-    }
-  };
-
-  onChangeS3ID = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        s3ID: value,
-      };
-    });
-  };
-
-  onChangeS3Bucket = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        s3Bucket: value,
-      };
-    });
-  };
-
-  onChangeS3Key = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        s3Key: value,
-      };
-    });
-  };
-
-  onChangeGoogleID = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        googleID: value,
-      };
-    });
-  };
-
-  onChangeGoogleSecret = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        googleSecret: value,
-      };
-    });
-  };
-
-  showS3Account = () => {
-    this.setState(() => {
-      return {
-        ...this.state,
-        addS3AccountOpen: !this.state.addS3AccountOpen,
-      };
-    });
-  };
-
-  showGoogleAccount = () => {
-    this.setState(() => {
-      return {
-        ...this.state,
-        addGoogleAccountOpen: !this.state.addGoogleAccountOpen,
-      };
-    });
-  };
-
-  submitS3Account = (e) => {
-    e.preventDefault();
-
-    const data = {
-      id: this.state.s3ID,
-      bucket: this.state.s3Bucket,
-      key: this.state.s3Key,
-    };
-
-    axios
-      .post("/user-service/add-s3-storage", data)
-      .then((response) => {
-        Swal.fire(
-          "S3 Account Added",
-          "Amazon S3 Account has been linked with myDrive",
-          "success"
-        ).then(() => {
-          //window.location.assign(env.url);
-          env.s3Enabled = true;
-
-          this.getUserDetails();
-          this.showS3Account();
-          //   let newUser = this.state.userDetails;
-          //   newUser = {...newUser, s3Enabled: true}
-        });
-      })
-      .catch((err) => {
-        Swal.fire({
-          icon: "error",
-          title: "Add S3 Account Error",
-          text: "Invalid S3 Credentials",
-        });
-      });
-  };
-
-  getInvoiceData = () => {
-    if (!env.commercialMode || !this.state.userDetails.activeSubscription)
-      return;
-
-    axios
-      .get("/user-service/payments")
-      .then((response) => {
-        const invoices = response.data.invoices;
-
-        let invoiceDetails = response.data;
-        //delete invoiceDetails.invoices;
-
-        this.setState(() => {
-          return {
-            ...this.state,
-            invoiceData: invoiceDetails,
-            invoices,
-            invoicesLoaded: true,
-          };
-        });
-      })
-      .catch((e) => {
-        console.log("invoice err", e);
-      });
-  };
-
-  removeS3Account = (e) => {
-    if (e) e.preventDefault();
-
-    Swal.fire({
-      title: "Remove S3 Account?",
-      text: "This will unlink your Amazon S3 Account from myDrive.",
-      icon: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#3085d6",
-      cancelButtonColor: "#d33",
-      confirmButtonText: "Yes, remove account",
-    }).then((result) => {
-      if (result.value) {
-        axios
-          .delete("/user-service/remove-s3-storage")
-          .then((response) => {
-            let newUser = this.state.userDetails;
-            delete newUser.s3Enabled;
-
-            env.s3Enabled = undefined;
-            this.setState(() => {
-              return {
-                ...this.state,
-                userDetails: newUser,
-              };
-            });
-
-            this.showS3Account();
-            Swal.fire(
-              "S3 Account Removed",
-              "Your Amazon S3 Account has been unlinked from myDrive",
-              "success"
-            );
-          })
-          .catch((err) => {
-            console.log("could not remove google account", err);
-          });
-      }
-    });
-  };
-
-  refreshStorageSize = () => {
-    axios
-      .patch("/user-service/refresh-storage-size", undefined)
-      .then((response) => {
-        this.getUserDetails();
-      })
-      .catch((err) => {
-        console.log("refresh storage error");
-      });
-  };
-
-  submitGoogleAccount = (e) => {
-    e.preventDefault();
-
-    const clientID = this.state.googleID;
-    const clientKey = this.state.googleSecret;
-    const clientRedirect = "/add-google-account";
-
-    const data = {
-      clientID,
-      clientKey,
-      clientRedirect,
-    };
-
-    axios
-      .post("/user-service/create-google-storage-url", data)
-      .then((response) => {
-        const googleURL = response.data;
-
-        window.location.assign(googleURL);
-      })
-      .catch((err) => {
-        console.log("create url error", err);
-      });
-  };
-
-  removeGoogleAccount = (e) => {
-    e.preventDefault();
-
-    axios.delete("/user-service/remove-google-storage").then((response) => {
-      env.googleDriveEnable = undefined;
-      this.showGoogleAccount();
-      this.getUserDetails();
-      Swal.fire(
-        "Google Account Removed",
-        "Your Google Account has been unlinked from myDrive",
-        "success"
-      ).then(() => {
-        // window.location.assign(env.url)
-      });
-    });
-  };
-
-  getStoragePercentage = () => {
-    let value = Math.floor(
-      (this.state.userDetails.storageData.storageSize /
-        this.state.userDetails.storageData.storageLimit) *
-        100
-    );
-
-    if (value < 0) value = 0;
-    if (value > 100) value = 100;
-
-    return value;
-  };
-
-  getStoragePercentageGoogle = () => {
-    let value = Math.floor(
-      (this.state.userDetails.storageDataGoogle.storageSize /
-        this.state.userDetails.storageDataGoogle.storageLimit) *
-        100
-    );
-
-    if (value < 0) value = 0;
-    if (value > 100) value = 100;
-
-    return value;
-  };
-
-  launchStoragePage = () => {
-    window.location.assign(env.url + "/add-storage");
-  };
-
-  logout = () => {
-    this.props.dispatch(resetCurrentRoute());
-    this.props.dispatch(setFolders([]));
-    this.props.dispatch(setFiles([]));
-    this.props.dispatch(setQuickFiles([]));
-    this.props.dispatch(hideSettings());
-    this.props.dispatch(startLogout());
-  };
-
-  logoutAll = () => {
-    this.props.dispatch(resetCurrentRoute());
-    this.props.dispatch(setFolders([]));
-    this.props.dispatch(setFiles([]));
-    this.props.dispatch(setQuickFiles([]));
-    this.props.dispatch(hideSettings());
-    this.props.dispatch(startLogoutAll());
-  };
-
-  changeShowChangePassword = () => {
-    this.setState(() => {
-      return {
-        ...this.state,
-        showChangePassword: !this.state.showChangePassword,
-        oldPassword: "",
-        newPassword: "",
-        verifyNewPassword: "",
-      };
-    });
-  };
-
-  goHome = () => {
-    this.props.navigate("/");
-  };
-
-  onChangeOldPassword = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        oldPassword: value,
-      };
-    });
-  };
-
-  onChangeNewPassword = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        newPassword: value,
-      };
-    });
-  };
-
-  onChangeVerifyNewPassword = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        verifyNewPassword: value,
-      };
-    });
-  };
-
-  submitPasswordChange = (e) => {
-    e.preventDefault();
-
-    if (
-      this.state.oldPassword.length === 0 ||
-      this.state.newPassword.length === 0 ||
-      this.state.verifyNewPassword.length === 0
-    ) {
-      Swal.fire({
-        icon: "error",
-        title: "Error",
-        text: "Enter All Required Fields",
-      });
-    }
-
-    if (this.state.verifyNewPassword !== this.state.newPassword) {
-      Swal.fire({
-        icon: "error",
-        title: "Error",
-        text: "New passwords do not match",
-      });
-      return;
-    }
-
-    const data = {
-      newPassword: this.state.newPassword,
-      oldPassword: this.state.oldPassword,
-    };
-
-    axios
-      .post(`/user-service/change-password/`, data)
-      .then((results) => {
-        //const newToken = results.data;
-        // window.localStorage.setItem("token", newToken);
-
-        this.changeShowChangePassword();
-        //this.getUserDetails()
-
-        Swal.fire(
-          "Password Changed",
-          "All other sessions have been logged out",
-          "success"
-        );
-      })
-      .catch((err) => {
-        console.log(err);
-        Swal.fire({
-          icon: "error",
-          title: "Error",
-          text: "Error changing password",
-        });
-      });
-  };
-
-  onChangeAddName = (e) => {
-    const value = e.target.value;
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        name: value,
-      };
-    });
-  };
-
-  doubleClickOnChange = (e) => {
-    if (this.state.doubleClickFolders) {
-      localStorage.removeItem("double-click-folders");
-    } else {
-      localStorage.setItem("double-click-folders", "true");
-    }
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        doubleClickFolders: !this.state.doubleClickFolders,
-      };
-    });
-
-    //this.props.dispatch(resetSettingsMain(uuid.v4()));
-    // updateSettingsID = uuid.v4();
-    // setUpdateSettingsID(uuid.v4());
-  };
-
-  changeShowAddName = () => {
-    this.setState(() => {
-      return {
-        ...this.state,
-        showAddName: !this.state.showAddName,
-        name: "",
-      };
-    });
-  };
-
-  submitAddName = (e) => {
-    e.preventDefault();
-
-    if (this.state.name.length === 0) return;
-
-    const data = {
-      name: this.state.name,
-    };
-
-    axios
-      .patch("/user-service/add-name", data)
-      .then((response) => {
-        this.changeShowAddName();
-        this.getUserDetails();
-        Swal.fire(
-          "Name Updated",
-          "Your name has been sucessfully updated",
-          "success"
-        );
-      })
-      .catch(() => {
-        console.log("could not change name");
-        Swal.fire({
-          icon: "error",
-          title: "Error",
-          text: "Error changing name",
-        });
-      });
-  };
-
-  goHome = () => {
-    this.props.navigate("/");
-  };
-
-  downloadPersonalFileList = (e) => {
-    e.preventDefault();
-
-    axios.post("/user-service/get-token").then((response) => {
-      const finalUrl = `/user-service/download-personal-file-list`;
-
-      const link = document.createElement("a");
-      document.body.appendChild(link);
-      link.href = finalUrl;
-      link.setAttribute("type", "hidden");
-      link.setAttribute("download", true);
-      link.click();
-    });
-  };
-
-  uploadPersonalFileList = (e) => {
-    e.preventDefault();
-
-    if (
-      this.uploadReference.current.files &&
-      this.uploadReference.current.files[0]
-    ) {
-      const currentFile = this.uploadReference.current.files[0];
-
-      const config = {
-        headers: {
-          "Content-Type": "application/json",
-        },
-      };
-
-      axios
-        .post("/user-service/upload-personal-file-list", currentFile, config)
-        .then((response) => {
-          this.uploadReference.current.value = "";
-
-          Swal.fire(
-            "Personal Data Uploaded",
-            "Your Peronsal Metadata has been uploaded to myDrive successfully",
-            "success"
-          );
-        })
-        .catch((err) => {
-          console.log("upload personal file list error", err);
-          Swal.fire({
-            icon: "error",
-            title: "Error",
-            text: "Error uploading personal file list",
-          });
-        });
-    }
-  };
-
-  removeS3Metadata = (e) => {
-    e.preventDefault();
-
-    Swal.fire({
-      title: "Remove S3 Metadata?",
-      text: "This will remove all S3 Metadata from myDrive, please download your metadata list before removing.",
-      icon: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#3085d6",
-      cancelButtonColor: "#d33",
-      confirmButtonText: "Yes, remove metadata",
-    }).then((result) => {
-      if (result.value) {
-        axios
-          .delete("/user-service/remove-s3-metadata")
-          .then((response) => {
-            Swal.fire(
-              "S3 Metadata removed",
-              "Your S3 metadata has been removed from myDrive successfully.",
-              "success"
-            );
-          })
-          .catch((err) => {
-            console.log("delete s3 data err", err);
-            Swal.fire({
-              icon: "error",
-              title: "Error",
-              text: "Error deleting S3 metadata",
-            });
-          });
-      }
-    });
-  };
-
-  listViewOnChange = (e) => {
-    if (this.state.listView) {
-      window.localStorage.setItem("grid-mode", true);
-    } else {
-      window.localStorage.removeItem("grid-mode");
-    }
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        listView: !this.state.listView,
-      };
-    });
-
-    // this.setSettings();
-  };
-
-  sortByDateChange = () => {
-    if (this.state.dateSort) {
-      window.localStorage.setItem("name-mode", true);
-    } else {
-      window.localStorage.removeItem("name-mode");
-    }
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        dateSort: !this.state.dateSort,
-      };
-    });
-  };
-
-  sortByDescendingChange = () => {
-    if (this.state.descendingSort) {
-      window.localStorage.setItem("asc-mode", true);
-    } else {
-      window.localStorage.removeItem("asc-mode");
-    }
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        descendingSort: !this.state.descendingSort,
-      };
-    });
-  };
-
-  dropOnChange = () => {
-    if (this.state.dropToUpload) {
-      window.localStorage.setItem("non_drop-mode", true);
-    } else {
-      window.localStorage.removeItem("non_drop-mode");
-    }
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        dropToUpload: !this.state.dropToUpload,
-      };
-    });
-  };
-
-  hideFolderTreeOnChange = () => {
-    if (this.state.hideFolderTree) {
-      window.localStorage.removeItem("hide-folder-tree");
-    } else {
-      console.log("setting hide folder tree to true");
-
-      window.localStorage.setItem("hide-folder-tree", true);
-    }
-
-    this.setState(() => ({
-      ...this.state,
-      hideFolderTree: !this.state.hideFolderTree,
-    }));
-  };
-
-  showFolderTreeScrollBarsOnChange = () => {
-    if (this.state.showFolderTreeScrollBars) {
-      window.localStorage.removeItem("show-folder-tree-scroll-bars");
-    } else {
-      window.localStorage.setItem("show-folder-tree-scroll-bars", true);
-    }
-
-    this.setState(() => ({
-      ...this.state,
-      showFolderTreeScrollBars: !this.state.showFolderTreeScrollBars,
-    }));
-  };
-
-  render() {
-    if (this.props.loading) {
-      return <HomepageSpinner />;
-    }
-
-    return (
-      <div>
-        <div className="main__wrapper">
-          <div
-            onClick={this.showSideBar}
-            className="overlay"
-            style={
-              this.state.sideBarOpen
-                ? { display: "block" }
-                : { display: "none" }
-            }
-          ></div>
-
-          <Header goHome={this.goHome} />
-
-          <div
-            className="main__wrapper--container settings__container"
-            style={this.props.loading ? { display: "none" } : {}}
-          >
-            <div
-              className="menu__block"
-              style={
-                this.state.sideBarOpen ? { left: "0px" } : { left: "-250px" }
-              }
-            >
-              <div className="file__settings">
-                <div className="back__button">
-                  <a onClick={this.goHome}>
-                    <span>
-                      <img src="/assets/backarrow.svg" alt="backarrow" />
-                    </span>{" "}
-                    BACK TO FILES
-                  </a>
-                </div>
-                <div className="settings__menu">
-                  <ul>
-                    <li
-                      className={
-                        this.state.mode === "general" ? "active__settings" : ""
-                      }
-                      data-settings="general__settings"
-                    >
-                      <a onMouseDown={() => this.modeChange("general")}>
-                        General
-                      </a>
-                    </li>
-                    <li
-                      className={
-                        this.state.mode === "storage" ? "active__settings" : ""
-                      }
-                      data-settings="storage__accounts"
-                    >
-                      <a onMouseDown={() => this.modeChange("storage")}>
-                        Storage accounts
-                      </a>
-                    </li>
-                    <li
-                      style={
-                        env.commercialMode
-                          ? { display: "block" }
-                          : { display: "none" }
-                      }
-                      className={
-                        this.state.mode === "billing" ? "active__settings" : ""
-                      }
-                      data-settings="billing__settings"
-                    >
-                      <a onMouseDown={() => this.modeChange("billing")}>
-                        Billing & payments
-                      </a>
-                    </li>
-                    <li
-                      className={
-                        this.state.mode === "notifications"
-                          ? "active__settings"
-                          : ""
-                      }
-                      data-settings="notification__settings"
-                    >
-                      <a onMouseDown={() => this.modeChange("notifications")}>
-                        Settings
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            <div className="menu__block">
-              <div className="file__settings">
-                <div className="back__button">
-                  <a onClick={this.goHome}>
-                    <span>
-                      <img src="/assets/backarrow.svg" alt="backarrow" />
-                    </span>{" "}
-                    BACK TO FILES
-                  </a>
-                </div>
-                <div className="settings__menu">
-                  <ul>
-                    <li
-                      className={
-                        this.state.mode === "general" ? "active__settings" : ""
-                      }
-                      data-settings="general__settings"
-                    >
-                      <a
-                        onMouseDown={() => this.modeChangeFullScreen("general")}
-                      >
-                        General
-                      </a>
-                    </li>
-                    <li
-                      className={
-                        this.state.mode === "storage" ? "active__settings" : ""
-                      }
-                      data-settings="storage__accounts"
-                    >
-                      <a
-                        onMouseDown={() => this.modeChangeFullScreen("storage")}
-                      >
-                        Storage accounts
-                      </a>
-                    </li>
-                    <li
-                      style={
-                        env.commercialMode
-                          ? { display: "block" }
-                          : { display: "none" }
-                      }
-                      className={
-                        this.state.mode === "billing" ? "active__settings" : ""
-                      }
-                      data-settings="billing__settings"
-                    >
-                      <a
-                        onMouseDown={() => this.modeChangeFullScreen("billing")}
-                      >
-                        Billing & payments
-                      </a>
-                    </li>
-                    <li
-                      className={
-                        this.state.mode === "notifications"
-                          ? "active__settings"
-                          : ""
-                      }
-                      data-settings="notification__settings"
-                    >
-                      <a
-                        onMouseDown={() =>
-                          this.modeChangeFullScreen("notifications")
-                        }
-                      >
-                        Settings
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-
-            <div className="content__block">
-              <div className="small__switcher--content">
-                <a onClick={this.showSideBar} className="menu__button">
-                  <i className="fas fa-bars"></i>
-                </a>
-                {/* <a href="#" className="image__viewer">
-        <i className="fas fa-images"></i>
-      </a> */}
-              </div>
-              <div className="main__settings--block">
-                <div
-                  className="inner__settings general__settings"
-                  style={
-                    this.state.mode === "general"
-                      ? { display: "block" }
-                      : { display: "none" }
-                  }
-                >
-                  <div className="elem__settings">
-                    <div className="head__settings">
-                      <h2>Personal info</h2>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Profile picture</p>
-                      </div>
-                      <div className="control__value">
-                        <div className="profile__picture">
-                          <p style={{ backgroundColor: "#3c85ee" }}>
-                            <span style={{ color: "#fff" }}>
-                              {this.getProfilePicName()}
-                            </span>
-                          </p>
-                        </div>
-                      </div>
-                      <div className="value__updater">
-                        {/* <a href="#">Upload</a> */}
-                      </div>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Name</p>
-                      </div>
-                      <div className="control__value">
-                        <p>
-                          {this.state.loaded
-                            ? this.state.userDetails.name
-                              ? capitalize(this.state.userDetails.name)
-                              : "No Name Set"
-                            : "Loading..."}
-                        </p>
-                      </div>
-                      <div className="value__updater">
-                        <a onClick={this.changeShowAddName}>Change</a>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="elem__settings">
-                    <div className="head__settings">
-                      <h2>Security</h2>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Logout Account</p>
-                      </div>
-                      <div className="control__value">
-                        <p></p>
-                      </div>
-                      <div className="value__updater">
-                        <a onClick={this.logout}>Logout</a>
-                      </div>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Email</p>
-                      </div>
-                      <div className="control__value">
-                        <p>
-                          {this.state.loaded
-                            ? this.state.userDetails.email
-                            : "Loading..."}
-                        </p>
-                      </div>
-                      <div className="value__updater">
-                        {/* <a href="#">Change</a> */}
-                      </div>
-                    </div>
-
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Password</p>
-                      </div>
-                      <div className="control__value">
-                        <p>
-                          {this.state.loaded
-                            ? this.state.userDetails.passwordLastModified
-                              ? `Updated ${moment(
-                                  this.state.userDetails.passwordLastModified
-                                ).calendar()}`
-                              : "Password Not Updated Yet"
-                            : "Loading..."}
-                        </p>
-                      </div>
-                      <div className="value__updater">
-                        <a
-                          onClick={this.changeShowChangePassword}
-                          className="modal__button"
-                          data-modal="password__modal"
-                        >
-                          Change
-                        </a>
-                      </div>
-                    </div>
-
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Logout All Accounts</p>
-                      </div>
-                      <div className="control__value">
-                        <p></p>
-                      </div>
-                      <div className="value__updater">
-                        <a onClick={this.logoutAll}>Logout All</a>
-                      </div>
-                    </div>
-                    {/* <div className="elem__control--settings">
-            <div className="control__title">
-              <p>Two factor authentication</p>
-            </div>
-            <div className="control__value">
-              <p>Disabled</p>
-            </div>
-            <div className="value__updater">
-              <a href="#">Enable</a>
-            </div>
-          </div> */}
-                  </div>
-
-                  <div className="elem__settings" style={{ display: "none" }}>
-                    <div className="head__settings">
-                      <h2>Preferences</h2>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Language</p>
-                      </div>
-                      <div className="control__value">
-                        <p>English</p>
-                      </div>
-                      <div className="value__updater">
-                        <a href="#">Change</a>
-                      </div>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Date format</p>
-                      </div>
-                      <div className="control__value">
-                        <p>MM / DD / YYYY</p>
-                      </div>
-                      <div className="value__updater">
-                        <a href="#">Change</a>
-                      </div>
-                    </div>
-
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Date Time zone</p>
-                      </div>
-                      <div className="control__value">
-                        <p>GMT +7</p>
-                      </div>
-                      <div className="value__updater">
-                        <a href="#">Change</a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="inner__settings storage__accounts"
-                  style={
-                    this.state.mode === "storage"
-                      ? { display: "block" }
-                      : { display: "none" }
-                  }
-                >
-                  <div className="elem__settings">
-                    <div className="head__settings">
-                      <h2>Storage Accounts</h2>
-                    </div>
-                    <div className="elem__control--settings storage__control">
-                      <div className="active__storage">
-                        <div className="control__title">
-                          <div className="double__title">
-                            <p>
-                              {env.commercialMode ? "myDrive" : "Local Storage"}
-                            </p>
-                            <span>
-                              {!this.state.loaded
-                                ? "Loading..."
-                                : env.commercialMode &&
-                                  this.state.userDetails.activeSubscription
-                                ? "Plan Type"
-                                : ""}
-                            </span>
-                          </div>
-                        </div>
-                        <div className="control__value">
-                          <div className="available__space--wrap">
-                            <div
-                              className="space__bar"
-                              style={
-                                !this.state.loaded
-                                  ? {}
-                                  : env.commercialMode &&
-                                    !this.state.userDetails.activeSubscription
-                                  ? { display: "none" }
-                                  : { display: "block" }
-                              }
-                            >
-                              <div
-                                className="active__space--bar"
-                                style={{
-                                  backgroundColor: "#3c85ee",
-                                  width: !this.state.loaded
-                                    ? "0%"
-                                    : env.commercialMode
-                                    ? this.state.userDetails.activeSubscription
-                                      ? `${this.getStoragePercentage()}%`
-                                      : `100%`
-                                    : "100%",
-                                }}
-                              ></div>
-                            </div>
-                            <span>
-                              {!this.state.loaded
-                                ? "Loading..."
-                                : env.commercialMode &&
-                                  this.state.userDetails.activeSubscription
-                                ? `${bytes(
-                                    this.state.userDetails.storageData
-                                      .storageSize
-                                  )} of 
-                  ${bytes(
-                    this.state.userDetails.storageData.storageLimit
-                  )} used`
-                                : !env.commercialMode
-                                ? `${bytes(
-                                    this.state.userDetails.storageData
-                                      .storageSize
-                                  )} used`
-                                : ""}
-                            </span>
-                          </div>
-                        </div>
-                        <div className="value__updater">
-                          <a
-                            onClick={
-                              env.commercialMode
-                                ? this.launchStoragePage
-                                : this.refreshStorageSize
-                            }
-                          >
-                            {env.commercialMode ? "Upgrade" : "Refresh"}
-                          </a>
-                        </div>
-                      </div>
-                      <div className="more__space" style={{ display: "none" }}>
-                        <p>
-                          <img src="/assets/star.svg" alt="star" />{" "}
-                          <span>Earn more free space.</span> Get an additional
-                          10GB of storage for every friend you invite.
-                        </p>
-                        <a href="#">Invite Friends</a>
-                      </div>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <div className="double__title">
-                          <p>Google Drive</p>
-                          <span>
-                            {!this.state.loaded
-                              ? "Loading..."
-                              : this.state.userDetails.googleDriveEnabled
-                              ? this.state.userDetails.googleDriveData.id
-                              : "No Google Account"}
-                          </span>
-                        </div>
-                      </div>
-                      <div className="control__value">
-                        <div className="available__space--wrap">
-                          <div
-                            className="space__bar"
-                            style={
-                              !this.state.loaded
-                                ? {}
-                                : this.state.userDetails.googleDriveEnabled
-                                ? { display: "block" }
-                                : { display: "none" }
-                            }
-                          >
-                            <div
-                              className="active__space--bar"
-                              style={{
-                                backgroundColor: "#3c85ee",
-                                width: !this.state.loaded
-                                  ? "0%"
-                                  : this.state.userDetails.googleDriveEnabled
-                                  ? `${this.getStoragePercentageGoogle()}%`
-                                  : "0%",
-                              }}
-                            ></div>
-                          </div>
-                          <span>
-                            {this.state.userDetails.googleDriveEnabled
-                              ? !this.state.userDetails.storageDataGoogle.failed
-                                ? `${bytes(
-                                    this.state.userDetails.storageDataGoogle
-                                      .storageSize
-                                  )} of 
-                  ${bytes(
-                    this.state.userDetails.storageDataGoogle.storageLimit
-                  )} used`
-                                : "Failed"
-                              : ""}
-                          </span>
-                        </div>
-                      </div>
-                      <div className="value__updater">
-                        <a onClick={this.showGoogleAccount}>
-                          {!this.state.loaded
-                            ? "Loading..."
-                            : this.state.userDetails.googleDriveEnabled
-                            ? "Edit"
-                            : "Add"}
-                        </a>
-                      </div>
-                    </div>
-
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <div className="double__title">
-                          <p>Amazon S3</p>
-                          <span>
-                            {!this.state.loaded
-                              ? "Loading..."
-                              : this.state.userDetails.s3Enabled
-                              ? this.state.userDetails.s3Data.bucket
-                              : "S3 Not Enabled"}
-                          </span>
-                        </div>
-                      </div>
-                      <div
-                        className="control__value"
-                        style={
-                          !this.state.loaded
-                            ? {}
-                            : this.state.userDetails.s3Enabled
-                            ? { display: "block" }
-                            : { display: "none" }
-                        }
-                      >
-                        <div className="available__space--wrap">
-                          <div className="space__bar">
-                            <div
-                              className="active__space--bar"
-                              style={{
-                                backgroundColor: "#3c85ee",
-                                width: "100%",
-                              }}
-                            ></div>
-                          </div>
-                          <span>
-                            {this.state.userDetails.s3Enabled
-                              ? !this.state.userDetails.storageDataPersonal
-                                  .failed
-                                ? `${bytes(
-                                    this.state.userDetails.storageDataPersonal
-                                      .storageSize
-                                  )} used`
-                                : "Failed"
-                              : ""}
-                          </span>
-                        </div>
-                      </div>
-                      <div className="value__updater">
-                        <a onClick={this.showS3Account}>
-                          {!this.state.loaded
-                            ? "Loading..."
-                            : this.state.userDetails.s3Enabled
-                            ? "Edit"
-                            : "Add"}
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="elem__settings more__accounts"
-                    style={{ display: "none" }}
-                  >
-                    <div className="head__settings">
-                      <h2>Add more accounts</h2>
-                    </div>
-                    <div
-                      style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        justifyContent: "center",
-                        alignItems: "center",
-                      }}
-                    >
-                      <p>More Storage Options Coming Soon!</p>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>BackBlaze</p>
-                      </div>
-                      <div className="value__updater">
-                        <a href="#">Enable</a>
-                      </div>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Sia Network</p>
-                      </div>
-                      <div className="value__updater">
-                        <a href="#">Enable</a>
-                      </div>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Localhost</p>
-                      </div>
-                      <div className="value__updater">
-                        <a href="#">Enable</a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div
-                  className="inner__settings billing__settings"
-                  style={
-                    this.state.mode === "billing"
-                      ? { display: "block" }
-                      : { display: "none" }
-                  }
-                >
-                  <div className="elem__settings">
-                    <div className="head__settings">
-                      <h2>Payment</h2>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Payment method</p>
-                      </div>
-                      <div className="control__value">
-                        <p>
-                          {this.state.loaded && this.state.invoicesLoaded
-                            ? !this.state.invoiceData.card
-                              ? "No Payment Method"
-                              : `${this.state.invoiceData.card.brand} ending in ${this.state.invoiceData.card.last4}`
-                            : "No Payment Method"}
-                        </p>
-                      </div>
-                      <div className="value__updater">
-                        <a onClick={this.launchStoragePage}>Change</a>
-                      </div>
-                    </div>
-                    <div className="elem__control--settings">
-                      <div className="control__title">
-                        <p>Billing cycle</p>
-                      </div>
-                      <div className="control__value">
-                        <p>
-                          {this.state.loaded && this.state.invoicesLoaded
-                            ? !this.state.invoiceData.subscription
-                              ? "No Subscription"
-                              : capitalize(
-                                  this.state.invoiceData.subscription.plan
-                                    .interval
-                                )
-                            : "No Subscription"}
-                        </p>
-                      </div>
-                      <div className="value__updater">
-                        <a onClick={this.launchStoragePage}>Change</a>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="elem__settings">
-                    <div className="head__settings">
-                      <h2>History</h2>
-                    </div>
-                    <div className="history.__table">
-                      <table>
-                        <tr>
-                          <th className="date__history">DATE</th>
-                          <th className="plan__history">PLAN</th>
-                          <th className="amount__history">AMOUNT</th>
-                          <th className="status__history">STATUS</th>
-                          <th></th>
-                        </tr>
-
-                        {/* <tr>
-                <td className="date__history">May 1, 2020</td>
-                <td className="plan__history">myDrive Standard Plan</td>
-                <td className="amount__history">$9.99</td>
-                <td className="status__history unpaid">Unpaid</td>
-                <td>
-                  <a href="#">Invoice</a>
-                </td>
-              </tr>
-              <tr>
-                <td className="date__history">May 1, 2020</td>
-                <td className="plan__history">myDrive Standard Plan</td>
-                <td className="amount__history">$9.99</td>
-                <td className="status__history paid">Paid</td>
-                <td>
-                  <a href="#">Receipt</a>
-                </td>
-              </tr>
-              <tr>
-                <td className="date__history">May 1, 2020</td>
-                <td className="plan__history">myDrive Standard Plan</td>
-                <td className="amount__history">$9.99</td>
-                <td className="status__history paid">Paid</td>
-                <td>
-                  <a href="#">Receipt</a>
-                </td>
-              </tr> */}
-                      </table>
-                    </div>
-                  </div>
-                </div>
-
-                <div
-                  className="inner__settings notification__settings"
-                  style={
-                    this.state.mode === "notifications"
-                      ? { display: "block" }
-                      : { display: "none" }
-                  }
-                >
-                  <div className="elem__settings">
-                    <div className="head__settings">
-                      <h2>Customization</h2>
-                    </div>
-                    <div className="settings__switchers">
-                      <span>Set Defaults</span>
-                      <p>
-                        <input
-                          checked={this.state.listView}
-                          onChange={this.listViewOnChange}
-                          type="checkbox"
-                          id="test1"
-                        />
-                        <label for="test1">List Style</label>
-                      </p>
-                      <p>
-                        <input
-                          checked={this.state.dateSort}
-                          onChange={this.sortByDateChange}
-                          type="checkbox"
-                          id="test2"
-                        />
-                        <label for="test2">Sort By Date</label>
-                      </p>
-                      <p>
-                        <input
-                          checked={this.state.descendingSort}
-                          onChange={this.sortByDescendingChange}
-                          type="checkbox"
-                          id="test3"
-                        />
-                        <label for="test3">Descending Order</label>
-                      </p>
-                      <p>
-                        <input
-                          checked={this.state.dropToUpload}
-                          onChange={this.dropOnChange}
-                          type="checkbox"
-                          id="test4"
-                        />
-                        <label for="test4">Drag And Drop To Upload</label>
-                      </p>
-                      <p>
-                        <input
-                          checked={this.state.doubleClickFolders}
-                          onChange={this.doubleClickOnChange}
-                          type="checkbox"
-                          id="test5"
-                        />
-                        <label for="test5">
-                          Double Click To Enter Folders On Mobile
-                        </label>
-                      </p>
-                      <p>
-                        <input
-                          checked={this.state.hideFolderTree}
-                          onChange={this.hideFolderTreeOnChange}
-                          type="checkbox"
-                          id="test6"
-                        />
-                        <label for="test6">Hide Folder Tree</label>
-                      </p>
-                      <p>
-                        <input
-                          checked={this.state.showFolderTreeScrollBars}
-                          onChange={this.showFolderTreeScrollBarsOnChange}
-                          type="checkbox"
-                          id="test7"
-                        />
-                        <label for="test7">Show Folder Tree Scroll Bars</label>
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* <div className="elem__settings">
-          <div className="head__settings">
-            <h2>Marketing</h2>
-          </div>
-          <div className="settings__switchers">
-            <span>Email me about</span>
-            <p>
-              <input type="checkbox" id="test4" />
-              <label for="test4">New features and updates</label>
-            </p>
-            <p>
-              <input type="checkbox" id="test5" />
-              <label for="test5">Tips on using myDrive</label>
-            </p>
-            <p>
-              <input type="checkbox" id="test6" />
-              <label for="test6">
-                Feedback surveys to help improve myDrive
-              </label>
-            </p>
-          </div>
-        </div> */}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          className="modal__wrap"
-          style={
-            this.state.addS3AccountOpen
-              ? { display: "block" }
-              : { display: "none" }
-          }
-        >
-          <div className="inner__modal">
-            <div className="password__modal">
-              <div className="head__password">
-                <h2>
-                  {!this.state.loaded
-                    ? "Loading..."
-                    : this.state.userDetails.s3Enabled
-                    ? "Edit Amazon S3 Account"
-                    : "Add Amazon S3 Account"}
-                </h2>
-                <div className="close__modal">
-                  <a onClick={this.showS3Account}>
-                    <img src="/assets/close.svg" alt="close" />
-                  </a>
-                </div>
-              </div>
-              <div className="password__content">
-                <form
-                  onSubmit={
-                    !this.state.loaded
-                      ? this.submitS3Account
-                      : this.state.userDetails.s3Enabled
-                      ? this.removeS3Account
-                      : this.submitS3Account
-                  }
-                >
-                  <div
-                    className="group__password"
-                    style={
-                      !this.state.loaded
-                        ? {}
-                        : this.state.userDetails.s3Enabled
-                        ? { display: "none" }
-                        : { display: "block" }
-                    }
-                  >
-                    <input
-                      value={this.state.s3ID}
-                      onChange={this.onChangeS3ID}
-                      placeholder="S3 ID"
-                    />
-                  </div>
-                  <div
-                    className="group__password"
-                    style={
-                      !this.state.loaded
-                        ? {}
-                        : this.state.userDetails.s3Enabled
-                        ? { display: "none" }
-                        : { display: "block" }
-                    }
-                  >
-                    <input
-                      value={this.state.s3Bucket}
-                      onChange={this.onChangeS3Bucket}
-                      placeholder="S3 Bucket"
-                    />
-                  </div>
-                  <div
-                    className="group__password"
-                    style={
-                      !this.state.loaded
-                        ? {}
-                        : this.state.userDetails.s3Enabled
-                        ? { display: "none" }
-                        : { display: "block" }
-                    }
-                  >
-                    <input
-                      value={this.state.s3Key}
-                      onChange={this.onChangeS3Key}
-                      type="password"
-                      placeholder="S3 Key"
-                    />
-                  </div>
-                  <div className="password__submit">
-                    <input
-                      type="submit"
-                      value={
-                        !this.state.loaded
-                          ? "Loading..."
-                          : this.state.userDetails.s3Enabled
-                          ? "Remove Account"
-                          : "Add Account"
-                      }
-                    />
-                  </div>
-                </form>
-                <form
-                  onSubmit={this.downloadPersonalFileList}
-                  style={
-                    !this.state.loaded
-                      ? { display: "none" }
-                      : this.state.userDetails.s3Enabled
-                      ? { display: "block", marginTop: "13px" }
-                      : { display: "none" }
-                  }
-                >
-                  <div className="password__submit">
-                    {/* <input onClick={this.downloadPersonalFileList} value="Download S3 File List"/> */}
-                    <button>Download S3 Metadata List</button>
-                  </div>
-                </form>
-                <form
-                  style={
-                    !this.state.loaded
-                      ? { display: "none" }
-                      : this.state.userDetails.s3Enabled
-                      ? { display: "block", marginTop: "13px" }
-                      : { display: "none" }
-                  }
-                >
-                  <div className="password__submit">
-                    <div>
-                      <input
-                        ref={this.uploadReference}
-                        onChange={this.uploadPersonalFileList}
-                        type="file"
-                        multiple={false}
-                      />
-                      <p>Upload S3 Metadata List</p>
-                    </div>
-                    {/* <input onClick={this.downloadPersonalFileList} value="Download S3 File List"/> */}
-                  </div>
-                </form>
-                <form
-                  onSubmit={this.removeS3Metadata}
-                  style={
-                    !this.state.loaded
-                      ? { display: "none" }
-                      : this.state.userDetails.s3Enabled
-                      ? { display: "block", marginTop: "13px" }
-                      : { display: "none" }
-                  }
-                >
-                  <div className="password__submit">
-                    {/* <input onClick={this.downloadPersonalFileList} value="Download S3 File List"/> */}
-                    <button>Delete S3 Metadata</button>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          className="modal__wrap"
-          style={
-            this.state.addGoogleAccountOpen
-              ? { display: "block" }
-              : { display: "none" }
-          }
-        >
-          <div className="inner__modal">
-            <div className="password__modal">
-              <div className="head__password">
-                <h2>
-                  {!this.state.loaded
-                    ? "Loading..."
-                    : this.state.userDetails.googleDriveEnabled
-                    ? "Remove Google Drive Account"
-                    : "Add Google Drive Account"}
-                </h2>
-                <div className="close__modal">
-                  <a onClick={this.showGoogleAccount}>
-                    <img src="/assets/close.svg" alt="close" />
-                  </a>
-                </div>
-              </div>
-              <div className="password__content">
-                <form
-                  onSubmit={
-                    !this.state.loaded
-                      ? this.submitGoogleAccount
-                      : this.state.userDetails.googleDriveEnabled
-                      ? this.removeGoogleAccount
-                      : this.submitGoogleAccount
-                  }
-                >
-                  <div
-                    className="group__password"
-                    style={
-                      !this.state.loaded
-                        ? {}
-                        : this.state.userDetails.googleDriveEnabled
-                        ? { display: "none" }
-                        : { display: "block" }
-                    }
-                  >
-                    <input
-                      value={this.state.googleID}
-                      onChange={this.onChangeGoogleID}
-                      placeholder="Drive Client ID"
-                    />
-                  </div>
-                  <div
-                    className="group__password"
-                    style={
-                      !this.state.loaded
-                        ? {}
-                        : this.state.userDetails.googleDriveEnabled
-                        ? { display: "none" }
-                        : { display: "block" }
-                    }
-                  >
-                    <input
-                      value={this.state.googleSecret}
-                      onChange={this.onChangeGoogleSecret}
-                      type="password"
-                      placeholder="Drive Client Secret"
-                    />
-                  </div>
-                  <div className="password__submit">
-                    <input
-                      type="submit"
-                      value={
-                        !this.state.loaded
-                          ? "Loading..."
-                          : this.state.userDetails.googleDriveEnabled
-                          ? "Remove Account"
-                          : "Add Account"
-                      }
-                    />
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          className="modal__wrap"
-          style={
-            this.state.showChangePassword
-              ? { display: "block" }
-              : { display: "none" }
-          }
-        >
-          <div className="inner__modal">
-            <div className="password__modal">
-              <div className="head__password">
-                <h2>Update password</h2>
-                <div className="close__modal">
-                  <a onClick={this.changeShowChangePassword}>
-                    <img src="/assets/close.svg" alt="close" />
-                  </a>
-                </div>
-              </div>
-              <div className="password__content">
-                <form onSubmit={this.submitPasswordChange}>
-                  <div className="group__password">
-                    <input
-                      onChange={this.onChangeOldPassword}
-                      value={this.state.oldPassword}
-                      type="password"
-                      placeholder="Old password"
-                    />
-                  </div>
-                  <div className="group__password">
-                    <input
-                      onChange={this.onChangeNewPassword}
-                      value={this.state.newPassword}
-                      type="password"
-                      placeholder="New password"
-                    />
-                  </div>
-                  <div className="group__password">
-                    <input
-                      onChange={this.onChangeVerifyNewPassword}
-                      value={this.state.verifyNewPassword}
-                      type="password"
-                      placeholder="Repeat new password"
-                    />
-                  </div>
-                  <div className="password__submit">
-                    <input type="submit" value="Update Password" />
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          className="modal__wrap"
-          style={
-            this.state.showAddName ? { display: "block" } : { display: "none" }
-          }
-        >
-          <div className="inner__modal">
-            <div className="password__modal">
-              <div className="head__password">
-                <h2>{"Update Name"}</h2>
-                <div className="close__modal">
-                  <a onClick={this.changeShowAddName}>
-                    <img src="/assets/close.svg" alt="close" />
-                  </a>
-                </div>
-              </div>
-              <div className="password__content">
-                <form onSubmit={this.submitAddName}>
-                  <div className="group__password">
-                    <input
-                      value={this.state.name}
-                      onChange={this.onChangeAddName}
-                      placeholder="Name"
-                    />
-                  </div>
-                  <div className="password__submit">
-                    <input type="submit" value="Update Name" />
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-const connectStoreToProp = (state) => ({
-  loading: state.main.loading,
-});
-
-export default connect(connectStoreToProp)(withNavigate(SettingsPageContainer));
diff --git a/src/routers/AppRouter.jsx b/src/routers/AppRouter.jsx
index bd4ee69..5f7001d 100755
--- a/src/routers/AppRouter.jsx
+++ b/src/routers/AppRouter.jsx
@@ -14,9 +14,8 @@ import DownloadPage from "../components/DownloadPage/DownloadPage";
 import VerifyEmailPage from "../components/VerifyEmailPage";
 import uuid from "uuid";
 import ResetPasswordPage from "../components/ResetPasswordPage";
-import SettingsPage from "../components/SettingsPage";
+import SettingsPage from "../components/SettingsPage/SettingsPage";
 import Homepage from "../components/Homepage/Homepage";
-import SettingsPage2 from "../components/SettingsPage/SettingsPage";
 
 // export const history = createHistory();
 
@@ -103,13 +102,11 @@ const AppRouter = () => {
         />
         <Route path="/verify-email/:id" element={<VerifyEmailPage />} />
         <Route path="/reset-password/:id" element={<ResetPasswordPage />} />
-        <Route path="/settings" element={<SettingsPage />} />
         <Route
-          key={1}
-          path="/settings2"
+          path="/settings"
           element={
             <PrivateRoute>
-              <SettingsPage2 />
+              <SettingsPage />
             </PrivateRoute>
           }
         />