diff --git a/src/main/java/com/example/init/controllers/QuizController.java b/src/main/java/com/example/init/controllers/QuizController.java
index f8fc358..2681886 100644
--- a/src/main/java/com/example/init/controllers/QuizController.java
+++ b/src/main/java/com/example/init/controllers/QuizController.java
@@ -1,11 +1,17 @@
 package com.example.init.controllers;
 
 import com.example.init.models.Quiz;
+import com.example.init.models.ResultsQuiz;
+import com.example.init.repositories.CodersRepository;
+import com.example.init.repositories.ResultsRepo;
+
 import com.google.gson.Gson;
 import com.google.gson.reflect.TypeToken;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
 
 import java.io.BufferedReader;
 import java.io.IOException;
@@ -13,11 +19,17 @@
 import java.lang.reflect.Type;
 import java.net.HttpURLConnection;
 import java.net.URL;
+import java.security.Principal;
 import java.util.List;
 
 @Controller
 public class QuizController {
 
+        @Autowired
+        ResultsRepo resultsRepo;
+        @Autowired
+        CodersRepository codersRepository;
+
         @GetMapping("/quiz")
         public String getQuiz(Model model) throws IOException {
                 Gson gson = new Gson();
@@ -33,4 +45,18 @@ public String getQuiz(Model model) throws IOException {
                 bufferedReader.close();
                 return "quiz";
         }
-}
\ No newline at end of file
+
+        @PostMapping("/submit")
+        public String submit(Model model, Principal principal) {
+                ResultsQuiz resultsQuiz = new ResultsQuiz();
+                // ApplicationUser applicationUser = new ApplicationUser();
+                Quiz quiz = new Quiz();
+                // resultsQuiz.setTotalCorrect(quiz.getAnswers());
+                resultsQuiz.setUsername(codersRepository.findByUsername(principal.getName()));
+                resultsQuiz.setTotalCorrect(resultsQuiz.getTotalCorrect());
+                model.addAttribute("quiz", resultsRepo.save(resultsQuiz));
+                return "result";
+
+        }
+
+}
diff --git a/src/main/java/com/example/init/controllers/User.java b/src/main/java/com/example/init/controllers/User.java
index 80f4938..ba4de92 100644
--- a/src/main/java/com/example/init/controllers/User.java
+++ b/src/main/java/com/example/init/controllers/User.java
@@ -1,8 +1,10 @@
 package com.example.init.controllers;
 
 import com.example.init.models.Coders;
+import com.example.init.models.Comment;
 import com.example.init.models.Post;
 import com.example.init.repositories.CodersRepository;
+import com.example.init.repositories.CommentRepository;
 import com.example.init.repositories.ContentRepository;
 
 import org.springframework.beans.factory.annotation.Autowired;
@@ -15,6 +17,7 @@
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.servlet.view.RedirectView;
@@ -22,6 +25,9 @@
 import java.security.Principal;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Set;
