diff --git a/assets/KDM-Icons/icons.tsx b/assets/KDM-Icons/icons.tsx
index 033135a..6daf0a8 100644
--- a/assets/KDM-Icons/icons.tsx
+++ b/assets/KDM-Icons/icons.tsx
@@ -33,11 +33,14 @@ export const DotDotDotIcon = () => (
   </svg>
 );
 
-export const OpenIcon = () => (
+export const OpenIcon = (props: {
+  width: string | undefined;
+  height: string | undefined;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="10"
-    height="7"
+    width={props.width}
+    height={props.height}
     viewBox="0 0 10 7"
     fill="none"
   >
diff --git a/components/KDMDropdown/index.tsx b/components/KDMDropdown/index.tsx
index 51729f6..550f676 100644
--- a/components/KDMDropdown/index.tsx
+++ b/components/KDMDropdown/index.tsx
@@ -60,7 +60,7 @@ export default function KDMDropdown({
           <CheckmarkIcon width={'8'} height={'7'} />
           <TagText2>{totalCompletedKDMs}/6</TagText2>
         </CompletionIndicatorTag>
-        {isOpen ? <CloseIcon /> : <OpenIcon />}
+        {isOpen ? <CloseIcon /> : <OpenIcon width={'10'} height={'7'} />}
       </Header>
       {isOpen ? KDMs : <ProgressBar>{ProgressBarContent}</ProgressBar>}
     </KDMContainer>
diff --git a/components/ProjectsListingModal/index.tsx b/components/ProjectsListingModal/index.tsx
index 0ff9f72..be4bf3c 100644
--- a/components/ProjectsListingModal/index.tsx
+++ b/components/ProjectsListingModal/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Modal from 'react-modal';
+import { OpenIcon } from '@/assets/KDM-Icons/icons';
 import { GlobeIcon } from '@/assets/Project-Icons/icons';
 import { SubHeading2 } from '@/styles/texts';
 import { Project } from '../../types/schema';
@@ -8,11 +9,13 @@ import ProjectItem from '../ProjectItem';
 import { SearchBar } from '../SearchBar';
 import {
   AllProjectsHeader,
+  Headers,
   ModalContents,
   modalContentStyles,
   modalOverlayStyles,
   ProjectDetails,
   ProjectItemsDiv,
+  SortByButton,
 } from './styles';
 
 export default function ProjectsListingModal({
@@ -55,10 +58,16 @@ export default function ProjectsListingModal({
             searchTerm={searchTerm}
             setSearchTerm={setSearchTerm}
           ></SearchBar>
-          <AllProjectsHeader>
-            <GlobeIcon width={'0.5625rem'} height={'0.5625rem'} />
-            <SubHeading2>ALL PROJECTS</SubHeading2>
-          </AllProjectsHeader>
+          <Headers>
+            <AllProjectsHeader>
+              <GlobeIcon width={'0.5625rem'} height={'0.5625rem'} />
+              <SubHeading2>ALL PROJECTS</SubHeading2>
+            </AllProjectsHeader>
+            <SortByButton onClick={() => {}}>
+              <SubHeading2>SORT BY</SubHeading2>
+              <OpenIcon width={'10'} height={'14'} />
+            </SortByButton>
+          </Headers>
           <ProjectItemsDiv>{projectItems}</ProjectItemsDiv>
         </ModalContents>
       </ProjectDetails>
diff --git a/components/ProjectsListingModal/styles.ts b/components/ProjectsListingModal/styles.ts
index a9e1dde..5d3de1a 100644
--- a/components/ProjectsListingModal/styles.ts
+++ b/components/ProjectsListingModal/styles.ts
@@ -44,7 +44,7 @@ export const AllProjectsHeader = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  width: 19.5rem;
+  width: 13rem;
   gap: 0.4rem;
   align-items: center;
 `;
@@ -67,3 +67,18 @@ export const ProjectItemsDiv = styled.div`
   justify-content: space-between;
   gap: 0.75rem;
 `;
+
+export const SortByButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  background: ${COLORS.navy30};
+  padding: 0.2rem 0.5rem;
+  border-radius: 1.25rem;
+  gap: 0.3rem;
+`;
+
+export const Headers = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;