diff --git a/package-lock.json b/package-lock.json
index 2e814704..cf7e0dcc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@uiw/codemirror-theme-nord": "^4.21.21",
         "@uiw/react-codemirror": "^4.21.21",
         "bootstrap": "^5.3.2",
+        "date-fns": "^3.6.0",
         "eslint-config-next": "^14.0.2",
         "fast-xml-parser": "^4.3.3",
         "firebase": "^10.6.0",
@@ -1634,6 +1635,22 @@
         "url": "https://mockoon.com/sponsor-us/"
       }
     },
+    "node_modules/@mockoon/cli/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/@mockoon/cli/node_modules/jsonpath-plus": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-7.2.0.tgz",
@@ -5398,6 +5415,22 @@
         "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
       }
     },
+    "node_modules/concurrently/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/config-chain": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
@@ -5767,19 +5800,12 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/date-fns"
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
       }
     },
     "node_modules/debug": {
@@ -17410,6 +17436,15 @@
             "xml-js": "1.6.11"
           }
         },
+        "date-fns": {
+          "version": "2.30.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+          "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.21.0"
+          }
+        },
         "jsonpath-plus": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-7.2.0.tgz",
@@ -20480,6 +20515,17 @@
         "supports-color": "^8.1.1",
         "tree-kill": "^1.2.2",
         "yargs": "^17.7.2"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "2.30.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+          "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.21.0"
+          }
+        }
       }
     },
     "config-chain": {
@@ -20786,13 +20832,9 @@
       "dev": true
     },
     "date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.21.0"
