diff --git a/app/components/atlas.client.tsx b/app/components/atlas.client.tsx
index 2ce103f..d128122 100644
--- a/app/components/atlas.client.tsx
+++ b/app/components/atlas.client.tsx
@@ -1,7 +1,11 @@
 import { DeckGL } from "@deck.gl/react";
 import { Map } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { useCapitalProjectsLayer, useCommunityDistrictsLayer } from "./layers";
+import {
+  useCapitalProjectsLayer,
+  useCommunityDistrictsLayer,
+  useCityCouncilDistrictsLayer,
+} from "./layers";
 
 const INITIAL_VIEW_STATE = {
   longitude: -74.0008,
@@ -14,12 +18,17 @@ const INITIAL_VIEW_STATE = {
 export function Atlas() {
   const capitalProjectsLayer = useCapitalProjectsLayer();
   const communityDistrictsLayer = useCommunityDistrictsLayer();
+  const cityCouncilDistrictsLayer = useCityCouncilDistrictsLayer();
   return (
     <DeckGL
       initialViewState={INITIAL_VIEW_STATE}
       controller={true}
       style={{ height: "100vh", width: "100vw" }}
-      layers={[capitalProjectsLayer, communityDistrictsLayer]}
+      layers={[
+        capitalProjectsLayer,
+        communityDistrictsLayer,
+        cityCouncilDistrictsLayer,
+      ]}
     >
       <Map
         mapStyle={"https://tiles.planninglabs.nyc/styles/positron/style.json"}
diff --git a/app/components/layers/index.tsx b/app/components/layers/index.tsx
index d1bb4ff..31be71a 100644
--- a/app/components/layers/index.tsx
+++ b/app/components/layers/index.tsx
@@ -1,2 +1,3 @@
 export { useCapitalProjectsLayer } from "./useCapitalProjectsLayer.client";
 export { useCommunityDistrictsLayer } from "./useCommunityDistrictsLayer.client";
+export { useCityCouncilDistrictsLayer } from "./useCityCouncilDistrictsLayer.client";
diff --git a/app/components/layers/useCityCouncilDistrictsLayer.client.tsx b/app/components/layers/useCityCouncilDistrictsLayer.client.tsx
new file mode 100644
index 0000000..aab0bc0
--- /dev/null
+++ b/app/components/layers/useCityCouncilDistrictsLayer.client.tsx
@@ -0,0 +1,37 @@
+import { MVTLayer } from "@deck.gl/geo-layers";
+import { useSearchParams } from "@remix-run/react";
+
+export interface CityCouncilDistrictProperties {
+  layerName: string;
+  id: string;
+}
+export function useCityCouncilDistrictsLayer() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const districtType = searchParams.get("districtType");
+
+  return new MVTLayer<CityCouncilDistrictProperties>({
+    id: "CityCouncilDistricts",
+    data: [
+      `${import.meta.env.VITE_ZONING_API_URL}/api/city-council-districts/{z}/{x}/{y}.pbf`,
+    ],
+    visible: districtType === "ccd",
+    uniqueIdProperty: "boroughIdCityCouncilDistrictId",
+    pickable: true,
+    getPointRadius: 5,
+    filled: false,
+    getLineColor: [113, 128, 150, 255],
+    getLineWidth: 3,
+    lineWidthUnits: "pixels",
+    pointType: "text",
+    getText: ({ properties }: { properties: CityCouncilDistrictProperties }) =>
+      properties.id,
+    getTextColor: [98, 98, 98, 255],
+    textFontFamily: "Helvetica Neue, Arial, sans-serif",
+    getTextSize: 15,
+    textFontSettings: {
+      sdf: true,
+    },
+    textOutlineColor: [255, 255, 255, 255],
+    textOutlineWidth: 2,
+  });
+}