diff --git a/src/_data/services.yml b/src/_data/services.yml
new file mode 100644
index 00000000..b8ff9761
--- /dev/null
+++ b/src/_data/services.yml
@@ -0,0 +1,19 @@
+- name: Software development
+  id: software-development
+  description: Agile web application development and support with data publishing needs and tools for data analysts.
+
+- name: Human-centered design
+  id: human-centered-design
+  description: User-centered design that incorporates accessibility requirements and multiple language support.
+
+- name: Data Standards development
+  id: data-standards-development
+  description: Collaborate with agencies and stakeholders to create equity and transparency through developing standards.
+
+- name: Project management
+  id: project-management
+  description: Ensure timely and efficient delivery of project goals and objectives.
+
+- name: Program development
+  id: program-development
+  description: Build teams and services from the ground up within the government.
diff --git a/src/assets/illustrations/sign.svg b/src/assets/illustrations/sign.svg
new file mode 100644
index 00000000..999cb9db
--- /dev/null
+++ b/src/assets/illustrations/sign.svg
@@ -0,0 +1,3 @@
+<svg width="71" height="136" viewBox="0 0 71 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.2941 64.1314C52.032 64.1314 65.5882 50.6636 65.5882 34.0657C65.5882 17.4678 52.032 4 35.2941 4C18.5562 4 5 17.4678 5 34.0657C5 50.6636 18.5562 64.1314 35.2941 64.1314ZM37.25 65.0717C53.6222 64.0694 66.5882 50.5707 66.5882 34.0657C66.5882 16.9086 52.5774 3 35.2941 3C18.0109 3 4 16.9086 4 34.0657C4 50.5707 16.9661 64.0695 33.3383 65.0717V65.1602V135V136H34.3383H36.25H37.25V135V65.1602V65.0717ZM35.2941 60.2478C49.8716 60.2478 61.6764 48.5186 61.6764 34.0653C61.6764 19.612 49.8716 7.88281 35.2941 7.88281C20.7166 7.88281 8.91174 19.612 8.91174 34.0653C8.91174 48.5186 20.7166 60.2478 35.2941 60.2478ZM35.2941 61.2478C50.417 61.2478 62.6764 49.0778 62.6764 34.0653C62.6764 19.0528 50.417 6.88281 35.2941 6.88281C20.1712 6.88281 7.91174 19.0528 7.91174 34.0653C7.91174 49.0778 20.1712 61.2478 35.2941 61.2478ZM34.3383 65.1602H36.25V135H34.3383V65.1602ZM37.0283 38.6536V21.6309H34.1008V38.6536H37.0283ZM38.0283 21.6309V20.6309H37.0283H34.1008H33.1008V21.6309V38.6536V38.9751H30.1118L35.5646 48.3506L41.0173 38.9751H38.0283V38.6536V21.6309Z" fill="black"/>
+</svg>
diff --git a/src/our-work.html b/src/our-work.html
index c95337a7..b1c81862 100644
--- a/src/our-work.html
+++ b/src/our-work.html
@@ -16,7 +16,47 @@
   <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
   <hr class="border border-100 border-dark border-half opacity-100 mb-1" />
 
-  <!-- What We Do -->
+  <div class="container my-5 py-md-5 py-4">
+    <div class="offset-lg-1 col-lg-10 mb-md-4">
+      <span class="text-dark pill border-0 ps-0 pb-md-5 mb-md-3 pb-4 mb-3 d-inline-block">What we do</span>
+      <h2 class="text-dark mb-4">Our services</h2>
+
+      <div class="row pb-5 mb-5">
+        <div class="accordion" id="our-services-accordion">
+          {% for service in site.data.services %}
+          <div class="accordion-item">
+            <h2 class="accordion-header" id="our-services-{{ service.id }}">
+              <button
+                class="accordion-button fw-boldest collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#collapse-{{ service.id  }}"
+                aria-expanded="false"
+                aria-controls="collapse-{{ service.id }}"
+              >
+                {{ service.name }}
+              </button>
+            </h2>
+            <div
+              id="collapse-{{ service.id }}"
+              class="accordion-collapse collapse"
+              aria-labelledby="our-services-{{ service.id }}"
+              data-bs-parent="#our-services-accordion"
+            >
+              <div class="accordion-body">{{ service.description }}</div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="position-relative">
+    <span class="sign">
+      <img alt="" src="/assets/illustrations/sign.svg" />
+    </span>
+  </div>
 
   <hr class="border border-100 border-black border-half opacity-100 mb-1" />
   <hr class="border border-100 border-black border-half opacity-100 mb-1" />
diff --git a/src/styles/base.css b/src/styles/base.css
index 7c585139..1f060417 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -7,6 +7,7 @@
     --brand-primary-green: #88B440;
     --brand-primary-black: #1C1C1C;
     --brand-primary-cyan: #51B1C7;
+    --brand-scale-gray-2: #BBBBBB;
     --brand-scale-gray-3: #878787;
     --brand-scale-gray-4: #545454;
     --brand-scale-green-1: #E7F0D9;
@@ -219,6 +220,26 @@ blockquote p {
 
 /*#endregion */
 
+/* Accordions */
+
+.accordion {
+    --bs-accordion-active-bg: var(--brand-scale-green-1);
+    --bs-accordion-border-color: var(--brand-scale-gray-2);
+    --bs-accordion-active-color: var(--text-black);
+
+    /* override the fill color */
+    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c1c1c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
+}
+
+.accordion-button {
+    --bs-accordion-btn-focus-border-color: var(--brand-primary-green);
+    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(136, 180, 64, 1);
+}
+
+.accordion-item, .accordion-button {
+    border-radius: 0 !important;
+}
+
 /* Buttons */
 
 :root {
@@ -666,3 +687,11 @@ header {
     padding: 0.75rem;
     display: table-cell;
 }
+
+/* Our Work */
+
+.sign {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}