diff --git a/web/src/components/App/index.jsx b/web/src/components/App/index.jsx
index 83dbd7d..52ef5ac 100644
--- a/web/src/components/App/index.jsx
+++ b/web/src/components/App/index.jsx
@@ -7,6 +7,8 @@ import {
   Brightness4 as Brightness4Icon,
   Brightness5 as Brightness5Icon,
   BrightnessAuto as BrightnessAutoIcon,
+  Sort as SortIcon,
+  SortByAlpha as SortByAlphaIcon,
 } from '@material-ui/icons'
 import { echoHost } from 'utils/Hosts'
 import Div100vh from 'react-div-100vh'
@@ -47,6 +49,9 @@ export default function App() {
     onError: () => setIsOffline(true),
     onSuccess: () => setIsOffline(false),
   })
+  const [sortABC, setSortABC] = useState(false)
+  const handleClickSortABC = () => setSortABC(true)
+  const handleClickSortDate = () => setSortABC(false)
 
   useEffect(() => {
     axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
@@ -76,8 +81,12 @@ export default function App() {
                   </Typography>
 
                   <div
-                    style={{ justifySelf: 'end', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}
+                    style={{ justifySelf: 'end', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px' }}
                   >
+                    <HeaderToggle onClick={() => (sortABC === true ? handleClickSortDate() : handleClickSortABC())}>
+                      {sortABC === true ? <SortByAlphaIcon /> : <SortIcon />}
+                    </HeaderToggle>
+
                     <HeaderToggle
                       onClick={() => {
                         if (currentThemeMode === THEME_MODES.LIGHT) updateThemeMode(THEME_MODES.DARK)
@@ -115,7 +124,7 @@ export default function App() {
                   setIsDonationDialogOpen={setIsDonationDialogOpen}
                 />
 
-                <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
+                <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} sortABC={sortABC} />
 
                 <PWAFooter
                   isOffline={isOffline}
diff --git a/web/src/components/TorrentList/index.jsx b/web/src/components/TorrentList/index.jsx
index aae835c..47fb714 100644
--- a/web/src/components/TorrentList/index.jsx
+++ b/web/src/components/TorrentList/index.jsx
@@ -5,7 +5,7 @@ import { TorrentListWrapper, CenteredGrid } from 'components/App/style'
 import NoServerConnection from './NoServerConnection'
 import AddFirstTorrent from './AddFirstTorrent'
 
-export default function TorrentList({ isOffline, isLoading, torrents }) {
+export default function TorrentList({ isOffline, isLoading, sortABC, torrents }) {
   if (isLoading || isOffline || !torrents.length) {
     return (
       <CenteredGrid>
@@ -20,7 +20,15 @@ export default function TorrentList({ isOffline, isLoading, torrents }) {
     )
   }
 
-  return (
+  return sortABC ? (
+    <TorrentListWrapper>
+      {torrents
+        .sort((a, b) => a.title > b.title)
+        .map(torrent => (
+          <TorrentCard key={torrent.hash} torrent={torrent} />
+        ))}
+    </TorrentListWrapper>
+  ) : (
     <TorrentListWrapper>
       {torrents.map(torrent => (
         <TorrentCard key={torrent.hash} torrent={torrent} />