diff --git a/src/app/registers/RegisterBrowser.tsx b/src/app/registers/RegisterBrowser.tsx
index 567119a..a55eda0 100644
--- a/src/app/registers/RegisterBrowser.tsx
+++ b/src/app/registers/RegisterBrowser.tsx
@@ -1,10 +1,12 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { Register, RegisterAccess, Note } from '@/utils/register_parser';
-import { Form, Container, Row, Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { useEffect, useMemo, useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Register, RegisterAccess, Note } from "@/utils/register_parser";
+import { Form, Row, Table, OverlayTrigger, Tooltip } from "react-bootstrap";
 import RegisterDetail from "@/app/registers/RegisterDetail";
+import ExplorerLayout from "@/components/explorer/ExplorerLayout";
+import FilterSidebar from "@/components/explorer/FilterSidebar";
 
 interface RegisterBrowserProps {
   registers: Register[];
@@ -73,7 +75,7 @@ export function renderAccess(access: RegisterAccess, extraNotes: Note[] = []) {
  * @returns A React component that allows users to browse and search registers.
  */
 export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
@@ -102,30 +104,42 @@ export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
     router.replace(url, { scroll: false });
   };
 
-  const filteredRegisters = registers.filter(register =>
-    register.search.includes(searchTerm.toLowerCase())
-  );
-
+  const filteredRegisters = useMemo(() => (
+    registers.filter((register) => register.search.includes(searchTerm.toLowerCase()))
+  ), [registers, searchTerm]);
 
   return (
-    <Container fluid>
-      <Form.Group className="mb-3">
-        <Form.Control
-          type="text"
-          placeholder="Search registers..."
-          value={searchTerm}
-          onChange={e => {
-            const v = e.target.value;
-            setSearchTerm(v);
-            updateQueryString(v);
-          }}
-        />
-      </Form.Group>
+    <ExplorerLayout
+      title="NextReg Explorer"
+      subtitle={`${filteredRegisters.length.toLocaleString()} results`}
+      chips={searchTerm ? [`q: ${searchTerm}`] : []}
+      onClearChips={() => {
+        setSearchTerm("");
+        updateQueryString("");
+      }}
+      sidebar={(
+        <FilterSidebar>
+          <Form.Group>
+            <Form.Label className="form-label small text-secondary">Search</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Search registers..."
+              value={searchTerm}
+              onChange={(e) => {
+                const v = e.target.value;
+                setSearchTerm(v);
+                updateQueryString(v);
+              }}
+            />
+          </Form.Group>
+        </FilterSidebar>
+      )}
+    >
       <Row>
-        {filteredRegisters.map(register => (
-              <RegisterDetail key={register.hex_address} register={register} />
+        {filteredRegisters.map((register) => (
+          <RegisterDetail key={register.hex_address} register={register} />
         ))}
       </Row>
-    </Container>
+    </ExplorerLayout>
   );
 }
diff --git a/src/app/registers/page.tsx b/src/app/registers/page.tsx
index ecb4bc0..2ada820 100644
--- a/src/app/registers/page.tsx
+++ b/src/app/registers/page.tsx
@@ -6,7 +6,6 @@ export default async function RegistersPage() {
 
   return (
     <div className="container-fluid py-4">
-      <h1 className="mb-4">NextReg Explorer</h1>
       <RegisterBrowser registers={registers} />
     </div>
   );