diff --git a/.gitignore b/.gitignore
index 6708349..0d2fdc0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -54,4 +54,9 @@ apps/**/next-env.d.ts
 /sls/layers/**/python
 /sls/**/targetsls/**/*.jar
 
-/sls/**/*.dev
\ No newline at end of file
+/sls/**/*.dev
+/.idea/.gitignore
+/.idea/kl-rmh-coding-challenge.iml
+/.idea/modules.xml
+/.idea/inspectionProfiles/Project_Default.xml
+/.idea/vcs.xml
diff --git a/apps/rmh-web/app/globals.css b/apps/rmh-web/app/globals.css
index 86005d0..f529a81 100644
--- a/apps/rmh-web/app/globals.css
+++ b/apps/rmh-web/app/globals.css
@@ -17,13 +17,7 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: lightgray;
 }
 
 .column {
diff --git a/apps/rmh-web/app/layout.tsx b/apps/rmh-web/app/layout.tsx
index ae84562..7e01a2f 100644
--- a/apps/rmh-web/app/layout.tsx
+++ b/apps/rmh-web/app/layout.tsx
@@ -5,8 +5,8 @@ import { Inter } from 'next/font/google'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'My Portal',
+  description: 'A portal to view patient data',
 }
 
 export default function RootLayout({
diff --git a/apps/rmh-web/app/pt-portal/dummyData.tsx b/apps/rmh-web/app/pt-portal/dummyData.tsx
new file mode 100644
index 0000000..a258e6d
--- /dev/null
+++ b/apps/rmh-web/app/pt-portal/dummyData.tsx
@@ -0,0 +1,22 @@
+export const dummyAppointmentData = [{
+    ptId: "6b87d552-a2fe-465a-998c-1b288fee212f",
+    appointmentDate: "2024-02-01T10:00:00",
+    createdOn: "2024-01-31T15:30:00",
+    duration: 30,
+    patientName: "John Doe",
+    zoomUrl: "https://example.com/zoom-meeting"
+}, {
+    ptId: "6b87d552-a2fe-465a-998c-1b288fee212f",
+    appointmentDate: "2024-01-01T10:00:00",
+    createdOn: "2024-01-31T15:30:00",
+    duration: 30,
+    patientName: "Jane Doe",
+    zoomUrl: "https://example.com/zoom-meeting"
+}, {
+    ptId: "6b87d552-a2fe-465a-998c-1b288fee212f",
+    appointmentDate: "2024-02-10T10:00:00",
+    createdOn: "2024-01-31T15:30:00",
+    duration: 30,
+    patientName: "Doe Doe",
+    zoomUrl: "https://example.com/zoom-meeting"
+}];
diff --git a/apps/rmh-web/app/pt-portal/getUsers.tsx b/apps/rmh-web/app/pt-portal/getUsers.tsx
new file mode 100644
index 0000000..60263e4
--- /dev/null
+++ b/apps/rmh-web/app/pt-portal/getUsers.tsx
@@ -0,0 +1,54 @@
+'use server'
+
+import '@aws-amplify/ui-react/styles.css';
+import '../globals.css';
+import {User} from "@/app/pt-portal/models";
+import axios from "axios";
+import gql from 'graphql-tag';
+import { print } from 'graphql/language/printer'
+
+export async function getUsers(ptID: string) {
+    const GRAPHQL_API_URL_API_KEY = process.env.GRAPHQL_API_URL_API_KEY ? process.env.GRAPHQL_API_URL_API_KEY : '';
+    const GRAPHQL_API_URL = process.env.GRAPHQL_API_URL ? process.env.GRAPHQL_API_URL : '';
+    const query = gql`
+ query MyQuery {
+      getAppointments(ptId: "${ptID}") {
+        items {
+          appointmentDate
+          createdOn
+          duration
+          patientName
+          ptId
+          zoomUrl
+        }
+      }
+    }
+`
+    try {
+        const data: User[] = await axios.post(GRAPHQL_API_URL, { query: print(query) },
+            {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': GRAPHQL_API_URL_API_KEY
+                }
+            })
+            .then(response => {
+                const items: User[] = response.data.data.getAppointments.items;
+                console.log('Response:', items);
+                return items
+            })
+            .catch(error => {
+                console.error('Error:', error.response ? error.response.data : error.message);
+                return []
+            });
+        return data.sort(
+            (a, b) =>
+                new Date(a.appointmentDate).getTime() -
+                new Date(b.appointmentDate).getTime()
+        )
+    } catch (err) {
+        console.log('Formatting Error');
+        return []
+
+    }
+}
\ No newline at end of file
diff --git a/apps/rmh-web/app/pt-portal/models.ts b/apps/rmh-web/app/pt-portal/models.ts
index c277fec..0d6b945 100644
--- a/apps/rmh-web/app/pt-portal/models.ts
+++ b/apps/rmh-web/app/pt-portal/models.ts
@@ -4,6 +4,10 @@ export interface Client {
 }
 
 export interface User {
-    id: string;
-    name: string;
+    ptId: string;
+    appointmentDate: string;
+    createdOn: string;
+    duration: number;
+    patientName: string;
+    zoomUrl: string;
 }
diff --git a/apps/rmh-web/app/pt-portal/page.tsx b/apps/rmh-web/app/pt-portal/page.tsx
index 0c7211f..92e569d 100644
--- a/apps/rmh-web/app/pt-portal/page.tsx
+++ b/apps/rmh-web/app/pt-portal/page.tsx
@@ -1,13 +1,14 @@
-'use client'
-
 import '@aws-amplify/ui-react/styles.css';
 import '../globals.css';
 import Head from 'next/head';
 import TopBar from '@/components/TopBar';
+import SideBar from "@/components/SideBar";
+import {User} from "@/app/pt-portal/models";
+import {getUsers} from "@/app/pt-portal/getUsers";
 
-
-export default function PTPortal() {
-
+export default async function PTPortal() {
+    const ptID: string = '6b87d552-a2fe-465a-998c-1b288fee212f';
+    const users: User[] = await getUsers(ptID);
   return (
     <section>
       <Head>
@@ -15,7 +16,8 @@ export default function PTPortal() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <TopBar />
-      <main className='flex min-h-screen justify-center w-full'>
+      <main className="flex min-h-screen w-full">
+          <SideBar users={users} />
       </main>
 
     </section>
diff --git a/apps/rmh-web/components/SideBar.tsx b/apps/rmh-web/components/SideBar.tsx
new file mode 100644
index 0000000..a001d1f
--- /dev/null
+++ b/apps/rmh-web/components/SideBar.tsx
@@ -0,0 +1,62 @@
+"use client";
+import { User } from "@/app/pt-portal/models";
+import Image from "next/image";
+import { useMemo, useState } from "react";
+import UsersList from "./UsersList";
+import Tab from "./Tab";
+const tabs = ["Upcoming Appointments", "Past Appointments"];
+
+const useFinalUsers = (search: string, users: User[]) =>
+  useMemo(() => {
+    return search.trim().length > 0
+      ? users.filter((user) =>
+          user.patientName.toLowerCase().startsWith(search)
+        )
+      : users;
+  }, [search, users]);
+
+const SideBar = ({
+  users,
+}: {
+  users: User[];
+}) => {
+  const [search, setSearch] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const finalUsers = useFinalUsers(search, users);
+
+  return (
+    <div className="h-full bg-white w-100 p-0.5 rounded-t-lg">
+      <div className="font-bold text-[#343741] text-[22px] p-6">
+        My Appointments
+      </div>
+      <div className="grid grid-cols-2 text-center">
+        {tabs.map((tab, index) => (
+          <Tab
+            key={tab}
+            isActive={activeIndex === index}
+            setActive={() => setActiveIndex(index)}
+            text={tab}
+          />
+        ))}
+      </div>
+      <div className="p-4 relative">
+        <Image
+          src="/search-icon.svg"
+          height={20}
+          width={20}
+          alt="search icon"
+          className="absolute top-1/2 left-[34px] -translate-y-1/2"
+        />
+        <input
+          className="border-[1px] border-[#C3C6CC] w-full p-2 rounded-lg placeholder:text-[#6B6F7B]  pl-14"
+          placeholder="Search Client"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+          <UsersList users={finalUsers} />
+    </div>
+  );
+};
+
+export default SideBar;
diff --git a/apps/rmh-web/components/Tab.tsx b/apps/rmh-web/components/Tab.tsx
new file mode 100644
index 0000000..f74513e
--- /dev/null
+++ b/apps/rmh-web/components/Tab.tsx
@@ -0,0 +1,28 @@
+import clsx from "clsx";
+
+const Tab = ({
+  isActive,
+  text,
+  setActive,
+}: {
+  isActive: boolean;
+  text: string;
+  setActive: () => void;
+}) => {
+  const color = isActive
+    ? "border-[#2B478B] text-[#2B478B]"
+    : "border-[#C3C6CC] text-[343741] transition-opacity hover:opacity-50";
+
+  const className = clsx(
+    "cursor-pointer border-b-[2px] font-bold text-[16px] pb-2",
+    color
+  );
+
+  return (
+    <div onClick={setActive} className={"cursor-pointer border-b-[2px] font-bold text-[16px] pb-2 hover: "}>
+      {text}
+    </div>
+  );
+};
+
+export default Tab;
diff --git a/apps/rmh-web/components/TopBar.tsx b/apps/rmh-web/components/TopBar.tsx
index ed9aa41..1a22933 100644
--- a/apps/rmh-web/components/TopBar.tsx
+++ b/apps/rmh-web/components/TopBar.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { selectIsAuthenticated } from '@/features/authSlice';
-import { Auth } from 'aws-amplify';
+// import { useSelector } from 'react-redux';
+// import { selectIsAuthenticated } from '@/features/authSlice';
+// import { Auth } from 'aws-amplify';
 
 const TopBar = () => {
-  const isAuthenticated = useSelector(selectIsAuthenticated);
-
-  const handleSignOut = async () => {
-    try {
-      await Auth.signOut();
-    } catch (error) {
-      console.error('Error signing out:', error);
-    }
-  };
+  // const isAuthenticated = useSelector(selectIsAuthenticated);
+  //
+  // const handleSignOut = async () => {
+  //   try {
+  //     await Auth.signOut();
+  //   } catch (error) {
+  //     console.error('Error signing out:', error);
+  //   }
+  // };
 
   return (
     <header className="bg-white p-4 flex justify-between items-center">
@@ -20,10 +20,9 @@ const TopBar = () => {
         <img src="/logo.png" alt="Logo" className="h-8 mr-4" />
         <h1 className="text-white text-lg font-bold">Right Move Health</h1>
       </div>
-      {isAuthenticated ? (
+      {
         <div className="flex items-center">
           <button
-            onClick={handleSignOut}
             className="text-white hover:underline cursor-pointer mr-4"
           >
             Sign Out
@@ -34,7 +33,7 @@ const TopBar = () => {
             className="h-10 w-10 rounded-full"
           />
         </div>
-      ) : null}
+       }
     </header>
   );
 };
diff --git a/apps/rmh-web/components/UsersList.tsx b/apps/rmh-web/components/UsersList.tsx
new file mode 100644
index 0000000..4de51ff
--- /dev/null
+++ b/apps/rmh-web/components/UsersList.tsx
@@ -0,0 +1,44 @@
+import { User } from "@/app/pt-portal/models";
+import Image from "next/image";
+// import { isSelected, setUsers } from "@/features/usersSlice";
+// import { useDispatch } from "react-redux";
+// import { useSelector } from "react-redux";
+import clsx from "clsx";
+
+const UserItem = ({ user }: { user: User }) => {
+  // const dispatch = useDispatch();
+  // const userSelected = useSelector(isSelected)(user);
+  const selectedStyles = clsx(
+    `flex items-center justify-between p-4 hover:bg-[#EFF3FC] transition-all duration-250`
+  );
+//onClick={() => dispatch(setUsers(user))}
+  return (
+    <div className={selectedStyles}>
+      <div className="flex items-center gap-4">
+        <Image
+          src="/profile-icon.svg"
+          width={40}
+          height={40}
+          alt="profile icon"
+        />
+        <div>{user.patientName}</div>
+      </div>
+      <button
+        className="hover:opacity-50 duration-100"
+        onClick={() => console.log("opens chat window")}
+      >
+        <Image src="/chat-icon.svg" width={24} height={24} alt="chat icon" onClick={() => alert('Chat feature coming soon!')}/>
+      </button>
+    </div>
+  );
+};
+
+const UsersList = ({ users }: { users: User[] }) => (
+  <>
+    {users.map((user) => (
+      <UserItem key={JSON.stringify(user)} user={user} />
+    ))}
+  </>
+);
+
+export default UsersList;
diff --git a/apps/rmh-web/next.config.js b/apps/rmh-web/next.config.js
index 767719f..5feaa51 100644
--- a/apps/rmh-web/next.config.js
+++ b/apps/rmh-web/next.config.js
@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
 
-module.exports = nextConfig
+module.exports = {
+    experimental: {
+        serverActions: {
+            allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
+        },
+    },
+}
\ No newline at end of file
diff --git a/apps/rmh-web/package-lock.json b/apps/rmh-web/package-lock.json
index 36c639a..78c463f 100644
--- a/apps/rmh-web/package-lock.json
+++ b/apps/rmh-web/package-lock.json
@@ -17,6 +17,7 @@
         "autoprefixer": "10.4.15",
         "aws-amplify": "^5.3.10",
         "axios": "^1.4.0",
+        "clsx": "^2.1.0",
         "eslint": "8.47.0",
         "eslint-config-next": "13.4.19",
         "graphql": "^16.8.0",
@@ -10598,6 +10599,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/apps/rmh-web/package.json b/apps/rmh-web/package.json
index 2d7c35d..ffaeca0 100644
--- a/apps/rmh-web/package.json
+++ b/apps/rmh-web/package.json
@@ -18,6 +18,7 @@
     "autoprefixer": "10.4.15",
     "aws-amplify": "^5.3.10",
     "axios": "^1.4.0",
+    "clsx": "^2.1.0",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.19",
     "graphql": "^16.8.0",
diff --git a/apps/rmh-web/public/chat-icon.svg b/apps/rmh-web/public/chat-icon.svg
new file mode 100644
index 0000000..0cdd05d
--- /dev/null
+++ b/apps/rmh-web/public/chat-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 2V14H3.17L2 15.17V2H18ZM18 0H2C0.9 0 0 0.9 0 2V17.59C0 18.48 1.08 18.93 1.71 18.3L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0Z" fill="#6B6F7B"/>
+</svg>
diff --git a/apps/rmh-web/public/profile-icon.svg b/apps/rmh-web/public/profile-icon.svg
new file mode 100644
index 0000000..7b9aaee
--- /dev/null
+++ b/apps/rmh-web/public/profile-icon.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" fill="#F6F7FA"/>
+<path d="M6.5946 34.3893C8.31668 31.7178 13.3191 28.6954 19.9795 28.6954C26.5768 28.6954 31.5186 31.6433 33.3001 34.3065C29.9769 37.9229 25.2077 40.1894 19.9091 40.1894C14.651 40.1894 9.91429 37.9575 6.5946 34.3893Z" fill="#C3C6CC"/>
+<path d="M26.89 17.5026C26.89 21.8446 23.8937 25.1678 19.9795 25.1678C16.0855 25.1471 13.0892 21.8446 13.0892 17.5026C13.0684 13.4256 16.1457 10 19.9795 10C23.8335 10 26.89 13.4256 26.89 17.5026Z" fill="#C3C6CC"/>
+<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#C3C6CC"/>
+</svg>
diff --git a/apps/rmh-web/public/search-icon.svg b/apps/rmh-web/public/search-icon.svg
new file mode 100644
index 0000000..e766534
--- /dev/null
+++ b/apps/rmh-web/public/search-icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 12H12.71L12.43 11.73C13.0549 11.004 13.5117 10.1488 13.7675 9.22562C14.0234 8.30246 14.072 7.33416 13.91 6.39001C13.44 3.61001 11.12 1.39001 8.31997 1.05001C7.33559 0.925471 6.33576 1.02778 5.397 1.34909C4.45824 1.67041 3.60542 2.20222 2.90381 2.90384C2.20219 3.60545 1.67038 4.45827 1.34906 5.39703C1.02775 6.33579 0.925441 7.33562 1.04997 8.32C1.38997 11.12 3.60998 13.44 6.38998 13.91C7.33413 14.0721 8.30243 14.0234 9.22559 13.7676C10.1487 13.5117 11.0039 13.055 11.73 12.43L12 12.71V13.5L16.25 17.75C16.66 18.16 17.33 18.16 17.74 17.75C18.15 17.34 18.15 16.67 17.74 16.26L13.5 12ZM7.49997 12C5.00997 12 2.99997 9.99001 2.99997 7.50001C2.99997 5.01 5.00997 3.00001 7.49997 3.00001C9.98997 3.00001 12 5.01 12 7.50001C12 9.99001 9.98997 12 7.49997 12Z" fill="#343741"/>
+</svg>