diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..8be003822
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index c64b53754..6ef8a3252 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ dependency-reduced-pom.xml
 .factorypath
 .project
 .settings/
+.env
\ No newline at end of file
diff --git a/README.md b/README.md
index abacc66c5..532f8f448 100644
--- a/README.md
+++ b/README.md
@@ -14,11 +14,31 @@ Below, you'll find specific learning objectives for each tool.
 ## QuickStart Instructions
 
 - Fork and clone this repository to your machine
-- Open the codebase in an IDE like InteliJ or VSCode
+- Open the codebase in an IDE like IntelliJ or VSCode
 - Create a new Postgres database called `acebook_springboot_development`
 - Install Maven `brew install maven`
 - [Set up Auth0](https://journey.makers.tech/pages/auth0) (you only need the "Create an Auth0 app" section)
   - NOTE: Each member of the team will need their own Auth0 app
+  - Create a file .env with this structure:
+    > OKTA_ISSUER=<your-domain> <br>
+      OKTA_CLIENT_ID=<your-client-ID> <br>
+      OKTA_CLIENT_SECRET=<your_client_secret>
+  
+  Make sure the naming matches the one on the file application.yml: <br>
+    issuer: ${OKTA_ISSUER} <br>
+    client-id: ${OKTA_CLIENT_ID} <br>
+    client-secret: ${OKTA_CLIENT_SECRET} <br>
+  <br>
+- update your .gitignore with .env
+
+- add dependencies in pom.xml: <br>
+```xml
+  <dependency>
+      <groupId>com.okta.spring</groupId>
+      <artifactId>okta-spring-boot-starter</artifactId>
+      <version>3.0.7</version>
+    </dependency>
+```
 - Build the app and start the server, using the Maven command `mvn spring-boot:run`
 > The database migrations will run automatically at this point
 - Visit `http://localhost:8080/` to sign up
@@ -26,6 +46,8 @@ Below, you'll find specific learning objectives for each tool.
 ## Running the tests
 
 - Install chromedriver using `brew install chromedriver`
+- In the terminal, at the same level of the project run:  `psql -U username -d acebook_springboot_development`
+  - And after: `\i src/main/resources/db/seeds/R__new_dev_seed.sql`
 - Start the server in a terminal session `mvn spring-boot:run`
 - Open a new terminal session and navigate to the Acebook directory
 - Run your tests in the second terminal session with `mvn test`
diff --git a/pom.xml b/pom.xml
index 8daa56c4e..c292ae12d 100644
--- a/pom.xml
+++ b/pom.xml
@@ -95,8 +95,23 @@
             <groupId>org.thymeleaf.extras</groupId>
             <artifactId>thymeleaf-extras-springsecurity6</artifactId>
         </dependency>
+        <dependency>
+            <groupId>nz.net.ultraq.thymeleaf</groupId>
+            <artifactId>thymeleaf-layout-dialect</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>me.paulschwarz</groupId>
+            <artifactId>spring-dotenv</artifactId>
+            <version>3.0.0</version>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-devtools</artifactId>
+            <optional>true</optional>
+        </dependency>
     </dependencies>
 
+
     <build>
         <plugins>
             <plugin>
diff --git a/src/main/java/com/makersacademy/acebook/controller/SearchController.java b/src/main/java/com/makersacademy/acebook/controller/SearchController.java
new file mode 100644
index 000000000..60dedc638
--- /dev/null
+++ b/src/main/java/com/makersacademy/acebook/controller/SearchController.java
@@ -0,0 +1,26 @@
+package com.makersacademy.acebook.controller;
+
+import com.makersacademy.acebook.model.User;
+import com.makersacademy.acebook.repository.UserRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.List;
+
+@Controller
+public class SearchController {
+    @Autowired
+    UserRepository userRepository;
+
+    @GetMapping("/search")
+    public ModelAndView viewSearchResults(@RequestParam(value = "nav-search", required = false) String query) {
+        ModelAndView searchView = new ModelAndView("/search/index");
+        List<User> allUsers = (List<User>) userRepository.findAll();
+        searchView.addObject("users", allUsers);
+        return searchView;
+    }
+}
diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml
index 699e8575a..6066ee3fe 100644
--- a/src/main/resources/application.yml
+++ b/src/main/resources/application.yml
@@ -1,5 +1,5 @@
 okta:
   oauth2:
-    issuer: https://dev-edward-andress.uk.auth0.com/
+    issuer: ${OKTA_ISSUER}
     client-id: ${OKTA_CLIENT_ID}
     client-secret: ${OKTA_CLIENT_SECRET}
diff --git a/src/main/resources/db/migration/V3__create_tables.sql b/src/main/resources/db/migration/V3__create_tables.sql
new file mode 100644
index 000000000..4e67ba85e
--- /dev/null
+++ b/src/main/resources/db/migration/V3__create_tables.sql
@@ -0,0 +1,95 @@
+--UPDATE EXISTING USERS TABLE
+ALTER TABLE users
+ADD my_status VARCHAR(255),
+ADD profile_photo_url TEXT,
+ADD bio TEXT;
+
+--UPDATE EXISTING POSTS TABLE
+ALTER TABLE posts
+ADD photo_url TEXT,
+ADD created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+ADD user_id INT,
+ADD CONSTRAINT fk_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
+
+--CREATE POST_LIKES TABLE
+CREATE TABLE post_likes (
+  id bigserial PRIMARY KEY,
+  user_id INT,
+  post_id INT,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_post FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE
+);
+
+--CREATE COMMENTS TABLE
+CREATE TABLE comments (
+  id bigserial PRIMARY KEY,
+  post_id INT,
+  content TEXT,
+  commenter_id INT,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_post FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
+  CONSTRAINT fk_commenter FOREIGN KEY (commenter_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+--CREATE COMMENT_LIKES TABLE
+CREATE TABLE comment_likes (
+  id bigserial PRIMARY KEY,
+  user_id INT,
+  comment_id INT,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_comment FOREIGN KEY (comment_id) REFERENCES comments(id) ON DELETE CASCADE
+);
+
+--CREATE CHATS TABLE
+CREATE TABLE chats (
+  id bigserial PRIMARY KEY,
+  user_1_id INT,
+  user_2_id INT,
+  CONSTRAINT fk_user_1 FOREIGN KEY (user_1_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_user_2 FOREIGN KEY (user_2_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+--CREATE MESSAGES TABLE
+CREATE TABLE messages (
+  id bigserial PRIMARY KEY,
+  sender_id INT,
+  chat_id INT,
+  message TEXT,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_sender FOREIGN KEY (sender_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_chat FOREIGN KEY (chat_id) REFERENCES chats(id) ON DELETE CASCADE
+);
+
+--CREATE FRIENDSHIPS TABLE
+CREATE TABLE friendships (
+  id bigserial PRIMARY KEY,
+  sender_id INT,
+  receiver_id INT,
+  status VARCHAR(20) DEFAULT 'pending',
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_sender FOREIGN KEY (sender_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_receiver FOREIGN KEY (receiver_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+--CREATE NOTIFICATIONS TABLE
+CREATE TABLE notifications (
+  id bigserial PRIMARY KEY,
+  sender_id INT,
+  receiver_id INT,
+  type VARCHAR(50),
+  content VARCHAR(255),
+  is_read BOOLEAN DEFAULT FALSE,
+  post_id INT,
+  comment_id INT,
+  friendship_id INT,
+  chat_id INT,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_sender FOREIGN KEY (sender_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_receiver FOREIGN KEY (receiver_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_post FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
+  CONSTRAINT fk_comment FOREIGN KEY (comment_id) REFERENCES comments(id) ON DELETE CASCADE,
+  CONSTRAINT fk_friendship FOREIGN KEY (friendship_id) REFERENCES friendships(id) ON DELETE CASCADE,
+  CONSTRAINT fk_chat FOREIGN KEY (chat_id) REFERENCES chats(id) ON DELETE CASCADE
+);
\ No newline at end of file
diff --git a/src/main/resources/db/migration/V4__add_names_to_users.sql b/src/main/resources/db/migration/V4__add_names_to_users.sql
new file mode 100644
index 000000000..5ca8970fe
--- /dev/null
+++ b/src/main/resources/db/migration/V4__add_names_to_users.sql
@@ -0,0 +1,4 @@
+--UPDATE EXISTING USERS TABLE
+ALTER TABLE users
+ADD first_name VARCHAR(100),
+ADD last_name VARCHAR(100);
\ No newline at end of file
diff --git a/src/main/resources/db/migration/V5__change_foreign_keys_type.sql b/src/main/resources/db/migration/V5__change_foreign_keys_type.sql
new file mode 100644
index 000000000..bb65d88d7
--- /dev/null
+++ b/src/main/resources/db/migration/V5__change_foreign_keys_type.sql
@@ -0,0 +1,42 @@
+--UPDATE EXISTING POSTS TABLE
+ALTER TABLE posts
+ALTER COLUMN user_id TYPE BIGINT;
+
+--UPDATE POST_LIKES TABLE
+ALTER TABLE post_likes
+ALTER COLUMN user_id TYPE BIGINT,
+ALTER COLUMN post_id TYPE BIGINT;
+
+--UPDATE COMMENTS TABLE
+ALTER TABLE comments
+ALTER COLUMN post_id TYPE BIGINT,
+ALTER COLUMN commenter_id TYPE BIGINT;
+
+--UPDATE COMMENT_LIKES TABLE
+ALTER TABLE comment_likes
+ALTER COLUMN user_id TYPE BIGINT,
+ALTER COLUMN comment_id TYPE BIGINT;
+
+--UPDATE CHATS TABLE
+ALTER TABLE chats
+ALTER COLUMN user_1_id TYPE BIGINT,
+ALTER COLUMN user_2_id TYPE BIGINT;
+
+--UPDATE MESSAGES TABLE
+ALTER TABLE messages
+ALTER COLUMN sender_id TYPE BIGINT,
+ALTER COLUMN chat_id TYPE BIGINT;
+
+--UPDATE FRIENDSHIPS TABLE
+ALTER TABLE friendships
+ALTER COLUMN sender_id TYPE BIGINT,
+ALTER COLUMN receiver_id TYPE BIGINT;
+
+--UPDATE NOTIFICATIONS TABLE
+ALTER TABLE notifications
+ALTER COLUMN sender_id TYPE BIGINT,
+ALTER COLUMN receiver_id TYPE BIGINT,
+ALTER COLUMN post_id TYPE BIGINT,
+ALTER COLUMN comment_id TYPE BIGINT,
+ALTER COLUMN friendship_id TYPE BIGINT,
+ALTER COLUMN chat_id TYPE BIGINT;
diff --git a/src/main/resources/db/migration/V6__fix_typos_commas.sql b/src/main/resources/db/migration/V6__fix_typos_commas.sql
new file mode 100644
index 000000000..bb65d88d7
--- /dev/null
+++ b/src/main/resources/db/migration/V6__fix_typos_commas.sql
@@ -0,0 +1,42 @@
+--UPDATE EXISTING POSTS TABLE
+ALTER TABLE posts
+ALTER COLUMN user_id TYPE BIGINT;
+
+--UPDATE POST_LIKES TABLE
+ALTER TABLE post_likes
+ALTER COLUMN user_id TYPE BIGINT,
+ALTER COLUMN post_id TYPE BIGINT;
+
+--UPDATE COMMENTS TABLE
+ALTER TABLE comments
+ALTER COLUMN post_id TYPE BIGINT,
+ALTER COLUMN commenter_id TYPE BIGINT;
+
+--UPDATE COMMENT_LIKES TABLE
+ALTER TABLE comment_likes
+ALTER COLUMN user_id TYPE BIGINT,
+ALTER COLUMN comment_id TYPE BIGINT;
+
+--UPDATE CHATS TABLE
+ALTER TABLE chats
+ALTER COLUMN user_1_id TYPE BIGINT,
+ALTER COLUMN user_2_id TYPE BIGINT;
+
+--UPDATE MESSAGES TABLE
+ALTER TABLE messages
+ALTER COLUMN sender_id TYPE BIGINT,
+ALTER COLUMN chat_id TYPE BIGINT;
+
+--UPDATE FRIENDSHIPS TABLE
+ALTER TABLE friendships
+ALTER COLUMN sender_id TYPE BIGINT,
+ALTER COLUMN receiver_id TYPE BIGINT;
+
+--UPDATE NOTIFICATIONS TABLE
+ALTER TABLE notifications
+ALTER COLUMN sender_id TYPE BIGINT,
+ALTER COLUMN receiver_id TYPE BIGINT,
+ALTER COLUMN post_id TYPE BIGINT,
+ALTER COLUMN comment_id TYPE BIGINT,
+ALTER COLUMN friendship_id TYPE BIGINT,
+ALTER COLUMN chat_id TYPE BIGINT;
diff --git a/src/main/resources/db/seeds/R__new_dev_seed.sql b/src/main/resources/db/seeds/R__new_dev_seed.sql
new file mode 100644
index 000000000..0956d9f8c
--- /dev/null
+++ b/src/main/resources/db/seeds/R__new_dev_seed.sql
@@ -0,0 +1,308 @@
+DROP TABLE IF EXISTS notifications CASCADE;
+DROP TABLE IF EXISTS post_likes CASCADE;
+DROP TABLE IF EXISTS posts CASCADE;
+DROP TABLE IF EXISTS comment_likes CASCADE;
+DROP TABLE IF EXISTS comments CASCADE;
+DROP TABLE IF EXISTS messages CASCADE;
+DROP TABLE IF EXISTS chats CASCADE;
+DROP TABLE IF EXISTS friendships CASCADE;
+
+--CREATE POSTS TABLE
+CREATE TABLE posts (
+  id bigserial PRIMARY KEY,
+  content varchar(250) NOT NULL,
+  photo_url TEXT,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  user_id bigint,  -- Change from INT to BIGINT
+  CONSTRAINT fk_posts_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+--CREATE POST_LIKES TABLE
+CREATE TABLE post_likes (
+  id bigserial PRIMARY KEY,
+  user_id bigint,  -- Change from INT to BIGINT
+  post_id bigint,  -- Change from INT to BIGINT
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_postlikes_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_postlikes_post FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE
+);
+
+--CREATE COMMENTS TABLE
+CREATE TABLE comments (
+  id bigserial PRIMARY KEY,
+  post_id bigint,  -- Change from INT to BIGINT
+  content TEXT,
+  commenter_id bigint,  -- Change from INT to BIGINT
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_comments_post FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
+  CONSTRAINT fk_comments_commenter FOREIGN KEY (commenter_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+--CREATE COMMENT_LIKES TABLE
+CREATE TABLE comment_likes (
+  id bigserial PRIMARY KEY,
+  user_id bigint,  -- Change from INT to BIGINT
+  comment_id bigint,  -- Change from INT to BIGINT
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_commentlikes_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_commentlikes_comment FOREIGN KEY (comment_id) REFERENCES comments(id) ON DELETE CASCADE
+);
+
+--CREATE CHATS TABLE
+CREATE TABLE chats (
+  id bigserial PRIMARY KEY,
+  user_1_id bigint,  -- Change from INT to BIGINT
+  user_2_id bigint,  -- Change from INT to BIGINT
+  CONSTRAINT fk_chats_user_1 FOREIGN KEY (user_1_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_chats_user_2 FOREIGN KEY (user_2_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+--CREATE MESSAGES TABLE
+CREATE TABLE messages (
+  id bigserial PRIMARY KEY,
+  sender_id bigint,  -- Change from INT to BIGINT
+  chat_id bigint,  -- Change from INT to BIGINT
+  message TEXT,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_messages_sender FOREIGN KEY (sender_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_messages_chat FOREIGN KEY (chat_id) REFERENCES chats(id) ON DELETE CASCADE
+);
+
+--CREATE FRIENDSHIPS TABLE
+CREATE TABLE friendships (
+  id bigserial PRIMARY KEY,
+  sender_id bigint,  -- Change from INT to BIGINT
+  receiver_id bigint,  -- Change from INT to BIGINT
+  status VARCHAR(20) DEFAULT 'pending',
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_friendships_sender FOREIGN KEY (sender_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_friendships_receiver FOREIGN KEY (receiver_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+--CREATE NOTIFICATIONS TABLE
+CREATE TABLE notifications (
+  id bigserial PRIMARY KEY,
+  sender_id bigint,  -- Change from INT to BIGINT
+  receiver_id bigint,  -- Change from INT to BIGINT
+  type VARCHAR(50),
+  content VARCHAR(255),
+  is_read BOOLEAN DEFAULT FALSE,
+  post_id bigint null,  -- Change from INT to BIGINT
+  comment_id bigint null,  -- Change from INT to BIGINT
+  friendship_id bigint null,  -- Change from INT to BIGINT
+  chat_id bigint null,  -- Change from INT to BIGINT
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT fk_notifications_sender FOREIGN KEY (sender_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_notifications_receiver FOREIGN KEY (receiver_id) REFERENCES users(id) ON DELETE CASCADE,
+  CONSTRAINT fk_notifications_post FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
+  CONSTRAINT fk_notifications_comment FOREIGN KEY (comment_id) REFERENCES comments(id) ON DELETE CASCADE,
+  CONSTRAINT fk_notifications_friendship FOREIGN KEY (friendship_id) REFERENCES friendships(id) ON DELETE CASCADE,
+  CONSTRAINT fk_notifications_chat FOREIGN KEY (chat_id) REFERENCES chats(id) ON DELETE CASCADE
+);
+
+--INSERT POSTS SEEDS
+INSERT INTO posts (content, photo_url, user_id, created_at) VALUES
+('Sunday brunch 🥑🍞', 'https://plus.unsplash.com/premium_photo-1673581430690-0b42ab287ae9?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 1, '2024-11-25 08:00:00'),
+('Anyone else obsessed with the new season of Stranger Things? Can’t stop watching! 📺🍿', NULL, 2, '2024-11-01 09:00:00'),
+('Had the best weekend hike! Nature really does wonders for the soul. 🌲🌄', 'https://images.unsplash.com/photo-1501554728187-ce583db33af7?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 3, '2024-11-01 10:00:00'),
+('First day at my new job today! Excited for this new chapter. ✨ #NewBeginnings', NULL, 1, '2024-11-02 08:00:00'),
+('Halloween activities #Boo', 'https://plus.unsplash.com/premium_photo-1714618933590-febf07fce40c?q=80&w=2660&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 1, '2024-10-31 18:00:00'),
+('Starting the weekend right 💪 #FitnessGoals #Crossfit', 'https://images.unsplash.com/photo-1623874514711-0f321325f318?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 2, '2024-11-22 09:30:00'),
+('Caught a sunset that looked like it was straight out of a painting tonight. 🌅', 'https://plus.unsplash.com/premium_photo-1673002094195-f18084be89ce?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 3, '2024-11-02 10:45:00'),
+('He just knocked over my coffee. Good job he''s cute. 🐱☕️', 'https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 4, '2024-11-02 12:00:00'),
+('Tried a new recipe today: vegan meatballs! It was surprisingly delicious. 🍝 #CookingAdventures', 'https://images.unsplash.com/photo-1515516969-d4008cc6241a?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', 1, '2024-11-24 19:00:00'),
+('Weekend plans: Netflix and pizza, obviously. 🍕🍿 #LazySaturday', NULL, 2, '2024-10-28 16:00:00');
+
+--INSERT POST_LIKES SEEDS
+INSERT INTO post_likes (user_id, post_id, created_at) VALUES
+(5, 1, '2024-11-25 08:05:23'),
+(2, 1, '2024-11-25 09:12:47'),
+(3, 1, '2024-11-25 10:25:10'),
+(4, 1, '2024-11-26 14:15:00'),
+(1, 2, '2024-11-01 10:30:00'),
+(3, 2, '2024-11-01 15:40:23'),
+(5, 2, '2024-11-02 11:10:50'),
+(2, 3, '2024-11-02 12:45:00'),
+(4, 3, '2024-11-03 16:30:23'),
+(2, 5, '2024-11-02 08:25:30'),
+(1, 6, '2024-11-22 09:50:00'),
+(5, 6, '2024-11-22 10:35:45'),
+(3, 6, '2024-11-22 11:20:30'),
+(4, 6, '2024-11-22 13:55:40'),
+(4, 7, '2024-11-02 12:05:12'),
+(1, 8, '2024-10-29 15:25:33'),
+(5, 8, '2024-10-30 10:40:20'),
+(2, 9, '2024-11-24 20:05:02'),
+(1, 10, '2024-11-02 12:10:00'),
+(3, 10, '2024-11-02 12:30:15'),
+(4, 10, '2024-11-02 13:00:45');
+
+--INSERT COMMENT SEEDS
+INSERT INTO comments (post_id, content, commenter_id, created_at) VALUES
+(1, 'Looks delicious! 🍽️', 2, '2024-11-25 08:10:00'),
+(1, 'I love brunch! Can I join next time? 😅', 3, '2024-11-25 09:20:30'),
+(2, 'I’m obsessed too! Just finished the new season. 😱', 1, '2024-11-01 10:10:00'),
+(3, 'Sounds like an amazing hike! Where did you go?', 4, '2024-11-01 14:25:50'),
+(3, 'I need to get outdoors more! 🥾', 1, '2024-11-03 08:00:00'),
+(4, 'Congratulations! Wishing you all the best! 🎉', 2, '2024-11-02 08:15:00'),
+(4, 'Exciting! What’s your new role? ✨', 5, '2024-11-02 09:00:00'),
+(4, 'Good luck on your new journey! 👏', 3, '2024-11-02 10:30:30'),
+(5, 'Love the Halloween spirit! 🎃👻', 2, '2024-11-01 18:15:00'),
+(5, 'Halloween is my favorite time of year! 🎃', 1, '2024-11-02 09:00:00'),
+(6, 'I need to start working out like you! 🤩', 5, '2024-11-22 11:10:20'),
+(6, 'I love your motivation! 💯', 4, '2024-11-22 13:20:45'),
+(7, 'That’s a breathtaking view! 🌅', 5, '2024-11-02 11:00:00'),
+(8, 'Cats are the best troublemakers! 😹', 3, '2024-11-02 12:10:00'),
+(8, 'Haha, my cat does the same thing. So cute though! 🐱', 5, '2024-11-02 12:25:30'),
+(9, 'I need to try this recipe! Vegan meatballs sound amazing!', 3, '2024-11-24 20:10:00'),
+(9, 'This looks so good! Can you share the recipe? 😍', 5, '2024-11-24 20:30:30');
+
+--INSERT COMMENT LIKES
+INSERT INTO comment_likes (user_id, comment_id, created_at) VALUES
+(1, 1, '2024-11-25 08:15:00'),
+(3, 1, '2024-11-25 08:25:00'),
+(4, 2, '2024-11-25 09:30:00'),
+(1, 2, '2024-11-25 09:40:00'),
+(5, 3, '2024-11-25 10:00:00'),
+(2, 5, '2024-11-01 14:15:00'),
+(5, 5, '2024-11-01 15:00:00'),
+(1, 6, '2024-11-01 14:40:00'),
+(1, 7, '2024-11-01 15:00:00'),
+(1, 8, '2024-11-02 11:00:00'),
+(1, 9, '2024-11-02 09:15:00'),
+(4, 9, '2024-11-02 09:30:00'),
+(1, 10, '2024-11-22 11:15:00'),
+(2, 10, '2024-11-22 12:00:00'),
+(1, 11, '2024-11-02 11:10:00'),
+(4, 12, '2024-11-02 12:30:00'),
+(3, 13, '2024-11-02 12:30:00'),
+(4, 13, '2024-11-02 12:35:00'),
+(4, 14, '2024-11-24 20:40:00'),
+(4, 15, '2024-11-24 20:45:00');
+
+--INSERT CHATS
+INSERT INTO chats (user_1_id, user_2_id) VALUES
+(1, 2),
+(1, 3),
+(4, 5);
+
+--INSERT MESSAGES
+INSERT INTO messages (sender_id, chat_id, message, created_at) VALUES
+(1, 1, 'Hey, how are you?', '2024-11-15 09:00:00'),
+(2, 1, 'I''m good! How about you?', '2024-11-15 09:05:00'),
+(1, 1, 'Doing well! Just got back from a trip.', '2024-11-15 09:15:00'),
+(2, 1, 'That sounds awesome! Tell me more.', '2024-11-15 09:20:00'),
+
+(1, 2, 'Hey, just wanted to check in.', '2024-11-10 08:00:00'),
+(3, 2, 'Everything is great here! How are you?', '2024-11-10 08:10:00'),
+(1, 2, 'Can''t complain. Work is a bit hectic though.', '2024-11-10 08:15:00'),
+(3, 2, 'Same here! But we''ll get through it.', '2024-11-10 08:30:00'),
+
+(4, 3, 'Hey, thanks for adding me! It was great meeting you last night.', '2024-11-26 14:30:00'),
+(5, 3, 'No problem! It was so fun meeting you too. How''s everything going?', '2024-11-26 14:35:00');
+
+--INSERT FRIENDSHIP SEEDS
+--only pending, confirmed or blocked
+INSERT INTO friendships (sender_id, receiver_id, status, created_at) VALUES
+(1, 2, 'confirmed', '2024-09-15 10:00:00'),
+(1, 3, 'confirmed', '2024-09-20 14:30:00'),
+(1, 4, 'blocked', '2024-09-25 09:00:00'),
+(1, 5, 'confirmed', '2024-09-28 16:45:00'),
+(2, 3, 'confirmed', '2024-10-05 11:00:00'),
+(2, 4, 'confirmed', '2024-10-06 13:10:00'),
+(3, 5, 'pending', '2024-10-07 14:25:00'),
+(4, 5, 'confirmed', '2024-10-09 09:45:00');
+
+--INSERT NOTIFICATION SEEDS
+-- Notifications for Post Likes
+INSERT INTO notifications (sender_id, receiver_id, type, content, post_id, created_at, is_read) VALUES
+(5, 1, 'like', 'Jess liked your post', 1, '2024-11-25 08:05:23', TRUE),
+(2, 1, 'like', 'Tobi liked your post', 1, '2024-11-25 09:12:47', TRUE),
+(3, 1, 'like', 'Shaeera liked your post', 1, '2024-11-25 10:25:10', TRUE),
+(4, 1, 'like', 'Alessandro liked your post', 1, '2024-11-26 14:15:00', FALSE),
+(1, 2, 'like', 'Valeria liked your post', 2, '2024-11-01 10:30:00', TRUE),
+(3, 2, 'like', 'Shaeera liked your post', 2, '2024-11-01 15:40:23', TRUE),
+(5, 2, 'like', 'Jess liked your post', 2, '2024-11-02 11:10:50', TRUE),
+(2, 3, 'like', 'Tobi liked your post', 3, '2024-11-02 12:45:00', TRUE),
+(4, 3, 'like', 'Alessandro liked your post', 3, '2024-11-03 16:30:23', TRUE),
+(2, 1, 'like', 'Tobi liked your post', 5, '2024-11-02 08:25:30', TRUE),
+(1, 2, 'like', 'Valeria liked your post', 6, '2024-11-22 09:50:00', TRUE),
+(5, 2, 'like', 'Jess liked your post', 6, '2024-11-22 10:35:45', TRUE),
+(3, 2, 'like', 'Shaeera liked your post', 6, '2024-11-22 11:20:30', TRUE),
+(4, 2, 'like', 'Alessandro liked your post', 6, '2024-11-22 13:55:40', TRUE),
+(4, 3, 'like', 'Alessandro liked your post', 7, '2024-11-02 12:05:12', TRUE),
+(1, 4, 'like', 'Valeria liked your post', 8, '2024-10-29 15:25:33', TRUE),
+(5, 4, 'like', 'Jess liked your post', 8, '2024-10-30 10:40:20', TRUE),
+(2, 1, 'like', 'Tobi liked your post', 9, '2024-11-24 20:05:02', TRUE),
+(1, 2, 'like', 'Valeria liked your post', 10, '2024-11-02 12:10:00', TRUE),
+(3, 2, 'like', 'Shaeera liked your post', 10, '2024-11-02 12:30:15', TRUE),
+(4, 2, 'like', 'Alessandro liked your post', 10, '2024-11-02 13:00:45', TRUE);
+
+-- Notifications for Comments
+INSERT INTO notifications (sender_id, receiver_id, type, content, post_id, created_at, is_read) VALUES
+(2, 1, 'comment', 'Tobi commented on your post', 1, '2024-11-25 08:10:00', TRUE),
+(3, 1, 'comment', 'Shaeera commented on your post', 1, '2024-11-25 09:20:30', TRUE),
+(1, 2, 'comment', 'Valeria commented on your post', 2, '2024-11-01 10:10:00', TRUE),
+(4, 3, 'comment', 'Alessandro commented on your post', 3, '2024-11-01 14:25:50', TRUE),
+(1, 3, 'comment', 'Valeria commented on your post', 3, '2024-11-03 08:00:00', TRUE),
+(2, 1, 'comment', 'Tobi commented on your post', 4, '2024-11-02 08:15:00', TRUE),
+(5, 1, 'comment', 'Jess commented on your post', 4, '2024-11-02 09:00:00', TRUE),
+(3, 1, 'comment', 'Shaeera commented on your post', 4, '2024-11-02 10:30:30', TRUE),
+(2, 1, 'comment', 'Tobi commented on your post', 5, '2024-11-01 18:15:00', TRUE),
+(1, 1, 'comment', 'Valeria commented on your post', 5, '2024-11-02 09:00:00', TRUE),
+(5, 2, 'comment', 'Jess commented on your post', 6, '2024-11-22 11:10:20', TRUE),
+(4, 2, 'comment', 'Alessandro commented on your post', 6, '2024-11-22 13:20:45', TRUE),
+(5, 3, 'comment', 'Jess commented on your post', 7, '2024-11-02 11:00:00', TRUE),
+(3, 4, 'comment', 'Shaeera commented on your post', 8, '2024-11-02 12:10:00', TRUE),
+(5, 4, 'comment', 'Jess commented on your post', 8, '2024-11-02 12:25:30', TRUE),
+(3, 1, 'comment', 'Shaeera commented on your post', 9, '2024-11-24 20:10:00', TRUE),
+(5, 1, 'comment', 'Jess commented on your post', 9, '2024-11-24 20:30:30', TRUE);
+
+-- Notifications for Comment Likes
+INSERT INTO notifications (sender_id, receiver_id, type, content, comment_id, created_at, is_read) VALUES
+(1, 2, 'like', 'Valeria liked your comment', 1, '2024-11-25 08:15:00', TRUE),
+(3, 2, 'like', 'Shaeera liked your comment', 1, '2024-11-25 08:25:00', TRUE),
+(4, 3, 'like', 'Alessandro liked your comment', 2, '2024-11-25 09:30:00', TRUE),
+(1, 3, 'like', 'Valeria liked your comment', 2, '2024-11-25 09:40:00', TRUE),
+(5, 1, 'like', 'Jess liked your comment', 3, '2024-11-25 10:00:00', TRUE),
+(2, 1, 'like', 'Tobi liked your comment', 5, '2024-11-01 14:15:00', TRUE),
+(5, 1, 'like', 'Jess liked your comment', 5, '2024-11-01 15:00:00', TRUE),
+(1, 2, 'like', 'Valeria liked your comment', 6, '2024-11-01 14:40:00', TRUE),
+(1, 5, 'like', 'Valeria liked your comment', 7, '2024-11-01 15:00:00', TRUE),
+(1, 3, 'like', 'Valeria liked your comment', 8, '2024-11-02 11:00:00', TRUE),
+(1, 2, 'like', 'Valeria liked your comment', 9, '2024-11-02 09:15:00', TRUE),
+(4, 2, 'like', 'Alessandro liked your comment', 9, '2024-11-02 09:30:00', TRUE),
+(1, 1, 'like', 'Valeria liked your comment', 10, '2024-11-22 11:15:00', TRUE),
+(2, 1, 'like', 'Valeria liked your comment', 10, '2024-11-22 12:00:00', TRUE),
+(1, 5, 'like', 'Valeria liked your comment', 11, '2024-11-02 11:10:00', TRUE),
+(4, 4, 'like', 'Alessandro liked your comment', 12, '2024-11-02 12:30:00', TRUE),
+(3, 5, 'like', 'Shaeera liked your comment', 13, '2024-11-02 12:30:00', TRUE),
+(4, 5, 'like', 'Alessandro liked your comment', 13, '2024-11-02 12:35:00', TRUE),
+(4, 3, 'like', 'Alessandro liked your comment', 14, '2024-11-24 20:40:00', TRUE),
+(4, 5, 'like', 'Alessandro liked your comment', 15, '2024-11-24 20:45:00', TRUE);
+
+-- Notifications for Friend Requests
+INSERT INTO notifications (sender_id, receiver_id, type, content, friendship_id, created_at, is_read) VALUES
+(1, 2, 'friend_request', 'Valeria sent you a friend request', 1, '2024-09-15 10:00:00', TRUE),
+(1, 3, 'friend_request', 'Valeria sent you a friend request', 2, '2024-09-20 14:30:00', TRUE),
+(1, 4, 'friend_request', 'Valeria sent you a friend request', 3, '2024-09-28 16:45:00', TRUE),
+(1, 5, 'friend_request', 'Valeria sent you a friend request', 4, '2024-10-05 11:00:00', TRUE),
+(2, 3, 'friend_request', 'Tobi sent you a friend request', 5, '2024-10-06 13:10:00', TRUE),
+(2, 4, 'friend_request', 'Tobi sent you a friend request', 6, '2024-10-07 14:25:00', TRUE),
+(3, 5, 'friend_request', 'Shaeera sent you a friend request', 7, '2024-10-07 14:25:00', TRUE),
+(4, 5, 'friend_request', 'Alessandro sent you a friend request', 8, '2024-10-09 09:45:00', TRUE);
+
+-- Notifications for Messages
+INSERT INTO notifications (sender_id, receiver_id, type, content, chat_id, created_at, is_read) VALUES
+(1, 2, 'message', 'Valeria sent you a message: "Hey, how are you?"', 1, '2024-11-15 09:00:00', TRUE),
+(2, 1, 'message', 'Tobi sent you a message: "I''m good! How about you?"', 1, '2024-11-15 09:05:00', TRUE),
+(1, 2, 'message', 'Valeria sent you a message: "Doing well! Just got back from a trip."', 1, '2024-11-15 09:15:00', TRUE),
+(2, 1, 'message', 'Tobi sent you a message: "That sounds awesome! Tell me more."', 1, '2024-11-15 09:20:00', TRUE),
+
+(1, 3, 'message', 'Valeria sent you a message: "Hey, just wanted to check in."', 2, '2024-11-10 08:00:00', TRUE),
+(3, 1, 'message', 'Shaeera sent you a message: "Everything is great here! How are you?"', 2, '2024-11-10 08:10:00', TRUE),
+(1, 3, 'message', 'Valeria sent you a message: "Can''t complain. Work is a bit hectic though."', 2, '2024-11-10 08:15:00', TRUE),
+(3, 1, 'message', 'Shaeera sent you a message: "Same here! But we''ll get through it."', 2, '2024-11-10 08:30:00', TRUE),
+
+(4, 5, 'message', 'Alessandro sent you a message: "Hey, thanks for adding me! It was great meeting you last night."', 3, '2024-11-26 14:30:00', TRUE),
+(5, 4, 'message', 'Jess sent you a message: "No problem! It was so fun meeting you too. How''s everything going?"', 3, '2024-11-26 14:35:00', FALSE);
\ No newline at end of file
diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
new file mode 100644
index 000000000..cb16d64ef
--- /dev/null
+++ b/src/main/resources/static/css/main.css
@@ -0,0 +1,43 @@
+body {
+    margin: 0;
+    font-family: Roboto;
+    background-color: var(--light-grey);
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+:root {
+    --acebook-blue: #3A5997;
+    --light-grey: #F3F4F7;
+    --default-box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
+}
+
+.blue_btn {
+    background-color: var(--acebook-blue);
+    color: white;
+    border-radius: 16px;
+    height: 2rem;
+    width: 8rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.white_btn {
+    background-color: white;
+    border: 2px solid var(--acebook-blue);
+    color: var(--acebook-blue);
+    border-radius: 16px;
+    height: 2rem;
+    width: 8rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.clickable:hover {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/nav.css b/src/main/resources/static/css/nav.css
new file mode 100644
index 000000000..62e22c786
--- /dev/null
+++ b/src/main/resources/static/css/nav.css
@@ -0,0 +1,53 @@
+nav {
+    height: 4rem;
+    background-color: var(--acebook-blue);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2rem;
+}
+
+nav ul {
+    margin: 0;
+}
+
+.navbar_left_container, .navbar_right_container {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 2rem;
+}
+
+.nav_icon_container {
+    background-color: white;
+    height: 2.5rem;
+    width: 2.5rem;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav_logo {
+    font-size: 3.5rem;
+    color: var(--acebook-blue);
+    font-weight: 900;
+    margin-top: -0.6rem;
+}
+
+.fa-nav {
+    font-size: 1.5rem;
+}
+
+.nav_icon_search {
+    background-color: white;
+    height: 2.5rem;
+    width: 16rem;
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    padding-left: 1rem;
+}
+
+.nav_icon_search input {
+    all: unset;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/main.css b/src/main/resources/static/css/posts.css
similarity index 100%
rename from src/main/resources/static/main.css
rename to src/main/resources/static/css/posts.css
diff --git a/src/main/resources/static/css/search.css b/src/main/resources/static/css/search.css
new file mode 100644
index 000000000..973aea839
--- /dev/null
+++ b/src/main/resources/static/css/search.css
@@ -0,0 +1,40 @@
+.search_header {
+    text-align: center;
+    color: var(--acebook-blue);
+    font-size: 3rem;
+    margin-top: 3rem;
+}
+
+.search_results_container {
+    max-width: 32rem;
+    margin: 0 auto 4rem auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.search_results_container {
+    list-style: none;
+}
+
+.search_results_card {
+    background-color: white;
+    height: 6rem;
+    border-radius: 16px;
+    box-shadow: var(--default-box-shadow);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2rem;
+}
+
+.search_results_card p {
+    margin: 0;
+}
+
+.search_mutual {
+    font-size: 0.8rem;
+    font-weight: 300;
+    padding-left: 1rem;
+    padding-top: 0.5rem;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/nav.html b/src/main/resources/templates/fragments/nav.html
new file mode 100644
index 000000000..97204c167
--- /dev/null
+++ b/src/main/resources/templates/fragments/nav.html
@@ -0,0 +1,23 @@
+<nav th:fragment="navigation" xmlns:th="http://www.thymeleaf.org">
+  <div class="navbar_left_container">
+    <div class="nav_icon_container">
+      <a class="clickable nav_logo" href="/posts">a</a>
+    </div>
+    <div class="nav_icon_search">
+      <form action="/search" method="GET">
+        <input type="text" name="nav" placeholder="Search..." />
+      </form>
+    </div>
+  </div>
+  <div class="navbar_right_container">
+    <div class="clickable nav_icon_container">
+      <a><i class="fa-solid fa-plus fa-nav"></i></a>
+    </div>
+    <div class="clickable nav_icon_container">
+      <a><i class="fa-solid fa-bolt fa-nav"></i></a>
+    </div>
+    <div class="clickable nav_icon_container">
+      <a><i class="fa-solid fa-user fa-nav"></i></a>
+    </div>
+  </div>
+</nav>
\ No newline at end of file
diff --git a/src/main/resources/templates/posts/index.html b/src/main/resources/templates/posts/index.html
index b5ef169f1..af89b5281 100644
--- a/src/main/resources/templates/posts/index.html
+++ b/src/main/resources/templates/posts/index.html
@@ -4,10 +4,16 @@
     <head lang="en">
         <meta charset="UTF-8"/>
         <title>Acebook</title>
-        <link rel="stylesheet" href="/main.css" />
+        <link rel="stylesheet" href="/css/main.css" />
+        <link rel="stylesheet" href="/css/posts.css" />
+        <link rel="stylesheet" href="/css/nav.css" />
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
     </head>
     <body>
-
+    <div th:insert="fragments/nav :: navigation"></div>
     <h1>Posts</h1>
 
     <div sec:authorize="isAuthenticated()" id="greeting">
diff --git a/src/main/resources/templates/search/index.html b/src/main/resources/templates/search/index.html
new file mode 100644
index 000000000..11652d690
--- /dev/null
+++ b/src/main/resources/templates/search/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org"
+      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5" >
+<head lang="en">
+  <meta charset="UTF-8"/>
+  <title>Acebook</title>
+  <link rel="stylesheet" href="/css/main.css" />
+  <link rel="stylesheet" href="/css/search.css" />
+  <link rel="stylesheet" href="/css/nav.css" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div th:insert="fragments/nav :: navigation"></div>
+  <h1 class="search_header">Search Results</h1>
+
+  <div class="search_results_container">
+    <div th:each="user: ${users}" class="search_results_card">
+      <div>
+        <p th:text="${user.username}"></p>
+        <!-- Hardcoded - to be replaced later -->
+        <p class="search_mutual">3 mutual friends</p>
+      </div>
+      <!-- Hardcoded as one button type - amend so depends on if already friends -->
+<!--      <div class="clickable white_btn"><a>Message</a></div>-->
+      <div class="clickable blue_btn"><a>Add Friend</a></div>
+    </div>
+  </div>
+
+
+</body>
+</html>