diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 912b77db..333388ec 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -1,9 +1,19 @@
 export { TextInput } from './TextInput';
-export { TextArea } from './TextArea';
 export { Dropdown } from './Dropdown';
 export { FileUpload } from './FileUpload';
 export { InfoCard } from './InfoCard';
 export { Button } from './Button';
-export { FormContainer } from './FormContainer';
 export { ScrollLink } from './ScrollLink';
 export { AnchorLinks } from './AnchorLinks';
+export { TextArea } from './TextArea';
+export { 
+  PageLayout, 
+  Section, 
+  Grid, 
+  Footer, 
+  Header, 
+  FormContainer,
+  DashboardTemplate,
+  AdminDashboard,
+  UserDashboard
+} from './layout';
\ No newline at end of file
diff --git a/frontend/src/components/layout/components/Container.tsx b/frontend/src/components/layout/components/Container.tsx
new file mode 100644
index 00000000..457fdc2e
--- /dev/null
+++ b/frontend/src/components/layout/components/Container.tsx
@@ -0,0 +1,27 @@
+import { LayoutContainerProps } from './types';
+import { widths } from './utils';
+
+export const Container: React.FC<LayoutContainerProps> = ({
+  children,
+  width = 'normal',
+  background = 'bg-white',
+  fullHeight = false,
+  className = '',
+  id,
+  testId,
+}) => {
+  return (
+    <div
+      id={id}
+      data-testid={testId}
+      className={`
+        ${widths[width]}
+        ${background}
+        ${fullHeight ? 'min-h-screen' : ''}
+        ${className}
+      `.trim()}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/frontend/src/components/layout/components/Footer.tsx b/frontend/src/components/layout/components/Footer.tsx
new file mode 100644
index 00000000..2226f9ac
--- /dev/null
+++ b/frontend/src/components/layout/components/Footer.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { Container } from './Container';
+import { Stack } from './Stack';
+
+interface FooterProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const Footer: React.FC<FooterProps> = ({ children, className = '' }) => {
+  return (
+    <Container width="full" className={`flex-shrink-0 border-t border-gray-200 ${className}`}>
+      <div className="max-w-[1440px] mx-auto px-6 py-4">
+        <Stack gap="md">
+          {children}
+        </Stack>
+      </div>
+    </Container>
+  );
+};
+
+export { Footer };
\ No newline at end of file
diff --git a/frontend/src/components/layout/components/FormContainer.tsx b/frontend/src/components/layout/components/FormContainer.tsx
new file mode 100644
index 00000000..108c935a
--- /dev/null
+++ b/frontend/src/components/layout/components/FormContainer.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+interface FormContainerProps {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+const FormContainer: React.FC<FormContainerProps> = ({
+  children,
+  title,
+  description,
+  className = ''
+}) => {
+  return (
+    <div className={`bg-white rounded-lg border border-gray-200 ${className}`}>
+      {(title || description) && (
+        <div className="border-b border-gray-200 p-6">
+          {title && <h3 className="text-lg font-semibold">{title}</h3>}
+          {description && <p className="mt-1 text-sm text-gray-600">{description}</p>}
+        </div>
+      )}
+      <div className="p-6">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export { FormContainer }; 
\ No newline at end of file
diff --git a/frontend/src/components/layout/components/Grid.tsx b/frontend/src/components/layout/components/Grid.tsx
new file mode 100644
index 00000000..69755de5
--- /dev/null
+++ b/frontend/src/components/layout/components/Grid.tsx
@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+
+type GridColumns = 1 | 2 | 3 | 4 | 6 | 12;
+type GridGap = 'none' | 'small' | 'normal' | 'large';
+
+interface GridProps {
+  children: ReactNode;
+  columns?: GridColumns;
+  gap?: GridGap;
+  className?: string;
+}
+
+const gapClasses: Record<GridGap, string> = {
+  none: 'gap-0',
+  small: 'gap-2',
+  normal: 'gap-4',
+  large: 'gap-8'
+};
+
+const Grid: React.FC<GridProps> = ({
+  children,
+  columns = 3,
+  gap = 'normal',
+  className = ''
+}) => {
+  return (
+    <div className={`
+      grid
+      grid-cols-1
+      sm:grid-cols-2
+      ${columns > 2 ? `lg:grid-cols-${columns}` : ''}
+      ${gapClasses[gap]}
+      ${className}
+    `}>
+      {children}
+    </div>
+  );
+};
+
+export { Grid }; 
\ No newline at end of file
diff --git a/frontend/src/components/layout/components/Header.tsx b/frontend/src/components/layout/components/Header.tsx
new file mode 100644
index 00000000..660594f6
--- /dev/null
+++ b/frontend/src/components/layout/components/Header.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+interface HeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const Header: React.FC<HeaderProps> = ({ children, className = '' }) => {
+  return (
+    <header className={`flex-shrink-0 w-full border-b border-gray-200 bg-white ${className}`}>
+      {children}
+    </header>
+  );
+};
+
+export { Header }; 
\ No newline at end of file
diff --git a/frontend/src/components/layout/components/PageLayout.tsx b/frontend/src/components/layout/components/PageLayout.tsx
new file mode 100644
index 00000000..5679970f
--- /dev/null
+++ b/frontend/src/components/layout/components/PageLayout.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Container } from './Container';
+import { Stack } from './Stack';
+
+interface PageLayoutProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const PageLayout: React.FC<PageLayoutProps> = ({ children, className = '' }) => {
+  return (
+    <Container width="screen" fullHeight className={className}>
+      <Stack gap="none">
+        {children}
+      </Stack>
+    </Container>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/layout/components/Section.tsx b/frontend/src/components/layout/components/Section.tsx
new file mode 100644
index 00000000..6ed8c3f6
--- /dev/null
+++ b/frontend/src/components/layout/components/Section.tsx
@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+
+type SectionWidth = 'full' | 'wide' | 'normal' | 'narrow';
+type SectionPadding = 'none' | 'small' | 'normal' | 'large';
+type SectionAlignment = 'left' | 'center' | 'right';
+
+interface SectionProps {
+  children: ReactNode;
+  width?: SectionWidth;
+  padding?: SectionPadding;
+  align?: SectionAlignment;
+  className?: string;
+  background?: string;
+  container?: boolean; // new prop to control container width
+}
+
+// predefined width classes
+const widthClasses: Record<SectionWidth, string> = {
+  full: 'w-full',
+  wide: 'max-w-7xl',
+  normal: 'max-w-5xl',
+  narrow: 'max-w-3xl'
+};
+
+// predefined padding classes
+const paddingClasses: Record<SectionPadding, string> = {
+  none: 'p-0',
+  small: 'py-4 px-4',
+  normal: 'py-8 px-6',
+  large: 'py-16 px-8'
+};
+
+const Section: React.FC<SectionProps> = ({
+  children,
+  width = 'normal',
+  padding = 'normal',
+  align = 'center',
+  className = '',
+  background = 'bg-white',
+  container = true // default to using container
+}) => {
+  const content = container ? (
+    <div className={`
+      ${widthClasses[width]}
+      ${align === 'center' ? 'mx-auto' : ''}
+      ${className}
+    `}>
+      {children}
+    </div>
+  ) : children;
+
+  return (
+    <section className={`
+      ${background} 
+      ${paddingClasses[padding]}
+      w-full
+    `}>
+      {content}
+    </section>
+  );
+};
+
+export { Section };
\ No newline at end of file
diff --git a/frontend/src/components/layout/components/Stack.tsx b/frontend/src/components/layout/components/Stack.tsx
new file mode 100644
index 00000000..5e5c14f7
--- /dev/null
+++ b/frontend/src/components/layout/components/Stack.tsx
@@ -0,0 +1,42 @@
+import { BaseLayoutProps, LayoutSpacingProps, LayoutAlignmentProps } from './types';
+import { getSpacingClasses, gaps } from './utils';
+
+interface StackProps extends BaseLayoutProps, LayoutSpacingProps, LayoutAlignmentProps {}
+
+export const Stack: React.FC<StackProps> = ({
+  children,
+  direction = 'column',
+  align = 'left',
+  justify = 'start',
+  gap = 'md',
+  padding,
+  margin,
+  className = '',
+  id,
+  testId,
+}) => {
+  const paddingClasses = getSpacingClasses('p', padding);
+  const marginClasses = getSpacingClasses('m', margin);
+
+  return (
+    <div
+      id={id}
+      data-testid={testId}
+      className={`
+        flex
+        ${direction === 'column' ? 'flex-col' : 'flex-row'}
+        ${gaps[gap]}
+        ${align === 'center' ? 'items-center' : align === 'right' ? 'items-end' : 'items-start'}
+        ${justify === 'center' ? 'justify-center' : 
+          justify === 'end' ? 'justify-end' : 
+          justify === 'between' ? 'justify-between' : 
+          justify === 'around' ? 'justify-around' : 'justify-start'}
+        ${paddingClasses}
+        ${marginClasses}
+        ${className}
+      `.trim()}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/frontend/src/components/layout/components/types.ts b/frontend/src/components/layout/components/types.ts
new file mode 100644
index 00000000..519a3651
--- /dev/null
+++ b/frontend/src/components/layout/components/types.ts
@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+
+export type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type Width = 'full' | 'screen' | 'wide' | 'normal' | 'narrow' | 'content';
+export type Alignment = 'left' | 'center' | 'right';
+export type Direction = 'row' | 'column';
+export type Gap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface BaseLayoutProps {
+  children: ReactNode;
+  className?: string;
+  id?: string;
+  testId?: string;
+}
+
+export interface LayoutSpacingProps {
+  padding?: Spacing | { x?: Spacing; y?: Spacing };
+  margin?: Spacing | { x?: Spacing; y?: Spacing };
+  gap?: Gap;
+}
+
+export interface LayoutAlignmentProps {
+  align?: Alignment;
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+  direction?: Direction;
+}
+
+export interface LayoutContainerProps extends BaseLayoutProps {
+  width?: Width;
+  background?: string;
+  fullHeight?: boolean;
+}
+
+export interface LayoutGridProps extends BaseLayoutProps, LayoutSpacingProps {
+  columns?: number | { sm?: number; md?: number; lg?: number };
+  rows?: number;
+  autoFit?: boolean;
+  minChildWidth?: string;
+}
diff --git a/frontend/src/components/layout/components/utils.ts b/frontend/src/components/layout/components/utils.ts
new file mode 100644
index 00000000..131df96e
--- /dev/null
+++ b/frontend/src/components/layout/components/utils.ts
@@ -0,0 +1,58 @@
+import { Spacing, Width, Gap } from './types';
+
+export const spacing: Record<Spacing, string> = {
+  none: '0',
+  xs: '0.25rem',
+  sm: '0.5rem',
+  md: '1rem',
+  lg: '1.5rem',
+  xl: '2rem',
+  '2xl': '3rem',
+};
+
+export const widths: Record<Width, string> = {
+  full: 'w-full',
+  screen: 'w-screen max-w-[100vw]',
+  wide: 'max-w-7xl',
+  normal: 'max-w-5xl',
+  narrow: 'max-w-3xl',
+  content: 'max-w-prose',
+};
+
+export const gaps: Record<Gap, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+};
+
+export const getSpacingClasses = (
+  type: 'p' | 'm',
+  spacing?: Spacing | { x?: Spacing; y?: Spacing }
+): string => {
+  if (!spacing) return '';
+  
+  if (typeof spacing === 'string') {
+    return `${type}-${spacing}`;
+  }
+
+  const { x, y } = spacing;
+  return `${y ? `${type}y-${y}` : ''} ${x ? `${type}x-${x}` : ''}`.trim();
+};
+
+export const getResponsiveGridColumns = (
+  columns?: number | { sm?: number; md?: number; lg?: number }
+): string => {
+  if (!columns) return '';
+  
+  if (typeof columns === 'number') {
+    return `grid-cols-${columns}`;
+  }
+
+  const { sm, md, lg } = columns;
+  return `${sm ? `sm:grid-cols-${sm}` : ''} ${md ? `md:grid-cols-${md}` : ''} ${
+    lg ? `lg:grid-cols-${lg}` : ''
+  }`.trim();
+};
diff --git a/frontend/src/components/layout/index.ts b/frontend/src/components/layout/index.ts
new file mode 100644
index 00000000..421bd6e2
--- /dev/null
+++ b/frontend/src/components/layout/index.ts
@@ -0,0 +1,16 @@
+// Base Components
+export * from './components/Container';
+export * from './components/Stack';
+export * from './components/Grid';
+export * from './components/Section';
+export * from './components/PageLayout';
+export * from './components/Footer';
+export * from './components/Header';
+export * from './components/FormContainer';
+
+// Templates
+export * from './templates/DashboardTemplate';
+
+// Page Layouts
+export * from './pages/AdminDashboard';
+export * from './pages/UserDashboard';
diff --git a/frontend/src/components/layout/pages/AdminDashboard.tsx b/frontend/src/components/layout/pages/AdminDashboard.tsx
new file mode 100644
index 00000000..c23181cf
--- /dev/null
+++ b/frontend/src/components/layout/pages/AdminDashboard.tsx
@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+import { FiFolder, FiBook, FiUsers, FiSettings } from "react-icons/fi";
+import { DashboardTemplate } from "../templates/DashboardTemplate";
+
+const adminMenuItems = [
+  { label: "Projects", path: "/admin/projects", icon: <FiFolder /> },
+  { label: "Resources", path: "/admin/resources", icon: <FiBook /> },
+  { label: "Users", path: "/admin/users", icon: <FiUsers /> },
+  { label: "Settings", path: "/admin/settings", icon: <FiSettings /> },
+];
+
+const adminNavTabs = [
+  { label: "All Projects", path: "/admin/projects" },
+  { label: "Pending", path: "/admin/projects/pending" },
+  { label: "Approved", path: "/admin/projects/approved" },
+];
+
+interface AdminDashboardProps {
+  children: ReactNode;
+}
+
+export const AdminDashboard: React.FC<AdminDashboardProps> = ({ children }) => {
+  const adminActions = (
+    <>
+      <button className="px-4 py-2 bg-gray-800 text-white text-sm font-medium rounded-md hover:bg-gray-700">
+        New Project
+      </button>
+      <button className="p-2 text-gray-600 hover:text-gray-900 rounded-full">
+        <span className="sr-only">Admin menu</span>
+        <div className="w-8 h-8 bg-gray-200 rounded-full" />
+      </button>
+    </>
+  );
+
+  return (
+    <DashboardTemplate
+      menuItems={adminMenuItems}
+      navTabs={adminNavTabs}
+      actions={adminActions}
+      logo={<h1 className="text-xl font-bold">Admin Panel</h1>}
+    >
+      {children}
+    </DashboardTemplate>
+  );
+};
diff --git a/frontend/src/components/layout/pages/UserDashboard.tsx b/frontend/src/components/layout/pages/UserDashboard.tsx
new file mode 100644
index 00000000..eb232fcf
--- /dev/null
+++ b/frontend/src/components/layout/pages/UserDashboard.tsx
@@ -0,0 +1,43 @@
+import React, { ReactNode } from "react";
+import { FiFolder, FiBook, FiStar, FiUser } from "react-icons/fi";
+import { DashboardTemplate } from "../templates/DashboardTemplate";
+
+const userMenuItems = [
+  { label: "My Projects", path: "/projects", icon: <FiFolder /> },
+  { label: "Resources", path: "/resources", icon: <FiBook /> },
+  { label: "Favorites", path: "/favorites", icon: <FiStar /> },
+  { label: "Profile", path: "/profile", icon: <FiUser /> },
+];
+
+const userNavTabs = [
+  { label: "All Projects", path: "/projects" },
+  { label: "Drafts", path: "/drafts" },
+];
+
+interface UserDashboardProps {
+  children: ReactNode;
+}
+
+export const UserDashboard: React.FC<UserDashboardProps> = ({ children }) => {
+  const userActions = (
+    <>
+      <button className="px-4 py-2 bg-gray-800 text-white text-sm font-medium rounded-md hover:bg-gray-700">
+        Submit a project
+      </button>
+      <button className="p-2 text-gray-600 hover:text-gray-900 rounded-full">
+        <span className="sr-only">User menu</span>
+        <div className="w-8 h-8 bg-gray-200 rounded-full" />
+      </button>
+    </>
+  );
+
+  return (
+    <DashboardTemplate
+      menuItems={userMenuItems}
+      navTabs={userNavTabs}
+      actions={userActions}
+    >
+      {children}
+    </DashboardTemplate>
+  );
+};
diff --git a/frontend/src/components/layout/templates/DashboardTemplate.tsx b/frontend/src/components/layout/templates/DashboardTemplate.tsx
new file mode 100644
index 00000000..f529cd6c
--- /dev/null
+++ b/frontend/src/components/layout/templates/DashboardTemplate.tsx
@@ -0,0 +1,104 @@
+import React, { ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { PageLayout } from "../components/PageLayout";
+import { Stack } from "../components/Stack";
+
+interface MenuItem {
+  label: string;
+  path: string;
+  icon: ReactNode;
+}
+
+interface DashboardTemplateProps {
+  children: ReactNode;
+  menuItems: MenuItem[];
+  logo?: ReactNode;
+  navTabs?: Array<{
+    label: string;
+    path: string;
+  }>;
+  actions?: ReactNode;
+}
+
+export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
+  children,
+  menuItems,
+  logo = <h1 className="text-xl font-bold">Logo</h1>,
+  navTabs = [],
+  actions,
+}) => {
+  const location = useLocation();
+
+  return (
+    <PageLayout className="bg-gray-100">
+      {/* top navbar */}
+      <div className="w-full bg-white border-b border-gray-200">
+        <div className="max-w-[1440px] mx-auto px-6">
+          <Stack direction="row" justify="between" align="center" className="h-16">
+            <Stack direction="row" gap="lg" align="center">
+              {/* logo */}
+              {logo}
+
+              {/* navigation tabs */}
+              {navTabs.length > 0 && (
+                <Stack direction="row" gap="md">
+                  {navTabs.map((tab) => (
+                    <Link
+                      key={tab.path}
+                      to={tab.path}
+                      className={`px-4 py-2 text-sm font-medium ${
+                        location.pathname === tab.path
+                          ? "text-gray-900 border-b-2 border-gray-900"
+                          : "text-gray-600 hover:text-gray-900"
+                      }`}
+                    >
+                      {tab.label}
+                    </Link>
+                  ))}
+                </Stack>
+              )}
+            </Stack>
+
+            {/* right side actions */}
+            {actions && (
+              <Stack direction="row" gap="md" align="center">
+                {actions}
+              </Stack>
+            )}
+          </Stack>
+        </div>
+      </div>
+
+      {/* main content area */}
+      <div className="w-full max-w-[1440px] mx-auto flex flex-1">
+        {/* sidebar */}
+        <div className="bg-white border-r border-gray-200">
+          <nav className="sticky top-0 py-4">
+            {menuItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={`
+                  flex items-center gap-3 px-6 py-2 text-sm whitespace-nowrap
+                  ${
+                    location.pathname === item.path
+                      ? "bg-gray-100 text-gray-900 font-medium"
+                      : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                  }
+                `}
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </Link>
+            ))}
+          </nav>
+        </div>
+
+        {/* main content */}
+        <main className="flex-1 p-6 w-full">
+          {children}
+        </main>
+      </div>
+    </PageLayout>
+  );
+};
diff --git a/frontend/src/pages/AdminDashboard.tsx b/frontend/src/pages/AdminDashboard.tsx
new file mode 100644
index 00000000..3cf5a629
--- /dev/null
+++ b/frontend/src/pages/AdminDashboard.tsx
@@ -0,0 +1,70 @@
+import { AdminDashboard, Section, Grid, FormContainer } from '@components';
+import { Button } from '@components';
+
+const AdminDashboardPage = () => {
+  return (
+    <AdminDashboard>
+      {/* main content */}
+      <div className="flex-1 overflow-y-auto">
+        <Section 
+          width="full" 
+          padding="large" 
+          container={false}
+        >
+          <div className="px-6">
+            <Grid columns={2} gap="large">
+              {/* left column */}
+              <div className="space-y-6">
+                <FormContainer title="Admin Stats">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="p-4 bg-gray-50 rounded-lg">
+                      <p className="text-sm text-gray-600">Total Users</p>
+                      <p className="text-2xl font-bold">1,234</p>
+                    </div>
+                    <div className="p-4 bg-gray-50 rounded-lg">
+                      <p className="text-sm text-gray-600">Active Projects</p>
+                      <p className="text-2xl font-bold">567</p>
+                    </div>
+                  </div>
+                </FormContainer>
+
+                <FormContainer title="Pending Approvals">
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-4">
+                      <div className="w-2 h-2 bg-yellow-500 rounded-full" />
+                      <div>
+                        <p className="font-medium">Project XYZ</p>
+                        <p className="text-sm text-gray-600">Awaiting review</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <div className="w-2 h-2 bg-yellow-500 rounded-full" />
+                      <div>
+                        <p className="font-medium">Project ABC</p>
+                        <p className="text-sm text-gray-600">Pending verification</p>
+                      </div>
+                    </div>
+                  </div>
+                </FormContainer>
+              </div>
+
+              {/* right column */}
+              <div className="space-y-6">
+                <FormContainer title="Quick Actions">
+                  <div className="grid grid-cols-2 gap-4">
+                    <Button variant="outline" liquid>Review Projects</Button>
+                    <Button variant="outline" liquid>Manage Users</Button>
+                    <Button variant="outline" liquid>System Settings</Button>
+                    <Button variant="outline" liquid>View Reports</Button>
+                  </div>
+                </FormContainer>
+              </div>
+            </Grid>
+          </div>
+        </Section>
+      </div>
+    </AdminDashboard>
+  );
+};
+
+export { AdminDashboardPage };
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 00000000..ac459f63
--- /dev/null
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,99 @@
+import { UserDashboard, Section, Grid, Footer, Header, FormContainer } from '@components';
+import { Button } from '@components';
+
+const DashboardPage = () => {
+  return (
+    <UserDashboard>
+      {/* header */}
+      <Header>
+        <Section 
+          width="full" 
+          padding="small" 
+          background="bg-white"
+          container={false}
+        >
+          <div className="px-6 flex justify-between items-center">
+            <h2 className="text-xl font-semibold">Dashboard</h2>
+            <Button size="sm">Action</Button>
+          </div>
+        </Section>
+      </Header>
+
+      {/* main content */}
+      <div className="flex-1 overflow-y-auto">
+        <Section 
+          width="full" 
+          padding="large" 
+          container={false}
+        >
+          <div className="px-6">
+            <Grid columns={2} gap="large">
+              {/* left column */}
+              <div className="space-y-6">
+                <FormContainer title="Stats">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="p-4 bg-gray-50 rounded-lg">
+                      <p className="text-sm text-gray-600">Stat 1</p>
+                      <p className="text-2xl font-bold">123</p>
+                    </div>
+                    <div className="p-4 bg-gray-50 rounded-lg">
+                      <p className="text-sm text-gray-600">Stat 2</p>
+                      <p className="text-2xl font-bold">456</p>
+                    </div>
+                  </div>
+                </FormContainer>
+
+                <FormContainer title="Recent Items">
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-4">
+                      <div className="w-2 h-2 bg-blue-500 rounded-full" />
+                      <div>
+                        <p className="font-medium">Item 1</p>
+                        <p className="text-sm text-gray-600">2 hours ago</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <div className="w-2 h-2 bg-green-500 rounded-full" />
+                      <div>
+                        <p className="font-medium">Item 2</p>
+                        <p className="text-sm text-gray-600">4 hours ago</p>
+                      </div>
+                    </div>
+                  </div>
+                </FormContainer>
+              </div>
+
+              {/* right column */}
+              <div className="space-y-6">
+                <FormContainer title="Actions">
+                  <div className="grid grid-cols-2 gap-4">
+                    <Button variant="outline" liquid>Action 1</Button>
+                    <Button variant="outline" liquid>Action 2</Button>
+                    <Button variant="outline" liquid>Action 3</Button>
+                    <Button variant="outline" liquid>Action 4</Button>
+                  </div>
+                </FormContainer>
+              </div>
+            </Grid>
+          </div>
+        </Section>
+      </div>
+
+      {/* footer */}
+      <Footer>
+        <Section 
+          width="full" 
+          padding="normal" 
+          background="bg-gray-200"
+          container={false}
+        >
+          <div className="px-6 text-center text-sm text-gray-600">
+            <p>Footer text</p>
+          </div>
+        </Section>
+      </Footer>
+    </UserDashboard>
+  );
+};
+
+export { DashboardPage };
\ No newline at end of file
diff --git a/frontend/src/pages/Landing.tsx b/frontend/src/pages/Landing.tsx
index 6b4d4f4d..8eb6f104 100644
--- a/frontend/src/pages/Landing.tsx
+++ b/frontend/src/pages/Landing.tsx
@@ -5,6 +5,8 @@ import {
     Button,
     Dropdown,
     AnchorLinks,
+    PageLayout,
+    Section
 } from '@components';
 
 // sample industries data
@@ -18,64 +20,71 @@ const industries = [
 ];
 
 const Landing: React.FC = () => {
-    const [selectedIndustry, setSelectedIndustry] = useState<
-        (typeof industries)[0] | null
-    >(null);
+    const [selectedIndustry, setSelectedIndustry] = useState<typeof industries[0] | null>(null);
 
     return (
-        <div className="max-w-2xl mx-auto p-6 space-y-8">
-            <h1>Landing</h1>
-            <div>
-                <TextInput label="Hi" value="Hellooo" />
-            </div>
-            <FileUpload />
-            <div id="dropdown">
-                <Dropdown
-                    label="Industry"
-                    options={industries}
-                    value={selectedIndustry}
-                    onChange={(value) =>
-                        setSelectedIndustry(value as (typeof industries)[0])
-                    }
-                />
-            </div>
-            <div className="h-[1500px]"></div>
-            <div id="buttons">
-                <Button>Click me</Button>
-                <Button variant="secondary">Secondary</Button>
-                <Button variant="outline">Outline</Button>
-                <Button liquid>Liquid</Button>
-            </div>
-            <div className="fixed top-2 left-10">
-                <AnchorLinks
-                    onClick={(l, e) => {
-                        console.log(l, e);
-                    }}
-                    links={[
-                        {
-                            label: 'dropdown',
-                            target: '#dropdown',
-                        },
-                        {
-                            label: 'buttons',
-                            target: '#buttons',
-                        },
-                    ]}
-                >
-                    {(link) => (
-                        <span
-                            className={
-                                'transition hover:text-gray-800 ' +
-                                (link.active ? 'text-black' : 'text-gray-400')
-                            }
-                        >
-                            {link.label}
-                        </span>
-                    )}
-                </AnchorLinks>
-            </div>
-        </div>
+        <PageLayout>
+            <Section width="narrow" padding="normal">
+                <h1 className="text-3xl font-bold mb-8">Landing</h1>
+                
+                <div className="space-y-8">
+                    <TextInput
+                        label="Hi"
+                        value="Hellooo"
+                    />
+                    
+                    <FileUpload className="w-full" />
+                    
+                    <div id="dropdown">
+                        <Dropdown
+                            label="Industry"
+                            options={industries}
+                            value={selectedIndustry}
+                            onChange={(value) => setSelectedIndustry(value as typeof industries[0])}
+                        />
+                    </div>
+                    
+                    <div className="h-[1500px]"></div>
+                    
+                    <div id="buttons" className="flex flex-wrap gap-4">
+                        <Button>Click me</Button>
+                        <Button variant="secondary">Secondary</Button>
+                        <Button variant="outline">Outline</Button>
+                        <Button liquid>Liquid</Button>
+                    </div>
+                </div>
+
+                <div className="fixed top-2 left-10">
+                    <AnchorLinks
+                        onClick={(l, e) => {
+                            console.log(l, e);
+                        }}
+                        links={[
+                            {
+                                label: 'dropdown',
+                                target: '#dropdown',
+                            },
+                            {
+                                label: 'buttons',
+                                target: '#buttons',
+                            },
+                        ]}
+                    >
+                        {(link) => (
+                            <span
+                                className={
+                                    'transition hover:text-gray-800 ' +
+                                    (link.active ? 'text-black' : 'text-gray-400')
+                                }
+                            >
+                                {link.label}
+                            </span>
+                        )}
+                    </AnchorLinks>
+                </div>
+            </Section>
+        </PageLayout>
     );
 };
 
-export { Landing };
+export { Landing };
\ No newline at end of file
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index cd53d11d..d69247ea 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -1,2 +1,4 @@
 export { Landing } from './Landing';
-export { Register } from './Register';
\ No newline at end of file
+export { DashboardPage } from './Dashboard';
+export { AdminDashboardPage } from './AdminDashboard';
+export { Register } from './Register';
diff --git a/frontend/src/utils/Router.tsx b/frontend/src/utils/Router.tsx
index b7e53d87..5800f165 100644
--- a/frontend/src/utils/Router.tsx
+++ b/frontend/src/utils/Router.tsx
@@ -1,11 +1,28 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { Landing, Register } from '@pages'
+import { Landing, DashboardPage, AdminDashboardPage, Register } from '@pages';
 
 const Router = () => (
     <BrowserRouter>
         <Routes>
             <Route path="/" element={ <Landing /> } />
             <Route path="/register" element={ <Register /> } />
+            
+            {/* User routes */}
+            <Route path="/dashboard" element={ <DashboardPage /> } />
+            <Route path="/projects" element={ <DashboardPage /> } />
+            <Route path="/resources" element={ <DashboardPage /> } />
+            <Route path="/favorites" element={ <DashboardPage /> } />
+            <Route path="/profile" element={ <DashboardPage /> } />
+            <Route path="/drafts" element={ <DashboardPage /> } />
+            
+            {/* Admin routes */}
+            <Route path="/admin/dashboard" element={ <AdminDashboardPage /> } />
+            <Route path="/admin/projects" element={ <AdminDashboardPage /> } />
+            <Route path="/admin/projects/pending" element={ <AdminDashboardPage /> } />
+            <Route path="/admin/projects/approved" element={ <AdminDashboardPage /> } />
+            <Route path="/admin/resources" element={ <AdminDashboardPage /> } />
+            <Route path="/admin/users" element={ <AdminDashboardPage /> } />
+            <Route path="/admin/settings" element={ <AdminDashboardPage /> } />
         </Routes>
     </BrowserRouter>
 );
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 74c3cf27..ba4a646a 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -10,6 +10,7 @@
         "paths": {
             "@": ["./src/*"],
             "@components": ["./src/components/index"],
+            "@components/layout": ["src/components/layout/index"],
             "@hooks": ["./src/hooks/index"],
             "@pages": ["./src/pages/index"],
             "@utils": ["./src/utils/index"],
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 74fb23d7..7468d0e7 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -9,6 +9,7 @@ export default defineConfig({
             '@': path.resolve(__dirname, './src'),
             '@assets': path.resolve(__dirname, './src/assets'),
             '@components': path.resolve(__dirname, './src/components'),
+            '@components/layout': path.resolve(__dirname, './src/components/layout'),
             '@pages': path.resolve(__dirname, './src/pages'),
             '@utils': path.resolve(__dirname, './src/utils'),
             '@t': path.resolve(__dirname, './src/types'),
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index fefb7340..13b97f7f 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -3,30 +3,31 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 
 export default defineConfig({
-    plugins: [react()],
-    test: {
-        environment: 'jsdom',
-        globals: true,
-        setupFiles: './src/test/setup.ts',
-        coverage: {
-            provider: 'v8',
-            reporter: ['text', 'json', 'html'],
-            exclude: [
-                'node_modules',
-                'src/test/setup.ts',
-                'vite.config.ts',
-                'eslint.config.js',
-                'vitest.config.ts',
-            ],
-        },
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: './src/test/setup.ts',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules',
+        'src/test/setup.ts',
+        'vite.config.ts',
+        'eslint.config.js',
+        'vitest.config.ts',
+      ],
     },
-    resolve: {
-        alias: {
-            '@': path.resolve(__dirname, './src'),
-            '@assets': path.resolve(__dirname, './src/assets'),
-            '@components': path.resolve(__dirname, './src/components'),
-            '@pages': path.resolve(__dirname, './src/pages'),
-            '@utils': path.resolve(__dirname, './src/utils'),
-        },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@components/layout': path.resolve(__dirname, './src/components/layout'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@utils': path.resolve(__dirname, './src/utils'),
     },
+  },
 });