diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.ts
similarity index 62%
rename from packages/server/src/api/controllers/component.js
rename to packages/server/src/api/controllers/component.ts
index e949db3042..6d65d43db6 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.ts
@@ -1,15 +1,15 @@
-const { DocumentType, getPluginParams } = require("../../db/utils")
-const { getComponentLibraryManifest } = require("../../utilities/fileSystem")
-const { getAppDB } = require("@budibase/backend-core/context")
-const { getGlobalDB } = require("@budibase/backend-core/tenancy")
+import { DocumentType } from "../../db/utils"
+import { Plugin } from "@budibase/types"
+import { db as dbCore, context, tenancy } from "@budibase/backend-core"
+import { getComponentLibraryManifest } from "../../utilities/fileSystem"
 
-exports.fetchAppComponentDefinitions = async function (ctx) {
+exports.fetchAppComponentDefinitions = async function (ctx: any) {
   try {
-    const db = getAppDB()
+    const db = context.getAppDB()
     const app = await db.get(DocumentType.APP_METADATA)
 
     let componentManifests = await Promise.all(
-      app.componentLibraries.map(async library => {
+      app.componentLibraries.map(async (library: any) => {
         let manifest = await getComponentLibraryManifest(library)
         return {
           manifest,
@@ -17,7 +17,7 @@ exports.fetchAppComponentDefinitions = async function (ctx) {
         }
       })
     )
-    const definitions = {}
+    const definitions: { [key: string]: any } = {}
     for (let { manifest, library } of componentManifests) {
       for (let key of Object.keys(manifest)) {
         if (key === "features") {
@@ -33,16 +33,16 @@ exports.fetchAppComponentDefinitions = async function (ctx) {
     }
 
     // Add custom components
-    const globalDB = getGlobalDB()
+    const globalDB = tenancy.getGlobalDB()
     const response = await globalDB.allDocs(
-      getPluginParams(null, {
+      dbCore.getPluginParams(null, {
         include_docs: true,
       })
     )
     response.rows
-      .map(row => row.doc)
-      .filter(plugin => plugin.schema.type === "component")
-      .forEach(plugin => {
+      .map((row: any) => row.doc)
+      .filter((plugin: Plugin) => plugin.schema.type === "component")
+      .forEach((plugin: Plugin) => {
         const fullComponentName = `plugin/${plugin.name}`
         definitions[fullComponentName] = {
           component: fullComponentName,
diff --git a/packages/server/src/api/controllers/screen.js b/packages/server/src/api/controllers/screen.ts
similarity index 67%
rename from packages/server/src/api/controllers/screen.js
rename to packages/server/src/api/controllers/screen.ts
index ca25a72a8a..08040351dd 100644
--- a/packages/server/src/api/controllers/screen.js
+++ b/packages/server/src/api/controllers/screen.ts
@@ -1,17 +1,16 @@
-const {
-  getScreenParams,
-  generateScreenID,
-  getPluginParams,
-  DocumentType,
-} = require("../../db/utils")
-const { AccessController } = require("@budibase/backend-core/roles")
-const { getAppDB } = require("@budibase/backend-core/context")
-const { events } = require("@budibase/backend-core")
-const { getGlobalDB } = require("@budibase/backend-core/tenancy")
-const { updateAppPackage } = require("./application")
+import { getScreenParams, generateScreenID, DocumentType } from "../../db/utils"
+import {
+  events,
+  context,
+  tenancy,
+  db as dbCore,
+  roles,
+} from "@budibase/backend-core"
+import { updateAppPackage } from "./application"
+import { Plugin, ScreenProps } from "@budibase/types"
 
-exports.fetch = async ctx => {
-  const db = getAppDB()
+exports.fetch = async (ctx: any) => {
+  const db = context.getAppDB()
 
   const screens = (
     await db.allDocs(
@@ -19,16 +18,16 @@ exports.fetch = async ctx => {
         include_docs: true,
       })
     )
-  ).rows.map(element => element.doc)
+  ).rows.map((el: any) => el.doc)
 
-  ctx.body = await new AccessController().checkScreensAccess(
+  ctx.body = await new roles.AccessController().checkScreensAccess(
     screens,
     ctx.user.role._id
   )
 }
 
-exports.save = async ctx => {
-  const db = getAppDB()
+exports.save = async (ctx: any) => {
+  const db = context.getAppDB()
   let screen = ctx.request.body
 
   let eventFn
@@ -40,19 +39,19 @@ exports.save = async ctx => {
   const response = await db.put(screen)
 
   // Find any custom components being used
-  let pluginNames = []
+  let pluginNames: string[] = []
   let pluginAdded = false
   findPlugins(screen.props, pluginNames)
   if (pluginNames.length) {
-    const globalDB = getGlobalDB()
+    const globalDB = tenancy.getGlobalDB()
     const pluginsResponse = await globalDB.allDocs(
-      getPluginParams(null, {
+      dbCore.getPluginParams(null, {
         include_docs: true,
       })
     )
     const requiredPlugins = pluginsResponse.rows
-      .map(row => row.doc)
-      .filter(plugin => {
+      .map((row: any) => row.doc)
+      .filter((plugin: Plugin) => {
         return (
           plugin.schema.type === "component" &&
           pluginNames.includes(`plugin/${plugin.name}`)
@@ -63,8 +62,8 @@ exports.save = async ctx => {
     const application = await db.get(DocumentType.APP_METADATA)
     let usedPlugins = application.usedPlugins || []
 
-    requiredPlugins.forEach(plugin => {
-      if (!usedPlugins.find(x => x._id === plugin._id)) {
+    requiredPlugins.forEach((plugin: Plugin) => {
+      if (!usedPlugins.find((x: Plugin) => x._id === plugin._id)) {
         pluginAdded = true
         usedPlugins.push({
           _id: plugin._id,
@@ -93,8 +92,8 @@ exports.save = async ctx => {
   }
 }
 
-exports.destroy = async ctx => {
-  const db = getAppDB()
+exports.destroy = async (ctx: any) => {
+  const db = context.getAppDB()
   const id = ctx.params.screenId
   const screen = await db.get(id)
 
@@ -107,7 +106,7 @@ exports.destroy = async ctx => {
   ctx.status = 200
 }
 
-const findPlugins = (component, foundPlugins) => {
+const findPlugins = (component: ScreenProps, foundPlugins: string[]) => {
   if (!component) {
     return
   }
diff --git a/packages/types/src/documents/app/screen.ts b/packages/types/src/documents/app/screen.ts
index 98db658aa6..6390c3b18c 100644
--- a/packages/types/src/documents/app/screen.ts
+++ b/packages/types/src/documents/app/screen.ts
@@ -1,5 +1,17 @@
 import { Document } from "../document"
 
+export interface ScreenProps extends Document {
+  _instanceName: string
+  _styles: { [key: string]: any }
+  _component: string
+  _children: ScreenProps[]
+  size?: string
+  gap?: string
+  direction?: string
+  vAlign?: string
+  hAlign?: string
+}
+
 export interface Screen extends Document {
   layoutId?: string
   showNavigation?: boolean
@@ -9,4 +21,5 @@ export interface Screen extends Document {
     roleId: string
     homeScreen?: boolean
   }
+  props: ScreenProps
 }