diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
index 675a73f..c4db78c 100644
--- a/components/FilterBar/index.tsx
+++ b/components/FilterBar/index.tsx
@@ -6,19 +6,16 @@ import { FilterContainerStyles } from './styles';
 export const FilterBar = ({
   filters,
   onFilterChange,
+  selectedFilters,
+  setSelectedFilters,
 }: {
   filters: FilterType[];
   onFilterChange: (filter: FilterType) => void;
+  selectedFilters: Filters;
+  setSelectedFilters: React.Dispatch<React.SetStateAction<Filters>>;
 }) => {
   const [activeFilter, setActiveFilter] = useState<FilterType | null>(null);
 
-  const [selectedFilters, setSelectedFilters] = useState<Filters>({
-    status: [],
-    technology: [],
-    projectSize: { min: 0, max: 0 },
-    location: [],
-  });
-
   const handleButtonClick = (filter: FilterType) => {
     setActiveFilter(activeFilter?.id === filter.id ? null : filter);
     onFilterChange(filter);
diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx
index 838a43e..7e1969f 100644
--- a/components/MapViewScreen/index.tsx
+++ b/components/MapViewScreen/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   LocationIcon,
   ProjectSizeIcon,
@@ -7,7 +8,7 @@ import {
 import { FilterBar } from '@/components/FilterBar';
 import Map from '@/components/Map';
 import { SearchBar } from '@/components/SearchBar';
-import { FilterType } from '@/types/schema';
+import { Filters, FilterType } from '@/types/schema';
 import { Project } from '../../types/schema';
 import ProjectsListingModal from '../ProjectsListingModal';
 
@@ -43,17 +44,37 @@ export default function MapViewScreen({
     },
   ];
 
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedFilters, setSelectedFilters] = useState<Filters>({
+    status: [],
+    technology: [],
+    projectSize: { min: 0, max: 0 },
+    location: [],
+  });
+
   const handleFilterChange = (filter: FilterType) => {
     console.log(filter);
   };
 
+  useEffect(() => {
+    let filtered: Project[] = [];
+    filtered =
+      projects?.filter(project =>
+        project.project_name.toLowerCase().includes(searchTerm.toLowerCase()),
+      ) ?? null;
+
+    setFilteredProjects(filtered);
+  }, [projects, searchTerm, setFilteredProjects]);
+
   return (
     <>
-      <SearchBar
-        allProjects={projects}
-        setFilteredProjects={setFilteredProjects}
+      <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+      <FilterBar
+        filters={filters}
+        onFilterChange={handleFilterChange}
+        selectedFilters={selectedFilters}
+        setSelectedFilters={setSelectedFilters}
       />
-      <FilterBar filters={filters} onFilterChange={handleFilterChange} />
       <Map projects={projects} />
       <ProjectsListingModal projects={filteredProjects} />
     </>
diff --git a/components/SearchBar/index.tsx b/components/SearchBar/index.tsx
index 63008c0..1e57afb 100644
--- a/components/SearchBar/index.tsx
+++ b/components/SearchBar/index.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { SearchExit, SearchIcon } from '@/assets/SearchBar-Icons/icons';
-import { Project } from '@/types/schema';
 import {
   SearchBarBackgroundStyles,
   SearchBarDiv,
@@ -12,22 +11,12 @@ import {
 } from './styles';
 
 export const SearchBar = ({
-  allProjects,
-  setFilteredProjects,
+  searchTerm,
+  setSearchTerm,
 }: {
-  allProjects: Project[];
-  setFilteredProjects: React.Dispatch<React.SetStateAction<Project[] | []>>;
+  searchTerm: string | null;
+  setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
 }) => {
-  const [searchTerm, setSearchTerm] = useState('');
-
-  useEffect(() => {
-    const filteredProjects =
-      allProjects?.filter(project =>
-        project.project_name.toLowerCase().includes(searchTerm.toLowerCase()),
-      ) ?? null;
-    setFilteredProjects(filteredProjects);
-  }, [allProjects, searchTerm, setFilteredProjects]);
-
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(event.target.value);
   };
@@ -45,11 +34,11 @@ export const SearchBar = ({
             type="text"
             placeholder="Search for a project"
             onChange={handleSearchChange}
-            value={searchTerm}
+            value={searchTerm + ''}
           />
           <SearchExitButton
             onClick={handleExit}
-            $isZero={searchTerm.length === 0}
+            $isZero={searchTerm?.length === 0}
           >
             <SearchExit />
           </SearchExitButton>