diff --git a/compass/app/auth/forgot_password/page.tsx b/compass/app/auth/forgot_password/page.tsx
index 555f0cd..c8493b0 100644
--- a/compass/app/auth/forgot_password/page.tsx
+++ b/compass/app/auth/forgot_password/page.tsx
@@ -1,11 +1,10 @@
 // pages/forgot-password.tsx
 "use client";
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import Input from '@/components/Input';
 import Button from '@/components/Button';
 import InlineLink from '@/components/InlineLink';
-import Paper from '@/components/auth/Paper';
 import ErrorBanner from '@/components/auth/ErrorBanner';
 
 
diff --git a/compass/app/auth/login/page.tsx b/compass/app/auth/login/page.tsx
index 5055714..a420d32 100644
--- a/compass/app/auth/login/page.tsx
+++ b/compass/app/auth/login/page.tsx
@@ -4,7 +4,6 @@
 import Button from '@/components/Button';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
-import Paper from '@/components/auth/Paper';
 import Image from 'next/image';
 import { useState } from "react";
 import PasswordInput from '@/components/auth/PasswordInput';
diff --git a/compass/app/auth/new_password/page.tsx b/compass/app/auth/new_password/page.tsx
index 3fb3e83..1d9ca52 100644
--- a/compass/app/auth/new_password/page.tsx
+++ b/compass/app/auth/new_password/page.tsx
@@ -2,8 +2,6 @@
 "use client";
 import { useState, useEffect } from 'react'; 
 import Button from '@/components/Button';
-
-import Paper from '@/components/auth/Paper';
 import PasswordInput from '@/components/auth/PasswordInput';
 import ErrorBanner from '@/components/auth/ErrorBanner';
 
diff --git a/compass/app/resource/layout.tsx b/compass/app/resource/layout.tsx
index c34eb87..db968f1 100644
--- a/compass/app/resource/layout.tsx
+++ b/compass/app/resource/layout.tsx
@@ -2,6 +2,7 @@
 
 import Sidebar from '@/components/resource/Sidebar';
 import React, { useState } from 'react';
