diff --git a/profile-diff/assets/left-arrow.svg b/profile-diff-details/assets/left-arrow.svg
similarity index 100%
rename from profile-diff/assets/left-arrow.svg
rename to profile-diff-details/assets/left-arrow.svg
diff --git a/profile-diff/constants.js b/profile-diff-details/constants.js
similarity index 100%
rename from profile-diff/constants.js
rename to profile-diff-details/constants.js
diff --git a/profile-diff/index.html b/profile-diff-details/index.html
similarity index 85%
rename from profile-diff/index.html
rename to profile-diff-details/index.html
index 17487406..68217d83 100644
--- a/profile-diff/index.html
+++ b/profile-diff-details/index.html
@@ -20,10 +20,13 @@
     </header>
     <div id="toast" class="hidden"></div>
     <div class="container"></div>
+
     <script src="/helpers/loadENV.js"></script>
-    <script src="/profile-diff/constants.js"></script>
     <script src="/utils.js"></script>
-    <script src="/profile-diff/local-utils.js"></script>
+
+    <script src="/profile-diff/constants.js"></script>
+    <script src="/profile-diff/profileDiffDetails.utils.js"></script>
+    <script src="/profile-diff/profileDiffDetails.apiCalls.js"></script>
     <script src="/profile-diff/script.js"></script>
   </body>
 </html>
