diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..8c8c0af
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,417 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Khinsider Downloader</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #1a1a1a;
+            color: #e0e0e0;
+        }
+        .search-container {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .search-box {
+            flex: 1;
+            padding: 12px;
+            font-size: 16px;
+            border: 1px solid #333;
+            border-radius: 4px;
+            background-color: #2d2d2d;
+            color: #e0e0e0;
+        }
+        .search-btn {
+            padding: 12px 24px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .search-btn:hover {
+            background-color: #0056b3;
+        }
+        .search-meta {
+            margin-bottom: 15px;
+            color: #858585;
+            font-size: 0.9em;
+        }
+        .result-count {
+            font-weight: 500;
+            color: #e0e0e0;
+        }
+        .loader {
+            border: 4px solid #333;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+            display: none;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .error {
+            color: #ff6b6b;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ff6b6b;
+            border-radius: 4px;
+            background-color: #2d0000;
+            display: none;
+        }
+        .results {
+            background-color: #2d2d2d;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        .album {
+            padding: 15px;
+            border-bottom: 1px solid #333;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .album:hover {
+            background-color: #333;
+        }
+        .track {
+            display: flex;
+            align-items: center;
+            padding: 12px 15px;
+            border-bottom: 1px solid #333;
+        }
+        .track-name {
+            flex: 1;
+            margin-right: 15px;
+            color: #e0e0e0;
+        }
+        .format-tag {
+            background-color: #4a4a4a;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 0.85em;
+            margin-right: 10px;
+        }
+        .download-btn {
+            background-color: #28a745;
+            color: white;
+            border: none;
+            padding: 6px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .download-btn:hover {
+            background-color: #218838;
+        }
+        .back-btn {
+            background: none;
+            border: none;
+            color: #007bff;
+            cursor: pointer;
+            padding: 10px 0;
+            #margin-bottom: 15px;
+			margin: 0 15px 15px 15px;
+			display: block;
+        }
+        .no-results {
+            padding: 20px;
+            text-align: center;
+            color: #858585;
+        }
+        .album-title {
+            font-weight: 500;
+            margin-bottom: 4px;
+            color: #e0e0e0;
+        }
+        .album-meta {
+            display: flex;
+            gap: 12px;
+            font-size: 0.9em;
+            color: #858585;
+        }
+        .meta-item {
+            padding: 2px 8px;
+            background: #333;
+            border-radius: 4px;
+        }
+        .track-formats {
+            display: flex;
+            gap: 8px;
+        }
+        .download-btn.flac {
+            background-color: #6f42c1;
+        }
+        .download-btn.flac:hover {
+            background-color: #563d7c;
+        }
+		.results h3 {
+			padding: 0 15px;
+			margin: 0 0 15px 0;
+			font-size: 1.1em;
+		}
+    </style>
+</head>
+<body>
+    <h1>Khinsider Downloader</h1>
+    <div class="search-container">
+        <input type="text" class="search-box" placeholder="Search for soundtracks...">
+        <button class="search-btn">Search</button>
+    </div>
+    <div class="search-meta">
+        <span class="result-count"></span>
+    </div>
+    <div class="loader"></div>
+    <div class="error"></div>
+    <div class="results"></div>
+
+    <script>
+        let currentAbortController = null;
+        let searchState = {
+            query: '',
+            results: [],
+            count: 0
+        };
+
+        const elements = {
+            loader: document.querySelector('.loader'),
+            error: document.querySelector('.error'),
+            searchBox: document.querySelector('.search-box'),
+            searchBtn: document.querySelector('.search-btn'),
+            results: document.querySelector('.results'),
+            resultCount: document.querySelector('.result-count')
+        };
+
+        const savedState = sessionStorage.getItem('searchState');
+        if (savedState) {
+            searchState = JSON.parse(savedState);
+            elements.searchBox.value = searchState.query;
+        }
+
+        function showLoader() {
+            elements.loader.style.display = 'block';
+            elements.error.style.display = 'none';
+        }
+
+        function hideLoader() {
+            elements.loader.style.display = 'none';
+        }
+
+        function showError(message) {
+            elements.error.textContent = message;
+            elements.error.style.display = 'block';
+        }
+
+        function clearResults() {
+            elements.results.innerHTML = '';
+            elements.resultCount.textContent = '';
+        }
+
+        async function fetchWithTimeout(resource, options = {}) {
+            const { timeout = 8000 } = options;
+            const controller = new AbortController();
+            const id = setTimeout(() => controller.abort(), timeout);
+            
+            const response = await fetch(resource, {
+                ...options,
+                signal: controller.signal  
+            });
+            clearTimeout(id);
+            
+            return response;
+        }
+
+        function showPreviousSearch() {
+            elements.results.innerHTML = searchState.results.map(album => `
+                <div class="album" data-url="${album.url}">
+                    ${album.name}
+                </div>
+            `).join('');
+            
+            elements.resultCount.textContent = `Found ${searchState.count} ${searchState.count === 1 ? 'album' : 'albums'}`;
+            
+            document.querySelectorAll('.album').forEach(album => {
+                album.addEventListener('click', async () => {
+                    try {
+                        showLoader();
+                        const albumUrl = album.dataset.url;
+                        const response = await fetch(`/album?url=${encodeURIComponent(albumUrl)}`);
+                        const tracks = await response.json();
+                        
+                        elements.results.innerHTML = `
+                            <button class="back-btn" onclick="showPreviousSearch()">← Back to Search</button>
+                            <h3>${album.textContent}</h3>
+                            ${tracks.map((track, index) => `
+                                <div class="track">
+                                    <span class="track-name">
+									<span class="track-number">${(index + 1).toString().padStart(2, '0').slice(-2)}.</span>
+									${track.name}
+									</span>
+                                    <span class="format-tag">FLAC/MP3</span>
+                                    <button class="download-btn" 
+                                            data-url="${track.url}"
+                                            title="Download ${track.format.toUpperCase()}">
+                                        Download
+                                    </button>
+                                </div>
+                            `).join('')}
+                        `;
+
+                        document.querySelectorAll('.download-btn').forEach(btn => {
+                            btn.addEventListener('click', (e) => {
+                                e.preventDefault();
+                                window.location.href = `/download?url=${encodeURIComponent(btn.dataset.url)}`;
+                            });
+                        });
+                    } catch (error) {
+                        showError('Failed to load album tracks. Please try again.');
+                    } finally {
+                        hideLoader();
+                    }
+                });
+            });
+        }
+
+        async function performSearch(query, fromHistory = false) {
+            try {
+                if (currentAbortController) {
+                    currentAbortController.abort();
+                }
+                currentAbortController = new AbortController();
+                
+                if (!fromHistory) {
+                    showLoader();
+                    clearResults();
+                }
+
+                if (!fromHistory) {
+                    const response = await fetchWithTimeout(`/search?q=${encodeURIComponent(query)}`, {
+                        signal: currentAbortController.signal
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+
+                    const data = await response.json();
+                    
+                    searchState = {
+                        query: query,
+                        results: data.results,
+                        count: data.count
+                    };
+                    sessionStorage.setItem('searchState', JSON.stringify(searchState));
+                }
+
+                if (searchState.count === 0) {
+                    elements.results.innerHTML = `
+                        <div class="no-results">
+                            No albums found for "${query}"
+                        </div>
+                    `;
+                    return;
+                }
+
+                elements.resultCount.textContent = `Found ${searchState.count} ${searchState.count === 1 ? 'album' : 'albums'}`;
+
+                if (!fromHistory) {
+                    elements.results.innerHTML = searchState.results.map(album => `
+                        <div class="album" data-url="${album.url}">
+                            ${album.name}
+                        </div>
+                    `).join('');
+
+                    document.querySelectorAll('.album').forEach(album => {
+                        album.addEventListener('click', async () => {
+                            try {
+                                showLoader();
+                                elements.resultCount.textContent = '';
+                                const albumUrl = album.dataset.url;
+                                const response = await fetch(`/album?url=${encodeURIComponent(albumUrl)}`);
+                                const tracks = await response.json();
+                                
+                                elements.results.innerHTML = `
+                                    <button class="back-btn" onclick="showPreviousSearch()">← Back to Search</button>
+                                    <h3>${album.textContent}</h3>
+                                    ${tracks.map((track, index) => `
+                                        <div class="track">
+                                            <span class="track-name">
+											<span class="track-number">${(index + 1).toString().padStart(2, '0').slice(-2)}.</span>
+											${track.name}
+											</span>
+                                            <span class="format-tag">FLAC/MP3</span>
+                                            <button class="download-btn" 
+                                                    data-url="${track.url}"
+                                                    title="Download ${track.format.toUpperCase()}">
+                                                Download
+                                            </button>
+                                        </div>
+                                    `).join('')}
+                                `;
+
+                                document.querySelectorAll('.download-btn').forEach(btn => {
+                                    btn.addEventListener('click', (e) => {
+                                        e.preventDefault();
+                                        window.location.href = `/download?url=${encodeURIComponent(btn.dataset.url)}`;
+                                    });
+                                });
+                            } catch (error) {
+                                showError('Failed to load album tracks. Please try again.');
+                            } finally {
+                                hideLoader();
+                            }
+                        });
+                    });
+                }
+            } catch (error) {
+                if (error.name !== 'AbortError') {
+                    showError(error.message.includes('aborted') ? 
+                        'Search canceled' : 
+                        `Search failed: ${error.message}`);
+                }
+            } finally {
+                if (!fromHistory) hideLoader();
+                currentAbortController = null;
+            }
+        }
+
+        if (savedState) {
+            performSearch(searchState.query, true);
+            showPreviousSearch();
+        }
+
+        elements.searchBtn.addEventListener('click', () => {
+            const query = elements.searchBox.value.trim();
+            if (query.length >= 3) performSearch(query);
+        });
+
+        elements.searchBox.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                const query = elements.searchBox.value.trim();
+                if (query.length >= 3) performSearch(query);
+            }
+        });
+
+        let timeout;
+        elements.searchBox.addEventListener('input', (e) => {
+            clearTimeout(timeout);
+            const query = e.target.value.trim();
+            if (query.length < 3) {
+                clearResults();
+                return;
+            }
+            timeout = setTimeout(() => performSearch(query), 500);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
