diff --git a/frontend/src/components/Home/Header/WelcomeSection.css b/frontend/src/components/Home/Header/WelcomeSection.css
new file mode 100644
index 00000000..e7d52a79
--- /dev/null
+++ b/frontend/src/components/Home/Header/WelcomeSection.css
@@ -0,0 +1,19 @@
+.welcome-section {
+  position: absolute;
+  left: 230px;
+  top: 12%;
+  display: flex;
+  align-items: center;
+}
+
+.welcome-text {
+  font-weight: 300;
+  font-size: 25px;
+  color: #1e1e1e;
+}
+
+.user-name {
+  font-weight: bold;
+  font-size: 25px;
+  color: #1e1e1e;
+}
diff --git a/frontend/src/components/Home/Header/WelcomeSection.jsx b/frontend/src/components/Home/Header/WelcomeSection.jsx
new file mode 100644
index 00000000..55bf8608
--- /dev/null
+++ b/frontend/src/components/Home/Header/WelcomeSection.jsx
@@ -0,0 +1,12 @@
+import "./WelcomeSection.css";
+
+export default function WelcomeSection({ firstName }) {
+  return (
+    <div className="welcome-section">
+      <h1>
+        <span className="welcome-text">Welcome back, </span>
+        <span className="user-name">{firstName}</span>
+      </h1>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/BottomSection.css b/frontend/src/components/Home/LeftSection/BottomSection.css
new file mode 100644
index 00000000..355ce7a2
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/BottomSection.css
@@ -0,0 +1,8 @@
+.bottom-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  margin-top: 30px;
+  width: 95%;
+  height: calc(500px - 280px - 24px);
+}
diff --git a/frontend/src/components/Home/LeftSection/BottomSection.jsx b/frontend/src/components/Home/LeftSection/BottomSection.jsx
new file mode 100644
index 00000000..f96b659c
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/BottomSection.jsx
@@ -0,0 +1,12 @@
+import ShopBooksCard from "./ShopBooksCard";
+import RecentActivityCard from "./RecentActivityCard";
+import "./BottomSection.css";
+
+export default function BottomSection({ recentActivities }) {
+  return (
+    <div className="bottom-section">
+      <ShopBooksCard />
+      <RecentActivityCard recentActivities={recentActivities} />
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/GetStartedCard.css b/frontend/src/components/Home/LeftSection/GetStartedCard.css
new file mode 100644
index 00000000..a868c80e
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/GetStartedCard.css
@@ -0,0 +1,31 @@
+.get-started-card {
+  background: white;
+  border-radius: 30px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  width: 85%;
+  padding: 20px 30px;
+  height: 50%;
+}
+
+.get-started-card h2 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 0;
+  color: #2f3c50;
+}
+
+.get-started-card p {
+  color: #3c4049;
+  font-weight: 400;
+  text-align: left;
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+
+.button-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  height: 55%;
+}
diff --git a/frontend/src/components/Home/LeftSection/GetStartedCard.jsx b/frontend/src/components/Home/LeftSection/GetStartedCard.jsx
new file mode 100644
index 00000000..7fe2254a
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/GetStartedCard.jsx
@@ -0,0 +1,27 @@
+import { CLButtonSecondary } from "../../Buttons/CLButtons";
+import { NewLogModal } from "../../NewLogModal/NewLogModal";
+import "./GetStartedCard.css";
+
+export default function GetStartedCard({
+  handleAddLogbook,
+  handleViewHistory,
+}) {
+  return (
+    <div className="get-started-card">
+      <h2>Get Started</h2>
+      <p>
+        Convert handwritten clinical logs to standardized excel templates with
+        just a click of a button!
+      </p>
+      <div className="button-stack">
+        <NewLogModal />
+        <CLButtonSecondary onClick={handleAddLogbook} width={"230px"}>
+          Add Logbook
+        </CLButtonSecondary>
+        <CLButtonSecondary onClick={handleViewHistory} width={"230px"}>
+          View Log History
+        </CLButtonSecondary>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/MainContent.css b/frontend/src/components/Home/LeftSection/MainContent.css
new file mode 100644
index 00000000..08628568
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/MainContent.css
@@ -0,0 +1,13 @@
+.dashboard-container {
+  padding: 16px;
+  margin-left: 65px;
+  max-width: 1400px;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 24px;
+  margin-top: 5%;
+  height: auto;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Home/LeftSection/MainContent.jsx b/frontend/src/components/Home/LeftSection/MainContent.jsx
new file mode 100644
index 00000000..4b416ef4
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/MainContent.jsx
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../../contexts/AuthContext";
+import WelcomeSection from "../Header/WelcomeSection";
+import GetStartedCard from "./GetStartedCard";
+import BottomSection from "./BottomSection";
+import LogbooksCard from "../RightSection/LogbooksCard";
+import "./MainContent.css";
+
+export default function MainContent() {
+  const navigate = useNavigate();
+  const [setSelectedLog] = useState(null);
+  const { session } = useAuth();
+
+  const handleAddLogbook = () => {
+    navigate("/newLog");
+  };
+
+  const handleViewHistory = () => {
+    navigate("/history");
+  };
+
+  const recentActivities = [
+    {
+      id: 1,
+      action: "Added Log",
+      logName: "mylogexample",
+      time: "1d",
+    },
+    {
+      id: 2,
+      action: "Added Log",
+      logName: "mylogexample",
+      time: "1d",
+    },
+    {
+      id: 3,
+      action: "Added Log",
+      logName: "mylogexample",
+      time: "1d",
+    },
+    // Add more items as needed
+  ];
+
+  const progressItems = [
+    {
+      id: 1,
+      name: "Adult Cardiac 2025",
+      progress: 65,
+    },
+    {
+      id: 2,
+      name: "Adult Cardiac 2025",
+      progress: 65,
+    },
+    {
+      id: 3,
+      name: "Adult Cardiac 2025",
+      progress: 65,
+    },
+    // Add more items as needed
+  ];
+
+  return (
+    <div className="dashboard-container">
+      <WelcomeSection
+        firstName={session?.user?.user_metadata?.first_name || "User"}
+      />
+
+      <div className="content-grid">
+        <div>
+          <GetStartedCard
+            handleAddLogbook={handleAddLogbook}
+            handleViewHistory={handleViewHistory}
+          />
+
+          <BottomSection recentActivities={recentActivities} />
+        </div>
+
+        <LogbooksCard
+          progressItems={progressItems}
+          setSelectedLog={setSelectedLog}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/RecentActivityCard.css b/frontend/src/components/Home/LeftSection/RecentActivityCard.css
new file mode 100644
index 00000000..692ecea8
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/RecentActivityCard.css
@@ -0,0 +1,84 @@
+.recent-activity-card {
+  background: white;
+  border-radius: 30px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  height: 83%;
+  max-height: 300px;
+  overflow-y: auto;
+  transition: transform 0.2s ease;
+}
+
+.recent-activity-card:hover {
+  transform: translateY(-2px);
+}
+
+.activity-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.activity-header h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 0;
+  color: #2f3c50;
+}
+
+.activity-header .chevron-icon {
+  width: 20px;
+  height: 20px;
+  color: black;
+  margin-top: -20px;
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  margin-top: -10px;
+}
+
+.activity-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.activity-info {
+  display: flex;
+  gap: 5px;
+  color: #666;
+  font-size: 12px;
+}
+
+.activity-info h2 {
+  font-weight: 500;
+  font-size: 12px;
+  color: #2f3c50;
+  opacity: 0.8;
+}
+
+.activity-info h3 {
+  font-weight: 700;
+  font-size: 12px;
+  color: #2e4a8f;
+  margin-top: 10px;
+}
+
+.activity-time {
+  margin-left: 20px;
+}
+
+.activity-time h3 {
+  font-weight: 400;
+  font-size: 12px;
+  color: #a1b4de;
+}
+
+.time-icon {
+  color: #92a4cb;
+  width: 14px;
+  height: 14px;
+}
diff --git a/frontend/src/components/Home/LeftSection/RecentActivityCard.jsx b/frontend/src/components/Home/LeftSection/RecentActivityCard.jsx
new file mode 100644
index 00000000..fe1fb452
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/RecentActivityCard.jsx
@@ -0,0 +1,29 @@
+import { ChevronRightIcon, ClockIcon } from "@heroicons/react/24/outline";
+import "./RecentActivityCard.css";
+
+export default function RecentActivityCard({ recentActivities }) {
+  return (
+    <a href="/recent-activity" className="recent-activity-link">
+      <div className="recent-activity-card">
+        <div className="activity-header">
+          <h3>Recent Activity</h3>
+          <ChevronRightIcon className="chevron-icon" />
+        </div>
+        <div className="activity-list">
+          {recentActivities.map((activity) => (
+            <div key={activity.id} className="activity-item">
+              <div className="activity-info">
+                <h2>{activity.action}:</h2>
+                <h3 className="log-name">{activity.logName}</h3>
+              </div>
+              <div className="activity-time">
+                <h3>{activity.time}</h3>
+              </div>
+              <ClockIcon className="time-icon" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </a>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/ShopBooksCard.css b/frontend/src/components/Home/LeftSection/ShopBooksCard.css
new file mode 100644
index 00000000..f22af55d
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/ShopBooksCard.css
@@ -0,0 +1,58 @@
+.shop-books-card {
+  background: linear-gradient(232.43deg, #6c8bd3 9.4%, #244b94 90.17%);
+  border-radius: 30px;
+  padding: 20px;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  height: 83%;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.2s ease;
+}
+
+.shop-books-card:hover {
+  transform: translateY(-2px);
+}
+
+.shop-books-card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    circle at bottom,
+    rgba(255, 255, 255, 0) 30%,
+    rgba(255, 255, 255, 0.2) 100%
+  );
+  pointer-events: none;
+}
+
+.shop-books-card h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 0;
+  color: white;
+}
+
+.shop-books-card .chevron-icon {
+  width: 20px;
+  height: 20px;
+  color: white;
+  margin-top: 4px;
+}
+
+.shop-books-image {
+  position: absolute;
+  top: 43%;
+  left: 1px;
+  right: 1px;
+  width: 250px;
+  height: auto;
+  object-fit: contain;
+  z-index: 1;
+}
+  
\ No newline at end of file
diff --git a/frontend/src/components/Home/LeftSection/ShopBooksCard.jsx b/frontend/src/components/Home/LeftSection/ShopBooksCard.jsx
new file mode 100644
index 00000000..09411282
--- /dev/null
+++ b/frontend/src/components/Home/LeftSection/ShopBooksCard.jsx
@@ -0,0 +1,19 @@
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import ShopLogBooks from "../../../assets/images/ShopLogBooks.png";
+import "./ShopBooksCard.css";
+
+export default function ShopBooksCard() {
+  return (
+    <a href="/shop-logbooks" className="shop-books-link">
+      <div className="shop-books-card">
+        <h3>Shop Log Books</h3>
+        <ChevronRightIcon className="chevron-icon" />
+        <img
+          src={ShopLogBooks}
+          alt="Shop Log Books"
+          className="shop-books-image"
+        />
+      </div>
+    </a>
+  );
+}
diff --git a/frontend/src/components/Home/RightSection/LogbooksCard.css b/frontend/src/components/Home/RightSection/LogbooksCard.css
new file mode 100644
index 00000000..39c243dd
--- /dev/null
+++ b/frontend/src/components/Home/RightSection/LogbooksCard.css
@@ -0,0 +1,52 @@
+.logbooks-card {
+  background: white;
+  border-radius: 30px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  width: 85%;
+  padding: 24px;
+  height: 93%;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 30px;
+}
+
+.card-header h2 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 0;
+  margin-bottom: 8px;
+  color: #2f3c50;
+}
+
+.view-more-btn {
+  padding: 6px 12px;
+  border-radius: 20px;
+  border: 1px solid #9ab0e1;
+  background: #f7faff;
+  color: #4f607e;
+  font-size: 15px;
+  font-weight: bold;
+  cursor: pointer;
+  margin-right: 30px;
+}
+
+.logbooks-image {
+  width: 100%;
+  max-width: 280px;
+  margin: 30px auto;
+  display: block;
+}
+
+.progress-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  gap: 20px;
+  width: 80%;
+}
diff --git a/frontend/src/components/Home/RightSection/LogbooksCard.jsx b/frontend/src/components/Home/RightSection/LogbooksCard.jsx
new file mode 100644
index 00000000..ec14fb99
--- /dev/null
+++ b/frontend/src/components/Home/RightSection/LogbooksCard.jsx
@@ -0,0 +1,26 @@
+import LogBooks from "../../../assets/images/logbooks.png";
+import ProgressItem from "./ProgressItem";
+import "./LogbooksCard.css";
+
+export default function LogbooksCard({ progressItems, setSelectedLog }) {
+  return (
+    <div className="logbooks-card">
+      <div className="card-header">
+        <h2>Log Books</h2>
+        <button className="view-more-btn">View more</button>
+      </div>
+      <div className="logbooks-content">
+        <img src={LogBooks} alt="Logbooks" className="logbooks-image" />
+        <div className="progress-list">
+          {progressItems.map((item) => (
+            <ProgressItem
+              key={item.id}
+              item={item}
+              onClick={() => setSelectedLog(item.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/RightSection/ProgressItem.css b/frontend/src/components/Home/RightSection/ProgressItem.css
new file mode 100644
index 00000000..bd00ac29
--- /dev/null
+++ b/frontend/src/components/Home/RightSection/ProgressItem.css
@@ -0,0 +1,40 @@
+.progress-item {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  background-color: transparent;
+}
+
+.progress-item:hover {
+  background-color: #e7edf8;
+}
+  
+.progress-item:hover .progress-bar {
+  background: #fbfcfe;
+}
+
+.progress-item:hover .progress-info {
+  color: #244b94;
+}
+  
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  font-size: 15px;
+}
+  
+.progress-bar {
+  height: 8px;
+  background: #e7edf8;
+  border-radius: 4px;
+  overflow: hidden;
+}
+  
+.progress-fill {
+  height: 100%;
+  background: #244b94;
+  border-radius: 4px;
+}
diff --git a/frontend/src/components/Home/RightSection/ProgressItem.jsx b/frontend/src/components/Home/RightSection/ProgressItem.jsx
new file mode 100644
index 00000000..1a67a04c
--- /dev/null
+++ b/frontend/src/components/Home/RightSection/ProgressItem.jsx
@@ -0,0 +1,18 @@
+import "./ProgressItem.css";
+
+export default function ProgressItem({ item, onClick }) {
+  return (
+    <div className="progress-item" onClick={onClick}>
+      <div className="progress-info">
+        <span>{item.name}</span>
+        <span>{item.progress}%</span>
+      </div>
+      <div className="progress-bar">
+        <div
+          className="progress-fill"
+          style={{ width: `${item.progress}%` }}
+        ></div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/home/Home.css b/frontend/src/pages/home/Home.css
deleted file mode 100644
index accc5518..00000000
--- a/frontend/src/pages/home/Home.css
+++ /dev/null
@@ -1,335 +0,0 @@
-/* Shared Card Styles */
-.logbooks-card,
-.get-started-card,
-.recent-activity-card {
-  background: white;
-  border-radius: 30px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.logbooks-card,
-.get-started-card {
-  width: 85%;
-}
-
-/* Shared Heading Styles */
-.get-started-card h2,
-.card-header h2,
-.activity-header h3,
-.shop-books-card h3 {
-  font-size: 20px;
-  font-weight: 600;
-  margin-top: 0;
-}
-
-.get-started-card h2,
-.card-header h2,
-.activity-header h3 {
-  color: #2F3C50;
-}
-
-.shop-books-card h3 {
-  color: white;
-}
-
-/* Lift-on-Hover Effect */
-.shop-books-card,
-.recent-activity-card {
-  transition: transform 0.2s ease;
-}
-
-.shop-books-card:hover,
-.recent-activity-card:hover {
-  transform: translateY(-2px);
-}
-
-/* Chevron Icon Styles */
-.chevron-icon {
-  width: 20px;
-  height: 20px;
-}
-
-.shop-books-card .chevron-icon {
-  color: white;
-  margin-top: 4px;
-}
-
-.activity-header .chevron-icon {
-  color: black;
-  margin-top: -20px;
-}
-
-/* Dashboard Container */
-.dashboard-container {
-  padding: 16px;
-  margin-left: 65px;
-  max-width: 1400px;
-}
-
-/* Welcome Section */
-.welcome-section {
-  position: absolute;
-  left: 230px;
-  top: 12%;
-  display: flex;
-  align-items: center;
-}
-
-.welcome-text {
-  font-weight: 300;
-  font-size: 25px;
-  color: #1E1E1E;
-}
-
-.user-name {
-  font-weight: bold;
-  font-size: 25px;
-  color: #1E1E1E;
-}
-
-/* Content Grid */
-.content-grid {
-  display: grid;
-  grid-template-columns: 1fr 1.2fr;
-  gap: 24px;
-  margin-top: 5%;
-  height: auto;
-}
-
-/* Logbooks Card */
-.logbooks-card {
-  padding: 24px;
-  height: 93%;
-}
-
-/* Get Started Card */
-.get-started-card {
-  padding: 20px 30px;
-  height: 50%;
-}
-
-.get-started-card p {
-  color: #3c4049;
-  font-weight: 400;
-  text-align: left;
-  font-size: 14px;
-  margin-bottom: 16px;
-}
-
-/* Card Header */
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-left: 30px;
-}
-
-.card-header h2 {
-  margin-bottom: 8px;
-}
-
-/* Button Stack */
-.button-stack {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  height: 55%;
-}
-
-/* View More Button */
-.view-more-btn {
-  padding: 6px 12px;
-  border-radius: 20px;
-  border: 1px solid #9AB0E1;
-  background: #F7FAFF;
-  color: #4F607E;
-  font-size: 15px;
-  font-weight: bold;
-  cursor: pointer;
-  margin-right: 30px;
-}
-
-/* Progress List */
-.progress-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto;
-  gap: 20px;
-  width: 80%;
-}
-
-/* Progress Item */
-.progress-item {
-  width: 100%;
-  padding: 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  background-color: transparent;
-}
-
-.progress-item:hover {
-  background-color: #E7EDF8;
-}
-
-.progress-item:hover .progress-bar {
-  background: #FBFCFE;
-}
-
-.progress-item:hover .progress-info {
-  color: #244B94;
-}
-
-/* Progress Info */
-.progress-info {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 6px;
-  font-size: 15px;
-}
-
-/* Progress Bar */
-.progress-bar {
-  height: 8px;
-  background: #E7EDF8;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: #244B94;
-  border-radius: 4px;
-}
-
-/* Logbooks Image */
-.logbooks-image {
-  width: 100%;
-  max-width: 280px;
-  margin: 30px auto;
-  display: block;
-}
-
-/* Bottom Section */
-.bottom-section {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 30px;
-  margin-top: 30px;
-  width: 95%;
-  height: calc(500px - 280px - 24px);
-}
-
-/* Shop Books Card */
-.shop-books-card {
-  background: linear-gradient(232.43deg, #6C8BD3 9.4%, #244B94 90.17%);
-  border-radius: 30px;
-  padding: 20px;
-  color: white;
-  display: flex;
-  justify-content: space-between;
-  cursor: pointer;
-  height: 83%;
-  position: relative;
-  overflow: hidden;
-}
-
-.shop-books-card::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(
-    circle at bottom,
-    rgba(255, 255, 255, 0) 30%,
-    rgba(255, 255, 255, 0.2) 100%
-  );
-  pointer-events: none;
-}
-
-/* Shop Books Image */
-.shop-books-image {
-  position: absolute;
-  top: 43%;
-  left: 1px;
-  right: 1px;
-  width: 250px;
-  height: auto;
-  object-fit: contain;
-  z-index: 1;
-}
-
-/* Recent Activity Card */
-.recent-activity-card {
-  padding: 20px;
-  height: 83%;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-/* Activity Header */
-.activity-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* Activity List */
-.activity-list {
-  display: flex;
-  flex-direction: column;
-  margin-top: -10px;
-}
-
-/* Activity Item */
-.activity-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-/* Activity Info */
-.activity-info {
-  display: flex;
-  gap: 5px;
-  color: #666;
-  font-size: 12px;
-}
-
-.activity-info h2 {
-  font-weight: 500;
-  font-size: 12px;
-  color: #2F3C50;
-  opacity: 0.8;
-}
-
-.activity-info h3 {
-  font-weight: 700;
-  font-size: 12px;
-  color: #2E4A8F;
-  margin-top: 10px;
-}
-
-/* Activity Time */
-.activity-time {
-  margin-left: 20px;
-}
-
-.activity-time h3 {
-  font-weight: 400;
-  font-size: 12px;
-  color: #A1B4DE;
-}
-
-/* Time Icon */
-.time-icon {
-  color: #92a4cb;
-  width: 14px;
-  height: 14px;
-}
\ No newline at end of file
diff --git a/frontend/src/pages/home/Home.jsx b/frontend/src/pages/home/Home.jsx
index 05802376..83dc2a46 100644
--- a/frontend/src/pages/home/Home.jsx
+++ b/frontend/src/pages/home/Home.jsx
@@ -1,13 +1,5 @@
-import { useState } from "react";
-import { CLButtonSecondary } from "../../components/Buttons/CLButtons";
-import { useNavigate } from "react-router-dom";
-import LogBooks from "../../assets/images/logbooks.png";
-import ShopLogBooks from "../../assets/images/ShopLogBooks.png";
-import { ChevronRightIcon, ClockIcon } from "@heroicons/react/24/outline";
-import "./Home.css";
-import { useAuth } from "../../contexts/AuthContext";
 import { NavContentWrapper } from "../../components/NavContentWrapper/NavContentWrapper";
-import { NewLogModal } from "../../components/NewLogModal/NewLogModal";
+import MainContent from "../../components/Home/LeftSection/MainContent";
 
 export default function Home() {
   return (
@@ -16,159 +8,3 @@ export default function Home() {
     </NavContentWrapper>
   );
 }
-
-function MainContent() {
-  const navigate = useNavigate();
-  const [setSelectedLog] = useState(null);
-  const { session } = useAuth();
-
-  const handleAddLogbook = () => {
-    navigate("/newLog");
-  };
-
-  const handleViewHistory = () => {
-    navigate("/history");
-  };
-
-  const recentActivities = [
-    {
-      id: 1,
-      action: "Added Log",
-      logName: "mylogexample",
-      time: "1d",
-    },
-    {
-      id: 2,
-      action: "Added Log",
-      logName: "mylogexample",
-      time: "1d",
-    },
-    {
-      id: 3,
-      action: "Added Log",
-      logName: "mylogexample",
-      time: "1d",
-    },
-    // Add more items as needed
-  ];
-
-  const progressItems = [
-    {
-      id: 1,
-      name: "Adult Cardiac 2025",
-      progress: 65,
-    },
-    {
-      id: 2,
-      name: "Adult Cardiac 2025",
-      progress: 65,
-    },
-    {
-      id: 3,
-      name: "Adult Cardiac 2025",
-      progress: 65,
-    },
-    // Add more items as needed
-  ];
-
-  return (
-    <div className="dashboard-container">
-      <div className="welcome-section">
-        <h1>
-          <span className="welcome-text">Welcome back, </span>
-          <span className="user-name">
-            {session?.user?.user_metadata?.first_name || "User"}
-          </span>
-        </h1>
-      </div>
-
-      <div className="content-grid">
-        <div>
-          <div className="get-started-card">
-            <h2>Get Started</h2>
-            <p>
-              Convert handwritten clinical logs to standardized excel templates
-              with just a click of a button!
-            </p>
-            <div className="button-stack">
-              <NewLogModal />
-              <CLButtonSecondary onClick={handleAddLogbook} width={"230px"}>
-                Add Logbook
-              </CLButtonSecondary>
-              <CLButtonSecondary onClick={handleViewHistory} width={"230px"}>
-                View Log History
-              </CLButtonSecondary>
-            </div>
-          </div>
-
-          <div className="bottom-section">
-            <a href="/shop-logbooks" className="shop-books-link">
-              <div className="shop-books-card">
-                <h3>Shop Log Books</h3>
-                <ChevronRightIcon className="chevron-icon" />
-                <img
-                  src={ShopLogBooks}
-                  alt="Shop Log Books"
-                  className="shop-books-image"
-                />
-              </div>
-            </a>
-
-            <a href="/recent-activity" className="recent-activity-link">
-              <div className="recent-activity-card">
-                <div className="activity-header">
-                  <h3>Recent Activity</h3>
-                  <ChevronRightIcon className="chevron-icon" />
-                </div>
-                <div className="activity-list">
-                  {recentActivities.map((activity) => (
-                    <div key={activity.id} className="activity-item">
-                      <div className="activity-info">
-                        <h2>{activity.action}:</h2>
-                        <h3 className="log-name">{activity.logName}</h3>
-                      </div>
-                      <div className="activity-time">
-                        <h3>{activity.time}</h3>
-                      </div>
-                      <ClockIcon className="time-icon" />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </a>
-          </div>
-        </div>
-
-        <div className="logbooks-card">
-          <div className="card-header">
-            <h2>Log Books</h2>
-            <button className="view-more-btn">View more</button>
-          </div>
-          <div className="logbooks-content">
-            <img src={LogBooks} alt="Logbooks" className="logbooks-image" />
-            <div className="progress-list">
-              {progressItems.map((item) => (
-                <div
-                  key={item.id}
-                  className="progress-item"
-                  onClick={() => setSelectedLog(item.id)}
-                >
-                  <div className="progress-info">
-                    <span>{item.name}</span>
-                    <span>{item.progress}%</span>
-                  </div>
-                  <div className="progress-bar">
-                    <div
-                      className="progress-fill"
-                      style={{ width: `${item.progress}%` }}
-                    ></div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}