diff --git a/web/src/components/DialogTorrentDetailsContent/index.jsx b/web/src/components/DialogTorrentDetailsContent/index.jsx
index 93bb969..09f5207 100644
--- a/web/src/components/DialogTorrentDetailsContent/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/index.jsx
@@ -1,18 +1,9 @@
 import { NoImageIcon } from 'icons'
-import { getPeerString, humanizeSize } from 'utils/Utils'
+import { humanizeSize } from 'utils/Utils'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { useEffect, useState } from 'react'
 import { Button } from '@material-ui/core'
 import ptt from 'parse-torrent-title'
-import {
-  ArrowDownward as ArrowDownwardIcon,
-  ArrowUpward as ArrowUpwardIcon,
-  SwapVerticalCircle as SwapVerticalCircleIcon,
-  ViewAgenda as ViewAgendaIcon,
-  Widgets as WidgetsIcon,
-  PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon,
-  Build as BuildIcon,
-} from '@material-ui/icons'
 import axios from 'axios'
 import { playlistTorrHost, streamHost, torrentsHost, viewedHost } from 'utils/Hosts'
 import { GETTING_INFO, IN_DB } from 'torrentStates'
@@ -28,7 +19,7 @@ import {
   Poster,
   SectionTitle,
   SectionSubName,
-  StatisticsWrapper,
+  WidgetWrapper,
   LoadingProgress,
   SectionHeader,
   CacheSection,
@@ -37,7 +28,15 @@ import {
   SmallLabel,
   Table,
 } from './style'
-import StatisticsField from './StatisticsField'
+import {
+  DownlodSpeedWidget,
+  UploadSpeedWidget,
+  PeersWidget,
+  SizeWidget,
+  PiecesCountWidget,
+  PiecesLengthWidget,
+  StatusWidget,
+} from './widgets'
 
 const shortenText = (text, count) => text.slice(0, count) + (text.length > count ? '...' : '')
 
@@ -120,64 +119,23 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
         'loading'
       ) : isDetailedCacheView ? (
         <DetailedTorrentCacheViewWrapper>
-          <StatisticsWrapper>
-            <StatisticsField
-              title='Download speed'
-              value={humanizeSize(downloadSpeed) || '0 B'}
-              iconBg='#118f00'
-              valueBg='#13a300'
-              icon={ArrowDownwardIcon}
-            />
+          <div>
+            <SectionTitle mb={20}>Data</SectionTitle>
+            <WidgetWrapper>
+              <DownlodSpeedWidget data={downloadSpeed} />
+              <UploadSpeedWidget data={uploadSpeed} />
+              <PeersWidget data={torrent} />
+              <SizeWidget data={torrentSize} />
+              <PiecesCountWidget data={PiecesCount} />
+              <PiecesLengthWidget data={PiecesLength} />
+              <StatusWidget data={statString} />
+            </WidgetWrapper>
+          </div>
 
-            <StatisticsField
-              title='Upload speed'
-              value={humanizeSize(uploadSpeed) || '0 B'}
-              iconBg='#0146ad'
-              valueBg='#0058db'
-              icon={ArrowUpwardIcon}
-            />
-
-            <StatisticsField
-              title='Peers'
-              value={getPeerString(torrent)}
-              iconBg='#cdc118'
-              valueBg='#d8cb18'
-              icon={SwapVerticalCircleIcon}
-            />
-
-            <StatisticsField
-              title='Torrent size'
-              value={humanizeSize(torrentSize)}
-              iconBg='#01a292'
-              valueBg='#01ad9b'
-              icon={ViewAgendaIcon}
-            />
-
-            <StatisticsField
-              title='Pieces count'
-              value={PiecesCount}
-              iconBg='#b6c95e'
-              valueBg='#c0d076'
-              icon={WidgetsIcon}
-            />
-
-            <StatisticsField
-              title='Pieces length'
-              value={humanizeSize(PiecesLength)}
-              iconBg='#0982c8'
-              valueBg='#098cd7'
-              icon={PhotoSizeSelectSmallIcon}
-            />
-
-            <StatisticsField
-              title='Torrent status'
-              value={statString}
-              iconBg='#aea25b'
-              valueBg='#b4aa6e'
-              icon={BuildIcon}
-            />
-          </StatisticsWrapper>
-          <TorrentCache cache={cache} cacheMap={cacheMap} />
+          <div>
+            <SectionTitle mb={20}>Cache</SectionTitle>
+            <TorrentCache cache={cache} cacheMap={cacheMap} />
+          </div>
         </DetailedTorrentCacheViewWrapper>
       ) : (
         <DialogContentGrid>
@@ -194,39 +152,12 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                 <SectionTitle mb={20}>{shortenText(title, 50)}</SectionTitle>
               )}
 
