diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 69feb78f..7fa7e9cc 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -39,7 +39,7 @@ const cardHeaderStyle = css`
 
 	[data-class=copy-button] {
 		vertical-align: text-bottom;
-		margin: 6px 0;
+		margin: 2px 0;
 		margin-left: 16px;
 	}
 `;
diff --git a/src/components/CopyToClipboardButton.tsx b/src/components/CopyToClipboardButton.tsx
index 6409a432..97423e28 100644
--- a/src/components/CopyToClipboardButton.tsx
+++ b/src/components/CopyToClipboardButton.tsx
@@ -4,7 +4,6 @@ import { IconButton, IconButtonProps, Tooltip } from "@mui/material";
 import { css } from "@emotion/react";
 
 const buttonStyle = css`
-	padding: 0;
 `;
 
 export type CopyToClipboardButtonProps = Omit<IconButtonProps, "value"|"size"> & {
diff --git a/src/components/DataViewer.tsx b/src/components/DataViewer.tsx
index 91a6c9c5..8bf2525a 100644
--- a/src/components/DataViewer.tsx
+++ b/src/components/DataViewer.tsx
@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { PropsWithChildren, ReactNode, useMemo, useState } from "react";
 import { css, Theme } from "@emotion/react";
-import { IconButton, Modal, ToggleButton, ToggleButtonGroup } from "@mui/material";
-import { Close } from "@mui/icons-material";
+import { IconButton, Modal, ToggleButton, ToggleButtonGroup, Tooltip } from "@mui/material";
+import { AutoStories, Close } from "@mui/icons-material";
 
 import { Network } from "../model/network";
 import { RuntimeMetadataArg } from "../model/runtime-metadata/runtimeMetadataArg";
@@ -91,6 +91,7 @@ const simpleControlsStyle = css`
 	align-items: flex-start;
 	margin-bottom: 0;
 	margin-left: 12px;
+	padding-top: 2px;
 `;
 
 const modeButtonsStyle = css`
@@ -104,21 +105,20 @@ const modeButtonStyle = css`
 	line-height: 24px;
 `;
 
-const fullscreenButtonStyle = css`
-	padding: 2px;
-	margin-left: 8px;
-`;
+const buttonStyle = css`
+	margin: -4px 0;
+	margin-left: 4px;
 
-const copyButtonStyle = css`
-	padding: 2px;
+	&:last-child {
+		margin-right: -2px;
+	}
 `;
 
 const closeButtonStyle = css`
 	position: absolute;
 	top: 0;
 	right: 0;
-	margin: 12px;
-	padding: 0;
+	margin: 8px;
 
 	z-index: 10;
 `;
@@ -169,7 +169,7 @@ const DataViewerModalHandle = (props: DataViewerModalHandleProps) => {
 
 	return (
 		<>
-			<IconButton css={fullscreenButtonStyle} onClick={() => setShowModal(true)}>
+			<IconButton css={buttonStyle} onClick={() => setShowModal(true)}>
 				<svg
 					height="20"
 					viewBox="0 0 20 20"
@@ -254,13 +254,13 @@ export const DataViewer = (props: DataViewerProps) => {
 		>
 			<div css={[controlsStyle, simple && simpleControlsStyle]}>
 				{!simple && <ModeSelect modes={MODES} value={mode} onChange={setMode} />}
-				{copyToClipboard && <CopyToClipboardButton value={copyToClipboardValue} css={copyButtonStyle} />}
+				{copyToClipboard && <CopyToClipboardButton value={copyToClipboardValue} css={buttonStyle} />}
 				{!simple &&
 					<DataViewerModalHandle>
 						<div css={dataViewerStyle}>
 							<div css={[controlsStyle]}>
 								<ModeSelect modes={MODES} value={mode} onChange={setMode} />
-								{copyToClipboard && <CopyToClipboardButton value={copyToClipboardValue} css={copyButtonStyle} />}
+								{copyToClipboard && <CopyToClipboardButton value={copyToClipboardValue} css={buttonStyle} />}
 							</div>
 							<div css={scrollAreaStyle}>
 								{mode === "json" && jsonContent}
diff --git a/src/components/InfoTable.tsx b/src/components/InfoTable.tsx
index 6130e5f1..a6494b6a 100644
--- a/src/components/InfoTable.tsx
+++ b/src/components/InfoTable.tsx
@@ -75,7 +75,8 @@ const valueStyle = css`
 `;
 
 const copyButtonStyle = css`
-	margin-left: 16px;
+	margin: -4px 0;
+	margin-left: 12px;
 `;
 
 type InfoTableDataFn<T, A extends any[], R> = (data: T, ...additionalData: A) => R;
diff --git a/src/components/blocks/BlockInfoTable.tsx b/src/components/blocks/BlockInfoTable.tsx
index edf3b2c0..af92cba4 100644
--- a/src/components/blocks/BlockInfoTable.tsx
+++ b/src/components/blocks/BlockInfoTable.tsx
@@ -84,7 +84,11 @@ export const BlockInfoTable = (props: BlockInfoTableProps) => {
 			/>
 			<BlockInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.specVersion}
+				render={(data) =>
+					<Link to={`/${data.network.name}/runtime/${data.specVersion}`}>
+						{data.specVersion}
+					</Link>
+				}
 			/>
 		</InfoTable>
 
diff --git a/src/components/blocks/BlocksTable.tsx b/src/components/blocks/BlocksTable.tsx
index 1de9068b..eadaa3f7 100644
--- a/src/components/blocks/BlocksTable.tsx
+++ b/src/components/blocks/BlocksTable.tsx
@@ -5,6 +5,7 @@ import { PaginatedResource } from "../../model/paginatedResource";
 import { AccountAddress } from "../account/AccountAddress";
 
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
+import { Link } from "../Link";
 import { Time } from "../Time";
 
 import { BlockLink } from "./BlockLink";
@@ -47,7 +48,11 @@ function ExtrinsicsTable(props: BlocksTableProps) {
 			/>
 			<BlocksTableAttribute
 				label="Spec version"
-				render={(block) => block.specVersion}
+				render={(block) =>
+					<Link to={`/${block.network.name}/runtime/${block.specVersion}`}>
+						{block.specVersion}
+					</Link>
+				}
 			/>
 			{showValidator &&
 				<BlocksTableAttribute
diff --git a/src/components/calls/CallInfoTable.tsx b/src/components/calls/CallInfoTable.tsx
index bf8f4b3d..0359621a 100644
--- a/src/components/calls/CallInfoTable.tsx
+++ b/src/components/calls/CallInfoTable.tsx
@@ -13,13 +13,15 @@ import { AccountAddress } from "../account/AccountAddress";
 import { BlockLink } from "../blocks/BlockLink";
 import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
 
-import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
+import { Link } from "../Link";
 import { NetworkBadge } from "../NetworkBadge";
 import { Time } from "../Time";
 
 import { CallLink } from "./CallLink";
+import { CallNameButton } from "./CallNameButton";
+import { CallRuntimeMetadataButton } from "./CallRuntimeMetadataButton";
 
 export type CallInfoTableProps = {
 	network: Network;
@@ -105,13 +107,10 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			<CallInfoTableAttribute
 				label="Name"
 				render={(data) =>
-					<ButtonLink
-						to={`/search/extrinsics?query=${data.palletName}.${data.callName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{data.palletName}.{data.callName}
-					</ButtonLink>
+					<>
+						<CallNameButton call={data} />
+						{data.metadata.call && <CallRuntimeMetadataButton call={data} />}
+					</>
 				}
 			/>
 			<CallInfoTableAttribute
@@ -127,7 +126,11 @@ export const CallInfoTable = (props: CallInfoTableProps) => {
 			/>
 			<CallInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.specVersion}
+				render={(data) =>
+					<Link to={`/${data.network.name}/runtime/${data.specVersion}`}>
+						{data.specVersion}
+					</Link>
+				}
 			/>
 		</InfoTable>
 	);
diff --git a/src/components/calls/CallNameButton.tsx b/src/components/calls/CallNameButton.tsx
new file mode 100644
index 00000000..2ddcc552
--- /dev/null
+++ b/src/components/calls/CallNameButton.tsx
@@ -0,0 +1,29 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+import { Call } from "../../model/call";
+
+import { ButtonLink } from "../ButtonLink";
+
+const buttonStyle = css`
+	margin: -4px 0;
+`;
+
+export interface CallNameButtonProps {
+	call: Call;
+}
+
+export const CallNameButton = (props: CallNameButtonProps) => {
+	const {call} = props;
+
+	return (
+		<ButtonLink
+			to={`/search/extrinsics?query=${call.palletName}.${call.callName}&network=${call.network.name}`}
+			size="small"
+			color="secondary"
+			css={buttonStyle}
+		>
+			{call.palletName}.{call.callName}
+		</ButtonLink>
+	);
+};
diff --git a/src/components/calls/CallRuntimeMetadataButton.tsx b/src/components/calls/CallRuntimeMetadataButton.tsx
new file mode 100644
index 00000000..94c50078
--- /dev/null
+++ b/src/components/calls/CallRuntimeMetadataButton.tsx
@@ -0,0 +1,23 @@
+import { Call } from "../../model/call";
+
+import { RuntimeMetadataButton } from "../runtime/RuntimeMetadataButton";
+
+export interface CallRuntimeMetadataButtonProps {
+	call: Call;
+}
+
+export const CallRuntimeMetadataButton = (props: CallRuntimeMetadataButtonProps) => {
+	const {call} = props;
+
+	if (!call.metadata.call) {
+		return null;
+	}
+
+	return (
+		<RuntimeMetadataButton
+			title={`${call.palletName}.${call.callName}`}
+			description={call.metadata.call.description}
+			link={`/${call.network.name}/runtime/${call.specVersion}/${call.palletName}/calls/${call.callName}`}
+		/>
+	);
+};
diff --git a/src/components/calls/CallsTable.tsx b/src/components/calls/CallsTable.tsx
index a36205ac..ab83b9db 100644
--- a/src/components/calls/CallsTable.tsx
+++ b/src/components/calls/CallsTable.tsx
@@ -9,6 +9,7 @@ import { ButtonLink } from "../ButtonLink";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 
 import { CallLink } from "./CallLink";
+import { CallNameButton } from "./CallNameButton";
 
 export type CallsTableProps = {
 	network: Network;
@@ -41,15 +42,7 @@ export const CallsTable = (props: CallsTableProps) => {
 			/>
 			<CallsTableAttribute
 				label="Name"
-				render={(call) =>
-					<ButtonLink
-						to={`/search/extrinsics?query=${call.palletName}.${call.callName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{call.palletName}.{call.callName}
-					</ButtonLink>
-				}
+				render={(call) => <CallNameButton call={call} />}
 			/>
 			{showAccount && (
 				<CallsTableAttribute
diff --git a/src/components/events/EventInfoTable.tsx b/src/components/events/EventInfoTable.tsx
index 5d04100a..93a13423 100644
--- a/src/components/events/EventInfoTable.tsx
+++ b/src/components/events/EventInfoTable.tsx
@@ -6,12 +6,15 @@ import { BlockLink } from "../blocks/BlockLink";
 import { CallLink } from "../calls/CallLink";
 import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
 
-import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
+import { Link } from "../Link";
 import { NetworkBadge } from "../NetworkBadge";
 import { Time } from "../Time";
 
+import { EventNameButton } from "./EventNameButton";
+import { EventRuntimeMetadataButton } from "./EventRuntimeMetadataButton";
+
 export type EventInfoTableProps = {
 	network: Network;
 	event: Resource<Event>;
@@ -72,13 +75,10 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 			<EventInfoTableAttribute
 				label="Name"
 				render={(data) =>
-					<ButtonLink
-						to={`/search/events?query=${data.palletName}.${data.eventName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{data.palletName}.{data.eventName}
-					</ButtonLink>
+					<>
+						<EventNameButton event={data} />
+						{data.metadata.event && <EventRuntimeMetadataButton event={data} />}
+					</>
 				}
 			/>
 			<EventInfoTableAttribute
@@ -95,7 +95,11 @@ export const EventInfoTable = (props: EventInfoTableProps) => {
 			/>
 			<EventInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.specVersion}
+				render={(data) =>
+					<Link to={`/${data.network.name}/runtime/${data.specVersion}`}>
+						{data.specVersion}
+					</Link>
+				}
 			/>
 		</InfoTable>
 	);
diff --git a/src/components/events/EventNameButton.tsx b/src/components/events/EventNameButton.tsx
new file mode 100644
index 00000000..04f79aec
--- /dev/null
+++ b/src/components/events/EventNameButton.tsx
@@ -0,0 +1,29 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+import { Event } from "../../model/event";
+
+import { ButtonLink } from "../ButtonLink";
+
+const buttonStyle = css`
+	margin: -4px 0;
+`;
+
+export interface EventNameButtonProps {
+	event: Event;
+}
+
+export const EventNameButton = (props: EventNameButtonProps) => {
+	const {event} = props;
+
+	return (
+		<ButtonLink
+			to={`/search/events?query=${event.palletName}.${event.eventName}&network=${event.network.name}`}
+			size="small"
+			color="secondary"
+			css={buttonStyle}
+		>
+			{event.palletName}.{event.eventName}
+		</ButtonLink>
+	);
+};
diff --git a/src/components/events/EventRuntimeMetadataButton.tsx b/src/components/events/EventRuntimeMetadataButton.tsx
new file mode 100644
index 00000000..e1ae3e87
--- /dev/null
+++ b/src/components/events/EventRuntimeMetadataButton.tsx
@@ -0,0 +1,23 @@
+import { Event } from "../../model/event";
+
+import { RuntimeMetadataButton } from "../runtime/RuntimeMetadataButton";
+
+export interface EventRuntimeMetadataButtonProps {
+	event: Event;
+}
+
+export const EventRuntimeMetadataButton = (props: EventRuntimeMetadataButtonProps) => {
+	const {event} = props;
+
+	if (!event.metadata.event) {
+		return null;
+	}
+
+	return (
+		<RuntimeMetadataButton
+			title={`${event.palletName}.${event.eventName}`}
+			description={event.metadata.event.description}
+			link={`/${event.network.name}/runtime/${event.specVersion}/${event.palletName}/events/${event.eventName}`}
+		/>
+	);
+};
diff --git a/src/components/events/EventsTable.tsx b/src/components/events/EventsTable.tsx
index bd5a09d1..50f89383 100644
--- a/src/components/events/EventsTable.tsx
+++ b/src/components/events/EventsTable.tsx
@@ -12,6 +12,7 @@ import { DataViewer } from "../DataViewer";
 import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 
 import { EventLink } from "./EventLink";
+import { EventNameButton } from "./EventNameButton";
 
 const parametersColCss = (showExtrinsic?: boolean) => css`
 	width: ${showExtrinsic ? "40%" : "60%"};
@@ -48,15 +49,7 @@ function EventsTable(props: EventsTableProps) {
 			/>
 			<EventsItemsTableAttribute
 				label="Name"
-				render={(event) =>
-					<ButtonLink
-						to={`/search/events?query=${event.palletName}.${event.eventName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{event.palletName}.{event.eventName}
-					</ButtonLink>
-				}
+				render={(event) => <EventNameButton event={event} />}
 			/>
 			{showExtrinsic && (
 				<EventsItemsTableAttribute
diff --git a/src/components/extrinsics/ExtrinsicInfoTable.tsx b/src/components/extrinsics/ExtrinsicInfoTable.tsx
index ed377b69..bc8a61ab 100644
--- a/src/components/extrinsics/ExtrinsicInfoTable.tsx
+++ b/src/components/extrinsics/ExtrinsicInfoTable.tsx
@@ -13,12 +13,15 @@ import { encodeAddress } from "../../utils/address";
 import { AccountAddress } from "../account/AccountAddress";
 import { BlockLink } from "../blocks/BlockLink";
 
-import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
 import { InfoTable, InfoTableAttribute } from "../InfoTable";
+import { Link } from "../Link";
 import { NetworkBadge } from "../NetworkBadge";
 import { Time } from "../Time";
 
+import { ExtrinsicNameButton } from "./ExtrinsicNameButton";
+import { ExtrinsicRuntimeMetadataButton } from "./ExtrinsicRuntimeMetadataButton";
+
 export type ExtrinsicInfoTableProps = {
 	network: Network;
 	extrinsic: Resource<Extrinsic>;
@@ -93,13 +96,10 @@ export const ExtrinsicInfoTable = (props: ExtrinsicInfoTableProps) => {
 			<ExtrinsicInfoTableAttribute
 				label="Name"
 				render={(data) =>
-					<ButtonLink
-						to={`/search/extrinsics?query=${data.palletName}.${data.callName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{data.palletName}.{data.callName}
-					</ButtonLink>
+					<>
+						<ExtrinsicNameButton extrinsic={data} />
+						{data.metadata.call && <ExtrinsicRuntimeMetadataButton extrinsic={data} />}
+					</>
 				}
 			/>
 			<ExtrinsicInfoTableAttribute
@@ -137,7 +137,11 @@ export const ExtrinsicInfoTable = (props: ExtrinsicInfoTableProps) => {
 			/>
 			<ExtrinsicInfoTableAttribute
 				label="Spec version"
-				render={(data) => data.specVersion}
+				render={(data) =>
+					<Link to={`/${data.network.name}/runtime/${data.specVersion}`}>
+						{data.specVersion}
+					</Link>
+				}
 			/>
 		</InfoTable>
 	);
diff --git a/src/components/extrinsics/ExtrinsicNameButton.tsx b/src/components/extrinsics/ExtrinsicNameButton.tsx
new file mode 100644
index 00000000..b52d2e1a
--- /dev/null
+++ b/src/components/extrinsics/ExtrinsicNameButton.tsx
@@ -0,0 +1,29 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+import { Extrinsic } from "../../model/extrinsic";
+
+import { ButtonLink } from "../ButtonLink";
+
+const buttonStyle = css`
+	margin: -4px 0;
+`;
+
+export interface ExtrinsicNameButtonProps {
+	extrinsic: Extrinsic;
+}
+
+export const ExtrinsicNameButton = (props: ExtrinsicNameButtonProps) => {
+	const {extrinsic} = props;
+
+	return (
+		<ButtonLink
+			to={`/search/extrinsics?query=${extrinsic.palletName}.${extrinsic.callName}&network=${extrinsic.network.name}`}
+			size="small"
+			color="secondary"
+			css={buttonStyle}
+		>
+			{extrinsic.palletName}.{extrinsic.callName}
+		</ButtonLink>
+	);
+};
diff --git a/src/components/extrinsics/ExtrinsicRuntimeMetadataButton.tsx b/src/components/extrinsics/ExtrinsicRuntimeMetadataButton.tsx
new file mode 100644
index 00000000..f21a3d71
--- /dev/null
+++ b/src/components/extrinsics/ExtrinsicRuntimeMetadataButton.tsx
@@ -0,0 +1,23 @@
+import { Extrinsic } from "../../model/extrinsic";
+
+import { RuntimeMetadataButton } from "../runtime/RuntimeMetadataButton";
+
+export interface ExtrinsicRuntimeMetadataButtonProps {
+	extrinsic: Extrinsic;
+}
+
+export const ExtrinsicRuntimeMetadataButton = (props: ExtrinsicRuntimeMetadataButtonProps) => {
+	const {extrinsic} = props;
+
+	if (!extrinsic.metadata.call) {
+		return null;
+	}
+
+	return (
+		<RuntimeMetadataButton
+			title={`${extrinsic.palletName}.${extrinsic.callName}`}
+			description={extrinsic.metadata.call.description}
+			link={`/${extrinsic.network.name}/runtime/${extrinsic.specVersion}/${extrinsic.palletName}/calls/${extrinsic.callName}`}
+		/>
+	);
+};
diff --git a/src/components/extrinsics/ExtrinsicsTable.tsx b/src/components/extrinsics/ExtrinsicsTable.tsx
index 7a5879d8..6f65411b 100644
--- a/src/components/extrinsics/ExtrinsicsTable.tsx
+++ b/src/components/extrinsics/ExtrinsicsTable.tsx
@@ -8,6 +8,7 @@ import { ItemsTable, ItemsTableAttribute } from "../ItemsTable";
 import { Time } from "../Time";
 
 import { ExtrinsicLink } from "./ExtrinsicLink";
+import { ExtrinsicNameButton } from "./ExtrinsicNameButton";
 
 export type ExtrinsicsTableProps = {
 	network: Network;
@@ -47,15 +48,7 @@ function ExtrinsicsTable(props: ExtrinsicsTableProps) {
 			/>
 			<ExtrinsicsTableAttribute
 				label="Name"
-				render={(extrinsic) =>
-					<ButtonLink
-						to={`/search/extrinsics?query=${extrinsic.palletName}.${extrinsic.callName}&network=${network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{extrinsic.palletName}.{extrinsic.callName}
-					</ButtonLink>
-				}
+				render={(extrinsic) => <ExtrinsicNameButton extrinsic={extrinsic} />}
 			/>
 			{showAccount &&
 				<ExtrinsicsTableAttribute
diff --git a/src/components/runtime/RuntimeMetadataButton.tsx b/src/components/runtime/RuntimeMetadataButton.tsx
new file mode 100644
index 00000000..3f5ae22c
--- /dev/null
+++ b/src/components/runtime/RuntimeMetadataButton.tsx
@@ -0,0 +1,54 @@
+/** @jsxImportSource @emotion/react */
+import { IconButton, Tooltip } from "@mui/material";
+import { AutoStories } from "@mui/icons-material";
+import { css } from "@emotion/react";
+
+import { Link } from "../Link";
+
+import { RuntimeMetadataDescription } from "./RuntimeMetadataDescription";
+
+const titleStyle = css`
+	font-weight: 700;
+	font-size: 16px;
+	margin: 0;
+`;
+
+const viewMoreStyle = css`
+	margin-top: 16px;
+	opacity: 0.5;
+	text-align: center;
+`;
+
+export interface RuntimeMetadataButtonProps {
+	title: string;
+	description: string;
+	link: string;
+}
+
+export const RuntimeMetadataButton = (props: RuntimeMetadataButtonProps) => {
+	const {title, description, link} = props;
+
+	return (
+		<Tooltip
+			arrow
+			placement="right"
+			title={
+				<>
+					<h2 css={titleStyle}>{title}</h2><br />
+					<RuntimeMetadataDescription lineClamp={4} darkMode>
+						{description}
+					</RuntimeMetadataDescription>
+					<div css={viewMoreStyle}>Click to view more</div>
+				</>
+			}
+		>
+			<IconButton
+				style={{margin: "-4px 0", marginLeft: 12}}
+				component={Link}
+				to={link}
+			>
+				<AutoStories />
+			</IconButton>
+		</Tooltip>
+	);
+};
diff --git a/src/components/runtime/RuntimeMetadataCallsTable.tsx b/src/components/runtime/RuntimeMetadataCallsTable.tsx
index 0352f1a9..06800a79 100644
--- a/src/components/runtime/RuntimeMetadataCallsTable.tsx
+++ b/src/components/runtime/RuntimeMetadataCallsTable.tsx
@@ -59,7 +59,7 @@ export function RuntimeMetadataCallsTable(props: ExtrinsicsTableProps) {
 			<RuntimeMetadataCallsTableAttribute
 				label="Description"
 				render={(data) => (
-					<RuntimeMetadataDescription onlyLine={1} ellipsis>
+					<RuntimeMetadataDescription lineClamp={1}>
 						{data.description}
 					</RuntimeMetadataDescription>
 				)}
diff --git a/src/components/runtime/RuntimeMetadataConstantsTable.tsx b/src/components/runtime/RuntimeMetadataConstantsTable.tsx
index ef877ccb..e0007b18 100644
--- a/src/components/runtime/RuntimeMetadataConstantsTable.tsx
+++ b/src/components/runtime/RuntimeMetadataConstantsTable.tsx
@@ -49,7 +49,7 @@ export function RuntimeMetadataConstantsTable(props: ConstantsTableProps) {
 			<RuntimeMetadataConstantsTableAttribute
 				label="Description"
 				render={(data) => (
-					<RuntimeMetadataDescription onlyLine={1} ellipsis>
+					<RuntimeMetadataDescription lineClamp={1}>
 						{data.description}
 					</RuntimeMetadataDescription>
 				)}
diff --git a/src/components/runtime/RuntimeMetadataDescription.tsx b/src/components/runtime/RuntimeMetadataDescription.tsx
index f5cac056..0670c8a0 100644
--- a/src/components/runtime/RuntimeMetadataDescription.tsx
+++ b/src/components/runtime/RuntimeMetadataDescription.tsx
@@ -2,7 +2,7 @@
 import Markdown from "react-markdown";
 import { css } from "@emotion/react";
 
-const descriptionStyle = css`
+const descriptionStyle = (darkMode?: boolean) => css`
 	padding: 16px;
 	padding: 0;;
 	height: 100%;
@@ -25,11 +25,12 @@ const descriptionStyle = css`
 
 	code {
 		padding: 2px 6px;
-		background-color: #f5f5f5;
-		background-color: rgba(0, 0, 0, .065);
 		border-radius: 8px;
 		font-size: 14px;
 		line-height: 20px;
+
+		${!darkMode && css`background-color: rgba(0, 0, 0, .065);`}
+		${darkMode && css`background-color: rgba(255, 255, 255, .2);`}
 	}
 
 	h1, h2, h3, h4, h5, h6 {
@@ -37,45 +38,36 @@ const descriptionStyle = css`
 	}
 `;
 
-const ellipsisStyle = css`
+const lineClampStyle = (lines: number ) => css`
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 1;
+	-webkit-line-clamp: ${lines};
 	overflow: hidden;
 `;
 
 export interface RuntimeMetadataDescription {
-	onlyLine?: number;
-	ellipsis?: boolean;
+	lineClamp?: number;
+	darkMode?: boolean;
 	className?: string;
 	children: string;
 }
 
 export const RuntimeMetadataDescription = (props: RuntimeMetadataDescription) => {
-	const {onlyLine, ellipsis, className, children} = props;
-
-	let text = children;
-
-	if (onlyLine) {
-		const lines = children.split("\n");
-		text = lines[onlyLine - 1] as string;
+	const {lineClamp, darkMode, className, children} = props;
 
-		if (ellipsis && lines.length > 1) {
-			text += " …";
-		}
-	}
+	const text = children;
 
 	return (
 		<Markdown
 			className={className}
 			css={[
-				descriptionStyle,
-				ellipsis && ellipsisStyle
+				descriptionStyle(darkMode),
+				lineClamp && lineClampStyle(lineClamp)
 			]}
 			disallowedElements={["a"]}
 			unwrapDisallowed
 		>
-			{text}
+			{text.replace(/\n/, "&nbsp;\n")}
 		</Markdown>
 	);
 };
diff --git a/src/components/runtime/RuntimeMetadataErrorsTable.tsx b/src/components/runtime/RuntimeMetadataErrorsTable.tsx
index a24a53ef..bf0ee35b 100644
--- a/src/components/runtime/RuntimeMetadataErrorsTable.tsx
+++ b/src/components/runtime/RuntimeMetadataErrorsTable.tsx
@@ -49,7 +49,7 @@ export function RuntimeMetadataErrorsTable(props: ErrorsTableProps) {
 			<RuntimeMetadataErrorsTableAttribute
 				label="Description"
 				render={(data) => (
-					<RuntimeMetadataDescription onlyLine={1} ellipsis>
+					<RuntimeMetadataDescription lineClamp={1}>
 						{data.description}
 					</RuntimeMetadataDescription>
 				)}
diff --git a/src/components/runtime/RuntimeMetadataEventsTable.tsx b/src/components/runtime/RuntimeMetadataEventsTable.tsx
index 8c6afeb0..f33930ce 100644
--- a/src/components/runtime/RuntimeMetadataEventsTable.tsx
+++ b/src/components/runtime/RuntimeMetadataEventsTable.tsx
@@ -58,7 +58,7 @@ export function RuntimeMetadataEventsTable(props: ExtrinsicsTableProps) {
 			<RuntimeMetadataEventsTableAttribute
 				label="Description"
 				render={(data) => (
-					<RuntimeMetadataDescription onlyLine={1} ellipsis>
+					<RuntimeMetadataDescription lineClamp={1}>
 						{data.description}
 					</RuntimeMetadataDescription>
 				)}
diff --git a/src/components/runtime/RuntimeMetadataStoragesTable.tsx b/src/components/runtime/RuntimeMetadataStoragesTable.tsx
index 440d90c3..763bdae5 100644
--- a/src/components/runtime/RuntimeMetadataStoragesTable.tsx
+++ b/src/components/runtime/RuntimeMetadataStoragesTable.tsx
@@ -58,7 +58,7 @@ export function RuntimeMetadataStoragesTable(props: StoragesTableProps) {
 			<RuntimeMetadataStoragesTableAttribute
 				label="Description"
 				render={(data) => (
-					<RuntimeMetadataDescription onlyLine={1} ellipsis>
+					<RuntimeMetadataDescription lineClamp={1}>
 						{data.description}
 					</RuntimeMetadataDescription>
 				)}
diff --git a/src/components/search/BlockSearchResultsTable.tsx b/src/components/search/BlockSearchResultsTable.tsx
index a5d702c9..ab8dbdd1 100644
--- a/src/components/search/BlockSearchResultsTable.tsx
+++ b/src/components/search/BlockSearchResultsTable.tsx
@@ -4,6 +4,7 @@ import { SearchResultItem } from "../../model/searchResultItem";
 
 import { AccountAddress } from "../account/AccountAddress";
 import { BlockLink } from "../blocks/BlockLink";
+import { Link } from "../Link";
 
 import { Time } from "../Time";
 
@@ -37,7 +38,9 @@ export const BlockSearchResultsTable = (props: BlockSearchResultsTable) => {
 			<SearchResultsTableItemAttribute<Block>
 				label="Spec version"
 				render={(block) =>
-					<>{block.specVersion}</>
+					<Link to={`/${block.network.name}/runtime/${block.specVersion}`}>
+						{block.specVersion}
+					</Link>
 				}
 			/>
 			<SearchResultsTableItemAttribute<Block>
diff --git a/src/components/search/EventSearchResultsTable.tsx b/src/components/search/EventSearchResultsTable.tsx
index 7ce4181c..2ac091d4 100644
--- a/src/components/search/EventSearchResultsTable.tsx
+++ b/src/components/search/EventSearchResultsTable.tsx
@@ -6,8 +6,8 @@ import { PaginatedResource } from "../../model/paginatedResource";
 
 import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
 import { EventLink } from "../events/EventLink";
+import { EventNameButton } from "../events/EventNameButton";
 
-import { ButtonLink } from "../ButtonLink";
 import { DataViewer } from "../DataViewer";
 
 import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
@@ -43,15 +43,7 @@ export const EventSearchResultsTable = (props: EventSearchResultsTable) => {
 			/>
 			<SearchResultsTableItemAttribute<Event>
 				label="Name"
-				render={(event) => (
-					<ButtonLink
-						to={`/search/events?query=${event.palletName}.${event.eventName}&network=${event.network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{event.palletName}.{event.eventName}
-					</ButtonLink>
-				)}
+				render={(event) => <EventNameButton event={event} />}
 			/>
 			<SearchResultsTableItemAttribute<Event>
 				label="Extrinsic"
diff --git a/src/components/search/ExtrinsicSearchResultsTable.tsx b/src/components/search/ExtrinsicSearchResultsTable.tsx
index 84e8a5f3..ea2bcbd7 100644
--- a/src/components/search/ExtrinsicSearchResultsTable.tsx
+++ b/src/components/search/ExtrinsicSearchResultsTable.tsx
@@ -4,9 +4,9 @@ import { SearchResultItem } from "../../model/searchResultItem";
 
 import { AccountAddress } from "../account/AccountAddress";
 
-import { ButtonLink } from "../ButtonLink";
 import { ExtrinsicLink } from "../extrinsics/ExtrinsicLink";
-import { Link } from "../Link";
+import { ExtrinsicNameButton } from "../extrinsics/ExtrinsicNameButton";
+
 import { Time } from "../Time";
 
 import { SearchResultsTable, SearchResultsTableItemAttribute, SearchResultsTableProps } from "./SearchResultsTable";
@@ -38,15 +38,7 @@ export const ExtrinsicSearchResultsTable = (props: ExtrinsicSearchResultsTable)
 			/>
 			<SearchResultsTableItemAttribute<Extrinsic>
 				label="Name"
-				render={(extrinsic) => (
-					<ButtonLink
-						to={`/search/extrinsics?query=${extrinsic.palletName}.${extrinsic.callName}&network=${extrinsic.network.name}`}
-						size="small"
-						color="secondary"
-					>
-						{extrinsic.palletName}.{extrinsic.callName}
-					</ButtonLink>
-				)}
+				render={(extrinsic) => <ExtrinsicNameButton extrinsic={extrinsic} />}
 			/>
 			<SearchResultsTableItemAttribute<Extrinsic>
 				label="Account"