diff --git a/assets/SearchBar-Icons/icons.tsx b/assets/SearchBar-Icons/icons.tsx
new file mode 100644
index 0000000..7461b39
--- /dev/null
+++ b/assets/SearchBar-Icons/icons.tsx
@@ -0,0 +1,29 @@
+export const SearchIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <path
+      d="M12.8063 14L7.98867 9.18149C5.84552 10.7052 2.89234 10.3325 1.19493 8.32411C-0.502472 6.31577 -0.377837 3.34178 1.48166 1.4825C3.34066 -0.377593 6.31494 -0.502768 8.32366 1.19455C10.3324 2.89187 10.7053 5.84533 9.18149 7.98867L13.9992 12.8072L12.8072 13.9992L12.8063 14ZM5.0576 1.68649C3.45905 1.68613 2.07992 2.80824 1.75518 4.37347C1.43045 5.93869 2.24937 7.51682 3.71614 8.15241C5.18291 8.78799 6.89438 8.30633 7.81437 6.99904C8.73436 5.69176 8.61 3.91815 7.51659 2.75204L8.0266 3.25783L7.45168 2.6846L7.44157 2.67448C6.81083 2.03986 5.95234 1.68408 5.0576 1.68649Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
+
+export const SearchExit = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="10"
+    height="10"
+    viewBox="0 0 10 10"
+    fill="none"
+  >
+    <path
+      d="M8.59 0L5 3.59L1.41 0L0 1.41L3.59 5L0 8.59L1.41 10L5 6.41L8.59 10L10 8.59L6.41 5L10 1.41L8.59 0Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
diff --git a/components/Filter/styles.ts b/components/Filter/styles.ts
index ff909c2..16519ce 100644
--- a/components/Filter/styles.ts
+++ b/components/Filter/styles.ts
@@ -2,18 +2,18 @@ import styled from 'styled-components';
 import { FilterHeadingUnused } from '@/styles/texts';
 
 export const FilterBackgroundStyles = styled.div<{ isActive: boolean }>`
-  margin-right: 0.375rem;
+  margin-right: 0.5rem;
   background: linear-gradient(
     180deg,
     rgba(250, 250, 250, 0.32) 0%,
     rgba(238, 238, 238, 0.65) 100%
   );
   backdrop-filter: blur(7.5px);
-  padding: 0.35rem 0.35rem;
+  padding: 0.25rem;
   z-index: 5;
   border: 0.05rem solid #fff;
-  margin-top: 0.75rem;
-  max-height: ${({ isActive }) => (isActive ? 'auto' : '2rem')};
+  margin-top: 1rem;
+  max-height: ${({ isActive }) => (isActive ? 'auto' : '2.2rem')};
   border-radius: ${({ isActive }) => (isActive ? '0.5rem' : '6.25rem')};
   transition: height 0.5s ease-in-out;
 `;
@@ -28,9 +28,10 @@ export const FilterButtonStyles = styled.button`
   line-height: normal;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 1rem;
   padding: 0.5rem 1rem;
   color: rgba(46, 58, 89, 0.85);
+  height: 2.2rem;
 `;
 
 export const IconStyle = styled.div`
diff --git a/components/ProjectModal/styles.ts b/components/ProjectModal/styles.ts
index 3c3f57d..e812e73 100644
--- a/components/ProjectModal/styles.ts
+++ b/components/ProjectModal/styles.ts
@@ -15,13 +15,14 @@ export const modalContentStyles: CSSProperties = {
   width: '90vw',
   maxWidth: '22.25rem',
   height: '85vh',
-  borderRadius: 'var(--Spacing-Small, 16px)',
+  borderRadius:
+    'var(--Spacing-Medium, 1.5rem) var(--Spacing-Medium, 1.5rem) 1.875rem 1.875rem',
   border: '0.75px solid var(--WorldPeas-White, #fff)',
   background:
     'linear-gradient(180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100%)',
   backdropFilter: 'blur(7.5px)',
-  paddingTop: '0.625rem',
-  paddingBottom: '0.625rem',
+  paddingTop: '0.25rem',
+  paddingBottom: '0.25rem',
   boxSizing: 'border-box',
   flexDirection: 'column',
   alignItems: 'center',
@@ -32,10 +33,10 @@ export const ProjectDetails = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-radius: var(--Spacing-Small, 16px);
+  border-radius: var(--Spacing-Small, 1.2rem);
   height: 100%;
   background: ${COLORS.white};
-  width: 21.25rem;
+  width: 21.6rem;
   overflow-y: auto;
 `;
 
