diff --git a/App.tsx b/App.tsx
index 4a20d84..c4eca53 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,14 +1,31 @@
 import { StatusBar } from "expo-status-bar";
-import React from "react";
-import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import { StyleSheet, Text, View, Button } from "react-native";
 import CommentBox from "./ui/Comments";
 import comments from "./ui/Comments/CommentExample";
 
 export default function App() {
+  const [isCommentOpen, setIsCommentOpen] = useState(true);
   return (
     <View style={styles.container}>
       <Text>Open up App.tsx to start working on your app!</Text>
-      <CommentBox isVisible={true} comments={comments} />
+      <Button
+        title="Open Comments"
+        onPress={() => {
+          setIsCommentOpen(true);
+        }}
+      ></Button>
+      {isCommentOpen ? (
+        <CommentBox
+          isVisible={true}
+          comments={comments}
+          onBack={() => {
+            setIsCommentOpen(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
       <StatusBar style="auto" />
     </View>
   );
diff --git a/ui/Comments/Comment.tsx b/ui/Comments/Comment.tsx
deleted file mode 100644
index 2f21a84..0000000
--- a/ui/Comments/Comment.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-import MinimisedComment from "./MinimisedComment";
-import MaximisedComment from "./MaximisedComment";
-
-type Props = {
-  isHidden: boolean;
-  comment: IComment;
-};
-
-const Comment = (props: Props) => {
-  if (props.isHidden) return <MinimisedComment comment={props.comment} />;
-  else return <MaximisedComment comment={props.comment} />;
-};
-
-export default Comment;
diff --git a/ui/Comments/CommentBlock.tsx b/ui/Comments/CommentBlock.tsx
new file mode 100644
index 0000000..52945c9
--- /dev/null
+++ b/ui/Comments/CommentBlock.tsx
@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import {
+  Text,
+  View,
+  FlatList,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+} from "react-native";
+import { Overlay, Icon, ListItem, Input } from "react-native-elements";
+
+import MaximisedComment from "./MaximisedComment";
+import MainComment from "./MainComment";
+
+type Props = {
+  isVisible: boolean;
+  onBack: () => void;
+  comment: IComment;
+};
+
+const CommentBox = (props: Props) => {
+  const onBackHandler = () => {
+    props.onBack();
+  };
+
+  return (
+    <Overlay isVisible={true} fullScreen={true}>
+      <View style={{ height: "100%" }}>
+        <TouchableOpacity onPress={onBackHandler}>
+          <ListItem
+            leftIcon={{ name: "arrow-back" }}
+            title="Back"
+            containerStyle={{
+              padding: 3,
+              marginTop: 0,
+              marginBottom: 0,
+            }}
+          />
+        </TouchableOpacity>
+        <MainComment comment={props.comment} />
+        <View style={{ paddingLeft: "5%" }}>
+          <FlatList
+            style={{
+              marginBottom: 30,
+              height: "76.5%",
+            }}
+            data={props.comment.replies}
+            keyExtractor={(comment) => comment.pk.toString()}
+            renderItem={({ item }) => (
+              <MaximisedComment comment={item} showReplies={true} />
+            )}
+          />
+        </View>
+        <KeyboardAvoidingView
+          behavior="position"
+          style={{ flex: 1, justifyContent: "flex-end" }}
+        >
+          <View>
+            <Input placeholder="Write a comment..." />
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Overlay>
+  );
+};
+
+export default CommentBox;
diff --git a/ui/Comments/CommentExample.ts b/ui/Comments/CommentExample.ts
index 92b51ac..8199b74 100644
--- a/ui/Comments/CommentExample.ts
+++ b/ui/Comments/CommentExample.ts
@@ -58,6 +58,26 @@ const comments: Array<IComment> = [
       []
     ),
   ]),
+  comment("dosa0", 10, "next sem to be online", 0, []),
+  comment("dosa1", 11, "next sem to be online", 0, []),
+  comment("dosa2", 12, "next sem to be online", 0, []),
+  comment("dosa3", 13, "next sem to be online", 0, []),
+  comment("dosa4", 14, "next sem to be online", 0, []),
+  comment("dosa5", 15, "next sem to be online", 0, []),
+  comment("dosa6", 16, "next sem to be online", 0, []),
+  comment("dosa7", 17, "next sem to be online", 0, []),
+  comment("dosa8", 18, "next sem to be online", 0, []),
+  comment("dosa9", 19, "next sem to be online", 0, []),
+  comment("dosa10", 20, "next sem to be online", 0, []),
+  comment("dosa11", 21, "next sem to be online", 0, []),
+  comment("dosa12", 22, "next sem to be online", 0, []),
+  comment("dosa13", 23, "next sem to be online", 0, []),
+  comment("dosa14", 24, "next sem to be online", 0, []),
+  comment("dosa15", 25, "next sem to be online", 0, []),
+  comment("dosa16", 26, "next sem to be online", 0, []),
+  comment("dosa17", 27, "next sem to be online", 0, []),
+  comment("dosa18", 28, "next sem to be online", 0, []),
+  comment("dosa19", 29, "next sem to be online", 0, []),
 ];
 
 export default comments;
diff --git a/ui/Comments/CommentList.tsx b/ui/Comments/CommentList.tsx
index 1f38af5..0ef2bcd 100644
--- a/ui/Comments/CommentList.tsx
+++ b/ui/Comments/CommentList.tsx
@@ -1,38 +1,22 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import Comment from "./Comment";
+import MinimisedComment from "./MinimisedComment";
 
 type Props = {
   comments: Array<IComment>;
 };
 
 const CommentList = (props: Props) => {
-  let [isHidden, setIsHidden] = useState(true);
   const maxHiddenChats = 3;
 
   if (!props.comments) return <> </>;
-  if (isHidden)
-    return (
-      <TouchableOpacity
-        onPress={() => {
-          setIsHidden(false);
-        }}
-      >
-        <View>
-          {props.comments.slice(0, maxHiddenChats).map((comment: IComment) => (
-            <Comment isHidden={true} comment={comment} key={comment.pk} />
-          ))}
-        </View>
-      </TouchableOpacity>
-    );
-  else
-    return (
-      <View>
-        {props.comments.map((comment: IComment) => (
-          <Comment isHidden={false} comment={comment} key={comment.pk} />
-        ))}
-      </View>
-    );
+  return (
+    <View>
+      {props.comments.slice(0, maxHiddenChats).map((comment: IComment) => (
+        <MinimisedComment comment={comment} key={comment.pk} />
+      ))}
+    </View>
+  );
 };
 
 export default CommentList;
diff --git a/ui/Comments/MainComment.tsx b/ui/Comments/MainComment.tsx
new file mode 100644
index 0000000..0b8eaa0
--- /dev/null
+++ b/ui/Comments/MainComment.tsx
@@ -0,0 +1,63 @@
+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;
+};
+
+const commentCreationTime = (created_at: string) => {
+  let creationTime = moment(created_at);
+  let currentTime = moment();
+
+  if (currentTime.diff(creationTime, "seconds") < 60) {
+    return "now";
+  } else if (currentTime.diff(creationTime, "minutes") < 60)
+    return currentTime.diff(creationTime, "minutes") + " min";
+  else if (currentTime.diff(creationTime, "hours") < 24)
+    return currentTime.diff(creationTime, "hours") + " hrs";
+  else if (currentTime.diff(creationTime, "months") === 0)
+    return currentTime.diff(creationTime, "days") + " days";
+  else if (currentTime.diff(creationTime, "years") === 0)
+    return currentTime.diff(creationTime, "months") + " months";
+  else return currentTime.diff(creationTime, "years") + " yrs";
+};
+
+const MainComment = (props: CommentProps) => {
+  return (
+    <Card
+      title={
+        <Title
+          name={props.comment.user.name}
+          avatarSize={40}
+          titleStyle={{ fontSize: 20, paddingTop: 5 }}
+        />
+      }
+      containerStyle={styles.container}
+    >
+      <View style={styles.content}>
+        <Text style={{ marginTop: 5 }}>{props.comment.content}</Text>
+      </View>
+    </Card>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: "1%",
+    margin: "0.5%",
+    marginTop: 10,
+    marginBottom: "3%",
+    borderBottomLeftRadius: 15,
+    backgroundColor: "#f5f5f5",
+  },
+  content: {
+    marginBottom: 2,
+    marginLeft: 16,
+  },
+});
+
+export default MainComment;
diff --git a/ui/Comments/MaximisedComment.tsx b/ui/Comments/MaximisedComment.tsx
index 02a7568..47f6f01 100644
--- a/ui/Comments/MaximisedComment.tsx
+++ b/ui/Comments/MaximisedComment.tsx
@@ -1,78 +1,70 @@
-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { Card } from "react-native-elements";
+import React, { useState } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 
 import moment from "moment";
 
 import CommentList from "./CommentList";
-import Title from "./Title";
+import CommentBlock from "./CommentBlock";
+import SideComment from "./SideComment";
 
 type Props = {
   comment: IComment;
+  showReplies: boolean;
+};
+
+type RepliesProps = {
+  replies: Array<IComment>;
+};
+
+const Replies = (props: RepliesProps) => {
+  return (
+    <View style={styles.commentList}>
+      <CommentList comments={props.replies} />
+    </View>
+  );
 };
 
 const MaximisedComment = (props: Props) => {
-  const commentCreationTime = () => {
-    let creationTime = moment(props.comment.created_at);
-    let currentTime = moment();
+  let [selfExpanded, setSelfExpanded] = useState(false);
 
-    if (currentTime.diff(creationTime, "seconds") < 60) {
-      return "now";
-    } else if (currentTime.diff(creationTime, "minutes") < 60)
-      return currentTime.diff(creationTime, "minutes") + " min";
-    else if (currentTime.diff(creationTime, "hours") < 24)
-      return currentTime.diff(creationTime, "hours") + " hrs";
-    else if (currentTime.diff(creationTime, "months") === 0)
-      return currentTime.diff(creationTime, "days") + " days";
-    else if (currentTime.diff(creationTime, "years") === 0)
-      return currentTime.diff(creationTime, "months") + " months";
-    else return currentTime.diff(creationTime, "years") + " yrs";
+  const onSelectedHandler = () => {
+    setSelfExpanded(true);
   };
 
   return (
-    <View style={styles.outer}>
-      <Card
-        title={<Title name={props.comment.user.name} />}
-        dividerStyle={{ marginBottom: 0 }}
-        containerStyle={styles.container}
-      >
-        <View style={styles.content}>
-          <Text>{props.comment.content}</Text>
+    <>
+      <TouchableOpacity onPress={onSelectedHandler}>
+        <View style={styles.outer}>
+          <SideComment comment={props.comment} />
+          <Replies replies={props.comment.replies} />
         </View>
-      </Card>
-      <View
-        style={{
-          paddingLeft: "5%",
-          flexDirection: "row",
-          justifyContent: "space-between",
-        }}
-      >
-        <Text style={{ fontWeight: "bold" }}>Reply</Text>
-        <Text style={{ color: "grey" }}>{commentCreationTime()}</Text>
-      </View>
-      <View style={styles.commentList}>
-        <CommentList comments={props.comment.replies} />
-      </View>
-    </View>
+      </TouchableOpacity>
+      {selfExpanded ? (
+        <CommentBlock
+          isVisible={true}
+          comment={props.comment}
+          onBack={() => {
+            setSelfExpanded(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </>
   );
 };
 
 const styles = StyleSheet.create({
+  outerWithoutReplies: {
+    width: "100%",
+    paddingLeft: "2%",
+    marginTop: 10,
+  },
   outer: {
     width: "100%",
     paddingLeft: "5%",
     marginTop: 10,
   },
-  container: {
-    padding: 0,
-    margin: "0.5%",
-    borderBottomLeftRadius: 15,
-    backgroundColor: "#f5f5f5",
-  },
-  content: {
-    marginBottom: 2,
-    marginLeft: 16,
-  },
   commentList: {
     width: "100%",
     paddingLeft: "5%",
diff --git a/ui/Comments/SideComment.tsx b/ui/Comments/SideComment.tsx
new file mode 100644
index 0000000..5e72450
--- /dev/null
+++ b/ui/Comments/SideComment.tsx
@@ -0,0 +1,37 @@
+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={{ marginBottom: 0 }}
+      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: "#f5f5f5",
+  },
+  content: {
+    marginBottom: 2,
+    marginLeft: 16,
+  },
+});
+
+export default SideComment;
diff --git a/ui/Comments/Title.tsx b/ui/Comments/Title.tsx
index 6e278d2..cfbd302 100644
--- a/ui/Comments/Title.tsx
+++ b/ui/Comments/Title.tsx
@@ -1,9 +1,11 @@
 import React from "react";
-import { StyleSheet, Text } from "react-native";
+import { StyleSheet, Text, StyleProp, TextStyle } from "react-native";
 import { ListItem } from "react-native-elements";
 
 type Props = {
   name: string;
+  avatarSize: number;
+  titleStyle?: {};
 };
 
 let colors = [
@@ -42,13 +44,17 @@ const Title = (props: Props) => {
       leftAvatar={{
         title: props.name[0].toUpperCase(),
         rounded: true,
-        size: 35,
+        size: props.avatarSize,
         containerStyle: {
           backgroundColor: color,
           transform: [{ translateY: -8 }, { translateX: -16 }],
         },
       }}
-      title={<Text style={styles.name}>{props.name}</Text>}
+      title={
+        <Text style={{ ...styles.name, ...props.titleStyle }}>
+          {props.name}
+        </Text>
+      }
       containerStyle={styles.container}
     ></ListItem>
   );
@@ -63,6 +69,7 @@ const styles = StyleSheet.create({
     padding: "0.8%",
     height: 20,
     marginTop: 5,
+    backgroundColor: "#f5f5f5",
   },
 });
 
diff --git a/ui/Comments/index.tsx b/ui/Comments/index.tsx
index fa9a59a..13134de 100644
--- a/ui/Comments/index.tsx
+++ b/ui/Comments/index.tsx
@@ -1,35 +1,74 @@
-import React from "react";
-import { Text, View, FlatList } from "react-native";
-import { Overlay } from "react-native-elements";
+import React, { useState } from "react";
+import {
+  TextInput,
+  View,
+  FlatList,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  ScrollView,
+} from "react-native";
+import { Overlay, Icon, ListItem } from "react-native-elements";
 
-import Comment from "./Comment";
 import MaximisedComment from "./MaximisedComment";
 
 type Props = {
   isVisible: boolean;
-  mainComment?: IComment;
-  comments?: Array<IComment>;
+  onBack: () => void;
+  comments: Array<IComment>;
 };
 
 const CommentBox = (props: Props) => {
-  let MainComment, comments;
-  if (props.mainComment) {
-    MainComment = <MaximisedComment comment={props.mainComment} />;
-    comments = props.mainComment.replies;
-  } else {
-    MainComment = <></>;
-    comments = props.comments;
-  }
+  let [isVisible, setIsVisible] = useState(props.isVisible);
+
+  const onBackHandler = () => {
+    props.onBack();
+  };
 
   return (
-    <Overlay isVisible={props.isVisible} fullScreen={true}>
-      <View>
-        {MainComment}
-        <FlatList
-          data={comments}
-          keyExtractor={(comment) => comment.pk.toString()}
-          renderItem={({ item }) => <Comment comment={item} isHidden={false} />}
-        />
+    <Overlay isVisible={isVisible} fullScreen={true}>
+      <View style={{ height: "90%", backgroundColor: "yellow" }}>
+        <TouchableOpacity onPress={onBackHandler}>
+          <ListItem
+            leftIcon={{ name: "arrow-back" }}
+            title="Back"
+            containerStyle={{
+              padding: 3,
+              marginTop: 0,
+              marginBottom: 0,
+            }}
+          />
+        </TouchableOpacity>
+        <View style={{ paddingLeft: "5%" }}>
+          <ScrollView>
+            {/*}
+              <FlatList
+                style={{
+                  marginBottom: 30,
+                  paddingBottom: 30,
+                  backgroundColor: "blue",
+                }}
+                contentContainerStyle={{ paddingBottom: 50 }}
+                data={props.comments}
+                keyExtractor={(comment) => comment.pk.toString()}
+                renderItem={({ item }) => (
+                  <MaximisedComment comment={item} showReplies={true} />
+                )}
+                />*/}
+            {props.comments.map((comment) => (
+              <MaximisedComment
+                comment={comment}
+                showReplies={true}
+                key={comment.pk}
+              />
+            ))}
+          </ScrollView>
+        </View>
+        <KeyboardAvoidingView
+          behavior="position"
+          style={{ flex: 1, backgroundColor: "blue" }}
+        >
+          <TextInput placeholder="Write a comment..." />
+        </KeyboardAvoidingView>
       </View>
     </Overlay>
   );