diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx
index 13d18a25..24da8134 100644
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -4,7 +4,7 @@
 export default function About() {
   return (
     <div className="mx-5 grid min-h-screen md:mx-36">
-      <article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 pt-14 pb-14 text-jet lg:p-10 xl:p-16">
+      <article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-3xl bg-gray-100 p-6 pt-14 pb-14 text-jet lg:p-10 xl:p-16">
         <div className="flex items-center">
           <p className="mr-2 text-3xl">About DocsGPT</p>
           <p className="text-[21px]">🦖</p>
diff --git a/frontend/src/Modal/index.tsx b/frontend/src/Modal/index.tsx
index bed32181..ff3ed075 100644
--- a/frontend/src/Modal/index.tsx
+++ b/frontend/src/Modal/index.tsx
@@ -17,11 +17,11 @@ const Modal = (props: ModalProps) => {
       } absolute z-30  h-screen w-screen  bg-gray-alpha`}
     >
       {props.render()}
-      <div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-lg bg-white pb-5 pr-5  shadow-lg">
+      <div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-b-lg bg-white pb-5 pr-5  shadow-lg">
         <div>
           <button
             onClick={() => props.handleSubmit()}
-            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
+            className="ml-auto h-10 w-20 rounded-3xl bg-violet-800 text-white transition-all hover:bg-violet-700"
           >
             Save
           </button>
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index b114ee94..c5488a50 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -11,7 +11,6 @@ import Link from './assets/link.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
-import SelectDocsModal from './preferences/SelectDocsModal';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   selectApiKeyStatus,
@@ -30,6 +29,7 @@ import {
 import { useOutsideAlerter } from './hooks';
 import Upload from './upload/Upload';
 import { Doc, getConversations } from './preferences/preferenceApi';
+import SelectDocsModal from './preferences/SelectDocsModal';
 
 export default function Navigation({
   navState,
@@ -180,10 +180,10 @@ export default function Navigation({
           className={({ isActive }) =>
             `${
               isActive && conversationId === null ? 'bg-gray-3000' : ''
-            } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100`
+            } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100`
           }
         >
-          <img src={Message} className="ml-2 w-5"></img>
+          <img src={Message} className="ml-4 w-5"></img>
           <p className="my-auto text-eerie-black">New Chat</p>
         </NavLink>
         <div className="conversations-container max-h-[25rem] overflow-y-auto">
@@ -195,7 +195,7 @@ export default function Navigation({
                     onClick={() => {
                       handleConversationClick(conversation.id);
                     }}
-                    className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-md hover:bg-gray-100 ${
+                    className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
                       conversationId === conversation.id ? 'bg-gray-100' : ''
                     }`}
                   >
@@ -228,7 +228,7 @@ export default function Navigation({
         <div className="flex flex-col-reverse border-b-2">
           <div className="relative my-4 flex gap-2 px-2">
             <div
-              className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white"
+              className="flex h-12 w-full cursor-pointer justify-between rounded-3xl rounded-md border-2 bg-white"
               onClick={() => setIsDocsListOpen(!isDocsListOpen)}
             >
               {selectedDocs && (
@@ -241,7 +241,7 @@ export default function Navigation({
                 alt="arrow"
                 className={`${
                   isDocsListOpen ? 'rotate-0' : 'rotate-180'
-                } mr-3 w-3 transition-all`}
+                } ml-auto mr-3 w-3 transition-all`}
               />
             </div>
             <img
@@ -294,7 +294,7 @@ export default function Navigation({
         </div>
         <div className="flex flex-col gap-2 border-b-2 py-2">
           <div
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
             onClick={() => {
               setApiKeyModalState('ACTIVE');
             }}
@@ -308,7 +308,7 @@ export default function Navigation({
           <NavLink
             to="/about"
             className={({ isActive }) =>
-              `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100 ${
+              `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
                 isActive ? 'bg-gray-3000' : ''
               }`
             }
@@ -321,7 +321,7 @@ export default function Navigation({
             href="https://discord.gg/WHJdfbQDR4"
             target="_blank"
             rel="noreferrer"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Link} alt="link" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">Discord</p>
@@ -331,7 +331,7 @@ export default function Navigation({
             href="https://github.com/arc53/DocsGPT"
             target="_blank"
             rel="noreferrer"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Link} alt="link" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">Github</p>
diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx
index e8f9f224..0adc4881 100644
--- a/frontend/src/preferences/APIKeyModal.tsx
+++ b/frontend/src/preferences/APIKeyModal.tsx
@@ -60,7 +60,7 @@ export default function APIKeyModal({
         return (
           <article
             ref={modalRef}
-            className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg"
+            className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-t-lg bg-white p-6 shadow-lg"
           >
             <p className="text-xl text-jet">OpenAI API Key</p>
             <p className="text-md leading-6 text-gray-500">
diff --git a/frontend/src/preferences/SelectDocsModal.tsx b/frontend/src/preferences/SelectDocsModal.tsx
index c514ab86..c8c8ef7d 100644
--- a/frontend/src/preferences/SelectDocsModal.tsx
+++ b/frontend/src/preferences/SelectDocsModal.tsx
@@ -61,7 +61,7 @@ export default function APIKeyModal({
       isError={isError}
       render={() => {
         return (
-          <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+          <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-t-lg bg-white p-6 shadow-lg">
             <p className="text-xl text-jet">Select Source Documentation</p>
             <p className="text-lg leading-5 text-gray-500">
               Please select the library of documentation that you would like to
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 717568d7..0edc971b 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -55,7 +55,7 @@ export default function Upload({
             setProgress(undefined);
             setModalState('INACTIVE');
           }}
-          className={`rounded-md bg-blue-3000 px-4 py-2 text-sm font-medium text-white ${
+          className={`rounded-3xl bg-blue-3000 px-4 py-2 text-sm font-medium text-white ${
             isCancellable ? '' : 'hidden'
           }`}
         >
@@ -162,7 +162,8 @@ export default function Upload({
       'text/x-rst': ['.rst'],
       'text/x-markdown': ['.md'],
       'application/zip': ['.zip'],
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx']
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        ['.docx'],
     },
   });
 
@@ -188,7 +189,7 @@ export default function Upload({
           <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
         </div>
         <div {...getRootProps()}>
-          <span className="rounded-md border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
+          <span className="rounded-3xl border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
             <input type="button" {...getInputProps()} />
             Choose Files
           </span>
@@ -205,7 +206,7 @@ export default function Upload({
         <div className="flex flex-row-reverse">
           <button
             onClick={uploadFile}
-            className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white"
+            className="ml-6 rounded-3xl bg-blue-3000 py-2 px-6 text-white"
           >
             Train
           </button>