diff --git a/app/bill/[id]/add/page.tsx b/app/bill/[id]/add/page.tsx
index bf11355..5549d24 100644
--- a/app/bill/[id]/add/page.tsx
+++ b/app/bill/[id]/add/page.tsx
@@ -1,10 +1,11 @@
 import { BillEditForm } from '@/app/ui/BillEditForm';
+import { Main } from '@/app/ui/Main';
 
 export default async function Page({ params:{ id:locationID } }: { params: { id:string } }) {
 
     return (
-        <main>
+        <Main>
             <BillEditForm locationID={locationID} />
-        </main>
+        </Main>
     );
 }
\ No newline at end of file
diff --git a/app/bill/[id]/edit/page.tsx b/app/bill/[id]/edit/page.tsx
index 4f1dd58..c1184b6 100644
--- a/app/bill/[id]/edit/page.tsx
+++ b/app/bill/[id]/edit/page.tsx
@@ -1,5 +1,6 @@
 import { fetchBillById } from '@/app/lib/actions/billActions';
 import { BillEditForm } from '@/app/ui/BillEditForm';
+import { Main } from '@/app/ui/Main';
 import { notFound } from 'next/navigation';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
@@ -12,8 +13,8 @@ export default async function Page({ params:{ id } }: { params: { id:string } })
         return(notFound());
     }
     return (
-        <main>
+        <Main>
             <BillEditForm locationID={locationID} bill={bill} />
-        </main>
+        </Main>
     );
 }
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 2d65753..5568288 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,6 +10,8 @@ import { YearMonth } from './lib/db-types';
 import { formatYearMonth } from './lib/format';
 import { FC } from 'react';
 import Pagination from './ui/Pagination';
