diff --git a/src/controllers/psychotherapist.controller.spec.ts b/src/controllers/psychotherapist.controller.spec.ts
index 7ef8e0e..6f3de44 100644
--- a/src/controllers/psychotherapist.controller.spec.ts
+++ b/src/controllers/psychotherapist.controller.spec.ts
@@ -9,8 +9,10 @@ import { PsychotherapistController } from "./psychotherapist.controller";
 Container.set("logger", new MockLogger());
 
 const mockGetPsychotherapists = jest.fn();
+const mockGePsychoTherapistsLocations = jest.fn();
 class MockPsychotherapistService {
   getPsychotherapists = mockGetPsychotherapists;
+  getTherapistsLocations = mockGePsychoTherapistsLocations;
 }
 
 Container.set(PsychotherapistService, new MockPsychotherapistService());
@@ -58,4 +60,30 @@ describe("The Psychotherapist Controller", () => {
       new InternalServerError(`failed to get Psychotherapists`)
     );
   });
+
+  it("should call getTherapistsLocations function", async () => {
+    mockGePsychoTherapistsLocations.mockResolvedValue([
+      "location1",
+      "location2",
+    ]);
+
+    let response = await controller.getTherapistsLocations();
+
+    expect(mockGePsychoTherapistsLocations).toHaveBeenCalledTimes(1);
+
+    expect(response).toEqual(["location1", "location2"]);
+  });
+
+  it("should throw an error if getTherapistsLocations throws an error", async () => {
+    mockGePsychoTherapistsLocations.mockImplementation(() => {
+      throw new Error("Ugly error");
+    });
+
+    const functionToThrow = async () =>
+      await controller.getTherapistsLocations();
+
+    await expect(functionToThrow()).rejects.toThrow(
+      new InternalServerError(`failed to get locations`)
+    );
+  });
 });
diff --git a/src/controllers/psychotherapist.controller.ts b/src/controllers/psychotherapist.controller.ts
index e42ad0f..12acecf 100644
--- a/src/controllers/psychotherapist.controller.ts
+++ b/src/controllers/psychotherapist.controller.ts
@@ -36,4 +36,14 @@ export class PsychotherapistController {
       throw new InternalServerError(`failed to get Psychotherapists`);
     }
   }
+
+  @Get("/locations")
+  async getTherapistsLocations(): Promise<string[]> {
+    try {
+      return this.service.getTherapistsLocations();
+    } catch (exception) {
+      console.error(exception);
+      throw new InternalServerError(`failed to get locations`);
+    }
+  }
 }
diff --git a/src/services/psychotherapist.service.api.ts b/src/services/psychotherapist.service.api.ts
index 738f39e..0e82d40 100644
--- a/src/services/psychotherapist.service.api.ts
+++ b/src/services/psychotherapist.service.api.ts
@@ -2,4 +2,5 @@ import { PsychotherapistResponse } from "src/types/Psychotherapist";
 
 export abstract class PsychotherapistServiceApi {
   abstract getPsychotherapists(): Promise<PsychotherapistResponse>;
+  abstract getTherapistsLocations(): Promise<string[]>;
 }
