diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 8dab6854..e6c58e0d 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -322,6 +322,19 @@ class Nav extends React.PureComponent {
                   Open
                 </Link>
               </li> }
+              { __process.env.UI_COLLECTIONS_ENABLED &&
+                this.props.user.authenticated &&
+                this.props.project.id &&
+                <li className="nav__dropdown-item">
+                  <Link
+                    to={`/${this.props.user.username}/sketches/${this.props.project.id}/add-to-collection`}
+                    onFocus={this.handleFocusForFile}
+                    onBlur={this.handleBlur}
+                    onClick={this.setDropdownForNone}
+                  >
+                    Add to Collection
+                  </Link>
+                </li> }
               { __process.env.EXAMPLES_ENABLED &&
               <li className="nav__dropdown-item">
                 <Link
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index e97a8d88..43defae4 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -30,6 +30,7 @@ import * as ConsoleActions from '../actions/console';
 import { getHTMLFile } from '../reducers/files';
 import Overlay from '../../App/components/Overlay';
 import About from '../components/About';
+import CollectionList from '../components/CollectionList';
 import Feedback from '../components/Feedback';
 
 class IDEView extends React.Component {
@@ -381,6 +382,20 @@ class IDEView extends React.Component {
             <Feedback previousPath={this.props.ide.previousPath} />
           </Overlay>
         }
+        {this.props.location.pathname.match(/add-to-collection$/) &&
+          <Overlay
+            ariaLabel="add to collection"
+            title="Add sketch to collection"
+            previousPath={this.props.ide.previousPath}
+          >
+            <CollectionList
+              addMode
+              projectId={this.props.params.project_id}
+              username={this.props.params.username}
+              user={this.props.user}
+            />
+          </Overlay>
+        }
         {this.props.ide.shareModalVisible &&
           <Overlay
             title="Share This Sketch"
diff --git a/client/routes.jsx b/client/routes.jsx
index be6be8fd..f23c717e 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -42,6 +42,7 @@ const routes = store => (
     <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
     <Route path="/account" component={AccountView} />
     <Route path="/:username/sketches/:project_id" component={IDEView} />
+    <Route path="/:username/sketches/:project_id/add-to-collection" component={IDEView} />
     <Route path="/:username/sketches" component={DashboardView} />
     <Route path="/:username/collections" component={DashboardView} />
     <Route path="/:username/collections/create" component={CollectionView} />
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index eb428ce2..ddec0c22 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -27,12 +27,24 @@ router.get('/projects/:project_id', (req, res) => {
   ));
 });
 
+router.get('/:username/sketches/:project_id/add-to-collection', (req, res) => {
+  projectForUserExists(req.params.username, req.params.project_id, exists => (
+    exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+  ));
+});
+
 router.get('/:username/sketches/:project_id', (req, res) => {
   projectForUserExists(req.params.username, req.params.project_id, exists => (
     exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
   ));
 });
 
+router.get('/:username/sketches', (req, res) => {
+  userExists(req.params.username, exists => (
+    exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
+  ));
+});
+
 router.get('/:username/full/:project_id', (req, res) => {
   projectForUserExists(req.params.username, req.params.project_id, exists => (
     exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
@@ -106,12 +118,6 @@ router.get('/feedback', (req, res) => {
   res.send(renderIndex());
 });
 
-router.get('/:username/sketches', (req, res) => {
-  userExists(req.params.username, exists => (
-    exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-  ));
-});
-
 router.get('/:username/collections/create', (req, res) => {
   userExists(req.params.username, (exists) => {
     const isLoggedInUser = req.user && req.user.username === req.params.username;
@@ -128,12 +134,6 @@ router.get('/:username/collections/create', (req, res) => {
   ));
 });
 
-router.get('/:username/sketches/:project_id/add-to-collection', (req, res) => {
-  projectForUserExists(req.params.username, req.params.project_id, exists => (
-    exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))
-  ));
-});
-
 router.get('/:username/collections/:id', (req, res) => {
   collectionForUserExists(req.params.username, req.params.id, exists => (
     exists ? res.send(renderIndex()) : get404Sketch(html => res.send(html))