diff --git a/Dockerfile b/Dockerfile
index b1ff4b3..f6d0e17 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:17-buster-slim AS base
+FROM node:18-bullseye AS base
 
 MAINTAINER togglecorp info@togglecorp.com
 
@@ -8,6 +8,8 @@ RUN apt-get update -y \
 
 WORKDIR /code
 
+RUN git config --global --add safe.directory /code
+
 FROM base AS full-client
 
 COPY ./package.json ./yarn.lock /code/
diff --git a/app/Base/components/Navbar/index.tsx b/app/Base/components/Navbar/index.tsx
index 578768c..57ff616 100644
--- a/app/Base/components/Navbar/index.tsx
+++ b/app/Base/components/Navbar/index.tsx
@@ -233,6 +233,12 @@ function Navbar(props: Props) {
                         )}
                     </div>
                 )}
+                <SmartButtonLikeLink
+                    route={routes.donations}
+                    variant="general"
+                >
+                    {strings.donationsButtonLabel}
+                </SmartButtonLikeLink>
                 <SelectInput
                     nonClearable
                     variant="general"
diff --git a/app/Base/components/Routes/index.tsx b/app/Base/components/Routes/index.tsx
index 1c2c392..7a9f6cc 100644
--- a/app/Base/components/Routes/index.tsx
+++ b/app/Base/components/Routes/index.tsx
@@ -45,6 +45,12 @@ function Routes(props: Props) {
                 >
                     {routes.login.load({ className })}
                 </Route>
+                <Route
+                    exact
+                    path={routes.donations.path}
+                >
+                    {routes.donations.load({ className })}
+                </Route>
                 <Route
                     exact
                     path={routes.register.path}
diff --git a/app/Base/configs/lang.ts b/app/Base/configs/lang.ts
index b4dc3b9..2cccd8c 100644
--- a/app/Base/configs/lang.ts
+++ b/app/Base/configs/lang.ts
@@ -72,6 +72,10 @@ export const navbar = {
         en: 'Search all books',
         ne: 'किताब खोज्नुहोस्',
     },
+    donationsButtonLabel: {
+        en: 'Donations',
+        ne: 'योगदान',
+    },
     signUpButtonLabel: {
         en: 'Register',
         ne: 'दर्ता',
@@ -118,6 +122,57 @@ export const navbar = {
     },
 };
 
+export const donations = {
+    donationsHeading: {
+        en: 'Donations',
+        ne: 'योगदान',
+    },
+    donationsDescription1: {
+        en: 'At Kitab Bazar, we believe in the power of early reading to shape young minds. Driven by the importance of early literacy and aligned with the government-mandated PMEC standard, we are dedicated to ensuring that every grade in schools has book corners filled with enriching supplementary materials.',
+        ne: 'किताब बजारमा, हामी युवा दिमागलाई आकार दिन प्रारम्भिक पढाइको शक्तिमा विश्वास गर्छौं। प्रारम्भिक साक्षरताको महत्त्वबाट सञ्चालित र सरकारले-अनिवार्य PMEC मापदण्डसँग पङ्क्तिबद्ध, हामी विद्यालयहरूमा प्रत्येक कक्षामा पूरक सामग्रीहरूले भरिएको पुस्तक कुनाहरू छन् भनी सुनिश्चित गर्न समर्पित छौं।',
+    },
+    donationsDescription2: {
+        en: 'With your donation, Kitab Bazar can ensure that every school, even in remote areas, has book corners filled with stories, poems, and songs that inspire a love for reading. Your contribution fuels the future of young minds.',
+        ne: 'तपाईंको दानले, किताब बजारले दुर्गम क्षेत्रहरूमा समेत प्रत्येक विद्यालयमा कथा, कविता र गीतहरूले भरिएको पुस्तक कुनाहरू छन् भनी सुनिश्चित गर्न सक्छ जसले पढ्नको लागि प्रेमलाई प्रेरित गर्दछ। तपाईंको योगदानले युवा दिमागको भविष्यलाई इन्धन गर्छ ।',
+    },
+    donationsDescription3: {
+        en: 'Thank you for your generosity!',
+        ne: 'तपाईंको उदारता को लागी धन्यवाद!',
+    },
+    donateMoneyHeading: {
+        en: 'Donate',
+        ne: 'योगदान',
+    },
+    donateMoneyDescription: {
+        en: 'To make the donation, please follow this link.',
+        ne: 'दान गर्न, कृपया यो लिङ्क पछ्याउनुहोस्।',
+    },
+    donateSecondHandBooksHeading: {
+        en: 'Donate Second Hand Books',
+        ne: 'दोस्रो हात पुस्तकहरू दान गर्नुहोस्',
+    },
+    donateSecondHandBooksDescription: {
+        en: 'Please fill the form below to donate second hand books.',
+        ne: 'सेकेन्ड ह्यान्ड पुस्तकहरू दान गर्न कृपया तलको फारम भर्नुहोस्।',
+    },
+    donateBooksFromWebsiteHeading: {
+        en: 'Donate Books from Website',
+        ne: 'वेबसाइटबाट पुस्तकहरू दान गर्नुहोस्',
+    },
+    donateBooksFromWebsiteDescription: {
+        en: 'Follow the general book purchasing process and contact us for further confirmation',
+        ne: 'सामान्य पुस्तक खरिद प्रक्रिया पछ्याउनुहोस् र थप पुष्टिको लागि हामीलाई सम्पर्क गर्नुहोस्',
+    },
+    linkToTheFormButtonLabel: {
+        en: 'Link to the Form',
+        ne: 'फारमको लिङ्क',
+    },
+    contactUsAt: {
+        en: 'Contact us at: +977 9762416156',
+        ne: 'हामीलाई सम्पर्क गर्नुहोस्: +977 9762416156',
+    },
+};
+
 export const login = {
     loginHeaderLabel: {
         en: 'Login',
diff --git a/app/Base/configs/routes.tsx b/app/Base/configs/routes.tsx
index 2515012..9044ca3 100644
--- a/app/Base/configs/routes.tsx
+++ b/app/Base/configs/routes.tsx
@@ -33,6 +33,15 @@ const login = wrap({
     },
     visibility: 'is-not-authenticated',
 });
+const donations = wrap({
+    path: '/donations/',
+    title: `${title} - Donations`,
+    navbarVisibility: true,
+    component: lazy(() => import('#views/Donations')),
+    componentProps: {
+    },
+    visibility: 'is-anything',
+});
 const forgotPassword = wrap({
     path: '/forgot-password/',
     title: `${title} - Forgot Password`,
@@ -140,6 +149,7 @@ const eBook = wrap({
 const routes = {
     register,
     login,
+    donations,
     home,
     myProfile,
     wishList,
diff --git a/app/resources/img/donate-books.png b/app/resources/img/donate-books.png
new file mode 100644
index 0000000..cf9c897
Binary files /dev/null and b/app/resources/img/donate-books.png differ
diff --git a/app/resources/img/donate-website.png b/app/resources/img/donate-website.png
new file mode 100644
index 0000000..430467e
Binary files /dev/null and b/app/resources/img/donate-website.png differ
diff --git a/app/resources/img/money.png b/app/resources/img/money.png
new file mode 100644
index 0000000..6531493
Binary files /dev/null and b/app/resources/img/money.png differ
diff --git a/app/views/Donations/index.tsx b/app/views/Donations/index.tsx
new file mode 100644
index 0000000..f054e87
--- /dev/null
+++ b/app/views/Donations/index.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+import {
+    Container,
+    Heading,
+    ButtonLikeLink,
+} from '@the-deep/deep-ui';
+import { IoOpenOutline } from 'react-icons/io5';
+
+import { donations } from '#base/configs/lang';
+import DonateMoney from '#resources/img/money.png';
+import DonateBooks from '#resources/img/donate-books.png';
+import DonateWebsite from '#resources/img/donate-website.png';
+import useTranslation from '#base/hooks/useTranslation';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+}
+
+function Donations(props: Props) {
+    const { className } = props;
+    const strings = useTranslation(donations);
+
+    return (
+        <div className={_cs(styles.about, className)}>
+            <div className={styles.pageContent}>
+                <Container
+                    className={styles.donationsText}
+                    heading={strings.donationsHeading}
+                >
+                    <p>
+                        {strings.donationsDescription1}
+                    </p>
+                    <p>
+                        {strings.donationsDescription2}
+                    </p>
+                    <p>
+                        {strings.donationsDescription3}
+                    </p>
+                </Container>
+                <div className={styles.donateCards}>
+                    <div className={styles.donateItem}>
+                        <img
+                            className={styles.icon}
+                            src={DonateMoney}
+                            alt="logo"
+                        />
+                        <Heading
+                            size="extraSmall"
+                        >
+                            {strings.donateMoneyHeading}
+                        </Heading>
+                        <div className={styles.description}>
+                            {strings.donateMoneyDescription}
+                        </div>
+                        <div className={styles.endWrapper}>
+                            <ButtonLikeLink
+                                to="https://forms.gle/iAPt8skLHCcCLY6w7"
+                                actions={<IoOpenOutline />}
+                                className={styles.button}
+                                variant="tertiary"
+                            >
+                                {strings.linkToTheFormButtonLabel}
+                            </ButtonLikeLink>
+                        </div>
+                    </div>
+                    <div className={styles.donateItem}>
+                        <img
+                            className={styles.icon}
+                            src={DonateBooks}
+                            alt="logo"
+                        />
+                        <Heading
+                            size="extraSmall"
+                        >
+                            {strings.donateSecondHandBooksHeading}
+                        </Heading>
+                        <div className={styles.description}>
+                            {strings.donateSecondHandBooksDescription}
+                        </div>
+                        <div className={styles.endWrapper}>
+                            <ButtonLikeLink
+                                to="https://forms.gle/2eLYuiDxRnMemgc99"
+                                actions={<IoOpenOutline />}
+                                className={styles.button}
+                                variant="tertiary"
+                            >
+                                {strings.linkToTheFormButtonLabel}
+                            </ButtonLikeLink>
+                        </div>
+                    </div>
+                    <div className={styles.donateItem}>
+                        <img
+                            className={styles.icon}
+                            src={DonateWebsite}
+                            alt="logo"
+                        />
+                        <Heading
+                            size="extraSmall"
+                        >
+                            {strings.donateBooksFromWebsiteHeading}
+                        </Heading>
+                        <div className={styles.description}>
+                            {strings.donateBooksFromWebsiteDescription}
+                        </div>
+                        <div className={styles.endWrapper}>
+                            <div className={styles.description}>
+                                {strings.contactUsAt}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Donations;
diff --git a/app/views/Donations/styles.css b/app/views/Donations/styles.css
new file mode 100644
index 0000000..85d0be0
--- /dev/null
+++ b/app/views/Donations/styles.css
@@ -0,0 +1,73 @@
+.about {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: var(--dui-spacing-extra-large);
+
+    .page-content {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        max-width: var(--kitab-page-max-width);
+        gap: var(--dui-spacing-medium);
+
+        * {
+            overflow: unset;
+        }
+
+        .donations-text {
+            background-color: unset;
+            padding: var(--dui-spacing-large);
+        }
+
+        .donate-cards {
+            display: grid;
+            grid-gap: var(--dui-spacing-large);
+            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+            padding: var(--dui-spacing-large);
+            width: 100%;
+
+            .donate-item {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                justify-content: flex-end;
+                gap: var(--dui-spacing-large);
+                border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
+                border-radius: var(--kitab-radius-border);
+                background-color: var(--dui-color-foreground);
+                padding: var(--dui-spacing-large);
+                min-width: 15rem;
+                height: 18rem;
+
+                .icon {
+                    width: 5rem;
+                    height: 5rem;
+                    object-fit: contain;
+                }
+
+                .description {
+                    text-align: center;
+                    color: var(--dui-color-label);
+                    font-size: var(--dui-font-size-medium);
+                }
+
+                .end-wrapper {
+                    display: flex;
+                    align-items: flex-end;
+                    flex-grow: 1;
+
+                    .button {
+                        justify-self: flex-end;
+                    }
+                }
+            }
+
+            @media (max-width: 435px) {
+                .donate-item {
+                    min-width: 13rem;
+                }
+            }
+        }
+    }
+}