diff --git a/app/JoinUs/JobCard.tsx b/app/JoinUs/JobCard.tsx
index f4a0054..eb6144a 100644
--- a/app/JoinUs/JobCard.tsx
+++ b/app/JoinUs/JobCard.tsx
@@ -17,7 +17,7 @@ export default function JobCard({ id, title, location, skills }: JobCardProps) {
           {skills.map((skill, index) => (
             <span
               key={index}
-              className="m-1 px-3 py-1 bg-blue-100 text-blue-800 text-sm font-semibold rounded-full"
+              className="m-1 px-3 py-1 bg-orange-200 text-orange-800 text-sm font-semibold rounded-full"
             >
               {skill}
             </span>
diff --git a/app/JoinUs/[jobId]/jobContent.tsx b/app/JoinUs/[jobId]/jobContent.tsx
index e11c2fe..bdb3e41 100644
--- a/app/JoinUs/[jobId]/jobContent.tsx
+++ b/app/JoinUs/[jobId]/jobContent.tsx
@@ -45,7 +45,7 @@ export default function JobContent({ jobId }) {
             {job.skills.map((skill, index) => (
               <span
                 key={index}
-                className="px-3 py-1 m-1 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full"
+                className="px-3 py-1 m-1 text-sm font-semibold text-orange-800 bg-orange-100 rounded-full"
               >
                 {skill}
               </span>
@@ -53,7 +53,7 @@ export default function JobContent({ jobId }) {
           </div>
           <button
             onClick={handleApplyClick}
-            className="inline-block mt-4 px-12 py-3 bg-[#6a45d1] font-bold text-white rounded-full hover:bg-[#7554d1] transition duration-300"
+            className="inline-block mt-4 px-12 py-3 bg-[#F97316] font-bold text-white rounded-full hover:bg-[#ec9a60] transition duration-300"
           >
             Apply
           </button>
@@ -111,7 +111,7 @@ export default function JobContent({ jobId }) {
               <a
                 href={`mailto:workwithalgofficial@gmail.com?subject=Application%20For%20${job.title}%20Role`}
                 target="_blank"
-                className="text-[#6a45d1] underline hover:text-[#7554d1] transition duration-300"
+                className="text-[#F97316] underline hover:text-[#ec9a60] transition duration-300"
               >
                 workwithalgofficial@gmail.com
               </a>{" "}
diff --git a/app/about/aboutus.tsx b/app/about/aboutus.tsx
index c1bfff3..4e23722 100644
--- a/app/about/aboutus.tsx
+++ b/app/about/aboutus.tsx
@@ -75,7 +75,7 @@ const AboutPage = () => {
           <div className="flex-1 mb-12 lg:mb-0">
             <div className="flex justify-center items-center h-full">
               <Image
-                src="/alg-logo.png"
+                src="https://github.com/arch-linux-gui/artwork/blob/dev/logo.png?raw=true"
                 alt="Arka Linux GUI Logo"
                 width={400}
                 height={400}
@@ -132,7 +132,7 @@ const AboutPage = () => {
                 <div className="flex flex-col h-full justify-between">
                   <div>
                     <Image
-                      src={member.image || "/alg-logo.png"}
+                      src={member.image || "https://github.com/arch-linux-gui/artwork/blob/dev/logo.png?raw=true"}
                       alt={member.name}
                       width={150}
                       height={150}
diff --git a/app/donate/Donates.tsx b/app/donate/Donates.tsx
index 725829e..5c6050b 100644
--- a/app/donate/Donates.tsx
+++ b/app/donate/Donates.tsx
@@ -52,7 +52,7 @@ export default function EnhancedDonationPage() {
     <div className="container mx-auto px-4 py-32 max-w-4xl">
       <div className="flex items-center justify-center mb-8">
         <Image
-          src="/alg-logo.png"
+          src="https://github.com/arch-linux-gui/artwork/blob/dev/logo.png?raw=true"
           alt="Arka Linux GUI Logo"
           width={100}
           height={100}
diff --git a/app/downloads/Flavours.tsx b/app/downloads/Flavours.tsx
index f0d11c4..44425a0 100644
--- a/app/downloads/Flavours.tsx
+++ b/app/downloads/Flavours.tsx
@@ -96,7 +96,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
 
   const toggleDropdown = () => setDropdownVisible(!dropdownVisible);
 
-  const isoLinks = isThemed ? themedIso[name] : pureIso[name];
+  const isoLinks = !isThemed ? themedIso[name] : pureIso[name];
 
   const contentSection = (
     <div className="flex flex-col justify-center p-3 rounded-lg md:p-6">
@@ -108,6 +108,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
           alt={title}
           width={500}
           height={300}
+          priority={true}
           className="mx-auto rounded-lg"
         />
       </div>
@@ -116,7 +117,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
         <button
           onClick={() => setIsThemed(!isThemed)}
           className={`${
-            !isThemed ? "bg-[#6a45d1]" : "bg-gray-400"
+            !isThemed ? "bg-[#F97316]" : "bg-gray-400"
           } w-14 h-8 rounded-full relative`}
         >
           <span
@@ -130,7 +131,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
       <div className="relative flex justify-center mt-6">
         <button
           onClick={toggleDropdown}
-          className="py-3 px-12 bg-[#6a45d1] text-white opacity-90 hover:opacity-100 rounded-full transition-all"
+          className="py-3 px-12 bg-[#F97316] text-white opacity-90 hover:opacity-100 rounded-full transition-all"
         >
           Download
         </button>
@@ -163,6 +164,7 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
         alt={title}
         width={900}
         height={800}
+        priority={true}
         className="mx-auto rounded-lg"
       />
     </div>
@@ -188,30 +190,33 @@ const DesktopEnvironment: React.FC<DesktopEnvironmentProps> = ({
 export default function Flavours() {
   return (
     <section className="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] pt-4 md:pt-0 px-4 sm:px-12 md:px-20 md:pb-12 lg:px-28">
-      <DesktopEnvironment
-        name="kde"
-        title="KDE Plasma"
-        description="The Plasma Themed Edition (also known as the Flagship) of Arka Linux GUI helps you install Vanilla Arch Linux with the KDE Plasma Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
-        pureImage="/plasma-pure.png"
-        themedImage="/plasma.png"
-        isReversed={false}
-      />
-      <DesktopEnvironment
-        name="gnome"
-        title="GNOME"
-        description="The GNOME Edition of Arka Linux GUI helps you install Vanilla Arch Linux with the GNOME Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
-        pureImage="/gnome-pure.png"
-        themedImage="/gnome.jpg"
-        isReversed={true}
-      />
-      <DesktopEnvironment
-        name="xfce"
-        title="XFCE"
-        description="The XFCE Edition of Arka Linux GUI helps you install Vanilla Arch Linux with the XFCE Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
-        pureImage="/xfce-pure.png"
-        themedImage="/xfce.png"
-        isReversed={false}
-      />
+      {/* Don't know why now its working correctly but when pureImage & themedImage places are changed it works inversely, need to fix! */}
+      <div className="flex flex-col space-y-6">
+        <DesktopEnvironment
+          name="kde"
+          title="KDE Plasma"
+          description="The Plasma Themed Edition (also known as the Flagship) of Arka Linux GUI helps you install Vanilla Arch Linux with the KDE Plasma Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
+          pureImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/plasma.png?raw=true"
+          themedImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/plasma-pure.png?raw=true"
+          isReversed={false}
+        />
+        <DesktopEnvironment
+          name="gnome"
+          title="GNOME"
+          description="The GNOME Edition of Arka Linux GUI helps you install Vanilla Arch Linux with the GNOME Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
+          pureImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/gnome.png?raw=true"
+          themedImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/gnome.png?raw=true"
+          isReversed={true}
+        />
+        <DesktopEnvironment
+          name="xfce"
+          title="XFCE"
+          description="The XFCE Edition of Arka Linux GUI helps you install Vanilla Arch Linux with the XFCE Desktop Environment. It is pre-configured and ready to use. It comes with all the necessary software and settings to help users get started quickly."
+          pureImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/xfce-themed.png?raw=true"
+          themedImage="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/xfce-pure.png?raw=true"
+          isReversed={false}
+        />
+      </div>
     </section>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index 87ff428..4b40eb0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -15,56 +15,106 @@ body {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 0 0% 14.902%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 0 0% 14.902%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
+    --popover-foreground: 0 0% 14.902%;
+    --primary: 37.6923 92.126% 50.1961%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 220 14.2857% 95.8824%;
+    --secondary-foreground: 215 13.7931% 34.1176%;
+    --muted: 210 20% 98.0392%;
+    --muted-foreground: 220 8.9362% 46.0784%;
+    --accent: 48 100% 96.0784%;
+    --accent-foreground: 22.7273 82.5% 31.3725%;
+    --destructive: 0 84.2365% 60.1961%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 220 13.0435% 90.9804%;
+    --input: 220 13.0435% 90.9804%;
+    --ring: 37.6923 92.126% 50.1961%;
+    --chart-1: 37.6923 92.126% 50.1961%;
+    --chart-2: 32.1327 94.6188% 43.7255%;
+    --chart-3: 25.9649 90.4762% 37.0588%;
+    --chart-4: 22.7273 82.5% 31.3725%;
+    --chart-5: 21.7143 77.7778% 26.4706%;
+    --sidebar: 210 20% 98.0392%;
+    --sidebar-foreground: 0 0% 14.902%;
+    --sidebar-primary: 37.6923 92.126% 50.1961%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 48 100% 96.0784%;
+    --sidebar-accent-foreground: 22.7273 82.5% 31.3725%;
+    --sidebar-border: 220 13.0435% 90.9804%;
+    --sidebar-ring: 37.6923 92.126% 50.1961%;
+    --font-sans: Inter, sans-serif;
+    --font-serif: Source Serif 4, serif;
+    --font-mono: JetBrains Mono, monospace;
+    --radius: 0.7rem;
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
   }
+
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --background: 0 0% 9.0196%;
+    --foreground: 0 0% 89.8039%;
+    --card: 0 0% 14.902%;
+    --card-foreground: 0 0% 89.8039%;
+    --popover: 0 0% 14.902%;
+    --popover-foreground: 0 0% 89.8039%;
+    --primary: 37.6923 92.126% 50.1961%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 14.902%;
+    --secondary-foreground: 0 0% 89.8039%;
+    --muted: 0 0% 14.902%;
+    --muted-foreground: 0 0% 63.9216%;
+    --accent: 22.7273 82.5% 31.3725%;
+    --accent-foreground: 48 96.6387% 76.6667%;
+    --destructive: 0 84.2365% 60.1961%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 25.098%;
+    --input: 0 0% 25.098%;
+    --ring: 37.6923 92.126% 50.1961%;
+    --chart-1: 43.2558 96.4126% 56.2745%;
+    --chart-2: 32.1327 94.6188% 43.7255%;
+    --chart-3: 22.7273 82.5% 31.3725%;
+    --chart-4: 25.9649 90.4762% 37.0588%;
+    --chart-5: 22.7273 82.5% 31.3725%;
+    --sidebar: 0 0% 5.8824%;
+    --sidebar-foreground: 0 0% 89.8039%;
+    --sidebar-primary: 37.6923 92.126% 50.1961%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 22.7273 82.5% 31.3725%;
+    --sidebar-accent-foreground: 48 96.6387% 76.6667%;
+    --sidebar-border: 0 0% 25.098%;
+    --sidebar-ring: 37.6923 92.126% 50.1961%;
+    --font-sans: Inter, sans-serif;
+    --font-serif: Source Serif 4, serif;
+    --font-mono: JetBrains Mono, monospace;
+    --radius: 0.7rem;
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.1),
+      0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
   }
 }
 
@@ -132,7 +182,7 @@ body {
 
 .loader {
   border: 8px solid #f3f3f3;
-  border-top: 5px solid #6a45d1;
+  border-top: 5px solid #d09031;
   border-radius: 50%;
   width: 50px;
   height: 50px;
diff --git a/app/layout.tsx b/app/layout.tsx
index 258e58e..ca1675b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,10 +2,7 @@
 import DonationBubble from "@/components/donationBubble";
 import { ScrollProvider } from "@/context/scrollContext";
 import Loader from "@/lib/loader";
-import "@/public/alg-logo.png";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import gsap from "gsap";
-import { ScrollTrigger } from "gsap/all";
 import { ThemeProvider } from "next-themes";
 import { ViewTransitions } from "next-view-transitions";
 import { Poppins } from "next/font/google";
@@ -17,10 +14,9 @@ const poppins = Poppins({
   weight: ["400", "500", "600"],
   display: "swap",
   adjustFontFallback: false,
+  preload: true,
 });
 
-gsap.registerPlugin(ScrollTrigger);
-
 interface RootLayoutProps {
   children: ReactNode;
 }
@@ -35,9 +31,44 @@ export default function RootLayout({ children }: RootLayoutProps) {
     window.addEventListener("beforeunload", handleStart);
     window.addEventListener("load", handleComplete);
 
+    // Preload critical resources
+    const preloadCriticalResources = () => {
+      // Preload critical images
+      const criticalImages = [
+        "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/ss-with-apps/theme/plasma/terminal.png",
+      ];
+
+      criticalImages.forEach((src) => {
+        const link = document.createElement("link");
+        link.rel = "preload";
+        link.as = "image";
+        link.href = src;
+        document.head.appendChild(link);
+      });
+    };
+
+    // Prefetch non-critical resources
+    const prefetchNonCriticalResources = () => {
+      const nonCriticalResources = ["/downloads", "/about", "/tutorials"];
+
+      nonCriticalResources.forEach((href) => {
+        const link = document.createElement("link");
+        link.rel = "prefetch";
+        link.href = href;
+        document.head.appendChild(link);
+      });
+    };
+
+    // Execute optimizations after a delay to not block initial render
+    const timer = setTimeout(() => {
+      preloadCriticalResources();
+      prefetchNonCriticalResources();
+    }, 1000);
+
     return () => {
       window.removeEventListener("beforeunload", handleStart);
       window.removeEventListener("load", handleComplete);
+      clearTimeout(timer);
     };
   }, []);
 
@@ -62,7 +93,24 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <meta name="twitter:description" content="Arka Linux GUI" />
           <meta
             name="twitter:image"
-            content="https://ogcdn.net/2c2c6737-47d4-4459-9969-e711eb48394c/v1/arkalinuxgui.org/Arka%20Linux%20GUI/Arka%20Linux%20GUI%20(formerly%20Arch%20Linux%20GUI)%2C%20is%20a%20fast%2C%20offline%2C%20graphical%20installer%20for%20Arch%20Linux./https%3A%2F%2Fopengraph.b-cdn.net%2Fproduction%2Fimages%2F4ec37f9d-1c03-4b40-96fe-d6ccf8a14667.png%3Ftoken%3DTCHWDYus5O15KyLn5Om9XlrKzLZHWcHNp8zv2pS-9Jg%26height%3D552%26width%3D1200%26expires%3D33266952728/og.png"
+            content="https://ogcdn.net/2c2c6737-47d4-4459-9969-e711eb48394c/v1/arkalinuxgui.org/Arka%20Linux%20GUI/Arka%20Linux%20GUI%20(formerly%20Arch%20Linux%20GUI)%2C%20is%20a%20fast%2C%20offline%2C%20graphical%20installer%20for%20Arch%20Linux./https%3A%2F%2Fopengraph.b-cdn.net%2Fproduction%20installer%20for%20Arch%20Linux./https%3A%2F%2Fopengraph.b-cdn.net%2Fproduction%2Fimages%2F4ec37f9d-1c03-4b40-96fe-d6ccf8a14667.png%3Ftoken%3DTCHWDYus5O15KyLn5Om9XlrKzLZHWcHNp8zv2pS-9Jg%26height%3D552%26width%3D1200%26expires%3D33266952728/og.png"
+          />
+
+          {/* Performance optimizations */}
+          <link rel="dns-prefetch" href="//github.com" />
+          <link rel="dns-prefetch" href="//raw.githubusercontent.com" />
+          <link rel="dns-prefetch" href="//www.youtube.com" />
+
+          {/* Preconnect to external domains */}
+          <link rel="preconnect" href="https://github.com" />
+          <link rel="preconnect" href="https://raw.githubusercontent.com" />
+          <link rel="preconnect" href="https://www.youtube.com" />
+
+          {/* Preload critical fonts */}
+          <link
+            rel="preload"
+            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
+            as="style"
           />
         </head>
         <body className={poppins.className}>
diff --git a/app/tutorials/TutorialPage.tsx b/app/tutorials/TutorialPage.tsx
index 57ce28c..84fed90 100644
--- a/app/tutorials/TutorialPage.tsx
+++ b/app/tutorials/TutorialPage.tsx
@@ -1,5 +1,5 @@
 "use client";
-import HandleYT from "@/lib/HandleYT";
+import { LazyVideo } from "@/components/ui/lazy-video";
 import Loader from "@/lib/loader";
 import { Suspense } from "react";
 const install = [
@@ -123,7 +123,7 @@ const TutorialPage = () => {
           </div>
           <div className="md:w-1/2">
             <Suspense fallback={<Loader />}>
-              <HandleYT videoId={video.url} />
+              <LazyVideo videoId={video.url} width="100%" height="450px" />
             </Suspense>
           </div>
         </div>
@@ -152,11 +152,12 @@ const TutorialPage = () => {
           </div>
           <div className="md:w-1/2">
             <Suspense fallback={<Loader />}>
-              <HandleYT videoId={video.url} />
+              <LazyVideo videoId={video.url} width="100%" height="450px" />
             </Suspense>
           </div>
         </div>
       ))}
+
       <h1 className="mt-4 mb-4 text-3xl font-bold text-center md:text-5xl md:mb-10">
         Arch Linux Specific videos
       </h1>
@@ -179,11 +180,12 @@ const TutorialPage = () => {
           </div>
           <div className="md:w-1/2">
             <Suspense fallback={<Loader />}>
-              <HandleYT videoId={video.url} />
+              <LazyVideo videoId={video.url} width="100%" height="450px" />
             </Suspense>
           </div>
         </div>
       ))}
+
       <h1 className="mt-4 mb-4 text-3xl font-bold text-center md:text-5xl md:mb-10">
         Miscellaneous Topics
       </h1>
@@ -207,7 +209,7 @@ const TutorialPage = () => {
           </div>
           <div className="md:w-1/2">
             <Suspense fallback={<Loader />}>
-              <HandleYT videoId={video.url} />
+              <LazyVideo videoId={video.url} width="100%" height="450px" />
             </Suspense>
           </div>
         </div>
diff --git a/components/Hero.tsx b/components/Hero.tsx
index a44f949..7f71aca 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -3,24 +3,14 @@
 import { TextEffect } from "@/components/ui/text-effect";
 import { useScroll } from "@/context/scrollContext";
 import { AnimatePresence, motion } from "framer-motion";
-import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useTheme } from "next-themes";
+import Image from "next/image";
 import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
-
-gsap.registerPlugin(ScrollTrigger);
-
-const assetsToPreload = ["/arch-linux-gui.png"];
+import { useRef } from "react";
 
 export default function HeroSection() {
   const { resolvedTheme } = useTheme();
   const sectionRef = useRef(null);
-  const headingRef = useRef(null);
-  const descriptionRef = useRef(null);
-  const buttonsRef = useRef(null);
-  const imageRef = useRef(null);
-  const [assetsLoaded, setAssetsLoaded] = useState(false);
   const { whatsNewRef } = useScroll();
 
   const handleKnowMoreClick = () => {
@@ -28,109 +18,28 @@ export default function HeroSection() {
       whatsNewRef.current.scrollIntoView({ behavior: "smooth" });
     }
   };
-  useEffect(() => {
-    const preloadAsset = (src: any) => {
-      return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.src = src;
-        img.onload = resolve;
-        img.onerror = reject;
-      });
-    };
-
-    const preloadAllAssets = async () => {
-      try {
-        await Promise.all(assetsToPreload.map(preloadAsset));
-        setAssetsLoaded(true);
-      } catch (error) {
-        console.error("Failed to load all assets:", error);
-        // Optionally set assetsLoaded to true even if some assets fail to load
-        setAssetsLoaded(true);
-      }
-    };
-
-    preloadAllAssets();
-  }, []);
-
-  useEffect(() => {
-    if (assetsLoaded) {
-      const ctx = gsap.context(() => {
-        gsap.from(headingRef.current, {
-          opacity: 0,
-          y: 50,
-          duration: 1,
-          delay: 0.2,
-        });
-
-        gsap.from(descriptionRef.current, {
-          opacity: 0,
-          y: 30,
-          duration: 1,
-          delay: 0.5,
-        });
-
-        gsap.from(buttonsRef.current, {
-          opacity: 0,
-          y: 20,
-          duration: 1,
-          delay: 0.8,
-        });
-
-        gsap.from(imageRef.current, {
-          opacity: 0,
-          scale: 0.8,
-          duration: 1,
-          delay: 1,
-        });
-      }, sectionRef);
-
-      return () => ctx.revert();
-    }
-  }, [assetsLoaded]);
 
   const isDarkTheme = resolvedTheme === "dark";
 
-  const getRandomOrangeColor = () => {
-    const orangeShades = [
-      "#F97316", // orange-500
-      "#EA580C", // orange-600
-      "#C2410C", // orange-700
-      "#FB923C", // dark:orange-400
-      "#FDBA74", // dark:orange-300
-    ];
-
-    const randomIndex = Math.floor(Math.random() * orangeShades.length);
-    return orangeShades[randomIndex];
-  };
-
   const fancyVariants = {
     container: {
       hidden: { opacity: 0 },
       visible: {
         opacity: 1,
         transition: {
-          staggerChildren: 0.05,
+          staggerChildren: 0.1,
+          duration: 0.5,
         },
       },
     },
     item: {
-      hidden: () => ({
-        opacity: 0,
-        y: Math.random() * 100 - 50,
-        rotate: Math.random() * 90 - 45,
-        scale: 0.3,
-        color: getRandomOrangeColor(),
-      }),
+      hidden: { opacity: 0, y: 20 },
       visible: {
         opacity: 1,
         y: 0,
-        rotate: 0,
-        scale: 1,
-        color: getRandomOrangeColor(),
         transition: {
-          type: "spring",
-          damping: 12,
-          stiffness: 200,
+          duration: 0.5,
+          ease: "easeOut",
         },
       },
     },
@@ -138,93 +47,98 @@ export default function HeroSection() {
 
   return (
     <AnimatePresence>
-      {assetsLoaded ? (
-        <motion.section
-          ref={sectionRef}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] pb-5"
-        >
-          <div className="absolute inset-0 z-0">
-            <svg
-              className="absolute inset-0 w-full h-full"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M0,0 L100,0 L100,100 L0,100 Z"
-                fill="none"
-                stroke={
-                  isDarkTheme ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
-                }
-                strokeWidth="0.5"
-              />
-            </svg>
-          </div>
+      <motion.section
+        ref={sectionRef}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.3 }}
+        className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-orange-50 to-orange-100 dark:from-[#0b0b10] dark:to-[#09090B] pb-5"
+      >
+        <div className="absolute inset-0 z-0">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0,0 L100,0 L100,100 L0,100 Z"
+              fill="none"
+              stroke={
+                isDarkTheme ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"
+              }
+              strokeWidth="0.5"
+            />
+          </svg>
+        </div>
 
-          <div className="container mx-auto px-4 z-10">
-            <div className="flex flex-col items-center justify-between pt-[8rem]">
-              <div className="w-full text-center mb-8 lg:mb-0 lg:w-3/4">
-                <div ref={headingRef}>
-                  <TextEffect
-                    per="word"
-                    variants={fancyVariants}
-                    className="text-4xl lg:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-400 dark:to-orange-300"
-                  >
-                    Welcome to Arka Linux GUI
-                  </TextEffect>
-                </div>
-                <div ref={descriptionRef}>
-                  <TextEffect
-                    per="word"
-                    as="h3"
-                    preset="blur"
-                    delay={1.0}
-                    className="mb-4"
-                  >
-                    Seamless. Intuitive. Powerful. Discover a new era of Linux
-                    desktop environments with Arka Linux GUI.
-                  </TextEffect>
-                </div>
-                <div
-                  ref={buttonsRef}
-                  className="flex flex-row justify-center space-y-0 space-x-4 mb-7"
+        <div className="container mx-auto px-4 z-10">
+          <motion.div
+            className="flex flex-col items-center justify-between pt-[8rem]"
+            variants={fancyVariants}
+            initial="hidden"
+            animate="visible"
+          >
+            <motion.div
+              className="w-full text-center mb-8 lg:mb-0 lg:w-3/4"
+              variants={fancyVariants.item}
+            >
+              <TextEffect
+                per="word"
+                variants={fancyVariants}
+                className="text-4xl lg:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-400 dark:to-orange-300"
+              >
+                Welcome to Arka Linux GUI
+              </TextEffect>
+
+              <TextEffect
+                per="word"
+                as="h3"
+                preset="blur"
+                delay={0.5}
+                className="mb-4"
+              >
+                Seamless. Intuitive. Powerful. Discover a new era of Linux
+                desktop environments with Arka Linux GUI.
+              </TextEffect>
+
+              <motion.div
+                className="flex flex-row justify-center space-y-0 space-x-4 mb-7"
+                variants={fancyVariants.item}
+              >
+                <button
+                  className="w-48 sm:mx-0 px-6 py-3 bg-orange-500 text-white rounded-full font-semibold text-lg shadow-lg hover:bg-orange-600 transition-all duration-300 ease-in-out transform hover:-translate-y-1 dark:bg-orange-600 dark:hover:bg-orange-500"
+                  onClick={handleKnowMoreClick}
                 >
-                  <button
-                    className="w-48 sm:mx-0 px-6 py-3 bg-orange-500 text-white rounded-full font-semibold text-lg shadow-lg hover:bg-orange-600 transition-all duration-300 ease-in-out transform hover:-translate-y-1 dark:bg-orange-600 dark:hover:bg-orange-500"
-                    onClick={handleKnowMoreClick}
-                  >
-                    Know More
-                  </button>
-                  <button className="w-48 mx-auto sm:mx-0 px-6 py-3 bg-white text-orange-500 rounded-full font-semibold text-lg shadow-lg hover:bg-gray-100 transition-all duration-300 ease-in-out transform hover:-translate-y-1 dark:bg-gray-800 dark:text-orange-400 dark:hover:bg-gray-700">
-                    <Link href="/downloads">Download</Link>
-                  </button>
-                </div>
-              </div>
-
-              <div ref={imageRef} className="w-full mt-8 lg:mt-0">
-                <div className="relative w-full aspect-video max-w-7xl mx-auto">
-                  <div className="absolute inset-0 bg-gradient-to-r from-orange-300/20 to-orange-500/20 dark:from-orange-400/10 dark:to-orange-600/10 rounded-lg shadow-2xl">
-                    <div className="absolute inset-2 bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
-                      <img
-                        src="/arch-linux-gui.png"
-                        alt="Arka Linux GUI Desktop"
-                        className="w-full h-full object-cover"
-                      />
-                    </div>
+                  Know More
+                </button>
+                <button className="w-48 mx-auto sm:mx-0 px-6 py-3 bg-white text-orange-500 rounded-full font-semibold text-lg shadow-lg hover:bg-gray-100 transition-all duration-300 ease-in-out transform hover:-translate-y-1 dark:bg-gray-800 dark:text-orange-400 dark:hover:bg-gray-700">
+                  <Link href="/downloads">Download</Link>
+                </button>
+              </motion.div>
+            </motion.div>
+
+            <motion.div
+              className="w-full mt-8 lg:mt-0"
+              variants={fancyVariants.item}
+            >
+              <div className="relative w-full aspect-video max-w-7xl mx-auto">
+                <div className="absolute inset-0 bg-gradient-to-r from-orange-300/20 to-orange-500/20 dark:from-orange-400/10 dark:to-orange-600/10 rounded-lg shadow-2xl">
+                  <div className="absolute inset-2 bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
+                    <Image
+                      src="https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/ss-with-apps/theme/plasma/terminal.png?raw=true"
+                      alt="Arka Linux GUI Desktop"
+                      fill
+                      priority={true}
+                      className="object-cover"
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw"
+                    />
                   </div>
                 </div>
               </div>
-            </div>
-          </div>
-        </motion.section>
-      ) : (
-        <div className="flex items-center justify-center min-h-screen bg-orange-50 dark:bg-[#0b0b10]">
-          <div className="text-2xl font-bold text-orange-500 dark:text-orange-400">
-            Loading...
-          </div>
+            </motion.div>
+          </motion.div>
         </div>
-      )}
+      </motion.section>
     </AnimatePresence>
   );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 8728efe..254c23b 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -100,7 +100,7 @@ export default function CenteredDockToStickyNavbar() {
               className="text-xl font-bold pr-5 text-gray-900 dark:text-white"
             >
               <Image
-                src="/alg-logo.png"
+                src="https://github.com/arch-linux-gui/artwork/blob/dev/logo.png?raw=true"
                 width={45}
                 height={45}
                 alt="ALG Logo"
diff --git a/components/Testi.tsx b/components/Testi.tsx
index 0229ea8..6ba19a7 100644
--- a/components/Testi.tsx
+++ b/components/Testi.tsx
@@ -1,5 +1,5 @@
 "use client";
-import HandleYT from "@/lib/HandleYT";
+import { LazyVideo } from "@/components/ui/lazy-video";
 import Loader from "@/lib/loader";
 import { Suspense, useEffect, useState } from "react";
 import {
@@ -67,7 +67,11 @@ export default function VideoCarousel() {
                         <div key={index} className="flex-1 h-full">
                           <div className="w-full h-full rounded-xl overflow-hidden bg-background">
                             <Suspense fallback={<Loader />}>
-                              <HandleYT videoId={videoId} />
+                              <LazyVideo
+                                videoId={videoId}
+                                width="100%"
+                                height="100%"
+                              />
                             </Suspense>
                           </div>
                         </div>
@@ -80,13 +84,15 @@ export default function VideoCarousel() {
                 <CarouselPrevious className="w-10 h-10 border border-gray-700 dark:border-gray-300 rounded-full flex items-center justify-center" />
                 <CarouselNext className="w-10 h-10 border border-gray-700 dark:border-gray-300 rounded-full flex items-center justify-center" />
               </div>
-              <div className="mt-2">
-                <CarouselThumbsContainer className="gap-x-2">
-                  {videoGroups.map((_, index) => (
-                    <CarouselIndicator key={index} index={index} />
-                  ))}
-                </CarouselThumbsContainer>
-              </div>
+              <CarouselThumbsContainer className="flex gap-2 mt-4">
+                {videoGroups.map((_, index) => (
+                  <CarouselIndicator
+                    key={index}
+                    index={index}
+                    className="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"
+                  />
+                ))}
+              </CarouselThumbsContainer>
             </div>
           </Carousel>
         </div>
diff --git a/components/WhatsNew.tsx b/components/WhatsNew.tsx
index f2b020d..a5be092 100644
--- a/components/WhatsNew.tsx
+++ b/components/WhatsNew.tsx
@@ -14,40 +14,40 @@ export default function WhatIsALGSection() {
       description:
         "Install your system entirely without an internet connection.",
       link: "#",
-      image: "/gnome.jpg",
+      image: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/ss-with-apps/theme/plasma/installer.png?raw=true",
     },
     {
       title: "Minimalist & Clean System",
       description: "Experience a bare-minimum, efficient Linux environment.",
       link: "#",
-      image: "/gnome.jpg",
+      image: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/plasma-pure.png?raw=true",
     },
     {
       title: "Custom Themed Environments",
       description:
         "Enjoy a beautifully themed interface without unnecessary extras.",
       link: "#",
-      image: "/gnome.jpg",
+      image: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/xfce-themed.png?raw=true",
     },
     {
       title: "Intuitive Welcome Application",
       description: "Get started quickly with our user-friendly welcome app.",
       link: "#",
-      image: "/welcome.png",
+      image: "https://github.com/arch-linux-gui/artwork/blob/dev/other/welcome.png?raw=true",
     },
     {
       title: "GUI-Based Package Manager (Beta)",
       description:
         "Manage your software effortlessly with our beta GUI package manager.",
       link: "#",
-      image: "/gnome.jpg",
+      image: "https://github.com/arch-linux-gui/artwork/blob/dev/other/app-store.png?raw=true",
     },
     {
       title: "Community-Driven Development",
       description:
         "Built and continuously improved by our passionate community.",
       link: "#",
-      image: "/gnome.jpg",
+      image: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/gnome.png?raw=true",
     },
   ];
 
diff --git a/components/gallery.tsx b/components/gallery.tsx
index 28881c8..eacc5ca 100644
--- a/components/gallery.tsx
+++ b/components/gallery.tsx
@@ -2,12 +2,24 @@ import { DialogBasicImage } from "./ui/imageviewer";
 import Marquee from "./ui/marquee";
 
 const images = [
-  { img: "/gnome-pure.png" },
-  { img: "/gnome.jpg" },
-  { img: "/xfce.png" },
-  { img: "/xfce-pure.png" },
-  { img: "/plasma.png" },
-  { img: "/plasma-pure.png" },
+  {
+    img: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/gnome.png?raw=true",
+  },
+  {
+    img: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/gnome.png?raw=true",
+  },
+  {
+    img: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/xfce-themed.png?raw=true",
+  },
+  {
+    img: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/xfce-pure.png?raw=true",
+  },
+  {
+    img: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/themed/plasma.png?raw=true",
+  },
+  {
+    img: "https://github.com/arch-linux-gui/artwork/blob/dev/desktop-screenshots/desktop-ss/pure/plasma-pure.png?raw=true",
+  },
 ];
 
 const firstRow = images.slice(0, images.length / 2);
diff --git a/components/ui/card-hover-effect.tsx b/components/ui/card-hover-effect.tsx
index 1ca7997..8e3340f 100644
--- a/components/ui/card-hover-effect.tsx
+++ b/components/ui/card-hover-effect.tsx
@@ -34,7 +34,7 @@ export const HoverEffect = ({
           <AnimatePresence>
             {hoveredIndex === idx && (
               <motion.span
-                className="absolute inset-0 h-full w-full bg-orange-200 dark:bg-orange-900/[0.9] block  rounded-3xl"
+                className="absolute inset-0 h-full w-full bg-orange-200 dark:bg-orange-900/[0.9] block rounded-3xl"
                 layoutId="hoverBackground"
                 initial={{ opacity: 0 }}
                 animate={{
@@ -48,7 +48,7 @@ export const HoverEffect = ({
               />
             )}
           </AnimatePresence>
-          <Card>
+          <Card className="border-black">
             <Image
               src={item.image}
               alt={item.title}
diff --git a/components/ui/lazy-video.tsx b/components/ui/lazy-video.tsx
new file mode 100644
index 0000000..414bfd5
--- /dev/null
+++ b/components/ui/lazy-video.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+interface LazyVideoProps {
+  videoId: string;
+  className?: string;
+  width?: string;
+  height?: string;
+}
+
+export function LazyVideo({
+  videoId,
+  className = "",
+  width = "100%",
+  height = "350px",
+}: LazyVideoProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isInView, setIsInView] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  const handleLoad = () => {
+    setIsLoaded(true);
+  };
+
+  if (!isInView) {
+    return (
+      <div
+        ref={ref}
+        className={`${className} bg-gray-200 dark:bg-gray-800 animate-pulse rounded-lg flex items-center justify-center`}
+        style={{ width, height }}
+      >
+        <div className="text-gray-500 text-sm">Loading video...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} style={{ width, height }}>
+      <iframe
+        src={`https://www.youtube.com/embed/${videoId}?autoplay=0&controls=1&showinfo=0&modestbranding=1&rel=0&fs=1&iv_load_policy=3&autohide=1&theme=dark&color=white&loading=lazy`}
+        frameBorder="0"
+        allowFullScreen
+        title="Video Player"
+        className="w-full h-full rounded-lg "
+        onLoad={handleLoad}
+        loading="lazy"
+      />
+    </div>
+  );
+}
diff --git a/lib/HandleYT.js b/lib/HandleYT.js
index fac4c91..e3b0b88 100644
--- a/lib/HandleYT.js
+++ b/lib/HandleYT.js
@@ -9,7 +9,7 @@ const HandleYT = ({ videoId }) => {
       setLoading(true);
       try {
         const response = await fetch(
-          `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`,
+          `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`
         );
         if (response.ok) {
           setVideoExists(true);
@@ -29,7 +29,7 @@ const HandleYT = ({ videoId }) => {
   return (
     <div>
       {loading ? (
-        <div className="flex items-center justify-center w-full h-[300px] md:h-[500px] rounded-2xl bg-white bg-opacity-0">
+        <div className="flex items-center justify-center border w-full h-[300px] md:h-[500px] rounded-2xl bg-opacity-0">
           <div className="loader"></div>
         </div>
       ) : videoExists ? (
@@ -38,7 +38,7 @@ const HandleYT = ({ videoId }) => {
           frameBorder="0"
           allowFullScreen
           title="Video Player"
-          className="w-full h-[300px] md:h-[500px] rounded-2xl"
+          className="w-full h-[300px] md:h-[500px] rounded-2xl border"
           onLoad={() => setLoading(false)}
         />
       ) : (
diff --git a/next.config.mjs b/next.config.mjs
index aba3549..cd2d298 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,7 +2,10 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    unoptimized: true,
+    unoptimized: false,
+    formats: ["image/webp", "image/avif"],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
     remotePatterns: [
       {
         protocol: "https",
@@ -12,6 +15,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "raw.githubusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "github.com",
+      },
     ],
   },
   experimental: {
diff --git a/package-lock.json b/package-lock.json
index 61b3153..3547788 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "testweb",
+  "name": "alg-web",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "testweb",
+      "name": "alg-web",
       "version": "0.1.0",
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.2",
diff --git a/public/alg-logo.png b/public/alg-logo.png
deleted file mode 100644
index d59b7c0..0000000
Binary files a/public/alg-logo.png and /dev/null differ
diff --git a/public/arch-linux-gui.png b/public/arch-linux-gui.png
deleted file mode 100644
index 909a9b9..0000000
Binary files a/public/arch-linux-gui.png and /dev/null differ
diff --git a/public/background.png b/public/background.png
deleted file mode 100644
index 06679dd..0000000
Binary files a/public/background.png and /dev/null differ
diff --git a/public/gnome-pure.png b/public/gnome-pure.png
deleted file mode 100644
index 12be67c..0000000
Binary files a/public/gnome-pure.png and /dev/null differ
diff --git a/public/gnome.jpg b/public/gnome.jpg
deleted file mode 100644
index c94643a..0000000
Binary files a/public/gnome.jpg and /dev/null differ
diff --git a/public/plasma-pure.png b/public/plasma-pure.png
deleted file mode 100644
index d130ea0..0000000
Binary files a/public/plasma-pure.png and /dev/null differ
diff --git a/public/plasma.png b/public/plasma.png
deleted file mode 100644
index 6a72b63..0000000
Binary files a/public/plasma.png and /dev/null differ
diff --git a/public/welcome.png b/public/welcome.png
deleted file mode 100644
index c43562c..0000000
Binary files a/public/welcome.png and /dev/null differ
diff --git a/public/xfce-pure.png b/public/xfce-pure.png
deleted file mode 100644
index d633686..0000000
Binary files a/public/xfce-pure.png and /dev/null differ
diff --git a/public/xfce.png b/public/xfce.png
deleted file mode 100644
index f3ee65c..0000000
Binary files a/public/xfce.png and /dev/null differ