diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index b060f32d..6ae42959 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -9,9 +9,17 @@ interface BannerProps {
 
 function Banner({ image, alt, title, description }: BannerProps) {
   return (
-    <div className="card w-full max-h-[320px] bg-primary-content flex flex-row px-20 py-10 box-border">
-      <Image src={image} alt={alt} width={454} height={200} priority={false} />
-      <div className="flex flex-col justify-center pl-24 gap-y-3.5">
+    <div className="card w-full max-h-[320px] bg-primary-content flex flex-row justify-between px-20 py-10 box-border gap-x-10 lg:gap-x-20">
+      <div className="h-[200px] w-[276px] relative shrink-0">
+        <Image
+          src={image}
+          alt={alt}
+          fill={true}
+          objectFit="contain"
+          priority={false}
+        />
+      </div>
+      <div className="flex flex-col max-w-[700px] 2xl:max-w-none justify-center gap-y-3.5">
         <h3 className="text-3xl font-bold text-base-300">{title}</h3>
         <p className="text-lg font-medium text-base-300">{description}</p>
       </div>
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 7545f449..3a499787 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -122,7 +122,7 @@ export default function Sidebar() {
     <aside
       className={`overflow-y-auto ${
         isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]"
-      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content`}
+      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content shadow-[4px_4px_4px_0] shadow-neutral-focus/5`}
     >
       <ul
         className={`flex flex-col ${