diff --git a/src/components/__tests__/__snapshots__/data-section.test.js.snap b/src/components/__tests__/__snapshots__/data-section.test.js.snap
index 43064e82..3db2951a 100644
--- a/src/components/__tests__/__snapshots__/data-section.test.js.snap
+++ b/src/components/__tests__/__snapshots__/data-section.test.js.snap
@@ -210,12 +210,17 @@ exports[`Data Section matches snapshot 1`] = `
             CAMP2Ex P-3 Remotely Sensed Aerosol Data
           </label>
           <a
-            className="sc-eqUAAy gqBnyJ"
+            className="sc-eqUAAy jxHsRt"
             data-cy="doi-link"
             href="http://dx.doi.org/10.5067/Airborne/CAMP2Ex_Aerosol_AircraftRemoteSensing_P3_Data_1"
             rel="noopener noreferrer"
             target="_blank"
           >
+            <span
+              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+            >
+              10.5067/Airborne/CAMP2Ex_Aerosol_AircraftRemoteSensing_P3_Data_1
+            </span>
             <svg
               height="16"
               role="img"
@@ -237,11 +242,6 @@ exports[`Data Section matches snapshot 1`] = `
                 fill="#aac9ff"
               />
             </svg>
-            <span
-              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-            >
-              10.5067/Airborne/CAMP2Ex_Aerosol_AircraftRemoteSensing_P3_Data_1
-            </span>
           </a>
         </div>
         <div
diff --git a/src/components/__tests__/__snapshots__/footer.test.js.snap b/src/components/__tests__/__snapshots__/footer.test.js.snap
index c490eeb7..df7a820d 100644
--- a/src/components/__tests__/__snapshots__/footer.test.js.snap
+++ b/src/components/__tests__/__snapshots__/footer.test.js.snap
@@ -116,12 +116,17 @@ exports[`Footer renders correctly 1`] = `
         </li>
         <li>
           <a
-            className="sc-aXZVg egnkfv"
+            className="sc-aXZVg gGyAQD"
             data-cy="api documentation-link"
             href="https://nasa-impact.github.io/admg-backend/documentation/api_doc.html"
             rel="noopener noreferrer"
             target="_blank"
           >
+            <span
+              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+            >
+              API Documentation
+            </span>
             <svg
               height="16"
               role="img"
@@ -143,11 +148,6 @@ exports[`Footer renders correctly 1`] = `
                 fill="#aac9ff"
               />
             </svg>
-            <span
-              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-            >
-              API Documentation
-            </span>
           </a>
         </li>
       </ul>
@@ -165,12 +165,17 @@ exports[`Footer renders correctly 1`] = `
       >
         <li>
           <a
-            className="sc-aXZVg egnkfv"
+            className="sc-aXZVg gGyAQD"
             data-cy="admg-website-link"
             href="https://earthdata.nasa.gov/esds/impact/admg"
             rel="noopener noreferrer"
             target="_blank"
           >
+            <span
+              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+            >
+              ADMG Website
+            </span>
             <svg
               height="16"
               role="img"
@@ -192,21 +197,21 @@ exports[`Footer renders correctly 1`] = `
                 fill="#aac9ff"
               />
             </svg>
-            <span
-              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-            >
-              ADMG Website
-            </span>
           </a>
         </li>
         <li>
           <a
-            className="sc-aXZVg egnkfv"
+            className="sc-aXZVg gGyAQD"
             data-cy="impact-website-link"
             href="https://earthdata.nasa.gov/esds/impact"
             rel="noopener noreferrer"
             target="_blank"
           >
+            <span
+              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+            >
+              IMPACT Website
+            </span>
             <svg
               height="16"
               role="img"
@@ -228,11 +233,6 @@ exports[`Footer renders correctly 1`] = `
                 fill="#aac9ff"
               />
             </svg>
-            <span
-              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-            >
-              IMPACT Website
-            </span>
           </a>
         </li>
       </ul>
@@ -514,12 +514,17 @@ exports[`Footer renders correctly 1`] = `
     , Built by
      
     <a
