diff --git a/components/dashboard/package.json b/components/dashboard/package.json
index d435735020e08a..654f61951752d2 100644
--- a/components/dashboard/package.json
+++ b/components/dashboard/package.json
@@ -10,6 +10,7 @@
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
     "@types/react-datepicker": "^4.8.0",
+    "classnames": "^2.3.1",
     "configcat-js": "^6.0.0",
     "countries-list": "^2.6.1",
     "dayjs": "^1.11.5",
@@ -43,7 +44,6 @@
     "@typescript-eslint/eslint-plugin": "^4.21.0",
     "@typescript-eslint/parser": "^4.21.0",
     "autoprefixer": "^9.8.6",
-    "classnames": "^2.3.1",
     "cypress": "^9.2.1",
     "eslint": "^7.24.0",
     "eslint-config-react-app": "^6.0.0",
diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
index c65e7bcbd039fe..3ef0fc831c643e 100644
--- a/components/dashboard/src/components/Modal.tsx
+++ b/components/dashboard/src/components/Modal.tsx
@@ -4,7 +4,8 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { useEffect } from "react";
+import { ReactNode, useEffect } from "react";
+import cn from "classnames";
 import { getGitpodService } from "../service/service";
 
 type CloseModalManner = "esc" | "enter" | "x";
