diff --git a/app/(pages)/(app)/products/_components/ProductList/ProductList.module.scss b/app/(pages)/(app)/products/_components/ProductList/ProductList.module.scss
index 9c2798e..4ccfae6 100644
--- a/app/(pages)/(app)/products/_components/ProductList/ProductList.module.scss
+++ b/app/(pages)/(app)/products/_components/ProductList/ProductList.module.scss
@@ -1,8 +1,8 @@
 .productList {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(5, 1fr);
     gap: var(--spacer);
     padding: var(--small-spacer);
-    width: 50%; // temporarily set to 50% for demo
+    width: 100%; // temporarily set to 50% for demo
     margin-left: 0;
    }
\ No newline at end of file
diff --git a/app/(pages)/(app)/products/page.module.scss b/app/(pages)/(app)/products/page.module.scss
index 609b93a..ed03e09 100644
--- a/app/(pages)/(app)/products/page.module.scss
+++ b/app/(pages)/(app)/products/page.module.scss
@@ -1,9 +1,176 @@
 .generalcontainer{
-    padding: var(--spacer);
+	display: flex;
+	flex-direction: column;
+    padding: 3%;
+	padding-left: 5%;
+	padding-right: 5%;
+	gap: 15px;
+	background-color: #F6F6F6;
+	font-family: var(--font-manrope);
 }
 
 .main {
 	display: flex;
 	flex-direction: column;
+	background-color: #F6F6F6;
 	gap: var(--spacer);
+	height:max-content;
+}
+
+.topbar{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 2%;
+	font-family: var(--font-manrope);
+}
+
+.addbutton{
+	background-color: #3A2779;
+	color: white;
+	border-radius: 5px;
+	width: 10%;
+	padding-top: 15px;
+	padding-bottom: 15px;
+	padding-right: 20px;
+	padding-left: 20px;
+	height: 100%;
+	text-align: center;
+	transition: 300ms;
+}
+
+.addbutton:hover{
+	background-color: #ededed;
+	color: #3A2779;
+	transition: 300ms;
+	
+}
+
+.searchbar{
+	border-radius: 20px;
+	border: 0;
+	background-color: white;
+	color: #454545;
+	padding-left: 3%;
+	padding-top: 0.75%;
+	padding-bottom: 0.75%;
+	width: 85%;
+}
+
+.rowbaropposite{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 1%;
+}
+
+.pagenav{
+	border-radius: 50px;
+	display: flex;
+	flex-direction: row;
+	background-color: rgb(255, 255, 255);
+	color: #454545;
+	padding-top: 0.25%;
+	padding-bottom: 0.25%;
+	padding-right: 0.2%;
+	padding-left: 0.2%;
+	width: 10%;
+	justify-content: space-between;
+	text-align: center;
+	align-items: center;
+}
+
+.circlebutton{
+	display: flex;
+	flex-direction: row;
+	border-radius: 100%;
+	background-color:#f7f4ff;
+	height: 100%;
+	padding-left: 8%;
+	padding-right: 8%;
+	padding-top: 4%;
+	padding-bottom: 4%;
+	color: #271953;
+	transition: 150ms;
+}
+
+.circlebutton:hover{
+	background-color: rgb(134, 128, 155);
+	color: white;
+	transition: 150ms;
+}
+
+.rowbar{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: start;
+	margin-top: 1%;
+	margin-bottom: 1%;
+}
+
+.genbutton{
+	background-color: white;
+	color: #454545;
+	border-radius: 15px;
+	padding-top: 15px;
+	padding-bottom: 15px;
+	width: 8%;
+	height: 100%;
+	text-align: center;
+	transition: 300ms;
+	margin-right: 1%;
+}
+
+.genbutton:hover{
+	background-color: #3A2779;
+	color: white;
+	transition: 300ms;
+	
+}
+
+.listingarea{
+	background-color: white;
+	height: 100%;
+	padding-top: 25px;
+	padding-bottom: 25px;
+	padding-right: 25px;
+	padding-left: 25px;
+	width: 100%;
+	border-radius: 15px;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #454545;
+	justify-content: center;
+	align-items: center;
+	// text-align: center;
+}
+
+.centerbar{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+.addlistingbutton{
+	background-color: #3A2779;
+	color: white;
+	border-radius: 10px;
+	width: 15%;
+	padding-top: 15px;
+	padding-bottom: 15px;
+	padding-right: 20px;
+	padding-left: 20px;
+	height: 100%;
+	text-align: center;
+	transition: 300ms;
+}
+
+.addlistingbutton:hover{
+	background-color: #F6F6F6;
+	color: rgb(46, 46, 46);
+	transition: 300ms;
 }
\ No newline at end of file
diff --git a/app/(pages)/(app)/products/page.tsx b/app/(pages)/(app)/products/page.tsx
index d9631b7..da5769b 100644
--- a/app/(pages)/(app)/products/page.tsx
+++ b/app/(pages)/(app)/products/page.tsx
@@ -1,6 +1,6 @@
+'use client';
 import styles from './page.module.scss';
 import ProductList from './_components/ProductList/ProductList';
-import SearchFilters from './_components/SearchFilters/SearchFilters';
 
 const products = [
   {
@@ -56,10 +56,39 @@ const products = [
 export default function Products() {
   return (
     <div className={styles.generalcontainer}>
-      <h2>Products</h2>
-      <div className={`${styles.generalcontainer} ${styles.main}`}>
-        <SearchFilters />
-        <ProductList products={products} />
+      <div className={styles.topbar}>
+        <h2>Product Listings</h2>
+        <div className={styles.addbutton}>+ Add</div>
+      </div>
+      <div className={styles.rowbaropposite}>
+        <input
+          className={styles.searchbar}
+          type="text"
+          id="searchbar"
+          name="searchbar"
+          placeholder="Search Listings"
+        ></input>
+        <div className={styles.pagenav}>
+          <div className={styles.circlebutton}>&lt;</div>0 out of 0
+          <div className={styles.circlebutton}>&gt;</div>
+        </div>
+      </div>
+      <div className={styles.rowbar}>
+        <div className={styles.genbutton}>All</div>
+        <div className={styles.genbutton}>Active</div>
+        <div className={styles.genbutton}>Draft</div>
+        <div className={styles.genbutton}>Archived</div>
+      </div>
+      <div className={styles.listingarea}>
+        {products.length == 0 ? (
+          <div className={styles.centerbar}>
+            <div className={styles.addlistingbutton}>List A Product</div>
+          </div>
+        ) : (
+          <div>
+            <ProductList products={products} />
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/app/(pages)/_globals/fonts.ts b/app/(pages)/_globals/fonts.ts
index f169136..2968f15 100644
--- a/app/(pages)/_globals/fonts.ts
+++ b/app/(pages)/_globals/fonts.ts
@@ -1,4 +1,4 @@
-import { Inter, Montserrat } from 'next/font/google';
+import { Inter, Montserrat, Manrope } from 'next/font/google';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -10,7 +10,12 @@ const montserrat = Montserrat({
   variable: '--font-montserrat',
 });
 
-const fonts = [inter, montserrat];
+const manrope = Manrope({
+  subsets: ['latin'],
+  variable: '--font-manrope',
+});
+
+const fonts = [inter, montserrat, manrope];
 
 const font_variables = fonts.map((font) => font.variable);
 const font_string = font_variables.join(' ');
diff --git a/app/(pages)/_globals/styles/globals.scss b/app/(pages)/_globals/styles/globals.scss
index 0e7b7bb..c52c5dd 100644
--- a/app/(pages)/_globals/styles/globals.scss
+++ b/app/(pages)/_globals/styles/globals.scss
@@ -8,7 +8,6 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: var(--font-inter);
   color: var(--text-dark);
 }
 
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
index db487d7..2897e4a 100644
--- a/app/(pages)/layout.tsx
+++ b/app/(pages)/layout.tsx
@@ -2,13 +2,9 @@ import '@globals/styles/colors.scss';
 import '@globals/styles/spacers.scss';
 import '@globals/styles/variables.scss';
 import '@globals/styles/globals.scss';
-import fonts from '@globals/fonts';
+import font_string from '@globals/fonts';
 import metadata from '@globals/metadata.json';
 
-import navLinks from '@data/navLinks.json';
-import Navbar from '@components/Navbar/Navbar';
-import Footer from './_components/Footer/Footer';
-
 export { metadata };
 
 export default function RootLayout({
@@ -18,11 +14,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={fonts}>
-        <Navbar />
-        {children}
-        <Footer navLinks={navLinks} />
-      </body>
+      <body className={font_string}>{children}</body>
     </html>
   );
 }