diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index a2eb3fa..c97e951 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,19 +4,30 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="7410a44d-51b9-408b-85ad-4fa46776b372" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/.idea/DepoT.iml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/profiles_settings.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+    <list default="true" id="7410a44d-51b9-408b-85ad-4fa46776b372" name="Changes" comment="Add IntelliJ IDEA project configuration files&#10;&#10;This commit adds IntelliJ IDEA-specific configuration files for the project, including module setup, version control integration, inspection profiles, and workspace settings. These files facilitate development environment configuration for contributors using IntelliJ IDEA.">
+      <change afterPath="$PROJECT_DIR$/common/urls.py" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/static/styles/styles.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/templates/client-dashboard-original.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/templates/landing-page.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/users/forms.py" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/users/urls.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/DepoT/settings.py" beforeDir="false" afterPath="$PROJECT_DIR$/DepoT/settings.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/DepoT/urls.py" beforeDir="false" afterPath="$PROJECT_DIR$/DepoT/urls.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/common/views.py" beforeDir="false" afterPath="$PROJECT_DIR$/common/views.py" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="HTML File" />
+        <option value="Python Script" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
@@ -31,9 +42,13 @@
   </component>
   <component name="PropertiesComponent"><![CDATA[{
   "keyToString": {
+    "DefaultHtmlFileTemplate": "HTML File",
+    "Django Server.DepoT.executor": "Debug",
     "RunOnceActivity.OpenDjangoStructureViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
+    "django.template.preview.state": "SHOW_EDITOR_AND_PREVIEW",
     "git-widget-placeholder": "master",
+    "last_opened_file_path": "C:/dev_projects/python/Django/DepoT/templates",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
@@ -42,6 +57,12 @@
     "vue.rearranger.settings.migration": "true"
   }
 }]]></component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\dev_projects\python\Django\DepoT\templates" />
+      <recent name="C:\dev_projects\python\Django\DepoT\static\styles" />
+    </key>
+  </component>
   <component name="RunManager">
     <configuration name="DepoT" type="Python.DjangoServer" factoryName="Django server">
       <module name="DepoT" />
@@ -50,6 +71,7 @@
       <option name="PARENT_ENVS" value="true" />
       <envs>
         <env name="PYTHONUNBUFFERED" value="1" />
+        <env name="DJANGO_SETTINGS_MODULE" value="DepoT.settings" />
       </envs>
       <option name="SDK_HOME" value="" />
       <option name="WORKING_DIRECTORY" value="" />
@@ -84,11 +106,43 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1750784740296</updated>
-      <workItem from="1750784741367" duration="12655000" />
+      <workItem from="1750784741367" duration="29605000" />
+    </task>
+    <task id="LOCAL-00001" summary="Add IntelliJ IDEA project configuration files&#10;&#10;This commit adds IntelliJ IDEA-specific configuration files for the project, including module setup, version control integration, inspection profiles, and workspace settings. These files facilitate development environment configuration for contributors using IntelliJ IDEA.">
+      <option name="closed" value="true" />
+      <created>1750855057151</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1750855057151</updated>
     </task>
+    <task id="LOCAL-00002" summary="Add IntelliJ IDEA project configuration files&#10;&#10;This commit adds IntelliJ IDEA-specific configuration files for the project, including module setup, version control integration, inspection profiles, and workspace settings. These files facilitate development environment configuration for contributors using IntelliJ IDEA.">
+      <option name="closed" value="true" />
+      <created>1750855273832</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1750855273832</updated>
+    </task>
+    <option name="localTasksCounter" value="3" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="Add IntelliJ IDEA project configuration files&#10;&#10;This commit adds IntelliJ IDEA-specific configuration files for the project, including module setup, version control integration, inspection profiles, and workspace settings. These files facilitate development environment configuration for contributors using IntelliJ IDEA." />
+    <option name="LAST_COMMIT_MESSAGE" value="Add IntelliJ IDEA project configuration files&#10;&#10;This commit adds IntelliJ IDEA-specific configuration files for the project, including module setup, version control integration, inspection profiles, and workspace settings. These files facilitate development environment configuration for contributors using IntelliJ IDEA." />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <breakpoints>
+        <line-breakpoint enabled="true" suspend="THREAD" type="python-line">
+          <url>file://$PROJECT_DIR$/common/views.py</url>
+          <line>22</line>
+          <option name="timeStamp" value="1" />
+        </line-breakpoint>
+      </breakpoints>
+    </breakpoint-manager>
+  </component>
 </project>
