diff --git a/src/main/resources/templates/index.ftl b/src/main/resources/templates/index.ftl
index f8a4ada19172ac88efb7020071170ada76ff4b89..38b8bac65e7565d49a61af33a54693a5512a6b99 100644
--- a/src/main/resources/templates/index.ftl
+++ b/src/main/resources/templates/index.ftl
@@ -21,44 +21,54 @@
                     <div class="hide-on-small-only"><br></div>
 
                     <div class="row home-menu-flex">
-                        <div class="col s12 m4 center-align home-menu-cell">
+                        <div class="col s12 m6 l4 center-align home-menu-cell">
                             <a href="/accounts" class="home-menu-link budgetmaster-text-black">
                                 <h1 class="center budgetmaster-grey-text"><i class="material-icons icon-budget">account_balance</i></h1>
                                 <h3 class="center budget">${locale.getString("menu.accounts")}</h3>
                                 <p class="text-grey">${locale.getString("home.menu.accounts")}</p>
                             </a>
                         </div>
-                        <div class="col s12 m4 center-align home-menu-cell">
+                        <div class="col s12 m6 l4 center-align home-menu-cell">
                             <a href="/transactions" class="home-menu-link budgetmaster-text-black">
                                 <h1 class="center budgetmaster-baby-blue-text"><i class="material-icons icon-budget">list</i></h1>
                                 <h3 class="center budget">${locale.getString("menu.transactions")}</h3>
                                 <p class="text-grey">${locale.getString("home.menu.transactions")}</p>
                             </a>
                         </div>
-                        <div class="col s12 m4 center-align home-menu-cell">
+                <div class="hide-on-small-only hide-on-large-only">
+                    </div>
+                    <div class="row home-menu-flex">
+                </div>
+                        <div class="col s12 m6 l4 center-align home-menu-cell">
                             <a class="home-menu-link budgetmaster-text-black home-menu-disabled">
                                 <h1 class="center budgetmaster-purple-text"><i class="material-icons icon-budget">show_chart</i></h1>
                                 <h3 class="center budget">${locale.getString("menu.charts")}</h3>
                                 <p class="home-menu-disabled ">${locale.getString("home.menu.charts")}</p>
                             </a>
                         </div>
+                <div class="hide-on-med-only">
                     </div>
                     <div class="row home-menu-flex">
-                        <div class="col s12 m4 center-align home-menu-cell">
+                </div>
+                        <div class="col s12 m6 l4 center-align home-menu-cell">
                             <a class="home-menu-link budgetmaster-text-black home-menu-disabled">
                                 <h1 class="center budgetmaster-green-text"><i class="material-icons icon-budget">description</i></h1>
                                 <h3 class="center budget">${locale.getString("menu.reports")}</h3>
                                 <p class="home-menu-disabled ">${locale.getString("home.menu.reports")}</p>
                             </a>
                         </div>
-                        <div class="col s12 m4 center-align home-menu-cell">
+                <div class="hide-on-small-only hide-on-large-only">
+                    </div>
+                    <div class="row home-menu-flex">
+                </div>
+                        <div class="col s12 m6 l4 center-align home-menu-cell">
                             <a href="/categories" class="home-menu-link budgetmaster-text-black">
                                 <h1 class="center budgetmaster-orange-text"><i class="material-icons icon-budget">label</i></h1>
                                 <h3 class="center budget">${locale.getString("menu.categories")}</h3>
                                 <p class="text-grey">${locale.getString("home.menu.categories")}</p>
                             </a>
                         </div>
-                        <div class="col s12 m4 center-align home-menu-cell">
+                        <div class="col s12 m6 l4 center-align home-menu-cell">
                             <a href="/settings" class="home-menu-link budgetmaster-text-black">
                                 <h1 class="center budgetmaster-red-text"><i class="material-icons icon-budget">settings</i></h1>
                                 <h3 class="center budget">${locale.getString("menu.settings")}</h3>