diff --git a/compass/package-lock.json b/compass/package-lock.json
index cd8e0a2..aa9dab8 100644
--- a/compass/package-lock.json
+++ b/compass/package-lock.json
@@ -8,6 +8,7 @@
       "name": "compass",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.1.1",
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18"
@@ -113,6 +114,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz",
+      "integrity": "sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
diff --git a/compass/package.json b/compass/package.json
index af34787..a748bbe 100644
--- a/compass/package.json
+++ b/compass/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.1",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18"
diff --git a/compass/pages/index.tsx b/compass/pages/index.tsx
index 09d12e9..3eed8e4 100644
--- a/compass/pages/index.tsx
+++ b/compass/pages/index.tsx
@@ -9,34 +9,39 @@ import Page from '@/components/auth/Page';
 
 const Home: NextPage = () => {
     return (
-        <Page>
-            <form className="bg-white shadow-md rounded px-12 pt-8 pb-8 mb-4">
-                <div className="mb-4">
-                    <label className="block text-gray-700 text-sm font-bold mb-2" for="username">
-                        Username
-                    </label>
-                    <Input />
-                </div>
-                <div className="mb-6">
-                    <label className="block text-gray-700 text-sm font-bold mb-2" for="password">
-                        Password
-                    </label>
-                    <Input />
-                </div>
-                <div className="flex flex-col items-left space-y-2">
-                    <InlineLink>
-                        Forgot password?
-                    </InlineLink>
-                    <Button>
-                        Login
-                    </Button>
-                    
-                </div>
-            </form>
-            <p className="text-center text-gray-500 text-xs">
-                &copy; 2024 Compass Center
-            </p>
-        </Page>
+        <>
+            <Head>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+            </Head>
+            <Page>
+                <form className="bg-white shadow-md rounded px-4 sm:px-8 md:px-12 pt-8 pb-8 mb-4">
+                    <div className="mb-4">
+                        <label className="block text-gray-700 text-sm font-bold mb-2" for="username">
+                            Username
+                        </label>
+                        <Input />
+                    </div>
+                    <div className="mb-6">
+                        <label className="block text-gray-700 text-sm font-bold mb-2" for="password">
+                            Password
+                        </label>
+                        <Input />
+                    </div>
+                    <div className="flex flex-col items-left space-y-2">
+                        <InlineLink>
+                            Forgot password?
+                        </InlineLink>
+                        <Button>
+                            Login
+                        </Button>
+
+                    </div>
+                </form>
+                <p className="text-center text-gray-500 text-xs">
+                    &copy; 2024 Compass Center
+                </p>
+            </Page>
+        </>
     );
 };
 
