diff --git a/src/components/BeaufortSeaSpeciesViz.vue b/src/components/BeaufortSeaSpeciesViz.vue
index 7f4fa0febe3026dd41c0bb39bb8f88e2d4b029b1..f6bf080eceaeb9d0e8694b7348b4c7dd0fdb88c9 100644
--- a/src/components/BeaufortSeaSpeciesViz.vue
+++ b/src/components/BeaufortSeaSpeciesViz.vue
@@ -37,12 +37,20 @@
         <tabsGroup id="species-tabs" :options="{ useUrlFragment: false }">
             <tabItem v-for="tab in text.tabData" :name="`<span class='scientificName'>${tab.tabTitle}</span>`" :key="tab.tabTitle" :prefix="getPrefixImageHTML(tab.tabPrefixImageName)">
                 <h3 class="tab-content-title">
-                    <span class="species-class" :id="`species-${tab.tabContentTitleID}`">
+                    <span v-if="!mobileView" class="species-class" :id="`species-${tab.tabContentTitleID}`">
                         <span class="scientificName highlight species-title" :id="tab.tabContentTitleID">
                             {{ tab.tabContentTitle }}
                         </span>
                         {{ tab.tabSpeciesClass }}
                     </span>
+                    <span v-if="mobileView" class="scientificName highlight species-title" :id="tab.tabContentTitleID">
+                        {{ tab.tabContentTitle }}
+                    </span>
+                </h3>
+                <h3 v-if="mobileView" class="tab-content-title">
+                    <span class="species-class mobile" :id="`species-${tab.tabContentTitleID}`">
+                        {{ tab.tabSpeciesClass }}
+                    </span>
                 </h3>
                 <p v-html="tab.tabText" />
                 <img class="tab-content-image" :src="getContentImageUrl(tab.tabContentImageSuffix)" :alt="tab.tabImageAlt">
@@ -64,7 +72,7 @@
 </template>
 
 <script setup>
-    // import {Tabs, Tab} from 'vue3-tabs-component';
+    import { isMobile } from 'mobile-device-detect';
     import VizSection from '@/components/VizSection.vue';
 
     // define props
@@ -73,6 +81,7 @@
     })
 
     // global objects
+    const mobileView = isMobile;
     const baseURL = "https://labs.waterdata.usgs.gov/visualizations/images/BeaufortSea/"
     const forams = props.text.tabData.filter(item => item.tabPrefixImageName.includes('F'))
     const ostracodes = props.text.tabData.filter(item => item.tabPrefixImageName.includes('O'))
@@ -100,6 +109,9 @@
     font-weight: 300;
     font-style: italic;
 }
+.species-class.mobile {
+    padding: 1px 10px 2px 6px;
+}
 #species-cassidulina {
     border: 1px solid #3c475a;
 }
@@ -129,7 +141,7 @@ li {
     width: 90vw;
     max-width: 1000px;
 }
-@media (min-width: 850px) {
+@media (min-width: 1000px) {
     .tabs-component {
         width: 70vw;
     }
@@ -142,7 +154,7 @@ li {
     width: auto;
 }
 
-@media (min-width: 850px) {
+@media (min-width: 1000px) {
     .tab-image {
         max-width: fit-content;
         max-height: 5rem;
@@ -182,7 +194,7 @@ li {
     margin-bottom: 5px;
 }
 
-@media (min-width: 850px) {
+@media (min-width: 1000px) {
     .tabs-component-tabs {
         border: 0;
         align-items: stretch;
@@ -216,7 +228,7 @@ li {
     cursor: not-allowed !important;
 }
 
-@media (min-width: 850px) {
+@media (min-width: 1000px) {
     .tabs-component-tab, .tabs-component-tab--custom {
         background-color: #fff;
         border: solid 1px #ddd;
@@ -235,7 +247,7 @@ li {
     }
 }
 
-@media (min-width: 850px) {
+@media (min-width: 1000px) {
     .tabs-component-tab-a, .tabs-component-tab-a--custom {
         align-items: center;
         color: inherit;
@@ -255,10 +267,14 @@ li {
 }
 
 .tabs-component-panels {
-    padding: 2em 0;
+    padding: 2em 1em;
+    background-color: #fff;
+    border: solid 1px #ddd;
+    border-radius: 0 6px 6px 6px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
 }
 
-@media (min-width: 850px) {
+@media (min-width: 1000px) {
     .tabs-component-panels {
         background-color: #fff;
         border: solid 1px #ddd;