diff --git a/devNotes.md b/devNotes.md
index ef9d6b5..2eb6377 100644
--- a/devNotes.md
+++ b/devNotes.md
@@ -1 +1,97 @@
 # Developer Notes
+
+**Login Credentials:**  
+For demonstration purposes, authentication uses a static email and password:  
+- **Email:** `user@example.com`  
+- **Password:** `password123`  
+
+## Tech Stack
+- **Framework:** Vue 3 + Vite  
+- **Styling:** SCSS with variables in `_variables.scss`  
+- **Routing:** Vue Router  
+- **State Management:** Local component state  
+- **API Layer:** `apiService.ts` for data fetching abstraction  
+- **Icons:** Installed **FontAwesome** package for icons such as close, save, logout, create new record, actions, and pagination buttons.  
+
+## Flow Overview
+
+### 1. SignIn Page
+- Simulated authentication using `localStorage` flag (`isAuthenticated`).  
+- **Validation:** Ensures both email and password fields are non-empty.  
+- If either email or password is invalid, a **pop-up modal** appears saying *"Email or password is incorrect"*.
+- On successful login:
+  - A `loggedIn` key with a value of `true` is stored in **localStorage**.
+  - User is redirected to **Dashboard**.
+- **Auto Logout:** After 15 minutes of inactivity, the user is automatically logged out, redirected back to Sign In, and must log in again.
+
+### 2. Dashboard
+- Fetches initial client data from static `clients.json` via `apiService.ts`.
+- Displays data using the **`TableList`** component.
+- **Table Columns:**
+  - **Actions** (dropdown with View, Edit, Delete)
+  - **Name**
+  - **Company**
+  - **Subscription Cost** (with currency displayed beside the value)
+  - **Age**
+- **Pagination:**
+  - Implemented with `<`, `<<`, numbered pages (`1`, `2`, ...), `>>`, and `>` buttons.
+  - **Per page limit:** 10 records.
+  - If there are more than 10 records, remaining records are shown on additional pages.
+  - Blue pagination buttons indicate they are clickable.
+  - **Record Ordering:** Newly created records are inserted **at the top** of the list (most recent first), so they are visible immediately on the first page.  
+    - This ordering is handled by sorting records in descending order based on `id`.
+- **Buttons:**
+  - **Logout:** Logs the user out and redirects to Sign In.
+  - **+ Create new record:** Opens `ModalForm` for adding new records.
+- **Actions Column Details:**
+  - Implemented as a dropdown with **View**, **Edit**, and **Delete** options:
+    - **View:** Reuses the same modal structure to display:
+      - Profile picture
+      - Name
+      - Company
+      - Subscription cost
+      - Currency
+      - Age (hidden if not provided)
+      - Gender (hidden if not provided)
+      - Date registered (formatted as `"May 12, 2004"`)
+      - Modal can be closed.
+    - **Edit:** Reuses the create record modal but runs edit logic to update the existing record instead.
+    - **Delete:** Shows a confirmation modal asking the admin to confirm deletion and explicitly stating the client’s name to prevent accidental deletions.
+
+### 3. ModalForm
+- Reusable modal for creation of new client records.
+- Emits submitted data to parent (`Dashboard.vue`) for table update.
+- **Validation Rules:**
+  - Required: **name, company, subscription cost, currency**.
+  - An asterisk (`*`) is displayed beside required fields.
+  - **Subscription cost** and **age** must be **≥ 0**.
+  - **Currency:** Uses a dropdown list populated via the `currency-codes` package. User can type to auto-search and set the currency for quick navigation and reduced errors.
+  - **Optional fields:** Age and Gender (Gender uses an enum — `0` for male, `1` for female).
+  - **Save button** is disabled unless all required fields are filled.
+- **User Actions in Modal:**
+  - Save record (if valid).
+  - Cancel creation.
+  - Close modal.
+
+## Validation Rules Summary
+- **SignIn.vue:**
+  - Required: email, password.
+  - Invalid email/password → pop-up modal error message.
+- **ModalForm.vue:**
+  - Required: name, company, subscription cost, currency.
+  - Optional: age, gender.
+  - No negative values for subscription cost or age.
+  - Currency selection via searchable dropdown (currency-codes package).
+  - Save disabled unless required fields are complete.
+
+## File Responsibilities
+- **`main.ts`**: Application entry, mounts Vue instance, registers router & styles.  
+- **`router.ts`**: Defines routes (`/signin`, `/dashboard`) with guards.  
+- **`apiService.ts`**: Encapsulates API calls to fetch data.  
+- **`record.ts`**: TypeScript interfaces/types for records.  
+- **`SignIn.vue`**: Login form & authentication logic.  
+- **`Dashboard.vue`**: Main authenticated page, data fetching & management.  
+- **`TableList.vue`**: Generic table rendering component with dropdown actions, delete confirmation modal, and pagination with **latest-first sorting**.  
+- **`ModalForm.vue`**: Modal popup for record creation with validation.  
+- **`main.scss`**: Global styles.  
+- **`_variables.scss`**: Style variables for theme consistency.  
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9c463d9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CMS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
index bf9fa05..df4873c 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,29 @@
 {
-  "name": "virtusize-assignment",
-  "version": "1.0.0",
-  "description": "A frontend coding challenge for Virtusize Frontend team",
-  "main": "index.js",
+  "name": "frontend-assignment",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "",
-    "api": "json-server --watch clients.json --port 4090",
-    "test": ""
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "api": "json-server --watch clients.json --port 3000"
   },
-  "author": "virtusize",
-  "license": "UNLICENSED",
   "dependencies": {
-    "json-server": "^1.0.0-beta.2"
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/vue-fontawesome": "^3.1.1",
+    "currency-codes": "^2.2.0",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.7.0",
+    "json-server": "^1.0.0-beta.3",
+    "sass": "^1.90.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.0",
+    "vue-tsc": "^3.0.5"
   }
 }