diff --git a/profile-diff-details/profileDiffDetails.apiCalls.js b/profile-diff-details/profileDiffDetails.apiCalls.js
new file mode 100644
index 00000000..df464055
--- /dev/null
+++ b/profile-diff-details/profileDiffDetails.apiCalls.js
@@ -0,0 +1,40 @@
+const getProfileDiff = async (id) => {
+  try {
+    const finalUrl = `${API_BASE_URL}/profileDiffs/${id}`;
+    const res = await fetch(finalUrl, {
+      credentials: 'include',
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json',
+      },
+    });
+    if (res.status === 401) {
+      return { notAuthorized: true };
+    }
+    if (res.status === 404) {
+      return { profileDiffExist: false };
+    }
+    return { profileDiffExist: true, ...(await res.json()).profileDiff };
+  } catch (err) {
+    throw err;
+  }
+};
+
+const fetchUser = async (userId) => {
+  try {
+    const userResponse = await fetch(`${API_BASE_URL}/users?id=${userId}`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        'Content-type': 'application/json',
+      },
+    });
+    if (userResponse.status === 404) {
+      return { userExist: false };
+    }
+    const { user } = await userResponse.json();
+    return { ...user, userExist: true };
+  } catch (err) {
+    throw err;
+  }
+};
diff --git a/profile-diff/local-utils.js b/profile-diff-details/profileDiffDetails.utils.js
similarity index 51%
rename from profile-diff/local-utils.js
rename to profile-diff-details/profileDiffDetails.utils.js
index 64aaff40..d6cfd1ec 100644
--- a/profile-diff/local-utils.js
+++ b/profile-diff-details/profileDiffDetails.utils.js
@@ -1,44 +1,3 @@
-const getProfileDiff = async (id) => {
-  try {
-    const finalUrl = `${API_BASE_URL}/profileDiffs/${id}`;
-    const res = await fetch(finalUrl, {
-      credentials: 'include',
-      method: 'GET',
-      headers: {
-        'Content-type': 'application/json',
-      },
-    });
-    if (res.status === 401) {
-      return { notAuthorized: true };
-    }
-    if (res.status === 404) {
-      return { profileDiffExist: false };
-    }
-    return { profileDiffExist: true, ...(await res.json()).profileDiff };
-  } catch (err) {
-    throw err;
-  }
-};
-
-const fetchUser = async (userId) => {
-  try {
-    const userResponse = await fetch(`${API_BASE_URL}/users?id=${userId}`, {
-      method: 'GET',
-      credentials: 'include',
-      headers: {
-        'Content-type': 'application/json',
-      },
-    });
-    if (userResponse.status === 404) {
-      return { userExist: false };
-    }
-    const { user } = await userResponse.json();
-    return { ...user, userExist: true };
-  } catch (err) {
-    throw err;
-  }
-};
-
 function getDataItem(data, itemName) {
   const item = data[itemName];
 
diff --git a/profile-diff/script.js b/profile-diff-details/script.js
similarity index 100%
rename from profile-diff/script.js
rename to profile-diff-details/script.js
diff --git a/profile-diff/style.css b/profile-diff-details/style.css
similarity index 100%
rename from profile-diff/style.css
rename to profile-diff-details/style.css
diff --git a/profile-diffs/index.html b/profile-diffs/index.html
index 2c87206d..4d4a0536 100644
--- a/profile-diffs/index.html
+++ b/profile-diffs/index.html
@@ -50,11 +50,14 @@
       <div id="profile-diffs" class="profile-diffs"></div>
       <div class="virtual"></div>
     </div>
+
     <script src="/helpers/loadENV.js"></script>
     <script src="/constants.js"></script>
-    <script src="/profile-diffs/constants.js"></script>
     <script src="/utils.js"></script>
-    <script src="/profile-diffs/local-utils.js"></script>
+
+    <script src="/profile-diffs/constants.js"></script>
+    <script src="/profile-diffs/profileDiffs.utils.js"></script>
+    <script src="/profile-diffs/profileDiffs.apiCalls.js"></script>
     <script src="/profile-diffs/script.js"></script>
   </body>
 </html>
diff --git a/profile-diffs/local-utils.js b/profile-diffs/profileDiffs.apiCalls.js
similarity index 56%
rename from profile-diffs/local-utils.js
rename to profile-diffs/profileDiffs.apiCalls.js
index 7dbbf8ea..5a4bb0fc 100644
--- a/profile-diffs/local-utils.js
+++ b/profile-diffs/profileDiffs.apiCalls.js
@@ -1,23 +1,3 @@
-// Utility functions
-const parseProfileDiffParams = (uri, nextPageParamsObject) => {
-  const urlSearchParams = new URLSearchParams(uri);
-  for (const [key, value] of urlSearchParams.entries()) {
-    nextPageParamsObject[key] = value;
-  }
-  return nextPageParamsObject;
-};
-
-const generateProfileDiffsParams = (nextPageParams, forApi = true) => {
-  const urlSearchParams = new URLSearchParams();
-  for (const [key, value] of Object.entries(nextPageParams)) {
-    if (!value) continue;
-    urlSearchParams.append(key, value);
-  }
-  return `/${
-    forApi ? 'profileDiffs' : 'profile-diffs'
-  }?${urlSearchParams.toString()}`;
-};
-
 const getProfileDiffs = async (query = {}, nextLink) => {
   const finalUrl =
     API_BASE_URL +
diff --git a/profile-diffs/profileDiffs.utils.js b/profile-diffs/profileDiffs.utils.js
new file mode 100644
index 00000000..1155f8a6
--- /dev/null
+++ b/profile-diffs/profileDiffs.utils.js
@@ -0,0 +1,19 @@
+// Utility functions
+const parseProfileDiffParams = (uri, nextPageParamsObject) => {
+  const urlSearchParams = new URLSearchParams(uri);
+  for (const [key, value] of urlSearchParams.entries()) {
+    nextPageParamsObject[key] = value;
+  }
+  return nextPageParamsObject;
+};
+
+const generateProfileDiffsParams = (nextPageParams, forApi = true) => {
+  const urlSearchParams = new URLSearchParams();
+  for (const [key, value] of Object.entries(nextPageParams)) {
+    if (!value) continue;
+    urlSearchParams.append(key, value);
+  }
+  return `/${
+    forApi ? 'profileDiffs' : 'profile-diffs'
+  }?${urlSearchParams.toString()}`;
+};