-      }
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
     },
     "debug": {
       "version": "4.3.4",
diff --git a/package.json b/package.json
index 389ef984..9252dc6d 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@uiw/codemirror-theme-nord": "^4.21.21",
     "@uiw/react-codemirror": "^4.21.21",
     "bootstrap": "^5.3.2",
+    "date-fns": "^3.6.0",
     "eslint-config-next": "^14.0.2",
     "fast-xml-parser": "^4.3.3",
     "firebase": "^10.6.0",
diff --git a/pages/tools/date-unix-timestamp-converter-formatter.tsx b/pages/tools/date-unix-timestamp-converter-formatter.tsx
new file mode 100644
index 00000000..f55dc602
--- /dev/null
+++ b/pages/tools/date-unix-timestamp-converter-formatter.tsx
@@ -0,0 +1,343 @@
+import {
+  format,
+  setDate,
+  setHours,
+  setMinutes,
+  setMonth,
+  setSeconds,
+  setYear
+} from 'date-fns';
+import { FunctionComponent, useState } from 'react';
+import Hero from '../../components/hero';
+import Meta from '../../components/meta';
+import Layout from '../../layout/layout';
+
+const DateConverter: FunctionComponent = function () {
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [customFormat, setCustomFormat] = useState('yyyy-MM-dd');
+
+  const formatDate = (date: Date, pattern: string) => {
+    try {
+      return format(date, pattern, {
+        useAdditionalDayOfYearTokens: true,
+        useAdditionalWeekYearTokens: true
+      });
+    } catch (error) {}
+  };
+
+  return (
+    <Layout footerBanner='download'>
+      <Meta
+        title={'Date and unix timestamp converter and formatter'}
+        description='Convert a date to and from a unix timestamp and view the date in different formats (ISO 8601, RFC 3339, RFC 822/2822). You can also format the date in a custom format using the date-fns library patterns.'
+      />
+      <Hero
+        title='<span class="text-primary">Date and unix timestamp</span> converter and formatter'
+        subtitle='Convert a date to and from a unix timestamp and view the date in different formats (ISO 8601, RFC 3339, RFC 822/2822). You can also format the date in a custom format using the date-fns library patterns.'
+      />
+      <section className='pb-5 pb-lg-10'>
+        <div className='container'>
+          <div className='row'>
+            <div className='col-6'>
+              <div className='d-flex'>
+                <div className='me-1'>
+                  <label htmlFor='dateYear'>Year</label>
+                  <input
+                    type='number'
+                    id='dateYear'
+                    className='form-control border-secondary'
+                    value={formatDate(currentDate, 'yyyy')}
+                    onChange={(event) => {
+                      try {
+                        setCurrentDate(
+                          setYear(currentDate, parseInt(event.target.value))
+                        );
+                      } catch (error) {}
+                    }}
+                  />
+                </div>
+                <div className='me-1'>
+                  <label htmlFor='dateMonth'>Month</label>
+                  <input
+                    type='number'
+                    id='dateMonth'
+                    className='form-control border-secondary'
+                    value={formatDate(currentDate, 'MM')}
+                    onChange={(event) => {
+                      try {
+                        setCurrentDate(
+                          setMonth(currentDate, parseInt(event.target.value))
+                        );
+                      } catch (error) {}
+                    }}
+                  />
+                </div>
+                <div className='me-1'>
+                  <label htmlFor='dateDay'>Day</label>
+                  <input
+                    type='number'
+                    id='dateDay'
+                    className='form-control border-secondary'
+                    value={formatDate(currentDate, 'dd')}
+                    onChange={(event) => {
+                      try {
+                        setCurrentDate(
+                          setDate(currentDate, parseInt(event.target.value))
+                        );
+                      } catch (error) {}
+                    }}
+                  />
+                </div>
+                <div className='me-1'>
+                  <label htmlFor='dateHour'>Hour (24h)</label>
+                  <input
+                    type='number'
+                    id='dateHour'
+                    className='form-control border-secondary'
+                    value={formatDate(currentDate, 'HH')}
+                    onChange={(event) => {
+                      try {
+                        setCurrentDate(
+                          setHours(currentDate, parseInt(event.target.value))
+                        );
+                      } catch (error) {}
+                    }}
+                  />
+                </div>
+                <div className='me-1'>
+                  <label htmlFor='dateMinutes'>Minutes</label>
+                  <input
+                    type='number'
+                    id='dateMinutes'
+                    className='form-control border-secondary'
+                    value={formatDate(currentDate, 'mm')}
+                    onChange={(event) => {
+                      try {
+                        setCurrentDate(
+                          setMinutes(currentDate, parseInt(event.target.value))
+                        );
+                      } catch (error) {}
+                    }}
+                  />
+                </div>
+                <div>
+                  <label htmlFor='dateSeconds'>Seconds</label>
+                  <input
+                    type='number'
+                    id='dateSeconds'
+                    className='form-control border-secondary'
+                    value={formatDate(currentDate, 'ss')}
+                    onChange={(event) => {
+                      try {
+                        setCurrentDate(
+                          setSeconds(currentDate, parseInt(event.target.value))
+                        );
+                      } catch (error) {}
+                    }}
+                  />
+                </div>
+              </div>
+              <div className='mt-6'>
+                <label htmlFor='unixS'>Unix timestamp (s)</label>
+                <input
+                  type='number'
+                  id='unixS'
+                  className='form-control border-secondary'
+                  placeholder=''
+                  value={formatDate(currentDate, 't')}
+                  onChange={(event) => {
+                    try {
+                      setCurrentDate(
+                        new Date(parseInt(event.target.value) * 1000)
+                      );
+                    } catch (error) {}
+                  }}
+                />
+              </div>
+              <div className='mt-6'>
+                <label htmlFor='unixS'>Unix timestamp (ms)</label>
+                <input
+                  type='number'
+                  id='unixS'
+                  className='form-control border-secondary'
+                  placeholder=''
+                  value={formatDate(currentDate, 'T')}
+                  onChange={(event) => {
+                    try {
+                      setCurrentDate(new Date(parseInt(event.target.value)));
+                    } catch (error) {}
+                  }}
+                />
+              </div>
+            </div>
+            <div className='col-6'>
+              <div>
+                <label htmlFor='customFormat'>
+                  Custom{' '}
+                  <a
+                    href='https://date-fns.org/v3.6.0/docs/format'
+                    target='_blank'
+                  >
+                    date-fns format
+                  </a>
+                  :
+                </label>
+                <input
+                  type='text'
+                  id='customFormat'
+                  className='form-control border-secondary'
+                  placeholder='e.g. yyyy-MM-dd HH:mm:ss'
+                  value={customFormat}
+                  onChange={(event) => {
+                    try {
+                      setCustomFormat(event.target.value);
+                    } catch (error) {}
+                  }}
+                />
+                <h4 className='mt-2'>
+                  Result:{' '}
+                  {customFormat ? formatDate(currentDate, customFormat) : ''}
+                </h4>
+              </div>
+              <table className='table mt-8'>
+                <thead>
+                  <tr>
+                    <th>Format</th>
+                    <th>Result</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <a
+                        href='https://en.wikipedia.org/wiki/ISO_8601'
+                        target='_blank'
+                      >
+                        ISO 8601, RFC 3339
+                      </a>
+                    </td>
+                    <td suppressHydrationWarning>
+                      {formatDate(currentDate, "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")}
+                      <br />
+                      <span className='fs-sm'>
+                        date-fns format:{' '}
+                        <code>
+                          <small>yyyy-MM-dd'T'HH:mm:ss.SSSxxx</small>
+                        </code>
+                      </span>
+                    </td>
+                    <td></td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <a
+                        href='https://datatracker.ietf.org/doc/rfc822/'
+                        target='_blank'
+                      >
+                        RFC 822/2822
+                      </a>
+                    </td>
+                    <td suppressHydrationWarning>
+                      {formatDate(currentDate, 'EEE, dd MMM yyyy HH:mm:ss xx')}
+                      <br />
+                      <span className='fs-sm'>
+                        date-fns format:{' '}
+                        <code>
+                          <small>EEE, dd MMM yyyy HH:mm:ss xx</small>
+                        </code>
+                      </span>
+                    </td>
+                  </tr>
+
+                  <tr>
+                    <td>Unix timestamp (s)</td>
+                    <td suppressHydrationWarning>
+                      {Math.floor(currentDate.getTime() / 1000)}
+                      <br />
+                      <span className='fs-sm'>
+                        date-fns format:{' '}
+                        <code>
+                          <small>t</small>
+                        </code>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Unix timestamp (ms)</td>
+                    <td suppressHydrationWarning>
+                      {currentDate.getTime()}
+                      <br />
+                      <span className='fs-sm'>
+                        date-fns format:{' '}
+                        <code>
+                          <small>T</small>
+                        </code>
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className='pb-5 pb-lg-10'>
+        <div className='container'>
+          <div className='row'>
+            <div className='col-12'>
+              <h3 className='mt-6 fw-medium'>About this tool</h3>
+              <p>
+                This tool allows you to convert a date to a unix timestamp
+                (seconds or milliseconds) and vice versa, and view the date in
+                different formats (ISO 8601, RFC 3339, RFC 822/2822). You can
+                also format the date in a custom format using the{' '}
+                <a
+                  href='https://date-fns.org/v3.6.0/docs/format'
+                  target='_blank'
+                >
+                  date-fns library format
+                </a>
+                .
+              </p>
+              <h3 className='mt-6 fw-medium'>About Unix timestamps</h3>
+              <p>
+                A Unix timestamp (or epoch time) is the number of seconds or
+                milliseconds that have elapsed since 00:00:00 Coordinated
+                Universal Time (UTC), Thursday, 1 January 1970. It is used in
+                many programming languages and systems to represent dates and
+                times.
+                <br />
+                <br />
+                Unix timestamps are often used in APIs to represent dates and
+                times because they are easy to work with and can be converted to
+                any time zone.
+              </p>
+              <h3 className='mt-6 fw-medium'>About date-fns library</h3>
+              <p>
+                <strong>date-fns</strong> is a modern JavaScript date utility
+                library that provides comprehensive, yet simple and consistent
+                toolset for manipulating JavaScript dates in a browser or
+                Node.js environment.
+                <br />
+                <br />
+                It is used in this tool to format dates and unix timestamps in
+                different formats using predefined patterns. You can find the
+                list of available patterns in the{' '}
+                <a
+                  href='https://date-fns.org/v3.6.0/docs/format'
+                  target='_blank'
+                >
+                  date-fns documentation
+                </a>
+                .
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </Layout>
+  );
+};
+
+export default DateConverter;
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
index 39963ac7..e4e5bac8 100644
--- a/pages/tools/index.tsx
+++ b/pages/tools/index.tsx
@@ -59,6 +59,19 @@ const tools = [
       'Count the number of characters, words, and lines in your text',
     links: [{ src: '/tools/string-length-word-counter/', text: 'Count' }],
     imageSrc: '/images/illustrations/string-length-word-counter.svg'
+  },
+  {
+    title: 'Date and unix timestamp converter and formatter',
+    description:
+      'Convert and format dates and unix timestamps online using date-fns library',
+    links: [
+      {
+        src: '/tools/date-unix-timestamp-converter-formatter/',
+        text: 'Convert and format'
+      }
+    ],
+    imageSrc:
+      '/images/illustrations/date-unix-timestamp-converter-formatter.svg'
   }
 ];
 
