diff --git a/app/loading.tsx b/app/loading.tsx
index ad1491e0..7968a68e 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,12 +1,33 @@
-import React from 'react'
-import LoadingSvg from "@/public/assets/ripple-1s-200px.svg"
+import React, { DetailedHTMLProps, HTMLAttributes } from 'react'
+import LoadingSvg from "@/public/assets/Eclipse-1s-200px.svg"
+import Image from 'next/image'
+import Logo from "@/public/logo.png"
 
 function LoadingPlaceholder() {
+
+    const styles = {
+        position: "relative",
+        aspectRatio: "1117 / 393",
+        width: "80vw",
+        maxWidth: "200px"
+    } as DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
     return (
         <div style={{ height: "80vh", width: "100%", margin: "auto", display: "flex" }}>
             <div style={{ margin: "auto", display: "flex", flexDirection: "column" }}>
-                <LoadingSvg style={{ display: "block" }} width={120} height={120} alt="Loading Page Content" />
-                <p style={{ margin: "auto", marginTop: "16px", fontSize: "var(--font-size--h5)", color: "var(--white-25)", fontWeight: 600 }}>Loading...</p>
+
+                <div
+                    style={styles}
+                >
+                    <Image fill alt="Logo" src={Logo} />
+                </div>
+
+                <LoadingSvg width={64} height={82} alt="Loading"/>
+
+                <p style={{ margin: "auto", marginTop: "16px", fontSize: "var(--font-size--h5)", color: "var(--white-50)", fontWeight: 600 }}>
+                    Loading...
+                </p>
+
             </div>
         </div>
     )
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 00000000..daeb7b9f
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,91 @@
+import Link from 'next/link'
+import React, { DetailedHTMLProps, HTMLAttributes } from 'react'
+import errorImg from "@/public/404.jpg"
+import Image from 'next/image'
+
+function Custom404() {
+
+    const errorContainerStyles = {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px 0",
+        margin: "20px auto",
+        minHeight: "80vh",
+        maxHeight: "700px",
+        background: 'var(--white-100)',
+        width: "96%",
+        maxWidth: "720px",
+        borderRadius: "8px",
+        boxShadow: "5px 5px 1px 0px var(--black-25)"
+
+    } as DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+    // h1
+    const errorH1Styles = {
+        fontWeight: "300",
+        color: "#f44336",
+        padding: "16px"
+    } as DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+    const errorHeadingContainerStyles = {
+
+        display: "flex",
+        flexDirection: "column",
+        gap: "32px 0",
+        margin: "auto",
+        textAlign: "center",
+        alignItems: "center"
+
+    } as DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+    const errorButtonContainerStyles = {
+
+        display: "flex",
+        gap: "0 16px",
+        margin: "32px auto",
+        maxWidth: "720px",
+
+    } as DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+    const errorReturnHomeContainerStyles = {
+
+        padding: "16px 8px",
+        border: "1px solid var(--brand-color)",
+        borderRadius: "4px",
+        background: "var(--brand-color)",
+        color: "var(--white-100)",
+        fontWeight: "300"
+
+    }
+
+    return (
+
+        <div style={errorContainerStyles}>
+
+            <div style={errorHeadingContainerStyles}>
+                <h1 style={errorH1Styles}>Page Not Found!</h1>
+
+                <Image src={errorImg} width={240} alt={'Error 404'} />
+
+                <small style={{ fontSize: "10px" }}>
+                    <a style={{ fontSize: "10px" }} href="https://www.freepik.com/free-vector/oops-404-error-with-broken-robot-concept-illustration_13315300.htm#query=error%20404%20svg&position=0&from_view=keyword&track=ais&uuid=355f07d9-a7b2-462e-83b7-a05744e5d953">
+                        Image by storyset
+                    </a>
+                    {" "}on Freepik
+                </small>
+            </div>
+
+            <div style={errorButtonContainerStyles}>
+
+                <Link href={"/"} style={errorReturnHomeContainerStyles}>
+                    Return to Home Page
+                </Link>
+
+            </div>
+
+        </div>
+
+    )
+}
+
+export default Custom404
\ No newline at end of file
diff --git a/public/404.jpg b/public/404.jpg
new file mode 100644
index 00000000..0e37eb5a
Binary files /dev/null and b/public/404.jpg differ
diff --git a/public/assets/Eclipse-1s-200px.svg b/public/assets/Eclipse-1s-200px.svg
new file mode 100644
index 00000000..090c03f8
--- /dev/null
+++ b/public/assets/Eclipse-1s-200px.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<path d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#fe1672" stroke="none">
+  <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="0 50 51;360 50 51"></animateTransform>
+</path>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file