diff --git a/app/src/main/java/com/aditya/hopon/patternsActivity.java b/app/src/main/java/com/aditya/hopon/patternsActivity.java
index 5a27373..152468f 100644
--- a/app/src/main/java/com/aditya/hopon/patternsActivity.java
+++ b/app/src/main/java/com/aditya/hopon/patternsActivity.java
@@ -2,17 +2,32 @@
 
 import androidx.appcompat.app.AppCompatActivity;
 import androidx.appcompat.widget.Toolbar;
+import androidx.cardview.widget.CardView;
+import androidx.core.content.ContextCompat;
+import androidx.core.content.res.ResourcesCompat;
 import androidx.cursoradapter.widget.SimpleCursorAdapter;
+import androidx.transition.AutoTransition;
+import androidx.transition.TransitionManager;
 
 import android.content.ContentValues;
 import android.content.SharedPreferences;
+import android.content.res.ColorStateList;
 import android.database.Cursor;
+import android.graphics.drawable.Drawable;
 import android.os.Bundle;
+import android.transition.Transition;
+import android.util.Log;
 import android.view.MenuItem;
+import android.view.View;
 import android.widget.AdapterView;
+import android.widget.ImageView;
+import android.widget.LinearLayout;
+import android.widget.ListAdapter;
 import android.widget.ListView;
 import android.widget.TextView;
 
