diff --git a/packages/bruno-app/src/components/Accordion/index.js b/packages/bruno-app/src/components/Accordion/index.js
index db1f465c7..ed73921d7 100644
--- a/packages/bruno-app/src/components/Accordion/index.js
+++ b/packages/bruno-app/src/components/Accordion/index.js
@@ -31,7 +31,7 @@ export const Header = ({ index, children, ...props }) => {
   const isOpen = openIndex === index;
 
   return (
-    <AccordionHeader onClick={() => toggleItem(index)} {...props}>
+    <AccordionHeader onClick={() => toggleItem(index)} {...props} className={isOpen ? 'open' : ''}>
       <div className="w-full">{children}</div>
 
       <IconChevronDown
diff --git a/packages/bruno-app/src/components/Accordion/styledWrapper.js b/packages/bruno-app/src/components/Accordion/styledWrapper.js
index c09ed6f06..351100204 100644
--- a/packages/bruno-app/src/components/Accordion/styledWrapper.js
+++ b/packages/bruno-app/src/components/Accordion/styledWrapper.js
@@ -10,12 +10,12 @@ const AccordionItem = styled.div`
 const AccordionHeader = styled.button`
   width: 100%;
   display: flex;
-  padding: 1rem;
+  padding: 0.75rem 1rem;
   background: transparent;
   cursor: pointer;
   font-weight: 500;
 
-  &:hover {
+  &.open, &:hover {
     background-color: ${(props) => props.theme.plainGrid.hoverBg};
   }
 `;
@@ -23,7 +23,6 @@ const AccordionHeader = styled.button`
 const AccordionContent = styled.div`
   padding: ${(props) => (props.isOpen ? '1rem' : '0')};
   max-height: ${(props) => (props.isOpen ? 'auto' : '0')};
-  transition: all 0.2s ease-in-out;
 `;
 
 export { AccordionItem, AccordionHeader, AccordionContent };
diff --git a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
index 04ec69914..5f7f66867 100644
--- a/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
+++ b/packages/bruno-app/src/components/Cookies/ModifyCookieModal/index.js
@@ -225,7 +225,7 @@ const ModifyCookieModal = ({ onClose, domain, cookie }) => {
         </div>
       }
     >
-      <form onSubmit={(e) => e.preventDefault()} className="p-6">
+      <form onSubmit={(e) => e.preventDefault()} className="px-2">
         {isRawMode ? (
           <div>
             <div className="flex items-center gap-2 mb-1">
diff --git a/packages/bruno-app/src/components/Cookies/StyledWrapper.js b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
index 4d7f62067..5e3cdd125 100644
--- a/packages/bruno-app/src/components/Cookies/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Cookies/StyledWrapper.js
@@ -12,6 +12,12 @@ const Wrapper = styled.div`
     }
   }
 
+  &.header {
+    input {
+      padding: 0.3rem 0.5rem;
+    }
+  }
+
   .textbox {
     line-height: 1.42857143;
     border: 1px solid #ccc;
diff --git a/packages/bruno-app/src/components/Cookies/index.js b/packages/bruno-app/src/components/Cookies/index.js
index bf938024f..2afa3d37d 100644
--- a/packages/bruno-app/src/components/Cookies/index.js
+++ b/packages/bruno-app/src/components/Cookies/index.js
@@ -129,25 +129,25 @@ const CollectionProperties = ({ onClose }) => {
         hideFooter={true}
         handleCancel={onClose}
         customHeader={shouldShowHeader ? (
-          <StyledWrapper className="flex items-center justify-between w-full">
-            <h2 className="text-sm font-semibold">Cookies</h2>
+          <StyledWrapper className="header flex items-center justify-between w-full">
+            <h2 className="text-xs font-medium">Cookies</h2>
             <input
               type="search"
               placeholder="Search by domain"
               value={searchText || ''}
               onChange={(e) => setSearchText(e.target.value)}
-              className="block textbox non-passphrase-input h-9 ml-auto"
+              className="block textbox non-passphrase-input ml-auto font-normal"
             />
             <button
               type="submit"
-              className="submit btn btn-sm h-9 btn-secondary flex items-center gap-1 mx-4"
+              className="submit btn btn-sm btn-secondary flex items-center gap-1 mx-4 font-medium"
               onClick={(e) => {
                 e.stopPropagation();
                 handleAddCookie();
               }}
             >
               <IconCirclePlus strokeWidth={1.5} size={16} />
-              <span>Add New</span>
+              <span>Add Cookie</span>
             </button>
           </StyledWrapper>
         ) : null}
@@ -156,19 +156,19 @@ const CollectionProperties = ({ onClose }) => {
           {!cookies || !cookies.length ? (
             // No cookies found
             <div className="flex items-center justify-center flex-col">
-              <IconCookieOff size={48} />
+              <IconCookieOff size={48} strokeWidth={1.5} className="text-gray-500" />
               <h2 className="text-lg font-semibold mt-4">No cookies found</h2>
               <p className="text-gray-500 mt-2">Add cookies to get started</p>
               <button
                 type="submit"
-                className="submit btn btn-sm btn-secondary flex items-center gap-1 mt-4"
+                className="submit btn btn-sm btn-secondary flex items-center gap-1 mt-8"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleAddCookie();
                 }}
               >
                 <IconCirclePlus strokeWidth={1.5} size={16} />
-                <span>Add New</span>
+                <span>Add Cookie</span>
               </button>
             </div>
           ) : cookies.length && !filteredCookies.length ? (
@@ -218,19 +218,19 @@ const CollectionProperties = ({ onClose }) => {
                       <div className="flex items-center justify-between">
                         <table className="w-full">
                           <thead>
-                            <tr className="text-left border-b border-gray-300 dark:border-neutral-600">
-                              <th className="py-2 px-4 font-medium w-32">Name</th>
-                              <th className="py-2 px-4 font-medium w-52">Value</th>
-                              <th className="py-2 px-4 font-medium">Path</th>
-                              <th className="py-2 px-4 font-medium">Expires</th>
-                              <th className="py-2 px-4 font-medium text-center">Secure</th>
-                              <th className="py-2 px-4 font-medium text-center">HTTP Only</th>
-                              <th className="py-2 px-4 font-medium text-right w-24">Actions</th>
+                            <tr className="text-left border-b border-gray-200 dark:border-neutral-600 text-gray-700 dark:text-gray-300">
+                              <th className="py-2 px-4 font-semibold w-32">Name</th>
+                              <th className="py-2 px-4 font-semibold w-52">Value</th>
+                              <th className="py-2 px-4 font-semibold">Path</th>
+                              <th className="py-2 px-4 font-semibold">Expires</th>
+                              <th className="py-2 px-4 font-semibold text-center">Secure</th>
+                              <th className="py-2 px-4 font-semibold text-center">HTTP Only</th>
+                              <th className="py-2 px-4 font-semibold text-right w-24">Actions</th>
                             </tr>
                           </thead>
                           <tbody>
                             {domainWithCookies.cookies.map((cookie) => (
-                              <tr key={cookie.key} className="border-b border-gray-300 dark:border-neutral-600 last:border-none">
+                              <tr key={cookie.key} className="border-b border-gray-200 dark:border-neutral-600 last:border-none">
                                 <td className="py-2 px-4 truncate">
                                   <span id={`cookie-key-${cookie.key}`}>{cookie.key}</span>
                                   <Tooltip