diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index a939fa5d6..45a6efe2f 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -56,7 +56,7 @@
 			background-color : #ddd;
 			.snippet{
 				.animate(background-color);
-				padding   : 10px;
+				padding   : 5px;
 				cursor    : pointer;
 				font-size : 10px;
 				i{
diff --git a/client/homebrew/pages/userPage/brewItem/brewItem.jsx b/client/homebrew/pages/userPage/brewItem/brewItem.jsx
index 94158cb57..6a15903ed 100644
--- a/client/homebrew/pages/userPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/userPage/brewItem/brewItem.jsx
@@ -1,19 +1,37 @@
 const React = require('react');
 const _     = require('lodash');
 const cx    = require('classnames');
+const moment = require('moment');
 
 const BrewItem = React.createClass({
 	getDefaultProps: function() {
 		return {
 			brew : {
+				title : '',
+				description : '',
 
+				authors : []
 			}
 		};
 	},
 
 	render : function(){
+		const brew = this.props.brew;
 		return <div className='brewItem'>
-			BrewItem Component Ready.
+			<h4>{brew.title}</h4>
+			<p className='description'><em>{brew.description}</em></p>
+			<hr />
+			<ul>
+				<li><strong>Authors: </strong> {brew.authors.join(', ')}</li>
+				<li>
+					<strong>Last updated: </strong>
+					{moment(brew.updatedAt).fromNow()}
+				</li>
+				<li><strong>Views: </strong> {brew.views} </li>
+			</ul>
+
+			<a href={`/share/${brew.shareId}`} target='_blank'>Share link</a>
+			{(!!brew.editId ? <a href={`/edit/${brew.editId}`} target='_blank'>Edit link</a> : null)}
 		</div>
 	}
 });
diff --git a/client/homebrew/pages/userPage/brewItem/brewItem.less b/client/homebrew/pages/userPage/brewItem/brewItem.less
index 6cfd7b408..f8145cb66 100644
--- a/client/homebrew/pages/userPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/userPage/brewItem/brewItem.less
@@ -1,3 +1,19 @@
-.brewItem{
 
+.brewItem{
+	display                     : inline-block;
+	vertical-align              : top;
+	width                       : 33%;
+	margin-bottom               : 15px;
+	-webkit-column-break-inside : avoid;
+	page-break-inside           : avoid;
+	break-inside                : avoid;
+	p.description{
+		overflow      : hidden;
+		width         : 90%;
+		text-overflow : ellipsis;
+		white-space   : nowrap;
+	}
+	a{
+		margin-right : 10px;
+	}
 }
\ No newline at end of file
diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index 120bd883c..db4173c20 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -15,15 +15,20 @@ const UserPage = React.createClass({
 		};
 	},
 
-	renderBrews : function(){
-		return _.map(this.props.brews, (brew) => {
-			return <BrewItem brew={brew} />
+	renderBrews : function(brews){
+		return _.map(brews, (brew, idx) => {
+			return <BrewItem brew={brew} key={idx}/>
+		});
+	},
+
+	getSortedBrews : function(){
+		return _.groupBy(this.props.brews, (brew)=>{
+			return (brew.published ? 'published' : 'private')
 		});
 	},
 
 	render : function(){
-		console.log(this.props.brews);
-
+		const brews = this.getSortedBrews();
 		return <div className='userPage page'>
 			<Navbar>
 				<Nav.section>
@@ -33,8 +38,10 @@ const UserPage = React.createClass({
 
 			<div className='content'>
 				<div className='phb'>
-					<h1>{this.props.username}</h1>
-					{this.renderBrews()}
+					<h1>{this.props.username}'s brews</h1>
+					{this.renderBrews(brews.published)}
+					{brews.private ? <h1>{this.props.username}'s unpublished brews</h1> : null}
+					{this.renderBrews(brews.private)}
 				</div>
 			</div>
 		</div>
diff --git a/client/homebrew/pages/userPage/userPage.less b/client/homebrew/pages/userPage/userPage.less
index 52d691e7c..56bad4037 100644
--- a/client/homebrew/pages/userPage/userPage.less
+++ b/client/homebrew/pages/userPage/userPage.less
@@ -1,5 +1,11 @@
 .userPage{
 	.content .phb{
 		margin: 20px auto;
+		min-height : 350px;
+		height : 80%;
+		column-count : 1;
+		&::after{
+			display : none;
+		}
 	}
 }
\ No newline at end of file