diff --git a/public/img/directory_banner.png b/public/img/directory_banner.png
new file mode 100644
index 00000000..bb8a1eea
Binary files /dev/null and b/public/img/directory_banner.png differ
diff --git a/public/img/ideation_banner.png b/public/img/ideation_banner.png
index 2a4e5889..337b23bb 100644
Binary files a/public/img/ideation_banner.png and b/public/img/ideation_banner.png differ
diff --git a/public/img/tech_stack_banner.png b/public/img/tech_stack_banner.png
new file mode 100644
index 00000000..8c637cef
Binary files /dev/null and b/public/img/tech_stack_banner.png differ
diff --git a/src/app/directory/components/TeamTable.tsx b/src/app/directory/components/TeamTable.tsx
index e6a71f7e..6f6cd17a 100644
--- a/src/app/directory/components/TeamTable.tsx
+++ b/src/app/directory/components/TeamTable.tsx
@@ -6,7 +6,7 @@ const currentUserId = "1";
 
 function TeamTable() {
   return (
-    <div className="overflow-x-auto">
+    <div className="w-full">
       <table
         className={`table px-6 pb-10 border-separate border-none bg-primary-content pt-7 ${styles["table"]}`}
       >
diff --git a/src/app/directory/page.tsx b/src/app/directory/page.tsx
index 6b69d371..47471041 100644
--- a/src/app/directory/page.tsx
+++ b/src/app/directory/page.tsx
@@ -1,7 +1,18 @@
 import { TeamTable } from ".";
+import { Banner } from "@/components";
 
 function DirectoryPage() {
-  return <TeamTable />;
+  return (
+    <>
+      <Banner
+        image="/img/directory_banner.png"
+        alt="directory_banner"
+        title="Directory"
+        description="Behold, your mighty band of teammates! If you want them to plan with precision and prowess, make sure your deets are up to date, or else prepare for some serious spreadsheet confusion!"
+      />
+      <TeamTable />;
+    </>
+  );
 }
 
 export default DirectoryPage;
diff --git a/src/app/ideation/components/CreateIdeationContainer.tsx b/src/app/ideation/components/CreateIdeationContainer.tsx
index b999be75..92550389 100644
--- a/src/app/ideation/components/CreateIdeationContainer.tsx
+++ b/src/app/ideation/components/CreateIdeationContainer.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components";
 
 function CreateIdeationContainer() {
   return (
-    <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
+    <div className="card w-full h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
       <VoteDescriptionCard />
       <section className="card-body gap-y-7 px-20">
         <h2 className="text-xl font-semibold text-neutral-focus">
diff --git a/src/app/ideation/components/IdeationContainer.tsx b/src/app/ideation/components/IdeationContainer.tsx
index 33a63a54..d065f8e9 100644
--- a/src/app/ideation/components/IdeationContainer.tsx
+++ b/src/app/ideation/components/IdeationContainer.tsx
@@ -10,7 +10,7 @@ function IdeationContainer({
   contributed_by,
 }: Ideation) {
   return (
-    <div className="card w-[1280px] h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
+    <div className="card w-full h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
       <VoteCard users={users} voted={voted} />
       <section className="card-body gap-y-7 p-0 w-[1000px] h-[377px] overflow-y-auto pr-5">
         <h2 className="text-xl font-semibold text-neutral-focus">{title}</h2>
diff --git a/src/app/ideation/page.tsx b/src/app/ideation/page.tsx
index 2840478f..356a7400 100644
--- a/src/app/ideation/page.tsx
+++ b/src/app/ideation/page.tsx
@@ -3,7 +3,7 @@ import { Banner } from "@/components";
 
 function IdeationPage() {
   return (
-    <div className="flex flex-col gap-y-9 p-3">
+    <>
       <Banner
         image="/img/ideation_banner.png"
         alt="ideation_banner"
@@ -23,7 +23,7 @@ function IdeationPage() {
           contributed_by={i.contributed_by}
         />
       ))}
-    </div>
+    </>
   );
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fc3d2073..7147792c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
             <StoreProvider>
               <div className="flex flex-1 overflow-hidden">
                 <Sidebar />
-                <main className="flex flex-col flex-1 overflow-y-auto items-center">
+                <main className="flex flex-col flex-1 overflow-y-auto items-center gap-y-9 p-10 w-full">
                   {children}
                 </main>
               </div>
diff --git a/src/app/tech-stack/components/TechStackContainer.module.css b/src/app/tech-stack/components/TechStackContainer.module.css
deleted file mode 100644
index 61221827..00000000
--- a/src/app/tech-stack/components/TechStackContainer.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.tech-container-width {
-    max-width: 85.5625rem;
-}
\ No newline at end of file
diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
index 82d57b2d..84acd905 100644
--- a/src/app/tech-stack/components/TechStackContainer.tsx
+++ b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -1,4 +1,3 @@
-import styles from "./TechStackContainer.module.css";
 import { TechStackCard, techStack } from ".";
 
 export default function TechStackContainer() {
@@ -12,9 +11,7 @@ export default function TechStackContainer() {
     }
   }
   return (
-    <div
-      className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}
-    >
+    <div className="card bg-primary-content p-10 w-full">
       <ul className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li
diff --git a/src/app/tech-stack/page.tsx b/src/app/tech-stack/page.tsx
index 881e17fa..f8be7557 100644
--- a/src/app/tech-stack/page.tsx
+++ b/src/app/tech-stack/page.tsx
@@ -1,5 +1,16 @@
 import { TechStackContainer } from ".";
+import { Banner } from "@/components";
 
 export default function TeckStackPage() {
-  return <TechStackContainer />;
+  return (
+    <>
+      <Banner
+        image="/img/tech_stack_banner.png"
+        alt="teck_stack_banner"
+        title="Tech Stack"
+        description="Alright, let's get down to business. We need to figure out which tech stack we're going to use to power this bad boy. Are you a JavaScript junkie, a Python pro, a Java genius, or a Ruby rockstar? Let's vote"
+      />
+      <TechStackContainer />;
+    </>
+  );
 }
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 3d03615d..24664289 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -9,8 +9,8 @@ interface BannerProps {
 
 function Banner({ image, alt, title, description }: BannerProps) {
   return (
-    <div className="card w-[1280px] h-[320px] bg-accent-content flex flex-row px-20">
-      <Image src={image} alt={alt} width={454} height={300} priority={false} />
+    <div className="card w-full max-h-[320px] bg-accent-content flex flex-row px-20 py-10 box-border">
+      <Image src={image} alt={alt} width={454} height={200} priority={false} />
       <div className="flex flex-col justify-center pl-24 gap-y-3.5">
         <h3 className="text-3xl font-bold text-black">{title}</h3>
         <p className="text-lg font-medium text-black">{description}</p>