diff --git a/client/src/components/resources/ResourcesList.js b/client/src/components/resources/ResourcesList.js
index f4cba41..80d1e52 100644
--- a/client/src/components/resources/ResourcesList.js
+++ b/client/src/components/resources/ResourcesList.js
@@ -1,10 +1,11 @@
 import React, {useState, useEffect} from "react";
 import { useNavigate } from "react-router-dom";
 import { AuthService, ResourceService } from "../../services";
-import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
+import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Dropdown } from "react-bootstrap";
 import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
 import ReactPaginate from 'react-paginate';
 import { ManageTable, Export } from "../../shared/components";
+import { RESOURCE_TYPE_OPTIONS, RESOURCE_SPECIALTY_OPTIONS } from "../../shared";
 
 const ResourcesList = () => {
   const navigate = useNavigate();
@@ -20,6 +21,9 @@ const ResourcesList = () => {
 	const [itemsPerPage, setItemsPerPage] = useState(10);
   const [showDeletedItems, setShowDeletedItems] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
+  const [showFilterDropdown, setShowFilterDropdown] = useState(false);
+  const [typeFilter, setTypeFilter] = useState('');
+  const [specialtyFilter, setSpecialtyFilter] = useState('');
   const [columns, setColumns] = useState([
     {
       key: 'name',
@@ -68,10 +72,16 @@ const ResourcesList = () => {
     }) 
   }, []);
 
+  const getFilteredResources = () => {
+    return (showDeletedItems ? resources.filter(item => item.status !== 'active') : resources.filter(item => item.status === 'active'))
+      ?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) )))
+      ?.filter(resource => !typeFilter || (resource?.type || '') === typeFilter)
+      ?.filter(resource => !specialtyFilter || (resource?.specialty || '') === specialtyFilter);
+  };
+
   useEffect(() => {
 		const endOffset = itemOffset + parseInt(itemsPerPage);
-    const newResources = (showDeletedItems ? resources.filter(item => item.status !== 'active') : resources.filter(item => item.status === 'active'))?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) )));
-    //const newResources = (.slice(itemOffset, endOffset);
+    const newResources = getFilteredResources();
     const sortedResources = sorting.key === '' ? newResources : newResources.sort((a, b) => {
       return a[sorting.key]?.localeCompare(b[sorting.key]);
     });
@@ -89,8 +99,8 @@ const ResourcesList = () => {
         display_address
       });
     }));
-		setPageCount(Math.ceil(((showDeletedItems ? resources : resources.filter(item => item.status === 'active') )?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) )))).length / itemsPerPage));
-	}, [resources, itemOffset, keyword, itemsPerPage, showDeletedItems, sorting]);
+		setPageCount(Math.ceil((newResources.length || 0) / itemsPerPage));
+	}, [resources, itemOffset, keyword, itemsPerPage, showDeletedItems, sorting, typeFilter, specialtyFilter]);
 
   // useEffect(() => {
   //   const newResources = currentItems? [...currentItems] : [];
@@ -102,7 +112,8 @@ const ResourcesList = () => {
   // }, [sorting]);
 
 	const handlePageClick = (event) => {
-		const newOffset = (event.selected * itemsPerPage) % (showDeletedItems ? resources : resources.filter(item => item.status === 'active') )?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) ))).length;
+		const filteredLength = getFilteredResources().length || 1;
+		const newOffset = (event.selected * itemsPerPage) % filteredLength;
 		console.log(
 			`User requested page number ${event.selected}, which is offset ${newOffset}`
 		);
@@ -111,7 +122,8 @@ const ResourcesList = () => {
 	};
 
   const handlePageSelect = (pageNo) => {
-		const newOffset = ((pageNo-1) * itemsPerPage) % (showDeletedItems ? resources : resources.filter(item => item.status === 'active') )?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) ))).length;
+		const filteredLength = getFilteredResources().length || 1;
+		const newOffset = ((pageNo-1) * itemsPerPage) % filteredLength;
 		console.log(
 			`User requested page number ${pageNo}, which is offset ${newOffset}`
 		);
@@ -174,10 +186,61 @@ const ResourcesList = () => {
 		setShowDeletedItems(value === 'archivedProviders');
 		// Recover all filters
 		setKeyword('');
+    setTypeFilter('');
+    setSpecialtyFilter('');
 		setSorting({key: '', order: ''});
 		setSelectedItems([]);
 	}
 
