diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index ff1a982..2b1c729 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -22,38 +22,18 @@
  * - Call to action
  */
 
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-// TODO: Import API functions
-import { getAllQuestions } from '../api/questionApi';
+import { getAllQuestions, searchQuestions } from '../api/questionApi';
 import QuestionCard from '../components/QuestionCard';
 import toast from 'react-hot-toast';
-
-/**
- * TODO: IMPLEMENT HOME PAGE
- *
- * Features:
- * 1. Hero section with CTA
- * 2. Fetch and display recent questions
- * 3. Show statistics
- * 4. Features grid
- * 5. Responsive design
- *
- * EXAMPLE STRUCTURE:
- * <div>
- *   <HeroSection />
- *   <FeaturesSection />
- *   <RecentQuestions />
- *   <Statistics />
- *   <CTASection />
- * </div>
- */
+import { Search } from 'lucide-react';
 
 const Home = () => {
   const [recentQuestions, setRecentQuestions] = useState([]);
   const [loading, setLoading] = useState(false);
-
-  // TODO: Fetch recent questions on mount
+  const [searchQuery, setSearchQuery] = useState('');
+  const navigate = useNavigate();
 
   const fetchRecentQuestions = async () => {
     setLoading(true);
@@ -77,6 +57,14 @@ const Home = () => {
     fetchRecentQuestions();
   }, []);
 
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      // Navigate to questions page with search query
+      navigate(`/questions?search=${encodeURIComponent(searchQuery)}`);
+    }
+  };
+
   return (
     <div className="min-h-screen">
       {/* Hero Section */}
@@ -87,6 +75,27 @@ const Home = () => {
             A community-sourced interview question bank where students share real questions from their internship and
             placement interviews.
           </p>
+          
+          {/* Search Bar in Hero */}
+          <div className="max-w-2xl mx-auto mb-8">
+            <form onSubmit={handleSearch} className="relative">
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none" />
+              <input
+                type="text"
+                placeholder="Search interview questions, companies, or topics..."
+                className="w-full pl-12 pr-4 py-4 rounded-lg text-gray-800 focus:ring-2 focus:ring-white focus:outline-none"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+              <button
+                type="submit"
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary-600 text-white px-6 py-2 rounded-md hover:bg-primary-700 transition"
+              >
+                Search
+              </button>
+            </form>
+          </div>
+
           <div className="flex justify-center gap-4">
             <Link to="/questions" className="bg-white text-primary-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
               Browse Questions
@@ -103,7 +112,6 @@ const Home = () => {
         <div className="container mx-auto px-4">
           <h2 className="text-3xl font-bold text-center mb-12">Why Use InterviewPrep?</h2>
           <div className="grid md:grid-cols-3 gap-8">
-            {/* TODO: Add feature cards */}
             <div className="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg hover:-translate-y-2 transform transition duration-300">
               <div className="text-4xl mb-4">📚</div>
               <h3 className="text-xl font-semibold mb-2">Vast Question Bank</h3>
@@ -147,44 +155,43 @@ const Home = () => {
       <section className="py-16 bg-gray-50">
         <div className="container mx-auto px-4">
           <h2 className="text-3xl font-bold text-center mb-12">Recent Questions</h2>
-          {/* TODO: Display recent questions using QuestionCard */}
-          {
-            loading ? (
-               <div className="flex justify-center items-center py-12">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-        <p className="ml-4 text-gray-600">Loading questions...</p>
-      </div>
-            ) : recentQuestions.length > 0 ? (
+          
+          {loading ? (
+            <div className="flex justify-center items-center py-12">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+              <p className="ml-4 text-gray-600">Loading questions...</p>
+            </div>
+          ) : recentQuestions.length > 0 ? (
+            <>
               <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {recentQuestions.map((question) => (
-          <QuestionCard 
-            key={question._id} 
-            question={question}
-            showActions={true}
-          />
-        ))}
-      </div>
-            ) : (
-              <div className="text-center text-gray-500 col-span-full py-8">
-        <p className="text-lg mb-4">No questions available yet</p>
-        <Link 
-          to="/submit" 
-          className="text-primary-600 hover:underline font-semibold"
-        >
-          Be the first to submit a question! →
-        </Link>
-      </div>
-            )
-          }
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {/* Placeholder */}
-            <div className="text-center text-gray-500 col-span-full py-8">
-              <p>Questions will appear here once implemented</p>
-              <Link to="/questions" className="text-primary-600 hover:underline mt-2 inline-block">
-                View All Questions →
+                {recentQuestions.map((question) => (
+                  <QuestionCard 
+                    key={question._id} 
+                    question={question}
+                    showActions={true}
+                  />
+                ))}
+              </div>
+              <div className="text-center mt-8">
+                <Link 
+                  to="/questions" 
+                  className="text-primary-600 hover:underline font-semibold text-lg"
+                >
+                  View All Questions →
+                </Link>
+              </div>
+            </>
+          ) : (
+            <div className="text-center text-gray-500 py-8">
+              <p className="text-lg mb-4">No questions available yet</p>
+              <Link 
+                to="/submit" 
+                className="text-primary-600 hover:underline font-semibold"
+              >
+                Be the first to submit a question! →
               </Link>
             </div>
-          </div>
+          )}
         </div>
       </section>
 
@@ -192,7 +199,6 @@ const Home = () => {
       <section className="py-16 bg-primary-600 text-white">
         <div className="container mx-auto px-4">
           <div className="grid md:grid-cols-3 gap-8 text-center">
-            {/* TODO: Fetch and display real statistics */}
             <div>
               <div className="text-4xl font-bold mb-2">500+</div>
               <div className="text-primary-100">Questions</div>
@@ -226,3 +232,232 @@ const Home = () => {
 };
 
 export default Home;
+
+// /**
+//  * HOME PAGE - Landing page
+//  *
+//  * HACKTOBERFEST TODO:
+//  * This is the main landing page of the application.
+//  *
+//  * CONTRIBUTOR TASKS:
+//  * 1. Create hero section with:
+//  *    - App title and tagline
+//  *    - Brief description
+//  *    - Call-to-action buttons
+//  * 2. Add features section highlighting key features
+//  * 3. Show recent/trending questions
+//  * 4. Add statistics (total questions, companies, topics)
+//  * 5. Make responsive and attractive
+//  *
+//  * SECTIONS:
+//  * - Hero section
+//  * - Features/Benefits
+//  * - Recent questions preview
+//  * - Statistics
+//  * - Call to action
+//  */
+
+// import { Link } from 'react-router-dom';
+// import { useEffect, useState } from 'react';
+// // TODO: Import API functions
+// import { getAllQuestions } from '../api/questionApi';
+// import QuestionCard from '../components/QuestionCard';
+// import toast from 'react-hot-toast';
+
+// /**
+//  * TODO: IMPLEMENT HOME PAGE
+//  *
+//  * Features:
+//  * 1. Hero section with CTA
+//  * 2. Fetch and display recent questions
+//  * 3. Show statistics
+//  * 4. Features grid
+//  * 5. Responsive design
+//  *
+//  * EXAMPLE STRUCTURE:
+//  * <div>
+//  *   <HeroSection />
+//  *   <FeaturesSection />
+//  *   <RecentQuestions />
+//  *   <Statistics />
+//  *   <CTASection />
+//  * </div>
+//  */
+
+// const Home = () => {
+//   const [recentQuestions, setRecentQuestions] = useState([]);
+//   const [loading, setLoading] = useState(false);
+
+//   // TODO: Fetch recent questions on mount
+
+//   const fetchRecentQuestions = async () => {
+//     setLoading(true);
+//     try {
+//       const response = await getAllQuestions({ 
+//         sort: 'latest', 
+//         limit: 6 
+//       });
+      
+//       setRecentQuestions(response.questions || []);
+//     } catch (error) {
+//       console.error('Error fetching recent questions:', error);
+//       toast.error('Failed to load recent questions');
+//       setRecentQuestions([]);
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   useEffect(() => {
+//     fetchRecentQuestions();
+//   }, []);
+
+//   return (
+//     <div className="min-h-screen">
+//       {/* Hero Section */}
+//       <section className="bg-gradient-to-r from-primary-600 to-primary-800 text-white py-20">
+//         <div className="container mx-auto px-4 text-center">
+//           <h1 className="text-5xl font-bold mb-6">Welcome to InterviewPrep</h1>
+//           <p className="text-xl mb-8 max-w-2xl mx-auto">
+//             A community-sourced interview question bank where students share real questions from their internship and
+//             placement interviews.
+//           </p>
+//           <div className="flex justify-center gap-4">
+//             <Link to="/questions" className="bg-white text-primary-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+//               Browse Questions
+//             </Link>
+//             <Link to="/submit" className="bg-primary-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-primary-800 transition border-2 border-white">
+//               Submit Question
+//             </Link>
+//           </div>
+//         </div>
+//       </section>
+
+//       {/* Features Section */}
+//       <section className="py-16 bg-white">
+//         <div className="container mx-auto px-4">
+//           <h2 className="text-3xl font-bold text-center mb-12">Why Use InterviewPrep?</h2>
+//           <div className="grid md:grid-cols-3 gap-8">
+//             {/* TODO: Add feature cards */}
+//             <div className="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg hover:-translate-y-2 transform transition duration-300">
+//               <div className="text-4xl mb-4">📚</div>
+//               <h3 className="text-xl font-semibold mb-2">Vast Question Bank</h3>
+//               <p className="text-gray-600">
+//                 Access thousands of real interview questions from top companies
+//               </p>
+//             </div>
+//             <div className="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg hover:-translate-y-2 transform transition duration-300">
+//               <div className="text-4xl mb-4">🏢</div>
+//               <h3 className="text-xl font-semibold mb-2">Company-Specific</h3>
+//               <p className="text-gray-600">
+//                 Filter questions by company, role, and difficulty level
+//               </p>
+//             </div>
+//             <div className="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg hover:-translate-y-2 transform transition duration-300">
+//               <div className="text-4xl mb-4">🤝</div>
+//               <h3 className="text-xl font-semibold mb-2">Community-Driven</h3>
+//               <p className="text-gray-600">
+//                 Built by students, for students. Everyone can contribute.
+//               </p>
+//             </div>
+//             <div className="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg hover:-translate-y-2 transform transition duration-300">
+//               <div className="text-4xl mb-4">🧠</div>
+//               <h3 className="text-xl font-semibold mb-2">Topic-wise Practice</h3>
+//               <p className="text-gray-600">
+//                 Practice questions categorized by topic and difficulty to strengthen weak areas.
+//               </p>
+//             </div>
+//             <div className="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-lg hover:-translate-y-2 transform transition duration-300">
+//               <div className="text-4xl mb-4">🔖</div>
+//               <h3 className="text-xl font-semibold mb-2">Bookmark Questions</h3>
+//               <p className="text-gray-600">
+//                 Save your favorite interview questions to revisit anytime.
+//               </p>
+//             </div>
+//           </div>
+//         </div>
+//       </section>
+
+//       {/* Recent Questions Preview */}
+//       <section className="py-16 bg-gray-50">
+//         <div className="container mx-auto px-4">
+//           <h2 className="text-3xl font-bold text-center mb-12">Recent Questions</h2>
+//           {/* TODO: Display recent questions using QuestionCard */}
+//           {
+//             loading ? (
+//                <div className="flex justify-center items-center py-12">
+//         <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+//         <p className="ml-4 text-gray-600">Loading questions...</p>
+//       </div>
+//             ) : recentQuestions.length > 0 ? (
+//               <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+//         {recentQuestions.map((question) => (
+//           <QuestionCard 
+//             key={question._id} 
+//             question={question}
+//             showActions={true}
+//           />
+//         ))}
+//       </div>
+//             ) : (
+//               <div className="text-center text-gray-500 col-span-full py-8">
+//         <p className="text-lg mb-4">No questions available yet</p>
+//         <Link 
+//           to="/submit" 
+//           className="text-primary-600 hover:underline font-semibold"
+//         >
+//           Be the first to submit a question! →
+//         </Link>
+//       </div>
+//             )
+//           }
+//           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+//             {/* Placeholder */}
+//             <div className="text-center text-gray-500 col-span-full py-8">
+//               <p>Questions will appear here once implemented</p>
+//               <Link to="/questions" className="text-primary-600 hover:underline mt-2 inline-block">
+//                 View All Questions →
+//               </Link>
+//             </div>
+//           </div>
+//         </div>
+//       </section>
+
+//       {/* Statistics Section */}
+//       <section className="py-16 bg-primary-600 text-white">
+//         <div className="container mx-auto px-4">
+//           <div className="grid md:grid-cols-3 gap-8 text-center">
+//             {/* TODO: Fetch and display real statistics */}
+//             <div>
+//               <div className="text-4xl font-bold mb-2">500+</div>
+//               <div className="text-primary-100">Questions</div>
+//             </div>
+//             <div>
+//               <div className="text-4xl font-bold mb-2">50+</div>
+//               <div className="text-primary-100">Companies</div>
+//             </div>
+//             <div>
+//               <div className="text-4xl font-bold mb-2">20+</div>
+//               <div className="text-primary-100">Topics</div>
+//             </div>
+//           </div>
+//         </div>
+//       </section>
+
+//       {/* CTA Section */}
+//       <section className="py-16 bg-white">
+//         <div className="container mx-auto px-4 text-center">
+//           <h2 className="text-3xl font-bold mb-4">Ready to Start Preparing?</h2>
+//           <p className="text-xl text-gray-600 mb-8">
+//             Join our community and access thousands of interview questions
+//           </p>
+//           <Link to="/register" className="btn-primary text-lg px-8 py-3">
+//             Get Started Free
+//           </Link>
+//         </div>
+//       </section>
+//     </div>
+//   );
+// };
+
+// export default Home;
diff --git a/frontend/src/pages/Questions.jsx b/frontend/src/pages/Questions.jsx
index ca42148..80f70ad 100644
--- a/frontend/src/pages/Questions.jsx
+++ b/frontend/src/pages/Questions.jsx
@@ -1,68 +1,9 @@
 /* eslint-disable no-unused-vars */
-/**
- * QUESTIONS PAGE - Browse all questions with filters
- *
- * HACKTOBERFEST TODO:
- * This page displays all questions with filtering and sorting options.
- *
- * CONTRIBUTOR TASKS:
- * 1. Fetch all questions from API
- * 2. Implement filter by:
- *    - Company
- *    - Topic
- *    - Role
- *    - Difficulty
- * 3. Implement search functionality
- * 4. Implement sorting (latest, oldest, most upvoted)
- * 5. Implement pagination or infinite scroll
- * 6. Display questions using QuestionCard component
- * 7. Add loading and error states
- * 8. Make responsive with sidebar filters
- *
- * FEATURES:
- * - Search bar
- * - Filter sidebar/dropdown
- * - Sort options
- * - Question grid/list
- * - Pagination
- */
-
 import { useState, useEffect, useCallback } from 'react';
+import { Search, X, Filter } from 'lucide-react';
 // Import API functions
 import { getAllQuestions, getCategories, searchQuestions } from '../api/questionApi';
 import QuestionCard from '../components/QuestionCard';
-// import Loading from '../components/Loading';
-
-/**
- * TODO: IMPLEMENT QUESTIONS PAGE
- *
- * State to manage:
- * - questions: Array of questions
- * - filters: { company, topic, role, difficulty, sort }
- * - searchQuery: string
- * - loading: boolean
- * - error: string
- * - pagination: { page, limit, total }
- * - categories: { companies, topics, roles }
- *
- * Functions:
- * 1. fetchQuestions() - Fetch questions with filters
- * 2. fetchCategories() - Fetch filter options
- * 3. handleFilterChange() - Update filters
- * 4. handleSearch() - Search questions
- * 5. handleSort() - Sort questions
- * 6. handlePageChange() - Pagination
- *
- * LAYOUT:
- * <div>
- *   <SearchBar />
- *   <div className="flex">
- *     <FilterSidebar />
- *     <QuestionGrid />
- *   </div>
- *   <Pagination />
- * </div>
- */
 
 const Questions = () => {
   const [questions, setQuestions] = useState([]);
@@ -70,6 +11,7 @@ const Questions = () => {
   const [error, setError] = useState('');
   const [categoriesLoading, setCategoriesLoading] = useState(false);
   const [categoriesError, setCategoriesError] = useState('');
+  const [showFilters, setShowFilters] = useState(true);
 
   const [filters, setFilters] = useState({
     company: '',
@@ -93,26 +35,41 @@ const Questions = () => {
     }));
   };
 
-const fetchQuestions = useCallback(async () => {
-  setLoading(true);
-  setError('');
-  try {
-    const queryParams = {};
-    if (filters.company) queryParams.company = filters.company;
-    if (filters.topic) queryParams.topic = filters.topic;
-    if (filters.role) queryParams.role = filters.role;
-    if (filters.difficulty) queryParams.difficulty = filters.difficulty;
-    if (filters.sort) queryParams.sort = filters.sort;
-
-    const questionData = await getAllQuestions(queryParams);
-    setQuestions(questionData.questions || questionData || []);
-  } catch (err) {
-    setError('Failed to load questions. Please try again later.');
-    console.error('Error fetching questions:', err);
-  } finally {
-    setLoading(false);
-  }
-}, [filters]);
+  const clearSearch = () => {
+    setSearchQuery('');
+  };
+
+  const clearAllFilters = () => {
+    setFilters({
+      company: '',
+      topic: '',
+      role: '',
+      difficulty: '',
+      sort: 'latest',
+    });
+    setSearchQuery('');
+  };
+
+  const fetchQuestions = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const queryParams = {};
+      if (filters.company) queryParams.company = filters.company;
+      if (filters.topic) queryParams.topic = filters.topic;
+      if (filters.role) queryParams.role = filters.role;
+      if (filters.difficulty) queryParams.difficulty = filters.difficulty;
+      if (filters.sort) queryParams.sort = filters.sort;
+
+      const questionData = await getAllQuestions(queryParams);
+      setQuestions(questionData.questions || questionData || []);
+    } catch (err) {
+      setError('Failed to load questions. Please try again later.');
+      console.error('Error fetching questions:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [filters]);
 
   // Fetch questions on mount and when filters change
   useEffect(() => {
@@ -175,6 +132,8 @@ const fetchQuestions = useCallback(async () => {
     fetchCategories();
   }, []);
 
+  const activeFiltersCount = Object.values(filters).filter(v => v && v !== 'latest').length;
+
   return (
     <div className="container mx-auto px-4 py-8">
       {/* Page Header */}
@@ -183,82 +142,130 @@ const fetchQuestions = useCallback(async () => {
         <p className="text-gray-600">Browse and search through community-sourced interview questions</p>
       </div>
 
-      {/* Search Bar */}
-      <div className="mb-6">
-        {/* TODO: Implement search input */}
+      {/* Search Bar with Icon and Clear Button */}
+      <div className="mb-6 relative">
+        <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none" />
         <input
           type="text"
           placeholder="Search questions, companies, or topics..."
-          className="input-field"
+          className="w-full pl-12 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
+        {searchQuery && (
+          <button
+            onClick={clearSearch}
+            className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+            aria-label="Clear search"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        )}
       </div>
 
-      {/* Filters and Sort */}
-      <div className="mb-6 flex flex-wrap gap-4">
-        {/* TODO: Implement filter dropdowns */}
-        <select
-          className="px-4 py-2 border rounded-lg"
-          value={filters.company}
-          onChange={(e) => handleFilterChange('company', e.target.value)}
-        >
-          <option value="">All Companies</option>
-          {categories.companies.map((company) => (
-            <option key={company} value={company}>
-              {company}
-            </option>
-          ))}
-        </select>
-
-        <select
-          className="px-4 py-2 border rounded-lg"
-          value={filters.topic}
-          onChange={(e) => handleFilterChange('topic', e.target.value)}
-        >
-          <option value="">All Topics</option>
-          {categories.topics.map((topic) => (
-            <option key={topic} value={topic}>
-              {topic}
-            </option>
-          ))}
-        </select>
-
-        <select
-          className="px-4 py-2 border rounded-lg"
-          value={filters.role}
-          onChange={(e) => setFilters({ ...filters, role: e.target.value })}
-        >
-          <option value="">All Roles</option>
-          {categories.roles.map((role) => (
-            <option key={role} value={role}>
-              {role}
-            </option>
-          ))}
-        </select>
-
-        <select
-          className="px-4 py-2 border rounded-lg"
-          value={filters.difficulty}
-          onChange={(e) => handleFilterChange('difficulty', e.target.value)}
+      {/* Filter Toggle and Clear All Button */}
+      <div className="mb-4 flex items-center justify-between">
+        <button
+          onClick={() => setShowFilters(!showFilters)}
+          className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
         >
-          <option value="">All Difficulties</option>
-          <option value="Easy">Easy</option>
-          <option value="Medium">Medium</option>
-          <option value="Hard">Hard</option>
-        </select>
-
-        <select
-          className="px-4 py-2 border rounded-lg"
-          value={filters.sort}
-          onChange={(e) => handleFilterChange('sort', e.target.value)}
-        >
-          <option value="latest">Latest</option>
-          <option value="oldest">Oldest</option>
-          <option value="upvotes">Most Upvoted</option>
-        </select>
+          <Filter className="w-4 h-4" />
+          <span>Filters</span>
+          {activeFiltersCount > 0 && (
+            <span className="bg-blue-600 text-white text-xs rounded-full px-2 py-0.5">
+              {activeFiltersCount}
+            </span>
+          )}
+        </button>
+        
+        {(activeFiltersCount > 0 || searchQuery) && (
+          <button
+            onClick={clearAllFilters}
+            className="text-sm text-blue-600 hover:text-blue-800 transition-colors"
+          >
+            Clear all filters
+          </button>
+        )}
       </div>
 
+      {/* Filters and Sort - Now Collapsible */}
+      {showFilters && (
+        <div className="mb-6 flex flex-wrap gap-4">
+          <select
+            className="px-4 py-2 border rounded-lg"
+            value={filters.company}
+            onChange={(e) => handleFilterChange('company', e.target.value)}
+          >
+            <option value="">All Companies</option>
+            {categories.companies.map((company) => (
+              <option key={company} value={company}>
+                {company}
+              </option>
+            ))}
+          </select>
+
+          <select
+            className="px-4 py-2 border rounded-lg"
+            value={filters.topic}
+            onChange={(e) => handleFilterChange('topic', e.target.value)}
+          >
+            <option value="">All Topics</option>
+            {categories.topics.map((topic) => (
+              <option key={topic} value={topic}>
+                {topic}
+              </option>
+            ))}
+          </select>
+
+          <select
+            className="px-4 py-2 border rounded-lg"
+            value={filters.role}
+            onChange={(e) => setFilters({ ...filters, role: e.target.value })}
+          >
+            <option value="">All Roles</option>
+            {categories.roles.map((role) => (
+              <option key={role} value={role}>
+                {role}
+              </option>
+            ))}
+          </select>
+
+          <select
+            className="px-4 py-2 border rounded-lg"
+            value={filters.difficulty}
+            onChange={(e) => handleFilterChange('difficulty', e.target.value)}
+          >
+            <option value="">All Difficulties</option>
+            <option value="Easy">Easy</option>
+            <option value="Medium">Medium</option>
+            <option value="Hard">Hard</option>
+          </select>
+
+          <select
+            className="px-4 py-2 border rounded-lg"
+            value={filters.sort}
+            onChange={(e) => handleFilterChange('sort', e.target.value)}
+          >
+            <option value="latest">Latest</option>
+            <option value="oldest">Oldest</option>
+            <option value="upvotes">Most Upvoted</option>
+          </select>
+        </div>
+      )}
+
+      {/* Active Search/Filter Indicator */}
+      {(searchQuery || activeFiltersCount > 0) && (
+        <div className="mb-4 text-sm text-gray-600">
+          {searchQuery && (
+            <span>Searching for: <span className="font-semibold">"{searchQuery}"</span></span>
+          )}
+          {searchQuery && activeFiltersCount > 0 && <span> with </span>}
+          {activeFiltersCount > 0 && (
+            <span><span className="font-semibold">{activeFiltersCount}</span> active filter{activeFiltersCount > 1 ? 's' : ''}</span>
+          )}
+        </div>
+      )}
+
       {/* Error Message */}
       {error && (
         <div className="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
@@ -276,6 +283,14 @@ const fetchQuestions = useCallback(async () => {
         ) : questions.length === 0 ? (
           <div className="col-span-full text-center py-12">
             <p className="text-gray-600">No questions found. Try adjusting your filters or search terms.</p>
+            {(searchQuery || activeFiltersCount > 0) && (
+              <button
+                onClick={clearAllFilters}
+                className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                Clear all filters
+              </button>
+            )}
           </div>
         ) : (
           questions.map((question) => (
@@ -308,3 +323,316 @@ const fetchQuestions = useCallback(async () => {
 };
 
 export default Questions;
+
+
+
+// /* eslint-disable no-unused-vars */
+// /**
+//  * QUESTIONS PAGE - Browse all questions with filters
+//  *
+//  * HACKTOBERFEST TODO:
+//  * This page displays all questions with filtering and sorting options.
+//  *
+//  * CONTRIBUTOR TASKS:
+//  * 1. Fetch all questions from API
+//  * 2. Implement filter by:
+//  *    - Company
+//  *    - Topic
+//  *    - Role
+//  *    - Difficulty
+//  * 3. Implement search functionality
+//  * 4. Implement sorting (latest, oldest, most upvoted)
+//  * 5. Implement pagination or infinite scroll
+//  * 6. Display questions using QuestionCard component
+//  * 7. Add loading and error states
+//  * 8. Make responsive with sidebar filters
+//  *
+//  * FEATURES:
+//  * - Search bar
+//  * - Filter sidebar/dropdown
+//  * - Sort options
+//  * - Question grid/list
+//  * - Pagination
+//  */
+
+// import { useState, useEffect, useCallback } from 'react';
+// // Import API functions
+// import { getAllQuestions, getCategories, searchQuestions } from '../api/questionApi';
+// import QuestionCard from '../components/QuestionCard';
+// // import Loading from '../components/Loading';
+
+// /**
+//  * TODO: IMPLEMENT QUESTIONS PAGE
+//  *
+//  * State to manage:
+//  * - questions: Array of questions
+//  * - filters: { company, topic, role, difficulty, sort }
+//  * - searchQuery: string
+//  * - loading: boolean
+//  * - error: string
+//  * - pagination: { page, limit, total }
+//  * - categories: { companies, topics, roles }
+//  *
+//  * Functions:
+//  * 1. fetchQuestions() - Fetch questions with filters
+//  * 2. fetchCategories() - Fetch filter options
+//  * 3. handleFilterChange() - Update filters
+//  * 4. handleSearch() - Search questions
+//  * 5. handleSort() - Sort questions
+//  * 6. handlePageChange() - Pagination
+//  *
+//  * LAYOUT:
+//  * <div>
+//  *   <SearchBar />
+//  *   <div className="flex">
+//  *     <FilterSidebar />
+//  *     <QuestionGrid />
+//  *   </div>
+//  *   <Pagination />
+//  * </div>
+//  */
+
+// const Questions = () => {
+//   const [questions, setQuestions] = useState([]);
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState('');
+//   const [categoriesLoading, setCategoriesLoading] = useState(false);
+//   const [categoriesError, setCategoriesError] = useState('');
+
+//   const [filters, setFilters] = useState({
+//     company: '',
+//     topic: '',
+//     role: '',
+//     difficulty: '',
+//     sort: 'latest',
+//   });
+
+//   const [searchQuery, setSearchQuery] = useState('');
+//   const [categories, setCategories] = useState({
+//     companies: [],
+//     topics: [],
+//     roles: [],
+//   });
+
+//   const handleFilterChange = (filterType, value) => {
+//     setFilters(prevFilters => ({
+//       ...prevFilters,
+//       [filterType]: value
+//     }));
+//   };
+
+// const fetchQuestions = useCallback(async () => {
+//   setLoading(true);
+//   setError('');
+//   try {
+//     const queryParams = {};
+//     if (filters.company) queryParams.company = filters.company;
+//     if (filters.topic) queryParams.topic = filters.topic;
+//     if (filters.role) queryParams.role = filters.role;
+//     if (filters.difficulty) queryParams.difficulty = filters.difficulty;
+//     if (filters.sort) queryParams.sort = filters.sort;
+
+//     const questionData = await getAllQuestions(queryParams);
+//     setQuestions(questionData.questions || questionData || []);
+//   } catch (err) {
+//     setError('Failed to load questions. Please try again later.');
+//     console.error('Error fetching questions:', err);
+//   } finally {
+//     setLoading(false);
+//   }
+// }, [filters]);
+
+//   // Fetch questions on mount and when filters change
+//   useEffect(() => {
+//     fetchQuestions();
+//   }, [fetchQuestions]);
+
+//   //Fetch categories function for filters
+//   const fetchCategories = async () => {
+//     setCategoriesLoading(true);
+//     setCategoriesError('');
+//     try {
+//       const categoriesData = await getCategories();
+
+//       setCategories({
+//         companies: categoriesData.companies || [],
+//         topics: categoriesData.topics || [],
+//         roles: categoriesData.roles || [],
+//       })
+//     }
+//     catch (err) {
+//       setCategoriesError('Failed to load filter options. Please try again later.');
+//       console.error('Error fetching categories:', err);
+//     }
+//     finally {
+//       setCategoriesLoading(false); // This ensures loading stops even if error occurs
+//     }
+//   }
+
+//   // Handle search functionality
+//   const handleSearch = useCallback(async () => {
+//     if (searchQuery.trim()) {
+//       setLoading(true);
+//       setError('');
+//       try {
+//         const response = await searchQuestions(searchQuery);
+//         setQuestions(response.questions || []);
+//       } catch (err) {
+//         setError('Failed to search questions. Please try again later.');
+//         console.error('Error searching questions:', err);
+//       } finally {
+//         setLoading(false);
+//       }
+//     } else {
+//       // If search is empty, fetch all questions with current filters
+//       fetchQuestions();
+//     }
+//   }, [searchQuery, fetchQuestions]);
+
+//   // Debounce search queries
+//   useEffect(() => {
+//     const delayedSearch = setTimeout(() => {
+//       handleSearch();
+//     }, 500); // Wait 500ms after user stops typing
+
+//     return () => clearTimeout(delayedSearch);
+//   }, [searchQuery, handleSearch]);
+
+//   // Fetch categories for filters
+//   useEffect(() => {
+//     fetchCategories();
+//   }, []);
+
+//   return (
+//     <div className="container mx-auto px-4 py-8">
+//       {/* Page Header */}
+//       <div className="mb-8">
+//         <h1 className="text-4xl font-bold text-gray-800 mb-2">Interview Questions</h1>
+//         <p className="text-gray-600">Browse and search through community-sourced interview questions</p>
+//       </div>
+
+//       {/* Search Bar */}
+//       <div className="mb-6">
+//         {/* TODO: Implement search input */}
+//         <input
+//           type="text"
+//           placeholder="Search questions, companies, or topics..."
+//           className="input-field"
+//           value={searchQuery}
+//           onChange={(e) => setSearchQuery(e.target.value)}
+//         />
+//       </div>
+
+//       {/* Filters and Sort */}
+//       <div className="mb-6 flex flex-wrap gap-4">
+//         {/* TODO: Implement filter dropdowns */}
+//         <select
+//           className="px-4 py-2 border rounded-lg"
+//           value={filters.company}
+//           onChange={(e) => handleFilterChange('company', e.target.value)}
+//         >
+//           <option value="">All Companies</option>
+//           {categories.companies.map((company) => (
+//             <option key={company} value={company}>
+//               {company}
+//             </option>
+//           ))}
+//         </select>
+
+//         <select
+//           className="px-4 py-2 border rounded-lg"
+//           value={filters.topic}
+//           onChange={(e) => handleFilterChange('topic', e.target.value)}
+//         >
+//           <option value="">All Topics</option>
+//           {categories.topics.map((topic) => (
+//             <option key={topic} value={topic}>
+//               {topic}
+//             </option>
+//           ))}
+//         </select>
+
+//         <select
+//           className="px-4 py-2 border rounded-lg"
+//           value={filters.role}
+//           onChange={(e) => setFilters({ ...filters, role: e.target.value })}
+//         >
+//           <option value="">All Roles</option>
+//           {categories.roles.map((role) => (
+//             <option key={role} value={role}>
+//               {role}
+//             </option>
+//           ))}
+//         </select>
+
+//         <select
+//           className="px-4 py-2 border rounded-lg"
+//           value={filters.difficulty}
+//           onChange={(e) => handleFilterChange('difficulty', e.target.value)}
+//         >
+//           <option value="">All Difficulties</option>
+//           <option value="Easy">Easy</option>
+//           <option value="Medium">Medium</option>
+//           <option value="Hard">Hard</option>
+//         </select>
+
+//         <select
+//           className="px-4 py-2 border rounded-lg"
+//           value={filters.sort}
+//           onChange={(e) => handleFilterChange('sort', e.target.value)}
+//         >
+//           <option value="latest">Latest</option>
+//           <option value="oldest">Oldest</option>
+//           <option value="upvotes">Most Upvoted</option>
+//         </select>
+//       </div>
+
+//       {/* Error Message */}
+//       {error && (
+//         <div className="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
+//           {error}
+//         </div>
+//       )}
+
+//       {/* Questions Grid */}
+//       <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+//         {loading ? (
+//           <div className="col-span-full text-center py-12">
+//             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
+//             <p className="mt-4 text-gray-600">Loading questions...</p>
+//           </div>
+//         ) : questions.length === 0 ? (
+//           <div className="col-span-full text-center py-12">
+//             <p className="text-gray-600">No questions found. Try adjusting your filters or search terms.</p>
+//           </div>
+//         ) : (
+//           questions.map((question) => (
+//             <QuestionCard
+//               key={question._id}
+//               question={question}
+//               onUpvote={(questionId) => {
+//                 // TODO: Implement upvote functionality
+//                 console.log('Upvote question:', questionId);
+//               }}
+//               showActions={true}
+//             />
+//           ))
+//         )}
+//       </div>
+
+//       {/* Pagination */}
+//       {/* TODO: Implement pagination controls */}
+//       <div className="mt-8 flex justify-center">
+//         <div className="flex gap-2">
+//           <button className="px-4 py-2 border rounded-lg hover:bg-gray-100">Previous</button>
+//           <button className="px-4 py-2 bg-primary-600 text-white rounded-lg">1</button>
+//           <button className="px-4 py-2 border rounded-lg hover:bg-gray-100">2</button>
+//           <button className="px-4 py-2 border rounded-lg hover:bg-gray-100">3</button>
+//           <button className="px-4 py-2 border rounded-lg hover:bg-gray-100">Next</button>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Questions;