diff --git a/README.md b/README.md
index 928d866..b6e69db 100644
--- a/README.md
+++ b/README.md
@@ -9,8 +9,9 @@
 
 https://github.com/prisma/prisma/issues/4571#issuecomment-747496127
 
-# Apps
-- Create an app
-- Get all apps
+http://localhost:4000/apps/saml?RelayState&SAMLRequest=
 
-http://localhost:4000/apps/saml?RelayState=boxyhq_jackson_2fd72712996df6104811ff8cc233d1e2&SAMLRequest=PD94bWwgdmVyc2lvbj0iMS4wIj8%2BPHNhbWxwOkF1dGhuUmVxdWVzdCB4bWxuczpzYW1scD0idXJuOm9hc2lzOm5hbWVzOnRjOlNBTUw6Mi4wOnByb3RvY29sIiBJRD0iXzZiMmU1ZDdhMDRiNjEzMzAyZDhmIiBWZXJzaW9uPSIyLjAiIElzc3VlSW5zdGFudD0iMjAyMi0wMS0xNFQxNToxODoxNi4yNTlaIiBQcm90b2NvbEJpbmRpbmc9InVybjpvYXNpczpuYW1lczp0YzpTQU1MOjIuMDpiaW5kaW5nczpIVFRQLVBPU1QiIEFzc2VydGlvbkNvbnN1bWVyU2VydmljZVVSTD0iaHR0cHM6Ly8yOGEyLTEwMy0xNTMtMTA0LTQzLm5ncm9rLmlvL3Nzby9hY3MiIFByb3ZpZGVyTmFtZT0iQm94eUhRIj48c2FtbDpJc3N1ZXIgeG1sbnM6c2FtbD0idXJuOm9hc2lzOm5hbWVzOnRjOlNBTUw6Mi4wOmFzc2VydGlvbiI%2BaHR0cHM6Ly9zYW1sLmJveHlocS5jb208L3NhbWw6SXNzdWVyPjxTaWduYXR1cmUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvMDkveG1sZHNpZyMiPjxTaWduZWRJbmZvPjxDYW5vbmljYWxpemF0aW9uTWV0aG9kIEFsZ29yaXRobT0iaHR0cDovL3d3dy53My5vcmcvMjAwMS8xMC94bWwtZXhjLWMxNG4jIi8%2BPFNpZ25hdHVyZU1ldGhvZCBBbGdvcml0aG09Imh0dHA6Ly93d3cudzMub3JnLzIwMDEvMDQveG1sZHNpZy1tb3JlI3JzYS1zaGEyNTYiLz48UmVmZXJlbmNlIFVSST0iI182YjJlNWQ3YTA0YjYxMzMwMmQ4ZiI%2BPFRyYW5zZm9ybXM%2BPFRyYW5zZm9ybSBBbGdvcml0aG09Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvMDkveG1sZHNpZyNlbnZlbG9wZWQtc2lnbmF0dXJlIi8%2BPFRyYW5zZm9ybSBBbGdvcml0aG09Imh0dHA6Ly93d3cudzMub3JnLzIwMDEvMTAveG1sLWV4Yy1jMTRuIyIvPjwvVHJhbnNmb3Jtcz48RGlnZXN0TWV0aG9kIEFsZ29yaXRobT0iaHR0cDovL3d3dy53My5vcmcvMjAwMS8wNC94bWxlbmMjc2hhMjU2Ii8%2BPERpZ2VzdFZhbHVlPlBXVFlGek9hV1FvZHNqK21haEdnam1VQkZsVFk5cGlQNy8yVVkvNEZkN289PC9EaWdlc3RWYWx1ZT48L1JlZmVyZW5jZT48L1NpZ25lZEluZm8%2BPFNpZ25hdHVyZVZhbHVlPm5HbEMrZVkwMC82eDZQNlBMcGFoOVR5QzlRTnNKR0U3V0Y1czQ1SXZRbWlJWmwrSmhNVGRQeExBSjJ1dVpQMWZzZ1NwUllPZG5HanRLNjlobS9LOHZDVGlab29EODdjdkJmdXp4NVVNQ3NiV0VQSERJV01rV1k3S2ZrYk5ySjNMdVZyYTR0SEZvY2luQnVwRzNMeVQ5dUtwRzI1NlQrNm9LUDNOdkJSTzRROUFpWlk4czlxaVhzRE9QQlJRd3NEaEdNdGRJcGVDaGZQU2RQdFV1RXV3UEdRS1pZellFY0d3WHpOTGYydm5PaS9QUE5rRHA4QTdPN2FJd09HWFNDVVlqL29oNUo4RWRQdVpyRzFuL0ZMdm04L0dNY2pNTTYwQWZ1NFg3WGMzRlFRUG5aZ2lxdFlsd2YwbjFDemlkbnYvbDE3NjF6T3grWXJqb08zaUp0SHB6Zz09PC9TaWduYXR1cmVWYWx1ZT48L1NpZ25hdHVyZT48c2FtbHA6TmFtZUlEUG9saWN5IHhtbG5zOnNhbWxwPSJ1cm46b2FzaXM6bmFtZXM6dGM6U0FNTDoyLjA6cHJvdG9jb2wiIEZvcm1hdD0idXJuOm9hc2lzOm5hbWVzOnRjOlNBTUw6MS4xOm5hbWVpZC1mb3JtYXQ6ZW1haWxBZGRyZXNzIiBBbGxvd0NyZWF0ZT0idHJ1ZSIvPjwvc2FtbHA6QXV0aG5SZXF1ZXN0Pg%3D%3D
+## Pages
+- Create an app
+- List all app
+- View individual app page (with Download Metadata button and Delete button)
\ No newline at end of file
diff --git a/components/Header.tsx b/components/Header.tsx
index e69de29..fa5bf97 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -0,0 +1,7 @@
+export default function Header() {
+    return (
+      <>
+        <div>Header</div>
+      </>
+    )
+}
\ No newline at end of file
diff --git a/components/Layout.tsx b/components/Layout.tsx
index e69de29..2a180ab 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -0,0 +1,12 @@
+import Navbar from './NavBar'
+import Header from './Header'
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Navbar />
+        <main>{children}</main>
+      <Header />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index e69de29..353cb57 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -0,0 +1,16 @@
+import { Sidenav, Nav, Dropdown } from 'rsuite';
+
+export default function Navbar() {
+    return (
+        <div style={{ width: 240 }}>
+        <Sidenav defaultOpenKeys={['3', '4']} activeKey="1">
+          <Sidenav.Body>
+            <Nav>
+              <Nav.Item eventKey="1">Dashboard</Nav.Item>
+              <Nav.Item eventKey="2">Apps</Nav.Item>
+            </Nav>
+          </Sidenav.Body>
+        </Sidenav>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/lib/prisma.ts b/lib/prisma.ts
new file mode 100644
index 0000000..d26489c
--- /dev/null
+++ b/lib/prisma.ts
@@ -0,0 +1,15 @@
+import { PrismaClient } from '@prisma/client';
+
+let prisma: PrismaClient;
+
+if (process.env.NODE_ENV === 'production') {
+  prisma = new PrismaClient();
+} else {
+  if (!global.prisma) {
+    global.prisma = new PrismaClient();
+  }
+
+  prisma = global.prisma;
+}
+
+export default prisma;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4a253b0..b21b179 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "next": "12.0.7",
         "react": "17.0.2",
         "react-dom": "17.0.2",
+        "rsuite": "^5.5.2",
         "xml2js": "^0.4.23",
         "xmlbuilder": "^15.1.1"
       },
@@ -791,6 +792,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
     "node_modules/@napi-rs/triples": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz",
@@ -1146,18 +1152,48 @@
       "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-3.7.0-31.8746e055198f517658c08a0c426c7eec87f5a85f.tgz",
       "integrity": "sha512-+qx2b+HK7BKF4VCa0LZ/t1QCXsu6SmvhUQyJkOD2aPpmOzket4fEnSKQZSB0i5tl7rwCDsvAiSeK8o7rf+yvwg=="
     },
