diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index e88c85da..51ed9664 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -326,6 +326,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 3cb3095a..3763791d 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -33,6 +33,7 @@ import SketchList from '../components/SketchList';
 import Searchbar from '../components/Searchbar';
 import AssetList from '../components/AssetList';
 import About from '../components/About';
+import CollectionList from '../components/CollectionList';
 import Feedback from '../components/Feedback';
 
 class IDEView extends React.Component {
@@ -412,6 +413,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 56a2d18e..2aef335f 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -43,6 +43,7 @@ const routes = store => (
     <Route path="/assets" component={createRedirectWithUsername('/:username/assets')} />
     <Route path="/account" component={userIsAuthenticated(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))