diff --git a/web/package.json b/web/package.json
index 7984c45..958db46 100644
--- a/web/package.json
+++ b/web/package.json
@@ -19,7 +19,8 @@
     "react-konva": "^17.0.2-4",
     "react-measure": "^2.5.2",
     "react-scripts": "4.0.3",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5.3.0",
+    "uuid": "^8.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache.jsx b/web/src/components/DialogTorrentDetailsContent/TorrentCache.jsx
index 33ae953..ade4057 100644
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache.jsx
@@ -3,13 +3,14 @@ import DialogContent from '@material-ui/core/DialogContent'
 import { Stage, Layer } from 'react-konva'
 import Measure from 'react-measure'
 import isEqual from 'lodash/isEqual'
+import { v4 as uuidv4 } from 'uuid'
 
 import SingleBlock from './SingleBlock'
 import { useCreateCacheMap } from './customHooks'
 
 const TorrentCache = memo(
   ({ cache, isMini }) => {
-    const [dimensions, setDimensions] = useState({ width: -1, height: -1 })
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
     const [stageSettings, setStageSettings] = useState({
       boxHeight: null,
       strokeWidth: null,
@@ -41,9 +42,16 @@ const TorrentCache = memo(
     const amountOfBlocksToRenderInShortView =
       preloadPiecesAmount === piecesInOneRow
         ? preloadPiecesAmount - 1
-        : preloadPiecesAmount + piecesInOneRow - (preloadPiecesAmount % piecesInOneRow) - 1
+        : preloadPiecesAmount + piecesInOneRow - (preloadPiecesAmount % piecesInOneRow) - 1 || 0
     const amountOfRows = Math.ceil((isMini ? amountOfBlocksToRenderInShortView : cacheMap.length) / piecesInOneRow)
-    let activeId = null
+    const activeId = null
+
+    const cacheMapWithoutEmptyBlocks = cacheMap.filter(({ isComplete, inProgress }) => inProgress || isComplete)
+    const extraEmptyBlocksForFillingLine =
+      cacheMapWithoutEmptyBlocks.length < amountOfBlocksToRenderInShortView
+        ? new Array(amountOfBlocksToRenderInShortView - cacheMapWithoutEmptyBlocks.length + 1).fill({})
+        : []
+    const shortCacheMap = [...cacheMapWithoutEmptyBlocks, ...extraEmptyBlocksForFillingLine]
 
     return (
       <Measure bounds onResize={({ bounds }) => setDimensions(bounds)}>
@@ -57,45 +65,46 @@ const TorrentCache = memo(
                 height={stageOffset + blockSizeWithMargin * amountOfRows || 0}
               >
                 <Layer>
-                  {cacheMap.map(({ id, percentage, isComplete, inProgress, isActive, isReaderRange }) => {
-                    const currentRow = Math.floor((isMini ? id - activeId : id) / piecesInOneRow)
+                  {isMini
+                    ? shortCacheMap.map(({ percentage, isComplete, inProgress, isActive, isReaderRange }, i) => {
+                        const currentRow = Math.floor(i / piecesInOneRow)
+                        const shouldBeRendered = inProgress || isComplete || i <= amountOfBlocksToRenderInShortView
 
-                    // -------- related only for short view -------
-                    if (isActive) activeId = id
-                    const shouldBeRendered =
-                      isActive || (id - activeId <= amountOfBlocksToRenderInShortView && id - activeId >= 0)
-                    // --------------------------------------------
+                        return (
+                          shouldBeRendered && (
+                            <SingleBlock
+                              key={uuidv4()}
+                              x={(i % piecesInOneRow) * blockSizeWithMargin}
+                              y={currentRow * blockSizeWithMargin}
+                              percentage={percentage}
+                              inProgress={inProgress}
+                              isComplete={isComplete}
+                              isReaderRange={isReaderRange}
+                              isActive={isActive}
+                              boxHeight={boxHeight}
+                              strokeWidth={strokeWidth}
+                            />
+                          )
+                        )
+                      })
+                    : cacheMap.map(({ id, percentage, isComplete, inProgress, isActive, isReaderRange }) => {
+                        const currentRow = Math.floor((isMini ? id - activeId : id) / piecesInOneRow)
 
-                    return isMini ? (
-                      shouldBeRendered && (
-                        <SingleBlock
-                          key={id}
-                          x={((id - activeId) % piecesInOneRow) * blockSizeWithMargin}
-                          y={currentRow * blockSizeWithMargin}
-                          percentage={percentage}
-                          inProgress={inProgress}
-                          isComplete={isComplete}
-                          isReaderRange={isReaderRange}
-                          isActive={isActive}
-                          boxHeight={boxHeight}
-                          strokeWidth={strokeWidth}
-                        />
-                      )
-                    ) : (
-                      <SingleBlock
-                        key={id}
-                        x={(id % piecesInOneRow) * blockSizeWithMargin}
-                        y={currentRow * blockSizeWithMargin}
-                        percentage={percentage}
-                        inProgress={inProgress}
-                        isComplete={isComplete}
-                        isReaderRange={isReaderRange}
-                        isActive={isActive}
-                        boxHeight={boxHeight}
-                        strokeWidth={strokeWidth}
-                      />
-                    )
-                  })}
+                        return (
+                          <SingleBlock
+                            key={uuidv4()}
+                            x={(id % piecesInOneRow) * blockSizeWithMargin}
+                            y={currentRow * blockSizeWithMargin}
+                            percentage={percentage}
+                            inProgress={inProgress}
+                            isComplete={isComplete}
+                            isReaderRange={isReaderRange}
+                            isActive={isActive}
+                            boxHeight={boxHeight}
+                            strokeWidth={strokeWidth}
+                          />
+                        )
+                      })}
                 </Layer>
               </Stage>
             </DialogContent>
diff --git a/web/yarn.lock b/web/yarn.lock
index 96ed686..94b3cbc 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -12428,7 +12428,7 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0:
+uuid@^8.3.0, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==