diff --git a/.cursor/rules/my-custom-rule.mdc b/.cursor/rules/my-custom-rule.mdc
deleted file mode 100644
index 75a84ca..0000000
--- a/.cursor/rules/my-custom-rule.mdc
+++ /dev/null
@@ -1,9 +0,0 @@
----
-description:
-globs:
----
-
-# Your rule content
-
-- You can @ files here
-- You can use markdown but dont have to
diff --git a/app/__init__.py b/app/__init__.py
index b42ac6b..1ad2dbd 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -1,18 +1,10 @@
-from flask import Flask, current_app, render_template
+from flask import Flask, current_app
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager
 from config import Config
 import os
 from datetime import datetime
 import sqlite3
-import logging
-
-# Configure logging
-logging.basicConfig(
-    level=logging.INFO,
-    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
-)
-logger = logging.getLogger(__name__)
 
 # Initialize extensions
 db = SQLAlchemy()
@@ -21,253 +13,79 @@ login_manager.login_view = 'auth.login'
 login_manager.login_message_category = 'info'
 
 def initialize_database(app):
-    """Create and initialize database tables if they don't exist"""
+    """Create database tables if they don't exist"""
     with app.app_context():
-        app.logger.info("Initializing database...")
         try:
-            # Check if tables exist before creating them
-            from sqlalchemy import inspect
-            inspector = inspect(db.engine)
-            existing_tables = inspector.get_table_names()
-            
-            # Only create tables that don't exist
-            if not existing_tables:
-                app.logger.info("Creating database tables...")
-                db.create_all()
-                
-                # Check if we need to add the Share and Download models
-                inspector = db.inspect(db.engine)
-                if not inspector.has_table('share'):
-                    app.logger.info("Creating Share table...")
-                    # Import models to ensure they're registered with SQLAlchemy
-                    from app.models import Share
-                    if not inspector.has_table('share'):
-                        # Create the Share table 
-                        Share.__table__.create(db.engine)
-                
-                if not inspector.has_table('download'):
-                    app.logger.info("Creating Download table...")
-                    from app.models import Download
-                    if not inspector.has_table('download'):
-                        # Create the Download table
-                        Download.__table__.create(db.engine)
-                
-                # Check for existing users - create admin if none
-                from app.models import User
-                if User.query.count() == 0:
-                    app.logger.info("No users found, creating default admin user...")
-                    admin = User(username='admin', email='admin@example.com')
-                    admin.set_password('adminpassword')
-                    db.session.add(admin)
-                    db.session.commit()
-                    app.logger.info("Default admin user created")
-            
-                app.logger.info("Database initialization complete")
-            else:
-                app.logger.info(f"Database already initialized with tables: {existing_tables}")
-                
-                # Check for missing tables
-                from app.models import User, File, Folder, Download
-                required_tables = ['users', 'files', 'folders', 'downloads']
-                missing_tables = [table for table in required_tables if table not in existing_tables]
-                
-                if missing_tables:
-                    app.logger.info(f"Creating missing tables: {missing_tables}")
-                    # Create only the missing tables
-                    db.create_all()
-            
+            # Create all tables
+            db.create_all()
+            app.logger.info("Database tables created successfully")
         except Exception as e:
-            app.logger.error(f"Error initializing database: {str(e)}")
-            # Don't raise the exception to prevent app startup failure
-            # But log it for debugging purposes
+            app.logger.error(f"Error creating database tables: {str(e)}")
 
 def run_migrations(app):
-    """Apply any necessary database migrations automatically"""
-    with app.app_context():
-        try:
-            app.logger.info("Running database migrations...")
-            # Get database path
-            db_path = app.config['SQLALCHEMY_DATABASE_URI'].replace('sqlite:///', '')
-            
-            # Check if we're using SQLite and if the database file exists
-            if db_path.startswith('/'):  # Absolute path 
-                if not os.path.exists(db_path):
-                    app.logger.info(f"Database file does not exist: {db_path}")
-                    return
-            
-            # Use SQLAlchemy to check and add missing columns
-            inspector = db.inspect(db.engine)
-            
-            # Check for 'file' table columns
-            if inspector.has_table('file'):
-                columns = [col['name'] for col in inspector.get_columns('file')]
-                
-                # Add storage_name column if it doesn't exist
-                if 'storage_name' not in columns:
-                    app.logger.info("Adding storage_name column to file table")
-                    if db.engine.name == 'sqlite':
-                        # For SQLite, use direct SQL as it doesn't support ALTER TABLE ADD COLUMN with default
-                        db.session.execute('ALTER TABLE file ADD COLUMN storage_name TEXT')
-                        # Update existing records
-                        db.session.execute('UPDATE file SET storage_name = uuid() WHERE storage_name IS NULL AND is_folder = 0')
-                        db.session.commit()
-            
-            # Check for user table columns
-            if inspector.has_table('user'):
-                columns = [col['name'] for col in inspector.get_columns('user')]
-                
-                # Add last_login column if it doesn't exist
-                if 'last_login' not in columns:
-                    app.logger.info("Adding last_login column to user table")
-                    if db.engine.name == 'sqlite':
-                        db.session.execute('ALTER TABLE user ADD COLUMN last_login DATETIME')
-                        db.session.commit()
-            
-            app.logger.info("Database migrations complete")
-        except Exception as e:
-            app.logger.error(f"Error during database migration: {str(e)}")
-            # Log error but don't crash the app
-
-def get_file_icon(mime_type, filename):
-    """Return Font Awesome icon class based on file type"""
-    if mime_type:
-        if mime_type.startswith('image/'):
-            return 'fa-file-image'
-        elif mime_type.startswith('video/'):
-            return 'fa-file-video'
-        elif mime_type.startswith('audio/'):
-            return 'fa-file-audio'
-        elif mime_type.startswith('text/'):
-            return 'fa-file-alt'
-        elif mime_type.startswith('application/pdf'):
-            return 'fa-file-pdf'
-        elif 'spreadsheet' in mime_type or 'excel' in mime_type:
-            return 'fa-file-excel'
-        elif 'presentation' in mime_type or 'powerpoint' in mime_type:
-            return 'fa-file-powerpoint'
-        elif 'document' in mime_type or 'word' in mime_type:
-            return 'fa-file-word'
+    """Apply any necessary database migrations"""
+    db_path = app.config['SQLALCHEMY_DATABASE_URI'].replace('sqlite:///', '')
     
-    # Check by extension
-    ext = os.path.splitext(filename)[1].lower()[1:]
-    if ext in ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp']:
-        return 'fa-file-image'
-    elif ext in ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv']:
-        return 'fa-file-video'
-    elif ext in ['mp3', 'wav', 'ogg', 'flac', 'm4a']:
-        return 'fa-file-audio'
-    elif ext in ['doc', 'docx', 'odt']:
-        return 'fa-file-word'
-    elif ext in ['xls', 'xlsx', 'ods', 'csv']:
-        return 'fa-file-excel'
-    elif ext in ['ppt', 'pptx', 'odp']:
-        return 'fa-file-powerpoint'
-    elif ext == 'pdf':
-        return 'fa-file-pdf'
-    elif ext in ['zip', 'rar', '7z', 'tar', 'gz']:
-        return 'fa-file-archive'
-    elif ext in ['txt', 'rtf', 'md']:
-        return 'fa-file-alt'
-    elif ext in ['html', 'css', 'js', 'py', 'java', 'php', 'c', 'cpp', 'json', 'xml']:
-        return 'fa-file-code'
+    if not os.path.exists(db_path):
+        app.logger.info(f"Database file does not exist: {db_path}")
+        return
     
-    return 'fa-file'
-
-def format_file_size(size):
-    """Format file size in bytes to human-readable format"""
-    if not size:
-        return "0 B"
+    try:
+        conn = sqlite3.connect(db_path)
+        cursor = conn.cursor()
+        
+        # Check if storage_name column exists in file table
+        cursor.execute("PRAGMA table_info(file)")
+        columns = [column[1] for column in cursor.fetchall()]
+        
+        if 'storage_name' not in columns:
+            app.logger.info("Adding storage_name column to file table")
+            cursor.execute("ALTER TABLE file ADD COLUMN storage_name TEXT")
+            
+            # Update existing records to use filename as storage_name
+            cursor.execute("UPDATE file SET storage_name = name WHERE storage_name IS NULL AND is_folder = 0")
+            conn.commit()
+        
+        conn.close()
+        app.logger.info("Database migrations completed successfully")
+    except sqlite3.OperationalError as e:
+        if "no such table: file" in str(e):
+            app.logger.info("File table doesn't exist yet, will be created with db.create_all()")
+        else:
+            app.logger.error(f"Error during migration: {str(e)}")
+    except Exception as e:
+        app.logger.error(f"Error during migration: {str(e)}")
         
-    size_names = ("B", "KB", "MB", "GB", "TB")
-    i = 0
-    while size >= 1024 and i < len(size_names) - 1:
-        size /= 1024
-        i += 1
-    return f"{size:.1f} {size_names[i]}"
-
 def create_app(config_class=Config):
     app = Flask(__name__)
-    
-    # Configure app
-    if config_class:
-        app.config.from_object(config_class)
-    else:
-        # Use default configuration
-        app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'dev-key-change-in-production')
-        app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URL', 'sqlite:///app.db')
-        app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
-        app.config['UPLOAD_FOLDER'] = os.path.join(os.path.dirname(os.path.abspath(__file__)), '../uploads')
-        app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024  # 100 MB max upload
-    
-    # Configure logging
-    if not app.debug:
-        # Set up file handler
-        if not os.path.exists('logs'):
-            os.mkdir('logs')
-        file_handler = logging.FileHandler('logs/flask_files.log')
-        file_handler.setFormatter(logging.Formatter(
-            '%(asctime)s %(levelname)s: %(message)s [in %(pathname)s:%(lineno)d]'
-        ))
-        file_handler.setLevel(logging.INFO)
-        app.logger.addHandler(file_handler)
-        
-        # Set log level
-        app.logger.setLevel(logging.INFO)
-        app.logger.info('Flask Files startup')
+    app.config.from_object(config_class)
     
     # Initialize extensions
     db.init_app(app)
     login_manager.init_app(app)
     
     # Initialize the upload folder
-    upload_folder = app.config.get('UPLOAD_FOLDER', 'uploads')
-    if not os.path.isabs(upload_folder):
-        # If it's a relative path, make it relative to the app instance folder
-        upload_folder = os.path.join(app.instance_path, upload_folder)
-        app.config['UPLOAD_FOLDER'] = upload_folder
+    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
     
-    os.makedirs(upload_folder, exist_ok=True)
-    app.logger.info(f"Upload folder initialized at: {upload_folder}")
-    
-    # Auto initialize database and run migrations on startup
+    # Auto initialize database if it doesn't exist
     with app.app_context():
         initialize_database(app)
         run_migrations(app)
     
     # Register blueprints
-    from app.routes.auth import bp as auth_bp
-    from app.routes.files import bp as files_bp
-    from app.routes.dashboard import bp as dashboard_bp
-    from app.routes.admin import bp as admin_bp
+    from app.routes.auth import auth_bp
+    from app.routes.files import files_bp
+    from app.routes.dashboard import dashboard_bp
     
-    app.register_blueprint(auth_bp, url_prefix='/auth')
-    app.register_blueprint(files_bp, url_prefix='/files')
+    app.register_blueprint(auth_bp)
+    app.register_blueprint(files_bp)
     app.register_blueprint(dashboard_bp)
-    app.register_blueprint(admin_bp, url_prefix='/admin')
     
     # Add context processor for template variables
     @app.context_processor
-    def inject_global_variables():
-        return {
-            'now': datetime.now(),
-            'file_icon': get_file_icon,
-            'format_size': format_file_size,
-            'app_version': '1.0.0',  # Add version number for caching
-        }
+    def inject_now():
+        return {'now': datetime.now()}
     
-    # Handle 404 errors
-    @app.errorhandler(404)
-    def not_found_error(error):
-        return render_template('errors/404.html'), 404
-    
-    # Handle 500 errors
-    @app.errorhandler(500)
-    def internal_error(error):
-        db.session.rollback()  # Rollback any failed database transactions
-        return render_template('errors/500.html'), 500
-    
-    logger.info("Flask Files startup")
     return app
 
-# Import must come after create_app to avoid circular imports
 from app import models
diff --git a/app/migrations/__init__.py b/app/migrations/__init__.py
deleted file mode 100644
index 00e10ac..0000000
--- a/app/migrations/__init__.py
+++ /dev/null
@@ -1,81 +0,0 @@
-"""
-Automatic database migrations system
-"""
-import logging
-from sqlalchemy import inspect
-from .. import db
-
-logger = logging.getLogger(__name__)
-
-class Migration:
-    """Base migration class"""
-    # Higher version numbers run later
-    version = 0
-    description = "Base migration"
-    
-    def should_run(self, inspector):
-        """Determine if this migration should run"""
-        return True
-    
-    def run(self):
-        """Execute the migration"""
-        raise NotImplementedError
-
-class AddFolderIdToFiles(Migration):
-    """Add folder_id column to files table"""
-    version = 1
-    description = "Add folder_id column to files table"
-    
-    def should_run(self, inspector):
-        """Check if folder_id column exists in files table"""
-        if 'files' not in inspector.get_table_names():
-            return False
-            
-        columns = [col['name'] for col in inspector.get_columns('files')]
-        return 'folder_id' not in columns
-    
-    def run(self):
-        """Add the folder_id column and foreign key constraint"""
-        try:
-            db.engine.execute('ALTER TABLE files ADD COLUMN folder_id INTEGER;')
-            db.engine.execute('ALTER TABLE files ADD CONSTRAINT fk_files_folder_id FOREIGN KEY (folder_id) REFERENCES folders (id);')
-            logger.info("Added folder_id column to files table")
-            return True
-        except Exception as e:
-            logger.error(f"Error adding folder_id column: {str(e)}")
-            return False
-
-# Add all migrations here
-MIGRATIONS = [
-    AddFolderIdToFiles(),
-    # Remove the Share table migration since we're not using it
-]
-
-def run_migrations():
-    """Run all pending migrations"""
-    logger.info("Checking for pending database migrations...")
-    inspector = inspect(db.engine)
-    
-    # Sort migrations by version
-    pending_migrations = sorted([m for m in MIGRATIONS if m.should_run(inspector)], 
-                              key=lambda m: m.version)
-    
-    if not pending_migrations:
-        logger.info("No pending migrations found.")
-        return
-    
-    logger.info(f"Found {len(pending_migrations)} pending migrations.")
-    
-    success_count = 0
-    for migration in pending_migrations:
-        logger.info(f"Running migration {migration.version}: {migration.description}")
-        try:
-            success = migration.run()
-            if success:
-                success_count += 1
-            else:
-                logger.warning(f"Migration {migration.version} reported failure")
-        except Exception as e:
-            logger.error(f"Error in migration {migration.version}: {str(e)}")
-    
-    logger.info(f"Migration complete. {success_count}/{len(pending_migrations)} migrations successful.") 
\ No newline at end of file
diff --git a/app/migrations/add_folder_id_to_files.py b/app/migrations/add_folder_id_to_files.py
deleted file mode 100644
index 158635e..0000000
--- a/app/migrations/add_folder_id_to_files.py
+++ /dev/null
@@ -1,29 +0,0 @@
-"""
-Migration script to add folder_id column to files table
-"""
-from flask import Flask
-from app import create_app, db
-from app.models import File, Folder
-
-def run_migration():
-    """Add folder_id column to files table if it doesn't exist"""
-    app = create_app()
-    
-    with app.app_context():
-        # Check if the column exists
-        from sqlalchemy import inspect
-        inspector = inspect(db.engine)
-        columns = [col['name'] for col in inspector.get_columns('files')]
-        
-        if 'folder_id' not in columns:
-            print("Adding folder_id column to files table...")
-            # Add the column
-            db.engine.execute('ALTER TABLE files ADD COLUMN folder_id INTEGER;')
-            # Add foreign key constraint
-            db.engine.execute('ALTER TABLE files ADD CONSTRAINT fk_files_folder_id FOREIGN KEY (folder_id) REFERENCES folders (id);')
-            print("Column added successfully!")
-        else:
-            print("folder_id column already exists")
-
-if __name__ == "__main__":
-    run_migration() 
\ No newline at end of file
diff --git a/app/migrations/add_share_table.py b/app/migrations/add_share_table.py
deleted file mode 100644
index 434cd71..0000000
--- a/app/migrations/add_share_table.py
+++ /dev/null
@@ -1,36 +0,0 @@
-"""
-Add Share table for file and folder sharing
-"""
-from sqlalchemy import inspect
-from .. import db
-
-class AddShareTable:
-    """Migration to add the shares table"""
-    version = 2
-    description = "Add Share table for file/folder sharing"
-    
-    def should_run(self, inspector):
-        """Check if the shares table exists"""
-        return 'shares' not in inspector.get_table_names()
-    
-    def run(self):
-        """Create the shares table"""
-        try:
-            db.engine.execute('''
-            CREATE TABLE shares (
-                id INTEGER PRIMARY KEY,
-                item_type VARCHAR(10) NOT NULL,
-                item_id INTEGER NOT NULL,
-                owner_id INTEGER NOT NULL,
-                user_id INTEGER NOT NULL,
-                permission VARCHAR(10) NOT NULL DEFAULT 'view',
-                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-                updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-                FOREIGN KEY (owner_id) REFERENCES users (id),
-                FOREIGN KEY (user_id) REFERENCES users (id)
-            )
-            ''')
-            return True
-        except Exception as e:
-            print(f"Error creating shares table: {str(e)}")
-            return False 
\ No newline at end of file
diff --git a/app/models.py b/app/models.py
index 0186f1d..bdc9ea7 100644
--- a/app/models.py
+++ b/app/models.py
@@ -1,181 +1,78 @@
 from datetime import datetime
-import logging
 from werkzeug.security import generate_password_hash, check_password_hash
 from flask_login import UserMixin
 from app import db, login_manager
 import uuid
-import os
-import mimetypes
-
-# Add debug logging
-logger = logging.getLogger(__name__)
-logger.info("Loading models.py module")
 
 @login_manager.user_loader
 def load_user(id):
     return User.query.get(int(id))
 
 class User(UserMixin, db.Model):
-    __tablename__ = 'users'
+    __tablename__ = 'user'
     
     id = db.Column(db.Integer, primary_key=True)
-    username = db.Column(db.String(64), unique=True, index=True)
-    email = db.Column(db.String(120), unique=True, index=True)
+    username = db.Column(db.String(64), index=True, unique=True)
+    email = db.Column(db.String(120), index=True, unique=True)
     password_hash = db.Column(db.String(128))
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
-    is_admin = db.Column(db.Boolean, default=False)
+    last_login = db.Column(db.DateTime)
     
-    # Define relationships without circular backrefs
-    folders = db.relationship('Folder', foreign_keys='Folder.user_id', 
-                            backref=db.backref('owner', lazy='joined'),
-                            lazy='dynamic', cascade="all, delete-orphan")
-    
-    files = db.relationship('File', foreign_keys='File.user_id',
-                          backref=db.backref('owner', lazy='joined'),
-                          lazy='dynamic', cascade="all, delete-orphan")
-    
-    downloads = db.relationship('Download', foreign_keys='Download.user_id',
-                              backref=db.backref('downloader', lazy='joined'),
-                              lazy='dynamic', cascade="all, delete-orphan")
-    
-    # Add shares relationship for consistency with existing database
-    shares_created = db.relationship('Share', foreign_keys='Share.user_id',
-                                  backref=db.backref('creator', lazy='joined'),
-                                  lazy='dynamic', cascade="all, delete-orphan")
-    
-    @property
-    def password(self):
-        raise AttributeError('password is not a readable attribute')
-    
-    @password.setter
-    def password(self, password):
-        self.password_hash = generate_password_hash(password)
-        logger.info(f"Password set for user {self.username}")
-    
-    # Add set_password method for compatibility with existing code
-    def set_password(self, password):
-        """Set user password - compatibility method"""
-        logger.info(f"set_password called for {self.username}")
-        self.password_hash = generate_password_hash(password)
-    
-    def verify_password(self, password):
-        return check_password_hash(self.password_hash, password)
+    # Relationships
+    files = db.relationship('File', backref='owner', lazy='dynamic', 
+                           foreign_keys='File.user_id', cascade='all, delete-orphan')
     
     def __repr__(self):
         return f'<User {self.username}>'
-
-# Log that the User class is defined
-logger.info("User class defined with set_password method")
-
-class Folder(db.Model):
-    __tablename__ = 'folders'
     
-    id = db.Column(db.Integer, primary_key=True)
-    name = db.Column(db.String(255), nullable=False)
-    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    parent_id = db.Column(db.Integer, db.ForeignKey('folders.id'))
-    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
     
-    # Define relationship to parent folder with proper backref
-    parent = db.relationship('Folder', remote_side=[id], 
-                           backref=db.backref('children', lazy='dynamic'))
-    
-    # Define relationship to files in this folder
-    files = db.relationship('File', foreign_keys='File.folder_id',
-                          backref=db.backref('folder', lazy='joined'),
-                          lazy='dynamic', cascade="all, delete-orphan")
-    
-    def get_path(self):
-        """Get the full path of the folder"""
-        if self.parent is None:
-            return "/" + self.name
-        return self.parent.get_path() + "/" + self.name
-    
-    def __repr__(self):
-        return f'<Folder {self.name}>'
+    def check_password(self, password):
+        return check_password_hash(self.password_hash, password)
 
 class File(db.Model):
-    __tablename__ = 'files'
+    __tablename__ = 'file'
     
     id = db.Column(db.Integer, primary_key=True)
     name = db.Column(db.String(255), nullable=False)
-    original_name = db.Column(db.String(255), nullable=False)
-    path = db.Column(db.String(255), nullable=False)
-    size = db.Column(db.Integer, nullable=False)
-    type = db.Column(db.String(128))
-    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    folder_id = db.Column(db.Integer, db.ForeignKey('folders.id'))
+    storage_name = db.Column(db.String(255))  # Used for storing files with unique names
+    is_folder = db.Column(db.Boolean, default=False)
+    mime_type = db.Column(db.String(128))
+    size = db.Column(db.Integer, default=0)  # Size in bytes
+    parent_id = db.Column(db.Integer, db.ForeignKey('file.id', ondelete='CASCADE'), nullable=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
     updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
     
-    # Define relationships
-    shares = db.relationship('Share', backref='file', lazy='dynamic')
-    
-    @property
-    def icon_class(self):
-        """Get the appropriate Font Awesome icon class based on file extension"""
-        extension = os.path.splitext(self.name)[1].lower()
-        
-        # Map extensions to icon classes
-        icon_map = {
-            '.pdf': 'fa-file-pdf',
-            '.doc': 'fa-file-word', '.docx': 'fa-file-word',
-            '.xls': 'fa-file-excel', '.xlsx': 'fa-file-excel',
-            '.ppt': 'fa-file-powerpoint', '.pptx': 'fa-file-powerpoint',
-            '.jpg': 'fa-file-image', '.jpeg': 'fa-file-image', '.png': 'fa-file-image', 
-            '.gif': 'fa-file-image', '.svg': 'fa-file-image',
-            '.mp3': 'fa-file-audio', '.wav': 'fa-file-audio', '.ogg': 'fa-file-audio',
-            '.mp4': 'fa-file-video', '.avi': 'fa-file-video', '.mov': 'fa-file-video',
-            '.zip': 'fa-file-archive', '.rar': 'fa-file-archive', '.tar': 'fa-file-archive',
-            '.gz': 'fa-file-archive',
-            '.txt': 'fa-file-alt', '.md': 'fa-file-alt',
-            '.html': 'fa-file-code', '.css': 'fa-file-code', '.js': 'fa-file-code',
-            '.py': 'fa-file-code', '.java': 'fa-file-code', '.c': 'fa-file-code'
-        }
-        
-        return icon_map.get(extension, 'fa-file')
-    
-    def get_mime_type(self):
-        """Get the MIME type based on the file extension"""
-        mime_type, _ = mimetypes.guess_type(self.name)
-        return mime_type or 'application/octet-stream'
+    # Relationships
+    children = db.relationship('File', backref=db.backref('parent', remote_side=[id]),
+                              lazy='dynamic', cascade='all, delete-orphan')
     
     def __repr__(self):
-        return f'<File {self.name}>'
+        return f'<File {self.name} {"(Folder)" if self.is_folder else ""}>'
+    
+    def generate_storage_name(self):
+        """Generate a unique name for file storage to prevent conflicts"""
+        if self.is_folder:
+            return None
+        
+        # Generate a unique filename using UUID
+        ext = self.name.rsplit('.', 1)[1].lower() if '.' in self.name else ''
+        return f"{uuid.uuid4().hex}.{ext}" if ext else f"{uuid.uuid4().hex}"
 
 class Share(db.Model):
-    __tablename__ = 'shares'
-    
     id = db.Column(db.Integer, primary_key=True)
-    file_id = db.Column(db.Integer, db.ForeignKey('files.id'), nullable=False)
-    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    access_key = db.Column(db.String(64), unique=True, index=True, nullable=False)
-    expires_at = db.Column(db.DateTime, nullable=True)
+    file_id = db.Column(db.Integer, db.ForeignKey('file.id'))
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
+    token = db.Column(db.String(64), unique=True)
     created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    download_count = db.Column(db.Integer, default=0)
-    
-    def is_expired(self):
-        """Check if the share has expired"""
-        if self.expires_at is None:
-            return False
-        return datetime.utcnow() > self.expires_at
-    
-    def __repr__(self):
-        return f'<Share {self.access_key}>'
+    expires_at = db.Column(db.DateTime, nullable=True)
+    downloads = db.relationship('Download', backref='share', lazy='dynamic')
 
 class Download(db.Model):
-    __tablename__ = 'downloads'
-    
     id = db.Column(db.Integer, primary_key=True)
-    file_id = db.Column(db.Integer, db.ForeignKey('files.id'), nullable=False)
-    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False)
-    download_date = db.Column(db.DateTime, default=datetime.utcnow)
-    
-    # Define relationship to file
-    file = db.relationship('File', foreign_keys=[file_id],
-                         backref=db.backref('file_downloads', lazy='dynamic'))
-    
-    def __repr__(self):
-        return f'<Download {self.id} by {self.user_id}>'
+    file_id = db.Column(db.Integer, db.ForeignKey('file.id'))
+    share_id = db.Column(db.Integer, db.ForeignKey('share.id'))
+    ip_address = db.Column(db.String(45))
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow)
diff --git a/app/routes/admin.py b/app/routes/admin.py
deleted file mode 100644
index b17865d..0000000
--- a/app/routes/admin.py
+++ /dev/null
@@ -1,47 +0,0 @@
-from flask import Blueprint, render_template, jsonify, redirect, url_for, flash, current_app
-from flask_login import login_required, current_user
-from ..models import User
-from ..migrations import run_migrations
-from ..utils.reset_db import reset_database
-
-bp = Blueprint('admin', __name__, url_prefix='/admin')
-
-@bp.route('/')
-@login_required
-def index():
-    """Admin panel home"""
-    if not current_user.is_admin:
-        flash('Access denied. Admin privileges required.', 'error')
-        return redirect(url_for('dashboard.index'))
-    
-    return render_template('admin/panel.html')
-
-@bp.route('/run-migrations', methods=['POST'])
-@login_required
-def trigger_migrations():
-    """Manually trigger database migrations (admin only)"""
-    # Check if user is admin
-    if not current_user.is_admin:
-        return jsonify({'error': 'Unauthorized. Admin privileges required'}), 403
-    
-    # Run migrations
-    with current_app.app_context():
-        run_migrations()
-    
-    return jsonify({'success': True, 'message': 'Migrations completed successfully'})
-
-@bp.route('/reset-database', methods=['POST'])
-@login_required
-def reset_db():
-    """Reset the entire database (admin only)"""
-    # Check if user is admin
-    if not current_user.is_admin:
-        return jsonify({'error': 'Unauthorized. Admin privileges required'}), 403
-    
-    # Reset database
-    success = reset_database()
-    
-    if success:
-        return jsonify({'success': True, 'message': 'Database reset successfully. You will be logged out.'})
-    else:
-        return jsonify({'error': 'Failed to reset database. Check logs for details.'}), 500 
\ No newline at end of file
diff --git a/app/routes/auth.py b/app/routes/auth.py
index c3d3c45..2e139c9 100644
--- a/app/routes/auth.py
+++ b/app/routes/auth.py
@@ -1,4 +1,4 @@
-from flask import Blueprint, render_template, redirect, url_for, flash, request, current_app, jsonify, session
+from flask import render_template, redirect, url_for, flash, request, current_app, jsonify, session
 from flask_login import login_user, logout_user, login_required, current_user
 from urllib.parse import urlparse
 from app import db
@@ -8,13 +8,6 @@ from flask_wtf import FlaskForm
 from wtforms import StringField, PasswordField, BooleanField, SubmitField
 from wtforms.validators import DataRequired, Length, EqualTo, ValidationError
 from werkzeug.exceptions import BadRequest
-from werkzeug.security import generate_password_hash
-import logging
-
-# Setup logging
-logger = logging.getLogger(__name__)
-
-bp = Blueprint('auth', __name__)
 
 # Login form
 class LoginForm(FlaskForm):
@@ -35,77 +28,51 @@ class RegistrationForm(FlaskForm):
         if user is not None:
             raise ValidationError('Please use a different username.')
 
-@bp.route('/login', methods=['GET', 'POST'])
+@auth_bp.route('/login', methods=['GET', 'POST'])
 def login():
-    """User login page"""
     if current_user.is_authenticated:
         return redirect(url_for('dashboard.index'))
     
     form = LoginForm()
     if form.validate_on_submit():
         user = User.query.filter_by(username=form.username.data).first()
-        if user is None or not user.verify_password(form.password.data):
+        
+        if user is None or not user.check_password(form.password.data):
             flash('Invalid username or password', 'error')
             return redirect(url_for('auth.login'))
         
         login_user(user, remember=form.remember_me.data)
         
-        # Redirect to requested page or dashboard
         next_page = request.args.get('next')
         if not next_page or urlparse(next_page).netloc != '':
             next_page = url_for('dashboard.index')
-        
-        flash('Login successful!', 'success')
+            
         return redirect(next_page)
     
-    return render_template('auth/login.html', form=form)
+    return render_template('auth/login.html', title='Sign In', form=form)
 
-@bp.route('/logout')
+@auth_bp.route('/logout')
 @login_required
 def logout():
-    """User logout"""
     logout_user()
-    flash('You have been logged out.', 'info')
+    flash('You have been logged out', 'info')
     return redirect(url_for('auth.login'))
 
-@bp.route('/register', methods=['GET', 'POST'])
+@auth_bp.route('/register', methods=['GET', 'POST'])
 def register():
-    """User registration page"""
     if current_user.is_authenticated:
         return redirect(url_for('dashboard.index'))
     
     form = RegistrationForm()
     if form.validate_on_submit():
