diff --git a/client/package.json b/client/package.json
index 68b77f8..18864f0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,10 +33,10 @@
     ]
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.1",
+    "@reduxjs/toolkit": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.0.0",
     "@tippyjs/react": "^4.2.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.11",
@@ -54,15 +54,15 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-google-button": "^0.7.2",
-    "react-helmet-async": "^1.3.0",
+    "react-helmet-async": "^2.0.0",
     "react-icons": "^4.7.1",
     "react-loading-skeleton": "^3.1.0",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.0.0",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
     "react-toastify": "^9.1.1",
-    "redux": "^4.2.0",
+    "redux": "^5.0.0",
     "sass": "^1.57.1",
     "slick-carousel": "^1.8.1",
     "typescript": "^4.9.4",
@@ -90,5 +90,6 @@
     "prettier": "^2.8.3",
     "react-app-rewired": "^2.2.1",
     "typescript-plugin-css-modules": "^4.1.1"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/client/src/App.test.tsx b/client/src/App.test.tsx
index 744673e..2d1e24d 100644
--- a/client/src/App.test.tsx
+++ b/client/src/App.test.tsx
@@ -1,9 +1,9 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render } from "@testing-library/react"
 import App from "./App"
 
 test("renders learn react link", () => {
-  render(<App />)
-  const linkElement = screen.getByText(/learn react/i)
+  const { getByText } = render(<App />)
+  const linkElement = getByText(/learn react/i)
   expect(linkElement).toBeInTheDocument()
 })
diff --git a/client/src/components/Alpha/AlphaDetailPlayList.tsx b/client/src/components/Alpha/AlphaDetailPlayList.tsx
index b9c13f6..8fab5ec 100644
--- a/client/src/components/Alpha/AlphaDetailPlayList.tsx
+++ b/client/src/components/Alpha/AlphaDetailPlayList.tsx
@@ -5,8 +5,8 @@ import { BsPlayCircle } from "react-icons/bs"
 import images from "../../assets/images"
 import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { setPlaying } from "../../redux/reducers/controlSlice"
-import { IconLoading } from "../icons"
-import Image from "../image"
+import { IconLoading } from "../Icons"
+import Image from "../Image"
 import style from "./AlphaDetailPlayList.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Alpha/AlphaMedia.tsx b/client/src/components/Alpha/AlphaMedia.tsx
index 202bbae..9051ed7 100644
--- a/client/src/components/Alpha/AlphaMedia.tsx
+++ b/client/src/components/Alpha/AlphaMedia.tsx
@@ -4,8 +4,8 @@ import React from "react"
 import images from "../../assets/images"
 import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { setPlaying } from "../../redux/reducers/controlSlice"
-import { IconLoading } from "../icons"
-import Image from "../image"
+import { IconLoading } from "../Icons"
+import Image from "../Image"
 import style from "./AlphaMedia.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Alpha/AlphaModalTheme.tsx b/client/src/components/Alpha/AlphaModalTheme.tsx
index 19787f0..8771226 100644
--- a/client/src/components/Alpha/AlphaModalTheme.tsx
+++ b/client/src/components/Alpha/AlphaModalTheme.tsx
@@ -4,7 +4,7 @@ import { useAppDispatch } from "../../hooks/useRedux"
 import { changeTheme, setShowThemeModal } from "../../redux/reducers/themeSlice"
 import { getToastWarn } from "../../utils/toast"
 
-import { ButtonTitle } from "../button"
+import { ButtonTitle } from "../Button"
 import style from "./AlphaModalTheme.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Alpha/AlphaPage.tsx b/client/src/components/Alpha/AlphaPage.tsx
index cd655c1..809f53f 100644
--- a/client/src/components/Alpha/AlphaPage.tsx
+++ b/client/src/components/Alpha/AlphaPage.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 
-import Image from "../image"
+import Image from "../Image"
 import style from "./AlphaPage.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Button/ButtonDropDown.tsx b/client/src/components/Button/ButtonDropDown.tsx
index 5c16f87..812612f 100644
--- a/client/src/components/Button/ButtonDropDown.tsx
+++ b/client/src/components/Button/ButtonDropDown.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react"
 import { HiOutlineChevronDown, HiOutlineChevronUp } from "react-icons/hi2"
 
 import { ButtonTitle } from "."
-import { PopperWrapper } from "../wrapper"
+import { PopperWrapper } from "../Wrapper"
 import style from "./ButtonDropDown.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Button/ButtonMenu.tsx b/client/src/components/Button/ButtonMenu.tsx
index 7e35127..87fff4f 100644
--- a/client/src/components/Button/ButtonMenu.tsx
+++ b/client/src/components/Button/ButtonMenu.tsx
@@ -2,8 +2,8 @@ import HeadlessTippy from "@tippyjs/react/headless"
 import clsx from "clsx"
 import React, { useState } from "react"
 
-import Menu from "../menu"
-import { PopperWrapper } from "../wrapper"
+import Menu from "../Menu"
+import { PopperWrapper } from "../Wrapper"
 import style from "./ButtonMenu.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Card/CardAlbum.tsx b/client/src/components/Card/CardAlbum.tsx
index 1119613..456286b 100644
--- a/client/src/components/Card/CardAlbum.tsx
+++ b/client/src/components/Card/CardAlbum.tsx
@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { DETAIL_PLAY_LIST } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardAlbum.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Card/CardArtist.tsx b/client/src/components/Card/CardArtist.tsx
index f03d83d..3e3f147 100644
--- a/client/src/components/Card/CardArtist.tsx
+++ b/client/src/components/Card/CardArtist.tsx
@@ -5,10 +5,10 @@ import { Link } from "react-router-dom"
 import images from "../../assets/images"
 import { ARTIST } from "../../constants"
 import { formatLinkArtist } from "../../utils/common"
-import { AlphaCard } from "../alpha"
+import { AlphaCard } from "../Alpha"
 import { BtnFollow } from "../btn-action"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardArtist.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Card/CardDetail.tsx b/client/src/components/Card/CardDetail.tsx
index 8aa01ad..ee92a44 100644
--- a/client/src/components/Card/CardDetail.tsx
+++ b/client/src/components/Card/CardDetail.tsx
@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { DETAIL_PLAY_LIST } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardDetail.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Card/CardRadio.tsx b/client/src/components/Card/CardRadio.tsx
index 32b233a..dc38deb 100644
--- a/client/src/components/Card/CardRadio.tsx
+++ b/client/src/components/Card/CardRadio.tsx
@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { DETAIL_PLAY_LIST, RADIO } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardRadio.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Card/CardSong.tsx b/client/src/components/Card/CardSong.tsx
index f6ef6b0..6a76175 100644
--- a/client/src/components/Card/CardSong.tsx
+++ b/client/src/components/Card/CardSong.tsx
@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { DETAIL_PLAY_LIST } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./CardSong.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Card/CardVideo.tsx b/client/src/components/Card/CardVideo.tsx
index e70e95b..98308c1 100644
--- a/client/src/components/Card/CardVideo.tsx
+++ b/client/src/components/Card/CardVideo.tsx
@@ -3,9 +3,9 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { MV, VIDEO } from "../../constants"
-import { AlphaCard } from "../alpha"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import { AlphaCard } from "../Alpha"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import Time from "../time"
 import style from "./CardVideo.module.scss"
 
diff --git a/client/src/components/Info/SubTitle.tsx b/client/src/components/Info/SubTitle.tsx
index 332e906..654907c 100644
--- a/client/src/components/Info/SubTitle.tsx
+++ b/client/src/components/Info/SubTitle.tsx
@@ -7,8 +7,8 @@ import { Link } from "react-router-dom"
 import { ARTIST } from "../../constants"
 import { useAppSelector } from "../../hooks/useRedux"
 import { formatLinkArtist } from "../../utils/common"
