diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -1,11 +1,11 @@
-from flask import Flask, render_template_string, request, redirect, url_for, jsonify, flash, send_from_directory
+from flask import Flask, render_template_string, request, redirect, url_for, jsonify, flash
 import json
 import os
 import logging
 import threading
 import time
 from datetime import datetime
-from huggingface_hub import HfApi, hf_hub_download, list_repo_files
+from huggingface_hub import HfApi, hf_hub_download, delete_file as hf_delete_file
 from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError, EntryNotFoundError
 from werkzeug.utils import secure_filename
 from dotenv import load_dotenv
@@ -18,49 +18,44 @@ load_dotenv()
 
 app = Flask(__name__)
 app.secret_key = os.getenv("FLASK_SECRET_KEY", 'tontalent_secret_key_for_flash_messages_only')
-
 DATA_FILE = 'tontalent_data.json'
-UPLOADS_DIR_NAME = 'uploads' # Relative to project root
-app.config['UPLOAD_FOLDER'] = UPLOADS_DIR_NAME
-os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
-
-MAX_IMAGE_FILES = 10
-ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
+SYNC_FILES = [DATA_FILE] # For DB file itself
 
-SYNC_FILES = [DATA_FILE] # Main data file, images handled separately based on this file
+# Configuration for image uploads
+UPLOAD_FOLDER_NAME = 'uploads_temp' # Temporary local storage before HF upload
+app.config['UPLOAD_FOLDER'] = os.path.join(app.instance_path, UPLOAD_FOLDER_NAME)
+app.config['MAX_IMAGE_UPLOADS'] = 10
+app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}
 
 REPO_ID = os.getenv("HF_REPO_ID", "Kgshop/tontalent2")
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN_WRITE")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-TELEGRAM_BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8" # Replace with your actual bot token
+TELEGRAM_BOT_TOKEN = "7549355625:AAGhdbf6x1JEzpH0mUtuxTF83Soi7MFVNZ8" # Replace with your actual bot token if needed
 
 DOWNLOAD_RETRIES = 3
 DOWNLOAD_DELAY = 5
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
-def allowed_file(filename):
-    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+# Ensure instance folder and temp upload folder exist
+try:
+    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+except OSError as e:
+    logging.error(f"Error creating upload folder {app.config['UPLOAD_FOLDER']}: {e}")
+
 
-def _get_all_image_paths_from_data(data_dict):
-    image_paths = set()
-    for item_type_key in ['resumes', 'vacancies', 'freelance_offers']:
-        for item in data_dict.get(item_type_key, []):
-            for img_path in item.get('images', []):
-                if img_path.startswith(UPLOADS_DIR_NAME + "/"): # Ensure it's a path we manage
-                    image_paths.add(img_path)
-    return list(image_paths)
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
 
 def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWNLOAD_DELAY):
     if not HF_TOKEN_READ and not HF_TOKEN_WRITE:
         logging.warning("HF_TOKEN_READ/HF_TOKEN_WRITE not set. Download might fail for private repos.")
     token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
-    
     files_to_download = [specific_file] if specific_file else SYNC_FILES
-    logging.info(f"Attempting download for primary files {files_to_download} from {REPO_ID}...")
+    logging.info(f"Attempting download for {files_to_download} from {REPO_ID}...")
     all_successful = True
-
     for file_name in files_to_download:
         success = False
         for attempt in range(retries + 1):
@@ -75,11 +70,10 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
                 success = True
                 break
             except RepositoryNotFoundError:
-                logging.error(f"Repository {REPO_ID} not found. Download cancelled.")
-                return False
-            except (HfHubHTTPError, EntryNotFoundError) as e:
-                is_404 = isinstance(e, EntryNotFoundError) or (isinstance(e, HfHubHTTPError) and e.response.status_code == 404)
-                if is_404:
+                 logging.error(f"Repository {REPO_ID} not found. Download cancelled for all files.")
+                 return False
+            except HfHubHTTPError as e:
+                if e.response.status_code == 404:
                     logging.warning(f"File {file_name} not found in repo {REPO_ID} (404). Skipping this file.")
                     if attempt == 0 and not os.path.exists(file_name):
                         try:
