diff --git a/iptv/index.html b/iptv/index.html
index a0663d9..1993698 100644
--- a/iptv/index.html
+++ b/iptv/index.html
@@ -2,12 +2,562 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>IPTV</title>
-    <link rel="stylesheet" href="../css/styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Advanced Bangla IPTV</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <style>
+        :root {
+            --primary-color: #3498db;
+            --secondary-color: #2980b9;
+            --background-color: #ecf0f1;
+            --text-color: #2c3e50;
+            --card-background: #ffffff;
+            --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --header-height: 60px;
+            --sidebar-width: 250px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            line-height: 1.6;
+        }
+
+        .container {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: var(--header-height);
+            background-color: var(--primary-color);
+            color: white;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            z-index: 1000;
+        }
+
+        header h1 {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .sidebar {
+            width: var(--sidebar-width);
+            background-color: var(--card-background);
+            height: calc(100vh - var(--header-height));
+            position: fixed;
+            top: var(--header-height);
+            left: 0;
+            overflow-y: auto;
+            transition: transform 0.3s ease-in-out;
+            z-index: 900;
+        }
+
+        .sidebar-content {
+            padding: 20px;
+        }
+
+        .main-content {
+            flex: 1;
+            margin-left: var(--sidebar-width);
+            margin-top: var(--header-height);
+            padding: 20px;
+        }
+
+        #video-container {
+            position: relative;
+            width: 100%;
+            padding-top: 56.25%; /* 16:9 Aspect Ratio */
+            background-color: #000;
+            margin-bottom: 20px;
+        }
+
+        #video-player {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        .channel-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+        }
+
+        .channel-card {
+            background-color: var(--card-background);
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: var(--card-shadow);
+            transition: transform 0.2s ease-in-out;
+            cursor: pointer;
+        }
+
+        .channel-card:hover {
+            transform: translateY(-5px);
+        }
+
+        .channel-card img {
+            width: 100%;
+            height: 120px;
+            object-fit: cover;
+        }
+
+        .channel-card .channel-info {
+            padding: 10px;
+        }
+
+        .channel-card h3 {
+            font-size: 1rem;
+            margin-bottom: 5px;
+        }
+
+        .search-box {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+
+        .category-filter {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .category-btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s ease-in-out;
+        }
+
+        .category-btn:hover {
+            background-color: var(--secondary-color);
+        }
+
+        .category-btn.active {
+            background-color: var(--secondary-color);
+        }
+
+        .loading-spinner {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 50px;
+            height: 50px;
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: translate(-50%, -50%) rotate(0deg); }
+            100% { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+
+        .control-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: color 0.2s ease-in-out;
+        }
+
+        .control-btn:hover {
+            color: var(--primary-color);
+        }
+
+        .volume-slider {
+            width: 100px;
+        }
+
+        .quality-select {
+            background-color: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: none;
+            padding: 5px;
+            border-radius: 4px;
+        }
+
+        #now-playing {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 4px;
+            font-size: 0.9rem;
+        }
+
+        #error-message {
+            display: none;
+            background-color: #e74c3c;
+            color: white;
+            padding: 10px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .sidebar {
+                transform: translateX(-100%);
+            }
+
+            .sidebar.active {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-left: 0;
+            }
+
+            .channel-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+        }
+    </style>
 </head>
 <body>
-    <h1>IPTV Section</h1>
-    <p>Watch your favorite channels here.</p>
+    <header>
+        <h1>Advanced Bangla IPTV</h1>
+        <button id="sidebar-toggle" class="control-btn">
+            <i class="fas fa-bars"></i>
+        </button>
+    </header>
+
+    <div class="container">
+        <aside class="sidebar">
+            <div class="sidebar-content">
+                <input type="text" id="search-input" class="search-box" placeholder="Search channels...">
+                <div class="category-filter" id="category-filter"></div>
+                <h2>Favorites</h2>
+                <div id="favorites-list"></div>
+                <h2>Recent</h2>
+                <div id="recent-list"></div>
+            </div>
+        </aside>
+
+        <main class="main-content">
+            <div id="video-container">
+                <video id="video-player" controls></video>
+                <div id="now-playing"></div>
+                <div class="loading-spinner"></div>
+                <div class="controls">
+                    <button id="play-pause" class="control-btn">
+                        <i class="fas fa-play"></i>
+                    </button>
+                    <input type="range" id="volume-slider" class="volume-slider" min="0" max="1" step="0.1" value="1">
+                    <select id="quality-select" class="quality-select"></select>
+                    <button id="pip-button" class="control-btn">
+                        <i class="fas fa-external-link-alt"></i>
+                    </button>
+                </div>
+            </div>
+            <div id="error-message"></div>
+            <div class="channel-grid" id="channel-grid"></div>
+        </main>
+    </div>
+
+    <script>
+        const rawUrl = 'https://raw.githubusercontent.com/likhonisaac/ip-tv/refs/heads/main/IPTV';
+        const player = document.getElementById('video-player');
+        const channelGrid = document.getElementById('channel-grid');
+        const searchInput = document.getElementById('search-input');
+        const categoryFilter = document.getElementById('category-filter');
+        const nowPlaying = document.getElementById('now-playing');
+        const errorMessage = document.getElementById('error-message');
+        const loadingSpinner = document.querySelector('.loading-spinner');
+        const sidebar = document.querySelector('.sidebar');
+        const sidebarToggle = document.getElementById('sidebar-toggle');
+        const playPauseBtn = document.getElementById('play-pause');
+        const volumeSlider = document.getElementById('volume-slider');
+        const qualitySelect = document.getElementById('quality-select');
+        const pipButton = document.getElementById('pip-button');
+        const favoritesList = document.getElementById('favorites-list');
+        const recentList = document.getElementById('recent-list');
+
+        let channels = [];
+        let filteredChannels = [];
+        let currentChannel = null;
+        let hls = null;
+
+        // Fetch and initialize channels
+        async function initializeChannels() {
+            try {
+                showLoading(true);
+                const response = await fetch(rawUrl);
+                const data = await response.text();
+                channels = parseChannels(data);
+                filteredChannels = [...channels];
+                renderChannels();
+                initializeCategoryFilter();
+                showLoading(false);
+            } catch (error) {
+                showError('Failed to load channels. Please try again later.');
+                showLoading(false);
+            }
+        }
+
+        // Parse channel data
+        function parseChannels(data) {
+            const lines = data.split('\n');
+            const parsedChannels = [];
+            let currentChannel = {};
+
+            for (const line of lines) {
+                if (line.startsWith('#EXTINF:')) {
+                    const matches = line.match(/tvg-logo="([^"]*)".*,(.+)/);
+                    if (matches) {
+                        currentChannel.logo = matches[1];
+                        currentChannel.name = matches[2].trim();
+                    }
+                    const groupMatch = line.match(/group-title="([^"]*)"/);
+                    currentChannel.category = groupMatch ? groupMatch[1] : 'Uncategorized';
+                } else if (line.trim() !== '' && !line.startsWith('#')) {
+                    currentChannel.url = line.trim();
+                    parsedChannels.push({ ...currentChannel });
+                    currentChannel = {};
+                }
+            }
+
+            return parsedChannels;
+        }
+
+        // Render channels in the grid
+        function renderChannels() {
+            channelGrid.innerHTML = '';
+            filteredChannels.forEach((channel, index) => {
+                const card = createChannelCard(channel, index);
+                channelGrid.appendChild(card);
+            });
+        }
+
+        // Create a channel card element
+        function createChannelCard(channel, index) {
+            const card = document.createElement('div');
+            card.className = 'channel-card';
+            card.innerHTML = `
+                <img src="${channel.logo || 'placeholder.png'}" alt="${channel.name}" loading="lazy">
+                <div class="channel-info">
+                    <h3>${channel.name}</h3>
+                    <p>${channel.category}</p>
+                </div>
+            `;
+            card.addEventListener('click', () => playChannel(channel));
+            return card;
+        }
+
+        // Initialize category filter
+        function initializeCategoryFilter() {
+            const categories = [...new Set(channels.map(channel => channel.category))];
+            categoryFilter.innerHTML = `
+                <button class="category-btn active" data-category="all">All</button>
+                ${categories.map(category => `
+                    <button class="category-btn" data-category="${category}">${category}</button>
+                `).join('')}
+            `;
+
+            categoryFilter.addEventListener('click', (e) => {
+                if (e.target.classList.contains('category-btn')) {
+                    const category = e.target.dataset.category;
+                    filterChannels(category);
+                    document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
+                    e.target.classList.add('active');
+                }
+            });
+        }
+
+        // Filter channels by category
+        function filterChannels(category) {
+            filteredChannels = category === 'all' 
+                ? channels 
+                : channels.filter(channel => channel.category === category);
+            renderChannels();
+        }
+
+        // Play selected channel
+        function playChannel(channel) {
+            showLoading(true);
+            currentChannel = channel;
+            nowPlaying.textContent = `Now Playing: ${channel.name}`;
+
+            if (Hls.isSupported()) {
+                if (hls) {
+                    hls.destroy();
+                }
+                hls = new Hls();
+                hls.loadSource(channel.url);
+                hls.attachMedia(player);
+                hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                    player.play();
+                    updateQualityOptions();
+                    showLoading(false);
+                });
+                hls.on(Hls.Events.ERROR, (event, data) => {
+                    if (data.fatal) {
+                        showError(`Failed to load the channel: ${channel.name}`);
+                        showLoading(false);
+                    }
+                });
+            } else if (player.canPlayType('application/vnd.apple.mpegurl')) {
+                player.src = channel.url;
+                player.addEventListener('loadedmetadata', () => {
+                player.play();
+                    showLoading(false);
+                });
+            } else {
+                showError('Your browser does not support HLS playback.');
+                showLoading(false);
+            }
+
+            addToRecent(channel);
+        }
+
+        // Update quality options
+        function updateQualityOptions() {
+            if (hls) {
+                const levels = hls.levels;
+                qualitySelect.innerHTML = levels.map((level, index) => `
+                    <option value="${index}">${level.height}p</option>
+                `).join('');
+                qualitySelect.value = hls.currentLevel;
+            }
+        }
+
+        // Show/hide loading spinner
+        function showLoading(show) {
+            loadingSpinner.style.display = show ? 'block' : 'none';
+        }
+
+        // Show error message
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+            setTimeout(() => {
+                errorMessage.style.display = 'none';
+            }, 5000);
+        }
+
+        // Add channel to recent list
+        function addToRecent(channel) {
+            const recentChannels = JSON.parse(localStorage.getItem('recentChannels') || '[]');
+            const updatedRecent = [channel, ...recentChannels.filter(c => c.name !== channel.name)].slice(0, 5);
+            localStorage.setItem('recentChannels', JSON.stringify(updatedRecent));
+            updateRecentList();
+        }
+
+        // Update recent channels list
+        function updateRecentList() {
+            const recentChannels = JSON.parse(localStorage.getItem('recentChannels') || '[]');
+            recentList.innerHTML = recentChannels.map(channel => `
+                <div class="recent-item" data-url="${channel.url}">${channel.name}</div>
+            `).join('');
+        }
+
+        // Event Listeners
+        searchInput.addEventListener('input', (e) => {
+            const searchTerm = e.target.value.toLowerCase();
+            filteredChannels = channels.filter(channel => 
+                channel.name.toLowerCase().includes(searchTerm) ||
+                channel.category.toLowerCase().includes(searchTerm)
+            );
+            renderChannels();
+        });
+
+        sidebarToggle.addEventListener('click', () => {
+            sidebar.classList.toggle('active');
+        });
+
+        playPauseBtn.addEventListener('click', () => {
+            if (player.paused) {
+                player.play();
+                playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
+            } else {
+                player.pause();
+                playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
+            }
+        });
+
+        volumeSlider.addEventListener('input', (e) => {
+            player.volume = e.target.value;
+        });
+
+        qualitySelect.addEventListener('change', (e) => {
+            hls.currentLevel = parseInt(e.target.value);
+        });
+
+        pipButton.addEventListener('click', () => {
+            if (document.pictureInPictureEnabled) {
+                if (document.pictureInPictureElement) {
+                    document.exitPictureInPicture();
+                } else {
+                    player.requestPictureInPicture();
+                }
+            }
+        });
+
+        favoritesList.addEventListener('click', (e) => {
+            if (e.target.classList.contains('favorite-item')) {
+                const channelUrl = e.target.dataset.url;
+                const channel = channels.find(c => c.url === channelUrl);
+                if (channel) {
+                    playChannel(channel);
+                }
+            }
+        });
+
+        recentList.addEventListener('click', (e) => {
+            if (e.target.classList.contains('recent-item')) {
+                const channelUrl = e.target.dataset.url;
+                const channel = channels.find(c => c.url === channelUrl);
+                if (channel) {
+                    playChannel(channel);
+                }
+            }
+        });
+
+        // Initialize the application
+        initializeChannels();
+        updateRecentList();
+    </script>
 </body>
 </html>