+    "node_modules/@rsuite/icon-font": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz",
+      "integrity": "sha512-rZTgpTH3H3HLczCA2rnkWfoMKm0ZXoRzsrkVujfP/FfslnKUMvO6w56pa8pCvhWGpNEPUsLS2ULnFGpTEcup/Q=="
+    },
+    "node_modules/@rsuite/icons": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rsuite/icons/-/icons-1.0.2.tgz",
+      "integrity": "sha512-Y7vJNDQpJnFlyYSUXQ2iQ9Meg7+ZKcrIenhpYDdM3c7vYDE/L7pml+hrK28jk6QfV/QkVv5B504D+l7aM6AAJQ==",
+      "dependencies": {
+        "@rsuite/icon-font": "^4.0.0",
+        "classnames": "^2.2.5",
+        "insert-css": "^2.0.0",
+        "lodash": "^4.17.20"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz",
       "integrity": "sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==",
       "dev": true
     },
+    "node_modules/@types/chai": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.0.tgz",
+      "integrity": "sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw=="
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+    },
     "node_modules/@types/node": {
       "version": "17.0.8",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.8.tgz",
@@ -1172,25 +1208,31 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
     "node_modules/@types/react": {
       "version": "17.0.38",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
       "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-virtualized": {
+      "version": "9.21.16",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.16.tgz",
+      "integrity": "sha512-25QMrouz1VKq5T68+9JfRq3GP4JmN20ARi+hl5z7NMmriy07XmGd1Yh3I4EIZjmifpXhHZoQS/ny2fzZRyiAiw==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.9.0",
@@ -1951,6 +1993,14 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
       "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
+    "node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2146,8 +2196,7 @@
     "node_modules/csstype": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2163,6 +2212,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2279,6 +2340,34 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/dom-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dom-lib/-/dom-lib-3.0.1.tgz",
+      "integrity": "sha512-8ejYOFLj2Qxa9+UAkomy978SmZSirb9d/UKm+0/DAx1XwvkYlIfyykuNOVe5egic4Ekc6N8Mj3rD1O2owQ4Mxw==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.0"
+      }
+    },
+    "node_modules/dom-lib/node_modules/@babel/runtime": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
+      "integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/domain-browser": {
       "version": "4.19.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
@@ -3624,6 +3713,11 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/insert-css": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz",
+      "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ="
+    },
     "node_modules/internal-slot": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
@@ -4087,6 +4181,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4867,7 +4966,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -4877,8 +4975,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/public-encrypt": {
       "version": "4.0.3",
@@ -5026,6 +5123,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -5151,6 +5253,73 @@
         "inherits": "^2.0.1"
       }
     },
