diff --git a/components/klipfolio/.gitignore b/components/klipfolio/.gitignore
deleted file mode 100644
index ec761ccab7595..0000000000000
--- a/components/klipfolio/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-*.js
-*.mjs
-dist
\ No newline at end of file
diff --git a/components/klipfolio/actions/create-datasource/create-datasource.mjs b/components/klipfolio/actions/create-datasource/create-datasource.mjs
new file mode 100644
index 0000000000000..f5d7ba7e86d56
--- /dev/null
+++ b/components/klipfolio/actions/create-datasource/create-datasource.mjs
@@ -0,0 +1,82 @@
+import app from "../../klipfolio.app.mjs";
+
+export default {
+  key: "klipfolio-create-datasource",
+  name: "Create Datasource",
+  description: "Create a data source. [See the documentation](https://apidocs.klipfolio.com/reference/data-sources#post-datasources)",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    app,
+    name: {
+      propDefinition: [
+        app,
+        "name",
+      ],
+    },
+    description: {
+      propDefinition: [
+        app,
+        "description",
+      ],
+    },
+    format: {
+      propDefinition: [
+        app,
+        "format",
+      ],
+    },
+    connector: {
+      propDefinition: [
+        app,
+        "connector",
+      ],
+    },
+    refreshInterval: {
+      propDefinition: [
+        app,
+        "refreshInterval",
+      ],
+    },
+    endpointUrl: {
+      propDefinition: [
+        app,
+        "endpointUrl",
+      ],
+    },
+    method: {
+      propDefinition: [
+        app,
+        "method",
+      ],
+    },
+    additionalProperties: {
+      propDefinition: [
+        app,
+        "additionalProperties",
+      ],
+    },
+  },
+
+  async run({ $ }) {
+    const response = await this.app.createDatasource({
+      $,
+      data: {
+        name: this.name,
+        description: this.description,
+        format: this.format,
+        connector: this.connector,
+        refresh_interval: parseInt(this.refreshInterval, 10),
+        properties: {
+          endpoint_url: this.endpointUrl,
+          method: this.method,
+          ...this.additionalProperties,
+        },
+      },
+    });
+
+    $.export("$summary", `Successfully created Datasource named '${this.name}'`);
+
+    return response;
+  },
+};
diff --git a/components/klipfolio/actions/delete-datasource/delete-datasource.mjs b/components/klipfolio/actions/delete-datasource/delete-datasource.mjs
new file mode 100644
index 0000000000000..78eb41418f6c9
--- /dev/null
+++ b/components/klipfolio/actions/delete-datasource/delete-datasource.mjs
@@ -0,0 +1,29 @@
+import app from "../../klipfolio.app.mjs";
+
+export default {
+  key: "klipfolio-delete-datasource",
+  name: "Delete Datasource",
+  description: "Delete the data source associated with a specific data source ID. [See the documentation](https://apidocs.klipfolio.com/reference/data-sources#delete-datasourcesid)",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    app,
+    datasourceId: {
+      propDefinition: [
+        app,
+        "datasourceId",
+      ],
+    },
+  },
+
+  async run({ $ }) {
+    const response = await this.app.deleteDatasource({
+      $,
+      datasourceId: this.datasourceId,
+    });
+
+    $.export("$summary", `Successfully deleted datasource with ID: ${this.datasourceId}`);
+
+    return response;
+  },
+};
diff --git a/components/klipfolio/actions/update-datasource/update-datasource.mjs b/components/klipfolio/actions/update-datasource/update-datasource.mjs
new file mode 100644
index 0000000000000..3701e97107b36
--- /dev/null
+++ b/components/klipfolio/actions/update-datasource/update-datasource.mjs
@@ -0,0 +1,52 @@
+import app from "../../klipfolio.app.mjs";
+
+export default {
+  key: "klipfolio-update-datasource",
+  name: "Update Datasource",
+  description: "Update the specified data source. [See the documentation](https://apidocs.klipfolio.com/reference/data-sources#put-datasourcesid)",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    app,
+    datasourceId: {
+      propDefinition: [
+        app,
+        "datasourceId",
+      ],
+    },
+    name: {
+      propDefinition: [
+        app,
+        "name",
+      ],
+    },
+    description: {
+      propDefinition: [
+        app,
+        "description",
+      ],
+    },
+    refreshInterval: {
+      propDefinition: [
+        app,
+        "refreshInterval",
+      ],
+    },
+  },
+
+  async run({ $ }) {
+    const response = await this.app.updateDatasource({
+      $,
+      datasourceId: this.datasourceId,
+      data: {
+        name: this.name,
+        description: this.description,
+        refresh_interval: parseInt(this.refreshInterval, 10),
+      },
+    });
+
+    $.export("$summary", `Successfully updated Datasource named '${this.name}'`);
+
+    return response;
+  },
+};
diff --git a/components/klipfolio/app/klipfolio.app.ts b/components/klipfolio/app/klipfolio.app.ts
deleted file mode 100644
index 688ab9a4688e9..0000000000000
--- a/components/klipfolio/app/klipfolio.app.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineApp } from "@pipedream/types";
-
-export default defineApp({
-  type: "app",
-  app: "klipfolio",
-  propDefinitions: {},
-  methods: {
-    // this.$auth contains connected account data
-    authKeys() {
-      console.log(Object.keys(this.$auth));
-    },
-  },
-});
\ No newline at end of file
diff --git a/components/klipfolio/common/constants.mjs b/components/klipfolio/common/constants.mjs
new file mode 100644
index 0000000000000..7b2657c279f7c
--- /dev/null
+++ b/components/klipfolio/common/constants.mjs
@@ -0,0 +1,40 @@
+export default {
+  DATASOURCE_CONNECTORS: [
+    "box",
+    "comscore",
+    "db",
+    "dropbox",
+    "facebook",
+    "ftp",
+    "google_adwords",
+    "google_analytics",
+    "google_drive",
+    "google_spreadsheets",
+    "hubspot",
+    "iformbuilder",
+    "marketo",
+    "omniture",
+    "radian6",
+    "salesforce",
+    "searchMetrics",
+    "shopify",
+    "simple_rest",
+    "survey_monkey",
+    "versature",
+    "xero",
+    "xmla",
+  ],
+  REFRESH_INTERVALS: [
+    "0",
+    "60",
+    "300",
+    "900",
+    "1800",
+    "3600",
+    "7200",
+    "10800",
+    "14400",
+    "43200",
+    "86400",
+  ],
+};
diff --git a/components/klipfolio/klipfolio.app.mjs b/components/klipfolio/klipfolio.app.mjs
new file mode 100644
index 0000000000000..e7fabc40b3685
--- /dev/null
+++ b/components/klipfolio/klipfolio.app.mjs
@@ -0,0 +1,119 @@
+import { axios } from "@pipedream/platform";
+import constants from "./common/constants.mjs";
+
+export default {
+  type: "app",
+  app: "klipfolio",
+  propDefinitions: {
+    name: {
+      type: "string",
+      label: "Name",
+      description: "Name of the Datasource",
+    },
+    description: {
+      type: "string",
+      label: "Description",
+      description: "Description of the Datasource",
+    },
+    format: {
+      type: "string",
+      label: "Format",
+      description: "Format of the Datasource, i.e.: `xml`",
+    },
+    connector: {
+      type: "string",
+      label: "Connector",
+      description: "Connector of the Datasource",
+      options: constants.DATASOURCE_CONNECTORS,
+    },
+    refreshInterval: {
+      type: "string",
+      label: "Refresh Interval",
+      description: "Refresh Interval of the Datasource",
+      options: constants.REFRESH_INTERVALS,
+    },
+    endpointUrl: {
+      type: "string",
+      label: "Endpoint URL",
+      description: "Endpoint URL of the Datasource, i.e.: `http://test/data/scatter.xml`",
+    },
+    method: {
+      type: "string",
+      label: "Method",
+      description: "Method for the endpoint, i.e.: `GET`",
+    },
+    datasourceId: {
+      type: "string",
+      label: "Datasource ID",
+      description: "ID of the Datasource",
+      async options() {
+        const response = await this.getDatasources();
+        const datasourceIds = response.data.datasources;
+        return datasourceIds.map(({
+          id, name,
+        }) => ({
+          label: name,
+          value: id,
+        }));
+      },
+    },
+    additionalProperties: {
+      type: "object",
+      label: "Additional Properties",
+      description: "Data source additional properties. For example, Google Analytics API has the following properties: `oauth_provider_id`, `oauth_user_header`, `oauth_user_token`, `token_id`, `prop:profile_id`.",
+      optional: true,
+    },
+  },
+  methods: {
+    _baseUrl() {
+      return "https://app.klipfolio.com/api/1.0";
+    },
+    async _makeRequest(opts = {}) {
+      const {
+        $ = this,
+        path,
+        headers,
+        ...otherOpts
+      } = opts;
+      return axios($, {
+        ...otherOpts,
+        url: this._baseUrl() + path,
+        headers: {
+          ...headers,
+          "kf-api-key": `${this.$auth.api_key}`,
+        },
+      });
+    },
+    async createDatasource(args = {}) {
+      return this._makeRequest({
+        path: "/datasources",
+        method: "post",
+        ...args,
+      });
+    },
+    async updateDatasource({
+      datasourceId, ...args
+    }) {
+      return this._makeRequest({
+        path: `/datasources/${datasourceId}`,
+        method: "put",
+        ...args,
+      });
+    },
+    async deleteDatasource({
+      datasourceId, ...args
+    }) {
+      return this._makeRequest({
+        path: `/datasources/${datasourceId}`,
+        method: "delete",
+        ...args,
+      });
+    },
+    async getDatasources(args = {}) {
+      return this._makeRequest({
+        path: "/datasources",
+        ...args,
+      });
+    },
+  },
+};
diff --git a/components/klipfolio/package.json b/components/klipfolio/package.json
index cccf7a1e3674a..8256b3ed0f288 100644
--- a/components/klipfolio/package.json
+++ b/components/klipfolio/package.json
@@ -1,16 +1,18 @@
 {
   "name": "@pipedream/klipfolio",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Pipedream Klipfolio Components",
-  "main": "dist/app/klipfolio.app.mjs",
+  "main": "klipfolio.app.mjs",
   "keywords": [
     "pipedream",
     "klipfolio"
   ],
-  "files": ["dist"],
   "homepage": "https://pipedream.com/apps/klipfolio",
   "author": "Pipedream <support@pipedream.com> (https://pipedream.com/)",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@pipedream/platform": "^3.0.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be24fc224032a..1a6e932647523 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5640,7 +5640,11 @@ importers:
         specifier: ^1.5.1
         version: 1.6.6
 
-  components/klipfolio: {}
+  components/klipfolio:
+    dependencies:
+      '@pipedream/platform':
+        specifier: ^3.0.3
+        version: 3.0.3
 
   components/knack:
     dependencies: