diff --git a/src/App.tsx b/src/App.tsx
index 5c9c92f..68fe691 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+import { lazy, Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
 import ErrorBoundary from "./components/ErrorBoundary/ErrorBoundary";
 import useGeneralContext from "./hooks/useContextHooks/useGeneralContext";
@@ -8,6 +9,10 @@ import Usersearch from "./components/Userlist/Usersearch";
 import Auser from "./components/AnotherUser/Auser";
 import LikedPosts from "./components/LikedPosts/LikedPosts";
 import Chat from "./components/Chat/Chat";
+import Loading from "./components/LoadingStates/LoadingPosts";
+
+const LazyLikedPosts = lazy(() => import("./components/LikedPosts/LikedPosts"));
+const LazyChat = lazy(() => import("./components/Chat/Chat"));
 
 export const cookies = new Cookies();
 
@@ -33,8 +38,22 @@ const App = () => {
         <Route path="/" element={<Profile />} />
         <Route path="/usersearch" element={<Usersearch />} />
         <Route path="/user/:id" element={<Auser />} />
-        <Route path="/likedposts" element={<LikedPosts />} />
-        <Route path="/chat" element={<Chat />} />
+        <Route
+          path="/likedposts"
+          element={
+            <Suspense fallback={<Loading />}>
+              <LazyLikedPosts />
+            </Suspense>
+          }
+        />
+        <Route
+          path="/chat"
+          element={
+            <Suspense fallback={<h1>Loading chat...</h1>}>
+              <LazyChat />
+            </Suspense>
+          }
+        />
       </Routes>
     </ErrorBoundary>
   );
diff --git a/src/components/AnotherUser/Afeed.tsx b/src/components/AnotherUser/Afeed.tsx
index cba49af..0556dc1 100644
--- a/src/components/AnotherUser/Afeed.tsx
+++ b/src/components/AnotherUser/Afeed.tsx
@@ -1,46 +1,43 @@
-import { memo } from "react";
-import { Post, LikePostMutation } from "../../types/Types";
-import { doc, updateDoc, getDoc } from "firebase/firestore";
-import { db } from "../../firebase-config";
+import { memo, useCallback } from "react";
+import { Post } from "../../types/Types";
+import { handleUnlike, handleLike } from "../../methods/methods";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import useModal from "../../hooks/useModal";
 
 type AfeedProps = {
   posts: Post[];
   username?: string;
+  uid?: string;
 };
 
-const Afeed = ({ posts, username }: AfeedProps) => {
+const Afeed = ({ posts, uid: target_id }: AfeedProps) => {
   const queryClient = useQueryClient();
+  const uid: string = localStorage.getItem("uid")!;
   const { openImagePopup } = useModal();
 
-  const handleLikeQuery = async (props: LikePostMutation) => {
-    const uid = localStorage.getItem("uid")!;
-    const userdoc = doc(db, "users", uid);
-    const dataSnap = await getDoc(userdoc);
-    const dataset = dataSnap.data();
-    const likedPosts = dataset?.liked;
-    props.e.target.classList.remove("explosive");
-    props.e.target.classList.add("explosive");
-    const id = likedPosts.length ? likedPosts[0].id + 1 : 1;
-    const post = {
-      id,
-      city: props.name,
-      imgsrc: props.src,
-      creator: username,
-    };
-    const newPosts = [post, ...likedPosts];
-    const updateLiked = { liked: newPosts };
-    await updateDoc(userdoc, updateLiked);
-  };
+  const likeMutation = useMutation({
+    mutationFn: handleLike,
+    onSuccess: () => {
+      queryClient.invalidateQueries(["auserdata"]);
+    },
+  });
 
-  const likePostMutation = useMutation({
-    mutationFn: handleLikeQuery,
+  const unlikeMutation = useMutation({
+    mutationFn: handleUnlike,
     onSuccess: () => {
-      queryClient.invalidateQueries(["userdataset"]);
+      queryClient.invalidateQueries(["auserdata"]);
     },
   });
 
+  const isLiked = useCallback(
+    (post: Post) => {
+      if (!post.likes.length) return false;
+
+      return post.likes.some((like) => like.user_id === uid);
+    },
+    [likeMutation, unlikeMutation],
+  );
+
   return (
     <section className="cards">
       {posts.map((post) => (
@@ -55,18 +52,36 @@ const Afeed = ({ posts, username }: AfeedProps) => {
           </div>
           <div className="card__action">
             <h2 className="card__description">{post.city}</h2>
-            <button
-              type="button"
-              className="card__like card__like--auser"
-              onClick={(e) =>
-                likePostMutation.mutate({
-                  e,
-                  name: post.city,
-                  src: post.imgsrc,
-                  username,
-                })
-              }
-            ></button>
+            <div className="card__like-count">
+              <button
+                type="button"
+                className={isLiked(post) ? "card__like--active" : "card__like"}
+                onClick={
+                  isLiked(post)
+                    ? () =>
+                        unlikeMutation.mutate({
+                          post_id: post.id,
+                          user_id: target_id,
+                          target_post: post,
+                          posts,
+                          like: {
+                            user_id: uid,
+                          },
+                        })
+                    : () =>
+                        likeMutation.mutate({
+                          post_id: post.id,
+                          user_id: target_id,
+                          target_post: post,
+                          posts,
+                          like: {
+                            user_id: uid,
+                          },
+                        })
+                }
+              ></button>
+              <p className="card__count">{post.likes.length}</p>
+            </div>
           </div>
         </article>
       ))}
diff --git a/src/components/AnotherUser/Aposts.tsx b/src/components/AnotherUser/Aposts.tsx
index d4412c1..8ae1a89 100644
--- a/src/components/AnotherUser/Aposts.tsx
+++ b/src/components/AnotherUser/Aposts.tsx
@@ -2,16 +2,17 @@ import Afeed from "./Afeed";
 import NoPosts from "./NoPosts";
 import type { Post } from "../../types/Types";
 
-type apostsprops = {
+type APostsProps = {
   posts: Post[];
-  name: string | undefined;
+  name?: string;
+  uid?: string;
 };
 
-const Aposts = ({ posts, name }: apostsprops) => {
+const Aposts = ({ posts, name, uid }: APostsProps) => {
   return (
     <>
       {posts.length ? (
-        <Afeed posts={posts} username={name} />
+        <Afeed uid={uid} posts={posts} username={name} />
       ) : (
         <NoPosts name={name} />
       )}
diff --git a/src/components/AnotherUser/Auser.tsx b/src/components/AnotherUser/Auser.tsx
index f156f5b..c39a19d 100644
--- a/src/components/AnotherUser/Auser.tsx
+++ b/src/components/AnotherUser/Auser.tsx
@@ -52,7 +52,11 @@ const Auser = () => {
       {auserData.isLoading ? (
         <Loading />
       ) : (
-        <Aposts posts={auserData.data?.newPosts} name={auserData.data?.name} />
+        <Aposts
+          uid={id}
+          posts={auserData.data?.newPosts}
+          name={auserData.data?.name}
+        />
       )}
       <Footer />
       <>{openPopupType === "image" && <Auserpopup id={id} />}</>
diff --git a/src/components/AnotherUser/Auserpopup.tsx b/src/components/AnotherUser/Auserpopup.tsx
index fe40d6c..13e995e 100644
--- a/src/components/AnotherUser/Auserpopup.tsx
+++ b/src/components/AnotherUser/Auserpopup.tsx
@@ -26,7 +26,7 @@ const Auserpopup = ({ id }: PropsType) => {
   });
 
   useEffect(() => {
-    if (window.innerWidth > 690) setFocus("comment");
+    if (window.innerWidth > 69) setFocus("comment");
   }, []);
 
   return (
diff --git a/src/components/LoadingStates/LoadingComments.tsx b/src/components/LoadingStates/LoadingComments.tsx
index 65e0814..476bb71 100644
--- a/src/components/LoadingStates/LoadingComments.tsx
+++ b/src/components/LoadingStates/LoadingComments.tsx
@@ -1,59 +1,15 @@
-import React from "react";
-
 const LoadingComments = () => {
   return (
-    <>
-      <li className="comment comment--empty">
-        <img className="comment__icon" alt="" />
-        <article>
-          <div className="comment__info">
-            <p className="comment__creator"></p>
-            <p className="comment__date"></p>
-          </div>
-          <p className="comment__message"></p>
-        </article>
-      </li>
-      <li className="comment comment--empty">
-        <img className="comment__icon" alt="" />
-        <article>
-          <div className="comment__info">
-            <p className="comment__creator"></p>
-            <p className="comment__date"></p>
-          </div>
-          <p className="comment__message"></p>
-        </article>
-      </li>
-      <li className="comment comment--empty">
-        <img className="comment__icon" alt="" />
-        <article>
-          <div className="comment__info">
-            <p className="comment__creator"></p>
-            <p className="comment__date"></p>
-          </div>
-          <p className="comment__message"></p>
-        </article>
-      </li>
-      <li className="comment comment--empty">
-        <img className="comment__icon" alt="" />
-        <article>
-          <div className="comment__info">
-            <p className="comment__creator"></p>
-            <p className="comment__date"></p>
-          </div>
-          <p className="comment__message"></p>
-        </article>
-      </li>
-      <li className="comment comment--empty">
-        <img className="comment__icon" alt="" />
-        <article>
-          <div className="comment__info">
-            <p className="comment__creator"></p>
-            <p className="comment__date"></p>
-          </div>
-          <p className="comment__message"></p>
-        </article>
-      </li>
-    </>
+    <li className="comment comment--empty">
+      <img className="comment__icon" alt="" />
+      <article>
+        <div className="comment__info">
+          <p className="comment__creator"></p>
+          <p className="comment__date"></p>
+        </div>
+        <p className="comment__message"></p>
+      </article>
+    </li>
   );
 };
 
diff --git a/src/components/Profile/AvatarImage.tsx b/src/components/Profile/AvatarImage.tsx
index 3e42aaf..b95236f 100644
--- a/src/components/Profile/AvatarImage.tsx
+++ b/src/components/Profile/AvatarImage.tsx
@@ -1,10 +1,10 @@
 import { memo } from "react";
 import { useDispatch } from "react-redux";
 import { setOpenPopupType } from "../../features/modal/modalSlice";
-import EditPopupIcon from '../../assets/editPopupIcon.svg'
+import EditPopupIcon from "../../assets/editPopupIcon.svg";
 
 type AvatarImageProps = {
-  userPicture: string;
+  userPicture?: string;
 };
 
 const AvatarImage = ({ userPicture }: AvatarImageProps) => {
diff --git a/src/components/Profile/Feed.tsx b/src/components/Profile/Feed.tsx
index b5560ac..333eac1 100644
--- a/src/components/Profile/Feed.tsx
+++ b/src/components/Profile/Feed.tsx
@@ -5,15 +5,16 @@ import {
   setSelectedPost,
   setOpenPopupType,
 } from "../../features/modal/modalSlice";
-import { handleLike, handleDelete } from "../../methods/methods";
+import { handleLike, handleDelete, handleUnlike } from "../../methods/methods";
 import { Post } from "../../types/Types";
-import { memo } from "react";
+import { memo, useCallback } from "react";
 
 type FeedProps = {
   posts: Post[];
 };
 
 const Feed = ({ posts }: FeedProps) => {
+  const uid: string = localStorage.getItem("uid")!;
   const queryClient = useQueryClient();
   const selectedPost = useSelector(
     (state: RootState) => state.modal.selectedPost,
@@ -27,6 +28,13 @@ const Feed = ({ posts }: FeedProps) => {
     },
   });
 
+  const unlikeMutation = useMutation({
+    mutationFn: handleUnlike,
+    onSuccess: () => {
+      queryClient.invalidateQueries(["postsdata"]);
+    },
+  });
+
   const deleteMutation = useMutation({
     mutationFn: handleDelete,
     onSuccess: () => {
@@ -40,6 +48,14 @@ const Feed = ({ posts }: FeedProps) => {
     if (selectedPost?.id !== post.id) dispatch(setSelectedPost(post));
   };
 
+  const isLiked = useCallback(
+    (post: Post) => {
+      if (!post.likes.length) return false;
+      return post.likes.some((like) => like.user_id === uid);
+    },
+    [likeMutation, unlikeMutation],
+  );
+
   return (
     <section className="cards">
       {posts.map((post: Post) => (
@@ -55,18 +71,40 @@ const Feed = ({ posts }: FeedProps) => {
 
           <div className="card__action">
             <h2 className="card__description">{post.city}</h2>
-            <button
-              onClick={() =>
-                likeMutation.mutate({
-                  id: post.id,
-                  posts: posts,
-                })
-              }
-              type="button"
-              className={post.liked ? "card__like--active" : "card__like"}
-            ></button>
+            <div className="card__like-count">
+              <button
+                name="likePostButton"
+                type="button"
+                className={isLiked(post) ? "card__like--active" : "card__like"}
+                onClick={
+                  isLiked(post)
+                    ? () =>
+                        unlikeMutation.mutate({
+                          post_id: post.id,
+                          user_id: uid,
+                          target_post: post,
+                          posts,
+                          like: {
+                            user_id: uid,
+                          },
+                        })
+                    : () =>
+                        likeMutation.mutate({
+                          post_id: post.id,
+                          user_id: uid,
+                          target_post: post,
+                          posts,
+                          like: {
+                            user_id: uid,
+                          },
+                        })
+                }
+              ></button>
+              <p className="card__count">{post.likes.length}</p>
+            </div>
           </div>
           <button
+            name="deletePostButton"
             onClick={() =>
               deleteMutation.mutate({
                 id: post.id,
diff --git a/src/components/Profile/Posts.tsx b/src/components/Profile/Posts.tsx
index 4c38c09..9440b8f 100644
--- a/src/components/Profile/Posts.tsx
+++ b/src/components/Profile/Posts.tsx
@@ -1,11 +1,12 @@
-import React from "react";
+import { memo } from "react";
 import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
-import type { Post } from "../../types/Types";
+import { Post } from "../../types/Types";
 import Feed from "./Feed";
 import Loading from "../LoadingStates/LoadingPosts";
 import { doc, getDoc } from "firebase/firestore";
 import { db } from "../../firebase-config";
 import { useQuery } from "@tanstack/react-query";
+import BoxImage from "../../assets/box.svg";
 
 const Posts = () => {
   const uid = localStorage.getItem("uid")!;
@@ -34,11 +35,7 @@ const Posts = () => {
       ) : (
         <section className="cards cards--empty">
           <div className="cards--empty__wrapper">
-            <img
-              src="src/assets/box.svg"
-              alt=""
-              className="cards--empty__img"
-            />
+            <img src={BoxImage} alt="" className="cards--empty__img" />
             <h1 className="cards--empty__header">
               Whoopsies, your feed is empty! Click plus button to add post
             </h1>
@@ -48,4 +45,4 @@ const Posts = () => {
     </>
   );
 };
-export default React.memo(Posts);
+export default memo(Posts);
diff --git a/src/components/chat/components/SubmitMessage.tsx b/src/components/chat/components/SubmitMessage.tsx
index c88836c..7821b9d 100644
--- a/src/components/chat/components/SubmitMessage.tsx
+++ b/src/components/chat/components/SubmitMessage.tsx
@@ -1,13 +1,18 @@
 import { useEffect, useRef, useState } from "react";
 import { auth, db } from "../../../firebase-config";
 import { useLocation } from "react-router-dom";
-import { FieldValue, addDoc, collection, serverTimestamp } from "firebase/firestore";
+import {
+  FieldValue,
+  addDoc,
+  collection,
+  serverTimestamp,
+} from "firebase/firestore";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { IHandleSubmitMessageParams } from "../../../types/Types";
 import { format } from "date-fns";
 
 type SubmitMessageProps = {
-  username: string;
+  username?: string;
 };
 
 const SubmitMessage = ({ username }: SubmitMessageProps) => {
diff --git a/src/components/likedposts/LikedDesc.tsx b/src/components/likedposts/LikedDesc.tsx
index d334161..69b064a 100644
--- a/src/components/likedposts/LikedDesc.tsx
+++ b/src/components/likedposts/LikedDesc.tsx
@@ -2,9 +2,9 @@ import { memo } from "react";
 import LoadingImage from "../LoadingStates/LoadingImage";
 
 type DescProps = {
-  username: string;
-  status: string;
-  userPicture: string;
+  username?: string;
+  status?: string;
+  userPicture?: string;
   loading: boolean;
 };
 
@@ -24,9 +24,9 @@ const LikedDesc = ({ userPicture, username, status, loading }: DescProps) => {
         <div className="profile__info">
           <div className="profile__info-wrapper">
             {loading ? (
-                <h1 className="profile__header">Loading...</h1>
+              <h1 className="profile__header">Loading...</h1>
             ) : (
-                <h1 className="profile__header">{username}</h1>
+              <h1 className="profile__header">{username}</h1>
             )}
           </div>
           {loading ? (
diff --git a/src/hooks/useQueryHooks/useUserData.tsx b/src/hooks/useQueryHooks/useUserData.tsx
index d11f85f..5f0e211 100644
--- a/src/hooks/useQueryHooks/useUserData.tsx
+++ b/src/hooks/useQueryHooks/useUserData.tsx
@@ -1,13 +1,14 @@
-import { useQuery } from "@tanstack/react-query";
-import { doc, getDoc } from "firebase/firestore";
-import { db } from "../../firebase-config";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import { handleUserDataset } from "../../methods/methods";
+import { User } from "../../types/Types";
 
-const useUserData = () => {
-  return useQuery({
+const useUserData = (): UseQueryResult<User, unknown> => {
+  return useQuery<User>({
     queryFn: handleUserDataset,
     queryKey: ["userdataset"],
   });
 };
 
+export type UseUserData = ReturnType<typeof useUserData>;
+
 export default useUserData;
diff --git a/src/methods/methods.ts b/src/methods/methods.ts
index f8f50b9..24400bf 100644
--- a/src/methods/methods.ts
+++ b/src/methods/methods.ts
@@ -1,6 +1,7 @@
 import { db, auth } from "../firebase-config";
-import { doc, updateDoc, getDoc } from "firebase/firestore";
+import { doc, updateDoc, getDoc, DocumentData } from "firebase/firestore";
 import {
+  User,
   Post,
   Comment,
   AddCommentMutationProps,
@@ -8,6 +9,7 @@ import {
   EditProfilePopupData,
   AddPostData,
   EditIconMutationProps,
+  HandleLikeMutationParams,
 } from "../types/Types";
 import format from "date-fns/format";
 
@@ -17,25 +19,48 @@ import format from "date-fns/format";
 const uid = localStorage.getItem("uid")!;
 
 export const handleLike = async (
-  variables: DeletePostMutationProps,
+  variables: HandleLikeMutationParams,
 ): Promise<void> => {
+  console.log(variables);
+  if (!variables.user_id)
+    throw new Error("Provide correct user_id for like mutation");
+  const newLikes = [...variables.target_post.likes, variables.like];
   const newPosts: Post[] = variables.posts.map((post) =>
-    post.id == variables.id ? { ...post, liked: !post.liked } : post,
+    post.id === variables.post_id ? { ...post, likes: newLikes } : post,
   );
   const newpostsdb = {
-    newPosts: newPosts,
+    newPosts,
+  };
+  const userdoc = doc(db, "users", variables.user_id);
+  await updateDoc(userdoc, newpostsdb);
+};
+
+export const handleUnlike = async (
+  variables: HandleLikeMutationParams,
+): Promise<void> => {
+  if (!variables.user_id)
+    throw new Error("Provide correct user_id for unlike mutation");
+  const newLikes = variables.target_post.likes.filter((like) => {
+    like.user_id === variables.like.user_id;
+  });
+  const newPosts: Post[] = variables.posts.map((post) =>
+    post.id === variables.post_id ? { ...post, likes: newLikes } : post,
+  );
+  const newpostsdb = {
+    newPosts,
   };
-  const userdoc = doc(db, "users", `${uid}`);
+  const userdoc = doc(db, "users", variables.user_id);
   await updateDoc(userdoc, newpostsdb);
 };
 
-export const handleUserDataset = async () => {
+export const handleUserDataset = async (): Promise<User> => {
   const userdoc = doc(db, "users", uid);
   const dataSnap = await getDoc(userdoc);
-  return dataSnap.data();
+  const user: DocumentData | undefined = dataSnap.data();
+  return user as User;
 };
 
-export const handleNewPost = async (variables: AddPostData) => {
+export const handleNewPost = async (variables: AddPostData): Promise<void> => {
   const userdoc = doc(db, "users", uid);
   const dataSnap = await getDoc(userdoc);
   const dataset = dataSnap.data();
@@ -48,6 +73,7 @@ export const handleNewPost = async (variables: AddPostData) => {
     imgsrc: variables.url,
     liked: false,
     comments: [],
+    likes: [],
   };
   const newPosts = [newPost, ...nposts];
 
@@ -68,7 +94,9 @@ export const handleDelete = async (
   await updateDoc(userdoc, newpostsdb);
 };
 
-export const handleProfileIcon = async (variables: EditIconMutationProps) => {
+export const handleProfileIcon = async (
+  variables: EditIconMutationProps,
+): Promise<void> => {
   const uid = localStorage.getItem("uid")!;
   const userdoc = doc(db, "users", uid);
   const updatedImage = {
@@ -82,7 +110,8 @@ export const handleAddComment = async ({
   post,
   id: userid,
 }: AddCommentMutationProps): Promise<void> => {
-  if (typeof userid === "undefined") throw new Error("You cannot provide uid of type undefined")
+  if (typeof userid === "undefined")
+    throw new Error("You cannot provide uid of type undefined");
   const userdoc = doc(db, "users", userid);
   const dataSnap = await getDoc(userdoc);
   const dataset = dataSnap.data();
@@ -119,7 +148,7 @@ export const fetchComments = async ({
 }: {
   uid: string | undefined;
   post_id: number | undefined;
-}) => {
+}): Promise<Comment[] | undefined> => {
   if (!uid || !post_id)
     throw new Error("Provide correct uid and post_id to fetch comments");
   const userdoc = doc(db, "users", uid);
@@ -131,7 +160,9 @@ export const fetchComments = async ({
   return post?.comments;
 };
 
-export const handleEditProfile = async (variables: EditProfilePopupData) => {
+export const handleEditProfile = async (
+  variables: EditProfilePopupData,
+): Promise<void> => {
   const uid = localStorage.getItem("uid")!;
   const newstatusdb = {
     name: variables.username,
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 52cabb0..848092e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -622,6 +622,17 @@ body {
     overflow: hidden;
     white-space: nowrap;
   }
+
+  &__like-count {
+    display: grid;
+    place-items: center;
+    text-align: center;
+    gap: 1px;
+  }
+
+  &__count {
+    font-size: 0.9rem;
+  }
 }
 
 @keyframes opacious {
@@ -937,6 +948,7 @@ body {
     min-height: 4rem;
     background-color: white;
     border-radius: 1rem;
+    opacity: 0.3;
     animation: opacious infinite 3s ease-in;
   }
 
diff --git a/src/types/Types.tsx b/src/types/Types.tsx
index 9c6cd37..fb761e3 100644
--- a/src/types/Types.tsx
+++ b/src/types/Types.tsx
@@ -1,6 +1,20 @@
 import { ReactElement } from "react";
 import { FieldValue } from "firebase/firestore";
 
+// --------------------------------------
+// Mutation handlers params
+// --------------------------------------
+
+export type HandleLikeMutationParams = {
+  post_id: number;
+  user_id?: string;
+  target_post: Post;
+  posts: Post[];
+  like: Like;
+};
+
+// --------------------------------------
+
 export type AddCommentMutationProps = {
   comment: string;
   post?: Post;
@@ -30,38 +44,15 @@ export type EditProfilePopupData = {
   status: string;
 };
 
-export type LikedPost = {
-  city: string;
-  creator: string;
-  id: number;
-  imgsrc: string;
-};
-
 export interface IHandleSubmitMessageParams {
   e: React.FormEvent<HTMLFormElement>;
-  creator: string;
+  creator?: string;
   image: string | null | undefined;
   message: string;
   timestamp: FieldValue;
   userpair: string;
 }
 
-export type Comment = {
-  creator: string;
-  message: string;
-  createdAt: string;
-  id: number;
-  img: string;
-};
-
-export type Post = {
-  city: string;
-  id: number;
-  imgsrc: string;
-  liked: boolean;
-  comments: Comment[];
-};
-
 export type CommentsQuery = {
   cuid: string;
   postId: number;
@@ -87,3 +78,44 @@ export type SnapType = {
   userpair: string;
   id: string;
 };
+
+/**
+ * Fundamental types
+ */
+
+export type Comment = {
+  creator: string;
+  message: string;
+  createdAt: string;
+  id: number;
+  img: string;
+};
+
+export type Post = {
+  city: string;
+  id: number;
+  imgsrc: string;
+  liked: boolean;
+  comments: Comment[];
+  likes: Like[];
+};
+
+export type LikedPost = {
+  city: string;
+  creator: string;
+  id: number;
+  imgsrc: string;
+};
+
+export type Like = {
+  user_id?: string;
+};
+
+export type User = {
+  id: string;
+  imgurl: string;
+  liked: LikedPost[];
+  name: string;
+  newPosts: Post[];
+  newStatus: string;
+};