-        # Create new user
-        user = User(
-            username=form.username.data,
-        )
-        
-        # Try both ways to set password
-        try:
-            # First try with set_password method
-            logger.info("Trying to set password with set_password method")
-            if hasattr(user, 'set_password'):
-                user.set_password(form.password.data)
-            else:
-                # Fall back to property setter
-                logger.info("set_password not found, using password property instead")
-                user.password = form.password.data
-        except Exception as e:
-            logger.error(f"Error setting password: {e}")
-            # Ensure we set the password somehow
-            user.password_hash = generate_password_hash(form.password.data)
-            logger.info("Set password_hash directly")
-        
-        # Save to database
+        user = User(username=form.username.data)
+        user.set_password(form.password.data)
         db.session.add(user)
         db.session.commit()
-        logger.info(f"User {user.username} registered successfully")
-        
         flash('Registration successful! You can now log in.', 'success')
         return redirect(url_for('auth.login'))
     
-    return render_template('auth/register.html', form=form)
+    return render_template('auth/register.html', title='Register', form=form)
 
 @auth_bp.route('/update_profile', methods=['POST'])
 @login_required
@@ -169,8 +136,12 @@ def update_preferences():
     flash('Preferences updated successfully', 'success')
     return redirect(url_for('auth.profile'))
 
-@bp.route('/profile')
+@auth_bp.route('/profile')
 @login_required
 def profile():
-    """User profile page"""
-    return render_template('auth/profile.html', user=current_user)
+    # Get theme preference from session or default to system
+    theme_preference = session.get('theme_preference', 'system')
+    
+    return render_template('auth/profile.html', 
+                          title='User Profile',
+                          theme_preference=theme_preference)
diff --git a/app/routes/dashboard.py b/app/routes/dashboard.py
index 073d2c8..75e77cd 100644
--- a/app/routes/dashboard.py
+++ b/app/routes/dashboard.py
@@ -1,46 +1,59 @@
-from flask import Blueprint, render_template, redirect, url_for
+from flask import Blueprint, render_template
 from flask_login import login_required, current_user
-from ..models import File, Folder
+from datetime import datetime, timedelta
+from app.models import File, Share, Download
 import os
 
-# Create blueprint with the name expected by __init__.py
-bp = Blueprint('dashboard', __name__)
+dashboard_bp = Blueprint('dashboard', __name__)
 
-@bp.route('/')
-@bp.route('/index')
+@dashboard_bp.route('/')
 @login_required
 def index():
-    """Dashboard index page"""
-    # Count user's files and folders
-    file_count = File.query.filter_by(user_id=current_user.id).count()
-    folder_count = Folder.query.filter_by(user_id=current_user.id).count()
+    # Get some stats for the dashboard
+    total_files = File.query.filter_by(user_id=current_user.id, is_folder=False).count()
+    total_folders = File.query.filter_by(user_id=current_user.id, is_folder=True).count()
     
-    # Get storage usage
-    storage_used = sum(file.size for file in File.query.filter_by(user_id=current_user.id).all())
+    # Recent files for quick access
+    recent_files = File.query.filter_by(user_id=current_user.id, is_folder=False)\
+        .order_by(File.updated_at.desc())\
+        .limit(8).all()
     
-    # Format size for display
-    if storage_used < 1024:
-        storage_used_formatted = f"{storage_used} bytes"
-    elif storage_used < 1024 * 1024:
-        storage_used_formatted = f"{storage_used / 1024:.2f} KB"
-    elif storage_used < 1024 * 1024 * 1024:
-        storage_used_formatted = f"{storage_used / (1024 * 1024):.2f} MB"
-    else:
-        storage_used_formatted = f"{storage_used / (1024 * 1024 * 1024):.2f} GB"
+    # Root folders for quick navigation
+    root_folders = File.query.filter_by(user_id=current_user.id, is_folder=True, parent_id=None)\
+        .order_by(File.name)\
+        .limit(8).all()
     
-    # Get recent files
-    recent_files = File.query.filter_by(user_id=current_user.id).order_by(File.created_at.desc()).limit(5).all()
+    # Count active shares (if Share model exists)
+    active_shares = 0
+    recent_activities = 0
     
-    # Create stats object that the template is expecting
-    stats = {
-        'file_count': file_count,
-        'folder_count': folder_count,
-        'storage_used': storage_used_formatted
-    }
+    # Check if Share and Download models exist/are imported
+    try:
+        # Count active shares
+        active_shares = Share.query.filter_by(user_id=current_user.id).filter(
+            (Share.expires_at > datetime.now()) | (Share.expires_at.is_(None))
+        ).count()
+        
+        # Recent activities count (downloads, shares, etc.)
+        recent_activities = Download.query.join(Share)\
+            .filter(Share.user_id == current_user.id)\
+            .filter(Download.timestamp > (datetime.now() - timedelta(days=7)))\
+            .count()
+    except:
+        # Models not ready yet, using default values
+        pass
     
-    return render_template('dashboard/index.html',
-                          stats=stats,  # Pass as stats object
-                          recent_files=recent_files)
+    return render_template('dashboard.html', 
+                          title='Dashboard',
+                          total_files=total_files,
+                          total_folders=total_folders,
+                          recent_files=recent_files,
+                          root_folders=root_folders,
+                          active_shares=active_shares,
+                          recent_activities=recent_activities,
+                          now=datetime.now(),
+                          file_icon=get_file_icon,
+                          format_size=format_file_size)
 
 def get_file_icon(mime_type, filename):
     """Return Font Awesome icon class based on file type"""
diff --git a/app/routes/files.py b/app/routes/files.py
index d13b435..86ed353 100644
--- a/app/routes/files.py
+++ b/app/routes/files.py
@@ -1,206 +1,146 @@
-from flask import Blueprint, render_template, redirect, url_for, flash, request, send_from_directory, abort, jsonify, send_file, current_app
+from flask import render_template, redirect, url_for, flash, request, send_from_directory, abort, jsonify, send_file
 from flask_login import login_required, current_user
 from werkzeug.utils import secure_filename
 from app import db
-from app.models import File, Share, Folder
-from config import Config
+from app.models import File, Share
+from app.routes import files_bp
 import os
 from datetime import datetime, timedelta
 import uuid
 import mimetypes
+from config import Config
 import shutil
-import json
-import time
 
-bp = Blueprint('files', __name__, url_prefix='/files')
-
-@bp.route('/')
-@bp.route('/browser')
-@bp.route('/browser/<int:folder_id>')
+@files_bp.route('/browser')
+@files_bp.route('/browser/<int:folder_id>')
 @login_required
 def browser(folder_id=None):
-    """Display file browser interface"""
+    # Get current folder
     current_folder = None
-    breadcrumbs = []
-    
     if folder_id:
-        current_folder = Folder.query.filter_by(id=folder_id, user_id=current_user.id).first_or_404()
-        
-        # Generate breadcrumbs
-        breadcrumbs = []
-        parent = current_folder
-        while parent:
-            breadcrumbs.append(parent)
-            parent = parent.parent
+        current_folder = File.query.filter_by(id=folder_id, user_id=current_user.id).first_or_404()
+        if not current_folder.is_folder:
+            abort(400)
+    
+    # Generate breadcrumb navigation
+    breadcrumbs = []
+    if current_folder:
+        temp_folder = current_folder
+        while temp_folder:
+            breadcrumbs.append(temp_folder)
+            temp_folder = temp_folder.parent
         breadcrumbs.reverse()
     
-    # For initial load - only get folders and files if it's not an AJAX request
-    if not request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-        if current_folder:
-            folders = Folder.query.filter_by(parent_id=current_folder.id, user_id=current_user.id).all()
-            files = File.query.filter_by(folder_id=current_folder.id, user_id=current_user.id).all()
-        else:
-            folders = Folder.query.filter_by(parent_id=None, user_id=current_user.id).all()
-            files = File.query.filter_by(folder_id=None, user_id=current_user.id).all()
-        
-        # Get the search query if provided
-        query = request.args.get('q', '')
-        if query:
-            # Filter folders and files by name containing the query
-            folders = [f for f in folders if query.lower() in f.name.lower()]
-            files = [f for f in files if query.lower() in f.name.lower()]
-        
-        return render_template('files/browser.html',
-                              current_folder=current_folder,
-                              breadcrumbs=breadcrumbs,
-                              folders=folders, 
-                              files=files)
-    else:
-        # For AJAX request, return just the folder contents
-        # Implement this if needed
-        pass
-
-@bp.route('/contents')
-@login_required
-def folder_contents():
-    """Returns the HTML for folder contents (used for AJAX loading)"""
-    folder_id = request.args.get('folder_id', type=int)
-    sort_by = request.args.get('sort', 'name')
-    sort_order = request.args.get('order', 'asc')
-    search_query = request.args.get('search', '')
+    # Get files and folders
+    query = File.query.filter_by(user_id=current_user.id, parent_id=folder_id)
+    folders = query.filter_by(is_folder=True).order_by(File.name).all()
+    files = query.filter_by(is_folder=False).order_by(File.name).all()
     
-    # Get the current folder if a folder_id is provided
-    current_folder = None
+    return render_template('files/browser.html',
+                          title='File Browser',
+                          current_folder=current_folder,
+                          breadcrumbs=breadcrumbs,
+                          folders=folders,
+                          files=files)
+
+@files_bp.route('/upload')
+@login_required
+def upload():
+    folder_id = request.args.get('folder', None, type=int)
+    
+    # Get parent folder
+    parent_folder = None
     if folder_id:
-        current_folder = Folder.query.filter_by(id=folder_id, user_id=current_user.id).first_or_404()
+        parent_folder = File.query.filter_by(id=folder_id, user_id=current_user.id, is_folder=True).first_or_404()
     
-    # Base query for folders and files
-    folders_query = Folder.query.filter_by(user_id=current_user.id)
-    files_query = File.query.filter_by(user_id=current_user.id)
-    
-    # Filter by parent folder
-    if current_folder:
-        folders_query = folders_query.filter_by(parent_id=current_folder.id)
-        files_query = files_query.filter_by(folder_id=current_folder.id)
-    else:
-        folders_query = folders_query.filter_by(parent_id=None)
-        files_query = files_query.filter_by(folder_id=None)
-    
-    # Apply search if provided
-    if search_query:
-        folders_query = folders_query.filter(Folder.name.ilike(f'%{search_query}%'))
-        files_query = files_query.filter(File.name.ilike(f'%{search_query}%'))
-    
-    # Apply sorting
-    if sort_by == 'name':
-        folders_query = folders_query.order_by(Folder.name.asc() if sort_order == 'asc' else Folder.name.desc())
-        files_query = files_query.order_by(File.name.asc() if sort_order == 'asc' else File.name.desc())
-    elif sort_by == 'date':
-        folders_query = folders_query.order_by(Folder.updated_at.desc() if sort_order == 'asc' else Folder.updated_at.asc())
-        files_query = files_query.order_by(File.updated_at.desc() if sort_order == 'asc' else File.updated_at.asc())
-    elif sort_by == 'size':
-        # Folders always come first, then sort files by size
-        files_query = files_query.order_by(File.size.asc() if sort_order == 'asc' else File.size.desc())
-    
-    # Get the results
-    folders = folders_query.all()
-    files = files_query.all()
-    
-    # Different format of response based on requested format
-    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-        # If AJAX request, check if JSON or HTML is requested
-        if request.args.get('format') == 'json':
-            # Return JSON response with folder and file data
-            folder_data = [{
-                'id': folder.id,
-                'name': folder.name,
-                'updated_at': folder.updated_at.isoformat(),
-                'is_folder': True,
-                'item_count': folder.files.count(),
-                'url': url_for('files.browser', folder_id=folder.id)
-            } for folder in folders]
-            
-            file_data = [{
-                'id': file.id,
-                'name': file.name,
-                'size': file.size,
-                'formatted_size': format_file_size(file.size),
-                'type': file.type,
-                'updated_at': file.updated_at.isoformat(),
-                'is_folder': False,
-                'icon': file.icon_class,
-                'url': url_for('files.download', file_id=file.id)
-            } for file in files]
-            
-            return jsonify({
-                'folders': folder_data,
-                'files': file_data,
-                'total_items': len(folder_data) + len(file_data)
-            })
-        else:
-            # Return HTML partial
-            return render_template('files/partials/folder_contents.html',
-                                  current_folder=current_folder,
-                                  folders=folders,
-                                  files=files)
-    else:
-        # If not AJAX, redirect to browser view
-        if current_folder:
-            return redirect(url_for('files.browser', folder_id=current_folder.id))
-        else:
-            return redirect(url_for('files.browser'))
+    return render_template('files/upload.html',
+                          title='Upload Files',
+                          parent_folder=parent_folder)
 
-@bp.route('/upload', methods=['GET', 'POST'])
-@bp.route('/upload/<int:folder_id>', methods=['GET', 'POST'])
+@files_bp.route('/upload_folder', methods=['POST'])
 @login_required
-def upload(folder_id=None):
-    """Page for uploading files"""
-    if request.method == 'POST':
-        # Handle file upload
-        if 'file' not in request.files:
-            if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-                return jsonify({'error': 'No file part'}), 400
-            flash('No file part', 'error')
-            return redirect(request.url)
+def upload_folder():
+    folder_id = request.form.get('folder_id', None, type=int)
+    
+    # Get parent folder
+    parent_folder = None
+    if folder_id:
+        parent_folder = File.query.filter_by(id=folder_id, user_id=current_user.id, is_folder=True).first_or_404()
+    
+    # Create temporary directory for uploaded files
+    temp_dir = os.path.join(Config.UPLOAD_FOLDER, 'temp', str(uuid.uuid4()))
+    os.makedirs(temp_dir, exist_ok=True)
+    
+    try:
+        # Process uploaded files (with relative paths)
+        files = request.files.getlist('folder[]')
+        if not files or all(file.filename == '' for file in files):
+            flash('No folder selected for upload', 'error')
+            shutil.rmtree(temp_dir, ignore_errors=True)
+            return redirect(url_for('files.browser', folder_id=folder_id))
         
-        file = request.files['file']
-        
-        # Validate filename
-        if file.filename == '':
-            if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-                return jsonify({'error': 'No selected file'}), 400
-            flash('No selected file', 'error')
-            return redirect(request.url)
-        
-        # Get the parent folder
-        parent_folder = None
-        if folder_id:
-            parent_folder = Folder.query.get_or_404(folder_id)
-            # Check if user has permission
-            if parent_folder.user_id != current_user.id:
-                if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-                    return jsonify({'error': 'You do not have permission to upload to this folder'}), 403
-                flash('You do not have permission to upload to this folder', 'error')
-                return redirect(url_for('files.browser'))
-        
-        # Process the file
-        if file and allowed_file(file.filename):
-            filename = secure_filename(file.filename)
+        # Save files to temp directory with their relative paths
+        for file in files:
+            if file.filename == '':
+                continue
+                
+            # Get the relative path within the folder
+            rel_path = file.filename
+            if '\\' in rel_path:  # Windows paths
+                rel_path = rel_path.replace('\\', '/')
             
-            # Generate a unique filename
-            file_uuid = str(uuid.uuid4())
-            _, file_extension = os.path.splitext(filename)
-            storage_name = f"{file_uuid}{file_extension}"
+            # Create directories for the path
+            dir_path = os.path.join(temp_dir, os.path.dirname(rel_path))
+            os.makedirs(dir_path, exist_ok=True)
             
-            # Create storage path
-            upload_folder = current_app.config['UPLOAD_FOLDER']
-            user_folder = os.path.join(upload_folder, str(current_user.id))
-            os.makedirs(user_folder, exist_ok=True)
-            storage_path = os.path.join(user_folder, storage_name)
+            # Save the file
+            file.save(os.path.join(temp_dir, rel_path))
+        
+        # Process the folder structure
+        base_folder_name = os.path.basename(os.path.normpath(temp_dir))
+        for root, dirs, files in os.walk(temp_dir):
+            rel_root = os.path.relpath(root, temp_dir)
             
-            try:
-                # Save file to storage location
-                file.save(storage_path)
+            # Skip the root directory itself
+            if rel_root == '.':
+                rel_root = ''
+            
+            # Find or create parent folder
+            current_parent_id = folder_id
+            if rel_root:
+                path_parts = rel_root.split(os.path.sep)
+                for part in path_parts:
+                    existing_folder = File.query.filter_by(
+                        name=part,
+                        parent_id=current_parent_id,
+                        user_id=current_user.id,
+                        is_folder=True
+                    ).first()
+                    
+                    if existing_folder:
+                        current_parent_id = existing_folder.id
+                    else:
+                        new_folder = File(
+                            name=part,
+                            user_id=current_user.id,
+                            parent_id=current_parent_id,
+                            is_folder=True
+                        )
+                        db.session.add(new_folder)
+                        db.session.flush()  # To get the ID
+                        current_parent_id = new_folder.id
+            
+            # Create file records for files in current directory
+            for filename in files:
+                full_path = os.path.join(root, filename)
+                secure_name = secure_filename(filename)
+                
+                # Generate UUID for storage
+                file_uuid = str(uuid.uuid4())
+                storage_path = os.path.join(Config.UPLOAD_FOLDER, file_uuid)
+                
+                # Copy file to storage location
+                shutil.copy2(full_path, storage_path)
                 
                 # Get file info
                 file_size = os.path.getsize(storage_path)
@@ -210,537 +150,499 @@ def upload(folder_id=None):
                 
                 # Create file record
                 db_file = File(
-                    name=filename,
-                    original_name=filename,
-                    path=storage_path,
+                    name=secure_name,
+                    storage_name=file_uuid,
+                    mime_type=mime_type,
                     size=file_size,
-                    type=mime_type,
                     user_id=current_user.id,
-                    folder_id=parent_folder.id if parent_folder else None
+                    parent_id=current_parent_id,
+                    is_folder=False
                 )
                 db.session.add(db_file)
-                db.session.commit()
-                
-                # Return success response with file info
-                return jsonify({
-                    'success': True,
-                    'file': {
-                        'id': db_file.id,
-                        'name': db_file.name,
-                        'size': db_file.size,
-                        'formatted_size': format_file_size(db_file.size),
-                        'type': db_file.type,
-                        'icon': db_file.icon_class
-                    }
-                })
-            
-            except Exception as e:
-                # Make sure to remove the file if there was an error
-                if os.path.exists(storage_path):
-                    os.remove(storage_path)
-                
-                current_app.logger.error(f"Upload error: {str(e)}")
-                return jsonify({'error': str(e)}), 500
         
-        else:
-            if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-                return jsonify({'error': 'File type not allowed'}), 400
-            flash('File type not allowed', 'error')
-            return redirect(request.url)
-    
-    # GET request - show upload form
-    return render_template('files/upload.html', folder_id=folder_id)
-
-@bp.route('/upload_folder', methods=['POST'])
-@login_required
-def upload_folder():
-    """Handle folder upload - this processes ZIP files uploaded as folders"""
-    folder_id = request.form.get('folder_id', None, type=int)
-    
-    parent_folder = None
-    if folder_id:
-        parent_folder = Folder.query.filter_by(id=folder_id, user_id=current_user.id).first_or_404()
-    
-    # Check if folder data was provided
-    if 'folder_data' not in request.form:
-        return jsonify({'error': 'No folder data provided'}), 400
-    
-    try:
-        folder_data = json.loads(request.form['folder_data'])
-        folder_name = secure_filename(folder_data.get('name', 'Unnamed Folder'))
-        
-        # Create folder record
-        folder = Folder(
-            name=folder_name,
-            user_id=current_user.id,
-            parent_id=parent_folder.id if parent_folder else None
-        )
-        db.session.add(folder)
-        db.session.flush()  # Get folder.id without committing
-        
-        # Process files
-        file_records = []
-        total_size = 0
-        
-        # Create temp dir for uploaded files
-        temp_dir = os.path.join(Config.UPLOAD_FOLDER, 'temp', str(uuid.uuid4()))
-        os.makedirs(temp_dir, exist_ok=True)
-        
-        try:
-            for file_info in folder_data.get('files', []):
-                original_path = file_info.get('path', '')
-                
-                # Skip files without a valid path
-                if not original_path:
-                    continue
-                
-                # Get relative path within the folder
-                path_parts = original_path.split('/')
-                
-                # Create intermediate folders as needed
-                current_parent_id = folder.id
-                
-                for i, part in enumerate(path_parts[:-1]):
-                    part = secure_filename(part)
-                    # Skip empty parts
-                    if not part:
-                        continue
-                    
-                    # Check if folder already exists
-                    subfolder = Folder.query.filter_by(
-                        name=part, 
-                        parent_id=current_parent_id,
-                        user_id=current_user.id
-                    ).first()
-                    
-                    if not subfolder:
-                        # Create new subfolder
-                        subfolder = Folder(
-                            name=part,
-                            user_id=current_user.id,
-                            parent_id=current_parent_id
-                        )
-                        db.session.add(subfolder)
-                        db.session.flush()
-                    
-                    current_parent_id = subfolder.id
-                
-                # Process the file if it exists in the request
-                file_uid = file_info.get('id')
-                if file_uid and file_uid in request.files:
-                    file = request.files[file_uid]
-                    filename = secure_filename(path_parts[-1])
-                    
-                    # Generate UUID for storage
-                    file_uuid = str(uuid.uuid4())
-                    storage_path = os.path.join(Config.UPLOAD_FOLDER, file_uuid)
-                    
-                    # Save file
-                    file.save(storage_path)
-                    
-                    # Get file info
-                    file_size = os.path.getsize(storage_path)
-                    mime_type, _ = mimetypes.guess_type(filename)
-                    if not mime_type:
-                        mime_type = 'application/octet-stream'
-                    
-                    # Create file record
-                    db_file = File(
-                        name=filename,
-                        original_name=filename,
-                        path=storage_path,
-                        size=file_size,
-                        type=mime_type,
-                        user_id=current_user.id,
-                        folder_id=current_parent_id
-                    )
-                    db.session.add(db_file)
-                    file_records.append(db_file)
-                    total_size += file_size
-            
-            # Update folder size (sum of all files in the folder and subfolders)
-            folder.size = total_size
-            
-            # Commit all changes
-            db.session.commit()
-            
-            # Return success with folder info
-            return jsonify({
-                'success': True,
-                'folder': {
-                    'id': folder.id,
-                    'name': folder.name
-                }
-            })
-            
-        except Exception as e:
-            db.session.rollback()
-            current_app.logger.error(f"Folder upload error: {str(e)}")
-            return jsonify({'error': str(e)}), 500
-        finally:
-            # Clean up temp directory
-            shutil.rmtree(temp_dir, ignore_errors=True)
-            
+        db.session.commit()
+        flash('Folder uploaded successfully', 'success')
     except Exception as e:
-        current_app.logger.error(f"Folder upload parsing error: {str(e)}")
-        return jsonify({'error': str(e)}), 500
+        db.session.rollback()
+        flash(f'Error uploading folder: {str(e)}', 'error')
+    finally:
+        # Clean up temp directory
+        shutil.rmtree(temp_dir, ignore_errors=True)
+    
+    # Redirect back to the folder
+    if parent_folder:
+        return redirect(url_for('files.browser', folder_id=parent_folder.id))
+    else:
+        return redirect(url_for('files.browser'))
 
-@bp.route('/download/<int:file_id>')
-@login_required
-def download(file_id):
-    """Download a file"""
-    file = File.query.filter_by(id=file_id, user_id=current_user.id).first_or_404()
-    
-    # Can't download folders directly
-    if file.folder:
-        flash('Cannot download folders directly. Please use the ZIP option.', 'warning')
-        return redirect(url_for('files.browser', folder_id=file.folder.id))
-    
-    # Check if file exists in storage
-    storage_path = file.path
-    
-    if not os.path.exists(storage_path):
-        flash('File not found in storage', 'error')
-        return redirect(url_for('files.browser', folder_id=file.folder_id))
-    
-    # Return the file
-    return send_file(
-        storage_path,
-        download_name=file.name,
-        as_attachment=True
-    )
-
-@bp.route('/create_folder', methods=['POST'])
+@files_bp.route('/create_folder', methods=['GET', 'POST'])
 @login_required
 def create_folder():
-    """Create a new folder"""
-    name = request.form.get('name')
-    parent_id = request.form.get('parent_id')
+    parent_id = request.args.get('folder', None, type=int) or request.form.get('parent_id', None, type=int)
     
-    if not name:
-        flash('Folder name is required', 'danger')
-        return redirect(url_for('files.browser'))
-    
-    # Create folder
-    folder = Folder(
-        name=name,
-        user_id=current_user.id,
-        parent_id=parent_id if parent_id else None
-    )
-    
-    try:
-        db.session.add(folder)
-        db.session.commit()
-        flash(f'Folder "{name}" created successfully', 'success')
-    except Exception as e:
-        db.session.rollback()
-        current_app.logger.error(f"Error creating folder: {str(e)}")
-        flash('Error creating folder', 'danger')
-    
-    # Redirect to appropriate location
+    # Verify parent folder if specified
     if parent_id:
-        return redirect(url_for('files.browser', folder_id=parent_id))
-    return redirect(url_for('files.browser'))
+        parent = File.query.filter_by(id=parent_id, user_id=current_user.id, is_folder=True).first_or_404()
+    
+    if request.method == 'POST':
+        folder_name = request.form.get('folder_name', '').strip()
+        
+        if not folder_name:
+            flash('Folder name cannot be empty', 'error')
+            return redirect(request.url)
+        
+        # Secure the folder name
+        folder_name = secure_filename(folder_name)
+        
+        # Check if folder already exists
+        existing_folder = File.query.filter_by(
+            name=folder_name,
+            parent_id=parent_id,
+            user_id=current_user.id,
+            is_folder=True
+        ).first()
+        
+        if existing_folder:
+            flash(f'A folder named "{folder_name}" already exists', 'error')
+            return redirect(request.url)
+        
+        # Create new folder
+        new_folder = File(
+            name=folder_name,
+            user_id=current_user.id,
+            parent_id=parent_id,
+            is_folder=True
+        )
+        
+        db.session.add(new_folder)
+        db.session.commit()
+        
+        flash(f'Folder "{folder_name}" created successfully', 'success')
+        
+        # Handle AJAX requests
+        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+            return jsonify({'success': True, 'folder_id': new_folder.id})
+            
+        # Redirect to the new folder
+        return redirect(url_for('files.browser', folder_id=new_folder.id))
+    
+    # For GET, show the create folder form
+    return render_template('files/create_folder.html',
+                          title='Create Folder',
+                          parent_id=parent_id)
 
-@bp.route('/rename', methods=['POST'])
+@files_bp.route('/download/<int:file_id>')
 @login_required
-def rename_item():
-    """Rename a file or folder"""
-    try:
-        # Get JSON data
-        data = request.get_json()
-        if not data:
-            return jsonify({'error': 'No data provided'}), 400
-            
-        item_id = data.get('item_id')
-        new_name = data.get('new_name')
-        
-        # Validation
-        if not item_id or not new_name or new_name.strip() == '':
-            return jsonify({'error': 'Item ID and new name are required'}), 400
-            
-        # Determine if it's a file or folder
-        file = File.query.filter_by(id=item_id, user_id=current_user.id).first()
-        folder = Folder.query.filter_by(id=item_id, user_id=current_user.id).first()
-        
-        if file:
-            # For files, we need to handle the file system and database
-            old_path = file.path
-            file_dir = os.path.dirname(old_path)
-            
-            # Create safe name
-            safe_name = secure_filename(new_name)
-            
-            # Check for duplicates
-            existing_file = File.query.filter_by(
-                name=safe_name,
-                folder_id=file.folder_id,
-                user_id=current_user.id
-            ).filter(File.id != file.id).first()
-            
-            if existing_file:
-                return jsonify({'error': 'A file with this name already exists'}), 400
-                
-            # Update file path
-            new_path = os.path.join(file_dir, safe_name)
-            
-            # Rename file on disk
-            try:
-                if os.path.exists(old_path):
-                    os.rename(old_path, new_path)
-            except OSError as e:
-                return jsonify({'error': f'Error renaming file: {str(e)}'}), 500
-            
-            # Update database
-            file.name = safe_name
-            file.path = new_path
-            db.session.commit()
-            
-            return jsonify({
-                'success': True, 
-                'message': 'File renamed successfully',
-                'new_name': safe_name
-            })
-            
-        elif folder:
-            # For folders, we just update the database
-            # Check for duplicates
-            existing_folder = Folder.query.filter_by(
-                name=new_name,
-                parent_id=folder.parent_id,
-                user_id=current_user.id
-            ).filter(Folder.id != folder.id).first()
-            
-            if existing_folder:
-                return jsonify({'error': 'A folder with this name already exists'}), 400
-                
-            # Update folder name
-            folder.name = new_name
-            db.session.commit()
-            
-            return jsonify({
-                'success': True, 
-                'message': 'Folder renamed successfully',
-                'new_name': new_name
-            })
-        else:
-            return jsonify({'error': 'Item not found'}), 404
-            
-    except Exception as e:
-        db.session.rollback()
-        current_app.logger.error(f"Error renaming item: {str(e)}")
-        return jsonify({'error': str(e)}), 500
+def download(file_id):
+    file = File.query.filter_by(id=file_id, user_id=current_user.id, is_folder=False).first_or_404()
+    
+    # Record the download
+    download = Download(
+        file_id=file.id,
+        user_id=current_user.id,
+        ip_address=request.remote_addr
+    )
+    db.session.add(download)
+    db.session.commit()
+    
+    return send_from_directory(
+        Config.UPLOAD_FOLDER, 
+        file.storage_name,
+        as_attachment=True,
+        attachment_filename=file.name
+    )
 
-@bp.route('/delete/<item_id>', methods=['POST'])
+@files_bp.route('/delete/<int:file_id>', methods=['POST'])
 @login_required
-def delete_item(item_id):
-    """Delete a file or folder"""
-    try:
-        # Check if item exists
-        if not item_id or item_id == 'null':
-            return jsonify({'error': 'Invalid item ID'}), 400
-            
-        # Determine if it's a file or folder
-        file = File.query.filter_by(id=item_id, user_id=current_user.id).first()
-        folder = Folder.query.filter_by(id=item_id, user_id=current_user.id).first()
-        
-        if file:
-            # Delete file from storage
-            try:
-                if os.path.exists(file.path):
-                    os.remove(file.path)
-            except OSError as e:
-                current_app.logger.error(f"Error deleting file from disk: {str(e)}")
-            
-            # Delete from database
-            db.session.delete(file)
-            db.session.commit()
-            
-            return jsonify({'success': True, 'message': 'File deleted successfully'})
-            
-        elif folder:
-            # Check if folder has contents
-            has_files = File.query.filter_by(folder_id=folder.id).first() is not None
-            has_subfolders = Folder.query.filter_by(parent_id=folder.id).first() is not None
-            
-            if has_files or has_subfolders:
-                # Delete recursively
-                delete_folder_recursive(folder.id)
-                return jsonify({'success': True, 'message': 'Folder and contents deleted successfully'})
-            else:
-                # Empty folder, simple delete
-                db.session.delete(folder)
-                db.session.commit()
-                return jsonify({'success': True, 'message': 'Folder deleted successfully'})
-        else:
-            return jsonify({'error': 'Item not found'}), 404
-            
-    except Exception as e:
-        db.session.rollback()
-        current_app.logger.error(f"Error deleting item: {str(e)}")
-        return jsonify({'error': str(e)}), 500
-
-def delete_folder_recursive(folder_id):
-    """Recursively delete a folder and its contents"""
-    # Delete all files in the folder
-    files = File.query.filter_by(folder_id=folder_id).all()
-    for file in files:
+def delete(file_id):
+    file = File.query.filter_by(id=file_id, user_id=current_user.id).first_or_404()
+    parent_id = file.parent_id
+    
+    # If it's a folder, delete all children recursively
+    if file.is_folder:
+        delete_folder_recursive(file)
+    else:
+        # Delete the actual file
         try:
