diff --git a/components/Button.js b/components/Button.js
index 1a6fd19..c5c3cec 100644
--- a/components/Button.js
+++ b/components/Button.js
@@ -8,6 +8,7 @@ const Button = ({
   onClick = () => {},
   background = COLORS.BLACK,
   color = COLORS.SECONDARY,
+  textColor,
   hoverBackground = COLORS.HOVER,
   hoverColor,
   disabled,
@@ -33,7 +34,7 @@ const Button = ({
           display: ${display || 'flex'};
           flex: ${flex};
           background-color: ${background};
-          color: ${color};
+          color: ${textColor || color};
           box-shadow: ${border ? `inset 0px 0px 0px ${selected ? 2 : 1}px ${color}` : 'initial'};
           cursor: ${disabled ? 'not-allowed' : 'pointer'};
           outline: none;
diff --git a/components/ConfirmButton.js b/components/ConfirmButton.js
new file mode 100644
index 0000000..778d93b
--- /dev/null
+++ b/components/ConfirmButton.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import Button from './Button'
+
+export default function ConfirmButton(props) {
+  const [confirmed, setConfirmed] = React.useState(false)
+  return (
+    <Button
+      {...props}
+      onClick={e => {
+        if (confirmed) {
+          props.onClick(e)
+          setConfirmed(false)
+        } else {
+          setConfirmed(true)
+        }
+      }}
+      onBlur={() => setConfirmed(false)}
+    >
+      {confirmed ? 'Are you sure?' : props.children}
+    </Button>
+  )
+}
diff --git a/components/SnippetToolbar.js b/components/SnippetToolbar.js
index b0ed0d8..e6a11b5 100644
--- a/components/SnippetToolbar.js
+++ b/components/SnippetToolbar.js
@@ -3,31 +3,11 @@ import { useAsyncCallback, useOnline } from '@dawnlabs/tacklebox'
 
 import Button from './Button'
 import Toolbar from './Toolbar'
+import ConfirmButton from './ConfirmButton'
 import { useAuth } from './AuthContext'
 
 import { COLORS } from '../lib/constants'
 
-function ConfirmButton(props) {
-  const [confirmed, setConfirmed] = React.useState(false)
-
-  return (
-    <Button
-      {...props}
-      onClick={e => {
-        if (confirmed) {
-          props.onClick(e)
-          setConfirmed(false)
-        } else {
-          setConfirmed(true)
-        }
-      }}
-      onBlur={() => setConfirmed(false)}
-    >
-      {confirmed ? 'Are you sure?' : props.children}
-    </Button>
-  )
-}
-
 function DeleteButton(props) {
   const [onClick, { loading }] = useAsyncCallback(props.onClick)
 
diff --git a/pages/snippets.js b/pages/snippets.js
index 5e2e308..cc69edc 100644
--- a/pages/snippets.js
+++ b/pages/snippets.js
@@ -7,6 +7,7 @@ import { useAsyncCallback } from '@dawnlabs/tacklebox'
 
 import Button from '../components/Button'
 import LoginButton from '../components/LoginButton'
+import ConfirmButton from '../components/ConfirmButton'
 import { useAuth } from '../components/AuthContext'
 import { useAPI } from '../components/ApiContext'
 
@@ -29,95 +30,122 @@ function Snippet(props) {
   const config = { ...DEFAULT_SETTINGS, ...props, fontSize: '2px', windowControls: false }
 
   return (
-    <Link prefetch={false} href={`/${props.id}`}>
-      <a href={`/${props.id}`}>
-        <div className="snippet">
-          <div className="column">
-            <div className="carbon-container">
-              <Carbon key={config.language} readOnly={true} config={config} loading={props.loading}>
-                {props.code}
-              </Carbon>
-            </div>
-            <div className="id">{props.title || props.id}</div>
-            <div className="meta">
-              Edited {formatDistanceToNow(correctTimestamp(props.updatedAt), { addSuffix: true })}
-            </div>
-          </div>
+    <div className="snippet">
+      <div className="column">
+        <div className="carbon-container">
+          <Carbon key={config.language} readOnly={true} config={config} loading={props.loading}>
+            {props.code}
+          </Carbon>
         </div>
-        <style jsx>
-          {`
-            .snippet {
-              position: relative;
-              width: 266px;
-              height: 266px;
-              border: 1px solid ${COLORS.SECONDARY};
-              border-radius: 3px;
-              cursor: pointer !important;
-              overflow: hidden;
-            }
-            .snippet:hover {
-              background: ${COLORS.HOVER};
-            }
-            .snippet:hover:after {
-              position: absolute;
-              content: '↗';
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              background: ${COLORS.HOVER};
-              opacity: 0.8;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-              font-size: 48px;
-              z-index: 999;
-            }
-            .column {
-              display: flex;
-              flex-direction: column;
-              justify-content: space-between;
-              height: 100%;
-              overflow: hidden;
-            }
-            .id {
-              position: absolute;
-              top: 0.25rem;
-              right: 0.125rem;
-              border-radius: 3px;
-              background: ${COLORS.SECONDARY};
-              color: ${COLORS.BLACK};
-              font-size: 10px;
-              padding: 0.125rem;
-              max-width: 80%;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              overflow: hidden;
-              z-index: 200;
-            }
-            .carbon-container {
-              width: 100%;
-              height: 100%;
-
-              overflow: hidden;
-              color: ${COLORS.SECONDARY};
-              width: 266px;
-            }
-            .carbon-container :global(.CodeMirror__container .CodeMirror span) {
-              font-size: 2px !important;
-            }
-            .meta {
-              background: ${COLORS.SECONDARY};
-              color: ${COLORS.DARK_GRAY};
-              width: 100%;
-              font-size: 10px;
-              padding: 0.24rem;
-              bottom: 0px;
-            }
-          `}
-        </style>
-      </a>
-    </Link>
+        <div className="id">{props.title || props.id}</div>
+        <div className="meta">
+          Edited {formatDistanceToNow(correctTimestamp(props.updatedAt), { addSuffix: true })}
+        </div>
+      </div>
+      <div className="overlay">
+        <Link prefetch={false} href={`/${props.id}`}>
+          <Button
+            large
+            border
+            center
+            flex="unset"
+            margin="0 auto 1.5rem"
+            padding="0.5rem 16px"
+            color="#fff"
+          >
+            Open ↗
+          </Button>
+        </Link>
+        <ConfirmButton
+          large
+          border
+          center
+          flex="unset"
+          margin="0 auto"
+          padding="0.5rem 20px"
+          color="#fff"
+          textColor={COLORS.RED}
+          hoverColor={COLORS.RED}
+          onClick={props.deleteSnippet}
+        >
+          Delete
+        </ConfirmButton>
+      </div>
+      <style jsx>
+        {`
+          .snippet {
+            position: relative;
+            width: 266px;
+            height: 266px;
+            border: 1px solid ${COLORS.SECONDARY};
+            border-radius: 3px;
+            cursor: pointer !important;
+            overflow: hidden;
+          }
+          .overlay {
+            display: none;
+            position: absolute;
+            content: '↗';
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: ${COLORS.HOVER};
+            opacity: 0.8;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+            font-size: 48px;
+            z-index: 999;
+          }
+          .snippet:hover .overlay {
+            display: flex;
+            background: ${COLORS.HOVER};
+          }
+          .column {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%;
+            overflow: hidden;
+          }
+          .id {
+            position: absolute;
+            top: 0.25rem;
+            right: 0.25rem;
+            border-radius: 3px;
+            background: ${COLORS.SECONDARY};
+            color: ${COLORS.BLACK};
+            font-size: 10px;
+            padding: 0.125rem;
+            max-width: 80%;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            z-index: 200;
+          }
+          .carbon-container {
+            width: 100%;
+            height: 100%;
+
+            overflow: hidden;
+            color: ${COLORS.SECONDARY};
+            width: 266px;
+          }
+          .carbon-container :global(.CodeMirror__container .CodeMirror span) {
+            font-size: 2px !important;
+          }
+          .meta {
+            background: ${COLORS.SECONDARY};
+            color: ${COLORS.DARK_GRAY};
+            width: 100%;
+            font-size: 10px;
+            padding: 0.24rem;
+            bottom: 0px;
+          }
+        `}
+      </style>
+    </div>
   )
 }
 
@@ -127,9 +155,9 @@ function ActionButton(props) {
       border
       center
       margin="0.5rem"
-      flex="0 0 266px"
+      flex="unset"
       color={COLORS.GRAY}
-      style={{ minHeight: 266 }}
+      style={{ width: 266, minHeight: 266 }}
       {...props}
     />
   )
@@ -164,6 +192,10 @@ function SnippetsPage() {
     }
   }, [loadMore, page, user])
 
+  function deleteSnippet(id) {
+    return api.snippet.delete(id).then(() => setSnippets(curr => curr.filter(s => s.id !== id)))
+  }
+
   if (!user) {
     return <LoginButton />
   }
@@ -171,7 +203,12 @@ function SnippetsPage() {
   return (
     <div className="container">
       {snippets.map(snippet => (
-        <Snippet key={snippet.id} {...snippet} loading={!mounted} />
+        <Snippet
+          key={snippet.id}
+          {...snippet}
+          loading={!mounted}
+          deleteSnippet={deleteSnippet.bind(null, snippet.id)}
+        />
       ))}
       {snippets.length && previousRes && previousRes.length < 10 ? null : (
         <ActionButton