diff --git a/public/images/tab1.jpg b/public/images/tab1.jpg
new file mode 100644
index 0000000..370f3cd
Binary files /dev/null and b/public/images/tab1.jpg differ
diff --git a/public/images/tab2.jpg b/public/images/tab2.jpg
new file mode 100644
index 0000000..fc9f54a
Binary files /dev/null and b/public/images/tab2.jpg differ
diff --git a/public/images/tab3.jpg b/public/images/tab3.jpg
new file mode 100644
index 0000000..3e73a46
Binary files /dev/null and b/public/images/tab3.jpg differ
diff --git a/public/images/tab4.jpg b/public/images/tab4.jpg
new file mode 100644
index 0000000..662d399
Binary files /dev/null and b/public/images/tab4.jpg differ
diff --git a/public/images/tab5.jpg b/public/images/tab5.jpg
new file mode 100644
index 0000000..c18fcba
Binary files /dev/null and b/public/images/tab5.jpg differ
diff --git a/src/App.js b/src/App.js
index 1041d7a..08c19bc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import SignIn from './components/SignIn/SignIn';
 import Register from './components/Register/Register';
+import Home from './components/Home/Home';
+import Page1 from './components/Page1/Page1';
 
 function App() {
   return (
@@ -9,6 +11,8 @@ function App() {
       <Routes>
         <Route path="/" element={<SignIn />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="/page1" element={<Page1 />} />
       </Routes>
     </Router>
   );
diff --git a/src/components/GlobalStyles/Elements.js b/src/components/GlobalStyles/Elements.js
index 4aa5571..dab64f1 100644
--- a/src/components/GlobalStyles/Elements.js
+++ b/src/components/GlobalStyles/Elements.js
@@ -132,4 +132,141 @@ export const TextLink = styled(Link)`
     &:hover {
         color: darkslategray;  // Change color on hover 
     }
-`
\ No newline at end of file
+`
+
+
+// HOMEPAGE
+
+// Home Page Container
+export const HomeContainer = styled.div`
+  padding: 40px;
+  background-color: white;
+  min-height: 100vh;
+`;
+
+// Header Section
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+`;
+
+// Page Title and Description
+export const PageTitle = styled.h1`
+  font-size: 28px;
+  color: ${({ theme }) => theme.colors.textPrimary};
+  text-align: center;
+`;
+
+export const PageDescription = styled.p`
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.textSecondary};
+  text-align: center;
+  margin-bottom: 20px;
+`;
+
+// Tabs Container
+export const TabsContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  gap: 20px;
+`;
+
+// Individual Tab Styles
+export const Tab = styled.div`
+  flex: 1;
+  min-width: 200px;
+  max-width: 300px;
+  padding: 20px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  border-radius: 8px;
+  color: #fff;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+`;
+
+export const TabTitle = styled.h2`
+  font-size: 20px;
+  margin-bottom: 10px;
+`;
+
+export const TabDescription = styled.p`
+  font-size: 14px;
+  margin-bottom: 10px;
+`;
+
+export const TabImage = styled.img`
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin-bottom: 10px;
+`;
+
+export const TabButton = styled(Link)`
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: ${({ theme }) => theme.colors.secondary};
+  color: #fff;
+  text-decoration: none;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.accent};
+  }
+`;
+
+// PAGES
+
+// Page Container
+export const PageContainer = styled.div`
+  padding: 40px;
+  background-color: white;
+  min-height: 100vh;
+`;
+
+// Form Container
+export const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: 20px 0;
+  align-items: center;
+`;
+
+// Select (Drop-Down Menu)
+export const Select = styled.select`
+  padding: 10px;
+  width: 200px;
+  border-radius: 4px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  font-size: 16px;
+`;
+
+// Submit Button
+export const SubmitButton = styled.button`
+  background-color: ${({ theme }) => theme.colors.accent};
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+
+export const TabImageAlt = styled.img`
+  width: 50%;
+  height: 80%;        /* Set a fixed height */
+  border-radius: 4px;
+  justify-content: center;
+`;
\ No newline at end of file
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
new file mode 100644
index 0000000..8294e6e
--- /dev/null
+++ b/src/components/Home/Home.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  HomeContainer,
+  Header,
+  Icon,
+  PageTitle,
+  PageDescription,
+  TabsContainer,
+  Tab,
+  TabTitle,
+  TabDescription,
+  TabImage,
+  TabButton,
+} from '../GlobalStyles/Elements';
+
+function Home() {
+  // Data for the 5 tabs
+  const tabsData = [
+    {
+      title: 'Tab 1',
+      description: 'This is the description for Tab 1.',
+      image: '/images/tab1.jpg',
+      link: '/page1',
+    },
+    {
+      title: 'Tab 2',
+      description: 'This is the description for Tab 2.',
+      image: '/images/tab2.jpg',
+      link: '/page2',
+    },
+    {
+      title: 'Tab 3',
+      description: 'This is the description for Tab 3.',
+      image: '/images/tab3.jpg',
+      link: '/page3',
+    },
+    {
+      title: 'Tab 4',
+      description: 'This is the description for Tab 4.',
+      image: '/images/tab4.jpg',
+      link: '/page4',
+    },
+    {
+      title: 'Tab 5',
+      description: 'This is the description for Tab 5.',
+      image: '/images/tab5.jpg',
+      link: '/page5',
+    },
+  ];
+
+  return (
+    <HomeContainer>
+      {/* Top Section with Logo */}
+      <Header>
+        <Icon to="/">YouTrend</Icon>
+      </Header>
+
+      {/* Page Title and Description */}
+      <PageTitle>Welcome to Your Homepage</PageTitle>
+      <PageDescription>Discover the latest trends and updates tailored for you.</PageDescription>
+
+      {/* Tabs Section */}
+      <TabsContainer>
+        {tabsData.map((tab, index) => (
+          <Tab key={index}>
+            <TabTitle>{tab.title}</TabTitle>
+            <TabDescription>{tab.description}</TabDescription>
+            <TabImage src={tab.image} alt={tab.title} />
+            <TabButton to={tab.link}>Learn More</TabButton>
+          </Tab>
+        ))}
+      </TabsContainer>
+    </HomeContainer>
+  );
+}
+
+export default Home;
diff --git a/src/components/Home/HomeElements.js b/src/components/Home/HomeElements.js
new file mode 100644
index 0000000..64ae6ca
--- /dev/null
+++ b/src/components/Home/HomeElements.js
@@ -0,0 +1,87 @@
+// Homepage Container
+export const HomeContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 40px;
+    background-color: ${({ theme }) => theme.colors.secondary};
+    min-height: 100vh;
+`;
+
+// Logo and Title Section
+export const Header = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 40px;
+`;
+
+export const Logo = styled(Link)`
+    font-size: 36px;
+    font-weight: bold;
+    color: ${({ theme }) => theme.colors.primary};
+    text-decoration: none;
+`;
+
+export const PageTitle = styled.h1`
+    font-size: 28px;
+    color: ${({ theme }) => theme.colors.textPrimary};
+`;
+
+export const PageDescription = styled.p`
+    font-size: 16px;
+    color: ${({ theme }) => theme.colors.textSecondary};
+    margin-bottom: 20px;
+`;
+
+// Tabs Section
+export const TabsContainer = styled.div`
+    display: flex;
+    justify-content: space-around;
+    margin-top: 20px;
+`;
+
+export const Tab = styled.div`
+    flex: 1;
+    padding: 20px;
+    background-color: ${({ theme }) => theme.colors.primary};
+    border-radius: 8px;
+    color: #fff;
+    margin: 0 10px;
+    cursor: pointer;
+    transition: transform 0.2s;
+
+    &:hover {
+        transform: scale(1.05);
+    }
+`;
+
+export const TabTitle = styled.h2`
+    font-size: 20px;
+    margin-bottom: 10px;
+`;
+
+export const TabDescription = styled.p`
+    font-size: 14px;
+    margin-bottom: 10px;
+`;
+
+export const TabImage = styled.img`
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin-bottom: 10px;
+`;
+
+export const TabButton = styled(Link)`
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: ${({ theme }) => theme.colors.accent};
+    color: #fff;
+    text-decoration: none;
+    border-radius: 4px;
+    text-align: center;
+
+    &:hover {
+        background-color: ${({ theme }) => theme.colors.primary};
+    }
+`;
diff --git a/src/components/Page1/Page1.js b/src/components/Page1/Page1.js
new file mode 100644
index 0000000..a90b5d4
--- /dev/null
+++ b/src/components/Page1/Page1.js
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import {
+  PageContainer,
+  Header,
+  Icon,
+  PageTitle,
+  PageDescription,
+  FormContainer,
+  Select,
+  SubmitButton,
+  TabImageAlt
+} from '../GlobalStyles/Elements';
+
+function Page1() {
+  const [selection, setSelection] = useState({
+    option1: '',
+    option2: '',
+    option3: ''
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setSelection((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert(`Selected options: ${selection.option1}, ${selection.option2}, ${selection.option3}`);
+  };
+
+  return (
+    <PageContainer>
+      {/* Logo and Navigation */}
+      <Header>
+        <Icon to="/home">YouTrend</Icon>
+      </Header>
+
+      {/* Page Title and Description */}
+      <PageTitle>Page 1</PageTitle>
+      <PageDescription>This page allows you to make selections from the drop-down menus.</PageDescription>
+
+      {/* Form Section */}
+      <FormContainer onSubmit={handleSubmit}>
+        <Select name="option1" value={selection.option1} onChange={handleChange}>
+          <option value="">Select Option 1</option>
+          <option value="Option 1A">Option 1A</option>
+          <option value="Option 1B">Option 1B</option>
+          <option value="Option 1C">Option 1C</option>
+        </Select>
+
+        <Select name="option2" value={selection.option2} onChange={handleChange}>
+          <option value="">Select Option 2</option>
+          <option value="Option 2A">Option 2A</option>
+          <option value="Option 2B">Option 2B</option>
+          <option value="Option 2C">Option 2C</option>
+        </Select>
+
+        <Select name="option3" value={selection.option3} onChange={handleChange}>
+          <option value="">Select Option 3</option>
+          <option value="Option 3A">Option 3A</option>
+          <option value="Option 3B">Option 3B</option>
+          <option value="Option 3C">Option 3C</option>
+        </Select>
+
+        <SubmitButton type="submit">Submit</SubmitButton>
+        
+        {/* Image Section */}
+        <TabImageAlt src="/images/tab1.jpg" alt="Tab 1 Image" />
+
+      </FormContainer>
+
+
+    </PageContainer>
+  );
+}
+
+export default Page1;
diff --git a/src/components/SignIn/SignIn.js b/src/components/SignIn/SignIn.js
index d1d3e2c..697ef5a 100644
--- a/src/components/SignIn/SignIn.js
+++ b/src/components/SignIn/SignIn.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { BGContainer, Form, FormButton, FormContent, FormH1, FormInput, FormLabel, FormWrap,
     Icon, TextLink } from '../GlobalStyles/Elements'; // Import global styled components
-
+//                         <TextLink to="/home">TEMP HOME PAGE</TextLink>
 function SignIn() {
   return (
         <BGContainer>
@@ -23,6 +23,7 @@ function SignIn() {
                         />
                         <FormButton type='submit'>Continue</FormButton>
                         <TextLink to="/register">CREATE AN ACCOUNT</TextLink>
+                        <TextLink to="/home">TEMP HOME PAGE</TextLink>
                     </Form>
                 </FormContent>
             </FormWrap>