diff --git a/1Application-frontend/package-lock.json b/1Application-frontend/package-lock.json
index 6f21b98a6..c2c9e061d 100644
--- a/1Application-frontend/package-lock.json
+++ b/1Application-frontend/package-lock.json
@@ -4818,7 +4818,8 @@
     "@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
-      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw=="
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "requires": {}
     },
     "@emotion/utils": {
       "version": "1.2.1",
@@ -5217,7 +5218,8 @@
     "@mui/types": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.6.tgz",
-      "integrity": "sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng=="
+      "integrity": "sha512-7sjLQrUmBwufm/M7jw/quNiPK/oor2+pGUQP2CULRcFCArYTq78oJ3D5esTaL0UMkXKJvDqXn6Ike69yAOBQng==",
+      "requires": {}
     },
     "@mui/utils": {
       "version": "5.14.13",
@@ -5379,7 +5381,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv": {
       "version": "6.12.6",
@@ -6002,13 +6005,15 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-react-refresh": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.3.tgz",
       "integrity": "sha512-Hh0wv8bUNY877+sI0BlCUlsS0TYYQqvzEwJsJJPM2WF4RnTStSnSR3zdJYa2nPOJgg3UghXi54lVyMSmpCalzA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-scope": {
       "version": "7.2.2",
diff --git a/1Application-frontend/src/components/Cards.jsx b/1Application-frontend/src/components/Cards.jsx
index c1634d09d..be99ef383 100644
--- a/1Application-frontend/src/components/Cards.jsx
+++ b/1Application-frontend/src/components/Cards.jsx
@@ -1,23 +1,26 @@
-import React from 'react'
+import React from 'react';
 import { red } from '@mui/material/colors';
-import { Avatar, Card, CardActions, CardContent, CardHeader, CardMedia, IconButton, Typography } from '@mui/material';
+import { Avatar, Card, CardActions, CardContent, CardMedia, Typography } from '@mui/material';
 
+export default function Cards({ projectName = 'NA', imageUrl, altname = 'Project Image', description = 'No description available' }) {
+  // Safely handle the match and join logic
+  const projectCodeArray = projectName ? projectName.match(/[0-9 A-Z]/g) : null;
+  const projectCode = projectCodeArray ? projectCodeArray.join('').slice(0, 2) : 'NA'; // Default if match is null
 
-export default function Cards( {projectName, imageUrl, altname, description} ) {
-    return (
-        <Card sx={{ maxWidth: 345 }}>
-      <CardContent sx={{display: 'flex', justifyContent:'start'}}>
-          <Avatar sx={{ bgcolor: red[500], mr: 2}} aria-label="leter">
-            {projectName.match(/[0-9 A-Z]/g).join('').slice(0,2)}
-          </Avatar>
+  return (
+    <Card sx={{ maxWidth: 345 }}>
+      <CardContent sx={{ display: 'flex', justifyContent: 'start' }}>
+        <Avatar sx={{ bgcolor: red[500], mr: 2 }} aria-label="letter">
+          {projectCode}
+        </Avatar>
         <Typography color="text.secondary" variant="h5">
-            {projectName}
+          {projectName}
         </Typography>
       </CardContent>
       <CardMedia
         component="img"
         height="200"
-        image={imageUrl}
+        image={imageUrl || 'defaultImageUrl.jpg'}
         alt={altname}
       />
       <CardContent>
@@ -28,5 +31,5 @@ export default function Cards( {projectName, imageUrl, altname, description} ) {
       <CardActions disableSpacing>
       </CardActions>
     </Card>
-    )
+  );
 }
diff --git a/1Application-frontend/src/components/Footer.jsx b/1Application-frontend/src/components/Footer.jsx
index ddfc1620d..e9109e123 100644
--- a/1Application-frontend/src/components/Footer.jsx
+++ b/1Application-frontend/src/components/Footer.jsx
@@ -31,9 +31,9 @@ const Footer = () => {
 
         <div className="section">
           <h2>About Us</h2>
-          <z>Our github</z>
-          <z>Github stars</z>
-          <z>Repositories</z>
+          <p>Our github</p>
+          <p>Github stars</p>
+          <p>Repositories</p>
         </div>
 
         <div className="section">
diff --git a/1Application-frontend/src/css/Home.css b/1Application-frontend/src/css/Home.css
index 2c6fc5f20..5f09c4098 100644
--- a/1Application-frontend/src/css/Home.css
+++ b/1Application-frontend/src/css/Home.css
@@ -5,6 +5,57 @@
     background: linear-gradient(to left, var(--color-4), var(--color-5));
     padding: 6rem 3.5rem;
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    overflow: hidden;
+    text-align: center;
     background-color: rgb(4, 150, 164);
-    max-height:200vh;
+}
+
+.home-container h1 {
+    font-size: 5rem; 
+    font-weight: bold;
+    margin-bottom: 20px;
+    opacity: 0;
+    transform: translateY(-20px);
+    animation: fadeInUp 1s forwards 0.3s;
+}
+
+.home-container p {
+    font-size: 1.5rem;
+    line-height: 1.8;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeInUp 1s forwards 0.6s;
+}
+
+.see-projects-button {
+    display: inline-block;
+    padding: 10px 20px;
+    margin-top: 20px;
+    font-size: 1.2rem;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+}
+
+.see-projects-button:hover {
+    background-color: #0056b3;
+}
+
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.home-container p:hover {
+    color: #ffcc00;
+    transition: color 0.3s ease;
 }
\ No newline at end of file
diff --git a/1Application-frontend/src/css/Navbar.css b/1Application-frontend/src/css/Navbar.css
index 5f04955d2..f8de5996f 100644
--- a/1Application-frontend/src/css/Navbar.css
+++ b/1Application-frontend/src/css/Navbar.css
@@ -39,7 +39,7 @@
 .head-main h3 {
   display: inline-flex;
   color: white;
-  font-size: 2rem;
+  font-size: 1.7rem;
   /* text-shadow: 1px 1px 1px #919191; */
   /* font-family: var(--font-1); */
   font-family: 'Courier New', Courier, monospace;
diff --git a/1Application-frontend/src/pages/Home.jsx b/1Application-frontend/src/pages/Home.jsx
index 963b73124..6e1652668 100644
--- a/1Application-frontend/src/pages/Home.jsx
+++ b/1Application-frontend/src/pages/Home.jsx
@@ -1,14 +1,20 @@
-import { Fragment } from "react"
-import "../css/Home.css"
+import { Fragment } from "react";
+import { Link } from "react-router-dom"; // Import Link from react-router-dom
+import "../css/Home.css";
 
 const Home = () => {
   return (
     <Fragment>
       <div className="home-container">
-
+        <h1>Welcome to Thinks Well Javascript Projects</h1>
+        <p>Explore the projects and learn more about the team</p>
+        {/* Button to navigate to /projects */}
+        <Link to="/projects" className="see-projects-button">
+          See Projects
+        </Link>
       </div>
     </Fragment>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/1Application-frontend/src/pages/Projects.jsx b/1Application-frontend/src/pages/Projects.jsx
index 806ca3eb4..1b9a089ce 100644
--- a/1Application-frontend/src/pages/Projects.jsx
+++ b/1Application-frontend/src/pages/Projects.jsx
@@ -26,7 +26,7 @@ const Projects = () => {
       <Navbar />
         
         <Container size="sm" sx={{ mt: "7rem", mb: 4 }}>
-            <Grid container spacing={2} gutterBottom>
+            <Grid container spacing={2}>
                 {names.map((name) => (
                    <Grid item xs={12} sm={6} md={4} key={name}>
                         <Cards 
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/.eslintrc.cjs b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/.eslintrc.cjs
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/.eslintrc.cjs
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/.eslintrc.cjs
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/.gitignore b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/.gitignore
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/.gitignore
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/.gitignore
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/README.md b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/README.md
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/README.md
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/README.md
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/index.html b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/index.html
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/index.html
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/index.html
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/package-lock.json b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/package-lock.json
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/package-lock.json
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/package-lock.json
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/package.json b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/package.json
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/package.json
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/package.json
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/public/vite.svg b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/public/vite.svg
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/public/vite.svg
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/public/vite.svg
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/App.css b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/App.css
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/App.css
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/App.css
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/App.jsx b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/App.jsx
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/App.jsx
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/App.jsx
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/assets/react.svg b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/assets/react.svg
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/assets/react.svg
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/assets/react.svg
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/index.css b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/index.css
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/index.css
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/index.css
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/main.jsx b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/main.jsx
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/src/main.jsx
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/src/main.jsx
diff --git a/SpendingCalculatorApp:Pratik1968/SpendingCalculator/vite.config.js b/SpendingCalculatorApp_Pratik1968/SpendingCalculator/vite.config.js
similarity index 100%
rename from SpendingCalculatorApp:Pratik1968/SpendingCalculator/vite.config.js
rename to SpendingCalculatorApp_Pratik1968/SpendingCalculator/vite.config.js