diff --git a/components/flatEditor.js b/components/flatEditor.js
index 52e9934..5a2ad8b 100644
--- a/components/flatEditor.js
+++ b/components/flatEditor.js
@@ -572,7 +572,7 @@ function FlatEditor({
             }
             if (slice) {
               result = sliceScore(result, slice)
-            }
+            } // FIXME: should slice and sliceIdx be mutually exclusive?
             if (sliceIdx !== undefined) {
               const [colorStart, colorStop] = nthSliceIdxs(result, sliceIdx);
               result = nthScoreSlice(result, sliceIdx);
diff --git a/components/student/create/theoretical.js b/components/student/create/theoretical.js
index 8949eee..242131b 100644
--- a/components/student/create/theoretical.js
+++ b/components/student/create/theoretical.js
@@ -23,11 +23,15 @@ const FlatEditor = dynamic(() => import('../../flatEditor'), {
   ssr: false,
 });
 
-const bucketColors = {tonic:'#E75B5C', subdominant:'#265C5C', dominant:'#4390E2'};
+const bucketColors = {
+  tonic: '#E75B5C',
+  subdominant: '#265C5C',
+  dominant: '#4390E2',
+};
 
 export default function CreativityActivity() {
   const tonicNotes = notes(tonicScoreJSON);
-  
+
   // console.log('got into aural component');
   const dispatch = useDispatch();
   // I think this should show the melody for the current piece, but in the student's transposition
@@ -126,265 +130,239 @@ export default function CreativityActivity() {
   return flatIOScoreForTransposition ? (
     <>
       <FlatEditor score={scoreJSON} giveJSON={setMelodyJson} />
-      <Accordion className="cpr-create" defaultActiveKey="0">
-        <Accordion.Item eventKey="0">
-          <Accordion.Header>Step 1</Accordion.Header>
-          <Accordion.Body>
-            Compose a four-measure melody using only quarter notes and half
-            notes and only the pitches that correspond with the color-coded
-            measures.
-            <div className="row">
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '65241135b67581e78952d1b1',
-                    sharingKey:
-                      '223faaebf63c6ff5c964fb74737554f58d86b99262bc62bac15195b66d3ee566f8ff923f6d094e611a610105b3d9582cea55e183cf60ab8683986fc29d7a1f37',
-                  }}
-                  colors={[bucketColors.tonic]}
-                />
-              </div>
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '6524114afc390c181375fdc8',
-                    sharingKey:
-                      'ea5a2d5bdb5b8c570cb0796add8188d50757c7a06d2636f1b7c088b905aa7716b8a8eaf0a0b12802d8a02852691b0420bff1adef17e7250bbe6f03b442131fda',
-                  }}
-                  colors={[bucketColors.subdominant]}
-                />
-              </div>
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '6524114e605572ddb1c1090f',
-                    sharingKey:
-                      '895d5f93344d05f47252535852e3f9f9ec638b94b3237278508cf6b085671dc56791d83fba37fc1c0285fec49a70a417a461d49f4ec48c520a96a6b076bab21f',
-                  }}
-                  colors={[bucketColors.dominant]}
-                />
-              </div>
-            </div>
-            <FlatEditor
-              edit
-              score={{
-                scoreId: 'blank',
-              }}
-              onSubmit={setJsonWrapper}
-              submittingStatus={mutation.status}
-              onUpdate={(data) => {
-                // console.log('updated composition', data);
-                score1Data = data;
-              }}
-              orig={melodyJson}
-              colors={currentAssignment?.part?.chord_scale_pattern?.map(
-                (color) => bucketColors[color]
-              )}
-              sliceIdx={0}
-            />
-          </Accordion.Body>
-        </Accordion.Item>
-        <Accordion.Item eventKey="1">
-          <Accordion.Header>Step 2</Accordion.Header>
-          <Accordion.Body>
-            Compose a four-measure melody using only quarter notes and half
-            notes and only the pitches that correspond with the color-coded
-            measures.
-            <div className="row">
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '65241135b67581e78952d1b1',
-                    sharingKey:
-                      '223faaebf63c6ff5c964fb74737554f58d86b99262bc62bac15195b66d3ee566f8ff923f6d094e611a610105b3d9582cea55e183cf60ab8683986fc29d7a1f37',
-                  }}
-                  colors={[bucketColors.tonic]}
-                />
-              </div>
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '6524114afc390c181375fdc8',
-                    sharingKey:
-                      'ea5a2d5bdb5b8c570cb0796add8188d50757c7a06d2636f1b7c088b905aa7716b8a8eaf0a0b12802d8a02852691b0420bff1adef17e7250bbe6f03b442131fda',
-                  }}
-                  colors={[bucketColors.subdominant]}
-                />
-              </div>
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '6524114e605572ddb1c1090f',
-                    sharingKey:
-                      '895d5f93344d05f47252535852e3f9f9ec638b94b3237278508cf6b085671dc56791d83fba37fc1c0285fec49a70a417a461d49f4ec48c520a96a6b076bab21f',
-                  }}
-                  colors={[bucketColors.dominant]}
-                />
-              </div>
-            </div>
-            <FlatEditor
-              edit
-              score={{
-                scoreId: 'blank',
-              }}
-              onSubmit={setJsonWrapper}
-              submittingStatus={mutation.status}
-              onUpdate={(data) => {
-                // console.log('updated composition', data);
-                score2Data = data;
-              }}
-              orig={melodyJson}
-              colors={currentAssignment?.part?.chord_scale_pattern?.map(
-                (color) => bucketColors[color]
-              )}
-              sliceIdx={1}
-            />
-          </Accordion.Body>
-        </Accordion.Item>
-        <Accordion.Item eventKey="2">
-          <Accordion.Header>Step 3</Accordion.Header>
-          <Accordion.Body>
-            Compose a four-measure melody using only quarter notes and half
-            notes and only the pitches that correspond with the color-coded
-            measures.
-            <div className="row">
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '65241135b67581e78952d1b1',
-                    sharingKey:
-                      '223faaebf63c6ff5c964fb74737554f58d86b99262bc62bac15195b66d3ee566f8ff923f6d094e611a610105b3d9582cea55e183cf60ab8683986fc29d7a1f37',
-                  }}
-                  colors={[bucketColors.tonic]}
-                />
-              </div>
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '6524114afc390c181375fdc8',
-                    sharingKey:
-                      'ea5a2d5bdb5b8c570cb0796add8188d50757c7a06d2636f1b7c088b905aa7716b8a8eaf0a0b12802d8a02852691b0420bff1adef17e7250bbe6f03b442131fda',
-                  }}
-                  colors={[bucketColors.subdominant]}
-                />
-              </div>
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '6524114e605572ddb1c1090f',
-                    sharingKey:
-                      '895d5f93344d05f47252535852e3f9f9ec638b94b3237278508cf6b085671dc56791d83fba37fc1c0285fec49a70a417a461d49f4ec48c520a96a6b076bab21f',
-                  }}
-                  colors={[bucketColors.dominant]}
-                />
-              </div>
-            </div>
-            <FlatEditor
-              edit
-              score={{
-                scoreId: 'blank',
-              }}
-              onSubmit={setJsonWrapper}
-              submittingStatus={mutation.status}
-              onUpdate={(data) => {
-                // console.log('updated composition', data);
-                score3Data = data;
-              }}
-              orig={melodyJson}
-              colors={currentAssignment?.part?.chord_scale_pattern?.map(
-                (color) => bucketColors[color]
-              )}
-              sliceIdx={2}
-            />
-          </Accordion.Body>
-        </Accordion.Item>
-        <Accordion.Item eventKey="3">
-          <Accordion.Header>Step 4</Accordion.Header>
-          <Accordion.Body>
-            Compose a four-measure melody using only quarter notes and half
-            notes and only the pitches that correspond with the color-coded
-            measures.
-            <div className="row">
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '65241135b67581e78952d1b1',
-                    sharingKey:
-                      '223faaebf63c6ff5c964fb74737554f58d86b99262bc62bac15195b66d3ee566f8ff923f6d094e611a610105b3d9582cea55e183cf60ab8683986fc29d7a1f37',
-                  }}
-                  colors={[bucketColors.tonic]}
-                />
-              </div>
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '6524114afc390c181375fdc8',
-                    sharingKey:
-                      'ea5a2d5bdb5b8c570cb0796add8188d50757c7a06d2636f1b7c088b905aa7716b8a8eaf0a0b12802d8a02852691b0420bff1adef17e7250bbe6f03b442131fda',
-                  }}
-                  colors={[bucketColors.subdominant]}
-                />
-              </div>
-              <div className="col-md-4">
-                <FlatEditor
-                  height={150}
-                  score={{
-                    scoreId: '6524114e605572ddb1c1090f',
-                    sharingKey:
-                      '895d5f93344d05f47252535852e3f9f9ec638b94b3237278508cf6b085671dc56791d83fba37fc1c0285fec49a70a417a461d49f4ec48c520a96a6b076bab21f',
-                  }}
-                  colors={[bucketColors.dominant]}
-                />
-              </div>
-            </div>
-            <FlatEditor
-              edit
-              score={{
-                scoreId: 'blank',
-              }}
-              onSubmit={setJsonWrapper}
-              submittingStatus={mutation.status}
-              onUpdate={(data) => {
-                // console.log('updated composition', data);
-                score4Data = data;
-              }}
-              orig={melodyJson}
-              colors={currentAssignment?.part?.chord_scale_pattern?.map(
-                (color) => bucketColors[color]
-              )}
-              sliceIdx={3}
-            />
-          </Accordion.Body>
-        </Accordion.Item>
-        <Accordion.Item eventKey="4">
-          <Accordion.Header>Step 5 - Combined</Accordion.Header>
-          <Accordion.Body>
-            <FlatEditor
-              edit
-              score={{
-                scoreId: '652420e274458c7c5d131dbc',
-                sharingKey:
-                  'bfba3331ca100567830b5e824103ba64071f753818a513b6660756a4578b1cfd51e8b6478b7e7b86b0277dc45bd7e16707033d42414a64a2b60eb4e508b5f8d6',
-              }}
-            />
-            <Recorder
-              submit={submitCreativity}
-              accompaniment={currentAssignment?.part?.piece?.accompaniment}
-            />
-          </Accordion.Body>
-        </Accordion.Item>
-      </Accordion>
+      <h2>Step 1</h2>
+      Compose a four-measure melody using only quarter notes and half notes and
+      only the pitches that correspond with the color-coded measures.
+      <div className="row">
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '65241135b67581e78952d1b1',
+              sharingKey:
+                '223faaebf63c6ff5c964fb74737554f58d86b99262bc62bac15195b66d3ee566f8ff923f6d094e611a610105b3d9582cea55e183cf60ab8683986fc29d7a1f37',
+            }}
+            colors={[bucketColors.tonic]}
+          />
+        </div>
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '6524114afc390c181375fdc8',
+              sharingKey:
+                'ea5a2d5bdb5b8c570cb0796add8188d50757c7a06d2636f1b7c088b905aa7716b8a8eaf0a0b12802d8a02852691b0420bff1adef17e7250bbe6f03b442131fda',
+            }}
+            colors={[bucketColors.subdominant]}
+          />
+        </div>
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '6524114e605572ddb1c1090f',
+              sharingKey:
+                '895d5f93344d05f47252535852e3f9f9ec638b94b3237278508cf6b085671dc56791d83fba37fc1c0285fec49a70a417a461d49f4ec48c520a96a6b076bab21f',
+            }}
+            colors={[bucketColors.dominant]}
+          />
+        </div>
+      </div>
+      <FlatEditor
+        edit
+        score={{
+          scoreId: 'blank',
+        }}
+        onSubmit={setJsonWrapper}
+        submittingStatus={mutation.status}
+        onUpdate={(data) => {
+          // console.log('updated composition', data);
+          score1Data = data;
+        }}
+        orig={melodyJson}
+        colors={currentAssignment?.part?.chord_scale_pattern?.map(
+          (color) => bucketColors[color]
+        )}
+        sliceIdx={0}
+      />
+      <h2>Step 2</h2>
+      Compose a four-measure melody using only quarter notes and half notes and
+      only the pitches that correspond with the color-coded measures.
+      <div className="row">
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '65241135b67581e78952d1b1',
+              sharingKey:
+                '223faaebf63c6ff5c964fb74737554f58d86b99262bc62bac15195b66d3ee566f8ff923f6d094e611a610105b3d9582cea55e183cf60ab8683986fc29d7a1f37',
+            }}
+            colors={[bucketColors.tonic]}
+          />
+        </div>
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '6524114afc390c181375fdc8',
+              sharingKey:
+                'ea5a2d5bdb5b8c570cb0796add8188d50757c7a06d2636f1b7c088b905aa7716b8a8eaf0a0b12802d8a02852691b0420bff1adef17e7250bbe6f03b442131fda',
+            }}
+            colors={[bucketColors.subdominant]}
+          />
+        </div>
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '6524114e605572ddb1c1090f',
+              sharingKey:
+                '895d5f93344d05f47252535852e3f9f9ec638b94b3237278508cf6b085671dc56791d83fba37fc1c0285fec49a70a417a461d49f4ec48c520a96a6b076bab21f',
+            }}
+            colors={[bucketColors.dominant]}
+          />
+        </div>
+      </div>
+      <FlatEditor
+        edit
+        score={{
+          scoreId: 'blank',
+        }}
+        onSubmit={setJsonWrapper}
+        submittingStatus={mutation.status}
+        onUpdate={(data) => {
+          // console.log('updated composition', data);
+          score2Data = data;
+        }}
+        orig={melodyJson}
+        colors={currentAssignment?.part?.chord_scale_pattern?.map(
+          (color) => bucketColors[color]
+        )}
+        sliceIdx={0}
+      />
+      <h2>Step 3</h2>
+      Compose a four-measure melody using only quarter notes and half notes and
+      only the pitches that correspond with the color-coded measures.
+      <div className="row">
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '65241135b67581e78952d1b1',
+              sharingKey:
+                '223faaebf63c6ff5c964fb74737554f58d86b99262bc62bac15195b66d3ee566f8ff923f6d094e611a610105b3d9582cea55e183cf60ab8683986fc29d7a1f37',
+            }}
+            colors={[bucketColors.tonic]}
+          />
+        </div>
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '6524114afc390c181375fdc8',
+              sharingKey:
+                'ea5a2d5bdb5b8c570cb0796add8188d50757c7a06d2636f1b7c088b905aa7716b8a8eaf0a0b12802d8a02852691b0420bff1adef17e7250bbe6f03b442131fda',
+            }}
+            colors={[bucketColors.subdominant]}
+          />
+        </div>
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '6524114e605572ddb1c1090f',
+              sharingKey:
+                '895d5f93344d05f47252535852e3f9f9ec638b94b3237278508cf6b085671dc56791d83fba37fc1c0285fec49a70a417a461d49f4ec48c520a96a6b076bab21f',
+            }}
+            colors={[bucketColors.dominant]}
+          />
+        </div>
+      </div>
+      <FlatEditor
+        edit
+        score={{
+          scoreId: 'blank',
+        }}
+        onSubmit={setJsonWrapper}
+        submittingStatus={mutation.status}
+        onUpdate={(data) => {
+          // console.log('updated composition', data);
+          score3Data = data;
+        }}
+        orig={melodyJson}
+        colors={currentAssignment?.part?.chord_scale_pattern?.map(
+          (color) => bucketColors[color]
+        )}
+        sliceIdx={2}
+      />
+      <h2>Step 4</h2>
+      Compose a four-measure melody using only quarter notes and half notes and
+      only the pitches that correspond with the color-coded measures.
+      <div className="row">
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '65241135b67581e78952d1b1',
+              sharingKey:
+                '223faaebf63c6ff5c964fb74737554f58d86b99262bc62bac15195b66d3ee566f8ff923f6d094e611a610105b3d9582cea55e183cf60ab8683986fc29d7a1f37',
+            }}
+            colors={[bucketColors.tonic]}
+          />
+        </div>
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '6524114afc390c181375fdc8',
+              sharingKey:
+                'ea5a2d5bdb5b8c570cb0796add8188d50757c7a06d2636f1b7c088b905aa7716b8a8eaf0a0b12802d8a02852691b0420bff1adef17e7250bbe6f03b442131fda',
+            }}
+            colors={[bucketColors.subdominant]}
+          />
+        </div>
+        <div className="col-md-4">
+          <FlatEditor
+            height={150}
+            score={{
+              scoreId: '6524114e605572ddb1c1090f',
+              sharingKey:
+                '895d5f93344d05f47252535852e3f9f9ec638b94b3237278508cf6b085671dc56791d83fba37fc1c0285fec49a70a417a461d49f4ec48c520a96a6b076bab21f',
+            }}
+            colors={[bucketColors.dominant]}
+          />
+        </div>
+      </div>
+      <FlatEditor
+        edit
+        score={{
+          scoreId: 'blank',
+        }}
+        onSubmit={setJsonWrapper}
+        submittingStatus={mutation.status}
+        onUpdate={(data) => {
+          // console.log('updated composition', data);
+          score4Data = data;
+        }}
+        orig={melodyJson}
+        colors={currentAssignment?.part?.chord_scale_pattern?.map(
+          (color) => bucketColors[color]
+        )}
+        sliceIdx={3}
+      />
+      <h2>Step 5 - Combined</h2>
+      <FlatEditor
+        edit
+        score={{
+          scoreId: '652420e274458c7c5d131dbc',
+          sharingKey:
+            'bfba3331ca100567830b5e824103ba64071f753818a513b6660756a4578b1cfd51e8b6478b7e7b86b0277dc45bd7e16707033d42414a64a2b60eb4e508b5f8d6',
+        }}
+      />
+      <Recorder
+        submit={submitCreativity}
+        accompaniment={currentAssignment?.part?.piece?.accompaniment}
+      />
     </>
   ) : (
     <Spinner