diff --git a/client/src/App.js b/client/src/App.js
index 60f55680..741dbe03 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -37,17 +37,17 @@ function App() {
           <Route path="/login" exact>
             <Login />
           </Route>
-          <Route path="/course/:courseid" exact>
+          <PrivateRoute path="/course/:courseid" exact>
             <NavigationWrapper>
               <ClassView classroomName={"CIS 422"} />
             </NavigationWrapper>
-          </Route>
-          <PrivateRoute path="/postView" exact>
+          </PrivateRoute>
+          <PrivateRoute path="/course/:courseid/post/:postid" exact>
             <NavigationWrapper>
               <CommentView classroomName={"CIS 422"} />
             </NavigationWrapper>
           </PrivateRoute>
-          <PrivateRoute path="/postForm" exact>
+          <Route path="/postForm" exact>
             <NavigationWrapper></NavigationWrapper>
           </PrivateRoute>
         </Switch>
diff --git a/client/src/components/common/requests/Fetch.js b/client/src/components/common/requests/Fetch.js
new file mode 100644
index 00000000..d3361121
--- /dev/null
+++ b/client/src/components/common/requests/Fetch.js
@@ -0,0 +1,31 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+
+const Fetch = ({ type, url = process.env.REACT_APP_SERVER_URL, endpoint }) => {
+  const [res, setRes] = useState({ data: null, errors: null, loading: false });
+  useEffect(() => {
+    setRes({ ...res, loading: true });
+    axios[type](url + endpoint, { withCredentials: true })
+      .then((response) => {
+        setRes({ ...res, data: response.data, loading: false });
+      })
+      .catch((err) => {
+        if (err.response && err.response.data) {
+          // Set the errors provided by our API request
+          console.log(err.response.data.errors);
+          setRes({ ...res, errors: err.response.data.errors, loading: false });
+        } else {
+          setRes({
+            ...res,
+            errors: [
+              "There was an error creating the course. Please try again.",
+            ],
+            loading: false,
+          });
+        }
+      });
+  }, []);
+  return res;
+};
+
+export default Fetch;
diff --git a/client/src/components/forumsAndPosts/Post.js b/client/src/components/forumsAndPosts/Post.js
index 8d4610ef..cb103e77 100644
--- a/client/src/components/forumsAndPosts/Post.js
+++ b/client/src/components/forumsAndPosts/Post.js
@@ -20,9 +20,9 @@ const Post = ({
 
       <PinIcon style={pin} src={PinImg} />
 
-      {isCondensed && <PostContent>{postContent}</PostContent>}
+      {!isCondensed && <PostContent>{postContent}</PostContent>}
 
-      {isCondensed && <hr style={HRStyle} />}
+      {!isCondensed && <hr style={HRStyle} />}
 
       <PostMetaContentWrapper className="meta">
         <UserIcon src="./icons8_note.svg" />
@@ -88,7 +88,7 @@ const PostWrapper = styled.div`
 
 const PostTitle = styled.h2`
   /* margin: 1em 0 0.5em 2em; */
-  font-size: ${(props) => (props.isCondensed && "18px") || "14px"};
+  font-size: ${(props) => (!props.isCondensed && "18px") || "14px"};
 `;
 
 const PinIcon = styled.img`
diff --git a/client/src/components/forumsAndPosts/PostView.js b/client/src/components/forumsAndPosts/PostView.js
index 7f3c87f6..7553f460 100644
--- a/client/src/components/forumsAndPosts/PostView.js
+++ b/client/src/components/forumsAndPosts/PostView.js
@@ -8,21 +8,45 @@ import LineWidthImg from "../../imgs/line-width.svg";
 import HollowPinImg from "../../imgs/pin-hollow.svg";
 import { useParams } from "react-router-dom";
 import axios from "axios";
+import Fetch from "../common/requests/Fetch";
 
-const testTitle = "This is temp post title text?";
-const testContent =
-  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis labore saepe voluptatem natus officia molestiae beatae repudiandae nisi. Aspernatur dolores sequi ipsum quaerat facilis.";
-const testName = "Seth Tal";
+const createPost = (post) => {
+  return (
+    <Post
+      // key=
+      postTitle={post.title}
+      postContent={post.content}
+      posterName={post.postedby.first + " " + post.postedby.last}
+      isPinned={post.isPinned}
+      isCondensed={false}
+    />
+  );
+};
+
+// Sorts the posts by pinned/date
+const generateSections = (data) => {
+  let posts = { pinned: [], other: [] };
+  if (data) {
+    data.forEach((post) => {
+      if (post.isPinned) {
+        posts.pinned.push(createPost(post));
+      } else {
+        posts.other.push(createPost(post));
+      }
+    });
+  }
+  return posts;
+};
 
 const PostView = (props) => {
   const [isCondensed, setCondensedState] = useState(true);
   // Retrieves the courseid from the url parameters
   const { courseid } = useParams();
-
-  // THIS IS WHERE WE WOULD RETRIEVE POSTS
-  // useEffect(() => {
-  //   axios.get(process.env.REACT_APP_SERVER_URL + "/api/")
-  // }, [courseid]);
+  const { data, errors, loading } = Fetch({
+    type: "get",
+    endpoint: "/api/courses/" + courseid + "/posts",
+  });
+  let posts = generateSections(data);
 
   return (
     <>
@@ -48,76 +72,22 @@ const PostView = (props) => {
               {" Most Recent "}
             </Button>
           </SortingOptions>
-          <PostGroupingHeader>
-            {" "}
-            <img
-              src={HollowPinImg}
-              style={{ width: "18px", height: "18px" }}
-            />{" "}
-            Pinned Posts
-          </PostGroupingHeader>
-
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={true}
-            isCondensed={isCondensed}
-          />
-          <PostGroupingHeader>This Week</PostGroupingHeader>
-
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
-          <Post
-            postTitle={testTitle}
-            postContent={testContent}
-            posterName={testName}
-            isPinned={false}
-            isCondensed={isCondensed}
-          />
+          {posts.pinned.length > 0 && (
+            <PostGroupingHeader>
+              <img
+                src={HollowPinImg}
+                style={{ width: 18, height: 18, marginRight: 5 }}
+              />
+              Pinned Posts
+            </PostGroupingHeader>
+          )}
+          {posts.pinned}
+          {posts.other.length > 0 && (
+            <PostGroupingHeader>Other Posts</PostGroupingHeader>
+          )}
+          {posts.other}
         </ScrollingDiv>
       </PostFeed>
-
       {/* Displays options panel on the right of the webpage */}
       <Options />
     </>
@@ -189,19 +159,18 @@ const ScrollingDiv = styled.div`
 `;
 
 const SortingOptions = styled.div`
+  position: absolute;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
-
+  padding-right: 65px;
   width: 100%;
   margin: 2.2em 0 1em 0;
 `;
 
 const PostGroupingHeader = styled.div`
-  margin: 1em 0;
-
-  font-family: Roboto;
+  margin: 2.2em 0 0em 0;
   font-size: 1.25em;
   font-weight: 500;
 `;
diff --git a/client/src/components/forums_and_posts/ClassView.js b/client/src/components/forums_and_posts/ClassView.js
deleted file mode 100644
index 07a4f18f..00000000
--- a/client/src/components/forums_and_posts/ClassView.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import SectionTab from "./SectionTab";
-import Sidebar from "./Sidebar";
-import PostView from "./PostView";
-import axios from "axios";
-
-const ClassView = ({ classroomName, setPosts }) => {
-  const [section, selectSection] = useState("All Posts");
-  console.log(section);
-
-  const [form, setForm] = useState({
-    title: null,
-    content: null,
-    loading: false,
-    errors: null,
-  });
-
-  const handleChange = (e) => {
-    setForm({
-      ...form,
-      [e.target.name]: e.target.value,
-    });
-  };
-
-  const sendPostRequest = () => {
-    setForm({ ...form, loading: true });
-    setTimeout(() => {
-      const endpoint = "/api/<course_id>/posts";
-      const data = {
-        title: form.title,
-        content: form.content,
-      };
-      axios
-        .post(process.env.REACT_APP_SERVER_URL + endpoint, data, {
-          withCredentials: true,
-        })
-        .then((res) => {
-          setPosts(res.data);
-        })
-        .catch((err) => {
-          if (err.response && err.response.data) {
-            console.log(err.response.data.errors);
-            setForm({
-              ...form,
-              errors: err.response.data.errors,
-              loading: false,
-            });
-          } else {
-            setForm({
-              ...form,
-              loading: false,
-              errors: ["There was an error making the post. Please try again."],
-            });
-          }
-        });
-    }, 1000);
-  };
-  return (
-    <ClassViewWrapper>
-      <Sidebar
-        classroomName={classroomName}
-        selectSection={selectSection}
-        section={section}
-      />
-
-      {/* View of current Post Feed - 
-          TODO: should populate based on selected tab */}
-      <PostView />
-    </ClassViewWrapper>
-  );
-};
-
-SectionTab.propTypes = {
-  ClassroomName: PropTypes.string,
-};
-
-export default ClassView;
-
-const ClassViewWrapper = styled.div`
-  display: flex;
-`;
diff --git a/server/resources/posts.py b/server/resources/posts.py
index 78df165c..fc3977da 100644
--- a/server/resources/posts.py
+++ b/server/resources/posts.py
@@ -29,7 +29,8 @@ def post(self, course_id=None):
                         "_id": current_user.anonymousId, "anonymous": anonymous}
         else:
             postedby = {"first": current_user.first, "last": current_user.last,
-                        "_id": current_user._id, "anonymous": anonymous}
+                        "_id": current_user._id, "anonymous": anonymous,
+                        "picture": current_user.picture}
 
         # Add post to MongoDB
         post = Post(courseid=course_id, postedby=postedby, title=args.title,