diff --git a/pagure/templates/add_group.html b/pagure/templates/add_group.html
index 73bd161..cf82563 100644
--- a/pagure/templates/add_group.html
+++ b/pagure/templates/add_group.html
@@ -1,32 +1,36 @@
 {% extends "master.html" %}
-{% from "_formhelper.html" import render_field_in_row %}
+{% from "_formhelper.html" import render_bootstrap_field %}
 
+{% block title %}Create Group{% endblock %}
 {% set tag = "groups" %}
-{% block title %}Create group{% endblock %}
 
 
 {% block content %}
 
-<h2>Create group</h2>
-
-<section class="new_group">
-    <form action="{{ url_for('.add_group') }}" method="post">
-
-    <table>
-      {{ render_field_in_row(form.group_name) }}
-      {{ render_field_in_row(form.display_name) }}
-      {{ render_field_in_row(form.description) }}
-      {%- if admin %}
-      {{ render_field_in_row(form.group_type) }}
-      {%- endif %}
-    </table>
-    <p class="buttons indent">
-      <input type="submit" class="submit positive button" value="Add">
-      <input type="button" value="Cancel" class="button"
-       onclick="history.back();">
-      {{ form.csrf_token }}
-    </p>
-  </form>
-</section>
-
+<div class="container">
+  <div class="row">
+    <div class="col-md-8 col-md-offset-2">
+      <div class="card m-t-3">
+        <div class="card-header">
+          <strong>Create new group</strong>
+        </div>
+        <div class="card-block">
+          <form action="{{ url_for('add_group') }}" method="post">
+            {{ render_bootstrap_field(form.group_name, field_description="the name of your group") }}
+            {{ render_bootstrap_field(form.display_name, field_description="display name of your group") }}
+            {{ render_bootstrap_field(form.description, field_description="short description about the group") }}
+            {%- if admin %}
+            {{ render_bootstrap_field(form.group_type, field_description="mention the type of group") }}
+            {%- endif %}
+            <p class="buttons indent">
+              <input class="submit positive btn btn-primary" type="submit" value="Create" >
+              <input type="button" value="Cancel" class="btn btn-default" onclick="history.back();">
+              {{ form.csrf_token }}
+            </p>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
diff --git a/pagure/templates/group_list.html b/pagure/templates/group_list.html
index b75eed8..a2b6905 100644
--- a/pagure/templates/group_list.html
+++ b/pagure/templates/group_list.html
@@ -21,45 +21,16 @@
     Groups <span class="label label-default">{{ groups | length }}</span>
     {% if authenticated and config.get('ENABLE_GROUP_MNGT', False) %}
 
-      <button type="button" id="new_user_btn" data-target="#add_group"
-        class="btn btn-success pull-xs-right" data-toggle="modal">
-        New Group
-      </button>
+      <a href="{{ url_for('add_group') }}">
+        <button type="button" id="new_user_btn" 
+          class="btn btn-success pull-xs-right" data-toggle="tooltip" title="Create New Group" >
+          New Group
+        </button>
+      </a>
 
     {% endif %}
   </h2>
 
-  {% if authenticated %}
-  <div class="modal fade" id="add_group" tabindex="-1" role="dialog" aria-labelledby="add_group" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-          <h4 class="modal-title" id="myModalLabel">Create New Group</h4>
-        </div>
-        <form action="{{ url_for('.add_group') }}" method="post">
-          <div class="modal-body">
-            <fieldset>
-              <strong>Group Name:</strong>
-              <input class="form-control" id="group_name" name="group_name" title="Group name" />
-              {%- if admin %}
-              {{ form.group_type()|safe }}
-              {%- endif %}
-              {{ form.csrf_token }}
-            </fieldset>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-            <input type="submit" class="btn btn-primary" value="Add">
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-  {% endif %}
-
   {% if total_page and total_page > 1 %}
   <nav class="text-center">
     <ul class="pagination">
@@ -118,13 +89,6 @@ $(document).ready(function() {
         return false;
     }
   });
-  {% if config.get('ENABLE_GROUP_MNGT', False) %}
-  $('#add_group').on(
-    'shown.bs.modal', function () {
-      $('#group_name').focus()
-    }
-  );
-  {% endif %}
 
   $('#term').selectize({
     valueField: 'group',
diff --git a/pagure/templates/index_auth.html b/pagure/templates/index_auth.html
index 18c1cd3..f42b32f 100644
--- a/pagure/templates/index_auth.html
+++ b/pagure/templates/index_auth.html
@@ -185,6 +185,13 @@
         <div class="card" id="group_list">
             <div class="card-header">
                 My Groups <span class="label label-default">{{ user.groups | length }}</span>
+                <span class="pull-xs-right">
+                  <a class="btn btn-secondary btn-sm" href="{{ url_for('add_group') }}">
+                    <span class="oi" data-glyph="plus" data-toggle="tooltip"
+                      title="Create New Group" aria-hidden="true">
+                    </span>
+                  </a>
+                </span>
             </div>
             {% for group in user.groups %}
               <div class="list-group">
diff --git a/tests/test_pagure_flask_ui_groups.py b/tests/test_pagure_flask_ui_groups.py
index b505f16..a5b6536 100644
--- a/tests/test_pagure_flask_ui_groups.py
+++ b/tests/test_pagure_flask_ui_groups.py
@@ -74,7 +74,7 @@ class PagureFlaskGroupstests(tests.Modeltests):
         with tests.user_set(pagure.APP, user):
             output = self.app.get('/group/add')
             self.assertEqual(output.status_code, 200)
-            self.assertIn('<h2>Create group</h2>', output.data)
+            self.assertIn('<strong>Create new group</strong>', output.data)
             self.assertNotIn(
                 '<option value="admin">admin</option>', output.data)
 
@@ -87,7 +87,7 @@ class PagureFlaskGroupstests(tests.Modeltests):
             # Insufficient input
             output = self.app.post('/group/add', data=data)
             self.assertEqual(output.status_code, 200)
-            self.assertIn('<h2>Create group</h2>', output.data)
+            self.assertIn('<strong>Create new group</strong>', output.data)
             self.assertEqual(output.data.count(
                 'This field is required.'), 3)
 
@@ -100,7 +100,7 @@ class PagureFlaskGroupstests(tests.Modeltests):
             # Missing CSRF
             output = self.app.post('/group/add', data=data)
             self.assertEqual(output.status_code, 200)
-            self.assertIn('<h2>Create group</h2>', output.data)
+            self.assertIn('<strong>Create new group</strong>', output.data)
             self.assertEqual(output.data.count(
                 'This field is required.'), 0)
 
@@ -127,7 +127,7 @@ class PagureFlaskGroupstests(tests.Modeltests):
         with tests.user_set(pagure.APP, user):
             output = self.app.get('/group/add')
             self.assertEqual(output.status_code, 200)
-            self.assertIn('<h2>Create group</h2>', output.data)
+            self.assertIn('<strong>Create new group</strong>', output.data)
             self.assertIn('<option value="admin">admin</option>', output.data)
 
             data = {
@@ -272,6 +272,7 @@ class PagureFlaskGroupstests(tests.Modeltests):
                 '    Groups <span class="label label-default">1</span>',
                 output.data)
 
+            output = self.app.get('/new/')
             csrf_token = output.data.split(
                 'name="csrf_token" type="hidden" value="')[1].split('">')[0]