diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 7cbd6bb20..12cb0aa37 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -3,17 +3,26 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
+const dedent = require('dedent-tabs').default;
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
+const SNIPPETBAR_HEIGHT = 25;
+const DEFAULT_STYLE_TEXT = dedent`
+				/*=======---  Example CSS styling  ---=======*/
+				/* Any CSS here will apply to your document! */
+
+				.myExampleClass {
+					color: black;
+				}`;
 
 const splice = function(str, index, inject){
 	return str.slice(0, index) + inject + str.slice(index);
 };
 
-const SNIPPETBAR_HEIGHT = 25;
+
 
 const Editor = createClass({
 	getDefaultProps : function() {
@@ -176,7 +185,7 @@ const Editor = createClass({
 			return <CodeEditor key='style'
 				ref='codeEditor'
 				language='css'
-				value={this.props.brew.style}
+				value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
 				onChange={this.props.onStyleChange} />;
 		}
 		if(this.isMeta()){
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index 2debb104c..01fd9d916 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -4,7 +4,6 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const request = require('superagent');
-const dedent = require('dedent-tabs').default;
 
 const Markdown = require('naturalcrit/markdown.js');
 
@@ -26,14 +25,7 @@ const NewPage = createClass({
 	getDefaultProps : function() {
 		return {
 			brew : {
-				text  : '',
-				style : dedent`
-										/*=======---  Example CSS styling  ---=======*/
-										/* Any CSS here will apply to your document! */
-										
-										.myExampleClass {
-							 			  color: black;
-										}`,
+				text      : '',
 				shareId   : null,
 				editId    : null,
 				createdAt : null,
@@ -54,7 +46,6 @@ const NewPage = createClass({
 		return {
 			brew : {
 				text        : this.props.brew.text || '',
-				style       : this.props.brew.style || '',
 				gDrive      : false,
 				title       : this.props.brew.title || '',
 				description : this.props.brew.description || '',
@@ -145,10 +136,18 @@ const NewPage = createClass({
 
 		console.log('saving new brew');
 
+		const brew = this.state.brew;
+		// Split out CSS to Style if CSS codefence exists
+		if(brew.text.startsWith('```css') && brew.text.indexOf('```\n\n') > 0) {
+			const index = brew.text.indexOf('```\n\n');
+			brew.style = `${brew.style ? `${brew.style}\n` : ''}${brew.text.slice(7, index - 1)}`;
+			brew.text = brew.text.slice(index + 5);
+		};
+
 		if(this.state.saveGoogle) {
 			const res = await request
 			.post('/api/newGoogle/')
-			.send(this.state.brew)
+			.send(brew)
 			.catch((err)=>{
 				console.log(err.status === 401
 					? 'Not signed in!'
@@ -163,7 +162,7 @@ const NewPage = createClass({
 			window.location = `/edit/${brew.googleId}${brew.editId}`;
 		} else {
 			request.post('/api')
-			.send(this.state.brew)
+			.send(brew)
 			.end((err, res)=>{
 				if(err){
 					this.setState({
diff --git a/server.js b/server.js
index b7e71794d..45e073065 100644
--- a/server.js
+++ b/server.js
@@ -9,7 +9,6 @@ const GoogleActions = require('./server/googleActions.js');
 const serveCompressedStaticAssets = require('./server/static-assets.mv.js');
 const sanitizeFilename = require('sanitize-filename');
 const asyncHandler = require('express-async-handler');
-const dedent = require('dedent-tabs').default;
 
 const brewAccessTypes = ['edit', 'share', 'raw'];
 
@@ -37,14 +36,6 @@ const getBrewFromId = asyncHandler(async (id, accessType)=>{
 		const index = brew.text.indexOf('```\n\n');
 		brew.style = brew.text.slice(7, index - 1);
 		brew.text = brew.text.slice(index + 5);
-	} else {
-		brew.style = dedent`
-			/*=======---  Example CSS styling  ---=======*/
-			/* Any CSS here will apply to your document! */
-
-			.myExampleClass {
-				color: black;
-			}`;
 	}
 	return brew;
 });
diff --git a/server/homebrew.api.js b/server/homebrew.api.js
index 51c9903db..1f988761d 100644
--- a/server/homebrew.api.js
+++ b/server/homebrew.api.js
@@ -20,10 +20,12 @@ const getGoodBrewTitle = (text)=>{
 };
 
 const mergeBrewText = (text, style)=>{
-	text = `\`\`\`css\n` +
-		   	 `${style}\n` +
-				 `\`\`\`\n\n` +
-				 `${text}`;
+	if(typeof style !== 'undefined') {
+		text = `\`\`\`css\n` +
+					 `${style}\n` +
+					 `\`\`\`\n\n` +
+					 `${text}`;
+	}
 	return text;
 };