diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
deleted file mode 100644
index 0f85145..0000000
--- a/.github/workflows/ci.yml
+++ /dev/null
@@ -1,44 +0,0 @@
-name: CI - Build and Test
-
-on:
-  pull_request:
-
-jobs:
-  build_and_test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-          cache-dependency-path: frontend/package-lock.json
-
-      - name: Install Frontend Dependencies
-        working-directory: ./frontend
-        run: npm ci
-
-      - name: Build Frontend (for verification)
-        working-directory: ./frontend
-        run: npm run build
-
-      - name: Set up Rust
-        uses: actions-rs/toolchain@v1
-        with:
-          toolchain: stable
-          profile: minimal
-          override: true
-      
-      - name: Set up Rust cache
-        uses: Swatinem/rust-cache@v2
-
-      - name: Check Backend code
-        working-directory: ./backend
-        run: cargo check --verbose
-
-      - name: Build Backend (for verification)
-        working-directory: ./backend
-        run: cargo build --verbose
diff --git a/frontend/app/[locale]/contact/page.module.css b/frontend/app/[locale]/contact/page.module.css
index ee9b8e6..8596e1b 100644
--- a/frontend/app/[locale]/contact/page.module.css
+++ b/frontend/app/[locale]/contact/page.module.css
@@ -1,168 +1,119 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-family: var(--font-geist-sans);
+.container {
+  max-width: 960px;
+  margin: 40px auto;
+  padding: 20px;
+  text-align: center;
 }
 
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
+.title {
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+  color: var(--foreground);
 }
 
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
+.subtitle {
+  font-size: 1.2rem;
+  color: var(--muted-foreground);
+  margin-bottom: 3rem;
 }
 
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  text-align: left;
 }
 
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s,
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
+.card {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
+  gap: 1.5rem;
+  background-color: var(--card);
+  padding: 1.5rem;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  text-decoration: none;
+  color: inherit;
 }
 
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 }
 
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
+.dark .card:hover {
+  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.08);
 }
 
-.footer {
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
+.iconWrapper {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  /* Для светлой темы фон остается прежним */
+  background-color: var(--muted);
+  border-radius: 50%;
+  transition: background-color 0.3s ease-in-out;
+}
+
+/* 
+  НОВЫЙ БЛОК: Правило для фона иконки в темной теме.
+  Вместо светло-серого мы используем var(--secondary), 
+  который является темно-серым и лучше вписывается в фон карточки.
+*/
+.dark .iconWrapper {
+  background-color: var(--secondary);
+}
+
+.icon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  /* Добавляем плавный переход для фильтра и прозрачности */
+  transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+/* 
+  ИЗМЕНЕННЫЙ БЛОК: Улучшенная адаптация иконки.
+  Мы по-прежнему инвертируем ее, чтобы сделать белой,
+  но добавляем прозрачность. Это убирает резкость и делает
+  иконку похожей по яркости на основной текст.
+*/
+.dark .invertOnDark {
+  /* filter: brightness(0);
+  opacity: 1;  */
+  color: white;
+  background-color: white;
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
 }
 
-.footer img {
-  flex-shrink: 0;
+.cardTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--foreground);
+  margin: 0;
 }
 
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
+.cardHandle {
+  font-size: 1rem;
+  color: var(--muted-foreground);
+  margin: 0;
+  word-break: break-all;
 }
 
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
+@media (max-width: 640px) {
+  .title {
+    font-size: 2rem;
   }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
+  .grid {
+    grid-template-columns: 1fr;
   }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}
