diff --git a/src/api/StringAPI.ts b/src/api/StringAPI.ts
index 64d5129..0c654ac 100644
--- a/src/api/StringAPI.ts
+++ b/src/api/StringAPI.ts
@@ -71,6 +71,10 @@ const getNumberOfLines = (input: string) => {
     return input.split('\n').length;
 };
 
+function capitalizeFirstLetter(input: string) {
+    return input.charAt(0).toUpperCase() + input.slice(1);
+}
+
 export default {
     isValidEmail,
     queryString,
@@ -81,4 +85,5 @@ export default {
     validateUrl,
     getNumberOfLines,
     isEmpty,
+    capitalizeFirstLetter,
 };
diff --git a/src/components/notifyItem/index.tsx b/src/components/notifyItem/index.tsx
index 7808f3f..028690e 100644
--- a/src/components/notifyItem/index.tsx
+++ b/src/components/notifyItem/index.tsx
@@ -7,14 +7,18 @@ import classNames from 'classnames';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 
 import { INotifyItemProps } from './INotifyItemProps';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import useTheme from '@material-ui/core/styles/useTheme';
 import { useStyles } from './notifyItemStyles';
 import Typography from '@material-ui/core/Typography';
 import { useNavigate } from 'react-router';
+import StringAPI from 'api/StringAPI';
 
 export function NotifyItemComponent(props: INotifyItemProps) {
     const classes = useStyles();
     const navigate = useNavigate();
+    const theme = useTheme();
+
     const { description, fullName, avatar, isSeen, id, notifierUserId, url, deleteNotify } = props;
     const handleSeenNotify = (event: any) => {
         event.preventDefault();
@@ -50,10 +54,22 @@ export function NotifyItemComponent(props: INotifyItemProps) {
             </ListItemAvatar>
             <ListItemText
                 className={classes.itemText}
-                primary={fullName}
+                primary={
+                    <Typography
+                        sx={{ textTransform: 'capitalize', color: theme.palette.text.primary }}
+                        variant="subtitle1"
+                        noWrap
+                    >
+                        {fullName}
+                    </Typography>
+                }
                 secondary={
-                    <Typography variant="body2" noWrap>
-                        {description}
+                    <Typography
+                        sx={{ textTransform: 'none', color: theme.palette.text.secondary }}
+                        variant="body2"
+                        noWrap
+                    >
+                        {StringAPI.capitalizeFirstLetter(description)}
                     </Typography>
                 }
             />
diff --git a/src/components/roomItem/IRoomItemProps.ts b/src/components/roomItem/IRoomItemProps.ts
index 0da26c7..3ace7ac 100644
--- a/src/components/roomItem/IRoomItemProps.ts
+++ b/src/components/roomItem/IRoomItemProps.ts
@@ -10,9 +10,4 @@ export interface IRoomItemProps {
     closeRoomList: () => void;
 
     openRoom: (roomId: string) => any;
-
-    /**
-     * Material ui styles
-     */
-    classes?: any;
 }
diff --git a/src/components/roomItem/IRoomItemState.ts b/src/components/roomItem/IRoomItemState.ts
deleted file mode 100644
index 85e349b..0000000
--- a/src/components/roomItem/IRoomItemState.ts
+++ /dev/null
@@ -1 +0,0 @@
-export interface IRoomItemState {}
diff --git a/src/components/roomItem/index.tsx b/src/components/roomItem/index.tsx
index c333254..660cae4 100644
--- a/src/components/roomItem/index.tsx
+++ b/src/components/roomItem/index.tsx
@@ -1,67 +1,67 @@
+import React from 'react';
 import ListItemText from '@material-ui/core/ListItemText';
-import { withStyles } from '@material-ui/core/styles';
 import UserAvatar from 'components/userAvatar/UserAvatarComponent';
-import React, { Component } from 'react';
 import classNames from 'classnames';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Badge from '@material-ui/core/Badge';
 import Typography from '@material-ui/core/Typography';
-
+import useTheme from '@material-ui/core/styles/useTheme';
 import { IRoomItemProps } from './IRoomItemProps';
-import { IRoomItemState } from './IRoomItemState';
-import { roomItemStyles } from './roomItemStyles';
 import { Button } from '@material-ui/core';
+import { useStyles } from './roomItemStyles';
 
-export class RoomItemComponent extends Component<IRoomItemProps, IRoomItemState> {
-    constructor(props: IRoomItemProps) {
-        super(props);
-
-        // Defaul state
-        this.state = {};
-
-        // Binding functions to `this`
-        this.handleOpenRoom = this.handleOpenRoom.bind(this);
-    }
+export function RoomItemComponent(props: IRoomItemProps) {
+    const classes = useStyles();
+    const theme = useTheme();
 
-    handleOpenRoom = (event: any) => {
+    const handleOpenRoom = (event: any) => {
         event.preventDefault();
-        const { openRoom, room, closeRoomList } = this.props;
+        const { openRoom, room, closeRoomList } = props;
         const roomId: string = room.get('roomId');
         openRoom(roomId);
         closeRoomList();
     };
 
-    render() {
-        const { avatar, fullName, classes, room } = this.props;
-        const roomId: string = room.get('objectId');
-        const unreadCount: string = room.get('unreadCount');
-        const lastMessageText = room.getIn(['lastMessage', 'text'], '');
-        return (
-            <Button
-                key={`room-item-${roomId}`}
-                className={classNames(classes.listItem)}
-                onClick={this.handleOpenRoom}
-                fullWidth
-                component={'a'}
-            >
-                <ListItemAvatar>
-                    <UserAvatar fullName={fullName} size={40} fileName={avatar} />
-                </ListItemAvatar>
-                <ListItemText
-                    className={classes.itemText}
-                    primary={fullName}
-                    secondary={
-                        <Typography variant="body2" noWrap>
-                            {lastMessageText}
-                        </Typography>
-                    }
-                />
+    const { avatar, fullName, room } = props;
+    const roomId: string = room.get('objectId');
+    const unreadCount: string = room.get('unreadCount');
+    const lastMessageText = room.getIn(['lastMessage', 'text'], '');
+    return (
+        <Button
+            key={`room-item-${roomId}`}
+            className={classNames(classes.listItem)}
+            onClick={handleOpenRoom}
+            fullWidth
+            component={'a'}
+        >
+            <ListItemAvatar>
+                <UserAvatar fullName={fullName} size={40} fileName={avatar} />
+            </ListItemAvatar>
+            <ListItemText
+                className={classes.itemText}
+                primary={
+                    <Typography
+                        sx={{ textTransform: 'capitalize', color: theme.palette.text.primary }}
+                        variant="subtitle1"
+                        noWrap
+                    >
+                        {fullName}
+                    </Typography>
+                }
+                secondary={
+                    <Typography
+                        sx={{ textTransform: 'none', color: theme.palette.text.secondary }}
+                        variant="body2"
+                        noWrap
+                    >
+                        {lastMessageText}
+                    </Typography>
+                }
+            />
 
-                <Badge badgeContent={unreadCount} color="secondary"></Badge>
-            </Button>
-        );
-    }
+            <Badge badgeContent={unreadCount} color="secondary"></Badge>
+        </Button>
+    );
 }
 
-// - Connect component to redux store
-export default withStyles(roomItemStyles)(RoomItemComponent);
+export default RoomItemComponent;
diff --git a/src/components/roomItem/roomItemStyles.ts b/src/components/roomItem/roomItemStyles.ts
index a5f432f..db54795 100644
--- a/src/components/roomItem/roomItemStyles.ts
+++ b/src/components/roomItem/roomItemStyles.ts
@@ -3,10 +3,10 @@
 // This software is released under the MIT License.
 // https://opensource.org/licenses/MIT
 
-import { Theme } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core';
 import { createStyles } from '@material-ui/styles';
 
-export const roomItemStyles = (theme: Theme) =>
+export const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         root: {
             width: '100%',
@@ -27,7 +27,6 @@ export const roomItemStyles = (theme: Theme) =>
         },
         listItem: {
             padding: '12px 20px !important',
-            'text-transform': 'none !important',
             '&::not(:last-child)': {
                 marginBottom: 1,
             },
@@ -55,4 +54,5 @@ export const roomItemStyles = (theme: Theme) =>
             marginLeft: 10,
             color: theme.palette.common.black,
         },
-    });
+    }),
+);
diff --git a/src/containers/postPage/IPostPageProps.ts b/src/containers/postPage/IPostPageProps.ts
deleted file mode 100644
index aca1918..0000000
--- a/src/containers/postPage/IPostPageProps.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Map } from 'immutable';
-import { User } from 'core/domain/users/user';
-
-export interface IPostPageProps {
-    /**
-     * Load the post
-     */
-    loadPost?: () => any;
-
-    /**
-     * Load user profile
-     */
-    loadUserInfo?: () => any;
-
-    /**
-     * Route match
-     */
-    match?: any;
-
-    /**
-     * User information
-     */
-    userInfo?: User;
-
-    /**
-     * Post
-     */
-    post?: Map<string, any>;
-
-    /**
-     * Classes style
-     */
-    classes?: any;
-}
diff --git a/src/containers/postPage/IPostPageState.ts b/src/containers/postPage/IPostPageState.ts
deleted file mode 100644
index 15e558a..0000000
--- a/src/containers/postPage/IPostPageState.ts
+++ /dev/null
@@ -1 +0,0 @@
-export interface IPostPageState {}
diff --git a/src/containers/postPage/index.tsx b/src/containers/postPage/index.tsx
index fe2a45e..67de42a 100644
--- a/src/containers/postPage/index.tsx
+++ b/src/containers/postPage/index.tsx
@@ -1,76 +1,38 @@
-
-import withStyles from '@material-ui/core/styles/withStyles';
 import { Map } from 'immutable';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import PostComponent from 'components/post';
 import * as postActions from 'store/actions/postActions';
