diff --git a/__tests__/groups/group.test.js b/__tests__/groups/group.test.js
index fb43d37d..71f43676 100644
--- a/__tests__/groups/group.test.js
+++ b/__tests__/groups/group.test.js
@@ -3,6 +3,7 @@ const { allUsersData } = require('../../mock-data/users');
 const { discordGroups, GroupRoleData } = require('../../mock-data/groups');
 
 const BASE_URL = 'https://api.realdevsquad.com';
+const PAGE_URL = 'http://localhost:8000';
 
 describe('Discord Groups Page', () => {
   let browser;
@@ -135,7 +136,7 @@ describe('Discord Groups Page', () => {
         interceptedRequest.continue();
       }
     });
-    await page.goto('http://localhost:8000/groups');
+    await page.goto(`${PAGE_URL}/groups`);
     await page.waitForNetworkIdle();
   });
 
@@ -319,7 +320,7 @@ describe('Discord Groups Page', () => {
   });
 
   test('should update input field and filter group list with search value in URL', async () => {
-    await page.goto('http://localhost:8000/groups/?dev=true&DSA');
+    await page.goto(`${PAGE_URL}/groups/?dev=true&DSA`);
     manageGroup = await page.$('.manage-groups-tab');
     await manageGroup.click();
     const searchInput = await page.$('#search-groups');
@@ -341,7 +342,7 @@ describe('Discord Groups Page', () => {
   });
 
   test('should select the group from URL and have active-group class', async () => {
-    await page.goto('http://localhost:8000/groups?DSA');
+    await page.goto(`${PAGE_URL}/groups?DSA`);
     const activeGroup = await page.$('.active-group');
     const groupName = await page.evaluate(
       (element) => element.innerText,
@@ -349,4 +350,84 @@ describe('Discord Groups Page', () => {
     );
     expect(groupName).toMatch('DSA');
   });
+  test('On click on "Popular within dev" will result group with most member at the top', async () => {
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+
+    const groupsBeforeSort = await page.$$eval('.group-name', (elements) => {
+      return elements.map((element) =>
+        element.getAttribute('data-member-count'),
+      );
+    });
+    await page.$$eval('#dropdown_main', (el) => {
+      el[0].click();
+    });
+
+    await page.$$eval('[data-list="1"]', (el) => {
+      el[0].click();
+    });
+    const groupsAfterSort = await page.$$eval('.group-name', (elements) => {
+      return elements.map((element) =>
+        element.getAttribute('data-member-count'),
+      );
+    });
+    const manualSortedGroup = groupsBeforeSort.sort((a, b) => b - a);
+    expect(groupsAfterSort).toEqual(manualSortedGroup);
+  });
+  test('On click on "Recently created" will result in latest created group at the top', async () => {
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+
+    const groupNameCreateDateLookup = {};
+    discordGroups.groups.forEach((group) => {
+      const grpName = group.rolename.split('-').slice(1).join('-');
+      groupNameCreateDateLookup[grpName] = group.date._seconds;
+    });
+    const groupsBeforeSort = await page.$$eval('.group-name', (elements) => {
+      return elements.map((element) => element.innerText);
+    });
+
+    await page.$$eval('#dropdown_main', (el) => {
+      el[0].click();
+    });
+    await page.$$eval('[data-list="2"]', (el) => {
+      el[0].click();
+    });
+    const groupAfterSort = await page.$$eval('.group-name', (elements) => {
+      return elements.map((element) => element.innerText);
+    });
+    const manualSortedGroup = groupsBeforeSort.sort(
+      (a, b) => groupNameCreateDateLookup[b] - groupNameCreateDateLookup[a],
+    );
+    expect(groupAfterSort).toEqual(manualSortedGroup);
+  });
+  test('On click on "Recently used" will result in recently used group at the top', async () => {
+    await page.goto(`${PAGE_URL}/groups?dev=true`);
+    await page.waitForNetworkIdle();
+
+    const groupNameCreateDateLookup = {};
+    discordGroups.groups.forEach((group) => {
+      const grpName = group.rolename.split('-').slice(1).join('-');
+      groupNameCreateDateLookup[grpName] = group.lastUsedOn
+        ? group.lastUsedOn._seconds
+        : 0;
+    });
+    const groupsBeforeSort = await page.$$eval('.group-name', (elements) => {
+      return elements.map((element) => element.innerText);
+    });
+
+    await page.$$eval('#dropdown_main', (el) => {
+      el[0].click();
+    });
+    await page.$$eval('[data-list="3"]', (el) => {
+      el[0].click();
+    });
+    const groupAfterSort = await page.$$eval('.group-name', (elements) => {
+      return elements.map((element) => element.innerText);
+    });
+    const manualSortedGroup = groupsBeforeSort.sort(
+      (a, b) => groupNameCreateDateLookup[b] - groupNameCreateDateLookup[a],
+    );
+    expect(groupAfterSort).toEqual(manualSortedGroup);
+  });
 });
diff --git a/groups/constants.js b/groups/constants.js
index 0ff87dfc..00e81726 100644
--- a/groups/constants.js
+++ b/groups/constants.js
@@ -1,5 +1,15 @@
 const NO_SPACES_ALLOWED = 'Roles cannot have spaces';
 const CANNOT_CONTAIN_GROUP = "Roles cannot contain 'group'.";
 const DEV_FEATURE_FLAG = 'dev';
+const SortByFields = [
+  { id: '1', fieldName: 'memberCount' },
+  { id: '2', fieldName: 'date._seconds' },
+  { id: '3', fieldName: 'lastUsedOn._seconds' },
+];
 
-export { NO_SPACES_ALLOWED, CANNOT_CONTAIN_GROUP, DEV_FEATURE_FLAG };
+export {
+  SortByFields,
+  NO_SPACES_ALLOWED,
+  CANNOT_CONTAIN_GROUP,
+  DEV_FEATURE_FLAG,
+};
diff --git a/groups/index.html b/groups/index.html
index cd28f444..578cb88c 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -36,6 +36,14 @@ <h3 class="not-verified-tag hidden">
           <ul class="groups-list"></ul>
         </aside>
         <main>
+          <div class="dropdown hidden" id="dropdown_container">
+            <button class="task_filter-button" id="sortby_text">Sort by</button>
+            <div id="dropdown_main" class="dropdown-content">
+              <a data-list="1">Popular within dev</a>
+              <a data-list="2">Recently created</a>
+              <a data-list="3">Recently used</a>
+            </div>
+          </div>
           <button class="btn btn-add-role" disabled>
             Add me to this group
           </button>
diff --git a/groups/script.js b/groups/script.js
index 74e9e3fe..3597a8d8 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -3,6 +3,7 @@ import {
   CANNOT_CONTAIN_GROUP,
   DEV_FEATURE_FLAG,
   NO_SPACES_ALLOWED,
+  SortByFields,
 } from './constants.js';
 import {
   removeGroupKeywordFromDiscordRoleName,
@@ -22,6 +23,19 @@ const userIsNotVerifiedText = document.querySelector('.not-verified-tag');
 const params = new URLSearchParams(window.location.search);
 const searchValue = getSearchValueFromURL();
 const isDev = params.get(DEV_FEATURE_FLAG) === 'true';
+const dropdownContainer = document.getElementById('dropdown_container');
+
+//Dropdown
+const dropdownMain = document.getElementById('dropdown_main');
+const dropdownTxt = document.getElementById('sortby_text');
+function toggleDropDown() {
+  dropdownMain.classList.toggle('show_filter');
+}
+dropdownTxt.addEventListener('click', toggleDropDown);
+if (isDev) {
+  dropdownContainer.classList.remove('hidden');
+  dropdownMain.addEventListener('click', onDropdownClick);
+}
 // const paragraphElement = null, paragraphContent = '';
 
 const searchInput = document.getElementById('search-groups');
@@ -78,44 +92,95 @@ const memberAddRoleBody = {
  */
 const groupsData = await getDiscordGroups();
 const groupRoles = document.querySelector('.groups-list');
-groupsData?.forEach((item) => {
-  const group = document.createElement('li');
-  group.setAttribute('id', item.roleid);
-  group.classList.add('group-role');
-  const formattedRoleName = removeGroupKeywordFromDiscordRoleName(
-    item.rolename,
-  );
 
-  //If searchValue present, filter out the list
-  if (searchValue) {
-    group.style.display = formattedRoleName
-      .toUpperCase()
-      .includes(searchValue.toUpperCase())
-      ? ''
-      : 'none';
-  }
+const renderGroups = () => {
+  groupRoles.innerHTML = null;
+  groupsData?.forEach((item) => {
+    const group = document.createElement('li');
+    group.setAttribute('id', item.roleid);
+    group.classList.add('group-role');
+    const formattedRoleName = removeGroupKeywordFromDiscordRoleName(
+      item.rolename,
+    );
+
+    //If searchValue present, filter out the list
+    if (searchValue) {
+      group.style.display = formattedRoleName
+        .toUpperCase()
+        .includes(searchValue.toUpperCase())
+        ? ''
+        : 'none';
+    }
 
-  const groupname = document.createElement('p');
-  groupname.classList.add('group-name');
-  groupname.setAttribute('id', `name-${item.roleid}`);
+    const groupname = document.createElement('p');
+    groupname.classList.add('group-name');
+    groupname.setAttribute('id', `name-${item.roleid}`);
 
-  if (item.memberCount !== null && item.memberCount !== undefined) {
-    groupname.setAttribute('data-member-count', item.memberCount);
-  }
+    if (item.memberCount !== null && item.memberCount !== undefined) {
+      groupname.setAttribute('data-member-count', item.memberCount);
+    }
 
-  groupname.textContent = formattedRoleName;
+    groupname.textContent = formattedRoleName;
 
-  const createdBy = createAuthorDetailsDOM(
-    item.firstName,
-    item.lastName,
-    item.image,
-  );
+    const createdBy = createAuthorDetailsDOM(
+      item.firstName,
+      item.lastName,
+      item.image,
+    );
 
-  group.appendChild(groupname);
-  group.appendChild(createdBy);
-  groupRoles.appendChild(group);
-});
+    group.appendChild(groupname);
+    group.appendChild(createdBy);
+    groupRoles.appendChild(group);
+  });
+};
+
+const giveABForCompariosn = (a, b, field) => {
+  let data = [0, 0];
+  switch (field) {
+    case 'date._seconds':
+      data[0] = a.date._seconds;
+      data[1] = b.date._seconds;
+      break;
+    case 'memberCount':
+      data[0] = a.memberCount || 0;
+      data[1] = b.memberCount || 0;
+      break;
+    case 'lastUsedOn._seconds':
+      if (a.lastUsedOn) {
+        data[0] = a.lastUsedOn._seconds;
+      }
+      if (b.lastUsedOn) {
+        data[1] = b.lastUsedOn._seconds;
+      }
+      break;
+    default:
+      data = [0, 0];
+  }
+  return data;
+};
+
+function onDropdownClick(ev) {
+  const clickedOptionsId = ev.target.dataset.list;
+  const fieldToSortBy = SortByFields.find(
+    (field) => field.id === clickedOptionsId,
+  );
+  groupsData.sort((firstObj, secondObj) => {
+    const [a, b] = giveABForCompariosn(
+      firstObj,
+      secondObj,
+      fieldToSortBy.fieldName,
+    );
+    if (a > b) {
+      return -1;
+    } else if (b < a) {
+      return 1;
+    }
+    return 0;
+  });
+  renderGroups();
+}
 
+renderGroups();
 /**
  * FOR RENDERING TABS
  * I.E. MANAGE ROLES, CREATE GROUP
diff --git a/groups/style.css b/groups/style.css
index 9e17b9bf..ad007913 100644
--- a/groups/style.css
+++ b/groups/style.css
@@ -13,6 +13,8 @@
   --color-white: rgb(255, 255, 255);
   --color-not-verified: rgb(255, 0, 0);
   --color-member-count: #717171;
+  --color-group-dropdown-background: #f6f6f6;
+  --color-group-dropdown-border-color: #ddd;
 }
 .container {
   font-family: 'Roboto', sans-serif;
@@ -101,7 +103,7 @@
   display: flex;
 }
 .manage-groups main {
-  padding: 1rem 4rem;
+  padding: 1rem 2rem;
   flex: 1;
 }
 
@@ -284,6 +286,63 @@ NOT VERIFIED TEXT ABOVE
   text-align: center;
 }
 
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: var(--color-group-dropdown-background);
+  min-width: 14rem;
+  overflow: auto;
+  border: 1px solid var(--color-group-dropdown-border-color);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  padding: 0.75rem 1rem;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown a:hover {
+  background-color: var(--color-group-dropdown-border-color);
+}
+
+.show_filter {
+  display: block;
+}
+
+.dropdown-content {
+  cursor: pointer;
+}
+
+.task_filter-button {
+  width: 5rem;
+  height: 2rem;
+  border-radius: 0.27rem 0 0 0.27rem;
+  background-color: var(--color-group-dropdown-background);
+  color: #000;
+  font-weight: 700;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 0.3rem;
+  border: 1px solid var(--color-group-dropdown-border-color);
+}
+
+.task_filter-button:after {
+  content: '';
+  border-left: 0.3rem solid transparent;
+  border-right: 0.3rem solid transparent;
+  border-top: 0.3rem solid;
+  margin-left: 0.5rem;
+}
+
 @media (max-width: 650px) {
   .btn-add-role {
     position: static;
diff --git a/mock-data/groups/index.js b/mock-data/groups/index.js
index 3ecb9602..15b86aba 100644
--- a/mock-data/groups/index.js
+++ b/mock-data/groups/index.js
@@ -28,6 +28,10 @@ const discordGroups = {
       lastName: 'User2',
       image: 'https://image.cdn.com/12dfg',
       memberCount: 200,
+      lastUsedOn: {
+        _nanoseconds: 61000000,
+        _seconds: 1703615100,
+      },
     },
     {
       id: '"mvWVuAxtSuhQtunjcywv"',
@@ -42,6 +46,10 @@ const discordGroups = {
       lastName: 'User1',
       image: 'https://image.cdn.com/123dfgh',
       memberCount: 0,
+      lastUsedOn: {
+        _nanoseconds: 61070000,
+        _seconds: 1703615154,
+      },
     },
   ],
 };