diff --git a/.env b/.env
index f1c80035..8738dd00 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,4 @@
 VITE_SUPABASE_URL=https://lkkownkrbkmblczeoyqb.supabase.co
 VITE_SUPABASE_API_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJvbGUiOiJhbm9uIiwiaWF0IjoxNjQyNDU2MTc0LCJleHAiOjE5NTgwMzIxNzR9.c6nlkT05GnNacQ6OYuGcjBsILmGsSDwEEtN2zZVXFgY
-VITE_POSTHOG_ID=phc_DFcN3mLP4ocKAUBKr5xyMbAnPwcl93q41ZmhoLG7GCv
\ No newline at end of file
+VITE_POSTHOG_ID=phc_DFcN3mLP4ocKAUBKr5xyMbAnPwcl93q41ZmhoLG7GCv
+VITE_API_URL=https://beta.api.opensauced.pizza/v1
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e9d3f576..4b9b7a55 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -454,6 +454,7 @@ module.exports = {
       },
     ],
     "@typescript-eslint/promise-function-async": "error",
+    "@typescript-eslint/no-non-null-assertion": "off",
   },
   settings: {
     react: {
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index e96a4509..54b00244 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -20,8 +20,10 @@
         "react-dom": "^18.2.0",
         "react-hot-toast": "^2.3.0",
         "react-icons": "^4.4.0",
+        "react-loading-skeleton": "^3.1.0",
         "react-router-dom": "^6.3.0",
         "rooks": "^6.1.0",
+        "swr": "^1.3.0",
         "tailwindcss": "^3.1.7",
         "tailwindcss-radix": "^2.4.0"
       },
@@ -7251,6 +7253,14 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.1.0.tgz",
+      "integrity": "sha512-j1U1CWWs68nBPOg7tkQqnlFcAMFF6oEK6MgqAo15f8A5p7mjH6xyKn2gHbkcimpwfO0VQXqxAswnSYVr8lWzjw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -8015,6 +8025,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/swr": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
+      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/systemjs": {
       "version": "6.12.1",
       "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.12.1.tgz",
diff --git a/package.json b/package.json
index 5a75c2d7..baff22c0 100644
--- a/package.json
+++ b/package.json
@@ -53,8 +53,10 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.3.0",
     "react-icons": "^4.4.0",
+    "react-loading-skeleton": "^3.1.0",
     "react-router-dom": "^6.3.0",
     "rooks": "^6.1.0",
+    "swr": "^1.3.0",
     "tailwindcss": "^3.1.7",
     "tailwindcss-radix": "^2.4.0"
   },
diff --git a/src/App.tsx b/src/App.tsx
index 38a72305..0dd310ae 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,28 @@
-import { useState } from "react";
 import Footer from "./components/Footer";
 import PrimaryNav from "./components/PrimaryNav";
 import PostsWrap from "./components/PostsWrap";
 import { initiatePostHog } from "./lib/analytics";
 import { BrowserRouter } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
+import { SWRConfig } from "swr";
 import RepoSubmission from "./components/RepoSubmission";
 import GradBackground from "./components/GradBackground";
 import useSupabaseAuth from "./hooks/useSupabaseAuth";
 import Hero from "./components/Hero";