-            if os.path.exists(file.path):
-                os.remove(file.path)
-        except OSError:
-            pass
+            os.remove(os.path.join(Config.UPLOAD_FOLDER, file.storage_name))
+        except (FileNotFoundError, OSError):
+            pass  # File already gone, continue
+        
+        # Delete the database record
         db.session.delete(file)
     
-    # Recursively delete subfolders
-    subfolders = Folder.query.filter_by(parent_id=folder_id).all()
-    for subfolder in subfolders:
-        delete_folder_recursive(subfolder.id)
+    db.session.commit()
+    flash(f'{"Folder" if file.is_folder else "File"} deleted successfully', 'success')
     
-    # Delete the folder itself
-    folder = Folder.query.get(folder_id)
-    if folder:
-        db.session.delete(folder)
+    # Handle AJAX requests
+    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+        return jsonify({'success': True})
+        
+    return redirect(url_for('files.browser', folder_id=parent_id))
 
-@bp.route('/upload_xhr', methods=['POST'])
+def delete_folder_recursive(folder):
+    """Recursively delete a folder and all its contents"""
+    # First get all child items
+    children = File.query.filter_by(parent_id=folder.id).all()
+    
+    for child in children:
+        if child.is_folder:
+            delete_folder_recursive(child)
+        else:
+            # Delete the actual file
+            try:
+                os.remove(os.path.join(Config.UPLOAD_FOLDER, child.storage_name))
+            except (FileNotFoundError, OSError):
+                pass  # File already gone, continue
+                
+            # Delete the database record
+            db.session.delete(child)
+    
+    # Finally delete the folder itself
+    db.session.delete(folder)
+
+@files_bp.route('/rename/<int:file_id>', methods=['POST'])
+@login_required
+def rename(file_id):
+    file = File.query.filter_by(id=file_id, user_id=current_user.id).first_or_404()
+    new_name = request.form.get('new_name', '').strip()
+    
+    if not new_name:
+        flash('Name cannot be empty', 'error')
+        return redirect(url_for('files.browser', folder_id=file.parent_id))
+    
+    # Secure the new name
+    new_name = secure_filename(new_name)
+    
+    # Check if a file/folder with this name already exists
+    existing = File.query.filter_by(
+        name=new_name,
+        parent_id=file.parent_id,
+        user_id=current_user.id,
+        is_folder=file.is_folder
+    ).first()
+    
+    if existing and existing.id != file.id:
+        flash(f'A {"folder" if file.is_folder else "file"} with this name already exists', 'error')
+        return redirect(url_for('files.browser', folder_id=file.parent_id))
+    
+    # Update the name
+    file.name = new_name
+    db.session.commit()
+    
+    flash(f'{"Folder" if file.is_folder else "File"} renamed successfully', 'success')
+    
+    # Handle AJAX requests
+    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+        return jsonify({'success': True})
+        
+    return redirect(url_for('files.browser', folder_id=file.parent_id))
+
+@files_bp.route('/share/<int:file_id>', methods=['GET', 'POST'])
+@login_required
+def share(file_id):
+    file = File.query.filter_by(id=file_id, user_id=current_user.id).first_or_404()
+    
+    if request.method == 'POST':
+        # Generate share link
+        expires_days = request.form.get('expires', type=int)
+        
+        expires_at = None
+        if expires_days:
+            expires_at = datetime.utcnow() + timedelta(days=expires_days)
+        
+        # Create unique share token
+        share_token = str(uuid.uuid4())
+        
+        # Save share in database
+        share = Share(
+            file_id=file.id,
+            user_id=current_user.id,
+            token=share_token,
+            expires_at=expires_at
+        )
+        
+        db.session.add(share)
+        db.session.commit()
+        
+        # Generate the share URL
+        share_url = url_for('files.public_share', token=share_token, _external=True)
+        
+        flash('Share link created successfully', 'success')
+        return render_template('files/share_success.html',
+                              title='Share Link',
+                              file=file,
+                              share=share,
+                              share_url=share_url)
+    
+    return render_template('files/share.html',
+                          title='Share File',
+                          file=file)
+
+@files_bp.route('/public/<string:token>')
+def public_share(token):
+    # Find the share by token
+    share = Share.query.filter_by(token=token).first_or_404()
+    
+    # Check if share has expired
+    if share.expires_at and share.expires_at < datetime.utcnow():
+        return render_template('files/share_expired.html',
+                              title='Share Expired')
+    
+    # Get the file details
+    file = File.query.get_or_404(share.file_id)
+    
+    # Record the download
+    download = Download(
+        file_id=file.id,
+        share_id=share.id,
+        ip_address=request.remote_addr
+    )
+    db.session.add(download)
+    db.session.commit()
+    
+    # If it's a viewable file type, show a preview
+    if file.mime_type and (
+        file.mime_type.startswith('image/') or
+        file.mime_type == 'application/pdf' or
+        file.mime_type.startswith('text/') or
+        file.mime_type in ['application/javascript', 'application/json']
+    ):
+        return render_template('files/preview.html',
+                              title=file.name,
+                              file=file,
+                              share=share,
+                              download_url=url_for('files.public_download', token=token))
+    
+    # Otherwise, redirect to download
+    return redirect(url_for('files.public_download', token=token))
+
+@files_bp.route('/public/download/<string:token>')
+def public_download(token):
+    # Find the share by token
+    share = Share.query.filter_by(token=token).first_or_404()
+    
+    # Check if share has expired
+    if share.expires_at and share.expires_at < datetime.utcnow():
+        return render_template('files/share_expired.html',
+                              title='Share Expired')
+    
+    # Get the file details
+    file = File.query.get_or_404(share.file_id)
+    
+    # Send the file
+    return send_from_directory(
+        Config.UPLOAD_FOLDER, 
+        file.storage_name,
+        as_attachment=True,
+        attachment_filename=file.name
+    )
+
+@files_bp.route('/upload_xhr', methods=['POST'])
 @login_required
 def upload_xhr():
-    """Handle XHR file uploads with improved error handling"""
-    try:
-        # Get parent folder ID if provided
-        parent_folder_id = request.form.get('parent_folder_id')
-        parent_folder = None
-        
-        if parent_folder_id:
-            parent_folder = Folder.query.get(parent_folder_id)
-            if not parent_folder or parent_folder.user_id != current_user.id:
-                return jsonify({'error': 'Invalid parent folder'}), 400
-        
-        # Check if files were uploaded
-        if 'files[]' not in request.files:
-            return jsonify({'error': 'No files in request'}), 400
+    """Handle AJAX file uploads with progress tracking"""
+    if 'files[]' not in request.files:
+        return jsonify({'success': False, 'error': 'No files found in the request'})
+    
+    files = request.files.getlist('files[]')
+    folder_id = request.form.get('folder_id', None, type=int)
+    is_folder = request.form.get('is_folder') == '1'
+    paths = request.form.getlist('paths[]')
+    
+    # Check if any files were selected
+    if not files or all(f.filename == '' for f in files):
+        return jsonify({'success': False, 'error': 'No files selected for upload'})
+    
+    # Check folder exists if folder_id is provided
+    parent_folder = None
+    if folder_id:
+        parent_folder = File.query.filter_by(id=folder_id, user_id=current_user.id, is_folder=True).first()
+        if not parent_folder:
+            return jsonify({'success': False, 'error': 'Parent folder not found'})
+    
+    # Process uploads
+    successful = 0
+    failed = 0
+    errors = []
+    
+    # If this is a folder upload, we need to create the folder structure
+    folder_map = {}  # Maps path to folder ID
+    
+    for i, file in enumerate(files):
+        try:
+            if file.filename == '':
+                continue
             
-        files = request.files.getlist('files[]')
-        
-        if not files or len(files) == 0 or files[0].filename == '':
-            return jsonify({'error': 'No files selected'}), 400
-        
-        # Process files
-        uploaded_files = []
-        
-        for file in files:
-            # Handle folder uploads by parsing the path
-            path_parts = []
+            # Get the relative path for folder uploads
+            relative_path = paths[i] if is_folder and i < len(paths) else None
             
-            if '/' in file.filename:
-                # This is a file in a folder structure
-                path_parts = file.filename.split('/')
-                filename = path_parts[-1]  # Last part is the actual filename
-                
-                # Create folder structure
-                current_parent = parent_folder
-                
-                for i, folder_name in enumerate(path_parts[:-1]):
-                    if not folder_name:  # Skip empty folder names
-                        continue
-                    
-                    # Check if folder already exists
-                    existing_folder = Folder.query.filter_by(
-                        name=folder_name,
-                        parent_id=current_parent.id if current_parent else None,
-                        user_id=current_user.id
-                    ).first()
-                    
-                    if existing_folder:
-                        current_parent = existing_folder
-                    else:
-                        # Create new folder
-                        new_folder = Folder(
+            # Handle folder structure if needed
+            current_parent_id = folder_id
+            if is_folder and relative_path:
+                # Split path into directory components
+                path_parts = os.path.dirname(relative_path).split('/')
+                if path_parts and path_parts[0]:  # Skip empty path (files at root)
+                    # Create each folder in the path if needed
+                    current_path = ""
+                    for part in path_parts:
+                        if not part:  # Skip empty parts
+                            continue
+                            
+                        current_path = os.path.join(current_path, part) if current_path else part
+                        
+                        # Check if we've already created this folder
+                        if current_path in folder_map:
+                            current_parent_id = folder_map[current_path]
+                            continue
+                        
+                        # Check if folder already exists
+                        folder_name = secure_filename(part)
+                        existing_folder = File.query.filter_by(
                             name=folder_name,
-                            parent_id=current_parent.id if current_parent else None,
-                            user_id=current_user.id
-                        )
-                        db.session.add(new_folder)
-                        db.session.flush()  # Get ID without committing
-                        current_parent = new_folder
-            else:
-                # Regular file upload
-                filename = file.filename
-                current_parent = parent_folder
+                            parent_id=current_parent_id,
+                            user_id=current_user.id,
+                            is_folder=True
+                        ).first()
+                        
+                        if existing_folder:
+                            current_parent_id = existing_folder.id
+                            folder_map[current_path] = existing_folder.id
+                        else:
+                            # Create new folder
+                            new_folder = File(
+                                name=folder_name,
+                                parent_id=current_parent_id,
+                                user_id=current_user.id,
+                                is_folder=True
+                            )
+                            db.session.add(new_folder)
+                            db.session.flush()  # Get the ID without committing
+                            
+                            current_parent_id = new_folder.id
+                            folder_map[current_path] = new_folder.id
             
-            # Save the file
-            if not filename:
-                continue  # Skip files with empty names
-                
-            secure_name = secure_filename(filename)
+            # Now handle the actual file
+            filename = os.path.basename(relative_path) if relative_path else file.filename
+            filename = secure_filename(filename)
             
-            # Check for duplicates
+            # Check if file already exists
             existing_file = File.query.filter_by(
-                name=secure_name,
-                folder_id=current_parent.id if current_parent else None,
-                user_id=current_user.id
+                name=filename,
+                parent_id=current_parent_id,
+                user_id=current_user.id,
+                is_folder=False
             ).first()
             
             if existing_file:
-                # Append timestamp to avoid overwrite
-                name_parts = secure_name.rsplit('.', 1)
-                if len(name_parts) > 1:
-                    secure_name = f"{name_parts[0]}_{int(time.time())}.{name_parts[1]}"
-                else:
-                    secure_name = f"{secure_name}_{int(time.time())}"
+                # Create a unique name by adding timestamp
+                name_parts = os.path.splitext(filename)
+                timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+                filename = f"{name_parts[0]}_{timestamp}{name_parts[1]}"
             
-            # Create file path
-            file_dir = os.path.join(current_app.config['UPLOAD_FOLDER'], str(current_user.id))
+            # Generate a unique storage name
+            storage_name = f"{str(uuid.uuid4())}{os.path.splitext(filename)[1]}"
             
-            # Ensure directory exists
-            os.makedirs(file_dir, exist_ok=True)
-            
-            file_path = os.path.join(file_dir, secure_name)
-            
-            # Save file to disk
+            # Save the file
+            file_path = os.path.join(Config.UPLOAD_FOLDER, storage_name)
             file.save(file_path)
             
-            # Create file record in database
+            # Get file size and mime type
             file_size = os.path.getsize(file_path)
-            file_type = file.content_type or 'application/octet-stream'
+            mime_type = mimetypes.guess_type(filename)[0] or 'application/octet-stream'
             
-            new_file = File(
-                name=secure_name,
-                original_name=filename,
-                path=file_path,
+            # Create file entry in database
+            db_file = File(
+                name=filename,
+                storage_name=storage_name,
+                mime_type=mime_type,
                 size=file_size,
-                type=file_type,
-                folder_id=current_parent.id if current_parent else None,
-                user_id=current_user.id
+                user_id=current_user.id,
+                parent_id=current_parent_id,
+                is_folder=False
             )
             
-            db.session.add(new_file)
-            uploaded_files.append({
-                'id': None,  # Will be set after commit
-                'name': secure_name,
-                'size': file_size,
-                'type': file_type
-            })
-        
-        # Commit all changes
+            db.session.add(db_file)
+            successful += 1
+            
+        except Exception as e:
+            failed += 1
+            errors.append(f"{file.filename}: {str(e)}")
+    
+    # Commit all database changes
+    if successful > 0:
         db.session.commit()
-        
-        # Update file IDs for response
-        for i, file_data in enumerate(uploaded_files):
-            if i < len(db.session.new):
-                file_data['id'] = db.session.new[i].id
-        
-        return jsonify({
-            'success': True,
-            'message': f'Successfully uploaded {len(uploaded_files)} files',
-            'files': uploaded_files
-        })
-        
-    except Exception as e:
-        # Log the error for debugging
-        current_app.logger.error(f"Upload error: {str(e)}")
-        db.session.rollback()
-        return jsonify({'error': str(e)}), 500
+    
+    result = {
+        'success': True if successful > 0 else False,
+        'message': f"Successfully uploaded {successful} files, {failed} failed.",
+        'successful': successful,
+        'failed': failed,
+        'errors': errors
+    }
+    
+    return jsonify(result)
 
-# Import the helper functions from __init__.py
-from app import get_file_icon, format_file_size 
\ No newline at end of file
+@files_bp.route('/contents')
+@login_required
+def folder_contents():
+    """Returns the HTML for folder contents (used for AJAX loading)"""
+    folder_id = request.args.get('folder_id', None, type=int)
+    
+    if request.headers.get('X-Requested-With') != 'XMLHttpRequest':
+        # If not an AJAX request, redirect to browser view
+        return redirect(url_for('files.browser', folder_id=folder_id))
+    
+    # Query parent folder
+    parent_folder = None
+    if folder_id:
+        parent_folder = File.query.filter_by(id=folder_id, user_id=current_user.id, is_folder=True).first_or_404()
+    
+    # Get files and subfolders
+    query = File.query.filter_by(user_id=current_user.id, parent_id=folder_id)
+    folders = query.filter_by(is_folder=True).order_by(File.name).all()
+    files = query.filter_by(is_folder=False).order_by(File.name).all()
+    
+    return render_template('files/partials/folder_contents.html',
+                          folders=folders,
+                          files=files,
+                          parent=parent_folder)
+
+@files_bp.route('/preview/<int:file_id>')
+@login_required
+def file_preview(file_id):
+    """Returns file preview data"""
+    file = File.query.filter_by(id=file_id, user_id=current_user.id, is_folder=False).first_or_404()
+    
+    result = {
+        'success': True,
+        'file': {
+            'id': file.id,
+            'name': file.name,
+            'mime_type': file.mime_type,
+            'size': file.size,
+            'created_at': file.created_at.isoformat() if file.created_at else None,
+            'updated_at': file.updated_at.isoformat() if file.updated_at else None
+        },
+        'download_url': url_for('files.download', file_id=file.id),
+        'preview_url': url_for('files.raw', file_id=file.id)
+    }
+    
+    return jsonify(result)
+
+@files_bp.route('/raw/<int:file_id>')
+@login_required
+def raw(file_id):
+    """Serves raw file content for previews"""
+    file = File.query.filter_by(id=file_id, user_id=current_user.id, is_folder=False).first_or_404()
+    
+    # Check if file exists
+    file_path = os.path.join(current_app.config['UPLOAD_FOLDER'], file.storage_name)
+    if not os.path.exists(file_path):
+        abort(404)
+    
+    # Check file size for text files (only preview if under 2MB)
+    if file.mime_type and file.mime_type.startswith('text/') and file.size > 2 * 1024 * 1024:
+        return "File too large to preview", 413
+    
+    return send_file(file_path, mimetype=file.mime_type) 
\ No newline at end of file
diff --git a/app/static/css/browser.css b/app/static/css/browser.css
index 11bb4d9..5dc38c6 100644
--- a/app/static/css/browser.css
+++ b/app/static/css/browser.css
@@ -1,408 +1,3 @@
-.browser-container {
-    background: var(--card-bg);
-    border-radius: var(--border-radius);
-    padding: 1.5rem;
-    margin-bottom: 2rem;
-    box-shadow: var(--shadow-sm);
-}
-
-.browser-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1.5rem;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.browser-title {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.browser-actions {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-}
-
-.breadcrumbs {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 1.5rem;
-    background: var(--bg-light);
-    padding: 0.5rem 1rem;
-    border-radius: var(--border-radius-sm);
-}
-
-.breadcrumb-item {
-    display: flex;
-    align-items: center;
-}
-
-.breadcrumb-separator {
-    margin: 0 0.5rem;
-    color: var(--text-muted);
-}
-
-.view-toggle {
-    display: flex;
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    overflow: hidden;
-    margin-left: 0.5rem;
-}
-
-.view-btn {
-    border: none;
-    background: var(--card-bg);
-    padding: 0.5rem;
-    cursor: pointer;
-    color: var(--text-muted);
-}
-
-.view-btn.active {
-    background: var(--primary-color);
-    color: white;
-}
-
-.filter-bar {
-    display: flex;
-    margin-bottom: 1rem;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.search-bar {
-    flex-grow: 1;
-    position: relative;
-}
-
-.search-bar input {
-    width: 100%;
-    padding: 0.5rem 1rem 0.5rem 2.5rem;
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    background: var(--bg-light);
-}
-
-.search-icon {
-    position: absolute;
-    left: 0.75rem;
-    top: 0.75rem;
-    color: var(--text-muted);
-    pointer-events: none;
-}
-
-.sort-dropdown {
-    position: relative;
-}
-
-.sort-dropdown-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    background: var(--bg-light);
-    cursor: pointer;
-}
-
-.sort-dropdown-menu {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    min-width: 200px;
-    z-index: 10;
-    box-shadow: var(--shadow-md);
-    display: none;
-    margin-top: 0.25rem;
-}
-
-.sort-dropdown-menu.show {
-    display: block;
-}
-
-.sort-option {
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-}
-
-.sort-option:hover {
-    background: var(--bg-hover);
-}
-
-.sort-option.active {
-    color: var(--primary-color);
-    font-weight: 500;
-}
-
-.files-container {
-    min-height: 200px;
-    position: relative;
-}
-
-.loading-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(var(--card-bg-rgb), 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 5;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease;
-}
-
-.loading-indicator.show {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.spinner {
-    width: 40px;
-    height: 40px;
-    border: 4px solid rgba(var(--primary-color-rgb), 0.3);
-    border-radius: 50%;
-    border-top-color: var(--primary-color);
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Grid view */
-.files-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 1rem;
-}
-
-.folder-item,
-.file-item {
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    border-radius: var(--border-radius-sm);
-    border: 1px solid var(--border-color);
-    transition: all 0.2s ease;
-    position: relative;
-    text-decoration: none;
-    color: var(--text-color);
-}
-
-.folder-item:hover,
-.file-item:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-sm);
-    background: var(--bg-hover);
-}
-
-.item-icon {
-    font-size: 3rem;
-    margin-bottom: 0.75rem;
-    text-align: center;
-    color: var(--primary-color);
-}
-
-.folder-item .item-icon {
-    color: #ffc107;
-}
-
-.item-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.item-name {
-    font-weight: 500;
-    margin-bottom: 0.25rem;
-    word-break: break-word;
-    text-align: center;
-}
-
-.item-details {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.85rem;
-    color: var(--text-muted);
-    text-align: center;
-}
-
-/* List view */
-.files-list {
-    display: flex;
-    flex-direction: column;
-}
-
-.list-view .folder-item,
-.list-view .file-item {
-    flex-direction: row;
-    align-items: center;
-    padding: 0.75rem 1rem;
-    margin-bottom: 0.5rem;
-}
-
-.list-view .item-icon {
-    font-size: 1.5rem;
-    margin-bottom: 0;
-    margin-right: 1rem;
-    width: 1.5rem;
-    text-align: center;
-}
-
-.list-view .item-info {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.list-view .item-name {
-    margin-bottom: 0;
-    text-align: left;
-}
-
-.list-view .item-details {
-    margin-left: auto;
-    min-width: 200px;
-    justify-content: flex-end;
-}
-
-.list-view .item-date {
-    margin-left: 1rem;
-}
-
-/* Empty folder state */
-.empty-folder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 3rem 1rem;
-    text-align: center;
-}
-
-.empty-icon {
-    font-size: 3rem;
-    color: var(--text-muted);
-    margin-bottom: 1rem;
-}
-
-.empty-message h3 {
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-}
-
-.empty-message p {
-    color: var(--text-muted);
-    margin-bottom: 1.5rem;
-}
-
-.empty-actions {
-    display: flex;
-    gap: 0.5rem;
-}
-
-/* Context menu */
-.context-menu {
-    position: fixed;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    box-shadow: var(--shadow-md);
-    z-index: 100;
-    min-width: 180px;
-    padding: 0.5rem 0;
-}
-
-.context-menu-item {
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.context-menu-item:hover {
-    background: var(--bg-hover);
-}
-
-.context-menu-item.danger {
-    color: var(--danger-color);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .browser-header {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .browser-actions {
-        width: 100%;
-        justify-content: space-between;
-    }
-
-    .filter-bar {
-        flex-direction: column;
-    }
-
-    .files-grid {
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    }
-
-    .list-view .item-info {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .list-view .item-details {
-        margin-left: 0;
-        margin-top: 0.25rem;
-    }
-}
-
-/* Modal fixes - ensure they're hidden by default */
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    overflow: auto;
-    justify-content: center;
-    align-items: center;
-}
-
-.modal.visible {
-    display: flex;
-}
-
-.modal-content {
-    background: var(--card-bg);
-    border-radius: var(--border-radius);
-    width: 100%;
-    max-width: 500px;
-    box-shadow: var(--shadow-lg);
-    margin: 2rem;
-}
-
 /* File Browser Styles */
 .browser-container {
     background: var(--card-bg);
diff --git a/app/static/css/context-menu.css b/app/static/css/context-menu.css
deleted file mode 100644
index dec5cb5..0000000
--- a/app/static/css/context-menu.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* Context Menu Styles */
-.context-menu {
-    position: absolute;
-    display: none;
-    background-color: var(--card-bg);
-    border-radius: 6px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-    padding: 8px 0;
-    min-width: 180px;
-    z-index: 1000;
-    animation: context-menu-appear 0.2s ease;
-    border: 1px solid var(--border-color);
-}
-
-@keyframes context-menu-appear {
-    from {
-        opacity: 0;
-        transform: scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.context-menu-item {
-    padding: 10px 16px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    color: var(--text-color);
-}
-
-.context-menu-item:hover {
-    background-color: var(--primary-color);
-    color: white;
-}
-
-.context-menu-item i {
-    margin-right: 10px;
-    width: 16px;
-    text-align: center;
-}
-
-.context-menu-divider {
-    height: 1px;
-    background-color: var(--border-color);
-    margin: 5px 0;
-}
\ No newline at end of file
diff --git a/app/static/css/custom.css b/app/static/css/custom.css
index c6fae2c..ef36f15 100644
--- a/app/static/css/custom.css
+++ b/app/static/css/custom.css
@@ -1,397 +1,749 @@
 :root {
-    /* Dark mode colors - more modern palette */
-    --bg-dark: #121418;
-    --card-bg-dark: #1e2029;
-    --text-dark: #f2f3f8;
-    --text-secondary-dark: #b4bcd0;
-    --border-dark: #2e3145;
-    --primary-dark: #6d5dfc;
-    --secondary-dark: #4839eb;
-    --success-dark: #22c55e;
-    --warning-dark: #f59e0b;
-    --danger-dark: #ef4444;
-    --info-dark: #3b82f6;
-
-    /* Light mode colors - cleaner palette */
-    --bg-light: #f7f8fc;
-    --card-bg-light: #ffffff;
-    --text-light: #1a202c;
-    --text-secondary-light: #64748b;
-    --border-light: #e2e8f0;
-    --primary-light: #5a47e8;
-    --secondary-light: #4c3fe0;
-    --success-light: #10b981;
-    --warning-light: #f59e0b;
-    --danger-light: #ef4444;
-    --info-light: #3b82f6;
-
-    /* Shared properties */
-    --border-radius: 10px;
-    --border-radius-sm: 6px;
-    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
-    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
-    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
-    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-/* Apply theme variables based on data attribute */
-[data-theme="light"] {
-    --bg: var(--bg-light);
-    --card-bg: var(--card-bg-light);
-    --text: var(--text-light);
-    --text-secondary: var(--text-secondary-light);
-    --border-color: var(--border-light);
-    --primary-color: var(--primary-light);
-    --secondary-color: var(--secondary-light);
-    --success-color: var(--success-light);
-    --warning-color: var(--warning-light);
-    --danger-color: var(--danger-light);
-    --info-color: var(--info-light);
+    --primary: #364153;
+    --primary-light: #202732;
+    --primary-dark: #364153;
+    --secondary: #64748b;
+    --secondary-light: #94a3b8;
+    --success: #10b981;
+    --success-light: #34d399;
+    --danger: #ef4444;
+    --danger-light: #f87171;
+    --warning: #f59e0b;
+    --warning-light: #fbbf24;
+    --info: #0ea5e9;
+    --info-light: #38bdf8;
+    --light: #f8fafc;
+    --dark: #1e293b;
+    --body-bg: #ffffff;
+    --body-color: #334155;
+    --heading-color: #1e293b;
+    --link-color: #3b82f6;
+    --link-hover-color: #0b65ff;
+    --border-color: #e2e8f0;
     --shadow-color: rgba(0, 0, 0, 0.1);
+    --card-bg: #ffffff;
+    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+    --gradient-link: linear-gradient(135deg, var(--link-color) 0%, var(--link-hover-color) 100%);
+    --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
+    --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%);
+    --gradient-danger: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%);
+    --gradient-warning: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%);
+    --gradient-info: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-size-base: 1rem;
+    --line-height-base: 1.6;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --spacing-base: 1rem;
+    --border-radius-sm: 0.25rem;
+    --border-radius: 0.5rem;
+    --border-radius-md: 0.15rem;
+    --border-radius-lg: 1rem;
+    --border-radius-xl: 1.5rem;
+    --border-radius-full: 9999px;
+    --container-max-width: 1200px;
+    --transition-base: all 0.2s ease-in-out;
+    --transition-slow: all 0.3s ease-in-out
 }
 
-[data-theme="dark"] {
-    --bg: var(--bg-dark);
-    --card-bg: var(--card-bg-dark);
-    --text: var(--text-dark);
-    --text-secondary: var(--text-secondary-dark);
-    --border-color: var(--border-dark);
-    --primary-color: var(--primary-dark);
-    --secondary-color: var(--secondary-dark);
-    --success-color: var(--success-dark);
-    --warning-color: var(--warning-dark);
-    --danger-color: var(--danger-dark);
-    --info-color: var(--info-dark);
+:root {
+    color-scheme: light;
+    --color-mode: 'light'
+}
+
+@media (prefers-color-scheme:dark) {
+    :root {
+        --color-mode: 'dark'
+    }
+}
+
+:root[color-scheme=dark] {
+    --primary: #13181f;
+    --primary-light: #13181f;
+    --primary-dark: #cbe0ff;
+    --body-bg: #0f172a;
+    --body-color: #e2e8f0;
+    --heading-color: #f8fafc;
+    --border-color: #334155;
     --shadow-color: rgba(0, 0, 0, 0.3);
+    --card-bg: #1e293b;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2)
 }
 
-/* Reset and base styles */
 * {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
+    box-sizing: border-box
 }
 
-html,
-body {
-    height: 100%;
-    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
-}
-
-body {
-    background-color: var(--bg);
-    color: var(--text);
-    line-height: 1.6;
+html {
     font-size: 16px;
-    transition: background-color 0.3s ease;
+    scroll-behavior: smooth
+}
+
+body {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    color: var(--body-color);
+    background-color: var(--body-bg);
+    padding: var(--spacing-base);
+    max-width: var(--container-max-width);
+    margin: 0 auto;
+    transition: var(--transition-slow)
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--heading-color);
+    margin-bottom: var(--spacing-base);
+    font-weight: var(--font-weight-bold);
+    line-height: 1.2;
+    letter-spacing: -.025em
+}
+
+h1 {
+    font-size: 2.75rem;
+    margin-top: 2rem;
+    background: var(--heading-color);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent
+}
+
+h2 {
+    font-size: 2.25rem;
+    margin-top: 1.75rem;
+    position: relative
+}
+
+h2::after {
+    content: "";
+    position: absolute;
+    bottom: -.5rem;
+    left: 0;
+    width: 3rem;
+    height: .15rem;
+    background: var(--gradient-primary);
+    border-radius: var(--border-radius-full)
+}
+
+h3 {
+    font-size: 1.75rem;
+    margin-top: 1.5rem
+}
+
+h4 {
+    font-size: 1.5rem;
+    margin-top: 1.25rem
+}
+
+h5 {
+    font-size: 1.25rem;
+    margin-top: 1rem
+}
+
+h6 {
+    font-size: 1rem;
+    margin-top: .75rem;
+    text-transform: uppercase;
+    letter-spacing: .05em
+}
+
+p {
+    margin-bottom: var(--spacing-base)
 }
 
 a {
-    color: var(--primary-color);
+    color: var(--link-color);
     text-decoration: none;
-    transition: var(--transition);
+    transition: var(--transition-base);
+    position: relative
 }
 
 a:hover {
-    opacity: 0.85;
+    color: var(--link-hover-color)
 }
 
-/* Modern navbar */
-.navbar {
-    background-color: var(--card-bg);
-    padding: 1rem 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: var(--shadow-sm);
-    border-bottom: 1px solid var(--border-color);
-    position: sticky;
-    top: 0;
-    z-index: 100;
+a:not(nav a):before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: -2px;
+    left: 0;
+    background: var(--gradient-link);
+    transform-origin: bottom right;
+    transition: transform .3s ease-out
 }
 
-.navbar-brand a {
-    font-size: 1.5rem;
+a:not(nav a):hover:before {
+    transform: scaleX(1);
+    transform-origin: bottom left
+}
+
+a[target="_blank"]:after {
+    content: "[+]";
+    display: inline-block;
+    margin-left: .25em;
+    font-size: .6em;
     font-weight: 700;
-    color: var(--primary-color);
-    letter-spacing: 0.5px;
+    text-decoration: none;
+    vertical-align: super
 }
 
-.navbar-menu {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
+small {
+    font-size: .875rem;
+    opacity: .85
 }
 
-.nav-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--text);
-    font-weight: 500;
-    padding: 0.5rem 0.75rem;
-    border-radius: var(--border-radius-sm);
-    transition: var(--transition);
+code,
+pre {
+    font-family: var(--font-family-mono);
+    border-radius: var(--border-radius)
 }
 
-.nav-item:hover {
-    background-color: rgba(var(--primary-color-rgb), 0.1);
-    color: var(--primary-color);
+code {
+    padding: .2em .4em;
+    font-size: .875em;
+    background-color: rgba(0, 0, 0, .05)
 }
 
-.nav-item i {
-    font-size: 1.1rem;
+:root[color-scheme=dark] code {
+    background-color: rgba(255, 255, 255, .1)
 }
 
-.theme-toggle-icon {
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: var(--transition);
+pre {
+    padding: var(--spacing-base);
+    margin-bottom: var(--spacing-base);
+    overflow-x: auto;
+    background-color: rgba(0, 0, 0, .03);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm)
 }
 
-.theme-toggle-icon:hover {
-    background-color: rgba(var(--primary-color-rgb), 0.1);
+:root[color-scheme=dark] pre {
+    background-color: rgba(255, 255, 255, .05)
 }
 
-/* Container and layout */
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
+pre code {
+    display: block;
+    background-color: transparent
 }
 
-main {
-    min-height: calc(100vh - 160px);
+blockquote {
+    border-left: 4px solid var(--primary);
+    padding: var(--spacing-base);
+    margin-bottom: var(--spacing-base);
+    font-style: italic;
+    background-color: rgba(0, 0, 0, .02);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    box-shadow: var(--shadow-sm)
 }
 
-/* Card styles */
-.card {
-    background-color: var(--card-bg);
+:root[color-scheme=dark] blockquote {
+    background-color: rgba(255, 255, 255, .03)
+}
+
+hr {
+    border: 0;
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--border-color), transparent);
+    margin: calc(var(--spacing-base) * 2) 0
+}
+
+ol,
+ul {
+    margin-bottom: var(--spacing-base);
+    padding-left: 1.5rem
+}
+
+li {
+    margin-bottom: calc(var(--spacing-base) * .5)
+}
+
+table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin-bottom: var(--spacing-base);
     border-radius: var(--border-radius);
-    box-shadow: var(--shadow-sm);
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    border: 1px solid var(--border-color);
-    transition: var(--transition);
+    overflow: hidden;
+    box-shadow: var(--shadow)
 }
 
-.card:hover {
+td,
+th {
+    padding: calc(var(--spacing-base) * .75);
+    border-bottom: 1px solid var(--border-color);
+    text-align: left
+}
+
+thead {
+    background: var(--gradient-secondary)
+}
+
+th {
+    font-weight: var(--font-weight-bold);
+    color: #fff;
+    text-transform: uppercase;
+    font-size: .875rem;
+    letter-spacing: .05em
+}
+
+tr:last-child td {
+    border-bottom: none
+}
+
+tr:hover td {
+    background-color: rgba(0, 0, 0, .02)
+}
+
+:root[color-scheme=dark] tr:hover td {
+    background-color: rgba(255, 255, 255, .03)
+}
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit
+}
+
+input[type=date],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=text],
+input[type=time],
+input[type=url],
+input[type=week],
+select,
+textarea {
+    display: block;
+    width: 100%;
+    padding: calc(var(--spacing-base) * .75);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-md);
+    background-color: var(--body-bg);
+    color: var(--body-color);
+    margin-bottom: var(--spacing-base);
+    transition: var(--transition-base);
+    box-shadow: var(--shadow-sm)
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: 0;
+    border-color: var(--border-color);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, .25)
+}
+
+select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    padding-right: 2.5rem;
+    background-image: url("data:image/svg+xml;utf8,<svg fill='%23364153' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    background-size: 2rem
+}
+
+:root[color-scheme=dark] select {
+    background-image: url("data:image/svg+xml;utf8,<svg fill='%23e2e8f0' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")
+}
+
+textarea {
+    min-height: 9rem;
+    resize: vertical
+}
+
+label {
+    display: block;
+    margin-bottom: calc(var(--spacing-base) * .5);
+    font-weight: var(--font-weight-medium)
+}
+
+button,
+input[type=button],
+input[type=reset],
+input[type=submit] {
+    min-width: 100px;
+    display: inline-block;
+    padding: calc(var(--spacing-base) * .75) var(--spacing-base);
+    background: var(--gradient-primary);
+    color: #fff;
+    border: none;
+    border-radius: var(--border-radius-md);
+    cursor: pointer;
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    transition: var(--transition-base);
+    position: relative;
+    overflow: hidden
+}
+
+button::after,
+input[type=button]::after,
+input[type=reset]::after,
+input[type=submit]::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0);
+    transition: var(--transition-base)
+}
+
+button:hover::after,
+input[type=button]:hover::after,
+input[type=reset]:hover::after,
+input[type=submit]:hover::after {
+    background-color: rgba(255, 255, 255, .1)
+}
+
+button:hover,
+input[type=button]:hover,
+input[type=reset]:hover,
+input[type=submit]:hover {
+    box-shadow: var(--shadow-md)
+}
+
+button:active,
+input[type=button]:active,
+input[type=reset]:active,
+input[type=submit]:active {
+    transform: translateY(2px);
+    box-shadow: var(--shadow-sm)
+}
+
+button:disabled,
+input[type=button]:disabled,
+input[type=reset]:disabled,
+input[type=submit]:disabled {
+    background: var(--gradient-secondary);
+    cursor: not-allowed;
+    opacity: .7;
+    transform: none
+}
+
+button.success,
+input[type=button].success,
+input[type=submit].success {
+    background: var(--gradient-success)
+}
+
+button.danger,
+input[type=button].danger,
+input[type=submit].danger {
+    background: var(--gradient-danger)
+}
+
+button.warning,
+input[type=button].warning,
+input[type=submit].warning {
+    background: var(--gradient-warning)
+}
+
+button.info,
+input[type=button].info,
+input[type=submit].info {
+    background: var(--gradient-info)
+}
+
+button.outline,
+input[type=button].outline,
+input[type=submit].outline {
+    background: 0 0;
+    border: 1px solid var(--primary-dark);
+    color: var(--primary-dark)
+}
+
+button.outline:hover,
+input[type=button].outline:hover,
+input[type=submit].outline:hover {
+    background-color: var(--primary);
+    color: #fff
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--border-radius-md);
+    transition: var(--transition-base);
+    box-shadow: var(--shadow)
+}
+
+img:hover {
+    transform: scale(1.01);
+    box-shadow: var(--shadow-md)
+}
+
+figure {
+    text-align: center;
+    margin-bottom: var(--spacing-base)
+}
+
+figcaption {
+    font-size: .875rem;
+    color: var(--secondary);
+    text-align: center;
+    margin-top: calc(var(--spacing-base) * .5);
+    font-style: italic
+}
+
+details summary {
+    cursor: pointer;
+    position: relative;
+    padding-bottom: calc(var(--spacing-base) * .5)
+}
+
+details summary::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, var(--border-color), transparent)
+}
+
+details>:not(summary) {
+    cursor: auto;
+    margin-top: calc(var(--spacing-base) * .5)
+}
+
+article,
+aside,
+section {
+    margin-bottom: calc(var(--spacing-base) * 2);
+    padding: var(--spacing-base);
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow);
+    transition: var(--transition-base);
+    border: 1px solid var(--border-color)
+}
+
+article:hover,
+aside:hover,
+section:hover {
+    box-shadow: var(--shadow-md)
+}
+
+:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, .05);
+    border-radius: var(--border-radius-full)
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--gradient-secondary);
+    border-radius: var(--border-radius-full)
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--gradient-primary)
+}
+
+.glass {
+    background: rgba(255, 255, 255, .5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, .2);
+    color: var(--body-color);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
+}
+
+:root[color-scheme=dark] .glass {
+    background: rgba(0, 0, 0, .3);
+    border: 1px solid rgba(255, 255, 255, .1)
+}
+
+:root:not([color-scheme=dark]) .glass {
+    text-shadow: 0 1px 1px rgba(0, 0, 0, .1)
+}
+
+@media (max-width:768px) {
+    html {
+        font-size: 14px
+    }
+
+    body {
+        padding: calc(var(--spacing-base) * .75)
+    }
+
+    table {
+        width: 100%;
+        display: block;
+        overflow-x: auto
+    }
+
+    h1 {
+        font-size: 2.25rem
+    }
+
+    h2 {
+        font-size: 1.75rem
+    }
+}
+
+@media print {
+    body {
+        background-color: #fff;
+        color: #000
+    }
+
+    a {
+        text-decoration: underline;
+        color: #000
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")"
+    }
+
+    blockquote,
+    pre {
+        border: 1px solid #999;
+        page-break-inside: avoid
+    }
+
+    thead {
+        background: var(--gradient-secondary);
+        display: table-header-group
+    }
+
+    img,
+    tr {
+        page-break-inside: avoid
+    }
+
+    h2,
+    h3,
+    p {
+        orphans: 3;
+        widows: 3
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid
+    }
+
+    button,
+    h1,
+    h2::after,
+    input[type=button],
+    input[type=reset],
+    input[type=submit] {
+        background: 0 0 !important;
+        -webkit-text-fill-color: #000;
+        text-fill-color: #000;
+        box-shadow: none !important
+    }
+
+    article,
+    aside,
+    blockquote,
+    img,
+    pre,
+    section,
+    table {
+        box-shadow: none !important
+    }
+}
+
+a,
+article,
+aside,
+blockquote,
+body,
+button,
+code,
+input,
+pre,
+section,
+select,
+td,
+textarea,
+th {
+    transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease
+}
+
+@keyframes colorSchemeTransition {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+body {
+    animation: colorSchemeTransition .5s ease-out
+}
+
+/* Auth Forms */
+.auth-container {
+    max-width: 400px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: var(--card-bg);
+    border-radius: var(--border-radius-md);
     box-shadow: var(--shadow-md);
 }
 
-/* Button styles - modernized and consistent */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    font-size: 0.95rem;
-    font-weight: 500;
-    border-radius: var(--border-radius-sm);
-    border: none;
-    cursor: pointer;
-    transition: var(--transition);
-    background-color: var(--card-bg);
-    color: var(--text);
-    box-shadow: inset 0 0 0 1px var(--border-color);
-}
-
-.btn:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-color);
-}
-
-.btn:active {
-    transform: translateY(0);
-}
-
-.btn.primary {
-    background-color: var(--primary-color);
-    color: white;
-    box-shadow: 0 2px 5px rgba(var(--primary-color-rgb), 0.3);
-}
-
-.btn.primary:hover {
-    box-shadow: 0 4px 10px rgba(var(--primary-color-rgb), 0.4);
-}
-
-.btn.secondary {
-    background-color: var(--secondary-color);
-    color: white;
-    box-shadow: 0 2px 5px rgba(var(--secondary-color-rgb), 0.3);
-}
-
-.btn.secondary:hover {
-    box-shadow: 0 4px 10px rgba(var(--secondary-color-rgb), 0.4);
-}
-
-.btn.success {
-    background-color: var(--success-color);
-    color: white;
-}
-
-.btn.danger {
-    background-color: var(--danger-color);
-    color: white;
-}
-
-.btn.sm {
-    padding: 0.3rem 0.75rem;
-    font-size: 0.85rem;
-}
-
-.btn.lg {
-    padding: 0.75rem 1.5rem;
-    font-size: 1.1rem;
-}
-
-.btn i {
-    font-size: 1.1em;
-}
-
-/* Modal styles - beautiful and animated */
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    overflow: auto;
-    backdrop-filter: blur(4px);
-}
-
-.modal.visible {
-    display: flex;
-    opacity: 1;
-}
-
-.modal-content {
-    background: var(--card-bg);
-    border-radius: var(--border-radius);
-    width: 100%;
-    max-width: 500px;
-    box-shadow: var(--shadow-lg);
-    transform: scale(0.9);
-    opacity: 0;
-    transition: transform 0.3s ease, opacity 0.3s ease;
-    overflow: hidden;
-    margin: 2rem;
-    border: 1px solid var(--border-color);
-}
-
-.modal.visible .modal-content {
-    transform: scale(1);
-    opacity: 1;
-}
-
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.25rem 1.5rem;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.modal-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-    color: var(--text);
-}
-
-.modal-close {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    line-height: 1;
-    color: var(--text-secondary);
-    cursor: pointer;
-    transition: var(--transition);
-    padding: 0.25rem;
-    border-radius: 50%;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.modal-close:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-    color: var(--danger-color);
-}
-
-.modal-body {
-    padding: 1.5rem;
-}
-
-.modal-footer {
-    padding: 1rem 1.5rem;
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    border-top: 1px solid var(--border-color);
-}
-
-/* Form elements */
-.form-group {
+.auth-form .form-group {
     margin-bottom: 1.5rem;
 }
 
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: var(--text);
-}
-
-.form-group input,
-.form-group textarea,
-.form-group select {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    background-color: var(--card-bg);
-    color: var(--text);
-    font-size: 1rem;
-    transition: var(--transition);
-}
-
-.form-group input:focus,
-.form-group textarea:focus,
-.form-group select:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
-}
-
-.form-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
+.auth-links {
     margin-top: 1.5rem;
+    text-align: center;
 }
 
