diff --git a/src/api/supabase/queries/interest.ts b/src/api/supabase/queries/interest.ts
index f7ca5dad..09df49aa 100644
--- a/src/api/supabase/queries/interest.ts
+++ b/src/api/supabase/queries/interest.ts
@@ -14,7 +14,6 @@ export async function getAllInterests() {
 /** 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/app/cases/page.tsx b/src/app/cases/page.tsx
index 7b84cf79..c7a3d3c4 100644
--- a/src/app/cases/page.tsx
+++ b/src/app/cases/page.tsx
@@ -3,17 +3,16 @@
 import { useEffect, useState } from 'react';
 import { UUID } from 'crypto';
 import { CaseListing } from '@/types/schema';
+import FilterDropdown from '@/components/FilterDropdown';
 import { getNCases } from '@/api/supabase/queries/cases';
 import ListingCard from '@/components/ListingCard';
-import { H1, H2 } from '@/styles/text';
-import FilterDropdown from '@/components/FilterDropdown';
+import CaseDetailDisplay from '@/components/CaseDetails';
+import { H1 } from '@/styles/text';
 import {
   CardColumn,
-  CaseDetailDisplay,
-  CaseDetails,
-  FiltersContainer,
   MainDisplay,
   PageContainer,
+  FiltersContainer,
 } from './styles';
 
 type FilterType = {
@@ -27,6 +26,7 @@ type FilterType = {
 export default function Page() {
   const [caseData, setCaseData] = useState<CaseListing[]>([]);
   const [selectedCard, setSelectedCard] = useState<UUID>();
+  const [caseInfo, setCaseInfo] = useState<CaseListing>();
   const [caseFilters, setCaseFilters] = useState<FilterType>({
     remote: 'Remote/In Person',
     role: 'Attorney/Interpreter',
@@ -39,10 +39,10 @@ export default function Page() {
   useEffect(() => {
     getNCases(20).then(casesData => {
       setCaseData(casesData);
+      setCaseInfo(casesData[0]);
     });
   }, []);
 
-  // page structure
   return (
     <PageContainer>
       <H1>Browse Available Cases</H1>
@@ -126,16 +126,14 @@ export default function Page() {
                 key={c.id}
                 caseData={c}
                 isSelected={c.id === selectedCard}
-                onClick={() => setSelectedCard(c.id)}
+                onClick={() => {
+                  setSelectedCard(c.id);
+                  setCaseInfo(c);
+                }}
               />
             ))}
         </CardColumn>
-        <CaseDetailDisplay>
-          {/* proof of concept -- to turn into component later */}
-          <CaseDetails>
-            <H2>Case details.</H2>
-          </CaseDetails>
-        </CaseDetailDisplay>
+        {caseInfo && <CaseDetailDisplay caseData={caseInfo} />}
       </MainDisplay>
     </PageContainer>
   );
diff --git a/src/app/cases/styles.tsx b/src/app/cases/styles.tsx
index ae8a4ad6..643a407e 100644
--- a/src/app/cases/styles.tsx
+++ b/src/app/cases/styles.tsx
@@ -36,16 +36,3 @@ export const CaseDetailDisplay = styled.aside`
   position: relative;
   width: 100%;
 `;
