diff --git a/gatsby-browser.jsx b/gatsby-browser.jsx
new file mode 100644
index 000000000..5789734d5
--- /dev/null
+++ b/gatsby-browser.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { Web3Provider } from "./src/context/Web3Context";
+import { SearchProvider } from "./src/context/SearchContext";
+
+export const wrapRootElement = ({ element }) => (
+  <SearchProvider>
+    <Web3Provider>{element}</Web3Provider>
+  </SearchProvider>
+);
diff --git a/gatsby-node.js b/gatsby-node.js
index 4cb348aed..fb0c0c126 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -65,6 +65,8 @@ exports.sourceNodes = async ({
   }, Promise.resolve({}));
 
   chains
+    // Filter out non HTTP(S) RPC URLs
+    .map((chain) => ({ ...chain, rpc: chain.rpc.filter(rpc => rpc.startsWith('http://') || rpc.startsWith('https://'))}))
     .filter((chain) => chain.rpc.length > 0)
     .forEach((chain) => {
       const icon = chain.icon;
diff --git a/gatsby-ssr.jsx b/gatsby-ssr.jsx
new file mode 100644
index 000000000..5789734d5
--- /dev/null
+++ b/gatsby-ssr.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { Web3Provider } from "./src/context/Web3Context";
+import { SearchProvider } from "./src/context/SearchContext";
+
+export const wrapRootElement = ({ element }) => (
+  <SearchProvider>
+    <Web3Provider>{element}</Web3Provider>
+  </SearchProvider>
+);
diff --git a/src/components/Chain.tsx b/src/components/Chain.tsx
index f4ee98a71..1ed2fb8c7 100644
--- a/src/components/Chain.tsx
+++ b/src/components/Chain.tsx
@@ -12,6 +12,7 @@ import React, { useContext } from "react";
 import { Web3Context } from "../context/Web3Context";
 import { ChainData } from "../types/chain";
 import { ChainIcon } from "./ChainIcon";
+import { Link } from "gatsby";
 
 export const Chain = ({
   name,
@@ -22,55 +23,65 @@ export const Chain = ({
 }: ChainData) => {
   const { isConnected, handleConnect, handleAddChain } =
     useContext(Web3Context);
-  const handleAddChainClick = () => {
+
+  const handleConnectClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    handleConnect();
+  };
+
+  const handleAddChainClick = (event: React.MouseEvent) => {
+    event.preventDefault();
     handleAddChain({ name, chainId, nativeCurrency, ...rest });
   };
+
   return (
-    <Flex
-      flexDirection="column"
-      px="5"
-      py="4"
-      borderWidth="1px"
-      rounded="md"
-      boxShadow="base"
-    >
-      <Flex justifyContent="space-between">
-        <Flex flexDirection="column" minW="200px">
-          <Flex mb="2">
-            <Text
-              fontSize="lg"
-              fontWeight="semibold"
-              lineHeight="short"
-              isTruncated
-              verticalAlign="middle"
-            >
-              {name}
-            </Text>
+    <Link to={`/chain/${chainId}`}>
+      <Flex
+        flexDirection="column"
+        px="5"
+        py="4"
+        borderWidth="1px"
+        rounded="md"
+        boxShadow="base"
+      >
+        <Flex justifyContent="space-between">
+          <Flex flexDirection="column" minW="200px">
+            <Flex mb="2">
+              <Text
+                fontSize="lg"
+                fontWeight="semibold"
+                lineHeight="short"
+                isTruncated
+                verticalAlign="middle"
+              >
+                {name}
+              </Text>
+            </Flex>
+            <StatGroup mb="2">
+              <Stat>
+                <StatLabel>Chain ID</StatLabel>
+                <StatNumber fontSize="md">{chainId}</StatNumber>
+              </Stat>
+              <Stat>
+                <StatLabel>Currency</StatLabel>
+                <StatNumber fontSize="md">{nativeCurrency.symbol}</StatNumber>
+              </Stat>
+            </StatGroup>
           </Flex>
-          <StatGroup mb="2">
-            <Stat>
-              <StatLabel>Chain ID</StatLabel>
-              <StatNumber fontSize="md">{chainId}</StatNumber>
-            </Stat>
-            <Stat>
-              <StatLabel>Currency</StatLabel>
-              <StatNumber fontSize="md">{nativeCurrency.symbol}</StatNumber>
-            </Stat>
-          </StatGroup>
+          {icon && (
+            <Flex>
+              <ChainIcon name={name} icon={icon} />
+            </Flex>
+          )}
         </Flex>
-        {icon && (
-          <Flex>
-            <ChainIcon name={name} icon={icon} />
-          </Flex>
-        )}
+        <Center mt="auto">
+          {!isConnected ? (
+            <Button onClick={handleConnectClick}>Connect</Button>
+          ) : (
+            <Button onClick={handleAddChainClick}>Add Chain</Button>
+          )}
+        </Center>
       </Flex>
-      <Center mt="auto">
-        {!isConnected ? (
-          <Button onClick={handleConnect}>Connect Wallet</Button>
-        ) : (
-          <Button onClick={handleAddChainClick}>Add Chain</Button>
-        )}
-      </Center>
-    </Flex>
+    </Link>
   );
 };
diff --git a/src/components/ChainIcon.tsx b/src/components/ChainIcon.tsx
index dc85ff24c..3ad80074b 100644
--- a/src/components/ChainIcon.tsx
+++ b/src/components/ChainIcon.tsx
@@ -3,7 +3,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import { ChainData } from "../types/chain";
 import { Image } from "@chakra-ui/react";
 
-export const ChainIcon = ({ icon, name }: Pick<ChainData, "icon" | "name">) =>
+export const ChainIcon = ({ icon, name, width = "40px" }: Pick<ChainData, "icon" | "name"> & { width?: string; }) =>
   icon.childImageSharp ? (
     <GatsbyImage
       objectFit="scale-down"
@@ -11,5 +11,5 @@ export const ChainIcon = ({ icon, name }: Pick<ChainData, "icon" | "name">) =>
       alt={name}
     />
   ) : (
-    <Image src={icon.publicURL} width="40px" />
+    <Image src={icon.publicURL} width={width} />
   );
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
new file mode 100644
index 000000000..667b220e1
--- /dev/null
+++ b/src/components/ExternalLink.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { Link } from "@chakra-ui/react";
+
+export const ExternalLink = ({ href, children }) => (
+  <Link href={href} isExternal>
+    {children} <ExternalLinkIcon mx="2px" />
+  </Link>
+);
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 7573c1610..84a6858d1 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -14,6 +14,7 @@ import { Search } from "./Search";
 import { FaGithub } from "react-icons/fa";
 import { AddIcon } from "@chakra-ui/icons";
 import { Filters } from "./Filters";
+import { Link as GatsbyLink } from "gatsby";
 
 export const Header = ({ showSearch = true, showFilters = true }) => {
   const { handleConnect, isConnected, address } = useContext(Web3Context);
@@ -33,7 +34,9 @@ export const Header = ({ showSearch = true, showFilters = true }) => {
       width="100%"
       zIndex="sticky"
     >
-      <Heading>Chainlist</Heading>
+      <GatsbyLink to="/">
+        <Heading as="h1">Chainlist</Heading>
+      </GatsbyLink>
       {showSearch && <Search />}
       <Flex>
         {showFilters && <Filters />}
@@ -62,7 +65,7 @@ export const Header = ({ showSearch = true, showFilters = true }) => {
             size="lg"
             onClick={handleConnect}
           >
-            Connect Wallet
+            Connect
           </Button>
         ) : (
           <Button size="lg" w={{ base: "100%", md: "auto" }}>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index f3f23f95f..a24a96743 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -5,7 +5,14 @@ import { Header } from "./Header";
 export const Layout = ({ children, headerProps = {} }) => (
   <Flex flexDirection="column" py="4" px="8" height="100vh" position="relative">
     <Header {...headerProps} />
-    <Flex as="main" flexDirection="column" mt={{ base: "164px", md: "16" }}>
+    <Flex
+      as="main"
+      flexDirection="column"
+      mt={{
+        base: headerProps.showSearch !== false ? "164px" : "116px",
+        md: "16",
+      }}
+    >
       {children}
     </Flex>
   </Flex>
diff --git a/src/components/RedFlagBadge.tsx b/src/components/RedFlagBadge.tsx
new file mode 100644
index 000000000..9dc2bb51d
--- /dev/null
+++ b/src/components/RedFlagBadge.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Badge, Tooltip } from "@chakra-ui/react";
+import { ChainData } from "../types/chain";
+
+export const RedFlagBadge = ({ redFlags }: Pick<ChainData, "redFlags">) => {
+  if (!redFlags || redFlags.length === 0) {
+    return null;
+  }
+  const flagLabel =
+    redFlags[0] === "reusedChainId"
+      ? "Flagged for reusing chain ID"
+      : "Flagged for unknown reasons";
+  return (
+    <Tooltip label={flagLabel}>
+      <Badge colorScheme="red" textTransform="capitalize">
+        Flagged
+      </Badge>
+    </Tooltip>
+  );
+};
diff --git a/src/components/RpcTable.tsx b/src/components/RpcTable.tsx
new file mode 100644
index 000000000..f2b3c09a2
--- /dev/null
+++ b/src/components/RpcTable.tsx
@@ -0,0 +1,45 @@
+import React, { useContext } from "react";
+import {
+  Button,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+import { Web3Context } from "../context/Web3Context";
+
+export const RpcTable = ({ rpcs, handleRpcClick }) => {
+  const { isConnected, handleConnect } = useContext(Web3Context);
+
+  return (
+    <TableContainer>
+      <Table>
+        <Thead>
+          <Tr>
+            <Th pl="0">RPC URL</Th>
+            <Th></Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {rpcs.map((rpcUrl) => (
+            <Tr>
+              <Td pl="0">{rpcUrl}</Td>
+              <Td pr="0" textAlign="end">
+                {!isConnected ? (
+                  <Button onClick={handleConnect}>Connect</Button>
+                ) : (
+                  <Button onClick={() => handleRpcClick(rpcUrl)}>
+                    Add Chain
+                  </Button>
+                )}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+};
diff --git a/src/components/StatValue.tsx b/src/components/StatValue.tsx
new file mode 100644
index 000000000..477e0dd15
--- /dev/null
+++ b/src/components/StatValue.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { VStack } from "@chakra-ui/react";
+
+export const StatValue = ({ children }: { children: React.ReactNode }) => (
+  <VStack align="start" gap="1">
+    {children}
+  </VStack>
+);
diff --git a/src/components/StatusBadge.tsx b/src/components/StatusBadge.tsx
new file mode 100644
index 000000000..02526e805
--- /dev/null
+++ b/src/components/StatusBadge.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Badge } from "@chakra-ui/react";
+import { ChainData } from "../types/chain";
+
+export const StatusBadge = ({ status }: Pick<ChainData, "status">) => {
+  const actualStatus = status ?? "Active";
+  const colorScheme = status === "deprecated" ? "yellow" : undefined;
+  return (
+    <Badge textTransform="capitalize" colorScheme={colorScheme}>
+      {actualStatus}
+    </Badge>
+  );
+};
diff --git a/src/pages/chain/{Chain.chainId}.tsx b/src/pages/chain/{Chain.chainId}.tsx
new file mode 100644
index 000000000..bff377bdd
--- /dev/null
+++ b/src/pages/chain/{Chain.chainId}.tsx
@@ -0,0 +1,159 @@
+import React, { useContext } from "react";
+import {
+  Button,
+  Flex,
+  StatGroup,
+  StatLabel,
+  Stat,
+  Heading,
+  Divider,
+  Text,
+} from "@chakra-ui/react";
+import { graphql } from "gatsby";
+import { Seo } from "../../components/SEO";
+import { Web3Context } from "../../context/Web3Context";
+import { ChainIcon } from "../../components/ChainIcon";
+import { Layout } from "../../components/Layout";
+import { ExternalLink } from "../../components/ExternalLink";
+import { RpcTable } from "../../components/RpcTable";
+import { RedFlagBadge } from "../../components/RedFlagBadge";
+import { StatusBadge } from "../../components/StatusBadge";
+import { StatValue } from "../../components/StatValue";
+import { ChainData } from "../../types/chain";
+
+const ChainPage = ({ data }: { data: { chain: ChainData } }) => {
+  const {
+    name,
+    chainId,
+    nativeCurrency,
+    icon,
+    explorers,
+    rpc,
+    redFlags,
+    infoURL,
+    status,
+  } = data.chain;
+
+  const { isConnected, handleConnect, handleAddChain } =
+    useContext(Web3Context);
+
+  const handleAddChainClick = () => {
+    handleAddChain({ name, chainId, nativeCurrency, rpc, explorers });
+  };
+
+  const handleRpcClick = (rpc: string) => {
+    handleAddChain({ name, chainId, nativeCurrency, rpc: [rpc], explorers });
+  };
+
+  return (
+    <>
+      <Seo />
+      <Layout headerProps={{ showSearch: false, showFilters: false }}>
+        <Flex flexDirection="column" mt={["0", null, "8"]}>
+          <Flex
+            flexDirection={["column", null, "row"]}
+            justifyContent="space-between"
+            alignItems="center"
+            gap="6"
+          >
+            <Flex
+              flexDirection={["column", null, "row"]}
+              alignItems="center"
+              gap="6"
+            >
+              {icon && (
+                <Flex>
+                  <ChainIcon name={name} icon={icon} width="60px" />
+                </Flex>
+              )}
+              <Heading size="2xl">{name}</Heading>
+            </Flex>
+            {!isConnected ? (
+              <Button onClick={handleConnect}>Connect</Button>
+            ) : (
+              <Button onClick={handleAddChainClick}>Add Chain</Button>
+            )}
+          </Flex>
+          <Divider my="8" />
+          <StatGroup flexDirection={["column", null, "row"]} gap={[2, null, 0]}>
+            <Stat>
+              <StatLabel>Chain ID</StatLabel>
+              <StatValue>
+                <Text>{chainId}</Text>
+              </StatValue>
+            </Stat>
+            <Stat>
+              <StatLabel>Currency</StatLabel>
+              <StatValue>
+                <Text>{nativeCurrency.symbol}</Text>
+              </StatValue>
+            </Stat>
+            <Stat>
+              <StatLabel mb="1.5">Status</StatLabel>
+              <StatValue>
+                <StatusBadge status={status} />
+                <RedFlagBadge redFlags={redFlags} />
+              </StatValue>
+            </Stat>
+            {infoURL && (
+              <Stat>
+                <StatLabel>Info</StatLabel>
+                <StatValue>
+                  <ExternalLink href={infoURL}>{infoURL}</ExternalLink>
+                </StatValue>
+              </Stat>
+            )}
+            {explorers && (
+              <Stat>
+                <StatLabel>Explorers</StatLabel>
+                <StatValue>
+                  {explorers.map((explorer) => (
+                    <ExternalLink href={explorer.url}>
+                      {explorer.url}
+                    </ExternalLink>
+                  ))}
+                </StatValue>
+              </Stat>
+            )}
+          </StatGroup>
+          <Divider my="8" />
+          <RpcTable rpcs={rpc} handleRpcClick={handleRpcClick} />
+        </Flex>
+      </Layout>
+    </>
+  );
+};
+
+export const query = graphql`
+  query ($id: String) {
+    chain(id: { eq: $id }) {
+      id
+      name
+      chain
+      chainId
+      rpc
+      icon {
+        publicURL
+        childImageSharp {
+          gatsbyImageData(width: 60, placeholder: NONE)
+        }
+      }
+      nativeCurrency {
+        decimals
+        name
+        symbol
+      }
+      explorers {
+        url
+        name
+        standard
+      }
+      status
+      faucets
+      redFlags
+      infoURL
+    }
+  }
+`;
+
+export default ChainPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 051a31179..8ce559e50 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,21 +1,14 @@
-import { graphql, useStaticQuery } from "gatsby";
 import React from "react";
 import { ChainList } from "../components/ChainList";
 import { Seo } from "../components/SEO";
-import { Web3Provider } from "../context/Web3Context";
-import { SearchProvider } from "../context/SearchContext";
 import { Layout } from "../components/Layout";
 
 const IndexPage = () => (
   <>
     <Seo />
-    <Web3Provider>
-      <SearchProvider>
-        <Layout>
-          <ChainList />
-        </Layout>
-      </SearchProvider>
-    </Web3Provider>
+    <Layout>
+      <ChainList />
+    </Layout>
   </>
 );
 
diff --git a/src/types/chain.ts b/src/types/chain.ts
index 5ca376aac..42100bcfc 100644
--- a/src/types/chain.ts
+++ b/src/types/chain.ts
@@ -11,6 +11,9 @@ export interface ChainData {
   chainId: number;
   nativeCurrency: ChainCurrency;
   explorers?: BlockExplorer[];
+  status?: string;
+  redFlags?: string[];
+  infoURL?: string;
 }
 
 export interface ChainCurrency {