diff --git a/src/components/Account/Friends/MyFriends.jsx b/src/components/Account/Friends/MyFriends.jsx
new file mode 100644
index 0000000..9585182
--- /dev/null
+++ b/src/components/Account/Friends/MyFriends.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { List, ListItem, ListItemText, Button, Container } from '@mui/material';
+import { removeFriend } from '../../../utilities/friendService';
+import AppBar from '../../AppBar/AppBar';
+import NavigationBar from '../../NavigationBar/NavigationBar';
+import "./Friends.css";
+
+function MyFriends({ user, friends, loadFriends }) {
+  const handleUnfriend = async (friendId) => {
+    await removeFriend(user.uid, friendId);
+    await loadFriends();
+  };
+
+  return (
+    <div>
+      <AppBar />
+      <Container className="my-friends-page">
+        <h2>My Friends</h2>
+        <List>
+          {friends.length === 0 && <p>You have no friends yet.</p>}
+          {friends.map((friend) => (
+            <ListItem key={friend.id}>
+              <ListItemText
+                primary={friend.displayName || 'Unknown'}
+                secondary={friend.email || friend.id}
+              />
+              <Button variant="outlined" onClick={() => handleUnfriend(friend.id)}>Unfriend</Button>
+            </ListItem>
+          ))}
+        </List>
+      </Container>
+      <NavigationBar />
+    </div>
+  );
+}
+
+export default MyFriends;
diff --git a/src/components/Comment/Comment.css b/src/components/Comment/Comment.css
index d438362..9c385f5 100644
--- a/src/components/Comment/Comment.css
+++ b/src/components/Comment/Comment.css
@@ -10,3 +10,7 @@
 .comments-list {
     margin-top: 20px;
 }
+
+.comment-container {
+    margin-top: 80px;
+}
\ No newline at end of file
diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.jsx
index da948ba..0d6040b 100644
--- a/src/components/Comment/Comment.jsx
+++ b/src/components/Comment/Comment.jsx
@@ -7,6 +7,7 @@ import AppBar from '../AppBar/AppBar';
 import NavigationBar from '../NavigationBar/NavigationBar';
 import Post from '../Post/Post';
 import { useParams } from 'react-router-dom';
+import './Comment.css';
 
 function Comment({ userName, profilePic }) {
     const post_id = useParams().post_id;
@@ -86,7 +87,7 @@ function Comment({ userName, profilePic }) {
     return (
         <div>
             <AppBar />
-            <Container maxWidth="sm">
+            <Container className="comment-container" maxWidth="sm">
                 {/* <Typography variant="h5" gutterBottom>
                     Comments for {post_id}
                 </Typography> */}
diff --git a/src/components/RatingHistory/RatingHistory.css b/src/components/RatingHistory/RatingHistory.css
index e26dcea..2b37fbd 100644
--- a/src/components/RatingHistory/RatingHistory.css
+++ b/src/components/RatingHistory/RatingHistory.css
@@ -5,6 +5,12 @@
 }
 
 .rating-history-page {
-    padding: 3em;
-    height: 100vh;
+    padding-bottom: 3em;
+    margin-top: 2px;
+    margin-bottom: auto;
+}
+
+.profile-container {
+    text-align: center;
+    padding-top: 100px;
 }
\ No newline at end of file
diff --git a/src/components/RatingHistory/RatingHistory.jsx b/src/components/RatingHistory/RatingHistory.jsx
index 1bc3532..c86a0f5 100644
--- a/src/components/RatingHistory/RatingHistory.jsx
+++ b/src/components/RatingHistory/RatingHistory.jsx
@@ -14,25 +14,25 @@ function RatingHistory({ userName, profilePic, filteredPost }) {
     return (
         <div>
             <AppBar />
-            <Container className='rating-history-page'>
+            <Container>
 
                 <Container maxWidth="xs" style={{ textAlign: 'center', paddingTop: '20px' }}>
                 </Container>
 
-                <Container maxWidth="sm">
+                <Container className="rating-history-page" maxWidth="sm">
                     <Box paddingBottom="30px">
-                    <Stack spacing={3}>
-                        { filteredPost.length === 0 ?
-                            (<p>Loading posts...</p>) :
-                            (filteredPost
-                                .slice()
-                                .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
-                                <div key={post.id}>
-                                <Post post={post} friends={fake_friends} postAnonymously={false}/>
-                                </div>)
-                            )
-                        }
-                    </Stack>
+                        <Stack spacing={3}>
+                            { filteredPost.length === 0 ?
+                                (<p>Loading posts...</p>) :
+                                (filteredPost
+                                    .slice()
+                                    .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
+                                    <div key={post.id}>
+                                    <Post post={post} friends={fake_friends} postAnonymously={false}/>
+                                    </div>)
+                                )
+                            }
+                        </Stack>
                     </Box>
                 </Container>
                 <NavigationBar />
diff --git a/src/services/friendService.js b/src/utilities/friendService.js
similarity index 98%
rename from src/services/friendService.js
rename to src/utilities/friendService.js
index fb6874e..733e531 100644
--- a/src/services/friendService.js
+++ b/src/utilities/friendService.js
@@ -1,4 +1,4 @@
-import { db } from '../utilities/firebase';
+import { db } from './firebase';
 import {
   collection,
   doc,