diff --git a/client/homebrew/navbar/newbrew.navitem.jsx b/client/homebrew/navbar/newbrew.navitem.jsx
index 94aa9fb85..6e63e7a8f 100644
--- a/client/homebrew/navbar/newbrew.navitem.jsx
+++ b/client/homebrew/navbar/newbrew.navitem.jsx
@@ -1,98 +1,95 @@
 const React = require('react');
+const { useState, useRef } = React;
 const _ = require('lodash');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const yaml = require('js-yaml');
-const { useRef } = React;
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
 const METAKEY  = 'homebrewery-new-meta';
 
-const splitTextStyleAndMetadata = (brew)=>{
-	brew.text = brew.text.replaceAll('\r\n', '\n');
-	if(brew.text.startsWith('```metadata')) {
-		const index = brew.text.indexOf('```\n\n');
-		const metadataSection = brew.text.slice(12, index - 1);
-		const metadata = yaml.load(metadataSection);
-		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
-		brew.text = brew.text.slice(index + 5);
-	}
-	if(brew.text.startsWith('```css')) {
-		const index = brew.text.indexOf('```\n\n');
-		brew.style = brew.text.slice(7, index - 1);
-		brew.text = brew.text.slice(index + 5);
-	}
+const NewBrew = () => {
+    const inputRef = useRef(null);
+    
+    const [brew, setBrew] = useState({
+        text: '',
+        style: ''
+    });
+
+    const splitTextStyleAndMetadata = (brewContent) => {
+        let updatedBrew = { ...brewContent };
+        updatedBrew.text = updatedBrew.text.replaceAll('\r\n', '\n');
+        if (updatedBrew.text.startsWith('```metadata')) {
+            const index = updatedBrew.text.indexOf('```\n\n');
+            const metadataSection = updatedBrew.text.slice(12, index - 1);
+            const metadata = yaml.load(metadataSection);
+            updatedBrew = {
+                ...updatedBrew,
+                ..._.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])
+            };
+            updatedBrew.text = updatedBrew.text.slice(index + 5);
+        }
+        if (updatedBrew.text.startsWith('```css')) {
+            const index = updatedBrew.text.indexOf('```\n\n');
+            updatedBrew.style = updatedBrew.text.slice(7, index - 1);
+            updatedBrew.text = updatedBrew.text.slice(index + 5);
+        }
+        return updatedBrew;
+    };
+
+    
+    const handleFileChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const fileContent = e.target.result;
+                const newBrew = {
+                    text: fileContent,
+                    style: ''
+                };
+				if(fileContent.startsWith('```metadata')) {
+					const updatedBrew = splitTextStyleAndMetadata(newBrew);
+					console.log(updatedBrew);
+					setBrew(updatedBrew);
+					localStorage.setItem(BREWKEY, updatedBrew.text);
+					localStorage.setItem(STYLEKEY, updatedBrew.style);
+					localStorage.setItem(METAKEY, JSON.stringify(_.pick(updatedBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
+					
+					window.location.href = '/new';
+				} else {
+                    alert('This file is invalid, please, enter a valid file');
+                }
+            };
+            reader.readAsText(file);
+        }
+    };
+
+    return (
+        <Nav.dropdown>
+            <Nav.item
+                className='new'
+                color='purple'
+                icon='fas fa-plus-square'>
+                new
+            </Nav.item>
+            <Nav.item
+                href='/new'
+                newTab={true}
+                color='purple'
+                icon='fas fa-plus-square'>
+                new
+            </Nav.item>
+
+            <Nav.item
+                color='purple'
+                icon='fas fa-plus-square'
+                onClick={() => { inputRef.current.click(); }}>
+                <input className='newFromLocal' type="file" ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} />
+                New From Local File
+            </Nav.item>
+        </Nav.dropdown>
+    );
 };
 
-
-const handleFileChange = (e) => {
-	const file = e.target.files[0];
-	if (file) {
-		const reader = new FileReader();
-		reader.onload = (e) => {
-			const fileContent = e.target.result;
-			
-			const brew = {
-				text  :fileContent,
-				style : ''
-			}
-			splitTextStyleAndMetadata(brew);
-			console.log(brew);
-			localStorage.setItem(BREWKEY, brew.text);
-			localStorage.setItem(STYLEKEY, brew.style);
-			localStorage.setItem(METAKEY, JSON.stringify({
-				'title': brew.title,
-				'description': brew.description,
-				'tags': brew.tags,
-				'systems': brew.systems,
-				'renderer': brew.renderer,
-				'theme': brew.theme,
-				'lang': brew.lang
-			}));
-
-			//window.location.href = '/new';
-		};
-		reader.readAsText(file);
-	}
-};
-
-
-module.exports = function(props){
-	const inputRef = useRef(null);
-
-	return <Nav.dropdown>
-		<Nav.item
-			className='new'
-			color='purple'
-			icon='fas fa-plus-square'>
-			new
-		</Nav.item>
-		<Nav.item
-			href='/new'
-			newTab={true}
-			color='purple'
-			icon='fas fa-plus-square'>
-			new
-		</Nav.item>
-		
-		<Nav.item
-            color='purple'
-            icon='fas fa-plus-square'
-			onClick={() => { inputRef.current.click(); }}>
-            <input className='newFromLocal' type="file" ref={inputRef} onChange={handleFileChange}  style={{ display: 'none' }}/>
-            New From Local File
-        </Nav.item>
-
-	</Nav.dropdown>;
-	
-};
-
-/*
-<Nav.item
-			href={'/new/'+encodeURIComponent(brewID)}
-			newTab={true}
-			color='purple'
-			icon='fas fa-plus-square'>
-			new cloned
-		</Nav.item>
-*/
\ No newline at end of file
+module.exports = NewBrew;