-/* File browser styles */
-.browser-container {
+/* File Browser */
+.file-browser {
     background: var(--card-bg);
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow);
     padding: 1.5rem;
-    margin-bottom: 2rem;
-    box-shadow: var(--shadow-sm);
-    border: 1px solid var(--border-color);
 }
 
 .browser-header {
@@ -399,346 +751,705 @@ main {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1.5rem;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.browser-title {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.browser-title h2 {
-    margin: 0;
-    font-size: 1.75rem;
-}
-
-.browser-title i {
-    font-size: 1.5rem;
-    color: var(--primary-color);
 }
 
 .browser-actions {
     display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 
-.search-input {
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    background-color: var(--card-bg);
-    color: var(--text);
-    min-width: 200px;
-    transition: var(--transition);
+.path-nav {
+    background: var(--body-bg);
+    padding: 0.75rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 1.5rem;
+    font-family: var(--font-family-mono);
+    font-size: 0.9rem;
+    overflow-x: auto;
+    white-space: nowrap;
 }
 
-.search-input:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
+.path-item {
+    color: var(--link-color);
+    text-decoration: none;
 }
 
-/* Context menu for right-click */
-.context-menu {
-    position: fixed;
-    background: var(--card-bg);
-    border-radius: var(--border-radius-sm);
-    box-shadow: var(--shadow-md);
-    z-index: 1000;
-    min-width: 180px;
-    border: 1px solid var(--border-color);
-    padding: 0.5rem 0;
-    animation: fadeIn 0.2s ease;
+.path-separator {
+    margin: 0 0.5rem;
+    color: var(--secondary);
 }
 
-.context-menu-item {
-    padding: 0.5rem 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    cursor: pointer;
-    transition: var(--transition);
-    color: var(--text);
-}
-
-.context-menu-item:hover {
-    background-color: rgba(var(--primary-color-rgb), 0.1);
-}
-
-.context-menu-item i {
-    width: 1rem;
-    text-align: center;
-    color: var(--text-secondary);
-}
-
-.context-menu-divider {
-    height: 1px;
-    background-color: var(--border-color);
-    margin: 0.5rem 0;
-}
-
-/* File and folder items */
 .files-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 }
 
-.files-container.list-view {
-    display: table;
+.folder-section,
+.file-section {
     width: 100%;
-    border-collapse: separate;
-    border-spacing: 0 0.5rem;
 }
 
-.file-item,
-.folder-item {
-    background-color: var(--card-bg);
-    border-radius: var(--border-radius-sm);
-    padding: 1rem;
-    text-align: center;
-    cursor: pointer;
-    transition: var(--transition);
-    border: 1px solid var(--border-color);
+.files-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.file-item {
     position: relative;
+    background: var(--body-bg);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    padding: 1rem;
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+    flex-direction: column;
+    height: 150px;
 }
 
-.file-item:hover,
-.folder-item:hover {
-    transform: translateY(-2px);
+.file-item:hover {
+    transform: translateY(-3px);
     box-shadow: var(--shadow-md);
 }
 
+.file-item.folder {
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.file-item .file-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: var(--body-color);
+    flex: 1;
+}
+
 .file-icon,
-.folder-icon {
+.file-preview {
     font-size: 2.5rem;
-    margin-bottom: 0.75rem;
-    color: var(--primary-color);
+    margin-bottom: 0.5rem;
+    text-align: center;
 }
 
-.folder-icon {
-    color: #f9d71c;
+.file-name {
+    font-size: 0.9rem;
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
 }
 
-.item-name {
-    font-size: 0.95rem;
-    word-break: break-word;
+.file-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-meta {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    font-size: 0.75rem;
+    color: var(--secondary);
+    margin-top: 0.5rem;
+}
+
+.file-actions {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: none;
+    background: var(--card-bg);
+    border-radius: var(--border-radius);
+    padding: 0.25rem;
+    box-shadow: var(--shadow);
+}
+
+.file-item:hover .file-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.action-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 0.25rem;
+    border-radius: var(--border-radius-sm);
+    transition: background-color 0.2s;
+}
+
+.action-btn:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--secondary);
+}
+
+.empty-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+}
+
+/* Dashboard */
+.dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.dashboard-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-top: 1rem;
+}
+
+.stat-card {
+    display: flex;
+    align-items: center;
+    background: var(--card-bg);
+    padding: 1.5rem;
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow);
+}
+
+.stat-icon {
+    font-size: 2.5rem;
+    margin-right: 1.5rem;
+}
+
+.stat-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-value {
+    font-size: 1.75rem;
+    font-weight: var(--font-weight-bold);
     margin-bottom: 0.25rem;
 }
 
-.item-meta {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
+.stat-label {
+    color: var(--secondary);
+    font-size: 0.9rem;
 }
 
-/* Animations */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
+.dashboard-recent {
+    background: var(--card-bg);
+    border-radius: var(--border-radius-md);
+    padding: 1.5rem;
+    box-shadow: var(--shadow);
 }
 
-@keyframes slideUp {
-    from {
-        transform: translateY(20px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(1.05);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-.fade-in {
-    animation: fadeIn 0.3s ease;
-}
-
-.slide-up {
-    animation: slideUp 0.3s ease;
-}
-
-/* Alerts */
-.alerts {
-    position: fixed;
-    bottom: 1.5rem;
-    right: 1.5rem;
-    z-index: 1050;
+.recent-files-list {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    max-width: 350px;
+    margin-top: 1rem;
+}
+
+.recent-files-list .file-item {
+    height: auto;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.75rem;
+}
+
+.recent-files-list .file-icon {
+    margin-bottom: 0;
+    margin-right: 1rem;
+    font-size: 1.75rem;
+}
+
+.recent-files-list .file-details {
+    align-items: flex-start;
+}
+
+.recent-files-list .file-name {
+    text-align: left;
+}
+
+.recent-files-list .file-meta {
+    justify-content: flex-start;
+}
+
+.dashboard-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+/* Profile */
+.profile-container {
+    max-width: 600px;
+    margin: 2rem auto;
+}
+
+.profile-card {
+    background: var(--card-bg);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow);
+    padding: 2rem;
+}
+
+.profile-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: var(--gradient-primary);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: var(--font-weight-bold);
+    margin-right: 1.5rem;
+}
+
+.profile-stats {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.profile-actions {
+    display: flex;
+    gap: 1rem;
+}
+
+/* Improved Navigation Bar */
+header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--card-bg);
+    box-shadow: var(--shadow);
+    padding: 0;
+    transition: transform 0.3s ease;
+}
+
+header.hidden {
+    transform: translateY(-100%);
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    max-width: var(--container-max-width);
+    margin: 0 auto;
+}
+
+nav .logo h1 {
+    margin: 0;
+    font-size: 1.5rem;
+}
+
+nav .logo a {
+    text-decoration: none;
+    color: var(--heading-color);
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+nav ul {
+    display: flex;
+    list-style: none;
+    gap: 1.5rem;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: var(--body-color);
+    font-weight: var(--font-weight-medium);
+    transition: color 0.2s;
+}
+
+nav ul li a:hover {
+    color: var(--link-color);
+}
+
+.toggle-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 90%;
+    padding: 0;
+    background: var(--body-bg);
+    color: var(--body-color);
+    font-size: 1rem;
+}
+
+/* Improved Flash Messages */
+.alerts {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    max-width: 300px;
 }
 
 .alert {
-    background-color: var(--card-bg);
+    background: var(--card-bg);
     border-radius: var(--border-radius);
     padding: 1rem;
-    display: flex;
-    align-items: flex-start;
     box-shadow: var(--shadow-md);
-    border-left: 4px solid var(--info-color);
-    animation: slideUp 0.3s ease;
+    color: var(--body-color);
+    position: relative;
+    animation: alertIn 0.3s ease forwards, alertOut 0.3s ease 5s forwards;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .alert.success {
-    border-left-color: var(--success-color);
+    border-left: 4px solid var(--success);
 }
 
 .alert.error {
-    border-left-color: var(--danger-color);
+    border-left: 4px solid var(--danger);
+}
+
+.alert.info {
+    border-left: 4px solid var(--info);
 }
 
 .alert.warning {
-    border-left-color: var(--warning-color);
-}
-
-.alert-content {
-    flex: 1;
-    padding-right: 0.75rem;
+    border-left: 4px solid var(--warning);
 }
 
 .alert .close {
     background: none;
     border: none;
     cursor: pointer;
-    color: var(--text-secondary);
     font-size: 1.25rem;
-    line-height: 1;
-    transition: var(--transition);
+    margin-left: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.2s;
 }
 
-.alert .close:hover {
-    color: var(--danger-color);
+.alert:hover .close {
+    opacity: 1;
 }
 
-.alert.fade-out {
-    animation: fadeOut 0.3s ease forwards;
-}
-
-@keyframes fadeOut {
+@keyframes alertIn {
     from {
-        opacity: 1;
-        transform: translateY(0);
+        transform: translateX(100%);
+        opacity: 0;
     }
 
     to {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-}
-
-/* Custom transitions and animations for Google Drive-like experience */
-
-/* Folder enter animation */
-.folder-transition-enter {
-    opacity: 0;
-    transform: translateY(20px);
-}
-
-.folder-transition-enter-active {
-    opacity: 1;
-    transform: translateY(0);
-    transition: all 0.3s ease-out;
-}
-
-/* Smooth hover effects */
-.folder-item,
-.file-item {
-    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
-}
-
-.folder-item:hover,
-.file-item:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    z-index: 1;
-}
-
-/* File hover actions */
-.file-actions {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-}
-
-.file-item:hover .file-actions,
-.folder-item:hover .file-actions {
-    opacity: 1;
-}
-
-/* Folder navigation transitions */
-.files-container {
-    transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.files-container.changing {
-    opacity: 0;
-    transform: translateY(10px);
-}
-
-/* File upload animation */
-@keyframes upload-progress {
-    0% {
-        width: 0%;
-    }
-
-    100% {
-        width: 100%;
-    }
-}
-
-.upload-progress-bar {
-    animation: upload-progress 1.5s ease-in-out;
-}
-
-/* Navigation sidebar animation */
-.sidebar {
-    transition: transform 0.3s ease, width 0.3s ease;
-}
-
-.sidebar.collapsed {
-    transform: translateX(-100%);
-    width: 0;
-}
-
-/* Scale animation for new items */
-@keyframes new-item-appear {
-    0% {
-        transform: scale(0.8);
-        opacity: 0;
-    }
-
-    100% {
-        transform: scale(1);
+        transform: translateX(0);
         opacity: 1;
     }
 }
 
-.new-item {
-    animation: new-item-appear 0.3s forwards;
+@keyframes alertOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+/* For mobile responsiveness */
+@media (max-width: 768px) {
+    nav {
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    nav ul {
+        flex-direction: column;
+        width: 100%;
+        margin-top: 1rem;
+    }
+
+    .stat-card {
+        padding: 1rem;
+    }
+
+    .stat-icon {
+        font-size: 2rem;
+        margin-right: 1rem;
+    }
+
+    .files-list {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    }
+
+    .file-item {
+        height: 120px;
+    }
+
+    .avatar {
+        margin-right: 0;
+        margin-bottom: 1rem;
+    }
+}
+
+/* Upload Overlay */
+.upload-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1050;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.upload-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.upload-modal {
+    width: 90%;
+    max-width: 800px;
+    max-height: 90vh;
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transform: translateY(20px);
+    transition: transform 0.3s ease;
+}
+
+.upload-overlay.active .upload-modal {
+    transform: translateY(0);
+}
+
+.upload-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.upload-header h3 {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.close-upload {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: var(--body-color);
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.close-upload:hover {
+    opacity: 1;
+}
+
+.upload-body {
+    padding: 1.5rem;
+    overflow-y: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.upload-dropzone {
+    border: 2px dashed var(--border-color);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    text-align: center;
+    transition: border-color 0.2s, background-color 0.2s;
+    cursor: pointer;
+}
+
+.upload-dropzone.drag-over {
+    border-color: var(--primary-color);
+    background-color: rgba(59, 130, 246, 0.05);
+}
+
+.upload-icon {
+    font-size: 3rem;
+    color: var(--secondary);
+    margin-bottom: 1rem;
+}
+
+.upload-dropzone p {
+    margin: 0.5rem 0;
+    color: var(--body-color);
+}
+
+.upload-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.upload-list {
+    background-color: var(--body-bg);
+    border-radius: var(--border-radius);
+    padding: 1rem;
+}
+
+.upload-list h4 {
+    margin: 0 0 1rem 0;
+    font-size: 1rem;
+    color: var(--body-color);
+}
+
+.upload-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.upload-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-sm);
+}
+
+.upload-item-icon {
+    font-size: 1.25rem;
+    color: var(--secondary);
+}
+
+.upload-item-details {
+    flex: 1;
+}
+
+.upload-item-name {
+    font-size: 0.9rem;
+    font-weight: var(--font-weight-medium);
+    color: var(--body-color);
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.upload-item-size {
+    font-size: 0.75rem;
+    color: var(--secondary);
+}
+
+.upload-item-progress {
+    width: 100%;
+    height: 4px;
+    background-color: var(--border-color);
+    border-radius: var(--border-radius-full);
+    margin-top: 0.5rem;
+    overflow: hidden;
+}
+
+.upload-item-progress-bar {
+    height: 100%;
+    background-color: var(--primary-color);
+    width: 0%;
+    transition: width 0.2s;
+}
+
+.upload-progress-overall {
+    margin-top: auto;
+}
+
+.progress-label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--body-color);
+}
+
+.progress-bar-container {
+    height: 8px;
+    background-color: var(--border-color);
+    border-radius: var(--border-radius-full);
+    overflow: hidden;
+}
+
+.progress-bar {
+    height: 100%;
+    background-color: var(--primary-color);
+    width: 0%;
+    transition: width 0.3s;
+}
+
+.upload-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Upload Status Indicators */
+.upload-item.uploading .upload-item-icon {
+    color: var(--info);
+}
+
+.upload-item.success .upload-item-icon {
+    color: var(--success);
+}
+
+.upload-item.error .upload-item-icon {
+    color: var(--danger);
 }
\ No newline at end of file
diff --git a/app/static/css/modal.css b/app/static/css/modal.css
deleted file mode 100644
index fbef689..0000000
--- a/app/static/css/modal.css
+++ /dev/null
@@ -1,130 +0,0 @@
-/* Beautiful modal styles */
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(3px);
-    z-index: 1000;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.modal.visible {
-    opacity: 1;
-}
-
-.modal-content {
-    background-color: var(--card-bg);
-    border-radius: 12px;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-    width: 90%;
-    max-width: 400px;
-    position: relative;
-    transform: scale(0.95);
-    opacity: 0;
-    transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.modal.visible .modal-content {
-    transform: scale(1);
-    opacity: 1;
-}
-
-.modal-header {
-    padding: 1.25rem 1.5rem;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.modal-header h3 {
-    margin: 0;
-    font-weight: 600;
-    color: var(--text);
-    font-size: 1.25rem;
-}
-
-.modal-close {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: var(--text-secondary);
-    transition: color 0.2s ease;
-    line-height: 1;
-    padding: 0;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-}
-
-.modal-close:hover {
-    color: var(--danger-color);
-    background-color: rgba(var(--danger-color-rgb), 0.1);
-}
-
-.modal-body {
-    padding: 1.5rem;
-}
-
-.form-group {
-    margin-bottom: 1.25rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: var(--text);
-}
-
-.form-group input[type="text"],
-.form-group input[type="password"],
-.form-group input[type="email"] {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
-    background-color: var(--bg);
-    color: var(--text);
-    font-size: 1rem;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.form-group input:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
-}
-
-.form-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    margin-top: 1.5rem;
-}
-
-.form-actions .btn {
-    padding: 0.6rem 1.25rem;
-    border-radius: 8px;
-    font-weight: 500;
-    transition: background 0.3s ease, transform 0.2s ease;
-}
-
-.form-actions .btn:hover {
-    transform: translateY(-1px);
-}
-
-.form-actions .btn:active {
-    transform: translateY(0);
-}
\ No newline at end of file
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
deleted file mode 100644
index 9ad674c..0000000
--- a/app/static/css/styles.css
+++ /dev/null
@@ -1,609 +0,0 @@
-/* Add these styles to your existing styles.css file */
-
-/* Theme Toggle */
-.theme-toggle-icon {
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 50%;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-}
-
-.theme-toggle-icon:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-[data-theme="dark"] .theme-toggle-icon:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-/* Make sure theme transitions work */
-body,
-.card,
-.navbar,
-.sidebar,
-input,
-select,
-textarea,
-button,
-.modal-content,
-.file-item,
-.folder-item {
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
-
-/* Making sure the styles apply properly to light/dark themes */
-:root {
-    --primary-color: #4a6bff;
-    --primary-hover: #3a5bed;
-    --secondary-color: #6c757d;
-    --success-color: #28a745;
-    --danger-color: #dc3545;
-    --warning-color: #ffc107;
-    --info-color: #17a2b8;
-    --light-color: #f8f9fa;
-    --dark-color: #343a40;
-    --background-color: #1e2029;
-    --card-bg: #282a36;
-    --text-color: #f8f8f2;
-    --text-muted: #bd93f9;
-    --border-color: #44475a;
-    --transition-speed: 0.3s;
-}
-
-[data-theme="dark"] {
-    /* Ensure these are applied */
-    --bg: #121418;
-    --card-bg: #1e2029;
-    --text: #f2f3f8;
-    --primary-color-rgb: 109, 93, 252;
-}
-
-/* Theme script fix */
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    transition: background-color 0.3s ease;
-}
-
-/* Global dropzone overlay for quick uploads */
-.global-dropzone {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(5px);
-    z-index: 9999;
-    display: none;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.global-dropzone.active {
-    display: flex;
-    opacity: 1;
-}
-
-.dropzone-content {
-    text-align: center;
-    color: white;
-    padding: 2rem;
-    border-radius: 12px;
-    background-color: rgba(var(--primary-color-rgb), 0.3);
-    border: 3px dashed rgba(255, 255, 255, 0.5);
-    max-width: 500px;
-    width: 90%;
-    animation: pulse 2s infinite;
-}
-
-.dropzone-icon {
-    margin-bottom: 1.5rem;
-}
-
-.dropzone-content h3 {
-    font-size: 1.8rem;
-    margin-bottom: 0.75rem;
-}
-
-.dropzone-content p {
-    opacity: 0.8;
-    font-size: 1.1rem;
-}
-
-/* Upload toast notification */
-.upload-toast {
-    position: fixed;
-    bottom: 2rem;
-    right: 2rem;
-    width: 350px;
-    background-color: var(--card-bg);
-    border-radius: 10px;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
-    z-index: 1080;
-    overflow: hidden;
-    display: none;
-    transform: translateY(20px);
-    opacity: 0;
-    transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.upload-toast.active {
-    display: block;
-    transform: translateY(0);
-    opacity: 1;
-}
-
-.upload-toast-header {
-    display: flex;
-    align-items: center;
-    padding: 0.8rem 1rem;
-    background-color: var(--primary-color);
-    color: white;
-}
-
-.upload-toast-header i {
-    margin-right: 0.75rem;
-}
-
-.upload-toast-close {
-    margin-left: auto;
-    background: none;
-    border: none;
-    color: white;
-    font-size: 1.25rem;
-    cursor: pointer;
-    padding: 0;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s ease;
-}
-
-.upload-toast-close:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-
-.upload-toast-body {
-    padding: 1rem;
-}
-
-.upload-toast-progress-info {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
-    font-size: 0.9rem;
-}
-
-.upload-toast-progress-bar-container {
-    height: 8px;
-    background-color: var(--border-color);
-    border-radius: 4px;
-    overflow: hidden;
-}
-
-.upload-toast-progress-bar {
-    height: 100%;
-    width: 0;
-    background-color: var(--primary-color);
-    transition: width 0.3s ease;
-}
-
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-
-    50% {
-        transform: scale(1.03);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-/* File and folder views */
-.files-container {
-    padding: 20px;
-    min-height: 300px;
-}
-
-/* Grid view */
-.files-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 16px;
-}
-
-.grid-view .folder-item,
-.grid-view .file-item {
-    padding: 15px;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    background-color: rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--border-color);
-    position: relative;
-    transition: all 0.3s;
-    text-decoration: none;
-    color: var(--text-color);
-    height: 150px;
-}
-
-.grid-view .item-icon {
-    font-size: 2.5rem;
-    margin-bottom: 10px;
-    color: var(--primary-color);
-}
-
-.grid-view .folder-item .item-icon {
-    color: #f1c40f;
-}
-
-.grid-view .item-info {
-    width: 100%;
-}
-
-.grid-view .item-name {
-    font-weight: 500;
-    margin-bottom: 5px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.grid-view .item-details {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-/* File actions */
-.file-actions {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    display: flex;
-    gap: 5px;
-    opacity: 0;
-    transition: opacity 0.2s;
-}
-
-.folder-item:hover .file-actions,
-.file-item:hover .file-actions {
-    opacity: 1;
-}
-
-.action-btn {
-    background: rgba(0, 0, 0, 0.5);
-    border: none;
-    color: white;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.action-btn:hover {
-    background: var(--primary-color);
-}
-
-.action-btn.edit:hover {
-    background: var(--info-color);
-}
-
-.action-btn.delete:hover {
-    background: var(--danger-color);
-}
-
-/* Empty folder */
-.empty-folder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 300px;
-    text-align: center;
-}
-
-.empty-icon {
-    font-size: 3rem;
-    color: var(--border-color);
-    margin-bottom: 15px;
-}
-
-.empty-message h3 {
-    margin-bottom: 10px;
-    font-weight: 500;
-}
-
-.empty-message p {
-    color: var(--text-muted);
-    margin-bottom: 20px;
-}
-
-.empty-actions {
-    display: flex;
-    gap: 10px;
-}
-
-/* Main styles for the file management system */
-.browser-container {
-    background-color: var(--card-bg);
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
-    margin-bottom: 30px;
-    overflow: hidden;
-}
-
-.browser-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.browser-title {
-    display: flex;
-    align-items: center;
-}
-
-.browser-title h2 {
-    margin: 0 0 0 10px;
-    font-size: 1.5rem;
-}
-
-.browser-title i {
-    font-size: 1.5rem;
-    color: var(--primary-color);
-}
-
-.browser-actions {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-/* Breadcrumbs */
-.breadcrumbs {
-    display: flex;
-    align-items: center;
-    padding: 10px 20px;
-    border-bottom: 1px solid var(--border-color);
-    overflow-x: auto;
-    white-space: nowrap;
-}
-
-.breadcrumb-item {
-    color: var(--text-muted);
-    text-decoration: none;
-    font-size: 0.9rem;
-    padding: 5px 0;
-}
-
-.breadcrumb-item:hover {
-    color: var(--primary-color);
-}
-
-.breadcrumb-separator {
-    margin: 0 8px;
-    color: var(--secondary-color);
-}
-
-/* Search bar */
-.search-container {
-    position: relative;
-    margin-right: 10px;
-}
-
-.search-container input {
-    padding: 8px 15px 8px 35px;
-    border-radius: 20px;
-    border: 1px solid var(--border-color);
-    background-color: rgba(0, 0, 0, 0.2);
-    color: var(--text-color);
-    width: 200px;
-    transition: all 0.3s;
-}
-
-.search-container input:focus {
-    width: 250px;
-    outline: none;
-    border-color: var(--primary-color);
-}
-
-.search-btn {
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-}
-
-/* View toggle */
-.view-toggle {
-    display: flex;
-    border-radius: 4px;
-    overflow: hidden;
-    margin-right: 10px;
-}
-
-.view-btn {
-    background-color: var(--card-bg);
-    border: 1px solid var(--border-color);
-    color: var(--text-muted);
-    padding: 8px 12px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.view-btn:first-child {
-    border-radius: 4px 0 0 4px;
-}
-
-.view-btn:last-child {
-    border-radius: 0 4px 4px 0;
-}
-
-.view-btn.active {
-    background-color: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-}
-
-/* Buttons */
-.btn {
-    padding: 8px 15px;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    font-weight: 500;
-    transition: all 0.2s;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.btn.primary {
-    background-color: var(--primary-color);
-    color: white;
-}
-
-.btn.primary:hover {
-    background-color: var(--primary-hover);
-}
-
-.btn.secondary {
-    background-color: transparent;
-    color: var(--text-color);
-    border: 1px solid var(--border-color);
-}
-
-.btn.secondary:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-/* Modal */
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    align-items: center;
-    justify-content: center;
-}
-
-.modal.active {
-    display: flex;
-}
-
-.modal-content {
-    background-color: var(--card-bg);
-    border-radius: 8px;
-    width: 100%;
-    max-width: 500px;
-    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
-    animation: modal-appear 0.3s forwards;
-}
-
-@keyframes modal-appear {
-    from {
-        opacity: 0;
-        transform: translateY(-50px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px 20px;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.modal-header h3 {
-    margin: 0;
-    font-size: 1.25rem;
-}
-
-.modal-close {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: var(--text-color);
-    opacity: 0.7;
-    transition: opacity 0.2s;
-}
-
-.modal-close:hover {
-    opacity: 1;
-}
-
-.modal-body {
-    padding: 20px;
-}
-
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
-}
-
-.form-group input {
-    width: 100%;
-    padding: 10px;
-    border-radius: 4px;
-    border: 1px solid var(--border-color);
-    background-color: rgba(0, 0, 0, 0.2);
-    color: var(--text-color);
-}
-
-.form-group input:focus {
-    outline: none;
-    border-color: var(--primary-color);
-}
-
-.form-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-}
\ No newline at end of file
diff --git a/app/static/js/browser.js b/app/static/js/browser.js
deleted file mode 100644
index b17407c..0000000
--- a/app/static/js/browser.js
+++ /dev/null
@@ -1,246 +0,0 @@
-/**
- * File browser functionality
- */
-document.addEventListener('DOMContentLoaded', function () {
-    // View toggle functionality
-    const filesContainer = document.getElementById('files-container');
-    const gridViewBtn = document.getElementById('grid-view-btn');
-    const listViewBtn = document.getElementById('list-view-btn');
-
-    if (filesContainer && gridViewBtn && listViewBtn) {
-        // Set initial view based on saved preference
-        const savedView = localStorage.getItem('view_preference') || 'grid';
-        filesContainer.className = `files-container ${savedView}-view`;
-
-        // Highlight the correct button
-        if (savedView === 'grid') {
-            gridViewBtn.classList.add('active');
-            listViewBtn.classList.remove('active');
-        } else {
-            listViewBtn.classList.add('active');
-            gridViewBtn.classList.remove('active');
-        }
-
-        // Add event listeners
-        gridViewBtn.addEventListener('click', function () {
-            filesContainer.className = 'files-container grid-view';
-            gridViewBtn.classList.add('active');
-            listViewBtn.classList.remove('active');
-
-            // Save preference
-            localStorage.setItem('view_preference', 'grid');
-        });
-
-        listViewBtn.addEventListener('click', function () {
-            filesContainer.className = 'files-container list-view';
-            listViewBtn.classList.add('active');
-            gridViewBtn.classList.remove('active');
-
-            // Save preference
-            localStorage.setItem('view_preference', 'list');
-        });
-    }
-
-    // Variables for tracking selected items
-    let selectedItemId = null;
-    let selectedItemType = null;
-
-    // Setup context menu functionality 
-    function setupContextMenu() {
-        // Context menu already implemented via context-menu.js
-        // We'll just need to ensure our item actions are properly set
-
-        // Add item click handler to set selected item
-        document.querySelectorAll('.file-item, .folder-item').forEach(item => {
-            item.addEventListener('click', function (e) {
-                // If clicking on an action button, don't select the item
-                if (e.target.closest('.item-actions') || e.target.closest('a')) {
-                    return;
-                }
-
-                // Set selected item
-                selectedItemId = this.dataset.id;
-                selectedItemType = this.classList.contains('folder-item') ? 'folder' : 'file';
-
-                // Highlight selected item
-                document.querySelectorAll('.file-item, .folder-item').forEach(i => {
-                    i.classList.remove('selected');
-                });
-                this.classList.add('selected');
-            });
-
-            // Right-click to open context menu
-            item.addEventListener('contextmenu', function (e) {
-                // Set selected item
-                selectedItemId = this.dataset.id;
-                selectedItemType = this.classList.contains('folder-item') ? 'folder' : 'file';
-
-                // Highlight selected item
-                document.querySelectorAll('.file-item, .folder-item').forEach(i => {
-                    i.classList.remove('selected');
-                });
-                this.classList.add('selected');
-            });
-        });
-    }
-
-    // Handle folder creation
-    const newFolderForm = document.getElementById('new-folder-form');
-    if (newFolderForm) {
-        newFolderForm.addEventListener('submit', function (e) {
-            e.preventDefault();
-
-            const folderName = document.getElementById('folder-name').value;
-            const parentId = document.querySelector('input[name="parent_id"]').value;
-
-            // Create FormData
-            const formData = new FormData();
-            formData.append('name', folderName);
-            if (parentId) formData.append('parent_id', parentId);
-
-            // Send request
-            fetch('/files/create_folder', {
-                method: 'POST',
-                body: formData,
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest'
-                }
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        // Close modal
-                        closeModal('new-folder-modal');
-
-                        // Show success message
-                        showAlert('Folder created successfully', 'success');
-
-                        // Reload page to show new folder
-                        setTimeout(() => window.location.reload(), 500);
-                    } else {
-                        showAlert(data.error || 'Error creating folder', 'error');
-                    }
-                })
-                .catch(error => {
-                    showAlert('Error creating folder: ' + error, 'error');
-                });
-        });
-    }
-
-    // Handle rename
-    const renameForm = document.getElementById('rename-form');
-    if (renameForm) {
-        renameForm.addEventListener('submit', function (e) {
-            e.preventDefault();
-
-            const newName = document.getElementById('new-name').value;
-
-            if (!selectedItemId) {
-                showAlert('No item selected', 'error');
-                return;
-            }
-
-            fetch('/files/rename', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-Requested-With': 'XMLHttpRequest'
-                },
-                body: JSON.stringify({
-                    item_id: selectedItemId,
-                    new_name: newName
-                })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        // Close modal
-                        closeModal('rename-modal');
-
-                        // Show success message
-                        showAlert('Item renamed successfully', 'success');
-
-                        // Update item name in the UI or reload
-                        setTimeout(() => window.location.reload(), 500);
-                    } else {
-                        showAlert(data.error || 'Failed to rename item', 'error');
-                    }
-                })
-                .catch(error => {
-                    showAlert('Error: ' + error, 'error');
-                });
-        });
-    }
-
-    // Handle delete confirmation
-    const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
-    if (confirmDeleteBtn) {
-        confirmDeleteBtn.addEventListener('click', function () {
-            if (!selectedItemId) {
-                showAlert('No item selected', 'error');
-                closeModal('delete-modal');
-                return;
-            }
-
-            fetch(`/files/delete/${selectedItemId}`, {
-                method: 'POST',
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest'
-                }
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        // Close modal
-                        closeModal('delete-modal');
-
-                        // Show success message
-                        showAlert(data.message || 'Item deleted successfully', 'success');
-
-                        // Remove the item from the UI or reload
-                        setTimeout(() => window.location.reload(), 500);
-                    } else {
-                        showAlert(data.error || 'Failed to delete item', 'error');
-                    }
-                })
-                .catch(error => {
-                    showAlert('Error: ' + error, 'error');
-                });
-        });
-    }
-
-    // Initialize
-    setupContextMenu();
-
-    // Buttons to open modals
-    const deleteBtn = document.getElementById('delete-btn');
-    if (deleteBtn) {
-        deleteBtn.addEventListener('click', function () {
-            if (!selectedItemId) {
-                showAlert('Please select an item first', 'warning');
-                return;
-            }
-            openModal('delete-modal');
-        });
-    }
-
-    const renameBtn = document.getElementById('rename-btn');
-    if (renameBtn) {
-        renameBtn.addEventListener('click', function () {
-            if (!selectedItemId) {
-                showAlert('Please select an item first', 'warning');
-                return;
-            }
-
-            // Get current name
-            const selectedItem = document.querySelector(`.file-item[data-id="${selectedItemId}"], .folder-item[data-id="${selectedItemId}"]`);
-            const currentName = selectedItem ? selectedItem.querySelector('.item-name').textContent.trim() : '';
-
-            // Set current name in the input
-            document.getElementById('new-name').value = currentName;
-
-            openModal('rename-modal');
-            document.getElementById('new-name').focus();
-        });
-    }
-}); 
\ No newline at end of file
diff --git a/app/static/js/common.js b/app/static/js/common.js
deleted file mode 100644
index d7a4dee..0000000
--- a/app/static/js/common.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * Common JavaScript functions used across the application
- */
-
-// Modal handling
-function openModal(modalId) {
-    const modal = typeof modalId === 'string' ? document.getElementById(modalId) : modalId;
-    if (modal) {
-        modal.style.display = 'flex';
-        document.body.classList.add('modal-open');
-    }
-}
-
-function closeModal(modalId) {
-    const modal = typeof modalId === 'string' ? document.getElementById(modalId) : modalId;
-    if (modal) {
-        modal.style.display = 'none';
-        document.body.classList.remove('modal-open');
-    }
-}
-
-// Hide all modals on page load
-function setupModals() {
-    document.querySelectorAll('.modal').forEach(modal => {
-        modal.style.display = 'none';
-    });
-
-    // Close modals when clicking outside or on close button
-    document.addEventListener('click', function (e) {
-        if (e.target.classList.contains('modal')) {
-            closeModal(e.target);
-        } else if (e.target.classList.contains('modal-close') || e.target.classList.contains('modal-cancel')) {
-            const modal = e.target.closest('.modal');
-            closeModal(modal);
-        }
-    });
-
-    // Escape key to close modals
-    document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape') {
-            document.querySelectorAll('.modal.visible').forEach(modal => {
-                closeModal(modal);
-            });
-        }
-    });
-}
-
-// Alerts
-function showAlert(message, type = 'info') {
-    // Create alerts container if it doesn't exist
-    let alertsContainer = document.querySelector('.alerts');
-    if (!alertsContainer) {
-        alertsContainer = document.createElement('div');
-        alertsContainer.className = 'alerts';
-        document.body.appendChild(alertsContainer);
-    }
-
-    // Create alert
-    const alert = document.createElement('div');
-    alert.className = `alert ${type}`;
-    alert.innerHTML = `
-        <div class="alert-content">${message}</div>
-        <button class="close" aria-label="Close">&times;</button>
-    `;
-
-    // Add to container
-    alertsContainer.appendChild(alert);
-
-    // Setup dismiss
-    const closeBtn = alert.querySelector('.close');
-    closeBtn.addEventListener('click', function () {
-        alert.classList.add('fade-out');
-        setTimeout(() => {
-            alert.remove();
-        }, 300);
-    });
-
-    // Auto dismiss
-    setTimeout(() => {
-        if (alert.parentNode) {
-            alert.classList.add('fade-out');
-            setTimeout(() => {
-                if (alert.parentNode) {
-                    alert.remove();
-                }
-            }, 300);
-        }
-    }, 5000);
-}
-
-// Helper functions
-function formatSize(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];
-}
-
-function formatDate(dateString) {
-    if (!dateString) return 'Unknown';
-    const date = new Date(dateString);
-    return date.toLocaleString();
-}
-
-function escapeHtml(unsafe) {
-    return unsafe
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#039;");
-}
-
-function getFileIconClass(fileName) {
-    if (!fileName) return 'fa-file';
-
-    const ext = fileName.split('.').pop().toLowerCase();
-
-    // Images
-    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(ext)) {
-        return 'fa-file-image';
-    }
-    // Videos
-    else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(ext)) {
-        return 'fa-file-video';
-    }
-    // Audio
-    else if (['mp3', 'wav', 'ogg', 'flac', 'm4a'].includes(ext)) {
-        return 'fa-file-audio';
-    }
-    // Documents
-    else if (['doc', 'docx', 'odt'].includes(ext)) {
-        return 'fa-file-word';
-    }
-    // Spreadsheets
-    else if (['xls', 'xlsx', 'ods', 'csv'].includes(ext)) {
-        return 'fa-file-excel';
-    }
-    // Presentations
-    else if (['ppt', 'pptx', 'odp'].includes(ext)) {
-        return 'fa-file-powerpoint';
-    }
-    // PDFs
-    else if (['pdf'].includes(ext)) {
-        return 'fa-file-pdf';
-    }
-    // Archives
-    else if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext)) {
-        return 'fa-file-archive';
-    }
-    // Text
-    else if (['txt', 'rtf', 'md', 'log'].includes(ext)) {
-        return 'fa-file-alt';
-    }
-    // Code
-    else if (['html', 'css', 'js', 'php', 'py', 'java', 'c', 'cpp', 'h', 'xml', 'json', 'sql'].includes(ext)) {
-        return 'fa-file-code';
-    }
-
-    return 'fa-file';
-} 
\ No newline at end of file
diff --git a/app/static/js/context-menu.js b/app/static/js/context-menu.js
deleted file mode 100644
index df1fcff..0000000
--- a/app/static/js/context-menu.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * Context Menu for Files/Folders
- */
-
-class ContextMenu {
-    constructor() {
-        this.menu = null;
-        this.currentTarget = null;
-        this.init();
-    }
-
-    init() {
-        // Create context menu element
-        this.menu = document.createElement('div');
-        this.menu.className = 'context-menu';
-        this.menu.style.display = 'none';
-        document.body.appendChild(this.menu);
-
-        // Close menu on click outside
-        document.addEventListener('click', (e) => {
-            if (this.menu.style.display === 'block') {
-                this.hideMenu();
-            }
-        });
-
-        // Prevent default context menu
-        document.addEventListener('contextmenu', (e) => {
-            if (e.target.closest('.file-item, .folder-item')) {
-                e.preventDefault();
-                this.showMenu(e);
-            }
-        });
-
-        // Close on escape key
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && this.menu.style.display === 'block') {
-                this.hideMenu();
-            }
-        });
-    }
-
-    showMenu(e) {
-        // Get target item
-        this.currentTarget = e.target.closest('.file-item, .folder-item');
-        const itemId = this.currentTarget.dataset.id;
-        const itemType = this.currentTarget.classList.contains('folder-item') ? 'folder' : 'file';
-        const itemName = this.currentTarget.querySelector('.item-name').textContent;
-
-        // Create menu items based on item type
-        this.menu.innerHTML = '';
-
-        if (itemType === 'folder') {
-            // Folder actions
-            this.addMenuItem('Open', 'fa-folder-open', () => {
-                window.location.href = `/files/browse/${itemId}`;
-            });
-
-            this.addMenuItem('Rename', 'fa-edit', () => {
-                openModal('rename-modal');
-                document.getElementById('new-name').value = itemName;
-                window.selectedItemId = itemId;
-            });
-
-            this.addMenuItem('Delete', 'fa-trash-alt', () => {
-                openModal('delete-modal');
-                window.selectedItemId = itemId;
-            });
-        } else {
-            // File actions
-            this.addMenuItem('Download', 'fa-download', () => {
-                window.location.href = `/files/download/${itemId}`;
-            });
-
-            this.addMenuItem('View', 'fa-eye', () => {
-                window.location.href = `/files/view/${itemId}`;
-            });
-
-            this.addMenuItem('Rename', 'fa-edit', () => {
-                openModal('rename-modal');
-                document.getElementById('new-name').value = itemName;
-                window.selectedItemId = itemId;
-            });
-
-            this.addMenuItem('Delete', 'fa-trash-alt', () => {
-                openModal('delete-modal');
-                window.selectedItemId = itemId;
-            });
-        }
-
-        // Position menu
-        const x = e.clientX;
-        const y = e.clientY;
-
-        // Set menu position
-        this.menu.style.left = `${x}px`;
-        this.menu.style.top = `${y}px`;
-
-        // Show menu with animation
-        this.menu.style.display = 'block';
-
-        // Adjust position if menu goes off screen
-        const menuRect = this.menu.getBoundingClientRect();
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight;
-
-        if (menuRect.right > windowWidth) {
-            this.menu.style.left = `${windowWidth - menuRect.width - 10}px`;
-        }
-
-        if (menuRect.bottom > windowHeight) {
-            this.menu.style.top = `${windowHeight - menuRect.height - 10}px`;
-        }
-    }
-
-    hideMenu() {
-        this.menu.style.display = 'none';
-        this.currentTarget = null;
-    }
-
-    addMenuItem(label, icon, action) {
-        const item = document.createElement('div');
-        item.className = 'context-menu-item';
-        item.innerHTML = `<i class="fas ${icon}"></i> ${label}`;
-
-        item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.hideMenu();
-            action();
-        });
-
-        this.menu.appendChild(item);
-    }
-
-    addDivider() {
-        const divider = document.createElement('div');
-        divider.className = 'context-menu-divider';
-        this.menu.appendChild(divider);
-    }
-}
-
-// Initialize context menu
-document.addEventListener('DOMContentLoaded', function () {
-    window.contextMenu = new ContextMenu();
-}); 
\ No newline at end of file
diff --git a/app/static/js/main.js b/app/static/js/main.js
deleted file mode 100644
index 3d4a9a7..0000000
--- a/app/static/js/main.js
+++ /dev/null
@@ -1,208 +0,0 @@
-// Main JavaScript file for Flask Files
-
-document.addEventListener('DOMContentLoaded', function () {
-    // Initialize components
-    initializeViewToggle();
-    initializeFolderNavigation();
-    initializeModals();
-    initializeContextMenu();
-    initializeUploadFunctionality();
-
-    // Register service worker if supported
-    if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.register('/static/js/service-worker.js')
-            .then(function (registration) {
-                console.log('Service Worker registered with scope:', registration.scope);
-            }).catch(function (error) {
-                console.log('Service Worker registration failed:', error);
-            });
-    }
-});
-
-// Toggle between grid and list views
-function initializeViewToggle() {
-    const gridViewBtn = document.getElementById('grid-view-btn');
-    const listViewBtn = document.getElementById('list-view-btn');
-    const filesContainer = document.getElementById('files-container');
-
-    if (gridViewBtn && listViewBtn && filesContainer) {
-        gridViewBtn.addEventListener('click', function () {
-            filesContainer.classList.add('grid-view');
-            filesContainer.classList.remove('list-view');
-            gridViewBtn.classList.add('active');
-            listViewBtn.classList.remove('active');
-            localStorage.setItem('fileViewPreference', 'grid');
-        });
-
-        listViewBtn.addEventListener('click', function () {
-            filesContainer.classList.add('list-view');
-            filesContainer.classList.remove('grid-view');
-            listViewBtn.classList.add('active');
-            gridViewBtn.classList.remove('active');
-            localStorage.setItem('fileViewPreference', 'list');
-        });
-
-        // Load user preference from localStorage
-        const viewPreference = localStorage.getItem('fileViewPreference') || 'grid';
-        if (viewPreference === 'grid') {
-            gridViewBtn.click();
-        } else {
-            listViewBtn.click();
-        }
-    }
-}
-
-// Add animations for folder navigation
-function initializeFolderNavigation() {
-    // Add click event to folder items
-    document.querySelectorAll('.folder-item').forEach(folder => {
-        folder.addEventListener('click', function (e) {
-            e.preventDefault();
-
-            const href = this.getAttribute('href');
-            const filesContainer = document.getElementById('files-container');
-
-            // Add transition class
-            filesContainer.classList.add('changing');
-
-            // After a short delay, navigate to the folder
-            setTimeout(() => {
-                window.location.href = href;
-            }, 200);
-        });
-    });
-
-    // Add the animation class when page loads
-    const filesContainer = document.getElementById('files-container');
-    if (filesContainer) {
-        // Remove the class to trigger animation
-        filesContainer.classList.add('folder-enter-active');
-    }
-}
-
-// Modal handling
-function initializeModals() {
-    // New folder modal
-    const newFolderBtn = document.getElementById('new-folder-btn');
-    const newFolderModal = document.getElementById('new-folder-modal');
-    const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');
-
-    if (newFolderBtn && newFolderModal) {
-        newFolderBtn.addEventListener('click', function () {
-            newFolderModal.style.display = 'flex';
-            document.getElementById('folder-name').focus();
-        });
-
-        if (emptyNewFolderBtn) {
-            emptyNewFolderBtn.addEventListener('click', function () {
-                newFolderModal.style.display = 'flex';
-                document.getElementById('folder-name').focus();
-            });
-        }
-
-        // Close modal
-        document.querySelectorAll('.modal-close, .modal-cancel').forEach(btn => {
-            btn.addEventListener('click', function () {
-                newFolderModal.style.display = 'none';
-            });
-        });
-
-        // Close on click outside
-        window.addEventListener('click', function (event) {
-            if (event.target === newFolderModal) {
-                newFolderModal.style.display = 'none';
-            }
-        });
-    }
-}
-
-// Context menu for right-click on files/folders
-function initializeContextMenu() {
-    const contextMenu = document.getElementById('context-menu');
-
-    if (!contextMenu) return;
-
-    document.addEventListener('contextmenu', function (e) {
-        const fileItem = e.target.closest('.file-item, .folder-item');
-
-        if (fileItem) {
-            e.preventDefault();
-
-            const itemId = fileItem.getAttribute('data-id');
-            const itemType = fileItem.classList.contains('file-item') ? 'file' : 'folder';
-
-            // Position menu
-            contextMenu.style.left = `${e.pageX}px`;
-            contextMenu.style.top = `${e.pageY}px`;
-
-            // Show menu
-            contextMenu.style.display = 'block';
-            contextMenu.setAttribute('data-item-id', itemId);
-            contextMenu.setAttribute('data-item-type', itemType);
-
-            // Set up buttons for different item types
-            setupContextMenuActions(contextMenu, itemId, itemType);
-        }
-    });
-
-    // Hide menu on click elsewhere
-    document.addEventListener('click', function () {
-        contextMenu.style.display = 'none';
-    });
-}
-
-function setupContextMenuActions(menu, itemId, itemType) {
-    // Show/hide appropriate actions based on item type
-    menu.querySelectorAll('[data-action]').forEach(action => {
-        const forType = action.getAttribute('data-for');
-        if (forType === 'all' || forType === itemType) {
-            action.style.display = 'block';
-        } else {
-            action.style.display = 'none';
-        }
-    });
-}
-
-// Initialize file upload functionality
-function initializeUploadFunctionality() {
-    const uploadBtn = document.querySelector('a[href*="upload"]');
-    const fileInput = document.getElementById('file-upload');
-
-    if (uploadBtn && fileInput) {
-        fileInput.addEventListener('change', function (e) {
-            if (this.files.length) {
-                const formData = new FormData();
-
-                for (let i = 0; i < this.files.length; i++) {
-                    formData.append('file', this.files[i]);
-                }
-
-                // Get current folder ID from URL if available
-                const urlParams = new URLSearchParams(window.location.search);
-                const folderId = urlParams.get('folder_id');
-
-                if (folderId) {
-                    formData.append('folder_id', folderId);
-                }
-
-                fetch('/files/upload', {
-                    method: 'POST',
-                    body: formData,
-                })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success) {
-                            // Refresh page to show new file
-                            window.location.reload();
-                        } else {
-                            alert('Upload failed: ' + data.error);
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        alert('Upload failed. Please try again.');
-                    });
-            }
-        });
-    }
-} 
\ No newline at end of file
diff --git a/app/static/js/quick-upload.js b/app/static/js/quick-upload.js
deleted file mode 100644
index cae95e7..0000000
--- a/app/static/js/quick-upload.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/**
- * Quick upload functionality for instant file uploads
- */
-document.addEventListener('DOMContentLoaded', function () {
-    // Elements
-    const globalDropzone = document.getElementById('global-dropzone');
-    const uploadToast = document.getElementById('upload-toast');
-    const uploadProgressBar = document.getElementById('upload-toast-progress-bar');
-    const uploadPercentage = document.getElementById('upload-toast-percentage');
-    const uploadFileName = document.getElementById('upload-toast-file');
-    const uploadToastClose = document.getElementById('upload-toast-close');
-
-    // Get current folder ID from URL or data attribute
-    function getCurrentFolderId() {
-        // Check if we're on a folder page
-        const urlParams = new URLSearchParams(window.location.search);
-        const folderIdFromUrl = urlParams.get('folder_id');
-
-        // Check for a data attribute on the page
-        const folderElement = document.querySelector('[data-current-folder-id]');
-        const folderIdFromData = folderElement ? folderElement.dataset.currentFolderId : null;
-
-        return folderIdFromUrl || folderIdFromData || null;
-    }
-
-    // Show global dropzone when files are dragged over the window
-    window.addEventListener('dragover', function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        // Only show dropzone if user is on dashboard or files page
-        const onRelevantPage = window.location.pathname.includes('/dashboard') ||
-            window.location.pathname.includes('/files');
-
-        if (onRelevantPage) {
-            globalDropzone.classList.add('active');
-        }
-    });
-
-    // Hide dropzone when dragging leaves window
-    window.addEventListener('dragleave', function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        // Only hide if leaving the window (not entering child elements)
-        if (e.clientX <= 0 || e.clientY <= 0 ||
-            e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
-            globalDropzone.classList.remove('active');
-        }
-    });
-
-    // Handle drop event for quick upload
-    window.addEventListener('drop', function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        // Hide the dropzone
-        globalDropzone.classList.remove('active');
-
-        // Make sure files were dropped
-        if (!e.dataTransfer.files || e.dataTransfer.files.length === 0) {
-            return;
-        }
-
-        // Show upload progress toast
-        uploadToast.classList.add('active');
-
-        // Get the current folder ID (null for root)
-        const currentFolderId = getCurrentFolderId();
-
-        // Upload the files
-        uploadFiles(e.dataTransfer.files, currentFolderId);
-    });
-
-    // Close upload toast
-    if (uploadToastClose) {
-        uploadToastClose.addEventListener('click', function () {
-            uploadToast.classList.remove('active');
-        });
-    }
-
-    // Quick upload function
-    function uploadFiles(files, folderId) {
-        // Create FormData object
-        const formData = new FormData();
-
-        // Add folder ID if provided
-        if (folderId) {
-            formData.append('parent_folder_id', folderId);
-        }
-
-        // Add all files
-        for (let i = 0; i < files.length; i++) {
-            formData.append('files[]', files[i]);
-        }
-
-        // Create XHR request
-        const xhr = new XMLHttpRequest();
-
-        // Update progress
-        xhr.upload.addEventListener('progress', function (e) {
-            if (e.lengthComputable) {
-                const percent = Math.round((e.loaded / e.total) * 100);
-                uploadProgressBar.style.width = percent + '%';
-                uploadPercentage.textContent = percent + '%';
-
-                if (files.length === 1) {
-                    uploadFileName.textContent = files[0].name;
-                } else {
-                    uploadFileName.textContent = `Uploading ${files.length} files...`;
-                }
-            }
-        });
-
-        // Handle completion
-        xhr.addEventListener('load', function () {
-            if (xhr.status >= 200 && xhr.status < 300) {
-                // Success - upload complete
-                uploadProgressBar.style.width = '100%';
-                uploadPercentage.textContent = '100%';
-                uploadFileName.textContent = 'Upload Complete!';
-
-                // Show success alert
-                if (typeof showAlert === 'function') {
-                    showAlert('Files uploaded successfully!', 'success');
-                }
-
-                // Reload page after brief delay to show new files
-                setTimeout(function () {
-                    window.location.reload();
-                }, 1000);
-            } else {
-                // Error
-                let errorMessage = 'Upload failed';
-
-                try {
-                    const response = JSON.parse(xhr.responseText);
-                    if (response.error) {
-                        errorMessage = response.error;
-                    }
-                } catch (e) {
-                    // Ignore parsing error
-                }
-
-                uploadFileName.textContent = errorMessage;
-
-                if (typeof showAlert === 'function') {
-                    showAlert(errorMessage, 'error');
-                }
-            }
-
-            // Hide toast after delay
-            setTimeout(function () {
-                uploadToast.classList.remove('active');
-
-                // Reset progress
-                setTimeout(function () {
-                    uploadProgressBar.style.width = '0%';
-                    uploadPercentage.textContent = '0%';
-                    uploadFileName.textContent = 'Processing...';
-                }, 300);
-            }, 3000);
-        });
-
-        // Handle errors
-        xhr.addEventListener('error', function () {
-            uploadFileName.textContent = 'Network error occurred';
-
-            if (typeof showAlert === 'function') {
-                showAlert('Network error occurred', 'error');
-            }
-
-            // Hide toast after delay
-            setTimeout(function () {
-                uploadToast.classList.remove('active');
-            }, 3000);
-        });
-
-        // Set up and send the request
-        xhr.open('POST', '/files/upload_xhr', true);
-        xhr.send(formData);
-    }
-}); 
\ No newline at end of file
diff --git a/app/static/js/theme.js b/app/static/js/theme.js
deleted file mode 100644
index 437552c..0000000
--- a/app/static/js/theme.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Theme handling functionality
- */
-document.addEventListener('DOMContentLoaded', function () {
-    const themeToggle = document.querySelector('.theme-toggle-icon');
-
-    if (themeToggle) {
-        themeToggle.addEventListener('click', function () {
-            const currentTheme = document.documentElement.getAttribute('data-theme') || 'system';
-            let newTheme;
-
-            if (currentTheme === 'dark') {
-                newTheme = 'light';
-            } else {
-                newTheme = 'dark';
-            }
-
-            // Update theme
-            document.documentElement.setAttribute('data-theme', newTheme);
-
-            // Store preference
-            localStorage.setItem('theme_preference', newTheme);
-
-            // Update icon
-            updateThemeIcon(newTheme);
-        });
-
-        // Initialize theme on page load
-        initTheme();
-    }
-
-    function initTheme() {
-        // Get saved preference
-        let theme = localStorage.getItem('theme_preference');
-
-        // If no preference, check system preference
-        if (!theme) {
-            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                theme = 'dark';
-            } else {
-                theme = 'light';
-            }
-        }
-
-        // Apply theme
-        document.documentElement.setAttribute('data-theme', theme);
-
-        // Update icon
-        updateThemeIcon(theme);
-    }
-
-    function updateThemeIcon(theme) {
-        const icon = document.querySelector('.theme-toggle-icon i');
-        if (icon) {
-            if (theme === 'dark') {
-                icon.className = 'fas fa-sun';
-            } else {
-                icon.className = 'fas fa-moon';
-            }
-        }
-    }
-}); 
\ No newline at end of file
diff --git a/app/static/js/upload.js b/app/static/js/upload.js
index d462df7..4f82858 100644
--- a/app/static/js/upload.js
+++ b/app/static/js/upload.js
@@ -10,9 +10,6 @@ document.addEventListener('DOMContentLoaded', function () {
     const fileList = document.getElementById('file-list');
     const folderList = document.getElementById('folder-file-list');
 
-    // Fix to avoid darkModeToggle is null error
-    const darkModeToggle = document.querySelector('.theme-toggle-icon');
-
     // Progress elements
     const progressBar = document.getElementById('progress-bar');
     const progressPercentage = document.getElementById('progress-percentage');
diff --git a/app/templates/admin/panel.html b/app/templates/admin/panel.html
deleted file mode 100644
index 08ad881..0000000
--- a/app/templates/admin/panel.html
+++ /dev/null
@@ -1,187 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Admin Panel - Flask Files{% endblock %}
-
-{% block content %}
-<div class="container">
-    <div class="admin-panel">
-        <div class="admin-header">
-            <h2><i class="fas fa-cog"></i> Admin Panel</h2>
-        </div>
-
-        <div class="admin-section">
-            <h3>Database Management</h3>
-            <div class="admin-card">
-                <div class="admin-card-header">
-                    <h4>Database Migrations</h4>
-                </div>
-                <div class="admin-card-body">
-                    <p>Run database migrations to update the schema if needed.</p>
-                    <button id="run-migrations-btn" class="btn primary">
-                        <i class="fas fa-database"></i> Run Migrations
-                    </button>
-                    <div id="migration-result" class="mt-3" style="display: none;"></div>
-                </div>
-            </div>
-
-            <div class="admin-card mt-4">
-                <div class="admin-card-header">
-                    <h4>Reset Database</h4>
-                </div>
-                <div class="admin-card-body">
-                    <p class="text-danger">
-                        <strong>WARNING:</strong> This will delete all data and recreate the database structure.
-                        All files, folders, and user accounts will be permanently deleted.
-                    </p>
-                    <button id="reset-db-btn" class="btn danger">
-                        <i class="fas fa-exclamation-triangle"></i> Reset Database
-                    </button>
-                    <div id="reset-result" class="mt-3" style="display: none;"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Confirmation Modal -->
-<div id="confirm-reset-modal" class="modal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3>Confirm Database Reset</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <div class="alert warning">
-                <i class="fas fa-exclamation-triangle"></i>
-                <p>
-                    <strong>WARNING:</strong> You are about to reset the entire database.
-                    This action cannot be undone.
-                </p>
-                <p>All files, folders, users, and settings will be permanently deleted.</p>
-            </div>
-            <p>Type "RESET" in the box below to confirm:</p>
-            <input type="text" id="reset-confirm-text" class="form-control mt-3" placeholder="Type RESET to confirm">
-        </div>
-        <div class="modal-footer">
-            <button class="btn" id="cancel-reset-btn">Cancel</button>
-            <button class="btn danger" id="confirm-reset-btn" disabled>Reset Database</button>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        const migrationsBtn = document.getElementById('run-migrations-btn');
-        const resultDiv = document.getElementById('migration-result');
-        const resetBtn = document.getElementById('reset-db-btn');
-        const resetResultDiv = document.getElementById('reset-result');
-        const resetConfirmText = document.getElementById('reset-confirm-text');
-        const confirmResetBtn = document.getElementById('confirm-reset-btn');
-        const cancelResetBtn = document.getElementById('cancel-reset-btn');
-
-        if (migrationsBtn) {
-            migrationsBtn.addEventListener('click', function () {
-                // Show loading state
-                migrationsBtn.disabled = true;
-                migrationsBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Running...';
-                resultDiv.style.display = 'none';
-
-                // Call the migrations endpoint
-                fetch('/admin/run-migrations', {
-                    method: 'POST',
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                })
-                    .then(response => response.json())
-                    .then(data => {
-                        // Reset button
-                        migrationsBtn.disabled = false;
-                        migrationsBtn.innerHTML = '<i class="fas fa-database"></i> Run Migrations';
-
-                        // Show result
-                        resultDiv.style.display = 'block';
-                        if (data.success) {
-                            resultDiv.innerHTML = '<div class="alert success"><i class="fas fa-check-circle"></i> ' + data.message + '</div>';
-                        } else {
-                            resultDiv.innerHTML = '<div class="alert error"><i class="fas fa-exclamation-circle"></i> ' + data.error + '</div>';
-                        }
-                    })
-                    .catch(error => {
-                        // Error handling
-                        migrationsBtn.disabled = false;
-                        migrationsBtn.innerHTML = '<i class="fas fa-database"></i> Run Migrations';
-                        resultDiv.style.display = 'block';
-                        resultDiv.innerHTML = '<div class="alert error"><i class="fas fa-exclamation-circle"></i> Error: ' + error.message + '</div>';
-                    });
-            });
-        }
-
-        if (resetBtn) {
-            resetBtn.addEventListener('click', function () {
-                // Show confirmation modal
-                openModal('confirm-reset-modal');
-            });
-        }
-
-        if (resetConfirmText) {
-            resetConfirmText.addEventListener('input', function () {
-                confirmResetBtn.disabled = this.value !== 'RESET';
-            });
-        }
-
-        if (cancelResetBtn) {
-            cancelResetBtn.addEventListener('click', function () {
-                closeModal('confirm-reset-modal');
-            });
-        }
-
-        if (confirmResetBtn) {
-            confirmResetBtn.addEventListener('click', function () {
-                // Close modal
-                closeModal('confirm-reset-modal');
-
-                // Show loading state
-                resetBtn.disabled = true;
-                resetBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Resetting...';
-                resetResultDiv.style.display = 'none';
-
-                // Call the reset endpoint
-                fetch('/admin/reset-database', {
-                    method: 'POST',
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                })
-                    .then(response => response.json())
-                    .then(data => {
-                        // Reset button
-                        resetBtn.disabled = false;
-                        resetBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Reset Database';
-
-                        // Show result
-                        resetResultDiv.style.display = 'block';
-                        if (data.success) {
-                            resetResultDiv.innerHTML = '<div class="alert success"><i class="fas fa-check-circle"></i> ' + data.message + '</div>';
-                            // Redirect to login after a delay
-                            setTimeout(function () {
-                                window.location.href = '/auth/login';
-                            }, 3000);
-                        } else {
-                            resetResultDiv.innerHTML = '<div class="alert error"><i class="fas fa-exclamation-circle"></i> ' + data.error + '</div>';
-                        }
-                    })
-                    .catch(error => {
-                        // Error handling
-                        resetBtn.disabled = false;
-                        resetBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Reset Database';
-                        resetResultDiv.style.display = 'block';
-                        resetResultDiv.innerHTML = '<div class="alert error"><i class="fas fa-exclamation-circle"></i> Error: ' + error.message + '</div>';
-                    });
-            });
-        }
-    });
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/app/templates/auth/profile.html b/app/templates/auth/profile.html
index 7706435..66deea2 100644
--- a/app/templates/auth/profile.html
+++ b/app/templates/auth/profile.html
@@ -1,50 +1,238 @@
 {% extends "base.html" %}
 
