diff --git a/config.js b/config.js
index 68ecd09cc..e3e9c022b 100644
--- a/config.js
+++ b/config.js
@@ -1,6 +1,7 @@
 module.exports = {
     catalogUrl: null,
     catalogTitle: "STAC Browser",
+    catalogImage: null,
     allowExternalAccess: true, // Must be true if catalogUrl is not given
     allowedDomains: [],
     detectLocaleFromBrowser: true,
diff --git a/docs/options.md b/docs/options.md
index 04e2c4fb9..b664d1337 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -17,6 +17,7 @@ The following ways to set config options are possible:
 
 - [catalogUrl](#catalogurl)
 - [catalogTitle](#catalogtitle)
+- [catalogImage](#catalogimage)
 - [allowExternalAccess](#allowexternalaccess)
 - [allowedDomains](#alloweddomains)
 - [apiCatalogPriority](#apicatalogpriority)
@@ -71,6 +72,11 @@ If `catalogUrl` is empty or set to `null` STAC Browser switches to a mode where
 
 The default title shown if no title can be read from the root STAC catalog.
 
+## catalogImage
+
+URL to an image to use as a logo with the title.
+Should be an image that browsers can display, e.g. PNG, JPEG, WebP, or SVG.
+
 ## allowExternalAccess
 
 This allows or disallows loading and browsing external STAC data.
diff --git a/src/StacBrowser.vue b/src/StacBrowser.vue
index 2876f97e8..e63c02019 100644
--- a/src/StacBrowser.vue
+++ b/src/StacBrowser.vue
@@ -5,8 +5,76 @@
     <Sidebar v-if="sidebar" />
     <!-- Header -->
     <header>
-      <div class="logo">{{ displayCatalogTitle }}</div>
-      <StacHeader @enableSidebar="sidebar = true" />
+      <b-row class="site">
+        <b-col md="12">
+          <div class="title">
+            <img v-if="catalogImageFromVueX" :src="catalogImageFromVueX" class="logo">
+            <h2>
+              <StacLink v-if="root" :data="root" />
+              <template v-else>{{ catalogTitle }}</template>
+            </h2>
+            <b-button v-if="root" size="sm" variant="outline-primary" id="popover-root-btn" :title="$t('server')">
+              <b-icon-server /><span class="button-label">{{ $t('server') }}</span>
+            </b-button>
+          </div>
+          <nav class="actions">
+            <b-button-group>
+              <b-button variant="primary" size="sm" :title="$t('browse')" v-b-toggle.sidebar @click="sidebar = true">
+                <b-icon-list /><span class="button-label">{{ $t('browse') }}</span>
+              </b-button>
+              <b-button v-if="canSearch" variant="primary" size="sm" :to="searchBrowserLink" :title="$t('search.title')" :pressed="isSearchPage()">
+                <b-icon-search /><span class="button-label">{{ $t('search.title') }}</span>
+              </b-button>
+            </b-button-group>
+          </nav>
+          <nav class="actions">
+            <b-button-group>
+              <b-button v-if="canAuthenticate" variant="primary" size="sm" @click="logInOut" :title="authTitle">
+                <component :is="authIcon" /><span class="button-label">{{ authLabel }}</span>
+              </b-button>
+              <b-dropdown size="sm" variant="primary" right :title="$t('source.language.switch')">
+                <template #button-content>
+                  <b-icon-flag /><span class="button-label">{{ $t('source.language.label', {currentLanguage}) }}</span>
+                </template>
+                <b-dropdown-item
+                  v-for="l of languages" :key="l.code" class="lang-item"
+                  @click="switchLocale({locale: l.code, userSelected: true})"
+                >
+                  <b-icon-check v-if="localeFromVueX === l.code" />
+                  <b-icon-blank v-else />
+                  <span class="title">
+                    <span :lang="l.code">{{ l.native }}</span>
+                    <template v-if="l.global && l.global !== l.native"> / <span lang="en">{{ l.global }}</span></template>
+                  </span>
+                  <b-icon-exclamation-triangle v-if="supportsLanguageExt && (!l.ui || !l.data)" :title="l.ui ? $t('source.language.onlyUI') : $t('source.language.onlyData')" class="ml-2" />
+                </b-dropdown-item>
+              </b-dropdown>
+            </b-button-group>
+          </nav>
+        </b-col>
+      </b-row>
+      <b-row class="page">
+        <b-col md="12">
+          <div class="title">
+            <img v-if="icon" :src="icon.href" :alt="icon.title" :title="icon.title" class="icon mr-2">
+            <h1>{{ title }}</h1>
+            <Source class="title-actions" :title="title" :stacUrl="url" :stac="data" />
+          </div>
+          <nav class="actions">
+            <b-button-group class="actions">
+              <b-button v-if="back" :to="selfBrowserLink" :title="$t('goBack.description', {type})" variant="outline-primary" size="sm">
+                <b-icon-arrow-left /><span class="button-label">{{ $t('goBack.label') }}</span>
+              </b-button>
+              <b-button v-if="collectionLink" :to="toBrowserPath(collectionLink.href)" :title="collectionLinkTitle" variant="outline-primary" size="sm">
+                <b-icon-folder-symlink /><span class="button-label">{{ $t('goToCollection.label') }}</span>
+              </b-button>
+              <b-button v-if="parentLink" :to="toBrowserPath(parentLink.href)" :title="parentLinkTitle" variant="outline-primary" size="sm">
+                <b-icon-arrow-90deg-up /><span class="button-label">{{ $t('goToParent.label') }}</span>
+              </b-button>
+            </b-button-group>
+          </nav>
+        </b-col>
+      </b-row>
     </header>
     <!-- Content (Item / Catalog) -->
     <router-view />
@@ -17,32 +85,45 @@
         </template>
       </i18n>
     </footer>
+    <b-popover
+      v-if="root" id="popover-root" custom-class="popover-large" target="popover-root-btn"
+      triggers="focus" placement="bottom" container="stac-browser"
+    >
+      <template #title>
+        {{ $t('server') }}
+        <b-badge v-if="isApi" variant="danger">{{ $t('index.api') }}</b-badge>
+        <b-badge v-else variant="success">{{ $t('index.catalog') }}</b-badge>
+      </template>
+      <RootStats />
+    </b-popover>
   </b-container>
 </template>
 
 <script>
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Vuex, { mapActions, mapGetters, mapState } from 'vuex';
+import Vuex, { mapMutations, mapActions, mapGetters, mapState } from 'vuex';
 import CONFIG from './config';
 import getRoutes from "./router";
 import getStore from "./store";
 
 import {
-  AlertPlugin, BadgePlugin, ButtonGroupPlugin, ButtonPlugin,
-  CardPlugin, LayoutPlugin, SpinnerPlugin,
+  AlertPlugin, BadgePlugin, BDropdown, BDropdownItem, BPopover,
+  BIconArrow90degUp, BIconArrowLeft, BIconBlank, BIconCheck, BIconExclamationTriangle,
+  BIconFlag, BIconFolderSymlink, BIconInfoLg, BIconList, BIconSearch, BIconServer,
+  ButtonGroupPlugin, ButtonPlugin, CardPlugin, LayoutPlugin, SpinnerPlugin,
   VBToggle, VBVisible } from "bootstrap-vue";
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
 
 import ErrorAlert from './components/ErrorAlert.vue';
-import StacHeader from './components/StacHeader.vue';
+import StacLink from './components/StacLink.vue';
 
 import STAC from './models/stac';
 import Utils from './utils';
 import URI from 'urijs';
 
-import { API_LANGUAGE_CONFORMANCE } from './i18n';
+import { API_LANGUAGE_CONFORMANCE, STAC_LANGUAGE_EXT } from './i18n';
 import { getBest, prepareSupported } from './locale-id';
 import BrowserStorage from "./browser-store";
 import Authentication from "./components/Authentication.vue";
@@ -103,9 +184,25 @@ export default {
   store,
   components: {
     Authentication,
+    BDropdown,
+    BDropdownItem,
+    BIconArrow90degUp,
+    BIconArrowLeft,
+    BIconBlank,
+    BIconCheck,
+    BIconExclamationTriangle,
+    BIconFlag,
+    BIconFolderSymlink,
+    BIconInfoLg,
+    BIconList,
+    BIconSearch,
+    BIconServer,
+    BPopover,
     ErrorAlert,
+    RootStats: () => import('./components/RootStats.vue'),
     Sidebar: () => import('./components/Sidebar.vue'),
-    StacHeader
+    StacLink,
+    Source: () => import('./components/Source.vue')
   },
   props: {
     ...Props
@@ -118,14 +215,17 @@ export default {
     };
   },
   computed: {
-    ...mapState(['allowSelectCatalog', 'data', 'dataLanguage', 'description', 'globalError', 'stateQueryParameters', 'title', 'uiLanguage', 'url']),
+    ...mapState(['allowSelectCatalog', 'conformsTo', 'data', 'dataLanguage', 'dataLanguages', 'description', 'globalError', 'stateQueryParameters', 'title', 'uiLanguage', 'url']),
     ...mapState({
+      catalogImageFromVueX: 'catalogImage',
+      localeFromVueX: 'locale',
       detectLocaleFromBrowserFromVueX: 'detectLocaleFromBrowser',
       supportedLocalesFromVueX: 'supportedLocales',
       storeLocaleFromVueX: 'storeLocale'
     }),
-    ...mapGetters(['displayCatalogTitle', 'fromBrowserPath', 'isExternalUrl', 'root', 'supportsConformance', 'toBrowserPath']),
-    ...mapGetters('auth', ['showLogin']),
+    ...mapGetters(['canSearch', 'collectionLink', 'fromBrowserPath', 'isExternalUrl', 'parentLink', 'root', 'rootLink', 'supportsConformance', 'supportsExtension', 'toBrowserPath']),
+    ...mapGetters('auth', { authMethod: 'method' }),
+    ...mapGetters('auth', ['canAuthenticate', 'isLoggedIn', 'showLogin']),
     browserVersion() {
       if (typeof STAC_BROWSER_VERSION !== 'undefined') {
         return STAC_BROWSER_VERSION;
@@ -133,6 +233,139 @@ export default {
       else {
         return "";
       }
+    },
+    authIcon() {
+      return this.isLoggedIn ? 'b-icon-unlock' : 'b-icon-lock';
+    },
+    authTitle() {
+      return this.authMethod.getButtonTitle();
+    },
+    authLabel() {
+      return this.isLoggedIn ? this.authMethod.getLogoutLabel() : this.authMethod.getLoginLabel();
+    },
+    searchBrowserLink() {
+      if (!this.canSearch) {
+        return null;
+      }
+      let searchLink;
+      if (this.data instanceof STAC && !this.data.equals(this.root)) {
+        searchLink = this.data.getSearchLink();
+      }
+      if (searchLink) {
+        return `/search${this.data.getBrowserPath()}`;
+      }
+      else if (this.root && this.allowSelectCatalog) {
+        return `/search${this.root.getBrowserPath()}`;
+      }
+      return '/search';
+    },
+    currentLanguage() {
+      let lang = this.languages.find(l => l.code === this.localeFromVueX);
+      if (lang) {
+        return lang.native;
+      }
+      else {
+        return '-';
+      }
+    },
+    supportsLanguageExt() {
+      return this.supportsExtension(STAC_LANGUAGE_EXT);
+    },
+    languages() {
+      let languages = [];
+
+      // Add all UI languages
+      for(let code of this.supportedLocalesFromVueX) {
+        languages.push({
+          code,
+          native: this.$t(`languages.${code}.native`),
+          global: this.$t(`languages.${code}.global`),
+          ui: true
+        });
+      }
+
+      // Add missing data languages
+      for(let lang of this.dataLanguages) {
+        if (!Utils.isObject(lang) || !lang.code || this.supportedLocalesFromVueX.includes(lang.code)) {
+          continue;
+        }
+        let newLang = {
+          code: lang.code
+        };
+        newLang.native = lang.name || lang.alternate || lang.code;
+        newLang.global = lang.alternate || lang.name || lang.code;
+        newLang.data = true;
+        languages.push(newLang);
+      }
+
+      if (this.supportsLanguageExt) {
+        // Determine which languages are complete
+        const uiSupported = prepareSupported(this.supportedLocalesFromVueX);
+        const dataSupported = prepareSupported(this.dataLanguages.map(l => l.code));
+        for(let l of languages) {
+          if (!l.ui) {
+            l.ui = Boolean(getBest(uiSupported, l.code, null));
+          }
+          if (!l.data) {
+            l.data = Boolean(getBest(dataSupported, l.code, null));
+          }
+        }
+      }
+      
+      const collator = new Intl.Collator(this.uiLanguage);
+      return languages.sort((a,b) => collator.compare(a.global, b.global));
+    },
+    isApi() {
+      // todo: This gives false results for a statically hosted OGC API - Records, which may include conformance classes
+      return Array.isArray(this.conformsTo) && this.conformsTo.length > 0;
+    },
+    back() {
+      return this.$route.name === 'validation';
+    },
+    selfBrowserLink() {
+      return this.toBrowserPath(this.url);
+    },
+    type() {
+      if (this.data instanceof STAC) {
+        if (this.data.isItem()) {
+          return this.$tc('stacItem');
+        }
+        else if (this.data.isCollection()) {
+          return this.$tc(`stacCollection`);
+        }
+        else if (this.data.isCatalog()) {
+          return this.$tc(`stacCatalog`);
+        }
+        else if (Utils.hasText(this.data.type)) {
+          return this.data.type;
+        }
+      }
+      return null;
+    },
+    collectionLinkTitle() {
+      if (this.collectionLink && Utils.hasText(this.collectionLink.title)) {
+        return this.$t('goToCollection.descriptionWithTitle', this.collectionLink);
+      }
+      else {
+        return this.$t('goToCollection.description');
+      }
+    },
+    parentLinkTitle() {
+      if (this.parentLink && Utils.hasText(this.parentLink.title)) {
+        return this.$t('goToParent.descriptionWithTitle', this.parentLink);
+      }
+      else {
+        return this.$t('goToParent.description');
+      }
+    },
+    icon() {
+      if (this.data instanceof STAC) {
+        let icons = this.data.getIcons();
+        if (icons.length > 0) {
+          return icons[0];
+        }
+      }
+      return null;
     }
   },
   watch: {
@@ -295,6 +528,24 @@ export default {
   },
   methods: {
     ...mapActions(['switchLocale']),
+    ...mapMutations('auth', ['addAction']),
+    ...mapActions('auth', ['requestLogin', 'requestLogout']),
+    async logInOut() {
+      if (this.url) {
+        this.addAction(() => this.$store.dispatch("load", {
+          url: this.url,
+          show: true,
+          force: true,
+          noRetry: true
+        }));
+      }
+      if (this.isLoggedIn) {
+        await this.requestLogout();
+      }
+      else {
+        await this.requestLogin();
+      }
+    },
     detectLocale() {
       let locale;
       if (this.storeLocaleFromVueX) {
@@ -380,6 +631,9 @@ export default {
     },
     hideError() {
       this.$store.commit('showGlobalError', null);
+    },
+    isSearchPage() {
+      return this.$router.currentRoute.name === 'search';
     }
   }
 };
@@ -392,3 +646,12 @@ export default {
 @import "./theme/page.scss";
 @import "./theme/custom.scss";
 </style>
+<style lang="scss" scoped>
+.lang-item > .dropdown-item {
+  display: flex;
+  > .title {
+    flex: 1;
+  }
+}
+</style>
+
diff --git a/src/components/RootStats.vue b/src/components/RootStats.vue
index 821a57d8a..31acca784 100644
--- a/src/components/RootStats.vue
+++ b/src/components/RootStats.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="root-stats">
+    <Url v-if="rootUrl" id="stacUrl" :url="rootUrl" :label="$t('source.locatedAt')" />
     <template v-if="hasConformances">
       <h4>{{ $t('source.conformanceClasses') }}</h4>
       <dl v-for="(classes, group) in conformances" :key="group">
@@ -35,16 +36,21 @@
 <script>
 import { formatKey } from "@radiantearth/stac-fields/helper";
 import { mapGetters, mapState } from "vuex";
+import Url from './Url.vue';
 import Utils from "../utils";
 
 export default {
   name: "RootStats",
   components: {
-    StatsChart: () => import('./metadata/StatsChart.vue')
+    StatsChart: () => import('./metadata/StatsChart.vue'),
+    Url
   },
   computed: {
     ...mapState(['conformsTo']),
     ...mapGetters(['root']),
+    rootUrl() {
+      return this.root ? this.root.getAbsoluteUrl() : null;
+    },
     hasConformances() {
       return Array.isArray(this.conformsTo) && this.conformsTo.length > 0;
     },
@@ -148,4 +154,4 @@ export default {
     column-count: 1;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Source.vue b/src/components/Source.vue
index 1e55f113d..a53f8ee76 100644
--- a/src/components/Source.vue
+++ b/src/components/Source.vue
@@ -1,44 +1,17 @@
 <template>
-  <div class="share mt-1">
+  <nav class="share">
     <b-button-group>
-      <b-button v-if="showRoot" size="sm" variant="outline-primary" id="popover-root-btn">
-        <b-icon-box /> <span class="button-label">{{ rootTitle }}</span>
-      </b-button>
       <b-button v-if="stacUrl" size="sm" variant="outline-primary" id="popover-link-btn" :title="$t('source.detailsAboutSource')">
-        <b-icon-link /> <span class="button-label">{{ $t('source.label') }}</span>
+        <b-icon-info-lg /><span class="button-label">{{ $t('source.label') }}</span>
       </b-button>
       <b-button size="sm" variant="outline-primary" id="popover-share-btn" :title="$t('source.share.withOthers')">
-        <b-icon-share /> <span class="button-label">{{ $t('source.share.label') }}</span>
+        <b-icon-share /><span class="button-label">{{ $t('source.share.title') }}</span>
       </b-button>
-      <b-dropdown size="sm" variant="outline-primary" right :title="$t('source.language.switch')">
-        <template #button-content>
-          <b-icon-flag /> <span class="button-label">{{ $t('source.language.label', {currentLanguage}) }}</span>
-        </template>
-        <b-dropdown-item
-          v-for="l of languages" :key="l.code" class="lang-item"
-          @click="switchLocale({locale: l.code, userSelected: true})"
-        >
-          <b-icon-check v-if="locale === l.code" />
-          <b-icon-blank v-else />
-          <span class="title">
-            <span :lang="l.code">{{ l.native }}</span>
-            <template v-if="l.global && l.global !== l.native"> / <span lang="en">{{ l.global }}</span></template>
-          </span>
-          <b-icon-exclamation-triangle v-if="supportsLanguageExt && (!l.ui || !l.data)" :title="l.ui ? $t('source.language.onlyUI') : $t('source.language.onlyData')" class="ml-2" />
-        </b-dropdown-item>
-      </b-dropdown>
     </b-button-group>
 
     <b-popover
-      v-if="showRoot" id="popover-root" target="popover-root-btn" triggers="focus"
-      placement="bottom" container="stac-browser" :title="rootTitle"
-    >
-      <RootStats />
-    </b-popover>
-
-    <b-popover
-      v-if="stacUrl" id="popover-link" target="popover-link-btn" triggers="focus"
-      placement="bottom" container="stac-browser" :title="$t('source.title')"
+      v-if="stacUrl" id="popover-link" custom-class="popover-large" target="popover-link-btn"
+      triggers="focus" placement="bottom" container="stac-browser" :title="$t('source.title')"
     >
       <template v-if="stac">
         <b-row v-if="stacId" class="stac-id">
@@ -63,45 +36,34 @@
       <Url id="stacUrl" :url="stacUrl" :label="$t('source.locatedAt')" />
     </b-popover>
 
-    <b-popover id="popover-share" target="popover-share-btn" triggers="focus" placement="bottom" container="stac-browser" :title="$t('source.share.title')">
+    <b-popover
+      id="popover-share" custom-class="popover-large" target="popover-share-btn" triggers="focus"
+      placement="bottom" container="stac-browser" :title="$t('source.share.title')"
+    >
       <Url id="browserUrl" :url="browserUrl()" :label="$t('source.share.sharePageWithOthers')" :open="false" />
       <template v-if="enableSocialSharing">
         <hr>
         <SocialSharing :text="sharingMessage" :title="title" :url="browserUrl()" />
       </template>
     </b-popover>
-  </div>
+  </nav>
 </template>
 
 <script>
-import { 
-  BIconBlank, BIconBox, BIconCheck, BIconExclamationTriangle, BIconFlag, BIconLink, BIconShare,
-  BDropdown, BDropdownItem, BPopover } from 'bootstrap-vue';
-import { mapActions, mapGetters, mapState } from 'vuex';
+import { BIconInfoLg, BIconShare, BPopover } from 'bootstrap-vue';
+import { mapState } from 'vuex';
 
 import Url from './Url.vue';
 
-import Utils from '../utils';
-import { getBest, prepareSupported } from '../locale-id';
 import CopyButton from './CopyButton.vue';
 import SocialSharing from './SocialSharing.vue';
 
-const LANGUAGE_EXT = 'https://stac-extensions.github.io/language/v1.*/schema.json';
-
 export default {
   name: "Source",
   components: {
-    BDropdown,
-    BDropdownItem,
-    BIconBlank,
-    BIconBox,
-    BIconCheck,
-    BIconExclamationTriangle,
-    BIconFlag,
-    BIconLink,
+    BIconInfoLg,
     BIconShare,
     BPopover,
-    RootStats: () => import('./RootStats.vue'),
     Url,
     CopyButton,
     SocialSharing,
@@ -122,92 +84,22 @@ export default {
     }
   },
   computed: {
-    ...mapState(['conformsTo', 'dataLanguages', 'locale', 'socialSharing', 'supportedLocales', 'uiLanguage', 'valid']),
-    ...mapGetters(['supportsExtension', 'root']),
+    ...mapState(['socialSharing', 'valid']),
     stacVersion() {
       return this.stac?.stac_version;
     },
     stacId() {
       return this.stac?.id;
     },
-    showRoot() {
-      if (!this.root) {
-        return false;
-      }
-      return (Array.isArray(this.conformsTo) && this.conformsTo.length > 0)
-        || Utils.isObject(this.root['stats:collections'])
-        || Utils.isObject(this.root['stats:catalogs'])
-        || Utils.isObject(this.root['stats:items']);
-    },
-    rootTitle() {
-      return Array.isArray(this.conformsTo) && this.conformsTo.length > 0 ? this.$t('index.api') : this.$t('index.catalog');
-    },
-    currentLanguage() {
-      let lang = this.languages.find(l => l.code === this.locale);
-      if (lang) {
-        return lang.native;
-      }
-      else {
-        return '-';
-      }
-    },
     enableSocialSharing() {
       return Array.isArray(this.socialSharing) && this.socialSharing.length > 0;
     },
     sharingMessage() {
       const url = window.location.toString();
       return this.$t('source.share.message', {title: this.title, url: url});
-    },
-    supportsLanguageExt() {
-      return this.supportsExtension(LANGUAGE_EXT);
-    },
-    languages() {
-      let languages = [];
-
-      // Add all UI languages
-      for(let code of this.supportedLocales) {
-        languages.push({
-          code,
-          native: this.$t(`languages.${code}.native`),
-          global: this.$t(`languages.${code}.global`),
-          ui: true
-        });
-      }
-
-      // Add missing data languages
-      for(let lang of this.dataLanguages) {
-        if (!Utils.isObject(lang) || !lang.code || this.supportedLocales.includes(lang.code)) {
-          continue;
-        }
-        let newLang = {
-          code: lang.code
-        };
-        newLang.native = lang.name || lang.alternate || lang.code;
-        newLang.global = lang.alternate || lang.name || lang.code;
-        newLang.data = true;
-        languages.push(newLang);
-      }
-
-      if (this.supportsExtension(LANGUAGE_EXT)) {
-        // Determine which languages are complete
-        const uiSupported = prepareSupported(this.supportedLocales);
-        const dataSupported = prepareSupported(this.dataLanguages.map(l => l.code));
-        for(let l of languages) {
-          if (!l.ui) {
-            l.ui = Boolean(getBest(uiSupported, l.code, null));
-          }
-          if (!l.data) {
-            l.data = Boolean(getBest(dataSupported, l.code, null));
-          }
-        }
-      }
-      
-      const collator = new Intl.Collator(this.uiLanguage);
-      return languages.sort((a,b) => collator.compare(a.global, b.global));
     }
   },
   methods: {
-    ...mapActions(['switchLocale']),
     browserUrl() {
       return window.location.toString();
     }
@@ -215,31 +107,17 @@ export default {
 };
 </script>
 
-<style lang="scss">
-#popover-link, #popover-root, #popover-share {
-  width: 80%;
-  max-width: 800px;
-
-  .popover-body {
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: 80vh;
-  }
+<style lang="scss" scoped>
+.share {
+  display: flex;
+  gap: 0.25rem;
 }
-
+</style>
+<style lang="scss">
 #popover-link .stac-id .btn-sm,
 #popover-link .stac-valid .btn-sm {
     padding-top: 0.1rem;
     padding-bottom: 0.1rem;
     font-size: 0.7rem;
 }
-
-</style>
-<style lang="scss" scoped>
-.lang-item > .dropdown-item {
-  display: flex;
-  > .title {
-    flex: 1;
-  }
-}
 </style>
diff --git a/src/components/StacHeader.vue b/src/components/StacHeader.vue
deleted file mode 100644
index bd4009a8c..000000000
--- a/src/components/StacHeader.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-  <b-row>
-    <b-col md="12">
-      <Source class="float-right" :title="title" :stacUrl="url" :stac="data" />
-      <h1>
-        <template v-if="icon">
-          <img :src="icon.href" :alt="icon.title" :title="icon.title" class="icon mr-2">
-        </template>
-        <span class="title">{{ title }}</span>
-      </h1>
-      <p class="lead" v-if="!isStacChooser()">
-        <i18n v-if="containerLink" tag="span" path="in" class="in mr-3">
-          <template #catalog><StacLink :data="containerLink" /></template>
-        </i18n>
-        <b-button-group>
-          <b-button v-if="back" :to="selfBrowserLink" :title="$t('goBack.description', {type})" variant="outline-primary" size="sm">
-            <b-icon-arrow-left /> <span class="button-label prio">{{ $t('goBack.label') }}</span>
-          </b-button>
-          <b-button v-if="parentLink" :to="toBrowserPath(parentLink.href)" :title="parentLinkTitle" variant="outline-primary" size="sm">
-            <b-icon-arrow-90deg-up /> <span class="button-label prio">{{ $t('goToParent.label') }}</span>
-          </b-button>
-          <b-button v-if="collectionLink" :to="toBrowserPath(collectionLink.href)" :title="collectionLinkTitle" variant="outline-primary" size="sm">
-            <b-icon-folder-symlink /> <span class="button-label prio">{{ $t('goToCollection.label') }}</span>
-          </b-button>
-          <b-button variant="outline-primary" size="sm" :title="$t('browse')" v-b-toggle.sidebar @click="$emit('enableSidebar')">
-            <b-icon-book /> <span class="button-label prio">{{ $t('browse') }}</span>
-          </b-button>
-          <b-button v-if="canSearch" variant="outline-primary" size="sm" :to="searchBrowserLink" :title="$t('search.title')" :pressed="isSearchPage()">
-            <b-icon-search /> <span class="button-label prio">{{ $t('search.title') }}</span>
-          </b-button>
-          <b-button v-if="canAuthenticate" variant="outline-primary" size="sm" @click="logInOut" :title="authTitle">
-            <component :is="authIcon" /> <span class="button-label">{{ authLabel }}</span>
-          </b-button>
-        </b-button-group>
-      </p>
-    </b-col>
-  </b-row>
-</template>
-
-<script>
-import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
-import Source from './Source.vue';
-import StacLink from './StacLink.vue';
-import { BIconArrow90degUp, BIconArrowLeft, BIconBook, BIconFolderSymlink, BIconSearch, BIconLock, BIconUnlock } from "bootstrap-vue";
-import STAC from '../models/stac';
-import Utils from '../utils';
-
-export default {
-  name: 'StacHeader',
-  components: {
-    BIconArrow90degUp,
-    BIconArrowLeft,
-    BIconBook,
-    BIconFolderSymlink,
-    BIconSearch,
-    BIconLock,
-    BIconUnlock,
-    StacLink,
-    Source
-  },
-  computed: {
-    ...mapState(['allowSelectCatalog', 'catalogUrl', 'data', 'url', 'title']),
-    ...mapGetters(['canSearch', 'root', 'parentLink', 'collectionLink', 'toBrowserPath']),
-    ...mapGetters('auth', { authMethod: 'method' }),
-    ...mapGetters('auth', ['canAuthenticate', 'isLoggedIn']),
-    authIcon() {
-      return this.isLoggedIn ? 'b-icon-unlock' : 'b-icon-lock';
-    },
-    authTitle() {
-      return this.authMethod.getButtonTitle();
-    },
-    authLabel() {
-      return this.isLoggedIn ? this.authMethod.getLogoutLabel() : this.authMethod.getLoginLabel();
-    },
-    back() {
-      return this.$route.name === 'validation';
-    },
-    selfBrowserLink() {
-      return this.toBrowserPath(this.url);
-    },
-    type() {
-      if (this.data instanceof STAC) {
-        if (this.data.isItem()) {
-          return this.$tc('stacItem');
-        }
-        else if (this.data.isCollection()) {
-          return this.$tc(`stacCollection`);
-        }
-        else if (this.data.isCatalog()) {
-          return this.$tc(`stacCatalog`);
-        }
-        else if (Utils.hasText(this.data.type)) {
-          return this.data.type;
-        }
-      }
-      return null;
-    },
-    collectionLinkTitle() {
-      if (this.collectionLink && Utils.hasText(this.collectionLink.title)) {
-        return this.$t('goToCollection.descriptionWithTitle', this.collectionLink);
-      }
-      else {
-        return this.$t('goToCollection.description');
-      }
-    },
-    parentLinkTitle() {
-      if (this.parentLink && Utils.hasText(this.parentLink.title)) {
-        return this.$t('goToParent.descriptionWithTitle', this.parentLink);
-      }
-      else {
-        return this.$t('goToParent.description');
-      }
-    },
-    icon() {
-      if (this.data instanceof STAC) {
-        let icons = this.data.getIcons();
-        if (icons.length > 0) {
-          return icons[0];
-        }
-      }
-      return null;
-    },
-    searchBrowserLink() {
-      if (!this.canSearch) {
-        return null;
-      }
-      let searchLink;
-      if (this.data instanceof STAC && !this.data.equals(this.root)) {
-        searchLink = this.data.getSearchLink();
-      }
-      if (searchLink) {
-        return `/search${this.data.getBrowserPath()}`;
-      }
-      else if (this.root && this.allowSelectCatalog) {
-        return `/search${this.root.getBrowserPath()}`;
-      }
-      return '/search';
-    },
-    containerLink() {
-      // Check two cases where this page is the root...
-      if (this.catalogUrl && this.url === this.catalogUrl) {
-        return null;
-      }
-      if (this.root) {
-        if (Utils.equalUrl(this.root.getAbsoluteUrl(), this.url)) {
-          return null;
-        }
-        else {
-          return {
-            href: this.root.getAbsoluteUrl(),
-            rel: 'root',
-            title: STAC.getDisplayTitle(this.root)
-          };
-        }
-      }
-      return this.collectionLink || this.parentLink;
-    }
-  },
-  methods: {
-    ...mapMutations('auth', ['addAction']),
-    ...mapActions('auth', ['requestLogin', 'requestLogout']),
-    isSearchPage() {
-      return this.$router.currentRoute.name === 'search';
-    },
-    isStacChooser() {
-      return this.$router.currentRoute.name === 'choose';
-    },
-    async logInOut() {
-      if (this.url) {
-        this.addAction(() => this.$store.dispatch("load", {
-          url: this.url,
-          show: true,
-          force: true,
-          noRetry: true
-        }));
-      }
-      if (this.isLoggedIn) {
-        await this.requestLogout();
-      }
-      else {
-        await this.requestLogin();
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-h1 {
-  word-break: break-word;
-}
-</style>
diff --git a/src/i18n.js b/src/i18n.js
index 8a9295a78..d34010ef4 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -7,6 +7,7 @@ import Utils from './utils';
 Vue.use(VueI18n);
 
 export const API_LANGUAGE_CONFORMANCE = ['https://api.stacspec.org/v1.*/language'];
+export const STAC_LANGUAGE_EXT = 'https://stac-extensions.github.io/language/v1.*/schema.json'
 
 const LOCALE_CONFIG = {};
 
diff --git a/src/locales/en/texts.json b/src/locales/en/texts.json
index 5e0e20b0c..e20645ecf 100644
--- a/src/locales/en/texts.json
+++ b/src/locales/en/texts.json
@@ -132,7 +132,7 @@
   "in": "in {catalog}",
   "index": {
     "api": "API",
-    "catalog": "Catalog",
+    "catalog": "Static Catalog",
     "load": "Load",
     "selectStacIndex": "... or select one from {stacIndex}:",
     "specifyCatalog": "Please specify a STAC Catalog or API...",
@@ -267,6 +267,7 @@
     "title": "Search",
     "useInItemSearch": "Open Collection in Item Search | Open {count} Collections in Item Search"
   },
+  "server": "Server",
   "showMore": "Show more...",
   "sidebar": {
     "switchCatalog": "Switch Catalog"
diff --git a/src/store/index.js b/src/store/index.js
index ea439247f..b44bf059b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -99,8 +99,6 @@ function getStore(config, router) {
         }
       },
 
-      displayCatalogTitle: (state, getters) => STAC.getDisplayTitle(getters.root, state.catalogTitle),
-
       isCollection: state => state.data?.isCollection() || false,
       isCatalog: state => state.data?.isCatalog() || false,
       isCatalogLike: state => state.data?.isCatalogLike() || false,
@@ -109,20 +107,20 @@ function getStore(config, router) {
       root: (_, getters) => getters.getStac(getters.rootLink),
 
       rootLink: state => {
-        let link = state.data?.getStacLinkWithRel('root');
+        if (state.catalogUrl) {
+          return Utils.createLink(state.catalogUrl, 'root', state.catalogTitle);
+        }
+        const link = state.data?.getStacLinkWithRel('root');
         if (link) {
           return link;
         }
-        else if (state.catalogUrl) {
-          return Utils.createLink(state.catalogUrl, 'root');
-        }
         else if (state.url && state.data instanceof STAC && state.data.getLinksWithRels(['conformance', 'service-desc', 'service-doc', 'data', 'search']).length > 0) {
-          return Utils.createLink(state.url, 'root');
+          return Utils.createLink(state.url, 'root', state.title);
         }
         else if (state.url) {
           // Fallback: If we detect OGC API like paths, try to guess the paths
-          let uri = URI(state.url);
-          let path = uri.segment(-2);
+          const uri = URI(state.url);
+          const path = uri.segment(-2);
           if (['collections', 'items'].includes(path)) {
             uri.segment(-1, "");
             uri.segment(-1, "");
@@ -130,7 +128,7 @@ function getStore(config, router) {
               uri.segment(-1, "");
               uri.segment(-1, "");
             }
-            return Utils.createLink(uri.toString(), 'root');
+            return Utils.createLink(uri.toString(), 'root', state.catalogTitle);
           }
         }
         return null;
diff --git a/src/theme/page.scss b/src/theme/page.scss
index 4b3cb8389..88447d3a7 100644
--- a/src/theme/page.scss
+++ b/src/theme/page.scss
@@ -1,264 +1,296 @@
-html, body {
-    height: 100%;
-    width: 100%;
+html,
+body {
+  height: 100%;
+  width: 100%;
 }
 
 body {
-    margin-top: $header-margin;
+  margin-top: $header-margin;
 }
 
 #stac-browser {
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-    height: 100%;
-    min-height: 100%;
-    gap: $block-margin;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  gap: $block-margin;
+
+  @include media-breakpoint-only(xxxl) {
+    max-width: 75vw;
+  }
 
-    @include media-breakpoint-only(xxxl) {
-        max-width: 75vw;
-    }
+  > header {
+    .site {
+      border-bottom: 3px solid map-get($theme-colors, "primary");
 
-    > header {
-        padding-top: $block-margin;
+      > .col-md-12 {
+        > .title {
+          font-size: 1.5rem;
+          font-weight: 600;
+        }
 
-        .lead {
-            color: map-get($theme-colors, 'secondary');
+        .logo {
+          max-height: $logo-image-height;
         }
+      }
     }
-    .logo {
-        @if $logo == 'image' {
-            // Hide text
-            color: transparent;
-            font-size: 0;
-            // Show image
-            background-image: url($logo-image);
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: contain;
-            height: $logo-image-height;
-            margin-bottom: $block-margin;
-        } @else if $logo == 'none' {
-            display: none;
+    .site,
+    .page {
+      padding: $block-margin 0;
+
+      > .col-md-12 {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+
+        > .title {
+          word-break: break-word;
+          display: flex;
+          flex-grow: 1;
+          margin: 0;
+          padding: 0;
+          align-items: center;
+          gap: 1rem;
+
+          h1, h2 {
+            margin: 0;
+            padding: 0;
+          }
         }
+      }
     }
-    > main {
-        flex: 1;
-    }
-    > footer {
-        padding-bottom: $block-margin;
-        text-align: center;
-    }
+  }
+  > main {
+    flex: 1;
+  }
+  > footer {
+    padding-bottom: $block-margin;
+    text-align: center;
+  }
 
-    .map {
-        height: 350px;
-        background-color: transparent;
-        @include border-radius($border-radius);
-        position: relative;
-        z-index: 0;
+  .popover-large {
+    width: 80%;
+    max-width: 800px;
+
+    .popover-body {
+      overflow-y: auto;
+      overflow-x: hidden;
+      max-height: 80vh;
     }
+  }
+
+  .map {
+    height: 350px;
+    background-color: transparent;
+    @include border-radius($border-radius);
+    position: relative;
+    z-index: 0;
+  }
 
+  h1 {
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    font-size: 2.2rem;
+  }
+  @include media-breakpoint-down(xl) {
     h1 {
-        font-weight: 700;
-        display: flex;
-        align-items: center;
-        font-size: 2.2rem;
-    }
-    @include media-breakpoint-down(xl) {
-      h1 {
-          font-size: 2rem;
-      }
+      font-size: 2rem;
     }
-    @include media-breakpoint-down(md) {
-      h1 {
-          font-size: 1.75rem;
-      }
+  }
+  @include media-breakpoint-down(md) {
+    h1 {
+      font-size: 1.75rem;
     }
+  }
 
-    h2 {
-        color: map-get($theme-colors, 'secondary');
-        font-weight: 600;
-    }
+  h2 {
+    color: map-get($theme-colors, "secondary");
+    font-weight: 600;
+  }
 
-    .maps-preview {
-        position: static;
+  .maps-preview {
+    position: static;
 
-        .nav-pills {
-            margin: 0;
-            padding: 0;
-            
-            > li {
-                margin: 0 0.5rem;
-                &:only-child {
-                    display: none;
-                }
-                &:first-of-type {
-                    margin-top: 0.5rem;
-                }
-                &:last-of-type {
-                    margin-bottom: 0.5rem;
-                }
-            }
+    .nav-pills {
+      margin: 0;
+      padding: 0;
+
+      > li {
+        margin: 0 0.5rem;
+        &:only-child {
+          display: none;
+        }
+        &:first-of-type {
+          margin-top: 0.5rem;
+        }
+        &:last-of-type {
+          margin-bottom: 0.5rem;
         }
+      }
     }
+  }
 
-    > .popover .items .card-columns.count-1 {
-        column-count: 1;
-    }
+  > .popover .items .card-columns.count-1 {
+    column-count: 1;
+  }
 
-    .service {
-      &.bsky {
-          @include button-variant(#1185fe, #1185fe);
-      }
-      &.mastodon {
-          @include button-variant(#6364FF, #6364FF);
-      }
-      &.x {
-          @include button-variant(#000000, #000000);
-      }
+  .service {
+    &.bsky {
+      @include button-variant(#1185fe, #1185fe);
     }
-
-    .icon {
-        max-width: $max-icon-size;
-        max-height: $max-icon-size;
+    &.mastodon {
+      @include button-variant(#6364ff, #6364ff);
     }
-    h1 > .icon {
-        max-width: 1.2em;
-        max-height: 1.2em;
+    &.x {
+      @include button-variant(#000000, #000000);
     }
+  }
 
-    .global-error {
-        position: fixed;
-        bottom: 0;
-        right: 0;
-        z-index: 5000;
-        opacity: 0.9;
-        max-width: 50vh;
-        margin: 1rem;
-    }
+  .icon {
+    max-width: $max-icon-size;
+    max-height: $max-icon-size;
+  }
+  h1 > .icon {
+    max-width: 1.2em;
+    max-height: 1.2em;
+  }
 
-    abbr[title], abbr[data-original-title] {
-        text-decoration: none;
-        border-bottom: 1px dotted $body-color;
-    }
+  .global-error {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 5000;
+    opacity: 0.9;
+    max-width: 50vh;
+    margin: 1rem;
+  }
 
-    [class*='col'] {
-        position: static;
-    }
-    .card {
-        background: transparent;
-    }
+  abbr[title],
+  abbr[data-original-title] {
+    text-decoration: none;
+    border-bottom: 1px dotted $body-color;
+  }
 
-    input:invalid {
-        border-color: map-get($theme-colors, "danger");
-    }
+  [class*="col"] {
+    position: static;
+  }
+  .card {
+    background: transparent;
+  }
 
-    a.list-group-item {
-        color: $link-color;
-        text-decoration: $link-decoration;
+  input:invalid {
+    border-color: map-get($theme-colors, "danger");
+  }
 
-        &:hover {
-            color: $link-hover-color;
-            text-decoration: $link-hover-decoration;
-        }
+  a.list-group-item {
+    color: $link-color;
+    text-decoration: $link-decoration;
+
+    &:hover {
+      color: $link-hover-color;
+      text-decoration: $link-hover-decoration;
     }
+  }
 
-    .btn-group, .btn-group-vertical {
-        .btn-primary, .btn-secondary {
-            border-color: darken(map-get($theme-colors, "primary"), 15%);
-            &:hover {
-                border-color: darken(map-get($theme-colors, "primary"), 30%);
-            }
-        }
-        .btn-secondary {
-            background-color: lighten(desaturate(map-get($theme-colors, "primary"), 50%), 20%);
-            &:hover {
-                background-color: darken(map-get($theme-colors, "primary"), 5%);
-            }
-        }
+  .btn-group,
+  .btn-group-vertical {
+    .btn-primary,
+    .btn-secondary {
+      border-color: darken(map-get($theme-colors, "primary"), 15%);
+      &:hover {
+        border-color: darken(map-get($theme-colors, "primary"), 30%);
+      }
     }
-    .btn-group-vertical.actions {
-        .btn {
-            text-align: left
-        }
+    .btn-secondary {
+      background-color: lighten(
+        desaturate(map-get($theme-colors, "primary"), 50%),
+        20%
+      );
+      &:hover {
+        background-color: darken(map-get($theme-colors, "primary"), 5%);
+      }
     }
-
+  }
+  .btn-group-vertical.actions {
     .btn {
-        &.disabled,
-        &:disabled {
-            cursor: not-allowed;
-            filter: grayscale(1);
-        }
+      text-align: left;
     }
+  }
 
-    .button-label {
-        display: none;
+  .btn {
+    &.disabled,
+    &:disabled {
+      cursor: not-allowed;
+      filter: grayscale(1);
     }
-    @include media-breakpoint-up(sm) {
-        .button-label.prio {
-            display: inline;
-        }
+  }
+
+  .button-label {
+    display: none;
+  }
+  @include media-breakpoint-up(lg) {
+    .button-label {
+      display: inline-block;
+      margin-left: 0.25rem;
     }
-    @include media-breakpoint-up(md) {
-        .button-label {
-            display: inline;
-        }
+  }
+
+  .expandable-card > .card-header {
+    padding: 0;
+    background-color: transparent;
+  }
+  .expandable-card > .card-header > .btn,
+  .mimic-expandable-card > .list-group-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    background-color: rgba(0, 0, 0, 0.03);
+
+    > .title {
+      text-align: left;
+      flex-grow: 9;
     }
+    > .badges {
+      flex-grow: 1;
+      text-align: right;
 
-    .expandable-card > .card-header {
-        padding: 0;
-        background-color: transparent;
+      .badge {
+        margin: 0.125rem;
+        text-transform: uppercase;
+      }
     }
-    .expandable-card > .card-header > .btn,
-    .mimic-expandable-card > .list-group-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 0.25rem;
-        padding: 0.5rem;
-        background-color: rgba(0,0,0,0.03);
-        
-        > .title {
-            text-align: left;
-            flex-grow: 9;
-        }
-        > .badges {
-            flex-grow: 1;
-            text-align: right;
-
-            .badge {
-                margin: 0.125rem;
-                text-transform: uppercase;
-            }
-        }
+  }
+
+  .items,
+  .catalogs {
+    > .list {
+      position: relative;
     }
 
-    
-    .items, .catalogs {
-        > .list {
-            position: relative;
-        }
-    
-        > header {
-            margin-bottom: 0.5rem;
-
-            > h2.title {
-                vertical-align: middle;
-                display: inline-block;
-                margin-bottom: 0.25rem;
-            }
-            .badge {
-                vertical-align: middle;
-            }
-            .btn-group {
-                vertical-align: middle;
-                margin: 0.25rem 0;
-            }
-        }
+    > header {
+      margin-bottom: 0.5rem;
+
+      > h2.title {
+        vertical-align: middle;
+        display: inline-block;
+        margin-bottom: 0.25rem;
+      }
+      .badge {
+        vertical-align: middle;
+      }
+      .btn-group {
+        vertical-align: middle;
+        margin: 0.25rem 0;
+      }
     }
+  }
 }
 
-@import '~vue-multiselect/dist/vue-multiselect.min.css';
+@import "~vue-multiselect/dist/vue-multiselect.min.css";
 
 // Datepicker related style
 $default-color: map-get($theme-colors, "secondary");
@@ -266,7 +298,6 @@ $primary-color: map-get($theme-colors, "primary");
 
 // Multiselect related style
 #stac-browser {
-  
   .multiselect__tags:focus-within {
     border-color: #48cce1;
     outline: 0;
@@ -277,7 +308,7 @@ $primary-color: map-get($theme-colors, "primary");
     color: #495057;
     border-color: #495057 transparent transparent;
   }
-  
+
   .multiselect__tags,
   .multiselect__single {
     border-color: #ccc;
@@ -315,7 +346,7 @@ $primary-color: map-get($theme-colors, "primary");
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(0,0,0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   margin: auto;
   display: flex;
   justify-content: center;
@@ -323,12 +354,12 @@ $primary-color: map-get($theme-colors, "primary");
   z-index: 9999;
 
   > form {
-      min-width: 200px;
-      width: 50vw;
-      border-radius: $border-radius;
+    min-width: 200px;
+    width: 50vw;
+    border-radius: $border-radius;
 
-      > .card {
-          background-color: #fff;
-      }
+    > .card {
+      background-color: #fff;
+    }
   }
 }
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index b5b27b713..0bc24fe36 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -3,11 +3,7 @@
 // Most of the variables below are Bootstrap variables, see https://getbootstrap.com/docs/4.0/getting-started/theming/ for details.
 // For simplicity we just provide some common options as default, but you can override all Bootstrap Sass variables.
 
-// Header / Logo, either image (see below), text (shows CATALOG_TITLE) or none
-$logo: 'none'; 
-// If 'image' has been chosen above
-$logo-image: 'https://raw.githubusercontent.com/radiantearth/stac-site/master/images/logo/stac-030-long.png';
-$logo-image-height: 100px;
+$logo-image-height: 2rem;
 
 // Background and text default colors
 $body-bg: white;
@@ -70,4 +66,4 @@ $header-margin: 0px;
 $border-radius: 0.25rem;
 
 // Max. icon size
-$max-icon-size: 32px;
\ No newline at end of file
+$max-icon-size: 32px;
diff --git a/src/utils.js b/src/utils.js
index 3e8dee3eb..9ce37d936 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -444,8 +444,8 @@ export default class Utils {
     return searchterm[fn](term => target.includes(term));
   }
 
-  static createLink(href, rel) {
-    return { href, rel };
+  static createLink(href, rel, title) {
+    return { href, rel, title };
   }
 
   static supportsExtension(data, pattern) {
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
index 4c6e611e4..745a38aba 100644
--- a/src/views/Catalog.vue
+++ b/src/views/Catalog.vue
@@ -10,6 +10,7 @@
             <Description :description="data.description" />
           </ReadMore>
           <Keywords v-if="Array.isArray(data.keywords) && data.keywords.length > 0" :keywords="data.keywords" class="mb-3" />
+          <CollectionLink v-if="collectionLink" :link="collectionLink" />
           <section v-if="isCollection" class="metadata mb-4">
             <b-row v-if="licenses">
               <b-col md="4" class="label">{{ $t('catalog.license') }}</b-col>
@@ -38,13 +39,12 @@
         <Assets v-if="hasItemAssets && !hasItems" :assets="data.item_assets" :context="data" :definition="true" />
         <Providers v-if="providers" :providers="providers" />
         <Metadata class="mb-4" :type="data.type" :data="data" :ignoreFields="ignoredMetadataFields" />
-        <CollectionLink v-if="collectionLink" :link="collectionLink" />
         <Links v-if="linkPosition === 'right'" :title="$t('additionalResources')" :links="additionalLinks" :context="data" />
       </b-col>
       <b-col class="catalogs-container" v-if="hasCatalogs">
         <Catalogs :catalogs="catalogs" :hasMore="!!nextCollectionsLink" @loadMore="loadMoreCollections" />
       </b-col>
-      <b-col class="items-container" v-if="hasItems">
+      <b-col class="items-container" v-if="hasItems || hasItemAssets">
         <Items
           :stac="data" :items="items" :api="isApi"
           :showFilters="showFilters" :apiFilters="filters"