-
-export const CaseDetails = styled.div`
-  position: sticky;
-  top: 4rem;
-  background: white;
-  width: 90%;
-  height: 80vh;
-  border-radius: 20px;
-  margin: 0 auto;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  padding: 2rem;
-  border: 1px solid lightgray;
-`;
diff --git a/src/app/interest/page.tsx b/src/app/interest/page.tsx
deleted file mode 100644
index 44e8e6ff..00000000
--- a/src/app/interest/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { UUID } from 'crypto';
-import { insertInterest } from '../../api/supabase/queries/interest';
-import { Interest } from '../../types/schema';
-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: 100,
-        user_id: '36b8f84d-df4e-4d49-b662-bcde71a8764f',
-        form_response: {
-          interestType: 'IJP-6-test',
-          interestReason: reason,
-          start_date: 'Jan 1 2020 8:00:00 PM UTC-7',
-        },
-      };
-      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/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 00000000..5d34ccfe
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+/* 
+  FOR PRIMARY BUTTON USAGE:
+
+    Props: 
+      primaryColor (Required) - This color will determine the default background color of the button
+      secondaryColor (Required) - This color will determine the border color and background color on hover
+   
+    Example:
+      <Button primaryColor={COLORS.primaryBlue} secondaryColor={COLORS.primaryBlueClicked} onClick={...}>
+        [Button text here]
+      </Button>
+
+  FOR SECONDARY BUTTON USAGE:
+
+    Props:
+      primaryColor (Omit) - IMPORTANT: DO NOT PASS IN A primaryColor PROP!!! The background color will be white by default
+      secondaryColor (Required) - This color will determine the border color and background color on hover
+
+    Example: 
+      <Button secondaryColor={COLORS.primaryBlue} onClick={...}>
+        [Button text here]
+      </Button>
+ */
+const Button = styled.button<{
+  primaryColor?: string;
+  secondaryColor: string;
+}>`
+  appearance: none;
+  color: ${props => (props.primaryColor ? 'white' : 'black')};
+  background: ${props => (props.primaryColor ? props.primaryColor : 'white')};
+  align-self: flex-end;
+  padding: 0.625rem 1.25rem;
+  border-radius: 0.313rem; // 5px
+  border: 2px solid
+    ${props => (props.primaryColor ? props.primaryColor : props.secondaryColor)};
+  &:hover {
+    background: ${props => props.secondaryColor};
+    color: white;
+    border-color: ${props => props.secondaryColor};
+  }
+`;
+
+export default Button;
diff --git a/src/components/CaseDetails/index.tsx b/src/components/CaseDetails/index.tsx
new file mode 100644
index 00000000..dd8aa55c
--- /dev/null
+++ b/src/components/CaseDetails/index.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-no-comment-textnodes */
+import React from 'react';
+import { timestampStringToDate, parseDate } from '@/utils/helpers';
+import { H1 } from '@/styles/text';
+import { CaseListing } from '@/types/schema';
+import InterestForm from '../InterestForm';
+import {
+  CaseInterestContainer,
+  CaseDisplay,
+  InfoContainer,
+  Line,
+} from './styles';
+
+export default function CaseDetails({ caseData }: { caseData: CaseListing }) {
+  return (
+    <CaseDisplay>
+      <CaseInterestContainer>
+        <InfoContainer>
+          <H1>Guatemalan mother and two children seeking protection</H1>
+          <p>
+            <strong>Languages: </strong>
+            {caseData.languages}
+          </p>
+          <p>
+            <strong>Next Court/Filing Date: </strong>
+            {parseDate(timestampStringToDate(caseData.upcoming_date))}
+          </p>
+
+          <p>{caseData.summary}</p>
+        </InfoContainer>
+        <Line />
+        <InterestForm caseData={caseData} />
+      </CaseInterestContainer>
+    </CaseDisplay>
+  );
+}
diff --git a/src/components/CaseDetails/styles.tsx b/src/components/CaseDetails/styles.tsx
new file mode 100644
index 00000000..bfda2365
--- /dev/null
+++ b/src/components/CaseDetails/styles.tsx
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { H1 } from '@/styles/text';
+import COLORS from '../../styles/colors';
+
+// case detail
+export const CaseDisplay = styled.aside`
+  position: relative;
+  width: 100%;
+`;
+
+export const CaseTitle = styled(H1)`
+  margin: 0.4rem 4rem;
+`;
+
+export const CaseInterestContainer = styled.div`
+  position: sticky;
+  top: 4rem;
+  width: 95%;
+  border-radius: 10px;
+  margin: 0 auto;
+  padding: 2rem;
+  border: 2px solid ${COLORS.blueMid};
+  justify-content: space-between;
+  flex-direction: column;
+  gap: 1.4rem;
+  display: block;
+  overflow: scroll;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 50%;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.2rem;
+`;
+
+export const Line = styled.hr`
+  color: 'black';
+`;
diff --git a/src/components/InterestForm/index.tsx b/src/components/InterestForm/index.tsx
new file mode 100644
index 00000000..d5b98445
--- /dev/null
+++ b/src/components/InterestForm/index.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { UUID } from 'crypto';
+import { insertInterest } from '@/api/supabase/queries/interest';
+import { Interest, CaseListing } from '@/types/schema';
+import { H4 } from '@/styles/text';
+import COLORS from '@/styles/colors';
+import Button from '../Button';
+import {
+  FormContainer,
+  FormTextArea,
+  FormInput,
+  RadioGroup,
+  RadioLabel,
+  RadioInput,
+  FormFooter,
+  FormWarning,
+  FormTitle,
+} from './styles';
+
+const radioOptions = [
+  'Attorney',
+  'Interpreter',
+  'Either Attorney or Interpreter',
+];
+
+export default function InterestForm({ caseData }: { caseData: CaseListing }) {
+  const [reason, setReason] = useState<string>('');
+  const [rolesInterested, setRolesInterested] = useState<string>('');
+  const [startDate, setStartDate] = useState<string>('');
+
+  useEffect(() => {
+    // Reset form fields when caseData changes
+    setReason('');
+    setStartDate('');
+    setRolesInterested('');
+  }, [caseData]);
+
+  const handleInsert = async () => {
+    // will improve this in the next sprint
+    if (reason !== '' && startDate !== '' && rolesInterested !== '') {
+      const newInterest: Interest = {
+        // hardcoded values for now
+        id: crypto.randomUUID() as UUID,
+        listing_id: caseData.id,
+        listing_type: 1,
+        user_id: '36b8f84d-df4e-4d49-b662-bcde71a8764f',
+        form_response: {
+          interestType: rolesInterested,
+          interestReason: reason,
+          start_date: startDate,
+        },
+      };
+
+      await insertInterest(newInterest);
+      setReason('');
+      setStartDate('');
+      setRolesInterested('');
+    }
+  };
+
+  return (
+    <FormContainer>
+      <FormTitle>Submit Interest</FormTitle>
+      <H4>What role(s) are you applying for?</H4>
+      <RadioGroup>
+        {radioOptions.map(option => (
+          <RadioLabel key={option}>
+            <RadioInput
+              id="radio"
+              type="radio"
+              name="radioOptions"
+              value={option}
+              checked={rolesInterested === option}
+              onChange={event => setRolesInterested(event.target.value)}
+            />
+            {option}
+          </RadioLabel>
+        ))}
+      </RadioGroup>
+
+      <H4>What is the earliest date you can contact the client?</H4>
+      <FormInput
+        id="startDate"
+        required
+        placeholder="MM/DD/YYYY"
+        value={startDate}
+        onChange={event => setStartDate(event.target.value)}
+      />
+
+      <H4>Why are you interested in this case?</H4>
+      <FormTextArea
+        id="reason"
+        required
+        value={reason}
+        onChange={event => setReason(event.target.value)}
+      />
+      <FormFooter>
+        <FormWarning>
+          Your interest form is not saved!
+          <br />
+          Please submit before leaving this page.
+        </FormWarning>
+        <Button
+          primaryColor={COLORS.blueMid}
+          secondaryColor={COLORS.blueDark}
+          onClick={handleInsert}
+        >
+          Submit Interest
+        </Button>
+      </FormFooter>
+    </FormContainer>
+  );
+}
diff --git a/src/components/InterestForm/styles.tsx b/src/components/InterestForm/styles.tsx
new file mode 100644
index 00000000..86e6d673
--- /dev/null
+++ b/src/components/InterestForm/styles.tsx
@@ -0,0 +1,102 @@
+import styled from 'styled-components';
+import { Open_Sans as OpenSans } from 'next/font/google';
+import COLORS from '@/styles/colors';
+import { H3 } from '@/styles/text';
+
+const openSans = OpenSans({ subsets: ['latin'] });
+
+export const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 61%;
+  float: right;
+  margin-top: 1rem;
+  gap: 0.6rem;
+`;
+
+export const FormTitle = styled(H3)`
+  margin-bottom: 0.2rem;
+`;
+
+export const FormTextArea = styled.textarea`
+  ${openSans.style}
+  min-height: 10rem;
+  resize: none;
+  font-size: 1rem; // 16px;
+  font-weight: 400;
+  border-radius: 0.313rem; // 5px
+  border: 2px solid ${COLORS.greyLight};
+  margin-bottom: 0.6rem;
+  padding: 0.5rem;
+  &:focus {
+    border-color: ${COLORS.blueMid};
+    outline: none;
+  }
+`;
+
+export const FormInput = styled.input`
+  ${openSans.style}
+  font-size: 1rem;
+  font-weight: 400;
+  border-radius: 0.313rem; // 5px
+  border: 2px solid ${COLORS.greyLight};
+  padding: 0.5rem;
+  margin-bottom: 0.6rem;
+  &:focus {
+    border-color: ${COLORS.blueMid};
+    outline: none;
+  }
+`;
+
+export const RadioGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.6rem;
+  column-gap: 3rem;
+  row-gap: 0.4rem;
+  flex-wrap: wrap;
+`;
+
+export const RadioLabel = styled.label`
+  display: flex;
+  font-size: 0.875rem; //14px
+`;
+
+export const RadioInput = styled.input`
+  display: grid;
+  place-items: center;
+  margin-right: 0.4rem;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid ${COLORS.greyMid};
+  border-radius: 50%;
+  position: relative;
+
+  &:checked {
+    box-shadow: 0 0 0 0.1rem white inset, 0 0 0 0.5rem ${COLORS.blueMid} inset;
+    border-color: ${COLORS.blueMid};
+  }
+  &:hover {
+    border-color: ${COLORS.blueMid};
+  }
+`;
+
+export const FormFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  align-self: stretch;
+`;
+
+export const FormWarning = styled.p`
+  padding-bottom: 0.375rem; // 6px
+  color: ${COLORS.greyMid};
+  font-size: 0.75rem; // 12px
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  max-width: 50%;
+  height: 100%;
+`;
diff --git a/src/components/ListingCard/index.tsx b/src/components/ListingCard/index.tsx
index d7bbf026..6529530b 100644
--- a/src/components/ListingCard/index.tsx
+++ b/src/components/ListingCard/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { UUID } from 'crypto';
 import { CaseListing } from '@/types/schema';
-import { timestampStringToDate } from '@/utils/helpers';
+import { timestampStringToDate, parseDate } from '@/utils/helpers';
 import { H2 } from '@/styles/text';
 import COLORS from '@/styles/colors';
 import { CardBody, TagRow, CardTag } from './styles';
@@ -15,10 +15,6 @@ export default function ListingCard({
   isSelected?: boolean;
   onClick?: (id: UUID) => void;
 }) {
-  // helper functions
-  const parseDate = (d: Date): string =>
-    `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
-
   return (
     <CardBody
       $selected={isSelected}
@@ -31,7 +27,7 @@ export default function ListingCard({
         {caseData.languages.join(', ')}
       </p>
       <p>
-        <strong>Upcoming Date: </strong>
+        <strong>Case Deadline: </strong>
         {parseDate(timestampStringToDate(caseData.upcoming_date))}
       </p>
       <TagRow>
diff --git a/src/components/TextInput/styles.tsx b/src/components/TextInput/styles.tsx
index c9dacea5..b0fb4eb6 100644
--- a/src/components/TextInput/styles.tsx
+++ b/src/components/TextInput/styles.tsx
@@ -9,9 +9,9 @@ export const InputText = styled(P)<{ $error: boolean }>`
   // pass in as='input' when using as a tag, since this is supposed to be an input
   color: ${COLORS.greyDarker};
   padding: 0.625rem 1.25rem; // 10px 20px 10px 20px;
-  border-radius: 5px;
+  border-radius: 0.313rem; // 5px
   border: 2px solid
-    ${({ $error }) => ($error ? COLORS.redMid : COLORS.placeholderText)};
+    ${({ $error }) => ($error ? COLORS.redMid : COLORS.greyDark)};
   justify-content: flex-start;
   align-items: flex-start;
   outline: none;
diff --git a/src/styles/text.tsx b/src/styles/text.tsx
index f4e6ecd5..6cfaa29e 100644
--- a/src/styles/text.tsx
+++ b/src/styles/text.tsx
@@ -4,6 +4,8 @@ import COLORS from './colors';
 
 const openSans = OpenSans({ subsets: ['latin'] });
 
+// 1 rem = 16 px
+
 export const H1 = styled.h1<{ $color?: string }>`
   ${openSans.style}
   display: block;
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 7564d8cb..9a139a28 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -153,3 +153,7 @@ pSBC.pSBCr = (color: string) => {
   }
   return x;
 };
+
+// helper functions
+export const parseDate = (d: Date): string =>
+  `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;