diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index bc0204c6..1d181ab6 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/osinacore/__pycache__/admin.cpython-311.pyc b/osinaweb/osinacore/__pycache__/admin.cpython-311.pyc
index 8db97a3f..dedfcb25 100644
Binary files a/osinaweb/osinacore/__pycache__/admin.cpython-311.pyc and b/osinaweb/osinacore/__pycache__/admin.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/__pycache__/models.cpython-311.pyc b/osinaweb/osinacore/__pycache__/models.cpython-311.pyc
index 19f13efb..e3fd9f9e 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 dba2f518..f01a2e8a 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__/0012_projectrequirement.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0012_projectrequirement.cpython-311.pyc
new file mode 100644
index 00000000..3770d72a
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0012_projectrequirement.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0013_projectfile.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0013_projectfile.cpython-311.pyc
new file mode 100644
index 00000000..e1648bde
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0013_projectfile.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0014_alter_projectfile_file.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0014_alter_projectfile_file.cpython-311.pyc
new file mode 100644
index 00000000..1a9bcdae
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0014_alter_projectfile_file.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0015_projectcredentials.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0015_projectcredentials.cpython-311.pyc
new file mode 100644
index 00000000..2fa53aa2
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0015_projectcredentials.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/migrations/__pycache__/0016_rename_projectcredentials_projectcredential.cpython-311.pyc b/osinaweb/osinacore/migrations/__pycache__/0016_rename_projectcredentials_projectcredential.cpython-311.pyc
new file mode 100644
index 00000000..c15ca8a8
Binary files /dev/null and b/osinaweb/osinacore/migrations/__pycache__/0016_rename_projectcredentials_projectcredential.cpython-311.pyc differ
diff --git a/osinaweb/osinacore/views.py b/osinaweb/osinacore/views.py
index d375bccd..66fa26a5 100644
--- a/osinaweb/osinacore/views.py
+++ b/osinaweb/osinacore/views.py
@@ -148,6 +148,19 @@ def add_status_modal(request, *args, **kwargs):
     }
     return render(request, 'addstatus-modal.html', context)
 
