diff --git a/src/api/supabase/queries/interest.ts b/src/api/supabase/queries/interest.ts
new file mode 100644
index 00000000..ea2f1d9d
--- /dev/null
+++ b/src/api/supabase/queries/interest.ts
@@ -0,0 +1,21 @@
+import supabase from '../createClient';
+import { Interest } from '../../../types/schemaTypes';
+
+/** Get all interest from supabase interest table. */
+export async function getAllInterests() {
+  const { data, error } = await supabase.from('interests').select();
+
+  if (error) {
+    throw new Error(`An error occurred trying to read interests: ${error}`);
+  }
+  return data;
+}
+
+/** Insert a new interest object into supabase interest table. */
+export async function insertInterest(interest: Interest) {
+  const { error } = await supabase.from('interests').insert(interest).select();
+
+  if (error) {
+    throw new Error(`An error occurred trying to insert an interest: ${error}`);
+  }
+}
diff --git a/src/api/supabase/queries/profiles.ts b/src/api/supabase/queries/profiles.ts
new file mode 100644
index 00000000..0653769e
--- /dev/null
+++ b/src/api/supabase/queries/profiles.ts
@@ -0,0 +1,32 @@
+import { UUID } from 'crypto';
+import supabase from '../createClient';
+import { Profile } from '../../../types/schemaTypes';
+
+export async function fetchProfiles() {
+  const { data, error } = await supabase.from('profiles').select('*');
+
+  if (error) {
+    throw new Error(`An error occured when trying to read profiles: ${error}`);
+  } else {
+    // console.log('Profiles Data:', data);
+    return data;
+  }
+}
+
+export async function insertProfile(profileData: Profile) {
+  const { error } = await supabase.from('profiles').insert(profileData);
+  if (error) {
+    throw new Error(`Error inserting profile data: ${error.message}`);
+  }
+}
+
+export async function updateProfile(id: UUID, updatedInfo: Partial<Profile>) {
+  const { error } = await supabase
+    .from('profiles')
+    .update(updatedInfo)
+    .eq('user_id', id);
+
+  if (error) {
+    throw new Error(`Error updating profile data: ${error.message}`);
+  }
+}
diff --git a/src/app/interest/page.tsx b/src/app/interest/page.tsx
new file mode 100644
index 00000000..49e4b693
--- /dev/null
+++ b/src/app/interest/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+import { UUID } from 'crypto';
+import { insertInterest } from '../../api/supabase/queries/interest';
+import { Interest } from '../../types/schemaTypes';
+import styles from '../page.module.css';
+
+export default function Interest() {
+  const [reason, setReason] = useState<string>('');
+
+  const handleInsert = async () => {
+    if (reason !== '') {
+      const newInterest: Interest = {
+        // hardcoded values for now
+        id: crypto.randomUUID() as UUID,
+        listing_id: '36b8f84d-df4e-4d49-b662-bcde71a8764f',
+        listing_type: 'IJP6 Test',
+        user_id: '36b8f84d-df4e-4d49-b662-bcde71a8764f',
+        form_response: {
+          interestType: ['IJP-6-test'],
+          interestReason: reason,
+        },
+      };
+      await insertInterest(newInterest);
+      setReason('');
+    } else {
+      // console.log('cannot create an empty interest');
+    }
+  };
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>Interest Form</div>
+      <form>
+        <textarea
+          required
+          value={reason}
+          onChange={event => setReason(event.target.value)}
+        />
+        <button type="button" onClick={handleInsert}>
+          Submit
+        </button>
+      </form>
+    </main>
+  );
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 00000000..c5feecc7
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { useState } from 'react';
+import supabase from '../../api/supabase/createClient';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const handleSignUp = async () => {
+    const { data, error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+
+    if (error) {
+      throw new Error(`An error occurred trying to sign up: ${error}`);
+    }
+
+    return data;
+  };
+
+  const signInWithEmail = async () => {
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    if (error) {
+      throw new Error(`An error occurred trying to sign in: ${error}`);
+    }
+
+    return data;
+  };
+
+  return (
+    <>
+      <input
+        name="email"
+        onChange={e => setEmail(e.target.value)}
+        value={email}
+      />
+      <input
+        type="password"
+        name="password"
+        onChange={e => setPassword(e.target.value)}
+        value={password}
+      />
+      <button type="button" onClick={handleSignUp}>
+        Sign up
+      </button>
+      <button type="button" onClick={signInWithEmail}>
+        Sign in
+      </button>
+    </>
+  );
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
new file mode 100644
index 00000000..8081991f
--- /dev/null
+++ b/src/app/profile/page.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import 'crypto';
+import React, { useEffect, useState } from 'react';
+import {
+  fetchProfiles,
+  insertProfile,
+  updateProfile,
+} from '../../api/supabase/queries/profiles';
+import { Profile } from '../../types/schemaTypes';
+
+import styles from '../page.module.css';
+
+export default function Page() {
+  const [profiles, setProfiles] = useState<Profile[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const allProfiles = await fetchProfiles();
+      setProfiles(allProfiles);
+
+      type UUID = `${string}-${string}-${string}-${string}-${string}`;
+
+      const mockProfile = {
+        first_name: 'First',
+        last_name: 'Last',
+        user_id: crypto.randomUUID() as UUID,
+        roles: ['attorney'],
+        languages: ['English', 'Spanish'],
+        accreditations: ['Bar Association'],
+        hours_per_week: 40,
+        immigration_law_experience: '5 years',
+        bar_number: '12345',
+        start_date: new Date().toDateString(),
+        interest_ids: [crypto.randomUUID()] as UUID[],
+      };
+
+      await insertProfile(mockProfile);
+
+      await updateProfile(mockProfile.user_id, {
+        hours_per_week: 100, // Update the roles field with new data
+      });
+    })();
+  }, []);
+
+  return (
+    <div className={styles.profilePage}>
+      <h1>Profiles</h1>
+
+      <ul>
+        {profiles.map(profile => (
+          <li key={profile.user_id}>
+            <h2>Profile ID: {profile.user_id}</h2>
+            <p>First Name: {profile.first_name}</p>
+            <p>Last Name: {profile.last_name}</p>
+            <p>Roles: {profile.roles.join(', ')}</p>
+            <p>Languages: {profile.languages.join(', ')}</p>
+            <p>Accreditations: {profile.accreditations.join(', ')}</p>
+            <p>hoursPerWeek: {profile.hours_per_week}</p>
+            <p>
+              immigrationLawExperience: {profile.immigration_law_experience}
+            </p>
+            <p>barNumber: {profile.bar_number}</p>
+            <p>startDate: {profile.start_date}</p>
+            <p>interestIds: {profile.interest_ids}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/types/schemaTypes.ts b/src/types/schemaTypes.ts
index 639d2533..d6e77e50 100644
--- a/src/types/schemaTypes.ts
+++ b/src/types/schemaTypes.ts
@@ -34,6 +34,8 @@ export interface TranslationRequest {
 }
 
 export interface Profile {
+  first_name: string;
+  last_name: string;
   user_id: UUID;
   roles: string[];
   languages: string[];
@@ -52,6 +54,6 @@ export interface Interest {
   user_id: UUID;
   form_response: {
     interestType: string[];
-    whyInterested: string;
+    interestReason: string;
   };
 }