-import MediaReview from "../media/media-review"
-import { PopperWrapper } from "../wrapper"
+import MediaReview from "../Media/media-review"
+import { PopperWrapper } from "../Wrapper"
 import style from "./SubTitle.module.scss"
 
 interface IProps {
diff --git a/client/src/components/Media/Media.tsx b/client/src/components/Media/Media.tsx
index 515c763..036092f 100644
--- a/client/src/components/Media/Media.tsx
+++ b/client/src/components/Media/Media.tsx
@@ -5,13 +5,13 @@ import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { MediaIProps } from "../../interface"
 import { setInfoSong } from "../../redux/reducers/songSlice"
 import { getToastWarn } from "../../utils/toast"
-import { AlphaMedia } from "../alpha"
+import { AlphaMedia } from "../Alpha"
 import { BtnHeartSong, BtnKaraoke, BtnThreeDotMedia } from "../btn-action"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import Time from "../time"
 import style from "./Media.module.scss"
-import { PrefixIcon, PrefixNum, PrefixTitle } from "./prefix"
+import { PrefixIcon, PrefixNum, PrefixTitle } from "./Prefix"
 
 interface IProps extends MediaIProps {
   prefixIndex?: number
diff --git a/client/src/components/Media/media-review/MediaPreview.tsx b/client/src/components/Media/media-review/MediaPreview.tsx
index a8a2d48..2730339 100644
--- a/client/src/components/Media/media-review/MediaPreview.tsx
+++ b/client/src/components/Media/media-review/MediaPreview.tsx
@@ -6,10 +6,10 @@ import { Link } from "react-router-dom"
 import { useAppSelector } from "../../../hooks/useRedux"
 import * as services from "../../../services"
 import { formatFollower } from "../../../utils/common"
-import { AlphaMedia } from "../../alpha"
+import { AlphaMedia } from "../../Alpha"
 import { BtnFollow } from "../../btn-action"
-import { CardSong } from "../../card"
-import Image from "../../image"
+import { CardSong } from "../../Card"
+import Image from "../../Image"
 import style from "./MediaPreview.module.scss"
 
 interface SectionItem {
diff --git a/client/src/components/Menu/Menu.tsx b/client/src/components/Menu/Menu.tsx
index be1f3d2..de0c0e5 100644
--- a/client/src/components/Menu/Menu.tsx
+++ b/client/src/components/Menu/Menu.tsx
@@ -2,8 +2,8 @@ import HeadlessTippy from "@tippyjs/react/headless"
 import clsx from "clsx"
 import React from "react"
 
-import { ButtonTitle } from "../button"
-import { PopperWrapper } from "../wrapper"
+import { ButtonTitle } from "../Button"
+import { PopperWrapper } from "../Wrapper"
 import style from "./Menu.module.scss"
 
 interface MenuIProps {
diff --git a/client/src/components/Slide/SlideArtist.tsx b/client/src/components/Slide/SlideArtist.tsx
index 16ac0d6..4ff6743 100644
--- a/client/src/components/Slide/SlideArtist.tsx
+++ b/client/src/components/Slide/SlideArtist.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Link } from "react-router-dom"
 
-import Image from "../image"
-import { SlideWrapper } from "../wrapper"
+import Image from "../Image"
+import { SlideWrapper } from "../Wrapper"
 import ARTISTS from "./data"
 import style from "./SlideArtist.module.scss"
 
diff --git a/client/src/components/Slide/SlideBanner.tsx b/client/src/components/Slide/SlideBanner.tsx
index b8139a4..e84bcd3 100644
--- a/client/src/components/Slide/SlideBanner.tsx
+++ b/client/src/components/Slide/SlideBanner.tsx
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom"
 
 import { BannerIProps } from "../../interface"
 import { formatLinkBanner } from "../../utils/common"
-import Image from "../image"
+import Image from "../Image"
 import style from "./SlideBanner.module.scss"
 
 interface SlideBannerProps {
diff --git a/client/src/components/Slide/SlideRadio.tsx b/client/src/components/Slide/SlideRadio.tsx
index 26fa6c7..ca20673 100644
--- a/client/src/components/Slide/SlideRadio.tsx
+++ b/client/src/components/Slide/SlideRadio.tsx
@@ -1,9 +1,9 @@
 import React from "react"
 
 import { RadioIProps } from "../../interface"
-import { CardRadio } from "../card"
-import { Title } from "../info"
-import { SlideWrapper } from "../wrapper"
+import { CardRadio } from "../Card"
+import { Title } from "../Info"
+import { SlideWrapper } from "../Wrapper"
 import style from "./SlideRadio.module.scss"
 
 interface IProps {
diff --git a/client/src/components/btn-action/BtnFollow.tsx b/client/src/components/btn-action/BtnFollow.tsx
index e11d7f4..1613b3e 100644
--- a/client/src/components/btn-action/BtnFollow.tsx
+++ b/client/src/components/btn-action/BtnFollow.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { AiOutlineCheck } from "react-icons/ai"
 import { SlUserFollow } from "react-icons/sl"
 
-import { ButtonTitle } from "../button"
+import { ButtonTitle } from "../Button"
 
 interface IProps {
   primary?: boolean
diff --git a/client/src/components/btn-action/BtnHeartAlbum.tsx b/client/src/components/btn-action/BtnHeartAlbum.tsx
index 99f790c..11e0855 100644
--- a/client/src/components/btn-action/BtnHeartAlbum.tsx
+++ b/client/src/components/btn-action/BtnHeartAlbum.tsx
@@ -7,7 +7,7 @@ import { LOGIN } from "../../constants"
 import { useAppSelector } from "../../hooks/useRedux"
 import * as services from "../../services"
 import { getToastSuccess, getToastWarn } from "../../utils/toast"
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface IProps {
   album: any
diff --git a/client/src/components/btn-action/BtnHeartSong.tsx b/client/src/components/btn-action/BtnHeartSong.tsx
index 30fdc22..964c15f 100644
--- a/client/src/components/btn-action/BtnHeartSong.tsx
+++ b/client/src/components/btn-action/BtnHeartSong.tsx
@@ -7,7 +7,7 @@ import { LOGIN } from "../../constants"
 import { useAppSelector } from "../../hooks/useRedux"
 import * as services from "../../services"
 import { getToastSuccess, getToastWarn } from "../../utils/toast"
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface Song {
   encodeId: string
diff --git a/client/src/components/btn-action/BtnKaraoke.tsx b/client/src/components/btn-action/BtnKaraoke.tsx
index f3967cd..6c5bd0a 100644
--- a/client/src/components/btn-action/BtnKaraoke.tsx
+++ b/client/src/components/btn-action/BtnKaraoke.tsx
@@ -3,7 +3,7 @@ import { GiMicrophone } from "react-icons/gi"
 
 import { useAppDispatch } from "../../hooks/useRedux"
 import { setShowLyricSongModal } from "../../redux/reducers/lyricSlice"
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface IProps {
   title?: string
diff --git a/client/src/components/btn-action/BtnMV.tsx b/client/src/components/btn-action/BtnMV.tsx
index 8ef8eb1..72712f7 100644
--- a/client/src/components/btn-action/BtnMV.tsx
+++ b/client/src/components/btn-action/BtnMV.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { MdOutlineVideoLibrary } from "react-icons/md"
 
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface IProps {
   title?: string
diff --git a/client/src/components/btn-action/BtnThreeDotCard.tsx b/client/src/components/btn-action/BtnThreeDotCard.tsx
index d547761..391b384 100644
--- a/client/src/components/btn-action/BtnThreeDotCard.tsx
+++ b/client/src/components/btn-action/BtnThreeDotCard.tsx
@@ -10,9 +10,9 @@ import { IoIosAddCircleOutline } from "react-icons/io"
 import { MdOutlineModeComment } from "react-icons/md"
 import { SiZalo } from "react-icons/si"
 
-import { ButtonIcon } from "../button"
-import Menu from "../menu/Menu"
-import { PopperWrapper } from "../wrapper"
+import { ButtonIcon } from "../Button"
+import Menu from "../Menu/Menu"
+import { PopperWrapper } from "../Wrapper"
 import style from "./BtnThreeDotCard.module.scss"
 
 const MENU_CARD = [
diff --git a/client/src/components/btn-action/BtnThreeDotMedia.tsx b/client/src/components/btn-action/BtnThreeDotMedia.tsx
index edb1947..fff4abc 100644
--- a/client/src/components/btn-action/BtnThreeDotMedia.tsx
+++ b/client/src/components/btn-action/BtnThreeDotMedia.tsx
@@ -13,11 +13,11 @@ import { SiZalo } from "react-icons/si"
 
 import { useAppDispatch } from "../../hooks/useRedux"
 import { setShowLyricSongModal } from "../../redux/reducers/lyricSlice"
-import { ButtonIcon, ButtonTitle } from "../button"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
-import Menu from "../menu/Menu"
-import { PopperWrapper } from "../wrapper"
+import { ButtonIcon, ButtonTitle } from "../Button"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
+import Menu from "../Menu/Menu"
+import { PopperWrapper } from "../Wrapper"
 import style from "./BtnThreeDotMedia.module.scss"
 
 const MENU_MEDIA = [
diff --git a/client/src/components/btn-action/BtnToggleList.tsx b/client/src/components/btn-action/BtnToggleList.tsx
index c487c38..5113248 100644
--- a/client/src/components/btn-action/BtnToggleList.tsx
+++ b/client/src/components/btn-action/BtnToggleList.tsx
@@ -4,7 +4,7 @@ import { BsMusicNoteList } from "react-icons/bs"
 import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { setShowPlayListModal } from "../../redux/reducers/playListSlice"
 
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 import style from "./BtnToggleList.module.scss"
 
 interface IProps {
diff --git a/client/src/components/btn-action/BtnView.tsx b/client/src/components/btn-action/BtnView.tsx
index 685c359..9be4aaa 100644
--- a/client/src/components/btn-action/BtnView.tsx
+++ b/client/src/components/btn-action/BtnView.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { VscMultipleWindows } from "react-icons/vsc"
 
-import { ButtonIcon } from "../button"
+import { ButtonIcon } from "../Button"
 
 interface IProps {
   title?: string
diff --git a/client/src/components/modal/modal-lyric/ModalLyric.tsx b/client/src/components/modal/modal-lyric/ModalLyric.tsx
index c39e581..a2697dd 100644
--- a/client/src/components/modal/modal-lyric/ModalLyric.tsx
+++ b/client/src/components/modal/modal-lyric/ModalLyric.tsx
@@ -8,10 +8,10 @@ import { useDispatch } from "react-redux"
 import images from "../../../assets/images"
 import { useAppSelector } from "../../../hooks/useRedux"
 import { setShowLyricSongModal } from "../../../redux/reducers/lyricSlice"
-import { ButtonIcon } from "../../button"
-import Image from "../../image"
-import { TabButton } from "../../tab"
-import { TabWrapper } from "../../wrapper"
+import { ButtonIcon } from "../../Button"
+import Image from "../../Image"
+import { TabButton } from "../../Tab"
+import { TabWrapper } from "../../Wrapper"
 import style from "./ModalLyric.module.scss"
 import PlayListPanel from "./play-list-panel/PlayListPanel"
 import KaraokePanel from "./karaoke-panel/KaraokePanel"
diff --git a/client/src/components/modal/modal-lyric/karaoke-panel/KaraokePanel.tsx b/client/src/components/modal/modal-lyric/karaoke-panel/KaraokePanel.tsx
index 364e0bc..f785aff 100644
--- a/client/src/components/modal/modal-lyric/karaoke-panel/KaraokePanel.tsx
+++ b/client/src/components/modal/modal-lyric/karaoke-panel/KaraokePanel.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx"
 import React from "react"
 
-import Lyric from "../../../lyric"
+import Lyric from "../../../Lyric"
 import style from "./KaraokePanel.module.scss"
 
 const KaraokePanel: React.FC = () => {
diff --git a/client/src/components/modal/modal-lyric/lyrics-panel/LyricsPanel.tsx b/client/src/components/modal/modal-lyric/lyrics-panel/LyricsPanel.tsx
index d91f4fc..eeb9143 100644
--- a/client/src/components/modal/modal-lyric/lyrics-panel/LyricsPanel.tsx
+++ b/client/src/components/modal/modal-lyric/lyrics-panel/LyricsPanel.tsx
@@ -2,8 +2,8 @@ import clsx from "clsx"
 import React from "react"
 
 import { useAppSelector } from "../../../../hooks/useRedux"
-import Image from "../../../image"
-import Lyric from "../../../lyric"
+import Image from "../../../Image"
+import Lyric from "../../../Lyric"
 import style from "./LyricsPanel.module.scss"
 
 const LyricsPanel: React.FC = () => {
diff --git a/client/src/components/modal/modal-lyric/play-list-panel/PlayListPanel.tsx b/client/src/components/modal/modal-lyric/play-list-panel/PlayListPanel.tsx
index 3deb0ed..904a55a 100644
--- a/client/src/components/modal/modal-lyric/play-list-panel/PlayListPanel.tsx
+++ b/client/src/components/modal/modal-lyric/play-list-panel/PlayListPanel.tsx
@@ -2,9 +2,9 @@ import clsx from "clsx"
 import React from "react"
 
 import { useAppSelector } from "../../../../hooks/useRedux"
-import Image from "../../../image"
-import { SubTitle, Title } from "../../../info"
-import { SlideWrapper } from "../../../wrapper"
+import Image from "../../../Image"
+import { SubTitle, Title } from "../../../Info"
+import { SlideWrapper } from "../../../Wrapper"
 import style from "./PlayListPanel.module.scss"
 
 const PlayListPanel: React.FC = () => {
diff --git a/client/src/components/modal/modal-play-list/ModalPlayList.tsx b/client/src/components/modal/modal-play-list/ModalPlayList.tsx
index 9d61548..ef0db67 100644
--- a/client/src/components/modal/modal-play-list/ModalPlayList.tsx
+++ b/client/src/components/modal/modal-play-list/ModalPlayList.tsx
@@ -4,8 +4,8 @@ import { useEffect } from "react"
 import { useAppDispatch, useAppSelector } from "../../../hooks/useRedux"
 import { setPlayList, setSongIndex } from "../../../redux/reducers/playListSlice"
 import * as services from "../../../services"
-import { ButtonTitle } from "../../button"
-import Media from "../../media"
+import { ButtonTitle } from "../../Button"
+import Media from "../../Media"
 import style from "./ModalPlayList.module.scss"
 
 const ModalPlayList: React.FC = () => {
diff --git a/client/src/components/modal/modal-theme/ModalTheme.tsx b/client/src/components/modal/modal-theme/ModalTheme.tsx
index cb82e7a..a1072d9 100644
--- a/client/src/components/modal/modal-theme/ModalTheme.tsx
+++ b/client/src/components/modal/modal-theme/ModalTheme.tsx
@@ -3,8 +3,8 @@ import { IoMdClose } from "react-icons/io"
 
 import { useAppDispatch, useAppSelector } from "../../../hooks/useRedux"
 import { setShowThemeModal } from "../../../redux/reducers/themeSlice"
-import { ButtonIcon } from "../../button"
-import { PopperWrapper } from "../../wrapper"
+import { ButtonIcon } from "../../Button"
+import { PopperWrapper } from "../../Wrapper"
 import style from "./ModalTheme.module.scss"
 import ThemeList from "./ThemeList"
 
diff --git a/client/src/components/modal/modal-theme/ThemeItem.tsx b/client/src/components/modal/modal-theme/ThemeItem.tsx
index 2f29d71..d2a2c5a 100644
--- a/client/src/components/modal/modal-theme/ThemeItem.tsx
+++ b/client/src/components/modal/modal-theme/ThemeItem.tsx
@@ -2,8 +2,8 @@ import clsx from "clsx"
 import React from "react"
 import { BsCheckCircleFill } from "react-icons/bs"
 
-import { AlphaTheme } from "../../alpha"
-import Image from "../../image"
+import { AlphaTheme } from "../../Alpha"
+import Image from "../../Image"
 import style from "./ThemeItem.module.scss"
 
 interface IProps {
diff --git a/client/src/components/play-list/PlayListAlbum.tsx b/client/src/components/play-list/PlayListAlbum.tsx
index 29c5156..3066be1 100644
--- a/client/src/components/play-list/PlayListAlbum.tsx
+++ b/client/src/components/play-list/PlayListAlbum.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { AlbumIProps } from "../../interface"
-import { CardAlbum } from "../card"
+import { CardAlbum } from "../Card"
 import HeaderPlayList from "../header-play-list"
 import style from "./PlayList.module.scss"
 
diff --git a/client/src/components/play-list/PlayListArtist.tsx b/client/src/components/play-list/PlayListArtist.tsx
index 84ee5de..0591a91 100644
--- a/client/src/components/play-list/PlayListArtist.tsx
+++ b/client/src/components/play-list/PlayListArtist.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { ArtistIProps } from "../../interface"
-import CardArtist from "../card/CardArtist"
+import CardArtist from "../Card/CardArtist"
 import HeaderPlayList from "../header-play-list"
 import style from "./PlayList.module.scss"
 
diff --git a/client/src/components/play-list/PlayListVideo.tsx b/client/src/components/play-list/PlayListVideo.tsx
index efdf5b3..e33ba84 100644
--- a/client/src/components/play-list/PlayListVideo.tsx
+++ b/client/src/components/play-list/PlayListVideo.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx"
 import React from "react"
 
 import { CardIProps } from "../../interface"
-import { CardVideo } from "../card"
+import { CardVideo } from "../Card"
 import HeaderPlayList from "../header-play-list"
 import style from "./PlayList.module.scss"
 
diff --git a/client/src/components/suggest-item/SuggestArtist.tsx b/client/src/components/suggest-item/SuggestArtist.tsx
index 344d1f6..91763bb 100644
--- a/client/src/components/suggest-item/SuggestArtist.tsx
+++ b/client/src/components/suggest-item/SuggestArtist.tsx
@@ -3,8 +3,8 @@ import { Link } from "react-router-dom"
 
 import { ARTIST } from "../../constants"
 import { formatFollower } from "../../utils/common"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./SuggestArtist.module.scss"
 
 interface IProps {
diff --git a/client/src/components/suggest-item/SuggestItem.tsx b/client/src/components/suggest-item/SuggestItem.tsx
index b379b0a..23a5a5b 100644
--- a/client/src/components/suggest-item/SuggestItem.tsx
+++ b/client/src/components/suggest-item/SuggestItem.tsx
@@ -5,10 +5,10 @@ import { DETAIL_PLAY_LIST } from "../../constants"
 import { useAppDispatch } from "../../hooks/useRedux"
 import { MediaIProps } from "../../interface"
 import { setInfoSong } from "../../redux/reducers/songSlice"
-import { AlphaMedia } from "../alpha"
+import { AlphaMedia } from "../Alpha"
 import { BtnHeartSong, BtnThreeDotMedia } from "../btn-action"
-import Image from "../image"
-import { SubTitle, Title } from "../info"
+import Image from "../Image"
+import { SubTitle, Title } from "../Info"
 import style from "./SuggestItem.module.scss"
 
 const SuggestItem: React.FC<MediaIProps> = (props) => {
diff --git a/client/src/layouts/components/Header/Header.tsx b/client/src/layouts/components/Header/Header.tsx
index 6de0096..d285242 100644
--- a/client/src/layouts/components/Header/Header.tsx
+++ b/client/src/layouts/components/Header/Header.tsx
@@ -4,7 +4,7 @@ import { forwardRef, useImperativeHandle, useRef } from "react"
 import { BsArrowLeft, BsArrowRight } from "react-icons/bs"
 import { useNavigate } from "react-router-dom"
 
-import { ButtonIcon } from "../../../components/button"
+import { ButtonIcon } from "../../../components/Button"
 import style from "./Header.module.scss"
 import HeaderNavigation from "./header-navigation"
 import HeaderSearch from "./header-search"
diff --git a/client/src/layouts/components/Header/header-navigation/HeaderNavigation.tsx b/client/src/layouts/components/Header/header-navigation/HeaderNavigation.tsx
index f532e4a..cceca9d 100644
--- a/client/src/layouts/components/Header/header-navigation/HeaderNavigation.tsx
+++ b/client/src/layouts/components/Header/header-navigation/HeaderNavigation.tsx
@@ -10,9 +10,9 @@ import { TbNotes } from "react-icons/tb"
 
 import images from "../../../../assets/images"
 import { useAuthContext } from "../../../../auth/AuthProvider"
-import { ButtonIcon, ButtonMenu } from "../../../../components/button"
-import { IconTheme } from "../../../../components/icons"
-import Image from "../../../../components/image"
+import { ButtonIcon, ButtonMenu } from "../../../../components/Button"
+import { IconTheme } from "../../../../components/Icons"
+import Image from "../../../../components/Image"
 import { UPDATE } from "../../../../constants"
 import { useAppDispatch } from "../../../../hooks/useRedux"
 import { setShowThemeModal } from "../../../../redux/reducers/themeSlice"
diff --git a/client/src/layouts/components/Header/header-search/HeaderSearch.tsx b/client/src/layouts/components/Header/header-search/HeaderSearch.tsx
index 9a9e9a1..b2a3955 100644
--- a/client/src/layouts/components/Header/header-search/HeaderSearch.tsx
+++ b/client/src/layouts/components/Header/header-search/HeaderSearch.tsx
@@ -8,7 +8,7 @@ import { IoCloseOutline } from "react-icons/io5"
 import useSearch from "../../../../hooks/useSearch"
 import { SuggestArtist, SuggestItem } from "../../../../components/suggest-item"
 import style from "./HeaderSearch.module.scss"
-import { PopperWrapper } from "../../../../components/wrapper"
+import { PopperWrapper } from "../../../../components/Wrapper"
 
 const HeaderSearch: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("")
diff --git a/client/src/layouts/components/Player/player-control/PlayerControl.tsx b/client/src/layouts/components/Player/player-control/PlayerControl.tsx
index 8c4d2d3..dfed2ae 100644
--- a/client/src/layouts/components/Player/player-control/PlayerControl.tsx
+++ b/client/src/layouts/components/Player/player-control/PlayerControl.tsx
@@ -5,8 +5,8 @@ import { FaRandom } from "react-icons/fa"
 import { MdSkipNext, MdSkipPrevious } from "react-icons/md"
 
 import { setLooping, setPlaying, setRandom } from "../../../../redux/reducers/controlSlice"
-import { ButtonIcon } from "../../../../components/button"
-import { IconLoading } from "../../../../components/icons"
+import { ButtonIcon } from "../../../../components/Button"
+import { IconLoading } from "../../../../components/Icons"
 import { useChangeSong } from "../../../../hooks"
 import { useAppDispatch, useAppSelector } from "../../../../hooks/useRedux"
 import style from "./PlayerControl.module.scss"
diff --git a/client/src/layouts/components/Player/player-song-info/PlayerSongInfo.tsx b/client/src/layouts/components/Player/player-song-info/PlayerSongInfo.tsx
index eae92e0..1723cc1 100644
--- a/client/src/layouts/components/Player/player-song-info/PlayerSongInfo.tsx
+++ b/client/src/layouts/components/Player/player-song-info/PlayerSongInfo.tsx
@@ -3,8 +3,8 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import { BtnHeartSong, BtnThreeDotMedia } from "../../../../components/btn-action"
-import Image from "../../../../components/image"
-import { SubTitle, Title } from "../../../../components/info"
+import Image from "../../../../components/Image"
+import { SubTitle, Title } from "../../../../components/Info"
 import { DETAIL_PLAY_LIST } from "../../../../constants"
 import { useAppDispatch, useAppSelector } from "../../../../hooks/useRedux"
 import { setShowLyricSongModal } from "../../../../redux/reducers/lyricSlice"
diff --git a/client/src/layouts/components/Player/player-volume/PlayerVolume.tsx b/client/src/layouts/components/Player/player-volume/PlayerVolume.tsx
index e63ac07..47f16c5 100644
--- a/client/src/layouts/components/Player/player-volume/PlayerVolume.tsx
+++ b/client/src/layouts/components/Player/player-volume/PlayerVolume.tsx
@@ -1,7 +1,7 @@
 import clsx from "clsx"
 import { VscMute, VscUnmute } from "react-icons/vsc"
 
-import { ButtonIcon } from "../../../../components/button"
+import { ButtonIcon } from "../../../../components/Button"
 import { useVolumeControl } from "../../../../hooks"
 import { useAppSelector } from "../../../../hooks/useRedux"
 import style from "./PlayerVolume.module.scss"
diff --git a/client/src/layouts/components/Sidebar/Sidebar.tsx b/client/src/layouts/components/Sidebar/Sidebar.tsx
index 4bd700d..c742f57 100644
--- a/client/src/layouts/components/Sidebar/Sidebar.tsx
+++ b/client/src/layouts/components/Sidebar/Sidebar.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx"
 import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai"
 
 import { useAuthContext } from "../../../auth/AuthProvider"
-import { ButtonIcon } from "../../../components/button"
+import { ButtonIcon } from "../../../components/Button"
 import {
   IconDiscover,
   IconFollow,
@@ -16,7 +16,7 @@ import {
   IconRecent,
   IconSong,
   IconZingChart,
-} from "../../../components/icons"
+} from "../../../components/Icons"
 import {
   PERSONAL,
   RECENTLY,
diff --git a/client/src/layouts/components/Sidebar/btn-add-play-list/BtnAddPlayList.tsx b/client/src/layouts/components/Sidebar/btn-add-play-list/BtnAddPlayList.tsx
index 0cecdd2..ce96cf0 100644
--- a/client/src/layouts/components/Sidebar/btn-add-play-list/BtnAddPlayList.tsx
+++ b/client/src/layouts/components/Sidebar/btn-add-play-list/BtnAddPlayList.tsx
@@ -4,7 +4,7 @@ import { IoAdd } from "react-icons/io5"
 import { useNavigate } from "react-router-dom"
 
 import { useAuthContext } from "../../../../auth/AuthProvider"
-import { ButtonTitle } from "../../../../components/button"
+import { ButtonTitle } from "../../../../components/Button"
 import { LOGIN } from "../../../../constants"
 import { useAppSelector } from "../../../../hooks/useRedux"
 import { getToastWarn } from "../../../../utils/toast"
diff --git a/client/src/layouts/components/Sidebar/sidebar-header/SidebarHeader.tsx b/client/src/layouts/components/Sidebar/sidebar-header/SidebarHeader.tsx
index 802d37c..4471cae 100644
--- a/client/src/layouts/components/Sidebar/sidebar-header/SidebarHeader.tsx
+++ b/client/src/layouts/components/Sidebar/sidebar-header/SidebarHeader.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx"
 import { Link } from "react-router-dom"
 
 import images from "../../../../assets/images"
-import Image from "../../../../components/image"
+import Image from "../../../../components/Image"
 import { DISCOVER } from "../../../../constants"
 import { useAppSelector } from "../../../../hooks/useRedux"
 import style from "./SidebarHeader.module.scss"
diff --git a/client/src/pages/Artist/Artist.tsx b/client/src/pages/Artist/Artist.tsx
index 147b639..f897c3f 100644
--- a/client/src/pages/Artist/Artist.tsx
+++ b/client/src/pages/Artist/Artist.tsx
@@ -3,10 +3,10 @@ import React, { useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 
 import { BtnFollow } from "../../components/btn-action"
-import { CardDetail } from "../../components/card"
+import { CardDetail } from "../../components/Card"
 import HeaderPlayList from "../../components/header-play-list"
-import Image from "../../components/image"
-import { Paragraph } from "../../components/info"
+import Image from "../../components/Image"
+import { Paragraph } from "../../components/Info"
 import { PlayListAlbum, PlayListArtist, PlayListVideo } from "../../components/play-list"
 import { useScrollTop } from "../../hooks"
 import { CardIProps } from "../../interface"
diff --git a/client/src/pages/Artist/top-list-song/TopListSong.tsx b/client/src/pages/Artist/top-list-song/TopListSong.tsx
index bfdb848..bf94e60 100644
--- a/client/src/pages/Artist/top-list-song/TopListSong.tsx
+++ b/client/src/pages/Artist/top-list-song/TopListSong.tsx
@@ -3,7 +3,7 @@ import React from "react"
 
 import HeaderPlayList from "../../../components/header-play-list"
 import { MediaIProps } from "../../../interface"
-import Media from "../../../components/media"
+import Media from "../../../components/Media"
 import style from "./TopListSong.module.scss"
 
 interface TopListMediaIProps {
diff --git a/client/src/pages/Auth/Login.tsx b/client/src/pages/Auth/Login.tsx
index cfbbcda..04c16ba 100644
--- a/client/src/pages/Auth/Login.tsx
+++ b/client/src/pages/Auth/Login.tsx
@@ -4,9 +4,9 @@ import GoogleButton from "react-google-button"
 import { useNavigate } from "react-router-dom"
 
 import { useAuthContext } from "../../auth/AuthProvider"
-import { ButtonTitle } from "../../components/button"
-import { TabNav } from "../../components/tab"
-import { PopperWrapper, TabWrapper } from "../../components/wrapper"
+import { ButtonTitle } from "../../components/Button"
+import { TabNav } from "../../components/Tab"
+import { PopperWrapper, TabWrapper } from "../../components/Wrapper"
 import { DISCOVER, LOGIN, SIGN_UP } from "../../constants"
 import { useScrollTop } from "../../hooks"
 import { getToastSuccess, getToastWarn } from "../../utils/toast"
diff --git a/client/src/pages/Auth/SignUp.tsx b/client/src/pages/Auth/SignUp.tsx
index 5afb8c6..de97067 100644
--- a/client/src/pages/Auth/SignUp.tsx
+++ b/client/src/pages/Auth/SignUp.tsx
@@ -3,9 +3,9 @@ import React, { useEffect, useState } from "react"
 import GoogleButton from "react-google-button"
 import { useNavigate } from "react-router-dom"
 import { useAuthContext } from "../../auth/AuthProvider"
-import { ButtonTitle } from "../../components/button"
-import { TabNav } from "../../components/tab"
-import { PopperWrapper, TabWrapper } from "../../components/wrapper"
+import { ButtonTitle } from "../../components/Button"
+import { TabNav } from "../../components/Tab"
+import { PopperWrapper, TabWrapper } from "../../components/Wrapper"
 import { DISCOVER, LOGIN, SIGN_UP } from "../../constants"
 import { useScrollTop } from "../../hooks"
 import { getToastError, getToastSuccess } from "../../utils/toast"
diff --git a/client/src/pages/Auth/Update.tsx b/client/src/pages/Auth/Update.tsx
index 5917d95..a35d7f4 100644
--- a/client/src/pages/Auth/Update.tsx
+++ b/client/src/pages/Auth/Update.tsx
@@ -5,9 +5,9 @@ import { useNavigate } from "react-router-dom"
 import images from "../../assets/images"
 
 import { useAuthContext } from "../../auth/AuthProvider"
-import { ButtonTitle } from "../../components/button"
-import Image from "../../components/image"
-import { PopperWrapper } from "../../components/wrapper"
+import { ButtonTitle } from "../../components/Button"
+import Image from "../../components/Image"
+import { PopperWrapper } from "../../components/Wrapper"
 import { LOGIN } from "../../constants"
 import { useScrollTop } from "../../hooks"
 import { getToastWarn } from "../../utils/toast"
diff --git a/client/src/pages/Discover/Discover.tsx b/client/src/pages/Discover/Discover.tsx
index 34bbe9a..9eca1ed 100644
--- a/client/src/pages/Discover/Discover.tsx
+++ b/client/src/pages/Discover/Discover.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 import HeaderPlayList from "../../components/header-play-list"
 import { PlayListAlbum } from "../../components/play-list"
-import { SlideArtist, SlideBanner, SlideRadio } from "../../components/slide"
+import { SlideArtist, SlideBanner, SlideRadio } from "../../components/Slide"
 import { useScrollTop } from "../../hooks"
 import * as services from "../../services"
 import { getArrayPlayListEmpty } from "../../utils/song"
diff --git a/client/src/pages/Follow/Follow.tsx b/client/src/pages/Follow/Follow.tsx
index 2f3e71d..b81c056 100644
--- a/client/src/pages/Follow/Follow.tsx
+++ b/client/src/pages/Follow/Follow.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Helmet } from "react-helmet-async"
 
-import { SlideArtist } from "../../components/slide"
+import { SlideArtist } from "../../components/Slide"
 import { useScrollTop } from "../../hooks"
 import style from "./Follow.module.scss"
 
diff --git a/client/src/pages/MV/MV.tsx b/client/src/pages/MV/MV.tsx
index 56cfdf9..1495a2b 100644
--- a/client/src/pages/MV/MV.tsx
+++ b/client/src/pages/MV/MV.tsx
@@ -4,10 +4,10 @@ import { Helmet } from "react-helmet-async"
 import { HiOutlineMusicalNote } from "react-icons/hi2"
 import { VscListSelection } from "react-icons/vsc"
 
-import ButtonDropDown from "../../components/button/ButtonDropDown"
-import { CardVideo } from "../../components/card"
-import { TabNav } from "../../components/tab"
-import { TabWrapper } from "../../components/wrapper"
+import ButtonDropDown from "../../components/Button/ButtonDropDown"
+import { CardVideo } from "../../components/Card"
+import { TabNav } from "../../components/Tab"
+import { TabWrapper } from "../../components/Wrapper"
 import { KOREAN, INSTRUCMENTAL_MUSIC, MV as MV_ROUTER, US_UK, VIET_NAM } from "../../constants"
 import { useScrollTop } from "../../hooks"
 import { MediaIProps } from "../../interface"
diff --git a/client/src/pages/Personal/Empty.tsx b/client/src/pages/Personal/Empty.tsx
index 1e39eb5..3f6d7f2 100644
--- a/client/src/pages/Personal/Empty.tsx
+++ b/client/src/pages/Personal/Empty.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx"
 import React from "react"
 
 import images from "../../assets/images"
-import Image from "../../components/image"
+import Image from "../../components/Image"
 import style from "./Personal.module.scss"
 
 const Empty: React.FC = () => {
diff --git a/client/src/pages/Personal/Personal.tsx b/client/src/pages/Personal/Personal.tsx
index 60b3513..d97581b 100644
--- a/client/src/pages/Personal/Personal.tsx
+++ b/client/src/pages/Personal/Personal.tsx
@@ -2,10 +2,10 @@ import React from "react"
 import { Helmet } from "react-helmet-async"
 import { Outlet } from "react-router-dom"
 
-import { ButtonTitle } from "../../components/button"
+import { ButtonTitle } from "../../components/Button"
 import HeaderPlayList from "../../components/header-play-list"
-import { TabNav } from "../../components/tab"
-import { TabWrapper } from "../../components/wrapper"
+import { TabNav } from "../../components/Tab"
+import { TabWrapper } from "../../components/Wrapper"
 import { PERSONAL, RECENTLY, LIBRARY_PLAY_LIST, LIBRARY_SONG } from "../../constants"
 import { useScrollTop } from "../../hooks"
 import { getToastWarn } from "../../utils/toast"
diff --git a/client/src/pages/Personal/PersonalPlayList.tsx b/client/src/pages/Personal/PersonalPlayList.tsx
index e102534..40cefe4 100644
--- a/client/src/pages/Personal/PersonalPlayList.tsx
+++ b/client/src/pages/Personal/PersonalPlayList.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react"
 
 import { useAuthContext } from "../../auth/AuthProvider"
-import { CardAlbum } from "../../components/card"
+import { CardAlbum } from "../../components/Card"
 import { useScrollTop } from "../../hooks"
 import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { setPlayListLikedAlbum } from "../../redux/reducers/personalSlice"
diff --git a/client/src/pages/Personal/PersonalSong.tsx b/client/src/pages/Personal/PersonalSong.tsx
index 5a689a7..5aa75f4 100644
--- a/client/src/pages/Personal/PersonalSong.tsx
+++ b/client/src/pages/Personal/PersonalSong.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react"
 
 import { useAuthContext } from "../../auth/AuthProvider"
-import Media from "../../components/media"
+import Media from "../../components/Media"
 import { useScrollTop } from "../../hooks"
 import { useAppDispatch, useAppSelector } from "../../hooks/useRedux"
 import { setPlayListLikedSong } from "../../redux/reducers/personalSlice"
diff --git a/client/src/pages/Top100/Top100.tsx b/client/src/pages/Top100/Top100.tsx
index 06ad445..46cd146 100644
--- a/client/src/pages/Top100/Top100.tsx
+++ b/client/src/pages/Top100/Top100.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx"
 import React, { useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 
-import { ImgTop100 } from "../../components/icons"
+import { ImgTop100 } from "../../components/Icons"
 import { PlayListAlbum } from "../../components/play-list"
 import { useScrollTop } from "../../hooks"
 import * as services from "../../services"
diff --git a/client/src/pages/Video/Video.tsx b/client/src/pages/Video/Video.tsx
index 908821d..a015081 100644
--- a/client/src/pages/Video/Video.tsx
+++ b/client/src/pages/Video/Video.tsx
@@ -2,8 +2,8 @@ import clsx from "clsx"
 import React, { useEffect, useState } from "react"
 import { Link, useParams } from "react-router-dom"
 
-import Image from "../../components/image"
-import { Paragraph, SubTitle, Title } from "../../components/info"
+import Image from "../../components/Image"
+import { Paragraph, SubTitle, Title } from "../../components/Info"
 import { VIDEO as VIDEO_ROUTER } from "../../constants"
 import { useScrollTop } from "../../hooks"
 import * as services from "../../services"
diff --git a/client/src/pages/detail-play-list/DetailPlayList.tsx b/client/src/pages/detail-play-list/DetailPlayList.tsx
index 328cf59..b925e7d 100644
--- a/client/src/pages/detail-play-list/DetailPlayList.tsx
+++ b/client/src/pages/detail-play-list/DetailPlayList.tsx
@@ -5,10 +5,10 @@ import { BsFillPlayFill } from "react-icons/bs"
 import { useParams } from "react-router-dom"
 
 import { BtnHeartAlbum, BtnThreeDotCard } from "../../components/btn-action"
-import { ButtonTitle } from "../../components/button"
+import { ButtonTitle } from "../../components/Button"
 import HeaderPlayList from "../../components/header-play-list"
-import { SubTitle, Title } from "../../components/info"
-import Media from "../../components/media"
+import { SubTitle, Title } from "../../components/Info"
+import Media from "../../components/Media"
 import { PlayListArtist } from "../../components/play-list"
 import { useScrollTop } from "../../hooks"
 import { ArtistIProps, MediaIProps } from "../../interface"
diff --git a/client/src/pages/detail-play-list/thumbnail-header/ThumbnailHeader.tsx b/client/src/pages/detail-play-list/thumbnail-header/ThumbnailHeader.tsx
index 6a80370..b2bcba6 100644
--- a/client/src/pages/detail-play-list/thumbnail-header/ThumbnailHeader.tsx
+++ b/client/src/pages/detail-play-list/thumbnail-header/ThumbnailHeader.tsx
@@ -1,8 +1,8 @@
 import clsx from "clsx"
 import React from "react"
 
-import { AlphaDetailPlayList } from "../../../components/alpha"
-import Image from "../../../components/image"
+import { AlphaDetailPlayList } from "../../../components/Alpha"
+import Image from "../../../components/Image"
 import { useAppSelector } from "../../../hooks/useRedux"
 import style from "./ThumbnailHeader.module.scss"
 
diff --git a/client/src/pages/index.ts b/client/src/pages/index.ts
index cc5c9df..6553af2 100644
--- a/client/src/pages/index.ts
+++ b/client/src/pages/index.ts
@@ -1,21 +1,21 @@
-export { default as Personal } from "./personal/Personal"
-export { default as PersonalPlayList } from "./personal/PersonalPlayList"
-export { default as PersonalSong } from "./personal/PersonalSong"
-export { default as PersonalRecent } from "./personal/PersonalRecent"
-export { default as Discover } from "./discover/Discover"
+export { default as Personal } from "./Personal/Personal"
+export { default as PersonalPlayList } from "./Personal/PersonalPlayList"
+export { default as PersonalSong } from "./Personal/PersonalSong"
+export { default as PersonalRecent } from "./Personal/PersonalRecent"
+export { default as Discover } from "./Discover/Discover"
 export { default as ZingChart } from "./zing-chart/ZingChart"
 export { default as ZingChartWeek } from "./zing-chart/ZingChartWeek"
-export { default as Radio } from "./radio/Radio"
-export { default as Follow } from "./follow/Follow"
+export { default as Radio } from "./Radio/Radio"
+export { default as Follow } from "./Follow/Follow"
 export { default as MusicNew } from "./music-new/MusicNew"
 export { default as MusicKind } from "./music-kind/MusicKind"
-export { default as Top100 } from "./top100/Top100"
-export { default as Mv } from "./mv/MV"
+export { default as Top100 } from "./Top100/Top100"
+export { default as Mv } from "./MV/MV"
 export { default as Notfound } from "./not-found/Notfound"
-export { default as SignUp } from "./auth/SignUp"
-export { default as Login } from "./auth/Login"
-export { default as Update } from "./auth/Update"
+export { default as SignUp } from "./Auth/SignUp"
+export { default as Login } from "./Auth/Login"
+export { default as Update } from "./Auth/Update"
 
 export { default as DetailPlayList } from "./detail-play-list/DetailPlayList"
 export { default as Artist } from "./Artist/Artist"
-export { default as Video } from "./video/Video"
+export { default as Video } from "./Video/Video"
diff --git a/client/src/pages/music-kind/MusicKind.tsx b/client/src/pages/music-kind/MusicKind.tsx
index 1e2629b..068e258 100644
--- a/client/src/pages/music-kind/MusicKind.tsx
+++ b/client/src/pages/music-kind/MusicKind.tsx
@@ -4,7 +4,7 @@ import { Helmet } from "react-helmet-async"
 import images from "../../assets/images"
 
 import HeaderPlayList from "../../components/header-play-list"
-import Image from "../../components/image"
+import Image from "../../components/Image"
 import { useScrollTop } from "../../hooks"
 import { getToastWarn } from "../../utils/toast"
 import style from "./MusicKind.module.scss"
diff --git a/client/src/pages/music-new/MusicNew.tsx b/client/src/pages/music-new/MusicNew.tsx
index dc81edf..174a563 100644
--- a/client/src/pages/music-new/MusicNew.tsx
+++ b/client/src/pages/music-new/MusicNew.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 
 import HeaderPlayList from "../../components/header-play-list"
-import Media from "../../components/media"
+import Media from "../../components/Media"
 import { useScrollTop } from "../../hooks"
 import * as services from "../../services"
 import { getArraySongEmpty } from "../../utils/song"
diff --git a/client/src/pages/not-found/Notfound.tsx b/client/src/pages/not-found/Notfound.tsx
index dd4c73b..c05edba 100644
--- a/client/src/pages/not-found/Notfound.tsx
+++ b/client/src/pages/not-found/Notfound.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { Helmet } from "react-helmet-async"
 
 import images from "../../assets/images"
-import Image from "../../components/image"
+import Image from "../../components/Image"
 import style from "./NotFound.module.scss"
 
 const Notfound: React.FC = () => {
diff --git a/client/src/pages/zing-chart/ZingChart.tsx b/client/src/pages/zing-chart/ZingChart.tsx
index 3ef5e12..6122171 100644
--- a/client/src/pages/zing-chart/ZingChart.tsx
+++ b/client/src/pages/zing-chart/ZingChart.tsx
@@ -3,9 +3,9 @@ import { useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 
 import images from "../../assets/images"
-import { AlphaPage } from "../../components/alpha"
-import { ButtonTitle } from "../../components/button"
-import Media from "../../components/media/Media"
+import { AlphaPage } from "../../components/Alpha"
+import { ButtonTitle } from "../../components/Button"
+import Media from "../../components/Media/Media"
 import { useScrollTop } from "../../hooks"
 import * as services from "../../services"
 import { LineChart } from "./chart"
diff --git a/client/src/pages/zing-chart/ZingChartWeek.tsx b/client/src/pages/zing-chart/ZingChartWeek.tsx
index db53443..7daf1df 100644
--- a/client/src/pages/zing-chart/ZingChartWeek.tsx
+++ b/client/src/pages/zing-chart/ZingChartWeek.tsx
@@ -3,11 +3,11 @@ import React, { useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 
 import images from "../../assets/images"
-import { AlphaPage } from "../../components/alpha"
+import { AlphaPage } from "../../components/Alpha"
 import HeaderPlayList from "../../components/header-play-list"
-import Media from "../../components/media"
-import { TabNav } from "../../components/tab"
-import { TabWrapper } from "../../components/wrapper"
+import Media from "../../components/Media"
+import { TabNav } from "../../components/Tab"
+import { TabWrapper } from "../../components/Wrapper"
 import { ZING_CHART, ZING_CHART_WEEK } from "../../constants"
 import { useScrollTop } from "../../hooks"
 import * as services from "../../services"
diff --git a/client/src/pages/zing-chart/week-chart-item/WeekChartItem.tsx b/client/src/pages/zing-chart/week-chart-item/WeekChartItem.tsx
index 189061e..19eace0 100644
--- a/client/src/pages/zing-chart/week-chart-item/WeekChartItem.tsx
+++ b/client/src/pages/zing-chart/week-chart-item/WeekChartItem.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 
-import { ButtonTitle } from "../../../components/button"
+import { ButtonTitle } from "../../../components/Button"
 import Title from "../../../components/header-play-list"
-import Media from "../../../components/media/Media"
+import Media from "../../../components/Media/Media"
 import { ZING_CHART_WEEK } from "../../../constants"
 import { getTypeTab } from "../../../utils/common"
 import style from "./WeekChartItem.module.scss"
diff --git a/client/yarn.lock b/client/yarn.lock
index 8355fc6..9cf8f5d 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1029,7 +1029,7 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.20.13"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
   integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
@@ -2144,15 +2144,17 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-"@reduxjs/toolkit@^1.9.1":
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.2.tgz#4cd153491118038e2eebcb63b2264e42a8a2d74c"
-  integrity sha512-5ZAZ7hwAKWSii5T6NTPmgIBUqyVdlDs+6JjThz6J6dmHLDm6zCzv2OjHIFAi3Vvs1qjmXU0bm6eBojukYXjVMQ==
+"@reduxjs/toolkit@^2.0.0":
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.8.1.tgz#85a50572627bce1e6cfbc3803b31a3290f5f344d"
+  integrity sha512-GLjHS13LiBdiuxSJvfWs3+Cx5yt97mCbuVlDteTusS6VRksPhoWviO8L1e3Re1G94m6lkw/l4pjEEyyNaGf19g==
   dependencies:
-    immer "^9.0.16"
-    redux "^4.2.0"
-    redux-thunk "^2.4.2"
-    reselect "^4.1.7"
+    "@standard-schema/spec" "^1.0.0"
+    "@standard-schema/utils" "^0.3.0"
+    immer "^10.0.3"
+    redux "^5.0.1"
+    redux-thunk "^3.1.0"
+    reselect "^5.1.0"
 
 "@remix-run/router@1.3.1":
   version "1.3.1"
@@ -2225,6 +2227,16 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@standard-schema/spec@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/spec/-/spec-1.0.0.tgz#f193b73dc316c4170f2e82a881da0f550d551b9c"
+  integrity sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==
+
+"@standard-schema/utils@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@standard-schema/utils/-/utils-0.3.0.tgz#3d5e608f16c2390c10528e98e59aef6bf73cae7b"
+  integrity sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -2338,20 +2350,6 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@testing-library/dom@^8.5.0":
-  version "8.20.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.0.tgz#914aa862cef0f5e89b98cc48e3445c4c921010f6"
-  integrity sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^5.0.1"
-    aria-query "^5.0.0"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.9"
-    lz-string "^1.4.4"
-    pretty-format "^27.0.2"
-
 "@testing-library/jest-dom@^5.16.5":
   version "5.16.5"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
@@ -2367,21 +2365,17 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@^13.4.0":
-  version "13.4.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.4.0.tgz#6a31e3bf5951615593ad984e96b9e5e2d9380966"
-  integrity sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==
+"@testing-library/react@^16.0.0":
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.3.0.tgz#3a85bb9bdebf180cd76dba16454e242564d598a6"
+  integrity sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.5.0"
-    "@types/react-dom" "^18.0.0"
 
-"@testing-library/user-event@^13.5.0":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
+"@testing-library/user-event@^14.0.0":
+  version "14.6.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.6.1.tgz#13e09a32d7a8b7060fe38304788ebf4197cd2149"
+  integrity sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==
 
 "@tippyjs/react@^4.2.6":
   version "4.2.6"
@@ -2400,11 +2394,6 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
-"@types/aria-query@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
-  integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
-
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.0.tgz#61bc5a4cae505ce98e1e36c5445e4bee060d8891"
@@ -2532,14 +2521,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -2652,7 +2633,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.10":
+"@types/react-dom@^18.0.10":
   version "18.0.10"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
   integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==
@@ -2736,10 +2717,10 @@
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
   integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
 
-"@types/use-sync-external-store@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
-  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+"@types/use-sync-external-store@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz#60be8d21baab8c305132eb9cb912ed497852aadc"
+  integrity sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==
 
 "@types/ws@^8.5.1":
   version "8.5.4"
@@ -4576,7 +4557,7 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+dom-accessibility-api@^0.5.6:
   version "0.5.16"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
@@ -6230,13 +6211,6 @@ hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -6429,7 +6403,12 @@ image-size@~0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
 
-immer@^9.0.16, immer@^9.0.7:
+immer@^10.0.3:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc"
+  integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
+
+immer@^9.0.7:
   version "9.0.19"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.19.tgz#67fb97310555690b5f9cd8380d38fc0aabb6b38b"
   integrity sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ==
@@ -7826,11 +7805,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lz-string@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
-  integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
-
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -9137,7 +9111,7 @@ pretty-error@^4.0.0:
     lodash "^4.17.20"
     renderkid "^3.0.0"
 
-pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.5.1:
+pretty-format@^27.0.0, pretty-format@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
   integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
@@ -9382,10 +9356,10 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-fast-compare@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
 react-google-button@^0.7.2:
   version "0.7.2"
@@ -9394,15 +9368,13 @@ react-google-button@^0.7.2:
   dependencies:
     prop-types "^15.7.2"
 
-react-helmet-async@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
-  integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
+react-helmet-async@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec"
+  integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==
   dependencies:
-    "@babel/runtime" "^7.12.5"
     invariant "^2.2.4"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.2.0"
+    react-fast-compare "^3.2.2"
     shallowequal "^1.1.0"
 
 react-icons@^4.7.1:
@@ -9410,7 +9382,7 @@ react-icons@^4.7.1:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345"
   integrity sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9430,17 +9402,13 @@ react-loading-skeleton@^3.1.0:
   resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz#ce22942f1af77bfd60854417075792367f54f41e"
   integrity sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==
 
-react-redux@^8.0.5:
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
-  integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==
+react-redux@^9.0.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.2.0.tgz#96c3ab23fb9a3af2cb4654be4b51c989e32366f5"
+  integrity sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==
   dependencies:
-    "@babel/runtime" "^7.12.1"
-    "@types/hoist-non-react-statics" "^3.3.1"
-    "@types/use-sync-external-store" "^0.0.3"
-    hoist-non-react-statics "^3.3.2"
-    react-is "^18.0.0"
-    use-sync-external-store "^1.0.0"
+    "@types/use-sync-external-store" "^0.0.6"
+    use-sync-external-store "^1.4.0"
 
 react-refresh@^0.11.0:
   version "0.11.0"
@@ -9593,17 +9561,15 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux-thunk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
-  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
 
-redux@^4.2.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
-  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
+redux@^5.0.0, redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
 
 reflect.getprototypeof@^1.0.4:
   version "1.0.6"
@@ -9731,6 +9697,11 @@ reselect@^4.1.7:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.7.tgz#56480d9ff3d3188970ee2b76527bd94a95567a42"
   integrity sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==
 
+reselect@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
+  integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
+
 reserved-words@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
@@ -11019,10 +10990,10 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-use-sync-external-store@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+use-sync-external-store@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"
+  integrity sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==
 
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"