diff --git a/LabProject/LabProject/__init__.py b/LabProject/LabProject/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/LabProject/LabProject/asgi.py b/LabProject/LabProject/asgi.py
new file mode 100644
index 0000000..fc3e1a4
--- /dev/null
+++ b/LabProject/LabProject/asgi.py
@@ -0,0 +1,16 @@
+"""
+ASGI config for LabProject project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/6.0/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'LabProject.settings')
+
+application = get_asgi_application()
diff --git a/LabProject/LabProject/settings.py b/LabProject/LabProject/settings.py
new file mode 100644
index 0000000..de2be91
--- /dev/null
+++ b/LabProject/LabProject/settings.py
@@ -0,0 +1,118 @@
+"""
+Django settings for LabProject project.
+
+Generated by 'django-admin startproject' using Django 6.0.3.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/6.0/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/6.0/ref/settings/
+"""
+
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/6.0/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'django-insecure-c&1eu(5ie_z#zv!f9)b+tq)m3l$6_55o0*h&u*i057)$!y!56q'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'mainApp',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'LabProject.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'LabProject.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/6.0/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/6.0/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/6.0/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/6.0/howto/static-files/
+
+STATIC_URL = 'static/'
diff --git a/LabProject/LabProject/urls.py b/LabProject/LabProject/urls.py
new file mode 100644
index 0000000..c5dee38
--- /dev/null
+++ b/LabProject/LabProject/urls.py
@@ -0,0 +1,23 @@
+"""
+URL configuration for LabProject project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/6.0/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path, include
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('', include('mainApp.urls')),
+]
diff --git a/LabProject/LabProject/wsgi.py b/LabProject/LabProject/wsgi.py
new file mode 100644
index 0000000..20ee972
--- /dev/null
+++ b/LabProject/LabProject/wsgi.py
@@ -0,0 +1,16 @@
+"""
+WSGI config for LabProject project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/6.0/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'LabProject.settings')
+
+application = get_wsgi_application()
diff --git a/LabProject/mainApp/__init__.py b/LabProject/mainApp/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/LabProject/mainApp/admin.py b/LabProject/mainApp/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/LabProject/mainApp/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/LabProject/mainApp/apps.py b/LabProject/mainApp/apps.py
new file mode 100644
index 0000000..d675b6a
--- /dev/null
+++ b/LabProject/mainApp/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class MainappConfig(AppConfig):
+    name = 'mainApp'
diff --git a/LabProject/mainApp/migrations/__init__.py b/LabProject/mainApp/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/LabProject/mainApp/models.py b/LabProject/mainApp/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/LabProject/mainApp/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/LabProject/mainApp/static/css/style.css b/LabProject/mainApp/static/css/style.css
new file mode 100644
index 0000000..4526a70
--- /dev/null
+++ b/LabProject/mainApp/static/css/style.css
@@ -0,0 +1,474 @@
+/* ============================================================
+   Base
+   ============================================================ */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Roboto', Arial, sans-serif;
+    font-size: 14px;
+    color: #202124;
+    background: #fff;
+}
+
+a {
+    color: #1a0dab;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.material-symbols-outlined {
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    vertical-align: middle;
+}
+
+/* ============================================================
+   Icon button (shared)
+   ============================================================ */
+.icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    padding: 8px;
+    color: #5f6368;
+}
+
+.icon-btn:hover {
+    background: #f1f3f4;
+}
+
+/* ============================================================
+   HOME PAGE
+   ============================================================ */
+.home-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 87vh;
+}
+
+/* Top nav */
+.top-nav {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 6px 16px;
+}
+
+.top-nav-links {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.top-nav-links a {
+    color: #202124;
+    font-size: 13px;
+    padding: 8px;
+}
+
+.top-nav-links a:hover {
+    text-decoration: underline;
+}
+
+.signin-btn {
+    background: #1a73e8;
+    color: #fff !important;
+    border-radius: 4px;
+    padding: 8px 16px !important;
+    font-size: 14px !important;
+    font-weight: 500;
+    text-decoration: none !important;
+    margin-left: 8px;
+}
+
+.signin-btn:hover {
+    background: #1765cc;
+    text-decoration: none !important;
+}
+
+/* Center / main */
+.home-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 80px;
+}
+
+.logo-container {
+    margin-bottom: 28px;
+}
+
+.google-logo {
+    width: 272px;
+    height: auto;
+}
+
+/* Search form */
+.search-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    width: 100%;
+    max-width: 584px;
+}
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border: 1px solid #dfe1e5;
+    border-radius: 24px;
+    padding: 6px 14px;
+    height: 44px;
+    box-shadow: none;
+    transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.search-bar:hover,
+.search-bar:focus-within {
+    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
+    border-color: rgba(223, 225, 229, 0);
+}
+
+.search-icon {
+    color: #9aa0a6;
+    font-size: 20px;
+    margin-right: 8px;
+    flex-shrink: 0;
+}
+
+.search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    font-family: 'Roboto', Arial, sans-serif;
+    color: #202124;
+    background: transparent;
+}
+
+.search-bar-icons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.bar-icon {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+}
+
+/* Search buttons */
+.search-buttons {
+    display: flex;
+    gap: 12px;
+}
+
+.search-btn {
+    background: #f8f9fa;
+    border: 1px solid #f8f9fa;
+    border-radius: 4px;
+    color: #3c4043;
+    font-size: 14px;
+    font-family: 'Roboto', Arial, sans-serif;
+    padding: 0 16px;
+    height: 36px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.search-btn:hover {
+    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+    background: #f1f3f4;
+    border-color: #f1f3f4;
+}
+
+/* Language line */
+.language-line {
+    font-size: 13px;
+    color: #202124;
+    margin-top: 4px;
+}
+
+.language-line a {
+    color: #1a0dab;
+    margin-left: 6px;
+}
+
+/* Footer */
+.home-footer {
+    border-top: 1px solid #e4e5e7;
+    background: #f2f2f2;
+    font-size: 13px;
+    color: #70757a;
+}
+
+.footer-top {
+    padding: 13px 24px;
+    border-bottom: 1px solid #e4e5e7;
+}
+
+.footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 24px;
+}
+
+.footer-left,
+.footer-right {
+    display: flex;
+    gap: 24px;
+}
+
+.footer-left a,
+.footer-right a {
+    color: #70757a;
+    font-size: 13px;
+}
+
+.footer-left a:hover,
+.footer-right a:hover {
+    text-decoration: underline;
+}
+
+/* ============================================================
+   TERMS OF SERVICE PAGE
+   ============================================================ */
+.terms-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Header */
+.terms-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 24px;
+    border-bottom: 1px solid #e8eaed;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 100;
+}
+
+.terms-header-left {
+    display: flex;
+    align-items: center;
+}
+
+.terms-logo {
+    width: 92px;
+    height: auto;
+}
+
+.terms-header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.terms-search-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid #dfe1e5;
+    border-radius: 24px;
+    padding: 6px 16px;
+    height: 38px;
+    width: 280px;
+}
+
+.terms-search-bar span {
+    color: #9aa0a6;
+    font-size: 20px;
+}
+
+.terms-search-bar input {
+    border: none;
+    outline: none;
+    font-size: 14px;
+    font-family: 'Roboto', Arial, sans-serif;
+    background: transparent;
+    color: #202124;
+    width: 100%;
+}
+
+.terms-header-right .icon-btn .material-symbols-outlined {
+    font-size: 32px;
+    color: #5f6368;
+}
+
+/* Full-page layout: sidebar at the far left, main area fills the rest */
+.terms-page-layout {
+    display: flex;
+    flex: 1;
+}
+
+/* Sidebar — sits at the absolute left edge of the page */
+.terms-sidebar {
+    width: 220px;
+    flex-shrink: 0;
+    padding: 32px 16px 32px 24px;
+    border-right: 1px solid #e8eaed;
+    position: sticky;
+    top: 57px; /* clears the sticky header */
+    align-self: flex-start;
+    max-height: calc(100vh - 57px);
+    overflow-y: auto;
+}
+
+/* Right-side column: tabs + scrollable content */
+.terms-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+/* Tab navigation */
+.terms-tabs {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid #e8eaed;
+    padding: 0 24px;
+    position: sticky;
+    top: 57px;
+    background: #fff;
+    z-index: 90;
+}
+
+.tab-link {
+    color: #5f6368;
+    font-weight: 500;
+    padding: 14px 20px;
+    border-bottom: 3px solid transparent;
+    letter-spacing: 0.01em;
+    text-transform: uppercase;
+    font-size: 12px;
+}
+
+.tab-link:hover {
+    color: #1a73e8;
+    text-decoration: none;
+    background: #f8f9fa;
+}
+
+.tab-active {
+    color: #1a73e8;
+    border-bottom-color: #1a73e8;
+}
+
+/* Content area */
+.terms-body {
+    padding: 40px 24px;
+}
+
+.terms-sidebar ul {
+    list-style: none;
+    padding: 0;
+}
+
+.terms-sidebar > ul > li {
+    margin-bottom: 8px;
+}
+
+.terms-sidebar ul ul {
+    padding-left: 16px;
+    margin-top: 6px;
+}
+
+.terms-sidebar ul ul li {
+    margin-bottom: 6px;
+}
+
+.terms-sidebar a {
+    color: #202124;
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+.terms-sidebar a:hover {
+    color: #1a73e8;
+}
+
+/* Content */
+.terms-content {
+    flex: 1;
+    max-width: 780px;
+}
+
+.terms-illustration {
+    margin-bottom: 40px;
+}
+
+.terms-illustration img {
+    max-width: 100%;
+    height: auto;
+}
+
+.terms-content h1 {
+    font-size: 32px;
+    font-weight: 400;
+    color: #202124;
+    margin-bottom: 16px;
+}
+
+.terms-meta {
+    font-size: 14px;
+    color: #5f6368;
+    margin-bottom: 8px;
+}
+
+.terms-meta a {
+    color: #1a0dab;
+}
+
+.terms-content section {
+    margin-top: 40px;
+}
+
+.terms-content h2 {
+    font-size: 22px;
+    font-weight: 400;
+    color: #202124;
+    margin-bottom: 16px;
+}
+
+.terms-content p {
+    font-size: 15px;
+    line-height: 1.7;
+    color: #3c4043;
+    margin-bottom: 16px;
+}
+
+.terms-content ul {
+    padding-left: 28px;
+    margin-bottom: 16px;
+}
+
+.terms-content ul li {
+    font-size: 15px;
+    line-height: 1.7;
+    color: #3c4043;
+    margin-bottom: 10px;
+}
+
+.terms-content a {
+    color: #1a0dab;
+}
diff --git a/resources/camera.png b/LabProject/mainApp/static/images/camera.png
similarity index 100%
rename from resources/camera.png
rename to LabProject/mainApp/static/images/camera.png
diff --git a/resources/google-logo.png b/LabProject/mainApp/static/images/google-logo.png
similarity index 100%
rename from resources/google-logo.png
rename to LabProject/mainApp/static/images/google-logo.png
diff --git a/resources/mircophone.png b/LabProject/mainApp/static/images/mircophone.png
similarity index 100%
rename from resources/mircophone.png
rename to LabProject/mainApp/static/images/mircophone.png
diff --git a/resources/tos_main_illustration.svg b/LabProject/mainApp/static/images/tos_main_illustration.svg
similarity index 100%
rename from resources/tos_main_illustration.svg
rename to LabProject/mainApp/static/images/tos_main_illustration.svg
diff --git a/resources/termsOfService.rtf b/LabProject/mainApp/static/text/termsOfService.rtf
similarity index 100%
rename from resources/termsOfService.rtf
rename to LabProject/mainApp/static/text/termsOfService.rtf
diff --git a/LabProject/mainApp/templates/mainApp/base.html b/LabProject/mainApp/templates/mainApp/base.html
new file mode 100644
index 0000000..b8b067d
--- /dev/null
+++ b/LabProject/mainApp/templates/mainApp/base.html
@@ -0,0 +1,47 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Google{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+    {% block extra_head %}{% endblock %}
+</head>
+    <nav class="top-nav">
+        <div class="top-nav-links">
+            <a href="https://mail.google.com" target="_blank">Gmail</a>
+            <a href="https://www.google.com/imghp" target="_blank">Images</a>
+            <button class="icon-btn" title="Google apps">
+                <span class="material-symbols-outlined">apps</span>
+            </button>
+            <a href="https://accounts.google.com" target="_blank" class="signin-btn">Sign in</a>
+        </div>
+    </nav>
+
+<body>
+    {% block body %}{% endblock %}
+</body>
+
+<footer class="home-footer">
+        <div class="footer-top">
+            <span>Saudi Arabia</span>
+        </div>
+        <div class="footer-bottom">
+            <div class="footer-left">
+                <a href="#">Advertising</a>
+                <a href="#">Business</a>
+                <a href="#">How Search works</a>
+            </div>
+            <div class="footer-right">
+                <a href="#">Privacy</a>
+                <a href="{% url 'mainApp:terms' %}">Terms</a>
+                <a href="#">Settings</a>
+            </div>
+        </div>
+    </footer>
+</html>
diff --git a/LabProject/mainApp/templates/mainApp/home.html b/LabProject/mainApp/templates/mainApp/home.html
new file mode 100644
index 0000000..f89d672
--- /dev/null
+++ b/LabProject/mainApp/templates/mainApp/home.html
@@ -0,0 +1,49 @@
+{% extends 'mainApp/base.html' %}
+{% load static %}
+
+{% block title %}Google{% endblock %}
+
+{% block body %}
+<div class="home-wrapper">
+
+
+    <main class="home-main">
+        <div class="logo-container">
+            <img src="{% static 'images/google-logo.png' %}" alt="Google" class="google-logo">
+        </div>
+
+        <form class="search-form" action="https://www.google.com/search" method="GET" target="_blank">
+            <div class="search-bar">
+                <span class="material-symbols-outlined search-icon">search</span>
+                <input type="text" name="q" class="search-input" autocomplete="off" aria-label="Search">
+                <div class="search-bar-icons">
+                    <button type="button" class="icon-btn" title="Search by voice">
+                        <img src="{% static 'images/mircophone.png' %}" alt="Search by voice" class="bar-icon">
+                    </button>
+                    <button type="button" class="icon-btn" title="Search by image">
+                        <img src="{% static 'images/camera.png' %}" alt="Search by image" class="bar-icon">
+                    </button>
+                </div>
+            </div>
+
+            <div class="search-buttons">
+                <button type="submit" class="search-btn">Google Search</button>
+                <button type="button" class="search-btn" onclick="luckySearch()">I'm Feeling Lucky</button>
+            </div>
+        </form>
+
+        <div class="language-line">
+            Google offered in: <a href="#">العربية</a>
+        </div>
+    </main>
+
+    
+</div>
+
+<script>
+    function luckySearch() {
+        const q = document.querySelector('.search-input').value;
+        window.open('https://www.google.com/search?q=' + encodeURIComponent(q) + '&btnI=1', '_blank');
+    }
+</script>
+{% endblock %}
diff --git a/LabProject/mainApp/templates/mainApp/terms.html b/LabProject/mainApp/templates/mainApp/terms.html
new file mode 100644
index 0000000..62e12c2
--- /dev/null
+++ b/LabProject/mainApp/templates/mainApp/terms.html
@@ -0,0 +1,139 @@
+{% extends 'mainApp/base.html' %}
+{% load static %}
+
+{% block title %}Google Terms of Service{% endblock %}
+
+{% block body %}
+<div class="terms-wrapper">
+
+    <header class="terms-header">
+        <div class="terms-header-left">
+            <a href="{% url 'mainApp:home' %}">
+                <img src="{% static 'images/google-logo.png' %}" alt="Google" class="terms-logo">
+            </a>
+        </div>
+        <div class="terms-header-right">
+            <div class="terms-search-bar">
+                <span class="material-symbols-outlined">search</span>
+                <input type="text" placeholder="Search" aria-label="Search">
+            </div>
+            <button class="icon-btn" title="Account">
+                <span class="material-symbols-outlined">account_circle</span>
+            </button>
+        </div>
+    </header>
+
+    <div class="terms-page-layout">
+
+        <aside class="terms-sidebar">
+            <ul>
+                <li><a href="#whats-covered">What's covered in these terms</a></li>
+                <li><a href="#terms">Terms</a>
+                    <ul>
+                        <li><a href="#service-provider">Service provider</a></li>
+                        <li><a href="#age-requirements">Age requirements</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </aside>
+
+        <div class="terms-main">
+
+            <nav class="terms-tabs">
+                <a href="#" class="tab-link">Overview</a>
+                <a href="#" class="tab-link tab-active">Terms of Service</a>
+                <a href="#" class="tab-link">Technologies</a>
+                <a href="#" class="tab-link">FAQ</a>
+            </nav>
+
+            <div class="terms-body">
+                <article class="terms-content">
+
+                    <div class="terms-illustration">
+                        <img src="{% static 'images/tos_main_illustration.svg' %}" alt="Terms of Service illustration">
+                    </div>
+
+                    <h1>Google Terms of Service</h1>
+
+                    <p class="terms-meta">
+                        Effective 5 January 2022&nbsp;|&nbsp;
+                        <a href="https://www.google.com/terms/archive" target="_blank">Archived versions</a>&nbsp;|&nbsp;
+                        <a href="https://www.gstatic.com/policies/terms/pdf/20220105/it7r24p9/google_terms_of_service_en-GB.pdf" target="_blank">Download PDF</a>
+                    </p>
+                    <p class="terms-meta">
+                        <a href="#">Country version:</a>&nbsp;Saudi Arabia
+                    </p>
+
+                    <section id="whats-covered">
+                        <h2>What's covered in these terms</h2>
+                        <p>
+                            We know it's tempting to skip these Terms of Service, but it's important to establish what you can expect
+                            from us as you use Google <a href="#">services</a>, and what we expect from you.
+                        </p>
+                        <p>
+                            These Terms of Service reflect <a href="#">the way that Google's business works</a>, the laws that apply
+                            to our company, and <a href="#">certain things that we've always believed to be true</a>. As a result,
+                            these Terms of Service help define Google's relationship with you as you interact with our services.
+                            For example, these terms include the following topic headings:
+                        </p>
+                        <ul>
+                            <li><a href="#">What you can expect from us</a>, which describes how we provide and develop our services</li>
+                            <li><a href="#">What we expect from you</a>, which establishes certain rules for using our services</li>
+                            <li><a href="#">Content in Google services</a>, which describes the intellectual property rights to the content
+                                that you find in our services — whether that content belongs to you, Google or others</li>
+                            <li><a href="#">In case of problems or disagreements</a>, which describes other legal rights that you have,
+                                and what to expect in case someone violates these terms.</li>
+                        </ul>
+                        <p>
+                            Understanding these terms is important because, by using our services, you're agreeing to these terms.
+                        </p>
+                        <p>
+                            Besides these terms, we also publish a <a href="#">Privacy Policy</a>. Although it's not part of these
+                            terms, we encourage you to read it to better understand how you can
+                            <a href="#">update, manage, export and delete your information</a>.
+                        </p>
+                    </section>
+
+                    <section id="terms">
+                        <h1>Terms</h1>
+
+                        <section id="service-provider">
+                            <h2>Service provider</h2>
+                            <p>
+                                Google <a href="#">services</a> are provided by, and you're contracting with:
+                            </p>
+                            <p>
+                                Google LLC<br>
+                                organised under the laws of the State of Delaware, USA, and operating under the laws of the USA<br>
+                                <br>
+                                1600 Amphitheatre Parkway<br>
+                                Mountain View, California 94043<br>
+                                USA
+                            </p>
+                        </section>
+
+                        <section id="age-requirements">
+                            <h2>Age requirements</h2>
+                            <p>
+                                If you're under the <a href="#">age required to manage your own Google Account</a>, you must have your
+                                parent or legal guardian's permission to use a Google Account. Please ask your parent or legal guardian
+                                to read these terms with you.
+                            </p>
+                            <p>
+                                If you're a parent or legal guardian, and you allow your child to use the
+                                <a href="#">services</a>, then these terms apply to you and you're responsible for your child's
+                                activity on the services.
+                            </p>
+                            <p>
+                                Some Google services have additional age requirements as described in their
+                                <a href="#">service-specific additional terms and policies</a>.
+                            </p>
+                        </section>
+                    </section>
+
+                </article>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/LabProject/mainApp/tests.py b/LabProject/mainApp/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/LabProject/mainApp/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/LabProject/mainApp/urls.py b/LabProject/mainApp/urls.py
new file mode 100644
index 0000000..00be42d
--- /dev/null
+++ b/LabProject/mainApp/urls.py
@@ -0,0 +1,9 @@
+from . import views
+from django.urls import path
+
+app_name = "mainApp"
+
+urlpatterns = [
+    path('', views.home_view, name='home'),
+    path('terms/', views.terms_view, name='terms'),
+]
diff --git a/LabProject/mainApp/views.py b/LabProject/mainApp/views.py
new file mode 100644
index 0000000..bfcbb50
--- /dev/null
+++ b/LabProject/mainApp/views.py
@@ -0,0 +1,10 @@
+from django.shortcuts import render
+from django.http import HttpRequest, HttpResponse
+
+
+def home_view(request):
+    return render(request, 'mainApp/home.html')
+
+
+def terms_view(request):
+    return render(request, 'mainApp/terms.html')
diff --git a/LabProject/manage.py b/LabProject/manage.py
new file mode 100755
index 0000000..88fbd0e
--- /dev/null
+++ b/LabProject/manage.py
@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'LabProject.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()
diff --git a/README.md b/README.md
index a6429bf..28648ae 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+## to run this lab: cd into LabProject and then use 'python manage.py runserver'
+
 # LAB-Django-Templates-Resolving-URLS-Static