diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index aa4e00d3..158585bf 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/__pycache__/models.cpython-311.pyc b/osinaweb/osinacore/__pycache__/models.cpython-311.pyc
index 89a0e19b..a2fd1662 100644
Binary files a/osinaweb/osinacore/__pycache__/models.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/models.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc
index 0c04fd35..dffd31f2 100644
Binary files a/osinaweb/osinacore/__pycache__/views.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/views.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0046_task_requirement.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0046_task_requirement.cpython-311.pyc
new file mode 100644
index 00000000..e92c87fc
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0046_task_requirement.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index 395e6686..ae2ca033 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -220,8 +220,12 @@ def staff_positions(request):
 def detailed_project(request, project_id):
     project = get_object_or_404(Project, project_id=project_id)
     epics = Epic.objects.filter(project=project)
+    latest_epic = Epic.objects.filter(project=project).last()
 
-    selected_epic_id = request.GET.get('epic_id')  # Get the selected epic_id from the query parameters
+    # if latest_epic:
+    #     epics = epics.exclude(pk=latest_epic.pk)
+
+    selected_epic_id = request.GET.get('epic_id') 
 
     if selected_epic_id:
         selected_epic = get_object_or_404(Epic, id=selected_epic_id)
@@ -233,8 +237,9 @@ def detailed_project(request, project_id):
     context = {
         'project': project,
         'epics': epics,
-        'selected_epic': selected_epic,  # Pass the selected epic to the template
-        'related_tasks': related_tasks,  # Pass the related tasks to the template
+        'selected_epic': selected_epic,
+        'related_tasks': related_tasks,
+        'latest_epic': latest_epic
     }
 
     return render(request, 'details_pages/project-details.html', context)
diff --git a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc
index 1740af22..1fad44b9 100644
Binary files a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc and b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc differ
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 96ade3e5..16037a79 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -1025,10 +1025,6 @@ video {
   width: 45px;
 }
 
-.w-\[50\%\] {
-  width: 50%;
-}
-
 .w-\[50px\] {
   width: 50px;
 }