+def add_file_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addfile-modal.html', context) 
+
+def add_credentials_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addcredentials-modal.html', context) 
+
+
 def add_point_modal(request, *args, **kwargs):
     context = {
 
@@ -202,6 +215,6 @@ def save_note(request):
         note.save()
 
 
-        return redirect('home')  # Redirect to a success page or another view
+        # return redirect('home')  # Redirect to a success page or another view
 
     return render(request, 'addnote-modal.html') 
\ No newline at end of file
diff --git a/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc b/osinaweb/osinaweb/__pycache__/urls.cpython-311.pyc
index 0cb661db..e4a855a7 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/osinaweb/urls.py b/osinaweb/osinaweb/urls.py
index ffeb6ec4..1b8cabfd 100644
--- a/osinaweb/osinaweb/urls.py
+++ b/osinaweb/osinaweb/urls.py
@@ -33,8 +33,10 @@ urlpatterns = [
     path('createtaskepic/', views.createtask_epic, name='createtaskepic'),
 
     path('addstatus/', views.add_status_modal, name='addstatus'),
-    path('updatestatus/', views.update_status_modal, name='updatestatus'),
     path('addnote/', views.add_note_modal, name='addnote'),
+    path('addfile/', views.add_file_modal, name='addfile'),
+    path('addcredentials/', views.add_credentials_modal, name='addcredentials'),
+    path('updatestatus/', views.update_status_modal, name='updatestatus'),
     path('save_note/', views.save_note, name='save_note'),
 
     path('addpoint/', views.add_point_modal, name='addpoint'),
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index a724cd5c..ad45f071 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -795,6 +795,10 @@ video {
   height: 45px;
 }
 
+.h-\[48px\] {
+  height: 48px;
+}
+
 .h-\[500px\] {
   height: 500px;
 }
@@ -924,6 +928,10 @@ video {
   width: 45px;
 }
 
+.w-\[48px\] {
+  width: 48px;
+}
+
 .w-\[5\%\] {
   width: 5%;
 }
@@ -948,10 +956,6 @@ video {
   width: 60px;
 }
 
-.w-\[70\%\] {
-  width: 70%;
-}
-
 .w-\[70px\] {
   width: 70px;
 }
diff --git a/osinaweb/static/js/pop-modals.js b/osinaweb/static/js/pop-modals.js
index e0d0c0db..2efbf722 100644
--- a/osinaweb/static/js/pop-modals.js
+++ b/osinaweb/static/js/pop-modals.js
@@ -81,6 +81,33 @@ document.addEventListener("DOMContentLoaded", function () {
         iframe.style.width = "400px"
     });
 
+    //ADD FILE MODAL (in the inner project page)
+    const addFileButton = document.getElementById("addFileButton");
+
+    addFileButton.addEventListener("click", () => {
+        const modalUrl = addFileButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
+
+        const iframe = document.getElementById("popupModalFrame");
+        iframe.style.height = "320px"
+        iframe.style.width = "500px"
+    });
+
+
+    //ADD CREDENTIALS MODAL (in the inner project page)
+    const addCredentialsButton = document.getElementById("addCredentialsButton");
+
+    addCredentialsButton.addEventListener("click", () => {
+        const modalUrl = addCredentialsButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
+
+        const iframe = document.getElementById("popupModalFrame");
+        iframe.style.height = "300px"
+        iframe.style.width = "500px"
+    });
+
 
     //SHOW TASK MODALS
     //Show the update status modal
diff --git a/osinaweb/templates/addcredentials-modal.html b/osinaweb/templates/addcredentials-modal.html
new file mode 100644
index 00000000..63cd6b20
--- /dev/null
+++ b/osinaweb/templates/addcredentials-modal.html
@@ -0,0 +1,40 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Osina</title>
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body>
+
+    <div id="hiddenContent">
+        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Credential</h1>
+
+        <div class="w-full flex justify-center items-center">
+            <input type="text" placeholder="Account" class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+        </div>
+
+        <div class="w-full flex justify-center items-center">
+            <input type="password" placeholder="Password" class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+        </div>
+
+        <div class="w-full flex justify-center items-center">
+            <input type="password" placeholder="Used for" class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+        </div>
+
+        <div class="w-full flex justify-center items-center mt-6">
+            <button type="submit"
+                class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Add</button>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/osinaweb/templates/addfile-modal.html b/osinaweb/templates/addfile-modal.html
new file mode 100644
index 00000000..31d42b89
--- /dev/null
+++ b/osinaweb/templates/addfile-modal.html
@@ -0,0 +1,91 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Osina</title>
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body>
+
+    <div id="hiddenContent">
+        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add File</h1>
+
+        <form>
+            <p class="hidden text-blue-500 font-light" id="successMessage">
+                Your file has been successfully uploaded. You can either add another file or close the modal.
+            </p>
+
+            <div class="w-full flex justify-center items-center">
+                <input type="text" placeholder="File Name"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4" required>
+            </div>
+
+            <input type="date" id="date" name="date"
+                class="w-full md:w-[300px] p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+                required>
+
+            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md mt-3">
+                <div class="flex items-center justify-between">
+                    <input required name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden required />
+                    <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                        Document(s)</span>
+                    <label for="actual-btn"
+                        class="bg-transparent text-gray-500 border border-white  py-2 h-14 cursor-pointer flex items-center"><i
+                            class="fa fa-upload"></i></label>
+                </div>
+            </div>
+
+            <div class="w-full flex justify-center items-center mt-6">
+                <button type="submit"
+                    class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500"
+                    id="addfileclose">Add</button>
+            </div>
+        </form>
+    </div>
+
+    <script>
+        const successMessage = document.getElementById('successMessage');
+        const addfileclose = document.getElementById('addfileclose');
+        const form = document.querySelector('form');
+
+        addfileclose.addEventListener("click", () => {
+            if (form.checkValidity()) {
+                successMessage.classList.remove('hidden');
+            }
+        });
+
+        // Add an event listener to prevent the form submission when the Enter key is pressed
+        form.addEventListener("submit", (e) => {
+            e.preventDefault();
+        });
+
+
+    </script>
+
+    <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
+    <script>
+        const fileInput = document.getElementById('actual-btn');
+        const fileNameSpan = document.getElementById('file-name');
+
+        fileInput.addEventListener('change', (event) => {
+            const selectedFiles = event.target.files;
+            if (selectedFiles.length > 0) {
+                const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
+                fileNameSpan.textContent = fileNames;
+            } else {
+                fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
+            }
+        });
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/osinaweb/templates/create-project.html b/osinaweb/templates/create-project.html
index b030a794..739a4996 100644
--- a/osinaweb/templates/create-project.html
+++ b/osinaweb/templates/create-project.html
@@ -49,14 +49,23 @@
             </select>
 
             <input type="text" placeholder="Project Type"
-            class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
 
-            <textarea type="text" placeholder="Project Description" rows="5" cols="5"
+            <textarea type="text" placeholder="Project Details" rows="5" cols="5"
                 class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
 
+            <div class="w-full flex justify-between items-center gap-3">
+                <input type="text" placeholder="Requirement"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+                <button
+                    class="w-[48px] h-[48px] rounded-md p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+
+            <!-- <textarea type="text" placeholder="Project Requirements" rows="5" cols="5"
+            class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea> -->
 
-            <textarea type="text" placeholder="Project Requirements" rows="5" cols="5"
-            class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
 
             <div class="w-full">
                 <label class="text-gray-500">Start Date:</label>
@@ -70,7 +79,7 @@
                     class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
             </div>
 
-            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
+            <!-- <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
                 <div class="flex items-center justify-between">
                     <input required name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden multiple />
                     <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
@@ -78,12 +87,11 @@
                     <label for="actual-btn"
                         class="bg-transparent text-gray-500 border border-white  py-2 h-14 cursor-pointer flex items-center"><i
                             class="fa fa-upload"></i></label>
-
                 </div>
-            </div>
+            </div> -->
 
             <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
-            <script>
+            <!-- <script>
                 const fileInput = document.getElementById('actual-btn');
                 const fileNameSpan = document.getElementById('file-name');
 
@@ -96,7 +104,7 @@
                         fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
                     }
                 });
