diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
new file mode 100644
index 0000000..f506092
--- /dev/null
+++ b/src/components/Toast/Toast.tsx
@@ -0,0 +1,84 @@
+import { breakpoints } from '@/configs/ui.configs'
+import styled from '@emotion/styled'
+import { useEffect, useState } from 'react'
+
+const ToastContainer = styled.div`
+ position: relative;
+ padding: 14px;
+ justify-content: flex-end;
+ width: 100%;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ background: #321504;
+ z-index: 10000;
+
+ color: #fe740c;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.14px;
+
+ span {
+ margin-left: 20px;
+ }
+
+ @media (max-width: ${breakpoints.sm}px) {
+ font-size: 12px;
+ line-height: 16px;
+
+ span {
+ // new line
+ display: block;
+ }
+ }
+`
+
+const Toast: React.FC = () => {
+ const [time, setTime] = useState('DD:HH:mm:ss')
+
+ useEffect(() => {
+ const targetTime = new Date('2024-10-31T17:00:00Z').getTime()
+
+ const formatTime = (timeInSeconds: number) => {
+ const days = Math.floor(timeInSeconds / (3600 * 24))
+ const hours = Math.floor((timeInSeconds % (3600 * 24)) / 3600)
+ const minutes = Math.floor((timeInSeconds % 3600) / 60)
+ const seconds = Math.floor(timeInSeconds % 60)
+
+ return `${String(days).padStart(2, '0')}:${String(hours).padStart(
+ 2,
+ '0',
+ )}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(
+ 2,
+ '0',
+ )}`
+ }
+
+ const updateRemainingTime = () => {
+ const currentTime = new Date().getTime()
+ const remainingTimeInSeconds = Math.floor(
+ (targetTime - currentTime) / 1000,
+ )
+
+ if (remainingTimeInSeconds >= 0) {
+ setTime(formatTime(remainingTimeInSeconds))
+ } else {
+ setTime('00:00:00:00')
+ }
+ }
+
+ const interval = setInterval(updateRemainingTime, 1000)
+
+ return () => clearInterval(interval)
+ }, [])
+
+ return (
+
+ Logos Ordinals Mint Begins October 31, 2024 at 5PM UTC
+ Time remaining: {time}
+
+ )
+}
+
+export default Toast
diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts
new file mode 100644
index 0000000..3d34af2
--- /dev/null
+++ b/src/components/Toast/index.ts
@@ -0,0 +1 @@
+export { default as Toast } from './Toast'
diff --git a/src/layouts/CountdownLayout/CountdownLayout.tsx b/src/layouts/CountdownLayout/CountdownLayout.tsx
index c8e94cf..595e5e5 100644
--- a/src/layouts/CountdownLayout/CountdownLayout.tsx
+++ b/src/layouts/CountdownLayout/CountdownLayout.tsx
@@ -1,6 +1,7 @@
import { Header } from '@/components/Header/Header'
import { Container, Layout } from '@/components/StyledComponents'
import { breakpoints } from '@/configs/ui.configs'
+
import styled from '@emotion/styled'
import React, { PropsWithChildren } from 'react'
diff --git a/src/layouts/DefaultLayout/Default.layout.tsx b/src/layouts/DefaultLayout/Default.layout.tsx
index afda919..503ee79 100644
--- a/src/layouts/DefaultLayout/Default.layout.tsx
+++ b/src/layouts/DefaultLayout/Default.layout.tsx
@@ -2,6 +2,7 @@ import { BackgroundGradient } from '@/components/BackgroundGradient'
import { Footer } from '@/components/Footer'
import { Header } from '@/components/Header/Header'
import { Container, Layout } from '@/components/StyledComponents'
+
import React, { PropsWithChildren } from 'react'
interface DefaultLayoutProps {}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 07f7702..5994de5 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import { Toast } from '@/components/Toast'
import { DefaultLayout } from '@/layouts/DefaultLayout'
import { css, Global } from '@emotion/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -115,6 +116,7 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
}
`}
/>
+
{getLayout()}