diff --git a/design.config.js b/design.config.js
index 6831227c..1b06facd 100644
--- a/design.config.js
+++ b/design.config.js
@@ -1,6 +1,12 @@
 const path = require('path')
 
-const icons = ['office-building']
+const icons = [
+  'office-building',
+  'chevron-left',
+  'chevron-right',
+  'chevron-double-left',
+  'chevron-double-right',
+]
 
 const iconsRoot = path.join(
   path.dirname(require.resolve('@mdi/svg/package.json')),
diff --git a/hooks/use-sync-url-params-with-store/index.js b/hooks/use-sync-url-params-with-store/index.js
index d05919b8..fd815b42 100644
--- a/hooks/use-sync-url-params-with-store/index.js
+++ b/hooks/use-sync-url-params-with-store/index.js
@@ -1,38 +1,64 @@
-import { useEffect, useCallback } from 'react'
+import { useEffect } from 'react'
 import { useRouter } from 'next/router'
 
-export const useSyncUrlParamsWithStore = (params) => {
+import useDebouncedEffect from 'hooks/use-debounced-effect'
+
+export const useSyncUrlParamsWithStore = (paramsInstance) => {
   const router = useRouter()
   const setUrlParams = () => {
-    const newParams = Array.from(params.entries()).filter(
+    const { schema, ...params } = paramsInstance
+
+    const newParams = Object.entries(params).filter(
       ([, value]) => value != null
     )
 
-    const query = Object.fromEntries(newParams)
-    router.push(
-      { pathname: router.pathname, query },
-      {
-        // asPath contains url params so we need to get rid of them
-        // and replace them with the new ones.
-        pathname: new URL(router.route, window.location.origin).pathname,
-        query,
-      },
-      { shallow: true }
+    const { pathname: pathnameUrl } = new URL(
+      router.asPath,
+      window.location.origin
+    )
+    const { pathname: pathnameAs } = new URL(
+      router.pathname,
+      window.location.origin
     )
+
+    const urlParams = new URLSearchParams(newParams)
+
+    urlParams.sort()
+
+    if (
+      `${window.location.pathname}${window.location.search}` !==
+      `${pathnameUrl}?${urlParams.toString()}`
+    ) {
+      const updateParams =
+        window.location.search === '' ? router.replace : router.push
+
+      updateParams(
+        {
+          pathname: `${pathnameAs}`,
+          query: { ...router.query, ...urlParams },
+        },
+        `${pathnameUrl}?${urlParams.toString()}`,
+
+        { shallow: true }
+      )
+    }
   }
 
-  const handleRouteChange = useCallback(
-    (nextUrl) => {
-      const { searchParams } = new URL(nextUrl, window.location.origin)
-      Array.from(searchParams.entries()).forEach(([key, value]) => {
+  const handleRouteChange = (nextUrl) => {
+    const { schema, ...params } = paramsInstance
+    const { searchParams } = new URL(nextUrl, window.location.origin)
+
+    const newParams = Array.from(searchParams.entries()).filter(
+      ([key, value]) =>
         // We want to compare like it because URLSearch params doesn't
         // automatically convert param (e.g. size) to number.
         // eslint-disable-next-line eqeqeq
-        if (params.has(key) && params[key] != value) params[key] = value
-      })
-    },
-    [params]
-  )
+        params[key] != value
+    )
+
+    if (newParams.length)
+      paramsInstance.changeParams(Object.fromEntries(newParams))
+  }
 
   useEffect(() => {
     router.events.on('routeChangeComplete', handleRouteChange)
@@ -42,9 +68,15 @@ export const useSyncUrlParamsWithStore = (params) => {
   }, [])
 
   // whenever any param changes in store reflect it to the URL
-  useEffect(() => {
-    setUrlParams()
-  }, Array.from(params.values()))
+  useDebouncedEffect(
+    () => {
+      setUrlParams()
+    },
+    Object.keys(paramsInstance)
+      .sort()
+      .filter((key) => key !== 'schema')
+      .map((key) => paramsInstance[key])
+  )
 }
 
 export default useSyncUrlParamsWithStore
diff --git a/main/hooks.js b/main/hooks.js
deleted file mode 100644
index 11df8d62..00000000
--- a/main/hooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { join } from 'path'
-
-import { useEffect } from 'react'
-import { useRouter } from 'next/router'
-
-const useRedirect = (
-  routePath,
-  actualPath = routePath,
-  { replace = true } = {}
-) => {
-  const router = useRouter()
-
-  useEffect(() => {
-    // Do not need to redirect
-    if (!routePath) return
-
-    const pathname = join(router.pathname, routePath)
-    const asPath = join(router.asPath, actualPath)
-    if (replace) router.replace(pathname, asPath)
-    else router.push(pathname, asPath)
-  }, [])
-}
-
-// Keeping default way to import hooks
-// eslint-disable-next-line import/prefer-default-export
-export { useRedirect }
diff --git a/modules/authors-box/index.jsx b/modules/authors-box/index.jsx
new file mode 100644
index 00000000..03f4ac5e
--- /dev/null
+++ b/modules/authors-box/index.jsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { Button, Link } from '@oacore/design'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './styles.module.css'
+
+const AuthorLink = ({ name }) => (
+  <Link
+    href={`https://core.ac.uk/search?q=author:(${name})`}
+    className={styles.authorLink}
+  >
+    {name.replace(',', ' ')}
+  </Link>
+)
+
+const Authors = ({ authors }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  if (authors.length <= 3) {
+    return authors.map((author, index) => (
+      <>
+        <AuthorLink name={author.name} />
+        {index < authors.length - 1 ? ', ' : ''}
+      </>
+    ))
+  }
+
+  return (
+    <>
+      <AuthorLink name={authors[0].name} />,{' '}
+      <AuthorLink name={authors[1].name} />,{' '}
+      <span
+        className={classNames.use(
+          styles.moreAuthorsBox,
+          isExpanded && styles.moreAuthorsExpanded
+        )}
+      >
+        <Button
+          className={styles.showMore}
+          aria-controls="more-authors"
+          onClick={() => setIsExpanded(true)}
+          aria-hidden={isExpanded}
+          title="Show more authors"
+        >
+          + {authors.length - 3} MORE
+        </Button>
+        <span
+          id="more-authors"
+          aria-hidden={!isExpanded}
+          className={styles.moreAuthors}
+        >
+          {authors.slice(2, -1).map((author) => (
+            <>
+              <AuthorLink name={author.name} />,{' '}
+            </>
+          ))}
+        </span>
+      </span>
+      <AuthorLink name={authors[authors.length - 1].name} />
+    </>
+  )
+}
+
+export default Authors
diff --git a/modules/authors-box/styles.module.css b/modules/authors-box/styles.module.css
new file mode 100644
index 00000000..dfab0f71
--- /dev/null
+++ b/modules/authors-box/styles.module.css
@@ -0,0 +1,36 @@
+.author-link {
+  color: var(--gray-800);
+  text-decoration: underline;
+}
+
+.show-more {
+  position: relative;
+  padding: 0 0.25rem;
+  margin: 0 0.25rem;
+  color: var(--gray-700);
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: var(--gray-100);
+}
+
+.show-more::after {
+  position: absolute;
+  right: -0.05rem;
+  content: ',';
+}
+
+.more-authors {
+  display: none;
+}
+
+.more-authors-box {
+  display: contents;
+}
+
+.more-authors-expanded .show-more {
+  display: none;
+}
+
+.more-authors-expanded .more-authors {
+  display: inline-block;
+}
diff --git a/modules/repositories-map/index.jsx b/modules/map/index.jsx
similarity index 80%
rename from modules/repositories-map/index.jsx
rename to modules/map/index.jsx
index 2b7e75d4..88089baf 100644
--- a/modules/repositories-map/index.jsx
+++ b/modules/map/index.jsx
@@ -1,13 +1,11 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
-import { ProgressSpinner } from '@oacore/design'
 import { classNames } from '@oacore/design/lib/utils'
 
 import styles from './styles.module.css'
 
 const Map = dynamic(() => import('./map'), {
   ssr: false,
-  loading: () => <ProgressSpinner className={styles.loader} />,
 })
 
 const RepositoriesMap = React.memo(
diff --git a/modules/repositories-map/map.jsx b/modules/map/map.jsx
similarity index 69%
rename from modules/repositories-map/map.jsx
rename to modules/map/map.jsx
index 9f0ff839..6cad1d6c 100644
--- a/modules/repositories-map/map.jsx
+++ b/modules/map/map.jsx
@@ -16,7 +16,7 @@ const markerIcon = L.icon({
   popupAnchor: [0, -32],
 })
 
-const CustomMap = ({ dataProviders }) => {
+const CustomMap = ({ locations }) => {
   const mapContainerRef = useRef(null)
   const map = useRef(null)
 
@@ -34,7 +34,10 @@ const CustomMap = ({ dataProviders }) => {
     )
 
     map.current = L.map(mapContainerRef.current, {
-      center: centerPosition,
+      center:
+        locations.length > 1
+          ? centerPosition
+          : new L.LatLng(locations[0].latitude, locations[0].longitude),
       zoom: 2,
       maxBounds: [
         [-90, -180],
@@ -52,40 +55,30 @@ const CustomMap = ({ dataProviders }) => {
       icon: markerIcon,
     })
 
-    dataProviders
-      .filter(
-        ({ name, dataProviderLocation }) =>
-          dataProviderLocation != null &&
-          dataProviderLocation.latitude != null &&
-          dataProviderLocation.longitude != null &&
-          name
-      )
-      .forEach(({ id, name, dataProviderLocation }) => {
-        const marker = L.marker(
-          new L.LatLng(
-            dataProviderLocation.latitude,
-            dataProviderLocation.longitude
-          ),
-          {
-            title: name,
-            icon: markerIcon,
-          }
-        )
+    locations.forEach(({ name, href, latitude, longitude }) => {
+      const marker = L.marker(new L.LatLng(latitude, longitude), {
+        title: name,
+        icon: markerIcon,
+      })
+
+      if (href) {
         marker.bindPopup(
           `<a
-               href="https://core.ac.uk/search?q=repositories.id:(${id})"
+               href={href}
                target="_blank"
                rel="noopener noreferrer"
            >
             ${name}
            </a>`
         )
-        markers.addLayer(marker)
-      })
+      } else marker.bindPopup(name)
+
+      markers.addLayer(marker)
+    })
 
     map.current.addLayer(markers)
     return () => map.current.removeLayer(markers)
-  }, [dataProviders])
+  }, [locations])
 
   return <div ref={mapContainerRef} className={styles.map} />
 }
diff --git a/modules/repositories-map/styles.module.css b/modules/map/styles.module.css
similarity index 100%
rename from modules/repositories-map/styles.module.css
rename to modules/map/styles.module.css
diff --git a/modules/search-layout/index.js b/modules/search-layout/index.js
index 9a63c20c..2b357f49 100644
--- a/modules/search-layout/index.js
+++ b/modules/search-layout/index.js
@@ -1,12 +1,12 @@
-import Content from './content'
+import Sidebar from './sidebar'
 import Result from './result'
-import Results from './results'
+import Main from './main'
 import Search from './search'
 import ResultStats from './result-stats'
 
-Search.Content = Content
+Search.Sidebar = Sidebar
 Search.Result = Result
-Search.Results = Results
+Search.Main = Main
 Search.ResultStats = ResultStats
 
 export default Search
diff --git a/modules/search-layout/main.jsx b/modules/search-layout/main.jsx
new file mode 100644
index 00000000..6ff8475d
--- /dev/null
+++ b/modules/search-layout/main.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './styles.module.css'
+
+const Main = ({ children, className, tag: Tag = 'div', ...restProps }) => (
+  <Tag className={classNames.use(styles.main, className)} {...restProps}>
+    {children}
+  </Tag>
+)
+
+export default Main
diff --git a/modules/search-layout/results.jsx b/modules/search-layout/results.jsx
deleted file mode 100644
index c7a2be11..00000000
--- a/modules/search-layout/results.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { classNames } from '@oacore/design/lib/utils'
-
-import styles from './styles.module.css'
-
-const Results = ({ children, className, tag: Tag = 'div', ...restProps }) => (
-  <Tag
-    className={classNames.use(styles.searchResults, className)}
-    {...restProps}
-  >
-    {children}
-  </Tag>
-)
-
-export default Results
diff --git a/modules/search-layout/content.jsx b/modules/search-layout/sidebar.jsx
similarity index 62%
rename from modules/search-layout/content.jsx
rename to modules/search-layout/sidebar.jsx
index dbfb9196..ec6317cc 100644
--- a/modules/search-layout/content.jsx
+++ b/modules/search-layout/sidebar.jsx
@@ -4,14 +4,14 @@ import { Card } from '@oacore/design'
 
 import styles from './styles.module.css'
 
-const Content = ({ children, className, tag = 'div', ...restProps }) => (
+const Sidebar = ({ children, className, tag = 'div', ...restProps }) => (
   <Card
     tag={tag}
-    className={classNames.use(styles.content, className)}
+    className={classNames.use(styles.sidebar, className)}
     {...restProps}
   >
     {children}
   </Card>
 )
 
-export default Content
+export default Sidebar
diff --git a/modules/search-layout/styles.module.css b/modules/search-layout/styles.module.css
index 828e56c7..e5b15b74 100644
--- a/modules/search-layout/styles.module.css
+++ b/modules/search-layout/styles.module.css
@@ -5,14 +5,14 @@
   grid-auto-rows: auto;
 }
 
-.search-results {
+.main {
   display: flex;
   flex-direction: column;
   grid-column: 1;
   align-items: stretch;
 }
 
-.content {
+.sidebar {
   padding-top: 0;
   border: none;
   box-shadow: none;
@@ -50,20 +50,16 @@
     grid-auto-rows: auto;
   }
 
-  .search-results {
+  .main {
     display: contents;
   }
 
-  .content {
+  .sidebar {
+    display: contents;
     grid-column: 1;
-    grid-row: 2;
     padding-top: 1rem;
   }
 
-  .result-stats ~ .content {
-    grid-row: 3;
-  }
-
   .result {
     margin: 0;
   }
diff --git a/pages/_app.jsx b/pages/_app.jsx
index 8660de65..c5173b7d 100644
--- a/pages/_app.jsx
+++ b/pages/_app.jsx
@@ -36,10 +36,9 @@ class App extends NextApp {
   render() {
     const { Component, pageProps, statistics } = this.props
 
-    const { initialState, ...restPageProps } = pageProps || {}
     return (
-      <Main initialState={{ ...initialState, statistics }}>
-        <Component {...restPageProps} />
+      <Main initialState={{ statistics }}>
+        <Component {...pageProps} />
       </Main>
     )
   }
diff --git a/pages/data-providers/[data-provider-id].jsx b/pages/data-providers/[data-provider-id].jsx
new file mode 100644
index 00000000..f931ab61
--- /dev/null
+++ b/pages/data-providers/[data-provider-id].jsx
@@ -0,0 +1,133 @@
+import React, { useEffect, useRef } from 'react'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+
+import { useSyncUrlParamsWithStore } from 'hooks/use-sync-url-params-with-store'
+import { convertAndValidate } from 'utils/validation'
+import DataProvider, { schema } from 'store/data-provider'
+import { useStore, observe } from 'store'
+import DataProviderTemplate from 'templates/data-provider'
+
+export async function getServerSideProps({ query }) {
+  const id = query['data-provider-id']
+  const params = convertAndValidate({
+    params: Object.fromEntries(
+      Object.entries(query).filter(([, v]) => v != null)
+    ),
+    schema,
+  })
+
+  const { q, from, size } = params
+
+  const outputsPromise = DataProvider.fetchOutputs({
+    id,
+    q,
+    from,
+    size,
+  })
+  const metadataPromise = DataProvider.fetchMetadata({
+    id,
+  })
+
+  const [outputs, metadata] = await Promise.allSettled([
+    outputsPromise,
+    metadataPromise,
+  ])
+
+  return {
+    props: {
+      initialState: {
+        dataProvider: {
+          outputs: outputs.value,
+          metadata: metadata.value,
+          params,
+          id,
+        },
+      },
+    },
+  }
+}
+
+const DataProviderPage = observe(({ initialState }) => {
+  const router = useRouter()
+  const store = useStore(
+    initialState ?? {
+      initialState: {
+        dataProvider: {
+          id: router.query['data-provider-id'],
+        },
+      },
+    }
+  )
+  const { dataProvider } = store
+  const previousQuery = useRef(dataProvider.params.q)
+  const previousFrom = useRef(dataProvider.params.from)
+  const previousSize = useRef(dataProvider.params.size)
+
+  useSyncUrlParamsWithStore(dataProvider.params)
+
+  useEffect(() => {
+    // whenever query changes go back to first page
+    if (previousQuery.current !== dataProvider.params.q) {
+      dataProvider.params.changeParams({
+        size: 10,
+        from: 0,
+      })
+    }
+
+    const isLoadMore =
+      previousQuery.current === dataProvider.params.q &&
+      previousFrom.current === dataProvider.params.from &&
+      previousSize.current !== dataProvider.params.size
+
+    const hasChanged =
+      previousQuery.current !== dataProvider.params.q ||
+      previousFrom.current !== dataProvider.params.from ||
+      previousSize.current !== dataProvider.params.size
+
+    previousQuery.current = dataProvider.params.q
+    previousFrom.current = dataProvider.params.from
+    previousSize.current = dataProvider.params.size
+
+    if (hasChanged) dataProvider.loadOutputs({ loadMore: isLoadMore })
+  }, [
+    dataProvider.params.size,
+    dataProvider.params.from,
+    dataProvider.params.q,
+  ])
+
+  return (
+    <>
+      <Head>
+        <title>
+          {dataProvider.params.q
+            ? `Search "${dataProvider.params.q}" in ${dataProvider.metadata.name}`
+            : `${dataProvider.metadata.name}`}
+          Data providers search
+        </title>
+        <meta
+          name="description"
+          content={`Search over TODO works in ${dataProvider.metadata.name}.`}
+        />
+      </Head>
+      <DataProviderTemplate
+        outputs={dataProvider.outputs}
+        loadPage={dataProvider.loadPage}
+        metadata={dataProvider.metadata}
+        query={dataProvider.params.q}
+        setQuery={(q) => {
+          dataProvider.params.q = q
+        }}
+        from={dataProvider.params.from}
+        size={dataProvider.params.size}
+        // TODO: Get proper value from API
+        total={50000}
+        loading={dataProvider.loading}
+        basePath={`/data-providers/${dataProvider.id}`}
+        isLoadingMore={dataProvider.isLoadingMore}
+      />
+    </>
+  )
+})
+
+export default DataProviderPage
diff --git a/pages/data-providers/index.jsx b/pages/data-providers/index.jsx
index f6e75b14..13d24d14 100644
--- a/pages/data-providers/index.jsx
+++ b/pages/data-providers/index.jsx
@@ -35,8 +35,8 @@ export async function getServerSideProps({ query }) {
   }
 }
 
-const SearchPage = observe(() => {
-  const { dataProviders, statistics } = useStore()
+const SearchPage = observe(({ initialState }) => {
+  const { dataProviders, statistics } = useStore(initialState)
   const {
     params: { action, query, size },
     results,
@@ -65,9 +65,9 @@ const SearchPage = observe(() => {
   )
   const setQuery = useCallback(
     (q) => {
-      dataProviders.params.query = q
+      dataProviders.params.q = q
     },
-    [dataProviders.params.query]
+    [dataProviders.params.q]
   )
   const handleUrlChange = useCallback(
     (event) => {
@@ -82,7 +82,7 @@ const SearchPage = observe(() => {
         <title>{query ? `${query} - ` : ''}Data providers search</title>
         <meta
           name="description"
-          content={`Search over ${data.length} repositories and journals around the world`}
+          content={`Search over ${data.length} repositories and journals around the world.`}
         />
         {/* eslint-disable react/no-danger */}
         <script
diff --git a/store/data-provider.js b/store/data-provider.js
new file mode 100644
index 00000000..c2d88227
--- /dev/null
+++ b/store/data-provider.js
@@ -0,0 +1,99 @@
+import { observable, action } from 'mobx'
+
+import Params from './params'
+
+import apiRequest from 'api'
+
+export const schema = {
+  q: {
+    default: '',
+    convert: 'string',
+    validation: 'string',
+  },
+
+  from: {
+    default: 0,
+    validation: 'number',
+    convert: 'number',
+  },
+  size: {
+    default: 10,
+    validation: 'number',
+    convert: 'number',
+  },
+}
+
+class DataProvider {
+  @observable metadata
+
+  @observable id
+
+  @observable loading = false
+
+  @observable isLoadingMore = false
+
+  @observable params
+
+  @observable outputsData
+
+  @observable outputs
+
+  constructor({ id, outputs, metadata, params = {} }) {
+    this.id = id
+    this.params = new Params(params, schema)
+
+    if (!outputs) this.loadOutputs()
+    else this.outputs = outputs ?? []
+
+    if (!metadata) this.loadMetadata()
+    else this.metadata = metadata
+  }
+
+  static async fetchOutputs({ id, from, size, q, ...restParams }) {
+    const params = {
+      from,
+      size,
+      q,
+      ...restParams,
+    }
+
+    const { data } = await apiRequest(`/data-providers/${id}/works`, {
+      searchParams: params,
+    })
+    return data
+  }
+
+  static async fetchMetadata({ id }) {
+    const { data } = await apiRequest(`/data-providers/${id}`)
+    return data
+  }
+
+  @action
+  loadMetadata = async () => {
+    this.metadata = await DataProvider.fetchMetadata({ id: this.id })
+  }
+
+  @action
+  loadOutputs = async ({ loadMore = false } = {}) => {
+    this.loading = true
+    this.isLoadingMore = loadMore
+
+    this.outputs = (loadMore ? this.outputs : []).concat(
+      await DataProvider.fetchOutputs({
+        id: this.id,
+        from: loadMore
+          ? this.params.from + this.outputs.length
+          : this.params.from,
+        size: loadMore
+          ? this.params.size - this.outputs.length
+          : this.params.size,
+        q: this.params.q,
+      })
+    )
+
+    this.loading = false
+    this.isLoadingMore = false
+  }
+}
+
+export default DataProvider
diff --git a/store/data-providers.js b/store/data-providers.js
index d3ebb54a..b67aaffc 100644
--- a/store/data-providers.js
+++ b/store/data-providers.js
@@ -2,30 +2,31 @@ import { observable, computed } from 'mobx'
 
 import Params from './params'
 
-const schema = {
-  query: {
+export const schema = {
+  q: {
     default: '',
-    convert: (value) => value.toString(),
+    convert: 'string',
+    validation: 'string',
   },
   size: {
     default: 10,
     validation: 'number',
-    convert: (value) => Number(value),
+    convert: 'number',
   },
   action: {
     default: null,
-    validation: (value) => ['ADD', null].includes(value),
+    validation: ['ADD', null],
   },
 }
 
 class DataProviders {
   @observable data
 
-  @observable params
+  params
 
   @computed
   get results() {
-    return this.search(this.params.query)
+    return this.search(this.params.q)
   }
 
   constructor({ data, params = {} }) {
diff --git a/store/index.jsx b/store/index.jsx
index abd4b9a5..2041a3a2 100644
--- a/store/index.jsx
+++ b/store/index.jsx
@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useContext } from 'react'
+import React, { createContext, useMemo, useContext, useRef } from 'react'
 import { useStaticRendering, observer } from 'mobx-react-lite'
 
 import RootStore from './root'
@@ -10,17 +10,14 @@ let store = null
 useStaticRendering(isServer)
 
 export const initStore = (initialData) => {
-  const storeInner = store ?? new RootStore()
-  storeInner.init(initialData)
-
   // on the server-side a new instance is created for each page request
   // as we don't want to mix between users/requests, etc.
-  if (isServer) return storeInner
+  if (isServer) return new RootStore(initialData)
 
   // Create the store once in the client
-  if (!store) store = storeInner
+  if (!store) store = new RootStore(initialData)
 
-  return storeInner
+  return store
 }
 
 const StoreContext = createContext({})
@@ -28,7 +25,17 @@ export const StoreProvider = ({ children, store: storeInner }) => (
   <StoreContext.Provider value={storeInner}>{children}</StoreContext.Provider>
 )
 
-export const useStore = () => useContext(StoreContext)
+export const useStore = (initialState) => {
+  const isInitialized = useRef(false)
+  const storeContext = useContext(StoreContext)
+
+  if (isInitialized.current === false && initialState) {
+    storeContext.extend(initialState)
+    isInitialized.current = true
+  }
+
+  return storeContext
+}
 
 export const useInitStore = (initialState) =>
   useMemo(() => initStore(initialState), [])
diff --git a/store/params.js b/store/params.js
index ba0b9ac6..3ec47c9c 100644
--- a/store/params.js
+++ b/store/params.js
@@ -1,66 +1,27 @@
-import { observable } from 'mobx'
+import { action, extendObservable } from 'mobx'
 
-const validate = (keySchema, value) => {
-  if (typeof keySchema.validation === 'function')
-    return keySchema.validation(value)
-
-  if (keySchema.validation === 'number') return Number.isInteger(value)
-
-  return true
-}
-
-const convert = (keySchema, value) => {
-  if (typeof keySchema.convert === 'function') return keySchema.convert(value)
-
-  return value
-}
+import { convertAndValidate } from 'utils/validation'
 
 class Params {
-  @observable paramsMap = new Map()
-
   schema
 
   constructor(params, schema) {
-    this.paramsSchema = params
     this.schema = schema
-    const proxyParams = new Proxy(this.paramsMap, {
-      set: (object, key, value) => {
-        if (key in this.schema) {
-          const keySchema = this.schema[key]
-          let keyValue = value
-
-          try {
-            keyValue = convert(keySchema, keyValue)
-            if (!validate(keySchema, keyValue)) keyValue = keySchema.default
-          } catch (error) {
-            keyValue = keySchema.default
-          }
-
-          object.set(key, keyValue)
-          return true
-        }
+    extendObservable(this, convertAndValidate({ schema, params }))
+  }
 
-        if (process.env.NODE_ENV === 'development') {
-          console.error(
-            `Trying to access non-existing property ${key} on Params Proxy`
-          )
-        }
-        return false
-      },
-      get: (object, key) => {
-        if (typeof object[key] === 'function')
-          return (...args) => Reflect.apply(object[key], object, args)
+  @action
+  changeParams({ ...params }) {
+    const { schema, ...assignedParams } = this
 
-        return object.get(key)
+    const newParams = convertAndValidate({
+      schema: this.schema,
+      params: {
+        ...assignedParams,
+        ...params,
       },
     })
-
-    Object.entries(schema).forEach(([key, value]) => {
-      if (key in params) proxyParams[key] = params[key]
-      else proxyParams[key] = value.default
-    })
-
-    return proxyParams
+    Object.assign(this, newParams)
   }
 }
 
diff --git a/store/root.js b/store/root.js
index 1eca2f8b..396837d9 100644
--- a/store/root.js
+++ b/store/root.js
@@ -2,18 +2,28 @@ import { observable } from 'mobx'
 
 import Claim from './claim'
 import DataProviders from './data-providers'
+import DataProvider from './data-provider'
 
 class Root {
   claim = new Claim()
 
+  @observable dataProvider = null
+
   @observable dataProviders = null
 
   @observable statistics
 
-  init({ dataProviders = {}, statistics = {} } = {}) {
-    this.dataProviders = new DataProviders(dataProviders)
+  constructor({ statistics }) {
     this.statistics = statistics
   }
+
+  extend({ dataProviders, dataProvider }) {
+    if (!this.dataProviders && dataProviders != null)
+      this.dataProviders = new DataProviders(dataProviders)
+
+    if (!this.dataProvider && dataProvider != null)
+      this.dataProvider = new DataProvider(dataProvider)
+  }
 }
 
 export default Root
diff --git a/templates/data-provider/claim-card.jsx b/templates/data-provider/claim-card.jsx
new file mode 100644
index 00000000..54f8f0c4
--- /dev/null
+++ b/templates/data-provider/claim-card.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Card, Button } from '@oacore/design'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './styles.module.css'
+
+const ClaimCard = ({ name }) => (
+  <Card tag="section" className={classNames.use(styles.card, styles.claimCard)}>
+    <div>
+      <b>Do you manage {name}?</b> Access insider analytics, issue reports and
+      manage access to outputs from your repository in
+      the&nbsp;CORE&nbsp;Dashboard!&nbsp;
+      <span aria-hidden="true" role="img">
+        👇
+      </span>
+    </div>
+    <div className={styles.claimCardActions}>
+      <Button variant="contained" className={styles.claimCardAction} disabled>
+        Gain access now
+      </Button>
+      <Button className={styles.claimCardAction} disabled>
+        More details
+      </Button>
+    </div>
+  </Card>
+)
+
+export default ClaimCard
diff --git a/templates/data-provider/index.jsx b/templates/data-provider/index.jsx
new file mode 100644
index 00000000..1ead5233
--- /dev/null
+++ b/templates/data-provider/index.jsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import { SearchResult } from '@oacore/design'
+
+import DataProviderOutputsSearch from './search'
+// import ClaimCard from './claim-card'
+import MapCard from './map-card'
+import styles from './styles.module.css'
+import Pagination from './pagination'
+
+import Search from 'modules/search-layout'
+
+const DataProviderTemplate = ({
+  basePath,
+  outputs,
+  metadata,
+  query,
+  setQuery,
+  loading,
+  isLoadingMore,
+  from,
+  size,
+  total,
+}) => {
+  const placeholders = Array.from(Array(10).keys())
+
+  return (
+    <Search className={styles.layout}>
+      <Search.Main>
+        <span className={styles.titleBox}>
+          <span>{metadata.institution}</span>
+          <h1 className={styles.title}>{metadata.name}</h1>
+        </span>
+
+        <DataProviderOutputsSearch
+          initQuery={query}
+          onQueryChanged={(q) => {
+            setQuery(q)
+          }}
+          className={styles.search}
+        />
+        {loading && !isLoadingMore
+          ? placeholders.map((key) => (
+              <SearchResult
+                id={String(key)}
+                key={String(key)}
+                aria-busy="true"
+                tag={Search.Result}
+              >
+                <p data-line-count="2" />
+              </SearchResult>
+            ))
+          : outputs.map(({ id, abstract, title, author, year, link }) => {
+              const fullTextLink = link.find((l) => l.type === 'download')?.url
+              const metadataLink = link.find((l) => l.type === 'display')?.url
+              return (
+                <SearchResult
+                  key={id}
+                  id={id}
+                  tag={Search.Result}
+                  data={{
+                    title,
+                    author,
+                    publicationDate: String(year),
+                    thumbnailUrl: `//core.ac.uk/image/${id}/medium`,
+                    metadataLink,
+                    fullTextLink,
+                  }}
+                >
+                  {abstract}
+                </SearchResult>
+              )
+            })}
+        {isLoadingMore &&
+          placeholders.map((key) => (
+            <SearchResult
+              id={String(key)}
+              key={String(key)}
+              aria-busy="true"
+              tag={Search.Result}
+            >
+              <p data-line-count="2" />
+            </SearchResult>
+          ))}
+        {outputs.length === 0 && (
+          <div className={styles.noResultsFind}>No results found</div>
+        )}
+        <Pagination
+          basePath={basePath}
+          from={from}
+          size={size}
+          total={total}
+          q={query}
+        />
+      </Search.Main>
+      <Search.Sidebar tag="aside">
+        <MapCard metadata={metadata} />
+        {/* <ClaimCard name={metadata.name} /> */}
+      </Search.Sidebar>
+    </Search>
+  )
+}
+
+export default DataProviderTemplate
diff --git a/templates/data-provider/map-card.jsx b/templates/data-provider/map-card.jsx
new file mode 100644
index 00000000..1beb3ad6
--- /dev/null
+++ b/templates/data-provider/map-card.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Card } from '@oacore/design'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './styles.module.css'
+
+import Map from 'modules/map'
+
+const MapCard = ({ metadata }) => (
+  <Card className={classNames.use(styles.card, styles.mapCard)}>
+    <Map
+      className={styles.map}
+      locations={[
+        {
+          name: metadata.name,
+          latitude: metadata.location?.latitude,
+          longitude: metadata.location?.longitude,
+        },
+      ]}
+    />
+    <div>{metadata.name}</div>
+  </Card>
+)
+
+export default MapCard
diff --git a/templates/data-provider/pagination.jsx b/templates/data-provider/pagination.jsx
new file mode 100644
index 00000000..0979634a
--- /dev/null
+++ b/templates/data-provider/pagination.jsx
@@ -0,0 +1,136 @@
+import React from 'react'
+import { Button, Icon } from '@oacore/design'
+import Link from 'next/link'
+import { classNames } from '@oacore/design/lib/utils'
+
+import styles from './styles.module.css'
+
+import Search from 'modules/search-layout'
+
+const getPaginationState = ({ from, size, total }) => ({
+  loadMore: size < total,
+  previous: from > 0,
+  next: from + size < total,
+  first: from > 0,
+  last: from + size < total,
+})
+
+const Pagination = ({ basePath, from, size, total, ...restParams }) => {
+  const hrefBuilder = ({ next, previous, first, last, loadMore }) => {
+    const params = {
+      from,
+      size,
+      ...restParams,
+    }
+
+    if (!loadMore) params.size = 10
+    if (next) params.from = from + size
+    if (previous) params.from = Math.max(from - 10, 0)
+    if (first) params.from = 0
+    if (last) params.from = total - 10
+    if (loadMore) params.size = Math.min(size + 10, total)
+
+    const urlParams = new URLSearchParams(params)
+    urlParams.sort()
+
+    return `${basePath}?${urlParams.toString()}`
+  }
+
+  const paginationState = getPaginationState({ from, size, total })
+
+  return (
+    <nav
+      className={styles.pagination}
+      role="navigation"
+      aria-label="Pagination Navigation"
+    >
+      <div>
+        <Link
+          href={hrefBuilder({ loadMore: true })}
+          shallow
+          passHref
+          scroll={false}
+        >
+          <Button
+            tag="a"
+            aria-label="Load more results"
+            disabled={!paginationState.loadMore}
+            aria-disabled={!paginationState.loadMore}
+          >
+            Load more
+          </Button>
+        </Link>
+      </div>
+      <div className={styles.arrowPagination}>
+        <Search.ResultStats
+          from={from + 1}
+          to={from + size}
+          total={total}
+          className={styles.resultStats}
+        />
+        <div>
+          <Link
+            href={hrefBuilder({ first: true })}
+            shallow
+            passHref
+            scroll={false}
+          >
+            <Button
+              tag="a"
+              className={classNames.use(
+                styles.arrow,
+                !paginationState.first && styles.disabled
+              )}
+              aria-label="Goto page 1"
+              aria-disabled={!paginationState.first}
+            >
+              <Icon src="#chevron-double-left" />
+            </Button>
+          </Link>
+
+          <Link href={hrefBuilder({ previous: true })} shallow passHref>
+            <Button
+              tag="a"
+              className={classNames.use(
+                styles.arrow,
+                !paginationState.previous && styles.disabled
+              )}
+              aria-label="Goto previous page"
+              aria-disabled={!paginationState.previous}
+            >
+              <Icon src="#chevron-left" />
+            </Button>
+          </Link>
+          <Link href={hrefBuilder({ next: true })} shallow passHref>
+            <Button
+              tag="a"
+              className={classNames.use(
+                styles.arrow,
+                !paginationState.next && styles.disabled
+              )}
+              aria-label="Goto next page"
+              aria-disabled={!paginationState.next}
+            >
+              <Icon src="#chevron-right" />
+            </Button>
+          </Link>
+          <Link href={hrefBuilder({ last: true })} shallow passHref>
+            <Button
+              tag="a"
+              className={classNames.use(
+                styles.arrow,
+                !paginationState.last && styles.disabled
+              )}
+              aria-label="Goto last page"
+              aria-disabled={!paginationState.last}
+            >
+              <Icon src="#chevron-double-right" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Pagination
diff --git a/templates/data-provider/search.jsx b/templates/data-provider/search.jsx
new file mode 100644
index 00000000..3c3b56e0
--- /dev/null
+++ b/templates/data-provider/search.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Select } from '@oacore/design'
+
+const DataProviderOutputsSearch = ({
+  initQuery,
+  onQueryChanged,
+  className,
+}) => {
+  const [value, setValue] = React.useState(initQuery || '')
+  const [isInitialised, setIsInitialised] = useState(false)
+
+  const handleOnChange = (data) => {
+    // TODO: Consider this having in @oacore/design
+    // prevent firing callback in initialisation (we have the data prefetched
+    // on the server side already
+    if (!isInitialised) {
+      setIsInitialised(true)
+      return
+    }
+
+    onQueryChanged(data.value)
+  }
+
+  const handleOnInput = (data) => {
+    setValue(data.value)
+  }
+
+  return (
+    <Select
+      id="data-providers-outputs-select"
+      value={value}
+      label="Search"
+      onChange={handleOnChange}
+      onInput={handleOnInput}
+      placeholder="Search over 11K research outputs in Open Research Online"
+      prependIcon="#magnify"
+      className={className}
+    />
+  )
+}
+
+export default DataProviderOutputsSearch
diff --git a/templates/data-provider/styles.module.css b/templates/data-provider/styles.module.css
new file mode 100644
index 00000000..86533922
--- /dev/null
+++ b/templates/data-provider/styles.module.css
@@ -0,0 +1,87 @@
+.layout {
+  z-index: 5;
+}
+
+.title-box {
+  grid-row: 1;
+  margin-bottom: 1rem;
+}
+
+.search {
+  grid-row: 2;
+}
+
+.title {
+  margin-top: 0;
+}
+
+.card:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.claim-card {
+  box-shadow: none;
+}
+
+.claim-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.claim-card-action {
+  margin-top: 1rem;
+  grid-row: 6;
+}
+
+.map-card {
+  grid-row: 5;
+}
+
+.claim-card-action:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.card .map {
+  width: auto;
+  margin: calc(-1 * var(--card-padding-y)) calc(-1 * var(--card-padding-x))
+    var(--card-padding-x) calc(-1 * var(--card-padding-x));
+}
+
+.no-results-find {
+  margin-top: 1rem;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 2rem;
+}
+
+.pagination .arrow-pagination {
+  display: flex;
+  align-items: center;
+}
+
+.pagination .arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  color: var(--gray-700);
+  border: none;
+  border-radius: 2rem;
+}
+
+.result-stats {
+  margin-right: 1rem;
+}
+
+.pagination .disabled {
+  text-decoration: none;
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
diff --git a/templates/data-providers/index.jsx b/templates/data-providers/index.jsx
index b5ff0c45..937efc56 100644
--- a/templates/data-providers/index.jsx
+++ b/templates/data-providers/index.jsx
@@ -8,7 +8,22 @@ import AddDataProviderForm from './form'
 
 import { formatNumber } from 'utils/format-number'
 import Search from 'modules/search-layout'
-import RepositoriesMap from 'modules/repositories-map'
+import Map from 'modules/map'
+
+const filterAndMapDataProviders = (dataProviders) =>
+  dataProviders
+    .filter(
+      ({ name, dataProviderLocation }) =>
+        dataProviderLocation?.latitude != null &&
+        dataProviderLocation?.longitude != null &&
+        name
+    )
+    .map(({ id, name, dataProviderLocation }) => ({
+      name,
+      href: `https://core.ac.uk/search?q=repositories.id:(${id})`,
+      latitude: dataProviderLocation?.latitude,
+      longitude: dataProviderLocation?.longitude,
+    }))
 
 const getCountryName = (code) => {
   const countryName = countries[String(code).toUpperCase()]
@@ -31,17 +46,17 @@ const SearchResults = ({
 
   if (!results.length) {
     return (
-      <Search.Results>
+      <Search.Main>
         <Search.Result>
           <b>No results found</b>
         </Search.Result>
         {children}
-      </Search.Results>
+      </Search.Main>
     )
   }
 
   return (
-    <Search.Results>
+    <Search.Main>
       {results.slice(0, dataProvidersSize).map((el) => (
         <ResultCard
           key={el.id}
@@ -63,7 +78,7 @@ const SearchResults = ({
         </Button>
       )}
       {children}
-    </Search.Results>
+    </Search.Main>
   )
 }
 
@@ -140,12 +155,12 @@ const DataProvidersSearchTemplate = React.memo(
           </div>
         </SearchResults>
 
-        <Search.Content>
-          <RepositoriesMap
+        <Search.Sidebar>
+          <Map
             className={styles.map}
-            dataProviders={
+            locations={filterAndMapDataProviders(
               query === '' ? results : results.slice(0, dataProvidersSize)
-            }
+            )}
           />
           <p>
             We aggregate research papers from data providers all over the world
@@ -170,7 +185,7 @@ const DataProvidersSearchTemplate = React.memo(
           >
             Become data provider
           </Button>
-        </Search.Content>
+        </Search.Sidebar>
       </Search>
     )
   }
diff --git a/templates/data-providers/result-card.jsx b/templates/data-providers/result-card.jsx
index 1faf6e92..072ddff8 100644
--- a/templates/data-providers/result-card.jsx
+++ b/templates/data-providers/result-card.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Icon, Link } from '@oacore/design'
+import { Icon, Link as UILink } from '@oacore/design'
+import Link from 'next/link'
 
 import styles from './styles.module.css'
 
@@ -16,20 +17,16 @@ const ResultCard = ({
   <Search.Result className={styles.resultCard} {...restProps}>
     <span className={styles.resultHeading}>
       <Icon src={icon} aria-hidden />
-      <Link
-        className={styles.resultTitle}
-        target="_blank"
-        href={`https://core.ac.uk/search?q=repositories.id:(${repoId})`}
-      >
-        {title}
+      <Link href={`/data-providers/${repoId}`} passHref>
+        <UILink className={styles.resultTitle}>{title}</UILink>
       </Link>
     </span>
 
     <ul className={styles.resultMetadata}>
       <li>
-        <Link href={homePage} external icon={false}>
+        <UILink href={homePage} external icon={false}>
           {homePage}
-        </Link>
+        </UILink>
       </li>
       {country && <li>{country}</li>}
     </ul>
diff --git a/templates/data-providers/styles.module.css b/templates/data-providers/styles.module.css
index b59c0647..b72b9aab 100644
--- a/templates/data-providers/styles.module.css
+++ b/templates/data-providers/styles.module.css
@@ -65,6 +65,7 @@
 
 .map {
   height: 30rem;
+  grid-row: 3;
 }
 
 @media (--screen-until-desktop) {
diff --git a/utils/validation.js b/utils/validation.js
new file mode 100644
index 00000000..918cc277
--- /dev/null
+++ b/utils/validation.js
@@ -0,0 +1,54 @@
+const validate = (keySchema, keyValue) => {
+  if (!keySchema) return true
+
+  if (Array.isArray(keySchema.validation))
+    return keySchema.validation.includes(keyValue)
+
+  if (keySchema.validation === 'number') return Number.isInteger(keyValue)
+  if (keySchema.validation === 'string') return typeof keyValue === 'string'
+
+  return true
+}
+
+const convert = (keySchema, keyValue) => {
+  if (!keySchema || keyValue === undefined) return keyValue
+
+  if (keySchema.convert === 'number') return Number(keyValue)
+
+  if (keySchema.convert === 'string') return keyValue.toString()
+
+  return keyValue
+}
+
+const processKey = (keySchema, keyValue) => {
+  const convertedValue = convert(keySchema, keyValue)
+  if (validate(keySchema, convertedValue)) return convertedValue
+
+  const defaultValue = keySchema.default
+  if (defaultValue === undefined) {
+    throw Error(
+      `Value for schema ${keySchema} is invalid. Default value is not specified`
+    )
+  } else return defaultValue
+}
+
+export const convertAndValidate = ({ schema, params, key = null }) => {
+  // request for validate specific key
+  if (key) return processKey(schema[key], params[key])
+
+  const schemaKeys = Object.keys(schema)
+
+  // for the simplicity and our use-case we take all keys in schema
+  // and process them, i.e. if params object contains any key
+  // which is not specified in schema it gets removed.
+  // At the same time if key we apply default values
+  // if key is in schema but not in params
+  return Object.fromEntries(
+    schemaKeys.map((schemaKey) => [
+      schemaKey,
+      processKey(schema[schemaKey], params[schemaKey]),
+    ])
+  )
+}
+
+export default convertAndValidate