diff --git a/examples/catalog/__tests__/components/search/Item.test.tsx b/examples/catalog/__tests__/components/search/Item.test.tsx
deleted file mode 100644
index 30b41b1e..00000000
--- a/examples/catalog/__tests__/components/search/Item.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Item from '../../../components/search/Item';
-
-test('📸 of Input component with empty', () => {
-  const fixture = {
-    name: 'qw',
-    title: '12',
-    organization: null,
-    __typename: 'Package',
-  };
-  const tree = renderer
-    .create(<Item datapackage={fixture} key={0} />)
-    .toJSON();
-  expect(tree).toMatchSnapshot();
-});
diff --git a/examples/catalog/__tests__/components/search/__snapshots__/Item.test.tsx.snap b/examples/catalog/__tests__/components/search/__snapshots__/Item.test.tsx.snap
deleted file mode 100644
index f3c5230e..00000000
--- a/examples/catalog/__tests__/components/search/__snapshots__/Item.test.tsx.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`📸 of Input component with empty 1`] = `
-<div
-  className="mb-6"
->
-  <h3
-    className="text-xl font-semibold"
-  >
-    <a
-      className="text-primary"
-      href="/@dataset/qw"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-    >
-      12
-    </a>
-  </h3>
-  <a
-    className="text-gray-500 block mt-1"
-    href="/@dataset"
-    onClick={[Function]}
-    onMouseEnter={[Function]}
-  >
-    dataset
-  </a>
-  <div
-    className="leading-relaxed mt-2"
-  />
-</div>
-`;
diff --git a/examples/catalog/components/org/About.tsx b/examples/catalog/components/org/About.tsx
new file mode 100644
index 00000000..13cba08d
--- /dev/null
+++ b/examples/catalog/components/org/About.tsx
@@ -0,0 +1,154 @@
+import { useQuery } from '@apollo/react-hooks';
+import * as timeago from 'timeago.js';
+import { ErrorMessage } from '../_shared';
+import { GET_ORG_QUERY } from '../../graphql/queries';
+
+const About: React.FC<{ variables: any }> = ({ variables }) => {
+  const { loading, error, data } = useQuery(GET_ORG_QUERY, {
+    variables,
+    // Setting this value to true will make the component rerender when
+    // the "networkStatus" changes, so we are able to know if it is fetching
+    // more data
+    notifyOnNetworkStatusChange: true,
+  });
+
+  if (error) return <ErrorMessage message="Error loading dataset." />;
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.org;
+
+  return (
+    <div className="relative bg-white py-16 sm:py-4">
+      <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:gap-24 lg:items-start">
+        <div className="relative sm:py-16 lg:py-0">
+          <div
+            aria-hidden="true"
+            className="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen"
+          >
+            <div className="absolute inset-y-0 right-1/2 w-full bg-gray-50 rounded-r-3xl lg:right-72" />
+            <svg
+              className="absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12"
+              width={404}
+              height={392}
+              fill="none"
+              viewBox="0 0 404 392"
+            >
+              <defs>
+                <pattern
+                  id="02f20b47-fd69-4224-a62a-4c9de5c763f7"
+                  x={0}
+                  y={0}
+                  width={20}
+                  height={20}
+                  patternUnits="userSpaceOnUse"
+                >
+                  <rect
+                    x={0}
+                    y={0}
+                    width={4}
+                    height={4}
+                    className="text-gray-200"
+                    fill="currentColor"
+                  />
+                </pattern>
+              </defs>
+              <rect
+                width={404}
+                height={392}
+                fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)"
+              />
+            </svg>
+          </div>
+          <div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0 lg:max-w-none lg:py-20">
+            {/* Testimonial card*/}
+            <div className="relative pt-64 pb-10 rounded-2xl shadow-xl overflow-hidden">
+              <img
+                className="absolute inset-0 h-full w-full object-cover"
+                src={
+                  result.image ||
+                  'https://datahub.io/static/img/datahub-cube-edited.svg'
+                }
+                alt={result.title || result.name}
+              />
+              <div className="absolute inset-0 bg-indigo-500 mix-blend-multiply" />
+              <div className="absolute inset-0 bg-gradient-to-t from-indigo-600 via-indigo-600 opacity-90" />
+              <div className="relative px-8">
+                <blockquote className="mt-8">
+                  <div className="relative text-lg font-medium text-white md:flex-grow">
+                    <p className="relative">
+                      {result.description ||
+                        "This organization doesn't have a description."}
+                    </p>
+                  </div>
+
+                  <footer className="mt-4">
+                    <p className="text-base font-semibold text-indigo-200">
+                      {result.title}
+                    </p>
+                  </footer>
+                </blockquote>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
+          {/* Content area */}
+          <div className="pt-12 sm:pt-16 lg:pt-20">
+            <h1 className="text-3xl text-gray-900 font-extrabold tracking-tight sm:text-4xl">
+              {result.title || result.name}
+            </h1>
+          </div>
+
+          {/* Stats section */}
+          <div className="mt-10">
+            <dl className="grid grid-cols-2 gap-x-4 gap-y-8">
+              <div className="border-t-2 border-gray-100 pt-6">
+                <dt className="text-base font-medium text-gray-500">
+                  Datasets
+                </dt>
+                <dd className="text-3xl font-extrabold tracking-tight text-gray-900">
+                  {result.total}
+                </dd>
+              </div>
+              <div className="border-t-2 border-gray-100 pt-6">
+                <dt className="text-base font-medium text-gray-500">Users</dt>
+                <dd className="text-3xl font-extrabold tracking-tight text-gray-900">
+                  {result.users && result.users.length}
+                </dd>
+              </div>
+              <div className="border-t-2 border-gray-100 pt-6">
+                <dt className="text-base font-medium text-gray-500">
+                  Followers
+                </dt>
+                <dd className="text-3xl font-extrabold tracking-tight text-gray-900">
+                  {result.followers}
+                </dd>
+              </div>
+              <div className="border-t-2 border-gray-100 pt-6">
+                <dt className="text-base font-medium text-gray-500">
+                  Created
+                </dt>
+                <dd className="text-3xl font-extrabold tracking-tight text-gray-900">
+                  {timeago.format(result.created)}
+                </dd>
+              </div>
+            </dl>
+            <div className="mt-10">
+              <a
+                href={`/search?fq=organization:${result.name}`}
+                className="text-base font-medium text-indigo-600"
+              >
+                {' '}
+                Datasets by {result.title || result.name}{' '}
+                <span aria-hidden="true">&rarr;</span>{' '}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default About;
diff --git a/examples/catalog/pages/[org]/index.tsx b/examples/catalog/pages/[org]/index.tsx
new file mode 100644
index 00000000..79d5c867
--- /dev/null
+++ b/examples/catalog/pages/[org]/index.tsx
@@ -0,0 +1,49 @@
+import { GetServerSideProps } from 'next';
+import { useQuery } from '@apollo/react-hooks';
+import Head from 'next/head';
+import { initializeApollo } from '../../lib/apolloClient';
+import Nav from '../../components/home/Nav';
+import About from '../../components/org/About';
+import Footer from '../../components/home/Footer';
+import { GET_ORG_QUERY } from '../../graphql/queries';
+
+const Org: React.FC<{ variables: any }> = ({ variables }) => {
+  const { data, loading } = useQuery(GET_ORG_QUERY, { variables });
+
+  if (loading) return <div>Loading</div>;
+
+  const { result } = data.org;
+
+  return (
+    <>
+      <Head>
+        <title>Portal | {result.title || result.name}</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Nav />
+      <About variables={variables} />
+      <Footer />
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const apolloClient = initializeApollo();
+  const variables = {
+    id: context.query.org.replace('@', ''),
+  };
+
+  await apolloClient.query({
+    query: GET_ORG_QUERY,
+    variables,
+  });
+
+  return {
+    props: {
+      initialApolloState: apolloClient.cache.extract(),
+      variables,
+    },
+  };
+};
+
+export default Org;