-{% block title %}User Profile{% endblock %}
+{% block title %}Profile - Flask Files{% endblock %}
+
+{% block extra_css %}
+<style>
+    .profile-container {
+        max-width: 800px;
+        margin: 0 auto;
+    }
+
+    .profile-tabs {
+        display: flex;
+        border-bottom: 1px solid var(--border-color);
+        margin-bottom: 1.5rem;
+    }
+
+    .profile-tab {
+        padding: 0.75rem 1.5rem;
+        cursor: pointer;
+        background: none;
+        border: none;
+        font-weight: 500;
+        border-bottom: 2px solid transparent;
+    }
+
+    .profile-tab.active {
+        color: var(--primary-color);
+        border-bottom-color: var(--primary-color);
+    }
+
+    .tab-content {
+        display: none;
+    }
+
+    .tab-content.active {
+        display: block;
+    }
+
+    .setting-group {
+        margin-bottom: 2rem;
+    }
+
+    .setting-group h3 {
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--border-color);
+    }
+</style>
+{% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="row">
-        <div class="col-md-8 offset-md-2">
-            <div class="card">
-                <div class="card-header">
-                    <h3>User Profile</h3>
-                </div>
-                <div class="card-body">
-                    <div class="row mb-3">
-                        <div class="col-md-3 font-weight-bold">Username:</div>
-                        <div class="col-md-9">{{ user.username }}</div>
-                    </div>
-                    <div class="row mb-3">
-                        <div class="col-md-3 font-weight-bold">Email:</div>
-                        <div class="col-md-9">{{ user.email }}</div>
-                    </div>
-                    <div class="row mb-3">
-                        <div class="col-md-3 font-weight-bold">Member Since:</div>
-                        <div class="col-md-9">{{ user.created_at.strftime('%Y-%m-%d') }}</div>
-                    </div>
-                    <div class="row mb-3">
-                        <div class="col-md-3 font-weight-bold">Account Type:</div>
-                        <div class="col-md-9">{% if user.is_admin %}Administrator{% else %}Regular User{% endif %}</div>
-                    </div>
+<section class="profile-container">
+    <h2>User Profile</h2>
 
-                    <hr>
+    <div class="profile-tabs">
+        <button class="profile-tab active" data-tab="profile">Profile</button>
+        <button class="profile-tab" data-tab="appearance">Appearance</button>
+        <button class="profile-tab" data-tab="security">Security</button>
+    </div>
 
-                    <h4 class="mt-4">Storage Summary</h4>
-                    <div class="row mb-3">
-                        <div class="col-md-3 font-weight-bold">Files:</div>
-                        <div class="col-md-9">{{ user.files.count() }}</div>
-                    </div>
-                    <div class="row mb-3">
-                        <div class="col-md-3 font-weight-bold">Folders:</div>
-                        <div class="col-md-9">{{ user.folders.count() }}</div>
-                    </div>
+    <!-- Profile Tab -->
+    <div class="tab-content active" id="profile-tab">
+        <div class="profile-card">
+            <div class="profile-header">
+                <div class="avatar">
+                    {{ current_user.username[0].upper() }}
                 </div>
-                <div class="card-footer">
-                    <a href="{{ url_for('dashboard.index') }}" class="btn btn-secondary">Back to Dashboard</a>
+                <div class="user-info">
+                    <h3>{{ current_user.username }}</h3>
+                    <p>Member since {{ current_user.created_at.strftime('%B %Y') if current_user.created_at else
+                        'Unknown' }}</p>
                 </div>
             </div>
+
+            <div class="profile-stats">
+                <div class="stat-item">
+                    <span class="stat-value">{{ current_user.files.filter_by(is_folder=False).count() }}</span>
+                    <span class="stat-label">Files</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-value">{{ current_user.files.filter_by(is_folder=True).count() }}</span>
+                    <span class="stat-label">Folders</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-value">{{ current_user.shares.count() }}</span>
+                    <span class="stat-label">Shares</span>
+                </div>
+            </div>
+
+            <div class="setting-group">
+                <h3>Edit Profile</h3>
+                <form id="username-form" method="POST" action="{{ url_for('auth.update_profile') }}">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                    <div class="form-group">
+                        <label for="username">Username</label>
+                        <input type="text" id="username" name="username" class="form-control"
+                            value="{{ current_user.username }}">
+                    </div>
+                    <div class="form-actions">
+                        <button type="submit" class="btn primary">Save Changes</button>
+                    </div>
+                </form>
+            </div>
         </div>
     </div>
-</div>
+
+    <!-- Appearance Tab -->
+    <div class="tab-content" id="appearance-tab">
+        <div class="setting-group">
+            <h3>Theme Settings</h3>
+            <form id="theme-form" method="POST" action="{{ url_for('auth.update_preferences') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <div class="form-group">
+                    <label>Default Theme</label>
+                    <div class="theme-options">
+                        <label class="radio-container">
+                            <input type="radio" name="theme_preference" value="light" {% if theme_preference=='light'
+                                %}checked{% endif %}>
+                            <span class="radio-label">Light</span>
+                        </label>
+                        <label class="radio-container">
+                            <input type="radio" name="theme_preference" value="dark" {% if theme_preference=='dark'
+                                %}checked{% endif %}>
+                            <span class="radio-label">Dark</span>
+                        </label>
+                        <label class="radio-container">
+                            <input type="radio" name="theme_preference" value="system" {% if theme_preference=='system'
+                                or not theme_preference %}checked{% endif %}>
+                            <span class="radio-label">Use System Preference</span>
+                        </label>
+                    </div>
+                </div>
+                <div class="form-actions">
+                    <button type="submit" class="btn primary">Save Preferences</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Security Tab -->
+    <div class="tab-content" id="security-tab">
+        <div class="setting-group">
+            <h3>Change Password</h3>
+            <form id="password-form" method="POST" action="{{ url_for('auth.change_password') }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+                <div class="form-group">
+                    <label for="current_password">Current Password</label>
+                    <input type="password" id="current_password" name="current_password" class="form-control" required>
+                </div>
+                <div class="form-group">
+                    <label for="new_password">New Password</label>
+                    <input type="password" id="new_password" name="new_password" class="form-control" required>
+                    <div class="password-strength" id="password-strength"></div>
+                </div>
+                <div class="form-group">
+                    <label for="confirm_password">Confirm New Password</label>
+                    <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
+                </div>
+                <div class="form-actions">
+                    <button type="submit" class="btn primary">Change Password</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // Tab switching
+        const tabs = document.querySelectorAll('.profile-tab');
+        const tabContents = document.querySelectorAll('.tab-content');
+
+        tabs.forEach(tab => {
+            tab.addEventListener('click', function () {
+                const tabId = this.getAttribute('data-tab');
+
+                // Update active tab
+                tabs.forEach(t => t.classList.remove('active'));
+                this.classList.add('active');
+
+                // Update active content
+                tabContents.forEach(content => {
+                    content.classList.remove('active');
+                    if (content.id === `${tabId}-tab`) {
+                        content.classList.add('active');
+                    }
+                });
+            });
+        });
+
+        // Password strength meter
+        const passwordInput = document.getElementById('new_password');
+        const strengthIndicator = document.getElementById('password-strength');
+
+        if (passwordInput && strengthIndicator) {
+            passwordInput.addEventListener('input', function () {
+                const password = this.value;
+                let strength = 0;
+
+                if (password.length >= 8) strength += 1;
+                if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength += 1;
+                if (password.match(/\d/)) strength += 1;
+                if (password.match(/[^a-zA-Z\d]/)) strength += 1;
+
+                // Update the strength indicator
+                strengthIndicator.className = 'password-strength';
+                if (password.length === 0) {
+                    strengthIndicator.textContent = '';
+                } else if (strength < 2) {
+                    strengthIndicator.textContent = 'Weak';
+                    strengthIndicator.classList.add('weak');
+                } else if (strength < 4) {
+                    strengthIndicator.textContent = 'Moderate';
+                    strengthIndicator.classList.add('moderate');
+                } else {
+                    strengthIndicator.textContent = 'Strong';
+                    strengthIndicator.classList.add('strong');
+                }
+            });
+        }
+
+        // Password confirmation matching
+        const confirmInput = document.getElementById('confirm_password');
+        if (passwordInput && confirmInput) {
+            confirmInput.addEventListener('input', function () {
+                if (passwordInput.value !== this.value) {
+                    this.setCustomValidity('Passwords must match');
+                } else {
+                    this.setCustomValidity('');
+                }
+            });
+        }
+    });
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/auth/settings.html b/app/templates/auth/settings.html
deleted file mode 100644
index 82b38fd..0000000
--- a/app/templates/auth/settings.html
+++ /dev/null
@@ -1,436 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Account Settings - Flask Files{% endblock %}
-
-{% block content %}
-<div class="container">
-    <div class="settings-card">
-        <div class="settings-header">
-            <h2>Account Settings</h2>
-            <a href="{{ url_for('auth.profile') }}" class="btn secondary">
-                <i class="fas fa-user"></i> Back to Profile
-            </a>
-        </div>
-
-        <div class="settings-content">
-            <div class="settings-section">
-                <h3>Appearance</h3>
-                <div class="theme-settings">
-                    <div class="setting-label">Theme</div>
-                    <div class="theme-options">
-                        <button class="theme-btn {% if theme_preference == 'light' %}active{% endif %}"
-                            data-theme="light">
-                            <i class="fas fa-sun"></i> Light
-                        </button>
-                        <button class="theme-btn {% if theme_preference == 'dark' %}active{% endif %}"
-                            data-theme="dark">
-                            <i class="fas fa-moon"></i> Dark
-                        </button>
-                        <button class="theme-btn {% if theme_preference == 'system' %}active{% endif %}"
-                            data-theme="system">
-                            <i class="fas fa-desktop"></i> System
-                        </button>
-                    </div>
-                </div>
-
-                <div class="display-settings">
-                    <div class="setting-group">
-                        <div class="setting-label">File View</div>
-                        <div class="setting-controls">
-                            <div class="view-options">
-                                <button class="view-btn {% if view_preference == 'grid' %}active{% endif %}"
-                                    data-view="grid">
-                                    <i class="fas fa-th"></i> Grid
-                                </button>
-                                <button class="view-btn {% if view_preference == 'list' %}active{% endif %}"
-                                    data-view="list">
-                                    <i class="fas fa-list"></i> List
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="settings-section">
-                <h3>Notifications</h3>
-                <div class="setting-group">
-                    <div class="setting-label">Email Notifications</div>
-                    <div class="setting-controls">
-                        <label class="toggle">
-                            <input type="checkbox" id="email-notifications" {% if notifications.email %}checked{% endif
-                                %}>
-                            <span class="toggle-slider"></span>
-                        </label>
-                    </div>
-                    <div class="setting-description">
-                        Receive email notifications about file shares and new comments
-                    </div>
-                </div>
-            </div>
-
-            <div class="settings-section">
-                <h3>Privacy</h3>
-                <div class="setting-group">
-                    <div class="setting-label">Public Profile</div>
-                    <div class="setting-controls">
-                        <label class="toggle">
-                            <input type="checkbox" id="public-profile" {% if privacy.public_profile %}checked{% endif
-                                %}>
-                            <span class="toggle-slider"></span>
-                        </label>
-                    </div>
-                    <div class="setting-description">
-                        Allow others to see your profile and shared files
-                    </div>
-                </div>
-
-                <div class="setting-group">
-                    <div class="setting-label">Share Statistics</div>
-                    <div class="setting-controls">
-                        <label class="toggle">
-                            <input type="checkbox" id="share-statistics" {% if privacy.share_statistics %}checked{%
-                                endif %}>
-                            <span class="toggle-slider"></span>
-                        </label>
-                    </div>
-                    <div class="setting-description">
-                        Collect anonymous usage statistics to improve the service
-                    </div>
-                </div>
-            </div>
-
-            <div class="settings-section dangerous-zone">
-                <h3>Danger Zone</h3>
-                <p class="warning-text">
-                    These actions are permanent and cannot be undone
-                </p>
-
-                <div class="danger-actions">
-                    <button id="delete-files-btn" class="btn dangerous">
-                        <i class="fas fa-trash-alt"></i> Delete All Files
-                    </button>
-
-                    <button id="delete-account-btn" class="btn dangerous">
-                        <i class="fas fa-user-times"></i> Delete Account
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Delete Files Confirmation Modal -->
-<div id="delete-files-modal" class="modal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3>Delete All Files</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <p class="warning-text">
-                Are you sure you want to delete all your files? This action cannot be undone.
-            </p>
-            <div class="form-group">
-                <label for="delete-files-confirm">Type "DELETE" to confirm</label>
-                <input type="text" id="delete-files-confirm">
-            </div>
-            <div class="form-actions">
-                <button class="btn secondary modal-cancel">Cancel</button>
-                <button id="confirm-delete-files" class="btn dangerous" disabled>Delete All Files</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Delete Account Confirmation Modal -->
-<div id="delete-account-modal" class="modal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3>Delete Account</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <p class="warning-text">
-                Are you sure you want to delete your account? This will permanently delete all your files and personal
-                data.
-            </p>
-            <div class="form-group">
-                <label for="delete-account-confirm">Type "{{ current_user.username }}" to confirm</label>
-                <input type="text" id="delete-account-confirm">
-            </div>
-            <div class="form-actions">
-                <button class="btn secondary modal-cancel">Cancel</button>
-                <button id="confirm-delete-account" class="btn dangerous" disabled>Delete Account</button>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        // Theme settings
-        const themeButtons = document.querySelectorAll('.theme-btn');
-
-        themeButtons.forEach(button => {
-            button.addEventListener('click', function () {
-                const theme = this.dataset.theme;
-                setTheme(theme);
-
-                // Update active button
-                themeButtons.forEach(btn => btn.classList.remove('active'));
-                this.classList.add('active');
-
-                // Save preference
-                fetch('{{ url_for("auth.set_theme") }}', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-Requested-With': 'XMLHttpRequest'
-                    },
-                    body: JSON.stringify({ theme: theme })
-                });
-            });
-        });
-
-        function setTheme(theme) {
-            const html = document.documentElement;
-
-            if (theme === 'light') {
-                html.setAttribute('data-theme', 'light');
-            } else if (theme === 'dark') {
-                html.setAttribute('data-theme', 'dark');
-            } else if (theme === 'system') {
-                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                html.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
-            }
-        }
-
-        // View settings
-        const viewButtons = document.querySelectorAll('.view-btn');
-
-        viewButtons.forEach(button => {
-            button.addEventListener('click', function () {
-                const view = this.dataset.view;
-
-                // Update active button
-                viewButtons.forEach(btn => btn.classList.remove('active'));
-                this.classList.add('active');
-
-                // Save preference
-                localStorage.setItem('files_view', view);
-
-                // Send to server for persistence
-                fetch('{{ url_for("auth.set_view_preference") }}', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-Requested-With': 'XMLHttpRequest'
-                    },
-                    body: JSON.stringify({ view: view })
-                });
-            });
-        });
-
-        // Toggle settings
-        const toggles = document.querySelectorAll('.toggle input[type="checkbox"]');
-
-        toggles.forEach(toggle => {
-            toggle.addEventListener('change', function () {
-                const setting = this.id;
-                const value = this.checked;
-
-                // Save preference
-                fetch('{{ url_for("auth.update_setting") }}', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-Requested-With': 'XMLHttpRequest'
-                    },
-                    body: JSON.stringify({
-                        setting: setting,
-                        value: value
-                    })
-                })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success) {
-                            showAlert('Setting updated successfully', 'success');
-                        } else {
-                            showAlert(data.error || 'Failed to update setting', 'error');
-                            // Revert toggle
-                            this.checked = !value;
-                        }
-                    })
-                    .catch(error => {
-                        showAlert('An error occurred: ' + error, 'error');
-                        // Revert toggle
-                        this.checked = !value;
-                    });
-            });
-        });
-
-        // Delete files functionality
-        const deleteFilesBtn = document.getElementById('delete-files-btn');
-        const deleteFilesModal = document.getElementById('delete-files-modal');
-        const deleteFilesConfirmInput = document.getElementById('delete-files-confirm');
-        const confirmDeleteFilesBtn = document.getElementById('confirm-delete-files');
-
-        deleteFilesBtn.addEventListener('click', function () {
-            openModal(deleteFilesModal);
-            deleteFilesConfirmInput.value = '';
-            confirmDeleteFilesBtn.disabled = true;
-            deleteFilesConfirmInput.focus();
-        });
-
-        deleteFilesConfirmInput.addEventListener('input', function () {
-            confirmDeleteFilesBtn.disabled = this.value !== 'DELETE';
-        });
-
-        confirmDeleteFilesBtn.addEventListener('click', function () {
-            if (deleteFilesConfirmInput.value === 'DELETE') {
-                fetch('{{ url_for("auth.delete_all_files") }}', {
-                    method: 'POST',
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                })
-                    .then(response => response.json())
-                    .then(data => {
-                        closeModal(deleteFilesModal);
-                        if (data.success) {
-                            showAlert('All files have been deleted', 'success');
-                            setTimeout(() => {
-                                window.location.href = '{{ url_for("files.browser") }}';
-                            }, 1500);
-                        } else {
-                            showAlert(data.error || 'Failed to delete files', 'error');
-                        }
-                    })
-                    .catch(error => {
-                        showAlert('An error occurred: ' + error, 'error');
-                    });
-            }
-        });
-
-        // Delete account functionality
-        const deleteAccountBtn = document.getElementById('delete-account-btn');
-        const deleteAccountModal = document.getElementById('delete-account-modal');
-        const deleteAccountConfirmInput = document.getElementById('delete-account-confirm');
-        const confirmDeleteAccountBtn = document.getElementById('confirm-delete-account');
-        const usernameToConfirm = "{{ current_user.username }}";
-
-        deleteAccountBtn.addEventListener('click', function () {
-            openModal(deleteAccountModal);
-            deleteAccountConfirmInput.value = '';
-            confirmDeleteAccountBtn.disabled = true;
-            deleteAccountConfirmInput.focus();
-        });
-
-        deleteAccountConfirmInput.addEventListener('input', function () {
-            confirmDeleteAccountBtn.disabled = this.value !== usernameToConfirm;
-        });
-
-        confirmDeleteAccountBtn.addEventListener('click', function () {
-            if (deleteAccountConfirmInput.value === usernameToConfirm) {
-                fetch('{{ url_for("auth.delete_account") }}', {
-                    method: 'POST',
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                })
-                    .then(response => response.json())
-                    .then(data => {
-                        closeModal(deleteAccountModal);
-                        if (data.success) {
-                            showAlert('Your account has been deleted', 'success');
-                            setTimeout(() => {
-                                window.location.href = '{{ url_for("auth.logout") }}';
-                            }, 1500);
-                        } else {
-                            showAlert(data.error || 'Failed to delete account', 'error');
-                        }
-                    })
-                    .catch(error => {
-                        showAlert('An error occurred: ' + error, 'error');
-                    });
-            }
-        });
-
-        // Modal utilities
-        function openModal(modal) {
-            modal.classList.add('visible');
-            document.body.classList.add('modal-open');
-        }
-
-        function closeModal(modal) {
-            modal.classList.remove('visible');
-            document.body.classList.remove('modal-open');
-        }
-
-        // Close modals when clicking outside or on close button
-        document.addEventListener('click', function (e) {
-            if (e.target.classList.contains('modal')) {
-                closeModal(e.target);
-            } else if (e.target.classList.contains('modal-close') || e.target.classList.contains('modal-cancel')) {
-                const modal = e.target.closest('.modal');
-                closeModal(modal);
-            }
-        });
-
-        // Escape key to close modals
-        document.addEventListener('keydown', function (e) {
-            if (e.key === 'Escape') {
-                document.querySelectorAll('.modal.visible').forEach(modal => {
-                    closeModal(modal);
-                });
-            }
-        });
-
-        // Helper function to show alerts
-        function showAlert(message, type = 'info') {
-            // Create alerts container if it doesn't exist
-            let alertsContainer = document.querySelector('.alerts');
-            if (!alertsContainer) {
-                alertsContainer = document.createElement('div');
-                alertsContainer.className = 'alerts';
-                document.body.appendChild(alertsContainer);
-            }
-
-            // Create alert
-            const alert = document.createElement('div');
-            alert.className = `alert ${type}`;
-            alert.innerHTML = `
-            <div class="alert-content">${message}</div>
-            <button class="close" aria-label="Close">&times;</button>
-        `;
-
-            // Add to container
-            alertsContainer.appendChild(alert);
-
-            // Setup dismiss
-            const closeBtn = alert.querySelector('.close');
-            closeBtn.addEventListener('click', function () {
-                alert.classList.add('fade-out');
-                setTimeout(() => {
-                    alert.remove();
-                }, 300);
-            });
-
-            // Auto dismiss
-            setTimeout(() => {
-                if (alert.parentNode) {
-                    alert.classList.add('fade-out');
-                    setTimeout(() => {
-                        if (alert.parentNode) {
-                            alert.remove();
-                        }
-                    }, 300);
-                }
-            }, 5000);
-        }
-    });
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/app/templates/base.html b/app/templates/base.html
index a4e4a36..4f367fe 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,31 +1,16 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="{{ theme_preference or 'system' }}">
+<html lang="en" data-theme="light">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Flask Files{% endblock %}</title>
 
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
-
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
-
     <!-- Classless CSS Framework -->
     <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/digitallytailored/classless@latest/classless.min.css"> -->
 
     <!-- Custom CSS -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
 
     <!-- Font Awesome Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@@ -33,132 +18,83 @@
     {% block extra_css %}{% endblock %}
     <!-- JavaScript -->
 
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // Dark mode toggle button
+            const darkModeToggle = document.getElementById('darkModeToggle');
+
+            function setColorScheme(scheme) {
+                document.documentElement.setAttribute('color-scheme', scheme);
+                localStorage.setItem('color-scheme', scheme);
+            }
+
+            function getColorScheme() {
+                let scheme = localStorage.getItem('color-scheme');
+                if (scheme) {
+                    return scheme;
+                }
+                return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            }
+
+            setColorScheme(getColorScheme());
+
+            darkModeToggle.addEventListener('click', function () {
+                const newScheme = getColorScheme() === 'dark' ? 'light' : 'dark';
+                setColorScheme(newScheme);
+            });
+
+            darkModeToggle.checked = getColorScheme() === 'dark';
+        });
+    </script>
     {% block extra_js %}{% endblock %}
 </head>
 
 <body>
