diff --git a/src/App.js b/src/App.js
index ff1d16a8..163f97fb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import styles from "./App.module.css";
-import Header from "./Components/Header/Header";
-import MasonryLayout from "./Components/MasonryLayout/MasonryLayout";
-import ContainerCard from "./Components/ContainerCard/ContainerCard";
+import Header from './Components/Header/Header';
+import MasonryLayout from './Components/MasonryLayout/MasonryLayout';
+import ContainerCard from './Components/ContainerCard/ContainerCard';
 import images from "./Jsons/Contributors.json";
 import Footer from "./Components/Footer/Footer";
 
@@ -16,15 +16,9 @@ const App = () => {
   return (
     <>
       <Header onCategoryChange={handleCategoryChange} />
-
-      <div
-        className=""
-        style={{ marginTop: "50px", padding: "50px" }}
-      >
+      <div className="flex justify-content-center" style={{ marginTop: "50px", padding: '50px' }}>
         <ContainerCard>
-          <div
-            className={`${styles["gallery-setting"]} flex justify-content-between align-items-center`}
-          ></div>
+          <div className={`${styles["gallery-setting"]} flex justify-content-between align-items-center`}></div>
           <MasonryLayout images={categoryImage} />
         </ContainerCard>
       </div>
diff --git a/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx b/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx
index ad303cf1..23f3db3a 100644
--- a/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx
+++ b/src/Components/MasonryLayout/MasonryBox/MasonryBox.jsx
@@ -1,21 +1,15 @@
-import React, { useState, useEffect } from "react";
-import styles from "./MasonryBox.module.css";
-import { PropTypes } from "prop-types";
+import React, { useState } from 'react';
+import styles from './MasonryBox.module.css';
+import { PropTypes } from 'prop-types';
 
-const MasonryBox = ({
-  wallSrc,
-  userProf,
-  userName,
-  userJob,
-  githubUrl,
-  userText,
-}) => {
+
+const MasonryBox = ({ wallSrc, userProf, userName, userJob, githubUrl, userText }) => {
   const handleUserProfClick = () => {
     if (githubUrl) {
-      window.open(githubUrl, "_blank");
+      window.open(githubUrl, '_blank');
     }
   };
-  const [randomColor, setRandomColor] = useState();
+
   const [isEnlarged, setIsEnlarged] = useState(false);
   const [isUserTextVisible, setIsUserTextVisible] = useState(true);
   const [isTextVisible, setIsTextVisible] = useState(false);
@@ -28,95 +22,38 @@ const MasonryBox = ({
   const toggleText = () => {
     setIsTextVisible(!isTextVisible);
   };
-  useEffect(() => {
-    setRandomColor(() => {
-      const minBrightness = 80;
-
-      // Generate random RGB values with a minimum brightness
-      let red, green, blue;
-      do {
-        red = Math.floor(Math.random() * 256);
-        green = Math.floor(Math.random() * 256);
-        blue = Math.floor(Math.random() * 256);
-      } while (red + green + blue < minBrightness * 3);
 
-      // Convert RGB values to a hexadecimal color
-      const color = `#${red.toString(16)}${green.toString(16)}${blue.toString(
-        16
-      )}`;
-
-      return color;
-    });
-  }, [isEnlarged]);
   const presetText = (
     <span className={styles.boldText}>
-      Before I Die... <br />
-      {/* 💭 🌎 🎨 🎓 ❤️ 🌲 🏠 ✈️ 🏆 <br /> 💵 🤝 🌃 📚 🎸 🚴 🌟 🏰 🚀 */}
+      Before I Die <br />
+      💭 🌎 🎨 🎓 ❤️ 🌲 🏠 ✈️ 🏆 <br /> 💵 🤝 🌃 📚 🎸 🚴 🌟 🏰 🚀
       <br />
     </span>
   );
 
   return (
     <div className={styles["my-masonry"]}>
-      <img
-        src={wallSrc}
-        style={{ width: "100%" }}
-        alt=""
-        onClick={toggleEnlarged}
-      />
+      <img src={wallSrc} style={{ width: "100%" }} alt="" onClick={toggleEnlarged} />
       {isEnlarged && (
-        <div
-          className={styles.enlargedPhoto}
-          onClick={toggleEnlarged}
-        >
-          <div className={styles.enlargedPhotoContainer}>
-            <img
-              src={wallSrc}
-              alt=""
-              className={styles.enlargedPhotoImage}
-            />
-            <div
-              className={styles.enlargedPhotoText}
-              onClick={toggleText}
-            >
-              <h3>{presetText}</h3>
-              <p style={{ color: randomColor }}>{userText}</p>
-            </div>{" "}
-          </div>
-
-          {/* Add preset text here */}
+        <div className={styles.enlargedPhoto} onClick={toggleEnlarged}>
+          <img src={wallSrc} alt="" className={styles.enlargedPhotoImage} />
+          <div className={styles.enlargedPhotoText} onClick={toggleText}>{presetText} {userText}</div> {/* Add preset text here */}
           {isTextVisible && (
             <div className={styles.enlargedPhotoTextBox}>
-              <p>
-                {presetText} {userText}
-              </p>{" "}
-              {/* Add preset text here */}
+              <p>{presetText} {userText}</p> {/* Add preset text here */}
             </div>
           )}
         </div>
       )}
       {isUserTextVisible && (
         <div className={`${styles["my-masnry-description"]} flex`}>
-          <div
-            className={`${styles["my-masnry-user-box"]} flex align-items-center`}
-          >
+          <div className={`${styles["my-masnry-user-box"]} flex align-items-center`}>
             <div className={styles["my-masnry-user-prof"]}>
-              <a
-                href={githubUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={handleUserProfClick}
-              >
-                <img
-                  src={userProf}
-                  alt=""
-                  className={styles["clickable"]}
-                />
+              <a href={githubUrl} target="_blank" rel="noopener noreferrer" onClick={handleUserProfClick}>
+                <img src={userProf} alt="" className={styles["clickable"]} />
               </a>
             </div>
-            <div
-              className={`${styles["my-masnry-user-prof-desc"]} flex flex-column`}
-            >
+            <div className={`${styles["my-masnry-user-prof-desc"]} flex flex-column`}>
               <h1>{userName}</h1> {/* Add preset text here */}
               <h3>{userJob}</h3>
             </div>
diff --git a/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css b/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
index 526cc53b..79b17e4b 100644
--- a/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
+++ b/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
@@ -2,15 +2,12 @@
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,700&display=swap');
 
-
-
 .my-masonry {
   position: relative;
   margin-bottom: 30px;
   display: flex;
   border-radius: 10px;
   overflow: hidden;
- 
 }
 
 .my-masonry img:hover {
@@ -28,45 +25,28 @@
   justify-content: center;
   align-items: center;
   z-index: 999;
-  padding: 0 30px;
-}
-
-.enlargedPhotoContainer {
-  display: flex;
-  background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png);
-  width: 80%;
-  height: 70%;
-  border-radius: 10px;
 }
 
 .enlargedPhotoImage {
-width: 50%;
-object-fit: cover;
-border-radius: 10px 0px 0px 10px
-  /* max-height: 50%;  */
+  max-width: 50%;
+  max-height: 50%;
 }
 
 .enlargedPhotoText {
-  overflow-y: scroll;
-  color: azure;
+  color: black;
   font-size: 18px;
   font-family: "Fira Code", monospace;
   padding: 20px;
-  /* background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png); */
+  background: linear-gradient(to right, #006dff, rgb(254, 234, 58));
   max-width: 50%;
   width: auto;
   /* adjust the width as needed */
-  margin-left: 0px;
+  margin-left: 50px;
   /* adjust the margin as needed */
-  /* text-align: center; */
+  text-align: center;
   /* add this property to center the text */
- 
-}
-.enlargedPhotoText p{
-  line-height: normal;
-  max-height: 70%;
-  font-family: "Chalk_3", sans-serif;
 }
+
 @media (max-width: 640px) {
   /* When screen & mobile size less than 640px */
   .enlargedPhoto {
@@ -74,29 +54,16 @@ border-radius: 10px 0px 0px 10px
     flex-direction: column;
   }
 
- .enlargedPhotoContainer{
-  display: flex;
-  flex-direction: column;
-    width: 100%;
-    height: 90%;
-  }
   .enlargedPhotoImage {
     width: auto;
-    height: 50%;
-    border-radius: 10px 10px 0 0;
+    height: auto;
   }
 
   .enlargedPhotoText {
     margin: 0;
     max-width: 100%;
-    
   }
-  
- }
-  
-  
-  
-
+}
 
 .enlargedPhotoTextBox {
   position: absolute;
@@ -193,14 +160,12 @@ border-radius: 10px 0px 0px 10px
   .my-masnry-user-prof-desc {
     font-size: 1rem;
   }
-  
 }
 
 .boldText {
-  color: azure;
   font-weight: bolder;
-  font-size: 30px;
-  font-family: "Chalk_3", sans-serif;
+  font-size: 25px;
+  font-family: "EB Garamond", serif;
   /* Adjust the font size as desired */
   text-align: center;
 }
diff --git a/src/Components/MasonryLayout/MasonryLayout.jsx b/src/Components/MasonryLayout/MasonryLayout.jsx
index f07934d8..44765b86 100644
--- a/src/Components/MasonryLayout/MasonryLayout.jsx
+++ b/src/Components/MasonryLayout/MasonryLayout.jsx
@@ -1,18 +1,18 @@
 // import styles of this component
-import styles from "./MasonryLayout.module.css";
+import styles from "./MasonryLayout.module.css"
 
 // import other react pkg to use
-import Masonry from "react-masonry-css";
+import Masonry from "react-masonry-css"
 
 // import other component to use
-import MasonryBox from "./MasonryBox/MasonryBox";
+import MasonryBox from './MasonryBox/MasonryBox';
 
 // MasonryLayout Component
 const MasonryLayout = ({ images }) => {
   const breakpointColumnsObj = {
     default: 3,
     1100: 2,
-    700: 1,
+    700: 1
   };
 
   // Shuffle the images array
@@ -24,7 +24,7 @@ const MasonryLayout = ({ images }) => {
       className={styles["my-masonry-grid"]}
       columnClassName={styles["my-masonry-grid_column"]}
     >
-      {shuffledImages.map((item) => (
+      {shuffledImages.map(item => (
         <MasonryBox
           key={item.id}
           wallSrc={item.image}
@@ -36,7 +36,7 @@ const MasonryLayout = ({ images }) => {
         />
       ))}
     </Masonry>
-  );
-};
+  )
+}
 
-export default MasonryLayout;
+export default MasonryLayout
diff --git a/src/fonts/Chalk/Chalk-3.ttf b/src/fonts/Chalk/Chalk-3.ttf
deleted file mode 100644
index 24bff7f6..00000000
Binary files a/src/fonts/Chalk/Chalk-3.ttf and /dev/null differ
diff --git a/src/index.css b/src/index.css
index 8f664df5..17d31fc4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,13 +8,6 @@
     --green-white-100: #C3EFC0;
 }
 
-@font-face {
- 
-    font-family: "Chalk_3";
-    src: local("Chalk_3"),
-     url("./fonts/Chalk/Chalk-3.ttf") format("truetype");
-    
-}
 body {
     background: var(--dark-900);
 }
diff --git a/src/index.js b/src/index.js
index 12cb5970..53db037e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,8 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import "./index.css";
-
-import "./fonts/Chalk/Chalk-3.ttf";
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import "./index.css"
 
 const container = document.getElementById("root");
 const root = createRoot(container);
-root.render(<App />);
+root.render(<App />);
\ No newline at end of file