diff --git a/package-lock.json b/package-lock.json
index 5d6978d1c5d5ec0458e77b2952452074293434f3..4594f4c933fc8cf23f5de1dd230f5def37df1a1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,9 @@
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.3.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
diff --git a/package.json b/package.json
index 6d1cd3f66bc4e4627d3128227835e243805bdb6d..78b1a84960b1c709a9f151ff3b2a9f16983f5ff9 100644
--- a/package.json
+++ b/package.json
@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.5"
   }
 }
diff --git a/src/components/HomePage/HomePage.css b/src/components/HomePage/HomePage.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..54b0d14a380c8063f740c95134b09bab3edd0e1c
--- /dev/null
+++ b/src/components/HomePage/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client'
+import './HomePage.css';
+
+function HomePage() {
+    return (
+        <div className = "HomePageContainer">
+            
+        </div>
+    )
+}
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/components/Profile/Profile.css b/src/components/Profile/Profile.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4aad5fda0295219a9523f6067beb6a9b9f0db912
--- /dev/null
+++ b/src/components/Profile/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './Profile.css'
+
+function Profile() {
+    return (
+        <div className="ProfilePageContainer">
+            <h1>
+                Account Details
+            </h1>
+            <div className="text-field">
+                <label className="detail-label">Email</label>
+                {/* <input className="detail-value" type="text" id="email-value" placeholder=
+                <?php echo isset($_SESSION["email"])?$_SESSION['email']:"<nologin>"?> 
+                disabled> */}
+            </div>
+            <div className="text-field">
+                <label className="detail-label">Username</label>
+                {/* <input className="detail-value" type="text" id="username-value" placeholder=
+                <?php echo isset($_SESSION["username"])?$_SESSION['username']:"<nologin>"?>
+                disabled> */}
+            </div>
+            <div className="text-field">
+                <label className="detail-label">Password</label>
+                {/* <input className="detail-value password" type="password" id="password-value" placeholder="--------" disabled oninput="confirmPassword()" onchange="cancelConfirmPassword()"> */}
+                <p className="password-criteria"></p>
+            </div>
+            <div className="text-field" id="confirm-password-field">
+                <label className="detail-label">Confirm Password</label>
+                {/* <input className="detail-value password" type="password" id="confirm-password-value" placeholder="Re-Type Password" oninput="confirmCorrectRetype()"> */}
+                <p className="password-criteria"></p>    
+            </div>
+            <div className="button-field">
+                <button id="edit-profile-button" 
+                // onclick="startEdit()"
+                >
+                    Edit profile
+                </button>
+                <button id="cancel-edit-button" 
+                // onclick="cancelEdit()"
+                >
+                    Cancel
+                    </button>
+                <button id="submit-edit-button" 
+                // onclick="submitEdit()"
+                >
+                    Submit
+                    </button>
+            </div>
+        </div>
+    )
+}
+
+export default Profile;
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000000000000000000000000000000000000..ca5161f377f313757115c4c4c9b9de2884efa81a
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    /* TODO: Add color pallete */
+    /* --primary: #292629;
+    --secondary: #4863D8;
+    --tertiary: #F9F6D5;
+    --quaternary: #D6E9B0;
+    --quinary: #F4602C; */
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --foreground-rgb: 255, 255, 255;
+        --background-start-rgb: 0, 0, 0;
+        --background-end-rgb: 0, 0, 0;
+    }
+}
+body {
+    color: var(--tertiary);
+    /* background: linear-gradient(to bottom, var(--primary), var(--secondary)); */
+    /* background-color: #222536; */
+    background-image: linear-gradient(to bottom, #000000 40%, #30344d);
+    margin: 0;
+
+}
+* {
+    font-family: 'Montserrat', sans-serif;
+}
+.container{
+    min-width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..e5b64f308c4ea9eb7826f0d34441b90cb58e6c5b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+