+}
\ No newline at end of file
diff --git a/frontend/app/[locale]/contact/page.tsx b/frontend/app/[locale]/contact/page.tsx
index 5ed795d..cbe76d3 100644
--- a/frontend/app/[locale]/contact/page.tsx
+++ b/frontend/app/[locale]/contact/page.tsx
@@ -1,9 +1,75 @@
-import styles from "./page.module.css";
+'use client';
+
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import styles from './page.module.css';
+
+const contacts = [
+  {
+    name: 'Telegram',
+    handle: '@diametrfq',
+    url: 'https://t.me/diametrfq',
+    iconUrl: '/logo/telegram.svg',
+  },
+  {
+    name: 'LinkedIn',
+    handle: 'Dmitry Khokhlov',
+    url: 'https://www.linkedin.com/in/diametrfq',
+    iconUrl: '/logo/linkedin.svg',
+  },
+  {
+    name: 'GitHub',
+    handle: 'DiametrFQ',
+    url: 'https://github.com/DiametrFQ',
+    iconUrl: 'https://cdn.worldvectorlogo.com/logos/github-icon-1.svg',
+    themeBehavior: 'invertOnDark',
+  },
+  {
+    name: 'Email',
+    handle: 'hohlov.03@inbox.ru',
+    url: 'mailto:hohlov.03@inbox.ru',
+    iconUrl: '/logo/email.png',
+  },
+  {
+    name: 'Steam',
+    handle: 'diametrfq',
+    url: 'https://steamcommunity.com/id/diametrfq/',
+    iconUrl: '/logo/steam.png',
+  },
+];
+
+export default function Contact() {
+  const t = useTranslations('ContactPage');
 
-export default function Portfolio() {
   return (
-    <div className={styles.page}>
-      contact
+    <div className={styles.container}>
+      <h1 className={styles.title}>{t('title')}</h1>
+      <p className={styles.subtitle}>{t('subtitle')}</p>
+      <div className={styles.grid}>
+        {contacts.map((contact) => (
+          <a
+            key={contact.name}
+            href={contact.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.card}
+          >
+            <div className={styles.iconWrapper}>
+              <Image
+                src={contact.iconUrl}
+                alt={`${contact.name} logo`}
+                width={48}
+                height={48}
+                className={`${styles.icon} ${contact.themeBehavior ? styles[contact.themeBehavior] : ''}`}
+              />
+            </div>
+            <div className={styles.cardContent}>
+              <h2 className={styles.cardTitle}>{contact.name}</h2>
+              <p className={styles.cardHandle}>{contact.handle}</p>
+            </div>
+          </a>
+        ))}
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/app/api/spotify-stream/route.ts b/frontend/app/api/spotify-stream/route.ts
index 0f685fa..05e00b4 100644
--- a/frontend/app/api/spotify-stream/route.ts
+++ b/frontend/app/api/spotify-stream/route.ts
@@ -1,60 +1,40 @@
 import { NextRequest } from 'next/server';
-import http from 'http';
 
 export const dynamic = 'force-dynamic';
 
 export async function GET(request: NextRequest) {
-  const backendUrl = process.env.RUST_BACKEND_URL || 'http://localhost:8080';
-  
-  const url = new URL(backendUrl);
-  const options = {
-    hostname: url.hostname,
-    port: url.port,
-    path: '/api/spotify/now_playing_stream',
-    method: 'GET',
-    headers: {
-      'Accept': 'text/event-stream',
-      'Connection': 'keep-alive',
-    },
-  };
+  const backendUrl = (process.env.RUST_BACKEND_URL || 'http://localhost:8080') + '/api/spotify/now_playing_stream';
 
-  const stream = new ReadableStream({
-    start(controller) {
-      const backendRequest = http.get(options, (backendResponse) => {
-        backendResponse.on('data', (chunk) => {
-          controller.enqueue(chunk);
-        });
+  try {
+    const backendResponse = await fetch(backendUrl, {
+      signal: request.signal,
+      headers: {
+        'Accept': 'text/event-stream',
+      },
+    });
 
-        backendResponse.on('end', () => {
-          console.log('Backend stream ended.');
-          controller.close();
-        });
-
-        backendResponse.on('error', (err) => {
-            console.error('Error in backend response stream:', err);
-            controller.error(err);
-        });
+    if (!backendResponse.ok) {
+      return new Response(backendResponse.body, {
+        status: backendResponse.status,
+        statusText: backendResponse.statusText,
       });
+    }
 
-      backendRequest.on('error', (err) => {
-        console.error('Error making request to backend:', err);
-        controller.error(err);
-      });
-      
-      request.signal.addEventListener('abort', () => {
-        console.log('Client aborted request. Destroying backend request.');
-        backendRequest.destroy();
-        controller.close();
-      });
-    },
-  });
+    return new Response(backendResponse.body, {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        'Connection': 'keep-alive',
+      },
+    });
 
-  return new Response(stream, {
-    status: 200,
-    headers: {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      'Connection': 'keep-alive',
-    },
-  });
+  } catch (error) {
+    if (error instanceof Error && error.name === 'AbortError') {
+      console.log('Stream request aborted by client.');
+      return new Response('Stream aborted', { status: 499 });
+    }
+    console.error('Error proxying spotify stream:', error);
+    return new Response('Failed to proxy stream', { status: 500 });
+  }
 }
\ No newline at end of file
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index d8aa3e6..fa3ffe9 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -15,5 +15,9 @@
         "telegram":{
             "title": "Telegram"
         }
+    },
+    "ContactPage": {
+      "title": "Get in Touch",
+      "subtitle": "Here is where you can find me."
     }
 }
\ No newline at end of file
diff --git a/frontend/locales/ru.json b/frontend/locales/ru.json
index b346b82..756392c 100644
--- a/frontend/locales/ru.json
+++ b/frontend/locales/ru.json
@@ -15,5 +15,9 @@
         "telegram":{
             "title": "Telegram"
         }
+    },
+    "ContactPage": {
+      "title": "Свяжитесь со мной",
+      "subtitle": "Вот лучшие способы для связи."
     }
 }