@@ -2271,6 +2267,11 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
+.hover\:text-green-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
 .hover\:text-red-500:hover {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
diff --git a/osinaweb/templates/details_pages/project-details.html b/osinaweb/templates/details_pages/project-details.html
index 2dbbc026..7a6631bd 100644
--- a/osinaweb/templates/details_pages/project-details.html
+++ b/osinaweb/templates/details_pages/project-details.html
@@ -198,106 +198,190 @@
                 </div>
             </div>
 
+
+
             <!-- REQUIREMENTS -->
+            <div class="w-full mt-5">
+                <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
+                    <div
+                        class=" bg-slate-700 border border-slate-700 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+                        <div class="px-3">
+                            <p class="text-white uppercase font-bold">User Stories</p>
+                        </div>
 
-            <div>
-                <p class="text-gray-500 text-xl">Requirements:</p>
-                <div class="w-full px-8">
-                    <ul class="list-disc text-slate-800">
-                        {% for requirement in project.projectrequirement_set.all %}
-                        <li>{{requirement.content}}</li>
-                        {% endfor %}
-                    </ul>
+                        <button
+                            class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center">
+                            <i class="fa fa-plus"></i>
+                        </button>
+                    </div>
+                    <table class="min-w-full divide-y">
+                        <!-- TABLE HEADER -->
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                    Story
+                                </th>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                    Related Task
+                                </th>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                                    Actions
+                                </th>
+                            </tr>
+                        </thead>
+
+                        <!-- TABLE BODY -->
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <!-- 1st row -->
+                            {% for requirement in project.projectrequirement_set.all %}
+                            <tr>
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <p class="text-slate-800">{{requirement.content}}</p>
+                                </td>
+
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <a class="text-slate-800">Cars and classics inner pages</a>
+                                </td>
+
+
+                                <td class="px-6 py-4 text-center text-sm">
+                                    <div class="w-full flex justify-center items-center gap-3">
+
+                                        <button
+                                            class="w-fit py-2 px-3 bg-green-700 border border-green-700 text-white rounded-md cursor-pointer hover:bg-white hover:text-green-700">Add
+                                            Task</button>
+                                        <a href="">
+                                            <div class="text-[15px] text-blue-500 cursor-pointer">
+                                                <i class="fa fa-edit"></i>
+                                            </div>
+                                        </a>
+
+                                        <div class="text-[15px] text-red-500 cursor-pointer">
+                                            <i class="fa fa-trash"></i>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
                 </div>
             </div>
 
             <!-- RELATED FILES -->
-            <div>
-                <p class="text-gray-500 text-xl">Related Files:</p>
-                <div class="w-full px-4">
-                    <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
-                        <!-- HEADER -->
-                        <div class="w-full h-[60px] flex items-center justify-between">
-                            <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
-                                <p class="text-sm">File Name</p>
-                            </div>
-                            <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
-                                <p class="text-sm">File</p>
-                            </div>
-                            <div class="w-[25%] h-full flex justify-center items-center">
-                                <p class="text-sm">Date Entered</p>
-                            </div>
+            <div class="w-full mt-5">
+                <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
+                    <div
+                        class=" bg-slate-700 border border-slate-700 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+                        <div class="px-3">
+                            <p class="text-white uppercase font-bold">Related files</p>
                         </div>
 
-                        <!-- BODY -->
-                        <div class="w-full border-t border-gray-300">
-                            <!-- ROW -->
-                            {% for file in project.projectfile_set.all %}
-                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
-                                    <p class="text-sm">{{file.name}}</p>
-                                </div>
-                                <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
-                                    <p class="text-sm">{{file.file}}</p>
-                                </div>
-                                <div class="w-[25%] h-full flex justify-center items-center">
-                                    <p class="text-sm">{{file.date}}</p>
-                                </div>
-                            </div>
-                            {%endfor%}
-                        </div>
-                        <div class="w-full">
-                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addFileButton"
-                                data-modal-url="{% url 'addfile' %}">ADD FILE</button>
-                        </div>
+                        <button
+                            class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addFileButton"
+                            data-modal-url="{% url 'addfile' %}">
+                            <i class="fa fa-plus"></i>
+                        </button>
                     </div>
+                    <table class="min-w-full divide-y">
+                        <!-- TABLE HEADER -->
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                    File Name
+                                </th>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                    File
+                                </th>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                                    Date Entered
+                                </th>
+                            </tr>
+                        </thead>
+
+                        <!-- TABLE BODY -->
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <!-- 1st row -->
+                            {% for file in project.projectfile_set.all %}
+                            <tr>
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <p class="text-slate-800">{{file.name}}</p>
+                                </td>
+
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <a class="text-slate-800">{{file.file}}</a>
+                                </td>
+
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <a class="text-slate-800">{{file.date}}</a>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
                 </div>
             </div>
 
             <!-- CREDENTIALS -->
-            <div>
-                <p class="text-gray-500 text-xl">Credentials:</p>
-                <div class="w-full px-4">
-                    <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
-                        <!-- HEADER -->
-                        <div class="w-full h-[60px] flex items-center justify-between">
-                            <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
-                                <p class="text-sm">Email or Username</p>
-                            </div>
-                            <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
-                                <p class="text-sm">Password</p>
-                            </div>
-                            <div class="w-[25%] h-full flex justify-center items-center">
-                                <p class="text-sm">Used for</p>
-                            </div>
+            <div class="w-full mt-5">
+                <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
+                    <div
+                        class=" bg-slate-700 border border-slate-700 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+                        <div class="px-3">
+                            <p class="text-white uppercase font-bold">Credentials</p>
                         </div>
 
-                        <!-- BODY -->
-                        <div class="w-full border-t border-gray-300">
-                            <!-- ROW -->
+                        <button
+                            class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addCredentialsButton"
+                            data-modal-url="{% url 'addcredentials' %}">
+                            <i class="fa fa-plus"></i>
+                        </button>
+                    </div>
+                    <table class="min-w-full divide-y">
+                        <!-- TABLE HEADER -->
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                    Email or Username
+                                </th>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                                    Password
+                                </th>
+                                <th scope="col"
+                                    class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                                    Used For
+                                </th>
+                            </tr>
+                        </thead>
+
+                        <!-- TABLE BODY -->
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <!-- 1st row -->
                             {% for credential in project.projectcredential_set.all %}
-                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
-                                    <p class="text-sm">{{credential.emailorusername}}</p>
-                                </div>
-                                <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
-                                    <p class="text-sm">{{credential.password}}</p>
-                                </div>
-                                <div class="w-[25%] h-full flex justify-center items-center">
-                                    <p class="text-sm">{{credential.usedfor}}</p>
-                                </div>
-                            </div>
+                            <tr>
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <p class="text-slate-800">{{credential.emailorusername}}</p>
+                                </td>
+
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <a class="text-slate-800">{{credential.password}}</a>
+                                </td>
+
+                                <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                                    <a class="text-slate-800">{{credential.usedfor}}</a>
+                                </td>
+                            </tr>
                             {% endfor %}
-                        </div>
-
-                        <div class="w-full">
-                            <button
-                                class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addCredentialsButton"
-                                data-modal-url="{% url 'addcredentials' %}">ADD
-                                CREDENTIALS</button>
-                        </div>
-
-                    </div>
+                        </tbody>
+                    </table>
                 </div>
             </div>
 
@@ -332,25 +416,21 @@
                             {% endfor %}
                         </select>
                     </div>
-                    <div class="w-fit flex flex-col items-center gap-2">
+                    <div class="w-fit flex justify-end items-center gap-2">
                         <div class="w-fit justify-start items-center gap-2 hidden" id="epicDetails">
-                            <p class="text-gray-500 font-light">Start Date: <span id="startDate"
-                                    class="text-slate-800"></span>
-                            </p>
-                            <p class="text-gray-500 font-light">End Date: <span id="endDate"
-                                    class="text-slate-800"></span>
-                            </p>
+                            <span id="startDate" class="text-gray-500 font-light"></span>
+                            <span id="endDate" class="text-gray-500 font-light"></span>
                         </div>
                         <div class="w-fit flex justify-end items-center gap-2">
-                            <a href="{% url 'createepic' project.project_id %}">
+                            <!-- <a href="{% url 'createepic' project.project_id %}">
                                 <button
                                     class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md hover:bg-transparent hover:text-blue-500 duration-300">Create
                                     Epic</button>
-                            </a>
+                            </a> -->
                             <a href="{% url 'editepic' %}">
                                 <button id="editEpicButton"
                                     class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
-                                    disabled>Edit
+                                    disabled>View
                                     Epic</button>
                             </a>
                             <a href="{% url 'createtaskepic' %}">
@@ -359,10 +439,6 @@
                                     disabled>Create
                                     Task</button>
                             </a>
-                            <button id="createStoryButton"
-                                class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
-                                disabled>Create
-                                Story</button>
                         </div>
                     </div>
                 </div>
@@ -370,7 +446,7 @@
 
 
             <!-- TO DISPLAY THE FETCHED TASKS -->
-            <div class="w-full px-4" id="epicRelatedTasksContainer">
+            <div class="w-full" id="epicRelatedTasksContainer">
 
             </div>
         </div>