diff --git a/client/components/Cohorts/Cohort.css b/client/components/Cohorts/Cohort.css
index c65200013..d992e12df 100644
--- a/client/components/Cohorts/Cohort.css
+++ b/client/components/Cohorts/Cohort.css
@@ -1,37 +1,37 @@
-.cohort__scrolling-tbody {
+.c__scrolling-tbody {
     display: block;
     height: 231px;
     min-height: 143px;
     overflow: auto;
 }
 
-.cohort__table-container {
+.c__table-container {
     margin-bottom: 1rem;
 }
 
 @media only screen and (max-width: 767px) {
-    .ui.container.cohort__table-container {
+    .ui.container.c__table-container {
         width: auto !important;
         margin-left: 0em !important;
         margin-right: 0em !important;
     }
 }
 
-.cohort__table-thead-tbody-tr {
+.c__table-thead-tbody-tr {
     display: table;
     width: 100%;
     table-layout: fixed;
 }
 
-.cohort__button--transparent {
+.c__button--transparent {
     background: none !important;
 }
 
-.cohort__button-group--transparent {
+.c__button-group--transparent {
     background: none !important;
 }
 
-.cohort__button--spacing {
+.c__button--spacing {
     padding-top: 0rem !important;
     padding-right: 0.5rem !important;
     padding-bottom: 0rem !important;
@@ -43,50 +43,53 @@
     padding: 0.428571em 1.14285714em !important;
 }
 
-.cohort__table--constraints {
+.c__table--constraints {
     width: 100%;
     white-space: nowrap;
     table-layout: fixed;
 }
 
-.cohort__table-cell-first {
+.c__table-cell-first {
     width: 40px;
     text-overflow: unset !important;
 }
 
-.cohort__table-cell-options {
+.c__table-cell-options {
     width: 15rem !important;
 }
 
-.cohort__table-cell-content {
+.c__table-cell-content {
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 @media only screen and (max-width: 767px) {
-    .cohort__table-cell-content {
-        display: none !important;
-    }
+  .c__table-cell-content {
+    display: none !important;
+  }
+  .c__hidden-on-mobile {
+    display: none !important;
+  }
 }
 
-.cohort__table--search {
+.c__table--search {
     margin-left: 0.5rem !important;
 }
 
-.cohort__table-cell--title-button {
+.c__table-cell--title-button {
     background: none;
 }
 
-.cohort__tab-menu--overflow {
+.c__tab-menu--overflow {
     overflow-x: auto;
     overflow-y: hidden;
 }
-.cohort__tab-menu--overflow::-webkit-scrollbar {
+.c__tab-menu--overflow::-webkit-scrollbar {
     height: 2px !important;
 }
 
 
-.cohort__tab-menu--button-transparent {
+.c__tab-menu--button-transparent {
     background-color: none !important;
     margin: -2.5em 0 !important;
 }
diff --git a/client/components/Cohorts/Cohort.jsx b/client/components/Cohorts/Cohort.jsx
index f706177ff..427ae6ba9 100644
--- a/client/components/Cohorts/Cohort.jsx
+++ b/client/components/Cohorts/Cohort.jsx
@@ -176,7 +176,7 @@ export class Cohort extends React.Component {
 
     return (
       <div>
-        <Menu attached="top" tabular className="cohort__tab-menu--overflow">
+        <Menu attached="top" tabular className="c__tab-menu--overflow">
           <Menu.Item
             active={activeTabKey === 'cohort'}
             content={name}
diff --git a/client/components/Cohorts/CohortParticipants.jsx b/client/components/Cohorts/CohortParticipants.jsx
index 91aad85c7..35d94b959 100644
--- a/client/components/Cohorts/CohortParticipants.jsx
+++ b/client/components/Cohorts/CohortParticipants.jsx
@@ -30,6 +30,7 @@ import './Cohort.css';
 
 const { facilitator, researcher } = COHORT_ROLE_GROUPS;
 
+const MOBILE_WIDTH = 767;
 const ROWS_PER_PAGE = 10;
 
 export class CohortParticipants extends React.Component {
@@ -203,6 +204,8 @@ export class CohortParticipants extends React.Component {
       scrollIntoView
     } = this;
 
+    const IS_ON_MOBILE = window.innerWidth <= MOBILE_WIDTH;
+
     // Ensure that Facilitator access is applied even if the user just
     // became a facilitator and their session roles haven't updated.
     const isFacilitator =
@@ -226,15 +229,15 @@ export class CohortParticipants extends React.Component {
     const users = cohort.users.slice(index, index + ROWS_PER_PAGE);
     const columns = {
       data: {
-        className: 'cohort__table-cell-first',
+        className: 'c__table-cell-first c__hidden-on-mobile',
         content: ''
       },
       username: {
         className: 'users__col-large',
-        content: 'Username'
+        content: 'User'
       },
       email: {
-        className: 'users__col-large',
+        className: 'users__col-large c__hidden-on-mobile',
         content: 'Email'
       }
     };
@@ -262,7 +265,7 @@ export class CohortParticipants extends React.Component {
       };
       const trigger = (
         <Table.Cell.Clickable
-          className="cohort__table-cell-first"
+          className="c__table-cell-first c__hidden-on-mobile"
           key={`clickabletablecell-${cohortUser.id}`}
           content={<Icon name="file alternate outline" />}
           onClick={onClickAddTab}
@@ -282,17 +285,27 @@ export class CohortParticipants extends React.Component {
         </ConfirmAuth>
       );
 
+      const key = hash(cohortUser);
       const { is_super } = (usersById && usersById[cohortUser.id]) || {};
 
       const username = <Username {...cohortUser} is_super={is_super} />;
 
       const usernameCell = cohortUser.roles.includes('owner') ? (
-        <Table.Cell key={hash(cohortUser)}>{username} (owner)</Table.Cell>
+        <Table.Cell key={key}>{username} (owner)</Table.Cell>
       ) : (
-        <Table.Cell key={hash(cohortUser)}>{username}</Table.Cell>
+        <Table.Cell key={key}>{username}</Table.Cell>
       );
 
-      accum[cohortUser.id] = [popup, usernameCell, cohortUser.email || ''];
+      accum[cohortUser.id] = [
+        <Table.Cell className="c__hidden-on-mobile" key={`popup-${key}`}>
+          {popup}
+        </Table.Cell>,
+        usernameCell,
+        <Table.Cell className="c__hidden-on-mobile" key={`email-${key}`}>
+          {cohortUser.email}
+        </Table.Cell>
+      ];
+
       return accum;
     }, {});
 
@@ -317,17 +330,19 @@ export class CohortParticipants extends React.Component {
         </Icon.Group>
         Participants ({this.props.cohort.users.length})
       </Menu.Item>,
-      <Menu.Item
-        key="menu-item-cohort-participants"
-        name="Control participant list refresh"
-        onClick={onParticipantRefreshChange}
-      >
-        <Icon.Group className="em__icon-group-margin">
-          <Icon name="refresh" />
-          <Icon corner="top right" name={refreshIcon} color={refreshColor} />
-        </Icon.Group>
-        {refreshLabel}
-      </Menu.Item>
+      !IS_ON_MOBILE ? (
+        <Menu.Item
+          key="menu-item-cohort-participants"
+          name="Control participant list refresh"
+          onClick={onParticipantRefreshChange}
+        >
+          <Icon.Group className="em__icon-group-margin">
+            <Icon name="refresh" />
+            <Icon corner="top right" name={refreshIcon} color={refreshColor} />
+          </Icon.Group>
+          {refreshLabel}
+        </Menu.Item>
+      ) : null
     ];
 
     const right = [
@@ -357,7 +372,7 @@ export class CohortParticipants extends React.Component {
       </Ref>
     );
     return (
-      <Container fluid className="cohort__table-container">
+      <Container fluid className="c__table-container">
         {editorMenu}
         <UsersTable {...usersTableProps} />
       </Container>
diff --git a/client/components/Cohorts/CohortScenarios.jsx b/client/components/Cohorts/CohortScenarios.jsx
index a9216c84a..6fad12665 100644
--- a/client/components/Cohorts/CohortScenarios.jsx
+++ b/client/components/Cohorts/CohortScenarios.jsx
@@ -230,7 +230,7 @@ export class CohortScenarios extends React.Component {
     );
 
     return (
-      <Container fluid className="cohort__table-container">
+      <Container fluid className="c__table-container">
         {editorMenu}
         <Table
           fixed
@@ -238,30 +238,30 @@ export class CohortScenarios extends React.Component {
           selectable
           role="grid"
           aria-labelledby="header"
-          className="cohort__table--constraints"
+          className="c__table--constraints"
           unstackable
         >
-          <Table.Header className="cohort__table-thead-tbody-tr">
+          <Table.Header className="c__table-thead-tbody-tr">
             <Table.Row>
               <ConfirmAuth
-                isAuthorized={isFacilitator}
                 requiredPermission="edit_scenarios_in_cohort"
+                isAuthorized={isFacilitator}
               >
-                <Table.HeaderCell className="cohort__table-cell-first">
+                <Table.HeaderCell className="c__table-cell-first">
                   <Icon.Group className="em__icon-group-margin">
                     <Icon name="newspaper outline" />
                     <Icon corner="top right" name="add" color="green" />
                   </Icon.Group>
                 </Table.HeaderCell>
-                <Table.HeaderCell className="cohort__table-cell-options">
+                <Table.HeaderCell className="c__table-cell-options c__hidden-on-mobile">
                   Tools
                 </Table.HeaderCell>
               </ConfirmAuth>
               <Table.HeaderCell>Title</Table.HeaderCell>
-              <Table.HeaderCell className="cohort__table-cell-content">
+              <Table.HeaderCell className="c__table-cell-content">
                 {isFacilitator ? 'Author' : 'Started'}
               </Table.HeaderCell>
-              <Table.HeaderCell className="cohort__table-cell-content">
+              <Table.HeaderCell className="c__table-cell-content">
                 {isFacilitator ? 'Description' : 'Completed'}
               </Table.HeaderCell>
             </Table.Row>
@@ -269,9 +269,9 @@ export class CohortScenarios extends React.Component {
 
           {scenarios.length ? (
             <Sortable
-              isAuthorized={isFacilitator}
               tag="tbody"
-              className="cohort__scrolling-tbody"
+              className="c__scrolling-tbody"
+              isAuthorized={isFacilitator}
               onChange={onScenarioOrderChange}
               tableRef={this.tableBody}
               options={{
@@ -355,7 +355,7 @@ export class CohortScenarios extends React.Component {
                   >
                     <Table.Row
                       key={`row-${index}`}
-                      className="cohort__table-thead-tbody-tr"
+                      className="c__table-thead-tbody-tr"
                       style={{ cursor: 'pointer' }}
                       {...completionStatus}
                     >
@@ -365,7 +365,7 @@ export class CohortScenarios extends React.Component {
                       >
                         <Table.Cell
                           key={`cell-checkbox-${index}`}
-                          className="cohort__table-cell-first"
+                          className="c__table-cell-first"
                         >
                           <Checkbox
                             key={`checkbox-${index}`}
@@ -379,13 +379,13 @@ export class CohortScenarios extends React.Component {
                         isAuthorized={isFacilitator}
                         requiredPermission="edit_scenarios_in_cohort"
                       >
-                        <Table.Cell className="cohort__table-cell-options">
+                        <Table.Cell className="c__table-cell-options c__hidden-on-mobile">
                           {checked ? (
                             <Button.Group
                               hidden
                               basic
                               size="small"
-                              className="cohort__button-group--transparent"
+                              className="c__button-group--transparent"
                             >
                               <Popup
                                 size="tiny"
@@ -471,14 +471,14 @@ export class CohortScenarios extends React.Component {
                         href={pathname}
                         content={scenario.title}
                       />
-                      <Table.Cell className="cohort__table-cell-content">
+                      <Table.Cell className="c__table-cell-content">
                         {isFacilitator ? (
                           <Username {...usersById[scenario.author.id]} />
                         ) : (
                           startedAtDisplay
                         )}
                       </Table.Cell>
-                      <Table.Cell className="cohort__table-cell-content">
+                      <Table.Cell className="c__table-cell-content">
                         {isFacilitator ? scenario.description : endedAtDisplay}
                       </Table.Cell>
                     </Table.Row>
@@ -487,10 +487,10 @@ export class CohortScenarios extends React.Component {
               })}
             </Sortable>
           ) : (
-            <Table.Body className="cohort__scrolling-tbody">
+            <Table.Body className="c__scrolling-tbody">
               <Table.Row
                 key={`row-empty-results`}
-                className="cohort__table-thead-tbody-tr"
+                className="c__table-thead-tbody-tr"
               >
                 <Table.Cell>No scenarios match your search</Table.Cell>
               </Table.Row>