diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b34afdb7..c00a693f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,7 +9,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Use Yarn Cache
         uses: actions/cache@v3
         with:
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
index 3a7e6423..99751372 100644
--- a/.github/workflows/firebase-hosting-merge.yml
+++ b/.github/workflows/firebase-hosting-merge.yml
@@ -12,6 +12,10 @@ jobs:
     environment: prod
     steps:
       - uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
       - run: yarn install
       - run: yarn workspace frontend build
         env:
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
index 08502fcb..f712251f 100644
--- a/.github/workflows/firebase-hosting-pull-request.yml
+++ b/.github/workflows/firebase-hosting-pull-request.yml
@@ -12,7 +12,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - run: yarn install
       - run: yarn workspace frontend build
         env:
diff --git a/backend/src/app.ts b/backend/src/app.ts
index c6c84a95..12d75ec0 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -17,6 +17,9 @@ import {
   QuestionForm,
   QuestionFormWithId,
   LocationTravelTimes,
+  BlogPost,
+  BlogPostInternal,
+  BlogPostWithId,
 } from '@common/types/db-types';
 // Import Firebase configuration and types
 import { auth } from 'firebase-admin';
@@ -42,7 +45,7 @@ const likesCollection = db.collection('likes');
 const usersCollection = db.collection('users');
 const pendingBuildingsCollection = db.collection('pendingBuildings');
 const contactQuestionsCollection = db.collection('contactQuestions');
-
+const blogPostCollection = db.collection('blogposts');
 const travelTimesCollection = db.collection('travelTimes');
 
 // Middleware setup
@@ -68,6 +71,288 @@ app.get('/api/faqs', async (_, res) => {
   res.status(200).send(JSON.stringify(faqs));
 });
 
+/**
+ * new-blog-post – Creates a new blog post.
+ *
+ * @remarks
+ * This endpoint creates and adds a new blog post into the products database. If necessary data are not given, the endpoint
+ * will result in an error. Certain fields are defaulted to constant values.
+ *
+ * @route POST /api/new-blog-post
+ *
+ * @status
+ * - 201: Successfully created new blog post.
+ * - 401: Error due to unauthorized access or authentication issues.
+ */
+app.post('/api/new-blog-post', authenticate, async (req, res) => {
+  if (!req.user) throw new Error('Not authenticated');
+  const realUserId = req.user.uid;
+  try {
+    const doc = blogPostCollection.doc();
+    const blogPost = req.body as BlogPost;
+    if (
+      blogPost.content === '' ||
+      blogPost.blurb === '' ||
+      blogPost.title === '' ||
+      !blogPost.coverImageUrl ||
+      !blogPost.tags
+    ) {
+      res.status(401).send('Error: missing fields');
+    }
+    doc.set({
+      ...blogPost,
+      date: new Date(),
+      likes: 0,
+      saves: 0,
+      userId: realUserId,
+    });
+    return res.status(201).send(doc.id);
+  } catch (err) {
+    console.error(err);
+    return res.status(401).send('Error');
+  }
+});
+
+/**
+ * delete-blog-post/:blogPostId – Deletes a specified blog post.
+ *
+ * @remarks
+ * This endpoint deletes a specified blog post from its ID. The post is removed from the products database.
+ * If no blog post is found or the user is not authorized to delete the review, then an error is thrown.
+ *
+ * @route PUT /api/delete-blog-post/:blogPostId
+ *
+ * @status
+ * - 200: Successfully deleted the specified blog post.
+ * - 404: Blog post could not be found from ID.
+ * - 401: Error due to unauthorized access or authentication issues.
+ */
+app.put('/api/delete-blog-post/:blogPostId', authenticate, async (req, res) => {
+  if (!req.user) throw new Error('Not authenticated');
+  const { blogPostId } = req.params; // Extract the blog post document ID from the request parameters
+  const { email } = req.user;
+  // Check if the user is an admin or the creator of the blog post
+  const blogPostDoc = blogPostCollection.doc(blogPostId);
+  const blogPostData = (await blogPostDoc.get()).data();
+  if (!blogPostData) {
+    res.status(404).send('Blog Post not found');
+    return;
+  }
+  if (!(email && admins.includes(email))) {
+    res.status(403).send('Unauthorized');
+    return;
+  }
+  try {
+    // Update the status of the blog post document to 'DELETED'
+    await blogPostCollection.doc(blogPostId).update({ visibility: 'ARCHIVED' });
+    // Send a success response
+    res.status(200).send('Success');
+  } catch (err) {
+    // Handle any errors that may occur during the deletion process
+    console.log(err);
+    res.status(401).send('Error');
+  }
+});
+
+/**
+ * edit-blog-post/:blogPostId – Edits a specified blog post.
+ *
+ * @remarks
+ * This endpoint edits a specified blog post from its ID. The post is edited from the products database.
+ * If no blog post is found or the user is not authorized to edit the review, then an error is thrown.
+ *
+ * @route POST /api/edit-blog-post/:blogPostId
+ *
+ * @status
+ * - 201: Successfully edited the specified blog post.
+ * - 404: Blog post could not be found from ID.
+ * - 401: Error due to unauthorized access or authentication issues.
+ */
+app.post('/api/edit-blog-post/:blogPostId', authenticate, async (req, res) => {
+  // if (!req.user) {
+  //  throw new Error('not authenticated');
+  // }
+  const { blogPostId } = req.params;
+  // const { email } = req.user;
+  try {
+    const blogPostDoc = blogPostCollection.doc(blogPostId); // specific doc for the id
+    const blogPostData = (await blogPostDoc.get()).data();
+    if (!blogPostData) {
+      res.status(404).send('Blog Post not found');
+      return;
+    }
+    // if (!(email && admins.includes(email))) {
+    //  res.status(401).send('Error: user is not an admin. Not authorized');
+    //  return;
+    // }
+    const updatedBlogPost = req.body as BlogPost;
+    if (updatedBlogPost.content === '' || updatedBlogPost.title === '') {
+      res.status(401).send('Error: missing fields');
+    }
+    blogPostDoc
+      .update({
+        ...updatedBlogPost,
+        date: new Date(updatedBlogPost.date),
+      })
+      .then(() => {
+        res.status(201).send(blogPostId);
+      });
+  } catch (err) {
+    console.error(err);
+    res.status(401).send('Error');
+  }
+});
+
+/**
+ * blog-post-by-id/:blogPostId – Gets a specified blog post.
+ *
+ * @remarks
+ * This endpoint gets a specified blog post from its ID. The post is grabbed from the products database.
+ * If no blog post is found, then an error is thrown.
+ *
+ * @route GET /api/blog-post-by-id/:blogPostId
+ *
+ * @status
+ * - 200: Successfully edited the specified blog post.
+ * - 404: Blog post could not be found from ID.
+ * - 401: Error due to unauthorized access or authentication issues.
+ */
+app.get('/api/blog-post-by-id/:blogPostId', async (req, res) => {
+  const { blogPostId } = req.params;
+
+  try {
+    const blogPostDoc = await blogPostCollection.doc(blogPostId).get();
+    if (!blogPostDoc.exists) {
+      res.status(404).send('Blog Post not found');
+      return;
+    }
+
+    const data = blogPostDoc.data();
+
+    let blogPost: BlogPostInternal;
+    if (data?.date && typeof (data.date as any).toDate === 'function') {
+      // Firestore Timestamp -> Date
+      blogPost = { ...data, date: data.date.toDate() } as BlogPostInternal;
+    } else {
+      // Already a Date or missing
+      blogPost = { ...data } as BlogPostInternal;
+    }
+
+    const blogPostWithId = { ...blogPost, id: blogPostDoc.id } as BlogPostWithId;
+    res.status(200).json(blogPostWithId);
+  } catch (err) {
+    console.error('Error retrieving Blog Post', err);
+    res.status(500).send('Error retrieving Blog Post');
+  }
+});
+
+/**
+ * blog-post/like/:userId – Fetches blog posts liked by a user.
+ *
+ * @remarks
+ * This endpoint retrieves blog posts that a user has liked.
+ *
+ * @route GET /api/blog-post/like/:userId
+ *
+ * @status
+ * - 200: Successfully retrieved the blog posts.
+ * - 401: Error due to unauthorized access or authentication issues.
+ */
+app.get('/api/blog-post/like/:userId', authenticate, async (req, res) => {
+  if (!req.user) {
+    throw new Error('not authenticated');
+  }
+  const realUserId = req.user.uid;
+  const { userId } = req.params;
+  if (userId !== realUserId) {
+    res.status(401).send("Error: user is not authorized to access another user's likes");
+    return;
+  }
+  const likesDoc = await likesCollection.doc(userId).get();
+
+  if (likesDoc.exists) {
+    const data = likesDoc.data();
+    if (data) {
+      const blogPostIds = data.blogPosts;
+      const matchingBlogPosts: BlogPostWithId[] = [];
+      if (blogPostIds.length > 0) {
+        const query = blogPostCollection.where(FieldPath.documentId(), 'in', blogPostIds);
+        const querySnapshot = await query.get();
+        querySnapshot.forEach((doc) => {
+          const data = doc.data();
+          const blogPostData = { ...data, date: data.date.toDate() };
+          matchingBlogPosts.push({ ...blogPostData, id: doc.id } as BlogPostWithId);
+        });
+      }
+      res.status(200).send(JSON.stringify(matchingBlogPosts));
+      return;
+    }
+  }
+
+  res.status(200).send(JSON.stringify([]));
+});
+
+/**
+ * blog-post/like/:userId – Fetches blog posts saved by a user.
+ *
+ * @remarks
+ * This endpoint retrieves blog posts that a user has saved.
+ *
+ * @route GET /api/blog-post/save/:userId
+ *
+ * @status
+ * - 200: Successfully retrieved the blog posts.
+ * - 401: Error due to unauthorized access or authentication issues.
+ */
+app.get('/api/blog-post/save/:userId', authenticate, async (req, res) => {
+  if (!req.user) {
+    throw new Error('not authenticated');
+  }
+  const realUserId = req.user.uid;
+  const { userId } = req.params;
+  if (userId !== realUserId) {
+    res.status(401).send("Error: user is not authorized to access another user's saves");
+    return;
+  }
+  const savesDoc = await likesCollection.doc(realUserId).get();
+
+  if (savesDoc.exists) {
+    const data = savesDoc.data();
+    if (data) {
+      const blogPostIds = Object.keys(data);
+      const matchingBlogPosts: BlogPostWithId[] = [];
+      if (blogPostIds.length > 0) {
+        const query = blogPostCollection.where(FieldPath.documentId(), 'in', blogPostIds);
+        const querySnapshot = await query.get();
+        querySnapshot.forEach((doc) => {
+          const data = doc.data();
+          const blogPostData = { ...data, date: data.date.toDate() };
+          matchingBlogPosts.push({ ...blogPostData, id: doc.id } as BlogPostWithId);
+        });
+      }
+      res.status(200).send(JSON.stringify(matchingBlogPosts));
+      return;
+    }
+  }
+
+  res.status(200).send(JSON.stringify([]));
+});
+
+/**
+ * blog-posts – Gets all visible blog posts for the Advice page.
+ *
+ * @route GET /api/blog-posts
+ */
+app.get('/api/blog-posts', async (req, res) => {
+  const blogPostDocs = (await blogPostCollection.where('visibility', '==', 'ACTIVATED').get()).docs;
+  const blogPosts: BlogPost[] = blogPostDocs.map((doc) => {
+    const data = doc.data();
+    const blogPost = { ...data } as BlogPostInternal;
+    return { ...blogPost, id: doc.id } as BlogPostWithId;
+  });
+  res.status(200).send(JSON.stringify(blogPosts));
+});
+
 // API endpoint to post a new review
 app.post('/api/new-review', authenticate, async (req, res) => {
   try {
@@ -784,10 +1069,10 @@ const likeHandler =
           t.update(reviewRef, { likes: FieldValue.increment(likeChange) });
         }
       });
