diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 00000000..1b0be91c
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,929 @@
+/* Reset y estilos base */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body {
+    display: flex;
+    height: 100vh;
+    background-color: #f5f7fa;
+    overflow: hidden;
+}
+
+/* Barra lateral */
+.sidebar {
+    width: 250px;
+    background-color: #2a3042;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex-shrink: 0;
+}
+
+.logo-container {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.logo {
+    width: 40px;
+    height: 40px;
+    background-color: #ff5e3a;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+}
+
+.logo svg {
+    width: 24px;
+    height: 24px;
+    fill: white;
+}
+
+.app-name {
+    font-size: 18px;
+    font-weight: bold;
+    color: white;
+}
+
+.nav-menu {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 0 15px;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 15px;
+    margin-bottom: 5px;
+    border-radius: 8px;
+    cursor: pointer;
+    color: white;
+    font-size: 16px;
+}
+
+.nav-item:hover {
+    background-color: #3a4157;
+}
+
+.nav-item.active {
+    background-color: #374e65;
+}
+
+.nav-item i {
+    margin-right: 15px;
+    width: 20px;
+    text-align: center;
+}
+
+/* Indicador de almacenamiento */
+.storage-container {
+    margin: 20px 15px;
+    background-color: #374e65;
+    border-radius: 8px;
+    padding: 15px;
+}
+
+.storage-title {
+    text-align: center;
+    margin-bottom: 10px;
+    font-size: 14px;
+}
+
+.storage-bar {
+    height: 10px;
+    background-color: #6b7e8f;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.storage-fill {
+    height: 100%;
+    background-color: #ff5e3a;
+    width: 56%;
+}
+
+.storage-info {
+    text-align: center;
+    font-size: 12px;
+    color: #f5f5f5;
+}
+
+/* Contenido principal */
+.main-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Barra superior */
+.top-bar {
+    height: 70px;
+    background-color: white;
+    border-bottom: 1px solid #e6e6e6;
+    display: flex;
+    align-items: center;
+    padding: 0 30px;
+    justify-content: space-between;
+}
+
+.search-container {
+    flex-grow: 1;
+    max-width: 500px;
+    position: relative;
+    margin-right: 20px;
+}
+
+.search-container input {
+    width: 100%;
+    padding: 10px 15px 10px 40px;
+    border-radius: 50px;
+    border: none;
+    background-color: #f0f3f7;
+    font-size: 14px;
+    height: 40px;
+}
+
+.search-icon {
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #8895a7;
+    font-size: 16px;
+}
+
+.user-controls {
+    display: flex;
+    align-items: center;
+}
+
+.language-selector {
+    margin-right: 15px;
+    padding: 5px 12px;
+    background-color: #f0f3f7;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+}
+
+.language-selector::after {
+    content: "▼";
+    font-size: 8px;
+    margin-left: 5px;
+    color: #718096;
+}
+
+.user-avatar {
+    width: 40px;
+    height: 40px;
+    background-color: #ff5e3a;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+}
+
+/* Área de contenido */
+.content-area {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.page-title {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: #2d3748;
+}
+
+.actions-bar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+.btn {
+    padding: 10px 20px;
+    border-radius: 50px;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.btn-primary {
+    background-color: #ff5e3a;
+    color: white;
+}
+
+.btn-secondary {
+    background-color: #f0f3f7;
+    color: #333;
+}
+
+.view-toggle {
+    display: flex;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.toggle-btn {
+    background-color: #f0f3f7;
+    border: none;
+    padding: 8px 15px;
+    cursor: pointer;
+}
+
+.toggle-btn.active {
+    background-color: #e6e6e6;
+}
+
+/* Files grid */
+.files-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+}
+
+.file-card {
+    background-color: white;
+    border-radius: 8px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.file-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+}
+
+.file-card.dragging {
+    opacity: 0.5;
+    transform: scale(0.95);
+    box-shadow: none;
+}
+
+.file-card.drop-target {
+    background-color: rgba(255, 193, 7, 0.1);
+    border: 2px dashed #ffc107;
+}
+
+/* Estilos para las carpetas como en el mockup */
+.file-icon.folder-icon {
+    width: 100px;
+    height: 70px;
+    background-color: #ffeaa7; /* Color amarillo claro */
+    border-radius: 8px;
+    position: relative;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-icon.folder-icon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 20px;
+    background-color: #fdcb6e; /* Color amarillo más oscuro para la pestaña */
+    border-radius: 8px 8px 0 0;
+}
+
+.file-icon.folder-icon i {
+    display: none; /* Ocultar el icono Font Awesome */
+}
+
+/* Estilo para documentos */
+.file-icon.doc-icon {
+    width: 100px;
+    height: 70px;
+    background-color: #e2e8f0; /* Fondo gris claro */
+    border-radius: 4px;
+    position: relative;
+    margin-bottom: 10px;
+}
+
+.file-icon.doc-icon::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 20px;
+    right: 20px;
+    height: 4px;
+    background-color: #a0aec0;
+    border-radius: 2px;
+}
+
+.file-icon.doc-icon::after {
+    content: "";
+    position: absolute;
+    top: 25px;
+    left: 20px;
+    right: 30px;
+    height: 4px;
+    background-color: #a0aec0;
+    border-radius: 2px;
+}
+
+/* Estilo para imágenes */
+.file-icon.image-icon {
+    width: 100px;
+    height: 70px;
+    background-color: #74b9ff; /* Fondo azul claro */
+    border-radius: 4px;
+    position: relative;
+    margin-bottom: 10px;
+    overflow: hidden;
+}
+
+.file-icon.image-icon::before {
+    content: "";
+    position: absolute;
+    top: 10px;
+    left: 15px;
+    width: 20px;
+    height: 20px;
+    background-color: #ffda79; /* Círculo amarillo como un sol */
+    border-radius: 50%;
+}
+
+/* Estilo para videos */
+.file-icon.video-icon {
+    width: 100px;
+    height: 70px;
+    background-color: #111; /* Fondo negro */
+    border-radius: 4px;
+    position: relative;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-icon.video-icon::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent;
+    border-left: 20px solid white; /* Triángulo de reproducción */
+}
+
+/* Estilos para archivos de código */
+.file-icon.code-icon {
+    width: 100px;
+    height: 70px;
+    background-color: #e2e8f0; /* Fondo gris claro */
+    border-radius: 4px;
+    position: relative;
+    margin-bottom: 10px;
+    border-top: 3px solid #556ee6; /* Borde superior azul */
+    overflow: hidden;
+}
+
+/* Líneas que simulan código */
+.file-icon.code-icon::before,
+.file-icon.code-icon::after {
+    content: "";
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    height: 2px;
+    background-color: #556ee6; /* Color azul para el código */
+}
+
+.file-icon.code-icon::before {
+    top: 15px;
+    width: 80%;
+}
+
+.file-icon.code-icon::after {
+    top: 25px;
+    width: 60%;
+}
+
+/* Agregar líneas adicionales para simular código */
+.file-icon.code-icon .code-line-1,
+.file-icon.code-icon .code-line-2,
+.file-icon.code-icon .code-line-3 {
+    position: absolute;
+    left: 10px;
+    height: 2px;
+    background-color: #a0aec0; /* Color gris para el código */
+}
+
+.file-icon.code-icon .code-line-1 {
+    top: 35px;
+    width: 70%;
+}
+
+.file-icon.code-icon .code-line-2 {
+    top: 45px;
+    width: 85%;
+}
+
+.file-icon.code-icon .code-line-3 {
+    top: 55px;
+    width: 50%;
+}
+
+/* Colores específicos para distintos tipos de archivo de código */
+.file-icon.json-icon {
+    border-top-color: #ffb86c; /* Naranja para JSON */
+}
+
+.file-icon.json-icon::before,
+.file-icon.json-icon::after {
+    background-color: #ffb86c;
+}
+
+.file-icon.js-icon {
+    border-top-color: #ffd43b; /* Amarillo para JavaScript */
+}
+
+.file-icon.js-icon::before,
+.file-icon.js-icon::after {
+    background-color: #ffd43b;
+}
+
+.file-icon.html-icon {
+    border-top-color: #e34c26; /* Rojo para HTML */
+}
+
+.file-icon.html-icon::before,
+.file-icon.html-icon::after {
+    background-color: #e34c26;
+}
+
+.file-icon.css-icon {
+    border-top-color: #2965f1; /* Azul para CSS */
+}
+
+.file-icon.css-icon::before,
+.file-icon.css-icon::after {
+    background-color: #2965f1;
+}
+
+.file-icon.py-icon {
+    border-top-color: #3776ab; /* Azul oscuro para Python */
+}
+
+.file-icon.py-icon::before,
+.file-icon.py-icon::after {
+    background-color: #3776ab;
+}
+
+.file-name {
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: 5px;
+    color: #2d3748;
+}
+
+.file-info {
+    font-size: 12px;
+    color: #718096;
+    text-align: center;
+}
+
+/* Lista de archivos - Estilo mejorado */
+.files-list-view {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.list-header {
+    display: grid;
+    grid-template-columns: minmax(200px, 2fr) 1fr 1fr 120px;
+    padding: 15px;
+    font-weight: 600;
+    color: #2d3748;
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #e0e6ed;
+}
+
+.file-item {
+    display: grid;
+    grid-template-columns: minmax(200px, 2fr) 1fr 1fr 120px;
+    padding: 12px 15px;
+    border-bottom: 1px solid #f0f0f0;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    background-color: white;
+}
+
+.file-item:hover {
+    background-color: #f0f8ff;
+}
+
+.file-item .name-cell {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.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;
+}
+
+.file-item .file-icon.folder-icon {
+    background-color: #ffeaa7;
+    position: relative;
+    width: 36px;
+    height: 36px;
+    margin-bottom: 0;
+}
+
+.file-item .file-icon.folder-icon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 8px;
+    background-color: #fdcb6e;
+    border-radius: 8px 8px 0 0;
+}
+
+.file-item .file-icon.folder-icon i {
+    display: none;
+}
+
+/* Iconos específicos para archivos en vista de lista */
+.file-item .file-icon.pdf-icon {
+    background-color: #fee2e2;
+}
+
+.file-item .file-icon.pdf-icon i {
+    color: #e53e3e;
+}
+
+.file-item .file-icon.image-icon {
+    background-color: #e0f2fe;
+}
+
+.file-item .file-icon.image-icon i {
+    color: #3b82f6;
+}
+
+.file-item .file-icon.video-icon {
+    background-color: #e2e8f0;
+}
+
+.file-item .file-icon.video-icon i {
+    color: #ef4444;
+}
+
+.file-item .file-icon.audio-icon {
+    background-color: #fef3c7;
+}
+
+.file-item .file-icon.audio-icon i {
+    color: #f59e0b;
+}
+
+.file-item .file-icon.text-icon {
+    background-color: #f3f4f6;
+}
+
+.file-item .file-icon.text-icon i {
+    color: #6b7280;
+}
+
+.file-item .date-cell {
+    color: #718096;
+    font-size: 14px;
+}
+
+.file-item .size-cell {
+    color: #718096;
+    font-size: 14px;
+    text-align: right;
+}
+
+.file-item .type-cell {
+    color: #4b5563;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.file-item.dragging {
+    opacity: 0.5;
+    background-color: #f9fafb;
+}
+
+.file-item.drop-target {
+    background-color: rgba(255, 193, 7, 0.1);
+    border: 2px dashed #ffc107;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    font-size: 14px;
+    color: #666;
+}
+
+.breadcrumb-item {
+    cursor: pointer;
+}
+
+.breadcrumb-item:hover {
+    text-decoration: underline;
+}
+
+.breadcrumb-separator {
+    margin: 0 8px;
+}
+
+/* Context menu */
+.context-menu {
+    position: absolute;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    padding: 5px 0;
+    min-width: 150px;
+    z-index: 1000;
+    display: none;
+}
+
+.context-menu-item {
+    padding: 8px 15px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #333;
+}
+
+.context-menu-item:hover {
+    background-color: #f0f8ff;
+}
+
+.context-menu-item i {
+    margin-right: 8px;
+    width: 16px;
+    text-align: center;
+}
+
+/* Dialog */
+.rename-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    display: none;
+}
+
+.rename-dialog-content {
+    background-color: white;
+    border-radius: 8px;
+    padding: 20px;
+    width: 400px;
+    max-width: 90%;
+}
+
+.rename-dialog-header {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 15px;
+}
+
+.rename-dialog input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.rename-dialog-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+/* Dropzone */
+.dropzone {
+    border: 2px dashed #ddd;
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+    margin: 20px 0;
+    color: #666;
+    display: none;
+}
+
+.dropzone.active {
+    border-color: #ff5e3a;
+    background-color: rgba(255, 94, 58, 0.05);
+}
+
+.upload-progress {
+    margin-top: 15px;
+    width: 100%;
+    display: none;
+}
+
+.progress-bar {
+    background-color: #f0f0f0;
+    height: 6px;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background-color: #ff5e3a;
+    width: 0%;
+    transition: width 0.3s;
+}
+
+/* Notificación */
+.notification {
+    position: absolute;
+    top: 70px;
+    right: 20px;
+    background-color: white;
+    width: 250px;
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    padding: 15px;
+    border-left: 4px solid #ff5e3a;
+    z-index: 1000;
+    display: none;
+}
+
+.notification-title {
+    font-weight: bold;
+    font-size: 14px;
+    margin-bottom: 5px;
+    color: #2d3748;
+}
+
+.notification-message {
+    font-size: 12px;
+    color: #718096;
+}
+
+/* Compartir diálogo */
+.share-dialog {
+    position: absolute;
+    top: 50%;
+    right: 50px;
+    width: 250px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+    z-index: 1000;
+    padding: 15px;
+}
+
+.share-title {
+    font-weight: bold;
+    margin-bottom: 15px;
+    color: #2d3748;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e0e6ed;
+}
+
+.share-user {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.user-avatar-small {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #dfe4ea;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    margin-right: 10px;
+}
+
+.user-name {
+    font-size: 13px;
+    color: #2d3748;
+}
+
+.add-user {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    margin-top: 10px;
+    background-color: #f0f3f7;
+    border-radius: 50px;
+    cursor: pointer;
+    font-size: 13px;
+    color: #718096;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 60px;
+        padding: 15px 10px;
+    }
+
+    .app-name, .storage-title, .storage-info {
+        display: none;
+    }
+
+    .nav-item {
+        justify-content: center;
+        padding: 12px 0;
+    }
+
+    .nav-item i {
+        margin-right: 0;
+    }
+
+    .nav-item span {
+        display: none;
+    }
+}
+
+/* Folder selection for move dialog */
+.folder-select-item {
+    padding: 8px 10px;
+    margin-bottom: 5px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.folder-select-item:hover {
+    background-color: #f0f8ff;
+}
+
+.folder-select-item.selected {
+    background-color: #e6f7ff;
+    border-left: 3px solid #1890ff;
+}
+
+.folder-select-item i {
+    margin-right: 8px;
+    color: #ffc107;
+}
diff --git a/static/index.html b/static/index.html
index b0c0373f..0c138250 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3,822 +3,21 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title data-i18n="app.title">RustCloud</title>
-    <style>
-        /* Reset y estilos base */
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        }
-
-        body {
-            display: flex;
-            height: 100vh;
-            background-color: #f5f7fa;
-            overflow: hidden;
-        }
-
-        /* Barra lateral */
-        .sidebar {
-            width: 250px;
-            background-color: #2a3042;
-            color: #fff;
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            flex-shrink: 0;
-        }
-
-        .logo-container {
-            padding: 20px;
-            display: flex;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-
-        .logo {
-            width: 40px;
-            height: 40px;
-            background-color: #ff5e3a;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 10px;
-        }
-
-        .logo svg {
-            width: 24px;
-            height: 24px;
-            fill: white;
-        }
-
-        .app-name {
-            font-size: 18px;
-            font-weight: bold;
-            color: white;
-        }
-
-        .nav-menu {
-            display: flex;
-            flex-direction: column;
-            flex-grow: 1;
-            padding: 0 15px;
-        }
-
-        .nav-item {
-            display: flex;
-            align-items: center;
-            padding: 12px 15px;
-            margin-bottom: 5px;
-            border-radius: 8px;
-            cursor: pointer;
-            color: white;
-            font-size: 16px;
-        }
-
-        .nav-item:hover {
-            background-color: #3a4157;
-        }
-
-        .nav-item.active {
-            background-color: #374e65;
-        }
-
-        .nav-item i {
-            margin-right: 15px;
-            width: 20px;
-            text-align: center;
-        }
-
-        /* Indicador de almacenamiento */
-        .storage-container {
-            margin: 20px 15px;
-            background-color: #374e65;
-            border-radius: 8px;
-            padding: 15px;
-        }
-
-        .storage-title {
-            text-align: center;
-            margin-bottom: 10px;
-            font-size: 14px;
-        }
-
-        .storage-bar {
-            height: 10px;
-            background-color: #6b7e8f;
-            border-radius: 5px;
-            overflow: hidden;
-            margin-bottom: 10px;
-        }
-
-        .storage-fill {
-            height: 100%;
-            background-color: #ff5e3a;
-            width: 56%;
-        }
-
-        .storage-info {
-            text-align: center;
-            font-size: 12px;
-            color: #f5f5f5;
-        }
-
-        /* Contenido principal */
-        .main-content {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
-        /* Barra superior */
-        .top-bar {
-            height: 70px;
-            background-color: white;
-            border-bottom: 1px solid #e6e6e6;
-            display: flex;
-            align-items: center;
-            padding: 0 30px;
-            justify-content: space-between;
-        }
-
-        .search-container {
-            flex-grow: 1;
-            max-width: 500px;
-            position: relative;
-            margin-right: 20px;
-        }
-
-        .search-container input {
-            width: 100%;
-            padding: 10px 15px 10px 40px;
-            border-radius: 50px;
-            border: none;
-            background-color: #f0f3f7;
-            font-size: 14px;
-            height: 40px;
-        }
-
-        .search-icon {
-            position: absolute;
-            left: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #8895a7;
-            font-size: 16px;
-        }
-
-        .user-controls {
-            display: flex;
-            align-items: center;
-        }
-
-        .language-selector {
-            margin-right: 15px;
-            padding: 5px 12px;
-            background-color: #f0f3f7;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-        }
-
-        .language-selector::after {
-            content: "▼";
-            font-size: 8px;
-            margin-left: 5px;
-            color: #718096;
-        }
-
-        .user-avatar {
-            width: 40px;
-            height: 40px;
-            background-color: #ff5e3a;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-weight: bold;
-        }
-
-        /* Área de contenido */
-        .content-area {
-            flex-grow: 1;
-            padding: 20px;
-            overflow-y: auto;
-        }
-
-        .page-title {
-            font-size: 24px;
-            font-weight: bold;
-            margin-bottom: 20px;
-            color: #2d3748;
-        }
-
-        .actions-bar {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 20px;
-        }
-
-        .action-buttons {
-            display: flex;
-            gap: 10px;
-        }
-
-        .btn {
-            padding: 10px 20px;
-            border-radius: 50px;
-            border: none;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-        }
-
-        .btn-primary {
-            background-color: #ff5e3a;
-            color: white;
-        }
-
-        .btn-secondary {
-            background-color: #f0f3f7;
-            color: #333;
-        }
-
-        .view-toggle {
-            display: flex;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-
-        .toggle-btn {
-            background-color: #f0f3f7;
-            border: none;
-            padding: 8px 15px;
-            cursor: pointer;
-        }
-
-        .toggle-btn.active {
-            background-color: #e6e6e6;
-        }
-
-        /* Files grid */
-        .files-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 20px;
-        }
-
-        .file-card {
-            background-color: white;
-            border-radius: 8px;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-            cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-
-        .file-card:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
-        }
-
-        .file-card.dragging {
-            opacity: 0.5;
-            transform: scale(0.95);
-            box-shadow: none;
-        }
-
-        .file-card.drop-target {
-            background-color: rgba(255, 193, 7, 0.1);
-            border: 2px dashed #ffc107;
-        }
-
-        /* Estilos para las carpetas como en el mockup */
-        .file-icon.folder-icon {
-            width: 100px;
-            height: 70px;
-            background-color: #ffeaa7; /* Color amarillo claro */
-            border-radius: 8px;
-            position: relative;
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .file-icon.folder-icon::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 20px;
-            background-color: #fdcb6e; /* Color amarillo más oscuro para la pestaña */
-            border-radius: 8px 8px 0 0;
-        }
-
-        .file-icon.folder-icon i {
-            display: none; /* Ocultar el icono Font Awesome */
-        }
-
-        /* Estilo para documentos */
-        .file-icon.doc-icon {
-            width: 100px;
-            height: 70px;
-            background-color: #e2e8f0; /* Fondo gris claro */
-            border-radius: 4px;
-            position: relative;
-            margin-bottom: 10px;
-        }
-
-        .file-icon.doc-icon::before {
-            content: "";
-            position: absolute;
-            top: 15px;
-            left: 20px;
-            right: 20px;
-            height: 4px;
-            background-color: #a0aec0;
-            border-radius: 2px;
-        }
-
-        .file-icon.doc-icon::after {
-            content: "";
-            position: absolute;
-            top: 25px;
-            left: 20px;
-            right: 30px;
-            height: 4px;
-            background-color: #a0aec0;
-            border-radius: 2px;
-        }
-
-        /* Estilo para imágenes */
-        .file-icon.image-icon {
-            width: 100px;
-            height: 70px;
-            background-color: #74b9ff; /* Fondo azul claro */
-            border-radius: 4px;
-            position: relative;
-            margin-bottom: 10px;
-            overflow: hidden;
-        }
-
-        .file-icon.image-icon::before {
-            content: "";
-            position: absolute;
-            top: 10px;
-            left: 15px;
-            width: 20px;
-            height: 20px;
-            background-color: #ffda79; /* Círculo amarillo como un sol */
-            border-radius: 50%;
-        }
-
-        /* Estilo para videos */
-        .file-icon.video-icon {
-            width: 100px;
-            height: 70px;
-            background-color: #111; /* Fondo negro */
-            border-radius: 4px;
-            position: relative;
-            margin-bottom: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .file-icon.video-icon::before {
-            content: "";
-            width: 0;
-            height: 0;
-            border-top: 15px solid transparent;
-            border-bottom: 15px solid transparent;
-            border-left: 20px solid white; /* Triángulo de reproducción */
-        }
-
-        /* Estilos para archivos de código */
-        .file-icon.code-icon {
-            width: 100px;
-            height: 70px;
-            background-color: #e2e8f0; /* Fondo gris claro */
-            border-radius: 4px;
-            position: relative;
-            margin-bottom: 10px;
-            border-top: 3px solid #556ee6; /* Borde superior azul */
-            overflow: hidden;
-        }
-
-        /* Líneas que simulan código */
-        .file-icon.code-icon::before,
-        .file-icon.code-icon::after {
-            content: "";
-            position: absolute;
-            left: 10px;
-            right: 10px;
-            height: 2px;
-            background-color: #556ee6; /* Color azul para el código */
-        }
-
-        .file-icon.code-icon::before {
-            top: 15px;
-            width: 80%;
-        }
-
-        .file-icon.code-icon::after {
-            top: 25px;
-            width: 60%;
-        }
-
-        /* Agregar líneas adicionales para simular código */
-        .file-icon.code-icon .code-line-1,
-        .file-icon.code-icon .code-line-2,
-        .file-icon.code-icon .code-line-3 {
-            position: absolute;
-            left: 10px;
-            height: 2px;
-            background-color: #a0aec0; /* Color gris para el código */
-        }
-
-        .file-icon.code-icon .code-line-1 {
-            top: 35px;
-            width: 70%;
-        }
-
-        .file-icon.code-icon .code-line-2 {
-            top: 45px;
-            width: 85%;
-        }
-
-        .file-icon.code-icon .code-line-3 {
-            top: 55px;
-            width: 50%;
-        }
-
-        /* Colores específicos para distintos tipos de archivo de código */
-        .file-icon.json-icon {
-            border-top-color: #ffb86c; /* Naranja para JSON */
-        }
-
-        .file-icon.json-icon::before,
-        .file-icon.json-icon::after {
-            background-color: #ffb86c;
-        }
-
-        .file-icon.js-icon {
-            border-top-color: #ffd43b; /* Amarillo para JavaScript */
-        }
-
-        .file-icon.js-icon::before,
-        .file-icon.js-icon::after {
-            background-color: #ffd43b;
-        }
-
-        .file-icon.html-icon {
-            border-top-color: #e34c26; /* Rojo para HTML */
-        }
-
-        .file-icon.html-icon::before,
-        .file-icon.html-icon::after {
-            background-color: #e34c26;
-        }
-
-        .file-icon.css-icon {
-            border-top-color: #2965f1; /* Azul para CSS */
-        }
-
-        .file-icon.css-icon::before,
-        .file-icon.css-icon::after {
-            background-color: #2965f1;
-        }
-
-        .file-icon.py-icon {
-            border-top-color: #3776ab; /* Azul oscuro para Python */
-        }
-
-        .file-icon.py-icon::before,
-        .file-icon.py-icon::after {
-            background-color: #3776ab;
-        }
-
-        .file-name {
-            font-size: 14px;
-            font-weight: 500;
-            text-align: center;
-            margin-bottom: 5px;
-            color: #2d3748;
-        }
-
-        .file-info {
-            font-size: 12px;
-            color: #718096;
-            text-align: center;
-        }
-
-        /* Lista de archivos */
-        .files-list-view {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-        }
-
-        .list-header {
-            display: grid;
-            grid-template-columns: minmax(200px, 2fr) 1fr 1fr 120px;
-            padding: 10px 15px;
-            border-bottom: 1px solid #e0e6ed;
-            font-weight: bold;
-            color: #2d3748;
-            background-color: #f8f9fa;
-        }
-
-        .file-item {
-            display: grid;
-            grid-template-columns: minmax(200px, 2fr) 1fr 1fr 120px;
-            padding: 12px 15px;
-            border-bottom: 1px solid #f0f0f0;
-            align-items: center;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-
-        .file-item:hover {
-            background-color: #f0f8ff;
-        }
-
-        .file-item .name-cell {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .file-item .file-icon {
-            font-size: 20px;
-            margin-bottom: 0;
-            width: auto;
-            height: auto;
-        }
-
-        /* Breadcrumb */
-        .breadcrumb {
-            display: flex;
-            align-items: center;
-            margin-bottom: 15px;
-            font-size: 14px;
-            color: #666;
-        }
-
-        .breadcrumb-item {
-            cursor: pointer;
-        }
-
-        .breadcrumb-item:hover {
-            text-decoration: underline;
-        }
-
-        .breadcrumb-separator {
-            margin: 0 8px;
-        }
-
-        /* Context menu */
-        .context-menu {
-            position: absolute;
-            background-color: white;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            padding: 5px 0;
-            min-width: 150px;
-            z-index: 1000;
-            display: none;
-        }
-
-        .context-menu-item {
-            padding: 8px 15px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            color: #333;
-        }
-
-        .context-menu-item:hover {
-            background-color: #f0f8ff;
-        }
-
-        .context-menu-item i {
-            margin-right: 8px;
-            width: 16px;
-            text-align: center;
-        }
-
-        /* Dialog */
-        .rename-dialog {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 2000;
-            display: none;
-        }
-
-        .rename-dialog-content {
-            background-color: white;
-            border-radius: 8px;
-            padding: 20px;
-            width: 400px;
-            max-width: 90%;
-        }
-
-        .rename-dialog-header {
-            font-size: 18px;
-            font-weight: bold;
-            margin-bottom: 15px;
-        }
-
-        .rename-dialog input {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 15px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-size: 14px;
-        }
-
-        .rename-dialog-buttons {
-            display: flex;
-            justify-content: flex-end;
-            gap: 10px;
-        }
-
-        /* Dropzone */
-        .dropzone {
-            border: 2px dashed #ddd;
-            border-radius: 8px;
-            padding: 20px;
-            text-align: center;
-            margin: 20px 0;
-            color: #666;
-            display: none;
-        }
-
-        .dropzone.active {
-            border-color: #ff5e3a;
-            background-color: rgba(255, 94, 58, 0.05);
-        }
-
-        .upload-progress {
-            margin-top: 15px;
-            width: 100%;
-            display: none;
-        }
-
-        .progress-bar {
-            background-color: #f0f0f0;
-            height: 6px;
-            border-radius: 3px;
-            overflow: hidden;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background-color: #ff5e3a;
-            width: 0%;
-            transition: width 0.3s;
-        }
-
-        /* Notificación */
-        .notification {
-            position: absolute;
-            top: 70px;
-            right: 20px;
-            background-color: white;
-            width: 250px;
-            border-radius: 8px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-            padding: 15px;
-            border-left: 4px solid #ff5e3a;
-            z-index: 1000;
-            display: none;
-        }
-
-        .notification-title {
-            font-weight: bold;
-            font-size: 14px;
-            margin-bottom: 5px;
-            color: #2d3748;
-        }
-
-        .notification-message {
-            font-size: 12px;
-            color: #718096;
-        }
-
-        /* Compartir diálogo */
-        .share-dialog {
-            position: absolute;
-            top: 50%;
-            right: 50px;
-            width: 250px;
-            background-color: white;
-            border-radius: 8px;
-            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
-            z-index: 1000;
-            padding: 15px;
-        }
-
-        .share-title {
-            font-weight: bold;
-            margin-bottom: 15px;
-            color: #2d3748;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #e0e6ed;
-        }
-
-        .share-user {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-
-        .user-avatar-small {
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            background-color: #dfe4ea;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            margin-right: 10px;
-        }
-
-        .user-name {
-            font-size: 13px;
-            color: #2d3748;
-        }
-
-        .add-user {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 8px;
-            margin-top: 10px;
-            background-color: #f0f3f7;
-            border-radius: 50px;
-            cursor: pointer;
-            font-size: 13px;
-            color: #718096;
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .sidebar {
-                width: 60px;
-                padding: 15px 10px;
-            }
-
-            .app-name, .storage-title, .storage-info {
-                display: none;
-            }
-
-            .nav-item {
-                justify-content: center;
-                padding: 12px 0;
-            }
-
-            .nav-item i {
-                margin-right: 0;
-            }
-
-            .nav-item span {
-                display: none;
-            }
-        }
-    </style>
+    <title data-i18n="app.title">OxiCloud</title>
+    
+    <!-- Styles -->
+    <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
-    
-    <!-- Internationalization scripts -->
+
+    <!-- Scripts -->
     <script src="/js/i18n.js"></script>
     <script src="/js/languageSelector.js"></script>
-    <!-- File renderer -->
     <script src="/js/fileRenderer.js"></script>
+    <script src="/js/contextMenus.js"></script>
+    <script src="/js/fileOperations.js"></script>
+    <script src="/js/ui.js"></script>
+    <script src="/js/app.js"></script>
 
     <!-- Service Worker Registration -->
     <script>
@@ -832,17 +31,18 @@
     </script>
 </head>
 <body>
-    <!-- Barra lateral -->
+    <!-- Sidebar -->
     <div class="sidebar">
         <div class="logo-container">
+
             <div class="logo">
-                <svg viewBox="0 0 24 24">
-                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="#fff"/>
+                <svg viewBox="0 0 500 500">
+                    <path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z" fill="#fff"/>
                 </svg>
             </div>
-            <div class="app-name">RustCloud</div>
+            <div class="app-name">OxiCloud</div>
         </div>
-        
+
         <div class="nav-menu">
             <div class="nav-item active">
                 <i class="fas fa-folder"></i>
@@ -865,7 +65,7 @@
                 <span data-i18n="nav.trash">Trash</span>
             </div>
         </div>
-        
+
         <div class="storage-container">
             <div class="storage-title">Almacenamiento</div>
             <div class="storage-bar">
@@ -874,16 +74,16 @@
             <div class="storage-info">56% usado (5.6GB / 10GB)</div>
         </div>
     </div>
-    
-    <!-- Contenido principal -->
+
+    <!-- Main Content -->
     <div class="main-content">
-        <!-- Barra superior -->
+        <!-- Top Bar -->
         <div class="top-bar">
             <div class="search-container">
                 <i class="fas fa-search search-icon"></i>
                 <input type="text" data-i18n-placeholder="actions.search" placeholder="Buscar archivos, carpetas...">
             </div>
-            
+
             <div class="user-controls">
                 <div id="language-selector" class="language-selector">ES</div>
                 <div class="user-avatar">MR</div>
@@ -892,7 +92,7 @@
 
         <div class="content-area">
             <h1 class="page-title" data-i18n="nav.files">Archivos</h1>
-            
+
             <div class="actions-bar">
                 <div class="action-buttons">
                     <button class="btn btn-primary" id="upload-btn">
@@ -902,7 +102,7 @@
                         <i class="fas fa-folder-plus" style="margin-right: 5px;"></i> <span data-i18n="actions.new_folder">Nueva carpeta</span>
                     </button>
                 </div>
-                
+
                 <div class="view-toggle">
                     <button class="toggle-btn active" id="grid-view-btn" title="Vista de cuadrícula">
                         <i class="fas fa-th"></i>
@@ -912,7 +112,7 @@
                     </button>
                 </div>
             </div>
-            
+
             <div class="dropzone" id="dropzone">
                 <i class="fas fa-cloud-upload-alt" style="font-size: 32px; margin-bottom: 10px;"></i>
                 <p data-i18n="dropzone.drag_files">Arrastra archivos aquí o haz clic para seleccionar</p>
@@ -923,7 +123,7 @@
                     </div>
                 </div>
             </div>
-            
+
             <div class="breadcrumb">
                 <span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
             </div>
@@ -948,1334 +148,5 @@
             </div>
         </div>
     </div>
-
-    <!-- Context menus and dialogs will be created dynamically -->
-
-    <script>
-        // Add missing translations
-        window.addEventListener('DOMContentLoaded', function() {
-            // Wait for i18n to initialize
-            setTimeout(function() {
-                if (window.i18n) {
-                    // Add translations for view_grid and view_list if they're missing
-                    window.i18n.viewGridTranslation = {
-                        'en': 'Grid view',
-                        'es': 'Vista de cuadrícula'
-                    };
-                    window.i18n.viewListTranslation = {
-                        'en': 'List view',
-                        'es': 'Vista de lista'
-                    };
-                    
-                    // Apply titles to buttons
-                    document.getElementById('grid-view-btn').title = 
-                        window.i18n.viewGridTranslation[window.i18n.getCurrentLocale()] || 'Grid view';
-                    
-                    document.getElementById('list-view-btn').title = 
-                        window.i18n.viewListTranslation[window.i18n.getCurrentLocale()] || 'List view';
-                }
-            }, 500);
-        });
-
-        // Helper function to format file size
-        function formatFileSize(bytes) {
-            if (bytes === 0) return '0 Bytes';
-
-            const k = 1024;
-            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-        }
-
-        document.addEventListener('DOMContentLoaded', () => {
-            // Variables y elementos DOM globales
-            const uploadBtn = document.getElementById('upload-btn');
-            const dropzone = document.getElementById('dropzone');
-            const fileInput = document.getElementById('file-input');
-            const filesGrid = document.getElementById('files-grid');
-            const filesListView = document.getElementById('files-list-view');
-            const newFolderBtn = document.getElementById('new-folder-btn');
-            const gridViewBtn = document.getElementById('grid-view-btn');
-            const listViewBtn = document.getElementById('list-view-btn');
-
-            // Variables para menús contextuales
-            let contextMenuTargetFolder = null;
-            let contextMenuTargetFile = null;
-            let selectedTargetFolderId = "";
-            let moveDialogMode = 'file'; // 'file' o 'folder'
-
-            // Current view state
-            let currentView = 'grid'; // 'grid' or 'list'
-            let currentPath = '';
-
-            // Crear los menús contextuales y diálogos
-            initializeContextMenus();
-
-            // Configurar listeners para arrastrar y soltar archivos
-            setupDragAndDrop();
-
-            // Configurar listeners de eventos para botones
-            setupEventListeners();
-
-            // Cargar la vista inicial
-            currentPath = '';
-            updateBreadcrumb('');
-            loadFiles();
-
-            /**
-             * Inicializa los menús contextuales y diálogos
-             */
-            function initializeContextMenus() {
-                // Menú contextual para carpetas
-                if (!document.getElementById('folder-context-menu')) {
-                    const folderMenu = document.createElement('div');
-                    folderMenu.className = 'context-menu';
-                    folderMenu.id = 'folder-context-menu';
-                    folderMenu.innerHTML = `
-                        <div class="context-menu-item" id="rename-folder-option">
-                            <i class="fas fa-edit"></i> <span data-i18n="actions.rename">Renombrar</span>
-                        </div>
-                        <div class="context-menu-item" id="move-folder-option">
-                            <i class="fas fa-exchange-alt"></i> <span data-i18n="actions.move">Mover a...</span>
-                        </div>
-                        <div class="context-menu-item" id="delete-folder-option">
-                            <i class="fas fa-trash"></i> <span data-i18n="actions.delete">Eliminar</span>
-                        </div>
-                    `;
-                    document.body.appendChild(folderMenu);
-                }
-
-                // Menú contextual para archivos
-                if (!document.getElementById('file-context-menu')) {
-                    const fileMenu = document.createElement('div');
-                    fileMenu.className = 'context-menu';
-                    fileMenu.id = 'file-context-menu';
-                    fileMenu.innerHTML = `
-                        <div class="context-menu-item" id="move-file-option">
-                            <i class="fas fa-exchange-alt"></i> <span data-i18n="actions.move">Mover a...</span>
-                        </div>
-                        <div class="context-menu-item" id="delete-file-option">
-                            <i class="fas fa-trash"></i> <span data-i18n="actions.delete">Eliminar</span>
-                        </div>
-                    `;
-                    document.body.appendChild(fileMenu);
-                }
-
-                // Diálogo de renombrar
-                if (!document.getElementById('rename-dialog')) {
-                    const renameDialog = document.createElement('div');
-                    renameDialog.className = 'rename-dialog';
-                    renameDialog.id = 'rename-dialog';
-                    renameDialog.innerHTML = `
-                        <div class="rename-dialog-content">
-                            <div class="rename-dialog-header" data-i18n="dialogs.rename_folder">Renombrar carpeta</div>
-                            <input type="text" id="rename-input" data-i18n-placeholder="dialogs.new_name" placeholder="Nuevo nombre">
-                            <div class="rename-dialog-buttons">
-                                <button class="btn" id="rename-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
-                                <button class="btn btn-primary" id="rename-confirm-btn" data-i18n="actions.rename">Renombrar</button>
-                            </div>
-                        </div>
-                    `;
-                    document.body.appendChild(renameDialog);
-                }
-
-                // Diálogo de mover
-                if (!document.getElementById('move-file-dialog')) {
-                    const moveDialog = document.createElement('div');
-                    moveDialog.className = 'rename-dialog';
-                    moveDialog.id = 'move-file-dialog';
-                    moveDialog.innerHTML = `
-                        <div class="rename-dialog-content">
-                            <div class="rename-dialog-header" data-i18n="dialogs.move_file">Mover archivo</div>
-                            <p data-i18n="dialogs.select_destination">Selecciona la carpeta destino:</p>
-                            <div id="folder-select-container" style="max-height: 200px; overflow-y: auto; margin: 15px 0; border: 1px solid #ddd; border-radius: 4px; padding: 10px;">
-                                <!-- Las carpetas se cargarán aquí dinámicamente -->
-                                <div class="folder-select-item" data-folder-id="">
-                                    <i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Raíz</span>
-                                </div>
-                            </div>
-                            <div class="rename-dialog-buttons">
-                                <button class="btn" id="move-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
-                                <button class="btn btn-primary" id="move-confirm-btn" data-i18n="actions.move_to">Mover</button>
-                            </div>
-                        </div>
-                    `;
-                    document.body.appendChild(moveDialog);
-                }
-
-                // Asignar eventos a los menús y diálogos después de crearlos
-                assignMenuEvents();
-            }
-
-            /**
-             * Asigna eventos a los menús contextuales y diálogos
-             */
-            function assignMenuEvents() {
-                // Variables para elementos de los menús y diálogos
-                const folderContextMenu = document.getElementById('folder-context-menu');
-                const fileContextMenu = document.getElementById('file-context-menu');
-                const renameDialog = document.getElementById('rename-dialog');
-                const renameInput = document.getElementById('rename-input');
-                const renameCancelBtn = document.getElementById('rename-cancel-btn');
-                const renameConfirmBtn = document.getElementById('rename-confirm-btn');
-                const moveFileDialog = document.getElementById('move-file-dialog');
-                const folderSelectContainer = document.getElementById('folder-select-container');
-                const moveCancelBtn = document.getElementById('move-cancel-btn');
-                const moveConfirmBtn = document.getElementById('move-confirm-btn');
-
-                // Eventos para el menú contextual de carpetas
-                document.getElementById('rename-folder-option').addEventListener('click', () => {
-                    if (contextMenuTargetFolder) {
-                        showRenameDialog(contextMenuTargetFolder);
-                    }
-                    closeContextMenu();
-                });
-
-                document.getElementById('move-folder-option').addEventListener('click', () => {
-                    if (contextMenuTargetFolder) {
-                        showMoveDialog(contextMenuTargetFolder, 'folder');
-                    }
-                    closeContextMenu();
-                });
-
-                document.getElementById('delete-folder-option').addEventListener('click', async () => {
-                    if (contextMenuTargetFolder) {
-                        if (confirm(`¿Estás seguro de que quieres eliminar la carpeta "${contextMenuTargetFolder.name}" y todo su contenido?`)) {
-                            try {
-                                const response = await fetch(`/api/folders/${contextMenuTargetFolder.id}`, {
-                                    method: 'DELETE'
-                                });
-
-                                if (response.ok) {
-                                    // Si estamos dentro de la carpeta que acabamos de eliminar, volver al nivel superior
-                                    if (currentPath === contextMenuTargetFolder.id) {
-                                        currentPath = '';
-                                        updateBreadcrumb('');
-                                    }
-                                    loadFiles();
-                                } else {
-                                    alert('Error al eliminar la carpeta');
-                                }
-                            } catch (error) {
-                                console.error('Error deleting folder:', error);
-                                alert('Error al eliminar la carpeta');
-                            }
-                        }
-                    }
-                    closeContextMenu();
-                });
-
-                // Eventos para el menú contextual de archivos
-                document.getElementById('move-file-option').addEventListener('click', () => {
-                    if (contextMenuTargetFile) {
-                        showMoveDialog(contextMenuTargetFile, 'file');
-                    }
-                    closeFileContextMenu();
-                });
-
-                document.getElementById('delete-file-option').addEventListener('click', async () => {
-                    if (contextMenuTargetFile) {
-                        if (confirm(`¿Estás seguro de que quieres eliminar el archivo "${contextMenuTargetFile.name}"?`)) {
-                            try {
-                                const response = await fetch(`/api/files/${contextMenuTargetFile.id}`, {
-                                    method: 'DELETE'
-                                });
-
-                                if (response.ok) {
-                                    loadFiles();
-                                } else {
-                                    alert('Error al eliminar el archivo');
-                                }
-                            } catch (error) {
-                                console.error('Error deleting file:', error);
-                                alert('Error al eliminar el archivo');
-                            }
-                        }
-                    }
-                    closeFileContextMenu();
-                });
-
-                // Eventos para el diálogo de renombrar
-                renameCancelBtn.addEventListener('click', closeRenameDialog);
-                renameConfirmBtn.addEventListener('click', renameFolder);
-
-                // Eventos para el diálogo de mover
-                moveCancelBtn.addEventListener('click', closeMoveDialog);
-                moveConfirmBtn.addEventListener('click', async () => {
-                    if (moveDialogMode === 'file' && contextMenuTargetFile) {
-                        const success = await moveFile(contextMenuTargetFile.id, selectedTargetFolderId);
-                        if (success) {
-                            closeMoveDialog();
-                        }
-                    } else if (moveDialogMode === 'folder' && contextMenuTargetFolder) {
-                        const success = await moveFolder(contextMenuTargetFolder.id, selectedTargetFolderId);
-                        if (success) {
-                            closeMoveDialog();
-                        }
-                    }
-                });
-
-                // Evento para renombrar al presionar Enter en el input
-                renameInput.addEventListener('keyup', (e) => {
-                    if (e.key === 'Enter') {
-                        renameFolder();
-                    } else if (e.key === 'Escape') {
-                        closeRenameDialog();
-                    }
-                });
-
-                // Cerrar menús al hacer clic en cualquier parte
-                document.addEventListener('click', (e) => {
-                    if (folderContextMenu && folderContextMenu.style.display === 'block' &&
-                        !folderContextMenu.contains(e.target)) {
-                        closeContextMenu();
-                    }
-
-                    if (fileContextMenu && fileContextMenu.style.display === 'block' &&
-                        !fileContextMenu.contains(e.target)) {
-                        closeFileContextMenu();
-                    }
-                });
-            }
-
-            /**
-             * Configura los listeners para arrastrar y soltar archivos
-             */
-            function setupDragAndDrop() {
-                // Arrastrar y soltar en el elemento dropzone
-                dropzone.addEventListener('dragover', (e) => {
-                    e.preventDefault();
-                    dropzone.classList.add('active');
-                });
-
-                dropzone.addEventListener('dragleave', () => {
-                    dropzone.classList.remove('active');
-                });
-
-                dropzone.addEventListener('drop', (e) => {
-                    e.preventDefault();
-                    dropzone.classList.remove('active');
-                    if (e.dataTransfer.files.length > 0) {
-                        uploadFiles(e.dataTransfer.files);
-                    }
-                });
-
-                // Arrastrar y soltar en toda la página
-                document.addEventListener('dragover', (e) => {
-                    e.preventDefault();
-                    // Mostrar la zona de soltar cuando se arrastra algo sobre la página
-                    if (e.dataTransfer.types.includes('Files')) {
-                        dropzone.style.display = 'block';
-                        dropzone.classList.add('active');
-                    }
-                });
-
-                document.addEventListener('dragleave', (e) => {
-                    // Solo ocultar si el ratón sale completamente de la ventana
-                    if (e.clientX <= 0 || e.clientY <= 0 ||
-                        e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
-                        dropzone.classList.remove('active');
-                        // Opcional: ocultar después de un breve retraso
-                        setTimeout(() => {
-                            if (!dropzone.classList.contains('active')) {
-                                dropzone.style.display = 'none';
-                            }
-                        }, 100);
-                    }
-                });
-
-                document.addEventListener('drop', (e) => {
-                    e.preventDefault();
-                    dropzone.classList.remove('active');
-
-                    if (e.dataTransfer.files.length > 0) {
-                        uploadFiles(e.dataTransfer.files);
-                    }
-
-                    // Ocultar la zona después de soltar
-                    setTimeout(() => {
-                        dropzone.style.display = 'none';
-                    }, 500);
-                });
-            }
-
-            /**
-             * Configura los listeners de eventos para botones
-             */
-            function setupEventListeners() {
-                // Toggle dropzone visibility
-                uploadBtn.addEventListener('click', () => {
-                    dropzone.style.display = dropzone.style.display === 'none' ? 'block' : 'none';
-                    if (dropzone.style.display === 'block') {
-                        fileInput.click();
-                    }
-                });
-
-                // File input change event
-                fileInput.addEventListener('change', (e) => {
-                    if (e.target.files.length > 0) {
-                        uploadFiles(e.target.files);
-                    }
-                });
-
-                // New folder button
-                newFolderBtn.addEventListener('click', () => {
-                    const folderName = prompt('Nombre de la carpeta:');
-                    if (folderName) {
-                        createFolder(folderName);
-                    }
-                });
-
-                // View toggle event listeners
-                gridViewBtn.addEventListener('click', switchToGridView);
-                listViewBtn.addEventListener('click', switchToListView);
-
-                // Load saved view preference
-                const savedView = localStorage.getItem('oxicloud-view');
-                if (savedView === 'list') {
-                    switchToListView();
-                }
-            }
-
-            /**
-             * Cambia a vista de cuadrícula
-             */
-            function switchToGridView() {
-                filesGrid.style.display = 'grid';
-                filesListView.style.display = 'none';
-                gridViewBtn.classList.add('active');
-                listViewBtn.classList.remove('active');
-                currentView = 'grid';
-                localStorage.setItem('oxicloud-view', 'grid');
-            }
-
-            /**
-             * Cambia a vista de lista
-             */
-            function switchToListView() {
-                filesGrid.style.display = 'none';
-                filesListView.style.display = 'flex';
-                gridViewBtn.classList.remove('active');
-                listViewBtn.classList.add('active');
-                currentView = 'list';
-                localStorage.setItem('oxicloud-view', 'list');
-            }
-
-            /**
-             * Cierra el menú contextual de carpetas
-             */
-            function closeContextMenu() {
-                const menu = document.getElementById('folder-context-menu');
-                if (menu) {
-                    menu.style.display = 'none';
-                    contextMenuTargetFolder = null;
-                }
-            }
-
-            /**
-             * Cierra el menú contextual de archivos
-             */
-            function closeFileContextMenu() {
-                const menu = document.getElementById('file-context-menu');
-                if (menu) {
-                    menu.style.display = 'none';
-                    contextMenuTargetFile = null;
-                }
-            }
-
-            /**
-             * Muestra el diálogo de renombrar para una carpeta
-             */
-            function showRenameDialog(folder) {
-                const renameInput = document.getElementById('rename-input');
-                const renameDialog = document.getElementById('rename-dialog');
-
-                renameInput.value = folder.name;
-                renameDialog.style.display = 'flex';
-                renameInput.focus();
-                renameInput.select();
-            }
-
-            /**
-             * Cierra el diálogo de renombrar
-             */
-            function closeRenameDialog() {
-                document.getElementById('rename-dialog').style.display = 'none';
-                contextMenuTargetFolder = null;
-            }
-
-            /**
-             * Muestra el diálogo de mover para un archivo o carpeta
-             */
-            async function showMoveDialog(item, mode) {
-                // Establecer el modo (archivo o carpeta)
-                moveDialogMode = mode;
-
-                // Restablecer la selección
-                selectedTargetFolderId = "";
-
-                // Actualizar título del diálogo
-                const dialogHeader = document.getElementById('move-file-dialog').querySelector('.rename-dialog-header');
-                dialogHeader.textContent = mode === 'file' ? 
-                    (window.i18n ? window.i18n.t('dialogs.move_file') : 'Mover archivo') : 
-                    (window.i18n ? window.i18n.t('dialogs.move_folder') : 'Mover carpeta');
-
-                // Cargar todas las carpetas disponibles
-                await loadAllFolders(item.id, mode);
-
-                // Mostrar el diálogo
-                document.getElementById('move-file-dialog').style.display = 'flex';
-            }
-
-            /**
-             * Cierra el diálogo de mover
-             */
-            function closeMoveDialog() {
-                document.getElementById('move-file-dialog').style.display = 'none';
-                contextMenuTargetFile = null;
-                contextMenuTargetFolder = null;
-            }
-
-            /**
-             * Renombra la carpeta seleccionada
-             */
-            async function renameFolder() {
-                if (!contextMenuTargetFolder) return;
-
-                const newName = document.getElementById('rename-input').value.trim();
-                if (!newName) {
-                    alert(window.i18n ? window.i18n.t('errors.empty_name') : 'El nombre no puede estar vacío');
-                    return;
-                }
-
-                try {
-                    console.log(`Renaming folder ${contextMenuTargetFolder.id} to "${newName}"`);
-
-                    const response = await fetch(`/api/folders/${contextMenuTargetFolder.id}/rename`, {
-                        method: 'PUT',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({ name: newName })
-                    });
-
-                    console.log('Response status:', response.status);
-
-                    if (response.ok) {
-                        // Cerramos el diálogo y recargamos los archivos
-                        closeRenameDialog();
-                        loadFiles();
-                    } else {
-                        const errorText = await response.text();
-                        console.error('Error response:', errorText);
-
-                        let errorMessage = 'Error desconocido';
-                        try {
-                            // Intentar parsear como JSON
-                            const errorData = JSON.parse(errorText);
-                            errorMessage = errorData.error || response.statusText;
-                        } catch (e) {
-                            // Si no es JSON, usar el texto tal cual
-                            errorMessage = errorText || response.statusText;
-                        }
-
-                        alert(`Error al renombrar la carpeta: ${errorMessage}`);
-                    }
-                } catch (error) {
-                    console.error('Error renaming folder:', error);
-                    alert('Error al renombrar la carpeta. Inténtalo de nuevo.');
-                }
-            }
-
-            /**
-             * Carga todas las carpetas para el diálogo de mover
-             */
-            async function loadAllFolders(itemId, mode) {
-                try {
-                    const response = await fetch('/api/folders');
-                    if (response.ok) {
-                        const folders = await response.json();
-                        const folderSelectContainer = document.getElementById('folder-select-container');
-
-                        // Limpiar el contenedor excepto la opción de carpeta raíz
-                        folderSelectContainer.innerHTML = `
-                            <div class="folder-select-item selected" data-folder-id="">
-                                <i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Raíz</span>
-                            </div>
-                        `;
-
-                        // Seleccionar la raíz por defecto
-                        selectedTargetFolderId = "";
-
-                        // Añadir todas las carpetas disponibles
-                        if (Array.isArray(folders)) {
-                            folders.forEach(folder => {
-                                // Si es una carpeta, no mostrar:
-                                // 1. La propia carpeta que se mueve
-                                // 2. Ninguna subcarpeta de la carpeta que se mueve (para evitar ciclos)
-                                if (mode === 'folder' && folder.id === itemId) {
-                                    return;
-                                }
-
-                                // No mostrar la carpeta actual del elemento como opción
-                                if (mode === 'file' && contextMenuTargetFile && folder.id === contextMenuTargetFile.folder_id) {
-                                    return;
-                                }
-
-                                if (mode === 'folder' && contextMenuTargetFolder && folder.id === contextMenuTargetFolder.folder_id) {
-                                    return;
-                                }
-
-                                const folderItem = document.createElement('div');
-                                folderItem.className = 'folder-select-item';
-                                folderItem.dataset.folderId = folder.id;
-                                folderItem.innerHTML = `<i class="fas fa-folder"></i> ${folder.name}`;
-
-                                folderItem.addEventListener('click', () => {
-                                    // Deseleccionar todos
-                                    document.querySelectorAll('.folder-select-item').forEach(item => {
-                                        item.classList.remove('selected');
-                                    });
-
-                                    // Seleccionar este
-                                    folderItem.classList.add('selected');
-                                    selectedTargetFolderId = folder.id;
-                                });
-
-                                folderSelectContainer.appendChild(folderItem);
-                            });
-                        }
-
-                        // Evento para la opción de carpeta raíz
-                        const rootOption = folderSelectContainer.querySelector('.folder-select-item');
-                        rootOption.addEventListener('click', () => {
-                            document.querySelectorAll('.folder-select-item').forEach(item => {
-                                item.classList.remove('selected');
-                            });
-                            rootOption.classList.add('selected');
-                            selectedTargetFolderId = "";
-                        });
-
-                        // Re-traducir la página para aplicar las traducciones a los nuevos elementos
-                        if (window.i18n && window.i18n.translatePage) {
-                            window.i18n.translatePage();
-                        }
-                    }
-                } catch (error) {
-                    console.error('Error loading folders:', error);
-                }
-            }
-
-            /**
-             * Mueve un archivo a otra carpeta
-             */
-            async function moveFile(fileId, targetFolderId) {
-                try {
-                    const response = await fetch(`/api/files/${fileId}/move`, {
-                        method: 'PUT',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            folder_id: targetFolderId === "" ? null : targetFolderId
-                        })
-                    });
-
-                    if (response.ok) {
-                        // Recargar archivos después de mover
-                        await loadFiles();
-                        return true;
-                    } else {
-                        let errorMessage = 'Error desconocido';
-                        try {
-                            const errorData = await response.json();
-                            errorMessage = errorData.error || 'Error desconocido';
-                        } catch (e) {
-                            errorMessage = 'Error al procesar la respuesta del servidor';
-                        }
-                        alert(`Error al mover el archivo: ${errorMessage}`);
-                        return false;
-                    }
-                } catch (error) {
-                    console.error('Error moving file:', error);
-                    alert('Error al mover el archivo. Inténtalo de nuevo.');
-                    return false;
-                }
-            }
-
-            /**
-             * Mueve una carpeta a otra carpeta
-             */
-            async function moveFolder(folderId, targetFolderId) {
-                try {
-                    const response = await fetch(`/api/folders/${folderId}/move`, {
-                        method: 'PUT',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            parent_id: targetFolderId === "" ? null : targetFolderId
-                        })
-                    });
-
-                    if (response.ok) {
-                        // Recargar archivos después de mover
-                        await loadFiles();
-                        return true;
-                    } else {
-                        let errorMessage = 'Error desconocido';
-                        try {
-                            const errorData = await response.json();
-                            errorMessage = errorData.error || 'Error desconocido';
-                        } catch (e) {
-                            errorMessage = 'Error al procesar la respuesta del servidor';
-                        }
-                        alert(`Error al mover la carpeta: ${errorMessage}`);
-                        return false;
-                    }
-                } catch (error) {
-                    console.error('Error moving folder:', error);
-                    alert('Error al mover la carpeta. Inténtalo de nuevo.');
-                    return false;
-                }
-            }
-
-            /**
-             * Crea una nueva carpeta
-             */
-            async function createFolder(name) {
-                try {
-                    const response = await fetch('/api/folders', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            name: name,
-                            parent_id: currentPath || null
-                        })
-                    });
-
-                    if (response.ok) {
-                        loadFiles();
-                    } else {
-                        alert('Error al crear la carpeta');
-                    }
-                } catch (error) {
-                    console.error('Error creating folder:', error);
-                    alert('Error al crear la carpeta');
-                }
-            }
-
-            /**
-             * Actualiza la información de ruta (breadcrumb)
-             */
-            function updateBreadcrumb(folderName) {
-                const breadcrumb = document.querySelector('.breadcrumb');
-                breadcrumb.innerHTML = '';
-
-                const homeItem = document.createElement('span');
-                homeItem.className = 'breadcrumb-item';
-                homeItem.textContent = window.i18n ? window.i18n.t('breadcrumb.home') : 'Home';
-                homeItem.addEventListener('click', () => {
-                    currentPath = '';
-                    updateBreadcrumb('');
-                    loadFiles();
-                });
-
-                breadcrumb.appendChild(homeItem);
-
-                if (folderName) {
-                    const separator = document.createElement('span');
-                    separator.className = 'breadcrumb-separator';
-                    separator.textContent = '>';
-                    breadcrumb.appendChild(separator);
-
-                    const folderItem = document.createElement('span');
-                    folderItem.className = 'breadcrumb-item';
-                    folderItem.textContent = folderName;
-                    breadcrumb.appendChild(folderItem);
-                }
-            }
-
-            /**
-             * Carga archivos y carpetas
-             */
-            async function loadFiles() {
-                try {
-                    let url = '/api/folders';
-                    if (currentPath) {
-                        url += `/${currentPath}`;
-                    }
-
-                    const response = await fetch(url);
-                    if (!response.ok) {
-                        throw new Error(`Server responded with status: ${response.status}`);
-                    }
-                    const folders = await response.json();
-
-                    // Clear existing files in both views
-                    filesGrid.innerHTML = '';
-                    filesListView.innerHTML = `
-                        <div class="list-header">
-                            <div data-i18n="files.name">Nombre</div>
-                            <div data-i18n="files.type">Tipo</div>
-                            <div data-i18n="files.size">Tamaño</div>
-                            <div data-i18n="files.modified">Modificado</div>
-                        </div>
-                    `;
-
-                    // Re-traducir la página para aplicar las traducciones a los nuevos elementos de la cabecera
-                    if (window.i18n && window.i18n.translatePage) {
-                        window.i18n.translatePage();
-                    }
-
-                    // Add folders (check if it's an array)
-                    const folderList = Array.isArray(folders) ? folders : [];
-                    folderList.forEach(folder => {
-                        addFolderToView(folder);
-                    });
-
-                    // Also load files in this folder
-                    let filesUrl = '/api/files';
-                    if (currentPath) {
-                        filesUrl += `?folder_id=${currentPath}`;
-                    }
-
-                    try {
-                        const filesResponse = await fetch(filesUrl);
-                        if (filesResponse.ok) {
-                            const files = await filesResponse.json();
-
-                            // Add files (check if it's an array)
-                            const fileList = Array.isArray(files) ? files : [];
-                            fileList.forEach(file => {
-                                addFileToView(file);
-                            });
-                        }
-                    } catch (error) {
-                        console.error('Error loading files:', error);
-                        // File API may not be implemented yet, so we silently ignore this error
-                    }
-
-                    // Actualizar los iconos de los archivos
-                    updateFileIcons();
-                } catch (error) {
-                    console.error('Error loading files:', error);
-                }
-            }
-
-            /**
-             * Actualiza los iconos de archivos según su tipo
-             */
-            function updateFileIcons() {
-                // Buscar todos los elementos de archivo
-                const fileCards = document.querySelectorAll('.file-card');
-                
-                fileCards.forEach(card => {
-                    // Obtener el nombre del archivo si existe
-                    const fileName = card.querySelector('.file-name')?.textContent || '';
-                    
-                    // Obtener el icono existente
-                    const iconElement = card.querySelector('.file-icon');
-                    if (!iconElement) return;
-                    
-                    // Si ya tiene una clase específica, no hacer nada
-                    if (iconElement.classList.contains('folder-icon')) {
-                        // Es una carpeta, eliminar el icono de font-awesome
-                        iconElement.innerHTML = '';
-                    } 
-                    // Si es un documento
-                    else if (fileName.endsWith('.docx') || fileName.endsWith('.pdf') || fileName.endsWith('.txt') || fileName.endsWith('.xlsx')) {
-                        iconElement.classList.add('doc-icon');
-                        iconElement.innerHTML = ''; // Eliminar el icono de font-awesome
-                    }
-                    // Si es una imagen
-                    else if (fileName.endsWith('.jpg') || fileName.endsWith('.png') || fileName.endsWith('.gif') || fileName.endsWith('.jpeg')) {
-                        iconElement.classList.add('image-icon');
-                        iconElement.innerHTML = ''; // Eliminar el icono de font-awesome
-                    }
-                    // Si es un video
-                    else if (fileName.endsWith('.mp4') || fileName.endsWith('.avi') || fileName.endsWith('.mov') || fileName.endsWith('.mkv')) {
-                        iconElement.classList.add('video-icon');
-                        iconElement.innerHTML = ''; // Eliminar el icono de font-awesome
-                    }
-                    // Si es un archivo de código
-                    else {
-                        const extension = fileName.split('.').pop().toLowerCase();
-                        
-                        if (['json', 'js', 'jsx', 'ts', 'tsx', 'html', 'css', 'scss', 'py', 'java', 'c', 'cpp', 'cs', 'php', 'rb', 'go', 'rs', 'swift', 'kt'].includes(extension)) {
-                            iconElement.className = 'file-icon code-icon';
-                            iconElement.innerHTML = `
-                                <div class="code-line-1"></div>
-                                <div class="code-line-2"></div>
-                                <div class="code-line-3"></div>
-                            `;
-                            
-                            // Añadir clase específica según el tipo de archivo
-                            if (extension === 'json') {
-                                iconElement.classList.add('json-icon');
-                            } else if (['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
-                                iconElement.classList.add('js-icon');
-                            } else if (extension === 'html') {
-                                iconElement.classList.add('html-icon');
-                            } else if (['css', 'scss'].includes(extension)) {
-                                iconElement.classList.add('css-icon');
-                            } else if (extension === 'py') {
-                                iconElement.classList.add('py-icon');
-                            }
-                        }
-                    }
-                });
-            }
-
-            /**
-             * Añade una carpeta a las vistas
-             */
-            function addFolderToView(folder) {
-                // Create folder element for grid view
-                const folderGridElement = document.createElement('div');
-                folderGridElement.className = 'file-card';
-                folderGridElement.dataset.folderId = folder.id;
-                folderGridElement.dataset.folderName = folder.name;
-                folderGridElement.dataset.parentId = folder.parent_id || "";
-                folderGridElement.innerHTML = `
-                    <div class="file-icon folder-icon">
-                        <i class="fas fa-folder"></i>
-                    </div>
-                    <div class="file-name">${folder.name}</div>
-                    <div class="file-info">15 archivos</div>
-                `;
-
-                // Hacer la carpeta arrastrable (excepto si estamos en la misma carpeta que es su padre)
-                if (currentPath !== "") {
-                    folderGridElement.setAttribute('draggable', 'true');
-
-                    // Eventos de arrastrar
-                    folderGridElement.addEventListener('dragstart', (e) => {
-                        e.dataTransfer.setData('text/plain', folder.id);
-                        e.dataTransfer.setData('application/oxicloud-folder', 'true');
-                        folderGridElement.classList.add('dragging');
-                    });
-
-                    folderGridElement.addEventListener('dragend', () => {
-                        folderGridElement.classList.remove('dragging');
-                        document.querySelectorAll('.drop-target').forEach(el => {
-                            el.classList.remove('drop-target');
-                        });
-                    });
-                }
-
-                // Evento de clic normal para navegar
-                folderGridElement.addEventListener('click', () => {
-                    currentPath = folder.id;
-                    updateBreadcrumb(folder.name);
-                    loadFiles();
-                });
-
-                // Evento de clic derecho para el menú contextual
-                folderGridElement.addEventListener('contextmenu', (e) => {
-                    e.preventDefault();
-
-                    // Guardamos la carpeta seleccionada
-                    contextMenuTargetFolder = {
-                        id: folder.id,
-                        name: folder.name,
-                        parent_id: folder.parent_id || ""
-                    };
-
-                    // Posicionamos y mostramos el menú contextual
-                    let folderContextMenu = document.getElementById('folder-context-menu');
-                    folderContextMenu.style.left = `${e.pageX}px`;
-                    folderContextMenu.style.top = `${e.pageY}px`;
-                    folderContextMenu.style.display = 'block';
-                });
-
-                // Eventos para arrastrar y soltar archivos en carpetas
-                folderGridElement.addEventListener('dragover', (e) => {
-                    e.preventDefault();
-                    folderGridElement.classList.add('drop-target');
-                });
-
-                folderGridElement.addEventListener('dragleave', () => {
-                    folderGridElement.classList.remove('drop-target');
-                });
-
-                folderGridElement.addEventListener('drop', async (e) => {
-                    e.preventDefault();
-                    folderGridElement.classList.remove('drop-target');
-
-                    const id = e.dataTransfer.getData('text/plain');
-                    const isFolder = e.dataTransfer.getData('application/oxicloud-folder') === 'true';
-
-                    if (id) {
-                        if (isFolder) {
-                            // Evitar mover una carpeta a sí misma o a su hijo
-                            if (id === folder.id) {
-                                alert("No puedes mover una carpeta a sí misma");
-                                return;
-                            }
-
-                            await moveFolder(id, folder.id);
-                        } else {
-                            await moveFile(id, folder.id);
-                        }
-                    }
-                });
-
-                filesGrid.appendChild(folderGridElement);
-
-                // Create folder element for list view
-                const folderListElement = document.createElement('div');
-                folderListElement.className = 'file-item';
-                folderListElement.dataset.folderId = folder.id;
-                folderListElement.dataset.folderName = folder.name;
-                folderListElement.dataset.parentId = folder.parent_id || "";
-
-                // Convert timestamps to human readable format
-                const modifiedDate = new Date(folder.modified_at * 1000);
-                const formattedDate = modifiedDate.toLocaleDateString() + ' ' +
-                                     modifiedDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
-
-                // Hacer la carpeta arrastrable (excepto si estamos en la misma carpeta que es su padre)
-                if (currentPath !== "") {
-                    folderListElement.setAttribute('draggable', 'true');
-
-                    // Eventos de arrastrar
-                    folderListElement.addEventListener('dragstart', (e) => {
-                        e.dataTransfer.setData('text/plain', folder.id);
-                        e.dataTransfer.setData('application/oxicloud-folder', 'true');
-                        folderListElement.classList.add('dragging');
-                    });
-
-                    folderListElement.addEventListener('dragend', () => {
-                        folderListElement.classList.remove('dragging');
-                        document.querySelectorAll('.drop-target').forEach(el => {
-                            el.classList.remove('drop-target');
-                        });
-                    });
-                }
-
-                folderListElement.innerHTML = `
-                    <div class="name-cell">
-                        <div class="file-icon folder-icon">
-                            <i class="fas fa-folder"></i>
-                        </div>
-                        <span>${folder.name}</span>
-                    </div>
-                    <div>Carpeta</div>
-                    <div>--</div>
-                    <div>${formattedDate}</div>
-                `;
-
-                // Evento de clic normal para navegar
-                folderListElement.addEventListener('click', () => {
-                    currentPath = folder.id;
-                    updateBreadcrumb(folder.name);
-                    loadFiles();
-                });
-
-                // Evento de clic derecho para el menú contextual
-                folderListElement.addEventListener('contextmenu', (e) => {
-                    e.preventDefault();
-
-                    // Guardamos la carpeta seleccionada
-                    contextMenuTargetFolder = {
-                        id: folder.id,
-                        name: folder.name,
-                        parent_id: folder.parent_id || ""
-                    };
-
-                    // Posicionamos y mostramos el menú contextual
-                    let folderContextMenu = document.getElementById('folder-context-menu');
-                    folderContextMenu.style.left = `${e.pageX}px`;
-                    folderContextMenu.style.top = `${e.pageY}px`;
-                    folderContextMenu.style.display = 'block';
-                });
-
-                // Eventos para arrastrar y soltar archivos en carpetas (vista lista)
-                folderListElement.addEventListener('dragover', (e) => {
-                    e.preventDefault();
-                    folderListElement.classList.add('drop-target');
-                });
-
-                folderListElement.addEventListener('dragleave', () => {
-                    folderListElement.classList.remove('drop-target');
-                });
-
-                folderListElement.addEventListener('drop', async (e) => {
-                    e.preventDefault();
-                    folderListElement.classList.remove('drop-target');
-
-                    const id = e.dataTransfer.getData('text/plain');
-                    const isFolder = e.dataTransfer.getData('application/oxicloud-folder') === 'true';
-
-                    if (id) {
-                        if (isFolder) {
-                            // Evitar mover una carpeta a sí misma o a su hijo
-                            if (id === folder.id) {
-                                alert("No puedes mover una carpeta a sí misma");
-                                return;
-                            }
-
-                            await moveFolder(id, folder.id);
-                        } else {
-                            await moveFile(id, folder.id);
-                        }
-                    }
-                });
-
-                filesListView.appendChild(folderListElement);
-            }
-
-            /**
-             * Añade un archivo a las vistas
-             */
-            function addFileToView(file) {
-                // Determine file icon and type label based on MIME type
-                let iconClass = 'fas fa-file';
-                let typeLabel = 'Documento';
-
-                if (file.mime_type) {
-                    if (file.mime_type.startsWith('image/')) {
-                        iconClass = 'fas fa-file-image';
-                        typeLabel = 'Imagen';
-                    } else if (file.mime_type.startsWith('text/')) {
-                        iconClass = 'fas fa-file-alt';
-                        typeLabel = 'Texto';
-                    } else if (file.mime_type.startsWith('video/')) {
-                        iconClass = 'fas fa-file-video';
-                        typeLabel = 'Video';
-                    } else if (file.mime_type.startsWith('audio/')) {
-                        iconClass = 'fas fa-file-audio';
-                        typeLabel = 'Audio';
-                    } else if (file.mime_type === 'application/pdf') {
-                        iconClass = 'fas fa-file-pdf';
-                        typeLabel = 'PDF';
-                    }
-                }
-
-                // Format file size
-                const fileSize = formatFileSize(file.size);
-
-                // Convert timestamp to human readable format
-                const modifiedDate = new Date(file.modified_at * 1000);
-                const formattedDate = modifiedDate.toLocaleDateString() + ' ' +
-                                     modifiedDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
-
-                // Create file element for grid view
-                const fileGridElement = document.createElement('div');
-                fileGridElement.className = 'file-card';
-                fileGridElement.innerHTML = `
-                    <div class="file-icon">
-                        <i class="${iconClass}"></i>
-                    </div>
-                    <div class="file-name">${file.name}</div>
-                    <div class="file-info">Modificado ${formattedDate.split(' ')[0]}</div>
-                `;
-
-                // Atributos de datos para el archivo
-                fileGridElement.dataset.fileId = file.id;
-                fileGridElement.dataset.fileName = file.name;
-                fileGridElement.dataset.folderId = file.folder_id || "";
-
-                // Hacer el archivo arrastrable para mover
-                fileGridElement.setAttribute('draggable', 'true');
-
-                // Eventos de arrastrar
-                fileGridElement.addEventListener('dragstart', (e) => {
-                    e.dataTransfer.setData('text/plain', file.id);
-                    fileGridElement.classList.add('dragging');
-                });
-
-                fileGridElement.addEventListener('dragend', () => {
-                    fileGridElement.classList.remove('dragging');
-                    // Eliminar la clase drop-target de todas las carpetas
-                    document.querySelectorAll('.drop-target').forEach(el => {
-                        el.classList.remove('drop-target');
-                    });
-                });
-
-                // Add download functionality
-                fileGridElement.addEventListener('click', () => {
-                    window.location.href = `/api/files/${file.id}`;
-                });
-
-                // Menú contextual para el archivo
-                fileGridElement.addEventListener('contextmenu', (e) => {
-                    e.preventDefault();
-
-                    // Guardamos el archivo seleccionado
-                    contextMenuTargetFile = {
-                        id: file.id,
-                        name: file.name,
-                        folder_id: file.folder_id || ""
-                    };
-
-                    // Posicionamos y mostramos el menú contextual
-                    let fileContextMenu = document.getElementById('file-context-menu');
-                    fileContextMenu.style.left = `${e.pageX}px`;
-                    fileContextMenu.style.top = `${e.pageY}px`;
-                    fileContextMenu.style.display = 'block';
-                });
-
-                filesGrid.appendChild(fileGridElement);
-
-                // Create file element for list view
-                const fileListElement = document.createElement('div');
-                fileListElement.className = 'file-item';
-                fileListElement.dataset.fileId = file.id;
-                fileListElement.dataset.fileName = file.name;
-                fileListElement.dataset.folderId = file.folder_id || "";
-
-                fileListElement.innerHTML = `
-                    <div class="name-cell">
-                        <div class="file-icon">
-                            <i class="${iconClass}"></i>
-                        </div>
-                        <span>${file.name}</span>
-                    </div>
-                    <div>${typeLabel}</div>
-                    <div>${fileSize}</div>
-                    <div>${formattedDate}</div>
-                `;
-
-                // Hacer el archivo arrastrable para mover (vista lista)
-                fileListElement.setAttribute('draggable', 'true');
-
-                // Eventos de arrastrar (vista lista)
-                fileListElement.addEventListener('dragstart', (e) => {
-                    e.dataTransfer.setData('text/plain', file.id);
-                    fileListElement.classList.add('dragging');
-                });
-
-                fileListElement.addEventListener('dragend', () => {
-                    fileListElement.classList.remove('dragging');
-                    document.querySelectorAll('.drop-target').forEach(el => {
-                        el.classList.remove('drop-target');
-                    });
-                });
-
-                // Add download functionality
-                fileListElement.addEventListener('click', () => {
-                    window.location.href = `/api/files/${file.id}`;
-                });
-
-                // Menú contextual para el archivo (vista lista)
-                fileListElement.addEventListener('contextmenu', (e) => {
-                    e.preventDefault();
-
-                    // Una vez creado el menú, asignamos el archivo objetivo
-                    contextMenuTargetFile = {
-                        id: file.id,
-                        name: file.name,
-                        folder_id: file.folder_id || ""
-                    };
-
-                    let fileContextMenu = document.getElementById('file-context-menu');
-                    fileContextMenu.style.left = `${e.pageX}px`;
-                    fileContextMenu.style.top = `${e.pageY}px`;
-                    fileContextMenu.style.display = 'block';
-                });
-
-                filesListView.appendChild(fileListElement);
-            }
-
-            /**
-             * Sube archivos al servidor
-             */
-            async function uploadFiles(files) {
-                const progressBar = document.querySelector('.progress-fill');
-                const uploadProgressDiv = document.querySelector('.upload-progress');
-                uploadProgressDiv.style.display = 'block';
-                progressBar.style.width = '0%';
-
-                let uploadedCount = 0;
-                const totalFiles = files.length;
-
-                for (let i = 0; i < totalFiles; i++) {
-                    const file = files[i];
-                    const formData = new FormData();
-                    formData.append('file', file);
-
-                    if (currentPath) {
-                        formData.append('folder_id', currentPath);
-                    }
-
-                    try {
-                        // Usar fetch en lugar de XMLHttpRequest para una mejor gestión de errores
-                        const response = await fetch('/api/files/upload', {
-                            method: 'POST',
-                            body: formData
-                        });
-
-                        // Actualizar progreso
-                        uploadedCount++;
-                        const percentComplete = (uploadedCount / totalFiles) * 100;
-                        progressBar.style.width = percentComplete + '%';
-
-                        if (response.ok) {
-                            console.log(`Successfully uploaded ${file.name}`);
-                            
-                            if (i === totalFiles - 1) {
-                                // Last file uploaded
-                                loadFiles();
-                                setTimeout(() => {
-                                    dropzone.style.display = 'none';
-                                    uploadProgressDiv.style.display = 'none';
-                                }, 1000);
-                                
-                                // Mostrar notificación de éxito
-                                showNotification('Archivo subido', `${file.name} completado`);
-                            }
-                        } else {
-                            const errorData = await response.text();
-                            console.error('Upload error:', errorData);
-                            alert(`Error al subir el archivo: ${file.name}`);
-                        }
-                    } catch (error) {
-                        console.error('Network error during upload:', error);
-                        alert(`Error de red al subir el archivo: ${file.name}`);
-                    }
-                }
-            }
-
-            /**
-             * Muestra una notificación
-             */
-            function showNotification(title, message) {
-                // Comprobar si ya existe la notificación, de lo contrario crearla
-                let notification = document.querySelector('.notification');
-                if (!notification) {
-                    notification = document.createElement('div');
-                    notification.className = 'notification';
-                    notification.innerHTML = `
-                        <div class="notification-title">${title}</div>
-                        <div class="notification-message">${message}</div>
-                    `;
-                    document.body.appendChild(notification);
-                } else {
-                    notification.querySelector('.notification-title').textContent = title;
-                    notification.querySelector('.notification-message').textContent = message;
-                }
-
-                // Mostrar la notificación
-                notification.style.display = 'block';
-
-                // Ocultar la notificación después de 5 segundos
-                setTimeout(() => {
-                    notification.style.display = 'none';
-                }, 5000);
-            }
-
-            // Exponer la función selectFolder globalmente para usarla en el breadcrumb
-            window.selectFolder = (id, name) => {
-                currentPath = id;
-                updateBreadcrumb(name);
-                loadFiles();
-            };
-        });
-    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/static/js/app.js b/static/js/app.js
new file mode 100644
index 00000000..5122cf3f
--- /dev/null
+++ b/static/js/app.js
@@ -0,0 +1,216 @@
+/**
+ * OxiCloud - Main Application
+ * This file contains the core functionality, initialization and state management
+ */
+
+// Global state
+const app = {
+    currentView: 'grid',   // Current view mode: 'grid' or 'list'
+    currentPath: '',       // Current folder path
+    currentFolder: null,   // Current folder object
+    contextMenuTargetFolder: null,  // Target folder for context menu
+    contextMenuTargetFile: null,    // Target file for context menu
+    selectedTargetFolderId: "",     // Selected target folder for move operations
+    moveDialogMode: 'file',         // Move dialog mode: 'file' or 'folder'
+};
+
+// DOM elements
+const elements = {
+    // Will be populated on initialization
+};
+
+/**
+ * Initialize the application
+ */
+function initApp() {
+    // Cache DOM elements
+    cacheElements();
+    
+    // Create menus and dialogs
+    ui.initializeContextMenus();
+    
+    // Setup event listeners
+    setupEventListeners();
+    
+    // Load initial view
+    app.currentPath = '';
+    ui.updateBreadcrumb('');
+    loadFiles();
+    
+    // Initialize file renderer if available
+    if (window.fileRenderer) {
+        console.log('Using optimized file renderer');
+    } else {
+        console.log('Using standard file rendering');
+    }
+}
+
+/**
+ * Cache DOM elements for faster access
+ */
+function cacheElements() {
+    elements.uploadBtn = document.getElementById('upload-btn');
+    elements.dropzone = document.getElementById('dropzone');
+    elements.fileInput = document.getElementById('file-input');
+    elements.filesGrid = document.getElementById('files-grid');
+    elements.filesListView = document.getElementById('files-list-view');
+    elements.newFolderBtn = document.getElementById('new-folder-btn');
+    elements.gridViewBtn = document.getElementById('grid-view-btn');
+    elements.listViewBtn = document.getElementById('list-view-btn');
+    elements.breadcrumb = document.querySelector('.breadcrumb');
+}
+
+/**
+ * Setup event listeners for main UI elements
+ */
+function setupEventListeners() {
+    // Set up drag and drop
+    ui.setupDragAndDrop();
+    
+    // Upload button
+    elements.uploadBtn.addEventListener('click', () => {
+        elements.dropzone.style.display = elements.dropzone.style.display === 'none' ? 'block' : 'none';
+        if (elements.dropzone.style.display === 'block') {
+            elements.fileInput.click();
+        }
+    });
+    
+    // File input
+    elements.fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            fileOps.uploadFiles(e.target.files);
+        }
+    });
+    
+    // New folder button
+    elements.newFolderBtn.addEventListener('click', () => {
+        const folderName = prompt(window.i18n ? window.i18n.t('dialogs.new_name') : 'Nombre de la carpeta:');
+        if (folderName) {
+            fileOps.createFolder(folderName);
+        }
+    });
+    
+    // View toggle
+    elements.gridViewBtn.addEventListener('click', ui.switchToGridView);
+    elements.listViewBtn.addEventListener('click', ui.switchToListView);
+    
+    // Load saved view preference
+    const savedView = localStorage.getItem('oxicloud-view');
+    if (savedView === 'list') {
+        ui.switchToListView();
+    }
+    
+    // Global events to close context menus
+    document.addEventListener('click', (e) => {
+        const folderMenu = document.getElementById('folder-context-menu');
+        const fileMenu = document.getElementById('file-context-menu');
+        
+        if (folderMenu && folderMenu.style.display === 'block' && 
+            !folderMenu.contains(e.target)) {
+            ui.closeContextMenu();
+        }
+        
+        if (fileMenu && fileMenu.style.display === 'block' && 
+            !fileMenu.contains(e.target)) {
+            ui.closeFileContextMenu();
+        }
+    });
+}
+
+/**
+ * Load files and folders for the current path
+ */
+async function loadFiles() {
+    try {
+        let url = '/api/folders';
+        if (app.currentPath) {
+            url += `/${app.currentPath}`;
+        }
+        
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Server responded with status: ${response.status}`);
+        }
+        const folders = await response.json();
+        
+        // Clear existing files in both views
+        elements.filesGrid.innerHTML = '';
+        elements.filesListView.innerHTML = `
+            <div class="list-header">
+                <div data-i18n="files.name">Nombre</div>
+                <div data-i18n="files.type">Tipo</div>
+                <div data-i18n="files.size">Tamaño</div>
+                <div data-i18n="files.modified">Modificado</div>
+            </div>
+        `;
+        
+        // Translate the header if i18n is available
+        if (window.i18n && window.i18n.translatePage) {
+            window.i18n.translatePage();
+        }
+        
+        // Add folders (check if it's an array)
+        const folderList = Array.isArray(folders) ? folders : [];
+        folderList.forEach(folder => {
+            ui.addFolderToView(folder);
+        });
+        
+        // Also load files in this folder
+        let filesUrl = '/api/files';
+        if (app.currentPath) {
+            filesUrl += `?folder_id=${app.currentPath}`;
+        }
+        
+        try {
+            const filesResponse = await fetch(filesUrl);
+            if (filesResponse.ok) {
+                const files = await filesResponse.json();
+                
+                // Add files (check if it's an array)
+                const fileList = Array.isArray(files) ? files : [];
+                fileList.forEach(file => {
+                    ui.addFileToView(file);
+                });
+            }
+        } catch (error) {
+            console.error('Error loading files:', error);
+            // File API may not be implemented yet, so we silently ignore this error
+        }
+        
+        // Update file icons based on file type
+        ui.updateFileIcons();
+    } catch (error) {
+        console.error('Error loading folders:', error);
+        ui.showNotification('Error', 'Could not load files and folders');
+    }
+}
+
+/**
+ * Format file size in human-readable format
+ * @param {number} bytes - Size in bytes
+ * @return {string} Formatted size
+ */
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// Expose needed functions to global scope
+window.app = app;
+window.loadFiles = loadFiles;
+window.formatFileSize = formatFileSize;
+
+// Set up global selectFolder function for navigation
+window.selectFolder = (id, name) => {
+    app.currentPath = id;
+    ui.updateBreadcrumb(name);
+    loadFiles();
+};
+
+// Initialize app when DOM is ready
+document.addEventListener('DOMContentLoaded', initApp);
diff --git a/static/js/contextMenus.js b/static/js/contextMenus.js
new file mode 100644
index 00000000..2bf3c740
--- /dev/null
+++ b/static/js/contextMenus.js
@@ -0,0 +1,256 @@
+/**
+ * OxiCloud - Context Menus and Dialogs Module
+ * This file handles context menus and dialog functionality
+ */
+
+// Context Menus Module
+const contextMenus = {
+    /**
+     * Assign events to menu items and dialogs
+     */
+    assignMenuEvents() {
+        // Folder context menu options
+        document.getElementById('rename-folder-option').addEventListener('click', () => {
+            if (window.app.contextMenuTargetFolder) {
+                this.showRenameDialog(window.app.contextMenuTargetFolder);
+            }
+            window.ui.closeContextMenu();
+        });
+
+        document.getElementById('move-folder-option').addEventListener('click', () => {
+            if (window.app.contextMenuTargetFolder) {
+                this.showMoveDialog(window.app.contextMenuTargetFolder, 'folder');
+            }
+            window.ui.closeContextMenu();
+        });
+
+        document.getElementById('delete-folder-option').addEventListener('click', async () => {
+            if (window.app.contextMenuTargetFolder) {
+                await window.fileOps.deleteFolder(
+                    window.app.contextMenuTargetFolder.id, 
+                    window.app.contextMenuTargetFolder.name
+                );
+            }
+            window.ui.closeContextMenu();
+        });
+
+        // File context menu options
+        document.getElementById('move-file-option').addEventListener('click', () => {
+            if (window.app.contextMenuTargetFile) {
+                this.showMoveDialog(window.app.contextMenuTargetFile, 'file');
+            }
+            window.ui.closeFileContextMenu();
+        });
+
+        document.getElementById('delete-file-option').addEventListener('click', async () => {
+            if (window.app.contextMenuTargetFile) {
+                await window.fileOps.deleteFile(
+                    window.app.contextMenuTargetFile.id,
+                    window.app.contextMenuTargetFile.name
+                );
+            }
+            window.ui.closeFileContextMenu();
+        });
+
+        // Rename dialog events
+        const renameCancelBtn = document.getElementById('rename-cancel-btn');
+        const renameConfirmBtn = document.getElementById('rename-confirm-btn');
+        const renameInput = document.getElementById('rename-input');
+
+        renameCancelBtn.addEventListener('click', this.closeRenameDialog);
+        renameConfirmBtn.addEventListener('click', this.renameFolder);
+
+        // Rename on Enter key
+        renameInput.addEventListener('keyup', (e) => {
+            if (e.key === 'Enter') {
+                this.renameFolder();
+            } else if (e.key === 'Escape') {
+                this.closeRenameDialog();
+            }
+        });
+
+        // Move dialog events
+        const moveCancelBtn = document.getElementById('move-cancel-btn');
+        const moveConfirmBtn = document.getElementById('move-confirm-btn');
+
+        moveCancelBtn.addEventListener('click', this.closeMoveDialog);
+        moveConfirmBtn.addEventListener('click', async () => {
+            if (window.app.moveDialogMode === 'file' && window.app.contextMenuTargetFile) {
+                const success = await window.fileOps.moveFile(
+                    window.app.contextMenuTargetFile.id, 
+                    window.app.selectedTargetFolderId
+                );
+                if (success) {
+                    this.closeMoveDialog();
+                }
+            } else if (window.app.moveDialogMode === 'folder' && window.app.contextMenuTargetFolder) {
+                const success = await window.fileOps.moveFolder(
+                    window.app.contextMenuTargetFolder.id, 
+                    window.app.selectedTargetFolderId
+                );
+                if (success) {
+                    this.closeMoveDialog();
+                }
+            }
+        });
+    },
+
+    /**
+     * Show rename dialog for a folder
+     * @param {Object} folder - Folder object
+     */
+    showRenameDialog(folder) {
+        const renameInput = document.getElementById('rename-input');
+        const renameDialog = document.getElementById('rename-dialog');
+
+        renameInput.value = folder.name;
+        renameDialog.style.display = 'flex';
+        renameInput.focus();
+        renameInput.select();
+    },
+
+    /**
+     * Close rename dialog
+     */
+    closeRenameDialog() {
+        document.getElementById('rename-dialog').style.display = 'none';
+        window.app.contextMenuTargetFolder = null;
+    },
+
+    /**
+     * Show move dialog for a file or folder
+     * @param {Object} item - File or folder object
+     * @param {string} mode - 'file' or 'folder'
+     */
+    async showMoveDialog(item, mode) {
+        // Set mode
+        window.app.moveDialogMode = mode;
+
+        // Reset selection
+        window.app.selectedTargetFolderId = "";
+
+        // Update dialog title
+        const dialogHeader = document.getElementById('move-file-dialog').querySelector('.rename-dialog-header');
+        dialogHeader.textContent = mode === 'file' ?
+            (window.i18n ? window.i18n.t('dialogs.move_file') : 'Mover archivo') :
+            (window.i18n ? window.i18n.t('dialogs.move_folder') : 'Mover carpeta');
+
+        // Load all available folders
+        await this.loadAllFolders(item.id, mode);
+
+        // Show dialog
+        document.getElementById('move-file-dialog').style.display = 'flex';
+    },
+
+    /**
+     * Close move dialog
+     */
+    closeMoveDialog() {
+        document.getElementById('move-file-dialog').style.display = 'none';
+        window.app.contextMenuTargetFile = null;
+        window.app.contextMenuTargetFolder = null;
+    },
+
+    /**
+     * Rename the selected folder
+     */
+    async renameFolder() {
+        if (!window.app.contextMenuTargetFolder) return;
+
+        const newName = document.getElementById('rename-input').value.trim();
+        if (!newName) {
+            alert(window.i18n ? window.i18n.t('errors.empty_name') : 'El nombre no puede estar vacío');
+            return;
+        }
+
+        const success = await window.fileOps.renameFolder(window.app.contextMenuTargetFolder.id, newName);
+        if (success) {
+            contextMenus.closeRenameDialog();
+            window.loadFiles();
+        }
+    },
+
+    /**
+     * Load all folders for the move dialog
+     * @param {string} itemId - ID of the item being moved
+     * @param {string} mode - 'file' or 'folder'
+     */
+    async loadAllFolders(itemId, mode) {
+        try {
+            const response = await fetch('/api/folders');
+            if (response.ok) {
+                const folders = await response.json();
+                const folderSelectContainer = document.getElementById('folder-select-container');
+
+                // Clear container except root option
+                folderSelectContainer.innerHTML = `
+                    <div class="folder-select-item selected" data-folder-id="">
+                        <i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Raíz</span>
+                    </div>
+                `;
+
+                // Select root by default
+                window.app.selectedTargetFolderId = "";
+
+                // Add all available folders
+                if (Array.isArray(folders)) {
+                    folders.forEach(folder => {
+                        // Skip folders that would create cycles
+                        if (mode === 'folder' && folder.id === itemId) {
+                            return;
+                        }
+
+                        // Skip current folder of the item
+                        if (mode === 'file' && window.app.contextMenuTargetFile && 
+                            folder.id === window.app.contextMenuTargetFile.folder_id) {
+                            return;
+                        }
+
+                        if (mode === 'folder' && window.app.contextMenuTargetFolder && 
+                            folder.id === window.app.contextMenuTargetFolder.parent_id) {
+                            return;
+                        }
+
+                        const folderItem = document.createElement('div');
+                        folderItem.className = 'folder-select-item';
+                        folderItem.dataset.folderId = folder.id;
+                        folderItem.innerHTML = `<i class="fas fa-folder"></i> ${folder.name}`;
+
+                        folderItem.addEventListener('click', () => {
+                            // Deselect all
+                            document.querySelectorAll('.folder-select-item').forEach(item => {
+                                item.classList.remove('selected');
+                            });
+
+                            // Select this one
+                            folderItem.classList.add('selected');
+                            window.app.selectedTargetFolderId = folder.id;
+                        });
+
+                        folderSelectContainer.appendChild(folderItem);
+                    });
+                }
+
+                // Event for root option
+                const rootOption = folderSelectContainer.querySelector('.folder-select-item');
+                rootOption.addEventListener('click', () => {
+                    document.querySelectorAll('.folder-select-item').forEach(item => {
+                        item.classList.remove('selected');
+                    });
+                    rootOption.classList.add('selected');
+                    window.app.selectedTargetFolderId = "";
+                });
+
+                // Translate new elements
+                if (window.i18n && window.i18n.translatePage) {
+                    window.i18n.translatePage();
+                }
+            }
+        } catch (error) {
+            console.error('Error loading folders:', error);
+        }
+    }
+};
+
+// Expose context menus module globally
+window.contextMenus = contextMenus;
diff --git a/static/js/fileOperations.js b/static/js/fileOperations.js
new file mode 100644
index 00000000..1b17f8a4
--- /dev/null
+++ b/static/js/fileOperations.js
@@ -0,0 +1,295 @@
+/**
+ * OxiCloud - File Operations Module
+ * This file handles file and folder operations (create, move, delete, rename, upload)
+ */
+
+// File Operations Module
+const fileOps = {
+    /**
+     * Upload files to the server
+     * @param {FileList} files - Files to upload
+     */
+    async uploadFiles(files) {
+        const progressBar = document.querySelector('.progress-fill');
+        const uploadProgressDiv = document.querySelector('.upload-progress');
+        uploadProgressDiv.style.display = 'block';
+        progressBar.style.width = '0%';
+
+        let uploadedCount = 0;
+        const totalFiles = files.length;
+
+        for (let i = 0; i < totalFiles; i++) {
+            const file = files[i];
+            const formData = new FormData();
+            formData.append('file', file);
+
+            if (window.app.currentPath) {
+                formData.append('folder_id', window.app.currentPath);
+            }
+
+            try {
+                const response = await fetch('/api/files/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                // Update progress
+                uploadedCount++;
+                const percentComplete = (uploadedCount / totalFiles) * 100;
+                progressBar.style.width = percentComplete + '%';
+
+                if (response.ok) {
+                    console.log(`Successfully uploaded ${file.name}`);
+
+                    if (i === totalFiles - 1) {
+                        // Last file uploaded
+                        window.loadFiles();
+                        setTimeout(() => {
+                            document.getElementById('dropzone').style.display = 'none';
+                            uploadProgressDiv.style.display = 'none';
+                        }, 1000);
+
+                        // Show success notification
+                        window.ui.showNotification('Archivo subido', `${file.name} completado`);
+                    }
+                } else {
+                    const errorData = await response.text();
+                    console.error('Upload error:', errorData);
+                    window.ui.showNotification('Error', `Error al subir el archivo: ${file.name}`);
+                }
+            } catch (error) {
+                console.error('Network error during upload:', error);
+                window.ui.showNotification('Error', `Error de red al subir el archivo: ${file.name}`);
+            }
+        }
+    },
+
+    /**
+     * Create a new folder
+     * @param {string} name - Folder name
+     */
+    async createFolder(name) {
+        try {
+            const response = await fetch('/api/folders', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    name: name,
+                    parent_id: window.app.currentPath || null
+                })
+            });
+
+            if (response.ok) {
+                window.loadFiles();
+                window.ui.showNotification('Carpeta creada', `"${name}" creada correctamente`);
+            } else {
+                const errorData = await response.text();
+                console.error('Create folder error:', errorData);
+                window.ui.showNotification('Error', 'Error al crear la carpeta');
+            }
+        } catch (error) {
+            console.error('Error creating folder:', error);
+            window.ui.showNotification('Error', 'Error al crear la carpeta');
+        }
+    },
+
+    /**
+     * Move a file to another folder
+     * @param {string} fileId - File ID
+     * @param {string} targetFolderId - Target folder ID
+     * @returns {Promise<boolean>} - Success status
+     */
+    async moveFile(fileId, targetFolderId) {
+        try {
+            const response = await fetch(`/api/files/${fileId}/move`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    folder_id: targetFolderId === "" ? null : targetFolderId
+                })
+            });
+
+            if (response.ok) {
+                // Reload files after moving
+                await window.loadFiles();
+                window.ui.showNotification('Archivo movido', 'Archivo movido correctamente');
+                return true;
+            } else {
+                let errorMessage = 'Error desconocido';
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.error || 'Error desconocido';
+                } catch (e) {
+                    errorMessage = 'Error al procesar la respuesta del servidor';
+                }
+                window.ui.showNotification('Error', `Error al mover el archivo: ${errorMessage}`);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error moving file:', error);
+            window.ui.showNotification('Error', 'Error al mover el archivo');
+            return false;
+        }
+    },
+
+    /**
+     * Move a folder to another folder
+     * @param {string} folderId - Folder ID
+     * @param {string} targetFolderId - Target folder ID
+     * @returns {Promise<boolean>} - Success status
+     */
+    async moveFolder(folderId, targetFolderId) {
+        try {
+            const response = await fetch(`/api/folders/${folderId}/move`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    parent_id: targetFolderId === "" ? null : targetFolderId
+                })
+            });
+
+            if (response.ok) {
+                // Reload files after moving
+                await window.loadFiles();
+                window.ui.showNotification('Carpeta movida', 'Carpeta movida correctamente');
+                return true;
+            } else {
+                let errorMessage = 'Error desconocido';
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.error || 'Error desconocido';
+                } catch (e) {
+                    errorMessage = 'Error al procesar la respuesta del servidor';
+                }
+                window.ui.showNotification('Error', `Error al mover la carpeta: ${errorMessage}`);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error moving folder:', error);
+            window.ui.showNotification('Error', 'Error al mover la carpeta');
+            return false;
+        }
+    },
+
+    /**
+     * Rename a folder
+     * @param {string} folderId - Folder ID
+     * @param {string} newName - New folder name
+     * @returns {Promise<boolean>} - Success status
+     */
+    async renameFolder(folderId, newName) {
+        try {
+            console.log(`Renaming folder ${folderId} to "${newName}"`);
+
+            const response = await fetch(`/api/folders/${folderId}/rename`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ name: newName })
+            });
+
+            console.log('Response status:', response.status);
+
+            if (response.ok) {
+                window.ui.showNotification('Carpeta renombrada', `Carpeta renombrada a "${newName}"`);
+                return true;
+            } else {
+                const errorText = await response.text();
+                console.error('Error response:', errorText);
+
+                let errorMessage = 'Error desconocido';
+                try {
+                    // Try to parse as JSON
+                    const errorData = JSON.parse(errorText);
+                    errorMessage = errorData.error || response.statusText;
+                } catch (e) {
+                    // If not JSON, use text as is
+                    errorMessage = errorText || response.statusText;
+                }
+
+                window.ui.showNotification('Error', `Error al renombrar la carpeta: ${errorMessage}`);
+                return false;
+            }
+        } catch (error) {
+            console.error('Error renaming folder:', error);
+            window.ui.showNotification('Error', 'Error al renombrar la carpeta');
+            return false;
+        }
+    },
+
+    /**
+     * Delete a file
+     * @param {string} fileId - File ID
+     * @returns {Promise<boolean>} - Success status
+     */
+    async deleteFile(fileId, fileName) {
+        if (!confirm(`¿Estás seguro de que quieres eliminar el archivo "${fileName}"?`)) {
+            return false;
+        }
+        
+        try {
+            const response = await fetch(`/api/files/${fileId}`, {
+                method: 'DELETE'
+            });
+
+            if (response.ok) {
+                window.loadFiles();
+                window.ui.showNotification('Archivo eliminado', `"${fileName}" eliminado correctamente`);
+                return true;
+            } else {
+                window.ui.showNotification('Error', 'Error al eliminar el archivo');
+                return false;
+            }
+        } catch (error) {
+            console.error('Error deleting file:', error);
+            window.ui.showNotification('Error', 'Error al eliminar el archivo');
+            return false;
+        }
+    },
+
+    /**
+     * Delete a folder
+     * @param {string} folderId - Folder ID
+     * @param {string} folderName - Folder name
+     * @returns {Promise<boolean>} - Success status
+     */
+    async deleteFolder(folderId, folderName) {
+        if (!confirm(`¿Estás seguro de que quieres eliminar la carpeta "${folderName}" y todo su contenido?`)) {
+            return false;
+        }
+        
+        try {
+            const response = await fetch(`/api/folders/${folderId}`, {
+                method: 'DELETE'
+            });
+
+            if (response.ok) {
+                // If we're inside the folder we just deleted, go back up
+                if (window.app.currentPath === folderId) {
+                    window.app.currentPath = '';
+                    window.ui.updateBreadcrumb('');
+                }
+                window.loadFiles();
+                window.ui.showNotification('Carpeta eliminada', `"${folderName}" eliminada correctamente`);
+                return true;
+            } else {
+                window.ui.showNotification('Error', 'Error al eliminar la carpeta');
+                return false;
+            }
+        } catch (error) {
+            console.error('Error deleting folder:', error);
+            window.ui.showNotification('Error', 'Error al eliminar la carpeta');
+            return false;
+        }
+    }
+};
+
+// Expose file operations module globally
+window.fileOps = fileOps;
diff --git a/static/js/ui.js b/static/js/ui.js
new file mode 100644
index 00000000..cafb7c3c
--- /dev/null
+++ b/static/js/ui.js
@@ -0,0 +1,664 @@
+/**
+ * OxiCloud - UI Module
+ * This file handles UI-related functions, view toggling, and interface interactions
+ */
+
+// UI Module
+const ui = {
+    /**
+     * Initialize context menus and dialogs
+     */
+    initializeContextMenus() {
+        // Folder context menu
+        if (!document.getElementById('folder-context-menu')) {
+            const folderMenu = document.createElement('div');
+            folderMenu.className = 'context-menu';
+            folderMenu.id = 'folder-context-menu';
+            folderMenu.innerHTML = `
+                <div class="context-menu-item" id="rename-folder-option">
+                    <i class="fas fa-edit"></i> <span data-i18n="actions.rename">Renombrar</span>
+                </div>
+                <div class="context-menu-item" id="move-folder-option">
+                    <i class="fas fa-exchange-alt"></i> <span data-i18n="actions.move">Mover a...</span>
+                </div>
+                <div class="context-menu-item" id="delete-folder-option">
+                    <i class="fas fa-trash"></i> <span data-i18n="actions.delete">Eliminar</span>
+                </div>
+            `;
+            document.body.appendChild(folderMenu);
+        }
+
+        // File context menu
+        if (!document.getElementById('file-context-menu')) {
+            const fileMenu = document.createElement('div');
+            fileMenu.className = 'context-menu';
+            fileMenu.id = 'file-context-menu';
+            fileMenu.innerHTML = `
+                <div class="context-menu-item" id="move-file-option">
+                    <i class="fas fa-exchange-alt"></i> <span data-i18n="actions.move">Mover a...</span>
+                </div>
+                <div class="context-menu-item" id="delete-file-option">
+                    <i class="fas fa-trash"></i> <span data-i18n="actions.delete">Eliminar</span>
+                </div>
+            `;
+            document.body.appendChild(fileMenu);
+        }
+
+        // Rename dialog
+        if (!document.getElementById('rename-dialog')) {
+            const renameDialog = document.createElement('div');
+            renameDialog.className = 'rename-dialog';
+            renameDialog.id = 'rename-dialog';
+            renameDialog.innerHTML = `
+                <div class="rename-dialog-content">
+                    <div class="rename-dialog-header" data-i18n="dialogs.rename_folder">Renombrar carpeta</div>
+                    <input type="text" id="rename-input" data-i18n-placeholder="dialogs.new_name" placeholder="Nuevo nombre">
+                    <div class="rename-dialog-buttons">
+                        <button class="btn" id="rename-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
+                        <button class="btn btn-primary" id="rename-confirm-btn" data-i18n="actions.rename">Renombrar</button>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(renameDialog);
+        }
+
+        // Move dialog
+        if (!document.getElementById('move-file-dialog')) {
+            const moveDialog = document.createElement('div');
+            moveDialog.className = 'rename-dialog';
+            moveDialog.id = 'move-file-dialog';
+            moveDialog.innerHTML = `
+                <div class="rename-dialog-content">
+                    <div class="rename-dialog-header" data-i18n="dialogs.move_file">Mover archivo</div>
+                    <p data-i18n="dialogs.select_destination">Selecciona la carpeta destino:</p>
+                    <div id="folder-select-container" style="max-height: 200px; overflow-y: auto; margin: 15px 0; border: 1px solid #ddd; border-radius: 4px; padding: 10px;">
+                        <!-- Las carpetas se cargarán aquí dinámicamente -->
+                        <div class="folder-select-item" data-folder-id="">
+                            <i class="fas fa-folder"></i> <span data-i18n="dialogs.root">Raíz</span>
+                        </div>
+                    </div>
+                    <div class="rename-dialog-buttons">
+                        <button class="btn" id="move-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
+                        <button class="btn btn-primary" id="move-confirm-btn" data-i18n="actions.move_to">Mover</button>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(moveDialog);
+        }
+
+        // Assign events to menu items
+        contextMenus.assignMenuEvents();
+    },
+
+    /**
+     * Set up drag and drop functionality
+     */
+    setupDragAndDrop() {
+        const dropzone = document.getElementById('dropzone');
+
+        // Dropzone events
+        dropzone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropzone.classList.add('active');
+        });
+
+        dropzone.addEventListener('dragleave', () => {
+            dropzone.classList.remove('active');
+        });
+
+        dropzone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropzone.classList.remove('active');
+            if (e.dataTransfer.files.length > 0) {
+                fileOps.uploadFiles(e.dataTransfer.files);
+            }
+        });
+
+        // Document-wide drag and drop
+        document.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            if (e.dataTransfer.types.includes('Files')) {
+                dropzone.style.display = 'block';
+                dropzone.classList.add('active');
+            }
+        });
+
+        document.addEventListener('dragleave', (e) => {
+            if (e.clientX <= 0 || e.clientY <= 0 ||
+                e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
+                dropzone.classList.remove('active');
+                setTimeout(() => {
+                    if (!dropzone.classList.contains('active')) {
+                        dropzone.style.display = 'none';
+                    }
+                }, 100);
+            }
+        });
+
+        document.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropzone.classList.remove('active');
+
+            if (e.dataTransfer.files.length > 0) {
+                fileOps.uploadFiles(e.dataTransfer.files);
+            }
+
+            setTimeout(() => {
+                dropzone.style.display = 'none';
+            }, 500);
+        });
+    },
+
+    /**
+     * Switch to grid view
+     */
+    switchToGridView() {
+        const filesGrid = document.getElementById('files-grid');
+        const filesListView = document.getElementById('files-list-view');
+        const gridViewBtn = document.getElementById('grid-view-btn');
+        const listViewBtn = document.getElementById('list-view-btn');
+
+        filesGrid.style.display = 'grid';
+        filesListView.style.display = 'none';
+        gridViewBtn.classList.add('active');
+        listViewBtn.classList.remove('active');
+        window.app.currentView = 'grid';
+        localStorage.setItem('oxicloud-view', 'grid');
+    },
+
+    /**
+     * Switch to list view
+     */
+    switchToListView() {
+        const filesGrid = document.getElementById('files-grid');
+        const filesListView = document.getElementById('files-list-view');
+        const gridViewBtn = document.getElementById('grid-view-btn');
+        const listViewBtn = document.getElementById('list-view-btn');
+
+        filesGrid.style.display = 'none';
+        filesListView.style.display = 'flex';
+        gridViewBtn.classList.remove('active');
+        listViewBtn.classList.add('active');
+        window.app.currentView = 'list';
+        localStorage.setItem('oxicloud-view', 'list');
+    },
+
+    /**
+     * Update breadcrumb navigation
+     * @param {string} folderName - Name of the current folder
+     */
+    updateBreadcrumb(folderName) {
+        const breadcrumb = document.querySelector('.breadcrumb');
+        breadcrumb.innerHTML = '';
+
+        const homeItem = document.createElement('span');
+        homeItem.className = 'breadcrumb-item';
+        homeItem.textContent = window.i18n ? window.i18n.t('breadcrumb.home') : 'Home';
+        homeItem.addEventListener('click', () => {
+            window.app.currentPath = '';
+            this.updateBreadcrumb('');
+            window.loadFiles();
+        });
+
+        breadcrumb.appendChild(homeItem);
+
+        if (folderName) {
+            const separator = document.createElement('span');
+            separator.className = 'breadcrumb-separator';
+            separator.textContent = '>';
+            breadcrumb.appendChild(separator);
+
+            const folderItem = document.createElement('span');
+            folderItem.className = 'breadcrumb-item';
+            folderItem.textContent = folderName;
+            breadcrumb.appendChild(folderItem);
+        }
+    },
+
+    /**
+     * Show notification
+     * @param {string} title - Notification title
+     * @param {string} message - Notification message
+     */
+    showNotification(title, message) {
+        let notification = document.querySelector('.notification');
+        if (!notification) {
+            notification = document.createElement('div');
+            notification.className = 'notification';
+            notification.innerHTML = `
+                <div class="notification-title">${title}</div>
+                <div class="notification-message">${message}</div>
+            `;
+            document.body.appendChild(notification);
+        } else {
+            notification.querySelector('.notification-title').textContent = title;
+            notification.querySelector('.notification-message').textContent = message;
+        }
+
+        notification.style.display = 'block';
+
+        setTimeout(() => {
+            notification.style.display = 'none';
+        }, 5000);
+    },
+
+    /**
+     * Close folder context menu
+     */
+    closeContextMenu() {
+        const menu = document.getElementById('folder-context-menu');
+        if (menu) {
+            menu.style.display = 'none';
+            window.app.contextMenuTargetFolder = null;
+        }
+    },
+
+    /**
+     * Close file context menu
+     */
+    closeFileContextMenu() {
+        const menu = document.getElementById('file-context-menu');
+        if (menu) {
+            menu.style.display = 'none';
+            window.app.contextMenuTargetFile = null;
+        }
+    },
+
+    /**
+     * Update file icons based on file type
+     */
+    updateFileIcons() {
+        const fileCards = document.querySelectorAll('.file-card');
+
+        fileCards.forEach(card => {
+            const fileName = card.querySelector('.file-name')?.textContent || '';
+            const iconElement = card.querySelector('.file-icon');
+            if (!iconElement) return;
+
+            if (iconElement.classList.contains('folder-icon')) {
+                iconElement.innerHTML = '';
+            }
+            else if (fileName.endsWith('.docx') || fileName.endsWith('.pdf') || fileName.endsWith('.txt') || fileName.endsWith('.xlsx')) {
+                iconElement.classList.add('doc-icon');
+                iconElement.innerHTML = '';
+            }
+            else if (fileName.endsWith('.jpg') || fileName.endsWith('.png') || fileName.endsWith('.gif') || fileName.endsWith('.jpeg')) {
+                iconElement.classList.add('image-icon');
+                iconElement.innerHTML = '';
+            }
+            else if (fileName.endsWith('.mp4') || fileName.endsWith('.avi') || fileName.endsWith('.mov') || fileName.endsWith('.mkv')) {
+                iconElement.classList.add('video-icon');
+                iconElement.innerHTML = '';
+            }
+            else {
+                const extension = fileName.split('.').pop().toLowerCase();
+
+                if (['json', 'js', 'jsx', 'ts', 'tsx', 'html', 'css', 'scss', 'py', 'java', 'c', 'cpp', 'cs', 'php', 'rb', 'go', 'rs', 'swift', 'kt'].includes(extension)) {
+                    iconElement.className = 'file-icon code-icon';
+                    iconElement.innerHTML = `
+                        <div class="code-line-1"></div>
+                        <div class="code-line-2"></div>
+                        <div class="code-line-3"></div>
+                    `;
+
+                    if (extension === 'json') {
+                        iconElement.classList.add('json-icon');
+                    } else if (['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
+                        iconElement.classList.add('js-icon');
+                    } else if (extension === 'html') {
+                        iconElement.classList.add('html-icon');
+                    } else if (['css', 'scss'].includes(extension)) {
+                        iconElement.classList.add('css-icon');
+                    } else if (extension === 'py') {
+                        iconElement.classList.add('py-icon');
+                    }
+                }
+            }
+        });
+    },
+
+    /**
+     * Add folder to the view
+     * @param {Object} folder - Folder object
+     */
+    addFolderToView(folder) {
+        // Grid view element
+        const folderGridElement = document.createElement('div');
+        folderGridElement.className = 'file-card';
+        folderGridElement.dataset.folderId = folder.id;
+        folderGridElement.dataset.folderName = folder.name;
+        folderGridElement.dataset.parentId = folder.parent_id || "";
+        folderGridElement.innerHTML = `
+            <div class="file-icon folder-icon">
+                <i class="fas fa-folder"></i>
+            </div>
+            <div class="file-name">${folder.name}</div>
+            <div class="file-info">Carpeta</div>
+        `;
+
+        // Drag and drop setup for folders
+        if (window.app.currentPath !== "") {
+            folderGridElement.setAttribute('draggable', 'true');
+
+            folderGridElement.addEventListener('dragstart', (e) => {
+                e.dataTransfer.setData('text/plain', folder.id);
+                e.dataTransfer.setData('application/oxicloud-folder', 'true');
+                folderGridElement.classList.add('dragging');
+            });
+
+            folderGridElement.addEventListener('dragend', () => {
+                folderGridElement.classList.remove('dragging');
+                document.querySelectorAll('.drop-target').forEach(el => {
+                    el.classList.remove('drop-target');
+                });
+            });
+        }
+
+        // Click to navigate
+        folderGridElement.addEventListener('click', () => {
+            window.app.currentPath = folder.id;
+            this.updateBreadcrumb(folder.name);
+            window.loadFiles();
+        });
+
+        // Context menu
+        folderGridElement.addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+
+            window.app.contextMenuTargetFolder = {
+                id: folder.id,
+                name: folder.name,
+                parent_id: folder.parent_id || ""
+            };
+
+            let folderContextMenu = document.getElementById('folder-context-menu');
+            folderContextMenu.style.left = `${e.pageX}px`;
+            folderContextMenu.style.top = `${e.pageY}px`;
+            folderContextMenu.style.display = 'block';
+        });
+
+        // Drop target setup
+        folderGridElement.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            folderGridElement.classList.add('drop-target');
+        });
+
+        folderGridElement.addEventListener('dragleave', () => {
+            folderGridElement.classList.remove('drop-target');
+        });
+
+        folderGridElement.addEventListener('drop', async (e) => {
+            e.preventDefault();
+            folderGridElement.classList.remove('drop-target');
+
+            const id = e.dataTransfer.getData('text/plain');
+            const isFolder = e.dataTransfer.getData('application/oxicloud-folder') === 'true';
+
+            if (id) {
+                if (isFolder) {
+                    if (id === folder.id) {
+                        alert("No puedes mover una carpeta a sí misma");
+                        return;
+                    }
+                    await fileOps.moveFolder(id, folder.id);
+                } else {
+                    await fileOps.moveFile(id, folder.id);
+                }
+            }
+        });
+
+        document.getElementById('files-grid').appendChild(folderGridElement);
+
+        // List view element - Mejorado
+        const folderListElement = document.createElement('div');
+        folderListElement.className = 'file-item';
+        folderListElement.dataset.folderId = folder.id;
+        folderListElement.dataset.folderName = folder.name;
+        folderListElement.dataset.parentId = folder.parent_id || "";
+
+        // Format date
+        const modifiedDate = new Date(folder.modified_at * 1000);
+        const formattedDate = modifiedDate.toLocaleDateString() + ' ' +
+                             modifiedDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+
+        // Make draggable if not in root
+        if (window.app.currentPath !== "") {
+            folderListElement.setAttribute('draggable', 'true');
+
+            folderListElement.addEventListener('dragstart', (e) => {
+                e.dataTransfer.setData('text/plain', folder.id);
+                e.dataTransfer.setData('application/oxicloud-folder', 'true');
+                folderListElement.classList.add('dragging');
+            });
+
+            folderListElement.addEventListener('dragend', () => {
+                folderListElement.classList.remove('dragging');
+                document.querySelectorAll('.drop-target').forEach(el => {
+                    el.classList.remove('drop-target');
+                });
+            });
+        }
+
+        // Mejorado: Estructura y clases para la vista de lista
+        folderListElement.innerHTML = `
+            <div class="name-cell">
+                <div class="file-icon folder-icon">
+                    <i class="fas fa-folder"></i>
+                </div>
+                <span>${folder.name}</span>
+            </div>
+            <div class="type-cell">${window.i18n ? window.i18n.t('files.file_types.folder') : 'Carpeta'}</div>
+            <div class="size-cell">--</div>
+            <div class="date-cell">${formattedDate}</div>
+        `;
+
+        // Click to navigate
+        folderListElement.addEventListener('click', () => {
+            window.app.currentPath = folder.id;
+            this.updateBreadcrumb(folder.name);
+            window.loadFiles();
+        });
+
+        // Context menu
+        folderListElement.addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+
+            window.app.contextMenuTargetFolder = {
+                id: folder.id,
+                name: folder.name,
+                parent_id: folder.parent_id || ""
+            };
+
+            let folderContextMenu = document.getElementById('folder-context-menu');
+            folderContextMenu.style.left = `${e.pageX}px`;
+            folderContextMenu.style.top = `${e.pageY}px`;
+            folderContextMenu.style.display = 'block';
+        });
+
+        // Drop target setup for list view
+        folderListElement.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            folderListElement.classList.add('drop-target');
+        });
+
+        folderListElement.addEventListener('dragleave', () => {
+            folderListElement.classList.remove('drop-target');
+        });
+
+        folderListElement.addEventListener('drop', async (e) => {
+            e.preventDefault();
+            folderListElement.classList.remove('drop-target');
+
+            const id = e.dataTransfer.getData('text/plain');
+            const isFolder = e.dataTransfer.getData('application/oxicloud-folder') === 'true';
+
+            if (id) {
+                if (isFolder) {
+                    if (id === folder.id) {
+                        alert("No puedes mover una carpeta a sí misma");
+                        return;
+                    }
+                    await fileOps.moveFolder(id, folder.id);
+                } else {
+                    await fileOps.moveFile(id, folder.id);
+                }
+            }
+        });
+
+        document.getElementById('files-list-view').appendChild(folderListElement);
+    },
+
+    /**
+     * Add file to the view
+     * @param {Object} file - File object
+     */
+    addFileToView(file) {
+        // Determine icon and type
+        let iconClass = 'fas fa-file';
+        let iconSpecialClass = '';
+        let typeLabel = 'Documento';
+
+        if (file.mime_type) {
+            if (file.mime_type.startsWith('image/')) {
+                iconClass = 'fas fa-file-image';
+                iconSpecialClass = 'image-icon';
+                typeLabel = window.i18n ? window.i18n.t('files.file_types.image') : 'Imagen';
+            } else if (file.mime_type.startsWith('text/')) {
+                iconClass = 'fas fa-file-alt';
+                iconSpecialClass = 'text-icon';
+                typeLabel = window.i18n ? window.i18n.t('files.file_types.text') : 'Texto';
+            } else if (file.mime_type.startsWith('video/')) {
+                iconClass = 'fas fa-file-video';
+                iconSpecialClass = 'video-icon';
+                typeLabel = window.i18n ? window.i18n.t('files.file_types.video') : 'Video';
+            } else if (file.mime_type.startsWith('audio/')) {
+                iconClass = 'fas fa-file-audio';
+                iconSpecialClass = 'audio-icon';
+                typeLabel = window.i18n ? window.i18n.t('files.file_types.audio') : 'Audio';
+            } else if (file.mime_type === 'application/pdf') {
+                iconClass = 'fas fa-file-pdf';
+                iconSpecialClass = 'pdf-icon';
+                typeLabel = window.i18n ? window.i18n.t('files.file_types.pdf') : 'PDF';
+            }
+        }
+
+        // Format size and date
+        const fileSize = window.formatFileSize(file.size);
+        const modifiedDate = new Date(file.modified_at * 1000);
+        const formattedDate = modifiedDate.toLocaleDateString() + ' ' +
+                             modifiedDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+
+        // Grid view element
+        const fileGridElement = document.createElement('div');
+        fileGridElement.className = 'file-card';
+        fileGridElement.innerHTML = `
+            <div class="file-icon">
+                <i class="${iconClass}"></i>
+            </div>
+            <div class="file-name">${file.name}</div>
+            <div class="file-info">Modificado ${formattedDate.split(' ')[0]}</div>
+        `;
+
+        fileGridElement.dataset.fileId = file.id;
+        fileGridElement.dataset.fileName = file.name;
+        fileGridElement.dataset.folderId = file.folder_id || "";
+
+        // Make draggable
+        fileGridElement.setAttribute('draggable', 'true');
+
+        fileGridElement.addEventListener('dragstart', (e) => {
+            e.dataTransfer.setData('text/plain', file.id);
+            fileGridElement.classList.add('dragging');
+        });
+
+        fileGridElement.addEventListener('dragend', () => {
+            fileGridElement.classList.remove('dragging');
+            document.querySelectorAll('.drop-target').forEach(el => {
+                el.classList.remove('drop-target');
+            });
+        });
+
+        // Download on click
+        fileGridElement.addEventListener('click', () => {
+            window.location.href = `/api/files/${file.id}`;
+        });
+
+        // Context menu
+        fileGridElement.addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+
+            window.app.contextMenuTargetFile = {
+                id: file.id,
+                name: file.name,
+                folder_id: file.folder_id || ""
+            };
+
+            let fileContextMenu = document.getElementById('file-context-menu');
+            fileContextMenu.style.left = `${e.pageX}px`;
+            fileContextMenu.style.top = `${e.pageY}px`;
+            fileContextMenu.style.display = 'block';
+        });
+
+        document.getElementById('files-grid').appendChild(fileGridElement);
+
+        // List view element - Mejorado con clases específicas y diseño mejorado
+        const fileListElement = document.createElement('div');
+        fileListElement.className = 'file-item';
+        fileListElement.dataset.fileId = file.id;
+        fileListElement.dataset.fileName = file.name;
+        fileListElement.dataset.folderId = file.folder_id || "";
+
+        fileListElement.innerHTML = `
+            <div class="name-cell">
+                <div class="file-icon ${iconSpecialClass}">
+                    <i class="${iconClass}"></i>
+                </div>
+                <span>${file.name}</span>
+            </div>
+            <div class="type-cell">${typeLabel}</div>
+            <div class="size-cell">${fileSize}</div>
+            <div class="date-cell">${formattedDate}</div>
+        `;
+
+        // Make draggable (list view)
+        fileListElement.setAttribute('draggable', 'true');
+
+        fileListElement.addEventListener('dragstart', (e) => {
+            e.dataTransfer.setData('text/plain', file.id);
+            fileListElement.classList.add('dragging');
+        });
+
+        fileListElement.addEventListener('dragend', () => {
+            fileListElement.classList.remove('dragging');
+            document.querySelectorAll('.drop-target').forEach(el => {
+                el.classList.remove('drop-target');
+            });
+        });
+
+        // Download on click
+        fileListElement.addEventListener('click', () => {
+            window.location.href = `/api/files/${file.id}`;
+        });
+
+        // Context menu (list view)
+        fileListElement.addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+
+            window.app.contextMenuTargetFile = {
+                id: file.id,
+                name: file.name,
+                folder_id: file.folder_id || ""
+            };
+
+            let fileContextMenu = document.getElementById('file-context-menu');
+            fileContextMenu.style.left = `${e.pageX}px`;
+            fileContextMenu.style.top = `${e.pageY}px`;
+            fileContextMenu.style.display = 'block';
+        });
+
+        document.getElementById('files-list-view').appendChild(fileListElement);
+    }
+};
+
+// Expose UI module globally
+window.ui = ui;
diff --git a/static/logo/logo-plain.svg b/static/logo/logo-plain.svg
new file mode 100644
index 00000000..ace99e31
--- /dev/null
+++ b/static/logo/logo-plain.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <!-- Fondo circular más pequeño -->
+  <circle cx="250" cy="250" r="180" fill="#f8f9fa" />
+  
+  <!-- Forma de nube principal - manteniendo la misma posición -->
+  <path d="M330 300c27.6 0 50-22.4 50-50s-22.4-50-50-50c-5.3 0-10.3 0.8-15.1 2.3C307.4 174.5 282.6 155 253 155c-29.6 0-54.4 19.5-62.9 46.3C185.3 200.8 180.3 200 175 200c-27.6 0-50 22.4-50 50s22.4 50 50 50h155z" fill="#ff5e3a" />
+</svg>
\ No newline at end of file
diff --git a/static/logo/logo-plain.svg:Zone.Identifier b/static/logo/logo-plain.svg:Zone.Identifier
new file mode 100644
index 00000000..73cdf12f
--- /dev/null
+++ b/static/logo/logo-plain.svg:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://claude.ai/
diff --git a/storage/prueba3/NIST.SP.500-322 (3).pdf b/storage/prueba3/NIST.SP.500-322 (3).pdf
deleted file mode 100755
index dc37a518..00000000
Binary files a/storage/prueba3/NIST.SP.500-322 (3).pdf and /dev/null differ
diff --git a/storage/prueba3/caffeine64.exe b/storage/prueba3/caffeine64.exe
deleted file mode 100755
index 388efb56..00000000
Binary files a/storage/prueba3/caffeine64.exe and /dev/null differ
diff --git a/storage/prueba3/folder_ids.json b/storage/prueba3/folder_ids.json
deleted file mode 100755
index 82394c71..00000000
--- a/storage/prueba3/folder_ids.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "path_to_id": {
-    "prueba5": "58a82b8c-ef9d-43cf-b593-4668fdb0ef03",
-    "prueba4": "248abd28-e94e-4c75-b1b6-712d9957d850",
-    "prueba3": "30dd94f1-86c6-4b9d-bc9a-d51686f0dbcd"
-  }
-}
\ No newline at end of file
diff --git a/storage/prueba3/oxicloud-logo.svg b/storage/prueba3/oxicloud-logo.svg
deleted file mode 100755
index d463f6b3..00000000
--- a/storage/prueba3/oxicloud-logo.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-  <!-- Fondo circular -->
-  <circle cx="250" cy="250" r="200" fill="#f8f9fa" />
-  
-  <!-- Forma de nube principal - inspirada en Nextcloud pero con estilo propio -->
-  <path d="M330 280c27.6 0 50-22.4 50-50s-22.4-50-50-50c-5.3 0-10.3 0.8-15.1 2.3C307.4 154.5 282.6 135 253 135c-29.6 0-54.4 19.5-62.9 46.3C185.3 180.8 180.3 180 175 180c-27.6 0-50 22.4-50 50s22.4 50 50 50h155z" fill="#ff5e3a" />
-  
-  <!-- Texto del logotipo - solo el nombre -->
-  <text x="250" y="350" font-family="Arial, sans-serif" font-size="55" font-weight="bold" text-anchor="middle" fill="#2b3a4a">OxiCloud</text>
-</svg>
diff --git a/storage/prueba4/NIST.SP.500-322 (3).pdf b/storage/prueba4/NIST.SP.500-322 (3).pdf
deleted file mode 100755
index dc37a518..00000000
Binary files a/storage/prueba4/NIST.SP.500-322 (3).pdf and /dev/null differ
diff --git a/storage/prueba4/file_ids.json b/storage/prueba4/file_ids.json
deleted file mode 100755
index fe765cc8..00000000
--- a/storage/prueba4/file_ids.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "path_to_id": {
-    "prueba5/NIST.SP.500-322.pdf": "50d9675e-617f-472d-a6e7-cdcf83dfadfe",
-    "prueba3/NIST.SP.500-322.pdf": "a73a94bd-77e5-41ad-8723-9675fa15e66c",
-    "file_ids.json": "bda2a482-6947-4922-8263-a3826d13ab11",
-    "folder_ids.json": "dbd1c1e4-8441-40d6-8f43-e53a53abfde0",
-    "prueba4/folder_ids.json": "d4b559da-bf7e-4754-99bc-970f9c7a64fc",
-    "prueba3/NIST.SP.500-322 (3).pdf": "e71813d5-4234-4b0f-9c0a-55acb731ce7e",
-    "NIST.SP.500-322 (3).pdf": "95f7039e-06ff-41b7-87a0-2d7af6cbe4fb"
-  }
-}
\ No newline at end of file
diff --git a/storage/prueba4/folder_ids.json b/storage/prueba4/folder_ids.json
deleted file mode 100755
index ab02f5b3..00000000
--- a/storage/prueba4/folder_ids.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "path_to_id": {
-    "prueba4": "66992be8-56dd-4c69-b743-98cf9c484c39",
-    "prueba5": "f09dfe30-f47a-4901-bf52-7214d601d24b",
-    "prueba3": "66047168-e2d3-44d5-85e4-656ed8b2d803"
-  }
-}
\ No newline at end of file
diff --git a/storage/prueba5/NIST.SP.500-322.pdf b/storage/prueba5/NIST.SP.500-322.pdf
deleted file mode 100755
index dc37a518..00000000
Binary files a/storage/prueba5/NIST.SP.500-322.pdf and /dev/null differ
diff --git a/storage/2022, CURRENT Medical Diagnosis and Treatment- Original_1.pdf b/storage/storage/Test1/2022, CURRENT Medical Diagnosis and Treatment- Original_1.pdf
similarity index 100%
rename from storage/2022, CURRENT Medical Diagnosis and Treatment- Original_1.pdf
rename to storage/storage/Test1/2022, CURRENT Medical Diagnosis and Treatment- Original_1.pdf
diff --git a/storage/serie1 (2) (1).png b/storage/storage/Test1/serie1 (2) (1).png
similarity index 100%
rename from storage/serie1 (2) (1).png
rename to storage/storage/Test1/serie1 (2) (1).png
diff --git a/storage/serie1 (2).png b/storage/storage/Test3/serie1 (2).png
similarity index 100%
rename from storage/serie1 (2).png
rename to storage/storage/Test3/serie1 (2).png