diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e7b33a41..90c3b3b1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,29 +12,29 @@ Anyone is free to contribute changes to any file in this repository. You don't n
 
 To start developing, clone and:
 
-```
+```bash
 yarn
 yarn dev
 ```
 
 Or with npm
 
-```
+```bash
 npm i
 npm run dev
 ```
 
 (Check your node version, we recommend 18)
 
-We use a recent version of Next. You may refer to the documentation at https://nextjs.org/docs/.
+We use a recent version of Next. You may refer to the [documentation](https://nextjs.org/docs/).
 
 This repo is automatically deployed on vercel to [app.watermelontools.com](app.watermelontools.com) on merges to `main`.
 
 All the backend lives as serverless functions under `api`, with the route being the filename.
 
-We now use the new app router for some features.
+We now use the new app router for _all_ features.
 
-As we now use OAuth2.0, local development cannot be done on new integrations.
+As we use OAuth2.0, local development cannot be done on new integrations.
 
 All environment vars are on vercel, the committer is responsible for correct deployments.
 
@@ -52,7 +52,7 @@ We have a `utils` folder that includes all the business logic. We have an `api`
 
 The developer has to match the `utils` folder structure to the `api` route schema. This makes it easier to maintain.
 
-> As an example, we have `utils/user/getProfile.ts` that is imported in `pages/api/user/getProfile.ts` and returns a `types/UserProfile.ts`. In the database, you will find a _user_ table with all the data on the type.
+> As an example, we have `utils/user/getProfile.ts` that is imported in `app/api/user/getProfile.ts` and returns a `types/UserProfile.ts`. In the database, you will find a _user_ table with all the data on the type.
 
 We do all of this as a security measure. We don't want data exposed and we consider our backend safe.
 
@@ -64,6 +64,160 @@ First, we use oauth so you need to ensure that the service supports it.
 
 Remember that there are several procedures in our db to replicate.
 
+The steps to do so are:
+
+- Publicly announce the new integration
+  > serviceName refers to the shortname, like `github` or `gitlab`, lowercase
+  > ServiceReadableName refers to the name of the service and it's use in the UI, like `GitHubPRs` or `LinearTasks`
+- Set the necesary vercel env vars
+  > usually `SERVICE_CLIENT_SECRET` and `SERVICE_CLIENT_ID`
+- Create the table in our DB
+
+  > **This is sketch of a possible new table**
+  >
+  > _Add any other required columns as needed_
+
+```sql
+  CREATE TABLE serviceName (
+    id INT PRIMARY KEY,
+    name VARCHAR(255),
+    email VARCHAR(255),
+    updated_at DATETIME DEFAULT GETDATE() NOT NULL,
+    created_at DATETIME DEFAULT GETDATE() NOT NULL,
+    access_token VARCHAR(255),
+    refresh_token VARCHAR(255),
+    avatar_url VARCHAR(255),
+    workspace VARCHAR(255),
+    workspace_image VARCHAR(255),
+    watermelon_user VARCHAR(255),
+    deleted BIT DEFAULT 0 NULL,
+    deleted_at DATETIME DEFAULT GETDATE() NULL,
+    FOREIGN KEY (watermelon_user) REFERENCES watermelon.dbo.users(id)
+    );
+```
+
+- Edit the userSettings table
+
+  ```sql
+  ALTER TABLE userSettings ADD ServiceReadableName INT DEFAULT 3;`
+  ```
+
+  ```sql
+  UPDATE userSettings SET ServiceReadableName = 3 WHERE ServiceReadableName IS NULL;
+  ```
+
+- Create the necessary procedures
+- Setting the information for the user using `create_serviceName`
+
+  ```sql
+  CREATE PROCEDURE dbo.create_serviceName
+      @access_token varchar(255),
+      @id varchar(255),
+      @name varchar(255),
+      @displayName varchar(255),
+      @email varchar(255),
+      @avatarUrl varchar(255),
+      @team_id varchar(255),
+      @team_name varchar(255),
+      @watermelon_user varchar(255)
+  AS
+  DECLARE @insertTable TABLE (
+      access_token varchar(255),
+      id varchar(255),
+      name varchar(255),
+      displayName varchar(255),
+      email varchar(255),
+      avatarUrl varchar(255),
+      team_id varchar(255),
+      team_name varchar(255),
+      watermelon_user varchar(255)
+  )
+
+  DECLARE @wmid VARCHAR(255) = (
+  SELECT
+    id
+  FROM
+    dbo.users
+  WHERE
+    email = @watermelon_user
+  )
+
+  INSERT
+    INTO
+    dbo.serviceName
+      (
+      access_token,
+    id,
+    name,
+    displayName,
+    email,
+    avatarUrl,
+    team_id,
+    team_name,
+    watermelon_user
+      )
+  OUTPUT
+  inserted.access_token,
+    inserted.id,
+    inserted.name,
+    inserted.displayName,
+    inserted.email,
+    inserted.avatarUrl,
+    inserted.team_id,
+    inserted.team_name,
+    inserted.watermelon_user
+      INTO
+    @insertTable
+  VALUES
+      (
+      @access_token,
+      @id,
+      @name,
+      @displayName,
+      @email,
+      @avatarUrl,
+      @team_id,
+      @team_name,
+      @wmid
+      )
+
+  SELECT
+    *
+  FROM
+    @insertTable
+  FOR JSON PATH,
+  WITHOUT_ARRAY_WRAPPER
+
+  ```
+
+- Fetching the settings is unchanged as we use the same procedure for all services
+- Edit the settings getter
+- Fetching the tokens
+
+  - Edit the procedure `get_all_user_tokens` to match the service
+  - Edit the procedure `get_all_tokens_from_gh_username` to match the service
+
+- Create a `ServiceLoginLink.ts` component in the `components` folder
+- Add the service to the `loginArray.tsx` file
+- Add the service to the `loginGrid.tsx` file in the correct section
+- Add the service to `form.tsx` under _settings_
+
+- Run the `newIntegration.sh` script which will:
+
+  - Create the service folder under `(loggedIn)`
+  - Copy the `loading.tsx` from any other service
+  - Create the function under `/utils/db/service/saveUser` that you need to complete
+  - Populate the `page.tsx` file to be finished the correct service parameters
+  - Create an empty getter in `/utils/actions`
+
+- Now you need to edit the `page.tsx` file to match the service
+- Get the data in the `getService.tsx` file under actions
+- Add to the action log
+- Pass the data to the AI in `utils/actions/getOpenAISummary.ts` file
+- Return the data as Markdown in `api/actions/github/route.tsx`
+- Return one result in `api/hover/route.tsx`
+- Return the settings decided results in `api/extension/route.tsx`
+
 ## Issues
 
 If there's something you'd like to see please [open an issue](https://github.com/watermelontools/watermelon/issues/new).
diff --git a/app/(loggedIn)/atlassian/loading.tsx b/app/(loggedIn)/atlassian/loading.tsx
index 4d2a4cea..b7bed5f0 100644
--- a/app/(loggedIn)/atlassian/loading.tsx
+++ b/app/(loggedIn)/atlassian/loading.tsx
@@ -1,5 +1,5 @@
 import LoadingConnectedService from "../../../components/services/loading";
 
-export default function loadingConnetedService() {
+export default function loadingConnectedService() {
   return <LoadingConnectedService />;
 }
diff --git a/app/(loggedIn)/atlassian/page.tsx b/app/(loggedIn)/atlassian/page.tsx
index 1513eb00..39adecc3 100644
--- a/app/(loggedIn)/atlassian/page.tsx
+++ b/app/(loggedIn)/atlassian/page.tsx
@@ -23,7 +23,7 @@ export default async function ServicePage({
   // change service name
   const serviceName = isConfluence ? "Confluence" : "Jira";
   const [userData, serviceToken] = await Promise.all([
-    getAllPublicUserData({ userEmail }).catch((e) => {
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
       console.error(e);
       return null;
     }),
diff --git a/app/(loggedIn)/bitbucket/loading.tsx b/app/(loggedIn)/bitbucket/loading.tsx
index 4d2a4cea..b7bed5f0 100644
--- a/app/(loggedIn)/bitbucket/loading.tsx
+++ b/app/(loggedIn)/bitbucket/loading.tsx
@@ -1,5 +1,5 @@
 import LoadingConnectedService from "../../../components/services/loading";
 
-export default function loadingConnetedService() {
+export default function loadingConnectedService() {
   return <LoadingConnectedService />;
 }
diff --git a/app/(loggedIn)/bitbucket/page.tsx b/app/(loggedIn)/bitbucket/page.tsx
index 0866bbc0..6af2f51e 100644
--- a/app/(loggedIn)/bitbucket/page.tsx
+++ b/app/(loggedIn)/bitbucket/page.tsx
@@ -21,7 +21,7 @@ export default async function ServicePage({
   // change service name
   const serviceName = "Bitbucket";
   const [userData, serviceToken] = await Promise.all([
-    getAllPublicUserData({ userEmail }).catch((e) => {
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
       console.error(e);
       return null;
     }),
diff --git a/app/(loggedIn)/github/loading.tsx b/app/(loggedIn)/github/loading.tsx
index 4d2a4cea..b7bed5f0 100644
--- a/app/(loggedIn)/github/loading.tsx
+++ b/app/(loggedIn)/github/loading.tsx
@@ -1,5 +1,5 @@
 import LoadingConnectedService from "../../../components/services/loading";
 
-export default function loadingConnetedService() {
+export default function loadingConnectedService() {
   return <LoadingConnectedService />;
 }
diff --git a/app/(loggedIn)/github/page.tsx b/app/(loggedIn)/github/page.tsx
index 35627cc7..303a4dbb 100644
--- a/app/(loggedIn)/github/page.tsx
+++ b/app/(loggedIn)/github/page.tsx
@@ -21,7 +21,7 @@ export default async function ServicePage({
   // change service name
   const serviceName = "GitHub";
   const [userData, serviceToken] = await Promise.all([
-    getAllPublicUserData({ userEmail }).catch((e) => {
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
       console.error(e);
       return null;
     }),
diff --git a/app/(loggedIn)/gitlab/loading.tsx b/app/(loggedIn)/gitlab/loading.tsx
index 4d2a4cea..b7bed5f0 100644
--- a/app/(loggedIn)/gitlab/loading.tsx
+++ b/app/(loggedIn)/gitlab/loading.tsx
@@ -1,5 +1,5 @@
 import LoadingConnectedService from "../../../components/services/loading";
 
-export default function loadingConnetedService() {
+export default function loadingConnectedService() {
   return <LoadingConnectedService />;
 }
diff --git a/app/(loggedIn)/gitlab/page.tsx b/app/(loggedIn)/gitlab/page.tsx
index 85ce546b..9a5d4239 100644
--- a/app/(loggedIn)/gitlab/page.tsx
+++ b/app/(loggedIn)/gitlab/page.tsx
@@ -21,7 +21,7 @@ export default async function ServicePage({
   // change service name
   const serviceName = "GitLab";
   const [userData, serviceToken] = await Promise.all([
-    getAllPublicUserData({ userEmail }).catch((e) => {
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
       console.error(e);
       return null;
     }),
diff --git a/app/(loggedIn)/jira/loading.tsx b/app/(loggedIn)/jira/loading.tsx
index 4d2a4cea..b7bed5f0 100644
--- a/app/(loggedIn)/jira/loading.tsx
+++ b/app/(loggedIn)/jira/loading.tsx
@@ -1,5 +1,5 @@
 import LoadingConnectedService from "../../../components/services/loading";
 
-export default function loadingConnetedService() {
+export default function loadingConnectedService() {
   return <LoadingConnectedService />;
 }
diff --git a/app/(loggedIn)/jira/page.tsx b/app/(loggedIn)/jira/page.tsx
index 69345262..1ccb18e9 100644
--- a/app/(loggedIn)/jira/page.tsx
+++ b/app/(loggedIn)/jira/page.tsx
@@ -21,7 +21,7 @@ export default async function ServicePage({
   // change service name
   const serviceName = "Jira";
   const [userData, serviceToken] = await Promise.all([
-    getAllPublicUserData({ userEmail }).catch((e) => {
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
       console.error(e);
       return null;
     }),
diff --git a/app/(loggedIn)/linear/loading.tsx b/app/(loggedIn)/linear/loading.tsx
index 4d2a4cea..b7bed5f0 100644
--- a/app/(loggedIn)/linear/loading.tsx
+++ b/app/(loggedIn)/linear/loading.tsx
@@ -1,5 +1,5 @@
 import LoadingConnectedService from "../../../components/services/loading";
 
-export default function loadingConnetedService() {
+export default function loadingConnectedService() {
   return <LoadingConnectedService />;
 }
diff --git a/app/(loggedIn)/linear/page.tsx b/app/(loggedIn)/linear/page.tsx
index 5ac5d73f..d2f56efd 100644
--- a/app/(loggedIn)/linear/page.tsx
+++ b/app/(loggedIn)/linear/page.tsx
@@ -21,7 +21,7 @@ export default async function ServicePage({
   // change service name
   const serviceName = "Linear";
   const [userData, serviceToken] = await Promise.all([
-    getAllPublicUserData({ userEmail }).catch((e) => {
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
       console.error(e);
       return null;
     }),
diff --git a/app/(loggedIn)/notion/loading.tsx b/app/(loggedIn)/notion/loading.tsx
index 4d2a4cea..b7bed5f0 100644
--- a/app/(loggedIn)/notion/loading.tsx
+++ b/app/(loggedIn)/notion/loading.tsx
@@ -1,5 +1,5 @@
 import LoadingConnectedService from "../../../components/services/loading";
 
-export default function loadingConnetedService() {
+export default function loadingConnectedService() {
   return <LoadingConnectedService />;
 }
diff --git a/app/(loggedIn)/notion/page.tsx b/app/(loggedIn)/notion/page.tsx
index d86b9adb..a647a3e5 100644
--- a/app/(loggedIn)/notion/page.tsx
+++ b/app/(loggedIn)/notion/page.tsx
@@ -21,7 +21,7 @@ export default async function ServicePage({
   // change service name
   const serviceName = "Notion";
   const [userData, serviceToken] = await Promise.all([
-    getAllPublicUserData({ userEmail }).catch((e) => {
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
       console.error(e);
       return null;
     }),
diff --git a/app/(loggedIn)/page.tsx b/app/(loggedIn)/page.tsx
index b9745942..becd20df 100644
--- a/app/(loggedIn)/page.tsx
+++ b/app/(loggedIn)/page.tsx
@@ -13,10 +13,11 @@ async function HomePage({}) {
   const userEmail = session?.user?.email;
   const userName = session?.user?.name;
   // if not logged in, do not show anything
-  const data = await getAllPublicUserData({ userEmail }).catch((e) => {
+  const data = await getAllPublicUserData({ email: userEmail }).catch((e) => {
     console.error(e);
     return null;
   });
+  console.log(data);
   const comingSoon = [
     "PHPStorm",
     "IntelliJ",
diff --git a/app/(loggedIn)/settings/form.tsx b/app/(loggedIn)/settings/form.tsx
index 873df43a..d4c61d69 100644
--- a/app/(loggedIn)/settings/form.tsx
+++ b/app/(loggedIn)/settings/form.tsx
@@ -10,15 +10,41 @@ export default function form({ userEmail }) {
     let settings = await getUserSettings(userEmail);
     setFormState(settings);
   };
-  const [formState, setFormState] = useState({
-    JiraTickets: 3,
-    SlackMessages: 3,
-    GitHubPRs: 3,
-    NotionPages: 3,
-    LinearTickets: 3,
-    ConfluenceDocs: 3,
+  const services = [
+    {
+      valueLabel: "JiraTickets",
+      label: "Jira Tickets",
+    },
+    {
+      valueLabel: "SlackMessages",
+      label: "Slack Messages",
+    },
+    {
+      valueLabel: "GitHubPRs",
+      label: "GitHub PRs",
+    },
+    {
+      valueLabel: "NotionPages",
+      label: "Notion Pages",
+    },
+    {
+      valueLabel: "LinearTickets",
+      label: "Linear Tickets",
+    },
+    {
+      valueLabel: "ConfluenceDocs",
+      label: "Confluence Docs",
+    },
+    {
+      valueLabel: "AsanaTasks",
+      label: "Asana Tasks",
+    },
+  ];
+  let defaultState = {
     AISummary: 1,
-  });
+  };
+  services.map((service) => (defaultState[service.valueLabel] = 3));
+  const [formState, setFormState] = useState(defaultState);
   const handleSubmit = async () => {
     setSaveDisabled(true);
     try {
@@ -66,13 +92,13 @@ export default function form({ userEmail }) {
   }
   return (
     <form>
-      <SettingsSelector label="Jira Tickets" valueLabel={"JiraTickets"} />
-      <SettingsSelector label="Slack Messages" valueLabel={"SlackMessages"} />
-      <SettingsSelector label="GitHub PRs" valueLabel={"GitHubPRs"} />
-      <SettingsSelector label="Notion Pages" valueLabel={"NotionPages"} />
-      <SettingsSelector label="Linear Tickets" valueLabel={"LinearTickets"} />
-      <SettingsSelector label="Confluence Docs" valueLabel={"ConfluenceDocs"} />
-
+      {services.map((service) => (
+        <SettingsSelector
+          key={service.valueLabel}
+          valueLabel={service.valueLabel}
+          label={service.label}
+        />
+      ))}
       <div className="">
         <span>AI Summary: </span>
         <select
diff --git a/app/(loggedIn)/slack/loading.tsx b/app/(loggedIn)/slack/loading.tsx
index 4d2a4cea..b7bed5f0 100644
--- a/app/(loggedIn)/slack/loading.tsx
+++ b/app/(loggedIn)/slack/loading.tsx
@@ -1,5 +1,5 @@
 import LoadingConnectedService from "../../../components/services/loading";
 
-export default function loadingConnetedService() {
+export default function loadingConnectedService() {
   return <LoadingConnectedService />;
 }
diff --git a/app/(loggedIn)/slack/page.tsx b/app/(loggedIn)/slack/page.tsx
index cc800014..e892b0fe 100644
--- a/app/(loggedIn)/slack/page.tsx
+++ b/app/(loggedIn)/slack/page.tsx
@@ -21,7 +21,7 @@ export default async function ServicePage({
   // change service name
   const serviceName = "Slack";
   const [userData, serviceToken] = await Promise.all([
-    getAllPublicUserData({ userEmail }).catch((e) => {
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
       console.error(e);
       return null;
     }),
diff --git a/app/(loggedIn)/vscode-insiders/page.tsx b/app/(loggedIn)/vscode-insiders/page.tsx
index d3d7bf19..3e179324 100644
--- a/app/(loggedIn)/vscode-insiders/page.tsx
+++ b/app/(loggedIn)/vscode-insiders/page.tsx
@@ -13,7 +13,7 @@ async function VSCodeInsiders() {
   const session = await getServerSession(authOptions);
   const userEmail = session?.user?.email;
   const userName = session?.user?.name;
-  const data = await getAllPublicUserData({ userEmail });
+  const data = await getAllPublicUserData({ email: userEmail });
 
   let system = "vscode-insiders";
   let url: string = `${system}://watermelontools.watermelon-tools?email=${
diff --git a/app/(loggedIn)/vscode/page.tsx b/app/(loggedIn)/vscode/page.tsx
index 73d82d60..fe2ae76a 100644
--- a/app/(loggedIn)/vscode/page.tsx
+++ b/app/(loggedIn)/vscode/page.tsx
@@ -14,7 +14,7 @@ async function VSCode() {
   const session = await getServerSession(authOptions);
   const userEmail = session?.user?.email;
   const userName = session?.user?.name;
-  const data = await getAllPublicUserData({ userEmail });
+  const data = await getAllPublicUserData({ email: userEmail });
   let system = "vscode";
   let url: string = `${system}://watermelontools.watermelon-tools?email=${
     userEmail ?? ""
diff --git a/app/(loggedIn)/vscodium/page.tsx b/app/(loggedIn)/vscodium/page.tsx
index 2da0cccf..880ff212 100644
--- a/app/(loggedIn)/vscodium/page.tsx
+++ b/app/(loggedIn)/vscodium/page.tsx
@@ -13,7 +13,7 @@ async function VSCodium({}) {
   const session = await getServerSession(authOptions);
   const userEmail = session?.user?.email;
   const userName = session?.user?.name;
-  const data = await getAllPublicUserData({ userEmail });
+  const data = await getAllPublicUserData({ email: userEmail });
 
   let system = "vscodium";
   let url: string = `${system}://watermelontools.watermelon-tools?email=${
diff --git a/app/api/stripe/createSubscription/route.ts b/app/api/stripe/createSubscription/route.ts
index d1c8d49d..964957c7 100644
--- a/app/api/stripe/createSubscription/route.ts
+++ b/app/api/stripe/createSubscription/route.ts
@@ -2,7 +2,8 @@ import { NextResponse } from "next/server";
 import Stripe from "stripe";
 import { missingParamsResponse } from "../../../../utils/api/responses";
 import validateParams from "../../../../utils/api/validateParams";
-import posthog from "../../../../utils/posthog/posthog";
+import { missingParamsPosthogTracking } from "../../../../utils/api/posthogTracking";
+
 
 const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY!, {
   apiVersion: "2022-08-01",
diff --git a/components/AsanaLoginLink.tsx b/components/AsanaLoginLink.tsx
new file mode 100644
index 00000000..89df59ad
--- /dev/null
+++ b/components/AsanaLoginLink.tsx
@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+const AsanaLoginLink = ({ userEmail }) => (
+  <div className="Box">
+    <Link
+      href={`https://app.asana.com/-/oauth_authorize?client_id=${process.env.ASANA_CLIENT_ID}&redirect_uri=https%3A%2F%2Fapp.watermelontools.com%2Fasana&response_type=code&state=${userEmail}`}
+      className="button block"
+    >
+      <div className="Box d-flex flex-items-center flex-justify-start p-2">
+        <img className="avatar avatar-8" src="/logos/asana.svg" />
+        <div className="p-2">
+          <h2>Login to Asana</h2>
+          <p>View your Tasks and Stories</p>
+        </div>
+      </div>
+    </Link>
+  </div>
+);
+export default AsanaLoginLink;
diff --git a/components/loginGrid.tsx b/components/loginGrid.tsx
index 784516c7..6d8da04a 100644
--- a/components/loginGrid.tsx
+++ b/components/loginGrid.tsx
@@ -7,44 +7,82 @@ import BitbucketLoginLink from "../components/BitbucketLoginLink";
 import LinearLoginLink from "../components/LinearLoginLink";
 import NotionLoginLink from "./NotionLoginLink";
 import ConfluenceLoginLink from "./ConfluenceLoginLink";
-type LoginGridProps = {
-  userEmail: string;
-  user_displayname: string;
-};
+import AsanaLoginLink from "./AsanaLoginLink";
+
 function LoginGrid({ userEmail, data }) {
-  let githubUserData: null | LoginGridProps = null;
-  let bitbucketUserData: null | LoginGridProps = null;
-  let gitlabUserData: null | LoginGridProps = null;
-  let slackUserData: null | LoginGridProps = null;
-  let jiraUserData: null | LoginGridProps = null;
-  let confluenceUserData: null | LoginGridProps = null;
-  let notionUserData: null | LoginGridProps = null;
-  let linearUserData: null | LoginGridProps = null;
-  if (data?.github_data) {
-    githubUserData = JSON.parse(data.github_data);
-  }
-  if (data?.bitbucket_data) {
-    bitbucketUserData = JSON.parse(data.bitbucket_data);
-  }
-  if (data?.gitlab_data) {
-    gitlabUserData = JSON.parse(data.gitlab_data);
-  }
-  if (data?.slack_data) {
-    slackUserData = JSON.parse(data.slack_data);
-  }
-  if (data?.jira_data) {
-    jiraUserData = JSON.parse(data.jira_data);
-  }
-  if (data?.confluence_data) {
-    confluenceUserData = JSON.parse(data.confluence_data);
-  }
-  if (data?.notion_data) {
-    notionUserData = JSON.parse(data.notion_data);
-  }
-  if (data?.linear_data) {
-    linearUserData = JSON.parse(data.linear_data);
-  }
+  const services = [
+    {
+      name: "GitHub",
+      dataProp: "github_data",
+      loginComponent: <GitHubLoginLink userEmail={userEmail} />,
+      type: "git_platforms",
+    },
+    {
+      name: "Bitbucket",
+      dataProp: "bitbucket_data",
+      loginComponent: <BitbucketLoginLink userEmail={userEmail} />,
+      type: "git_platforms",
+    },
+    {
+      name: "GitLab",
+      dataProp: "gitlab_data",
+      loginComponent: <GitLabLoginLink userEmail={userEmail} />,
+      type: "git_platforms",
+    },
+
+    {
+      name: "Jira",
+      dataProp: "jira_data",
+      loginComponent: <JiraLoginLink userEmail={userEmail} />,
+      type: "project_management",
+    },
+    {
+      name: "Linear",
+      dataProp: "linear_data",
+      loginComponent: <LinearLoginLink userEmail={userEmail} />,
+      type: "project_management",
+    },
+
+    {
+      name: "Asana",
+      dataProp: "asana_data",
+      loginComponent: <AsanaLoginLink userEmail={userEmail} />,
+      type: "project_management",
+    },
 
+    {
+      name: "Slack",
+      dataProp: "slack_data",
+      loginComponent: <SlackLoginLink userEmail={userEmail} />,
+      type: "internal_messaging",
+    },
+
+    {
+      name: "Confluence",
+      dataProp: "confluence_data",
+      loginComponent: <ConfluenceLoginLink userEmail={userEmail} />,
+      type: "documentation",
+    },
+    {
+      name: "Notion",
+      dataProp: "notion_data",
+      loginComponent: <NotionLoginLink userEmail={userEmail} />,
+      type: "documentation",
+    },
+  ];
+  const typeToName = {
+    git_platforms: "Git Platforms",
+    project_management: "Project Management",
+    internal_messaging: "Internal Messaging",
+    documentation: "Documentation",
+  };
+  const groupedServices = services.reduce((acc, service) => {
+    if (!acc[service.type]) {
+      acc[service.type] = [];
+    }
+    acc[service.type].push(service);
+    return acc;
+  }, {});
   return (
     <div
       style={{
@@ -55,194 +93,43 @@ function LoginGrid({ userEmail, data }) {
     >
       {userEmail && (
         <div>
-          <div>
-            <div
-              className="Subhead p-3"
-              style={{
-                position: "sticky",
-                top: 0,
-                zIndex: 2,
-                backgroundColor: "var(--color-canvas-default)",
-              }}
-            >
-              <h2 className="Subhead-heading">Git Platforms</h2>
-            </div>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
-              }}
-            >
-              <div className="p-3">
-                {githubUserData?.user_displayname ? (
-                  <InfoPanel
-                    info={{
-                      ...githubUserData,
-                      service_name: "GitHub",
-                    }}
-                  />
-                ) : (
-                  <GitHubLoginLink userEmail={userEmail} />
-                )}
-              </div>
-              <div className="p-3">
-                {bitbucketUserData?.user_displayname ? (
-                  <InfoPanel
-                    info={{
-                      ...bitbucketUserData,
-                      service_name: "Bitbucket",
-                    }}
-                  />
-                ) : (
-                  <BitbucketLoginLink userEmail={userEmail} />
-                )}
-              </div>
-              <div className="p-3">
-                {gitlabUserData?.user_displayname ? (
-                  <InfoPanel
-                    info={{
-                      ...gitlabUserData,
-                      service_name: "GitLab",
-                    }}
-                  />
-                ) : (
-                  <GitLabLoginLink userEmail={userEmail} />
-                )}
-              </div>
-            </div>
-            <a
-              href="https://github.com/apps/watermelon-context"
-              target="_blank"
-            >
-              <div className="Box d-flex flex-items-center flex-justify-start m-3 p-2">
-                <img className="avatar avatar-8" src="/logos/github.svg" />
-                <div className="p-2">
-                  <h2>Try our GitHub App</h2>
-                  <p>Context on each Pr</p>
-                </div>
-              </div>
-            </a>
-          </div>
-          <div>
-            <div
-              className="Subhead p-3"
-              style={{
-                position: "sticky",
-                top: 0,
-                zIndex: 2,
-                backgroundColor: "var(--color-canvas-default)",
-              }}
-            >
-              <h2 className="Subhead-heading">Internal Messaging</h2>
-            </div>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(350px, 50%))",
-              }}
-            >
-              <div className="p-3">
-                {slackUserData?.user_displayname ? (
-                  <InfoPanel
-                    info={{
-                      ...slackUserData,
-                      service_name: "Slack",
-                    }}
-                  />
-                ) : (
-                  <SlackLoginLink userEmail={userEmail} />
-                )}
-              </div>
-            </div>
-          </div>
-          <div>
-            <div
-              className="Subhead p-3"
-              style={{
-                position: "sticky",
-                top: 0,
-                zIndex: 2,
-                backgroundColor: "var(--color-canvas-default)",
-              }}
-            >
-              <h2 className="Subhead-heading">Project Management</h2>
-            </div>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(350px, 50%))",
-              }}
-            >
-              <div className="p-3">
-                {jiraUserData?.user_displayname ? (
-                  <InfoPanel
-                    info={{
-                      ...jiraUserData,
-                      service_name: "Jira",
-                    }}
-                  />
-                ) : (
-                  <JiraLoginLink userEmail={userEmail} />
-                )}
-              </div>
-              <div className="p-3">
-                {linearUserData?.user_displayname ? (
-                  <InfoPanel
-                    info={{
-                      ...linearUserData,
-                      service_name: "Linear",
-                    }}
-                  />
-                ) : (
-                  <LinearLoginLink userEmail={userEmail} />
-                )}
-              </div>
-            </div>
-          </div>
-          <div>
-            <div
-              className="Subhead p-3"
-              style={{
-                position: "sticky",
-                top: 0,
-                zIndex: 2,
-                backgroundColor: "var(--color-canvas-default)",
-              }}
-            >
-              <h2 className="Subhead-heading">Documentation</h2>
-            </div>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(350px, 50%))",
-              }}
-            >
-              <div className="p-3">
-                {notionUserData?.user_displayname ? (
-                  <InfoPanel
-                    info={{
-                      ...notionUserData,
-                      service_name: "Notion",
-                    }}
-                  />
-                ) : (
-                  <NotionLoginLink userEmail={userEmail} />
-                )}
+          {Object.keys(groupedServices).map((type) => (
+            <div key={type}>
+              <div
+                className="Subhead p-3"
+                style={{
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 2,
+                  backgroundColor: "var(--color-canvas-default)",
+                }}
+              >
+                <h2 className="Subhead-heading">{typeToName[type]}</h2>
+
               </div>
-              <div className="p-3">
-                {confluenceUserData?.user_displayname ? (
-                  <InfoPanel
-                    info={{
-                      ...confluenceUserData,
-                      service_name: "Confluence",
-                    }}
-                  />
-                ) : (
-                  <ConfluenceLoginLink userEmail={userEmail} />
-                )}
+              <div
+                style={{
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
+                }}
+              >
+                {groupedServices[type].map((service) => (
+                  <div key={service.name} className="p-3">
+                    {data?.[service.dataProp] ? (
+                      <InfoPanel
+                        info={{
+                          ...JSON.parse(data[service.dataProp]),
+                          service_name: service.name,
+                        }}
+                      />
+                    ) : (
+                      service.loginComponent
+                    )}
+                  </div>
+                ))}
               </div>
             </div>
-          </div>
+          ))}
         </div>
       )}
     </div>
