diff --git a/source/templates/index.html b/source/templates/index.html
index 8041134..8cca0db 100644
--- a/source/templates/index.html
+++ b/source/templates/index.html
@@ -7,14 +7,12 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
-    <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
 
     <link rel="icon" href="{{ url_for('static', filename='favicons/favicon-32x32.png') }}" sizes="32x32" type="image/png">
     <link rel="icon" href="{{ url_for('static', filename='favicons/favicon-16x16.png') }}" sizes="16x16" type="image/png">
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicons/favicon.ico') }}" type="image/x-icon">
-    
-
 
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 
     <script>
         function setTheme() {
@@ -67,8 +65,7 @@
             <div id="player-section" class="player-section">
                 <h2 id="selected-channel" style="display: none;"></h2>
                 <div id="player-container">
-                    <video id="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" playsinline crossorigin="anonymous">
-                        <source src="" type="application/x-mpegURL">
+                    <video id="videoPlayer" controls preload="auto" playsinline crossorigin="anonymous" style="width: 100%; height: auto;">
                         Your browser does not support the video tag.
                     </video>
                 </div>
@@ -82,9 +79,6 @@ <h3>Similar Channels</h3>
         </div>
     </div>
     
-    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
-    <script src="https://unpkg.com/@videojs/http-streaming@latest/dist/videojs-http-streaming.min.js"></script>
-
     <script>
         function getDefaultIconUrl() {
             const currentTheme = document.documentElement.getAttribute("data-theme");
@@ -93,10 +87,69 @@ <h3>Similar Channels</h3>
                 : "{{ url_for('static', filename='default-logo_light.png') }}";
         }
 
+        function normalizeChannelName(name) {
+            name = name.toUpperCase();
+            name = name.replace(/\(.*?\)/g, '');
+            name = name.replace(/[^\w\s]/g, '');
+
+            var suffixes = ['HD', '4K', 'RAW', 'LOW BIT', 'AMZ', 'ᴴᴰ', 'ᴿᴬᵂ', 'ᵃᵐᶻ', '◉'];
+            suffixes.forEach(function(suffix) {
+                var regex = new RegExp('\\b' + suffix + '\\b', 'g');
+                name = name.replace(regex, '');
+            });
+
+            name = name.replace(/\s+/g, ' ').trim();
+
+            return name;
+        }
+
+        let hls;
+        function initializePlayer(streamUrl) {
+            const video = document.getElementById('videoPlayer');
+
+            if (hls) {
+                hls.destroy();
+            }
+
+            if (Hls.isSupported()) {
+                hls = new Hls({
+                    debug: false,
+                    xhrSetup: function (xhr, url) {
+                        
+                    }
+                });
+                hls.loadSource(streamUrl);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                    video.play();
+                });
+
+                hls.on(Hls.Events.ERROR, function (event, data) {
+                    console.error('hls.js Fehler:', data);
+                    alert('There was an error while playing the stream.');
+                    hideLoader();
+                });
+            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {                
+                video.src = streamUrl;
+                video.addEventListener('loadedmetadata', function () {
+                    video.play();
+                });
+            } else {
+                console.error('Your brwoser does not support HLS.');
+                alert('Your brwoser does not support HLS.');
+                hideLoader();
+            }
+        }
+
         function loadCategories() {
             showLoader();
             fetch('/api/categories')
-                .then(response => response.json())
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
                 .then(data => {
                     const categories = data.categories;
                     const categoryContainer = document.getElementById('category-container');
@@ -138,7 +191,7 @@ <h3>Similar Channels</h3>
                             iconImg.alt = "Icon";
                             iconImg.classList.add('channel-icon');
 
-                            
+
                             iconImg.onerror = function() {
                                 this.onerror = null; 
                                 this.src = defaultIconUrl;
@@ -172,7 +225,6 @@ <h3>Similar Channels</h3>
                 });
         }
 
-
         window.addEventListener('DOMContentLoaded', loadCategories);
 
         function toggleChannels(category) {
@@ -201,7 +253,7 @@ <h3>Similar Channels</h3>
                         const result = channel.cloneNode(true);
                         result.classList.remove('selected');
 
-                        
+
                         const img = result.querySelector('img.channel-icon');
                         if (img) {
                             img.onerror = function() {
@@ -228,152 +280,108 @@ <h3>Similar Channels</h3>
         }
 
         function playChannel(streamUrl, channelName, channelIcon) { 
-        console.log('Playing Channel:', channelName, 'Stream URL:', streamUrl);
-        const playerContainer = document.getElementById("player-container");
-        playerContainer.style.display = "block";
-
-        const defaultIcon = getDefaultIconUrl();
-
-        const validChannelIcon = channelIcon && channelIcon !== 'null' ? channelIcon : defaultIcon;
-
-        const selectedChannel = document.getElementById("selected-channel");
-        selectedChannel.innerHTML = `
-            <img src="${validChannelIcon}" alt="Icon" class="selected-channel-icon">
-            Currently watching: ${channelName}
-        `;
-        selectedChannel.style.display = "flex";
-
-        if (window.player) {
-            window.player.src({
-                src: streamUrl,
-                type: 'application/x-mpegURL',
-                withCredentials: false,
-                crossOrigin: 'anonymous'
-            });
+            console.log('Playing Channel:', channelName, 'Stream URL:', streamUrl);
+            const playerContainer = document.getElementById("player-container");
+            playerContainer.style.display = "block";
 
-            window.player.on('loadedmetadata', function() {
-                var tracks = window.player.textTracks();
-                for (var i = 0; i < tracks.length; i++) {
-                    tracks[i].mode = 'hidden';
-                }
+            const defaultIcon = getDefaultIconUrl();
 
-                
-                const videoElement = window.player.tech().el();
-                const nativeWidth = videoElement.videoWidth;
-                const nativeHeight = videoElement.videoHeight;
+            const validChannelIcon = channelIcon && channelIcon !== 'null' ? channelIcon : defaultIcon;
 
-                console.log(`Native Resolution: ${nativeWidth}x${nativeHeight}`);
+            const selectedChannel = document.getElementById("selected-channel");
+            selectedChannel.innerHTML = `
+                <img src="${validChannelIcon}" alt="Icon" class="selected-channel-icon">
+                Currently watching: ${channelName}
+            `;
+            selectedChannel.style.display = "flex";
 
-                
-                adjustVideoContainer(nativeWidth, nativeHeight);
-            });
+            initializePlayer(streamUrl);
+
+            const baseName = normalizeChannelName(channelName);
+            const similarChannels = window.baseNameToChannels[baseName] || [];
+            displaySimilarChannels(similarChannels, channelName);
 
-            window.player.play().then(() => {
-                console.log('Playback started');
-            }).catch(error => {
-                console.error('Playback error:', error);
-                hideLoader();
-                alert('Playback could not be started.');
-            });
-        } else {
-            console.error("Video.js Player is not initialized.");
             hideLoader();
         }
 
-        const baseName = normalizeChannelName(channelName);
-        const similarChannels = window.baseNameToChannels[baseName] || [];
-        displaySimilarChannels(similarChannels, channelName);
+        function adjustVideoContainer(nativeWidth, nativeHeight) {
+            const playerContainer = document.getElementById("player-container");
+            const videoElement = document.getElementById("videoPlayer");
 
-        hideLoader();
-    }
+            
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight * 0.8; 
 
-    function adjustVideoContainer(nativeWidth, nativeHeight) {
-        const playerContainer = document.getElementById("player-container");
-        const videoElement = document.getElementById("videoPlayer");
+            let displayWidth = nativeWidth;
+            let displayHeight = nativeHeight;
 
-        
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight * 0.8; 
+            
+            if (nativeWidth > windowWidth) {
+                const ratio = windowWidth / nativeWidth;
+                displayWidth = windowWidth;
+                displayHeight = nativeHeight * ratio;
+            }
 
-        let displayWidth = nativeWidth;
-        let displayHeight = nativeHeight;
+            if (displayHeight > windowHeight) {
+                const ratio = windowHeight / displayHeight;
+                displayHeight = windowHeight;
+                displayWidth = displayWidth * ratio;
+            }
 
-        
-        if (nativeWidth > windowWidth) {
-            const ratio = windowWidth / nativeWidth;
-            displayWidth = windowWidth;
-            displayHeight = nativeHeight * ratio;
-        }
+            
+            playerContainer.style.width = `${displayWidth}px`;
+            playerContainer.style.height = `${displayHeight}px`;
 
-        if (displayHeight > windowHeight) {
-            const ratio = windowHeight / displayHeight;
-            displayHeight = windowHeight;
-            displayWidth = displayWidth * ratio;
+            
+            videoElement.style.width = "100%";
+            videoElement.style.height = "100%";
         }
 
-        
-        playerContainer.style.width = `${displayWidth}px`;
-        playerContainer.style.height = `${displayHeight}px`;
-
-        
-        videoElement.style.width = "100%";
-        videoElement.style.height = "100%";
-    }
-
-   
-    window.addEventListener('resize', function() {
-        if (window.player && window.player.tech() && window.player.tech().el()) {
-            const videoElement = window.player.tech().el();
-            const nativeWidth = videoElement.videoWidth;
-            const nativeHeight = videoElement.videoHeight;
-            adjustVideoContainer(nativeWidth, nativeHeight);
-        }
-    });
 
-    function displaySimilarChannels(similarChannels, currentChannelName) {
-        var similarChannelsDiv = document.getElementById('similar-channels');
-        var sidebarRightDiv = document.querySelector('.sidebar-right');
+        function displaySimilarChannels(similarChannels, currentChannelName) {
+            var similarChannelsDiv = document.getElementById('similar-channels');
+            var sidebarRightDiv = document.querySelector('.sidebar-right');
 
-        similarChannelsDiv.innerHTML = '';
+            similarChannelsDiv.innerHTML = '';
 
-        var filteredChannels = similarChannels.filter(channel => channel.name !== currentChannelName);
+            var filteredChannels = similarChannels.filter(channel => channel.name !== currentChannelName);
 
-        if (filteredChannels.length === 0) {
-            similarChannelsDiv.style.display = 'none';
-            sidebarRightDiv.style.display = 'none';
-            return;
-        }
+            if (filteredChannels.length === 0) {
+                similarChannelsDiv.style.display = 'none';
+                sidebarRightDiv.style.display = 'none';
+                return;
+            }
 
-        similarChannelsDiv.style.display = 'block';
-        sidebarRightDiv.style.display = 'block';
+            similarChannelsDiv.style.display = 'block';
+            sidebarRightDiv.style.display = 'block';
 
-        filteredChannels.forEach(function(channel) {
-            var channelP = document.createElement('p');
-            channelP.classList.add('channel-name');
-            channelP.setAttribute('data-channel-name', channel.name);
-            channelP.setAttribute('data-stream-url', channel.url);
+            filteredChannels.forEach(function(channel) {
+                var channelP = document.createElement('p');
+                channelP.classList.add('channel-name');
+                channelP.setAttribute('data-channel-name', channel.name);
+                channelP.setAttribute('data-stream-url', channel.url);
 
-            const iconUrl = channel.icon 
-                ? `/proxy_image?url=${encodeURIComponent(channel.icon)}`
-                : getDefaultIconUrl();
+                const iconUrl = channel.icon 
+                    ? `/proxy_image?url=${encodeURIComponent(channel.icon)}`
+                    : getDefaultIconUrl();
 
-            var iconImg = document.createElement('img');
-            iconImg.src = iconUrl;
-            iconImg.alt = "Icon";
-            iconImg.classList.add('channel-icon');
+                var iconImg = document.createElement('img');
+                iconImg.src = iconUrl;
+                iconImg.alt = "Icon";
+                iconImg.classList.add('channel-icon');
 
-            
-            iconImg.onerror = function() {
-                this.onerror = null; 
-                this.src = getDefaultIconUrl();
-            };
 
-            channelP.appendChild(iconImg);
-            channelP.appendChild(document.createTextNode(channel.name));
+                iconImg.onerror = function() {
+                    this.onerror = null; 
+                    this.src = getDefaultIconUrl();
+                };
 
-            similarChannelsDiv.appendChild(channelP);
-        });
-    }
+                channelP.appendChild(iconImg);
+                channelP.appendChild(document.createTextNode(channel.name));
+
+                similarChannelsDiv.appendChild(channelP);
+            });
+        }
 
 
         function handleChannelClick(event) {
@@ -440,62 +448,6 @@ <h3>Similar Channels</h3>
                 }
             }
         }
-
-        window.addEventListener('DOMContentLoaded', function() {
-            window.player = videojs('videoPlayer', {
-                techOrder: ["html5"],
-                sources: [],
-                fluid: true,
-                playsinline: true,
-                autoplay: false,
-                controls: true,
-                crossOrigin: 'anonymous',
-                html5: {
-                    hls: {
-                        withCredentials: false
-                    },
-                    vhs: {
-                        withCredentials: false
-                    }
-                }
-            }, function() {
-                console.log('Video.js Player is ready');
-            });
-            hidePlayer();
-        });
-
-        var allChannels = [];
-        var baseNameToChannels = {};
-
-        function normalizeChannelName(name) {
-            name = name.toUpperCase();
-            name = name.replace(/\(.*?\)/g, '');
-            name = name.replace(/[^\w\s]/g, '');
-
-            var suffixes = ['HD', '4K', 'RAW', 'LOW BIT', 'AMZ', 'ᴴᴰ', 'ᴿᴬᵂ', 'ᵃᵐᶻ', '◉'];
-            suffixes.forEach(function(suffix) {
-                var regex = new RegExp('\\b' + suffix + '\\b', 'g');
-                name = name.replace(regex, '');
-            });
-
-            name = name.replace(/\s+/g, ' ').trim();
-
-            return name;
-        }
-
-        function hidePlayer() {
-            const playerContainer = document.getElementById("player-container");
-            playerContainer.style.display = "none";
-
-            const selectedChannel = document.getElementById("selected-channel");
-            selectedChannel.style.display = "none";
-
-            var similarChannelsDiv = document.getElementById('similar-channels');
-            similarChannelsDiv.style.display = 'none';
-
-            var sidebarRightDiv = document.querySelector('.sidebar-right');
-            sidebarRightDiv.style.display = 'none';
-        }
     </script>
     
 </body>
diff --git a/source/templates/settings.html b/source/templates/settings.html
index 4933acd..996376d 100644
--- a/source/templates/settings.html
+++ b/source/templates/settings.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
-    <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
+
 
     <script>
         function setTheme() {