diff --git a/components/Editor.js b/components/Editor.js
index 6196a54..662bd82 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -451,6 +451,8 @@ class Editor extends React.Component {
             snippet={this.props.snippet}
             onCreate={this.handleSnippetCreate}
             onDelete={this.handleSnippetDelete}
+            name={config.name}
+            onChange={this.updateSetting}
           />
         )}
         <FontFace {...config} />
diff --git a/components/Input.js b/components/Input.js
index 855e8ea..34c4f21 100644
--- a/components/Input.js
+++ b/components/Input.js
@@ -3,7 +3,17 @@ import React from 'react'
 import { COLORS } from '../lib/constants'
 
 const Input = React.forwardRef(
-  ({ color = COLORS.SECONDARY, align = 'right', width = '100%', label, ...props }, ref) => (
+  (
+    {
+      color = COLORS.SECONDARY,
+      align = 'right',
+      width = '100%',
+      fontSize = '12px',
+      label,
+      ...props
+    },
+    ref
+  ) => (
     <React.Fragment>
       {label && <label>{label}</label>}
       <input ref={ref} {...props} />
@@ -11,7 +21,7 @@ const Input = React.forwardRef(
         {`
           input {
             width: ${width};
-            font-size: 12px;
+            font-size: ${fontSize};
             color: ${color};
             background: transparent;
             border: none;
diff --git a/components/SnippetToolbar.js b/components/SnippetToolbar.js
index 9d2ea53..c4a6e3c 100644
--- a/components/SnippetToolbar.js
+++ b/components/SnippetToolbar.js
@@ -3,6 +3,7 @@ import { useAsyncCallback, useOnline } from 'actionsack'
 
 import Button from './Button'
 import Toolbar from './Toolbar'
+import Input from './Input'
 import ConfirmButton from './ConfirmButton'
 import { useAuth } from './AuthContext'
 
@@ -52,17 +53,9 @@ function SnippetToolbar(props) {
   const user = useAuth()
   const online = useOnline()
 
-  if (!online) {
-    return null
-  }
-
-  if (!user) {
-    return null
-  }
-
-  if (!props.snippet) {
-    return null
-  }
+  if (!online) return null
+  if (!user) return null
+  if (!props.snippet) return null
 
   const sameUser = user.uid === props.snippet.userId
 
@@ -72,12 +65,22 @@ function SnippetToolbar(props) {
         marginTop: 16,
         marginBottom: 0,
         flexDirection: 'row-reverse',
+        alignItems: 'center',
         // justifyContent: 'space-between',
         zIndex: 1,
       }}
     >
       <DuplicateButton onClick={props.onCreate} />
       {sameUser && <DeleteButton onClick={props.onDelete} />}
+      <div style={{ marginRight: 'auto' }}>
+        <Input
+          align="left"
+          placeholder="Add a name…"
+          fontSize="14px"
+          value={props.name}
+          onChange={e => props.onChange('name', e.target.value)}
+        />
+      </div>
     </Toolbar>
   )
 }
diff --git a/lib/constants.js b/lib/constants.js
index 85c10d8..2a0e238 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -1083,6 +1083,7 @@ export const DEFAULT_SETTINGS = {
   watermark: false,
   squaredImage: false,
   hiddenCharacters: false,
+  name: '',
 }
 
 export const DEFAULT_PRESETS = [
diff --git a/lib/util.js b/lib/util.js
index a1bb1f2..c89d00d 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -25,6 +25,7 @@ export const saveSettings = morph.compose(
     'highlights',
     'fontUrl',
     'selectedLines',
+    'name',
   ])
 )
 export const savePresets = morph.compose(
diff --git a/pages/snippets.js b/pages/snippets.js
index 8740b6d..5112fcb 100644
--- a/pages/snippets.js
+++ b/pages/snippets.js
@@ -8,16 +8,14 @@ import { useAsyncCallback } from 'actionsack'
 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'
-
 import { MetaLinks } from '../components/Meta'
 import Carbon from '../components/Carbon'
+import Page from '../components/Page'
 
-import { COLORS, DEFAULT_SETTINGS } from '../lib/constants'
+import { useAuth } from '../components/AuthContext'
+import { useAPI } from '../components/ApiContext'
 
-// Ours
-import Page from '../components/Page'
+import { COLORS, DEFAULT_SETTINGS } from '../lib/constants'
 
 function correctTimestamp(n) {
   if (n < 9e12) {
@@ -37,7 +35,7 @@ function Snippet(props) {
             {props.code}
           </Carbon>
         </div>
-        <div className="id">{props.title || props.id}</div>
+        <div className="id">{props.name || props.title || props.id}</div>
         <div className="meta">
           Edited {formatDistanceToNow(correctTimestamp(props.updatedAt), { addSuffix: true })}
         </div>