diff --git a/public/icon.svg b/public/icon.svg
new file mode 100644
index 0000000..4dba767
--- /dev/null
+++ b/public/icon.svg
@@ -0,0 +1,13 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" >
+  <!-- User circle (head) -->
+  <circle cx="32" cy="18" r="10" stroke="#2C3E50" stroke-width="3" fill="#3498DB"/>
+
+  <!-- User shoulders/body -->
+  <path d="M18 50c0-7 28-7 28 0v6H18v-6z" fill="#3498DB" stroke="#2C3E50" stroke-width="3" />
+
+  <!-- Briefcase body -->
+  <rect x="14" y="34" width="36" height="18" rx="3" ry="3" fill="#2980B9" stroke="#2C3E50" stroke-width="3"/>
+
+  <!-- Briefcase handle -->
+  <rect x="24" y="28" width="16" height="8" rx="2" ry="2" fill="#3498DB" stroke="#2C3E50" stroke-width="3"/>
+</svg>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..f857a6e
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,19 @@
+<template>
+  <header class="app-title">Client Management System</header>
+  <RouterView />
+</template>
+
+<style scoped lang="scss">
+@use '/src/styles/variables' as vars;
+
+.app-title {
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+  background-color: vars.$background-color;
+  padding: 2rem 0 1rem;
+  margin: 0;
+  color: vars.$text-color;
+  user-select: none;
+}
+</style>
diff --git a/src/apiService.ts b/src/apiService.ts
new file mode 100644
index 0000000..91a26e9
--- /dev/null
+++ b/src/apiService.ts
@@ -0,0 +1,52 @@
+import type { RecordItem } from "./record";
+
+const API_URL = 'http://localhost:3000';
+
+async function request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+    const res = await fetch(`${API_URL}${endpoint}`, {
+        headers: { 'Content-Type': 'application/json' },
+        ...options
+    });
+
+    if (!res.ok) {
+        throw new Error(`HTTP error! Status: ${res.status}`);
+    }
+
+    return res.json();
+}
+
+export async function getRecords(): Promise<RecordItem[]> {
+    return request<RecordItem[]>('/clients');
+}
+
+export async function getRecordedById(id: number): Promise<RecordItem> {
+    return request<RecordItem>(`/clients/${id}`);
+}
+
+export async function createRecord(record: any): Promise<RecordItem> {
+    return request<RecordItem>(`/clients`, {
+        method: 'POST',
+        body: JSON.stringify(record)
+    });
+}
+
+export async function updateRecord(id: number, record: any): Promise<RecordItem> {
+    return request<RecordItem>(`/clients/${id}`, {
+        method: 'PUT',
+        body: JSON.stringify(record)
+    });
+}
+
+export async function deleteRecord(id: number): Promise<RecordItem> {
+    return request<RecordItem>(`/clients/${id}`, {
+        method: 'DELETE'
+    });
+}
+
+export default {
+    getRecords,
+    getRecordedById,
+    createRecord,
+    updateRecord,
+    deleteRecord
+};
diff --git a/src/components/ModalForm.vue b/src/components/ModalForm.vue
new file mode 100644
index 0000000..13c0f32
--- /dev/null
+++ b/src/components/ModalForm.vue
@@ -0,0 +1,516 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import type { RecordItem } from '../record';
+import { Gender } from '../record';
+import apiService from '../apiService';
+import currencyCodes from 'currency-codes';
+
+const props = defineProps<{
+  records: RecordItem[];
+  initialData?: RecordItem | null;
+  mode: 'add' | 'view' | 'edit';
+}>();
+
+const emit = defineEmits(['close', 'saved']);
+
+// Reactive form state
+const form = reactive<RecordItem>({
+  id: 0,
+  gender: null,
+  name: '',
+  company: '',
+  age: null,
+  picture: '',
+  registered: '',
+  currency: '',
+  subscriptionCost: 0,
+});
+
+// List of currency options filtered and mapped from currency-codes
+const currencyList = currencyCodes.data
+  .filter(c => c.code && c.currency)
+  .map(c => ({
+    code: c.code,
+    name: c.currency,
+  }));
+
+const currencyError = ref('');
+
+// Validation computed property for enabling/disabling Save button
+const isValid = computed(() =>
+  form.name.trim() !== '' &&
+  form.company.trim() !== '' &&
+  form.currency.trim() !== '' &&
+  form.subscriptionCost >= 0 &&
+  !currencyError.value
+);
+
+// Find and normalize currency code from input string (code or currency name)
+function findCurrencyCode(input: string): string | null {
+  if (!input) return null;
+
+  const byCode = currencyCodes.data.find(c => c.code.toUpperCase() === input.toUpperCase());
+  if (byCode) return byCode.code;
+
+  const byName = currencyCodes.data.find(c => c.currency.toLowerCase() === input.toLowerCase());
+  if (byName) return byName.code;
+
+  return null;
+}
+
+// Parse gender string to Gender enum or null
+function parseGender(gender: string | Gender | null | undefined): Gender | null {
+  if (!gender) return null;
+
+  if (typeof gender === 'string') {
+    const g = gender.toLowerCase();
+    if (g === 'male') return Gender.Male;
+    if (g === 'female') return Gender.Female;
+  }
+
+  return null;
+}
+
+// Convert Gender enum to string for API
+function genderToString(gender: Gender | null | ''): string | null {
+  if (gender === Gender.Male) return 'Male';
+  if (gender === Gender.Female) return 'Female';
+  return null;
+}
+
+// Format date with local timezone offset (used for registered date)
+function formatDateWithLocalOffset(date = new Date()): string {
+  const pad = (num: number) => String(num).padStart(2, '0');
+
+  const year = date.getFullYear();
+  const month = pad(date.getMonth() + 1);
+  const day = pad(date.getDate());
+  const hours = pad(date.getHours());
+  const minutes = pad(date.getMinutes());
+  const seconds = pad(date.getSeconds());
+
+  const tzOffsetMin = date.getTimezoneOffset();
+  const tzSign = tzOffsetMin > 0 ? '-' : '+';
+  const absOffsetMin = Math.abs(tzOffsetMin);
+  const tzHours = pad(Math.floor(absOffsetMin / 60));
+  const tzMinutes = pad(absOffsetMin % 60);
+
+  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds} ${tzSign}${tzHours}:${tzMinutes}`;
+}
+
+// Fetch next ID from API, fallback to 0 on error or empty list
+async function getNextIdFromAPI(): Promise<number> {
+  try {
+    const records = await apiService.getRecords();
+    if (records.length === 0) return 0;
+    return Math.max(...records.map(r => r.id)) + 1;
+  } catch (error) {
+    console.error('Error fetching records:', error);
+    return 0;
+  }
+}
+
+// Watch for subscriptionCost changes to validate non-negative
+watch(() => form.subscriptionCost, newVal => {
+  currencyError.value = newVal < 0 ? 'Subscription cost cannot be less than 0.' : '';
+});
+
+// Watch for initialData prop changes to populate or reset form
+watch(
+  () => props.initialData,
+  async newVal => {
+    if (newVal) {
+      // Normalize currency code
+      let currencyCode = findCurrencyCode(newVal.currency) || newVal.currency;
+
+      // Format registered date nicely for display (only in view mode)
+      let formattedRegistered = '';
+      if (newVal.registered) {
+        const cleaned = newVal.registered.replace(/\s(?=[+-]\d{2}:?\d{2})/, '');
+        const date = new Date(cleaned);
+        if (!isNaN(date.getTime())) {
+          formattedRegistered = date.toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          });
+        }
+      }
+
+      Object.assign(form, {
+        ...newVal,
+        registered: formattedRegistered,
+        currency: currencyCode,
+        gender: parseGender(newVal.gender as string),
+        subscriptionCost: Number(newVal.subscriptionCost) || 0,
+      });
+    } else {
+      // Reset form for 'add' mode
+      form.id = await getNextIdFromAPI();
+      form.gender = null;
+      form.name = '';
+      form.company = '';
+      form.age = null;
+      form.picture = 'http://placehold.it/32x32';
+      form.registered = '';
+      form.currency = '';
+      form.subscriptionCost = 0;
+    }
+  },
+  { immediate: true }
+);
+
+// Save form data via API (create or update)
+async function save() {
+  if (props.mode === 'view') return;
+
+  if (form.subscriptionCost === null) {
+    form.subscriptionCost = 0;
+  }
+
+  const formattedCost = form.subscriptionCost.toFixed(2);
+  const genderStr = genderToString(form.gender);
+  const registeredStr = formatDateWithLocalOffset(new Date());
+
+  if (props.mode === 'edit') {
+    await apiService.updateRecord(form.id, {
+      ...form,
+      subscriptionCost: formattedCost,
+      gender: genderStr,
+    });
+  } else if (props.mode === 'add') {
+    form.id = await getNextIdFromAPI();
+
+    const { id, ...newRecord } = form;
+    await apiService.createRecord({
+      id: String(form.id),
+      ...newRecord,
+      subscriptionCost: formattedCost,
+      gender: genderStr,
+      registered: registeredStr,
+    });
+  }
+
+  emit('saved');
+  emit('close');
+}
+</script>
+
+<template>
+  <div class="modal-overlay">
+    <div
+      class="modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modalTitle"
+    >
+      <header class="modal-header">
+        <h2 id="modalTitle" class="modal-title">
+          {{ props.mode === 'add'
+            ? 'Create new record'
+            : props.mode === 'edit'
+            ? 'Edit record'
+            : 'View record' }}
+        </h2>
+        <button
+          class="close-btn"
+          aria-label="Close modal"
+          @click="$emit('close')"
+          type="button"
+        >
+          <font-awesome-icon icon="times" />
+        </button>
+      </header>
+
+      <form @submit.prevent="save" class="modal-form" novalidate>
+        <!-- Profile picture visible only in view mode -->
+        <div v-if="props.mode === 'view' && form.picture" class="client-picture">
+          <img :src="form.picture" alt="Profile Picture" />
+        </div>
+
+        <!-- Name input -->
+        <div class="form-group">
+          <label for="name">
+            Name
+            <span v-if="props.mode === 'add' || props.mode === 'edit'">*</span>
+          </label>
+          <input
+            id="name"
+            v-model="form.name"
+            :readonly="props.mode === 'view'"
+            :required="props.mode !== 'view'"
+            type="text"
+            autocomplete="name"
+          />
+        </div>
+
+        <!-- Company input -->
+        <div class="form-group">
+          <label for="company">
+            Company
+            <span v-if="props.mode === 'add' || props.mode === 'edit'">*</span>
+          </label>
+          <input
+            id="company"
+            v-model="form.company"
+            :readonly="props.mode === 'view'"
+            :required="props.mode !== 'view'"
+            type="text"
+            autocomplete="organization"
+          />
+        </div>
+
+        <!-- Subscription Cost input -->
+        <div class="form-group">
+          <label for="subscription">
+            Subscription Cost
+            <span v-if="props.mode !== 'view'">*</span>
+          </label>
+
+          <input
+            v-if="props.mode !== 'view'"
+            id="subscription"
+            type="number"
+            step="0.01"
+            v-model.number="form.subscriptionCost"
+            required
+            min="0"
+          />
+          <input
+            v-else
+            id="subscription"
+            type="text"
+            :value="form.subscriptionCost.toFixed(2)"
+            readonly
+          />
+
+          <p
+            v-if="currencyError && props.mode !== 'view'"
+            class="validation-error"
+          >
+            {{ currencyError }}
+          </p>
+        </div>
+
+        <!-- Currency select -->
+        <div class="form-group">
+          <label for="currency">
+            Currency
+            <span v-if="props.mode === 'add' || props.mode === 'edit'">*</span>
+          </label>
+          <select
+            id="currency"
+            v-model="form.currency"
+            :disabled="props.mode === 'view'"
+            :class="{ 'select-no-arrow': props.mode === 'view' }"
+            required
+          >
+            <option disabled value="" hidden>Select Currency</option>
+            <option v-for="c in currencyList" :key="c.code" :value="c.code">
+              {{ c.code }} — {{ c.name }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Age input (hidden in view mode if null) -->
+        <div class="form-group" v-if="!(props.mode === 'view' && form.age === null)">
+          <label for="age">Age</label>
+          <input
+            id="age"
+            type="number"
+            v-model.number="form.age"
+            :readonly="props.mode === 'view'"
+            min="0"
+          />
+        </div>
+
+        <!-- Gender select (hidden in view mode if null) -->
+        <div
+          class="form-group"
+          v-if="!(props.mode === 'view' && form.gender === null)"
+        >
+          <label for="gender">Gender</label>
+          <select
+            id="gender"
+            v-model="form.gender"
+            :disabled="props.mode === 'view'"
+            :class="{ 'select-no-arrow': props.mode === 'view' }"
+          >
+            <option disabled value="" hidden>Select Gender</option>
+            <option :value="Gender.Male">Male</option>
+            <option :value="Gender.Female">Female</option>
+          </select>
+        </div>
+
+        <!-- Registered date (only in view mode) -->
+        <div class="form-group" v-if="form.registered && props.mode === 'view'">
+          <label>Date Registered</label>
+          <input id="registered" type="text" :value="form.registered" readonly />
+        </div>
+
+        <!-- Modal footer buttons (not shown in view mode) -->
+        <footer class="modal-footer" v-if="props.mode !== 'view'">
+          <button
+            type="submit"
+            class="button btn-primary"
+            :disabled="!isValid"
+            :aria-disabled="!isValid"
+          >
+            <font-awesome-icon icon="save" style="margin-right: 2px;" />
+            Save
+          </button>
+          <button
+            type="button"
+            class="button btn-secondary"
+            @click="$emit('close')"
+          >
+            Cancel
+          </button>
+        </footer>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '../styles/variables' as vars;
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: vars.$modal-overlay-bg;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: fadeIn 0.2s ease-in-out;
+  z-index: 999;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.modal {
+  background: vars.$background-white;
+  padding: 2.5rem;
+  border-radius: 10px;
+  width: 90vw;
+  max-width: 450px;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: slideUp 0.25s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+  border-bottom: 1px solid vars.$nav-border;
+  padding-bottom: 1rem;
+}
+
+.modal-footer {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  border-top: 1px solid vars.$nav-border;
+}
+
+.modal-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: vars.$text-color-dark;
+  margin: 0;
+}
+
+.modal-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.client-picture {
+  display: flex;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    max-width: 160px;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    background-color: vars.$background-color;
+    text-align: center;
+    line-height: 160px;
+  }
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: vars.$text-color-dark;
+  transition: color 0.3s ease;
+  padding: 0;
+  margin: 0;
+
+  &:hover {
+    color: vars.$primary;
+  }
+
+  &:focus {
+    outline: 2px solid vars.$primary-darker;
+    outline-offset: 2px;
+  }
+}
+
+.validation-error {
+  color: vars.$danger;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 400px) {
+  .modal {
+    padding: 1.5rem;
+  }
+
+  .modal-title {
+    font-size: 1.25rem;
+  }
+
+  .button {
+    font-size: 0.9rem;
+    padding: 0.4rem 1rem;
+    max-width: 100px;
+  }
+}
+</style>
diff --git a/src/components/TableList.vue b/src/components/TableList.vue
new file mode 100644
index 0000000..da42451
--- /dev/null
+++ b/src/components/TableList.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import type { RecordItem } from '../record';
+
+// Props and Emits
+const props = defineProps<{ items: RecordItem[] }>();
+const emit = defineEmits(['view', 'edit', 'delete']);
+
+// State for dropdown menu and delete modal
+const openDropdownId = ref<number | null>(null);
+const showDeleteModal = ref(false);
+const recordToDelete = ref<RecordItem | null>(null);
+
+// Pagination state
+const currentPage = ref(1);
+const pageSize = 10;
+
+// Computed total pages
+const totalPages = computed(() => Math.ceil(props.items.length / pageSize));
+
+// Computed items for current page
+const pagedItems = computed(() => {
+  const sortedItems = [...props.items].sort((a, b) => b.id - a.id);
+  const start = (currentPage.value - 1) * pageSize;
+  return sortedItems.slice(start, start + pageSize);
+});
+
+// Toggle dropdown open/close
+function toggleDropdown(id: number) {
+  openDropdownId.value = openDropdownId.value === id ? null : id;
+}
+
+// Close dropdown menu
+function closeDropdown() {
+  openDropdownId.value = null;
+}
+
+// Pagination navigation
+function prevPage() {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+    closeDropdown();
+  }
+}
+
+function nextPage() {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+    closeDropdown();
+  }
+}
+
+// Handle delete action initiation
+function onDeleteClick(record: RecordItem) {
+  recordToDelete.value = record;
+  showDeleteModal.value = true;
+  closeDropdown();
+}
+
+// Confirm delete and emit event
+function confirmDelete() {
+  if (recordToDelete.value) {
+    emit('delete', recordToDelete.value);
+  }
+  showDeleteModal.value = false;
+  recordToDelete.value = null;
+}
+
+// Close dropdown if clicking outside
+function onClickOutside(event: MouseEvent) {
+  const path = event.composedPath();
+  const clickedInsideDropdown = path.some(el => {
+    if (!(el instanceof HTMLElement)) return false;
+    return el.classList?.contains('dropdown') || el.classList?.contains('action-btn');
+  });
+  if (!clickedInsideDropdown) {
+    openDropdownId.value = null;
+  }
+}
+
+// Add and remove event listener for outside clicks
+onMounted(() => {
+  document.addEventListener('click', onClickOutside);
+});
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside);
+});
+</script>
+
+<template>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Actions</th>
+        <th>Name</th>
+        <th>Company</th>
+        <th>Subscription Cost</th>
+        <th>Age</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="record in pagedItems" :key="record.id">
+        <td class="actions">
+          <div class="dropdown" @click.stop>
+            <button class="button btn-primary action-btn" @click="toggleDropdown(record.id)">
+              <font-awesome-icon icon="cog" style="margin-right: 1px;" />
+              Actions
+              <font-awesome-icon icon="chevron-down" style="margin-right: 1px;" />
+            </button>
+            <ul v-if="openDropdownId === record.id" class="dropdown-menu">
+              <li @click="() => { emit('view', record); closeDropdown(); }">View</li>
+              <li @click="() => { emit('edit', record); closeDropdown(); }">Edit</li>
+              <li @click="onDeleteClick(record)">Delete</li>
+            </ul>
+          </div>
+        </td>
+        <td>{{ record.name }}</td>
+        <td>{{ record.company }}</td>
+        <td>{{ record.subscriptionCost + ' ' + record.currency.toUpperCase() }}</td>
+        <td>{{ record.age ?? '-' }}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="pagination">
+    <span class="nav-buttons">
+      <button
+        class="pagination-button"
+        @click="currentPage = 1; closeDropdown()"
+        :disabled="currentPage === 1"
+        aria-label="First Page"
+      >
+        <font-awesome-icon icon="angles-left" />
+      </button>
+      <button
+        class="pagination-button"
+        @click="prevPage"
+        :disabled="currentPage === 1"
+        aria-label="Previous Page"
+      >
+        <font-awesome-icon icon="angle-left" />
+      </button>
+    </span>
+
+    <span class="page-numbers">
+      <button
+        v-for="page in totalPages"
+        :key="page"
+        @click="currentPage = page; closeDropdown()"
+        :class="['pagination-button', { active: currentPage === page }]"
+        aria-current="page"
+      >
+        {{ page }}
+      </button>
+    </span>
+
+    <span class="nav-buttons">
+      <button
+        class="pagination-button"
+        @click="nextPage"
+        :disabled="currentPage === totalPages"
+        aria-label="Next Page"
+      >
+        <font-awesome-icon icon="angle-right" />
+      </button>
+      <button
+        class="pagination-button"
+        @click="currentPage = totalPages; closeDropdown()"
+        :disabled="currentPage === totalPages"
+        aria-label="Last Page"
+      >
+        <font-awesome-icon icon="angles-right" />
+      </button>
+    </span>
+  </div>
+
+  <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+    <div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="deleteConfirmTitle">
+      <h3 id="deleteConfirmTitle" style="margin-bottom: 1rem;">Confirm Delete</h3>
+      <p>Are you sure you want to delete <strong>{{ recordToDelete?.name }}</strong>?</p>
+      <div class="modal-buttons">
+        <button @click="confirmDelete" class="btn-danger">Yes</button>
+        <button @click="showDeleteModal = false" class="btn-secondary">No</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '../styles/variables' as vars;
+
+.table {
+  margin-bottom: 5rem;
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+    position: relative;
+  }
+}
+
+.pagination {
+  margin-top: 2rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+
+  .nav-buttons {
+    display: flex;
+    gap: 0.1rem;
+
+    .pagination-button {
+      background-color: vars.$primary;
+      border: 1px solid vars.$primary-dark;
+      color: vars.$background-white;
+      padding: 0.3rem 0.7rem;
+      cursor: pointer;
+      border-radius: 4px;
+      transition: background-color 0.3s ease;
+
+      &:disabled {
+        background-color: vars.$secondary;
+        border-color: vars.$secondary-hover;
+        color: vars.$text-color-light;
+        cursor: not-allowed;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: vars.$primary-dark;
+      }
+
+      &.active {
+        background-color: vars.$primary-darker;
+        border-color: vars.$primary-darker;
+      }
+    }
+  }
+
+  .page-numbers {
+    display: flex;
+    gap: 0.4rem;
+    margin: 0 0.6rem;
+
+    .pagination-button {
+      background-color: vars.$background-white;
+      border: 1px solid vars.$border-color;
+      color: vars.$text-color-dark;
+      padding: 0.3rem 0.7rem;
+      cursor: pointer;
+      border-radius: 4px;
+      transition: background-color 0.3s ease, color 0.3s ease;
+
+      &:hover {
+        background-color: vars.$dropdown-hover-bg;
+      }
+
+      &.active {
+        background-color: vars.$primary;
+        border-color: vars.$primary-dark;
+        color: vars.$background-white;
+        cursor: default;
+      }
+    }
+  }
+}
+
+.modal-buttons button:not(:last-child) {
+  margin-right: 0.5rem;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..3014b28
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router.ts'
+import './styles/main.scss'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCog, faPlus, faChevronDown, faAnglesLeft, faAngleLeft, faAngleRight, faAnglesRight, faTimes, faSignOutAlt, faSave } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faCog, faPlus, faChevronDown, faAnglesLeft, faAngleLeft, faAngleRight, faAnglesRight, faTimes, faSignOutAlt, faSave)
+
+const app = createApp(App)
+app.component('font-awesome-icon', FontAwesomeIcon)
+app.use(router).mount('#app')
diff --git a/src/record.ts b/src/record.ts
new file mode 100644
index 0000000..f1c0ddb
--- /dev/null
+++ b/src/record.ts
@@ -0,0 +1,16 @@
+export interface RecordItem {
+    id: number;
+    gender: Gender | null | '';
+    name: string;
+    company: string;
+    age: number | null;
+    picture?: string;
+    registered?: string;
+    currency: string;
+    subscriptionCost: number;
+}
+
+export enum Gender {
+    Male = 0,
+    Female = 1
+}
diff --git a/src/router.ts b/src/router.ts
new file mode 100644
index 0000000..627c5f5
--- /dev/null
+++ b/src/router.ts
@@ -0,0 +1,28 @@
+import { createWebHistory, createRouter, type RouteRecordRaw } from "vue-router";
+import Dashboard from "./views/Dashboard.vue";
+import SignIn from "./views/SignIn.vue";
+
+const routes: RouteRecordRaw[] = [
+    { path: '/', redirect: 'signin' },
+    { path: '/signin', name: 'SignIn', component: SignIn },
+    { path: '/dashboard', name: 'Dashboard', component: Dashboard, meta: { requiresAuth: true } }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+router.beforeEach((to, from, next) => {
+    const loggedIn = localStorage.getItem('loggedIn') === 'true';
+
+    if (to.meta.requiresAuth && !loggedIn) {
+        next('/signin');
+    } else if (to.path === '/signin' && loggedIn) {
+        next('/dashboard');
+    } else {
+        next();
+    }
+});
+
+export default router;
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 0000000..b7c484d
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,61 @@
+$primary: #007bff; // blue
+$primary-dark: #0056b3; // darker blue for hover
+$primary-darker: #004494; // even darker blue for focus outline
+
+$secondary: #e0e0e0; // gray light
+$secondary-hover: #cacaca; // gray hover
+
+$danger: #dc3545; // red
+$danger-hover: #b1271b; // darker red for hover
+
+$background-color: #f5f7fa; // page background
+$background-white: #fff;
+
+$text-color: #333;
+$text-color-dark: #555;
+$text-color-light: #777;
+
+$border-color: #ccc;
+$border-light: #ddd;
+$border-lighter: #f1f1f1;
+
+$modal-overlay-bg: rgba(0, 0, 0, 0.4);
+
+$input-focus-color: $primary; // blue
+$input-focus-shadow: rgba(0, 123, 255, 0.4); // semi-transparent blue
+
+$dropdown-hover-bg: #f0f0f0;
+
+$nav-border: #eee;
+
+:root {
+  --primary: #{$primary};
+  --primary-dark: #{$primary-dark};
+  --primary-darker: #{$primary-darker};
+
+  --secondary: #{$secondary};
+  --secondary-hover: #{$secondary-hover};
+
+  --danger: #{$danger};
+  --danger-hover: #{$danger-hover};
+
+  --background-color: #{$background-color};
+  --background-white: #{$background-white};
+
+  --text-color: #{$text-color};
+  --text-color-dark: #{$text-color-dark};
+  --text-color-light: #{$text-color-light};
+
+  --border-color: #{$border-color};
+  --border-light: #{$border-light};
+  --border-lighter: #{$border-lighter};
+
+  --modal-overlay-bg: #{$modal-overlay-bg};
+
+  --input-focus-color: #{$input-focus-color};
+  --input-focus-shadow: #{$input-focus-shadow};
+
+  --dropdown-hover-bg: #{$dropdown-hover-bg};
+
+  --nav-border: #{$nav-border};
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..1b9617a
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,396 @@
+@use './variables' as vars;
+@use "sass:color";
+
+/* Reset and base body styling */
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: vars.$background-color;
+  margin: 0;
+  padding: 5rem;
+  color: vars.$text-color;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Container helper */
+.container {
+  max-width: 900px;
+  margin: auto;
+  padding: 1rem;
+}
+
+/* Table styles */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  background: vars.$background-white;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+
+  th {
+    background: #f8f9fa;
+    padding: 0.6rem;
+    text-align: left;
+    font-weight: 600;
+    border-bottom: 1px solid vars.$border-light;
+  }
+
+  td {
+    padding: 0.6rem;
+    border-bottom: 1px solid vars.$border-lighter;
+  }
+
+  tr:hover {
+    background: #f6f8fa;
+  }
+}
+
+/* Base button styles */
+.button {
+  background-color: vars.$primary;
+  color: vars.$background-white;
+  padding: 0.4rem 1rem;
+  font-size: 0.95rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  min-width: 80px;
+  text-align: center;
+  user-select: none;
+  transition: background-color 0.3s ease, box-shadow 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: vars.$primary-dark;
+    box-shadow: 0 0 8px #{color.adjust(vars.$primary, $alpha: 0.4)};
+  }
+
+  &:focus-visible {
+    outline: 2px solid vars.$primary-darker;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+/* Button modifiers */
+.btn-primary {
+  @extend .button;
+  background-color: vars.$primary;
+
+  &:hover:not(:disabled) {
+    background-color: vars.$primary-dark;
+  }
+}
+
+.btn-secondary {
+  @extend .button;
+  background-color: vars.$secondary;
+  color: vars.$text-color;
+
+  &:hover:not(:disabled) {
+    background-color: vars.$secondary-hover;
+  }
+}
+
+.btn-danger {
+  @extend .button;
+  background-color: vars.$danger;
+  color: vars.$background-white;
+
+  &:hover:not(:disabled) {
+    background-color: color.adjust(vars.$danger, $lightness: -10%);
+  }
+}
+
+/* Navigation bar */
+nav {
+  background: vars.$background-white;
+  padding: 1rem;
+  border-bottom: 1px solid vars.$nav-border;
+
+  a {
+    text-decoration: none;
+    margin-right: 1rem;
+    color: vars.$primary;
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: underline;
+      outline: none;
+    }
+  }
+}
+
+/* Dropdown menus */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: vars.$background-white;
+  border: 1px solid vars.$border-light;
+  border-radius: 4px;
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+  width: 100px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+
+  li {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+
+    &:hover,
+    &:focus-visible {
+      background-color: vars.$dropdown-hover-bg;
+      outline: none;
+    }
+  }
+}
+
+/* Pagination buttons */
+.pagination-button {
+  width: 1.8rem;
+  height: 1.8rem;
+  padding: 0;
+  border-radius: 4px;
+  border: 1px solid vars.$border-color;
+  background: vars.$background-white;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 0.9rem;
+  line-height: 1;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:not(:disabled):hover,
+  &:not(:disabled):focus-visible {
+    background-color: vars.$dropdown-hover-bg;
+    outline: none;
+  }
+}
+
+.pagination-button.active {
+  background-color: vars.$primary;
+  color: vars.$background-white;
+  border-color: vars.$primary;
+}
+
+/* Modal overlay and content */
+.modal-overlay {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: vars.$modal-overlay-bg;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.modal-content {
+  background: vars.$background-white;
+  padding: 1.5rem 2rem;
+  border-radius: 8px;
+  max-width: 400px;
+  width: 90%;
+  text-align: center;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+  max-height: 90vh;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+/* Modal buttons reuse global button classes for consistency */
+.modal-close-btn,
+.btn-danger,
+.btn-secondary {
+  padding: 0.5rem 1.25rem;
+  border: none;
+  font-weight: 600;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  user-select: none;
+}
+
+.modal-close-btn,
+.btn-danger {
+  background-color: vars.$danger;
+  color: vars.$background-white;
+
+  &:hover,
+  &:focus-visible {
+    background-color: vars.$danger-hover;
+    outline: none;
+  }
+}
+
+.btn-secondary {
+  background-color: #888;
+  color: vars.$background-white;
+
+  &:hover,
+  &:focus-visible {
+    background-color: #666;
+    outline: none;
+  }
+}
+
+/* Form inputs and selects */
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid vars.$border-color;
+  border-radius: 6px;
+  font-size: 1rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: vars.$input-focus-color;
+    box-shadow: 0 0 6px vars.$input-focus-shadow;
+  }
+
+  &[readonly],
+  &[disabled] {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+    color: vars.$text-color-light;
+  }
+}
+
+input[readonly],
+select[disabled] {
+  background-color: vars.$background-white !important;
+  color: vars.$text-color !important;
+  opacity: 1 !important;
+  cursor: default !important;
+}
+
+input[readonly][required]:invalid {
+  box-shadow: none;
+  outline: none;
+}
+
+/* Utility class to remove select arrows when readonly */
+.select-no-arrow {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-right: 1em;
+  background-image: none !important;
+  cursor: default;
+}
+
+/* Validation error text */
+.validation-error {
+  color: #ef4444;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+
+/* Client picture styling for profile images */
+.client-picture {
+  display: flex;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    max-width: 160px;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    background-color: #f0f0f0;
+    text-align: center;
+    line-height: 160px;
+  }
+}
+
+/* Close button for modals */
+.close-btn {
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: vars.$text-color-dark;
+  transition: color 0.3s ease;
+  padding: 0;
+  margin: 0;
+
+  &:hover,
+  &:focus-visible {
+    color: vars.$input-focus-color;
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid vars.$input-focus-color;
+    outline-offset: 2px;
+  }
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 400px) {
+  .modal-content {
+    padding: 1.5rem;
+  }
+
+  .modal-title {
+    font-size: 1.25rem;
+  }
+
+  .button {
+    font-size: 0.9rem;
+    padding: 0.4rem 1rem;
+    max-width: 100px;
+  }
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
new file mode 100644
index 0000000..d4746c9
--- /dev/null
+++ b/src/views/Dashboard.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import type { RecordItem } from '../record';
+import { deleteRecord, getRecords } from '../apiService';
+import TableList from '../components/TableList.vue';
+import ModalForm from '../components/ModalForm.vue';
+
+const router = useRouter();
+
+// Reactive state to manage records, modal visibility, and modal mode/data
+const state = reactive({
+  records: [] as RecordItem[],
+  showModal: false,
+  modalMode: 'view' as 'view' | 'edit' | 'add',
+  modalData: null as RecordItem | null
+});
+
+// Separate refs for logout modals
+const showLogoutModal = ref(false);
+const showLogoutConfirmModal = ref(false);
+
+// Fetch all records from API
+async function fetchRecords() {
+  state.records = await getRecords();
+}
+
+// Modal openers for add/view/edit modes
+function openAddModal() {
+  state.modalData = null;
+  state.modalMode = 'add';
+  state.showModal = true;
+}
+function openViewModal(record: RecordItem) {
+  state.modalData = { ...record };
+  state.modalMode = 'view';
+  state.showModal = true;
+}
+function openEditModal(record: RecordItem) {
+  state.modalData = { ...record };
+  state.modalMode = 'edit';
+  state.showModal = true;
+}
+
+// Delete a record and refresh the list
+async function handleDelete(record: RecordItem) {
+  await deleteRecord(record.id);
+  await fetchRecords();
+}
+
+// Logout related functions
+function logout() {
+  localStorage.removeItem('loggedIn');
+  router.push('/signin');
+}
+
+function onLogoutClick() {
+  showLogoutConfirmModal.value = true;
+}
+function confirmLogout() {
+  showLogoutConfirmModal.value = false;
+  logout();
+}
+function cancelLogout() {
+  showLogoutConfirmModal.value = false;
+}
+
+// Inactivity logout timer setup
+const INACTIVITY_LIMIT_MS = 15 * 60 * 1000; // 15 minutes
+let inactivityTimeout: ReturnType<typeof setTimeout> | null = null;
+
+function resetInactivityTimer() {
+  if (inactivityTimeout) clearTimeout(inactivityTimeout);
+  inactivityTimeout = setTimeout(() => {
+    showLogoutModal.value = true;
+  }, INACTIVITY_LIMIT_MS);
+}
+
+const inactivityEvents = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'];
+
+function setupInactivityWatcher() {
+  inactivityEvents.forEach((event) => {
+    window.addEventListener(event, resetInactivityTimer);
+  });
+}
+
+function removeInactivityWatcher() {
+  inactivityEvents.forEach((event) => {
+    window.removeEventListener(event, resetInactivityTimer);
+  });
+  if (inactivityTimeout) clearTimeout(inactivityTimeout);
+}
+
+// Called when inactivity logout modal closes (logs out user)
+function onLogoutModalClose() {
+  showLogoutModal.value = false;
+  logout();
+}
+
+// Lifecycle hooks
+onMounted(() => {
+  fetchRecords();
+  resetInactivityTimer();
+  setupInactivityWatcher();
+});
+onBeforeUnmount(() => {
+  removeInactivityWatcher();
+});
+</script>
+
+<template>
+  <div class="dashboard">
+    <header class="dashboard-header">
+      <h1>Dashboard</h1>
+      <div>
+        <button class="button primary" @click="openAddModal" style="margin-right: 10px;">
+          <font-awesome-icon icon="plus" style="margin-right: 6px;" />
+          Create new record
+        </button>
+        <button class="button logout" @click="onLogoutClick">
+          <font-awesome-icon icon="sign-out-alt" style="margin-right: 6px;" />
+          Logout
+        </button>
+      </div>
+    </header>
+
+    <section class="dashboard-content">
+      <TableList
+        :items="state.records"
+        @view="openViewModal"
+        @edit="openEditModal"
+        @delete="handleDelete"
+      />
+    </section>
+
+    <ModalForm
+      v-if="state.showModal"
+      :initial-data="state.modalData"
+      :mode="state.modalMode"
+      :records="state.records"
+      @close="state.showModal = false"
+      @saved="fetchRecords"
+    />
+
+    <!-- Logout Confirmation Modal -->
+    <div
+      v-if="showLogoutConfirmModal"
+      class="modal-overlay"
+      @click.self="cancelLogout"
+    >
+      <div
+        class="modal-content"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="logoutConfirmTitle"
+      >
+        <h3 id="logoutConfirmTitle" style="margin-bottom: 1rem;">Confirm Logout</h3>
+        <p>Are you sure you want to logout?</p>
+        <div style="margin-top: 1.5rem;">
+          <button @click="confirmLogout" class="btn-danger" style="margin-right: 1rem;">Yes</button>
+          <button @click="cancelLogout" class="btn-secondary">No</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Inactivity Logout Modal -->
+    <div
+      v-if="showLogoutModal"
+      class="modal-overlay"
+      @click.self="onLogoutModalClose"
+    >
+      <div
+        class="modal-content"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="logoutModalTitle"
+      >
+        <h3
+          id="logoutModalTitle"
+          style="color:#d93025; margin-bottom: 1rem;"
+        >
+          Logged Out
+        </h3>
+        <p>You have been logged out due to inactivity.</p>
+        <button @click="onLogoutModalClose" class="modal-close-btn">OK</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '../styles/variables' as vars;
+
+.dashboard {
+  background: vars.$background-white;
+  padding: 3rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+
+  h1 {
+    font-size: 1.5rem;
+    color: vars.$text-color;
+  }
+
+  > div {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.dashboard-header .button.primary {
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: bold;
+  background-color: vars.$primary;
+  border: 1.5px solid vars.$primary-dark;
+  color: vars.$background-white;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: vars.$primary-dark;
+  }
+}
+
+/* Logout button unique styling */
+.dashboard-header .button.logout {
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: vars.$danger;
+  background-color: transparent;
+  border: 1.5px solid vars.$danger;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+
+  &:hover {
+    background-color: vars.$danger;
+    color: vars.$background-white;
+  }
+}
+
+.dashboard-content {
+  overflow-x: auto;
+}
+</style>
diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
new file mode 100644
index 0000000..7ba92f3
--- /dev/null
+++ b/src/views/SignIn.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+// Reactive refs for form inputs
+const email = ref('');
+const password = ref('');
+
+// Router instance for navigation
+const router = useRouter();
+
+// Mock user credentials for demo login
+const MOCK_USER = {
+  email: 'user@example.com',
+  password: 'password123',
+};
+
+// Controls visibility of the error modal
+const showErrorModal = ref(false);
+
+/**
+ * Handles the login form submission.
+ * Checks credentials against mock user and navigates on success.
+ * Shows error modal if credentials are invalid.
+ */
+function login() {
+  if (email.value === MOCK_USER.email && password.value === MOCK_USER.password) {
+    localStorage.setItem('loggedIn', 'true');
+    router.push('/dashboard');
+  } else {
+    showErrorModal.value = true;
+  }
+}
+
+/** Closes the error modal */
+function closeModal() {
+  showErrorModal.value = false;
+}
+</script>
+
+<template>
+  <div class="signin-container">
+    <h2 class="signin-title">Sign In</h2>
+
+    <form @submit.prevent="login" class="signin-form">
+      <label for="email">Email:</label>
+      <input id="email" v-model="email" type="email" required placeholder="user@example.com" />
+
+      <label for="password">Password:</label>
+      <input id="password" v-model="password" type="password" required placeholder="••••••••" />
+
+      <button type="submit" class="signin-button">Login</button>
+    </form>
+
+    <!-- Error modal displayed when login fails -->
+    <div v-if="showErrorModal" class="modal-overlay" @click.self="closeModal">
+      <div
+        class="modal-content"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modalTitle"
+      >
+        <h3 id="modalTitle">Invalid Credentials</h3>
+        <p>The email or password you entered is incorrect.</p>
+        <button @click="closeModal" class="modal-close-btn">Close</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '../styles/variables' as vars;
+
+.signin-container {
+  max-width: 320px;
+  margin: 3rem auto;
+  padding: 2rem;
+  border: 1px solid vars.$border-light;
+  border-radius: 8px;
+  background-color: vars.$background-white;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.signin-title {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  color: vars.$text-color;
+}
+
+.signin-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: left;
+}
+
+label {
+  font-weight: 600;
+  color: vars.$text-color-dark;
+}
+
+input {
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid vars.$border-color;
+  border-radius: 6px;
+  outline-offset: 2px;
+  outline-color: vars.$border-color;
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;
+}
+
+input:focus {
+  border-color: vars.$input-focus-color;
+  outline-color: vars.$input-focus-color;
+  box-shadow: 0 0 6px vars.$input-focus-shadow;
+}
+
+.signin-button {
+  padding: 0.6rem 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: vars.$background-white;
+  background-color: vars.$primary;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-top: 1rem;
+  transition: background-color 0.3s ease;
+  user-select: none;
+}
+
+.signin-button:hover {
+  background-color: vars.$primary-dark;
+}
+
+/* Modal overlay and content */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: vars.$modal-overlay-bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.modal-content {
+  background: vars.$background-white;
+  padding: 1.5rem 2rem;
+  border-radius: 8px;
+  max-width: 320px;
+  width: 100%;
+  text-align: center;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+  box-sizing: border-box;
+}
+
+.modal-content h3 {
+  margin-bottom: 1rem;
+  color: vars.$danger;
+  font-weight: 700;
+}
+
+.modal-content p {
+  margin-bottom: 1.5rem;
+  font-size: 1rem;
+  color: vars.$text-color;
+}
+
+.modal-close-btn {
+  padding: 0.5rem 1.25rem;
+  background-color: vars.$danger;
+  border: none;
+  color: vars.$background-white;
+  font-weight: 600;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  user-select: none;
+}
+
+.modal-close-btn:hover {
+  background-color: vars.$danger-hover;
+}
+</style>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..80fafe8
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import { DefineComponent } from "vue";
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..bee2b63
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..e879ef1
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..bbcf80c
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})