diff --git a/package.json b/package.json
index fda3351..9bf0eaf 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
+    "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
diff --git a/src/App.tsx b/src/App.tsx
index 1880d7c..50150b3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,13 +2,14 @@ import React from 'react';
 
 import Layout from './components/Layout';
 import GlobalStyles from './styles/GlobalStyles';
+import { ThemeProvider } from './contexts/ThemeContext';
 
 function App() {
   return (
-    <>
+    <ThemeProvider>
       <Layout />
       <GlobalStyles />
-    </>
+    </ThemeProvider>
   );
 }
 
diff --git a/src/components/Comments/index.tsx b/src/components/Comments/index.tsx
new file mode 100644
index 0000000..f6d375c
--- /dev/null
+++ b/src/components/Comments/index.tsx
@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import {
+  Container,
+  CommentItem,
+  Avatar,
+  Content,
+  Header,
+  Author,
+  Time,
+  Text,
+  CommentForm,
+  TextArea,
+  SubmitButton,
+  ShowCommentsButton,
+  CommentsCount,
+} from './styles';
+
+interface Comment {
+  id: string;
+  author: string;
+  avatar: string;
+  text: string;
+  time: string;
+}
+
+interface CommentsProps {
+  tweetId: string;
+  commentsCount: number;
+  onCommentAdd: (tweetId: string, comment: Comment) => void;
+  comments: Comment[];
+  isExpanded: boolean;
+  onToggleComments: () => void;
+}
+
+const Comments: React.FC<CommentsProps> = ({
+  tweetId,
+  commentsCount,
+  onCommentAdd,
+  comments,
+  isExpanded,
+  onToggleComments,
+}) => {
+  const [commentText, setCommentText] = useState('');
+  const [showForm, setShowForm] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (commentText.trim()) {
+      const newComment: Comment = {
+        id: Date.now().toString(),
+        author: 'Elton Lazzarin',
+        avatar: 'https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4',
+        text: commentText.trim(),
+        time: 'now',
+      };
+      
+      onCommentAdd(tweetId, newComment);
+      setCommentText('');
+      setShowForm(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <Container>
+      {commentsCount > 0 && (
+        <ShowCommentsButton onClick={onToggleComments}>
+          <CommentsCount>
+            {isExpanded ? 'Hide' : 'Show'} {commentsCount} comment{commentsCount !== 1 ? 's' : ''}
+          </CommentsCount>
+        </ShowCommentsButton>
+      )}
+
+      {isExpanded && (
+        <>
+          {comments.map((comment) => (
+            <CommentItem key={comment.id}>
+              <Avatar>
+                <img src={comment.avatar} alt={comment.author} />
+              </Avatar>
+              <Content>
+                <Header>
+                  <Author>{comment.author}</Author>
+                  <Time>{comment.time}</Time>
+                </Header>
+                <Text>{comment.text}</Text>
+              </Content>
+            </CommentItem>
+          ))}
+        </>
+      )}
+
+      {showForm ? (
+        <CommentForm onSubmit={handleSubmit}>
+          <Avatar>
+            <img
+              src="https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4"
+              alt="Your avatar"
+            />
+          </Avatar>
+          <div style={{ flex: 1 }}>
+            <TextArea
+              value={commentText}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setCommentText(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Tweet your reply"
+              autoFocus
+            />
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '8px' }}>
+              <button
+                type="button"
+                onClick={() => {
+                  setShowForm(false);
+                  setCommentText('');
+                }}
+                style={{
+                  background: 'transparent',
+                  border: '1px solid var(--outline)',
+                  color: 'var(--white)',
+                  padding: '6px 16px',
+                  borderRadius: '20px',
+                  cursor: 'pointer',
+                }}
+              >
+                Cancel
+              </button>
+              <SubmitButton type="submit" disabled={!commentText.trim()}>
+                Reply
+              </SubmitButton>
+            </div>
+          </div>
+        </CommentForm>
+      ) : (
+        <ShowCommentsButton onClick={() => setShowForm(true)}>
+          <CommentsCount>Add a comment...</CommentsCount>
+        </ShowCommentsButton>
+      )}
+    </Container>
+  );
+};
+
+export default Comments;
\ No newline at end of file
diff --git a/src/components/Comments/styles.ts b/src/components/Comments/styles.ts
new file mode 100644
index 0000000..c309554
--- /dev/null
+++ b/src/components/Comments/styles.ts
@@ -0,0 +1,127 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-top: 8px;
+`;
+
+export const ShowCommentsButton = styled.button`
+  background: transparent;
+  border: none;
+  color: var(--gray);
+  cursor: pointer;
+  padding: 8px 0;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    color: var(--twitter);
+  }
+`;
+
+export const CommentsCount = styled.span`
+  font-size: 13px;
+`;
+
+export const CommentItem = styled.div`
+  display: flex;
+  padding: 12px 0;
+  border-top: 1px solid var(--outline);
+
+  &:first-child {
+    border-top: none;
+  }
+`;
+
+export const Avatar = styled.div`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 12px;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+export const Content = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+`;
+
+export const Author = styled.span`
+  font-weight: bold;
+  font-size: 14px;
+  color: var(--white);
+`;
+
+export const Time = styled.span`
+  font-size: 13px;
+  color: var(--gray);
+`;
+
+export const Text = styled.p`
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--white);
+`;
+
+export const CommentForm = styled.form`
+  display: flex;
+  padding: 12px 0;
+  border-top: 1px solid var(--outline);
+  margin-top: 8px;
+`;
+
+export const TextArea = styled.textarea`
+  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  color: var(--white);
+  resize: none;
+  min-height: 40px;
+  font-family: inherit;
+  line-height: 1.4;
+
+  &::placeholder {
+    color: var(--gray);
+  }
+`;
+
+export const SubmitButton = styled.button`
+  background-color: var(--twitter);
+  color: white;
+  border: none;
+  border-radius: 20px;
+  padding: 6px 16px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 13px;
+
+  &:hover:not(:disabled) {
+    background-color: #1a8cd8;
+  }
+
+  &:disabled {
+    background-color: rgba(29, 161, 242, 0.5);
+    cursor: not-allowed;
+  }
+`;
\ No newline at end of file
diff --git a/src/components/Feed/index.tsx b/src/components/Feed/index.tsx
index 33acb6e..8bfe071 100644
--- a/src/components/Feed/index.tsx
+++ b/src/components/Feed/index.tsx
@@ -1,16 +1,87 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import Tweet from '../Tweet';
+import TweetComposer from '../TweetComposer';
+import SearchBar from '../SearchBar';
+import SearchResults from '../SearchResults';
+import data from '../../data.json';
+import { TweetType } from '../../types';
 
-import { Container, Tab, Tweets } from './styles';
+import { Container, Tab, Tweets, SearchSection } from './styles';
 
 const Feed: React.FC = () => {
+  const [tweets, setTweets] = useState<TweetType[]>(
+    data.map((tweet, index) => ({ 
+      ...tweet, 
+      id: `existing-${index}`, // Добавляем уникальные ID для существующих твитов
+      comments: [] 
+    }))
+  );
+  
+  const [isSearchMode, setIsSearchMode] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleNewTweet = (newTweetData: { text: string; image?: string }) => {
+    const newTweet: TweetType = {
+      id: Date.now().toString(),
+      avatar: "https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4",
+      author: "Elton Lazzarin",
+      twitteruser: "@elton_lazzarin",
+      posttime: "now",
+      posttext: newTweetData.text,
+      postimage: newTweetData.image,
+      commentscount: 0,
+      retweetscount: 0,
+      likecount: 0,
+      retweet: false,
+      comments: [],
+    };
+
+    setTweets(prevTweets => [newTweet, ...prevTweets]);
+  };
+
+  const handleUpdateTweet = (tweetId: string, updatedData: Partial<TweetType>) => {
+    setTweets(prevTweets =>
+      prevTweets.map(tweet =>
+        tweet.id === tweetId ? { ...tweet, ...updatedData } : tweet
+      )
+    );
+  };
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    setIsSearchMode(true);
+  };
+
+  const handleBackToFeed = () => {
+    setIsSearchMode(false);
+    setSearchQuery('');
+  };
+
+  // Если в режиме поиска, показываем результаты поиска
+  if (isSearchMode) {
+    return (
+      <SearchResults
+        searchQuery={searchQuery}
+        tweets={tweets}
+        onUpdateTweet={handleUpdateTweet}
+        onBackToFeed={handleBackToFeed}
+      />
+    );
+  }
+
   return (
     <Container>
-      <Tab>Tweets</Tab>
+      <Tab>Home</Tab>
+      
+      <SearchSection>
+        <SearchBar onSearch={handleSearch} />
+      </SearchSection>
+      
+      <TweetComposer onTweetSubmit={handleNewTweet} />
 
       <Tweets>
-        <Tweet />
+        <Tweet data={tweets} onUpdateTweet={handleUpdateTweet} />
       </Tweets>
     </Container>
   );
diff --git a/src/components/Feed/styles.ts b/src/components/Feed/styles.ts
index 0a92a44..4506287 100644
--- a/src/components/Feed/styles.ts
+++ b/src/components/Feed/styles.ts
@@ -24,6 +24,15 @@ export const Tab = styled.div`
   }
 `;
 
+export const SearchSection = styled.div`
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--primary);
+  position: sticky;
+  top: 53px;
+  z-index: 100;
+`;
+
 export const Tweets = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx
index 5bf5ce5..f71294f 100644
--- a/src/components/Main/index.tsx
+++ b/src/components/Main/index.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import ProfilePage from '../ProfilePage';
+import Feed from '../Feed';
 
 import {
   Container,
@@ -15,23 +16,41 @@ import {
 } from './styles';
 
 const Main: React.FC = () => {
+  const [currentView, setCurrentView] = useState<'home' | 'profile'>('home');
+
+  const renderContent = () => {
+    switch (currentView) {
+      case 'home':
+        return <Feed />;
+      case 'profile':
+        return <ProfilePage />;
+      default:
+        return <Feed />;
+    }
+  };
+
   return (
     <Container>
-      <Header>
-        <button>
-          <BackIcon />
-        </button>
+      {currentView === 'profile' && (
+        <Header>
+          <button onClick={() => setCurrentView('home')}>
+            <BackIcon />
+          </button>
 
-        <ProfileInfo>
-          <strong>Elton Lazzarin</strong>
-          <span>432 Tweets</span>
-        </ProfileInfo>
-      </Header>
+          <ProfileInfo>
+            <strong>Elton Lazzarin</strong>
+            <span>432 Tweets</span>
+          </ProfileInfo>
+        </Header>
+      )}
 
-      <ProfilePage />
+      {renderContent()}
 
       <BottomMenu>
-        <HomeIcon className="active" />
+        <HomeIcon 
+          className={currentView === 'home' ? 'active' : ''} 
+          onClick={() => setCurrentView('home')}
+        />
         <SearchIcon />
         <BellIcon />
         <EmailIcon />
diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx
index ed4ead8..0d49e1c 100644
--- a/src/components/MenuBar/index.tsx
+++ b/src/components/MenuBar/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Button from '../Button';
+import ThemeToggle from '../ThemeToggle';
 
 import {
   Container,
@@ -64,6 +65,8 @@ const MenuBar: React.FC = () => {
         <Button>
           <span>Tweet</span>
         </Button>
+
+        <ThemeToggle />
       </Topside>
 
       <Botside>
diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
new file mode 100644
index 0000000..67da6f1
--- /dev/null
+++ b/src/components/SearchBar/index.tsx
@@ -0,0 +1,123 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Container,
+  SearchContainer,
+  SearchIcon,
+  SearchInput,
+  ClearButton,
+  ClearIcon,
+  TrendingSection,
+  TrendingTitle,
+  TrendingItem,
+  TrendingHashtag,
+  TrendingCount,
+  ShowMoreButton,
+} from './styles';
+
+interface SearchBarProps {
+  onSearch: (query: string) => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  onSearch,
+  placeholder = "Search Twitter",
+  autoFocus = false,
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Трендовые хэштеги и темы
+  const trendingTopics = [
+    { hashtag: '#ReactJS', count: '125K Tweets' },
+    { hashtag: '#TypeScript', count: '85K Tweets' },
+    { hashtag: '#JavaScript', count: '450K Tweets' },
+    { hashtag: '#WebDevelopment', count: '75K Tweets' },
+    { hashtag: '#Programming', count: '200K Tweets' },
+    { hashtag: '#OpenSource', count: '95K Tweets' },
+    { hashtag: '#TechNews', count: '180K Tweets' },
+    { hashtag: '#AI', count: '320K Tweets' },
+  ];
+
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchQuery(value);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      onSearch(searchQuery.trim());
+    }
+  };
+
+  const handleClear = () => {
+    setSearchQuery('');
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  const handleTrendingClick = (hashtag: string) => {
+    setSearchQuery(hashtag);
+    onSearch(hashtag);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSubmit(e);
+    } else if (e.key === 'Escape') {
+      handleClear();
+      setIsFocused(false);
+    }
+  };
+
+  return (
+    <Container>
+      <SearchContainer isFocused={isFocused}>
+        <SearchIcon />
+        <SearchInput
+          ref={inputRef}
+          type="text"
+          placeholder={placeholder}
+          value={searchQuery}
+          onChange={handleInputChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          onKeyDown={handleKeyDown}
+        />
+        {searchQuery && (
+          <ClearButton onClick={handleClear} type="button">
+            <ClearIcon />
+          </ClearButton>
+        )}
+      </SearchContainer>
+
+      {isFocused && !searchQuery && (
+        <TrendingSection>
+          <TrendingTitle>Trending</TrendingTitle>
+          {trendingTopics.slice(0, 5).map((topic, index) => (
+            <TrendingItem
+              key={index}
+              onClick={() => handleTrendingClick(topic.hashtag)}
+            >
+              <TrendingHashtag>{topic.hashtag}</TrendingHashtag>
+              <TrendingCount>{topic.count}</TrendingCount>
+            </TrendingItem>
+          ))}
+          <ShowMoreButton>Show more</ShowMoreButton>
+        </TrendingSection>
+      )}
+    </Container>
+  );
+};
+
+export default SearchBar;
\ No newline at end of file
diff --git a/src/components/SearchBar/styles.ts b/src/components/SearchBar/styles.ts
new file mode 100644
index 0000000..a56ce25
--- /dev/null
+++ b/src/components/SearchBar/styles.ts
@@ -0,0 +1,131 @@
+import styled from 'styled-components';
+import { Search, X } from '@styled-icons/feather';
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const SearchContainer = styled.div<{ isFocused: boolean }>`
+  display: flex;
+  align-items: center;
+  background: var(--search);
+  border: 1px solid ${props => props.isFocused ? 'var(--twitter)' : 'transparent'};
+  border-radius: 25px;
+  padding: 12px 16px;
+  transition: all 0.2s;
+  position: relative;
+
+  &:hover {
+    border-color: var(--twitter);
+  }
+`;
+
+export const SearchIcon = styled(Search)`
+  width: 18px;
+  height: 18px;
+  color: var(--secondary-text);
+  margin-right: 12px;
+  flex-shrink: 0;
+`;
+
+export const SearchInput = styled.input`
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 15px;
+  color: var(--primary-text);
+  font-family: inherit;
+
+  &::placeholder {
+    color: var(--secondary-text);
+  }
+`;
+
+export const ClearButton = styled.button`
+  background: var(--twitter);
+  border: none;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin-left: 8px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: var(--twitter-dark-hover);
+  }
+`;
+
+export const ClearIcon = styled(X)`
+  width: 12px;
+  height: 12px;
+  color: white;
+`;
+
+export const TrendingSection = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--primary);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+  z-index: 1000;
+  margin-top: 8px;
+  overflow: hidden;
+`;
+
+export const TrendingTitle = styled.div`
+  padding: 16px 16px 8px;
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--primary-text);
+`;
+
+export const TrendingItem = styled.div`
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  border-bottom: 1px solid var(--border);
+
+  &:hover {
+    background: var(--hover);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+export const TrendingHashtag = styled.div`
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--primary-text);
+  margin-bottom: 2px;
+`;
+
+export const TrendingCount = styled.div`
+  font-size: 13px;
+  color: var(--secondary-text);
+`;
+
+export const ShowMoreButton = styled.button`
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 16px;
+  color: var(--twitter);
+  font-size: 15px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: var(--hover);
+  }
+`;
\ No newline at end of file
diff --git a/src/components/SearchResults/index.tsx b/src/components/SearchResults/index.tsx
new file mode 100644
index 0000000..c3e3d93
--- /dev/null
+++ b/src/components/SearchResults/index.tsx
@@ -0,0 +1,168 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import Tweet from '../Tweet';
+import { TweetType, Comment } from '../../types';
+import {
+  Container,
+  Header,
+  BackButton,
+  BackIcon,
+  SearchInfo,
+  ResultsCount,
+  FilterTabs,
+  FilterTab,
+  NoResults,
+  NoResultsIcon,
+  NoResultsText,
+} from './styles';
+
+interface SearchResultsProps {
+  searchQuery: string;
+  tweets: TweetType[];
+  onUpdateTweet: (tweetId: string, updatedData: Partial<TweetType>) => void;
+  onBackToFeed: () => void;
+}
+
+type FilterType = 'all' | 'hashtags' | 'mentions';
+
+const SearchResults: React.FC<SearchResultsProps> = ({
+  searchQuery,
+  tweets,
+  onUpdateTweet,
+  onBackToFeed,
+}) => {
+  const [activeFilter, setActiveFilter] = useState<FilterType>('all');
+
+  // Функция для поиска твитов
+  const filteredTweets = useMemo(() => {
+    if (!searchQuery.trim()) return [];
+
+    const query = searchQuery.toLowerCase().trim();
+    
+    return tweets.filter(tweet => {
+      // Конвертируем posttext в строку для поиска
+      const tweetText = typeof tweet.posttext === 'string' 
+        ? tweet.posttext.toLowerCase()
+        : Array.isArray(tweet.posttext)
+        ? tweet.posttext.join('').toLowerCase()
+        : tweet.posttext.toString().toLowerCase();
+        
+      const author = tweet.author.toLowerCase();
+      const username = tweet.twitteruser.toLowerCase();
+
+      switch (activeFilter) {
+        case 'hashtags':
+          // Поиск только по хэштегам
+          if (query.startsWith('#')) {
+            return tweetText.includes(query);
+          }
+          // Если запрос не начинается с #, ищем хэштеги содержащие запрос
+          const hashtagRegex = new RegExp(`#\\w*${query.replace('#', '')}\\w*`, 'gi');
+          return hashtagRegex.test(tweetText);
+
+        case 'mentions':
+          // Поиск только по упоминаниям
+          if (query.startsWith('@')) {
+            return tweetText.includes(query) || username.includes(query);
+          }
+          // Если запрос не начинается с @, ищем упоминания содержащие запрос
+          const mentionRegex = new RegExp(`@\\w*${query.replace('@', '')}\\w*`, 'gi');
+          return mentionRegex.test(tweetText) || author.includes(query);
+
+        case 'all':
+        default:
+          // Поиск по всему тексту, автору и упоминаниям
+          return (
+            tweetText.includes(query) ||
+            author.includes(query) ||
+            username.includes(query)
+          );
+      }
+    });
+  }, [tweets, searchQuery, activeFilter]);
+
+  // Функция для подсветки найденного текста
+  const highlightText = (text: string, query: string) => {
+    if (!query.trim()) return text;
+
+    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    const parts = text.split(regex);
+
+    return parts.map((part, index) => 
+      regex.test(part) ? (
+        <mark key={index} style={{ backgroundColor: '#1da1f2', color: 'white', padding: '0 2px' }}>
+          {part}
+        </mark>
+      ) : part
+    );
+  };
+
+  // Обновленные твиты с подсветкой
+  const highlightedTweets = useMemo(() => {
+    return filteredTweets.map(tweet => ({
+      ...tweet,
+      posttext: typeof tweet.posttext === 'string' 
+        ? highlightText(tweet.posttext, searchQuery)
+        : tweet.posttext, // Если уже JSX, оставляем как есть
+    }));
+  }, [filteredTweets, searchQuery]);
+
+  const getFilterLabel = (filter: FilterType) => {
+    switch (filter) {
+      case 'all': return `All (${filteredTweets.length})`;
+      case 'hashtags': return `Hashtags (${filteredTweets.length})`;
+      case 'mentions': return `People (${filteredTweets.length})`;
+      default: return '';
+    }
+  };
+
+  return (
+    <Container>
+      <Header>
+        <BackButton onClick={onBackToFeed}>
+          <BackIcon />
+        </BackButton>
+        <SearchInfo>
+          <strong>Search results</strong>
+          <ResultsCount>
+            {filteredTweets.length} results for "{searchQuery}"
+          </ResultsCount>
+        </SearchInfo>
+      </Header>
+
+      <FilterTabs>
+        <FilterTab
+          isActive={activeFilter === 'all'}
+          onClick={() => setActiveFilter('all')}
+        >
+          {getFilterLabel('all')}
+        </FilterTab>
+        <FilterTab
+          isActive={activeFilter === 'hashtags'}
+          onClick={() => setActiveFilter('hashtags')}
+        >
+          {getFilterLabel('hashtags')}
+        </FilterTab>
+        <FilterTab
+          isActive={activeFilter === 'mentions'}
+          onClick={() => setActiveFilter('mentions')}
+        >
+          {getFilterLabel('mentions')}
+        </FilterTab>
+      </FilterTabs>
+
+      {filteredTweets.length === 0 ? (
+        <NoResults>
+          <NoResultsIcon />
+          <NoResultsText>
+            <h3>No results for "{searchQuery}"</h3>
+            <p>Try searching for something else.</p>
+          </NoResultsText>
+        </NoResults>
+      ) : (
+        <Tweet data={highlightedTweets} onUpdateTweet={onUpdateTweet} />
+      )}
+    </Container>
+  );
+};
+
+export default SearchResults;
\ No newline at end of file
diff --git a/src/components/SearchResults/styles.ts b/src/components/SearchResults/styles.ts
new file mode 100644
index 0000000..356ea38
--- /dev/null
+++ b/src/components/SearchResults/styles.ts
@@ -0,0 +1,129 @@
+import styled from 'styled-components';
+import { ArrowLeft, Search } from '@styled-icons/feather';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--primary);
+  position: sticky;
+  top: 0;
+  z-index: 999;
+`;
+
+export const BackButton = styled.button`
+  background: transparent;
+  border: none;
+  padding: 8px;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: var(--hover);
+  }
+`;
+
+export const BackIcon = styled(ArrowLeft)`
+  width: 20px;
+  height: 20px;
+  color: var(--twitter);
+`;
+
+export const SearchInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  strong {
+    font-size: 20px;
+    font-weight: bold;
+    color: var(--primary-text);
+  }
+`;
+
+export const ResultsCount = styled.span`
+  font-size: 13px;
+  color: var(--secondary-text);
+  margin-top: 2px;
+`;
+
+export const FilterTabs = styled.div`
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--primary);
+  position: sticky;
+  top: 73px;
+  z-index: 998;
+`;
+
+export const FilterTab = styled.button<{ isActive: boolean }>`
+  flex: 1;
+  background: transparent;
+  border: none;
+  padding: 16px;
+  font-size: 15px;
+  font-weight: ${props => props.isActive ? '700' : '400'};
+  color: ${props => props.isActive ? 'var(--twitter)' : 'var(--secondary-text)'};
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--hover);
+    color: var(--twitter);
+  }
+
+  ${props => props.isActive && `
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: var(--twitter);
+    }
+  `}
+`;
+
+export const NoResults = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 32px;
+  text-align: center;
+`;
+
+export const NoResultsIcon = styled(Search)`
+  width: 64px;
+  height: 64px;
+  color: var(--secondary-text);
+  margin-bottom: 24px;
+`;
+
+export const NoResultsText = styled.div`
+  h3 {
+    font-size: 31px;
+    font-weight: 800;
+    color: var(--primary-text);
+    margin-bottom: 8px;
+  }
+
+  p {
+    font-size: 15px;
+    color: var(--secondary-text);
+    line-height: 20px;
+  }
+`;
\ No newline at end of file
diff --git a/src/components/SideBar/index.tsx b/src/components/SideBar/index.tsx
index 7448fb7..0921b60 100644
--- a/src/components/SideBar/index.tsx
+++ b/src/components/SideBar/index.tsx
@@ -4,6 +4,7 @@ import StickyBox from 'react-sticky-box';
 import List from '../List';
 import FollowSuggestion from '../FollowSuggestion';
 import News from '../News';
+import ThemeToggle from '../ThemeToggle';
 
 import {
   Container,
@@ -48,6 +49,8 @@ const SideBar: React.FC = () => {
               <News header="Brazil · 3 hours ago" topic="He's gone again" />,
             ]}
           />
+
+          <ThemeToggle />
         </Body>
       </StickyBox>
     </Container>
diff --git a/src/components/ThemeToggle/index.tsx b/src/components/ThemeToggle/index.tsx
new file mode 100644
index 0000000..1fac772
--- /dev/null
+++ b/src/components/ThemeToggle/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import {
+  Container,
+  ToggleButton,
+  ToggleSlider,
+  ToggleCircle,
+  SunIcon,
+  MoonIcon,
+  Label,
+} from './styles';
+
+const ThemeToggle: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <Container>
+      <Label>
+        <SunIcon isActive={theme === 'light'} />
+        <ToggleButton onClick={toggleTheme} isDark={theme === 'dark'}>
+          <ToggleSlider isDark={theme === 'dark'}>
+            <ToggleCircle isDark={theme === 'dark'} />
+          </ToggleSlider>
+        </ToggleButton>
+        <MoonIcon isActive={theme === 'dark'} />
+      </Label>
+    </Container>
+  );
+};
+
+export default ThemeToggle;
\ No newline at end of file
diff --git a/src/components/ThemeToggle/styles.ts b/src/components/ThemeToggle/styles.ts
new file mode 100644
index 0000000..1b50b3b
--- /dev/null
+++ b/src/components/ThemeToggle/styles.ts
@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+import { WbSunny, Brightness2 } from 'styled-icons/material';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+`;
+
+export const Label = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  user-select: none;
+`;
+
+export const ToggleButton = styled.div<{ isDark: boolean }>`
+  position: relative;
+  width: 50px;
+  height: 26px;
+  background: ${props => props.isDark ? 'var(--twitter)' : '#ccc'};
+  border-radius: 13px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background: ${props => props.isDark ? '#1a8cd8' : '#999'};
+  }
+`;
+
+export const ToggleSlider = styled.div<{ isDark: boolean }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 13px;
+  transition: 0.3s;
+`;
+
+export const ToggleCircle = styled.div<{ isDark: boolean }>`
+  position: absolute;
+  top: 2px;
+  left: ${props => props.isDark ? '26px' : '2px'};
+  width: 22px;
+  height: 22px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: left 0.3s ease;
+`;
+
+export const SunIcon = styled(WbSunny)<{ isActive: boolean }>`
+  width: 20px !important;
+  height: 20px !important;
+  color: ${props => props.isActive ? '#ffd700' : 'var(--gray)'};
+  transition: color 0.3s ease;
+`;
+
+export const MoonIcon = styled(Brightness2)<{ isActive: boolean }>`
+  width: 20px !important;
+  height: 20px !important;
+  color: ${props => props.isActive ? 'var(--twitter)' : 'var(--gray)'};
+  transition: color 0.3s ease;
+`;
\ No newline at end of file
diff --git a/src/components/Tweet/index.tsx b/src/components/Tweet/index.tsx
index 202a3eb..1826bd6 100644
--- a/src/components/Tweet/index.tsx
+++ b/src/components/Tweet/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-
-import data from '../../data.json';
+import Comments from '../Comments';
+import { TweetType as UserType, Comment } from '../../types';
 
 import {
   Container,
@@ -20,25 +20,51 @@ import {
   LikeIcon,
 } from './styles';
 
-interface UserType {
-  avatar: string;
-  author: string;
-  twitteruser: string;
-  posttime: string;
-  posttext: string;
-}
-
 interface PropsType {
-  data?: Array<UserType>;
+  data: Array<UserType>;
+  onUpdateTweet: (tweetId: string, updatedTweet: Partial<UserType>) => void;
 }
 
-const Tweet: React.FC<PropsType> = () => {
-  const [likeCounter, setLikeCounter] = useState(0);
+const Tweet: React.FC<PropsType> = ({ data, onUpdateTweet }) => {
+  const [likeCounters, setLikeCounters] = useState<{[key: string]: number}>({});
+  const [expandedComments, setExpandedComments] = useState<{[key: string]: boolean}>({});
+
+  const handleLike = (index: number) => {
+    setLikeCounters(prev => ({
+      ...prev,
+      [index]: (prev[index] || 0) + 1
+    }));
+  };
+
+  const handleCommentAdd = (tweetId: string, comment: Comment) => {
+    const tweet = data.find(t => t.id === tweetId);
+    if (tweet) {
+      const updatedComments = [...(tweet.comments || []), comment];
+      onUpdateTweet(tweetId, {
+        comments: updatedComments,
+        commentscount: updatedComments.length,
+      });
+    }
+  };
+
+  const toggleComments = (tweetId: string) => {
+    setExpandedComments(prev => ({
+      ...prev,
+      [tweetId]: !prev[tweetId]
+    }));
+  };
+
+  const handleCommentClick = (tweetId: string) => {
+    setExpandedComments(prev => ({
+      ...prev,
+      [tweetId]: true
+    }));
+  };
 
   return (
     <>
       {data.map((user, index) => (
-        <Container key={index}>
+        <Container key={user.id}>
           {user.retweet ? (
             <Retweeted>
               <RocketseatIcon />
@@ -65,14 +91,14 @@ const Tweet: React.FC<PropsType> = () => {
 
               <ImageContent>
                 {user.postimage ? (
-                  <img src={user.postimage} alt="Imge Post" />
+                  <img src={user.postimage} alt="Post content" />
                 ) : (
                   ''
                 )}
               </ImageContent>
 
               <Icons>
-                <Status>
+                <Status onClick={() => handleCommentClick(user.id!)}>
                   <CommentIcon />
                   {user.commentscount}
                 </Status>
@@ -80,11 +106,20 @@ const Tweet: React.FC<PropsType> = () => {
                   <RetweetIcon />
                   {user.retweetscount}
                 </Status>
-                <Status onClick={() => setLikeCounter(likeCounter + 1)}>
+                <Status onClick={() => handleLike(index)}>
                   <LikeIcon />
-                  {user.likecount + likeCounter}
+                  {user.likecount + (likeCounters[index] || 0)}
                 </Status>
               </Icons>
+
+              <Comments
+                tweetId={user.id!}
+                commentsCount={user.commentscount}
+                comments={user.comments || []}
+                onCommentAdd={handleCommentAdd}
+                isExpanded={expandedComments[user.id!] || false}
+                onToggleComments={() => toggleComments(user.id!)}
+              />
             </Content>
           </Body>
         </Container>
diff --git a/src/components/Tweet/styles.ts b/src/components/Tweet/styles.ts
index 42271de..118b559 100644
--- a/src/components/Tweet/styles.ts
+++ b/src/components/Tweet/styles.ts
@@ -140,6 +140,10 @@ export const Icons = styled.div`
 export const Status = styled.div`
   display: flex;
   align-items: center;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 20px;
+  transition: background-color 0.2s;
 
   font-size: 14px;
 
@@ -147,11 +151,23 @@ export const Status = styled.div`
     margin-right: 5px;
   }
 
+  &:hover {
+    background-color: rgba(29, 161, 242, 0.1);
+  }
+
   &:nth-child(1) {
     &,
     > svg path {
       color: var(--gray);
     }
+
+    &:hover {
+      color: var(--twitter);
+      
+      > svg path {
+        fill: var(--twitter);
+      }
+    }
   }
 
   &:nth-child(2) {
@@ -160,6 +176,10 @@ export const Status = styled.div`
     > svg path {
       fill: var(--retweet);
     }
+
+    &:hover {
+      background-color: rgba(23, 191, 99, 0.1);
+    }
   }
 
   &:nth-child(3) {
@@ -168,6 +188,10 @@ export const Status = styled.div`
     > svg {
       fill: var(--like);
     }
+
+    &:hover {
+      background-color: rgba(224, 36, 94, 0.1);
+    }
   }
 `;
 
diff --git a/src/components/TweetComposer/index.tsx b/src/components/TweetComposer/index.tsx
new file mode 100644
index 0000000..7a78caa
--- /dev/null
+++ b/src/components/TweetComposer/index.tsx
@@ -0,0 +1,193 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Container,
+  Avatar,
+  InputSection,
+  TextArea,
+  ActionsBar,
+  LeftActions,
+  RightActions,
+  CharacterCount,
+  TweetButton,
+  IconButton,
+  ImagePreview,
+  RemoveImageButton,
+  EmojiPickerContainer,
+} from './styles';
+import {
+  Image as ImageIcon,
+  Emoji as EmojiIcon,
+  Close as CloseIcon,
+} from '../../styles/Icons';
+
+// Простой эмодзи-пикер
+const emojis = ['😀', '😂', '😍', '🤔', '😢', '😡', '👍', '👎', '❤️', '🔥', '💯', '🎉', '🙏', '👏', '🤝', '💪'];
+
+interface TweetComposerProps {
+  onTweetSubmit: (tweet: { text: string; image?: string }) => void;
+}
+
+const TweetComposer: React.FC<TweetComposerProps> = ({ onTweetSubmit }) => {
+  const [text, setText] = useState('');
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const emojiPickerRef = useRef<HTMLDivElement>(null);
+
+  // Закрыть эмодзи-пикер при клике вне его
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target as Node)) {
+        setShowEmojiPicker(false);
+      }
+    };
+
+    if (showEmojiPicker) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showEmojiPicker]);
+
+  const maxCharacters = 280;
+  const charactersLeft = maxCharacters - text.length;
+  const isOverLimit = charactersLeft < 0;
+  const canTweet = text.trim().length > 0 && !isOverLimit;
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+    // Auto resize textarea
+    if (textAreaRef.current) {
+      textAreaRef.current.style.height = 'auto';
+      textAreaRef.current.style.height = textAreaRef.current.scrollHeight + 'px';
+    }
+  };
+
+  const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        setSelectedImage(event.target?.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const removeImage = () => {
+    setSelectedImage(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const addEmoji = (emoji: string) => {
+    setText(prev => prev + emoji);
+    setShowEmojiPicker(false);
+    textAreaRef.current?.focus();
+  };
+
+  const handleSubmit = () => {
+    if (canTweet) {
+      onTweetSubmit({
+        text: text.trim(),
+        image: selectedImage || undefined,
+      });
+      setText('');
+      setSelectedImage(null);
+      setShowEmojiPicker(false);
+      if (textAreaRef.current) {
+        textAreaRef.current.style.height = 'auto';
+      }
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      handleSubmit();
+    }
+  };
+
+  return (
+    <Container>
+      <Avatar>
+        <img
+          src="https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4"
+          alt="Your avatar"
+        />
+      </Avatar>
+      
+      <InputSection>
+        <TextArea
+          ref={textAreaRef}
+          placeholder="What's happening?"
+          value={text}
+          onChange={handleTextChange}
+          onKeyDown={handleKeyDown}
+          maxLength={maxCharacters + 50} // Allow some extra for visual feedback
+        />
+        
+        {selectedImage && (
+          <ImagePreview>
+            <img src={selectedImage} alt="Selected" />
+            <RemoveImageButton onClick={removeImage}>
+              <CloseIcon />
+            </RemoveImageButton>
+          </ImagePreview>
+        )}
+        
+        <ActionsBar>
+          <LeftActions>
+            <IconButton onClick={() => fileInputRef.current?.click()}>
+              <ImageIcon />
+            </IconButton>
+            
+            <IconButton onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
+              <EmojiIcon />
+            </IconButton>
+            
+            {showEmojiPicker && (
+              <EmojiPickerContainer ref={emojiPickerRef}>
+                {emojis.map((emoji, index) => (
+                  <span
+                    key={index}
+                    onClick={() => addEmoji(emoji)}
+                    style={{ cursor: 'pointer', fontSize: '20px', padding: '5px' }}
+                  >
+                    {emoji}
+                  </span>
+                ))}
+              </EmojiPickerContainer>
+            )}
+            
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={handleImageSelect}
+              style={{ display: 'none' }}
+            />
+          </LeftActions>
+          
+          <RightActions>
+            <CharacterCount isOverLimit={isOverLimit}>
+              {charactersLeft}
+            </CharacterCount>
+            
+            <TweetButton 
+              onClick={handleSubmit}
+              disabled={!canTweet}
+            >
+              Tweet
+            </TweetButton>
+          </RightActions>
+        </ActionsBar>
+      </InputSection>
+    </Container>
+  );
+};
+
+export default TweetComposer;
\ No newline at end of file
diff --git a/src/components/TweetComposer/styles.ts b/src/components/TweetComposer/styles.ts
new file mode 100644
index 0000000..89e4d8e
--- /dev/null
+++ b/src/components/TweetComposer/styles.ts
@@ -0,0 +1,193 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  padding: 16px;
+  border-bottom: 1px solid var(--outline);
+  background-color: var(--primary);
+`;
+
+export const Avatar = styled.div`
+  width: 49px;
+  height: 49px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 12px;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+export const InputSection = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+
+export const TextArea = styled.textarea`
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 20px;
+  color: var(--white);
+  resize: none;
+  min-height: 50px;
+  max-height: 200px;
+  font-family: inherit;
+  line-height: 1.3;
+  margin-bottom: 12px;
+
+  &::placeholder {
+    color: var(--gray);
+  }
+
+  &:focus::placeholder {
+    opacity: 0.5;
+  }
+`;
+
+export const ImagePreview = styled.div`
+  position: relative;
+  margin: 12px 0;
+  border-radius: 16px;
+  overflow: hidden;
+  max-width: 100%;
+  
+  img {
+    width: 100%;
+    max-height: 300px;
+    object-fit: cover;
+    border-radius: 16px;
+  }
+`;
+
+export const RemoveImageButton = styled.button`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.75);
+  border: none;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.9);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+export const ActionsBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+`;
+
+export const LeftActions = styled.div`
+  display: flex;
+  gap: 16px;
+  position: relative;
+`;
+
+export const RightActions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+export const IconButton = styled.button`
+  background: transparent;
+  border: none;
+  color: var(--twitter);
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: rgba(29, 161, 242, 0.1);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+export const CharacterCount = styled.span<{ isOverLimit: boolean }>`
+  font-size: 13px;
+  color: ${props => {
+    if (props.isOverLimit) return '#E1306C';
+    const remaining = parseInt(props.children as string);
+    if (remaining <= 20) return '#FF6B35';
+    if (remaining <= 50) return '#FFD23F';
+    return 'var(--gray)';
+  }};
+  font-weight: ${props => props.isOverLimit ? 'bold' : 'normal'};
+  min-width: 25px;
+  text-align: center;
+  transition: color 0.2s ease;
+`;
+
+export const TweetButton = styled.button`
+  background-color: var(--twitter);
+  color: white;
+  border: none;
+  border-radius: 20px;
+  padding: 8px 20px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 15px;
+
+  &:hover:not(:disabled) {
+    background-color: #1a8cd8;
+  }
+
+  &:disabled {
+    background-color: rgba(29, 161, 242, 0.5);
+    cursor: not-allowed;
+  }
+`;
+
+export const EmojiPickerContainer = styled.div`
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background: var(--primary);
+  border: 1px solid var(--outline);
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+  max-width: 300px;
+
+  span {
+    &:hover {
+      background: var(--outline);
+      border-radius: 4px;
+    }
+  }
+`;
\ No newline at end of file
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..4073f2d
--- /dev/null
+++ b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,75 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+export type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>(() => {
+    // Загружаем сохраненную тему из localStorage или используем темную по умолчанию
+    const savedTheme = localStorage.getItem('twitter-clone-theme') as Theme;
+    return savedTheme || 'dark';
+  });
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => {
+      const newTheme = prevTheme === 'light' ? 'dark' : 'light';
+      localStorage.setItem('twitter-clone-theme', newTheme);
+      return newTheme;
+    });
+  };
+
+  useEffect(() => {
+    // Применяем CSS переменные для текущей темы
+    const root = document.documentElement;
+    
+    if (theme === 'light') {
+      root.style.setProperty('--primary', '#ffffff');
+      root.style.setProperty('--secondary', '#f7f9fa');
+      root.style.setProperty('--search', '#efeef4');
+      root.style.setProperty('--white', '#000000');
+      root.style.setProperty('--gray', '#657786');
+      root.style.setProperty('--outline', '#e1e8ed');
+      root.style.setProperty('--twitter-dark-hover', '#f7f9fa');
+      root.style.setProperty('--twitter-light-hover', '#1da1f20f');
+    } else {
+      // Темная тема (оригинальные значения)
+      root.style.setProperty('--primary', '#000');
+      root.style.setProperty('--secondary', '#15181C');
+      root.style.setProperty('--search', '#202327');
+      root.style.setProperty('--white', '#D9D9D9');
+      root.style.setProperty('--gray', '#7A7A7A');
+      root.style.setProperty('--outline', '#2F3336');
+      root.style.setProperty('--twitter-dark-hover', '#080808');
+      root.style.setProperty('--twitter-light-hover', '#1da1f20f');
+    }
+  }, [theme]);
+
+  const value = {
+    theme,
+    toggleTheme,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
\ No newline at end of file
diff --git a/src/data.json b/src/data.json
index 15a359e..cefa0c4 100644
--- a/src/data.json
+++ b/src/data.json
@@ -1,4 +1,37 @@
 [
+  {
+    "avatar": "https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4",
+    "author": "Elton Lazzarin",
+    "twitteruser": "@elton_lazzarin",
+    "posttime": "1m",
+    "posttext": "Working on a new #React project with #TypeScript! Loving the new features 🚀 Thanks @vercel for the inspiration! #WebDevelopment #JavaScript",
+    "retweet": false,
+    "commentscount": 12,
+    "retweetscount": 5,
+    "likecount": 25
+  },
+  {
+    "avatar": "https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4",
+    "author": "Elton Lazzarin",
+    "twitteruser": "@elton_lazzarin",
+    "posttime": "5m",
+    "posttext": "Just discovered some amazing #CSS tricks! 🎨 #Frontend developers will love this. Shoutout to @csswizardry for the amazing tips! #WebDesign",
+    "retweet": false,
+    "commentscount": 8,
+    "retweetscount": 12,
+    "likecount": 18
+  },
+  {
+    "avatar": "https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4",
+    "author": "Elton Lazzarin",
+    "twitteruser": "@elton_lazzarin",
+    "posttime": "10m",
+    "posttext": "Check out my latest #OpenSource project on GitHub! Built with #React #Node #MongoDB. Thanks @github for the platform! 💻 #Programming #FullStack",
+    "retweet": false,
+    "commentscount": 15,
+    "retweetscount": 8,
+    "likecount": 22
+  },
   {
     "avatar": "https://avatars1.githubusercontent.com/u/53025782?s=400&u=f1ffa8eaccb8545222b7c642532161f11e74a03d&v=4",
     "author": "Elton Lazzarin",
diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts
index a16b4fa..c44479e 100644
--- a/src/styles/GlobalStyles.ts
+++ b/src/styles/GlobalStyles.ts
@@ -39,5 +39,11 @@ export default createGlobalStyle`
     --twitter: #33a1f2;
     --twitter-dark-hover: #011017;
     --twitter-light-hover: #2c8ed6;
+    
+    /* Новые переменные для поиска */
+    --primary-text: #d9d9d9;
+    --secondary-text: #71767b;
+    --border: #2f3336;
+    --hover: #181818;
   }
 `;
diff --git a/src/styles/Icons.ts b/src/styles/Icons.ts
index fa9572a..ae556e2 100644
--- a/src/styles/Icons.ts
+++ b/src/styles/Icons.ts
@@ -8,9 +8,12 @@ export {
   KeyboardArrowDown,
   LocationOn,
   Search,
+  Image,
+  Close,
 } from 'styled-icons/material-outlined';
 export { Person, Cake, Favorite } from 'styled-icons/material';
 export { ArrowLeft } from 'styled-icons/heroicons-solid';
 export { Hashtag, Retweet } from 'styled-icons/fa-solid';
 export { Twitter } from 'styled-icons/fa-brands';
 export { Chat } from 'styled-icons/heroicons-outline';
+export { EmojiEmotions as Emoji } from 'styled-icons/material';
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..65b44bf
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,26 @@
+export interface Comment {
+  id: string;
+  author: string;
+  avatar: string;
+  text: string;
+  time: string;
+}
+
+export interface TweetType {
+  avatar: string;
+  author: string;
+  twitteruser: string;
+  posttime: string;
+  posttext: string | JSX.Element | (string | JSX.Element)[];
+  retweet?: boolean;
+  postimage?: string;
+  commentscount: number;
+  retweetscount: number;
+  likecount: number;
+  id: string;
+  comments?: Comment[];
+}
+
+export interface UserType extends TweetType {
+  // UserType и TweetType теперь одинаковые
+}
\ No newline at end of file