diff --git a/1Application-frontend/index.html b/1Application-frontend/index.html
index 9d3caf7ab..8774201f2 100644
--- a/1Application-frontend/index.html
+++ b/1Application-frontend/index.html
@@ -9,5 +9,14 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+
+    <section id="gif-maker">
+      <h2>Upload Video or Image File</h2>
+      <form id="upload-form">
+        <input type="file" id="file-input" accept="video/*,image/*" />
+        <button type="submit">Submit</button>
+      </form>
+      <div id="gif-display"></div>
+    </section>
   </body>
 </html>
diff --git a/1Application-frontend/src/App.jsx b/1Application-frontend/src/App.jsx
index a962dc43a..63115e4c3 100644
--- a/1Application-frontend/src/App.jsx
+++ b/1Application-frontend/src/App.jsx
@@ -8,6 +8,7 @@ import Contact from "./pages/Contact";
 import Team from "./pages/Team";
 import Project from "./pages/Projects";
 import Profile from "./pages/Profile";
+import GifMaker from "./components/GifMaker";
 import "./index.css";
 
 function App() {
@@ -21,6 +22,7 @@ function App() {
         <Route path="/contact" element={<Contact />} />
         <Route path="/team" element={<Team />} />
         <Route path="/profile" element={<Profile />} />
+        <Route path="/gif-maker" element={<GifMaker />} />
       </Routes>
       <Footer />
     </Fragment>
diff --git a/1Application-frontend/src/components/GifMaker.jsx b/1Application-frontend/src/components/GifMaker.jsx
new file mode 100644
index 000000000..3ff1ec7dc
--- /dev/null
+++ b/1Application-frontend/src/components/GifMaker.jsx
@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import gifshot from 'gifshot';
+
+const GifMaker = () => {
+  const [file, setFile] = useState(null);
+  const [gifUrl, setGifUrl] = useState('');
+  const [gifOptions, setGifOptions] = useState({
+    gifWidth: 200,
+    gifHeight: 200,
+    interval: 0.1,
+    numFrames: 10,
+    frameDuration: 1,
+    fontSize: '16px',
+    fontColor: '#ffffff',
+    text: '',
+  });
+
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+  };
+
+  const handleGifOptionsChange = (e) => {
+    const { name, value } = e.target;
+    setGifOptions((prevOptions) => ({
+      ...prevOptions,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        gifshot.createGIF(
+          {
+            ...gifOptions,
+            images: [event.target.result],
+          },
+          (obj) => {
+            if (!obj.error) {
+              setGifUrl(obj.image);
+            }
+          }
+        );
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <div>
+      <h2>Gif Maker</h2>
+      <form onSubmit={handleSubmit}>
+        <input type="file" accept="video/*,image/*" onChange={handleFileChange} />
+        <div>
+          <label>
+            Width:
+            <input
+              type="number"
+              name="gifWidth"
+              value={gifOptions.gifWidth}
+              onChange={handleGifOptionsChange}
+            />
+          </label>
+          <label>
+            Height:
+            <input
+              type="number"
+              name="gifHeight"
+              value={gifOptions.gifHeight}
+              onChange={handleGifOptionsChange}
+            />
+          </label>
+          <label>
+            Interval:
+            <input
+              type="number"
+              name="interval"
+              value={gifOptions.interval}
+              onChange={handleGifOptionsChange}
+            />
+          </label>
+          <label>
+            Number of Frames:
+            <input
+              type="number"
+              name="numFrames"
+              value={gifOptions.numFrames}
+              onChange={handleGifOptionsChange}
+            />
+          </label>
+          <label>
+            Frame Duration:
+            <input
+              type="number"
+              name="frameDuration"
+              value={gifOptions.frameDuration}
+              onChange={handleGifOptionsChange}
+            />
+          </label>
+          <label>
+            Font Size:
+            <input
+              type="text"
+              name="fontSize"
+              value={gifOptions.fontSize}
+              onChange={handleGifOptionsChange}
+            />
+          </label>
+          <label>
+            Font Color:
+            <input
+              type="color"
+              name="fontColor"
+              value={gifOptions.fontColor}
+              onChange={handleGifOptionsChange}
+            />
+          </label>
+          <label>
+            Text:
+            <input
+              type="text"
+              name="text"
+              value={gifOptions.text}
+              onChange={handleGifOptionsChange}
+            />
+          </label>
+        </div>
+        <button type="submit">Generate GIF</button>
+      </form>
+      {gifUrl && (
+        <div>
+          <h3>Generated GIF:</h3>
+          <img src={gifUrl} alt="Generated GIF" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GifMaker;
diff --git a/1Application-frontend/src/data/contents.json b/1Application-frontend/src/data/contents.json
index b2e7ed609..57823f17f 100644
--- a/1Application-frontend/src/data/contents.json
+++ b/1Application-frontend/src/data/contents.json
@@ -1694,5 +1694,21 @@
       "git": "https://api.github.com/repos/thinkswell/javascript-mini-projects/git/trees/4fba75c60b6899102568affe79ed9271aaea1239",
       "html": "https://github.com/thinkswell/javascript-mini-projects/tree/master/randomPassword"
     }
+  },
+  {
+    "name": "GifMaker",
+    "path": "GifMaker",
+    "sha": "newsha1234567890",
+    "size": 0,
+    "url": "https://api.github.com/repos/thinkswell/javascript-mini-projects/contents/GifMaker?ref=master",
+    "html_url": "https://github.com/thinkswell/javascript-mini-projects/tree/master/GifMaker",
+    "git_url": "https://api.github.com/repos/thinkswell/javascript-mini-projects/git/trees/newsha1234567890",
+    "download_url": null,
+    "type": "dir",
+    "_links": {
+      "self": "https://api.github.com/repos/thinkswell/javascript-mini-projects/contents/GifMaker?ref=master",
+      "git": "https://api.github.com/repos/thinkswell/javascript-mini-projects/git/trees/newsha1234567890",
+      "html": "https://github.com/thinkswell/javascript-mini-projects/tree/master/GifMaker"
+    }
   }
 ]
diff --git a/1Application-frontend/src/main.jsx b/1Application-frontend/src/main.jsx
index 33316b274..6fbb59654 100644
--- a/1Application-frontend/src/main.jsx
+++ b/1Application-frontend/src/main.jsx
@@ -2,11 +2,13 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import { BrowserRouter } from 'react-router-dom'
+import GifMaker from './components/GifMaker.jsx'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <BrowserRouter>
       <App />
+      <GifMaker />
     </BrowserRouter>
   </React.StrictMode>,
 )
