diff --git a/src/components/footer/contactValueContainer.tsx b/src/components/footer/contactValueContainer.tsx
new file mode 100644
index 0000000..f21505e
--- /dev/null
+++ b/src/components/footer/contactValueContainer.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+
+type TProps = {
+    type: 'a' | 'email' | 'phone' | 'text'
+    value: string
+    href?: string
+}
+
+export const ContactValueContainer:React.FC<TProps> = React.memo((props) => {
+    const [jsxValue, setJsxValue] = useState<JSX.Element>(<></>);
+
+    useEffect(() => {
+        switch(props.type) {
+            case 'a':
+                setJsxValue(
+                    <a href={props?.href} target='_blank' rel="noreferrer noopener" className='contact-data-href'>{props.value}</a>
+                )
+                break;
+            case 'email':
+                setJsxValue(
+                    <a href={`mailto: ${props.href}`} className='contact-data-href'>{props.value}</a>
+                )
+                break;
+            case 'phone': 
+                setJsxValue(
+                    <a href={`tel:${props.href}`} className='contact-data-href'>{props.value}</a>
+                )
+                break;
+            case 'text':
+                setJsxValue(
+                    <span className="contact-data-text">{props.value}</span>
+                )
+                break;
+        }
+    }, [props.value, props.type, props?.href])
+
+    return <div className="contact-data-value-container">
+        <span className="contact-data-value">
+            {jsxValue}
+        </span>
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/footer/contactsContainer.tsx b/src/components/footer/contactsContainer.tsx
index ceb2daf..8a65dae 100644
--- a/src/components/footer/contactsContainer.tsx
+++ b/src/components/footer/contactsContainer.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 import { ContextLang } from "../ContextLang";
+import { ContactValueContainer } from "./contactValueContainer";
 
 type TProps = {
     title: {
@@ -8,17 +9,20 @@ type TProps = {
     }
     href?: string
     pairData: Array<{
-        value1: {
-            ru: string,
-            en: string
-        } | string, 
-        value2?: {
-            ru: string,
-            en: string
-        } | string
+        value1: ContactValueType
+        value2?: ContactValueType
     }>
 }
 
+type ContactValueType = {
+    type: 'a' | 'email' | 'phone' | 'text'
+    value: {
+        ru: string,
+        en: string
+    } | string
+    href?: string
+}
+
 export const ContactContainer:React.FC<TProps> = React.memo((props) => {
     const {lang} = useContext(ContextLang);
     return <div className="contact-container">
@@ -28,13 +32,23 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
         </div>
         {
             props.href 
-            ? <a href={`https://${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
+            // ? <a href={`https://${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
+            ? <a href={`${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
             : null
         }
         <div className="contact-data-container">
             {props.pairData.map(pair => {
-                return <div key={typeof(pair.value1) === 'string' ? pair.value1 : pair.value1[lang]} className="contact-data-row">
-                    <div className="contact-data-value-container">
+                return <div key={typeof(pair.value1.value) === 'string' ? pair.value1.value : pair.value1.value[lang]} className="contact-data-row">
+                    <ContactValueContainer 
+                        type={pair.value1.type}
+                        value={
+                            typeof(pair.value1.value)  === 'string'
+                            ? pair.value1.value
+                            : pair.value1.value[lang]
+                        }
+                        href={pair.value1?.href}
+                    />                   
+                    {/* <div className="contact-data-value-container">
                         <span className="contact-data-value">
                             {
                                 typeof(pair.value1) === 'string' 
@@ -46,8 +60,22 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
                                     : pair.value1[lang]
                             }
                         </span>
-                    </div>
+                    </div> */}
                     {
+                        pair.value2?.type
+                        ? <ContactValueContainer 
+                            type={pair.value2.type}
+                            value={
+                                typeof(pair.value2.value)  === 'string'
+                                ? pair.value2.value
+                                : pair.value2.value[lang]
+                            }
+                            href={pair.value2?.href}
+                        />
+                        : null
+                    }
+                    
+                    {/* {
                         pair?.value2
                         ? <div className="contact-data-value-container">
                             <span className="contact-data-value">
@@ -63,7 +91,7 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
                             </span>    
                         </div>
                         : null
-                    }                    
+                    }                     */}
                 </div>
             })}
         </div>
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
index f154aa4..9e08bb9 100644
--- a/src/components/footer/footer.css
+++ b/src/components/footer/footer.css
@@ -63,15 +63,21 @@
     background-color: #979797;
 }
 
+.contact-data-text {
+    
+}
+
 .contact-href,
 a {
     color: #FFFFFF;
     transition: .2s;
+    text-decoration: none;
 }
 
 .contact-href:hover,
 a:hover {
     color: #CE56C2;
+    text-decoration: underline;
     transition: .2s;
 }
 
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 8c6affd..cb14b41 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -12,11 +12,38 @@ export const Footer:React.FC = React.memo(() => {
                 <div className="footer-content-contacts-first-container">
                     <ContactContainer
                         title={LangDict.contactTitle}
-                        href="graff.tech"
+                        href="https://graff.tech"
                         pairData={[
-                            {value1: LangDict.contactRus, value2: LangDict.contactUae},
-                            {value1: 'info@graff.tech', value2: 'waseem@graff.tech'},
-                            {value1: '+7 800 770 00 67', value2: '+971 50 983 8902'}
+                            {
+                                value1: {
+                                    type: "text",
+                                    value: LangDict.contactRus                                    
+                                }, 
+                                value2: {
+                                    type: 'text',
+                                    value: LangDict.contactUae
+                                }
+                            },
+                            {
+                                value1: {
+                                    type: 'email',
+                                    value: 'info@graff.tech'
+                                }, 
+                                value2: {
+                                    type: 'email',
+                                    value: 'waseem@graff.tech'
+                                }
+                            },
+                            {
+                                value1: {
+                                    type: "phone",
+                                    value: '+7 800 770 00 67'
+                                }, 
+                                value2: {
+                                    type: "phone",
+                                    value: '+971 50 983 8902'
+                                }
+                            }
                         ]}
                     />
                 </div>
@@ -24,15 +51,47 @@ export const Footer:React.FC = React.memo(() => {
                     <ContactContainer
                         title={LangDict.socials}
                         pairData={[
-                            {value1: 'Facebook', value2: 'Instagram'},
-                            {value1: 'YouTube', value2: 'VK'}
+                            {
+                                value1: {
+                                    type: 'a',
+                                    value: 'Facebook',
+                                    href: 'https://www.facebook.com/GRAFFinteractive'
+                                }, 
+                                value2: {
+                                    type: 'a',
+                                    value: 'Instagram',
+                                    href: 'https://www.instagram.com/graffinteractive/'
+                                }
+                            },
+                            {
+                                value1: {
+                                    type: 'a',
+                                    value: 'YouTube',
+                                    href: 'https://www.youtube.com/channel/UCveYBNLVeGxgsDsfhrVxNoA'
+                                },
+                                value2: {
+                                    type: "a",
+                                    value: 'VK',
+                                    href: 'https://vk.com/graffinteractive'
+                                }
+                            }
                         ]}
                     />
                     <ContactContainer
                         title={LangDict.address}
                         pairData={[
-                            {value1: LangDict.streetName},
-                            {value1: LangDict.townName}
+                            {
+                                value1: {
+                                    type: "text",
+                                    value: LangDict.streetName
+                                }                                
+                            },
+                            {
+                                value1: {
+                                    type: "text",
+                                    value: LangDict.townName
+                                }
+                            }
                         ]}
                     />
                 </div>