diff --git a/data/projects/projects.json b/data/projects/projects.json
index 75e38d8..09d18ed 100644
--- a/data/projects/projects.json
+++ b/data/projects/projects.json
@@ -3,6 +3,8 @@
         "slug": "1No1PXOF6A88TofuMBpcGKGm3VEWG6hPV",
         "name": "Random",
         "dateAdded": "4-2-2024",
+        "desc": "",
+        "displayURL": "",
         "text": "",
         "images": []
     },
@@ -10,14 +12,18 @@
         "slug": "10XHgqaww72QZE6IERnNf4RlFTUVT3KIX",
         "name": "Project 2",
         "dateAdded": "4-2-2024",
-        "text": " <p style=\"\">Project 2\n</p> ",
+        "desc": "",
+        "displayURL": "",
+        "text": "",
         "images": []
     },
     {
         "slug": "1vZ-HBwff_sAiBSfDGxAmYx9O7aJ3mMiW",
         "name": "Project 1",
         "dateAdded": "4-1-2024",
-        "text": " \n  <p style=\"\">Project 1\n</p>  \n  \n  <p style=\"font-size:10.5px; font-family:\"Open Sans\"\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices quam eget est interdum hendrerit. Morbi erat ante, gravida ut porttitor sit amet, suscipit quis odio. Praesent eget malesuada ante. Aliquam ullamcorper metus sed turpis blandit, vitae pharetra nisl lacinia. Etiam ipsum ante, tempus at turpis ac, placerat hendrerit magna. Morbi a eros sed nulla sodales aliquam. Nullam rutrum justo lorem, sed blandit magna hendrerit ac. Ut congue laoreet pellentesque. Integer rhoncus, velit vitae consectetur hendrerit, augue erat laoreet ligula, vel bibendum magna ex ac neque. Aliquam congue est at ante eleifend accumsan. Quisque egestas venenatis lacus in porttitor. Cras iaculis metus quis neque dictum, quis sagittis libero elementum. Proin feugiat a velit nec congue.\n</p>  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <b><p style=\"font-size:14.5px; font-family:\"Inter\"\">Phasellus semper maximus pretium. Vivamus placerat eros non elit posuere sollicitudin. Aenean blandit ante est, et suscipit ligula porttitor eget. Nunc dictum luctus felis, id volutpat nibh congue id. Aenean maximus metus a erat consequat, eu rutrum elit ullamcorper. Vestibulum id vulputate sem, non varius odio. Nullam </p></b>  <i><p style=\"font-size:9.5px; font-family:\"Lexend\"\">id turpis dignissim, facilisis ex sed, ullamcorper metus. Nunc id orci eget ex accumsan sodales quis posuere nibh. Praesent at massa ac nisl viverra ultricies vel in dolor. Nullam lacinia lacus ut leo cursus, et ullamcorper tortor fermentum.\n</p></i>  \n ",
+        "desc": " <p style=\"\">This is the example of a welding project\n</p> ",
+        "displayURL": "https://lh3.googleusercontent.com/d/1hX0sTKNxhq4SbW9DUL15KfYq4Jd2UEbn",
+        "text": " \n  \n  <p style=\"\">Project 1\n</p>  \n  \n  <p style=\"font-size:10.5px; font-family:\"Open Sans\"\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices quam eget est interdum hendrerit. Morbi erat ante, gravida ut porttitor sit amet, suscipit quis odio. Praesent eget malesuada ante. Aliquam ullamcorper metus sed turpis blandit, vitae pharetra nisl lacinia. Etiam ipsum ante, tempus at turpis ac, placerat hendrerit magna. Morbi a eros sed nulla sodales aliquam. Nullam rutrum justo lorem, sed blandit magna hendrerit ac. Ut congue laoreet pellentesque. Integer rhoncus, velit vitae consectetur hendrerit, augue erat laoreet ligula, vel bibendum magna ex ac neque. Aliquam congue est at ante eleifend accumsan. Quisque egestas venenatis lacus in porttitor. Cras iaculis metus quis neque dictum, quis sagittis libero elementum. Proin feugiat a velit nec congue.\n</p>  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <b><p style=\"font-size:14.5px; font-family:\"Inter\"\">Phasellus semper maximus pretium. Vivamus placerat eros non elit posuere sollicitudin. Aenean blandit ante est, et suscipit ligula porttitor eget. Nunc dictum luctus felis, id volutpat nibh congue id. Aenean maximus metus a erat consequat, eu rutrum elit ullamcorper. Vestibulum id vulputate sem, non varius odio. Nullam </p></b>  <i><p style=\"font-size:9.5px; font-family:\"Lexend\"\">id turpis dignissim, facilisis ex sed, ullamcorper metus. Nunc id orci eget ex accumsan sodales quis posuere nibh. Praesent at massa ac nisl viverra ultricies vel in dolor. Nullam lacinia lacus ut leo cursus, et ullamcorper tortor fermentum.\n</p></i>  \n ",
         "images": []
     }
 ]
