diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9d0caf7..c7b5e81 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,8 +8,10 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "firebase": "^10.7.1",
+        "@splinetool/react-spline": "^2.2.6",
+        "@splinetool/runtime": "^1.0.18",
         "axios": "^1.6.5",
+        "firebase": "^10.7.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.21.1"
@@ -1418,6 +1420,23 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -1757,6 +1776,29 @@
         "win32"
       ]
     },
+    "node_modules/@splinetool/react-spline": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@splinetool/react-spline/-/react-spline-2.2.6.tgz",
+      "integrity": "sha512-y9L2VEbnC6FNZZu8XMmWM9YTTTWal6kJVfP05Amf0QqDNzCSumKsJxZyGUODvuCmiAvy0PfIfEsiVKnSxvhsDw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "react-merge-refs": "^2.0.1"
+      },
+      "peerDependencies": {
+        "@splinetool/runtime": "*",
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@splinetool/runtime": {
+      "version": "1.0.18",
+      "resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.0.18.tgz",
+      "integrity": "sha512-ywtyXRTm96C8czB/eezmb4dLNZ5fncOdBAW5PLfaE/EtmkIZX2ofFGU8u8cnYcKHfdCaFO0+WfhXQtcpPMSFBA==",
+      "dependencies": {
+        "on-change": "^4.0.0",
+        "semver-compare": "^1.0.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2349,24 +2391,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/cliui/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/cliui/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/cliui/node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -4161,6 +4185,11 @@
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4434,6 +4463,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/on-change": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz",
+      "integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/on-change?sponsor=1"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4800,7 +4840,8 @@
       },
       "engines": {
         "node": ">=12.0.0"
-      },
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4864,6 +4905,15 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-merge-refs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz",
+      "integrity": "sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -5143,6 +5193,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
+    },
     "node_modules/set-function-length": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
@@ -5229,20 +5284,16 @@
       }
     },
     "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=8"
       }
     },
     "node_modules/string-width-cjs": {
@@ -5266,32 +5317,10 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.10",
@@ -5999,26 +6028,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/wrap-ansi/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -6043,6 +6052,23 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/wrap-ansi/node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -6112,24 +6138,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/yargs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/yargs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -6143,5 +6151,4 @@
       }
     }
   }
-  }
-}
\ No newline at end of file
+}
diff --git a/frontend/package.json b/frontend/package.json
index 2e8b260..35c9d48 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "firebase": "^10.7.1",
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.18",
     "axios": "^1.6.5",
+    "firebase": "^10.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1"
diff --git a/frontend/src/views/patient/PatientHome.jsx b/frontend/src/views/patient/PatientHome.jsx
index f3b155d..48a9de5 100644
--- a/frontend/src/views/patient/PatientHome.jsx
+++ b/frontend/src/views/patient/PatientHome.jsx
@@ -1,20 +1,60 @@
 import Navbar from "./components/Navbar";
 import RecordButton from "./components/RecordButton";
