diff --git a/app/client/models/DocPageModel.ts b/app/client/models/DocPageModel.ts
index f0a2683b63..8c196e2ef5 100644
--- a/app/client/models/DocPageModel.ts
+++ b/app/client/models/DocPageModel.ts
@@ -29,6 +29,7 @@ import {Holder, Observable, subscribe} from 'grainjs';
 import {Computed, Disposable, dom, DomArg, DomElementArg} from 'grainjs';
 import {makeT} from 'app/client/lib/localization';
 import {logTelemetryEvent} from 'app/client/lib/telemetry';
+import {DocumentType} from 'app/common/UserAPI';
 
 // tslint:disable:no-console
 
@@ -87,7 +88,7 @@ export interface DocPageModel {
   isTutorialTrunk: Observable<boolean>;
   isTutorialFork: Observable<boolean>;
   isTemplate: Observable<boolean>;
-
+  type: Observable<DocumentType>;
   importSources: ImportSource[];
 
   undoState: Observable<IUndoState|null>;          // See UndoStack for details.
@@ -147,6 +148,8 @@ export class DocPageModelImpl extends Disposable implements DocPageModel {
     (use, doc) => doc ? doc.isTutorialFork : false);
   public readonly isTemplate = Computed.create(this, this.currentDoc,
     (use, doc) => doc ? doc.isTemplate : false);
+  public readonly type = Computed.create(this, this.currentDoc,
+    (use, doc) => doc?.type ?? null);
 
   public readonly importSources: ImportSource[] = [];
 
@@ -499,7 +502,8 @@ function buildDocInfo(doc: Document, mode: OpenDocMode | undefined): DocInfo {
   const isFork = Boolean(idParts.forkId || idParts.snapshotId);
   const isBareFork = isFork && idParts.trunkId === NEW_DOCUMENT_CODE;
   const isSnapshot = Boolean(idParts.snapshotId);
-  const isTutorial = doc.type === 'tutorial';
+  const type = doc.type;
+  const isTutorial = type === 'tutorial';
   const isTutorialTrunk = isTutorial && !isFork && mode !== 'default';
   const isTutorialFork = isTutorial && isFork;
 
@@ -511,7 +515,7 @@ function buildDocInfo(doc: Document, mode: OpenDocMode | undefined): DocInfo {
       // mode. Since the document's 'openMode' has no effect, don't bother trying
       // to set it here, as it'll potentially be confusing for other code reading it.
       openMode = 'default';
-    } else if (!isFork && doc.type === 'template') {
+    } else if (!isFork && type === 'template') {
       // Templates should always open in fork mode by default.
       openMode = 'fork';
     } else {
@@ -521,7 +525,7 @@ function buildDocInfo(doc: Document, mode: OpenDocMode | undefined): DocInfo {
   }
 
   const isPreFork = openMode === 'fork';
-  const isTemplate = doc.type === 'template' && (isFork || isPreFork);
+  const isTemplate = type === 'template' && (isFork || isPreFork);
   const isEditable = !isSnapshot && (canEdit(doc.access) || isPreFork);
   return {
     ...doc,
@@ -534,6 +538,7 @@ function buildDocInfo(doc: Document, mode: OpenDocMode | undefined): DocInfo {
     isSnapshot,
     isTutorialTrunk,
     isTutorialFork,
+    type,
     isTemplate,
     isReadonly: !isEditable,
     idParts,
diff --git a/app/client/ui/DocumentSettings.ts b/app/client/ui/DocumentSettings.ts
index b2c9ba287b..ff583067eb 100644
--- a/app/client/ui/DocumentSettings.ts
+++ b/app/client/ui/DocumentSettings.ts
@@ -29,7 +29,18 @@ import {commonUrls, GristLoadConfig} from 'app/common/gristUrls';
 import {not, propertyCompare} from 'app/common/gutil';
 import {getCurrency, locales} from 'app/common/Locales';
 import {isOwner, isOwnerOrEditor} from 'app/common/roles';
-import {Computed, Disposable, dom, fromKo, IDisposableOwner, makeTestId, Observable, styled} from 'grainjs';
+import {DOCTYPE_NORMAL, DOCTYPE_TEMPLATE, DOCTYPE_TUTORIAL, DocumentType, persistType} from 'app/common/UserAPI';
+import {
+  Computed,
+  Disposable,
+  dom,
+  DomElementMethod,
+  fromKo,
+  IDisposableOwner,
+  makeTestId,
+  Observable,
+  styled
+} from 'grainjs';
 import * as moment from 'moment-timezone';
 
 const t = makeT('DocumentSettings');
@@ -85,6 +96,22 @@ export class DocSettingsPage extends Disposable {
               {defaultCurrencyLabel: t("Local currency ({{currency}})", {currency: getCurrency(l)})})
           )
         }),
+        dom.create(AdminSectionItem, {
+          id: 'templateMode',
+          name: t('Template mode'),
+          description: t('Change document type'),
+          value: cssDocTypeContainer(
+            dom.create(
+              displayCurrentType,
+              docPageModel.type,
+            ),
+            cssSmallButton(t('Edit'),
+              dom.on('click', this._buildDocumentTypeModal.bind(this, true)),
+              testId('doctype-edit')
+            ),
+          ),
+          disabled: isDocOwner ? false : t('Only available to document owners'),
+        }),
       ]),
 
       dom.create(AdminSection, t('Data Engine'), [
@@ -120,7 +147,6 @@ export class DocSettingsPage extends Disposable {
           )),
           disabled: isDocOwner ? false : t('Only available to document owners'),
         }),
