diff --git a/src/atoms/postsAtom.ts b/src/atoms/postsAtom.ts
index 0abcf0d..b875474 100644
--- a/src/atoms/postsAtom.ts
+++ b/src/atoms/postsAtom.ts
@@ -15,22 +15,23 @@ export type Post = {
 	createdAt: Timestamp
 }
 
+export type PostVote = {
+	id: string
+	postId: string
+	communityId: string
+	voteValue: number
+}
+
 interface PostState {
 	selectedPost: Post | null
 	posts: Post[]
-	// postVotes: PostVote[]
-	// postsCache: {
-	// 	[key: string]: Post[]
-	// }
-	// postUpdateRequired: boolean
+	postVotes: PostVote[]
 }
 
 export const defaultPostState: PostState = {
 	selectedPost: null,
 	posts: [],
-	// postVotes: [],
-	// postsCache: {},
-	// postUpdateRequired: true,
+	postVotes: [],
 }
 
 export const postState = atom<PostState>({
diff --git a/src/components/community/About.tsx b/src/components/community/About.tsx
index 0e8b11f..e245fc6 100644
--- a/src/components/community/About.tsx
+++ b/src/components/community/About.tsx
@@ -1,4 +1,4 @@
-import { Community } from '@/src/atoms/communitiesAtom'
+import { Community, communityState } from '@/src/atoms/communitiesAtom'
 import {
 	Box,
 	Button,
@@ -12,14 +12,55 @@ import {
 	Image,
 	Spinner,
 } from '@chakra-ui/react'
-import React from 'react'
+import React, { useRef, useState } from 'react'
 import { HiOutlineDotsHorizontal } from 'react-icons/hi'
+import { FaReddit } from 'react-icons/fa'
+import { RiCakeLine } from 'react-icons/ri'
+import Link from 'next/link'
+import moment from 'moment'
+import { useAuthState } from 'react-firebase-hooks/auth'
+import { auth, firestore, storage } from '@/src/firebase/clientApp'
+import useSelectFile from '@/src/hooks/useSelectFile'
+import { useSetRecoilState } from 'recoil'
+import { getDownloadURL, ref, uploadString } from 'firebase/storage'
+import { doc, updateDoc } from 'firebase/firestore'
 
 type AboutProps = {
 	communityData: Community
 }
 
 const About: React.FC<AboutProps> = ({ communityData }) => {
+	const [user] = useAuthState(auth)
+	const selectedFileRef = useRef<HTMLInputElement>(null)
+	const { selectedFile, setSelectedFile, onSelectFile } = useSelectFile()
+	const [uploadingImage, setUploadingImage] = useState(false)
+	const setCommuityStateValue = useSetRecoilState(communityState)
+
+	const onUpdateImage = async () => {
+		if (!selectedFile) return
+		setUploadingImage(true)
+		try {
+			const imageRef = ref(storage, `communities/${communityData.id}/image`)
+			await uploadString(imageRef, selectedFile, 'data_url')
+			const downloadURL = await getDownloadURL(imageRef)
+
+			await updateDoc(doc(firestore, 'communities', communityData.id), {
+				imageURL: downloadURL,
+			})
+			console.log('HERE IS DOWNLOAD URL', downloadURL)
+
+			setCommuityStateValue(prev => ({
+				...prev,
+				currentCommunity: {
+					...prev.currentCommunity,
+					imageURL: downloadURL,
+				} as Community,
+			}))
+		} catch (error: any) {
+			console.log('onUpdateImage error', error.message)
+		}
+		setUploadingImage(false)
+	}
 	return (
 		<Box position='sticky' top='14px'>
 			<Flex
@@ -35,6 +76,92 @@ const About: React.FC<AboutProps> = ({ communityData }) => {
 				</Text>
 				<Icon as={HiOutlineDotsHorizontal} cursor='pointer' />
 			</Flex>
+			<Flex direction='column' p={3} bg='white' borderRadius='0px 0px 4px 4px'>
+				<Stack>
+					<Flex width='100%' p={2} fontSize='10pt' fontWeight={700}>
+						<Flex direction='column' flexGrow={1}>
+							<Text>{communityData.numberOfMembers.toLocaleString()}</Text>
+							<Text>Members</Text>
+						</Flex>
+						<Flex direction='column' flexGrow={1}>
+							<Text>1</Text>
+							<Text>Online</Text>
+						</Flex>
+					</Flex>
+					<Divider />
+					<Flex
+						align='center'
+						width='100%'
+						p={1}
+						fontWeight={500}
+						fontSize='10pt'
+					>
+						<Icon as={RiCakeLine} mr={2} fontSize={18} />
+						{communityData?.createdAt && (
+							<Text>
+								Created{' '}
+								{moment(
+									new Date(communityData.createdAt.seconds * 1000)
+								).format('MMM DD, YYYY')}
+							</Text>
+						)}
+					</Flex>
+					<Link href={`/r/${communityData.id}/submit`}>
+						<Button w='100%' mt={3} height='30px'>
+							Create post
+						</Button>
+					</Link>
+					{user?.uid === communityData.creatorId && (
+						<>
+							<Divider />
+							<Stack fontSize='10pt' spacing={1}>
+								<Text fontWeight={600}>Admin</Text>
+								<Flex align='center' justify='space-between'>
+									<Text
+										color='blue.500'
+										cursor='pointer'
+										_hover={{ textDecoration: 'underline' }}
+										onClick={() => selectedFileRef.current?.click()}
+									>
+										Change Image
+									</Text>
+									{communityData?.imageURL || selectedFile ? (
+										<Image
+											borderRadius='full'
+											boxSize='40px'
+											src={selectedFile || communityData?.imageURL}
+											alt='Community IMG'
+										/>
+									) : (
+										<Icon
+											as={FaReddit}
+											fontSize={40}
+											color='brand.100'
+											mr={2}
+										/>
+									)}
+								</Flex>
+								{selectedFile &&
+									(uploadingImage ? (
+										<Spinner />
+									) : (
+										<Text cursor='pointer' onClick={onUpdateImage}>
+											Save Changes
+										</Text>
+									))}
+								<input
+									id='file-upload'
+									type='file'
+									accept='image/x-png,image/gif,image/jpeg'
+									hidden
+									ref={selectedFileRef}
+									onChange={onSelectFile}
+								/>
+							</Stack>
+						</>
+					)}
+				</Stack>
+			</Flex>
 		</Box>
 	)
 }
diff --git a/src/components/community/Header.tsx b/src/components/community/Header.tsx
index 95dd38e..bee3eb5 100644
--- a/src/components/community/Header.tsx
+++ b/src/components/community/Header.tsx
@@ -21,11 +21,11 @@ const Header: React.FC<HeaderProps> = ({ communityData }) => {
 			<Box height='50%' bg='blue.400' />
 			<Flex justifyContent='center' bg='white' height='50%'>
 				<Flex width='95%' maxWidth='860px'>
-					{communityData.imageURL ? (
+					{communityStateValue.currentCommunity?.imageURL ? (
 						<Image
 							borderRadius='full'
 							boxSize='66px'
-							src={communityData.imageURL}
+							src={communityStateValue.currentCommunity.imageURL}
 							alt='Dan Abramov'
 							position='relative'
 							top={-3}
diff --git a/src/components/navbar/rightContent/UserMenu.tsx b/src/components/navbar/rightContent/UserMenu.tsx
index 50f30e6..7754454 100644
--- a/src/components/navbar/rightContent/UserMenu.tsx
+++ b/src/components/navbar/rightContent/UserMenu.tsx
@@ -26,12 +26,10 @@ type UserMenuProps = {
 }
 
 const UserMenu: React.FC<UserMenuProps> = ({ user }) => {
-	const resetCommunityState = useResetRecoilState(communityState)
 	const setAuthModalState = useSetRecoilState(authModalState)
 
 	const logout = async () => {
 		await signOut(auth)
-		resetCommunityState()
 	}
 
 	return (
diff --git a/src/components/posts/NewPostForm.tsx b/src/components/posts/NewPostForm.tsx
index 258961d..16cb93a 100644
--- a/src/components/posts/NewPostForm.tsx
+++ b/src/components/posts/NewPostForm.tsx
@@ -35,6 +35,7 @@ import ImageUpload from './postForm/ImageUpload'
 import { Post } from '@/src/atoms/postsAtom'
 import { firestore, storage } from '@/src/firebase/clientApp'
 import { ref, uploadString, getDownloadURL } from 'firebase/storage'
+import useSelectFile from '@/src/hooks/useSelectFile'
 
 type NewPostFormProps = {
 	user: User
@@ -75,9 +76,9 @@ const NewPostForm: React.FC<NewPostFormProps> = ({ user }) => {
 		title: '',
 		body: '',
 	})
-	const [selectedFile, setSelectedFile] = useState<string>()
 	const [loading, setLoading] = useState(false)
 	const [error, setError] = useState(false)
+	const { setSelectedFile, selectedFile, onSelectFile } = useSelectFile()
 
 	const handleCreatePost = async () => {
 		const { communityId } = router.query
@@ -112,20 +113,6 @@ const NewPostForm: React.FC<NewPostFormProps> = ({ user }) => {
 		setLoading(false)
 	}
 
-	const onSelectImage = (event: React.ChangeEvent<HTMLInputElement>) => {
-		const reader = new FileReader()
-
-		if (event.target.files?.[0]) {
-			reader.readAsDataURL(event.target.files[0])
-		}
-
-		reader.onload = readerEvent => {
-			if (readerEvent.target?.result) {
-				setSelectedFile(readerEvent.target.result as string)
-			}
-		}
-	}
-
 	const onTextChange = (
 		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
 	) => {
@@ -164,7 +151,7 @@ const NewPostForm: React.FC<NewPostFormProps> = ({ user }) => {
 						selectedFile={selectedFile}
 						setSelectedFile={setSelectedFile}
 						setSelectedTab={setSelectedTab}
-						onSelectImage={onSelectImage}
+						onSelectImage={onSelectFile}
 					/>
 				)}
 			</Flex>
diff --git a/src/components/posts/PostItem.tsx b/src/components/posts/PostItem.tsx
index a2e6592..37da171 100644
--- a/src/components/posts/PostItem.tsx
+++ b/src/components/posts/PostItem.tsx
@@ -26,14 +26,20 @@ import moment from 'moment'
 import { async } from '@firebase/util'
 import { log } from 'console'
 import { AiOutlineDelete } from 'react-icons/ai'
+import { useRouter } from 'next/router'
 
 type PostItemProps = {
 	post: Post
 	userIsCreator: boolean
 	userVoteValue?: number
-	onVote: () => {}
+	onVote: (
+		event: React.MouseEvent<SVGElement, MouseEvent>,
+		post: Post,
+		vote: number,
+		communityId: string
+	) => void
 	onDeletePost: (post: Post) => Promise<boolean>
-	onSelectPost: () => void
+	onSelectPost?: (post: Post) => void
 }
 
 const PostItem: React.FC<PostItemProps> = ({
@@ -46,10 +52,15 @@ const PostItem: React.FC<PostItemProps> = ({
 }) => {
 	const [loadingImage, setLoadingImage] = useState(true)
 	const [loadingDelete, setLoadingDelete] = useState(false)
+	const router = useRouter()
+	const singlePostPage = !onSelectPost
 
 	const [error, setError] = useState(false)
 
-	const handleDelete = async () => {
+	const handleDelete = async (
+		event: React.MouseEvent<HTMLDivElement, MouseEvent>
+	) => {
+		event.stopPropagation()
 		setLoadingDelete(true)
 		try {
 			const success = await onDeletePost(post)
@@ -57,6 +68,9 @@ const PostItem: React.FC<PostItemProps> = ({
 				throw new Error('Failed to delete post')
 			}
 			console.log('Post was succesfuly delited')
+			if (singlePostPage) {
+				router.push(`/r/${post.communityId}`)
+			}
 		} catch (error: any) {
 			setError(error.message)
 			console.log('deleteError', error)
@@ -68,19 +82,19 @@ const PostItem: React.FC<PostItemProps> = ({
 		<Flex
 			border='1px solid'
 			bg='white'
-			borderColor='gray.300'
-			borderRadius={4}
-			cursor='pointer'
-			_hover={{ borderColor: 'gray:500' }}
-			onClick={onSelectPost}
+			borderColor={singlePostPage ? 'white' : 'gray.300'}
+			borderRadius={singlePostPage ? '4px 4px 0px 0px' : '4px'}
+			cursor={singlePostPage ? 'unset' : 'pointer'}
+			_hover={{ borderColor: singlePostPage ? 'none' : 'gray.500' }}
+			onClick={() => onSelectPost && onSelectPost(post)}
 		>
 			<Flex
 				direction='column'
 				align='center'
-				bg='gray.100'
+				bg={singlePostPage ? 'none' : 'gray.100'}
 				p={2}
 				width='40px'
-				borderRadius={4}
+				borderRadius={singlePostPage ? '0' : '3px 0px 0px 3px'}
 			>
 				<Icon
 					as={
@@ -89,7 +103,7 @@ const PostItem: React.FC<PostItemProps> = ({
 					color={userVoteValue === 1 ? 'brand.100' : 'gray.400'}
 					fontSize={22}
 					cursor='pointer'
-					onClick={onVote}
+					onClick={event => onVote(event, post, 1, post.communityId)}
 				/>
 				<Text fontSize='9pt' fontWeight={600}>
 					{post.voteStatus}
@@ -103,7 +117,7 @@ const PostItem: React.FC<PostItemProps> = ({
 					color={userVoteValue === -1 ? '#4379FF' : 'gray.400'}
 					fontSize={22}
 					cursor='pointer'
-					onClick={onVote}
+					onClick={event => onVote(event, post, -1, post.communityId)}
 				/>
 			</Flex>
 			<Flex direction='column' width='100%'>
diff --git a/src/components/posts/Posts.tsx b/src/components/posts/Posts.tsx
index d0ba3b6..d50b2f1 100644
--- a/src/components/posts/Posts.tsx
+++ b/src/components/posts/Posts.tsx
@@ -1,14 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Community } from '@/src/atoms/communitiesAtom'
-import {
-	collection,
-	doc,
-	getDoc,
-	getDocs,
-	orderBy,
-	query,
-	where,
-} from 'firebase/firestore'
+import { collection, getDocs, orderBy, query, where } from 'firebase/firestore'
 import { auth, firestore } from '@/src/firebase/clientApp'
 import usePosts from '@/src/hooks/usePosts'
 import { Post } from '@/src/atoms/postsAtom'
@@ -68,7 +60,10 @@ const Posts: React.FC<PostsProps> = ({ communityData }) => {
 							key={item.id}
 							post={item}
 							userIsCreator={user?.uid === item.creatorId}
-							userVoteValue={undefined}
+							userVoteValue={
+								postStateValue.postVotes.find(vote => vote.postId === item.id)
+									?.voteValue
+							}
 							onVote={onVote}
 							onSelectPost={onSelectPost}
 							onDeletePost={onDeletePost}
diff --git a/src/components/posts/comments/CommentInput.tsx b/src/components/posts/comments/CommentInput.tsx
new file mode 100644
index 0000000..ac4101e
--- /dev/null
+++ b/src/components/posts/comments/CommentInput.tsx
@@ -0,0 +1,73 @@
+import { User } from 'firebase/auth'
+import React from 'react'
+import { Flex, Textarea, Button, Text } from '@chakra-ui/react'
+import AuthButtons from '../../navbar/rightContent/AuthButtons'
+
+type CommentInputProps = {
+	commentText: string
+	setCommentText: (value: string) => void
+	user: User
+	createLoading: boolean
+	onCreateComment: (commentText: string) => void
+}
+
+const CommentInput: React.FC<CommentInputProps> = ({
+	commentText,
+	setCommentText,
+	user,
+	createLoading,
+	onCreateComment,
+}) => {
+	return (
+		<Flex direction='column' position='relative' mt={4}>
+			{user ? (
+				<>
+					<Text mb={1}>
+						Comment as{' '}
+						<span style={{ color: '#3182CE' }}>
+							{user?.email?.split('@')[0]}
+						</span>
+					</Text>
+					<Textarea
+						value={commentText}
+						onChange={event => setCommentText(event.target.value)}
+						placeholder='What are your thoughts?'
+						fontSize='10pt'
+						borderRadius={4}
+						minHeight='100px'
+						pb={10}
+						_placeholder={{ color: 'gray.500' }}
+						_focus={{
+							outline: 'none',
+							bg: 'white',
+							border: '1px solid black',
+						}}
+					/>
+					<Flex mt={0.5} justify='flex-end' p='8px'>
+						<Button
+							height='28px'
+							disabled={!commentText.length}
+							isLoading={createLoading}
+							onClick={() => onCreateComment(commentText)}
+						>
+							Comment
+						</Button>
+					</Flex>
+				</>
+			) : (
+				<Flex
+					align='center'
+					justify='space-between'
+					borderRadius={2}
+					border='1px solid'
+					borderColor='gray.100'
+					p={4}
+				>
+					<Text fontWeight={600}>Log in or sign up to leave a comment</Text>
+					<AuthButtons />
+				</Flex>
+			)}
+		</Flex>
+	)
+}
+export default CommentInput
diff --git a/src/components/posts/comments/CommentItem.tsx b/src/components/posts/comments/CommentItem.tsx
new file mode 100644
index 0000000..047bdde
--- /dev/null
+++ b/src/components/posts/comments/CommentItem.tsx
@@ -0,0 +1,53 @@
+import { Box, Flex, Icon, Stack, Text } from '@chakra-ui/react'
+import { Timestamp } from 'firebase/firestore'
+import moment from 'moment'
+import React from 'react'
+import { FaReddit } from 'react-icons/fa'
+
+export type Comment = {
+	id: string
+	creatorId: string
+	creatorDisplayText: string
+	communityId: string
+	postId: string
+	postTitle: string
+	text: string
+	createdAt: Timestamp
+}
+
+type CommentItemProps = {
+	comment: Comment
+	onDeleteComment: (comment: Comment) => void
+	loadingDelete: boolean
+	userId: string
+}
+
+const CommentItem: React.FC<CommentItemProps> = ({
+	comment,
+	onDeleteComment,
+	loadingDelete,
+	userId,
+}) => {
+	return (
+		<Flex>
+			<Box mr={2}>
+				<Icon as={FaReddit} fontSize={30} color='gray.300' />
+			</Box>
+			<Stack spacing={1}>
+				<Stack direction='row' align='center' spacing={2} fontSize='8pt'>
+					<Text
+						fontWeight={700}
+						_hover={{ textDecoration: 'underline', cursor: 'pointer' }}
+					>
+						{comment.creatorDisplayText}
+					</Text>
+					<Text color='gray.600'>
+						{moment(new Date(comment.createdAt.seconds * 1000)).fromNow()}
+					</Text>
+				</Stack>
+				<Text fontSize='10pt'>{comment.text}</Text>
+			</Stack>
+		</Flex>
+	)
+}
+export default CommentItem
diff --git a/src/components/posts/comments/Comments.tsx b/src/components/posts/comments/Comments.tsx
new file mode 100644
index 0000000..cdd5b7c
--- /dev/null
+++ b/src/components/posts/comments/Comments.tsx
@@ -0,0 +1,171 @@
+import { Post, postState } from '@/src/atoms/postsAtom'
+import { firestore } from '@/src/firebase/clientApp'
+import {
+	Box,
+	Text,
+	Flex,
+	SkeletonCircle,
+	SkeletonText,
+	Stack,
+} from '@chakra-ui/react'
+import { User } from 'firebase/auth'
+import {
+	collection,
+	doc,
+	getDocs,
+	increment,
+	orderBy,
+	query,
+	serverTimestamp,
+	Timestamp,
+	where,
+	writeBatch,
+} from 'firebase/firestore'
+import { type } from 'os'
+import React, { useEffect, useState } from 'react'
+import { useSetRecoilState } from 'recoil'
+import CommentInput from './CommentInput'
+import CommentItem, { Comment } from './commentItem'
+
+type CommentsProps = {
+	user: User
+	selectedPost: Post | null
+	communityId: string
+}
+
+const Comments: React.FC<CommentsProps> = ({
+	user,
+	selectedPost,
+	communityId,
+}) => {
+	const [commentText, setCommentText] = useState('')
+	const [comments, setComments] = useState<Comment[]>([])
+	const [createLoading, setCreateLoading] = useState(false)
+	const [fetchLoading, setFetchLoading] = useState(true)
+	const setPostState = useSetRecoilState(postState)
+
+	const onCreateComment = async (commentText: string) => {
+		setCreateLoading(true)
+		try {
+			const batch = writeBatch(firestore)
+			const commentDocRef = doc(collection(firestore, 'comments'))
+			const newComment: Comment = {
+				id: commentDocRef.id,
+				creatorId: user.uid,
+				creatorDisplayText: user.email!.split('@')[0],
+				communityId,
+				postId: selectedPost?.id!,
+				postTitle: selectedPost?.title!,
+				text: commentText,
+				createdAt: serverTimestamp() as Timestamp,
+			}
+			batch.set(commentDocRef, newComment)
+
+			newComment.createdAt = { seconds: Date.now() / 1000 } as Timestamp
+
+			const postDocRef = doc(firestore, 'posts', selectedPost?.id!)
+			batch.update(postDocRef, {
+				numberOfComments: increment(1),
+			})
+
+			await batch.commit()
+
+			setCommentText('')
+			setComments(prev => [newComment, ...prev])
+			setPostState(prev => ({
+				...prev,
+				selectedPost: {
+					...prev.selectedPost,
+					numberOfComments: prev.selectedPost?.numberOfComments! + 1,
+				} as Post,
+			}))
+		} catch (error) {
+			console.log('onCreateComment Error', error)
+		}
+		setCreateLoading(false)
+	}
+
+	const onDeleteComment = async (comment: any) => {}
+
+	const getPostComments = async () => {
+		try {
+			const commentsQuery = query(
+				collection(firestore, 'comments'),
+				where('postId', '==', selectedPost?.id),
+				orderBy('createdAt', 'desc')
+			)
+			const commentDocs = await getDocs(commentsQuery)
+			const comments = commentDocs.docs.map(doc => ({
+				id: doc.id,
+				...doc.data(),
+			}))
+			setComments(comments as Comment[])
+		} catch (error) {
+			console.log('getPostComments error', error)
+		}
+		setFetchLoading(false)
+	}
+
+	useEffect(() => {
+		if (!selectedPost) return
+		getPostComments()
+	}, [selectedPost])
+
+	return (
+		<Box bg='white' borderRadius='0px 0px 4px 4px' p={2}>
+			<Flex direction='column' pl={10} pr={10} fontSize='10pt' width='100%'>
+				{/* {!fetchLoading && ( */}
+				<CommentInput
+					commentText={commentText}
+					setCommentText={setCommentText}
+					user={user}
+					createLoading={createLoading}
+					onCreateComment={onCreateComment}
+				/>
+				{/* )} */}
+			</Flex>
+			<Stack spacing={6} p={2}>
+				{fetchLoading ? (
+					<>
+						{[0, 1, 2].map(item => (
+							<Box key={item} padding='6' bg='white'>
+								<SkeletonCircle size='10' />
+								<SkeletonText mt='4' noOfLines={2} spacing='4' />
+							</Box>
+						))}
+					</>
+				) : (
+					<>
+						{comments.length === 0 ? (
+							<Flex
+								direction='column'
+								justify='center'
+								align='center'
+								borderTop='1px solid'
+								borderColor='gray.100'
+								p={20}
+							>
+								<Text fontWeight={700} opacity={0.3}>
+									No Comments Yet
+								</Text>
+							</Flex>
+						) : (
+							<>
+								{comments.map((item: Comment) => (
+									<CommentItem
+										key={item.id}
+										comment={item}
+										onDeleteComment={() => {}}
+										loadingDelete={false}
+										userId={user.uid}
+									/>
+								))}
+							</>
+						)}
+					</>
+				)}
+			</Stack>
+		</Box>
+	)
+}
+export default Comments
diff --git a/src/hooks/useCommunityData.tsx b/src/hooks/useCommunityData.tsx
index 7992702..f552f98 100644
--- a/src/hooks/useCommunityData.tsx
+++ b/src/hooks/useCommunityData.tsx
@@ -1,10 +1,12 @@
 import {
 	collection,
 	doc,
+	getDoc,
 	getDocs,
 	increment,
 	writeBatch,
 } from 'firebase/firestore'
+import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { useAuthState } from 'react-firebase-hooks/auth'
 import { useRecoilState, useSetRecoilState } from 'recoil'
@@ -23,6 +25,7 @@ const useCommunityData = () => {
 	const setAuthModalState = useSetRecoilState(authModalState)
 	const [loading, setLoading] = useState(false)
 	const [error, setError] = useState('')
+	const router = useRouter()
 
 	const onJoinOrLeaveCommunity = (
 		communityData: Community,
@@ -116,11 +119,41 @@ const useCommunityData = () => {
 		setLoading(false)
 	}
 
+	const getCommunityData = async (communityId: string) => {
+		try {
+			const communityDocRef = doc(firestore, 'communities', communityId)
+			const communityDoc = await getDoc(communityDocRef)
+
+			setCommuityStateValue(prev => ({
+				...prev,
+				currentCommunity: {
+					id: communityDoc.id,
+					...communityDoc.data(),
+				} as Community,
+			}))
+		} catch (error) {
+			console.log('getCommunityData', error)
+		}
+	}
+
 	useEffect(() => {
-		if (!user) return
+		if (!user) {
+			setCommuityStateValue(prev => ({
+				...prev,
+				mySnippets: [],
+			}))
+		}
 		getMySnippets()
 	}, [user])
 
+	useEffect(() => {
+		const { communityId } = router.query
+
+		if (communityId && !communityStateValue.currentCommunity) {
+			getCommunityData(communityId as string)
+		}
+	}, [router.query, communityStateValue.currentCommunity])
+
 	return {
 		communityStateValue,
 		onJoinOrLeaveCommunity,
diff --git a/src/hooks/usePosts.tsx b/src/hooks/usePosts.tsx
index e74d5bf..3d624e7 100644
--- a/src/hooks/usePosts.tsx
+++ b/src/hooks/usePosts.tsx
@@ -1,15 +1,30 @@
-import { deleteDoc, doc } from 'firebase/firestore'
+import {
+	collection,
+	deleteDoc,
+	doc,
+	getDoc,
+	getDocs,
+	query,
+	where,
+	writeBatch,
+} from 'firebase/firestore'
 import { deleteObject, ref } from 'firebase/storage'
-import { useRecoilState } from 'recoil'
-import { Post, postState } from '../atoms/postsAtom'
-import { firestore, storage } from '../firebase/clientApp'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import { useAuthState } from 'react-firebase-hooks/auth'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { authModalState } from '../atoms/authModalAtoms'
+import { communityState } from '../atoms/communitiesAtom'
+import { Post, postState, PostVote } from '../atoms/postsAtom'
+import Login from '../components/modal/auth/Login'
+import { auth, firestore, storage } from '../firebase/clientApp'
 
 const usePosts = () => {
 	const [postStateValue, setPostStateValue] = useRecoilState(postState)
-
-	const onVote = async () => {}
-
-	const onSelectPost = () => {}
+	const [user] = useAuthState(auth)
+	const currentCommunity = useRecoilValue(communityState).currentCommunity
+	const setAuthModalState = useSetRecoilState(authModalState)
+	const router = useRouter()
 
 	const onDeletePost = async (post: Post): Promise<boolean> => {
 		try {
@@ -32,6 +47,143 @@ const usePosts = () => {
 		}
 	}
 
+	const onVote = async (
+		event: React.MouseEvent<SVGElement, MouseEvent>,
+		post: Post,
+		vote: number,
+		communityId: string
+	) => {
+		event.stopPropagation()
+		if (!user?.uid) {
+			setAuthModalState({ open: true, view: 'login' })
+			return
+		}
+
+		try {
+			const { voteStatus } = post
+			const existingVote = postStateValue.postVotes.find(
+				vote => vote.postId === post.id
+			)
+
+			const batch = writeBatch(firestore)
+			const updatedPost = { ...post }
+			const updatedPosts = [...postStateValue.posts]
+			let updatedPostVotes = [...postStateValue.postVotes]
+			let voteChange = vote
+
+			if (!existingVote) {
+				const postVoteRef = doc(
+					collection(firestore, 'users', `${user?.uid}/postVotes`)
+				)
+
+				const newVote: PostVote = {
+					id: postVoteRef.id,
+					postId: post.id!,
+					communityId,
+					voteValue: vote,
+				}
+
+				batch.set(postVoteRef, newVote)
+
+				updatedPost.voteStatus = voteStatus + vote
+				updatedPostVotes = [...updatedPostVotes, newVote]
+			} else {
+				const postVoteRef = doc(
+					firestore,
+					'users',
+					`${user?.uid}/postVotes/${existingVote.id}`
+				)
+
+				if (existingVote.voteValue === vote) {
+					updatedPost.voteStatus = voteStatus - vote
+					updatedPostVotes = updatedPostVotes.filter(
+						vote => vote.id !== existingVote.id
+					)
+
+					batch.delete(postVoteRef)
+
+					voteChange == -1
+				} else {
+					updatedPost.voteStatus = voteStatus + 2 * vote
+					const voteIdx = postStateValue.postVotes.findIndex(
+						vote => vote.id === existingVote.id
+					)
+					updatedPostVotes[voteIdx] = {
+						...existingVote,
+						voteValue: vote,
+					}
+
+					batch.update(postVoteRef, {
+						voteValue: vote,
+					})
+
+					voteChange = 2 * vote
+				}
+			}
+			const postIdx = postStateValue.posts.findIndex(
+				item => item.id === post.id
+			)
+			updatedPosts[postIdx] = updatedPost
+			setPostStateValue(prev => ({
+				...prev,
+				posts: updatedPosts,
+				postVotes: updatedPostVotes,
+			}))
+
+			if (postStateValue.selectedPost) {
+				setPostStateValue(prev => ({
+					...prev,
+					selectedPost: updatedPost,
+				}))
+			}
+
+			const postRef = doc(firestore, 'posts', post.id!)
+			batch.update(postRef, { voteStatus: voteStatus + voteChange })
+
+			await batch.commit()
+		} catch (error) {
+			console.log('onVote error', error)
+		}
+	}
+
+	const getCommunityPostVotes = async (communityId: string) => {
+		const postVotesQuery = query(
+			collection(firestore, 'users', `${user?.uid}/postVotes`),
+			where('communityId', '==', communityId)
+		)
+		const postVoteDocs = await getDocs(postVotesQuery)
+		const postVotes = postVoteDocs.docs.map(doc => ({
+			id: doc.id,
+			...doc.data(),
+		}))
+		setPostStateValue(prev => ({
+			...prev,
+			postVotes: postVotes as PostVote[],
+		}))
+	}
+
+	useEffect(() => {
+		if (!user || !currentCommunity?.id) return
+		getCommunityPostVotes(currentCommunity?.id)
+	}, [user, currentCommunity])
+
+	useEffect(() => {
+		if (!user) {
+			setPostStateValue(prev => ({
+				...prev,
+				postVotes: [],
+			}))
+		}
+	}, [user])
+
+	const onSelectPost = (post: Post) => {
+		setPostStateValue(prev => ({
+			...prev,
+			selectedPost: post,
+		}))
+		router.push(`/r/${post.communityId}/comments/${post.id}`)
+	}
+
 	return {
 		postStateValue,
 		setPostStateValue,
diff --git a/src/hooks/useSelectFile.tsx b/src/hooks/useSelectFile.tsx
new file mode 100644
index 0000000..03f6d84
--- /dev/null
+++ b/src/hooks/useSelectFile.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react'
+
+const useSelectFile = () => {
+	const [selectedFile, setSelectedFile] = useState<string>()
+
+	const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const reader = new FileReader()
+
+		if (event.target.files?.[0]) {
+			reader.readAsDataURL(event.target.files[0])
+		}
+		reader.onload = readerEvent => {
+			if (readerEvent.target?.result) {
+				setSelectedFile(readerEvent.target.result as string)
+			}
+		}
+	}
+	return { selectedFile, setSelectedFile, onSelectFile }
+}
+export default useSelectFile
diff --git a/src/pages/r/[communityId]/comments/[pid].tsx b/src/pages/r/[communityId]/comments/[pid].tsx
new file mode 100644
index 0000000..79c1837
--- /dev/null
+++ b/src/pages/r/[communityId]/comments/[pid].tsx
@@ -0,0 +1,72 @@
+import { Post, postState } from '@/src/atoms/postsAtom'
+import About from '@/src/components/community/About'
+import PageContent from '@/src/components/layout/PageContent'
+import Comments from '@/src/components/posts/comments/Comments'
+import PostItem from '@/src/components/posts/PostItem'
+import { auth, firestore } from '@/src/firebase/clientApp'
+import useCommunityData from '@/src/hooks/useCommunityData'
+import usePosts from '@/src/hooks/usePosts'
+import { User } from 'firebase/auth'
+import { doc, getDoc } from 'firebase/firestore'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import { useAuthState } from 'react-firebase-hooks/auth'
+
+const PostPage: React.FC = () => {
+	const [user] = useAuthState(auth)
+	const { postStateValue, setPostStateValue, onDeletePost, onVote } = usePosts()
+	const router = useRouter()
+	const { communityStateValue } = useCommunityData()
+
+	const fetchPost = async (postId: string) => {
+		try {
+			const postDocRef = doc(firestore, 'posts', postId)
+			const postDoc = await getDoc(postDocRef)
+			setPostStateValue(prev => ({
+				...prev,
+				selectedPost: { id: postDoc.id, ...postDoc.data() } as Post,
+			}))
+		} catch (error) {
+			console.log('fetchPost error', error)
+		}
+	}
+
+	useEffect(() => {
+		const { pid } = router.query
+		if (pid && !postStateValue.selectedPost) {
+			fetchPost(pid as string)
+		}
+	}, [router.query, postStateValue.selectedPost])
+
+	return (
+		<PageContent>
+			<>
+				{postStateValue.selectedPost && (
+					<PostItem
+						post={postStateValue.selectedPost}
+						onVote={onVote}
+						onDeletePost={onDeletePost}
+						userVoteValue={
+							postStateValue.postVotes.find(
+								item => item.postId === postStateValue.selectedPost?.id
+							)?.voteValue
+						}
+						userIsCreator={user?.uid === postStateValue.selectedPost?.creatorId}
+					/>
+				)}
+				<Comments
+					user={user as User}
+					selectedPost={postStateValue.selectedPost}
+					communityId={postStateValue.selectedPost?.communityId as string}
+				/>
+			</>
+			<>
+				{communityStateValue.currentCommunity && (
+					<About communityData={communityStateValue.currentCommunity} />
+				)}
+			</>
+		</PageContent>
+	)
+}
+
+export default PostPage
diff --git a/src/pages/r/[communityId]/submit.tsx b/src/pages/r/[communityId]/submit.tsx
index 9e0d752..e90f240 100644
--- a/src/pages/r/[communityId]/submit.tsx
+++ b/src/pages/r/[communityId]/submit.tsx
@@ -1,7 +1,9 @@
 import { communityState } from '@/src/atoms/communitiesAtom'
+import About from '@/src/components/community/About'
 import PageContent from '@/src/components/layout/PageContent'
 import NewPostForm from '@/src/components/posts/NewPostForm'
 import { auth } from '@/src/firebase/clientApp'
+import useCommunityData from '@/src/hooks/useCommunityData'
 import { Box, Text } from '@chakra-ui/react'
 import React from 'react'
 import { useAuthState } from 'react-firebase-hooks/auth'
@@ -9,8 +11,9 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 
 const SubmitPostPage: React.FC = () => {
 	const [user] = useAuthState(auth)
-	const communityStateValue = useRecoilValue(communityState)
-	console.log('Community', communityStateValue)
+	// const communityStateValue = useRecoilValue(communityState)
+	const { communityStateValue } = useCommunityData()
+	console.log('comm', communityStateValue)
 
 	return (
 		<PageContent>
@@ -20,7 +23,11 @@ const SubmitPostPage: React.FC = () => {
 				</Box>
 				{user && <NewPostForm user={user} />}
 			</>
-			<></>
+			<>
+				{communityStateValue.currentCommunity && (
+					<About communityData={communityStateValue.currentCommunity} />
+				)}
+			</>
 		</PageContent>
 	)
 }