diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e5d28ff4f1..4ba1e68314 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -7,6 +7,7 @@ import { Rewards } from './pages/RewardPage'
 import { UserProfile } from './pages/UserProfilePage'
 import { Login } from './pages/LoginPage'
 import { GlobalStyle } from './styles/GlobalStyles'
+import { Signup } from './pages/SignupPage'
 
 export const App = () => {
 
@@ -21,7 +22,9 @@ export const App = () => {
         <Route path="/rewards" element={<Rewards />} />
         <Route path="/profile" element={<UserProfile />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
       </Routes>
     </>
   );
 };
+
diff --git a/frontend/src/components/Avatar.jsx b/frontend/src/components/Avatar.jsx
index e69de29bb2..2e4ebd42ea 100644
--- a/frontend/src/components/Avatar.jsx
+++ b/frontend/src/components/Avatar.jsx
@@ -0,0 +1,7 @@
+export const Avatar = () => {
+  return (
+    <>
+      🤩
+    </>
+  )
+}
\ No newline at end of file
diff --git a/frontend/src/components/CreateQuest.jsx b/frontend/src/components/CreateQuest.jsx
index a45fca4275..c29b4b1c21 100644
--- a/frontend/src/components/CreateQuest.jsx
+++ b/frontend/src/components/CreateQuest.jsx
@@ -3,18 +3,30 @@ import styled from 'styled-components'
 export const CreateQuest = () => {
   return (
     <Form>
-      <fieldset>Create new quest
-        <input type="text" />
-        <input type="text" />
-        <input type="text" />
+      <Label>
+        Create new quest
+        <input type="text" placeholder='Text input' />
+        
+        <select name="category" id="QuestCategory" >
+          <option value="">Select a category</option>
+        </select>
+
+        <select name="time" id="QuestTime" >
+          <option value="">Time needed</option>
+        </select>
+
         <button type="submit">Add a quest</button>
-      </fieldset>
+      </Label>
     </Form>
   )
 }
 
 const Form = styled.form`
+  margin: 10px;
+  background-color: var(--accent-color)
+`
+
+const Label = styled.label`
   display: flex;
   flex-direction: column;
-  margin: 5px;
 `
\ No newline at end of file
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 8521301b07..87f65a86da 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -22,7 +22,7 @@ export const Header = () => {
 const Div = styled.div`
   display: flex;
   background-color: var(--secondary-color);
-  margin: 5px 8px;
+  margin: 5px 10px;
 `
 
 const P = styled.p`
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
index e69de29bb2..35a91ea950 100644
--- a/frontend/src/components/LoginForm.jsx
+++ b/frontend/src/components/LoginForm.jsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+
+export const LoginForm = () => {
+  return (
+    <>
+      <Form>
+          <h4>Welcome Back! Log in now:</h4>
+          <input type="email" placeholder="email" />
+          <input type="password" placeholder="password" />
+          <button type="submit">Log in</button>
+          <Link to="/signup">Not a user? Sign up</Link>
+      </Form>
+    </>
+  )
+}
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+`
\ No newline at end of file
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index a3e14bd809..fbd24533e2 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -6,9 +6,11 @@ export const Navbar = () => {
     <>
       <Nav>
         <StyledLink to='/'>Home</StyledLink>
+        <StyledLink to='/profile'>Profile</StyledLink>
         <StyledLink to='/feed'>Friends</StyledLink>
         <StyledLink to='/about'>About</StyledLink>
         <StyledLink to='/login'>Log in</StyledLink>
+        <button>Log out</button>
       </Nav>
     </>
   )
@@ -18,10 +20,10 @@ const Nav = styled.nav`
   display: flex;
   background-color: var(--primary-color);
   justify-content: space-between;
-  max-width: 500px;
   padding: 5px;
 `
 
 const StyledLink = styled(Link)`
   text-decoration: none;
-`
\ No newline at end of file
+`
+// TODO: decide: Should navbar be hamburger menu on phone size?
\ No newline at end of file
diff --git a/frontend/src/components/QuestLibrary.jsx b/frontend/src/components/QuestLibrary.jsx
index e69de29bb2..7ff954f408 100644
--- a/frontend/src/components/QuestLibrary.jsx
+++ b/frontend/src/components/QuestLibrary.jsx
@@ -0,0 +1,17 @@
+export const QuestLibrary = () => {
+  return (
+    <>
+      <h2>Quest library</h2>
+      <ul>
+        <li>Weekly shopping</li>
+        <li>Laundry</li>
+        <li>Clean out fridge</li>
+        <li>Dust</li>
+        <li>Mop</li>
+        <li>Organize</li>
+      </ul>
+    </>
+  )
+}
+
+// TODO  Decide: QuestLibrary hardcoded as list at the moment. Keep that way? Or create Library task card and map over?
\ No newline at end of file
diff --git a/frontend/src/components/SignupForm.jsx b/frontend/src/components/SignupForm.jsx
index e69de29bb2..bc0a86eb69 100644
--- a/frontend/src/components/SignupForm.jsx
+++ b/frontend/src/components/SignupForm.jsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+
+export const SignupForm = () => {
+  return (
+      <Form>
+          <h4>Register new user</h4>
+          <input type="text" placeholder="Username" />
+          <input type="email" placeholder="email" />
+          <input type="password" placeholder="password" />
+          <button type="submit">Register</button>
+          <Link to="/login">I already have an account</Link>
+      </Form>
+  )
+}
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+`
+
+// TODO: This is only basic form and step 1/2. Add step 2 (add code sent to email to verify)
\ No newline at end of file
diff --git a/frontend/src/components/StrikeDisplay.jsx b/frontend/src/components/StrikeDisplay.jsx
index e69de29bb2..b64a503b87 100644
--- a/frontend/src/components/StrikeDisplay.jsx
+++ b/frontend/src/components/StrikeDisplay.jsx
@@ -0,0 +1,7 @@
+export const Strike = () => {
+  return (
+    <>
+      <p>Daily strike:</p>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/frontend/src/components/cards/QuestCard.jsx b/frontend/src/components/cards/QuestCard.jsx
new file mode 100644
index 0000000000..8a127caa94
--- /dev/null
+++ b/frontend/src/components/cards/QuestCard.jsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+export const QuestCard = () => {
+  return (
+    <Div>
+      <div>
+        <h4>Name</h4>
+      </div>
+      <div>
+        <p>Task:</p>
+        <p>Time spent:</p>
+        <p>Kudos: 🙌</p>
+      </div>
+    </Div>
+  )
+}
+
+const Div = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+`
\ No newline at end of file
diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx
index 731afe5798..89895fc408 100644
--- a/frontend/src/pages/AboutPage.jsx
+++ b/frontend/src/pages/AboutPage.jsx
@@ -1,5 +1,11 @@
+import { Navbar } from '../components/Navbar'
+
 export const About = () => {
   return (
-    <h1>About page</h1>
+    <>
+      <Navbar />
+      <p>What does the app do</p>
+      <p>How to get started</p>
+    </>
   )
 }
\ No newline at end of file
diff --git a/frontend/src/pages/FriendFeedPage.jsx b/frontend/src/pages/FriendFeedPage.jsx
index 4d8d0db76c..71b6540bcd 100644
--- a/frontend/src/pages/FriendFeedPage.jsx
+++ b/frontend/src/pages/FriendFeedPage.jsx
@@ -1,5 +1,18 @@
+import { QuestCard } from '../components/cards/QuestCard'
+import { Navbar } from '../components/Navbar'
+
 export const FriendFeed = () => {
   return (
-    <h1>Friend feed page</h1>
+    <>
+      <Navbar />
+      <h2>My friends finished quests</h2>
+      <form>
+        <label>
+          Add friend:
+          <input type="search" placeholder="Search 🔎"/>
+        </label>
+      </form>
+      <QuestCard />
+    </>
   )
 }
\ No newline at end of file
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 1fa44b3843..240fb6a1c5 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -2,6 +2,7 @@ import { Navbar } from '../components/Navbar'
 import { Header } from '../components/Header'
 import styled from 'styled-components'
 import { CreateQuest } from '../components/CreateQuest'
+import { QuestLibrary } from '../components/QuestLibrary'
 
 export const Home = () => {
   return (
@@ -15,6 +16,7 @@ export const Home = () => {
       <Div>
         <p>Motivational things</p>
       </Div>
+      <QuestLibrary />
     </>
   )
 }
@@ -22,6 +24,8 @@ export const Home = () => {
 const Div = styled.div`
   display: flex;
   background-color: var(--accent-color);
-  margin: 5px;
+  margin: 10px;
   justify-content: center;
-`
\ No newline at end of file
+`
+
+// TODO: This is home page for logged out user. Decide what to keep there. Simplify? 
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 1c538c463f..a44eff3568 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -1,5 +1,13 @@
+import { Navbar } from '../components/Navbar'
+import { LoginForm } from '../components/LoginForm'
+
 export const Login = () => {
   return (
-    <h1>Log in page</h1>
+    <>
+      <Navbar />
+      <LoginForm />
+    </>
   )
-}
\ No newline at end of file
+}
+
+// TODO: Decide, for now login and signup are pages. Do we want it to be modals?
\ No newline at end of file
diff --git a/frontend/src/pages/QuestPage.jsx b/frontend/src/pages/QuestPage.jsx
index f83490fb8d..d47be0f8c9 100644
--- a/frontend/src/pages/QuestPage.jsx
+++ b/frontend/src/pages/QuestPage.jsx
@@ -1,5 +1,38 @@
+import { Navbar } from "../components/Navbar"
+import styled from 'styled-components'
+
 export const Quests = () => {
   return (
-    <h1>Quest page</h1>
+    <>
+      <Navbar />
+        <Form>
+          <h3>Get ready for your quest of the day!</h3>
+          <Label>
+            How much time do you have today?
+            <select name="" id="">
+              <option value="10">10 min</option>
+              <option value="20">20 min</option>
+              <option value="30">30 min</option>
+              <option value="60">1 hour</option>
+            </select>
+          </Label>
+          <button type="submit">Get quest</button>
+          <button>Toss coin</button>
+        </Form>
+    </>
   )
-}
\ No newline at end of file
+}
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+  padding: 10px;
+`
+
+const Label = styled.label`
+  display: flex;
+  flex-direction: column;
+`
\ No newline at end of file
diff --git a/frontend/src/pages/RewardPage.jsx b/frontend/src/pages/RewardPage.jsx
index 4ceeb3a8ab..2fdd92bbb2 100644
--- a/frontend/src/pages/RewardPage.jsx
+++ b/frontend/src/pages/RewardPage.jsx
@@ -2,4 +2,6 @@ export const Rewards = () => {
   return (
     <h1>Rewards page</h1>
   )
-}
\ No newline at end of file
+}
+
+// TODO: Put content here + set up route
\ No newline at end of file
diff --git a/frontend/src/pages/SignupPage.jsx b/frontend/src/pages/SignupPage.jsx
new file mode 100644
index 0000000000..852e75a783
--- /dev/null
+++ b/frontend/src/pages/SignupPage.jsx
@@ -0,0 +1,11 @@
+import { Navbar } from '../components/Navbar'
+import { SignupForm } from '../components/SignupForm'
+
+export const Signup = () => {
+  return (
+    <>
+      <Navbar />
+      <SignupForm />
+    </>
+  )
+}
diff --git a/frontend/src/pages/UserProfilePage.jsx b/frontend/src/pages/UserProfilePage.jsx
index a4677f1a5f..c1b1635bd7 100644
--- a/frontend/src/pages/UserProfilePage.jsx
+++ b/frontend/src/pages/UserProfilePage.jsx
@@ -1,5 +1,33 @@
+import { Navbar } from '../components/Navbar'
+import { Header } from '../components/Header'
+import styled from 'styled-components'
+import { CreateQuest } from '../components/CreateQuest'
+import { QuestLibrary } from '../components/QuestLibrary'
+import { Avatar } from '../components/Avatar'
+import { Strike } from '../components/StrikeDisplay'
+import { Link } from 'react-router-dom'
+
 export const UserProfile = () => {
   return (
-    <h1>User profile page</h1>
+    <>
+      <Navbar />
+      <Header />
+      <Div>
+        <Strike />
+        <Avatar />
+        <Link to="/quests">Get quest of the day</Link>
+        {/* TODO: modal for getting quest of the day */}
+      </Div>
+      <CreateQuest />
+      <QuestLibrary />
+      {/* NOTE: hide add quest + list of quests by default? Only show when user clicks button?  */}
+    </>
   )
-}
\ No newline at end of file
+}
+
+const Div = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
\ No newline at end of file
diff --git a/frontend/src/stores/QuestStore.jsx b/frontend/src/stores/QuestStore.jsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/src/stores/Stores.jsx b/frontend/src/stores/Stores.jsx
new file mode 100644
index 0000000000..c9513c888f
--- /dev/null
+++ b/frontend/src/stores/Stores.jsx
@@ -0,0 +1,3 @@
+// TODO: create stores:
+// 1. useUserStore
+// 2. useQuestStore
\ No newline at end of file
diff --git a/frontend/src/styles/GlobalStyles.jsx b/frontend/src/styles/GlobalStyles.jsx
index a634e99992..0a834abf02 100644
--- a/frontend/src/styles/GlobalStyles.jsx
+++ b/frontend/src/styles/GlobalStyles.jsx
@@ -1,6 +1,10 @@
 import { createGlobalStyle } from 'styled-components'
 
 export const GlobalStyle = createGlobalStyle`
+  * {
+    box-sizing: border-box;
+  }
+
   :root {
     --main-bg-color: #FFFFFF;
     --main-text-color: #000000;
@@ -8,4 +12,16 @@ export const GlobalStyle = createGlobalStyle`
     --secondary-color: #ECECEC;
     --accent-color: #F7F7F7;
   }
-`
\ No newline at end of file
+
+  #root {
+    max-width: 500px;
+    width: 100%;
+  }
+
+  body {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+  }
+`
+