diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 9886384..99783f7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -228,7 +228,7 @@ const Navbar = () => {
   }, []);
 
   return (
-    <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-[104px] lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-black dark:text-white/70 border-b bg-light-primary dark:bg-dark-primary border-light-100 dark:border-dark-200">
+    <div className="mx-auto max-w-screen-2xl fixed z-40 top-0 left-0 right-0 px-4 lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-black dark:text-white/70 border-b bg-light-primary dark:bg-dark-primary border-light-100 dark:border-dark-200">
       <a
         href="/"
         className="active:scale-95 transition duration-100 cursor-pointer lg:hidden"
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 5829c60..f25925d 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -40,7 +40,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
   return (
     <div>
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
-        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8">
+        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8 mx-2 my-2 rounded-2xl shadow-sm shadow-light-200/10 dark:shadow-black/25">
           <a href="/">
             <SquarePen className="cursor-pointer" />
           </a>