+import org.w3c.dom.Text;
+
 public class patternsActivity extends AppCompatActivity {
     private TextView toolbartitle;
     private DBManager dbManager;
@@ -37,19 +52,126 @@ protected void onCreate(Bundle savedInstanceState) {
         dbManager.open();
         if(firstStart){
             dbManager.insert("Regular","122426182A2C",1);
+            dbManager.insert("Single Jumps","1214181C",2);
+            dbManager.insert("Multiplex","212315172A2C",1);
             SharedPreferences.Editor editor=sharedPreferences.edit();
             editor.putBoolean("firstStart",false);
             editor.apply();
         }
         Cursor cursor = dbManager.fetch();
-
         listView = (ListView) findViewById(R.id.patterns_list);
         listView.setEmptyView(findViewById(R.id.emptytextpattern));
-
         adapter = new SimpleCursorAdapter(this, R.layout.pattern_view_layout, cursor, from, to, 0);
         adapter.notifyDataSetChanged();
         listView.setAdapter(adapter);
+        //OnCLickListener for List Items
+        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
+            @Override
+            public void onItemClick(AdapterView<?> parent, View view, int position, long viewId) {
+                TextView idTextView = (TextView) view.findViewById(R.id.patternid);
+                TextView nameTextView = (TextView) view.findViewById(R.id.patternname);
+                TextView sequenceTextView = (TextView) view.findViewById(R.id.patternsequence);
+                TextView patternmode = (TextView) view.findViewById(R.id.patternmode);
+                ImageView patternmodeic=(ImageView)view.findViewById(R.id.patternmodeic);
+                String id = idTextView.getText().toString();
+                String name = nameTextView.getText().toString();
+                String sequence = sequenceTextView.getText().toString();
+                //game mode handling
+                if(patternmode.getVisibility()== View.INVISIBLE){
+                    int mode=Integer.parseInt(patternmode.getText().toString());
+                    if(mode==1)patternmode.setText("Normal Mode");
+                    else if(mode==2){
+                        patternmodeic.setImageResource(R.drawable.ic_baseline_timer_24);
+                        patternmode.setText("Timed Mode");
+                    }
+                    patternmode.setVisibility(View.VISIBLE);
+                }
+                else{
+                    if(patternmode.getText().toString().equals("Normal Mode")){patternmode.setText("1");}
+                    else{patternmode.setText("2");}
+                    patternmode.setVisibility(View.INVISIBLE);
+                }
+                //game mode handling ends here
+                //pattern display
+                ImageView img1=(ImageView)view.findViewById(R.id.pattgrid1);
+                ImageView img2=(ImageView)view.findViewById(R.id.pattgrid2);
+                ImageView img3=(ImageView)view.findViewById(R.id.pattgrid3);
+                ImageView img4=(ImageView)view.findViewById(R.id.pattgrid4);
+                ImageView img5=(ImageView)view.findViewById(R.id.pattgrid5);
+                ImageView img6=(ImageView)view.findViewById(R.id.pattgrid6);
+                ImageView img7=(ImageView)view.findViewById(R.id.pattgrid7);
+                ImageView img8=(ImageView)view.findViewById(R.id.pattgrid8);
+                ImageView img9=(ImageView)view.findViewById(R.id.pattgrid9);
+                ImageView imgA=(ImageView)view.findViewById(R.id.pattgridA);
+                ImageView imgB=(ImageView)view.findViewById(R.id.pattgridB);
+                ImageView imgC=(ImageView)view.findViewById(R.id.pattgridC);
 
+                for(int i=0;i<sequence.length();i++){
+                    if(sequence.charAt(i)=='1'){
+                        i++;
+                        switch(sequence.charAt(i)){
+                            case '1':img1.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case '2':img2.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case '3':img3.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case '4':img4.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case '5':img5.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case '6':img6.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case '7':img7.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case '8':img8.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case '9':img9.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case 'A':imgA.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case 'B':imgB.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                            case 'C':imgC.setImageTintList(ColorStateList.valueOf(0xFFFF0000));break;
+                        }
+                    }
+                    else{
+                        i++;
+                        switch(sequence.charAt(i)){
+                            case '1':img1.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '2':img2.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '3':img3.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '4':img4.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '5':img5.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '6':img6.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '7':img7.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '8':img8.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '9':img9.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case 'A':imgA.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case 'B':imgB.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case 'C':imgC.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                        }
+                        i+=2;
+                        switch(sequence.charAt(i)){
+                            case '1':img1.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '2':img2.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '3':img3.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '4':img4.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '5':img5.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '6':img6.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '7':img7.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '8':img8.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case '9':img9.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case 'A':imgA.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case 'B':imgB.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                            case 'C':imgC.setImageTintList(ColorStateList.valueOf(0xFF0000FF));break;
+                        }
+                    }
+                }
+                //pattern display ends here
+                //hidden layout handling
+                LinearLayout hiddenpatternlayout=(LinearLayout)view.findViewById(R.id.hiddenpatternlayout);
+                CardView patterncardview=(CardView)view.findViewById(R.id.patterncardview);
+                if(hiddenpatternlayout.getVisibility()==View.VISIBLE){
+                    TransitionManager.beginDelayedTransition(patterncardview, new AutoTransition());
+                    hiddenpatternlayout.setVisibility(View.GONE);
+                }
+                else{
+                    TransitionManager.beginDelayedTransition(patterncardview, new AutoTransition());
+                    hiddenpatternlayout.setVisibility(View.VISIBLE);
+                }
+                //hidden layout handling ends here
+            }
+        });
     }
     @Override
     public boolean onOptionsItemSelected(MenuItem item) {
diff --git a/app/src/main/res/drawable/box.xml b/app/src/main/res/drawable/box.xml
index 4bf4dbd..849546b 100644
--- a/app/src/main/res/drawable/box.xml
+++ b/app/src/main/res/drawable/box.xml
@@ -3,7 +3,8 @@
 <item>
     <shape android:shape="rectangle">
     <solid android:color="@color/white"/>
-        <corners android:radius="1dp"/>
+        <stroke android:width="2dp" android:color="@color/black"/>
+        <corners android:radius="10dp"/>
     </shape>
 </item>
 </selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_baseline_timer_24.xml b/app/src/main/res/drawable/ic_baseline_timer_24.xml
new file mode 100644
index 0000000..1897572
--- /dev/null
+++ b/app/src/main/res/drawable/ic_baseline_timer_24.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M15,1L9,1v2h6L15,1zM11,14h2L13,8h-2v6zM19.03,7.39l1.42,-1.42c-0.43,-0.51 -0.9,-0.99 -1.41,-1.41l-1.42,1.42C16.07,4.74 14.12,4 12,4c-4.97,0 -9,4.03 -9,9s4.02,9 9,9 9,-4.03 9,-9c0,-2.12 -0.74,-4.07 -1.97,-5.61zM12,20c-3.87,0 -7,-3.13 -7,-7s3.13,-7 7,-7 7,3.13 7,7 -3.13,7 -7,7z"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_baseline_videogame_asset_24.xml b/app/src/main/res/drawable/ic_baseline_videogame_asset_24.xml
new file mode 100644
index 0000000..97196ad
--- /dev/null
+++ b/app/src/main/res/drawable/ic_baseline_videogame_asset_24.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M21,6L3,6c-1.1,0 -2,0.9 -2,2v8c0,1.1 0.9,2 2,2h18c1.1,0 2,-0.9 2,-2L23,8c0,-1.1 -0.9,-2 -2,-2zM11,13L8,13v3L6,16v-3L3,13v-2h3L6,8h2v3h3v2zM15.5,15c-0.83,0 -1.5,-0.67 -1.5,-1.5s0.67,-1.5 1.5,-1.5 1.5,0.67 1.5,1.5 -0.67,1.5 -1.5,1.5zM19.5,12c-0.83,0 -1.5,-0.67 -1.5,-1.5S18.67,9 19.5,9s1.5,0.67 1.5,1.5 -0.67,1.5 -1.5,1.5z"/>
+</vector>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index 79aafc6..2244d6d 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -29,6 +29,7 @@
                 android:layout_marginLeft="16dp"
                 android:layout_marginRight="16dp"
                 android:layout_marginTop="16dp"
+                android:layout_marginBottom="16dp"
                 app:cardElevation="8dp"
                 app:cardCornerRadius="8dp">
                 <LinearLayout
diff --git a/app/src/main/res/layout/activity_pattern.xml b/app/src/main/res/layout/activity_pattern.xml
index 5a042c5..060849f 100644
--- a/app/src/main/res/layout/activity_pattern.xml
+++ b/app/src/main/res/layout/activity_pattern.xml
@@ -13,7 +13,7 @@
         android:layout_below="@+id/pattern_toolbar"
         android:id="@+id/patterns_list"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
+        android:layout_height="match_parent"
         android:padding="10dp"
         android:dividerHeight="1dp"/>
     <TextView
diff --git a/app/src/main/res/layout/fragment_emp_list.xml b/app/src/main/res/layout/fragment_emp_list.xml
deleted file mode 100644
index 8469a44..0000000
--- a/app/src/main/res/layout/fragment_emp_list.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent" android:layout_height="match_parent">
-
-</RelativeLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/pattern_view_layout.xml b/app/src/main/res/layout/pattern_view_layout.xml
index 4ff1cc9..6c31989 100644
--- a/app/src/main/res/layout/pattern_view_layout.xml
+++ b/app/src/main/res/layout/pattern_view_layout.xml
@@ -2,44 +2,189 @@
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:orientation="vertical" >
-    <TextView
-        android:id="@+id/patternid"
-        android:layout_width="25dp"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:orientation="vertical">
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/patterncardview"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_alignParentLeft="true"
-        android:layout_alignParentTop="true"
-        android:layout_marginRight="6dp"
-        android:padding="3dp"
-        android:visibility="visible" />
+        android:layout_marginLeft="16dp"
+        android:background="?attr/colorOnSecondary"
+        android:layout_marginRight="16dp"
+        android:layout_marginTop="16dp"
+        android:layout_marginBottom="16dp"
+        app:cardElevation="8dp"
+        app:cardCornerRadius="8dp">
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+            <RelativeLayout
+                android:id="@+id/fixedpatternlayout"
+                android:layout_width="match_parent"
+                android:layout_height="100dp"
+                android:orientation="horizontal"
+                app:layout_constraintBottom_toTopOf="@id/hiddenpatternlayout"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent">
 
-    <TextView
-        android:id="@+id/patternname"
-        android:layout_width="fill_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginLeft="10dp"
-        android:layout_toRightOf="@id/patternid"
-        android:maxLines="1"
-        android:padding="3dp"
-        android:textSize="17sp"
-        android:textStyle="bold" />
+                <TextView
+                    android:id="@+id/patternid"
+                    android:layout_width="wrap_content"
+                    android:layout_height="match_parent"
+                    android:layout_alignParentStart="true"
+                    android:gravity="center"
+                    android:layout_marginLeft="10dp"
+                    android:textSize="20sp"
+                    android:fontFamily="@font/uniformroundedextracondensedblack"
+                    android:textColor="?android:attr/textColorPrimary" />
+                <TextView
+                    android:id="@+id/patternsequence"
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:visibility="invisible"/>
+                <TextView
+                    android:id="@+id/patternname"
+                    android:layout_width="wrap_content"
+                    android:layout_centerInParent="true"
+                    android:textSize="20sp"
+                    android:textStyle="bold"
+                    android:textColor="?android:attr/textColorPrimary"
+                    android:layout_height="wrap_content" />
+                <androidx.appcompat.widget.AppCompatImageView
+                    android:id="@+id/patternmodeic"
+                    android:layout_alignParentRight="true"
+                    android:layout_marginRight="10dp"
+                    android:layout_marginTop="10dp"
+                    android:src="@drawable/ic_baseline_videogame_asset_24"
+                    android:layout_width="50dp"
+                    android:layout_height="50dp" />
+                <TextView
+                    android:id="@+id/patternmode"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:visibility="invisible"
+                    android:layout_marginEnd="10dp"
+                    android:layout_below="@id/patternmodeic"
+                    android:layout_alignParentRight="true" />
+            </RelativeLayout>
+            <LinearLayout
+                android:id="@+id/hiddenpatternlayout"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:visibility="gone"
+                android:orientation="vertical"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/fixedpatternlayout">
+                <GridLayout
+                    android:layout_width="wrap_content"
+                    android:layout_gravity="center"
+                    android:rowCount="4"
+                    android:columnCount="3"
+                    android:layout_height="wrap_content">
+                    <ImageView
+                        android:id="@+id/pattgridA"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgridB"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgridC"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid7"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid8"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid9"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid4"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid5"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid6"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid1"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid2"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                    <ImageView
+                        android:id="@+id/pattgrid3"
+                        android:layout_width="40dp"
+                        android:layout_rowWeight="1"
+                        android:layout_columnWeight="1"
+                        android:layout_height="40dp"
+                        android:layout_gravity="center"
+                        android:src="@drawable/box"/>
+                </GridLayout>
 
-    <TextView
-        android:id="@+id/patternsequence"
-        android:layout_width="fill_parent"
-        android:layout_height="wrap_content"
-        android:layout_below="@id/patternname"
-        android:layout_marginLeft="10dp"
-        android:layout_toRightOf="@id/patternid"
-        android:ellipsize="end"
-        android:maxLines="2"
-        android:padding="3dp"
-        android:visibility="visible" />
+            </LinearLayout>
+        </androidx.constraintlayout.widget.ConstraintLayout>
 
-    <TextView
-        android:id="@+id/patternmode"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_below="@+id/patternsequence" />
+    </com.google.android.material.card.MaterialCardView>
 
 </RelativeLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index f8c6127..f5bd513 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -7,4 +7,6 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="red">#FF0000</color>
+    <color name="blue">#0000FF</color>
 </resources>
\ No newline at end of file