+    "node_modules/rsuite": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/rsuite/-/rsuite-5.5.2.tgz",
+      "integrity": "sha512-QI50DptQG2KIsAHyVNVD70qr9bzb+DXqu1BTxIIXX4pxya3ru632g2xY082InzlrHDEnAASxbmGVBkR92OeuyQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.4",
+        "@juggle/resize-observer": "^3.3.1",
+        "@rsuite/icons": "^1.0.2",
+        "@types/chai": "^4.2.18",
+        "@types/lodash": "^4.14.134",
+        "@types/prop-types": "^15.7.4",
+        "@types/react-virtualized": "^9.21.11",
+        "classnames": "^2.3.1",
+        "date-fns": "^2.13.0",
+        "dom-lib": "^3.0.0",
+        "lodash": "^4.17.11",
+        "prop-types": "^15.7.2",
+        "react-virtualized": "^9.22.3",
+        "rsuite-table": "^5.3.2",
+        "schema-typed": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/rsuite-table": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/rsuite-table/-/rsuite-table-5.3.2.tgz",
+      "integrity": "sha512-4ZAxHLdKt9UojE7UqDzUxbzPBwYNMRsrwwJSmrwq18Afqk83HX/7UFCXPhxLX3wu49SVX6pnkAE9I5K1EB2/ug==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@juggle/resize-observer": "^3.3.1",
+        "@rsuite/icons": "^1.0.0",
+        "classnames": "^2.2.5",
+        "dom-lib": "^3.0.0",
+        "lodash": "^4.17.21",
+        "react-is": "^17.0.2"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^0.14.9 || >=15.3.0",
+        "react-dom": "^0.14.9 || >=15.3.0"
+      }
+    },
+    "node_modules/rsuite/node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
+    "node_modules/rsuite/node_modules/react-virtualized": {
+      "version": "9.22.3",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz",
+      "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5212,6 +5381,25 @@
         "object-assign": "^4.1.1"
       }
     },
