diff --git a/apps/frontend/components/Header.tsx b/apps/frontend/src/components/Header.tsx
similarity index 100%
rename from apps/frontend/components/Header.tsx
rename to apps/frontend/src/components/Header.tsx
diff --git a/apps/frontend/src/components/forms/loginForm.tsx b/apps/frontend/src/components/forms/loginForm.tsx
new file mode 100644
index 0000000..387dc42
--- /dev/null
+++ b/apps/frontend/src/components/forms/loginForm.tsx
@@ -0,0 +1,45 @@
+import { Stack } from '@chakra-ui/react';
+
+const handlePantryLogin = () => {
+  console.log('Pantry login');
+};
+const handlePantrySignUp = () => {
+  console.log('Pantry sign up');
+};
+const handleSSFLogin = () => {
+  console.log('SSF login');
+};
+
+const PantryLoginForm = () => {
+  return (
+    <Stack sx={{ width: '30vw' }} align={'center'}>
+      <p>Pantry Log in</p>
+      <Stack sx={{ width: '50%' }}>
+        <input type="text" placeholder="Username" />
+        <input type="text" placeholder="Password" />
+        <button type="submit" onClick={handlePantryLogin}>
+          Log in
+        </button>
+        <button type="submit" onClick={handlePantrySignUp}>
+          Sign up
+        </button>
+      </Stack>
+    </Stack>
+  );
+};
+const SSFLoginForm = () => {
+  return (
+    <Stack sx={{ width: '30vw' }} align={'center'}>
+      <p>SSF Log in</p>
+      <Stack sx={{ width: '50%' }}>
+        <input type="text" placeholder="Username" />
+        <input type="text" placeholder="Password" />
+        <button type="submit" onClick={handleSSFLogin}>
+          Log in
+        </button>
+      </Stack>
+    </Stack>
+  );
+};
+
+export { PantryLoginForm, SSFLoginForm };
diff --git a/apps/frontend/src/containers/landingPage.tsx b/apps/frontend/src/containers/landingPage.tsx
index 0e1a72b..294a88e 100644
--- a/apps/frontend/src/containers/landingPage.tsx
+++ b/apps/frontend/src/containers/landingPage.tsx
@@ -1,5 +1,14 @@
+import { PantryLoginForm, SSFLoginForm } from '@components/forms/loginForm';
+import { useState } from 'react';
+
 const LandingPage: React.FC = () => {
-  return <>Landing page</>;
+  const [ssf, setSSF] = useState(false);
+  return (
+    <>
+      {ssf ? <SSFLoginForm /> : <PantryLoginForm />}
+      <button onClick={() => setSSF(!ssf)}>Switch</button>
+    </>
+  );
 };
 
 export default LandingPage;
diff --git a/apps/frontend/src/containers/root.tsx b/apps/frontend/src/containers/root.tsx
index cb8a0ea..2c08e5f 100644
--- a/apps/frontend/src/containers/root.tsx
+++ b/apps/frontend/src/containers/root.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from 'react-router-dom';
-import Header from '../../components/Header';
+import Header from '@components/Header';
 const Root: React.FC = () => {
   return (
     <div>