\ No newline at end of file
diff --git a/DepoT/settings.py b/DepoT/settings.py
index 8ec2cd8..e162aa4 100644
--- a/DepoT/settings.py
+++ b/DepoT/settings.py
@@ -101,6 +101,8 @@ DATABASES = {
 # Password validation
 # https://docs.djangoproject.com/en/5.2/ref/settings/#auth-password-validators
 
+# AUTH_USER_MODEL = 'users.CustomUser'
+
 AUTH_PASSWORD_VALIDATORS = [
     {
         "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
@@ -134,6 +136,9 @@ USE_TZ = True
 
 STATIC_URL = "static/"
 
+STATICFILES_DIRS = [
+    BASE_DIR / 'static'
+]
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
diff --git a/DepoT/urls.py b/DepoT/urls.py
index 0c10fbd..5da75ef 100644
--- a/DepoT/urls.py
+++ b/DepoT/urls.py
@@ -16,8 +16,10 @@ Including another URLconf
 """
 
 # from django.contrib import admin
-from django.urls import path
+from django.urls import path, include
 
 urlpatterns = [
     #    path("admin/", admin.site.urls),
+    path('', include('common.urls')),
+    path('user/', include('users.urls')),
 ]
diff --git a/common/urls.py b/common/urls.py
new file mode 100644
index 0000000..53367a2
--- /dev/null
+++ b/common/urls.py
@@ -0,0 +1,9 @@
+from django.urls import path
+from common import views
+
+urlpatterns = [
+    path('', views.IndexView.as_view(), name='index'),
+    path('client/dashboard/', views.ClientDashboardView.as_view(), name='client_dashboard'),
+    path ('client/preinfo/', views.ClientPreinfoView.as_view(), name='client_preinfo'),
+    path('dashboard/', views.DashboardRedirectView.as_view(), name='dashboard'),
+]
diff --git a/common/views.py b/common/views.py
index 91ea44a..84d84ea 100644
--- a/common/views.py
+++ b/common/views.py
@@ -1,3 +1,46 @@
-from django.shortcuts import render
+from django.urls import reverse_lazy
+from django.views.generic import TemplateView, RedirectView
+from django.shortcuts import render, redirect
+
 
 # Create your views here.
+class IndexView(TemplateView):
+    template_name = 'landing-page.html'
+    extra_context = {
+        'title': 'Home',
+        'description': 'This is the home page of the container application.',
+    }
+
+    def get(self, request, *args, **kwargs):
+        return render(request, self.template_name, self.extra_context)
+
+
+
+class DashboardRedirectView(RedirectView):
+    is_permanent = False
+
+    def get_redirect_url(self, *args, **kwargs):
+        if 1==1:
+            return  reverse_lazy('client_dashboard')
+        return  reverse_lazy('client_dashboard')
+
+
+class ClientDashboardView(TemplateView):
+    template_name = 'client-dashboard.html'
+    extra_context = {
+        'title': 'Client Dashboard',
+        'description': 'This is the client dashboard page.',
+    }
+
+    def get(self, request, *args, **kwargs):
+        return render(request, self.template_name, self.extra_context)
+
+class ClientPreinfoView(TemplateView):
+    template_name = 'client-preinfo.html'
+    extra_context = {
+        'title': 'Client Preinfo',
+        'description': 'This is the client preinfo page.',
+    }
+
+    def get(self, request, *args, **kwargs):
+        return render(request, self.template_name, self.extra_context)
\ No newline at end of file
diff --git a/static/styles/styles.css b/static/styles/styles.css
new file mode 100644
index 0000000..ce4f9f1
--- /dev/null
+++ b/static/styles/styles.css
@@ -0,0 +1,198 @@
+body {
+    background: linear-gradient(135deg, #EDDECB 0%, #E1C6A8 100%);
+    min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.wave {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
+    background-size: cover;
+    background-repeat: no-repeat;
+    z-index: -1;
+}
+
+.login-container {
+    background-color: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
+    max-width: 56rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    animation: fadeIn 0.8s ease-in-out;
+}
+
+@media (min-width: 768px) {
+    .login-container {
+        flex-direction: row;
+    }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.login-form-section {
+    width: 100%;
+    padding: 2rem;
+}
+
+@media (min-width: 768px) {
+    .login-form-section {
+        width: 50%;
+    }
+}
+
+.info-section {
+    width: 100%;
+    background: linear-gradient(to bottom right, #EDDECB, #E1C6A8);
+    padding: 2rem;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+@media (min-width: 768px) {
+    .info-section {
+        width: 50%;
+    }
+}
+
+h1 {
+    font-size: 1.875rem;
+    font-weight: bold;
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+}
+
+.subtitle {
+    color: #4b5563;
+    margin-top: 0.5rem;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 0.25rem;
+}
+
+input[type="text"],
+input[type="password"] {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    outline: none;
+    box-sizing: border-box;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+    border-color: #E1C6A8;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.remember-forgot {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.remember-me {
+    display: flex;
+    align-items: center;
+}
+
+.remember-me input {
+    margin-right: 0.5rem;
+}
+
+.forgot-password {
+    color: #E1C6A8;
+    text-decoration: none;
+    font-size: 0.875rem;
+}
+
+.forgot-password:hover {
+    color: #E1C6A8;
+}
+
+.submit-button {
+    width: 100%;
+    background-color: #E1C6A8;
+    color: white;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.submit-button:hover {
+    background-color: #E1C6A8;
+}
+
+.feature-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.feature-icon {
+    background-color: rgba(37, 99, 235, 0.5);
+    padding: 0.5rem;
+    border-radius: 9999px;
+    margin-right: 0.75rem;
+}
+
+.feature-text {
+    color: rgba(219, 234, 254, 0.9);
+    font-size: 0.875rem;
+}
+
+.version-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 2rem;
+    font-size: 0.875rem;
+}
+
+#loginMessage {
+    text-align: center;
+    margin-top: 1rem;
+    display: none;
+}
+
+#loginMessage.error {
+    color: #ef4444;
+}
+
+#loginMessage.success {
+    color: #10b981;
+}
+
+.icon {
+    width: 1.5rem;
+    height: 1.5rem;
+}
diff --git a/templates/client-dashboard-original.html b/templates/client-dashboard-original.html
new file mode 100644
index 0000000..f2169b9
--- /dev/null
+++ b/templates/client-dashboard-original.html
@@ -0,0 +1,689 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Line Operator Dashboard | Container Depot</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f5f7fa;
+        }
+        .sidebar {
+            background: linear-gradient(180deg, #0f4c81 0%, #1a6baf 100%);
+            transition: all 0.3s;
+        }
+        .content-area {
+            transition: all 0.3s;
+        }
+        .nav-item {
+            transition: all 0.2s;
+        }
+        .nav-item:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .nav-item.active {
+            background-color: rgba(255, 255, 255, 0.2);
+            border-left: 4px solid white;
+        }
+        .card {
+            transition: all 0.3s;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .tab {
+            transition: all 0.2s;
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .form-section {
+            animation: slideIn 0.5s ease-in-out;
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="sidebar w-64 h-full text-white flex flex-col">
+        <div class="p-5 border-b border-blue-700">
+            <h1 class="text-xl font-bold">Container Depot</h1>
+            <p class="text-sm text-blue-200">Line Operator Portal</p>
+        </div>
+        
+        <nav class="flex-grow py-4">
+            <div class="px-4 py-2 text-xs text-blue-300 uppercase tracking-wider">Main</div>
+            <a href="#" class="nav-item active flex items-center px-6 py-3 text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                </svg>
+                Dashboard
+            </a>
+            <a href="#" id="preinfoNav" class="nav-item flex items-center px-6 py-3 text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                </svg>
+                Container Preinfo
+            </a>
+            <a href="#" id="ordersNav" class="nav-item flex items-center px-6 py-3 text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+                </svg>
+                Expedition Orders
+            </a>
+            <a href="#" class="nav-item flex items-center px-6 py-3 text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+                Reports
+            </a>
+            
+            <div class="px-4 py-2 mt-6 text-xs text-blue-300 uppercase tracking-wider">Account</div>
+            <a href="#" class="nav-item flex items-center px-6 py-3 text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+                Settings
+            </a>
+        </nav>
+        
+        <div class="p-4 border-t border-blue-700">
+            <div class="flex items-center">
+                <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
+                    LO
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm font-medium">Maersk Line</p>
+                    <p class="text-xs text-blue-300">Line Operator</p>
+                </div>
+                <button class="ml-auto text-white">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="content-area flex-1 overflow-y-auto">
+        <!-- Top Navigation -->
+        <header class="bg-white shadow-sm">
+            <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center">
+                    <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button class="text-gray-500 hover:text-gray-700">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                        </svg>
+                    </button>
+                    <button class="text-gray-500 hover:text-gray-700">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Dashboard Content -->
+        <div class="p-6">
+            <!-- Dashboard Overview -->
+            <div id="dashboardContent" class="tab-content active">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    <div class="card bg-white rounded-lg shadow p-6">
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full bg-blue-100 text-blue-600">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                                </svg>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-semibold text-gray-700">Active Containers</h3>
+                                <p class="text-3xl font-bold text-gray-900">42</p>
+                                <p class="text-sm text-green-600">+3 since last week</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="card bg-white rounded-lg shadow p-6">
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full bg-green-100 text-green-600">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-semibold text-gray-700">Preinfo Sent</h3>
+                                <p class="text-3xl font-bold text-gray-900">18</p>
+                                <p class="text-sm text-green-600">+5 since last week</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="card bg-white rounded-lg shadow p-6">
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full bg-orange-100 text-orange-600">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+                                </svg>
+                            </div>
+                            <div class="ml-4">
+                                <h3 class="text-lg font-semibold text-gray-700">Pending Orders</h3>
+                                <p class="text-3xl font-bold text-gray-900">7</p>
+                                <p class="text-sm text-orange-600">2 require attention</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="bg-white rounded-lg shadow">
+                        <div class="px-6 py-4 border-b border-gray-200">
+                            <h3 class="text-lg font-semibold text-gray-800">Recent Container Activity</h3>
+                        </div>
+                        <div class="p-6">
+                            <div class="overflow-x-auto">
+                                <table class="min-w-full divide-y divide-gray-200">
+                                    <thead>
+                                        <tr>
+                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Container</th>
+                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-gray-200">
+                                        <tr>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1234567</td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40HC</td>
+                                            <td class="px-4 py-3 whitespace-nowrap">
+                                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Received</span>
+                                            </td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU7654321</td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20DV</td>
+                                            <td class="px-4 py-3 whitespace-nowrap">
+                                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Preinfo</span>
+                                            </td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-14</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU2468135</td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40DV</td>
+                                            <td class="px-4 py-3 whitespace-nowrap">
+                                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800">Order</span>
+                                            </td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-13</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1357924</td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20RF</td>
+                                            <td class="px-4 py-3 whitespace-nowrap">
+                                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Expedited</span>
+                                            </td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-12</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-white rounded-lg shadow">
+                        <div class="px-6 py-4 border-b border-gray-200">
+                            <h3 class="text-lg font-semibold text-gray-800">Payment Status</h3>
+                        </div>
+                        <div class="p-6">
+                            <div class="overflow-x-auto">
+                                <table class="min-w-full divide-y divide-gray-200">
+                                    <thead>
+                                        <tr>
+                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice</th>
+                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-gray-200">
+                                        <tr>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0042</td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$1,250.00</td>
+                                            <td class="px-4 py-3 whitespace-nowrap">
+                                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Paid</span>
+                                            </td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-10</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0041</td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$875.50</td>
+                                            <td class="px-4 py-3 whitespace-nowrap">
+                                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
+                                            </td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0040</td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$2,100.00</td>
+                                            <td class="px-4 py-3 whitespace-nowrap">
+                                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Overdue</span>
+                                            </td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-05</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">INV-2023-0039</td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">$950.25</td>
+                                            <td class="px-4 py-3 whitespace-nowrap">
+                                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Paid</span>
+                                            </td>
+                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-05-28</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Container Preinfo Form -->
+            <div id="preinfoContent" class="tab-content">
+                <div class="bg-white rounded-lg shadow">
+                    <div class="px-6 py-4 border-b border-gray-200">
+                        <h3 class="text-lg font-semibold text-gray-800">Submit Container Preinfo</h3>
+                        <p class="text-sm text-gray-600 mt-1">Provide information about containers that will arrive at the depot</p>
+                    </div>
+                    <div class="p-6">
+                        <form id="preinfoForm" class="space-y-6">
+                            <div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
+                                    <input type="text" id="containerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                    <p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
+                                </div>
+                                
+                                <div>
+                                    <label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
+                                    <select id="containerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                        <option value="">Select container type</option>
+                                        <option value="20DV">20' Dry Van (20DV)</option>
+                                        <option value="40DV">40' Dry Van (40DV)</option>
+                                        <option value="40HC">40' High Cube (40HC)</option>
+                                        <option value="20RF">20' Reefer (20RF)</option>
+                                        <option value="40RF">40' Reefer (40RF)</option>
+                                        <option value="20OT">20' Open Top (20OT)</option>
+                                        <option value="40OT">40' Open Top (40OT)</option>
+                                        <option value="20FR">20' Flat Rack (20FR)</option>
+                                        <option value="40FR">40' Flat Rack (40FR)</option>
+                                    </select>
+                                </div>
+                            </div>
+                            
+                            <div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label for="estimatedArrival" class="block text-sm font-medium text-gray-700 mb-1">Estimated Arrival Date</label>
+                                    <input type="date" id="estimatedArrival" name="estimatedArrival" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                </div>
+                                
+                                <div>
+                                    <label for="vesselVoyage" class="block text-sm font-medium text-gray-700 mb-1">Vessel/Voyage</label>
+                                    <input type="text" id="vesselVoyage" name="vesselVoyage" placeholder="e.g. MAERSK SEVILLE / 123E" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                </div>
+                            </div>
+                            
+                            <div class="form-section">
+                                <label for="additionalInfo" class="block text-sm font-medium text-gray-700 mb-1">Additional Information</label>
+                                <textarea id="additionalInfo" name="additionalInfo" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
+                            </div>
+                            
+                            <div class="form-section flex items-center">
+                                <input type="checkbox" id="damageCheck" name="damageCheck" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                                <label for="damageCheck" class="ml-2 block text-sm text-gray-700">Container has visible damage</label>
+                            </div>
+                            
+                            <div id="damageDetails" class="form-section hidden">
+                                <label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>
+                                <textarea id="damageDescription" name="damageDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe the damage in detail"></textarea>
+                            </div>
+                            
+                            <div class="form-section flex justify-end space-x-3">
+                                <button type="button" id="addMoreContainer" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500">
+                                    Add Another Container
+                                </button>
+                                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    Submit Preinfo
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                
+                <div class="mt-6 bg-white rounded-lg shadow">
+                    <div class="px-6 py-4 border-b border-gray-200">
+                        <h3 class="text-lg font-semibold text-gray-800">Recent Preinfo Submissions</h3>
+                    </div>
+                    <div class="p-6">
+                        <div class="overflow-x-auto">
+                            <table class="min-w-full divide-y divide-gray-200">
+                                <thead>
+                                    <tr>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Container</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Est. Arrival</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-gray-200">
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU7654321</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20DV</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-18</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">
+                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Pending</span>
+                                        </td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
+                                            <button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
+                                            <button class="text-red-600 hover:text-red-800">Cancel</button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU9876543</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40HC</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-17</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">
+                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Received</span>
+                                        </td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
+                                            <button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1122334</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20RF</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-16</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">
+                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Delayed</span>
+                                        </td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
+                                            <button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
+                                            <button class="text-red-600 hover:text-red-800">Cancel</button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Expedition Orders Form -->
+            <div id="ordersContent" class="tab-content">
+                <div class="bg-white rounded-lg shadow">
+                    <div class="px-6 py-4 border-b border-gray-200">
+                        <h3 class="text-lg font-semibold text-gray-800">Create Expedition Order</h3>
+                        <p class="text-sm text-gray-600 mt-1">Request containers to be expedited from the depot</p>
+                    </div>
+                    <div class="p-6">
+                        <form id="orderForm" class="space-y-6">
+                            <div class="form-section">
+                                <label for="orderType" class="block text-sm font-medium text-gray-700 mb-1">Order Type</label>
+                                <div class="flex space-x-4">
+                                    <div class="flex items-center">
+                                        <input type="radio" id="specificContainer" name="orderType" value="specific" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
+                                        <label for="specificContainer" class="ml-2 block text-sm text-gray-700">Specific Container</label>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <input type="radio" id="anyContainer" name="orderType" value="any" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
+                                        <label for="anyContainer" class="ml-2 block text-sm text-gray-700">Any Available Container</label>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div id="specificContainerFields" class="form-section">
+                                <label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
+                                <input type="text" id="orderContainerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                <p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
+                            </div>
+                            
+                            <div id="anyContainerFields" class="form-section hidden grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
+                                    <select id="orderContainerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                        <option value="">Select container type</option>
+                                        <option value="20DV">20' Dry Van (20DV)</option>
+                                        <option value="40DV">40' Dry Van (40DV)</option>
+                                        <option value="40HC">40' High Cube (40HC)</option>
+                                        <option value="20RF">20' Reefer (20RF)</option>
+                                        <option value="40RF">40' Reefer (40RF)</option>
+                                        <option value="20OT">20' Open Top (20OT)</option>
+                                        <option value="40OT">40' Open Top (40OT)</option>
+                                        <option value="20FR">20' Flat Rack (20FR)</option>
+                                        <option value="40FR">40' Flat Rack (40FR)</option>
+                                    </select>
+                                </div>
+                                
+                                <div>
+                                    <label for="containerCondition" class="block text-sm font-medium text-gray-700 mb-1">Container Condition</label>
+                                    <select id="containerCondition" name="containerCondition" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                        <option value="any">Any Condition</option>
+                                        <option value="new">New / Like New</option>
+                                        <option value="good">Good Condition</option>
+                                        <option value="acceptable">Acceptable</option>
+                                    </select>
+                                </div>
+                            </div>
+                            
+                            <div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label for="pickupDate" class="block text-sm font-medium text-gray-700 mb-1">Pickup Date</label>
+                                    <input type="date" id="pickupDate" name="pickupDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                </div>
+                                
+                                <div>
+                                    <label for="transportCompany" class="block text-sm font-medium text-gray-700 mb-1">Transport Company</label>
+                                    <input type="text" id="transportCompany" name="transportCompany" placeholder="e.g. ABC Trucking" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
+                                </div>
+                            </div>
+                            
+                            <div class="form-section">
+                                <label for="driverInfo" class="block text-sm font-medium text-gray-700 mb-1">Driver Information</label>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <input type="text" id="driverName" name="driverName" placeholder="Driver Name" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    <input type="text" id="driverPhone" name="driverPhone" placeholder="Driver Phone" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                </div>
+                            </div>
+                            
+                            <div class="form-section">
+                                <label for="orderNotes" class="block text-sm font-medium text-gray-700 mb-1">Special Instructions</label>
+                                <textarea id="orderNotes" name="orderNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
+                            </div>
+                            
+                            <div class="form-section flex justify-end">
+                                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    Submit Order
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                
+                <div class="mt-6 bg-white rounded-lg shadow">
+                    <div class="px-6 py-4 border-b border-gray-200">
+                        <h3 class="text-lg font-semibold text-gray-800">Active Expedition Orders</h3>
+                    </div>
+                    <div class="p-6">
+                        <div class="overflow-x-auto">
+                            <table class="min-w-full divide-y divide-gray-200">
+                                <thead>
+                                    <tr>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Container</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pickup Date</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-gray-200">
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0015</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">
+                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Approved</span>
+                                        </td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
+                                            <button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
+                                            <button class="text-red-600 hover:text-red-800">Cancel</button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 40HC</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-19</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">
+                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
+                                        </td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
+                                            <button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
+                                            <button class="text-red-600 hover:text-red-800">Cancel</button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0013</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU1357924</td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</td>
+                                        <td class="px-4 py-3 whitespace-nowrap">
+                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
+                                        </td>
+                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
+                                            <button class="text-blue-600 hover:text-blue-800">View</button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Tab Navigation
+        const dashboardContent = document.getElementById('dashboardContent');
+        const preinfoContent = document.getElementById('preinfoContent');
+        const ordersContent = document.getElementById('ordersContent');
+        
+        const preinfoNav = document.getElementById('preinfoNav');
+        const ordersNav = document.getElementById('ordersNav');
+        
+        preinfoNav.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            // Update content visibility
+            dashboardContent.classList.remove('active');
+            preinfoContent.classList.add('active');
+            ordersContent.classList.remove('active');
+            
+            // Update navigation styling
+            document.querySelector('.nav-item.active').classList.remove('active');
+            preinfoNav.classList.add('active');
+            
+            // Update header title
+            document.querySelector('header h2').textContent = 'Container Preinfo';
+        });
+        
+        ordersNav.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            // Update content visibility
+            dashboardContent.classList.remove('active');
+            preinfoContent.classList.remove('active');
+            ordersContent.classList.add('active');
+            
+            // Update navigation styling
+            document.querySelector('.nav-item.active').classList.remove('active');
+            ordersNav.classList.add('active');
+            
+            // Update header title
+            document.querySelector('header h2').textContent = 'Expedition Orders';
+        });
+        
+        // Damage checkbox toggle
+        const damageCheck = document.getElementById('damageCheck');
+        const damageDetails = document.getElementById('damageDetails');
+        
+        damageCheck.addEventListener('change', function() {
+            if (this.checked) {
+                damageDetails.classList.remove('hidden');
+            } else {
+                damageDetails.classList.add('hidden');
+            }
+        });
+        
+        // Order type toggle
+        const specificContainer = document.getElementById('specificContainer');
+        const anyContainer = document.getElementById('anyContainer');
+        const specificContainerFields = document.getElementById('specificContainerFields');
+        const anyContainerFields = document.getElementById('anyContainerFields');
+        
+        specificContainer.addEventListener('change', function() {
+            if (this.checked) {
+                specificContainerFields.classList.remove('hidden');
+                anyContainerFields.classList.add('hidden');
+            }
+        });
+        
+        anyContainer.addEventListener('change', function() {
+            if (this.checked) {
+                specificContainerFields.classList.add('hidden');
+                anyContainerFields.classList.remove('hidden');
+            }
+        });
+        
+        // Form submissions
+        document.getElementById('preinfoForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // In a real app, this would send data to the server
+            alert('Preinfo submitted successfully!');
+            this.reset();
+        });
+        
+        document.getElementById('orderForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            // In a real app, this would send data to the server
+            alert('Expedition order submitted successfully!');
+            this.reset();
+        });
+        
+        // Add more container button
+        document.getElementById('addMoreContainer').addEventListener('click', function() {
+            alert('In a real app, this would add fields for another container');
+        });
+    </script>
+<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'947f86ac452d3130',t:'MTc0ODYyMTY4Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
+</html>
diff --git a/templates/landing-page.html b/templates/landing-page.html
new file mode 100644
index 0000000..c243775
--- /dev/null
+++ b/templates/landing-page.html
@@ -0,0 +1,150 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>K-DepoT | Kikimor EOOD</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+    }
+header {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem 2rem;
+}
+    header h1 {
+      margin: 0;
+    }
+    section.hero {
+      background: url('{% static "images/depot.jpg" %}') center/cover no-repeat;
+      height: 400px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      text-shadow: 2px 2px 5px black;
+    }
+    .content {
+      padding: 2rem;
+      max-width: 1000px;
+      margin: auto;
+    }
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 1rem;
+    }
+    .gallery img {
+      width: 100%;
+      height: auto;
+      border-radius: 8px;
+    }
+    .map {
+      margin: 2rem 0;
+      text-align: center;
+    }
+    footer {
+      background-color: #2d3436;
+      color: white;
+      text-align: center;
+      padding: 1rem;
+    }
+    #map {
+        height: 400px;
+        width: 100%;
+        border: 1px solid #ccc;
+        margin: 20px 0;
+    }
+.header-content {
+    text-align: center;
+}
+
+.login-link {
+    position: absolute;
+    right: 2rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: white;
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    border: 1px solid white;
+    border-radius: 4px;
+}
+
+.login-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+  </style>
+</head>
+
+<body>
+
+<header>
+    <div class="header-content">
+        <h1>K-DepoT</h1>
+        <p>Operated by Kikimor EOOD</p>
+    </div>
+    <a href="{% url 'login' %}" class="login-link">Login</a>
+</header>
+
+  <section class="hero">
+    <h2>Efficient, Secure & Reliable Container Solutions</h2>
+  </section>
+
+  <div class="content">
+    <h2>About Us</h2>
+    <p>K-DepoT is your trusted partner for fast, efficient, and secure container depot services. Located in the port city of Varna, we specialize in container receiving, storage, and dispatching. At Kikimor EOOD, we combine modern logistics with reliable service to keep your cargo moving without delays.</p>
+
+    <h2>Gallery</h2>
+    <div class="gallery">
+        <img src="{% static 'images/depot.jpg' %}" alt="K-DepoT yard">
+        <img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be" alt="Container operations">
+        <img src="https://images.unsplash.com/photo-1604668915915-43e6227f021f" alt="Logistics and transport">
+    </div>
+    <h2>Contact Us</h2>
+    <p><strong>Address:</strong> Morska sirena str. 39, Varna, Bulgaria</p>
+    <p><strong>Phone:</strong> +359 88 123 4567</p>
+    <p><strong>Email:</strong> info@k-depot.bg</p>
+
+    <div class="map">
+        <div id="map"></div>
+    </div>
+  </div>
+
+  <footer>
+    &copy; 2025 Kikimor EOOD | K-DepoT - All rights reserved.
+  </footer>
+
+    <script>
+        function initMap() {
+            const map = new google.maps.Map(document.getElementById("map"), {
+                center: { lat: 43.2121, lng: 27.9204 },
+                zoom: 15
+            });
+
+            new google.maps.Marker({
+                position: { lat: 43.2121, lng: 27.9204 },
+                map: map,
+                title: "K-DepoT - Kikimor EOOD"
+            });
+        }
+    </script>
+
+    <script
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBboGDgiCrc9yp2uSLmVcfVVIVK-kOQqc4&callback=initMap"
+        async
+        defer>
+    </script>
+
+</body>
+</html>
+
+
diff --git a/users/forms.py b/users/forms.py
new file mode 100644
index 0000000..bc46453
--- /dev/null
+++ b/users/forms.py
@@ -0,0 +1,5 @@
+from django.forms import forms
+
+
+class LoginForm(forms.Form):
+    field_order = ['username', 'password']
\ No newline at end of file
diff --git a/users/urls.py b/users/urls.py
new file mode 100644
index 0000000..4d2fe64
--- /dev/null
+++ b/users/urls.py
@@ -0,0 +1,7 @@
+from django.urls import path
+
+from users import views
+
+urlpatterns = [
+    path('login/', views.LoginView.as_view(), name='login'),
+]
\ No newline at end of file