+
+import javax.transaction.Transactional;
 
 @Controller
 public class User {
@@ -35,6 +41,9 @@ public class User {
     @Autowired
     ContentRepository contentRepository;
 
+    @Autowired
+    CommentRepository commentRepository;
+
     @GetMapping("/signup")
     public String getSignUpPage() {
         return "signup";
@@ -93,6 +102,7 @@ public String getUsers(Model model, Principal principal) {
         model.addAttribute("allusers", users);
         Coders user = codersRepository.findByUsername(principal.getName());
         model.addAttribute("username", user.getUsername());
+        model.addAttribute("userProfile", user);
         return "users";
     }
 
@@ -108,8 +118,79 @@ public RedirectView followUser(@AuthenticationPrincipal Coders user, @RequestPar
     @GetMapping("/feed")
     public String getUsersInfo(@AuthenticationPrincipal Coders user, Model model) {
         Coders feed = codersRepository.findByUsername(user.getUsername());
-        List<Coders> following = feed.getFollowers();
+        Set<Coders> following = feed.getFollowers();
         model.addAttribute("followers", following);
+        model.addAttribute("userProfile", feed);
         return "feed";
     }
+
+    @Transactional
+    @GetMapping("/delete/{id}")
+    public RedirectView deleteUserPost(@PathVariable String id, Principal principal, Model model) {
+        Post post = contentRepository.findById(Long.parseLong(id)).orElseThrow();
+        Coders user = codersRepository.findByUsername(principal.getName());
+        model.addAttribute("username", principal.getName());
+        model.addAttribute("userProfile", user);
+        contentRepository.delete(post);
+        return new RedirectView("/profile");
+    }
+
+    @GetMapping("/edit/{id}")
+    public String showUpdateForm(@PathVariable("id") long id, Model model) {
+        Post post = contentRepository.findById(id)
+                .orElseThrow(() -> new IllegalArgumentException("Invalid user Id:" + id));
+        model.addAttribute("post", post);
+        return "updateForm";
+    }
+
+    @PostMapping("/update/{id}")
+    public RedirectView updateUser(@PathVariable("id") long id, Post post) {
+        Post updatedPost = contentRepository.findById(id).orElseThrow();
+        updatedPost.setBody(post.getBody());
+        contentRepository.save(updatedPost);
+        return new RedirectView("/profile");
+    }
+
+    @PostMapping("/addComment")
+    public RedirectView addComment(Long id, String body) {
+        Post post = contentRepository.findById(id).get();
+        System.out.println(post.getBody());
+        Comment comment = new Comment(post, body);
+        commentRepository.save(comment);
+        System.out.println(comment.getBody());
+        return new RedirectView("/post");
+    }
+
+    @GetMapping("/post")
+    public String getPost(Model model, @AuthenticationPrincipal Coders user) {
+        List<Post> posts = (List<Post>) codersRepository.findByUsername(user.getUsername()).getPosts();
+        model.addAttribute("posts", posts);
+        return "post";
+    }
+
+
+
+    @GetMapping("/UserForm/{id}")
+    public String updateInfo(@PathVariable("id") long id, Model model) {
+        Coders userProfile = codersRepository.findById(id)
+                .orElseThrow(() -> new IllegalArgumentException("Invalid user Id:" + id));
+        model.addAttribute("userProfile", userProfile);
+        return "UserInfoForm";
+    }
+
+    @Transactional
+    @PostMapping("/updateInfo/{id}")
+    public RedirectView updateInfo(@PathVariable("id") long id, Coders coder) {
+        Coders updatedCoder = codersRepository.findById(id).orElseThrow();
+        updatedCoder.setEmail(coder.getEmail());
+        updatedCoder.setUsername(coder.getUsername());
+        updatedCoder.setPassword(coder.getPassword());
+        updatedCoder.setFirstName(coder.getFirstName());
+        updatedCoder.setLastName(coder.getLastName());
+        updatedCoder.setDateOfBirth(coder.getDateOfBirth());
+        updatedCoder.setBio(coder.getBio());
+        codersRepository.save(updatedCoder);
+        return new RedirectView("/profile");
+    }
+
 }
diff --git a/src/main/java/com/example/init/controllers/adminController.java b/src/main/java/com/example/init/controllers/adminController.java
new file mode 100644
index 0000000..c5fa318
--- /dev/null
+++ b/src/main/java/com/example/init/controllers/adminController.java
@@ -0,0 +1,86 @@
+package com.example.init.controllers;
+
+import java.security.Principal;
+import java.util.List;
+
+import javax.transaction.Transactional;
+
+import com.example.init.models.Coders;
+import com.example.init.repositories.CodersRepository;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.servlet.view.RedirectView;
+
+@Controller
+public class adminController {
+    @Autowired
+    CodersRepository codersRepository;
+
+    @Autowired
+    BCryptPasswordEncoder bCryptPasswordEncoder;
+
+    @GetMapping("/admin")
+
+    String admin(Model model) {
+        List<Coders> coders = codersRepository.findAll();
+        model.addAttribute("coders", coders);
+        return "admin";
+    }
+
+    @PostMapping("/admin")
+    RedirectView addCoder(String email, String username, String password, String firstName, String lastName,
+            String dateOfBirth, String bio) {
+
+        Coders newCoder = new Coders(email, username, bCryptPasswordEncoder.encode(password), firstName, lastName,
+                dateOfBirth, bio);
+        codersRepository.save(newCoder);
+        return new RedirectView("/admin");
+    }
+
+    @GetMapping("/coder")
+    public String getCoder(@RequestParam long id, Model model, Principal principal) {
+        Coders coder = codersRepository.findById(id).get();
+        model.addAttribute("coder", coder);
+        return "coder";
+    }
+
+    @Transactional
+    @GetMapping("/del/{id}")
+    public RedirectView delete(@PathVariable String id, Principal principal, Model model) {
+        Coders coder = codersRepository.findById(Long.parseLong(id)).orElseThrow();
+        model.addAttribute("coder", principal.getName());
+        codersRepository.delete(coder);
+        return new RedirectView("/admin");
+    }
+
+    @GetMapping("/form/{id}")
+    public String showUpdateForm(@PathVariable("id") long id, Model model) {
+        Coders coder = codersRepository.findById(id)
+                .orElseThrow(() -> new IllegalArgumentException("Invalid user Id:" + id));
+        model.addAttribute("coder", coder);
+        return "putForm";
+    }
+
+    @Transactional
+    @PostMapping("/upd/{id}")
+    public RedirectView updateUser(@PathVariable("id") long id, Coders coder) {
+        Coders updatedCoder = codersRepository.findById(id).orElseThrow();
+        updatedCoder.setEmail(coder.getEmail());
+        updatedCoder.setUsername(coder.getUsername());
+        updatedCoder.setPassword(coder.getPassword());
+        updatedCoder.setFirstName(coder.getFirstName());
+        updatedCoder.setLastName(coder.getLastName());
+        updatedCoder.setDateOfBirth(coder.getDateOfBirth());
+        updatedCoder.setBio(coder.getBio());
+        codersRepository.save(updatedCoder);
+        return new RedirectView("/admin");
+    }
+
+}
\ No newline at end of file
diff --git a/src/main/java/com/example/init/models/Coders.java b/src/main/java/com/example/init/models/Coders.java
index 1bfd666..776e9e5 100644
--- a/src/main/java/com/example/init/models/Coders.java
+++ b/src/main/java/com/example/init/models/Coders.java
@@ -6,6 +6,7 @@
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.List;
+import java.util.Set;
 
 @Entity
 public class Coders implements UserDetails {
@@ -28,11 +29,11 @@ public class Coders implements UserDetails {
     @OneToMany(mappedBy = "applicationUser", fetch = FetchType.EAGER)
     private List<Post> posts;
 
-    @ManyToMany(cascade = { CascadeType.ALL }, fetch = FetchType.EAGER)
+    @ManyToMany(fetch = FetchType.EAGER)
     @JoinTable(name = "follower_follower", joinColumns = @JoinColumn(name = "from_id"), inverseJoinColumns = @JoinColumn(name = "to_id"))
-    List<Coders> followers = new ArrayList<>();
+    Set<Coders> followers;
     @ManyToMany(mappedBy = "followers", fetch = FetchType.EAGER)
-    List<Coders> following = new ArrayList<>();
+    Set<Coders> following;
 
     public Coders() {
     }
@@ -147,19 +148,19 @@ public void setPosts(List<Post> posts) {
         this.posts = posts;
     }
 
-    public List<Coders> getFollowers() {
+    public Set<Coders> getFollowers() {
         return this.followers;
     }
 
-    public void setFollowers(List<Coders> followers) {
+    public void setFollowers(Set<Coders> followers) {
         this.followers = followers;
     }
 
-    public List<Coders> getFollowing() {
+    public Set<Coders> getFollowing() {
         return this.following;
     }
 
-    public void setFollowing(List<Coders> following) {
+    public void setFollowing(Set<Coders> following) {
         this.following = following;
     }
 
diff --git a/src/main/java/com/example/init/models/Comment.java b/src/main/java/com/example/init/models/Comment.java
new file mode 100644
index 0000000..77fbc3a
--- /dev/null
+++ b/src/main/java/com/example/init/models/Comment.java
@@ -0,0 +1,63 @@
+package com.example.init.models;
+
+import javax.persistence.*;
+import java.text.SimpleDateFormat;
+
+@Entity
+public class Comment {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @Column(name = "id", nullable = false)
+    private Long id;
+
+    private String body;
+
+    private String createdAt;
+
+    @ManyToOne
+    @JoinColumn(name = "post_id")
+    private Post post;
+
+    public Post getPost() {
+        return post;
+    }
+
+    public Comment(Post post, String body) {
+        this.post = post;
+        this.body = body;
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd.HH.mm");
+    }
+
+    public Comment() {
+
+    }
+
+    public void setPost(Post post) {
+        this.post = post;
+    }
+
+    public String getBody() {
+        return body;
+    }
+
+    public void setBody(String body) {
+        this.body = body;
+    }
+
+    public String getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(String createdAt) {
+        this.createdAt = createdAt;
+    }
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+}
diff --git a/src/main/java/com/example/init/models/Post.java b/src/main/java/com/example/init/models/Post.java
index f8722c7..e4baff2 100644
--- a/src/main/java/com/example/init/models/Post.java
+++ b/src/main/java/com/example/init/models/Post.java
@@ -4,6 +4,7 @@
 
 import java.sql.Timestamp;
 import java.text.SimpleDateFormat;
+import java.util.List;
 
 @Entity
 public class Post {
@@ -20,6 +21,9 @@ public class Post {
 
     private String createdAt;
 
+    @OneToMany(mappedBy = "post", fetch = FetchType.EAGER)
+    private List<Comment> comments;
+
     public Post() {
     }
 
@@ -64,4 +68,12 @@ public void setCreatedAt(String createdAt) {
         this.createdAt = createdAt;
     }
 
+    public List<Comment> getComments() {
+        return comments;
+    }
+
+    public void setComments(List<Comment> comments) {
+        this.comments = comments;
+    }
+
 }
diff --git a/src/main/java/com/example/init/models/Quiz.java b/src/main/java/com/example/init/models/Quiz.java
index 602e8ab..ba5055f 100644
--- a/src/main/java/com/example/init/models/Quiz.java
+++ b/src/main/java/com/example/init/models/Quiz.java
@@ -17,6 +17,9 @@ public class Quiz {
     public String category;
     public String difficulty;
 
+    public Quiz() {
+    }
+
     public Quiz(int id, String question, Object description, Answers answers, String multiple_correct_answers,
             CorrectAnswers correct_answers, String correct_answer, Object explanation, Object tip, List<Tag> tags,
             String category, String difficulty) {
diff --git a/src/main/java/com/example/init/models/ResultsQuiz.java b/src/main/java/com/example/init/models/ResultsQuiz.java
new file mode 100644
index 0000000..2129bf1
--- /dev/null
+++ b/src/main/java/com/example/init/models/ResultsQuiz.java
@@ -0,0 +1,52 @@
+package com.example.init.models;
+
+import javax.persistence.*;
+
+@Entity
+@Table(name = "results")
+public class ResultsQuiz {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    // @Column(name = "id", nullable = false)
+    private int id;
+    @ManyToOne
+    @JoinColumn(name = "username_id")
+    public Coders username;
+    public int totalCorrect;
+
+    public ResultsQuiz() {
+    }
+
+    public ResultsQuiz(int id, Coders username, int totalCorrect) {
+        this.id = id;
+        this.username = username;
+        this.totalCorrect = totalCorrect;
+    }
+
+    public int getId() {
+        return id;
+    }
+
+    public Coders getUsername() {
+        return username;
+    }
+
+    public void setUsername(Coders username) {
+        this.username = username;
+    }
+
+    public int getTotalCorrect() {
+        return totalCorrect;
+    }
+
+    public void setTotalCorrect(int totalCorrect) {
+        this.totalCorrect = totalCorrect;
+    }
+    // public Long getId() {
+    // return id;
+    // }
+    //
+    // public void setId(Long id) {
+    // this.id = id;
+    // }
+}
diff --git a/src/main/java/com/example/init/repositories/CodersRepository.java b/src/main/java/com/example/init/repositories/CodersRepository.java
index dde97d9..6673df8 100644
--- a/src/main/java/com/example/init/repositories/CodersRepository.java
+++ b/src/main/java/com/example/init/repositories/CodersRepository.java
@@ -8,5 +8,5 @@
 public interface CodersRepository extends JpaRepository<Coders, Long> {
     public Coders findByUsername(String username);
 
-    // public Coders findUserById(Long id);
+    public Coders findUserById(Long id);
 }
\ No newline at end of file
diff --git a/src/main/java/com/example/init/repositories/CommentRepository.java b/src/main/java/com/example/init/repositories/CommentRepository.java
new file mode 100644
index 0000000..8d83884
--- /dev/null
+++ b/src/main/java/com/example/init/repositories/CommentRepository.java
@@ -0,0 +1,9 @@
+package com.example.init.repositories;
+
+import com.example.init.models.Comment;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface CommentRepository extends JpaRepository<Comment, Long> {
+}
\ No newline at end of file
diff --git a/src/main/java/com/example/init/repositories/ContentRepository.java b/src/main/java/com/example/init/repositories/ContentRepository.java
index e015895..5ea295f 100644
--- a/src/main/java/com/example/init/repositories/ContentRepository.java
+++ b/src/main/java/com/example/init/repositories/ContentRepository.java
@@ -7,4 +7,7 @@
 @Repository
 public interface ContentRepository extends JpaRepository<Post, Long> {
     public Post findPostById(Long id);
+
+    // void deletePostByAppUser_UsernameAndId(String username, Long id);
+
 }
diff --git a/src/main/java/com/example/init/repositories/ResultsRepo.java b/src/main/java/com/example/init/repositories/ResultsRepo.java
new file mode 100644
index 0000000..a9b61c4
--- /dev/null
+++ b/src/main/java/com/example/init/repositories/ResultsRepo.java
@@ -0,0 +1,9 @@
+package com.example.init.repositories;
+
+import com.example.init.models.ResultsQuiz;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface ResultsRepo extends JpaRepository<ResultsQuiz, Integer> {
+}
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index f03a366..1834ae5 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1,7 +1,21 @@
-spring.sql.init.platform=postgres
-spring.datasource.url=jdbc:postgresql://localhost:5432/coders
-spring.datasource.username=abdelqader
-spring.datasource.password=0000
-spring.jpa.database=postgresql
-spring.jpa.generate-ddl=true
-spring.jpa.hibernate.ddl-auto=update
+server.port=8081
+
+# Connect to the Database
+## default connection pool
+spring.datasource.hikari.connectionTimeout=20000
+spring.datasource.hikari.maximumPoolSize=5
+spring.jpa.properties.hibernate.jdbc.lob.non_contextual_creation=true
+## PostgreSQL
+spring.datasource.url=jdbc:postgresql://localhost:5432/postgres
+spring.datasource.username= postgres
+spring.datasource.password=1234
+
+spring.jpa.show-sql=true
+spring.jpa.generate-ddl=false
+spring.jpa.open-in-view=false
+spring.jpa.properties.hibernate.show_sql=true
+spring.jpa.properties.hibernate.format_sql=true
+spring.jpa.properties.hibernate.type=trace
+
+#drop n create table again, good for testing, comment this in production
+spring.jpa.hibernate.ddl-auto=create
\ No newline at end of file
diff --git a/src/main/resources/templates/Init.png b/src/main/resources/templates/Init.png
new file mode 100644
index 0000000..0da98fb
Binary files /dev/null and b/src/main/resources/templates/Init.png differ
diff --git a/src/main/resources/templates/UserInfoForm.html b/src/main/resources/templates/UserInfoForm.html
new file mode 100644
index 0000000..9d6eeb6
--- /dev/null
+++ b/src/main/resources/templates/UserInfoForm.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8" />
+    <title>Update Form</title>
+    <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+            crossorigin="anonymous"
+    />
+</head>
+<body>
+<header th:replace="nav::nav"></header>
+
+<form
+        action="#"
+        th:action="@{/updateInfo/{id}(id=${userProfile.id})}"
+        th:object="${userProfile}"
+        method="post"
+>
+    <div class="form-group">
+        <label for="email">Email</label>
+        <input
+                type="text"
+                th:field="*{email}"
+                name="email"
+                class="form-control"
+                id="email"
+                placeholder="User Name"
+        />
+    </div>
+    <br />
+    <div class="form-group">
+        <label for="username">User Name</label>
+        <input
+                th:field="*{username}"
+                type="text"
+                name="username"
+                class="form-control"
+                id="username"
+                placeholder="User Name"
+        />
+    </div>
+    <br />
+    <div class="form-group">
+        <label for="password">Password</label>
+        <input
+                th:field="*{password}"
+                id="password"
+                name="password"
+                type="password"
+                class="form-control"
+                placeholder="password"
+        />
+    </div>
+    <br />
+    <div class="form-group">
+        <label for="firstName">First Name</label>
+        <input
+                th:field="*{firstName}"
+                id="firstName"
+                name="firstName"
+                type="text"
+                class="form-control"
+                placeholder="First Name"
+        />
+    </div>
+    <br />
+    <div class="form-group">
+        <label for="lastName">Last Name</label>
+        <input
+                th:field="*{lastName}"
+                id="lastName"
+                name="lastName"
+                type="text"
+                class="form-control"
+                placeholder="Last Name"
+        />
+    </div>
+    <br />
+    <div class="form-group">
+        <label for="dateOfBirth">Date Of Birth</label>
+        <input
+                th:field="*{dateOfBirth}"
+                id="dateOfBirth"
+                name="dateOfBirth"
+                type="date"
+                class="form-control"
+                placeholder="Date Of Birth"
+        />
+    </div>
+    <br />
+    <div class="form-group">
+        <label for="bio">Bio</label>
+        <textarea
+                name="bio"
+                th:field="*{bio}"
+                class="form-control"
+                id="bio"
+                rows="3"
+        ></textarea>
+    </div>
+    <br />
+    <button type="submit" class="btn btn-primary mb-2">Update</button>
+</form>
+</body>
+</html>
diff --git a/src/main/resources/templates/admin.html b/src/main/resources/templates/admin.html
new file mode 100644
index 0000000..88d419a
--- /dev/null
+++ b/src/main/resources/templates/admin.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <title>Admin Panel</title>
+  </head>
+  <body>
+    <header th:replace="navbar:: navbar"></header>
+    <br />
+    <form action="/admin" method="POST" style="width: 50%; margin: auto">
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input
+          type="text"
+          name="email"
+          class="form-control"
+          id="email"
+          placeholder="User Name"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="username">User Name</label>
+        <input
+          type="text"
+          name="username"
+          class="form-control"
+          id="username"
+          placeholder="User Name"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input
+          id="password"
+          name="password"
+          type="password"
+          class="form-control"
+          placeholder="password"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="firstName">First Name</label>
+        <input
+          id="firstName"
+          name="firstName"
+          type="text"
+          class="form-control"
+          placeholder="First Name"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="lastName">Last Name</label>
+        <input
+          id="lastName"
+          name="lastName"
+          type="text"
+          class="form-control"
+          placeholder="Last Name"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="dateOfBirth">Date Of Birth</label>
+        <input
+          id="dateOfBirth"
+          name="dateOfBirth"
+          type="date"
+          class="form-control"
+          placeholder="Date Of Birth"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="bio">Bio</label>
+        <textarea name="bio" class="form-control" id="bio" rows="3"></textarea>
+      </div>
+      <br />
+      <button type="submit" class="btn btn-primary mb-2">Add Coder</button>
+    </form>
+
+    <div>
+      <div style="text-align: center" id="addCoders-form"></div>
+
+      <table
+        style="
+          width: 60%;
+          text-align: center;
+          margin-left: 14.5rem;
+          margin-top: 3rem;
+          margin-bottom: 5rem;
+        "
+        class="table"
+      >
+        <thead>
+          <tr style>
+            <th scope="col">Id</th>
+            <th scope="col">First Name</th>
+            <th scope="col">Last Name</th>
+            <th scope="col">Handle</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr th:each="coder: ${coders}">
+            <th th:text="${coder.id}" scope="row"></th>
+            <td th:text="${coder.firstName}"></td>
+            <td th:text="${coder.lastName}"></td>
+            <td>
+              <a style="color: red" th:href="@{/del/{id}(id=${coder.id})}"
+                >❌</a
+              >
+              <a style="color: green" th:href="@{/form/{id}(id=${coder.id})}"
+                >🖍</a
+              >
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/src/main/resources/templates/courses.html b/src/main/resources/templates/courses.html
index 072ca64..76fcf91 100644
--- a/src/main/resources/templates/courses.html
+++ b/src/main/resources/templates/courses.html
@@ -3,8 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <title>Courses Page</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <title>Admin Panel</title>
   </head>
   <body>
+    <header th:replace="nav::nav"></header>
+
     <!--private String title;-->
     <!--private String course_level;-->
     <!--private String description;-->
diff --git a/src/main/resources/templates/designFirstSection.png b/src/main/resources/templates/designFirstSection.png
new file mode 100644
index 0000000..032afa8
Binary files /dev/null and b/src/main/resources/templates/designFirstSection.png differ
diff --git a/src/main/resources/templates/feed.html b/src/main/resources/templates/feed.html
index 95ea331..3e0ca98 100644
--- a/src/main/resources/templates/feed.html
+++ b/src/main/resources/templates/feed.html
@@ -7,15 +7,24 @@
   <head>
     <meta charset="UTF-8" />
     <title>Feed page</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <title>Admin Panel</title>
   </head>
   <body>
+    <header th:replace="nav::nav"></header>
+
     <main>
       <h1>Feed Posts</h1>
       <div class="cards">
         <div
           class="card border-danger mb-3"
           style="width: 18rem"
-          th:each="follower:${followers}"
+          th:each="follower:${following}"
         >
           <div class="card-body">
             <h5 class="btn btn-outline-danger">Username:</h5>
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 033f5e1..3ce61b5 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -1,12 +1,453 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www,thymeleaf.org">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello</title>
+    <title>Init home</title>
+    <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=Raleway:wght@500;600;700&display=swap" 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=Press+Start+2P&display=swap" rel="stylesheet">
   </head>
+  <style>
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+
+}
+
+body {
+background: linear-gradient(115.17deg, #212634 9.22%, #142833 50.16%, rgba(13, 48, 46, 0.94) 92.84%);
+font-family: 'Raleway', sans-serif;
+}
+
+
+
+/* ////////////////////////////// Start of nav bar //////////////////////////////////////// */
+
+
+
+
+header{
+display:flex;
+justify-content: space-between;
+align-items:center;
+padding: 30px 5%;
+
+}
+
+
+
+.navlinks li{
+    display: inline-block;
+    padding: 0px 25px;
+    position: relative;
+    left:  208px;
+}
+
+.navlinks li a{
+transition: all 0.3s ease 0s;
+    padding-bottom: 15px;
+    color: white;
+    text-decoration: none;
+    font-size: 15px;
+}
+
+.navlinks li a:hover{
+color:#2C9A8D;
+border-bottom:solid #2C9A8D 3.5px;
+}
+
+.nav-button{
+padding:7px 25px;
+background-color: rgba(44,154,141,1);
+color:white;
+border: none;
+border-radius: 10px;
+cursor: pointer;
+transition: all 0.3s ease 0s;
+font-family: 'Raleway', sans-serif;
+font-weight: bold;
+font-size: 15px;
+}
+
+.nav-button:hover{
+background-color: rgba(44,154,141,0.8);
+}
+.a{
+    position: relative;
+    left: 3;
+    color: white;
+    font-style: normal;
+    left: 120px;
+    font-size: 15px;
+}
+
+/* ////////////////////////// start of main //////////////////////////////////// */
+
+
+/* ///////////////////// first div section 1//////////////////////// */
+
+
+
+.first-div-s1{
+    display: inline-block;
+    float: left;
+    width: 609px;
+    margin: 200px 0px 0px 70px;
+
+}
+
+
+
+.first-div-s1 h1{
+color:#FFF9B6;
+font-weight: 50;
+font-size: 40px;
+}
+
+.first-div-buttons-s1{
+    margin-top: 30px;
+}
+
+.first-div-buttons-s1 a{
+margin-right: 15px;
+}
+
+
+
+
+.signup-button{
+padding:11px 48px;
+background-color: rgba(44,154,141,1);
+color:white;
+border: none;
+border-radius: 10px;
+cursor: pointer;
+transition: all 0.3s ease 0s;
+font-family: 'Raleway', sans-serif;
+font-weight: bold;
+font-size: 15px;
+
+}
+
+.signup-button:hover{
+background-color: rgba(44,154,141,0.8);
+}
+
+.login-button{
+padding:9px 25px;
+background-color: transparent;
+color:white;
+border-radius: 10px;
+cursor: pointer;
+transition: all 0.3s ease 0s;
+font-family: 'Raleway', sans-serif;
+font-weight: bold;
+font-size: 15px;
+border: 2.8px solid #2C9A8D;
+}
+.login-button:hover{
+background-color: rgba(44,154,141);
+
+}
+
+/* ////////// second div section 1 ////////////// */
+
+.second-div-s1{
+
+     display: inline-block;
+    position: absolute;
+    float: right;
+    margin: 83px 0px 0px 0px;
+    right: 2px;
+}
+#mainDesign{
+
+
+}
+
+/* ////////////////////////// start of second section /////////////////////////////////////// */
+
+.first-div-s2{
+    background-color: #F2F2F2;
+    position: relative;
+    top: 245px;
+    z-index: -1;
+    height: 458px;
+    clear:both;
+
+}
+
+ .first-div-s2 div{
+    position: relative;
+    top: 70px;
+
+    left: 75px;
+    width: 559px;
+}
+
+.first-div-s2 div h1{
+font-weight: bold;
+font-size: 80px;
+color: #253B4D;
+}
+
+.first-div-s2 div h3{
+font-size: 35px;
+color: #253B4D;
+}
+
+.first-div-s2 div {
+font-size: 25px;
+color: #253B4D;
+}
+
+/* /////////////////////////////////section3///////////////////////////// */
+.section-three{
+display:flex;
+clear:both;
+}
+
+.section-three div{
+    margin: 136px 68px 0px 75px;
+
+    clear: both;
+    color: white;
+}
+
+
+.section-three div h2{
+font-size: 30px;
+}
+
+.section-three div h3{
+font-size: 30px;
+}
+
+#div-interactive{
+
+    padding-top: 60px;
+}
+
+/* //////////////////////section 4/////////////////// */
+
+.section-four{
+display:flex;
+clear:both;
+}
+
+
+.section-four div{
+        margin: 40px 68px 110px 75px;
+    clear: both;
+    color: white;
+}
+
+
+.section-four div h3{
+font-size: 30px;
+}
+
+#div-interactive{
+
+    padding-top: 60px;
+}
+#div-quizes{
+padding-top: 111px;
+
+}
+/* /////////////////////////////////////////////footer////////////////////////////// */
+
+.footer{
+background:#F2F2F2;
+padding:30px 0px;
+font-family: 'Play', sans-serif;
+text-align:center;
+}
+
+.footer .row{
+width:100%;
+margin:1% 0%;
+padding:0.6% 0%;
+color:gray;
+font-size:0.8em;
+}
+
+.footer .row a{
+text-decoration:none;
+color:gray;
+transition:0.5s;
+}
+
+.footer .row a:hover{
+color:#253B4D;
+}
+
+.footer .row ul{
+width:100%;
+}
+
+.footer .row ul li{
+display:inline-block;
+margin:0px 30px;
+}
+
+.footer .row a i{
+font-size:2em;
+margin:0% 1%;
+}
+
+@media (max-width:720px){
+.footer{
+text-align:left;
+padding:5%;
+}
+.footer .row ul li{
+display:block;
+margin:10px 0px;
+text-align:left;
+}
+.footer .row a i{
+margin:0% 3%;
+}
+}
+
+
+  </style>
   <body>
-    <h1>Hello World</h1>
+
+<!--  start of navbar-->
+  <header>
+
+    <img id="logo" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/Init.png" alt="logo"   width="10%"
+         height="10%">
+    <nav>
+      <ul class="navlinks">
+      <li><a  th:href="@{#why}">Why init?</a></li>
+      <li><a  th:href="@{#quizes}">Quizes</a></li>
+      <li><a  th:href="@{#interactive}">Interactive</a></li>
+      </ul>
+    </nav>
+    <a class="a" th:href="@{/login}">Login</a>
+    <a th:href="@{/signup}"><button class="nav-button">Sign up</button></a>
+
+  </header>
+
+
+
+  <main>
+
+<!--first section of the page-->
+
+    <section>
+
+<!--      section is dived into two first div is text-->
+    <div class="first-div-s1">
+      <h1>
+        Find your community and enjoy the process of learning &lt;coding/&gt;
+      </h1>
+      <div class="first-div-buttons-s1">
+      <a  th:href="@{/signup}" role="button" ><button class="signup-button">Sign up</button></a>
+      <a  href="/login" role="button" ><button class="login-button">Log in</button></a>
+      </div>
+    </div>
+
+<!-- second div is for the design-->
+      <div class="second-div-s1">
+        <img id="mainDesign"src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/designFirstSection.png" alt="designFirstSection" width="70%" height="10%">
+      </div>
+
+    </section>
+  <section class="first-div-s2" id="why">
+    <div class="div-s2">
+      <h1 >Why Init?</h1>
+      <h3>Init will initialize you to get involved with the coding community.</h3>
+      <p>also it will provide you with everything you need to start. </p>
+    </div>
+  </section>
+
+
+    <br>
+    <br>
+    <br>
+    <br>
+
+    <br>
+    <br>
+    <br>
+    <br>
+
+    <br>
+    <br>
+    <br>
+    <br>
+
+
+
+
+<section class="section-three" id="interactive">
+    <div id="div-interactive">
+      <h2>Interactive</h2>
+     <h3>Init will help you to collaborate, share ideas, and get the help from other programmers.</h3>
+    </div>
+
+      <div>
+        <img  src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/hands.png" alt="hands"
+            >
+      </div>
+
+</section>
+
+<section class="section-four" id="quizes">
+
+    <div>
+        <img src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/book.png" alt="logo">
+    </div>
+
+        <div id="div-quizes">
+          <h3 >Quizes</h3>
+          <h3>Your coding and thinking skills will get better everyday, as we provide quizes for you to solve it and practice.</h3>
+          <p>each quiz you solve you will git extra points, that you can use for buying courses from our website.</p>
+
+        </div>
+
+
+
+
+</section>
+
+      <footer>
+          <div class="footer">
+
+
+              <div class="row">
+                  <ul>
+                      <li><a href="#">Contact us</a></li>
+                      <li><a href="#">Our Services</a></li>
+                      <li><a href="#">Privacy Policy</a></li>
+                      <li><a href="#">Terms & Conditions</a></li>
+                      <li><a href="#">Career</a></li>
+                  </ul>
+              </div>
+
+              <div class="row">
+               Copyright © 2021 Inferno - All rights reserved
+          </div>
+      </footer>
+
+
+  </main>
+
+
+
+
+
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 1fbc38b..08989a4 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -1,29 +1,35 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:ta="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
-<head>
-    <meta charset="UTF-8">
+<html
+  lang="en"
+  xmlns:ta="http://www.w3.org/1999/xhtml"
+  xmlns:th="http://www.w3.org/1999/xhtml"
+>
+  <head>
+    <meta charset="UTF-8" />
     <title>login</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-</head>
-<body>
-<form ta:action="@{/login}" method="post">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <form ta:action="@{/login}" method="post">
+      <div th:if="${param.error}">Invalid username and password.</div>
+      <div th:if="${param.logout}">You have been logged out.</div>
 
-    <div th:if="${param.error}">
-        Invalid username and password.
-    </div>
-    <div th:if="${param.logout}">
-        You have been logged out.
-    </div>
-
-    <div class="mb-3">
+      <div class="mb-3">
         <label class="form-label">User Name </label>
-        <input type="text" class="form-control" name="username">
-    </div>
-    <div class="mb-3">
+        <input type="text" class="form-control" name="username" />
+      </div>
+      <div class="mb-3">
         <label class="form-label">Password</label>
-        <input type="password" class="form-control">
-    </div>
-    <button type="submit" class="btn btn-primary" name="password">Log in</button>
-</form>
-</body>
-</html>
\ No newline at end of file
+        <input type="password" class="form-control" />
+      </div>
+      <button type="submit" class="btn btn-primary" name="password">
+        Log in
+      </button>
+    </form>
+  </body>
+</html>
diff --git a/src/main/resources/templates/nav.html b/src/main/resources/templates/nav.html
new file mode 100644
index 0000000..c762fff
--- /dev/null
+++ b/src/main/resources/templates/nav.html
@@ -0,0 +1,40 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light" th:fragment="nav" xmlns:th="">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Init</a>
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarNav"
+      aria-controls="navbarNav"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" href="profile">
+            <!-- <span th:text="${userProfile.username}"></span> -->
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="users">Users</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="feed">Feed</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="quiz">Quiz</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="courses">Courses</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="perform_logout">Logout</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
diff --git a/src/main/resources/templates/navbar.html b/src/main/resources/templates/navbar.html
new file mode 100644
index 0000000..52033f1
--- /dev/null
+++ b/src/main/resources/templates/navbar.html
@@ -0,0 +1,29 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light" th:fragment="navbar">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Init</a>
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarNav"
+      aria-controls="navbarNav"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link active" aria-current="page" href="#">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="profile">Profile</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="admin">Admin</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
diff --git a/src/main/resources/templates/post.html b/src/main/resources/templates/post.html
new file mode 100644
index 0000000..b871ca0
--- /dev/null
+++ b/src/main/resources/templates/post.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<form action="/addComment" method="post" th:each="post : ${posts}">
+               <fieldset>
+                   <input type="hidden" name="id" th:value="${post.id}" />
+                    <form >
+                        <fieldset>
+                        <div class="mb-3">
+                            <p th:text="${post.body}"></p>
+                            <p th:text="${post.createdAt}"></p>
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label">Add a Comment</label>
+                            <input type="textarea" class="form-control" name="body">
+                            </br>
+                        </div>
+                        </fieldset> <br>
+                        <button type="submit" class="btn btn-primary" name="addComment">Comment</button>
+
+                    </form>
+
+                            <form th:each="comment : ${post.comments}">
+                                <fieldset>
+                                    <div class="mb-3">
+                                        <p th:text="${comment.body}"></p>
+                                        <p th:text="${comment.createdAt}"></p>
+                                    </div>
+                                </fieldset>
+                            </form>
+
+                </fieldset>
+
+</form>
+</body>
+</html>
diff --git a/src/main/resources/templates/profile.html b/src/main/resources/templates/profile.html
index 48d79a4..c4a8a25 100644
--- a/src/main/resources/templates/profile.html
+++ b/src/main/resources/templates/profile.html
@@ -1,48 +1,545 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <title>user profile</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="profile.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=Raleway:wght@500;600;700&display=swap" rel="stylesheet">
 </head>
+<style>
+    * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+
+}
+
+
+body {
+background: linear-gradient(115.17deg, #212634 9.22%, #142833 50.16%, rgba(13, 48, 46, 0.94) 92.84%);
+font-family: 'Raleway', sans-serif;
+}
+
+
+
+/* ////////////////////////////////navbar//////////////////////////// */
+.navBar {
+position: fixed;
+    width: 83px;
+
+height: 1061px;
+
+background: radial-gradient(100% 100% at 0% 0%, #4F5F67 0%, rgba(68, 105, 125, 0.27) 100%);
+backdrop-filter: blur(15px);
+    margin: -22px 0px;
+        z-index: 1;
+}
+
+#logoNav{
+        position: absolute;
+    width: 34px;
+    height: 43px;
+    left: 6px;
+    top: -160px;
+}
+
+#navIcons{
+
+      position: absolute;
+
+    left: 35%;
+    width: 50px;
+    top: 199px;
+
+}
+
+.navIcon{
+    padding-bottom: 90%;
+
+}
+
+#navPic{
+
+    margin: 30;
+
+    position: relative;
+    left: -17px;
+
+}
+
+/* ////////////////////////////////////////main////////////////////////////////// */
+
+#hero{
+
+  object-fit: cover;
+  overflow: hidden;
+}
+
+
+/* /////////////user info card /////// */
+
+#userInfo{
+position: absolute;
+    width: 300px;
+
+ height: 550px;
+background: radial-gradient(100% 100% at 0% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
+backdrop-filter: blur(15px);
+border: 1px solid #C5C5C5;
+
+border-radius: 10px;
+    margin-left: 126px;
+    position: absolute;
+    top: 180px;
+}
+
+#profilePic{
+            margin: 36px 75px 0px;
+
+}
+
+.fullName{
+color: white;
+margin: 17px 0px 0px 109px;
+
+font-style: Bold;
+font-size: 16px;
+}
+
+
+
+
+
+#bioTextHolder{
+    margin: 6px 29px 0px;
+    position: absolute;
+    width: 240px;
+    height: auto;
+    background: radial-gradient(100% 100% at 0% 0%, #374045 0%, rgba(68, 105, 125, 0.27) 100%);
+    backdrop-filter: blur(15px);
+    border-radius: 20px;
+    margin: 6px 29px 0px;
+
+
+}
+
+
+
+.userName{
+    color: rgba(255, 255, 255, 0.53);
+    margin: 6px 113px 0px;
+    font-size: 14px;
+    text-align:center;
+}
+
+.bio{
+        color: white;
+    margin: 37px 38px 0px;
+    font-size: 16px;
+}
+
+.bioStyling{
+  color:white;
+    font-size: 14px;
+        margin: 12px;
+
+}
+.email{
+      color: white;
+    margin: 30px 38px 0px;
+    font-size: 16px;
+
+}
+.dateOfBirth{
+       margin: 91px 39px 0px;
+    color: white;
+    font-size: 16px;
+}
+
+.birth{
+    margin: 116px 0px 0px 37px;
+}
+
+
+#userInfo p{
+
+    color: white;
+    margin: 8px 38px 0px;
+    font-size: 16px;
+}
+
+/* //////////////////posts field/////////////////// */
+
+.posts{
+        display: inline-block;
+    color: white;
+    position: relative;
+    left: 495px;
+    top: 24px;
+    font-size: 18px;
+
+}
+
+.profile-content{
+    position: absolute;
+    width: 833px;
+    height: Auto;
+    background: radial-gradient(100% 100% at 0% 0%, #354249 0%, rgba(68, 105, 125, 0.27) 100%);
+    backdrop-filter: blur(15px);
+    border-radius: 10px;
+    margin: 30px 464px 0px;
+}
+
+.form-control{
+    border-radius: 10px;
+    width: 772px;
+    margin: 5px 29px;
+height: 81px;
+
+}
+
+.submit{
+padding:7px 25px;
+background-color: rgba(44,154,141,1);
+color:white;
+border: none;
+border-radius: 10px;
+cursor: pointer;
+transition: all 0.3s ease 0s;
+
+font-size: 15px;
+
+    margin-left: 704px;
+
+
+}
+
+.submit:hover{
+background-color: rgba(44,154,141,0.8);
+}
+
+.post-form{
+background-color: transparent;
+ width: 772px;
+ margin-left: 29px;
+ color: white;
+ height:auto;
+ border-bottom:solid white 0.5px;
+ border-top:solid white 0.5px;
+
+}
+
+.form-space{
+padding-top: 20px;
+padding-bottom: 20px;
+}
+
+.delete-post{
+     position: relative;
+    left: 699px;
+    bottom: 99px;
+}
+
+.edit-post{
+        position: relative;
+    left: 635px;
+    top: -99px;
+}
+.mySubmittedPost{
+    position: relative;
+    left: 22px;
+
+}
+.comment-post{
+
+    position: relative;
+    left: -42px;
+        top: 18px;
+}
+.time-post{
+    font-size: 14px;
+
+    margin: -17px 0px 16px 0px;
+}
+.user-post{
+font-weight: bold;
+
+}
+
+.form-label{
+    position: relative;
+    left: 23px;
+
+}
+
+.comment-control{
+      border-radius: 10px;
+    width: 720px;
+    margin: 5px 21px;
+    height: 41px;
+}
+
+
+.comment-button{
+    padding: 7px 25px;
+    background-color: rgba(44,154,141,1);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease 0s;
+    font-size: 15px;
+    margin-left: 622px;
+    position: relative;
+    bottom: 30px;
+}
+
+.comment-button:hover{
+background-color: rgba(44,154,141,0.8);
+}
+
+.people-comment{
+
+    margin: -14px 0px 0px 14px;
+
+}
+
+/* /////////////////////////////////////////////footer////////////////////////////// */
+.footer{
+background:#F2F2F2;
+padding:30px 0px;
+font-family: 'Play', sans-serif;
+text-align:center;
+}
+
+.footer .row{
+width:100%;
+margin:1% 0%;
+padding:0.6% 0%;
+color:gray;
+font-size:0.8em;
+}
+
+.footer .row a{
+text-decoration:none;
+color:gray;
+transition:0.5s;
+}
+
+.footer .row a:hover{
+color:#253B4D;
+}
+
+.footer .row ul{
+width:100%;
+}
+
+.footer .row ul li{
+display:inline-block;
+margin:0px 30px;
+}
+
+.footer .row a i{
+font-size:2em;
+margin:0% 1%;
+}
+
+@media (max-width:720px){
+.footer{
+text-align:left;
+padding:5%;
+}
+.footer .row ul li{
+display:block;
+margin:10px 0px;
+text-align:left;
+}
+.footer .row a i{
+margin:0% 3%;
+}
+
+
+</style>
 <body>
-<div class="card" style="width: 12rem;">
-    <img src="https://freesvg.org/img/publicdomainq-0006224bvmrqd.png" class="card-img-top" alt="ProfilePicture">
-    <div class="card-body">
-<!--        <h5 class="card-text" th:text="${userProfile.firstName} +' '+ ${userProfile.lastName}"/>-->
-        <p class="card-text" th:text="${userProfile.email}"/>
-        <p class="card-text" th:text="${userProfile.bio}"/>
-        <p class="card-text" th:text="${userProfile.dateOfBirth}"/>
+
+<header>
+
+    <div class="navBar">
+        <nav id="navIcons">
+            <a href="@{/}" id="logoNav">
+                <img alt="logo" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/I.png"
+                     width="50%" height="50%">
+            </a>
+
+
+            <a href="@{/feed}">
+                <img  class="navIcon" alt="homeIcon" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/homeIcon.png"
+                      width="50%" height="50%">
+            </a>
+
+
+            <a href="@{/messages}" class="navIcon">
+                <img class="navIcon" alt="messages" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/messagesIcon.png"
+                     width="50%" height="50%">
+            </a>
+
+
+            <a href="@{/quizes}" class="navIcon">
+                <img class="navIcon" alt="quizes" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/quizezIcon.png"
+                     width="50%" height="50%">
+            </a>
+
+            <a href="@{/courses}" class="navIcon">
+                <img class="navIcon" alt="courses" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/coursesIcon.png"
+                     width="50%" height="50%">
+            </a>
+
+
+            <a href="@{/profile}" class="navIcon" >
+                <img class="navIcon" id="navPic" alt="profileIcon" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/profileIcon.png"
+                     width="120%" height="120%">
+            </a>
+        </nav>
     </div>
-</div>
-
-<br>
-<br>
-
-<form action="/addPost" method="post">
-    <fieldset>
-        <div class="mb-3">
-            <label class="form-label">Add a post</label>
-            <input type="textarea" class="form-control" name="body">
-            </br>
-            <button type="submit" class="btn btn-primary" name="password">submit</button>
+
+</header>
+
+<main>
+    <section>
+        <div >
+            <img id="hero" alt="hero" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/giphy.gif"
+
+                 width="100%"
+                 height="290px">
+        </div>
+    </section>
+
+
+
+    <section>
+        <div id="userInfo">
+            <img id="profilePic" alt="profile-pic" src="https://raw.githubusercontent.com/SSD-Coders/init/sara1/src/main/resources/images/Profilepic.png" width="50%" >
+
+            <h2 class="fullName" th:text="${userProfile.firstName} +' '+ ${userProfile.lastName}">sara alllllllll;;;</h2>
+            <!--            <h2 class="userName" th:text="{userProfile.username}">Username</h2>-->
+
+
+            <h3 class="email">Email</h3>
+            <p th:text="${userProfile.email}">hotmail@hotmail</p>
+
+
+
+
+            <h3 class="bio">Bio</h3>
+            <div id="bioTextHolder" >
+                <h3 class="bioStyling" th:text="${userProfile.bio}">hii i love code</h3>
+            </div>
+            <h3 class="dateOfBirth">Data of birth</h3>
+            <p class="birth" th:text="${userProfile.dateOfBirth}">30/4/1996</p>
+
         </div>
-    </fieldset>
-</form>
+    </section>
 
-<br>
-<br>
 
-<legend>Posts</legend>
+    <p class="posts">Posts</p>
+
+
+    <section>
+        <div class="profile-content">
+            <form action="/addPost" method="post">
+                <fieldset>
+                    <div class="mb-3">
+                        <label class="form-label"></label>
+                        <input type="textarea" placeholder="write a post" class="form-control" name="body">
+                        </br>
+                        <button type="submit" class="submit" name="password">submit</button>
+                    </div>
+                </fieldset>
+            </form>
+
+            <br>
+            <br>
+
+
+            <!--    <legend>Posts</legend>-->
+
+            <form  class="post-form" action="/addComment" method="post" th:each="post : ${userProfile.posts}">
+                <fieldset class="form-space">
+                    <input type="hidden" name="id" th:value="${post.id}" />
+                    <form >
+                        <!--                        this is the post-->
+                        <fieldset>
+                            <div class="mySubmittedPost">
+
+                                <p class="user-post" th:text="${post.applicationUser.username}">username</p>
+                                <p class="time-post" th:text="${post.createdAt}">2012/11/11 30:3</p>
+                                <p th:text="${post.body}">hi i love code</p>
+
+
+                                <td> <a class="delete-post" th:href="@{/delete/{id}(id=${post.id})}">
+                                    <img  class="test" alt="delete" src="/resources/images/delete.png"
+                                    >
+                                </a></td>
+
+
+                                <td> <a  class="edit-post" th:href="@{/edit/{id}(id=${post.id})}">
+                                    <img  alt="edit" src="/resources/images/edit.png"
+                                    >
+                                </a></td>
+
+                            </div>
+
+
+                            <div id="comment-div" class="mb-3">
+                                <label class="form-label">Add a Comment</label>
+                                <input type="textarea"  class="comment-control" name="body">
+                                </br>
+                            </div>
+
+                        </fieldset>
+
+
+
+
+                        <br>
+                        <button type="submit" class="comment-button" name="addComment">Comment</button>
+
+
+                        <form  th:each="comment : ${post.comments}">
+                            <fieldset class="people-comment">
+                                <div class="mb-3">
+                                    <p th:text="${comment.createdAt}">2012/3/3 45:8</p>
+                                    <p th:text="${comment.body}">wow i like coding tooo</p>
+
+                                </div>
+                            </fieldset>
+
+
+
+
+                        </form>
+                    </form>
+                </fieldset>
+
+
+
+            </form>
+
 
-<form th:each="post : ${userProfile.posts}">
-    <fieldset>
-        <div class="mb-3">
-            <p th:text="${post.body}"></p>
-            <p th:text="${post.createdAt}"></p>
         </div>
-    </fieldset>
-</form>
+
+
+    </section>
+
+
+
+
+</main>
+
+
 
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/putForm.html b/src/main/resources/templates/putForm.html
new file mode 100644
index 0000000..f325b48
--- /dev/null
+++ b/src/main/resources/templates/putForm.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Update Form</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <header th:replace="nav::nav"></header>
+
+    <form
+      action="#"
+      th:action="@{/upd/{id}(id=${coder.id})}"
+      th:object="${coder}"
+      method="post"
+    >
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input
+          type="text"
+          th:field="*{email}"
+          name="email"
+          class="form-control"
+          id="email"
+          placeholder="User Name"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="username">User Name</label>
+        <input
+          th:field="*{username}"
+          type="text"
+          name="username"
+          class="form-control"
+          id="username"
+          placeholder="User Name"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input
+          th:field="*{password}"
+          id="password"
+          name="password"
+          type="password"
+          class="form-control"
+          placeholder="password"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="firstName">First Name</label>
+        <input
+          th:field="*{firstName}"
+          id="firstName"
+          name="firstName"
+          type="text"
+          class="form-control"
+          placeholder="First Name"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="lastName">Last Name</label>
+        <input
+          th:field="*{lastName}"
+          id="lastName"
+          name="lastName"
+          type="text"
+          class="form-control"
+          placeholder="Last Name"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="dateOfBirth">Date Of Birth</label>
+        <input
+          th:field="*{dateOfBirth}"
+          id="dateOfBirth"
+          name="dateOfBirth"
+          type="date"
+          class="form-control"
+          placeholder="Date Of Birth"
+        />
+      </div>
+      <br />
+      <div class="form-group">
+        <label for="bio">Bio</label>
+        <textarea
+          name="bio"
+          th:field="*{bio}"
+          class="form-control"
+          id="bio"
+          rows="3"
+        ></textarea>
+      </div>
+      <br />
+      <button type="submit" class="btn btn-primary mb-2">Update</button>
+    </form>
+  </body>
+</html>
diff --git a/src/main/resources/templates/quiz.html b/src/main/resources/templates/quiz.html
index b3041e1..f05bffe 100644
--- a/src/main/resources/templates/quiz.html
+++ b/src/main/resources/templates/quiz.html
@@ -1,37 +1,88 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-  <head>
-    <meta charset="UTF-8" />
+<head>
+    <meta charset="UTF-8">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" th:href="@{/css/quiz.css}">
+
     <title>Quiz Page</title>
-  </head>
-  <body>
-    <!--private String title;-->
-    <!--private String course_level;-->
-    <!--private String description;-->
-    <!--private String image;-->
-    <tr th:each="Quiz: ${quiz}">
-      <td th:text="${Quiz.id}"></td>
-      <br />
-      <td th:text="${Quiz.question}"></td>
-      <br />
-
-      <p th:text="${Quiz.answers.answer_a}"></p>
-      <p th:text="${Quiz.answers.answer_b}"></p>
-      <p th:text="${Quiz.answers.answer_c}"></p>
-      <p th:text="${Quiz.answers.answer_d}"></p>
-      <p th:text="${Quiz.answers.answer_e}"></p>
-      <p th:text="${Quiz.answers.answer_f}"></p>
-
-      <p
-        style="background-color: grey"
-        th:text="${Quiz.correct_answers.answer_a_correct}"
-      ></p>
-      <p th:text="${Quiz.correct_answers.answer_b_correct}"></p>
-      <p th:text="${Quiz.correct_answers.answer_c_correct}"></p>
-      <p th:text="${Quiz.correct_answers.answer_d_correct}"></p>
-      <p th:text="${Quiz.correct_answers.answer_e_correct}"></p>
-      <p th:text="${Quiz.correct_answers.answer_f_correct}"></p>
-      <
-    </tr>
-  </body>
-</html>
+</head>
+<body>
+  <header th:replace="nav::nav">
+
+  </header>
+  
+<!--private String title;-->
+<!--private String course_level;-->
+<!--private String description;-->
+<!--private String image;-->
+<!--<tr th:each="Quiz: ${quiz}">-->
+<!--    <td th:text="${Quiz.id}"></td>-->
+<!--    <br />-->
+<!--    <td th:text="${Quiz.question}"></td>-->
+<!--    <br />-->
+<!--                    <p th:text="${Quiz.answers.answer_a}"></p>-->
+<!--                    <p th:text="${Quiz.answers.answer_b}"></p>-->
+<!--                    <p th:text="${Quiz.answers.answer_c}"></p>-->
+<!--                    <p th:text="${Quiz.answers.answer_d}"></p>-->
+<!--                    <p th:text="${Quiz.answers.answer_e}"></p>-->
+<!--                    <p th:text="${Quiz.answers.answer_f}"></p>-->
+
+<!--                    <p style="background-color : grey" th:text="${Quiz.correct_answers.answer_a_correct}"></p>-->
+<!--                    <p th:text="${Quiz.correct_answers.answer_b_correct}"></p>-->
+<!--                    <p th:text="${Quiz.correct_answers.answer_c_correct}"></p>-->
+<!--                    <p th:text="${Quiz.correct_answers.answer_d_correct}"></p>-->
+<!--                    <p th:text="${Quiz.correct_answers.answer_e_correct}"></p>-->
+<!--                    <p th:text="${Quiz.correct_answers.answer_f_correct}"></p>-->
+    <div class="container py-5 px-4">
+        <h1 class="bg-danger text-light">Only Select The Correct Answers</h1>
+
+        <form action="submit" method="POST" th:object=${quiz}>
+            <div class="ques-box bg-secondary text-light" th:each="Quiz , i : ${quiz}">
+                <td  th:text="${Quiz.question}"></td>
+
+                <div class="option">
+                    <input  type="radio" th:name="|[${i.index}].chose|" />
+                    <p th:text="${Quiz.answers.answer_a}"></p>
+                </div>
+
+                <div class="option">
+                    <input type="radio" th:name="|[${i.index}].chose|"/>
+                    <p th:text="${Quiz.answers.answer_b}"></p>
+                </div>
+
+                <div class="option">
+                    <input type="radio" th:name="|[${i.index}].chose|"/>
+                    <p th:text="${Quiz.answers.answer_c}"></p>
+                </div>
+
+<!--                <div class="option">-->
+<!--                    <input type="radio" th:name="${Quiz.correct_answers.answer_d_correct}"th:value="4"/>-->
+<!--                    <p th:text="${Quiz.answers.answer_d}"></p>-->
+<!--                </div>-->
+
+<!--                <div class="option">-->
+<!--                    <input type="radio" th:name="${Quiz.correct_answers.answer_e_correct}"th:value="5"/>-->
+<!--                    <p th:text="${Quiz.answers.answer_e}"></p>-->
+<!--                </div>-->
+
+<!--                <div class="option">-->
+<!--                    <input type="radio" th:name="${Quiz.correct_answers.answer_f_correct}"th:value="6"/>-->
+<!--                    <p th:text="${Quiz.answers.answer_f}">-->
+
+<!--                    </p>-->
+                </div>
+
+
+<!--                <input type="hidden" th:name="|questions[${i.index}].quesId|" th:value="${ques.quesId}" />-->
+<!--                <input type="hidden" th:name="|questions[${i.index}].title|" th:value="${ques.title}" />-->
+<!--                <input type="hidden" th:name="|questions[${i.index}].ans|" th:value="${ques.ans}" />-->
+            </div>
+
+            <button type="submit" class="btn btn-danger d-block mx-auto mt-4">Submit Answer</button>
+        </form>
+    </div>
+
+</tr>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/result.html b/src/main/resources/templates/result.html
new file mode 100644
index 0000000..c4305ba
--- /dev/null
+++ b/src/main/resources/templates/result.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html
+  lang="en"
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:th="http://www.thymeleaf.org"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Result Page</title>
+  </head>
+  <body>
+    <div class="main-container container py-5 px-4">
+      <div class="card bg-dark text-light py-5 px-4 mx-auto">
+        <h3 class="bg-danger text-center mb-5 p-2">Your Score</h3>
+
+        <div class="d-flex justify-content-center">
+          <p th:if="${quiz}" th:text="${quiz.getUsername()}"></p>
+        </div>
+
+        <div class="d-flex justify-content-center">
+          <p>Total correct answer:&nbsp;&nbsp;</p>
+          <p th:if="${quiz}" th:text="${quiz.totalCorrect}"></p>
+        </div>
+
+        <div class="d-flex justify-content-center">
+          <p>Total false answer:&nbsp;&nbsp;</p>
+          <p th:if="${quiz}" th:text=" 10 - ${quiz.totalCorrect}"></p>
+        </div>
+
+        <div class="d-flex justify-content-center mt-4">
+          <button
+            type="button"
+            th:onclick="window.location.href='/score'"
+            class="btn btn-outline-warning mx-auto"
+          >
+            View Score Board
+          </button>
+          <button
+            type="button"
+            th:onclick="window.location.href='/'"
+            class="btn btn-outline-warning mx-auto"
+          >
+            Back to Homepage
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/main/resources/templates/updateForm.html b/src/main/resources/templates/updateForm.html
new file mode 100644
index 0000000..6631d73
--- /dev/null
+++ b/src/main/resources/templates/updateForm.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Update Form</title>
+  </head>
+  <body>
+    <header th:replace="nav::nav"></header>
+
+    <form
+      action="#"
+      th:action="@{/update/{id}(id=${post.id})}"
+      th:object="${post}"
+      method="post"
+    >
+      <label>Post</label>
+      <input type="text" th:field="*{body}" name="post" id="post" />
+      <input type="submit" value="Update Post" />
+    </form>
+  </body>
+</html>
diff --git a/src/main/resources/templates/user.html b/src/main/resources/templates/user.html
index eb882c8..0b0e30e 100644
--- a/src/main/resources/templates/user.html
+++ b/src/main/resources/templates/user.html
@@ -11,6 +11,8 @@
     />
   </head>
   <body>
+    <header th:replace="nav::nav"></header>
+
     <div class="card" style="width: 12rem">
       <img
         src="https://freesvg.org/img/publicdomainq-0006224bvmrqd.png"
diff --git a/src/main/resources/templates/users.html b/src/main/resources/templates/users.html
index 1c28abc..4093215 100644
--- a/src/main/resources/templates/users.html
+++ b/src/main/resources/templates/users.html
@@ -15,6 +15,8 @@
     <title>Suggest Friends</title>
   </head>
   <body>
+    <header th:replace="nav::nav"></header>
+
     <style>
       body {
         background-color: darkgray;