-      res.status(200).send(JSON.stringify({ result: 'Success' }));
+      return res.status(200).send(JSON.stringify({ result: 'Success' }));
     } catch (err) {
       console.error(err);
-      res.status(400).send('Error');
+      return res.status(400).send('Error');
     }
   };
 
@@ -861,10 +1146,10 @@ const saveApartmentHandler =
         t.update(userRef, { apartments: userApartments });
       });
 
-      res.status(200).send(JSON.stringify({ result: 'Success' }));
+      return res.status(200).send(JSON.stringify({ result: 'Success' }));
     } catch (err) {
       console.error(err);
-      res.status(400).send('Error');
+      return res.status(400).send('Error');
     }
   };
 
@@ -906,10 +1191,10 @@ const saveLandlordHandler =
         t.update(userRef, { landlords: userLandlords });
       });
 
-      res.status(200).send(JSON.stringify({ result: 'Success' }));
+      return res.status(200).send(JSON.stringify({ result: 'Success' }));
     } catch (err) {
       console.error(err);
-      res.status(400).send('Error');
+      return res.status(400).send('Error');
     }
   };
 
@@ -924,21 +1209,21 @@ const checkSavedApartment = (): RequestHandler => async (req, res) => {
     if (!userRef) {
       throw new Error('User data not found');
     }
-    await db.runTransaction(async (t) => {
+
+    const isSaved = await db.runTransaction(async (t) => {
       const userDoc = await t.get(userRef);
       if (!userDoc.exists) {
         t.set(userRef, { apartments: [] });
+        return false;
       }
       const userApartments = userDoc.data()?.apartments || [];
-      if (userApartments.includes(apartmentId)) {
-        res.status(200).send(JSON.stringify({ result: true }));
-      } else {
-        res.status(200).send(JSON.stringify({ result: false }));
-      }
+      return userApartments.includes(apartmentId);
     });
+
+    return res.status(200).send(JSON.stringify({ result: isSaved }));
   } catch (err) {
     console.error(err);
-    res.status(400).send('Error');
+    return res.status(400).send('Error');
   }
 };
 
@@ -953,21 +1238,21 @@ const checkSavedLandlord = (): RequestHandler => async (req, res) => {
     if (!userRef) {
       throw new Error('User data not found');
     }
-    await db.runTransaction(async (t) => {
+
+    const isSaved = await db.runTransaction(async (t) => {
       const userDoc = await t.get(userRef);
       if (!userDoc.exists) {
         t.set(userRef, { landlords: [] });
+        return false;
       }
       const userLandlords = userDoc.data()?.landlords || [];
-      if (userLandlords.includes(landlordId)) {
-        res.status(200).send(JSON.stringify({ result: true }));
-      } else {
-        res.status(200).send(JSON.stringify({ result: false }));
-      }
+      return userLandlords.includes(landlordId);
     });
+
+    return res.status(200).send(JSON.stringify({ result: isSaved }));
   } catch (err) {
     console.error(err);
-    res.status(400).send('Error');
+    return res.status(400).send('Error');
   }
 };
 
diff --git a/common/types/db-types.ts b/common/types/db-types.ts
index 20463657..acd849ff 100644
--- a/common/types/db-types.ts
+++ b/common/types/db-types.ts
@@ -33,10 +33,27 @@ export type Review = {
   readonly reports?: readonly ReportEntry[];
 };
 
+export type BlogPost = {
+  readonly content: string;
+  readonly blurb: string;
+  readonly date: Date;
+  readonly likes?: number;
+  readonly tags: string[];
+  readonly title: string;
+  readonly userId?: string | null;
+  readonly visibility: string;
+  readonly saves: number;
+  readonly coverImageUrl: string;
+};
+
 export type ReviewWithId = Review & Id;
 
+export type BlogPostWithId = BlogPost & Id;
+
 export type ReviewInternal = Review & {};
 
+export type BlogPostInternal = BlogPost & {};
+
 export type Landlord = {
   readonly name: string;
   readonly contact: string | null;
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
index c3647487..ddc95ee7 100644
--- a/frontend/.eslintrc
+++ b/frontend/.eslintrc
@@ -1,7 +1,14 @@
 {
   "extends": [
-    "../.eslintrc",
     "react-app",
     "react-app/jest"
-  ]
+  ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".mjs", ".js", ".json", ".ts", ".tsx"],
+        "paths": ["common", "frontend/src", "backend/src"]
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 6c3bf983..d8a710a9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@tinymce/tinymce-react": "3.13.1",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 66dd0aa0..fe54d1ac 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,7 +2,8 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import './App.scss';
 import { Route, Switch, useLocation } from 'react-router-dom';
 import HomePage from './pages/HomePage';
-import FAQPage from './pages/FAQPage';
+import BlogPostPage from './pages/BlogPostPage';
+import BlogPostDetailPage from './pages/BlogPostDetailPage';
 import ReviewPage from './pages/ReviewPage';
 import LandlordPage from './pages/LandlordPage';
 import ProfilePage from './pages/ProfilePage';
@@ -73,9 +74,9 @@ const home: NavbarButton = {
   href: '/',
 };
 
-const faq: NavbarButton = {
-  label: 'FAQ',
-  href: '/faq',
+const blogs: NavbarButton = {
+  label: 'Advice',
+  href: '/blogs',
 };
 
 export type CardData = {
@@ -91,7 +92,7 @@ export type LocationCardData = {
   location: string;
 };
 
-const headersData = [home, faq];
+const headersData = [home, blogs];
 
 hotjar.initialize(HJID, HJSV);
 
@@ -113,7 +114,10 @@ const App = (): ReactElement => {
           <Switch>
             <Route exact path="/" component={() => <HomePage user={user} setUser={setUser} />} />
 
-            <Route exact path="/faq" component={FAQPage} />
+            <Route exact path="/blogs" component={BlogPostPage} />
+            <Route path="/apt-advice/:postId">
+              <BlogPostDetailPage />
+            </Route>
             <Route
               exact
               path="/reviews"
@@ -149,7 +153,6 @@ const App = (): ReactElement => {
             {isAdmin(user) && <Route exact path="/admin" component={AdminPage} />}
           </Switch>
         </div>
-        {pathname !== '/faq' && <Footer />}
         <ContactModal user={user} />
       </ModalProvider>
     </ThemeProvider>
diff --git a/frontend/src/assets/blog-hero.jpg b/frontend/src/assets/blog-hero.jpg
new file mode 100644
index 00000000..94635d8e
Binary files /dev/null and b/frontend/src/assets/blog-hero.jpg differ
diff --git a/frontend/src/components/Apartment/MapInfo.tsx b/frontend/src/components/Apartment/MapInfo.tsx
index 97a2be38..cb192c79 100644
--- a/frontend/src/components/Apartment/MapInfo.tsx
+++ b/frontend/src/components/Apartment/MapInfo.tsx
@@ -7,12 +7,9 @@ import expandIcon from '../../assets/expand-button.svg';
 import zoomInIcon from '../../assets/zoom-in-icon.png';
 import zoomOutIcon from '../../assets/zoom-out-icon.png';
 import blackPinIcon from '../../assets/ph_map-pin-fill.svg';
-import { config } from 'dotenv';
 import { Marker } from './Marker';
 import { LocationTravelTimes } from '../../../../common/types/db-types';
 
-config();
-
 export type BaseProps = {
   readonly address: string | null;
   readonly latitude?: number;
diff --git a/frontend/src/components/Search/SearchResultsMap.tsx b/frontend/src/components/Search/SearchResultsMap.tsx
index a7363e4f..80a64e55 100644
--- a/frontend/src/components/Search/SearchResultsMap.tsx
+++ b/frontend/src/components/Search/SearchResultsMap.tsx
@@ -3,15 +3,12 @@ import { Box, Grid, IconButton, Typography, makeStyles } from '@material-ui/core
 import GoogleMapReact from 'google-map-react';
 import aptIcon from '../../assets/location-pin.svg';
 import mapPinIcon from '../../assets/map-pin.svg';
-import { config } from 'dotenv';
 import { Marker } from '../Apartment/Marker';
 import { LocationTravelTimes } from '../../../../common/types/db-types';
 import { CardData } from '../../App';
 import NewApartmentCard from '../ApartmentCard/NewApartmentCard';
 import { MapMarkerWithCard } from '../Apartment/MarkerWithAptCard';
 
-config();
-
 export type BaseProps = {
   readonly address: string | null;
   readonly latitude?: number;
diff --git a/frontend/src/components/utils/NavBar/index.tsx b/frontend/src/components/utils/NavBar/index.tsx
index 3d6e7db1..86c8c591 100644
--- a/frontend/src/components/utils/NavBar/index.tsx
+++ b/frontend/src/components/utils/NavBar/index.tsx
@@ -205,7 +205,7 @@ function GetButtonColor(lab: string) {
   return (location.pathname === '/' && lab.includes('Home')) ||
     ((location.pathname.includes('landlord') || location.pathname.includes('reviews')) &&
       lab.includes('Reviews')) ||
-    (location.pathname.includes('faq') && lab.includes('FAQ')) ||
+    (location.pathname.includes('blog') && lab.includes('BlogPosts')) ||
     (location.pathname.includes('profile') && lab.includes('Profile')) ||
     (location.pathname.includes('bookmarks') && lab.includes('Bookmarks'))
     ? 'secondary'
@@ -524,7 +524,10 @@ const NavBar = ({ headersData, user, setUser }: Props): ReactElement => {
     </Grid>
   );
 
-  const searchBar = location.pathname !== '/' && !location.pathname.startsWith('/search');
+  const searchBar =
+    location.pathname !== '/' &&
+    location.pathname !== '/blogs' &&
+    !location.pathname.startsWith('/search');
   const displayDesktop = () => {
     return (
       <Grid container className={toolbar} alignItems="center" justifyContent="space-between">
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index 0584489d..1f7f4d2d 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -1,29 +1,37 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import {
   Typography,
   makeStyles,
   Grid,
   Container,
-  List,
-  ListItem,
-  ListItemText,
+  Box,
   AppBar,
   Toolbar,
   Tabs,
   Tab,
   IconButton,
+  TextField,
+  MenuItem,
+  Chip,
+  Button,
 } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 import {
   CantFindApartmentFormWithId,
   QuestionFormWithId,
   ReviewWithId,
 } from '../../../common/types/db-types';
+import axios from 'axios';
+import { getUser, createAuthHeaders } from '../utils/firebase';
+import firebase from 'firebase/app';
+import 'firebase/storage';
 import { get } from '../utils/call';
 import AdminReviewComponent from '../components/Admin/AdminReview';
 import { useTitle } from '../utils';
 import { Chart } from 'react-google-charts';
 import { sortReviews } from '../utils/sortReviews';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { Editor } from '@tinymce/tinymce-react';
 import clsx from 'clsx';
 import { colors } from '../colors';
 import PhotoCarousel from '../components/PhotoCarousel/PhotoCarousel';
@@ -53,35 +61,31 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-/**
- * AdminPage Component
- *
- * This component represents a page that only authorized admins can view. The page displays information about reviews, allows admins
- * to approve or decline reviews. The page also displays contact information from the contact modals ("Can't Find Your Apartment" form
- * and "Ask Us a Question" form).
- *
- * @returns The rendered AdminPage component.
- */
 const AdminPage = (): ReactElement => {
   const [selectedTab, setSelectedTab] = useState('Reviews');
 
   const [pendingData, setPendingData] = useState<ReviewWithId[]>([]);
   const [declinedData, setDeclinedData] = useState<ReviewWithId[]>([]);
   const [approvedData, setApprovedData] = useState<ReviewWithId[]>([]);
+  const [reportedData, setReportedData] = useState<ReviewWithId[]>([]);
 
   type ReviewCount = { count: number };
   const [ctownReviewCount, setCtownReviewCount] = useState<ReviewCount>({ count: 0 });
   const [westReviewCount, setWestReviewCount] = useState<ReviewCount>({ count: 0 });
   const [dtownReviewCount, setDtownReviewCount] = useState<ReviewCount>({ count: 0 });
   const [northReviewCount, setNorthReviewCount] = useState<ReviewCount>({ count: 0 });
+
   const [toggle, setToggle] = useState(false);
+
   const [pendingApartment, setPendingApartmentData] = useState<CantFindApartmentFormWithId[]>([]);
   const [pendingContactQuestions, setPendingContactQuestions] = useState<QuestionFormWithId[]>([]);
+
   const [pendingExpanded, setPendingExpanded] = useState(true);
   const [declinedExpanded, setDeclinedExpanded] = useState(true);
-  const [reportedData, setReportedData] = useState<ReviewWithId[]>([]);
   const [reportedExpanded, setReportedExpanded] = useState(true);
+
   const { container, sectionHeader, expand, expandOpen } = useStyles();
+
   const {
     carouselPhotos,
     carouselStartIndex,
@@ -90,9 +94,125 @@ const AdminPage = (): ReactElement => {
     closePhotoCarousel,
   } = usePhotoCarousel([]);
 
+  // -----------------------------
+  // Blog post creation (improved)
+  // -----------------------------
+  const [blogTitle, setBlogTitle] = useState('');
+  const [blogBlurb, setBlogBlurb] = useState('');
+  const [blogVisibility, setBlogVisibility] = useState<'ACTIVATED' | 'ARCHIVED'>('ACTIVATED');
+  const [blogContent, setBlogContent] = useState<string>(''); // TinyMCE HTML
+  const [blogTags, setBlogTags] = useState<string[]>([]);
+
+  const [coverImageUrl, setCoverImageUrl] = useState('');
+  const [blogSaving, setBlogSaving] = useState(false);
+  const [blogError, setBlogError] = useState<string | null>(null);
+  const [blogSuccess, setBlogSuccess] = useState<string | null>(null);
+
+  const coverInputRef = useRef<HTMLInputElement | null>(null);
+  const [coverUploading, setCoverUploading] = useState(false);
+  const [coverPreviewUrl, setCoverPreviewUrl] = useState<string | null>(null);
+
+  const pickCoverImage = () => coverInputRef.current?.click();
+
+  const onCoverFileSelected = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // optional: local preview while uploading
+    setCoverPreviewUrl(URL.createObjectURL(file));
+
+    try {
+      setBlogError(null);
+      setCoverUploading(true);
+
+      const safeName = file.name.replace(/\s+/g, '_');
+      const path = `blog-covers/${Date.now()}-${safeName}`;
+
+      const storageRef = firebase.storage().ref().child(path);
+      await storageRef.put(file);
+      const url = await storageRef.getDownloadURL();
+
+      setCoverImageUrl(url);
+      setBlogSuccess('Cover image uploaded!');
+    } catch (err) {
+      console.error(err);
+      setBlogError('Failed to upload cover image.');
+    } finally {
+      setCoverUploading(false);
+      e.target.value = '';
+    }
+  };
+
+  const svgPlaceholder = (w: number, h: number, label: string) => {
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+        <defs>
+          <pattern id="checker" width="32" height="32" patternUnits="userSpaceOnUse">
+            <rect width="32" height="32" fill="#f3f4f6"/>
+            <rect width="16" height="16" fill="#e5e7eb"/>
+            <rect x="16" y="16" width="16" height="16" fill="#e5e7eb"/>
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#checker)"/>
+        <rect x="10" y="10" width="${Math.max(w - 20, 20)}" height="${Math.max(h - 20, 20)}"
+              rx="14" fill="none" stroke="#bdbdbd" stroke-width="3" stroke-dasharray="10 8"/>
+        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
+              font-family="Inter, Arial, sans-serif" font-size="18" fill="#6b7280">
+          ${label}
+        </text>
+      </svg>
+    `.trim();
+
+    return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
+  };
+
+  const handleCreateBlogPost = async () => {
+    setBlogError(null);
+    setBlogSuccess(null);
+
+    if (!blogTitle.trim() || !blogBlurb.trim() || !blogContent.trim() || !coverImageUrl.trim()) {
+      setBlogError('Title, blurb, cover image, and content are required.');
+      return;
+    }
+
+    try {
+      setBlogSaving(true);
+      const user = await getUser(true);
+      if (!user) throw new Error('You must be logged in as an admin to create a blog post.');
+
+      const token = await user.getIdToken(true);
+
+      const payload = {
+        title: blogTitle.trim(),
+        blurb: blogBlurb.trim(),
+        content: blogContent,
+        tags: blogTags.map((t) => t.trim()).filter(Boolean),
+        coverImageUrl: coverImageUrl.trim(),
+        visibility: blogVisibility, // "ACTIVATED" | "ARCHIVED"
+        userId: user.uid,
+        likes: 0,
+        saves: 0,
+      };
+
+      await axios.post('/api/new-blog-post', payload, createAuthHeaders(token));
+
+      setBlogSuccess('Blog post created!');
+      setBlogTitle('');
+      setBlogBlurb('');
+      setBlogContent('');
+      setBlogVisibility('ACTIVATED');
+      setBlogTags([]);
+      setCoverImageUrl('');
+    } catch (err) {
+      console.error(err);
+      setBlogError('Failed to create blog post. Please try again.');
+    } finally {
+      setBlogSaving(false);
+    }
+  };
+
   useTitle('Admin');
 
-  // calls the APIs and the callback function to set the reviews for each review type
   useEffect(() => {
     const reviewTypes = new Map<string, React.Dispatch<React.SetStateAction<ReviewWithId[]>>>([
       ['REPORTED', setReportedData],
@@ -101,13 +221,10 @@ const AdminPage = (): ReactElement => {
       ['APPROVED', setApprovedData],
     ]);
     reviewTypes.forEach((cllbck, reviewType) => {
-      get<ReviewWithId[]>(`/api/review/${reviewType}`, {
-        callback: cllbck,
-      });
+      get<ReviewWithId[]>(`/api/review/${reviewType}`, { callback: cllbck });
     });
   }, [toggle]);
 
-  // sets counts for each location
   useEffect(() => {
     const reviewCounts = new Map<string, React.Dispatch<React.SetStateAction<ReviewCount>>>([
       ['COLLEGETOWN', setCtownReviewCount],
@@ -116,9 +233,7 @@ const AdminPage = (): ReactElement => {
       ['NORTH', setNorthReviewCount],
     ]);
     reviewCounts.forEach((cllbck, location) => {
-      get<ReviewCount>(`/api/review/${location}/count`, {
-        callback: cllbck,
-      });
+      get<ReviewCount>(`/api/review/${location}/count`, { callback: cllbck });
     });
   }, [toggle]);
 
@@ -130,6 +245,8 @@ const AdminPage = (): ReactElement => {
     ['North', northReviewCount.count],
   ];
 
+  const TAG_OPTIONS = ['Tips & Tricks', 'Finances', 'Landlords', 'Op-Eds'];
+
   useEffect(() => {
     const apartmentTypes = new Map<
       string,
@@ -165,7 +282,6 @@ const AdminPage = (): ReactElement => {
     </>
   );
 
-  //  Reviews tab
   const reviews = (
     <Container className={container}>
       <Grid container spacing={5} justifyContent="center">
@@ -187,9 +303,7 @@ const AdminPage = (): ReactElement => {
             <Chart
               chartType="PieChart"
               data={pieChartData}
-              options={{
-                title: 'Reviews Breakdown',
-              }}
+              options={{ title: 'Reviews Breakdown' }}
               width={'100%'}
               height={'400px'}
             />
@@ -202,9 +316,7 @@ const AdminPage = (): ReactElement => {
               <strong>Reported Reviews ({reportedData.length})</strong>
             </Typography>
             <IconButton
-              className={clsx(expand, {
-                [expandOpen]: reportedExpanded,
-              })}
+              className={clsx(expand, { [expandOpen]: reportedExpanded })}
               onClick={() => setReportedExpanded(!reportedExpanded)}
               aria-expanded={reportedExpanded}
               aria-label="show reported reviews"
@@ -235,9 +347,7 @@ const AdminPage = (): ReactElement => {
               <strong>Pending Reviews ({pendingData.length})</strong>
             </Typography>
             <IconButton
-              className={clsx(expand, {
-                [expandOpen]: pendingExpanded,
-              })}
+              className={clsx(expand, { [expandOpen]: pendingExpanded })}
               onClick={() => setPendingExpanded(!pendingExpanded)}
               aria-expanded={pendingExpanded}
               aria-label="show pending reviews"
@@ -268,9 +378,7 @@ const AdminPage = (): ReactElement => {
               <strong>Declined Reviews ({declinedData.length})</strong>
             </Typography>
             <IconButton
-              className={clsx(expand, {
-                [expandOpen]: declinedExpanded,
-              })}
+              className={clsx(expand, { [expandOpen]: declinedExpanded })}
               onClick={() => setDeclinedExpanded(!declinedExpanded)}
               aria-expanded={declinedExpanded}
               aria-label="show declined reviews"
@@ -298,7 +406,6 @@ const AdminPage = (): ReactElement => {
     </Container>
   );
 
-  //  Contact tab
   const contact = (
     <Container className={container}>
       <Grid container spacing={3}>
@@ -346,6 +453,605 @@ const AdminPage = (): ReactElement => {
     </Container>
   );
 
+  const blogPosts = (
+    <Container className={container}>
+      <Box mt={4} mb={4}>
+        <Typography variant="h3" style={{ marginBottom: '24px' }}>
+          <strong>Create Blog Post</strong>
+        </Typography>
+
+        <Box display="flex" flexDirection="column" gridGap={24}>
+          <TextField
+            label="Title"
+            variant="outlined"
+            fullWidth
+            helperText="Title of the Blog Post"
+            value={blogTitle}
+            onChange={(e) => setBlogTitle(e.target.value)}
+            InputLabelProps={{ shrink: true }}
+          />
+
+          <TextField
+            label="Blurb"
+            variant="outlined"
+            fullWidth
+            multiline
+            minRows={3}
+            helperText="Short summary shown on the blog cards page"
+            value={blogBlurb}
+            onChange={(e) => setBlogBlurb(e.target.value)}
+            InputLabelProps={{ shrink: true }}
+          />
+
+          <TextField
+            select
+            label="Visibility"
+            variant="outlined"
+            fullWidth
+            value={blogVisibility}
+            onChange={(e) => setBlogVisibility(e.target.value as 'ACTIVATED' | 'ARCHIVED')}
+            helperText="ACTIVATED = visible, ARCHIVED = hidden"
+            InputLabelProps={{ shrink: true }}
+          >
+            <MenuItem value="ACTIVATED">ACTIVATED</MenuItem>
+            <MenuItem value="ARCHIVED">ARCHIVED</MenuItem>
+          </TextField>
+
+          {/* Tags */}
+          <Box>
+            <Autocomplete
+              multiple
+              options={TAG_OPTIONS}
+              value={blogTags}
+              onChange={(_, newValue) => setBlogTags(newValue)}
+              renderTags={(value, getTagProps) =>
+                value.map((option, index) => (
+                  <Chip variant="default" label={option} {...getTagProps({ index })} />
+                ))
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Tags"
+                  variant="outlined"
+                  InputLabelProps={{ shrink: true }}
+                />
+              )}
+            />
+          </Box>
+
+          <Box width="100%">
+            <input
+              ref={coverInputRef}
+              type="file"
+              accept="image/*"
+              style={{ display: 'none' }}
+              onChange={onCoverFileSelected}
+            />
+
+            <TextField
+              label="Cover Image URL"
+              variant="outlined"
+              fullWidth
+              required
+              value={coverImageUrl}
+              onChange={(e) => setCoverImageUrl(e.target.value)}
+              InputLabelProps={{ shrink: true }}
+            />
+
+            <Box mt={1} display="flex" justifyContent="flex-end">
+              <Button
+                variant="contained"
+                onClick={pickCoverImage}
+                disabled={coverUploading}
+                style={{
+                  backgroundColor: colors.red1,
+                  color: 'white',
+                  height: 40,
+                  borderRadius: 8,
+                  padding: '0 18px',
+                }}
+              >
+                {coverUploading ? 'Uploading…' : 'Upload'}
+              </Button>
+            </Box>
+
+            {(coverPreviewUrl || coverImageUrl) && (
+              <Box mt={2}>
+                <img
+                  src={coverImageUrl || coverPreviewUrl || ''}
+                  alt="Cover preview"
+                  style={{
+                    maxWidth: 420,
+                    width: '100%',
+                    borderRadius: 8,
+                    border: '1px solid #e5e7eb',
+                  }}
+                />
+              </Box>
+            )}
+          </Box>
+
+          {/* Content */}
+          <Box mt={2}>
+            <Typography variant="h6" style={{ marginBottom: '8px' }}>
+              Content
+            </Typography>
+
+            <Editor
+              apiKey="nlqgp4abfsx0n7eulsckg9qd2g31788bz0y3gxatyvj8m41p"
+              value={blogContent}
+              onEditorChange={(newContent) => setBlogContent(newContent)}
+              init={{
+                height: 600,
+                plugins: [
+                  'anchor',
+                  'autolink',
+                  'charmap',
+                  'codesample',
+                  'emoticons',
+                  'link',
+                  'lists',
+                  'searchreplace',
+                  'table',
+                  'visualblocks',
+                  'wordcount',
+                  'template',
+                ],
+                toolbar:
+                  'undo redo | blocks | bold italic underline | link table | ' +
+                  'align | bullist numlist | removeformat | template',
+                templates: [
+                  // ---------------------------
+                  // Template 1: Collage + text
+                  // ---------------------------
+                  {
+                    title: 'Template 1 — Collage + Article',
+                    description: 'Top collage (3-up + wide) then header + subheaders',
+                    content: `
+                      <div style="max-width: 920px; margin: 0 auto;">
+
+                        <!-- Collage: tall left + two stacked right -->
+                        <div style="
+                          display: grid;
+                          grid-template-columns: 1.4fr 1fr;
+                          gap: 20px;
+                          align-items: stretch;
+                          margin-bottom: 20px;
+                        ">
+                          <figure
+                            class="image-slot"
+                            data-image-slot="true"
+                            style="
+                              position: relative;
+                              height: 420px;
+                              border-radius: 18px;
+                              overflow: hidden;
+                              margin: 0;
+                            "
+                          >
+                            <img
+                              src="${svgPlaceholder(520, 420, 'Click to add image')}"
+                              alt="Placeholder"
+                              style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                            />
+                          </figure>
+
+                          <div style="display: grid; grid-template-rows: 1fr 1fr; gap: 20px;">
+                            <figure
+                              class="image-slot"
+                              data-image-slot="true"
+                              style="
+                                position: relative;
+                                height: 200px;
+                                border-radius: 18px;
+                                overflow: hidden;
+                                margin: 0;
+                              "
+                            >
+                              <img
+                                src="${svgPlaceholder(360, 200, 'Click to add image')}"
+                                alt="Placeholder"
+                                style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                              />
+                            </figure>
+
+                            <figure
+                              class="image-slot"
+                              data-image-slot="true"
+                              style="
+                                position: relative;
+                                height: 200px;
+                                border-radius: 18px;
+                                overflow: hidden;
+                                margin: 0;
+                              "
+                            >
+                              <img
+                                src="${svgPlaceholder(360, 200, 'Click to add image')}"
+                                alt="Placeholder"
+                                style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                              />
+                            </figure>
+                          </div>
+                        </div>
+
+                        <!-- Wide bottom image -->
+                        <figure
+                          class="image-slot"
+                          data-image-slot="true"
+                          style="
+                            position: relative;
+                            height: 200px;
+                            border-radius: 18px;
+                            overflow: hidden;
+                            margin: 0 0 32px 0;
+                          "
+                        >
+                          <img
+                            src="${svgPlaceholder(880, 200, 'Click to add image')}"
+                            alt="Placeholder"
+                            style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                          />
+                        </figure>
+
+                        <!-- Text block -->
+                        <div>
+                          <h2 style="margin: 0 0 10px;">Header</h2>
+                          <p style="margin: 0 0 22px; line-height: 1.6;">
+                            Write your intro paragraph here…
+                          </p>
+
+                          <h3 style="margin: 0 0 8px;">Subheader</h3>
+                          <p style="margin: 0 0 18px; line-height: 1.6;">
+                            Write supporting content here…
+                          </p>
+
+                          <h3 style="margin: 0 0 8px;">Subheader</h3>
+                          <p style="margin: 0; line-height: 1.6;">
+                            Write supporting content here…
+                          </p>
+                        </div>
+                      </div>
+                    `,
+                  },
+
+                  // -------------------------------------
+                  // Template 2: Alternating image blocks
+                  // -------------------------------------
+                  {
+                    title: 'Template 2 — Alternating Image / Text',
+                    description: 'Zig-zag layout: text left, image right (alternating)',
+                    content: `
+                      <div style="max-width: 920px; margin: 0 auto;">
+
+                        <!-- Row 1: text left, image right -->
+                        <div style="
+                          display: grid;
+                          grid-template-columns: 1.3fr 1fr;
+                          gap: 24px;
+                          align-items: center;
+                          margin: 18px 0 34px;
+                        ">
+                          <div>
+                            <h3 style="margin: 0 0 10px;">Header</h3>
+                            <p style="margin: 0; line-height: 1.6;">
+                              Write your section text here…
+                            </p>
+                          </div>
+                          <figure
+                            class="image-slot"
+                            data-image-slot="true"
+                            style="
+                              position: relative;
+                              height: 260px;
+                              border-radius: 18px;
+                              overflow: hidden;
+                              margin: 0;
+                            "
+                          >
+                            <img
+                              src="${svgPlaceholder(380, 260, 'Click to add image')}"
+                              alt="Placeholder"
+                              style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                            />
+                          </figure>
+                        </div>
+
+                        <!-- Row 2: image left, text right -->
+                        <div style="
+                          display: grid;
+                          grid-template-columns: 1fr 1.3fr;
+                          gap: 24px;
+                          align-items: center;
+                          margin: 18px 0 34px;
+                        ">
+                          <figure
+                            class="image-slot"
+                            data-image-slot="true"
+                            style="
+                              position: relative;
+                              height: 260px;
+                              border-radius: 18px;
+                              overflow: hidden;
+                              margin: 0;
+                            "
+                          >
+                            <img
+                              src="${svgPlaceholder(380, 260, 'Click to add image')}"
+                              alt="Placeholder"
+                              style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                            />
+                          </figure>
+                          <div>
+                            <h3 style="margin: 0 0 10px;">Header</h3>
+                            <p style="margin: 0; line-height: 1.6;">
+                              Write your section text here…
+                            </p>
+                          </div>
+                        </div>
+
+                        <!-- Row 3 -->
+                        <div style="
+                          display: grid;
+                          grid-template-columns: 1.3fr 1fr;
+                          gap: 24px;
+                          align-items: center;
+                          margin: 18px 0 34px;
+                        ">
+                          <div>
+                            <h3 style="margin: 0 0 10px;">Header</h3>
+                            <p style="margin: 0; line-height: 1.6;">
+                              Write your section text here…
+                            </p>
+                          </div>
+                          <figure
+                            class="image-slot"
+                            data-image-slot="true"
+                            style="
+                              position: relative;
+                              height: 260px;
+                              border-radius: 18px;
+                              overflow: hidden;
+                              margin: 0;
+                            "
+                          >
+                            <img
+                              src="${svgPlaceholder(380, 260, 'Click to add image')}"
+                              alt="Placeholder"
+                              style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                            />
+                          </figure>
+                        </div>
+
+                        <!-- Row 4 -->
+                        <div style="
+                          display: grid;
+                          grid-template-columns: 1fr 1.3fr;
+                          gap: 24px;
+                          align-items: center;
+                          margin: 18px 0 26px;
+                        ">
+                          <figure
+                            class="image-slot"
+                            data-image-slot="true"
+                            style="
+                              position: relative;
+                              height: 260px;
+                              border-radius: 18px;
+                              overflow: hidden;
+                              margin: 0;
+                            "
+                          >
+                            <img
+                              src="${svgPlaceholder(380, 260, 'Click to add image')}"
+                              alt="Placeholder"
+                              style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                            />
+                          </figure>
+                          <div>
+                            <h3 style="margin: 0 0 10px;">Header</h3>
+                            <p style="margin: 0; line-height: 1.6;">
+                              Write your section text here…
+                            </p>
+                          </div>
+                        </div>
+
+                        <hr style="border: none; border-top: 1px solid #e5e7eb; margin-top: 8px;" />
+                      </div>
+                    `,
+                  },
+
+                  // -----------------------------------
+                  // Template 3: Left text / right stack
+                  // -----------------------------------
+                  {
+                    title: 'Template 3 — Left Text / Right Image Stack',
+                    description: 'Text sections stacked on left, images stacked on right',
+                    content: `
+                      <div style="max-width: 980px; margin: 0 auto;">
+                        <div style="
+                          display: grid;
+                          grid-template-columns: 1.25fr 1fr;
+                          gap: 28px;
+                          align-items: flex-start;
+                        ">
+
+                          <!-- Left text column -->
+                          <div>
+                            <div style="margin: 0 0 34px;">
+                              <h3 style="margin: 0 0 8px;">Header</h3>
+                              <p style="margin: 0; line-height: 1.6;">
+                                Write your section text here…
+                              </p>
+                            </div>
+
+                            <div style="margin: 0 0 34px;">
+                              <h3 style="margin: 0 0 8px;">Header</h3>
+                              <p style="margin: 0; line-height: 1.6;">
+                                Write your section text here…
+                              </p>
+                            </div>
+
+                            <div style="margin: 0 0 34px;">
+                              <h3 style="margin: 0 0 8px;">Header</h3>
+                              <p style="margin: 0; line-height: 1.6;">
+                                Write your section text here…
+                              </p>
+                            </div>
+
+                            <div style="margin: 0;">
+                              <h3 style="margin: 0 0 8px;">Header</h3>
+                              <p style="margin: 0; line-height: 1.6;">
+                                Write your section text here…
+                              </p>
+                            </div>
+                          </div>
+
+                          <!-- Right image stack -->
+                          <div style="display: flex; flex-direction: column; gap: 22px;">
+                            <figure
+                              class="image-slot"
+                              data-image-slot="true"
+                              style="
+                                position: relative;
+                                height: 260px;
+                                border-radius: 18px;
+                                overflow: hidden;
+                                margin: 0;
+                              "
+                            >
+                              <img
+                                src="${svgPlaceholder(420, 260, 'Click to add image')}"
+                                alt="Placeholder"
+                                style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                              />
+                            </figure>
+
+                            <figure
+                              class="image-slot"
+                              data-image-slot="true"
+                              style="
+                                position: relative;
+                                height: 260px;
+                                border-radius: 18px;
+                                overflow: hidden;
+                                margin: 0;
+                              "
+                            >
+                              <img
+                                src="${svgPlaceholder(420, 260, 'Click to add image')}"
+                                alt="Placeholder"
+                                style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                              />
+                            </figure>
+
+                            <figure
+                              class="image-slot"
+                              data-image-slot="true"
+                              style="
+                                position: relative;
+                                height: 260px;
+                                border-radius: 18px;
+                                overflow: hidden;
+                                margin: 0;
+                              "
+                            >
+                              <img
+                                src="${svgPlaceholder(420, 260, 'Click to add image')}"
+                                alt="Placeholder"
+                                style="width: 100%; height: 100%; object-fit: cover; display: block;"
+                              />
+                            </figure>
+                          </div>
+
+                        </div>
+                      </div>
+                    `,
+                  },
+
+                  // ---------------------------
+                  // Template 4: Text-only long
+                  // ---------------------------
+                  {
+                    title: 'Template 4 — Text-Only Article',
+                    description: 'Large header + paragraphs + subheaders + divider + repeat',
+                    content: `
+                      <div style="max-width: 920px; margin: 0 auto;">
+                        <h2 style="margin: 0 0 10px;">Header</h2>
+                        <p style="margin: 0 0 28px; line-height: 1.7;">
+                          Write your intro paragraph here…
+                        </p>
+
+                        <h3 style="margin: 0 0 8px;">Subheader</h3>
+                        <p style="margin: 0 0 22px; line-height: 1.7;">
+                          Write supporting content here…
+                        </p>
+
+                        <h3 style="margin: 0 0 8px;">Subheader</h3>
+                        <p style="margin: 0 0 28px; line-height: 1.7;">
+                          Write supporting content here…
+                        </p>
+
+                        <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 32px 0;" />
+
+                        <h2 style="margin: 0 0 10px;">Header</h2>
+                        <p style="margin: 0 0 28px; line-height: 1.7;">
+                          Continue your article here…
+                        </p>
+
+                        <h3 style="margin: 0 0 8px;">Subheader</h3>
+                        <p style="margin: 0 0 22px; line-height: 1.7;">
+                          Add more details here…
+                        </p>
+
+                        <h3 style="margin: 0 0 8px;">Subheader</h3>
+                        <p style="margin: 0; line-height: 1.7;">
+                          Add more details here…
+                        </p>
+                      </div>
+                    `,
+                  },
+                ],
+              }}
+              initialValue=""
+            />
+          </Box>
+
+          {blogError && (
+            <Typography color="error" style={{ marginTop: '8px' }}>
+              {blogError}
+            </Typography>
+          )}
+          {blogSuccess && (
+            <Typography style={{ marginTop: '8px', color: 'green' }}>{blogSuccess}</Typography>
+          )}
+
+          <Box mt={2}>
+            <Button
+              variant="contained"
+              onClick={handleCreateBlogPost}
+              disabled={blogSaving}
+              style={{
+                backgroundColor: colors.red1,
+                color: 'white',
+                borderRadius: 8,
+                padding: '10px 24px',
+                alignSelf: 'flex-start',
+              }}
+            >
+              {blogSaving
+                ? 'Saving…'
+                : blogVisibility === 'ARCHIVED'
+                ? 'Save (Archived)'
+                : 'Publish Post'}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Container>
+  );
+
   return (
     <div>
       <AppBar position="static" elevation={0}>
@@ -358,12 +1064,14 @@ const AdminPage = (): ReactElement => {
           >
             <Tab label="Reviews" value="Reviews" />
             <Tab label="Contact" value="Contact" />
+            <Tab label="BlogPost" value="BlogPost" />
           </Tabs>
         </Toolbar>
       </AppBar>
 
       {selectedTab === 'Reviews' && reviews}
       {selectedTab === 'Contact' && contact}
+      {selectedTab === 'BlogPost' && blogPosts}
       {Modals}
     </div>
   );
diff --git a/frontend/src/pages/ApartmentPage.tsx b/frontend/src/pages/ApartmentPage.tsx
index 69cd0373..52b3975e 100644
--- a/frontend/src/pages/ApartmentPage.tsx
+++ b/frontend/src/pages/ApartmentPage.tsx
@@ -160,6 +160,17 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
   const [mapToggle, setMapToggle] = useState(false);
   const [showSaveSuccess, setShowSaveSuccess] = useState(false);
 
+  const handleLike = async (likedId: string, targetType: 'review' | 'blogPost') => {
+    try {
+      const user = await getUser(true); // Forces sign-in if not already
+      if (!user) throw new Error('User not signed in');
+      const token = await user.getIdToken(true);
+      const headers = createAuthHeaders(token);
+      const response = await axios.post(`/api/add-like/`, { likedId, targetType }, headers);
+      console.log('Email sent:', response.data);
+    } catch (error) {}
+  };
+
   const dummyTravelTimes: LocationTravelTimes = {
     agQuadDriving: -1,
     agQuadWalking: -1,
@@ -374,7 +385,7 @@ const ApartmentPage = ({ user, setUser }: Props): ReactElement => {
     });
   };
 
-  type Fields = keyof typeof reviewData[0];
+  type Fields = keyof (typeof reviewData)[0];
 
   const showToast = (setState: (value: React.SetStateAction<boolean>) => void) => {
     setState(true);
diff --git a/frontend/src/pages/BlogPostDetailPage.tsx b/frontend/src/pages/BlogPostDetailPage.tsx
new file mode 100644
index 00000000..18fcd9a4
--- /dev/null
+++ b/frontend/src/pages/BlogPostDetailPage.tsx
@@ -0,0 +1,494 @@
+// BlogPostDetailPage.tsx
+
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
+import { Box, Chip, makeStyles, Typography, ButtonBase } from '@material-ui/core';
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
+import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder';
+import axios from 'axios';
+import { useParams, useHistory } from 'react-router-dom';
+import { useTitle } from '../utils';
+import heroImage from '../assets/blog-hero.jpg';
+import firebase from 'firebase/app';
+
+type BlogPost = {
+  readonly id: string;
+  readonly content: string; // TinyMCE HTML string
+  readonly blurb: string;
+  readonly date: Date | string;
+  readonly likes?: number;
+  readonly tags: string[];
+  readonly title: string;
+  readonly userId?: string | null;
+  readonly visibility: string;
+  readonly saves: number;
+
+  // NEW: you’re saving this from AdminPage
+  readonly coverImageUrl?: string;
+
+  // Optional: keep if your backend still returns photos
+  readonly photos?: string[];
+};
+
+type RouteParams = { postId: string };
+
+const useStyles = makeStyles(() => ({
+  pageRoot: {
+    backgroundColor: '#FFFFFF',
+    minHeight: '100vh',
+    width: '100%',
+  },
+  heroWrapper: {
+    position: 'relative',
+    width: '100%',
+    height: '614px',
+    overflow: 'hidden',
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      background: 'rgba(0,0,0,0.45)',
+      zIndex: 1,
+      pointerEvents: 'none',
+    },
+  },
+  heroImage: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    display: 'block',
+  },
+  heroOverlay: {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    color: '#FFFFFF',
+    zIndex: 2,
+  },
+  heroOverlayInner: {
+    marginTop: '321px',
+    marginLeft: '169px',
+    width: '610px',
+    height: '240px',
+  },
+  heroTitle: {
+    fontFamily: 'Work Sans',
+    fontWeight: 600,
+    fontSize: '30px',
+    lineHeight: '36px',
+    marginBottom: '16px',
+  },
+  tagRow: {
+    display: 'flex',
+    gap: '8px',
+    marginBottom: '32px',
+    flexWrap: 'wrap',
+  },
+  tagChipRed: {
+    fontFamily: 'Work Sans',
+    height: '40px',
+    width: '129px',
+    borderRadius: '8px',
+    backgroundColor: '#9C3B29',
+    color: '#FFFFFF',
+    fontWeight: 600,
+    fontSize: '16px',
+    lineHeight: '24px',
+  },
+  heroMetaRowTop: {
+    fontFamily: 'Work Sans',
+    fontSize: '22px',
+    fontWeight: 500,
+    lineHeight: '32px',
+    marginBottom: '16px',
+  },
+  heroMetaRowBottom: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '24px',
+  },
+  heroMetaItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    fontFamily: 'Work Sans',
+    fontSize: '22px',
+    fontWeight: 400,
+    lineHeight: '32px',
+  },
+  heroMetaIcon: {
+    width: 23,
+    height: 21,
+  },
+  contentContainer: {
+    width: '100%',
+    maxWidth: '1102px',
+    margin: '69px 169px',
+  },
+
+  // IMPORTANT: this styles the HTML you injected from TinyMCE
+  articleContent: {
+    fontFamily: 'Work Sans',
+    '& h2': {
+      fontFamily: 'Work Sans',
+      fontWeight: 600,
+      fontSize: 20,
+      margin: '24px 0 10px',
+      color: '#111827',
+    },
+    '& h3': {
+      fontFamily: 'Work Sans',
+      fontWeight: 600,
+      fontSize: 14,
+      margin: '20px 0 6px',
+      color: '#111827',
+    },
+    '& p': {
+      fontFamily: 'Work Sans',
+      fontWeight: 400,
+      fontSize: 14,
+      lineHeight: '24px',
+      color: '#4B5563',
+      margin: '0 0 16px',
+    },
+    '& hr': {
+      border: 'none',
+      borderTop: '1px solid #E5E7EB',
+      margin: '32px 0',
+    },
+    '& a': {
+      color: '#9C3B29',
+      textDecoration: 'underline',
+    },
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+      borderRadius: 12,
+      display: 'block',
+      margin: '16px 0',
+    },
+    // In case your templates use figure blocks
+    '& figure': {
+      margin: '16px 0',
+    },
+  },
+
+  moreSection: {
+    maxWidth: '1102px',
+    marginTop: '72px',
+    borderTop: '1px solid #C4C4C4',
+  },
+  moreTitle: {
+    marginLeft: '12px',
+    fontFamily: 'Work Sans',
+    fontWeight: 600,
+    fontSize: '22px',
+    lineHeight: '32px',
+    marginTop: '72px',
+    marginBottom: '32px',
+  },
+  moreCardsWrap: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '110px',
+    marginLeft: '12px',
+    alignItems: 'flex-start',
+  },
+  moreCardButton: {
+    backgroundColor: 'transparent !important',
+    borderRadius: '24px',
+    textAlign: 'left',
+    width: '490px',
+    overflow: 'visible',
+    outline: 'none',
+    WebkitTapHighlightColor: 'transparent',
+
+    '&:hover, &:active, &:focus, &:focus-visible, &.Mui-focusVisible': {
+      backgroundColor: 'transparent !important',
+    },
+
+    '& .MuiTouchRipple-root': { display: 'none' },
+
+    '&:hover $moreCardOuter:after, &:focus-visible $moreCardOuter:after, &.Mui-focusVisible $moreCardOuter:after':
+      {
+        borderColor: '#EB5757',
+        boxShadow: '0px 12px 30px rgba(0,0,0,0.10)',
+      },
+  },
+  moreCardOuter: {
+    width: '490px',
+    boxSizing: 'border-box',
+    borderRadius: '24px',
+    backgroundColor: 'transparent',
+    position: 'relative',
+    overflow: 'visible',
+
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      top: -12,
+      left: -12,
+      right: -12,
+      bottom: -12,
+      borderRadius: '24px',
+      border: '1px solid transparent',
+      boxShadow: 'none',
+      transition: 'border-color 150ms ease, box-shadow 150ms ease',
+      pointerEvents: 'none',
+    },
+  },
+  moreCard: {
+    width: '490px',
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '12px',
+    backgroundColor: 'transparent',
+    boxSizing: 'border-box',
+  },
+  moreCardImage: {
+    width: '490px',
+    height: '317px',
+    marginTop: '24px',
+    borderRadius: '12px',
+    overflow: 'hidden',
+    border: '1px solid #ECECEC',
+    backgroundColor: '#F3F4F6',
+    '& img': {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      display: 'block',
+    },
+  },
+  moreCardText: {
+    width: '490px',
+    height: '160',
+    marginTop: '24px',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  moreCardTitle: {
+    fontFamily: 'Work Sans',
+    fontWeight: 600,
+    fontSize: '22px',
+    lineHeight: '32px',
+    color: '#000000',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: 1,
+  },
+  moreCardDescription: {
+    marginTop: '16px',
+    fontFamily: 'Work Sans',
+    fontSize: '18px',
+    lineHeight: '28px',
+    fontWeight: 400,
+    color: '#5D5D5D',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: 4,
+  },
+  moreCardFooter: {
+    marginTop: '24px',
+    marginBottom: '28px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '24px',
+    color: '#000000',
+  },
+  moreFooterItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    fontFamily: 'Work Sans',
+    fontSize: '18px',
+    lineHeight: '28px',
+    color: '#000000',
+    fontWeight: 400,
+  },
+  moreFooterIcon: {
+    width: 24,
+    height: 21.5,
+  },
+}));
+
+const BlogPostDetailPage = (): ReactElement => {
+  const classes = useStyles();
+  const { postId } = useParams<RouteParams>();
+  const history = useHistory();
+
+  const [post, setPost] = useState<BlogPost | null>(null);
+  const [allPosts, setAllPosts] = useState<BlogPost[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchPost = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const res = await axios.get<BlogPost>(`/api/blog-post-by-id/${postId}`);
+        if (!isMounted) return;
+        setPost(res.data);
+
+        const listRes = await axios.get<BlogPost[]>('/api/blog-posts');
+        if (!isMounted) return;
+        setAllPosts(listRes.data);
+      } catch (err) {
+        console.error('Error fetching blog post detail', err);
+        if (!isMounted) return;
+        setError('We couldn’t load this article. Please try again later.');
+      } finally {
+        if (isMounted) setLoading(false);
+      }
+    };
+
+    fetchPost();
+    return () => {
+      isMounted = false;
+    };
+  }, [postId]);
+
+  useTitle(post?.title || 'APT Advice');
+
+  const moreArticles = useMemo(
+    () => allPosts.filter((p) => p.id !== postId).slice(0, 2),
+    [allPosts, postId]
+  );
+
+  if (loading) {
+    return (
+      <Box className={classes.pageRoot}>
+        <Box className={classes.contentContainer}>
+          <Typography>Loading…</Typography>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (error || !post) {
+    return (
+      <Box className={classes.pageRoot}>
+        <Box className={classes.contentContainer}>
+          <Typography color="error" style={{ marginBottom: 16 }}>
+            {error ?? 'Article not found.'}
+          </Typography>
+          <Typography
+            style={{ cursor: 'pointer', color: '#EB5757' }}
+            onClick={() => history.push('/blogs')}
+          >
+            ← Back to all advice articles
+          </Typography>
+        </Box>
+      </Box>
+    );
+  }
+
+  const likeCount = post.likes ?? 0;
+  const saveCount = post.saves ?? 0;
+
+  const displayDate = new Date(post.date).toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  // ✅ FIX: use coverImageUrl first (since that’s what you save)
+  const hero = post.coverImageUrl || post.photos?.[0] || heroImage;
+
+  return (
+    <Box className={classes.pageRoot}>
+      <Box className={classes.heroWrapper}>
+        <img src={hero} alt={post.title} className={classes.heroImage} />
+
+        <Box className={classes.heroOverlay}>
+          <Box className={classes.heroOverlayInner}>
+            <Typography className={classes.heroTitle}>{post.title}</Typography>
+
+            <Box className={classes.tagRow}>
+              {(post.tags ?? []).filter(Boolean).map((t, idx) => (
+                <Chip key={`${t}-${idx}`} label={t} className={classes.tagChipRed} />
+              ))}
+            </Box>
+
+            <Box className={classes.heroMetaRowTop}>
+              <span>Published {displayDate}</span>
+            </Box>
+
+            <Box className={classes.heroMetaRowBottom}>
+              <Box className={classes.heroMetaItem}>
+                <FavoriteBorderIcon className={classes.heroMetaIcon} />
+                <span>{likeCount}</span>
+              </Box>
+
+              <Box className={classes.heroMetaItem}>
+                <BookmarkBorderIcon className={classes.heroMetaIcon} />
+                <span>{saveCount}</span>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+
+      <Box className={classes.contentContainer}>
+        {/* ✅ This is how you display TinyMCE HTML */}
+        <div
+          className={classes.articleContent}
+          dangerouslySetInnerHTML={{ __html: post.content }}
+        />
+
+        <Box className={classes.moreSection}>
+          <Typography className={classes.moreTitle}>More Articles Like This</Typography>
+
+          <Box className={classes.moreCardsWrap}>
+            {moreArticles.map((p) => {
+              const img = p.coverImageUrl || p.photos?.[0] || heroImage;
+
+              return (
+                <ButtonBase
+                  key={p.id}
+                  className={classes.moreCardButton}
+                  disableRipple
+                  disableTouchRipple
+                  focusRipple={false}
+                  onClick={() => history.push(`/apt-advice/${p.id}`)}
+                >
+                  <Box className={classes.moreCardOuter}>
+                    <Box className={classes.moreCard}>
+                      <Box className={classes.moreCardImage}>
+                        {img && <img src={img} alt={p.title} />}
+                      </Box>
+
+                      <Box className={classes.moreCardText}>
+                        <Typography className={classes.moreCardTitle}>{p.title}</Typography>
+                        <Typography className={classes.moreCardDescription}>{p.blurb}</Typography>
+                      </Box>
+
+                      <Box className={classes.moreCardFooter}>
+                        <Box className={classes.moreFooterItem}>
+                          <FavoriteBorderIcon className={classes.moreFooterIcon} />
+                          <span>{p.likes ?? 0}</span>
+                        </Box>
+
+                        <Box className={classes.moreFooterItem}>
+                          <BookmarkBorderIcon className={classes.moreFooterIcon} />
+                          <span>{p.saves ?? 0}</span>
+                        </Box>
+                      </Box>
+                    </Box>
+                  </Box>
+                </ButtonBase>
+              );
+            })}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default BlogPostDetailPage;
diff --git a/frontend/src/pages/BlogPostPage.tsx b/frontend/src/pages/BlogPostPage.tsx
new file mode 100644
index 00000000..0a82166c
--- /dev/null
+++ b/frontend/src/pages/BlogPostPage.tsx
@@ -0,0 +1,379 @@
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
+import {
+  Box,
+  Grid,
+  makeStyles,
+  Typography,
+  TextField,
+  InputAdornment,
+  Button,
+  ButtonBase,
+} from '@material-ui/core';
+import SearchIcon from '@material-ui/icons/Search';
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
+import BookmarkBorderIcon from '@material-ui/icons/BookmarkBorder';
+import axios from 'axios';
+import { useHistory } from 'react-router-dom';
+import { useTitle } from '../utils';
+
+/**
+ * BlogPost type
+ *
+ * Represents a single blog post as returned by the backend API and consumed
+ * by the blog listing page. Includes metadata used for filtering, sorting,
+ * and display in the card grid.
+ */
+type BlogPost = {
+  readonly id: string;
+  readonly content: string;
+  readonly blurb: string;
+  readonly date: Date | string;
+  readonly likes?: number;
+  readonly photos: string[];
+  readonly tags: string[];
+  readonly title: string;
+  readonly userId?: string | null;
+  readonly visibility: string;
+  readonly saves: number;
+};
+
+// Styles for the BlogPostPage component
+const useStyles = makeStyles(() => ({
+  background: {
+    backgroundColor: '#FFFFFF',
+    minHeight: '100vh',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  pageContainer: {
+    marginTop: '78px',
+    width: '100%',
+    maxWidth: '1313px',
+  },
+  header: {
+    fontFamily: 'Work Sans',
+    fontWeight: 600,
+    fontSize: '48px',
+    lineHeight: '50px',
+  },
+  searchWrap: {
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    border: '1px solid #E5E7EB',
+    boxShadow: '0px 8px 24px rgba(0,0,0,0.06)',
+    overflow: 'hidden',
+  },
+  searchField: {
+    '& .MuiOutlinedInput-root': {
+      backgroundColor: 'transparent',
+      borderRadius: 10,
+    },
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+    '& .MuiOutlinedInput-input': {
+      padding: '20px 24px',
+      fontFamily: 'Work Sans',
+      fontSize: 18,
+    },
+    '& .MuiOutlinedInput-input::placeholder': {
+      color: '#9CA3AF',
+      opacity: 1,
+    },
+  },
+  tabsRow: {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '24px',
+    marginTop: '100px',
+    flexWrap: 'wrap',
+  },
+  tabButton: {
+    color: 'var(--color-neutral-gray-1, #5D5D5D)',
+    fontWeight: 400,
+    padding: '8px 24px',
+    minWidth: 'auto',
+    textTransform: 'none',
+    fontFamily: 'Work Sans',
+    fontSize: '22px',
+    lineHeight: '32px',
+    borderRadius: 0,
+    borderBottom: '1.5px solid var(--color-neutral-gray-3, #E8E8E8)',
+  },
+  activeTab: {
+    color: 'var(--Tokens-Content-color-content-primary-default, #1C1B1B)',
+    fontWeight: 400,
+    borderBottom: '1.5px solid #1C1B1B !important',
+    borderRadius: 0,
+  },
+  cardsGrid: {
+    marginTop: '64px',
+    marginBottom: '40px',
+  },
+  cardButton: {
+    width: '100%',
+    display: 'inline-flex',
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    backgroundColor: 'transparent',
+    borderRadius: '12px',
+    padding: '12px 12px 0px 12px',
+    boxSizing: 'border-box',
+    border: '1px solid transparent',
+    transition: 'border-color 150ms ease, box-shadow 150ms ease',
+    outline: 'none',
+    '&:focus': { outline: 'none' },
+    '&:focus-visible': { outline: 'none' },
+    '& .MuiTouchRipple-root': { display: 'none' },
+  },
+  cardInteractive: {
+    '&:hover': {
+      borderColor: '#EB5757',
+      boxShadow: '0px 12px 30px rgba(0,0,0,0.10)',
+    },
+    '&:focus-visible': {
+      borderColor: '#EB5757',
+      boxShadow: '0px 12px 30px rgba(0,0,0,0.10)',
+    },
+  },
+  card: {
+    width: '411px',
+    height: '563px',
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '12px',
+    backgroundColor: 'transparent',
+    boxSizing: 'border-box',
+  },
+  cardImage: {
+    position: 'relative',
+    width: '100%',
+    height: '267px',
+    borderRadius: '8px',
+    overflow: 'hidden',
+    border: '1px solid #ECECEC',
+    backgroundColor: '#F3F4F6',
+    '& img': {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      display: 'block',
+    },
+  },
+  cardTitle: {
+    fontFamily: 'Work Sans',
+    fontWeight: 600,
+    fontSize: '22px',
+    lineHeight: '32px',
+    color: '#000',
+  },
+  cardDescription: {
+    fontFamily: 'Work Sans',
+    fontSize: '18px',
+    lineHeight: '28px',
+    fontWeight: 400,
+    color: '#5D5D5D',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: 5,
+  },
+  cardFooter: {
+    marginTop: 'auto',
+    marginBottom: '28px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '24px',
+    color: '#000000',
+  },
+  footerItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    fontFamily: 'Work Sans',
+    fontSize: '18px',
+    lineHeight: '28px',
+    color: '#000000',
+    fontWeight: 400,
+  },
+  footerIcon: {
+    width: 24,
+    height: 21.5,
+  },
+}));
+
+// Labels for the blog post filter tabs
+const TABS = ['All', 'Most Popular', 'Tips & Tricks', 'Finances', 'Landlords', 'Op-Eds'];
+
+/**
+ * BlogPostPage Component
+ *
+ * This component represents the main blog landing page for apartment advice.
+ * It fetches and displays blog posts in a responsive card grid, supports
+ * searching by title, filtering by topic tab, and optionally sorting by
+ * popularity. Users can click a card to navigate to a full blog post view.
+ *
+ * @component
+ * @returns BlogPostPage The BlogPostPage component.
+ */
+const BlogPostPage = (): ReactElement => {
+  const classes = useStyles();
+  const history = useHistory();
+
+  // Set the page title using the useTitle custom hook
+  useTitle('APT Advice');
+
+  // State to store all blog posts loaded from the API
+  const [posts, setPosts] = useState<BlogPost[]>([]);
+
+  // State to store the current search query entered by the user
+  const [search, setSearch] = useState('');
+
+  // State to track which tab is currently active
+  const [activeTab, setActiveTab] = useState<string>('All');
+
+  // Fetch blog posts when the component mounts
+  useEffect(() => {
+    axios
+      .get<BlogPost[]>('/api/blog-posts')
+      .then((res) => setPosts(res.data))
+      .catch((err) => {
+        console.error('Error fetching blog posts', err);
+        setPosts([]);
+      });
+  }, []);
+
+  // Helper function to determine whether a post belongs in the selected tab
+  const tabMatchesPost = (post: BlogPost, tab: string) => {
+    if (tab === 'All') return true;
+    if (tab === 'Most Popular') return true;
+    const t = tab.toLowerCase();
+    return (post.tags || []).some((x) => x?.toLowerCase() === t);
+  };
+
+  // Memoized list of posts filtered by the active tab and search query
+  const filteredPosts = useMemo(() => {
+    const q = search.trim().toLowerCase();
+
+    return posts.filter((post) => {
+      const matchesTab = tabMatchesPost(post, activeTab);
+      const matchesSearch = q.length === 0 || post.title.toLowerCase().includes(q);
+      return matchesTab && matchesSearch;
+    });
+  }, [posts, search, activeTab]);
+
+  // Apply additional sorting when the "Most Popular" tab is active
+  const visiblePosts =
+    activeTab === 'Most Popular'
+      ? [...filteredPosts].sort((a, b) => (b.likes ?? 0) - (a.likes ?? 0))
+      : filteredPosts;
+
+  return (
+    <Box className={classes.background}>
+      {/* Page container that constrains content width and centers the layout */}
+      <Box className={classes.pageContainer}>
+        {/* Page header and search bar section */}
+        <Box style={{ width: '688px', height: '200px' }}>
+          <Box style={{ width: '576px', height: '92px' }}>
+            <Typography className={classes.header}>Advice for All Things Apartment</Typography>
+          </Box>
+
+          <Box style={{ marginTop: '40px' }}>
+            <Box className={classes.searchWrap}>
+              <TextField
+                fullWidth
+                variant="outlined"
+                placeholder="Search"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className={classes.searchField}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <SearchIcon style={{ color: '#898989' }} />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Row of filter tabs for switching between categories */}
+        <Box className={classes.tabsRow}>
+          {TABS.map((t) => (
+            <Button
+              key={t}
+              disableRipple
+              disableFocusRipple
+              className={`${classes.tabButton} ${activeTab === t ? classes.activeTab : ''}`}
+              onClick={() => setActiveTab(t)}
+            >
+              {t}
+            </Button>
+          ))}
+        </Box>
+
+        {/* Grid of blog post cards */}
+        <Grid container className={classes.cardsGrid} spacing={4}>
+          {visiblePosts.map((post) => {
+            const hero = post.photos?.[0] ?? '';
+
+            return (
+              <Grid item xs={12} sm={6} md={4} key={post.id}>
+                <ButtonBase
+                  className={`${classes.cardButton} ${classes.cardInteractive}`}
+                  disableRipple
+                  disableTouchRipple
+                  focusRipple={false}
+                  onClick={() => {
+                    // Navigate to the full blog post view in the same tab
+                    history.push(`/apt-advice/${post.id}`);
+                  }}
+                >
+                  <Box className={classes.card}>
+                    <Box className={classes.cardImage}>
+                      {hero && <img src={hero} alt={post.title} />}
+                    </Box>
+
+                    <Box style={{ marginTop: '24px', maxWidth: '100%' }}>
+                      <Typography className={classes.cardTitle}>{post.title}</Typography>
+                    </Box>
+
+                    <Box style={{ marginTop: '16px', maxWidth: '100%' }}>
+                      <Typography className={classes.cardDescription}>{post.blurb}</Typography>
+                    </Box>
+
+                    {/* Footer with likes and saves summary */}
+                    <Box className={classes.cardFooter}>
+                      <Box className={classes.footerItem}>
+                        <FavoriteBorderIcon className={classes.footerIcon} />
+                        <span>{post.likes ?? 0}</span>
+                      </Box>
+
+                      <Box className={classes.footerItem}>
+                        <BookmarkBorderIcon className={classes.footerIcon} />
+                        <span>{post.saves ?? 0}</span>
+                      </Box>
+                    </Box>
+                  </Box>
+                </ButtonBase>
+              </Grid>
+            );
+          })}
+
+          {/* Fallback message when no posts match the current filters */}
+          {visiblePosts.length === 0 && (
+            <Grid item xs={12}>
+              <Typography>No posts found.</Typography>
+            </Grid>
+          )}
+        </Grid>
+      </Box>
+    </Box>
+  );
+};
+
+export default BlogPostPage;
diff --git a/frontend/src/pages/BookmarksPage.tsx b/frontend/src/pages/BookmarksPage.tsx
index 0e977569..4b3980ff 100644
--- a/frontend/src/pages/BookmarksPage.tsx
+++ b/frontend/src/pages/BookmarksPage.tsx
@@ -155,7 +155,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
   }, [user, toggle, savedAPI, sortAptsBy]);
 
   // Define the type of the properties used for sorting reviews
-  type Fields = keyof typeof helpfulReviewsData[0];
+  type Fields = keyof (typeof helpfulReviewsData)[0];
 
   // Function to handle "Show More" button click
   const handleShowMoreLess = () => {
@@ -197,7 +197,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
         const offsetLikes = dislike ? -1 : 1;
         const token = await user.getIdToken(true);
         const endpoint = dislike ? '/api/remove-like' : '/api/add-like';
-        await axios.post(endpoint, { reviewId }, createAuthHeaders(token));
+        await axios.post(endpoint, { reviewId, targetType: 'review' }, createAuthHeaders(token));
         if (dislike) {
           setHelpfulReviewsData((reviews) => reviews.filter((review) => review.id !== reviewId));
         } else {
diff --git a/frontend/src/pages/LandlordPage.tsx b/frontend/src/pages/LandlordPage.tsx
index 567379bb..3704b1a6 100644
--- a/frontend/src/pages/LandlordPage.tsx
+++ b/frontend/src/pages/LandlordPage.tsx
@@ -244,7 +244,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
   }, [user, setUser, landlordId]);
 
   // Define the type of the properties used for sorting reviews
-  type Fields = keyof typeof reviewData[0];
+  type Fields = keyof (typeof reviewData)[0];
 
   // Function to display a toast message and hide it after a certain time
   const showToast = (setState: (value: React.SetStateAction<boolean>) => void) => {
@@ -290,7 +290,7 @@ const LandlordPage = ({ user, setUser }: Props): ReactElement => {
         const offsetLikes = dislike ? -1 : 1;
         const token = await user.getIdToken(true);
         const endpoint = dislike ? '/api/remove-like' : '/api/add-like';
-        await axios.post(endpoint, { reviewId }, createAuthHeaders(token));
+        await axios.post(endpoint, { reviewId, targetType: 'review' }, createAuthHeaders(token));
         setLikedReviews((reviews) => ({ ...reviews, [reviewId]: !dislike }));
         setReviewData((reviews) =>
           reviews.map((review) =>
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index d68bba48..7cf6dff3 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -240,7 +240,7 @@ const ProfilePage = ({ user, setUser }: Props): ReactElement => {
         const offsetLikes = dislike ? -1 : 1;
         const token = await user.getIdToken(true);
         const endpoint = dislike ? '/api/remove-like' : '/api/add-like';
-        await axios.post(endpoint, { reviewId }, createAuthHeaders(token));
+        await axios.post(endpoint, { reviewId, targetType: 'review' }, createAuthHeaders(token));
         setLikedReviews((reviews) => {
           return { ...reviews, [reviewId]: !dislike };
         });
diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
index 6431bc5f..bcc68f3e 100644
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@@ -1 +1,13 @@
 /// <reference types="react-scripts" />
+
+// Global firebase namespace declaration for firebase v8
+declare namespace firebase {
+  interface User {
+    uid: string;
+    email: string | null;
+    displayName: string | null;
+    photoURL: string | null;
+    emailVerified: boolean;
+    getIdToken(forceRefresh?: boolean): Promise<string>;
+  }
+}
diff --git a/frontend/src/utils/firebase.ts b/frontend/src/utils/firebase.ts
index b8dce1ac..8b0886f8 100644
--- a/frontend/src/utils/firebase.ts
+++ b/frontend/src/utils/firebase.ts
@@ -1,5 +1,4 @@
 import firebase from 'firebase/app';
-import { config } from 'dotenv';
 import { AxiosRequestConfig } from 'axios';
 import { Likes } from '../../../common/types/db-types';
 import { v4 as uuid } from 'uuid';
@@ -9,8 +8,6 @@ import 'firebase/storage'; // for storage
 import 'firebase/database'; // for realtime database
 import 'firebase/firestore'; // for cloud firestore
 
-config();
-
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_API_KEY,
   authDomain: process.env.REACT_APP_AUTH_DOMAIN,
@@ -76,4 +73,18 @@ const uploadFile = async (file: File) => {
   return await result.ref.getDownloadURL();
 };
 
-export { createAuthHeaders, getUser, uploadFile, subscribeLikes, signOut };
+const uploadBlogCoverAndSave = async (postId: string, file: File) => {
+  const storageRef = storage.ref();
+  const fileRef = storageRef.child(`blogcovers/${postId}/cover_${Date.now()}_${file.name}`);
+
+  await fileRef.put(file);
+  const url = await fileRef.getDownloadURL();
+
+  await firestore.collection('blogposts').doc(postId).update({
+    coverImageUrl: url,
+  });
+
+  return url;
+};
+
+export { uploadBlogCoverAndSave, createAuthHeaders, getUser, uploadFile, subscribeLikes, signOut };
diff --git a/package.json b/package.json
index 0a34bda9..c29b3987 100644
--- a/package.json
+++ b/package.json
@@ -79,4 +79,4 @@
     "react-google-charts": "^4.0.1",
     "react-infinite-scroll-component": "^6.1.0"
   }
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 1c814930..f95b2f7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2371,6 +2371,14 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+"@tinymce/tinymce-react@3.13.1":
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-3.13.1.tgz#354c6456aeef9f8e18dcd434ec61fe044c302dc6"
+  integrity sha512-fZ4ChY1KG8o6gzyBUegtPP8Voc18CvInA99SGpTwJ3OCpP0lYiydcup7DWh0VFVxQC7G7pOJun7GmtYc73WveA==
+  dependencies:
+    prop-types "^15.6.2"
+    tinymce "^5.5.1"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
@@ -12840,6 +12848,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tinymce@^5.5.1:
+  version "5.10.9"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.9.tgz#1dfacb3231c71a688d90ff44a0b3f2e91b3b9edf"
+  integrity sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"