diff --git a/public/index.html b/public/index.html
index 72e4fe9e..8173a898 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,6 +13,7 @@
       href="https://fonts.googleapis.com/css2?family=Crimson+Text&family=Muli:wght@400;600;700&family=Noto+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://use.typekit.net/xst6ocg.css">
     <link href="https://cdn.jsdelivr.net/npm/@umich-lib/web@latest/umich-lib.css" rel="stylesheet"/>
     <script
       type="module"
diff --git a/src/modules/browse/components/ShelfBrowse/index.js b/src/modules/browse/components/ShelfBrowse/index.js
new file mode 100644
index 00000000..b4dee3d2
--- /dev/null
+++ b/src/modules/browse/components/ShelfBrowse/index.js
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import ShelfBrowseCarousel from '../ShelfBrowseCarousel';
+import { useSelector } from 'react-redux';
+
+const ShelfBrowse = () => {
+  const [shelfData, setShelfData] = useState();
+  const { metadata, uid } = useSelector((state) => {
+    return state.records.record;
+  });
+
+  const callNumberBrowse = metadata.full
+    .flatMap((data) => {
+      return data.description;
+    })
+    .find((callNumber) => {
+      return callNumber.browse?.type === 'callnumber';
+    });
+
+  if (!callNumberBrowse) {
+    return null;
+  }
+
+  const callNumber = callNumberBrowse.browse.value.trim();
+
+  useEffect(() => {
+    const fetchShelfData = async () => {
+      try {
+        const response = await fetch(`https://search.lib.umich.edu/catalog/browse/carousel?query=${callNumber}`);
+        if (!response.ok) {
+          throw new Error(`HTTP Error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        setShelfData(data);
+      } catch {
+        setShelfData();
+      }
+    };
+
+    fetchShelfData();
+  }, [callNumber]);
+
+  if (!shelfData) {
+    return null;
+  }
+
+  return <ShelfBrowseCarousel {...{ callNumber, items: shelfData, uid }} />;
+};
+
+export default ShelfBrowse;
diff --git a/src/modules/browse/components/ShelfBrowseCarousel/index.js b/src/modules/browse/components/ShelfBrowseCarousel/index.js
new file mode 100644
index 00000000..2ffc8e70
--- /dev/null
+++ b/src/modules/browse/components/ShelfBrowseCarousel/index.js
@@ -0,0 +1,179 @@
+import './styles.css';
+import { Anchor, Icon, useWindowWidth } from '../../../reusable';
+import React, { useEffect, useState } from 'react';
+import BrowseLink from '../BrowseLink';
+import PropTypes from 'prop-types';
+
+const ShelfBrowseCarousel = ({ callNumber, items, uid }) => {
+  const currentItem = (item) => {
+    return item.call_number === callNumber && item.url.endsWith(uid);
+  };
+  const callNumberIndex = items.findIndex((item) => {
+    return currentItem(item);
+  });
+  const windowWidth = useWindowWidth();
+  let itemsPerPage = 5;
+  if (windowWidth < 820) {
+    itemsPerPage = 3;
+  }
+  if (windowWidth < 640) {
+    itemsPerPage = 1;
+  }
+  const middlePage = Math.floor(callNumberIndex / itemsPerPage);
+  const [currentPage, setCurrentPage] = useState(middlePage);
+  const [animationClass, setAnimationClass] = useState('');
+  const animationDuration = 250;
+  const debounce = (func) => {
+    let timer = null;
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        func(...args);
+      }, animationDuration);
+    };
+  };
+
+  useEffect(() => {
+    const handleResize = debounce(() => {
+      setCurrentPage(middlePage);
+    });
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, [middlePage]);
+
+  const maxPages = Math.ceil(items.length / itemsPerPage);
+
+  const moveCarousel = (direction) => {
+    const getDirection = direction === 1 ? 'next' : 'previous';
+    setAnimationClass(`animation-out-${getDirection}`);
+    setTimeout(() => {
+      setAnimationClass(`animation-in-${getDirection}`);
+      setCurrentPage((prevPage) => {
+        let newPage = prevPage + direction;
+        if (newPage < 0) {
+          newPage = maxPages - 1;
+        }
+        if (newPage >= maxPages) {
+          newPage = 0;
+        }
+        return newPage;
+      });
+    }, animationDuration);
+    setTimeout(() => {
+      setAnimationClass('');
+    }, animationDuration * 2);
+  };
+
+  const startIndex = currentPage * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentItems = items.slice(startIndex, endIndex);
+  const firstPage = currentPage === 0;
+  const lastPage = currentPage === maxPages - 1;
+  const buttonLabel = `${itemsPerPage} record${itemsPerPage === 1 ? '' : 's'}`;
+
+  return (
+    <section className='shelf-browse container__rounded'>
+      <header className='flex__responsive'>
+        <h2 className='margin-y__none heading-medium'>Shelf browse</h2>
+        <BrowseLink value={callNumber}>
+          <Icon icon='list' size='24' className='margin-right__xs' />Browse in call number list
+        </BrowseLink>
+      </header>
+      <div className='shelf-browse-carousel' aria-label='Shelf browse carousel'>
+        <button
+          aria-label={`Previous ${buttonLabel}`}
+          title={`Previous ${buttonLabel}`}
+          disabled={firstPage}
+          onClick={() => {
+            return moveCarousel(-1);
+          }}
+          className='btn no-background'
+        >
+          <Icon icon='chevron_left' size='24' />
+        </button>
+        <ul
+          className='list__unstyled shelf-browse-items'
+          style={{
+            gridTemplateColumns: `repeat(${itemsPerPage}, 1fr)`
+          }}
+        >
+          {currentItems.map((item, index) => {
+            const isCurrentItem = currentItem(item);
+            const firstOrLastItem = !isCurrentItem && ((firstPage && index === 0) || (lastPage && currentItems.length - 1 === index));
+            const fields = firstOrLastItem ? ['call_number'] : Object.keys(item).slice(0, -1);
+            const basePath = 'https://search.lib.umich.edu';
+            const anchorAttributes = firstOrLastItem
+              ? { href: `${basePath}/catalog/browse/callnumber?query=${item.call_number}` }
+              : { to: item.url.replace(basePath, '') + window.location.search };
+
+            return (
+              <li key={index} className={`shelf-browse-item ${(isCurrentItem || firstOrLastItem) ? 'shelf-browse-item-current' : ''} ${animationClass}`}>
+                <Anchor
+                  {...anchorAttributes}
+                  className={`underline__none container__rounded padding-x__s padding-bottom__xs padding-top__${isCurrentItem ? 'xs' : 's'}`}
+                >
+                  <dl className='flex'>
+                    {isCurrentItem && <p className='margin__none this-item'>Current Record</p>}
+                    {firstOrLastItem && (
+                      <>
+                        <Icon icon='list' size='24' className='item-term-title' />
+                        <span className='item-term-title'>Continue browsing in call number list</span>
+                      </>
+                    )}
+                    {fields.map((key) => {
+                      return item[key] && (
+                        <React.Fragment key={key}>
+                          <dt className='visually-hidden'>{key.replaceAll('_', ' ')}</dt>
+                          <dd className={`item-term-${key}`}>{item[key]}</dd>
+                        </React.Fragment>
+                      );
+                    })}
+                  </dl>
+                </Anchor>
+              </li>
+            );
+          })}
+        </ul>
+        <button
+          aria-label={`Next ${buttonLabel}`}
+          title={`Next ${buttonLabel}`}
+          disabled={lastPage}
+          onClick={() => {
+            return moveCarousel(1);
+          }}
+          className='btn no-background'
+        >
+          <Icon icon='chevron_right' size='24' />
+        </button>
+      </div>
+      <button
+        className='btn btn--secondary btn--small shelf-browse-carousel-return'
+        onClick={() => {
+          setAnimationClass('animation-out');
+          setTimeout(() => {
+            setCurrentPage(middlePage);
+            setAnimationClass('animation-in');
+          }, animationDuration);
+          setTimeout(() => {
+            setAnimationClass('');
+          }, animationDuration * 2);
+        }}
+        disabled={currentPage === middlePage}
+      >
+        Return to current record
+      </button>
+    </section>
+  );
+};
+
+ShelfBrowseCarousel.propTypes = {
+  callNumber: PropTypes.string,
+  items: PropTypes.array,
+  uid: PropTypes.string
+};
+
+export default ShelfBrowseCarousel;
diff --git a/src/modules/browse/components/ShelfBrowseCarousel/styles.css b/src/modules/browse/components/ShelfBrowseCarousel/styles.css
new file mode 100644
index 00000000..80d918d2
--- /dev/null
+++ b/src/modules/browse/components/ShelfBrowseCarousel/styles.css
@@ -0,0 +1,234 @@
+.shelf-browse,
+.shelf-browse > header {
+  align-items: baseline;
+}
+
+.shelf-browse {
+  display: grid;
+  gap: 1rem;
+  grid-template-areas:
+    "header header header"
+    "carousel carousel carousel"
+    ". return .";
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: auto;
+  order: 3;
+  padding: 1.5rem;
+}
+
+@media (min-width: 640px) {
+  .shelf-browse {
+    grid-template-areas:
+      "header return"
+      "carousel carousel";
+    grid-template-columns: 1fr auto;
+  }
+}
+
+.shelf-browse > header {
+  grid-area: header;
+  font-size: 0.875rem;
+}
+
+.shelf-browse-carousel {
+  display: grid;
+  gap: 1rem;
+  grid-area: carousel;
+  grid-template-areas: "prev list next";
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto;
+}
+
+.shelf-browse-carousel > button svg {
+  color: var(--search-color-blue-500);
+}
+
+.shelf-browse-carousel > button:disabled svg {
+  color: var(--search-color-grey-500);
+}
+
+.shelf-browse-carousel > button:not(:disabled):hover svg {
+  color: var(--ds-color-blue-400);
+}
+
+.shelf-browse-carousel > button:first-of-type {
+  grid-area: prev;
+  text-align: right;
+}
+
+.shelf-browse-items {
+  display: grid;
+  column-gap: 1rem;
+  font-family: "noto-sans-semicondensed", sans-serif;
+  font-size: 0.75rem;
+  grid-area: list;
+  grid-template-rows: 1fr auto;
+  position: relative;
+}
+
+.shelf-browse-item {
+  grid-row: 3 / 2;
+}
+
+.shelf-browse-item.animation-out {
+  animation: 0.25s ease-in-out fadeOut forwards;
+}
+
+.shelf-browse-item.animation-out-next {
+  animation:
+    0.25s ease-in-out fadeOut forwards,
+    0.25s ease-in-out slideOutFromLeft forwards;
+}
+
+.shelf-browse-item.animation-out-previous {
+  animation:
+    0.25s ease-in-out fadeOut forwards,
+    0.25s ease-in-out slideOutFromRight forwards;
+}
+
+.shelf-browse-item.animation-in {
+  animation: 0.25s ease-in-out fadeIn forwards;
+}
+
+.shelf-browse-item.animation-in-next {
+  animation:
+    0.25s ease-in-out fadeIn forwards,
+    0.25s ease-in-out slideInFromRight forwards;
+}
+
+.shelf-browse-item.animation-in-previous {
+  animation:
+    0.25s ease-in-out fadeIn forwards,
+    0.25s ease-in-out slideInFromLeft forwards;
+}
+
+@media (prefers-reduced-motion) {
+  .shelf-browse-item[class*="animation-"] {
+    animation: none;
+  }
+}
+
+.shelf-browse-item > a,
+.shelf-browse-item > a > dl {
+  height: 100%;
+}
+
+.shelf-browse-item > a {
+  color: inherit;
+  display: block;
+}
+
+.shelf-browse-item-current {
+  grid-row: 3 / 1;
+}
+
+.shelf-browse-item-current > a {
+  border: 4px solid var(--search-color-blue-500);
+}
+
+.shelf-browse-item dl {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.shelf-browse-item .this-item {
+  align-self: baseline;
+  background: var(--search-color-blue-500);
+  color: white;
+  font-size: 0.5rem;
+  letter-spacing: 1px;
+  margin-left: calc(-0.75rem - 1px);
+  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
+  text-transform: uppercase;
+  clip-path: polygon(0% 0%, 100% 0, calc(100% - 0.75rem) 50%, 100% 100%, 0% 100%);
+}
+
+.shelf-browse-item dd {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.shelf-browse-item .this-item,
+.shelf-browse-item .item-term-title,
+.shelf-browse-item .item-term-callnumber_browse {
+  font-weight: 700;
+}
+
+.shelf-browse-item .item-term-published_year,
+.shelf-browse-item .item-term-callnumber_browse {
+  -webkit-line-clamp: 1;
+}
+
+.shelf-browse-item .item-term-title {
+  color: var(--search-color-blue-400);
+  text-decoration: underline;
+}
+
+.shelf-browse-item > a:hover .item-term-title {
+  text-decoration-thickness: 2px;
+}
+
+.shelf-browse-carousel > button:last-of-type {
+  grid-area: next;
+  text-align: left;
+}
+
+.shelf-browse-carousel-return {
+  grid-area: return;
+}
+
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-1rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    transform: translateX(1rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutFromLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-1rem);
+  }
+}
+
+@keyframes slideOutFromRight {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/src/modules/browse/index.js b/src/modules/browse/index.js
index 090a8dbe..d3a0fd1b 100644
--- a/src/modules/browse/index.js
+++ b/src/modules/browse/index.js
@@ -6,6 +6,8 @@ import BrowseLink from './components/BrowseLink/';
 import BrowsePage from './components/BrowsePage/';
 import browseReducer from './reducer/';
 import organizeByParents from './organizeByParents';
+import ShelfBrowse from './components/ShelfBrowse/';
+import ShelfBrowseCarousel from './components/ShelfBrowseCarousel/';
 
 export {
   addBrowseFilter,
@@ -15,5 +17,7 @@ export {
   BrowseLink,
   BrowsePage,
   browseReducer,
-  organizeByParents
+  organizeByParents,
+  ShelfBrowse,
+  ShelfBrowseCarousel
 };
diff --git a/src/modules/records/components/RecordFull/index.js b/src/modules/records/components/RecordFull/index.js
index f84c9e8a..156ffab4 100644
--- a/src/modules/records/components/RecordFull/index.js
+++ b/src/modules/records/components/RecordFull/index.js
@@ -23,6 +23,7 @@ import { NoMatch } from '../../../pages';
 import { requestRecord } from '../../../pride';
 import { ResourceAccess } from '../../../resource-acccess';
 import { setDocumentTitle } from '../../../a11y';
+import { ShelfBrowse } from '../../../browse';
 import { TrimString } from '../../../core';
 import { useSelector } from 'react-redux';
 let prejudiceInstance = prejudice.createVariableStorageDriverInstance();
@@ -180,6 +181,7 @@ const FullRecord = () => {
           <ResourceAccess record={record} />
         </section>
       </div>
+      {datastoreUid === 'mirlyn' && <ShelfBrowse record={record} />}
       <div className='full-record__actions-container'>
         <h2 className='lists-actions-heading u-display-inline-block u-margin-right-1 u-margin-bottom-none'>
           Actions
diff --git a/src/modules/records/components/Results/index.js b/src/modules/records/components/Results/index.js
index 3eaaaa66..e0b8d710 100644
--- a/src/modules/records/components/Results/index.js
+++ b/src/modules/records/components/Results/index.js
@@ -1,27 +1,15 @@
 import './styles.css';
 import { BentoboxList, Pagination, RecordList } from '../../index';
+import { Icon, useWindowWidth } from '../../../reusable';
 import React, { useEffect, useState } from 'react';
 import { BrowseInfo } from '../../../browse';
 import { Filters } from '../../../filters';
-import { Icon } from '../../../reusable';
 import { InstitutionSelect } from '../../../institution';
 import PropTypes from 'prop-types';
 
 const Results = ({ activeDatastore, activeFilterCount, institution }) => {
   const [isVisible, setIsDivVisible] = useState(true);
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, []);
+  const windowWidth = useWindowWidth();
 
   useEffect(() => {
     if (windowWidth >= 980 && !isVisible) {
diff --git a/src/modules/reusable/components/Icon/index.js b/src/modules/reusable/components/Icon/index.js
index 632fdcd5..1d600bb4 100644
--- a/src/modules/reusable/components/Icon/index.js
+++ b/src/modules/reusable/components/Icon/index.js
@@ -25,6 +25,7 @@ const icons = {
   info: 'M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z',
   insert_drive_file: 'M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z',
   link: 'M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z',
+  list: 'M7,9v-2h14v2H7ZM7,13v-2h14v2H7ZM7,17v-2h14v2H7ZM4,9c-.3,0-.5,0-.7-.3-.2-.2-.3-.4-.3-.7s0-.5.3-.7c.2-.2.4-.3.7-.3s.5,0,.7.3.3.4.3.7,0,.5-.3.7-.4.3-.7.3ZM4,13c-.3,0-.5,0-.7-.3-.2-.2-.3-.4-.3-.7s0-.5.3-.7c.2-.2.4-.3.7-.3s.5,0,.7.3c.2.2.3.4.3.7s0,.5-.3.7-.4.3-.7.3ZM4,17c-.3,0-.5,0-.7-.3-.2-.2-.3-.4-.3-.7s0-.5.3-.7c.2-.2.4-.3.7-.3s.5,0,.7.3.3.4.3.7,0,.5-.3.7-.4.3-.7.3Z',
   map: 'M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z',
   multi_result: 'M9,4 L9,9 L16,9 L16,4 L9,4 Z M9,20 L16,20 L16,11 L9,11 L9,20 Z M0,20 L7,20 L7,15 L0,15 L0,20 Z M0,13 L7,13 L7,4 L0,4 L0,13 L0,13 Z',
   music_note: 'M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z',
diff --git a/src/modules/reusable/components/useWindowWidth/index.js b/src/modules/reusable/components/useWindowWidth/index.js
new file mode 100644
index 00000000..7901fd0d
--- /dev/null
+++ b/src/modules/reusable/components/useWindowWidth/index.js
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+const useWindowWidth = () => {
+  const [width, setWidth] = useState(window.innerWidth);
+
+  const handleResize = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return width;
+};
+
+export default useWindowWidth;
diff --git a/src/modules/reusable/index.js b/src/modules/reusable/index.js
index e7b8051d..5d1ead74 100644
--- a/src/modules/reusable/index.js
+++ b/src/modules/reusable/index.js
@@ -12,6 +12,7 @@ import Tab from './components/Tab';
 import TabPanel from './components/TabPanel';
 import Tabs from './components/Tabs';
 import TruncateText from './components/TruncateText';
+import useWindowWidth from './components/useWindowWidth';
 
 export {
   Alert,
@@ -30,5 +31,6 @@ export {
   Tab,
   Tabs,
   TabPanel,
-  TruncateText
+  TruncateText,
+  useWindowWidth
 };
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 85e5224f..18d5fb1c 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -509,7 +509,12 @@ textarea {
   background: white;
 }
 
-.btn--secondary:hover {
+.btn--secondary:disabled {
+  border-color: var(--search-color-grey-500);
+  color: var(--search-color-grey-500);
+}
+
+.btn--secondary:not(:disabled):hover {
   border-color: var(--search-color-grey-600);
   box-shadow:
     0 0 0 2px #fff,