diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx
index 088c4bc..57459cd 100644
--- a/src/components/CreateNewModal.jsx
+++ b/src/components/CreateNewModal.jsx
@@ -3,8 +3,18 @@ import Modal from './Modal';
 import { ItemTile } from './ItemTile';
 import templates from '../templateList';
 import { Divider } from './common';
+import Switch from './Switch';
 
 export class CreateNewModal extends Component {
+	constructor(props) {
+		super(props);
+		this.modeChangeHandler = this.modeChangeHandler.bind(this);
+	}
+	modeChangeHandler(e) {
+		this.setState({
+			isFileModeSelected: e.target.checked
+		});
+	}
 	render() {
 		const {
 			show,
@@ -16,41 +26,179 @@ export class CreateNewModal extends Component {
 		} = this.props;
 		return (
 			<Modal show={show} closeHandler={closeHandler}>
+				<h2>Create New</h2>
 				<div class="flex">
-					<div>
-						<button className="btn" onClick={onBlankTemplateSelect}>
-							Start a blank creation
-						</button>
+					<div style="flex:1;" class="tac">
+						<svg
+							width="287px"
+							height="150px"
+							viewBox="0 0 287 197"
+							version="1.1"
+							xmlns="http://www.w3.org/2000/svg"
+							style={`opacity:${!this.state.isFileModeSelected ? '1' : '0.4'}`}
+							onClick={() => {
+								this.setState({ isFileModeSelected: false });
+							}}
+						>
+							<g
+								id="Page-1"
+								stroke="none"
+								stroke-width="1"
+								fill="none"
+								fill-rule="evenodd"
+							>
+								<g id="codepane" fill="#C5C5C5">
+									<rect
+										id="Rectangle"
+										x="0"
+										y="0"
+										width="89"
+										height="80"
+										rx="5"
+									/>
+								</g>
+								<g
+									id="codepane"
+									transform="translate(99.000000, 0.000000)"
+									fill="#C5C5C5"
+								>
+									<rect
+										id="Rectangle"
+										x="0"
+										y="0"
+										width="89"
+										height="80"
+										rx="5"
+									/>
+								</g>
+								<g
+									id="codepane"
+									transform="translate(198.000000, 0.000000)"
+									fill="#C5C5C5"
+								>
+									<rect
+										id="Rectangle"
+										x="0"
+										y="0"
+										width="89"
+										height="80"
+										rx="5"
+									/>
+								</g>
+								<g
+									id="codepane"
+									transform="translate(0.000000, 88.000000)"
+									fill="#C5C5C5"
+								>
+									<rect
+										id="Rectangle"
+										x="0"
+										y="0"
+										width="287"
+										height="109"
+										rx="5"
+									/>
+								</g>
+							</g>
+						</svg>
 						<p>
-							This gives you 3 separate panes to write HTML, CSS and JavaScript.
-							Good for quickly testing something.
+							3 separate panes to write HTML, CSS and JavaScript. Good for
+							quickly testing something.
 						</p>
-						<Divider />
-						Or choose from a template:
-						<div class="saved-items-pane__container">
-							{templates.map(template => (
-								<ItemTile
-									inline
-									item={template}
-									focusable
-									onClick={onTemplateSelect.bind(null, template)}
+					</div>
+					<div class="tac ml-2" style="margin-top:100px;">
+						<Switch
+							checked={this.state.isFileModeSelected}
+							labels={['3 panes', 'Files (beta)']}
+							onChange={this.modeChangeHandler}
+							showBothLabels
+						/>
+					</div>
+					<div style="flex:1" class="tac ml-2">
+						<svg
+							width="286px"
+							height="150px"
+							viewBox="0 0 286 196"
+							version="1.1"
+							style={`opacity:${this.state.isFileModeSelected ? '1' : '0.4'}`}
+							xmlns="http://www.w3.org/2000/svg"
+							onClick={() => {
+								this.setState({ isFileModeSelected: true });
+							}}
+						>
+							<g
+								id="Page-1"
+								stroke="none"
+								stroke-width="1"
+								fill="none"
+								fill-rule="evenodd"
+							>
+								<path
+									d="M5,0 L49,0 C51.7614237,-5.07265313e-16 54,2.23857625 54,5 L54,191 C54,193.761424 51.7614237,196 49,196 L5,196 C2.23857625,196 1.62803173e-14,193.761424 0,191 L0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z M7.59574468,29 C5.93889043,29 4.59574468,30.3431458 4.59574468,32 C4.59574468,33.6568542 5.93889043,35 7.59574468,35 L39.5106383,35 C41.1674925,35 42.5106383,33.6568542 42.5106383,32 C42.5106383,30.3431458 41.1674925,29 39.5106383,29 L7.59574468,29 Z M7.59574468,71 C5.93889043,71 4.59574468,72.3431458 4.59574468,74 C4.59574468,75.6568542 5.93889043,77 7.59574468,77 L24.5744681,77 C26.2313223,77 27.5744681,75.6568542 27.5744681,74 C27.5744681,72.3431458 26.2313223,71 24.5744681,71 L7.59574468,71 Z M14.4893617,84 C12.8325075,84 11.4893617,85.3431458 11.4893617,87 C11.4893617,88.6568542 12.8325075,90 14.4893617,90 L32.6170213,90 C34.2738755,90 35.6170213,88.6568542 35.6170213,87 C35.6170213,85.3431458 34.2738755,84 32.6170213,84 L14.4893617,84 Z M7.59574468,15 C5.93889043,15 4.59574468,16.3431458 4.59574468,18 C4.59574468,19.6568542 5.93889043,21 7.59574468,21 L32.6170213,21 C34.2738755,21 35.6170213,19.6568542 35.6170213,18 C35.6170213,16.3431458 34.2738755,15 32.6170213,15 L7.59574468,15 Z M13.3404255,42 C11.6835713,42 10.3404255,43.3431458 10.3404255,45 C10.3404255,46.6568542 11.6835713,48 13.3404255,48 L44.106383,48 C45.7632372,48 47.106383,46.6568542 47.106383,45 C47.106383,43.3431458 45.7632372,42 44.106383,42 L13.3404255,42 Z M14.4893617,57 C12.8325075,57 11.4893617,58.3431458 11.4893617,60 C11.4893617,61.6568542 12.8325075,63 14.4893617,63 L45.2553191,63 C46.9121734,63 48.2553191,61.6568542 48.2553191,60 C48.2553191,58.3431458 46.9121734,57 45.2553191,57 L14.4893617,57 Z"
+									id="Combined-Shape"
+									fill="#C5C5C5"
 								/>
-							))}
-						</div>
-					</div>
-					<div>
-						<Divider vertical />
-					</div>
-					<div>
-						<button className="btn" onClick={onBlankFileTemplateSelect}>
-							Start a blank creation with files (beta)
-						</button>
+								<g
+									id="codepane"
+									transform="translate(64.000000, 0.000000)"
+									fill="#C5C5C5"
+								>
+									<rect
+										id="Rectangle"
+										x="0"
+										y="0"
+										width="106"
+										height="196"
+										rx="5"
+									/>
+								</g>
+								<g
+									id="codepane"
+									transform="translate(180.000000, 0.000000)"
+									fill="#C5C5C5"
+								>
+									<rect
+										id="Rectangle"
+										x="0"
+										y="0"
+										width="106"
+										height="196"
+										rx="5"
+									/>
+								</g>
+							</g>
+						</svg>
 						<p>
 							Manage your code in files. Just like you would have files on your
 							local machine.
 						</p>
-						<Divider />
-						Templates coming soon!
+					</div>
+				</div>
+				<Divider />
+
+				<div class="tac">
+					<button
+						type="button"
+						class="btn btn--primary"
+						onClick={() => {
+							this.state.isFileModeSelected
+								? onBlankFileTemplateSelect()
+								: onBlankTemplateSelect();
+						}}
+					>
+						Start Blank
+					</button>
+					<br />
+					Or choose from a template:
+					<div class="saved-items-pane__container">
+						{templates.map(template => (
+							<ItemTile
+								inline
+								item={template}
+								focusable
+								onClick={onTemplateSelect.bind(null, template)}
+							/>
+						))}
 					</div>
 				</div>
 				<div class="tac">
diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx
index b56c282..dea1545 100644
--- a/src/components/Switch.jsx
+++ b/src/components/Switch.jsx
@@ -1,35 +1,43 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 
-export default class Switch extends Component {
-	render() {
-		return (
-			<label class="check-switch">
-				<input
-					role="switch"
-					type="checkbox"
-					checked={this.props.checked}
-					onChange={this.props.onChange}
-				/>
-				<div class="check-switch__toggle-wrap">
-					<span
-						aria-hidden="true"
-						class="check-switch__status"
-						style={`visibility:${this.props.checked ? 'hidden' : 'visible'}`}
-					>
-						Off
-					</span>
-					<span aria-hidden="true" class="check-switch__toggle" />
-					<span
-						aria-hidden="true"
-						class="check-switch__status"
-						style={`visibility:${this.props.checked ? 'visible' : 'hidden'}`}
-					>
-						On
-					</span>
-				</div>
+export default function Switch({
+	checked,
+	onChange,
+	labels,
+	children,
+	showBothLabels
+}) {
+	return (
+		<label class="check-switch">
+			<input
+				role="switch"
+				type="checkbox"
+				checked={checked}
+				onChange={onChange}
+			/>
+			<div class="check-switch__toggle-wrap">
+				<span
+					aria-hidden="true"
+					class="check-switch__status"
+					style={`visibility:${
+						checked && !showBothLabels ? 'hidden' : 'visible'
+					}`}
+				>
+					{labels[0] || 'Off'}
+				</span>
+				<span aria-hidden="true" class="check-switch__toggle" />
+				<span
+					aria-hidden="true"
+					class="check-switch__status"
+					style={`visibility:${
+						checked || showBothLabels ? 'visible' : 'hidden'
+					}`}
+				>
+					{labels[1] || 'On'}
+				</span>
+			</div>
 
-				{this.props.children}
-			</label>
-		);
-	}
+			{children}
+		</label>
+	);
 }
diff --git a/src/style.css b/src/style.css
index d123fa6..5e975e3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -322,6 +322,7 @@ a > svg {
 
 .check-switch__status {
 	text-transform: uppercase;
+	white-space: nowrap;
 	font-size: 14px;
 	font-weight: 600;
 }