-    {% if current_user.is_authenticated %}
-    <!-- Global drop zone overlay - hidden by default -->
-    <div id="global-dropzone" class="global-dropzone">
-        <div class="dropzone-content">
-            <div class="dropzone-icon">
-                <i class="fas fa-cloud-upload-alt fa-3x"></i>
+    <header id="main-header">
+        <nav>
+            <div class="logo">
+                <h1><a href="{{ url_for('dashboard.index') }}">Flask Files</a></h1>
             </div>
-            <h3>Drop Files to Upload</h3>
-            <p>Files will be instantly uploaded to current folder</p>
-        </div>
-    </div>
+            <ul>
+                <li><a href="{{ url_for('dashboard.index') }}"><i class="fas fa-chart-pie"></i> Dashboard</a></li>
+                <li><a href="{{ url_for('files.browser') }}"><i class="fas fa-folder"></i> Files</a></li>
+                {% if current_user.is_authenticated %}
+                <li><a href="{{ url_for('auth.profile') }}"><i class="fas fa-user"></i> {{ current_user.username }}</a>
+                </li>
+                <li><a href="{{ url_for('auth.logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
+                {% else %}
+                <li><a href="{{ url_for('auth.login') }}"><i class="fas fa-sign-in-alt"></i> Login</a></li>
+                {% endif %}
+                <li>
+                    <button id="darkModeToggle" class="toggle-button">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </li>
+            </ul>
+        </nav>
+    </header>
 