-import * as userActions from 'store/actions/userActions';
-
-import { IPostPageProps } from './IPostPageProps';
-import { IPostPageState } from './IPostPageState';
-import { postPageStyles } from './postPageStyles';
-
-export class PostPageComponent extends Component<IPostPageProps, IPostPageState> {
-    static propTypes = {};
-
-    constructor(props: IPostPageProps) {
-        super(props);
-
-        // Defaul state
-        this.state = {};
-
-        // Binding functions to `this`
-    }
-    componentDidMount() {
-        const { loadPost, loadUserInfo } = this.props;
-        if (loadPost && loadUserInfo) {
-            loadPost();
-            loadUserInfo();
-        }
-    }
-
-    render() {
-        const { classes, post, userInfo } = this.props;
-        if (!userInfo || !post) {
-            return <div />;
-        }
-        return (
-            <div className={classes.container}>
-                <div className={classes.postBox} key={`post-stream-column-${userInfo.userId}`}>
-                    <PostComponent key={`${post.get('id')}-stream-div-post`} post={post} />
-                </div>
+import { useParams } from 'react-router';
+import { userSelector } from 'store/reducers/users/userSelector';
+import { postSelector } from 'store/reducers/posts/postSelector';
+import { useStyles } from './postPageStyles';
+
+const selectUserProfileById = userSelector.selectUserProfileById();
+const selectPost = postSelector.selectPost();
+
+export function PostPageComponent() {
+    const { userId, postId } = useParams();
+    const classes = useStyles();
+    // Dispatcher
+    const dispatch = useDispatch();
+    const loadPost = () => dispatch(postActions.dbGetPostById(userId, postId));
+
+    // Selector
+    const userInfo = useSelector((state: Map<string, any>) => selectUserProfileById(state, { userId }));
+    const post = useSelector((state: Map<string, any>) => selectPost(state, { postId }));
+
+    React.useEffect(() => {
+        loadPost();
+    });
+
+    return (
+        <div className={classes.container}>
+            <div className={classes.postBox} key={`post-stream-column-${userInfo.get('userId', '')}`}>
+                <PostComponent key={`${post.get('id')}-stream-div-post`} post={post} />
             </div>
-        );
-    }
+        </div>
+    );
 }
 
-/**
- * Map dispatch to props
- */
-const mapDispatchToProps = (dispatch: any, ownProps: IPostPageProps) => {
-    const { userId, postId } = ownProps.match.params;
-    return {
-        loadPost: () => dispatch(postActions.dbGetPostById(userId, postId)),
-        loadUserInfo: () => dispatch(userActions.dbGetUserInfoByUserId(userId)),
-    };
-};
-
-/**
- * Map state to props
- */
-const mapStateToProps = (state: Map<string, any>, ownProps: IPostPageProps) => {
-    const { userId, postId } = ownProps.match.params;
-    const userInfo: Map<string, any> = state.getIn(['state', 'user', 'entities', userId], Map({}));
-    const post: Map<string, any> = state.getIn(['post', 'entities', postId], Map({}));
-    return {
-        userInfo: userInfo.toJS(),
-        post,
-    };
-};
-
-// - Connect component to redux store
-export default connect<{}, {}, any, any>(
-    mapStateToProps,
-    mapDispatchToProps,
-)(withStyles(postPageStyles as any)(PostPageComponent as any) as any);
+export default PostPageComponent;
diff --git a/src/containers/postPage/postPageStyles.ts b/src/containers/postPage/postPageStyles.ts
index 1f29b58..a9d3c3f 100644
--- a/src/containers/postPage/postPageStyles.ts
+++ b/src/containers/postPage/postPageStyles.ts
@@ -1,5 +1,6 @@
-/* eslint-disable no-useless-computed-key */
-export const postPageStyles = (theme: any) => ({
+import { makeStyles, Theme } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme: Theme) => ({
     root: {
         position: 'relative',
     },
@@ -54,4 +55,4 @@ export const postPageStyles = (theme: any) => ({
             width: '100%',
         },
     },
-});
+}));
diff --git a/src/routes/HomeRouter.tsx b/src/routes/HomeRouter.tsx
index 2b8e2d2..78f2756 100644
--- a/src/routes/HomeRouter.tsx
+++ b/src/routes/HomeRouter.tsx
@@ -73,6 +73,10 @@ export const homeRoutes = [
         path: '/:userId/posts/:postId/:tag?',
         element: <AsyncPostPage />,
     },
+    {
+        path: '/:userId/posts/:postId',
+        element: <AsyncPostPage />,
+    },
     {
         path: '/search/post',
         element: <AsyncSearchPost />,
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 8691a32..baa8ed2 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,5 @@
-import { Navigate } from 'react-router-dom';
 import React from 'react';
+import { Navigate } from 'react-router-dom';
 import Loadable from 'react-loadable';
 import { PartialRouteObject } from 'react-router';
 import { MasterLoadingComponent } from 'components/masterLoading';
@@ -43,7 +43,7 @@ const AsyncMaster: any = Loadable({
 const routes = (isLoggedIn: boolean) => [
     {
         path: '/signup',
-        element: <AsyncSignup />,
+        element: isLoggedIn ? <Navigate to="/" /> : <AsyncSignup />,
     },
     {
         path: '/emailVerification',