diff --git a/public/images/illustrations/date-unix-timestamp-converter-formatter.svg b/public/images/illustrations/date-unix-timestamp-converter-formatter.svg
new file mode 100644
index 00000000..7a98aec3
--- /dev/null
+++ b/public/images/illustrations/date-unix-timestamp-converter-formatter.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-42299,-60816)">
+        <g id="Sponsors">
+        </g>
+        <g id="date-unix-converter" serif:id="date unix converter" transform="matrix(0.998004,0,0,0.998004,18043.5,81.4691)">
+            <rect x="24304" y="60856" width="2004" height="2004" style="fill:none;"/>
+            <g id="event_repeat_black_24dp.svg" transform="matrix(37.9978,0,0,37.9978,25306,61858)">
+                <g transform="matrix(1,0,0,1,-12,-12)">
+                    <g>
+                        <rect x="0" y="0" width="24" height="24" style="fill:none;"/>
+                    </g>
+                    <g>
+                        <path d="M21,12L21,6C21,4.9 20.1,4 19,4L18,4L18,2L16,2L16,4L8,4L8,2L6,2L6,4L5,4C3.9,4 3,4.9 3,6L3,20C3,21.1 3.9,22 5,22L12,22L12,20L5,20L5,10L19,10L19,12L21,12Z" style="fill:rgb(51,94,234);fill-rule:nonzero;"/>
+                        <path d="M22.69,18.37L23.83,17.37L22.83,15.64L21.38,16.13C21.06,15.86 20.7,15.65 20.3,15.5L20,14L18,14L17.7,15.49C17.3,15.64 16.94,15.85 16.62,16.12L15.17,15.63L14.17,17.36L15.31,18.36C15.23,18.86 15.23,19.12 15.31,19.62L14.17,20.62L15.17,22.35L16.62,21.86C16.94,22.13 17.3,22.34 17.7,22.49L18,24L20,24L20.3,22.51C20.7,22.36 21.06,22.15 21.38,21.88L22.83,22.37L23.83,20.64L22.69,19.64C22.77,19.13 22.77,18.87 22.69,18.37ZM19,21C17.9,21 17,20.1 17,19C17,17.9 17.9,17 19,17C20.1,17 21,17.9 21,19C21,20.1 20.1,21 19,21Z" style="fill:rgb(55,184,135);fill-rule:nonzero;"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>