-    <!-- Global upload progress toast -->
-    <div id="upload-toast" class="upload-toast">
-        <div class="upload-toast-header">
-            <i class="fas fa-cloud-upload-alt"></i>
-            <span>Uploading Files</span>
-            <button id="upload-toast-close" class="upload-toast-close">&times;</button>
-        </div>
-        <div class="upload-toast-body">
-            <div class="upload-toast-progress-info">
-                <span id="upload-toast-file">Processing...</span>
-                <span id="upload-toast-percentage">0%</span>
-            </div>
-            <div class="upload-toast-progress-bar-container">
-                <div id="upload-toast-progress-bar" class="upload-toast-progress-bar"></div>
-            </div>
-        </div>
-    </div>
-    {% endif %}
-
-    <!-- Navigation -->
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-        <div class="container">
-            <a class="navbar-brand" href="{{ url_for('dashboard.index') }}">
-                <i class="fas fa-folder-open mr-2"></i>
-                Flask Files
-            </a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-            <div class="collapse navbar-collapse" id="navbarContent">
-                <ul class="navbar-nav ml-auto">
-                    {% if current_user.is_authenticated %}
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('dashboard.index') }}">
-                            <i class="fas fa-tachometer-alt mr-1"></i> Dashboard
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('files.browser') }}">
-                            <i class="fas fa-folder mr-1"></i> My Files
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('files.upload') }}">
-                            <i class="fas fa-upload mr-1"></i> Upload
-                        </a>
-                    </li>
-                    {% if current_user.is_admin %}
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('admin.index') }}">
-                            <i class="fas fa-cog mr-1"></i> Admin
-                        </a>
-                    </li>
-                    {% endif %}
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
-                            <i class="fas fa-user-circle mr-1"></i> {{ current_user.username }}
-                        </a>
-                        <div class="dropdown-menu dropdown-menu-right">
-                            <a class="dropdown-item" href="{{ url_for('auth.profile') }}">
-                                <i class="fas fa-id-card mr-2"></i> Profile
-                            </a>
-                            <div class="dropdown-divider"></div>
-                            <a class="dropdown-item" href="{{ url_for('auth.logout') }}">
-                                <i class="fas fa-sign-out-alt mr-2"></i> Logout
-                            </a>
-                        </div>
-                    </li>
-                    {% else %}
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('auth.login') }}">
-                            <i class="fas fa-sign-in-alt mr-1"></i> Login
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{ url_for('auth.register') }}">
-                            <i class="fas fa-user-plus mr-1"></i> Register
-                        </a>
-                    </li>
-                    {% endif %}
-                </ul>
-            </div>
-        </div>
-    </nav>
-
-    <!-- Flash Messages -->
-    <div class="container mt-4">
+    <main>
         {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
-        {% for category, message in messages %}
-        <div class="alert alert-{{ category if category != 'message' else 'info' }} alert-dismissible fade show">
-            {{ message }}
-            <button type="button" class="close" data-dismiss="alert">&times;</button>
-        </div>
-        {% endfor %}
+        <section class="alerts">
+            {% for category, message in messages %}
+            <div class="alert {{ category }}">
+                {{ message }}
+                <button class="close" aria-label="Close">&times;</button>
+            </div>
+            {% endfor %}
+        </section>
         {% endif %}
         {% endwith %}
-    </div>
 
-    <!-- Main Content -->
-    <main role="main" class="container mt-3">
-        {% block content %}{% endblock %}
+        <section class="content">
+            {% block content %}{% endblock %}
+        </section>
     </main>
 
-    <!-- Footer -->
-    <footer class="footer mt-auto py-3 bg-light">
-        <div class="container text-center">
-            <span class="text-muted">&copy; 2023 Flask Files. All rights reserved.</span>
-        </div>
+    <footer>
+        <p>&copy; {{ now.year }} Flask Files - A Simple File Manager</p>
     </footer>
 
     <!-- Add this right before the closing </body> tag -->
@@ -209,24 +145,6 @@
             </div>
         </div>
     </div>
-
-    <!-- Common JS file with shared functions -->
-    <script src="{{ url_for('static', filename='js/common.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/context-menu.js') }}"></script>
-
-    {% if current_user.is_authenticated %}
-    <script src="{{ url_for('static', filename='js/quick-upload.js') }}"></script>
-    {% endif %}
-
-    <!-- JavaScript -->
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
-
-    <!-- Custom JavaScript -->
-    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
-
-    {% block scripts %}{% endblock %}
 </body>
 
 </html>
\ No newline at end of file
diff --git a/app/templates/dashboard/index.html b/app/templates/dashboard/index.html
deleted file mode 100644
index 21058c1..0000000
--- a/app/templates/dashboard/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Dashboard{% endblock %}
-
-{% block content %}
-<div class="container">
-    <h1 class="mb-4">Dashboard</h1>
-
-    <!-- Storage Summary Cards -->
-    <div class="row">
-        <div class="col-md-4 mb-4">
-            <div class="card border-primary">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-4 text-center">
-                            <i class="fas fa-file fa-3x text-primary"></i>
-                        </div>
-                        <div class="col-md-8">
-                            <h5 class="card-title">Files</h5>
-                            <h3>{{ file_count }}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-4 mb-4">
-            <div class="card border-success">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-4 text-center">
-                            <i class="fas fa-folder fa-3x text-success"></i>
-                        </div>
-                        <div class="col-md-8">
-                            <h5 class="card-title">Folders</h5>
-                            <h3>{{ folder_count }}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-md-4 mb-4">
-            <div class="card border-info">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-4 text-center">
-                            <i class="fas fa-hdd fa-3x text-info"></i>
-                        </div>
-                        <div class="col-md-8">
-                            <h5 class="card-title">Storage Used</h5>
-                            <h3>{{ storage_used_formatted }}</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Recent Files -->
-    <div class="card mt-4">
-        <div class="card-header bg-light">
-            <h4 class="mb-0">Recent Files</h4>
-        </div>
-        <div class="card-body">
-            {% if recent_files %}
-            <table class="table table-hover">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Size</th>
-                        <th>Uploaded</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for file in recent_files %}
-                    <tr>
-                        <td>
-                            <i class="fas {{ file.icon_class }} mr-2"></i>
-                            <a href="{{ url_for('files.download', file_id=file.id) }}">{{ file.name }}</a>
-                        </td>
-                        <td>{{ file.type }}</td>
-                        <td>{{ file.size|filesizeformat }}</td>
-                        <td>{{ file.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-            {% else %}
-            <div class="alert alert-info">
-                You haven't uploaded any files yet.
-                <a href="{{ url_for('files.upload') }}" class="alert-link">Upload your first file</a>
-            </div>
-            {% endif %}
-        </div>
-        <div class="card-footer">
-            <a href="{{ url_for('files.browser') }}" class="btn btn-primary">
-                <i class="fas fa-folder-open mr-1"></i> Browse Files
-            </a>
-            <a href="{{ url_for('files.upload') }}" class="btn btn-success">
-                <i class="fas fa-upload mr-1"></i> Upload Files
-            </a>
-        </div>
-    </div>
-</div>
-{% endblock %}
\ No newline at end of file
diff --git a/app/templates/files/browser.html b/app/templates/files/browser.html
index 294dbcf..a2455ca 100644
--- a/app/templates/files/browser.html
+++ b/app/templates/files/browser.html
@@ -2,120 +2,225 @@
 
 {% block title %}File Browser - Flask Files{% endblock %}
 
-{% block extra_css %}
-<style>
-    /* Additional page-specific styles if needed */
-</style>
-{% endblock %}
-
 {% block content %}
-<div class="container">
-    <div class="browser-container">
-        <div class="browser-header">
-            <div class="browser-title">
-                <i class="fas fa-folder-open"></i>
-                <h2>{% if current_folder %}{{ current_folder.name }}{% else %}My Files{% endif %}</h2>
-            </div>
-            <div class="browser-actions">
-                <div class="search-container">
-                    <form action="{{ url_for('files.browser') }}" method="get">
-                        <input type="text" name="q" placeholder="Search files..."
-                            value="{{ request.args.get('q', '') }}">
-                        <button type="submit" class="search-btn">
-                            <i class="fas fa-search"></i>
+<section class="file-browser">
+    <div class="browser-header">
+        <h2>File Browser</h2>
+        <!-- <div class="browser-actions"> -->
+        <!-- <a href="{{ url_for('files.upload', folder=current_folder.id if current_folder else None) }}"
+                class="btn primary">
+                <i class="fas fa-cloud-upload-alt"></i> Upload
+            </a> -->
+        <!-- <button class="btn" id="new-folder-btn">
+                <i class="fas fa-folder-plus"></i> New Folder
+            </button> -->
+        <!-- </div> -->
+    </div>
+
+    <div class="path-nav">
+        <a href="{{ url_for('files.browser') }}" class="path-item">
+            <i class="fas fa-home"></i> Home
+        </a>
+        {% for folder in breadcrumbs %}
+        <span class="path-separator">/</span>
+        <a href="{{ url_for('files.browser', folder=folder.id) }}" class="path-item">{{ folder.name }}</a>
+        {% endfor %}
+    </div>
+
+    {% if folders or files %}
+    <div class="files-container">
+        {% if folders %}
+        <div class="folder-section">
+            <h3>Folders</h3>
+            <div class="files-list">
+                {% for folder in folders %}
+                <div class="file-item folder">
+                    <a href="{{ url_for('files.browser', folder=folder.id) }}" class="file-link">
+                        <div class="file-icon">
+                            <i class="fas fa-folder fa-2x"></i>
+                        </div>
+                        <div class="file-name">{{ folder.name }}</div>
+                    </a>
+                    <div class="file-actions">
+                        <button class="action-btn rename" data-id="{{ folder.id }}" title="Rename">
+                            <i class="fas fa-edit"></i>
                         </button>
-                    </form>
+                        <button class="action-btn delete" data-id="{{ folder.id }}" title="Delete">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
                 </div>
-                <div class="view-toggle">
-                    <button id="grid-view-btn" class="view-btn active" title="Grid View">
-                        <i class="fas fa-th"></i>
-                    </button>
-                    <button id="list-view-btn" class="view-btn" title="List View">
-                        <i class="fas fa-list"></i>
-                    </button>
-                </div>
-                <a href="{% if current_folder %}{{ url_for('files.upload', folder_id=current_folder.id) }}{% else %}{{ url_for('files.upload') }}{% endif %}"
-                    class="btn primary">
-                    <i class="fas fa-upload"></i> Upload
-                </a>
-                <button id="new-folder-btn" class="btn secondary">
-                    <i class="fas fa-folder-plus"></i> New Folder
-                </button>
+                {% endfor %}
             </div>
         </div>
+        {% endif %}
 
-        <div class="breadcrumbs">
-            <a href="{{ url_for('files.browser') }}" class="breadcrumb-item">
-                <i class="fas fa-home"></i> Home
-            </a>
-            {% if breadcrumbs %}
-            {% for folder in breadcrumbs %}
-            <span class="breadcrumb-separator">/</span>
-            <a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="breadcrumb-item">
-                {{ folder.name }}
-            </a>
-            {% endfor %}
-            {% endif %}
-        </div>
-
-        <div id="files-container" class="files-container grid-view">
-            {% include 'files/partials/folder_contents.html' %}
-        </div>
-    </div>
-</div>
-
-<!-- New Folder Modal -->
-<div id="new-folder-modal" class="modal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3>Create New Folder</h3>
-            <button class="modal-close">&times;</button>
-        </div>
-        <div class="modal-body">
-            <form id="new-folder-form" action="{{ url_for('files.create_folder') }}" method="post">
-                <div class="form-group">
-                    <label for="folder-name">Folder Name</label>
-                    <input type="text" id="folder-name" name="name" required placeholder="Enter folder name">
-                    <input type="hidden" id="parent-folder-id" name="parent_id"
-                        value="{% if current_folder %}{{ current_folder.id }}{% endif %}">
+        {% if files %}
+        <div class="file-section">
+            <h3>Files</h3>
+            <div class="files-list">
+                {% for file in files %}
+                <div class="file-item">
+                    <div class="file-link">
+                        <div class="file-icon">
+                            {% if file.name.endswith('.pdf') %}<i class="fas fa-file-pdf fa-2x"></i>
+                            {% elif file.name.endswith(('.jpg', '.jpeg', '.png', '.gif')) %}<i
+                                class="fas fa-file-image fa-2x"></i>
+                            {% elif file.name.endswith(('.mp3', '.wav', '.flac')) %}<i
+                                class="fas fa-file-audio fa-2x"></i>
+                            {% elif file.name.endswith(('.mp4', '.mov', '.avi')) %}<i
+                                class="fas fa-file-video fa-2x"></i>
+                            {% elif file.name.endswith(('.doc', '.docx')) %}<i class="fas fa-file-word fa-2x"></i>
+                            {% elif file.name.endswith(('.xls', '.xlsx')) %}<i class="fas fa-file-excel fa-2x"></i>
+                            {% elif file.name.endswith(('.ppt', '.pptx')) %}<i class="fas fa-file-powerpoint fa-2x"></i>
+                            {% elif file.name.endswith('.zip') %}<i class="fas fa-file-archive fa-2x"></i>
+                            {% else %}<i class="fas fa-file fa-2x"></i>{% endif %}
+                        </div>
+                        <div class="file-details">
+                            <div class="file-name">{{ file.name }}</div>
+                            <div class="file-meta">
+                                <span class="file-size">{{ (file.size / 1024)|round(1) }} KB</span>
+                                <span class="file-date">{{ file.updated_at.strftime('%b %d, %Y') }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="file-actions">
+                        <a href="#" class="action-btn download" data-id="{{ file.id }}" title="Download">
+                            <i class="fas fa-download"></i>
+                        </a>
+                        <a href="#" class="action-btn share" data-id="{{ file.id }}" title="Share">
+                            <i class="fas fa-share-alt"></i>
+                        </a>
+                        <button class="action-btn rename" data-id="{{ file.id }}" title="Rename">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="action-btn delete" data-id="{{ file.id }}" title="Delete">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
                 </div>
-                <div class="form-actions">
-                    <button type="button" class="btn modal-cancel">Cancel</button>
-                    <button type="submit" class="btn primary">Create Folder</button>
-                </div>
-            </form>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
+    </div>
+    {% else %}
+    <div class="empty-state">
+        <div class="empty-icon">
+            <i class="fas fa-folder-open fa-3x"></i>
+        </div>
+        <p>This folder is empty</p>
+        <p>Upload files or create a new folder to get started</p>
+        <div class="empty-actions">
+            <a href="{{ url_for('files.upload', folder=current_folder.id if current_folder else None) }}"
+                class="btn primary">
+                <i class=" fas fa-cloud-upload-alt"></i> Upload
+            </a>
+            <button class="btn" id="empty-new-folder-btn">
+                <i class="fas fa-folder-plus"></i> New Folder
+            </button>
         </div>
     </div>
-</div>
-
-<!-- Context Menu -->
-<div id="context-menu" class="context-menu">
-    <div class="context-menu-item" data-action="open" data-for="folder">
-        <i class="fas fa-folder-open"></i> Open
-    </div>
-    <div class="context-menu-item" data-action="download" data-for="file">
-        <i class="fas fa-download"></i> Download
-    </div>
-    <div class="context-menu-item" data-action="share" data-for="file">
-        <i class="fas fa-share-alt"></i> Share
-    </div>
-    <div class="context-menu-item" data-action="rename" data-for="all">
-        <i class="fas fa-pencil-alt"></i> Rename
-    </div>
-    <div class="context-menu-item" data-action="delete" data-for="all">
-        <i class="fas fa-trash"></i> Delete
-    </div>
-</div>
+    {% endif %}
+</section>
+{% endblock %}
 
 {% block extra_js %}
+<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
 <script>
-    // Add folder entrance animation
     document.addEventListener('DOMContentLoaded', function () {
-        const filesContainer = document.getElementById('files-container');
-        if (filesContainer) {
-            filesContainer.classList.add('folder-enter-active');
+        // New folder functionality
+        const newFolderBtn = document.getElementById('new-folder-btn');
+        const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');
+
+        function showNewFolderPrompt() {
+            const folderName = prompt('Enter folder name:');
+            if (folderName) {
+                createNewFolder(folderName);
+            }
         }
+
+        function createNewFolder(name) {
+            const formData = new FormData();
+            formData.append('name', name);
+
+            {% if current_folder %}
+            formData.append('parent_id', '{{ current_folder.id }}');
+            {% endif %}
+
+            fetch('/files/create_folder', {
+                method: 'POST',
+                body: formData,
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        window.location.reload();
+                    } else {
+                        alert(data.error || 'Failed to create folder');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('An error occurred while creating the folder');
+                });
+        }
+
+        if (newFolderBtn) {
+            newFolderBtn.addEventListener('click', showNewFolderPrompt);
+        }
+
+        if (emptyNewFolderBtn) {
+            emptyNewFolderBtn.addEventListener('click', showNewFolderPrompt);
+        }
+
+        // Setup dismiss
+        const closeBtn = alert.querySelector('.close');
+        closeBtn.addEventListener('click', function () {
+            alert.classList.add('fade-out');
+            setTimeout(() => {
+                alert.remove();
+            }, 300);
+        });
+
+        // Auto dismiss
+        setTimeout(() => {
+            if (alert.parentNode) {
+                alert.classList.add('fade-out');
+                setTimeout(() => {
+                    if (alert.parentNode) {
+                        alert.remove();
+                    }
+                }, 300);
+            }
+        }, 5000);
     });
+
+    // Helper functions
+    function formatSize(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];
+    }
+
+    function formatDate(dateString) {
+        if (!dateString) return 'Unknown';
+        const date = new Date(dateString);
+        return date.toLocaleString();
+    }
+
+    function escapeHtml(unsafe) {
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
 </script>
-{% endblock %}
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/files/partials/folder_contents.html b/app/templates/files/partials/folder_contents.html
index d7f823a..5119c96 100644
--- a/app/templates/files/partials/folder_contents.html
+++ b/app/templates/files/partials/folder_contents.html
@@ -1,5 +1,5 @@
 {% if folders or files %}
-<div class="files-grid">
+<div class="files-grid grid-view">
     {% if folders %}
     {% for folder in folders %}
     <a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="folder-item" data-id="{{ folder.id }}">
@@ -9,19 +9,10 @@
         <div class="item-info">
             <div class="item-name">{{ folder.name }}</div>
             <div class="item-details">
-                <span class="item-count">{{ folder.children.count() if folder.children is defined else
-                    folder.files.count() }} items</span>
-                <span class="item-date">{{ folder.updated_at.strftime('%Y-%m-%d') }}</span>
+                <span class="item-count">{{ folder.files.count() }} items</span>
+                <span class="item-date">{{ folder.created_at.strftime('%Y-%m-%d') }}</span>
             </div>
         </div>
-        <div class="file-actions">
-            <button class="action-btn edit" title="Rename">
-                <i class="fas fa-pencil-alt"></i>
-            </button>
-            <button class="action-btn delete" title="Delete">
-                <i class="fas fa-trash"></i>
-            </button>
-        </div>
     </a>
     {% endfor %}
     {% endif %}
@@ -30,26 +21,15 @@
     {% for file in files %}
     <a href="{{ url_for('files.download', file_id=file.id) }}" class="file-item" data-id="{{ file.id }}">
         <div class="item-icon">
-            <i class="fas {{ file.icon_class }}"></i>
+            <i class="fas {{ file_icon(file.mime_type, file.name) }}"></i>
         </div>
         <div class="item-info">
             <div class="item-name">{{ file.name }}</div>
             <div class="item-details">
-                <span class="item-size">{{ file.size|filesizeformat }}</span>
-                <span class="item-date">{{ file.updated_at.strftime('%Y-%m-%d') }}</span>
+                <span class="item-size">{{ format_size(file.size) }}</span>
+                <span class="item-date">{{ file.created_at.strftime('%Y-%m-%d') }}</span>
             </div>
         </div>
-        <div class="file-actions">
-            <button class="action-btn download" title="Download">
-                <i class="fas fa-download"></i>
-            </button>
-            <button class="action-btn share" title="Share">
-                <i class="fas fa-share-alt"></i>
-            </button>
-            <button class="action-btn delete" title="Delete">
-                <i class="fas fa-trash"></i>
-            </button>
-        </div>
     </a>
     {% endfor %}
     {% endif %}
@@ -63,14 +43,5 @@
         <h3>This folder is empty</h3>
         <p>Upload files or create a folder to get started</p>
     </div>
-    <div class="empty-actions">
-        <a href="{{ url_for('files.upload', folder_id=current_folder.id if current_folder else None) }}"
-            class="btn primary">
-            <i class="fas fa-upload"></i> Upload
-        </a>
-        <button class="btn" id="empty-new-folder-btn">
-            <i class="fas fa-folder-plus"></i> New Folder
-        </button>
-    </div>
 </div>
 {% endif %}
\ No newline at end of file
diff --git a/app/templates/files/upload.html b/app/templates/files/upload.html
index 02d89bb..72b51db 100644
--- a/app/templates/files/upload.html
+++ b/app/templates/files/upload.html
@@ -3,222 +3,562 @@
 {% block title %}Upload Files - Flask Files{% endblock %}
 
 {% block extra_css %}
-<style>
-    .upload-container {
-        background: var(--card-bg);
-        border-radius: var(--border-radius);
-        padding: 1.5rem;
-        margin-bottom: 2rem;
-        box-shadow: var(--shadow-sm);
-    }
-
-    .upload-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1rem;
-    }
-
-    .dropzone {
-        border: 2px dashed var(--border-color);
-        border-radius: var(--border-radius);
-        padding: 2rem;
-        text-align: center;
-        margin-bottom: 1.5rem;
-        cursor: pointer;
-        transition: all 0.3s ease;
-    }
-
-    .dropzone.highlight {
-        border-color: var(--primary-color);
-        background-color: var(--primary-color-light);
-    }
-
-    .dropzone-icon {
-        font-size: 3rem;
-        color: var(--text-muted);
-        margin-bottom: 1rem;
-    }
-
-    .file-inputs {
-        display: none;
-    }
-
-    .progress-container {
-        display: none;
-        margin-top: 1.5rem;
-    }
-
-    .progress-info {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 0.5rem;
-    }
-
-    .progress-bar-container {
-        height: 8px;
-        background-color: var(--bg-light);
-        border-radius: 4px;
-        overflow: hidden;
-    }
-
-    .progress-bar {
-        height: 100%;
-        background-color: var(--primary-color);
-        width: 0%;
-        transition: width 0.3s ease;
-    }
-
-    .upload-files-list {
-        margin-top: 1.5rem;
-        max-height: 300px;
-        overflow-y: auto;
-    }
-
-    .file-item {
-        display: flex;
-        align-items: center;
-        padding: 0.75rem;
-        border-bottom: 1px solid var(--border-color);
-    }
-
-    .file-item:last-child {
-        border-bottom: none;
-    }
-
-    .file-item-icon {
-        margin-right: 1rem;
-        color: var(--text-muted);
-    }
-
-    .file-item-details {
-        flex: 1;
-    }
-
-    .file-item-name {
-        margin-bottom: 0.25rem;
-        word-break: break-all;
-    }
-
-    .file-item-meta {
-        font-size: 0.85rem;
-        color: var(--text-muted);
-    }
-
-    .file-item-status {
-        margin-left: 1rem;
-    }
-
-    .status-pending {
-        color: var(--text-muted);
-    }
-
-    .status-uploading {
-        color: var(--primary-color);
-    }
-
-    .status-success {
-        color: var(--success-color);
-    }
-
-    .status-error {
-        color: var(--danger-color);
-    }
-</style>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/upload.css') }}">
 {% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="upload-container">
-        <div class="upload-header">
-            <h2>Upload Files</h2>
-            <div>
-                <a href="{{ url_for('files.browser', folder_id=parent_folder.id if parent_folder else None) }}"
-                    class="btn secondary">
-                    <i class="fas fa-arrow-left"></i> Back to Files
-                </a>
-            </div>
-        </div>
-
-        <div class="upload-tabs">
-            <button class="upload-tab active" data-tab="file-upload-tab">
-                <i class="fas fa-file-upload"></i> File Upload
-            </button>
-            <button class="upload-tab" data-tab="folder-upload-tab">
-                <i class="fas fa-folder-plus"></i> Folder Upload
-            </button>
-        </div>
-
-        <div class="tab-content active" id="file-upload-tab">
-            <div id="file-dropzone" class="dropzone">
-                <div class="dropzone-icon">
-                    <i class="fas fa-cloud-upload-alt"></i>
-                </div>
-                <h3>Drag & Drop Files Here</h3>
-                <p>Or click to browse your device</p>
-                <button id="file-select-btn" class="btn primary">Select Files</button>
-                <form id="file-upload-form" method="post" enctype="multipart/form-data">
-                    <input type="hidden" name="parent_folder_id"
-                        value="{% if parent_folder %}{{ parent_folder.id }}{% endif %}">
-                    <input type="file" id="file-input" name="files[]" multiple style="display: none;">
-                </form>
-            </div>
-
-            <div class="upload-progress">
-                <div class="progress-info">
-                    <div class="progress-text">Upload Progress</div>
-                    <div class="progress-percentage" id="progress-percentage">0%</div>
-                </div>
-                <div class="progress-bar-container">
-                    <div class="progress-bar" id="progress-bar"></div>
-                </div>
-                <div class="progress-details">
-                    <div class="progress-speed" id="upload-speed">0 KB/s</div>
-                    <div class="progress-size" id="uploaded-size">0 KB / 0 KB</div>
-                    <div class="progress-time" id="time-remaining">Calculating...</div>
-                </div>
-            </div>
-
-            <div id="file-list" class="file-list"></div>
-        </div>
-
-        <div class="tab-content" id="folder-upload-tab">
-            <div id="folder-dropzone" class="dropzone">
-                <div class="dropzone-icon">
-                    <i class="fas fa-folder-open"></i>
-                </div>
-                <h3>Drag & Drop a Folder Here</h3>
-                <p>Or click to browse your device</p>
-                <button id="folder-select-btn" class="btn primary">Select Folder</button>
-                <form id="folder-upload-form" method="post" enctype="multipart/form-data">
-                    <input type="hidden" name="parent_folder_id"
-                        value="{% if parent_folder %}{{ parent_folder.id }}{% endif %}">
-                    <input type="file" id="folder-input" name="files[]" webkitdirectory directory multiple
-                        style="display: none;">
-                </form>
-            </div>
-
-            <div class="upload-progress">
-                <div class="progress-info">
-                    <div class="progress-text">Upload Progress</div>
-                    <div class="progress-percentage" id="folder-progress-percentage">0%</div>
-                </div>
-                <div class="progress-bar-container">
-                    <div class="progress-bar" id="folder-progress-bar"></div>
-                </div>
-                <div class="progress-details">
-                    <div class="progress-speed" id="folder-upload-speed">0 KB/s</div>
-                    <div class="progress-size" id="folder-uploaded-size">0 KB / 0 KB</div>
-                    <div class="progress-time" id="folder-time-remaining">Calculating...</div>
-                </div>
-            </div>
-
-            <div id="folder-file-list" class="file-list"></div>
+<section class="upload-container">
+    <div class="upload-header">
+        <h2>Upload Files</h2>
+        <div class="upload-location">
+            <span>Uploading to:</span>
+            {% if parent_folder %}
+            <a href="{{ url_for('files.browser', folder_id=parent_folder.id) }}">{{ parent_folder.name }}</a>
+            {% else %}
+            <a href="{{ url_for('files.browser') }}">Root</a>
+            {% endif %}
         </div>
     </div>
-</div>
+
+    <div class="upload-dropzone" id="dropzone">
+        <div class="upload-icon-wrapper">
+            <i class="fas fa-cloud-upload-alt upload-icon"></i>
+        </div>
+        <div class="upload-text">
+            <p class="upload-primary-text">Drag & drop files or folders here</p>
+            <p class="upload-secondary-text">or</p>
+            <div class="upload-buttons">
+                <label class="btn primary">
+                    <i class="fas fa-file"></i> Select Files
+                    <input type="file" name="files[]" multiple id="file-input" style="display: none">
+                </label>
+                <label class="btn">
+                    <i class="fas fa-folder"></i> Select Folder
+                    <input type="file" name="folders[]" webkitdirectory directory id="folder-input"
+                        style="display: none">
+                </label>
+            </div>
+            <p class="upload-hint">Files will upload automatically when dropped or selected</p>
+        </div>
+    </div>
+
+    <div class="upload-progress-container" id="progress-container" style="display: none;">
+        <h3>Upload Progress</h3>
+        <div class="progress-overall">
+            <div class="progress-header">
+                <span>Overall Progress</span>
+                <span id="progress-percentage">0%</span>
+            </div>
+            <div class="progress-bar-container">
+                <div class="progress-bar" id="progress-bar"></div>
+            </div>
+        </div>
+
+        <div class="upload-stats">
+            <div class="stat-item">
+                <i class="fas fa-tachometer-alt"></i>
+                <span id="upload-speed">0 KB/s</span>
+            </div>
+            <div class="stat-item">
+                <i class="fas fa-file-upload"></i>
+                <span id="uploaded-size">0 KB / 0 KB</span>
+            </div>
+            <div class="stat-item">
+                <i class="fas fa-clock"></i>
+                <span id="time-remaining">calculating...</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="upload-list" id="upload-list">
+        <h3>Files (<span id="file-count">0</span>)</h3>
+        <div id="file-items" class="file-items"></div>
+        <div id="empty-message" class="empty-message">
+            <p>No files selected yet</p>
+        </div>
+    </div>
+
+    <div class="upload-actions">
+        <a href="{{ url_for('files.browser', folder_id=parent_folder.id if parent_folder else None) }}" class="btn">
+            Cancel
+        </a>
+        <button id="clear-button" class="btn" disabled>Clear All</button>
+    </div>
+</section>
 {% endblock %}
 
-{% block scripts %}
-<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
+{% block extra_js %}
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // DOM Elements
+        const dropzone = document.getElementById('dropzone');
+        const fileInput = document.getElementById('file-input');
+        const folderInput = document.getElementById('folder-input');
+        const uploadList = document.getElementById('file-items');
+        const emptyMessage = document.getElementById('empty-message');
+        const fileCount = document.getElementById('file-count');
+        const progressContainer = document.getElementById('progress-container');
+        const progressBar = document.getElementById('progress-bar');
+        const progressPercentage = document.getElementById('progress-percentage');
+        const uploadSpeed = document.getElementById('upload-speed');
+        const uploadedSize = document.getElementById('uploaded-size');
+        const timeRemaining = document.getElementById('time-remaining');
+        const clearButton = document.getElementById('clear-button');
+
+        // Upload tracking
+        let uploadQueue = [];
+        let currentUploads = 0;
+        let totalUploaded = 0;
+        let totalSize = 0;
+        let uploadStartTime = 0;
+        let lastUploadedBytes = 0;
+        let uploadUpdateInterval = null;
+        const MAX_CONCURRENT_UPLOADS = 3;
+        const folderId = {{ parent_folder.id if parent_folder else 'null' }
+    };
+    });
+
+    // Setup event listeners
+    dropzone.addEventListener('dragover', function (e) {
+        e.preventDefault();
+        this.classList.add('highlight');
+    });
+
+    dropzone.addEventListener('dragleave', function (e) {
+        e.preventDefault();
+        this.classList.remove('highlight');
+    });
+
+    dropzone.addEventListener('drop', function (e) {
+        e.preventDefault();
+        this.classList.remove('highlight');
+
+        // Handle dropped files
+        const items = e.dataTransfer.items;
+        if (items && items.length > 0) {
+            // Check if this is a folder drop from file explorer
+            const containsDirectories = Array.from(items).some(item => {
+                return item.webkitGetAsEntry && item.webkitGetAsEntry().isDirectory;
+            });
+
+            if (containsDirectories) {
+                processDroppedItems(items);
+            } else {
+                handleFiles(e.dataTransfer.files);
+            }
+        }
+    });
+
+    fileInput.addEventListener('change', function () {
+        handleFiles(this.files);
+    });
+
+    folderInput.addEventListener('change', function () {
+        handleFolderUpload(this.files);
+    });
+
+    clearButton.addEventListener('click', function () {
+        resetUploadState();
+    });
+
+    function processDroppedItems(items) {
+        const fileList = [];
+        let pendingDirectories = 0;
+
+        function traverseFileTree(entry, path = '') {
+            if (entry.isFile) {
+                entry.file(file => {
+                    file.relativePath = path + file.name;
+                    fileList.push(file);
+                    if (pendingDirectories === 0 && entry.isFile) {
+                        handleFiles(fileList);
+                    }
+                });
+            } else if (entry.isDirectory) {
+                pendingDirectories++;
+                const dirReader = entry.createReader();
+                const readEntries = () => {
+                    dirReader.readEntries(entries => {
+                        if (entries.length > 0) {
+                            for (let i = 0; i < entries.length; i++) {
+                                traverseFileTree(entries[i], path + entry.name + '/');
+                            }
+                            readEntries(); // Continue reading if there might be more entries
+                        } else {
+                            pendingDirectories--;
+                            if (pendingDirectories === 0) {
+                                handleFiles(fileList);
+                            }
+                        }
+                    });
+                };
+                readEntries();
+            }
+        }
+
+        for (let i = 0; i < items.length; i++) {
+            const entry = items[i].webkitGetAsEntry();
+            if (entry) {
+                traverseFileTree(entry);
+            }
+        }
+    }
+
+    function handleFiles(files) {
+        if (!files || files.length === 0) return;
+
+        clearButton.disabled = false;
+        emptyMessage.style.display = 'none';
+
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+
+            // Add to queue
+            uploadQueue.push({
+                file: file,
+                relativePath: file.relativePath || null,
+                status: 'queued',
+                progress: 0
+            });
+
+            totalSize += file.size;
+
+            // Add to UI
+            const fileItem = document.createElement('div');
+            fileItem.className = 'file-item';
+            fileItem.dataset.index = uploadQueue.length - 1;
+
+            // Determine icon based on file type
+            const fileIcon = getFileIcon(file.name);
+
+            fileItem.innerHTML = `
+                    <div class="file-icon">
+                        <i class="fas ${fileIcon}"></i>
+                    </div>
+                    <div class="file-info">
+                        <div class="file-name">${file.name}</div>
+                        <div class="file-path">${file.relativePath || 'No path'}</div>
+                        <div class="file-size">${formatSize(file.size)}</div>
+                        <div class="file-progress">
+                            <div class="progress-bar-small" style="width: 0%"></div>
+                        </div>
+                    </div>
+                    <div class="file-status">
+                        <span class="status-indicator queued">Queued</span>
+                    </div>
+                `;
+
+            uploadList.appendChild(fileItem);
+        }
+
+        fileCount.textContent = uploadQueue.length;
+
+        // Start upload process
+        startUpload();
+    }
+
+    function handleFolderUpload(files) {
+        if (!files || files.length === 0) return;
+
+        const fileArray = Array.from(files);
+        for (let i = 0; i < fileArray.length; i++) {
+            const file = fileArray[i];
+            file.relativePath = file.webkitRelativePath;
+        }
+
+        handleFiles(fileArray);
+    }
+
+    function startUpload() {
+        if (uploadQueue.length === 0 || currentUploads >= MAX_CONCURRENT_UPLOADS) return;
+
+        if (currentUploads === 0) {
+            // First upload - initialize tracking
+            uploadStartTime = Date.now();
+            lastUploadedBytes = 0;
+            progressContainer.style.display = 'block';
+
+            // Start progress update interval
+            uploadUpdateInterval = setInterval(updateUploadStats, 500);
+        }
+
+        // Find next queued file
+        const nextIndex = uploadQueue.findIndex(item => item.status === 'queued');
+        if (nextIndex === -1) return;
+
+        // Start uploading this file
+        uploadQueue[nextIndex].status = 'uploading';
+        currentUploads++;
+
+        // Update UI
+        const fileItem = document.querySelector(`.file-item[data-index="${nextIndex}"]`);
+        const statusIndicator = fileItem.querySelector('.status-indicator');
+        statusIndicator.className = 'status-indicator uploading';
+        statusIndicator.textContent = 'Uploading';
+
+        // Create FormData
+        const formData = new FormData();
+        formData.append('file', uploadQueue[nextIndex].file);
+        formData.append('folder_id', folderId || '');
+
+        if (uploadQueue[nextIndex].relativePath) {
+            formData.append('relative_path', uploadQueue[nextIndex].relativePath);
+        }
+
+        // Create and configure XHR
+        const xhr = new XMLHttpRequest();
+
+        xhr.upload.addEventListener('progress', function (e) {
+            if (e.lengthComputable) {
+                const percentComplete = Math.round((e.loaded / e.total) * 100);
+
+                // Update file progress
+                uploadQueue[nextIndex].progress = percentComplete;
+
+                // Update file UI
+                const progressBar = fileItem.querySelector('.progress-bar-small');
+                progressBar.style.width = percentComplete + '%';
+            }
+        });
+
+        xhr.addEventListener('load', function () {
+            if (xhr.status === 200) {
+                try {
+                    const response = JSON.parse(xhr.responseText);
+
+                    if (response.success) {
+                        // Upload successful
+                        uploadQueue[nextIndex].status = 'complete';
+                        statusIndicator.className = 'status-indicator complete';
+                        statusIndicator.textContent = 'Complete';
+
+                        totalUploaded += uploadQueue[nextIndex].file.size;
+                    } else {
+                        // Upload failed on server
+                        uploadQueue[nextIndex].status = 'error';
+                        statusIndicator.className = 'status-indicator error';
+                        statusIndicator.textContent = 'Error: ' + (response.error || 'Server Error');
+                    }
+                } catch (e) {
+                    // JSON parse error
+                    uploadQueue[nextIndex].status = 'error';
+                    statusIndicator.className = 'status-indicator error';
+                    statusIndicator.textContent = 'Error: Invalid response';
+                }
+            } else {
+                // HTTP error
+                uploadQueue[nextIndex].status = 'error';
+                statusIndicator.className = 'status-indicator error';
+                statusIndicator.textContent = 'Error: ' + xhr.status;
+            }
+
+            // One upload completed
+            currentUploads--;
+
+            // Check if all uploads complete
+            if (uploadQueue.every(item => item.status !== 'queued' && item.status !== 'uploading')) {
+                // All uploads complete
+                clearInterval(uploadUpdateInterval);
+
+                // Show completion notification
+                const successCount = uploadQueue.filter(item => item.status === 'complete').length;
+                const errorCount = uploadQueue.filter(item => item.status === 'error').length;
+
+                // Show notification message
+                if (errorCount === 0) {
+                    showNotification(`Successfully uploaded ${successCount} files`, 'success');
+                } else {
+                    showNotification(`Uploaded ${successCount} files, ${errorCount} failed`, 'warning');
+                }
+            } else {
+                // Start next upload
+                startUpload();
+            }
+        });
+
+        xhr.addEventListener('error', function () {
+            // Network error
+            uploadQueue[nextIndex].status = 'error';
+            statusIndicator.className = 'status-indicator error';
+            statusIndicator.textContent = 'Error: Network error';
+
+            currentUploads--;
+            startUpload(); // Try the next file
+        });
+
+        // Send the request
+        xhr.open('POST', '/files/upload_file');
+        xhr.send(formData);
+
+        // Try to start more uploads if possible
+        startUpload();
+    }
+
+    function updateUploadStats() {
+        if (currentUploads === 0) return;
+
+        // Calculate overall progress
+        let totalProgress = 0;
+
+        uploadQueue.forEach(item => {
+            if (item.status === 'complete') {
+                totalProgress += item.file.size;
+            } else if (item.status === 'uploading') {
+                totalProgress += (item.file.size * (item.progress / 100));
+            }
+        });
+
+        const overallPercentage = Math.round((totalProgress / totalSize) * 100);
+
+        // Update progress bar
+        progressBar.style.width = overallPercentage + '%';
+        progressPercentage.textContent = overallPercentage + '%';
+
+        // Calculate upload speed
+        const elapsed = (Date.now() - uploadStartTime) / 1000; // seconds
+        const bytesPerSecond = totalProgress / elapsed;
+
+        uploadSpeed.textContent = formatSize(bytesPerSecond) + '/s';
+
+        // Update uploaded size
+        uploadedSize.textContent = `${formatSize(totalProgress)} / ${formatSize(totalSize)}`;
+
+        // Calculate time remaining
+        const remainingBytes = totalSize - totalProgress;
+        if (bytesPerSecond > 0) {
+            const secondsRemaining = Math.round(remainingBytes / bytesPerSecond);
+            timeRemaining.textContent = formatTime(secondsRemaining);
+        } else {
+            timeRemaining.textContent = 'calculating...';
+        }
+    }
+
+    function resetUploadState() {
+        // Reset all upload tracking variables
+        uploadQueue = [];
+        currentUploads = 0;
+        totalUploaded = 0;
+        totalSize = 0;
+        clearInterval(uploadUpdateInterval);
+
+        // Reset UI
+        uploadList.innerHTML = '';
+        emptyMessage.style.display = 'block';
+        progressContainer.style.display = 'none';
+        fileCount.textContent = '0';
+        progressBar.style.width = '0%';
+        progressPercentage.textContent = '0%';
+        uploadSpeed.textContent = '0 KB/s';
+        uploadedSize.textContent = '0 KB / 0 KB';
+        timeRemaining.textContent = 'calculating...';
+        clearButton.disabled = true;
+    }
+
+    function showNotification(message, type) {
+        // Create alerts container if it doesn't exist
+        let alertsContainer = document.querySelector('.alerts');
+        if (!alertsContainer) {
+            alertsContainer = document.createElement('div');
+            alertsContainer.className = 'alerts';
+            document.body.appendChild(alertsContainer);
+        }
+
+        // Create alert
+        const alert = document.createElement('div');
+        alert.className = `alert ${type || 'info'}`;
+        alert.innerHTML = `
+                <div class="alert-content">${message}</div>
+                <button class="close" aria-label="Close">&times;</button>
+            `;
+
+        // Add to container
+        alertsContainer.appendChild(alert);
+
+        // Setup dismiss
+        const closeBtn = alert.querySelector('.close');
+        closeBtn.addEventListener('click', function () {
+            alert.classList.add('fade-out');
+            setTimeout(() => {
+                alert.remove();
+            }, 300);
+        });
+
+        // Auto dismiss
+        setTimeout(() => {
+            if (alert.parentNode) {
+                alert.classList.add('fade-out');
+                setTimeout(() => {
+                    if (alert.parentNode) {
+                        alert.remove();
+                    }
+                }, 300);
+            }
+        }, 5000);
+    }
+
+    function formatSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+
+    function formatTime(seconds) {
+        if (seconds < 60) {
+            return seconds + ' seconds';
+        } else if (seconds < 3600) {
+            return Math.floor(seconds / 60) + ' minutes';
+        } else {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return hours + ' hours ' + minutes + ' minutes';
+        }
+    }
+
+    function getFileIcon(fileName) {
+        const extension = fileName.split('.').pop().toLowerCase();
+
+        // Images
+        if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(extension)) {
+            return 'fa-file-image';
+        }
+        // Videos
+        else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'].includes(extension)) {
+            return 'fa-file-video';
+        }
+        // Audio
+        else if (['mp3', 'wav', 'ogg', 'flac', 'm4a'].includes(extension)) {
+            return 'fa-file-audio';
+        }
+        // Documents
+        else if (['doc', 'docx', 'dot', 'dotx'].includes(extension)) {
+            return 'fa-file-word';
+        }
+        else if (['xls', 'xlsx', 'csv'].includes(extension)) {
+            return 'fa-file-excel';
+        }
+        else if (['ppt', 'pptx'].includes(extension)) {
+            return 'fa-file-powerpoint';
+        }
+        else if (['pdf'].includes(extension)) {
+            return 'fa-file-pdf';
+        }
+        // Archives
+        else if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
+            return 'fa-file-archive';
+        }
+        // Text
+        else if (['txt', 'rtf', 'md', 'log'].includes(extension)) {
+            return 'fa-file-alt';
+        }
+        // Code
+        else if (['html', 'css', 'js', 'php', 'py', 'java', 'c', 'cpp', 'h', 'xml', 'json', 'sql'].includes(extension)) {
+            return 'fa-file-code';
+        }
+
+        return 'fa-file';
+    }
+    });
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/utils/reset_db.py b/app/utils/reset_db.py
deleted file mode 100644
index 18b69a5..0000000
--- a/app/utils/reset_db.py
+++ /dev/null
@@ -1,59 +0,0 @@
-"""
-Database reset utility - USE WITH CAUTION
-This will delete and recreate your entire database
-"""
-import os
-import logging
-from flask import Flask
-from .. import create_app, db
-from ..models import User, Folder, File, Download
-
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
-
-def reset_database():
-    """Reset the entire database and recreate tables"""
-    app = create_app()
-    
-    with app.app_context():
-        try:
-            # Drop all tables
-            logger.warning("Dropping all database tables...")
-            db.drop_all()
-            logger.info("All tables dropped successfully")
-            
-            # Recreate tables based on models
-            logger.info("Recreating database tables...")
-            db.create_all()
-            logger.info("Database tables created successfully")
-            
-            # Create admin user if needed
-            if User.query.filter_by(username='admin').first() is None:
-                admin = User(username='admin', email='admin@example.com', is_admin=True)
-                admin.password = 'adminpassword'  # Set to a secure password in production
-                db.session.add(admin)
-                db.session.commit()
-                logger.info("Created admin user")
-            
-            # Clear uploads folder
-            uploads_folder = app.config['UPLOAD_FOLDER']
-            if os.path.exists(uploads_folder):
-                logger.info(f"Clearing uploads folder: {uploads_folder}")
-                for file in os.listdir(uploads_folder):
-                    file_path = os.path.join(uploads_folder, file)
-                    try:
-                        if os.path.isfile(file_path):
-                            os.unlink(file_path)
-                        elif os.path.isdir(file_path):
-                            import shutil
-                            shutil.rmtree(file_path)
-                    except Exception as e:
-                        logger.error(f"Error removing {file_path}: {e}")
-                
-            return True
-        except Exception as e:
-            logger.error(f"Error resetting database: {e}")
-            return False
-
-if __name__ == "__main__":
-    reset_database() 
\ No newline at end of file
diff --git a/app/migrations/add_storage_name.py b/migrations/add_storage_name.py
similarity index 100%
rename from app/migrations/add_storage_name.py
rename to migrations/add_storage_name.py
diff --git a/reset_app.py b/reset_app.py
deleted file mode 100644
index 316292a..0000000
--- a/reset_app.py
+++ /dev/null
@@ -1,161 +0,0 @@
-#!/usr/bin/env python3
-"""
-Complete application reset script
-Removes database, clears cache files, and reinitializes everything
-"""
-import os
-import sys
-import shutil
-import logging
-import importlib
-from pathlib import Path
-
-# Configure logging
-logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
-logger = logging.getLogger("app-reset")
-
-# Application paths
-DB_FILES = ["app.db", "instance/app.db"]
-UPLOADS_FOLDER = "uploads"
-PYCACHE_PATTERN = "**/__pycache__"
-
-def confirm_reset():
-    """Get user confirmation before proceeding"""
-    print("\n⚠️  WARNING: This will completely reset the application ⚠️")
-    print("📢 All data will be lost, including:")
-    print("   - Database and all its tables")
-    print("   - All uploaded files")
-    print("   - Cache files and temporary data")
-    print("\nAre you absolutely sure you want to continue?")
-    return input("Type 'yes' to confirm: ").lower() == 'yes'
-
-def remove_database_files():
-    """Remove all database files"""
-    success = True
-    for db_file in DB_FILES:
-        if os.path.exists(db_file):
-            try:
-                logger.info(f"Removing database file: {db_file}")
-                os.remove(db_file)
-            except Exception as e:
-                logger.error(f"Failed to remove {db_file}: {e}")
-                success = False
-    return success
-
-def clear_uploads_directory():
-    """Clear all uploaded files but keep the directory"""
-    if not os.path.exists(UPLOADS_FOLDER):
-        logger.info(f"Creating uploads folder: {UPLOADS_FOLDER}")
-        os.makedirs(UPLOADS_FOLDER, exist_ok=True)
-        return True
-    
-    try:
-        logger.info(f"Clearing uploads folder: {UPLOADS_FOLDER}")
-        for item in os.listdir(UPLOADS_FOLDER):
-            path = os.path.join(UPLOADS_FOLDER, item)
-            if os.path.isfile(path):
-                os.remove(path)
-            elif os.path.isdir(path):
-                shutil.rmtree(path)
-        return True
-    except Exception as e:
-        logger.error(f"Failed to clear uploads directory: {e}")
-        return False
-
-def clear_pycache_files():
-    """Clear all __pycache__ directories"""
-    try:
-        logger.info("Clearing Python cache files...")
-        count = 0
-        for cache_dir in Path('.').glob(PYCACHE_PATTERN):
-            if cache_dir.is_dir():
-                shutil.rmtree(cache_dir)
-                count += 1
-        
-        logger.info(f"Removed {count} __pycache__ directories")
-        return True
-    except Exception as e:
-        logger.error(f"Failed to clear cache files: {e}")
-        return False
-
-def initialize_application(create_admin=False):
-    """Initialize the application with fresh database"""
-    try:
-        logger.info("Initializing Flask application...")
-        # Force reload the app module
-        if 'app' in sys.modules:
-            importlib.reload(sys.modules['app'])
-        
-        # Import and create app
-        from app import create_app, db
-        app = create_app()
-        
-        with app.app_context():
-            logger.info("Creating database tables...")
-            db.create_all()
-            
-            # Create admin user if requested
-            if create_admin:
-                from app.models import User, Share
-                if User.query.filter_by(username='admin').first() is None:
-                    admin = User(username='admin', email='admin@example.com', is_admin=True)
-                    admin.password = 'adminpassword'
-                    db.session.add(admin)
-                    db.session.commit()
-                    logger.info("Created admin user (username: admin, password: adminpassword)")
-                else:
-                    logger.info("Admin user already exists")
-            else:
-                logger.info("Skipping admin user creation as requested")
-        
-        logger.info("Application initialized successfully")
-        return True
-    except Exception as e:
-        logger.error(f"Failed to initialize application: {e}")
-        return False
-
-def main():
-    """Main reset procedure"""
-    print("\n🔄 Flask Files Application Reset Tool 🔄\n")
-    
-    if not confirm_reset():
-        print("\n❌ Reset cancelled by user")
-        return False
-    
-    create_admin = input("\nCreate admin user? (yes/no): ").lower() == 'yes'
-    
-    print("\n🚀 Starting reset process...\n")
-    
-    # Step 1: Remove database files
-    if remove_database_files():
-        logger.info("✅ Database files removed successfully")
-    else:
-        logger.error("❌ Failed to remove some database files")
-    
-    # Step 2: Clear uploads directory
-    if clear_uploads_directory():
-        logger.info("✅ Uploads directory cleared successfully")
-    else:
-        logger.error("❌ Failed to clear uploads directory")
-    
-    # Step 3: Clear cache files
-    if clear_pycache_files():
-        logger.info("✅ Python cache files cleared successfully")
-    else:
-        logger.error("❌ Failed to clear cache files")
-    
-    # Step 4: Initialize application
-    if initialize_application(create_admin):
-        logger.info("✅ Application initialized successfully")
-    else:
-        logger.error("❌ Failed to initialize application")
-        return False
-    
-    print("\n✨ Reset completed successfully! ✨")
-    print("\nYou can now start the application with 'python run.py'")
-    if create_admin:
-        print("Default admin credentials: username=admin, password=adminpassword")
-    return True
-
-if __name__ == "__main__":
-    sys.exit(0 if main() else 1) 
\ No newline at end of file
diff --git a/template_checker.py b/template_checker.py
deleted file mode 100644
index c620c36..0000000
--- a/template_checker.py
+++ /dev/null
@@ -1,84 +0,0 @@
-import os
-import re
-import sys
-
-def check_template_syntax(directory):
-    """Check all template files for common Jinja2 syntax errors"""
-    template_pattern = re.compile(r'{{.*?}}|{%.*?%}|{#.*?#}')
-    problem_files = []
-    
-    for root, _, files in os.walk(directory):
-        for file in files:
-            if file.endswith('.html'):
-                filepath = os.path.join(root, file)
-                with open(filepath, 'r', encoding='utf-8') as f:
-                    try:
-                        content = f.read()
-                        # Check for unbalanced Jinja2 brackets
-                        open_curly = content.count('{{')
-                        close_curly = content.count('}}')
-                        open_block = content.count('{%')
-                        close_block = content.count('%}')
-                        open_comment = content.count('{#')
-                        close_comment = content.count('#}')
-                        
-                        if open_curly != close_curly or open_block != close_block or open_comment != close_comment:
-                            problem_files.append({
-                                'file': filepath,
-                                'issues': {
-                                    'curly': (open_curly, close_curly),
-                                    'block': (open_block, close_block),
-                                    'comment': (open_comment, close_comment)
-                                }
-                            })
-                            
-                        # Find incomplete Jinja2 expressions
-                        line_num = 1
-                        for line in content.split('\n'):
-                            # Check for unclosed Jinja expressions
-                            line_open_curly = line.count('{{')
-                            line_close_curly = line.count('}}')
-                            if line_open_curly != line_close_curly and '{{' in line:
-                                problem_files.append({
-                                    'file': filepath,
-                                    'line': line_num,
-                                    'content': line.strip(),
-                                    'issue': f"Unbalanced curly braces: {line_open_curly} opening vs {line_close_curly} closing"
-                                })
-                            line_num += 1
-                            
-                    except Exception as e:
-                        problem_files.append({
-                            'file': filepath,
-                            'error': str(e)
-                        })
-    
-    return problem_files
-
-if __name__ == "__main__":
-    if len(sys.argv) > 1:
-        directory = sys.argv[1]
-    else:
-        directory = 'app/templates'
-    
-    problems = check_template_syntax(directory)
-    
-    if problems:
-        print(f"Found {len(problems)} potential issues:")
-        for problem in problems:
-            print(f"\nFile: {problem['file']}")
-            if 'line' in problem:
-                print(f"Line {problem['line']}: {problem['content']}")
-                print(f"Issue: {problem['issue']}")
-            elif 'issues' in problem:
-                issues = problem['issues']
-                if issues['curly'][0] != issues['curly'][1]:
-                    print(f"Unbalanced curly braces: {issues['curly'][0]} opening vs {issues['curly'][1]} closing")
-                if issues['block'][0] != issues['block'][1]:
-                    print(f"Unbalanced block tags: {issues['block'][0]} opening vs {issues['block'][1]} closing")
-                if issues['comment'][0] != issues['comment'][1]:
-                    print(f"Unbalanced comments: {issues['comment'][0]} opening vs {issues['comment'][1]} closing")
-            else:
-                print(f"Error: {problem['error']}")
-    else:
-        print("No issues found!") 
\ No newline at end of file