diff --git a/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js
index d45eda5b6..5bd4e4693 100644
--- a/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js
@@ -2,6 +2,26 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   color: ${(props) => props.theme.text};
+  div.input-container {
+    background-color: ${(props) => props.theme.modal.input.bg};
+    height: 2.3rem;
+  }
+  div.input-container {
+    border: solid 1px ${(props) => props.theme.modal.input.border};
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    input {
+      background-color: ${(props) => props.theme.modal.input.bg};
+      outline: none;
+      box-shadow: none;
+
+      &:focus {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/Preferences/Font/index.js b/packages/bruno-app/src/components/Preferences/Font/index.js
index 4694aaf69..4505b5958 100644
--- a/packages/bruno-app/src/components/Preferences/Font/index.js
+++ b/packages/bruno-app/src/components/Preferences/Font/index.js
@@ -25,7 +25,9 @@ const Font = () => {
   return (   
     <StyledWrapper>
       <h2>Font in code area</h2>
-      <input type="text" id="first_name" onChange={handleInputChange} placeholder="Local font" defaultValue={codeFont} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-1.5" />
+      <div className='input-container'>
+        <input type="text" onChange={handleInputChange} placeholder="Local font" defaultValue={codeFont} className="w-full px-3 py-1.5" />
+      </div>
     </StyledWrapper>
   );
 };