diff --git a/frontend/src/app/patterns/[slug]/page.tsx b/frontend/src/app/patterns/[slug]/page.tsx
index 692e804..2e7c269 100644
--- a/frontend/src/app/patterns/[slug]/page.tsx
+++ b/frontend/src/app/patterns/[slug]/page.tsx
@@ -14,7 +14,7 @@ import {
   RelatedPatterns,
 } from "@/components/patterns";
 import { PatternVisualization } from "@/components/visualization";
-import { TwoPointersVisualization, PrefixSumVisualization, LinkedListVisualization, MonotonicStackVisualization, TreeTraversalVisualization, BFSVisualization, DFSVisualization, CoinChangeVisualization, BacktrackingVisualization, HeapVisualization, GreedyVisualization, IntervalsVisualization, MatrixTraversalVisualization, TrieVisualization, UnionFindVisualization } from "@/components/visualizations-new";
+import { TwoPointersVisualization, PrefixSumVisualization, LinkedListVisualization, MonotonicStackVisualization, TreeTraversalVisualization, BFSVisualization, DFSVisualization, CoinChangeVisualization, BacktrackingVisualization, HeapVisualization, GreedyVisualization, IntervalsVisualization, MatrixTraversalVisualization, TrieVisualization, UnionFindVisualization, BitManipulationVisualization } from "@/components/visualizations-new";
 import { twoSumAlgorithm } from "@/content/algorithms/two-sum";
 import { slidingWindowAlgorithm } from "@/content/algorithms/sliding-window";
 import { binarySearchAlgorithm } from "@/content/algorithms/binary-search";
@@ -33,6 +33,7 @@ import { mergeIntervalsAlgorithm } from "@/content/algorithms/merge-intervals";
 import { numberOfIslandsAlgorithm } from "@/content/algorithms/number-of-islands";
 import { implementTrieAlgorithm } from "@/content/algorithms/implement-trie";
 import { redundantConnectionAlgorithm } from "@/content/algorithms/redundant-connection";
+import { singleNumberAlgorithm } from "@/content/algorithms/single-number";
 
 interface PageProps {
   params: Promise<{ slug: string }>;
@@ -161,6 +162,8 @@ export default async function PatternDetailPage({ params }: PageProps) {
         <TrieVisualization algorithm={implementTrieAlgorithm} />
       ) : slug === "union-find" ? (
         <UnionFindVisualization algorithm={redundantConnectionAlgorithm} />
+      ) : slug === "bit-manipulation" ? (
+        <BitManipulationVisualization algorithm={singleNumberAlgorithm} />
       ) : pattern.visualization_examples && pattern.visualization_examples.length > 0 ? (
         <Card>
           <CardHeader>
diff --git a/frontend/src/components/visualizations-new/index.ts b/frontend/src/components/visualizations-new/index.ts
index 21fb955..ed042e6 100644
--- a/frontend/src/components/visualizations-new/index.ts
+++ b/frontend/src/components/visualizations-new/index.ts
@@ -20,6 +20,7 @@ export { HeapNode } from "./primitives/heap-node";
 export { IntervalBar } from "./primitives/interval-bar";
 export { TrieNode } from "./primitives/trie-node";
 export { UnionFindNode } from "./primitives/union-find-node";
+export { BitDisplay } from "./primitives/bit-display";
 
 // Data structures
 export { ArrayView } from "./data-structures/array-view";
@@ -33,6 +34,7 @@ export { HeapView } from "./data-structures/heap-view";
 export { IntervalView } from "./data-structures/interval-view";
 export { TrieView } from "./data-structures/trie-view";
 export { UnionFindView } from "./data-structures/union-find-view";
+export { BitManipulationView, BitXORSequence, BitArrayWithBinary } from "./data-structures/bit-manipulation-view";
 
 // Algorithm visualizations
 export { MonotonicStackVisualization } from "./algorithms/monotonic-stack";
@@ -50,3 +52,4 @@ export { IntervalsVisualization } from "./algorithms/intervals";
 export { MatrixTraversalVisualization } from "./algorithms/matrix-traversal";
 export { TrieVisualization } from "./algorithms/trie";
 export { UnionFindVisualization } from "./algorithms/union-find";
+export { BitManipulationVisualization } from "./algorithms/bit-manipulation";