-      className="sc-aXZVg egnkfv"
+      className="sc-aXZVg gGyAQD"
       data-cy="devseed-website-link"
       href="https://www.developmentseed.org"
       rel="noopener noreferrer"
       target="_blank"
     >
+      <span
+        className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+      >
+        Development Seed
+      </span>
       <svg
         height="16"
         role="img"
@@ -541,11 +546,6 @@ exports[`Footer renders correctly 1`] = `
           fill="#aac9ff"
         />
       </svg>
-      <span
-        className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-      >
-        Development Seed
-      </span>
     </a>
     .
   </div>
diff --git a/src/components/explore/products-table.js b/src/components/explore/products-table.js
index 0163c840..7d0014bd 100644
--- a/src/components/explore/products-table.js
+++ b/src/components/explore/products-table.js
@@ -15,17 +15,14 @@ export function ProductsTable({ dois }) {
       css={`
         background: rgba(255, 255, 255, 0.06);
         border-spacing: 30px;
+        th:first-child {
+          padding-left: 1.25rem;
+        }
       `}
     >
       <thead>
         <tr>
-          <th
-            css={`
-              padding-left: 20px;
-            `}
-          >
-            DATA PRODUCT
-          </th>
+          <th>DATA PRODUCT</th>
           <th>PLATFORMS</th>
           <th>INSTRUMENTS</th>
         </tr>
@@ -46,16 +43,24 @@ export function ProductsTable({ dois }) {
                   href={`http://dx.doi.org/${doi.doi}`}
                   css={`
                     color: ${colors[NEGATIVE].linkText};
-                    display: block;
+                    display: inline-flex;
+                    flex-flow: row nowrap;
+                    gap: 0.25rem;
+                    align-items: center;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     overflow: hidden;
-                    padding-left: 30px;
+                    padding-left: 1.5rem;
+                    svg {
+                      width: 12px;
+                      height: 12px;
+                      flex-shrink: 0;
+                    }
                   `}
                   data-cy={`doi-link`}
                 >
-                  <ExternalLinkIcon color={colors[NEGATIVE].linkText} />{" "}
                   <span>{doi.shortname}</span>
+                  <ExternalLinkIcon color={colors[NEGATIVE].linkText} />{" "}
                 </a>
               </td>
               <td>
diff --git a/src/components/external-link.js b/src/components/external-link.js
index f4da8c4b..5286164d 100644
--- a/src/components/external-link.js
+++ b/src/components/external-link.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types"
 
 import { POSITIVE, NEGATIVE } from "../utils/constants"
 import { PropTypeIsUrl } from "../utils/helpers"
