frontend/src/components/AsideMenuLayer.tsx

@@ -32,7 +32,9 @@ export default function AsideMenuLayer({
   };
 
   return (
-<aside id='asideMenu' style={{ borderRadius: 0 }} className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden rounded-none`}>
+    <aside
+      id='asideMenu'
+      className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}
     >
       <div
         className={`flex-1 flex flex-col overflow-hidden dark:bg-dark-900 ${asideStyle}`}

frontend/src/css/main.css

@@ -60,5 +60,3 @@ body {
 .introjs-prevbutton {
   @apply bg-transparent border border-midnightBlueTheme-buttonColor text-midnightBlueTheme-buttonColor !important;
 }
-
-#asideMenu { border-radius: 0 !important; }

frontend/src/pages/login.tsx

@@ -53,14 +53,9 @@ export default function Login() {
   const title = 'My New Project';
 
   // Fetch Pexels image/video
-  // Fetch custom Image/Video
   useEffect(() => {
     async function fetchData() {
-      const image = {
-        src: { original: "https://flatlogic.com/assets/team/team-28e5f07f277765834c38e5fca2f800dda9008aae03886095a80294ccc0bc5dd7.jpg" },
-        photographer: "Flatlogic Team",
-        photographer_url: "https://flatlogic.com"
-      };
+      const image = await getPexelsImage();
       const video = await getPexelsVideo();
       setIllustrationImage(image);
       setIllustrationVideo(video);

frontend/src/styles.ts

@@ -81,7 +81,7 @@ export const white: StyleObject = {
 
 export const midnightBlueTheme: StyleObject = {
   aside:
-    'bg-midnightBlueTheme-800 text-midnightBlueTheme-text dark:text-white rounded-none',
+    'bg-midnightBlueTheme-800 text-midnightBlueTheme-text dark:text-white  lg:rounded-lg',
   asideScrollbars: 'aside-scrollbars-blue',
   asideBrand: 'text-blue-500 bg-white',
   asideMenuItem: