diff --git a/SUGGESTIONS.md b/SUGGESTIONS.md
new file mode 100644
index 00000000..35bcc9b1
--- /dev/null
+++ b/SUGGESTIONS.md
@@ -0,0 +1,33 @@
+# Suggestions for Improving the Website
+
+## Easy Changes
+
+### Improve SEO and Performance
+1. Optimize images by compressing them and using modern formats like WebP.
+2. Implement lazy loading for images to improve page load times.
+3. Add meta tags for better SEO.
+4. Use a Content Delivery Network (CDN) to serve static assets faster.
+
+### Add More Interactive Elements
+1. Add subtle CSS animations to existing components like buttons, images, and text.
+2. Implement scroll animations to make elements appear as the user scrolls down the page.
+
+## Medium Changes
+
+### Add Dynamic Content with React State
+1. Create a new interactive FAQ accordion component that expands and collapses answers when clicked.
+2. Add a carousel component to showcase testimonials or case studies.
+
+### Add Interactive Forms and Modals
+1. Enhance the existing contact form by adding form validation and interactive feedback messages.
+2. Create a modal component that displays additional information or images when clicked.
+
+## Hard Changes
+
+### Advanced SEO and Performance Improvements
+1. Implement server-side rendering (SSR) for better SEO and faster initial page loads.
+2. Use code splitting to load only the necessary JavaScript for each page.
+
+### Advanced Interactive Elements
+1. Add complex animations and transitions using libraries like Framer Motion.
+2. Implement real-time features like live chat or notifications using WebSockets.
diff --git a/gatsby-config.js b/gatsby-config.js
index bc530ea7..5b73dc48 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -117,6 +117,37 @@ module.exports = {
             },
         }, // must be after other CSS plugins
         'gatsby-plugin-netlify', // make sure to keep it last in the array
+        {
+            resolve: 'gatsby-plugin-sharp',
+            options: {
+                defaults: {
+                    formats: ['auto', 'webp', 'avif'],
+                    placeholder: 'dominantColor',
+                    quality: 50,
+                    breakpoints: [750, 1080, 1366, 1920],
+                    backgroundColor: 'transparent',
+                    tracedSVGOptions: {},
+                    blurredOptions: {},
+                    jpgOptions: {},
+                    pngOptions: {},
+                    webpOptions: {},
+                    avifOptions: {},
+                },
+            },
+        },
+        {
+            resolve: 'gatsby-transformer-sharp',
+            options: {
+                // The option defaults to true
+                checkSupportedExtensions: true,
+            },
+        },
+        {
+            resolve: 'gatsby-image',
+            options: {
+                // Add any options here
+            },
+        },
     ],
     // for avoiding CORS while developing Netlify Functions locally
     // read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
new file mode 100644
index 00000000..5d577215
--- /dev/null
+++ b/src/components/Carousel.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+const Carousel = ({ items }) => {
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 3000,
+  };
+
+  return (
+    <Slider {...settings}>
+      {items.map((item, index) => (
+        <div key={index}>
+          <h3>{item.title}</h3>
+          <p>{item.content}</p>
+        </div>
+      ))}
+    </Slider>
+  );
+};
+
+Carousel.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      content: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default Carousel;
diff --git a/src/components/ContactUs.js b/src/components/ContactUs.js
index 90ff3448..00723711 100644
--- a/src/components/ContactUs.js
+++ b/src/components/ContactUs.js
@@ -12,12 +12,50 @@ export default class ContactUs extends React.Component {
         super(props);
         this.submitForm = this.submitForm.bind(this);
         this.state = {
-            status: Status.Initial
+            status: Status.Initial,
+            name: '',
+            email: '',
+            message: '',
+            errors: {
+                name: '',
+                email: '',
+                message: ''
+            }
         };
     }
 
+    validateForm() {
+        const { name, email, message } = this.state;
+        let errors = { name: '', email: '', message: '' };
+        let formIsValid = true;
+
+        if (!name) {
+            formIsValid = false;
+            errors.name = 'Name is required';
+        }
+
+        if (!email) {
+            formIsValid = false;
+            errors.email = 'Email is required';
+        } else if (!/\S+@\S+\.\S+/.test(email)) {
+            formIsValid = false;
+            errors.email = 'Email is invalid';
+        }
+
+        if (!message) {
+            formIsValid = false;
+            errors.message = 'Message is required';
+        }
+
+        this.setState({ errors });
+        return formIsValid;
+    }
+
     submitForm(ev) {
         ev.preventDefault();
+        if (!this.validateForm()) {
+            return;
+        }
         const form = ev.target;
         const data = new FormData(form);
         const xhr = new XMLHttpRequest();
@@ -36,7 +74,13 @@ export default class ContactUs extends React.Component {
         this.setState({status: Status.Processing});
     }
 
+    handleChange = (event) => {
+        const { name, value } = event.target;
+        this.setState({ [name]: value });
+    }
+
     render() {
+        const { errors } = this.state;
         return <span>
         <h1 className="has-text-centered is-size-3-mobile is-size-2-desktop has-text-weight-bold">Contact Us</h1>
         <p className="has-text-centered has-text-weight-bold">We respond to 100% of messages. Ask us anything.</p>
@@ -47,20 +91,23 @@ export default class ContactUs extends React.Component {
                 <div>
                     <label className="has-text-weight-bold">Message:</label>
                     <div style={{margin: "auto"}}>
-                        <textarea id="message" name="message" maxLength="6000" rows="7" style={{width: "100%"}}/>
+                        <textarea id="message" name="message" maxLength="6000" rows="7" style={{width: "100%"}} onChange={this.handleChange}/>
+                        {errors.message && <p className="has-text-danger">{errors.message}</p>}
                     </div>
                 </div>
                 <div className="has-text-left has-text-weight-bold" style={{width: "100%", display: "table"}}>
                     <div style={{width: "50%", float: "left"}}>
                         <label>Name:</label>
                         <div>
-                            <input type="text" className="form-control" id="name" name="name" required style={{width: "95%"}}/>
+                            <input type="text" className="form-control" id="name" name="name" required style={{width: "95%"}} onChange={this.handleChange}/>
+                            {errors.name && <p className="has-text-danger">{errors.name}</p>}
                         </div>
                     </div>
                     <div style={{width: "50%", float: "left"}}>
                         <label>Email:</label>
                         <div>
-                            <input type="email" className="form-control" id="email" name="_replyto" required style={{width: "100%"}}/>
+                            <input type="email" className="form-control" id="email" name="_replyto" required style={{width: "100%"}} onChange={this.handleChange}/>
+                            {errors.email && <p className="has-text-danger">{errors.email}</p>}
                         </div>
                     </div>
                 </div>
@@ -88,4 +135,4 @@ export default class ContactUs extends React.Component {
     getSubmitButton() {
         return <button type="submit" className="btn">Send &rarr;</button>;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/FAQAccordion.js b/src/components/FAQAccordion.js
new file mode 100644
index 00000000..b1bf1ad6
--- /dev/null
+++ b/src/components/FAQAccordion.js
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+const FAQAccordion = ({ faqs }) => {
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  const handleToggle = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <div className="faq-accordion">
+      {faqs.map((faq, index) => (
+        <div key={index} className="faq-item">
+          <div className="faq-question" onClick={() => handleToggle(index)}>
+            {faq.question}
+          </div>
+          {activeIndex === index && (
+            <div className="faq-answer">
+              {faq.answer}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FAQAccordion;
diff --git a/src/components/ModalImage.js b/src/components/ModalImage.js
index faab54f8..8dbfaf37 100644
--- a/src/components/ModalImage.js
+++ b/src/components/ModalImage.js
@@ -1,43 +1,57 @@
-import React, {useState} from "react";
-
+import React, { useState } from "react";
 
 export default function ModalImage({
-                                       src,
-                                       altText,
-                                       thumbnailWidth,
-                                       thumbnailHeight,
-                                       modalImageWidth,
-                                       modalImageMaxHeight
-                                   }) {
-    const [isActive, setActive] = useState(false);
-    const toggleActive = () => setActive(!isActive);
-    return (
-        <span className="modal-image">
-      <img src={src} alt={altText}
-           onClick={toggleActive}
-           width={thumbnailWidth || '200'} height={thumbnailHeight} style={{marginLeft: "20px", cursor: "pointer"}}/>
-      <div className={`modal ${isActive ? " is-active" : ''}`}>
-        <div className="modal-background" onClick={() => {
-            setActive(!isActive)
-        }}/>
+  src,
+  altText,
+  thumbnailWidth,
+  thumbnailHeight,
+  modalImageWidth,
+  modalImageMaxHeight,
+  additionalContent
+}) {
+  const [isActive, setActive] = useState(false);
+  const toggleActive = () => setActive(!isActive);
+
+  return (
+    <span className="modal-image">
+      <img
+        src={src}
+        alt={altText}
+        onClick={toggleActive}
+        width={thumbnailWidth || "200"}
+        height={thumbnailHeight}
+        style={{ marginLeft: "20px", cursor: "pointer" }}
+      />
+      <div className={`modal ${isActive ? " is-active" : ""}`}>
+        <div
+          className="modal-background"
+          onClick={() => {
+            setActive(!isActive);
+          }}
+        />
         <div className="modal-content">
           <p className="image">
             <img
-                src={src}
-                alt={altText}
-                style={{
-                    maxWidth: modalImageWidth || '800px',
-                    maxHeight: modalImageMaxHeight || "96vh"
-                }}
+              src={src}
+              alt={altText}
+              style={{
+                maxWidth: modalImageWidth || "800px",
+                maxHeight: modalImageMaxHeight || "96vh"
+              }}
             />
           </p>
+          {additionalContent && (
+            <div className="additional-content">
+              {additionalContent}
+            </div>
+          )}
         </div>
         <button
-            className="modal-close is-large"
-            aria-label="close"
-            onClick={toggleActive}
+          className="modal-close is-large"
+          aria-label="close"
+          onClick={toggleActive}
         />
       </div>
     </span>
-    );
+  );
 }
diff --git a/src/components/Tile.js b/src/components/Tile.js
index 9328a13c..21c910ad 100644
--- a/src/components/Tile.js
+++ b/src/components/Tile.js
@@ -1,35 +1,78 @@
-import React from "react";
+import React, { useState } from "react";
 import ModalImage from "./ModalImage";
 
+export default function Tile({ title, description, detailsLabel, detailsLink, images, htmlSnippets }) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [modalContent, setModalContent] = useState(null);
+
+    const openModal = (content) => {
+        setModalContent(content);
+        setIsModalOpen(true);
+    };
+
+    const closeModal = () => {
+        setIsModalOpen(false);
+        setModalContent(null);
+    };
 
-export default function Tile({title, description, detailsLabel, detailsLink, images, htmlSnippets}) {
     return (
         <div className="tile is-child">
             <article className="box has-background-grey-lighter">
                 <p className="subtitle"><b>{title}</b></p>
                 {description && <p>
                     {description ||
-                    ``
+                        ``
                     }
-                    {<span dangerouslySetInnerHTML={{__html: htmlSnippets}}/>}
+                    {<span dangerouslySetInnerHTML={{ __html: htmlSnippets }} />}
                 </p>}
                 {detailsLink &&
-                <div style={{textAlign: 'right'}}>
-                    <a href={detailsLink}>... more</a>
-                </div>
+                    <div style={{ textAlign: 'right' }}>
+                        <a href={detailsLink}>... more</a>
+                    </div>
                 }
                 {images &&
-                <div>
-                    {description && <br/>}
-                    {images.map(img => <ModalImage src={img.src} altText={img.altText} thumbnailWidth={100}/>)}
-                </div>
+                    <div>
+                        {description && <br />}
+                        {images.map(img => (
+                            <img
+                                key={img.src}
+                                src={img.src}
+                                alt={img.altText}
+                                width={100}
+                                style={{ cursor: "pointer", marginLeft: "20px" }}
+                                onClick={() => openModal(img)}
+                            />
+                        ))}
+                    </div>
                 }
             </article>
+            {isModalOpen && (
+                <div className={`modal ${isModalOpen ? "is-active" : ""}`}>
+                    <div className="modal-background" onClick={closeModal} />
+                    <div className="modal-content">
+                        <p className="image">
+                            <img
+                                src={modalContent.src}
+                                alt={modalContent.altText}
+                                style={{
+                                    maxWidth: '800px',
+                                    maxHeight: "96vh"
+                                }}
+                            />
+                        </p>
+                    </div>
+                    <button
+                        className="modal-close is-large"
+                        aria-label="close"
+                        onClick={closeModal}
+                    />
+                </div>
+            )}
         </div>
     );
 }
 
-export function VerticalTileGroup({children, extraClasses}) {
+export function VerticalTileGroup({ children, extraClasses }) {
     let classes = "tile is-parent is-vertical";
     return (
         <div className={extraClasses ? `${classes} ${extraClasses}` : classes}>
@@ -37,4 +80,3 @@ export function VerticalTileGroup({children, extraClasses}) {
         </div>
     );
 }
-
diff --git a/src/components/seo.js b/src/components/seo.js
index 1e0de91e..2a1f3e36 100644
--- a/src/components/seo.js
+++ b/src/components/seo.js
@@ -69,6 +69,22 @@ function SEO({ description, lang, meta, image: metaImage, title, pathname }) {
                     name: `twitter:description`,
                     content: metaDescription,
                 },
+                {
+                    name: `keywords`,
+                    content: `data collection, reporting platform, open-source, mobile data collection, algorithmic decision support, field service, Avni`,
+                },
+                {
+                    property: `og:url`,
+                    content: canonical,
+                },
+                {
+                    property: `og:site_name`,
+                    content: site.siteMetadata.title,
+                },
+                {
+                    name: `twitter:site`,
+                    content: site.siteMetadata.twitterHandle,
+                },
             ]
                 .concat(
                     metaImage
@@ -124,4 +140,4 @@ SEO.propTypes = {
     pathname: PropTypes.string,
 };
 
-export default SEO
\ No newline at end of file
+export default SEO