diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 9d6d76a..ba76fa7 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -196,7 +196,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.props.saveHtmlBtnClickHandler}
 						id="saveHtmlBtn"
-						class="mode-btn  hint--rounded  hint--top-left hide-on-mobile"
+						class="mode-btn  hint--rounded  hint--top-left hide-on-mobile hide-in-file-mode"
 						aria-label="Save as HTML file"
 					>
 						<svg viewBox="0 0 24 24">
@@ -219,7 +219,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.props.codepenBtnClickHandler}
 						id="codepenBtn"
-						class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile"
+						class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile hide-in-file-mode"
 						aria-label="Edit on CodePen"
 					>
 						<svg>
@@ -243,7 +243,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.layoutBtnClickhandler.bind(this, 1)}
 						id="layoutBtn1"
-						class="mode-btn hide-on-mobile"
+						class="mode-btn hide-on-mobile hide-in-file-mode"
 						aria-label="Switch to layout with preview on right"
 					>
 						<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
@@ -253,7 +253,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.layoutBtnClickhandler.bind(this, 2)}
 						id="layoutBtn2"
-						class="mode-btn hide-on-mobile"
+						class="mode-btn hide-on-mobile hide-in-file-mode"
 						aria-label="Switch to layout with preview on bottom"
 					>
 						<svg viewBox="0 0 100 100">
@@ -263,7 +263,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.layoutBtnClickhandler.bind(this, 3)}
 						id="layoutBtn3"
-						class="mode-btn hide-on-mobile"
+						class="mode-btn hide-on-mobile hide-in-file-mode"
 						aria-label="Switch to layout with preview on left"
 					>
 						<svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
@@ -273,7 +273,7 @@ export default class Footer extends Component {
 					<button
 						onClick={this.layoutBtnClickhandler.bind(this, 5)}
 						id="layoutBtn5"
-						class="mode-btn hide-on-mobile"
+						class="mode-btn hide-on-mobile hide-in-file-mode"
 						aria-label="Switch to layout with all vertical panes"
 					>
 						<svg viewBox="0 0 100 100">
diff --git a/src/components/MainHeader.jsx b/src/components/MainHeader.jsx
index d3bb882..34d760a 100644
--- a/src/components/MainHeader.jsx
+++ b/src/components/MainHeader.jsx
@@ -27,22 +27,24 @@ export function MainHeader(props) {
 					</svg>Run
 				</button>
 
-				<Button
-					onClick={props.addLibraryBtnHandler}
-					data-event-category="ui"
-					data-event-action="addLibraryButtonClick"
-					class="btn--dark flex-v-center hint--rounded hint--bottom-left"
-					aria-label="Add a JS/CSS library"
-				>
-					Add library{' '}
-					<span
-						id="js-external-lib-count"
-						style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
-						class="count-label"
+				{!this.props.isFileMode && (
+					<Button
+						onClick={props.addLibraryBtnHandler}
+						data-event-category="ui"
+						data-event-action="addLibraryButtonClick"
+						class="btn--dark flex-v-center hint--rounded hint--bottom-left"
+						aria-label="Add a JS/CSS library"
 					>
-						{props.externalLibCount}
-					</span>
-				</Button>
+						Add library{' '}
+						<span
+							id="js-external-lib-count"
+							style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
+							class="count-label"
+						>
+							{props.externalLibCount}
+						</span>
+					</Button>
+				)}
 
 				<button
 					class="btn--dark flex  flex-v-center hint--rounded hint--bottom-left"
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 0b040cd..c0d23dc 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -1222,6 +1222,7 @@ export default class App extends Component {
 						titleInputBlurHandler={this.titleInputBlurHandler.bind(this)}
 						user={this.state.user}
 						unsavedEditCount={this.state.unsavedEditCount}
+						isFileMode={this.state.currentItem && this.state.currentItem.files}
 					/>
 					{this.state.currentItem && this.state.currentItem.files ? (
 						<ContentWrapFiles
diff --git a/src/style.css b/src/style.css
index 26900da..e5f8f4d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1642,6 +1642,10 @@ body:not(.is-app) .show-when-app {
 .sidebar__file:focus .sidebar__file-options {
 	visibility: visible;
 }
+
+.is-project .hide-in-file-mode {
+	display: none !important;
+}
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;