diff --git a/src/services/psychotherapist.service.spec.ts b/src/services/psychotherapist.service.spec.ts
index 11a9798..0990552 100644
--- a/src/services/psychotherapist.service.spec.ts
+++ b/src/services/psychotherapist.service.spec.ts
@@ -283,6 +283,7 @@ describe("The psychotherapist service", () => {
         price: ["price"],
         legalpersonality: ["legalpersonality"],
         name: ["name"],
+        location: ["location"],
       };
 
       await psychotherapistService.getPsychotherapists(mockFilter);
@@ -333,7 +334,13 @@ describe("The psychotherapist service", () => {
         }
       );
 
-      expect(mockView).toHaveBeenCalledTimes(7);
+      expect(mockView).toHaveBeenCalledWith(
+        "therapistsDesignDoc",
+        "therapistsByLocation",
+        { keys: ["location"], include_docs: true }
+      );
+
+      expect(mockView).toHaveBeenCalledTimes(8);
     });
 
     it("should return empty array if the view has returned no rows matching our filter", async () => {
diff --git a/src/services/psychotherapist.service.ts b/src/services/psychotherapist.service.ts
index 5e723cc..52053ca 100644
--- a/src/services/psychotherapist.service.ts
+++ b/src/services/psychotherapist.service.ts
@@ -78,6 +78,30 @@ export class PsychotherapistService implements PsychotherapistServiceApi {
     }
   }
 
+  async getTherapistsLocations(): Promise<string[]> {
+    try {
+      const response = await this.psychotherapistDb.view(
+        "therapistsDesignDoc",
+        "therapistsByLocation",
+        {
+          include_docs: true,
+        }
+      );
+
+      const locations = response.rows.map((row) => {
+        return row.key;
+      });
+
+      // Use Set to remove duplicates and then convert it back to an array
+      const uniqueLocations = Array.from(new Set(locations));
+
+      return uniqueLocations;
+    } catch (error) {
+      console.log(error);
+      throw new InternalServerError(error.message);
+    }
+  }
+
   async getPsychotherapists(
     filter?: FilterType
   ): Promise<PsychotherapistResponse> {
@@ -121,6 +145,7 @@ export class PsychotherapistService implements PsychotherapistServiceApi {
         patientgroups: "therapistsByPatientGroups",
         price: "therapistsByPrice",
         legalpersonality: "therapistsByLegalPersonality",
+        location: "therapistsByLocation",
       };
 
       const allPsychotherapists = [];
@@ -243,6 +268,23 @@ export class PsychotherapistService implements PsychotherapistServiceApi {
         }
       }
 
+      if (filter.location) {
+        try {
+          let psychotherapists = await getTherapistsFromView(
+            availableViews.location,
+            filter.location,
+            this.psychotherapistDb
+          );
+
+          allPsychotherapists.push(...psychotherapists);
+        } catch (error) {
+          this.logger.error(error);
+          throw new InternalServerError(
+            `getPsychotherapists: Failed to retrieve psychotherapists`
+          );
+        }
+      }
+
       const seen = new Set();
 
       response.psychotherapists = allPsychotherapists.filter((el) => {
diff --git a/src/types/Filter.ts b/src/types/Filter.ts
index f21b068..5808284 100644
--- a/src/types/Filter.ts
+++ b/src/types/Filter.ts
@@ -1,4 +1,5 @@
 export interface FilterType {
+  location?: string[];
   services?: string[];
   appointments?: string[];
   languages?: string[];
@@ -12,4 +13,9 @@ export interface FilterQueryParam {
   languages?: string[] | string;
   patientgroups?: string[] | string;
   name?: string[] | string;
+  location?: string[] | string;
+  services?: string[] | string;
+  appointments?: string[] | string;
+  price?: string[] | string;
+  legalpersonality?: string[] | string;
 }
diff --git a/src/util/filter-util.ts b/src/util/filter-util.ts
index 18e55e2..7356956 100644
--- a/src/util/filter-util.ts
+++ b/src/util/filter-util.ts
@@ -9,6 +9,7 @@ export function sanitizeFilter(unSafeFilter: any): FilterType {
     price: "string",
     legalpersonality: "string",
     name: "string",
+    location: "string",
   };
 
   let cleanFilter: FilterType = {};
diff --git a/web-app/src/constants/directory.js b/web-app/src/constants/directory.js
index 971f458..76dda57 100644
--- a/web-app/src/constants/directory.js
+++ b/web-app/src/constants/directory.js
@@ -211,4 +211,8 @@ export const collapsiblesInitial = {
     label: "Name of mental health professional or organization",
     value: "",
   },
+  location: {
+    label: "Location",
+    selectValue: "",
+  },
 };
diff --git a/web-app/src/pages/directory/components/Sidebar.js b/web-app/src/pages/directory/components/Sidebar.js
index f9f76bc..095ae46 100644
--- a/web-app/src/pages/directory/components/Sidebar.js
+++ b/web-app/src/pages/directory/components/Sidebar.js
@@ -9,7 +9,7 @@ import SearchIcon from "../../../assets/images/Search.svg";
 import Select from "react-select";
 import { useEffect } from "react";
 
-const Sidebar = ({ onFilterChange }) => {
+const Sidebar = ({ onFilterChange, locations }) => {
   const [collapsibles, setCollapsibles] = useState(collapsiblesInitial);
 
   useEffect(() => {
@@ -69,6 +69,40 @@ const Sidebar = ({ onFilterChange }) => {
             </SearchInputContainer>
           </Collapsible>
         );
+      } else if (collapsibles[key].selectValue !== undefined) {
+        return (
+          <Collapsible
+            key={`${key}_${index}`}
+            trigger={collapsibles[key].label}
+          >
+            <Select
+              isSearchable={true}
+              isClearable={true}
+              placeholder="Select location"
+              onChange={(e) => {
+                if (e === null) {
+                  let collapsiblesCopy = { ...collapsibles };
+                  collapsiblesCopy[key].selectValue = "";
+                  setCollapsibles({ ...collapsiblesCopy });
+                  return;
+                }
+                let collapsiblesCopy = { ...collapsibles };
+                collapsiblesCopy[key].selectValue = e.value;
+                setCollapsibles({ ...collapsiblesCopy });
+              }}
+              options={locations.map((location) => {
+                return {
+                  value: location,
+                  label: location
+                    .split("-")
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(" "),
+                };
+              })}
+            />
+            {/* </div> */}
+          </Collapsible>
+        );
       }
       return null;
     });
diff --git a/web-app/src/pages/directory/components/Sidebar.spec.js b/web-app/src/pages/directory/components/Sidebar.spec.js
index 549611d..05a85f1 100644
--- a/web-app/src/pages/directory/components/Sidebar.spec.js
+++ b/web-app/src/pages/directory/components/Sidebar.spec.js
@@ -14,12 +14,14 @@ let getByText, getByLabelText;
 beforeEach(() => {
   jest.clearAllMocks();
 
-  ({ getByText, getByLabelText } = render(<Sidebar />));
+  ({ getByText, getByLabelText } = render(
+    <Sidebar locations={["beirut", "england"]} />
+  ));
 });
 
 describe("the Sidebar component", () => {
   it("should match the snapshot", () => {
-    const { container } = render(<Sidebar />);
+    const { container } = render(<Sidebar locations={["beirut", "england"]} />);
     expect(container).toMatchSnapshot();
   });
 
@@ -99,8 +101,26 @@ describe("the Sidebar component", () => {
     }
   });
 
+  // it("should be able to select location", () => {
+  //   const locationCollapsible = getByText(collapsiblesInitial.location.label);
+
+  //   act(() => {
+  //     fireEvent.click(locationCollapsible);
+  //   });
+
+  //   const locationCheckbox = getByLabelText("Beirut");
+
+  //   act(() => {
+  //     fireEvent.click(locationCheckbox);
+  //   });
+
+  //   expect(locationCheckbox.checked).toBe(true);
+  // });
+
   xit("should be able to click on collapsible to show more options", async () => {
-    const { container, getByText } = render(<Sidebar />);
+    const { container, getByText } = render(
+      <Sidebar locations={["beirut", "england"]} />
+    );
     let clickable = getByText("Are you looking for a centre or individual?");
 
     act(() => {
@@ -114,7 +134,9 @@ describe("the Sidebar component", () => {
   });
 
   xit("should be able to select/deselect option from the list", () => {
-    const { container, getByText, getByTestId } = render(<Sidebar />);
+    const { container, getByText, getByTestId } = render(
+      <Sidebar locations={["beirut", "england"]} />
+    );
     let clickable = getByText("Are you looking for a centre or individual?");
 
     act(() => {
diff --git a/web-app/src/pages/directory/components/__snapshots__/Sidebar.spec.js.snap b/web-app/src/pages/directory/components/__snapshots__/Sidebar.spec.js.snap
index f058e2e..f740f62 100644
--- a/web-app/src/pages/directory/components/__snapshots__/Sidebar.spec.js.snap
+++ b/web-app/src/pages/directory/components/__snapshots__/Sidebar.spec.js.snap
@@ -1520,6 +1520,108 @@ exports[`the Sidebar component should match the snapshot 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="Collapsible"
+        >
+          <span
+            aria-controls="collapsible-content-1482363367071"
+            aria-disabled="false"
+            aria-expanded="false"
+            class="Collapsible__trigger is-closed"
+            id="collapsible-trigger-1482363367071"
+            role="button"
+          >
+            Location
+          </span>
+          <div
+            aria-labelledby="collapsible-trigger-1482363367071"
+            class="Collapsible__contentOuter"
+            id="collapsible-content-1482363367071"
+            role="region"
+            style="height: 0px; transition: height 400ms linear; overflow: hidden;"
+          >
+            <div
+              class="Collapsible__contentInner"
+            >
+              <div
+                class=" css-b62m3t-container"
+              >
+                <span
+                  class="css-1f43avz-a11yText-A11yText"
+                  id="react-select-3-live-region"
+                />
+                <span
+                  aria-atomic="false"
+                  aria-live="polite"
+                  aria-relevant="additions text"
+                  class="css-1f43avz-a11yText-A11yText"
+                />
+                <div
+                  class=" css-1s2u09g-control"
+                >
+                  <div
+                    class=" css-319lph-ValueContainer"
+                  >
+                    <div
+                      class=" css-14el2xx-placeholder"
+                      id="react-select-3-placeholder"
+                    >
+                      Select location
+                    </div>
+                    <div
+                      class=" css-6j8wv5-Input"
+                      data-value=""
+                    >
+                      <input
+                        aria-autocomplete="list"
+                        aria-controls="react-select-3-listbox"
+                        aria-describedby="react-select-3-placeholder"
+                        aria-expanded="false"
+                        aria-haspopup="true"
+                        aria-owns="react-select-3-listbox"
+                        autocapitalize="none"
+                        autocomplete="off"
+                        autocorrect="off"
+                        class=""
+                        id="react-select-3-input"
+                        role="combobox"
+                        spellcheck="false"
+                        style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                        tabindex="0"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class=" css-1hb7zxy-IndicatorsContainer"
+                  >
+                    <span
+                      class=" css-1okebmr-indicatorSeparator"
+                    />
+                    <div
+                      aria-hidden="true"
+                      class=" css-tlfecz-indicatorContainer"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="css-tj5bde-Svg"
+                        focusable="false"
+                        height="20"
+                        viewBox="0 0 20 20"
+                        width="20"
+                      >
+                        <path
+                          d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </form>
     </div>
   </div>
diff --git a/web-app/src/pages/directory/directoryPage.js b/web-app/src/pages/directory/directoryPage.js
index eb16b7e..53f4d4e 100644
--- a/web-app/src/pages/directory/directoryPage.js
+++ b/web-app/src/pages/directory/directoryPage.js
@@ -14,7 +14,10 @@ import PhoneIcon from "../../assets/images/Phone.svg";
 import FreeIcon from "../../assets/images/Free.svg";
 import GlobalIcon from "../../assets/images/Global.svg";
 import VirtualIcon from "../../assets/images/Virtual.svg";
-import { getTherapists } from "../../services/therapists.service";
+import {
+  getTherapists,
+  getTherapistLocations,
+} from "../../services/therapists.service";
 
 const TherapistCard = (props) => {
   return (
@@ -203,6 +206,7 @@ const TherapistCard = (props) => {
 
 const DirectoryPage = () => {
   const [therapists, setTherapists] = useState([]);
+  const [therapistLocations, setTherapistLocations] = useState([]);
 
   const retrieveTherapists = async (filter) => {
     if (filter) {
@@ -215,6 +219,8 @@ const DirectoryPage = () => {
             .map((option) => option.value);
         } else if (filter[filterKey].value) {
           adaptedFilter[filterKey] = [filter[filterKey].value];
+        } else if (filter[filterKey].selectValue) {
+          adaptedFilter[filterKey] = [filter[filterKey].selectValue];
         }
       }
 
@@ -226,8 +232,19 @@ const DirectoryPage = () => {
     }
   };
 
+  const retrieveTherapistLocations = async () => {
+    try {
+      const result = await getTherapistLocations();
+      setTherapistLocations(result);
+    } catch (error) {
+      console.error("Failed to retrieve therapist locations:", error);
+      setTherapistLocations([]);
+    }
+  };
+
   useEffect(() => {
     retrieveTherapists();
+    retrieveTherapistLocations();
   }, []);
 
   const TherapistsList = useCallback(() => {
@@ -268,11 +285,14 @@ const DirectoryPage = () => {
       <StyledPage>
         <Banner />
         <StyledContent>
-          <Sidebar
-            onFilterChange={(filter) => {
-              retrieveTherapists(filter);
-            }}
-          />
+          {therapistLocations.length > 0 && (
+            <Sidebar
+              onFilterChange={(filter) => {
+                retrieveTherapists(filter);
+              }}
+              locations={therapistLocations}
+            />
+          )}
           <StyledMainArea>
             <TherapistsList />
           </StyledMainArea>
diff --git a/web-app/src/pages/directory/directoryPage.spec.js b/web-app/src/pages/directory/directoryPage.spec.js
index 8bc43e4..cae343d 100644
--- a/web-app/src/pages/directory/directoryPage.spec.js
+++ b/web-app/src/pages/directory/directoryPage.spec.js
@@ -36,6 +36,10 @@ jest.mock("./components/Sidebar", () => {
 jest.mock("../../services/therapists.service");
 
 const getTherapistsSpy = jest.spyOn(therapistService, "getTherapists");
+const getTherapistsLocationsSpy = jest.spyOn(
+  therapistService,
+  "getTherapistsLocations"
+);
 
 Date.now = jest.fn(() => 1482363367071);
 
@@ -71,6 +75,8 @@ const mockTherapistsResponse = [
   },
 ];
 
+const mockLocationsResponse = ["beirut", "england"];
+
 afterEach(() => {
   jest.clearAllMocks();
 });
@@ -78,6 +84,7 @@ afterEach(() => {
 describe("the DirectoryPage component", () => {
   fit("should match the snapshot", async () => {
     getTherapistsSpy.mockResolvedValue(mockTherapistsResponse);
+    getTherapistsLocationsSpy.mockResolvedValue(mockLocationsResponse);
     const { container } = render(<DirectoryPage />);
 
     await wait();
@@ -86,6 +93,7 @@ describe("the DirectoryPage component", () => {
 
   fit("should retrieve therapists when filter executes onFilterChange", async () => {
     getTherapistsSpy.mockResolvedValue(mockTherapistsResponse);
+    getTherapistsLocationsSpy.mockResolvedValue(mockLocationsResponse);
     const { getByTestId } = render(<DirectoryPage />);
 
     fireEvent.click(getByTestId("sidebar"));
diff --git a/web-app/src/services/therapists.service.js b/web-app/src/services/therapists.service.js
index e892cad..7d8df86 100644
--- a/web-app/src/services/therapists.service.js
+++ b/web-app/src/services/therapists.service.js
@@ -21,3 +21,17 @@ export async function getTherapists(filter) {
     throw new Error("Failed to fetch therapists");
   }
 }
+
+export async function getTherapistLocations() {
+  try {
+    const response = await axios.get("/api/psychotherapists/locations");
+
+    if (!Array.isArray(response.data)) {
+      throw new Error("Invalid response");
+    }
+
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to fetch therapist locations");
+  }
+}