diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2cf3114..02a56c5 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,30 +1,26 @@
-import { useState } from 'react';
-import './App.scss'
+import { Page, Panel } from './components/ui';
+import './sass/App.scss'
 
 function App() {
-  const [value, setValue] = useState("Waiting for stuff...");
-
-  const getThings = async () => {
-    const data = await fetch('http://localhost:8080/hello');
-    const json = await data.json();
-    setValue(json.message);
-  }
 
   return (
-    <div className="App">
-      <h1>RECIPE MANAGER</h1>
-      <h2>Simple Recipe Management and Sharing for the Home</h2>
-      <p>Keep all your most-used recipes handy in your own personal collection.</p>
+    <Page extraStyles='App'>
+      <Panel>
+        <h1>RECIPE MANAGER</h1>
+        <h2>Simple Recipe Management and Sharing for the Home</h2>
+        <p>Keep all your most-used recipes handy in your own personal collection.</p>
+      </Panel>
 
-      <h2>Share Your Recipe Collection</h2>
-      <p>Share your personal collection with your friends and family, and subscribe to their collections.</p>
+      <Panel>
+        <h2>Share Your Recipe Collection</h2>
+        <p>Share your personal collection with your friends and family, and subscribe to their collections.</p>
+      </Panel>
 
-      <h2>Build Shopping Lists Directly from Your Recipes</h2>
-      <p>Lay out your meal plan for the week, and let Recipin automatically generate your grocery list, ingredient by ingredient.</p>
-
-      <p>{value}</p>
-      <button onClick={getThings}>Do some stuff!</button>
-    </div>
+      <Panel>
+        <h2>Build Shopping Lists Directly from Your Recipes</h2>
+        <p>Lay out your meal plan for the week, and let Recipin automatically generate your grocery list, ingredient by ingredient.</p>
+      </Panel>
+    </Page>
   )
 }
 
diff --git a/client/src/components/pages/AddRecipe.tsx b/client/src/components/pages/AddRecipe.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/Collection.tsx b/client/src/components/pages/Collection.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/GroceryList.tsx b/client/src/components/pages/GroceryList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/Login.tsx b/client/src/components/pages/Login.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/Profile.tsx b/client/src/components/pages/Profile.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/ProfileSettings.tsx b/client/src/components/pages/ProfileSettings.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/Recipe.tsx b/client/src/components/pages/Recipe.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/Register.tsx b/client/src/components/pages/Register.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/Search.tsx b/client/src/components/pages/Search.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/pages/Welcome.tsx b/client/src/components/pages/Welcome.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/BigButton.tsx b/client/src/components/ui/BigButton.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/Card.tsx b/client/src/components/ui/Card.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/Checkbox.tsx b/client/src/components/ui/Checkbox.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/Divider.tsx b/client/src/components/ui/Divider.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/Dropdown.tsx b/client/src/components/ui/Dropdown.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/Navbar.tsx b/client/src/components/ui/Navbar.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/Page.tsx b/client/src/components/ui/Page.tsx
new file mode 100644
index 0000000..6be1db1
--- /dev/null
+++ b/client/src/components/ui/Page.tsx
@@ -0,0 +1,11 @@
+import { PageComponent } from "../../util/types"
+
+const Page: PageComponent = ({ extraStyles, children }) => {
+    return (
+        <main className={`page ${extraStyles || null}`}>
+            { children || null }
+        </main>
+    )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/client/src/components/ui/Panel.tsx b/client/src/components/ui/Panel.tsx
new file mode 100644
index 0000000..bdd68c1
--- /dev/null
+++ b/client/src/components/ui/Panel.tsx
@@ -0,0 +1,11 @@
+import { PanelComponent } from "../../util/types";
+
+const Panel: PanelComponent = ({ children, extraStyles }) => {
+    return (
+        <div className={`panel ${extraStyles || ''}`}>
+            { children || null }
+        </div>
+    )
+}
+
+export default Panel;
\ No newline at end of file
diff --git a/client/src/components/ui/Row.tsx b/client/src/components/ui/Row.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/TextField.tsx b/client/src/components/ui/TextField.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/Tooltip.tsx b/client/src/components/ui/Tooltip.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ui/index.ts b/client/src/components/ui/index.ts
new file mode 100644
index 0000000..7ffcf53
--- /dev/null
+++ b/client/src/components/ui/index.ts
@@ -0,0 +1,7 @@
+import Page from "./Page";
+import Panel from "./Panel";
+
+export {
+    Page,
+    Panel
+}
\ No newline at end of file
diff --git a/client/src/main.tsx b/client/src/main.tsx
index c224b3c..01af61d 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.scss'
+import './sass/index.scss'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
diff --git a/client/src/App.scss b/client/src/sass/App.scss
similarity index 100%
rename from client/src/App.scss
rename to client/src/sass/App.scss
diff --git a/client/src/sass/helpers/_mixins.scss b/client/src/sass/helpers/_mixins.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/sass/helpers/_placeholders.scss b/client/src/sass/helpers/_placeholders.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/sass/helpers/_queries.scss b/client/src/sass/helpers/_queries.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/sass/helpers/_variables.scss b/client/src/sass/helpers/_variables.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/index.scss b/client/src/sass/index.scss
similarity index 100%
rename from client/src/index.scss
rename to client/src/sass/index.scss
diff --git a/client/src/util/apiUtils.ts b/client/src/util/apiUtils.ts
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/util/types.ts b/client/src/util/types.ts
new file mode 100644
index 0000000..e3b6be3
--- /dev/null
+++ b/client/src/util/types.ts
@@ -0,0 +1,9 @@
+import { FC, ReactNode } from "react";
+
+interface PortalBase {
+    children?: ReactNode
+    extraStyles?: string
+}
+
+export type PageComponent = FC<PortalBase>
+export type PanelComponent = FC<PortalBase>
\ No newline at end of file