diff --git a/components/ProjectsListingModal/styles.ts b/components/ProjectsListingModal/styles.ts
index 52c6689..b84357f 100644
--- a/components/ProjectsListingModal/styles.ts
+++ b/components/ProjectsListingModal/styles.ts
@@ -15,26 +15,28 @@ export const modalContentStyles: CSSProperties = {
   width: '90vw',
   maxWidth: '22.25rem',
   height: '85vh',
-  borderRadius: 'var(--Spacing-Small, 16px)',
+  borderRadius:
+    'var(--Spacing-Medium, 1.5rem) var(--Spacing-Medium, 1.5rem) 1.875rem 1.875rem',
   border: '0.75px solid var(--WorldPeas-White, #fff)',
   background:
     'linear-gradient(180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100%)',
   backdropFilter: 'blur(7.5px)',
-  paddingTop: '0.625rem',
-  paddingBottom: '0.625rem',
+  paddingTop: '0.25rem',
+  paddingBottom: '0.25rem',
   boxSizing: 'border-box',
   flexDirection: 'column',
   alignItems: 'center',
+  overflow: 'hidden',
 };
 
 export const ProjectDetails = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-radius: var(--Spacing-Small, 16px);
+  border-radius: var(--Spacing-Small, 1.2rem);
   height: 100%;
   background: ${COLORS.white};
-  width: 21.25rem;
+  width: 21.6rem;
   overflow-y: auto;
   gap: 0.75rem;
   padding-bottom: 0.8125rem;
diff --git a/components/SearchBar/index.tsx b/components/SearchBar/index.tsx
index 3bfda0f..b6a0888 100644
--- a/components/SearchBar/index.tsx
+++ b/components/SearchBar/index.tsx
@@ -1,8 +1,7 @@
-import { AiOutlineClose } from 'react-icons/ai';
-import { IoIosSearch } from 'react-icons/io';
+import { SearchExit, SearchIcon } from '@/assets/SearchBar-Icons/icons';
 import {
-  IconStyles,
   SearchBarBackgroundStyles,
+  SearchBarDiv,
   SearchBarPaddingStyles,
   SearchBarStyles,
 } from './styles';
@@ -11,13 +10,11 @@ export const SearchBar = () => {
   return (
     <SearchBarPaddingStyles>
       <SearchBarBackgroundStyles>
-        <IconStyles>
-          <IoIosSearch />
-        </IconStyles>
-        <SearchBarStyles type="text" placeholder="Search for a project" />
-        <IconStyles>
-          <AiOutlineClose />
-        </IconStyles>
+        <SearchBarDiv>
+          <SearchIcon />
+          <SearchBarStyles type="text" placeholder="Search for a project" />
+          <SearchExit />
+        </SearchBarDiv>
       </SearchBarBackgroundStyles>
     </SearchBarPaddingStyles>
   );
diff --git a/components/SearchBar/styles.ts b/components/SearchBar/styles.ts
index cac4fc5..6403d3d 100644
--- a/components/SearchBar/styles.ts
+++ b/components/SearchBar/styles.ts
@@ -4,50 +4,48 @@ import COLORS from '../../styles/colors';
 export const SearchBarPaddingStyles = styled.div`
   display: inline-flex;
   position: absolute;
-  top: 3%;
-  left: 1.7%;
+  top: 1.26rem;
+  left: 1.25rem;
   background: linear-gradient(
     180deg,
     rgba(250, 250, 250, 0.32) 0%,
     rgba(238, 238, 238, 0.65) 100%
   );
   backdrop-filter: blur(7.5px);
-  padding: 0.5rem;
+  padding: 0.3rem;
   align-items: center;
   gap: 0.4rem;
-  border-radius: 0.75rem;
+  border-radius: 6.25rem;
   border: 0.05rem solid #fff;
   z-index: 3;
 `;
 
 export const SearchBarBackgroundStyles = styled.div`
   display: flex;
-  width: 21.3rem;
-  height: 3.1rem;
+  width: 21.6rem;
+  height: 2.75rem;
   padding: 0.3rem 1.8rem;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
   gap: 0.5rem;
-  border-radius: 0.5rem;
-  background: #fff;
+  border-radius: 6.25rem;
+  background: ${COLORS.white};
   box-sizing: border-box;
 `;
 
 export const SearchBarStyles = styled.input`
+  padding-left: 0.75rem;
   border: none;
   outline: none;
   box-shadow: none;
-  width: 80%;
-  color: #4974e0;
-  font-size: 0.9rem;
-  font-family: CoinbaseText, sans-serif;
+  padding-right: 7rem;
 `;
 
-export const IconStyles = styled.div`
-  width: 1.1rem;
-  height: 1.1rem;
-  flex-shrink: 0;
-  color: ${COLORS.electricBlue};
+export const SearchBarDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 `;
diff --git a/components/TechnologyDropdown/styles.ts b/components/TechnologyDropdown/styles.ts
index a813541..5e55eb9 100644
--- a/components/TechnologyDropdown/styles.ts
+++ b/components/TechnologyDropdown/styles.ts
@@ -25,10 +25,6 @@ export const CheckboxContainer = styled.div`
   margin-bottom: -0.875rem;
 `;
 
-export const CategoryDiv = styled.div`
-  display: flex;
-`;
-
 export const CategoryTitleStyles = styled.p`
   display: flex;
   font-family: ${CoinbaseMono};