\ No newline at end of file
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index 81e46fe..d2e437d 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -41,6 +41,22 @@ const nextConfig: NextConfig = {
       {
         protocol: 'https',
         hostname: 'i.scdn.co',
+      },
+            {
+        protocol: 'https',
+        hostname: 'cdn-icons-png.flaticon.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'upload.wikimedia.org',
+      },
+      {
+        protocol: 'https',
+        hostname: 'static-00.iconduck.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'cdn.worldvectorlogo.com',
       },
     ],
   },
diff --git a/frontend/public/logo/email.png b/frontend/public/logo/email.png
new file mode 100644
index 0000000..81fc0b4
Binary files /dev/null and b/frontend/public/logo/email.png differ
diff --git a/frontend/public/logo/github.png b/frontend/public/logo/github.png
new file mode 100644
index 0000000..df53e88
Binary files /dev/null and b/frontend/public/logo/github.png differ
diff --git a/frontend/public/logo/linkedin.svg b/frontend/public/logo/linkedin.svg
new file mode 100644
index 0000000..001bdcd
--- /dev/null
+++ b/frontend/public/logo/linkedin.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 382 382" xml:space="preserve">
+<path style="fill:#0077B7;" d="M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889
+	C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056
+	H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806
+	c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1
+	s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73
+	c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079
+	c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426
+	c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472
+	L341.91,330.654L341.91,330.654z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/public/logo/steam.png b/frontend/public/logo/steam.png
new file mode 100644
index 0000000..12094a5
Binary files /dev/null and b/frontend/public/logo/steam.png differ
diff --git a/frontend/public/logo/telegram.svg b/frontend/public/logo/telegram.svg
new file mode 100644
index 0000000..6f88d42
--- /dev/null
+++ b/frontend/public/logo/telegram.svg
@@ -0,0 +1 @@
+<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240"><defs><linearGradient id="linear-gradient" x1="120" y1="240" x2="120" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1d93d2"/><stop offset="1" stop-color="#38b0e3"/></linearGradient></defs><title>Telegram_logo</title><circle cx="120" cy="120" r="120" fill="url(#linear-gradient)"/><path d="M81.229,128.772l14.237,39.406s1.78,3.687,3.686,3.687,30.255-29.492,30.255-29.492l31.525-60.89L81.737,118.6Z" fill="#c8daea"/><path d="M100.106,138.878l-2.733,29.046s-1.144,8.9,7.754,0,17.415-15.763,17.415-15.763" fill="#a9c6d8"/><path d="M81.486,130.178,52.2,120.636s-3.5-1.42-2.373-4.64c.232-.664.7-1.229,2.1-2.2,6.489-4.523,120.106-45.36,120.106-45.36s3.208-1.081,5.1-.362a2.766,2.766,0,0,1,1.885,2.055,9.357,9.357,0,0,1,.254,2.585c-.009.752-.1,1.449-.169,2.542-.692,11.165-21.4,94.493-21.4,94.493s-1.239,4.876-5.678,5.043A8.13,8.13,0,0,1,146.1,172.5c-8.711-7.493-38.819-27.727-45.472-32.177a1.27,1.27,0,0,1-.546-.9c-.093-.469.417-1.05.417-1.05s52.426-46.6,53.821-51.492c.108-.379-.3-.566-.848-.4-3.482,1.281-63.844,39.4-70.506,43.607A3.21,3.21,0,0,1,81.486,130.178Z" fill="#fff"/></svg>
\ No newline at end of file