diff --git a/src/App.jsx b/src/App.jsx
index f8eb84b..ac0d502 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import './App.css';
-import { Navbar } from './components/Navbar';
-import Footer from './components/Footer';
+import Navbar from './components/Navbar';   //  make sure default export
+import Footer from './components/Footer';   //  make sure default export
 
 function App() {
   return (
     <>
       <Navbar />
-      <main className="min-h-screen">
-        <Outlet />
+      <main className="min-h-screen p-4">
+        <Outlet /> {/* This is where child routes render */}
       </main>
       <Footer />
     </>
diff --git a/src/components/Anime/Anime.jsx b/src/components/Anime/Anime.jsx
index 7265144..1560581 100644
--- a/src/components/Anime/Anime.jsx
+++ b/src/components/Anime/Anime.jsx
@@ -4,6 +4,8 @@ import axios from 'axios';
 import AnimeCard from './AnimeCard.jsx';
 import Pagination from '../Pagination.jsx';
 import Spinner from '../Spinner.jsx';
+import FilterBar from "./FilterBar";
+
 import { useSearchParams } from 'react-router-dom';
 import { useProfile } from '../../context/ProfileContext.jsx';
 import { useAuth } from '../../context/AuthContext.jsx';
diff --git a/src/components/Anime/FilterBar.jsx b/src/components/Anime/FilterBar.jsx
new file mode 100644
index 0000000..0562757
--- /dev/null
+++ b/src/components/Anime/FilterBar.jsx
@@ -0,0 +1,66 @@
+// src/components/Anime/FilterBar.jsx
+import { useState } from "react";
+
+export default function FilterBar({ onFilterChange, onSortChange }) {
+  const [genre, setGenre] = useState("");
+  const [status, setStatus] = useState("");
+  const [score, setScore] = useState("");
+  const [season, setSeason] = useState("");
+  const [sort, setSort] = useState("popularity");
+
+  const applyFilters = () => {
+    onFilterChange({ genre, status, score, season });
+    onSortChange(sort);
+  };
+
+  return (
+    <div className="flex flex-wrap gap-3 p-4 bg-gray-900 text-white rounded-xl shadow-md mb-4">
+      {/* Genre */}
+      <select value={genre} onChange={(e) => setGenre(e.target.value)} className="p-2 rounded bg-gray-800">
+        <option value="">All Genres</option>
+        <option value="1">Action</option>
+        <option value="4">Comedy</option>
+        <option value="8">Drama</option>
+        <option value="10">Fantasy</option>
+      </select>
+
+      {/* Status */}
+      <select value={status} onChange={(e) => setStatus(e.target.value)} className="p-2 rounded bg-gray-800">
+        <option value="">All Status</option>
+        <option value="airing">Airing</option>
+        <option value="complete">Completed</option>
+        <option value="upcoming">Upcoming</option>
+      </select>
+
+      {/* Score */}
+      <input
+        type="number"
+        placeholder="Min Score"
+        value={score}
+        onChange={(e) => setScore(e.target.value)}
+        className="p-2 rounded bg-gray-800 w-28"
+      />
+
+      {/* Year */}
+      <input
+        type="number"
+        placeholder="Year"
+        value={season}
+        onChange={(e) => setSeason(e.target.value)}
+        className="p-2 rounded bg-gray-800 w-28"
+      />
+
+      {/* Sort */}
+      <select value={sort} onChange={(e) => setSort(e.target.value)} className="p-2 rounded bg-gray-800">
+        <option value="popularity">Popularity</option>
+        <option value="score">Rating</option>
+        <option value="title">Title</option>
+        <option value="start_date">Year</option>
+      </select>
+
+      <button onClick={applyFilters} className="px-4 py-2 bg-blue-500 rounded hover:bg-blue-600">
+        Apply
+      </button>
+    </div>
+  );
+}
diff --git a/src/main.jsx b/src/main.jsx
index faf1adc..8cd46f2 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -17,22 +17,21 @@ import Login from './components/Auth/Login.jsx';
 import Profile from './components/Profile/Profile.jsx';
 
 import { AuthProvider } from './context/AuthContext.jsx';
-import { ProfileProvider } from './context/ProfileContext.jsx'; // Import the new provider
+import { ProfileProvider } from './context/ProfileContext.jsx';
 
 // Define routes
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path='/' element={<App />}>
+    <Route path="/" element={<App />}>
       <Route index element={<Anime />} />
-      <Route path='watchlist' element={<WatchList />} />
-      <Route path='profile' element={<Profile />} />
-      <Route path='login' element={<Login />} />
-      <Route path='*' element={<Navigate to='/' />} />
+      <Route path="watchlist" element={<WatchList />} />
+      <Route path="profile" element={<Profile />} />
+      <Route path="login" element={<Login />} />
+      <Route path="*" element={<Navigate to="/" />} />
     </Route>
   )
 );
 
-// Render app with both providers
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <AuthProvider>