-              <StatisticsWrapper>
-                <StatisticsField
-                  title='Download speed'
-                  value={humanizeSize(downloadSpeed) || '0 B'}
-                  iconBg='#118f00'
-                  valueBg='#13a300'
-                  icon={ArrowDownwardIcon}
-                />
-
-                <StatisticsField
-                  title='Upload speed'
-                  value={humanizeSize(uploadSpeed) || '0 B'}
-                  iconBg='#0146ad'
-                  valueBg='#0058db'
-                  icon={ArrowUpwardIcon}
-                />
-
-                <StatisticsField
-                  title='Peers'
-                  value={getPeerString(torrent)}
-                  iconBg='#cdc118'
-                  valueBg='#d8cb18'
-                  icon={SwapVerticalCircleIcon}
-                />
-
-                <StatisticsField
-                  title='Torrent size'
-                  value={humanizeSize(torrentSize)}
-                  iconBg='#9b01ad'
-                  valueBg='#ac03bf'
-                  icon={ViewAgendaIcon}
-                />
-              </StatisticsWrapper>
+              <WidgetWrapper>
+                <DownlodSpeedWidget data={downloadSpeed} />
+                <UploadSpeedWidget data={uploadSpeed} />
+                <PeersWidget data={torrent} />
+                <SizeWidget data={torrentSize} />
+              </WidgetWrapper>
 
               <Divider />
 
diff --git a/web/src/components/DialogTorrentDetailsContent/style.js b/web/src/components/DialogTorrentDetailsContent/style.js
index 3ae704f..fe62ab2 100644
--- a/web/src/components/DialogTorrentDetailsContent/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/style.js
@@ -91,12 +91,15 @@ export const SectionHeader = styled.div`
 `
 
 export const DetailedTorrentCacheViewWrapper = styled.div`
-  padding: 40px;
   overflow: auto;
   min-height: 80vh;
+  padding: 40px;
+  > :not(:last-child) {
+    padding-bottom: 50px;
+  }
 `
 
-export const StatisticsWrapper = styled.div`
+export const WidgetWrapper = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(max-content, 220px));
   gap: 20px;
diff --git a/web/src/components/DialogTorrentDetailsContent/widgets.jsx b/web/src/components/DialogTorrentDetailsContent/widgets.jsx
new file mode 100644
index 0000000..6a59f0c
--- /dev/null
+++ b/web/src/components/DialogTorrentDetailsContent/widgets.jsx
@@ -0,0 +1,68 @@
+import {
+  ArrowDownward as ArrowDownwardIcon,
+  ArrowUpward as ArrowUpwardIcon,
+  SwapVerticalCircle as SwapVerticalCircleIcon,
+  ViewAgenda as ViewAgendaIcon,
+  Widgets as WidgetsIcon,
+  PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon,
+  Build as BuildIcon,
+} from '@material-ui/icons'
+import { getPeerString, humanizeSize } from 'utils/Utils'
+
+import StatisticsField from './StatisticsField'
+
+export const DownlodSpeedWidget = ({ data }) => (
+  <StatisticsField
+    title='Download speed'
+    value={humanizeSize(data) || '0 B'}
+    iconBg='#118f00'
+    valueBg='#13a300'
+    icon={ArrowDownwardIcon}
+  />
+)
+
+export const UploadSpeedWidget = ({ data }) => (
+  <StatisticsField
+    title='Upload speed'
+    value={humanizeSize(data) || '0 B'}
+    iconBg='#0146ad'
+    valueBg='#0058db'
+    icon={ArrowUpwardIcon}
+  />
+)
+
+export const PeersWidget = ({ data }) => (
+  <StatisticsField
+    title='Peers'
+    value={getPeerString(data)}
+    iconBg='#cdc118'
+    valueBg='#d8cb18'
+    icon={SwapVerticalCircleIcon}
+  />
+)
+
+export const PiecesCountWidget = ({ data }) => (
+  <StatisticsField title='Pieces count' value={data} iconBg='#b6c95e' valueBg='#c0d076' icon={WidgetsIcon} />
+)
+export const PiecesLengthWidget = ({ data }) => (
+  <StatisticsField
+    title='Pieces length'
+    value={humanizeSize(data)}
+    iconBg='#0982c8'
+    valueBg='#098cd7'
+    icon={PhotoSizeSelectSmallIcon}
+  />
+)
+export const StatusWidget = ({ data }) => (
+  <StatisticsField title='Torrent status' value={data} iconBg='#aea25b' valueBg='#b4aa6e' icon={BuildIcon} />
+)
+
+export const SizeWidget = ({ data }) => (
+  <StatisticsField
+    title='Torrent size'
+    value={humanizeSize(data)}
+    iconBg='#9b01ad'
+    valueBg='#ac03bf'
+    icon={ViewAgendaIcon}
+  />
+)