diff --git a/public/FOSS.png b/public/FOSS.png
deleted file mode 100644
index 03c08dc..0000000
Binary files a/public/FOSS.png and /dev/null differ
diff --git a/public/FOSS.webp b/public/FOSS.webp
new file mode 100644
index 0000000..144f580
Binary files /dev/null and b/public/FOSS.webp differ
diff --git a/public/bg-blur.webp b/public/bg-blur.webp
new file mode 100644
index 0000000..6d74dd3
Binary files /dev/null and b/public/bg-blur.webp differ
diff --git a/src/app/(pages)/about/GetInTouch.tsx b/src/app/(pages)/about/GetInTouch.tsx
index 6c25fe2..090eb2e 100644
--- a/src/app/(pages)/about/GetInTouch.tsx
+++ b/src/app/(pages)/about/GetInTouch.tsx
@@ -9,7 +9,7 @@ import {
   Textarea,
   TextInput,
 } from "@mantine/core";
-import bg from "@/images/FOSS.png";
+import bg from "@/images/FOSS.webp";
 import classes from "./GetInTouch.module.css";
 
 export function GetInTouch() {
diff --git a/src/app/(pages)/blog/ArticleGroup.tsx b/src/app/(pages)/blog/ArticleGroup.tsx
index 7be251f..a523b6c 100644
--- a/src/app/(pages)/blog/ArticleGroup.tsx
+++ b/src/app/(pages)/blog/ArticleGroup.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import React from "react";
-import { Group, Card, Badge, Text } from "@mantine/core";
+import { Group, Card, Badge, Text, Spoiler } from "@mantine/core";
 import { ArticleGroupProps } from "@/data/ArticleGroup";
 import classes from "./ArticleGroup.module.css";
 
@@ -58,6 +58,7 @@ export function ArticleGroup({
   article,
   author,
   type,
+  discription,
   profile,
   published,
   url,
@@ -77,10 +78,11 @@ export function ArticleGroup({
         <Text mih={60} fz="lg" fw={500} mt="md">
           {article}
         </Text>
-        {/* <Text fz="sm" c="dimmed" mt={5}>
-          Form context management, Switch, Grid and Indicator components
-          improvements, new hook and 10+ other changes
-        </Text> */}
+        <Spoiler maxHeight={50} hideLabel="less" showLabel="">
+          <Text fz="sm" c="dimmed" mt={5}>
+            {discription}
+          </Text>
+        </Spoiler>
 
         <Group justify="left" mt="md">
           <Image
diff --git a/src/app/(pages)/blog/page.tsx b/src/app/(pages)/blog/page.tsx
index a8a139b..ab0db45 100644
--- a/src/app/(pages)/blog/page.tsx
+++ b/src/app/(pages)/blog/page.tsx
@@ -35,6 +35,7 @@ export default function Home() {
                   article={article.article}
                   author={article.author}
                   type={article.type}
+                  discription={article.discription}
                   profile={article.profile}
                   published={article.published}
                   url={article.url}
diff --git a/src/app/(pages)/home/ArticlesHome.module.css b/src/app/(pages)/home/ArticlesHome.module.css
index 5b97954..2012886 100644
--- a/src/app/(pages)/home/ArticlesHome.module.css
+++ b/src/app/(pages)/home/ArticlesHome.module.css
@@ -70,7 +70,20 @@
     grid-template-columns: repeat(2, 1fr);
   }
 }
+.link {
+  text-decoration: none;
+}
 .btn {
   display: flex;
   justify-content: center;
+  font-size: 16px;
+  height: 44px;
+  padding-left: 44px;
+  padding-right: 44px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    height: 44px;
+    padding-left: 44px;
+    padding-right: 44px;
+  }
 }
diff --git a/src/app/(pages)/home/ArticlesHome.tsx b/src/app/(pages)/home/ArticlesHome.tsx
index bc0b8c0..f588451 100644
--- a/src/app/(pages)/home/ArticlesHome.tsx
+++ b/src/app/(pages)/home/ArticlesHome.tsx
@@ -36,6 +36,7 @@ export default function ArticlesHome() {
                     id={article.id}
                     article={article.article}
                     type={article.type}
+                    discription={article.discription}
                     author={article.author}
                     profile={article.profile}
                     published={article.published}
@@ -45,13 +46,13 @@ export default function ArticlesHome() {
               ))}
             </div>
           </section>
-          {/* <div className={classes.btn}>
-            <Link href="/blog">
-              <Button radius="xl" component="a" size="lg" variant="default">
+          <div className={classes.btn}>
+            <Link href="/blog" className={classes.link}>
+              <Button radius="xl" variant="default">
                 Read More
               </Button>
             </Link>
-          </div> */}
+          </div>
         </Stack>
       </Container>
     </div>
diff --git a/src/app/(pages)/home/FaqWithImage.tsx b/src/app/(pages)/home/FaqWithImage.tsx
index f046e6d..61dda93 100644
--- a/src/app/(pages)/home/FaqWithImage.tsx
+++ b/src/app/(pages)/home/FaqWithImage.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { Accordion, Container, Grid, Image, Title } from "@mantine/core";
-import image from "@/images/home/FOSStext.png";
+import image from "@/images/home/FOSStext.webp";
 import classes from "./FaqWithImage.module.css";
 import GradientBack from "@/components/Gradient/GradientBack";
 import { data } from "@/data/Q&A";
diff --git a/src/app/(pages)/home/section1.module.css b/src/app/(pages)/home/section1.module.css
index fd39528..902dc30 100644
--- a/src/app/(pages)/home/section1.module.css
+++ b/src/app/(pages)/home/section1.module.css
@@ -62,14 +62,17 @@
 }
 
 .control {
-  height: 54px;
+  display: flex;
+  justify-content: center;
+  font-size: 16px;
+  height: 44px;
   padding-left: 38px;
   padding-right: 38px;
+  min-width: calc(97px + 76px);
 
   @media (max-width: $mantine-breakpoint-sm) {
-    height: 54px;
-    padding-left: 18px;
-    padding-right: 18px;
-    flex: 1;
+    height: 44px;
+    padding-left: 38px;
+    padding-right: 38px;
   }
 }
diff --git a/src/app/(pages)/home/section1.tsx b/src/app/(pages)/home/section1.tsx
index 3478b52..55f9590 100644
--- a/src/app/(pages)/home/section1.tsx
+++ b/src/app/(pages)/home/section1.tsx
@@ -42,19 +42,19 @@ export default function Section1() {
           <Group className={classes.controls}>
             <Button
               radius="xl"
-              size="xl"
+              component="a"
+              href="#"
               className={classes.control}
               variant="gradient"
               gradient={{ from: "violet", to: "grape" }}
             >
-              Join
+              Join Now
             </Button>
 
             <Button
               radius="xl"
               component="a"
-              href="https://github.com/mantinedev/mantine"
-              size="xl"
+              href="https://github.com/fossuok/"
               variant="default"
               className={classes.control}
               leftSection={<IconBrandGithubFilled size={18} stroke={1.5} />}
diff --git a/src/app/(pages)/home/section2.tsx b/src/app/(pages)/home/section2.tsx
index 27371ba..e8d729e 100644
--- a/src/app/(pages)/home/section2.tsx
+++ b/src/app/(pages)/home/section2.tsx
@@ -9,11 +9,12 @@ import {
   BackgroundImage,
 } from "@mantine/core";
 import classes from "./section2.module.css";
-import img1 from "@/images/home/uok.png";
-import img2 from "@/images/home/fosslk_logo.png";
-import codeImg from "@/images/home/github.jpg";
-import learn from "@/images/home/learn.jpg";
-import share from "@/images/home/share.jpg";
+import img1 from "@/images/home/uok.webp";
+import img2 from "@/images/home/fosslk_logo.webp";
+import codeImg from "@/images/home/github.webp";
+import learn from "@/images/home/learn.webp";
+import share from "@/images/home/share.webp";
+import lead from "@/images/home/lead.webp";
 
 export default function Section2() {
   return (
@@ -96,7 +97,7 @@ export default function Section2() {
           <Grid.Col span={6} style={{ cursor: "pointer" }}>
             <BackgroundImage
               className={classes.background}
-              src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-6.png"
+              src={lead.src}
               radius="sm"
             >
               <Text className={classes.word} mih={120} c="white">
diff --git a/src/app/(pages)/leaderboard/page.tsx b/src/app/(pages)/leaderboard/page.tsx
index 948b278..5a70f85 100644
--- a/src/app/(pages)/leaderboard/page.tsx
+++ b/src/app/(pages)/leaderboard/page.tsx
@@ -152,6 +152,7 @@ const LeaderBoard: React.FC = () => {
             onChange={(value) => setSelectedRepo(value || "overall")}
             placeholder="Select a repository"
             mb="lg"
+            radius="lg"
             disabled={loadingRepos}
           />
 
diff --git a/src/app/(pages)/template.tsx b/src/app/(pages)/template.tsx
index 209d390..79ff977 100644
--- a/src/app/(pages)/template.tsx
+++ b/src/app/(pages)/template.tsx
@@ -9,9 +9,9 @@ interface TemplateProps {
 export default function Template({ children }: TemplateProps) {
   return (
     <motion.div
-      initial={{ y: 20, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      transition={{ ease: "easeInOut", duration: 0.75 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ ease: "easeInOut", duration: 1.5 }}
     >
       {children}
     </motion.div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 87ae00d..a4a0ca3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,6 +7,11 @@
 html,
 body {
   overflow-x: hidden;
+  background-image: url("/bg-blur.webp");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed; /* Keeps the background in place */
 }
 /* For light mode */
 :root[data-mantine-color-scheme="light"] {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e703ad6..d1016e5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,7 +21,7 @@ import { PersistGate } from "redux-persist/integration/react";
 
 const theme = createTheme({
   fontFamily:
-    "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+    "Outfit, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
 });
 
 export default function RootLayout({
diff --git a/src/app/template.tsx b/src/app/template.tsx
index 209d390..79ff977 100644
--- a/src/app/template.tsx
+++ b/src/app/template.tsx
@@ -9,9 +9,9 @@ interface TemplateProps {
 export default function Template({ children }: TemplateProps) {
   return (
     <motion.div
-      initial={{ y: 20, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      transition={{ ease: "easeInOut", duration: 0.75 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ ease: "easeInOut", duration: 1.5 }}
     >
       {children}
     </motion.div>
diff --git a/src/components/Footer/FooterLinks.module.css b/src/components/Footer/FooterLinks.module.css
index e5ef4a6..6325cd1 100644
--- a/src/components/Footer/FooterLinks.module.css
+++ b/src/components/Footer/FooterLinks.module.css
@@ -51,7 +51,9 @@
   display: flex;
   flex-wrap: wrap;
 
-  @media (max-width: $mantine-breakpoint-sm) {
+  @media (max-width: $mantine-breakpoint-xs) {
+    justify-content: space-around;
+    text-align: center;
   }
 }
 
@@ -81,6 +83,7 @@
 }
 
 .afterFooter {
+  text-align: center;
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/components/ThemePicker/Theming.tsx b/src/components/ThemePicker/Theming.tsx
index 14df61c..1d35572 100644
--- a/src/components/ThemePicker/Theming.tsx
+++ b/src/components/ThemePicker/Theming.tsx
@@ -10,7 +10,7 @@ import cx from "clsx";
 import classes from "./Theming.module.css";
 import Image from "next/image"; // or import { Image } from "@mantine/core";
 import Link from "next/link";
-const logo = "/FOSS.png";
+const logo = "/FOSS.webp";
 
 export function ThemedLogo() {
   return (
diff --git a/src/data/AdvertData.ts b/src/data/AdvertData.ts
index 73acb87..78eb7c8 100644
--- a/src/data/AdvertData.ts
+++ b/src/data/AdvertData.ts
@@ -1,5 +1,5 @@
 import { StaticImageData } from "next/image";
-import addImage from "@/images/advert/FOSS.png";
+import addImage from "@/images/advert/FOSS.webp";
 
 export interface AdvertProps {
   data: {
diff --git a/src/data/ArticleGroup.ts b/src/data/ArticleGroup.ts
index 33c589d..b622bef 100644
--- a/src/data/ArticleGroup.ts
+++ b/src/data/ArticleGroup.ts
@@ -5,6 +5,7 @@ export interface ArticleGroupProps {
     id:number
     article: string;
     type:string;
+    discription:string;
     author: string;
     profile: string | StaticImageData;
     published: string;
@@ -23,6 +24,7 @@ export const data: ArticleGroupProps[] = [
         article: "Third Temp Ariticle",
         author: "Imesha Dilshani",
         type:"News",
+        discription:"Each word is a vector and similar words are nearby in space. We'll discuss sparse vectors and dense vectors in the context of word embeddings.",
         profile: imesha_dishani,
         published: "2025-02-01",
         url: "/blog/words-as-vectors-sparse-vectors-vs-dense-vectors"
@@ -32,6 +34,7 @@ export const data: ArticleGroupProps[] = [
         article: "Second Temp Ariticle",
         author: "Imesha Dilshani",
         type:"Tutorials",
+        discription:"Each word is a vector and similar words are nearby in space. We'll discuss sparse vectors and dense vectors in the context of word embeddings.",
         profile: imesha_dishani,
         published: "2025-01-01",
         url: "/blog/words-as-vectors-sparse-vectors-vs-dense-vectors"
@@ -41,6 +44,7 @@ export const data: ArticleGroupProps[] = [
         article: "Words as Vectors: Sparse Vectors vs Dense Vectors",
         author: "Imesha Dilshani",
         type:"Articles",
+        discription:"Each word is a vector and similar words are nearby in space. We'll discuss sparse vectors and dense vectors in the context of word embeddings.",
         profile: imesha_dishani,
         published: "2024-10-01",
         url: "/blog/words-as-vectors-sparse-vectors-vs-dense-vectors"
diff --git a/src/data/FooterData.ts b/src/data/FooterData.ts
index 93706f7..8de9c7b 100644
--- a/src/data/FooterData.ts
+++ b/src/data/FooterData.ts
@@ -13,9 +13,9 @@ export const data = [
       title: "Helpful Links",
       links: [
         { label: "University of Kelaniya", link: "#" },
-        { label: "FOSS.LK", link: "#" },
         { label: "Open-Source Summit", link: "#" },
         { label: "Code of Conduct", link: "#" },
+        { label: "FOSS.LK", link: "#" },
       ],
     },
 
diff --git a/src/images/FOSS.png b/src/images/FOSS.png
deleted file mode 100644
index 03c08dc..0000000
Binary files a/src/images/FOSS.png and /dev/null differ
diff --git a/src/images/FOSS.webp b/src/images/FOSS.webp
new file mode 100644
index 0000000..144f580
Binary files /dev/null and b/src/images/FOSS.webp differ
diff --git a/src/images/advert/FOSS.png b/src/images/advert/FOSS.png
deleted file mode 100644
index 03c08dc..0000000
Binary files a/src/images/advert/FOSS.png and /dev/null differ
diff --git a/src/images/advert/FOSS.webp b/src/images/advert/FOSS.webp
new file mode 100644
index 0000000..144f580
Binary files /dev/null and b/src/images/advert/FOSS.webp differ
diff --git a/src/images/home/FOSStext.png b/src/images/home/FOSStext.png
deleted file mode 100644
index 535f7f0..0000000
Binary files a/src/images/home/FOSStext.png and /dev/null differ
diff --git a/src/images/home/FOSStext.webp b/src/images/home/FOSStext.webp
new file mode 100644
index 0000000..cd49bbe
Binary files /dev/null and b/src/images/home/FOSStext.webp differ
diff --git a/src/images/home/fosslk_logo.png b/src/images/home/fosslk_logo.png
deleted file mode 100644
index 02f9508..0000000
Binary files a/src/images/home/fosslk_logo.png and /dev/null differ
diff --git a/src/images/home/fosslk_logo.webp b/src/images/home/fosslk_logo.webp
new file mode 100644
index 0000000..c549123
Binary files /dev/null and b/src/images/home/fosslk_logo.webp differ
diff --git a/src/images/home/github.jpg b/src/images/home/github.jpg
deleted file mode 100644
index 18fec46..0000000
Binary files a/src/images/home/github.jpg and /dev/null differ
diff --git a/src/images/home/github.webp b/src/images/home/github.webp
new file mode 100644
index 0000000..da85054
Binary files /dev/null and b/src/images/home/github.webp differ
diff --git a/src/images/home/lead.webp b/src/images/home/lead.webp
new file mode 100644
index 0000000..29e5d23
Binary files /dev/null and b/src/images/home/lead.webp differ
diff --git a/src/images/home/learn.jpg b/src/images/home/learn.jpg
deleted file mode 100644
index b381987..0000000
Binary files a/src/images/home/learn.jpg and /dev/null differ
diff --git a/src/images/home/learn.webp b/src/images/home/learn.webp
new file mode 100644
index 0000000..5da53d6
Binary files /dev/null and b/src/images/home/learn.webp differ
diff --git a/src/images/home/share.jpg b/src/images/home/share.jpg
deleted file mode 100644
index dff5a2e..0000000
Binary files a/src/images/home/share.jpg and /dev/null differ
diff --git a/src/images/home/share.webp b/src/images/home/share.webp
new file mode 100644
index 0000000..34bd5ee
Binary files /dev/null and b/src/images/home/share.webp differ
diff --git a/src/images/home/uok.png b/src/images/home/uok.png
deleted file mode 100644
index e66dbe3..0000000
Binary files a/src/images/home/uok.png and /dev/null differ
diff --git a/src/images/home/uok.webp b/src/images/home/uok.webp
new file mode 100644
index 0000000..d515ea9
Binary files /dev/null and b/src/images/home/uok.webp differ