diff --git a/public/css/main.css b/public/css/main.css
index 86fe76af..252a902d 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -533,17 +533,8 @@ td.tr-le { color: #E84C4C; }
 	content: "\25BC   ";
 }
 
-.folder-icon {
-	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAADBJREFUOI1jZGBg+M+AHTDiEEcBTMQowgcY8biAKECxCwYeDHwYjBowbAw4SYH+YwB6YwSnsuTkoAAAAABJRU5ErkJggg==');
-	width: 16px;
-	height: 16px;
-	display: inline-block;
-}
-.file-icon {
-	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAElJREFUOI1jYGBg+I8Dw0ADAwFAyID/hAwhxgC8hhBrAE5DSDEAqyGkGoBiCAsufyEBRnySTEQYQND0/wRV4dZLuQtGDRgMBgAARxw25MUCGPQAAAAASUVORK5CYII=');
-	width: 16px;
-	height: 16px;
-	display: inline-block;
+.tr-filelist {
+	--nest-level: 0;
 }
 .tr-filelist td {
 	padding: 4px 4px;
@@ -551,7 +542,9 @@ td.tr-le { color: #E84C4C; }
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.tr-filelist td:first-child span {
+/* The margin that gives the tree-like effect, based on the nest-level */
+.tr-filelist td:first-child::before {
+	margin-left: calc(var(--nest-level) * 2rem);
 	margin-right: 0.5rem;
 }
 /* Filesize column */
@@ -562,3 +555,18 @@ td.tr-le { color: #E84C4C; }
 .tr-folder {
 	cursor: pointer;
 }
+/* The folder or file icon */
+.tr-folder td:first-child::before {
+	content: " ";
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAADBJREFUOI1jZGBg+M+AHTDiEEcBTMQowgcY8biAKECxCwYeDHwYjBowbAw4SYH+YwB6YwSnsuTkoAAAAABJRU5ErkJggg==');
+	width: 16px;
+	height: 16px;
+	display: inline-block;
+}
+.tr-file td:first-child::before {
+	content: " ";
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAElJREFUOI1jYGBg+I8Dw0ADAwFAyID/hAwhxgC8hhBrAE5DSDEAqyGkGoBiCAsufyEBRnySTEQYQND0/wRV4dZLuQtGDRgMBgAARxw25MUCGPQAAAAASUVORK5CYII=');
+	width: 16px;
+	height: 16px;
+	display: inline-block;
+}
diff --git a/public/css/tomorrow.css b/public/css/tomorrow.css
index 36c657b2..9fcb7dcc 100644
--- a/public/css/tomorrow.css
+++ b/public/css/tomorrow.css
@@ -60,5 +60,5 @@ td.tr-le { color: #cc6666; }
 	margin-bottom: -.5em;
 }
 
-.folder-icon { filter: invert(100%); -webkit-filter: invert(100%); }
-.file-icon { filter: invert(100%); -webkit-filter: invert(100%); }
+.tr-folder td:first-child::before { filter: invert(100%); -webkit-filter: invert(100%); }
+.tr-file td:first-child::before { filter: invert(100%); -webkit-filter: invert(100%); }
diff --git a/templates/view.html b/templates/view.html
index aa0aa629..80499969 100644
--- a/templates/view.html
+++ b/templates/view.html
@@ -46,8 +46,8 @@
   <p class="torrent-hr" id="filelist-control" onclick="javascript:toggleFilelist()" data-filelist-open="true">{{call $.T "files"}}</p>
   {{ if gt (len .FileList) 0 }}
   {{/* how do i concat lol */}}
-  {{ $folderFormat := `<tr class='childs-of-{{.ParentIdentifier}} tr-filelist tr-folder' onclick="javascript:toggleFolder('childs-of-{{.Identifier}}')"><td><span class='folder-icon' style='margin-left: calc({{.NestLevel}}*2rem);'></span>{{.FolderName}}</td><td>{{ fileSize .TotalSize .Data.T }}</td></tr>` }}
-  {{ $fileFormat := `<tr class='childs-of-{{.ParentIdentifier}} tr-filelist'><td><span class="file-icon" style='margin-left: calc({{.NestLevel}}*2rem);'></span>{{.Filename}}</td><td>{{ fileSize .Filesize .Data.T }}</td>` }}
+  {{ $folderFormat := `<tr id="{{.Identifier}}" class='childs-of-{{.ParentIdentifier}} tr-filelist tr-folder' onclick="javascript:toggleFolder(this)" data-filelist-open="true" style="--nest-level: {{.NestLevel}}"><td>{{.FolderName}}</td><td>{{ fileSize .TotalSize .Data.T }}</td></tr>` }}
+  {{ $fileFormat := `<tr class='childs-of-{{.ParentIdentifier}} tr-filelist tr-file' style="--nest-level: {{.NestLevel}}"><td>{{.Filename}}</td><td>{{ fileSize .Filesize .Data.T }}</td>` }}
     <script>
 	function toggleFilelist() {
 		var control = document.getElementById("filelist-control")
@@ -57,12 +57,15 @@
 		control.setAttribute("data-filelist-open", filelist.hidden ? "false" : "true")
 	}
 
-    function toggleFolder(folder) {
-        var rows = document.querySelectorAll("*[class^='" + folder + "']")
+    function toggleFolder(folderNode) {
+        var isOpen = folderNode.getAttribute("data-filelist-open") == "true" ? true : false
+        var rows = document.querySelectorAll("*[class^='childs-of-" + folderNode.id + "']")
         for (var i = 0; i < rows.length; i++) {
-            var row = rows[i]
-			row.hidden = !row.hidden
+            // If it's open (true), will hide, if not, will show.
+            rows[i].hidden = isOpen
         }
+
+        folderNode.setAttribute("data-filelist-open", !isOpen ? "true" : "false")
     }
     </script>
     <div class="torrent-info-box" id="filelist">