diff --git a/source/_patterns/03-layouts/ofis/_ofis.scss b/source/_patterns/03-layouts/ofis/_ofis.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..302cc38514f2b1fc9d37ef1f209490352380e52e 100644
--- a/source/_patterns/03-layouts/ofis/_ofis.scss
+++ b/source/_patterns/03-layouts/ofis/_ofis.scss
@@ -0,0 +1,9 @@
+.ofis-header {
+  display: flex;
+  gap: 1rem;
+
+  .ofis-picture {
+    max-width: 144px;
+    width: auto;
+  }
+}
diff --git a/source/_patterns/03-layouts/ofis/ofis.twig b/source/_patterns/03-layouts/ofis/ofis.twig
index 05b94aa6fad688a6a616282022174d05d55a40dd..f82a8a1ef865f0cb6b1706d38d4cfd30b4dd2a3f 100644
--- a/source/_patterns/03-layouts/ofis/ofis.twig
+++ b/source/_patterns/03-layouts/ofis/ofis.twig
@@ -8,9 +8,9 @@
     <div class="field field-name-body field-type-text-with-summary field-label-hidden">
       <div class="field-items">
         <div class="field-item even" property="content:encoded">
-          <div class="" style="display: flex; gap: 1rem;">
+          <div class="ofis-header">
             {% if ofis_data.picture %}
-              <div style="width: auto; max-width: 144px;">
+              <div class="ofis-picture">
                 <img alt="{{ ofis_data.name }}" class="image-left" src="{{ ofis_data.picture }}">
               </div>
             {% endif %}
diff --git a/source/_patterns/03-layouts/ofis/ofis.yml b/source/_patterns/03-layouts/ofis/ofis.yml
index aa6037d928a001b7008e3c51e67f39ad34ee8013..ed0778d75a2a028efb7903565d9b54cdac72da32 100644
--- a/source/_patterns/03-layouts/ofis/ofis.yml
+++ b/source/_patterns/03-layouts/ofis/ofis.yml
@@ -1,5 +1,11 @@
 ---
 ofis_data:
+#  Next 5 fields are dynamic, modified by the controller.
+  title: 'Mary Wells'
+  faculty_title: 'Dean, Faculty of Engineering / Professor, Mechanical and Mechatronics Engineering'
+  name: 'Mary Wells'
+  picture: 'https://ofis.uwaterloo.ca/profile/mawells.png'
+  biography: 'Mary Wells, PhD, PEng is currently Dean of the Faculty of Engineering at the University of Waterloo and is the ninth dean since the Faculty was founded in 1957. She was previously Dean of the College of Engineering and Physical Sciences at the University of Guelph (2017 to 2020).</p><p>Prior to her time in Guelph, Wells was a professor of mechanical and mechatronics engineering at Waterloo for 10 years. She received awards for graduate supervision from both the Faculty and the University in 2017.</p><p>An accomplished materials engineer, Wells also served as the Associate Dean of Outreach for Waterloo Engineering between 2008 and 2017, and chaired its Women in Engineering committee for many years. She chaired the Ontario Network of Women in Engineering from 2013 to 2018.</p><p>Wells began her academic career as a professor in materials engineering at the University of British Columbia from 1996 to 2007, and has worked in the steel industry in Canada and internationally.</p><p>The co-author of two books including one on Canadian women innovators and the second on Canadian women in materials, her research focuses on the relationship between processing, structure and properties for advanced metallic alloys used in the transportation sector.</p><p>Wells is not currently accepting applications to supervise new graduate students.'
   personal:
     last_name: 'Wells'
     first_name: 'Marry'
@@ -13,7 +19,7 @@ ofis_data:
     accepting_grad_students: false
     adds_status: false
     offices: 'E7 7324, E5 3047'
-    phones: '519-888-4567 x43347,519-888-4567 x38356'
+    phones: '519-888-4567 x43347, 519-888-4567 x38356'
     fax: ''
     research_interests: ''
     brief_research_interests: ''