+    "node_modules/schema-typed": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-2.0.2.tgz",
+      "integrity": "sha512-E8GAANjZ8oYwyQJEyf/93W1QERTCwu8N7aMUbgBWbYvqzZE8f/kAZaL5D9knr7yLEgMnwJQ4pd8x8EVZ0PpzUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.16.0"
+      }
+    },
+    "node_modules/schema-typed/node_modules/@babel/runtime": {
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
+      "integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -6640,6 +6828,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
     "@napi-rs/triples": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz",
@@ -6838,18 +7031,44 @@
       "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-3.7.0-31.8746e055198f517658c08a0c426c7eec87f5a85f.tgz",
       "integrity": "sha512-+qx2b+HK7BKF4VCa0LZ/t1QCXsu6SmvhUQyJkOD2aPpmOzket4fEnSKQZSB0i5tl7rwCDsvAiSeK8o7rf+yvwg=="
     },
+    "@rsuite/icon-font": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz",
+      "integrity": "sha512-rZTgpTH3H3HLczCA2rnkWfoMKm0ZXoRzsrkVujfP/FfslnKUMvO6w56pa8pCvhWGpNEPUsLS2ULnFGpTEcup/Q=="
+    },
+    "@rsuite/icons": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@rsuite/icons/-/icons-1.0.2.tgz",
+      "integrity": "sha512-Y7vJNDQpJnFlyYSUXQ2iQ9Meg7+ZKcrIenhpYDdM3c7vYDE/L7pml+hrK28jk6QfV/QkVv5B504D+l7aM6AAJQ==",
+      "requires": {
+        "@rsuite/icon-font": "^4.0.0",
+        "classnames": "^2.2.5",
+        "insert-css": "^2.0.0",
+        "lodash": "^4.17.20"
+      }
+    },
     "@rushstack/eslint-patch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz",
       "integrity": "sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==",
       "dev": true
     },
+    "@types/chai": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.0.tgz",
+      "integrity": "sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw=="
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.178",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz",
+      "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+    },
     "@types/node": {
       "version": "17.0.8",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.8.tgz",
@@ -6864,25 +7083,31 @@
     "@types/prop-types": {
       "version": "15.7.4",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
-      "dev": true
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
     "@types/react": {
       "version": "17.0.38",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
       "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-virtualized": {
+      "version": "9.21.16",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.16.tgz",
+      "integrity": "sha512-25QMrouz1VKq5T68+9JfRq3GP4JmN20ARi+hl5z7NMmriy07XmGd1Yh3I4EIZjmifpXhHZoQS/ny2fzZRyiAiw==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
     "@typescript-eslint/parser": {
       "version": "5.9.0",
@@ -7437,6 +7662,11 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
       "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -7605,8 +7835,7 @@
     "csstype": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
-      "dev": true
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -7619,6 +7848,11 @@
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
       "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -7719,6 +7953,33 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "dom-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dom-lib/-/dom-lib-3.0.1.tgz",
+      "integrity": "sha512-8ejYOFLj2Qxa9+UAkomy978SmZSirb9d/UKm+0/DAx1XwvkYlIfyykuNOVe5egic4Ekc6N8Mj3rD1O2owQ4Mxw==",
+      "requires": {
+        "@babel/runtime": "^7.16.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.17.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
+          "integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "domain-browser": {
       "version": "4.19.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
@@ -8718,6 +8979,11 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "insert-css": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz",
+      "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ="
+    },
     "internal-slot": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
@@ -9041,6 +9307,11 @@
         "p-locate": "^4.1.0"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -9602,7 +9873,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -9612,8 +9882,7 @@
         "react-is": {
           "version": "16.13.1",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-          "dev": true
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         }
       }
     },
@@ -9729,6 +9998,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -9814,6 +10088,62 @@
         "inherits": "^2.0.1"
       }
     },
+    "rsuite": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/rsuite/-/rsuite-5.5.2.tgz",
+      "integrity": "sha512-QI50DptQG2KIsAHyVNVD70qr9bzb+DXqu1BTxIIXX4pxya3ru632g2xY082InzlrHDEnAASxbmGVBkR92OeuyQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.4",
+        "@juggle/resize-observer": "^3.3.1",
+        "@rsuite/icons": "^1.0.2",
+        "@types/chai": "^4.2.18",
+        "@types/lodash": "^4.14.134",
+        "@types/prop-types": "^15.7.4",
+        "@types/react-virtualized": "^9.21.11",
+        "classnames": "^2.3.1",
+        "date-fns": "^2.13.0",
+        "dom-lib": "^3.0.0",
+        "lodash": "^4.17.11",
+        "prop-types": "^15.7.2",
+        "react-virtualized": "^9.22.3",
+        "rsuite-table": "^5.3.2",
+        "schema-typed": "^2.0.2"
+      },
+      "dependencies": {
+        "classnames": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+          "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+        },
+        "react-virtualized": {
+          "version": "9.22.3",
+          "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz",
+          "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
+          "requires": {
+            "@babel/runtime": "^7.7.2",
+            "clsx": "^1.0.4",
+            "dom-helpers": "^5.1.3",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.7.2",
+            "react-lifecycles-compat": "^3.0.4"
+          }
+        }
+      }
+    },
+    "rsuite-table": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/rsuite-table/-/rsuite-table-5.3.2.tgz",
+      "integrity": "sha512-4ZAxHLdKt9UojE7UqDzUxbzPBwYNMRsrwwJSmrwq18Afqk83HX/7UFCXPhxLX3wu49SVX6pnkAE9I5K1EB2/ug==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@juggle/resize-observer": "^3.3.1",
+        "@rsuite/icons": "^1.0.0",
+        "classnames": "^2.2.5",
+        "dom-lib": "^3.0.0",
+        "lodash": "^4.17.21",
+        "react-is": "^17.0.2"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -9847,6 +10177,24 @@
         "object-assign": "^4.1.1"
       }
     },
