diff --git a/static/css/base/variables.css b/static/css/base/variables.css
index 5b6dd890..10c67cdf 100644
--- a/static/css/base/variables.css
+++ b/static/css/base/variables.css
@@ -351,9 +351,6 @@
     /* Photo tile */
     --color-photo-check-border: rgba(255, 255, 255, 0.8);
 
-    /* Dark-mode selected card */
-    --color-item-selected-dark: #1a1520;
-
     /* Accent shadow (smaller) */
     --color-accent-shadow-sm: rgba(255, 94, 58, 0.25);
 
@@ -399,7 +396,7 @@
     /* Status badge — light mode (gray/disabled) */
     --color-badge-gray: #d1d5db;
 
-    /* Status badge — dark mode */
+    /* FIXME: Status badge — dark mode */
     --color-badge-success-dark-bg: #052e16;
     --color-badge-success-dark-border: #065f46;
     --color-badge-error-dark-bg: #3b1111;
diff --git a/static/css/components/fileList.css b/static/css/components/fileList.css
deleted file mode 100644
index 49f1f28c..00000000
--- a/static/css/components/fileList.css
+++ /dev/null
@@ -1,162 +0,0 @@
-/* File list - Improved style */
-.files-list-view {
-    --files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 64px;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    border-radius: 10px;
-    overflow: hidden;
-    background-color: var(--color-bg-surface);
-    box-shadow: 0 1px 3px var(--color-shadow-xs);
-}
-
-.list-header {
-    display: grid;
-    grid-template-columns: var(--files-list-columns);
-    column-gap: 12px;
-    padding: 15px;
-    font-weight: 600;
-    color: var(--color-text);
-    background-color: var(--color-bg-subtle);
-    border-bottom: 1px solid var(--color-border-faint);
-    align-items: center;
-}
-
-.files-list-view .file-item {
-    display: grid;
-    grid-template-columns: var(--files-list-columns);
-    column-gap: 12px;
-    padding: 12px 15px;
-    border-bottom: 1px solid var(--color-border-xfaint);
-    align-items: center;
-    cursor: pointer;
-    background-color: var(--color-bg-surface);
-}
-
-.files-list-view .file-item.selected {
-    background-color: var(--color-item-selected);
-}
-
-.files-list-view .file-item.selected:hover {
-    background-color: var(--color-item-hover-accent);
-}
-
-.list-header.trash-header {
-    grid-template-columns: minmax(180px, 1.5fr) 0.5fr 1fr 140px 100px;
-}
-
-.trash-item.file-item {
-    grid-template-columns: minmax(180px, 1.5fr) 0.5fr 1fr 140px 100px;
-}
-
-.files-list-view .file-item:hover {
-    background-color: var(--color-item-hover-blue);
-}
-
-.list-header > div,
-.files-list-view .file-item > div {
-    min-width: 0;
-}
-
-.list-header > div:nth-child(4),
-.files-list-view .file-item .size-cell {
-    justify-self: end;
-    text-align: right;
-}
-
-.files-list-view {
-    & .file-item .name-cell {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        min-width: 0;
-        overflow: hidden;
-    }
-}
-
-.files-list-view .file-item .name-cell span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.files-list-view .file-item .file-icon {
-    width: 36px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px;
-    font-size: 20px;
-    margin-bottom: 0;
-    flex-shrink: 0;
-}
-
-/* ------------- */
-
-.list-header > div:nth-child(5),
-.files-list-view .file-item .date-cell {
-    justify-self: center;
-    text-align: center;
-}
-.files-list-view .file-item .date-cell {
-    color: var(--color-text-muted);
-    font-size: 14px;
-}
-
-.files-list-view .file-item .size-cell {
-    color: var(--color-text-muted);
-    font-size: 14px;
-    text-align: right;
-    font-variant-numeric: tabular-nums;
-}
-
-.files-list-view .file-item .type-cell {
-    color: var(--color-text-secondary);
-    font-weight: 500;
-    font-size: 14px;
-}
-
-.files-list-view .file-item.dragging {
-    opacity: 0.5;
-    background-color: var(--color-bg-input);
-}
-
-.files-list-view .file-item.drop-target {
-    background-color: var(--color-warning-ring);
-    border: 2px dashed var(--color-warning-border);
-}
-
-.files-list-view .file-item .action-cell {
-    align-items: center;
-    text-align: right;
-}
-
-.files-list-view .file-item .action-cell button {
-    display: inline;
-    width: 28px;
-    height: 28px;
-    border-radius: 8px;
-    border: none;
-    background: transparent;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: var(--color-text-subtle);
-    font-size: 16px;
-}
-
-.files-list-view .file-item .action-cell button:hover {
-    background: var(--color-border-subtle);
-    color: var(--color-text-dark);
-}
-
-/* could be visible if we want */
-.files-list-view .file-item .action-cell button.favorite-star {
-    display: none;
-    border: none;
-}
-
-.files-list-view .file-item:hover .action-cell button.favorite-star {
-    display: inline;
-}
diff --git a/static/css/components/fileType.css b/static/css/components/fileType.css
new file mode 100644
index 00000000..4b74431d
--- /dev/null
+++ b/static/css/components/fileType.css
@@ -0,0 +1,158 @@
+/* -------------------------- file's type to icons --------------------------------------- */
+
+.folder-icon {
+    background-color: var(--color-ft-folder-bg);
+}
+
+.folder-icon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 22%;
+    background-color: var(--color-ft-folder-tab);
+    border-radius: 8px 8px 0 0;
+}
+
+/* don't use FontAwesome / svg for folders and prefer CSS trick */
+.folder-icon > i,
+.folder-icon > svg {
+    display: none !important;
+}
+
+.pdf-icon {
+    background-color: var(--color-ft-pdf-bg);
+    color: var(--color-ft-pdf-text);
+}
+
+.doc-icon {
+    background-color: var(--color-ft-doc-bg);
+    color: var(--color-ft-doc-text);
+}
+
+.script-icon {
+    background-color: var(--color-ft-script-bg);
+    color: var(--color-ft-script-text);
+}
+
+.config-icon {
+    background-color: var(--color-ft-config-bg);
+    color: var(--color-ft-config-text);
+}
+
+.image-icon {
+    background-color: var(--color-ft-image-bg);
+    color: var(--color-ft-image-text);
+}
+
+.video-icon {
+    background: linear-gradient(135deg, var(--color-ft-video-bg-from), var(--color-ft-video-bg-to));
+    color: var(--color-ft-video-text);
+}
+
+.code-icon {
+    background-color: var(--color-border);
+}
+
+.json-icon {
+    border-top-color: var(--color-ft-orange-light);
+}
+
+.js-icon {
+    border-top-color: var(--color-ft-yellow);
+}
+
+.html-icon {
+    border-top-color: var(--color-ft-html);
+}
+
+.css-icon {
+    border-top-color: var(--color-ft-js);
+}
+
+.py-icon {
+    border-top-color: var(--color-ft-python);
+}
+
+.ts-icon {
+    border-top-color: var(--color-ft-typescript);
+}
+
+.rust-icon {
+    border-top-color: var(--color-ft-rust);
+}
+
+.go-icon {
+    border-top-color: var(--color-ft-go);
+}
+
+.java-icon {
+    border-top-color: var(--color-ft-java);
+}
+
+.c-icon {
+    border-top-color: var(--color-ft-shell);
+}
+
+.cs-icon {
+    border-top-color: var(--color-ft-csharp);
+}
+
+.php-icon {
+    border-top-color: var(--color-ft-php);
+}
+
+.ruby-icon {
+    border-top-color: var(--color-ft-ruby);
+}
+
+.swift-icon {
+    border-top-color: var(--color-ft-swift);
+}
+
+.kotlin-icon {
+    border-top-color: var(--color-ft-kotlin);
+}
+
+.sql-icon {
+    border-top-color: var(--color-ft-scala);
+}
+
+.yaml-icon {
+    border-top-color: var(--color-ft-angular);
+}
+
+.toml-icon {
+    border-top-color: var(--color-ft-cpp);
+}
+
+.md-icon {
+    border-top-color: var(--color-ft-docker);
+}
+
+.spreadsheet-icon {
+    background-color: var(--color-ft-spreadsheet-bg);
+    color: var(--color-ft-spreadsheet-text);
+}
+
+.presentation-icon {
+    background-color: var(--color-ft-presentation-bg);
+    color: var(--color-ft-presentation-text);
+}
+
+.audio-icon {
+    /* background-color: var(--color-ft-audio-alt-bg);*/
+    background-color: var(--color-ft-audio-bg);
+    color: var(--color-ft-audio-text);
+}
+
+.archive-icon {
+    background-color: var(--color-ft-archive-bg);
+    color: var(--color-ft-archive-text);
+}
+
+.installer-icon {
+    background-color: var(--color-ft-installer-bg);
+    color: var(--color-ft-installer-text);
+}
diff --git a/static/css/components/cards.css b/static/css/components/filesView.css
similarity index 51%
rename from static/css/components/cards.css
rename to static/css/components/filesView.css
index 6cb3deea..d7061771 100644
--- a/static/css/components/cards.css
+++ b/static/css/components/filesView.css
@@ -1,14 +1,5 @@
-/* Files grid */
-.files-grid-view {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 20px;
-    position: relative;
-}
-
-/* header not visible in grid mode */
-.files-grid-view .list-header {
-    display: none;
+.files-container {
+    padding-top: 3px; /* due to cards animation on mouse hover and page-sticky-header with a positive z-index */
 }
 
 /* Rubber band / lasso selection rectangle */
@@ -22,12 +13,211 @@
     display: none;
 }
 