+import {ChevronDoubleRightIcon} from '@heroicons/react/24/outline'; 
 
 export default function RootLayout({
 
@@ -9,12 +10,22 @@ export default function RootLayout({
 }: {
     children: React.ReactNode
 }) {
-    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
     return (
         <div className="flex-row">
+            <button
+                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
+                aria-label={'Open sidebar'}
+            >
+                {!isSidebarOpen && 
+                    <ChevronDoubleRightIcon className="h-5 w-5" /> // Icon for closing the sidebar
+                }
+            </button>
+            
             <div className={`absolute inset-y-0 left-0 transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} w-64 transition duration-300 ease-in-out`}>
-                <Sidebar />
+                <Sidebar setIsSidebarOpen={setIsSidebarOpen} />
             </div>
             <div className={`flex-1 transition duration-300 ease-in-out ${isSidebarOpen ? 'ml-64' : 'ml-0'}`}>
                 {children}
diff --git a/compass/app/resource/page.tsx b/compass/app/resource/page.tsx
index bee0a60..cb9c5e9 100644
--- a/compass/app/resource/page.tsx
+++ b/compass/app/resource/page.tsx
@@ -1,39 +1,37 @@
 "use client"
-
 import Callout from "@/components/resource/Callout";
 import Card from "@/components/resource/Card";
 import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
-import { Icons } from "@/utils/constants";
 import { BookOpenIcon, BookmarkIcon, ClipboardIcon } from "@heroicons/react/24/solid";
 import Image from 'next/image';
 
 export default function Page() {
     return (
-        <>
-        <div className="pt-16 px-8 pb-8">
-            <div className="mb-4 flex items-center space-x-4">
+        // Ensuring the main container takes at least full viewport height
+        <div className="min-h-screen flex flex-col">
+            <div className="pt-16 px-8 pb-4 flex-grow">
+                <div className="mb-4 flex items-center space-x-4">
                     <Image
                         src="/logo.png"
                         alt='Compass Center logo.'
                         width={25}
                         height={25}
                     />
-                <h1 className='font-bold text-2xl text-purple-800'>Compass Center Advocate Landing Page</h1>
+                    <h1 className='font-bold text-2xl text-purple-800'>Compass Center Advocate Landing Page</h1>
+                </div>
+                <Callout>
+                    Welcome! Below you will find a list of resources for the Compass Center's trained advocates. These materials serve to virtually provide a collection of advocacy, resource, and hotline manuals and information. 
+                    <b> If you are an advocate looking for the contact information of a particular Compass Center employee, please directly contact your staff back-up or the person in charge of your training.</b>
+                </Callout>
             </div>
-            <Callout>
-                Welcome! Below you will find a list of resources for the Compass Center's trained advocates. These materials serve to virtually provide a collection of advocacy, resource, and hotline manuals and information. 
-                <b> If you are an advocate looking for the contact information of a particular Compass Center employee, please directly contact your staff back-up or the person in charge of your training.</b>
-            </Callout>
-            </div>
-            <div className="p-8 min-h-screen border-t border-gray-200 bg-gray-50">
-            <div className="grid grid-cols-3 gap-6  pb-6">
-            <Card icon={<BookmarkIcon />} text="Resources" />
-            <Card icon={<ClipboardIcon />} text="Services" />
-            <Card icon={<BookOpenIcon />} text="Training Manuals" />
-            </div>
-                
+            <div className="p-8 flex-grow border-t border-gray-200 bg-gray-50">
+                <div className="grid grid-cols-3 gap-6 pb-6">
+                    <Card icon={<BookmarkIcon />} text="Resources" />
+                    <Card icon={<ClipboardIcon />} text="Services" />
+                    <Card icon={<BookOpenIcon />} text="Training Manuals" />
+                </div>
                 <LandingSearchBar />
             </div>
-            </>
+        </div>
     )
-}
\ No newline at end of file
+}
diff --git a/compass/components/resource/Callout.tsx b/compass/components/resource/Callout.tsx
index c5823c1..5ccb360 100644
--- a/compass/components/resource/Callout.tsx
+++ b/compass/components/resource/Callout.tsx
@@ -7,7 +7,7 @@ interface CalloutProps {
 const Callout = ({ children }: CalloutProps) => {
   return (
     <div className="p-4 mb-4 flex items-center bg-purple-100 rounded-sm">
-      <span className="text-sm text-gray-700">{children}</span>
+      <span className="text-sm text-gray-800">{children}</span>
     </div>
   );
 };
diff --git a/compass/components/resource/Card.tsx b/compass/components/resource/Card.tsx
index b5032e6..d02152f 100644
--- a/compass/components/resource/Card.tsx
+++ b/compass/components/resource/Card.tsx
@@ -9,10 +9,10 @@ interface TagProps {
 const Card: React.FC<TagProps> = ({ text, icon }) => {
   return (
     <div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white hover:bg-gray-50 shadow rounded-md p-4">
-      <span className="h-5 w-5 text-gray-700">
+      <span className="h-5 text-gray-800 w-5">
         {icon}
       </span>
-      <span className="text-sm font-semibold text-gray-700">{text}</span>
+      <span className="text-sm text-gray-800 font-semibold">{text}</span>
     </div>
   );
 };
diff --git a/compass/components/resource/LandingSearchBar.tsx b/compass/components/resource/LandingSearchBar.tsx
index 0a4f637..c06d848 100644
--- a/compass/components/resource/LandingSearchBar.tsx
+++ b/compass/components/resource/LandingSearchBar.tsx
@@ -1,5 +1,6 @@
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
 import React, { useState } from 'react';
+import Image from 'next/image';
 
 export const LandingSearchBar: React.FC = () => {
     const [searchTerm, setSearchTerm] = useState('');
@@ -17,7 +18,7 @@ export const LandingSearchBar: React.FC = () => {
         <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
           <div className="flex-grow">
             <input
-              className="sm:text-sm w-full px-6 py-3 rounded-md focus:outline-none"
+              className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
               type="text"
               placeholder="Search..."
               value={searchTerm}
@@ -35,7 +36,10 @@ export const LandingSearchBar: React.FC = () => {
             <MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
           </div>
         </div>
-        
+        <div className="flex flex-col pt-16 space-y-2 justify-center items-center">
+        <Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
+        <h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links above or the search bar to get your results.</h2>
+        </div>
       </div>
     );
   };
diff --git a/compass/components/resource/Sidebar.tsx b/compass/components/resource/Sidebar.tsx
index 0988924..d50388b 100644
--- a/compass/components/resource/Sidebar.tsx
+++ b/compass/components/resource/Sidebar.tsx
@@ -1,16 +1,30 @@
 import React from 'react';
-import { ChevronRightIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
+import { ChevronDoubleLeftIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
+import { SidebarItem } from './SidebarItem';
 
-const Sidebar: React.FC = () => {
+interface SidebarProps {
+  setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({setIsSidebarOpen}) => {
   return (
-    <div className="w-64 h-full border border-gray-200 bg-gray-50 px-4 pt-6 shadow">
+    <div className="w-64 h-full border border-gray-200 bg-gray-50 px-4 shadow">
+      <div className="flex justify-end">
+        <button
+            onClick={() => setIsSidebarOpen(false)}
+            className="py-2 text-gray-500 hover:text-gray-800"
+            aria-label="Close sidebar"
+        >
+            <ChevronDoubleLeftIcon className="h-5 w-5" />
+        </button>
+      </div>
       <div className="flex flex-col space-y-8">
-
+      
         <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
-          
+        
           <div className="flex flex-col items-start space-y-2">
             <div className="flex flex-col">
-                <span className="text-sm text-gray-700 font-bold">Compass Center</span>
+                <span className="text-sm font-semibold text-gray-800">Compass Center</span>
                 <span className="text-xs text-gray-500">cssgunc@gmail.com</span>
             </div>
             <button className="text-red-600 text-xs hover:underline mt-1">Sign out</button>
@@ -19,9 +33,9 @@ const Sidebar: React.FC = () => {
         <div className="flex flex-col space-y-2">
         <h4 className="text-xs font-semibold text-gray-500">Pages</h4>
         <nav className="flex flex-col">
-          <SidebarItem icon={<BookmarkIcon className="w-4 h-4 text-gray-700" />} text="Resources" />
-          <SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-700" />} text="Services" />
-          <SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-700" />} text="Training Manuals" />
+          <SidebarItem icon={<BookmarkIcon className="w-4 h-4 text-gray-500" />} text="Resources" />
+          <SidebarItem icon={<ClipboardIcon className="w-4 h-4 text-gray-500" />} text="Services" />
+          <SidebarItem icon={<BookOpenIcon className="w-4 h-4 text-gray-500" />} text="Training Manuals" />
         </nav>
         </div>
       </div>
@@ -29,18 +43,5 @@ const Sidebar: React.FC = () => {
   );
 };
 
-interface SidebarItemProps {
-  icon: React.ReactElement;
-  text: string;
-}
-
-const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
-  return (
-    <a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
-      {icon}
-      <span className="flex-grow font-semibold text-xs text-gray-700">{text}</span>
-    </a>
-  );
-};
 
 export default Sidebar;
\ No newline at end of file
diff --git a/compass/components/resource/SidebarItem.tsx b/compass/components/resource/SidebarItem.tsx
new file mode 100644
index 0000000..342a74b
--- /dev/null
+++ b/compass/components/resource/SidebarItem.tsx
@@ -0,0 +1,14 @@
+
+interface SidebarItemProps {
+    icon: React.ReactElement;
+    text: string;
+  }
+  
+export const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
+    return (
+      <a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
+        {icon}
+        <span className="flex-grow font-medium text-xs text-gray-500">{text}</span>
+      </a>
+    );
+  };
\ No newline at end of file
diff --git a/compass/next.config.js b/compass/next.config.js
index 767719f..9fff58d 100644
--- a/compass/next.config.js
+++ b/compass/next.config.js
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    images: {
+        domains: ['notioly.com']
+      },
+}
 
 module.exports = nextConfig
diff --git a/compass/public/landing_illustration.png b/compass/public/landing_illustration.png
new file mode 100644
index 0000000..ac853ce
Binary files /dev/null and b/compass/public/landing_illustration.png differ
diff --git a/compass/styles/globals.css b/compass/styles/globals.css
index bec3b2c..9fb976a 100644
--- a/compass/styles/globals.css
+++ b/compass/styles/globals.css
@@ -36,12 +36,61 @@
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
-    src: url('/fonts/Inter-Regular.ttf') format('ttf'),
-    url('/fonts/Inter-Bold.ttf') format('ttf'),
-    url('/fonts/Inter-Black.ttf') format('ttf'),
-    url('/fonts/Inter-ExtraBold.ttf') format('ttf'),
-    url('/fonts/Inter-ExtraLight.ttf') format('ttf'),
-    url('/fonts/Inter-Medium.ttf') format('ttf'),
-    url('/fonts/Inter-SemiBold.ttf') format('ttf'),
-    url('/fonts/Inter-Thin.ttf') format('ttf');
-  }
\ No newline at end of file
+    src: url('/fonts/Inter-Regular.ttf') format('truetype');
+}
+
+/* Inter-Bold */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/fonts/Inter-Bold.ttf') format('truetype');
+}
+
+/* Inter-Black */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 900;
+    src: url('/fonts/Inter-Black.ttf') format('truetype');
+}
+
+/* Inter-ExtraBold */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 800;
+    src: url('/fonts/Inter-ExtraBold.ttf') format('truetype');
+}
+
+/* Inter-ExtraLight */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200;
+    src: url('/fonts/Inter-ExtraLight.ttf') format('truetype');
+}
+
+/* Inter-Medium */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/fonts/Inter-Medium.ttf') format('truetype');
+}
+
+/* Inter-SemiBold */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
+}
+
+/* Inter-Thin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100;
+    src: url('/fonts/Inter-Thin.ttf') format('truetype');
+}
\ No newline at end of file
diff --git a/compass/tailwind.config.ts b/compass/tailwind.config.ts
index abab24e..d0ea17c 100644
--- a/compass/tailwind.config.ts
+++ b/compass/tailwind.config.ts
@@ -13,8 +13,11 @@ const config: Config = {
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
       fontFamily: {
-        sans: ['Inter', 'sans-serif'],
+        'sans': ['Inter', 'sans-serif'], // Add 'Inter' to the fontFamily theme
       },
+      fontWeight: {
+        'medium': 500, // Ensure medium is correctly set to 500
+      }
     },
   },
   plugins: [],