diff --git a/client/src/components/Login.jsx b/client/src/components/Login.jsx
index 9f87eed..f47bcde 100644
--- a/client/src/components/Login.jsx
+++ b/client/src/components/Login.jsx
@@ -1,28 +1,56 @@
-import React from 'react'
+import React, { useState } from 'react';
 
 const Login = () => {
+  const [isLogin, setIsLogin] = useState(true);
+
+  const toggleCard = () => {
+    setIsLogin(!isLogin);
+  };
+
   return (
-    <div className="flex w-full h-screen">login
-        <div className = "w-full flex items-center justify-center lg:w-1/2">
-{/* form */}
-        <h1>Wlcome Back</h1>
-        <p>Welcome back! Please sign in.</p>
-        <div>
+    <div className="flex w-full h-screen">
+      <div className="w-full flex items-center justify-center lg:w-1/2">
+        <div className='bg-white px-10 py-20 rounded-3xl border-gray-200'>
+          <h1 className='text-5xl font-semibold'>Welcome {isLogin ? 'Back' : 'New User'}</h1>
+          <p className='font-medium text-lg text-gray-500 mt-4'>{isLogin ? 'Welcome back! Please sign in.' : 'Join us today! Create an account.'}</p>
+          <div className="mt-8">
+            <label className='text-lg font-medium'>Email</label>
+            <input className='w-full bottom-2 border border-gray-500 rounded-xl p-4 mt-1 bg-transparent' placeholder='Enter your email'></input>
+          </div>
+          <div className="mt-8">
+            <label className='text-lg font-medium'>Password</label>
+            <input className='w-full bottom-2 rounded-xl p-4 mt-1 bg-transparent border border-gray-500' placeholder='Enter your password'></input>
+          </div>
+          <div className='mt-8 flex justify-between items-center'>
             <div>
-                <label>Email</label>
-                <input></input>
-            </div>
-        </div>
-        </div>
-        <div className="hidden relative w-1/2 h-full lg:flex items-center justify-center bg-gray-200">
-        <div className="w-60 h-60 rounded-full bg-gradient-to-tr from-violet-500 to-pink-500 animate-spin"> 
-        <div className="w-full h-1/2 absolute bottom-0 bg-white/10" >
-
-            </div>
+              <input type='checkbox' id="remember" />
+              <label className="ml-2 font-medium text-base" htmlFor="remember">Remember for 30 days</label>
             </div>
+            {isLogin ? (
+              <button className='ml-4 font-medium text-base text-violet-500'>Forgot Password</button>
+            ) : null}
+          </div>
+          <div className='mt-8 flex flex-col gap-y-4'>
+            <button
+              className='active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out transition-all py-3 rounded-xl bg-violet-500 text-white text-lg font-bold'
+            >
+              {isLogin ? 'Sign in' : 'Sign up'}
+            </button>
+            <button
+              onClick={toggleCard}
+              className='active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out transition-all py-3 rounded-xl border-2 border-gray-200'
+            >
+              {isLogin ? 'Sign up' : 'Back to Login'}
+            </button>
+          </div>
         </div>
+      </div>
+      <div className="hidden relative w-1/2 h-full lg:flex items-center justify-center bg-gray-200">
+        <div className="w-60 h-60 rounded-full bg-gradient-to-tr from-violet-500 to-pink-500 animate-bounce" />
+        <div className="w-full h-1/2 absolute bottom-0 bg-white/10 backdrop-blur-lg" />
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default Login
\ No newline at end of file
+export default Login;
diff --git a/server/aiAPI/fetchFlash.py b/server/aiAPI/fetchFlash.py
new file mode 100644
index 0000000..4bdb4ac
--- /dev/null
+++ b/server/aiAPI/fetchFlash.py
@@ -0,0 +1,18 @@
+import openai
+
+
+def flashCards (input) -> list[dict]:
+    api_key = "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" 
+
+    prompt = "Give me an array of 5 objects with fields prompt and answer where prompt has the question and answer has the answer use this input as the material:" + input
+
+    response = openai.Completion.create(
+        engine="text-davinci-002",
+        prompt=prompt,
+        max_tokens=3800,
+        api_key=api_key
+    )
+
+    answer = response.choices[0].text
+    print(answer)
+    return answer
diff --git a/server/aiAPI/test.py b/server/aiAPI/test.py
new file mode 100644
index 0000000..874dacb
--- /dev/null
+++ b/server/aiAPI/test.py
@@ -0,0 +1,17 @@
+import fetchFlash
+
+input = """
+    Optical Disk: an optical disc drive (ODD) is a disk drive that uses laser light as part of the process
+    of reading or writing data to or from optical discs. Some drives can only read from discs, but recent
+    drives are commonly both readers and recorders, also called burners or writers. Compact discs,
+    DVDs, and Blu-ray discs are common types of optical media which can be read and recorded by
+    such drives. Optical drive is the generic name; drives are usually described as "CD" "DVD", or
+    "Bluray", followed by "drive", "writer", etc. There are three main types of optical media: CD,
+    DVD, and Blu-ray disc. CDs can store up to 700 megabytes (MB) of data and DVDs can store up
+    to 8.4 GB of data. Blu-ray discs, which are the newest type of optical media, can store up to 50
+    GB of data. This storage capacity is a clear advantage over the floppy disk storage media (a
+    magnetic media), which only has a capacity of 1.44 MB.
+    """
+
+fetchFlash.flashCards()
+