diff --git a/css/main.css b/css/main.css
index 0689c61..4b4da37 100644
--- a/css/main.css
+++ b/css/main.css
@@ -358,7 +358,7 @@ ul {
 #search_section {
   position: relative;
   display: grid;
-  gap: 1rem;
+  gap: 0.5rem;
   padding: 4rem 0;
   justify-items: center;
 }
@@ -371,6 +371,7 @@ ul {
 .app-name {
   font-weight: 500;
   margin-bottom: 1rem;
+  font-size: 0.9rem;
   color: rgba(var(--text-color), 0.7);
 }
 
@@ -396,7 +397,6 @@ ul {
   gap: 0 1rem;
   align-items: center;
   grid-template-columns: auto 1fr auto;
-  grid-template-areas: "icon title button" "icon tags button";
   cursor: pointer;
   padding: 1rem;
   border-radius: 0.3rem;
@@ -406,20 +406,16 @@ ul {
 .torrent-card .torrent-type-icon {
   padding: 0.8rem;
 }
-.torrent-card__icon {
-  grid-area: icon;
-}
 .torrent-card__icon .icon {
   height: 1.4rem;
   width: 1.4rem;
 }
 .torrent-card__title {
   font-weight: 600;
-  grid-area: title;
   font-size: 1.1rem;
+  margin-bottom: 0.5rem;
 }
 .torrent-card__tags, .torrent-card__uploader {
-  grid-area: tags;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -438,7 +434,6 @@ ul {
   font-weight: 500;
 }
 .torrent-card__download-button {
-  grid-area: button;
   justify-self: flex-end;
   align-self: flex-start;
   background-color: rgba(var(--text-color), 0.1);
@@ -448,6 +443,34 @@ ul {
   margin-right: 0.5rem;
 }
 
+.progress-indicator {
+  justify-self: flex-end;
+  height: 2.3rem;
+  padding: 0 0.6rem;
+}
+
+.progress-percent {
+  font-size: 0.9rem;
+  font-weight: 500;
+  min-width: 6rem;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.progress-loader {
+  height: 1.2rem;
+  width: 1.2rem;
+  fill: none;
+  padding: 0.1rem;
+  stroke-width: 12;
+  overflow: visible;
+  margin-right: 0.5rem;
+  stroke-dasharray: 201;
+  stroke-dashoffset: 201;
+  transform: rotate(-90deg);
+  stroke: var(--accent-color);
+  transition: stroke-dashoffset 0.3s;
+}
+
 #torrent_popup {
   --width: min(56rem, 100%);
 }
@@ -544,23 +567,23 @@ ul {
 
   .torrent-card {
     grid-template-columns: auto 1fr;
-    grid-template-areas: "icon title" "icon tags" "icon button";
   }
   .torrent-card__icon {
     margin: 0;
   }
   .torrent-card__title {
-    font-size: 1rem;
+    font-size: 0.9rem;
   }
   .torrent-card__tags, .torrent-card__uploader {
-    margin-top: 0.5rem;
     font-size: 0.8rem;
   }
   .torrent-card__description {
     display: none;
   }
-  .torrent-card__download-button {
+  .torrent-card__download-button,
+.torrent-card .progress-indicator {
     margin-top: 1rem;
+    grid-column: 2/3;
   }
 
   #torrent_type_icon {
diff --git a/css/main.min.css b/css/main.min.css
index 90ebbe1..e865fd4 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-a:any-link,button{position:relative;display:inline-flex;background:0 0;outline:0;font-weight:500}a,a:any-link{color:inherit;text-decoration:none}.hide,.ripple{pointer-events:none}.app-name,a:any-link,button{font-weight:500}*{padding:0;margin:0;box-sizing:border-box;font-family:Inter,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#304FFE;--light-shade:rgba(var(--text-color), 0.06);--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#F6f6f6;--error-color:red;--green:#00843b;color:rgba(var(--text-color),1);background:var(--background-color)}body[data-theme=dark]{--green:#13ff5a;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--error-color:rgb(255, 106, 106)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{font-size:.8;max-width:60ch;line-height:1.5;color:rgba(var(--text-color),.8)}img{object-fit:cover}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{overflow:hidden;align-items:center;cursor:pointer;color:inherit;font-size:.9rem;border-radius:.2rem;padding:.5rem .6rem;-webkit-tap-highlight-color:transparent;border:none}.torrent-card,a:any-link{cursor:pointer;border-radius:.3rem;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:solid rgba(var(--text-color),1)}a:any-link{align-items:center;font-size:.8rem;padding:.4rem .6rem;align-self:flex-start;border:1px solid}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}ul{list-style:none}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.flex{display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.page-layout{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem}.page-layout>*{grid-column:2/3}.popup__header{display:grid;gap:.5rem;width:100%;padding:1rem 1.5rem;align-items:center;grid-template-columns:auto 1fr}.popup__header__close{padding:.5rem;cursor:pointer}#error_page,#loading_page{position:relative;display:grid;height:100%;place-content:center;justify-items:center}#main_header{position:relative;display:flex;padding:1rem;align-items:center;justify-content:space-between;grid-template-columns:repeat(3,1fr)}#main_header__logo{height:1.8rem;width:1.8rem}.theme-switcher{position:relative;justify-self:flex-end;width:1.5rem;height:1.5rem;cursor:pointer;-webkit-tap-highlight-color:transparent}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}#search_section{position:relative;display:grid;gap:1rem;padding:4rem 0;justify-items:center}.app-icon{height:3rem;width:3rem}.app-name{margin-bottom:1rem;color:rgba(var(--text-color),.7)}#search_torrent{width:min(28rem,100%);--border-radius:2rem;--background:rgba(var(--text-color), 0.06)}#search_torrent .icon{height:1.2rem;fill:rgba(var(--text-color),.7)}#torrent_container{padding:1.5rem 0;display:grid;gap:.5rem;padding-bottom:4rem}.torrent-card{display:grid;gap:0 1rem;align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:"icon title button" "icon tags button";padding:1rem;background-color:rgba(var(--text-color),.06)}.torrent-card .torrent-type-icon{padding:.8rem}.torrent-card__icon{grid-area:icon}.torrent-card__icon .icon{height:1.4rem;width:1.4rem}.torrent-card__title{font-weight:600;grid-area:title;font-size:1.1rem}.torrent-card__tags,.torrent-card__uploader{grid-area:tags;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;color:rgba(var(--text-color),.7)}.torrent-card__description{font-size:.9rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:rgba(var(--text-color),.8)}.torrent-card__size{font-weight:500}.torrent-card__download-button{grid-area:button;justify-self:flex-end;align-self:flex-start;background-color:rgba(var(--text-color),.1)}.torrent-card__download-button .icon{height:1.4rem;margin-right:.5rem}#torrent_popup{--width:min(56rem, 100%)}.torrent-preview{display:grid}.torrent-preview__info-section{display:flex;flex-direction:column;align-content:flex-start}.torrent-type-icon{display:flex;padding:1rem;border-radius:50%;align-items:center;justify-content:center;align-self:flex-start;aspect-ratio:1/1;flex-shrink:0;background-color:var(--accent-color)}#main_footer,#torrent_type_icon{background-color:rgba(var(--text-color),.06)}.torrent-type-icon .icon{fill:#fff}#torrent_type_icon{align-self:center;justify-self:center;padding:2rem}#torrent_type_icon .icon{height:3rem;width:3rem;fill:rgba(var(--text-color),.3)}#torrent_tags,#torrent_uploader{display:flex;width:100%;font-size:.85rem;margin-bottom:.3rem;color:rgba(var(--text-color),.8)}#torrent_name{font-size:1.5rem;margin-bottom:1rem}#torrent__description{font-size:.9rem;color:rgba(var(--text-color),.8)}#torrent_uploader{font-weight:500;line-height:1.7;margin-top:1rem;width:auto;border-radius:1.5rem;padding:.3rem .8rem;align-self:flex-start;background-color:rgba(var(--text-color),.1)}#torrent_download_button{color:#fff;width:100%;flex-shrink:0;padding:.7rem;margin-top:2rem;justify-content:center;background-color:var(--accent-color)}#torrent_download_button .icon{fill:#fff}#main_footer{padding:3rem 0}@media only screen and (max-width:640px){.popup__header{padding:0 1.5rem 0 .5rem}.torrent-card{grid-template-columns:auto 1fr;grid-template-areas:"icon title" "icon tags" "icon button"}.torrent-card__icon{margin:0}.torrent-card__title{font-size:1rem}.torrent-card__tags,.torrent-card__uploader{margin-top:.5rem;font-size:.8rem}.torrent-card__description{display:none}.torrent-card__download-button{margin-top:1rem}#torrent_type_icon{margin-bottom:3rem}#torrent_tags{font-size:.8rem}}@media only screen and (min-width:640px){.popup__header{padding:1.5rem 1.5rem 0}.page-layout{grid-template-columns:1fr 90vw 1fr}#main_header,.torrent-card{padding:1.5rem}#torrent_popup{--min-height:80vh}.torrent-preview{gap:3rem;grid-template-columns:22rem 1fr}}@media only screen and (min-width:1280px){.page-layout{grid-template-columns:1fr 80vw 1fr}.multi-form{grid-template-columns:1fr 1fr}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}}
\ No newline at end of file
+a:any-link,button{position:relative;display:inline-flex;background:0 0;outline:0}a,a:any-link{color:inherit;text-decoration:none}.hide,.ripple{pointer-events:none}.interact,.theme-switcher,.torrent-card,a:any-link,button{cursor:pointer;-webkit-tap-highlight-color:transparent}*{padding:0;margin:0;box-sizing:border-box;font-family:Inter,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#304FFE;--light-shade:rgba(var(--text-color), 0.06);--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#F6f6f6;--error-color:red;--green:#00843b;color:rgba(var(--text-color),1);background:var(--background-color)}body[data-theme=dark]{--green:#13ff5a;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--error-color:rgb(255, 106, 106)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{font-size:.8;max-width:60ch;line-height:1.5;color:rgba(var(--text-color),.8)}.app-name,button{font-weight:500;font-size:.9rem}img{object-fit:cover}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{overflow:hidden;align-items:center;color:inherit;border-radius:.2rem;padding:.5rem .6rem;border:none}button:focus-visible{outline:solid rgba(var(--text-color),1)}a:any-link{align-items:center;font-weight:500;font-size:.8rem;border-radius:.3rem;padding:.4rem .6rem;align-self:flex-start;border:1px solid}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}ul{list-style:none}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.flex{display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact{position:relative;overflow:hidden}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.page-layout{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem}.page-layout>*{grid-column:2/3}.popup__header{display:grid;gap:.5rem;width:100%;padding:1rem 1.5rem;align-items:center;grid-template-columns:auto 1fr}.popup__header__close{padding:.5rem;cursor:pointer}#error_page,#loading_page{position:relative;display:grid;height:100%;place-content:center;justify-items:center}#main_header{position:relative;display:flex;padding:1rem;align-items:center;justify-content:space-between;grid-template-columns:repeat(3,1fr)}#main_header__logo{height:1.8rem;width:1.8rem}.theme-switcher{position:relative;justify-self:flex-end;width:1.5rem;height:1.5rem}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}#search_section{position:relative;display:grid;gap:.5rem;padding:4rem 0;justify-items:center}.app-icon{height:3rem;width:3rem}.app-name{margin-bottom:1rem;color:rgba(var(--text-color),.7)}#search_torrent{width:min(28rem,100%);--border-radius:2rem;--background:rgba(var(--text-color), 0.06)}#search_torrent .icon{height:1.2rem;fill:rgba(var(--text-color),.7)}#torrent_container{padding:1.5rem 0;display:grid;gap:.5rem;padding-bottom:4rem}.torrent-card{display:grid;gap:0 1rem;align-items:center;grid-template-columns:auto 1fr auto;padding:1rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}.torrent-card .torrent-type-icon{padding:.8rem}.torrent-card__icon .icon{height:1.4rem;width:1.4rem}.torrent-card__title{font-weight:600;font-size:1.1rem;margin-bottom:.5rem}.torrent-card__tags,.torrent-card__uploader{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;color:rgba(var(--text-color),.7)}#torrent__description,#torrent_tags,#torrent_uploader,.progress-percent,.torrent-card__description{color:rgba(var(--text-color),.8)}.torrent-card__description{font-size:.9rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.torrent-card__size{font-weight:500}.torrent-card__download-button{justify-self:flex-end;align-self:flex-start;background-color:rgba(var(--text-color),.1)}.torrent-card__download-button .icon{height:1.4rem;margin-right:.5rem}.progress-indicator{justify-self:flex-end;height:2.3rem;padding:0 .6rem}.progress-percent{font-size:.9rem;font-weight:500;min-width:6rem}.progress-loader{height:1.2rem;width:1.2rem;fill:none;padding:.1rem;stroke-width:12;overflow:visible;margin-right:.5rem;stroke-dasharray:201;stroke-dashoffset:201;transform:rotate(-90deg);stroke:var(--accent-color);transition:stroke-dashoffset .3s}#torrent_popup{--width:min(56rem, 100%)}.torrent-preview{display:grid}.torrent-preview__info-section{display:flex;flex-direction:column;align-content:flex-start}.torrent-type-icon{display:flex;padding:1rem;border-radius:50%;align-items:center;justify-content:center;align-self:flex-start;aspect-ratio:1/1;flex-shrink:0;background-color:var(--accent-color)}#main_footer,#torrent_type_icon{background-color:rgba(var(--text-color),.06)}.torrent-type-icon .icon{fill:#fff}#torrent_type_icon{align-self:center;justify-self:center;padding:2rem}#torrent_type_icon .icon{height:3rem;width:3rem;fill:rgba(var(--text-color),.3)}#torrent_tags,#torrent_uploader{display:flex;width:100%;font-size:.85rem;margin-bottom:.3rem}#torrent_name{font-size:1.5rem;margin-bottom:1rem}#torrent__description{font-size:.9rem}#torrent_uploader{font-weight:500;line-height:1.7;margin-top:1rem;width:auto;border-radius:1.5rem;padding:.3rem .8rem;align-self:flex-start;background-color:rgba(var(--text-color),.1)}#torrent_download_button{color:#fff;width:100%;flex-shrink:0;padding:.7rem;margin-top:2rem;justify-content:center;background-color:var(--accent-color)}#torrent_download_button .icon{fill:#fff}#main_footer{padding:3rem 0}@media only screen and (max-width:640px){.popup__header{padding:0 1.5rem 0 .5rem}.torrent-card{grid-template-columns:auto 1fr}.torrent-card__icon{margin:0}.torrent-card__title{font-size:.9rem}#torrent_tags,.torrent-card__tags,.torrent-card__uploader{font-size:.8rem}.torrent-card__description{display:none}.torrent-card .progress-indicator,.torrent-card__download-button{margin-top:1rem;grid-column:2/3}#torrent_type_icon{margin-bottom:3rem}}@media only screen and (min-width:640px){.popup__header{padding:1.5rem 1.5rem 0}.page-layout{grid-template-columns:1fr 90vw 1fr}#main_header,.torrent-card{padding:1.5rem}#torrent_popup{--min-height:80vh}.torrent-preview{gap:3rem;grid-template-columns:22rem 1fr}}@media only screen and (min-width:1280px){.page-layout{grid-template-columns:1fr 80vw 1fr}.multi-form{grid-template-columns:1fr 1fr}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 4c08040..809f3cd 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -307,7 +307,7 @@ ul{
 #search_section{
     position: relative;
     display: grid;
-    gap: 1rem;
+    gap: 0.5rem;
     padding: 4rem 0;
     justify-items: center;
 }
@@ -318,6 +318,7 @@ ul{
 .app-name{
     font-weight: 500;
     margin-bottom: 1rem;
+    font-size: 0.9rem;
     color: rgba(var(--text-color), 0.7);
 }
 #search_torrent{
@@ -342,7 +343,6 @@ ul{
     gap: 0 1rem;
     align-items: center;
     grid-template-columns: auto 1fr auto;
-    grid-template-areas: 'icon title button' 'icon tags button';
     cursor: pointer;
     padding: 1rem;
     border-radius: 0.3rem;
@@ -352,7 +352,6 @@ ul{
         padding: 0.8rem;
     }
     &__icon{
-        grid-area: icon;
         .icon{
             height: 1.4rem;
             width: 1.4rem;
@@ -360,12 +359,11 @@ ul{
     }
     &__title{
         font-weight: 600;
-        grid-area: title;
         font-size: 1.1rem;
+        margin-bottom: 0.5rem;
     }
     &__tags,
     &__uploader{
-        grid-area: tags;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -384,7 +382,6 @@ ul{
         font-weight: 500;
     }
     &__download-button{
-        grid-area: button;
         justify-self: flex-end;
         align-self: flex-start;
         background-color: rgba(var(--text-color), 0.1);
@@ -394,6 +391,31 @@ ul{
         }
     }
 }
+.progress-indicator{
+    justify-self: flex-end;
+    height: 2.3rem;
+    padding: 0 0.6rem;
+}
+.progress-percent{
+    font-size: 0.9rem;
+    font-weight: 500;
+    min-width: 6rem;
+    color: rgba(var(--text-color), 0.8);
+}
+.progress-loader{
+    height: 1.2rem;
+    width: 1.2rem;
+    fill: none;
+    padding: 0.1rem;
+    stroke-width: 12;
+    overflow: visible;
+    margin-right: 0.5rem;
+    stroke-dasharray: 201;
+    stroke-dashoffset: 201;
+    transform: rotate(-90deg);
+    stroke: var(--accent-color);
+    transition: stroke-dashoffset 0.3s;
+}
 #torrent_popup{
     --width: min(56rem, 100%);
 }
@@ -478,23 +500,23 @@ ul{
     }
     .torrent-card{
         grid-template-columns: auto 1fr;
-        grid-template-areas: 'icon title' 'icon tags' 'icon button';
         &__icon{
             margin: 0;
         }
         &__title{
-            font-size: 1rem;
+            font-size: 0.9rem;
         }
         &__tags,
         &__uploader{
-            margin-top: 0.5rem;
             font-size: 0.8rem;
         } 
         &__description{
             display: none;
         }
-        &__download-button{
+        &__download-button,
+        .progress-indicator{
             margin-top: 1rem;
+            grid-column: 2/3;
         }
     }
     #torrent_type_icon{
diff --git a/index.html b/index.html
index 4b96e16..baba44f 100644
--- a/index.html
+++ b/index.html
@@ -56,15 +56,15 @@
             <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
         </label>
     </header>
-    <main class="page-layout">
-        <section id="search_section">
+    <main>
+        <section id="search_section" class="page-layout">
             <svg class="app-icon icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M54.69,14.28l8.83-8.83a1.62,1.62,0,0,0-1.14-2.77H21.15A1.63,1.63,0,0,0,19.53,4.3V59.7a1.62,1.62,0,0,0,2.78,1.13l8.83-9a1.62,1.62,0,0,0,.46-1.14V38.06a1.58,1.58,0,0,1,.48-1.14l8.81-8.83a1.62,1.62,0,0,0-1.15-2.77H33.22A1.62,1.62,0,0,1,31.6,23.7V16.37a1.63,1.63,0,0,1,1.62-1.62H53.55A1.63,1.63,0,0,0,54.69,14.28Z"/><path d="M1.62,14.75H12.36A1.62,1.62,0,0,0,14,13.13V4.3a1.63,1.63,0,0,0-1.62-1.62H7.47a1.6,1.6,0,0,0-1.35.73L.27,12.24A1.62,1.62,0,0,0,1.62,14.75Z"/></svg>
             <h4 class="app-name">FLO Torrent</h4>
             <sm-input id="search_torrent" placeholder="Search">
                 <svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
             </sm-input>
         </section>
-        <section>
+        <section class="page-layout">
             <h4>Recent</h4>
             <ul id="torrent_container"></ul>
         </section>
@@ -75,11 +75,10 @@
     <template id="torrent_card_template">
         <li class="torrent-card interact">
             <div class="torrent-card__icon torrent-type-icon"></div>
-            <h3 class="torrent-card__title"></h3>
-            <span class="torrent-card__uploader"></span>
-            <!-- <span class="torrent-card__tags"></span> -->
-            <!-- <p class="torrent-card__description"></p> -->
-            <!-- <h5 class="torrent-card__size">1.2GB</h5> -->
+            <div class="grid">
+                <h3 class="torrent-card__title"></h3>
+                <span class="torrent-card__uploader"></span>
+            </div>
             <button class="torrent-card__download-button">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 2l5 5v14.008a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992C3 2.444 3.445 2 3.993 2H16zm-3 10V8h-2v4H8l4 4 4-4h-3z"/></svg>
                 Get torrent
@@ -396,18 +395,20 @@
             );
         }
 
-        function getTorrentMetafromAPI(txid, i, N) {
+        function getTorrentMetafromAPI(txid, i, N, torrentId) {
             return new Promise(async (resolve, reject) => {
                 try {
                     let response = await getResponce(`/api/tx/${txid}`)
-                    var floData = JSON.parse(response.floData);
-                    var percent = Math.round((i / N) * 100);
-                    console.log(percent)
-                    console.log(i, N, percent, floData.next);
+                    let floData = JSON.parse(response.floData);
+                    let percent = Math.round((i / N) * 100);
+                    console.log(torrentId)
+                    getRef(torrentId).querySelector('.progress-loader').setAttribute('style', `stroke-dashoffset: ${201 - (2.01 * percent)}`)
+                    getRef(torrentId).querySelector('.progress-percent').textContent = `${percent}% done`
+                    // console.log(i, N, percent, floData.next);
                     if (!floData.next)
                         resolve([floData.data]);
                     else {
-                        getTorrentMetafromAPI(floData.next, i + 1, N).then(chunks => {
+                        getTorrentMetafromAPI(floData.next, i + 1, N, torrentId).then(chunks => {
                             resolve([floData.data].concat(chunks))
                         }).catch(error => {
                             reject(error);
@@ -419,21 +420,27 @@
                 }
             });
         }
-        async function downloadTorrent(filename, txid, totalChunks) {
-/*             document.getElementById('downloadBar').style.display = "block";
-            document.getElementById('progressBar').setAttribute("class", "progress-circle p0");
-            document.getElementById('progressValue').innerHTML = `0%`; */
+        async function downloadTorrent(filename, txid, totalChunks, torrentId) {
             console.log(txid);
-            getTorrentMetafromAPI(txid, 1, totalChunks).then(chunks => {
-                var filedata = chunks.join("");
+            getRef(torrentId).querySelector('.torrent-card__download-button').classList.add('hide-completely')
+            const progressIndicator = create('div', {
+                className: 'progress-indicator flex align-center',
+                innerHTML: `
+                    <svg class="progress-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32"/></svg>
+                    <span class="progress-percent"></span>
+                `
+            })
+            getRef(torrentId).append(progressIndicator)
+            getTorrentMetafromAPI(txid, 1, totalChunks, torrentId).then(chunks => {
+                let filedata = chunks.join("");
                 // console.log(filedata);
                 download(filename, filedata);
+                progressIndicator.remove()
+                getRef(torrentId).querySelector('.torrent-card__download-button').classList.remove('hide-completely')
             }).catch(error => {
                 alert(error);
                 console.error(error);
-            }).finally(_ => {
-                // document.getElementById('downloadBar').style.display = "none";
-            });
+            })
         }
 
         function download(filename, data) {
@@ -513,10 +520,11 @@
         }
 
         function create(tagName, obj) {
-            const { className, text } = obj
+            const { className, text, innerHTML } = obj
             const elem = document.createElement(tagName)
             elem.className = className
             elem.textContent = text
+            elem.innerHTML = innerHTML
             return elem
         }
 
@@ -747,7 +755,7 @@
                 const card = _target.closest('.torrent-card')
                 const cardId = parseInt(card.id)
                 const {id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks} = await getDataFromIDB(cardId)
-                downloadTorrent(filename, startTx, chunks)
+                downloadTorrent(filename, startTx, chunks, cardId)
             }
             else if(e.target.closest('.torrent-card')){
                 const card = e.target.closest('.torrent-card')
@@ -767,7 +775,7 @@
                 const {id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks} = obj
                 const card = getRef('torrent_card_template').content.cloneNode(true).firstElementChild
                 card.id = id
-                card.querySelector('.torrent-card__title').textContent = filename 
+                card.querySelector('.torrent-card__title').textContent = name 
                 card.querySelector('.torrent-card__uploader').textContent = `by ${uploader}`
                 // card.querySelector('.torrent-card__tags').textContent = tags.split('/').join('•')
                 // card.querySelector('.torrent-card__description').textContent = description 
@@ -819,7 +827,7 @@
         async function showLatestTorrents(){
             getRef('torrent_container').innerHTML = ``
             let allTorrents = await getTorrents()
-            allTorrents = allTorrents.reverse().slice(0, 20)
+            allTorrents = allTorrents.reverse().slice(0, 12)
             getRef('torrent_container').append(renderTorrents(allTorrents))
         }
 
diff --git a/loader-ring.svg b/loader-ring.svg
new file mode 100644
index 0000000..795d749
--- /dev/null
+++ b/loader-ring.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32"/></svg>
\ No newline at end of file