diff --git a/app/javascript/gabsocial/features/groups/index/index.js b/app/javascript/gabsocial/features/groups/index/index.js
index e40e957e..ed60aeee 100644
--- a/app/javascript/gabsocial/features/groups/index/index.js
+++ b/app/javascript/gabsocial/features/groups/index/index.js
@@ -10,6 +10,7 @@ import classNames from 'classnames';
 import GroupCard from './card';
 import GroupCreate from '../create';
 import { me } from 'gabsocial/initial_state';
+import { openModal } from '../../../actions/modal';
 
 const messages = defineMessages({
 	heading: { id: 'column.groups', defaultMessage: 'Groups' },
@@ -47,12 +48,27 @@ class Groups extends ImmutablePureComponent {
 		}
 	}
 
+	handleOpenProUpgradeModal = () => {
+		this.props.dispatch(openModal('PRO_UPGRADE'));
+	}
+
 	renderHeader() {
-		const { intl, activeTab, account } = this.props;
+		const { intl, activeTab, account, onOpenProUpgradeModal } = this.props;
+
+		const isPro = account.get('is_pro');
 
 		return (
 			<div className="group-column-header">
-				{account && account.get('is_pro') && <div className="group-column-header__cta"><Link to="/groups/create" className="button standard-small">{intl.formatMessage(messages.create)}</Link></div>}
+				<div className="group-column-header__cta">
+					{
+						account && isPro &&
+						<Link to="/groups/create" className="button standard-small">{intl.formatMessage(messages.create)}</Link>
+					}
+					{
+						account && !isPro &&
+						<button onClick={this.handleOpenProUpgradeModal} className="button standard-small">{intl.formatMessage(messages.create)}</button>
+					}
+				</div>
 				<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
 
 				<div className="column-header__wrapper">