diff --git a/src/page-components/pattern-library/PatternDetail.tsx b/src/page-components/pattern-library/PatternDetail.tsx
index dc02467..4f42c2a 100644
--- a/src/page-components/pattern-library/PatternDetail.tsx
+++ b/src/page-components/pattern-library/PatternDetail.tsx
@@ -3,6 +3,7 @@ import { ask } from '@tauri-apps/plugin-dialog';
 import dayjs from 'dayjs';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { FC, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { NotificationType, useNotification } from '../../components/Notifications';
 import PatternPreview from '../../components/PatternPreview';
 import {
@@ -27,6 +28,7 @@ const EmptyPromption: FC = () => {
 
 const Detail: FC<{ pattern: Pattern }> = ({ pattern }) => {
   const { showToast } = useNotification();
+  const navigate = useNavigate();
   const refreshPatterns = useSetAtom(PatternsAtom);
   const resetSelected = useSetAtom(SelectedPatternIdAtom);
   const patternDuration = useMemo(() => totalDuration(pattern), [pattern]);
@@ -60,7 +62,9 @@ const Detail: FC<{ pattern: Pattern }> = ({ pattern }) => {
     <div className={styles.pattern_detail}>
       <div className={styles.control_panel}>
         <div className={styles.button_row}>
-          <button className="tonal">Edit Pattern</button>
+          <button className="tonal" onClick={() => navigate('/pattern-editor/edit')}>
+            Edit Pattern
+          </button>
           <button className="tonal danger" onClick={handleDeleteAction}>
             Delete Pattern
           </button>