@@ -14,8 +15,8 @@ export default function Modal(props: {
     specify?: string;
     title?: string;
     hideDivider?: boolean;
-    buttons?: React.ReactChild[] | React.ReactChild;
-    children: React.ReactChild[] | React.ReactChild;
+    buttons?: ReactNode;
+    children: ReactNode;
     visible: boolean;
     closeable?: boolean;
     className?: string;
@@ -75,10 +76,10 @@ export default function Modal(props: {
         <div className="fixed top-0 left-0 bg-black bg-opacity-70 z-50 w-screen h-screen">
             <div className="w-screen h-screen align-middle" style={{ display: "table-cell" }}>
                 <div
-                    className={
-                        "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6 max-w-lg mx-auto text-left " +
-                        (props.className || "")
-                    }
+                    className={cn(
+                        "flex flex-col max-h-screen relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6 max-w-lg mx-auto text-left ",
+                        props.className,
+                    )}
                 >
                     {props.closeable !== false && (
                         <div
@@ -93,16 +94,9 @@ export default function Modal(props: {
                     )}
                     {props.title ? (
                         <>
-                            <h3 className="pb-2">{props.title}</h3>
-                            <div
-                                className={
-                                    "border-gray-200 dark:border-gray-800 -mx-6 px-6 " +
-                                    (props.hideDivider ? "" : "border-t border-b mt-2 py-4")
-                                }
-                            >
-                                {props.children}
-                            </div>
-                            <div className="flex justify-end mt-6 space-x-2">{props.buttons}</div>
+                            <ModalHeader>{props.title}</ModalHeader>
+                            <ModalBody hideDivider={props.hideDivider}>{props.children}</ModalBody>
+                            <ModalFooter>{props.buttons}</ModalFooter>
                         </>
                     ) : (
                         props.children
@@ -112,3 +106,35 @@ export default function Modal(props: {
         </div>
     );
 }
+
+type ModalHeaderProps = {
+    children: ReactNode;
+};
+
+export const ModalHeader = ({ children }: ModalHeaderProps) => {
+    return <h3 className="pb-2">{children}</h3>;
+};
+
+type ModalBodyProps = {
+    children: ReactNode;
+    hideDivider?: boolean;
+};
+
+export const ModalBody = ({ children, hideDivider = false }: ModalBodyProps) => {
+    return (
+        <div
+            className={cn("overflow-y-auto border-gray-200 dark:border-gray-800 -mx-6 px-6 ", {
+                "border-t border-b mt-2 py-4": !hideDivider,
+            })}
+        >
+            {children}
+        </div>
+    );
+};
+
+type ModalFooterProps = {
+    children: ReactNode;
+};
+export const ModalFooter = ({ children }: ModalFooterProps) => {
+    return <div className="flex justify-end mt-6 space-x-2">{children}</div>;
+};
diff --git a/components/dashboard/src/settings/EnvironmentVariables.tsx b/components/dashboard/src/settings/EnvironmentVariables.tsx
index b52e33e3feba1a..c5056fe3e8fbc0 100644
--- a/components/dashboard/src/settings/EnvironmentVariables.tsx
+++ b/components/dashboard/src/settings/EnvironmentVariables.tsx
@@ -8,7 +8,7 @@ import { UserEnvVar, UserEnvVarValue } from "@gitpod/gitpod-protocol";
 import { useEffect, useRef, useState } from "react";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { Item, ItemField, ItemFieldContextMenu, ItemsList } from "../components/ItemsList";
-import Modal from "../components/Modal";
+import Modal, { ModalBody, ModalFooter, ModalHeader } from "../components/Modal";
 import { getGitpodService } from "../service/service";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 
@@ -52,8 +52,8 @@ function AddEnvVarModal(p: EnvVarModalProps) {
     return (
         // TODO: Use title and buttons props
         <Modal visible={true} onClose={p.onClose} onEnter={save}>
-            <h3 className="mb-4">{isNew ? "New" : "Edit"} Variable</h3>
-            <div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4 flex flex-col">
+            <ModalHeader>{isNew ? "New" : "Edit"} Variable</ModalHeader>
+            <ModalBody>
                 {error ? (
                     <div className="bg-gitpod-kumquat-light rounded-md p-3 text-gitpod-red text-sm mb-2">{error}</div>
                 ) : null}
@@ -98,15 +98,15 @@ function AddEnvVarModal(p: EnvVarModalProps) {
                         make it available in more projects.
                     </p>
                 </div>
-            </div>
-            <div className="flex justify-end mt-6">
+            </ModalBody>
+            <ModalFooter>
                 <button className="secondary" onClick={p.onClose}>
                     Cancel
                 </button>
                 <button className="ml-2" onClick={save}>
                     {isNew ? "Add" : "Update"} Variable
                 </button>
-            </div>
+            </ModalFooter>
         </Modal>
     );
 }
diff --git a/components/dashboard/src/settings/Integrations.tsx b/components/dashboard/src/settings/Integrations.tsx
index 054e3abc2880fb..a1158eb5fb4fd6 100644
--- a/components/dashboard/src/settings/Integrations.tsx
+++ b/components/dashboard/src/settings/Integrations.tsx
@@ -13,7 +13,7 @@ import ConfirmationModal from "../components/ConfirmationModal";
 import { ContextMenuEntry } from "../components/ContextMenu";
 import InfoBox from "../components/InfoBox";
 import { Item, ItemField, ItemFieldContextMenu, ItemFieldIcon, ItemsList } from "../components/ItemsList";
-import Modal from "../components/Modal";
+import Modal, { ModalBody, ModalHeader, ModalFooter } from "../components/Modal";
 import copy from "../images/copy.svg";
 import exclamation from "../images/exclamation.svg";
 import { openAuthorizeWindow } from "../provider-utils";
@@ -291,8 +291,8 @@ function GitProviders() {
             {editModal && (
                 // TODO: Use title and buttons props
                 <Modal visible={true} onClose={() => setEditModal(undefined)}>
-                    <h3 className="pb-2">Edit Permissions</h3>
-                    <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
+                    <ModalHeader>Edit Permissions</ModalHeader>
+                    <ModalBody>
                         <div className="text-gray-500">Configure provider permissions.</div>
                         {(editModal.provider.scopes || []).map((scope) => (
                             <div key={`scope-${scope}`}>
@@ -307,15 +307,15 @@ function GitProviders() {
                                 ></CheckBox>
                             </div>
                         ))}
-                    </div>
-                    <div className="flex justify-end mt-6">
+                    </ModalBody>
+                    <ModalFooter>
                         <button
                             onClick={() => updatePermissions()}
                             disabled={equals(editModal.nextScopes, editModal.prevScopes)}
                         >
                             Update Permissions
                         </button>
-                    </div>
+                    </ModalFooter>
                 </Modal>
             )}