diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 0000000000..027cfc2798
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,43 @@
+tasks:
+  - init: |
+      yarn &&
+      cp .env.example .env &&
+      next_auth_secret=$(openssl rand -base64 32) &&
+      calendso_encryption_key=$(openssl rand -base64 24) &&
+      sed -i -e "s|^NEXTAUTH_SECRET=.*|NEXTAUTH_SECRET=$next_auth_secret|" \
+             -e "s|^CALENDSO_ENCRYPTION_KEY=.*|CALENDSO_ENCRYPTION_KEY=$calendso_encryption_key|" .env
+    command: yarn dx
+
+ports:
+  - port: 3000
+    visibility: public
+    onOpen: open-preview
+  - port: 5420
+    visibility: private
+    onOpen: ignore
+  - port: 1025
+    visibility: private
+    onOpen: ignore
+  - port: 8025
+    visibility: private
+    onOpen: ignore
+
+github:
+  prebuilds:
+    master: true
+    pullRequests: true
+    pullRequestsFromForks: true
+    addCheck: true
+    addComment: true
+    addBadge: true
+
+vscode:
+  extensions:
+    - DavidAnson.vscode-markdownlint
+    - yzhang.markdown-all-in-one
+    - esbenp.prettier-vscode
+    - dbaeumer.vscode-eslint
+    - bradlc.vscode-tailwindcss
+    - ban.spellright
+    - stripe.vscode-stripe
+    - Prisma.prisma
\ No newline at end of file
diff --git a/README.md b/README.md
index f20957d3dd..d7fc9c6244 100644
--- a/README.md
+++ b/README.md
@@ -158,6 +158,15 @@ yarn dx
 ```sh
 echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 ```
+#### Gitpod Setup
+
+1. Click the button below to open this project in Gitpod.
+
+2. This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/calcom/cal.com)
+
+
 
 #### Manual setup
 
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index 888593f559..5cbf3fe8ef 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -31,7 +31,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
             {!isBioEmpty ? (
               <>
                 <div
-                  className=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
                 />
               </>
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 574963a5c3..8d0b41a7d6 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -144,7 +144,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
               {!isBioEmpty && (
                 <>
                   <div
-                    className="  text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                     dangerouslySetInnerHTML={{ __html: props.safeBio }}
                   />
                 </>
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 9f7532ded7..08bc04ca58 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -117,7 +117,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio }: TeamPageProps) {
           {!isBioEmpty && (
             <>
               <div
-                className=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                 dangerouslySetInnerHTML={{ __html: team.safeBio }}
               />
             </>
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 2314fe1001..e9cdeecee7 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -264,7 +264,7 @@ const ProfileView = () => {
                   <>
                     <Label className="text-emphasis mt-5">{t("about")}</Label>
                     <div
-                      className=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                      className="  text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600 break-words"
                       dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
                     />
                   </>