diff --git a/packages/app/src/components/PostCard/components/actions/index.jsx b/packages/app/src/components/PostCard/components/actions/index.jsx
index 421c3cf9..517e5e14 100755
--- a/packages/app/src/components/PostCard/components/actions/index.jsx
+++ b/packages/app/src/components/PostCard/components/actions/index.jsx
@@ -1,5 +1,5 @@
 import React from "react"
-
+import { Dropdown, Button } from "antd"
 import { Icons } from "components/Icons"
 
 import SaveButton from "./saveButton"
@@ -7,28 +7,68 @@ import LikeButton from "./likeButton"
 
 import "./index.less"
 
+const MoreActionsItems = [
+    {
+        key: "repost",
+        label: <>
+            <Icons.Repeat />
+            <span>Repost</span>
+        </>,
+    },
+    {
+        key: "share",
+        label: <>
+            <Icons.Share />
+            <span>Share</span>
+        </>,
+    },
+    {
+        type: "divider",
+    },
+    {
+        key: "report",
+        label: <>
+            <Icons.AlertTriangle />
+            <span>Report</span>
+        </>,
+    },
+]
+
 export default (props) => {
-    return <div className="post_actionsWrapper">
+    return <div className="post_actions_wrapper">
         <div className="actions">
             <div className="action" id="likes">
-                <div className="icon">
-                    <LikeButton defaultLiked={props.defaultLiked} onClick={props.onClickLike} />
-                </div>
+                <LikeButton
+                    defaultLiked={props.defaultLiked}
+                    onClick={props.onClickLike}
+                    count={props.likesCount}
+                />
             </div>
             <div className="action" id="save">
-                <div className="icon">
-                    <SaveButton defaultActive={props.defaultSaved} onClick={props.onClickSave} />
-                </div>
+                <SaveButton
+                    defaultActive={props.defaultSaved}
+                    onClick={props.onClickSave}
+                />
             </div>
-            <div className="action" id="share">
-                <div className="icon">
-                    <Icons.Share2 onClick={props.onClickShare} />
-                </div>
+            <div className="action" id="comments">
+                <Button
+                    type="ghost"
+                    shape="circle"
+                    onClick={props.onClickComments}
+                    icon={<Icons.MessageCircle />}
+                />
             </div>
-            <div className="action" id="open" onClick={props.onClickOpen}>
-                <div className="icon">
-                    <Icons.MdOutlineOpenInNew className="icon" />
-                </div>
+            <div className="action" id="more">
+                <Dropdown
+                    menu={{
+                        items: MoreActionsItems
+                    }}
+                    trigger={["click"]}
+                >
+                    <div className="icon">
+                        <Icons.MoreHorizontal />
+                    </div>
+                </Dropdown>
             </div>
         </div>
     </div>
diff --git a/packages/app/src/components/PostCard/components/actions/index.less b/packages/app/src/components/PostCard/components/actions/index.less
index eec0677d..8d5e3e7b 100755
--- a/packages/app/src/components/PostCard/components/actions/index.less
+++ b/packages/app/src/components/PostCard/components/actions/index.less
@@ -1,93 +1,47 @@
-.post_actionsIndicator {
+.post_actions_wrapper {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 
-    width: 10vw;
-    padding: 2px;
-
-    margin: auto;
-
-    border-radius: 8px 8px 0 0;
-    background-color: var(--background-color-primary);
-    color: var(--background-color-contrast);
-
-    font-size: 18px;
-
-    transition: all 0.2s ease-in-out;
-
-    svg {
-        margin: 0 !important;
-    }
-}
-
-.post_actionsWrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
-    position: absolute;
-    bottom: 0;
-    left: 0;
-
-    opacity: 0;
+    position: relative;
 
     width: 100%;
     height: 40px;
 
-    margin-top: 15px;
-    padding: 10px;
+    padding: 20px;
 
-    border-radius: 8px;
     transition: all 0.2s ease-in-out;
 
-    background-color: var(--background-color-primary);
-
     .actions {
         display: inline-flex;
         flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-
-        width: 80%;
 
         transition: all 0.2s ease-in-out;
 
-        color: var(--background-color-contrast);
+        width: 100%;
 
         .action {
             display: inline-flex;
-            flex-direction: column;
+            flex-direction: row;
 
-            transition: all 0.2s ease-in-out;
+            align-items: center;
+            justify-content: center;
 
-            .icon {
-                cursor: pointer;
-                transition: all 0.2s ease-in-out;
+            transition: all 150ms ease-in-out;
 
-                svg {
-                    transition: all 0.2s ease-in-out;
-                }
+            margin-right: 20px;
+
+
+            &:last-child {
+                margin-right: 0;
             }
 
-            .value {
-                position: absolute;
-                bottom: 0;
-
-                font-size: 14px;
-                font-family: "DM Mono", monospace;
-
-                transform: translate(0, 50%);
-                transition: all 0.2s ease-in-out;
-            }
-        }
-
-        .action:hover {
-            .icon {
-                svg {
-                    color: var(--primaryColor) !important;
+            &:hover {
+                .icon {
+                    svg {
+                        color: var(--colorPrimary) !important;
+                    }
                 }
             }
         }
@@ -95,22 +49,5 @@
         svg {
             margin: 0 !important;
         }
-
-        >div {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-
-            border-radius: 360px;
-            width: 55px;
-            height: 55px;
-
-            font-size: 20px;
-            padding: 2px;
-
-            background-color: var(--background-color-primary);
-            transform: translate(0, -15px);
-        }
     }
 }
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/components/actions/likeButton/index.jsx b/packages/app/src/components/PostCard/components/actions/likeButton/index.jsx
index 79a0146c..cb7cc217 100755
--- a/packages/app/src/components/PostCard/components/actions/likeButton/index.jsx
+++ b/packages/app/src/components/PostCard/components/actions/likeButton/index.jsx
@@ -1,5 +1,6 @@
 import React from "react"
 import classnames from "classnames"
+import CountUp from "react-countup"
 
 import "./index.less"
 
@@ -22,27 +23,37 @@ export default (props) => {
         setLiked(to)
     }
 
-    return <button
-        className={classnames("likeButton", { ["clicked"]: liked })}
+    return <div
+        className={
+            classnames(
+                "like_btn_wrapper",
+                {
+                    ["liked"]: liked,
+                    ["clicked"]: clicked
+                }
+            )
+        }
         onClick={handleClick}
     >
-        <div
-            className={classnames(
-                "ripple",
-                { ["clicked"]: clicked }
-            )}
-        ></div>
-        <svg
-            className={classnames(
-                "heart",
-                { ["liked"]: liked },
-                { ["clicked"]: clicked },
-            )}
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-        >
-            <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
-        </svg>
-    </button>
+        <button className="like_btn">
+            <div className="ripple"></div>
+            <svg
+                className="heart"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+            >
+                <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
+            </svg>
+        </button>
+        <CountUp
+            start={props.count}
+            separator="."
+            end={props.count}
+            startOnMount={false}
+            duration={3}
+            className="count"
+            useEasing={true}
+        />
+    </div>
 }
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/components/actions/likeButton/index.less b/packages/app/src/components/PostCard/components/actions/likeButton/index.less
index fa9f9e08..9c44f12e 100755
--- a/packages/app/src/components/PostCard/components/actions/likeButton/index.less
+++ b/packages/app/src/components/PostCard/components/actions/likeButton/index.less
@@ -1,118 +1,161 @@
-@color-heart           : #EA442B;
+@color-heart : #EA442B;
 @likeAnimationDuration : .5s;
-@likeAnimationEasing   : cubic-bezier(.7, 0, .3, 1);
+@likeAnimationEasing : cubic-bezier(.7, 0, .3, 1);
 
-.likeButton {
-    display        : flex;
-    align-items    : center;
-    justify-content: center;
+.like_btn_wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-    .ripple,
-    .ripple:before,
-    .ripple:after {
-        position  : relative;
-        box-sizing: border-box;
+    font-size: 1rem;
+
+    .count {
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+
+        margin-left: 7px;
+        font-size: 0.8rem;
+
+        color: var(--text-color);
     }
 
-    font-size    : 40px;
-    border       : none;
-    border-radius: 50%;
-    width        : 1em;
-    height       : 1em;
-    padding      : 0;
-    margin       : 0;
-    outline      : none;
-    z-index      : 2;
-    transition   : transform @likeAnimationDuration @likeAnimationEasing;
-    cursor       : pointer;
+    //padding: 10px;
+    //border-radius: 8px;
 
-    background-color: transparent;
+    transition: all @likeAnimationDuration @likeAnimationEasing;
 
-    &:before {
-        z-index      : -1;
-        content      : '';
-        position     : absolute;
-        top          : 0;
-        left         : 0;
-        width        : 100%;
-        height       : 100%;
-        border-radius: inherit;
-        transition   : inherit;
-    }
+    &.liked {
+        .like_btn {
+            .heart {
+                >path {
+                    stroke: var(--colorPrimary);
+                    fill: var(--colorPrimary);
+                }
 
-    &:after {
-        content      : '';
-        position     : absolute;
-        top          : 0;
-        left         : 0;
-        width        : 100%;
-        height       : 100%;
-        border-radius: inherit;
-        z-index      : -1;
-    }
-
-    .heart {
-        position: relative;
-
-        >path {
-            stroke-width: 2;
-            transition  : fill @likeAnimationDuration @likeAnimationEasing;
-            stroke      : currentColor;
-            fill        : transparent;
-        }
-
-        &.liked {
-            >path {
-                stroke: var(--primaryColor);
-                fill  : var(--primaryColor);
+                filter: drop-shadow(0px 0px 2px var(--colorPrimary));
             }
         }
 
-        &.clicked {
-            animation: heart-bounce @likeAnimationDuration @likeAnimationEasing;
+        //outline: 1px solid var(--colorPrimary);
+    }
 
-            @keyframes heart-bounce {
-                40% {
-                    transform: scale(0.7);
+    &.clicked {
+        .like_btn {
+            .heart {
+                animation: heart-bounce @likeAnimationDuration @likeAnimationEasing;
+
+                @keyframes heart-bounce {
+                    40% {
+                        transform: scale(0.7);
+                    }
+
+                    0%,
+                    80%,
+                    100% {
+                        transform: scale(1);
+                    }
                 }
+            }
 
-                0%,
-                80%,
-                100% {
-                    transform: scale(1);
+            .ripple {
+                &:before {
+                    animation: ripple-out @likeAnimationDuration @likeAnimationEasing;
                 }
             }
         }
-
-        animation: none;
     }
 
-    .ripple {
-        position     : absolute;
-        height       : 1em;
-        width        : 1em;
+    .like_btn {
+        display: flex;
+
+        align-items: center;
+        justify-content: center;
+
+        .ripple,
+        .ripple:before,
+        .ripple:after {
+            position: relative;
+            box-sizing: border-box;
+        }
+
+        border: none;
         border-radius: 50%;
-        overflow     : hidden;
-        z-index      : 1;
+
+        width: 1rem;
+        height: 1rem;
+
+        padding: 0;
+        margin: 0;
+
+        z-index: 2;
+
+        transition: transform @likeAnimationDuration @likeAnimationEasing;
+
+        background-color: transparent;
 
         &:before {
-            content      : '';
-            position     : absolute;
-            top          : 0;
-            left         : 0;
-            width        : 100%;
-            height       : 100%;
-            border       : .4em solid var(--primaryColor);
+            z-index: -1;
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1rem;
+            height: 1rem;
             border-radius: inherit;
-            transform    : scale(0);
+            transition: inherit;
         }
 
-        &.clicked {
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 1rem;
+            height: 1rem;
+            border-radius: inherit;
+            z-index: -1;
+        }
+
+        .heart {
+            position: relative;
+
+            cursor: pointer;
+
+            >path {
+                stroke-width: 2;
+                transition: fill @likeAnimationDuration @likeAnimationEasing;
+                stroke: currentColor;
+                fill: transparent;
+            }
+
+            animation: none;
+        }
+
+        .ripple {
+            position: absolute;
+
+            height: 1rem;
+            width: 1rem;
+
+            border-radius: 50%;
+            overflow: hidden;
+
+            z-index: 1;
+
             &:before {
-                animation: ripple-out @likeAnimationDuration @likeAnimationEasing;
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border: .4em solid var(--colorPrimary);
+                border-radius: inherit;
+                transform: scale(0);
             }
         }
-
     }
 }
 
diff --git a/packages/app/src/components/PostCard/components/actions/saveButton/index.jsx b/packages/app/src/components/PostCard/components/actions/saveButton/index.jsx
index 05f3161c..e3035ea1 100755
--- a/packages/app/src/components/PostCard/components/actions/saveButton/index.jsx
+++ b/packages/app/src/components/PostCard/components/actions/saveButton/index.jsx
@@ -20,9 +20,9 @@ export default (props) => {
         className={classnames("saveButton", {
             ["active"]: saved
         })}
+        type="ghost"
         shape="circle"
         onClick={onClick}
         icon={saved ? <Icons.MdBookmark /> : <Icons.MdBookmarkBorder />}
-        size="large"
     />
 }
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/components/actions/saveButton/index.less b/packages/app/src/components/PostCard/components/actions/saveButton/index.less
index 6f1e215f..60b67d71 100755
--- a/packages/app/src/components/PostCard/components/actions/saveButton/index.less
+++ b/packages/app/src/components/PostCard/components/actions/saveButton/index.less
@@ -1,22 +1,21 @@
 .saveButton {
-    border: 0 !important;
-
     transition: all 150ms ease-in-out;
 
-    background: transparent !important;
-    background-color: transparent !important;
+    background-color: transparent!important;
+    border: 0!important;
+    box-shadow: none!important;
 
     &.active {
-        color: var(--primaryColor);
+        color: var(--colorPrimary);
 
         svg {
-            color: var(--primaryColor);
+            color: var(--colorPrimary);
         }
     }
 
     svg {
-        width: 20px;
-        height: 20px;
+        width: 1rem;
+        height: 1rem;
 
         transition: all 150ms ease-in-out;
     }
diff --git a/packages/app/src/components/PostCard/components/attachments/index.jsx b/packages/app/src/components/PostCard/components/attachments/index.jsx
index df56fda7..3faa708e 100755
--- a/packages/app/src/components/PostCard/components/attachments/index.jsx
+++ b/packages/app/src/components/PostCard/components/attachments/index.jsx
@@ -3,7 +3,6 @@ import { Skeleton } from "antd"
 import { Carousel } from "react-responsive-carousel"
 import { ImageViewer } from "components"
 import Plyr from "plyr-react"
-import ModalImage from "react-modal-image"
 
 import ContentFailed from "../contentFailed"
 
@@ -43,7 +42,7 @@ const Attachment = React.memo((props) => {
             e.preventDefault()
             e.stopPropagation()
 
-            app.openFullImageViewer(url)
+            app.controls.openFullImageViewer(url)
         }
     }
 
diff --git a/packages/app/src/components/PostCard/components/attachments/index.less b/packages/app/src/components/PostCard/components/attachments/index.less
index 016f7112..4774079a 100755
--- a/packages/app/src/components/PostCard/components/attachments/index.less
+++ b/packages/app/src/components/PostCard/components/attachments/index.less
@@ -88,6 +88,12 @@
     }
 
     .attachment {
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        justify-content: center;
+
         width: 100%;
         height: 100%;
 
@@ -136,7 +142,7 @@
 
     .plyr__control {
         &:hover {
-            background-color: var(--primaryColor);
+            background-color: var(--colorPrimary);
         }
 
         svg {
@@ -149,7 +155,7 @@
     .plyr__progress,
     .plyr__volume {
         input {
-            color: var(--primaryColor);
+            color: var(--colorPrimary);
         }
     }
 }
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/components/content/index.less b/packages/app/src/components/PostCard/components/content/index.less
index 09557ba8..a5fd5ad0 100755
--- a/packages/app/src/components/PostCard/components/content/index.less
+++ b/packages/app/src/components/PostCard/components/content/index.less
@@ -66,13 +66,13 @@
     .message {
         width: 100%;
 
-        font-size: 14px;
-        font-family: "Poppins", sans-serif;
+        font-size: 0.9rem;
+        font-weight: 400;
+
+        color: var(--background-color-contrast);
 
         word-break: break-all;
         user-select: text;
-
-        color: var(--background-color-contrast)
     }
 
     >div {
diff --git a/packages/app/src/components/PostCard/components/header/index.jsx b/packages/app/src/components/PostCard/components/header/index.jsx
index 0b1ff554..c344a001 100755
--- a/packages/app/src/components/PostCard/components/header/index.jsx
+++ b/packages/app/src/components/PostCard/components/header/index.jsx
@@ -1,5 +1,4 @@
 import React from "react"
-import classnames from "classnames"
 import { DateTime } from "luxon"
 
 import { Image } from "components"
@@ -11,13 +10,13 @@ export default (props) => {
     const [timeAgo, setTimeAgo] = React.useState(0)
 
     const goToProfile = () => {
-        window.app.goToAccount(props.postData.user?.username)
+        app.navigation.goToAccount(props.postData.user?.username)
     }
 
     const updateTimeAgo = () => {
         let createdAt = props.postData.timestamp ?? props.postData.created_at ?? ""
 
-        const timeAgo = DateTime.fromISO(createdAt).toRelative()
+        const timeAgo = DateTime.fromISO(createdAt, { locale: app.cores.settings.get("language") }).toRelative()
 
         setTimeAgo(timeAgo)
     }
@@ -43,30 +42,14 @@ export default (props) => {
                 />
             </div>
             <div className="info">
-                <div>
-                    <h1 onClick={goToProfile}>
-                        {props.postData.user?.fullName ?? `@${props.postData.user?.username}`}
-                        {props.postData.user?.verified && <Icons.verifiedBadge />}
-                    </h1>
-                </div>
+                <h1 onClick={goToProfile}>
+                    {props.postData.user?.fullName ?? `@${props.postData.user?.username}`}
+                    {props.postData.user?.verified && <Icons.verifiedBadge />}
+                </h1>
 
-                <div>
+                <span className="timeago">
                     {timeAgo}
-                </div>
-            </div>
-        </div>
-        <div className="statistics">
-            <div className="item">
-                <Icons.Heart className={classnames("icon", { ["filled"]: props.isLiked })} />
-                <div className="value">
-                    {props.likes}
-                </div>
-            </div>
-            <div className="item">
-                <Icons.MessageSquare />
-                <div className="value">
-                    {props.comments}
-                </div>
+                </span>
             </div>
         </div>
     </div>
diff --git a/packages/app/src/components/PostCard/components/header/index.less b/packages/app/src/components/PostCard/components/header/index.less
index b95e579c..a4a4fdde 100755
--- a/packages/app/src/components/PostCard/components/header/index.less
+++ b/packages/app/src/components/PostCard/components/header/index.less
@@ -15,7 +15,7 @@
         }
 
         svg {
-            fill: var(--appColor);
+            fill: var(--app-color);
             margin-left: 6px;
         }
 
@@ -35,22 +35,29 @@
         .info {
             display: inline-flex;
             flex-direction: column;
-            align-items: center;
-            justify-content: start;
 
-            text-align: start;
+            align-items: flex-start;
 
             width: fit-content;
 
-            color: var(--background-color-contrast);
-
             h1 {
-                color: var(--background-color-contrast);
-                margin: 0;
-                font-family: "DM Mono", monospace;
+                margin: 0 0 4px 0;
+
                 align-self: start;
+
+                font-weight: 500;
                 font-size: 1rem;
+
                 cursor: pointer;
+
+                color: var(--background-color-contrast);
+            }
+
+            .timeago {
+                font-weight: 400;
+                font-size: 0.7rem;
+
+                color: rgb(var(--bg_color_4));
             }
 
             >div {
@@ -58,35 +65,4 @@
             }
         }
     }
-
-    .statistics {
-        display: inline-flex;
-        flex-direction: column;
-        font-size: 16px;
-
-        color: var(--background-color-contrast);
-        height: fit-content;
-
-        .item {
-            display: inline-flex;
-            align-items: center;
-            justify-content: flex-end;
-            height: fit-content;
-
-            margin-left: 20px;
-            margin-bottom: 5px;
-
-            .icon {
-                &.filled {
-                    color: var(--primaryColor);
-                    fill: var(--primaryColor);
-                }
-            }
-
-            .value {
-                font-family: "DM Mono", monospace;
-                font-size: 14px;
-            }
-        }
-    }
 }
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/index.jsx b/packages/app/src/components/PostCard/index.jsx
index c9ce8f01..cc0a410b 100755
--- a/packages/app/src/components/PostCard/index.jsx
+++ b/packages/app/src/components/PostCard/index.jsx
@@ -2,6 +2,7 @@ import React from "react"
 import * as antd from "antd"
 import classnames from "classnames"
 
+import { CommentsCard } from "components"
 import { Icons } from "components/Icons"
 
 import PostHeader from "./components/header"
@@ -11,184 +12,116 @@ import PostAttachments from "./components/attachments"
 
 import "./index.less"
 
-export default ({
-    expansibleActions = window.app.settings.get("postCard_expansible_actions"),
-    autoCarrousel = window.app.settings.get("postCard_carrusel_auto"),
-    data = {},
-    events = {},
-    fullmode
-}) => {
-    const isSelf = app.permissions.checkUserIdIsSelf(data.user_id)
+export default class PostCard extends React.Component {
+    state = {
+        loading: true,
+        data: this.props.data ?? {},
 
-    const [loading, setLoading] = React.useState(true)
+        countLikes: this.props.data.countLikes ?? 0,
+        countComments: this.props.data.countComments ?? 0,
 
-    const [likes, setLikes] = React.useState(data.likes ?? [])
-    const [comments, setComments] = React.useState(data.comments ?? [])
+        hasLiked: this.props.data.isLiked ?? false,
+        hasSaved: this.props.data.isSaved ?? false,
 
-    const [hasLiked, setHasLiked] = React.useState(false)
-    const [hasSaved, setHasSaved] = React.useState(false)
+        open: this.props.defaultOpened ?? false,
+    }
 
-    const onClickDelete = async () => {
-        if (typeof events.onClickDelete !== "function") {
+    onClickDelete = async () => {
+        if (typeof this.props.events.onClickDelete !== "function") {
             console.warn("onClickDelete event is not a function")
             return
         }
 
-        return await events.onClickDelete(data)
+        return await this.props.events.onClickDelete(this.state.data)
     }
 
-    const onClickLike = async () => {
-        if (typeof events.onClickLike !== "function") {
+    onClickLike = async () => {
+        if (typeof this.props.events.onClickLike !== "function") {
             console.warn("onClickLike event is not a function")
             return
         }
 
-        return await events.onClickLike(data)
+        return await this.props.events.onClickLike(this.state.data)
     }
 
-    const onClickSave = async () => {
-        if (typeof events.onClickSave !== "function") {
+    onClickSave = async () => {
+        if (typeof this.props.events.onClickSave !== "function") {
             console.warn("onClickSave event is not a function")
             return
         }
 
-        return await events.onClickSave(data)
+        return await this.props.events.onClickSave(this.state.data)
     }
 
-    const onClickOpen = async () => {
-        if (typeof events.onClickOpen !== "function") {
-            console.warn("onClickOpen event is not a function, performing default action")
-            return window.app.goToPost(data._id)
-        }
-
-        return await events.onClickOpen(data)
-    }
-
-    const onClickEdit = async () => {
-        if (typeof events.onClickEdit !== "function") {
+    onClickEdit = async () => {
+        if (typeof this.props.events.onClickEdit !== "function") {
             console.warn("onClickEdit event is not a function")
             return
         }
 
-        return await events.onClickEdit(data)
+        return await this.props.events.onClickEdit(this.state.data)
     }
 
-    const onDataUpdate = (data) => {
-        console.log("onDataUpdate", data)
-
-        setLikes(data.likes)
-        setComments(data.comments)
+    onDoubleClick = async () => {
+        this.handleOpen()
     }
 
-    const onDoubleClick = () => {
-        if (typeof events.onDoubleClick !== "function") {
-            console.warn("onDoubleClick event is not a function")
-            return
+    onClickComments = async () => {
+        this.handleOpen()
+    }
+
+    handleOpen = (to) => {
+        if (typeof to === "undefined") {
+            to = !this.state.open
         }
 
-        return events.onDoubleClick(data)
-    }
-
-    React.useEffect(() => {
-        if (fullmode) {
-            app.eventBus.emit("style.compactMode", true)
+        if (typeof this.props.events?.onToogleOpen === "function") {
+            this.props.events?.onToogleOpen(to, this.state.data)
         }
 
-        app.eventBus.on(`post.${data._id}.delete`, onClickDelete)
-        app.eventBus.on(`post.${data._id}.update`, onClickEdit)
+        this.setState({
+            open: to,
+        })
+
+        //app.controls.openPostViewer(this.state.data)
+    }
+
+    onLikesUpdate = (data) => {
+        if (data.to) {
+            this.setState({
+                countLikes: this.state.countLikes + 1,
+            })
+        } else {
+            this.setState({
+                countLikes: this.state.countLikes - 1,
+            })
+        }
+    }
+
+    componentDidMount = async () => {
+        app.eventBus.on(`post.${this.state.data._id}.delete`, this.onClickDelete)
+        app.eventBus.on(`post.${this.state.data._id}.update`, this.onClickEdit)
 
         // first listen to post changes
-        window.app.api.namespaces["main"].listenEvent(`post.dataUpdate.${data._id}`, onDataUpdate)
+        //window.app.cores.api.namespaces["main"].listenEvent(`post.dataUpdate.${data._id}`, onDataUpdate)
+        window.app.cores.api.namespaces["main"].listenEvent(`post.${this.state.data._id}.likes.update`, this.onLikesUpdate)
 
-        // then load
-        setLoading(false)
-
-        return () => {
-            if (fullmode) {
-                app.eventBus.emit("style.compactMode", false)
-            }
-
-            app.eventBus.off(`post.${data._id}.delete`, onClickDelete)
-            app.eventBus.off(`post.${data._id}.update`, onClickEdit)
-
-            // remove the listener
-            window.app.api.namespaces["main"].unlistenEvent(`post.dataUpdate.${data._id}`, onDataUpdate)
-        }
-    }, [])
-
-    React.useEffect(() => {
-        if (!app.userData) {
-            return
-        }
-
-        // check if the post has liked by you
-        const hasLiked = likes.includes(app.userData._id)
-        const hasSaved = data.isSaved
-
-        setHasLiked(hasLiked)
-        setHasSaved(hasSaved)
-    })
-
-    if (loading) {
-        return <antd.Skeleton active />
+        this.setState({
+            isSelf: app.cores.permissions.checkUserIdIsSelf(this.state.data.user_id),
+            loading: false,
+        })
     }
 
-    try {
-        return <div
-            key={data.key ?? data._id}
-            id={data._id}
-            className={classnames(
-                "postCard",
-                data.type,
-                { ["liked"]: hasLiked },
-                { ["noHide"]: window.isMobile || !expansibleActions },
-                { ["fullmode"]: fullmode },
-            )}
-            context-menu={"postCard-context"}
-            user-id={data.user_id}
-            self-post={isSelf.toString()}
-        >
-            <div className="wrapper">
-                <PostHeader
-                    postData={data}
-                    isLiked={hasLiked}
-                    likes={likes.length}
-                    comments={comments.length}
-                    fullmode={fullmode}
-                    onDoubleClick={onDoubleClick}
-                />
-                <PostContent
-                    data={data}
-                    autoCarrousel={autoCarrousel}
-                    fullmode={fullmode}
-                    onDoubleClick={onDoubleClick}
-                    nsfw={data.flags && data.flags.includes("nsfw")}
-                >
-                    {data.attachments && data.attachments.length > 0 && <PostAttachments
-                        attachments={data.attachments}
-                    />}
-                </PostContent>
-            </div>
-            {!fullmode &&
-                <div className="post_actionsIndicator">
-                    <Icons.MoreHorizontal />
-                </div>
-            }
-            {!fullmode &&
-                <PostActions
-                    defaultLiked={hasLiked}
-                    defaultSaved={hasSaved}
-                    onClickLike={onClickLike}
-                    onClickSave={onClickSave}
-                    onClickOpen={onClickOpen}
-                    actions={{
-                        delete: onClickDelete,
-                    }}
-                    fullmode={fullmode}
-                />
-            }
-        </div>
-    } catch (error) {
+    componentWillUnmount = () => {
+        app.eventBus.off(`post.${this.state.data._id}.delete`, this.onClickDelete)
+        app.eventBus.off(`post.${this.state.data._id}.update`, this.onClickEdit)
+
+        // remove the listener
+        //window.app.cores.api.namespaces["main"].unlistenEvent(`post.dataUpdate.${data._id}`, onDataUpdate)
+        window.app.cores.api.namespaces["main"].listenEvent(`post.${this.state.data._id}.likes.update`, this.onLikesUpdate)
+    }
+
+    componentDidCatch = (error, info) => {
         console.error(error)
 
         return <div className="postCard error">
@@ -201,4 +134,63 @@ export default ({
             </h1>
         </div>
     }
+
+    render = () => {
+        if (this.state.loading) {
+            return <div
+                key={this.state.data.key ?? this.state.data._id}
+                id={this.state.data._id}
+                className="postCard"
+            >
+                <antd.Skeleton active avatar />
+            </div>
+        }
+
+        return <div
+            key={this.state.data.key ?? this.state.data._id}
+            id={this.state.data._id}
+            className={classnames(
+                "postCard",
+                {
+                    ["open"]: this.state.open,
+                }
+            )}
+            context-menu={"postCard-context"}
+            user-id={this.state.data.user_id}
+            self-post={this.state.isSelf.toString()}
+        >
+            <div className="wrapper">
+                <PostHeader
+                    postData={this.state.data}
+                    isLiked={this.state.hasLiked}
+                    onDoubleClick={this.onDoubleClick}
+                />
+                <PostContent
+                    data={this.state.data}
+                    nsfw={this.state.data.flags && this.state.data.flags.includes("nsfw")}
+                    onDoubleClick={this.onDoubleClick}
+                >
+                    {this.state.data.attachments && this.state.data.attachments.length > 0 && <PostAttachments
+                        attachments={this.state.data.attachments}
+                    />}
+                </PostContent>
+            </div>
+            <PostActions
+                likesCount={this.state.countLikes}
+                commentsCount={this.state.countComments}
+                defaultLiked={this.state.hasLiked}
+                defaultSaved={this.state.hasSaved}
+                onClickLike={this.onClickLike}
+                onClickSave={this.onClickSave}
+                onClickComments={this.onClickComments}
+                actions={{
+                    delete: this.onClickDelete,
+                }}
+            />
+
+            {
+                this.state.open && <CommentsCard post_id={this.state.data._id} />
+            }
+        </div>
+    }
 }
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/index.less b/packages/app/src/components/PostCard/index.less
index 2422b735..098c1bec 100755
--- a/packages/app/src/components/PostCard/index.less
+++ b/packages/app/src/components/PostCard/index.less
@@ -5,127 +5,14 @@
     width: 100%;
     max-width: 600px;
 
-    filter: drop-shadow(3px 3px 2px var(--shadow-color));
-
     background-color: var(--background-color-accent);
-    border-radius: 8px;
 
     transition: all 0.2s ease-in-out;
 
-    outline-width: 1px;
-    outline-style: solid;
-    outline-color: transparent;
+    padding: 17px;
 
-    &.playlist {
-        .wrapper {
-            .post_content {
-                flex-direction: row;
-                background-color: var(--background-color-primary);
-                padding: 20px;
-
-                .playlistCover {
-                    width: 200px;
-                    height: 200px;
-                    background-position: center;
-                    background-size: cover;
-                    background-repeat: no-repeat;
-                    border-radius: 8px;
-
-                    margin-right: 25px;
-                }
-
-                .playlistTitle {
-                    h1 {
-                        font-size: 1.5rem;
-                        font-family: "Space Grotesk", sans-serif;
-                        margin: 0;
-                    }
-
-                    h3 {
-                        font-size: 0.9rem;
-                        // make italic
-                        font-style: italic;
-                    }
-
-                    .actions {
-                        width: 100%;
-
-                        margin-top: 20px;
-
-                        display: inline-flex;
-                        flex-direction: column;
-
-                        align-items: center;
-                        justify-content: center;
-                    }
-                }
-            }
-        }
-    }
-
-    &.liked {
-        filter: drop-shadow(0px 0px 2px var(--primaryColor));
-        outline-color: var(--primaryColor);
-    }
-
-    &.noHide {
-        .wrapper {
-            margin-bottom: 25px;
-        }
-
-        .post_actionsWrapper {
-            opacity: 1;
-        }
-    }
-
-    &.fullmode {
-        max-width: none;
+    &.open {
         height: 100%;
-
-        background-color: transparent;
-
-        filter: none!important;
-        outline: none!important;
-
-        .post_actionsIndicator {
-            opacity: 0;
-        }
-
-        .post_actionsWrapper {
-            opacity: 1;
-        }
-
-        .wrapper {
-            height: 100%;
-
-            .post_content {
-                height: 100%;
-
-                .post_attachments {
-                    .carousel-root {
-                        .carousel {
-                            height: 100%;
-                            min-height: 70vh;
-
-                            .addition {
-                                height: 100%;
-                                min-height: 70vh;
-
-                                .plyr {
-                                    height: 100%;
-                                }
-
-                                img,
-                                video {
-                                    height: 100%;
-                                    object-fit: contain;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
     }
 
     .wrapper {
@@ -134,7 +21,6 @@
         align-items: center;
 
         width: 100%;
-        padding: 17px;
 
         transition: all 0.2s ease-in-out;
 
@@ -143,13 +29,20 @@
         }
     }
 
-    &:hover {
-        .wrapper {
-            margin-bottom: 25px;
-        }
+    border-bottom: 2px solid var(--border-color);
 
-        .post_actionsWrapper {
-            opacity: 1;
-        }
+    padding-bottom: 10px;
+
+    &:first-child {
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
+
+    &:last-child {
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+
+        border-bottom: none;
+        padding-bottom: 0;
     }
 }
\ No newline at end of file