diff --git a/App.tsx b/App.tsx
index 02fe628..aaf394d 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,11 +1,34 @@
 import { StatusBar } from "expo-status-bar";
-import React from "react";
+import React, { useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 
+import { Button } from "react-native-elements";
+import comments from "./ui/Comments/CommentExample";
+import CommentBox from "./ui/Comments";
+
 export default function App() {
+  const [commentsVisible, setCommentsVisible] = useState(false);
+
   return (
     <View style={styles.container}>
       <Text>Open up App.tsx to start working on your app!</Text>
+      <Button
+        onPress={() => {
+          setCommentsVisible(true);
+        }}
+        title="Open Comments"
+      />
+      {commentsVisible ? (
+        <CommentBox
+          comments={comments}
+          isVisible={true}
+          onBack={() => {
+            setCommentsVisible(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
       <StatusBar style="auto" />
     </View>
   );
diff --git a/package.json b/package.json
index ad6cbce..2647d04 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "expo": "~38.0.8",
     "expo-status-bar": "^1.0.2",
+    "moment": "^2.27.0",
     "react": "~16.11.0",
     "react-dom": "~16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
diff --git a/types/index.d.ts b/types/index.d.ts
index b8138e5..c2f922d 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -27,6 +27,7 @@ declare interface IPost {
 
 declare interface IComment {
   pk: number;
+  parent: number;
   post: number;
   content: string;
   created_at: string; // for ex: 2020-05-05T23:37:49.992636+05:30
diff --git a/ui/Comments/BackButton.tsx b/ui/Comments/BackButton.tsx
new file mode 100644
index 0000000..93aa11c
--- /dev/null
+++ b/ui/Comments/BackButton.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { ListItem } from "react-native-elements";
+
+type Props = {
+  onBack: () => void;
+};
+
+const BackButton = (props: Props) => {
+  return (
+    <TouchableOpacity onPress={props.onBack} activeOpacity={0.5}>
+      <ListItem leftIcon={{ name: "arrow-back" }} title="Back" />
+    </TouchableOpacity>
+  );
+};
+
+export default BackButton;
diff --git a/ui/Comments/CommentBlock.tsx b/ui/Comments/CommentBlock.tsx
new file mode 100644
index 0000000..259e3ca
--- /dev/null
+++ b/ui/Comments/CommentBlock.tsx
@@ -0,0 +1,63 @@
+import React, { useRef } from "react";
+import { View, FlatList, TextInput, StyleSheet } from "react-native";
+import { Overlay } from "react-native-elements";
+
+import MaximisedComment from "./MaximisedComment";
+import MainComment from "./MainComment";
+import ReplyBox from "./ReplyBox";
+import BackButton from "./BackButton";
+
+type Props = {
+  onBack: () => void;
+  comment: IComment;
+};
+
+const CommentBox = (props: Props) => {
+  let inpRef: React.MutableRefObject<TextInput | undefined> = useRef();
+
+  const focusInputBox = () => {
+    if (inpRef.current) inpRef.current.focus();
+  };
+
+  const onReplyHandler = () => {
+    focusInputBox();
+  };
+
+  return (
+    <Overlay
+      isVisible
+      fullScreen
+      overlayStyle={styles.overlay}
+      onRequestClose={props.onBack}
+    >
+      <View style={styles.outer}>
+        <BackButton onBack={props.onBack} />
+        <View style={styles.commentOuter}>
+          <MainComment comment={props.comment} onReply={onReplyHandler} />
+          <View style={styles.commentList}>
+            <FlatList
+              data={props.comment.replies}
+              keyExtractor={(comment) => comment.pk.toString()}
+              renderItem={({ item }) => (
+                <MaximisedComment comment={item} showReplies />
+              )}
+            />
+          </View>
+        </View>
+        <ReplyBox
+          placeholder={"Reply to " + props.comment.user.name}
+          ref={inpRef}
+        />
+      </View>
+    </Overlay>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: { padding: 0 },
+  outer: { flex: 1 },
+  commentOuter: { paddingHorizontal: 10, flex: 1 },
+  commentList: { paddingLeft: "5%", flex: 1 },
+});
+
+export default CommentBox;
diff --git a/ui/Comments/CommentExample.ts b/ui/Comments/CommentExample.ts
new file mode 100644
index 0000000..92b51ac
--- /dev/null
+++ b/ui/Comments/CommentExample.ts
@@ -0,0 +1,63 @@
+const user_def = {
+  pk: 0,
+  name: "",
+  roll: 0,
+  username: "",
+  email: "",
+  fblink: "",
+  following: 0,
+};
+
+const comment = (
+  name: string,
+  pk: number,
+  content: string,
+  parent: number,
+  replies: Array<IComment>
+): IComment => {
+  return {
+    pk: pk,
+    parent: parent,
+    post: 0,
+    content: content,
+    created_at: "2020-05-05T23:37:49.992636+05:30",
+    user: { ...user_def, name: name },
+    replies: replies,
+  };
+};
+
+const comments: Array<IComment> = [
+  comment("dosa", 1, "next sem to be online", 0, [
+    comment("a y19", 2, ";-( mujhe wapas jana hai", 1, [
+      comment("iitk", 3, "Want to buy BournVita?", 2, []),
+    ]),
+  ]),
+  comment("oli", 4, "Ayodhya is in Nepal", 0, [
+    comment("Umar Akmal", 5, "Nepal is Ayodhya.", 4, []),
+    comment(
+      "Anonymous",
+      6,
+      "Go Brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr.",
+      4,
+      []
+    ),
+    comment("Bhau", 7, "Pehli fursat me nikal", 4, [
+      comment(
+        "Oli",
+        9,
+        "Mai aaya hi kab jo nikal jayun. Tu hi mere desh me hai.",
+        7,
+        []
+      ),
+    ]),
+    comment(
+      "Gandhi",
+      8,
+      "Ye kya chal rha hai padosi desh me. Kya isi din ke liye azad karaya tha",
+      4,
+      []
+    ),
+  ]),
+];
+
+export default comments;
diff --git a/ui/Comments/CommentList.tsx b/ui/Comments/CommentList.tsx
new file mode 100644
index 0000000..6cf9f3a
--- /dev/null
+++ b/ui/Comments/CommentList.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import MinimisedComment from "./MinimisedComment";
+
+type Props = {
+  comments: Array<IComment>;
+};
+
+const CommentList = (props: Props) => {
+  const maxHiddenChats = 3;
+
+  if (!props.comments) return <> </>;
+  return (
+    <View style={styles.commentList}>
+      {props.comments.slice(0, maxHiddenChats).map((comment: IComment) => (
+        <MinimisedComment comment={comment} key={comment.pk} />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  commentList: {
+    width: "100%",
+    paddingLeft: "5%",
+  },
+});
+
+export default CommentList;
diff --git a/ui/Comments/MainComment.tsx b/ui/Comments/MainComment.tsx
new file mode 100644
index 0000000..2a1d311
--- /dev/null
+++ b/ui/Comments/MainComment.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { Card } from "react-native-elements";
+import { StyleSheet, View, Text } from "react-native";
+import Title from "./Title";
+
+import moment from "moment";
+
+type CommentProps = {
+  comment: IComment;
+  onReply: () => void;
+};
+
+const MainComment = (props: CommentProps) => {
+  return (
+    <>
+      <Card
+        title={
+          <Title
+            name={props.comment.user.name}
+            avatarSize={40}
+            titleStyle={styles.title}
+          />
+        }
+        containerStyle={styles.container}
+      >
+        <View style={styles.content}>
+          <Text style={{ marginTop: 5 }}>{props.comment.content}</Text>
+        </View>
+      </Card>
+      <View style={styles.subtitlesBox}>
+        <View>
+          <Text style={styles.subtitles}>
+            {moment(props.comment.created_at).fromNow()}
+          </Text>
+        </View>
+        <View>
+          <Text style={styles.subtitles} onPress={props.onReply}>
+            Reply
+          </Text>
+        </View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: "1%",
+    margin: "0.5%",
+    marginTop: 10,
+    borderBottomLeftRadius: 15,
+    backgroundColor: "#f9f9f9",
+  },
+  content: {
+    marginBottom: 2,
+    marginLeft: 16,
+  },
+  title: { fontSize: 20, paddingTop: 5 },
+  subtitlesBox: {
+    marginBottom: 10,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginHorizontal: 12,
+  },
+  subtitles: { color: "grey", fontWeight: "bold" },
+});
+
+export default MainComment;
diff --git a/ui/Comments/MaximisedComment.tsx b/ui/Comments/MaximisedComment.tsx
new file mode 100644
index 0000000..5b5f4c8
--- /dev/null
+++ b/ui/Comments/MaximisedComment.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+
+import CommentList from "./CommentList";
+import CommentBlock from "./CommentBlock";
+import SideComment from "./SideComment";
+
+type Props = {
+  comment: IComment;
+  showReplies: boolean;
+};
+
+const MaximisedComment = (props: Props) => {
+  let [selfExpanded, setSelfExpanded] = useState(false);
+
+  const onSelectHandler = () => {
+    setSelfExpanded(true);
+  };
+
+  const onBackHandler = () => {
+    setSelfExpanded(false);
+  };
+
+  return (
+    <>
+      <TouchableOpacity onPress={onSelectHandler} activeOpacity={0.6}>
+        <View style={styles.outer}>
+          <SideComment comment={props.comment} />
+          <CommentList comments={props.comment.replies} />
+        </View>
+      </TouchableOpacity>
+      {selfExpanded ? (
+        <CommentBlock comment={props.comment} onBack={onBackHandler} />
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  outer: {
+    width: "100%",
+    paddingLeft: "5%",
+    marginTop: 10,
+  },
+});
+
+export default MaximisedComment;
diff --git a/ui/Comments/MinimisedComment.tsx b/ui/Comments/MinimisedComment.tsx
new file mode 100644
index 0000000..68e7cc6
--- /dev/null
+++ b/ui/Comments/MinimisedComment.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+import { Card } from "react-native-elements";
+
+type Props = {
+  comment: IComment;
+};
+
+const MinimisedComment = (props: Props) => {
+  return (
+    <Card containerStyle={styles.container}>
+      <Text numberOfLines={1}>
+        <Text style={styles.name}>{" " + props.comment.user.name}</Text>
+        <Text>{"  " + props.comment.content}</Text>
+      </Text>
+    </Card>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 4,
+    borderBottomLeftRadius: 12,
+    borderTopLeftRadius: 12,
+    marginBottom: 4,
+    marginTop: 4,
+  },
+  name: {
+    fontWeight: "bold",
+    marginLeft: 7,
+    marginRight: 5,
+  },
+});
+
+export default MinimisedComment;
diff --git a/ui/Comments/ReplyBox.tsx b/ui/Comments/ReplyBox.tsx
new file mode 100644
index 0000000..88c6ad6
--- /dev/null
+++ b/ui/Comments/ReplyBox.tsx
@@ -0,0 +1,67 @@
+import React, { useState, forwardRef } from "react";
+import { TextInput, View, StyleSheet } from "react-native";
+import { Icon } from "react-native-elements";
+
+type Props = {
+  placeholder: string;
+};
+
+const ReplyBox = forwardRef((props: Props, ref) => {
+  let [inputText, setInputText] = useState("");
+
+  const onReplyHandler = () => {
+    console.log(inputText);
+    setInputText("");
+  };
+
+  const textChangeHandler = (text: string) => {
+    setInputText(text);
+  };
+
+  return (
+    <View style={styles.outer}>
+      <View style={styles.inputBox}>
+        <TextInput
+          placeholder={props.placeholder}
+          style={styles.input}
+          multiline
+          onChangeText={textChangeHandler}
+          value={inputText}
+          ref={ref}
+        />
+        <Icon
+          name="reply"
+          type="entypo"
+          color="#517fa4"
+          size={19}
+          reverse
+          onPress={onReplyHandler}
+          containerStyle={styles.iconContainer}
+        />
+      </View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  input: {
+    minHeight: 40,
+    maxHeight: 100,
+    marginVertical: 10,
+    flex: 1,
+    backgroundColor: "white",
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 15,
+    marginLeft: 10,
+    alignSelf: "center",
+  },
+  inputBox: { flexDirection: "row" },
+  outer: {
+    justifyContent: "flex-end",
+    backgroundColor: "#e0e0e0",
+  },
+  iconContainer: { alignSelf: "flex-end" },
+});
+
+export default ReplyBox;
diff --git a/ui/Comments/SideComment.tsx b/ui/Comments/SideComment.tsx
new file mode 100644
index 0000000..bd5dab0
--- /dev/null
+++ b/ui/Comments/SideComment.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import { Card } from "react-native-elements";
+import Title from "./Title";
+
+type CommentProps = {
+  comment: IComment;
+};
+
+const SideComment = (props: CommentProps) => {
+  return (
+    <Card
+      title={<Title name={props.comment.user.name} avatarSize={35} />}
+      dividerStyle={styles.divider}
+      containerStyle={styles.container}
+    >
+      <View style={styles.content}>
+        <Text>{props.comment.content}</Text>
+      </View>
+    </Card>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 0,
+    margin: "0.5%",
+    borderBottomLeftRadius: 15,
+    backgroundColor: "#f9f9f9",
+  },
+  content: {
+    marginBottom: 2,
+    marginLeft: 16,
+  },
+  divider: { marginBottom: 0 },
+});
+
+export default SideComment;
diff --git a/ui/Comments/Title.tsx b/ui/Comments/Title.tsx
new file mode 100644
index 0000000..003ed78
--- /dev/null
+++ b/ui/Comments/Title.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+import { ListItem } from "react-native-elements";
+
+type Props = {
+  name: string;
+  avatarSize: number;
+  titleStyle?: {};
+};
+
+let colors = [
+  "#ef9a9a",
+  "#ef5350",
+  "#e53935",
+  "#c62828",
+  "#f06292",
+  "#c2185b",
+  "#ce93d8",
+  "#9c27b0",
+  "#7b1fa2",
+  "#c5cae9",
+  "#5c6bc0",
+  "#3949ab",
+  "#1a237e",
+  "#90caf9",
+  "#42a5f5",
+  "#4dd0e1",
+  "#4db6ac",
+  "#00695c",
+  "#c0ca33",
+  "#4caf50",
+  "#2e7d32",
+  "#fff59d",
+  "#fdd835",
+  "#795548",
+];
+
+const Title = (props: Props) => {
+  const randomIdx = Math.floor(Math.random() * colors.length);
+  let color = colors[randomIdx];
+
+  return (
+    <ListItem
+      leftAvatar={{
+        title: props.name[0].toUpperCase(),
+        rounded: true,
+        size: props.avatarSize,
+        containerStyle: {
+          backgroundColor: color,
+          transform: [{ translateY: -8 }, { translateX: -16 }],
+        },
+      }}
+      title={
+        <Text style={{ ...styles.name, ...props.titleStyle }}>
+          {props.name}
+        </Text>
+      }
+      containerStyle={styles.container}
+    ></ListItem>
+  );
+};
+
+const styles = StyleSheet.create({
+  name: {
+    fontWeight: "bold",
+    transform: [{ translateX: -24 }],
+  },
+  container: {
+    padding: "0.8%",
+    height: 20,
+    marginTop: 5,
+    backgroundColor: "#f9f9f9",
+  },
+});
+
+export default Title;
diff --git a/ui/Comments/index.tsx b/ui/Comments/index.tsx
new file mode 100644
index 0000000..1ed6538
--- /dev/null
+++ b/ui/Comments/index.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { View, FlatList, StyleSheet } from "react-native";
+import { Overlay } from "react-native-elements";
+
+import MaximisedComment from "./MaximisedComment";
+import ReplyBox from "./ReplyBox";
+import BackButton from "./BackButton";
+
+type Props = {
+  isVisible: boolean;
+  onBack: () => void;
+  comments: Array<IComment>;
+};
+
+const CommentBox = (props: Props) => {
+  return (
+    <Overlay
+      isVisible={props.isVisible}
+      fullScreen
+      overlayStyle={styles.overlay}
+      onRequestClose={props.onBack}
+    >
+      <View style={styles.outer}>
+        <BackButton onBack={props.onBack} />
+        <View style={styles.commentOuter}>
+          <View style={styles.commentList}>
+            <FlatList
+              data={props.comments}
+              keyExtractor={(comment) => comment.pk.toString()}
+              renderItem={({ item }) => (
+                <MaximisedComment comment={item} showReplies={true} />
+              )}
+            />
+          </View>
+        </View>
+        <ReplyBox placeholder={"Write a comment..."} />
+      </View>
+    </Overlay>
+  );
+};
+
+const styles = StyleSheet.create({
+  commentOuter: { paddingHorizontal: 10, flex: 1 },
+  commentList: { paddingLeft: "5%", flex: 1 },
+  overlay: { padding: 0 },
+  outer: { flex: 1 },
+});
+
+export default CommentBox;
diff --git a/yarn.lock b/yarn.lock
index 12425bb..52d4b9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3962,6 +3962,11 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.27.0:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
+  integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"