-import { colors, breakpoints } from "../theme"
+import { colors } from "../theme"
 import { ExternalLinkIcon } from "../icons"
 
 export default function ExternalLink({
@@ -23,14 +23,15 @@ export default function ExternalLink({
         display: inline-flex;
         flex-flow: row nowrap;
         gap: 0.25rem;
-        align-items: baseline;
-        @media screen and (min-width: ${breakpoints["sm"]}) {
-          flex-flow: row wrap;
+        align-items: center;
+        svg {
+          width: 12px;
+          height: 12px;
+          flex-shrink: 0;
         }
       `}
       data-cy={`${id}-link`}
     >
-      <ExternalLinkIcon color={colors[mode].linkText} />
       <span
         css={`
           overflow-wrap: anywhere;
@@ -38,6 +39,7 @@ export default function ExternalLink({
       >
         {label || children}
       </span>
+      <ExternalLinkIcon color={colors[mode].linkText} />
     </a>
   )
 }
diff --git a/src/templates/instrument/__tests__/__snapshots__/overview-section.test.js.snap b/src/templates/instrument/__tests__/__snapshots__/overview-section.test.js.snap
index 5a36ff51..1abccea5 100644
--- a/src/templates/instrument/__tests__/__snapshots__/overview-section.test.js.snap
+++ b/src/templates/instrument/__tests__/__snapshots__/overview-section.test.js.snap
@@ -134,12 +134,17 @@ exports[`Overview Section displays content 1`] = `
         </dt>
         <dd>
           <a
-            className="sc-eqUAAy fwapUR"
+            className="sc-eqUAAy ksibDB"
             data-cy="calibration-doi-link"
             href="http://dx.doi.org/10.5067/calibration"
             rel="noopener noreferrer"
             target="_blank"
           >
+            <span
+              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+            >
+              http://dx.doi.org/10.5067/calibration
+            </span>
             <svg
               height="16"
               role="img"
@@ -161,11 +166,6 @@ exports[`Overview Section displays content 1`] = `
                 fill="#15418c"
               />
             </svg>
-            <span
-              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-            >
-              http://dx.doi.org/10.5067/calibration
-            </span>
           </a>
         </dd>
         <dt>
@@ -183,12 +183,17 @@ exports[`Overview Section displays content 1`] = `
               className="overview-section___StyledLi3-sc-1oemh85-0 hwjFCf"
             >
               <a
-                className="sc-eqUAAy fwapUR"
+                className="sc-eqUAAy ksibDB"
                 data-cy="online-information-link"
                 href="http://www.example.com"
                 rel="noopener noreferrer"
                 target="_blank"
               >
+                <span
+                  className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+                >
+                  http://www.example.com
+                </span>
                 <svg
                   height="16"
                   role="img"
@@ -210,11 +215,6 @@ exports[`Overview Section displays content 1`] = `
                     fill="#15418c"
                   />
                 </svg>
-                <span
-                  className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-                >
-                  http://www.example.com
-                </span>
               </a>
             </li>
           </ul>
@@ -291,12 +291,17 @@ exports[`Overview Section displays content 1`] = `
           DOI:
            
           <a
-            className="sc-eqUAAy gqBnyJ"
+            className="sc-eqUAAy jxHsRt"
             data-cy="instrument-doi-link"
             href="http://dx.doi.org/10.5067/instrument"
             rel="noopener noreferrer"
             target="_blank"
           >
+            <span
+              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+            >
+              http://dx.doi.org/10.5067/instrument
+            </span>
             <svg
               height="16"
               role="img"
@@ -318,11 +323,6 @@ exports[`Overview Section displays content 1`] = `
                 fill="#aac9ff"
               />
             </svg>
-            <span
-              className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-            >
-              http://dx.doi.org/10.5067/instrument
-            </span>
           </a>
         </p>
       </div>
@@ -356,12 +356,17 @@ exports[`Overview Section displays content 1`] = `
             className="list-link___StyledLi-sc-xxtxki-0 hZlwud"
           >
             <a
-              className="sc-eqUAAy fwapUR"
+              className="sc-eqUAAy ksibDB"
               data-cy="test-link"
               href="http://www.example.com"
               rel="noopener noreferrer"
               target="_blank"
             >
+              <span
+                className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+              >
+                test
+              </span>
               <svg
                 height="16"
                 role="img"
@@ -383,23 +388,23 @@ exports[`Overview Section displays content 1`] = `
                   fill="#15418c"
                 />
               </svg>
-              <span
-                className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-              >
-                test
-              </span>
             </a>
           </li>
           <li
             className="list-link___StyledLi-sc-xxtxki-0 hZlwud"
           >
             <a
-              className="sc-eqUAAy fwapUR"
+              className="sc-eqUAAy ksibDB"
               data-cy="test2-link"
               href="http://www.example.com"
               rel="noopener noreferrer"
               target="_blank"
             >
+              <span
+                className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
+              >
+                test2
+              </span>
               <svg
                 height="16"
                 role="img"
@@ -421,11 +426,6 @@ exports[`Overview Section displays content 1`] = `
                   fill="#15418c"
                 />
               </svg>
-              <span
-                className="external-link___StyledSpan-sc-3ezy1s-0 LrNqW"
-              >
-                test2
-              </span>
             </a>
           </li>
         </ul>