diff --git a/components/services/loginArray.tsx b/components/services/loginArray.tsx
index 42557ae2..3ab9a7ce 100644
--- a/components/services/loginArray.tsx
+++ b/components/services/loginArray.tsx
@@ -6,6 +6,7 @@ import GitHubLoginLink from "../GitHubLoginLink";
 import LinearLoginLink from "../LinearLoginLink";
 import BitbucketLoginLink from "../BitbucketLoginLink";
 import GitLabLoginLink from "../GitLabLoginLink";
+import AsanaLoginLink from "../AsanaLoginLink";
 export default function LoginArray({ nameList, userEmail, userData }) {
   const services = [
     {
@@ -48,6 +49,11 @@ export default function LoginArray({ nameList, userEmail, userData }) {
       dataProp: "gitlab_data",
       loginComponent: <GitLabLoginLink userEmail={userEmail} />,
     },
+    {
+      name: "Asana",
+      dataProp: "asana_data",
+      loginComponent: <AsanaLoginLink userEmail={userEmail} />,
+    },
   ];
   const loginArray = services
     .filter((service) => nameList.includes(service.name))
diff --git a/newIntegration.sh b/newIntegration.sh
new file mode 100755
index 00000000..5e0a038a
--- /dev/null
+++ b/newIntegration.sh
@@ -0,0 +1,139 @@
+#!/bin/bash
+
+# Receive a "serviceName" parameter
+serviceName=$1
+
+# Create a folder with the serviceName under /app/(loggedIn)
+mkdir -p ./app/\(loggedIn\)/${serviceName}
+
+# Create a file "/app/(loggedIn)/${serviceName}/loading.tsx"
+cat > ./app/\(loggedIn\)/${serviceName}/loading.tsx <<EOL
+import LoadingConnectedService from "../../../components/services/loading";
+
+export default function loadingConnectedService() {
+  return <LoadingConnectedService />;
+}
+EOL
+
+# Create a folder with the serviceName under /utils/db
+mkdir -p ./utils/db/${serviceName}
+
+# Create a file "saveUser.ts" in that folder
+cat > ./utils/db/${serviceName}/saveUser.ts <<EOL
+import executeRequest from "../azuredb";
+
+export default async ({
+  access_token,
+  id,
+  avatar_url,
+  watermelon_user,
+  refresh_token,
+  workspace,
+  name
+}) => {
+  let query = \`EXEC dbo.create_${serviceName} @watermelon_user='\${watermelon_user}', @id='\${id}',
+ @avatar_url='\${avatar_url}', @name='\${name}', @access_token='\${access_token}', @refresh_token='\${refresh_token}',@workspace='\${workspace}';
+ \`;
+  let resp = await executeRequest(query);
+  return resp;
+};
+EOL
+
+# Create a file "/app/(loggedIn)/${serviceName}/page.tsx"
+cat > ./app/\(loggedIn\)/${serviceName}/page.tsx <<EOL
+import { getServerSession } from "next-auth";
+//change this to import correctly
+import saveUserInfo from "../../../utils/db/${serviceName}/saveUser";
+
+import { authOptions } from "../../api/auth/[...nextauth]/route";
+import getAllPublicUserData from "../../../utils/api/getAllUserPublicData";
+
+import ConnectedService from "../../../components/services/page";
+import LoginArray from "../../../components/services/loginArray";
+
+export default async function ServicePage({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const session = await getServerSession(authOptions);
+  const userEmail = session?.user?.email;
+  const userName = session?.user?.name;
+  const { code, state } = searchParams;
+  let error = "";
+  // change service name
+  const serviceName = "${serviceName}";
+  const [userData, serviceToken] = await Promise.all([
+    getAllPublicUserData({ email: userEmail }).catch((e) => {
+      console.error(e);
+      return null;
+    }),
+    // change this fetch
+    fetch(\`SERVICE_OAUTH_URL\`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        grant_type: "authorization_code",
+        code: code,
+        redirect_uri: "https://app.watermelontools.com/${serviceName}",
+        client_id: process.env.SERVICE_APP_ID,
+        client_secret: process.env.SERVICE_CLIENT_SECRET,
+      }),
+    }),
+  ]);
+
+  // the recommended services should not be of the same category as the current one
+  const nameList = [];
+  const loginArray = LoginArray({ nameList, userEmail, userData });
+
+  const json = await serviceToken.json();
+  if (json.error) {
+    error = json.error;
+  } else {
+    // get user correctly
+    let user = await fetch(\`YOUR_USER_API_LINK\`, {
+      headers: {
+        Authorization: \`Bearer \${json.access_token}\`,
+      },
+    });
+    let userJson = await user.json();
+    // save user correctly
+    await saveUserInfo({
+      access_token: json.access_token,
+      refresh_token: json.refresh_token,
+      scope: json.scope,
+      username: userJson.username,
+      id: userJson.id,
+      avatar_url: userJson.avatar_url,
+      watermelon_user: state,
+      name: userJson.name,
+      organization: userJson.organization,
+      website: userJson.website,
+      email: userJson.email,
+      location: userJson.location,
+      bio: userJson.bio,
+      twitter: userJson.twitter,
+      linkedin: userJson.linkedin,
+    });
+
+    return (
+      <ConnectedService
+        serviceName={serviceName}
+        displayName={userJson.username}
+        teamName={userJson.organization}
+        avatarUrl={userJson.avatar_url}
+        loginArray={loginArray}
+        error={error}
+      />
+    );
+  }
+}
+EOL
+
+# Create a file "/utils/actions/get${serviceName}.ts"
+touch ./utils/actions/get${serviceName}.ts
+
+echo "Files and directories created successfully!"
diff --git a/next-env.d.ts b/next-env.d.ts
index fd36f949..4f11a03d 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/utils/api/getAllUserPublicData.ts b/utils/api/getAllUserPublicData.ts
index d5348785..8035a722 100644
--- a/utils/api/getAllUserPublicData.ts
+++ b/utils/api/getAllUserPublicData.ts
@@ -1,6 +1,7 @@
 import "server-only";
 import getAllPublicUserData from "../db/user/getAllPublicUserData";
-export default async function getData({ userEmail }) {
-  let dbUser = await getAllPublicUserData({ email: userEmail });
+export default async function getData({ email }) {
+  let dbUser = await getAllPublicUserData({ email });
+
   return dbUser;
 }