+    "schema-typed": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-2.0.2.tgz",
+      "integrity": "sha512-E8GAANjZ8oYwyQJEyf/93W1QERTCwu8N7aMUbgBWbYvqzZE8f/kAZaL5D9knr7yLEgMnwJQ4pd8x8EVZ0PpzUA==",
+      "requires": {
+        "@babel/runtime": "^7.16.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.17.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
+          "integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
diff --git a/package.json b/package.json
index 6610461..9385f30 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "rsuite": "^5.5.2",
     "xml2js": "^0.4.23",
     "xmlbuilder": "^15.1.1"
   },
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3f5c9d5..55eb596 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,8 +1,14 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import Layout from '../components/Layout'
+import 'rsuite/dist/rsuite.min.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
 }
 
 export default MyApp
diff --git a/pages/api/apps/index.ts b/pages/api/apps/index.ts
index 6beeeb0..f02cb7f 100644
--- a/pages/api/apps/index.ts
+++ b/pages/api/apps/index.ts
@@ -1,10 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
-import { apps } from '../../../services';
 import type { App, IdPMetadata } from '../../../types';
+import prisma from '../../../lib/prisma';
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<App | App[] | IdPMetadata | null>
+  res: NextApiResponse<App | App[]>
 ) {
 
   switch (req.method) {
@@ -18,12 +18,12 @@ export default async function handler(
 
   // Get all apps
   async function getAllApps() {
-    const appList = await apps.getAll();
+    const apps = await prisma.app.findMany();
 
-    return res.json(appList);
+    return res.json(apps);
   }
 
-  // Create a new app 
+  // Create a new app
   async function createApp() {
     const {
       name,
@@ -32,7 +32,14 @@ export default async function handler(
       description = null,
     } = req.body;
 
-    const app = await apps.create(name, description, acs_url, entity_id);
+    const app = await prisma.app.create({
+      data: {
+        name,
+        acs_url,
+        entity_id,
+        description
+      }
+    });
 
     return res.json(app);
   }
diff --git a/pages/api/apps/metadata.ts b/pages/api/apps/metadata.ts
index 8136ce2..46edadc 100644
--- a/pages/api/apps/metadata.ts
+++ b/pages/api/apps/metadata.ts
@@ -1,30 +1,60 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { createCertificate, createIdPMetadataXML } from '../../../utils';
+import { IdPMetadata } from '../../../types';
+
+const idpEntityId = 'http://saml.example.com';
+const baseUrl = 'http://localhost:4000'; // TODO: Read from .env
+
+// https://boxyhqdemo.onelogin.com/trust/saml2/http-post/sso/a810f17d-48a8-4ac2-ae0f-253c823b272c
+// https://dev-8924093.okta.com/app/dev-8924093_jacksondemo_1/exk3u9pl6jx4P9AE15d7/sso/saml
+// https://accounts.google.com/o/saml2/idp?idpid=C02frd9s1
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<any>
+  res: NextApiResponse<IdPMetadata>
 ) {
-  if (req.method === 'POST') {
-    return await download(req);
+
+  switch (req.method) {
+    case 'GET':
+      return await getMetadata();
+    case 'POST':
+      return await downloadMetadata();
+    default:
+      return res.status(405).end(`Method ${req.method} Not Allowed`);
   }
 
-  async function download(req: NextApiRequest) {
-    const { acs_url, sp_entity_id } = req.body;
+  // Get metadata for an app
+  async function getMetadata() {
+    //const {id} = req.query;
+    const appId = '0480c44e-f200-4f72-8af0-a5a57611fd2d';
+
+    const metadata = {
+      certificate: await createCertificate(),
+      fingerprint: '',
+      sso_url: `${baseUrl}/saml2/app/${appId}`,
+      entity_id: idpEntityId,
+    }
+
+    return res.json(metadata);
+  }
+
+  // Download metadata for an app
+  async function downloadMetadata() {
+    const appId = '0480c44e-f200-4f72-8af0-a5a57611fd2d';
 
     const certificate = await createCertificate();
     const idpEntityId = 'http://localhost:4000/sso';
     const idpSsoUrl = 'http://localhost:4000/sso';
-
+  
     const xml = await createIdPMetadataXML({
       idpEntityId,
       idpSsoUrl,
       certificate,
     });
-
+  
     res.setHeader('Content-type', 'text/xml');
     res.setHeader('Content-Disposition', 'attachment; filename="metadata.xml"');
-
+  
     return res.send(xml);
   }
 }
diff --git a/pages/apps/[id].tsx b/pages/apps/[id].tsx
new file mode 100644
index 0000000..099758a
--- /dev/null
+++ b/pages/apps/[id].tsx
@@ -0,0 +1,41 @@
+import prisma from '../../lib/prisma';
+import { GetServerSideProps } from 'next';
+import React from 'react';
+import { App } from '../../types';
+import axios from 'axios';
+import { IdPMetadata } from '../../types';
+
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+    const app = await prisma.app.findUnique({
+      where: {
+        id: params?.id,
+      }
+    });
+
+    const metadata = await axios.get('http://localhost:4000/api/apps/metadata');
+
+    return {
+      props: {
+        app,
+        metadata: metadata.data,
+      },
+    };
+};
+
+const ShowApp: React.FC<{app: App, metadata: IdPMetadata}> = ({app, metadata}) => {
+  return (
+    <div>
+      <p>Id: {app.id}</p>
+      <p>name: {app.name}</p>
+      <p>acs_url: {app.acs_url}</p>
+      <p>entity_id: {app.entity_id}</p>
+
+      <strong>Metadata</strong>
+      <p>sso_url: {metadata.sso_url}</p>
+      <p>entity_id: {metadata.entity_id}</p>
+      <p>certificate: {metadata.certificate}</p>
+    </div>
+  );
+};
+
+export default ShowApp;
\ No newline at end of file
diff --git a/pages/apps/demo.tsx b/pages/apps/demo.tsx
new file mode 100644
index 0000000..674feef
--- /dev/null
+++ b/pages/apps/demo.tsx
@@ -0,0 +1,13 @@
+import type { NextPage } from 'next';
+import { useEffect, useRef, useState } from 'react';
+import { Sidenav, Nav, Dropdown } from 'rsuite';
+
+const Demo: NextPage = (prop) => {
+  return (
+    <div>
+      <h2>Hello from demo</h2>
+    </div>
+  );
+};
+
+export default Demo;
\ No newline at end of file
diff --git a/pages/apps/index.tsx b/pages/apps/index.tsx
index f566259..d2ba9e2 100644
--- a/pages/apps/index.tsx
+++ b/pages/apps/index.tsx
@@ -4,6 +4,7 @@ import { ChangeEvent, FormEvent, useState } from 'react';
 
 const Apps: NextPage = () => {
   const [formData, setFormData] = useState({
+    name: null,
     acs_url: null,
     entity_id: null,
   });
@@ -41,27 +42,34 @@ const Apps: NextPage = () => {
 
   return (
     <div>
-      <form onSubmit={createApp} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+      <form onSubmit={createApp} className="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
         <div className="mb-4">
-          <label className="block text-sm mb-2">
+          <label className="block mb-2 text-sm">
+            App Name
+            <input type="text" name="name" onChange={handleInputChange} required className="w-full px-3 py-2 border rounded" placeholder="App Name"  />
+          </label>
+        </div>
+
+        <div className="mb-4">
+          <label className="block mb-2 text-sm">
             ACS URL
-            <input type="text" name="acs_url" onChange={handleInputChange} required className="border rounded w-full py-2 px-3" placeholder="ACS URL"  />
+            <input type="text" name="acs_url" onChange={handleInputChange} required className="w-full px-3 py-2 border rounded" placeholder="ACS URL"  />
           </label>
         </div>
 
         <div className="mb-4">
-          <label className="block text-sm mb-2">
+          <label className="block mb-2 text-sm">
             Entity ID
-            <input type="text" name="entity_id" onChange={handleInputChange} required className="border rounded w-full py-2 px-3" placeholder="Entity ID"  />
+            <input type="text" name="entity_id" onChange={handleInputChange} required className="w-full px-3 py-2 border rounded" placeholder="Entity ID"  />
           </label>
         </div>
 
-        <button type="submit" className="bg-blue-500 text-white py-2 px-4 rounded">Build IdP Metadata</button>
+        <button type="submit" className="px-4 py-2 text-white bg-blue-500 rounded">Build IdP Metadata</button>
       </form>
 
-      <button type="button" className="bg-red-500 text-white py-2 px-3 rounded" onClick={downloadMetadata}>Download Metadata</button>
+      <button type="button" className="px-3 py-2 text-white bg-red-500 rounded" onClick={downloadMetadata}>Download Metadata</button>
 
-      <ul className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+      <ul className="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
         <li className="px-2 py-2"><strong>SSO URL:</strong> <br></br> {metadata.sso_url}</li>
         <li className="px-2 py-2"><strong>Entity ID:</strong> <br></br> {metadata.entity_id}</li>
         <li className="px-2 py-2"><strong>Certificate:</strong> <br></br> {metadata.certificate}</li>
diff --git a/services/apps.ts b/services/apps.ts
deleted file mode 100644
index 531c4db..0000000
--- a/services/apps.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PrismaClient } from '@prisma/client';
-import type { App } from '../types';
-
-const prisma = new PrismaClient();
-
-const create = async function(name: string, description: string, acsUrl: string, entityId: string): Promise<App> {
-  const body = {
-    name, 
-    description, 
-    acs_url: acsUrl,
-    entity_id: entityId,
-  }
-
-  return await prisma.app.create({ data: body });
-}
-
-const getAll = async function(): Promise<App[]> {
-  return await prisma.app.findMany();
-}
-
-const getById = async function(id: string): Promise<App | null> {
-  return await prisma.app.findUnique({
-    where: {
-      id,
-    },
-  });
-}
-
-export {
-  create,
-  getAll,
-  getById,
-}
\ No newline at end of file
diff --git a/services/index.ts b/services/index.ts
deleted file mode 100644
index f7aa2c2..0000000
--- a/services/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * as apps from './apps';
-export * as metadata from './metadata';
diff --git a/services/metadata.ts b/services/metadata.ts
deleted file mode 100644
index 6975b34..0000000
--- a/services/metadata.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { IdPMetadata } from '../types';
-
-const baseUrl = 'http://localhost:3000/saml';
-
-export const create = (
-  acs_url: string,
-  entity_id: string,
-  certificate: string
-): IdPMetadata => {
-  const params = new URLSearchParams({
-    acs_url,
-    entity_id,
-  }).toString();
-
-  return {
-    sso_url: `${baseUrl}?${params}`,
-    entity_id: `${baseUrl}?${params}`,
-    certificate: certificate,
-  };
-};
diff --git a/types/index.ts b/types/index.ts
index 41129f2..0632780 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -12,7 +12,7 @@ export type App = {
   id: string;
   name: string;
   description?: string | null;
-  certificate?: string;
+  certificate?: string | null;
 } & ServiceProvider;
 
 export type IdPMetadata = {