+import { PageHeader } from './ui/PageHeader';
+import { Main } from './ui/Main';
 
 const getNextYearMonth = (yearMonth:YearMonth) => {
   const {year, month} = yearMonth;
@@ -62,7 +64,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
   let monthlyExpense = 0;
 
  return (
-    <main className="flex min-h-screen flex-col p-6 bg-base-300">
+    <Main>
         {
           // if this is the latest year, show the add month button
           currentYear === latestYear &&
@@ -116,8 +118,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
         <div className="mt-5 flex w-full justify-center">
           <Pagination availableYears={availableYears} />
         </div>
-        <PageFooter />
-    </main>
+    </Main>
   );
 }
 
diff --git a/app/policy/page.tsx b/app/policy/page.tsx
index 279695a..695aa34 100644
--- a/app/policy/page.tsx
+++ b/app/policy/page.tsx
@@ -1,7 +1,10 @@
+import { Main } from "../ui/Main";
+import { PageFooter } from "../ui/PageFooter";
+import { PageHeader } from "../ui/PageHeader";
 
 const ConsentPage = () =>   
-    <main>
-        <article className="prose container mx-auto my-[4em]">
+    <Main>
+        <article className="prose container mx-auto px-6">
             <h1>Application Privacy Policy for Home Utility Bills Tracking Web App</h1>
             <h2>1. Introduction</h2>
             <p>Welcome to our Home Utility Bills Tracking Web Application (“App”). This Privacy Policy is intended to inform you about how we collect, use, and disclose your personal information through the operation of the App.</p>
@@ -32,6 +35,6 @@ const ConsentPage = () =>
             <h2>11. Consent</h2>
             <p>By using our App, you consent to our privacy policy.</p>
         </article>
-    </main>;
+    </Main>;
 
 export default ConsentPage;
\ No newline at end of file
diff --git a/app/terms/page.tsx b/app/terms/page.tsx
index d5ff8c6..2a3d958 100644
--- a/app/terms/page.tsx
+++ b/app/terms/page.tsx
@@ -1,7 +1,10 @@
+import { Main } from "../ui/Main";
+import { PageFooter } from "../ui/PageFooter";
+import { PageHeader } from "../ui/PageHeader";
 
 const TermsPage = () =>
-    <main>
-        <article className="prose container mx-auto my-[4em]">
+    <Main>
+        <article className="prose container">
             <h1>Terms of Service for Home Utility Bills Tracking Web Application</h1>
             <h2>1. Introduction</h2>
             <p>Welcome to our Home Utility Bills Tracking Web Application (“App”). These Terms of Service (“Terms”) govern your access to and use of our App. By accessing or using the App, you agree to be bound by these Terms.</p>
@@ -42,6 +45,6 @@ const TermsPage = () =>
             <h2>11. Contact Us</h2>
             <p>If you have any questions about these Terms, please contact us at [Contact Information].</p>
         </article>
-    </main>;
+    </Main>;
 
 export default TermsPage;
\ No newline at end of file
diff --git a/app/ui/AddLocationButton.tsx b/app/ui/AddLocationButton.tsx
index 9dbd30c..4adfd3d 100644
--- a/app/ui/AddLocationButton.tsx
+++ b/app/ui/AddLocationButton.tsx
@@ -1,6 +1,7 @@
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import { YearMonth } from "../lib/db-types";
 import { formatYearMonth } from "../lib/format";
+import Link from "next/link";
 
 
 export interface AddLocationButtonProps {
@@ -10,9 +11,9 @@ export interface AddLocationButtonProps {
 
 export const AddLocationButton:React.FC<AddLocationButtonProps> = ({yearMonth}) =>
 <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
-    <a href={`/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
+    <Link href={`/location/${ formatYearMonth(yearMonth) }/add`} className="card-body tooltip self-center" data-tip="Add a new billing location">
         <span className='grid self-center' data-tip="Add a new billing location">
             <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
         </span>
-    </a>
+    </Link>
 </div>;
\ No newline at end of file
diff --git a/app/ui/AddMonthButton.tsx b/app/ui/AddMonthButton.tsx
index 7f7b08a..31dd046 100644
--- a/app/ui/AddMonthButton.tsx
+++ b/app/ui/AddMonthButton.tsx
@@ -2,12 +2,17 @@ import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import React from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
+import Link from "next/link";
 
 export interface AddMonthButtonProps {
     yearMonth: YearMonth;
 }
 
 export const AddMonthButton:React.FC<AddMonthButtonProps> = ({ yearMonth }) =>
-<a href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
-    <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
-</a>
+<div className="card card-compact card-bordered max-w-[36em] shadow-s my-1">
+    <Link href={`/year-month/${formatYearMonth(yearMonth)}/add`} className='grid self-center tooltip' data-tip="Dodaj novi mjesec">
+        <span className='grid self-center'>
+            <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl"  />
+        </span>
+    </Link>
+</div>;
diff --git a/app/ui/BillEditForm.tsx b/app/ui/BillEditForm.tsx
index cb1055b..b0c2cd8 100644
--- a/app/ui/BillEditForm.tsx
+++ b/app/ui/BillEditForm.tsx
@@ -5,6 +5,7 @@ import { Bill } from "../lib/db-types";
 import React, { FC } from "react";
 import { useFormState } from "react-dom";
 import { gotoHome, updateOrAddBill } from "../lib/actions/billActions";
+import Link from "next/link";
 
 // Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
 // This is a workaround for that
@@ -41,15 +42,15 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
     }
 
     return(
-    <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
+    <div className="card card-compact card-bordered min-w-96 bg-base-100 shadow-s">
         <div className="card-body">
             <form action={ dispatch }>
                 {
                     // don't show the delete button if we are adding a new bill
                     bill ?
-                    <a href={`/bill/${locationID}-${billID}/delete/`}>
+                    <Link href={`/bill/${locationID}-${billID}/delete/`}>
                         <TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
-                    </a> : null
+                    </Link> : null
                 }
 
                 <input id="billName" name="billName" type="text" placeholder="Bill name" className="input input-bordered w-full" defaultValue={name} required />
@@ -65,10 +66,10 @@ export const BillEditForm:FC<BillEditFormProps> = ({ locationID, bill }) => {
                     // <textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
 
                     attachment ? 
-                    <a href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
+                    <Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center block max-w-[24em] text-nowrap truncate inline-block mt-4'>
                         <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                         {decodeURIComponent(attachment.fileName)}
-                    </a>
+                    </Link>
                     : null
                 }
                 <input id="billAttachment" name="billAttachment" type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
diff --git a/app/ui/LocationCard.tsx b/app/ui/LocationCard.tsx
index 71cd77d..26024a4 100644
--- a/app/ui/LocationCard.tsx
+++ b/app/ui/LocationCard.tsx
@@ -6,6 +6,7 @@ import { BillBadge } from "./BillBadge";
 import { BillingLocation } from "../lib/db-types";
 import { formatYearMonth } from "../lib/format";
 import { formatCurrency } from "../lib/formatStrings";
+import Link from "next/link";
 
 export interface LocationCardProps {
     location: BillingLocation
@@ -17,19 +18,19 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
     const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
 
     return(
-        <div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
+        <div className="card card-compact card-bordered min-w-96 max-w-[36em] bg-base-100 shadow-s my-1">
             <div className="card-body">
-                <a href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
+                <Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
                     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
-                </a>
+                </Link>
                 <h2 className="card-title mr-[2em]">{formatYearMonth(yearMonth)} {name}</h2>
                 <div className="card-actions">
                     {
                         bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
                     }
-                    <a href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
+                    <Link href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
                         <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
-                    </a>
+                    </Link>
                 </div>
                 {
                     monthlyExpense > 0 ?
diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx
index 5fd3c28..52b598e 100644
--- a/app/ui/LocationEditForm.tsx
+++ b/app/ui/LocationEditForm.tsx
@@ -6,6 +6,8 @@ import { BillingLocation, YearMonth } from "../lib/db-types";
 import { updateOrAddLocation } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
 import { gotoHome } from "../lib/actions/billActions";
+import { Main } from "./Main";
+import Link from "next/link";
 
 export interface LocationEditFormProps {
     /** location which should be edited */
@@ -27,15 +29,15 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
     };
 
     return(
-        <main>
-            <div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
+        <Main>
+            <div className="card card-compact card-bordered min-w-96 bg-base-100 shadow-s my-1">
                 <div className="card-body">
                     <form action={dispatch}>
                         {
                             location && 
-                                <a href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
+                                <Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
                                     <TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
-                                </a>
+                                </Link>
                         }
                         <input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
                         <div id="status-error" aria-live="polite" aria-atomic="true">
@@ -66,11 +68,13 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
                             }
                         </div>
 
-                        <button className="btn btn-primary">Save</button>
-                        <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                        <div className="pt-4">
+                          <button className="btn btn-primary">Save</button>
+                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                        </div>
                     </form>
                 </div>
             </div>
-        </main>
+        </Main>
     )
 }
diff --git a/app/ui/Main.tsx b/app/ui/Main.tsx
new file mode 100644
index 0000000..c0ba54a
--- /dev/null
+++ b/app/ui/Main.tsx
@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { PageHeader } from "./PageHeader";
+import { PageFooter } from "./PageFooter";
+
+export interface MainProps {
+
+}
+
+export const Main:FC<MainProps> = ({ children }) =>
+<main className="flex min-h-screen flex-col bg-base-300">
+    <PageHeader />
+    <div className="mx-auto px-4">
+        {children}
+    </div>
+    <PageFooter />
+</main>
\ No newline at end of file
diff --git a/app/ui/PageFooter.tsx b/app/ui/PageFooter.tsx
index 5cc62a6..10d5a0c 100644
--- a/app/ui/PageFooter.tsx
+++ b/app/ui/PageFooter.tsx
@@ -1,8 +1,25 @@
+import Link from "next/link";
 import React from "react";
 
-export const PageFooter:React.FC = () => <>
-    <h2 className='text-xl text-sky-400/75 font-semibold mt-4'>Docs</h2>
-    <p><a href="https://tailwindcss.com/docs/" target="_blank">tailwindcss.com</a></p>
-    <p><a href="https://heroicons.com/" target="_blank">heroicons.com</a></p>
-    <p><a href="https://daisyui.com/components/" target="_blank">daisyui.com</a></p>
-</>
+export const PageFooter: React.FC = () =>
+    <div className="bg-base-100 text-base-content mt-10">
+        <footer className="footer mx-auto max-w-2xl px-4 py-10">
+            <div>
+                <div className="flex items-center gap-2">
+                    <img src="/icon4.png"></img>
+                    <div className="font-title inline-flex text-3xl font-black">Bills Tracker</div>
+                </div>
+                <p className="text-base-content/70 mb-5">Web app for tracking home utility bills</p>
+                <Link href="/" className="link link-hover">Home</Link>
+                <Link href="/policy/" className="link link-hover">Privacy Policy</Link>
+                <Link href="/terms/" className="link link-hover">Terms of Service</Link>
+            </div>
+            <div>
+                <span className="footer-title opacity-70">documents</span>
+                <a href="https://tailwindcss.com/docs/" target="_blank" className="link link-hover">tailwindcss.com</a>
+                <a href="https://heroicons.com/" target="_blank" className="link link-hover">heroicons.com</a>
+                <a href="https://daisyui.com/components/" target="_blank" className="link link-hover">daisyui.com</a>
+            </div>
+
+        </footer>
+    </div>;
diff --git a/app/ui/PageHeader.tsx b/app/ui/PageHeader.tsx
new file mode 100644
index 0000000..d33d0bd
--- /dev/null
+++ b/app/ui/PageHeader.tsx
@@ -0,0 +1,6 @@
+import Link from "next/link";
+
+export const PageHeader = () =>
+<div className="navbar bg-base-100 mb-6">
+    <Link className="btn btn-ghost text-xl" href="/"><img src="/icon3.png"></img> Utility Bills Tracker</Link>
+</div>
\ No newline at end of file