-.files-container {
-    padding-top: 3px; /* due to cards animation on mouse hover and page-sticky-header with a positive z-index */
+.file-icon {
+    width: 100px;
+    height: 70px;
+    border-radius: 8px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+/* Thumbnail image inside file-icon (grid and list views) */
+.file-icon .file-thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 1;
+}
+
+.file-item {
+    background-color: var(--color-bg-surface);
+}
+
+.file-item.selected {
+    background-color: var(--color-item-selected);
+}
+
+.file-item:hover {
+    background-color: var(--color-bg-hover);
+    border-color: var(--color-border-medium);
+}
+
+.file-item.selected:hover {
+    background-color: var(--color-item-hover-accent);
+}
+
+.file-item.dragging {
+    opacity: 0.8;
+    background-color: var(--color-bg-input);
+}
+
+.file-item.drop-target {
+    background-color: var(--color-warning-ring);
+}
+
+/* ------------------File list View --------------------- */
+
+.list-header {
+    display: grid;
+    grid-template-columns: var(--files-list-columns);
+    column-gap: 12px;
+    padding: 15px;
+    font-weight: 600;
+    color: var(--color-text);
+    background-color: var(--color-bg-subtle);
+    border-bottom: 1px solid var(--color-border-faint);
+    align-items: center;
+}
+
+.list-header.trash-header {
+    grid-template-columns: minmax(180px, 1.5fr) 0.5fr 1fr 140px 100px;
+}
+
+.trash-item.file-item {
+    grid-template-columns: minmax(180px, 1.5fr) 0.5fr 1fr 140px 100px;
+}
+
+.list-header > div,
+.files-list-view .file-item > div {
+    min-width: 0;
+}
+
+.list-header > div:nth-child(4),
+.files-list-view .file-item .size-cell {
+    justify-self: end;
+    text-align: right;
+}
+
+.files-list-view {
+    --files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 64px;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: var(--color-bg-surface);
+    box-shadow: 0 1px 3px var(--color-shadow-xs);
+}
+
+.files-list-view .file-item {
+    display: grid;
+    grid-template-columns: var(--files-list-columns);
+    column-gap: 12px;
+    padding: 12px 15px;
+    border-bottom: 1px solid var(--color-border-xfaint);
+    align-items: center;
+    cursor: pointer;
+}
+
+.files-list-view .file-item.drop-target {
+    border: 1px dashed var(--color-warning-border);
+}
+
+.files-list-view .file-item .name-cell {
+    color: var(--color-text);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.files-list-view .file-item .name-cell span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.files-list-view .file-item .file-icon {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    font-size: 20px;
+    margin-bottom: 0;
+    flex-shrink: 0;
+}
+
+.list-header > div:nth-child(5),
+.files-list-view .file-item .date-cell {
+    justify-self: center;
+    text-align: center;
+}
+.files-list-view .file-item .date-cell {
+    color: var(--color-text-muted);
+    font-size: 14px;
+}
+
+.files-list-view .file-item .size-cell {
+    color: var(--color-text-muted);
+    font-size: 14px;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.files-list-view .file-item .type-cell {
+    color: var(--color-text-secondary);
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.files-list-view .file-item .action-cell {
+    align-items: center;
+    text-align: right;
+}
+
+.files-list-view .file-item .action-cell button {
+    display: inline;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--color-text-subtle);
+    font-size: 16px;
+}
+
+.files-list-view .file-item .action-cell button:hover {
+    background: var(--color-border-subtle);
+    color: var(--color-text-dark);
+}
+
+/* could be visible if we want */
+.files-list-view .file-item .action-cell button.favorite-star {
+    display: none;
+    border: none;
+}
+
+.files-list-view .file-item:hover .action-cell button.favorite-star {
+    display: inline;
+}
+
+/* --------------------- Files grid view --------------------------- */
+
+.files-grid-view {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+    position: relative;
+}
+
+/* header not visible in grid mode */
+.files-grid-view .list-header {
+    display: none;
 }
 
 .files-grid-view .file-item {
-    background-color: var(--color-bg-surface);
     border-radius: 12px;
     border: 2px solid var(--color-border);
     padding: 16px;
@@ -41,6 +231,12 @@
     position: relative;
 }
 
+.files-grid-view .file-item.dragging {
+    opacity: 0.5;
+    transform: scale(0.95);
+    box-shadow: none;
+}
+
 .files-grid-view .file-item:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px var(--color-shadow-sm);
@@ -49,14 +245,12 @@
 
 .files-grid-view .file-item.selected {
     border-color: var(--color-accent);
-    background: var(--color-item-selected);
     box-shadow:
         0 0 0 1px var(--color-accent-ring-dark),
         0 4px 12px var(--color-accent-ring);
 }
 
 .files-grid-view .file-item.selected:hover {
-    border-color: var(--color-accent);
     box-shadow:
         0 0 0 1px var(--color-accent-ring-strong),
         0 6px 18px var(--color-accent-ring-dark);
@@ -100,7 +294,7 @@
 }
 
 /* More actions button (three dots) */
-.files-grid-view .file-actions {
+.files-grid-view .file-item .file-actions {
     position: absolute;
     top: 8px;
     right: 8px;
@@ -123,11 +317,16 @@
     opacity: 1;
 }
 
-.files-grid-view .file-actions:hover {
+.files-grid-view .file-item .file-actions:hover {
     background: var(--color-border-light);
     color: var(--color-text-dark);
 }
 
+.files-grid-view .file-item.drop-target {
+    background-color: var(--color-warning-ring);
+    border: 2px dashed var(--color-warning-border);
+}
+
 /* Favorite star (mirrors file-actions button pattern) */
 .files-grid-view .file-item button.favorite-star {
     position: absolute;
@@ -167,217 +366,6 @@
     color: var(--color-star-active);
 }
 
-.files-grid-view .file-item.dragging {
-    opacity: 0.5;
-    transform: scale(0.95);
-    box-shadow: none;
-}
-
-.files-grid-view .file-item.drop-target {
-    background-color: var(--color-warning-ring);
-    border: 2px dashed var(--color-warning-border);
-}
-
-.file-icon {
-    width: 100px;
-    height: 70px;
-    border-radius: 8px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-}
-
-/* -------------------------------------------------------------------- */
-
-.files-grid-view .file-icon {
-    margin: auto;
-    margin-bottom: 10px;
-}
-
-.files-grid-view .file-item .file-icon > i,
-.files-grid-view .file-item .file-icon > svg {
-    position: absolute;
-    top: 5px;
-    width: 60px;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* display: none !important;*/
-}
-
-/* don't use FontAwesome / svg for folders and prefer CSS trick */
-.file-icon.folder-icon > i,
-.file-icon.folder-icon > svg {
-    display: none !important;
-}
-
-.file-icon.folder-icon {
-    background-color: var(--color-ft-folder-bg);
-}
-
-.file-icon.folder-icon::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 22%;
-    background-color: var(--color-ft-folder-tab);
-    border-radius: 8px 8px 0 0;
-}
-
-.file-icon.pdf-icon {
-    background-color: var(--color-ft-pdf-bg);
-    color: var(--color-ft-pdf-text);
-}
-
-.file-icon.doc-icon {
-    background-color: var(--color-ft-doc-bg);
-    color: var(--color-ft-doc-text);
-}
-
-.file-icon.script-icon {
-    background-color: var(--color-ft-script-bg);
-    color: var(--color-ft-script-text);
-}
-
-.file-icon.config-icon {
-    background-color: var(--color-ft-config-bg);
-    color: var(--color-ft-config-text);
-}
-
-.file-icon.image-icon {
-    background-color: var(--color-ft-image-bg);
-    color: var(--color-ft-image-text);
-}
-
-/* Thumbnail image inside file-icon (grid and list views) */
-.file-icon .file-thumb {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 1;
-}
-
-.file-icon.video-icon {
-    background: linear-gradient(135deg, var(--color-ft-video-bg-from), var(--color-ft-video-bg-to));
-    color: var(--color-ft-video-text);
-}
-
-.file-icon.code-icon {
-    background-color: var(--color-border);
-}
-
-.file-icon.json-icon {
-    border-top-color: var(--color-ft-orange-light);
-}
-
-.file-icon.js-icon {
-    border-top-color: var(--color-ft-yellow);
-}
-
-.file-icon.html-icon {
-    border-top-color: var(--color-ft-html);
-}
-
-.file-icon.css-icon {
-    border-top-color: var(--color-ft-js);
-}
-
-.file-icon.py-icon {
-    border-top-color: var(--color-ft-python);
-}
-
-.file-icon.ts-icon {
-    border-top-color: var(--color-ft-typescript);
-}
-
-.file-icon.rust-icon {
-    border-top-color: var(--color-ft-rust);
-}
-
-.file-icon.go-icon {
-    border-top-color: var(--color-ft-go);
-}
-
-.file-icon.java-icon {
-    border-top-color: var(--color-ft-java);
-}
-
-.file-icon.c-icon {
-    border-top-color: var(--color-ft-shell);
-}
-
-.file-icon.cs-icon {
-    border-top-color: var(--color-ft-csharp);
-}
-
-.file-icon.php-icon {
-    border-top-color: var(--color-ft-php);
-}
-
-.file-icon.ruby-icon {
-    border-top-color: var(--color-ft-ruby);
-}
-
-.file-icon.swift-icon {
-    border-top-color: var(--color-ft-swift);
-}
-
-.file-icon.kotlin-icon {
-    border-top-color: var(--color-ft-kotlin);
-}
-
-.file-icon.sql-icon {
-    border-top-color: var(--color-ft-scala);
-}
-
-.file-icon.yaml-icon {
-    border-top-color: var(--color-ft-angular);
-}
-
-.file-icon.toml-icon {
-    border-top-color: var(--color-ft-cpp);
-}
-
-.file-icon.md-icon {
-    border-top-color: var(--color-ft-docker);
-}
-
-.file-icon.spreadsheet-icon {
-    background-color: var(--color-ft-spreadsheet-bg);
-    color: var(--color-ft-spreadsheet-text);
-}
-
-.file-icon.presentation-icon {
-    background-color: var(--color-ft-presentation-bg);
-    color: var(--color-ft-presentation-text);
-}
-
-.file-icon.audio-icon {
-    /* background-color: var(--color-ft-audio-alt-bg);*/
-    background-color: var(--color-ft-audio-bg);
-    color: var(--color-ft-audio-text);
-}
-
-.file-icon.archive-icon {
-    background-color: var(--color-ft-archive-bg);
-    color: var(--color-ft-archive-text);
-}
-
-.file-icon.installer-icon {
-    background-color: var(--color-ft-installer-bg);
-    color: var(--color-ft-installer-text);
-}
-
-/* -------------------------------------------------------------------- */
-
 .files-grid-view .file-item .name-cell {
     font-size: 14px;
     font-weight: 500;
@@ -406,3 +394,84 @@
     color: var(--color-text-muted);
     text-align: center;
 }
+
+.files-grid-view .file-item .file-icon {
+    margin: auto;
+    margin-bottom: 10px;
+}
+
+/* biome-ignore lint/style/noDescendingSpecificity: biome is lost with temp element <i> */
+.files-grid-view .file-item .file-icon > i,
+.files-grid-view .file-item .file-icon > svg {
+    position: absolute;
+    top: 5px;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ----------------------- dragged items -----------*/
+
+.dragged-items {
+    --dragged-files-list-columns: 36px minmax(200px, 1fr);
+    flex-direction: column;
+    background-color: transparent;
+    overflow: hidden;
+    border-radius: 10px;
+    width: 100%;
+}
+
+.dragged-items .file-item {
+    grid-template-columns: var(--dragged-files-list-columns);
+    column-gap: 12px;
+    align-items: center;
+    background-color: var(--color-bg-surface);
+    display: flex;
+    padding: 4px;
+    width: 360px;
+    height: 46px;
+    color: var(--color-text);
+}
+
+/* file name, text is wrapped */
+.dragged-items .file-item div:nth-child(2) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dragged-items .file-item .file-icon {
+    width: 36px;
+    height: 36px;
+}
+
+.dragged-items div.fading {
+    -webkit-mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
+    mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
+}
+
+.dragged-items-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    transform: translate(50%, -50%);
+
+    background: var(--color-content-debug-bg);
+    color: var(--color-content-debug-text);
+
+    border-radius: 50%;
+    min-width: 20px;
+    height: 20px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 12px;
+    font-weight: bold;
+
+    padding: 2px;
+}
diff --git a/static/css/layout/content.css b/static/css/layout/content.css
index 37a9e191..6a5dd874 100644
--- a/static/css/layout/content.css
+++ b/static/css/layout/content.css
@@ -56,99 +56,3 @@
     pointer-events: none;
     width: 360px;
 }
-
-.dragged-items {
-    --dragged-files-list-columns: 36px minmax(200px, 1fr);
-    /*display: flex;*/
-    flex-direction: column;
-    /*width: 360px;*/
-    background-color: transparent;
-    overflow: hidden;
-    border-radius: 10px;
-    width: 100%;
-    /*box-shadow: 0 1px 3px var(--color-shadow-xs);*/
-}
-
-.dragged-items .file-item {
-    display: grid;
-    grid-template-columns: var(--dragged-files-list-columns);
-    column-gap: 12px;
-    padding: 12px 15px;
-    /*border-bottom: 1px solid var(--color-border-xfaint);*/
-    align-items: center;
-    background-color: var(--color-bg-surface);
-}
-
-.dragged-items .file-item {
-    display: flex;
-    padding: 4px;
-    width: 336px;
-    height: 46px;
-}
-
-/* file name, text is wrapped */
-.dragged-items .file-item div:nth-child(2) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.dragged-items .file-item .file-icon {
-    background-color: var(--color-warning-bg);
-    position: relative;
-    width: 36px;
-    height: 36px;
-    margin-bottom: 0;
-}
-
-.dragged-items .file-item .file-icon.folder-icon {
-    background-color: var(--color-warning-bg);
-    position: relative;
-    width: 36px;
-    height: 36px;
-    margin-bottom: 0;
-}
-.dragged-items .file-item .file-icon.folder-icon::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 8px;
-    background-color: var(--color-warning-bg-dark);
-    border-radius: 8px 8px 0 0;
-}
-
-.dragged-items .file-item .file-icon.folder-icon i,
-.dragged-items .file-item .file-icon.folder-icon svg {
-    display: none;
-}
-
-.dragged-items div.fading {
-    -webkit-mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
-    mask-image: linear-gradient(to bottom, var(--color-bg-surface) 10%, transparent);
-}
-
-.dragged-items-badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    transform: translate(50%, -50%);
-
-    background: var(--color-content-debug-bg);
-    color: var(--color-content-debug-text);
-
-    border-radius: 50%;
-    min-width: 20px;
-    height: 20px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    font-size: 12px;
-    font-weight: bold;
-
-    padding: 2px;
-}
diff --git a/static/css/main.css b/static/css/main.css
index c6d554b8..97ee96bc 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,5 +1,6 @@
 /* Base */
 @import url("./base/variables.css");
+
 @import url("./base/reset.css");
 @import url("./base/forms.css");
 
@@ -11,8 +12,8 @@
 /* Components */
 @import url("./components/breadcrumb.css");
 @import url("./components/buttons.css");
-@import url("./components/cards.css");
-@import url("./components/fileList.css");
+@import url("./components/fileType.css");
+@import url("./components/filesView.css");
 @import url("./components/contextMenu.css");
 @import url("./components/dialogs.css");
 @import url("./components/modals.css");
diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css
index 7c026e69..b35ede0d 100644
--- a/static/css/themes/dark.css
+++ b/static/css/themes/dark.css
@@ -76,6 +76,10 @@
     /* Sidebar */
     --color-sidebar-bg-from: #0f172a;
     --color-sidebar-bg-to: #0c1322;
+
+    /* Items */
+    --color-item-selected: #1a1520;
+    --color-item-hover-accent: #1f1926;
 }
 
 /* ------------ */
