diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aef6217..1507266 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,16 +2,25 @@ import { Provider } from "../components/ui/provider"
 import "../styles/globals.css";
 import Navbar from "../components/Navbar";
 import PopNav from "@src/components/PopNav/page";
+import { Inter } from 'next/font/google'
+
+
 export const metadata = {
   title: 'Ballistic Builder',
   description: 'Freedom On',
 }
 
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+
+
 export default function RootLayout(props: { children: React.ReactNode }) {
   const { children } = props;
 
   return (
-    <html suppressHydrationWarning>
+    <html suppressHydrationWarning className={inter.className}>
       <body className="bg-slate-200	">
         <Provider>      
           <Navbar />
diff --git a/src/app/register/layout.tsx b/src/app/register/layout.tsx
new file mode 100644
index 0000000..74476b0
--- /dev/null
+++ b/src/app/register/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Ballistic Bu8ilder',
+  description: 'Generated by Forward Group, LLC',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index b7be357..d445b88 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -44,75 +44,125 @@ export default function SignupPage() {
   };
 
   return (
-    <div className="p-4 pt-16 mx-auto max-w-md">
-      <div className="bg-white rounded-lg shadow-md p-6">
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {error && (
-            <div className="bg-red-50 text-red-500 p-3 rounded-md">{error}</div>
-          )}
-          
-          <div>
+    <div className="flex min-h-screen flex-1">
+        <div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
+          <div className="mx-auto w-full max-w-sm lg:w-96">
             <div>
-              <h1>Sign Up</h1>
-              <p>Create an account to get started building.</p>
+              <img
+                alt="Ballistic Builder"
+                src="https://tailwindui.com/plus/img/logos/mark.svg?color=lime&shade=600"
+                className="h-10 w-auto"
+              />
+              <h2 className="mt-8 text-2xl/9 font-bold tracking-tight text-gray-900">Sign in to your account</h2>
+              <p className="mt-2 text-sm/6 text-gray-500">
+                Not a member?{' '}
+                <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
+                  Create An Account
+                </a>
+              </p>
             </div>
-            <label className="block text-sm font-medium text-gray-700">Name</label>
-            <input
-              type="text"
-              required
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-              value={formData.name}
-              onChange={(e) => setFormData({...formData, name: e.target.value})}
-            />
-          </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700">Email</label>
-            <input
-              type="email"
-              required
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-              value={formData.email}
-              onChange={(e) => setFormData({...formData, email: e.target.value})}
-            />
-          </div>
+            <div className="mt-10">
+              <div>
+                <form action="#" method="POST" className="space-y-6">
+                  <div>
+                    <label htmlFor="email" className="block text-sm/6 font-medium text-gray-900">
+                      Email address
+                    </label>
+                    <div className="mt-2">
+                      <input
+                        id="email"
+                        name="email"
+                        type="email"
+                        required
+                        autoComplete="email"
+                        className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                      />
+                    </div>
+                  </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700">Password</label>
-            <input
-              type="password"
-              required
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-              value={formData.password}
-              onChange={(e) => setFormData({...formData, password: e.target.value})}
-            />
-          </div>
+                  <div>
+                    <label htmlFor="password" className="block text-sm/6 font-medium text-gray-900">
+                      Password
+                    </label>
+                    <div className="mt-2">
+                      <input
+                        id="password"
+                        name="password"
+                        type="password"
+                        required
+                        autoComplete="current-password"
+                        className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+                      />
+                    </div>
+                  </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700">Confirm Password</label>
-            <input
-              type="password"
-              required
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
-              value={formData.confirmPassword}
-              onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})}
-            />
-          </div>
+                  <div className="flex items-center justify-between">
+                    <div className="flex gap-3">
+                      <div className="flex h-6 shrink-0 items-center">
+                        <div className="group grid size-4 grid-cols-1">
+                          <input
+                            id="remember-me"
+                            name="remember-me"
+                            type="checkbox"
+                            className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                          />
+                          <svg
+                            fill="none"
+                            viewBox="0 0 14 14"
+                            className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                          >
+                            <path
+                              d="M3 8L6 11L11 3.5"
+                              strokeWidth={2}
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              className="opacity-0 group-has-[:checked]:opacity-100"
+                            />
+                            <path
+                              d="M3 7H11"
+                              strokeWidth={2}
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              className="opacity-0 group-has-[:indeterminate]:opacity-100"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <label htmlFor="remember-me" className="block text-sm/6 text-gray-900">
+                        Remember me
+                      </label>
+                    </div>
 
-          <button
-            type="submit"
-            className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
-          >
-            Create Account
-          </button>
-        </form>
-        <div>OR</div>
-          <button
-          type='button'
-          >
-            Login 
-          </button>
+                    <div className="text-sm/6">
+                      <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
+                        Forgot password?
+                      </a>
+                    </div>
+                  </div>
+
+                  <div>
+                    <button
+                      type="submit"
+                      className="flex w-full justify-center rounded-md bg-lime-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-lime-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-800"
+                    >
+                      Sign in
+                    </button>
+                  </div>
+                </form>
+              </div>
+
+              
+            </div>
+          </div>
+        </div>
+        <div className="relative hidden w-0 flex-1 lg:block">
+          <img
+            alt=""
+            src="https://images.unsplash.com/photo-1682876747535-a13486e9a726?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            className="absolute inset-0 size-full object-cover"
+          />
+        </div>
       </div>
-    </div>
   );
 } 
\ No newline at end of file
