diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 59faebe..32db41d 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -10,7 +10,7 @@ export default function RootLayout({
     <html lang="en">
       <Head>
         <meta charSet="UTF-8"/>
-        <meta name="viewport" content="width=device-width, intial-scale=1.0"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
         <title>Notoria</title>
       </Head>
       <body>
diff --git a/client/src/app/login/page.tsx b/client/src/app/login/page.tsx
index 64bad3e..caba13f 100644
--- a/client/src/app/login/page.tsx
+++ b/client/src/app/login/page.tsx
@@ -1,18 +1,25 @@
 "use client";
 
-import Spline from "@splinetool/react-spline";
-import { useState } from "react";
 import Head from "next/head";
-import { Suspense } from "react";
+import React, { useState } from 'react';
+
+const Spline = React.lazy(() => import("@splinetool/react-spline"));
 
 const Page = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
 
   const handleSubmit = (e: any) => {
     e.preventDefault();
   };
 
+  const handleIsLoading = () => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 400);
+  };
+
   return (
     <>
       <Head>
@@ -28,59 +35,68 @@ const Page = () => {
           crossOrigin="anonymous"
         />
       </Head>
-      <div className="bg-black w-screen h-screen">
+      <div>
         <Spline
-          className="w-screen h-screen fixed"
+          className="absolute top-0 left-0 w-screen h-screen z-[-1]"
           scene="https://draft.spline.design/T7tCI0NsyUBMwcXM/scene.splinecode"
+          onLoad={handleIsLoading}
         />
 
-        <form
-          onSubmit={handleSubmit}
-          className="fixed top-48 left-[525px] max-w-md mx-auto p-4"
-        >
-          <div className="mb-4">
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-white font-custom"
-            >
-              Email:
-            </label>
-            <input
-              type="email"
-              id="email"
-              name="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              className="mt-1 p-2 block w-fill border border-gray-300 rounded-md shadow-sm text-black font-custom"
-            />
-          </div>
-
-          <div className="mb-4">
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-white font-custom"
-            >
-              Password:
-            </label>
-            <input
-              type="password"
-              id="password"
-              name="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              className="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm text-black font-custom"
-            />
+        {isLoading && (
+          <div className="absolute w-full h-full flex justify-center items-center bg-black z-10">
+            <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-white"></div>
           </div>
+        )}
 
-          <button
-            type="submit"
-            className="w-full bg-violet-950 text-white p-2 rounded-md hover:bg-purple-300 font-custom"
+        {!isLoading && (
+          <form
+            onSubmit={handleSubmit}
+            className="absolute z-10 top-[30vh] left-[42vw] p-4"
           >
-            Submit
-          </button>
-        </form>
+            <div className="mb-4">
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium text-white font-custom"
+              >
+                Email:
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="mt-1 p-2 block border border-gray-300 rounded-md shadow-sm text-black font-custom w-[14vw]"
+              />
+            </div>
+
+            <div className="mb-4">
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-white font-custom"
+              >
+                Password:
+              </label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                className="mt-1 p-2 block border border-gray-300 rounded-md shadow-sm text-black font-custom w-[14vw]"
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="w-[14vw] h-[5vh] p-2 rounded-md font-custom transition delay-75 ease-in-out bg-white text-black hover:bg-violet-950 hover:text-white duration-300"
+            >
+              Submit
+            </button>
+          </form>
+        )}
       </div>
     </>
   );
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index 9d2c663..5b3d7df 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import Spline from "@splinetool/react-spline";
 import { useRouter } from "next/navigation";
 import Head from "next/head";
-import { Suspense } from "react";
+import React, { useState } from 'react';
+
+const Spline = React.lazy(() => import("@splinetool/react-spline"));
 
 const Page = () => {
   const router = useRouter();
@@ -11,6 +12,14 @@ const Page = () => {
     router.push("./login");
   };
 
+  const [isLoading, setIsLoading] = useState(true);
+
+  const handleSceneLoad = () => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 250); 
+  };
+
   return (
     <>
       <Head>
@@ -26,20 +35,28 @@ const Page = () => {
           crossOrigin="anonymous"
         />
       </Head>
-      <div className="bg-black min-h-screen">
-        <Suspense fallback={<div>Loading...</div>}>
-          <Spline
-            className="w-screen h-screen fixed"
-            scene="https://draft.spline.design/5UoBCFUOm4z19NTS/scene.splinecode"
-          />
-        </Suspense>
-        <button
-          onClick={handleNavigation}
-          className="w-64 h-14 bg-white fixed right-12 bottom-32 rounded-lg"
-        >
-          <h1 className="text-black font-custom text-xl">Get Started</h1>
-        </button>
-      </div>
+      <div>
+        <Spline
+          className="absolute top-0 left-0 w-screen h-screen z-[-1]"
+          scene="https://draft.spline.design/5UoBCFUOm4z19NTS/scene.splinecode"
+          onLoad={handleSceneLoad}
+        />
+
+        {isLoading && (
+          <div className="absolute w-full h-full flex justify-center items-center bg-black z-10">
+            <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-white"></div>
+          </div>
+        )}
+
+        {!isLoading && (
+          <button
+            onClick={handleNavigation}
+            className="w-[18vw] h-[8vh] absolute right-[42vw] bottom-[48vh] z-10 rounded-lg transition ease-in-out delay-75 bg-white hover:bg-violet-950 duration-300 text-black hover:text-white"
+          >
+            <h1 className="font-custom text-xl">Get Started</h1>
+          </button>
+        )}
+      </div>    
     </>
   );
 };
