1 files changed, 32 insertions, 26 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
index 1825732..f4162ba 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
@@ -14,40 +14,46 @@ class ViewerSectionsNav extends Component {
     return (
       <div className="viewer-nav sections-nav">
         <div className='nav-row'>
-          <div>
-            <div className="share-link link">
-              <ViewerSectionsShare />
-              <span onClick={() => actions.viewer.showNavComponent('share')}>
-                <Arrow type={'up'} />
-                {'Share'}
-              </span>
-            </div>
-            <div className="subscribe-link link">
-              <ViewerSectionsSubscribe />
-              <span onClick={() => actions.viewer.showNavComponent('subscribe')}>
-                <Arrow type={viewer.subscribe ? 'down' : 'up'} />
-                {'Subscribe'}
-              </span>
-            </div>
-          </div>
+
           <div className="checklist-element" onClick={() => actions.viewer.toggleNavComponent('checklist')}>
             <div className="checklist-link link">
               <Arrow type={viewer.checklist ? 'down': 'up'} />
               {'Checklist'}
             </div>
           </div>
-          <div className='footnotes-element'>
-            <div className="footnotes-link link">
-              <span onClick={() => actions.viewer.showNavComponent('footnotes')}>
-                <Arrow type={viewer.footnotes ? 'down' : 'up'} />
-                {'Notes'}
-              </span>
-            </div>
-            <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}>
-              {'Transcript'}
+
+          <div className="credits-element" onClick={() => actions.viewer.toggleNavComponent('credits')}>
+            <div className="credits-link link">
+              <Arrow type={viewer.credits ? 'down': 'up'} />
+              {'Credits'}
             </div>
-            <ViewerSectionsFootnotes />
           </div>
+
+          <div className="subscribe-link link">
+            <ViewerSectionsSubscribe />
+            <span onClick={() => actions.viewer.showNavComponent('subscribe')}>
+              <Arrow type={viewer.subscribe ? 'down' : 'up'} />
+              {'Subscribe'}
+            </span>
+          </div>
+          <div className="share-link link">
+            <ViewerSectionsShare />
+            <span onClick={() => actions.viewer.showNavComponent('share')}>
+              <Arrow type={'up'} />
+              {'Share'}
+            </span>
+          </div>
+          <div className="footnotes-link link">
+            <span onClick={() => actions.viewer.showNavComponent('footnotes')}>
+              <Arrow type={viewer.footnotes ? 'down' : 'up'} />
+              {'Notes'}
+            </span>
+          </div>
+          <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}>
+            {'Transcript'}
+          </div>
+          <ViewerSectionsFootnotes />
+
         </div>
       </div>
     )