-            </script>
+            </script> -->
 
             <div class="w-full flex justify-center items-center mt-3">
                 <button
diff --git a/osinaweb/templates/project-details.html b/osinaweb/templates/project-details.html
index 4d189ac7..fd31b1d3 100644
--- a/osinaweb/templates/project-details.html
+++ b/osinaweb/templates/project-details.html
@@ -119,30 +119,32 @@
         <div class="w-full flex flex-col gap-4 mt-5">
             <div>
                 <p class="text-gray-500 text-xl">Client: <span
-                        class="text-slate-800 text-xl font-semibold">{{project.customer.first_name}} {{project.customer.last_name}}</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{project.customer.first_name}}
+                        {{project.customer.last_name}}</span></p>
             </div>
 
             <div>
                 <p class="text-gray-500 text-xl">Project Manager: <span
-                        class="text-slate-800 text-xl font-semibold">{{project.manager.first_name}} {{project.manager.last_name}}</span></p>
+                        class="text-slate-800 text-xl font-semibold">{{project.manager.first_name}}
+                        {{project.manager.last_name}}</span></p>
             </div>
 
 
             <div>
-                <p class="text-gray-500 text-xl">Member(s): 
-                  {% for member in project.members.all %}
-                  <span class="text-slate-800 text-xl font-semibold">
-                    {{member.first_name}} {{member.last_name}} {% if not forloop.last %}, {% endif %} 
-                  {% endfor %}</span>
-               </p>
+                <p class="text-gray-500 text-xl">Member(s):
+                    {% for member in project.members.all %}
+                    <span class="text-slate-800 text-xl font-semibold">
+                        {{member.first_name}} {{member.last_name}} {% if not forloop.last %}, {% endif %}
+                        {% endfor %}</span>
+                </p>
             </div>
 
             <div>
-                <p class="text-gray-500 text-xl">Type: 
-                  {% for type in project.project_type.all %}
-                   <span class="text-slate-800 text-xl font-semibold">
-                    {{type.name}}  {% if not forloop.last %}, {% endif %}
-                  {% endfor %}</span>
+                <p class="text-gray-500 text-xl">Type:
+                    {% for type in project.project_type.all %}
+                    <span class="text-slate-800 text-xl font-semibold">
+                        {{type.name}} {% if not forloop.last %}, {% endif %}
+                        {% endfor %}</span>
                 </p>
             </div>
 
@@ -173,8 +175,25 @@
                         class="text-slate-800 text-xl font-semibold">{{project.end_date}}</span></p>
             </div>
 
+            <!-- PROJECT DETAILS -->
+            <div>
+                <div>
+                    <p class="text-gray-500 text-xl">Project Details:</p>
+                    <div class="w-full px-8">
+                        <p class="text-gray-500">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt repellendus temporibus et
+                            voluptas! Mollitia error suscipit sint voluptatum perferendis earum nesciunt fuga
+                            laudantium, sapiente ex deleniti velit, quod odio corporis?
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem perspiciatis
+                            molestias inventore delectus atque praesentium voluptatem itaque, aspernatur et nesciunt
+                            dolorum omnis dolor. Aliquid natus ab laudantium pariatur porro. Consectetur!
+                        </p>
+                    </div>
+                </div>
+            </div>
+
             <!-- REQUIREMENTS -->
-           
+
             <div>
                 <p class="text-gray-500 text-xl">Requirements:</p>
                 <div class="w-full px-8">
@@ -222,6 +241,10 @@
                             </div>
                             {%endfor%}
                         </div>
+                        <div class="w-full">
+                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100"
+                                id="addFileButton" data-modal-url="{% url 'addfile' %}">ADD FILE</button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -263,6 +286,13 @@
                             </div>
                             {% endfor %}
                         </div>
+
+                        <div class="w-full">
+                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100"
+                                id="addCredentialsButton" data-modal-url="{% url 'addcredentials' %}">ADD
+                                CREDENTIALS</button>
+                        </div>
+
                     </div>
                 </div>
             </div>