diff --git a/src/components/banner/Banner.jsx b/src/components/banner/Banner.jsx
index aa9aaf5..b9e4e1d 100644
--- a/src/components/banner/Banner.jsx
+++ b/src/components/banner/Banner.jsx
@@ -16,7 +16,7 @@ function Banner({ item, index }) {
   return (
     <section className="spotlight w-full h-full">
       <img
-        src={`https://wsrv.nl/?url=${item.poster}`}
+        src={`${item.poster}`}
         alt={item.title}
         className="absolute right-0 object-cover h-full w-[80%] bg-auto max-[1200px]:w-full max-[1200px]:bottom-0"
       />
diff --git a/src/components/cart/Cart.jsx b/src/components/cart/Cart.jsx
index 0ceefe7..508779d 100644
--- a/src/components/cart/Cart.jsx
+++ b/src/components/cart/Cart.jsx
@@ -47,7 +47,7 @@ function Cart({ label, data, path }) {
               ref={(el) => (cardRefs.current[index] = el)}
             >
               <img
-                src={`https://wsrv.nl/?url=${item.poster}`}
+                src={`${item.poster}`}
                 alt={item.title}
                 className="flex-shrink-0 w-[60px] h-[75px] rounded-md object-cover cursor-pointer"
                 onClick={() => navigate(`/watch/${item.id}`)}
diff --git a/src/components/categorycard/CategoryCard.jsx b/src/components/categorycard/CategoryCard.jsx
index 00bd560..742bc24 100644
--- a/src/components/categorycard/CategoryCard.jsx
+++ b/src/components/categorycard/CategoryCard.jsx
@@ -143,7 +143,7 @@ const CategoryCard = React.memo(
                     <div className="overlay"></div>
                     <div className="overflow-hidden">
                       <img
-                        src={`https://wsrv.nl/?url=${item.poster}`}
+                        src={`${item.poster}`}
                         alt={item.title}
                         className={`w-full h-[320px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] group-hover:blur-[7px] transform transition-all duration-300 ease-in-out ultra-wide:h-[400px] ${cardStyle}`}
                       />
@@ -258,7 +258,7 @@ const CategoryCard = React.memo(
                   <div className="overlay"></div>
                   <div className="overflow-hidden">
                     <img
-                      src={`https://wsrv.nl/?url=${item.poster}`}
+                      src={`${item.poster}`}
                       alt={item.title}
                       className={`w-full h-[250px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] ${cardStyle} group-hover:blur-[7px] transform transition-all duration-300 ease-in-out `}
                     />
diff --git a/src/components/continue/ContinueWatching.jsx b/src/components/continue/ContinueWatching.jsx
index da8d369..530dbef 100644
--- a/src/components/continue/ContinueWatching.jsx
+++ b/src/components/continue/ContinueWatching.jsx
@@ -92,7 +92,7 @@ const ContinueWatching = () => {
                   className="inline-block bg-[#2a2c31] absolute left-0 top-0 w-full h-full group"
                 >
                   <img
-                    src={`https://wsrv.nl/?url=${item?.poster}`}
+                    src={`${item?.poster}`}
                     alt={item?.title}
                     className="block w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:blur-[4px]"
                     title={item?.title}
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index f6f1215..6cbe397 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -1,11 +1,8 @@
 import { useState, useEffect } from "react";
-import logoTitle from "@/src/config/logoTitle";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faBars,
-  faFilm,
   faRandom,
-  faStar,
 } from "@fortawesome/free-solid-svg-icons";
 import { useLanguage } from "@/src/context/LanguageContext";
 import { Link, useLocation } from "react-router-dom";
@@ -13,7 +10,6 @@ import Sidebar from "../sidebar/Sidebar";
 import { SearchProvider } from "@/src/context/SearchContext";
 import WebSearch from "../searchbar/WebSearch";
 import MobileSearch from "../searchbar/MobileSearch";
-import { FaTelegramPlane } from "react-icons/fa";
 
 function Navbar() {
   const location = useLocation();
@@ -41,11 +37,13 @@ function Navbar() {
   const handleCloseSidebar = () => {
     setIsSidebarOpen(false);
   };
+
   const handleRandomClick = () => {
     if (location.pathname === "/random") {
       window.location.reload();
     }
   };
+
   useEffect(() => {
     setIsNotHomePage(
       location.pathname !== "/" && location.pathname !== "/home"
@@ -55,89 +53,64 @@ function Navbar() {
   return (
     <SearchProvider>
       <nav
-        className={`fixed top-0 left-0 w-full h-16 z-[1000000] flex p-4 py-8 items-center justify-between transition-all duration-300 ease-in-out ${
-          isNotHomePage ? "bg-[#201F31]" : "bg-opacity-0"
-        } ${
-          isScrolled ? "bg-[#2D2B44] bg-opacity-90 backdrop-blur-md" : ""
-        } max-[600px]:h-fit max-[600px]:flex-col max-[1200px]:bg-opacity-100 max-[600px]:py-2`}
+        className={`fixed top-0 left-0 w-full z-[1000000] transition-all duration-300 ease-in-out
+          ${isNotHomePage ? "bg-[#18181B]" : "bg-opacity-0"}
+          ${isScrolled ? "bg-[#18181B]/80 backdrop-blur-md shadow-lg" : ""}`}
       >
-        <div className="flex gap-x-6 items-center w-fit max-lg:w-full max-lg:justify-between">
-          <div className="flex gap-x-6 items-center w-fit">
-            <FontAwesomeIcon
-              icon={faBars}
-              className="text-2xl text-white mt-1 cursor-pointer"
-              onClick={handleHamburgerClick}
-            />
-            <Link
-              to="/"
-              className="text-4xl font-bold max-[575px]:text-3xl cursor-pointer"
-            >
-              {logoTitle.slice(0, 3)}
-              <span className="text-[#FFBADE]">{logoTitle.slice(3, 4)}</span>
-              {logoTitle.slice(4)}
-            </Link>
-          </div>
-          <WebSearch />
-        </div>
-        <div className="flex gap-x-7 items-center max-lg:hidden">
-          {[
-            { icon: faRandom, label: "Random", path: "/random" },
-            { icon: faFilm, label: "Movie", path: "/movie" },
-            { icon: faStar, label: "Popular", path: "/most-popular" },
-          ].map((item) => (
-            <Link
-              key={item.path}
-              to={
-                item.path === "/random"
-                  ? location.pathname === "/random"
-                    ? "#"
-                    : "/random"
-                  : item.path
-              }
-              onClick={item.path === "/random" ? handleRandomClick : undefined}
-              className="flex flex-col gap-y-1 items-center cursor-pointer"
-            >
+        <div className="max-w-[1920px] mx-auto px-4 h-16 flex items-center justify-between">
+          {/* Left Section */}
+          <div className="flex items-center gap-8">
+            <div className="flex items-center gap-4">
               <FontAwesomeIcon
-                icon={item.icon}
-                className="text-[#ffbade] text-xl font-bold"
+                icon={faBars}
+                className="text-xl text-gray-200 cursor-pointer hover:text-white transition-colors"
+                onClick={handleHamburgerClick}
               />
-              <p className="text-[15px]">{item.label}</p>
-            </Link>
-          ))}
-          <div className="flex flex-col gap-y-1 items-center w-auto">
-            <div className="flex">
-              {["EN", "JP"].map((lang, index) => (
+              <Link to="/" className="flex items-center">
+                <img src="/logo.png" alt="JustAnime Logo" className="h-9 w-auto" />
+              </Link>
+            </div>
+          </div>
+
+          {/* Center Section - Search */}
+          <div className="flex-1 flex justify-center items-center max-w-none mx-8 hidden md:flex">
+            <div className="flex items-center gap-2 w-[600px]">
+              <WebSearch />
+              <Link
+                to={location.pathname === "/random" ? "#" : "/random"}
+                onClick={handleRandomClick}
+                className="p-[10px] aspect-square bg-[#2a2a2a]/75 text-white/50 hover:text-white rounded-lg transition-colors flex items-center justify-center"
+                title="Random Anime"
+              >
+                <FontAwesomeIcon icon={faRandom} className="text-lg" />
+              </Link>
+            </div>
+          </div>
+
+          {/* Right Section */}
+          <div className="flex items-center gap-6">
+            <div className="hidden md:flex items-center gap-2 bg-[#27272A] rounded-md p-1">
+              {["EN", "JP"].map((lang) => (
                 <button
                   key={lang}
                   onClick={() => toggleLanguage(lang)}
-                  className={`px-1 py-[1px] text-xs font-bold ${
-                    index === 0 ? "rounded-l-[3px]" : "rounded-r-[3px]"
-                  } ${
+                  className={`px-3 py-1 text-sm font-medium rounded ${
                     language === lang
-                      ? "bg-[#ffbade] text-black"
-                      : "bg-gray-600 text-white"
+                      ? "bg-[#3F3F46] text-white"
+                      : "text-gray-400 hover:text-white"
                   }`}
                 >
                   {lang}
                 </button>
               ))}
             </div>
-            <div className="w-full">
-              <p className="whitespace-nowrap text-[15px]">Anime name</p>
-            </div>
           </div>
-          <Link
-            to="https://t.me/zenime_discussion"
-            className="flex flex-col gap-y-1 items-center cursor-pointer"
-          >
-            <FaTelegramPlane
-              // icon={faTelegram}
-              className="text-xl font-bold text-[#ffbade]"
-            />
-            <p className="text-[15px] mb-[1px] text-white">Join Telegram</p>
-          </Link>
         </div>
-        <MobileSearch />
+
+        {/* Mobile Search */}
+        <div className="md:hidden">
+          <MobileSearch />
+        </div>
       </nav>
       <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />
     </SearchProvider>
diff --git a/src/components/searchbar/MobileSearch.jsx b/src/components/searchbar/MobileSearch.jsx
index 80a56d7..fc2acbd 100644
--- a/src/components/searchbar/MobileSearch.jsx
+++ b/src/components/searchbar/MobileSearch.jsx
@@ -24,38 +24,41 @@ function MobileSearch() {
     return (
         <>
             {isSearchVisible && (
-                <div className="flex w-full mt-2 relative custom-md:hidden ">
-                    <input
-                        type="text"
-                        className="bg-white px-4 py-2 text-black focus:outline-none w-full rounded-l-md"
-                        placeholder="Search anime..."
-                        value={searchValue}
-                        onChange={(e) => setSearchValue(e.target.value)}
-                        onFocus={() => setIsFocused(true)}
-                        onBlur={() => {
-                            setTimeout(() => {
-                                const isInsideSuggestionBox = suggestionRefs.current.some(
-                                    (ref) => ref && ref.contains(document.activeElement),
-                                );
-                                if (!isInsideSuggestionBox) {
-                                    setIsFocused(false);
+                <div className="flex w-full mt-2 relative custom-md:hidden px-4">
+                    <div className="relative w-full">
+                        <input
+                            type="text"
+                            className="w-full px-5 py-2 bg-[#2a2a2a]/75 text-white border border-white/10 rounded-lg focus:outline-none focus:border-white/30 transition-colors placeholder-white/50"
+                            placeholder="Search anime..."
+                            value={searchValue}
+                            onChange={(e) => setSearchValue(e.target.value)}
+                            onFocus={() => setIsFocused(true)}
+                            onBlur={() => {
+                                setTimeout(() => {
+                                    const isInsideSuggestionBox = suggestionRefs.current.some(
+                                        (ref) => ref && ref.contains(document.activeElement),
+                                    );
+                                    if (!isInsideSuggestionBox) {
+                                        setIsFocused(false);
+                                    }
+                                }, 100);
+                            }}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleSearchClick();
                                 }
-                            }, 100);
-                        }}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                                handleSearchClick();
-                            }
-                        }}
-                    />
-                    <button className="flex items-center justify-center p-2 bg-white rounded-r-md"
-                        onClick={handleSearchClick}
-                    >
-                        <FontAwesomeIcon
-                            icon={faMagnifyingGlass}
-                            className="text-black text-lg"
+                            }}
                         />
-                    </button>
+                        <button 
+                            className="absolute right-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white transition-colors"
+                            onClick={handleSearchClick}
+                        >
+                            <FontAwesomeIcon
+                                icon={faMagnifyingGlass}
+                                className="text-lg"
+                            />
+                        </button>
+                    </div>
                     {searchValue.trim() && isFocused && (
                         <div
                             ref={addSuggestionRef}
diff --git a/src/components/searchbar/WebSearch.jsx b/src/components/searchbar/WebSearch.jsx
index 8f36cd6..832cc70 100644
--- a/src/components/searchbar/WebSearch.jsx
+++ b/src/components/searchbar/WebSearch.jsx
@@ -27,10 +27,10 @@ function WebSearch() {
     };
 
     return (
-        <div className="flex items-center relative w-[380px] max-[600px]:w-fit">
+        <div className="flex items-center relative w-[450px] max-[600px]:w-fit">
             <input
                 type="text"
-                className="bg-white px-4 py-2 text-black focus:outline-none w-full max-[600px]:hidden"
+                className="w-full px-5 py-2 bg-[#2a2a2a]/75 text-white rounded-lg focus:outline-none transition-colors placeholder-white/50 max-[600px]:hidden"
                 placeholder="Search anime..."
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
@@ -54,12 +54,12 @@ function WebSearch() {
                 }}
             />
             <button
-                className="bg-white p-2 max-[600px]:bg-transparent focus:outline-none max-[600px]:p-0"
+                className="absolute right-4 text-white/50 hover:text-white transition-colors max-[600px]:static max-[600px]:bg-transparent focus:outline-none max-[600px]:p-0"
                 onClick={handleSearchClick}
             >
                 <FontAwesomeIcon
                     icon={faMagnifyingGlass}
-                    className="text-lg text-black hover:text-[#ffbade] max-[600px]:text-white max-[600px]:text-2xl max-[575px]:text-xl max-[600px]:mt-[7px]"
+                    className="text-lg max-[600px]:text-white max-[600px]:text-2xl max-[575px]:text-xl max-[600px]:mt-[7px]"
                 />
             </button>
             {searchValue.trim() && isFocused && (
diff --git a/src/components/sidecard/Sidecard.jsx b/src/components/sidecard/Sidecard.jsx
index fb539da..0bcccd1 100644
--- a/src/components/sidecard/Sidecard.jsx
+++ b/src/components/sidecard/Sidecard.jsx
@@ -73,7 +73,7 @@ function Sidecard({ data, label, className, limit }) {
                     </div>
                   )}
                 <img
-                  src={`https://wsrv.nl/?url=${item.poster}`}
+                  src={`${item.poster}`}
                   alt={item.title}
                   className="flex-shrink-0 w-[60px] h-[75px] rounded-md object-cover cursor-pointer"
                   onClick={() => navigate(`/watch/${item.id}`)}
diff --git a/src/components/splashscreen/SplashScreen.css b/src/components/splashscreen/SplashScreen.css
index 7401cba..26bf168 100644
--- a/src/components/splashscreen/SplashScreen.css
+++ b/src/components/splashscreen/SplashScreen.css
@@ -2,6 +2,7 @@
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background-color: #0a0a0a;
   color: white;
 }
 
diff --git a/src/components/suggestion/Suggestion.jsx b/src/components/suggestion/Suggestion.jsx
index 5cacb94..5a1267b 100644
--- a/src/components/suggestion/Suggestion.jsx
+++ b/src/components/suggestion/Suggestion.jsx
@@ -55,7 +55,7 @@ function Suggestion({ keyword, className }) {
               }}
             >
               <img
-                src={`https://wsrv.nl/?url=${item.poster}`}
+                src={`${item.poster}`}
                 className="w-[50px] h-[75px] flex-shrink-0 object-cover"
                 alt=""
                 onError={(e) => {
diff --git a/src/components/topten/Topten.jsx b/src/components/topten/Topten.jsx
index c0a6758..6b54316 100644
--- a/src/components/topten/Topten.jsx
+++ b/src/components/topten/Topten.jsx
@@ -99,7 +99,7 @@ function Topten({ data, className }) {
               >
                 {/* Image with tooltip behavior */}
                 <img
-                  src={`https://wsrv.nl/?url=${item.poster}`}
+                  src={`${item.poster}`}
                   alt={item.title}
                   className="w-[60px] h-[75px] rounded-md object-cover flex-shrink-0 cursor-pointer"
                   onClick={() => navigate(`/watch/${item.id}`)}
diff --git a/src/components/trending/Trending.jsx b/src/components/trending/Trending.jsx
index 002ad54..dd9ea4f 100644
--- a/src/components/trending/Trending.jsx
+++ b/src/components/trending/Trending.jsx
@@ -51,7 +51,7 @@ const Trending = ({ trending }) => {
                     className="inline-block bg-[#2a2c31] absolute w-auto left-[40px] right-0 top-0 bottom-0 max-[575px]:left-0 max-[575px]:top-0 max-[575px]:bottom-0"
                   >
                     <img
-                      src={`https://wsrv.nl/?url=${item.poster}`}
+                      src={`${item.poster}`}
                       alt={item.title}
                       className="block w-full h-full object-cover hover:cursor-pointer"
                       title={item.title}
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 789fb6a..cdb86ee 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -18,7 +18,7 @@ function Home() {
   if (!homeInfo) return <Error error="404" />;
   return (
     <>
-      <div className="px-4 w-full max-[1200px]:px-0">
+      <div className="pt-16 px-4 w-full max-[1200px]:px-0">
         <Spotlight spotlights={homeInfo.spotlights} />
         <ContinueWatching />
         <Trending trending={homeInfo.trending} />
diff --git a/src/pages/animeInfo/AnimeInfo.jsx b/src/pages/animeInfo/AnimeInfo.jsx
index 60b1e4f..89f0e3c 100644
--- a/src/pages/animeInfo/AnimeInfo.jsx
+++ b/src/pages/animeInfo/AnimeInfo.jsx
@@ -157,14 +157,14 @@ function AnimeInfo({ random = false }) {
     <>
       <div className="relative grid grid-cols-[minmax(0,75%),minmax(0,25%)] h-fit w-full overflow-hidden text-white mt-[64px] max-[1200px]:flex max-[1200px]:flex-col max-md:mt-[50px]">
         <img
-          src={`https://wsrv.nl/?url=${poster}`}
+          src={`${poster}`}
           alt={`${title} Poster`}
           className="absolute inset-0 object-cover w-full h-full filter grayscale blur-lg z-[-900]"
         />
         <div className="flex items-start z-10 px-14 py-[70px] bg-[#252434] bg-opacity-70 gap-x-8 max-[1024px]:px-6 max-[1024px]:py-10 max-[1024px]:gap-x-4 max-[575px]:flex-col max-[575px]:items-center max-[575px]:justify-center">
           <div className="relative w-[180px] h-[270px] max-[575px]:w-[140px] max-[575px]:h-[200px] flex-shrink-0">
             <img
-              src={`https://wsrv.nl/?url=${poster}`}
+              src={`${poster}`}
               alt={`${title} Poster`}
               className="w-full h-full object-cover object-center flex-shrink-0"
             />
diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx
index e9ee8c0..b2e1fab 100644
--- a/src/pages/watch/Watch.jsx
+++ b/src/pages/watch/Watch.jsx
@@ -186,7 +186,7 @@ export default function Watch() {
         <img
           src={
             !animeInfoLoading
-              ? `https://wsrv.nl/?url=${animeInfo?.poster}`
+              ? `${animeInfo?.poster}`
               : "https://i.postimg.cc/rFZnx5tQ/2-Kn-Kzog-md.webp"
           }
           alt={`${animeInfo?.title} Poster`}
@@ -336,7 +336,7 @@ export default function Watch() {
                         </p>
                         <div className="absolute inset-0 z-10 bg-[url('https://i.postimg.cc/pVGY6RXd/thumb.png')] bg-repeat"></div>
                         <img
-                          src={`https://wsrv.nl/?url=${season.season_poster}`}
+                          src={`${season.season_poster}`}
                           alt=""
                           className="w-full h-full object-cover blur-[3px] opacity-50"
                         />
@@ -383,7 +383,7 @@ export default function Watch() {
           <div className="flex flex-col gap-y-4 items-start ml-8 max-[1400px]:ml-0 max-[1400px]:mt-10 max-[1400px]:flex-row max-[1400px]:gap-x-6 max-[1024px]:px-[30px] max-[1024px]:mt-8 max-[500px]:mt-4 max-[500px]:px-4">
             {animeInfo && animeInfo?.poster ? (
               <img
-                src={`https://wsrv.nl/?url=${animeInfo?.poster}`}
+                src={`${animeInfo?.poster}`}
                 alt=""
                 className="w-[100px] h-[150px] object-cover max-[500px]:w-[70px] max-[500px]:h-[90px]"
               />