diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d98926..5c72ea3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,41 @@
 
 > All notable changes to this project will be documented in this file
 
+## [1.52.0-beta.5](https://github.com/open-sauced/insights/compare/v1.52.0-beta.4...v1.52.0-beta.5) (2023-06-15)
+
+
+### 🐛 Bug Fixes
+
+* remove hard-coded height from layouts ([#1257](https://github.com/open-sauced/insights/issues/1257)) ([20061bc](https://github.com/open-sauced/insights/commit/20061bc3bd5fc791f23b97fb45783de24bcf90f8))
+
+## [1.52.0-beta.4](https://github.com/open-sauced/insights/compare/v1.52.0-beta.3...v1.52.0-beta.4) (2023-06-14)
+
+
+### 🍕 Features
+
+* add openGraph image to public insight pages ([#1258](https://github.com/open-sauced/insights/issues/1258)) ([f0a7f7e](https://github.com/open-sauced/insights/commit/f0a7f7e7f1f0f3f2d6510a7b897c9fc36e068364))
+
+## [1.52.0-beta.3](https://github.com/open-sauced/insights/compare/v1.52.0-beta.2...v1.52.0-beta.3) (2023-06-13)
+
+
+### 🐛 Bug Fixes
+
+* add session check before redirecting in private wrapper component ([#1261](https://github.com/open-sauced/insights/issues/1261)) ([891e4c9](https://github.com/open-sauced/insights/commit/891e4c986cb7703b300c0a219aa4f710d2874df1)), closes [#1260](https://github.com/open-sauced/insights/issues/1260)
+
+## [1.52.0-beta.2](https://github.com/open-sauced/insights/compare/v1.52.0-beta.1...v1.52.0-beta.2) (2023-06-09)
+
+
+### 🐛 Bug Fixes
+
+* remove duplicate redirect check and use server props on insight page ([#1255](https://github.com/open-sauced/insights/issues/1255)) ([9ef2780](https://github.com/open-sauced/insights/commit/9ef2780ea7fbfc170a8a2ead44f93fecd5777e56))
+
+## [1.52.0-beta.1](https://github.com/open-sauced/insights/compare/v1.51.0...v1.52.0-beta.1) (2023-06-07)
+
+
+### 🍕 Features
+
+* implement user collaboration features ([#1221](https://github.com/open-sauced/insights/issues/1221)) ([00b6d1a](https://github.com/open-sauced/insights/commit/00b6d1a349a2fc96149334533e9d8d1c5bcc2e14))
+
 ## [1.51.0](https://github.com/open-sauced/insights/compare/v1.50.0...v1.51.0) (2023-06-06)
 
 
diff --git a/components/atoms/Textarea/text-area.tsx b/components/atoms/Textarea/text-area.tsx
index d4a6c65..3a09dcc 100644
--- a/components/atoms/Textarea/text-area.tsx
+++ b/components/atoms/Textarea/text-area.tsx
@@ -1,16 +1,34 @@
-import * as React from "react";
+import React, { ChangeEvent, useRef } from "react";
 import clsx from "clsx";
 
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  defaultRow?: number;
+  onChangeText?: (value: string) => void;
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, onChangeText, ...props }, ref) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const autoGrowTextarea = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    onChangeText?.(event.target.value);
+    autoGrowTextarea();
+  };
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
   return (
     <textarea
+      onChange={handleInputChange}
       className={clsx(
-        "flex h-20  md:min-h-26 md:h-auto w-full rounded-md  py-2  text-sm placeholder:text-slate-400    disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-20 md:min-h-26 md:h-auto w-full rounded-md  py-2  text-sm placeholder:text-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
-      ref={ref}
+      ref={textareaRef}
       {...props}
     />
   );
diff --git a/components/molecules/CollaborationCard/collaboration-card.tsx b/components/molecules/CollaborationCard/collaboration-card.tsx
index 4c43a9b..bab529c 100644
--- a/components/molecules/CollaborationCard/collaboration-card.tsx
+++ b/components/molecules/CollaborationCard/collaboration-card.tsx
@@ -1,27 +1,44 @@
 import React from "react";
 import Avatar from "components/atoms/Avatar/avatar";
+import clsx from "clsx";
+import { getAvatarByUsername } from "lib/utils/github";
+import Button from "components/atoms/Button/button";
 
-export interface CollaborationRequestObject {
+export interface CollaborationRequestObject extends React.ComponentProps<"div"> {
   requestor: DbUser | undefined;
   outreachMessage: string;
+  requestId: string;
+  onAccept: (id: string) => void;
+  onDecline: (id: string) => void;
 }
 
-const CollaborationCard = ({ requestor, outreachMessage }: CollaborationRequestObject) => {
+const CollaborationCard = ({
+  requestor,
+  outreachMessage,
+  className,
+  requestId,
+  onAccept,
+  onDecline,
+}: CollaborationRequestObject) => {
   return (
-    <div className="bg-white flex flex-col gap-4 rounded-2xl p-4 border border-light-slate-6 max-w-2xl">
-      <div className="flex justify-between text-sm items-center ">
-        <div className="flex gap-2 text-sm items-center">
-          <Avatar
-            className="!rounded-none"
-            size="sm"
-            avatarURL="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
-          />
+    <div className={clsx("flex flex-col w-full gap-4 p-4 bg-white border rounded-2xl border-light-slate-6", className)}>
+      <div className="flex items-center justify-between text-sm ">
+        <div className="flex items-center gap-2 text-sm">
+          <Avatar className="!rounded-none" size="sm" avatarURL={getAvatarByUsername(requestor?.login || "")} />
 
-          <div>Microsoft</div>
+          <div>{requestor?.name}</div>
         </div>
         <div className="flex gap-2">
-          <button className="px-2">Ignore</button>
-          <button className="bg-light-orange-9 px-2 py-1 outline-none rounded-lg text-white">Accept</button>
+          <button onClick={() => onDecline(requestId)} className="px-2">
+            Ignore
+          </button>
+          <Button
+            onClick={() => onAccept(requestId)}
+            variant="primary"
+            className="!px-2 !py-1 !text-xs md:text-sm text-white rounded-lg outline-none bg-light-orange-9"
+          >
+            Accept
+          </Button>
         </div>
       </div>
       <div>{outreachMessage}</div>
diff --git a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
index d7216a8..2dd51b5 100644
--- a/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
+++ b/components/molecules/ContributorHighlight/contributor-highlight-card.tsx
@@ -7,7 +7,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
 } from "components/atoms/Dropdown/dropdown";
 import { HiOutlineEmojiHappy } from "react-icons/hi";
 import { TfiMoreAlt } from "react-icons/tfi";
@@ -25,7 +25,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogDescription,
-  DialogCloseButton
+  DialogCloseButton,
 } from "../Dialog/dialog";
 import { generateApiPrUrl } from "lib/utils/github";
 import { fetchGithubPRInfo } from "lib/hooks/fetchGithubPRInfo";
@@ -39,7 +39,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger
+  AlertDialogTrigger,
 } from "../AlertDialog/alert-dialog";
 import { deleteHighlight } from "lib/hooks/deleteHighlight";
 import { useToast } from "lib/hooks/useToast";
@@ -72,7 +72,7 @@ const ContributorHighlightCard = ({
   id,
   refreshCallBack,
   emojis,
-  shipped_date
+  shipped_date,
 }: ContributorHighlightCardProps) => {
   const { toast } = useToast();
   const twitterTweet = `${title || "Open Source Highlight"} - OpenSauced from ${user}`;
@@ -202,14 +202,11 @@ const ContributorHighlightCard = ({
     }
   }, [highlight]);
 
-  function FollowUser(){
-    
+  function FollowUser() {
     const { follow, unFollow, isError } = useFollowUser(user);
-                
-    return (loggedInUser ? (
-      <DropdownMenuItem
-        className={`rounded-md ${loggedInUser.user_metadata.user_name === user && "hidden"}`}
-      >
+
+    return loggedInUser ? (
+      <DropdownMenuItem className={`rounded-md ${loggedInUser.user_metadata.user_name === user && "hidden"}`}>
         <div onClick={isError ? follow : unFollow} className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
           <FaUserPlus size={22} />
           <span>
@@ -227,7 +224,7 @@ const ContributorHighlightCard = ({
           <span>Follow {user}</span>
         </div>
       </DropdownMenuItem>
-    ));
+    );
   }
 
   return (
@@ -269,11 +266,8 @@ const ContributorHighlightCard = ({
                     <span>Share to Linkedin</span>
                   </a>
                 </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => handleCopyToClipboard(`${host}/feed/${id}`)}
-                  className="rounded-md"
-                >
-                  <div className = "flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
+                <DropdownMenuItem onClick={() => handleCopyToClipboard(`${host}/feed/${id}`)} className="rounded-md">
+                  <div className="flex gap-2.5 py-1 items-center pl-3 pr-7 cursor-pointer">
                     <BsLink45Deg size={22} />
                     <span>Copy link</span>
                   </div>
diff --git a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
index 8501f76..2d35c21 100644
--- a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
+++ b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
@@ -1,14 +1,25 @@
 import React, { useState, useEffect } from "react";
-import Avatar from "components/atoms/Avatar/avatar";
+import { useRouter } from "next/router";
 import Image from "next/image";
+import { TfiMoreAlt } from "react-icons/tfi";
+import { FiCopy } from "react-icons/fi";
+import { SignInWithOAuthCredentials, User } from "@supabase/supabase-js";
+import { usePostHog } from "posthog-js/react";
+
+import Avatar from "components/atoms/Avatar/avatar";
 import RainbowBg from "img/rainbow-cover.png";
 import Button from "components/atoms/Button/button";
-import Link from "next/link";
-import { MarkGithubIcon } from "@primer/octicons-react";
-import { User } from "@supabase/supabase-js";
-import { FiCopy } from "react-icons/fi";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../Dialog/dialog";
+import { Textarea } from "components/atoms/Textarea/text-area";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "components/atoms/Dropdown/dropdown";
+
+import { useUserCollaborations } from "lib/hooks/useUserCollaborations";
 import { useToast } from "lib/hooks/useToast";
-import { usePostHog } from "posthog-js/react";
 
 interface ContributorProfileHeaderProps {
   avatarUrl?: string;
@@ -19,8 +30,10 @@ interface ContributorProfileHeaderProps {
   handleUnfollow: Function;
   user: User | null;
   username: string | undefined;
-  handleSignIn: Function;
+  handleSignIn: (params: SignInWithOAuthCredentials) => void;
   isOwner: boolean;
+  isRecievingCollaborations?: boolean;
+  isPremium?: boolean;
 }
 const ContributorProfileHeader = ({
   avatarUrl,
@@ -33,10 +46,21 @@ const ContributorProfileHeader = ({
   user,
   handleSignIn,
   isOwner,
+  isRecievingCollaborations,
+  isPremium,
 }: ContributorProfileHeaderProps) => {
+  const router = useRouter();
+  const currentPath = router.asPath;
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { requestCollaboration } = useUserCollaborations();
+  const [message, setMessage] = useState("");
+
   const posthog = usePostHog();
+
   const { toast } = useToast();
   const [host, setHost] = useState("");
+
   const handleFollowClick = () => {
     if (isFollowing) {
       handleUnfollow();
@@ -45,6 +69,25 @@ const ContributorProfileHeader = ({
     }
   };
 
+  const handleCollaborationRequest = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (message && username) {
+      setLoading(true);
+      await requestCollaboration({ username, message });
+      setIsDialogOpen(false);
+      setTimeout(() => {
+        document.body.setAttribute("style", "pointer-events:auto !important");
+      }, 1);
+      setLoading(false);
+      setMessage("");
+    }
+  };
+
+  const handleTextAreaInputChange = (e: string) => {
+    setMessage(e);
+  };
+
   const handleCopyToClipboard = async (content: string) => {
     const url = new URL(content).toString();
     posthog!.capture("clicked: profile copied", {
@@ -85,7 +128,7 @@ const ContributorProfileHeader = ({
             isCircle
           />
         </div>
-        <div className="translate-y-[125px] md:hidden ">
+        <div className="translate-y-[110px] md:hidden ">
           <Avatar
             initialsClassName="text-[70px] -translate-y-1 leading-none"
             initials={githubName?.charAt(0)}
@@ -97,38 +140,100 @@ const ContributorProfileHeader = ({
           />
         </div>
         {isConnected && (
-          <div className="flex flex-col items-center gap-3 md:translate-y-0 translate-y-28 md:flex-row">
-            <Button
-              onClick={() => handleCopyToClipboard(`${host}/user/${user?.user_metadata.user_name}`)}
-              className="px-10 py-2 mb-10 bg-white md:mb-6 "
-              variant="text"
-            >
-              <FiCopy className="mr-1 mt-1" /> Share
-            </Button>
-            {user ? (
-              !isOwner && (
-                <Button onClick={handleFollowClick} className="px-10 py-2 mb-10 bg-white md:mb-6 " variant="text">
-                  {isFollowing ? "Following" : "Follow"}
+          <div className="flex flex-col items-center gap-3 translate-y-24 md:translate-y-0 md:flex-row">
+            {/* Mobile dropdown menu */}
+
+            <DropdownMenu>
+              <div className="flex items-center gap-2 mb-10 md:gap-6">
+                <Button
+                  onClick={() => handleCopyToClipboard(`${host}/user/${user?.user_metadata.user_name}`)}
+                  className="px-8 py-2 bg-white "
+                  variant="text"
+                >
+                  <FiCopy className="mt-1 mr-1" /> Share
                 </Button>
-              )
-            ) : (
-              <Button
-                onClick={async () => await handleSignIn({ provider: "github" })}
-                className="px-10 py-2 mb-10 bg-white md:mb-6 "
-                variant="text"
-              >
-                Follow
-              </Button>
-            )}
-
-            <Link href="#">
-              <Button className="hidden px-8 py-2" variant="primary">
-                Collaborate
-              </Button>
-            </Link>
+                {!isOwner && (
+                  <DropdownMenuTrigger title="More options" className="p-2 mr-3 bg-white rounded-full cursor-pointer ">
+                    <TfiMoreAlt size={20} className="" />
+                  </DropdownMenuTrigger>
+                )}
+              </div>
+
+              <DropdownMenuContent align="end" className="flex flex-col gap-1 py-2 rounded-lg">
+                {user ? (
+                  !isOwner && (
+                    <>
+                      <DropdownMenuItem className="rounded-md">
+                        <button onClick={handleFollowClick} className="flex items-center gap-1 pl-3 pr-7">
+                          {isFollowing ? "Following" : "Follow"}
+                        </button>
+                      </DropdownMenuItem>
+                      {isPremium && isRecievingCollaborations && (
+                        <DropdownMenuItem className="rounded-md">
+                          <button onClick={() => setIsDialogOpen(true)} className="flex items-center gap-1 pl-3 pr-7">
+                            Collaborate
+                          </button>
+                        </DropdownMenuItem>
+                      )}
+                    </>
+                  )
+                ) : (
+                  <>
+                    <DropdownMenuItem className="rounded-md">
+                      <button
+                        onClick={async () =>
+                          handleSignIn({ provider: "github", options: { redirectTo: `${host}/${currentPath}` } })
+                        }
+                        className="flex items-center gap-1 pl-3 pr-7"
+                      >
+                        Follow
+                      </button>
+                    </DropdownMenuItem>
+                    {isRecievingCollaborations && (
+                      <DropdownMenuItem className="rounded-md">
+                        <button
+                          onClick={async () =>
+                            handleSignIn({ provider: "github", options: { redirectTo: `${host}/${currentPath}` } })
+                          }
+                          className="flex items-center gap-1 pl-3 pr-7"
+                        >
+                          Collaborate
+                        </button>
+                      </DropdownMenuItem>
+                    )}
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         )}
       </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="w-full md:!w-2/3 px-4 py-8 md:space-y-4">
+          <DialogHeader>
+            <DialogTitle className="!text-3xl text-left">Collaborate with {username}!</DialogTitle>
+          </DialogHeader>
+
+          <form onSubmit={handleCollaborationRequest} className="flex flex-col w-full gap-4 px-4 md:gap-8 md:px-14 ">
+            <div className="space-y-2">
+              <label htmlFor="message">Send a message</label>
+              <Textarea
+                defaultRow={1}
+                value={message}
+                className="w-full px-2 mb-2 transition text-light-slate-11 focus:outline-none"
+                name="message"
+                id="message"
+                onChangeText={handleTextAreaInputChange}
+              />
+            </div>
+
+            <Button loading={loading} title="submit" className="self-end w-max" variant="primary">
+              Send
+            </Button>
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
index 272fb41..0fdcda2 100644
--- a/components/molecules/HighlightInput/highlight-input-form.tsx
+++ b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { BsCalendar2Event } from "react-icons/bs";
 import { format } from "date-fns";
@@ -23,16 +23,12 @@ interface HighlightInputFormProps {
 const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.Element => {
   const [isDivFocused, setIsDivFocused] = useState(false);
   const [loading, setLoading] = useState(false);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const [bodyText, setBodyText] = useState("");
-  const [row, setRow] = useState(4);
   const [title, setTitle] = useState("");
   const [charCount, setCharCount] = useState(0);
   const [pullrequestLink, setPullRequestLink] = useState("");
 
-  let rowLomit = 10;
   const charLimit = 500;
-  let messageLastScrollHeight = textAreaRef.current ? textAreaRef.current?.scrollHeight : 50;
 
   const [date, setDate] = useState<Date | undefined>();
 
@@ -54,15 +50,8 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
     }
   }, [bodyText, pullrequestLink]);
 
-  const handleTextAreaInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setBodyText(e.target.value);
-    if (row < rowLomit && textAreaRef.current && textAreaRef.current?.scrollHeight > messageLastScrollHeight) {
-      setRow((prev) => prev + 1);
-    } else if (row > 1 && textAreaRef.current && textAreaRef.current?.scrollHeight < messageLastScrollHeight) {
-      setRow((prev) => prev--);
-    }
-    if (!bodyText) setRow(1);
-    messageLastScrollHeight = textAreaRef.current?.scrollHeight || 80;
+  const handleTextAreaInputChange = (value: string) => {
+    setBodyText(value);
   };
 
   // Handle submit highlights
@@ -93,7 +82,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
           highlight,
           title,
           url: url,
-          shipped_at: date
+          shipped_at: date,
         });
 
         setLoading(false);
@@ -137,15 +126,14 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
               className={`resize-y min-h-[80px] max-h-99 font-normal text-light-slate-11 mb-2 transition focus:outline-none rounded-lg ${
                 !isDivFocused ? "hidden" : ""
               }`}
-              ref={textAreaRef}
-              rows={row}
+              defaultRow={4}
               value={bodyText}
               placeholder={`Share your thoughts and link to it.
 
 https://github.com/open-sauced/insights/pull/913`}
-              onChange={(e) => {
-                handleTextAreaInputChange(e);
-                setCharCount(e.target.value.length);
+              onChangeText={(value) => {
+                handleTextAreaInputChange(value);
+                setCharCount(value.length);
               }}
             />
 
diff --git a/components/molecules/InsightHeader/insight-header.tsx b/components/molecules/InsightHeader/insight-header.tsx
index 766cc46..5266395 100644
--- a/components/molecules/InsightHeader/insight-header.tsx
+++ b/components/molecules/InsightHeader/insight-header.tsx
@@ -1,5 +1,9 @@
+import { useEffect, useState } from "react";
 import { FaEdit } from "react-icons/fa";
 import Link from "next/link";
+
+import { FiCopy } from "react-icons/fi";
+
 import getRepoInsights from "lib/utils/get-repo-insights";
 import Button from "components/atoms/Button/button";
 import Title from "components/atoms/Typography/title";
@@ -8,6 +12,7 @@ import ContextThumbnail from "components/atoms/ContextThumbnail/context-thumbnai
 import CardRepoList from "../CardRepoList/card-repo-list";
 import { truncateString } from "lib/utils/truncate-string";
 import useRepositories from "lib/hooks/api/useRepositories";
+import { useToast } from "lib/hooks/useToast";
 
 interface InsightHeaderProps {
   insight?: DbUserInsight;
@@ -19,26 +24,51 @@ interface InsightHeaderProps {
 const InsightHeader = ({ insight, repositories, insightId, isOwner }: InsightHeaderProps): JSX.Element => {
   const { data: repoData, meta: repoMeta } = useRepositories(repositories);
   const { repoList } = getRepoInsights(repoData);
+  const [insightPageLink, setInsightPageLink] = useState("");
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setInsightPageLink(window.location.href);
+
+    }
+  }, [insight]);
+
+  const handleCopyToClipboard = async (content: string) => {
+    const url = new URL(content).toString();
+
+    try {
+      await navigator.clipboard.writeText(url);
+      toast({ description: "Copied to clipboard", variant: "success" });
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
   return (
-    <div className="flex flex-row justify-between w-full relative">
+    <div className="relative flex flex-row justify-between w-full">
       <div className="flex flex-col md:flex-row ">
         <div className="header-image mr-2 p-2 min-w-[130px]">
           <ContextThumbnail size={120} ContextThumbnailURL={""}></ContextThumbnail>
         </div>
-        <div className="header-info flex flex-col  grow justify-center p-2">
+        <div className="flex flex-col justify-center p-2 header-info grow">
           <div className="flex gap-2">
             <Title level={1} className="!text-2xl font-semibold tracking-tight text-slate-900">
               {(insight && truncateString(insight.name, 30)) || "Insights"}
             </Title>
             {insight && <Badge isPublic={insight?.is_public} />}
           </div>
-          <div className="flex mt-4 items-center   gap-2">
-            {insight && insight.repos && insight.repos.length > 0 && <CardRepoList limit={2} repoList={repoList} total={repoMeta.itemCount}/>}
+          <div className="flex items-center gap-2 mt-4">
+            {insight && insight.repos && insight.repos.length > 0 && (
+              <CardRepoList limit={2} repoList={repoList} total={repoMeta.itemCount} />
+            )}
           </div>
         </div>
       </div>
-      <div className="py-2 absolute right-0 md:static">
+      <div className="absolute right-0 flex flex-col gap-3 py-2 md:items-center md:flex-row md:static">
+        <Button onClick={() => handleCopyToClipboard(insightPageLink)} className="px-6 py-2 bg-white " variant="text">
+          <FiCopy className="mt-1 mr-2" /> Share
+        </Button>
         {isOwner && (
           <Link href={`/hub/insights/${insightId}/edit`}>
             <Button className="text-xs" variant="primary">
diff --git a/components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx b/components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx
new file mode 100644
index 0000000..721e277
--- /dev/null
+++ b/components/organisms/CollaborationRequestWrapper/collaboration-requests-wrapper.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { format, isToday, isYesterday, formatDistanceToNowStrict } from "date-fns";
+import CollaborationCard from "components/molecules/CollaborationCard/collaboration-card";
+import { useUserCollaborations } from "lib/hooks/useUserCollaborations";
+import DashContainer from "components/atoms/DashedContainer/DashContainer";
+
+function formatPostDate(date: Date) {
+  if (isToday(date)) {
+    return "Today";
+  } else if (isYesterday(date)) {
+    return "Yesterday";
+  } else {
+    return formatDistanceToNowStrict(date, { addSuffix: true });
+  }
+}
+
+const CollaborationRequestsWrapper = () => {
+  const { data, updateCollaborationStatus, deleteCollaborationRequest } = useUserCollaborations();
+  let currentDate: string;
+
+  const getDateGroupHeader = (date: Date, index: number) => {
+    const dateString = date.toLocaleDateString();
+    if (dateString !== currentDate) {
+      currentDate = dateString;
+
+      return (
+        <p className={`mt-4 text-light-slate-10 md:pt-4 md:mt-8 ${index !== 0 && " border-t"}`}>
+          {formatPostDate(new Date(date))}
+        </p>
+      );
+    }
+    return;
+  };
+
+  return (
+    <div>
+      {data && data.length > 0 ? (
+        data
+          .slice()
+          .filter((request) => request.status === "pending")
+          .sort((a, b) => +new Date(b.created_at) - +new Date(a.created_at))
+          .map((requests, i) => {
+            return (
+              <div className="flex flex-col w-full " key={i}>
+                <div className="w-full mt-1 text-center md:text-left">
+                  {getDateGroupHeader(new Date(requests.created_at), i)}
+                </div>
+                <CollaborationCard
+                  onDecline={deleteCollaborationRequest}
+                  onAccept={updateCollaborationStatus}
+                  requestId={requests.id}
+                  className="self-end w-full mt-1 md:w-5/6 md:mt-1"
+                  outreachMessage={requests.message}
+                  requestor={requests.request_user}
+                />
+              </div>
+            );
+          })
+      ) : (
+        <DashContainer className="flex-col gap-6 md:gap-8 text-light-slate-9">
+          <p>No pending requests.</p>
+          <p className="text-center md:px-16">
+            Sometimes you got to be a friend to make a friend. Considering requesting collaboration on sharing profile
+            on social channels like GitHub or Twitter
+          </p>
+        </DashContainer>
+      )}
+    </div>
+  );
+};
+
+export default CollaborationRequestsWrapper;
diff --git a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
index 55108de..c4da5c6 100644
--- a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
+++ b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
@@ -99,8 +99,10 @@ const ContributorProfilePage = ({
         <SkeletonWrapper height={200} />
       ) : (
         <ContributorProfileHeader
+          isPremium={user ? user.role >= 50 : false}
           handleSignIn={signIn}
           username={user?.login}
+          isRecievingCollaborations={user?.receive_collaboration}
           user={loggedInUser}
           isFollowing={followError ? false : true}
           isConnected={iscConnected}
diff --git a/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx b/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
index 5647656..1de03dc 100644
--- a/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
+++ b/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
@@ -31,6 +31,7 @@ import RecommendedRepoCard from "components/molecules/RecommendedRepoCard/recomm
 import recommendations from "lib/utils/recommendations";
 import Title from "components/atoms/Typography/title";
 import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
+import CollaborationRequestsWrapper from "../CollaborationRequestWrapper/collaboration-requests-wrapper";
 
 interface ContributorProfileTabProps {
   contributor?: DbUser;
@@ -45,7 +46,7 @@ interface ContributorProfileTabProps {
   repoList: RepoList[];
 }
 
-const tabLinks: string[] = ["Highlights", "Contributions", "Recommendations"];
+const tabLinks: string[] = ["Highlights", "Contributions", "Requests", "Recommendations"];
 
 const ContributorProfileTab = ({
   contributor,
@@ -59,7 +60,7 @@ const ContributorProfileTab = ({
   recentContributionCount,
   repoList,
 }: ContributorProfileTabProps): JSX.Element => {
-  const { login, interests: userInterests } = contributor || {};
+  const { login, interests: userInterests, receive_collaboration } = contributor || {};
   const { user } = useSupabaseAuth();
   const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
   const [showInterests, setShowInterests] = useState(false);
@@ -131,16 +132,19 @@ const ContributorProfileTab = ({
 
   return (
     <Tabs defaultValue={uppercaseFirst(currentPathname as string)} className="">
-      <TabsList className="justify-start w-full border-b">
+      <TabsList className="justify-start w-full overflow-x-scroll border-b">
         {tabLinks.map((tab) => (
           <TabsTrigger
             key={tab}
             className={clsx(
-              "data-[state=active]:border-sauced-orange data-[state=active]:border-b-2 text-2xl",
+              "data-[state=active]:border-sauced-orange shrink-0 data-[state=active]:border-b-2 text-2xl",
               tab === "Recommendations" &&
                 "font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#EA4600] to-[#EB9B00]",
               user && user.user_metadata.user_name !== login && tab === "Recommendations" && "hidden",
-              !user && tab === "Recommendations" && "hidden"
+              user && user.user_metadata.user_name !== login && tab === "Requests" && "hidden",
+              !user && tab === "Recommendations" && "hidden",
+              !user && tab === "Requests" && "hidden",
+              !receive_collaboration && tab === "Requests" && "hidden"
             )}
             value={tab}
           >
@@ -311,60 +315,66 @@ const ContributorProfileTab = ({
         </div>
       </TabsContent>
 
-      {/* Recommendation tab details */}
-
       {user && user.user_metadata.user_name === login && (
-        <TabsContent value="Recommendations">
-          {userInterests && userInterests.length > 0 ? (
-            <div className="space-y-2 ">
-              <Title className="!font-normal my-6" level={5}>
-                Here are some repositories we think would be great for you. Click on one that you like and start
-                contributing!
-              </Title>
-              <div className="flex flex-wrap gap-4">
-                {recommendedrepos.map((repo, i) => (
-                  <RecommendedRepoCard className="md:w-[45%]" key={i.toString()} fullName={repo} />
-                ))}
-                {recommendedrepos.length === 1 && (
-                  <RecommendedRepoCard className="md:w-[45%]" fullName="open-sauced/insights" />
-                )}
-              </div>
-            </div>
-          ) : (
-            <DashContainer>
-              {/* Empty Interest state */}
-              <div className="flex flex-col items-center gap-4">
-                <p className="font-normal text-center">
-                  If you’re just getting started, recommendations are a great to find projects and start making
-                  contributions on repositories.
-                  <br /> <br /> Select some interests and we give you some recommendations!
-                </p>
+        <>
+          {/* Collaboration requests tab details */}
+          <TabsContent value="Requests">
+            <CollaborationRequestsWrapper />
+          </TabsContent>
 
-                {showInterests && (
-                  <div className="flex flex-wrap justify-center w-full gap-2 mt-6 md:max-w-sm">
-                    {interestArray.map((topic, index) => (
-                      <LanguagePill
-                        onClick={() => handleSelectInterest(topic)}
-                        classNames={`${(selectedInterest || []).includes(topic) && "bg-light-orange-10 text-white"}`}
-                        topic={topic}
-                        key={index}
-                      />
-                    ))}
-                  </div>
-                )}
-                {showInterests ? (
-                  <Button loading={loading} className="mt-4" onClick={handleUpdateInterest} variant="primary">
-                    Save Interests
-                  </Button>
-                ) : (
-                  <Button onClick={() => setShowInterests(true)} variant="primary">
-                    Select Interests
-                  </Button>
-                )}
+          {/* Recommendation tab details */}
+          <TabsContent value="Recommendations">
+            {userInterests && userInterests.length > 0 ? (
+              <div className="space-y-2 ">
+                <Title className="!font-normal my-6" level={5}>
+                  Here are some repositories we think would be great for you. Click on one that you like and start
+                  contributing!
+                </Title>
+                <div className="flex flex-wrap gap-4">
+                  {recommendedrepos.map((repo, i) => (
+                    <RecommendedRepoCard className="md:w-[45%]" key={i.toString()} fullName={repo} />
+                  ))}
+                  {recommendedrepos.length === 1 && (
+                    <RecommendedRepoCard className="md:w-[45%]" fullName="open-sauced/insights" />
+                  )}
+                </div>
               </div>
-            </DashContainer>
-          )}
-        </TabsContent>
+            ) : (
+              <DashContainer>
+                {/* Empty Interest state */}
+                <div className="flex flex-col items-center gap-4">
+                  <p className="font-normal text-center">
+                    If you’re just getting started, recommendations are a great to find projects and start making
+                    contributions on repositories.
+                    <br /> <br /> Select some interests and we give you some recommendations!
+                  </p>
+
+                  {showInterests && (
+                    <div className="flex flex-wrap justify-center w-full gap-2 mt-6 md:max-w-sm">
+                      {interestArray.map((topic, index) => (
+                        <LanguagePill
+                          onClick={() => handleSelectInterest(topic)}
+                          classNames={`${(selectedInterest || []).includes(topic) && "bg-light-orange-10 text-white"}`}
+                          topic={topic}
+                          key={index}
+                        />
+                      ))}
+                    </div>
+                  )}
+                  {showInterests ? (
+                    <Button loading={loading} className="mt-4" onClick={handleUpdateInterest} variant="primary">
+                      Save Interests
+                    </Button>
+                  ) : (
+                    <Button onClick={() => setShowInterests(true)} variant="primary">
+                      Select Interests
+                    </Button>
+                  )}
+                </div>
+              </DashContainer>
+            )}
+          </TabsContent>
+        </>
       )}
     </Tabs>
   );
diff --git a/layouts/filter.tsx b/layouts/filter.tsx
index 0aa2082..0cfdac0 100644
--- a/layouts/filter.tsx
+++ b/layouts/filter.tsx
@@ -12,9 +12,9 @@ const FilterLayout = ({ children }: { children: React.ReactNode }) => {
   const { toolList, selectedTool, filterName, selectedFilter, userOrg } = useNav();
 
   return (
-    <>
+    <div className="min-h-screen flex flex-col">
       <TopNav />
-      <div className="page-container flex min-h-[calc(100vh-(54px+95px))] bg-light-slate-3 flex-col items-center">
+      <div className="page-container flex grow bg-light-slate-3 flex-col items-center">
         <div className="info-container container w-full min-h-[100px]">
           <Header>
             <FilterHeader />
@@ -33,7 +33,7 @@ const FilterLayout = ({ children }: { children: React.ReactNode }) => {
         </main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 
diff --git a/layouts/hub-page.tsx b/layouts/hub-page.tsx
index 64345b7..e1d54fe 100644
--- a/layouts/hub-page.tsx
+++ b/layouts/hub-page.tsx
@@ -25,9 +25,9 @@ const HubPageLayout = ({ children }: { children: React.ReactNode }) => {
   let isOwner = !!(userId && insight && `${userId}` === `${insight.user.id}`);
 
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       <TopNav />
-      <div className="page-container flex min-h-[calc(100vh-(54px+95px))] bg-light-slate-3 flex-col items-center">
+      <div className="page-container flex grow bg-light-slate-3 flex-col items-center">
         <div className="info-container container w-full min-h-[100px]">
           <Header>
             {insight ? (
@@ -65,7 +65,7 @@ const HubPageLayout = ({ children }: { children: React.ReactNode }) => {
         </main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 
diff --git a/layouts/hub.tsx b/layouts/hub.tsx
index d5dda72..cef5ea1 100644
--- a/layouts/hub.tsx
+++ b/layouts/hub.tsx
@@ -5,15 +5,15 @@ import TopNav from "../components/organisms/TopNav/top-nav";
 
 const HubLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       <TopNav />
-      <div className="page-container flex min-h-[calc(100vh-(54px+95px))] flex-col items-center">
+      <div className="page-container flex grow flex-col items-center">
         <main className="flex w-full flex-1 flex-col items-center px-3 md:px-16 py-8 bg-light-slate-2">
           <div className="container mx-auto px-2 md:px-16">{children}</div>
         </main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 
diff --git a/layouts/login.tsx b/layouts/login.tsx
index d22df3d..16c906f 100644
--- a/layouts/login.tsx
+++ b/layouts/login.tsx
@@ -3,11 +3,9 @@ import LoginTopNav from "../components/organisms/LoginTopNav/login-top-nav";
 
 const LoginLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="bg-[#ECECEC] px-3">
+    <div className="bg-[#ECECEC] px-3 flex flex-col min-h-screen">
       <LoginTopNav />
-      <main className="flex w-full min-h-[calc(100vh-54px)] flex-1 pt-10 lg:pt-0 lg:items-center lg:justify-center">
-        {children}
-      </main>
+      <main className="flex grow w-full flex-1 pt-10 lg:pt-0 lg:items-center lg:justify-center">{children}</main>
     </div>
   );
 };
diff --git a/layouts/private-wrapper.tsx b/layouts/private-wrapper.tsx
index 2bda28a..a7aa632 100644
--- a/layouts/private-wrapper.tsx
+++ b/layouts/private-wrapper.tsx
@@ -1,19 +1,28 @@
 import { useUser } from "@supabase/auth-helpers-react";
+import { authSession } from "lib/hooks/authSession";
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
 
 interface PrivateWrapperProps {
   isPrivateRoute?: boolean;
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 const PrivateWrapper = ({ isPrivateRoute = false, children }: PrivateWrapperProps) => {
   const user = useUser();
   const router = useRouter();
-  
+
+  async function checkSession() {
+    const isValid = await authSession();
+
+    if (!isValid) {
+      router.replace("/javascript/dashboard/filter/recent");
+    }
+  }
+
   useEffect(() => {
-    if (isPrivateRoute) {
-      if (!user) router.replace("/javascript/dashboard/filter/recent");
+    if (isPrivateRoute && !user) {
+      checkSession();
     }
   }, [user]);
 
diff --git a/layouts/profile.tsx b/layouts/profile.tsx
index ad02077..cb7c733 100644
--- a/layouts/profile.tsx
+++ b/layouts/profile.tsx
@@ -5,13 +5,13 @@ import TopNav from "../components/organisms/TopNav/top-nav";
 
 const ProfileLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       <TopNav />
-      <div className="page-container flex min-h-[calc(100vh-(54px+95px))] flex-col items-center">
+      <div className="page-container flex grow flex-col items-center">
         <main className="flex pb-16 w-full flex-1 flex-col items-center bg-light-slate-2">{children}</main>
       </div>
       <Footer />
-    </>
+    </div>
   );
 };
 
diff --git a/lib/hooks/useUserCollaborations.ts b/lib/hooks/useUserCollaborations.ts
new file mode 100644
index 0000000..99e8119
--- /dev/null
+++ b/lib/hooks/useUserCollaborations.ts
@@ -0,0 +1,84 @@
+import publicApiFetcher from "lib/utils/public-api-fetcher";
+import useSWR, { Fetcher } from "swr";
+import useSupabaseAuth from "./useSupabaseAuth";
+import { useToast } from "./useToast";
+
+interface UserCollaborationResponse {
+  data?: DbUserCollaboration[];
+  meta: Meta;
+}
+
+type collaborationRequestPayload = {
+  username: string;
+  message: string;
+};
+const useUserCollaborations = () => {
+  const { sessionToken } = useSupabaseAuth();
+  const { toast } = useToast();
+  const { data, error, mutate } = useSWR<UserCollaborationResponse, Error>(
+    "user/collaborations",
+    publicApiFetcher as Fetcher<UserCollaborationResponse, Error>
+  );
+
+  async function requestCollaboration(payload: collaborationRequestPayload) {
+    const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${sessionToken}`,
+        "content-type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (req && req.ok) {
+      const response = await req.json();
+      toast({ description: "Collaboration request Sent!", title: "Success", variant: "success" });
+    } else {
+      const response = await req?.json();
+      toast({ description: response.message[0], title: "Error", variant: "danger" });
+
+      console.log(response.message);
+    }
+  }
+
+  async function updateCollaborationStatus(requestId: string) {
+    const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations/${requestId}`, {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${sessionToken}`,
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({ status: "accept" }),
+    });
+
+    if (req.ok) {
+      toast({ description: "Request accepted successfully!", title: "Success", variant: "success" });
+      mutate();
+    }
+  }
+
+  async function deleteCollaborationRequest(requestId: string) {
+    const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/collaborations/${requestId}`, {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${sessionToken}`,
+        "content-type": "application/json",
+      },
+    });
+    if (req.ok) {
+      toast({ description: "Request deleted successfully!", title: "Success", variant: "success" });
+      mutate();
+    }
+  }
+
+  return {
+    data: data?.data ?? [],
+    isLoading: !error && !data,
+    isError: !!error,
+    requestCollaboration,
+    updateCollaborationStatus,
+    deleteCollaborationRequest,
+  };
+};
+
+export { useUserCollaborations };
diff --git a/lib/utils/fetch-social-card.ts b/lib/utils/fetch-social-card.ts
new file mode 100644
index 0000000..e3a8b99
--- /dev/null
+++ b/lib/utils/fetch-social-card.ts
@@ -0,0 +1,19 @@
+const fetchSocialCard = async (endpoint: string) => {
+  try {
+    const socialCardUrl = `${String(process.env.NEXT_PUBLIC_OPENGRAPH_URL ?? "")}/${endpoint}`;
+    const ogReq = await fetch(`${socialCardUrl}/metadata`); //status returned: 204 or 304 or 404
+    if (ogReq.status !== 204) {
+      fetch(socialCardUrl, {
+        method: "HEAD",
+      }); // trigger the generation of the social card
+    }
+
+    return ogReq.headers.get("x-amz-meta-location");
+  } catch (e) {
+    // This is to prevent the page from crashing if the social card is not generated for some reasons.
+    console.error(e);
+    return "";
+  }
+};
+
+export default fetchSocialCard;
diff --git a/next-types.d.ts b/next-types.d.ts
index 7978f44..14c4d09 100644
--- a/next-types.d.ts
+++ b/next-types.d.ts
@@ -231,3 +231,17 @@ interface DbUserNotification {
   readonly user_id: number;
   readonly meta_id: string;
 }
+
+interface DbUserCollaboration {
+  readonly id: string;
+  readonly user_id: number;
+  readonly request_user_id: number;
+  readonly request_user: DbUser;
+  readonly created_at: string;
+  readonly updated_at: string;
+  readonly deleted_at: string;
+  readonly request_emailed_at: string;
+  readonly collaboration_emailed_at: string;
+  readonly status: "pending" | "accept" | "reject";
+  readonly message: string;
+}
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 52f8549..6fd4518 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -1,12 +1,12 @@
 {
   "name": "@open-sauced/insights",
-  "version": "1.51.0",
+  "version": "1.52.0-beta.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@open-sauced/insights",
-      "version": "1.51.0",
+      "version": "1.52.0-beta.5",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index c79f449..78216ef 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@open-sauced/insights",
   "description": "🍕The dashboard for open source discovery.",
   "keywords": [],
-  "version": "1.51.0",
+  "version": "1.52.0-beta.5",
   "author": "TED Vortex <ted.vortex@gmail.com>",
   "private": true,
   "license": "MIT",
diff --git a/pages/feed/[id].tsx b/pages/feed/[id].tsx
index 70078f8..7ffe9c6 100644
--- a/pages/feed/[id].tsx
+++ b/pages/feed/[id].tsx
@@ -1,6 +1,7 @@
 import { GetServerSidePropsContext } from "next";
 
 import Feed from "../feed";
+import fetchSocialCard from "lib/utils/fetch-social-card";
 
 export default Feed;
 
@@ -27,20 +28,10 @@ export async function handleHighlightSSR({ params }: GetServerSidePropsContext<{
     }
   }
 
-  async function fetchSocialCardURL() {
-    const socialCardUrl = `${String(process.env.NEXT_PUBLIC_OPENGRAPH_URL ?? "")}/highlights/${id}`;
-    const ogReq = await fetch(`${socialCardUrl}/metadata`); //status returned: 204 or 304 or 404
-    if (ogReq.status !== 204) {
-      fetch(socialCardUrl, {
-        method: "HEAD",
-      }); // trigger the generation of the social card
-    }
-
-    ogImage = ogReq.headers.get("x-amz-meta-location");
-  }
-
   // Runs the data fetching in parallel. Decreases the loading time by 50%.
-  await Promise.allSettled([fetchUserData(), fetchSocialCardURL()]);
+  const [, ogData] = await Promise.allSettled([fetchUserData(), fetchSocialCard(`highlights/${id}`)]);
+
+  ogImage = ogData.status === "fulfilled" ? ogData.value : "";
 
   return {
     props: { highlight, ogImage },
diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
index a3fcf1a..754b117 100644
--- a/pages/feed/index.tsx
+++ b/pages/feed/index.tsx
@@ -196,7 +196,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
             <HomeHighlightsWrapper emojis={emojis} mutate={mutate} highlights={data} loading={isLoading} />
             {meta.pageCount > 1 && (
               <div className="mt-10 max-w-[48rem] flex px-2 items-center justify-between">
-                <div className="w-max flex gap-x-4 items-center">
+                <div className="flex items-center w-max gap-x-4">
                   <PaginationResults metaInfo={meta} total={meta.itemCount} entity={"highlights"} />
                 </div>
                 <Pagination
diff --git a/pages/pages/[userOrg]/[filterName]/[toolName].tsx b/pages/pages/[userOrg]/[filterName]/[toolName].tsx
index d0de71c..330a541 100644
--- a/pages/pages/[userOrg]/[filterName]/[toolName].tsx
+++ b/pages/pages/[userOrg]/[filterName]/[toolName].tsx
@@ -1,50 +1,51 @@
-import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs";
+import { useEffect, useState } from "react";
 import { GetServerSidePropsContext } from "next";
-import { useRouter } from "next/router";
+import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs";
 
 import Tool from "components/organisms/ToolsDisplay/tools-display";
 
 import HubPageLayout from "layouts/hub-page";
 import { WithPageLayout } from "interfaces/with-page-layout";
 import changeCapitalization from "lib/utils/change-capitalization";
-import useInsight from "lib/hooks/useInsight";
-import { useEffect } from "react";
-import SpinLoader from "components/atoms/SpinLoader/spin-loader";
-import { useUser } from "@supabase/auth-helpers-react";
-
-const HubPage: WithPageLayout = () => {
-  const router = useRouter();
-  const { filterName, toolName } = router.query;
-  const insightId = filterName as string;
-  const { data: insight, isLoading, isError } = useInsight(insightId);
-  const repositories = insight ? insight.repos.map((repo) => repo.repo_id) : [];
+import SEO from "layouts/SEO/SEO";
+import fetchSocialCard from "lib/utils/fetch-social-card";
 
-  const title = `${insight && insight.name} | Open Sauced Insights Hub`;
+interface InsightPageProps {
+  insight: DbUserInsight;
+  pageName: string;
+  ogImage?: string;
+}
 
-  const user = useUser();
-
-  useEffect(() => {
-    if (!user && !insight?.is_public) router.replace("/javascript/dashboard/filter/recent");
-  },[user]);
+const HubPage: WithPageLayout<InsightPageProps> = ({ insight, pageName, ogImage }: InsightPageProps) => {
+  const repositories = insight.repos.map((repo) => repo.repo_id);
+  const [hydrated, setHydrated] = useState(false);
 
   useEffect(() => {
-    HubPage.updateSEO!({
-      title: title
-    });
-  }, [title]);
+    setHydrated(true);
+  }, []);
+
+  if (!hydrated) {
+    return (
+      <>
+        <SEO
+          title={`${insight.name} | Open Sauced Insights `}
+          description={`${insight.name} Insights on OpenSauced`}
+          image={ogImage}
+          twitterCard="summary_large_image"
+        />
+      </>
+    );
+  }
 
   return (
     <>
-      {isLoading ? <SpinLoader /> : ""}
-      {isError ? <div>Error...</div> : ""}
-      {!isLoading && insight ? (
-        <Tool
-          tool={toolName ? changeCapitalization(toolName.toString(), true) : undefined}
-          repositories={repositories}
-        />
-      ) : (
-        <></>
-      )}
+      <SEO
+        title={`${insight.name} | Open Sauced Insights`}
+        description={`${insight.name} Insights on OpenSauced`}
+        image={ogImage}
+        twitterCard="summary_large_image"
+      />
+      <Tool tool={changeCapitalization(pageName, true)} repositories={repositories} />
     </>
   );
 };
@@ -53,17 +54,18 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const supabase = createServerSupabaseClient(ctx);
 
   const {
-    data: { session }
+    data: { session },
   } = await supabase.auth.getSession();
   const insightId = ctx.params!["filterName"] as string;
+  const pageName = ctx.params!["toolName"] as string;
   const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insightId}`);
   const insight = response.ok ? ((await response.json()) as DbUserInsight) : null;
 
   if (!insight) {
     return {
       redirect: {
-        destination: "/"
-      }
+        destination: "/",
+      },
     };
   }
 
@@ -74,13 +76,20 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     return {
       redirect: {
         destination: "/",
-        permanent: false
-      }
+        permanent: false,
+      },
     };
   }
 
+  // Keeping this here so we are sure the page is not private before we fetch the social card.
+  const ogImage = await fetchSocialCard(`insights/${insightId}`);
+
   return {
-    props: {}
+    props: {
+      insight,
+      pageName,
+      ogImage,
+    },
   };
 };
 
diff --git a/pages/pages/[userOrg]/[filterName]/[toolName]/filter/[...selectedFilter].tsx b/pages/pages/[userOrg]/[filterName]/[toolName]/filter/[...selectedFilter].tsx
index f8b5963..c69f975 100644
--- a/pages/pages/[userOrg]/[filterName]/[toolName]/filter/[...selectedFilter].tsx
+++ b/pages/pages/[userOrg]/[filterName]/[toolName]/filter/[...selectedFilter].tsx
@@ -1,62 +1,48 @@
-import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs";
+import { useEffect } from "react";
 import { GetServerSidePropsContext } from "next";
-import { useRouter } from "next/router";
+import { createServerSupabaseClient } from "@supabase/auth-helpers-nextjs";
 
 import Tool from "components/organisms/ToolsDisplay/tools-display";
 
 import HubPageLayout from "layouts/hub-page";
 import { WithPageLayout } from "interfaces/with-page-layout";
 import changeCapitalization from "lib/utils/change-capitalization";
-import useInsight from "lib/hooks/useInsight";
-import { useEffect } from "react";
-import SpinLoader from "components/atoms/SpinLoader/spin-loader";
 
-const HubPage: WithPageLayout = () => {
-  const router = useRouter();
-  const { filterName, toolName } = router.query;
-  const insightId = filterName as string;
-  const { data: insight, isLoading, isError } = useInsight(insightId);
-  const repositories = insight ? insight.repos.map((repo) => repo.repo_id) : [];
+interface InsightFilterPageProps {
+  insight: DbUserInsight;
+  pageName: string;
+}
+
+const HubPage: WithPageLayout<InsightFilterPageProps> = ({ insight, pageName }: InsightFilterPageProps) => {
+  const repositories = insight.repos.map((repo) => repo.repo_id);
 
-  const title = `${insight && insight.name} | Open Sauced Insights Hub`;
+  const title = `${insight.name} | Open Sauced Insights Hub`;
 
   useEffect(() => {
     HubPage.updateSEO!({
-      title: title
+      title: title,
     });
   }, [title]);
 
-  return (
-    <>
-      {isLoading ? <SpinLoader /> : ""}
-      {isError ? <div>Error...</div> : ""}
-      {!isLoading && insight ? (
-        <Tool
-          tool={toolName ? changeCapitalization(toolName.toString(), true) : undefined}
-          repositories={repositories}
-        />
-      ) : (
-        <></>
-      )}
-    </>
-  );
+  return <Tool tool={changeCapitalization(pageName, true)} repositories={repositories} />;
 };
 
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const supabase = createServerSupabaseClient(ctx);
 
   const {
-    data: { session }
+    data: { session },
   } = await supabase.auth.getSession();
   const insightId = ctx.params!["filterName"] as string;
+  const pageName = ctx.params!["toolName"] as string;
   const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insights/${insightId}`);
   const insight = response.ok ? ((await response.json()) as DbUserInsight) : null;
 
   if (!insight) {
     return {
       redirect: {
-        destination: "/"
-      }
+        destination: "/",
+      },
     };
   }
 
@@ -67,13 +53,16 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     return {
       redirect: {
         destination: "/",
-        permanent: false
-      }
+        permanent: false,
+      },
     };
   }
 
   return {
-    props: {}
+    props: {
+      insight,
+      pageName,
+    },
   };
 };
 
diff --git a/pages/user/[username]/index.tsx b/pages/user/[username]/index.tsx
index 93b17e6..a8b9d75 100644
--- a/pages/user/[username]/index.tsx
+++ b/pages/user/[username]/index.tsx
@@ -15,6 +15,7 @@ import useRepoList from "lib/hooks/useRepoList";
 import { getAvatarByUsername } from "lib/utils/github";
 import useContributorLanguages from "lib/hooks/api/useContributorLanguages";
 import getContributorPullRequestVelocity from "lib/utils/get-contributor-pr-velocity";
+import fetchSocialCard from "lib/utils/fetch-social-card";
 
 // A quick fix to the hydration issue. Should be replaced with a real solution.
 // Slows down the page's initial client rendering as the component won't be loaded on the server.
@@ -111,20 +112,10 @@ export async function handleUserSSR({ params }: GetServerSidePropsContext<{ user
     user = (await req.json()) as DbUser;
   }
 
-  async function fetchSocialCardURL() {
-    const socialCardUrl = `${String(process.env.NEXT_PUBLIC_OPENGRAPH_URL ?? "")}/users/${username}`;
-    const ogReq = await fetch(`${socialCardUrl}/metadata`); //status returned: 204 or 304 or 404
-    if (ogReq.status !== 204) {
-      fetch(socialCardUrl, {
-        method: "HEAD",
-      }); // trigger the generation of the social card
-    }
-
-    ogImage = ogReq.headers.get("x-amz-meta-location");
-  }
-
   // Runs the data fetching in parallel. Decreases the loading time by 50%.
-  await Promise.allSettled([fetchUserData(), fetchSocialCardURL()]);
+  const [, ogData] = await Promise.allSettled([fetchUserData(), fetchSocialCard(`users/${username}`)]);
+
+  ogImage = ogData.status === "fulfilled" ? ogData.value : "";
 
   return {
     props: { username, user, ogImage },
diff --git a/stories/molecules/collaboration-card.stories.tsx b/stories/molecules/collaboration-card.stories.tsx
index b7bbd3b..c370982 100644
--- a/stories/molecules/collaboration-card.stories.tsx
+++ b/stories/molecules/collaboration-card.stories.tsx
@@ -2,7 +2,7 @@ import { ComponentStory } from "@storybook/react";
 import CollaborationCard from "components/molecules/CollaborationCard/collaboration-card";
 
 const storyConfig = {
-  title: "Design System/Molecules/Collaboration Card"
+  title: "Design System/Molecules/Collaboration Card",
 };
 
 export default storyConfig;
@@ -14,5 +14,5 @@ export const CollaborationCardStory = CollaborationCardTemplate.bind({});
 CollaborationCardStory.args = {
   outreachMessage:
     " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
-  requestor: undefined
+  requestor: undefined,
 };
diff --git a/stories/molecules/collaboration-summary-card.stories.tsx b/stories/molecules/collaboration-summary-card.stories.tsx
index bcbedc4..e89a78e 100644
--- a/stories/molecules/collaboration-summary-card.stories.tsx
+++ b/stories/molecules/collaboration-summary-card.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory } from "@storybook/react";
 import CollaborationSummaryCard from "components/molecules/CollaborationSummaryCard/collaboration-summary-card";
 
 const storyConfig = {
-  title: "Design System/Molecules/Collaboration Summary card"
+  title: "Design System/Molecules/Collaboration Summary card",
 };
 
 export default storyConfig;
@@ -19,19 +19,28 @@ CollaborationCardStory.args = {
     {
       outreachMessage:
         " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
-      requestor: undefined
+      requestor: undefined,
+      requestId: "nsodijsoiofer",
+      onAccept(id) {},
+      onDecline(id) {},
     },
     {
       outreachMessage:
         " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
-      requestor: undefined
+      requestor: undefined,
+      requestId: "nsodijsoiofer",
+      onAccept(id) {},
+      onDecline(id) {},
     },
     {
       outreachMessage:
         " Hello Nate, we’re currently working on a project and think that you would be a great fit for our team. Would yoube interested in joining us",
-      requestor: undefined
-    }
+      requestor: undefined,
+      requestId: "nsodijsoiofer",
+      onAccept(id) {},
+      onDecline(id) {},
+    },
   ],
   connectionsCount: 34,
-  messagesCount: 23
+  messagesCount: 23,
 };