diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index f745c55214..1e68cbb294 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -120,7 +120,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           Please check your inbox at <span className="font-medium">{watch("email")}</span>
         </p>
       )}
-      <form className="space-y-4 mt-10">
+      <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
         <div className="space-y-1">
           <Input
             id="email"
diff --git a/apps/app/components/notifications/notification-card.tsx b/apps/app/components/notifications/notification-card.tsx
index 72cf1bed81..b28d1cce46 100644
--- a/apps/app/components/notifications/notification-card.tsx
+++ b/apps/app/components/notifications/notification-card.tsx
@@ -90,13 +90,15 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         <div className="relative w-12 h-12 rounded-full">
           {notification.triggered_by_details.avatar &&
           notification.triggered_by_details.avatar !== "" ? (
-            <Image
-              src={notification.triggered_by_details.avatar}
-              alt="profile image"
-              layout="fill"
-              objectFit="cover"
-              className="rounded-full"
-            />
+            <div className="h-12 w-12 rounded-full">
+              <Image
+                src={notification.triggered_by_details.avatar}
+                alt="Profile Image"
+                layout="fill"
+                objectFit="cover"
+                className="rounded-full"
+              />
+            </div>
           ) : (
             <div className="w-12 h-12 bg-custom-background-100 rounded-full flex justify-center items-center">
               <span className="text-custom-text-100 font-medium text-lg">
diff --git a/apps/app/components/onboarding/join-workspaces.tsx b/apps/app/components/onboarding/join-workspaces.tsx
index b49fad60d7..2441542d60 100644
--- a/apps/app/components/onboarding/join-workspaces.tsx
+++ b/apps/app/components/onboarding/join-workspaces.tsx
@@ -88,7 +88,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
     <div className="w-full space-y-7 sm:space-y-10">
       <h5 className="sm:text-lg">We see that someone has invited you to</h5>
       <h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4>
-      <div className="md:w-3/5 space-y-4">
+      <div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4">
         {invitations &&
           invitations.map((invitation) => {
             const isSelected = invitationsRespond.includes(invitation.id);
@@ -146,7 +146,11 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange }) => {
         >
           Accept & Join
         </PrimaryButton>
-        <SecondaryButton className="border border-none bg-transparent" size="md" onClick={finishOnboarding} >
+        <SecondaryButton
+          className="border border-none bg-transparent"
+          size="md"
+          onClick={finishOnboarding}
+        >
           Skip for now
         </SecondaryButton>
       </div>
diff --git a/apps/app/constants/graph.ts b/apps/app/constants/graph.ts
index d4227804b3..e176a24056 100644
--- a/apps/app/constants/graph.ts
+++ b/apps/app/constants/graph.ts
@@ -17,12 +17,12 @@ export const CHARTS_THEME: Theme = {
       background: "rgb(var(--color-background-80))",
       color: "rgb(var(--color-text-200))",
       fontSize: "0.8rem",
-      border: "1px solid rgb(var(--color-background-80))",
+      border: "1px solid rgb(var(--color-border-300))",
     },
   },
   grid: {
     line: {
-      stroke: "rgb(var(--color-background-80))",
+      stroke: "rgb(var(--color-border-100))",
     },
   },
 };
diff --git a/apps/app/pages/index.tsx b/apps/app/pages/index.tsx
index 121bd9f701..6cef211c03 100644
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@@ -145,11 +145,11 @@ const HomePage: NextPage = () => {
                   <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
                     Sign in to Plane
                   </h1>
-                  <div className="flex flex-col divide-y divide-custom-border-200 sm:w-[360px] mx-auto">
+                  <div className="flex flex-col divide-y divide-custom-border-200">
                     <div className="pb-7">
                       <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
                     </div>
-                    <div className="flex flex-col items-center justify-center gap-4 pt-7 overflow-hidden">
+                    <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
                       <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
                       <GithubLoginButton handleSignIn={handleGitHubSignIn} />
                     </div>
diff --git a/apps/app/pages/invitations.tsx b/apps/app/pages/invitations.tsx
index e93fabd17e..40a687ff68 100644
--- a/apps/app/pages/invitations.tsx
+++ b/apps/app/pages/invitations.tsx
@@ -105,91 +105,93 @@ const OnBoard: NextPage = () => {
               {user?.email}
             </div>
           </div>
-          {invitations && invitations.length > 0 ? (
-            <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
-              <div className="w-full space-y-10">
-                <h5 className="text-lg">We see that someone has invited you to</h5>
-                <h4 className="text-2xl font-semibold">Join a workspace</h4>
-                <div className="md:w-3/5 space-y-4">
-                  {invitations.map((invitation) => {
-                    const isSelected = invitationsRespond.includes(invitation.id);
+          {invitations ? (
+            invitations.length > 0 ? (
+              <div className="relative flex justify-center sm:justify-start sm:items-center h-full px-8 pb-8 sm:p-0 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5">
+                <div className="w-full space-y-10">
+                  <h5 className="text-lg">We see that someone has invited you to</h5>
+                  <h4 className="text-2xl font-semibold">Join a workspace</h4>
+                  <div className="max-h-[37vh] md:w-3/5 space-y-4 overflow-y-auto">
+                    {invitations.map((invitation) => {
+                      const isSelected = invitationsRespond.includes(invitation.id);
 
-                    return (
-                      <div
-                        key={invitation.id}
-                        className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
-                          isSelected
-                            ? "border-custom-primary-100"
-                            : "border-custom-border-200 hover:bg-custom-background-80"
-                        }`}
-                        onClick={() =>
-                          handleInvitation(invitation, isSelected ? "withdraw" : "accepted")
-                        }
-                      >
-                        <div className="flex-shrink-0">
-                          <div className="grid place-items-center h-9 w-9 rounded">
-                            {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
-                              <img
-                                src={invitation.workspace.logo}
-                                height="100%"
-                                width="100%"
-                                className="rounded"
-                                alt={invitation.workspace.name}
-                              />
-                            ) : (
-                              <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
-                                {invitation.workspace.name[0]}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <div className="text-sm font-medium">
-                            {truncateText(invitation.workspace.name, 30)}
-                          </div>
-                          <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
-                        </div>
-                        <span
-                          className={`flex-shrink-0 ${
-                            isSelected ? "text-custom-primary-100" : "text-custom-text-200"
+                      return (
+                        <div
+                          key={invitation.id}
+                          className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
+                            isSelected
+                              ? "border-custom-primary-100"
+                              : "border-custom-border-200 hover:bg-custom-background-80"
                           }`}
+                          onClick={() =>
+                            handleInvitation(invitation, isSelected ? "withdraw" : "accepted")
+                          }
                         >
-                          <CheckCircleIcon className="h-5 w-5" />
-                        </span>
-                      </div>
-                    );
-                  })}
-                </div>
-                <div className="flex items-center gap-3">
-                  <PrimaryButton
-                    type="submit"
-                    size="md"
-                    onClick={submitInvitations}
-                    disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
-                  >
-                    Accept & Join
-                  </PrimaryButton>
-                  <Link href="/">
-                    <a>
-                      <SecondaryButton size="md" outline>
-                        Go Home
-                      </SecondaryButton>
-                    </a>
-                  </Link>
+                          <div className="flex-shrink-0">
+                            <div className="grid place-items-center h-9 w-9 rounded">
+                              {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
+                                <img
+                                  src={invitation.workspace.logo}
+                                  height="100%"
+                                  width="100%"
+                                  className="rounded"
+                                  alt={invitation.workspace.name}
+                                />
+                              ) : (
+                                <span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
+                                  {invitation.workspace.name[0]}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <div className="text-sm font-medium">
+                              {truncateText(invitation.workspace.name, 30)}
+                            </div>
+                            <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                          </div>
+                          <span
+                            className={`flex-shrink-0 ${
+                              isSelected ? "text-custom-primary-100" : "text-custom-text-200"
+                            }`}
+                          >
+                            <CheckCircleIcon className="h-5 w-5" />
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <PrimaryButton
+                      type="submit"
+                      size="md"
+                      onClick={submitInvitations}
+                      disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
+                    >
+                      Accept & Join
+                    </PrimaryButton>
+                    <Link href="/">
+                      <a>
+                        <SecondaryButton size="md" outline>
+                          Go Home
+                        </SecondaryButton>
+                      </a>
+                    </Link>
+                  </div>
                 </div>
               </div>
-            </div>
-          ) : (
-            <div className="fixed top-0 left-0 h-full w-full grid place-items-center">
-              <EmptyState
-                title="No pending invites"
-                description="You can see here if someone invites you to a workspace."
-                image={emptyInvitation}
-                buttonText="Back to Dashboard"
-                onClick={() => router.push("/")}
-              />
-            </div>
-          )}
+            ) : (
+              <div className="fixed top-0 left-0 h-full w-full grid place-items-center">
+                <EmptyState
+                  title="No pending invites"
+                  description="You can see here if someone invites you to a workspace."
+                  image={emptyInvitation}
+                  buttonText="Back to Dashboard"
+                  onClick={() => router.push("/")}
+                />
+              </div>
+            )
+          ) : null}
         </div>
       </DefaultLayout>
     </UserAuthorizationLayout>