@@ -87,169 +81,96 @@ def download_db_from_hf(specific_file=None, retries=DOWNLOAD_RETRIES, delay=DOWN
                                 with open(file_name, 'w', encoding='utf-8') as f:
                                     json.dump({'resumes': [], 'vacancies': [], 'freelance_offers': [], 'users': {}}, f)
                                 logging.info(f"Created empty local file {file_name} because it was not found on HF.")
-                                success = True # Created locally, treat as success for this file
                         except Exception as create_e:
                             logging.error(f"Failed to create empty local file {file_name}: {create_e}")
-                    break 
+                    success = True # Consider it successful if it's a 404 and we're okay with it (e.g. new repo)
+                    break # Don't retry 404
                 else:
                     logging.error(f"HTTP error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...")
             except Exception as e:
-                logging.error(f"Unexpected error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...", exc_info=True)
+                 logging.error(f"Unexpected error downloading {file_name} (Attempt {attempt + 1}): {e}. Retrying in {delay}s...", exc_info=True)
             if attempt < retries: time.sleep(delay)
         if not success:
             logging.error(f"Failed to download {file_name} after {retries + 1} attempts.")
             all_successful = False
-
-    if not all_successful:
-        logging.error("Not all primary files downloaded successfully. Image download might be skipped or incomplete.")
-        return False
-
-    # Download images if DATA_FILE was part of the download or no specific file was requested (full sync)
-    if (specific_file is None or specific_file == DATA_FILE) and os.path.exists(DATA_FILE):
-        logging.info("Downloading referenced image files...")
-        try:
-            with open(DATA_FILE, 'r', encoding='utf-8') as f:
-                data_content = json.load(f)
-            image_paths_in_data = _get_all_image_paths_from_data(data_content)
-            
-            for img_repo_path in image_paths_in_data:
-                local_img_full_path = os.path.join(app.root_path, img_repo_path)
-                os.makedirs(os.path.dirname(local_img_full_path), exist_ok=True)
-                img_success = False
-                for attempt in range(retries + 1):
-                    try:
-                        logging.info(f"Downloading image {img_repo_path} (Attempt {attempt+1})")
-                        hf_hub_download(
-                            repo_id=REPO_ID, filename=img_repo_path, repo_type="dataset",
-                            token=token_to_use, local_dir=".", local_dir_use_symlinks=False, # local_dir="." means files go into UPLOADS_DIR_NAME/
-                            force_download=True, resume_download=False
-                        )
-                        logging.info(f"Successfully downloaded image {img_repo_path}.")
-                        img_success = True
-                        break
-                    except (HfHubHTTPError, EntryNotFoundError) as e_img:
-                        is_404_img = isinstance(e_img, EntryNotFoundError) or (isinstance(e_img, HfHubHTTPError) and e_img.response.status_code == 404)
-                        if is_404_img:
-                            logging.warning(f"Image {img_repo_path} not found on HF (404). Skipping.")
-                            break
-                        else:
-                             logging.error(f"HTTP error downloading image {img_repo_path}: {e_img}. Retrying...")
-                    except Exception as e_img:
-                        logging.error(f"Unexpected error downloading image {img_repo_path}: {e_img}. Retrying...", exc_info=True)
-                    if attempt < retries: time.sleep(delay)
-                if not img_success:
-                    logging.error(f"Failed to download image {img_repo_path} after multiple attempts.")
-                    all_successful = False # Mark overall sync as potentially incomplete
-        except Exception as e:
-            logging.error(f"Error processing or downloading images: {e}", exc_info=True)
-            all_successful = False
-            
     logging.info(f"Download process finished. Overall success: {all_successful}")
     return all_successful
 
+def upload_file_to_hf_with_retry(local_path, path_in_repo, repo_id, token, commit_message, retries=3, delay=5):
+    api = HfApi()
+    for attempt in range(retries + 1):
+        try:
+            api.upload_file(
+                path_or_fileobj=local_path,
+                path_in_repo=path_in_repo,
+                repo_id=repo_id,
+                repo_type="dataset",
+                token=token,
+                commit_message=commit_message
+            )
+            logging.info(f"File {local_path} successfully uploaded to {path_in_repo} in {repo_id}.")
+            return True
+        except Exception as e:
+            logging.error(f"Error uploading {local_path} to HF (Attempt {attempt + 1}): {e}")
+            if attempt < retries:
+                time.sleep(delay)
+            else:
+                logging.error(f"Failed to upload {local_path} to HF after {retries + 1} attempts.")
+                return False
 
-def upload_db_to_hf(specific_file_local_path=None, specific_file_repo_path=None):
+def upload_db_to_hf(specific_file=None):
     if not HF_TOKEN_WRITE:
-        logging.warning("HF_TOKEN_WRITE not set. Skipping upload to Hugging Face.")
+        logging.warning("HF_TOKEN_WRITE not set. Skipping upload of DB to Hugging Face.")
         return
-
     try:
-        api = HfApi()
-        
-        files_to_upload_map = {} # {local_path: repo_path}
-
-        if specific_file_local_path and specific_file_repo_path:
-            if os.path.exists(specific_file_local_path):
-                 files_to_upload_map[specific_file_local_path] = specific_file_repo_path
-            else:
-                logging.warning(f"Specific file {specific_file_local_path} not found locally for upload.")
-        else: # Full sync
-            for file_name in SYNC_FILES: # DATA_FILE
-                if os.path.exists(file_name):
-                    files_to_upload_map[file_name] = file_name 
-            
-            # Add images referenced in DATA_FILE for full sync
-            if os.path.exists(DATA_FILE):
-                try:
-                    with open(DATA_FILE, 'r', encoding='utf-8') as f:
-                        data_content = json.load(f)
-                    image_paths_in_data = _get_all_image_paths_from_data(data_content)
-                    for img_repo_path in image_paths_in_data: # img_repo_path is like 'uploads/file.jpg'
-                        local_img_path = os.path.join(app.root_path, img_repo_path)
-                        if os.path.exists(local_img_path):
-                            files_to_upload_map[local_img_path] = img_repo_path
-                        else:
-                            logging.warning(f"Image {local_img_path} (referenced in data) not found locally, skipping upload.")
-                except Exception as e:
-                    logging.error(f"Error reading DATA_FILE for image paths during upload: {e}")
-
-        if not files_to_upload_map:
-            logging.info("No files to upload.")
-            return
-
-        logging.info(f"Starting upload of {len(files_to_upload_map)} file(s) to HF repo {REPO_ID}...")
-        for local_path, repo_path_in_repo in files_to_upload_map.items():
-            try:
-                logging.info(f"Uploading {local_path} to {repo_path_in_repo}...")
-                api.upload_file(
-                    path_or_fileobj=local_path, path_in_repo=repo_path_in_repo, repo_id=REPO_ID,
-                    repo_type="dataset", token=HF_TOKEN_WRITE,
-                    commit_message=f"Sync {os.path.basename(local_path)} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
+        files_to_upload = [specific_file] if specific_file else SYNC_FILES
+        logging.info(f"Starting upload of {files_to_upload} to HF repo {REPO_ID}...")
+        for file_name in files_to_upload:
+            if os.path.exists(file_name):
+                upload_file_to_hf_with_retry(
+                    local_path=file_name,
+                    path_in_repo=file_name,
+                    repo_id=REPO_ID,
+                    token=HF_TOKEN_WRITE,
+                    commit_message=f"Sync {file_name} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
                 )
-                logging.info(f"File {local_path} successfully uploaded to {repo_path_in_repo}.")
-            except Exception as e:
-                logging.error(f"Error uploading file {local_path} to Hugging Face: {e}")
-        logging.info("Finished uploading files to HF.")
-
+            else:
+                logging.warning(f"File {file_name} not found locally, skipping upload.")
+        logging.info("Finished uploading DB files to HF.")
     except Exception as e:
-        logging.error(f"General error during Hugging Face upload initialization or process: {e}", exc_info=True)
+        logging.error(f"General error during Hugging Face DB upload initialization or process: {e}", exc_info=True)
 
 
-def delete_files_from_hf(file_paths_in_repo):
+def delete_image_from_hf(filename_in_repo_uploads_dir):
     if not HF_TOKEN_WRITE:
-        logging.warning("HF_TOKEN_WRITE not set. Skipping deletion from Hugging Face.")
+        logging.warning("HF_TOKEN_WRITE not set. Skipping image deletion from Hugging Face.")
         return False
-    if not file_paths_in_repo:
-        return True
-    
-    api = HfApi()
     try:
-        logging.info(f"Attempting to delete files from HF: {file_paths_in_repo}")
-        # HfApi().delete_files expects list of strings, not string
-        paths_to_delete = file_paths_in_repo if isinstance(file_paths_in_repo, list) else [file_paths_in_repo]
-        api.delete_files(
+        path_in_repo = f"uploads/{filename_in_repo_uploads_dir}"
+        logging.info(f"Attempting to delete {path_in_repo} from HF repo {REPO_ID}")
+        hf_delete_file(
+            path_in_repo=path_in_repo,
             repo_id=REPO_ID,
-            paths_in_repo=paths_to_delete,
             repo_type="dataset",
             token=HF_TOKEN_WRITE,
-            commit_message=f"Deleted files: {', '.join(paths_to_delete)}"
+            commit_message=f"Delete image {filename_in_repo_uploads_dir}"
         )
-        logging.info(f"Successfully deleted files from HF: {paths_to_delete}")
+        logging.info(f"Successfully deleted {path_in_repo} from Hugging Face.")
         return True
     except EntryNotFoundError:
-        logging.warning(f"Some files not found on HF during deletion: {paths_to_delete}. Considered as success.")
-        return True # If not found, it's effectively deleted or was never there.
+        logging.warning(f"Image {path_in_repo} not found on Hugging Face. Could be already deleted.")
+        return True # Consider it success if not found
     except Exception as e:
-        logging.error(f"Error deleting files from Hugging Face: {e}", exc_info=True)
+        logging.error(f"Error deleting image {path_in_repo} from Hugging Face: {e}", exc_info=True)
         return False
 
-def delete_local_files(local_file_paths):
-    for local_path in local_file_paths:
-        try:
-            if os.path.exists(local_path):
-                os.remove(local_path)
-                logging.info(f"Locally deleted {local_path}")
-        except Exception as e:
-            logging.error(f"Error deleting local file {local_path}: {e}")
-
-
 def periodic_backup():
     backup_interval = 1800
     logging.info(f"Setting up periodic backup every {backup_interval} seconds.")
     while True:
         time.sleep(backup_interval)
         logging.info("Starting periodic backup...")
-        upload_db_to_hf() 
+        upload_db_to_hf()
         logging.info("Periodic backup finished.")
 
 def load_data():
@@ -260,14 +181,19 @@ def load_data():
         logging.info(f"Local data loaded successfully from {DATA_FILE}")
         if not isinstance(data, dict):
              logging.warning(f"Local {DATA_FILE} is not a dictionary. Attempting download.")
-             raise FileNotFoundError 
+             raise FileNotFoundError
         for key in default_data:
             if key not in data: data[key] = default_data[key]
+        for item_type in ['resumes', 'vacancies', 'freelance_offers']: # Ensure image_filenames field
+            if item_type in data:
+                for item in data[item_type]:
+                    if 'image_filenames' not in item:
+                        item['image_filenames'] = []
         return data
     except (FileNotFoundError, json.JSONDecodeError) as e:
         logging.warning(f"Error loading local data ({e}). Attempting download from HF.")
 
-    if download_db_from_hf(specific_file=DATA_FILE): # This will also attempt to download images referenced in DATA_FILE
+    if download_db_from_hf(specific_file=DATA_FILE):
         try:
             with open(DATA_FILE, 'r', encoding='utf-8') as file:
                 data = json.load(file)
@@ -277,6 +203,11 @@ def load_data():
                  return default_data
             for key in default_data:
                 if key not in data: data[key] = default_data[key]
+            for item_type in ['resumes', 'vacancies', 'freelance_offers']:
+                if item_type in data:
+                    for item in data[item_type]:
+                        if 'image_filenames' not in item:
+                            item['image_filenames'] = []
             return data
         except Exception as load_e:
             logging.error(f"Error loading downloaded {DATA_FILE}: {load_e}. Using default.", exc_info=True)
@@ -299,18 +230,16 @@ def save_data(data):
         default_keys = {'resumes': [], 'vacancies': [], 'freelance_offers': [], 'users': {}}
         for key in default_keys:
             if key not in data: data[key] = default_keys[key]
+        for item_type in ['resumes', 'vacancies', 'freelance_offers']: # Ensure image_filenames field
+            if item_type in data:
+                for item in data[item_type]:
+                    if 'image_filenames' not in item:
+                        item['image_filenames'] = []
 
         with open(DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
         logging.info(f"Data successfully saved to {DATA_FILE}")
-        upload_db_to_hf(specific_file_local_path=DATA_FILE, specific_file_repo_path=DATA_FILE) # Upload DATA_FILE first
-        # Then upload all images referenced in it.
-        # The general upload_db_to_hf() without args will handle both DATA_FILE and its referenced images.
-        # For fine-grained control, could call: upload_db_to_hf() here without args
-        # to ensure images are also synced after DATA_FILE is updated.
-        # Current `upload_db_to_hf` will try to upload all referenced images if no specific_file args are given.
-        # So for just saving data, it's enough to upload DATA_FILE.
-        # The periodic backup or admin force upload will do a more thorough sync.
+        upload_db_to_hf(specific_file=DATA_FILE)
     except Exception as e:
         logging.error(f"Error saving data to {DATA_FILE}: {e}", exc_info=True)
 
@@ -318,12 +247,7 @@ def verify_telegram_auth_data(auth_data_str, bot_token):
     if not auth_data_str:
         return False, None
     
-    params = {}
-    try:
-        params = dict(urllib.parse.parse_qsl(auth_data_str))
-    except Exception: # Broad exception for parsing issues
-        return False, None
-
+    params = dict(urllib.parse.parse_qsl(auth_data_str))
     if 'hash' not in params:
         return False, None
 
@@ -358,44 +282,129 @@ MAIN_APP_TEMPLATE = '''
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
     <style>
         :root {
-            --tg-theme-bg-color: #ffffff; --tg-theme-text-color: #000000; --tg-theme-hint-color: #999999;
-            --tg-theme-link-color: #007aff; --tg-theme-button-color: #007aff; --tg-theme-button-text-color: #ffffff;
-            --tg-theme-secondary-bg-color: #f0f0f0; --tg-theme-header-bg-color: #efeff4;
-            --tg-theme-section-bg-color: #ffffff; --tg-theme-section-header-text-color: #8e8e93;
-            --tg-theme-destructive-text-color: #ff3b30; --tg-theme-accent-text-color: #007aff;
+            --tg-theme-bg-color: #ffffff;
+            --tg-theme-text-color: #000000;
+            --tg-theme-hint-color: #999999;
+            --tg-theme-link-color: #007aff;
+            --tg-theme-button-color: #007aff;
+            --tg-theme-button-text-color: #ffffff;
+            --tg-theme-secondary-bg-color: #f0f0f0;
+            --tg-theme-header-bg-color: #efeff4;
+            --tg-theme-section-bg-color: #ffffff;
+            --tg-theme-section-header-text-color: #8e8e93;
+            --tg-theme-destructive-text-color: #ff3b30;
+            --tg-theme-accent-text-color: #007aff;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: var(--tg-theme-bg-color);
+            color: var(--tg-theme-text-color);
+            overscroll-behavior-y: none;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            overflow-x: hidden; 
         }
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 0; background-color: var(--tg-theme-bg-color); color: var(--tg-theme-text-color); overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
         .app-container { display: flex; flex-direction: column; min-height: 100vh; }
-        .header { background-color: var(--tg-theme-header-bg-color); padding: 10px 15px; text-align: center; font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--tg-theme-secondary-bg-color); position: sticky; top: 0; z-index: 100; }
-        .tabs { display: flex; background-color: var(--tg-theme-secondary-bg-color); padding: 5px; }
-        .tab-button { flex: 1; padding: 10px; text-align: center; cursor: pointer; background: none; border: none; color: var(--tg-theme-hint-color); font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; transition: color 0.2s, border-bottom-color 0.2s; }
+        .header {
+            background-color: var(--tg-theme-header-bg-color);
+            padding: 10px 15px;
+            text-align: center;
+            font-weight: 600;
+            font-size: 17px;
+            border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .tabs-container { display: flex; width: 100%; overflow: hidden; }
+        .tabs-slider { display: flex; transition: transform 0.3s ease-in-out; }
+        .tab-content-page { width: 100vw; flex-shrink: 0; padding: 15px; box-sizing: border-box; min-height: calc(100vh - 160px); }
+
+        .tabs-nav { display: flex; background-color: var(--tg-theme-secondary-bg-color); padding: 5px; }
+        .tab-button {
+            flex: 1;
+            padding: 10px;
+            text-align: center;
+            cursor: pointer;
+            background: none;
+            border: none;
+            color: var(--tg-theme-hint-color);
+            font-size: 15px;
+            font-weight: 500;
+            border-bottom: 2px solid transparent;
+            transition: color 0.2s, border-bottom-color 0.2s;
+        }
         .tab-button.active { color: var(--tg-theme-link-color); border-bottom-color: var(--tg-theme-link-color); }
-        .content { flex-grow: 1; padding: 15px; overflow-x: hidden; } /* overflow-x hidden for swipe */
-        .list-item { background-color: var(--tg-theme-section-bg-color); border-radius: 8px; padding: 12px 15px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); cursor: pointer; transition: background-color 0.2s; }
+        .content { flex-grow: 1; /* padding: 15px; Removed, padding is on tab-content-page */ }
+
+        .list-item {
+            background-color: var(--tg-theme-section-bg-color);
+            border-radius: 8px;
+            padding: 12px 15px;
+            margin-bottom: 10px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+            cursor: pointer;
+            transition: background-color 0.2s;
+            display: flex; /* For image thumbnail */
+            align-items: center; /* For image thumbnail */
+        }
         .list-item:active { background-color: var(--tg-theme-secondary-bg-color); }
+        .list-item-content { flex-grow: 1; }
+        .list-item-thumbnail {
+            width: 50px; height: 50px;
+            object-fit: cover;
+            border-radius: 4px;
+            margin-right: 12px;
+        }
         .list-item h3 { margin: 0 0 5px 0; font-size: 16px; font-weight: 600; color: var(--tg-theme-text-color); }
         .list-item p { margin: 0 0 3px 0; font-size: 14px; color: var(--tg-theme-hint-color); }
         .list-item .meta { font-size: 12px; color: var(--tg-theme-hint-color); }
-        .item-images-preview { display: flex; align-items: center; margin-top: 8px; }
-        .item-images-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; margin-right: 8px; border: 1px solid var(--tg-theme-secondary-bg-color); }
-        .item-images-preview .image-count { font-size: 12px; color: var(--tg-theme-hint-color); background-color: var(--tg-theme-secondary-bg-color); padding: 2px 6px; border-radius: 4px; }
+        
         .form-container { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
         .form-group { margin-bottom: 15px; }
         .form-group label { display: block; font-size: 14px; color: var(--tg-theme-section-header-text-color); margin-bottom: 5px; }
-        .form-group input, .form-group textarea, .form-group input[type="file"] { width: 100%; padding: 10px; border: 1px solid var(--tg-theme-secondary-bg-color); border-radius: 6px; font-size: 16px; background-color: var(--tg-theme-bg-color); color: var(--tg-theme-text-color); box-sizing: border-box; }
+        .form-group input, .form-group textarea, .form-group input[type="file"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid var(--tg-theme-secondary-bg-color);
+            border-radius: 6px;
+            font-size: 16px;
+            background-color: var(--tg-theme-bg-color);
+            color: var(--tg-theme-text-color);
+            box-sizing: border-box;
+        }
         .form-group input[type="file"] { padding: 5px; }
         .form-group textarea { min-height: 80px; resize: vertical; }
         .image-preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
-        .image-preview-item { position: relative; }
-        .image-preview-item img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid var(--tg-theme-secondary-bg-color); }
-        .image-preview-item .delete-img-btn { position: absolute; top: -5px; right: -5px; background: var(--tg-theme-destructive-text-color); color: white; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
-        .fab { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; z-index: 1000; border: none; }
+        .image-preview { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid var(--tg-theme-secondary-bg-color); }
+
+        .fab {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 56px;
+            height: 56px;
+            background-color: var(--tg-theme-button-color);
+            color: var(--tg-theme-button-text-color);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            cursor: pointer;
+            z-index: 1000;
+            border: none;
+        }
         .detail-view { padding: 15px; background-color: var(--tg-theme-section-bg-color); }
         .detail-view h2 { margin-top: 0; font-size: 20px; color: var(--tg-theme-text-color); }
         .detail-view p { margin-bottom: 8px; line-height: 1.5; font-size: 16px; }
         .detail-view strong { font-weight: 600; color: var(--tg-theme-section-header-text-color); }
-        .image-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
-        .image-gallery img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--tg-theme-secondary-bg-color); }
+        .detail-images-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; margin-bottom: 10px; }
+        .detail-image { max-width: 100%; height: auto; max-height: 300px; border-radius: 6px; object-fit: contain; border: 1px solid var(--tg-theme-secondary-bg-color); }
+
         .loading, .empty-state { text-align: center; padding: 40px 15px; color: var(--tg-theme-hint-color); font-size: 16px; }
         .user-info { padding: 10px 15px; background-color: var(--tg-theme-secondary-bg-color); font-size: 13px; text-align: center; color: var(--tg-theme-hint-color); }
         .error-message { color: var(--tg-theme-destructive-text-color); font-size: 14px; margin-top: 5px; }
@@ -405,13 +414,21 @@ MAIN_APP_TEMPLATE = '''
     <div class="app-container">
         <div class="header">TonTalent</div>
         <div class="user-info" id="userInfo">Loading user...</div>
-        <div class="tabs">
-            <button class="tab-button active" data-tab="resumes">Resumes</button>
-            <button class="tab-button" data-tab="vacancies">Vacancies</button>
-            <button class="tab-button" data-tab="freelance_offers">Freelance</button>
+        <div class="tabs-nav">
+            <button class="tab-button active" data-tab="resumes" data-index="0">Resumes</button>
+            <button class="tab-button" data-tab="vacancies" data-index="1">Vacancies</button>
+            <button class="tab-button" data-tab="freelance_offers" data-index="2">Freelance</button>
         </div>
-        <div class="content" id="mainContent">
-            <div class="loading">Loading content...</div>
+        <div class="content">
+            <div class="tabs-container" id="tabsContainer">
+                <div class="tabs-slider" id="tabsSlider">
+                    <div class="tab-content-page" id="resumesPage"><div class="loading">Loading resumes...</div></div>
+                    <div class="tab-content-page" id="vacanciesPage"><div class="loading">Loading vacancies...</div></div>
+                    <div class="tab-content-page" id="freelance_offersPage"><div class="loading">Loading freelance offers...</div></div>
+                </div>
+            </div>
+             <div id="detailViewPage" class="tab-content-page" style="display:none;"></div>
+             <div id="formPage" class="tab-content-page" style="display:none;"></div>
         </div>
         <button class="fab" id="fabButton" title="Add New Item">+</button>
     </div>
@@ -419,40 +436,44 @@ MAIN_APP_TEMPLATE = '''
     <script>
         const tg = window.Telegram.WebApp;
         let currentUser = null;
-        let currentView = 'resumes';
-        let currentItem = null;
-        let currentItemImages = []; // For managing images in form
+        let currentTab = 'resumes';
+        let currentItem = null; 
+        const tabOrder = ['resumes', 'vacancies', 'freelance_offers'];
+        let HF_REPO_ID = "{{ REPO_ID }}"; // Will be replaced by Flask
 
         function applyThemeParams() {
-            const theme = tg.themeParams;
-            document.documentElement.style.setProperty('--tg-theme-bg-color', theme.bg_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-text-color', theme.text_color || '#000000');
-            document.documentElement.style.setProperty('--tg-theme-hint-color', theme.hint_color || '#999999');
-            document.documentElement.style.setProperty('--tg-theme-link-color', theme.link_color || '#007aff');
-            document.documentElement.style.setProperty('--tg-theme-button-color', theme.button_color || '#007aff');
-            document.documentElement.style.setProperty('--tg-theme-button-text-color', theme.button_text_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-secondary-bg-color', theme.secondary_bg_color || '#f0f0f0');
-            document.documentElement.style.setProperty('--tg-theme-header-bg-color', theme.header_bg_color || theme.secondary_bg_color || '#efeff4');
-            document.documentElement.style.setProperty('--tg-theme-section-bg-color', theme.section_bg_color || theme.bg_color || '#ffffff');
-            document.documentElement.style.setProperty('--tg-theme-section-header-text-color', theme.section_header_text_color || theme.hint_color || '#8e8e93');
-            document.documentElement.style.setProperty('--tg-theme-destructive-text-color', theme.destructive_text_color || '#ff3b30');
-            document.documentElement.style.setProperty('--tg-theme-accent-text-color', theme.accent_text_color || theme.link_color || '#007aff');
+            document.documentElement.style.setProperty('--tg-theme-bg-color', tg.themeParams.bg_color || '#ffffff');
+            document.documentElement.style.setProperty('--tg-theme-text-color', tg.themeParams.text_color || '#000000');
+            document.documentElement.style.setProperty('--tg-theme-hint-color', tg.themeParams.hint_color || '#999999');
+            document.documentElement.style.setProperty('--tg-theme-link-color', tg.themeParams.link_color || '#007aff');
+            document.documentElement.style.setProperty('--tg-theme-button-color', tg.themeParams.button_color || '#007aff');
+            document.documentElement.style.setProperty('--tg-theme-button-text-color', tg.themeParams.button_text_color || '#ffffff');
+            document.documentElement.style.setProperty('--tg-theme-secondary-bg-color', tg.themeParams.secondary_bg_color || '#f0f0f0');
+            document.documentElement.style.setProperty('--tg-theme-header-bg-color', tg.themeParams.header_bg_color || tg.themeParams.secondary_bg_color || '#efeff4');
+            document.documentElement.style.setProperty('--tg-theme-section-bg-color', tg.themeParams.section_bg_color || tg.themeParams.bg_color || '#ffffff');
+            document.documentElement.style.setProperty('--tg-theme-section-header-text-color', tg.themeParams.section_header_text_color || tg.themeParams.hint_color || '#8e8e93');
+            document.documentElement.style.setProperty('--tg-theme-destructive-text-color', tg.themeParams.destructive_text_color || '#ff3b30');
+            document.documentElement.style.setProperty('--tg-theme-accent-text-color', tg.themeParams.accent_text_color || tg.themeParams.link_color || '#007aff');
         }
         
-        async function apiCall(endpoint, method = 'GET', body = null, isFormData = false) {
+        async function apiCall(endpoint, method = 'GET', body = null) {
             const headers = {};
-            if (!isFormData) headers['Content-Type'] = 'application/json';
-            if (tg.initData) headers['X-Telegram-Auth'] = tg.initData;
-            
+            if (tg.initData) {
+                headers['X-Telegram-Auth'] = tg.initData;
+            }
+            if (body && !(body instanceof FormData)) {
+                headers['Content-Type'] = 'application/json';
+            }
+
             const options = { method, headers };
             if (body) {
-                if (isFormData) options.body = body;
-                else options.body = JSON.stringify(body);
+                options.body = (body instanceof FormData) ? body : JSON.stringify(body);
             }
+            
             try {
                 const response = await fetch(endpoint, options);
                 if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({ error: 'Request failed, server returned non-JSON error.' }));
+                    const errorData = await response.json().catch(() => ({ error: 'Request failed with status ' + response.status }));
                     throw new Error(errorData.error || `HTTP error ${response.status}`);
                 }
                 return response.json();
@@ -463,208 +484,263 @@ MAIN_APP_TEMPLATE = '''
             }
         }
 
+        function getImageUrl(filename) {
+            if (!filename) return '';
+            return \`https://huggingface.co/datasets/\${HF_REPO_ID}/resolve/main/uploads/\${filename}\`;
+        }
+
         function renderList(items, type) {
-            const contentDiv = document.getElementById('mainContent');
+            const pageDiv = document.getElementById(\`\${type}Page\`);
             if (!items || items.length === 0) {
-                contentDiv.innerHTML = `<div class="empty-state">No ${type} found. Be the first to add one!</div>`;
+                pageDiv.innerHTML = \`<div class="empty-state">No \${type} found. Be the first to add one!</div>\`;
                 return;
             }
-            contentDiv.innerHTML = items.map(item => `
-                <div class="list-item" onclick="showDetailViewWrapper('${type}', '${item.id}')">
-                    <h3>${item.title || item.name || 'Untitled'}</h3>
-                    ${type === 'vacancies' && item.company_name ? `<p><strong>Company:</strong> ${item.company_name}</p>` : ''}
-                    ${type === 'freelance_offers' && item.budget ? `<p><strong>Budget:</strong> ${item.budget}</p>` : ''}
-                    <div class="item-images-preview">
-                        ${item.images && item.images.length > 0 ? `<img src="/${item.images[0]}" alt="Preview">` : ''}
-                        ${item.images && item.images.length > 1 ? `<span class="image-count">+${item.images.length - 1}</span>` : ''}
-                         ${item.images && item.images.length === 1 && !item.images[0] ? '' : ''} 
+            pageDiv.innerHTML = items.map(item => {
+                const firstImage = item.image_filenames && item.image_filenames.length > 0 ? getImageUrl(item.image_filenames[0]) : '';
+                return \`
+                <div class="list-item" onclick="showDetailView('\${type}', '\${item.id}')">
+                    \${firstImage ? \`<img src="\${firstImage}" alt="Thumbnail" class="list-item-thumbnail">\` : ''}
+                    <div class="list-item-content">
+                        <h3>\${item.title || item.name || 'Untitled'}</h3>
+                        \${type === 'vacancies' && item.company_name ? \`<p><strong>Company:</strong> \${item.company_name}</p>\` : ''}
+                        \${type === 'freelance_offers' && item.budget ? \`<p><strong>Budget:</strong> \${item.budget}</p>\` : ''}
+                        <p class="meta">Posted by: @\${item.user_telegram_username || 'anonymous'} on \${new Date(item.timestamp).toLocaleDateString()}</p>
                     </div>
-                    <p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p>
                 </div>
-            `).join('');
-        }
-        
-        function showDetailViewWrapper(type, id) {
-            tg.HapticFeedback.impactOccurred('light');
-            showDetailView(type, id);
+            \`}).join('');
         }
-        
-        function showFormWrapper(type, itemToEdit = null) {
-            tg.HapticFeedback.impactOccurred('light');
-            showForm(type, itemToEdit);
+
+        function showPage(pageId) {
+            document.getElementById('tabsContainer').style.display = 'none';
+            document.getElementById('detailViewPage').style.display = 'none';
+            document.getElementById('formPage').style.display = 'none';
+            if (pageId === 'tabsContainer') {
+                document.getElementById(pageId).style.display = 'block';
+            } else {
+                 document.getElementById(pageId).style.display = 'block';
+            }
         }
 
         function showDetailView(type, id) {
+            tg.HapticFeedback.impactOccurred('light');
+            showPage('detailViewPage');
+            const detailPageDiv = document.getElementById('detailViewPage');
+            detailPageDiv.innerHTML = \`<div class="loading">Loading details...</div>\`;
+
             tg.BackButton.show();
-            tg.BackButton.onClick(() => { loadView(type); tg.HapticFeedback.impactOccurred('light'); });
+            tg.BackButton.onClick(() => {
+                tg.HapticFeedback.impactOccurred('light');
+                loadTab(type); 
+                tg.MainButton.hide();
+            });
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'none';
 
-            apiCall(`/api/${type}/${id}`)
+            apiCall(\`/api/\${type}/\${id}\`)
                 .then(item => {
                     currentItem = item;
-                    const contentDiv = document.getElementById('mainContent');
-                    let detailsHtml = `<div class="detail-view"><h2>${item.title || item.name}</h2>`;
-                    
-                    if (item.images && item.images.length > 0) {
-                        detailsHtml += '<div class="image-gallery">';
-                        item.images.forEach(imgPath => {
-                            detailsHtml += `<img src="/${imgPath}" alt="Image for ${item.title || item.name}">`;
+                    let imagesHtml = '';
+                    if (item.image_filenames && item.image_filenames.length > 0) {
+                        imagesHtml = '<div class="detail-images-container">';
+                        item.image_filenames.forEach(filename => {
+                            imagesHtml += \`<img src="\${getImageUrl(filename)}" alt="Image" class="detail-image">\`;
                         });
-                        detailsHtml += '</div>';
+                        imagesHtml += '</div>';
                     }
 
+                    let detailsHtml = \`<div class="detail-view"><h2>\${item.title || item.name}</h2>\`;
+                    detailsHtml += imagesHtml;
                     if (type === 'resumes') {
-                        detailsHtml += `
-                            <p><strong>Skills:</strong> ${item.skills || 'N/A'}</p>
-                            <p><strong>Experience:</strong><br>${item.experience ? item.experience.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Education:</strong><br>${item.education ? item.education.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Contact:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
-                            ${item.portfolio_link ? `<p><strong>Portfolio:</strong> <a href="${item.portfolio_link}" target="_blank" style="color: var(--tg-theme-link-color);">${item.portfolio_link}</a></p>` : ''}
-                        `;
+                        detailsHtml += \`
+                            <p><strong>Skills:</strong> \${item.skills || 'N/A'}</p>
+                            <p><strong>Experience:</strong><br>\${item.experience ? item.experience.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Education:</strong><br>\${item.education ? item.education.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Contact:</strong> \${item.contact || \`@\${item.user_telegram_username}\`}</p>
+                            \${item.portfolio_link ? \`<p><strong>Portfolio:</strong> <a href="\${item.portfolio_link}" target="_blank">\${item.portfolio_link}</a></p>\` : ''}
+                        \`;
                     } else if (type === 'vacancies') {
-                        detailsHtml += `
-                            <p><strong>Company:</strong> ${item.company_name || 'N/A'}</p>
-                            <p><strong>Description:</strong><br>${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Requirements:</strong><br>${item.requirements ? item.requirements.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Salary:</strong> ${item.salary || 'N/A'}</p>
-                            <p><strong>Location:</strong> ${item.location || 'N/A'}</p>
-                            <p><strong>Contact/Apply:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
-                        `;
+                        detailsHtml += \`
+                            <p><strong>Company:</strong> \${item.company_name || 'N/A'}</p>
+                            <p><strong>Description:</strong><br>\${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Requirements:</strong><br>\${item.requirements ? item.requirements.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Salary:</strong> \${item.salary || 'N/A'}</p>
+                            <p><strong>Location:</strong> \${item.location || 'N/A'}</p>
+                            <p><strong>Contact/Apply:</strong> \${item.contact || \`@\${item.user_telegram_username}\`}</p>
+                        \`;
                     } else if (type === 'freelance_offers') {
-                        detailsHtml += `
-                            <p><strong>Description:</strong><br>${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
-                            <p><strong>Budget:</strong> ${item.budget || 'N/A'}</p>
-                            <p><strong>Deadline:</strong> ${item.deadline || 'N/A'}</p>
-                            <p><strong>Skills Needed:</strong> ${item.skills_needed || 'N/A'}</p>
-                            <p><strong>Contact:</strong> ${item.contact || `@${item.user_telegram_username}`}</p>
-                        `;
+                        detailsHtml += \`
+                            <p><strong>Description:</strong><br>\${item.description ? item.description.replace(/\\n/g, '<br>') : 'N/A'}</p>
+                            <p><strong>Budget:</strong> \${item.budget || 'N/A'}</p>
+                            <p><strong>Deadline:</strong> \${item.deadline || 'N/A'}</p>
+                            <p><strong>Skills Needed:</strong> \${item.skills_needed || 'N/A'}</p>
+                            <p><strong>Contact:</strong> \${item.contact || \`@\${item.user_telegram_username}\`}</p>
+                        \`;
                     }
-                    detailsHtml += `<p class="meta">Posted by: @${item.user_telegram_username || 'anonymous'} on ${new Date(item.timestamp).toLocaleDateString()}</p></div>`;
-                    contentDiv.innerHTML = detailsHtml;
+                    detailsHtml += \`<p class="meta">Posted by: @\${item.user_telegram_username || 'anonymous'} on \${new Date(item.timestamp).toLocaleDateString()}</p></div>\`;
+                    detailPageDiv.innerHTML = detailsHtml;
 
-                    if (currentUser && item.user_id === currentUser.id) {
+                    if (currentUser && item.user_id === String(currentUser.id)) {
                         tg.MainButton.setText('Edit My Post');
-                        tg.MainButton.onClick(() => showFormWrapper(type, item));
+                        tg.MainButton.onClick(() => showForm(type, item));
                         tg.MainButton.show();
                     }
                 })
                 .catch(err => {
-                    document.getElementById('mainContent').innerHTML = `<div class="empty-state">Error loading details.</div>`;
+                    detailPageDiv.innerHTML = \`<div class="empty-state">Error loading details.</div>\`;
                 });
         }
         
         function showForm(type, itemToEdit = null) {
+            tg.HapticFeedback.impactOccurred('light');
+            showPage('formPage');
+            const formPageDiv = document.getElementById('formPage');
             currentItem = itemToEdit;
-            currentItemImages = itemToEdit && itemToEdit.images ? [...itemToEdit.images] : [];
 
             tg.BackButton.show();
             tg.BackButton.onClick(() => {
                 tg.HapticFeedback.impactOccurred('light');
                 if (itemToEdit) showDetailView(type, itemToEdit.id);
-                else loadView(type);
+                else loadTab(type);
+                tg.MainButton.hide();
             });
             document.getElementById('fabButton').style.display = 'none';
 
-            const contentDiv = document.getElementById('mainContent');
-            let formHtml = `<div class="form-container"><h2>${itemToEdit ? 'Edit' : 'New'} ${type.slice(0, -1)}</h2>`;
+            let formHtml = \`<div class="form-container"><h2>\${itemToEdit ? 'Edit' : 'New'} \${type.slice(0, -1)}</h2>\`;
             
             if (type === 'resumes') {
-                formHtml += `
-                    <div class="form-group"><label for="name">Full Name</label><input type="text" id="name" value="${itemToEdit?.name || ''}" required></div>
-                    <div class="form-group"><label for="title">Job Title / Desired Position</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
-                    <div class="form-group"><label for="skills">Skills (comma separated)</label><textarea id="skills">${itemToEdit?.skills || ''}</textarea></div>
-                    <div class="form-group"><label for="experience">Experience</label><textarea id="experience">${itemToEdit?.experience || ''}</textarea></div>
-                    <div class="form-group"><label for="education">Education</label><textarea id="education">${itemToEdit?.education || ''}</textarea></div>
-                    <div class="form-group"><label for="contact">Contact Info</label><input type="text" id="contact" value="${itemToEdit?.contact || ''}"></div>
-                    <div class="form-group"><label for="portfolio_link">Portfolio Link</label><input type="url" id="portfolio_link" value="${itemToEdit?.portfolio_link || ''}"></div>
-                `;
+                formHtml += \`
+                    <div class="form-group">
+                        <label for="name">Full Name</label>
+                        <input type="text" id="name" value="\${itemToEdit?.name || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="title">Job Title / Desired Position</label>
+                        <input type="text" id="title" value="\${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="skills">Skills (comma separated)</label>
+                        <textarea id="skills">\${itemToEdit?.skills || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="experience">Experience</label>
+                        <textarea id="experience">\${itemToEdit?.experience || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="education">Education</label>
+                        <textarea id="education">\${itemToEdit?.education || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="contact">Contact Info (e.g., email, or leave blank to use Telegram)</label>
+                        <input type="text" id="contact" value="\${itemToEdit?.contact || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="portfolio_link">Portfolio Link (optional)</label>
+                        <input type="url" id="portfolio_link" value="\${itemToEdit?.portfolio_link || ''}">
+                    </div>
+                \`;
             } else if (type === 'vacancies') {
-                formHtml += `
-                    <div class="form-group"><label for="company_name">Company Name</label><input type="text" id="company_name" value="${itemToEdit?.company_name || ''}" required></div>
-                    <div class="form-group"><label for="title">Job Title</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
-                    <div class="form-group"><label for="description">Description</label><textarea id="description">${itemToEdit?.description || ''}</textarea></div>
-                    <div class="form-group"><label for="requirements">Requirements</label><textarea id="requirements">${itemToEdit?.requirements || ''}</textarea></div>
-                    <div class="form-group"><label for="salary">Salary/Compensation</label><input type="text" id="salary" value="${itemToEdit?.salary || ''}"></div>
-                    <div class="form-group"><label for="location">Location</label><input type="text" id="location" value="${itemToEdit?.location || ''}"></div>
-                    <div class="form-group"><label for="contact">Contact Info / How to Apply</label><textarea id="contact">${itemToEdit?.contact || ''}</textarea></div>
-                `;
+                formHtml += \`
+                    <div class="form-group">
+                        <label for="company_name">Company Name</label>
+                        <input type="text" id="company_name" value="\${itemToEdit?.company_name || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="title">Job Title</label>
+                        <input type="text" id="title" value="\${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="description">Description</label>
+                        <textarea id="description">\${itemToEdit?.description || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="requirements">Requirements</label>
+                        <textarea id="requirements">\${itemToEdit?.requirements || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="salary">Salary/Compensation</label>
+                        <input type="text" id="salary" value="\${itemToEdit?.salary || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="location">Location (e.g., Remote, City)</label>
+                        <input type="text" id="location" value="\${itemToEdit?.location || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="contact">Contact Info / How to Apply</label>
+                        <textarea id="contact">\${itemToEdit?.contact || ''}</textarea>
+                    </div>
+                \`;
             } else if (type === 'freelance_offers') {
-                formHtml += `
-                    <div class="form-group"><label for="title">Project Title</label><input type="text" id="title" value="${itemToEdit?.title || ''}" required></div>
-                    <div class="form-group"><label for="description">Description of Work</label><textarea id="description">${itemToEdit?.description || ''}</textarea></div>
-                    <div class="form-group"><label for="budget">Budget</label><input type="text" id="budget" value="${itemToEdit?.budget || ''}"></div>
-                    <div class="form-group"><label for="deadline">Expected Deadline</label><input type="text" id="deadline" value="${itemToEdit?.deadline || ''}"></div>
-                    <div class="form-group"><label for="skills_needed">Skills Needed</label><textarea id="skills_needed">${itemToEdit?.skills_needed || ''}</textarea></div>
-                    <div class="form-group"><label for="contact">Contact Info</label><input type="text" id="contact" value="${itemToEdit?.contact || ''}"></div>
-                `;
+                formHtml += \`
+                    <div class="form-group">
+                        <label for="title">Project Title</label>
+                        <input type="text" id="title" value="\${itemToEdit?.title || ''}" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="description">Description of Work</label>
+                        <textarea id="description">\${itemToEdit?.description || ''}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="budget">Budget</label>
+                        <input type="text" id="budget" value="\${itemToEdit?.budget || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="deadline">Expected Deadline</label>
+                        <input type="text" id="deadline" value="\${itemToEdit?.deadline || ''}">
+                    </div>
+                    <div class="form-group">
+                        <label for="skills_needed">Skills Needed (comma separated)</label>
+                        <textarea id="skills_needed">\${itemToEdit?.skills_needed || ''}</textarea>
+                    </div>
+                     <div class="form-group">
+                        <label for="contact">Contact Info (or leave blank to use Telegram)</label>
+                        <input type="text" id="contact" value="\${itemToEdit?.contact || ''}">
+                    </div>
+                \`;
             }
-            formHtml += `
+            formHtml += \`
                 <div class="form-group">
-                    <label for="item_images">Images (up to 10)</label>
-                    <input type="file" id="item_images" multiple accept="image/*" onchange="previewImages(event)">
-                    <div id="image_previews_container" class="image-preview-container"></div>
+                    <label for="images">Images (up to 10)</label>
+                    <input type="file" id="images" multiple accept="image/*">
+                    <div id="imagePreviewContainer" class="image-preview-container"></div>
+                    <small>\${itemToEdit && itemToEdit.image_filenames && itemToEdit.image_filenames.length > 0 ? \`Currently \${itemToEdit.image_filenames.length} image(s). Uploading new images will replace existing ones.\` : ''}</small>
                 </div>
-            `;
-            formHtml += `<div id="formError" class="error-message"></div></div>`;
-            contentDiv.innerHTML = formHtml;
-            renderImagePreviews();
+            \`;
+            formHtml += \`<div id="formError" class="error-message"></div></div>\`;
+            formPageDiv.innerHTML = formHtml;
+
+            const imageUploadInput = document.getElementById('images');
+            const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+            imageUploadInput.addEventListener('change', function(event) {
+                imagePreviewContainer.innerHTML = ''; // Clear previous previews
+                if (this.files.length > 10) {
+                    tg.showAlert('You can upload a maximum of 10 images.');
+                    this.value = ''; // Clear the input
+                    return;
+                }
+                Array.from(this.files).forEach(file => {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        const img = document.createElement('img');
+                        img.src = e.target.result;
+                        img.classList.add('image-preview');
+                        imagePreviewContainer.appendChild(img);
+                    }
+                    reader.readAsDataURL(file);
+                });
+            });
 
 
             tg.MainButton.setText(itemToEdit ? 'Save Changes' : 'Post');
             tg.MainButton.show();
             tg.MainButton.onClick(() => handleSubmit(type, itemToEdit ? itemToEdit.id : null));
         }
-        
-        function previewImages(event) {
-            const files = event.target.files;
-            const remainingSlots = 10 - currentItemImages.length;
-            
-            for (let i = 0; i < Math.min(files.length, remainingSlots); i++) {
-                const file = files[i];
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    // Store as object to differentiate new files (File object) from existing (string path)
-                    currentItemImages.push({ file: file, previewUrl: e.target.result }); 
-                    renderImagePreviews();
-                }
-                reader.readAsDataURL(file);
-            }
-            if (currentItemImages.length >= 10) {
-                tg.showAlert('Maximum 10 images allowed.');
-            }
-            // Clear the input value so the same file can be re-added if removed.
-            event.target.value = null; 
-        }
-
-        function renderImagePreviews() {
-            const container = document.getElementById('image_previews_container');
-            if (!container) return;
-            container.innerHTML = '';
-            currentItemImages.forEach((img, index) => {
-                const imgSrc = typeof img === 'string' ? '/' + img : img.previewUrl;
-                const previewItem = document.createElement('div');
-                previewItem.classList.add('image-preview-item');
-                previewItem.innerHTML = \`
-                    <img src="\${imgSrc}" alt="Preview">
-                    <button class="delete-img-btn" onclick="removeImage(\${index})">×</button>
-                \`;
-                container.appendChild(previewItem);
-            });
-        }
-
-        function removeImage(index) {
-            currentItemImages.splice(index, 1);
-            renderImagePreviews();
-            tg.HapticFeedback.impactOccurred('light');
-        }
-
 
         function handleSubmit(type, itemId = null) {
-            const payload = {};
+            const formData = new FormData();
             let isValid = true;
             document.getElementById('formError').textContent = '';
 
+            const payload = {};
             if (type === 'resumes') {
                 payload.name = document.getElementById('name').value.trim();
                 payload.title = document.getElementById('title').value.trim();
@@ -699,28 +775,24 @@ MAIN_APP_TEMPLATE = '''
                 return;
             }
             
-            tg.MainButton.showProgress();
-
-            const formData = new FormData();
-            // Existing images (paths)
-            payload.images = currentItemImages.filter(img => typeof img === 'string');
             formData.append('payload', JSON.stringify(payload));
-            
-            // New images (File objects)
-            currentItemImages.forEach(img => {
-                if (typeof img !== 'string' && img.file) { // It's a new file object
-                    formData.append('images', img.file);
+            const imageFiles = document.getElementById('images').files;
+            if (imageFiles.length > 0) {
+                for (let i = 0; i < Math.min(imageFiles.length, 10); i++) {
+                    formData.append('images', imageFiles[i]);
                 }
-            });
+            }
+            
+            tg.MainButton.showProgress();
 
             const method = itemId ? 'PUT' : 'POST';
-            const endpoint = itemId ? `/api/${type}/${itemId}` : `/api/${type}`;
+            const endpoint = itemId ? \`/api/\${type}/\${itemId}\` : \`/api/\${type}\`;
 
-            apiCall(endpoint, method, formData, true)
+            apiCall(endpoint, method, formData)
                 .then(response => {
                     tg.HapticFeedback.notificationOccurred('success');
                     tg.MainButton.hideProgress();
-                    loadView(type); 
+                    loadTab(type, true); // Force refresh data for the tab
                 })
                 .catch(err => {
                     tg.HapticFeedback.notificationOccurred('error');
@@ -729,88 +801,105 @@ MAIN_APP_TEMPLATE = '''
                 });
         }
 
-        function loadView(tabName) {
-            currentView = tabName;
+        function setActiveTabButton(tabName) {
             document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
-            const activeTabButton = document.querySelector(\`.tab-button[data-tab="\${tabName}"]\`);
-            if (activeTabButton) activeTabButton.classList.add('active');
+            document.querySelector(\`.tab-button[data-tab="\${tabName}"]\`).classList.add('active');
+        }
+        
+        function loadTab(tabName, forceRefresh = false) {
+            currentTab = tabName;
+            setActiveTabButton(tabName);
+            showPage('tabsContainer');
+
+            const slider = document.getElementById('tabsSlider');
+            const tabIndex = tabOrder.indexOf(tabName);
+            slider.style.transform = \`translateX(-\${tabIndex * 100}vw)\`;
             
-            document.getElementById('mainContent').innerHTML = \`<div class="loading">Loading \${tabName}...</div>\`;
+            tg.HapticFeedback.selectionChanged();
             tg.BackButton.hide();
             tg.MainButton.hide();
             document.getElementById('fabButton').style.display = 'block';
 
-            apiCall(`/api/\${tabName}`)
-                .then(data => renderList(data, tabName))
-                .catch(err => {
-                    document.getElementById('mainContent').innerHTML = \`<div class="empty-state">Error loading \${tabName}.</div>\`;
-                });
+            const pageDiv = document.getElementById(\`\${tabName}Page\`);
+            // Only load data if page is empty or forceRefresh is true
+            if (forceRefresh || pageDiv.querySelector('.loading') || pageDiv.querySelector('.empty-state') || pageDiv.children.length === 0) {
+                pageDiv.innerHTML = \`<div class="loading">Loading \${tabName}...</div>\`;
+                apiCall(\`/api/\${tabName}\`)
+                    .then(data => renderList(data, tabName))
+                    .catch(err => {
+                        pageDiv.innerHTML = \`<div class="empty-state">Error loading \${tabName}.</div>\`;
+                    });
+            }
         }
         
+        // Swipe navigation
         let touchstartX = 0;
         let touchendX = 0;
-        const swipeThreshold = 75; 
+        const swipeThreshold = 50; // Minimum distance for a swipe
 
-        function handleTouchStart(event) {
-            touchstartX = event.changedTouches[0].screenX;
-        }
-
-        function handleTouchEnd(event) {
-            touchendX = event.changedTouches[0].screenX;
-            handleSwipeGesture();
-        }
+        const tabsContainer = document.getElementById('tabsContainer');
 
-        function handleSwipeGesture() {
-            const deltaX = touchendX - touchstartX;
-            if (Math.abs(deltaX) < swipeThreshold) return; 
+        tabsContainer.addEventListener('touchstart', e => {
+            touchstartX = e.changedTouches[0].screenX;
+        }, { passive: true });
 
-            const tabs = ['resumes', 'vacancies', 'freelance_offers'];
-            let currentIndex = tabs.indexOf(currentView);
+        tabsContainer.addEventListener('touchend', e => {
+            touchendX = e.changedTouches[0].screenX;
+            handleSwipe();
+        }, { passive: true });
 
-            if (deltaX < 0) { 
-                currentIndex = (currentIndex + 1) % tabs.length;
-            } else { 
-                currentIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        function handleSwipe() {
+            const currentTabIndex = tabOrder.indexOf(currentTab);
+            if (touchendX < touchstartX - swipeThreshold) { // Swiped left
+                if (currentTabIndex < tabOrder.length - 1) {
+                    loadTab(tabOrder[currentTabIndex + 1]);
+                }
             }
-            if (tabs[currentIndex] !== currentView) {
-                loadView(tabs[currentIndex]);
-                tg.HapticFeedback.selectionChanged();
+            if (touchendX > touchstartX + swipeThreshold) { // Swiped right
+                if (currentTabIndex > 0) {
+                    loadTab(tabOrder[currentTabIndex - 1]);
+                }
             }
         }
 
         async function init() {
             tg.ready();
             applyThemeParams();
-            tg.onEvent('themeChanged', applyThemeParams);
             tg.expand();
             tg.enableClosingConfirmation();
+            if (tg.themeParams.bg_color) {
+                tg.setHeaderColor(tg.themeParams.secondary_bg_color || tg.themeParams.bg_color);
+            }
+
 
             document.getElementById('userInfo').textContent = \`Welcome, \${tg.initDataUnsafe.user?.first_name || 'User'}! (@\${tg.initDataUnsafe.user?.username || 'anonymous'})\`;
             
             try {
                 const authResponse = await apiCall('/api/auth_user', 'POST', { init_data: tg.initData });
                 currentUser = authResponse.user;
+                HF_REPO_ID = authResponse.repo_id; // Get repo_id from backend
                 if (currentUser) {
                      document.getElementById('userInfo').textContent = \`Logged in as: \${currentUser.first_name} (@\${currentUser.username})\`;
                 }
             } catch (error) {
                 console.error("Auth error:", error);
                 document.getElementById('userInfo').textContent = \`Auth failed. Limited functionality.\`;
+                tg.showAlert("Authentication with the server failed. Some features might not work correctly.");
             }
 
+
             document.querySelectorAll('.tab-button').forEach(button => {
                 button.addEventListener('click', () => {
-                    loadView(button.dataset.tab);
                     tg.HapticFeedback.impactOccurred('light');
+                    loadTab(button.dataset.tab);
                 });
             });
-            document.getElementById('fabButton').addEventListener('click', () => showFormWrapper(currentView));
+            document.getElementById('fabButton').addEventListener('click', () => {
+                tg.HapticFeedback.impactOccurred('medium');
+                showForm(currentTab);
+            });
             
-            const mainContentEl = document.getElementById('mainContent');
-            mainContentEl.addEventListener('touchstart', handleTouchStart, { passive: true });
-            mainContentEl.addEventListener('touchend', handleTouchEnd, { passive: true });
-
-            loadView('resumes');
+            loadTab('resumes');
         }
 
         init();
@@ -835,6 +924,7 @@ ADMIN_TEMPLATE = '''
         .item:last-child { border-bottom: none; }
         .item h3 { margin: 0 0 5px 0; }
         .item p { margin: 3px 0; font-size: 0.9em; color: #555; }
+        .item-images img { max-width: 50px; max-height: 50px; margin-right: 5px; border: 1px solid #ccc; }
         .button { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; margin-right: 5px; }
         .button-primary { background-color: #007bff; color: white; }
         .button-danger { background-color: #dc3545; color: white; }
@@ -861,73 +951,47 @@ ADMIN_TEMPLATE = '''
         <div class="section">
             <h2>Data Synchronization with Hugging Face</h2>
             <div class="sync-buttons">
-                <form method="POST" action="{{ url_for('force_upload_admin') }}" onsubmit="return confirm('Upload local data (including images) to Hugging Face? This will overwrite server data.');">
-                    <button type="submit" class="button button-primary">Upload All to HF</button>
+                <form method="POST" action="{{ url_for('force_upload_admin') }}" onsubmit="return confirm('Upload local data to Hugging Face? This will overwrite server data.');">
+                    <button type="submit" class="button button-primary">Upload DB to HF</button>
                 </form>
-                <form method="POST" action="{{ url_for('force_download_admin') }}" onsubmit="return confirm('Download data (including images) from Hugging Face? This will overwrite local data.');">
-                    <button type="submit" class="button button-secondary">Download All from HF</button>
+                <form method="POST" action="{{ url_for('force_download_admin') }}" onsubmit="return confirm('Download data from Hugging Face? This will overwrite local data.');">
+                    <button type="submit" class="button button-secondary">Download DB from HF</button>
                 </form>
             </div>
-            <p style="font-size: 0.8em; color: #666;">Automatic backup runs every 30 minutes if HF_TOKEN_WRITE is set (uploads DB file and referenced images).</p>
+            <p style="font-size: 0.8em; color: #666;">Automatic backup runs every 30 minutes if HF_TOKEN_WRITE is set.</p>
+            <p style="font-size: 0.8em; color: #666;">HF Repo ID: {{ REPO_ID }}</p>
         </div>
 
+        {% for item_type_plural, items_list in [('Resumes', resumes), ('Vacancies', vacancies), ('Freelance Offers', freelance_offers)] %}
         <div class="section">
-            <h2>Resumes ({{ resumes|length }})</h2>
-            {% for resume in resumes %}
+            <h2>{{ item_type_plural }} ({{ items_list|length }})</h2>
+            {% for item in items_list %}
             <div class="item">
-                <h3>{{ resume.name }} - {{ resume.title }}</h3>
-                <p>User ID: {{ resume.user_id }} (@{{ resume.user_telegram_username }})</p>
-                <p>Images: {{ resume.images|length if resume.images else 0 }}</p>
-                <p>Posted: {{ resume.timestamp|truncate(19, True, '') }}</p>
-                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this resume and its images?');">
-                    <input type="hidden" name="item_type" value="resumes">
-                    <input type="hidden" name="item_id" value="{{ resume.id }}">
-                    <button type="submit" class="button button-danger">Delete</button>
-                </form>
-            </div>
-            {% else %}
-            <p>No resumes found.</p>
-            {% endfor %}
-        </div>
-
-        <div class="section">
-            <h2>Vacancies ({{ vacancies|length }})</h2>
-            {% for vacancy in vacancies %}
-            <div class="item">
-                <h3>{{ vacancy.title }} - {{ vacancy.company_name }}</h3>
-                <p>User ID: {{ vacancy.user_id }} (@{{ vacancy.user_telegram_username }})</p>
-                 <p>Images: {{ vacancy.images|length if vacancy.images else 0 }}</p>
-                <p>Posted: {{ vacancy.timestamp|truncate(19, True, '') }}</p>
-                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this vacancy and its images?');">
-                    <input type="hidden" name="item_type" value="vacancies">
-                    <input type="hidden" name="item_id" value="{{ vacancy.id }}">
-                    <button type="submit" class="button button-danger">Delete</button>
-                </form>
-            </div>
-            {% else %}
-            <p>No vacancies found.</p>
-            {% endfor %}
-        </div>
-
-        <div class="section">
-            <h2>Freelance Offers ({{ freelance_offers|length }})</h2>
-            {% for offer in freelance_offers %}
-            <div class="item">
-                <h3>{{ offer.title }}</h3>
-                <p>User ID: {{ offer.user_id }} (@{{ offer.user_telegram_username }})</p>
-                <p>Budget: {{ offer.budget }}</p>
-                <p>Images: {{ offer.images|length if offer.images else 0 }}</p>
-                <p>Posted: {{ offer.timestamp|truncate(19, True, '') }}</p>
-                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this freelance offer and its images?');">
-                    <input type="hidden" name="item_type" value="freelance_offers">
-                    <input type="hidden" name="item_id" value="{{ offer.id }}">
+                <h3>{{ item.name or item.title }} {% if item.company_name %}- {{ item.company_name }}{% endif %}</h3>
+                <p>ID: {{ item.id }}</p>
+                <p>User ID: {{ item.user_id }} (@{{ item.user_telegram_username }})</p>
+                <p>Posted: {{ item.timestamp }}</p>
+                {% if item.image_filenames and item.image_filenames|length > 0 %}
+                <div class="item-images">
+                    <p>Images:</p>
+                    {% for filename in item.image_filenames %}
+                    <a href="https://huggingface.co/datasets/{{REPO_ID}}/resolve/main/uploads/{{filename}}" target="_blank">
+                        <img src="https://huggingface.co/datasets/{{REPO_ID}}/resolve/main/uploads/{{filename}}" alt="{{filename}}">
+                    </a>
+                    {% endfor %}
+                </div>
+                {% endif %}
+                <form method="POST" action="{{ url_for('admin_delete_item') }}" style="display:inline;" onsubmit="return confirm('Delete this {{ item_type_plural[:-1].lower() }}? This will also delete its images from Hugging Face.');">
+                    <input type="hidden" name="item_type" value="{{ item_type_plural.lower().replace(' ', '_') }}">
+                    <input type="hidden" name="item_id" value="{{ item.id }}">
                     <button type="submit" class="button button-danger">Delete</button>
                 </form>
             </div>
             {% else %}
-            <p>No freelance offers found.</p>
+            <p>No {{ item_type_plural.lower() }} found.</p>
             {% endfor %}
         </div>
+        {% endfor %}
     </div>
 </body>
 </html>
@@ -935,12 +999,7 @@ ADMIN_TEMPLATE = '''
 
 @app.route('/')
 def main_app_view():
-    return render_template_string(MAIN_APP_TEMPLATE)
-
-@app.route('/uploads/<path:filename>')
-def uploaded_file(filename):
-    return send_from_directory(os.path.join(app.root_path, app.config['UPLOAD_FOLDER']), filename)
-
+    return render_template_string(MAIN_APP_TEMPLATE, REPO_ID=REPO_ID)
 
 @app.route('/api/auth_user', methods=['POST'])
 def auth_user():
@@ -952,33 +1011,33 @@ def auth_user():
         else:
             return jsonify({"error": "Authentication data not provided"}), 401
 
-    is_valid, user_data_tg = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
+    is_valid, user_data_from_tg = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
 
-    if not is_valid or not user_data_tg:
+    if not is_valid or not user_data_from_tg:
         return jsonify({"error": "Invalid authentication data"}), 403
 
     data = load_data()
     users = data.get('users', {})
-    user_id_str = str(user_data_tg.get('id'))
+    user_id_str = str(user_data_from_tg.get('id'))
 
     if user_id_str not in users:
         users[user_id_str] = {
-            'id': user_data_tg.get('id'),
-            'first_name': user_data_tg.get('first_name'),
-            'last_name': user_data_tg.get('last_name'),
-            'username': user_data_tg.get('username'),
-            'language_code': user_data_tg.get('language_code'),
-            'photo_url': user_data_tg.get('photo_url'),
+            'id': user_data_from_tg.get('id'),
+            'first_name': user_data_from_tg.get('first_name'),
+            'last_name': user_data_from_tg.get('last_name'),
+            'username': user_data_from_tg.get('username'),
+            'language_code': user_data_from_tg.get('language_code'),
+            'photo_url': user_data_from_tg.get('photo_url'),
             'first_seen': datetime.now().isoformat()
         }
     users[user_id_str]['last_seen'] = datetime.now().isoformat()
     data['users'] = users
-    save_data(data) # Only saves DATA_FILE, image sync happens elsewhere or periodically
+    save_data(data)
     
-    return jsonify({"message": "User authenticated", "user": users[user_id_str]}), 200
+    return jsonify({"message": "User authenticated", "user": users[user_id_str], "repo_id": REPO_ID}), 200
 
-def get_authenticated_user(request_headers):
-    auth_data_str = request_headers.get('X-Telegram-Auth')
+def get_authenticated_user(request_obj):
+    auth_data_str = request_obj.headers.get('X-Telegram-Auth')
     if not auth_data_str:
         return None
     is_valid, user_data = verify_telegram_auth_data(auth_data_str, TELEGRAM_BOT_TOKEN)
@@ -1004,10 +1063,56 @@ def get_item(item_type, item_id):
         return jsonify(item), 200
     return jsonify({"error": "Item not found"}), 404
 
+def process_and_upload_images(files, existing_image_filenames=None):
+    uploaded_image_filenames = []
+    if existing_image_filenames is None:
+        existing_image_filenames = []
+
+    # Delete old images if new ones are provided
+    if files and existing_image_filenames:
+        for old_filename in existing_image_filenames:
+            delete_image_from_hf(old_filename)
+        existing_image_filenames = [] # Reset existing if new ones are uploaded
+
+    api = HfApi()
+    for file in files:
+        if file and allowed_file(file.filename):
+            original_filename = secure_filename(file.filename)
+            extension = os.path.splitext(original_filename)[1]
+            unique_filename = f"{uuid.uuid4()}{extension}"
+            temp_local_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+            
+            try:
+                file.save(temp_local_path)
+                
+                commit_msg = f"Upload image {unique_filename} {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
+                success = upload_file_to_hf_with_retry(
+                    local_path=temp_local_path,
+                    path_in_repo=f"uploads/{unique_filename}",
+                    repo_id=REPO_ID,
+                    token=HF_TOKEN_WRITE,
+                    commit_message=commit_msg
+                )
+                if success:
+                    uploaded_image_filenames.append(unique_filename)
+                else:
+                    logging.error(f"Failed to upload image {unique_filename} to HF after retries.")
+
+            except Exception as e:
+                logging.error(f"Error processing or uploading image {original_filename}: {e}")
+            finally:
+                if os.path.exists(temp_local_path):
+                    os.remove(temp_local_path)
+    
+    # If new files were uploaded, these are the new image list. Otherwise, keep existing.
+    return uploaded_image_filenames if files else existing_image_filenames
+
+
 @app.route('/api/<item_type>', methods=['POST'])
 def create_item(item_type):
-    user = get_authenticated_user(request.headers)
-    if not user: return jsonify({"error": "Authentication required"}), 401
+    user = get_authenticated_user(request)
+    if not user:
+        return jsonify({"error": "Authentication required"}), 401
 
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
@@ -1016,7 +1121,7 @@ def create_item(item_type):
         return jsonify({"error": "Missing payload in form data"}), 400
     
     try:
-        req_data = json.loads(request.form.get('payload'))
+        req_data = json.loads(request.form['payload'])
     except json.JSONDecodeError:
         return jsonify({"error": "Invalid JSON payload"}), 400
 
@@ -1025,69 +1130,73 @@ def create_item(item_type):
         "user_id": str(user.get('id')),
         "user_telegram_username": user.get('username', 'unknown'),
         "timestamp": datetime.now().isoformat(),
-        "images": []
+        "image_filenames": [] 
     }
 
-    uploaded_image_paths = []
-    uploaded_files = request.files.getlist('images')
-    if len(uploaded_files) > MAX_IMAGE_FILES:
-        return jsonify({"error": f"Maximum {MAX_IMAGE_FILES} images allowed."}), 400
-
-    for file in uploaded_files:
-        if file and allowed_file(file.filename):
-            filename = secure_filename(file.filename)
-            unique_filename = str(uuid.uuid4()) + os.path.splitext(filename)[1]
-            local_save_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
-            
-            try:
-                file.save(local_save_path)
-                # Relative path for storage in JSON and for HF repo
-                repo_image_path = os.path.join(UPLOADS_DIR_NAME, unique_filename).replace("\\", "/")
-                uploaded_image_paths.append(repo_image_path)
-                # Upload this single image to HF immediately
-                upload_db_to_hf(specific_file_local_path=local_save_path, specific_file_repo_path=repo_image_path)
-            except Exception as e:
-                logging.error(f"Failed to save or upload image {unique_filename}: {e}")
-                # Potentially cleanup already saved file if upload fails, or handle later
-                # For now, if save fails, it won't be added to new_item['images']
-        elif file: # File present but not allowed type
-            logging.warning(f"Skipped file with disallowed extension: {file.filename}")
-
-
-    new_item['images'] = uploaded_image_paths
-
     if item_type == 'resumes':
-        new_item.update({k: req_data.get(k, '') for k in ['name', 'title', 'skills', 'experience', 'education', 'contact', 'portfolio_link']})
-        if not new_item['name'] or not new_item['title']: return jsonify({"error": "Missing name or title"}), 400
+        required_fields = ['name', 'title']
+        for field in required_fields:
+            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+        new_item.update({
+            "name": req_data.get('name'), "title": req_data.get('title'),
+            "skills": req_data.get('skills', ''), "experience": req_data.get('experience', ''),
+            "education": req_data.get('education', ''), "contact": req_data.get('contact', ''),
+            "portfolio_link": req_data.get('portfolio_link', '')
+        })
     elif item_type == 'vacancies':
-        new_item.update({k: req_data.get(k, '') for k in ['company_name', 'title', 'description', 'requirements', 'salary', 'location', 'contact']})
-        if not new_item['company_name'] or not new_item['title']: return jsonify({"error": "Missing company name or title"}), 400
+        required_fields = ['company_name', 'title']
+        for field in required_fields:
+            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+        new_item.update({
+            "company_name": req_data.get('company_name'), "title": req_data.get('title'),
+            "description": req_data.get('description', ''), "requirements": req_data.get('requirements', ''),
+            "salary": req_data.get('salary', ''), "location": req_data.get('location', ''),
+            "contact": req_data.get('contact', '')
+        })
     elif item_type == 'freelance_offers':
-        new_item.update({k: req_data.get(k, '') for k in ['title', 'description', 'budget', 'deadline', 'skills_needed', 'contact']})
-        if not new_item['title']: return jsonify({"error": "Missing title"}), 400
+        required_fields = ['title']
+        for field in required_fields:
+            if not req_data.get(field): return jsonify({"error": f"Missing field: {field}"}), 400
+        new_item.update({
+            "title": req_data.get('title'), "description": req_data.get('description', ''),
+            "budget": req_data.get('budget', ''), "deadline": req_data.get('deadline', ''),
+            "skills_needed": req_data.get('skills_needed', ''), "contact": req_data.get('contact', '')
+        })
     
+    image_files = request.files.getlist('images')
+    if image_files:
+        if not HF_TOKEN_WRITE:
+            return jsonify({"error": "Image upload configured, but HF_TOKEN_WRITE is not set on server."}), 500
+        new_item['image_filenames'] = process_and_upload_images(image_files[:app.config['MAX_IMAGE_UPLOADS']])
+
     data = load_data()
     data[item_type].append(new_item)
-    save_data(data) # This saves DATA_FILE and uploads it. Images already uploaded one by one.
+    save_data(data)
     return jsonify(new_item), 201
 
 
 @app.route('/api/<item_type>/<item_id>', methods=['PUT'])
 def update_item(item_type, item_id):
-    user = get_authenticated_user(request.headers)
+    user = get_authenticated_user(request)
     if not user: return jsonify({"error": "Authentication required"}), 401
 
     if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
         return jsonify({"error": "Invalid item type"}), 400
     
-    if 'payload' not in request.form: return jsonify({"error": "Missing payload"}), 400
+    if 'payload' not in request.form:
+        return jsonify({"error": "Missing payload in form data"}), 400
     try:
-        req_data = json.loads(request.form.get('payload'))
-    except json.JSONDecodeError: return jsonify({"error": "Invalid JSON payload"}), 400
+        req_data = json.loads(request.form['payload'])
+    except json.JSONDecodeError:
+        return jsonify({"error": "Invalid JSON payload"}), 400
 
     data = load_data()
     items_list = data.get(item_type, [])
-    item_index = next((idx for idx, i in enumerate(items_list) if i['id'] == item_id), -1)
+    item_index = -1
+    for idx, i in enumerate(items_list):
+        if i['id'] == item_id:
+            item_index = idx
+            break
     
     if item_index == -1: return jsonify({"error": "Item not found"}), 404
     
@@ -1098,133 +1207,120 @@ def update_item(item_type, item_id):
     updated_item = original_item.copy()
     updated_item['updated_timestamp'] = datetime.now().isoformat()
 
-    # Image handling:
-    # `req_data['images']` contains paths of existing images to keep.
-    # `request.files.getlist('images')` contains newly uploaded files.
-    
-    existing_images_to_keep = set(req_data.get('images', []))
-    current_images_in_item = set(original_item.get('images', []))
-    
-    images_to_delete_paths = list(current_images_in_item - existing_images_to_keep)
-    
-    # Delete images from HF and local that are no longer needed
-    if images_to_delete_paths:
-        delete_files_from_hf(images_to_delete_paths)
-        local_paths_to_delete = [os.path.join(app.root_path, p) for p in images_to_delete_paths]
-        delete_local_files(local_paths_to_delete)
-
-    final_image_list = list(existing_images_to_keep)
-    
-    newly_uploaded_files = request.files.getlist('images')
-    if len(final_image_list) + len(newly_uploaded_files) > MAX_IMAGE_FILES:
-        return jsonify({"error": f"Total images cannot exceed {MAX_IMAGE_FILES}"}), 400
-
-    for file in newly_uploaded_files:
-        if file and allowed_file(file.filename):
-            filename = secure_filename(file.filename)
-            unique_filename = str(uuid.uuid4()) + os.path.splitext(filename)[1]
-            local_save_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
-            try:
-                file.save(local_save_path)
-                repo_image_path = os.path.join(UPLOADS_DIR_NAME, unique_filename).replace("\\", "/")
-                final_image_list.append(repo_image_path)
-                upload_db_to_hf(specific_file_local_path=local_save_path, specific_file_repo_path=repo_image_path)
-            except Exception as e:
-                logging.error(f"Failed to save or upload new image during update {unique_filename}: {e}")
-        elif file:
-            logging.warning(f"Skipped file with disallowed extension during update: {file.filename}")
-            
-    updated_item['images'] = final_image_list
-
-    # Update text fields
-    if item_type == 'resumes':
-        for k in ['name', 'title', 'skills', 'experience', 'education', 'contact', 'portfolio_link']:
-            if k in req_data: updated_item[k] = req_data[k]
-    elif item_type == 'vacancies':
-        for k in ['company_name', 'title', 'description', 'requirements', 'salary', 'location', 'contact']:
-            if k in req_data: updated_item[k] = req_data[k]
-    elif item_type == 'freelance_offers':
-        for k in ['title', 'description', 'budget', 'deadline', 'skills_needed', 'contact']:
-            if k in req_data: updated_item[k] = req_data[k]
+    field_map = {
+        'resumes': ["name", "title", "skills", "experience", "education", "contact", "portfolio_link"],
+        'vacancies': ["company_name", "title", "description", "requirements", "salary", "location", "contact"],
+        'freelance_offers': ["title", "description", "budget", "deadline", "skills_needed", "contact"]
+    }
+    for field in field_map.get(item_type, []):
+        if field in req_data:
+            updated_item[field] = req_data[field]
+
+    image_files = request.files.getlist('images')
+    if image_files: # If new images are uploaded, process them (this will replace old ones)
+        if not HF_TOKEN_WRITE:
+             return jsonify({"error": "Image upload configured, but HF_TOKEN_WRITE is not set on server."}), 500
+        updated_item['image_filenames'] = process_and_upload_images(
+            image_files[:app.config['MAX_IMAGE_UPLOADS']],
+            existing_image_filenames=original_item.get('image_filenames', [])
+        )
+    # If no new images are uploaded, image_filenames remains as it was from original_item.copy()
 
     data[item_type][item_index] = updated_item
     save_data(data)
     return jsonify(updated_item), 200
 
 
-def _delete_item_logic(item_type, item_id, user_id_check=None):
+@app.route('/api/<item_type>/<item_id>', methods=['DELETE'])
+def delete_item_api(item_type, item_id): # Renamed to avoid conflict with admin_delete_item
+    user = get_authenticated_user(request)
+    if not user: return jsonify({"error": "Authentication required"}), 401
+
+    if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
+        return jsonify({"error": "Invalid item type"}), 400
+
     data = load_data()
     items_list = data.get(item_type, [])
     
     item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
-    if not item_to_delete:
-        return False, "Item not found"
+    if not item_to_delete: return jsonify({"error": "Item not found"}), 404
 
-    if user_id_check and str(item_to_delete.get('user_id')) != str(user_id_check):
-        return False, "Forbidden: You can only delete your own items"
+    if str(item_to_delete.get('user_id')) != str(user.get('id')): # Add admin check later if needed
+        return jsonify({"error": "Forbidden: You can only delete your own items"}), 403
 
-    images_to_delete_paths = item_to_delete.get('images', [])
-    
-    data[item_type] = [i for i in items_list if i['id'] != item_id]
-    
-    save_data(data) # Save updated DATA_FILE and upload it to HF
+    # Delete images from Hugging Face
+    if HF_TOKEN_WRITE:
+        for filename in item_to_delete.get('image_filenames', []):
+            delete_image_from_hf(filename)
+    else:
+        logging.warning(f"Cannot delete images for item {item_id}: HF_TOKEN_WRITE not set.")
 
-    if images_to_delete_paths:
-        delete_files_from_hf(images_to_delete_paths)
-        local_paths_to_delete = [os.path.join(app.root_path, p) for p in images_to_delete_paths]
-        delete_local_files(local_paths_to_delete)
-        
-    return True, "Item deleted successfully"
 
-@app.route('/api/<item_type>/<item_id>', methods=['DELETE'])
-def delete_item(item_type, item_id):
-    user = get_authenticated_user(request.headers)
-    if not user: return jsonify({"error": "Authentication required"}), 401
-
-    if item_type not in ['resumes', 'vacancies', 'freelance_offers']:
-        return jsonify({"error": "Invalid item type"}), 400
-
-    success, message = _delete_item_logic(item_type, item_id, user_id_check=str(user.get('id')))
+    data[item_type] = [i for i in items_list if i['id'] != item_id]
     
-    if success:
-        return jsonify({"message": message}), 200
-    else:
-        if "Forbidden" in message:
-            return jsonify({"error": message}), 403
-        return jsonify({"error": message}), 404
+    if len(data[item_type]) < len(items_list):
+        save_data(data)
+        return jsonify({"message": "Item deleted successfully"}), 200
+    return jsonify({"error": "Item not found or deletion failed"}), 404
 
 
 @app.route('/admin', methods=['GET'])
 def admin_panel():
     data = load_data()
-    return render_template_string(ADMIN_TEMPLATE,
-                                  resumes=sorted(data.get('resumes', []), key=lambda x: x.get('timestamp', ''), reverse=True),
-                                  vacancies=sorted(data.get('vacancies', []), key=lambda x: x.get('timestamp', ''), reverse=True),
-                                  freelance_offers=sorted(data.get('freelance_offers', []), key=lambda x: x.get('timestamp', ''), reverse=True))
+    # Normalize item_type keys for template consistency
+    processed_data = {
+        'resumes': sorted(data.get('resumes', []), key=lambda x: x.get('timestamp', ''), reverse=True),
+        'vacancies': sorted(data.get('vacancies', []), key=lambda x: x.get('timestamp', ''), reverse=True),
+        'freelance_offers': sorted(data.get('freelance_offers', []), key=lambda x: x.get('timestamp', ''), reverse=True)
+    }
+    return render_template_string(ADMIN_TEMPLATE, REPO_ID=REPO_ID, **processed_data)
 
 @app.route('/admin/delete', methods=['POST'])
 def admin_delete_item():
-    item_type = request.form.get('item_type')
+    # Basic auth for admin, replace with something more secure for production
+    # For simplicity, assuming admin access is controlled by network or other means
+    # if request.headers.get("X-Admin-Auth") != "SUPER_SECRET_ADMIN_KEY":
+    #     flash('Unauthorized', 'error')
+    #     return redirect(url_for('admin_panel'))
+
+    item_type_form_value = request.form.get('item_type') # e.g. 'resumes', 'vacancies', 'freelance_offers'
     item_id = request.form.get('item_id')
 
-    if not item_type or not item_id or item_type not in ['resumes', 'vacancies', 'freelance_offers']:
+    if not item_type_form_value or not item_id or item_type_form_value not in ['resumes', 'vacancies', 'freelance_offers']:
         flash('Invalid item type or ID for deletion.', 'error')
         return redirect(url_for('admin_panel'))
 
-    success, message = _delete_item_logic(item_type, item_id) # No user_id_check for admin
+    data = load_data()
+    items_list = data.get(item_type_form_value, [])
+    original_length = len(items_list)
+    
+    item_to_delete = next((i for i in items_list if i['id'] == item_id), None)
+
+    if item_to_delete:
+        # Delete images from Hugging Face
+        if HF_TOKEN_WRITE:
+            for filename in item_to_delete.get('image_filenames', []):
+                delete_image_from_hf(filename)
+        else:
+            flash("HF_TOKEN_WRITE not set, cannot delete images from HF.", "warning")
 
-    if success:
-        flash(f'{item_type.capitalize()[:-1]} and associated images deleted successfully.', 'success')
+        data[item_type_form_value] = [i for i in items_list if i['id'] != item_id]
+        if len(data[item_type_form_value]) < original_length:
+            save_data(data)
+            flash(f'{item_type_form_value.replace("_", " ").capitalize()[:-1]} deleted successfully.', 'success')
+        else:
+            flash('Item not found or already deleted (error during list update).', 'warning')
     else:
-        flash(f'Error deleting item: {message}', 'error')
+        flash('Item not found.', 'warning')
+        
     return redirect(url_for('admin_panel'))
 
 @app.route('/admin/force_upload', methods=['POST'])
 def force_upload_admin():
-    logging.info("Admin forcing full upload to Hugging Face...")
+    logging.info("Admin forcing upload to Hugging Face...")
     try:
-        upload_db_to_hf() # This will upload DATA_FILE and all images referenced in it
-        flash("Data and referenced images successfully uploaded to Hugging Face.", 'success')
+        upload_db_to_hf()
+        flash("Data successfully uploaded to Hugging Face.", 'success')
     except Exception as e:
         logging.error(f"Error during forced upload: {e}", exc_info=True)
         flash(f"Error uploading to Hugging Face: {e}", 'error')
@@ -1232,13 +1328,13 @@ def force_upload_admin():
 
 @app.route('/admin/force_download', methods=['POST'])
 def force_download_admin():
-    logging.info("Admin forcing full download from Hugging Face...")
+    logging.info("Admin forcing download from Hugging Face...")
     try:
-        if download_db_from_hf(): # This will download DATA_FILE and all images referenced in it
-            flash("Data and referenced images successfully downloaded from Hugging Face. Local files updated.", 'success')
+        if download_db_from_hf():
+            flash("Data successfully downloaded from Hugging Face. Local files updated.", 'success')
             load_data() 
         else:
-            flash("Failed to download data/images from Hugging Face. Check logs.", 'error')
+            flash("Failed to download data from Hugging Face. Check logs.", 'error')
     except Exception as e:
         logging.error(f"Error during forced download: {e}", exc_info=True)
         flash(f"Error downloading from Hugging Face: {e}", 'error')
@@ -1248,7 +1344,7 @@ def force_download_admin():
 if __name__ == '__main__':
     logging.info("Application starting up. Performing initial data load/download...")
     download_db_from_hf() 
-    load_data()
+    load_data() # This will load or create default data
     logging.info("Initial data load complete.")
 
     if HF_TOKEN_WRITE:
@@ -1257,6 +1353,8 @@ if __name__ == '__main__':
         logging.info("Periodic backup thread started.")
     else:
         logging.warning("Periodic backup will NOT run (HF_TOKEN_WRITE not set).")
+        logging.warning("Image uploads and deletions from HF will also FAIL without HF_TOKEN_WRITE.")
+
 
     port = int(os.environ.get('PORT', 7860))
     logging.info(f"Starting Flask app on host 0.0.0.0 and port {port}")