+import Ai3D from './components/Ai3D';
+import Conversation from './components/Conversation';
+import Exercises from './components/Exercises';
 
 const PatientHome = () => {
+  const messages = [
+    {
+      sender: 'patient',
+      text: 'Hi there, and I was hoping to try something new today. Can you guide me through a specific exercise from the set you provided?',
+    },
+    {
+      sender: 'ai',
+      text: "Of course! I'm glad to hear you've been keeping up with your exercises. Which one were you thinking of trying, or do you have a specific area you'd like to focus on today?",
+    },
+    {
+      sender: 'patient',
+      text: 'Hi there, and I was hoping to try something new today. Can you guide me through a specific exercise from the set you provided?',
+    },
+    {
+      sender: 'ai',
+      text: "Of course! I'm glad to hear you've been keeping up with your exercises. Which one were you thinking of trying, or do you have a specific area you'd like to focus on today?",
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-blue-100">
+    <div className="flex flex-col h-screen">
       <Navbar />
-      <main className="p-6">
-        <h1 className="text-2xl font-semibold mb-4">
-          Welcome to Your Home Page
-        </h1>
-        <p className="text-gray-700">
-          Here you can find your daily routines, track your progress, and manage
-          your health journey.
-        </p>
-        <RecordButton />
+      <main className="flex-grow p-6 overflow-hidden">
+        <div className="flex h-full">
+          <div className="w-1/2 flex flex-col justify-between h-full">
+            <header>
+              <h1 className="text-4xl font-medium">Welcome Back</h1>
+              <div className="text-3xl">John</div>
+            </header>
+            <Conversation messages={messages} />
+          <form className="flex items-center">
+            <input
+              type="text"
+              placeholder="You can type here..."
+              className="input input-bordered w-full max-w-xs mr-2"
+            />
+            <button className="btn btn-neutral">Prompt</button>
+          </form>
+          </div>
+          <div className="w-1/2">
+            <Exercises />
+          </div>
+        </div>
       </main>
+      <RecordButton />
+      <div className="relative">
+        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
+          <Ai3D />
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/views/patient/components/Ai3D.jsx b/frontend/src/views/patient/components/Ai3D.jsx
new file mode 100644
index 0000000..8bd4a10
--- /dev/null
+++ b/frontend/src/views/patient/components/Ai3D.jsx
@@ -0,0 +1,17 @@
+import Spline from '@splinetool/react-spline';
+
+const Ai3D = () => {
+  function onLoad(spline) {
+    spline.setZoom(1);
+  }
+
+  return (
+    <Spline
+      className="bg-white"
+      onLoad={onLoad}
+      scene="https://prod.spline.design/NSKDknA0gocVDcZ9/scene.splinecode"
+    />
+  );
+};
+
+export default Ai3D;
diff --git a/frontend/src/views/patient/components/Conversation.jsx b/frontend/src/views/patient/components/Conversation.jsx
new file mode 100644
index 0000000..9760fdf
--- /dev/null
+++ b/frontend/src/views/patient/components/Conversation.jsx
@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+const Conversation = ({ messages }) => {
+  const endOfMessagesRef = useRef(null);
+
+  useEffect(() => {
+    endOfMessagesRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <div className="h-64 overflow-y-auto pr-24">
+      {messages.map((message, index) => (
+        <div key={index} className={`h-32 flex items-center justify-center ${message.sender === 'patient' ? 'text-sm text-gray-700' : 'text-sm font-medium text-gray-900'}`}>
+          <p className="-center text-lg">{message.text}</p>
+        </div>
+      ))}
+      <div ref={endOfMessagesRef} />
+    </div>
+  );
+};
+
+export default Conversation;
diff --git a/frontend/src/views/patient/components/ExerciseCard.jsx b/frontend/src/views/patient/components/ExerciseCard.jsx
new file mode 100644
index 0000000..59fb90d
--- /dev/null
+++ b/frontend/src/views/patient/components/ExerciseCard.jsx
@@ -0,0 +1,22 @@
+
+const ExerciseCard = () => {
+  return (
+    <div className="card w-96 bg-base-100 shadow-xl">
+      <figure>
+        <img
+          src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+          alt="Shoes"
+        />
+      </figure>
+      <div className="card-body">
+        <h2 className="card-title">Shoes!</h2>
+        <p>If a dog chews shoes whose shoes does he choose?</p>
+        <div className="card-actions justify-end">
+          <button className="btn btn-primary">Buy Now</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExerciseCard;
diff --git a/frontend/src/views/patient/components/Exercises.jsx b/frontend/src/views/patient/components/Exercises.jsx
new file mode 100644
index 0000000..b27457c
--- /dev/null
+++ b/frontend/src/views/patient/components/Exercises.jsx
@@ -0,0 +1,12 @@
+import Card from "./ExerciseCard";
+
+const Exercises = () => {
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <Card />
+      <Card />
+    </div>
+  );
+};
+
+export default Exercises;
diff --git a/frontend/src/views/patient/components/Navbar.jsx b/frontend/src/views/patient/components/Navbar.jsx
index 477c7dc..3d6ca5f 100644
--- a/frontend/src/views/patient/components/Navbar.jsx
+++ b/frontend/src/views/patient/components/Navbar.jsx
@@ -1,6 +1,6 @@
 const Navbar = () => {
   return (
-    <div className="navbar bg-base-100">
+    <div className="navbar bg-base-100 border-b-[1px]">
       <div className="flex-1">
         <a className="btn btn-ghost text-xl">MobilityMate</a>
       </div>
@@ -28,7 +28,7 @@ const Navbar = () => {
             <div className="w-10 rounded-full">
               <img
                 alt="Tailwind CSS Navbar component"
-                src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
+                src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/12/Gradient_builder_2.jpg?auto=format&q=60&fit=max&w=930"
               />
             </div>
           </div>