-
         dom.create(AdminSectionItem, {
           id: 'reload',
           name: t('Reload'),
@@ -128,7 +154,6 @@ export class DocSettingsPage extends Disposable {
           value: cssSmallButton(t('Reload data engine'), dom.on('click', this._reloadEngine.bind(this, true))),
           disabled: isDocEditor ? false : t('Only available to document editors'),
         }),
-
         canChangeEngine ? dom.create(AdminSectionItem, {
           id: 'python',
           name: t('Python'),
@@ -186,7 +211,6 @@ export class DocSettingsPage extends Disposable {
             href: getApiConsoleLink(docPageModel),
           }),
         }),
-
         dom.create(AdminSectionItem, {
           id: 'webhooks',
           name: t('Webhooks'),
@@ -224,11 +248,11 @@ export class DocSettingsPage extends Disposable {
     const docPageModel = this._gristDoc.docPageModel;
     modal((ctl, owner) => {
       this.onDispose(() => ctl.close());
-      const selected = Observable.create<Option>(owner, Option.Adhoc);
+      const selected = Observable.create<TimingModalOption>(owner, TimingModalOption.Adhoc);
       const page = Observable.create<TimingModalPage>(owner, TimingModalPage.Start);
 
       const startTiming = async () => {
-        if (selected.get() === Option.Reload) {
+        if (selected.get() === TimingModalOption.Reload) {
           page.set(TimingModalPage.Spinner);
           await this._gristDoc.docApi.startTiming();
           await docPageModel.appModel.api.getDocAPI(docPageModel.currentDocId.get()!).forceReload();
@@ -243,7 +267,7 @@ export class DocSettingsPage extends Disposable {
       const startPage = () => [
         cssRadioCheckboxOptions(
           dom.style('max-width', '400px'),
-          radioCheckboxOption(selected, Option.Adhoc, dom('div',
+          radioCheckboxOption(selected, TimingModalOption.Adhoc, dom('div',
             dom('div',
               dom('strong', t('Start timing')),
             ),
@@ -253,7 +277,7 @@ export class DocSettingsPage extends Disposable {
             ),
             testId('timing-modal-option-adhoc'),
           )),
-          radioCheckboxOption(selected, Option.Reload, dom('div',
+          radioCheckboxOption(selected, TimingModalOption.Reload, dom('div',
             dom('div',
               dom('strong', t('Time reload')),
             ),
@@ -289,6 +313,111 @@ export class DocSettingsPage extends Disposable {
     });
   }
 
+  private _buildDocumentTypeModal() {
+    const docPageModel = this._gristDoc.docPageModel;
+    modal((ctl, owner) => {
+      this.onDispose(() => ctl.close());
+      const currentDocType = docPageModel.type.get() as string;
+      let currentDocTypeOption;
+      switch (currentDocType) {
+        case DOCTYPE_TEMPLATE:
+          currentDocTypeOption = DocTypeOption.Template;
+          break;
+        case DOCTYPE_TUTORIAL:
+          currentDocTypeOption = DocTypeOption.Tutorial;
+          break;
+        default:
+          currentDocTypeOption = DocTypeOption.Regular;
+      }
+
+      const selected = Observable.create<DocTypeOption>(owner, currentDocTypeOption);
+
+      const doSetDocumentType = async () => {
+        const docId = docPageModel.currentDocId.get();
+        let docType: DocumentType;
+        if (selected.get() === DocTypeOption.Regular) {
+          docType = DOCTYPE_NORMAL;
+        } else if (selected.get() === DocTypeOption.Template) {
+          docType = DOCTYPE_TEMPLATE;
+        } else {
+          docType = DOCTYPE_TUTORIAL;
+        }
+        await persistType(docType, docId);
+        const {trunkId} = docPageModel.currentDoc.get()!.idParts;
+        window.location.replace(urlState().makeUrl({
+          docPage: "settings",
+          fork: undefined, // will be automatically set once the page is reloaded
+          doc: trunkId,
+        }));
+      };
+
+      const docTypeOption = (
+        {
+          type,
+          label,
+          description,
+          itemTestId
+        }: {
+          type: DocTypeOption,
+          label: string | any,
+          description: string,
+          itemTestId: DomElementMethod | null
+        }) => {
+        return radioCheckboxOption(selected, type, dom('div',
+          dom('div',
+            dom('strong', label),
+          ),
+          dom('div',
+            dom.style('margin-top', '8px'),
+            dom('span', description)
+          ),
+          itemTestId,
+        ));
+      };
+
+      const documentTypeOptions = () => [
+        cssRadioCheckboxOptions(
+          dom.style('max-width', '400px'),
+          docTypeOption({
+            type: DocTypeOption.Regular,
+            label: t('Regular document'),
+            description: t('Normal document behavior. All users work on the same copy of the document.'),
+            itemTestId: testId('doctype-modal-option-regular'),
+          }),
+          docTypeOption({
+            type: DocTypeOption.Template,
+            label: t('Template'),
+            description:  t('Document automatically opens in {{fiddleModeDocUrl}}. ' +
+              'Anyone may edit, which will create a new unsaved copy.',
+              {
+                fiddleModeDocUrl: cssLink({href: commonUrls.helpAPI, target: '_blank'}, t('fiddle mode'))
+              }
+            ),
+            itemTestId: testId('doctype-modal-option-template'),
+          }),
+          docTypeOption({
+            type: DocTypeOption.Tutorial,
+            label: t('Tutorial'),
+            description: t('Document automatically opens as a user-specific copy.'),
+            itemTestId: testId('doctype-modal-option-tutorial'),
+          }),
+        ),
+        cssModalButtons(
+          bigBasicButton(t('Cancel'), dom.on('click', () => ctl.close()), testId('doctype-modal-cancel')),
+          bigPrimaryButton(t(`Confirm change`),
+            dom.on('click', doSetDocumentType),
+            testId('doctype-modal-confirm'),
+          ),
+        )
+      ];
+      return [
+        cssModalTitle(t(`Change document type`)),
+        documentTypeOptions(),
+        testId('doctype-modal'),
+      ];
+    });
+  }
+
   private async _doSetEngine(val: EngineCode|undefined) {
     const docPageModel = this._gristDoc.docPageModel;
     if (this._engine.get() !== val) {
@@ -298,8 +427,6 @@ export class DocSettingsPage extends Disposable {
   }
 }
 
-
-
 function getApiConsoleLink(docPageModel: DocPageModel) {
   const url = new URL(location.href);
   url.pathname = '/apiconsole';
@@ -343,6 +470,39 @@ function buildLocaleSelect(
   );
 }
 
+type DocumentTypeItem = ACSelectItem & {type?: string};
+
+const typeList: DocumentTypeItem[] = [{
+  label: t('Regular'),
+  type: ''
+}, {
+  label: t('Template'),
+  type: 'template'
+}, {
+  label: t('Tutorial'),
+  type: 'tutorial'
+}].map((el) => ({
+  ...el,
+  value: el.label,
+  cleanText: el.label.trim().toLowerCase()
+}));
+
+function displayCurrentType(
+  owner: IDisposableOwner,
+  type: Observable<DocumentType|null>,
+) {
+  const typeObs = Computed.create(owner, use => {
+    const typeCode = use(type) ?? "";
+    const typeName = typeList.find(ty => ty.type === typeCode)?.label || typeCode;
+    return typeName;
+  });
+  return dom(
+    'div',
+    typeObs.get(),
+    testId('doctype-value')
+  );
+}
+
 const cssContainer = styled('div', `
   overflow-y: auto;
   position: relative;
@@ -462,7 +622,7 @@ enum TimingModalPage {
 /**
  * Enum for the different options in the timing modal.
  */
-enum Option {
+enum TimingModalOption {
   /**
    * Start timing and immediately forces a reload of the document and waits for the
    * document to be loaded, to show the results.
@@ -474,6 +634,15 @@ enum Option {
   Adhoc,
 }
 
+/**
+ * Enum for the different options in the document type Modal.
+ */
+enum DocTypeOption {
+  Regular,
+  Template,
+  Tutorial,
+}
+
 // A version that is not underlined, and on hover mouse pointer indicates that copy is available
 const cssCopyLink = styled(cssLink, `
   word-wrap: break-word;
@@ -509,3 +678,13 @@ const cssWrap = styled('p', `
 const cssRedText = styled('span', `
   color: ${theme.errorText};
 `);
+
+const cssDocTypeContainer = styled('div', `
+  display: flex;
+  width: 172px;
+  align-items: center;
+  justify-content: space-between;
+  & > * {
+    display: inline-block;
+  }
+`);
diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
index e23104ddb6..88aaa8cc99 100644
--- a/app/client/ui2018/cssVars.ts
+++ b/app/client/ui2018/cssVars.ts
@@ -386,6 +386,7 @@ export const theme = {
 
   /* Checkboxes */
   checkboxBg: new CustomProp('theme-checkbox-bg', undefined, colors.light),
+  checkboxSelectedFg: new CustomProp('theme-checkbox-selected-bg', undefined, colors.lightGreen),
   checkboxDisabledBg: new CustomProp('theme-checkbox-disabled-bg', undefined, colors.darkGrey),
   checkboxBorder: new CustomProp('theme-checkbox-border', undefined, colors.darkGrey),
   checkboxBorderHover: new CustomProp('theme-checkbox-border-hover', undefined, colors.hover),
diff --git a/app/common/UserAPI.ts b/app/common/UserAPI.ts
index efc0804284..f58f05b8de 100644
--- a/app/common/UserAPI.ts
+++ b/app/common/UserAPI.ts
@@ -128,7 +128,22 @@ export interface Workspace extends WorkspaceProperties {
   isSupportWorkspace?: boolean;
 }
 
-export type DocumentType = 'tutorial'|'template';
+export const DOCTYPE_NORMAL = null;
+export const DOCTYPE_TEMPLATE = 'template';
+export const DOCTYPE_TUTORIAL = 'tutorial';
+
+// null stands for normal document type, the one set by default at document creation.
+export type DocumentType = 'template'|'tutorial'|null;
+
+export function persistType(type: DocumentType, docId: string|undefined) {
+  docId = docId?.split("~")[0];
+  return fetch(`/o/docs/api/docs/${docId}`, {
+    method: 'PATCH',
+    headers: {"Content-Type": "application/json"},
+    credentials: 'include',
+    body: JSON.stringify({type})
+  });
+}
 
 // Non-core options for a document.
 // "Non-core" means bundled into a single options column in the database.
diff --git a/app/gen-server/ApiServer.ts b/app/gen-server/ApiServer.ts
index 170fc8103a..192bb8ed63 100644
--- a/app/gen-server/ApiServer.ts
+++ b/app/gen-server/ApiServer.ts
@@ -8,7 +8,11 @@ import pick from 'lodash/pick';
 import {ApiError} from 'app/common/ApiError';
 import {FullUser} from 'app/common/LoginSessionAPI';
 import {BasicRole} from 'app/common/roles';
-import {OrganizationProperties, PermissionDelta} from 'app/common/UserAPI';
+import {DOCTYPE_NORMAL,
+  DOCTYPE_TEMPLATE,
+  DOCTYPE_TUTORIAL,
+  OrganizationProperties,
+  PermissionDelta} from 'app/common/UserAPI';
 import {Document} from "app/gen-server/entity/Document";
 import {Organization} from 'app/gen-server/entity/Organization';
 import {User} from 'app/gen-server/entity/User';
@@ -295,7 +299,20 @@ export class ApiServer {
     // PATCH /api/docs/:did
     // Update the specified doc.
     this._app.patch('/api/docs/:did', expressWrap(async (req, res) => {
+      const validDocTypes = [
+        DOCTYPE_NORMAL,
+        DOCTYPE_TEMPLATE,
+        DOCTYPE_TUTORIAL
+      ];
+
+      if ('type' in req.body && ! validDocTypes.includes(req.body.type)){
+        const errMsg = "Bad Request. 'type' key authorized values : "
+                        + `'${DOCTYPE_TEMPLATE}', '${DOCTYPE_TUTORIAL}' or ${DOCTYPE_NORMAL}`;
+        return res.status(400).send({error: errMsg});
+      }
+
       const {data, ...result} = await this._dbManager.updateDocument(getDocScope(req), req.body);
+
       if (data && 'name' in req.body) { this._logRenameDocumentEvents(req, data); }
       return sendReply(req, res, {...result, data: data?.current.id});
     }));
diff --git a/static/locales/en.client.json b/static/locales/en.client.json
index c8fdbe8416..c1350e5b95 100644
--- a/static/locales/en.client.json
+++ b/static/locales/en.client.json
@@ -354,7 +354,22 @@
         "Timing is on": "Timing is on",
         "You can make changes to the document, then stop timing to see the results.": "You can make changes to the document, then stop timing to see the results.",
         "Only available to document editors": "Only available to document editors",
-        "Only available to document owners": "Only available to document owners"
+        "Only available to document owners": "Only available to document owners",
+        "Template mode": "Template mode",
+        "Change document type": "Change document type",
+        "Edit": "Edit",
+        "Change nature of document": "Change nature of document",
+        "Regular document": "Regular document",
+        "Normal document behavior. All users work on the same copy of the document.": "Normal document behavior. All users work on the same copy of the document.",
+        "Regular": "Regular",
+        "Template": "Template",
+        "Document automatically opens in {{fiddleModeDocUrl}}. Anyone may edit, which will create a new unsaved copy.": "Document automatically opens in {{fiddleModeDocUrl}}. Anyone may edit, which will create a new unsaved copy.",
+        "fiddle mode": "fiddle mode",
+        "Tutorial": "Tutorial",
+        "Document automatically opens as a user-specific copy.": "Document automatically opens as a user-specific copy.",
+        "Confirm change": "Confirm change",
+        "This will perform a hard reload of the data engine. This may help if the data engine is stuck in an infinite loop, is indefinitely processing the latest change, or has crashed. No data will be lost, except possibly currently pending actions.": "This will perform a hard reload of the data engine. This may help if the data engine is stuck in an infinite loop, is indefinitely processing the latest change, or has crashed. No data will be lost, except possibly currently pending actions.",
+        "Once you start timing, Grist will measure the time it takes to evaluate each formula. This allows diagnosing which formulas are responsible for slow performance when a document is first opened, or when a document responds to changes.": "Once you start timing, Grist will measure the time it takes to evaluate each formula. This allows diagnosing which formulas are responsible for slow performance when a document is first opened, or when a document responds to changes."
     },
     "DocumentUsage": {
         "Attachments Size": "Size of Attachments",
@@ -967,7 +982,11 @@
         "Reference": "Reference",
         "Reference List": "Reference List",
         "Attachment": "Attachment",
-        "Search columns": "Search columns"
+        "Search columns": "Search columns",
+        "By Name": "By Name",
+        "By Date Modified": "By date Modified",
+        "Light": "Light",
+        "Custom": "Custom"
     },
     "modals": {
         "Cancel": "Cancel",
diff --git a/test/gen-server/ApiServer.ts b/test/gen-server/ApiServer.ts
index c6ee2474d8..3f7d007ba6 100644
--- a/test/gen-server/ApiServer.ts
+++ b/test/gen-server/ApiServer.ts
@@ -5,7 +5,7 @@ import {configForUser, configWithPermit, getRowCounts as getRowCountsForDb} from
 import * as testUtils from 'test/server/testUtils';
 
 import {createEmptyOrgUsageSummary, OrgUsageSummary} from 'app/common/DocUsage';
-import {Document, Workspace} from 'app/common/UserAPI';
+import {DOCTYPE_NORMAL, DOCTYPE_TEMPLATE, DOCTYPE_TUTORIAL, Document, Workspace} from 'app/common/UserAPI';
 import {Organization} from 'app/gen-server/entity/Organization';
 import {Product} from 'app/gen-server/entity/Product';
 import {HomeDBManager, UserChange} from 'app/gen-server/lib/homedb/HomeDBManager';
@@ -1274,6 +1274,21 @@ describe('ApiServer', function() {
     assert.deepEqual(resp.data?.options, undefined);
   });
 
+  it('PATCH /api/docs/{did} supports proper values for type key', async function() {
+    const did = await dbManager.testGetId('Surprise2');
+    // Check setting null for normal document type
+    let resp = await axios.patch(`${homeUrl}/api/docs/${did}`, {type: DOCTYPE_NORMAL}, chimpy);
+    assert.equal(resp.status, 200);
+
+    // check setting template as document type
+    resp = await axios.patch(`${homeUrl}/api/docs/${did}`, {type: DOCTYPE_TEMPLATE}, chimpy);
+    assert.equal(resp.status, 200);
+
+    // check setting tutorial as document type
+    resp = await axios.patch(`${homeUrl}/api/docs/${did}`, {type: DOCTYPE_TUTORIAL}, chimpy);
+    assert.equal(resp.status, 200);
+  });
+
   it('PATCH /api/docs/{did} returns 404 appropriately', async function() {
     // Attempt to rename a doc that doesn't exist.
     const resp = await axios.patch(`${homeUrl}/api/docs/9999`, {
@@ -1298,6 +1313,13 @@ describe('ApiServer', function() {
     assert.equal(resp.status, 400);
   });
 
+  it('PATCH /api/docs/{did} returns 400 on wrong type values', async function() {
+    // Use an unavailable property and check that the operation fails with 400.
+    const did = await dbManager.testGetId('Surprise2');
+    const resp = await axios.patch(`${homeUrl}/api/docs/${did}`, {"type": "invalid"}, chimpy);
+    assert.equal(resp.status, 400);
+  });
+
   it('DELETE /api/docs/{did} is operational', async function() {
     const oid = await dbManager.testGetId('NASA');
     const wid = await dbManager.testGetId('Rovers');
diff --git a/test/nbrowser/DocTypeConversion.ts b/test/nbrowser/DocTypeConversion.ts
new file mode 100644
index 0000000000..26fd308941
--- /dev/null
+++ b/test/nbrowser/DocTypeConversion.ts
@@ -0,0 +1,187 @@
+import { UserAPI } from "app/common/UserAPI";
+import { assert, driver, until } from "mocha-webdriver";
+import * as gu from "test/nbrowser/gristUtils";
+import { setupTestSuite } from "test/nbrowser/testUtils";
+import { Button, button, element, label, option} from "test/nbrowser/elementUtils";
+
+type TypeLabels = "Regular" | "Template" | "Tutorial";
+
+
+describe("DocTypeConversion", function () {
+  this.timeout(20000);
+  const cleanup = setupTestSuite();
+
+  let userApi: UserAPI;
+  let docId: string;
+  let session: gu.Session;
+
+  before(async () => {
+    session = await gu.session().teamSite.login();
+    docId = await session.tempNewDoc(cleanup);
+    userApi = session.createHomeApi();
+  });
+
+  async function assertExistsButton(button: Button, text: String) {
+    await gu.waitToPass(async () => {
+      assert.equal(await button.element().getText(), text);
+    });
+    assert.isTrue(await button.visible());
+  }
+
+  async function checkDisplayedLabel(typeLabel: TypeLabels) {
+    // Wait in case of page reload
+    await displayedLabel.wait();
+
+    assert.equal(await displayedLabel.element().getText(), typeLabel);
+  }
+
+  async function convert(from: TypeLabels, to: TypeLabels) {
+    await gu.openDocumentSettings();
+
+    // Ensure that initial document type is the expected one.
+    const displayedLabelElement = displayedLabel.element();
+
+    // Check initially displayed label value
+    await checkDisplayedLabel(from);
+
+    // Click to open the modal
+    await editButton.click();
+
+    // Wait for modal.
+    await modal.wait();
+
+    // Select the desired Document type
+    await optionByLabel[to].click();
+
+    assert.isTrue(await optionByLabel[to]?.checked());
+
+    // Confirm the choice
+    await modalConfirm.click();
+
+    // Wait for the page to be unloaded
+    await driver.wait(until.stalenessOf(displayedLabelElement), 3000);
+
+    // checks that the displayedLabel is now equal to convert destination
+    await checkDisplayedLabel(to);
+  }
+
+  async function isRegular(){
+    assert.isFalse(await saveCopyButton.present());
+    assert.isFalse(await fiddleTag.present());
+  }
+
+  async function isTemplate(){
+    await assertExistsButton(saveCopyButton, "Save Copy");
+    assert.isTrue(await fiddleTag.visible());
+  }
+
+  async function isTutorial(){
+    await assertExistsButton(saveCopyButton, "Save Copy");
+    assert.isFalse(await fiddleTag.present());
+  }
+
+  it("should display the modal with only the current type selected", async function () {
+    await gu.openDocumentSettings();
+    // Make sure we see the Edit button of document type conversion.
+    await assertExistsButton(editButton, "Edit");
+
+    // Check that Document type is Regular before any conversion was ever apply to It.
+    assert.equal(await displayedLabel.element().getText(), "Regular");
+
+    await editButton.click();
+
+    // Wait for modal.
+    await modal.wait();
+
+    // We have three options.
+    assert.isTrue(await optionRegular.visible());
+    assert.isTrue(await optionTemplate.visible());
+    assert.isTrue(await optionTutorial.visible());
+
+    // Regular is selected cause its the current mode.
+    assert.isTrue(await optionRegular.checked());
+    assert.isFalse(await optionTemplate.checked());
+    assert.isFalse(await optionTutorial.checked());
+
+    // check that cancel works
+    await modalCancel.click();
+    assert.isFalse(await modal.present());
+  });
+
+  // If the next six tests succeed so each document type can properly be converted to every other
+  it('should convert from Regular to Template', async function() {
+    await convert("Regular", "Template");
+    await isTemplate();
+  });
+
+  it('should convert from Template to Tutorial', async function() {
+    await convert("Template", "Tutorial");
+    await isTutorial();
+  });
+
+  it('should convert from Tutorial to Regular', async function() {
+    await convert("Tutorial", "Regular");
+    await isRegular();
+  });
+
+  it('should convert from Regular to Tutorial', async function() {
+    await convert("Regular", "Tutorial");
+    await isTutorial();
+  });
+
+  it('should convert from Tutorial to Template', async function() {
+    await convert("Tutorial", "Template");
+    await isTemplate();
+  });
+
+  it('should convert from Template to Regular', async function() {
+    await convert("Template", "Regular");
+    await isRegular();
+  });
+
+  it('should be disabled for non-owners', async function() {
+    await userApi.updateDocPermissions(docId, {users: {
+      [gu.translateUser('user2').email]: 'editors',
+    }});
+
+    const session = await gu.session().teamSite.user('user2').login();
+    await session.loadDoc(`/doc/${docId}`);
+    await driver.sleep(500);
+    await gu.openDocumentSettings();
+
+    const start = driver.find('.test-settings-doctype-edit');
+    assert.equal(await start.isPresent(), true);
+
+    // Check that we have an informative tooltip.
+    await start.mouseMove();
+    // Note that .test-tooltip may appear blank a first time,
+    // hence the necessity to use waitToPass instead of findWait.
+    await gu.waitToPass(async () => {
+      assert.match(await driver.find('.test-tooltip').getText(), /Only available to document owners/);
+    });
+
+    // Nothing should happen on click. We click the location rather than the element, since the
+    // element isn't actually clickable.
+    await start.mouseMove();
+    await driver.withActions(a => a.press().release());
+    await driver.sleep(100);
+
+    assert.equal(await driver.find(".test-settings-doctype-modal").isPresent(), false);
+  });
+});
+
+const editButton = button('.test-settings-doctype-edit');
+const saveCopyButton = button('.test-tb-share-action');
+const displayedLabel = label('.test-settings-doctype-value');
+const modal = element('.test-settings-doctype-modal');
+const optionRegular = option('.test-settings-doctype-modal-option-regular');
+const optionTemplate = option('.test-settings-doctype-modal-option-template');
+const optionTutorial = option('.test-settings-doctype-modal-option-tutorial');
+const optionByLabel = {
+  'Tutorial': optionTutorial,
+  'Template': optionTemplate,
+  'Regular': optionRegular
+};
+const modalConfirm = button('.test-settings-doctype-modal-confirm');
+const modalCancel = button('.test-settings-doctype-modal-cancel');
+const fiddleTag = element('.test-fiddle-tag');
diff --git a/test/nbrowser/Timing.ts b/test/nbrowser/Timing.ts
index 9659cdf4d2..31b69cb3dc 100644
--- a/test/nbrowser/Timing.ts
+++ b/test/nbrowser/Timing.ts
@@ -3,6 +3,7 @@ import difference from 'lodash/difference';
 import { assert, driver } from "mocha-webdriver";
 import * as gu from "test/nbrowser/gristUtils";
 import { setupTestSuite } from "test/nbrowser/testUtils";
+import { button, element, label, option } from "test/nbrowser/elementUtils";
 
 describe("Timing", function () {
   this.timeout(20000);
@@ -192,43 +193,6 @@ describe("Timing", function () {
   });
 });
 
-const element = (testId: string) => ({
-  element() {
-    return driver.find(testId);
-  },
-  async wait() {
-    await driver.findWait(testId, 1000);
-  },
-  async visible() {
-    return await this.element().isDisplayed();
-  },
-  async present() {
-    return await this.element().isPresent();
-  }
-});
-
-const label = (testId: string) => ({
-  ...element(testId),
-  async text() {
-    return this.element().getText();
-  },
-});
-
-const button = (testId: string) => ({
-  ...element(testId),
-  async click() {
-    await gu.scrollIntoView(this.element());
-    await this.element().click();
-  },
-});
-
-const option = (testId: string) => ({
-  ...button(testId),
-  async checked() {
-    return 'true' === await this.element().findClosest("label").find("input[type='checkbox']").getAttribute('checked');
-  }
-});
-
 const startTiming = button(".test-settings-timing-start");
 const stopTiming = button(".test-settings-timing-stop");
 const timingText = label(".test-settings-timing-desc");
diff --git a/test/nbrowser/elementUtils.ts b/test/nbrowser/elementUtils.ts
new file mode 100644
index 0000000000..11984ccff5
--- /dev/null
+++ b/test/nbrowser/elementUtils.ts
@@ -0,0 +1,48 @@
+import { driver, WebElementPromise } from "mocha-webdriver";
+import * as gu from "test/nbrowser/gristUtils";
+
+export interface Button {
+  click(): Promise<void>;
+  element(): WebElementPromise;
+  wait(): Promise<void>;
+  visible(): Promise<boolean>;
+  present(): Promise<boolean>;
+}
+
+export const element = (testId: string) => ({
+  element() {
+    return driver.find(testId);
+  },
+  async wait() {
+    await driver.findWait(testId, 10000);
+  },
+  async visible() {
+    return await this.element().isDisplayed();
+  },
+  async present() {
+    return await this.element().isPresent();
+  }
+});
+
+export const label = (testId: string) => ({
+  ...element(testId),
+  async text() {
+    return this.element().getText();
+  },
+});
+
+export const button = (testId: string): Button => ({
+  ...element(testId),
+  async click() {
+    await gu.scrollIntoView(this.element());
+    await this.element().click();
+  },
+});
+
+export const option = (testId: string) => ({
+  ...button(testId),
+  async checked() {
+    return 'true' === await this.element().findClosest("label").find("input[type='checkbox']").getAttribute('checked');
+  }
+});
+