diff --git a/static/css/room.css b/static/css/room.css
new file mode 100644
index 0000000..0037a61
--- /dev/null
+++ b/static/css/room.css
@@ -0,0 +1,301 @@
+.file-name-ellipsis {
+ max-width: 140px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: inline-block;
+ vertical-align: bottom;
+}
+
+@media (min-width: 992px) {
+ .file-name-ellipsis {
+ max-width: 180px;
+ }
+}
+
+.file-action-btn {
+ min-width: 32px;
+ min-height: 32px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 5px;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.15s;
+}
+
+.card:hover > .card-footer .file-action-btn {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+.card-footer.bg-white.border-0.d-flex.justify-content-center.gap-2 {
+ min-height: 40px;
+}
+
+.card.file-card {
+ cursor: pointer;
+}
+
+.card.file-card .select-item-checkbox,
+.card.file-card .file-action-btn {
+ cursor: pointer;
+}
+
+#upBtn.hidden {
+ display: none !important;
+}
+
+#fileGrid.list-view {
+ display: block;
+ padding: 0;
+}
+
+#fileGrid.list-view table {
+ width: 100%;
+ border-collapse: collapse;
+ background: #fff;
+}
+
+#fileGrid.list-view th,
+#fileGrid.list-view td {
+ padding: 0.5rem 1rem;
+ border-bottom: 1px solid #e9ecef;
+ text-align: left;
+ font-size: 0.95rem;
+ vertical-align: middle;
+}
+
+#fileGrid.list-view th {
+ background: #f8f9fa;
+ color: #6c757d;
+ font-weight: 500;
+}
+
+#fileGrid.list-view tr:hover td {
+ background-color: rgba(22, 118, 123, 0.08);
+ transition: background 0.15s;
+}
+
+#fileGrid.list-view .file-icon {
+ width: 40px;
+ text-align: center;
+}
+
+#fileGrid.list-view .file-actions {
+ min-width: 90px;
+ text-align: right;
+}
+
+#fileGrid.list-view .file-action-btn {
+ opacity: 1;
+ pointer-events: auto;
+ min-width: 28px;
+ min-height: 28px;
+ font-size: 0.875rem;
+ margin-left: 0.25rem;
+}
+
+.list-view-header {
+ display: grid;
+ grid-template-columns: 40px 2fr 1fr 1fr 1fr;
+ padding: 0.5rem 1rem;
+ background-color: #f8f9fa;
+ border-bottom: 1px solid #e9ecef;
+ color: #6c757d;
+ font-size: 0.875rem;
+ font-weight: 500;
+ margin-bottom: 0.5rem;
+}
+
+.btn-group.btn-group-sm .btn {
+ background-color: #fff;
+ border-color: #e9ecef;
+ color: #6c757d;
+ transition: background-color 0.15s, color 0.15s;
+}
+
+.btn-group.btn-group-sm .btn.active,
+.btn-group.btn-group-sm .btn:active {
+ background-color: #e6f3f4 !important;
+ color: #16767b !important;
+ border-color: #16767b !important;
+ box-shadow: none;
+}
+
+.btn-group.btn-group-sm .btn:focus {
+ box-shadow: 0 0 0 0.1rem #16767b33;
+}
+
+.btn-group.btn-group-sm .btn:hover:not(.active) {
+ background-color: #f8f9fa;
+ color: #16767b;
+}
+
+#fileGrid.table-mode {
+ padding: 0;
+}
+
+#fileGrid.table-mode table {
+ width: 100%;
+ border-collapse: collapse;
+ background: #fff;
+}
+
+#fileGrid.table-mode th,
+#fileGrid.table-mode td {
+ padding: 0.5rem 1rem;
+ border-bottom: 1px solid #e9ecef;
+ text-align: left;
+ font-size: 0.95rem;
+ vertical-align: middle;
+}
+
+#fileGrid.table-mode th {
+ background: #f8f9fa;
+ color: #6c757d;
+ font-weight: 500;
+}
+
+#fileGrid.table-mode tr:hover td {
+ background-color: rgba(22, 118, 123, 0.08);
+ transition: background 0.15s;
+}
+
+#fileGrid.table-mode .file-icon {
+ width: 40px;
+ text-align: center;
+}
+
+#fileGrid.table-mode .file-actions {
+ min-width: 90px;
+ text-align: right;
+}
+
+#fileGrid.table-mode .file-action-btn {
+ opacity: 1;
+ pointer-events: auto;
+ min-width: 28px;
+ min-height: 28px;
+ font-size: 0.875rem;
+ margin-left: 0.25rem;
+}
+
+/* Disable text selection for file grid and table rows/cards */
+#fileGrid,
+#fileGrid * {
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+}
+
+#fileGrid .card.file-card {
+ cursor: pointer;
+}
+
+#fileGrid.list-view tr {
+ cursor: pointer;
+}
+
+#fileGrid.table-mode tr {
+ cursor: pointer;
+}
+
+#fileGrid.table-mode tr.selected {
+ background-color: #e6f3f4 !important;
+}
+
+.details-sidebar {
+ background: #f8fafc;
+ border-left: 1.5px solid #e6f3f4;
+ box-shadow: -2px 0 8px rgba(0,0,0,0.08);
+ font-size: 0.97rem;
+ width: 320px;
+ height: 100%;
+ right: 0;
+ top: 0;
+ left: auto;
+ border-radius: 0;
+ position: fixed;
+ z-index: 1050;
+ padding: 1.3rem 1.2rem 1.2rem 1.2rem;
+ overflow-y: auto;
+}
+
+.sidebar-ellipsis {
+ max-width: 220px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: block;
+}
+
+.sidebar-path-wrap {
+ max-width: 220px;
+ overflow-x: auto;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ font-size: 0.91rem;
+}
+
+.details-sidebar h5,
+.details-sidebar .fw-bold {
+ font-size: 1.05rem;
+ color: #16767b;
+}
+
+.details-sidebar strong {
+ color: #16767b;
+ font-weight: 500;
+}
+
+.details-sidebar .rounded-circle {
+ border: 1.5px solid #e6f3f4;
+}
+
+.details-sidebar hr {
+ margin: 0.7rem 0 0.5rem 0;
+ border-color: #e6f3f4;
+}
+
+.sidebar-meta-grid {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 0.2rem 0.7rem;
+ font-size: 0.91rem;
+ color: #555;
+ margin-bottom: 0.2rem;
+}
+
+.sidebar-meta-grid div:first-child {
+ color: #16767b;
+ font-weight: 500;
+}
+
+@media (max-width: 900px) {
+ .details-sidebar {
+ width: 100vw !important;
+ right: 0;
+ left: 0;
+ border-radius: 0;
+ top: 0;
+ transform: none;
+ max-width: 100vw;
+ max-height: 100vh;
+ padding: 1.1rem 0.7rem 0.7rem 0.7rem;
+ }
+
+ .sidebar-ellipsis,
+ .sidebar-path-wrap {
+ max-width: 90vw;
+ }
+}
+
+.progress-bar {
+ background-color: #16767b !important;
+ color: #fff !important;
+ transition: background-color 0.2s;
+}
\ No newline at end of file
diff --git a/templates/rooms/room.html b/templates/rooms/room.html
index 4f3cfa8..bba89b0 100644
--- a/templates/rooms/room.html
+++ b/templates/rooms/room.html
@@ -4,6 +4,7 @@
{% block content %}
+