\ No newline at end of file
diff --git a/generateProjects.js b/generateProjects.js
index d56a992..efc0d85 100644
--- a/generateProjects.js
+++ b/generateProjects.js
@@ -19,6 +19,24 @@ function getFileName(file = "") {
     return file.split(".").slice(0, -1).join(".");
 }
 let lineee = 0;
+function isImage(element) {
+    // Check if the element is a table (which images are represented as)
+    if (!element.table) return false;
+
+    // Iterate through rows in the table
+    for (let row of element.table.rows) {
+        // Iterate through cells in the row
+        for (let cell of row.cells) {
+            // Check if the cell contains an image
+            if (cell.image) {
+                return true; // Found an image
+            }
+        }
+    }
+
+    return false; // No image found
+}
+
 async function getDocData(id=""){
     let txt = ""
     await docs.documents.get({
@@ -71,12 +89,13 @@ async function getDocData(id=""){
 async function fetchFiles(token = "") {
     // List files in the public folder
     const response = await drive.files.list({
-        q: `'${process.env.GOOGLE_FOLDER_ID}' in parents`,
+        q: `'${process.env.GOOLGE_FOLDER_ID_PROJECTS}' in parents`,
         pageSize: 1000,
         //pageToken: token,
         key: process.env.GOOGLE_API_KEY,
         fields: 'nextPageToken, files(id, name, createdTime)'
     });
+    // if folder exists
     if(response.data.files){
         let folders = response.data.files
         for(let i=0;i<folders.length;i++){
@@ -86,6 +105,8 @@ async function fetchFiles(token = "") {
                 slug:folder.id,
                 name:folder.name,
                 dateAdded:date.getMonth()+"-"+date.getDay()+"-"+date.getFullYear(),
+                desc:"",
+                displayURL:"",
                 text:"",
                 images:[]
             }
@@ -96,10 +117,20 @@ async function fetchFiles(token = "") {
             })
             for(let o=0;o<folderData.data.files.length;o++){
                 let folderfile = folderData.data.files[o]
+                // if it doc
                 if(folderfile.mimeType.startsWith("application/vnd.google-apps.document")){
-                    data.text = await getDocData(folderfile.id)
+                    if(folderfile.name == "Post"){
+                        data.text = await getDocData(folderfile.id)
+                    }else if(folderfile.name == "Desc"){
+                        data.desc = await getDocData(folderfile.id)
+                    }
+                }else if(folderfile.mimeType.startsWith("image/") && getFileName(folderfile.name).toLowerCase() == "display" ){
+                    data.displayURL = `https://lh3.googleusercontent.com/d/${folderfile.id}`
+                }else if(folderfile.mimeType.startsWith("image/")){
+                    data.images.push(`https://lh3.googleusercontent.com/d/${folderfile.id}`)
                 }
             }
+
             //console.log(images.data.files)
             projectJSON.push(data)
         }
@@ -108,7 +139,7 @@ async function fetchFiles(token = "") {
 
 await fetchFiles()
 
-await fs.writeFile(path.join(process.cwd(),"data","projects","projects.json"),JSON.stringify(projectJSON,null,4),(err)=>{
+await fs.writeFileSync(path.join(process.cwd(),"data","projects","projects.json"),JSON.stringify(projectJSON,null,4),(err)=>{
     if(err){
         console.log("Faliure to write file")
         console.log("error:\n--------------------------------\n"+err)
@@ -116,4 +147,5 @@ await fs.writeFile(path.join(process.cwd(),"data","projects","projects.json"),JS
         console.log("writing file successful")
     }
 })
+
 console.log("End of execution")
\ No newline at end of file
diff --git a/public/Vector 1.svg b/public/Vector 1.svg
new file mode 100644
index 0000000..c10eec1
--- /dev/null
+++ b/public/Vector 1.svg	
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 100V0L0 100H100Z" fill="black" stroke="black"/>
+</svg>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index bce3252..c2974be 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -20,7 +20,7 @@ const { title="" } = Astro.props
 	<ViewTransitions />
 </head>
 <body>
-	<Header page={title} client:load/>
+	<Header page={title} client:load transition:persist/>
 	<slot />
 </body>
 </html>
\ No newline at end of file
diff --git a/src/pages/Projects/index.astro b/src/pages/Projects/index.astro
index 37b2664..05b6d9a 100644
--- a/src/pages/Projects/index.astro
+++ b/src/pages/Projects/index.astro
@@ -5,10 +5,12 @@
 ---
 <Layout title="Projects">
     <div id="projects">
-        aa
     </div>
 </Layout>
 <script is:inline define:vars={{data}}>
+    let projects = document.getElementById("projects")
+    //projects.style.gridAutoRows = `repeat(${data.length/5},1fr)`
+
     let rando = 0
     //random Number I thought of
     //good enough random seeded number for me
@@ -18,7 +20,7 @@
         if(!randoInt<addingRando.length){
             randoInt = 0
         }else{
-            randInt++
+            randoInt++
         }
         return(rando[randoInt])
     }
@@ -26,13 +28,24 @@
         let project = document.createElement("a");
         project.href = "Projects/"+data[i].slug
         project.className = "project"
-        if(data[i].images[0]){
+        project.style.width = "200px"
+
+
+        if(data[i].displayURL != ""){
+            let img = document.createElement("img")
+            img.src = data[i].displayURL
+            let ratio = img.width/img.height
             // if the width is greater, set height to 200px
-            // if the height is greater, set width to 200px
-            // This is to bring different rectanges
-        }else{
-            project.style.width = "200px"
+            if(img.width > img.height){
+                img.style.height = "200px";
+            }else{
+                img.style.width = "200px";
+            }
+            project.style.width = `${200*ratio}px`
+            project.appendChild(img)
         }
+
+
             let title = document.createElement("h3");
             title.innerText = data[i].name;
 
@@ -40,7 +53,11 @@
             subtitle.innerText = data[i].dateAdded
 
             let desc = document.createElement("p");
-            desc.innerText = "In publishing and graphic design, Lorem ipsum (/ˌlɔː.rəm ˈɪp.səm/) is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design. - Wikipedia"
+            if(data[i].desc != ""){
+                desc.innerHTML = data[i].desc
+            }else{
+                desc.innerHTML = "In publishing and graphic design, Lorem ipsum (/ˌlɔː.rəm ˈɪp.səm/) is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design. - Wikipedia"
+            }
 
         project.appendChild(title)
         project.appendChild(subtitle)
diff --git a/src/pages/Projects/styles.css b/src/pages/Projects/styles.css
index ef1ef50..5df3867 100644
--- a/src/pages/Projects/styles.css
+++ b/src/pages/Projects/styles.css
@@ -1,13 +1,30 @@
-.project{
+#projects{
     display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    align-items: center;
+    justify-items: center;
+}
+
+.project{
+    display: inline-grid;
 
     border: 1px solid white;
     border-radius: 10px;
-    background-color: rgba(36.33760937330989, 167.88703417231812, 65.1662236216307, 0.5);
+    /*background-color: rgba(36.33760937330989, 167.88703417231812, 65.1662236216307, 0.5);*/
 
     padding:10px;
+    margin:5px;
+    text-decoration: none;
     color: white;
+
+    transition: 250ms;
+}
+.project:hover{
+    box-shadow: 0 0 5px 5px rgb(140, 182, 255);
 }
 .project > *{
     margin: 2px;
+}
+.project > p{
+    text-decoration: underline;
 }
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 18f9467..76e0bfb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,34 +2,87 @@
 
 import Image from "astro/components/Image.astro";
 import Layout from "../layouts/Layout.astro";
-
-
 import main from "./main.js"
 ---
 
 <Layout title="Home">
     <div id="Main-Display">
-        <h1>
-            <span style="overflow-x: hidden;">Parlier</span>
-            <span style="color:#80b9ff;" id="slideInLeft">Welding Club</span>
-        </h1>
+
+        <div>
+            <h1>
+                <span style="overflow-x: hidden;">Parlier</span>
+                <span style="color:#80b9ff;" id="slideInLeft">Welding Club</span>
+            </h1>
+            <a href="/Parlier-Welding-Website/Projects" id="btn-wrapper"><button>Check out our work</button> </a>
+        </div>
+        <!-- <button>Check out our work</button> -->
+        <p><b>
+            Welding stuff and more text
+        </b></p>
+        <svg width="200" height="200" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="triangle" style="transform: scaleX(-1); left:0px">
+            <path d="M100 100V0L0 100H100Z" fill="var(--backgroundColor)"/>
+        </svg>
+        <svg width="200" height="200" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="triangle" style=" right:0px">
+            <path d="M100 100V0L0 100H100Z" fill="var(--backgroundColor)"/>
+        </svg>
     </div>
 </Layout>
-<style is:global>
+<style>
+    #triangle{
+        position:absolute;
+        bottom:0px;
+
+        margin:0px;
+    }
+    #left{
+        transform: scaleX(-1);
+        left:0px
+    }
+    #right{
+        right:0px;
+    }
+    h1{
+        display:flex;
+        font-size:36px;
+        column-gap:5px;
+    }
+    h1 span{
+        padding:10px;
+    }
+    h1 span:nth-child(1){
+        border-top: 1px solid white;
+        border-left: 1px solid white;
+    }
+    h1 span:nth-child(2){
+        border-bottom: 1px solid white;
+        border-right: 1px solid white;
+    }
     img{
         width: 100vw;
         height: auto;
     }
     #Main-Display{
+        position:relative;
+
         display: grid;
         align-items: center;
         justify-items: center;
+        grid-template-columns: 1fr 1fr;
 
-        height: 600px;
+        height: 500px;
 
 
-        background-image: url("https://weldernation.com/cdn/shop/files/WN_BeanieCollection_Homepage_1800x1000_caf1ceda-8640-402e-add0-38ffcd647294_3000x.jpg?v=1694449280");
-        object-fit: cover;
+        background-image: url("https://lh3.googleusercontent.com/d/1FOLup-5KkMDrlTATgjSVyKR1h4vu195f");
+        background-repeat: no-repeat;
+        background-position: center center;
+        object-fit: cover
+    }
+    #Main-Display p{
+        color: azure;
+        font-size:15px;
+    }
+    button{
+        margin-block:20px;
     }
     #slideInLeft{
         overflow-x: hidden;
@@ -48,7 +101,6 @@ import main from "./main.js"
 
         position: absolute;
         right:0px;
-
         animation: fadeAway 1s;
 
     }