diff --git a/src/containers/profile/ProfilePageStats/index.tsx b/src/containers/profile/ProfilePageStats/index.tsx
new file mode 100644
index 00000000..53ae4674
--- /dev/null
+++ b/src/containers/profile/ProfilePageStats/index.tsx
@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+
+interface Props {}
+
+const Row: FC<{ count: number; title: string }> = ({ count, title }) => (
+
+
{count > 999 ? '999+' : count}
+
{title}
+
+);
+
+const ProfilePageStats: FC = () => (
+
+
+
+
+
+);
+
+export { ProfilePageStats };
diff --git a/src/containers/profile/ProfilePageStats/styles.module.scss b/src/containers/profile/ProfilePageStats/styles.module.scss
new file mode 100644
index 00000000..a943ab8a
--- /dev/null
+++ b/src/containers/profile/ProfilePageStats/styles.module.scss
@@ -0,0 +1,43 @@
+@import "~/styles/variables";
+
+.wrap {
+ @include outer_shadow;
+
+ padding: $gap;
+ background: $content_bg;
+ border-radius: $radius;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+ grid-row-gap: $gap;
+ grid-column-gap: $gap;
+ grid-auto-flow: row;
+
+ & > .row:not(:last-child) {
+ margin-bottom: $gap;
+ }
+}
+
+.row {
+ width: 100%;
+ background-color: lighten($content_bg, 4%);
+ border-radius: $radius;
+ padding: $gap;
+ box-sizing: border-box;
+ height: 100%;
+}
+
+.counter {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font: $font_32_bold;
+ height: 60px;
+}
+
+.title {
+ font: $font_12_semibold;
+ text-align: center;
+ word-wrap: break-word;
+ opacity: 0.5;
+}
diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx
index 24b6dca9..27f1df73 100644
--- a/src/layouts/ProfileLayout/index.tsx
+++ b/src/layouts/ProfileLayout/index.tsx
@@ -11,6 +11,7 @@ import { FlowGrid } from '~/components/flow/FlowGrid';
import { FlowLayout } from '~/layouts/FlowLayout';
import { Sticky } from '~/components/containers/Sticky';
import { selectFlow } from '~/redux/flow/selectors';
+import { ProfilePageStats } from '~/containers/profile/ProfilePageStats';
type Props = RouteComponentProps<{ username: string }> & {};
@@ -34,7 +35,12 @@ const ProfileLayout: FC = ({
diff --git a/src/layouts/ProfileLayout/styles.module.scss b/src/layouts/ProfileLayout/styles.module.scss
index aa05c21f..5f1f1c20 100644
--- a/src/layouts/ProfileLayout/styles.module.scss
+++ b/src/layouts/ProfileLayout/styles.module.scss
@@ -14,3 +14,7 @@
.right {
}
+
+.row {
+ margin-bottom: $gap;
+}