+  const clearAndCloseFilter = () => {
+    setTypeFilter('');
+    setSpecialtyFilter('');
+    setShowFilterDropdown(false);
+  };
+
+  const applyAndCloseFilter = () => {
+    setShowFilterDropdown(false);
+  };
+
+  const customFilterMenu = React.forwardRef(
+    ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => (
+      <div
+        ref={ref}
+        style={style}
+        className={className}
+        aria-labelledby={labeledBy}
+      >
+        <h6>Filter By</h6>
+        <div className="app-main-content-fields-section margin-sm dropdown-container">
+          <div className="me-4">
+            <div className="field-label">Type</div>
+            <select value={typeFilter} onChange={(e) => setTypeFilter(e.currentTarget.value)}>
+              <option value="">All</option>
+              {RESOURCE_TYPE_OPTIONS.map((item) => (
+                <option key={item.value} value={item.value}>{item.label}</option>
+              ))}
+            </select>
+          </div>
+          <div className="me-4">
+            <div className="field-label">Specialty</div>
+            <select value={specialtyFilter} onChange={(e) => setSpecialtyFilter(e.currentTarget.value)}>
+              <option value="">All</option>
+              {RESOURCE_SPECIALTY_OPTIONS.map((item) => (
+                <option key={item.value} value={item.value}>{item.label}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="list row">
+          <div className="col-md-12">
+            <button className="btn btn-default btn-sm float-right" onClick={clearAndCloseFilter}> Cancel </button>
+            <button className="btn btn-primary btn-sm float-right" onClick={applyAndCloseFilter}> Filter </button>
+          </div>
+        </div>
+      </div>
+    )
+  );
+
   const checkSelectAll = () => {
     return selectedItems?.length === currentItems?.length && selectedItems?.length > 0;
   }
@@ -290,8 +353,20 @@ const ResourcesList = () => {
 					</Tabs>
 					<div className="list-func-panel">
 						<input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword}  onChange={(e) => setKeyword(e.currentTarget.value)} />
-						{/* <button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button> */}
 						<ManageTable columns={columns} onColumnsChange={setColumns} />
+            <Dropdown
+              key={'filter-providers'}
+              id="filter-providers"
+              className="me-2"
+              show={showFilterDropdown}
+              onToggle={(isOpen) => setShowFilterDropdown(isOpen)}
+              autoClose={false}
+            >
+              <Dropdown.Toggle variant="primary">
+                <Filter size={16} className="me-2"></Filter>Filter
+              </Dropdown.Toggle>
+              <Dropdown.Menu as={customFilterMenu}/>
+            </Dropdown>
 						<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Providers</button>
 						<Export 
 							columns={columns} 
diff --git a/client/src/components/trans-routes/CreateRoute.js b/client/src/components/trans-routes/CreateRoute.js
index f3cb299..d719522 100644
--- a/client/src/components/trans-routes/CreateRoute.js
+++ b/client/src/components/trans-routes/CreateRoute.js
@@ -204,7 +204,7 @@ const CreateRoute = () => {
     <>
       <div className="list row mb-4">
         <Breadcrumb>
-          <Breadcrumb.Item href="/">Transportation</Breadcrumb.Item>
+          <Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
           <Breadcrumb.Item href="/trans-routes/dashboard">
             Transportation Routes
           </Breadcrumb.Item>
diff --git a/client/src/components/trans-routes/RouteEdit.js b/client/src/components/trans-routes/RouteEdit.js
index e375f09..230d044 100644
--- a/client/src/components/trans-routes/RouteEdit.js
+++ b/client/src/components/trans-routes/RouteEdit.js
@@ -398,7 +398,7 @@ const RouteEdit = () => {
     <>
       <div className="list row mb-4">
         <Breadcrumb>
-          <Breadcrumb.Item href="/">Transportation</Breadcrumb.Item>
+          <Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
           <Breadcrumb.Item href="/trans-routes/dashboard">
             Transportation Routes
           </Breadcrumb.Item>
diff --git a/client/src/components/trans-routes/RouteView.js b/client/src/components/trans-routes/RouteView.js
index 93d6fbc..f0495d8 100644
--- a/client/src/components/trans-routes/RouteView.js
+++ b/client/src/components/trans-routes/RouteView.js
@@ -162,7 +162,7 @@ const RouteView = () => {
     <>
       <div className="list row mb-4">
         <Breadcrumb>
-          <Breadcrumb.Item href="/">Transportation</Breadcrumb.Item>
+          <Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
           <Breadcrumb.Item href="/trans-routes/dashboard">
             Transportation Routes
           </Breadcrumb.Item>
diff --git a/client/src/components/trans-routes/RoutesDashboard.js b/client/src/components/trans-routes/RoutesDashboard.js
index a4f89c6..5489179 100644
--- a/client/src/components/trans-routes/RoutesDashboard.js
+++ b/client/src/components/trans-routes/RoutesDashboard.js
@@ -1327,7 +1327,7 @@ const RoutesDashboard = () => {
       </div>}
        <div className="list row mb-4">
         <Breadcrumb>
-          <Breadcrumb.Item href="/">Transportation</Breadcrumb.Item>
+          <Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
           <Breadcrumb.Item active>
             Transportation Routes
           </Breadcrumb.Item>