diff --git a/docs/Xetthecum.html b/docs/Xetthecum.html
index af1b6f9e..bd620fbb 100644
--- a/docs/Xetthecum.html
+++ b/docs/Xetthecum.html
@@ -4,6 +4,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
         <link rel="stylesheet" type="text/css" href="css/imerss-viz-all.css" />
+        <link rel="stylesheet" type="text/css" href="css/xetthecum-core.css"/>
         <link rel="stylesheet" type="text/css" href="css/xetthecum.css" />
         <script src="js/jquery.js"></script>
         <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
diff --git a/docs/css/xetthecum-core.css b/docs/css/xetthecum-core.css
index a4bb4da7..41f9dc6b 100644
--- a/docs/css/xetthecum-core.css
+++ b/docs/css/xetthecum-core.css
@@ -1,4 +1,4 @@
-/** New-age file for Phase III, referenced from xetthecum-storymap **/
+/** File for Phase II and III, referenced externally from from xetthecum-storymap as well as internally **/
 
 .imerss-cultural-values {
     display: flex;
diff --git a/docs/css/xetthecum.css b/docs/css/xetthecum.css
index cbe6a0d2..9ef9a454 100644
--- a/docs/css/xetthecum.css
+++ b/docs/css/xetthecum.css
@@ -86,6 +86,75 @@ body {
 }
 
 
+.imerss-class-image-shoreline {
+    background-image: url(../img/Xetthecum/Intertidal.jpg);
+}
+
+.imerss-class-image-subtidal {
+    background-image: url(../img/Xetthecum/Subtidal.jpg);
+}
+
+.imerss-class-image-pole-sapling {
+    background-image: url(../img/Xetthecum/Conifer_Pole_Sapling.jpg);
+}
+
+.imerss-class-image-mature-forest {
+    background-image: url(../img/Xetthecum/Mature_Conifer_Forest.jpg);
+}
+
+.imerss-class-image-young-forest {
+    background-image: url(../img/Xetthecum/Young_Conifer_Forest.jpg);
+}
+
+.imerss-class-image-wetland {
+    background-image: url(../img/Xetthecum/Wetland.jpg);
+}
+
+.imerss-class-image-laughlin-lake {
+    background-image: url(../img/Xetthecum/Laughlin_Lake.jpg);
+}
+
+.imerss-class-image-greig-creek {
+    background-image: url(../img/Xetthecum/Greig_Creek.jpg);
+}
+
+.imerss-class-image-riparian {
+    background-image: url(../img/Xetthecum/Riparian.jpg);
+}
+
+.imerss-class-image-coastal-bluff {
+    background-image: url(../img/Xetthecum/Coastal_Bluffs.jpg);
+}
+
+.imerss-class-image-woodland {
+    background-image: url(../img/Xetthecum/Woodland.jpg);
+}
+
+.imerss-class-image-agricultural {
+    background-image: url(../img/Xetthecum/Agricultural.jpg);
+}
+
+.imerss-class-image-developed {
+    background-image: url(../img/Xetthecum/Developed.jpg);
+}
+
+.imerss-class-image-rural {
+    background-image: url(../img/Xetthecum/Rural.jpg);
+}
+
+.imerss-class-image-road {
+    background-image: url(../img/Xetthecum/Porlier_Pass_Road.jpg);
+}
+
+.imerss-class-image-dock {
+    background-image: url(../img/Xetthecum/Dock.jpg);
+}
+
+.imerss-class-image-eelgrass-beds {
+    background-image: url(../img/Xetthecum/Eelgrass.jpg);
+}
+
+
 .imerss-container {
     margin: 1.5rem 0.5rem 0.5rem 0.5rem;
     flex-direction: row;
@@ -229,7 +298,8 @@ body {
     font-size: 0.9rem;
     width: 8rem;
     position: relative;
-    top: -2px;
+    top: 3px;
+    margin-left: 2px;
 }
 
 .imerss-map {
@@ -360,10 +430,14 @@ body {
 }
 */
 
+/** These margins eat into the ones for imerss-map-outer-panel - we also have a width: 100% definition in core which we
+ now need to override
+ */
 .imerss-map-outer-panel .imerss-photo {
     margin-left: -1rem;
     margin-right: -1rem;
     margin-bottom: 1rem;
+    width: auto;
 }
 
 .imerss-taxonDisplay-wrapper {
diff --git a/indexWithMapXetthecum.html b/indexWithMapXetthecum.html
index 651ffca9..1492ac9d 100644
--- a/indexWithMapXetthecum.html
+++ b/indexWithMapXetthecum.html
@@ -48,6 +48,7 @@
 
         <link rel="stylesheet" type="text/css" href="src/client/css/imerss-core.css"/>
         <link rel="stylesheet" type="text/css" href="src/client/css/imerss-viz.css"/>
+        <link rel="stylesheet" type="text/css" href="src/client/css/xetthecum-core.css"/>
         <link rel="stylesheet" type="text/css" href="src/client/css/xetthecum.css"/>
 
         <script src="src/client/js/colour.js"></script>
diff --git a/src/buildSource/Xetthecum.html b/src/buildSource/Xetthecum.html
index af1b6f9e..bd620fbb 100644
--- a/src/buildSource/Xetthecum.html
+++ b/src/buildSource/Xetthecum.html
@@ -4,6 +4,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
         <link rel="stylesheet" type="text/css" href="css/imerss-viz-all.css" />
+        <link rel="stylesheet" type="text/css" href="css/xetthecum-core.css"/>
         <link rel="stylesheet" type="text/css" href="css/xetthecum.css" />
         <script src="js/jquery.js"></script>
         <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
diff --git a/src/client/css/xetthecum-core.css b/src/client/css/xetthecum-core.css
index a4bb4da7..41f9dc6b 100644
--- a/src/client/css/xetthecum-core.css
+++ b/src/client/css/xetthecum-core.css
@@ -1,4 +1,4 @@
-/** New-age file for Phase III, referenced from xetthecum-storymap **/
+/** File for Phase II and III, referenced externally from from xetthecum-storymap as well as internally **/
 
 .imerss-cultural-values {
     display: flex;
diff --git a/src/client/css/xetthecum.css b/src/client/css/xetthecum.css
index cbe6a0d2..9ef9a454 100644
--- a/src/client/css/xetthecum.css
+++ b/src/client/css/xetthecum.css
@@ -86,6 +86,75 @@ body {
 }
 
 
+.imerss-class-image-shoreline {
+    background-image: url(../img/Xetthecum/Intertidal.jpg);
+}
+
+.imerss-class-image-subtidal {
+    background-image: url(../img/Xetthecum/Subtidal.jpg);
+}
+
+.imerss-class-image-pole-sapling {
+    background-image: url(../img/Xetthecum/Conifer_Pole_Sapling.jpg);
+}
+
+.imerss-class-image-mature-forest {
+    background-image: url(../img/Xetthecum/Mature_Conifer_Forest.jpg);
+}
+
+.imerss-class-image-young-forest {
+    background-image: url(../img/Xetthecum/Young_Conifer_Forest.jpg);
+}
+
+.imerss-class-image-wetland {
+    background-image: url(../img/Xetthecum/Wetland.jpg);
+}
+
+.imerss-class-image-laughlin-lake {
+    background-image: url(../img/Xetthecum/Laughlin_Lake.jpg);
+}
+
+.imerss-class-image-greig-creek {
+    background-image: url(../img/Xetthecum/Greig_Creek.jpg);
+}
+
+.imerss-class-image-riparian {
+    background-image: url(../img/Xetthecum/Riparian.jpg);
+}
+
+.imerss-class-image-coastal-bluff {
+    background-image: url(../img/Xetthecum/Coastal_Bluffs.jpg);
+}
+
+.imerss-class-image-woodland {
+    background-image: url(../img/Xetthecum/Woodland.jpg);
+}
+
+.imerss-class-image-agricultural {
+    background-image: url(../img/Xetthecum/Agricultural.jpg);
+}
+
+.imerss-class-image-developed {
+    background-image: url(../img/Xetthecum/Developed.jpg);
+}
+
+.imerss-class-image-rural {
+    background-image: url(../img/Xetthecum/Rural.jpg);
+}
+
+.imerss-class-image-road {
+    background-image: url(../img/Xetthecum/Porlier_Pass_Road.jpg);
+}
+
+.imerss-class-image-dock {
+    background-image: url(../img/Xetthecum/Dock.jpg);
+}
+
+.imerss-class-image-eelgrass-beds {
+    background-image: url(../img/Xetthecum/Eelgrass.jpg);
+}
+
+
 .imerss-container {
     margin: 1.5rem 0.5rem 0.5rem 0.5rem;
     flex-direction: row;
@@ -229,7 +298,8 @@ body {
     font-size: 0.9rem;
     width: 8rem;
     position: relative;
-    top: -2px;
+    top: 3px;
+    margin-left: 2px;
 }
 
 .imerss-map {
@@ -360,10 +430,14 @@ body {
 }
 */
 
+/** These margins eat into the ones for imerss-map-outer-panel - we also have a width: 100% definition in core which we
+ now need to override
+ */
 .imerss-map-outer-panel .imerss-photo {
     margin-left: -1rem;
     margin-right: -1rem;
     margin-bottom: 1rem;
+    width: auto;
 }
 
 .imerss-taxonDisplay-wrapper {