+import apiFetcher from "./hooks/useSWR";
 
 const App = (): JSX.Element => {
-  initiatePostHog();
   const { user } = useSupabaseAuth();
-  const [textToSearch] = useState("");
+
+  initiatePostHog();
 
   return (
-    <>
+    <SWRConfig
+      value={{
+        revalidateOnFocus: false,
+        fetcher: apiFetcher,
+      }}
+    >
       <Toaster position="top-right" />
 
       <BrowserRouter>
@@ -29,12 +35,12 @@ const App = (): JSX.Element => {
             <Hero />
           </GradBackground>
 
-          <PostsWrap textToSearch={textToSearch} />
+          <PostsWrap />
 
           <Footer />
         </div>
       </BrowserRouter>
-    </>
+    </SWRConfig>
   );
 };
 
diff --git a/src/components/GridDisplay.tsx b/src/components/GridDisplay.tsx
index 037eeaac..065a5aaf 100644
--- a/src/components/GridDisplay.tsx
+++ b/src/components/GridDisplay.tsx
@@ -5,7 +5,7 @@ export declare interface GridDisplayProps {
   activeLink: string | null;
   limit: number;
   handleLoadingMore: () => void;
-  fetchedData: DbRecomendation[];
+  fetchedData: DbRepo[];
   user?: User;
 }
 
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index ac50f601..6987a0a2 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -14,7 +14,7 @@ const Hero = () => {
   const searchBoxRef = useRef<HTMLInputElement>(null);
   const [searchTerm, setSearchTerm] = useState("");
   const setValueDebounced = useDebounce(setSearchTerm, 500);
-  const [fetchedData, setFetchedData] = useState<DbRecomendation[]>([]);
+  const [fetchedData, setFetchedData] = useState<DbRepo[]>([]);
   const [hasFocus, setFocus] = useState(false);
 
   const handleCmdK = async (e: KeyboardEvent) => {
diff --git a/src/components/HotRepoCard.tsx b/src/components/HotRepoCard.tsx
new file mode 100644
index 00000000..50a04c36
--- /dev/null
+++ b/src/components/HotRepoCard.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import { RiCheckboxCircleFill } from "react-icons/ri";
+import { FaArrowAltCircleUp } from "react-icons/fa";
+import { AiOutlineStar } from "react-icons/ai";
+import { BiGitPullRequest } from "react-icons/bi";
+import { VscIssues } from "react-icons/vsc";
+import Skeleton from "react-loading-skeleton";
+import { getAvatarLink } from "../lib/github";
+import humanizeNumber from "../lib/humanizeNumber";
+import StackedAvatar from "./StackedAvatar";
+import useRepo from "../hooks/useRepo";
+import useVotedRepos from "../hooks/useVotedRepos";
+
+export declare interface HotRepoCardProps {
+  repoName: string;
+}
+
+const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
+  const { votedReposIds, checkVoted, voteHandler } = useVotedRepos();
+  const { repo, isLoading, isError } = useRepo(repoName);
+  const [isVoted, setIsVoted] = useState(false);
+
+  useEffect(() => {
+    repo && setIsVoted(checkVoted(repo.id));
+  }, [votedReposIds, repo]);
+
+  if (isError) {
+    return (
+      <div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
+        {`${repoName} failed to load`}
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
+        <Skeleton
+          enableAnimation
+          count={5}
+        />
+      </div>
+    );
+  }
+
+  const { id, full_name, name, description, issues, stars, contributions } = repo!;
+  const repo_id = parseInt(`${id}`);
+  const owner = full_name.replace(`/${String(name)}`, "").trim();
+
+  return (
+    <div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
+      <div className="flex justify-between w-full">
+        <div className="flex space-x-1 items-center">
+          <img
+            alt="Hot Repo Icon"
+            className="h-4 w-4 rounded-md overflow-hidden"
+            src={getAvatarLink(owner)}
+          />
+
+          <span className="text-sm font-medium text-lightSlate11">
+            {owner}
+          </span>
+        </div>
+
+        <button
+          className={`px-2 py-0.5 border rounded-lg flex justify-center items-center space-x-1 text-xs transition-all duration-200 ${
+            isVoted ? "bg-lightOrange01" : "bg-lightSlate01"
+          } ${isVoted ? "text-saucyRed border-saucyRed " : "text-lightSlate11 border-lightSlate06 "}`}
+          onClick={async () => voteHandler(0, repo_id)}
+        >
+          <span>
+            {isVoted ? "voted" : "upvote"}
+          </span>
+
+          {isVoted
+            ? (
+              <RiCheckboxCircleFill className="" />)
+            : (
+              <FaArrowAltCircleUp className="fill-lightSlate09" />
+            )}
+        </button>
+      </div>
+
+      <div className="flex flex-col pb-10">
+        <a
+          className="text-xl font-semibold"
+          href={`https://app.opensauced.pizza/repos/${full_name}`}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {name}
+        </a>
+
+        <p className="text-gray-500 font-medium text-xs w-5/6">
+          {description}
+        </p>
+      </div>
+
+      <div className="flex items-center justify-between absolute bottom-3 inset-x-0 px-4">
+        <div className="flex space-x-3 text-xs">
+          <div className="flex text-sm space-x-1 justify-center items-center">
+            <VscIssues
+              className="fill-lightSlate10"
+              size={16}
+            />
+
+            <span className="text-lightSlate11">
+              {humanizeNumber(issues)}
+            </span>
+          </div>
+
+          <div className="flex text-sm space-x-1 justify-center items-center">
+            <AiOutlineStar
+              className="fill-lightSlate10"
+              size={16}
+            />
+
+            <span className="text-lightSlate11">
+              {humanizeNumber(stars)}
+            </span>
+          </div>
+
+          <div className="flex text-sm space-x-1 justify-center items-center">
+            <BiGitPullRequest
+              className="fill-lightSlate10"
+              size={16}
+            />
+
+            <span className="text-lightSlate11">0</span>
+          </div>
+        </div>
+
+        <StackedAvatar contributors={contributions} />
+      </div>
+    </div>
+  );
+};
+
+export default HotRepoCard;
diff --git a/src/components/HotRepositories.tsx b/src/components/HotRepositories.tsx
index 84df439d..c7d82d3c 100644
--- a/src/components/HotRepositories.tsx
+++ b/src/components/HotRepositories.tsx
@@ -1,93 +1,9 @@
-import { useCallback, useEffect, useState } from "react";
-import { FaArrowAltCircleUp } from "react-icons/fa";
-import { VscIssues } from "react-icons/vsc";
-import { AiOutlineStar } from "react-icons/ai";
-import { BiGitPullRequest } from "react-icons/bi";
-import { RiCheckboxCircleFill } from "react-icons/ri";
-import { User } from "@supabase/supabase-js";
-import handleVoteUpdateByRepo from "../lib/handleVoteUpdateByRepo";
-import humanizeNumber from "../lib/humanizeNumber";
-import { getAvatarLink } from "../lib/github";
-import { fetchRecommendations } from "../lib/supabase";
-import useSupabaseAuth from "../hooks/useSupabaseAuth";
-import StackedAvatar from "./StackedAvatar";
 import hotIcon from "../assets/hotIcon.png";
+import HotRepoCard from "./HotRepoCard";
 
-export declare interface HotReposProps {
-  user?: User;
-}
-
-const HotRepositories = ({ user }: HotReposProps): JSX.Element => {
-  const { user_metadata: { sub: user_id } } = user! || { user_metadata: { sub: null } };
-  const [hotRepos, setHotRepos] = useState<DbRecomendation[]>([]);
-
-  const [votedReposIds, setVotedReposIds] = useState<number[]>([]);
-  const { signIn } = useSupabaseAuth();
+const HotRepositories = (): JSX.Element => {
   const staticHot = ["oven-sh/bun", "tabler/tabler", "open-sauced/hot"];
 
-  // this function is just a placeholder to help change the color and state of the selected button on the card.
-  const handleVoted = (repo_id: number) => {
-    const hasVoted = checkVoted(repo_id);
-
-    if (hasVoted) {
-      setVotedReposIds(votedReposIds.filter(id => id !== repo_id));
-    } else {
-      setVotedReposIds([...votedReposIds, repo_id]);
-    }
-  };
-
-  const checkVoted = (repo_id: number) => votedReposIds.includes(repo_id);
-
-  const fetchHotData = useCallback(
-    async (repo: string) =>
-      fetchRecommendations("popular", 1, user, repo)
-        .then(data => {
-          if (data[0]) {
-            return data[0];
-          }
-
-          throw new Error(`Unable to fetch ${repo}`);
-        })
-        .catch(err => {
-          console.log(err);
-          throw err;
-        }),
-    [],
-  );
-
-  const fetchVotedData = useCallback(async (user?: User) => {
-    if (user) {
-      const data = await fetchRecommendations("myVotes", 1000, user, "");
-
-      return setVotedReposIds(data.map(repo => repo.id));
-    }
-
-    setVotedReposIds([]);
-  }, []);
-
-  useEffect(() => {
-    const promises: Promise<DbRecomendation>[] = [];
-
-    staticHot.forEach(repo => promises.push(fetchHotData(repo)));
-
-    Promise.allSettled(promises)
-      .then(data => {
-        const newHots = (data.filter(d => d.status === "fulfilled") as PromiseFulfilledResult<DbRecomendation>[]).map(
-          d => d.value,
-        );
-
-        return setHotRepos(newHots);
-      })
-      .catch(console.error);
-
-    fetchVotedData(user).catch(console.error);
-  }, [user]);
-
-  async function handleVoteUpdate (votes: number, repo_id: number) {
-    await handleVoteUpdateByRepo(votes, repo_id, user_id);
-    handleVoted(repo_id);
-  }
-
   return (
     <div className="flex flex-col px-4 max-w-screen-xl mx-auto">
       <div className="flex space-x-3 items-center">
@@ -101,106 +17,11 @@ const HotRepositories = ({ user }: HotReposProps): JSX.Element => {
       </div>
 
       <div className="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full my-5">
-        {hotRepos.map(({ id, full_name, name, description, issues, stars, contributions }) => (
-          <div
-            key={id}
-            className="p-4 border rounded-2xl bg-white w-full space-y-1 relative"
-          >
-            {/* header & upvote button */}
-
-            <div className="flex justify-between w-full">
-              <div className="flex space-x-1 items-center">
-                <img
-                  alt="Hot Repo Icon"
-                  className="h-4 w-4 rounded-md overflow-hidden"
-                  src={getAvatarLink(full_name.replace(`/${String(name)}`, ""))}
-                />
-
-                <span className="text-sm font-medium text-lightSlate11">
-                  {full_name.replace(`/${String(name)}`, "")}
-                </span>
-              </div>
-
-              <button
-                className={`px-2 py-0.5 border rounded-lg flex justify-center items-center space-x-1 text-xs transition-all duration-200 ${
-                  checkVoted(id) ? "bg-lightOrange01" : "bg-lightSlate01"
-                } ${checkVoted(id) ? "text-saucyRed border-saucyRed " : "text-lightSlate11 border-lightSlate06 "}`}
-                onClick={async () => (user_id ? handleVoteUpdate(0, id) : signIn({ provider: "github" }))}
-              >
-                <span>
-                  {checkVoted(id) ? "voted" : "upvote"}
-                </span>
-
-                {checkVoted(id)
-                  ? (
-                    <RiCheckboxCircleFill className="" />
-                  )
-                  : (
-                    <FaArrowAltCircleUp className="fill-lightSlate09" />
-                  )}
-              </button>
-            </div>
-
-            {/* repo name & description */}
-
-            <div className="flex flex-col pb-10">
-              <a
-                className="text-xl font-semibold"
-                href={`https://app.opensauced.pizza/repos/${full_name}`}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                {name}
-              </a>
-
-              <p className="text-gray-500 font-medium text-xs w-5/6">
-                {description}
-              </p>
-            </div>
-
-            {/* issues || star || PRs || Avatar */}
-
-            <div className="flex items-center justify-between absolute bottom-3 inset-x-0 px-4">
-              {/* issues || star || PRs*/}
-
-              <div className="flex space-x-3 text-xs">
-                <div className="flex text-sm space-x-1 justify-center items-center">
-                  <VscIssues
-                    className="fill-lightSlate10"
-                    size={16}
-                  />
-
-                  <span className="text-lightSlate11">
-                    {humanizeNumber(issues)}
-                  </span>
-                </div>
-
-                <div className="flex text-sm space-x-1 justify-center items-center">
-                  <AiOutlineStar
-                    className="fill-lightSlate10"
-                    size={16}
-                  />
-
-                  <span className="text-lightSlate11">
-                    {humanizeNumber(stars)}
-                  </span>
-                </div>
-
-                <div className="flex text-sm space-x-1 justify-center items-center">
-                  <BiGitPullRequest
-                    className="fill-lightSlate10"
-                    size={16}
-                  />
-
-                  <span className="text-lightSlate11">0</span>
-                </div>
-              </div>
-
-              {/* Avatars */}
-
-              <StackedAvatar contributors={contributions} />
-            </div>
-          </div>
+        {staticHot.map(repo => (
+          <HotRepoCard
+            key={`hot-repo-card-${repo}`}
+            repoName={repo}
+          />
         ))}
       </div>
     </div>
diff --git a/src/components/ListRepositories.tsx b/src/components/ListRepositories.tsx
index db6b66f2..ce36a95c 100644
--- a/src/components/ListRepositories.tsx
+++ b/src/components/ListRepositories.tsx
@@ -1,4 +1,3 @@
-import { User } from "@supabase/supabase-js";
 import { BsFillCalendar2Fill } from "react-icons/bs";
 import camelCaseToTitleCase from "../lib/camelCaseToTitleCase";
 import PostList from "./PostList";
@@ -7,11 +6,10 @@ export declare interface ListRepositoriesProps {
   activeLink: string | null;
   limit: number;
   handleLoadingMore: () => void;
-  fetchedData: DbRecomendation[];
-  user?: User;
+  fetchedData: DbRepo[];
 }
 
-const ListRepositories = ({ activeLink, limit, handleLoadingMore, fetchedData, user }: ListRepositoriesProps): JSX.Element => (
+const ListRepositories = ({ activeLink, limit, handleLoadingMore, fetchedData }: ListRepositoriesProps): JSX.Element => (
   <div className="mx-auto max-w-7xl px-[16px] mt-[40px]">
     <div className="flex flex-col gap-y-[20px]">
       <div className="flex items-center gap-x-[10px]">
@@ -28,7 +26,6 @@ const ListRepositories = ({ activeLink, limit, handleLoadingMore, fetchedData, u
           <PostList
             key={`${item.full_name}_${i}`}
             data={item}
-            user={user}
           />
         ))
       }
diff --git a/src/components/PostGrid.tsx b/src/components/PostGrid.tsx
index 343d5dd2..0902a3ac 100644
--- a/src/components/PostGrid.tsx
+++ b/src/components/PostGrid.tsx
@@ -7,12 +7,12 @@ import useSupabaseAuth from "../hooks/useSupabaseAuth";
 import Avatar from "./Avatar";
 
 export declare interface PostGridProps {
-  data: DbRecomendation;
+  data: DbRepo;
   user?: User;
 }
 
 const PostGrid = ({ data, user }: PostGridProps): JSX.Element => {
-  const { user_metadata: { sub: user_id } } = user! || { user_metadata: { sub: null } };
+  const { user_metadata: { sub: user_id } } = user!;
   const {
     id: repo_id,
     votesRelation: [{ votesCount }],
diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx
index 8ec44332..a59ab44b 100644
--- a/src/components/PostList.tsx
+++ b/src/components/PostList.tsx
@@ -1,21 +1,22 @@
-import { useState } from "react";
-import { User } from "@supabase/supabase-js";
-import handleVoteUpdateByRepo from "../lib/handleVoteUpdateByRepo";
+import { useEffect, useState } from "react";
 import { FaArrowAltCircleUp, FaDotCircle, FaStar } from "react-icons/fa";
 import humanizeNumber from "../lib/humanizeNumber";
 import { getAvatarLink, getRepoLink } from "../lib/github";
-import useSupabaseAuth from "../hooks/useSupabaseAuth";
 import StackedAvatar from "./StackedAvatar";
+import useVotedRepos from "../hooks/useVotedRepos";
+import { RiCheckboxCircleFill } from "react-icons/ri";
+import cx from "classnames";
 
 export declare interface PostListProps {
-  data: DbRecomendation;
-  user?: User;
+  data: DbRepo;
 }
 
-const PostList = ({ data, user }: PostListProps): JSX.Element => {
-  const { user_metadata: { sub: user_id } } = user! || { user_metadata: { sub: null } };
+const PostList = ({ data }: PostListProps): JSX.Element => {
+  const { votedReposIds, checkVoted, voteHandler } = useVotedRepos();
+  const [isVoted, setIsVoted] = useState(false);
+
   const {
-    id: repo_id,
+    id,
     votesRelation: [{ votesCount }],
     name,
     full_name,
@@ -25,14 +26,14 @@ const PostList = ({ data, user }: PostListProps): JSX.Element => {
     contributions,
   } = data;
 
-  const [votes, updateVotesState] = useState(votesCount || 0);
-  const { signIn } = useSupabaseAuth();
+  useEffect(() => {
+    setIsVoted(checkVoted(data.id));
+  }, [votedReposIds]);
 
-  async function handleVoteUpdate (votes: number, repo_id: number) {
-    const updatedVotes = await handleVoteUpdateByRepo(votes, repo_id, user_id);
+  const repo_id = parseInt(`${id}`);
+  const owner = full_name.replace(`/${String(name)}`, "").trim();
 
-    updatedVotes > 0 && updateVotesState(updatedVotes);
-  }
+  const [votes, setVotes] = useState(votesCount);
 
   return (
     <div className="flex flex-col gap-y-[20px] md:flex-row bg-white border-[1px] p-[16px] gap-x-[20px] font-Inter border-borderGrey overflow-hidden rounded-[16px]">
@@ -46,7 +47,7 @@ const PostList = ({ data, user }: PostListProps): JSX.Element => {
           >
             <img
               alt={full_name}
-              src={getAvatarLink(full_name.replace(`/${String(name)}`, ""))}
+              src={getAvatarLink(owner)}
             />
           </a>
         </div>
@@ -96,12 +97,28 @@ const PostList = ({ data, user }: PostListProps): JSX.Element => {
       </div>
 
       <button
-        className="md:w-[60px] w-full min-w-[60px] rounded-[6px] group border-[1px] cursor-pointer transition-all duration-200 hover:border-osOrange flex gap-[5px] py-[10px] md:py-0 md:flex-col justify-center items-center"
-        onClick={async () => (user_id ? handleVoteUpdate(votes, repo_id) : signIn({ provider: "github" }))}
+        className={cx(
+          "w-full min-w-[60px] rounded-[6px] group border-[1px] cursor-pointer transition-all duration-200 flex gap-[5px] py-[10px] justify-center items-center",
+          isVoted ? "bg-lightOrange01 border-osOrange" : "bg-white",
+          "md:w-[60px] md:py-0 md:flex-col",
+          isVoted ? "hover:border-osGrey hover:bg-gray-100" : "hover:border-osOrange",
+        )}
+        onClick={async () => voteHandler(votes, repo_id).then(newVotes => typeof newVotes === "number" && setVotes(newVotes))}
       >
-        <FaArrowAltCircleUp className="text-gray-500 group-hover:text-osOrange transition-all duration-300 w-[13px] h-[13px]" />
-
-        <span className="text-xs font-semibold text-gray-500 group-hover:text-osOrange transition-all duration-500">
+        {isVoted
+          ? (
+            <RiCheckboxCircleFill className="text-osOrange group-hover:text-osGrey transition-all duration-300 w-[15px] h-[15px]" />)
+          : (
+            <FaArrowAltCircleUp className="text-gray-500 group-hover:text-osOrange transition-all duration-300 w-[13px] h-[13px]" />
+          )}
+
+        <span
+          className={cx(
+            "text-xs font-semibold",
+            isVoted ? "text-osOrange" : "text-gray-500",
+            isVoted ? "group-hover:text-osGrey" : "group-hover:text-osOrange",
+          )}
+        >
           {humanizeNumber(votes)}
         </span>
       </button>
diff --git a/src/components/PostsWrap.tsx b/src/components/PostsWrap.tsx
index c8f028b8..16dfc365 100644
--- a/src/components/PostsWrap.tsx
+++ b/src/components/PostsWrap.tsx
@@ -7,8 +7,8 @@ import HotRepositories from "./HotRepositories";
 import ListRepositories from "./ListRepositories";
 import SecondaryNav from "./SecondaryNav";
 
-interface PostWrapProps {
-  textToSearch: string;
+export declare interface PostWrapProps {
+  textToSearch?: string;
 }
 
 const parseLimitValue = (limit: string | null): number => {
@@ -28,7 +28,7 @@ const parseLimitValue = (limit: string | null): number => {
 
 const PostsWrap = ({ textToSearch }: PostWrapProps): JSX.Element => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const [fetchedData, setFetchedData] = useState<DbRecomendation[]>([]);
+  const [fetchedData, setFetchedData] = useState<DbRepo[]>([]);
   const { user } = useSupabaseAuth();
   const location = useLocation();
 
@@ -57,14 +57,13 @@ const PostsWrap = ({ textToSearch }: PostWrapProps): JSX.Element => {
         user={user}
       />
 
-      <HotRepositories user={user} />
+      <HotRepositories />
 
       <ListRepositories
         activeLink={activeLink}
         fetchedData={fetchedData}
         handleLoadingMore={handleLoadingMore}
         limit={limit}
-        user={user}
       />
     </div>
   );
diff --git a/src/components/StackedAvatar.tsx b/src/components/StackedAvatar.tsx
index 7a2b8670..cdf43116 100644
--- a/src/components/StackedAvatar.tsx
+++ b/src/components/StackedAvatar.tsx
@@ -1,4 +1,5 @@
 import Avatar from "./Avatar";
+
 export declare interface StackedAvatarProps {
   contributors: DbContribution[];
 }
diff --git a/src/hooks/useRepo.ts b/src/hooks/useRepo.ts
new file mode 100644
index 00000000..3a46fbcf
--- /dev/null
+++ b/src/hooks/useRepo.ts
@@ -0,0 +1,14 @@
+import useSWR from "swr";
+
+const useRepo = (name: string) => {
+  const { data, error, mutate } = useSWR<DbRepo, Error>(`repos/${name}`);
+
+  return {
+    repo: data,
+    isLoading: !error && !data,
+    isError: !!error,
+    mutate,
+  };
+};
+
+export default useRepo;
diff --git a/src/hooks/useSWR.ts b/src/hooks/useSWR.ts
new file mode 100644
index 00000000..cc649bcf
--- /dev/null
+++ b/src/hooks/useSWR.ts
@@ -0,0 +1,9 @@
+import { Fetcher } from "swr";
+
+const apiFetcher: Fetcher = async (apiUrl: string) => {
+  const res = await fetch(`${import.meta.env.VITE_API_URL}/${apiUrl}`, { headers: { accept: "application/json" } });
+
+  return res.json();
+};
+
+export default apiFetcher;
diff --git a/src/hooks/useVotedRepos.ts b/src/hooks/useVotedRepos.ts
new file mode 100644
index 00000000..62450be5
--- /dev/null
+++ b/src/hooks/useVotedRepos.ts
@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from "react";
+import { User } from "@supabase/supabase-js";
+import useSupabaseAuth from "./useSupabaseAuth";
+import { fetchRecommendations } from "../lib/supabase";
+import handleVoteUpdateByRepo from "../lib/handleVoteUpdateByRepo";
+
+const useVotedRepos = () => {
+  const [votedReposIds, setVotedReposIds] = useState<number[]>([]);
+  const { signIn, user } = useSupabaseAuth();
+
+  const fetchVotedData = useCallback(async (user?: User) => {
+    try {
+      if (user) {
+        const data = await fetchRecommendations("myVotes", 1000, user, "");
+
+        return setVotedReposIds(data.map(({ id }) => id));
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
+    setVotedReposIds([]);
+  }, []);
+
+  const checkVoted = (repo_id: number | string) =>
+    votedReposIds.includes(parseInt(`${repo_id}`));
+
+  const handleVoteUpdate = async (votes: number, repo_id: number) => {
+    const voteCount = await handleVoteUpdateByRepo(votes, repo_id, user?.user_metadata.sub);
+
+    handleVoted(repo_id);
+
+    return voteCount;
+  };
+
+  const handleVoted = (repo_id: number) => {
+    const hasVoted = checkVoted(repo_id);
+
+    if (hasVoted) {
+      setVotedReposIds(votedReposIds.filter(id => id !== repo_id));
+    } else {
+      setVotedReposIds([...votedReposIds, repo_id]);
+    }
+  };
+
+  useEffect(() => {
+    fetchVotedData(user)
+      .catch(console.error);
+  }, [user]);
+
+  return {
+    votedReposIds,
+    checkVoted,
+    voteHandler: async (votes = 0, repo_id: number) => (user ? handleVoteUpdate(votes, repo_id) : signIn({ provider: "github" })),
+  };
+};
+
+export default useVotedRepos;
diff --git a/src/lib/handleVoteUpdateByRepo.ts b/src/lib/handleVoteUpdateByRepo.ts
index e778be61..945fb077 100644
--- a/src/lib/handleVoteUpdateByRepo.ts
+++ b/src/lib/handleVoteUpdateByRepo.ts
@@ -6,13 +6,14 @@ import { ToastTrigger } from "./reactHotToast";
 async function handleVoteUpdateByRepo (votes: number, repo_id: number, user_id: unknown): Promise<number> {
   const checkUserId = parseInt(String(user_id));
 
-  if (typeof checkUserId === "number" && checkUserId !== 0) {
+  if (checkUserId !== 0) {
     capturePostHogAnayltics("User voted", "voteClick", "true");
 
     const updatedVotes = await updateVotesByRepo(votes, repo_id, checkUserId);
 
     return updatedVotes;
   }
+
   ToastTrigger({ message: "You must be signed in to vote", type: "error" });
   return 0;
 }
diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts
index 2d81adbe..3ee554c6 100644
--- a/src/lib/supabase.ts
+++ b/src/lib/supabase.ts
@@ -6,25 +6,37 @@ export const supabase = createClient(
 );
 
 export async function authenticatedVote (user_id: number, repo_id: number) {
-  const { error, count } = await supabase
+  const { data, error } = await supabase
     .from("users_to_repos_votes")
-    .select("count", { count: "exact" })
+    .select(`*`)
     .eq("user_id", user_id)
-    .eq("repo_id", repo_id);
+    .eq("repo_id", repo_id)
+    .single() as unknown as { data: DbRepoToUserVotes; error: Error | undefined };
 
-  if (error || count === 0) {
+  if (error) {
     await supabase
       .from("users_to_repos_votes")
-      .upsert({
+      .insert({
         user_id,
         repo_id,
       });
 
     return 1;
   }
+
+  if (data.deleted_at !== null) {
+    await supabase
+      .from("users_to_repos_votes")
+      .update({ deleted_at: null })
+      .eq("user_id", user_id)
+      .eq("repo_id", repo_id);
+
+    return 1;
+  }
+
   await supabase
     .from("users_to_repos_votes")
-    .delete()
+    .update({ deleted_at: (new Date).toISOString() })
     .eq("user_id", user_id)
     .eq("repo_id", repo_id);
 
@@ -82,11 +94,14 @@ export async function fetchRecommendations (
 
   const supabaseComposition = supabase
     .from("repos")
-    .select(selectStatement);
+    .select(selectStatement)
+    .filter("votesRelation.deleted_at", "is", null)
+    .filter("starsRelation.deleted_at", "is", null);
 
   if (user && activeLink === "myVotes") {
     await supabaseComposition
-      .filter("myVotesFilter.user_id", "eq", user.user_metadata.sub);
+      .filter("myVotesFilter.user_id", "eq", user.user_metadata.sub)
+      .filter("myVotesFilter.deleted_at", "is", null);
   }
 
   const searchColumn = textToSearchParam === "" ? "" : "full_name";
@@ -104,5 +119,5 @@ export async function fetchRecommendations (
 
   error && console.error(error);
 
-  return recommendations as DbRecomendation[];
+  return recommendations as DbRepo[];
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index 5b2a7654..4a36e73c 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,3 +1,5 @@
+@import "react-loading-skeleton/dist/skeleton.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 4534a9ab..511be9ea 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -3,6 +3,7 @@ interface ImportMetaEnv {
   readonly VITE_SUPABASE_URL: string;
   readonly VITE_SUPABASE_API_KEY: string;
   readonly VITE_POSTHOG_ID: string;
+  readonly VITE_API_URL: string;
 }
 
 interface ImportMeta {
diff --git a/src/vite-types.d.ts b/src/vite-types.d.ts
index e55797a8..1d218856 100644
--- a/src/vite-types.d.ts
+++ b/src/vite-types.d.ts
@@ -8,7 +8,7 @@ interface DbContribution {
   readonly last_merged_at: string;
 }
 
-interface DbRecomendation {
+interface DbRepo {
   readonly id: number;
   readonly user_id?: number;
   readonly stars: number;
@@ -29,4 +29,17 @@ interface DbRecomendation {
   readonly updated_at?: string;
   readonly pushed_at?: string;
   readonly last_fetched_at?: string;
+  readonly votesCount?: number;
+  readonly starsCount?: number;
+  readonly submissionsCount?: number;
+  readonly stargazersCount?: number;
+}
+
+interface DbRepoToUserVotes {
+  readonly id: number;
+  readonly user_id: number;
+  readonly repo_id: number;
+  readonly created_at?: string;
+  readonly updated_at?: string;
+  readonly deleted_at?: string | null;
 }