diff --git a/server/controllers/project.controller.js b/server/controllers/project.controller.js
index 86c340ea40..21bb410182 100644
--- a/server/controllers/project.controller.js
+++ b/server/controllers/project.controller.js
@@ -173,6 +173,23 @@ export async function projectForUserExists(username, projectId) {
   return project != null;
 }
 
+/**
+ * @param {string} username
+ * @param {string} projectId - the database id or the slug or the project
+ * @return {Promise<object>}
+ */
+export async function getProjectForUser(username, projectId) {
+  const user = await User.findByUsername(username);
+  if (!user) return { exists: false };
+  const project = await Project.findOne({
+    user: user._id,
+    $or: [{ _id: projectId }, { slug: projectId }]
+  });
+  return project != null
+    ? { exists: true, userProject: project }
+    : { exists: false };
+}
+
 /**
  * Adds URLs referenced in <script> tags to the `files` array of the project
  * so that they can be downloaded along with other remote files from S3.
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index 68ffffccbd..a13b2d2848 100644
--- a/server/routes/server.routes.js
+++ b/server/routes/server.routes.js
@@ -1,9 +1,10 @@
 import { Router } from 'express';
-import sendHtml, { renderIndex } from '../views/index';
+import sendHtml, { renderIndex, renderProjectIndex } from '../views/index';
 import { userExists } from '../controllers/user.controller';
 import {
   projectExists,
-  projectForUserExists
+  projectForUserExists,
+  getProjectForUser
 } from '../controllers/project.controller';
 import { collectionForUserExists } from '../controllers/collection.controller';
 
@@ -43,11 +44,16 @@ router.get(
 );
 
 router.get('/:username/sketches/:project_id', async (req, res) => {
-  const exists = await projectForUserExists(
+  const project = await getProjectForUser(
     req.params.username,
     req.params.project_id
   );
-  sendHtml(req, res, exists);
+
+  if (project.exists) {
+    res.send(renderProjectIndex(req.params.username, project.userProject.name));
+  } else {
+    sendHtml(req, res, project.exists);
+  }
 });
 
 router.get('/:username/sketches', async (req, res) => {
diff --git a/server/views/index.js b/server/views/index.js
index fa1b0a351c..d72d74cf82 100644
--- a/server/views/index.js
+++ b/server/views/index.js
@@ -48,6 +48,54 @@ export function renderIndex() {
   `;
 }
 
+export function renderProjectIndex(username, projectName) {
+  const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
+  return `
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
+      <meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
+      <title>${`${projectName} by ${username} -`}p5.js Web Editor</title>
+      ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
+      <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+      <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
+      <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
+      <script>
+        if (!window.process) {
+          window.process = {};
+        }
+        if (!window.process.env) {
+          window.process.env = {};
+        }
+        window.process.env.API_URL = '${process.env.API_URL}';
+        window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
+        window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
+        window.process.env.S3_BUCKET_URL_BASE = ${process.env.S3_BUCKET_URL_BASE ? `'${process.env.S3_BUCKET_URL_BASE}'` : undefined};
+        window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
+        window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
+        window.process.env.CLIENT = true;
+        window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true};
+        window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
+        window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
+        window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
+        window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
+        window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
+        window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
+        window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
+      </script>
+    </head>
+    <body>
+      <div id="root" class="root-app">
+      </div>
+      <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
+    </body>
+  </html>
+  `;
+}
+
 /**
  * Send a 404 page if `exists` is false.
  * @param {import('express').e.Request} req
