diff --git a/components/Shell.tsx b/components/Shell.tsx
index 738f89fa..c13468bc 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -1,8 +1,8 @@
 import Link from 'next/link';
-import {useContext, useEffect, useState} from "react";
-import { useRouter } from "next/router";
-import { signOut, useSession } from 'next-auth/client';
-import { MenuIcon, XIcon } from '@heroicons/react/outline';
+import {useEffect, useState} from "react";
+import {useRouter} from "next/router";
+import {signOut, useSession} from 'next-auth/client';
+import {MenuIcon, XIcon} from '@heroicons/react/outline';
 import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../lib/telemetry";
 
 export default function Shell(props) {
@@ -133,7 +133,7 @@ export default function Shell(props) {
                     </div>
                     }
                 </nav>
-                <header className="py-10">
+                <header className={props.noPaddingBottom ? "pt-10" : "py-10"}>
                     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                         <h1 className="text-3xl font-bold text-white">
                             {props.heading}
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index f92ea500..d732eee1 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -2,10 +2,10 @@ import Head from 'next/head';
 import Link from 'next/link';
 import prisma from '../../lib/prisma';
 import Shell from '../../components/Shell';
-import { useState } from 'react';
-import { useSession, getSession } from 'next-auth/client';
-import { CheckCircleIcon, XCircleIcon, ChevronRightIcon, PlusIcon } from '@heroicons/react/solid';
-import { InformationCircleIcon } from '@heroicons/react/outline';
+import {useState} from 'react';
+import {getSession, useSession} from 'next-auth/client';
+import {CheckCircleIcon, ChevronRightIcon, PlusIcon, XCircleIcon} from '@heroicons/react/solid';
+import {InformationCircleIcon} from '@heroicons/react/outline';
 
 export default function Home({ integrations }) {
     const [session, loading] = useSession();
@@ -32,7 +32,13 @@ export default function Home({ integrations }) {
                 <link rel="icon" href="/favicon.ico" />
             </Head>
 
-            <Shell heading="Integrations">
+            <Shell heading="Integrations" noPaddingBottom>
+                <div className="text-right py-2">
+                    <button onClick={toggleAddModal} type="button"
+                            className="px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Add new integration
+                    </button>
+                </div>
                 <div className="bg-white shadow overflow-hidden rounded-lg">
                     {integrations.filter( (ig) => ig.credential ).length !== 0 ? <ul className="divide-y divide-gray-200">
                         {integrations.filter(ig => ig.credential).map( (ig) => (<li>