diff --git a/web/src/components/SampleList.tsx b/web/src/components/SampleList.tsx
index b53d821..410e9fa 100644
--- a/web/src/components/SampleList.tsx
+++ b/web/src/components/SampleList.tsx
@@ -16,7 +16,7 @@ export const SampleList: FC<{ pack: string }> = ({ pack }) => {
             <h2 className="px-2 text-md font-bold pt-1">Samples</h2>
             <ul>
                 {samples?.map((sample, index) => (
-                    <SampleTray key={index} sample={sample} />
+                    <SampleTray key={index} sampleId={sample} packId={pack} />
                 ))}
             </ul>
         </div>
diff --git a/web/src/components/SampleTray.tsx b/web/src/components/SampleTray.tsx
index 65fa5ea..46427c1 100644
--- a/web/src/components/SampleTray.tsx
+++ b/web/src/components/SampleTray.tsx
@@ -1,14 +1,26 @@
 import { FC } from 'react';
-import { FaPlay } from 'react-icons/fa';
+import { FaDownload, FaPlay } from 'react-icons/fa';
 
-export const SampleTray: FC<{ sample: string }> = ({ sample }) => {
+export const SampleTray: FC<{ packId: string; sampleId: string }> = ({
+    packId,
+    sampleId,
+}) => {
     return (
         <li className="flex items-center gap-2 p-2 border-b border-neutral-200 hover:bg-neutral-300/10">
             <div className="w-10 h-10 rounded-sm bg-neutral-200 flex items-center justify-center text-neutral-500">
                 <FaPlay />
             </div>
+            <div className="flex-1">
+                <h3 className="text-base">{sampleId}</h3>
+            </div>
             <div>
-                <h3 className="text-base">{sample}</h3>
+                <a
+                    href={`https://github.com/v3xlabs/sample-rip/raw/master/samples/${packId}/${sampleId}`}
+                    target="_blank"
+                    className="btn !py-2 flex"
+                >
+                    <FaDownload />
+                </a>
             </div>
         </li>
     );