@@ -234,6 +238,7 @@
 }
 
 /* ── cards.css ── */
+/* FIXME
 [data-theme="dark"] .files-grid-view .file-item {
     background-color: var(--color-bg-surface);
     border-color: var(--color-border);
@@ -244,11 +249,6 @@
     box-shadow: 0 4px 12px var(--color-shadow-3xl);
 }
 
-[data-theme="dark"] .files-grid-view .file-item.selected {
-    border-color: var(--color-accent);
-    background: var(--color-item-selected-dark);
-}
-
 [data-theme="dark"] .files-grid-view .file-item .checkbox-cell {
     background: var(--color-bg-surface);
     border-color: var(--color-border-medium);
@@ -274,6 +274,7 @@
 [data-theme="dark"] .files-grid-view .file-item.drop-target {
     background-color: var(--color-warning-ring-xs);
 }
+*/
 
 /* ── csp-utilities.css ── */
 [data-theme="dark"] .empty-state-icon {
@@ -627,6 +628,7 @@
 }
 
 /* ── fileList.css ── */
+/* FIXME
 [data-theme="dark"] .files-list-view {
     background-color: var(--color-bg-surface);
     box-shadow: 0 1px 3px var(--color-shadow-xs);
@@ -647,14 +649,6 @@
     background-color: var(--color-bg-hover);
 }
 
-[data-theme="dark"] .files-list-view .file-item.selected {
-    background-color: var(--color-item-selected);
-}
-
-[data-theme="dark"] .files-list-view .file-item.selected:hover {
-    background-color: var(--color-item-hover-accent);
-}
-
 [data-theme="dark"] .files-list-view .file-item .name-cell {
     color: var(--color-text-heading);
 }
@@ -684,6 +678,7 @@
     background: var(--color-border);
     color: var(--color-text-heading);
 }
+*/
 
 /* ── languageSelector.css ── */
 [data-theme="dark"] .language-selector-toggle {